/*
 * Component sheet, Account Performance.
 *
 * Built to match Fabian's mockup. Every value comes from
 * docs/design-system.md, which was measured off the delivered render.
 * Templates use these class names and do not invent new ones.
 *
 * Structure: 1 base, 2 shell, 3 page head, 4 controls, 5 tabs,
 * 6 metric tiles, 7 panels, 8 status and data, 9 forms and cards,
 * 10 admin readiness, 11 states, 12 responsive, 13 print.
 */

/* --- 1 base ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); }
p { margin: 0; }
a { color: var(--color-steel-deep); text-decoration: none; }
a:hover { color: var(--color-navy); }

:focus-visible {
  outline: 2px solid var(--color-steel);
  outline-offset: 2px;
}

.stack > * + * { margin-top: var(--space-3); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.hairline { height: 1px; background: var(--color-line); border: 0; margin: var(--space-5) 0; }
.muted { color: var(--color-ink-muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* The artifact's crosshair corner marks: four plus signs centred on the
   corners of a framed section. They have to be drawn by an overlay that
   is larger than the section, because a background image is clipped to
   its own element and half of each mark falls outside the border. */
.framed,
.tile-band {
  position: relative;
  border: var(--border-hairline);
}
.framed::before,
.tile-band::before {
  content: "";
  position: absolute;
  inset: -5.5px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%23b9babb' stroke-width='1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%23b9babb' stroke-width='1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%23b9babb' stroke-width='1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M5.5 0v11M0 5.5h11' stroke='%23b9babb' stroke-width='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left top, right top, left bottom, right bottom;
}

/* --- 2 shell --------------------------------------------------------- */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }

.test-mode-banner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--page-gutter);
  padding-top: var(--space-4);
  background: var(--color-surface);
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: normal;
}
.test-mode-banner::before {
  content: "TEST MODE";
  padding: 3px var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-sky);
  color: var(--color-sky-text);
  font-family: var(--font-display);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.09em;
  flex: none;
}

.app-header {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: var(--header-height);
  padding: 0 var(--page-gutter);
  background: var(--color-surface);
  border-bottom: var(--border-hairline);
}

.app-brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-black);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink);
  white-space: nowrap;
}
.app-brand::before {
  content: "";
  width: 10px; height: 10px;
  background: var(--color-steel);
  flex: none;
}

.app-nav { display: flex; align-items: center; gap: var(--space-4); margin-left: var(--space-2); }

.app-nav-link {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-muted);
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
}
.app-nav-link:hover { color: var(--color-ink); }
.app-nav-link.is-active {
  color: var(--color-ink);
  border-bottom-color: var(--color-steel);
}

.app-header-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }

.app-switcher {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  padding: 0 var(--space-2);
  height: 32px;
  min-width: 0;
}
.app-switcher select {
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  padding: 0 var(--space-1);
  height: 30px;
  min-width: 0;
  max-width: 240px;
  text-overflow: ellipsis;
}
.app-switcher select:focus { outline: none; }
/* Keyboard users still need to see where focus is; a mouse click does not
   trigger :focus-visible on a select, so the calm look above is kept. */
.app-switcher select:focus-visible { outline: 2px solid var(--color-steel); outline-offset: 2px; }
.app-switcher-label {
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-ink-muted);
  font-weight: var(--font-weight-semibold);
}

.app-user { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-ink-muted); }

.app-main { flex: 1; }
.app-container {
  width: 100%;
  max-width: calc(var(--content-width) + 2 * var(--page-gutter));
  margin: 0 auto;
  padding: var(--space-6) var(--page-gutter) var(--space-8);
}

/* --- 3 page head ----------------------------------------------------- */
.page-header { margin-bottom: var(--space-5); }

.page-eyebrow {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-steel-deep);
  margin-bottom: var(--space-2);
}

.page-title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--letter-spacing-title);
  text-transform: uppercase;
  line-height: 1.05;
  color: var(--color-ink);
}

.page-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-ink-muted);
}

.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: var(--border-hairline);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-2);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
  background: var(--color-surface);
}
.meta-chip.is-interactive { cursor: pointer; }
.meta-chip.is-interactive:hover { border-color: var(--color-steel); color: var(--color-ink); }
.meta-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--color-line-strong); }

.page-actions { display: flex; gap: var(--space-2); margin-left: auto; }

/* --- 4 controls ------------------------------------------------------ */
.control-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
/* The artifact left-packs the whole control row and sets its action button
   immediately after the date range, not flush against the right edge. The
   spacer is the gap between the filter group and the action, nothing more. */
.control-bar .control-spacer { margin-left: var(--space-2); }
.control-block { display: flex; flex-direction: column; gap: var(--space-1); }
.control-label {
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-muted);
}

