/* ============================================================================
   Direction 03 | Executive Benchmark
   Defining idea – the instrument is a document. The respondent is not filling
   in a form; they are working through a chapter of an independent report that
   happens to require their evidence. Editorial grid, hairline rules, folio
   spine, plates rather than widgets, and motion slow enough to read as ink
   settling on paper.
   ========================================================================== */

[data-treatment="executive"] {
  --bg: #EFEDE8;
  --bg-raised: var(--brand-white);
  --bg-sunken: var(--brand-paper);
  --line: var(--brand-rule-light);
  --line-strong: var(--brand-rule);

  /* Editorial, but calibrated for a long-form production instrument. */
  --tempo: 0.92;
  --ease-scene: var(--ease-editorial);
  --dist-scene: 18px;
  --stagger: 65ms;
}

/* -- Masthead -------------------------------------------------------------- */

.ex-masthead {
  width: min(var(--shell-max), 100%);
  margin-inline: auto;
  padding: var(--space-5) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.ex-brand .brand-mark { width: 100px; }

.ex-masthead__title {
  margin-inline: auto;
  font-family: var(--font-display);
  font-size: var(--type-small);
  color: var(--fg-muted);
}

.ex-exit {
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-strong);
  text-decoration: none;
  padding: var(--space-2) 0;
}
.ex-exit:hover { color: var(--accent-ink); }

/* -- The sheet ------------------------------------------------------------- */

.ex-sheet {
  flex: 1;
  width: min(1180px, calc(100% - var(--gutter) * 2));
  margin-inline: auto;
  margin-bottom: var(--space-8);
  padding: clamp(20px, 3vw, 48px) clamp(16px, 3vw, 56px) clamp(32px, 4vw, 64px);
  background: var(--bg-raised);
  border: 1px solid var(--line-strong);
  box-shadow: var(--elev-2);
}

/* -- Running head ---------------------------------------------------------- */

.ex-runninghead {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
}

.ex-runninghead__edition {
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.ex-runninghead__rule {
  height: 1px;
  background: var(--line-strong);
  transform-origin: left center;
  animation: m-rule-attention calc(var(--dur-scene) * var(--tempo)) var(--ease-editorial) both;
}

.ex-runninghead__progress {
  grid-column: 1 / -1;
  padding-top: var(--space-4);
  border-top: var(--border-rule) solid var(--fg-strong);
}

[data-treatment="executive"] .progress__label {
  font-size: var(--type-body);
}
[data-treatment="executive"] .progress__tick-label {
  font-family: var(--font-display);
  font-size: var(--type-caption);
  letter-spacing: 0;
  text-transform: none;
}
[data-treatment="executive"] .progress__tick-bar { height: 2px; border-radius: 0; }
[data-treatment="executive"] .progress__tick-bar::after { background: var(--brand-navy); }

/* -- Editorial grid: folio spine | text column | margin -------------------- */

.ex-main {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) 268px;
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  padding-top: var(--space-6);
}

.ex-spine {
  position: sticky;
  top: var(--space-5);
  display: grid;
  justify-items: center;
  border-right: 1px solid var(--line);
  padding-right: var(--space-4);
  min-height: 220px;
}

.ex-folio {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.4vw, 4.2rem);
  line-height: 1;
  color: var(--brand-navy);
  opacity: 0.16;
  animation: m-question-in calc(var(--dur-scene) * var(--tempo)) var(--ease-editorial) backwards;
}

.ex-stage { min-width: 0; }

/* -- Margin notes and plates ---------------------------------------------- */

.ex-margin {
  position: sticky;
  top: var(--space-5);
  display: grid;
  gap: var(--space-6);
  min-width: 0;
  border-left: 1px solid var(--line);
  padding-left: var(--space-5);
}

.ex-margin__notes {
  display: grid;
  gap: var(--space-3);
  animation: m-question-in calc(var(--dur-scene) * var(--tempo)) var(--ease-editorial) backwards;
  animation-delay: var(--stagger);
}

.ex-chapter {
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-ink);
}

.ex-margin__title {
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: var(--leading-snug);
  color: var(--fg-strong);
}

.ex-margin__body {
  font-size: var(--type-small);
  line-height: 1.55;
  color: var(--fg-muted);
  text-wrap: pretty;
}

.ex-evidence {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.ex-evidence__item {
  display: grid;
  gap: 2px;
}
.ex-evidence__figure {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--type-heading);
  color: var(--brand-navy);
}
.ex-evidence__note {
  font-size: var(--type-caption);
  line-height: 1.45;
  color: var(--fg-subtle);
}

