/* Styles copied from frontend-reference/ftp-frontend-demo.html (M7).
   One change: tabular figures removed (see body, below). */

/* ==========================================================================
   TOKENS
   Palette comes from the cutting room: pattern paper, bottle-green ink,
   tailor's chalk blue, selvedge red, moss, ochre.
   ========================================================================== */

:root {
    --ground:      #EEF0EE;
    --surface:     #FFFFFF;
    --ink:         #1B2420;
    --ink-soft:    #56615B;
    --line:        #D3D8D4;

    --chalk:       #2F5FA8;   /* accent / interactive */
    --push:        #3F6F3D;   /* moss */
    --hold:        #8F6A12;   /* ochre */
    --pull:        #A8322B;   /* selvedge red */
    --clear:       #6B4A8C;   /* damson, for markdown stock */

    --push-bg:     #E4EEE2;
    --hold-bg:     #F5ECD3;
    --pull-bg:     #F7E2E0;
    --clear-bg:    #ECE4F3;

    /* Hard stop (M6b): its own fill, never just a darker red */
    --stop:        #FFFFFF;
    --stop-bg:     #3A0A07;

    --display: "Bodoni Moda", Didot, "Bodoni MT", "Times New Roman", serif;
    --body:    "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;

    box-sizing: border-box;
    padding-top:    env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ground:   #141917;
        --surface:  #1D2421;
        --ink:      #E9EDEA;
        --ink-soft: #9DA8A2;
        --line:     #323B37;

        --chalk:    #8FB4EE;
        --push:     #9CCB97;
        --hold:     #E2C36F;
        --pull:     #F09B94;
        --clear:    #C6A8E6;

        --push-bg:  #22321F;
        --hold-bg:  #3A3118;
        --pull-bg:  #40211F;
        --clear-bg: #30253D;
        --stop:     #FFFFFF;
        --stop-bg:  #8A1C14;
    }
}

:root[data-theme="dark"] {
    --ground:   #141917;
    --surface:  #1D2421;
    --ink:      #E9EDEA;
    --ink-soft: #9DA8A2;
    --line:     #323B37;

    --chalk:    #8FB4EE;
    --push:     #9CCB97;
    --hold:     #E2C36F;
    --pull:     #F09B94;
    --clear:    #C6A8E6;

    --push-bg:  #22321F;
    --hold-bg:  #3A3118;
    --pull-bg:  #40211F;
    --clear-bg: #30253D;
    --stop:     #FFFFFF;
    --stop-bg:  #8A1C14;
}


/* ==========================================================================
   BASE
   ========================================================================== */

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

html { scroll-padding-top: env(safe-area-inset-top, 0px); }

body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.5;
}

/* No tabular figures anywhere (the design set them on body). Schibsted
   Grotesk's tabular set also makes the comma and full stop digit-wide,
   so "£47.45" reads as "£47 .45" and text gets a space before every
   comma. The font has no way to get one without the other. */

.wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 28px 20px 64px;
}

h1, h2, h3 { font-weight: 500; margin: 0; }

h2 {
    font-family: var(--display);
    font-size: 26px;
    line-height: 1.2;
    margin: 40px 0 6px;
}

h3 { font-size: 16px; font-weight: 600; }

p.lede {
    color: var(--ink-soft);
    max-width: 68ch;
    margin: 0 0 18px;
}

button { font: inherit; color: inherit; }

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


/* ==========================================================================
   MASTHEAD
   ========================================================================== */

.masthead {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 24px;
    font-size: 14px;
    color: var(--ink-soft);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.masthead strong { color: var(--ink); font-weight: 600; }

/* The headline is the week's verdict, set large in the Didone. */
.verdict {
    font-family: var(--display);
    font-size: clamp(30px, 5.2vw, 54px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin: 28px 0 10px;
    max-width: 20ch;
}

.verdict-sub {
    color: var(--ink-soft);
    max-width: 62ch;
    margin: 0 0 28px;
}


/* ==========================================================================
   STEP RAIL  (a real sequence: data in -> trade view -> actions -> marketing)
   ========================================================================== */

.rail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface);
}

