/* =========================================================================
   ROSIE — Report screens (Agent Report + Team Scorecard + placeholders)
   Shared scaffold: light-theme tokens, the full-bleed light surface, the
   page wrapper, and a placeholder empty-state.

   These screens are LIGHT-themed and self-contained — the dashboards were
   designed as standalone pages (design_system/Agent Report.html, Team
   Scorecard.html). Navigation lives in the single global navy header; these
   screens carry no sub-tab bar of their own.
   The rest of the app is dark-themed, so every report token is redefined here
   on the screen root (overriding the dark tokens.css values within this
   subtree only) and every report rule is scoped under the screen id via CSS
   nesting so nothing leaks into — or is clobbered by — the dark app shell.
   ========================================================================= */

.report-screen {
  /* page-local accents (from the design files' inline :root) */
  --gap-open:   #E0922B;
  --gap-closed: #2A9D8F;
  --fail:       #E15A47;
  --rail:       rgba(26, 46, 74, 0.08);
  --k: #1A5276; --k-fill: #D6EAF8;
  --s: #1E8449; --s-fill: #D5F5E3;
  --a: #784212; --a-fill: #FDEBD0;

  /* brand tokens (from design_system/colors_and_type.css — not loaded by
     the app, so reproduced here). Note --border / --border-emph are COLOR
     values here so the design's `1px solid var(--border)` resolves cleanly. */
  --paper:    #F8F6F2;
  --ink-900:  #1A2E4A;
  --ink-700:  #3D5068;
  --ink-500:  #6B7E93;
  --ink-300:  #A8B4C2;
  --cyan-600: #0891B2;
  --cyan-500: #22B4D4;
  --cyan-050: #E8F7FB;
  --teal-600: #2A9D8F;
  --teal-050: #EBF7F6;
  --gold-500: #FFA94D;
  --gold-050: #FFE9D1;
  --border:      rgba(26, 46, 74, 0.09);
  --border-emph: rgba(26, 46, 74, 0.15);
  --radius-pill:  100px;
  --radius-input: 8px;

  /* fonts already loaded by tokens.css @import; redeclared locally so the
     report subtree is independent of the dark theme's family aliases */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body:    'DM Sans', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --dur-micro: 120ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  color: var(--ink-700);
  font-family: var(--font-body);
  letter-spacing: -0.01em;
}

/* The light surface that holds the whole report. Full-bleed — it spans the
   viewport edge-to-edge between the single navy header and the footer, so the
   report reads as its own light page rather than a card on the dark shell.
   Content is centered by the inner .page (max-width 1240px). */
.report-surface {
  width: 100%;
  flex: 1 0 auto;
  background: var(--paper);
}

