/* Forward Profile. One stylesheet, nine brand skins, two themes.
   The skin is Grasshopper Group's own: navy, lime yellow, and the periwinkle from the badge ring,
   with the stacked offset lettering from the group wordmark used once per screen (the hero
   number, the wordmark, the result name). Chunky geometric display type, a soft dot grid on the
   paper, cards that lift. Layout: one column of cards on a phone, a grid from 720px up.
   Archetype colors are never written here; they come from the database as inline variables. */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Nunito:wght@400;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  --paper: #F6F5FD;
  --panel: #FFFFFF;
  --panel-2: #F1F2FB;
  --ink: #0F1535;
  --ink-2: #3E4466;
  --muted: #6D7290;
  --rule: #DCDFF3;
  --track: #E6E8F7;
  --navy: #041963;
  --navy-deep: #02103F;
  --yellow: #E6F43C;
  --yellow-soft: #F7FBD2;
  --peri: #B9C1F2;          /* the badge ring */
  --peri-soft: #E8EBFB;
  --peri-deep: #7D89D6;
  --brand-accent: #041963;
  --brand-ink: #FFFFFF;
  --btn-ink: #E6F43C;       /* group buttons are navy with yellow type; brand skins switch to white */
  --good: #1B8A3A;
  --good-soft: #DDF3E3;
  --warn: #B7791F;
  --warn-soft: #FBEBC8;
  --bad: #C0392B;
  --bad-soft: #FAD2D5;
  --focus: #0097A0;
  --display: 'Montserrat', 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Nunito', 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
  --shadow: 0 1px 2px rgba(4, 25, 99, .06), 0 10px 30px rgba(4, 25, 99, .08);
  --shadow-lift: 0 2px 4px rgba(4, 25, 99, .08), 0 18px 44px rgba(4, 25, 99, .14);
  --stack: 3px 3px 0 var(--peri), 6px 6px 0 var(--navy);
  --radius: 16px;
  --dot: rgba(4, 25, 99, .09);
  --big-ink: var(--navy);     /* the stacked hero number */
  --mod-bar: var(--navy);     /* Pressure and Signal bars, group navy by day, periwinkle by night */
  --glow-a: rgba(230, 244, 60, .35);
  --glow-b: rgba(185, 193, 242, .45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0E1226; --panel: #171C36; --panel-2: #1E2442; --ink: #EEF0FA; --ink-2: #C7CBE6; --muted: #959BC0;
    --rule: #2A3158; --track: #262D52; --yellow-soft: #3A3E12; --good-soft: #173B22; --warn-soft: #3F3212; --bad-soft: #4A1A22;
    --peri-soft: #242B50; --peri-deep: #9AA5F0;
    --good: #5CCB7A; --warn: #E5B45A; --bad: #FF6B7A; --brand-ink: #FFFFFF;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 44px rgba(0, 0, 0, .5);
    --stack: 3px 3px 0 var(--peri-deep), 6px 6px 0 #000;
    --dot: rgba(185, 193, 242, .12);
    --glow-a: rgba(230, 244, 60, .10);
    --glow-b: rgba(125, 137, 214, .22);
    --big-ink: #EEF0FA; --mod-bar: var(--peri-deep);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0E1226; --panel: #171C36; --panel-2: #1E2442; --ink: #EEF0FA; --ink-2: #C7CBE6; --muted: #959BC0;
  --rule: #2A3158; --track: #262D52; --yellow-soft: #3A3E12; --good-soft: #173B22; --warn-soft: #3F3212; --bad-soft: #4A1A22;
  --peri-soft: #242B50; --peri-deep: #9AA5F0;
  --good: #5CCB7A; --warn: #E5B45A; --bad: #FF6B7A; --brand-ink: #FFFFFF;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 44px rgba(0, 0, 0, .5);
  --stack: 3px 3px 0 var(--peri-deep), 6px 6px 0 #000;
  --dot: rgba(185, 193, 242, .12);
  --glow-a: rgba(230, 244, 60, .10);
  --glow-b: rgba(125, 137, 214, .22);
  --big-ink: #EEF0FA; --mod-bar: var(--peri-deep);
}

