/* ==========================================================================
   Cilmë design system
   Three colours - ink, paper and peacock - on warm grounds. Paper is the
   product's ground, ink the brand's, peacock the one signal spent on the
   single thing that matters on each screen. Square corners on anything with a
   border; two opposite corners cut on the diagonal on anything filled. See
   docs/branding-strategy.html for why each of these values is what it is.
   Shared by index.html (customer flow) and admin.html (control room) so
   both surfaces speak the same visual language.
   ========================================================================== */

:root {
  /* Three colours carry the whole identity: ink #15120F, paper #EEEAE3 and peacock #0E4F66.
     Everything below is one of them or a mix of them - never a new hue - except ember,
     which means "something is wrong" and nothing else. See §10 of the brand strategy.

     Paper, not ink, is the product's ground. It is a working surface - twelve months of
     consumption, nine offers, four price components each - and dense figures hold up
     better on a light ground for the length of the job. Ink belongs to the landing and
     the documents. */

  /* Peacock is the one signal on paper: the button, the best price, the saving. It never
     carries text on ink (2.1:1) - on ink the signal is paper itself.
     Fill: 7.5:1 on the page, carrying surface text at 8.3:1. Text: 7.5:1 on the page,
     8.3:1 on cards, 6.7:1 on its own tint. */
  --accent: #0E4F66;
  --accent-hover: #0F4456;
  --accent-active: #103B4A;
  --accent-bg: #DCDED9;
  --accent-bg-strong: #CAD1CF;
  --accent-text: #0E4F66;
  --accent-text-strong: #0F4456;
  --accent-border: #89A4AB;
  --accent-on: #F7F6F2;

  /* Warm greys, mixed from paper toward ink: gray-25 is the page, gray-900 is ink. The
     ~180 rules that reference these by name need no changes - this scale is the theme.
     Body type (#312E2B) is 11.3:1 on the page, muted (#63605B) 5.3:1. */
  --gray-25: #EEEAE3;
  --gray-50: #E5E1DB;
  --gray-100: #DDD9D2;
  --gray-200: #CBC7C1;
  --gray-300: #ADA9A3;
  --gray-400: #8A8781;
  --gray-500: #63605B;
  --gray-600: #524E4A;
  --gray-700: #45423E;
  --gray-800: #312E2B;
  --gray-900: #15120F;

  /* Cards and inputs lift a half-step off the page, toward white but never to it. */
  --surface: #F7F6F2;

  /* Success is peacock as a tinted block with peacock type. Danger is ember, semantic
     only: money lost, a missed deadline, a supplier who never replied. Its text is a
     shade deeper than ember so it holds 4.5:1 on its own tint. Decorative ember is a bug. */
  --success: #0E4F66;
  --success-text: #0E4F66;
  --success-bg: #D8DAD6;
  --success-border: #94ACB1;

  --danger: #B83400;
  --danger-text: #9B2E03;
  --danger-bg: #E9D8CC;
  --danger-border: #D6987D;
  /* Something the customer should know about but did not do wrong - a supplier not reached. */
  --warning-text: #7E5312;
  --warning-bg: #E7DCCB;
  --warning-border: #D2B281;

  /* Semantic figure colours: what you gain is peacock, what you lose is ember. */
  --pos: #0E4F66;
  --neg: #B83400;

  --border: var(--gray-200);
  /* Square corners on everything with a border: cards, inputs, tables. Filled elements -
     buttons, the logo tile - have two opposite corners cut on the diagonal instead
     (--chamfer), which is where the brand's hand shows. See §12 of the brand strategy. */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-btn: 0;
  --radius-card: 0;
  --chamfer: 7px;

  /* Archivo carries display and UI; Plex Mono carries every figure, date and address.
     Newsreader, the brand's reading face, speaks in the product's few human moments -
     "Choice confirmed" - and nowhere else (.cc-moment). */
  --font-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* Hairline borders and space do the separating; the modal is the one place
     that lifts off the page. */
  --shadow-card: none;
  --shadow-modal: 0 24px 70px rgba(21, 18, 15, 0.22);
}


* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  font-family: var(--font-sans);
  color: var(--gray-800);
  font-size: 14px;
  line-height: 1.6;
  /* Flat, near-monochrome ground - the two colored gradient washes read as
     "chromatic variety" the reference explicitly avoids in favor of stark
     high-contrast neutrals plus one deliberate accent. */
  background-color: var(--gray-25);
  min-height: 100vh;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Loosened from the original's tight -0.01em: editorial headings build
   hierarchy through generous spacing and scale, not dense tracking. Serif
   headings against the sans body text is the other half of that editorial
   contrast - covers every actual <h1>/<h2>/<h3> (hero tagline, page titles);
   .cc-card-title/.cc-modal-title get it explicitly below since they're
   styled <div>/<span> elements, not real heading tags. */
h1, h2, h3 { margin: 0; font-family: var(--font-sans); font-weight: 800; font-stretch: 112%; color: var(--gray-900); letter-spacing: -0.015em; }

a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-text-strong); }

/* ---------- layout shells ---------- */
.cc-shell { min-height: 100vh; display: flex; flex-direction: column; }
.cc-main { flex: 1; }

/* Screens are swapped via JS (display), never routed to separate pages and
   never reached by scrolling past one another. */
.cc-screen { display: none; }
.cc-screen.is-active { display: block; animation: cc-fade-in 0.18s ease-out; }

@keyframes cc-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- top bar ---------- */
.cc-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  /* Bug from the dark-theme pass: this was a literal oklch(99%...) - a light
     value that never went through the --gray-* scale, so it never inverted
     with the rest of the page and stayed near-white this whole time. That's
     what made light-colored text (e.g. the current-step label, which uses
     gray-900 - now the LIGHT end of the scale) unreadable sitting on top of
     it. Using the token instead of a literal value going forward means this
     can't drift out of sync with the rest of the theme again. */
  background: color-mix(in oklch, var(--gray-25) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.cc-topbar-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.cc-brand { display: flex; align-items: center; gap: 9px; cursor: pointer; }
/* Header logo removed too, same as the hero one from the last iteration. */
.cc-brand svg { display: block; width: 20px; height: 20px; flex: none; }
/* The logo tile is filled too: the same two cut corners, in proportion to its size. */
.cc-brand svg, .cc-hero-logo svg { clip-path: polygon(18% 0, 100% 0, 100% 82%, 82% 100%, 0 100%, 0 18%); }
/* The product's few human moments - "Choice confirmed" - speak in the reading face. */
.cc-moment { font-family: var(--font-serif); font-weight: 500; font-size: 1.2em; letter-spacing: 0; }
.cc-brand-word { font-size: 16px; font-weight: 700; color: var(--gray-900); }

/* ---------- stepper (3-step customer journey) ---------- */
.cc-stepper { display: flex; align-items: center; gap: 6px; }
.cc-step { display: flex; align-items: center; gap: 8px; padding: 4px 8px; }
.cc-step-num {
  width: 20px; height: 20px; 
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  background: var(--gray-100); color: var(--gray-500); border: 1px solid var(--border);
  flex: none;
}
/* Bracketed micro-label, echoing the reference's "( scroll )" / "( play )"
   navigation markers - a small recurring motif rather than a literal copy. */
.cc-step-label { font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--gray-400); white-space: nowrap; }
.cc-step-label::before { content: '( '; }
.cc-step-label::after { content: ' )'; }
.cc-step.is-current .cc-step-num { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
/* Was gray-900 (the brightest/whitest point on the scale) - too stark, and
   unreadable in practice on the topbar while that had its own leftover
   light-background bug (see .cc-topbar above). Emphasis now comes from
   weight instead of pushing all the way to white - still clearly "grey
   family," just the brightest, boldest step in that family. */
.cc-step.is-current .cc-step-label { color: var(--gray-700); font-weight: 700; }
.cc-step.is-done .cc-step-num { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.cc-step.is-done .cc-step-label { color: var(--gray-600); }
.cc-step-sep { width: 16px; height: 1px; background: var(--border); flex: none; }

/* ---------- pills: language / country ---------- */
.cc-pillrow { display: flex; gap: 4px; }
.cc-pill {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  padding: 5px 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--gray-500); cursor: pointer; letter-spacing: 0.02em;
}
.cc-pill:hover { border-color: var(--accent-border); color: var(--gray-700); }
.cc-pill.is-active { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent-text-strong); }

