:root {
    /* color */
    --color-border: #ccc;
    --color-bg-sidebar: #eee;
    --color-bg-panel: #fafafa;
    --color-accent: #ff7700;
    --color-accent-hover: #ff9900;
    --color-accent-border: #ff770080;
    --color-accent-bg-subtle: #ff770010;

    /* layout */
    --sidebar-width: 250px;
    --radius: 4px;

    /* spacing scale */
    --size-xs2: 0.125rem;
    --size-xs: 0.25rem;
    --size-sm: 0.5rem;
    --size-md: 1rem;
    --size-lg: 2rem;
    --size-xl: 3rem;
}
html,
body {
    font-family: system-ui, Arial, sans-serif;
    position: relative;
}
#root {
    min-height: 100vh;
}
.app-body {
    display: flex;
    flex: 1;
}
header {
    position: fixed;
    height: 100%;
    width: var(--sidebar-width);
    padding: var(--size-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--size-sm);
    border-right: 3px solid var(--color-border);
    background-color: var(--color-bg-sidebar);
    .main-title a {
        text-decoration: none;
        color: inherit;
    }
    .create-new-guide-btn {
        padding: var(--size-sm) var(--size-md);
        border-radius: var(--radius);
        background-color: var(--color-accent);
        color: #fff;
        text-decoration: none;
        font-weight: bold;
        text-align: center;
    }
    .guide-list {
        list-style: none;
        padding: 0;
        margin-top: var(--size-sm);
        display: flex;
        flex-direction: column;
        gap: var(--size-sm);
    }
}
main {
    margin-left: var(--sidebar-width);
    flex: 1;
    padding: var(--size-md);
}
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    padding: var(--size-sm);
    text-align: center;
    width: var(--sidebar-width);
}
nav {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: var(--size-lg);
    width: 100%;
    a {
        padding: 0.6rem var(--size-md) 0.5rem;
        border-radius: var(--radius);
        line-height: 1;
        display: block;
    }
    .settings-btn {
        margin-top: auto;
        align-self: center;
        font-weight: bold;
    }
    .settings-btn.active {
        margin-top: auto;
        align-self: center;
        color: var(--color-accent);
    }
    h2 {
        margin-top: var(--size-lg);
        font-size: 1rem;
        opacity: 0.5;
    }
    li {
        width: 100%;
    }
    .guide-list a {
        transition:
            background-color 0.125s,
            border-left 0.125s;
        background-color: #fff;
        border-left: 4px solid var(--color-border);
    }
    .guide-list a.active {
        background-color: #fff;
        border-left: 4px solid var(--color-accent);
    }
    .guide-list a:hover:not(.active) {
        border-left: 4px solid var(--color-accent-hover);
        opacity: 0.8;
    }
}
ul {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--size-xs);
    list-style: none;
}
a,
input,
button,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
}
a {
    text-decoration: none;
}
input,
textarea,
.file-upload {
    border: 2px solid var(--color-bg-sidebar);
    border-radius: var(--radius);
    padding: var(--size-sm);
}
textarea {
    resize: none;
    height: 5rem;
}
hr {
    margin: var(--size-md) 0;
    border: none;
    height: 3px;
    background-color: var(--color-bg-sidebar);
    border-radius: var(--radius);
}
:focus-visible {
    border: 2px solid var(--color-accent);
}
@media print {
    header,
    footer,
    button,
    .edit-button {
        display: none;
    }
    main {
        margin: 0;
    }
}