/* ============================================================================
   ALGORY SITE SKIN - shared baseline for the static marketing pages.
   Ported from the Boadicea Command Deck (the new app UI):
     _claude/ui_poc/algory_hud.html:8-10    (crimson tokens: bg/panel/red/deep)
     _claude/ui_poc/algory_hud.html:49-57   (panel gradient, brackets, h2 rule)
     _claude/ui_poc/_hud_chrome.js:307-317  (High Contrast/SDR text tiers)
   Loaded AFTER each page's inline <style> so equal-specificity overrides win.
   Design intent (Tom 2026-07-17): section/field labels are WHITE, never dim
   crimson - the dim #440000 mono labels were unreadable on SDR panels. The
   crimson stays for headlines, accents and rules, not for naming things.
   ========================================================================== */
:root{
  --dk-bg:#050505;            /* deck background            */
  --dk-panel:#0d0708;         /* panel gradient top         */
  --dk-panel2:#070304;        /* panel gradient bottom      */
  --dk-red:#FF1744;           /* brand crimson              */
  --dk-red-hc:#ff2d55;        /* High Contrast accent red   */
  --dk-red-deep:#330000;      /* panel border / rules       */
  --dk-text:#ffffff;          /* HC text tier               */
  --dk-text2:#ffd8de;         /* HC secondary tier          */
  --dk-muted2:#caa5ac;        /* HC muted tier (still legible on SDR) */
  /* index.html reads var(--muted) throughout its app-mirror scenes; lift it
     from the washed-out #7a4a52 to the HC muted tier for SDR legibility */
  --muted:#caa5ac;
  /* interactive-border tier (Tom, phone, 2026-07-16: "#330000 borders are
     invisible on mobile in daylight"). Over the deck black this reads ~#750d21
     - clearly visible mid-crimson. Hover still brightens to full crimson. */
  --dk-red-mid:rgba(255,23,68,.45);
}

/* -------- THE BACKGROUND ATMOSPHERE (deck black + soft red bleed) -------- */
body{
  background:radial-gradient(ellipse 120% 85% at 50% 16%, #0a0103 0%, #070103 46%, #050505 78%) #050505;
}

/* ============================ LABEL TIER =================================
   Every small mono label that NAMES a section or field reads white/near-white
   (the HUD High Contrast text tier), on every page. */
.eyebrow, .sect-label, .slabel, .actlabel,
.card-head, .who .card-head, .ghead, .gcard .ghead, .thead, .price-card-header,
.field label, .foot-col h4{
  color:var(--dk-text);
  opacity:1;
  text-shadow:0 0 12px rgba(255,23,68,.30);
}
.cal-dow span{ color:var(--dk-text2); }
.nav .brand .dim{ color:var(--dk-text2); }
.num-row .k{ color:var(--dk-text2); }
.tz-note{ color:var(--dk-muted2); }
.day-sq .dnum{ color:var(--dk-muted2); }
.chosen{ color:var(--dk-muted2); }
.scroll-cue, .micro, .cta-sub, .vsl-cap{ color:var(--dk-muted2); }
.sbtn{ color:var(--dk-muted2); }
.foot p{ color:#8a7075; }
/* decorative [ ] brackets around CTA labels: dim #440000 -> visible crimson */
.term-btn .bracket, .btn-ghost .br, .nav-btn .bk, .tbtn .bk, .pbtn .bk,
.glink .bk{ color:rgba(255,45,85,.75); }
.divider::before{ color:var(--dk-red-hc); }
/* label headers that carry an underline keep it, one tier brighter */
.card-head, .ghead, .thead, .price-card-header{ border-bottom-color:var(--dk-red-deep); }
/* book page: left-aligned section labels take the HUD h2 trailing rule
   (algory_hud.html:57) */
#booking-main .sect-label{ display:flex; align-items:center; gap:8px; }
#booking-main .sect-label::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--dk-red-deep), transparent);
}

/* ============================ PANEL TIER =================================
   The Command Deck panel treatment (algory_hud.html:49): vertical dark
   gradient, deep-red border, 7px radius, black ring + faint red inset glow. */
.card, .gcard, .terminal, .price-card, .pricing-wrap{
  background:linear-gradient(180deg, var(--dk-panel), var(--dk-panel2));
  border:1px solid var(--dk-red-deep);
  border-radius:7px;
  box-shadow:0 0 0 1px rgba(0,0,0,.6), inset 0 0 40px rgba(255,23,68,.022);
}
/* corner brackets: 2px crimson, seated ON the corner like the deck panels
   (algory_hud.html:50-51). Pages keep their four-corner spans. */
.corner, .tcorner, .pc-corner{ width:11px; height:11px; opacity:.5; }
.c-tl, .tc-tl, .pc-tl{ top:-1px; left:-1px; border-top-width:2px; border-left-width:2px; }
.c-tr, .tc-tr, .pc-tr{ top:-1px; right:-1px; border-top-width:2px; border-right-width:2px; }
.c-bl, .tc-bl, .pc-bl{ bottom:-1px; left:-1px; border-bottom-width:2px; border-left-width:2px; }
.c-br, .tc-br, .pc-br{ bottom:-1px; right:-1px; border-bottom-width:2px; border-right-width:2px; }
/* ============================ ACTION TIER ================================
   Real interactive controls only. Two rules, everywhere:
     1. border  = --dk-red-mid (visible on a phone in daylight); page :hover
        rules still brighten to full crimson.
     2. text    = bright crimson #ff1744 for primary actions, --dk-muted2
        minimum for secondary ones. Never #440000 / #330000 tiers.
   Decorative hairlines, dividers and the index app-mirror mock widgets
   (.actbtn, .apill, table rules) intentionally stay dim. */
.term-btn, .tbtn, .pbtn, .sbtn, .btn-ghost, .nav-btn,
.cal-arrow, .slot-btn, .vsl-thumb,
.field input, .field textarea{ border-color:var(--dk-red-mid); }
/* selectable calendar days: visible frame, keep the bright crimson top edge */
.day-sq.avail{ border-color:var(--dk-red-mid); border-top-color:var(--dk-red); }
.day-sq.avail.sel{ border-color:var(--dk-red); }
/* booking slot times are primary actions: dim #bbb -> bright crimson */
.slot-btn{ color:var(--dk-red); }
/* landing free-tier button keeps its amber identity, lifted to the same
   visibility tier as the crimson buttons */
.pbtn.free-btn{ border-color:rgba(255,196,0,.45); }
.pbtn.free-btn .bk{ color:rgba(255,196,0,.75); }
/* answered quiz history + secondary links: floor at the HC muted tier */
.tline.qpast{ color:var(--dk-muted2); }
.nav a.back{ color:var(--dk-muted2); }
.foot a{ color:var(--dk-muted2); }

/* calendar day squares keep their small inset corners */
.day-sq .corner{ width:8px; height:8px; }
.day-sq .c-tl{ top:3px; left:3px; border-top-width:1px; border-left-width:1px; }
.day-sq .c-tr{ top:3px; right:3px; border-top-width:1px; border-right-width:1px; }
.day-sq .c-bl{ bottom:3px; left:3px; border-bottom-width:1px; border-left-width:1px; }
.day-sq .c-br{ bottom:3px; right:3px; border-bottom-width:1px; border-right-width:1px; }