/* ==========================================================================
   COLDWAKE ARCHIVE
   --------------------------------------------------------------------------
   Direction: an in-universe archive terminal, not a fan wiki. The reference
   is technical drawing and aircraft placards — condensed signage type, ruled
   hairlines, designations in the margin — rather than the usual glowing
   sci-fi HUD. The light blue is treated as a *structural* colour: it draws
   keylines, ticks, and small-caps labels, and is almost never a fill. That
   restraint is what keeps it from reading as a UI kit.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
    --void:  #04060b;   /* page black, cooled slightly blue */
    --hull:  #080d17;   /* raised surface */
    --panel: #0b1524;   /* panel fill */
    --deep:  #102243;   /* dark blue, structural fills + headers */

    --edge:        rgba(111, 200, 242, .16);
    --edge-strong: rgba(111, 200, 242, .34);

    --ice:      #6fc8f2;  /* the accent. Keylines and labels, rarely fills. */
    --ice-deep: #3f92c4;
    --frost:    #eaf4fb;  /* headings, values */
    --dust:     #93aabf;  /* body prose */
    --dim:      #5b7086;  /* micro-labels */

    /* The one hue outside the brief, reserved strictly for destructive
       actions and failures, where colour is doing real work. */
    --alarm: #e2564d;

    --f-display: "Bahnschrift", "DIN Alternate", "Avenir Next Condensed",
                 "Liberation Sans Narrow", "Arial Narrow", system-ui, sans-serif;
    --f-body:    system-ui, -apple-system, "Segoe UI", Roboto, "DejaVu Sans", sans-serif;
    --f-mono:    ui-monospace, "JetBrains Mono", "SFMono-Regular", "DejaVu Sans Mono",
                 Consolas, monospace;

    --top-h:  54px;
    --rail-w: 246px;
    --measure: 68ch;
}

/* --- Reset ---------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* Any `display` we set below would otherwise beat the browser's own rule for
   [hidden], which is how editor-only chrome leaks into the reader's view. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--void);
    color: var(--dust);
    font-family: var(--f-body);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Blueprint grid, faded out below the fold. Atmosphere, not decoration —
   it gives the black a sense of being a surface rather than a void. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(111, 200, 242, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(111, 200, 242, .045) 1px, transparent 1px);
    background-size: 62px 62px;
    -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% -10%, #000 15%, transparent 78%);
            mask-image: radial-gradient(ellipse 100% 70% at 50% -10%, #000 15%, transparent 78%);
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--ice); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
    outline: 2px solid var(--ice);
    outline-offset: 2px;
}

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: 8px; top: -60px; z-index: 100;
    background: var(--ice); color: var(--void);
    padding: 8px 14px; font-family: var(--f-mono); font-size: .74rem;
    letter-spacing: .14em; text-transform: uppercase;
    transition: top .12s;
}
.skip-link:focus { top: 8px; }

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

.btn {
    font-family: var(--f-mono);
    font-size: .7rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    padding: 7px 14px;
    border: 1px solid var(--edge);
    background: transparent;
    color: var(--dust);
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { color: var(--frost); border-color: var(--edge-strong); background: rgba(111, 200, 242, .07); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn--edit { color: var(--ice); border-color: var(--edge-strong); padding: 7px 18px; }
.btn--edit:hover { border-color: var(--ice); }
body.is-editing .btn--edit { background: var(--ice); border-color: var(--ice); color: var(--void); }
body.is-editing .btn--edit:hover { background: var(--frost); }

.btn--go { color: var(--void); background: var(--ice); border-color: var(--ice); }
.btn--go:hover { background: var(--frost); border-color: var(--frost); color: var(--void); }

.btn--danger:hover { color: var(--alarm); border-color: var(--alarm); background: rgba(226, 86, 77, .08); }

.btn--ghost { border-color: transparent; }
.btn--ghost:hover { border-color: var(--edge-strong); }

.btn--icon {
    padding: 6px 8px; line-height: 1;
    display: inline-grid; place-items: center;
}

/* --- Top bar -------------------------------------------------------------- */

.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--top-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 16px;
    background: rgba(4, 6, 11, .88);
    -webkit-backdrop-filter: blur(9px);
            backdrop-filter: blur(9px);
    border-bottom: 1px solid var(--edge);
}

