/* ============================================================
   ISArts Quiz; the app stylesheet (slice A7b)
   ------------------------------------------------------------
   ONE look for the whole signed-in product. Isa picked the admin
   area's appearance as the one he wants everywhere, so this file
   is the admin look, generalised: white panels on a near-white
   page, plain borders, roomy spacing, a clear heading scale and
   no decoration that is not carrying information.

   WHAT THIS REPLACED. Until 1.76 this file was a dark, glassy
   theme scoped to body.isarts, and the admin area had a second
   stylesheet of its own inlined on every page. Two looks, two
   sets of tokens, and a visible join every time you crossed
   between them.

   DARK IS NOT GONE. The admin look always had a dark variant; it
   simply followed the operating system and nobody could choose
   it. It is kept here, as part of this look rather than a
   survival of the old one, and the button on the bar now drives
   it in both directions. A quiz night in a dim room is the
   reason it matters.

   TWO SCREENS ARE DELIBERATELY NOT THIS LOOK, and neither is a
   leftover:

     The projector, body.is-view. Read from across a room, with
     fourteen audience themes the host picks in the control room.
     Every structural rule below is written body:not(.is-view)
     so this file cannot reach it.

     The captain's phone, teams.php and join.php. A warm cream
     card that guests see and hosts do not. Those pages do not
     link this file at all.

   Fonts: Manrope, with system fallbacks, because a venue laptop
   on a LAN has no internet and must still look like itself.
   ============================================================ */

/* THEME-VERSION: a7b-one-look */

/* ============================================================
   1. TOKENS
   ------------------------------------------------------------
   Three branches, and the order matters. Light is the default.
   The operating system's preference is followed unless the
   person has explicitly chosen light. An explicit choice of
   dark wins over everything, which the old admin sheet could
   not do: it had no [data-theme="dark"] branch at all, so a
   light-preferring laptop could never be forced dark.

   theme_boot() in lib/helpers.php writes the attribute before
   the page paints.
   ============================================================ */

:root{
    /* --- surfaces, back to front --- */
    --a-bg:#fbfcfd;          /* the page */
    --a-panel:#ffffff;       /* panels, cards, the bar */
    --a-sunk:#f1f5f7;        /* a field, a code block, a quiet row */
    --a-hover:#eef3f6;       /* hover on something already light */
    --a-line:#dbe3e8;
    --a-line-2:#b9c6ce;      /* when an edge has to be found */

    /* --- text --- */
    --a-ink:#141a1e;         /* anything read as a sentence */
    /* Darkened from the admin area's #5a6b75, which measured 5.40 on white
       but only 4.21 once it sat on a tinted panel; and a tinted panel is
       exactly where a quiet line of supporting text tends to end up. This
       passes on white, on the sunken surface and on an accent tint. */
    --a-dim:#4e5e67;         /* labels, hints, status lines */
    --a-faint:#7b8a93;       /* minor metadata only */

    /* --- the meaning colours. Named for what they mean, and
           each one checked as text AND behind white. --- */
    --m-device:#0b7fa3; --m-session:#6b4bb8; --m-view:#1565c0;
    --m-action:#a62191; --m-good:#17733f; --m-warn:#8a5a00; --m-bad:#b3261e;

    /* Text to put ON any of those as a fill. They are dark in light
       mode and light in dark mode, so one token flips for all seven. */
    --m-ink:#ffffff;

    --shadow:0 1px 2px rgba(20,26,30,.05), 0 10px 24px -20px rgba(20,26,30,.30);
    --radius:14px;
    --radius-sm:10px;
    --body:"Manrope",system-ui,-apple-system,Arial,sans-serif;
    --display:"Bebas Neue",Impact,sans-serif;   /* the projector only */

    /* --- the type scale, carried over from A7a, which is where the
           sizes were worked out and measured. --- */
    --fs-answer:19px;       /* a team's answer; a marking decision */
    --fs-lg:17px;           /* sub-headings, a figure worth seeing */
    --fs-body:16px;         /* anything read as prose; every input */
    --fs-support:14px;      /* labels, hints, status, button text */
    --fs-meta:12px;         /* minor metadata, and nothing else */
    --fs-section:13px;      /* a tracked uppercase heading */
}