.cc-country-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px 8px 10px; border: 1px solid var(--border);
  background: var(--surface); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--gray-700);
}
.cc-country-pill:hover { border-color: var(--accent-border); }
.cc-country-pill.is-active { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent-text-strong); }
.cc-flag { width: 22px; height: 16px; overflow: hidden; display: flex; flex-direction: column; flex: none; box-shadow: 0 0 0 1px oklch(0% 0 0 / 8%) inset; }
.cc-flag span { flex: 1; }
.cc-flag.ee span:nth-child(1) { background: #4891d9; }
.cc-flag.ee span:nth-child(2) { background: #1a1712; }
.cc-flag.ee span:nth-child(3) { background: #faf9f7; }
.cc-flag.lv span:nth-child(1) { background: #9e1b34; }
.cc-flag.lv span:nth-child(2) { background: #faf9f7; height: 34%; flex: 0 0 34%; }
.cc-flag.lv span:nth-child(3) { background: #9e1b34; }
.cc-flag.lt span:nth-child(1) { background: #fdb913; }
.cc-flag.lt span:nth-child(2) { background: #006a44; }
.cc-flag.lt span:nth-child(3) { background: #c1272d; }

/* ---------- advanced-view toggle switch ---------- */
.cc-switch-row { display: flex; align-items: center; gap: 8px; }
.cc-switch-label { font-size: 12px; font-weight: 600; color: var(--gray-500); white-space: nowrap; }
.cc-switch { width: 34px; height: 20px; background: var(--gray-200); border: 1px solid var(--border); position: relative; cursor: pointer; flex: none; }
.cc-switch::after { content: ''; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; background: var(--surface); box-shadow: 0 0 0 1px var(--gray-300); transition: transform 0.15s ease; }
.cc-switch.is-on { background: var(--accent); border-color: var(--accent); }
.cc-switch.is-on::after { transform: translateX(14px); }

/* ---------- company switcher ---------- */
.cc-companies { display: flex; align-items: center; gap: 6px; overflow-x: auto; max-width: 320px; }
.cc-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 5px 12px; border: 1px solid var(--border); background: var(--surface);
  cursor: pointer; white-space: nowrap; flex: none;
}
.cc-chip.is-active { background: var(--accent-bg); border-color: var(--accent-border); }
.cc-chip-name { font-size: 11px; font-weight: 700; color: var(--gray-800); }
.cc-chip-meta { font-size: 10px; font-family: var(--font-mono); color: var(--gray-500); }
.cc-chip-add {
  width: 26px; height: 26px; border: 1px dashed var(--gray-300);
  color: var(--gray-400); background: transparent; cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.cc-chip-add:hover { border-color: var(--accent-border); color: var(--accent-text); }

/* A field the customer still has to fill in or fix - set with aria-invalid, cleared on typing.
   The :focus form is spelled out because the cursor is put in that field, and .cc-input:focus
   (as specific, and later in this file) would otherwise paint over the red with the blue ring. */
.cc-input.cc-input-invalid,
.cc-input.cc-input-invalid:focus { border-color: var(--danger-border); box-shadow: 0 0 0 3px var(--danger-bg); }

/* The customer top bar's right-hand group: "Show the working" and the languages. */
.cc-topbar-tools { margin-left: auto; }

/* Phone width. The top bar used to stay on one line and push the whole page sideways (a 400px
   screen scrolled to 903px). It now wraps: every step keeps its number but only the current one
   keeps its name, and the toggle and languages take a line of their own. */
@media (max-width: 720px) {
  .cc-topbar-inner { flex-wrap: wrap; gap: 10px 12px; padding: 12px 16px; }
  .cc-step { padding: 4px 2px; }
  .cc-step-label { display: none; }
  .cc-step.is-current .cc-step-label { display: inline; }
  .cc-step-sep { width: 10px; }
  .cc-topbar-tools { margin-left: 0; width: 100%; justify-content: space-between; }
  .cc-companies { max-width: 100%; }
}

/* ---------- page containers ---------- */
.cc-page { max-width: 920px; margin: 0 auto; padding: 64px 24px 80px; }
.cc-page.cc-page-narrow { max-width: 680px; }
.cc-page.cc-page-wide { max-width: 1040px; }
.cc-page-title { font-size: 30px; font-weight: 400; letter-spacing: 0.005em; }
.cc-page-sub { margin-top: 8px; font-size: 13px; color: var(--gray-500); }
.cc-page-head { margin-bottom: 36px; }

/* ---------- landing screen: full-bleed photo background ---------- */
/* Both photos converted from source HEIC files (browsers don't render HEIC
   as background-image/img outside Safari on Apple platforms), resized to
   2400px and desaturated server-side. #screen-landing specifically - this is
   the customer's landing page only, not the whole app.
   --landing-photo is set inline by JS on load (a random pick each page load
   between the two - see the top of index.html's script), via a custom
   property rather than swapping a whole class, so this rule stays the single
   source of truth for the gradient/size/position treatment regardless of
   which photo is showing. The url() below is a static fallback for the
   (theoretical) case JS never runs.
   Both this fallback and the JS-set value use a root-absolute path
   ('/assets/...'), not a relative one - relative url()s set on a custom
   property via inline JS style resolve inconsistently across browsers
   (defining-page-relative vs. consuming-stylesheet-relative), which is what
   actually broke this the first time (silently 404'd, dropping the whole
   background-image declaration). Absolute paths resolve the same regardless
   of which rule a given browser applies, so this can't drift out of sync
   again. */
#screen-landing.is-active {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  /* Scrim in the ink hue rather than the retired warm neutral, and deepened a
     little: the hero type is now heavy off-white and needs the photo held back
     further than the old light-weight display type did. */
  background-image:
    linear-gradient(rgba(21, 18, 15, 0.40), rgba(21, 18, 15, 0.60)),
    var(--landing-photo, url('/assets/landing-bg-clouds.jpg'));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ---------- landing hero ---------- */
.cc-hero { max-width: 640px; margin: 0 auto; padding: 48px 24px; text-align: center; }
/* Logo AND wordmark both removed from the hero - the grey label text
   (var(--gray-500)) has no contrast against a photo background and just
   reads as illegible. Brand identity still lives in the topbar
   (.cc-brand-word), which sits on a solid dark bar, not on the photo. */
.cc-hero-logo { display: none; }
/* Reversed from the previous editorial pass, which built hierarchy from scale
   alone at weight 300. Cilmë's hero is the loudest surface it owns: Archivo
   at its heaviest and widest, uppercase, tracked tight, set against a held-back
   photograph. Confidence here is the whole positioning - see "Personality" in
   the brand strategy. */
.cc-hero h1 {
  /* The one place light type survives in a light theme: this sits on a
     deliberately darkened photograph, not on the page ground, so it takes an
     explicit paper colour rather than inheriting near-black from h1. */
  color: #F4F7FB;
  font-size: clamp(38px, 6.4vw, 62px);
  font-weight: 900;
  font-stretch: 118%;
  line-height: 0.96;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  text-wrap: balance;
}
/* Removed - not legible over the photo background anyway, per this iteration. */
.cc-hero p.cc-hero-sub { display: none; }
.cc-hero-countries { display: flex; justify-content: center; gap: 8px; margin: 40px 0 28px; }

/* ---------- cards ---------- */
.cc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 28px; }
.cc-card + .cc-card { margin-top: 20px; }
.cc-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.cc-card-title { font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: 0.01em; color: var(--gray-900); }
.cc-card-sub { margin-top: 4px; font-size: 12.5px; line-height: 1.6; color: var(--gray-500); }
.cc-divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* ---------- labels ---------- */
.cc-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gray-500); }

/* ---------- buttons ---------- */
.cc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; letter-spacing: 0.03em;
  padding: 11px 20px; border-radius: var(--radius-btn); border: 1px solid transparent;
  cursor: pointer; transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.cc-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.cc-btn-primary {
  background: var(--accent); color: var(--accent-on);
  /* Filled, so two opposite corners are cut on the diagonal. A clip-path also clips the
     browser's focus ring, so the ring is drawn inside the button instead. */
  clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer));
}
.cc-btn-primary:focus-visible { outline: 2px solid var(--accent-on); outline-offset: -5px; }
.cc-btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.cc-btn-secondary { background: var(--surface); border-color: var(--border); color: var(--gray-700); }
.cc-btn-secondary:hover:not(:disabled) { border-color: var(--accent-border); color: var(--gray-900); }
.cc-btn-ghost { background: transparent; color: var(--gray-500); padding: 8px 10px; }
.cc-btn-ghost:hover:not(:disabled) { color: var(--gray-800); }
.cc-btn-block { width: 100%; }
.cc-btn-sm { padding: 6px 12px; font-size: 12px; }

/* ---------- badges ---------- */
.cc-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 3px 9px; border: 1px solid var(--border); background: var(--gray-50); color: var(--gray-600); }
.cc-badge-accent { background: var(--accent-bg); border-color: var(--accent-border); color: var(--accent-text-strong); }
.cc-badge-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.cc-badge-danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
.cc-badge-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-text); }

/* ---------- upload zone ---------- */
/* Bold dropped per this iteration - still the same danger-colored banner
   (background/border/text color untouched), just regular weight now, so the
   AI-processing disclosure stays just as visually present, only lighter. */
.cc-upload-warning {
  font-weight: 400; font-size: 12.5px; line-height: 1.5; color: var(--danger-text);
  background: var(--danger-bg); border: 1px solid var(--danger-border); border-radius: var(--radius-card);
  padding: 10px 14px; margin-bottom: 14px;
}
.cc-upload {
  border: 1.5px dashed var(--gray-300); border-radius: var(--radius-card);
  padding: 36px 20px; text-align: center; cursor: pointer; background: var(--gray-25);
}
.cc-upload:hover { border-color: var(--accent-border); background: var(--accent-bg); }
/* The dropzone is a real control for keyboard users too (role="button", tabindex="0"),
   so it needs a focus ring of its own - the .cc-input rule below never applied to a div. */
.cc-upload:focus-visible {
  outline: none; border-style: solid; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.cc-upload-title { font-size: 13px; font-weight: 600; color: var(--gray-700); }
.cc-upload-sub { margin-top: 4px; font-size: 12px; color: var(--gray-500); }

/* ---------- spinners / async states ---------- */
.cc-spin { animation: cc-spin 0.8s linear infinite; }
@keyframes cc-spin { to { transform: rotate(360deg); } }
.cc-async { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 32px 16px; color: var(--gray-500); font-size: 13px; font-weight: 500; }

/* ---------- key-value rows ---------- */
.cc-kv { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--gray-100); font-size: 13px; }
.cc-kv:last-child { border-bottom: none; }
.cc-kv-label { color: var(--gray-500); }
.cc-kv-value { font-family: var(--font-mono); font-weight: 600; color: var(--gray-800); }

/* ---------- chart bars ---------- */
.cc-bars { display: flex; align-items: flex-end; gap: 6px; height: 128px; }
.cc-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.cc-bar { width: 100%; background: var(--accent-border); }
.cc-bar.is-peak { background: var(--accent); }
.cc-bar-2 { background: var(--gray-800); }
.cc-bar-month { font-size: 9px; font-family: var(--font-mono); color: var(--gray-400); }
.cc-legend { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gray-500); margin-top: 12px; }
.cc-legend-dot { width: 8px; height: 8px; background: var(--accent); flex: none; }
.cc-legend-dot.is-dark { background: var(--gray-800); }