.brand { display: flex; align-items: center; gap: 11px; color: var(--ice); min-width: 0; }
.brand:hover { text-decoration: none; }
.brand__mark { width: 22px; height: 22px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.brand__title {
    font-family: var(--f-display);
    font-size: 1.16rem;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--frost);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.brand__sub {
    font-family: var(--f-mono);
    font-size: .58rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--dim);
    margin-top: 3px;
}

.topbar__tools { display: flex; align-items: center; gap: 10px; flex: none; }

.nav-toggle { display: none; }

/* --- Finder --------------------------------------------------------------- */

.finder { position: relative; min-width: 0; }

.finder__input {
    width: 210px;
    background: rgba(8, 13, 23, .9);
    border: 1px solid var(--edge);
    color: var(--frost);
    padding: 7px 11px;
    font-size: .84rem;
    transition: width .16s, border-color .12s;
}
.finder__input::placeholder { color: var(--dim); }
.finder__input:focus { border-color: var(--ice-deep); width: 260px; }
.finder__input::-webkit-search-cancel-button { filter: invert(.6); }

.finder__results {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 320px;
    max-height: 340px;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--edge-strong);
    z-index: 50;
}

.finder__hit {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid rgba(111, 200, 242, .08);
    color: var(--dust);
    cursor: pointer;
    width: 100%;
    text-align: left;
    background: none;
    border-left: 2px solid transparent;
}
.finder__hit:last-child { border-bottom: 0; }
.finder__hit:hover,
.finder__hit.is-active { background: rgba(111, 200, 242, .08); color: var(--frost); border-left-color: var(--ice); text-decoration: none; }
.finder__hit em { font-style: normal; color: var(--ice); }
.finder__hit-cat {
    font-family: var(--f-mono); font-size: .58rem;
    letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
    flex: none;
}
.finder__empty { padding: 14px 12px; color: var(--dim); font-size: .84rem; }

/* --- Work bar (edit mode only) -------------------------------------------- */

.workbar {
    position: sticky;
    top: var(--top-h);
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 16px;
    background: linear-gradient(180deg, #10233c, #0a1526);
    border-bottom: 1px solid var(--edge-strong);
    flex-wrap: wrap;
}

.workbar__state { display: flex; align-items: center; gap: 9px; }
.workbar__lamp {
    width: 6px; height: 6px; flex: none;
    background: var(--ice);
    animation: lamp 2.4s ease-in-out infinite;
}
@keyframes lamp { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }

.workbar__label {
    font-family: var(--f-mono); font-size: .66rem;
    letter-spacing: .2em; text-transform: uppercase; color: var(--ice);
}
.workbar__dirty {
    font-family: var(--f-mono); font-size: .62rem;
    letter-spacing: .12em; text-transform: uppercase; color: var(--dim);
    border-left: 1px solid var(--edge); padding-left: 9px;
}
.workbar__acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.workbar__gap { width: 1px; height: 20px; background: var(--edge); margin: 0 4px; }

/* --- Shell ---------------------------------------------------------------- */

.shell {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    align-items: start;
    min-height: calc(100vh - var(--top-h));
}

/* --- Navigation rail ------------------------------------------------------ */

.rail {
    position: sticky;
    top: var(--top-h);
    align-self: start;
    max-height: calc(100vh - var(--top-h));
    overflow-y: auto;
    padding: 20px 0 40px;
    border-right: 1px solid var(--edge);
    scrollbar-width: thin;
}
body.is-editing .rail { top: calc(var(--top-h) + 41px); max-height: calc(100vh - var(--top-h) - 41px); }

.rail__group + .rail__group { margin-top: 24px; }

.rail__head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px 7px;
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--dim);
}
.rail__head a { color: var(--dim); }
.rail__head a:hover { color: var(--ice); text-decoration: none; }
.rail__head-rule { flex: 1; height: 1px; background: var(--edge); }
.rail__count { color: var(--ice-deep); font-size: .6rem; }