.segmented {
  display: inline-flex;
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.segmented-option {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 0;
  border-right: var(--border-hairline);
  cursor: pointer;
  white-space: nowrap;
}
.segmented-option:last-child { border-right: 0; }
.segmented-option:hover { background: var(--color-surface-sunken); }

.segmented--primary .segmented-option {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
}
.segmented--primary .segmented-option.is-active,
.segmented--primary .segmented-option[aria-current="true"] {
  background: var(--color-steel);
  color: #ffffff;
}
.segmented--primary .segmented-option.is-active:hover { background: var(--color-steel-dark); }

.segmented--soft .segmented-option.is-active {
  background: var(--color-sky);
  color: var(--color-sky-text);
}

/* the existing mode toggle markup maps onto the segmented look */
.mode-toggle { display: inline-flex; border: var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; }
.mode-toggle-option {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
  border-right: var(--border-hairline);
  white-space: nowrap;
}
.mode-toggle-option:last-child { border-right: 0; }
.mode-toggle-option:hover { background: var(--color-surface-sunken); color: var(--color-ink); }
.mode-toggle-option.is-active { background: var(--color-steel); color: #ffffff; }
.mode-toggle-option.is-active:hover { background: var(--color-steel-dark); color: #ffffff; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { background: var(--color-surface-sunken); color: var(--color-ink); }
.btn--primary {
  background: var(--color-steel);
  border-color: var(--color-steel);
  color: #ffffff;
}
.btn--primary:hover { background: var(--color-steel-dark); border-color: var(--color-steel-dark); color: #ffffff; }
.btn--ghost { background: transparent; border-color: transparent; color: var(--color-steel-deep); }
.btn--ghost:hover { background: var(--color-surface-sunken); }
.btn--sm { height: 28px; padding: 0 var(--space-3); font-size: var(--font-size-xs); }

.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field-label {
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-muted);
}
.field-input,
.field-select,
input[type="text"].field-input,
input[type="date"].field-input {
  height: 34px;
  padding: 0 var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  width: 100%;
}
.field-select { appearance: none; padding-right: var(--space-6); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a7a7d'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; }
.field-input:focus, .field-select:focus { outline: none; border-color: var(--color-steel); box-shadow: 0 0 0 2px var(--color-sky); }
.field-hint { font-size: var(--font-size-2xs); color: var(--color-ink-muted); }
.field-textarea { min-height: 88px; padding: var(--space-2) var(--space-3); border: var(--border-hairline); border-radius: var(--radius-md); background: var(--color-surface-raised); font-family: var(--font-body); font-size: var(--font-size-base); width: 100%; }

/* A money input with its currency printed inside the field, as a suffix,
   so the amount's unit is visible without a second column. */
.money-field { position: relative; display: block; }
.money-field .field-input { padding-right: 64px; }
.money-field-suffix {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-ink-muted);
  pointer-events: none;
}

.date-range-control { display: inline-flex; min-width: 0; }
.date-range-disclosure { position: relative; }
.date-range-summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink);
  cursor: pointer;
  white-space: nowrap;
  list-style: none;
}
.date-range-summary::-webkit-details-marker { display: none; }
.date-range-summary::after {
  content: "";
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--color-ink-muted);
  flex: none;
}
.date-range-summary:hover { background: var(--color-surface-sunken); }
.date-range-disclosure[open] .date-range-summary { border-color: var(--color-steel); }
.date-range-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  min-width: 560px;
  /* A floating surface over the page, never a white card: the design has
     no white surfaces. It also cannot be wider than the viewport, or the
     popover adds horizontal scroll on a phone. */
  max-width: calc(100vw - 2 * var(--page-gutter));
  display: grid;
  /* The preset select needs enough room for "Custom dates" and its
     arrow, otherwise the native control clips the label. Both date
     fields get the same floor, and Apply sits on its own row below: with
     Apply sharing the row, From was squeezed until only the day showed. */
  grid-template-columns: minmax(190px, 1.4fr) minmax(150px, 1fr) minmax(150px, 1fr);
  align-items: end;
  gap: var(--space-3);
  padding: var(--space-4);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 6px 20px rgba(29, 45, 61, 0.12);
}
.date-range-panel .field-input,
.date-range-panel .field-select { min-width: 0; }
.date-range-panel [data-date-range-apply] { grid-column: 1 / -1; justify-self: start; }
.date-range-note { color: var(--color-ink-muted); font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); }
.date-range-summary .date-range-note::before { content: "\00b7"; margin-right: var(--space-2); }

.metric-label-text {
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-ink-muted);
  font-weight: var(--font-weight-semibold);
}
.metric-label-value { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-ink); }