/* ---------- metric rows (advanced view) ---------- */
.cc-metric-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--gray-100); }
.cc-metric-row:last-child { border-bottom: none; }
.cc-metric-name { font-size: 12.5px; font-weight: 600; color: var(--gray-700); display: flex; align-items: center; gap: 6px; }
.cc-metric-value { font-family: var(--font-mono); font-size: 12.5px; color: var(--gray-600); margin-left: auto; }
.cc-tip { width: 15px; height: 15px; background: var(--gray-100); color: var(--gray-500); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: help; border: 1px solid var(--border); }
.cc-tip[title] { position: relative; }

/* ---------- tables ---------- */
.cc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cc-table thead th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gray-500); padding: 10px 14px; border-bottom: 1px solid var(--border); }
.cc-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--gray-100); vertical-align: middle; }
.cc-table tbody tr:last-child td { border-bottom: none; }
.cc-table tbody tr.is-recommended { background: var(--accent-bg); }
.cc-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.cc-table-wrap .cc-table thead th:first-child, .cc-table-wrap .cc-table tbody td:first-child { padding-left: 18px; }

/* ---------- toggle-link (view request text) ---------- */
.cc-toggle-link { font-size: 12.5px; font-weight: 600; color: var(--accent-text); background: none; border: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 4px; }
.cc-toggle-link:hover { color: var(--accent-text-strong); }
.cc-letter { margin-top: 10px; padding: 14px 16px; background: var(--gray-50); border: 1px solid var(--border); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: 12px; color: var(--gray-700); white-space: pre-wrap; }

