/* ---------------------------------------------------------------------------
   Munro Assembly Studio — shared theme tokens.

   Every page links this first, then styles itself only in terms of these
   variables. Dark (Signal Yellow on near-black) stays the brand default;
   `data-theme="light"` on <html> swaps the surfaces for the shop-floor
   light mode. theme.js sets that attribute before first paint.
   --------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #0a0a0a;              /* page / sunken (inputs) */
  --bg2: #141414;             /* panels, header, cards */
  --bg3: #1e1e1e;             /* raised: buttons, chips, rows */
  --border: #2e2e2e;
  --border-soft: #232323;     /* table rules */
  --border-strong: #3a3a3a;

  /* ink */
  --text: #ffffff;
  --text-soft: #dddddd;
  --text-dim: #9a9a9a;
  --text-faint: #6a6a6a;
  --text-faintest: #3a3a3a;   /* zero / placeholder digits */

  /* Signal Yellow */
  --accent: #f9a800;          /* fills — brand yellow, never changes */
  --accent-text: #f9a800;     /* accent used as text/icon on a surface */
  --accent-ink: #111111;      /* text on a Signal Yellow fill */
  --accent-ink-dim: #5a4200;  /* secondary text on a Signal Yellow fill */
  --accent-dim: #a87200;      /* hover borders, accent hairlines */
  --accent-hover: #fff33f;
  --accent-soft: rgba(249, 168, 0, 0.12);
  --accent-tint: #2a220c;     /* selected row wash */
  --accent-tint-2: #3a2c0a;
  --accent-tint-3: #1b1710;
  --accent-tint-4: #100d06;

  /* status — red */
  --red: #e2231a;
  --red-text: #ff7069;
  --red-border: #7a1511;
  --red-border-2: #5a1512;
  --red-soft: #3a1616;
  --red-tint: #170c0b;
  --red-tint-2: #1c0b0a;

  /* status — green */
  --green: #3ddc84;
  --green-text: #8fd8ae;
  --green-border: #1e6b42;
  --green-border-2: #4e8a67;
  --green-soft: #163a26;
  --green-tint: #123521;
  --green-tint-2: #0d1a12;

  /* status — amber / blue / purple / neutral */
  --orange: #f9a800;
  --orange-soft: #3a3116;
  --blue: #4dabff;
  --blue-border: #2b5f8e;
  --blue-soft: #16303a;
  --purple: #c88cff;
  --purple-border: #6b4b8e;
  --purple-soft: rgba(200, 140, 255, 0.12);
  --neutral-text: #c8c8c8;
  --neutral-border: #4a4a4a;
  --neutral-soft: rgba(154, 154, 154, 0.14);

  /* scene */
  --viewport-bg: #0d0e11;
  --media-bg: #000000;        /* video / render letterbox — black in both themes */
  --overlay: rgba(0, 0, 0, 0.75);
  --shadow: rgba(0, 0, 0, 0.5);
  --hud-bg: rgba(20, 22, 26, 0.9);       /* floating viewport controls */
  --hud-shadow: #000000;
  --label-bg: rgba(10, 10, 10, 0.88);    /* CAD callout labels */
  --red-banner: rgba(226, 35, 26, 0.92); /* clash banner */
  --on-danger: #ffffff;       /* text on a solid red fill — white in both themes */
}

