/* 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"]  { --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: 72px; font-family: var(--display); letter-spacing: -0.01em; }
.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 */
.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); }