.report-screen {
  /* generic links inside the report — light-theme cyan, not the dark teal */
  a {
    color: var(--cyan-600);
    text-decoration: none;
  }
  a:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* page content wrapper */
  .page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 30px 28px 64px;
  }

  /* placeholder empty-state — used by report screens that don't have their
     full content yet (Evaluations, Sim Training). Centered in the page. */
  .report-empty {
    max-width: 560px;
    margin: 0 auto;
    padding: 96px 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
  }
  .report-empty-ico {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: var(--cyan-050);
    color: var(--cyan-600);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .report-empty-ico svg { width: 34px; height: 34px; }
  .report-empty-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    background: var(--gold-050);
    color: #9A6212;
    font: 700 10.5px/1 var(--font-body);
    letter-spacing: 0.09em;
    text-transform: uppercase;
  }
  .report-empty h1 {
    margin: 0;
    font: 900 30px/1.1 var(--font-display);
    color: var(--ink-900);
    letter-spacing: -0.02em;
  }
  .report-empty p {
    margin: 0;
    font: 500 15px/1.6 var(--font-body);
    color: var(--ink-500);
  }

  /* shared hero scaffold (per-page overrides live in each page's CSS) */
  .hero {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding-bottom: 22px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--rail);
  }
  .hero-id { display: flex; align-items: center; gap: 18px; }
  .hero-eyebrow {
    font: 700 11px/1 var(--font-body);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cyan-600);
    margin-bottom: 8px;
  }
  .hero-name {
    font: 900 34px/1 var(--font-display);
    color: var(--ink-900);
    letter-spacing: -0.02em;
  }
  .hero-meta {
    margin-top: 9px;
    display: flex;
    align-items: center;
    gap: 10px;
    font: 500 13px/1 var(--font-body);
    color: var(--ink-500);
  }
  .hero-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-300); }
  .hero-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    align-self: center;
  }

  /* shared buttons */
  .btn-soft {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-radius: var(--radius-pill);
    font: 600 14px/1 var(--font-body);
    cursor: pointer;
    background: #fff;
    color: var(--ink-900);
    border: 1px solid var(--border-emph);
    transition: border-color var(--dur-micro) var(--ease);
  }
  .btn-soft:hover { border-color: var(--ink-900); }
  .btn-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 12px 20px;
    border-radius: var(--radius-pill);
    font: 600 14px/1 var(--font-body);
    cursor: pointer;
    border: none;
    background: var(--cyan-600);
    color: #fff;
    box-shadow: 0 6px 18px rgba(8, 145, 178, 0.25);
    transition: background var(--dur-micro) var(--ease);
  }
  .btn-cta:hover { background: var(--cyan-500); }
  .btn-cta svg, .btn-soft svg { width: 16px; height: 16px; }

  /* shared field label + section label */
  .field-label {
    font: 700 11px/1 var(--font-body);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-500);
    margin-bottom: 8px;
  }
  .sec-label { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .sec-label h2 {
    font: 700 13px/1 var(--font-body);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-900);
    margin: 0;
  }
  .sec-label::before {
    content: '';
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--cyan-600);
  }
  .sec-label.teal::before { background: var(--teal-600); }
  .sec-label.gold::before { background: var(--gold-500); }
  .sec-label .help { width: 16px; height: 16px; color: var(--ink-300); }
  .sec-label .count {
    margin-left: 6px;
    font: 700 12px/1 var(--font-body);
    color: var(--ink-300);
    letter-spacing: 0;
    text-transform: none;
  }

  /* shared metric tokens (per-page grid margins overridden downstream) */
  .metric {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    min-height: 120px;
    transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
  }
  .metric:hover { border-color: var(--border-emph); box-shadow: 0 8px 26px rgba(26, 46, 74, 0.06); }
  .metric-label {
    font: 700 11px/1.2 var(--font-body);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-500);
  }
  .metric-val {
    margin-top: auto;
    font: 900 38px/1 var(--font-display);
    color: var(--ink-900);
    letter-spacing: -0.02em;
  }
  .metric-val.open { color: var(--gap-open); }
  .metric-val.closed { color: var(--gap-closed); }
  .metric-sub { margin-top: 8px; font: 500 12px/1.3 var(--font-body); color: var(--ink-500); }
  .metric-accent { display: inline-flex; align-items: center; gap: 6px; margin-top: 9px; font: 700 11.5px/1 var(--font-body); }
  .metric-accent.up { color: var(--teal-600); }
  .metric-accent.down { color: var(--fail); }
  .metric-accent svg { width: 12px; height: 12px; }
  .metric.score { flex-direction: row; align-items: center; gap: 14px; }
  .metric.score .score-text { display: flex; flex-direction: column; height: 100%; }
  .donut { position: relative; width: 74px; height: 74px; flex-shrink: 0; }
  .donut-cap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 800 15px/1 var(--font-display);
    color: var(--teal-600);
  }

  /* shared K·S·A proportion strip */
  .ksa-prop { display: flex; gap: 4px; margin-top: 11px; height: 28px; }
  .ksa-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 7px;
    min-width: 34px;
    padding: 0 6px;
    overflow: hidden;
    white-space: nowrap;
  }
  .ksa-seg .l { font: 800 12px/1 var(--font-display); }
  .ksa-seg .c { font: 700 11px/1 var(--font-mono); opacity: 0.65; }
  .ksa-seg.k { background: var(--k-fill); color: var(--k); }
  .ksa-seg.s { background: var(--s-fill); color: var(--s); }
  .ksa-seg.a { background: var(--a-fill); color: var(--a); }

  /* shared trend chart */
  .chart-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 22px 24px 18px;
    margin-bottom: 38px;
  }
  .chart-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 8px; }
  .chart-title { font: 700 16px/1.2 var(--font-display); color: var(--ink-900); }
  .chart-sub { margin-top: 4px; font: 500 13px/1.4 var(--font-body); color: var(--ink-500); }
  .chart-now { text-align: right; }
  .chart-now .v { font: 900 30px/1 var(--font-display); color: var(--teal-600); letter-spacing: -0.02em; }
  .chart-now .d {
    font: 700 12px/1 var(--font-body);
    color: var(--teal-600);
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
  }
  .chart-now .d svg { width: 12px; height: 12px; }
  .chart-legend { display: flex; gap: 20px; margin-top: 4px; }
  .chart-legend span { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1 var(--font-body); color: var(--ink-500); }
  .chart-legend .sw { width: 14px; height: 3px; border-radius: 2px; }

  /* shared loop-stage pill (per-page width overridden downstream) */
  .stage {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    height: 32px;
    box-sizing: border-box;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    font: 700 11px/1 var(--font-body);
    letter-spacing: 0.02em;
    white-space: nowrap;
  }
  .stage .ico { width: 13px; height: 13px; }
  .stage.rta   { background: rgba(8, 145, 178, 0.10); color: var(--cyan-600); }
  .stage.post  { background: rgba(42, 157, 143, 0.12); color: var(--teal-600); }
  .stage.sim   { background: var(--gold-050); color: #B06A12; }
  .stage.coach { background: rgba(26, 46, 74, 0.07); color: var(--ink-900); }
  .stage.closed{ background: var(--s-fill); color: var(--s); }

  /* shared panel container */
  .panel {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
  }
}