/* Brand skins. Accents read off the portal shell (builders/_shell.py) so the two systems match. */
[data-brand="grasshopper-group"] { --brand-accent: #041963; --brand-pop: #E6F43C; }
[data-brand="grasshopper"]  { --brand-accent: #001F4E; --brand-pop: #C4D82E; }
[data-brand="hummingbird"]  { --brand-accent: #482B88; --brand-pop: #E40571; }
[data-brand="argent"]       { --brand-accent: #003154; --brand-pop: #FF99E0; }
[data-brand="full-swing"]   { --brand-accent: #002554; --brand-pop: #E35205; }
[data-brand="touchdown"]    { --brand-accent: #210021; --brand-pop: #F6901C; }
[data-brand="big-fish"]     { --brand-accent: #00263E; --brand-pop: #FFA300; }
[data-brand="top-flight"]   { --brand-accent: #470A68; --brand-pop: #DE7C00; }
[data-brand="space-heroes"] { --brand-accent: #2E1A47; --brand-pop: #C724B1; }
[data-brand="sweet-life"]   { --brand-accent: #003057; --brand-pop: #EE2737; }
:root { --brand-pop: #E6F43C; --header-bg: var(--navy); --header-pop: var(--yellow); }
html[data-brand] { --header-bg: var(--brand-accent); --header-pop: var(--brand-pop); --btn-ink: #FFFFFF; --mod-bar: var(--brand-accent); --stack: 3px 3px 0 var(--brand-pop), 6px 6px 0 var(--brand-accent); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink);
  font: 16px/1.55 var(--body); font-variant-numeric: tabular-nums;
  min-height: 100%;
  background-color: var(--paper);
  background-image:
    radial-gradient(900px 520px at 100% -10%, var(--glow-a), transparent 60%),
    radial-gradient(760px 520px at -10% 100%, var(--glow-b), transparent 60%),
    radial-gradient(var(--dot) 1px, transparent 1.4px);
  background-size: auto, auto, 22px 22px;
  background-attachment: fixed, fixed, scroll;
}
h1, h2, h3, .disp { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(28px, 6vw, 40px); line-height: 1.05; font-weight: 900; }
h2 { font-size: 20px; line-height: 1.2; }
h3 { font-size: 16px; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }
.lede { color: var(--ink-2); max-width: 62ch; font-size: 17px; }
.eyebrow { font-family: var(--display); font-size: 11.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--peri-deep); }
.k { font-family: var(--display); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--peri-deep); font-weight: 800; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.stack { text-shadow: var(--stack); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 16px; padding-block: 22px 56px; display: grid; gap: 18px; }
.wrap.narrow { max-width: 640px; }
@media (min-width: 720px) { .wrap { padding-inline: 24px; gap: 22px; } }

/* Header. Group navy with a faint diagonal weave, the yellow rule, and a periwinkle hairline (docs/06 section 7). */
.fp-header {
  background-color: var(--header-bg);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, transparent 2px 14px);
  color: #fff; border-bottom: 4px solid var(--header-pop); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  box-shadow: 0 1px 0 var(--peri) inset, 0 6px 24px rgba(4, 25, 99, .18);
}
.fp-header .in { max-width: 1080px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fp-brand { display: flex; align-items: center; gap: 12px; min-height: 48px; text-decoration: none; }
.fp-brand img.mark-img { height: 44px; width: auto; max-width: 104px; border-radius: 12px; display: block; background: #fff; padding: 3px 5px; object-fit: contain; box-shadow: 3px 3px 0 var(--header-pop); }
.fp-brand img.group { height: 38px; width: 38px; border-radius: 10px; display: block; background: #fff; }
.fp-brand img.brand { height: 30px; width: auto; max-width: 120px; display: block; border-radius: 6px; background: #fff; padding: 2px 6px; margin-left: 4px; }
.fp-brand .mark { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-accent); color: var(--brand-ink); display: grid; place-items: center; font: 800 15px var(--display); }
.fp-brand .wm { font: 900 19px/1 var(--display); letter-spacing: -0.02em; color: #fff; }
.fp-brand .wm em { font-style: normal; color: var(--header-pop); }
.fp-brand .wm small { display: block; font: 800 10.5px var(--display); color: rgba(255,255,255,.72); letter-spacing: .14em; text-transform: uppercase; margin-top: 5px; }
.fp-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.fp-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; text-decoration: none; font-weight: 800; font-size: 14px; color: rgba(255,255,255,.9); transition: background .15s, transform .15s; }
.fp-nav a:hover { background: rgba(255,255,255,.12); }
.fp-nav a.on { background: var(--header-pop); color: var(--header-bg); box-shadow: 2px 2px 0 rgba(255,255,255,.35); }
.fp-who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(255,255,255,.8); flex-basis: 100%; justify-content: space-between; }
.fp-who b { color: #fff; }
.fp-header .linkbtn { color: rgba(255,255,255,.92); }
.fp-header .linkbtn:hover { background: rgba(255,255,255,.12); }
@media (min-width: 900px) { .fp-who { flex-basis: auto; } }
.linkbtn { background: none; border: 0; padding: 8px 10px; min-height: 44px; color: var(--ink-2); font-weight: 800; cursor: pointer; border-radius: 8px; }
.linkbtn:hover { background: var(--panel-2); }

/* Cards and grid. Cards rise in on load, a few milliseconds apart. */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.card { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px; display: grid; gap: 12px; align-content: start; box-shadow: var(--shadow); animation: rise .38s cubic-bezier(.2,.7,.2,1) both; }
.wrap > .card:nth-child(2), .wrap > section:nth-child(2) { animation-delay: .05s; }
.wrap > .card:nth-child(3), .wrap > section:nth-child(3) { animation-delay: .1s; }
.wrap > .card:nth-child(4), .wrap > section:nth-child(4) { animation-delay: .15s; }
.wrap > .card:nth-child(n+5), .wrap > section:nth-child(n+5) { animation-delay: .2s; }
.card.flat { box-shadow: none; }
.card .head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.card .head h2 { position: relative; padding-left: 14px; }
.card .head h2::before { content: ''; position: absolute; left: 0; top: .18em; bottom: .18em; width: 5px; border-radius: 3px; background: var(--header-pop); box-shadow: 2px 2px 0 var(--peri); }
.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid.two { grid-template-columns: 1fr 1fr; } .grid.three { grid-template-columns: repeat(3, 1fr); } }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
@media (prefers-reduced-motion: reduce) { .card { animation: none; } }

/* Buttons and controls, 48px tap targets. Primary is the group pairing: navy with yellow type,
   and a stacked shadow that steps up on hover, like the wordmark. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: 12px; border: 1.5px solid var(--rule); background: var(--panel); font-weight: 800; cursor: pointer; text-decoration: none; font-family: var(--display); font-size: 15px; letter-spacing: -0.01em; transition: transform .12s, box-shadow .12s, background .12s; }
.btn:hover { border-color: var(--peri); background: var(--panel-2); }
.btn.primary { background: var(--brand-accent); color: var(--btn-ink); border-color: transparent; box-shadow: 3px 3px 0 var(--peri); }
.btn.primary:hover { background: var(--brand-accent); transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--peri); }
.btn.primary:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--peri); }
.btn.quiet { background: transparent; }
.btn.danger { color: var(--bad); border-color: var(--bad); }
.btn.small { min-height: 40px; padding: 0 14px; font-size: 14px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: 3px solid var(--focus); }
input, select, textarea {
  font: inherit; color: var(--ink); background: var(--panel); border: 1.5px solid var(--rule); border-radius: 12px;
  min-height: 48px; padding: 10px 12px; width: 100%; transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus { border-color: var(--peri-deep); box-shadow: 0 0 0 4px var(--peri-soft); outline: none; }
label { display: grid; gap: 6px; font-weight: 800; font-size: 13.5px; }
label .hint { font-weight: 400; color: var(--muted); font-size: 13px; }
.field-row { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* Pills and markers */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; border: 1px solid var(--rule); background: var(--panel-2); color: var(--ink-2); white-space: nowrap; font-family: var(--display); letter-spacing: .01em; }
.pill.good { background: var(--good-soft); color: var(--good); border-color: transparent; }
.pill.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.pill.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.pill.navy { background: var(--brand-accent); color: var(--btn-ink); border-color: transparent; box-shadow: 2px 2px 0 var(--peri); }
a.pill { text-decoration: none; min-height: 36px; padding: 0 14px; transition: transform .12s, box-shadow .12s; }
a.pill:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--peri); }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--muted); }

/* Notes and banners */
.note { padding: 12px 14px; border-left: 5px solid var(--yellow); background: var(--yellow-soft); border-radius: 0 12px 12px 0; font-size: 14px; color: var(--ink-2); }
.note.bad { border-left-color: var(--bad); background: var(--bad-soft); }
.note.good { border-left-color: var(--good); background: var(--good-soft); }
.banner { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 0px); z-index: 25; background: var(--navy-deep); color: #fff; text-align: center; font: 800 13px/1.3 var(--body); letter-spacing: .02em; padding: 10px 16px; }
.banner.fixed { position: fixed; left: 0; right: 0; top: 0; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--navy); color: var(--yellow); padding: 12px 18px; border-radius: 12px; font-weight: 800; z-index: 50; max-width: calc(100vw - 32px); box-shadow: 3px 3px 0 var(--peri); }

/* Tables */
.tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 12px; background: var(--panel); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: middle; }
thead th { font-family: var(--display); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--peri-deep); font-weight: 800; background: var(--peri-soft); white-space: nowrap; position: sticky; top: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover td { background: var(--panel-2); }
td.n, th.n { text-align: right; }

/* Completion header: the big number wears the stacked shadow. */
.gate { display: grid; gap: 10px; }
.gate .big { font: 900 clamp(34px, 9vw, 52px)/1 var(--display); letter-spacing: -0.03em; color: var(--big-ink); text-shadow: var(--stack); padding: 4px 8px 6px 0; }
.gate .track { height: 12px; border-radius: 999px; background: var(--track); overflow: hidden; border: 1px solid var(--rule); }
.gate .track i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-accent), var(--peri-deep)); border-radius: 999px; }

/* Drawer */
.drawer-back { position: fixed; inset: 0; background: rgba(4, 25, 99, .45); z-index: 40; backdrop-filter: blur(2px); }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--paper); z-index: 41; overflow: auto; padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); padding-top: calc(16px + env(safe-area-inset-top, 0px)); display: grid; gap: 14px; align-content: start; box-shadow: -12px 0 40px rgba(4, 25, 99, .2); }
.drawer .close { justify-self: end; }