/* --- 5 tabs ---------------------------------------------------------- */
.tab-strip {
  display: flex;
  flex-wrap: wrap;
  /* The artifact packs the tabs and gives each one its own horizontal
     padding, so the text-to-text gap is small. The "Coming" pills are
     ours, so their margin is trimmed to keep all seven tabs on one line
     at 1200. */
  gap: 0 3px;
  border-bottom: var(--border-hairline);
}
.tab-strip::-webkit-scrollbar { display: none; }
/* The 27px gap the artifact leaves between the tab rule and the hero band.
   The stack's default 12px sibling margin is what made ours read 13px. */
.tab-strip + .tile-band { margin-top: 26px; }
/* On a tab with no source, the notice takes the same gap below the tabs. */
.tab-strip + .alert { margin-top: 26px; }

.tab-option {
  position: relative;
  padding: var(--space-3) 20px;
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tab);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.tab-option:hover { color: var(--color-ink); }
.tab-option.is-active { color: var(--color-ink); border-bottom-color: var(--color-steel); }
.tab-option.is-disabled,
.tab-option.is-coming {
  color: var(--color-ink-soft);
  cursor: default;
}
.tab-option.is-coming::after {
  content: "Coming";
  display: inline-block;
  margin-left: var(--space-1);
  padding: 1px 5px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-ink-muted);
  vertical-align: middle;
}

/* --- 6 metric tiles -------------------------------------------------- */

/* The hero band: three panels joined by shared hairlines, no gaps, with
   the artifact's crosshair corners on the band itself. */
.tile-band {
  display: grid;
  /* The artifact's dividers sit at x=395 and x=750 in a 1120px column,
     so the first two panels are 355px and the inverted ROI panel is
     409px. */
  grid-template-columns: 355fr 355fr 409fr;
  margin-bottom: var(--space-5);
}

.tile {
  padding: var(--space-4);
  border: var(--border-hairline);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.tile-band .tile {
  border: 0;
  border-right: var(--border-hairline);
  /* 29px, not the 24px token, so the label's ink starts at the artifact's
     x=71 (40px gutter + 1px border + 29px padding). Vertical padding is
     24px so the band measures the artifact's 148px. */
  padding: 24px 29px;
  gap: var(--space-2);
}
.tile-band .tile:last-child { border-right: 0; }

.tile-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
  text-transform: none;
  letter-spacing: normal;
}

.tile-value {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--letter-spacing-value);
  line-height: 1.05;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.tile-context,
.tile-delta {
  font-size: var(--font-size-xs);
  color: var(--color-ink-muted);
}
.tile-delta.is-up { color: var(--color-ok); }
.tile-delta.is-down { color: var(--color-bad); }

/* hero tiles: bigger type, uppercase letterspaced label */
.tile--hero .tile-label {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.tile--hero .tile-value { font-size: var(--font-size-3xl); }
.tile--hero .tile-context { font-size: var(--font-size-sm); }
.tile--hero.is-returned .tile-value { color: var(--color-steel-deep); }

/* the inverted ROI card */
.tile--invert {
  background: var(--color-navy);
  color: var(--color-on-navy);
}
.tile--invert .tile-label { color: var(--color-on-navy-muted); }
.tile--invert .tile-value { color: #ffffff; }
.tile--invert .tile-context { color: var(--color-on-navy-muted); }
.tile--invert .tile-chip {
  border-color: var(--color-on-navy-muted);
  color: var(--color-on-navy-muted);
  background: transparent;
}

.tile-value-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.tile-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-muted);
  background: var(--color-surface);
  white-space: nowrap;
}

/* the supporting row */
.tile-grid {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  /* Every tile in the row is one height, as in the artifact. An
     unavailable tile folds its reason behind "See why", so the row only
     grows when someone opens one. */
  align-items: stretch;
}
/* 17px: the artifact fits label, value and change line (19 + 28 + 17,
   4px gaps) in a 108px box, label ink 22px below the top edge. */
.tile-grid .tile { padding: 17px 20px; }
.tile-grid .tile-value { font-size: var(--font-size-xl); }

