/* ============================================================================
   Purpose: The gate and the verdict. Tokens only.
   ========================================================================= */

.czf-result[hidden] { display: none; }

/* --- Gate ---------------------------------------------------------------- */

.czf-gate__grid { display: grid; gap: var(--space-32); }

@media (min-width: 900px) {
  .czf-gate__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: var(--space-48);
    align-items: start;
  }
}

.czf-gate__copy .czf-h2 { margin-top: var(--space-16); max-width: 16ch; }

.czf-gate__sub {
  margin-top: var(--space-16);
  color: var(--c-ink-2);
  max-width: 46ch;
}

.czf-gate__list { margin-top: var(--space-24); display: grid; gap: var(--space-12); }

.czf-gate__list li {
  position: relative;
  padding-left: var(--space-24);
  font-size: var(--fs-caption);
  color: var(--c-ink-2);
}

.czf-gate__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: var(--space-8);
  height: var(--space-8);
  background: var(--c-shield);
  transform: rotate(45deg);
}

/* Inside the modal the form no longer needs its own surface - the dialog is
   the surface. */
.czf-gate__form { display: grid; gap: var(--space-16); }

/* --- Fields --------------------------------------------------------------- */

.czf-field { display: grid; gap: var(--space-8); }

.czf-field label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.czf-field input {
  padding: var(--space-16);
  background: var(--c-void);
  border: 1px solid var(--c-line-2);
  color: var(--c-ink);
  font-size: var(--fs-body);
}

.czf-field input:focus { outline: none; border-color: var(--c-shield); }
.czf-field input::placeholder { color: var(--c-ink-3); }

/* The message is always in the DOM and always occupies its line, so revealing
   an error never pushes the form around under the reader's cursor. */
.czf-field__err {
  min-height: var(--space-16);
  font-size: var(--fs-micro);
  color: var(--c-danger);
  visibility: hidden;
}

.czf-field.is-bad input      { border-color: var(--c-danger); }
.czf-field.is-bad .czf-field__err { visibility: visible; }

.czf-consent {
  display: flex;
  gap: var(--space-12);
  align-items: flex-start;
  font-size: var(--fs-caption);
  color: var(--c-ink-2);
  line-height: var(--lh-normal);
  cursor: pointer;
}

.czf-consent input {
  flex: 0 0 auto;
  width: var(--space-20);
  height: var(--space-20);
  margin-top: 2px;
  accent-color: var(--c-shield);
  cursor: pointer;
}

.czf-consent__err { visibility: hidden; margin-top: calc(var(--space-8) * -1); }
.czf-consent.is-bad + .czf-consent__err { visibility: visible; }

.czf-gate__go { width: 100%; margin-top: var(--space-8); }

.czf-gate__sla  { margin: 0; font-size: var(--fs-caption); color: var(--c-clear); }
.czf-gate__priv { margin: 0; font-size: var(--fs-micro);   color: var(--c-ink-3); }

/* Storage refused, so the verdict could not travel to its own URL. Shown in
   place of the gate, never instead of an answer. */
.czf-gate__fallback[hidden] { display: none; }
.czf-gate__fallback { max-width: var(--measure); }
.czf-gate__fallback .czf-h2 { margin-top: var(--space-16); }

/* --- Verdict --------------------------------------------------------------- */

.czf-verdict[hidden] { display: none; }

/* /result/ is a reading screen with no car behind it, so the page owns the
   background and the section can breathe. */
.czf-page-result .czf-main { pointer-events: auto; }
.czf-page-result .czf-result { min-height: 60svh; }

.czf-verdict__empty[hidden] { display: none; }

.czf-verdict__empty {
  max-width: var(--measure);
  margin-inline: auto;
  text-align: center;
  padding-block: var(--space-64);
}

.czf-verdict__empty .czf-eyebrow { justify-content: center; }
.czf-verdict__empty .czf-h2 { margin: var(--space-16) auto 0; }
.czf-verdict__empty .czf-verdict__acts { justify-content: center; }

