/* ─────────────────────────────────────────────────────────
   STUDIO SQUAT — SETTER PLAYBOOK
   Typography: Ernest (display) + Avantt (all weights)

   TYPE SCALE
   Ernest (display):
     --t-display  : clamp(32px, 4.5vw, 52px)  — tab section titles
     --t-title    : clamp(22px, 2.5vw, 30px)  — step headers, card titles

   Avantt (UI + body):
     --t-body-lg  : 16px  — script blocks, important body
     --t-body     : 14px  — general prose, descriptions
     --t-body-sm  : 12px  — fine detail, notes, sub-descriptions
     --t-label    : 11px  — section labels, panel headers
     --t-caption  : 10px  — metadata, step markers
     --t-micro    :  9px  — tags, flags
───────────────────────────────────────────────────────── */

/* ── FONT FACES ── */
@font-face {
  font-family: 'Ernest';
  src: url('fonts/Ernest-Regular.woff2') format('woff2'),
       url('fonts/Ernest-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avantt';
  src: url('fonts/Avantt-Regular.woff2') format('woff2'),
       url('fonts/Avantt-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avantt';
  src: url('fonts/Avantt-Medium.woff2') format('woff2'),
       url('fonts/Avantt-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avantt';
  src: url('fonts/Avantt-SemiBold.woff2') format('woff2'),
       url('fonts/Avantt-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Avantt';
  src: url('fonts/Avantt-Bold.woff2') format('woff2'),
       url('fonts/Avantt-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── TOKENS ── */
:root {
  --bg:            #F4EFE6;
  --white:         #FAFAF8;
  --border:        #DDD8CF;
  --border-strong: #0A0A0A;
  --text:          #0A0A0A;
  --muted:         #7A756E;
  --orange:        #E8390A;

  /* ── M3 TONAL ELEVATION — Surface Pane System ────────────────
     Level 0  Background     : --bg               #F4EFE6  warm parchment
     Level 1  Surface        : --surface          #FAFAF8  primary content pane
     Level 2  Surface Variant: --surface-variant  #E8E3D8  nav tabs, secondary panes
     Strokes/borders are replaced entirely by background colour shifts.
  ─────────────────────────────────────────────────────────── */
  --surface:          #FAFAF8;
  --surface-variant:  #E8E3D8;

  /* Status colours */
  --red:           #E8390A;
  --red-light:     #FFF5F3;
  --amber:         #D97706;
  --amber-light:   #FFFBEB;
  --green:         #15803d;
  --green-light:   #F0FDF4;
  --gray:          #6B7280;
  --gray-light:    #F9FAFB;

  /* ── Type scale — M3-mapped shortcuts ──────────────────────
     Clamp bounds use adjacent M3 headline tokens for responsive feel.
     caption + micro are custom extensions below the M3 floor.
  ─────────────────────────────────────────────────────────── */
  --t-display:        clamp(var(--md-sys-typescale-headline-large-size), 4vw, var(--md-sys-typescale-display-small-size));
  --t-display-line:   var(--md-sys-typescale-display-small-line);

  --t-title:          clamp(var(--md-sys-typescale-headline-small-size), 2vw, var(--md-sys-typescale-title-large-size));
  --t-title-line:     var(--md-sys-typescale-title-large-line);

  --t-body-lg:        var(--md-sys-typescale-body-large-size);    /* 16px */
  --t-body-lg-line:   var(--md-sys-typescale-body-large-line);
  --t-body-lg-track:  var(--md-sys-typescale-body-large-tracking);

  --t-body:           var(--md-sys-typescale-body-medium-size);   /* 14px */
  --t-body-line:      var(--md-sys-typescale-body-medium-line);
  --t-body-track:     var(--md-sys-typescale-body-medium-tracking);

  --t-body-sm:        var(--md-sys-typescale-body-small-size);    /* 12px */
  --t-body-sm-line:   var(--md-sys-typescale-body-small-line);
  --t-body-sm-track:  var(--md-sys-typescale-body-small-tracking);

  --t-label:          var(--md-sys-typescale-label-small-size);   /* 11px */
  --t-label-line:     var(--md-sys-typescale-label-small-line);
  --t-label-track:    var(--md-sys-typescale-label-small-tracking);

  --t-caption:   0.625rem;   /* 10px — custom, below M3 floor */
  --t-micro:     0.5625rem;  /* 9px  — custom, below M3 floor */

  /* ── M3 TYPOGRAPHY — Typeface references ───────────────────
     Brand face : Ernest  → Display, Headline roles
     Plain face : Avantt  → Title, Body, Label roles
     Base unit  : 1rem = 16px
  ─────────────────────────────────────────────────────────── */
  --md-ref-typeface-brand: 'Ernest', Georgia, serif;
  --md-ref-typeface-plain: 'Avantt', system-ui, sans-serif;

  /* Display — brand (Ernest) */
  --md-sys-typescale-display-large-size:        3.5625rem;   /* 57px */
  --md-sys-typescale-display-large-line:        4.0rem;      /* 64px */
  --md-sys-typescale-display-large-tracking:   -0.015625em;
  --md-sys-typescale-display-large-weight:      400;

  --md-sys-typescale-display-medium-size:       2.8125rem;   /* 45px */
  --md-sys-typescale-display-medium-line:       3.25rem;     /* 52px */
  --md-sys-typescale-display-medium-tracking:   0em;
  --md-sys-typescale-display-medium-weight:     400;

  --md-sys-typescale-display-small-size:        2.25rem;     /* 36px */
  --md-sys-typescale-display-small-line:        2.75rem;     /* 44px */
  --md-sys-typescale-display-small-tracking:    0em;
  --md-sys-typescale-display-small-weight:      400;

  /* Headline — brand (Ernest) */
  --md-sys-typescale-headline-large-size:       2.0rem;      /* 32px */
  --md-sys-typescale-headline-large-line:       2.5rem;      /* 40px */
  --md-sys-typescale-headline-large-tracking:   0em;
  --md-sys-typescale-headline-large-weight:     400;

  --md-sys-typescale-headline-medium-size:      1.75rem;     /* 28px */
  --md-sys-typescale-headline-medium-line:      2.25rem;     /* 36px */
  --md-sys-typescale-headline-medium-tracking:  0em;
  --md-sys-typescale-headline-medium-weight:    400;

  --md-sys-typescale-headline-small-size:       1.5rem;      /* 24px */
  --md-sys-typescale-headline-small-line:       2.0rem;      /* 32px */
  --md-sys-typescale-headline-small-tracking:   0em;
  --md-sys-typescale-headline-small-weight:     400;

  /* Title — plain (Avantt) */
  --md-sys-typescale-title-large-size:          1.375rem;    /* 22px */
  --md-sys-typescale-title-large-line:          1.75rem;     /* 28px */
  --md-sys-typescale-title-large-tracking:      0em;
  --md-sys-typescale-title-large-weight:        400;

  --md-sys-typescale-title-medium-size:         1.0rem;      /* 16px */
  --md-sys-typescale-title-medium-line:         1.5rem;      /* 24px */
  --md-sys-typescale-title-medium-tracking:     0.009375em;  /* +0.01em */
  --md-sys-typescale-title-medium-weight:       500;

  --md-sys-typescale-title-small-size:          0.875rem;    /* 14px */
  --md-sys-typescale-title-small-line:          1.25rem;     /* 20px */
  --md-sys-typescale-title-small-tracking:      0.00625em;   /* +0.01em */
  --md-sys-typescale-title-small-weight:        500;

  /* Body — plain (Avantt) */
  --md-sys-typescale-body-large-size:           1.0rem;      /* 16px */
  --md-sys-typescale-body-large-line:           1.5rem;      /* 24px */
  --md-sys-typescale-body-large-tracking:       0.03125em;   /* +0.03em */
  --md-sys-typescale-body-large-weight:         400;

  --md-sys-typescale-body-medium-size:          0.875rem;    /* 14px */
  --md-sys-typescale-body-medium-line:          1.25rem;     /* 20px */
  --md-sys-typescale-body-medium-tracking:      0.015625em;  /* +0.01em */
  --md-sys-typescale-body-medium-weight:        400;

  --md-sys-typescale-body-small-size:           0.75rem;     /* 12px */
  --md-sys-typescale-body-small-line:           1.0rem;      /* 16px */
  --md-sys-typescale-body-small-tracking:       0.025em;     /* +0.03em */
  --md-sys-typescale-body-small-weight:         400;

  /* Label — plain (Avantt) */
  --md-sys-typescale-label-large-size:          0.875rem;    /* 14px */
  --md-sys-typescale-label-large-line:          1.25rem;     /* 20px */
  --md-sys-typescale-label-large-tracking:      0.00625em;   /* +0.01em */
  --md-sys-typescale-label-large-weight:        500;

  --md-sys-typescale-label-medium-size:         0.75rem;     /* 12px */
  --md-sys-typescale-label-medium-line:         1.0rem;      /* 16px */
  --md-sys-typescale-label-medium-tracking:     0.03125em;   /* +0.04em */
  --md-sys-typescale-label-medium-weight:       500;

  --md-sys-typescale-label-small-size:          0.6875rem;   /* 11px */
  --md-sys-typescale-label-small-line:          1.0rem;      /* 16px */
  --md-sys-typescale-label-small-tracking:      0.03125em;   /* +0.04em */
  --md-sys-typescale-label-small-weight:        500;

  /* ── SPACING SCALE — 8dp Grid ──────────────────────────────
     Token name: --space-[px-value]
     Median: 8px  |  Mode: 16px  |  Range: 4–80px
     All tokens are multiples of 4px (half-step of 8dp base)
  ─────────────────────────────────────────────────────────── */
  --space-4:    4px;   /* xs   — icon padding, badge gaps, hairlines      */
  --space-8:    8px;   /* sm   — tight gaps, pill padding, small rows     */
  --space-12:  12px;   /* md   — compact card padding, dense components   */
  --space-16:  16px;   /* base — standard component padding               */
  --space-24:  24px;   /* lg   — section breathing room, layout gaps      */
  --space-32:  32px;   /* xl   — spacious layout gaps                     */
  --space-40:  40px;   /* 2xl  — generous padding, large blocks           */
  --space-48:  48px;   /* 3xl  — major layout separators (reserved)       */
  --space-64:  64px;   /* 4xl  — full-section blocks                      */
  --space-80:  80px;   /* 5xl  — empty state / hero padding only          */

  /* Negative offset tokens (bleed and overlap effects only) */
  --space-n4:  -4px;
  --space-n8:  -8px;
  --space-n12: -12px;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[x-cloak] { display: none !important; }

/* ── MATERIAL SYMBOLS SHARP ─────────────────────────────────
   Variable axes: FILL 0→1 | wght 300 | GRAD 0 | opsz 24
   Inactive = FILL 0 (outline, subtle)
   Active / hover = FILL 1 (solid, elevated)
   Icon-to-text gap always uses --space-8 (8dp grid)
─────────────────────────────────────────────────────────── */
.ms {
  font-family: 'Material Symbols Sharp';
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  font-size: 20px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  user-select: none;
  flex-shrink: 0;
  transition: font-variation-settings 0.15s ease;
}

/* Always-filled state — for status icons, warnings, result headings */
.ms-fill {
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Size variants */
.ms-16 { font-size: 16px; }
.ms-20 { font-size: 20px; }  /* default */
.ms-24 { font-size: 24px; }

/* Icon + text row — 8dp gap (spacing grid anchor) */
.icon-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

/* Tonal elevation: icons fill on hover/active inside interactive elements */
button:hover .ms:not(.ms-fill),
button.active .ms:not(.ms-fill),
.tab-btn.active .ms,
.acc-hd:hover .ms,
.acc-hd.open .ms,
.copy-btn:hover .ms,
.tier-btn:hover .ms {
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ── BASE ── */
/* Root font-size bumped to 17px so all rem-based tokens scale up one notch.
   Body text: 14→15px | small: 12→13px | labels: 11→12px | micro: 9→10px */
html { -webkit-text-size-adjust: 100%; font-size: 18px; }

body {
  font-family: 'Avantt', system-ui, sans-serif;
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  padding-bottom: var(--space-40);
}

/* ── TYPOGRAPHY HELPERS ── */
.ernest { font-family: var(--md-ref-typeface-brand); font-weight: normal; letter-spacing: 0.03em; }

/* Display — Ernest, M3 Headline-Large → Display-Small clamp */
.t-display {
  font-family: var(--md-ref-typeface-brand);
  font-weight: var(--md-sys-typescale-headline-large-weight);
  font-size: var(--t-display);
  line-height: var(--t-display-line);
  letter-spacing: 0.06rem;
}

/* Title — Avantt, M3 Headline-Small → Title-Large clamp */
.t-title {
  font-family: var(--md-ref-typeface-plain);
  font-weight: 700;
  font-size: var(--t-title);
  line-height: var(--t-title-line);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
}

/* Body Large — M3 Body-Large (16px) */
.t-body-lg {
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--t-body-lg);
  line-height: var(--t-body-lg-line);
  letter-spacing: var(--t-body-lg-track);
  font-weight: var(--md-sys-typescale-body-large-weight);
}

/* Body — M3 Body-Medium (14px) */
.t-body {
  font-size: var(--t-body);
  line-height: var(--t-body-line);
  letter-spacing: var(--t-body-track);
}

/* Body Small — M3 Body-Small (12px) */
.t-body-sm {
  font-size: var(--t-body-sm);
  line-height: var(--t-body-sm-line);
  letter-spacing: var(--t-body-sm-track);
}

/* Label — M3 Label-Small (11px), keeps uppercase + wide tracking */
.t-label {
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--t-label);
  font-weight: var(--md-sys-typescale-label-small-weight);
  line-height: var(--t-label-line);
  letter-spacing: 0.18em;   /* intentionally wider than M3 for all-caps labels */
  text-transform: uppercase;
}

/* Caption — custom 10px, below M3 floor */
.t-caption {
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--t-caption);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Micro — custom 9px, below M3 floor */
.t-micro {
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.fw-bold    { font-weight: 700; }
.fw-semi    { font-weight: 600; }
.fw-medium  { font-weight: 500; }
.color-orange { color: var(--orange); }
.color-muted  { color: var(--muted); }

/* ── LAYOUT ── */
.page {
  max-width: 740px;
  margin: 0 auto;
  padding: var(--space-24) var(--space-16) var(--space-80);
}

/* ── HEADER ── */
.site-header {
  background: var(--text);
  color: var(--white);
  padding: 0 var(--space-24);  /* no vertical padding — lang-toggle fills the height */
  display: flex;
  align-items: stretch;        /* children stretch to full header height */
  justify-content: space-between;
  gap: var(--space-16);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  padding: var(--space-16) 0;
}

.ss-icon {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 0.9;
}

.header-wordmark { line-height: 1.25; }

.header-sup {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin-bottom: var(--space-4);
}

.header-title {
  font-family: 'Ernest', Georgia, serif;
  font-weight: normal;
  font-size: clamp(20px, 3.5vw, 28px);
  line-height: 1;
  color: var(--white);
}

.header-right {
  display: flex;
  align-items: stretch;
}

/* ── LANG TOGGLE ── */
.lang-toggle {
  display: flex;
  align-items: stretch;
  gap: 1px;
  background: rgba(255,255,255,0.12); /* gap colour bleeds through as separator */
}

.lang-btn {
  display: flex;
  align-items: center;
  padding: 0 var(--space-24);
  font-family: 'Avantt', sans-serif;
  font-size: var(--t-caption);
  font-weight: 600;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  color: rgba(255,255,255,0.55);
  background: var(--text);
  border: none;
  text-transform: uppercase;
}
.lang-btn:hover { background: rgba(255,255,255,0.1); color: white; }
.lang-btn.active { background: var(--white); color: var(--text); }

.header-url {
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--orange);
  letter-spacing: 0.12em;
}

/* ── MISSION STRIP ── */
.mission-strip {
  background: #3A3A3A;
  color: white;
  padding: var(--space-8) var(--space-24);
  display: flex;
  align-items: baseline;
  gap: var(--space-12);
  flex-wrap: wrap;
}

.mission-label {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.75;
  flex-shrink: 0;
}

.mission-text {
  font-size: var(--t-body-sm);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
}

/* ── TABS (Navigation Pane) ── */
/* Surface Variant elevation = Level 2, distinguishes nav from content.
   Active tab lifts to Surface (Level 1), visually merging with panel-wrap. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  background: var(--surface-variant);
  padding: var(--space-16) var(--space-16) 0;
  gap: var(--space-4);
}

.tab-btn {
  font-family: 'Avantt', sans-serif;
  font-size: var(--t-caption);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: var(--space-8) var(--space-16);
  cursor: pointer;
  background: transparent;
  border: none;
  color: var(--muted);
  transition: background 0.12s, color 0.12s;
  user-select: none;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.tab-btn .ms {
  font-size: 16px;
  flex-shrink: 0;
}
.tab-btn:hover:not(.active) { background: rgba(255,255,255,0.45); color: var(--text); }
.tab-btn.active {
  background: var(--surface);  /* matches panel-wrap — tab "opens into" content */
  color: var(--text);
}

/* ── PANEL WRAPPER (Content Pane) ── */
/* Surface elevation = Level 1. Active tab shares this background,
   creating seamless nav → content connection without a border. */
.panel-wrap {
  background: var(--surface);
  padding: var(--space-32) var(--space-24);
}

/* ── SECTION LABEL ── */
.slabel {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--space-8);
}

/* ── DIVIDER — rhythm via spacing only, zero stroke ── */
.rule        { border: none; margin: var(--space-32) 0; }
.rule-strong { border: none; margin: var(--space-40) 0; }

/* ── SCRIPT BLOCK ── */
/* Recessed to page background (--bg) within the surface panel.
   Parchment-on-white creates editorial depth without a border. */
.script-block {
  font-family: 'Avantt', sans-serif;
  font-weight: 400;
  font-size: var(--t-body-lg);
  line-height: 1.55;
  background: var(--bg);
  padding: var(--space-16) var(--space-16) var(--space-12);
  position: relative;
  margin-top: var(--space-40); /* space-40 = 40px; chip is ~24px tall, leaving ~16px clear above it */
  color: var(--text);
}
.script-block::before {
  content: 'SCRIPT';
  position: absolute;
  bottom: 100%; /* sits just above the box, not inside it */
  top: auto;
  left: 0;
  background: var(--text);
  color: var(--bg);
  padding: var(--space-4) var(--space-8);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  font-family: 'Avantt', sans-serif;
}

/* ── COPY BUTTON ── */
.copy-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  margin-top: var(--space-8);
  font-family: 'Avantt', sans-serif;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: var(--space-8) var(--space-12);
  background: var(--surface-variant);
  border: none;
  cursor: pointer;
  transition: all 0.12s;
  color: var(--text);
}
.copy-btn::before {
  font-family: 'Material Symbols Sharp';
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 20;
  font-size: 16px;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  font-feature-settings: 'liga' 1;
  -webkit-font-feature-settings: 'liga' 1;
  content: 'content_copy';
  flex-shrink: 0;
  font-weight: normal;
}
.copy-btn.copied::before {
  content: 'check';
}
.copy-btn:hover { background: var(--text); color: var(--bg); }
.copy-btn.copied { background: var(--green); color: white; }

/* ── REVENUE TIER BUTTONS ── */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
  margin-top: var(--space-12);
}

/* Recessed to --bg; hovers to surface-variant for tactile feedback */
.tier-btn {
  background: var(--bg);
  border: none;
  cursor: pointer;
  padding: var(--space-16) var(--space-8);
  text-align: center;
  transition: all 0.12s;
  user-select: none;
}
.tier-btn:hover { background: var(--surface-variant); }

.tier-btn .tier-label {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: var(--space-12);
  color: var(--muted);
}
.tier-btn .tier-value {
  font-family: 'Ernest', Georgia, serif;
  font-weight: normal;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1;
  color: var(--text);
}
.tier-btn .tier-sub {
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-top: var(--space-4);
}

.tier-btn.tier-red.selected   { background: var(--red);   color: white; }
.tier-btn.tier-amber.selected { background: var(--amber); color: white; }
.tier-btn.tier-green.selected { background: var(--green); color: white; }
.tier-btn.selected .tier-label,
.tier-btn.selected .tier-value,
.tier-btn.selected .tier-sub { color: white; }

/* ── RESULT PANELS ── */
/* Semantic colour carried entirely by background fill. */
.result-panel { margin-top: 0; }
.result-red   { background: var(--red-light); }
.result-amber { background: var(--amber-light); }
.result-green { background: var(--green-light); }

.result-hd {
  padding: var(--space-12) var(--space-16);
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: white;
}
.result-hd-red   { background: var(--red); }
.result-hd-amber { background: var(--amber); }
.result-hd-green { background: var(--green); }

.result-body { padding: var(--space-16); }

/* ── EMPTY STATE ── */
.empty-state {
  background: var(--surface-variant);
  padding: var(--space-40);
  text-align: center;
  font-size: var(--t-body-sm);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.04em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

.empty-arrow {
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 400;
  opacity: 0.5;
  color: var(--muted);
}

/* ── COMMISSION BOX ── */
.commission-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

/* Recessed to --bg within the surface panel */
.comm-cell {
  background: var(--bg);
  padding: var(--space-16);
}
.comm-cell.highlight { background: var(--green-light); }
.comm-value.green { color: var(--green); }
.comm-cell-full { grid-column: 1 / -1; }

.comm-earn-label {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.comm-label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-8);
}

.comm-value {
  font-family: 'Ernest', Georgia, serif;
  font-weight: normal;
  font-size: clamp(26px, 3.5vw, 34px);
  line-height: 1;
  letter-spacing: 0.06rem;
  color: var(--text);
  margin-bottom: var(--space-4);
}
.comm-value.orange { color: var(--orange); }

.comm-note {
  font-size: var(--t-body-sm);
  color: var(--muted);
  line-height: 1.5;
}

/* ── SIGNAL CHECKLIST ── */
/* Amber tint as background — no amber border needed */
.signal-box {
  background: #FEF9EE;
  padding: var(--space-16);
  margin-top: var(--space-16);
}

.signal-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.signal-list label {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  cursor: pointer;
  font-size: var(--t-body-sm);
  font-weight: 500;
}

.signal-list input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--amber);
  cursor: pointer;
}

/* ── STEP BLOCKS (FLOW TAB) ── */
/* Dark / orange step-hd provides all structural weight.
   Container sits at --bg (recessed), no border required. */
.step-block {
  background: var(--bg);
}

.step-hd {
  background: var(--border);
  color: var(--text);
  padding: var(--space-12) var(--space-16);
  display: flex;
  align-items: center;
  gap: var(--space-12);
}
.step-hd.orange { background: var(--orange); color: var(--white); }
.step-hd.green  { background: var(--green);  color: var(--white); }

.step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,0.10);
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--t-body-sm);
  font-weight: 700;
  letter-spacing: 0;
  flex-shrink: 0;
}
.step-hd.orange .step-num,
.step-hd.green  .step-num {
  background: rgba(255,255,255,0.2);
}

