/* The Gideon Index product UI. Design tokens are Section 14.2 verbatim.
   Hand written rather than compiled: this service has no Node toolchain, and the
   product surface is small enough that a build step would cost more than it saves.
   Section 14.2: "Product UI (/app, /assess) uses the same tokens with a left nav
   (client) and centered single column (candidate)." */

/* GLASS, AND WHY IT LIVES ONLY IN THIS FILE
   ------------------------------------------------------------------------------
   The team and individual reports render from ONE set of templates onto two
   surfaces: these /app pages, which link this stylesheet, and the PDF, which
   inlines reports/_shell.html's own <style> block because WeasyPrint is called with
   no base_url and cannot fetch an external stylesheet.

   That split is what makes this possible. The PDF never loads this file, so every
   glass rule below is invisible to it: identical markup, two visual registers, and
   no risk of a frosted panel reaching a printed client deliverable. WeasyPrint
   supports neither backdrop-filter nor JavaScript, so a glassy interactive PDF was
   never on the table — and a document that gets printed and emailed should not be
   one. Restraint on the deliverable, depth on the product.

   CONTRAST IS THE THING GLASS BREAKS FIRST. A translucent panel lowers the
   effective background lightness under text, so --glass sits at 0.66 white and
   --glass-solid at 0.82 is used wherever dense body copy runs. Ink stays #111214
   throughout. Every blur has an @supports fallback to an opaque surface, and the
   whole motion layer is behind prefers-reduced-motion. */
:root {
  --bg: #FAFAF8;
  --surface: #FFFFFF;
  --ink: #111214;
  --muted: #6B6F76;
  --accent: #0F6E56;
  --accent-tint: #E1F5EE;
  --warn: #BA7517;
  --border: rgba(17, 18, 20, 0.08);
  --radius-card: 12px;
  --radius-control: 8px;
  --max: 1120px;

  /* --- glass ------------------------------------------------------------- */
  --glass: rgba(255, 255, 255, 0.66);
  --glass-solid: rgba(255, 255, 255, 0.82);
  --glass-quiet: rgba(255, 255, 255, 0.44);
  /* A top-lit edge is what reads as a pane rather than a tinted box. */
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-ring: rgba(17, 18, 20, 0.07);
  --blur: 20px;
  --blur-sm: 12px;
  /* Layered rather than one big shadow: a tight contact shadow plus a wide soft
     one is what separates a floating pane from a card with a drop shadow. */
  --lift: 0 1px 2px rgba(17, 18, 20, 0.04),
          0 8px 24px -8px rgba(17, 18, 20, 0.10),
          0 24px 48px -24px rgba(17, 18, 20, 0.14);
  --lift-hi: 0 1px 2px rgba(17, 18, 20, 0.05),
             0 12px 32px -8px rgba(17, 18, 20, 0.14),
             0 36px 64px -28px rgba(17, 18, 20, 0.20);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* Shared with the report shell's token set (app/templates/reports/_shell.html)
     so a dimension row looks identical whether it is read on the team page or in
     the printable report -- same visual grammar, same meaning. */
  --track: #EFEFEA;
  --hairline: #E4E3DD;
  --ink-2: #52514E;
  --band: #D9EFE7;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* WITHOUT THIS, THE GLASS LOOKS LIKE NOTHING.
   backdrop-filter blurs whatever is behind the element, so over a flat #FAFAF8 it
   produces flat #FAFAF8 and every panel reads as a slightly grey box. These two
   fixed washes give it something to actually refract: one in the brand green, one
   warm neutral, both far too faint to compete with the accent's real job as the
   data mark. Fixed rather than scrolling so panels pick up a different part of the
   gradient as the page moves, which is where the sense of depth comes from. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58rem 40rem at 12% -8%, rgba(15, 110, 86, 0.10), transparent 60%),
    radial-gradient(46rem 34rem at 100% 4%, rgba(186, 117, 23, 0.07), transparent 62%),
    radial-gradient(52rem 40rem at 72% 108%, rgba(15, 110, 86, 0.07), transparent 60%);
}