.czf-verdict__head { text-align: center; }

.czf-verdict__name {
  margin-top: var(--space-16);
  font-size: var(--fs-verdict);
  color: var(--c-shield);
}

/* Profile A prescribes nothing. It must feel like the best possible outcome,
   not a consolation - if "buy nothing" looks like failure, the honesty the
   whole page is built on reads as theatre. */
.czf-result[data-box="A"] .czf-verdict__name { color: var(--c-clear); }

.czf-verdict__line {
  margin: var(--space-16) auto 0;
  max-width: 48ch;
  font-size: var(--fs-lead);
  line-height: var(--lh-heading);
  color: var(--c-ink);
}

.czf-verdict__scores {
  display: grid;
  gap: var(--space-16);
  margin-top: var(--space-40);
}

@media (min-width: 700px) {
  .czf-verdict__scores { grid-template-columns: repeat(3, 1fr); }
}

.czf-verdict__score {
  padding: var(--space-24);
  border: 1px solid var(--c-line);
  background: var(--c-elev-1);
}

.czf-verdict__score b {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  color: var(--c-ink);
}

.czf-verdict__score span {
  display: block;
  margin-top: var(--space-8);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.czf-verdict__score--shield  b { color: var(--c-shield); }
.czf-verdict__score--weather b { color: var(--c-weather); }

/* The code is the one card with no number to align against - it is a thing to
   read out at a counter. Centred on both axes inside its box so it sits as a
   plate rather than as a value that has drifted to the top of a taller card. */
.czf-verdict__score--code {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.czf-verdict__score--code b {
  font-family: var(--font-mono);
  font-size: var(--fs-h5);
}

/* --- Prescription ----------------------------------------------------------- */

.czf-verdict__body { margin-top: var(--space-64); }
.czf-verdict__rx   { font-size: var(--fs-h4); margin-bottom: var(--space-24); }

.czf-steps { counter-reset: czf-step; display: grid; gap: var(--space-24); }

/* Each step's rule starts gold over the number and fades into the ordinary
   hairline across the rest of the width - so the prescription reads as a set
   of labelled sections rather than a list with lines between it.

   Drawn as a background layer on the top edge instead of a border, because a
   border cannot carry a gradient without border-image and its slicing rules.
   Same box, same padding, same height. */
.czf-step {
  counter-increment: czf-step;
  position: relative;
  padding: var(--space-24) var(--space-24) var(--space-24) var(--space-64);
  border-top: 1px solid transparent;
  background-image: linear-gradient(90deg,
                      var(--c-shield) 0,
                      var(--c-shield) var(--space-48),
                      var(--c-line) var(--space-128),
                      var(--c-line) 100%);
  background-size: 100% 1px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-origin: border-box;
}

/* The ₹0 outcome is a win, not an absence - it keeps its own colour all the
   way through, including its rule. */
.czf-step--free {
  background-image: linear-gradient(90deg,
                      var(--c-clear) 0,
                      var(--c-clear) var(--space-48),
                      var(--c-line) var(--space-128),
                      var(--c-line) 100%);
}

.czf-step::before {
  content: counter(czf-step);
  position: absolute;
  left: var(--space-24);
  top: var(--space-24);
  font-family: var(--font-display);
  font-weight: var(--weight-black);
  font-size: var(--fs-h5);
  line-height: 1;
  color: var(--c-shield);
  /* Lit, like the question counter on the diagnostic panel. These numbers are
     readouts from the same instrument. */
  text-shadow: var(--glow-text-shield);
}

.czf-step--free::before { color: var(--c-clear); text-shadow: none; }

.czf-step h4 { font-size: var(--fs-h6); margin-bottom: var(--space-8); }
.czf-step p  { color: var(--c-ink-2); margin-bottom: var(--space-8); }
.czf-step p:last-child { margin-bottom: 0; }

.czf-step__price {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--c-shield);
}

.czf-step--free .czf-step__price { color: var(--c-clear); }

/* The spine fades out down its length, so the note reads as something marked
   in a margin rather than as a boxed callout. */
.czf-note {
  position: relative;
  margin-top: var(--space-24);
  padding: var(--space-24);
  border-left: 3px solid transparent;
  background-image: linear-gradient(180deg,
                      var(--c-shield) 0%,
                      var(--c-shield-lo) 62%,
                      transparent 100%);
  background-size: 3px 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-origin: border-box;
  background-color: var(--c-elev-1);
}

.czf-note h4 { font-size: var(--fs-h6); margin-bottom: var(--space-8); color: var(--c-shield); }
.czf-note p  { color: var(--c-ink-2); }

/* --- Actions ---------------------------------------------------------------- */

.czf-verdict__acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-top: var(--space-40);
}