/* Instrument. The item number sits big and faint in the corner, the progress bar is yellow on navy. */
.instr { display: grid; gap: 16px; }
.instr .progress { height: 12px; background: var(--brand-accent); border-radius: 999px; overflow: hidden; padding: 2px; }
.instr .progress i { display: block; height: 100%; background: var(--header-pop); border-radius: 999px; transition: width .25s; }
@media (prefers-reduced-motion: reduce) { .instr .progress i { transition: none; } }
.item { position: relative; display: grid; gap: 12px; padding: 18px 18px 16px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.item .k { position: absolute; right: 14px; top: 10px; font: 900 44px/1 var(--display); letter-spacing: -0.04em; color: var(--peri-soft); text-transform: none; }
.item .prompt { font-size: 19px; font-weight: 800; line-height: 1.35; padding-right: 240px; font-family: var(--display); letter-spacing: -0.01em; }
/* Phones and small tablets: the big counter would sit on the words, so it becomes a small label above them. */
@media (max-width: 719px) {
  .item .k { position: static; font: 800 11.5px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--peri-deep); margin-bottom: -4px; }
  .item .prompt { padding-right: 0; font-size: 18px; }
}
.likert { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.likert button { min-height: 66px; border-radius: 12px; border: 1.5px solid var(--rule); background: var(--panel-2); font-weight: 800; font-size: 12px; line-height: 1.15; padding: 6px 4px; cursor: pointer; display: grid; gap: 3px; place-items: center; transition: transform .1s, box-shadow .1s, background .1s; }
.likert button:hover { border-color: var(--peri); }
.likert button b { font: 900 19px var(--display); }
.likert button.on { background: var(--brand-accent); color: var(--btn-ink); border-color: transparent; box-shadow: 3px 3px 0 var(--peri); transform: translate(-1px, -1px); }
.likert .lbl { display: none; text-align: center; }
@media (min-width: 540px) { .likert .lbl { display: block; } }
.likert-key { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-weight: 800; font-family: var(--display); letter-spacing: .04em; text-transform: uppercase; }
.instr .nav { display: flex; gap: 10px; justify-content: space-between; }
blockquote.huddle { margin: 0; padding: 16px 18px; border-left: 5px solid var(--header-pop); background: var(--peri-soft); border-radius: 0 14px 14px 0; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
blockquote.huddle footer { margin-top: 8px; font-size: 13px; color: var(--peri-deep); font-weight: 800; font-family: var(--display); }

/* Result card. Colors arrive as --c-primary, --c-secondary, --c-spark, --c-bridge, --c-anchor, --c-compass.
   The hero is a two-color sweep, the name wears the stacked shadow, the bars grow in. */
.rc { display: grid; gap: 16px; }
.rc .hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--c-primary, var(--brand-accent)) 0%, var(--c-primary, var(--brand-accent)) 55%, var(--c-secondary, var(--peri-deep)) 100%);
  border: 0; border-radius: var(--radius); padding: 24px 22px 22px; display: grid; gap: 12px; box-shadow: var(--shadow-lift);
}
.rc .hero::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 2px, transparent 2px 16px); pointer-events: none; }
.rc .hero::after { content: ''; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.22), transparent 70%); pointer-events: none; }
.rc .hero > * { position: relative; }
.rc .glyphs { display: flex; gap: 10px; align-items: center; }
.rc .glyph { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; color: var(--c-primary, #fff); background: #fff !important; box-shadow: 4px 4px 0 rgba(0,0,0,.18); }
.rc .glyph.secondary { width: 44px; height: 44px; border-radius: 14px; color: var(--c-secondary, #fff); background: rgba(255,255,255,.85) !important; box-shadow: 3px 3px 0 rgba(0,0,0,.18); }
.rc .glyph svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rc .names { font: 900 clamp(30px, 7.5vw, 46px)/1.02 var(--display); letter-spacing: -0.03em; text-shadow: 3px 3px 0 rgba(0,0,0,.22); }
.rc .names .with { color: rgba(255,255,255,.78); font-size: .5em; font-weight: 800; display: block; margin-bottom: 6px; letter-spacing: .08em; text-transform: uppercase; text-shadow: none; }
.rc .pair { display: inline-block; font: 900 15px var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); background: var(--yellow); padding: 7px 14px; border-radius: 999px; box-shadow: 3px 3px 0 rgba(0,0,0,.2); justify-self: start; }
html[data-brand] .rc .pair { background: #fff; color: var(--c-primary, var(--navy)); }
.rc .hero .lede { color: rgba(255,255,255,.92); font-size: 18px; }
.rc .drives { display: flex; gap: 8px; flex-wrap: wrap; }
.rc .drives .pill { border: 1.5px solid rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.14) !important; backdrop-filter: blur(4px); }
.rc .drives .pill.warn { background: var(--warn-soft) !important; color: var(--warn); border-color: transparent; }
.rc .wheel-wrap { display: grid; gap: 10px; justify-items: center; }
.rc .wheel { width: min(320px, 82vw); height: auto; display: block; filter: drop-shadow(0 10px 18px rgba(4, 25, 99, .14)); }
.rc .wheel text { font: 800 10px var(--display); fill: var(--muted); letter-spacing: .04em; }
.rc .bars { display: grid; gap: 14px; }
.rc .bar { display: grid; gap: 6px; }
.rc .bar .lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 800; font-family: var(--display); }
.rc .bar .lbl .num { color: var(--ink-2); font-weight: 500; }
.rc .bar .track { height: 16px; border-radius: 999px; background: var(--track); overflow: hidden; border: 1px solid var(--rule); }
@keyframes grow { from { width: 0; } }
.rc .bar .track i { display: block; height: 100%; border-radius: 999px; animation: grow .9s cubic-bezier(.2,.7,.2,1) both; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); }
@media (prefers-reduced-motion: reduce) { .rc .bar .track i { animation: none; } }
.rc .bar .band { font-size: 13px; color: var(--ink-2); }
.rc .sections { display: grid; gap: 12px; }
@media (min-width: 720px) { .rc .sections { grid-template-columns: 1fr 1fr; } }
.rc .sec { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px; display: grid; gap: 8px; box-shadow: var(--shadow); border-top: 4px solid var(--c-primary, var(--brand-accent)); }
.rc .sec:nth-child(even) { border-top-color: var(--c-secondary, var(--peri-deep)); }
.rc .sec h3 { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--peri-deep); }
.rc .sec p { font-size: 16px; line-height: 1.5; }
.rc .snapshot { font-size: 14px; color: var(--ink-2); padding: 14px 16px; border-radius: 12px; background: var(--peri-soft); border: 1px dashed var(--peri); }
.rc .taken { font-size: 13px; color: var(--muted); }

