/* Exploration: Swiss layout with instrument readouts (2026-10).
   Self-contained on purpose: nothing here reads app/app.css, and nothing in
   app/ reads this, so trying a direction can never break the app or another
   exploration.

   Palette sampled from art/palette.txt (the owner's and Jimmy's sprites).
   The light page colour is the one unsampled value: nothing in either
   palette is light and neutral enough for a page. */
:root{
  --paper:#F2EEE9;      /* unsampled */
  --ink:#28201E;        /* H  owner's hair */
  --ink2:#56473D;       /* h  owner's hair highlight */
  --mute:#80706A;       /* B  owner's beard */
  --rule-soft:#DEBFAE;  /* s  owner's skin shade */
  --accent:#4B6085;     /* P  owner's jeans: section numbers, current set */
  --btn:#4B6085;        /* P  owner's jeans */
  --btn-ink:#FFFFFF;
  --ok:#5D7958;         /* 1  Jimmy's eye */
  --row-now:#E8E0D8;    /* unsampled: a step darker than the page */
  /* Readouts: a dark instrument panel in both themes */
  --ro-bg:#242426;      /* L  Jimmy's jacket, dark */
  --ro-edge:#2D3246;    /* T  Jimmy's jacket edge */
  --ro-div:#3A3B40;
  --ro-target:#2D3246;  /* T  Jimmy's jacket edge */
  --ro-num:#FEDEA1;     /* K  Jimmy's hair highlight */
  --ro-val:#E6BD85;     /* A  Jimmy's hair */
  --ro-label:#C9AA7F;   /* C  Jimmy's hair shade */
  --ro-ok:#75A673;      /* G  equipment green */
  --flag-bg:#833C37;    /* v  Jimmy's shoes */
  --flag-ink:#F6D3BD;   /* S  owner's skin */

  --f-sans:"Archivo","Helvetica Neue",Helvetica,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#1E1E1E;    /* the ground the owner draws on */
    --ink:#ECE6E0;      /* the app's current dark ink */
    --ink2:#AA9279;     /* D  Jimmy's hair, dark */
    --rule-soft:#3E4353;/* I  iron */
    --accent:#6C9CC4;   /* E  owner's eye: jeans is too dark on black */
    --ok:#75A673;       /* G  equipment green */
    --row-now:#2A2D38;  /* i  iron dark */
    --ro-bg:#2A2D38;    /* i  iron dark: lifted off the page */
    --ro-edge:#3E4353;  /* I  iron */
    --ro-div:#3E4353;
    --ro-target:#3E4868;/* N  owner's jacket, dark edge */
  }
}
:root[data-theme="dark"]{
  --paper:#1E1E1E; --ink:#ECE6E0; --ink2:#AA9279; --rule-soft:#3E4353;
  --accent:#6C9CC4; --ok:#75A673; --row-now:#2A2D38;
  --ro-bg:#2A2D38; --ro-edge:#3E4353; --ro-div:#3E4353; --ro-target:#3E4868;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-sans);
  font-synthesis:none;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
input::placeholder{color:var(--mute)}
.wrap{max-width:430px;margin:0 auto;padding:16px 16px 32px;display:flex;flex-direction:column;gap:20px;min-height:100vh}
.px{image-rendering:pixelated;display:block}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* Sandbox bar: not part of the design, just navigation and the theme switch */
.sandbox{display:flex;justify-content:space-between;align-items:center;gap:8px;
  font:500 12px/1 var(--f-mono);color:var(--mute);padding-bottom:4px}
.sandbox a{text-decoration:underline;text-underline-offset:3px}
.themes{display:flex;border:1px solid var(--mute)}
.themes button{border:0;background:none;min-height:32px;padding:0 10px;color:var(--mute);cursor:pointer}
.themes button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* Labels: Archivo at its condensed width, caps, tracked */
.label{font-size:11px;font-stretch:75%;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.topline{display:flex;justify-content:space-between;border-bottom:2px solid var(--ink);padding-bottom:8px;color:var(--ink)}
.topline .off{color:var(--mute)}

h1{margin:0;font-size:52px;line-height:.9;font-weight:800;font-stretch:88%;letter-spacing:-.03em}
h1.page{font-size:46px}
h2{margin:0;font-weight:800;font-stretch:88%;letter-spacing:-.02em}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.head .sub{font:12px var(--f-mono);color:var(--ink2);margin-top:10px}

/* Readouts */
.ro{background:var(--ro-bg);border:1px solid var(--ro-edge);color:var(--ro-num);font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.ro-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ro-cell{padding:9px 11px;display:flex;flex-direction:column;gap:3px}
.ro-cell+.ro-cell{border-left:1px solid var(--ro-div)}
.ro-cell.target{background:var(--ro-target)}
.ro-k{font-family:var(--f-sans);font-stretch:70%;font-weight:600;font-size:11px;letter-spacing:.14em;color:var(--ro-label)}
.ro-cell.target .ro-k{color:var(--ro-num)}
.ro-v{font-size:18px;color:var(--ro-val)}
.ro-cell.target .ro-v{color:var(--ro-num);font-weight:500}
.ro-big{font-size:26px;font-weight:500;color:var(--ro-num)}
.ro-big.ok{color:var(--ro-ok)}
.ro-foot{border-top:1px solid var(--ro-div);padding:7px 11px;font-size:11px;color:var(--ro-label)}
.ro-list{border-top:1px solid var(--ro-div);padding:10px 11px;font-size:12px;line-height:1.7}
.ro-list dl{display:grid;grid-template-columns:1fr auto;column-gap:12px;margin:0}
.ro-list dt{color:var(--ro-val)}
.ro-list dd{margin:0}
.flag{align-self:flex-start;font-size:10px;padding:1px 5px;background:var(--flag-bg);color:var(--flag-ink)}
.chip{font:12px var(--f-mono);padding:4px 8px;background:var(--ro-bg);border:1px solid var(--ro-edge);color:var(--ro-val);white-space:nowrap}

/* Home nav: numbered Swiss rows */
.nav{display:flex;flex-direction:column;border-top:2px solid var(--ink)}
.nav a{display:grid;grid-template-columns:40px 34px 1fr auto;align-items:center;min-height:52px;padding:8px 0;border-bottom:1px solid var(--rule-soft)}
.nav a .n{font-size:12px;color:var(--ink2)}
.nav a .t{font-size:18px;font-weight:600}
.nav a .x{font:12px var(--f-mono);color:var(--ok)}
.nav a.lead{min-height:64px;padding:14px 0;border-bottom-color:var(--ink)}
.nav a.lead .n,.nav a.lead .x{color:var(--accent);font-weight:700}
.nav a.lead .t{font-size:25px;font-weight:800;font-stretch:88%;letter-spacing:-.02em}
.nav a.lead .x{font:20px var(--f-sans)}

/* Home header animation (same sprites and timing as app/app.css) */
.stage{position:relative;width:158px;height:144px;padding:0;border:0;background:none;flex:0 0 auto}
.runner{position:absolute;left:30px;bottom:0;width:128px;height:140px;
  background:url(../sprites/run_strip.svg) 0 0/1024px 140px no-repeat;image-rendering:pixelated}
.duck{position:absolute;left:0;bottom:0;width:84px;height:144px;
  background:url(../sprites/duck_strip.svg) -168px 0/2436px 144px no-repeat;image-rendering:pixelated}
@media (prefers-reduced-motion:no-preference){
  .runner{animation:run .8s steps(8) infinite}
  @keyframes run{to{background-position:-1024px 0}}
}

/* Form */
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:12px;row-gap:14px}
.span2{grid-column:span 2}.span4{grid-column:span 4}
.field{display:flex;flex-direction:column;gap:2px}
.field input{border:0;border-bottom:1px solid var(--ink);background:transparent;padding:6px 0;
  font-size:17px;font-weight:500;min-height:44px;width:100%;border-radius:0;
  /* the label wraps the input, so undo its caps and condensed width */
  color:var(--ink);font-stretch:100%;text-transform:none;letter-spacing:0}
.field input.num{font-size:16px;font-weight:400}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--ink)}
.seg button{min-height:44px;border:0;background:transparent;font-size:15px;font-weight:500;cursor:pointer}
.seg button+button{border-left:1px solid var(--ink)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper);font-weight:700}