/* The operating system's choice, unless light was asked for. */
@media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
        --a-bg:#15191c; --a-panel:#1d2327; --a-sunk:#141a1d; --a-hover:#262e33;
        --a-line:#333c42; --a-line-2:#4d585f;
        --a-ink:#eef3f5; --a-dim:#a3b2bb; --a-faint:#8597a1;
        --m-device:#5ecbe8; --m-session:#b8a3f0; --m-view:#7db4f0;
        --m-action:#f08fdc; --m-good:#6fdd9b; --m-warn:#ffc864; --m-bad:#ff9a92;
        --m-ink:#0d1316;
        --shadow:0 1px 2px rgba(0,0,0,.40), 0 10px 28px -20px rgba(0,0,0,.80);
    }
}
/* An explicit choice of dark, which beats the system either way. */
:root[data-theme="dark"]{
    --a-bg:#15191c; --a-panel:#1d2327; --a-sunk:#141a1d; --a-hover:#262e33;
    --a-line:#333c42; --a-line-2:#4d585f;
    --a-ink:#eef3f5; --a-dim:#a3b2bb; --a-faint:#8597a1;
    --m-device:#5ecbe8; --m-session:#b8a3f0; --m-view:#7db4f0;
    --m-action:#f08fdc; --m-good:#6fdd9b; --m-warn:#ffc864; --m-bad:#ff9a92;
    --m-ink:#0d1316;
    --shadow:0 1px 2px rgba(0,0,0,.40), 0 10px 28px -20px rgba(0,0,0,.80);
}

/* ------------------------------------------------------------
   Aliases. Every colour name the host pages already use, mapped
   onto the set above. There are roughly five hundred var() calls
   across control.php, host.php, builder.php and the rest; this
   is what lets them all follow the new look without being
   rewritten one by one, and it is the only reason a change this
   broad fits in a single slice.

   Nothing new should use these names.
   ------------------------------------------------------------ */
:root{
    --ink:var(--a-bg); --ink-2:var(--a-panel); --ink-3:var(--a-sunk);
    --surface-0:var(--a-bg); --surface-1:var(--a-panel);
    --surface-2:var(--a-sunk); --surface-3:var(--a-hover);
    --line:var(--a-line); --border:var(--a-line); --border-2:var(--a-line-2);
    --text:var(--a-ink); --text-1:var(--a-ink);
    --muted:var(--a-dim); --text-2:var(--a-dim); --text-3:var(--a-faint);

    /* The accent. It was sea glass; it is now the admin area's green,
       which is the colour that already meant "good" there. */
    --accent:var(--m-good); --accent-2:var(--m-good);
    --accent-ink:var(--m-ink);
    --accent-tint:color-mix(in srgb, var(--m-good) 12%, transparent);
    --accent-tint-2:color-mix(in srgb, var(--m-good) 22%, transparent);
    --brand:var(--m-good); --brand-2:var(--m-good); --brand-tint:var(--accent-tint);
    --gold:var(--m-good); --gold-soft:var(--m-good); --teal:var(--m-good);

    --ok:var(--m-good);  --ok-ink:var(--m-ink);
    --warn:var(--m-warn); --warn-ink:var(--m-ink);
    --err:var(--m-bad);   --err-ink:var(--m-ink);
    --err-text:var(--m-bad);
    --err-tint:color-mix(in srgb, var(--m-bad) 9%, transparent);
    --err-tint-2:color-mix(in srgb, var(--m-bad) 16%, transparent);
    --err-edge:color-mix(in srgb, var(--m-bad) 45%, transparent);
    --good:var(--m-good); --bad:var(--m-bad); --half:var(--m-warn); --away:var(--m-warn);
    --amber:var(--m-warn);

    --hue-blue:var(--m-view);    --hue-green:var(--m-good);
    --hue-rose:var(--m-action);  --hue-slate:var(--m-session);
    --hue-moss:var(--m-good);    --hue-ink:var(--m-ink);
    --blue:var(--m-view); --green:var(--m-good);
    --magenta:var(--m-action); --violet:var(--m-session); --lime:var(--m-good);
    --black:var(--a-ink);

    --shadow-flat:var(--shadow);
    --logo:var(--body);
    /* how.php's names, so the guide can drop its own token block and
       follow the app rather than keeping a fourth palette. */
    --bg:var(--a-bg); --bg-2:var(--a-panel); --panel:var(--a-panel);
}