.rail__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 16px;
    color: var(--dust);
    font-size: .89rem;
    border-left: 2px solid transparent;
    transition: background .1s, color .1s;
}
.rail__link:hover { color: var(--frost); background: rgba(111, 200, 242, .05); text-decoration: none; }
.rail__link.is-current {
    color: var(--frost);
    border-left-color: var(--ice);
    background: linear-gradient(90deg, rgba(111, 200, 242, .12), transparent 72%);
}
.rail__link-d {
    font-family: var(--f-mono); font-size: .6rem;
    color: var(--dim); letter-spacing: .06em; flex: none;
}
.rail__empty {
    padding: 3px 16px 4px;
    font-size: .8rem;
    color: var(--dim);
    font-style: italic;
}

/* --- Stage ---------------------------------------------------------------- */

.stage { padding: 30px 34px 90px; min-width: 0; }
.stage__loading, .stage__error {
    font-family: var(--f-mono); font-size: .74rem;
    letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
    padding: 40px 0;
}
.stage__error { color: var(--alarm); }

/* --- Record --------------------------------------------------------------- */

.record {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 0 24px;
    max-width: 1120px;
}

/* THE SIGNATURE: the drawing-frame margin. A ruled rail carrying the record
   designation on its side, ticked like the edge of a technical drawing. */
.record__rail {
    position: relative;
    border-right: 1px solid var(--edge);
    min-height: 240px;
}
.record__rail::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; right: -1px;
    width: 6px;
    background-image: repeating-linear-gradient(
        to bottom,
        var(--edge-strong) 0 1px,
        transparent 1px 18px
    );
}
.record__desig {
    position: sticky;
    top: 86px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: var(--f-mono);
    font-size: .64rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ice-deep);
    padding: 2px 0 0 9px;
    white-space: nowrap;
}

.record__main { min-width: 0; }

.record__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--f-mono);
    font-size: .63rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 12px;
}
.record__eyebrow a { color: var(--dim); }
.record__eyebrow a:hover { color: var(--ice); text-decoration: none; }
.record__eyebrow-rule { flex: 1; height: 1px; background: var(--edge); }
.record__eyebrow-stamp { color: var(--ice-deep); }

.record__title {
    font-family: var(--f-display);
    font-size: clamp(2rem, 4.4vw, 2.95rem);
    font-weight: 600;
    line-height: 1.03;
    letter-spacing: .012em;
    text-transform: uppercase;
    color: var(--frost);
}

.record__summary {
    margin-top: 10px;
    color: var(--dim);
    font-size: 1rem;
    max-width: var(--measure);
}

.record__body { margin-top: 30px; }
.record__body::after { content: ""; display: block; clear: both; }

.record__stamp {
    margin-top: 46px;
    padding-top: 12px;
    border-top: 1px solid var(--edge);
    font-family: var(--f-mono);
    font-size: .6rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dim);
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    clear: both;
}

/* --- Category listing ----------------------------------------------------- */

.cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 1px;
    background: var(--edge);
    border: 1px solid var(--edge);
    margin-top: 26px;
}
.cat-card {
    background: var(--hull);
    padding: 15px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 108px;
    transition: background .12s;
}
.cat-card:hover { background: var(--panel); text-decoration: none; }
.cat-card__d {
    font-family: var(--f-mono); font-size: .6rem;
    letter-spacing: .18em; color: var(--ice-deep);
}
.cat-card__t {
    font-family: var(--f-display);
    font-size: 1.16rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--frost);
}
.cat-card__s { font-size: .85rem; color: var(--dim); line-height: 1.5; }

.empty-note {
    border: 1px dashed var(--edge-strong);
    padding: 34px 24px;
    text-align: center;
    color: var(--dim);
    margin-top: 26px;
}
.empty-note p { margin-bottom: 14px; }

/* --- Elements: shared ----------------------------------------------------- */

.el { position: relative; margin-bottom: 26px; }
.el:last-child { margin-bottom: 0; }

/* Floats ride the wrapper rather than the element inside it. If the wrapper
   collapsed to zero height around a floated child, its edit tools would have
   nothing to hang off. Both columns share one width so a page with an info
   panel and a floated plate still reads as a single grid. */
.el--right, .el--left { width: 304px; }