.czf-verdict__studio {
  margin-top: var(--space-24);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-wide);
  color: var(--c-ink-3);
}

/* --- Print ------------------------------------------------------------------
   The PDF the customer carries into a studio. Chrome, the gate and every
   control are dropped; only the verdict survives.
   -------------------------------------------------------------------------- */

/* Vertical margin belongs to the PAGE. Horizontal margin belongs to the body.
 *
 * This split is the fix for a specific bug: `body` padding is applied once to
 * the start of the flow, not to every sheet, so with `@page { margin: 0 }` the
 * first page had a 12mm top gutter and pages two onward began hard against the
 * paper edge. Only `@page` repeats.
 *
 * Left and right stay at zero so the body's own 16mm keeps owning the side
 * gutters, which is what lets the header rule bleed the full width of the
 * sheet (see .czf-print-head, which pulls back out by that same 16mm).
 *
 * The cost: a top margin gives the browser somewhere to draw its own URL and
 * date line again, which zero margins used to suppress by leaving no room.
 * That is a checkbox in the visitor's own print dialog ("Headers and footers")
 * and it is the right trade - a sheet that reads correctly on every page beats
 * one that is flush to the edge from page two on. */
/* Zero page margins, on purpose.
 *
 * They leave the browser nowhere to draw its own URL, timestamp and page
 * counter, which is the only way to suppress those - they are not stylable.
 * The top gutter that pages two onward need comes from the running header
 * below instead, not from a page margin.
 *
 * `body` padding cannot provide it: padding applies once to the start of the
 * flow, not to every sheet. */
@page { margin: 0; }

.czf-print-head { display: none; }