/* color-mix is recent enough to deserve a fallback. Without it the tints
   fall back to a flat fill rather than to nothing, which would make a
   highlighted row invisible. */
@supports not (color: color-mix(in srgb, red 10%, transparent)){
    :root{
        --accent-tint:var(--a-sunk); --accent-tint-2:var(--a-hover);
        --err-tint:var(--a-sunk);    --err-tint-2:var(--a-hover);
        --err-edge:var(--m-bad);
    }
}

/* ============================================================
   2. BASE
   ------------------------------------------------------------
   body:not(.is-view) throughout, so none of it reaches the
   projector, which paints its own background and sets its own
   palette in view.php.
   ============================================================ */

*{ box-sizing:border-box; }

body:not(.is-view){
    margin:0;
    background:var(--a-bg);
    color:var(--a-ink);
    font:var(--fs-body)/1.55 var(--body);
}
/* Deliberately the lowest specificity in the file: a bare element selector,
   so any page rule beats it and .topnav a beats it. Written as
   body:not(.is-view) a first time round, which is (0,1,2) and quietly
   overrode the navigation's own colour AND the guide's contents list,
   turning every one of them browser-blue. The projector does set link
   colours of its own where it uses links at all. */
a{ color:var(--m-view); }

.wrap{ max-width:1100px; margin:0 auto; padding:20px 16px 56px; }
.wrap-wide{ max-width:1400px; margin:0 auto; padding:20px 16px 56px; }

body:not(.is-view) h1{ font-size:23px; margin:18px 0 4px; letter-spacing:-.01em; }
body:not(.is-view) h2{ font-size:var(--fs-lg); margin:26px 0 10px; letter-spacing:-.005em;
                       text-transform:none; color:inherit; font-weight:700; }
body:not(.is-view) h3{ font-size:var(--fs-body); margin:18px 0 8px; }
.sub{ color:var(--a-dim); font-size:var(--fs-support); margin:0 0 6px; }
body:not(.is-view) .muted{ color:var(--a-dim); font-size:var(--fs-support); }

/* Figures line up and a score does not shuffle sideways as it ticks over. */
.sc, .ab-count, .ab-secs, .mtime, .n-meta, .adj, .stat .n, .tn{
    font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1;
}

body:not(.is-view) a:focus-visible,
body:not(.is-view) button:focus-visible,
body:not(.is-view) input:focus-visible,
body:not(.is-view) select:focus-visible,
body:not(.is-view) textarea:focus-visible,
body:not(.is-view) summary:focus-visible{
    outline:3px solid var(--m-view); outline-offset:2px;
}

/* ============================================================
   3. THE BAR
   ------------------------------------------------------------
   One bar, on every signed-in page, the guide and the landing
   page. There were four of these; they shared no markup, so the
   padding, the radius and the active state were all slightly
   different depending which page you were on.

   site_nav() in lib/helpers.php renders it. Admin keeps a second
   row of its own for its ten sections, because folding those
   into this row made it three lines deep.
   ============================================================ */

.topnav{ background:var(--a-panel); border-bottom:1px solid var(--a-line); }
.topnav .in{
    max-width:1400px; margin:0 auto; padding:10px 16px;
    display:flex; gap:6px; align-items:center; flex-wrap:wrap;
}
.topnav .brand{
    font-weight:800; font-size:var(--fs-lg); margin-right:10px;
    color:var(--a-ink); text-decoration:none; white-space:nowrap;
}
.topnav .brand small{
    font-weight:700; font-size:var(--fs-meta); letter-spacing:.14em;
    text-transform:uppercase; color:var(--a-dim); margin-left:6px;
}
.topnav a, .topnav .navbtn{
    display:inline-block; padding:8px 13px; border-radius:999px;
    text-decoration:none; color:var(--a-ink); font-size:15px;
    font-family:inherit; font-weight:500; line-height:1.3;
    background:transparent; border:1px solid transparent; cursor:pointer;
    white-space:nowrap;
}
.topnav a:hover, .topnav .navbtn:hover{ background:var(--a-hover); }
.topnav a[aria-current="page"], .topnav .navbtn[aria-current="page"]{
    background:var(--a-ink); color:var(--a-panel); font-weight:700;
}
.topnav .sp{ margin-left:auto; }
.topnav .who{ font-size:var(--fs-support); color:var(--a-dim); padding-left:6px; }
.topnav .signin{
    background:var(--a-ink); color:var(--a-panel); font-weight:700;
}
.topnav .signin:hover{ background:var(--a-ink); opacity:.88; }