/* =========================================================================
   ROSIE — Agent Report screen (My Scorecard)
   Page-specific rules. Shared scaffold (tokens, surface, hero,
   buttons, metrics, chart, stage, panel) is in the shared section above. Everything
   here is scoped under #screen-agent-report via CSS nesting.
   Source: design_system/Agent Report.html
   ========================================================================= */

#screen-agent-report {

  /* hero */
  .hero-av {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: linear-gradient(140deg, #22B4D4, #0891B2 70%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 800 23px/1 var(--font-display);
    box-shadow: 0 6px 18px rgba(8, 145, 178, 0.28);
    flex-shrink: 0;
  }
  .hero-tier {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    background: var(--gold-050);
    color: #9A6212;
    font: 700 10.5px/1 var(--font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* toolbar */
  .toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
  .daterange {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    min-width: 230px;
    background: #fff;
    border: 1px solid var(--border-emph);
    border-radius: var(--radius-input);
    font: 500 14px/1 var(--font-body);
    color: var(--ink-900);
  }
  .daterange svg { width: 17px; height: 17px; color: var(--ink-500); margin-left: auto; }

  /* KPI metrics grid */
  .metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 36px; }

  /* K·S·A bar variant (open ring / closed fill) */
  .ksa-bars { display: flex; gap: 6px; margin-top: 11px; }
  .ksa-bar {
    flex: 1;
    min-width: 0;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 7px 0 10px;
  }
  .ksa-bar .l { font: 800 13px/1 var(--font-display); }
  .ksa-bar .n {
    position: relative;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 800 11px/1 var(--font-body);
    flex-shrink: 0;
  }
  .ksa-bar .n .d { position: relative; z-index: 1; }
  /* open ring — gap in upper-left quadrant (9:00 → 12:00) */
  .ksa-bar .n.open::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 0;
    background: conic-gradient(currentColor 0deg 270deg, transparent 270deg 360deg);
    -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    mask: radial-gradient(closest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  }
  /* closed — solid filled circle */
  .ksa-bar .n.closed { color: #fff; }
  .ksa-bar.k .n.closed { background: var(--k); }
  .ksa-bar.s .n.closed { background: var(--s); }
  .ksa-bar.a .n.closed { background: var(--a); }
  .ksa-bar.k { background: var(--k-fill); color: var(--k); }
  .ksa-bar.s { background: var(--s-fill); color: var(--s); }
  .ksa-bar.a { background: var(--a-fill); color: var(--a); }

  /* bottom grid */
  .grid2 { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 28px; align-items: stretch; }
  .grid2 > div { display: flex; flex-direction: column; min-width: 0; }
  .grid2 .panel { flex: 1; }
  @media (max-width: 980px) {
    .grid2 { grid-template-columns: 1fr; }
    .metrics { grid-template-columns: repeat(2, 1fr); }
  }

  /* performance gaps */
  .panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 18px 22px 14px;
    border-bottom: 1px solid var(--rail);
  }
  .panel-head .t { font: 700 14px/1 var(--font-body); color: var(--ink-900); }
  .panel-head .c {
    font: 700 11px/1 var(--font-body);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-500);
  }
  .gap {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 150px;
    grid-template-rows: auto auto;
    gap: 4px 14px;
    align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid var(--rail);
  }
  .gap:last-child { border-bottom: none; }
  .gap:hover { background: #FBFAF8; }
  .gap-badge {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 900 14px/1 var(--font-display);
  }
  .gap-badge.k { background: var(--k-fill); color: var(--k); }
  .gap-badge.s { background: var(--s-fill); color: var(--s); }
  .gap-badge.a { background: var(--a-fill); color: var(--a); }
  .gap-q { grid-column: 2; grid-row: 1; font: 600 14px/1.35 var(--font-body); color: var(--ink-900); }
  .gap-meta {
    grid-column: 2;
    grid-row: 2;
    font: 500 12px/1.3 var(--font-body);
    color: var(--ink-500);
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .gap-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-300); }
  .gap-status { grid-column: 3; grid-row: 1 / span 2; justify-self: start; align-self: center; }
  .gap-status .stage { width: 100%; padding: 0 12px; }
  .loopbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 22px;
    background: #FBFAF8;
    border-top: 1px solid var(--rail);
    font: 500 12px/1 var(--font-body);
    color: var(--ink-500);
  }
  .loopbar b { color: var(--ink-900); font-weight: 700; }
  .loopbar .arrow { color: var(--ink-300); }

  /* sim training — icon-led cards (2x2) */
  .sim-panel { padding: 16px; }
  .sim-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 14px; height: 100%; }
  .sim-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 16px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #fff;
    position: relative;
    transition: border-color var(--dur-micro) var(--ease), box-shadow var(--dur-micro) var(--ease);
  }
  .sim-card:hover { border-color: var(--border-emph); box-shadow: 0 8px 22px rgba(26, 46, 74, 0.06); }
  .sim-ico { width: 54px; height: 54px; border-radius: 15px; display: flex; align-items: center; justify-content: center; }
  .sim-ico svg { width: 28px; height: 28px; }
  .sim-ico.k { background: var(--k-fill); color: var(--k); }
  .sim-ico.s { background: var(--s-fill); color: var(--s); }
  .sim-ico.a { background: var(--a-fill); color: var(--a); }
  .sim-ksa {
    position: absolute;
    top: 16px;
    right: 16px;
    font: 800 11px/1 var(--font-body);
    letter-spacing: 0.08em;
    color: var(--ink-300);
  }
  .sim-title { font: 700 16px/1.2 var(--font-display); color: var(--ink-900); letter-spacing: -0.01em; }
  .sim-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .sim-status {
    font: 700 10px/1 var(--font-body);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
  }
  .sim-status.assigned { color: var(--gap-open); background: rgba(224, 146, 43, 0.12); }
  .sim-status.progress { color: var(--cyan-600); background: var(--cyan-050); }
  .sim-status.recommended { color: var(--ink-500); background: rgba(26, 46, 74, 0.06); }
  .sim-status.done { color: var(--gap-closed); background: var(--teal-050); }
  .sim-go { display: inline-flex; align-items: center; gap: 4px; font: 700 12px/1 var(--font-body); color: var(--cyan-600); cursor: pointer; white-space: nowrap; }
  .sim-go:hover { text-decoration: underline; text-underline-offset: 3px; }
  .sim-pct { font: 700 12px/1 var(--font-mono); color: var(--ink-500); }

  /* coaching notes — full width */
  .notes-wrap { display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px; align-items: start; }
  @media (max-width: 980px) { .notes-wrap { grid-template-columns: 1fr; } }
  .note-card { background: #fff; border: 1px solid var(--border); border-radius: 18px; padding: 4px 24px 20px; }
  .note-row {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--rail);
    align-items: start;
  }
  .note-row:last-of-type { border-bottom: none; }
  .note-k { font: 700 12px/1.4 var(--font-body); color: var(--ink-500); padding-top: 2px; }
  .note-v { font: 500 13.5px/1.55 var(--font-body); color: var(--ink-900); text-wrap: pretty; }
  .note-v .more { color: var(--cyan-600); font-weight: 600; cursor: pointer; }
  .note-tags { display: flex; gap: 8px; flex-wrap: wrap; }
  .tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border-radius: var(--radius-pill);
    font: 600 12px/1 var(--font-body);
    background: var(--cyan-050);
    color: var(--cyan-600);
  }
  .tag.teal { background: var(--teal-050); color: var(--teal-600); }
  .tag.sm { padding: 4px 10px; font-size: 11px; }
  .countdown {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    padding: 4px 11px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(224, 146, 43, 0.4);
    color: var(--gap-open);
    font: 700 11px/1 var(--font-body);
  }
  .note-foot { padding-top: 16px; }
  .note-foot a { font: 600 13px/1 var(--font-body); color: var(--cyan-600); text-decoration: none; }
  .note-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* history list */
  .note-history { background: #fff; border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
  .note-history-head {
    padding: 16px 20px 13px;
    border-bottom: 1px solid var(--rail);
    font: 700 11px/1 var(--font-body);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-500);
  }
  .hist {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--rail);
    align-items: center;
  }
  .hist:last-child { border-bottom: none; }
  .hist:hover { background: #FBFAF8; }
  .hist-main { min-width: 0; }
  .hist-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
  .hist-date { font: 700 13px/1 var(--font-body); color: var(--ink-900); }
  .hist-coach { font: 500 12px/1 var(--font-body); color: var(--ink-500); }
  .hist-snippet { font: 500 13px/1.45 var(--font-body); color: var(--ink-700); margin-bottom: 9px; text-wrap: pretty; }
  .hist-tags { display: flex; gap: 6px; flex-wrap: wrap; }
  .hist-delta { font: 800 16px/1 var(--font-display); white-space: nowrap; letter-spacing: -0.01em; }
  .hist-delta.up { color: var(--gap-closed); }
  .hist-delta.flat { color: var(--ink-500); }
}

