/* Utilitarian: a second look for Today's Workout (owner, 2026-10-28), picked
   with the Style button at the foot of that page (app/lib/style.js, key
   skin-v1). Ported from the design sandbox's 2026-10-utilitarian: instrument
   panel, amber accent, monospaced readouts, condensed caps labels,
   function-key buttons. The sandbox is dark only; the light palette here is
   new.

   It layers over Swiss, not instead of it: the page keeps
   data-style="swiss" and gains data-skin="utilitarian", so every Swiss
   layout rule, fold default and line of text still holds, and this sheet
   re-sets Swiss's colour and type tokens plus a few character rules.
   Every rule is scoped to :root[data-style="swiss"][data-skin="utilitarian"]
   (tests/test_utilitarian_css.py). Dark comes twice, like swiss.css; the two
   copies stay identical.

   Fonts: IBM Plex Mono (already on the page's font link) and Barlow
   Condensed, imported here because tools/tokens.py owns that link; both are
   on legal/provenance.csv. */
@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600&display=swap");

/* -- palette: Swiss's colour tokens, re-set -- */
:root[data-style="swiss"][data-skin="utilitarian"]{
  color-scheme:light;
  --paper:#ECEDE6; --panel:#ECEDE6; --panel2:#F6F7F2;
  --ink:#151714; --ink2:#50574D; --rule:#A9AFA4; --rule2:#CDD1C8;
  --shade:transparent;
  --steel:#8A5300; --moss:#3E6B2F; --ochre:#8A5300; --signal:#8A5300;
  --accent:#8A5300; --swiss-mute:#737A70;
  --swiss-btn:#F0A800; --swiss-on-btn:#151714; --swiss-sheet:#F6F7F2;
  --swiss-effort:#8A5300; --swiss-danger:#B3361A;
  --util-press:#F3E2B8; --util-on-danger:#FFFFFF;
}
@media (prefers-color-scheme:dark){
  :root[data-style="swiss"][data-skin="utilitarian"]:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#111311; --panel:#111311; --panel2:#1A1E1A;
    --ink:#D9DDD3; --ink2:#8A9186; --rule:#3A403A; --rule2:#2C312C;
    --shade:transparent;
    --steel:#FFB000; --moss:#7FBF6A; --ochre:#FFB000; --signal:#FFB000;
    --accent:#FFB000; --swiss-mute:#6B7268;
    --swiss-btn:#FFB000; --swiss-on-btn:#111311; --swiss-sheet:#1A1E1A;
    --swiss-effort:#FFB000; --swiss-danger:#FF6B4A;
    --util-press:#2A2310; --util-on-danger:#111311;
  }
}
:root[data-style="swiss"][data-skin="utilitarian"][data-theme="dark"]{
    color-scheme:dark;
    --paper:#111311; --panel:#111311; --panel2:#1A1E1A;
    --ink:#D9DDD3; --ink2:#8A9186; --rule:#3A403A; --rule2:#2C312C;
    --shade:transparent;
    --steel:#FFB000; --moss:#7FBF6A; --ochre:#FFB000; --signal:#FFB000;
    --accent:#FFB000; --swiss-mute:#6B7268;
    --swiss-btn:#FFB000; --swiss-on-btn:#111311; --swiss-sheet:#1A1E1A;
    --swiss-effort:#FFB000; --swiss-danger:#FF6B4A;
    --util-press:#2A2310; --util-on-danger:#111311;
}

/* -- type: mono for everything you read, condensed caps for labels -- */
:root[data-style="swiss"][data-skin="utilitarian"]{
  --body:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --disp:"Barlow Condensed","Arial Narrow",sans-serif;
  --util-label:"Barlow Condensed","Arial Narrow",sans-serif;
  --fw-disp:600;
  --ls-flat:.02em; --ls-head:.04em;
}
:root[data-style="swiss"][data-skin="utilitarian"] body{font-size:15px}
:root[data-style="swiss"][data-skin="utilitarian"] :is(h1,h2,h3){font-family:var(--disp);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase}
:root[data-style="swiss"][data-skin="utilitarian"] h1.page{line-height:.95}

/* Labels, the back link, section heads and folds: condensed caps. */
:root[data-style="swiss"][data-skin="utilitarian"] :is(.back,.field > label,.field > .lbl,.wk-mini,
  .wk-recent > summary,.wk-notes > summary,.wk-summary > summary,.wk-fold > summary,.wk-hist > summary,.wk-pain > summary,
  .wk-setlabel,.wk-setline .wk-tag:first-child,.wk-review h2){
  font-family:var(--util-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase}
:root[data-style="swiss"][data-skin="utilitarian"] .back{color:var(--ink2)}

/* Function keys: separate keys with a gap, amber when on. */
:root[data-style="swiss"][data-skin="utilitarian"] .seg{border:0;gap:6px;overflow:visible}
:root[data-style="swiss"][data-skin="utilitarian"] .seg button{border:1px solid var(--rule);border-radius:0;
  font-family:var(--util-label);font-weight:600;letter-spacing:.03em;text-transform:uppercase}
:root[data-style="swiss"][data-skin="utilitarian"] .seg button[aria-pressed="true"]{border-color:var(--accent);
  background:var(--util-press);color:var(--accent)}
:root[data-style="swiss"][data-skin="utilitarian"] .wk-tag{font-family:var(--util-label);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;border-color:var(--rule)}
:root[data-style="swiss"][data-skin="utilitarian"] .wk-tag[aria-pressed=true]{background:var(--util-press)}

/* Buttons: caps keys. Save is the one solid amber block; Clear keeps its
   danger colour, white text in light and dark text in dark (AA in both). */
:root[data-style="swiss"][data-skin="utilitarian"] button.act{font-family:var(--util-label);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase}
:root[data-style="swiss"][data-skin="utilitarian"] .wk-page button.act.wk-danger{color:var(--util-on-danger)}
:root[data-style="swiss"][data-skin="utilitarian"] input.add-search{font-family:var(--util-label);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;border-color:var(--accent)}
:root[data-style="swiss"][data-skin="utilitarian"] input.add-search::placeholder{color:var(--accent)}

/* Inputs: a focus ring in amber. */
:root[data-style="swiss"][data-skin="utilitarian"] :is(input,select,textarea):focus{outline:1px solid var(--accent);outline-offset:-1px}

/* The variant line under an exercise name and a fold's peek keep normal
   case: the text matches Swiss ("lb", not "LB"), and a folded name and its
   set count still fit on one line (owner, 2026-10-24). */
:root[data-style="swiss"][data-skin="utilitarian"] :is(.wk-variant,.wk-peek){font-family:var(--util-label);font-weight:500;
  letter-spacing:.02em;text-transform:none}