/* =========================================================================
   VIZInaIZI — "Uradni list"
   The visual language of Slovenian legal publishing: white statute paper,
   official blue chrome, and red reserved for marking — a red pen and a book
   ribbon, never a button. Chapter numbers hang in the gutter as citations;
   above 1560px the relevant legislation moves into a margin column, the way
   a critical edition sets its apparatus.
   ========================================================================= */

:root {
    --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --font-read: "Literata", Georgia, "Times New Roman", serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    --paper: #ffffff;         /* reading surface */
    --shell: #edf1f7;         /* app background */
    --sunk: #f5f8fb;          /* recessed panels on paper */

    --ink: #0f1a2e;
    --ink-soft: #4c5a75;
    --ink-mute: #7c8aa5;

    --line: #dce4ef;
    --line-strong: #c2cee0;

    --blue: #16376e;          /* chrome, headings, primary action */
    --blue-deep: #0e2650;
    --blue-tint: #e3ebf7;

    --azure: #2f6fd0;         /* links, focus, active */
    --azure-soft: #dbe7f9;

    --red: #c81e36;           /* markers, rules, highlights — never a button */
    --red-deep: #a4162b;
    --red-tint: #fbe8eb;

    --radius: 6px;
    --radius-sm: 4px;
    /* Upper guard only. The prose column is 1fr and absorbs available width.
       Viewport-relative so the reading column keeps its share of the screen at
       any size; the ch value only binds on very wide monitors. */
    --measure: min(150ch, 58vw);
    --rail-w: 20rem;
    --shadow: 0 1px 2px rgba(15, 26, 46, .05);
    --shadow-lift: 0 8px 26px rgba(15, 26, 46, .12);
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #141c2b;
        --shell: #0d131f;
        --sunk: #1a2434;

        --ink: #e7ecf4;
        --ink-soft: #a8b4c8;
        --ink-mute: #7a8699;

        --line: #26324a;
        --line-strong: #37455f;

        --blue: #0d1c38;
        --blue-deep: #081326;
        --blue-tint: #1c2b47;

        --azure: #6ba3ea;
        --azure-soft: #1e3355;

        --red: #ef5a6f;
        --red-deep: #f47b8c;
        --red-tint: #3a1f28;

        --shadow: 0 1px 2px rgba(0, 0, 0, .4);
        --shadow-lift: 0 10px 30px rgba(0, 0, 0, .55);
    }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Beat display-setting utilities like .btn--block. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--ink);
    line-height: 1.5;
    background: var(--shell);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: var(--azure); text-underline-offset: 2px; }
a:hover { color: var(--blue); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; }

