: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;
      /* ~4.6:1 on white — meets WCAG AA for the muted/metadata text it styles
         (the previous #8A908C was ~3.0:1, below the body-text threshold). */
      --ink-3: #6B716D;
      --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; }
    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-stack { display: grid; gap: 1px; min-width: 0; }
    .company-name {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--ink-3);
      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(--accent-deep); }
    .nav-item.active svg { opacity: 1; }
    .nav-badge {
      margin-left: auto;
      font-size: 11px;
      font-weight: 800;
      background: var(--accent);
      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);
      color: #fff;
      font-weight: 700;
      font-size: 15px;
      white-space: nowrap;
      box-shadow: 0 6px 16px color-mix(in oklab, var(--accent) 40%, transparent);
      transition: transform .12s, box-shadow .12s, filter .12s;
    }
    .rail-cta:hover {
      transform: translateY(-1px);
      filter: brightness(1.04);
      box-shadow: 0 10px 22px color-mix(in oklab, var(--accent) 46%, 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, .primary-action, .nav-links a {
      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; }
    .btn-primary, .button.primary, .primary-action {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 4px 14px color-mix(in oklab, var(--accent) 36%, transparent);
    }
    .btn-primary:hover, .button.primary:hover, .primary-action:hover {
      filter: brightness(1.05);
      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; }
    .btn-lg { padding: 14px 24px; font-size: 16px; }
    .btn[disabled] { opacity: .5; 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(--accent-deep);
      border-color: color-mix(in oklab, var(--accent) 45%, transparent);
      background: color-mix(in oklab, var(--accent-soft) 70%, white);
    }
    .points-badge {
      display: inline-flex;
      align-items: center;
      font-weight: 800;
      font-size: 12px;
      padding: 4px 10px;
      border-radius: 999px;
      color: var(--accent-deep);
      border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
      background: color-mix(in oklab, var(--accent-soft) 60%, white);
    }
    .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%, white); }
    .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-3); }
    .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;
    }
    .react:hover { transform: translateY(-1px) scale(1.04); background: var(--greige); }
    .react.on { background: var(--accent-soft); border-color: color-mix(in oklab, var(--accent) 40%, transparent); color: var(--accent-deep); }
    .react .em { font-size: 14px; }
    /* 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; }
    .kudo-head .names b { font-weight: 800; }
    .kudo-head .arrow { color: var(--ink-3); }
    .kudo-head .time { margin-left: auto; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
    .kudo-story { font-size: 16px; line-height: 1.55; color: var(--ink); }
    .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%, white); }
    .kudo-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
    .feed-edit-link {
      margin-left: auto;
      color: var(--accent-deep);
      font-size: 13px;
      font-weight: 800;
    }
    .feed-delete-link {
      border: none;
      background: none;
      padding: 0;
      cursor: pointer;
      color: var(--danger, #b3261e);
    }
    .feed-edit-link + .feed-delete-link { margin-left: 12px; }

    .ring-wrap { position: relative; display: grid; place-items: center; }
    .ring-center { position: absolute; text-align: center; }
    .ring-center .big { font-family: var(--font-head); font-weight: 700; font-size: 30px; line-height: 1; color: var(--ink); }
    .ring-center .lbl { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-top: 3px; }
    .flames { display: flex; gap: 6px; }
    .flame {
      width: 30px;
      height: 38px;
      border-radius: 9px;
      display: grid;
      place-items: center;
      font-size: 17px;
      background: var(--bg-2);
      color: var(--ink-3);
      transition: transform .2s;
    }
    .flame.lit {
      background: linear-gradient(160deg, #F4C36B, #C76B3A);
      color: #fff;
      box-shadow: 0 4px 12px rgba(199,107,58,.32);
    }
    .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-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); }
    .received-note {
      border-left: 3px solid var(--accent);
      padding-left: 12px;
    }
    .received-note p { font-size: 14px; line-height: 1.45; }

    .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(--gold-deep);
      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; }
    .nudge-src { font-size: 12px; color: var(--ink-3); }

    .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%, white);
    }
    .favorite-toggle {
      width: 38px;
      height: 38px;
      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;
    }
    .value-choice.active { border-color: currentColor; }
    .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%, white);
    }
    .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%, white); 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%, white); 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%, white); }
    .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%, white);
      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%, white);
    }
    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%, white); 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%, white);
      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-grid {
      display: grid;
      grid-template-columns: minmax(260px, .42fr) minmax(0, 1fr);
      gap: 22px;
      align-items: start;
    }
    .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(--accent-deep);
      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; }
    .admin-grid > .panel, .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(--accent-deep); }
    .u-tag-ok { background: color-mix(in oklab, #5d9e6d 16%, white); color: #2f6b3d; }
    .u-tag-warn { background: color-mix(in oklab, #c0392b 12%, white); 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; }
    .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(--accent-deep);
    }
    .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;
    }

    .nav-links {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }
    .nav-links a { background: var(--bg-2); color: var(--ink); }

    .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;
      gap: 3px;
      color: var(--ink-3);
      font-size: 10px;
      font-weight: 700;
      min-width: 48px;
    }
    .mobile-tab.active { color: var(--accent-deep); }
    .mobile-send-fab {
      width: 52px;
      height: 52px;
      border-radius: 18px;
      background: var(--accent);
      color: #fff;
      display: grid;
      place-items: center;
      margin-top: -26px;
      box-shadow: 0 6px 16px color-mix(in oklab, var(--accent) 45%, transparent);
    }

    /* 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;
    }
    .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; }
      .stat-strip { display: block; margin-top: var(--gap); padding: 14px 16px; }
      /* Comfortable thumb targets for the card action row (~40px tall). */
      .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; }
      .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; }
      .admin-grid, .user-toolbar { grid-template-columns: 1fr; }
      .user-row-fields { grid-template-columns: 1fr; }
      .user-row-submit { width: 100%; }
      .u-tags { max-width: 40%; }
    }