/* Overlay chart */
.chart { width: 100%; height: auto; display: block; }
.chart text { font: 700 12px var(--body); fill: var(--ink-2); }
.chart .grid { stroke: var(--track); }
.chart .axis { stroke: var(--rule); }
.chart .n { fill: var(--muted); font-family: var(--mono); font-weight: 500; }

/* Login. Full navy, the dot grid in periwinkle, a yellow glow, the card floating on it. */
.login {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background-color: var(--navy);
  background-image:
    radial-gradient(700px 480px at 85% 0%, rgba(230, 244, 60, .22), transparent 60%),
    radial-gradient(600px 460px at 0% 100%, rgba(185, 193, 242, .28), transparent 60%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 16px),
    radial-gradient(rgba(185, 193, 242, .22) 1px, transparent 1.4px);
  background-size: auto, auto, auto, 22px 22px;
}
.login .card { width: min(460px, 100%); padding: 28px 24px 24px; box-shadow: 8px 8px 0 var(--peri), 0 30px 60px rgba(0, 0, 0, .35); border-color: transparent; }
.login .wordmark { font: 900 34px/1 var(--display); color: var(--navy); letter-spacing: -0.03em; text-shadow: 3px 3px 0 var(--peri); }
.login .wordmark small { display: block; font: 800 11px var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--peri-deep); margin-top: 10px; text-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .login .wordmark { color: var(--ink); } }
:root[data-theme="dark"] .login .wordmark { color: var(--ink); }
.login .group-badge { width: 84px; height: 84px; border-radius: 50%; display: block; margin: 0 auto 14px; box-shadow: 4px 4px 0 var(--yellow); }
.login .wordmark { text-align: center; }
.login .lede { text-align: center; margin: 0 auto; }