/* =========================================================================
   ROSIE — Team Scorecard screen
   Page-specific rules. Shared scaffold (tokens, surface, hero,
   buttons, metrics, chart, stage, panel) is in the shared section above. Everything
   here is scoped under #screen-team-scorecard via CSS nesting.
   Source: design_system/Team Scorecard.html
   ========================================================================= */

#screen-team-scorecard {

  /* hero — rounded-square avatar holding an icon */
  .hero-av {
    width: 62px;
    height: 62px;
    border-radius: 17px;
    background: linear-gradient(140deg, #22B4D4, #0891B2 70%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 6px 18px rgba(8, 145, 178, 0.28);
  }
  .hero-av svg { width: 30px; height: 30px; }

  /* filters */
  .filters { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 28px; }
  .select {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    min-width: 200px;
    background: #fff;
    border: 1px solid var(--border-emph);
    border-radius: var(--radius-input);
    font: 500 14px/1 var(--font-body);
    color: var(--ink-900);
    cursor: pointer;
  }
  .select svg { width: 16px; height: 16px; color: var(--ink-500); margin-left: auto; }
  .compare { display: inline-flex; align-items: center; gap: 9px; padding-bottom: 11px; font: 600 13px/1 var(--font-body); color: var(--ink-700); cursor: pointer; }
  .compare .box { width: 18px; height: 18px; border-radius: 5px; background: var(--cyan-600); display: flex; align-items: center; justify-content: center; }
  .compare .box svg { width: 12px; height: 12px; color: #fff; }

  /* metrics grid */
  .metrics { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 22px; }
  .qa-of { font: 500 11px/1 var(--font-body); color: var(--ink-300); margin-left: 2px; }

  /* by-form table */
  .formtable { background: #fff; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin-bottom: 38px; }
  .formrow {
    display: grid;
    grid-template-columns: 1.7fr 0.8fr 0.8fr 1.6fr auto;
    gap: 18px;
    align-items: center;
    padding: 15px 22px;
    border-bottom: 1px solid var(--rail);
  }
  .formrow.head { padding: 13px 22px; border-bottom: 1px solid var(--rail); }
  .formrow.head span {
    font: 700 11px/1 var(--font-body);
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-500);
  }
  .formrow:last-child { border-bottom: none; }
  .formrow:hover:not(.head) { background: #FBFAF8; }
  .form-name { font: 600 14px/1.3 var(--font-body); color: var(--cyan-600); cursor: pointer; }
  .form-name:hover { text-decoration: underline; text-underline-offset: 3px; }
  .form-num { font: 600 14px/1 var(--font-body); color: var(--ink-900); display: flex; align-items: center; gap: 7px; }
  .delta { font: 700 11.5px/1 var(--font-body); display: inline-flex; align-items: center; gap: 2px; }
  .delta.up { color: var(--teal-600); }
  .delta.down { color: var(--fail); }
  .delta svg { width: 10px; height: 10px; }
  .results { display: flex; height: 24px; border-radius: 6px; overflow: hidden; gap: 2px; }
  .results span { display: flex; align-items: center; justify-content: center; font: 700 11px/1 var(--font-body); color: #fff; min-width: 30px; }
  .results .pass { background: var(--gap-closed); }
  .results .partial { background: var(--gold-500); }
  .results .fail { background: var(--fail); }
  .form-link { font: 600 13px/1 var(--font-body); color: var(--cyan-600); text-decoration: none; white-space: nowrap; }
  .form-link:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* roster */
  .panel { margin-bottom: 38px; }
  .roster { width: 100%; border-collapse: collapse; }
  .roster thead th {
    font: 700 11px/1 var(--font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-500);
    text-align: left;
    padding: 15px 18px;
    border-bottom: 1px solid var(--rail);
  }
  .roster thead th.r { text-align: right; }
  .roster tbody td { padding: 15px 18px; border-bottom: 1px solid var(--rail); vertical-align: middle; }
  .roster tbody tr:last-child td { border-bottom: none; }
  .roster tbody tr:hover { background: #FBFAF8; }
  .ag { display: flex; align-items: center; gap: 12px; }
  .ag-trend { font: 700 11px/1 var(--font-body); display: inline-flex; align-items: center; gap: 1px; width: 30px; }
  .ag-trend.down { color: var(--fail); }
  .ag-trend.up { color: var(--teal-600); }
  .ag-trend svg { width: 11px; height: 11px; }
  .ag-av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(140deg, #5B6B82, #3E4C61);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 800 12px/1 var(--font-display);
    flex-shrink: 0;
  }
  .ag-name { font: 600 14px/1.2 var(--font-body); color: var(--ink-900); }
  .ag-role { font: 500 11.5px/1 var(--font-body); color: var(--ink-500); margin-top: 3px; }
  .qa-score { font: 800 17px/1 var(--font-display); }
  .qa-score.fail { color: var(--fail); }
  .qa-score.warn { color: var(--gap-open); }
  .qa-score.pass { color: var(--gap-closed); }
  .gap-mini { display: flex; gap: 4px; }
  .gap-chip { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px; border-radius: 5px; font: 800 10px/1 var(--font-body); }
  .gap-chip .gc { font: 700 10px/1 var(--font-mono); opacity: 0.7; }
  .gap-chip.k { background: var(--k-fill); color: var(--k); }
  .gap-chip.s { background: var(--s-fill); color: var(--s); }
  .gap-chip.a { background: var(--a-fill); color: var(--a); }
  .evstrip { display: flex; gap: 3px; }
  .evstrip i { width: 14px; height: 14px; border-radius: 3px; }
  .evstrip i.p { background: var(--gap-closed); }
  .evstrip i.f { background: var(--fail); }
  /* roster's loop-stage pill is fixed-width (overrides shared .stage) */
  .stage { width: 128px; padding: 0 12px; }
  .lastco { font: 500 13px/1.3 var(--font-body); color: var(--ink-700); }
  .view-link { font: 600 13px/1 var(--font-body); color: var(--cyan-600); text-decoration: none; white-space: nowrap; }
  .view-link:hover { text-decoration: underline; text-underline-offset: 3px; }

  /* team gaps */
  .gaps-wrap {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
  }
  @media (max-width: 980px) {
    .gaps-wrap { grid-template-columns: 1fr; }
    .metrics { grid-template-columns: repeat(2, 1fr); }
  }
  .sections { border-right: 1px solid var(--rail); }
  .gaps-col-head {
    padding: 15px 20px 13px;
    border-bottom: 1px solid var(--rail);
    font: 700 11px/1 var(--font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-500);
    display: flex;
    justify-content: space-between;
  }
  .section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--rail);
    cursor: pointer;
  }
  .section-row:last-child { border-bottom: none; }
  .section-row.active { background: var(--cyan-050); box-shadow: inset 3px 0 0 var(--cyan-600); }
  .section-row:hover:not(.active) { background: #FBFAF8; }
  .section-name { font: 600 14px/1.3 var(--font-body); color: var(--ink-900); }
  .section-form { font: 500 11.5px/1.2 var(--font-body); color: var(--ink-500); margin-top: 3px; }
  .section-score { font: 800 16px/1 var(--font-display); white-space: nowrap; text-align: right; }
  .section-score.fail { color: var(--fail); }
  .section-score.warn { color: var(--gap-open); }
  .section-score.pass { color: var(--gap-closed); }
  .section-score.muted { color: var(--ink-300); }
  .section-score .delta { display: block; margin-top: 5px; font-size: 11px; justify-content: flex-end; }
  .crit {
    display: grid;
    grid-template-columns: 30px 1fr 150px 88px;
    gap: 6px 14px;
    align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid var(--rail);
  }
  .crit:last-child { border-bottom: none; }
  .crit:hover { background: #FBFAF8; }
  .crit-badge {
    grid-row: 1 / span 2;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 900 14px/1 var(--font-display);
  }
  .crit-badge.k { background: var(--k-fill); color: var(--k); }
  .crit-badge.s { background: var(--s-fill); color: var(--s); }
  .crit-badge.a { background: var(--a-fill); color: var(--a); }
  .crit-q { grid-column: 2; font: 600 13.5px/1.4 var(--font-body); color: var(--ink-900); }
  .crit-form { grid-column: 2; font: 500 11.5px/1.2 var(--font-body); color: var(--ink-500); }
  .crit-occ { grid-column: 3; grid-row: 1 / span 2; }
  .crit-occ .pct { font: 800 13px/1 var(--font-display); color: var(--ink-900); }
  .crit-occ .occbar { height: 6px; border-radius: 3px; background: rgba(225, 90, 71, 0.14); margin-top: 6px; overflow: hidden; }
  .crit-occ .occbar > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #E15A47, #F08A7B); }
  .crit-agents { grid-column: 4; grid-row: 1 / span 2; text-align: right; }
  .crit-agents .n { font: 800 15px/1 var(--font-display); color: var(--ink-900); }
  .crit-agents .lbl { font: 500 10.5px/1.2 var(--font-body); color: var(--ink-500); margin-top: 3px; }
  .crithead {
    padding: 15px 22px 13px;
    border-bottom: 1px solid var(--rail);
    display: grid;
    grid-template-columns: 1fr 150px 88px;
    gap: 14px;
  }
  .crithead span {
    font: 700 11px/1 var(--font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-500);
  }
  .crithead span.r { text-align: right; }
}