.rail button {
    appearance: none;
    background: none;
    border: 0;
    border-right: 1px solid var(--line);
    padding: 14px 16px;
    text-align: left;
    cursor: pointer;
}

.rail button:last-child { border-right: 0; }

.rail .n {
    font-family: var(--display);
    font-size: 22px;
    line-height: 1;
    display: block;
    color: var(--ink-soft);
}

.rail .t { display: block; font-weight: 600; margin-top: 6px; }
.rail .d { display: block; font-size: 13px; color: var(--ink-soft); }

.rail button[aria-selected="true"] {
    background: var(--ink);
    color: var(--ground);
}

.rail button[aria-selected="true"] .n,
.rail button[aria-selected="true"] .d { color: var(--ground); opacity: 0.75; }

@media (max-width: 720px) {
    .rail { grid-template-columns: repeat(2, 1fr); }
    .rail button:nth-child(2) { border-right: 0; }
    .rail button:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
    .rail .d { display: none; }
}


/* ==========================================================================
   RULES PANEL  (the working part: move a rule, every call recalculates)
   ========================================================================== */

.rules {
    margin-top: 16px;
    padding: 16px 18px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}

.rules-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px 16px;
    margin-bottom: 12px;
}

.rules-head p { margin: 0; font-size: 14px; color: var(--ink-soft); }

.rules-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 24px;
}

@media (max-width: 860px) { .rules-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .rules-grid { grid-template-columns: 1fr; } }

.rule label {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
}

.rule output { font-weight: 600; }

.rule input[type="range"] {
    width: 100%;
    accent-color: var(--chalk);
    margin: 6px 0 0;
}

.linkish {
    background: none;
    border: 0;
    padding: 0;
    color: var(--chalk);
    text-decoration: underline;
    cursor: pointer;
    font-size: 14px;
}


/* ==========================================================================
   TABLES
   ========================================================================== */

.scroll {
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    min-width: 760px;
}

th, td {
    padding: 11px 14px;
    text-align: right;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

th {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
}

th:first-child, td:first-child { text-align: left; white-space: normal; }
tr:last-child td { border-bottom: 0; }

td .cat { display: block; font-size: 13px; color: var(--ink-soft); }

tr.style-row { cursor: pointer; }
tr.style-row:hover td { background: var(--ground); }

tr.detail td {
    text-align: left;
    white-space: normal;
    background: var(--ground);
    padding: 16px 18px;
}

.detail-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px 32px;
    align-items: start;
}

@media (max-width: 720px) { .detail-grid { grid-template-columns: 1fr; } }

.detail-grid ul { margin: 0; padding-left: 18px; }
.detail-grid li { margin-bottom: 4px; }


/* ==========================================================================
   SIZE CURVE  (the signature element: one glance shows a broken size run)
   ========================================================================== */

.curve {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 26px;
    vertical-align: middle;
}

.curve i {
    display: block;
    width: 7px;
    min-height: 2px;
    background: var(--ink);
    border-radius: 1px;
}

.curve i.out {
    height: 100% !important;
    background: none;
    border: 1px dashed var(--pull);
}

.curve.big { height: 72px; gap: 8px; }
.curve.big i { width: 26px; }

.curve-labels {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--ink-soft);
}

.curve-labels span { width: 26px; text-align: center; }


/* ==========================================================================
   CHIPS + LANES
   ========================================================================== */

.chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 13px;
    font-weight: 600;
}

.chip.push  { background: var(--push-bg);  color: var(--push);  }
.chip.hold  { background: var(--hold-bg);  color: var(--hold);  }
.chip.pull  { background: var(--pull-bg);  color: var(--pull);  }
.chip.clear { background: var(--clear-bg); color: var(--clear); }
.chip.stop  { background: var(--stop-bg);  color: var(--stop); border: 2px solid var(--pull); }