.ex-dimensions { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.ex-dimensions > p { margin: 0; color: var(--fg-strong); font-size: 9px; font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.ex-dimensions ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; margin: 0; padding: 0; list-style: none; }
.ex-dimensions li { min-width: 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 4px; min-height: 32px; padding: 4px 5px; border: 1px solid var(--line); background: var(--bg-raised); }
.ex-dimensions b { color: var(--accent-ink); font-family: var(--font-num); font-size: 9px; }
.ex-dimensions span { min-width: 0; color: var(--fg-subtle); font-size: 8px; line-height: 1.12; }
.ex-dimensions li[data-complete="true"] { background: var(--brand-teal-light); border-color: #A9DCE6; }
.ex-dimensions li[data-current="true"] { background: var(--brand-navy); border-color: var(--brand-navy); box-shadow: inset 0 -2px 0 var(--brand-teal); }
.ex-dimensions li[data-current="true"] b { color: #8FDAEA; }
.ex-dimensions li[data-current="true"] span { color: var(--brand-white); }

.ex-pull {
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--type-small);
  line-height: 1.55;
  color: var(--fg-muted);
}
.ex-pull cite {
  display: block;
  margin-top: var(--space-2);
  font-style: normal;
  font-family: var(--font-body);
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.ex-plate {
  margin: 0;
  padding: var(--space-4) var(--space-2) var(--space-3);
  border: 1px solid var(--line-strong);
  background: var(--bg-sunken);
  animation: m-question-in calc(var(--dur-scene) * var(--tempo)) var(--ease-editorial) backwards;
  animation-delay: calc(var(--stagger) * 2);
}

.ex-plate__body { display: grid; }

/* -- Scene typography ------------------------------------------------------
   The question is set as a headline in a printed report, not a form label.  */

.scene { max-width: 40rem; }

.scene__display {
  font-size: var(--type-display);
  line-height: 1.08;
  letter-spacing: var(--tracking-display);
}

.scene__title {
  font-size: var(--type-title);
  line-height: 1.16;
}

.scene__title--statement {
  max-width: 26ch;
}

[data-treatment="executive"] .eyebrow { color: var(--fg-subtle); }
[data-treatment="executive"] .lead { color: var(--brand-ink-3); }

/* -- Interactive benchmark orientation ----------------------------------- */

.benchmark-lens { display: grid; gap: var(--space-4); }
.benchmark-lens__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 1px; background: var(--line); }
.benchmark-lens__tab { min-width: 0; min-height: 60px; display: grid; align-content: center; gap: 2px; padding: 10px 13px; border: 0; background: var(--bg-raised); text-align: left; cursor: pointer; }
.benchmark-lens__tab span { color: var(--brand-navy); font-family: var(--font-display); font-size: var(--type-body); font-weight: 600; }
.benchmark-lens__tab small { color: var(--fg-subtle); font-size: var(--type-caption); }
.benchmark-lens__tab[aria-pressed="true"] { background: var(--brand-navy); box-shadow: inset 0 -3px 0 var(--brand-teal); }
.benchmark-lens__tab[aria-pressed="true"] span { color: var(--brand-white); }
.benchmark-lens__tab[aria-pressed="true"] small { color: #D7E7F4; }
.benchmark-lens__tab:focus-visible,
.benchmark-lens__topic:focus-visible { position: relative; z-index: 2; outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 4px var(--focus-halo); }

.benchmark-lens__explorer { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(190px, .92fr); gap: var(--space-4); align-items: stretch; }
.benchmark-lens__topics { min-width: 0; display: grid; align-content: start; gap: 1px; padding: 1px; background: var(--line); }
.benchmark-lens[data-framework="coverage"] .benchmark-lens__topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.benchmark-lens__topic { position: relative; min-width: 0; min-height: 52px; display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 10px; border: 0; background: var(--bg-raised); text-align: left; cursor: pointer; }
.benchmark-lens__topic:hover { background: var(--bg-sunken); }
.benchmark-lens__topic[aria-pressed="true"] { background: var(--brand-teal-light); box-shadow: inset 3px 0 0 var(--brand-navy); }
.benchmark-lens__topic > b { color: var(--accent-ink); font-family: var(--font-num); font-size: 11px; }
.benchmark-lens__topic strong { display: block; color: var(--brand-navy); font-size: 12px; line-height: 1.2; }
.benchmark-lens__topic small { display: block; margin-top: 2px; color: var(--fg-subtle); font-size: 9px; line-height: 1.2; }

.benchmark-lens__insight { position: relative; min-width: 0; min-height: 236px; display: flex; flex-direction: column; align-items: flex-start; padding: 20px 18px; overflow: hidden; color: var(--brand-white); background: var(--brand-navy); }
.benchmark-lens__insight::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--brand-teal); transform-origin: left; animation: m-rule-attention calc(var(--dur-scene) * var(--tempo)) var(--ease-editorial) both; }
.benchmark-lens__insight > p { margin: 0 0 8px; color: #8FDAEA; font-size: 9px; font-weight: 700; letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; }
.benchmark-lens__insight h2 { margin: 0; color: var(--brand-white); font-family: var(--font-display); font-size: var(--type-heading); font-weight: 500; line-height: 1.15; }
.benchmark-lens__insight > span { display: block; margin-top: auto; padding-top: var(--space-4); color: #D7E7F4; font-size: var(--type-small); line-height: 1.5; }
.benchmark-lens__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--space-4); }
.benchmark-lens__tags span { padding: 3px 5px; border: 1px solid rgba(255,255,255,.28); color: var(--brand-white); font-size: 8px; letter-spacing: .06em; text-transform: uppercase; }
.benchmark-lens__cue { margin: 0; color: var(--fg-subtle); font-size: var(--type-caption); }
.benchmark-lens__standard { display: flex; flex-wrap: wrap; gap: 5px 9px; margin: 0; color: var(--fg-subtle); font-size: var(--type-caption); }
.benchmark-lens__standard strong { color: var(--brand-navy); letter-spacing: .07em; text-transform: uppercase; }
.benchmark-lens__standard span { overflow-wrap: anywhere; }

/* -- Executive control character ------------------------------------------
   Ruled rows rather than cards. The list reads as a table of options in a
   document, and selection is an ink mark against one line.                  */

[data-treatment="executive"] .choice-list { gap: 0; }

[data-treatment="executive"] .choice {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding-inline: var(--space-2);
}
[data-treatment="executive"] .choice:first-child { border-top: 1px solid var(--line); }
[data-treatment="executive"] .choice:hover {
  background: var(--bg-sunken);
  transform: none;
}
[data-treatment="executive"] .choice[data-selected="true"] {
  background: transparent;
  border-color: var(--brand-navy);
  box-shadow: inset 3px 0 0 0 var(--brand-navy);
}
/* Selection is marked by the navy inset rule and weight only. Swapping the
   label's face on selection would reflow the row – a jump, not a mark. */
[data-treatment="executive"] .choice-list--split {
  gap: 0 var(--space-6);
}

[data-treatment="executive"] .scale { gap: 0; }
[data-treatment="executive"] .scale__option {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding-inline: var(--space-2);
}
[data-treatment="executive"] .scale__option:first-child { border-top: 1px solid var(--line); }
[data-treatment="executive"] .scale__option:hover { background: var(--bg-sunken); transform: none; }
[data-treatment="executive"] .scale__option[data-selected="true"] {
  background: transparent;
  box-shadow: inset 3px 0 0 0 var(--brand-navy);
  border-color: var(--brand-navy);
}
[data-treatment="executive"] .scale__option--na {
  border: 1px dashed var(--line-strong);
  margin-top: var(--space-4);
}
[data-treatment="executive"] .scale__option--na::before { display: none; }
[data-treatment="executive"] .scale__rung[data-on="true"] { background: var(--brand-navy); }
[data-treatment="executive"] .scale__option[data-selected="true"] .scale__rung[data-on="true"] { background: var(--brand-navy); }
[data-treatment="executive"] .choice__marker { border-radius: 0; }
[data-treatment="executive"] .choice__dot { border-radius: 0; background: var(--brand-navy); }
[data-treatment="executive"] .choice__check { color: var(--brand-navy); }

[data-treatment="executive"] .btn { border-radius: 0; }
[data-treatment="executive"] .btn--primary {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
[data-treatment="executive"] .btn--primary:hover { background: var(--brand-navy-dark); border-color: var(--brand-navy-dark); }
[data-treatment="executive"] .btn--ghost { letter-spacing: var(--tracking-caps); text-transform: uppercase; }

[data-treatment="executive"] .listbox__trigger,
[data-treatment="executive"] .listbox__panel,
[data-treatment="executive"] .listbox__option,
[data-treatment="executive"] .text-field,
[data-treatment="executive"] .reference,
[data-treatment="executive"] .consent { border-radius: 0; }

[data-treatment="executive"] .trust__item::before { border-radius: 0; width: 4px; height: 4px; }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}
.contact-grid .field + .field { margin-top: 0; }

/* -- Production instrument ------------------------------------------------ */

.progress--production .progress__track {
  height: 3px;
  background: var(--brand-rule-light);
  overflow: hidden;
}

.progress--production .progress__fill {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  background: var(--brand-navy);
}

.profile-fields {
  display: grid;
  gap: var(--space-7);
}

.field--production + .field--production {
  margin-top: 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.question-ref {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  color: var(--accent-ink);
}

.select-field {
  width: 100%;
  min-height: 52px;
  margin-top: var(--space-3);
  color: var(--fg-strong);
  background: var(--brand-white);
}

.choice-list--compact .choice {
  padding-block: var(--space-3);
}

.choice--check .choice__marker { border-radius: 0; }
.choice--check .choice__check { opacity: 0; transform: scale(.7); }
.choice--check[data-selected="true"] .choice__check { opacity: 1; transform: scale(1); }

.other-field {
  margin-top: var(--space-4);
  padding-left: var(--space-5);
  border-left: 2px solid var(--brand-navy);
}

.other-field label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* -- Q94 propensity scale (0-10) ------------------------------------------
   Eleven ruled cells in the Executive language: square, hairline, ink-marked
   on selection. Reflows to two rows below 460px so every cell stays above the
   44px touch target - 11 columns cannot fit a 320px screen honestly. */

.propensity { display: grid; gap: var(--space-3); }

.propensity__scale {
  display: grid;
  grid-template-columns: repeat(11, minmax(34px, 1fr));
  gap: 2px;
}

.propensity__option {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 48px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  cursor: pointer;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: var(--type-body);
  color: var(--fg-muted);
  transition: var(--t-control);
}

.propensity__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.propensity__option:hover {
  border-color: var(--line-strong);
  background: var(--bg-sunken);
  color: var(--fg-strong);
}

.propensity__option:has(:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--focus-halo);
  z-index: 1;
}

.propensity__option[data-selected="true"] {
  background: var(--brand-navy);
  border-color: var(--brand-navy);
  color: var(--brand-white);
  font-weight: 700;
}

.propensity__anchors {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--type-caption);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

/* ============================================================================
   Responsive
   The editorial grid is 84px spine + 1fr question + 268px margin = 352px of
   FIXED columns. On a 320px viewport that crushes the question column to zero
   width, and shell{overflow-x:clip} hides the overflow - so it fails silently
   with nothing to answer. The fixed columns must therefore give way in stages:
   margin first (it is commentary), then the spine (it is decoration). The
   question column is the product and never yields.
   ========================================================================== */

@media (max-width: 1100px) {
  .ex-main { grid-template-columns: 64px minmax(0, 1fr) 236px; }
  .ex-folio { font-size: 2.4rem; }
}

@media (max-width: 900px) {
  /* Margin notes drop below the question rather than compete with it. */
  .ex-main {
    grid-template-columns: 56px minmax(0, 1fr);
    row-gap: var(--space-7);
  }
  .ex-margin {
    grid-column: 1 / -1;
    position: static;
    border-left: 0;
    border-top: var(--border-rule) solid var(--fg-strong);
    padding-left: 0;
    padding-top: var(--space-5);
    grid-template-columns: minmax(0, 1fr) minmax(0, 260px);
    align-items: start;
  }
  .ex-spine { min-height: 0; }
  .scene { max-width: none; }
}

@media (max-width: 700px) {
  /* The folio spine is decoration. Below this it costs more than it says. */
  .ex-main { grid-template-columns: minmax(0, 1fr); }
  .ex-spine { display: none; }
  .ex-margin { grid-template-columns: minmax(0, 1fr); }
  [data-treatment="executive"] .choice-list--split { gap: 0; }
  .benchmark-lens__explorer { grid-template-columns: minmax(0, 1fr); }
  .benchmark-lens__insight { grid-row: 1; min-height: 210px; }
}

@media (max-width: 640px) {
  .ex-masthead { padding-block: var(--space-4); }
  .ex-masthead__title { display: none; }
  .ex-sheet {
    width: 100%;
    border-left: 0;
    border-right: 0;
    margin-bottom: var(--space-6);
  }
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 460px) {
  /* Eleven cells cannot sit on a 320px screen and stay above a 44px touch
     target. Two rows of six is honest; shrinking to 22px cells is not. */
  .propensity__scale { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .propensity__anchors { font-size: 10px; }
  .benchmark-lens__tabs,
  .benchmark-lens[data-framework="coverage"] .benchmark-lens__topics { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 319px) {
  /* Compact browser panes and legacy 280px devices still receive full text
     and honest touch targets. Four columns avoid forcing the scale wider than
     the question track. */
  .ex-brand .brand-mark { width: 84px; }
  .ex-masthead { gap: var(--space-3); }
  .propensity__scale { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}