/* the unavailable state: deliberate, never an alarm */
.tile.is-unavailable {
  background: var(--color-surface);
  border-style: dashed;
  border-color: var(--color-line-strong);
}
.tile-band .tile.is-unavailable {
  border-right-style: dashed;
  box-shadow: inset 0 0 0 1px transparent;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(185, 186, 187, 0.07) 0 6px,
    transparent 6px 12px
  );
}
.tile.is-unavailable .tile-value { color: var(--color-ink-muted); }
.tile-unavailable-text {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-ink-muted);
  line-height: 1.4;
}
.tile.is-unavailable .tile-chip { border-style: dashed; }
.tile-why { margin-top: 4px; }
.tile-why-summary {
  display: inline-block;
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-steel-deep);
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: pointer;
  list-style: none;
}
.tile-why-summary::-webkit-details-marker { display: none; }
.tile-why[open] .tile-why-summary { margin-bottom: var(--space-1); }
.tile--invert.is-unavailable {
  background: var(--color-navy);
  border-color: var(--color-on-navy-muted);
}
.tile--invert.is-unavailable .tile-unavailable-text { color: var(--color-on-navy-muted); }

.client-label {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-steel-deep);
}

/* --- 7 panels -------------------------------------------------------- */
.panel {
  border: var(--border-hairline);
  background: var(--color-surface);
  /* 28px so the title's ink starts at the artifact's x=70. */
  padding: 28px;
}
.panel-header { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-4); }
.panel-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-black);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.panel-description { font-size: var(--font-size-sm); color: var(--color-ink-muted); margin-top: var(--space-1); }
.panel-body { min-width: 0; }

/* Campaigns match rate: figures side by side, hairline dividers, no fill. */
.match-rate-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin: 0;
}
.match-rate-figure { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.match-rate-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-ink-muted);
}
.match-rate-value {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-black);
  letter-spacing: var(--letter-spacing-value);
  line-height: 1.05;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.match-rate-value.is-empty { color: var(--color-ink-muted); }
.match-rate-detail { font-size: var(--font-size-xs); color: var(--color-ink-muted); margin: 0; overflow-wrap: anywhere; }
.match-rate-awaiting { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.match-rate-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
  font-size: var(--font-size-sm);
  color: var(--color-warn);
}
.match-rate .tile-context { margin-top: var(--space-3); }

/* Campaigns tables: money never breaks across two lines. On a phone the
   panel insets tighten, the table scrolls sideways inside its panel, and
   the first column stays put so a row keeps its name while scrolling. */
.campaigns-table td.is-numeric { white-space: nowrap; }
@media (max-width: 760px) {
  [data-campaigns-page] .panel { padding: 20px var(--space-4); }
  .campaigns-table { -webkit-overflow-scrolling: touch; }
  .campaigns-table th:first-child,
  .campaigns-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 120px;
    max-width: 150px;
    background: var(--color-surface);
    border-right: var(--border-hairline);
  }
}

.legend { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; font-size: var(--font-size-xs); color: var(--color-ink-muted); }
.legend-item { display: inline-flex; align-items: center; gap: var(--space-1); }
.legend-swatch { width: 10px; height: 10px; background: var(--color-steel); display: inline-block; }

.panel-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-4); margin-bottom: var(--space-5); }

.trend-area {
  border: var(--border-hairline);
  background: var(--color-surface);
  /* 28px so the title's ink starts at the artifact's x=70. */
  padding: 28px;
}
.trend-title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-black);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.trend-description { font-size: var(--font-size-sm); color: var(--color-ink-muted); margin-top: var(--space-1); }
.trend-placeholder {
  margin-top: var(--space-4);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-5);
  border: 1px dashed var(--color-line-strong);
  background: repeating-linear-gradient(135deg, rgba(185,186,187,0.06) 0 6px, transparent 6px 12px);
  color: var(--color-ink-muted);
  font-size: var(--font-size-xs);
}

/* The trend chart: inline SVG drawn by app/trend_chart.py. Two coordinate
   systems are printed, a wide one and a phone one, and exactly one shows.
   Text sizes are in SVG units, which the viewBox scales, so the wide
   drawing raises them as the panel narrows to keep the printed size near
   12px; the phone drawing is laid out at about 1:1. */