/* Footer: the group sign-off with the wordmark's smile under it. */
footer.fp-footer { position: relative; margin-top: 28px; padding: 16px 18px; border-radius: 14px; background: var(--header-bg); background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, transparent 2px 14px); color: rgba(255,255,255,.82); font-size: 12.5px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; box-shadow: 4px 4px 0 var(--peri); }
.fp-footer span:first-child { position: relative; font: 900 13px var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--header-pop); padding-bottom: 8px; }
.fp-footer span:first-child::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: 0; height: 7px; border: 2.5px solid var(--header-pop); border-top: 0; border-radius: 0 0 12px 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Team mix on the dashboard */
/* Work styles at a glance: one tile per style at the top of the Team dashboard. Copy comes from archetype_label. */
.glance { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .glance { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .glance { grid-template-columns: repeat(4, 1fr); } }
.glance .tile { display: grid; gap: 6px; align-content: start; padding: 12px 14px 14px; border: 1px solid var(--rule); border-radius: 14px; border-top: 4px solid var(--c, var(--peri)); background: var(--panel); }
.glance .tile .who { display: flex; align-items: center; gap: 10px; }
.glance .tile .glyph { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--c, var(--peri)); flex: none; }
.glance .tile .glyph svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.glance .tile .name { font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--c, var(--ink)); line-height: 1.1; }
.glance .tile .drive { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); font-weight: 700; }
.glance .tile .line { font-size: 14px; margin: 0; }
.glance .tile .wins { font-size: 12.5px; color: var(--ink-2); margin: 0; line-height: 1.4; }
.glance .tile .wins b { color: var(--ink); font-weight: 700; }
/* Team mix donut: share of each primary work style across everyone counted. */
.donut { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 4px 0 10px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.donut svg { width: 150px; height: 150px; flex: none; transform: rotate(-90deg); }
.donut svg circle { transition: stroke-dasharray .6s cubic-bezier(.2,.7,.2,1); }
.donut svg text { transform: rotate(90deg); transform-origin: 21px 21px; fill: var(--ink); font-family: var(--display); }
.donut svg text.n { font-size: 8px; font-weight: 800; }
.donut svg text.lbl { font-size: 2.6px; letter-spacing: .12em; text-transform: uppercase; fill: var(--ink-2); font-weight: 700; }
.donut .legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 0 1 300px; min-width: 220px; }
.donut .legend li { display: grid; grid-template-columns: 12px 1fr auto auto; gap: 10px; align-items: center; font-family: var(--display); font-size: 14px; }
.donut .legend li i { width: 12px; height: 12px; border-radius: 4px; display: block; }
.donut .legend li .num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink); }
.donut .legend li .muted { font-family: var(--mono); font-size: 12px; min-width: 2ch; text-align: right; }
.mix { display: grid; gap: 12px; }
.mixrow { display: grid; gap: 5px; }
.mixrow .lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; font-family: var(--display); }
.mixrow .lbl .num { color: var(--ink-2); font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 13px; }
.mixrow .track { height: 14px; border-radius: 999px; background: var(--track); overflow: hidden; border: 1px solid var(--rule); }
.mixrow .track i { display: block; height: 100%; border-radius: 999px; animation: grow .9s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { .mixrow .track i { animation: none; } }

.linkbtn.block { display: block; width: 100%; text-align: center; }

/* Field or office segmented control */
.seg { display: inline-flex; border: 1.5px solid var(--rule); border-radius: 999px; padding: 3px; gap: 2px; background: var(--panel-2); }
.seg button { min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-2); font-weight: 800; font-size: 14px; cursor: pointer; font-family: var(--display); }
.seg button.on { background: var(--brand-accent); color: var(--btn-ink); box-shadow: 2px 2px 0 var(--peri); }