h1, h2, h3 { letter-spacing: -0.02em; margin: 0 0 12px; font-weight: 600; }
h1 { font-size: 34px; line-height: 1.2; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
p { margin: 0 0 16px; }
a { color: var(--accent); }

.muted { color: var(--muted); }
.small { font-size: 15px; }
.tiny { font-size: 13px; }
.center { text-align: center; }
/* Keeps paired links ("HTML · PDF") on one line in a table cell. */
.nowrap { white-space: nowrap; }
a.muted { color: var(--muted); }
.stack > * + * { margin-top: 16px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.spread { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.grow { flex: 1 1 auto; }

/* --- chrome --------------------------------------------------------------- */

.topbar {
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(180%);
  backdrop-filter: blur(var(--blur)) saturate(180%);
  border-bottom: 1px solid var(--glass-ring);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  position: sticky;
  top: 0;
  z-index: 20;
}
.topbar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.wordmark {
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
}
.wordmark span { color: var(--accent); }
.topbar nav { display: flex; gap: 20px; margin-left: auto; align-items: center; }
.topbar nav a { color: var(--muted); text-decoration: none; font-size: 15px; }
.topbar nav a:hover, .topbar nav a[aria-current='page'] { color: var(--ink); }

.shell { max-width: var(--max); margin: 0 auto; padding: 48px 24px 96px; }
.narrow { max-width: 640px; margin: 0 auto; padding: 48px 24px 96px; }

/* --- surfaces ------------------------------------------------------------- */

.card {
  position: relative;
  background: var(--glass);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(170%);
  backdrop-filter: blur(var(--blur)) saturate(170%);
  border: 1px solid var(--glass-ring);
  border-radius: 16px;
  padding: 26px;
  box-shadow: var(--lift), inset 0 1px 0 var(--glass-edge);
  transition: box-shadow 260ms var(--ease), transform 260ms var(--ease);
}
/* Cards carrying dense body copy sit on the more opaque tier: readability wins over
   translucency every time they conflict. */
.card:has(table),
.card:has(p + p),
.card:has(.matrix) { background: var(--glass-solid); }
.card + .card { margin-top: 20px; }

/* The hero pane. One per page at most -- the Fit Index numeral is the signature
   element (Section 14.2), and giving a second panel the same weight would spend the
   emphasis twice. */
.card-hero {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.52)),
    radial-gradient(28rem 18rem at 88% -20%, rgba(15, 110, 86, 0.16), transparent 65%);
  box-shadow: var(--lift-hi), inset 0 1px 0 var(--glass-edge);
}
.grid { display: grid; gap: 20px; }
@media (min-width: 760px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  /* Four across, for the founder console's completion counts. The four stages of an
     invitation (completed / in progress / opened, not started / not opened) are one
     reading, so they belong on one row; dropping one into a second row implies it is
     a different kind of thing. */
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.stat { font-size: 34px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--muted); font-size: 15px; }

/* The signature element (Section 14.2): the Fit Index numeral. */
.fit-index {
  font-size: 84px;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  color: var(--accent);
}

/* --- controls ------------------------------------------------------------- */

.btn {
  display: inline-block;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  padding: 11px 20px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  background: var(--ink);
  color: #fff;
  min-height: 44px;
}
.btn {
  box-shadow: 0 1px 2px rgba(17, 18, 20, 0.16),
              inset 0 1px 0 rgba(255, 255, 255, 0.16);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease),
              opacity 160ms var(--ease);
}
.btn:hover {
  opacity: 0.94;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(17, 18, 20, 0.18),
              0 10px 22px -10px rgba(17, 18, 20, 0.30),
              inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-secondary {
  background: var(--glass-solid);
  -webkit-backdrop-filter: blur(var(--blur-sm));
  backdrop-filter: blur(var(--blur-sm));
  color: var(--ink);
  border-color: var(--glass-ring);
  box-shadow: 0 1px 2px rgba(17, 18, 20, 0.05),
              inset 0 1px 0 var(--glass-edge);
}
.btn-link { background: none; color: var(--accent); border: 0; padding: 0; min-height: 0;
            box-shadow: none; }
.btn-link:hover { transform: none; box-shadow: none; }

label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 6px; }
input[type='text'], input[type='email'], input[type='password'], select {
  width: 100%;
  font: inherit;
  font-size: 16px; /* under 16px iOS zooms the viewport on focus */
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  min-height: 44px;
}
input:focus-visible, select:focus-visible, .btn:focus-visible, .choice:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.field + .field { margin-top: 16px; }
.hint { color: var(--muted); font-size: 13px; margin-top: 6px; }

input[type='text'], input[type='email'], input[type='password'],
input[type='number'], select {
  background: var(--glass-solid);
  -webkit-backdrop-filter: blur(var(--blur-sm));
  backdrop-filter: blur(var(--blur-sm));
  border-color: var(--glass-ring);
  box-shadow: inset 0 1px 2px rgba(17, 18, 20, 0.04);
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
input:hover, select:hover { border-color: rgba(17, 18, 20, 0.16); }

/* NO BLUR SUPPORT -> OPAQUE, NOT TRANSLUCENT.
   A translucent panel with no blur behind it is unreadable rather than merely
   plainer, so the fallback raises opacity instead of leaving the tint. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar, .card, .btn-secondary,
  input[type='text'], input[type='email'], input[type='password'],
  input[type='number'], select { background: var(--surface); }
  .card { background: var(--surface); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .btn:hover { transform: none; }
}

/* Someone printing an /app page should get the report's register, not a screenshot
   of frosted panels. Cheap to add and it stops a browser print from looking broken. */
@media print {
  body::before { display: none !important; }
  .topbar, .footer { display: none !important; }
  .card, .btn-secondary, input, select {
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border: 1px solid #D8D7D1 !important;
  }
  .card { break-inside: avoid; }
}

/* A radio and its explanation as one clickable row. Used where two options
   differ by a trade-off the reader has to weigh, so both stay on screen. */
.radio-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  cursor: pointer;
  font-weight: 400;
}
.radio-row:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-tint);
}
.radio-row input { flex: 0 0 auto; margin-top: 3px; min-height: 0; width: auto; }
.radio-row .hint { margin-top: 2px; }