.trend-chart-figure { margin: var(--space-4) 0 0; min-width: 0; }
.trend-chart { display: block; width: 100%; height: auto; overflow: visible; }
.trend-chart--narrow { display: none; max-width: 480px; margin: 0 auto; }
.trend-gridline { stroke: var(--color-line); stroke-width: 1; }
.trend-axis-label { font-family: var(--font-body); font-size: 13px; fill: var(--color-ink-muted); }
.trend-axis-title {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; fill: var(--color-ink-muted);
}
.trend-bar.trend-series--outcome { fill: var(--color-steel); }
.trend-zero { stroke: var(--color-steel); stroke-width: 3; }
.trend-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trend-line.trend-series--spend { stroke: var(--color-ink); }
.trend-line.trend-series--count { stroke: var(--color-ink-muted); stroke-dasharray: 6 4; }
.trend-dot.trend-series--spend { fill: var(--color-ink); }
.trend-dot.trend-series--count { fill: var(--color-surface); stroke: var(--color-ink-muted); stroke-width: 2; }
.trend-nodata-bg { fill: var(--color-surface); }
.trend-nodata-line { stroke: var(--color-line-strong); stroke-width: 2; }
.trend-nodata-label {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; fill: var(--color-ink-muted);
  paint-order: stroke; stroke: var(--color-surface); stroke-width: 5px; stroke-linejoin: round;
}
.trend-legend { margin: var(--space-3) 0 0; padding: 0; list-style: none; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.trend-legend .legend-swatch--outcome { background: var(--color-steel); }
.trend-legend .legend-swatch--spend { width: 16px; height: 3px; background: var(--color-ink); }
.trend-legend .legend-swatch--count {
  width: 16px; height: 0; background: none; border-top: 2px dashed var(--color-ink-muted);
}
.trend-legend .legend-swatch--nodata {
  width: 14px; height: 10px; border: 1px solid var(--color-line-strong);
  background: repeating-linear-gradient(135deg, var(--color-line-strong) 0 1px, transparent 1px 4px);
}
.trend-note { margin: var(--space-2) 0 0; font-size: var(--font-size-xs); color: var(--color-ink-muted); }
@media (max-width: 1100px) {
  .trend-chart--wide .trend-axis-label, .trend-chart--wide .trend-axis-title { font-size: 14px; }
  .trend-chart--wide .trend-nodata-label { font-size: 15px; }
}
@media (max-width: 900px) {
  .trend-chart--wide .trend-axis-label, .trend-chart--wide .trend-axis-title { font-size: 17px; }
  .trend-chart--wide .trend-nodata-label { font-size: 19px; }
  .trend-chart--wide .trend-line { stroke-width: 3; }
}
@media (max-width: 760px) {
  .trend-area { padding: var(--space-4); }
  .trend-chart--wide .trend-axis-label, .trend-chart--wide .trend-axis-title { font-size: 21px; }
  .trend-chart--wide .trend-nodata-label { font-size: 24px; }
  .trend-chart--wide .trend-line { stroke-width: 4; }
  .trend-chart--wide .trend-nodata-line { stroke-width: 3; }
}
@media (max-width: 560px) {
  .trend-chart--wide { display: none; }
  .trend-chart--narrow { display: block; }
  .trend-chart--narrow .trend-axis-label, .trend-chart--narrow .trend-axis-title { font-size: 11px; }
  .trend-chart--narrow .trend-nodata-label { font-size: 11px; stroke-width: 4px; }
  .trend-chart--narrow .trend-nodata-line { stroke-width: 1.5; }
}

/* --- 8 status and data ----------------------------------------------- */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  background: var(--color-idle-soft);
  color: var(--color-idle);
  white-space: nowrap;
}
.status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.status-pill--ok { background: var(--color-ok-soft); color: var(--color-ok); }
.status-pill--warn { background: var(--color-warn-soft); color: var(--color-warn); }
.status-pill--bad { background: var(--color-bad-soft); color: var(--color-bad); }
.status-pill--idle { background: var(--color-idle-soft); color: var(--color-idle); }

.freshness-line {
  font-size: var(--font-size-xs);
  color: var(--color-ink-muted);
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
  margin-top: var(--space-5);
}
.freshness-alert {
  font-size: var(--font-size-xs);
  color: var(--color-warn);
  margin-top: var(--space-2);
}

.data-table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.web-report-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; }
.web-report-table-scroll .data-table { display: table; overflow: visible; }
@media print {
  #web-reports-root .panel { break-inside: auto; }
  .web-report-table-scroll { overflow: visible; }
  .web-report-table-scroll .data-table { table-layout: fixed; width: 100%; }
  .web-report-table-scroll .data-table th, .web-report-table-scroll .data-table td {
    white-space: normal; overflow-wrap: anywhere; padding: var(--space-1);
  }
  .web-report-table-scroll tr { break-inside: avoid; }
}
.table-scroll-hint { display: none; margin: 0 0 var(--space-2); font-size: var(--font-size-sm); }
.data-table th {
  text-align: left;
  font-size: var(--font-size-2xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-label);
  color: var(--color-ink-muted);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-hairline);
  white-space: nowrap;
}
.data-table td { padding: var(--space-3); border-bottom: var(--border-hairline); vertical-align: top; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--color-surface-sunken); }
.data-table .is-numeric { text-align: right; font-variant-numeric: tabular-nums; }
/* timestamps have no spaces, so a narrow column breaks them mid-value and
   the operator cannot read the date. Keep them whole and let the table
   widen instead; below 900px the table already scrolls sideways. */
.data-table td[data-last-success] { white-space: nowrap; }
.data-table td[data-covered-range] > * { white-space: nowrap; }