/* A float must sit above the elements that flow around it.
   Every .el is position:relative (to anchor its tool cluster), which drops
   them all into the positioned layer — and there, paint and hit-test order
   follow DOM order, not float rules. Without this, the text element after an
   info panel and the insert bars between them cover it: the panel's own
   pixels report the *text* element under the cursor, so reaching for the
   panel's edit buttons silently swaps the hover onto its neighbour and the
   buttons vanish. Text still wraps around the float; only the stacking moves. */
.el--right, .el--left { z-index: 2; }
.el--right { float: right; margin: 4px 0 22px 26px; clear: right; }
.el--left  { float: left;  margin: 4px 26px 22px 0; clear: left; }

/* --- Element: heading ----------------------------------------------------- */

.el-heading h2, .el-heading h3 {
    font-family: var(--f-display);
    text-transform: uppercase;
    color: var(--frost);
    font-weight: 600;
    letter-spacing: .075em;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--edge);
    position: relative;
    /* Deliberately not `clear: both`. Clearing would drop every section below
       a tall info panel and leave half a screen of dead space beside it. The
       rule runs under the panel instead, which paints over it — the same way
       a printed spec sheet lets the column run past the plate. */
}
.el-heading h2 { font-size: 1.34rem; }
.el-heading h3 { font-size: 1.08rem; letter-spacing: .1em; color: var(--dust); }
/* A short ice segment riding the hairline — the only flourish these get. */
.el-heading h2::after, .el-heading h3::after {
    content: "";
    position: absolute;
    left: 0; bottom: -1px;
    width: 46px; height: 1px;
    background: var(--ice);
}

/* --- Element: text -------------------------------------------------------- */

.el-text { max-width: var(--measure); }
.el-text p + p { margin-top: 1em; }
.el-text strong { color: var(--frost); font-weight: 600; }
.el-text em { color: var(--frost); }
.el-text code {
    font-family: var(--f-mono); font-size: .86em;
    background: var(--hull); border: 1px solid var(--edge);
    padding: 1px 5px; color: var(--ice);
}
.wlink { border-bottom: 1px dotted var(--edge-strong); }
.wlink:hover { text-decoration: none; border-bottom-color: var(--ice); }
.wlink--new { color: var(--alarm); border-bottom-style: dashed; }

/* --- Element: image ------------------------------------------------------- */

.plate { border: 1px solid var(--edge); background: var(--hull); padding: 6px; }
.plate img { width: 100%; }
.plate figcaption {
    font-family: var(--f-mono);
    font-size: .64rem;
    letter-spacing: .08em;
    color: var(--dim);
    padding: 8px 3px 2px;
    line-height: 1.5;
}
.el-image--wide .plate { max-width: 100%; }
.el-image--inset .plate { max-width: 62%; }
/* left/right placement is handled by .el--left / .el--right on the wrapper. */

.plate--empty {
    display: grid;
    place-items: center;
    min-height: 168px;
    border-style: dashed;
    border-color: var(--edge-strong);
    font-family: var(--f-mono);
    font-size: .68rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dim);
    text-align: center;
    padding: 20px;
}

/* --- Element: gallery ----------------------------------------------------- */

.gallery { display: grid; gap: 10px; }
.gallery--2 { grid-template-columns: repeat(2, 1fr); }
.gallery--3 { grid-template-columns: repeat(3, 1fr); }
.gallery--4 { grid-template-columns: repeat(4, 1fr); }

/* --- Element: infobox ----------------------------------------------------- */

.infobox {
    border: 1px solid var(--edge-strong);
    background: linear-gradient(180deg, var(--panel), var(--hull));
    position: relative;
}
/* Corner brackets — instrument framing. Kept to two corners, not four, so it
   reads as a drawn mark rather than a sci-fi border kit. */
.infobox::before, .infobox::after {
    content: "";
    position: absolute;
    width: 9px; height: 9px;
    border: 1px solid var(--ice);
}
.infobox::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.infobox::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.infobox__title {
    font-family: var(--f-display);
    font-size: 1rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--frost);
    padding: 10px 14px;
    background: var(--deep);
    border-bottom: 1px solid var(--edge);
}
.infobox__plate { padding: 8px 8px 0; }
.infobox__plate img { width: 100%; border: 1px solid var(--edge); }
.infobox__plate--empty {
    margin: 8px 8px 0;
    display: grid; place-items: center;
    min-height: 128px;
    border: 1px dashed var(--edge-strong);
    font-family: var(--f-mono); font-size: .64rem;
    letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}