/* --- flash and badges ----------------------------------------------------- */

.flash {
  border-radius: var(--radius-control);
  padding: 12px 16px;
  font-size: 15px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
}
.flash-success { background: var(--accent-tint); border-color: transparent; color: #0b4d3c; }
.flash-error { background: #FDF2E7; border-color: transparent; color: #7a4c0d; }

.badge {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
}
.badge-clear { background: var(--accent-tint); color: #0b4d3c; border-color: transparent; }
.badge-caution, .badge-retest { background: #FDF2E7; color: #7a4c0d; border-color: transparent; }
/* A report with no analysis in it. Red because it reads as finished otherwise. */
.badge-warn { background: #FBE9E7; color: #8C2F1E; border-color: transparent; }
/* Marks a dimension the person is actively reaching past, so it does not read as
   a fixed position. Small and quiet on purpose — this is a placeholder mark ahead
   of the fuller today-and-progression figure, not the final treatment. */
.dim-reaching { font-size: 10.5px; font-weight: 650; letter-spacing: 0.04em;
                text-transform: uppercase; color: var(--accent);
                background: var(--band); border-radius: 999px;
                padding: 2px 7px; margin-left: 7px; vertical-align: middle; }

/* The dimension-row visual grammar, shared with the printable report
   (app/templates/reports/_shell.html) so the team page and an individual's
   report read as the same language even though this page loads gideon.css and
   the report is a standalone document that cannot. */
.dims { margin-top: 4px; }
.dim { padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.dim:last-child { border-bottom: 0; }
.dim-head { display: flex; justify-content: space-between; align-items: baseline;
            gap: 14px; margin-bottom: 7px; }
.dim-name { font-size: 15px; font-weight: 550; }
.dim-note { font-size: 12.5px; color: var(--muted); text-align: right;
            white-space: nowrap; }
.dim-note-strong { color: var(--ink-2); font-weight: 550; }
.dim-svg { display: block; overflow: visible; }
.dim:hover { background: var(--bg); }
.dim:hover .dim-note { color: var(--ink); }

/* --- tables --------------------------------------------------------------- */

table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 12px 8px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 500; font-size: 13px; text-transform: uppercase;
     letter-spacing: 0.04em; }
tr:last-child td { border-bottom: 0; }
.num { font-variant-numeric: tabular-nums; }

/* --- trait bars (Section 13.2 item 4) ------------------------------------- */

.trait { padding: 12px 0; border-bottom: 1px solid var(--border); }
.trait:last-child { border-bottom: 0; }
.track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  margin-top: 8px;
}
.zone {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--accent-tint);
  border-radius: 999px;
}
.marker {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--surface);
}
.marker-locked { background: var(--ink); }

/* --- the assessment screen ------------------------------------------------ */

.progress {
  height: 4px;
  background: var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 200ms ease-out;
}

.choices { display: grid; gap: 12px; margin: 28px 0; }
.choice {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 18px;
  line-height: 1.45;
  padding: 22px 24px;
  min-height: 88px; /* Section 5.4: the full statement card is the tap target */
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  color: var(--ink);
  cursor: pointer;
}
.choice:hover { border-color: var(--accent); }
.choice[aria-pressed='true'] { border-color: var(--accent); background: var(--accent-tint); }

.likert { display: grid; gap: 8px; margin: 28px 0; }
.likert .choice { font-size: 17px; min-height: 56px; padding: 14px 20px; }

/* The benchmark questionnaire's compact radio row -- a form control inside a
   client-portal card, not the full-screen assessment button. */
.card .likert { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0 0; }
.choice-radio { display: inline-flex; align-items: center; gap: 6px;
                font-size: 14px; color: var(--ink-2); cursor: pointer; }
.choice-radio input { margin: 0; }

/* Shared with the report shell. It was defined ONLY there, so the team partial --
   which is rendered by both the PDF and /app/team -- put an unstyled paragraph on
   the live page. Caught by test_every_class_the_team_sections_use_is_defined_in
   _both_stylesheets, which exists for exactly this. */
.statement { font-size: 20px; line-height: 1.45; font-weight: 500;
             letter-spacing: -0.01em; margin: 0 0 14px; }

.statement-lead { color: var(--muted); font-size: 15px; margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- footer --------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--border);
  padding: 24px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}


/* ==========================================================================
   REPORT COMPONENTS, MIRRORED FROM app/templates/reports/_shell.html

   WHY THIS IS A DELIBERATE MIRROR AND NOT AN ACCIDENT
   The team report's sections live in ONE template partial
   (reports/_team_sections.html) rendered by two surfaces: the live /app/team page,
   which links this stylesheet, and the PDF, which inlines _shell.html's own <style>
   block because WeasyPrint is called with no base_url and therefore cannot fetch an
   external stylesheet. The markup is shared so the two cannot state different
   things about a team; the CSS cannot be shared through a link, so it is mirrored
   here instead.

   tests/test_team_report_surfaces.py asserts that every component class the shared
   partial and its macros use is defined in BOTH files. Add a class to one without
   the other and that test fails, which is what keeps this mirror honest.

   Rules that already exist above (.card, .btn, .badge, .row, .stat, .grid-*) are
   NOT mirrored: the live page's own versions must win, and duplicating them here
   would silently restyle every other page in the product.
   ========================================================================== */

:root {
  --band-edge: #9FD3C1;
  --figure-surface: #FCFCFA;
}
/* --- the four working styles, defined ---------------------------------
   Printed in every report from constants.QUADRANT_MEANINGS. Mirrored in
   app/static/gideon.css: this block is inlined into the PDF, that one is linked
   by the live pages, and a class defined in only one of them renders unstyled
   in the other. */
.styles { width: 100%; border-collapse: collapse; font-size: 12px;
          margin-top: 8px; }
.styles caption { caption-side: top; text-align: left; color: var(--muted);
                  font-size: 12.5px; padding-bottom: 8px; }
.styles th, .styles td { text-align: left; vertical-align: top;
                         padding: 8px 10px;
                         border-bottom: 1px solid var(--hairline); }
.styles thead th { font-weight: 550; color: var(--muted); font-size: 11px;
                   text-transform: uppercase; letter-spacing: 0.05em; }
.styles tbody th { font-weight: 650; white-space: nowrap; color: var(--ink-2); }
.styles tr.is-active { background: rgba(0, 0, 0, 0.035); }
.styles tr.is-ideal { background: rgba(0, 0, 0, 0.02); }
.tag { display: inline-block; margin-left: 6px; padding: 1px 5px;
       font-size: 9.5px; font-weight: 650; text-transform: uppercase;
       letter-spacing: 0.05em; color: var(--muted);
       border: 1px solid var(--hairline); border-radius: 3px;
       vertical-align: middle; }
.callout { margin: 0 0 14px; padding: 10px 14px;
           border-left: 3px solid var(--accent);
           background: rgba(0, 0, 0, 0.02); }
.callout-label { margin: 0 0 3px; font-size: 11px; font-weight: 650;
                 text-transform: uppercase; letter-spacing: 0.05em;
                 color: var(--muted); }

/* --- team report ------------------------------------------------------- */
.quad-axis { font: 500 9.5px system-ui, sans-serif; fill: var(--muted);
             text-transform: lowercase; letter-spacing: 0.04em; }
.quad-dot  { font: 650 9px system-ui, sans-serif; fill: var(--accent); }

.donut { display: flex; align-items: center; gap: 16px; padding: 12px 0;
         border-bottom: 1px solid var(--hairline); }
.donut-svg { flex: 0 0 auto; }
.donut-side { min-width: 0; }
.donut-n { font: 650 19px system-ui, sans-serif; fill: var(--ink); }
.donut-n-off { fill: var(--muted); }
.donut-name { font-size: 15px; font-weight: 550; }
.donut-bands { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 5px; }
.donut-band { font-size: 11.5px; color: var(--muted); display: inline-flex;
              align-items: center; gap: 4px; }
.donut-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 2px;
                background: var(--accent); }