.lanes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 960px) { .lanes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .lanes { grid-template-columns: 1fr; } }

.lane { border-top: 3px solid var(--line); padding-top: 10px; }
.lane.push  { border-color: var(--push);  }
.lane.hold  { border-color: var(--hold);  }
.lane.pull  { border-color: var(--pull);  }
.lane.clear { border-color: var(--clear); }

.lane h3 { display: flex; justify-content: space-between; }
.lane h3 span { color: var(--ink-soft); font-weight: 400; }
.lane > p { font-size: 13px; color: var(--ink-soft); margin: 2px 0 10px; }

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 10px;
    font-size: 14px;
}

.card b { font-weight: 600; font-size: 15px; }
.card .why { color: var(--ink-soft); margin: 2px 0 8px; }

.card .cap {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding-top: 8px;
    margin-top: 8px;
}

.empty { font-size: 14px; color: var(--ink-soft); padding: 8px 0; }


/* ==========================================================================
   DATA-IN PANELS, CALENDAR, NOTE
   ========================================================================== */

.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 720px) { .two { grid-template-columns: 1fr; } }

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 18px 20px;
}

.panel p { margin: 4px 0 12px; color: var(--ink-soft); font-size: 14px; }
.panel ul { margin: 0; padding-left: 18px; font-size: 15px; }
.panel li { margin-bottom: 4px; }

.total {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
    padding: 12px 2px 0;
    font-size: 15px;
}

.total b { font-weight: 600; }

.drop {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 6px 24px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.drop:last-child { border-bottom: 0; }

.drop .when { font-family: var(--display); font-size: 20px; line-height: 1.2; }
.drop .when small { display: block; font-family: var(--body); font-size: 13px; color: var(--ink-soft); }
.drop ol { margin: 6px 0 0; padding-left: 18px; font-size: 14px; color: var(--ink-soft); }

@media (max-width: 540px) { .drop { grid-template-columns: 1fr; } }

.note {
    white-space: pre-wrap;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
    font-family: var(--body);
}

.btn {
    appearance: none;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: var(--ground);
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 14px;
}

.foot {
    margin-top: 48px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--ink-soft);
}


/* ==========================================================================
   APP SHELL  (one product, two sides, one bible)
   ========================================================================== */

.appbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.brand { font-family: var(--display); font-size: 24px; line-height: 1; }
.brand small { display: block; font-family: var(--body); font-size: 13px; color: var(--ink-soft); margin-top: 6px; }

.modes {
    display: inline-flex;
    border: 1px solid var(--ink);
    border-radius: 99px;
    padding: 3px;
    background: var(--surface);
}

.modes button {
    appearance: none;
    border: 0;
    background: none;
    padding: 8px 18px;
    border-radius: 99px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
}

.modes button[aria-selected="true"] { background: var(--ink); color: var(--ground); }

.side[hidden] { display: none; }

.subnav {
    display: flex;
    gap: 4px;
    margin-top: 18px;
    border-bottom: 1px solid var(--line);
}

.subnav button {
    appearance: none;
    border: 0;
    background: none;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 15px;
    color: var(--ink-soft);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
}

.subnav button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }

.verdict.wide { max-width: 26ch; }

.chipword { white-space: nowrap; }
.chipword.push { color: var(--push); }
.chipword.hold { color: var(--hold); }
.chipword.pull { color: var(--pull); }
.chipword.stop { color: var(--stop); background: var(--stop-bg); padding: 0 8px; border-radius: 6px; }


/* ==========================================================================
   MARGINAL CAC CARDS (M6b)
   ========================================================================== */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin: 14px 0;
}