/* ---------- banners ---------- */
.cc-banner { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: var(--radius-md); font-size: 13px; }
.cc-banner-success { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-text); }
.cc-banner-accent { background: var(--accent-bg); border: 1px solid var(--accent-border); color: var(--accent-text-strong); }
.cc-banner-warning { background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning-text); }

/* ---------- big figure (sign screen) ---------- */
.cc-figure { font-family: var(--font-mono); font-size: 40px; font-weight: 700; letter-spacing: -0.01em; }
/* The net-benefit sign is the one number the offer comparison exists to
   convey, so it keeps semantic colour even though the rest of the theme is
   grayscale. Bright blue/orange chosen for the dark --surface card the figure
   sits on (the grayscale --success-text/--danger-text at ~30% lightness read
   as dull grey here); the success/danger hues 145/33 are the palette's own. */
.cc-figure.is-positive { color: var(--pos); }
.cc-figure.is-negative { color: var(--neg); }

/* ---------- summary cards (win vs spot) ---------- */
.cc-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 720px) { .cc-summary-grid { grid-template-columns: 1fr; } }
.cc-summary-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 20px; box-shadow: var(--shadow-card); }
.cc-summary-figure { font-family: var(--font-mono); font-size: 26px; font-weight: 700; margin-top: 8px; }

