/* Elbow reference styles, draft 0.2. Rule numbers refer to SPEC.md. */

:root {
    /* Rule 5: five roles, each a family of tints.
       The family carries the meaning. The tint only tells siblings apart. */
    --frame-1: #F2A541;  /* amber   */
    --frame-2: #FFB86B;  /* apricot */
    --frame-3: #E8C48E;  /* sand    */
    --frame-4: #D49A6A;  /* clay    */
    --action-1: #B9A3FF; /* lavender */
    --action-2: #D5C7FF; /* lilac    */
    --action-3: #9B84EE; /* violet   */
    --data-1: #8EC5FF;   /* ice   */
    --data-2: #BFE0FF;   /* frost */
    --data-3: #5FB3D9;   /* steel */
    --caution-1: #FFD23F;
    --caution-2: #FFE07A;
    --alert-1: #FF4D3D;
    --alert-2: #FF7766;

    --ink: #FFFFFF;
    --ink-2: #C9C9C9;
    --ink-3: #8A8A8A;
    --rule: #262626;

    /* Rule 3: the depth scale. Each level down is thinner. */
    --d0-side: 150px; --d0-bar: 30px; --d0-r: 64px;
    /* Outer curve scales with the frame (like the root: 64px on a 96px elbow), inner curve with the bar */
    --d1-side: 132px; --d1-bar: 16px; --d1-r: 56px; --d1-f: 20px; --d1-h: 74px;
    --d2-side: 116px; --d2-bar: 10px; --d2-r: 46px; --d2-f: 14px; --d2-h: 62px;
    --d3-side: 100px; --d3-bar: 6px;  --d3-r: 36px; --d3-f: 10px; --d3-h: 50px;

    --gap: 4px;
    --face-frame: 'Saira Extra Condensed', 'Arial Narrow', sans-serif;
    --face-text: 'Atkinson Hyperlegible', system-ui, sans-serif;
}