.step-name {
  font-size: var(--t-body-lg);
  font-weight: 500;
  color: inherit;
}

.step-body { padding: var(--space-16); }

.flow-arrow {
  text-align: center;
  font-size: 1.4rem;
  font-weight: 400;
  opacity: 0.5;
  padding: var(--space-8) 0;
  color: var(--muted);
}

/* ── THREE THINGS LIST ── */
.three-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-12);
}

.three-item {
  background: var(--bg);
  padding: var(--space-12) var(--space-16);
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
}
.three-item.highlight { background: var(--red-light); }

.three-num {
  width: 22px;
  height: 22px;
  background: var(--text);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--t-micro);
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0;
}
.three-item.highlight .three-num { background: var(--orange); }

.three-title {
  font-size: var(--t-body-sm);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: var(--space-4);
}
.three-item.highlight .three-title { color: var(--orange); }

.three-desc { font-size: var(--t-body-sm); color: var(--muted); line-height: 1.4; }
.three-item.highlight .three-desc { color: var(--orange); opacity: 0.8; }

/* ── RESPONSE CARDS ── */
.response-grid { display: flex; flex-direction: column; gap: var(--space-12); }

/* Semantic colour via background fill only */
.resp-card { padding: var(--space-16); }
.resp-card.green  { background: var(--green-light); }
.resp-card.amber  { background: var(--amber-light); }
.resp-card.orange { background: var(--red-light); }
.resp-card.gray   { background: var(--gray-light); }

