/* ═══════════════════════════════════════════════════════════════════
   ArkOS Legibility — toggle UI + clamp-aware sizing
   Pairs with arkos-legibility.js. Uses the carbon palette variables.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* Set by JS, but seed sane default */
  --distance-mult: 1;
}

/* Operator override toggle.
   Default HIDDEN so the room never sees it. Operator reveals via the
   keyboard shortcut `d` or the URL param ?controls=1. Bottom-right
   so it doesn't conflict with the clock or any header content even
   when shown. */
#arkos-legibility-toggle{
  position:fixed;
  bottom:14px; right:14px;
  z-index: 9998;
  display: none;
  display:flex; gap:0;
  background:rgba(2,8,6,.85);
  border:1px solid var(--cf-7, #56a061);
  border-radius:0;
  box-shadow:0 0 0 3px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.5);
  padding:0;
  font-family:"Cinzel", Georgia, serif;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  user-select:none;
}
body[data-p="light"] #arkos-legibility-toggle{
  background:rgba(249,243,233,.92);
  border-color:#1f4521;
  box-shadow:0 0 0 3px rgba(255,255,255,.35), 0 6px 16px rgba(31,69,33,.18);
}
#arkos-legibility-toggle button{
  appearance:none; -webkit-appearance:none;
  background:transparent;
  border:0;
  border-right:1px solid rgba(86,160,97,.25);
  color:var(--cm-3, #a49b79);
  font:inherit;
  font-size:10px;
  letter-spacing:.22em;
  padding:7px 10px;
  cursor:pointer;
  transition: color .15s, background .15s;
  line-height:1;
}
body[data-p="light"] #arkos-legibility-toggle button{
  color:#3d7541;
  border-right-color:rgba(31,69,33,.25);
}
#arkos-legibility-toggle button:last-of-type{ border-right:0; }
#arkos-legibility-toggle button:hover{
  color:var(--cm-1, #fbf8f2);
  background:rgba(86,160,97,.10);
}
body[data-p="light"] #arkos-legibility-toggle button:hover{
  color:#142d18;
  background:rgba(31,69,33,.10);
}
#arkos-legibility-toggle button.on{
  background:linear-gradient(180deg, var(--cf-7, #56a061), var(--cf-5, #2d5d31));
  color:var(--cf-0, #020806);
  text-shadow:0 1px 0 rgba(255,255,255,.20);
}
body[data-p="light"] #arkos-legibility-toggle button.on{
  background:linear-gradient(180deg, #2d5d31, #142d18);
  color:#f9f3e9;
}
#arkos-legibility-badge{
  display:inline-flex;align-items:center;
  padding:7px 12px;
  font-family:"Rajdhani","Cinzel",sans-serif;
  font-size:10px;
  letter-spacing:.18em;
  color:var(--cf-7, #56a061);
  border-left:1px solid rgba(86,160,97,.4);
  background:rgba(0,0,0,.25);
}
body[data-p="light"] #arkos-legibility-badge{
  color:#1f4521;
  background:rgba(255,255,255,.5);
  border-left-color:rgba(31,69,33,.4);
}

/* When the operator presses 'd' or appends ?controls=1, JS adds the
   .arkos-leg-shown class on the toggle to reveal it. */
#arkos-legibility-toggle.arkos-leg-shown{ display:flex !important; }

/* Mobile: shrink the toggle but keep it accessible. */
@media(max-width:720px){
  #arkos-legibility-toggle{ bottom:10px; right:10px; }
  #arkos-legibility-toggle button{ padding:6px 7px; font-size:9px; letter-spacing:.16em; }
  #arkos-legibility-badge{ display:none; }
}

/* ─── DISTANCE-AWARE TYPE OVERRIDES (× --distance-mult) ──────────── */
/* These ride on top of the cyberfix base + carbon overlay. They convert
   key fixed-px sizes to clamp() multiplied by the operator's tier. */

html{ font-size: calc(16px * var(--distance-mult)); }

/* Hero scale */
.hero-word{ font-size: clamp(48px, calc(8vw * var(--distance-mult)), 200px) !important; }
.hero-sub { font-size: clamp(26px, calc(3.8vw * var(--distance-mult)), 84px) !important; }
.eyebrow  { font-size: clamp(26px, calc(3vw * var(--distance-mult)), 70px) !important; }
.script   { font-size: clamp(18px, calc(2vw * var(--distance-mult)), 42px) !important; }
.ptag     { font-size: clamp(14px, calc(1.1vw * var(--distance-mult)), 24px) !important; }

/* Section headings */
.section-head h3 { font-size: clamp(30px, calc(4vw * var(--distance-mult)), 96px) !important; }
.section-head .k { font-size: clamp(28px, calc(3vw * var(--distance-mult)), 64px) !important; }
.section-sub    { font-size: clamp(17px, calc(1.3vw * var(--distance-mult)), 32px) !important; }

/* Cart row stat numbers */
.cart .num   { font-size: clamp(32px, calc(3.6vw * var(--distance-mult)), 96px) !important; }
.cart .unit  { font-size: clamp(14px, calc(1vw * var(--distance-mult)), 24px) !important; }
.cart .src   { font-size: clamp(14px, calc(.9vw * var(--distance-mult)), 22px) !important; }

/* Cap tile */
.cap h4      { font-size: clamp(22px, calc(1.6vw * var(--distance-mult)), 38px) !important; }
.cap-tag     { font-size: clamp(17px, calc(1.2vw * var(--distance-mult)), 28px) !important; }
.brief-lines li { font-size: clamp(17px, calc(1.2vw * var(--distance-mult)), 28px) !important; }

/* Form fields and labels */
.jvp-pic-input, .jvp-pic-select, .jvp-pic-textarea{
  font-size: clamp(17px, calc(1.05vw * var(--distance-mult)), 26px) !important;
}
.jvp-pic-field label{ font-size: clamp(14px, calc(.85vw * var(--distance-mult)), 18px) !important; }
.jvp-pic-totals .num{ font-size: clamp(28px, calc(2.4vw * var(--distance-mult)), 60px) !important; }
.btn-gilt, .explore{
  font-size: clamp(16px, calc(1.05vw * var(--distance-mult)), 26px) !important;
  padding: calc(16px * var(--distance-mult)) calc(40px * var(--distance-mult)) !important;
}

/* Footstrip + SOT */
.footstrip .row1{ font-size: clamp(14px, calc(1vw * var(--distance-mult)), 22px) !important; }
.footstrip .row2{ font-size: clamp(11px, calc(.85vw * var(--distance-mult)), 18px) !important; }
.sot-footer{ font-size: clamp(11px, calc(.85vw * var(--distance-mult)), 18px) !important; }

/* TV stage (check-in TV display) */
.tv-title h1     { font-size: clamp(28px, calc(4vw * var(--distance-mult)), 120px) !important; }
.tv-title .k     { font-size: clamp(20px, calc(2.4vw * var(--distance-mult)), 56px) !important; }
.tv-title .sub   { font-size: clamp(14px, calc(1.2vw * var(--distance-mult)), 26px) !important; }
.tv-clock        { font-size: clamp(14px, calc(1.6vw * var(--distance-mult)), 40px) !important; }
.tv-stat .num    { font-size: clamp(36px, calc(4.6vw * var(--distance-mult)), 120px) !important; }
.tv-stat .lbl    { font-size: clamp(14px, calc(1vw * var(--distance-mult)), 22px) !important; }
.tv-feed-head    { font-size: clamp(14px, calc(1.6vw * var(--distance-mult)), 36px) !important; }
.tv-card .name   { font-size: clamp(16px, calc(1.5vw * var(--distance-mult)), 36px) !important; }
.tv-card .biz    { font-size: clamp(14px, calc(1.2vw * var(--distance-mult)), 26px) !important; }
.tv-card .time   { font-size: clamp(11px, calc(.9vw * var(--distance-mult)), 18px) !important; }
.tv-cta h2       { font-size: clamp(22px, calc(2.4vw * var(--distance-mult)), 60px) !important; }
.tv-cta-eyebrow  { font-size: clamp(20px, calc(2.2vw * var(--distance-mult)), 44px) !important; }
.tv-cta .url     { font-size: clamp(14px, calc(1.2vw * var(--distance-mult)), 24px) !important; }
.tv-foot         { font-size: clamp(11px, calc(1vw * var(--distance-mult)), 22px) !important; }
.tv-card .avatar { width: calc(64px * var(--distance-mult)); height: calc(64px * var(--distance-mult)); }