.skip-link {
    position: absolute; left: -999px; top: 0; z-index: 100;
    background: var(--red); color: #fff; padding: .6rem 1rem;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--azure); outline-offset: 2px; border-radius: 2px; }

.muted { color: var(--ink-mute); }
.serif { font-family: var(--font-read); }

/* A marked chapter — "temeljno znanje". A red lozenge, like a margin tick. */
.mark {
    display: inline-block; width: .5rem; height: .5rem; flex: none;
    background: var(--red); transform: rotate(45deg);
    vertical-align: .06em; margin-right: .15rem;
}

/* ---- Topbar --------------------------------------------------------------- */

.topbar { background: var(--blue); color: #dce6f6; }
.topbar__inner {
    display: flex; align-items: stretch; gap: 2rem;
    padding: 0 1.5rem; min-height: 56px; flex-wrap: wrap;
}
.brand {
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em;
    color: #fff; text-decoration: none; white-space: nowrap;
}
.brand::before {
    content: ""; width: 4px; height: 1.35rem; background: var(--red); flex: none;
}
/* The generic a:hover turns links --blue, which is this bar's own background —
   the wordmark would vanish into it. Keep it white and take the feedback from
   the red rule instead. */
.brand:hover {
    color: #fff;
    text-decoration: underline; text-decoration-color: var(--red);
    text-decoration-thickness: 2px; text-underline-offset: 4px;
}

/* Topic tabs — the three parts of the exam, in the order they are taken. */
.topictabs { display: flex; align-items: stretch; gap: .25rem; flex: 1; flex-wrap: wrap; }
.topictab {
    display: inline-flex; align-items: center; padding: 0 .95rem;
    font-size: .74rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
    color: #b4c6e4; text-decoration: none;
    border-bottom: 3px solid transparent;
}
.topictab:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.topictab--active { color: #fff; border-bottom-color: var(--red); }

/* On the log-in page and the home hero the panel below carries the same blue as
   the bar above it, so the nav runs straight into the headline. A hairline
   keeps them apart. */
body:has(.landing) .topbar,
body:has(.home__hero) .topbar { border-bottom: 1px solid rgba(255, 255, 255, .22); }

/* margin-left: auto rather than relying on .topictabs's flex: 1 to push this
   over — .topictabs only renders for logged-in users, so on the landing page
   nothing else would separate this from the brand. */
.usernav { display: flex; align-items: center; gap: 1.1rem; margin-left: auto; }
.usernav__status { color: #8fa5c9; font-size: .78rem; white-space: nowrap; }
.usernav__status strong { color: #dce6f6; font-weight: 600; }
.usernav__link { color: #b4c6e4; text-decoration: none; font-size: .82rem; font-weight: 500; }
.usernav__link:hover { color: #fff; }
.usernav__logout { margin: 0; display: flex; }
/* Staff-only entry to the user/access panel. Outlined rather than plain text,
   so it reads as a tool and not as one more nav link. */
.usernav__admin {
    color: #fff; text-decoration: none; font-size: .78rem; font-weight: 600;
    padding: .25rem .6rem; border-radius: var(--radius-sm);
    border: 1px solid rgba(255, 255, 255, .35); white-space: nowrap;
}
.usernav__admin:hover { color: #fff; background: rgba(255, 255, 255, .13); border-color: #fff; }
.linkbtn {
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: .82rem; font-weight: 500; color: #b4c6e4;
}
.linkbtn:hover { color: #fff; text-decoration: underline; }
.linkbtn--danger { color: var(--red); font-size: .78rem; }
.linkbtn--danger:hover { color: var(--red-deep); }

/* Second nav tier: the tools, under the blue bar that carries the exam parts. */
.subnav {
    display: flex; gap: .25rem; flex-wrap: wrap;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 0 1.5rem;
}
.subnav a {
    padding: .5rem .7rem; font-size: .8rem; color: var(--ink-soft);
    text-decoration: none; border-bottom: 2px solid transparent;
}
.subnav a:hover { color: var(--ink); background: var(--sunk); }
.subnav a.is-active { color: var(--blue); font-weight: 600; border-bottom-color: var(--red); }

/* ---- Messages ------------------------------------------------------------- */

.messages { display: grid; gap: .4rem; padding: .8rem 1.5rem; }
.message {
    background: var(--paper); border: 1px solid var(--line);
    border-left: 3px solid var(--azure);
    padding: .6rem .9rem; font-size: .88rem; border-radius: var(--radius-sm);
}
.message--success { border-left-color: var(--azure); }
.message--error { border-left-color: var(--red); }

/* ---- App shell: rail + work, edge to edge -------------------------------- */

main { flex: 1; }
.app {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    align-items: start;
}
.work { min-width: 0; padding: 1.75rem 1.5rem 4rem; }

/* The rail is the instrument. Search and the filters stay pinned; only the
   kazalo scrolls, so both key controls are on screen whatever its length. */
.rail {
    position: sticky; top: 0; align-self: start;
    height: 100vh; overflow: hidden;
    background: var(--paper); border-right: 1px solid var(--line);
    padding: 1rem 1.15rem .75rem;
    display: flex; flex-direction: column; gap: 1rem;
}
.rail > form {
    display: flex; flex-direction: column; gap: .9rem;
    flex: 1; min-height: 0; margin: 0;
}

.railgroup > legend,
.railtitle {
    font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase; color: var(--ink-mute);
    margin: 0 0 .6rem; padding: 0;
    display: flex; align-items: center; gap: .5rem;
}
.railtitle::after {
    content: ""; flex: 1; height: 1px; background: var(--line);
}

/* Search — the tallest, loudest field on the page. */
.search { position: relative; }
.search__input {
    width: 100%; padding: .8rem .8rem .8rem 2.4rem;
    font: inherit; font-size: .95rem; color: var(--ink);
    background: var(--sunk); border: 1.5px solid var(--line-strong);
    border-radius: var(--radius);
}
.search__input::placeholder { color: var(--ink-mute); }
.search__input:focus {
    outline: none; background: var(--paper);
    border-color: var(--azure); box-shadow: 0 0 0 3px var(--azure-soft);
}
.search::before {
    content: ""; position: absolute; left: .8rem; top: 50%; width: 1rem; height: 1rem;
    transform: translateY(-50%); pointer-events: none; opacity: .55;
    background: currentColor;
    -webkit-mask: var(--icon-search) center / contain no-repeat;
    mask: var(--icon-search) center / contain no-repeat;
}
:root {
    --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
}
.search__hint { font-size: .74rem; color: var(--red); margin: .4rem 0 0; }

.railcount {
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em;
    color: var(--ink-soft); margin: .55rem 0 0;
}
.railcount b { color: var(--ink); font-weight: 600; }

/* Kazalo — categories with their chapters, the way a statute indexes itself.
   The only part of the rail that scrolls. */
/* The label lives outside this box; the box is nothing but the list. */
.railtitle--kazalo {
    margin: 0; padding-top: .8rem; border-top: 1px solid var(--line);
}
.kazalo {
    flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden;
    overflow-wrap: anywhere;
}
.kazalo__list { list-style: none; margin: 0; padding: 0; }
.kazalo__cat { margin-bottom: .35rem; }
.kazalo__cathead { display: flex; gap: .5rem; align-items: flex-start; }
.kazalo__cathead input { margin: .3rem 0 0; flex: none; accent-color: var(--azure); }
.kazalo__cathead > details,
.kazalo__catlabel { flex: 1; min-width: 0; }

/* A selected category discloses its chapters; the tally says how many. */
.kazalo__cat-disclosure > summary {
    display: flex; gap: .4rem; align-items: flex-start; cursor: pointer;
    list-style: none; padding: .1rem .25rem .1rem 0; border-radius: var(--radius-sm);
}
.kazalo__cat-disclosure > summary::-webkit-details-marker { display: none; }
.kazalo__cat-disclosure > summary:hover { background: var(--sunk); }
.kazalo__catlabel { display: flex; gap: .4rem; align-items: flex-start; cursor: pointer; padding: .1rem 0; }
.kazalo__tally {
    margin-left: auto; flex: none; align-self: center;
    font-family: var(--font-mono); font-size: .66rem; color: var(--ink-mute);
}
.kazalo__cat-disclosure[open] > summary .kazalo__tally { color: var(--red); }
.kazalo__code {
    font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
    background: var(--blue-tint); color: var(--blue); border-radius: 3px;
    padding: .1rem .3rem; flex: none; margin-top: .1rem;
}
/* Legal category names run long; two lines keeps the index scannable, and the
   code chip plus the title attribute carry the rest. */
.kazalo__catname {
    font-size: .78rem; font-weight: 600; line-height: 1.28; color: var(--ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.kazalo__chapters {
    list-style: none; margin: .3rem 0 0; padding: 0 0 0 1.35rem;
    border-left: 1px solid var(--line);
}
.kazalo__link {
    display: flex; gap: .5rem; padding: .22rem .4rem; border-radius: var(--radius-sm);
    font-size: .78rem; line-height: 1.35; color: var(--ink-soft); text-decoration: none;
}
.kazalo__link:hover { background: var(--sunk); color: var(--ink); }
.kazalo__num {
    font-family: var(--font-mono); font-size: .7rem; color: var(--red);
    flex: none; padding-top: .06em;
}

.railgroup { border: 0; margin: 0; padding: 0; }
.railcheck {
    display: flex; gap: .5rem; align-items: flex-start;
    font-size: .8rem; line-height: 1.35; color: var(--ink-soft);
    margin-bottom: .4rem; cursor: pointer;
}
.railcheck input { margin: .22rem 0 0; flex: none; accent-color: var(--azure); }
.railnote { font-size: .72rem; line-height: 1.45; color: var(--ink-mute); margin: .7rem 0 0; }

/* ---- Page head ------------------------------------------------------------ */

.pagehead { margin-bottom: 1.75rem; }
.eyebrow {
    font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
    letter-spacing: .13em; text-transform: uppercase; color: var(--red);
    margin: 0 0 .45rem;
}
.pagehead h1 {
    font-size: clamp(1.6rem, 2.6vw, 2.15rem); line-height: 1.12;
    margin: 0 0 .4rem; color: var(--ink);
}
/* A one-line subtitle, not a paragraph: the old 62ch reading measure cut these
   in half while the work column had ~1500px going spare. The longest lead in
   the app is the UST topic title (148 characters, ~1340px), so the cap clears
   it — wide enough that leads set on one line, still bounded so they do not
   run the full width of an ultra-wide screen. On a narrow viewport the longest
   ones must still wrap; balance splits them evenly instead of leaving an
   orphan word. */
.pagelead {
    font-family: var(--font-read); font-size: 1rem; line-height: 1.6;
    color: var(--ink-soft); max-width: 148ch; margin: 0;
    text-wrap: balance;
}

.toolbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: 1.1rem 0 0; }
.toolbar__count { font-family: var(--font-mono); font-size: .74rem; color: var(--ink-mute); }

/* ---- Buttons -------------------------------------------------------------- */

.btn {
    display: inline-block; font: inherit; font-weight: 600; font-size: .85rem;
    background: var(--blue); color: #fff; text-decoration: none;
    padding: .55rem 1.1rem; border: 1.5px solid var(--blue); border-radius: var(--radius);
    cursor: pointer; transition: background .12s ease;
}
.btn:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
.btn--small { padding: .38rem .8rem; font-size: .8rem; }
.btn--ghost { background: var(--paper); color: var(--blue); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--sunk); color: var(--blue); border-color: var(--azure); }
.btn--block { display: block; width: 100%; text-align: center; }

/* ---- Catalogue: chapters as filed cards on the shell --------------------- */

.catgroup + .catgroup { margin-top: 2.5rem; }

/* The category band. Solid blue so a topic reads as a section head rather than
   a floating label — the only place besides the topbar that carries it. */
.catgroup__head {
    display: flex; align-items: baseline; gap: .7rem;
    background: var(--blue); border-radius: var(--radius);
    padding: .65rem 1.1rem; margin-bottom: .9rem;
    scroll-margin-top: 1rem;
}
.catgroup__code {
    font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
    background: rgba(255, 255, 255, .18); color: #fff;
    padding: .1rem .4rem; border-radius: 3px; flex: none;
}
.catgroup__title {
    font-size: .95rem; line-height: 1.35; margin: 0; color: #fff;
    text-transform: uppercase; letter-spacing: .03em; font-weight: 600;
}

/* Each chapter is its own card, filed like a tabbed divider: the left rule is
   blue, and red when the chapter is marked temeljno znanje. The number hangs in
   the gutter; the apparatus sits in the margin when there is room. */
.chapter {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: 1.6rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--blue);
    border-radius: var(--radius);
    padding: 1.5rem 1.9rem 1.6rem 1.4rem;
    margin-bottom: 1rem;
    scroll-margin-top: 1rem;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.chapter:hover { box-shadow: var(--shadow); }
.chapter--essential { border-left-color: var(--red); }
.chapter__head, .chapter__body { max-width: var(--measure); }
.chapter__num {
    grid-column: 1; grid-row: 1;
    font-family: var(--font-mono); font-size: .8rem; font-weight: 600;
    color: var(--red); text-align: right; padding-top: .2rem;
    display: flex; align-items: baseline; justify-content: flex-end; gap: .3rem;
}
.chapter__head { grid-column: 2; grid-row: 1; }
.chapter__title {
    font-size: 1.06rem; line-height: 1.35; margin: 0; color: var(--ink);
    text-transform: uppercase; letter-spacing: .01em;
}
.chapter__gloss {
    display: block; margin-top: .3rem;
    font-family: var(--font-read); font-size: .82rem; font-weight: 400;
    text-transform: none; letter-spacing: 0; color: var(--ink-mute); line-height: 1.5;
}
.chapter__body { grid-column: 2; grid-row: 2; margin-top: .9rem; }
.chapter__aside { grid-column: 2; grid-row: 3; margin-top: 1.25rem; }
.chapter__actions {
    grid-column: 2; grid-row: 4; margin-top: 1rem;
    font-family: var(--font-mono); font-size: .72rem;
}
.chapter__actions a { color: var(--ink-mute); text-decoration: none; }
.chapter__actions a:hover { color: var(--azure); text-decoration: underline; }

/* The apparatus only earns a margin column once the text still clears half the
   screen without it; below that it drops inline so the reading column keeps
   the width. */
@media (min-width: 1620px) {
    .chapter { grid-template-columns: 3.5rem minmax(0, 1fr) minmax(13rem, 16rem); }
    .chapter__aside { grid-column: 3; grid-row: 1 / span 4; margin-top: .2rem; }
}

/* ---- Prose ---------------------------------------------------------------- */

.prose { font-family: var(--font-read); font-size: 1rem; line-height: 1.72; color: var(--ink); }
.prose > *:first-child { margin-top: 0; }
.prose > *:last-child { margin-bottom: 0; }
.prose p { margin: 0 0 1rem; }
.prose h2, .prose h3, .prose h4 {
    font-family: var(--font-display); line-height: 1.25; color: var(--blue);
    margin: 1.7rem 0 .6rem;
}
.prose h2 { font-size: 1.12rem; }
.prose h3 { font-size: 1rem; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.prose li { margin: .3rem 0; }
.prose li::marker { color: var(--red); font-family: var(--font-mono); font-size: .9em; }
.prose strong { font-weight: 600; }
.prose blockquote {
    margin: 1.2rem 0; padding: .3rem 0 .3rem 1rem;
    border-left: 3px solid var(--red); color: var(--ink-soft);
}
.prose table { border-collapse: collapse; width: 100%; margin: 1.1rem 0; font-size: .9rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: .45rem .6rem; text-align: left; }
.prose th { background: var(--sunk); font-family: var(--font-display); }
.prose img { max-width: 100%; height: auto; }

/* ---- Apparatus: the legislation cited by a chapter ------------------------ */

.apparatus {
    border-top: 2px solid var(--red);
    padding-top: .7rem; font-size: .8rem;
}
.apparatus__title {
    font-family: var(--font-mono); font-size: .66rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--red);
    margin: 0 0 .6rem;
}
.apparatus__list { list-style: none; margin: 0; padding: 0; counter-reset: law; }
.apparatus__list li {
    counter-increment: law; margin-bottom: .7rem; padding-left: 1.5rem; position: relative;
    line-height: 1.45;
}
.apparatus__list li::before {
    content: counter(law) "."; position: absolute; left: 0; top: 0;
    font-family: var(--font-mono); font-size: .72rem; color: var(--ink-mute);
}
.apparatus__name { font-weight: 600; color: var(--ink); }
.apparatus__gazette { display: block; color: var(--ink-mute); font-size: .74rem; margin-top: .1rem; }
.apparatus__link { font-size: .74rem; }

/* ---- Comments ------------------------------------------------------------- */

.comments { margin-top: 1.1rem; display: grid; gap: .5rem; }
.comment {
    border: 1px solid var(--line); border-left: 3px solid var(--comment, var(--line-strong));
    border-radius: var(--radius-sm); font-size: .82rem; background: var(--sunk);
}
.comment__head {
    display: flex; justify-content: space-between; gap: .8rem;
    padding: .35rem .7rem; font-size: .72rem; color: var(--ink-mute);
    border-bottom: 1px solid var(--line);
}
.comment__body { padding: .55rem .7rem; line-height: 1.5; }
.comment__delete { padding: 0 .7rem .45rem; margin: 0; }
.comments__add > summary {
    cursor: pointer; width: fit-content;
    font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--azure);
}
.comments__add form { display: grid; gap: .45rem; margin-top: .6rem; }
.comments__add label { font-size: .76rem; font-weight: 600; }
.comments__add textarea { font: inherit; font-size: .85rem; }

/* ---- Reading a single chapter -------------------------------------------- */

.article { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.25rem 2.5rem; }
.article__crumb { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-mute); margin: 0 0 .7rem; }
.article__crumb a { color: var(--azure); text-decoration: none; }
.article__title {
    font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.2; margin: 0 0 .4rem;
    text-transform: uppercase; letter-spacing: .01em;
}
.article__meta {
    display: flex; gap: 1.2rem; flex-wrap: wrap; align-items: center;
    font-family: var(--font-mono); font-size: .72rem; color: var(--ink-mute);
    padding-bottom: 1.2rem; margin-bottom: 1.4rem; border-bottom: 2px solid var(--blue);
}

/* Same shape as a catalogue chapter: measured column, apparatus in the margin. */
.article__grid { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 2.5rem; }
.article__main { min-width: 0; max-width: var(--measure); }
.article__margin { min-width: 0; margin-top: 1.5rem; }

@media (min-width: 1440px) {
    .article__grid { grid-template-columns: minmax(0, 1fr) minmax(13rem, 16rem); }
    .article__margin { grid-column: 2; grid-row: 1; margin-top: .25rem; }
}

.chapternav {
    display: flex; justify-content: space-between; gap: 1.5rem;
    margin-top: 2.25rem; padding-top: 1.2rem; border-top: 1px solid var(--line);
}
.chapternav a { text-decoration: none; color: var(--ink); max-width: 46%; }
.chapternav__dir {
    display: block; font-family: var(--font-mono); font-size: .68rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: .15rem;
}
.chapternav__title { font-size: .85rem; font-weight: 500; }
.chapternav a:hover .chapternav__title { color: var(--azure); text-decoration: underline; }
.chapternav__next { text-align: right; margin-left: auto; }

/* ---- Flashcards ----------------------------------------------------------- */

.quiz { display: grid; gap: .5rem; }
.flashcard {
    background: var(--paper); border: 1px solid var(--line);
    border-left: 3px solid var(--azure); border-radius: var(--radius-sm);
}
.flashcard__q {
    list-style: none; cursor: pointer; display: flex; gap: 1rem;
    justify-content: space-between; align-items: baseline;
    padding: .8rem 1rem; font-size: .95rem; font-weight: 500;
}
.flashcard__q::-webkit-details-marker { display: none; }
/* The card front is TinyMCE HTML, so unwrap its paragraph inside the flex row. */
.flashcard__q p { display: inline; margin: 0; }
/* A chapter with no card of its own yet: falls back to the catalogue text. */
.flashcard--raw { border-left-color: var(--line); }
.flashcard__num { font-family: var(--font-mono); font-size: .8rem; color: var(--red); margin-right: .25rem; }
.flashcard__q:hover { background: var(--sunk); }
.flashcard__toggle {
    font-family: var(--font-mono); font-size: .66rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--red); white-space: nowrap;
}
.flashcard__a {
    padding: 1rem; border-top: 1px solid var(--line);
    max-width: var(--measure);
}
.questionmeta { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-mute); margin: .9rem 0 0; }

/* ---- Legislation register ------------------------------------------------- */

.lawlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.lawlist__item {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: .7rem .9rem; display: grid; gap: .2rem;
}
.lawlist__name { font-size: .92rem; font-weight: 600; margin: 0; }
.lawlist__gazette { font-family: var(--font-mono); font-size: .72rem; color: var(--ink-mute); margin: 0; line-height: 1.5; }
.lawlist__links { margin: .2rem 0 0; font-size: .78rem; display: flex; gap: 1rem; }

/* ---- Panels, tables, badges ---------------------------------------------- */

.panel {
    background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.35rem 1.5rem; margin-bottom: 1rem;
}
.panel h2 {
    font-size: .78rem; font-family: var(--font-mono); font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
    margin: 0 0 .9rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line);
}
.cols { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
/* The method the user picked at registration, so the payment page opens on
   what they already decided rather than asking them to choose twice. */
.panel--chosen { border-color: var(--azure); box-shadow: 0 0 0 3px var(--azure-soft); }
.panel--chosen h2 { color: var(--blue); border-bottom-color: var(--azure); }

.statusbadge {
    display: inline-flex; align-items: center; gap: .35rem;
    font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    padding: .2rem .5rem; border-radius: 3px; white-space: nowrap;
}
.statusbadge--active { background: var(--azure-soft); color: var(--blue); }
.statusbadge--pending { background: var(--sunk); color: var(--ink-soft); border: 1px solid var(--line-strong); }
.statusbadge--none { background: var(--red-tint); color: var(--red-deep); }

.datatable { width: 100%; border-collapse: collapse; font-size: .85rem; }
.datatable th, .datatable td { text-align: left; padding: .5rem .5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.datatable thead th {
    font-family: var(--font-mono); font-size: .66rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute);
    border-bottom: 2px solid var(--blue);
}
.tablescroll { overflow-x: auto; }
.datatable tbody th {
    font-weight: 600; color: var(--ink-soft); white-space: nowrap;
    width: 10rem; font-size: .8rem;
}
.nowrap { white-space: nowrap; }
.tag {
    display: inline-block; font-family: var(--font-mono); font-size: .62rem;
    font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    background: var(--sunk); border: 1px solid var(--line-strong); color: var(--ink-mute);
    padding: .08rem .32rem; border-radius: 3px; vertical-align: .1em;
}
.tag--live { background: var(--azure-soft); border-color: var(--azure); color: var(--blue); }

/* ---- Staff panel: user and access administration ------------------------- */

.statrow { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.stat {
    flex: 1 1 9rem; background: var(--paper); border: 1px solid var(--line);
    border-left: 3px solid var(--blue); border-radius: var(--radius);
    padding: .8rem 1rem;
}
.stat--flag { border-left-color: var(--red); }
.stat__num { display: block; font-size: 1.5rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.stat__label {
    display: block; margin-top: .15rem; font-family: var(--font-mono);
    font-size: .66rem; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-mute);
}

.filterbar { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.filterbar .field-input { width: auto; flex: 1 1 16rem; }
.filterbar select.field-input { flex: 0 0 14rem; }

.actionform { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.actionform label { font-size: .78rem; font-weight: 600; display: block; margin-bottom: .25rem; }
.actionform .field-input { max-width: 9rem; }
.actionform__buttons { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .7rem; }
/* Withdrawing access sits apart from granting it, so the two are not adjacent
   buttons that differ by one word. */
.actionform--danger { border-top-color: var(--red-tint); }
.btn--danger { background: var(--paper); color: var(--red-deep); border-color: var(--red); }
.btn--danger:hover { background: var(--red); border-color: var(--red); color: #fff; }

.pager {
    display: flex; gap: 1rem; align-items: center; margin: 1rem 0 0;
    font-family: var(--font-mono); font-size: .74rem; color: var(--ink-mute);
}

/* ---- Forms ---------------------------------------------------------------- */

.form { display: grid; gap: .9rem; max-width: 30rem; }
.form label { font-size: .8rem; font-weight: 600; display: block; margin-bottom: .25rem; }
.field-input,
.form input[type="text"], .form input[type="email"], .form input[type="password"],
.form input[type="date"], .form input:not([type]), .form select, .form textarea {
    width: 100%; padding: .5rem .65rem; font: inherit; font-size: .88rem; color: var(--ink);
    background: var(--paper); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
}
.field-input:focus, .form input:focus, .form select:focus, .form textarea:focus {
    outline: none; border-color: var(--azure); box-shadow: 0 0 0 3px var(--azure-soft);
}
.form .helptext { font-size: .76rem; color: var(--ink-mute); margin-top: .2rem; }
.errorlist { color: var(--red-deep); list-style: none; padding: 0; margin: .25rem 0 0; font-size: .8rem; }

/* ---- Study plan ----------------------------------------------------------- */

.planform { display: grid; gap: 1.1rem; }
.planform fieldset { border: 0; margin: 0; padding: 0; }
.planform legend {
    font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
    padding: 0; margin-bottom: .6rem;
}
.planform__rolegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0 1.5rem; }
.planform__row { display: flex; gap: 1.25rem; align-items: flex-end; flex-wrap: wrap; }
.planform__row label { font-size: .78rem; font-weight: 600; display: block; margin-bottom: .25rem; }
.plantable { font-size: .8rem; min-width: 52rem; }
.plantable__date { white-space: nowrap; font-family: var(--font-mono); font-size: .74rem; }
.plantable__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.plantable__list a { color: var(--ink); text-decoration: none; }
.plantable__list a:hover { color: var(--azure); text-decoration: underline; }

/* ---- Landing (login) ------------------------------------------------------ */

.landing {
    flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    align-items: stretch; min-height: calc(100vh - 56px);
}
.landing__intro {
    background: var(--blue); color: #cddcf2;
    padding: 4rem clamp(2rem, 7vw, 8rem);
    display: flex; flex-direction: column; justify-content: center;
}
.landing__intro h1 {
    font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.08; color: #fff;
    margin: 0 0 1rem; max-width: 16ch; letter-spacing: -.02em;
}
.landing__intro h1 em { font-style: normal; color: #fff; border-bottom: 5px solid var(--red); }
.landing__lead { font-family: var(--font-read); font-size: 1.05rem; line-height: 1.65; max-width: 44ch; margin: 0 0 2.25rem; }
.landing__parts { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; max-width: 46ch; counter-reset: part; }
.landing__parts li {
    counter-increment: part; position: relative; padding-left: 2.4rem;
    font-size: .88rem; line-height: 1.5; color: #b8cbe8;
}
.landing__parts li::before {
    content: counter(part, upper-roman) "."; position: absolute; left: 0; top: 0;
    font-family: var(--font-mono); font-size: .8rem; font-weight: 600; color: var(--red);
}
.landing__form {
    background: var(--paper); padding: 4rem 2.5rem;
    display: flex; flex-direction: column; justify-content: center;
    border-left: 4px solid var(--red);
}
.landing__form h2 { font-size: 1.35rem; margin: 0 0 .3rem; }
.landing__sub { font-family: var(--font-read); color: var(--ink-soft); font-size: .9rem; margin: 0 0 1.6rem; }
.landing__form form { display: grid; gap: .9rem; }
.landing__form label { font-size: .78rem; font-weight: 600; }
.landing__form input[type="text"], .landing__form input[type="email"],
.landing__form input[type="password"], .landing__form input:not([type]) {
    width: 100%; padding: .6rem .7rem; font: inherit; font-size: .9rem; color: var(--ink);
    background: var(--sunk); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
}
.landing__form input:focus { outline: none; background: var(--paper); border-color: var(--azure); box-shadow: 0 0 0 3px var(--azure-soft); }
.landing__form button[type="submit"] {
    justify-self: start; font: inherit; font-weight: 600; font-size: .88rem;
    background: var(--blue); color: #fff; border: 0; border-radius: var(--radius);
    padding: .6rem 1.4rem; cursor: pointer;
}
.landing__form button[type="submit"]:hover { background: var(--blue-deep); }
.landing__form p { margin: 0; }
.landing__alt { font-size: .84rem; color: var(--ink-soft); margin-top: 1.2rem !important; }
.landing__form .errorlist { grid-column: 1; }

/* ---- Home (the public landing page) --------------------------------------
   The only page a visitor sees before paying, so it has to do the explaining
   the dashboard normally does. Full-bleed bands, each with an inner column
   held to the same width, so the blue hero can run edge to edge while its
   text still lines up with the sections below it. */

.home__hero { background: var(--blue); color: #cddcf2; padding: clamp(3rem, 7vw, 5.5rem) 1.5rem clamp(2.75rem, 5vw, 4rem); }
.home__hero-inner, .home__section-inner { max-width: 68rem; margin: 0 auto; }

.home__eyebrow {
    font-family: var(--font-mono); font-size: .7rem; font-weight: 600;
    letter-spacing: .12em; text-transform: uppercase; color: #8fb0e0;
    margin: 0 0 1rem;
}
.home__hero h1 {
    font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.06; color: #fff;
    margin: 0 0 1.1rem; max-width: 80vw; letter-spacing: -.02em;
}
.home__hero h1 em { font-style: normal; border-bottom: 5px solid var(--red); }
.home__lead {
    font-family: var(--font-read); font-size: 1.08rem; line-height: 1.6;
    max-width: 80vw; margin: 0 0 1.9rem;
}

.home__cta { display: flex; flex-wrap: wrap; gap: .7rem; }
/* The hero carries the same blue as the primary button, which would swallow it,
   so on this band the buttons invert: solid white for the action, an outline
   for the alternative. */
.home__hero .btn { background: #fff; color: var(--blue); border-color: #fff; }
.home__hero .btn:hover { background: var(--blue-tint); color: var(--blue-deep); border-color: var(--blue-tint); }
.home__hero .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.home__hero .btn--ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: #fff; }

.home__parts { margin-top: clamp(2.25rem, 4vw, 3.25rem); border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 1.5rem; }
.home__parts-title {
    font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: #8fb0e0; margin: 0 0 1rem;
}
.home__partlist {
    list-style: none; margin: 0; padding: 0; counter-reset: part;
    display: grid; gap: .75rem; grid-template-columns: repeat(3, 1fr);
}
.home__partlist li {
    counter-increment: part; position: relative; padding-left: 2.2rem;
    font-size: .86rem; line-height: 1.5; color: #b8cbe8;
}
.home__partlist li::before {
    content: counter(part, upper-roman) "."; position: absolute; left: 0; top: 0;
    font-family: var(--font-mono); font-size: .78rem; font-weight: 600; color: var(--red);
}

.home__section { padding: clamp(3rem, 6vw, 4.75rem) 1.5rem; }
.home__section--sunk { background: var(--shell); border-top: 1px solid var(--line); }
.home__h2 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); line-height: 1.2; margin: .2rem 0 2rem; letter-spacing: -.01em; }

.home__features { display: grid; gap: 1rem; grid-template-columns: repeat(4, 1fr); }
.home__feature {
    background: var(--paper); border: 1px solid var(--line);
    border-top: 3px solid var(--azure); border-radius: var(--radius);
    padding: 1.1rem 1.15rem 1.25rem;
}
.home__feature h3 {
    font-family: var(--font-mono); font-size: .74rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--blue);
    margin: 0 0 .55rem;
}
.home__feature p { font-family: var(--font-read); font-size: .88rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }

.home__price {
    display: grid; grid-template-columns: 18rem 1fr; gap: 0;
    background: var(--paper); border: 1px solid var(--line);
    border-top: 4px solid var(--red); border-radius: var(--radius); overflow: hidden;
}
.home__price-figure { padding: 2rem 1.75rem; background: var(--sunk); border-right: 1px solid var(--line); }
.home__amount {
    font-family: var(--font-mono); font-weight: 600; font-size: 2.6rem;
    line-height: 1; color: var(--blue); margin: .3rem 0 .5rem;
}
.home__amount span { font-size: 1.05rem; color: var(--ink-mute); }
.home__price-note { font-size: .82rem; color: var(--ink-soft); margin: 0; }

.home__price-body { padding: 2rem 1.9rem; }
.home__price-body .home__h2 { margin-top: 0; margin-bottom: 1rem; }
.home__included { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: .45rem; }
.home__included li { position: relative; padding-left: 1.5rem; font-family: var(--font-read); font-size: .92rem; color: var(--ink-soft); }
.home__included li::before { content: "—"; position: absolute; left: 0; color: var(--red); font-weight: 600; }
.home__paynote { font-family: var(--font-read); font-size: .88rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 1.5rem; }
.home__fineprint { font-size: .8rem; color: var(--ink-mute); margin: 1.25rem 0 0; }

/* The screenshots are set the way a critical edition sets its plates: the
   picture full width, its note held out in the margin against a red rule —
   the book ribbon this palette reserves for marking. The app's own blue bar
   is inside every shot, so the frame stays a hairline and adds no chrome of
   its own. */

.home__section--plates { background: var(--shell); border-top: 1px solid var(--line); }

.home__plate { display: grid; grid-template-columns: 15rem 1fr; gap: 2.25rem; align-items: start; margin: 0 0 clamp(2rem, 4vw, 3.25rem); }
.home__plate:last-child { margin-bottom: 0; }

.home__plate-note { border-left: 3px solid var(--red); padding-left: 1.1rem; }
.home__plate-note h3 {
    font-family: var(--font-mono); font-size: .74rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: var(--blue);
    margin: 0 0 .5rem;
}
.home__plate-note p { font-family: var(--font-read); font-size: .88rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }

.home__plate-frame {
    display: block; background: var(--paper); border: 1px solid var(--line-strong);
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
    /* The only cue that the plate opens full size — cheaper than a caption
       telling the reader so. */
    cursor: zoom-in;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.home__plate-frame:hover { border-color: var(--azure); box-shadow: var(--shadow-lift); }
.home__plate-frame img { display: block; width: 100%; height: auto; }

/* allauth's own pages (signup, password reset, change, email).
   allauth wraps every field in a <p> and emits empty <p> and helptext nodes;
   left alone those become grid rows and their default margins stack on the
   gap, so each field costs ~46px of air instead of ~14. */
.authcard {
    max-width: 26rem; margin: 2.5rem auto; background: var(--paper);
    border: 1px solid var(--line); border-top: 4px solid var(--red);
    border-radius: var(--radius); padding: 1.6rem 1.75rem 1.75rem;
}
.authcard h1 { font-size: 1.25rem; margin: 0 0 1.1rem; }
.authcard form { display: grid; gap: .8rem; }
.authcard form p { margin: 0; }
.authcard form p:empty,
.authcard .helptext:empty { display: none; }
.authcard label { font-size: .78rem; font-weight: 600; }
/* Text fields put the label first and stack; radio rows put the input first
   and must stay on one line. */
.authcard form p > label:first-child { display: block; margin-bottom: .25rem; }
.authcard form p > input[type="radio"] + label,
.authcard form p > input[type="checkbox"] + label { display: inline; font-weight: 400; }
.authcard input[type="text"], .authcard input[type="email"],
.authcard input[type="password"], .authcard input:not([type]), .authcard select {
    width: 100%; padding: .55rem .7rem; font: inherit; font-size: .9rem; color: var(--ink);
    background: var(--sunk); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
}
.authcard input:focus { outline: none; border-color: var(--azure); box-shadow: 0 0 0 3px var(--azure-soft); }
.authcard button, .authcard input[type="submit"] {
    justify-self: start; font: inherit; font-weight: 600; font-size: .88rem;
    background: var(--blue); color: #fff; border: 0; border-radius: var(--radius);
    padding: .55rem 1.3rem; cursor: pointer; margin-top: .3rem;
}
.authcard button:hover { background: var(--blue-deep); }
.authcard a { color: var(--azure); font-size: .84rem; }

/* The payment choice at registration: two described options, not bare radios,
   because what happens next differs sharply between them. */
.paychoice { border: 0; padding: 0; margin: .4rem 0 0; }
.paychoice legend { font-size: .78rem; font-weight: 600; padding: 0; margin-bottom: .3rem; }
.paychoice__price {
    font-size: .8rem; line-height: 1.5; color: var(--ink-soft);
    margin: 0 0 .6rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line);
}
.paychoice__option {
    display: flex; gap: .55rem; align-items: flex-start; cursor: pointer;
    padding: .6rem .7rem; margin-bottom: .45rem;
    border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
    background: var(--sunk); font-weight: 400;
}
.paychoice__option:hover { border-color: var(--azure); background: var(--paper); }
.paychoice__option:has(input:checked) {
    border-color: var(--azure); background: var(--paper);
    box-shadow: 0 0 0 3px var(--azure-soft);
}
.paychoice__option input { margin: .2rem 0 0; flex: none; accent-color: var(--azure); }
.paychoice__body { display: block; }
.paychoice__name { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); }
.paychoice__note {
    display: block; margin-top: .15rem; font-size: .76rem;
    line-height: 1.45; color: var(--ink-mute);
}
.paychoice__error { margin: .3rem 0 0; font-size: .78rem; color: var(--red-deep); }

/* Password rules belong to the field above them, not floating between fields. */
.authcard form p + ul {
    margin: -.4rem 0 0; padding-left: 1rem;
    font-size: .76rem; line-height: 1.45; color: var(--ink-mute);
}
.authcard form li { margin: .12rem 0; }
.authcard form li::marker { color: var(--red); }

/* ---- Staff: editing a chapter where it is read ---------------------------- */

/* The pencil sits quiet until the chapter is hovered — staff read these pages
   too, and an always-lit control would compete with the text. */
.editbtn {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; padding: 0; cursor: pointer;
    background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
    color: var(--ink-mute); opacity: 0; transition: opacity .12s ease, color .12s ease;
    vertical-align: middle;
}
.editbtn svg { width: .95rem; height: .95rem; fill: currentColor; }
.chapter:hover .editbtn, .article:hover .editbtn,
.editbtn:hover, .editbtn:focus-visible { opacity: 1; }
.editbtn:hover { color: var(--azure); border-color: var(--line-strong); background: var(--sunk); }
.editbtn:focus-visible { outline: 2px solid var(--azure); outline-offset: 1px; }
/* Touch has no hover to reveal it. */
@media (hover: none) { .editbtn { opacity: 1; } }

/* The catalogue's chapter head is a heading block, so the pencil needs a row of
   its own to sit in; on the article page the title is inline and it just
   follows the words. */
.chapter__head { display: flex; align-items: flex-start; gap: .6rem; }
.chapter__head .chapter__title { flex: 1; min-width: 0; }
.article__title .editbtn { margin-left: .35rem; }

body.is-modal { overflow: hidden; }
.chapedit { position: fixed; inset: 0; z-index: 60; display: flex; }
.chapedit__backdrop { position: absolute; inset: 0; background: rgba(15, 26, 46, .55); }
.chapedit__panel {
    position: relative; margin: auto; display: flex; flex-direction: column;
    width: min(60rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem);
    background: var(--paper); border-radius: var(--radius);
    border-top: 4px solid var(--red); box-shadow: 0 18px 50px rgba(15, 26, 46, .35);
}
.chapedit__head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--line);
}
.chapedit__head h2 { margin: 0; font-size: 1.05rem; }
.chapedit__x {
    background: none; border: 0; font-size: 1.5rem; line-height: 1;
    color: var(--ink-mute); cursor: pointer; padding: 0 .2rem;
}
.chapedit__x:hover { color: var(--red); }
.chapedit__body { overflow-y: auto; padding: 1.25rem 1.5rem; }
.chapedit__label {
    display: block; margin: 1.1rem 0 .35rem; font-size: .78rem; font-weight: 600;
}
.chapedit__body > .chapedit__label:first-of-type { margin-top: 0; }
.chapedit__title {
    width: 100%; padding: .55rem .7rem; font: inherit; font-size: .95rem; color: var(--ink);
    background: var(--sunk); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
    resize: vertical;
}
.chapedit__title:focus { outline: none; border-color: var(--azure); box-shadow: 0 0 0 3px var(--azure-soft); }
.chapedit__note { margin: .4rem 0 0; font-size: .74rem; line-height: 1.5; color: var(--ink-mute); }
.chapedit__check {
    display: flex; align-items: center; gap: .45rem;
    margin-top: .9rem; font-size: .82rem; cursor: pointer;
}
.chapedit__error {
    margin: 0 0 1rem; padding: .6rem .9rem; font-size: .85rem;
    background: var(--red-tint); border-left: 3px solid var(--red); border-radius: var(--radius-sm);
}
.chapedit__foot {
    display: flex; align-items: center; gap: .6rem;
    padding: .9rem 1.5rem; border-top: 1px solid var(--line); background: var(--sunk);
    border-radius: 0 0 var(--radius) var(--radius);
}
.chapedit__status { font-size: .78rem; color: var(--ink-mute); }

/* ---- Footer --------------------------------------------------------------- */

.sitefooter { background: var(--blue-deep); color: #8fa6c8; margin-top: auto; }
.sitefooter__inner {
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: 1.1rem 1.5rem; font-size: .78rem;
}
.sitefooter__inner > span:first-child { color: #cddcf2; font-weight: 600; }
.sitefooter a { color: inherit; text-decoration: underline; text-decoration-color: rgba(143,166,200,.5); }
.sitefooter a:hover { color: #cddcf2; }

/* ---- Responsive ----------------------------------------------------------- */

@media (max-width: 1100px) {
    .app { grid-template-columns: 1fr; }
    .rail {
        position: static; height: auto; max-height: none;
        border-right: 0; border-bottom: 1px solid var(--line);
    }
    .cols { grid-template-columns: 1fr; }
    .landing { grid-template-columns: 1fr; min-height: 0; }
    .landing__intro { padding: 2.5rem 1.5rem; }
    .landing__form { padding: 2.5rem 1.5rem; border-left: 0; border-top: 4px solid var(--red); }
    .home__features { grid-template-columns: repeat(2, 1fr); }
    .home__price { grid-template-columns: 1fr; }
    .home__price-figure { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 720px) {
    .home__partlist, .home__features { grid-template-columns: 1fr; }
    /* The note stops being a margin apparatus and becomes a lead-in above the
       plate; the ribbon moves to the top edge so it still marks the pair. */
    .home__plate { grid-template-columns: 1fr; gap: 1rem; }
    .home__plate-note { border-left: 0; border-top: 3px solid var(--red); padding-left: 0; padding-top: .8rem; }
    .home__hero { padding-left: 1.1rem; padding-right: 1.1rem; }
    .home__section { padding-left: 1.1rem; padding-right: 1.1rem; }
    .home__price-figure, .home__price-body { padding: 1.5rem 1.25rem; }
    .home__cta .btn { flex: 1 1 auto; text-align: center; }
    .work { padding: 1.25rem 1rem 3rem; }
    .article { padding: 1.25rem 1.1rem; }
    .chapter { grid-template-columns: 1fr; row-gap: 0; padding: 1.1rem 1.1rem 1.2rem .95rem; }
    .chapter__num { grid-column: 1; grid-row: auto; text-align: left; justify-content: flex-start; margin-bottom: .2rem; }
    .chapter__head, .chapter__body, .chapter__aside, .chapter__actions { grid-column: 1; grid-row: auto; }
    .topbar__inner { padding: 0 1rem; gap: .75rem; }
    .usernav__status { display: none; }
    .messages { padding: .8rem 1rem 0; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}