/* The report. One page per section on screen, page breaks in print. Letter paper, printable colors. */
.rp { display: grid; gap: 22px; }
.rp-page { background: var(--panel); border: 1px solid var(--rule); border-radius: var(--radius); padding: 26px 24px; display: grid; gap: 14px; align-content: start; box-shadow: var(--shadow); position: relative; }
.rp-page.cover { background: var(--navy); color: #fff; border: 0; padding: 40px 28px 34px; min-height: 420px; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, transparent 2px 14px), radial-gradient(700px 400px at 90% 0%, rgba(230,244,60,.22), transparent 60%); }
html[data-brand] .rp-page.cover { background-color: var(--brand-accent); }
.rp-page.cover .badge { width: 84px; height: 84px; border-radius: 50%; display: block; box-shadow: 4px 4px 0 var(--header-pop); background: #fff; }
.rp-page.cover .wm { font: 900 clamp(30px, 6vw, 44px)/1 var(--display); letter-spacing: -0.03em; text-shadow: 3px 3px 0 rgba(0,0,0,.3); }
.rp-page.cover .wm em { font-style: normal; color: var(--header-pop); }
.rp-page.cover .for { font: 800 13px var(--display); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.rp-page.cover .who { font: 900 clamp(26px, 5vw, 36px)/1.05 var(--display); letter-spacing: -0.02em; }
.rp-page.cover .meta { color: rgba(255,255,255,.85); font-size: 15px; }
.rp-page.cover .lede { color: rgba(255,255,255,.9); }
.rp-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rp-h .glyph { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; flex: none; }
.rp-h .glyph svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rp-h h2 { font-size: 24px; letter-spacing: -0.02em; }
.rp-h h2::before { display: none; }
.rp-h .sub { color: var(--muted); font-size: 14px; flex-basis: 100%; }
.rp-num { font: 900 clamp(34px, 7vw, 48px)/1 var(--display); letter-spacing: -0.03em; }
.rp-bar { display: grid; gap: 6px; }
.rp-bar .lbl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-family: var(--display); font-weight: 800; }
.rp-bar .lbl .num { font-weight: 500; color: var(--ink-2); }
.rp-bar .track { position: relative; height: 16px; border-radius: 999px; background: var(--track); border: 1px solid var(--rule); overflow: hidden; }
.rp-bar .track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.12); z-index: 1; }
.rp-bar .track i.second { opacity: .45; }
.rp-bar .track .norm { position: absolute; top: 0; bottom: 0; z-index: 2; background: rgba(4,25,99,.16); border-left: 1.5px dashed var(--peri-deep); border-right: 1.5px dashed var(--peri-deep); mix-blend-mode: multiply; }
.rp-bar .track .mean { position: absolute; top: -2px; bottom: -2px; width: 2px; z-index: 3; background: var(--peri-deep); }
.rp-bar .rp-note { font-size: 13px; color: var(--ink-2); }
.rp-pair { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 720px) { .rp-pair { grid-template-columns: 1fr 1fr; } }
.rp-cols { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .rp-cols { grid-template-columns: 1fr 1fr; } .rp-cols.three { grid-template-columns: repeat(3, 1fr); } .rp-cols.four { grid-template-columns: repeat(4, 1fr); } }
.rp-sec { background: var(--panel-2); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; display: grid; gap: 8px; align-content: start; border-top: 4px solid var(--c, var(--brand-accent)); }
.rp-sec h3 { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--peri-deep); }
.rp-sec ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 15px; line-height: 1.45; }
.rp-sec li::marker { color: var(--c, var(--brand-accent)); }
.rp-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); align-items: center; }
.rp-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: middle; margin-right: 6px; }
.rp-phases th:first-child { width: 14%; }
.rp-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.rp-foot { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 10px; margin-top: 4px; }
.rp-gap { font-family: var(--display); font-weight: 800; font-size: 13px; padding: 2px 8px; border-radius: 999px; background: var(--peri-soft); color: var(--peri-deep); }
.rp-gap.stretch { background: var(--warn-soft); color: var(--warn); }