.pipeline-channel-panel { min-width: 0; margin-bottom: var(--space-5); }
.pipeline-channel-table { table-layout: fixed; }
.pipeline-channel-table th,
.pipeline-channel-table td { padding: var(--space-2) 5px; overflow-wrap: anywhere; }
.pipeline-channel-table th:first-child,
.pipeline-channel-table td:first-child { width: 34%; overflow-wrap: anywhere; }
.pipeline-channel-table th:nth-child(2),
.pipeline-channel-table td:nth-child(2) { width: 15%; }
.pipeline-channel-table th:nth-child(3),
.pipeline-channel-table td:nth-child(3) { width: 31%; }
.pipeline-channel-table th:nth-child(4),
.pipeline-channel-table td:nth-child(4) { width: 20%; }
/* "Purchases" is a longer heading than "Deals", so its table gives that
   column more room and takes it from the channel name. */
.pipeline-channel-table--purchases th:first-child,
.pipeline-channel-table--purchases td:first-child { width: 28%; }
.pipeline-channel-table--purchases th:nth-child(2),
.pipeline-channel-table--purchases td:nth-child(2) { width: 26%; }
.pipeline-channel-table--purchases th:nth-child(3),
.pipeline-channel-table--purchases td:nth-child(3) { width: 27%; }
.pipeline-channel-table--purchases th:nth-child(4),
.pipeline-channel-table--purchases td:nth-child(4) { width: 19%; }
.pipeline-channel-empty,
.pipeline-channel-unavailable,
.pipeline-channel-note { color: var(--color-ink-muted); font-size: var(--font-size-sm); }
.pipeline-channel-note { margin-top: var(--space-2); }

/* --- 9 forms and cards ----------------------------------------------- */
.card {
  border: var(--border-hairline);
  background: var(--color-surface-raised);
  margin-bottom: var(--space-4);
}
.card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-hairline);
  background: var(--color-surface);
}
.card-title {
  font-family: var(--font-display);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink);
}
.card-body { padding: var(--space-4); }
.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--font-size-xs);
  color: var(--color-ink-muted);
}
.card-actions { margin-left: auto; display: flex; gap: var(--space-2); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.form-grid .span-2 { grid-column: 1 / -1; }
.stage-picker { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.stage-option { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.stage-option-label { font-weight: 600; }
fieldset.form-grid { border: 0; margin: 0; padding: 0; }
fieldset.form-grid + fieldset.form-grid { margin-top: var(--space-6); padding-top: var(--space-6); border-top: var(--border-hairline); }
fieldset.form-grid > legend { grid-column: 1 / -1; float: left; width: 100%; padding: 0; }
fieldset.form-grid > legend + * { clear: both; }
.record-list { list-style: none; margin: 0; padding: 0; }
.record-list > li + li { border-top: var(--border-hairline); }
.form-actions { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-4); }

.section-heading {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-black);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.section-description { font-size: var(--font-size-sm); color: var(--color-ink-muted); margin-bottom: var(--space-4); max-width: 68ch; }

.alert {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline);
  border-left: 3px solid var(--color-line-strong);
  background: var(--color-surface-raised);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}
.alert--error { border-left-color: var(--color-bad); color: var(--color-bad); }
.alert--ok { border-left-color: var(--color-ok); color: var(--color-ok); }
.alert--info { border-left-color: var(--color-steel); color: var(--color-ink); }

/* --- 10 admin readiness ---------------------------------------------- */
.readiness { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.readiness-step {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-muted);
  background: var(--color-surface);
}
.readiness-step::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-line-strong); flex: none; }
.readiness-step.is-done { color: var(--color-ok); border-color: var(--color-ok); }
.readiness-step.is-done::before { background: var(--color-ok); }
.readiness-step.is-partial { color: var(--color-warn); border-color: var(--color-warn); }
.readiness-step.is-partial::before { background: var(--color-warn); }
.readiness-step.is-todo { color: var(--color-ink-muted); border-style: dashed; }

/* --- 11 states ------------------------------------------------------- */
.empty-state {
  border: 1px dashed var(--color-line-strong);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  color: var(--color-ink-muted);
  background: repeating-linear-gradient(135deg, rgba(185,186,187,0.06) 0 6px, transparent 6px 12px);
}
.empty-state-title {
  font-family: var(--font-display);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink);
  margin-bottom: var(--space-2);
}
.empty-state-body { font-size: var(--font-size-sm); max-width: 52ch; margin: 0 auto var(--space-4); }