/* Rule 7: condition swaps the whole frame family */
body[data-condition="caution"] { --frame-1: #FFD23F; --frame-2: #FFE07A; --frame-3: #F0C95A; --frame-4: #E0B43A; }
body[data-condition="alert"]   { --frame-1: #FF4D3D; --frame-2: #FF7766; --frame-3: #F06A5A; --frame-4: #D9443A; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    background: #000;
    color: var(--ink);
    font-family: var(--face-text);
    font-size: 18px;
    line-height: 1.45;
    /* The frame face is set by capital height, so a 20px label looks 20px whatever font loads */
    font-size-adjust: cap-height 0.75;
}
/* Sentences keep their own metrics */
.lede, .list, .nest__hint, .big__sub, .well input, .legend figcaption, .cascade td:not(.addr) { font-size-adjust: none; }
button, input { font: inherit; }
:focus-visible { outline: 3px solid var(--data-1); outline-offset: 3px; }

/* ---------- The root frame (depth 0) ---------- */
.frame {
    display: grid;
    grid-template-columns: var(--d0-side) 1fr;
    grid-template-rows: 96px 1fr;
    grid-template-areas: "elbow bar" "rail field";
    height: 100vh;
    height: 100dvh;
    padding: 12px 12px 0 12px;
}

.elbow {
    grid-area: elbow;
    background: var(--frame-1);
    border: 0;
    border-top-left-radius: var(--d0-r);
    color: #000;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0 12px 6px 0;
    font-family: var(--face-frame);
    text-transform: uppercase;
    line-height: 1;
    transition: background .2s;
}
.elbow__name { font-size: 16px; letter-spacing: .08em; font-weight: 600; }
.elbow__clock { font-size: 28px; font-weight: 600; }
.elbow:hover { filter: brightness(1.08); }

.bar {
    grid-area: bar;
    position: relative;
    display: flex;
    gap: var(--gap);
    align-items: flex-start;
    font-family: var(--face-frame);
    text-transform: uppercase;
    min-width: 0;
}
/* The inside curve where a bar meets its elbow. Used at every depth. */
.bar::before, .nest__bar::before {
    content: "";
    position: absolute;
    left: 0; top: var(--bar-h);
    width: var(--fillet); height: var(--fillet);
    background: radial-gradient(circle at 100% 100%, #000 var(--fillet), var(--tone) calc(var(--fillet) + .5px));
}
.bar { --bar-h: var(--d0-bar); --fillet: 36px; --tone: var(--frame-1); }
.bar > * { height: var(--d0-bar); flex: none; transition: background .2s, color .2s; }
.bar__seg { background: var(--frame-1); }
.bar__seg--lead { width: 48px; }
.bar__seg--fill { flex: 1 1 auto; min-width: 12px; background: var(--frame-3); }
.bar__cap { width: 44px; border-radius: 0 999px 999px 0; background: var(--frame-2); }
.bar__title {
    margin: 0;
    font-size: 34px;
    line-height: var(--d0-bar);
    font-weight: 600;
    color: var(--frame-1);
    padding: 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 1 auto !important;
    min-width: 0;
}
.bar__addr {
    background: var(--frame-4);
    color: #000;
    font-size: 16px;
    font-weight: 600;
    line-height: var(--d0-bar);
    padding: 0 10px;
}
.bar__addr:empty { display: none; }
.bar__status {
    background: var(--frame-1);
    color: #000;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: var(--d0-bar);
    padding: 0 12px;
    white-space: nowrap;
}
.s-short { display: none; }
.bar__status.blink { animation: blink .5s steps(1) 6; }
@keyframes blink { 50% { background: #000; color: var(--frame-1); } }

.rail {
    grid-area: rail;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding: var(--gap) 0 12px;
    min-height: 0;
}
/* Segments. Tints alternate for rhythm, as in LCARS; the tint means nothing.
   The current one is lighter and has a black notch on its inner edge. */
.seg {
    flex: none;
    border: 0;
    background: var(--tone, var(--frame-1));
    color: #000;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-family: var(--face-frame);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: right;
    transition: background .2s, box-shadow .15s;
}
.seg .key { align-self: flex-start; }
.seg:hover { filter: brightness(1.1); }
.seg:active { filter: brightness(.82); }
.seg[aria-current] {
    background: color-mix(in oklab, var(--tone, var(--frame-1)) 55%, white);
    box-shadow: inset -12px 0 0 #000;
    padding-right: 22px !important;
}
.rail .seg { height: 60px; padding: 6px 12px 6px 10px; font-size: 20px; }
.rail .seg .key { font-size: 16px; }
.rail .seg:nth-child(7n+1) { --tone: var(--frame-2); }
.rail .seg:nth-child(7n+2) { --tone: var(--frame-1); }
.rail .seg:nth-child(7n+3) { --tone: var(--frame-3); }
.rail .seg:nth-child(7n+4) { --tone: var(--frame-1); }
.rail .seg:nth-child(7n+5) { --tone: var(--frame-4); }
.rail .seg:nth-child(7n+6) { --tone: var(--frame-2); }
.rail .seg:nth-child(7n+7) { --tone: var(--frame-3); }
.rail__fill { flex: 1 1 auto; min-height: 24px; background: var(--frame-4); transition: background .2s; }

/* ---------- The field ---------- */
.field {
    grid-area: field;
    overflow: auto;
    scrollbar-color: var(--frame-4) #000;
    padding: 16px 4px 32px 28px;
    min-width: 0;
}
.view[hidden] { display: none; }
.view { animation: arrive .18s ease-out; }
@keyframes arrive { from { opacity: 0; transform: translateX(-6px); } }

.lede { max-width: 62ch; margin: 0 0 20px; color: var(--ink-2); }
.lede strong { color: var(--ink); }

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
    align-items: start;
}
.grid--wide { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }

/* A group frame: holds content, never navigation. Always the thinnest stroke. */
.panel {
    border-left: 16px solid var(--frame-3);
    border-top: var(--d3-bar) solid var(--frame-3);
    border-top-left-radius: 28px;
    padding: 6px 0 4px 14px;
    min-width: 0;
    transition: border-color .2s;
}
.panel__title {
    margin: 0 0 10px;
    font-family: var(--face-frame);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--frame-2);
}
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row + .row { margin-top: 8px; }

/* ---------- Rule 4: pills are actions ---------- */
.pill {
    --tone: var(--action-1);
    min-height: 48px;
    padding: 0 22px;
    border-radius: 999px;
    border: 3px solid var(--tone);
    background: var(--tone);
    color: #000;
    font-family: var(--face-frame);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: filter .12s, background .12s, color .12s;
}
.pill:hover { filter: brightness(1.12); }
.pill:active { filter: brightness(.8); }
.pill[aria-pressed="false"] { background: #000; color: var(--tone); }
.pill--sq { min-width: 48px; padding: 0 14px; font-size: 28px; line-height: 1; }
.pill--alt { --tone: var(--action-2); }
.pill--caution { --tone: var(--caution-1); }
.pill--alert { --tone: var(--alert-1); }

/* ---------- Rule 4: square blocks are readouts ---------- */
.readout { display: inline-flex; flex-direction: column; min-width: 110px; }
.readout__cap {
    align-self: flex-start;
    background: var(--data-1);
    color: #000;
    font-family: var(--face-frame);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 2px 8px;
}
.readout__val {
    font-family: var(--face-frame);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--data-1);
    font-variant-numeric: tabular-nums;
}
.readout__val small { font-size: 20px; margin-left: 2px; }
.readout--sm .readout__val { font-size: 28px; }
.readout--caution .readout__cap { background: var(--caution-1); }
.readout--caution .readout__val { color: var(--caution-1); }
.readout--alert .readout__cap { background: var(--alert-1); }
.readout--alert .readout__val { color: var(--alert-1); }

/* Rule 11: a text field is a black well over a frame-colored bar */
.well { display: flex; flex-direction: column; gap: 6px; max-width: 340px; }
.well label {
    font-family: var(--face-frame); font-size: 16px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--frame-2);
}
.well input {
    background: #000;
    color: var(--ink);
    border: 0;
    border-bottom: 4px solid var(--frame-3);
    padding: 8px 2px;
    font-size: 20px;
    outline: none;
}
.well input:focus { border-bottom-color: var(--action-1); }

.list { margin: 10px 0 0; padding: 0; list-style: none; }
.list li { padding: 4px 0; color: var(--ink-2); }

/* ---------- Nesting: frames inside frames, each thinner ---------- */
.nest {
    --side: var(--d1-side); --bar-h: var(--d1-bar); --r: var(--d1-r); --fillet: var(--d1-f); --eh: var(--d1-h); --tone: var(--frame-2);
    display: grid;
    grid-template-columns: var(--side) 1fr;
    grid-template-rows: var(--eh) 1fr;
    min-height: 100%;
    min-width: 0;
}
.nest[data-depth="2"] { --side: var(--d2-side); --bar-h: var(--d2-bar); --r: var(--d2-r); --fillet: var(--d2-f); --eh: var(--d2-h); --tone: var(--frame-3); }
.nest[data-depth="3"] { --side: var(--d3-side); --bar-h: var(--d3-bar); --r: var(--d3-r); --fillet: var(--d3-f); --eh: var(--d3-h); --tone: var(--frame-4); }
.nest__elbow {
    background: var(--tone);
    border-top-left-radius: var(--r);
    color: #000;
    font-family: var(--face-frame);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 15px;
    line-height: 1.05;
    letter-spacing: .04em;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    padding: 0 8px 4px 0;
    text-align: right;
    transition: background .2s;
}
.nest__elbow b { font-size: 13px; font-weight: 600; }
.nest__bar { position: relative; }
.nest__bar > span { display: block; height: var(--bar-h); background: var(--tone); border-radius: 0 999px 999px 0; transition: background .2s; }
.nest__side {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding-top: var(--gap);
}
.nest__side .seg { --tone: inherit; min-height: 48px; padding: 4px 10px 4px 8px; font-size: 17px; }
.nest[data-depth="1"] .nest__side .seg { min-height: 52px; font-size: 18px; }
.nest[data-depth="2"] .nest__side .seg { font-size: 16px; }
.nest[data-depth="3"] .nest__side .seg { font-size: 15px; }
.nest__side .seg .key { font-size: 13px; }
.nest__fill { flex: 1 1 auto; min-height: 16px; background: var(--tone); transition: background .2s; }
.nest__field { padding: 4px 0 8px 16px; min-width: 0; }
.nest__hint { color: var(--ink-3); font-size: 17px; margin: 8px 0 0; max-width: 34ch; }
.leaf { animation: arrive .18s ease-out; }
.leaf h3 {
    margin: 4px 0 12px; font-family: var(--face-frame); font-weight: 600; font-size: 24px;
    letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
}
.leaf h3 span { color: var(--ink-3); font-size: 16px; margin-left: 8px; }

/* ---------- Data ---------- */
.chart { position: relative; }
.chart__plot { display: flex; align-items: flex-end; gap: 2px; height: 160px; border-bottom: 1px solid var(--rule); }
.chart__bar {
    flex: 1 1 0;
    min-width: 4px;
    background: var(--data-3);
    border-radius: 4px 4px 0 0;
    border: 0; padding: 0; cursor: pointer;
    transition: background .12s;
}
.chart__bar:hover, .chart__bar.is-on { background: var(--data-2); }
.chart__bar.is-now { background: var(--data-1); }
.chart__axis { display: flex; justify-content: space-between; color: var(--ink-3); font-family: var(--face-frame); font-size: 14px; letter-spacing: .06em; margin-top: 4px; }
.chart svg { display: block; width: 100%; height: 160px; overflow: visible; }
.chart .grid-line { stroke: var(--rule); stroke-width: 1; }
.chart .line { fill: none; stroke: var(--data-1); stroke-width: 2; stroke-linejoin: round; }
.chart .area { fill: var(--data-1); opacity: .08; }
.chart .cross { stroke: var(--ink-3); stroke-width: 1; }
.chart .dot { fill: var(--data-2); stroke: #000; stroke-width: 2; }
.chart .ylab { fill: var(--ink-3); font-family: var(--face-frame); font-size: 13px; }

/* A segmented meter: blocks, not a smooth bar */
.meter { display: flex; gap: 3px; margin-top: 8px; }
.meter i { flex: 1; height: 28px; background: #1d1d1d; }
.meter i.on { background: var(--data-1); }
.meter.is-low i.on { background: var(--caution-1); }

/* The cascade: LCARS's scrolling numbers, made real */
.cascade { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.cascade th {
    text-align: left; font-family: var(--face-frame); font-weight: 600; font-size: 14px;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 0 10px 6px 0;
}
.cascade td { padding: 5px 10px 5px 0; border-top: 1px solid var(--rule); font-size: 17px; color: var(--ink-2); }
.cascade td.addr { font-family: var(--face-frame); color: var(--data-1); letter-spacing: .04em; }
.cascade td.val { color: var(--ink); text-align: right; }
.cascade th.num { text-align: right; }
.cascade tr.new td { animation: flash 1.2s ease-out; }
@keyframes flash { from { background: #1c2733; } }
.flag {
    display: inline-block; font-family: var(--face-frame); font-size: 13px; font-weight: 600; letter-spacing: .06em;
    background: var(--caution-1); color: #000; padding: 0 6px; margin-left: 6px; vertical-align: 2px;
}

/* ---------- Big buttons: the transporter pad ---------- */
.pad { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.big {
    --tone: var(--action-1);
    --ring: var(--ink);
    position: relative;
    overflow: hidden;
    min-height: 132px;
    border: 0;
    border-radius: 34px;
    background: var(--tone);
    color: #000;
    cursor: pointer;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    font-family: var(--face-frame);
    text-transform: uppercase;
    text-align: left;
    transition: filter .12s;
}
.big:nth-child(3n+2) { --tone: var(--action-2); }
.big:nth-child(3n+3) { --tone: var(--action-3); }
.big:hover { filter: brightness(1.08); }
.big__label { position: relative; font-size: 30px; font-weight: 700; letter-spacing: .03em; line-height: 1; }
.big__sub { position: relative; font-family: var(--face-text); text-transform: none; font-size: 15px; margin-top: 4px; }
/* The chip: a number inside a ring. The number is live; the ring says what pressing costs. */
.chip {
    position: relative;
    display: inline-grid;
    place-items: center;
    min-width: 46px; height: 46px; padding: 0 8px;
    border-radius: 999px;
    background: #000;
    color: var(--ink);
    box-shadow: 0 0 0 5px var(--ring);
    font-size: 22px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin: 5px;
}
.big[data-cost="hold"] { --ring: var(--caution-1); }
.big.is-done { filter: saturate(.55) brightness(.85); }
.big.is-done .chip { font-size: 20px; }
.big[data-cost="call"] { --ring: var(--alert-1); }
/* Hold-to-confirm: a dark sweep fills the button while held */
.big::before {
    content: ""; position: absolute; inset: 0;
    background: rgba(0,0,0,.28);
    transform: scaleX(0); transform-origin: left;
}
.big.is-holding::before { transform: scaleX(1); transition: transform var(--hold, 1.2s) linear; }
.pad-log { margin-top: 18px; }

/* ---------- Legend ---------- */
.legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 28px 24px; }
.legend figure { margin: 0; }
.legend figcaption { margin-top: 10px; color: var(--ink-2); font-size: 17px; }
.legend figcaption b {
    display: block; color: var(--frame-2); font-family: var(--face-frame); font-weight: 600;
    font-size: 18px; letter-spacing: .06em; text-transform: uppercase;
}
.demo-seg {
    --tone: var(--frame-1);
    width: 150px; height: 60px; background: var(--tone); color: #000;
    display: flex; justify-content: space-between; align-items: flex-end; padding: 6px 12px 6px 10px;
    font-family: var(--face-frame); font-size: 20px; font-weight: 600; text-transform: uppercase;
}
.demo-seg span:first-child { align-self: flex-start; font-size: 16px; }
.depths { display: flex; align-items: flex-end; gap: 10px; }
.depths div { border-top-left-radius: var(--r); border-left: var(--s) solid var(--c); border-top: var(--b) solid var(--c); height: 72px; width: 66px; }
.swatches { display: grid; grid-template-columns: 70px repeat(4, 1fr); gap: 4px; align-items: center; }
.swatches b { font-family: var(--face-frame); font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.swatches i { height: 26px; display: block; }

/* ---------- Rule 12: small screens ---------- */
.foot { display: none; }

/* ---------- Rule 12: phones. Same L-frame as the show's PADDs, closed into a C. ---------- */
@media (max-width: 700px) {
    .frame {
        grid-template-columns: 64px 1fr;
        grid-template-rows: 60px 1fr 40px;
        grid-template-areas: "elbow bar" "rail field" "foot foot";
        padding: 8px;
    }
    .elbow { border-top-left-radius: 40px; padding: 0 8px 5px 0; }
    .elbow__name { display: none; }
    .elbow__clock { font-size: 18px; }
    /* Top bar: thinner, title flush right, as on Lower Decks PADDs */
    .bar { --bar-h: 18px; --fillet: 18px; }
    .bar > * { height: 18px; }
    .bar__seg--lead, .bar__status, .bar__addr { display: none; }
    .bar__seg--fill { order: 1; }
    .bar__title { order: 2; font-size: 24px; line-height: 18px; padding: 0 0 0 6px; }
    .bar__cap { order: 3; width: 18px; }
    /* The sidebar stays a sidebar */
    .rail { padding: var(--gap) 0 0; }
    .rail .seg { height: 52px; font-size: 13px; letter-spacing: .02em; padding: 4px 6px; }
    .rail .seg .key { font-size: 12px; }
    .rail .seg[aria-current] { box-shadow: inset -8px 0 0 #000; padding-right: 14px !important; }
    .field { padding: 12px 0 12px 12px; }
    /* Bottom-left elbow into a status bar */
    .foot { display: grid; grid-area: foot; grid-template-columns: 64px 1fr; }
    .foot__elbow { background: var(--frame-4); border-bottom-left-radius: 32px; transition: background .2s; }
    .foot__bar { position: relative; align-self: end; height: 18px; display: flex; gap: var(--gap); }
    .foot__bar::before {
        content: ""; position: absolute; left: 0; bottom: 100%; width: 16px; height: 16px;
        background: radial-gradient(circle at 100% 0%, #000 16px, var(--frame-4) 16.5px);
    }
    .foot__seg { flex: 1; background: var(--frame-4); }
    .foot__status {
        background: var(--frame-1); color: #000; font-family: var(--face-frame); font-weight: 600;
        font-size: 13px; letter-spacing: .06em; text-transform: uppercase; line-height: 18px; padding: 0 8px; white-space: nowrap;
    }
    .foot__cap { width: 18px; background: var(--frame-2); border-radius: 0 999px 999px 0; }
    .foot__seg, .foot__status, .foot__cap { transition: background .2s; }
    .pad { grid-template-columns: 1fr 1fr; gap: 8px; }
    .big { min-height: 112px; border-radius: 24px; padding: 12px 12px; }
    .big__label { font-size: 22px; }
    .big__sub { font-size: 14px; }
    .grid--wide { grid-template-columns: 1fr; }
    .grid { grid-template-columns: 1fr; }
}

/* ---------- Going inside (phones): one frame at a time; the levels above become thin bars ---------- */
.drill__trail { display: flex; flex-direction: column; margin-bottom: 6px; }
.drill__up {
    display: flex; align-items: center; gap: 8px; min-height: 40px; width: 100%;
    background: none; border: 0; padding: 0; cursor: pointer; color: var(--tone);
    font-family: var(--face-frame); font-weight: 600; font-size: 15px; letter-spacing: .05em; text-transform: uppercase;
}
.drill__up i { display: block; height: var(--t); background: var(--tone); transition: background .2s; }
.drill__up i:first-child { width: 22px; border-radius: 999px 0 0 999px; }
.drill__up i:last-child { flex: 1; }
.drill__up:hover { filter: brightness(1.15); }
.drill .drill__frame[data-depth] { --side: 22px; --eh: 40px; --r: 26px; --fillet: 12px; min-height: 0; }
.drill__frame .nest__side .seg { display: none; }
.drill__title {
    display: block; text-align: right; margin-top: 4px;
    font-family: var(--face-frame); font-weight: 600; font-size: 20px; letter-spacing: .04em; text-transform: uppercase; color: var(--tone);
}
.drill__frame .nest__field { padding: 6px 0 8px 4px; }
.drill__row {
    --tone: var(--frame-3);
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; margin-bottom: var(--gap);
    border: 0; border-radius: 0 999px 999px 0; background: var(--tone); color: #000; cursor: pointer;
    padding: 0 16px 0 10px; text-align: left;
    font-family: var(--face-frame); font-weight: 600; font-size: 19px; letter-spacing: .04em; text-transform: uppercase;
}
.drill__row:nth-child(even) { --tone: var(--frame-2); }
.drill__row .key { font-size: 14px; min-width: 14px; }
.drill__row .name { flex: 1; }
.drill__row .val { font-size: 15px; letter-spacing: .02em; }
.drill__row:hover { filter: brightness(1.08); }

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

/* ---------- Theme: Science (the TNG lab-station look). Same roles, new tints. ---------- */
body[data-theme="science"] {
    --frame-1: #E3A6C0; --frame-2: #F2C9B0; --frame-3: #D8B4E2; --frame-4: #C6A0B8;
    --action-1: #7FD6C2; --action-2: #A8E6D6; --action-3: #5CBFA8;
}
body[data-theme="science"][data-condition="caution"] { --frame-1: #FFD23F; --frame-2: #FFE07A; --frame-3: #F0C95A; --frame-4: #E0B43A; }
body[data-theme="science"][data-condition="alert"]   { --frame-1: #FF4D3D; --frame-2: #FF7766; --frame-3: #F06A5A; --frame-4: #D9443A; }

/* ---------- The split frame: summary on top, the picture below ---------- */
.split {
    --s: var(--d1-side); --b: 12px; --R: 44px; --f: 22px;
    display: grid;
    grid-template-columns: var(--s) 1fr;
    grid-template-rows: auto var(--b) var(--gap) var(--b) auto;
    min-width: 0;
}
.split__side { display: flex; flex-direction: column; gap: var(--gap); }
.split__side--top { grid-column: 1; grid-row: 1 / 3; }
.split__side--bottom { grid-column: 1; grid-row: 4 / 6; }
.split__side .seg { min-height: 52px; padding: 4px 10px 4px 8px; font-size: 17px; }
.split__side .seg .key { font-size: 13px; }
.split__side .seg:nth-child(odd) { --tone: var(--frame-3); }
.split__side .seg:nth-child(even) { --tone: var(--frame-2); }
.knee { flex: 1 0 auto; min-height: calc(var(--R) + 10px); background: var(--frame-4); transition: background .2s; }
.split__side--top .knee { border-bottom-left-radius: var(--R); }
.split__side--bottom .knee { border-top-left-radius: var(--R); flex: 0 0 auto; }
.split__side--bottom .tail { flex: 1 0 24px; background: var(--frame-4); }
.split__head { grid-column: 2; grid-row: 1; padding: 0 0 14px 22px; min-width: 0; }
.split__divider {
    grid-column: 2; grid-row: 2 / 5;
    position: relative;
    display: grid;
    grid-template-rows: var(--b) var(--gap) var(--b);
}
.split__bar { position: relative; display: flex; gap: var(--gap); }
.split__bar > i { display: block; height: 100%; background: var(--frame-3); transition: background .2s; }
.split__bar > i:nth-child(1) { width: 36px; background: var(--frame-4); }
.split__bar > i:nth-child(2) { flex: 3; background: var(--data-3); }
.split__bar > i:nth-child(3) { flex: 4; }
.split__bar > i:nth-child(4) { width: 28px; background: var(--frame-2); border-radius: 0 999px 999px 0; }
.split__bar--top { grid-row: 1; }
.split__bar--bottom { grid-row: 3; }
.split__bar::before {
    content: ""; position: absolute; left: 0; width: var(--f); height: var(--f);
}
.split__bar--top::before { bottom: 100%; background: radial-gradient(circle at 100% 0%, #000 var(--f), var(--frame-4) calc(var(--f) + .5px)); }
.split__bar--bottom::before { top: 100%; background: radial-gradient(circle at 100% 100%, #000 var(--f), var(--frame-4) calc(var(--f) + .5px)); }
/* The junction: in the show it's decoration. Here it's the cursor. It marks the
   moment you're reading, and it slides when you scrub the chart. */
.junction {
    position: absolute; top: -12px; bottom: -12px; width: 52px;
    left: calc(var(--pos, 1) * (100% - 52px));
    background:
        linear-gradient(#000, #000) center / 100% calc(var(--b) * 2 + var(--gap)) no-repeat,
        repeating-linear-gradient(to bottom, var(--frame-2) 0 3px, #000 3px 6px);
    transition: left .12s ease-out;
}
.junction::after {
    content: ""; position: absolute; left: 6px; right: 6px; top: 12px; bottom: 12px;
    background: repeating-linear-gradient(to bottom, var(--data-1) 0 3px, #000 3px 6px);
}
.split__body { grid-column: 2; grid-row: 5; padding: 22px 0 8px 22px; min-width: 0; }

/* The spec sheet: KEY = VALUE, in big condensed type */
.spec-title {
    margin: 0 0 6px; text-align: right;
    font-family: var(--face-frame); font-weight: 600; font-size: 40px; line-height: 1.05;
    letter-spacing: .02em; text-transform: uppercase; color: var(--data-1);
}
.spec {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 28px;
    margin: 0; font-family: var(--face-frame); font-size: 22px; line-height: 1.3;
    text-transform: uppercase; letter-spacing: .02em;
}
.spec div { display: flex; gap: 8px; white-space: nowrap; }
.spec dt { color: var(--data-3); }
.spec dt::after { content: " ="; color: var(--ink-3); }
.spec dd { margin: 0; color: var(--data-2); font-variant-numeric: tabular-nums; }

/* The bracket: a viewport around a picture, with its own scale and labels */
.viewport { display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap; }
.bracket {
    position: relative; flex: 1 1 380px; min-width: 0;
    padding: 34px 30px 26px 66px;
}
.bracket::before, .bracket::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 18px;
    border: 6px solid var(--frame-3);
    transition: border-color .2s;
}
.bracket::before { left: 0; border-right: 0; border-radius: 14px 0 0 14px; }
.bracket::after { right: 0; border-left: 0; border-radius: 0 14px 14px 0; }
.bracket__id, .bracket__count, .bracket__note {
    position: absolute; font-family: var(--face-frame); font-size: 14px; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-2);
}
.bracket__id { top: -2px; left: 26px; }
.bracket__count { bottom: -2px; right: 26px; }
.bracket__note { bottom: -2px; left: 26px; color: var(--ink-3); }
/* The scale: a bar with ticks, standing in for a y-axis */
.scale { position: absolute; left: 20px; top: 22px; bottom: 26px; width: 34px; }
.scale::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 6px; background: var(--data-3); }
.scale span {
    position: absolute; right: 10px; transform: translateY(-50%);
    font-family: var(--face-frame); font-size: 13px; color: var(--ink-3); white-space: nowrap;
}
.scale span::after { content: ""; position: absolute; left: calc(100% + 2px); top: 50%; width: 8px; height: 1px; background: var(--ink-3); }
.plot svg { display: block; width: 100%; height: 190px; overflow: visible; touch-action: none; }
.plot .bar-mark { fill: var(--data-3); }
.plot .bar-mark.is-on { fill: var(--data-2); }
.plot .grid-line { stroke: var(--rule); stroke-width: 1; }
.plot .line { fill: none; stroke: var(--data-1); stroke-width: 2; stroke-linejoin: round; }
.plot .area { fill: var(--data-1); opacity: .08; }
.plot .cross { stroke: var(--ink-3); stroke-width: 1; }
.plot .dot { fill: var(--data-2); stroke: #000; stroke-width: 2; }
.plot-axis { display: flex; justify-content: space-between; margin-top: 4px; font-family: var(--face-frame); font-size: 13px; letter-spacing: .06em; color: var(--ink-3); }

/* A composition list: parts of a whole, as labeled bars */
.parts { flex: 0 1 240px; min-width: 200px; }
.parts h3 {
    margin: 0 0 8px; font-family: var(--face-frame); font-weight: 600; font-size: 20px;
    letter-spacing: .04em; text-transform: uppercase; color: var(--data-1);
}
.parts ul { list-style: none; margin: 0; padding: 0; }
.parts li { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin-bottom: 8px; font-family: var(--face-frame); font-size: 17px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); }
.parts li b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.parts li i { grid-column: 1 / -1; height: 8px; background: var(--data-3); border-radius: 0 4px 4px 0; }

@media (max-width: 700px) {
    .split { --s: 60px; --R: 26px; --f: 12px; }
    .split__side .seg .key { font-size: 11px; }
    .parts { min-width: 0; flex: 1 1 100%; }
    .bracket { flex-basis: 100%; }
    .spec div { white-space: normal; }
    .split__side .seg { font-size: 12px; padding: 4px 5px; min-height: 48px; letter-spacing: 0; }
    .split__side .seg[aria-current] { padding-right: 16px !important; box-shadow: inset -8px 0 0 #000; }
    .split__head { padding-left: 12px; }
    .split__body { padding-left: 10px; }
    .spec-title { font-size: 22px; }
    .spec { font-size: 18px; grid-template-columns: 1fr; }
    .bracket { padding: 34px 22px 26px 54px; }
    .scale { left: 14px; width: 30px; }
}
.plot { position: relative; }
.scale { left: -46px; top: 0; bottom: 0; }
@media (max-width: 700px) { .scale { left: -40px; } .bracket__note { display: none; } }
.mini-split { display: grid; grid-template-columns: 36px 1fr; grid-template-rows: 30px 6px 3px 6px 30px; width: 220px; }
.mini-split i { display: block; }
.mini-split .t { grid-row: 1 / 3; background: var(--frame-3); border-bottom-left-radius: 18px; }
.mini-split .b { grid-row: 4 / 6; grid-column: 1; background: var(--frame-3); border-top-left-radius: 18px; }
.mini-split .bt { grid-row: 2; grid-column: 2; background: var(--data-3); }
.mini-split .bb { grid-row: 4; grid-column: 2; background: var(--frame-2); }

/* ---------- Rows that open in place (Lower Decks itinerary) ---------- */
.rows { max-width: 620px; }
.lrow {
    --tone: var(--frame-3);
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; margin-bottom: var(--gap);
    border: 0; background: none; padding: 0; cursor: pointer; color: #000; text-align: left;
    font-family: var(--face-frame); font-weight: 600; font-size: 19px; letter-spacing: .04em; text-transform: uppercase;
}
.lrow__node { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 4px solid var(--tone); background: #000; }
.lrow[aria-expanded="true"] .lrow__node { background: var(--tone); }
.lrow__body { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 18px; border-radius: 999px; background: var(--tone); }
.lrow:nth-of-type(even) { --tone: var(--frame-2); }
.lrow__body .name { flex: 1; }
.lrow__body .val { font-size: 15px; letter-spacing: .02em; }
.lrow:hover .lrow__body { filter: brightness(1.08); }
.lrow.is-on .lrow__body { --tone: var(--frame-1); }
.expand {
    position: relative; margin: 6px 0 14px 48px; padding: 12px 14px;
    border: 3px solid var(--frame-3); border-radius: 16px;
    animation: arrive .18s ease-out;
}
/* The connector line from the row's node into the box */
.expand::before {
    content: ""; position: absolute; left: -41px; top: -22px; width: 38px; height: 46px;
    border-left: 3px solid var(--frame-3); border-bottom: 3px solid var(--frame-3); border-bottom-left-radius: 10px;
}
.rows .all-off { margin-top: 16px; }

/* ---------- Data screen: the number band and the status line ---------- */
.band {
    display: flex; flex-wrap: wrap; gap: 0 10px; justify-content: flex-end; margin: 0 0 10px;
    font-family: var(--face-frame); font-size: 15px; line-height: 1.25; color: var(--data-3);
    font-variant-numeric: tabular-nums;
}
.band span.is-on { color: var(--ink); }
.status-line {
    margin: 10px 0 0; text-align: right; font-family: var(--face-frame); font-weight: 600; font-size: 18px;
    letter-spacing: .06em; text-transform: uppercase; color: var(--caution-2);
}
/* Polar plot (wind) */
.polar svg { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; touch-action: none; }
.polar .ring { fill: none; stroke: var(--rule); stroke-width: 1; }
.polar .spoke { stroke: var(--rule); stroke-width: 1; }
.polar .compass { fill: var(--ink-3); font-family: var(--face-frame); font-size: 14px; text-anchor: middle; }
.polar .trail { fill: none; stroke: var(--data-3); stroke-width: 2; stroke-linejoin: round; }
.polar .pt { fill: var(--data-3); }
.polar .pt.is-on { fill: var(--data-2); stroke: #000; stroke-width: 2; }
.polar .arrow { stroke: var(--data-1); stroke-width: 4; stroke-linecap: round; }

/* ---------- The map: the house as a ship cutaway ---------- */
.map { display: grid; grid-template-columns: 1fr; gap: 18px; }
.map.is-detail { grid-template-columns: 170px 1fr; align-items: start; }
.plan { position: relative; }
.plan svg { display: block; width: 100%; height: auto; max-height: 62vh; }
.plan .room { fill: transparent; stroke: var(--frame-3); stroke-width: 2.5; cursor: pointer; transition: fill .15s; }
.plan .room:hover { fill: rgba(242, 165, 65, .14); }
.plan .room.is-on { fill: var(--frame-1); }
.plan .space { fill: transparent; stroke: #444; stroke-width: 1.5; stroke-dasharray: 4 4; }
.plan .rname { fill: var(--ink-2); font-family: var(--face-frame); font-weight: 600; font-size: 15px; letter-spacing: .06em; text-anchor: middle; pointer-events: none; }
.plan .rval { fill: var(--data-1); font-family: var(--face-frame); font-weight: 600; font-size: 20px; text-anchor: middle; pointer-events: none; }
.plan .room.is-on + .rname, .plan .is-on-label { fill: #000; }
.plan .door { stroke: #000; stroke-width: 1; }
.plan .door.locked { fill: var(--data-1); }
.plan .door.open { fill: var(--caution-1); }
.plan .dlabel { font-family: var(--face-frame); font-size: 12px; fill: var(--ink-3); text-anchor: middle; }
.plan .cam { fill: #000; stroke: var(--action-1); stroke-width: 3; cursor: pointer; }
.plan .cam:hover, .plan .cam.is-on { fill: var(--action-1); }
.thumb { border: 0; padding: 6px; background: none; cursor: pointer; width: 100%; }
.thumb .plan svg { max-height: none; }
.thumb .plan .rname, .thumb .plan .rval, .thumb .plan .dlabel { display: none; }
.thumb__cap {
    display: block; margin-top: 4px; text-align: left; font-family: var(--face-frame); font-weight: 600;
    font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--frame-2);
}
.map-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-family: var(--face-frame); font-size: 14px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.map-key i { display: inline-block; width: 14px; height: 6px; margin-right: 6px; vertical-align: middle; }
.map-key b { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--action-1); margin-right: 6px; vertical-align: -1px; }

/* The one pop-up: live video, framed in corner brackets */
.inset {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(88%, 440px); padding: 16px; background: #000;
    animation: arrive .18s ease-out;
}
.inset__corner { position: absolute; width: 26px; height: 26px; border: 0 solid var(--action-1); }
.inset__corner:nth-child(1) { left: 0; top: 0; border-left-width: 5px; border-top-width: 5px; border-top-left-radius: 8px; }
.inset__corner:nth-child(2) { right: 0; top: 0; border-right-width: 5px; border-top-width: 5px; border-top-right-radius: 8px; }
.inset__corner:nth-child(3) { left: 0; bottom: 0; border-left-width: 5px; border-bottom-width: 5px; border-bottom-left-radius: 8px; }
.inset__corner:nth-child(4) { right: 0; bottom: 0; border-right-width: 5px; border-bottom-width: 5px; border-bottom-right-radius: 8px; }
.inset__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-family: var(--face-frame); font-weight: 600; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--action-2); }
.feed {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden; display: grid; place-items: center;
    background:
        repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 2px, transparent 2px 4px),
        radial-gradient(ellipse at 40% 60%, #23313d, #0a0f14 70%);
    color: var(--ink-3); font-family: var(--face-frame); font-size: 15px; letter-spacing: .08em; text-transform: uppercase; text-align: center;
}
.feed::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent, rgba(142,197,255,.08), transparent); animation: sweep 3s linear infinite; }
@keyframes sweep { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
.inset .pill { min-height: 40px; padding: 0 14px; font-size: 15px; }

@media (max-width: 700px) {
    .map.is-detail { grid-template-columns: 1fr; }
    .map.is-detail .thumb { max-width: 160px; }
    .expand { margin-left: 34px; }
    .expand::before { left: -27px; width: 24px; }
    .lrow { gap: 8px; font-size: 17px; }
    .lrow__body { padding: 0 12px; }
    .status-line { font-size: 15px; }
    .band { font-size: 13px; gap: 0 7px; }
}
@media (max-width: 700px) {
    .map-frame { --side: 60px; --eh: 50px; --r: 30px; --fillet: 12px; }
    .map-frame .nest__elbow { font-size: 13px; padding-right: 6px; }
    .map-frame .nest__side .seg { font-size: 12px; padding: 4px 5px; letter-spacing: 0; }
    .map-frame .nest__field { padding-left: 10px; }
}
@media (max-width: 700px) {
    .map-frame[data-depth] .nest__side .seg { font-size: 12px; padding: 4px 5px; letter-spacing: 0; min-height: 48px; }
    /* The plan shrinks to about half size on a phone, so its lettering is drawn twice as big */
    .plan .rname { font-size: 26px; }
    .plan .rval { font-size: 32px; }
    .plan .dlabel { font-size: 20px; }
    .plan .room { stroke-width: 4; }
}
@media (max-width: 700px) {
    .map-frame[data-depth] .nest__side .seg[aria-current] { box-shadow: inset -6px 0 0 #000; padding-right: 9px !important; }
}