/* Exercise */
.ex{border-top:2px solid var(--ink);padding-top:12px;display:flex;flex-direction:column;gap:12px}
.ex-head{display:grid;grid-template-columns:36px 1fr auto;align-items:baseline;column-gap:8px}
.ex-head .n{font-size:12px;font-weight:700;color:var(--accent)}
.ex-head h2{font-size:24px;line-height:1.05}
.quiet{border:0;background:none;color:var(--ink2);font-size:12px;min-height:44px;cursor:pointer}
.sets{display:flex;flex-direction:column;border-top:1px solid var(--ink)}
.set{display:grid;grid-template-columns:36px 1fr 1fr 1fr;align-items:center;min-height:48px;border-bottom:1px solid var(--rule-soft)}
.set.hdr{min-height:0;padding:6px 0}
.set .w,.set .r{font:500 22px var(--f-mono);font-variant-numeric:tabular-nums}
.set .i{font:12px var(--f-mono)}
.set .note{font-size:12px}
.set.warm{color:var(--mute)}
.set.warm .w,.set.warm .r{font-size:20px;font-weight:400}
.set.now{background:var(--row-now);border-bottom-color:var(--ink)}
.set.now .i{color:var(--accent);font-weight:500}
.set.now .w span{border-bottom:2px solid var(--accent)}
.set.now .r{color:var(--mute)}
.add{align-self:flex-start;border:0;background:none;padding:0;min-height:44px;font-size:15px;font-weight:700;cursor:pointer}
.cue{display:grid;grid-template-columns:36px 1fr;font-size:13px;line-height:1.5;color:var(--ink2)}
.ex.folded{display:grid;grid-template-columns:36px 1fr auto;align-items:center;column-gap:8px}
.ex.folded .n{font-size:12px;font-weight:700;color:var(--ink2)}
.ex.folded h2{font-size:20px}
.ex.folded.thin{border-top-width:1px;border-top-color:var(--rule-soft)}