.resp-status {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--space-8);
}
.resp-status.green  { color: var(--green); }
.resp-status.amber  { color: var(--amber); }
.resp-status.orange { color: var(--orange); }
.resp-status.gray   { color: var(--gray); }

.resp-note {
  font-size: var(--t-body-sm);
  color: var(--muted);
  margin-top: var(--space-8);
  line-height: 1.5;
}
.resp-note.bold { font-weight: 600; color: var(--text); }

/* ── ACCORDION ── */
/* Surface-variant container + 1px gap trick: the surface-variant background
   bleeds through as a hairline separator between items — no stroke drawn. */
.accordion {
  background: var(--surface-variant);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.acc-hd {
  padding: var(--space-16);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-12);
  font-size: var(--t-body-sm);
  font-weight: 600;
  user-select: none;
  transition: background 0.12s, color 0.12s;
  background: var(--surface);
}
.acc-hd:hover { background: var(--text); color: var(--white); }
.acc-hd.open  { background: var(--text); color: var(--white); }
.acc-hd.open .acc-tag { color: white; }

/* "Most Common" accent: warm red tint instead of orange top stroke */
.acc-hd.accent-top { background: #FFF5F3; }
.acc-hd.accent-top:hover { background: var(--text); color: var(--white); }
/* open beats accent-top — 3-class specificity wins over 2-class */
.acc-hd.accent-top.open { background: var(--text); color: var(--white); }

.acc-q { line-height: 1.4; }
.acc-sub {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: var(--space-4);
}
.acc-hd.open .acc-sub { color: rgba(255,255,255,0.6); }

.acc-toggle {
  font-family: 'Ernest', sans-serif;
  font-size: 1.2rem;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 1px;
  opacity: 0.6;
}

/* Smooth accordion slide using max-height transition */
.acc-slide {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.acc-slide.open {
  max-height: 800px;
  transition: max-height 0.35s ease;
}

.acc-body {
  padding: var(--space-16);
  background: var(--surface);
}

/* Doctor frame: red-light fill carries the orange signal, no border */
.doctor-frame {
  background: var(--red-light);
  padding: var(--space-12);
  font-size: var(--t-body-sm);
  line-height: 1.6;
  margin-bottom: var(--space-12);
}
.doctor-frame strong { font-weight: 700; color: var(--text); }

/* ── NEVER DO ── */
/* Full dark background is the container — no redundant border */
.never-box {
  background: var(--text);
  color: var(--white);
  padding: var(--space-24);
  margin-top: var(--space-24);
}

.never-label {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: var(--space-16);
}

.never-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  margin-bottom: var(--space-12);
  font-size: var(--t-body-sm);
  font-weight: 500;
  line-height: 1.5;
}
.never-x { color: var(--orange); flex-shrink: 0; }

/* ── HANDOFF FORM ── */
/* Recessed to --bg within the surface panel */
.form-card {
  background: var(--bg);
  padding: var(--space-16);
  margin-bottom: var(--space-16);
}

.form-label {
  display: block;
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--space-8);
}

