/* ===========================================================================
 * THE CHROME — on every one of her surfaces, no exceptions.
 *
 *  1. TEXT SIZE. She has asked for this many times and it is not a preference:
 *     reading too much tires one of her eyes, an old injury glasses did not
 *     fix. Bigger text is the difference between usable and not.
 *  2. DAY AND NIGHT. Both are designed. Night is the default because these are
 *     dark-world apps; day is a real design, not an inversion.
 *  3. THE LOGO. Her businesses are separate companies. The logo on the screen
 *     is how she knows which one she is working in.
 * ======================================================================== */

:root{ --scale:1 }

/* Zoom reflows the layout properly, which transform does not. Everything in
   these apps is in px, so this is the one control that scales all of it. */
body{ zoom:var(--scale) }

/* ----------------------------------------------------------- the controls */
.chrome{display:flex;align-items:center;gap:8px;flex:0 0 auto;margin-left:auto}

.chrome .grp{display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  background:var(--on-world,rgba(255,255,255,.14));
  border:1px solid var(--on-world-line,rgba(255,255,255,.24))}

.chrome button{
  min-width:40px;height:40px;padding:0 10px;border:0;border-radius:999px;background:transparent;
  color:inherit;font:inherit;font-weight:700;cursor:pointer;display:grid;place-items:center;
  line-height:1;transition:background .18s}
.chrome button:hover{background:rgba(255,255,255,.16)}
.chrome button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.chrome .sz-s{font-size:.82rem}
.chrome .sz-l{font-size:1.18rem}
.chrome .pct{min-width:52px;font-size:.84rem;font-weight:600;opacity:.75;font-variant-numeric:tabular-nums}
.chrome svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

html[data-theme="day"] .chrome button:hover{background:rgba(10,20,22,.08)}
html[data-theme="day"] .chrome .grp{background:rgba(10,20,22,.05);border-color:rgba(10,20,22,.12)}

/* -------------------------------------------------------------- the logo */
.whose{display:flex;align-items:center;gap:11px;flex:0 0 auto;text-decoration:none;color:inherit}
.whose img{height:38px;width:auto;display:block;flex:0 0 auto}
.whose .who-t{display:flex;flex-direction:column;line-height:1.05;min-width:0}
.whose .who-t b{font-size:.84rem;font-weight:700;letter-spacing:.18em;white-space:nowrap}
.whose .who-t span{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;opacity:.62;white-space:nowrap}
@media (max-width:640px){ .whose .who-t{display:none} .whose .own-mark{height:44px;padding:5px 7px;border-radius:11px} }

/* ------------------------------------------------------------------- DAY
 * A real light design: the dark world becomes a pale one of the same hue,
 * the white glass becomes white cards, and the ink flips. Status colour is
 * darkened so it still passes against white rather than glowing on it. */
html[data-theme="day"]{
  --ink:#0d1a1d;
  --ink-2:rgba(13,26,29,.70);
  --ink-3:rgba(13,26,29,.50);
  --glass:#ffffff;
  --glass-soft:rgba(255,255,255,.80);
  --glass-line:rgba(13,26,29,.10);
  --on-world:rgba(13,26,29,.05);
  --on-world-line:rgba(13,26,29,.12);
  --dark-glass:rgba(13,26,29,.06);
  --ok:#0a8f52; --wait:#9a6a10; --stop:#c22a3a;
  --shadow:0 20px 50px rgba(16,40,50,.12),0 1px 3px rgba(16,40,50,.08);
  --shadow-sm:0 10px 26px rgba(16,40,50,.09),0 1px 2px rgba(16,40,50,.06);
  --go-bg:#0d1a1d; --go-ink:#fff;
}
html[data-theme="day"] body{color:var(--ink)}
/* the world itself: same hue, pale */
html[data-theme="day"][data-hue="ocean"]  {--deep:#eef7f9;--c1:#d6ecf1}
html[data-theme="day"][data-hue="sky"]    {--deep:#edf5fc;--c1:#d4e8f8}
html[data-theme="day"][data-hue="cobalt"] {--deep:#eef1fd;--c1:#dbe2fb}
html[data-theme="day"][data-hue="leaf"]   {--deep:#edf8f3;--c1:#d6efe4}
html[data-theme="day"][data-hue="moss"]   {--deep:#f2f7ea;--c1:#e3eed4}
html[data-theme="day"][data-hue="amber"]  {--deep:#fdf6e9;--c1:#f8ead0}
html[data-theme="day"][data-hue="copper"] {--deep:#fdf2ea;--c1:#f8e2d1}
html[data-theme="day"][data-hue="scarlet"]{--deep:#fdeff0;--c1:#f9dcdd}
html[data-theme="day"] .wm,
html[data-theme="day"] .bar{color:var(--ink)}

@media (prefers-reduced-motion:no-preference){
  html{transition:none}
  body{transition:zoom .12s}
}


/* The logo's wordmark is dark navy — it was drawn for white. A dark bar swallows
   it, so it sits on the white pill that dark interfaces use for exactly this.
   The mark itself is never recoloured or redrawn. */
.whose{display:flex;align-items:center;gap:12px;text-decoration:none}
.whose .own-mark{height:56px;width:auto;background:#fff;border-radius:14px;padding:7px 10px;display:block;
  box-shadow:0 2px 10px rgba(0,0,0,.18)}
html[data-theme="day"] .whose .own-mark{box-shadow:0 1px 4px rgba(10,20,22,.14)}
.whose .who-t span{letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;opacity:.9}