/* The second row: admin's own sections, and anywhere else a page needs
   sub-navigation. Quieter than the row above it on purpose. */
.subnav{ background:var(--a-bg); border-bottom:1px solid var(--a-line); }
.subnav .in{
    max-width:1400px; margin:0 auto; padding:8px 16px;
    display:flex; gap:4px; align-items:center; flex-wrap:wrap;
}
.subnav a{
    display:inline-block; padding:6px 12px; border-radius:999px;
    text-decoration:none; color:var(--a-dim); font-size:var(--fs-support);
    font-weight:600; white-space:nowrap;
}
.subnav a:hover{ background:var(--a-hover); color:var(--a-ink); }
.subnav a[aria-current="page"]{
    background:var(--a-panel); color:var(--a-ink);
    border:1px solid var(--a-line); padding:5px 11px;
}

/* A dropdown on the bar, for the groups that would otherwise be seven
   separate items. Opens on click, not hover, so it works on a tablet. */
.navmenu{ position:relative; }
.navmenu .caret{ font-size:10px; opacity:.55; margin-left:3px; }
.navmenu-list{
    display:none; position:absolute; top:calc(100% + 6px); left:0; z-index:220;
    min-width:214px; padding:6px; border-radius:var(--radius);
    background:var(--a-panel); border:1px solid var(--a-line); box-shadow:var(--shadow);
}
.navmenu.open .navmenu-list{ display:block; }
.navmenu-list a{
    display:block; padding:9px 12px; border-radius:var(--radius-sm);
    font-size:var(--fs-support); font-weight:600; color:var(--a-ink);
}
.navmenu-list a:hover{ background:var(--a-hover); }
.navbadge{ color:var(--m-action); font-weight:800; }