/* Underline-only input: functional affordance without boxing the field */
.field {
  font-family: 'Avantt', sans-serif;
  font-size: var(--t-body);
  font-weight: 400;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  padding: var(--space-8) 0;
  width: 100%;
  outline: none;
  color: var(--text);
  transition: border-color 0.12s;
}
.field:focus { border-bottom-color: var(--orange); }
.field::placeholder { color: var(--muted); }

.floor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.floor-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--space-12);
  font-family: 'Avantt', sans-serif;
  font-size: var(--t-body-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  border: none;
  background: var(--surface-variant);
  cursor: pointer;
  transition: all 0.12s;
}
.floor-btn .ms {
  font-size: 20px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  transition: font-variation-settings 0.15s ease;
}
.floor-btn.yes-active .ms,
.floor-btn.no-active .ms,
.floor-btn:hover .ms {
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}
.floor-btn.yes-active { background: var(--green); color: white; }
.floor-btn.no-active  { background: var(--orange); color: white; }
.floor-btn:hover:not(.yes-active):not(.no-active) { background: var(--surface); }

/* Warning uses red-light fill — no border needed */
.floor-warn {
  margin-top: var(--space-8);
  background: var(--red-light);
  padding: var(--space-8) var(--space-12);
  font-size: var(--t-body-sm);
  font-weight: 700;
  color: var(--orange);
}