.infobox__rows { padding: 8px 0; }
.infobox__row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    padding: 6px 14px;
    font-size: .85rem;
}
.infobox__row + .infobox__row { border-top: 1px solid rgba(111, 200, 242, .07); }
.infobox__row dt {
    font-family: var(--f-mono); font-size: .62rem;
    letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
    padding-top: 3px;
}
.infobox__row dd { color: var(--frost); word-wrap: break-word; }

/* --- Element: stats ------------------------------------------------------- */

.stats__title {
    font-family: var(--f-mono); font-size: .64rem;
    letter-spacing: .18em; text-transform: uppercase; color: var(--dim);
    margin-bottom: 12px;
}
.stat { max-width: 520px; }
.stat + .stat { margin-top: 13px; }
.stat__top {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    font-family: var(--f-mono); font-size: .66rem;
    letter-spacing: .13em; text-transform: uppercase;
}
.stat__label { color: var(--dust); }
.stat__value { color: var(--ice); }
.stat__track {
    height: 7px;
    margin-top: 5px;
    background: rgba(111, 200, 242, .07);
    border: 1px solid var(--edge);
}
/* Segmented rather than solid — an instrument readout, not a progress bar. */
.stat__fill {
    height: 100%;
    background-image: repeating-linear-gradient(90deg, var(--ice) 0 5px, transparent 5px 8px);
    transition: width .3s ease-out;
}

/* --- Element: quote ------------------------------------------------------- */

.el-quote blockquote {
    border-left: 2px solid var(--ice-deep);
    padding: 3px 0 3px 20px;
    max-width: var(--measure);
}
.el-quote p { font-size: 1.08rem; color: var(--frost); line-height: 1.55; }
.el-quote cite {
    display: block;
    margin-top: 9px;
    font-family: var(--f-mono);
    font-size: .64rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dim);
    font-style: normal;
}
.el-quote cite::before { content: "— "; }

/* --- Element: list -------------------------------------------------------- */

.el-list ul, .el-list ol { max-width: var(--measure); list-style: none; }
.el-list li { position: relative; padding-left: 22px; margin-bottom: 7px; }
.el-list ul li::before {
    content: "";
    position: absolute;
    left: 2px; top: .68em;
    width: 5px; height: 1px;
    background: var(--ice-deep);
}
.el-list ol { counter-reset: n; }
.el-list ol li { counter-increment: n; }
.el-list ol li::before {
    content: counter(n, decimal-leading-zero);
    position: absolute; left: 0; top: 0;
    font-family: var(--f-mono); font-size: .68rem;
    color: var(--ice-deep); letter-spacing: .08em;
}

/* --- Element: callout ----------------------------------------------------- */

.callout {
    border: 1px solid var(--edge);
    border-left: 2px solid var(--ice-deep);
    background: rgba(16, 34, 67, .4);
    padding: 14px 16px;
    max-width: var(--measure);
}
.callout__label {
    font-family: var(--f-mono); font-size: .62rem;
    letter-spacing: .2em; text-transform: uppercase;
    color: var(--ice); margin-bottom: 7px;
}
.callout__body p + p { margin-top: .8em; }
.callout--caution { border-left-color: var(--ice); background: rgba(111, 200, 242, .07); }
.callout--caution .callout__label { color: var(--frost); }
.callout--classified {
    border-left-color: var(--frost);
    background: repeating-linear-gradient(
        135deg,
        rgba(111, 200, 242, .05) 0 8px,
        transparent 8px 16px
    ), var(--hull);
}
.callout--classified .callout__label { color: var(--frost); }

/* --- Element: divider ----------------------------------------------------- */

.el-divider { display: flex; align-items: center; gap: 14px; clear: both; }
.el-divider__line { flex: 1; height: 1px; background: var(--edge); }
.el-divider__label {
    font-family: var(--f-mono); font-size: .62rem;
    letter-spacing: .22em; text-transform: uppercase; color: var(--dim);
    flex: none;
}