/* The burger, for a phone. */
.navburger{
    display:none; width:38px; height:38px; border-radius:var(--radius-sm); padding:0;
    background:transparent; border:1px solid var(--a-line); cursor:pointer;
    flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.navburger span{ display:block; width:16px; height:2px; background:var(--a-ink); border-radius:2px; }

@media (max-width:980px){
    .topnav .in{ gap:8px; position:relative; }
    .navburger{ display:flex; margin-left:auto; order:2; }
    .topnav .navright{ order:3; margin-left:0; display:flex; gap:6px; align-items:center; }
    .navlinks{
        display:none;
        position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:240;
        flex-direction:column; align-items:stretch; gap:2px;
        padding:8px; border-radius:var(--radius);
        background:var(--a-panel); border:1px solid var(--a-line); box-shadow:var(--shadow);
        max-height:min(70vh,560px); overflow:auto;
    }
    .navlinks.open{ display:flex; }
    .navlinks a, .navlinks .navbtn{ width:100%; text-align:left; border-radius:var(--radius-sm); }
    .navmenu{ width:100%; }
    .navmenu .navbtn{ width:100%; display:flex; justify-content:space-between; }
    .navmenu-list{
        position:static; display:none; box-shadow:none; border:none;
        background:transparent; padding:2px 0 6px 12px; min-width:0;
    }
    .navmenu.open .navmenu-list{ display:block; }
}
@media (min-width:981px){
    .navlinks{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
    .topnav .navright{ margin-left:auto; display:flex; gap:6px; align-items:center; }
}

/* The light/dark button. The sun retracts its rays as the moon scales in;
   all of it in CSS, so there is nothing to fail on a venue laptop. */
.themebtn{
    width:36px; height:36px; padding:0; border-radius:var(--radius-sm);
    border:1px solid var(--a-line); background:transparent; color:var(--a-ink);
    cursor:pointer; display:grid; place-items:center; flex:0 0 auto;
}
.themebtn:hover{ border-color:var(--a-line-2); background:var(--a-hover); }
.themebtn svg{ width:18px; height:18px; }
.themebtn .ray{ stroke-dasharray:4; stroke-dashoffset:0;
    transition:stroke-dashoffset .45s ease, opacity .35s ease; }
.themebtn .core{ transform-origin:center;
    transition:transform .6s cubic-bezier(.4,0,.2,1), opacity .35s ease; }
.themebtn .moon{ transform-origin:center; opacity:0; transform:scale(0) rotate(-45deg);
    transition:transform .6s cubic-bezier(.4,0,.2,1), opacity .45s ease; }
/* Light is the default now, so the SUN shows unless dark is in force; and
   dark is in force either by explicit choice or by the system preference
   with no explicit light. Written out rather than negated, because the two
   ways of being dark do not collapse into one selector. */
:root[data-theme="dark"] .themebtn .ray{ stroke-dashoffset:4; opacity:0; }
:root[data-theme="dark"] .themebtn .core{ transform:scale(0); opacity:0; }
:root[data-theme="dark"] .themebtn .moon{ opacity:1; transform:scale(1) rotate(0deg); }
@media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .themebtn .ray{ stroke-dashoffset:4; opacity:0; }
    :root:not([data-theme="light"]) .themebtn .core{ transform:scale(0); opacity:0; }
    :root:not([data-theme="light"]) .themebtn .moon{ opacity:1; transform:scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce){
    .themebtn .ray, .themebtn .core, .themebtn .moon{ transition:none; }
}

/* ============================================================
   4. SURFACES
   ------------------------------------------------------------
   Flat, solid and still. Nothing drifts behind text a host is
   reading under pressure; that rule came out of A7a and survives
   the change of look.
   ============================================================ */

body:not(.is-view) .panel,
body:not(.is-view) .setupband,
body:not(.is-view) .sdpanel,
body:not(.is-view) .ansbanner{
    background:var(--a-panel);
    border:1px solid var(--a-line);
    border-radius:var(--radius);
    box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
}
body:not(.is-view) .panel{ padding:16px; margin:12px 0; }
body:not(.is-view) .panel::before{ content:none; }   /* the old glass highlight */

body:not(.is-view) .team{
    background:var(--a-panel); border:1px solid var(--a-line);
    border-radius:var(--radius); box-shadow:none;
    -webkit-backdrop-filter:none; backdrop-filter:none;
    transition:background .15s ease, border-color .15s ease;
}
body:not(.is-view) .team:hover{
    background:var(--a-hover); border-color:var(--a-line-2); transform:none;
}

/* The bar that floats over scrolling content. Opaque, so it is legible
   whatever passes beneath it. */
body:not(.is-view) .stagebar{
    background:var(--a-panel);
    border:1px solid var(--a-line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    -webkit-backdrop-filter:none; backdrop-filter:none;
}

.grid{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.twocol{ display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); }

.stat{ background:var(--a-panel); border:1px solid var(--a-line);
       border-radius:var(--radius); padding:14px 16px; }
.stat .n{ font-size:27px; font-weight:800; line-height:1.1; }
.stat .k{ font-size:13px; color:var(--a-dim); margin-top:3px; }
.stat .n.nc{ font-size:var(--fs-body); font-weight:600; color:var(--a-dim); }
.stat .frac{ font-size:13.5px; color:var(--a-dim); margin-top:1px; }
.stat .why{ font-size:12.5px; color:var(--a-dim); margin-top:8px; line-height:1.45; }
.stat.device .n{ color:var(--m-device); } .stat.session .n{ color:var(--m-session); }
.stat.view .n{ color:var(--m-view); }     .stat.action .n{ color:var(--m-action); }
.stat.good .n{ color:var(--m-good); }     .stat.warn .n{ color:var(--m-warn); }

.note{ background:var(--a-panel); border:1px solid var(--a-line);
       border-left:4px solid var(--m-warn); border-radius:var(--radius-sm);
       padding:11px 14px; margin:12px 0; font-size:14.5px; }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13.5px; }
.empty{ color:var(--a-dim); padding:14px 0; }

/* ============================================================
   5. TABLES, BADGES AND CHIPS
   ============================================================ */

body:not(.is-view) table{ width:100%; border-collapse:collapse; font-size:15px; }
body:not(.is-view) th, body:not(.is-view) td{
    text-align:left; padding:9px 10px; border-bottom:1px solid var(--a-line);
    vertical-align:top;
}
body:not(.is-view) th{ font-size:13px; color:var(--a-dim); font-weight:700; }
body:not(.is-view) tr:last-child td{ border-bottom:0; }
.tscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

.badge{ display:inline-block; padding:2px 9px; border-radius:999px;
        font-size:13px; font-weight:700; border:1px solid currentColor; }
.badge.good{ color:var(--m-good); } .badge.warn{ color:var(--m-warn); }
.badge.bad{ color:var(--m-bad); }   .badge.dim{ color:var(--a-dim); }

body:not(.is-view) .chip{
    display:inline-block; padding:6px 12px; border-radius:999px;
    border:1px solid var(--a-line); background:var(--a-panel);
    color:var(--a-ink); font-size:var(--fs-support); font-weight:600;
}
body:not(.is-view) .chip.cur{
    background:var(--a-ink); color:var(--a-panel); border-color:var(--a-ink); font-weight:700;
}
body:not(.is-view) .chip.done{ color:var(--a-dim); border-color:var(--a-line); }

/* ============================================================
   6. CONTROLS
   ------------------------------------------------------------
   The admin look's primary is a solid ink pill, which is quiet
   and unmistakable at the same time. The control room keeps
   colour on the actions that carry meaning, because it is an
   operating surface read at speed rather than a reading surface.
   ============================================================ */

body:not(.is-view) .btn, body:not(.is-view) .dlbtn{
    display:inline-block; font-family:inherit; font-size:var(--fs-support);
    font-weight:700; line-height:1.35; padding:10px 16px;
    border-radius:var(--radius-sm); border:1px solid var(--a-line);
    background:var(--a-panel); color:var(--a-ink);
    text-decoration:none; cursor:pointer;
    transition:background .15s ease, border-color .15s ease, opacity .15s ease;
}
body:not(.is-view) .btn:hover, body:not(.is-view) .dlbtn:hover{ background:var(--a-hover); }
body:not(.is-view) .btn[disabled]{ opacity:.45; cursor:not-allowed; }
body:not(.is-view) .btn.sm{ font-size:13px; padding:8px 12px; }
body:not(.is-view) .btn.lg{ font-size:var(--fs-lg); padding:14px 24px; }
body:not(.is-view) .btn.block{ width:100%; }

/* The primary. Every name the pages already use for "this is the main
   action" lands here, rather than each one inventing a colour. */
body:not(.is-view) .dlbtn,
body:not(.is-view) .btn.gold,
body:not(.is-view) .btn.teal,
body:not(.is-view) .btn.primary{
    background:var(--a-ink); color:var(--a-panel); border-color:var(--a-ink);
}
body:not(.is-view) .dlbtn:hover,
body:not(.is-view) .btn.gold:hover,
body:not(.is-view) .btn.teal:hover,
body:not(.is-view) .btn.primary:hover{ background:var(--a-ink); opacity:.86; }

/* Meaning colours, as fills, for the control room. */
body:not(.is-view) .btn.green{ background:var(--m-good);    color:var(--m-ink); border-color:var(--m-good); }
body:not(.is-view) .btn.blue{  background:var(--m-view);    color:var(--m-ink); border-color:var(--m-view); }
body:not(.is-view) .btn.violet{background:var(--m-session); color:var(--m-ink); border-color:var(--m-session); }
body:not(.is-view) .btn.amber{ background:var(--m-warn);    color:var(--m-ink); border-color:var(--m-warn); }
body:not(.is-view) .btn.black{ background:var(--a-ink);     color:var(--a-panel); border-color:var(--a-ink); }
body:not(.is-view) .btn.ghost{ background:transparent; color:var(--a-dim); border-color:var(--a-line); }
body:not(.is-view) .btn.ghost:hover{ color:var(--a-ink); background:var(--a-hover); }

/* Destructive stays an outline until it is confirmed, so a large area of
   red never sits on the screen waiting to be clicked by accident. */
body:not(.is-view) .btn.bad,
body:not(.is-view) .btn.danger{
    background:transparent; color:var(--m-bad); border-color:var(--m-bad);
}
body:not(.is-view) .btn.bad:hover,
body:not(.is-view) .btn.danger:hover{ background:var(--err-tint); }

body:not(.is-view) input[type=text], body:not(.is-view) input:not([type]),
body:not(.is-view) input[type=number], body:not(.is-view) input[type=password],
body:not(.is-view) input[type=email], body:not(.is-view) input[type=search],
body:not(.is-view) input[type=date], body:not(.is-view) input[type=time],
body:not(.is-view) textarea, body:not(.is-view) select{
    font-family:inherit; font-size:var(--fs-body);
    padding:9px 11px; border-radius:var(--radius-sm);
    border:1px solid var(--a-line); background:var(--a-panel); color:var(--a-ink);
}
body:not(.is-view) input:focus, body:not(.is-view) textarea:focus,
body:not(.is-view) select:focus{
    outline:none; border-color:var(--m-view);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--m-view) 22%, transparent);
}
body:not(.is-view) pre{
    background:var(--a-sunk); border:1px solid var(--a-line);
    border-radius:var(--radius-sm); padding:10px; overflow:auto;
    font-size:var(--fs-meta); color:var(--a-dim);
}