.telegram-output {
  background: var(--bg);
  padding: var(--space-16);
  margin-bottom: var(--space-16);
}

.copy-full-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  width: 100%;
  padding: var(--space-12);
  margin-top: var(--space-12);
  font-family: 'Avantt', sans-serif;
  font-size: var(--t-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  background: var(--text);
  color: var(--white);
  transition: all 0.12s;
}
.copy-full-btn:hover { background: var(--orange); }
.copy-full-btn.copied { background: var(--green); }

/* ── AIRTABLE CHECKLIST ── */
/* 1px gap trick: surface-variant container peeks through between surface rows */
.checklist-card {
  background: var(--surface-variant);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.checklist-hd {
  background: var(--text);
  color: var(--white);
  padding: var(--space-12) var(--space-16);
  display: flex;
  align-items: center;
  gap: var(--space-12);
}

.check-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  cursor: pointer;
  font-size: var(--t-body-sm);
  font-weight: 500;
  background: var(--surface);
  transition: background 0.1s;
}
.check-row:hover { background: #EDECE8; }
.check-row.final { background: var(--red-light); }
.check-row.final:hover { background: #FFE8E3; }

.check-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--text);
  cursor: pointer;
}
.check-row.final input[type="checkbox"] { accent-color: var(--orange); }
.check-row.final span { font-weight: 700; color: var(--orange); }