:root[data-theme='light'] {
  color-scheme: light;

  --bg: #ffffff;
  --bg2: #f6f6f3;
  --bg3: #ecebe6;
  --border: #d7d6d0;
  --border-soft: #e6e5df;
  --border-strong: #bdbcb5;

  --text: #16160f;
  --text-soft: #33332c;
  --text-dim: #63635b;
  --text-faint: #7d7d74;
  --text-faintest: #c2c2ba;

  --accent: #f9a800;
  --accent-text: #8a5b00;
  --accent-ink: #111111;
  --accent-ink-dim: #5a4200;
  --accent-dim: #c08c14;
  --accent-hover: #ffc02e;
  --accent-soft: rgba(249, 168, 0, 0.18);
  --accent-tint: #fbeec2;
  --accent-tint-2: #f8e4a6;
  --accent-tint-3: #fdf5e2;
  --accent-tint-4: #fefaef;

  --red: #c31810;
  --red-text: #ab140d;
  --red-border: #e3a49f;
  --red-border-2: #eab9b5;
  --red-soft: #fbe3e1;
  --red-tint: #fdeeec;
  --red-tint-2: #fdefed;

  --green: #0f7a49;
  --green-text: #14663f;
  --green-border: #9ad5b7;
  --green-border-2: #74b997;
  --green-soft: #ddf3e8;
  --green-tint: #e6f7ee;
  --green-tint-2: #eefaf3;

  --orange: #a35c00;
  --orange-soft: #fbecc8;
  --blue: #1668c4;
  --blue-border: #a6c9ef;
  --blue-soft: #dfebfa;
  --purple: #6b3fa0;
  --purple-border: #c8ade6;
  --purple-soft: #f0e6fb;
  --neutral-text: #4a4a44;
  --neutral-border: #c6c6bf;
  --neutral-soft: rgba(99, 99, 92, 0.12);

  --viewport-bg: #eceef1;
  --media-bg: #000000;
  --overlay: rgba(28, 28, 22, 0.42);
  --shadow: rgba(20, 20, 15, 0.16);
  --hud-bg: rgba(255, 255, 255, 0.92);
  --hud-shadow: rgba(255, 255, 255, 0.9);
  --label-bg: rgba(255, 255, 255, 0.94);
  --red-banner: #c31810;
  --on-danger: #ffffff;
}

/* ---------- theme toggle (injected by theme.js) ---------- */
/* Pages style bare `button`, so every box property is stated here explicitly. */
.theme-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  margin: 0;
  box-shadow: none;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 999px;
  padding: 4px 11px;
  font: inherit;
  font-size: 12px;
  line-height: 1.6;
  cursor: pointer;
  white-space: nowrap;
}
.theme-toggle:hover {
  color: var(--text);
  border-color: var(--accent-dim);
}
.theme-toggle .theme-toggle-icon { display: inline-flex; align-items: center; }
.theme-toggle .theme-toggle-icon svg { display: block; }
header > .theme-toggle { margin-left: 10px; }
.theme-toggle.floating {
  position: fixed;
  top: 12px;
  right: 14px;
  z-index: 90;
  box-shadow: 0 2px 10px var(--shadow);
}

@media print {
  .theme-toggle { display: none !important; }
}

/* ---------------------------------------------------------------------------
   MunroOS tool chrome (shell.js): only under a MunroOS tile path, where <html>
   carries .munroos. The bar, the home mark, the hairline, the veil and pull to
   refresh are MunroOS-ToolStarter's chrome (app/globals.css), with its --mos-
   tokens: the same near-black bar in every tool, whatever the page's own theme,
   and a Signal Yellow home mark and veil because they belong to the tray. The
   tab strip under the hairline is the tool's own and follows the page theme.
   --munroos-shell-h is the full height above the page (bar, its rule, the
   hairline, the strip), for pages that fill the window (the Studio).
   --------------------------------------------------------------------------- */
html.munroos {
  --mos-ink: #0A0A0A;
  --mos-plate: #161616;
  --mos-line: rgba(255, 255, 255, .09);
  --mos-line-hi: rgba(255, 255, 255, .18);
  --mos-w-70: rgba(255, 255, 255, .70);
  --mos-w-28: rgba(255, 255, 255, .28);
  --mos-yellow: #F9A800;
  /* the tool's accent: Signal Yellow on all three tiles */
  --mos-accent: #F9A800;
  --munroos-shell-h: 92px; /* bar 52 + hairline 2 + strip 38, rules inside */
}
html.munroos.munroos-notabs { --munroos-shell-h: 54px; }