/* ============================================================
   7. REPORTING CONTROLS (were admin-only; now shared)
   ============================================================ */

.rangebar{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin:14px 0 6px; }
.rangebar a{ padding:8px 14px; border-radius:999px; text-decoration:none; font-size:14.5px;
             border:1px solid var(--a-line); color:var(--a-ink); background:var(--a-panel); }
.rangebar a:hover{ background:var(--a-hover); }
.rangebar a[aria-current="page"]{ background:var(--a-ink); color:var(--a-panel);
                                  border-color:var(--a-ink); font-weight:700; }
.customrange{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-left:4px; }
.customrange label{ font-size:var(--fs-support); color:var(--a-dim); }
.filterbar{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:10px 0 4px;
            padding:12px; border:1px solid var(--a-line); border-radius:var(--radius);
            background:var(--a-panel); }
.filterbar label{ font-size:var(--fs-support); color:var(--a-dim); }
.filterbar .clearf{ font-size:var(--fs-support); padding:8px; }
.chg{ font-size:12.5px; font-weight:700; padding:1px 7px; border-radius:999px;
      border:1px solid currentColor; white-space:nowrap; color:var(--a-dim); }
.chg.up{ color:var(--m-good); } .chg.down{ color:var(--m-warn); } .chg.new{ color:var(--m-session); }

