/* ══════════════════════════════════════════════════════════════════════════
   THE FOUNDRY  ·  fullscreen slide-based cluster provisioning
   ─────────────────────────────────────────────────────────────────────────
   A deliberate escalation away from the panel language. Provisioning is the
   one expensive, hard-to-undo thing Overture does, so it earns a takeover
   rather than a page: the nav rail hands over its column, each step is a
   full plate, and the type gets loud.

   Fraunces (already loaded in _Host.cshtml, unused elsewhere in Overture)
   carries the display weight via its opsz/wght/SOFT axes. JetBrains Mono
   keeps every port number unambiguous. Roboto Flex at low weight does ledes.

   Kept in its own sheet rather than appended to overture.css so it can be
   pulled out in one line and cannot bleed into the rest of the panel.
   Prefix: .fdr-
   ══════════════════════════════════════════════════════════════════════════ */

/* ---- the rail hands over its column ----------------------------------- */
/* :has() lets the layout react to this page with no interop. Collapsing the
   grid COLUMN (rather than covering the rail with an overlay) is the point:
   the wizard genuinely gains the 280px. */
.ovt-shell > .ovt-rail {
    transition: transform 780ms cubic-bezier(.72, 0, .18, 1), opacity 420ms ease;
    will-change: transform;
}
.ovt-shell:has(.fdr) {
    grid-template-columns: 0 1fr;
    transition: grid-template-columns 780ms cubic-bezier(.72, 0, .18, 1);
}
.ovt-shell:has(.fdr) > .ovt-rail {
    transform: translateX(-101%);
    opacity: 0;
    pointer-events: none;
}
/* the wizard sets its own margins; the page wrapper must not add any */
.ovt-shell:has(.fdr) .ovt-content {
    padding: 0;
    margin: 0;
    max-width: none;
}
.ovt-shell:has(.fdr) .ovt-atmos { opacity: .35; }