@media print {
  .czf-header, .czf-footer, .czf-hero, .czf-rig,
  .czf-gate, .czf-verdict__acts, .czf-stage, .czf-cursor { display: none !important; }

  /* The one mechanism in CSS that repeats a block on every printed page: a
     table header group. `body` becomes the table, the masthead becomes its
     header, and the document becomes the row group - so the logo and the
     result code print at the top of every sheet, and the space they occupy IS
     the top margin for pages two onward.
     Worth more than a plain margin would be: this document gets separated at a
     studio counter, and a loose second page should still say whose it is. */
  body {
    display: table;
    width: 100%;
    padding: 0 16mm;
    background: #fff !important;
    color: #222 !important;
  }

  .czf-main--result { display: table-row-group; }

  .czf-print-head { display: table-header-group; }

  /* The band itself. It cannot be the flex row - a table-header-group has to
     stay a table-header-group - so the layout lives on an inner element. */
  .czf-print-head__row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 6mm;
    /* Pulled out to the sheet's own edges so its rule spans the page, then
       padded back in by the same 16mm - the content lines up with the body's
       margins instead of compounding with them. The top padding is the page's
       top gutter, and it repeats because this band repeats. */
    margin: 0 -16mm 8mm;
    padding: 14mm 16mm 3mm;
    border-bottom: 1px solid #ddd;
    font-family: var(--font-mono);
    font-size: 9pt;
    letter-spacing: var(--tracking-wide);
    color: #555;
  }

  .czf-print-head__logo {
    display: block;
    width: 38mm;
    height: auto;
    /* Chrome drops background graphics by default but prints <img>. The logo
       is an image element for exactly that reason - as a CSS background it
       would vanish unless the visitor found the "Background graphics" box. */
  }

  .czf-print-head__meta {
    display: flex;
    align-items: baseline;
    gap: 6mm;
    text-align: right;
  }

  .czf-print-head__code { color: #111; font-weight: var(--weight-bold); }

  /* ---------------------------------------------------------------------
     Ink.

     Every colour in this theme is tuned for a near-black surface. Printed
     unchanged onto white, `--c-ink` (#F4F2EF) is barely a tint and `--c-ink-2`
     is pale grey - which is why headings and body copy were coming out washed
     out on the sheet. The paper needs its own ramp.
     ------------------------------------------------------------------- */
  h1, h2, h3, h4,
  .czf-verdict__rx,
  .czf-studio__name,
  .czf-step h4,
  .czf-note h4 { color: #111 !important; }

  .czf-verdict__line,
  .czf-step p,
  .czf-note p,
  .czf-studio__note { color: #333 !important; }

  .czf-eyebrow { color: #555 !important; }

  /* The eyebrow's gold dash is a background on a pseudo-element, and Chrome
     drops background graphics - so "YOUR STUDIO" printed with nothing in front
     of it. A border draws either way. */
  .czf-eyebrow::before {
    background: none !important;
    box-shadow: none !important;
    border-top: 1px solid var(--c-shield);
    height: 0 !important;
  }

  .czf-result { display: block !important; }
  .czf-result.czf-section { padding-block: 0; }
  .czf-verdict { display: block !important; }
  .czf-verdict__name  { color: #111 !important; }
  .czf-verdict__score { border-color: #bbb !important; background: none !important; }
  .czf-step::before   { color: #111 !important; }

  /* ---------------------------------------------------------------------
     Pagination.

     Without these a prescription step splits across the fold: its heading
     lands at the bottom of one page and the instruction it introduces starts
     on the next, which is exactly the sentence the customer needs to read as
     one thing at a studio counter. `break-inside: avoid` moves the whole
     block instead.

     Both the modern property and the legacy `page-break-*` alias are set.
     Chrome honours `break-inside`, older WebKit and some PDF engines only
     understand the old name, and this document is going to be printed by
     whatever the customer happens to have.
     ------------------------------------------------------------------- */
  .czf-step,
  .czf-note,
  .czf-studio,
  .czf-verdict__score {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* A heading must never be the last thing on a page. */
  .czf-verdict__rx,
  .czf-step h4,
  .czf-note h4,
  .czf-studio__name {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* And never strand one line of a paragraph on its own. */
  .czf-step p,
  .czf-note p,
  .czf-verdict__line {
    orphans: 3;
    widows: 3;
  }

  /* The steps carry a gold rule drawn as a background image, and Chrome drops
     background graphics unless the visitor opts in - so on paper each step
     would lose its divider entirely. A real top border survives. */
  .czf-step {
    background-image: none !important;
    border-top: 1px solid #ddd !important;
  }

  .czf-note {
    background-image: none !important;
    background-color: transparent !important;
    border-left: 3px solid #111 !important;
  }

  /* ---------------------------------------------------------------------
     The studio card.

     Its border is `--c-line-2`, which is rgba WHITE - invisible on paper - and
     both it and the contact block are filled with dark surface colours that
     Chrome drops as background graphics. Printed unchanged, the card lost its
     outline, the phone panel lost its box, and the whole thing read as loose
     text floating under the prescription. Real borders and no fills.
     ------------------------------------------------------------------- */
  .czf-studio {
    border: 1px solid #bbb !important;
    background: none !important;
  }

  .czf-studio__contact {
    border: 1px solid #ddd !important;
    background: none !important;
  }

  .czf-studio__phone { color: #111 !important; }

  /* The card is the last thing on the sheet and the thing the customer acts
     on. It must never be the block that splits. */
  .czf-studio { break-inside: avoid; page-break-inside: avoid; }
}

/* ============================================================================
   The gate as a modal
   ========================================================================= */

.czf-modal[hidden] { display: none; }

.czf-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: var(--space-24);
  overflow-y: auto;
}

.czf-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(4, 5, 6, 0.86);
  backdrop-filter: blur(10px);
}

.czf-modal__panel {
  position: relative;
  width: min(100%, 1040px);
  max-height: calc(100svh - var(--space-48));
  overflow-y: auto;
  padding: var(--space-40);
  background: var(--grad-rig);
  border: 1px solid var(--c-line-2);
  box-shadow: var(--shadow-inset-top), var(--shadow-lg);
  animation: czf-modal-in var(--dur-slow) var(--ease-out) both;
}

@keyframes czf-modal-in {
  from { opacity: 0; transform: translateY(var(--space-24)) scale(0.985); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 767px) {
  .czf-modal { padding: 0; place-items: stretch; }
  .czf-modal__panel {
    width: 100%;
    max-height: none;
    min-height: 100svh;
    padding: var(--space-24) var(--space-20) var(--space-40);
    border: 0;
  }
}

/* The page behind a modal must not scroll. */
.czf-locked { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .czf-modal__panel { animation: none; }
}

/* ============================================================================
   Studio card and the retake CTA
   ========================================================================= */

/* Number on the left, details on the right.
   Stacked below 700px, where two columns would give the number about eight
   characters of width. The contact block is `hidden` when the studio has no
   number, and `grid` would otherwise beat the hidden attribute - hence the
   explicit guard. */
.czf-studio {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-24);
  margin-top: var(--space-48);
  padding: var(--space-32);
  border: 1px solid var(--c-line-2);
  background: var(--c-elev-1);
}

@media (min-width: 700px) {
  .czf-studio:has(.js-studio-contact:not([hidden])) {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: var(--space-40);
    /* Centred, not top-aligned. Whichever column is taller sets the row height
       and the other sits on its centre line - which one that is depends on how
       far the studio's note wraps, so neither can be treated as the anchor.
       Top-aligned, the shorter one hung from the top edge with a pool of empty
       space under it. */
    align-items: center;
  }
}

.czf-studio__contact[hidden] { display: none !important; }

.czf-studio__contact {
  display: grid;
  justify-items: start;
  gap: var(--space-8);
  padding: var(--space-20);
  border: 1px solid var(--c-line-2);
  background: var(--c-elev-2);
}

.czf-studio__icon {
  width: var(--space-24);
  height: var(--space-24);
  color: var(--c-shield);
}

.czf-studio__phone-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

/* A real link, and a big one. On a phone this is the tap target that ends the
   whole journey, so it gets a touch-sized line box rather than caption type. */
.czf-studio__phone {
  font-family: var(--font-mono);
  font-size: var(--fs-lead);
  line-height: var(--lh-tight);
  color: var(--c-ink);
  text-decoration: none;
  word-break: break-word;
  transition: color var(--dur-fast) var(--ease-out);
}

.czf-studio__phone:hover,
.czf-studio__phone:focus-visible { color: var(--c-shield); }

.czf-studio__name {
  margin-top: var(--space-12);
  font-size: var(--fs-h5);
  color: var(--c-ink);
}

.czf-studio__meta {
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  color: var(--c-shield);
}

.czf-studio__note {
  margin-top: var(--space-12);
  font-size: var(--fs-caption);
  color: var(--c-ink-2);
  max-width: var(--measure);
}

.czf-verdict__again {
  margin-top: var(--space-64);
  padding-top: var(--space-32);
  border-top: 1px solid var(--c-line);
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex-wrap: wrap;
}

.czf-verdict__again p {
  margin: 0;
  font-size: var(--fs-caption);
  color: var(--c-ink-3);
}