/* =====================================================================================
   WHATSMYBIZ / ORION269 - ONE DESIGN SYSTEM
   =====================================================================================
   Taken from play.whatsmybiz.app, which Graham named the source of truth on 2026-11-01:
   "THAT IS OUR NEW CSS FOR ALL websites using whatsmybiz.app".

   Two brands, one set of rules:
     data-brand="whatsmybiz"  -> orange and black, OpenDyslexic (the default)
     data-brand="orion"       -> green, black and white

   Nothing in this file holds a colour outside the two token blocks below, so a brand change
   is a change to one block and never a hunt through components.

   House rules: ASCII only, no emojis, no third-party CSS, no CDN, nothing to download
   except the two font files that sit next to this stylesheet.
   ===================================================================================== */

/* --- the typeface: OpenDyslexic, the same face the quiz uses ---------------------------- */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('fonts/OpenDyslexic-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('fonts/OpenDyslexic-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- WhatsMyBiz.App: orange and black --------------------------------------------------- */
:root,
[data-brand="whatsmybiz"] {
  --brand-name: 'WhatsMyBiz.App';

  --bg: #0c0c0c;
  --bg-raised: #171717;
  --bg-sunken: #050505;
  --surface: #171717;
  --surface-2: #1f1f1f;

  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.28);

  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.62);
  --text-dim: rgba(255, 255, 255, 0.38);

  --accent: #ff6c01;          /* the owner's orange, from the mockups */
  --accent-soft: #ffa640;
  --accent-pale: #ffd479;
  --accent-ink: #000000;      /* text on top of the accent: black on orange */
  --info: #7fd6c8;

  --right: #14b8a6;
  --wrong: #e5484d;

  --font: 'OpenDyslexic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --step-1: 0.82rem;
  --step-2: 0.95rem;
  --step-3: 1.15rem;
  --step-4: 1.4rem;
  --step-5: 1.9rem;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.45);
  --focus: 0 0 0 3px rgba(255, 108, 1, 0.55);
}

/* --- ORION Dev Core: green, black and white -------------------------------------------- */
[data-brand="orion"] {
  --brand-name: 'ORION Dev Core';

  --bg: #07100b;
  --bg-raised: #0d1a12;
  --bg-sunken: #030705;
  --surface: #0d1a12;
  --surface-2: #13241a;

  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.30);

  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.66);
  --text-dim: rgba(255, 255, 255, 0.40);

  --accent: #22c55e;
  --accent-soft: #4ade80;
  --accent-pale: #86efac;
  --accent-ink: #04140a;
  --info: #67e8f9;

  --right: #22c55e;
  --wrong: #f87171;

  --focus: 0 0 0 3px rgba(34, 197, 94, 0.55);
}

/* =====================================================================================
   STRUCTURE - identical for both brands
   ===================================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  padding: 16px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

h1, h2, h3, h4 { margin: 0 0 0.4em; line-height: 1.25; font-weight: 700; }
h1 { font-size: var(--step-4); letter-spacing: 0.01em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
p { margin: 0 0 0.8em; }
small, .small { font-size: var(--step-1); }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-soft); }
strong { font-weight: 700; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }

/* a container that does not stretch on a desktop */
.wrap { width: 100%; max-width: 960px; margin: 0 auto; }
.wrap-narrow { width: 100%; max-width: 640px; margin: 0 auto; }

/* --- the header, the same on every site ------------------------------------------------ */
.site-header {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 22px;
}
.site-header .brand {
  font-weight: 700; font-size: var(--step-3); color: var(--text); text-decoration: none;
  letter-spacing: 0.02em;
}
.site-header .brand span { color: var(--accent); }
.site-header nav { display: flex; gap: 16px; margin-left: auto; flex-wrap: wrap; }
.site-header nav a { color: var(--text-muted); text-decoration: none; font-size: var(--step-2); }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { color: var(--accent); }

.site-footer {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--text-dim); font-size: var(--step-1);
}
.site-footer a { color: var(--text-muted); }

/* --- buttons: the thing to press is solid, everything else is quiet -------------------- */
button, .btn {
  font: inherit; font-weight: 700; cursor: pointer;
  min-height: 52px; padding: 12px 22px;
  color: var(--accent-ink); background: var(--accent);
  border: 2px solid var(--accent); border-radius: var(--radius-pill);
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 0.06s ease, filter 0.12s ease;
}
button:hover, .btn:hover { filter: brightness(1.08); color: var(--accent-ink); }
button:active, .btn:active { transform: translateY(1px); }
button:disabled, .btn:disabled {
  background: transparent; color: var(--text-dim); border-color: var(--line); cursor: not-allowed;
}
.btn-quiet {
  background: transparent; color: var(--text); border-color: var(--line-strong);
}
.btn-quiet:hover { color: var(--accent); border-color: var(--accent); }
.btn-danger { background: transparent; color: var(--wrong); border-color: var(--wrong); }