/* ---------- form controls ---------- */
.cc-input, .cc-select {
  width: 100%; font-size: 13px; font-family: var(--font-sans); color: var(--gray-800);
  padding: 9px 12px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface);
}
.cc-input:focus, .cc-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
/* Italic as well as grey, so an example never passes for a value somebody already entered. */
.cc-input::placeholder { color: var(--gray-400); font-style: italic; }
.cc-radio { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.cc-field { margin-top: 14px; }
.cc-field label { display: block; margin-bottom: 5px; }
.cc-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .cc-field-grid { grid-template-columns: 1fr; } }

/* ---------- modal ---------- */
.cc-modal-overlay { position: fixed; inset: 0; z-index: 50; background: rgba(21, 18, 15, 0.45); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 16px; }
.cc-modal-overlay.is-open { display: flex; }
.cc-modal { width: 100%; max-width: 380px; background: var(--surface); border-radius: var(--radius-card); border: 1px solid var(--border); box-shadow: var(--shadow-modal); padding: 24px; }
.cc-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cc-modal-title { font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: 0.01em; }
.cc-modal-close { background: none; border: none; color: var(--gray-400); cursor: pointer; font-size: 16px; }
.cc-modal-close:hover { color: var(--gray-700); }
.cc-pin { font-family: var(--font-mono); font-size: 34px; font-weight: 700; letter-spacing: 0.3em; text-align: center; color: var(--accent-text-strong); margin: 8px 0; }
.cc-modal-status { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; color: var(--gray-500); }

