/* DashCal Hub mockups: tokens copied from src/CalibrationCertificates/Helpers/ThemeApplicator.cs (the palettes the
   desktop app applies on top of Themes/Base.axaml + Controls.axaml). Dark is the designed look; light is derived from
   the same tokens. Sizes follow Controls.axaml: Section caps 10.5/600/0.08em, Hint 11.5-12, rows 13, page title 18. */

:root {
  --bg: #17181A; --rail: #141517; --pane: #1C1D20; --surface: #202124; --line: #2D2E32; --hairline: rgba(45, 46, 50, .55);
  --input-bg: #26272B; --input-border: #3A3B40; --input-hover: #515258;
  --button: #2C2D31; --button-hover: #37383D;
  --text: #EBEBED; --text2: #A5A6AB; --text3: #6F7076;
  --accent: #E65100; --accent-hover: #FF6D00; --accent-soft: rgba(230, 81, 0, .20); --accent-text: #FF9A57;
  --ok: #5CB85F; --ok-soft: rgba(92, 184, 95, .14); --warn: #F0A63A; --warn-soft: rgba(240, 166, 58, .13); --bad: #EF5B57; --bad-soft: rgba(239, 91, 87, .15);
  --grid: rgba(255, 255, 255, .035); --grid-strong: rgba(255, 255, 255, .06); --shadow: 0 18px 50px rgba(0, 0, 0, .45);
  --font: "Inter Variable", "Inter", "Segoe UI", sans-serif;
  --mono: "DejaVu Sans Mono", "Cascadia Mono", ui-monospace, monospace;
  --r-sm: 4px; --r: 6px; --r-lg: 10px;
  color-scheme: dark;
}
html.light {
  --bg: #F3F3F1; --rail: #FAFAF9; --pane: #F8F8F6; --surface: #FFFFFF; --line: #E3E2DF; --hairline: rgba(227, 226, 223, .85);
  --input-bg: #FFFFFF; --input-border: #D3D1CD; --input-hover: #B2AFAA;
  --button: #ECEBE8; --button-hover: #E0DEDA;
  --text: #1D1C1B; --text2: #5B5753; --text3: #8E8984;
  --accent: #E65100; --accent-hover: #FF6D00; --accent-soft: rgba(230, 81, 0, .09); --accent-text: #C04300;
  --ok: #2B8A3E; --ok-soft: rgba(43, 138, 62, .10); --warn: #B26A00; --warn-soft: rgba(178, 106, 0, .11); --bad: #C92A2A; --bad-soft: rgba(201, 42, 42, .08);
  --grid: rgba(29, 28, 27, .045); --grid-strong: rgba(29, 28, 27, .07); --shadow: 0 18px 50px rgba(60, 50, 40, .14);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--text); font: 13.5px/1.45 var(--font); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