/* htmx loading: dim the swapping region and show a top progress rail */
.htmx-indicator { opacity: 0; transition: opacity 120ms ease; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.htmx-request .tile-band,
.htmx-request .tile-grid,
.htmx-request .trend-area { opacity: 0.45; transition: opacity 120ms ease; }

.loading-bar {
  position: relative;
  height: 2px;
  overflow: hidden;
  background: var(--color-surface-sunken);
}
.loading-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background: var(--color-steel);
  animation: loading-slide 900ms linear infinite;
}
@keyframes loading-slide {
  from { transform: translateX(-100%); }
  to { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .loading-bar::after { animation: none; width: 100%; opacity: 0.4; }
}

/* --- 12 responsive --------------------------------------------------- */
/* auto-fit so a mode with three tiles fills the row instead of
   leaving dead space where the other mode's tiles would be */
.tile-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Six supporting tiles (both modes now carry six) fit no whole number of
   auto-fit columns between 761px and 1120px, which left one tile alone on a
   second row. Lay exactly six out as three by two. Other counts keep
   auto-fit; under 760px the two-column rule below applies (six is even). */
@media (min-width: 761px) {
  .tile-grid:has(> .tile:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The header holds the brand, nav, client switcher and date range on one
   line. Below about 830px that line no longer fits, so it wraps here,
   before the 760px phone layout takes over. */
@media (max-width: 900px) {
  .app-header { height: auto; flex-wrap: wrap; gap: var(--space-3); padding-top: var(--space-3); padding-bottom: var(--space-3); }
  .app-header-right { margin-left: 0; width: 100%; flex-wrap: wrap; }
}

@media (max-width: 1080px) {
  .tile-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .panel-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --page-gutter: var(--page-gutter-sm); }
  .app-header { height: auto; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--page-gutter-sm); }
  .app-header-right { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .app-container { padding: var(--space-5) var(--page-gutter-sm) var(--space-7); }
  .page-title { font-size: 26px; }
  .tile-band { grid-template-columns: 1fr; }
  .tile-band .tile { border-right: 0; border-bottom: var(--border-hairline); }
  .tile-band .tile:last-child { border-bottom: 0; }
  .tile--hero .tile-value { font-size: 34px; }
  .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Seven tabs wrapped onto four rows at 390px. On a phone they stay on
     one line and the strip scrolls sideways inside the page. */
  .tab-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tab-option { flex: 0 0 auto; padding: var(--space-3) 14px; }
  .form-grid { grid-template-columns: 1fr; }
  .control-bar { gap: var(--space-2); }
  .segmented-option, .mode-toggle-option { padding: 0 var(--space-3); }
  .data-table { display: block; overflow-x: auto; }
  .table-scroll-hint { display: block; }
  .pipeline-channel-table { display: table; overflow: visible; }
  .pipeline-channel-panel { padding: var(--space-4); }
  /* The date range disclosure has to fit a phone: the summary drops its
     development note and the popover stacks its fields instead of running
     560px wide and adding horizontal scroll. */
  .date-range-summary { max-width: 100%; }
  .date-range-note { display: none; }
  .date-range-panel {
    width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
}

/* Very small phones: tighter headings and padding keep four columns on one
   line each, so the table still fits the panel without sideways scroll. */
@media (max-width: 360px) {
  .pipeline-channel-table th { letter-spacing: 0; font-size: 10px; }
  .pipeline-channel-table th,
  .pipeline-channel-table td { padding-left: 3px; padding-right: 3px; }
  .pipeline-channel-table td:last-child { white-space: nowrap; }
}

/* --- 13 print --------------------------------------------------------- */
@media print {
  @page { margin: 14mm; }
  body { background: #ffffff; }
  .app-header,
  .control-bar,
  .tab-strip,
  .page-actions,
  .btn { display: none !important; }
  /* the band is a tint on screen; a printer may drop the tint, so the
     badge keeps an outline on paper or the printed sheet loses the warning. */
  .test-mode-banner { background: #ffffff; color: var(--color-ink); }
  .test-mode-banner::before { color: var(--color-ink); border: 1px solid var(--color-ink); }
  .app-container { max-width: none; padding: 0; }
  .tile-band, .tile, .panel, .trend-area { break-inside: avoid; }
  .tile--invert { background: #ffffff !important; color: var(--color-ink) !important; border: 2px solid var(--color-navy); }
  .tile--invert .tile-value { color: var(--color-navy) !important; }
  .tile--invert .tile-label, .tile--invert .tile-context { color: var(--color-ink-muted) !important; }
  .freshness-line { color: var(--color-ink); }
  .freshness-alert { color: var(--color-ink); font-weight: var(--font-weight-semibold); }
  .tile-why-summary { display: none; }
}

/* ------------------------------------------------------------------
   14. Sign in
   The only chrome-free page. It extends the shell with an empty
   chrome block, so the frame here comes from .auth-* alone.
   ------------------------------------------------------------------ */

.auth-main {
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--page-gutter);
}

.auth-card {
  width: 100%;
  max-width: 380px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: var(--space-7);
  background: var(--color-surface-raised);
}

.auth-eyebrow {
  font-family: var(--font-display);
  font-size: var(--font-size-2xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-2);
}

.auth-title {
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
}

.auth-subtitle {
  margin: 0 0 var(--space-5);
  color: var(--color-ink-muted);
  font-size: var(--font-size-sm);
}

.auth-card .field { margin-bottom: var(--space-4); }

.auth-card .btn--primary { width: 100%; justify-content: center; }

.auth-footnote {
  margin: var(--space-5) 0 0;
  font-size: var(--font-size-2xs);
  color: var(--color-ink-soft);
  text-align: center;
}

/* ------------------------------------------------------------------
   15. Disclosure cards
   A <details class="card"> whose <summary class="card-header"> needs a
   visible affordance, otherwise the operator cannot tell the panel
   opens at all.
   ------------------------------------------------------------------ */

details.card > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--color-ink-muted);
  border-bottom: 1.5px solid var(--color-ink-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 120ms ease;
}
details.card[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}
details.card > summary:hover { background: var(--color-surface-sunken); }
details.card > summary:focus-visible {
  outline: 2px solid var(--color-steel);
  outline-offset: -2px;
}

/* ------------------------------------------------------------------
   16. Guide
   The in-app guide at /guide. A section list on the left on a wide
   screen, a sideways-scrolling row of links on a phone, then numbered
   sections with a screenshot of each screen. No card fill: this is a
   client-facing page like the Overview.
   ------------------------------------------------------------------ */

.guide-meta { font-size: var(--font-size-xs); color: var(--color-ink-muted); }

.guide-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.guide-toc {
  position: sticky;
  top: var(--space-5);
  border: var(--border-hairline);
  padding: var(--space-4);
}
.guide-toc-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.guide-toc-link {
  display: flex;
  gap: var(--space-2);
  padding: 6px 0;
  font-size: var(--font-size-sm);
  color: var(--color-ink);
  text-decoration: none;
}
.guide-toc-link:hover { color: var(--color-steel-deep); text-decoration: underline; }
.guide-toc-num { min-width: 16px; color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }

.guide-body { min-width: 0; }
.guide-section {
  scroll-margin-top: var(--space-5);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-6);
  border-bottom: var(--border-hairline);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}
.guide-section:last-child { border-bottom: 0; margin-bottom: 0; }
.guide-section > p,
.guide-section > ul,
.guide-section > ol,
.guide-section > dl { max-width: 72ch; margin-bottom: var(--space-4); }

.guide-section-head { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-4); }
.guide-num {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-navy);
  color: var(--color-on-navy);
  font-family: var(--font-display);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}
.guide-kicker {
  font-family: var(--font-display);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-steel-deep);
}
.guide-section-head .section-heading { margin-bottom: var(--space-1); }
.guide-lede { color: var(--color-ink-muted); max-width: 68ch; }