/* --- cards and panels ---------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-1);
}
.card h2, .card h3 { margin-top: 0; }
.card-accent { border-left: 4px solid var(--accent); }

/* --- forms ---------------------------------------------------------------------------- */
label { display: block; font-size: var(--step-2); color: var(--text-muted); margin: 0 0 6px; }
input, select, textarea {
  font: inherit; width: 100%; min-height: 50px; padding: 12px 14px;
  color: var(--text); background: var(--bg-sunken);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--focus); outline: none; }
input::placeholder { color: var(--text-dim); }

/* --- tables --------------------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: var(--step-2); }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { color: var(--text-muted); font-size: var(--step-1); text-transform: uppercase; letter-spacing: 0.08em; }

/* --- badges, pills and notices -------------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--text-muted);
  font-size: var(--step-1); border: 1px solid var(--line);
}
.pill-accent { background: transparent; color: var(--accent); border-color: var(--accent); }
.notice {
  border-left: 4px solid var(--accent); background: var(--surface);
  padding: 12px 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 0 0 16px;
}
.notice-bad { border-left-color: var(--wrong); }
.notice-good { border-left-color: var(--right); }

/* --- the marked answer, carried over from the quiz ------------------------------------ */
.answer-correct { color: var(--accent); font-weight: 700; }
.answer-wrong { color: var(--text-muted); }

/* --- utility -------------------------------------------------------------------------- */
.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.center { text-align: center; }
.stack > * + * { margin-top: 14px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.grow { flex: 1 1 auto; }
.mono { font-family: var(--font-mono); }

/* =====================================================================================
   STATUS - the same meaning on every site, whatever the brand colour is
   =====================================================================================
   Graham, 2026-11-01: "Orange = Arrival - Green = answered, selected, completed, done, go".
   So status is a SECOND scale, not the brand accent. A WhatsMyBiz page is orange AND uses green
   for "done"; an ORION page is green AND uses the same green for "done". That works because the
   accent is for navigation and identity, and status is for what just happened.

   COLOUR IS NEVER THE ONLY SIGNAL. Orange and green are the textbook red-green colour blindness
   pair: to a deuteranope they differ in lightness, not in hue, and lightness alone is a weak
   signal at small sizes. Every state therefore ships with a word or an icon as well - .state
   adds a left rule AND expects the markup to say the word ("Arrived", "Done", "Failed").
   ===================================================================================== */
:root, [data-brand] {
  --state-arrive: #ff6c01;   /* arrived, new, waiting for you, needs a decision */
  --state-done:   #22c55e;   /* answered, selected, completed, done, go */
  --state-info:   #7fd6c8;   /* neutral information */
  --state-warn:   #ffb02e;   /* careful, but not broken */
  --state-bad:    #e5484d;   /* failed, refused, wrong */
}

.state {
  display: block; padding: 10px 14px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  border-left: 5px solid var(--line-strong); background: var(--surface); margin: 0 0 12px;
}
.state .state-word { font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: var(--step-1); }

.state-arrive { border-left-color: var(--state-arrive); }
.state-arrive .state-word { color: var(--state-arrive); }
.state-done { border-left-color: var(--state-done); }
.state-done .state-word { color: var(--state-done); }
.state-info { border-left-color: var(--state-info); }
.state-info .state-word { color: var(--state-info); }
.state-warn { border-left-color: var(--state-warn); }
.state-warn .state-word { color: var(--state-warn); }
.state-bad { border-left-color: var(--state-bad); }
.state-bad .state-word { color: var(--state-bad); }

/* a dot that carries its meaning with a tick, a cross or a dash - never colour alone */
.state-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; }
.state-arrive .state-dot { background: var(--state-arrive); }
.state-done .state-dot { background: var(--state-done); }

/* --- print ---------------------------------------------------------------------------- */
@media print {
  .state { border-left-width: 4px; }
}

/* --- print: any page on either site prints like a document ---------------------------- */
@media print {
  :root, [data-brand] {
    --bg: #fff; --surface: #fff; --text: #000; --text-muted: #333; --text-dim: #555;
    --line: #ccc; --line-strong: #999; --accent-ink: #000;
  }
  body { background: #fff; color: #000; padding: 0; }
  .site-header nav, button, .btn, .no-print { display: none !important; }
  a { color: #000; text-decoration: underline; }
  .card, .notice { border-color: #bbb; box-shadow: none; }
}