/* ---- the stage -------------------------------------------------------- */
.fdr {
    --fdr-ease: cubic-bezier(.65, .02, .18, 1);
    --fdr-pad: clamp(1.25rem, 4.2vw, 5rem);
    --fdr-ink: #E8EAEE;
    position: relative;
    height: 100vh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;                 /* plates scroll internally, the page never does */
    background: radial-gradient(120% 90% at 8% 0%, #0b1a15 0%, #070a0c 46%, #05070a 100%);
    color: var(--fdr-ink);
    font-family: 'Roboto Flex', system-ui, sans-serif;
    font-variation-settings: 'opsz' 32, 'wght' 350;
    animation: fdrEnter 700ms var(--fdr-ease) both;
}
@keyframes fdrEnter {
    from { opacity: 0; transform: scale(1.015); filter: blur(6px); }
    to   { opacity: 1; transform: none;         filter: none; }
}

/* hairline plate grid + grain: atmosphere and depth rather than a flat fill */
.fdr::before {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        repeating-linear-gradient(to right, rgba(16,185,129,.055) 0 1px, transparent 1px 12.5%),
        repeating-linear-gradient(to bottom, rgba(225,227,232,.022) 0 1px, transparent 1px 5rem);
}
.fdr::after {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    opacity: .5; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ---- masthead --------------------------------------------------------- */
.fdr-head {
    position: relative; z-index: 3;
    display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
    padding: clamp(1rem, 2.2vw, 1.9rem) var(--fdr-pad) 0;
}
.fdr-mast {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .625rem; letter-spacing: .38em; text-transform: uppercase;
    color: rgba(52, 211, 153, .78);
    display: flex; align-items: center; gap: .85rem;
}
.fdr-mast b { font-weight: 700; color: var(--fdr-ink); letter-spacing: .3em; }
.fdr-mast .rule { width: clamp(1.5rem, 6vw, 6rem); height: 1px; background: var(--ovt-hairline-strong); }
.fdr-quit {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
    color: rgba(225,227,232,.5); text-decoration: none;
    border: 1px solid transparent; border-radius: 2px;
    padding: .5rem .8rem;
    transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.fdr-quit:hover { color: var(--fdr-ink); border-color: var(--ovt-hairline-strong); background: rgba(16,185,129,.05); }

/* ---- the slide track -------------------------------------------------- */
.fdr-stage { position: relative; z-index: 2; overflow: hidden; }
.fdr-track {
    display: flex; height: 100%;
    transform: translate3d(calc(var(--fdr-i, 0) * -100%), 0, 0);
    transition: transform 780ms var(--fdr-ease);
    will-change: transform;
}
/* A plate is a fixed masthead over a scrolling work area, NOT one long scrolling column.
   When the whole plate scrolled, the display type went with it and every step felt like a
   web page again; now the title stays put and only the part you are working in moves. */
.fdr-plate {
    flex: 0 0 100%; min-width: 100%; height: 100%;
    position: relative;
    display: grid; grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    padding: clamp(.75rem, 1.8vw, 1.6rem) var(--fdr-pad) 0;
}
/* the only scroller inside a plate, so there is never a scroller within a scroller */
.fdr-work {
    position: relative; z-index: 1;
    overflow-y: auto; overflow-x: hidden;
    padding: 0 .5rem clamp(1rem, 2.5vw, 2.5rem) 0;
}
/* app.css sets `html body * { scrollbar-color: #FF2A00 ... }`, which reaches EVERY element, so
   any scroller in here that does not state its own colour comes out in the site's orange. The
   global ::-webkit-scrollbar-thumb is orange too. Both are overridden for the whole takeover. */
.fdr,
.fdr *,
.fdr-plate,
.fdr-vers,
.fdr-log,
.fdr-ledger-wrap,
.fdr-detail,
.fdr-results { scrollbar-color: rgba(16,185,129,.3) transparent; scrollbar-width: thin; }
.fdr ::-webkit-scrollbar,
.fdr::-webkit-scrollbar { width: 9px; height: 9px; }
.fdr ::-webkit-scrollbar-track,
.fdr::-webkit-scrollbar-track { background: transparent; }
.fdr ::-webkit-scrollbar-thumb,
.fdr::-webkit-scrollbar-thumb { background: rgba(16,185,129,.26); border-radius: 9px; }
.fdr ::-webkit-scrollbar-thumb:hover,
.fdr::-webkit-scrollbar-thumb:hover { background: rgba(52,211,153,.45); }
/* an off-screen plate must not be tabbable or announced */
.fdr-plate[aria-hidden="true"] { visibility: hidden; }

/* the chapter numeral, outline only, bled off the edge. the most
   self-important element on screen, which is the brief. */
/* Anchored to the PLATE, not the work area, so it holds still as content scrolls past it.
   Smaller than it was: with the masthead no longer 200px tall it does not need to shout. */
.fdr-ghost {
    position: absolute; left: -.06em; bottom: -.2em; z-index: 0;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 144, 'wght' 900, 'SOFT' 30;
    font-size: 34vh; line-height: .68;
    color: transparent;
    -webkit-text-stroke: 1.1px rgba(16, 185, 129, .11);
    pointer-events: none; user-select: none;
}
.fdr-plate[data-on="1"] .fdr-ghost { animation: fdrGhost 1.4s var(--fdr-ease) both; }
@keyframes fdrGhost {
    from { opacity: 0; transform: translateX(-.08em) scale(.97); }
    to   { opacity: 1; transform: none; }
}

/* ---- editorial type --------------------------------------------------- */
/* The masthead is a BAND, not a stack: title on the left, lede set beside it on the right,
   sharing a baseline. Stacking them cost roughly 200px of height on every plate, which is
   what pushed the actual controls off screen. */
.fdr-masthead {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30ch);
    gap: clamp(1rem, 3vw, 3rem); align-items: end;
    padding-bottom: clamp(.6rem, 1.4vw, 1.1rem);
    margin-bottom: clamp(.75rem, 1.6vw, 1.4rem);
    border-bottom: 1px solid var(--ovt-hairline);
}
@media (max-width: 900px) {
    .fdr-masthead { grid-template-columns: 1fr; align-items: start; gap: .6rem; }
}
.fdr-body { position: relative; z-index: 1; max-width: 78rem; }
.fdr-eyebrow {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .5625rem; letter-spacing: .38em; text-transform: uppercase;
    color: rgba(52,211,153,.7); margin: 0 0 .5rem;
}
/* still the loudest thing on the plate, just no longer the tallest */
.fdr-h {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 144, 'wght' 680, 'SOFT' 100;
    font-size: clamp(1.6rem, 3.4vw, 3.125rem);
    line-height: .92; letter-spacing: -.03em;
    margin: 0; text-wrap: balance;
}
/* the light-weight accent word: contrast by weight, not by hue alone */
.fdr-h em {
    font-style: normal;
    font-variation-settings: 'opsz' 144, 'wght' 300, 'SOFT' 100;
    color: var(--ovt-green-soft);
}
.fdr-lede {
    font-size: .8125rem;
    line-height: 1.5; color: rgba(232,234,238,.5);
    margin: 0; padding-bottom: .2rem;
    font-variation-settings: 'opsz' 16, 'wght' 320;
}

/* staggered reveal, ordered explicitly per element via --d */
.fdr-plate[data-on="1"] .fdr-rise {
    animation: fdrRise 640ms var(--fdr-ease) both;
    animation-delay: var(--d, 0ms);
}
@keyframes fdrRise {
    from { opacity: 0; transform: translateY(1.1rem); }
    to   { opacity: 1; transform: none; }
}

/* ---- fields ----------------------------------------------------------- */
.fdr-label {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .625rem; letter-spacing: .3em; text-transform: uppercase;
    color: rgba(232,234,238,.44); margin: 0 0 .5rem;
}
.fdr-label .hint {
    display: block; margin-top: .4rem;
    letter-spacing: .06em; text-transform: none; font-size: .6875rem;
    color: rgba(232,234,238,.32);
}
/* oversized, underlined, no box: typing a realm name should feel good */
.fdr-input {
    width: 100%; background: transparent; color: var(--fdr-ink);
    border: 0; border-bottom: 1px solid var(--ovt-hairline-strong);
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 96, 'wght' 480, 'SOFT' 60;
    font-size: clamp(1.35rem, 3vw, 2.5rem);
    letter-spacing: -.015em; padding: .28em 0 .2em;
    caret-color: var(--ovt-green-soft);
    transition: border-color .22s ease, box-shadow .22s ease;
}
.fdr-input::placeholder { color: rgba(232,234,238,.2); font-variation-settings: 'wght' 300; }
/* the shell's global focus ring looks wrong on a bare underline, so this
   replaces it with an equally loud indicator rather than removing one */
.ovt-shell .fdr-input:focus,
.ovt-shell .fdr-input:focus-visible {
    outline: none;
    border-bottom-color: var(--ovt-green-soft);
    box-shadow: 0 1px 0 0 var(--ovt-green-soft), 0 14px 34px -26px var(--ovt-glow);
}
.fdr-input-mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 1.0625rem; letter-spacing: .01em;
}

/* ---- buttons ---------------------------------------------------------- */
.fdr-btn {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--fdr-ink); background: rgba(255,255,255,.02);
    border: 1px solid var(--ovt-hairline-strong); border-radius: 2px;
    padding: .8rem 1.4rem; cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.fdr-btn:hover:not(:disabled) { background: rgba(16,185,129,.08); border-color: var(--ovt-green); }
.fdr-btn:active:not(:disabled) { transform: translateY(1px); }
.fdr-btn:disabled { opacity: .32; cursor: not-allowed; }
.fdr-btn-go {
    color: #04120c; background: linear-gradient(180deg, var(--ovt-green-soft), var(--ovt-green));
    border-color: transparent; font-weight: 700;
}
.fdr-btn-go:hover:not(:disabled) {
    background: linear-gradient(180deg, #4ade9f, var(--ovt-green-soft));
    border-color: transparent;
}
/* armed = about to create real servers. it should feel different. */
.fdr-btn-armed {
    color: #16090a; background: linear-gradient(180deg, #FCA5A5, #F87171);
    border-color: transparent; font-weight: 700;
    animation: fdrPulse 1.5s ease-in-out infinite;
}
@keyframes fdrPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,.5); }
    50%      { box-shadow: 0 0 0 8px rgba(248,113,113,0); }
}
.fdr-btn-xs { padding: .45rem .7rem; font-size: .625rem; letter-spacing: .16em; }