.munroos-bar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 16px;
  background: var(--mos-ink);
  border-bottom: 1px solid var(--mos-line);
  color: #fff;
  color-scheme: dark;
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: 13px;
  line-height: 1.25;
}
.munroos-bar :focus-visible { outline: 2px solid var(--mos-yellow); outline-offset: 3px; }
.munroos-bar__mark {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(249, 168, 0, .13);
  border: 1px solid rgba(249, 168, 0, .4);
  display: grid;
  place-items: center;
}
.munroos-bar__mark img { width: 19px; height: auto; display: block; }
.munroos-bar__title { display: flex; flex-direction: column; min-width: 0; }
.munroos-bar__name,
.munroos-bar__context { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.munroos-bar__name {
  font-family: 'Bai Jamjuree', sans-serif;
  font-size: 14px;
  font-weight: 600;
}
.munroos-bar__context { font-size: 10.5px; color: var(--mos-w-28); }
.munroos-accent { height: 2px; background: var(--mos-accent); }

.munroos-tabs {
  box-sizing: border-box;
  display: flex;
  height: 38px;
  padding: 0 8px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
  font-size: 13px;
}
.munroos-tabs__tab {
  display: flex;
  align-items: center;
  padding: 0 12px;
  color: var(--text-dim);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px; /* the current tab's rule sits on the strip's rule */
}
.munroos-tabs__tab:hover { color: var(--text); }
.munroos-tabs__tab[aria-current='page'] { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.munroos-tabs__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Leaving for the tray is a full page load, so the tap covers this page at once. */
.munroos-veil {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--mos-ink);
  display: grid;
  place-content: center;
  justify-items: center;
  animation: munroos-veil-in 0.18s ease-out;
}
.munroos-veil__spinner { width: 46px; height: 42px; overflow: visible; }
.munroos-veil__spinner path,
.munroos-pull path { fill: none; stroke-width: 3.5; stroke-linecap: round; }
.munroos-veil__spinner .track,
.munroos-pull .track { stroke: var(--mos-line-hi); }
.munroos-veil__spinner .arc { stroke: var(--mos-yellow); }
.munroos-pull .arc { stroke: var(--mos-accent); }
.munroos-veil__spinner .arc,
.munroos-pull.busy .arc { stroke-dasharray: 0.3 0.7; animation: munroos-trace 1.2s linear infinite; }
.munroos-veil p {
  margin-top: 16px;
  font-family: 'Bai Jamjuree', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mos-w-70);
}

/* Pull to refresh, installed app only, in the tool accent. */
.munroos-pull {
  position: fixed;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 990;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mos-plate);
  border: 1px solid var(--mos-line-hi);
  display: grid;
  place-items: center;
}
.munroos-pull svg { width: 22px; height: 20px; overflow: visible; }

/* the tile's tabs replace the pages' own "← home" links */
html.munroos .home-link { display: none; }

@keyframes munroos-trace { to { stroke-dashoffset: -1; } }
@keyframes munroos-veil-in { from { opacity: 0; } to { opacity: 1; } }

/* phone widths: 44px tabs for a gloved thumb */
@media (max-width: 767px) {
  html.munroos { --munroos-shell-h: 98px; }
  html.munroos.munroos-notabs { --munroos-shell-h: 54px; }
  .munroos-tabs { height: 44px; padding: 0 4px; }
  .munroos-tabs__tab { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .munroos-veil { animation: none; }
  .munroos-veil__spinner .arc,
  .munroos-pull.busy .arc { stroke-dasharray: 1 0; animation: munroos-fade 1.6s ease-in-out infinite alternate; }
  @keyframes munroos-fade { from { opacity: 0.3; } to { opacity: 1; } }
}
@media print {
  .munroos-bar, .munroos-accent, .munroos-tabs, .munroos-veil, .munroos-pull { display: none !important; }
}