:root {
      --ink: #2b2b2d;
      --muted: #717176;
      --canvas: #eef0f1;
      --card: #ffffff;
      --track: #eceeef;
      --high: #0795b2;
      --moderate: #ff8a34;
      --low: #df4124;
      --na: #d9dcde;
      --navy: #07195b;
      --up: #0788a4;
      --down: #d94b33;
    }

    * { box-sizing: border-box; }
    html { background: var(--canvas); }
    body {
      margin: 0;
      min-width: 320px;
      color: var(--ink);
      background: var(--canvas);
      font-family: "DM Sans", Arial, Helvetica, sans-serif;
      font-size: 13px;
      -webkit-font-smoothing: antialiased;
    }
    button, select { font: inherit; }
    button { color: inherit; }

    .site-topbar {
      position: sticky;
      top: 0;
      z-index: 40;
      display: grid;
      grid-template-columns: 232px minmax(0, 1fr) auto;
      align-items: center;
      min-height: 72px;
      border-bottom: 1px solid #e5e7ea;
      background: #fff;
      box-shadow: 0 2px 12px rgba(7,25,91,.035);
    }
    .brand-home { display: flex; align-items: center; height: 72px; padding: 0 26px; border-right: 1px solid #eef0f2; }
    .brand-home img { display: block; width: 150px; height: auto; }
    .workspace-switcher { display: inline-flex; align-items: center; gap: 10px; width: fit-content; min-width: 0; margin-left: 24px; padding: 9px 12px; border: 1px solid #e3e5e8; border-radius: 12px; background: #fff; color: var(--ink); cursor: default; }
    .workspace-mark { display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 9px; background: #eaf0ff; color: #004eee; font-weight: 700; }
    .workspace-copy { min-width: 0; text-align: left; }
    .workspace-copy strong, .workspace-copy span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .workspace-copy strong { font-size: 13px; }
    .workspace-copy span { margin-top: 1px; color: var(--muted); font-size: 11px; }
    .workspace-chevron { color: #85888c; font-size: 13px; }
    .topbar-actions { display: flex; align-items: center; gap: 10px; padding-right: 22px; }
    .credit-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border-radius: 999px; background: #f1f5ff; color: #173b91; font-size: 12px; font-weight: 700; }
    .credit-dot { width: 8px; height: 8px; border-radius: 50%; background: #004eee; box-shadow: 0 0 0 4px rgba(0,78,238,.1); }
    .topbar-avatar { display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; }

    .site-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: calc(100vh - 72px); }
    .site-sidebar { position: sticky; top: 72px; display: flex; flex-direction: column; height: calc(100vh - 72px); padding: 22px 14px 16px; border-right: 0; background: #001555; }
    .nav-section-label { margin: 0 12px 9px; color: rgba(255,255,255,.45); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
    .sidebar-nav { display: flex; flex-direction: column; gap: 5px; }
    .global-nav-link { position: relative; display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 12px; border: 0; border-radius: 13px; background: transparent; color: rgba(255,255,255,.73); font-size: 13px; font-weight: 700; text-align: left; cursor: default; }
    .global-nav-link:hover { background: rgba(255,255,255,.07); color: #fff; }
    .global-nav-link.active { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 3px 0 0 #3f79ff; }
    .nav-icon { position: relative; width: 21px; height: 21px; flex: 0 0 auto; color: currentColor; }
    .nav-icon.people::before { content: ""; position: absolute; left: 7px; top: 1px; width: 6px; height: 6px; border: 2.3px solid currentColor; border-radius: 50%; }
    .nav-icon.people::after { content: ""; position: absolute; left: 3px; bottom: 1px; width: 14px; height: 8px; border: 2.3px solid currentColor; border-radius: 9px 9px 4px 4px; }
    .nav-icon.campaigns { border: 2.3px solid currentColor; border-radius: 5px; background: linear-gradient(currentColor,currentColor) 50% 6px/12px 2px no-repeat, linear-gradient(currentColor,currentColor) 7px 50%/2px 9px no-repeat; }
    .nav-icon.campaigns::before, .nav-icon.campaigns::after { content: ""; position: absolute; top: -3px; width: 2px; height: 6px; border-radius: 2px; background: currentColor; }
    .nav-icon.campaigns::before { left: 4px; }
    .nav-icon.campaigns::after { right: 4px; }
    .nav-icon.assessments { left: 2px; width: 17px; height: 20px; border: 2.3px solid currentColor; border-radius: 4px; }
    .nav-icon.assessments::before { content: ""; position: absolute; left: 3px; top: -5px; width: 7px; height: 5px; border: 2.3px solid currentColor; border-radius: 3px; background: #001555; }
    .nav-icon.assessments::after { content: ""; position: absolute; left: 4px; top: 8px; width: 7px; height: 4px; border-left: 2.3px solid currentColor; border-bottom: 2.3px solid currentColor; transform: rotate(-45deg); }
    .nav-icon.academy::before, .nav-icon.academy::after { content: ""; position: absolute; top: 4px; width: 8px; height: 13px; border: 2.3px solid currentColor; }
    .nav-icon.academy::before { left: 1px; border-right: 0; border-radius: 5px 0 0 3px; transform: skewY(8deg); }
    .nav-icon.academy::after { right: 1px; border-left: 0; border-radius: 0 5px 3px 0; transform: skewY(-8deg); }
    .nav-icon.community::before { content: ""; position: absolute; left: 7px; top: 1px; width: 5px; height: 5px; border: 2.2px solid currentColor; border-radius: 50%; box-shadow: -7px 4px 0 -1px #001555, -7px 4px 0 1.2px currentColor, 7px 4px 0 -1px #001555, 7px 4px 0 1.2px currentColor; }
    .nav-icon.community::after { content: ""; position: absolute; left: 4px; bottom: 1px; width: 11px; height: 7px; border: 2.3px solid currentColor; border-radius: 9px 9px 3px 3px; box-shadow: -6px 1px 0 -1px #001555, 6px 1px 0 -1px #001555; }
    .nav-icon.data-studio { border-left: 2.3px solid currentColor; border-bottom: 2.3px solid currentColor; border-radius: 0 0 0 4px; background: linear-gradient(currentColor,currentColor) 4px 12px/3px 6px no-repeat, linear-gradient(currentColor,currentColor) 9px 7px/3px 11px no-repeat, linear-gradient(currentColor,currentColor) 14px 2px/3px 16px no-repeat; }
    .nav-icon.account { border: 2.3px solid currentColor; border-radius: 50%; }
    .nav-icon.account::before { content: ""; position: absolute; left: 6px; top: 4px; width: 5px; height: 5px; border: 2px solid currentColor; border-radius: 50%; }
    .nav-icon.account::after { content: ""; position: absolute; left: 4px; bottom: 3px; width: 9px; height: 5px; border: 2px solid currentColor; border-radius: 7px 7px 3px 3px; }
    .nav-lock { margin-left: auto; padding: 3px 6px; border-radius: 999px; background: rgba(255,255,255,.12); color: rgba(255,255,255,.68); font-size: 9px; font-weight: 700; letter-spacing: .05em; }
    .sidebar-spacer { flex: 1; }
    .sidebar-footer { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.13); }
    .sidebar-caption { margin: 10px 12px 0; color: rgba(255,255,255,.42); font-size: 10px; line-height: 1.4; }
    .site-content { min-width: 0; }
    .page { width: min(1600px, calc(100% - 40px)); margin: 0 auto; padding: 20px 0 34px; }

    .profile-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 82px; margin-bottom: 12px; padding: 0 4px; }
    .profile-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .avatar { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; background: var(--navy); color: white; font-weight: 700; letter-spacing: -.02em; }
    .eyebrow { margin: 0 0 3px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    .profile-name { margin: 0; font-size: 24px; font-weight: 400; line-height: 1.05; letter-spacing: -.035em; }
    .profile-email { margin: 2px 0 0; color: #424247; font-size: 13px; line-height: 1.2; }
    .profile-state { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    .profile-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
    .assess-primary { min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: #004eee; color: #fff; font-size: 16px; font-weight: 700; cursor: default; box-shadow: 0 7px 18px rgba(0,78,238,.18); }
    .assess-primary:focus-visible { outline: 3px solid rgba(0,78,238,.24); outline-offset: 3px; }
    .mode-toggle { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; width: 140px; height: 48px; padding: 0 18px 0 50px; border: 0; border-radius: 999px; color: white; font-size: 16px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background .18s ease, padding .18s ease; }
    .mode-toggle .knob { position: absolute; left: 5px; top: 5px; width: 38px; height: 38px; border-radius: 50%; background: white; box-shadow: 0 1px 3px rgba(0,0,0,.09); transition: left .18s ease; }
    .mode-toggle.growth { background: var(--high); }
    .mode-toggle.clinical { justify-content: flex-start; padding: 0 50px 0 17px; background: var(--low); }
    .mode-toggle.clinical .knob { left: 97px; }
    #session-toggle { width: 158px; }
    .mode-toggle.session { justify-content: flex-start; padding: 0 50px 0 17px; background: var(--navy); }
    .mode-toggle.session .knob { left: 115px; }
    .mode-toggle.review { justify-content: flex-end; padding: 0 18px 0 50px; background: #858587; }
    .mode-toggle:focus-visible { outline: 3px solid rgba(7,149,178,.25); outline-offset: 3px; }
    .mode-toggle:disabled { opacity: .55; cursor: default; }

    .profile-tabs { display: flex; align-items: center; gap: 4px; margin-bottom: 18px; padding: 6px; overflow-x: auto; border: 1px solid #e4e6e8; border-radius: 17px; background: #fff; box-shadow: 0 8px 24px rgba(7,25,91,.035); scrollbar-width: thin; }
    .profile-tab { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 0 17px; border: 0; border-radius: 12px; background: transparent; color: #6a6d72; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: default; }
    .profile-tab[aria-selected="true"] { background: var(--navy); color: #fff; box-shadow: 0 5px 13px rgba(7,25,91,.16); }
    .profile-tab:not([aria-selected="true"]):hover { background: #f4f5f6; color: #35373b; }
    .profile-tab:focus-visible { outline: 3px solid rgba(0,78,238,.22); outline-offset: 1px; }
    .profile-tab-icon { position: relative; width: 19px; height: 19px; flex: 0 0 auto; color: currentColor; }
    .profile-tab-icon.dashboard::before, .profile-tab-icon.dashboard::after { content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 50%; }
    .profile-tab-icon.dashboard::before { left: 1px; top: 1px; }
    .profile-tab-icon.dashboard::after { right: 1px; bottom: 1px; }
    .profile-tab-icon.signals { background: linear-gradient(currentColor,currentColor) 1px 8px/3px 8px no-repeat, linear-gradient(currentColor,currentColor) 6px 3px/3px 13px no-repeat, linear-gradient(currentColor,currentColor) 11px 6px/3px 10px no-repeat, linear-gradient(currentColor,currentColor) 16px 1px/3px 15px no-repeat; }
    .profile-tab-icon.signals::after { content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px; border-radius: 2px; background: currentColor; opacity: .35; }
    .profile-tab-icon.goals { border: 2px solid currentColor; border-radius: 50%; }
    .profile-tab-icon.goals::before { content: ""; position: absolute; inset: 4px; border: 2px solid currentColor; border-radius: 50%; }
    .profile-tab-icon.goals::after { content: ""; position: absolute; left: 7px; top: 7px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
    .profile-tab-icon.reports { width: 16px; height: 19px; border: 2px solid currentColor; border-radius: 3px; background: linear-gradient(currentColor,currentColor) 3px 7px/7px 2px no-repeat, linear-gradient(currentColor,currentColor) 3px 11px/7px 2px no-repeat; }
    .profile-tab-icon.reports::after { content: ""; position: absolute; right: -2px; top: -2px; width: 5px; height: 5px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; background: inherit; }
    .profile-tab-icon.notes { width: 19px; height: 16px; margin-bottom: 3px; border: 2px solid currentColor; border-radius: 5px; background: linear-gradient(currentColor,currentColor) 4px 4px/8px 2px no-repeat, linear-gradient(currentColor,currentColor) 4px 8px/6px 2px no-repeat; }
    .profile-tab-icon.notes::after { content: ""; position: absolute; left: 3px; bottom: -5px; width: 6px; height: 6px; border-left: 2px solid currentColor; transform: skewY(-38deg); }
    .profile-tab-icon.details { border: 2px solid currentColor; border-radius: 50%; }
    .profile-tab-icon.details::before { content: ""; position: absolute; left: 5px; top: 3px; width: 5px; height: 5px; border: 2px solid currentColor; border-radius: 50%; }
    .profile-tab-icon.details::after { content: ""; position: absolute; left: 3px; bottom: 2px; width: 9px; height: 5px; border: 2px solid currentColor; border-bottom: 0; border-radius: 8px 8px 0 0; }

    .dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; align-items: stretch; gap: 18px; }
    .dashboard-card-contents, .planning-contents { display: contents; }
    .chart-card, .overview-card { border-radius: 38px; background: var(--card); }
    /* The chart spans the two right-rail rows. Overview takes the upper row and
       Dev takes the lower row, keeping both controls beside the visualisation. */
    .chart-card { position: relative; grid-column: 1 / 3; grid-row: 1 / span 2; min-width: 0; min-height: clamp(820px, 60vw, 920px); overflow: visible; background: transparent; transition: height .35s ease; }
    .chart-viewport { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: white; }
    .chart-frame { opacity: 1; transition: opacity .2s ease; will-change: opacity; }
    .chart-viewport.is-faded .chart-frame { opacity: 0; }
    .chart-card.is-resizing .chart-viewport { pointer-events: none; }
    .chart-frame { display: block; width: 100%; height: 100%; border: 0; background: white; }
    /* rare-chart.js mounts into #stage (class="chart-frame" gets it the sizing/
       fade rules above). Override chart.css's own standalone-page defaults so
       the chart fills this card instead of centering at its own max-width. */
    #chart-card #stage {
      width: 100%; height: 100%; padding: 0; align-items: center; overflow: hidden;
      font-family: "DM Sans", Arial, Helvetica, sans-serif;
    }
    #chart-card #stage svg { width: 100%; height: 100%; max-width: none; }
    .overview-card { grid-column: 3; grid-row: 1; min-height: 0; }
    .dashboard-card:nth-child(1) { grid-column: 1; grid-row: 3; }   /* Strengths */
    .dashboard-card:nth-child(2) { grid-column: 2; grid-row: 3; }   /* Priorities */
    .dashboard-card:nth-child(3) { grid-column: 3; grid-row: 2; }   /* Dev */
    .dashboard-card:nth-child(4) { grid-column: 3; grid-row: 3; }   /* Accuracy Checker */
    .dashboard-card:nth-child(5) { grid-column: 1; grid-row: 4; }   /* Explore */
    .goal-card { grid-column: 2 / 4; grid-row: 4; }
    .notes-card { grid-column: 1 / -1; grid-row: 5; }
    /* Alone in its row the card is as wide as the page, so height is matched to
       that width rather than to a fraction of it - the ring is square and any
       shortfall is dead space to its left and right. 56px covers the page's 40px
       gutter plus a scrollbar. */
    .dashboard-grid.chart-expanded .chart-card { grid-column: 1 / -1; grid-row: 1; min-height: 0; height: min(1600px, calc(100vw - 288px)); }
    .dashboard-grid.chart-expanded .overview-card { grid-column: 1; grid-row: 2; min-height: 0; }
    .dashboard-grid.chart-expanded .dashboard-card:nth-child(1) { grid-column: 2; grid-row: 2; }
    .dashboard-grid.chart-expanded .dashboard-card:nth-child(2) { grid-column: 3; grid-row: 2; }
    .dashboard-grid.chart-expanded .dashboard-card:nth-child(3) { grid-column: 1; grid-row: 3; }
    .dashboard-grid.chart-expanded .dashboard-card:nth-child(4) { grid-column: 2; grid-row: 3; }
    .dashboard-grid.chart-expanded .dashboard-card:nth-child(5) { grid-column: 3; grid-row: 3; }
    .dashboard-grid.chart-expanded .goal-card { grid-column: 1 / -1; grid-row: 4; }
    .dashboard-grid.chart-expanded .notes-card { grid-column: 1 / -1; grid-row: 5; }

    .card-cutout, .goal-action-dock { position: absolute; top: 0; right: 0; z-index: 8; isolation: isolate; height: 60px; padding: 0 0 10px 10px; border-bottom-left-radius: 30px; background: var(--canvas); }
    .card-cutout { display: grid; place-items: start end; width: 60px; }
    .card-cutout.chart-control-dock { display: flex; align-items: flex-start; gap: 10px; width: 120px; }
    .card-cutout::before, .card-cutout::after, .goal-action-dock::before, .goal-action-dock::after { content: ""; position: absolute; z-index: -1; width: 30px; height: 30px; pointer-events: none; background: radial-gradient(circle at 0 100%, transparent 29px, var(--canvas) 30px); }
    .card-cutout::before, .goal-action-dock::before { left: -30px; top: 0; }
    .card-cutout::after, .goal-action-dock::after { right: 0; bottom: -30px; }
    .cutout-button { position: relative; z-index: 2; display: grid; place-items: center; flex: 0 0 50px; width: 50px; height: 50px; padding: 0; border: 0; border-radius: 50%; background: var(--navy); color: white; cursor: pointer; box-shadow: none; transition: transform .18s ease, background .18s ease; }
    .cutout-button:hover { background: #0d267d; transform: translateY(-1px); }
    .cutout-button:focus-visible { outline: 3px solid rgba(7,149,178,.34); outline-offset: 3px; }
    .cutout-button svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
    .round-action svg { width: 32px; height: 32px; stroke-width: 1.7; }
    .replay-glyph { transform-origin: 50% 50%; }
    .cutout-button.is-replaying .replay-glyph { animation: replay-turn .55s cubic-bezier(.22,.75,.32,1); }
    @keyframes replay-turn { to { transform: rotate(360deg); } }
    .collapse-glyph { display: none; }
    .chart-expanded .expand-glyph { display: none; }
    .chart-expanded .collapse-glyph { display: block; }

    .chart-view-switch { position: absolute; z-index: 6; left: 26px; bottom: 24px; display: inline-flex; align-items: center; gap: 7px; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 0 0 1px rgba(15,23,32,.07), 0 2px 8px rgba(15,23,32,.09); }
    .chart-mini-toggle { position: relative; display: inline-flex; align-items: center; justify-content: flex-end; width: 112px; height: 34px; padding: 0 11px 0 36px; border: 0; border-radius: 999px; background: var(--navy); color: #fff; font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: padding .18s ease, background .18s ease; }
    #chart-connection-toggle { width: 126px; }
    .chart-mini-toggle .mini-knob { position: absolute; left: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.12); transition: left .18s ease; }
    .chart-mini-toggle[aria-checked="true"] { justify-content: flex-start; padding: 0 36px 0 11px; background: #0d267d; }
    .chart-mini-toggle[aria-checked="true"] .mini-knob { left: calc(100% - 30px); }
    .chart-mini-toggle:hover { background: #0d267d; }
    .chart-mini-toggle:focus-visible { outline: 3px solid rgba(7,149,178,.34); outline-offset: 2px; }
    .chart-card.is-resizing .chart-view-switch { opacity: 0; pointer-events: none; }
    .chart-view-switch { transition: opacity .2s ease; }

    .overview-card { display: flex; flex-direction: column; padding: 21px 16px 18px; }
    .card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
    h1 { margin: 0; font-size: 27px; font-weight: 400; letter-spacing: -.045em; }
    .updated { margin: 5px 0 0; color: var(--muted); font-size: 13px; }
    .period-select { min-height: 40px; max-width: 194px; padding: 8px 33px 8px 12px; border: 1px solid #dfe1e3; border-radius: 12px; outline: none; background: #fafafa; color: #47474b; font-size: 13px; font-weight: 700; }
    .period-select:focus { border-color: var(--high); box-shadow: 0 0 0 3px #d9f0f4; }

    .section + .section { border-top: 1px solid #eceeef; }
    .profile-summary { padding-bottom: 0; }
    .recent { padding-top: 17px; }
    .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
    h2 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
    .section-note { color: var(--muted); font-size: 13px; white-space: nowrap; }
    .info { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 4px; border: 1px solid #babdc0; border-radius: 50%; color: #7a7d80; font-size: 13px; cursor: help; }

    .coverage-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin: 3px 0 13px; }
    .coverage-primary { display: flex; align-items: baseline; gap: 7px; }
    .coverage-percent { color: var(--ink); font-size: 38px; font-weight: 700; line-height: 1; letter-spacing: -.045em; }
    .coverage-label { color: var(--ink); font-size: 16px; font-weight: 700; }
    .coverage-detail { padding-bottom: 3px; color: var(--muted); font-size: 13px; white-space: nowrap; }
    .coverage-bar { display: flex; height: 12px; overflow: hidden; border-radius: 99px; background: var(--track); }
    .coverage-fill { display: flex; gap: 2px; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left center; transition: transform .95s cubic-bezier(.22,.75,.3,1); }
    .coverage-fill.is-in { transform: scaleX(1); }

    @keyframes chip-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
    .chip-enter { animation: chip-in .42s cubic-bezier(.22,.75,.3,1) both; animation-delay: var(--enter-delay, 0ms); }
    @media (prefers-reduced-motion: reduce) {
      .chip-enter { animation: none; }
      .coverage-fill { transition: none; transform: scaleX(1); }
    }
    .coverage-segment { min-width: 3px; height: 100%; }
    .coverage-segment.high { background: var(--high); }
    .coverage-segment.moderate { background: var(--moderate); }
    .coverage-segment.low { background: var(--low); }
    .coverage-segment.measured { opacity: 1; }
    .coverage-segment.predicted { opacity: .4; }
    .coverage-segment.unavailable { background: var(--na); }
    .coverage-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 11px; }
    .coverage-source { min-width: 0; padding: 9px 10px; border-radius: 13px; background: #f7f7f7; }
    .coverage-source[data-source] { cursor: pointer; transition: background .18s ease, box-shadow .18s ease; }
    .coverage-source[data-source]:hover,
    .coverage-source[data-source]:focus-visible { background: #eef0f1; box-shadow: inset 0 0 0 1px rgba(15,23,32,.12); outline: none; }
    .coverage-source[data-source].is-locked { background: #e9edf3; box-shadow: inset 0 0 0 1.5px var(--navy); }
    .source-title { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; color: var(--ink); font-size: 13px; font-weight: 700; }
    .source-total { color: var(--muted); font-weight: 400; }
    .source-bands { display: flex; align-items: center; gap: 10px; margin-top: 7px; color: var(--muted); font-size: 13px; white-space: nowrap; }
    .source-band { display: inline-flex; align-items: center; gap: 4px; }
    .source-band strong { color: #4b4d50; font-weight: 500; }
    .band-change { color: var(--change-colour); font-weight: 700; }
    .predicted-source .band-change { opacity: .55; }
    .source-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; }
    .source-dot.high { background: var(--high); }
    .source-dot.moderate { background: var(--moderate); }
    .source-dot.low { background: var(--low); }
    .predicted-source .source-dot { opacity: .4; }
    .unavailable-summary { grid-column: 1 / -1; display: flex; align-items: center; gap: 7px; padding: 1px 2px 0; color: var(--muted); font-size: 13px; }
    .unavailable-summary .source-dot { background: var(--na); }
    .summary-divider { height: 1px; margin: 17px 0 15px; background: #eceeef; }
        .comparable { padding: 5px 9px; border-radius: 99px; background: #f0f1f2; color: #5d5f62; font-size: 13px; font-weight: 700; white-space: nowrap; }
    .movement-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
    .movement-stat { min-width: 0; padding: 9px 8px; border: 1px solid #e8e9ea; border-radius: 13px; background: #fafafa; }
    .movement-top { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
    .movement-icon { width: 16px; height: 16px; flex: 0 0 auto; fill: currentColor; }
    .movement-stat.increased .movement-top { color: var(--up); }
    .movement-stat.decreased .movement-top { color: var(--down); }
    .movement-stat.unchanged .movement-top { color: #7a7d80; }
    .movement-count { font-size: 18px; font-weight: 700; line-height: 1; }
    .movement-name { overflow: hidden; color: var(--ink); font-size: 13px; font-weight: 700; text-overflow: ellipsis; }
    .movement-average { display: block; margin: 5px 0 0 20px; color: var(--muted); font-size: 13px; white-space: nowrap; }
    .crossings { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 10px 11px; border-radius: 11px; background: #f3f4f5; color: #57585b; font-size: 13px; line-height: 1.4; }
    .crossing-icon { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 auto; border-radius: 50%; background: white; color: var(--navy); font-weight: 700; }
    .crossings strong { color: var(--ink); }
    .report-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 11px; border-radius: 13px; background: #f3f4f5; }
    .report-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: white; color: var(--navy); }
    .report-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .report-copy { min-width: 0; }
    .report-copy strong { display: block; color: var(--ink); font-size: 13px; }
    .report-copy span { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }
    .report-download { min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--navy); color: white; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; }
    .report-download:hover { background: #0d267d; }
    .report-download:focus-visible { outline: 3px solid rgba(7,149,178,.28); outline-offset: 2px; }

    .signal-list { display: grid; gap: 6px; }
    .signal-chip { display: grid; grid-template-columns: auto minmax(125px, 1fr) 116px; align-items: center; height: 50px; overflow: hidden; padding-right: 16px; border-radius: 25px; background: #f0f1f2; }
    .signal-chip[data-sid] { position: relative; cursor: pointer; outline: 0 solid transparent; transition: background .16s ease, box-shadow .2s ease; }
    .signal-chip[data-sid]:hover, .signal-chip[data-sid].is-linked-hover { background: #f7f8f8; box-shadow: 0 0 10px color-mix(in srgb, var(--band) 28%, transparent), 0 0 19px color-mix(in srgb, var(--band) 15%, transparent); }
    .signal-chip[data-sid].is-linked-pinned { background: #fff; box-shadow: 0 0 11px color-mix(in srgb, var(--band) 58%, transparent), 0 0 25px color-mix(in srgb, var(--band) 28%, transparent), inset 0 0 14px color-mix(in srgb, var(--band) 9%, transparent); }
    .signal-chip[data-sid]:focus-visible { box-shadow: 0 0 0 3px rgba(7,149,178,.34); }
    .score-pill { display: inline-flex; align-items: center; align-self: stretch; gap: 10px; padding: 0 16px; border-radius: 25px; background: var(--band); color: white; white-space: nowrap; }
    .score-value { display: inline-flex; align-items: baseline; }
    .score-number { font-size: 20px; font-weight: 700; line-height: 1; }
    .score-percent { font-size: 13px; font-weight: 700; line-height: 1; }
    .delta { display: inline-flex; align-items: center; gap: 1px; font-size: 13px; font-weight: 400; line-height: 1; }
    .delta-arrow { width: 15px; height: 15px; flex: 0 0 auto; fill: currentColor; }
    .delta-value, .delta-percent { font-size: 13px; font-weight: 400; }
    .signal-copy { min-width: 0; padding: 4px 10px 4px 12px; }
    .signal-name { display: block; overflow: hidden; color: #282828; font-size: 18px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
    .signal-chip[hidden] { display: none; }

    /* ---------- Dev card ----------
       Same dark shell as Notes so it reads as tooling rather than content. */
    .dev-card { display: flex; flex-direction: column; gap: 12px; padding: 26px 28px 24px; border-radius: 32px; background: var(--navy); color: #fff; }
    .dev-card h2 { margin: 0; color: #fff; font-size: 26px; font-weight: 400; letter-spacing: -.02em; }
    .dev-card .dev-subtitle { margin: -6px 0 2px; color: rgba(255,255,255,.7); font-size: 14px; }
    .dev-steps { display: flex; flex-direction: column; gap: 8px; }
    .dev-button { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 11px; width: 100%; padding: 12px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: 15px; font-weight: 600; text-align: left; cursor: pointer; transition: background .16s ease, border-color .16s ease, transform .16s ease; }
    .dev-button:hover:not(:disabled) { border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.13); }
    .dev-button:active:not(:disabled) { transform: translateY(1px); }
    .dev-button:disabled { cursor: default; opacity: .55; }
    .dev-button .dev-index { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.16); font-size: 13px; font-weight: 700; }
    .dev-button.is-done .dev-index { background: var(--high); }
    .dev-button.is-next { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.16); }
    .dev-button.is-applying { border-color: rgba(255,255,255,.62); background: rgba(255,255,255,.18); }
    .dev-button.is-applying .dev-index { border: 2px solid rgba(255,255,255,.34); border-top-color: #fff; background: transparent; color: transparent; animation: dev-spin .7s linear infinite; }
    .dev-button .dev-when { color: rgba(255,255,255,.55); font-size: 12px; font-weight: 500; }
    .dev-button.is-applying .dev-when { color: rgba(255,255,255,.86); }
    @keyframes dev-spin { to { transform: rotate(360deg); } }
    .dev-note { margin: 0; color: rgba(255,255,255,.5); font-size: 12.5px; line-height: 1.45; }
    .dev-predictions-mode { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .dev-predictions-label { font-size: 12px; color: rgba(255,255,255,.55); }
    /* on the dev card's own navy background, so these don't reuse the
       growth/clinical or session/review colour pairs used elsewhere */
    /* "Real predictions" is longer than the other toggles' labels, so this
       pair gets its own width instead of the shared .mode-toggle 140px */
    .mode-toggle.sample, .mode-toggle.real-predictions { width: auto; min-width: 168px; }
    .mode-toggle.sample { justify-content: flex-end; padding: 0 18px 0 50px; background: rgba(255,255,255,.16); }
    .mode-toggle.real-predictions { justify-content: flex-start; padding: 0 50px 0 17px; background: var(--high); }
    .mode-toggle.real-predictions .knob { left: calc(100% - 43px); }
    .dev-predictions-warning { margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(223,65,36,.18); color: #ffb4a3; font-size: 12.5px; line-height: 1.4; }
    .dev-footer { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
    .dev-reset { padding: 9px 15px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: transparent; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
    .dev-reset:hover { background: rgba(255,255,255,.12); }
    .dev-replay { padding: 9px 15px; border: 0; border-radius: 999px; background: #fff; color: var(--navy); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
    .dev-replay:disabled { opacity: .4; cursor: default; }
    .dev-button:focus-visible, .dev-reset:focus-visible, .dev-replay:focus-visible { outline: 3px solid rgba(255,255,255,.48); outline-offset: 2px; }
    .card-empty { padding: 14px 2px; color: var(--muted); font-size: 14px; }
    .signal-meta { display: block; overflow: hidden; margin-top: 1px; color: #717171; font-size: 13px; font-weight: 400; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
    .spark { justify-self: start; width: 110px; height: 32px; overflow: visible; }
    .spark .trail { fill: none; stroke: var(--band); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    .spark .guide { stroke: #d2d4d6; stroke-width: 1; stroke-dasharray: 2 3; }
    .spark circle { fill: var(--band); }
    .spark.single-point .guide { opacity: .7; }
    .evidence-strip { display: flex; align-items: center; gap: 9px; margin-top: 10px; padding: 10px 11px; border-radius: 11px; background: #f7f7f7; color: #66686b; font-size: 13px; line-height: 1.45; }
    .evidence-strip svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--navy); }
    .evidence-strip strong { color: var(--ink); }

    .dashboard-card { position: relative; min-width: 0; min-height: 305px; padding: 21px 16px 18px; border-radius: 32px; background: white; }
    /* This rule intentionally follows the generic dashboard-card rule. v110
       declared the dark treatment earlier at equal specificity, so the later
       white background won and left white controls on a white card. */
    .dashboard-card.dev-card { min-height: 305px; padding: 26px 28px 24px; background: var(--navy); color: #fff; }
    .dashboard-card.accuracy-card { display: flex; flex-direction: column; min-height: 305px; padding: 24px 26px; background: var(--navy); color: #fff; }
    .accuracy-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .accuracy-card h2 { color: #fff; }
    .accuracy-dev-badge { padding: 5px 8px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; color: rgba(255,255,255,.72); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
    .accuracy-subtitle { margin: 4px 0 16px; color: rgba(255,255,255,.66); font-size: 12.5px; line-height: 1.35; }
    .accuracy-list { display: grid; gap: 10px; margin-top: auto; }
    .accuracy-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 14px; }
    .accuracy-count { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--accuracy-colour); color: #fff; font-size: 27px; font-weight: 700; font-variant-numeric: tabular-nums; }
    .accuracy-copy { min-width: 0; }
    .accuracy-name { display: block; color: #fff; font-size: 17px; font-weight: 700; line-height: 1.08; }
    .accuracy-threshold, .accuracy-detail { display: block; margin-top: 2px; color: rgba(255,255,255,.76); font-size: 12px; line-height: 1.15; }
    .accuracy-detail { margin-top: 1px; color: rgba(255,255,255,.64); }
    .dashboard-card.explore-card { background: #dedede; }
    .dashboard-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 39px; margin-bottom: 7px; padding-right: 56px; }
    .dashboard-card h2 { margin: 0; font-size: 26px; font-weight: 400; letter-spacing: -.04em; }
    .card-subtitle { margin: 0 0 14px; color: #505054; font-size: 13px; line-height: 1.35; }
    .round-action { font-size: 22px; line-height: 1; }
    .card-signal-list { display: grid; gap: 7px; }
    .card-signal-list .signal-chip { grid-template-columns: auto minmax(118px, 1fr) 92px; padding-right: 13px; }
    .card-signal-list .spark { width: 84px; }
    .signal-chip.predicted-score .score-pill { background: var(--band); color: #ffffff; }
    .signal-chip.explore-chip { grid-template-columns: auto minmax(110px, 1fr) auto; padding-right: 7px; }
    .assess-button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 15px; border: 0; border-radius: 999px; background: var(--navy); color: white; font-size: 13px; font-weight: 700; white-space: nowrap; }
    .assess-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
    .see-more { display: inline-flex; align-items: center; gap: 5px; margin-top: 11px; color: #39393d; font-size: 13px; text-decoration: none; }

    .goal-card, .notes-card { position: relative; min-width: 0; min-height: 385px; padding: 22px 20px 20px; border-radius: 32px; background: white; }
    .goal-card-header, .notes-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 48px; padding-right: 56px; }
    .goal-card-header { padding-right: 210px; }
    .goal-card h2, .notes-card h2 { margin: 0; font-size: 27px; font-weight: 400; letter-spacing: -.04em; }
    .goal-action-dock { display: flex; align-items: flex-start; gap: 10px; width: 200px; }
    .add-goal-button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 17px; border: 0; border-radius: 25px; background: var(--navy); color: white; font-size: 15px; font-weight: 700; white-space: nowrap; }
    /* Chrome floors sub-pixel border widths to 1px, so this ring is drawn with
       an inset shadow instead - that renders the full 1.7px and matches the
       stroke-width of the round-action button beside it. */
    .add-goal-button span { display: grid; place-items: center; width: 24px; height: 24px; border: 0; box-shadow: inset 0 0 0 1.7px white; border-radius: 50%; font-size: 21px; font-weight: 400; line-height: 1; }
    .goal-status-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 15px 0 6px; }
    .goal-kicker { color: var(--ink); font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
    .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: #e4f5ef; color: #187651; font-size: 13px; font-weight: 700; }
    .status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1a9b6a; }
    .status-badge.pending { background: #f1f2f3; color: #5b5d60; }
    .status-badge.pending::before { background: #93979b; }
    .goal-heading { margin: 0 0 13px; color: #282828; font-size: 22px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
    .goal-score-chip.signal-chip { grid-template-columns: auto minmax(110px, 1fr) 104px; padding-right: 14px; }
    .goal-score-chip .spark { width: 96px; }
    .goal-progress { margin-top: 15px; }
    .goal-progress-labels { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 13px; }
    .goal-progress-labels strong { color: var(--ink); }
    .goal-progress-track { position: relative; height: 9px; margin-top: 7px; overflow: hidden; border-radius: 99px; background: #e6e8e9; }
    .goal-progress-fill { width: 40%; height: 100%; border-radius: inherit; background: var(--moderate); }
    .goal-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; color: var(--muted); font-size: 13px; }
    .measured-label { display: inline-flex; align-items: center; gap: 5px; color: var(--high); font-weight: 700; }
    .measured-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--high); }
    .measured-label.predicted-label { color: var(--low); }
    /* hollow ring, matching the predicted dots on the chart rail */
    .measured-label.predicted-label::before { background: #ffffff; box-shadow: inset 0 0 0 1.6px var(--low); }
    .pathway-label { margin: 15px 0 7px; color: var(--muted); font-size: 13px; font-weight: 700; }
    .pathway-tags { display: flex; flex-wrap: wrap; gap: 6px; }
    .pathway-tag { padding: 6px 9px; border-radius: 999px; background: #f1f2f3; color: #444448; font-size: 13px; }
    .goal-actions { display: flex; gap: 8px; margin-top: 15px; }
    .secondary-button { min-height: 38px; padding: 0 13px; border: 1px solid #d7d9db; border-radius: 999px; background: white; color: #343438; font-size: 13px; font-weight: 700; }
    .primary-button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--navy); color: white; font-size: 13px; font-weight: 700; }

    .notes-card { background: var(--navy); color: white; }
    .notes-card h2 { color: white; }
    .notes-summary { color: rgba(255,255,255,.7); font-size: 13px; }
    .notes-layout { display: grid; grid-template-columns: minmax(230px, .9fr) minmax(320px, 1.2fr); gap: 16px; margin-top: 16px; }
    .recent-notes { display: grid; gap: 9px; }
    .note-preview { padding: 11px 12px; border-radius: 15px; background: rgba(255,255,255,.09); }
    .note-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .note-date { color: white; font-size: 13px; font-weight: 700; }
    .note-author { color: rgba(255,255,255,.65); font-size: 13px; }
    .note-text { display: -webkit-box; overflow: hidden; margin: 7px 0 0; color: rgba(255,255,255,.86); font-size: 13px; line-height: 1.38; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .note-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
    .note-tag { padding: 4px 7px; border-radius: 999px; background: rgba(255,255,255,.13); color: rgba(255,255,255,.82); font-size: 13px; }
    .note-editor { overflow: hidden; border-radius: 18px; background: white; color: var(--ink); }
    .editor-toolbar { display: flex; align-items: center; gap: 4px; padding: 7px 9px; border-bottom: 1px solid #e4e5e6; }
    .format-button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: #4a4a4e; font-size: 14px; }
    .format-button:hover { background: #f0f1f2; }
    .format-button.bold { font-weight: 700; }
    .format-button.italic { font-style: italic; }
    .editor-title { margin-left: 6px; color: var(--muted); font-size: 13px; font-weight: 700; }
    .note-editor textarea { display: block; width: 100%; min-height: 137px; resize: none; padding: 12px 13px; border: 0; outline: 0; color: var(--ink); background: white; font-family: inherit; font-size: 13px; line-height: 1.45; }
    .editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 8px 9px 9px; border-top: 1px solid #eceeef; }
    .link-select { max-width: 210px; min-height: 34px; padding: 0 28px 0 10px; border: 1px solid #dfe1e3; border-radius: 999px; background: white; color: #55585b; font-size: 13px; }
    .save-note { min-height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: var(--navy); color: white; font-size: 13px; font-weight: 700; }

    @keyframes dashboard-update {
      0% { box-shadow: 0 0 0 0 rgba(7,149,178,0); }
      38% { box-shadow: 0 0 0 4px rgba(7,149,178,.13), 0 14px 34px rgba(7,25,91,.08); }
      100% { box-shadow: 0 0 0 0 rgba(7,149,178,0); }
    }
    @keyframes activity-update {
      0% { transform: translateY(5px); opacity: .35; }
      100% { transform: none; opacity: 1; }
    }
    .dashboard-card.is-updating, .overview-card.is-updating { animation: dashboard-update .85s ease-out both; }
    .report-row.is-updating, .evidence-strip.is-updating { animation: activity-update .45s cubic-bezier(.22,.75,.3,1) both; }

    @media (max-width: 1260px) and (min-width: 861px) {
      .card-header { align-items: stretch; flex-direction: column; gap: 11px; }
      .period-select { width: 100%; max-width: none; }
      .signal-chip { grid-template-columns: auto minmax(112px, 1fr) 104px; padding-right: 14px; }
      .spark { width: 98px; }
    }
    /* Two-column tier. Three across stops working before the viewport is narrow
       enough to justify a single column, so the ring takes the full width and
       the bento re-forms beneath it on a 2-wide grid:

         row 1   chart                    (2 wide)
         row 2   overview | dev
         row 3   strengths | priorities
         row 4   accuracy  | explore
         row 5   goals                     (2 wide)
         row 6   notes                     (2 wide)

       Every card is placed explicitly rather than left to auto-flow. The
       nth-child rules that build the desktop bento outrank a bare
       .dashboard-card, so a loose reset would lose to them and leave cards
       asking for a third column the template never declared - which is what
       produced the implicit columns and the squeezed chart. Each rule also
       names its .chart-expanded twin, since that selector carries more weight
       than the plain one and would otherwise win. */
    @media (max-width: 1260px) and (min-width: 861px) {
      .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      /* Full-width here too, so height tracks the page width rather than 62vw of
         it, which was pinching the ring into a letterbox. */
      .dashboard-grid .chart-card, .dashboard-grid.chart-expanded .chart-card {
        grid-column: 1 / -1; grid-row: 1; min-height: 0; height: min(1100px, calc(100vw - 288px));
      }
      .dashboard-grid .overview-card, .dashboard-grid.chart-expanded .overview-card {
        grid-column: 1; grid-row: 2; min-height: 0;
      }
      .dashboard-grid .dashboard-card:nth-child(1), .dashboard-grid.chart-expanded .dashboard-card:nth-child(1) { grid-column: 1; grid-row: 3; }
      .dashboard-grid .dashboard-card:nth-child(2), .dashboard-grid.chart-expanded .dashboard-card:nth-child(2) { grid-column: 2; grid-row: 3; }
      .dashboard-grid .dashboard-card:nth-child(3), .dashboard-grid.chart-expanded .dashboard-card:nth-child(3) { grid-column: 2; grid-row: 2; }
      .dashboard-grid .dashboard-card:nth-child(4), .dashboard-grid.chart-expanded .dashboard-card:nth-child(4) { grid-column: 1; grid-row: 4; }
      .dashboard-grid .dashboard-card:nth-child(5), .dashboard-grid.chart-expanded .dashboard-card:nth-child(5) { grid-column: 2; grid-row: 4; }
      .dashboard-grid .goal-card, .dashboard-grid.chart-expanded .goal-card { grid-column: 1 / -1; grid-row: 5; }
      .dashboard-grid .notes-card, .dashboard-grid.chart-expanded .notes-card { grid-column: 1 / -1; grid-row: 6; }
    }
    @media (max-width: 940px) {
      .site-topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
      .brand-home { width: auto; padding: 0 18px; }
      .site-shell { display: block; min-height: 0; }
      .site-sidebar { position: static; display: block; width: 100%; height: auto; padding: 8px 14px; overflow-x: auto; border-right: 0; border-bottom: 1px solid #e3e5e8; }
      .nav-section-label, .sidebar-spacer, .sidebar-caption { display: none; }
      .sidebar-nav { flex-direction: row; width: max-content; }
      .global-nav-link { min-height: 42px; padding: 0 13px; }
      .sidebar-footer { display: inline-block; padding: 0; border: 0; }
      .dashboard-grid.chart-expanded .chart-card { height: min(1260px, calc(100vw - 56px)); }
      .dashboard-grid .chart-card, .dashboard-grid.chart-expanded .chart-card { height: min(1100px, calc(100vw - 56px)); }
    }
    /* Single column. Same reset for the same reason. */
    @media (max-width: 860px) {
      .page { width: min(880px, calc(100% - 28px)); }
      .dashboard-grid { grid-template-columns: minmax(0, 1fr); }
      .dashboard-grid .chart-card, .dashboard-grid .overview-card,
      .dashboard-grid .dashboard-card:nth-child(1), .dashboard-grid .dashboard-card:nth-child(2),
      .dashboard-grid .dashboard-card:nth-child(3), .dashboard-grid .dashboard-card:nth-child(4), .dashboard-grid .dashboard-card:nth-child(5),
      .dashboard-grid .goal-card, .dashboard-grid .notes-card,
      .dashboard-grid.chart-expanded .chart-card, .dashboard-grid.chart-expanded .overview-card,
      .dashboard-grid.chart-expanded .dashboard-card:nth-child(1), .dashboard-grid.chart-expanded .dashboard-card:nth-child(2),
      .dashboard-grid.chart-expanded .dashboard-card:nth-child(3), .dashboard-grid.chart-expanded .dashboard-card:nth-child(4), .dashboard-grid.chart-expanded .dashboard-card:nth-child(5),
      .dashboard-grid.chart-expanded .goal-card,
      .dashboard-grid.chart-expanded .notes-card { grid-column: auto; grid-row: auto; }
      /* the base clamp and the expanded floor both outsize the viewport down
         here, so they have to be cleared or they win over these heights */
      .chart-card { min-height: 0; height: min(96vw, 860px); }
      .dashboard-grid.chart-expanded .chart-card { min-height: 0; height: min(126vw, 1080px); }
      .overview-card { min-height: 0; }
    }
    @media (max-width: 580px) {
      .site-topbar { min-height: 64px; }
      .brand-home { height: 64px; padding: 0 12px; border-right: 0; }
      .brand-home img { width: 150px; }
      .workspace-switcher { margin-left: 0; padding: 7px 8px; }
      .workspace-copy, .workspace-chevron, .credit-pill { display: none; }
      .topbar-actions { padding-right: 10px; }
      .site-sidebar { padding: 7px 9px; }
      .global-nav-link { gap: 8px; min-height: 40px; padding: 0 10px; font-size: 12px; }
      .nav-lock { display: none; }
      .page { width: calc(100% - 18px); padding-top: 10px; }
      .profile-bar { align-items: flex-start; flex-direction: column; }
      .profile-actions { align-items: stretch; width: 100%; }
      .assess-primary { width: 100%; }
      .profile-state { display: flex; width: 100%; }
      .mode-toggle { flex: 1 1 0; max-width: 170px; }
      #session-toggle { max-width: 190px; }
      .chart-card, .overview-card { border-radius: 27px; }
      .chart-card { min-height: 0; height: calc(100vw - 18px); max-height: 560px; }
      .dashboard-grid.chart-expanded .chart-card { min-height: 0; height: 128vw; max-height: 720px; }
      .chart-view-switch { left: 14px; bottom: 14px; }
      .chart-mini-toggle { width: 98px; height: 31px; padding-left: 32px; font-size: 11px; }
      #chart-connection-toggle { width: 112px; }
      .chart-mini-toggle .mini-knob { width: 23px; height: 23px; }
      .chart-mini-toggle[aria-checked="true"] { padding-right: 32px; }
      .chart-mini-toggle[aria-checked="true"] .mini-knob { left: calc(100% - 27px); }
      .overview-card { padding: 22px 18px; }
      .card-header { align-items: stretch; flex-direction: column; gap: 10px; }
      .period-select { max-width: none; width: 100%; }
      .coverage-legend { grid-template-columns: 1fr; gap: 6px; }
      .report-row { grid-template-columns: auto minmax(0, 1fr); }
      .report-download { grid-column: 1 / -1; width: 100%; }
      .movement-summary { grid-template-columns: 1fr; }
      .movement-stat { display: flex; align-items: center; justify-content: space-between; }
      .movement-average { margin: 0; }
      .signal-chip { grid-template-columns: auto minmax(96px, 1fr) 70px; padding-right: 10px; }
      .spark { width: 66px; }
      .notes-layout { grid-template-columns: 1fr; }
      .editor-footer { align-items: stretch; flex-direction: column; }
      .link-select, .save-note { width: 100%; max-width: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .chart-card, .chart-frame { transition: none; }
      .cutout-button.is-replaying .replay-glyph { animation: none; }
      .dev-button.is-applying .dev-index { animation: none; }
      .dashboard-card.is-updating, .overview-card.is-updating,
      .report-row.is-updating, .evidence-strip.is-updating { animation: none; }
    }