/* ---------- toast ---------- */
/* Was background:gray-900/color:#fff (dark chip, light text) before the
   inversion - gray-900 is now the LIGHT end of the scale, so the two colors
   are swapped explicitly here rather than left to resolve wrong: a light
   chip with dark text, still standing out clearly against the now-dark page. */
.cc-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: var(--gray-900); color: var(--gray-25); padding: 10px 18px; border-radius: var(--radius-md); font-size: 13px; box-shadow: var(--shadow-modal); display: none; }
.cc-toast.is-visible { display: block; animation: cc-toast-in 0.18s ease-out; }
@keyframes cc-toast-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- footer link ---------- */
.cc-back-link { font-size: 12.5px; font-weight: 600; color: var(--gray-500); display: inline-flex; align-items: center; gap: 4px; }
.cc-back-link:hover { color: var(--accent-text); }

/* ---------- utility ---------- */
.cc-hidden { display: none !important; }
.cc-row { display: flex; align-items: center; }
.cc-row-gap-8 { gap: 8px; }
.cc-row-gap-12 { gap: 12px; }
.cc-row-between { display: flex; align-items: center; justify-content: space-between; }
.cc-mt-8 { margin-top: 8px; }
.cc-mt-16 { margin-top: 16px; }
.cc-mt-24 { margin-top: 24px; }
.cc-text-muted { color: var(--gray-500); }
.cc-text-sm { font-size: 12.5px; }

/* ---------- admin-console specific ---------- */
.cc-admin-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.cc-admin-tab { font-size: 13px; font-weight: 600; color: var(--gray-500); padding: 10px 4px; margin-right: 20px; border-bottom: 2px solid transparent; cursor: pointer; background: none; border-top: none; border-left: none; border-right: none; }
.cc-admin-tab:hover { color: var(--gray-800); }
.cc-admin-tab.is-active { color: var(--accent-text-strong); border-bottom-color: var(--accent); }

/* ---------- the cost of doing nothing ----------
   One standing figure, carried from the dashboard through the offer table: what
   renewing quietly costs this company per year, measured against the cheapest list
   price we know of. It leads the page because it is the stake the whole flow plays
   for - every other number here compares one offer with another, this one prices
   doing nothing at all. Rendered only when there is a real number to state; see
   renderStakes() in index.html. */
.cc-stakes {
  border: 1px solid var(--border);
  border-left: 3px solid var(--pos);
  background: var(--surface);
  padding: 16px 18px 15px;
  margin-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}
.cc-stakes-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray-500);
}
.cc-stakes-figure {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--pos);
  font-variant-numeric: tabular-nums;
}
.cc-stakes-sub {
  flex-basis: 100%;
  font-size: 13px;
  line-height: 1.5;
  color: var(--gray-500);
  margin-top: 6px;
}
/* Nothing on the market beats them today: no figure, no accent, no false alarm. */
.cc-stakes.is-flat { border-left-color: var(--gray-300); }
.cc-stakes.is-flat .cc-stakes-label { text-transform: none; letter-spacing: 0; font-size: 13px; }