/* ==========================================================================
   EDIT MODE
   The reader's view is the real design; everything below only exists once
   an editor signs in, and is deliberately plainer so it never competes.
   ========================================================================== */

body.is-editing .el { outline: 1px dashed transparent; outline-offset: 9px; }
body.is-editing .el:hover { outline-color: var(--edge); }
body.is-editing .el.is-active { outline-color: var(--ice-deep); outline-style: solid; }

/* Anchored top-left, never top-right: elements run the full width of the
   column, so a right-anchored cluster would land on top of a floated info
   panel. The left margin is always clear. */
.el__tools {
    position: absolute;
    /* Clear of the element's own first line — the cluster sits in the gap
       above rather than covering the text it is there to edit. */
    top: -21px; left: -8px;
    display: flex;
    align-items: stretch;
    gap: 1px;
    background: var(--edge-strong);
    border: 1px solid var(--edge-strong);
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s;
    z-index: 12;
}
body.is-editing .el:hover .el__tools,
body.is-editing .el:focus-within .el__tools { opacity: 1; pointer-events: auto; }

.el__tool {
    background: var(--panel);
    border: 0;
    color: var(--dust);
    width: 26px; height: 24px;
    display: grid; place-items: center;
    cursor: pointer;
    font-family: var(--f-mono); font-size: .7rem; line-height: 1;
}
.el__tool:hover { background: var(--ice); color: var(--void); }
.el__tool--del:hover { background: var(--alarm); color: var(--frost); }
.el__tool:disabled { opacity: .3; cursor: not-allowed; }
.el__tool:disabled:hover { background: var(--panel); color: var(--dust); }

/* Rides inside the tool cluster so an element carries one tab, not two. */
.el__kind {
    font-family: var(--f-mono); font-size: .55rem;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--dim);
    background: var(--void);
    padding: 0 8px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* Insert bars: the gap between two elements is itself a control.
   This has to be a plain block <div>, never a <button> and never display:flex.
   Both of those establish their own formatting context, which means they
   refuse to sit beside a float — every bar would jump below the info panel
   and drag the page down the moment edit mode switched on. A normal block box
   overlaps the float instead, and the panel simply paints over the hairline. */
.inserter {
    position: relative;
    height: 20px;
    display: none;
    cursor: pointer;
    width: 100%;
}
body.is-editing .inserter { display: block; }
.inserter::before {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: transparent;
    transition: background .1s;
}
.inserter:hover::before, .inserter:focus-visible::before { background: var(--ice-deep); }
.inserter__plus {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--f-mono);
    font-size: .58rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dim);
    background: var(--void);
    border: 1px solid var(--edge);
    padding: 2px 10px;
    opacity: 0;
    transition: opacity .1s, color .1s, border-color .1s;
    white-space: nowrap;
}
.inserter:hover .inserter__plus,
.inserter:focus-visible .inserter__plus { opacity: 1; color: var(--ice); border-color: var(--ice-deep); }

.canvas-empty {
    border: 1px dashed var(--edge-strong);
    padding: 40px 20px;
    text-align: center;
    color: var(--dim);
    font-family: var(--f-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* --- Modal ---------------------------------------------------------------- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(2, 4, 8, .74);
    -webkit-backdrop-filter: blur(4px);
            backdrop-filter: blur(4px);
    display: grid;
    place-items: center;
    padding: 20px;
    animation: fade .12s ease-out;
}
@keyframes fade { from { opacity: 0; } }

.modal {
    width: min(660px, 100%);
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--edge-strong);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
.modal--wide { width: min(940px, 100%); }

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 13px 16px;
    background: var(--deep);
    border-bottom: 1px solid var(--edge-strong);
    flex: none;
}
.modal__title {
    font-family: var(--f-display);
    font-size: 1.02rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--frost);
    font-weight: 600;
}
.modal__close {
    background: none; border: 0; color: var(--dim);
    cursor: pointer; font-size: 1.1rem; line-height: 1;
    padding: 4px 8px;
}
.modal__close:hover { color: var(--frost); }