.zonebar { padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.zonebar-head { display: flex; justify-content: space-between;
                align-items: baseline; gap: 12px; margin-bottom: 5px; }
.zonebar-svg { display: block; }
.zonebar-legend { margin-top: 3px; }

.hist { margin-top: 6px; }
.hist-row { display: flex; align-items: center; gap: 12px; padding: 4px 0; }
.hist-label { flex: 0 0 190px; font-size: 13px; color: var(--ink-2); }
.hist-svg { flex: 1 1 auto; display: block; }
.hist-n { flex: 0 0 28px; text-align: right; font-size: 13px; font-weight: 600; }

.matrix { width: 100%; border-collapse: collapse; font-size: 11.5px;
          margin-top: 8px; }
.matrix caption { caption-side: top; text-align: left; color: var(--muted);
                  font-size: 12.5px; padding-bottom: 8px; }
.matrix-head { font-weight: 550; color: var(--muted); text-align: center;
               vertical-align: bottom; padding: 0 2px 6px;
               border-bottom: 1px solid var(--hairline); }
.matrix-head span { display: block; writing-mode: vertical-rl;
                    transform: rotate(180deg); white-space: nowrap;
                    margin: 0 auto; }
.matrix-corner { text-align: left; padding-bottom: 6px; color: var(--muted);
                 font-weight: 550; border-bottom: 1px solid var(--hairline); }
.matrix-row { text-align: left; font-weight: 550; padding: 4px 10px 4px 0;
              white-space: nowrap; border-bottom: 1px solid var(--track); }
.matrix-cell { position: relative; text-align: center; padding: 0; height: 26px;
               border-bottom: 1px solid var(--track); }
.matrix-fill { position: absolute; inset: 2px; border-radius: 3px;
               background: var(--accent); }
/* Dark ink at every value: the fill ramp above is capped so this is
   always the higher contrast choice, and it needs no blend mode, which
   WeasyPrint does not support. */
.matrix-v { position: relative; z-index: 1; color: var(--ink);
            font-weight: 600; font-variant-numeric: tabular-nums; }
.matrix-blank { color: var(--muted); }

.pair { padding: 11px 0; border-bottom: 1px solid var(--hairline); }
.pair-head { font-size: 14px; font-weight: 600; }
.pair-line { font-size: 13px; margin: 5px 0 0; padding-left: 11px;
             border-left: 2px solid var(--track); color: var(--ink-2); }
.pair-friction { border-left-color: var(--band-edge); }
.pair-complement { border-left-color: var(--accent); }

.finding { padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.finding-head { font-size: 15px; font-weight: 600; }
.finding-math { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.finding-who { font-size: 12.5px; margin: 5px 0 0; }
.finding-who strong { font-weight: 600; }
.cluster { margin-top: 22px; }
.cluster-title { font-size: 12px; font-weight: 650; letter-spacing: 0.1em;
                 text-transform: uppercase; color: var(--accent); }
.cluster-blurb { font-size: 13px; color: var(--muted); margin: 2px 0 6px; }
.notice { border: 1px solid var(--band-edge); background: var(--band);
          border-radius: 8px; padding: 12px 14px; font-size: 13.5px;
          margin-top: 12px; }

/* Today-and-progression cube. */
.cube { display: block; margin: 4px auto 0; overflow: visible; }
.cube-axis     { font: 550 11px system-ui, sans-serif; fill: var(--ink-2); }
.cube-axis-off { font: 500 10.5px system-ui, sans-serif; fill: var(--muted); }
.cube-tag        { font: 550 10.5px system-ui, sans-serif; fill: var(--muted); }
.cube-tag-strong { font: 650 11px system-ui, sans-serif; fill: var(--ink); }

/* Table view */
.viz-table { width: 100%; border-collapse: collapse; font-size: 14px;
             margin-top: 6px; }
.viz-table caption { text-align: left; color: var(--muted); font-size: 13px;
                     padding-bottom: 10px; }
.viz-table th, .viz-table td { text-align: left; padding: 8px 10px;
                               border-bottom: 1px solid var(--hairline); }
.viz-table thead th { font-size: 11px; text-transform: uppercase;
                      letter-spacing: 0.06em; color: var(--muted);
                      font-weight: 600; }
.viz-table tbody th { font-weight: 550; }
.viz-table td.num, .viz-table th.num { font-variant-numeric: tabular-nums; }

details.table-toggle > summary {
  cursor: pointer; font-size: 13.5px; color: var(--accent); font-weight: 550;
  list-style: none; padding: 4px 0;
}
details.table-toggle > summary::-webkit-details-marker { display: none; }
details.table-toggle > summary::before { content: "Show as a table"; }
details.table-toggle[open] > summary::before { content: "Hide the table"; }

ul.clean { margin: 0 0 12px; padding-left: 20px; }
ul.clean li { margin-bottom: 7px; }

.dim-story { margin: 8px 0 0 0; }
.dim-story-line { margin: 0 0 5px; font-size: 13.5px; line-height: 1.55;
                  color: var(--ink-2); }
/* A team section names the dimension itself; an individual report already has the
   name in the row above its story, which is why these two are the only additions to
   the established dim-story pattern. Mirrored in app/static/gideon.css. */
.dim-story-head { display: flex; align-items: baseline; gap: 8px;
                  flex-wrap: wrap; margin: 0 0 6px; }
.dim-story-name { font-size: 15px; font-weight: 650; letter-spacing: -0.01em;
                  color: var(--ink); }
.dim-story-tag { display: inline-block; min-width: 132px; font-size: 11px;
                 font-weight: 650; letter-spacing: 0.06em;
                 text-transform: uppercase; color: var(--muted); }
.dim-story-role .dim-story-tag { color: var(--accent); }
.dim-story-dir { color: var(--ink); }

.quality-item { margin: 0 0 14px; }
.quality-label { margin: 0 0 3px; font-size: 14px; font-weight: 600;
                 color: var(--ink); }
.quality-detail { margin: 0; font-size: 13.5px; line-height: 1.55;
                  color: var(--ink-2); }

.devnote { margin: 0 0 18px; padding: 0 0 14px;
           border-bottom: 1px solid var(--hairline); }
.devnote:last-of-type { border-bottom: 0; }
.devnote-head { margin: 0 0 6px; font-size: 15px; font-weight: 600;
                color: var(--ink); }
.devnote-line { margin: 0 0 5px; font-size: 13.5px; line-height: 1.55;
                color: var(--ink-2); }
.devnote-tag { display: inline-block; min-width: 128px; font-size: 11px;
               font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
               color: var(--accent); }
.devnote-do { color: var(--ink); }

.qa { margin-bottom: 12px; }
.qa-n { display: inline-block; min-width: 22px; color: var(--accent);
        font-weight: 650; }

/* THE COACHING GUIDE. Indented under its prompt so the three supporting lines
   read as belonging to that question, and kept together on one page: a reframe
   severed from the question it answers is worse than no reframe. */
.coach { margin: 0 0 18px; padding: 0 0 14px;
         border-bottom: 1px solid var(--hairline); }
.coach:last-of-type { border-bottom: 0; }
.coach .qa { margin-bottom: 8px; font-weight: 550; }
.coach-line { margin: 0 0 5px 22px; font-size: 13.5px; line-height: 1.55;
              color: var(--ink-2); }
.coach-tag { display: inline-block; min-width: 104px; font-size: 11px;
             font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase;
             color: var(--muted); }
.coach-reframe { color: var(--ink); }
.coach-reframe .coach-tag { color: var(--accent); }

.badge { display: inline-block; font-size: 12px; padding: 2px 10px;
         border-radius: 999px; background: var(--track); color: var(--ink-2); }

.disclaimer { font-size: 12.5px; color: var(--muted); line-height: 1.5;
              margin: 0 0 8px; }

/* Export bar — screen only. */
.bar { position: sticky; top: 0; z-index: 5; background: var(--surface);
       border-bottom: 1px solid var(--hairline); padding: 12px 28px;
       display: flex; align-items: center; gap: 14px; }
.bar-title { font-size: 13.5px; font-weight: 600; }
.bar-spacer { flex: 1 1 auto; }
.btn { font: inherit; font-size: 14px; font-weight: 550; cursor: pointer;
       border: 1px solid transparent; border-radius: 9px; padding: 9px 16px;
       background: var(--ink); color: var(--surface); }
.btn-ghost { background: transparent; color: var(--ink);
             border-color: var(--hairline); }
.btn:hover { opacity: 0.9; }
.btn { transition: opacity 120ms ease, transform 120ms ease; }
.btn:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* report.js progressive enhancement. None of this is load bearing: with JS off
   (or under WeasyPrint, which never runs it) the elements these rules target
   are never inserted, and the page reads exactly as it did before this file
   existed. */
.gi-tooltip {
  position: fixed; z-index: 20; max-width: 260px; pointer-events: none;
  background: var(--ink); color: var(--surface); font-size: 12.5px;
  line-height: 1.4; padding: 7px 10px; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(17,18,20,0.18);
}

.gi-segmented { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 10px;
                background: var(--track); border-radius: 9px; }
.gi-segment { font: inherit; font-size: 13px; font-weight: 550; cursor: pointer;
              border: 0; border-radius: 7px; padding: 6px 14px;
              background: transparent; color: var(--muted);
              transition: background 120ms ease, color 120ms ease; }
.gi-segment.is-active { background: var(--surface); color: var(--ink);
                        box-shadow: 0 1px 2px rgba(17,18,20,0.08); }

.gi-reveal { opacity: 0; transform: translateY(10px);
             transition: opacity 420ms ease, transform 420ms ease; }
.gi-revealed { opacity: 1; transform: translateY(0); }

.section-head { display: flex; align-items: baseline; gap: 14px;
                margin: 0 0 6px; }
.section-head h2 { margin: 0; font-size: 13px; letter-spacing: 0.1em; }
.section-head::after { content: ""; flex: 1 1 auto; height: 1px;
                       background: var(--hairline); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.split h3 { font-size: 14px; font-weight: 650; letter-spacing: 0.02em;
            color: var(--ink-2); margin: 0 0 4px; }
.lede { font-size: 21px; line-height: 1.4; font-weight: 500; margin: 0 0 8px; }
.card-figure { background: var(--figure-surface); }
.hero { }
.hero-row { display: flex; align-items: center; gap: 28px; }
.hero-ring { flex: 0 0 auto; overflow: visible; }
.hero-text { min-width: 0; }
.hero-label { font-size: 11px; font-weight: 650; letter-spacing: 0.12em;
              text-transform: uppercase; color: var(--muted); }
.hero-value { font-size: 64px; line-height: 1; font-weight: 650;
              letter-spacing: -0.035em; color: var(--accent); margin: 6px 0 0; }
.hero-of    { font-size: 20px; font-weight: 500; color: var(--muted);
              letter-spacing: 0; margin-left: 4px; }
.hero-band  { font-size: 18px; font-weight: 600; margin: 6px 0 0; }
.triad { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 10px; }
.triad-item { flex: 0 1 150px; }
.triad-svg { display: block; }
.triad-n { font: 650 20px system-ui, sans-serif; fill: var(--ink); }
.triad-label { font-size: 14px; font-weight: 600; margin-top: 4px; }
.triad-from { margin-top: 1px; }
.slide { margin-top: 6px; }
.slide-svg { display: block; overflow: visible; }
.slide-ends { display: flex; justify-content: space-between; margin-top: -2px; }
.slide-end { font-size: 12.5px; color: var(--muted); }
.quad { display: block; margin: 0 auto; }
.quad-on  { font: 650 12px system-ui, sans-serif; fill: var(--ink); }
.quad-off { font: 500 11px system-ui, sans-serif; fill: var(--muted); }
.dim-facet { font-size: 12.5px; color: var(--muted); margin: 6px 0 0;
             padding-left: 10px; border-left: 2px solid var(--hairline); }

/* hero_fit and slider are called by the shared team partial too, so their
   remaining pieces belong on this side of the mirror as well. */
.hero-ring-fill { transition: stroke-dashoffset 900ms cubic-bezier(0.16, 1, 0.3, 1); }
.slide-end-on { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   DOCUMENT FURNITURE, MIRRORED FROM reports/_shell.html

   The shared team-report partial (reports/_team_sections.html) is rendered by both
   the PDF and this page, so every class it uses has to be styled on both sides.
   tests/test_team_report_surfaces.py enforces that; these rules are the screen
   register of the same furniture.

   The print register differs on purpose: there, .doc-section forces a page break and
   .exhibit is an unbreakable unit. On screen neither concept exists, so they reduce to
   spacing and a caption treatment.
   ========================================================================== */

:root {
  --sp-1: 6px;  --sp-2: 10px; --sp-3: 16px;
  --sp-4: 24px; --sp-5: 34px; --sp-6: 48px;
}

.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.stack-2 > * + * { margin-top: var(--sp-2); }
.stack-3 > * + * { margin-top: var(--sp-3); }
.stack-4 > * + * { margin-top: var(--sp-4); }

/* On screen a section is a panel, not a page. */
.doc-section + .doc-section { margin-top: var(--sp-4); }

/* The short accent rule that opens a section. Same mark as the print register, so a
   reader moving between the screen and the PDF sees one document. */
.keyline {
  border: 0;
  border-top: 2px solid var(--ink);
  width: 46px;
  margin: 0 0 var(--sp-3);
}

.section-open { margin: 0 0 var(--sp-4); }
.section-kicker {
  font-size: 11px; font-weight: 650; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 6px;
}
.section-open h2 { font-size: 26px; letter-spacing: -0.025em; margin: 0 0 8px; }
.standfirst {
  font-size: 16.5px; line-height: 1.5; color: var(--ink-2);
  margin: 0; max-width: 46em;
}

/* Exhibits: a number from the CSS counter, a title stating the finding, a note under
   it saying what is being looked at. Counter is reset on body. */
body { counter-reset: exhibit section; }
.exhibit { margin: var(--sp-5) 0 0; }
.exhibit-head { margin: 0 0 var(--sp-2); }
.exhibit-num {
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 3px;
}
.exhibit-num::before { counter-increment: exhibit; content: "Exhibit " counter(exhibit); }
.exhibit-title { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.exhibit-note {
  font-size: 12.5px; color: var(--muted); line-height: 1.5;
  margin: var(--sp-2) 0 0; padding-top: 9px;
  border-top: 1px solid var(--hairline);
}
.exhibit-note strong { color: var(--ink-2); font-weight: 600; }

/* --- facet sub-profile ------------------------------------------------- */
.facetgrp { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.facetgrp-head { display: flex; justify-content: space-between; align-items: baseline;
                 gap: 12px; margin-bottom: 8px; }
.facetgrp-name { font-size: 15px; font-weight: 600; }
.facet { display: flex; align-items: center; gap: 12px; padding: 3px 0; }
.facet-label { flex: 0 0 168px; font-size: 13px; color: var(--ink-2); }
.facet-tag { font-size: 9.5px; font-weight: 650; letter-spacing: 0.06em;
             text-transform: uppercase; color: var(--accent); margin-left: 6px; }
.facet-svg { flex: 1 1 auto; display: block; }
.facet-count { flex: 0 0 44px; text-align: right; font-size: 12px;
               color: var(--muted); }
.facet-read { font-size: 12.5px; color: var(--ink-2); margin: 8px 0 0;
              padding-left: 11px; border-left: 2px solid var(--band-edge); }

/* --- today and becoming ------------------------------------------------ */
.becoming { padding: 13px 0; border-bottom: 1px solid var(--hairline); }
.becoming-head { display: flex; justify-content: space-between; align-items: baseline;
                 gap: 12px; margin-bottom: 5px; }
.becoming-svg { display: block; overflow: visible; }
.becoming-note { margin: 6px 0 0; }
.becoming-on .dim-name { font-weight: 650; }

/* --- tensions ---------------------------------------------------------- */
.tension { font-size: 14.5px; line-height: 1.55; margin: 0 0 10px;
           padding-left: 13px; border-left: 2px solid var(--band-edge); }

/* --- consequence library ----------------------------------------------- */
.conseq { padding: 13px 0; border-bottom: 1px solid var(--hairline); }
.conseq-head { font-size: 14px; font-weight: 600; margin-bottom: 5px; }
.conseq-pole { font-size: 10.5px; font-weight: 650; letter-spacing: 0.06em;
               text-transform: uppercase; color: var(--muted); margin-left: 6px; }
.conseq-tendency { font-size: 14.5px; line-height: 1.55; margin: 0 0 5px; }
.conseq-mod { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 0 0 5px; }
.conseq-probe { font-size: 13px; color: var(--ink-2); margin: 0;
                padding-left: 11px; border-left: 2px solid var(--band-edge); }

/* --- interactivity (screen only; WeasyPrint runs no JS so this is inert
       in the PDF, and the print block below hides it regardless) -------- */
.gi-hoverable { cursor: help; outline: none; }
.gi-hoverable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px;
                              border-radius: 4px; }
.gi-tip {
  position: absolute; z-index: 60; max-width: 320px;
  background: #14161A; color: #FFFFFF;
  font-size: 12.5px; line-height: 1.5;
  padding: 9px 12px; border-radius: 8px;
  box-shadow: 0 8px 28px -8px rgba(17,18,20,0.45);
  pointer-events: none;
}
.gi-clickable { cursor: pointer; }
.gi-clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Section index. Sits outside the measure so it never reflows the document. */
.gi-nav {
  position: fixed; top: 96px; left: 18px; width: 176px; z-index: 40;
  display: flex; flex-direction: column; gap: 2px;
  max-height: 70vh; overflow-y: auto;
}
.gi-nav a {
  font-size: 12px; line-height: 1.35; color: var(--muted);
  text-decoration: none; padding: 5px 8px; border-radius: 6px;
  border-left: 2px solid transparent;
}
.gi-nav a:hover { color: var(--ink); background: rgba(17,18,20,0.04); }
.gi-nav a.is-current {
  color: var(--ink); font-weight: 600;
  border-left-color: var(--accent); background: rgba(15,110,86,0.07);
}
@media (max-width: 1099px) { .gi-nav { display: none; } }


/* The interval band on the summary page's simple track. Same meaning as the report's
   range band: what the answers support, with the best estimate marked on it. */
.range {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 8px;
  border-radius: 4px;
  background: var(--accent);
  opacity: 0.22;
}

/* --- clickable figures on the founder console ---------------------------
   Every number on the console opens the rows behind it. A figure a reader cannot
   click is one they have to take on trust.

   Not mirrored into reports/_shell.html on purpose: these are /admin pages, which
   link this stylesheet, and nothing in a printed report is clickable. */
.stat-link, .trait-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 8px;
  transition: background 160ms var(--ease), transform 160ms var(--ease);
}
.stat-link:hover .stat,
.trait-link:hover .num { color: var(--accent); }
.trait-link:hover { background: rgba(15, 110, 86, 0.05); }
.stat-link:focus-visible, .trait-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* The bar itself should read as part of the link target rather than decoration. */
.trait-link .track { cursor: pointer; }

/* What is narrowing a table right now, and how to undo it. */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
           margin: 0 0 16px; }
.filter-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); font-size: 14px;
}
.filter-chip .filter-key { color: var(--muted); font-size: 12px;
                           text-transform: uppercase; letter-spacing: 0.04em; }
.filter-chip a { color: var(--muted); text-decoration: none; font-weight: 600; }
.filter-chip a:hover { color: var(--ink); }

/* --- cohort cards on the client page ------------------------------------
   Replaced a six column table whose cells were mostly empty and whose action
   column spent a line saying "0 scored so far". One card per cohort, stating
   where it stands and offering the single action available. */
.cohort-card { padding: 18px 20px; }
.cohort-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.cohort-count .num { font-size: 26px; font-weight: 600;
                     font-variant-numeric: tabular-nums; }