.card-v { font-family: var(--display); font-size: 30px; line-height: 1.2; margin: 4px 0 6px; }
.card-tag { font-size: 12px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.04em; }
.card-note { font-size: 13px; color: var(--ink-soft); margin: 6px 0 0; }
.warn { font-size: 13px; color: var(--hold); margin: 6px 0 0; }
.money-note { font-size: 14px; color: var(--ink-soft); border-left: 3px solid var(--line); padding: 2px 0 2px 12px; margin: 4px 0 18px; }
.steps { display: grid; gap: 10px; }

/* Budget step markers on the time charts */
.marker { stroke-width: 2; opacity: 0.85; }


/* ==========================================================================
   DASHBOARD
   ========================================================================== */

.controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-bottom: 16px;
}

.controls-note { font-size: 13px; color: var(--ink-soft); }

.seg {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface);
}

.seg button {
    appearance: none;
    border: 0;
    background: none;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.seg button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }

.kpis {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.kpis.five { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 960px) { .kpis, .kpis.five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 540px) { .kpis, .kpis.five { grid-template-columns: repeat(2, 1fr); } }

.kpi {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
}

.kpi-l { font-size: 13px; color: var(--ink-soft); }
.kpi-l small, .tog small { font-size: 11px; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; margin-left: 4px; }
.kpi-v { font-family: var(--display); font-size: 26px; line-height: 1.2; margin-top: 2px; }
.kpi-d { display: flex; flex-direction: column; font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

.delta.up   { color: var(--push); }
.delta.down { color: var(--pull); }

.chartgrid {
    display: grid;
    grid-template-columns: 1fr;   /* one graph per row */
    gap: 14px;
}


.chartcard {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 18px;
    min-width: 0;
}

.chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }

.togs { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 6px; }

.tog {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--line);
    background: none;
    border-radius: 99px;
    padding: 4px 10px;
    font-size: 13px;
    cursor: pointer;
    color: var(--ink-soft);
}

.tog i { width: 9px; height: 9px; border-radius: 50%; display: block; opacity: 0.25; }
.tog[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); }
.tog[aria-pressed="true"] i { opacity: 1; }
.tog.solo { padding: 7px 14px; font-weight: 600; background: var(--surface); }
.tog.solo[aria-pressed="true"] { background: var(--ink); color: var(--ground); }

.chartwrap { position: relative; }

svg.chart { display: block; width: 100%; height: auto; cursor: pointer; }
svg.chart .grid   { stroke: var(--line); stroke-width: 1; }
svg.chart .ref    { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 2 4; }
svg.chart .axis   { fill: var(--ink-soft); font-size: 11px; font-family: var(--body); }
svg.chart .cursor { stroke: var(--ink-soft); stroke-width: 1; }

.tip {
    position: absolute;
    top: 6px;
    background: var(--ink);
    color: var(--ground);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    pointer-events: none;
    min-width: 170px;
    z-index: 2;
}

.tip b { display: block; margin-bottom: 4px; font-weight: 600; }
.tip div { display: flex; align-items: center; gap: 6px; }
.tip div span { margin-left: auto; padding-left: 12px; font-weight: 600; }
.tip i { width: 8px; height: 8px; border-radius: 50%; display: block; }

.chart-note { font-size: 13px; color: var(--ink-soft); margin: 8px 0 10px; max-width: 80ch; }

.numbers { max-height: 320px; overflow-y: auto; margin-top: 12px; }
.numbers th { position: sticky; top: 0; background: var(--surface); }
.numbers td:first-child, .numbers th:first-child { white-space: nowrap; }
.scroll.flat { border: 0; border-radius: 0; }

button.chan { appearance: none; text-align: left; cursor: pointer; }
button.chan:hover { border-color: var(--ink); }


/* ==========================================================================
   CHANNEL DRILL-DOWN
   ========================================================================== */

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; margin-top: 22px; }
.crumbs .sep { color: var(--ink-soft); }
.crumbs [aria-current] { font-weight: 600; overflow-wrap: anywhere; }

.chip.quiet { background: var(--ground); color: var(--ink-soft); }