.modal__body { padding: 18px 16px; overflow-y: auto; flex: 1; }
.modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 13px 16px;
    border-top: 1px solid var(--edge);
    flex: none;
    flex-wrap: wrap;
}
.modal__foot-note {
    margin-right: auto;
    font-family: var(--f-mono);
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dim);
    align-self: center;
}

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

.field { margin-bottom: 15px; }
.field:last-child { margin-bottom: 0; }
.field__label {
    display: block;
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 6px;
}
.field__hint { font-size: .78rem; color: var(--dim); margin-top: 5px; line-height: 1.5; }

.input, .textarea, .select {
    width: 100%;
    background: var(--void);
    border: 1px solid var(--edge);
    color: var(--frost);
    padding: 9px 11px;
    font-size: .92rem;
    font-family: var(--f-body);
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--ice-deep); }
.textarea { min-height: 128px; resize: vertical; line-height: 1.6; }
.textarea--tall { min-height: 220px; }
.select { appearance: none; cursor: pointer; padding-right: 30px;
    background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%),
                      linear-gradient(135deg, var(--dim) 50%, transparent 50%);
    background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}
.select option { background: var(--panel); color: var(--frost); }

.field--check { display: flex; align-items: flex-start; gap: 9px; }
.field--check input { margin-top: 3px; accent-color: var(--ice); width: 15px; height: 15px; flex: none; }
.field--check label { font-size: .88rem; color: var(--dust); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Repeatable rows (infobox rows, stat bars, list items) */
.repeat__item {
    display: grid;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--edge);
    background: var(--hull);
    margin-bottom: 8px;
    position: relative;
}
.repeat__tools {
    display: flex;
    justify-content: flex-end;
    gap: 1px;
    margin-bottom: 2px;
}
.repeat__add { margin-top: 4px; }

/* --- Media picker --------------------------------------------------------- */

.picker__drop {
    border: 1px dashed var(--edge-strong);
    padding: 22px;
    text-align: center;
    color: var(--dim);
    font-size: .86rem;
    margin-bottom: 16px;
    transition: border-color .12s, background .12s;
}
.picker__drop.is-over { border-color: var(--ice); background: rgba(111, 200, 242, .07); color: var(--frost); }
.picker__drop strong { color: var(--ice); font-weight: 600; }

.picker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px;
}
.picker__cell {
    border: 1px solid var(--edge);
    background: var(--hull);
    padding: 0;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
}
.picker__cell:hover { border-color: var(--ice); }
.picker__cell.is-picked { border-color: var(--ice); outline: 1px solid var(--ice); }
.picker__cell img { width: 100%; height: 92px; object-fit: cover; display: block; }
.picker__cell figcaption {
    font-family: var(--f-mono);
    font-size: .56rem;
    color: var(--dim);
    padding: 5px 6px;
    word-break: break-all;
    text-align: left;
    line-height: 1.4;
}
.picker__kill {
    position: absolute; top: 4px; right: 4px;
    background: rgba(4, 6, 11, .84);
    border: 1px solid var(--edge-strong);
    color: var(--dust);
    width: 20px; height: 20px;
    display: grid; place-items: center;
    cursor: pointer; font-size: .7rem; line-height: 1;
    opacity: 0;
}
.picker__cell:hover .picker__kill { opacity: 1; }
.picker__kill:hover { background: var(--alarm); color: var(--frost); border-color: var(--alarm); }

.thumb-strip { display: flex; align-items: center; gap: 10px; }
.thumb-strip img {
    width: 64px; height: 46px; object-fit: cover;
    border: 1px solid var(--edge); flex: none;
}
.thumb-strip__none {
    width: 64px; height: 46px; flex: none;
    border: 1px dashed var(--edge-strong);
    display: grid; place-items: center;
    font-family: var(--f-mono); font-size: .52rem;
    color: var(--dim); text-transform: uppercase; letter-spacing: .1em;
}

/* --- Preset + list management --------------------------------------------- */

.stack { display: flex; flex-direction: column; gap: 1px; background: var(--edge); border: 1px solid var(--edge); }
.stack__row {
    background: var(--hull);
    padding: 11px 13px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.stack__main { flex: 1; min-width: 0; }
.stack__name {
    font-family: var(--f-display);
    font-size: 1rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--frost);
}
.stack__meta { font-size: .78rem; color: var(--dim); margin-top: 2px; }
.stack__acts { display: flex; gap: 5px; flex: none; }