@media print {
  @page { size: letter; margin: 14mm 12mm; }
  html, body { background: #fff !important; color: #111 !important; }
  body { background-image: none !important; font-size: 12.5px; }
  .fp-header, .rp-toolbar, .toast, .no-print, footer.fp-footer { display: none !important; }
  .wrap { max-width: none; padding: 0; gap: 0; display: block; }
  .rp { display: block; }
  .rp-page { break-after: page; page-break-after: always; border: 0; box-shadow: none; border-radius: 0; padding: 0 0 18px; margin: 0; background: #fff; animation: none; }
  .rp-page:last-child { break-after: auto; page-break-after: auto; }
  .rp-page.cover { background: var(--navy) !important; color: #fff !important; padding: 36px 28px; border-radius: 12px; min-height: 60vh; }
  html[data-brand] .rp-page.cover { background: var(--brand-accent) !important; }
  .rp-sec, .rp-bar .track, .rp-h .glyph, .rp-page.cover, .rp-gap, .pill, .rp-bar .track i { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .rp-sec { background: #f6f6fb; border-color: #ddd; }
  .rp-cols { grid-template-columns: 1fr 1fr; }
  .rp-cols.three { grid-template-columns: repeat(3, 1fr); }
  .rp-cols.four { grid-template-columns: repeat(2, 1fr); }
  .rp-pair { grid-template-columns: 1fr 1fr; }
  .card { box-shadow: none; animation: none; }
  a { text-decoration: none; color: inherit; }
}

/* Capture mode: the report is drawn to canvas for the PDF download with the print look, on screen,
   at a fixed Letter-like width. Set for the length of the capture by report-pdf.js, then removed. */
html[data-capture] body { background-image: none !important; }
html[data-capture] .rp { display: block; }
html[data-capture] .rp-page { width: 760px; max-width: none; box-sizing: border-box; margin: 0 0 22px; border: 0; box-shadow: none; border-radius: 0; padding: 4px 4px 18px; background: #fff; color: #111; animation: none; font-size: 12.5px; }
html[data-capture] .rp-page.cover { background: var(--navy) !important; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, transparent 2px 14px), radial-gradient(700px 400px at 90% 0%, rgba(230,244,60,.22), transparent 60%); color: #fff !important; padding: 36px 28px; border-radius: 12px; min-height: 560px; }
html[data-brand][data-capture] .rp-page.cover { background: var(--brand-accent) !important; }
html[data-capture] .rp-sec { background: #f6f6fb; border-color: #ddd; }
html[data-capture] .rp-cols { grid-template-columns: 1fr 1fr; }
html[data-capture] .rp-cols.three { grid-template-columns: repeat(3, 1fr); }
html[data-capture] .rp-cols.four { grid-template-columns: repeat(2, 1fr); }
html[data-capture] .rp-pair { grid-template-columns: 1fr 1fr; }
html[data-capture] .rp-page .card { box-shadow: none; animation: none; }
html[data-capture] .rp-page a { text-decoration: none; color: inherit; }