.trend{ display:flex; align-items:flex-end; gap:3px; height:150px; overflow-x:auto; padding-bottom:4px; }
.tcol{ flex:1 0 14px; min-width:14px; display:flex; flex-direction:column; justify-content:flex-end;
       height:100%; padding-bottom:18px; position:relative; }
.tbar{ background:var(--m-action); border-radius:5px 5px 2px 2px; min-height:3px;
       position:relative; display:flex; align-items:flex-start; justify-content:center; }
.tn{ font-size:11px; font-weight:700; color:var(--m-ink); padding-top:3px; }
/* Pinned to the bottom of the column so every label sits on one line,
   whatever height its bar happens to be. */
.tlab{ position:absolute; bottom:0; left:0; right:0; font-size:var(--fs-meta); color:var(--a-dim);
       text-align:center; white-space:nowrap; overflow:hidden; }
.tdata{ margin-top:12px; font-size:var(--fs-support); }
.tdata summary{ cursor:pointer; color:var(--m-view); }
.tdata table{ margin-top:8px; }

.att{ display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border-radius:11px;
      border:1px solid var(--a-line); margin-bottom:8px; background:var(--a-panel); font-size:14.5px; }
.att .dot{ width:9px; height:9px; border-radius:50%; margin-top:7px; flex:0 0 9px; }
.att.good .dot{ background:var(--m-good); } .att.warn .dot{ background:var(--m-warn); }
.att.bad .dot{ background:var(--m-bad); }
.att.bad{ border-left:4px solid var(--m-bad); }
.att.warn{ border-left:4px solid var(--m-warn); }
.att.good{ border-left:4px solid var(--m-good); }