.chip-line { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.chip {
    font-family: var(--f-mono);
    font-size: .55rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ice-deep);
    border: 1px solid var(--edge);
    padding: 2px 6px;
    background: var(--void);
}

.type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 8px;
}
.type-card {
    border: 1px solid var(--edge);
    background: var(--hull);
    padding: 12px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.type-card:hover { border-color: var(--ice); background: var(--panel); }
.type-card__n {
    font-family: var(--f-display);
    font-size: .96rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--frost);
}
.type-card__d { font-size: .76rem; color: var(--dim); line-height: 1.45; }

/* --- Toasts --------------------------------------------------------------- */

.toast-stack {
    position: fixed;
    bottom: 18px; right: 18px;
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(360px, calc(100vw - 36px));
}
.toast {
    background: var(--panel);
    border: 1px solid var(--edge-strong);
    border-left: 2px solid var(--ice);
    padding: 10px 14px;
    font-size: .86rem;
    color: var(--frost);
    animation: toast-in .16s ease-out;
}
.toast--bad { border-left-color: var(--alarm); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

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

.tailbar {
    border-top: 1px solid var(--edge);
    padding: 14px 18px;
    font-family: var(--f-mono);
    font-size: .58rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dim);
    text-align: center;
}

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

@media (max-width: 1080px) {
    .el--right, .el--left { width: 268px; }
}

@media (max-width: 900px) {
    .nav-toggle { display: inline-grid; }

    .shell { grid-template-columns: minmax(0, 1fr); }

    .rail {
        position: fixed;
        top: var(--top-h);
        left: 0;
        width: 280px;
        /* Height is set outright rather than via top/bottom. The desktop rule
           sets align-self: start, and an out-of-flow box with an explicit
           alignment is shrink-to-fit sized — so bottom: 0 was being ignored
           and the drawer stopped at the end of its links. dvh also keeps it
           honest when a phone's address bar slides away. */
        align-self: stretch;
        bottom: auto;
        height: calc(100vh - var(--top-h));
        height: calc(100dvh - var(--top-h));
        max-height: none;
        background: var(--hull);
        border-right: 1px solid var(--edge-strong);
        z-index: 45;
        transform: translateX(-100%);
        transition: transform .18s ease-out;
    }
    body.is-editing .rail { top: var(--top-h); }
    body.nav-open .rail { transform: none; }

    .stage { padding: 22px 18px 70px; }

    .record { grid-template-columns: minmax(0, 1fr); }
    .record__rail { display: none; }

    .el--right, .el--left { float: none; width: 100%; margin: 0 0 26px; }

    .el-image--inset .plate { max-width: 100%; }

    .gallery--3, .gallery--4 { grid-template-columns: repeat(2, 1fr); }

    .finder__input { width: 150px; }
    .finder__input:focus { width: 190px; }
    .finder__results { width: min(320px, calc(100vw - 32px)); }
}

@media (max-width: 560px) {
    /* The bar carries a brand, a toggle, a search field and the Edit button.
       At phone widths their natural widths sum past the viewport and stretch
       the whole page, so each one gives up a little rather than the body
       gaining a horizontal scrollbar. */
    .topbar { padding: 0 10px; gap: 8px; }
    .brand { gap: 8px; }
    .brand__sub { display: none; }
    .brand__title { font-size: 1rem; letter-spacing: .1em; }
    .topbar__tools { gap: 6px; }
    .finder__input { width: 104px; padding: 7px 8px; }
    .finder__input:focus { width: 132px; }
    .btn--edit { padding: 7px 10px; }

    .workbar { gap: 8px; }
    .workbar__acts { width: 100%; }
    .gallery--2, .gallery--3, .gallery--4 { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; }
    .infobox__row { grid-template-columns: 78px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

@media print {
    .topbar, .workbar, .rail, .tailbar, .el__tools, .el__kind, .inserter { display: none !important; }
    body { background: #fff; color: #000; }
    body::before { display: none; }
    .stage { padding: 0; }
}