.guide-figure { margin: 0 0 var(--space-5); }
.guide-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.guide-figure--narrow { max-width: 404px; }
.guide-caption { margin-top: var(--space-2); font-size: var(--font-size-xs); color: var(--color-ink-muted); }

.guide-steps,
.guide-list { padding-left: 20px; }
.guide-steps > li + li,
.guide-list > li + li { margin-top: var(--space-2); }

.guide-terms dt { font-weight: var(--font-weight-semibold); color: var(--color-ink); }
.guide-terms dd { margin: 2px 0 var(--space-3); color: var(--color-ink); }

.guide-tip {
  max-width: 72ch;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline);
  border-left: 3px solid var(--color-steel);
}

.guide-table { margin-bottom: var(--space-4); }

@media (max-width: 760px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  /* On a phone the section list is one sideways-scrolling row of links,
     so it never pushes the first section below the fold. */
  .guide-toc { position: static; border: 0; padding: 0; }
  .guide-toc .guide-kicker { display: none; }
  .guide-toc-list { display: flex; gap: var(--space-2); margin: 0; overflow-x: auto; scrollbar-width: none; padding-bottom: var(--space-1); }
  .guide-toc-list > li { flex: 0 0 auto; }
  .guide-toc-link { padding: 6px var(--space-3); border: var(--border-hairline); border-radius: var(--radius-pill); white-space: nowrap; }
  .guide-section-head { gap: var(--space-3); }
  .guide-num { width: 28px; height: 28px; }
}

@media print {
  .guide-layout { display: block; }
  .guide-toc { display: none; }
  .guide-figure { break-inside: avoid; }
}