/* ── skyline-ui.css — Going Concern: the Skyline theme (Race Plan, Morris 27 October 2026).
   Tokens from desk.css, restated. Loaded after every other stylesheet of the desk and active only
   under body.gc-skyline. The home of the theme is the view from the chief executive's top-floor
   office over the financial district at blue hour: deep navy, sodium amber, teal and the warm
   white of lit windows. The panes are smoked glass over that painted city (#gc-sky, drawn by
   sky.js; until it exists the hero painting is the body's background). Paper stays paper, warmer,
   like good stationery under a desk lamp.

   How it works. The palette is a set of --sky-* tokens in :root below (hex and rgb() only here).
   The rule after it maps the desk's own tokens onto them on html, but only while the body has the
   class, so every stylesheet of the desk and every token derived in desk.css's :root (--ring,
   --sel, --face, --pos …) follows without a rule of its own. Type: --mono becomes the label face
   (Söhne, set in capitals with tracking, as the chrome always was) and --sky-figures (Söhne Mono)
   carries the numbers, the ticker, codes and anything laid out in columns; --sans is Söhne for
   copy; --sky-display (Söhne Breit) heads the brand and the dialogs; paper keeps Plex Serif.
   The rules after the tokens only say what tokens cannot: glass, radii, gutters, depth.
   No game behaviour, no text and no layout logic changes here. ─────────────────────────── */

:root{
  /* the city at blue hour */
  --sky-night:#050a14;                       /* the body behind the painting */
  --sky-navy:#0b1527;                        /* solid navy: a held table column, a native option list */
  --sky-veil:linear-gradient(180deg, rgba(4,9,19,.42) 0%, rgba(4,9,19,.55) 45%, rgba(4,9,19,.76) 100%);
  /* smoked glass: the chrome, the reading panes, a floating card; tiles and hover inside them */
  --sky-glass:rgba(8,15,29,.76);
  --sky-glass-pane:rgba(7,13,26,.82);
  --sky-glass-float:rgba(9,17,32,.93);
  --sky-glass-bright:rgba(7,13,26,.88); --sky-glass-pane-bright:rgba(6,12,24,.9); --sky-tile-bright:rgba(24,40,66,.5);
  --sky-tile:rgba(30,48,78,.38);
  --sky-tile-2:rgba(44,68,106,.50);
  --sky-tile-3:rgba(243,168,71,.10);
  --sky-term:rgba(3,8,17,.55);
  --sky-blur:blur(18px) saturate(140%);
  --sky-blur-soft:blur(5px);
  /* hairlines: pale amber between rows, pale teal around controls */
  --sky-line:rgba(240,192,128,.15);
  --sky-line-2:rgba(150,208,218,.26);
  --sky-edge:rgba(255,228,190,.10);          /* the lit top edge of a glass panel */
  /* text: the warm white of a lit window. Measured on the rendered desk (1440, the hero painting behind,
     against the brightest 1% of the glass behind text, a tile on a tile and the guide's amber glow the
     worst case, L .038): text 10.4:1, muted 6.5:1, dim 4.8:1, amber 6.0:1, teal 6.5:1, red 4.7:1.
     On a plain pane (L .012): text 14.7:1, muted 9.2:1, dim 6.9:1 */
  --sky-text:#f5efe4; --sky-muted:#b6c0ce; --sky-dim:#9ca8bb;
  /* sodium amber: actions and highlights */
  --sky-amber:#f3a847; --sky-amber-hi:#ffc46e; --sky-amber-dim:#8f6326; --sky-on-amber:#1c1206;
  --sky-amber-wash:rgba(243,168,71,.14);
  --sky-amber-glow:rgba(243,168,71,.10); --sky-amber-glow-2:rgba(243,168,71,.20); --sky-amber-glow-3:rgba(243,168,71,.30);
  --sky-amber-line:rgba(243,168,71,.42);
  /* teal: information and better; a warm red: alarms and worse */
  --sky-teal:#5ad2bf; --sky-teal-dim:rgba(90,210,191,.36);
  --sky-info:#8fd3e3; --sky-info-dim:rgba(143,211,227,.32);
  --sky-red:#ff7a6b; --sky-red-dim:rgba(255,122,107,.40); --sky-red-wash:rgba(255,122,107,.12);
  /* paper under a desk lamp. Small text on --sky-paper: ink 15.5:1, ink-2 8.7:1, ink-dim 5.9:1, ink-link 8.3:1,
     ink-up 5.7:1, ink-down 6.0:1, ink-accent 5.6:1 (on --sky-paper-2, the darkest: 5.0:1 and up) */
  --sky-paper:#f7f0e3; --sky-paper-2:#eee4d2; --sky-paper-3:#fcf8f0; --sky-paper-hover:#f2e9d8;
  --sky-ink:#1d1812; --sky-ink-2:#4b4236; --sky-ink-3:#2f281f; --sky-ink-dim:#655b4d;
  --sky-rule:#e0d3bd; --sky-rule-2:#c7b89e; --sky-rule-3:#d7c9b0;
  --sky-ink-link:#1b4a6b; --sky-ink-up:#1b6a58; --sky-ink-down:#a43322; --sky-ink-accent:#855610; --sky-ink-brown:#5d4519; --sky-sepia:#8a7556;
  --sky-lamp:rgba(255,206,140,.13);          /* the lamp's warm pool on the desk around a letter */
  /* depth */
  --sky-scrim-1:rgba(3,7,15,.52); --sky-scrim:rgba(3,7,15,.64); --sky-scrim-2:rgba(3,7,15,.78);
  --sky-shadow-glass:0 18px 48px rgba(0,0,0,.42);
  --sky-shadow-lift:0 28px 80px rgba(0,0,0,.62), 0 2px 6px rgba(0,0,0,.35);
  --sky-shadow-float:0 14px 40px rgba(0,0,0,.55);
  --sky-shadow-paper:0 1px 2px rgba(40,24,6,.30), 0 24px 70px rgba(0,0,0,.55), 0 0 140px rgba(255,190,110,.12);
  --sky-shadow-amber:0 4px 16px rgba(243,168,71,.28);
  /* shape */
  --sky-r:calc(10 * var(--u)); --sky-r-s:calc(6 * var(--u)); --sky-r-xs:calc(3 * var(--u));
  /* type: Söhne (fonts.css, licensed), Plex as the fallback */
  --sky-sans:'Söhne','IBM Plex Sans',system-ui,sans-serif;
  --sky-figures:'Söhne Mono','IBM Plex Mono','SF Mono',Consolas,monospace;
  --sky-display:'Söhne Breit','Söhne','IBM Plex Sans',system-ui,sans-serif;
  --sky-serif:'IBM Plex Serif',Georgia,serif;
}