/* Type */
.caps { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
.hint { font-size: 12px; color: var(--text3); }
.sub { color: var(--text2); }
.mono { font-family: var(--mono); font-size: 12px; }
.page-title { font-size: 20px; font-weight: 650; letter-spacing: -.01em; }

/* Controls (Controls.axaml: Button 28px min / 12.5; primary = accent; ghost; link = AccentText) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: var(--r-sm);
  border: 0; background: var(--button); color: var(--text); font: 600 13px var(--font); cursor: pointer; white-space: nowrap; }
.btn:hover { background: var(--button-hover); }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.ghost { background: transparent; color: var(--text2); }
.btn.outline { background: transparent; border: 1px solid var(--input-border); }
.btn.block { width: 100%; height: 38px; }
.btn.google { background: var(--surface); border: 1px solid var(--input-border); color: var(--text); font-weight: 600; }
html:not(.light) .btn.google { background: #EBEBED; color: #1D1C1B; border-color: transparent; }
.btn svg { width: 16px; height: 16px; }
.link { color: var(--accent-text); font-size: 12.5px; font-weight: 500; }
.link.quiet { color: var(--text3); }

.field { display: grid; gap: 6px; }
.field label { font-size: 12px; color: var(--text2); font-weight: 500; }
.input { height: 38px; width: 100%; padding: 0 11px; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: var(--r-sm);
  color: var(--text); font: 13.5px var(--font); outline: none; }
.input::placeholder { color: var(--text3); }
.input.focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pw { position: relative; }
.pw .show { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--text3); }
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text2); }
.check i { width: 15px; height: 15px; border-radius: 3px; border: 1px solid var(--input-border); background: var(--input-bg); display: inline-block; }
.check i.on { background: var(--accent); border-color: var(--accent); position: relative; }
.check i.on::after { content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.or { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; color: var(--text3); font-size: 12px; }
.or::before, .or::after { content: ""; height: 1px; background: var(--line); }

/* Lists (Border.list / listRow / sep) */
.list { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.list > .row { display: flex; align-items: center; gap: 14px; padding: 14px 16px; }
.list > .row + .row { border-top: 1px solid var(--hairline); }
.list > .row.compact { padding: 9px 16px; }

/* Status */
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); } .dot.off { border: 1.3px solid var(--text3); }
.dot.run { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 10.5px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.pill.ok { color: var(--ok); background: var(--ok-soft); }
.pill.warn { color: var(--warn); background: var(--warn-soft); }
.pill.accent { color: var(--accent-text); background: var(--accent-soft); }
.pill.muted { color: var(--text2); background: var(--button); }
.pill.outline { color: var(--text2); border: 1px solid var(--input-border); }

/* Product marks: the tint each product has in the DevTool mockups, with the Hub's own icons (hub/app/products.py). */
.mark { width: 34px; height: 34px; border-radius: 7px; display: grid; place-items: center; color: #fff; flex: none; }
.mark svg { width: 55%; height: 55%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mark.sm { width: 22px; height: 22px; border-radius: 5px; }
.mark.lg { width: 46px; height: 46px; border-radius: 10px; }
.brand .mark svg { width: 72%; height: 72%; }
.m-sync { background: #2563EB; } .m-rental { background: #059669; } .m-jobmanager { background: #B45309; }
.m-inspection { background: #BE185D; } .m-tracking { background: #0E7490; } .m-desktop { background: #3F3F46; } .m-hub { background: #E65100; }
.orgmark { width: 38px; height: 38px; border-radius: 9px; display: grid; place-items: center; font-weight: 750; font-size: 13px; letter-spacing: .02em;
  color: #fff; background: linear-gradient(140deg, #3B3D44, #202124); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); flex: none; }
html.light .orgmark { background: linear-gradient(140deg, #2E2D2B, #4A4744); }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: 11.5px; flex: none; }

/* Graph-paper ground used by direction B and the operator pages: the calibration chart DashCal prints, faded out. */
.paper { background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px),
    linear-gradient(var(--grid-strong) 1px, transparent 1px), linear-gradient(90deg, var(--grid-strong) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px; background-position: -1px -1px; }
.fade { position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse 90% 80% at 50% 40%, transparent 30%, var(--bg) 100%); }

/* Load-in: a short staggered rise. Disabled with ?shot=1 so headless screenshots never catch it mid-way. */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.reveal > * { animation: rise .45s cubic-bezier(.2, .7, .2, 1) both; }
.reveal > *:nth-child(2) { animation-delay: .06s; } .reveal > *:nth-child(3) { animation-delay: .12s; }
.reveal > *:nth-child(4) { animation-delay: .18s; } .reveal > *:nth-child(5) { animation-delay: .24s; } .reveal > *:nth-child(6) { animation-delay: .30s; }
html.shot *, html.shot *::before, html.shot *::after { animation: none !important; transition: none !important; }

/* Signed-in / signed-out variants of one page (?state=in|out). */
html.in .when-out, html.out .when-in { display: none !important; }