/* source toggle */
.fdr-seg { display: inline-flex; border: 1px solid var(--ovt-hairline-strong); border-radius: 2px; overflow: hidden; }
.fdr-seg button {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .625rem; letter-spacing: .2em; text-transform: uppercase;
    background: transparent; color: rgba(232,234,238,.5); border: 0;
    padding: .8rem 1.1rem; cursor: pointer;
    transition: background .18s ease, color .18s ease;
}
.fdr-seg button + button { border-left: 1px solid var(--ovt-hairline); }
.fdr-seg button:hover { color: var(--fdr-ink); }
.fdr-seg button.is-on { background: rgba(16,185,129,.14); color: var(--ovt-green-soft); }

/* ---- search ----------------------------------------------------------- */
.fdr-searchrow { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: .6rem; }
.fdr-searchrow > .fdr-input { flex: 1 1 22rem; min-width: 0; }
.fdr-src {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .6875rem; color: rgba(232,234,238,.34); margin: 0 0 1.5rem;
}

/* ---- search: results beside the selection ------------------------------ */
/* One list is a wall of near-identical cards, so the chosen pack gets its own column with the
   detail you actually decide on. Collapses to one column when there is no room for two. */
.fdr-split {
    display: grid; gap: clamp(1rem, 2.4vw, 2.25rem);
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: start;
}
@media (max-width: 1080px) { .fdr-split { grid-template-columns: 1fr; } }
/* no max-height and no overflow: the work area is the scroller, and a list that scrolled
   inside a scrolling plate was the "which thing am I moving" problem */