/* ═══ the desk's tokens, mapped onto the city (on html, so desk.css's derived tokens follow) ═══ */
html:has(> body.gc-skyline){
  --bg:var(--sky-glass-pane); --bg-2:var(--sky-tile); --panel:var(--sky-tile); --panel-2:var(--sky-tile-2); --panel-3:var(--sky-tile-3);
  --line:var(--sky-line); --line-2:var(--sky-line-2);
  --text:var(--sky-text); --muted:var(--sky-muted); --dim:var(--sky-dim);
  --accent:var(--sky-amber); --accent-hi:var(--sky-amber-hi); --accent-dim:var(--sky-amber-dim); --accent-wash:var(--sky-amber-wash); --on-accent:var(--sky-on-amber);
  --accent-glow:var(--sky-amber-glow); --accent-glow-2:var(--sky-amber-glow-2); --accent-glow-3:var(--sky-amber-glow-3);
  --up:var(--sky-teal); --up-dim:var(--sky-teal-dim); --down:var(--sky-red); --down-dim:var(--sky-red-dim); --warn-c:var(--sky-amber); --link:var(--sky-info); --link-dim:var(--sky-info-dim);
  --paper:var(--sky-paper); --paper-2:var(--sky-paper-2); --paper-3:var(--sky-paper-3); --paper-hover:var(--sky-paper-hover);
  --ink:var(--sky-ink); --ink-2:var(--sky-ink-2); --ink-3:var(--sky-ink-3); --ink-dim:var(--sky-ink-dim);
  --rule:var(--sky-rule); --rule-2:var(--sky-rule-2); --rule-3:var(--sky-rule-3);
  --ink-link:var(--sky-ink-link); --ink-up:var(--sky-ink-up); --ink-down:var(--sky-ink-down); --ink-accent:var(--sky-ink-accent); --ink-brown:var(--sky-ink-brown); --sepia:var(--sky-sepia);
  --scrim-1:var(--sky-scrim-1); --scrim:var(--sky-scrim); --scrim-2:var(--sky-scrim-2);
  --shadow-lift:var(--sky-shadow-lift); --shadow-win:var(--sky-shadow-glass); --shadow-float:var(--sky-shadow-float);
  --term-bg:var(--sky-term); --note:var(--sky-tile-2);
  --era-fax:var(--sky-paper);   /* the 1990s fax paper, warmed to the stationery */
  --ring:var(--sky-amber-hi);
  --mono:var(--sky-sans); --sans:var(--sky-sans); --serif:var(--sky-serif);
  color-scheme:dark;
}
@media (max-width:900px){
  /* a held first column of a wide table scrolls content under it: it must be solid */
  html:has(> body.gc-skyline){ --gc-tw-bg:var(--sky-navy); }
  body.gc-skyline :is(.victory-box, .gc-pal-box, .scn-box, #queue){ --gc-tw-bg:var(--sky-navy); }
}

/* ═══ the city behind the desk ═══ */
body.gc-skyline{ background:var(--sky-night); font-variant-numeric:tabular-nums; }
/* until sky.js draws #gc-sky: the hero painting, darkened, fixed behind everything */
body.gc-skyline:not(:has(#gc-sky)){ background:var(--sky-veil), url('img/paint/hero_dusk-1120.webp') 50% 38% / cover no-repeat fixed, var(--sky-night); }
@media (max-width:1120px){ body.gc-skyline:not(:has(#gc-sky)){ background:var(--sky-veil), url('img/paint/hero_dusk-1120.webp') 32% 40% / cover no-repeat, var(--sky-night); } }
body.gc-skyline ::selection{ background:var(--sky-amber-glow-3); color:var(--sky-text); }
body.gc-skyline :where(.doc, .memo) ::selection{ background:var(--sky-amber-glow-3); color:var(--ink); }
body.gc-skyline{ scrollbar-color:var(--sky-line-2) transparent; }
body.gc-skyline ::-webkit-scrollbar{ width:var(--sp-2); height:var(--sp-2); }
body.gc-skyline ::-webkit-scrollbar-thumb{ background:var(--sky-line-2); border-radius:var(--sp-1); border:var(--sp-0) solid transparent; background-clip:padding-box; }
body.gc-skyline ::-webkit-scrollbar-thumb:hover{ background-color:var(--sky-amber-line); }
body.gc-skyline ::-webkit-scrollbar-corner{ background:transparent; }
body.gc-skyline option{ background:var(--sky-navy); color:var(--sky-text); }
body.gc-skyline :where(.doc, .memo) option{ background:var(--paper-3); color:var(--ink); }

/* figures: the numbers, the ticker, codes, and anything laid out in columns */
body.gc-skyline :is(.term, pre, code, kbd, .gcf-sym, .gcf-in td:last-child, #cmd-in, .gc-pal-in, .c-prompt,
  .vital .v-val, .kpi-box .v, .row .val, td.r, th.r, td.num, .gcf-num, .q-head b, .s-decide b, #tb-date, #tb-ticker,
  .crisis-stats .v, .crisis-log, .sb-result, .gc-ed-facts, #gc-ios-spd b, .gc-goal-home .g-n, #guide.goal .g-n, .mail-row .dt, .qi-due){ font-family:var(--sky-figures); }
body.gc-skyline .winbody [style*="font-family:'Courier New'"]{ font-family:var(--sky-figures) !important; }
/* display: the brand and the heads of dialogs */
body.gc-skyline :is(.s-brand, .appt .mast b, .victory-box .big, .dx-title, .ar-title, .gc-office-bank, .g-k){ font-family:var(--sky-display); font-weight:600; }

/* ═══ the appointment: a letter on the desk, the city through the window ═══ */
body.gc-skyline #login{ background:radial-gradient(calc(900 * var(--u)) calc(700 * var(--u)) at 50% 30%, var(--sky-lamp), transparent 70%); }
body.gc-skyline .appt .mast{ color:var(--sky-text); text-shadow:0 1px 8px var(--sky-night); }
body.gc-skyline .appt .mast b{ color:var(--sky-amber-hi); letter-spacing:.24em; }

/* ═══ paper: good stationery under a lamp ═══ */
body.gc-skyline .doc{ background:radial-gradient(140% 90% at 18% 0%, var(--paper-3) 0%, var(--paper) 46%, var(--paper-2) 100%); box-shadow:var(--sky-shadow-paper); border-radius:var(--sp-0); }
body.gc-skyline .doc :is(.doc-kicker, .doc-meta), body.gc-skyline .memo .doc-kicker{ letter-spacing:.2em; }
body.gc-skyline .doc h1{ letter-spacing:-.015em; color:var(--ink); }
body.gc-skyline .doc hr{ border-top-color:var(--rule-2); }
body.gc-skyline .doc .btn{ border-radius:var(--sky-r-xs); letter-spacing:.1em; font-weight:500; }
body.gc-skyline .doc .btn.primary{ background:var(--ink-3); border-color:var(--ink-3); color:var(--paper-3); box-shadow:0 1px 0 var(--ink); }
body.gc-skyline .doc .btn:hover:not(:disabled){ background:var(--ink); color:var(--paper-3); }
body.gc-skyline .login-form input, body.gc-skyline .login-form select{ border-radius:var(--sky-r-xs); border-color:var(--rule-3); background:var(--paper-3); }
body.gc-skyline .qm-btn{ border-radius:var(--sky-r-xs); }
body.gc-skyline .memo{ background:linear-gradient(180deg, var(--paper-3), var(--paper) 40%); border-radius:var(--sp-0); box-shadow:0 1px 2px var(--sky-night); }
body.gc-skyline .hb-article.doc, body.gc-skyline .reg-letter{ box-shadow:0 1px 2px var(--sky-night); }

/* ═══ the desk: glass over the city ═══ */
body.gc-skyline #desktop{ background:transparent; }
/* the blur sits on a ::before behind the content, never on the panel itself: a backdrop-filter on the
   panel would make it the containing block of anything fixed inside it (the phone's clock menu) */
body.gc-skyline .pane{ position:relative; isolation:isolate; }
body.gc-skyline .pane::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
  -webkit-backdrop-filter:var(--sky-blur); backdrop-filter:var(--sky-blur); }
@media (min-width:901px){
  body.gc-skyline :is(#strip, #cmd, #guide, #queue, #tick){ position:relative; isolation:isolate; }
  body.gc-skyline :is(#strip, #cmd, #guide, #queue, #tick)::before{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
    -webkit-backdrop-filter:var(--sky-blur); backdrop-filter:var(--sky-blur); }
}
body.gc-skyline #strip{ background:var(--sky-glass); border-bottom-color:var(--sky-line); }
body.gc-skyline #strip > *{ border-right-color:var(--sky-line); }
body.gc-skyline #cmd{ background:var(--sky-glass); border-bottom-color:var(--sky-line); }
body.gc-skyline #tick{ background:var(--sky-glass); border-top-color:var(--sky-line); }
body.gc-skyline .pane{ background:var(--sky-glass-pane); border-right-color:var(--sky-line); }
body.gc-skyline #queue{ background:var(--sky-glass-pane); border-bottom-color:var(--sky-line); }
body.gc-skyline #grid{ background:transparent; }
body.gc-skyline .pane-head, body.gc-skyline .q-head{ background:linear-gradient(180deg, var(--sky-edge), transparent); border-bottom-color:var(--sky-line); }

/* the desktop and the laptop: panes float as panels with the city in the gutters */
@media (min-width:901px){
  body.gc-skyline #desktop{ padding:var(--sp-2); }
  body.gc-skyline :is(#strip, #cmd, #guide, .pane, #queue, #tick){ border:1px solid var(--sky-line); box-shadow:var(--sky-shadow-glass), inset 0 1px 0 var(--sky-edge); }
  body.gc-skyline #strip{ border-radius:var(--sky-r) var(--sky-r) 0 0; }
  body.gc-skyline #cmd{ border-radius:0 0 var(--sky-r) var(--sky-r); border-top:0; box-shadow:var(--sky-shadow-glass); }
  body.gc-skyline #guide{ margin-top:var(--sp-1h); border-radius:var(--sky-r); border-color:var(--sky-amber-line); }
  body.gc-skyline #grid{ margin-top:var(--sp-1h); gap:var(--sp-1h); }
  body.gc-skyline .pane, body.gc-skyline #queue{ border-radius:var(--sky-r); overflow:hidden; }
  body.gc-skyline .pane.on{ border-color:var(--sky-amber-line); }
  body.gc-skyline #tick{ margin-top:var(--sp-1h); border-radius:var(--sky-r); }
  body.gc-skyline #grid.ws{ background:transparent; }
  body.gc-skyline #grid.ws :is(.pane, #queue){ box-shadow:var(--sky-shadow-lift); }
  body.gc-skyline #grid.ws .pane.on{ border-color:var(--sky-amber); }
}

/* ═══ the strip ═══ */
body.gc-skyline .s-brand{ color:var(--sky-amber-hi); font-size:var(--fs-2); letter-spacing:.16em; }
body.gc-skyline .s-who b{ font-weight:500; }
body.gc-skyline .spd, body.gc-skyline #btn-step{ border-radius:var(--sky-r-s); border-color:var(--sky-line-2); background:var(--sky-tile); }
body.gc-skyline .spd:hover, body.gc-skyline #btn-step:hover{ border-color:var(--sky-amber-line); color:var(--sky-text); }
body.gc-skyline .spd.active{ background:linear-gradient(180deg, var(--sky-amber-hi), var(--sky-amber)); border-color:var(--sky-amber); color:var(--sky-on-amber); box-shadow:var(--sky-shadow-amber); }
body.gc-skyline .vital{ border-right-color:var(--sky-line); }
body.gc-skyline .vital:hover{ background:var(--sky-tile); }
body.gc-skyline .vital .v-label{ font-weight:500; }
body.gc-skyline .vital .v-bar{ border-radius:var(--sp-0); overflow:hidden; background:var(--sky-line); }
body.gc-skyline .vital .v-bar i{ background:var(--sky-teal-dim); border-radius:var(--sp-0); }
body.gc-skyline .vital.tone-warn .v-bar i{ background:var(--sky-amber); } body.gc-skyline .vital.tone-bad .v-bar i{ background:var(--sky-red); }
body.gc-skyline .s-decide{ border-left-color:var(--sky-line); }
body.gc-skyline .s-decide.has{ background:linear-gradient(180deg, var(--sky-amber-glow-2), var(--sky-amber-glow)); }

/* ═══ the command line and the function bar ═══ */
body.gc-skyline #fn-bar{ border-top-color:var(--sky-line); }
body.gc-skyline .fn-pins{ border-left-color:var(--sky-line); }
body.gc-skyline .dept{ font-weight:500; }
body.gc-skyline .dept.on{ color:var(--sky-text); border-bottom-color:var(--sky-amber); background:linear-gradient(0deg, var(--sky-amber-glow), transparent 70%); }
body.gc-skyline .fn{ border-radius:var(--sky-r-s); font-weight:500; }
body.gc-skyline .fn:hover{ border-color:var(--sky-line-2); background:var(--sky-tile); }
body.gc-skyline .fn.on{ color:var(--sky-amber-hi); border-color:var(--sky-amber-line); background:var(--sky-amber-wash); }
body.gc-skyline #cmd-in{ border-bottom-color:var(--sky-line-2); }

/* ═══ the guide rail ═══ */
body.gc-skyline #guide{ background:linear-gradient(90deg, var(--sky-amber-glow-2), transparent 70%), var(--sky-glass-pane); border-bottom-color:var(--sky-amber-line); }
body.gc-skyline .g-k{ color:var(--sky-amber-hi); font-size:var(--fs-1); letter-spacing:.18em; }
body.gc-skyline .g-dots i{ border-radius:50%; }
body.gc-skyline .ph-lesson{ border-radius:var(--sky-r-xs); }

/* ═══ inside a pane ═══ */
body.gc-skyline .winbody :is(h2, h3), body.gc-skyline .help-doc h2{ font-weight:500; letter-spacing:.16em; }
body.gc-skyline .fieldset{ background:var(--sky-tile); border-color:var(--sky-line); border-radius:var(--sky-r-s); padding-top:var(--sp-2h); }
body.gc-skyline .fieldset > .legend, body.gc-skyline #queue .fieldset > .legend, body.gc-skyline #pane-b .fieldset > .legend{ position:static; display:block; padding:0; margin:0 0 var(--sp-2); background:none; font-weight:500; letter-spacing:.16em; color:var(--sky-muted); }
body.gc-skyline .fieldset .fieldset{ background:var(--sky-tile); }
body.gc-skyline .kpi-strip, body.gc-skyline .crisis-stats, body.gc-skyline .gcc-grid{ gap:var(--sp-1h); background:transparent; border:0; }
body.gc-skyline .kpi-box, body.gc-skyline .crisis-stats > div, body.gc-skyline .gcc-card{ background:var(--sky-tile); border:1px solid var(--sky-line); border-radius:var(--sky-r-s); }
body.gc-skyline .gcc-card:hover{ background:var(--sky-tile-2); border-color:var(--sky-line-2); }
body.gc-skyline .kpi-box .k{ font-weight:500; }
body.gc-skyline .kpi-box .v{ font-weight:400; }
body.gc-skyline .meter, body.gc-skyline .crisis-bar, body.gc-skyline .ladder-bar{ border-radius:var(--sp-1); overflow:hidden; background:var(--sky-line); }
body.gc-skyline .meter .fill{ border-radius:var(--sp-1); }
body.gc-skyline .meter .fill.ok{ background:linear-gradient(90deg, var(--sky-teal-dim), var(--sky-teal)); }
body.gc-skyline .meter .fill.warn{ background:linear-gradient(90deg, var(--sky-amber-dim), var(--sky-amber)); }
body.gc-skyline .meter .fill.bad{ background:linear-gradient(90deg, var(--sky-red-dim), var(--sky-red)); }
body.gc-skyline .winbody table th{ font-weight:500; border-bottom-color:var(--sky-line-2); }
body.gc-skyline .winbody table tr:hover td{ background:var(--sky-tile); }
body.gc-skyline .sunken, body.gc-skyline .org-node, body.gc-skyline .art-dir, body.gc-skyline .gc-trade, body.gc-skyline .gcm-card{ border-radius:var(--sky-r-s); }
body.gc-skyline .term{ border-radius:var(--sky-r-s); }
body.gc-skyline .winbody :is(input, select, textarea){ border-radius:var(--sky-r-xs); background:var(--sky-term); border-color:var(--sky-line-2); }
body.gc-skyline .winbody :is(input, select, textarea):hover{ border-color:var(--sky-amber-line); }
body.gc-skyline .gc-goal-home, body.gc-skyline .gcst-home{ border-radius:0 var(--sky-r-s) var(--sky-r-s) 0; background:linear-gradient(90deg, var(--sky-amber-glow), var(--sky-tile) 60%); }
body.gc-skyline .mail-row{ border-radius:var(--sky-r-xs); }
body.gc-skyline .mail-row.sel{ background:var(--sky-tile-2); outline-color:var(--sky-amber-line); }
body.gc-skyline .hb-item{ border-radius:0 var(--sky-r-xs) var(--sky-r-xs) 0; }
body.gc-skyline .hb-item.on{ color:var(--sky-amber-hi); background:var(--sky-amber-wash); }
body.gc-skyline .hb-side{ border-right-color:var(--sky-line); }
body.gc-skyline .art-wrap{ border-radius:var(--sky-r-s); overflow:hidden; border-color:var(--sky-line); }
body.gc-skyline .gc-empty{ border-left-color:var(--sky-amber-line); }

/* ═══ buttons and tags ═══ */
body.gc-skyline .btn{ border-radius:var(--sky-r-s); background:var(--sky-tile); border-color:var(--sky-line-2); font-weight:500; letter-spacing:.08em; transition:background-color 120ms ease-out, border-color 120ms ease-out, box-shadow 120ms ease-out; }
body.gc-skyline .btn:hover:not(:disabled){ border-color:var(--sky-amber-line); background:var(--sky-tile-2); }
body.gc-skyline .btn.primary{ background:linear-gradient(180deg, var(--sky-amber-hi), var(--sky-amber)); border-color:var(--sky-amber); color:var(--sky-on-amber); font-weight:600; box-shadow:var(--sky-shadow-amber); }
body.gc-skyline .btn.primary:hover:not(:disabled){ background:var(--sky-amber-hi); border-color:var(--sky-amber-hi); }
body.gc-skyline .btn.primary:disabled{ background:var(--sky-amber-dim); border-color:var(--sky-amber-dim); color:var(--sky-on-amber); box-shadow:none; opacity:.75; }
body.gc-skyline .btn.danger{ color:var(--sky-red); border-color:var(--sky-red-dim); }
body.gc-skyline .btn.danger:hover:not(:disabled){ background:var(--sky-red-wash); border-color:var(--sky-red); }
body.gc-skyline .tb-btn{ border-radius:var(--sky-r-xs); border-color:var(--sky-line-2); }
body.gc-skyline .tag{ border-radius:var(--sky-r-xs); font-weight:500; }
body.gc-skyline .tag.g{ background:var(--sky-teal-dim); border-color:transparent; color:var(--sky-text); }
body.gc-skyline .tag.r{ background:var(--sky-red-wash); }
body.gc-skyline .tag.y{ background:var(--sky-amber-wash); }
body.gc-skyline :where(.doc, .memo) .tag.g{ background:transparent; color:var(--ink-up); border-color:var(--rule-2); }
body.gc-skyline .ph-acts button{ border-radius:var(--sky-r-xs); }
body.gc-skyline kbd.gc-k{ border-radius:var(--sky-r-xs); background:var(--sky-tile-2); }

/* ═══ the queue ═══ */
body.gc-skyline .q-head{ font-weight:500; }
body.gc-skyline .qi{ border-bottom-color:var(--sky-line); border-left:2px solid transparent; transition:background-color 120ms ease-out; }
body.gc-skyline .qi:hover{ background:var(--sky-tile); border-left-color:var(--sky-amber-line); }
body.gc-skyline .qi.urgent{ border-left-color:var(--sky-red); background:linear-gradient(90deg, var(--sky-red-wash), transparent 50%); }
body.gc-skyline .qi-kind{ font-weight:500; }
body.gc-skyline .qi-title{ font-weight:500; }

/* ═══ the ticker ═══ */
body.gc-skyline #tb-msg{ color:var(--sky-amber-hi); }
body.gc-skyline #tb-ticker{ color:var(--sky-muted); letter-spacing:.04em; }

/* ═══ dialogs, cards and menus: glass that floats ═══ */
body.gc-skyline :is(.victory-overlay, .notice-overlay, .gc-ed-overlay, .gc-pal, .scn-ov){ -webkit-backdrop-filter:var(--sky-blur-soft); backdrop-filter:var(--sky-blur-soft); }
body.gc-skyline :is(.victory-box, .gc-pal-box, .scn-box:not(.on-paper), .gcf-tip, #gc-ios-tip, #consent, #acct-bar){
  background:var(--sky-glass-float); border-color:var(--sky-line-2); -webkit-backdrop-filter:var(--sky-blur); backdrop-filter:var(--sky-blur); }
body.gc-skyline :is(.victory-box, .gc-pal-box, .scn-box){ border-radius:var(--sky-r); overflow:hidden; box-shadow:var(--sky-shadow-lift), inset 0 1px 0 var(--sky-edge); }
body.gc-skyline .victory-box .titlebar{ background:linear-gradient(180deg, var(--sky-edge), transparent) !important; border-bottom-color:var(--sky-line); font-weight:500; letter-spacing:.16em; }
body.gc-skyline .dx-acts{ border-top-color:var(--sky-line); }
body.gc-skyline .face{ border-radius:50%; border-color:var(--sky-line-2); }
body.gc-skyline .dx-stamp{ border-radius:var(--sky-r-s); font-family:var(--sky-display); box-shadow:0 0 40px var(--sky-amber-glow-3); }
body.gc-skyline .gc-pal-row{ border-radius:0; }
body.gc-skyline .gc-pal-row.on{ background:var(--sky-amber-wash); }
body.gc-skyline .gcf-tip, body.gc-skyline #gc-ios-tip{ border-radius:var(--sky-r-s); box-shadow:var(--sky-shadow-float); }
body.gc-skyline .gcf-sym{ background:var(--sky-term); border-radius:var(--sky-r-xs); }
body.gc-skyline #consent, body.gc-skyline #acct-bar{ border-radius:var(--sky-r-s); }
body.gc-skyline .consent-btn{ border-radius:var(--sky-r-xs); }
body.gc-skyline .scn-bar{ background:linear-gradient(180deg, var(--sky-edge), transparent); }
body.gc-skyline .scn-opt{ border-radius:var(--sky-r-s); background:var(--sky-tile); }
body.gc-skyline .crisis-log{ border-radius:var(--sky-r-xs); background:var(--sky-term); }
body.gc-skyline #gc-office{ background:var(--sky-glass-float); -webkit-backdrop-filter:var(--sky-blur); backdrop-filter:var(--sky-blur); }
body.gc-skyline .gc-office-bar{ border-radius:var(--sp-0); }
body.gc-skyline .notice, body.gc-skyline .doc.gc-ed{ border-radius:var(--sp-0); }

/* ═══ focus: a warm ring, drawn as before (inside the bars) ═══ */
body.gc-skyline :focus-visible{ outline-color:var(--ring); }
body.gc-skyline .btn:focus-visible, body.gc-skyline .spd:focus-visible, body.gc-skyline .fn:focus-visible{ box-shadow:0 0 0 calc(var(--ring-w) + 2px) var(--sky-amber-glow-2); }

/* ═══ the phone (ios.css lays it out; this only dresses it) ═══ */
@media (max-width:900px){
  body.gc-skyline #desktop{ background:transparent; }
  body.gc-skyline #grid{ background:transparent; }
  body.gc-skyline .pane{ border-right:0; }
  /* the bars carry no blur on a phone (cheaper, and nothing fixed inside them is displaced): a denser glass */
  body.gc-skyline #strip, body.gc-skyline #guide{ background:var(--sky-glass-float); }
  body.gc-skyline #guide{ background:linear-gradient(90deg, var(--sky-amber-glow-2), transparent 70%), var(--sky-glass-float); }
  body.gc-skyline #cmd{ background:var(--sky-glass-float); border-top-color:var(--sky-line); }
  body.gc-skyline #queue{ -webkit-backdrop-filter:var(--sky-blur); backdrop-filter:var(--sky-blur); }
  body.gc-skyline #fn-bar .fn-row .fn{ border-radius:0; border-right-color:var(--sky-line); }
  body.gc-skyline #fn-bar .fn-row .fn.on{ background:var(--sky-amber-wash); }
  body.gc-skyline #fn-bar .fn-top{ border-top-color:var(--sky-line); }
  body.gc-skyline #fn-bar .dept.on{ background:linear-gradient(180deg, var(--sky-amber-glow-2), transparent); }
  body.gc-skyline .gc-ios-b{ border-left-color:var(--sky-line); }
  body.gc-skyline #gc-ios-play.on{ background:linear-gradient(180deg, var(--sky-amber-hi), var(--sky-amber)); }
  html.gc-ios-clock body.gc-skyline #strip .s-clock{ background:var(--sky-glass-float); border-radius:var(--sky-r); -webkit-backdrop-filter:var(--sky-blur); backdrop-filter:var(--sky-blur); }
  body.gc-skyline #queue{ background:var(--sky-glass-float); border-radius:var(--sky-r) var(--sky-r) 0 0; border-color:var(--sky-line-2); }
  html.gc-phone body.gc-skyline #tick.gc-ios-msg{ background:var(--sky-glass-float); border-radius:var(--sky-r-s); -webkit-backdrop-filter:var(--sky-blur); backdrop-filter:var(--sky-blur); }
  body.gc-skyline .victory-box, body.gc-skyline .gc-pal-box{ border-radius:var(--sky-r-s); }
}
@media (max-width:900px) and (orientation:landscape) and (max-height:500px){
  body.gc-skyline #queue, body.gc-skyline #grid.max-a:not(.ws) #queue{ border-radius:0; background:var(--sky-glass-pane); }
}

/* print: paper and ink, no city */
@media print{
  body.gc-skyline, body.gc-skyline:not(:has(#gc-sky)){ background:var(--paper); }
}

/* a bright sky (dawn and day in the living window, skyline.js sets body.gc-sky-bright): thicker glass, so the
   muted, dim, amber and teal text keeps AA contrast over the light (measured by the contrast suite, 28 Oct 2026) */
html:has(> body.gc-skyline.gc-sky-bright){ --sky-glass:var(--sky-glass-bright); --sky-glass-pane:var(--sky-glass-pane-bright); --sky-tile:var(--sky-tile-bright); }