.primary{min-height:56px;border:0;background:var(--btn);color:var(--btn-ink);font-size:18px;font-weight:700;
  text-align:left;padding:0 16px;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.link{border:0;background:none;padding:0;min-height:44px;text-align:left;font-size:15px;font-weight:500;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.spacer{flex-grow:1}
footer.small{font-size:11px;font-stretch:80%;line-height:1.5;color:var(--ink2);display:flex;justify-content:space-between;gap:12px}
.dot{display:inline-block;width:7px;height:7px;background:var(--ok);margin-right:6px}

/* Style tile */
.tile-sec{border-top:2px solid var(--ink);padding-top:10px;display:flex;flex-direction:column;gap:12px}
.swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sw{display:grid;grid-template-columns:40px 1fr;gap:10px;align-items:center;font-size:12px;line-height:1.3}
.sw i{display:block;width:40px;height:40px;border:1px solid var(--rule-soft)}
.sw b{display:block;font:500 12px var(--f-mono)}
.sw span{color:var(--ink2)}
.spec{display:flex;flex-direction:column;gap:4px}
.spec small{font:11px var(--f-mono);color:var(--mute)}
.icons{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap}
.questions{margin:0;padding-left:20px;font-size:15px;line-height:1.5}
.questions li+li{margin-top:6px}

/* Display face: Tiny5, the app's current pixel font, on the same roles it has
   in app/app.css (page titles, Home rows, exercise names, the action button),
   so the pixel art and the type share one grain. One weight: never bold it.
   "Grotesk" in the sandbox bar switches back to Archivo for comparison; with
   no script, pixel is what shows. */
:root{--f-disp:"Tiny5",ui-monospace,Menlo,monospace}
:root:not([data-disp="grotesk"]) :is(h1,h2,.nav a .t,.primary){
  font-family:var(--f-disp);font-weight:400;font-stretch:100%;letter-spacing:0;text-transform:uppercase}
:root:not([data-disp="grotesk"]) h1{font-size:36px;line-height:1}
:root:not([data-disp="grotesk"]) h1.page{font-size:36px}
:root:not([data-disp="grotesk"]) .ex-head h2{font-size:22px;line-height:1.1}
:root:not([data-disp="grotesk"]) .ex.folded h2{font-size:18px}
:root:not([data-disp="grotesk"]) .nav a .t{font-size:18px;line-height:1.1}
:root:not([data-disp="grotesk"]) .nav a.lead .t{font-size:22px}
:root:not([data-disp="grotesk"]) .primary{font-size:20px}
.sandbox{flex-wrap:wrap}
.switches{display:flex;gap:6px;flex-wrap:wrap}