.fdr-results { display: grid; gap: .5rem; }

/* ---- pack cards ------------------------------------------------------- */
.fdr-pack {
    position: relative;
    display: grid; grid-template-columns: 3rem 1fr auto; gap: .9rem; align-items: center;
    text-align: left; cursor: pointer; width: 100%;
    background: rgba(255,255,255,.015); border: 1px solid var(--ovt-hairline);
    border-radius: 3px; padding: .7rem .9rem; color: inherit;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.fdr-pack:hover { border-color: var(--ovt-hairline-strong); background: rgba(16,185,129,.045); transform: translateX(2px); }
.fdr-pack.is-on { border-color: var(--ovt-green); background: rgba(16,185,129,.1); }
.fdr-pack-icon {
    width: 3rem; height: 3rem; border-radius: 2px; object-fit: cover;
    background: rgba(16,185,129,.07); border: 1px solid var(--ovt-hairline);
}
/* explicit column, same reason as .fdr-mode */
.fdr-pack-main { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.fdr-pack-t {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 48, 'wght' 600, 'SOFT' 80;
    font-size: 1rem; line-height: 1.2; letter-spacing: -.01em;
}
.fdr-pack-s { margin-top: .2rem; font-size: .75rem; line-height: 1.4; color: rgba(232,234,238,.44); }
.fdr-pack-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.fdr-pack-d {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .6875rem; color: rgba(52,211,153,.7); white-space: nowrap;
}
/* which registry a result came from, now that the two are one search */
.fdr-srcbadge {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .5rem; letter-spacing: .18em; text-transform: uppercase;
    padding: .15rem .4rem; border-radius: 2px; white-space: nowrap;
}
.fdr-srcbadge.s-modrinth { background: rgba(16,185,129,.16); color: var(--ovt-green-soft); }
.fdr-srcbadge.s-curseforge { background: rgba(251,146,60,.16); color: #FB923C; }
.fdr-srcbadge.s-local { background: rgba(196,181,253,.16); color: var(--ovt-violet); }

/* ---- the selected pack, in detail -------------------------------------- */
/* sticks to the top of the work area while the results scroll past it */
.fdr-detail {
    position: sticky; top: 0;
    border: 1px solid var(--ovt-hairline-strong); border-radius: 3px;
    background: linear-gradient(180deg, rgba(16,185,129,.06), rgba(10,16,20,.98));
    padding: clamp(.9rem, 1.6vw, 1.35rem);
}
.fdr-detail-head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.fdr-detail-icon {
    width: 4.5rem; height: 4.5rem; flex: none; border-radius: 3px; object-fit: cover;
    background: rgba(16,185,129,.07); border: 1px solid var(--ovt-hairline);
}
.fdr-detail-t {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 96, 'wght' 640, 'SOFT' 90;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.1; letter-spacing: -.02em;
    margin: 0 0 .45rem;
}
.fdr-detail-sum { font-size: .8125rem; line-height: 1.55; color: rgba(232,234,238,.58); margin: 0 0 1rem; }
.fdr-detail-rows { display: flex; flex-direction: column; gap: 0; }
.fdr-drow {
    display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
    padding: .5rem 0; border-bottom: 1px solid rgba(225,227,232,.055);
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .75rem;
}
.fdr-drow:last-child { border-bottom: 0; }
.fdr-drow .k {
    font-size: .5625rem; letter-spacing: .2em; text-transform: uppercase;
    color: rgba(232,234,238,.34); white-space: nowrap;
}
.fdr-drow .v { color: var(--fdr-ink); text-align: right; word-break: break-word; }
.fdr-drow .v.dim { color: rgba(232,234,238,.4); }
.fdr-drow .v.ok { color: var(--ovt-green-soft); }
.fdr-detail-link {
    display: inline-block; margin-top: 1rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .625rem; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(52,211,153,.8); text-decoration: none;
    border-bottom: 1px solid rgba(16,185,129,.35); padding-bottom: .15rem;
}
.fdr-detail-link:hover { color: var(--ovt-green-soft); border-bottom-color: var(--ovt-green); }
.fdr-detail-empty {
    border: 1px dashed var(--ovt-hairline); border-radius: 3px;
    padding: clamp(1.5rem, 3vw, 3rem) 1.25rem; text-align: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .75rem; line-height: 1.7; color: rgba(232,234,238,.3);
}

/* ---- version rows ----------------------------------------------------- */
.fdr-vers { display: flex; flex-direction: column; gap: .3rem; }
.fdr-ver {
    display: grid; grid-template-columns: 1fr auto auto auto; gap: 1rem; align-items: center;
    text-align: left; cursor: pointer; color: inherit;
    background: transparent; border: 0; border-bottom: 1px solid var(--ovt-hairline);
    padding: .8rem .3rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .8125rem;
    transition: background .16s ease, padding-left .16s ease;
}
.fdr-ver:hover { background: rgba(16,185,129,.06); padding-left: .75rem; }
.fdr-ver.is-on { background: rgba(16,185,129,.12); border-bottom-color: var(--ovt-green); padding-left: .75rem; }
.fdr-ver .vn { color: var(--fdr-ink); font-weight: 500; }
.fdr-ver .vm { color: rgba(52,211,153,.8); }
.fdr-ver .vl, .fdr-ver .vt { color: rgba(232,234,238,.4); font-size: .75rem; }

/* ---- verdict banner --------------------------------------------------- */
.fdr-verdict {
    display: flex; align-items: flex-start; gap: .85rem;
    border-left: 2px solid rgba(232,234,238,.2);
    padding: .9rem 1.1rem; margin: 1.25rem 0;
    background: rgba(255,255,255,.02);
    font-size: .875rem; line-height: 1.5; color: rgba(232,234,238,.75);
}
.fdr-verdict .dot {
    width: .5rem; height: .5rem; border-radius: 50%;
    background: rgba(232,234,238,.4); margin-top: .45rem; flex: none;
}
.fdr-verdict.is-ok { border-left-color: var(--ovt-green); background: rgba(16,185,129,.06); }
.fdr-verdict.is-ok .dot { background: var(--ovt-green-soft); box-shadow: 0 0 10px var(--ovt-glow); }
.fdr-verdict.is-bad { border-left-color: var(--ovt-red); background: rgba(248,113,113,.06); }
.fdr-verdict.is-bad .dot { background: var(--ovt-red); }
.fdr-verdict.is-warn { border-left-color: var(--ovt-amber); background: rgba(251,191,36,.05); }
.fdr-verdict.is-warn .dot { background: var(--ovt-amber); }

/* ---- shape ------------------------------------------------------------ */
/* Two narrow cards on one line inside the form column. Equal-width tracks (not auto-fit) so
   they always pair up rather than wrapping to a second row at awkward widths, and minmax(0,..)
   so a long word cannot push a track wider than its share. */
.fdr-modes { display: grid; gap: .4rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 620px) { .fdr-modes { grid-template-columns: 1fr; } }
.fdr-mode {
    /* an explicit column rather than relying on display:block children: inside a <button> the
       default inline flow is what put the title and its description on one line */
    display: flex; flex-direction: column; align-items: flex-start;
    text-align: left; cursor: pointer; color: inherit; width: 100%;
    background: rgba(255,255,255,.015); border: 1px solid var(--ovt-hairline);
    border-radius: 3px; padding: .7rem .85rem;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.fdr-mode:hover { border-color: var(--ovt-hairline-strong); transform: translateX(2px); }
.fdr-mode.is-on { border-color: var(--ovt-green); background: rgba(16,185,129,.09); }
.fdr-mode .nm {
    display: block;
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 36, 'wght' 620, 'SOFT' 90;
    font-size: .9375rem; line-height: 1.15; letter-spacing: -.015em; margin-bottom: .25rem;
    text-wrap: balance;
}
.fdr-mode .ds { display: block; font-size: .6875rem; line-height: 1.38; color: rgba(232,234,238,.48); }
/* the unselected option does not need to be as legible as the chosen one */
.fdr-mode:not(.is-on) .ds { color: rgba(232,234,238,.34); }

.fdr-cols {
    display: grid; gap: clamp(1.5rem, 3.5vw, 3.5rem);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
    align-items: start;
}
.fdr-field { margin-bottom: clamp(1.25rem, 2.4vw, 2rem); }

/* name chips */
.fdr-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .85rem; align-items: center; }
.fdr-chips .cap {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .5625rem; letter-spacing: .26em; text-transform: uppercase;
    color: rgba(232,234,238,.3); margin-right: .35rem;
}
.fdr-chip {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 24, 'wght' 500, 'SOFT' 70;
    font-size: .8125rem; cursor: pointer;
    background: transparent; color: rgba(232,234,238,.62);
    border: 1px solid var(--ovt-hairline); border-radius: 999px;
    padding: .3rem .7rem;
    transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.fdr-chip:hover { color: var(--ovt-green-soft); border-color: var(--ovt-green); background: rgba(16,185,129,.08); }
.fdr-chip-more {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .5625rem; letter-spacing: .2em; text-transform: uppercase;
}

/* a name and its perf preset are one decision, so they share a baseline: the preset sits on
   the same underline as the name rather than looking like a separate unrelated field */
.fdr-named { display: flex; align-items: flex-end; gap: .75rem; }
.fdr-named > .fdr-input { flex: 1 1 auto; min-width: 0; }
.fdr-preset {
    flex: none;
    background: transparent; color: rgba(52,211,153,.85);
    border: 0; border-bottom: 1px solid var(--ovt-hairline-strong);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase;
    padding: .55rem 1.4rem .55rem .3rem; cursor: pointer;
    /* the native arrow sits badly against a bare underline, so draw our own */
    appearance: none; -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, rgba(52,211,153,.7) 50%),
                      linear-gradient(135deg, rgba(52,211,153,.7) 50%, transparent 50%);
    background-position: right .55rem center, right .3rem center;
    background-size: .3rem .3rem, .3rem .3rem;
    background-repeat: no-repeat;
    transition: color .18s ease, border-color .18s ease;
}
.fdr-preset:hover { color: var(--ovt-green-soft); border-bottom-color: var(--ovt-green); }
.fdr-preset option { background: #0a1014; color: var(--fdr-ink); letter-spacing: normal; }
.fdr-preset-note {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .625rem; line-height: 1.6; color: rgba(232,234,238,.38);
    margin: .6rem 0 0; max-width: 60ch;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* child rows */
.fdr-child { display: flex; gap: .5rem; align-items: center; margin-bottom: .45rem; }
.fdr-child > .fdr-input { flex: 1 1 auto; min-width: 0; }
.fdr-child > .fdr-preset { padding-bottom: .4rem; }
.fdr-child .fdr-input { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1.0625rem; }
.fdr-child .idx {
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .625rem;
    color: rgba(232,234,238,.28); width: 1.6rem; flex: none;
}

.fdr-check {
    display: flex; align-items: center; gap: .6rem; cursor: pointer;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .75rem; color: rgba(232,234,238,.65); margin-bottom: .55rem;
}
.fdr-check input { accent-color: var(--ovt-green); width: 1rem; height: 1rem; }
.fdr-select {
    width: 100%; background: #0a1014; color: var(--fdr-ink);
    border: 1px solid var(--ovt-hairline-strong); border-radius: 2px;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .875rem;
    padding: .7rem .8rem;
}

/* ---- the plan, as a cluster diagram ------------------------------------ */
/* The table was accurate and unreadable: what an operator wants to check first is the SHAPE,
   that the proxy fronts the parent and the children hang off it. Drawn as SVG rather than
   reusing the star map's canvas engine, so it needs no interop and stays crisp when scaled. */
.fdr-diagram {
    border: 1px solid var(--ovt-hairline); border-radius: 3px;
    background:
        radial-gradient(90% 70% at 50% 0%, rgba(16,185,129,.05), transparent 70%),
        rgba(255,255,255,.012);
    padding: clamp(.75rem, 1.6vw, 1.5rem);
    overflow-x: auto;
}
/* centred, never upscaled (the max-width cap is set inline from the viewBox width) */
.fdr-diagram svg { display: block; width: 100%; height: auto; margin: 0 auto; }

/* spokes from the hub. every realm is fronted by the proxy, so they all radiate from it */
.fdr-dg-link { stroke: rgba(103,232,249,.26); stroke-width: 1; fill: none; }
/* the cluster root gets a brighter spoke so it is still identifiable at twelve o'clock */
.fdr-dg-link.is-root { stroke: rgba(16,185,129,.5); stroke-width: 1.4; }
/* dashed: shared servers belong to every cluster, not only this one */
.fdr-dg-link.is-shared { stroke: rgba(251,191,36,.34); stroke-dasharray: 3 4; }

.fdr-dg-node { cursor: default; }
.fdr-dg-box {
    fill: #0a1014; stroke: var(--ovt-hairline-strong); stroke-width: 1;
    transition: stroke .2s ease, fill .2s ease;
}
.fdr-dg-node:hover .fdr-dg-box { fill: #0d181c; stroke: var(--ovt-green); }
.fdr-dg-edge { stroke-width: 3; }
.fdr-dg-node.r-parent     .fdr-dg-edge { stroke: var(--ovt-green); }
.fdr-dg-node.r-child      .fdr-dg-edge { stroke: var(--ovt-cyan); }
.fdr-dg-node.r-proxy      .fdr-dg-edge { stroke: var(--ovt-violet); }
.fdr-dg-node.r-crashlobby .fdr-dg-edge { stroke: var(--ovt-amber); }
.fdr-dg-node.r-events     .fdr-dg-edge { stroke: #FB923C; }

/* SVG font sizes are user units, so with the no-upscale cap above these are real pixels */
.fdr-dg-name {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 24, 'wght' 600, 'SOFT' 90;
    font-size: 11px; fill: var(--fdr-ink);
}
.fdr-dg-role {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 6px; letter-spacing: 1.1px; text-transform: uppercase;
    fill: rgba(232,234,238,.42);
}
.fdr-dg-meta {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 6.5px; fill: rgba(232,234,238,.5);
}
.fdr-dg-preset {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 6.5px; fill: rgba(52,211,153,.75);
}
.fdr-dg-caption {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 7px; letter-spacing: 1.6px; text-transform: uppercase;
    fill: rgba(232,234,238,.26);
}

/* legend under the diagram */
.fdr-dg-legend {
    display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .9rem;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .625rem; color: rgba(232,234,238,.4);
}
.fdr-dg-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.fdr-dg-legend i { width: .75rem; height: 2px; display: inline-block; }

/* ---- collapsible detail ------------------------------------------------ */
/* The routing steps are reference material, not something to read every time, so they fold
   away. <details> keeps them one click from view without an interop-driven accordion. */
.fdr-more { margin: 1.25rem 0; border-top: 1px solid var(--ovt-hairline); }
.fdr-more > summary {
    cursor: pointer; list-style: none; padding: .7rem 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .5625rem; letter-spacing: .28em; text-transform: uppercase;
    color: rgba(232,234,238,.4);
    display: flex; align-items: center; gap: .5rem;
    transition: color .18s ease;
}
.fdr-more > summary::-webkit-details-marker { display: none; }
.fdr-more > summary::before {
    content: '+'; font-size: .75rem; letter-spacing: 0;
    color: rgba(52,211,153,.7); width: .75rem;
}
.fdr-more[open] > summary::before { content: '−'; }
.fdr-more > summary:hover { color: var(--fdr-ink); }
.fdr-more > summary .count { color: rgba(52,211,153,.6); letter-spacing: .1em; }
.fdr-more-body { padding: 0 0 1rem; }

/* ---- the plan ledger -------------------------------------------------- */
.fdr-ledger-wrap {
    overflow-x: auto; border: 1px solid var(--ovt-hairline);
    border-radius: 3px; background: rgba(255,255,255,.012);
}
.fdr-ledger {
    width: 100%; border-collapse: collapse;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .75rem;
}
.fdr-ledger th {
    text-align: left; padding: .7rem .85rem; white-space: nowrap; font-weight: 400;
    font-size: .5625rem; letter-spacing: .24em; text-transform: uppercase;
    color: rgba(232,234,238,.35); border-bottom: 1px solid var(--ovt-hairline-strong);
}
.fdr-ledger td { padding: .6rem .85rem; border-bottom: 1px solid rgba(225,227,232,.05); white-space: nowrap; }
.fdr-ledger tbody tr:last-child td { border-bottom: 0; }
.fdr-ledger tbody tr:hover { background: rgba(16,185,129,.045); }
.fdr-ledger .dim { color: rgba(232,234,238,.36); }
.fdr-role {
    font-size: .5625rem; letter-spacing: .16em; text-transform: uppercase;
    padding: .22rem .5rem; border-radius: 2px;
    background: rgba(225,227,232,.07); color: rgba(232,234,238,.7);
}
.fdr-role.r-parent     { background: rgba(16,185,129,.18);  color: var(--ovt-green-soft); }
.fdr-role.r-child      { background: rgba(103,232,249,.14); color: var(--ovt-cyan); }
.fdr-role.r-proxy      { background: rgba(196,181,253,.15); color: var(--ovt-violet); }
.fdr-role.r-crashlobby { background: rgba(251,191,36,.14);  color: var(--ovt-amber); }
.fdr-role.r-events     { background: rgba(251,146,60,.14);  color: #FB923C; }

/* the memory figure, stated with confidence */
.fdr-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; margin: 1.5rem 0; }
.fdr-figure .big {
    font-family: 'Fraunces', Georgia, serif;
    font-variation-settings: 'opsz' 144, 'wght' 700, 'SOFT' 60;
    font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: .9; letter-spacing: -.03em;
    color: var(--ovt-green-soft);
}
.fdr-figure .cap {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .6875rem; color: rgba(232,234,238,.45); line-height: 1.5; max-width: 32ch;
}

.fdr-sub { margin: 1.5rem 0; }
.fdr-subcap {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .5625rem; letter-spacing: .28em; text-transform: uppercase;
    color: rgba(232,234,238,.35); margin-bottom: .7rem;
    padding-bottom: .4rem; border-bottom: 1px solid var(--ovt-hairline);
}
.fdr-subcap.is-warn { color: var(--ovt-amber); border-bottom-color: rgba(251,191,36,.25); }
.fdr-subnote { font-size: .8125rem; line-height: 1.6; color: rgba(232,234,238,.5); max-width: 62ch; margin-bottom: .7rem; }
.fdr-list { margin: 0; padding-left: 1.4rem; font-size: .8125rem; line-height: 1.7; color: rgba(232,234,238,.6); }
.fdr-list li::marker { color: rgba(52,211,153,.6); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .75rem; }
.fdr-shared {
    display: flex; flex-wrap: wrap; gap: .6rem; align-items: center;
    padding: .55rem 0; border-bottom: 1px solid rgba(225,227,232,.05);
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .75rem;
}
.fdr-shared .note { color: rgba(232,234,238,.42); }
.fdr-tag {
    font-size: .5625rem; letter-spacing: .16em; text-transform: uppercase;
    padding: .2rem .45rem; border-radius: 2px;
    background: rgba(251,191,36,.14); color: var(--ovt-amber);
}

/* ---- cascade ---------------------------------------------------------- */
.fdr-nodes { display: flex; flex-direction: column; gap: .3rem; margin: 1.25rem 0; }
.fdr-node {
    display: grid; grid-template-columns: 6rem 12rem 6rem 1fr; gap: .85rem; align-items: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .75rem;
    padding: .6rem .3rem; border-bottom: 1px solid rgba(225,227,232,.05);
}
.fdr-node .st { font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; }
.fdr-node .st.s-up { color: var(--ovt-green-soft); }
.fdr-node .st.s-failed { color: var(--ovt-red); }
.fdr-node .st.s-pending { color: rgba(232,234,238,.3); }
.fdr-node .st.s-building,
.fdr-node .st.s-booting,
.fdr-node .st.s-built { color: var(--ovt-amber); }
.fdr-node .det { color: rgba(232,234,238,.4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdr-bar { grid-column: 1 / -1; height: 2px; background: rgba(225,227,232,.08); overflow: hidden; }
.fdr-bar span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--ovt-green), var(--ovt-green-soft));
    transition: width .5s ease;
}
.fdr-log {
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .6875rem; line-height: 1.7;
    color: rgba(52,211,153,.62); background: #04070a;
    border: 1px solid var(--ovt-hairline); border-radius: 3px;
    padding: .9rem 1.1rem; max-height: 32vh; overflow-y: auto;
}
.fdr-log div { white-space: pre-wrap; word-break: break-word; }

/* ---- footer: spine + advance ------------------------------------------ */
.fdr-foot {
    position: relative; z-index: 3;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
    padding: clamp(.85rem, 1.6vw, 1.3rem) var(--fdr-pad);
    border-top: 1px solid var(--ovt-hairline);
    background: linear-gradient(to top, rgba(4,7,10,.92), rgba(4,7,10,.35));
    backdrop-filter: blur(8px);
}
.fdr-spine { display: flex; align-items: stretch; flex-wrap: wrap; }
.fdr-step {
    display: flex; align-items: baseline; gap: .5rem;
    background: transparent; border: 0; cursor: pointer;
    padding: .35rem .9rem .35rem 0; margin-right: .9rem;
    border-bottom: 2px solid transparent;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: rgba(232,234,238,.3);
    transition: border-color .25s ease, color .25s ease, opacity .25s ease;
}
.fdr-step:disabled { cursor: not-allowed; opacity: .35; }
.fdr-step .n { font-size: .625rem; letter-spacing: .1em; }
.fdr-step .l { font-size: .6875rem; letter-spacing: .18em; text-transform: uppercase; }
.fdr-step:hover:not(:disabled) { color: rgba(232,234,238,.65); }
.fdr-step.is-done { color: rgba(52,211,153,.55); border-bottom-color: rgba(16,185,129,.28); }
.fdr-step.is-on { color: var(--fdr-ink); border-bottom-color: var(--ovt-green); }
.fdr-step.is-on .l { color: var(--ovt-green-soft); }
.fdr-advance { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.fdr-why {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .625rem; letter-spacing: .06em; color: rgba(251,191,36,.75);
    max-width: 34ch; line-height: 1.5;
}

.fdr-empty {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: .8125rem; color: rgba(232,234,238,.34);
    padding: 2rem 0;
}

/* ---- narrow screens --------------------------------------------------- */
@media (max-width: 760px) {
    .fdr-ghost { font-size: 30vh; opacity: .6; }
    .fdr-node { grid-template-columns: 5rem 1fr; }
    .fdr-node .det { display: none; }
    .fdr-foot { flex-direction: column; align-items: stretch; }
}

/* ---- reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .fdr,
    .fdr-plate[data-on="1"] .fdr-rise,
    .fdr-plate[data-on="1"] .fdr-ghost,
    .fdr-btn-armed { animation: none; }
    .fdr-track,
    .ovt-shell:has(.fdr),
    .ovt-shell > .ovt-rail { transition: none; }
}