/* ── INLINE CALLOUT ── */
/* Full background fill replaces left-border stroke */
.callout {
  padding: var(--space-12);
  font-size: var(--t-body-sm);
  line-height: 1.6;
  margin-top: var(--space-12);
}
.callout.green  { background: var(--green-light);  color: var(--green); }
.callout.orange { background: var(--red-light);    color: var(--orange); }
.callout.amber  { background: var(--amber-light);  color: var(--amber); }
.callout strong { font-weight: 700; }

/* ── CRITICAL MODAL ── */
.critical-modal {
  position: fixed;
  bottom: var(--space-24);
  left: var(--space-24);
  z-index: 300;
  width: 300px;
  background: var(--text);
  color: var(--white);
  box-shadow: 0 8px 40px rgba(0,0,0,0.32);
  animation: criticalSlideIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
}

@keyframes criticalSlideIn {
  from {
    transform: translateX(calc(-100% - var(--space-24)));
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Alpine leave transition */
.critical-leave          { transition: transform 0.25s ease-in, opacity 0.25s ease-in; }
.critical-leave-start    { transform: translateX(0); opacity: 1; }
.critical-leave-end      { transform: translateX(calc(-100% - var(--space-24))); opacity: 0; }

.critical-modal-hd {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.critical-icon {
  color: var(--orange);
  font-size: 18px;
  flex-shrink: 0;
}

.critical-label {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orange);
  flex: 1;
}

.critical-close {
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.4);
  display: flex;
  align-items: center;
  padding: var(--space-4);
  transition: color 0.12s;
  margin-left: auto;
}
.critical-close:hover { color: white; }
.critical-close .ms { font-size: 18px; }

.critical-modal-body {
  padding: var(--space-12) var(--space-16) var(--space-16);
  font-size: var(--t-body-sm);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.8);
}