td:first-child { overflow-wrap: anywhere; max-width: 380px; }
table.drill td:first-child, table.drill th:first-child { min-width: 320px; }


/* ==========================================================================
   COMPANY BIBLE
   ========================================================================== */

.field {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 10px 0;
    border-top: 1px solid var(--line);
    font-size: 14px;
}

.field small, .drow small { display: block; color: var(--ink-soft); font-size: 13px; margin-top: 2px; }

.inp { position: relative; flex: 0 0 auto; }

.inp input {
    width: 104px;
    font: inherit;
    font-weight: 600;
    text-align: right;
    color: var(--ink);
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 8px;
}

.inp.gbp input { padding-left: 20px; }
.inp.gbp::before { content: "\00A3"; position: absolute; left: 8px; top: 7px; color: var(--ink-soft); }
.inp.pct input, .inp.wks input { padding-right: 34px; }
.inp.pct::after { content: "%";   position: absolute; right: 10px; top: 7px; color: var(--ink-soft); }
.inp.wks::after { content: "wks"; position: absolute; right: 8px;  top: 7px; color: var(--ink-soft); font-size: 13px; }

.drow {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 9px 0;
    border-top: 1px solid var(--line);
    font-size: 14px;
}

.drow b { font-weight: 600; white-space: nowrap; }

.span2 { grid-column: 1 / -1; }


/* ==========================================================================
   M7 ADDITIONS
   ========================================================================== */

/* A series that isn't built yet (e.g. modelled marginal CAC): shown so the
   place is kept, but it can't be switched on. */
.tog[disabled] { cursor: default; border-style: dashed; opacity: 0.7; }

/* Money below zero (attributed profit): red, with a minus sign in the text. */
.neg { color: var(--pull); }

/* Drill-down totals row */
tfoot td { font-weight: 600; border-top: 2px solid var(--line); }

/* A column heading with an explanation on hover (also written out under the table). */
th.hint { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }

/* Company bible version history: keep the date on one line, give notes room. */
table.history td:first-child { white-space: nowrap; min-width: 120px; }
table.history td:last-child, table.history th:last-child { text-align: left; white-space: normal; min-width: 240px; }

/* Narrow phones: the Marketing / Merchandising / Company bible switch was
   364px wide and couldn't shrink, so under ~385px it made the whole page
   wider than the screen and text ran off the right edge. It now takes the
   full width and its buttons share it. */
@media (max-width: 480px) {
    .modes { display: flex; width: 100%; }
    .modes button { flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: 14px; }

    /* Band words in the headline ("Red: over the CAC ceiling.") and long
       bible values ("£50.00 and 2,000 impressions") may wrap on phones. */
    .chipword { white-space: normal; }
    .drow b { white-space: normal; text-align: right; }
    .two > * { min-width: 0; }
}

/* The narrowest phones (320px): "Merchandising" didn't fit its third of
   the top switch (M10 phone check). */
@media (max-width: 360px) {
    .modes button { flex: 1 1 auto; padding: 8px 4px; font-size: 13px; }
}


/* ==========================================================================
   LOGINS (M9): the login page, the session bar, the shared-demo banner
   ========================================================================== */

.login { max-width: 420px; margin: 24px 0 48px; }
.login .panel { display: grid; gap: 14px; }

.login-field { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.login-field small { font-weight: 400; color: var(--ink-soft); font-size: 13px; }
.login-field input {
    font: inherit;
    font-weight: 400;
    font-size: 16px;                    /* 16px stops phones zooming in */
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    width: 100%;
}

.login-error { color: var(--pull); font-size: 14px; margin: 0; }
.login-go { justify-self: start; }

.session { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 13px; color: var(--ink-soft); }
.session select {
    font: inherit;
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    color: var(--ink);
    max-width: 100%;
}

.demo-banner {
    background: var(--hold-bg);
    color: var(--ink);
    border-left: 3px solid var(--hold);
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 14px;
    margin: 12px 0 0;
}