:root {
      --gold: #BF9855;
      --gold-deep: #8A6D3B;
      --gold-soft: #EAD9B8;
      --spruce: #72806D;
      --spruce-deep: #566153;
      --midnight: #4C5556;
      --taupe: #A59A87;
      --greige: #DBD7C9;
      --eggshell: #F2F0EB;
      --accent: var(--gold);
      --accent-deep: var(--gold-deep);
      --accent-soft: var(--gold-soft);
      --ink: #2E3333;
      --ink-2: #5C6360;
      /* Darkened to #5F655F so it clears WCAG AA (>=4.5:1) on the tinted chip/
         pill/cream surfaces it styles too, not only pure white (#6B716D dropped
         to ~4.1:1 on --bg-2). */
      --ink-3: #5F655F;
      --paper: #FFFFFF;
      --bg: #F3F1EC;
      --bg-2: #ECE8E0;
      --line: #E4DFD5;
      --line-2: #D7D0C2;
      --font-head: 'Outfit', 'Avenir Next', system-ui, sans-serif;
      --font-body: 'Hanken Grotesk', 'Avenir Next', system-ui, sans-serif;
      --font-hand: 'Caveat', cursive;
      --pad: 24px;
      --gap: 20px;
      --radius: 20px;
      --radius-sm: 13px;
      --shadow-sm: 0 1px 2px rgba(56,52,44,.05), 0 2px 6px rgba(56,52,44,.05);
      --shadow: 0 2px 6px rgba(56,52,44,.06), 0 10px 28px rgba(56,52,44,.09);
      --shadow-lg: 0 8px 24px rgba(56,52,44,.12), 0 24px 60px rgba(56,52,44,.16);
    }
    [data-density="compact"] { --pad: 18px; --gap: 14px; --radius: 16px; }
    [data-density="comfy"] { --pad: 30px; --gap: 26px; --radius: 24px; }
    * { box-sizing: border-box; }
    /* Make the [hidden] attribute authoritative. Many components set a display
       (flex/grid) via a class or inline style, which would otherwise win over
       the UA's [hidden]{display:none} and leave hidden=true elements visible —
       e.g. dismissing a banner via element.hidden = true would do nothing. */
    [hidden] { display: none !important; }
    html, body { margin: 0; padding: 0; }
    body {
      min-height: 100vh;
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      letter-spacing: 0;
      overflow-x: hidden;
    }
    h1, h2, h3, h4 {
      font-family: var(--font-head);
      font-weight: 700;
      margin: 0;
      color: var(--ink);
      letter-spacing: -0.01em;
    }
    p { margin: 0; }
    /* Muted helper/caption text. Previously only .topbar .sub was styled, so bare
       class="sub" elsewhere (balance labels, empty-state notes, eyebrows) rendered
       at full ink and body size, competing with primary text. */
    .sub { color: var(--ink-2); font-size: 14px; line-height: 1.45; }
    a { color: var(--accent-deep); font-weight: 700; text-decoration: none; }
    a:hover { text-decoration: underline; }
    button, input, select, textarea { font: inherit; letter-spacing: 0; }
    button { cursor: pointer; border: 0; background: none; }
    /* Suppress the default grey tap-flash on the many custom-styled links/
       buttons/cards; our own :active / :focus-visible states cover feedback. */
    a, button, [role="button"], .card, .nav-item, .mobile-tab { -webkit-tap-highlight-color: transparent; }
    /* Keyboard accessibility: every interactive element (the app uses lots of
       custom-styled buttons/links/cards) gets a clear focus ring. */
    :focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; border-radius: 4px; }
    :focus:not(:focus-visible) { outline: none; }
    ::selection { background: var(--accent-soft); }

    .app {
      display: grid;
      grid-template-columns: 264px 1fr;
      min-height: 100vh;
      max-width: 1480px;
      margin: 0 auto;
    }
    .app.no-rail { grid-template-columns: 1fr; }
    .rail {
      position: sticky;
      top: 0;
      align-self: start;
      height: 100vh;
      padding: 26px 18px;
      display: flex;
      flex-direction: column;
      gap: 6px;
      background: var(--paper);
      border-right: 1px solid var(--line);
      z-index: 30;
      overflow-y: auto; /* an expanded admin group must not push the send CTA off short screens */
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 6px 10px 22px;
      min-width: 0;
    }
    .brand-mark {
      width: 34px;
      height: 34px;
      flex: none;
    }
    .brand-logo { height: 24px; width: auto; flex: none; }
    .brand-logo-lg { height: 30px; }
    .brand-x { color: var(--ink-3); font-size: 23px; font-weight: 300; line-height: 1; margin: 0 1px; flex: none; }
    .brand-name {
      font-family: var(--font-head);
      font-weight: 700;
      font-size: 26px;
      letter-spacing: -0.02em;
      color: var(--ink);
      overflow-wrap: anywhere;
    }
    .brand-name b { color: var(--accent); font-weight: 700; }
    .nav-item {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 11px 14px;
      border-radius: 12px;
      color: var(--ink-2);
      font-weight: 600;
      font-size: 15px;
      text-align: left;
      width: 100%;
      transition: background .15s, color .15s;
    }
    .nav-item svg {
      width: 20px;
      height: 20px;
      flex: none;
      opacity: .85;
    }
    .nav-item:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
    .nav-item.active { background: var(--accent-soft); color: var(--ink); }
    .nav-item.active svg { opacity: 1; }
    .nav-badge {
      margin-left: auto;
      font-size: 11px;
      font-weight: 800;
      background: var(--accent-deep);
      color: #fff;
      border-radius: 999px;
      padding: 1px 8px;
    }
    .nav-section-label {
      margin: 12px 14px 2px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .nav-group { margin-top: 12px; }
    .nav-group-summary { cursor: pointer; list-style: none; }
    .nav-group-summary::-webkit-details-marker { display: none; }
    .nav-group-summary::after {
      content: '';
      margin-left: auto;
      width: 8px;
      height: 8px;
      border-right: 2px solid var(--ink-3);
      border-bottom: 2px solid var(--ink-3);
      transform: rotate(-45deg);
      transition: transform .15s;
    }
    .nav-group[open] > .nav-group-summary::after { transform: rotate(45deg); }
    .nav-group .nav-item:not(.nav-group-summary) { padding-left: 26px; margin-top: 6px; }
    .more-section-label { grid-column: 1 / -1; margin: 8px 2px 0; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
    .you-row { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 4px; }
    .rail-spacer { flex: 1; }
    .rail-cta {
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      padding: 13px;
      border-radius: 14px;
      background: var(--accent-deep);
      color: #fff;
      font-weight: 700;
      font-size: 15px;
      white-space: nowrap;
      box-shadow: 0 6px 16px color-mix(in oklab, var(--accent-deep) 38%, transparent);
      transition: transform .12s, box-shadow .12s, filter .12s;
    }
    .rail-cta:hover {
      transform: translateY(-1px);
      filter: brightness(1.08);
      box-shadow: 0 10px 22px color-mix(in oklab, var(--accent-deep) 44%, transparent);
      text-decoration: none;
    }
    .rail-cta svg { width: 18px; height: 18px; }
    .rail-me {
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 10px;
      margin-top: 12px;
      border-top: 1px solid var(--line);
    }
    .rail-me .who { font-weight: 700; font-size: 14px; line-height: 1.2; white-space: nowrap; }
    .rail-me .role { font-size: 12px; color: var(--ink-3); }

    .main { min-width: 0; }
    .main-inner {
      padding: 34px clamp(22px, 4vw, 56px) 90px;
      max-width: 1080px;
      margin: 0 auto;
    }
    .topbar {
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 26px;
    }
    .topbar h1 { font-size: clamp(26px, 3vw, 34px); line-height: 1.05; }
    .topbar .sub {
      color: var(--ink-2);
      font-size: 15px;
      margin-top: 3px;
      line-height: 1.45;
    }
    .topbar-spacer { flex: 1; }

    .shell {
      width: min(1160px, calc(100% - 40px));
      margin: 0 auto;
      padding: 28px 0 52px;
    }
    .card {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
    }
    .card.pad, .panel { padding: var(--pad); }
    .panel {
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-sm);
    }
    .card-title {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--ink-3);
    }
    .section-head {
      display: flex;
      align-items: baseline;
      gap: 12px;
      margin-bottom: 16px;
    }
    .section-head h2 { font-size: 20px; }
    .section-head a, .link {
      color: var(--accent-deep);
      font-weight: 700;
      font-size: 14px;
    }
    .link:hover { text-decoration: underline; }
    .muted { color: var(--ink-3); }
    .hand {
      font-family: var(--font-hand);
      color: var(--accent-deep);
      font-size: 22px;
      line-height: .9;
      transform: rotate(-3deg);
      display: inline-block;
    }
    .hide-sm {}

    .av {
      border-radius: 50%;
      display: grid;
      place-items: center;
      color: #fff;
      font-family: var(--font-head);
      font-weight: 700;
      flex: none;
      overflow: hidden;
      user-select: none;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
    }
    .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .av.ring { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent-soft); }

    .btn, .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-family: var(--font-body);
      font-weight: 700;
      font-size: 15px;
      border-radius: 12px;
      padding: 11px 18px;
      white-space: nowrap;
      transition: transform .12s, filter .12s, background .15s, box-shadow .12s;
      border: 0;
      min-height: 0;
      line-height: 1.15;
    }
    .btn:active, .button:active { transform: translateY(1px) scale(.99); }
    .btn svg, .button svg { width: 18px; height: 18px; }
    /* Fill with --accent-deep (#8A6D3B), not --accent (#BF9855): white text on the
       lighter gold is only 2.68:1 (fails WCAG AA on every primary CTA); on the deep
       gold it's 4.85:1. --accent stays for non-text accents (borders, dots, fills). */
    .btn-primary, .button.primary {
      background: var(--accent-deep);
      color: #fff;
      box-shadow: 0 4px 14px color-mix(in oklab, var(--accent-deep) 34%, transparent);
    }
    .btn-primary:hover, .button.primary:hover {
      filter: brightness(1.08);
      transform: translateY(-1px);
      text-decoration: none;
    }
    .btn-ghost, .button {
      background: var(--bg-2);
      color: var(--ink);
    }
    .btn-ghost:hover, .button:hover { background: var(--greige); text-decoration: none; }
    .btn-outline {
      background: var(--paper);
      color: var(--ink);
      border: 1px solid var(--line-2);
    }
    .btn-outline:hover { border-color: var(--accent); color: var(--accent-deep); }
    .btn-sm { padding: 8px 13px; font-size: 14px; border-radius: 10px; }
    /* Legible disabled state: halving opacity on the (already low-contrast) gold
       primary made disabled labels ~1:1. Give disabled buttons an explicit muted
       ink-on-paper look instead. */
    .btn[disabled]:not(.btn-primary), .btn[aria-disabled="true"]:not(.btn-primary) { background: var(--bg-2); color: var(--ink-2); box-shadow: none; opacity: 1; pointer-events: none; }
    /* A disabled PRIMARY (e.g. the composer's send button before the story is long
       enough) stays a dimmed gold so it still reads as the key action-in-waiting,
       not a dead gray chip. */
    .btn-primary[disabled], .btn-primary[aria-disabled="true"] { opacity: .55; box-shadow: none; pointer-events: none; }

    .vpill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-weight: 700;
      font-size: 12.5px;
      padding: 5px 11px 5px 8px;
      border-radius: 999px;
      border: 1px solid;
    }
    .vpill .dot { font-size: 13px; line-height: 1; }
    .vpill-milestone {
      color: var(--ink);
      border-color: color-mix(in oklab, var(--accent) 45%, transparent);
      background: color-mix(in oklab, var(--accent-soft) 70%, var(--paper));
    }
    .points-badge {
      display: inline-flex;
      align-items: center;
      font-weight: 800;
      font-size: 13px;
      padding: 4px 10px;
      border-radius: 999px;
      color: var(--ink);
      border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
      background: color-mix(in oklab, var(--accent-soft) 60%, var(--paper));
    }
    /* Points/Rewards surface. The balance grid + reward grid both use
       minmax(min(100%,N),1fr) so their min track collapses to the container on
       narrow phones — one column that fits, instead of a fixed track that
       overflows and gets clipped by body{overflow-x:hidden}. */
    .balance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 18px 34px; }
    .balance-cell { min-width: 0; }
    .balance-num { font-family: var(--font-head); font-weight: 800; font-size: clamp(2rem, 7vw, 2.8rem); line-height: 1; color: var(--ink); }
    .balance-num--sec { font-size: clamp(1.5rem, 5vw, 1.9rem); color: var(--ink-2); }
    .balance-label { font-weight: 700; font-size: 14px; margin-top: 6px; color: var(--ink); }
    .reward-grid { display: grid; gap: 16px; margin-top: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
    .reward-card { padding: 16px; display: flex; flex-direction: column; }
    .reward-img { height: 84px; border-radius: 10px; display: grid; place-items: center; background: var(--bg-2); overflow: hidden; margin-bottom: 10px; }
    .reward-img img { width: 100%; height: 100%; object-fit: cover; }
    .reward-img--fallback { font-family: var(--font-head); font-weight: 800; font-size: 30px; color: var(--accent-deep); background: var(--accent-soft); }
    .reward-eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: 11px; font-weight: 700; color: var(--ink-3); }
    .reward-name { font-weight: 700; margin-top: 2px; }
    .reward-price { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; }
    .reward-dollars { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--ink); }
    .reward-need { cursor: default; }
    .points-how { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
    .points-how li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink); min-width: 0; }
    .points-how li > span { min-width: 0; overflow-wrap: anywhere; }
    .points-how li svg { flex: none; margin-top: 2px; color: var(--accent-deep); }
    .points-cta { margin-top: 16px; }
    /* The give-nudge label is long; without this the button's nowrap min-content
       forces the whole points page wider than a phone viewport (everything then
       clips against body{overflow-x:hidden}). Let it wrap on narrow screens. */
    .points-cta .btn { white-space: normal; text-align: center; }
    /* Composer points chooser — accessible radio chips. */
    .points-chooser { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
    .points-chooser legend { font-weight: 700; font-size: 14px; padding: 0; margin-bottom: 8px; color: var(--ink); }
    .points-choices { display: flex; gap: 8px; flex-wrap: wrap; }
    .points-choice { position: relative; }
    .points-choice input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
    .points-choice span { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--paper); font-weight: 800; color: var(--ink); }
    .points-choice input:checked + span { background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 45%, transparent); box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent) 50%, transparent); }
    /* A glyph (not just color) marks the selected chip — WCAG 1.4.1. */
    .points-choice input:checked + span::before { content: '✓'; margin-right: 5px; font-weight: 900; }
    .points-choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
    /* Informational (non-error) note inside the composer, e.g. a truncated prefill. */
    .composer-notice { background: color-mix(in oklab, var(--accent-soft) 60%, var(--paper)); border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); border-radius: 12px; padding: 10px 14px; font-size: 14px; color: var(--ink); margin-bottom: 12px; }
    .goal-target-edit { width: 92px; }
    .tw-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
    .tw-progress .step-dots { margin-left: 0; }
    .tw-nav { display: flex; gap: 10px; margin-top: 18px; }
    .tw-review { display: grid; gap: 10px; margin: 12px 0 18px; }
    .tw-review > div { display: flex; gap: 12px; align-items: baseline; }
    .tw-review dt { width: 110px; flex: none; font-weight: 800; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
    .tw-review dd { margin: 0; }
    .notification-list { gap: 4px; }
    .notification-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--ink); }
    .notification-row:hover { background: var(--bg-2); text-decoration: none; }
    .notification-row.unread { background: color-mix(in oklab, var(--accent-soft) 40%, var(--paper)); }
    .notification-row.unread::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); flex: none; }
    .notification-text { min-width: 0; flex: 1; font-size: 14px; }
    .notification-row .time { flex: none; font-size: 12px; color: var(--ink-2); }
    .goal-explainer summary { cursor: pointer; list-style: none; }
    .goal-explainer summary::-webkit-details-marker { display: none; }
    .goal-explainer summary::before { content: '▸ '; color: var(--ink-3); }
    .goal-explainer[open] summary::before { content: '▾ '; }
    .goal-steps { margin: 10px 0 4px; padding-left: 22px; display: grid; gap: 7px; }
    .goal-example { margin: 6px 0 0; font-size: 13px; }
    .bchip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-weight: 600;
      font-size: 13px;
      color: var(--ink-2);
    }
    .reacts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .react {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 4px 10px;
      border-radius: 999px;
      background: var(--bg-2);
      font-size: 13px;
      font-weight: 700;
      color: var(--ink-2);
      border: 1px solid transparent;
      transition: transform .12s, background .12s, border-color .12s;
      /* The reactor popover opens on a 450ms long-press; suppress iOS text
         selection / the callout menu so the hold is purely a custom gesture. */
      user-select: none;
      -webkit-user-select: none;
      -webkit-touch-callout: none;
      touch-action: manipulation;
    }
    .react:hover { transform: translateY(-1px) scale(1.04); background: var(--greige); }
    /* Toggled state must not rely on color alone (WCAG 1.4.1): add a heavier ring
       + weight so it reads for low-vision/colorblind users too. Text → --ink for AA. */
    .react.on { background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 40%, transparent); color: var(--ink); font-weight: 800; box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent) 55%, transparent); }
    .react .em { font-size: 14px; }
    /* Touch popover showing who reacted (long-press). Dark tooltip above the pill. */
    .reactor-pop { position: absolute; z-index: 80; transform: translate(-50%, -100%); background: var(--ink); color: var(--paper); font-size: 12.5px; font-weight: 600; line-height: 1.35; padding: 6px 10px; border-radius: 10px; max-width: 240px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .12s; }
    .reactor-pop.show { opacity: 1; }
    /* One-tap co-sign on a feed card, sat to the right of the reactions.
       Outlined gold on white keeps the text at AA contrast (~4.6:1). */
    .kudo-actions { justify-content: space-between; }
    .recognize-too { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--accent-deep); background: var(--paper); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent); }
    .kudo-share { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--accent-deep); background: var(--paper); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 45%, transparent); cursor: pointer; }
    .kudo-share.failed { box-shadow: inset 0 0 0 1px #B0593E; color: #8A3C28; }
    .share-menu { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding: 6px; border-radius: 12px; background: var(--paper); box-shadow: 0 10px 34px rgba(24,33,29,.18); border: 1px solid rgba(24,33,29,.08); width: max-content; max-width: 100%; }
    .share-opt { display: block; text-align: left; padding: 8px 12px; border-radius: 8px; border: none; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; }
    .share-opt:hover { background: var(--accent-soft); }
    .share-opt-quiet { color: var(--ink-3); font-weight: 500; }
    .share-toast { padding: 4px 12px 2px; font-size: 12px; color: var(--ink-3); }
    .recognize-too:hover { text-decoration: none; background: var(--accent-soft); }
    .recognize-too svg { width: 14px; height: 14px; }
    .sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
    }

    .kudo { display: flex; flex-direction: column; gap: 13px; }
    .kudo-head { display: flex; align-items: center; gap: 11px; }
    .kudo-head .names { font-size: 14.5px; line-height: 1.25; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
    .kudo-head .names b { font-weight: 800; }
    .kudo-head .arrow { color: var(--ink-3); }
    .kudo-head .time { margin-left: auto; flex: none; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
    .kudo-story { font-size: 16px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
    /* Anniversaries should feel special — a soft tint + accent edge so they stand
       out from ordinary recognitions in the scroll. */
    .kudo--milestone { background: color-mix(in oklab, var(--accent-soft) 22%, var(--paper)); border-left: 3px solid var(--accent); }
    .comment-empty { color: var(--ink-2); font-size: 13.5px; margin: 2px 0 8px; }
    .kudo-photo { margin: 12px 0 2px; }
    /* contain (not cover) so a portrait phone photo isn't head-cropped — the
       photo is content, and this matches the composer preview (WYSIWYG). */
    .kudo-photo img { display: block; width: 100%; max-height: 460px; object-fit: contain; border-radius: 14px; background: color-mix(in oklab, var(--ink) 6%, var(--paper)); }
    .kudo-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .cov { display: flex; gap: 9px; }
    .cov-item { flex: 1; text-align: center; min-width: 0; }
    .cov-disc {
      width: 100%;
      aspect-ratio: 1;
      max-width: 50px;
      margin: 0 auto 7px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      font-size: 19px;
      border: 2px dashed var(--line-2);
      background: var(--bg);
      filter: grayscale(.55);
      opacity: .85;
      transition: .2s;
    }
    .cov-item.done .cov-disc { border: 2px solid transparent; filter: none; box-shadow: var(--shadow-sm); }
    .cov-lbl { font-size: 10.5px; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; overflow-wrap: anywhere; }
    .cov-item.done .cov-lbl { color: var(--ink-2); }
    .badge {
      display: flex;
      gap: 13px;
      align-items: center;
      padding: 13px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: var(--paper);
      transition: .15s;
    }
    .badge.locked { opacity: .62; background: var(--bg); }
    .badge .bemoji {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      font-size: 22px;
      background: var(--accent-soft);
      flex: none;
    }
    .badge.locked .bemoji { background: var(--bg-2); filter: grayscale(.8); }
    .badge .bname { font-weight: 800; font-size: 14.5px; }
    .badge .bdesc { font-size: 12.5px; color: var(--ink-3); margin-top: 1px; line-height: 1.3; }
    .badge .bprog { font-size: 11px; font-weight: 800; color: var(--accent-deep); margin-top: 3px; }
    .stat {
      padding: var(--pad);
      border-radius: var(--radius);
      background: var(--paper);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-sm);
    }
    .stat .num { font-family: var(--font-head); font-weight: 700; font-size: 32px; line-height: 1; color: var(--ink); }
    .stat .lbl { font-size: 13px; color: var(--ink-2); margin-top: 6px; font-weight: 600; }
    .stat .delta { font-size: 12px; font-weight: 800; margin-top: 8px; display: inline-flex; gap: 4px; align-items: center; }
    .delta.up { color: var(--spruce-deep); }
    .delta.down { color: #B0593E; }
    .bar-track { height: 9px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
    .bar-fill { height: 100%; border-radius: 999px; background: var(--accent); }

    .hero-card {
      cursor: pointer;
      padding: 0;
      overflow: hidden;
      margin-bottom: var(--gap);
      border: 1px solid var(--line);
      display: block;
    }
    .hero-card:hover { text-decoration: none; }
    .hero-postcard {
      display: grid;
      grid-template-columns: 1.3fr 1fr;
      min-height: 190px;
    }
    .hero-copy-card {
      padding: calc(var(--pad) + 6px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 12px;
    }
    .hero-copy-card h2 { font-size: 26px; }
    .hero-copy-card p {
      color: var(--ink-3);
      font-size: 15px;
      max-width: 360px;
      line-height: 1.45;
    }
    .hero-mini-panel {
      background: linear-gradient(150deg, #EAD9B8, #BF9855);
      display: grid;
      place-items: center;
      position: relative;
    }
    .hero-mini-card {
      background: #fff;
      border-radius: 16px;
      padding: 18px;
      width: 74%;
      box-shadow: var(--shadow);
      transform: rotate(-4deg);
    }
    .recent-grid, .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: var(--gap);
    }
    .stats-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
    .dash-grid {
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: var(--gap);
    }
    .two-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--gap);
    }
    .stack { display: grid; gap: var(--gap); align-content: start; }
    .feed-filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--gap); }
    .feed-sort-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
    .feed-range-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
    .feed-list { display: grid; gap: var(--gap); }
    .empty-state {
      border: 1px dashed var(--line-2);
      border-radius: var(--radius-sm);
      padding: 18px;
      color: var(--ink-3);
      font-weight: 700;
      background: color-mix(in oklab, var(--paper) 78%, var(--bg-2));
    }
    .watch-card { background: linear-gradient(180deg, #FFFDF8, #fff); }
    .team-row, .breadth-row, .recognizer-row {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }
    .team-name { width: 110px; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
    .team-people { display: none; }
    .team-count { width: 36px; text-align: right; font-weight: 800; }
    .breadth-row { gap: 10px; font-size: 13.5px; }
    .breadth-team { width: 100px; font-weight: 600; overflow-wrap: anywhere; }
    .breadth-segments { flex: 1; display: flex; gap: 3px; min-width: 60px; }
    .breadth-segment { flex: 1; height: 10px; border-radius: 3px; background: var(--bg-2); }
    .breadth-segment.filled { background: var(--spruce); }

    .nudge {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, #FFFDF8, var(--paper));
      box-shadow: var(--shadow-sm);
      padding: var(--pad);
      position: relative;
      overflow: hidden;
    }
    .nudge-tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11.5px;
      font-weight: 800;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: var(--ink);
      background: var(--gold-soft);
      padding: 4px 10px;
      border-radius: 999px;
    }
    .nudge-draft { font-size: 15.5px; line-height: 1.5; font-style: italic; color: var(--ink); margin: 12px 0; }

    .scrim {
      position: fixed;
      inset: 0;
      /* No backdrop-filter: the composer is a dedicated full page, so the blur
         only ever covered static chrome (and nothing at all once the sheet goes
         full-screen on mobile) while costing a GPU layer that made scrolling
         feel sticky. The translucent fill still provides the dim. */
      background: rgba(46,51,51,.42);
      display: grid;
      place-items: center;
      z-index: 60;
      padding: 24px;
      animation: fade .2s ease;
    }
    .modal {
      width: min(620px, 100%);
      max-height: 92vh;
      overflow: auto;
      background: var(--paper);
      border-radius: 24px;
      box-shadow: var(--shadow-lg);
      animation: pop .26s cubic-bezier(.2,.9,.3,1.2);
    }
    @keyframes fade { from { opacity: 0; } }
    @keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
    .modal-head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 20px 24px;
      border-bottom: 1px solid var(--line);
      position: sticky;
      top: 0;
      background: var(--paper);
      z-index: 2;
      border-radius: 24px 24px 0 0;
    }
    .modal-title { font-family: var(--font-head); font-weight: 700; font-size: 19px; }
    .step-dots { margin-left: auto; display: flex; gap: 7px; align-items: center; }
    .step-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--line-2); transition: .25s; }
    .step-dot.active { width: 22px; background: var(--accent); }
    .step-dot.complete { background: var(--accent); }
    .modal-body { padding: 24px; }
    .modal-foot {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px 24px;
      border-top: 1px solid var(--line);
      position: sticky;
      bottom: 0;
      background: var(--paper);
      border-radius: 0 0 24px 24px;
      flex-wrap: wrap;
    }
    .send-step[hidden] { display: none !important; }
    /* Wizard step motion — applied by setStep() only when motion is allowed, so
       there is nothing to undo for prefers-reduced-motion users. */
    .send-step.slide-fwd { animation: step-fwd .24s ease both; }
    .send-step.slide-back { animation: step-back .24s ease both; }
    @keyframes step-fwd { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
    @keyframes step-back { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: translateX(0); } }
    .search-wrap { position: relative; margin-bottom: 18px; }
    .search-wrap svg { position: absolute; left: 14px; top: 13px; color: var(--ink-3); }
    .search-input, input[type="text"], input[type="email"], input[type="search"], select, textarea {
      width: 100%;
      border: 1px solid var(--line-2);
      border-radius: 13px;
      background: var(--bg);
      color: var(--ink);
      padding: 12px 14px;
      min-height: 48px;
    }
    .search-wrap .search-input { padding-left: 42px; }
    textarea {
      min-height: 120px;
      resize: vertical;
      line-height: 1.5;
      font-size: 15.5px;
    }
    .suggestion-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
    .suggestion-chip {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 14px 8px 8px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--paper);
      font-weight: 700;
      font-size: 14px;
      transition: .15s;
    }
    .suggestion-chip:hover { border-color: var(--accent); }
    .person-list {
      display: grid;
      gap: 7px;
      max-height: 320px;
      overflow: auto;
    }
    .person-card, .person-row-btn {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px;
      border-radius: 13px;
      border: 1px solid var(--line);
      background: var(--paper);
      text-align: left;
      transition: .15s;
      min-width: 0;
    }
    .person-card {
      padding: 6px;
    }
    .person-card .person-row-btn {
      border: 0;
      background: transparent;
      padding: 6px;
    }
    .person-card.selected {
      border-color: var(--accent);
      background: color-mix(in oklab, var(--accent-soft) 22%, var(--paper));
    }
    .favorite-toggle {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      color: var(--accent-deep);
      background: var(--bg-2);
      font-size: 18px;
      flex: none;
    }
    .favorite-toggle:hover,
    .person-card.favorite .favorite-toggle {
      background: var(--accent-soft);
      color: var(--accent-deep);
    }
    .person-row-btn:hover, .person-card:hover { background: var(--bg-2); }
    .person-meta { font-size: 13px; color: var(--ink-3); }
    .value-choice-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
    .value-choice {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 9px 14px;
      border-radius: 999px;
      font-weight: 700;
      font-size: 14px;
      border: 1.5px solid var(--line-2);
      background: var(--paper);
      color: var(--ink-2);
      transition: .15s;
    }
    /* Stronger selected affordance than a thin border: a doubled brand-colored ring
       + bolder text (keeps the white bg so the value-colored label stays legible). */
    .value-choice.active { border-color: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; font-weight: 800; }
    .behavior-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 9px;
    }
    .behavior-option, .behavior-card {
      text-align: left;
      padding: 13px;
      border-radius: 13px;
      border: 1.5px solid var(--line);
      background: var(--paper);
      transition: .15s;
      display: grid;
      gap: 3px;
    }
    .behavior-card[hidden] { display: none !important; }
    .behavior-option:hover, .behavior-card:hover, .behavior-card.selected {
      border-color: var(--accent);
      background: color-mix(in oklab, var(--accent-soft) 20%, var(--paper));
    }
    .behavior-option input { accent-color: var(--accent); }
    .behavior-option strong, .behavior-card strong { font-weight: 800; font-size: 14.5px; }
    .behavior-option em, .behavior-card span { font-size: 12.5px; color: var(--ink-3); line-height: 1.35; font-style: normal; }
    .story-wrap { position: relative; }
    .char-count { position: absolute; right: 12px; bottom: 10px; font-size: 12px; color: var(--ink-3); }
    .starter-row { display: flex; gap: 8px; flex-wrap: wrap; }
    .kudo-photo-edit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
    .kudo-photo-edit label { cursor: pointer; }
    .kudo-photo-edit label.is-busy { opacity: .6; pointer-events: none; }
    .kudo-photo-edit .error { color: #8A3C28; font-weight: 600; }
    .push-card [data-push-status].error { color: #8A3C28; font-weight: 600; }
    .push-help { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: color-mix(in oklab, var(--accent) 8%, var(--paper)); border: 1px solid color-mix(in oklab, var(--accent) 28%, transparent); font-size: 14px; }
    .push-help-title { font-weight: 700; margin: 0 0 6px; }
    .push-help ol { margin: 0; padding-left: 20px; }
    .push-help li { margin: 5px 0; line-height: 1.45; }
    .push-help code { background: color-mix(in oklab, var(--ink) 8%, var(--paper)); padding: 1px 5px; border-radius: 5px; font-size: 12px; }
    .push-help-note { margin: 8px 0 0; color: var(--ink-3); font-size: 13px; }
    /* Collapsed "on" pill (You tab once this device is subscribed). */
    .push-card-summary { display: none; align-items: center; gap: 7px; font-weight: 600; }
    .push-card.collapsed { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
    .push-card.collapsed .push-card-head, .push-card.collapsed .push-card-desc { display: none; }
    .push-card.collapsed .push-card-summary { display: inline-flex; }
    .push-card.collapsed .btn { margin-left: auto; padding: 6px 12px; font-size: 13px; }
    .kudo-photo-preview { position: relative; margin: 0; width: 100%; }
    .kudo-photo-preview img { display: block; width: 100%; max-height: 280px; object-fit: contain; border-radius: 14px; background: color-mix(in oklab, var(--ink) 6%, var(--paper)); }
    .kudo-photo-remove { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; border-radius: 999px; background: color-mix(in oklab, black 55%, transparent); color: white; cursor: pointer; }
    .starter-pill {
      padding: 7px 12px;
      border-radius: 999px;
      border: 1px dashed var(--line-2);
      background: var(--paper);
      color: var(--ink-2);
      font-family: var(--font-hand);
      font-weight: 600;
      font-size: 17px;
    }
    .context-row {
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap;
      margin-bottom: 16px;
    }
    .error-box {
      border: 1px solid #B0593E;
      background: #FCE7DF;
      border-radius: 13px;
      color: #8A3C28;
      padding: 12px 14px;
      font-weight: 700;
      margin-bottom: 14px;
    }
    .notice, .toast {
      border: 1px solid color-mix(in oklab, var(--accent) 45%, transparent);
      background: color-mix(in oklab, var(--accent-soft) 68%, var(--paper));
      border-radius: 14px;
      padding: 12px 14px;
      font-weight: 800;
      margin-bottom: 16px;
    }
    .notice-error {
      border-color: color-mix(in oklab, #c0392b 45%, transparent);
      background: color-mix(in oklab, #c0392b 12%, var(--paper));
    }
    a.notice-link {
      display: flex;
      gap: 9px;
      align-items: center;
      text-decoration: none;
      color: inherit;
    }
    a.notice-link:hover { filter: brightness(.97); }
    .adp-match-row, .adp-worker-row {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
      padding: 11px 0;
      border-top: 1px solid var(--line);
    }
    .adp-match-row:first-of-type, .adp-worker-row:first-of-type { border-top: 0; }
    .adp-person, .adp-worker { display: flex; flex-direction: column; gap: 1px; flex: 1 1 220px; min-width: 0; }
    .adp-person strong, .adp-worker strong { font-weight: 800; font-size: 14.5px; }
    .adp-match-row select { flex: 1 1 260px; max-width: 360px; }
    .adp-inline { display: flex; gap: 8px; align-items: center; flex: 1 1 260px; }
    .adp-inline select { flex: 1 1 auto; min-width: 0; }
    .match-hint {
      font-size: 11.5px;
      font-weight: 800;
      color: var(--accent-deep);
      margin-top: 2px;
    }
    /* Recognition prompts inbox + settings */
    .prompt-list { display: grid; gap: 12px; }
    .prompt-card { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; justify-content: space-between; }
    .prompt-main { flex: 1 1 320px; min-width: 0; }
    .prompt-summary { margin: 4px 0 0; font-size: 14px; }
    .prompt-draft { margin: 8px 0 0; font-style: italic; color: var(--ink-3); font-size: 13.5px; }
    .prompt-actions { display: flex; gap: 8px; align-items: center; }
    .prompt-dismiss { display: inline; }
    .rec-statusbar { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
    .rec-status { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--bg-2); color: var(--ink-3); }
    .rec-status.on { background: color-mix(in oklab, #5d9e6d 16%, var(--paper)); color: #2f6b3d; }
    .rec-form { display: grid; gap: 14px; }
    .rec-detector { display: grid; gap: 10px; }
    .rec-toggle { display: flex; gap: 10px; align-items: center; font-size: 16px; }
    .rec-toggle input { width: 18px; height: 18px; }
    .rec-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
    /* align-content:start — without it a neighbor's tall helper text stretches this
       field's label/input/helper apart to match row height (floating inputs). */
    .rec-field { display: grid; gap: 4px; font-size: 13px; font-weight: 700; align-content: start; }
    /* Inputs AND selects at one height, or mixed rows (select · select · number) sit ragged. */
    .rec-field input, .rec-field select { min-height: 40px; padding: 8px 10px; }
    .rec-field small { font-weight: 500; color: var(--ink-3); font-size: 11.5px; }
    .rec-guardrails { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 0; }
    .rec-guardrails legend { font-size: 12.5px; font-weight: 800; color: var(--ink-3); padding: 0 6px; }
    /* The template wizard reads one decision per line: stack its fields at a
       comfortable measure so long helper text wraps wide, not into skinny towers.
       Guardrail rows stay compact metric·direction·threshold triplets. */
    [data-tw-step] .rec-fields { grid-template-columns: 1fr; max-width: 560px; gap: 16px; }
    [data-tw-step] .rec-guardrails { max-width: 560px; display: grid; gap: 10px; }
    [data-tw-step] .rec-guardrails .rec-fields { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
    [data-tw-step] > .muted { max-width: 560px; }
    .adp-tag {
      align-self: flex-start;
      margin-top: 3px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .02em;
      padding: 2px 8px;
      border-radius: 999px;
      background: var(--bg-2);
      color: var(--ink-3);
    }
    .adp-tag-warn {
      background: color-mix(in oklab, #c0392b 14%, var(--paper));
      color: #9a2f22;
    }
    .toast {
      position: fixed;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 90;
      background: var(--ink);
      color: #fff;
      box-shadow: var(--shadow-lg);
      display: flex;
      align-items: center;
      gap: 10px;
      animation: pop .3s;
    }
    .toast-undo { z-index: 95; }
    .toast-undo .btn { color: #fff; text-decoration: underline; padding: 2px 6px; }
    .confirm-scrim { position: fixed; inset: 0; z-index: 120; background: color-mix(in oklab, var(--ink) 32%, transparent); display: flex; align-items: center; justify-content: center; padding: 24px; }
    .confirm-card { background: var(--paper); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 22px; max-width: 380px; width: 100%; }
    .confirm-card p { margin: 0 0 16px; font-weight: 600; }
    .confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
    .btn-danger { background: var(--danger, #b3261e); color: #fff; border: 1px solid transparent; }
    .btn-danger:hover { filter: brightness(.94); }
    .card-menu-wrap { position: relative; margin-left: auto; display: inline-flex; }
    .card-menu-toggle { border: none; background: none; color: var(--ink-3); cursor: pointer; padding: 4px 8px; border-radius: 8px; display: inline-flex; }
    .card-menu-toggle:hover { background: var(--bg-2); color: var(--ink); }
    .card-menu { position: absolute; right: 0; top: 100%; margin-top: 4px; z-index: 40; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); display: grid; min-width: 140px; padding: 6px; }
    .card-menu-item { border: none; background: none; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; text-decoration: none; }
    .card-menu-item:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
    .card-menu-danger { color: var(--danger, #b3261e); }
    .card-menu-danger:hover { color: var(--danger, #b3261e); }
    .confetti-layer { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
    .confetti { position: absolute; width: 10px; height: 14px; border-radius: 2px; will-change: transform, opacity; }
    .calm * { animation-duration: .001s !important; }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
    }
    .admin-user-layout {
      display: grid;
      gap: 16px;
      align-items: start;
    }
    .admin-add-row {
      min-width: 0;
    }
    .admin-add-row summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      cursor: pointer;
      list-style: none;
    }
    .admin-add-row summary::-webkit-details-marker { display: none; }
    .admin-add-row summary strong { display: block; font-size: 18px; font-family: var(--font-head); }
    .admin-add-row summary small { display: block; margin-top: 3px; color: var(--ink-3); font-weight: 700; }
    .admin-add-row .summary-action {
      padding: 7px 11px;
      border-radius: 999px;
      background: var(--accent-soft);
      color: var(--ink);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: .04em;
    }
    .admin-add-row[open] .summary-action { background: var(--bg-2); }
    .admin-add-row .admin-form { margin-top: 16px; }
    .team-panel, .user-list-panel { min-width: 0; }
    .user-list-full { width: 100%; }
    .admin-form, .team-form, form { display: grid; gap: 14px; }
    label { display: grid; gap: 7px; font-weight: 800; }
    .user-list, .team-list { display: grid; gap: 10px; min-width: 0; }
    .user-toolbar {
      display: grid;
      grid-template-columns: minmax(180px, 1fr) auto auto;
      gap: 10px;
      align-items: center;
      margin: 4px 0 14px;
    }
    .user-toolbar input[type="search"] { min-height: 40px; min-width: 0; }
    .user-toolbar select { min-height: 40px; }
    .user-chips { display: flex; gap: 6px; flex-wrap: wrap; }
    .chip {
      border: 1px solid var(--line);
      background: var(--paper);
      border-radius: 999px;
      padding: 7px 12px;
      font-size: 12.5px;
      font-weight: 800;
      color: var(--ink-3);
      cursor: pointer;
    }
    .chip span { font-weight: 700; opacity: .75; margin-left: 3px; }
    .chip.on {
      background: var(--accent-soft);
      border-color: color-mix(in oklab, var(--accent) 45%, transparent);
      color: var(--ink);
    }
    .user-item {
      border: 1px solid var(--line);
      border-radius: 13px;
      background: var(--paper);
      min-width: 0;
      overflow: hidden;
    }
    .user-item summary {
      display: flex;
      gap: 10px;
      align-items: center;
      padding: 11px 12px;
      cursor: pointer;
      list-style: none;
      min-width: 0;
    }
    .user-item summary::-webkit-details-marker { display: none; }
    .user-item summary::after {
      content: '';
      width: 7px;
      height: 7px;
      border-right: 2px solid var(--ink-3);
      border-bottom: 2px solid var(--ink-3);
      transform: rotate(45deg);
      flex: none;
      margin: -3px 3px 0 2px;
      transition: transform .15s;
    }
    .user-item[open] summary::after { transform: rotate(-135deg); margin-top: 3px; }
    .user-item[open] summary { border-bottom: 1px solid var(--line); }
    .user-item.inactive summary { opacity: .6; }
    .u-dot { width: 9px; height: 9px; border-radius: 50%; background: #5d9e6d; flex: none; }
    .user-item.inactive .u-dot { background: var(--ink-3); opacity: .55; }
    .u-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
    .u-main strong { font-size: 14.5px; min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
    .u-sub { color: var(--ink-3); font-size: 12px; font-weight: 700; min-width: 0; overflow-wrap: anywhere; line-height: 1.2; }
    .u-tags { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; align-items: center; flex: none; max-width: 46%; }
    .u-tag {
      font-size: 10.5px;
      font-weight: 800;
      letter-spacing: .02em;
      padding: 2px 8px;
      border-radius: 999px;
      background: var(--bg-2);
      color: var(--ink-3);
      text-decoration: none;
      white-space: nowrap;
    }
    .u-tag-role { background: var(--accent-soft); color: var(--ink); }
    .u-tag-ok { background: color-mix(in oklab, #5d9e6d 16%, var(--paper)); color: #2f6b3d; }
    .u-tag-warn { background: color-mix(in oklab, #c0392b 12%, var(--paper)); color: #9a2f22; }
    .u-adp-cta { padding: 10px 12px 0; font-size: 12.5px; font-weight: 800; }
    .u-adp-cta a { color: #9a2f22; }
    .user-edit-form { padding: 12px; }
    .points-hint { flex-basis: 100%; order: -1; font-size: 12px; }
    .save-toast {
      position: fixed;
      bottom: 28px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 90;
      margin: 0;
      box-shadow: var(--shadow-lg);
      animation: pop .3s;
    }
    @keyframes row-flash {
      0% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 60%, transparent); }
      100% { box-shadow: 0 0 0 0 transparent; }
    }
    .user-item:target { animation: row-flash 1.8s ease 1; }
    @media (prefers-reduced-motion: reduce) { .user-item:target { animation: none; } }
    .behavior-admin-row {
      display: flex;
      gap: 12px;
      align-items: end;
      min-width: 0;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: var(--paper);
    }
    .behavior-admin-row.retired { opacity: .55; }
    .behavior-edit-form {
      display: grid;
      grid-template-columns: minmax(0, 1.8fr) minmax(0, 2.2fr) minmax(150px, 1fr) auto;
      gap: 10px;
      align-items: end;
      flex: 1 1 auto;
      min-width: 0;
    }
    .behavior-edit-form label { display: grid; gap: 4px; font-size: 12px; font-weight: 800; color: var(--ink-3); min-width: 0; }
    .behavior-edit-form input, .behavior-edit-form select { width: 100%; min-width: 0; }
    .behavior-toggle-form { flex: 0 0 auto; align-self: end; }
    .behavior-toggle-form .button { white-space: nowrap; }
    .behavior-add-form {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px dashed var(--line);
    }
    .behavior-add-form input { flex: 1; min-width: 160px; }
    @media (max-width: 720px) {
      .behavior-admin-row { flex-wrap: wrap; }
      .behavior-edit-form { grid-template-columns: 1fr 1fr; }
      .behavior-toggle-form { width: 100%; }
      .behavior-toggle-form .button { width: 100%; }
    }
    @media (max-width: 480px) {
      .behavior-edit-form { grid-template-columns: 1fr; }
    }
    .comments { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
    .comment-list { display: grid; gap: 6px; }
    .comment { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 14px; }
    .comment-author { font-weight: 800; }
    .comment-body { color: var(--ink); overflow-wrap: anywhere; }
    .comment-time { color: var(--ink-3); font-size: 11px; }
    .comment-delete { margin-left: auto; border: none; background: none; color: var(--ink-3); cursor: pointer; font-size: 16px; line-height: 1; padding: 6px 10px; margin-right: -6px; border-radius: 8px; }
    .comment-delete:hover { background: var(--bg-2); }
    .comment-delete:hover { color: var(--danger, #b3261e); }
    .comment-form { display: flex; gap: 8px; }
    .comment-input { flex: 1; min-width: 0; }
    .comment-input.failed { border-color: var(--danger, #b3261e); }
    .comment.failed { background: color-mix(in oklab, var(--danger, #b3261e) 10%, transparent); border-radius: 6px; }
    /* Comments collapse behind a count pill so cards stay quiet until tapped. */
    .comment-toggle { justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font-size: 13px; font-weight: 700; }
    .comment-toggle svg { color: var(--ink-3); }
    .comment-toggle:hover { background: var(--greige); }
    .comment-thread { display: grid; gap: 8px; }
    .comment-thread[hidden] { display: none; }

    /* Compact streak/goal strip — the mobile stand-in for the two stat cards. */
    .stat-strip { display: none; }
    .home-coverage-mobile { display: none; }
    .stat-strip-row { display: flex; align-items: center; gap: 14px; font-size: 14px; flex-wrap: wrap; }
    .stat-strip-row a { margin-left: auto; font-weight: 700; color: var(--accent-deep); }
    .stat-strip-item strong { font-size: 16px; }
    .celebrate-banner { display: flex; flex-wrap: nowrap; gap: 12px; align-items: center; background: linear-gradient(180deg, #fff7e8, var(--paper)); }
    .celebrate-items { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; flex: 1; min-width: 0; }
    .celebrate-dismiss { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; font-size: 20px; line-height: 1; color: var(--ink-3); background: transparent; }
    .celebrate-dismiss:hover { background: var(--bg-2); color: var(--ink); }
    .celebrate-item { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; font-size: 14px; }
    .celebrate-item:hover strong { text-decoration: underline; }
    .celebrate-emoji { font-size: 22px; line-height: 1; }
    .dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
    .dir-card { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
    .dir-card:hover { border-color: var(--accent); }
    .dir-photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--bg-2); flex: 0 0 auto; }
    .dir-initials { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
    .dir-meta { display: grid; gap: 2px; min-width: 0; }
    .dir-meta strong, .dir-meta span { overflow-wrap: anywhere; }
    .profile-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
    .profile-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--bg-2); }
    .profile-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; flex: 1; min-width: 200px; }
    .profile-fact { display: grid; gap: 2px; }
    .profile-fact .muted { font-size: 12px; }
    .photo-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
    .photo-card .profile-photo { width: 120px; height: 120px; }
    .photo-card label.btn { cursor: pointer; }
    .profile-form { display: grid; gap: 12px; }
    .profile-form label { display: grid; gap: 4px; font-size: 13px; font-weight: 800; color: var(--ink-3); }
    .profile-form input, .profile-form select, .profile-form textarea { width: 100%; }
    .profile-form .field-row { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
    .quarter-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--gap); }
    .report-table-wrap { overflow-x: auto; }
    .report-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .report-table th, .report-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
    .report-table th { color: var(--ink-3); font-size: 12px; }
    .report-table td strong { font-weight: 800; }
    .team-member-row span { color: var(--ink-3); font-size: 12px; font-weight: 700; }
    .user-row-fields {
      min-width: 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
      gap: 8px;
    }
    .user-row-fields label { gap: 5px; min-width: 0; font-size: 12px; font-weight: 800; }
    .user-row-fields input, .user-row-fields select { min-width: 0; min-height: 38px; padding: 8px; font-size: 13px; }
    .user-row-submit { min-height: 38px; padding: 8px 10px; font-size: 13px; }
    .team-membership-field {
      grid-column: 1 / -1;
      min-width: 0;
      padding: 0;
      margin: 0;
      border: 0;
    }
    .team-membership-field legend {
      margin-bottom: 7px;
      font-size: 12px;
      font-weight: 900;
      color: var(--ink);
    }
    .team-check-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      min-width: 0;
    }
    .team-check {
      display: inline-flex;
      grid-template-columns: none;
      align-items: center;
      gap: 6px;
      min-height: 32px;
      padding: 6px 9px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: var(--paper);
      color: var(--ink-2);
      font-size: 12px;
      font-weight: 800;
    }
    .team-check.checked {
      border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
      background: var(--accent-soft);
      color: var(--ink);
    }
    .team-check input {
      width: 14px;
      height: 14px;
      min-height: 0;
      padding: 0;
      accent-color: var(--accent);
    }
    .team-check em {
      font-size: 10px;
      font-style: normal;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--accent-deep);
    }
    .team-panel { display: grid; gap: 16px; align-content: start; }
    .team-member-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 3px 10px;
      align-items: center;
      min-width: 0;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: var(--paper);
      box-shadow: inset 5px 0 0 var(--accent-soft);
    }
    .team-picker-row {
      color: inherit;
      text-decoration: none;
    }
    .team-picker-row.active {
      border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
      box-shadow: inset 5px 0 0 var(--accent), var(--shadow-sm);
    }
    .team-add-form {
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: var(--bg-2);
    }
    .team-member-row strong, .team-member-row span { min-width: 0; overflow-wrap: anywhere; }
    .team-member-row em {
      grid-row: 1 / span 2;
      grid-column: 2;
      padding: 5px 8px;
      border-radius: 999px;
      background: var(--bg-2);
      color: var(--accent-deep);
      font-size: 12px;
      font-style: normal;
      font-weight: 800;
      text-transform: capitalize;
    }

    .mobile-tabbar {
      display: none;
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 50;
      justify-content: space-around;
      align-items: center;
      /* Respect the home-indicator inset instead of a hardcoded 22px. */
      padding: 10px 8px calc(12px + env(safe-area-inset-bottom));
      border-top: 1px solid var(--line);
      background: var(--paper);
      box-shadow: 0 -8px 24px rgba(56,52,44,.08);
    }
    .mobile-tab {
      display: grid;
      justify-items: center;
      align-content: center;
      gap: 3px;
      color: var(--ink-3);
      font-size: 10px;
      font-weight: 700;
      min-width: 48px;
      min-height: 44px;
    }
    .mobile-tab.active { color: var(--accent-deep); }
    .mobile-send-fab {
      width: 52px;
      height: 52px;
      border-radius: 18px;
      background: var(--accent-deep);
      color: #fff;
      display: grid;
      place-items: center;
      margin-top: -26px;
      box-shadow: 0 6px 16px color-mix(in oklab, var(--accent-deep) 42%, transparent);
    }
    /* The send tab is a raised FAB with a "Send" caption, so it's labeled like its
       neighbours instead of being the only unlabeled control. */
    .mobile-send-tab { gap: 2px; color: var(--accent-deep); }
    /* Unread/count badge sits over the tab icon, not stacked below the label. */
    .mobile-tab { position: relative; }
    .mobile-tab .nav-badge { position: absolute; top: -1px; left: 50%; margin-left: 3px; }

    /* Mobile "More" drawer — overflow destinations reachable from the tab bar.
       Inert (hidden) until opened, and the toggle only shows when the tab bar
       does, so these rules can live outside the breakpoints. */
    .more-sheet { position: fixed; inset: 0; z-index: 60; }
    .more-sheet[hidden] { display: none; }
    .more-scrim { position: absolute; inset: 0; background: rgba(40,36,30,.38); }
    .more-panel {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--paper);
      border-radius: 20px 20px 0 0;
      padding: 10px 16px calc(20px + env(safe-area-inset-bottom));
      box-shadow: 0 -10px 40px rgba(40,36,30,.22);
      animation: more-rise .22s ease;
      /* A long admin link list must scroll within the drawer, not run off the top
         of the screen (mirrors .modal). */
      max-height: calc(100dvh - 24px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
    .more-grip { width: 40px; height: 4px; border-radius: 999px; background: var(--line); margin: 4px auto 14px; }
    .more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .more-link {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 14px;
      border-radius: 14px;
      background: var(--bg-2);
      color: var(--ink);
      font-weight: 700;
      font-size: 15px;
    }
    .more-link.active { color: var(--accent-deep); box-shadow: inset 0 0 0 2px var(--accent); }
    @keyframes more-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
    @media (prefers-reduced-motion: reduce) { .more-panel { animation: none; } }

    @media (max-width: 920px) {
      /* Tablet and phone both get the bottom tab bar — the old horizontal-scroll
         rail strip in the 640–920 range was awkward and easy to miss links in. */
      .app { grid-template-columns: 1fr; }
      .rail { display: none; }
      .mobile-tabbar { display: flex; }
      .dash-grid, .two-grid, .hero-postcard { grid-template-columns: 1fr !important; }
      .main-inner { padding: 24px 18px calc(90px + env(safe-area-inset-bottom)); }
    }
    @media (max-width: 640px) {
      /* Let topbar action buttons wrap below the title instead of overflowing
         or crushing it (e.g. a profile's Recognize + See kudos + Edit). */
      .topbar { align-items: flex-start; flex-wrap: wrap; }
      /* Reclaim above-the-fold height: the subtitles are decorative taglines. */
      .topbar .sub { display: none; }
      /* Keep the value filters to a single swipeable row instead of wrapping to
         two, so the feed itself sits higher on the screen. */
      .feed-filter-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        margin: 0 -14px var(--gap);
        padding: 2px 14px 6px;
        scroll-snap-type: x proximity;
      }
      .feed-filter-row::-webkit-scrollbar { display: none; }
      .feed-filter-row .value-choice { flex: 0 0 auto; scroll-snap-align: start; }
      .topbar .btn { display: none; }
      .topbar .btn.report-dl,
      .topbar .btn.keep-mobile { display: inline-flex; }
      .stats-grid, .recent-grid { grid-template-columns: 1fr; }
      .behavior-grid { grid-template-columns: 1fr; }
      /* Content-first home: drop the big Send hero (the FAB covers it) and the
         two full stat cards, surfacing a slim streak/goal strip instead. */
      .home-send-hero { display: none; }
      .home-stats-full { display: none; }
      /* The two-col stats grid is hidden on mobile (the stat-strip subs the rhythm
         card), but value-coverage had no mobile stand-in — surface it on its own. */
      .home-coverage-mobile { display: block; }
      .stat-strip { display: block; margin-top: var(--gap); padding: 14px 16px; }
      /* Comfortable thumb targets for the card action row (~40px tall). */
      /* Left-align the wrapped action row instead of space-between, which strands
         items with big gaps and a ragged second line on narrow screens. */
      .kudo-actions { justify-content: flex-start; gap: 8px 10px; }
      .reacts { gap: 8px; }
      .react { padding: 9px 14px; font-size: 14px; }
      .react .em { font-size: 18px; }
      .recognize-too, .comment-toggle { padding: 9px 14px; font-size: 14px; }
      .celebrate-dismiss { width: 40px; height: 40px; }
      /* 16px input font across the whole tab-bar range (not just <560) so iOS
         never auto-zooms on focus and lurches the layout. */
      input[type="text"], input[type="email"], input[type="search"], input[type="number"],
      input[type="date"], select, textarea { font-size: 16px; }
      .scrim { padding: 0; align-items: stretch; }
      /* Full-screen sheet as a flex column: fixed header + footer with the body
         scrolling between them. This keeps the Continue / Make-their-day button
         ALWAYS reachable — a position:sticky footer over a long teammate list
         is unreliable on mobile Safari (it can scroll off the bottom), which
         left no visible way to advance past step 1. 100dvh tracks the dynamic
         viewport so the footer never hides behind the browser toolbar. */
      .modal {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      /* The body owns the scroll now; head/foot are fixed flex rows (no sticky). */
      .modal-head, .modal-foot { border-radius: 0; flex: none; position: static; }
      .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
      /* The list must not trap the scroll — the modal-body owns it. */
      .person-list { max-height: none; overflow: visible; }
      /* Keep the action footer clear of the home indicator. */
      .modal-foot { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
      .hero-mini-panel { min-height: 190px; }
      .team-row, .breadth-row { align-items: flex-start; }
      .team-name, .breadth-team { width: 88px; }
    }
    @media (max-width: 560px) {
      .hide-sm { display: none; }
      /* Recipient count folds under the team name on phones instead of vanishing. */
      .team-people { display: block; font-size: 11px; color: var(--ink-3); font-weight: 600; margin-top: 2px; }
      .main-inner { padding: 20px 14px calc(90px + env(safe-area-inset-bottom)); }
      .topbar { gap: 10px; margin-bottom: 18px; }
      .topbar h1 { font-size: 28px; }
      .card.pad, .panel { padding: 18px; border-radius: 16px; }
      input[type="text"],
      input[type="email"],
      input[type="search"],
      select,
      textarea { font-size: 16px; }
      .user-toolbar { grid-template-columns: 1fr; }
      .user-row-fields { grid-template-columns: 1fr; }
      .user-row-submit { width: 100%; }
      .u-tags { max-width: 40%; }
      /* Force single-column on phones — the auto-fit min track otherwise resolves
         to two columns that overflow the narrow viewport. */
      .balance-grid { grid-template-columns: 1fr; gap: 16px; }
    }

    @media (prefers-color-scheme: dark) {
      /* Dark theme. The app is token-driven, so remapping the ~20 :root tokens
         flips the bulk of the UI; the rest are targeted overrides for literals
         that bypass the tokens (hardcoded light panels, status colors) and for
         the brand-gold FILLS that carry white text (they flip to dark text since
         the gold is lifted for legibility on dark). Contrast is kept at WCAG AA. */
      :root {
        --gold: #D3AE68;
        --gold-deep: #DFC085;
        --gold-soft: #4A3F2A;
        --spruce: #94A188;
        --spruce-deep: #A8B49E;
        --midnight: #9AA6A7;
        --taupe: #BDB19B;
        --greige: #383C42;
        --eggshell: #1E2125;
        --ink: #ECEAE4;
        --ink-2: #B7B3AA;
        --ink-3: #98948B;
        --paper: #212429;
        --bg: #15171A;
        --bg-2: #2A2E33;
        --line: #33373D;
        --line-2: #3F444B;
        /* Previously only an inline fallback (#b3261e), which stayed a light-mode
           red on dark. Define it so every var(--danger, …) resolves light. */
        --danger: #F08C7D;
        /* Warm-black shadows vanish on a dark canvas — use black at higher alpha
           so cards keep their elevation. */
        --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
        --shadow: 0 2px 8px rgba(0,0,0,.45);
        --shadow-lg: 0 12px 40px rgba(0,0,0,.6);
      }
      /* Brand-gold fills carry white text in light mode; the gold is lifted for
         dark, so white would fail AA — flip these to dark text on the bright gold. */
      .nav-badge, .rail-cta, .btn-primary, .button.primary, .mobile-send-fab { color: #17140d; }
      /* Hardcoded light panels that bypass the tokens. */
      .hero-mini-card, .watch-card, .nudge { background: var(--paper); }
      .celebrate-banner { background: color-mix(in oklab, var(--gold) 14%, var(--paper)); }
      /* Status colors mix a saturated hue with a hardcoded-dark text color that
         fails on a dark chip — darken the chip against --paper and lift the text. */
      .rec-status.on, .u-tag-ok { background: color-mix(in oklab, #5d9e6d 30%, var(--paper)); color: #8ed3a2; }
      .u-tag-warn, .adp-tag-warn { background: color-mix(in oklab, #c0392b 30%, var(--paper)); color: #f0a99d; }
      .error-box { background: color-mix(in oklab, #c0392b 22%, var(--paper)); border-color: color-mix(in oklab, #c0392b 55%, var(--paper)); color: #f0a99d; }
      /* The toast fills with var(--ink) (near-white in dark) — a light chip; keep its
         text/Undo dark so the message and the undo affordance stay legible. */
      .toast { color: #17140d; }
      .toast-undo .btn { color: #17140d; }
      /* --danger is lifted for red TEXT on dark; as the .btn-danger FILL it would be
         white-on-salmon (fails AA). Keep the delete button a deep red with white text. */
      .btn-danger { background: #C0392B; color: #fff; }
      /* Hardcoded dark-red text (share/photo/push failure states + the ADP-link CTA)
         has no token, so it stays ~2:1 on the dark card — lift it to clear AA. */
      .kudo-share.failed, .kudo-photo-edit .error, .push-card [data-push-status].error, .u-adp-cta a { color: #f0a99d; }
    }

    @media print {
      /* Printing is mostly the admin report (candidate table + recognizer rows):
         drop the app chrome, flatten to full-width black-on-white, and keep cards
         and table rows from splitting across page breaks. */
      .rail, .mobile-tabbar, .more-sheet, .toast, .topbar-spacer { display: none !important; }
      body, .app, .main { background: #fff !important; color: #000 !important; }
      .app { display: block !important; grid-template-columns: none !important; }
      .main { min-height: 0 !important; }
      .main-inner { max-width: none !important; margin: 0 !important; padding: 0 !important; }
      .card { box-shadow: none !important; border: 1px solid #ccc !important; }
      .card, .recognizer-row, .adp-match-row, .report-table tr { break-inside: avoid; page-break-inside: avoid; }
      .report-table-wrap { overflow: visible !important; }
      .report-table { width: 100% !important; }
      .report-table thead { display: table-header-group; } /* repeat headers on each printed page */
      a { color: #000 !important; text-decoration: none; }
    }