/* ── SPACING UTILITIES ── */
.mt4  { margin-top: var(--space-4); }
.mt8  { margin-top: var(--space-8); }
.mt12 { margin-top: var(--space-12); }
.mt16 { margin-top: var(--space-16); }
.mt20 { margin-top: var(--space-24); }  /* 20px → nearest token: 24px */
.mt24 { margin-top: var(--space-24); }
.mb4  { margin-bottom: var(--space-4); }
.mb8  { margin-bottom: var(--space-8); }
.mb12 { margin-bottom: var(--space-12); }
.mb16 { margin-bottom: var(--space-16); }
.mb20 { margin-bottom: var(--space-24); }  /* 20px → nearest token: 24px */
.gap8  { gap: var(--space-8); }
.gap12 { gap: var(--space-12); }
.gap16 { gap: var(--space-16); }

/* ── RESPONSIVE ── */
@media (max-width: 540px) {
  .site-header { padding: 0 var(--space-16); }
  .header-title { font-size: 18px; }
  .ss-icon { width: 30px; height: 30px; }
  .panel-wrap { padding: var(--space-24) var(--space-16); }
  .tab-btn { padding: var(--space-8) var(--space-12); font-size: var(--t-micro); }
  .tier-btn .tier-value { font-size: 22px; }
  .commission-grid { grid-template-columns: 1fr; }
  .floor-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 380px) {
  .tabs { flex-direction: column; padding-bottom: 0; }
}