/* ============================================================
   8. THE HOST TYPE SCALE
   ------------------------------------------------------------
   Carried over from A7a unchanged. The sizes were worked out and
   measured there; the look changing does not change how big a
   team's answer has to be for a host to read it mid-round.
   ============================================================ */

/* A team's submitted answer, and the peek at one from the teams panel.
   Both were 13px before A7a, and are the reason the slice happened. */
body:not(.is-view) .markrow .given,
body:not(.is-view) .peek .pk-text{
    font-size:var(--fs-answer); line-height:1.35; font-weight:700; color:var(--a-ink);
}
/* The marking decision itself: pressed quickly, often without looking
   straight at it. */
body:not(.is-view) .pillset .p{ font-size:var(--fs-body); font-weight:800; }

body:not(.is-view) .sb-title,
body:not(.is-view) .tc-editrow input{ font-size:var(--fs-body); }

body:not(.is-view) .sb-hint,
/* .sb-state itself is deliberately font-size:0 in control.php: the literal
   word in the markup is hidden and the ::after supplies Show or Hide.
   Sizing the span as well as the ::after put the hidden word back and the
   button read SHOWSHOW. */
body:not(.is-view) .sb-state::after,
body:not(.is-view) .sg-where,
body:not(.is-view) .tc-cap,
body:not(.is-view) .tc-away,
body:not(.is-view) .tc-danger,
body:not(.is-view) .tc-hand-note,
body:not(.is-view) .ab-title,
body:not(.is-view) .ab-toolslabel,
body:not(.is-view) .ab-chip .ab-secs,
body:not(.is-view) .qbox .lab,
body:not(.is-view) .stage,
body:not(.is-view) label,
body:not(.is-view) .mc-label,
body:not(.is-view) .eyebrow{ font-size:var(--fs-support); }

body:not(.is-view) .tc-lbl,
body:not(.is-view) .tc-dev,
body:not(.is-view) .tc-editrow label,
body:not(.is-view) .team .meta,
body:not(.is-view) .mtime,
body:not(.is-view) .peek small,
body:not(.is-view) .vfoot summary,
body:not(.is-view) .seal{ font-size:var(--fs-meta); }

/* ============================================================
   9. THE PIECES THE CONTROL ROOM STILL NEEDS
   ============================================================ */

/* The question being marked. */
body:not(.is-view) .qbox{
    border:1px solid var(--a-line-2); border-radius:var(--radius);
    background:var(--a-sunk); padding:16px; margin-bottom:14px;
}
body:not(.is-view) .pillset .p.sel{
    background:var(--m-good); border-color:var(--m-good); color:var(--m-ink);
}
body:not(.is-view) .lb-row{ background:var(--a-sunk); }
body:not(.is-view) .lb-row.first{ background:var(--accent-tint-2); }
body:not(.is-view) .stage{
    display:inline-block; background:var(--a-ink); color:var(--a-panel);
    font-weight:800; padding:6px 14px; border-radius:999px;
}
body:not(.is-view) .msg.bad{
    background:var(--err-tint); color:var(--m-bad); border:1px solid var(--err-edge);
    padding:11px 14px; border-radius:var(--radius-sm); margin-bottom:14px;
}
/* Status dots: colour AND text, never colour alone. */
body:not(.is-view) .ab-chip.in .ab-dot{ background:var(--m-good); }
body:not(.is-view) .ab-chip .ab-dot{ background:var(--m-warn); }
body:not(.is-view) .ansbanner.resting .ab-chip .ab-dot{ background:var(--a-line-2); }
body:not(.is-view) .live-dot{ background:var(--m-good); }

@media (max-width:600px){
    .wrap, .wrap-wide{ padding:14px 12px 48px; }
    body:not(.is-view) h1{ font-size:20px; }
    .trend{ height:120px; }
    .filterbar{ flex-direction:column; align-items:stretch; }
}