/* ═══════════════════════════════════════════════════════════════════════════
   GREAT TECH — BizOS brand layer
   ───────────────────────────────────────────────────────────────────────────
   Tokens below marked (site) are lifted verbatim from greattech.net's
   assets/site.css so a BizOS panel and the public site are the same brand.
   Do not drift them; if the site changes, re-copy.

   Tokens marked (bizos) do not exist on the site and are added here because a
   control panel needs things a brochure does not: status colours, a terminal
   surface, and a dark theme for a screen that sits on a desk all day.
   They are derived from the site's ramps, not invented alongside them.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* — core (site) — */
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  /* CORRECTED. greattech.net's stylesheet has TWO :root blocks, and the second
     resets the accent to the wordmark blue. Reading only the opening block -
     as this file originally did - yields #5980a6, a slate the site never
     actually renders. Verified by computing the cascade, not by reading the
     top of the file. tools/brand-scan.py now warns when a token is redefined,
     because this mistake shipped here first. */
  --color-accent: #0033A0;
  --color-accent-2: #0033A0;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  /* — neutral ramp (site) — */
  --color-neutral-100: #f5f5f8; --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7; --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b; --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60; --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  /* — accent ramp (site) —
     Generated from the accent with color-mix on the live site, not hand-picked.
     Copied as expressions so the ramp follows if the accent ever moves. */
  --color-accent-100: color-mix(in srgb, #0033A0 8%, #f5f5f8);
  --color-accent-200: color-mix(in srgb, #0033A0 18%, #f5f5f8);
  --color-accent-300: color-mix(in srgb, #0033A0 34%, #f5f5f8);
  --color-accent-400: color-mix(in srgb, #0033A0 55%, #f5f5f8);
  --color-accent-500: color-mix(in srgb, #0033A0 78%, #f5f5f8);
  --color-accent-600: #0033A0;
  --color-accent-700: color-mix(in srgb, #0033A0 80%, #1d1f20);
  --color-accent-800: color-mix(in srgb, #0033A0 58%, #1d1f20);
  --color-accent-900: color-mix(in srgb, #0033A0 34%, #1d1f20);

  /* — logo colours (site, from the wordmark SVG) — */
  --gt-blue: #0033A0;       /* wordmark fill+stroke */
  --gt-beam: #1E6FFF;       /* beam and burst gradient */

  /* — type (site) — */
  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;   /* (bizos) */

  /* — space + radius (site) — */
  --space-1: 3.4px;  --space-2: 6.8px;  --space-3: 10.2px;
  --space-4: 13.6px; --space-6: 20.4px; --space-8: 27.2px;
  --radius-sm: 2px;  --radius-md: 4px;  --radius-lg: 7px;

  /* — elevation (site) — */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);

  /* — status (bizos) —
     Hue-separated from the brand blue so "in progress" (accent) never reads
     as "succeeded". Contrast checked against --color-bg at >= 4.5:1. */
  --ok:   #1f6b45;  --ok-bg:   #e6f2ec;
  --warn: #8a5a09;  --warn-bg: #fdf4e3;
  --bad:  #a32e1e;  --bad-bg:  #fcefec;
  --info: var(--color-accent-700); --info-bg: var(--color-accent-100);

  /* — terminal surface (bizos) — */
  --term-bg: #1d1f20; --term-ink: #d6d6d9;
  --term-a: #6fc79b; --term-w: #e0b768; --term-e: #ef9280;

  /* — customer logo slot (bizos) —
     A customer's mark is the one thing here we do not control: it may be wide,
     square, dark or light. The slot is a fixed BOX, not a fixed image size, so
     any mark lands optically level with the GT wordmark beside it. */
  --cust-logo-h: 34px;
  --cust-logo-max-w: 190px;
}

/* — dark theme (bizos) —
   Opt-in via data-theme, plus automatic. The site has no dark mode; these are
   the site's ramps inverted, with the wordmark switched to the beam blue
   because #0033A0 fails contrast on a dark ground. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #17181a; --color-surface: #1f2123; --color-text: #e8e8ea;
    --color-divider: color-mix(in srgb, #e8e8ea 18%, transparent);
    --color-neutral-100: #2b2b2d; --color-neutral-200: #343437;
    --color-neutral-300: #424244; --color-neutral-400: #5d5d60;
    --color-neutral-500: #7a7a7d; --color-neutral-600: #98989b;
    --color-neutral-700: #b7b7ba; --color-neutral-800: #d4d4d7;
    --color-neutral-900: #f5f5f8;
    --color-accent: #94bce3; --color-accent-2: #9ebbd8;
    --gt-blue: #4d8fe8;
    --ok: #6fc79b; --ok-bg: #14261d;
    --warn: #e0b768; --warn-bg: #271f13;
    --bad: #ef9280; --bad-bg: #2b1714;
    --info: #94bce3; --info-bg: #15232c;
    --term-bg: #0f1113; --term-ink: #d6d6d9;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
    --shadow-md: 0 3px 10px rgba(0,0,0,.55);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --color-bg: #17181a; --color-surface: #1f2123; --color-text: #e8e8ea;
  --color-divider: color-mix(in srgb, #e8e8ea 18%, transparent);
  --color-neutral-100: #2b2b2d; --color-neutral-200: #343437;
  --color-neutral-300: #424244; --color-neutral-400: #5d5d60;
  --color-neutral-500: #7a7a7d; --color-neutral-600: #98989b;
  --color-neutral-700: #b7b7ba; --color-neutral-800: #d4d4d7;
  --color-neutral-900: #f5f5f8;
  --color-accent: #94bce3; --color-accent-2: #9ebbd8;
  --gt-blue: #4d8fe8;
  --ok: #6fc79b; --ok-bg: #14261d;
  --warn: #e0b768; --warn-bg: #271f13;
  --bad: #ef9280; --bad-bg: #2b1714;
  --info: #94bce3; --info-bg: #15232c;
  --term-bg: #0f1113; --term-ink: #d6d6d9;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 3px 10px rgba(0,0,0,.55);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.6);
}

/* ── base (site) ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400;
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1{font-size:42px} h2{font-size:32px} h3{font-size:25px}
h4{font-size:20px} h5{font-size:16px}
h6{font-size:13px; letter-spacing:.08em; text-transform:uppercase}
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* eyebrow (site) */
.kick {
  font-family: var(--font-heading); font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* blueprint registration marks (site) — BizOS uses these to frame a run */
.blueprint { position: relative; border: 1px solid var(--color-divider); border-radius: 0; }
.blueprint > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before, .blueprint > .corner::after { content:""; position:absolute; background:currentColor; }
.blueprint > .corner::before { left:5px; top:0; width:1px; height:100%; }
.blueprint > .corner::after  { top:5px; left:0; width:100%; height:1px; }
.blueprint > .corner.tl{top:-6px;left:-6px} .blueprint > .corner.tr{top:-6px;right:-6px}
.blueprint > .corner.bl{bottom:-6px;left:-6px} .blueprint > .corner.br{bottom:-6px;right:-6px}

/* ── the co-brand lockup (bizos) ────────────────────────────────────────────
   Equal co-brand: the customer's mark and the GT wordmark sit on one baseline
   either side of a hairline. Neither is subordinate. The rule is optical, not
   mathematical — the divider is full-height and the two marks are centred in
   their own boxes, so a tall square logo and a long wordmark still balance. */
.cobrand { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.cobrand .cb-slot {
  display: flex; align-items: center; height: var(--cust-logo-h); flex: none;
}
/* An inline <svg> with a viewBox and no intrinsic size collapses to zero in a
   flex row -- height:auto gives it nothing to resolve against. Pinning height
   and letting width follow the aspect ratio is what actually fills the slot.
   Verified in the browser; the obvious max-height/height:auto pairing renders
   an invisible logo. */
.cobrand .cb-slot img, .cobrand .cb-slot svg {
  height: 100%; width: auto; max-width: var(--cust-logo-max-w);
  object-fit: contain;
}
.cobrand .cb-rule {
  width: 1px; align-self: stretch; min-height: var(--cust-logo-h);
  background: var(--color-divider); flex: none;
}
.cobrand .gt-logo { height: var(--cust-logo-h); width: auto; display: block; flex: none; }

/* The wordmark carries fill="#0033A0" as a presentation attribute inside the
   SVG, which fails contrast on a dark ground. A CSS rule beats a presentation
   attribute, so theming it here needs no edit to the artwork itself -- the
   logo file stays a byte-for-byte copy of what the website serves. */
.gt-logo text { fill: var(--gt-blue); stroke: var(--gt-blue); }

/* Fallback when a customer has given us no artwork yet: their name set in the
   heading face, in a blueprint-ruled box, so the slot never collapses and the
   panel never looks broken at a customer's first boot. */
.cobrand .cb-fallback {
  display: flex; align-items: center; padding: 0 var(--space-3);
  height: var(--cust-logo-h);
  border: 1px dashed var(--color-divider);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 19px; letter-spacing: .01em; white-space: nowrap;
  color: var(--color-text);
}

/* ── buttons (site, extended) ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none; border: 1px solid transparent;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 16px; letter-spacing: .04em; text-transform: uppercase;
  padding: var(--space-3) var(--space-6); line-height: 1;
  border-radius: var(--radius-md); transition: background .12s, border-color .12s;
}
.btn-primary { background: var(--color-accent-700); color: #fff; }
.btn-primary:hover { background: var(--color-accent-800); }
.btn-secondary { background: transparent; border-color: var(--color-divider); color: var(--color-text); }
.btn-secondary:hover { background: var(--color-surface); }
.btn-ghost { background: transparent; color: var(--color-accent); padding-left: 0; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
/* Irreversible actions are never a plain primary button — see .hold in bizos.css */
.btn-danger { background: var(--bad); color: #fff; }

/* ── cards (site) ───────────────────────────────────────────────────────── */
.card {
  background: var(--color-bg); border: 1px solid var(--color-divider);
  border-radius: var(--radius-md); display: flex; flex-direction: column;
  gap: var(--space-2);
}
.hitcard { transition: box-shadow .12s, border-color .12s; }
.hitcard:hover { box-shadow: var(--shadow-md); border-color: var(--color-accent-400); }
.hr { height:1px; border:0; margin: var(--space-4) 0; background: var(--color-divider); }