/* MyHub — components. One class per component from docs/design/Component Sheet.dc.html.
   Every measurement here is copied from the design; screens must use these classes, never inline styles. */
@layer components {

  /* ── Icon (web component from js/icons.js) ───────────────────────── */
  as-icon { display: inline-flex; flex: none; }
  /* Sidebar collapsed to icons (layout.css): the lock beside Money / Health hides too — needs this layer to beat the rule above. */
  .app--collapsed .side-item__lock { display: none; }
  @media (min-width: 600px) and (max-width: 1024px) { .side-item__lock { display: none; } }

  /* ── Card ─────────────────────────────────────────────────────────── */
  .card {
    background: var(--as-surface); border: 1px solid var(--as-border); border-radius: var(--as-r-lg);
    padding: 18px; display: flex; flex-direction: column; gap: 12px;
  }
  .card--raised { border: 0; border-radius: 16px; box-shadow: var(--as-shadow-sm); }     /* iPhone grouped card */
  .card--flush  { padding: 0; gap: 0; overflow: hidden; }
  .card--state  { padding: 20px; gap: 8px; align-items: flex-start; }
  .card__label  { font-size: 12px; font-weight: 600; color: var(--as-ink-3); text-transform: uppercase; letter-spacing: .06em; }
  .card__note   { font-size: 12px; color: var(--as-ink-3); line-height: 1.5; }
  .card__title  { font-size: 15px; font-weight: 600; }
  .card__body   { font-size: 13px; color: var(--as-ink-3); line-height: 1.45; }
  .divider      { height: 1px; background: var(--as-border); border: 0; margin: 0; }
  .card--tight  { gap: 8px; }
  .card--tight > .card__label { margin-bottom: 4px; }
  .card--tasks  { gap: 4px; }
  .card--tasks > .card__label { margin-bottom: 8px; }

  /* Two-column legend (sample → explanation) */
  .legend-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; font-size: 13px; }
  .legend-grid--chips { gap: 10px 12px; font-size: 12.5px; color: var(--as-ink-3); }

  /* Toolbar card — the shell controls strip on the Component Sheet. */
  .bar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    background: var(--as-surface); border: 1px solid var(--as-border); border-radius: var(--as-r-lg);
    padding: 10px 14px; box-shadow: var(--as-shadow-sm);
  }

  /* ── Buttons ──────────────────────────────────────────────────────── */
  .btn {
    height: 44px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: var(--as-r-md); font-size: 15px; font-weight: 600; white-space: nowrap;
    border: 1px solid transparent;
    transition: background-color var(--as-dur-1) var(--as-ease), border-color var(--as-dur-1) var(--as-ease), opacity var(--as-dur-1) var(--as-ease);
  }
  .btn--primary   { background: var(--as-ink); color: var(--as-surface); }          /* primary = ink, not brand */
  .btn--secondary { border-color: var(--as-border-2); }
  .btn--ghost     { padding: 0 14px; color: var(--as-ink-3); }
  .btn--brand     { background: var(--as-brand); color: var(--as-on-brand); }       /* one end-of-flow commitment per screen */
  .btn--on-surface{ background: var(--as-surface); }
  .btn--md  { height: 40px; padding: 0 14px; border-radius: 9px; font-size: 14px; }
  .btn--sm  { height: 36px; padding: 0 12px; border-radius: 9px; font-size: 13px; gap: 5px; }
  .btn--xs  { height: 32px; padding: 0 10px; border-radius: 8px; font-size: 13px; }
  .btn--lg  { height: 52px; border-radius: 12px; font-size: 16px; font-weight: 700; gap: 8px; }   /* full-width flow CTA */
  .btn--block { width: 100%; }
  .btn--ghost.btn--md { padding: 0 10px; }
  .btn.is-focused, .btn:focus-visible { box-shadow: var(--as-focus); }
  .btn--tray { gap: 8px; }                     /* Suggestions tray button */
  .btn__kbd { font-family: var(--as-mono); font-size: 11px; opacity: .7; font-weight: 600; }

  .icon-btn {
    width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--as-r-md); border: 1px solid var(--as-border);
  }
  .icon-btn--bare { width: var(--as-tap); height: var(--as-tap); border: 0; }        /* 44px touch target */

  /* ── Segmented control (Work / Personal / All, view switchers) ───── */
  .segmented { display: flex; background: var(--as-surface-3); border-radius: var(--as-r-md); padding: 3px; gap: 2px; }
  .segmented__item {
    height: 30px; padding: 0 12px; display: flex; align-items: center; gap: 6px; border-radius: 8px;
    font-size: 13px; font-weight: 600; color: var(--as-ink-2); white-space: nowrap;
  }
  .segmented__item[aria-checked="true"], .segmented__item.is-active {
    background: var(--as-surface); font-weight: 700; color: var(--as-ink); box-shadow: var(--as-shadow-sm);
  }
  .segmented--sm { border-radius: 9px; gap: 0; }
  .segmented--sm .segmented__item { height: 28px; border-radius: 7px; }
  .segmented--fill .segmented__item { flex: 1; justify-content: center; }

  /* Context marks — Work ■ square, Personal ● round, readable without color. */
  .ctx { display: inline-block; flex: none; width: 8px; height: 8px; }
  .ctx--work     { border-radius: 2px; background: var(--as-work); }
  .ctx--personal { border-radius: 50%; background: var(--as-personal); }
  .ctx--sm { width: 7px; height: 7px; }
  .ctx--current { background: currentColor; }

  /* ── Search / ask field ───────────────────────────────────────────── */
  .search {
    flex: 1; min-width: 200px; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px;
    border: 1px solid var(--as-border); border-radius: var(--as-r-md); background: var(--as-surface-2);
    color: var(--as-ink-3); font-size: 13px; white-space: nowrap;
  }
  .search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--as-ink); }
  .search input::placeholder { color: var(--as-ink-3); }
  .kbd { margin-left: auto; font-family: var(--as-mono); font-size: 11px; border: 1px solid var(--as-border-2); border-radius: 5px; padding: 1px 5px; color: var(--as-ink-3); }

  /* ── Status pill (sync / connection health) ──────────────────────── */
  .pill {
    height: 32px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: var(--as-r-pill);
    font-size: 12px; font-weight: 600; background: var(--as-surface-2); border: 1px solid var(--as-border); color: var(--as-ink-2);
    white-space: nowrap;
  }
  .pill--warn    { background: var(--as-warn-bg); border-color: var(--as-warn-border); color: var(--as-warn); }
  .pill--offline { border-style: dashed; border-color: var(--as-border-2); color: var(--as-ink-3); }
  .pill--sm      { height: 30px; }
  .dot      { width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; }
  .dot--pos { background: var(--as-pos); }

  /* Count badge (Suggestions tray) */
  .count {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--as-ink); color: var(--as-surface);
    font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
  }

  /* ── Chips ────────────────────────────────────────────────────────── */
  .chip {
    display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: var(--as-r-pill);
    background: var(--as-surface-3); font-size: 12px; font-weight: 600; color: var(--as-ink-2); white-space: nowrap;
    border: 0;
  }
  .chip--work     { background: var(--as-work-tint);     color: var(--as-work); }
  .chip--personal { background: var(--as-personal-tint); color: var(--as-personal); }
  .chip--crit     { background: var(--as-crit-bg);       color: var(--as-crit); font-weight: 700; }
  .chip--pos      { background: var(--as-pos-bg);        color: var(--as-pos); }
  .chip--mono     { font-family: var(--as-mono); }
  /* Proposed by the assistant — dashed until accepted (150 ms crossfade to solid). */
  .chip--proposed {
    background: transparent; border: 1.5px dashed var(--as-ghost-border);
    transition: border-color var(--as-dur-1) var(--as-ease), background-color var(--as-dur-1) var(--as-ease);
  }
  .chip--outline  { background: transparent; border: 1px solid var(--as-border); color: var(--as-ink-3); }
  .chip--sm { height: 24px; padding: 0 8px; font-size: 11.5px; }
  .chip--lg { height: 36px; padding: 0 12px; gap: 6px; font-size: 14px; }
  .chip--xl { height: 32px; padding: 0 10px; gap: 6px; font-size: 13px; }

  /* Tag — account / source labels (WORK, ICLOUD) and "Local AI only". */
  .tag {
    display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 5px;
    border: 1px solid var(--as-border-2); font-size: 11px; font-weight: 700; color: var(--as-ink-3);
    letter-spacing: .02em; text-transform: uppercase; white-space: nowrap;
  }
  .tag--local { border: 0; background: var(--as-surface-3); font-weight: 600; text-transform: none; letter-spacing: 0; }
  .tag--sm { height: 20px; padding: 0 6px; font-size: 10.5px; }

  /* ── Priority bars · status badges · confidence ──────────────────── */
  .prio { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; flex: none; }
  .prio > i { width: 3px; border-radius: 1px; background: var(--as-border-2); }
  .prio > i:nth-child(1) { height: 6px; } .prio > i:nth-child(2) { height: 10px; } .prio > i:nth-child(3) { height: 14px; }
  .prio--low  > i:nth-child(1)                                   { background: var(--as-ink-2); }
  .prio--med  > i:nth-child(-n+2)                                { background: var(--as-ink-2); }
  .prio--high > i                                                { background: var(--as-crit); }

  .badge {
    display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 5px;
    font-size: 11px; font-weight: 700; white-space: nowrap; background: var(--as-surface-3); color: var(--as-ink-2);
  }
  .badge--crit   { background: var(--as-crit-bg); color: var(--as-crit); }
  .badge--pos    { background: var(--as-pos-bg);  color: var(--as-pos); }
  .badge--warn   { background: var(--as-warn-bg); color: var(--as-warn); }
  .badge--unsure { background: transparent; border: 1px dashed var(--as-ghost-border); color: var(--as-ink-3); }

  .confidence { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
  .confidence__dots { display: flex; gap: 2px; }
  .confidence__dots > i { width: 5px; height: 5px; border-radius: 50%; background: var(--as-border-2); }
  .confidence--high > .confidence__dots > i            { background: var(--as-ink-2); }
  .confidence--med  > .confidence__dots > i:nth-child(-n+2) { background: var(--as-ink-2); }
  .confidence--low  > .confidence__dots > i:first-child     { background: var(--as-ink-2); }

  /* ── Suggestion card (AI proposal) ───────────────────────────────── */
  .suggestion {
    border: 1.5px dashed var(--as-ghost-border); border-radius: 12px; padding: 14px; background: var(--as-ghost-bg);
    display: flex; flex-direction: column; gap: 10px;
  }
  .suggestion__head  { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--as-ink-3); font-weight: 600; }
  .suggestion__title { font-size: 15px; font-weight: 600; line-height: 1.35; }
  .suggestion__why   { font-size: 13px; color: var(--as-ink-2); line-height: 1.45; }
  .suggestion__actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .suggestion--compact { padding: 12px 14px; gap: 8px; }
  .suggestion--compact .suggestion__title { font-size: 14.5px; }

  /* ── "Done for you" item ─────────────────────────────────────────── */
  .done-item { display: flex; gap: 12px; align-items: flex-start; }
  .done-item__icon {
    width: 28px; height: 28px; border-radius: 8px; background: var(--as-surface-3); color: var(--as-ink-2);
    display: flex; align-items: center; justify-content: center; flex: none;
  }
  .done-item__text  { flex: 1; min-width: 0; }
  .done-item__title { font-size: 14px; font-weight: 600; }
  .done-item__meta  { font-size: 12.5px; color: var(--as-ink-3); line-height: 1.4; }
  .done-item .btn   { border-color: var(--as-border); }

  /* ── Background work · skeleton ──────────────────────────────────── */
  .progress-pill {
    display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; height: 30px; padding: 0 12px;
    border-radius: var(--as-r-pill); background: var(--as-surface-2); border: 1px solid var(--as-border);
    font-size: 12.5px; color: var(--as-ink-2); white-space: nowrap;
  }
  .spinner {
    width: 12px; height: 12px; border-radius: 50%; flex: none;
    border: 2px solid var(--as-border-2); border-top-color: var(--as-ink-2);
    animation: mh-spin .9s linear infinite;
  }
  .spinner--sm { width: 11px; height: 11px; }
  @keyframes mh-spin { to { transform: rotate(360deg); } }
  .skeleton { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--as-r-md); background: var(--as-surface-2); }
  .skeleton__line { display: block; height: 10px; border-radius: 4px; background: var(--as-surface-3); }
  .skeleton__head { display: flex; gap: 8px; align-items: center; }
  .skeleton__queue { margin-left: auto; font-size: 11px; color: var(--as-ink-3); }
  .skeleton__line { animation: mh-shimmer 1.4s ease-in-out infinite; }
  @keyframes mh-shimmer { 50% { opacity: .5; } }
  .skeleton--rows { gap: 14px; padding: 16px 12px; background: transparent; }
  /* Content that arrives after the page (Today "Needs you"): fade in. */
  .today-reveal { animation: mh-reveal var(--as-dur-3) var(--as-ease); }
  @keyframes mh-reveal { from { opacity: 0; transform: translateY(4px); } }
  @media (prefers-reduced-motion: reduce) { .skeleton__line, .today-reveal { animation: none; } }
  /* Meeting summary review (prep.after): one ticked line per change to make. */
  .prep-check__t { display: block; font-weight: 600; color: var(--as-ink); line-height: 1.35; }
  /* Plan meeting dialog: "Your answer: Accepted · Accept · Maybe · Decline" (a meeting you're a guest in). */
  .plan-dialog__answer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; padding: 10px 12px;
    border-radius: var(--as-r-md); background: var(--as-surface-2); }
  .plan-dialog__answer-label { flex: 1 1 140px; font-size: 13px; font-weight: 600; color: var(--as-ink-2); }
  .plan-dialog__answer .btn[aria-pressed="true"] { background: var(--as-ink); color: var(--as-surface); border-color: var(--as-ink); opacity: 1; }
  .btn--danger-ghost { background: transparent; border: 1px solid var(--as-border); color: var(--as-crit); }
  .btn--danger-ghost:hover { background: var(--as-crit-bg); }
  /* 9.46 · a button whose action is running in the background (actions.js): a spinner, no second tap. */
  .btn.is-busy, button.is-busy { cursor: progress; opacity: .75; }
  .btn.is-busy::before { content: ""; width: 12px; height: 12px; margin-right: 2px; border-radius: 50%; flex: none;
    border: 2px solid currentColor; border-right-color: transparent; animation: mh-spin .8s linear infinite; }
  .btn.is-busy > as-icon:first-child { display: none; }
  /* 9.46 · sections that load after the frame (<x-lazy>): a placeholder shaped like the section, then the section. */
  .lazy { min-height: 72px; }
  .lazy--cards, .lazy--grid { min-height: 180px; }
  .skeleton-cards, .skeleton-tiles { display: grid; gap: 12px; }
  .skeleton-tiles { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .skeleton-card { min-height: 92px; }
  .skeleton-tile { min-height: 72px; }
  .skeleton__line--big { height: 22px; width: 40%; }
  .skeleton-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; min-height: 220px; }
  .skeleton-grid__col { display: flex; flex-direction: column; gap: 8px; }
  .skeleton-grid__block { display: block; flex: 1; border-radius: var(--as-r-md); background: var(--as-surface-3); animation: mh-shimmer 1.4s ease-in-out infinite; }
  /* 9.48: frame first — the slot a section fills, and Today's placeholder (two columns of cards). */
  .slot-contents { display: contents; }
  .today__lazy { grid-column: 1 / -1; }
  .skeleton-today { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px 22px; }
  .skeleton-today__col { display: grid; gap: 18px; align-content: start; }
  .skeleton-card--tall { min-height: 180px; }
  @media (max-width: 899px) { .skeleton-today { grid-template-columns: minmax(0, 1fr); } }
  .skeleton-inbox { display: grid; grid-template-columns: minmax(300px, 420px) minmax(0, 1fr); gap: 16px; padding: 16px; }
  .skeleton-inbox__list { display: grid; gap: 10px; align-content: start; }
  .skeleton-inbox__detail { min-height: 420px; }
  @media (max-width: 1099px) { .skeleton-inbox { grid-template-columns: minmax(0, 1fr); } .skeleton-inbox__detail { display: none; } }
  .search-page__note--busy { display: flex; align-items: center; gap: 8px; color: var(--as-ink-3); }
  .lazy__error { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px dashed var(--as-border-2);
    border-radius: var(--as-r-md); color: var(--as-ink-3); font-size: 13px; }
  .lazy__error .btn { margin-left: auto; }
  .lazy-in { animation: mh-lazy-in 420ms var(--as-ease) both; }
  @keyframes mh-lazy-in { from { opacity: 0; transform: translateY(6px); } }
  @media (prefers-reduced-motion: reduce) { .lazy-in { animation: mh-reveal-fade 200ms linear both; } .skeleton-grid__block { animation: none; } }
  @keyframes mh-reveal-fade { from { opacity: 0; } }
  .w-110 { width: 110px; } .w-90p { width: 90%; } .w-85p { width: 85%; } .w-60p { width: 60%; } .w-55p { width: 55%; }

  /* ── Time blocks (Plan, Today timeline) ──────────────────────────── */
  .block {
    display: flex; gap: 10px; align-items: stretch; padding: 8px 10px; border-radius: 8px;
    background: var(--as-surface); border: 1px solid var(--as-border-2);
  }
  .block__icon  { color: var(--as-ink-3); align-self: center; display: flex; }
  .block__main  { flex: 1; min-width: 0; }
  .block__title { font-size: 13px; font-weight: 600; color: var(--as-ink); }
  .block__link:hover { text-decoration: underline; }
  .block__time  { font-size: 11.5px; color: var(--as-ink-3); font-family: var(--as-mono); }
  .block__aside { font-size: 11px; font-weight: 600; color: var(--as-ink-3); align-self: center; }
  .block--meeting  { border: 0; border-left: 3px solid var(--block-fg, var(--cal-1)); background: var(--block-bg, var(--cal-1-bg)); }
  .block--meeting .block__time { color: var(--as-ink-2); }
  .block--proposed { border: 1.5px dashed var(--as-ghost-border); background: var(--as-ghost-bg); }
  .block--proposed .block__title { color: var(--as-ink-2); }
  .block--proposed .block__aside { font-weight: 700; color: var(--as-ink-2); }
  .block--pinned   { border-color: var(--as-ink-3); box-shadow: var(--as-shadow-sm); }
  .block--overdue  { border: 0; border-left: 3px solid var(--as-crit); background: var(--as-crit-bg); }
  /* Placeholder meetings (docs/15 §1): still there, faded, never counted. */
  .block--placeholder, .plan-chip--placeholder, .tl__item--placeholder, .day-strip__seg--placeholder { opacity: .45; }
  .block--placeholder { border-left-style: dashed; }
  .set-ph { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--as-border); }
  .set-ph__title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
  .set-ph__h { margin: 14px 0 2px; font-size: 12px; font-weight: 700; color: var(--as-ink-3); text-transform: uppercase; letter-spacing: .04em; }
  .block--overdue .block__icon, .block--overdue .block__time { color: var(--as-crit); font-family: var(--as-font); font-weight: 600; }
  .block--free {
    padding: 6px 10px; align-items: center; border: 0;
    background: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--as-surface-3) 5px, var(--as-surface-3) 6px);
  }
  .block--free span { font-size: 12px; color: var(--as-ink-3); }
  .block--protected { border: 0; background: var(--as-surface-2); color: var(--as-ink-3); }
  /* Calendar colors: set --block-fg/--block-bg with .cal-1 … .cal-12 */
  .cal-1  { --block-fg: var(--cal-1);  --block-bg: var(--cal-1-bg); }  .cal-2  { --block-fg: var(--cal-2);  --block-bg: var(--cal-2-bg); }
  .cal-3  { --block-fg: var(--cal-3);  --block-bg: var(--cal-3-bg); }  .cal-4  { --block-fg: var(--cal-4);  --block-bg: var(--cal-4-bg); }
  .cal-5  { --block-fg: var(--cal-5);  --block-bg: var(--cal-5-bg); }  .cal-6  { --block-fg: var(--cal-6);  --block-bg: var(--cal-6-bg); }
  .cal-7  { --block-fg: var(--cal-7);  --block-bg: var(--cal-7-bg); }  .cal-8  { --block-fg: var(--cal-8);  --block-bg: var(--cal-8-bg); }
  .cal-9  { --block-fg: var(--cal-9);  --block-bg: var(--cal-9-bg); }  .cal-10 { --block-fg: var(--cal-10); --block-bg: var(--cal-10-bg); }
  .cal-11 { --block-fg: var(--cal-11); --block-bg: var(--cal-11-bg); } .cal-12 { --block-fg: var(--cal-12); --block-bg: var(--cal-12-bg); }
  .area-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--block-fg, var(--as-ink-3)); }

  /* ── Workload meter ──────────────────────────────────────────────── */
  .meter__head  { display: flex; align-items: baseline; gap: 8px; }
  .meter__value { font-family: var(--as-mono); font-size: 24px; font-weight: 700; }
  .meter__of    { font-size: 13px; color: var(--as-ink-3); }
  .meter__head .badge { margin-left: auto; }
  .meter__bar   { position: relative; height: 10px; border-radius: 5px; background: var(--as-surface-3); display: flex; }
  /* Data-driven widths come in as custom properties: style="--m:44%;--t:36%;--o:20%;--limit:80%" */
  .meter__seg--meetings { width: var(--m, 0%); background: var(--as-ink-2); border-radius: 5px 0 0 5px; }
  .meter__seg--tasks    { width: var(--t, 0%); background: var(--as-border-2); }
  .meter__seg--over     { width: var(--o, 0%); border-radius: 0 5px 5px 0; background: repeating-linear-gradient(135deg, var(--as-warn), var(--as-warn) 3px, var(--as-warn-bg) 3px, var(--as-warn-bg) 6px); }
  .meter__limit { position: absolute; left: var(--limit, 100%); top: -4px; bottom: -4px; width: 2px; background: var(--as-ink); }
  .meter__legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--as-ink-3); }

  /* ── Email thread card ───────────────────────────────────────────── */
  .thread { display: flex; flex-direction: column; gap: 6px; }
  .thread__head    { display: flex; align-items: center; gap: 6px; }
  .thread__from    { font-size: 14px; font-weight: 700; }
  .thread__org     { font-size: 12px; color: var(--as-ink-3); }
  .thread__meta    { margin-left: auto; display: flex; align-items: center; gap: 6px; }
  .thread__age     { font-size: 12px; color: var(--as-ink-3); font-family: var(--as-mono); }
  .thread__subject { font-size: 13px; font-weight: 600; color: var(--as-ink-2); }
  .thread__summary { font-size: 13px; color: var(--as-ink-2); line-height: 1.45; }
  .thread__chips   { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
  .vip { color: var(--as-warn); }

  /* ── Task row ────────────────────────────────────────────────────── */
  .task { display: flex; gap: 12px; align-items: flex-start; min-height: var(--as-tap); }
  .check {
    width: 22px; height: 22px; border-radius: 6px; border: 1.75px solid var(--as-ink-3); flex: none; margin-top: 1px;
    display: flex; align-items: center; justify-content: center; color: var(--as-surface);
  }
  .check.is-done, .task.is-done .check { background: var(--as-ink); border-color: var(--as-ink); }
  .check--sm { width: 18px; height: 18px; border-radius: 5px; margin-top: 0; }
  .check--round { border-radius: 50%; }
  .task__main  { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
  .task__title { font-size: 14.5px; font-weight: 500; }
  .task.is-done .task__title { color: var(--as-ink-3); text-decoration: line-through; }
  .task__meta  { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--as-ink-3); }
  .task__meta .due-soon { color: var(--as-warn); font-weight: 600; }
  .task .prio  { margin-top: 4px; }
  .task-divider { height: 1px; background: var(--as-border); margin: 6px 0 6px 34px; }

  /* ── Toast with undo ─────────────────────────────────────────────── */
  .toast {
    display: flex; align-items: center; gap: 10px; padding: 0 6px 0 14px; height: 48px; border-radius: 12px;
    background: var(--as-ink); color: var(--as-surface); box-shadow: var(--as-shadow-lg); position: relative; overflow: hidden;
  }
  .toast__text { font-size: 14px; flex: 1; }
  .toast__action { height: 36px; padding: 0 12px; display: flex; align-items: center; gap: 5px; border-radius: 8px; font-size: 14px; font-weight: 700; }
  .toast__timer { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--as-surface); opacity: .5; width: var(--toast-left, 100%); }

  /* ── Swipe row ───────────────────────────────────────────────────── */
  .swipe { display: flex; border-radius: 12px; overflow: hidden; height: 64px; border: 1px solid var(--as-border); }
  .swipe__action {
    width: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: 11px; font-weight: 700; background: var(--as-surface-3); color: var(--as-ink-2);
  }
  .swipe__action--done { width: 72px; background: var(--as-pos); color: var(--as-on-pos); }
  .swipe__action--task { background: var(--as-work); color: var(--as-surface); }
  .swipe__body  { flex: 1; background: var(--as-surface); padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
  .swipe__title { font-size: 13px; font-weight: 700; }
  .swipe__sub   { font-size: 12px; color: var(--as-ink-3); }

  /* ── Project / topic chip (3 states) ─────────────────────────────── */
  .group-chip {
    display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: var(--as-r-sm);
    background: var(--as-surface-3); font-size: 12px; font-weight: 600; color: var(--as-ink-2); white-space: nowrap;
  }
  .group-chip--auto      { background: var(--as-surface); border: 1px solid var(--as-border-2); }
  .group-chip--suggested { background: transparent; border: 1.5px dashed var(--as-ghost-border); }
  .group-chip__sep  { width: 4px; height: 4px; border-radius: 50%; background: var(--as-ink-3); }
  .group-chip__auto { font-weight: 500; color: var(--as-ink-3); }
  .filed-bar {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 9px; background: var(--as-surface-2);
    font-size: 12.5px; color: var(--as-ink-2); flex-wrap: wrap;
  }
  .filed-bar__actions { margin-left: auto; display: flex; gap: 6px; }
  .link-strong { font-weight: 700; color: var(--as-ink); }
  .sep { color: var(--as-ink-3); }

  /* ── Fact row (memory) ───────────────────────────────────────────── */
  .fact { display: flex; gap: 10px; align-items: flex-start; padding-top: 4px; }
  .fact > as-icon { color: var(--as-ink-3); margin-top: 2px; }
  .fact__main { flex: 1; min-width: 0; }
  .fact__text { font-size: 14px; }
  .fact__meta { font-size: 12px; color: var(--as-ink-3); }
  .fact__meta u { text-decoration: underline; }
  .fact__edit   { font-size: 12.5px; font-weight: 600; color: var(--as-ink-2); }
  .fact__forget { font-size: 12.5px; font-weight: 600; color: var(--as-crit); }

  /* ── Living summary · cited answer ───────────────────────────────── */
  .summary-line { font-size: 13.5px; line-height: 1.5; }
  .date-chip {
    display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px; border-radius: 5px;
    background: var(--as-surface-3); font-size: 11px; font-weight: 600; color: var(--as-ink-3); vertical-align: 1px;
  }
  .cited { font-size: 13.5px; line-height: 1.5; padding: 10px 12px; border-radius: 9px; background: var(--as-surface-2); }
  .cited sup, .cite { font-size: 10px; font-weight: 700; color: var(--as-work); }
  .cited__sources { font-size: 11.5px; color: var(--as-ink-3); margin-top: 4px; }

  /* ── Progress bar (import, debt) ─────────────────────────────────── */
  .progress { display: flex; flex-direction: column; gap: 6px; }
  .progress__head { display: flex; font-size: 12.5px; }
  .progress__head > :first-child { font-weight: 600; }
  .progress__pct  { margin-left: auto; color: var(--as-ink-3); }
  .progress__bar  { height: 6px; border-radius: 3px; background: var(--as-surface-3); display: flex; overflow: hidden; }
  .progress__fill { background: var(--as-ink-2); width: var(--pct, 0%); }
  .progress__fill--pos { background: var(--as-pos); }
  .progress__note { font-size: 12px; color: var(--as-ink-3); }

  /* ── States (empty / error / offline / source unavailable) ───────── */
  .state-icon--pos  { color: var(--as-pos); }
  .state-icon--crit { color: var(--as-crit); }
  .state-icon--ink  { color: var(--as-ink-2); }
  .state-icon--warn { color: var(--as-warn); }

  /* ── Toggle switch ───────────────────────────────────────────────── */
  .switch { width: 51px; height: 31px; border-radius: 16px; background: var(--as-surface-3); position: relative; flex: none; }
  .switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--as-knob); box-shadow: var(--as-knob-shadow); transition: left var(--as-dur-1) var(--as-ease); }
  .switch[aria-checked="true"] { background: var(--as-pos); }
  .switch[aria-checked="true"]::after { left: 22px; }
  .switch--sm { width: 42px; height: 26px; border-radius: 13px; }
  .switch--sm::after { width: 22px; height: 22px; }
  .switch--sm[aria-checked="true"]::after { left: 18px; }
}

@layer components {
  /* Text input (design: statement review fields, Ask field) */
  .field { display: flex; flex-direction: column; gap: 4px; }
  .field__label { font-size: 12px; color: var(--as-ink-3); font-weight: 600; }
  .input {
    height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--as-border-2);
    background: var(--as-surface); color: var(--as-ink); font-size: 16px; width: 100%;
  }
  .input:focus { border-color: var(--as-work); box-shadow: var(--as-focus); outline: none; }
  .input--mono { font-family: var(--as-mono); letter-spacing: .04em; }
}

@layer components {
  /* Recovery code: one <input> drawn as 4 + 4 boxes (Sign In Desktop → 3 Recovery code).
     The real input sits on top, invisible, so screen readers hear one field and paste works. */
  .code { position: relative; display: flex; align-items: center; gap: 8px; }
  .code:not(.is-live) .code__box, .code:not(.is-live) .code__dash { display: none; }   /* no JS: plain field */
  .code.is-live .code__input {
    position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0;
    font-size: 16px; color: transparent; caret-color: transparent; background: none; cursor: text;
  }
  .code__box {
    width: 44px; height: 54px; min-width: 0; border-radius: 10px; border: 1px solid var(--as-border-2); background: var(--as-surface);
    display: flex; align-items: center; justify-content: center; font-family: var(--as-mono); font-size: 22px; font-weight: 600;
  }
  .code__box.is-focus { border: 1.5px solid var(--as-work); box-shadow: 0 0 0 3px var(--as-work-tint); }
  .code.is-error .code__box { border: 1.5px solid var(--as-crit); }
  .code__dash { width: 12px; height: 2px; background: var(--as-ink-3); }
  .code-help { margin-top: 12px; font-size: 13px; color: var(--as-ink-3); }
  .code-error { margin-top: 12px; display: flex; gap: 8px; font-size: 13.5px; color: var(--as-crit); line-height: 1.45; }
  .code-error as-icon { margin-top: 1px; }
  @media (min-width: 600px) and (max-width: 1099px) {
    .code { gap: 7px; }
    .code__box { width: 42px; height: 52px; font-size: 21px; }
    .code__dash { width: 10px; }
  }
  @media (max-width: 380px) {
    .code { gap: 5px; }
    .code__box { width: 36px; height: 48px; font-size: 19px; }
  }
}

@layer components {
  /* Sign-in primary button (btn btn--lg btn--primary btn--block + auth__primary) */
  .auth__primary { margin-top: 32px; gap: 10px; }
  .auth__primary:disabled { opacity: .4; cursor: default; }
  .auth__field + .auth__primary { margin-top: 20px; }
  .code-help + .auth__primary, .code-error + .auth__primary, .auth__note--checks + .auth__primary { margin-top: 24px; }
  @media (min-width: 600px) and (max-width: 1099px) {
    .auth__primary { margin-top: 28px; }
    .auth__note--checks + .auth__primary { margin-top: 22px; }
  }
  @media (min-width: 1100px) { .auth__primary--focus:not(:disabled) { box-shadow: var(--as-focus); } }
  @media (max-width: 599px) { .auth--hero .auth__primary { margin-top: 0; } }
}

@layer components {
  /* Notification rules (Onboarding → Allow notifications): grouped list with switches. */
  .rules { margin-top: 20px; background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 16px; overflow: hidden; }
  .rules__row { display: flex; align-items: center; gap: 12px; padding: 0 16px; min-height: 54px; }
  .rules__row + .rules__row { border-top: 1px solid var(--as-border); }
  .rules__text { flex: 1; min-width: 0; padding-block: 8px; }
  .rules__title { font-size: 15px; }
  .rules__sub { font-size: 12.5px; color: var(--as-ink-3); }
  .rules-note { margin-top: 12px; display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--as-ink-3); }
  .rules-actions .auth__primary { margin-top: 24px; }
  .rules-warn { margin-top: 20px; padding: 12px 14px; border-radius: 12px; background: var(--as-warn-bg); color: var(--as-ink-2); }
  .rules-devices { margin-top: 12px; text-align: center; }
  @media (max-width: 599px) {
    .auth--canvas { background: var(--as-canvas); }
    .rules { border: 0; margin-inline: -8px; }
    .auth--canvas .rules-actions { margin-top: auto; padding-top: 24px; }
    .auth--canvas .auth__card { display: flex; flex-direction: column; }
  }
}

@layer components {
  /* Larger segmented control (Quick Capture type switch: 34 px, 13.5 pt, inactive ink-3). */
  .segmented--lg .segmented__item { height: 34px; padding: 0 6px; min-width: 0; font-size: 13.5px; gap: 5px; color: var(--as-ink-3); }
  .segmented--lg .segmented__item[aria-checked="true"] { color: var(--as-ink); }

  /* ── Quick Capture sheet (Capture and Tasks → iPhone · Quick Capture sheet) ── */
  .capture__sheet { top: auto; min-height: 60dvh; }
  .capture__head { display: flex; align-items: center; padding: 10px 16px 0; }
  .capture__cancel { height: 44px; font-size: 15px; color: var(--as-ink-2); }
  .capture__title { margin: 0 auto; font-size: 16px; font-weight: 700; }
  .capture__save { height: 36px; padding: 0 16px; border-radius: 18px; background: var(--as-ink); color: var(--as-surface); font-size: 15px; font-weight: 700; }
  .capture__save:disabled { opacity: .4; }
  .capture__types { padding: 14px 16px 0; }
  .capture__field { position: relative; margin: 18px 20px 0; }
  .capture__input, .capture__mirror {
    font: inherit; font-size: 21px; line-height: 1.4; padding: 0; margin: 0; border: 0;
    white-space: pre-wrap; overflow-wrap: break-word; letter-spacing: normal;
  }
  .capture__input {
    position: relative; width: 100%; min-height: 60px; resize: none; background: transparent; outline: none;
    color: transparent; caret-color: var(--as-work);
  }
  .capture__input::placeholder { color: var(--as-ink-4); }
  .capture__mirror { position: absolute; inset: 0; color: var(--as-ink); pointer-events: none; }
  .capture__mirror mark { background: none; color: inherit; }
  .capture__mirror .hl-repeat, .capture__mirror .hl-date, .capture__mirror .hl-time, .capture__mirror .hl-duration { background: var(--as-surface-3); border-radius: 4px; }
  .capture__mirror .hl-context-personal { color: var(--as-personal); font-weight: 600; }
  .capture__mirror .hl-context-work { color: var(--as-work); font-weight: 600; }
  .capture__mirror .hl-priority { color: var(--as-crit); font-weight: 600; }
  .capture__mirror .hl-area { color: var(--as-ink-2); font-weight: 600; }
  .capture__mirror .hl-person { color: var(--as-work); font-weight: 600; }
  .capture__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 0; min-height: 50px; }
  .capture__note { padding: 14px 20px 0; font-size: 13px; color: var(--as-ink-3); display: flex; align-items: center; gap: 6px; }
  .capture__error { padding: 10px 20px 0; font-size: 13px; color: var(--as-crit); }
  /* A "done" capture that matched several things: tick which (ui/js/capture.js choose()). */
  .capture__error:has(.capture__choices) { color: var(--as-ink); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .capture__choices { flex-basis: 100%; display: grid; gap: 6px; margin: 4px 0; }
  .capture__choice { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--as-surface-2); color: var(--as-ink-2); cursor: pointer; }
  .capture__choice input { margin-top: 2px; }
  .capture__offline {
    margin: 14px 16px 0; padding: 10px 12px; border-radius: 10px; background: var(--as-surface-2); border: 1px dashed var(--as-border-2);
    display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--as-ink-2);
  }
  .capture__hint { margin-top: auto; padding: 16px 20px 18px; font-size: 13px; color: var(--as-ink-3); }

  /* Toasts float above the tab bar (phone) or bottom-centre (desktop). */
  .toast-host {
    position: fixed; left: 16px; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 60;
    display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
  }
  .toast-host .toast { width: 100%; max-width: 420px; pointer-events: auto; animation: mh-toast-in var(--as-dur-2) var(--as-ease); }
  @keyframes mh-toast-in { from { transform: translateY(8px); opacity: 0; } }

  @media (min-width: 600px) {
    .capture__sheet {
      left: 50%; right: auto; bottom: auto; top: 12vh; width: 560px; max-width: calc(100vw - 32px); min-height: 0;
      transform: translateX(-50%); border-radius: var(--as-r-xl); padding-bottom: 0; animation: none;
    }
    .capture__sheet .sheet__grabber { display: none; }
    .toast-host { bottom: 24px; }
  }
}

@layer components {
  /* Text-style button ("Select", "Add") */
  .link { font-size: 13px; font-weight: 600; color: var(--as-ink-2); background: none; border: 0; padding: 0; cursor: pointer; }
  .link:hover { color: var(--as-ink); }

  /* Compact inline field (task detail, bulk bar) */
  .field-inline {
    height: 30px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--as-border); background: var(--as-surface);
    font-size: 13.5px; font-weight: 600; color: var(--as-ink);
  }
  .field-inline:focus { outline: none; border-color: var(--as-work); box-shadow: var(--as-focus); }

  .nav-item__count { margin-left: auto; font-size: 12px; color: var(--as-ink-3); }
  .nav-item[aria-current="page"] .nav-item__count { color: var(--as-ink); }

  /* ── Tasks (Capture and Tasks → Desktop · Tasks) ───────────────────── */
  .task-row {
    display: flex; gap: 12px; align-items: center; min-height: 44px; border-bottom: 1px solid var(--as-border);
    padding: 0 10px; margin: 0 -10px; border-radius: 6px;
  }
  .task-row.is-selected { background: var(--as-work-tint); }
  .task-row--followup { color: var(--as-ink-2); text-decoration: none; }   /* 9.21: mail waiting for an answer, in Tasks › Waiting */
  .task-row__pick { display: none; width: 16px; height: 16px; flex: none; accent-color: var(--as-ink); }
  .task-row .check { margin-top: 0; }
  .task-row__title { flex: 1; min-width: 0; font-size: 14px; color: var(--as-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .task-row.is-done .task-row__title { color: var(--as-ink-3); text-decoration: line-through; }
  .task-row__meta { font-size: 12px; color: var(--as-ink-3); display: flex; align-items: center; gap: 4px; white-space: nowrap; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }
  .task-row__due { font-size: 12px; font-weight: 600; width: 80px; text-align: right; color: var(--as-ink-2); flex: none; white-space: nowrap; }
  .task-row__due.is-late { color: var(--as-crit); }
  .task-row__due.is-soon { color: var(--as-warn); }
  .tasks.is-picking .task-row__pick { display: block; }

  .tasks__group { display: flex; align-items: center; gap: 8px; padding: 14px 0 6px; font-size: 12px; font-weight: 700; color: var(--as-ink-3); letter-spacing: .04em; }
  .tasks__group:first-child { padding-top: 6px; }
  .tasks__group .area-dot { width: 8px; height: 8px; }
  .tasks__group.is-late { color: var(--as-crit); }
  .tasks__empty { padding: 32px 0; color: var(--as-ink-3); font-size: 14px; }

  /* Inline natural-language entry */
  .quick-add { margin: 0 28px; border: 1px solid var(--as-border); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
  .quick-add:focus-within { border-color: var(--as-work); box-shadow: var(--as-focus); }
  .quick-add__line { display: flex; align-items: center; gap: 10px; color: var(--as-ink-3); }
  .quick-add__input { flex: 1; min-width: 0; border: 0; outline: none; background: none; font-size: 15px; color: var(--as-ink); }
  .quick-add__chips { display: flex; gap: 6px; padding-left: 26px; flex-wrap: wrap; align-items: center; }
  .quick-add__save { margin-left: auto; font-size: 11.5px; color: var(--as-ink-3); font-family: var(--as-mono); }

  /* Detail */
  .task-detail { background: var(--as-surface); display: flex; flex-direction: column; padding: 20px 22px; gap: 14px; overflow-y: auto; border-left: 1px solid var(--as-border); }
  .task-detail--empty { align-items: center; justify-content: center; color: var(--as-ink-3); font-size: 14px; }
  .task-detail__top { display: flex; align-items: center; gap: 8px; }
  .task-detail__back { display: none; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--as-ink-2); }
  .task-detail__form { display: flex; flex-direction: column; gap: 14px; }
  .task-detail__head { display: flex; gap: 12px; align-items: flex-start; }
  .task-detail__head .check { width: 22px; height: 22px; border-radius: 6px; border-width: 2px; margin-top: 3px; }
  .task-detail__title { flex: 1; border: 0; resize: none; background: none; font: inherit; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--as-ink); padding: 0; field-sizing: content; }
  .task-detail__title:focus { outline: none; box-shadow: inset 0 -2px 0 var(--as-work); }
  .task-detail__grid { display: grid; grid-template-columns: 110px 1fr; row-gap: 10px; font-size: 13.5px; align-items: center; margin: 0; }
  .task-detail__grid dt { color: var(--as-ink-3); }
  .task-detail__grid dd { margin: 0; font-weight: 600; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
  .task-detail__notes { padding: 12px 14px; border-radius: 10px; background: var(--as-surface-2); border: 1px solid transparent; font: inherit; font-size: 13.5px; line-height: 1.5; color: var(--as-ink-2); resize: vertical; }
  .task-detail__notes:focus { outline: none; border-color: var(--as-work); }
  .task-detail__foot { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--as-ink-3); }

  /* Board / matrix */
  .board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 16px; overflow-x: auto; }
  .board__col, .matrix__cell { background: var(--as-surface-2); border-radius: 12px; padding: 8px 12px 12px; min-height: 200px; }
  .board__col .task-row, .matrix__cell .task-row { margin: 0; padding: 0 4px; }
  .board__head { font-size: 12px; font-weight: 700; color: var(--as-ink-3); letter-spacing: .04em; padding: 6px 0 8px; text-transform: uppercase; }
  .board .task-row__meta, .matrix .task-row__meta { display: none; }
  .matrix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .matrix__cell--do-now { box-shadow: inset 3px 0 0 var(--as-crit); }
  .matrix__cell--schedule { box-shadow: inset 3px 0 0 var(--as-work); }

  /* Bulk selection bar */
  .bulk-bar {
    position: sticky; bottom: 16px; margin: 16px 28px 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: 12px; background: var(--as-surface); border: 1px solid var(--as-border); box-shadow: var(--as-shadow-lg);
  }
  .bulk-bar__count { font-size: 13px; font-weight: 700; margin-right: 6px; }
}

@layer components {
  /* Tasks: one pane at a time below 1100 px (list, or the detail with a Back link). */
  .task-detail__grid dd { flex-wrap: nowrap; }
  .task-detail__grid input[type="time"] { width: 112px; }
  @media (max-width: 1099px) {
    .tasks > .task-detail { display: none; }
    .tasks.has-detail > .task-detail { display: flex; border-left: 0; }
    .task-detail__back { display: inline-flex; }
    .task-detail__top .kbd { display: none; }
  }
  @media (max-width: 599px) {
    .task-detail { padding: 12px 16px 24px; }
    .task-detail__grid { grid-template-columns: 84px minmax(0, 1fr); }
    .task-detail__grid dd { flex-wrap: wrap; }
    .task-detail__grid .segmented--sm .segmented__item { padding: 0 8px; }
    .tasks__sync, .tasks__head .page-head__meta, .task-row__meta { display: none; }
  }
}

@layer components {
  .icon-btn--sm { width: 30px; height: 30px; border-radius: 8px; }
  .count--muted { background: var(--as-surface-3); color: var(--as-ink-2); }

  /* ── Plan (docs/design/Plan.dc.html) ───────────────────────────────── */
  .plan__head { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--as-border); flex-wrap: wrap; }
  .plan__title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
  .plan__nav { display: flex; gap: 2px; }
  .plan__workday { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--as-ink-2); }
  .plan__workday .field-inline { width: 124px; }

  .plan-grid { display: grid; grid-template-columns: 52px repeat(var(--days), minmax(0, 1fr)); grid-template-rows: auto auto minmax(0, 1fr); flex: 1; min-height: 0; }
  .plan-grid__corner { border-bottom: 1px solid var(--as-border); }
  .plan-grid__allday-label { font-size: 11px; color: var(--as-ink-3); text-align: right; padding: 8px 8px 0 0; }
  .plan-grid__day-head { display: flex; align-items: baseline; gap: 6px; padding: 8px 10px; border-left: 1px solid var(--as-border); border-bottom: 1px solid var(--as-border); }
  .plan-grid__dow { font-size: 11px; font-weight: 700; color: var(--as-ink-3); letter-spacing: .05em; }
  .plan-grid__dom { font-size: 20px; font-weight: 700; line-height: 1; }
  .plan-grid__day-head.is-today .plan-grid__dom { color: var(--as-surface); background: var(--as-ink); border-radius: 999px; padding: 4px 8px; font-size: 16px; }
  .plan-grid__day-head.is-over { box-shadow: inset 0 -3px 0 var(--as-warn); }
  .plan-grid__over { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--as-warn); }
  .plan-grid__allday { display: flex; flex-direction: column; gap: 3px; padding: 4px; min-height: 30px; border-left: 1px solid var(--as-border); border-bottom: 1px solid var(--as-border); }
  .plan-chip {
    font-size: 11.5px; font-weight: 600; padding: 2px 6px; border-radius: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
    background: var(--block-bg, var(--as-surface-3)); color: var(--block-fg, var(--as-ink-2));
  }
  .plan-grid__scroll { grid-column: 1 / -1; display: grid; grid-template-columns: 52px repeat(var(--days), minmax(0, 1fr)); overflow-y: auto; min-height: 0; padding-top: 8px; }
  .plan-block > .block__icon:first-child { display: none; }   /* the grid shows no task icon (design) */
  .plan-grid__hours { position: relative; height: calc(var(--hour) * 13); }
  .plan-grid__hour { position: absolute; top: calc(var(--i) * var(--hour) - 7px); right: 8px; font-size: 11px; font-family: var(--as-mono); color: var(--as-ink-3); }
  .plan-grid__col {
    position: relative; height: calc(var(--hour) * 13); border-left: 1px solid var(--as-border);
    background-image:
      repeating-linear-gradient(to bottom, transparent 0 calc(var(--hour) - 1px), var(--as-border) calc(var(--hour) - 1px) var(--hour)),
      linear-gradient(to bottom, var(--as-surface-2) 0 var(--ws), var(--as-surface) var(--ws) var(--we), var(--as-surface-2) var(--we));
  }
  .plan-grid__col.is-drop { outline: 2px solid var(--as-work); outline-offset: -2px; }
  .plan-grid__now { position: absolute; left: 0; right: 0; top: var(--now); height: 2px; background: var(--as-crit); z-index: 3; }
  .plan-block {
    position: absolute; top: var(--top); height: var(--h); margin: 0;
    left: calc(3px + (100% - 6px) * var(--lane) / var(--lanes)); width: calc((100% - 6px) / var(--lanes) - 2px);
    padding: 4px 6px; gap: 6px; overflow: hidden; border-radius: 7px; z-index: 1;
  }
  .plan-block .block__title { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .plan-block .block__time { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .plan-block.is-short { padding-block: 1px; }
  .plan-block.is-short .block__time { display: none; }
  .plan-block[draggable="true"] { cursor: grab; }
  .plan-block .block__aside, .plan-block__pin { background: none; border: 0; cursor: pointer; padding: 0; }
  .plan-block__pin { opacity: .45; }
  .plan-block__pin.is-on { opacity: 1; color: var(--as-ink); }
  .plan-block.block--protected { z-index: 0; }
  .plan-ghost { position: absolute; left: 3px; right: 3px; border-radius: 7px; border: 2px solid var(--as-work); background: var(--as-work-tint); z-index: 4; pointer-events: none; font-size: 11px; font-family: var(--as-mono); font-weight: 700; color: var(--as-work); padding: 2px 6px; }

  .plan__tray { background: var(--as-surface-2); border-left: 1px solid var(--as-border); padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
  .plan__tray-head { display: flex; align-items: center; gap: 8px; }
  .plan__hint { margin-left: auto; font-size: 12px; color: var(--as-ink-3); }
  .plan__tray-list { display: flex; flex-direction: column; gap: 8px; }
  .tray-task { background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 10px; padding: 10px 12px; cursor: grab; display: flex; flex-direction: column; gap: 2px; }
  .tray-task:focus-visible, .tray-task.is-placing { border-color: var(--as-work); box-shadow: var(--as-focus); }
  .tray-task__title { font-size: 13.5px; font-weight: 600; }
  .tray-task__meta { font-size: 12px; color: var(--as-ink-3); }
  .plan__empty { font-size: 13px; color: var(--as-ink-3); line-height: 1.45; }
  .plan__overdue { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--as-ink-2); font-weight: 600; }
  .plan-proposal { display: flex; flex-direction: column; gap: 8px; }
  .plan-proposal__title { font-size: 13.5px; font-weight: 600; line-height: 1.4; }
  .plan-proposal__why { font-size: 12.5px; color: var(--as-ink-3); line-height: 1.4; }
  .plan__legend { margin-top: auto; display: grid; gap: 6px; font-size: 12px; color: var(--as-ink-2); }
  .plan__legend span { display: flex; align-items: center; gap: 8px; }
  .legend-swatch { width: 14px; height: 10px; border-radius: 3px; flex: none; }
  .legend-swatch--meeting { background: var(--cal-1-bg); box-shadow: inset 3px 0 0 var(--cal-1); }
  .legend-swatch--block { background: var(--as-surface); border: 1px solid var(--as-border-2); }
  .legend-swatch--proposed { border: 1.5px dashed var(--as-ghost-border); background: var(--as-ghost-bg); }
  .legend-swatch--protected { background: var(--as-surface-3); }
  .legend-swatch--outside { background: var(--as-surface-2); border: 1px solid var(--as-border); }

  .plan-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); flex: 1; }
  .plan-month__dow { font-size: 11px; font-weight: 700; color: var(--as-ink-3); padding: 8px 10px; border-bottom: 1px solid var(--as-border); text-transform: uppercase; }
  .plan-month__day { min-height: 92px; padding: 8px 10px; border-left: 1px solid var(--as-border); border-bottom: 1px solid var(--as-border); display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--as-ink); }
  .plan-month__day.is-other { color: var(--as-ink-4); }
  .plan-month__day.is-today > span:first-child { color: var(--as-surface); background: var(--as-ink); border-radius: 999px; padding: 2px 7px; align-self: flex-start; }
  .plan-month__count { font-size: 11.5px; font-weight: 600; color: var(--as-ink-3); }
  .plan-agenda { padding: 8px 24px 24px; overflow-y: auto; }
  .plan-agenda__row { display: flex; align-items: center; gap: 12px; min-height: 40px; border-bottom: 1px solid var(--as-border); font-size: 14px; }
  .plan-agenda__time { width: 104px; font-size: 12px; color: var(--as-ink-2); flex: none; }
  .plan-agenda__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .plan__phone-bar, .plan-slots { display: none; }
  .plan-slots__body { padding: 8px 16px 24px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
  .plan-slots__title { font-size: 17px; font-weight: 700; }
  .plan-slots__task { display: flex; flex-direction: column; gap: 8px; }

  @media (max-width: 1099px) {
    .plan__tray { display: none; }
  }
  @media (max-width: 599px) {
    .plan__head { padding: 8px 16px; gap: 8px; }
    .plan__title { font-size: 18px; }
    .plan__workday span:first-child { display: none; }
    .plan-grid__scroll { padding-bottom: 140px; }
    .plan__phone-bar {
      display: flex; align-items: center; gap: 12px; position: fixed; left: 16px; right: 92px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 30;
      padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--as-surface); border: 1px solid var(--as-border); box-shadow: var(--as-shadow-md);
      font-size: 13.5px; font-weight: 600; justify-content: space-between;
    }
    .plan-slots:not([hidden]) { display: block; }
  }

  /* ── Today (docs/design/Today.dc.html, design update 6) ───────────── */
  .today {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px 22px; padding: 24px 32px; align-items: start;
  }
  .today__head { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(340px, max-content) minmax(0, 1fr); gap: 28px; align-items: end; }
  .today .clear-day__done { grid-column: 1 / -1; }
  .today__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .today .mono { font-family: var(--as-mono); }
  .today__date { font-size: 13px; font-weight: 600; color: var(--as-ink-3); display: flex; align-items: center; gap: 6px; }
  .today__sun { color: var(--as-warn); }
  .today__hello { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
  .today__summary { font-size: 15px; color: var(--as-ink-2); line-height: 1.45; margin: 6px 0 0; }
  .today-card { background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .today .today-narrow { display: none; }
  .today-label { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--as-ink-3); letter-spacing: .04em; text-transform: uppercase; }
  .today-label .badge { text-transform: none; letter-spacing: 0; }
  .today-empty { font-size: 13px; color: var(--as-ink-3); line-height: 1.45; margin: 0; padding: 4px 0; }
  .tone--cal-1 { background: var(--cal-1-bg); color: var(--cal-1); }
  .tone--cal-4 { background: var(--cal-4-bg); color: var(--cal-4); }
  .tone--cal-5 { background: var(--cal-5-bg); color: var(--cal-5); }
  .tone--cal-6 { background: var(--cal-6-bg); color: var(--cal-6); }
  .tone--cal-9 { background: var(--cal-9-bg); color: var(--cal-9); }
  .tone--cal-11 { background: var(--cal-11-bg); color: var(--cal-11); }
  .tone--warn { background: var(--as-warn-bg); color: var(--as-warn); }

  /* Day strip, 07–21 */
  .day-strip { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .day-strip__bar { position: relative; height: 30px; border-radius: 6px; background: var(--as-surface-3); }
  .day-strip__work { position: absolute; left: var(--l); width: var(--w); top: 0; bottom: 0; border-radius: 4px; background: repeating-linear-gradient(135deg, transparent, transparent 4px, var(--as-surface-2) 4px, var(--as-surface-2) 5px); }
  .day-strip__seg { position: absolute; left: var(--l); width: var(--w); top: 0; height: 100%; border-radius: 4px; background: var(--block-fg, var(--cal-1)); overflow: hidden; }
  .day-strip__seg--block { background: var(--as-ink-2); }
  .day-strip__seg--protected { background: var(--as-border-2); }
  .day-strip__seg--proposed { background: var(--as-ghost-bg); border: 1.5px dashed var(--as-ghost-border); }
  .day-strip__seg--clash { top: -8px; height: 4px; border-radius: 2px; background: var(--as-crit); overflow: visible; }
  .day-strip__label { position: absolute; left: 6px; top: 7px; max-width: calc(100% - 10px); font-size: 11px; font-weight: 700; color: var(--as-on-badge); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .day-strip__seg--proposed .day-strip__label { top: 5.5px; color: var(--as-ink-2); }
  .day-strip__now { position: absolute; left: var(--l); top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--as-brand); }
  .day-strip__now::before { content: ""; position: absolute; left: -3px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--as-brand); }
  .day-strip__hours { position: relative; height: 14px; }
  .day-strip__hours > span { position: absolute; left: var(--l); transform: translateX(-50%); font-family: var(--as-mono); font-size: 10.5px; color: var(--as-ink-3); }

  /* Brief + count tiles */
  .today-brief { gap: 14px; }
  .today-brief__text { font-size: 16.5px; line-height: 1.5; text-wrap: pretty; margin: 0; }
  .today-brief__text b { font-weight: 700; }
  .today-tiles { display: flex; gap: 10px; }
  .today-tile { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: var(--as-surface-2); color: var(--as-ink); }
  .today-tile:hover { background: var(--as-surface-3); }
  .today-tile__icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: none; }
  .today-tile__icon--lg { width: 32px; height: 32px; border-radius: 9px; }
  .today-tile__n { font-size: 22px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
  .today-tile__label { font-size: 12px; line-height: 1.25; color: var(--as-ink-3); font-weight: 600; }
  .today-brief__sub { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--as-ink-3); }
  .today-brief__sub > span { display: flex; align-items: center; gap: 5px; }
  .today-brief__sub > .is-warn { color: var(--as-warn); }
  .today-brief__what { text-decoration: underline; margin-left: 2px; }

  /* Next: countdown ring */
  .today-next { flex-direction: row; align-items: center; gap: 16px; }
  .today-ring { position: relative; width: 68px; height: 68px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: conic-gradient(var(--cal-1) 0 var(--p), var(--as-surface-3) var(--p) 100%); }
  .today-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--as-surface); }
  .today-ring__in { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
  .today-ring__in b { font-size: 15px; font-weight: 700; }
  .today-ring__in span { font-size: 9.5px; font-weight: 700; color: var(--as-ink-3); }
  .today-next__main { flex: 1; min-width: 0; }
  .today-next__label { font-size: 11.5px; font-weight: 700; color: var(--as-ink-3); letter-spacing: .04em; display: flex; align-items: center; gap: 4px; }
  .today-next__ctx { margin-left: auto; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--as-work); letter-spacing: 0; }
  .today-next__title { font-size: 18px; font-weight: 700; margin-top: 2px; }
  .today-next__meta { font-size: 13px; color: var(--as-ink-3); display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; margin-top: 3px; }
  .today-next__meta > span { display: flex; align-items: center; gap: 4px; }
  .today-faces { display: flex; }
  .today-faces i { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; font-style: normal; box-shadow: 0 0 0 2px var(--as-surface); }
  .today-faces i + i { margin-left: -5px; }
  .today-next__actions { display: flex; gap: 8px; }
  .today-next__actions .btn { height: 38px; padding: 0 14px; border-radius: 9px; font-size: 13.5px; }
  .ctx-dot { width: 7px; height: 7px; border-radius: 2px; flex: none; background: var(--as-work); }
  .ctx-dot--personal { border-radius: 50%; background: var(--as-personal); }

  /* Needs you: 2×2 grid */
  .today-needs__keys { font-size: 11px; color: var(--as-ink-3); letter-spacing: 0; }
  .today-needs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .today-need { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; background: var(--as-surface-2); color: var(--as-ink); min-width: 0; }
  .today-need:hover { background: var(--as-surface-3); }
  .today-need__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .today-need__title { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .today-need__sub { font-size: 12px; color: var(--as-ink-3); margin-top: 2px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .today-need__chev { color: var(--as-ink-3); }

  /* Suggestion (dashed ghost card) */
  .today__suggestions { display: flex; flex-direction: column; gap: 12px; }
  .today-suggestion { border: 1.5px dashed var(--as-ghost-border); border-radius: 14px; padding: 12px 14px; background: var(--as-ghost-bg); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  .today-suggestion__main { flex: 1; min-width: 200px; }
  .today-suggestion__title { font-size: 14.5px; font-weight: 600; }
  .today-suggestion__why { font-size: 12.5px; color: var(--as-ink-3); margin-top: 3px; }
  .today-suggestion__actions { display: flex; gap: 8px; }
  .today-suggestion__actions .btn { height: 36px; font-size: 13.5px; border-radius: 9px; }

  /* Workload + timeline (one card) */
  .today-plan__head { display: flex; align-items: center; gap: 8px; }
  .today-plan__icon { color: var(--as-ink-2); }
  .today-plan__title { font-size: 15px; font-weight: 700; margin: 0; }
  .today-plan__head .badge { display: inline-flex; align-items: center; gap: 4px; }
  .today-plan__bar { display: flex; gap: 2px; height: 10px; border-radius: 5px; overflow: hidden; background: var(--as-surface-3); }
  .today-plan__seg--meetings { width: var(--m, 0%); background: var(--cal-1); }
  .today-plan__seg--tasks    { width: var(--t, 0%); background: var(--as-ink-2); }
  .today-plan__seg--over     { width: var(--o, 0%); background: repeating-linear-gradient(135deg, var(--as-warn), var(--as-warn) 3px, var(--as-warn-bg) 3px, var(--as-warn-bg) 6px); }
  .today-plan__legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--as-ink-2); }
  .today-plan__legend > span { display: flex; align-items: center; gap: 6px; }
  .today-plan__key { width: 9px; height: 9px; border-radius: 3px; }
  .today-plan__key--meetings { background: var(--cal-1); }
  .today-plan__key--tasks { background: var(--as-ink-2); }
  .today-plan__key--over { background: var(--as-warn); }
  .today-plan__actions { display: flex; gap: 8px; }
  .today-plan__actions .btn { height: 36px; font-size: 13.5px; border-radius: 9px; }

  .tl { display: grid; grid-template-columns: 44px 1fr; row-gap: 5px; column-gap: 8px; margin-top: 4px; }
  .tl__time { font-size: 11.5px; font-family: var(--as-mono); color: var(--as-ink-3); text-align: right; padding-top: 7px; }
  .tl__time--small { padding-top: 4px; }
  .tl__item { padding: 6px 10px; border-radius: 7px; font-size: 13.5px; font-weight: 600; color: var(--as-ink); display: flex; align-items: center; gap: 7px; min-width: 0; }
  .tl__title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tl__meta { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 400; color: var(--as-ink-2); white-space: nowrap; }
  .tl__icon { flex: none; color: var(--as-ink-3); }
  .tl__item--meeting { background: var(--block-bg, var(--cal-1-bg)); border-left: 3px solid var(--block-fg, var(--cal-1)); }
  .tl__item--meeting .tl__icon { color: var(--block-fg, var(--cal-1)); }
  .tl__item--task { border: 1px solid var(--as-border-2); }
  .tl__aside { margin-left: auto; font-weight: 400; color: var(--as-ink-3); font-size: 12px; }
  .tl__pin { color: var(--as-ink-2); }
  .tl__item--clash { background: var(--as-crit-bg); border-left: 3px solid var(--as-crit); }
  .tl__item--clash .tl__icon { color: var(--as-crit); }
  .tl__item--clash .tl__title { flex: 0 0 auto; max-width: 55%; }
  .tl__clash { margin-left: auto; min-width: 0; font-size: 11.5px; font-weight: 700; color: var(--as-crit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tl__item--proposed { background: var(--as-ghost-bg); border: 1.5px dashed var(--as-ghost-border); color: var(--as-ink-2); }
  .tl__item--proposed .tl__icon { color: var(--as-ink-2); }
  .tl__item--proposed .tl__meta { font-size: 12px; color: var(--as-ink-3); }
  .tl__accept { font-size: 12px; font-weight: 700; color: var(--as-ink); }
  .tl__item--protected { padding: 4px 10px; background: var(--as-surface-2); font-size: 12.5px; font-weight: 400; color: var(--as-ink-3); gap: 6px; }
  .tl__item--free { padding: 5px 10px; font-size: 12.5px; font-weight: 400; color: var(--as-ink-3); gap: 6px; background: repeating-linear-gradient(135deg, transparent, transparent 5px, var(--as-surface-3) 5px, var(--as-surface-3) 6px); }

  /* Top 3 · Done for you */
  .today-top__body, .today-done__body { display: flex; flex-direction: column; gap: 10px; }
  .today-top__row { display: flex; gap: 10px; align-items: center; font-size: 14px; }
  .today-top__row.is-done .today-top__text { color: var(--as-ink-3); text-decoration: line-through; }
  .today-top__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
  .today-top__aside { font-size: 12px; color: var(--as-ink-3); }
  .today-done__log { font-size: 12.5px; font-weight: 600; color: var(--as-ink-3); text-transform: none; letter-spacing: 0; }
  .today-done__row { display: flex; gap: 10px; align-items: center; font-size: 13.5px; }
  .today-done__icon { color: var(--as-ink-3); }
  .today-done__text { flex: 1; min-width: 0; }
  .today-done__meta { color: var(--as-ink-3); }
  .today-done__undo { display: flex; gap: 4px; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--as-ink-2); min-height: 28px; }

  /* Evening · Close the day */
  .today--evening { grid-template-columns: minmax(0, 560px); justify-content: center; }
  .today--evening .today__head { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; }
  .today-ring--done { width: 76px; height: 76px; background: conic-gradient(var(--as-pos) 0 var(--p), var(--as-surface-3) var(--p) 100%); }
  .today-ring--done .today-ring__in b { font-size: 18px; }
  .today-group { padding: 14px 16px; gap: 8px; }
  .today-group__row { display: flex; gap: 12px; align-items: center; min-height: 30px; }
  .today-group__check { width: 20px; height: 20px; margin-top: 0; }
  .today-group__done { font-size: 14.5px; color: var(--as-ink-2); }
  .today-group__icon { width: 32px; height: 32px; border-radius: 9px; background: var(--as-surface-3); color: var(--as-ink-2); display: flex; align-items: center; justify-content: center; flex: none; }
  .today-group__main { flex: 1; min-width: 0; }
  .today-group__title { font-size: 14.5px; }
  .today-group__meta { font-size: 12px; color: var(--as-ink-3); }
  .today-group__move { border: 1.5px dashed var(--as-ghost-border); }
  .today-group__more { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--as-ink-3); margin: 0; }
  .today-group__foot { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--as-ink-3); margin: 0; }
  .today-group .day-strip__hours { display: none; }
  .today__close-note { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--as-ink-3); margin: 0; }
  .today__switch { text-align: center; font-size: 13px; font-weight: 600; color: var(--as-ink-3); }

  /* Sidebar sync rows */
  .sync-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--as-ink-3); }
  .sync-row__at { margin-left: auto; font-family: var(--as-mono); font-size: 11px; }
  .sync-row--stale { color: var(--as-ink-2); }

  @media (max-width: 1099px) {
    .today { grid-template-columns: minmax(0, 1fr); padding: 20px 24px; }
    .today__head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  }
  /* Phone: brief (with the strip), next, needs you; then workload, timeline, top 3, done for you. */
  @media (max-width: 599px) {
    .today { display: flex; flex-direction: column; align-items: stretch; gap: 12px; padding: 4px 16px 24px; }
    .today__col { display: contents; }
    .today .today-wide { display: none; }
    .today .today-narrow { display: inline; }
    .today .day-strip.today-narrow, .today .today-plan__fixform.today-narrow { display: flex; }
    .today .tl__item.today-narrow { display: flex; }
    .today .tl__time.today-narrow { display: block; }
    .today__head { order: 0; padding: 0 4px; display: block; }
    .today .clear-day__done { order: 1; }
    .today--evening .today__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .tl__item--clash { flex-wrap: wrap; row-gap: 0; }
    .tl__item--clash .tl__title { max-width: none; flex: 1 1 auto; }
    .tl__clash { margin-left: 0; flex-basis: 100%; padding-left: 21px; }
    .today__hello { font-size: 32px; line-height: 1.15; }
    .today-card { border: 0; border-radius: 16px; box-shadow: var(--as-shadow-sm); }
    .today-brief { order: 2; }
    .today-brief__text { font-size: 16px; color: var(--as-ink-2); }
    .today-tiles { gap: 8px; }
    .today-tile--wide { display: none; }
    .today-tile__label { font-size: 11.5px; }
    .today-next { order: 3; flex-wrap: wrap; gap: 12px; }
    .today-next__ctx { display: inline-flex; }
    .today-next__title { font-size: 17px; }
    .today-next__actions { flex-basis: 100%; }
    .today-next__actions .btn { flex: 1; height: 44px; border-radius: 10px; font-size: 15px; }
    .today-needs { order: 4; background: none; box-shadow: none; padding: 0; gap: 12px; }
    .today-needs .today-label { font-size: 20px; text-transform: none; letter-spacing: 0; color: var(--as-ink); padding: 6px 4px 0; }
    .today-needs__count { font-size: 14px; color: var(--as-ink-3); }
    .today-needs__grid { grid-template-columns: 1fr; gap: 0; background: var(--as-surface); border-radius: 16px; box-shadow: var(--as-shadow-sm); overflow: hidden; }
    .today-need { border-radius: 0; background: none; min-height: 60px; padding: 10px 16px; border-bottom: 1px solid var(--as-border); }
    .today-need:last-child { border-bottom: 0; }
    .today-need__title { font-size: 15px; font-weight: 500; }
    .today__suggestions { order: 5; }
    .today-plan { order: 6; }
    .today-top { order: 7; }
    .today-done { order: 8; }
    .today-money { order: 9; }
    .tl__item { padding: 7px 10px; border-radius: 8px; font-size: 14px; }
  }

  /* ── Onboarding progress + Add to Home Screen (docs/design/Onboarding.dc.html) ── */
  .steps { display: flex; gap: 5px; }
  .steps__bar { flex: 1; height: 4px; border-radius: 2px; background: var(--as-border-2); }
  .steps__bar.is-done { background: var(--as-ink); }
  .steps__label { font-size: 13px; font-weight: 600; color: var(--as-ink-3); margin: 22px 0 0; }
  .steps__label + .auth__title { margin-top: 4px; }
  .a2hs {
    list-style: none; margin: 22px 0 0; padding: 16px; border-radius: 18px; background: var(--as-surface); border: 1px solid var(--as-border);
    display: flex; flex-direction: column; gap: 12px;
  }
  .a2hs__step { display: flex; gap: 12px; align-items: center; font-size: 15px; }
  .a2hs__step + .a2hs__step, .a2hs__sample + .a2hs__step { border-top: 1px solid var(--as-border); padding-top: 12px; }
  .a2hs__num {
    width: 30px; height: 30px; border-radius: 15px; background: var(--as-ink); color: var(--as-surface); flex: none;
    font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  }
  .a2hs__text { flex: 1; }
  .a2hs__share { width: 44px; height: 44px; border-radius: 10px; background: var(--as-surface-3); color: var(--as-work); display: flex; align-items: center; justify-content: center; }
  .a2hs__step img { display: block; flex: none; }
  .a2hs__sample {
    margin-left: 42px; border-radius: 12px; background: var(--as-surface-2); border: 1px solid var(--as-border);
    display: flex; align-items: center; gap: 10px; padding: 0 12px; height: 48px; font-size: 15px; box-shadow: 0 0 0 3px var(--as-work-tint);
  }
  .a2hs__sample > span:first-child { flex: 1; }
  .a2hs__plus { width: 26px; height: 26px; border-radius: 6px; border: 1.5px solid var(--as-ink-2); display: flex; align-items: center; justify-content: center; }
  .a2hs__foot { margin-top: 28px; display: flex; flex-direction: column; gap: 6px; }
  .a2hs__wait { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 13px; color: var(--as-ink-3); min-height: 24px; margin: 0; }
  .a2hs__wait--done { color: var(--as-pos); font-weight: 600; }

  /* ── Settings (docs/design/Settings.dc.html) ─────────────────────── */
  .dot--off { background: var(--as-border-2); }
  .set { padding: 0; min-height: 0; overflow-y: auto; }
  .set .mono { font-family: var(--as-mono); }
  .set-desk { display: block; }
  .set-home { display: none; }
  .set-back { display: none; }
  .set-page { padding: 32px 40px 40px; display: flex; flex-direction: column; gap: 18px; max-width: 900px; }
  .set-page__head { display: flex; align-items: flex-end; gap: 12px; }
  .set-page__title { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
  .set-page__sub { font-size: 13.5px; color: var(--as-ink-3); margin: 4px 0 0; line-height: 1.45; max-width: 640px; }

  /* Settings list column (desktop) */
  .set-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 2px; }
  .set-nav__title { font-size: 20px; font-weight: 700; padding: 0 10px 12px; margin: 0; }
  .set-search { height: 36px; border-radius: 9px; background: var(--as-surface-2); border: 1px solid var(--as-border); display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--as-ink-3); margin-bottom: 10px; }
  .set-search input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 13.5px; color: var(--as-ink); outline: none; }
  .set-nav__h { font-size: 11px; font-weight: 700; color: var(--as-ink-3); letter-spacing: .05em; padding: 14px 10px 4px; }
  .set-nav__row { display: flex; flex-direction: column; padding: 7px 10px; border-radius: 8px; color: var(--as-ink); }
  .set-nav__row[aria-current="page"] { background: var(--as-surface-3); }
  .set-nav__row.is-later { opacity: .55; }
  .set-nav__t { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
  .set-nav__flag { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--as-warn); }
  .set-nav__v { font-size: 12px; color: var(--as-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Status: healthy card · problem card · sources */
  .set-health, .set-problem { background: var(--as-surface); border-radius: 16px; box-shadow: var(--as-shadow-sm); overflow: hidden; }
  .set-health__top { padding: 16px; display: flex; gap: 12px; align-items: center; border-bottom: 1px solid var(--as-border); }
  .set-health__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--as-pos-bg); color: var(--as-pos); display: flex; align-items: center; justify-content: center; flex: none; }
  .set-health__title { font-size: 17px; font-weight: 700; }
  .set-health__sub { font-size: 13px; color: var(--as-ink-3); margin-top: 2px; }
  .set-health__more { height: 44px; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--as-ink-2); }
  .set-source { min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: 1px solid var(--as-border); }
  .set-source__main { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 6px 0; }
  .set-source__name { font-size: 15px; font-weight: 600; }
  .set-source__brings { font-size: 12.5px; color: var(--as-ink-3); }
  .set-source__state { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--as-pos); white-space: nowrap; }
  .set-source--warn .set-source__state { color: var(--as-warn); }
  .set-source--off .set-source__state { color: var(--as-ink-3); }
  .set-source__time { font-size: 12px; color: var(--as-ink-3); font-family: var(--as-mono); min-width: 52px; text-align: right; }
  .set-problem { border: 1.5px solid var(--as-warn-border); box-shadow: none; }
  .set-problem__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--as-warn-bg); }
  .set-problem__top { display: flex; gap: 12px; align-items: flex-start; }
  .set-problem__icon { width: 40px; height: 40px; border-radius: 12px; background: var(--as-surface); color: var(--as-warn); display: flex; align-items: center; justify-content: center; flex: none; }
  .set-problem__eyebrow { font-size: 12px; font-weight: 700; color: var(--as-warn); letter-spacing: .04em; }
  .set-problem__title { font-size: 17px; font-weight: 700; margin-top: 2px; }
  .set-problem__since { font-size: 13px; color: var(--as-ink-3); }
  .set-problem__text { font-size: 14.5px; line-height: 1.5; color: var(--as-ink-2); margin: 0; }
  .set-problem__next { display: flex; gap: 10px; padding: 12px; border-radius: 10px; background: var(--as-surface); font-size: 14.5px; font-weight: 600; line-height: 1.4; }
  .set-problem__next as-icon { color: var(--as-ink-2); margin-top: 1px; }
  .set-problem__actions { display: flex; gap: 8px; }
  .set-problem__actions .btn { flex: 1; }
  .set-problem__rest summary { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 16px; font-size: 14.5px; font-weight: 600; cursor: pointer; list-style: none; }
  .set-problem__rest summary::-webkit-details-marker { display: none; }
  .set-problem__rest summary span { flex: 1; }
  .set-problem__rest summary as-icon:first-child { color: var(--as-pos); }
  .set-alert { border: 1.5px solid var(--as-warn-border); background: var(--as-warn-bg); border-radius: 14px; padding: 18px 20px; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start; }
  .set-alert__main { display: flex; flex-direction: column; gap: 6px; }
  .set-alert__title { font-size: 18px; font-weight: 700; }
  .set-alert__text { font-size: 14.5px; color: var(--as-ink-2); line-height: 1.5; margin: 0; }
  .set-alert__next { font-size: 14.5px; font-weight: 600; margin: 4px 0 0; }

  /* Tables (status, calendars, lists, rules) */
  .set-table { background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 14px; overflow: hidden; }
  .set-table__head, .set-table__row { display: grid; grid-template-columns: 1.1fr 1.3fr 1fr 110px; gap: 12px; padding: 0 18px; align-items: center; }
  .set-table__head { height: 36px; font-size: 11.5px; font-weight: 700; color: var(--as-ink-3); letter-spacing: .05em; border-bottom: 1px solid var(--as-border); }
  .set-table__row { min-height: 44px; border-bottom: 1px solid var(--as-border); font-size: 14px; }
  .set-table__row:last-child { border-bottom: 0; }
  .set-table__row.is-dim { opacity: .6; }
  .set-table__name { font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
  .set-table__note { font-size: 12px; font-weight: 500; color: var(--as-ink-3); }
  .set-table__muted { color: var(--as-ink-3); font-size: 13.5px; }
  .set-table__time { text-align: right; font-family: var(--as-mono); font-size: 12.5px; color: var(--as-ink-3); }
  .set-table__r { text-align: right; justify-self: end; }
  .set-table__c { display: flex; align-items: center; justify-content: center; gap: 6px; }
  .set-table__intro { padding: 16px 18px 10px; }
  .set-table__intro--row { display: flex; align-items: center; padding-bottom: 8px; }
  .set-table--cal .set-table__head, .set-table--cal .set-table__row { grid-template-columns: 1.6fr 1fr 90px 90px; min-height: 48px; }
  .set-table--lists .set-table__row { grid-template-columns: 1.4fr 90px 1fr 90px; border-top: 1px solid var(--as-border); }
  .set-table--rules .set-table__row { grid-template-columns: 1.3fr 1fr 1fr 80px; min-height: 46px; border-top: 1px solid var(--as-border); }
  .set-table--rules .set-table__name { font-family: var(--as-mono); font-size: 13px; font-weight: 500; }
  .set-table--rules .set-list__note { padding: 4px 18px 16px; }
  /* Bulk clean-up (Mail rules): pick senders, then one action for all of them. */
  .set-table--pick .set-table__row { grid-template-columns: 28px 1.6fr 90px 110px; min-height: 46px; border-top: 1px solid var(--as-border); }
  .set-table--pick .set-table__name { font-weight: 600; font-size: 13.5px; }
  .set-table__pick { width: 18px; height: 18px; accent-color: var(--as-ink); }
  .set-table__label { display: contents; cursor: pointer; }
  .set-table__actions { display: flex; gap: 8px; align-items: center; padding: 12px 18px; border-top: 1px solid var(--as-border); flex-wrap: wrap; }
  .set-table--left .set-table__row { grid-template-columns: 1.6fr 1fr 1fr 80px; min-height: 46px; border-top: 1px solid var(--as-border); }
  .set-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--block-fg, var(--cal-1)); flex: none; }
  .set-check { width: 20px; height: 20px; accent-color: var(--as-ink); }
  .set-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--as-ink-3); margin: -6px 0 0; }
  .set-legend span { display: flex; align-items: center; gap: 4px; }

  /* Cards */
  .set-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .set-card { background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
  .set-card--row { flex-direction: row; align-items: center; gap: 14px; }
  .set-card__main { flex: 1; min-width: 0; }
  .set-card__h { font-size: 14.5px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
  .set-card__h--icon { font-size: 15px; }
  .set-card__text { font-size: 14px; color: var(--as-ink-2); line-height: 1.5; margin: 0; }
  .set-card__text b { color: var(--as-ink); }
  .set-card__note { font-size: 12.5px; color: var(--as-ink-3); line-height: 1.45; margin: 0; }
  .set-card__line { font-size: 13.5px; color: var(--as-ink-2); margin: 0; }
  .set-big { display: flex; align-items: baseline; gap: 6px; }
  .set-big__n { font-size: 26px; font-weight: 700; }
  .set-big__of { font-size: 14px; color: var(--as-ink-3); }
  .set-meter { flex: none; height: 8px; border-radius: 4px; background: var(--as-surface-3); position: relative; }
  .set-meter__fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--used, 0%); border-radius: 4px; background: var(--as-ink-2); }
  .set-meter__warn { position: absolute; left: 80%; top: -4px; bottom: -4px; width: 2px; background: var(--as-warn); }
  .set-perms { display: flex; gap: 14px; flex-wrap: wrap; }
  .set-perm { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--as-ink-3); }
  .set-perm--ok as-icon { color: var(--as-pos); }
  .set-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--as-ink-2); }
  .set-link--inline { display: inline; text-decoration: underline; }
  .set-tech summary { display: flex; align-items: center; gap: 6px; height: 36px; font-size: 13.5px; font-weight: 600; color: var(--as-ink-3); cursor: pointer; list-style: none; }
  .set-tech summary::-webkit-details-marker { display: none; }
  .set-dl { display: grid; grid-template-columns: 140px 1fr; gap: 4px 10px; font-size: 13px; margin: 0; }
  .set-dl dt { color: var(--as-ink-3); }
  .set-dl dd { margin: 0; }
  .set-ok { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--as-pos); margin: 0; }
  .set-warn { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--as-warn); margin: 0; }
  .set-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .set-never { height: 26px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--as-border-2); display: flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; }
  .set-cap { display: flex; align-items: center; gap: 10px; }
  .set-cap span:first-child { flex: 1; }
  .set-cap__n { font-size: 14px; padding: 5px 10px; border-radius: 8px; background: var(--as-surface-3); }
  .set-later { border: 1.5px dashed var(--as-ghost-border); border-radius: 14px; padding: 16px 18px; background: var(--as-ghost-bg); display: flex; gap: 14px; align-items: center; color: var(--as-ink-3); }
  .set-later > div { flex: 1; }
  .set-later__head { display: flex; align-items: center; width: 100%; }
  .set-later__t { font-size: 14.5px; font-weight: 700; color: var(--as-ink-2); flex: 1; }
  .set-later__v { font-size: 13px; color: var(--as-ink-3); margin: 0; }
  .set-later__tag { font-size: 11.5px; font-weight: 700; color: var(--as-ink-3); }
  .set-two > .set-later { flex-direction: column; align-items: stretch; gap: 6px; }

  /* AI quality check */
  .set-quality { padding: 20px; gap: 14px; }
  .set-quality__head { display: flex; gap: 16px; align-items: flex-start; }
  .set-quality__head > div:first-child { flex: 1; }
  .set-quality__t { font-size: 17px; font-weight: 700; margin: 0 0 3px; }
  .set-quality__score { text-align: right; }
  .set-quality__pct { font-size: 30px; font-weight: 700; line-height: 1; margin-bottom: 4px; }
  .set-progress { display: flex; align-items: center; gap: 10px; }
  .set-progress .set-meter { flex: 1; }
  .set-qitem { border: 1px solid var(--as-border-2); border-radius: 12px; display: grid; grid-template-columns: 1fr 1.3fr; overflow: hidden; }
  .set-qitem__email { padding: 14px 16px; background: var(--as-surface-2); border-right: 1px solid var(--as-border); display: flex; flex-direction: column; gap: 4px; }
  .set-qitem__ai { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
  .set-qitem__label { font-size: 11.5px; font-weight: 700; color: var(--as-ink-3); letter-spacing: .05em; }
  .set-qitem__from { font-size: 14.5px; font-weight: 700; }
  .set-qitem__subject { font-size: 13.5px; color: var(--as-ink-2); }
  .set-qitem__where { margin-top: auto; }
  .set-dl--use { grid-template-columns: 1fr auto; font-size: 12.5px; }
  .set-dl--use dd { text-align: right; font-family: var(--as-mono); }
  .set-dl--ai { grid-template-columns: 90px 1fr; font-size: 13.5px; }
  .set-qitem__btns { display: flex; gap: 8px; align-items: center; margin-top: 4px; }

  /* Lists of rows (phone-like groups, used on every sub-page) */
  .set-group__h { font-size: 12.5px; font-weight: 700; color: var(--as-ink-3); letter-spacing: .05em; padding: 4px 16px 0; }
  .set-group__h--in { padding: 0; }
  .set-list { background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 14px; overflow: hidden; }
  .set-list__note { padding: 12px 14px; font-size: 13px; color: var(--as-ink-3); line-height: 1.45; margin: 0; }
  .set-item { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 6px 14px; border-bottom: 1px solid var(--as-border); color: var(--as-ink); }
  .set-item:last-child { border-bottom: 0; }
  button.set-item { width: 100%; text-align: left; }
  .set-item__icon { color: var(--as-ink-3); flex: none; }
  .set-item__t { font-size: 15px; font-weight: 600; }
  .set-item--field .set-item__t { flex: 1; }
  .set-item__v { font-size: 13px; color: var(--as-ink-3); }
  .set-item > .set-item__v { margin-left: auto; }
  .set-item__stack { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .set-item--link .set-item__t { flex: 1; color: var(--as-ink-2); }
  .set-toggle { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 10px 14px; border-bottom: 1px solid var(--as-border); }
  .set-toggle:last-child { border-bottom: 0; }
  .set-toggle__text { flex: 1; min-width: 0; }
  .set-toggle__t { font-size: 15.5px; font-weight: 600; }
  .set-toggle__v { font-size: 13px; color: var(--as-ink-3); line-height: 1.35; }
  .set-error { flex-basis: 100%; display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--as-crit-bg); color: var(--as-crit); font-size: 13px; line-height: 1.4; }
  .set-status { font-size: 12px; font-weight: 700; color: var(--as-ink-3); white-space: nowrap; min-width: 0; }
  .set-status--saved { color: var(--as-pos); }
  .set-status--failed { color: var(--as-crit); }
  .set-text-btn { min-height: 36px; padding: 0 8px; font-size: 14px; font-weight: 600; color: var(--as-ink-2); }
  .set-day { min-height: 52px; display: flex; align-items: center; gap: 10px; padding: 4px 14px; border-bottom: 1px solid var(--as-border); }
  .set-day:last-child { border-bottom: 0; }
  .set-day__name { width: 42px; font-size: 15px; font-weight: 600; }
  .set-day__hours { flex: 1; display: flex; align-items: center; gap: 6px; }
  .set-day__off { flex: 1; font-size: 15px; font-family: var(--as-mono); color: var(--as-ink-3); }
  .set-day__to { color: var(--as-ink-3); }
  .set-time { font-family: var(--as-mono); font-size: 15px; padding: 6px 8px; border-radius: 8px; background: var(--as-surface-3); border: 1px solid transparent; color: var(--as-ink); }
  .set-time:focus { outline: none; border-color: var(--as-work); box-shadow: var(--as-focus); }
  .set-num { width: 72px; text-align: right; }
  .set-select { width: auto; flex: none; height: 40px; min-width: 220px; font-size: 14px; padding: 0 10px; border-radius: 9px; }
  .set-select--sm { height: 34px; min-width: 0; width: 100%; font-size: 13px; }
  .set-add summary { min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 15px; font-weight: 600; color: var(--as-ink-2); cursor: pointer; list-style: none; }
  .set-add summary::-webkit-details-marker { display: none; }
  .set-add__form { display: flex; flex-direction: column; gap: 10px; padding: 0 14px 14px; }
  .set-add__days { display: flex; gap: 6px; flex-wrap: wrap; }
  .set-add__times { display: flex; align-items: center; gap: 8px; }
  .set-chip { position: relative; }
  .set-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; }
  .set-chip span { min-width: 44px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--as-border-2); font-size: 13px; font-weight: 600; color: var(--as-ink-2); }
  .set-chip input:checked + span { background: var(--as-ink); border-color: var(--as-ink); color: var(--as-surface); }
  .set-chip input:focus-visible + span { box-shadow: var(--as-focus); }
  .set-inline-add { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--as-border); }
  .set-inline-add .input { height: 40px; font-size: 15px; }
  .set-empty { padding: 22px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .set-empty__icon { width: 44px; height: 44px; border-radius: 22px; background: var(--as-surface-3); display: flex; align-items: center; justify-content: center; color: var(--as-ink-3); }
  .set-empty__t { font-size: 15.5px; font-weight: 700; }
  .set-empty__v { font-size: 13.5px; color: var(--as-ink-3); line-height: 1.45; max-width: 280px; margin: 0; }
  .set-banner { display: flex; gap: 10px; align-items: center; padding: 12px 8px 12px 14px; border-radius: 14px; background: var(--as-surface-2); border: 1px solid var(--as-border-2); }
  .set-banner__main { flex: 1; }
  .set-banner__t { font-size: 14.5px; font-weight: 700; }
  .set-banner__v { font-size: 13px; color: var(--as-ink-3); }
  .set-kind { height: 26px; padding: 0 9px; border-radius: 7px; background: var(--as-surface-3); display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; }
  .set-kind--learned { background: transparent; border: 1.5px dashed var(--as-ghost-border); }
  .set-addrule { flex-direction: row; flex-wrap: wrap; align-items: center; padding: 0; border: 0; background: none; }
  .set-addrule summary { list-style: none; }
  .set-addrule summary::-webkit-details-marker { display: none; }
  .set-addrule__form { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; margin-top: 10px; }
  .set-addrule__form .input { flex: 1; min-width: 220px; height: 40px; font-size: 14px; }
  .set-codes { display: flex; gap: 4px; }
  .set-codes__bar { flex: 1; height: 6px; border-radius: 3px; background: var(--as-surface-3); }
  .set-codes__bar.is-left { background: var(--as-ink-2); }
  .set-code { font-family: var(--as-mono); font-size: 13px; padding: 10px 12px; border-radius: 9px; background: var(--as-surface-3); }
  .choice--sm .choice__item span { min-height: 32px; min-width: 44px; padding: 0 10px; font-size: 14px; }
  .set-sheet { position: fixed; inset: 0; z-index: 60; background: var(--as-scrim); display: flex; align-items: flex-end; justify-content: center; }
  .set-sheet__panel { width: 100%; max-width: 480px; background: var(--as-surface); border-radius: 16px 16px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; box-shadow: var(--as-shadow-lg); }
  .set-sheet__text { font-size: 15.5px; line-height: 1.5; margin: 0; }
  .set-sheet__actions { display: flex; gap: 8px; }
  .set-sheet__actions .btn { flex: 1; }
  .set-foot { font-size: 12.5px; color: var(--as-ink-3); text-align: center; line-height: 1.5; padding: 0 20px; margin: 0; }

  /* Below desktop: the iPhone design — home with status + value rows, sub-pages with a back link. */
  @media (max-width: 1099px) {
    .set-desk { display: none; }
    .set-home { display: flex; flex-direction: column; gap: 22px; padding: 4px 16px 24px; }
    .set-home__head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px; }
    .set-home__title { font-size: 32px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
    .set-home__search { width: 44px; height: 44px; border-radius: 22px; background: var(--as-surface); display: flex; align-items: center; justify-content: center; color: var(--as-ink-2); }
    .set-search--home { margin: 0; }
    .set-group { display: flex; flex-direction: column; gap: 8px; }
    .set-group__card { background: var(--as-surface); border-radius: 14px; box-shadow: var(--as-shadow-sm); overflow: hidden; }
    .set-row { min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--as-border); color: var(--as-ink); }
    .set-row:last-child { border-bottom: 0; }
    .set-row.is-later { opacity: .55; }
    .set-row__icon { width: 30px; height: 30px; border-radius: 8px; background: var(--as-surface-3); color: var(--as-ink-2); display: flex; align-items: center; justify-content: center; flex: none; }
    .set-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; padding: 8px 0; }
    .set-row__t { font-size: 15.5px; font-weight: 600; }
    .set-row__v { font-size: 13px; color: var(--as-ink-3); line-height: 1.35; }
    .set-row__chev { color: var(--as-ink-3); }
    .set-row__later { font-size: 11px; font-weight: 700; color: var(--as-ink-3); }
    .set-back { height: 44px; display: flex; align-items: center; padding: 0 8px; font-size: 16px; color: var(--as-ink-2); }
    .set-page { padding: 0 16px 24px; gap: 14px; }
    .set-page__head { padding: 0 4px; }
    .set-list, .set-table, .set-card { border: 0; box-shadow: var(--as-shadow-sm); }
  }
  @media (max-width: 599px) {
    .set-two { grid-template-columns: minmax(0, 1fr); }
    .set-alert { grid-template-columns: auto 1fr; }
    .set-alert__actions { grid-column: 1 / -1; }
    .set-table__head { display: none; }
    .set-table__row, .set-table--cal .set-table__row, .set-table--lists .set-table__row, .set-table--rules .set-table__row, .set-table--left .set-table__row { grid-template-columns: 1fr auto; gap: 4px 10px; padding: 10px 14px; }
    .set-table--pick .set-table__row { grid-template-columns: 24px 1fr auto; gap: 4px 10px; padding: 10px 14px; }
    .set-table__row > .set-table__muted { grid-column: 1; grid-row: 2; font-size: 12.5px; }
    .set-table--cal .set-table__c::before { font-size: 11px; font-weight: 700; color: var(--as-ink-3); }
    .set-table--cal .set-table__row > .set-table__c:nth-of-type(3)::before { content: "Show"; }
    .set-table--cal .set-table__row > .set-table__c:nth-of-type(4)::before { content: "Busy"; }
    .set-table--lists .set-table__wide { grid-column: 1 / -1; justify-content: flex-start; }
    .set-card--row { flex-wrap: wrap; }
    .set-select { min-width: 0; width: 100%; }
    .set-qitem { grid-template-columns: minmax(0, 1fr); }
    .set-qitem__email { border-right: 0; border-bottom: 1px solid var(--as-border); }
    .set-quality__head { flex-direction: column; }
    .set-quality__score { text-align: left; }
    .set-inline-add { flex-wrap: wrap; }
    .set-time { width: 88px; min-width: 0; padding: 6px 4px; font-size: 14px; }
    .set-num { width: 64px; }
    .set-day { gap: 6px; }
    .set-day__hours { min-width: 0; gap: 4px; }
    .set-day .switch { flex: none; }
    .set-item--field { flex-wrap: wrap; }
  }
  /* ── AI quality check (Settings) ─────────────────────────────────── */
  .qa { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
  .qa__intro { margin: 0; }
  .qa__score { flex-direction: row; flex-wrap: wrap; gap: 20px 28px; }
  .qa__stat { display: flex; flex-direction: column; gap: 2px; }
  .qa__num { font-family: var(--as-mono); font-size: 22px; font-weight: 700; }
  .qa__of { font-size: 14px; color: var(--as-ink-3); font-weight: 600; }
  .qa__label { font-size: 12px; color: var(--as-ink-3); }
  .qa__mix { margin-right: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--as-ink-3); }
  .qa__mix + .qa__mix { margin-right: 0; }
  .qa__bar { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; position: sticky; top: 0; z-index: 2; padding: 6px 0; background: var(--as-canvas); }
  .qa-item { gap: 6px; padding: 14px 16px; }
  .qa-item.is-approved { border-color: var(--as-border-2); }
  .qa-item__head { display: flex; align-items: center; gap: 10px; cursor: pointer; }
  .qa-item__pick { width: 18px; height: 18px; accent-color: var(--as-ink); flex: none; }
  .qa-item__from { font-size: 14px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .qa-item__date { margin-left: auto; font-family: var(--as-mono); font-size: 11.5px; color: var(--as-ink-3); flex: none; }
  .qa-item__subject { font-size: 14px; font-weight: 600; padding-left: 28px; }
  .qa-item__count { font-weight: 400; color: var(--as-ink-3); font-size: 12.5px; }
  .qa-item__snippet { font-size: 13px; color: var(--as-ink-3); line-height: 1.45; padding-left: 28px; }
  .qa-item__ai { margin: 6px 0 0 28px; padding: 10px 12px; border-radius: 10px; background: var(--as-surface-2); display: flex; flex-direction: column; gap: 6px; }
  .qa-item__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .qa-item__meta { font-size: 12px; color: var(--as-ink-3); }
  .qa-item__summary { font-size: 14px; font-weight: 600; margin: 0; line-height: 1.4; }
  .qa-item__detail { font-size: 13px; color: var(--as-ink-2); margin: 0; line-height: 1.45; }
  .qa-item__extract { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: 13px; }
  .qa-item__extract as-icon { color: var(--as-ink-3); align-self: center; }
  .qa-item__quote { font-size: 12px; color: var(--as-ink-3); font-style: italic; }
  .qa-item__checks { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 4px; }
  .qa-check { display: flex; align-items: center; gap: 4px; }
  .qa-check__label { font-size: 12px; font-weight: 600; color: var(--as-ink-2); margin-right: 2px; }
  .qa-check__btn { height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--as-border-2); background: var(--as-surface); font-size: 12.5px; font-weight: 600; color: var(--as-ink-2); }
  .qa-check__btn--right.is-on { background: var(--as-pos); border-color: var(--as-pos); color: var(--as-surface); }
  .qa-check__btn--wrong.is-on { background: var(--as-crit); border-color: var(--as-crit); color: var(--as-surface); }
  .qa-item__wait { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--as-ink-3); margin: 4px 0 0 28px; }
  @media (max-width: 599px) {
    .qa-item__subject, .qa-item__snippet { padding-left: 0; }
    .qa-item__ai, .qa-item__wait { margin-left: 0; }
    .qa-check__btn { height: 40px; }
  }

  /* ── Inbox (docs/design/Inbox.dc.html) ───────────────────────────── */
  .inbox { display: grid; grid-template-columns: 400px minmax(0, 1fr); min-height: 0; height: 100%; }
  .inbox-home { display: none; }
  .mail-list { border-right: 1px solid var(--as-border); min-height: 0; }
  .mail-list__back { display: none; color: var(--as-ink-2); }
  .mail-list__meta { font-size: 12.5px; color: var(--as-ink-3); }
  .mail-list__sort { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--as-ink-2); display: flex; align-items: center; gap: 4px; }
  .mail-list__body { overflow-y: auto; flex: 1; }
  .mail-list__section { margin: 18px 16px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--as-ink-3); }
  .mail-list__more { display: flex; justify-content: center; margin: 12px 16px; }
  .mail-list__note { margin: 14px 16px; padding: 12px 14px; border-radius: 10px; background: var(--as-surface-2); display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--as-ink-2); }
  .inbox-empty { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--as-ink-3); padding: 16px; margin: 0; }
  .inbox-empty--pane { flex-direction: column; justify-content: center; text-align: center; flex: 1; min-height: 200px; }
  .nav-item.is-later { opacity: .6; }

  /* List header + rows (design update 6) */
  .mail-list__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; padding: 14px 16px 10px; border-bottom: 1px solid var(--as-border); background: var(--as-surface); }
  .mail-list__titles { flex: 1; min-width: 0; }
  .mail-list__title { display: flex; align-items: baseline; gap: 8px; }
  .mail-list__title .pane__title { font-size: 19px; }
  .mail-list__count { font-size: 13px; font-weight: 700; color: var(--as-ink-3); }
  .mail-list__sub { flex-basis: 100%; font-size: 12.5px; color: var(--as-ink-3); margin-top: 1px; }
  .mail-list__tool { display: inline-flex; align-items: center; gap: 4px; height: 26px; font-size: 13px; font-weight: 600; color: var(--as-ink-2); white-space: nowrap; }
  .mail-list__tool--quiet { cursor: default; }
  .mail-list__filed { margin: 12px; padding: 12px 14px; border-radius: 10px; background: var(--as-surface-2); display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--as-ink-2); }
  .mail-list__filed > span { flex: 1; min-width: 0; }
  .mail-list__review { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--as-ink); flex: none; }
  .mail-bulk { position: sticky; bottom: 12px; margin: 0 12px 12px; padding: 8px 10px; border-radius: 12px; background: var(--as-ink); color: var(--as-surface); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; box-shadow: var(--as-shadow-lg); z-index: 3; }
  .mail-bulk__n { font-size: 13px; font-weight: 700; margin: 0 6px 0 4px; }
  .mail-bulk .btn--ghost { color: var(--as-surface); }

  .mail-card { position: relative; display: grid; grid-template-columns: 18px 34px minmax(0, 1fr) 32px; column-gap: 10px; align-items: start; padding: 14px 14px 14px 12px; border-bottom: 1px solid var(--as-border); cursor: pointer; }
  .mail-card__link { position: absolute; inset: 0; z-index: 0; }
  .mail-card__pick, .mail-card__done, .mail-card__chips { position: relative; z-index: 1; }
  .mail-card__pick { width: 20px; height: 20px; margin: 7px 2px 0; accent-color: var(--as-ink); cursor: pointer; }   /* R2-M21: was 16 px next to the card link (WCAG 2.5.8) */
  .mail-card__avatar { margin-top: 1px; }
  .mail-card__main { min-width: 0; display: flex; flex-direction: column; gap: 2px; pointer-events: none; }
  .mail-card__head { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .mail-card__from { font-size: 14.5px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mail-card__vip { color: var(--as-warn); }
  .mail-card__org { font-size: 12px; color: var(--as-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .mail-card__ctx { display: none; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--as-border-2); font-size: 10.5px; font-weight: 700; color: var(--as-ink-3); }
  .mail-card__time { margin-left: auto; font-size: 12px; color: var(--as-ink-3); font-family: var(--as-mono); flex: none; }
  .mail-card__subject { font-size: 13.5px; font-weight: 700; color: var(--as-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mail-card__summary { font-size: 13px; color: var(--as-ink-2); line-height: 1.4; }
  .mail-card__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; pointer-events: none; }
  .mail-card__done { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--as-border-2); background: var(--as-surface); color: var(--as-ink-2); display: flex; align-items: center; justify-content: center; }
  .mail-card__done:hover { color: var(--as-pos); border-color: var(--as-pos); }
  .mail-card__skeleton { display: flex; flex-direction: column; gap: 5px; }
  .mail-card__skeleton .skeleton__line { height: 9px; }
  .mail-card__pending { font-size: 11.5px; color: var(--as-ink-3); }
  .mail-card:hover { background: var(--as-surface-2); }
  .mail-card.is-selected { background: var(--as-surface-2); box-shadow: inset 3px 0 0 var(--as-ink); }
  .mail-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--as-ink-2); background: var(--as-surface-3); white-space: nowrap; }
  .mail-chip--ghost { border: 1.5px dashed var(--as-ghost-border); background: transparent; }
  .mail-chip--added { background: var(--as-pos-bg); color: var(--as-pos); }
  .mail-chip--soft { background: var(--as-surface-3); }
  .mail-card__summary.is-due { color: var(--as-warn); font-weight: 600; }
  .inbox-home__count.is-warn { color: var(--as-warn); font-weight: 700; }
  .mail-chip--unsure { border: 1px dashed var(--as-ghost-border); color: var(--as-ink-3); font-size: 11px; font-weight: 700; background: transparent; }
  button.mail-chip { cursor: pointer; }
  /* Follow-up and invite rows keep the simple stacked layout with hover actions. */
  .mail-card--followup, .mail-card--invite { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; }
  .mail-card--followup .mail-card__head, .mail-card--invite .mail-card__head { position: relative; z-index: 1; pointer-events: none; }
  .mail-card--followup .mail-card__subject, .mail-card--invite .mail-card__subject { pointer-events: none; }
  .mail-card__actions { display: none; margin-left: auto; gap: 2px; pointer-events: auto; }
  .mail-card__act { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--as-border); display: flex; align-items: center; justify-content: center; background: var(--as-surface); color: var(--as-ink); }
  .mail-card:hover .mail-card__actions, .mail-card:focus-within .mail-card__actions { display: flex; }
  .mail-card--followup:hover .mail-card__time, .mail-card--invite:hover .mail-card__time { display: none; }

  /* Thread detail + context rail */
  .mail-detail { min-height: 0; background: var(--as-canvas); display: grid; grid-template-columns: minmax(0, 1fr) 248px; }
  .mail-detail__main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
  .mail-detail__bar { gap: 8px; padding: 0 20px; height: 54px; }
  .mail-detail__back { display: none; align-items: center; gap: 4px; font-size: 15px; font-weight: 600; color: var(--as-ink-2); }
  .mail-tool { flex: none; white-space: nowrap; height: 34px; padding: 0 12px; display: inline-flex; align-items: center; gap: 6px; border-radius: 9px; border: 1px solid var(--as-border-2); font-size: 13.5px; font-weight: 600; color: var(--as-ink); background: var(--as-surface); }
  .mail-tool--quiet { border-color: transparent; background: transparent; color: var(--as-ink-2); }
  .mail-tool--icon { width: 34px; padding: 0; justify-content: center; border-color: transparent; background: transparent; color: var(--as-ink-2); }
  .kbd-hint { font-family: var(--as-mono); font-size: 11px; color: var(--as-ink-3); }
  .mail-detail__body { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; }
  .mail-detail__subject { font-size: 24px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
  .mail-detail__from { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--as-ink-3); margin-top: 6px; }
  .mail-detail__name { font-weight: 700; color: var(--as-ink); }
  .mail-detail__email { font-family: var(--as-mono); font-size: 12.5px; }
  .mail-tag { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px; border-radius: 5px; font-size: 10.5px; font-weight: 700; background: var(--as-work-tint); color: var(--as-work); }
  .mail-tag--ai { background: var(--as-surface-3); color: var(--as-ink-2); font-weight: 600; }
  .mail-ai { background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 14px; padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 12px; }
  .mail-ai--pending { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--as-ink-3); }
  .mail-ai__head { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--as-ink-2); }
  .mail-ai__head b { color: var(--as-ink); }
  .mail-ai__text { font-size: 16px; line-height: 1.5; margin: 0; text-wrap: pretty; }
  .mail-ai__sources { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .mail-ai__label { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--as-ink-3); margin-right: 4px; }
  .mail-src { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--as-surface-3); font-size: 12px; font-weight: 600; color: var(--as-ink-2); white-space: nowrap; }
  .mail-src--file { height: 34px; padding: 0 12px; border: 1px solid var(--as-border-2); background: var(--as-surface); font-size: 13px; }
  .mail-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 999px; border: 1.5px dashed var(--as-ghost-border); font-size: 13px; font-weight: 600; color: var(--as-ink-3); background: transparent; align-self: flex-start; }
  .mail-pill--added { border: 0; background: var(--as-pos-bg); color: var(--as-pos); }
  .mail-found { display: flex; flex-direction: column; gap: 8px; }
  .mail-found__h { margin: 4px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--as-ink-3); }
  .mail-found__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed var(--as-ghost-border); background: var(--as-ghost-bg); }
  .mail-found__item.is-added { border-style: solid; border-color: var(--as-pos-bg); background: var(--as-pos-bg); }
  .mail-found__icon { color: var(--as-ink-2); }
  .mail-found__main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
  .mail-found__main b { font-size: 14.5px; }
  .mail-found__main span { font-size: 12.5px; color: var(--as-ink-3); }
  .mail-found__item .btn { height: 34px; border-radius: 8px; flex: none; }
  .mail-found__added { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--as-pos); }
  .mail-msgs { border: 1px solid var(--as-border); border-radius: 14px; background: var(--as-surface); display: flex; flex-direction: column; overflow: hidden; }
  .mail-msg { padding: 14px 16px; font-size: 14px; line-height: 1.6; color: var(--as-ink-2); }
  .mail-msg--short { display: flex; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--as-border); font-size: 13px; color: var(--as-ink-3); line-height: 1.4; }
  .mail-msg__who { font-weight: 700; color: var(--as-ink); width: 110px; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mail-msg__who--strong { width: auto; }
  .mail-msg__snip { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mail-msg__at { font-family: var(--as-mono); font-size: 12px; color: var(--as-ink-3); flex: none; }
  .mail-msg__top { display: flex; margin-bottom: 8px; }
  .mail-msg__top .mail-msg__at { margin-left: auto; }
  .mail-msg__text { white-space: pre-line; overflow-wrap: anywhere; }
  .mail-msg__att { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }

  .mail-rail { border-left: 1px solid var(--as-border); background: var(--as-surface); padding: 18px 16px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; }
  .mail-rail__who { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
  .mail-rail__avatar { width: 40px; height: 40px; font-size: 14px; }
  .mail-rail__name { display: flex; flex-direction: column; min-width: 0; font-size: 15.5px; font-weight: 700; line-height: 1.25; }
  .mail-rail__name span { font-size: 12.5px; font-weight: 400; color: var(--as-ink-3); }
  .mail-rail__h { margin-top: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--as-ink-3); }
  .mail-rail__row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--as-ink); line-height: 1.35; }
  .mail-rail__row as-icon { color: var(--as-ink-3); margin-top: 1px; }
  .mail-rail__row--owe as-icon { color: var(--as-warn); }
  .mail-rail__meet { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--cal-1-bg); color: var(--cal-1); font-size: 13.5px; font-weight: 700; line-height: 1.3; }
  .mail-rail__meet span { color: var(--as-ink); }
  .mail-rail__fact { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 13px; color: var(--as-ink); line-height: 1.4; }
  .mail-rail__project { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; border: 1px solid var(--as-border); color: var(--as-ink); }
  .mail-rail__project-top { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
  .mail-rail__status { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--as-ink-3); }
  .mail-rail__status--waiting { color: var(--as-warn); }
  .mail-rail__project-sum { font-size: 12.5px; color: var(--as-ink-3); line-height: 1.4; }
  .mail-rail__keys { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--as-ink-3); }
  .mail-rail__keys > b { font-size: 12.5px; color: var(--as-ink-2); }
  .mail-rail__keys span b { color: var(--as-ink-2); font-family: var(--as-mono); }

  @media (max-width: 1279px) { .mail-detail { grid-template-columns: minmax(0, 1fr); } .mail-rail { display: none; } .mail-tool--quiet .mail-tool__label { display: none; } }
  @media (max-width: 1099px) {
    .inbox { grid-template-columns: 320px minmax(0, 1fr); }
    .mail-detail__body { padding: 16px 20px; }
    .mail-tool__label { display: none; }
    .mail-tool .kbd-hint { display: none; }
  }
  /* Phone: smart groups first; a group's list; the thread on its own page. */
  @media (max-width: 599px) {
    .inbox { display: block; height: auto; }
    .inbox .mail-list, .inbox .mail-detail { display: none; }
    .inbox:not(.has-group):not(.is-thread) .inbox-home { display: flex; }
    .inbox.has-group .mail-list { display: flex; border: 0; }
    .inbox.is-thread .mail-detail { display: flex; }
    .mail-list__back { display: flex; }
    .mail-detail__back { display: inline-flex; margin-right: auto; }
    .mail-tool { width: 44px; height: 44px; padding: 0; justify-content: center; }
    .mail-tool--quiet { width: auto; }
    .mail-detail__bar { height: 56px; padding: 0 12px; }
    .mail-detail__body { padding: 14px 16px 24px; overflow: visible; }
    .mail-detail__subject { font-size: 20px; }
    .mail-pill { height: auto; min-height: 40px; padding-block: 4px; }
    .mail-card__org { display: none; }
    .inbox .mail-detail { border-left: 0; }
    .mail-pill__accept { height: 30px; padding: 0 12px; }
    .inbox-home { flex-direction: column; gap: 10px; padding: 2px 16px 24px; }
    .inbox-home__head { display: flex; align-items: baseline; gap: 10px; padding: 0 4px; }
    .inbox-home__title { font-size: 32px; font-weight: 700; letter-spacing: -.02em; margin: 0; }
    .inbox-home__meta { font-size: 13px; color: var(--as-ink-3); }
    .inbox-home__pill { margin: 0; height: 34px; }
    .inbox-home__group { display: flex; align-items: center; gap: 8px; padding: 4px 4px 0; color: var(--as-ink-2); }
    .inbox-home__label { font-size: 15px; font-weight: 700; color: var(--as-ink); }
    .inbox-home__count { font-size: 13px; color: var(--as-ink-3); font-weight: 600; }
    .inbox-home__cards, .inbox-home__rows { background: var(--as-surface); border-radius: 16px; box-shadow: var(--as-shadow-sm); overflow: hidden; }
    .inbox-home__cards .mail-card { gap: 5px; }
    .inbox-home__cards .mail-card:last-child { border-bottom: 0; }
    .inbox-home__more { display: flex; justify-content: center; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--as-ink-2); border-top: 1px solid var(--as-border); }
    .inbox-home__row { display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: 50px; border-bottom: 1px solid var(--as-border); color: var(--as-ink-2); }
    .inbox-home__row:last-child { border-bottom: 0; }
    .inbox-home__row-label { flex: 1; font-size: 15px; font-weight: 600; color: var(--as-ink); }
    .inbox-home__rest { text-align: center; font-size: 13px; color: var(--as-ink-3); margin: 2px 0 0; }
    .inbox-home__rest a { color: var(--as-ink-2); font-weight: 600; }
    .mail-card { padding: 12px 16px; grid-template-columns: 34px minmax(0, 1fr); }
    .mail-card__pick, .mail-card__done, .mail-list__tool, .mail-bulk { display: none; }
    .mail-card__from { font-size: 15px; }
    .mail-card__ctx { display: inline-flex; margin-left: auto; }
    .mail-card__ctx + .mail-card__time { margin-left: 0; }
    .mail-card__time { font-size: 12.5px; }
    .mail-card__subject { display: none; }
    .mail-card__summary { font-size: 14px; }
    .mail-chip { height: 26px; padding: 0 9px; font-size: 12px; }
  }

  /* ── Clear my day ────────────────────────────────────────────────── */
  .clear-day { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
  .clear-day .mono { font-family: var(--as-mono); }
  .clear-day__sub { font-size: 14px; color: var(--as-ink-2); line-height: 1.5; margin: 4px 0 0; }
  .clear-day__done { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--as-pos-bg); color: var(--as-pos); font-size: 13.5px; font-weight: 600; }
  .clear-day__card { gap: 10px; }
  .clear-day__h { font-size: 12.5px; font-weight: 700; color: var(--as-ink-3); letter-spacing: .05em; text-transform: uppercase; margin: 0; }
  .clear-day__h--pad { padding: 14px 16px 6px; }
  .clear-day__hint { font-size: 13px; color: var(--as-ink-3); margin: 0; }
  .clear-day__empty { padding: 14px 16px; font-size: 14px; color: var(--as-ink-3); margin: 0; }
  .clear-day__plan { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--as-ink-2); margin: 0; }
  .clear-day__warn { font-size: 12.5px; color: var(--as-ink-3); text-align: center; margin: 0; }
  .choice { display: flex; padding: 2px; border-radius: 10px; background: var(--as-surface-3); }
  .choice__item { flex: 1; position: relative; }
  .choice__item input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
  .choice__item span { min-height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--as-ink-2); }
  .choice__item input:checked + span { background: var(--as-surface); color: var(--as-ink); font-weight: 700; box-shadow: var(--as-shadow-sm); }
  .choice__item input:focus-visible + span { box-shadow: var(--as-focus); }
  .clear-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; border-top: 1px solid var(--as-border); }
  .clear-row__label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; cursor: pointer; }
  .clear-row.is-locked { opacity: .55; cursor: default; }
  .clear-row.is-kept { background: var(--as-pos-bg); }
  .clear-row__pick { width: 20px; height: 20px; accent-color: var(--as-ink); flex: none; }
  .clear-row__time { width: 92px; flex: none; font-size: 13px; color: var(--as-ink-2); }
  .clear-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .clear-row__title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .clear-row__meta { font-size: 12.5px; color: var(--as-ink-3); }
  .clear-row__keep { align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--as-ink-2); min-height: 44px; }
  .clear-row__keep:not([hidden]) { display: flex; }
  .today__clear { font-size: 13px; font-weight: 600; color: var(--as-ink-3); display: inline-flex; align-items: center; gap: 4px; }
  @media (max-width: 599px) { .clear-row__time { width: 70px; font-size: 12px; } .choice__item span { font-size: 13px; } }

  /* ── Activity log ────────────────────────────────────────────────── */
  .activity { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
  .activity__day { display: flex; flex-direction: column; gap: 8px; }
  .activity__date { font-size: 12.5px; font-weight: 700; color: var(--as-ink-3); letter-spacing: .05em; text-transform: uppercase; margin: 0; padding: 0 4px; }
  .activity-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border-bottom: 1px solid var(--as-border); }
  .activity-row:last-child { border-bottom: 0; }
  .activity-row.is-undone { opacity: .55; }
  .activity-row__text { flex: 1; min-width: 0; }
  .activity-row__t { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
  .activity-row__m { font-size: 12.5px; color: var(--as-ink-3); }
  .activity-row__state { font-size: 12.5px; font-weight: 700; color: var(--as-ink-3); }
  .mail-list__note .btn { flex: none; }

  /* ── Draft reply (Inbox.dc.html) ─────────────────────────────────── */
  .mail-draft { border: 1px solid var(--as-border-2); border-radius: 12px; background: var(--as-surface); box-shadow: var(--as-shadow-md); display: flex; flex-direction: column; }
  .mail-draft__bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--as-border); flex-wrap: wrap; }
  .mail-draft__title { display: flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; padding-left: 4px; margin-right: 8px; }
  .mail-draft__chips { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 14px 12px; }
  .mail-draft__seg { display: flex; background: var(--as-surface-3); border-radius: 8px; padding: 2px; }
  .mail-draft__opt { height: 26px; padding: 0 9px; display: flex; align-items: center; font-size: 12.5px; font-weight: 600; color: var(--as-ink-3); border-radius: 6px; }
  .mail-draft__opt[aria-checked="true"] { background: var(--as-surface); color: var(--as-ink); font-weight: 700; box-shadow: var(--as-shadow-sm); }
  .mail-draft__style { margin-left: auto; font-size: 12px; color: var(--as-ink-3); display: flex; align-items: center; gap: 5px; }
  .mail-draft__text { border: 0; resize: vertical; min-height: 150px; padding: 12px 14px; font: inherit; font-size: 14.5px; line-height: 1.55; color: var(--as-ink); background: transparent; }
  .mail-draft__text:focus { outline: none; box-shadow: inset 0 0 0 2px var(--as-work-tint); }
  .mail-draft__body--pending { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
  .mail-draft__empty { padding: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .mail-draft__hint { font-size: 12.5px; color: var(--as-ink-3); display: flex; align-items: center; gap: 6px; }
  .mail-draft__foot { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--as-border); background: var(--as-surface-2); border-radius: 0 0 12px 12px; }
  .mail-draft__foot .btn { height: 34px; border-radius: 8px; font-size: 13px; }
  .mail-draft__foot { flex-wrap: wrap; }
  .mail-draft__foot .mail-draft__where + .btn { margin-left: auto; }
  .mail-draft__where { flex: 1 1 220px; min-width: 0; white-space: normal; line-height: 1.3; font-size: 12.5px; color: var(--as-ink-3); display: flex; align-items: center; gap: 5px; }
  .mail-draft__foot .btn { flex: none; }
  /* After a reply: the question on the conversation itself (the Today card, framed). */
  .mail-check { margin: 0 0 12px; }
  .mail-check .today-suggestion { border: 1px solid var(--as-border); border-radius: 12px; background: var(--as-surface); }
  /* "Send from my Mac": the 5-minute hold, sending, sent or not sent. */
  .mail-draft__send { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--as-border); background: var(--as-warn-bg); color: var(--as-ink-2); font-size: 13px; border-radius: 0 0 12px 12px; }
  .mail-draft__send span { flex: 1 1 auto; min-width: 0; }
  .mail-draft__send .btn { flex: none; height: 32px; border-radius: 8px; }
  .mail-draft__send--sent { background: var(--as-surface-2); }
  .mail-draft__send--done { background: var(--as-pos-bg); color: var(--as-pos); }
  .mail-draft__send--failed, .mail-draft__send--expired { background: var(--as-crit-bg); color: var(--as-crit); border-radius: 0; }
  .mail-draft__send + .mail-draft__foot { border-top: 0; }
  @media (max-width: 599px) {
    .mail-draft__style { flex-basis: 100%; margin-left: 4px; }
    .mail-draft__foot { flex-wrap: wrap; }
    .mail-draft__where { flex-basis: 100%; white-space: normal; }
    .mail-draft__foot .btn { height: 44px; flex: 1; }
    .mail-draft__foot .btn--primary { flex-basis: 100%; }
    .mail-draft__foot .btn__kbd { display: none; }
  }

  /* ── AI queues (Settings → AI & privacy) ─────────────────────────── */
  .set-queues { gap: 12px; }
  .set-queues__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .set-queues__failed { color: var(--as-crit); font-weight: 700; }
  .set-queue { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--as-border); }
  .set-queue__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .set-queue__name { font-size: 14px; font-weight: 700; }
  .set-queue__nums { margin-left: auto; font-size: 13px; color: var(--as-ink-2); font-family: var(--as-mono); }
  .set-queue__nums .set-ok { font-family: var(--as-font); }
  .set-queue__jobs { display: flex; gap: 6px 12px; flex-wrap: wrap; }
  .set-queue__job { font-size: 12.5px; color: var(--as-ink-3); }
  .set-queue__job b { color: var(--as-ink-2); font-family: var(--as-mono); font-weight: 600; }
  .set-run { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
  .set-run__name { font-size: 13px; font-weight: 600; }
  .set-run__nums { font-size: 12.5px; font-family: var(--as-mono); color: var(--as-ink-3); }
  @media (max-width: 599px) { .set-run { grid-template-columns: 1fr auto; } .set-run .set-meter { grid-column: 1 / -1; grid-row: 2; } }
  /* 9.7 — What the AI is doing: totals, then one row per job by area */
  .set-ai-totals { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--as-ink-2); }
  .set-ai-totals b { font-family: var(--as-mono); color: var(--as-ink); font-weight: 600; }
  .set-ai-totals .is-warn { color: var(--as-crit); }
  .set-ai-area { display: flex; flex-direction: column; gap: 0; }
  .set-ai-area__h { margin: 14px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--as-ink-3); }
  .set-ai-job { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--as-border); }
  .set-ai-job__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--as-pos); align-self: center; }
  .set-ai-job.is-busy .set-ai-job__dot { background: var(--as-brand); }
  .set-ai-job.is-warn .set-ai-job__dot { background: var(--as-crit); }
  .set-ai-job.is-idle .set-ai-job__dot { background: var(--as-border); }
  .set-ai-job__name { font-size: 14px; font-weight: 700; }
  .set-ai-job__cost { font-size: 13px; font-family: var(--as-mono); color: var(--as-ink-2); text-align: right; }
  .set-ai-job__what, .set-ai-job__meta, .set-ai-job__why { grid-column: 2 / -1; font-size: 12.5px; color: var(--as-ink-3); margin: 0; }
  .set-ai-job__meta { font-family: var(--as-mono); }
  .set-ai-job__why { color: var(--as-crit); }
  .set-ai-idle summary { cursor: pointer; font-size: 12.5px; color: var(--as-ink-3); padding: 8px 0; border-top: 1px solid var(--as-border); }
}

@layer components {
  /* ── Old mail (first-run review, step 2.8) ─────────────────────────── */
  .old-mail { display: flex; flex-direction: column; }
  .old-mail__row { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--as-border); }
  .old-mail__link { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 36px; color: var(--as-ink-2); }
  .old-mail__label { font-size: 13px; font-weight: 600; color: var(--as-ink); }
  .old-mail .btn { flex: none; }
}

@layer components {
  /* ── Search (3.1) ─────────────────────────────────────────────────── */
  .search-page { max-width: 860px; margin: 0 auto; padding: 24px 20px 48px; display: flex; flex-direction: column; gap: 22px; width: 100%; }
  .search-page__head { display: flex; flex-direction: column; gap: 8px; }
  .search--page { flex: none; height: 44px; font-size: 15px; background: var(--as-surface); border-color: var(--as-border-2); }
  .search-page__cover { margin: 0; font-size: 12.5px; color: var(--as-ink-3); }
  .search-page__note { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--as-warn); }
  .search-group { display: flex; flex-direction: column; gap: 8px; }
  .search-group__h { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--as-ink-2); }
  .search-group__n { font-weight: 600; color: var(--as-ink-3); }
  .search-group__list { display: flex; flex-direction: column; border: 1px solid var(--as-border); border-radius: 12px; background: var(--as-surface); overflow: hidden; }
  .search-hit { display: flex; flex-direction: column; gap: 3px; padding: 11px 14px; border-bottom: 1px solid var(--as-border); color: var(--as-ink); text-decoration: none; }
  .search-hit:last-child { border-bottom: 0; }
  a.search-hit:hover { background: var(--as-surface-2); }
  .search-hit__top { display: flex; align-items: center; gap: 8px; min-width: 0; }
  .search-hit__title { font-size: 14px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .search-hit__when { flex: none; font-size: 12px; color: var(--as-ink-3); }
  .search-hit__meta { font-size: 12.5px; color: var(--as-ink-3); }
  .search-hit__text { font-size: 13px; color: var(--as-ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

@layer components {
  /* ── Memory: group suggestion + chips (Projects.dc.html, 3.2) ─────── */
  .input--sm { height: 32px; padding: 0 10px; border-radius: 8px; font-size: 16px; }   /* 16px: no zoom on iPhone */
  .today-suggestion__edit { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
  .today-suggestion__edit .input { width: auto; }
  .today-suggestion__edit .input:first-child { flex: 1; min-width: 160px; }
  .group-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
  .group-chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
    background: var(--as-surface-2); color: var(--as-ink-2); border: 1px solid var(--as-border); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
  .group-chip--topic { border-style: dashed; }
  .group-filed { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--as-ink-3); }
  .group-filed__name { color: var(--as-ink); font-weight: 600; }
  .group-filed .set-text-btn { font-size: 12.5px; }
  .group-filed__add { display: inline-flex; gap: 6px; align-items: center; }
  .task-detail__groups { padding: 4px 0 12px; }
  .mail-detail__head .group-filed { margin-top: 6px; }
}

@layer components {
  /* ── Projects (Projects.dc.html, 3.3) ─────────────────────────────── */
  .proj-nav--child { padding-left: 35px; font-size: 13px; }
  .proj-nav--goal { font-weight: 600; }

  /* Index */
  .proj-index { display: flex; flex-direction: column; background: var(--as-surface); min-height: 100%; overflow-y: auto; }
  .proj-index__head { padding: 22px 32px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .proj-index__title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
  .proj-index__head .segmented { margin-left: 12px; }
  .proj-index__filters { display: flex; align-items: center; gap: 10px; flex: 1; }
  .proj-index__sort { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--as-ink-2); }
  .proj-index__legend { padding: 14px 32px 20px; margin: 0; font-size: 12.5px; color: var(--as-ink-3); }
  .proj-filter, .proj-new, .proj-manage { position: relative; }
  .proj-filter summary, .proj-new summary, .proj-manage summary { list-style: none; cursor: pointer; }
  .proj-filter summary::-webkit-details-marker, .proj-new summary::-webkit-details-marker, .proj-manage summary::-webkit-details-marker { display: none; }
  .proj-filter__menu, .proj-new__form, .proj-manage__menu { position: absolute; z-index: 20; top: calc(100% + 6px); background: var(--as-surface); border: 1px solid var(--as-border-2);
    border-radius: 12px; box-shadow: var(--as-shadow-md); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
  .proj-filter__menu { left: 0; min-width: 180px; font-size: 13.5px; }
  .proj-filter__menu label { display: flex; gap: 8px; align-items: center; }
  .proj-new__form { right: 0; width: 300px; }
  .proj-manage__menu { right: 0; width: 360px; gap: 12px; }
  .proj-manage__row { display: flex; align-items: center; gap: 8px; }
  .proj-manage__row .input { flex: 1; width: auto; min-width: 0; }
  .proj-manage__col { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
  .proj-manage__label { width: 78px; flex: none; font-size: 12px; font-weight: 700; color: var(--as-ink-3); }
  .proj-manage__rules { height: auto; min-height: 70px; padding: 8px 10px; font-size: 13px; font-family: var(--as-mono); border-radius: 8px; }

  .proj-suggest { margin: 0 32px 12px; border: 1.5px dashed var(--as-ghost-border); border-radius: 12px; padding: 12px 16px; display: flex; align-items: flex-start; gap: 14px;
    background: var(--as-ghost-bg); color: var(--as-ink-2); flex-wrap: wrap; }
  .proj-suggest > as-icon { margin-top: 2px; }
  .proj-suggest__main { flex: 1; min-width: 240px; }
  .proj-suggest__title { font-size: 14.5px; font-weight: 600; color: var(--as-ink); }
  .proj-suggest__why { font-size: 12.5px; color: var(--as-ink-3); }
  .proj-suggest__review { margin-top: 6px; font-size: 12.5px; }
  .proj-suggest__review summary { cursor: pointer; font-weight: 600; color: var(--as-ink-2); }
  .proj-suggest__review ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
  .proj-suggest__review li { display: flex; gap: 6px; align-items: center; color: var(--as-ink-2); }

  .proj-table { display: flex; flex-direction: column; }
  .proj-row { display: grid; grid-template-columns: minmax(0, 2.2fr) 110px 120px minmax(0, 2fr) 120px 80px 110px; gap: 0 16px; padding: 0 32px; min-height: 56px;
    align-items: center; border-bottom: 1px solid var(--as-border); font-size: 13.5px; color: var(--as-ink); text-decoration: none; }
  a.proj-row:hover { background: var(--as-surface-2); }
  .proj-row--head { min-height: 0; padding-block: 8px; font-size: 11.5px; font-weight: 700; color: var(--as-ink-3); letter-spacing: .04em; }
  .proj-row__name { display: flex; align-items: center; gap: 10px; min-width: 0; }
  .proj-row__name > span { min-width: 0; display: flex; flex-direction: column; }
  .proj-row__name b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .proj-row__name small { font-size: 12px; color: var(--as-ink-3); }
  .proj-row__status { font-size: 12.5px; font-weight: 600; color: var(--as-ink-2); }
  .proj-row__next { color: var(--as-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .proj-row__muted { font-size: 12.5px; color: var(--as-ink-3); }
  .proj-row__last { text-align: right; font-size: 12.5px; color: var(--as-ink-3); font-family: var(--as-mono); }
  .proj-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; background: var(--as-personal); }
  .proj-dot--work { background: var(--as-work); }
  .proj-goal { display: flex; align-items: center; gap: 8px; padding: 14px 32px 6px; font-size: 13px; font-weight: 700; color: var(--as-ink-2); text-decoration: none; }
  .proj-goal span { font-weight: 500; color: var(--as-ink-3); }
  .proj-goal--none { color: var(--as-ink-3); }
  .proj-health { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; color: var(--as-ink-3); }
  .proj-health b { font-family: var(--as-mono); }
  .proj-health--pos { color: var(--as-pos); }
  .proj-health--warn { color: var(--as-warn); }
  .proj-health--ink { color: var(--as-ink-2); }

  /* Group page */
  .proj { display: flex; flex-direction: column; min-width: 0; min-height: 100%; overflow-y: auto; }
  .proj__head { padding: 22px 32px 18px; background: var(--as-surface); border-bottom: 1px solid var(--as-border); display: flex; flex-direction: column; gap: 10px; }
  .proj__crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--as-ink-3); flex-wrap: wrap; }
  .proj__crumbs a { color: var(--as-ink-3); display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
  .proj__crumbs a:hover { color: var(--as-ink); }
  .proj__title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
  .proj__title { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
  .proj-badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--as-border-2); font-size: 12px; font-weight: 700; color: var(--as-ink-2); }
  .proj-badge b { font-family: var(--as-mono); }
  .proj-badge--warn { background: var(--as-warn-bg); color: var(--as-warn); border-color: transparent; }
  .proj-badge--pos { background: var(--as-pos-bg); color: var(--as-pos); border-color: transparent; }
  .proj-badge--ink { background: var(--as-surface-3); border-color: transparent; }
  .proj-people { margin-left: auto; display: flex; align-items: center; padding-left: 6px; }
  .proj-people__more { font-size: 12.5px; color: var(--as-ink-3); margin-left: 8px; }
  .proj-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--as-surface-3); border: 2px solid var(--as-surface); margin-left: -6px; display: inline-flex; align-items: center;
    justify-content: center; font-size: 11px; font-weight: 700; color: var(--as-ink-2); flex: none; }
  .proj-list .proj-avatar { margin-left: 0; }
  .proj__stats { display: flex; gap: 18px; font-size: 13px; color: var(--as-ink-3); flex-wrap: wrap; }
  .proj__stats b { color: var(--as-ink-2); }
  .proj__body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; padding: 24px 32px; align-items: start; }
  .proj__main, .proj__side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .proj__side { gap: 16px; }
  .proj__auto { margin: 0; }
  .proj-card { background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 14px; padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
  .proj-card__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
  .proj-card__title { font-size: 15px; font-weight: 700; }
  .proj-card__note { font-size: 12.5px; color: var(--as-ink-3); }
  .proj-card__head .proj-card__note:last-child { margin-left: auto; }
  .proj-card__empty { margin: 0; font-size: 13px; color: var(--as-ink-3); }
  .proj-summary__text { margin: 0; font-size: 14.5px; line-height: 1.5; }

  .proj-timeline__legend { margin-left: auto; font-size: 12px; color: var(--as-ink-3); display: flex; gap: 12px; }
  .proj-timeline__bars { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 6px; align-items: end; }
  .proj-timeline__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 104px; text-decoration: none; border-radius: 6px; padding-top: 4px; }
  .proj-timeline__col:hover, .proj-timeline__col.is-selected { background: var(--as-surface-2); }
  .proj-timeline__mtg { font-size: 9px; color: var(--as-ink-3); line-height: 1; height: 9px; letter-spacing: -1px; }
  .proj-timeline__bar { width: 100%; height: var(--h); border-radius: 3px; background: var(--as-ink-2); }
  .proj-timeline__bar.is-empty { background: var(--as-surface-3); }
  .proj-timeline__col.is-selected .proj-timeline__bar { background: var(--as-work); }
  .proj-timeline__label { font-size: 10.5px; font-family: var(--as-mono); color: var(--as-ink-3); white-space: nowrap; }
  .proj-timeline__period { border: 1px solid var(--as-border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--as-surface-2); }
  .proj-timeline__period-head { display: flex; align-items: baseline; font-size: 13.5px; }
  .proj-timeline__period-head span { margin-left: auto; font-size: 11.5px; color: var(--as-ink-3); }
  .proj-mini { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--as-ink-2); text-decoration: none; min-height: 26px; }
  .proj-mini span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .proj-mini small { font-size: 12px; color: var(--as-ink-3); }

  .proj-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--as-border); overflow-x: auto; }
  .proj-tabs__item { height: 38px; padding: 0 12px; display: flex; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--as-ink-3); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
  .proj-tabs__item.is-active { font-weight: 700; color: var(--as-ink); border-bottom-color: var(--as-ink); }
  .proj-list { display: flex; flex-direction: column; margin-top: -12px; }
  .proj-list__row { display: flex; align-items: center; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--as-border); text-decoration: none; color: var(--as-ink); }
  .proj-list__main { flex: 1; min-width: 0; display: flex; flex-direction: column; text-decoration: none; color: var(--as-ink); font-size: 13.5px; }
  .proj-list__main > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .proj-list__main small { font-size: 12px; color: var(--as-ink-3); }
  .proj-list__main .is-done { text-decoration: line-through; color: var(--as-ink-3); }
  .proj-list__when { font-size: 12px; color: var(--as-ink-3); white-space: nowrap; }
  .proj-split { position: sticky; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 10px 0; background: var(--as-canvas); font-size: 13px; flex-wrap: wrap; }
  .proj-split .input { flex: 1; width: auto; min-width: 160px; }
  .proj-line { display: flex; align-items: center; gap: 10px; min-height: 48px; border-top: 1px solid var(--as-border); text-decoration: none; color: var(--as-ink); }
  .proj-line__main { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13.5px; }
  .proj-line__main small { font-size: 12px; color: var(--as-ink-3); }
  .proj-task { display: flex; gap: 10px; align-items: center; min-height: 40px; font-size: 13.5px; border-bottom: 1px solid var(--as-border); text-decoration: none; color: var(--as-ink); }
  .proj-task:last-child { border-bottom: 0; }
  .proj-task__box { width: 17px; height: 17px; border-radius: 5px; border: 1.75px solid var(--as-ink-3); flex: none; }
  .proj-task__title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .proj-task__when { font-size: 12px; color: var(--as-ink-3); }
  .proj-task__when.is-late { color: var(--as-warn); font-weight: 600; }

  @media (max-width: 1099px) {
    .proj__body { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .proj-row { grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1fr) 90px; padding: 0 16px; }
    .proj-row > :nth-child(2), .proj-row > :nth-child(6), .proj-row > :nth-child(7) { display: none; }
    .proj-index__head, .proj__head { padding-inline: 16px; }
    .proj-goal { padding-inline: 16px; }
    .proj-suggest { margin-inline: 16px; }
  }
  @media (max-width: 599px) {
    .proj-row { grid-template-columns: minmax(0, 1fr) auto; min-height: 60px; }
    .proj-row > :nth-child(4), .proj-row > :nth-child(5) { display: none; }
    .proj-row--head { display: none; }
    .proj__title { font-size: 24px; }
    .proj-people { margin-left: 0; }
    .proj-manage__menu, .proj-new__form { position: fixed; left: 12px; right: 12px; top: auto; bottom: 80px; width: auto; }
    .proj-timeline__label { font-size: 9px; }
  }
}

@layer components {
  /* ── Projects: living summary, Ask, digests (Projects.dc.html, 3.3b) ─ */
  .proj-summary { padding: 0; gap: 0; box-shadow: var(--as-shadow-sm); }
  .proj-summary__head { padding: 14px 18px; border-bottom: 1px solid var(--as-border); }
  .proj-summary__updated { display: inline-flex; align-items: center; gap: 5px; }
  .proj-summary__toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--as-ink-2); cursor: pointer; }
  .proj-summary__toggle input { margin: 0; }
  .proj-summary__grid { padding: 16px 18px; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 14px 18px; font-size: 14.5px; line-height: 1.5; }
  .proj-summary__label { font-size: 12px; font-weight: 700; color: var(--as-ink-3); letter-spacing: .04em; padding-top: 2px; }
  .proj-summary__status { text-wrap: pretty; }
  .proj-summary__list { display: flex; flex-direction: column; gap: 6px; }
  .proj-summary__item { display: flex; flex-direction: column; gap: 6px; }
  .proj-summary__next { display: flex; gap: 8px; align-items: center; }
  .proj-summary__next > as-icon { color: var(--as-ink-3); flex: none; }
  .proj-summary--pending .proj-card__empty { display: flex; align-items: center; gap: 8px; }
  .proj-summary--pending { padding: 14px 18px; gap: 10px; }
  .proj-src { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 5px; background: var(--as-surface-3);
    font-size: 11px; font-weight: 600; color: var(--as-ink-3); white-space: nowrap; text-decoration: none; vertical-align: 1px; }
  a.proj-src:hover { color: var(--as-ink); }
  .proj-quote { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--as-border-2); background: var(--as-surface); font-size: 13px; color: var(--as-ink-2);
    display: flex; gap: 10px; box-shadow: var(--as-shadow-md); }
  .proj-quote > as-icon { color: var(--as-ink-3); margin-top: 2px; flex: none; }
  .proj-quote__from { font-size: 12px; color: var(--as-ink-3); margin-top: 4px; }
  .proj-quote__from a { font-weight: 600; color: var(--as-ink-2); }

  .proj-ask { padding: 14px 16px; }
  .proj-ask__form { height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--as-border-2); border-radius: 10px; color: var(--as-ink-3); }
  .proj-ask__form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--as-ink); }
  .proj-ask__busy { display: none; }
  .proj-ask.htmx-request .proj-ask__busy { display: inline-block; }
  .proj-ask__answer { font-size: 14px; line-height: 1.55; }
  .proj-ask__ref { font-size: 10px; font-weight: 700; color: var(--as-work); margin-left: 1px; }
  .proj-ask__sources { display: flex; flex-direction: column; gap: 4px; }
  .proj-ask__source { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--as-ink-2); min-height: 28px; text-decoration: none; }
  .proj-ask__source as-icon { color: var(--as-ink-3); flex: none; }
  .proj-ask__source span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .proj-ask__n { font-size: 10px; font-weight: 700; color: var(--as-work); width: 10px; flex: none; }
  .proj-ask__meta { font-size: 11.5px; color: var(--as-ink-3); display: flex; gap: 5px; align-items: center; }

  .proj-digests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .proj-digest { border: 1px solid var(--as-border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 6px; background: var(--as-surface-2); text-decoration: none; color: var(--as-ink); }
  .proj-digest:hover { border-color: var(--as-border-2); }
  .proj-digest__head { display: flex; align-items: baseline; font-size: 13.5px; }
  .proj-digest__head span { margin-left: auto; font-size: 11.5px; color: var(--as-ink-3); }
  .proj-digest__text { font-size: 13px; line-height: 1.45; color: var(--as-ink-2); }
  .proj-digest__more { font-size: 12px; font-weight: 600; color: var(--as-ink-2); margin-top: auto; }
  @media (max-width: 599px) {
    .proj-summary__grid { grid-template-columns: minmax(0, 1fr); gap: 4px 0; }
    .proj-summary__label { padding-top: 10px; }
    .proj-digests { grid-template-columns: minmax(0, 1fr); }
  }
}

@layer components {
  /* ── Memory: facts (Projects.dc.html "Settings → Memory", 3.3c) ──── */
  .mem-filter { align-self: flex-start; flex-wrap: wrap; }
  .mem-list { padding: 0; gap: 0; }
  .mem-fact { display: flex; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--as-border); align-items: flex-start; flex-wrap: wrap; }
  .mem-fact:last-child { border-bottom: 0; }
  .mem-fact--unsure { background: var(--as-ghost-bg); }
  .mem-fact__main { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 4px; }
  .mem-fact__text { font-size: 14.5px; line-height: 1.45; }
  .mem-fact__src { font-size: 12.5px; color: var(--as-ink-3); }
  .mem-fact__more summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--as-ink-2); }
  .mem-fact__sources { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
  .mem-fact__sources .proj-src { margin-left: 0; }
  .mem-fact__edit { display: flex; gap: 8px; }
  .mem-fact__edit .input { flex: 1; width: auto; }
  .mem-fact__actions { display: flex; align-items: center; gap: 10px; }
  .set-link-card { display: flex; align-items: center; gap: 14px; flex-direction: row; text-decoration: none; color: var(--as-ink); }
  .set-link-card > div { flex: 1; }
  .proj-facts { gap: 2px; }
  .proj-fact { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--as-border); }
  .proj-fact__text { font-size: 13.5px; }
  .proj-fact__src { font-size: 12px; color: var(--as-ink-3); }
  .proj-facts__all { margin-top: 8px; font-weight: 600; color: var(--as-ink-2); }
}

@layer components {
  /* ── First run (First Run.dc.html, 3.5) ───────────────────────────── */
  .fr { max-width: 520px; margin: 0 auto; padding: 16px 16px 48px; display: flex; flex-direction: column; gap: 14px; width: 100%; }
  .fr__crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--as-ink-3); font-weight: 600; }
  .fr__crumb a { color: inherit; display: inline-flex; }
  .fr__title { margin: 8px 0 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
  .fr__sub { margin: 0; font-size: 15px; color: var(--as-ink-2); line-height: 1.45; }
  .fr__cta { width: 100%; height: 52px; border-radius: 12px; font-size: 16px; font-weight: 700; justify-content: center; }
  .fr-card { background: var(--as-surface); border-radius: 16px; box-shadow: var(--as-shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
  .fr-card__h { padding: 14px 16px 6px; font-size: 13px; font-weight: 700; color: var(--as-ink-2); }
  .fr-card__sub { padding: 8px 16px 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--as-ink-3); text-transform: uppercase; }
  .fr-card__note { margin: 0; padding: 10px 16px 14px; font-size: 12.5px; color: var(--as-ink-3); line-height: 1.45; }
  .fr-acct { padding: 14px 16px; border-bottom: 1px solid var(--as-border); display: flex; flex-direction: column; gap: 6px; }
  .fr-acct__top { display: flex; align-items: center; gap: 8px; }
  .fr-acct__name { font-size: 15px; font-weight: 600; }
  .fr-acct__total { margin-left: auto; font-size: 16px; font-weight: 700; }
  .fr-acct__meta { display: flex; font-size: 12.5px; color: var(--as-ink-3); gap: 8px; padding: 2px 16px; }
  .fr-acct .fr-acct__meta { padding: 0; }
  .fr-acct__note { font-size: 12px; color: var(--as-ink-3); display: flex; align-items: center; gap: 5px; }
  .fr-acct--total { flex-direction: row; align-items: baseline; background: var(--as-surface-2); font-size: 14px; font-weight: 700; border-bottom: 0; }
  .fr-acct--total .mono { margin-left: auto; font-size: 16px; }
  .fr-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--as-border-2); font-size: 10.5px; font-weight: 700; color: var(--as-ink-3); }
  .fr-note { padding: 12px 14px; border-radius: 12px; background: var(--as-surface); display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: var(--as-ink-2); }
  .fr-note > as-icon { margin-top: 1px; flex: none; }
  .fr-note b { color: var(--as-ink); }
  .fr-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--as-border); }
  .fr-row__name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; overflow-wrap: anywhere; }
  .fr-row__name small { font-size: 12px; color: var(--as-ink-3); }
  .fr-row .input { width: auto; flex: none; }
  .fr-add { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--as-border); flex-wrap: wrap; }
  .fr-add .input:first-child { flex: 1; min-width: 160px; width: auto; }
  .fr-add .input { width: auto; }
  .fr-consent { padding: 14px 16px; gap: 12px; }
  .fr-consent__row { display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.45; }
  .fr-consent__k { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--as-ink-3); }
  .fr-consent__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px 0; border-top: 1px solid var(--as-border); border-bottom: 1px solid var(--as-border); }
  .fr-consent__grid > div { display: flex; flex-direction: column; gap: 3px; }
  .fr-consent__grid b { font-size: 18px; }
  .fr-consent__cap { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
  .fr-consent .fr-card__note { padding: 0; }
  .fr-stepper { display: inline-flex; align-items: center; border: 1px solid var(--as-border-2); border-radius: 9px; overflow: hidden; }
  .fr-stepper button { width: 34px; height: 34px; border: 0; background: var(--as-surface-2); font-size: 18px; cursor: pointer; color: var(--as-ink); }
  .fr-stepper input { width: 64px; height: 34px; border: 0; text-align: center; font-family: var(--as-mono); font-size: 16px; background: var(--as-surface); color: var(--as-ink); }
  .fr-card--stages { display: flex; flex-direction: column; padding: 4px 0 0; }
  .fr-stage { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--as-border); }
  .fr-stage__n { width: 24px; height: 24px; border-radius: 50%; background: var(--as-surface-3); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; }
  .fr-stage.is-done .fr-stage__n { background: var(--as-pos-bg); color: var(--as-pos); }
  .fr-stage__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .fr-stage__top { display: flex; align-items: baseline; font-size: 14px; }
  .fr-stage__top .mono { margin-left: auto; font-size: 13px; color: var(--as-ink-2); }
  .fr-stage small { font-size: 12px; color: var(--as-ink-3); }
  .fr-pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; background: var(--as-surface-2); border: 1px solid var(--as-border);
    font-size: 12px; font-weight: 600; color: var(--as-ink-2); text-decoration: none; white-space: nowrap; }
  .fr-pill--paused, .fr-pill--budget { background: var(--as-warn-bg); color: var(--as-warn); border-color: transparent; }
  .fr-pill--ready { background: var(--as-pos-bg); color: var(--as-pos); border-color: transparent; }
}

@layer components {
  /* ── First-run review (First Run.dc.html 5–8, 3.5b) ───────────────── */
  .fr__count { font-size: 15px; font-weight: 600; color: var(--as-ink-3); font-family: var(--as-mono); margin-left: 6px; }
  .fr__h2 { margin: 10px 0 0; font-size: 18px; font-weight: 700; }
  .fr-row--link { text-decoration: none; color: var(--as-ink); }
  .fr-proj { padding: 16px; gap: 8px; }
  .fr-proj__kind { font-size: 12px; font-weight: 700; color: var(--as-ink-3); letter-spacing: .04em; text-transform: uppercase; }
  .fr-proj__name { height: 44px; font-size: 18px; font-weight: 700; }
  .fr-proj__meta { font-size: 13px; color: var(--as-ink-3); margin-top: 8px; }
  .fr-proj__why { margin: 6px 0 0; font-size: 13px; color: var(--as-ink-2); line-height: 1.45; }
  .fr-proj__kinds { display: flex; gap: 16px; margin-top: 10px; font-size: 14px; }
  .fr-people { flex-direction: row; flex-wrap: wrap; gap: 8px; padding: 12px; }
  .fr-person__btn { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 999px; border: 1px solid var(--as-border-2); background: var(--as-surface); cursor: pointer; color: var(--as-ink); text-align: left; }
  .fr-person__btn.is-on { border-color: var(--as-work); background: var(--as-work-tint); }
  .fr-person__btn .proj-avatar { margin-left: 0; width: 28px; height: 28px; }
  .fr-person__name { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; }
  .fr-person__name small { font-size: 11px; font-weight: 500; color: var(--as-ink-3); }
  .fr-loop { padding: 12px 16px; border-top: 1px solid var(--as-border); display: flex; flex-direction: column; gap: 8px; }
  .fr-loop:first-child { border-top: 0; }
  .fr-loop__acts { display: flex; gap: 6px; flex-wrap: wrap; }
  .fr-style { padding: 12px 16px; gap: 12px; }
  .fr-style__lang { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
  .fr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .fr-chip { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--as-surface-3); font-size: 12.5px; font-weight: 600; color: var(--as-ink-2); }
  .fr-style__tabs { align-self: flex-start; }
  .fr-style__tabs form { display: contents; }
  .fr-sample { padding: 12px 16px; gap: 8px; }
  .fr-sample .fr-card__note { padding: 0; }
  .fr-sample__text { white-space: pre-wrap; font-size: 14.5px; line-height: 1.5; }
}

@layer components {
  /* ── First run partial states (First Run.dc.html, 3.5c) ───────────── */
  .proj-partial { margin: 0; display: flex; gap: 8px; align-items: flex-start; padding: 10px 14px; border-radius: 10px; border: 1.5px dashed var(--as-ghost-border); background: var(--as-ghost-bg); font-size: 13px; color: var(--as-ink-2); line-height: 1.45; }
  .proj-partial b { color: var(--as-ink); }
  .proj-partial > as-icon { margin-top: 1px; flex: none; }
  .proj-badge--ghost { border: 1.5px dashed var(--as-ghost-border); background: var(--as-ghost-bg); color: var(--as-ink-3); text-decoration: none; }
  .proj-timeline__col.is-unread .proj-timeline__bar { background: transparent; border: 1.5px dashed var(--as-ghost-border); }
}

@layer components {
  /* ── Money (Money.dc.html, Phase 4) ───────────────────────────────── */
  .money-page { padding: 22px 32px 40px; display: flex; flex-direction: column; gap: 16px; min-width: 0; overflow-y: auto; }
  .money-page__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .money-page__title { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; flex-basis: 100%; }
  .money-page__head .money-page__title:first-child { flex-basis: auto; }
  .money-page__note { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--as-ink-3); }
  .money-back { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--as-ink-3); text-decoration: none; }
  .money-card { background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; }
  .money-card__title { margin: 0; padding: 14px 16px 6px; font-size: 15px; font-weight: 700; }
  .money-card__note { margin: 0; padding: 0 16px; font-size: 12.5px; color: var(--as-ink-3); }
  .money-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--as-border); text-decoration: none; color: var(--as-ink); }
  .money-row:last-child { border-bottom: 0; }
  .money-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
  .money-row__main small { font-size: 12.5px; color: var(--as-ink-3); }
  .money-status { font-size: 12px; font-weight: 700; color: var(--as-ink-3); white-space: nowrap; }
  .money-status--review, .money-status--locked { color: var(--as-warn); }
  .money-status--confirmed { color: var(--as-pos); }
  .money-empty { margin: 0; padding: 16px; font-size: 13.5px; color: var(--as-ink-3); }
  .money-unlock { flex-direction: row; align-items: center; gap: 10px; padding: 14px 16px; flex-wrap: wrap; }
  .money-unlock p { margin: 0; flex-basis: 100%; font-size: 13.5px; }
  .money-unlock .input { width: auto; flex: 1; min-width: 160px; }
  .stmt { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr); gap: 20px; align-items: start; }
  .stmt__page { position: relative; margin: 0; background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 12px; overflow: hidden; }
  .stmt__page img { display: block; width: 100%; height: auto; }
  .stmt__page figcaption { display: flex; gap: 12px; padding: 8px 12px; font-size: 12px; color: var(--as-ink-3); border-top: 1px solid var(--as-border); }
  .stmt__box { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); outline: 2px solid var(--as-work); outline-offset: 2px; border-radius: 2px; }
  .stmt__box.is-unsure { outline-style: dashed; }
  .stmt__fields { padding-bottom: 14px; gap: 2px; }
  .stmt__field { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 4px 10px; padding: 6px 16px; font-size: 13px; color: var(--as-ink-2); }
  .stmt__field .input { width: 100%; font-family: var(--as-mono); }
  .stmt__field small { grid-column: 2; font-size: 11.5px; color: var(--as-warn); }
  .stmt__field.is-unsure .input { border-style: dashed; border-color: var(--as-warn); }
  .stmt__actions { display: flex; gap: 8px; padding: 12px 16px 0; }
  @media (max-width: 1099px) { .stmt { grid-template-columns: minmax(0, 1fr); } .money-page { padding: 16px; } }
}

@layer components {
  /* ── Money overview + debt plan (Money.dc.html, 4.4a) ──────────────── */
  .money-head .money-page__title { flex-basis: auto; }
  .money-local { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--as-surface-3); font-size: 11.5px; font-weight: 600; color: var(--as-ink-2); }
  .money-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  .money-kpi { background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .money-kpi--ink { background: var(--as-ink); color: var(--as-surface); border-color: transparent; }
  .money-kpi__k { font-size: 12px; font-weight: 600; color: var(--as-ink-3); }
  .money-kpi--ink .money-kpi__k, .money-kpi--ink .money-kpi__n { color: inherit; opacity: .8; }
  .money-kpi__v { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }
  .money-kpi__v--date { font-size: 26px; }
  .money-kpi__n { font-size: 12px; color: var(--as-ink-3); }
  .money-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .money-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .money-card__head { display: flex; align-items: center; gap: 10px; padding: 14px 18px 6px; flex-wrap: wrap; }
  .money-card__head .money-card__title { padding: 0; font-size: 16px; font-weight: 700; }
  .money-card__head .money-card__note { padding: 0; margin-left: auto; }
  .money-prio__row { display: flex; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--as-border); align-items: flex-start; }
  .money-prio__n { font-size: 13px; font-weight: 700; color: var(--as-ink-3); width: 16px; padding-top: 2px; }
  .money-prio__main { flex: 1; min-width: 0; }
  .money-prio__what { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
  .money-prio__why { font-size: 12.5px; color: var(--as-ink-3); margin-top: 3px; line-height: 1.4; }
  .money-prio__foot { display: flex; gap: 6px; align-items: center; padding: 10px 18px 14px; border-top: 1px solid var(--as-border); }
  .money-flag { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 6px; background: var(--as-warn-bg); color: var(--as-warn); font-size: 11.5px; font-weight: 700; }
  .money-flag--crit { background: var(--as-crit-bg); color: var(--as-crit); }
  .money-chart { width: 100%; height: 190px; display: block; padding: 0 18px; box-sizing: border-box; }
  .money-chart__under { fill: var(--as-warn-bg); }
  .money-chart__buffer { stroke: var(--as-warn); stroke-dasharray: 4 4; stroke-width: 1; }
  .money-chart__buflabel { font-size: 10.5px; fill: var(--as-warn); font-family: var(--as-mono); }
  .money-chart__line { fill: none; stroke: var(--as-ink); stroke-width: 2.25; stroke-linejoin: round; }
  .money-chart__low { fill: var(--as-surface); stroke: var(--as-warn); stroke-width: 2; }
  .money-chart__mark { stroke: var(--as-border-2); }
  .money-chart__mark.is-in { stroke: var(--as-pos); }
  .money-chart__label { font-size: 10.5px; fill: var(--as-ink-2); }
  .money-chart__label.is-in { fill: var(--as-pos); font-weight: 700; }
  .money-chart__axis { display: flex; font-size: 11px; color: var(--as-ink-3); padding: 2px 18px 14px; }
  .money-bill { display: flex; gap: 10px; align-items: center; min-height: 38px; font-size: 13.5px; padding: 0 18px; border-top: 1px solid var(--as-border); }
  .money-bill__d { font-size: 12px; color: var(--as-ink-3); width: 52px; }
  .money-bill__n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .money-bill__a { font-weight: 600; }
  .money-pill { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 7px; border-radius: 5px; font-size: 11px; font-weight: 700; background: var(--as-surface-3); color: var(--as-ink-2); white-space: nowrap; }
  .money-pill--soon { background: var(--as-warn-bg); color: var(--as-warn); }
  .money-pill--pos { background: var(--as-pos-bg); color: var(--as-pos); }
  .money-extra { flex-direction: row; align-items: center; gap: 24px; padding: 18px 20px; flex-wrap: wrap; }
  .money-extra__val { display: flex; flex-direction: column; gap: 2px; }
  .money-extra__val .money-card__note { padding: 0; }
  .money-extra__amount { font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
  .money-extra__slider { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 6px; }
  .money-extra__slider input { width: 100%; height: 28px; accent-color: var(--as-ink); }
  .money-extra__ends { display: flex; font-size: 11.5px; color: var(--as-ink-3); }
  .money-extra__hint { margin: 0; font-size: 13px; color: var(--as-ink-2); max-width: 280px; line-height: 1.45; }
  .money-plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); gap: 16px; }
  .money-plan { padding: 18px 20px; gap: 10px; }
  .money-plan.is-chosen { border: 2px solid var(--as-ink); }
  .money-plan__head { display: flex; align-items: center; gap: 8px; font-size: 17px; }
  .money-plan__head .money-card__note { padding: 0; }
  .money-plan__nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .money-plan__nums > div { display: flex; flex-direction: column; }
  .money-plan__nums .money-card__note { padding: 0; font-size: 11.5px; font-weight: 600; }
  .money-plan__nums b { font-size: 20px; }
  .money-plan__saved { color: var(--as-pos); }
  .money-plan__order { margin: 0; font-size: 13px; color: var(--as-ink-2); line-height: 1.45; }
  .money-plan .btn { align-self: flex-start; }
  .money-plan--min { opacity: .85; }
  .money-plan--min .money-plan__nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .money-debt { display: grid; grid-template-columns: minmax(160px, 1.4fr) 110px 90px 100px 80px auto auto auto; gap: 8px 12px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--as-border); }
  .money-debt.is-out { opacity: .7; }
  .money-debt__name { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
  .money-debt__name small { font-size: 12px; color: var(--as-ink-3); }
  .money-debt__bal { font-weight: 700; font-size: 14px; }
  .money-debt__f { display: flex; flex-direction: column; gap: 2px; font-size: 11px; font-weight: 600; color: var(--as-ink-3); }
  .money-debt__f .input { width: 100%; }
  .money-debt__chk { font-size: 12.5px; display: flex; gap: 5px; align-items: center; white-space: nowrap; }
  .money-debt__src { grid-column: 1 / -1; font-size: 11.5px; color: var(--as-ink-3); }
  /* 11.1: Money · Categories (one editable list). */
  .money-chart__in { fill: var(--as-pos); opacity: .55; }
  .money-chart__out { fill: var(--as-ink-3); opacity: .55; }
  .money-line { display: grid; grid-template-columns: minmax(140px, 1.2fr) minmax(130px, 1fr) 90px auto auto auto; gap: 8px 12px; align-items: end; padding: 10px 18px; border-top: 1px solid var(--as-border); }
  .money-line.is-hidden { opacity: .65; }
  .money-plan__rows { display: flex; flex-direction: column; }
  .money-review { grid-template-columns: minmax(160px, 1.3fr) 90px minmax(0, 2fr) auto; align-items: center; }
  .money-review__act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .money-line__count, .money-cat__count { font-size: 12px; color: var(--as-ink-3); white-space: nowrap; }
  .money-shared { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 5px; border-radius: 4px; border: 1px solid var(--as-border-2); font-size: 10px; font-weight: 700; color: var(--as-ink-3); margin-left: 6px; }
  @media (max-width: 1099px) {
    .money-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .money-grid, .money-plans { grid-template-columns: minmax(0, 1fr); }
    .money-debt { grid-template-columns: minmax(0, 1fr) auto; }
    .money-debt__f, .money-debt__chk { grid-column: span 1; }
    .money-line { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .money-review { grid-template-columns: minmax(0, 1fr) auto; }
    .money-review__act { grid-column: 1 / -1; }
  }
}

@layer components {
  /* ── Money: transactions, cash flow, spending (4.4b) ──────────────── */
  .money-tx { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; flex: 1; }
  .money-tx.has-detail { grid-template-columns: minmax(0, 1fr) 380px; }
  .money-tx__list { min-width: 0; overflow-y: auto; background: var(--as-surface); }
  .money-tx__head { display: flex; align-items: center; gap: 12px; padding: 18px 24px 12px; flex-wrap: wrap; }
  .money-tx__head .money-page__title { flex-basis: auto; }
  .money-tx__search { flex: 1; min-width: 200px; height: 36px; }
  .money-tx__head select { width: auto; }
  .money-tx__day { padding: 14px 24px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--as-ink-3); }
  .money-txrow { display: flex; align-items: center; gap: 12px; padding: 10px 24px; border-bottom: 1px solid var(--as-border); text-decoration: none; color: var(--as-ink); }
  .money-txrow:hover, .money-txrow.is-selected { background: var(--as-surface-2); }
  .money-txrow__main { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
  .money-txrow__main b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .money-txrow__main small { font-size: 12px; color: var(--as-ink-3); }
  .money-txrow__cat { font-size: 12px; font-weight: 600; color: var(--as-ink-2); background: var(--as-surface-3); border-radius: 5px; padding: 2px 7px; white-space: nowrap; }
  .money-txrow__cat.is-none { background: transparent; border: 1px dashed var(--as-ghost-border); color: var(--as-ink-3); }
  .money-txrow__amt { font-size: 14px; font-weight: 600; width: 96px; text-align: right; }
  .money-txrow__amt.is-in, .money-bill__a.is-in { color: var(--as-pos); }
  .money-tx__detail { border-left: 1px solid var(--as-border); background: var(--as-canvas); padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
  .money-tx__merchant { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
  .money-cat { padding: 12px 14px; gap: 8px; }
  .money-cat__h { font-size: 13px; font-weight: 700; }
  .money-cat__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
  .money-cat__opt { display: flex; align-items: center; gap: 6px; font-size: 13px; min-height: 30px; }
  .money-cat__always { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
  .money-cat .btn { align-self: flex-start; }
  .money-note { display: flex; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--as-surface); font-size: 13px; color: var(--as-ink-2); line-height: 1.45; }
  .money-tx__facts { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 6px 10px; margin: 0; font-size: 12.5px; }
  .money-tx__facts dt { color: var(--as-ink-3); }
  .money-tx__facts dd { margin: 0; overflow-wrap: anywhere; }
  .money-alert { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--as-crit-bg); color: var(--as-crit); font-size: 13.5px; line-height: 1.45; }
  .money-alert p { margin: 4px 0 0; color: var(--as-ink-2); }
  .money-alert--warn { background: var(--as-warn-bg); color: var(--as-warn); }
  .money-chart--big { height: 240px; }
  .money-kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
  .money-kpi__v small { font-size: 14px; color: var(--as-ink-3); margin-left: 2px; }
  .money-spend { display: grid; grid-template-columns: 150px minmax(0, 1fr) 90px 120px; gap: 12px; align-items: center; padding: 10px 18px; border-top: 1px solid var(--as-border); font-size: 13.5px; }
  .money-spend__a { text-align: right; font-weight: 600; }
  .money-spend__t { font-size: 12px; color: var(--as-ink-3); }
  .money-bill__sub { display: block; font-size: 12px; color: var(--as-ink-3); }
  .money-bill .money-bill__n { white-space: normal; }
  @media (max-width: 1099px) {
    .money-tx.has-detail { grid-template-columns: minmax(0, 1fr); }
    .money-tx.has-detail .money-tx__list { display: none; }
    .money-spend { grid-template-columns: minmax(0, 1fr) 90px; }
    .money-spend__bar, .money-spend__t { display: none; }
  }
}

@layer components {
  /* ── Money: bills, review, ask (4.4c) ─────────────────────────────── */
  .money-pill--paid { background: var(--as-pos-bg); color: var(--as-pos); }
  .money-pill--late { background: var(--as-crit-bg); color: var(--as-crit); }
  .money-pill b { margin-right: 3px; }
  .money-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .money-review__headline { margin: 0; font-size: 20px; font-weight: 600; }
  .money-review__line { margin: 0; padding: 10px 18px; border-top: 1px solid var(--as-border); font-size: 14px; }
  .money-ask { padding: 12px 14px; gap: 10px; }
  .money-ask__answer { margin: 0; font-size: 14.5px; line-height: 1.5; }
  .money-ask__facts { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; margin: 0; font-size: 12.5px; }
  .money-ask__facts dt { display: flex; gap: 6px; color: var(--as-ink-2); }
  .money-ask__facts dd { margin: 0; text-align: right; font-weight: 600; }
  .money-ask__facts .money-ask__src { grid-column: 1 / -1; text-align: left; font-weight: 400; color: var(--as-ink-3); font-size: 11.5px; padding-left: 16px; }
  .money-ask .money-card__note { padding: 0; }
  @media (max-width: 1099px) { .money-kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
}

@layer components {
  /* ── Money flows + lock (Money Flows.dc.html, 4.5) ────────────────── */
  .money-lock { align-items: center; text-align: center; padding-top: 48px; }
  .money-lock__err { margin: 0; font-size: 13px; color: var(--as-crit); min-height: 18px; }
  .today-money { display: flex; flex-direction: column; gap: 8px; }
  .today-money__head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
  .today-money__state { font-size: 12px; color: var(--as-ink-3); }
  .today-money__open { font-size: 12.5px; font-weight: 600; color: var(--as-ink-2); }
  .today-money__nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .today-money__nums div { display: flex; flex-direction: column; font-size: 12px; color: var(--as-ink-3); }
  .today-money__nums b { font-size: 20px; color: var(--as-ink); }
  .today-money__p { margin: 0; font-size: 13.5px; display: flex; gap: 8px; }
  .today-money__p .mono { color: var(--as-ink-3); }
  .today-money__p.is-red { color: var(--as-crit); font-weight: 600; }
  .fr-consent__cap .input { width: 120px; }
}

@layer components {
  /* ── People (People.dc.html) ─────────────────────────────────────────
     Desktop: 360 px index + person page. Below 1100 px one pane at a time; phone uses cards. */
  .people { display: grid; grid-template-columns: 360px minmax(0, 1fr); flex: 1; min-height: 0; }
  .people__index { border-right: 1px solid var(--as-border); padding: 20px 14px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-width: 0; }
  .people__head { display: flex; align-items: center; gap: 8px; padding: 0 6px 8px; }
  .people__title { font-size: 22px; font-weight: 700; }
  .people__head .segmented { margin-left: auto; padding: 2px; }
  .people__head .segmented__item { height: 26px; padding: 0 11px; }
  .people__filter { margin: 0 6px 6px; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 10px; background: var(--as-surface-3); color: var(--as-ink-3); }
  .people__filter input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 15px; color: var(--as-ink); }
  .people__filter input::placeholder { color: var(--as-ink-3); }
  .people__label { display: flex; align-items: center; gap: 6px; padding: 10px 12px 2px; font-size: 12px; font-weight: 700; color: var(--as-ink-3); letter-spacing: .04em; text-transform: uppercase; }
  .people__count::before { content: "· "; }
  .people-group { display: flex; flex-direction: column; gap: 2px; }
  .people__more { margin-top: auto; font-size: 12.5px; color: var(--as-ink-3); padding: 8px 12px; border-top: 1px solid var(--as-border); }
  .people__more b { color: var(--as-ink-2); }
  .people__detail { min-width: 0; overflow-y: auto; display: flex; flex-direction: column; }

  .avatar {
    width: 34px; height: 34px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
    background: var(--block-bg, var(--as-surface-3)); color: var(--block-fg, var(--as-ink-2)); font-size: 13px; font-weight: 700; letter-spacing: -.01em;
  }
  .avatar--sm { width: 30px; height: 30px; font-size: 12px; }
  .avatar--lg { width: 64px; height: 64px; font-size: 24px; }

  .person-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; }
  .person-row:hover { background: var(--as-surface-2); }
  .person-row[aria-current="true"] { background: var(--as-surface); box-shadow: var(--as-shadow-sm); }
  .person-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .person-row__name { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; }
  .person-row__sub { font-size: 12px; color: var(--as-ink-3); margin-top: 2px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .person-row__date { font-size: 12px; color: var(--as-ink-3); white-space: nowrap; }
  .person-row__since { display: none; }

  .people-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 20px; font-size: 14px; color: var(--as-ink-2); }
  .people-empty b { font-size: 18px; color: var(--as-ink); }
  .people-empty p { margin: 0; line-height: 1.5; max-width: 320px; }
  .people-empty__icon { width: 52px; height: 52px; border-radius: 12px; background: var(--as-surface-3); display: flex; align-items: center; justify-content: center; color: var(--as-ink-2); }
  .people-empty--inline { padding: 16px 12px; }
  .people-empty--inline b { font-size: 15px; }

  /* Person page */
  .person { padding: 24px 32px; display: flex; flex-direction: column; gap: 18px; }
  .person__back { display: none; align-items: center; gap: 2px; color: var(--as-brand); font-size: 16px; }
  .person__head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
  .mem-tell { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
  .mem-tell__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
  .mem-tell__result { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--as-border); padding-top: 10px; }
  .mem-tell__change { margin: 0; font-size: 13.5px; }
  .mem-tell__was { color: var(--as-ink-3); }
  .person__merged { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--as-ink-3); margin: 8px 0 0; }
  .person__id { flex: 1; min-width: 320px; }
  .person__name { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
  .person__meta { font-size: 14px; color: var(--as-ink-2); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
  .person__meta .mono { font-family: var(--as-mono); font-size: 13px; }
  .person__ctx { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
  .person__ctx--work { color: var(--as-work); }
  .person__ctx--work .ctx { border-radius: 2px; }
  .person__ctx--personal { color: var(--as-personal); }
  .person__ctx--personal .ctx { border-radius: 50%; }
  .person__counts { color: var(--as-ink-3); }
  .person__actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .person__actions form { display: contents; }
  .person-act {
    height: 36px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 9px;
    font-size: 13.5px; font-weight: 600; white-space: nowrap; border: 1px solid var(--as-border-2); background: var(--as-surface); cursor: pointer; list-style: none;
  }
  .person-act::-webkit-details-marker { display: none; }
  .person-act--on, .person-act--on as-icon { color: var(--as-warn); }
  .person-act--quiet { border-color: transparent; background: transparent; padding: 0 8px; color: var(--as-ink-2); }
  .person-act--phone, .person-act__short { display: none; }
  .person__sparse { margin: 0; font-size: 14px; color: var(--as-ink-2); line-height: 1.5; max-width: 560px; }

  .person-pop { position: relative; }
  .person-pop__panel {
    position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: 360px; padding: 16px; display: flex; flex-direction: column; gap: 10px;
    background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 14px; box-shadow: var(--as-shadow-lg);
    text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--as-ink);
  }
  .person-pop--right .person-pop__panel { left: auto; right: 0; }
  .person-pop__title { font-size: 16px; font-weight: 700; }
  .person-pop__text { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; }
  .person-pop__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
  .remind__opt { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 9px; font-size: 14px; cursor: pointer; }
  .remind__opt input { position: absolute; opacity: 0; pointer-events: none; }
  .remind__opt:has(input:checked) { background: var(--as-surface-3); font-weight: 700; }
  .remind__opt:has(input:focus-visible) { box-shadow: var(--as-focus); }
  .remind__when { margin-left: auto; font-family: var(--as-mono); font-size: 12px; color: var(--as-ink-3); }
  .remind__opt:has(input:checked) .remind__when { color: var(--as-ink-2); font-weight: 700; }
  .person-pop--merge .person-pop__panel { width: 600px; max-width: calc(100vw - 32px); right: 0; left: auto; padding: 24px; gap: 16px; }
  .merge__title { font-size: 19px; font-weight: 700; }
  .merge__pair { display: flex; align-items: center; gap: 14px; }
  .merge__card { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--as-border); border-radius: 12px; font-size: 14px; }
  .merge__sub { display: block; font-size: 12.5px; color: var(--as-ink-3); overflow: hidden; text-overflow: ellipsis; }
  .merge__pick { flex: 1; min-width: 0; height: 58px; border: 2px solid var(--as-ink); border-radius: 12px; }
  .merge__text { margin: 0; font-size: 14px; color: var(--as-ink-2); line-height: 1.5; }
  .merge__undo { margin-right: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--as-ink-3); }

  .person__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  .person__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .person-card { background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .person-card--facts { gap: 0; }
  .person-card--tight { gap: 2px; }
  .person-card--flush { padding: 0; gap: 0; overflow: hidden; }
  .person-card__label { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--as-ink-3); letter-spacing: .04em; text-transform: uppercase; }
  .person-card__label > .person-pop, .person-card__aside { margin-left: auto; }
  .person-card__label--pad { padding: 16px 18px 6px; }
  .person-card__aside { text-transform: none; letter-spacing: 0; font-size: 13px; }
  .person-card__add { text-transform: none; letter-spacing: 0; font-weight: 600; cursor: pointer; list-style: none; }
  .person-card__add::-webkit-details-marker { display: none; }
  .person-card__note { padding: 10px 18px 14px; font-size: 12.5px; color: var(--as-ink-3); }

  .person-line { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; }
  .person-line__title { display: block; }
  .person-line__sub { display: block; font-size: 12.5px; color: var(--as-ink-3); margin-top: 2px; }
  .pos { color: var(--as-pos); }

  .owe-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .owe-pair--one { grid-template-columns: minmax(0, 1fr); }
  .owe { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 10px; background: var(--as-surface-2); min-width: 0; }
  .owe--you { background: var(--as-warn-bg); }
  .owe__label { font-size: 12px; font-weight: 700; color: var(--as-ink-3); text-transform: uppercase; }
  .owe--you .owe__label { color: var(--as-warn); }
  .owe__item { display: flex; flex-direction: column; gap: 2px; }
  .owe__title { font-size: 14px; font-weight: 600; }
  .owe__sub { font-size: 12.5px; color: var(--as-ink-2); }
  .owe .btn { height: 32px; padding: 0 14px; border-radius: 9px; font-size: 13.5px; }

  .person-task { display: flex; gap: 10px; align-items: center; padding-top: 4px; }
  .person-task .check { border-radius: 6px; }
  .person-task__title { flex: 1; min-width: 0; font-size: 14px; }
  .person-task__due { font-size: 12px; color: var(--as-ink-3); font-family: var(--as-mono); }

  .person-meet { display: flex; gap: 12px; align-items: center; }
  .person-meet__bar { width: 4px; align-self: stretch; border-radius: 2px; background: var(--block-fg, var(--cal-1)); }
  .person-meet__title { font-size: 14.5px; font-weight: 600; }
  .person-meet__sub { font-size: 12.5px; color: var(--as-ink-3); margin-top: 2px; line-height: 1.4; }
  .person-meet .btn { height: 32px; padding: 0 14px; border-radius: 9px; font-size: 13.5px; }

  .person-topic { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--as-border); }
  .person-topic__title { display: block; font-size: 14.5px; }
  .person-topic__sub { display: block; font-size: 12.5px; color: var(--as-ink-3); margin-top: 2px; }

  .person-chips { display: flex; gap: 8px; flex-wrap: wrap; }
  .src-chip { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 5px; background: var(--as-surface-3); font-size: 11.5px; font-weight: 600; color: var(--as-ink-2); white-space: nowrap; }
  .person-note { font-size: 14px; line-height: 1.5; white-space: pre-line; }
  .person-note__date { margin-left: 8px; font-size: 12px; color: var(--as-ink-3); font-family: var(--as-mono); }

  .fact-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--as-border); }
  .fact-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
  .fact-row__text { font-size: 14px; }
  .fact-row__chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .fact-row__chips:empty { display: none; }
  .fact-row__edit { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 7px; color: var(--as-ink-3); cursor: pointer; list-style: none; }
  .fact-row__edit::-webkit-details-marker { display: none; }
  .fact-row__ids { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--as-ink-2); padding-top: 10px; }
  .fact-row__ids .mono { font-family: var(--as-mono); }

  .contact-row { display: grid; grid-template-columns: 52px 18px 1fr; gap: 8px; align-items: start; font-size: 13.5px; padding: 6px 0; }
  .contact-row__when { font-family: var(--as-mono); font-size: 12px; color: var(--as-ink-3); padding-top: 1px; }
  .contact-row as-icon { margin-top: 1px; }
  .contact-row__meet { color: var(--block-fg, var(--cal-1)); }

  @media (max-width: 1099px) {
    .people { grid-template-columns: minmax(0, 1fr); }
    .people > .people__detail { display: none; }
    .people.has-detail > .people__index { display: none; }
    .people.has-detail > .people__detail { display: flex; }
    .person__back { display: inline-flex; }
    .person__grid { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 599px) {
    /* iPhone: large title, card groups, action tiles (People.dc.html iPhone frames). */
    .people__index { border: 0; padding: 4px 16px 24px; gap: 8px; }
    .people__head { padding: 0 4px; }
    .people__title { font-size: 32px; letter-spacing: -.02em; }
    .people__head .segmented { display: none; }
    .people__filter { margin: 0; height: 36px; }
    .people__label { padding: 14px 4px 0; font-size: 20px; font-weight: 700; color: var(--as-ink); letter-spacing: -.01em; text-transform: none; }
    .people__count { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--as-ink-3); }
    .people__count::before { content: none; }
    .people-group { background: var(--as-surface); border-radius: 16px; box-shadow: var(--as-shadow-sm); overflow: hidden; gap: 0; }
    .people-group .person-row { border-radius: 0; padding: 12px 16px; min-height: 64px; }
    .people-group .person-row + .person-row { border-top: 1px solid var(--as-border); }
    .person-row__name { font-size: 16px; }
    .person-row__sub { font-size: 13px; white-space: normal; }
    .person-row__since { display: inline; }
    .avatar { width: 36px; height: 36px; }
    .people__more { margin-top: 8px; border: 0; text-align: center; }

    .person { padding: 4px 16px 24px; gap: 14px; }
    .person__back { font-size: 17px; margin-left: -6px; }
    .person__head { gap: 14px; }
    .person__id { min-width: 0; }
    .avatar--lg { width: 56px; height: 56px; font-size: 22px; }
    .person__name { font-size: 26px; }
    .person__meta { gap: 6px 10px; font-size: 14px; }
    .person__actions { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .person__actions > .person-pop--merge { display: none; }
    .person-act, .person__actions .person-pop > .person-act { width: 100%; height: 60px; flex-direction: column; gap: 4px; padding: 0; border: 0; border-radius: 12px; background: var(--as-surface); box-shadow: var(--as-shadow-sm); font-size: 13px; font-weight: 700; }
    .person-act--phone, .person-act__short { display: inline-flex; }
    .person-act__long { display: none; }
    .person-pop__panel, .person-pop--merge .person-pop__panel { position: fixed; left: 12px; right: 12px; top: auto; bottom: 96px; width: auto; }
    .person-card { border: 0; border-radius: 16px; box-shadow: var(--as-shadow-sm); }
    .owe-pair { grid-template-columns: minmax(0, 1fr); }
    .merge__pair { flex-direction: column; align-items: stretch; }
  }
}

@layer components {
  /* ── Travel (Travel.dc.html) ─────────────────────────────────────────
     Trips list: cards + past rows. Trip page: 240 px trips · itinerary in local times · 300 px rail. */
  .travel { padding: 28px 32px 40px; display: flex; flex-direction: column; gap: 14px; }
  .travel__head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 6px; }
  .travel__head .segmented { margin-left: auto; }
  .travel__eyebrow { font-size: 13px; font-weight: 600; color: var(--as-ink-3); }
  .travel__title { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
  .travel__label { display: flex; align-items: center; gap: 8px; padding-top: 8px; font-size: 12px; font-weight: 700; color: var(--as-ink-3); letter-spacing: .04em; text-transform: uppercase; }
  .travel__label--phone { display: none; }
  .travel__none { font-size: 14px; color: var(--as-ink-3); padding: 8px 0; }
  .travel__none a { color: var(--as-ink-2); font-weight: 600; text-decoration: underline; }
  .travel-empty { margin-top: 24px; background: var(--as-surface); border-radius: 16px; box-shadow: var(--as-shadow-sm); max-width: 420px; align-self: center; }
  .travel-empty__note { font-size: 13px; color: var(--as-ink-3); }

  .trip-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .trip-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 14px; background: var(--as-surface); border: 1px solid var(--as-border); }
  .trip-card:hover { border-color: var(--as-border-2); }
  .trip-card__top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
  .trip-card__when { font-family: var(--as-mono); font-size: 12px; font-weight: 700; color: var(--as-ink-3); text-transform: uppercase; }
  .trip-card__title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
  .trip-card__sub { font-size: 14px; color: var(--as-ink-2); }
  .trip-card__foot { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
  .trip-card__gap { margin-left: auto; }
  .trip-kind { width: 28px; height: 28px; border-radius: 7px; background: var(--as-surface-3); color: var(--as-ink-2); display: inline-flex; align-items: center; justify-content: center; }
  .trip-ctx { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; }
  .trip-ctx--work { color: var(--as-work); }
  .trip-ctx--work .ctx { border-radius: 2px; }
  .trip-ctx--personal { color: var(--as-personal); }
  .trip-ctx--personal .ctx { border-radius: 50%; }

  .trip-pasts { background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 14px; overflow: hidden; }
  .trip-past { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
  .trip-past + .trip-past { border-top: 1px solid var(--as-border); }
  .trip-past:hover { background: var(--as-surface-2); }
  .trip-past__title { display: block; font-size: 15px; }
  .trip-past__sub { display: block; font-size: 13px; color: var(--as-ink-3); margin-top: 2px; }
  .trip-past .trip-ctx { margin-left: 0; }
  .trip-past__n { font-size: 13px; color: var(--as-ink-3); white-space: nowrap; }

  .trip { display: grid; grid-template-columns: 240px minmax(0, 1fr) 300px; flex: 1; min-height: 0; }
  .trip__list { border-right: 1px solid var(--as-border); padding: 20px 14px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; }
  .trip__list .travel__label { padding: 8px 10px 4px; }
  .trip__list-title { font-size: 22px; font-weight: 700; padding: 0 8px 4px; }
  .trip-mini { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; }
  .trip-mini:hover { background: var(--as-surface-2); }
  .trip-mini[aria-current="true"] { background: var(--as-surface); box-shadow: var(--as-shadow-sm); }
  .trip-mini__title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
  .trip-mini__sub { font-size: 12px; color: var(--as-ink-3); }
  .trip-mini__flags { display: flex; gap: 4px; flex-wrap: wrap; }
  .trip-mini--past { padding: 8px 12px; font-size: 13.5px; color: var(--as-ink-2); }
  .trip__list-foot { margin-top: auto; font-size: 12.5px; color: var(--as-ink-3); padding: 10px; border-top: 1px solid var(--as-border); line-height: 1.45; }

  .trip__main { padding: 24px 28px; display: flex; flex-direction: column; gap: 14px; min-width: 0; overflow-y: auto; }
  .trip__head { display: flex; align-items: flex-end; gap: 12px; }
  .trip__when { font-size: 13px; font-weight: 600; color: var(--as-ink-3); }
  .trip__title { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
  .trip-btn { height: 36px; padding: 0 14px; font-size: 13.5px; }

  .trip-alert { display: flex; gap: 10px 14px; align-items: center; flex-wrap: wrap; padding: 14px 18px; border-radius: 14px; background: var(--as-warn-bg); border: 1px solid var(--as-warn-border); }
  .trip-alert__icon { color: var(--as-warn); }
  .trip-alert__text { flex: 1; min-width: calc(100% - 40px); }
  .trip-alert__title { font-size: 15px; font-weight: 700; }
  .trip-alert__title s { font-weight: 500; color: var(--as-ink-3); font-family: var(--as-mono); }
  .trip-alert__sub { font-size: 13px; color: var(--as-ink-2); margin-top: 2px; }
  .trip-alert form { display: contents; }

  .trip-day { display: flex; flex-direction: column; gap: 10px; }
  .trip-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; }
  .trip-row__time { text-align: right; padding-top: 10px; display: flex; flex-direction: column; }
  .trip-row__clock { font-family: var(--as-mono); font-size: 15px; font-weight: 600; }
  .trip-row__zone { font-size: 11px; color: var(--as-ink-3); font-weight: 600; }
  .trip-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--as-surface); border: 1px solid var(--as-border); min-width: 0; }
  .trip-item__icon { color: var(--as-ink-3); margin-top: 2px; }
  .trip-item--flight, .trip-item--train { background: var(--cal-1-bg); border-color: transparent; }
  .trip-item--flight .trip-item__icon, .trip-item--train .trip-item__icon { color: var(--cal-1); }
  .trip-item--hotel { background: var(--cal-2-bg); border-color: transparent; }
  .trip-item--hotel .trip-item__icon { color: var(--cal-2); }
  .trip-item--car { background: var(--cal-9-bg); border-color: transparent; }
  .trip-item--car .trip-item__icon { color: var(--cal-9); }
  .trip-item.is-cancelled { opacity: .6; }
  .trip-item.is-cancelled .trip-item__title { text-decoration: line-through; }
  .trip-item__title { font-size: 15px; font-weight: 600; }
  .trip-item__sub { font-size: 13px; color: var(--as-ink-2); margin-top: 2px; }
  .trip-item__check { margin-top: 6px; }
  .trip-item__chips { display: flex; gap: 6px; align-items: center; flex: none; flex-wrap: wrap; justify-content: flex-end; }
  .trip-code { height: 22px; padding: 0 7px; border-radius: 5px; border: 1px solid var(--as-border-2); font-family: var(--as-mono); font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; }
  .trip-gap { margin-left: 78px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; border: 1.5px dashed var(--as-ghost-border); background: var(--as-ghost-bg); }
  .trip-gap__icon { color: var(--as-warn); }
  .trip-gap__text { flex: 1; min-width: calc(100% - 40px); }
  .trip-gap__title { font-size: 14.5px; font-weight: 600; }
  .trip-gap__sub { font-size: 12.5px; color: var(--as-ink-3); }
  .trip-gap form { display: contents; }
  .trip-gap .trip-btn { height: 34px; }

  .trip__rail { border-left: 1px solid var(--as-border); padding: 24px 20px; display: flex; flex-direction: column; gap: 14px; background: var(--as-surface-2); overflow-y: auto; }
  .trip-switch { display: flex; align-items: center; gap: 10px; font-size: 14px; min-height: 40px; }
  .trip-doc { display: flex; align-items: center; gap: 10px; font-size: 14px; min-height: 32px; }
  .trip-rail__big { font-size: 15px; }

  .trip-check { max-width: 480px; display: flex; flex-direction: column; gap: 12px; }
  .trip-check__bar { display: flex; align-items: center; gap: 8px; }
  .trip-check__title { flex: 1; text-align: center; font-size: 16px; font-weight: 700; }
  .trip-check__from { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--as-ink-2); line-height: 1.45; }
  .trip-field { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; padding: 10px 12px; border-radius: 10px; background: var(--as-surface); border: 1px solid var(--as-border); }
  .trip-field__label { width: 100%; font-size: 11.5px; font-weight: 700; color: var(--as-ink-3); letter-spacing: .04em; text-transform: uppercase; }
  .trip-field__input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 16px; font-weight: 600; color: var(--as-ink); padding: 2px 0; }
  .trip-field__input.mono { font-family: var(--as-mono); }
  .trip-field--pair .row { width: 100%; flex-wrap: wrap; }
  .trip-field--pair .trip-field__input { flex: 1 1 150px; }
  .trip-field.is-unsure { background: var(--as-warn-bg); border: 1px dashed var(--as-warn-border); }
  .trip-field__why { width: 100%; font-size: 12.5px; color: var(--as-warn); }
  .trip-check__quote { margin: 0; font-size: 13px; color: var(--as-ink-3); font-style: italic; }
  .trip-check__open { align-self: center; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--as-ink-2); }

  @media (max-width: 1099px) {
    .trip { grid-template-columns: minmax(0, 1fr); }
    .trip__list { display: none; }
    .trip__rail { border-left: 0; background: transparent; padding: 0 28px 28px; }
    .trip .person__back { display: inline-flex; }
    .trip-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 599px) {
    .travel { padding: 4px 16px 24px; gap: 10px; }
    .travel__head .segmented { display: none; }
    .travel__label { font-size: 20px; font-weight: 700; color: var(--as-ink); letter-spacing: -.01em; text-transform: none; }
    .travel__label--phone { display: flex; }
    .travel__label .people__count { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--as-ink-3); }
    .trip-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .trip-card { border: 0; border-radius: 16px; box-shadow: var(--as-shadow-sm); }
    .trip-card__title { font-size: 19px; }
    .trip-pasts { border: 0; border-radius: 16px; box-shadow: var(--as-shadow-sm); }
    .trip-past { padding: 14px 16px; }
    .trip-past__ctx, .trip-past__n { display: none; }
    .trip__main { padding: 4px 16px 16px; }
    .trip__title { font-size: 24px; }
    .trip-row { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; }
    .trip-row__clock { font-size: 13px; }
    .trip-item { flex-wrap: wrap; }
    .trip-item__chips { width: 100%; justify-content: flex-start; padding-left: 30px; }
    .trip-gap { margin-left: 0; }
    .trip__rail { padding: 0 16px 24px; }
  }
}

@layer components {
  /* ── Health & habits (Health and Habits.dc.html) ─────────────────────
     Same lock as Money. Habits: a short chosen list, consistency shown gently (filled = done, outline = today, never red). */
  .health { padding: 28px 32px 40px; display: flex; flex-direction: column; gap: 16px; }
  .health__head { display: flex; align-items: flex-end; gap: 12px; }
  .health__eyebrow { font-size: 13px; font-weight: 600; color: var(--as-ink-3); display: flex; align-items: center; gap: 4px; }
  .health__eyebrow .trip-ctx { margin: 0; }
  .health__title { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
  .health__back { display: inline-flex; }
  .health-lockpill { margin-left: auto; height: 30px; padding: 0 10px; border-radius: 15px; background: var(--as-surface-3); display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--as-ink-2); }
  .health-lockpill .mono { font-family: var(--as-mono); }
  .health__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .health__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
  .health__label-count { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 600; }

  .health-items { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 18px; }
  .health-items__list { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .health-items__list .person-card__label { margin-bottom: 6px; }
  .health-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 10px; }
  .health-item:hover { background: var(--as-surface-2); }
  .health-item[aria-current="true"] { background: var(--as-surface); box-shadow: var(--as-shadow-sm); border: 1px solid var(--as-border); }
  .health-item__when { width: 52px; flex: none; font-family: var(--as-mono); font-size: 12px; color: var(--as-ink-3); line-height: 1.35; padding-top: 2px; }
  .health-item__icon { color: var(--as-ink-3); margin-top: 2px; }
  .health-item__icon--appointment { color: var(--as-personal); }
  .health-item__icon--prescription { color: var(--as-warn); }
  .health-item__title { display: block; font-size: 14.5px; font-weight: 600; }
  .health-item__sub { display: block; font-size: 12.5px; color: var(--as-ink-3); margin-top: 2px; }
  .health-detail { border-left: 1px solid var(--as-border); padding-left: 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .health-detail__title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
  .health-detail__when { font-size: 13.5px; color: var(--as-ink-2); }
  .health-detail__label { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--as-ink-3); letter-spacing: .04em; text-transform: uppercase; }
  .health-detail__quote { margin: 0; font-size: 14px; color: var(--as-ink-2); line-height: 1.5; }
  .health-detail__actions { margin-top: auto; padding-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .health-detail__actions form { display: contents; }
  .health-bring { display: flex; align-items: center; gap: 10px; min-height: 30px; font-size: 14px; text-align: left; }
  .health-bring .check { width: 18px; height: 18px; }

  .health-habits { gap: 0; }
  .health-habits .person-card__label { margin-bottom: 4px; }
  .habit-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--as-border); }
  .habit-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .habit-row__name { font-size: 14.5px; font-weight: 700; }
  .habit-row__sub { font-size: 12.5px; color: var(--as-ink-3); margin-top: 2px; }
  .habit-grid { display: grid; grid-template-columns: repeat(7, 14px); gap: 4px; }
  .habit-grid i { width: 14px; height: 14px; border-radius: 3px; background: var(--as-surface-3); }
  .habit-grid i.is-done { background: var(--as-personal); }
  .habit-grid i.is-today { background: transparent; border: 1.5px solid var(--as-personal); }
  .habit-grid i.is-today.is-done { background: var(--as-personal); }
  .habit-check { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--as-border-2); display: inline-flex; align-items: center; justify-content: center; color: transparent; flex: none; background: var(--as-surface); }
  .habit-check.is-done { background: var(--as-personal); border-color: var(--as-personal); color: var(--as-on-brand); }
  .health-habits__note { padding-top: 10px; font-size: 13px; color: var(--as-ink-3); line-height: 1.45; }
  .health-habits__note a { color: var(--as-ink-2); text-decoration: underline; }
  .habit-choose__panel { width: 400px; }
  .habit-choose__sub { font-size: 13.5px; color: var(--as-ink-3); margin-top: -6px; }
  .habit-choose__opt { display: flex; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--as-border); font-size: 14.5px; cursor: pointer; }
  .habit-choose__opt input { width: 18px; height: 18px; accent-color: var(--as-ink); }
  .health-items .people-empty { padding: 24px 8px; }

  .health-lock { align-self: center; max-width: 420px; margin-top: 40px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
  .health-lock .people-empty__icon { width: 72px; height: 72px; border-radius: 18px; }
  .health-lock__title { font-size: 20px; }
  .health-lock__counts { margin: 0; font-size: 15.5px; color: var(--as-ink-2); line-height: 1.6; }
  .health-lock__note { margin: 0; font-size: 13px; color: var(--as-ink-3); line-height: 1.5; }
  .health-lock__btn { margin-top: 8px; }
  .health-lock__foot { font-size: 13px; color: var(--as-ink-3); }
  .health-lock__foot a { color: var(--as-ink-2); text-decoration: underline; }

  .health-habit { max-width: 560px; display: flex; flex-direction: column; gap: 14px; }
  .health-habit__story { margin: 0; font-size: 16px; line-height: 1.5; }
  .health-habit__act { display: flex; gap: 10px; }
  .health-habit__done { background: var(--as-personal); color: var(--as-on-brand); }
  .habit-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; text-align: center; }
  .habit-month__dow { font-size: 12px; font-weight: 700; color: var(--as-ink-3); padding-bottom: 4px; }
  .habit-month__day { height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--as-ink-3); }
  .habit-month__day.is-done { background: var(--as-personal-tint); color: var(--as-personal); font-weight: 700; }
  .habit-month__day.is-today { border: 1.5px solid var(--as-personal); color: var(--as-ink); font-weight: 700; }
  .habit-month__day.is-future { opacity: .5; }

  .health-checkin { max-width: 440px; margin: 24px auto 0; width: 100%; background: var(--as-surface); border-radius: 18px; box-shadow: var(--as-shadow-md); overflow: hidden; }
  .health-checkin__head { padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--as-ink-2); }
  .health-checkin__head b { font-size: 15px; color: var(--as-ink); }
  .health-checkin__row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 16px; border-top: 1px solid var(--as-border); font-size: 15px; cursor: pointer; }
  .health-checkin__row:has(input:checked) .habit-check { background: var(--as-personal); border-color: var(--as-personal); color: var(--as-on-brand); }
  .health-checkin__row:has(input:focus-visible) .habit-check { box-shadow: var(--as-focus); }
  .health-checkin__actions { display: flex; gap: 8px; padding: 12px 16px 16px; border-top: 1px solid var(--as-border); }
  .health-checkin__actions .btn { padding: 0 10px; font-size: 14px; }

  @media (max-width: 1099px) {
    .health__grid { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 599px) {
    .health { padding: 4px 16px 24px; gap: 12px; }
    .health__title { font-size: 30px; }
    .health__head { flex-wrap: wrap; }
    .health-lockpill { order: -1; margin-left: auto; }
    .health-items { grid-template-columns: minmax(0, 1fr); border: 0; border-radius: 16px; box-shadow: var(--as-shadow-sm); }
    .health-detail { border-left: 0; padding-left: 0; border-top: 1px solid var(--as-border); padding-top: 14px; margin-top: 8px; }
    .health-item__when { width: 46px; }
    .habit-grid { grid-template-columns: repeat(7, 10px); gap: 3px; }
    .habit-grid i { width: 10px; height: 10px; border-radius: 2px; }
    .habit-grid i:nth-child(-n+7) { display: none; }
    .habit-choose__panel { width: auto; }
  }
}

@layer components {
  /* ── Notes (Notes.dc.html) ───────────────────────────────────────────
     Desktop: filters · list · note · "Linked to" rail. Phone: list with filter chips, then the note. */
  .notes { display: grid; grid-template-columns: 220px 340px minmax(0, 1fr) 260px; flex: 1; min-height: 0; }
  .notes:not(.has-detail) { grid-template-columns: 220px 340px minmax(0, 1fr); }
  .notes__filters { border-right: 1px solid var(--as-border); padding: 20px 12px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
  .notes__title-row { display: flex; align-items: center; padding: 0 8px 10px; }
  .notes__title-row form { margin-left: auto; }
  .notes__list { border-right: 1px solid var(--as-border); padding: 16px 14px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; min-width: 0; }
  .notes__list .people__filter { margin: 0 0 4px; }
  .notes__phone-head, .notes__chips { display: none; }
  .note-row { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px; }
  .note-row:hover { background: var(--as-surface-2); }
  .note-row[aria-current="true"] { background: var(--as-surface); box-shadow: var(--as-shadow-sm); }
  .note-row__top { display: flex; align-items: baseline; gap: 8px; }
  .note-row__title { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .note-row__date { font-family: var(--as-mono); font-size: 12px; color: var(--as-ink-3); }
  .note-row__sub { font-size: 13px; color: var(--as-ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .note-row__chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
  .note-chip--event { background: var(--as-work-tint); color: var(--as-work); }
  .note-chip--task { background: var(--as-work-tint); color: var(--as-work); }

  .notes__editor { padding: 28px 36px; display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow-y: auto; background: var(--as-surface); }
  .note-ed__meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--as-ink-3); }
  .note-ed__meta form { display: contents; }
  .note-ed__title { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
  .note-ed__links { margin-bottom: 6px; }
  .note-lines { display: flex; flex-direction: column; gap: 2px; max-width: 680px; }
  .note-line { position: relative; display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 2px 6px; border-radius: 8px; font-size: 16px; line-height: 1.45; }
  .note-line:hover { background: var(--as-surface-2); }
  .note-line--blank { min-height: 12px; }
  .note-line form { display: contents; }
  .note-line__text { flex: 1; min-width: 0; }
  .note-line.is-done .note-line__text { color: var(--as-ink-3); text-decoration: line-through; }
  .note-line__make { opacity: 0; position: absolute; right: 6px; top: 4px; }
  .note-line__make .person-pop__panel { top: calc(100% + 4px); }
  .note-line:hover .note-line__make, .note-line__make[open], .note-line__make:focus-within { opacity: 1; }
  .note-line__btn { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border-radius: 7px; border: 1px solid var(--as-border-2); background: var(--as-surface); font-size: 12.5px; font-weight: 600; cursor: pointer; list-style: none; white-space: nowrap; }
  .note-line__btn::-webkit-details-marker { display: none; }
  .note-task__row { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 13.5px; color: var(--as-ink-2); }
  .note-ed { display: flex; flex-direction: column; gap: 10px; max-width: 720px; flex: 1; }
  .note-ed__title-input { border: 0; outline: none; background: transparent; font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--as-ink); }
  .note-ed__body-input { flex: 1; min-height: 320px; border: 1px solid var(--as-border); border-radius: 12px; padding: 14px 16px; background: var(--as-surface); font-size: 16px; line-height: 1.6; color: var(--as-ink); resize: vertical; }
  .note-ed__body-input:focus { outline: none; box-shadow: var(--as-focus); }
  .note-ed__foot { display: flex; align-items: center; gap: 10px; }
  .note-ed__hint { margin-right: auto; font-size: 12.5px; color: var(--as-ink-3); }
  .note-ed__hint .mono { font-family: var(--as-mono); }

  .notes__rail { border-left: 1px solid var(--as-border); padding: 24px 18px; display: flex; flex-direction: column; gap: 10px; background: var(--as-surface-2); overflow-y: auto; }
  .notes__rail-label { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--as-border); }
  .note-link { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
  .note-link form { display: contents; }
  .note-link__x { margin-left: auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; color: var(--as-ink-3); }
  .note-link__why { width: 100%; font-size: 12.5px; color: var(--as-ink-3); margin: 0; }

  .filter-chip { height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 17px; background: var(--as-surface); border: 1px solid var(--as-border); font-size: 14px; font-weight: 600; color: var(--as-ink-2); white-space: nowrap; }
  .filter-chip[aria-checked="true"] { background: var(--as-ink); border-color: var(--as-ink); color: var(--as-surface); }

  @media (max-width: 1099px) {
    .notes, .notes:not(.has-detail) { grid-template-columns: 300px minmax(0, 1fr); }
    .notes__filters, .notes__rail { display: none; }
    .notes__chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
    .notes .person__back { display: none; }
  }
  @media (max-width: 799px) {
    .notes, .notes:not(.has-detail) { grid-template-columns: minmax(0, 1fr); }
    .notes > .notes__editor { display: none; }
    .notes.has-detail > .notes__list { display: none; }
    .notes.has-detail > .notes__editor { display: flex; }
    .notes .person__back { display: inline-flex; }
  }
  @media (max-width: 599px) {
    .notes__list { border: 0; padding: 4px 16px 24px; gap: 8px; }
    .notes__phone-head { display: block; padding: 0 4px; }
    .notes__list .people__title { font-size: 32px; }
    .note-row { border-radius: 0; padding: 12px 16px; }
    .people-group .note-row + .note-row { border-top: 1px solid var(--as-border); }
    .notes__editor { padding: 4px 16px 24px; background: transparent; }
    .note-ed__title { font-size: 26px; }
    .note-line__make { opacity: 1; position: static; }
    .note-line__btn { padding: 0 7px; border-color: var(--as-border); }
    .note-line__btn-text { display: none; }
  }
}

@layer components {
  /* ── Meeting prep (Meeting Prep.dc.html) ─────────────────────────────
     Desktop: the day on the left, prep on the right. One line on top: what you need from the meeting. */
  .prep { display: grid; grid-template-columns: 360px minmax(0, 1fr); flex: 1; min-height: 0; }
  .prep__day { border-right: 1px solid var(--as-border); padding: 20px 18px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
  .prep-slot { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: start; }
  .prep-slot__time { font-family: var(--as-mono); font-size: 12px; color: var(--as-ink-3); padding-top: 9px; }
  .prep-slot__title { padding: 8px 12px; border-radius: 8px; border-left: 3px solid var(--block-fg, var(--cal-1)); background: var(--block-bg, var(--cal-1-bg)); font-size: 14px; font-weight: 700; min-height: 36px; }
  .prep-slot[aria-current="true"] .prep-slot__title { box-shadow: 0 0 0 2px var(--as-ink); }
  .prep__main { padding: 24px 32px; display: flex; flex-direction: column; gap: 16px; min-width: 0; overflow-y: auto; }
  .prep__head { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
  .prep__when { font-size: 13px; font-weight: 600; color: var(--as-ink-3); }
  .prep__title { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
  .prep__sub { font-size: 13.5px; color: var(--as-ink-2); }
  .prep__head .trip-ctx { margin-left: 0; }
  .prep-need { padding: 14px 16px; border-radius: 12px; background: var(--as-crit-bg); }
  .prep-need__label { font-size: 12px; font-weight: 700; color: var(--as-crit); letter-spacing: .04em; text-transform: uppercase; }
  .prep-need__text { font-size: 17px; font-weight: 700; line-height: 1.35; margin-top: 2px; }
  .prep-since { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
  .prep__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
  .prep-person { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--as-border); }
  .prep-person:last-child { border-bottom: 0; }
  .prep-person__name { font-size: 14.5px; font-weight: 700; }
  .prep-person__name .ink-3 { font-weight: 500; }
  .prep-person__sub { font-size: 13px; color: var(--as-ink-2); line-height: 1.4; margin: 2px 0 6px; }
  .prep-faces { display: flex; align-items: center; gap: 4px; }
  .prep-faces .avatar { margin-right: -6px; box-shadow: 0 0 0 2px var(--as-surface); }
  .prep-faces__text { margin-left: 14px; font-size: 14px; }
  .prep-new { margin-top: 4px; }
  .prep-agenda { margin: 0; font-size: 14px; line-height: 1.55; }
  .person-line .src-chip { margin-top: 6px; }
  a.person-line:hover .person-line__title { text-decoration: underline; }

  .prep-after { max-width: 980px; width: 100%; align-self: center; background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 16px; box-shadow: var(--as-shadow-lg); overflow: hidden; }
  .prep-after__head { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--as-border); }
  .prep-after__title { margin: 0; font-size: 20px; font-weight: 700; }
  .prep-after__body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
  .prep-after__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; padding: 18px 22px 22px; }
  .prep-after__col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .prep-after__col .note-ed__body-input { min-height: 180px; }
  .prep-after__foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: auto; }
  .prep-decision .trip-field__input { font-size: 14.5px; font-weight: 500; }
  .prep-follow { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--as-border); border-radius: 12px; cursor: pointer; }
  .prep-follow > input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--as-ink); }
  .prep-follow__title { font-size: 14.5px; font-weight: 500; }
  .prep-follow__meta { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
  .prep-follow__owner, .prep-follow__due { border: 0; background: transparent; font: inherit; color: inherit; width: 90px; padding: 0; }
  .prep-follow__due { width: 120px; }
  .prep-summary { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--as-surface-2); font-size: 14px; cursor: pointer; }
  .prep-summary__on { width: 18px; height: 18px; accent-color: var(--as-pos); }

  @media (max-width: 1099px) {
    .prep { grid-template-columns: minmax(0, 1fr); }
    .prep__day { display: none; }
    .prep .person__back { display: inline-flex; }
    .prep__grid { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 599px) {
    .prep__main { padding: 4px 16px 24px; }
    .prep__title { font-size: 24px; }
    .prep-after { border: 0; border-radius: 16px; }
    .prep-after__grid { grid-template-columns: minmax(0, 1fr); padding: 14px 16px; }
    .prep-after__head, .prep-after__body { padding: 14px 16px; }
  }
}

@layer components {
  /* ── Invites to answer + Clean up (Invites and Mail Clean-up.dc.html) ── */
  .invites { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 24px; padding: 28px 32px 40px; flex: 1; min-height: 0; overflow-y: auto; align-items: start; }
  .invites__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .invites__rail { display: flex; flex-direction: column; gap: 14px; }
  .invite-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .invite-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 14px; background: var(--as-surface); border: 1px solid var(--as-border); }
  .invite-card__head { display: flex; gap: 10px; align-items: flex-start; padding-left: 12px; border-left: 3px solid var(--as-personal); }
  .invite-card--work .invite-card__head { border-left-color: var(--as-work); }
  .invite-card__head .trip-ctx { margin-left: 0; }
  .invite-card__title { font-size: 17px; font-weight: 700; }
  .invite-card__when { font-size: 13.5px; color: var(--as-ink-2); margin-top: 2px; }
  .invite-card__when .mono { font-family: var(--as-mono); font-weight: 600; }
  .invite-card__from { font-size: 12.5px; color: var(--as-ink-3); margin-top: 2px; }
  .invite-card__flags { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
  .invite-flag--change { background: var(--as-work-tint); color: var(--as-work); }
  .invite-card__answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .invite-card__answers .btn { height: 40px; font-size: 14px; }
  .invite-card__note { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--as-ink-3); line-height: 1.45; }
  .invite-card__note as-icon { margin-top: 2px; }
  .invite-card__open { font-size: 13px; font-weight: 600; color: var(--as-ink-2); }
  .invite-cancel { flex-direction: row; align-items: center; padding: 8px 0; border: 0; border-radius: 0; background: transparent; }
  .invite-cancel + .invite-cancel { border-top: 1px solid var(--as-border); }
  .invite-cancel__title { font-size: 14px; text-decoration: line-through; color: var(--as-ink-2); }
  .invite-clash { font-size: 13px; font-weight: 700; color: var(--as-crit); }
  .invites .person__back { display: none; }

  .cleanup { gap: 14px; }
  .cleanup__back { display: none; }
  .cleanup__head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
  .cleanup__head .segmented { margin-left: auto; }
  .cleanup__intro { margin: 0; font-size: 14px; color: var(--as-ink-2); }
  .cleanup-link { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
  .cleanup-link b { display: block; font-size: 15px; }
  .cleanup-real { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 12px; background: var(--as-pos-bg); font-size: 14px; }
  .cleanup-real form, .cleanup-finish form { display: contents; }
  .cleanup-finish { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--as-warn-bg); border: 1px solid var(--as-warn-border); font-size: 14px; }
  .cleanup-grid { border: 1px solid var(--as-border); border-radius: 14px; background: var(--as-surface); overflow: hidden; }
  .cleanup-grid__head, .cleanup-grid__row { display: grid; grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 1.3fr) 80px 100px minmax(0, 1.2fr); align-items: center; gap: 8px; padding: 0 14px; }
  .cleanup-grid__head { height: 38px; font-size: 11.5px; font-weight: 700; color: var(--as-ink-3); letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--as-border); }
  .cleanup-grid__row { min-height: 48px; border-bottom: 1px solid var(--as-border); cursor: pointer; font-size: 14px; }
  .cleanup-grid__row:last-child { border-bottom: 0; }
  .cleanup-grid__row:hover { background: var(--as-surface-2); }
  .cleanup-grid__pick { width: 18px; height: 18px; accent-color: var(--as-ink); }
  .cleanup-grid__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cleanup-grid__addr { font-family: var(--as-mono); font-size: 12.5px; color: var(--as-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cleanup-grid__n { font-family: var(--as-mono); }
  .cleanup-grid__last { color: var(--as-ink-3); }
  .cleanup-grid__row > span:last-child { display: flex; gap: 6px; flex-wrap: wrap; }
  .cleanup-bar { margin: 0; }
  .cleanup-bar .btn:disabled { opacity: .45; }
  .cleanup-bar__block { color: var(--as-crit); }
  .cleanup-hist { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--as-border); font-size: 14px; }
  .cleanup-hist:last-child { border-bottom: 0; }
  .cleanup-hist__ban { color: var(--as-crit); }
  .cleanup-hist__addr { margin-left: 6px; font-family: var(--as-mono); font-size: 12px; color: var(--as-ink-3); }
  .cleanup-table { overflow: hidden; }

  @media (max-width: 1099px) {
    .invites { grid-template-columns: minmax(0, 1fr); }
    .invite-cards { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 599px) {
    .invites { padding: 4px 16px 24px; }
    .invites .person__back, .cleanup__back { display: inline-flex; }
    .invites .travel__head .segmented { display: none; }
    .cleanup__head .segmented { margin-left: 0; width: 100%; }
    .cleanup-grid__head { display: none; }
    .cleanup-grid__row { grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "p n c" "p a a" "p l h"; padding: 10px 14px; row-gap: 2px; }
    .cleanup-grid__pick { grid-area: p; }
    .cleanup-grid__name { grid-area: n; }
    .cleanup-grid__addr { grid-area: a; }
    .cleanup-grid__n { grid-area: c; font-size: 12.5px; color: var(--as-ink-3); }
    .cleanup-grid__last { grid-area: l; font-size: 12.5px; }
    .cleanup-grid__row > span:last-child { grid-area: h; }
    .cleanup-bar { position: sticky; bottom: 96px; }
  }

  /* ---------- Money → Banks (Money Mobile · Onboarding · connect bank, Plaid) ---------- */
  .banks { max-width: 680px; }
  .banks__intro { margin: 0 0 14px; font-size: 13.5px; line-height: 1.5; color: var(--as-ink-2); }
  .banks__label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--as-ink-3); }
  .banks__label form { margin: 0; }
  .banks__fine { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; font-size: 12px; line-height: 1.45; color: var(--as-ink-3); }
  .banks__warn, .banks__error { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; padding: 9px 11px; border-radius: 8px; font-size: 12.5px; background: var(--as-warn-bg); color: var(--as-warn); }
  .banks__error { background: var(--as-crit-bg); color: var(--as-crit); }
  .banks .money-card { margin-bottom: 12px; padding: 14px 16px; }
  .banks .money-card__note { padding: 0; }
  .banks .mono { font-family: var(--as-mono); font-size: 12px; color: var(--as-ink-3); }
  .banks-connect__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
  .banks-connect__head > span:last-child { display: flex; flex-direction: column; gap: 1px; }
  .banks-connect__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 9px; background: var(--as-brand-tint); color: var(--as-brand); }
  .banks-steps { display: grid; gap: 7px; margin: 0 0 14px; padding: 0; list-style: none; counter-reset: bstep; }
  .banks-steps li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--as-ink-2); counter-increment: bstep; }
  .banks-steps li::before { content: counter(bstep); display: grid; place-items: center; width: 20px; height: 20px; flex: none; border-radius: 50%; font-size: 11px; font-weight: 700; background: var(--as-surface-3); color: var(--as-ink-2); }
  .banks-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--as-border); }
  .banks-item:first-of-type { border-top: 0; }
  .banks-item__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  .banks-item__why { font-size: 12px; color: var(--as-warn); }
  .banks-pill { border: 0; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; }
  .banks-match__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 0; border-top: 1px solid var(--as-border); }
  .banks-match__name { display: flex; flex-direction: column; gap: 1px; flex: 1 1 200px; min-width: 0; }
  .banks-match__row select { flex: 1 1 200px; max-width: 280px; }
  .banks-compare__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
  .banks-compare__grid > div { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: 8px; background: var(--as-surface-2); }
  .banks-compare__grid b { font-size: 18px; }
  .banks-compare__grid span { font-size: 11.5px; color: var(--as-ink-3); }
  .banks-compare form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
  @media (max-width: 700px) {
    .banks-compare__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .banks-match__name { flex-basis: 100%; }
    .banks-match__row select { flex: 1 1 0; max-width: none; }
  }
}

@layer components {
  /* ── Inbox part 2 (design update 6): snooze menu, how I read this, ask, triage, tabs, swipes ── */
  .snooze-menu { position: relative; flex: none; }
  .snooze-menu > summary { list-style: none; cursor: pointer; }
  .snooze-menu > summary::-webkit-details-marker { display: none; }
  .snooze-menu__panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 280px; padding: 6px; border-radius: 12px; background: var(--as-surface); border: 1px solid var(--as-border); box-shadow: var(--as-shadow-lg); display: flex; flex-direction: column; color: var(--as-ink); }
  .snooze-menu--up .snooze-menu__panel { top: auto; bottom: calc(100% + 8px); }
  .snooze-menu__title { padding: 6px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--as-ink-3); }
  .snooze-menu__opt { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 8px; font-size: 14px; text-align: left; color: var(--as-ink); }
  .snooze-menu__opt:hover, .snooze-menu__opt:focus-visible { background: var(--as-surface-2); outline: none; }
  .snooze-menu__opt as-icon { color: var(--as-ink-2); }
  .snooze-menu__opt span:first-of-type { flex: 1; }
  .snooze-menu__hint { font-size: 12px; color: var(--as-ink-3); font-family: var(--as-mono); }
  .snooze-menu__foot { margin: 4px 10px 6px; font-size: 11.5px; color: var(--as-ink-3); }

  .mail-why { position: relative; font-size: 13px; }
  .mail-why > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--as-ink-2); }
  .mail-why > summary::-webkit-details-marker { display: none; }
  .mail-why__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: 340px; padding: 12px 14px; border-radius: 12px; background: var(--as-surface); border: 1px solid var(--as-border); box-shadow: var(--as-shadow-lg); display: flex; flex-direction: column; gap: 8px; }
  .mail-why__line { margin: 0; color: var(--as-ink-2); line-height: 1.45; }
  .mail-why__quote { margin: 0; padding: 6px 10px; border-left: 3px solid var(--as-border-2); background: var(--as-surface-2); border-radius: 0 6px 6px 0; color: var(--as-ink); font-style: italic; line-height: 1.4; }
  .mail-why__foot { margin: 0; font-size: 12px; color: var(--as-ink-3); }
  .mail-why__fix { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--as-border); }

  .mail-ask { position: fixed; inset: 0; z-index: 50; }
  .mail-ask__panel { position: absolute; z-index: 41; left: 50%; top: 12vh; transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); max-height: 76vh; overflow-y: auto; border-radius: 16px; background: var(--as-surface); box-shadow: var(--as-shadow-lg); display: flex; flex-direction: column; }
  .mail-ask__form { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 56px; border-bottom: 1px solid var(--as-border); color: var(--as-brand); }
  .mail-ask__input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--as-ink); outline: none; }
  .mail-ask__out { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
  .mail-ask__answer { margin: 0; font-size: 16px; line-height: 1.55; }
  .mail-ask__answer sup { font-size: 11px; font-weight: 700; color: var(--as-ink-2); }
  .mail-ask__sources { display: flex; flex-direction: column; gap: 6px; }
  .mail-ask__src { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--as-surface-2); color: var(--as-ink); }
  .mail-ask__n { width: 22px; height: 22px; flex: none; border-radius: 6px; background: var(--as-surface); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
  .mail-ask__t { display: flex; flex-direction: column; min-width: 0; font-size: 12px; color: var(--as-ink-3); }
  .mail-ask__t b { font-size: 13.5px; color: var(--as-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mail-ask__busy { margin: 0; padding: 16px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--as-ink-3); }
  .mail-ask__try { padding: 12px 8px; display: flex; flex-direction: column; }
  .mail-ask__h { padding: 0 8px 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--as-ink-3); }
  .mail-ask__eg { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 8px; border-radius: 8px; font-size: 14px; color: var(--as-ink); text-align: left; }
  .mail-ask__eg:hover { background: var(--as-surface-2); }
  .mail-ask__eg as-icon { color: var(--as-ink-3); }
  .mail-ask__foot { margin: 0; padding: 10px 16px 14px; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--as-ink-3); border-top: 1px solid var(--as-border); }

  .mail-bulk__file { height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--as-border-2); background: var(--as-surface); color: var(--as-ink); font: inherit; font-size: 13px; font-weight: 600; }
  .mail-tabs { display: none; }
  .mail-card__swipe { display: none; }

  .triage { max-width: 680px; width: 100%; margin: 0 auto; padding: 24px 24px 32px; display: flex; flex-direction: column; gap: 18px; }
  .triage .mono { font-family: var(--as-mono); }
  .triage__bar { display: flex; align-items: center; gap: 14px; }
  .triage__close { font-size: 15px; font-weight: 600; color: var(--as-brand); }
  .triage__progress { flex: 1; height: 6px; border-radius: 3px; background: var(--as-surface-3); overflow: hidden; }
  .triage__progress i { display: block; height: 100%; width: var(--p); border-radius: 3px; background: var(--as-ink); transition: width var(--as-dur-2) var(--as-ease); }
  .triage__count { font-size: 13px; font-weight: 700; color: var(--as-ink-2); }
  .triage-card { min-height: 320px; padding: 22px 24px; border-radius: 20px; background: var(--as-surface); box-shadow: var(--as-shadow-lg); display: flex; flex-direction: column; gap: 12px; transform: translateX(var(--dx, 0)); }
  .triage-card__who { display: flex; align-items: center; gap: 10px; }
  .triage-card__name { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 15.5px; }
  .triage-card__name span { font-size: 12.5px; color: var(--as-ink-3); }
  .triage-card__ctx { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--as-ink-2); }
  .triage-card__subject { margin: 4px 0 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
  .triage-card__summary { margin: 0; font-size: 16px; line-height: 1.5; color: var(--as-ink-2); }
  .triage-card__suggest { margin-top: auto; align-self: flex-start; display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: var(--as-brand-tint); color: var(--as-ink); font-size: 14px; }
  .triage-card__suggest as-icon { color: var(--as-brand); }
  .triage__actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 10px; }
  .triage__btn { height: 72px; border-radius: 14px; border: 1px solid var(--as-border-2); background: var(--as-surface); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 14px; font-weight: 700; color: var(--as-ink); }
  .triage__btn--primary { background: var(--as-ink); color: var(--as-surface); border-color: var(--as-ink); }
  .triage__btn--primary .kbd-hint { color: var(--as-surface); opacity: .7; }
  .triage__skip { padding: 0 14px; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--as-ink-2); }
  .triage__hint { margin: 0; text-align: center; font-size: 12.5px; color: var(--as-ink-3); }
  .triage-done { padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--as-pos); }
  .triage-done h2 { margin: 0; font-size: 22px; color: var(--as-ink); }
  .triage-done p { margin: 0 0 8px; color: var(--as-ink-2); }

  @media (max-width: 599px) {
    .snooze-menu__panel, .snooze-menu--up .snooze-menu__panel { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; padding: 8px 8px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 20px 20px 0 0; z-index: 60; }
    .snooze-menu__opt { min-height: 56px; font-size: 16px; }
    .mail-why__panel { position: static; width: auto; margin-top: 8px; box-shadow: none; }
    .mail-ask__panel { top: 0; left: 0; transform: none; width: 100%; height: 100%; max-height: none; border-radius: 0; padding-top: env(safe-area-inset-top, 0px); }
    .mail-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex-basis: calc(100% + 32px); margin: 10px -16px 0; padding: 0 16px 2px; }
    .mail-tabs__tab { flex: none; display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--as-border-2); background: var(--as-surface); font-size: 13.5px; font-weight: 700; color: var(--as-ink-2); white-space: nowrap; }
    .mail-tabs__tab[aria-current="page"] { background: var(--as-ink); border-color: var(--as-ink); color: var(--as-surface); }
    .inbox .inbox-home { display: none !important; }
    .inbox:not(.is-thread) .mail-list { display: flex; border: 0; }
    .mail-card { transform: translateX(var(--dx, 0)); transition: transform var(--as-dur-1) var(--as-ease); }
    .mail-card__swipe { position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; display: none; }
    .mail-card.is-swiped .mail-card__swipe { display: flex; }
    .mail-card__swipe-btn { width: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--as-on-badge); }
    .mail-card__swipe-btn--snooze { background: var(--as-warn); }
    .mail-card__swipe-btn--task { background: var(--cal-1); }
    .triage { padding: 8px 16px 24px; }
    .triage-card { min-height: 360px; padding: 18px; }
    .triage__actions { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .triage__skip { grid-column: 1 / -1; justify-content: center; height: 40px; }
    .triage__btn .kbd-hint { display: none; }
  }
}

@layer components {
  /* ── Plan (design update 6): own top bar, day load bars, wrapped block titles, tray, trip, dialog, empty, phone ── */
  .topbar--page { gap: 10px; }
  .plan-top__title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
  .plan-top__nav { display: flex; align-items: center; gap: 4px; }
  .plan-top__hours { display: flex; align-items: center; gap: 6px; color: var(--as-ink-3); }
  .plan-top__time { width: 62px; height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--as-border-2); background: var(--as-surface); font-family: var(--as-mono); font-size: 13px; font-weight: 600; color: var(--as-ink); text-align: center; }
  .plan-top__time:invalid { border-color: var(--as-crit); }
  @media (max-width: 1499px) { .topbar--page .segmented[aria-label="Context"] { display: none; } }
  @media (max-width: 1299px) { .plan-top__hours { display: none; } }   /* 9.53: was 1279 — 1280 px still overflowed */
  /* 9.53 check: at 1300–1500 px the Plan toolbar ran 27 px wider than the window (Capture cut off). */
  @media (max-width: 1499px) { .topbar--page { gap: 8px; } .topbar--page .btn__kbd { display: none; } .plan-top__title { font-size: 18px; } }
  @media (max-width: 1399px) { .plan-top__label { display: none; } }

  .plan-grid__day-head { position: relative; flex-wrap: wrap; align-items: center; padding: 10px 10px 12px; }
  .plan-grid__dom { font-size: 18px; }
  .plan-grid__day-head.is-today .plan-grid__dom { font-size: 15px; padding: 3px 7px; border-radius: 7px; }
  .plan-grid__day-head.is-over { box-shadow: none; }
  .plan-grid__over { margin-left: 4px; display: inline-flex; align-items: center; gap: 2px; font-size: 11.5px; line-height: 1.1; }
  .plan-grid__load { position: absolute; left: 10px; right: 10px; bottom: 6px; height: 3px; border-radius: 2px; background: var(--as-surface-3); overflow: hidden; }
  .plan-grid__load i { display: block; width: var(--load); height: 100%; border-radius: 2px; background: var(--as-ink-3); }
  .plan-grid__day-head.is-today .plan-grid__load i { background: var(--as-ink); }
  .plan-grid__day-head.is-over .plan-grid__load i { background: var(--as-warn); }
  .plan-block { cursor: pointer; }
  .plan-block .block__title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
  .plan-block .block__time { font-family: var(--as-mono); }
  .plan-block.is-clash { box-shadow: inset 3px 0 0 var(--as-crit); }
  .plan-block:focus-visible { outline: 2px solid var(--as-work); outline-offset: 1px; }
  .plan-block.block--protected { cursor: default; }
  .plan-block.block--protected { background: transparent; border: 0; flex-direction: row; align-items: flex-start; gap: 5px; padding-top: 6px; }
  .plan-block.block--protected > .block__icon:first-child { display: flex; color: var(--as-ink-3); }
  .plan-block.block--protected .block__title { font-weight: 500; color: var(--as-ink-3); font-size: 12px; }
  .plan-block.block--protected .block__time { display: none; }

  .plan__tray { background: var(--as-surface); padding: 18px 16px; gap: 10px; }
  .plan__tray-head--big { align-items: baseline; }
  .plan__tray-title { font-size: 16px; font-weight: 700; }
  .plan__tray-n { font-size: 13px; font-weight: 700; color: var(--as-ink-3); }
  .tray-task { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; }
  .tray-task__grip { color: var(--as-ink-4); flex: none; }
  .tray-task__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
  .plan-trip { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--cal-9-bg); color: var(--cal-9); }
  .plan-trip__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .plan-trip__when { font-size: 11px; font-weight: 700; letter-spacing: .05em; }
  .plan-trip b { font-size: 14px; color: var(--as-ink); }
  .plan-proposal { border: 1.5px dashed var(--as-ghost-border); background: var(--as-surface); border-radius: 12px; padding: 14px; box-shadow: none; }
  .plan-proposal__title { font-size: 14px; font-weight: 700; }
  .plan__clear { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--as-ink-3); }

  .plan-month__n { align-self: flex-start; }
  .plan-month__dots { display: flex; gap: 3px; }
  .plan-month__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--block-fg, var(--as-ink-3)); }
  .plan-month__dots i.dot--ink { background: var(--as-ink-2); }
  .plan-month__dots i.dot--ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--as-ghost-border); }
  .plan-month__day.is-weekend { background: var(--as-surface-2); }
  .plan-month__trip { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: 4px; background: var(--cal-9); color: var(--as-on-badge); font-size: 10.5px; font-weight: 700; align-self: stretch; overflow: hidden; white-space: nowrap; }

  .plan-empty { margin: 24px; padding: 32px 24px; border-radius: 16px; background: var(--as-surface-2); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
  .plan-empty__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--as-surface-3); display: flex; align-items: center; justify-content: center; color: var(--as-ink-2); }
  .plan-empty h2 { margin: 6px 0 0; font-size: 17px; }
  .plan-empty p { margin: 0 0 6px; max-width: 340px; font-size: 14px; color: var(--as-ink-2); line-height: 1.5; }

  .plan-dialog { position: fixed; inset: 0; z-index: 50; }
  .plan-dialog__card { position: absolute; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, calc(100vw - 32px)); padding: 18px 20px 16px; border-radius: 16px; background: var(--as-surface); box-shadow: var(--as-shadow-lg); display: flex; flex-direction: column; gap: 10px; }
  .plan-dialog__card > .sheet__grabber { display: none; }
  .plan-dialog__head { display: flex; align-items: flex-start; gap: 12px; }
  .plan-dialog__bar { width: 4px; align-self: stretch; border-radius: 2px; background: var(--block-fg, var(--as-ink-2)); flex: none; }
  .plan-dialog__bar--proposed { background: var(--as-ghost-border); }
  .plan-dialog__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .plan-dialog__titles h2 { margin: 0; font-size: 18px; }
  .plan-dialog__titles span { font-size: 13px; color: var(--as-ink-3); font-family: var(--as-mono); }
  .plan-dialog__meta { margin: 0; font-size: 14px; color: var(--as-ink-2); }
  .plan-dialog__note { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--as-surface-2); font-size: 12.5px; color: var(--as-ink-3); }
  .plan-dialog__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
  .plan-dialog__form { display: flex; flex-direction: column; gap: 10px; }
  .plan-dialog__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
  .plan-dialog__error { margin: 0; font-size: 13px; color: var(--as-crit); }

  .plan-phone { display: none; }
  .plan-daylist { display: none; }
  .plan-daylist__h { display: flex; justify-content: space-between; padding: 14px 4px 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--as-ink-3); }
  .plan-daylist__row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; background: var(--as-surface); border-bottom: 1px solid var(--as-border); font-size: 15px; color: var(--as-ink); }
  .plan-daylist__row .mono { font-family: var(--as-mono); font-size: 12.5px; color: var(--as-ink-3); }
  .plan-daylist__row as-icon { margin-left: auto; color: var(--as-ink-3); }
  .plan-daylist__bar { width: 3px; height: 22px; border-radius: 2px; background: var(--block-fg, var(--as-ink-3)); }
  .plan-daylist__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  @media (max-width: 599px) {
    .plan-daylist { display: block; padding: 0 16px 160px; }
    .plan-daylist__row:first-of-type { border-radius: 14px 14px 0 0; }
    .plan-daylist__row:last-child { border-radius: 0 0 14px 14px; border-bottom: 0; }
    .plan--empty .plan-grid { display: none; }
    .plan[data-view="day"] .plan-grid__day-head, .plan[data-view="day"] .plan-grid > .plan-grid__corner:first-child { display: none; }
    .plan__phone-bar > span { display: inline-flex; align-items: center; gap: 6px; }
    .plan-phone { display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 10px; }
    .plan-phone__top { display: flex; align-items: center; gap: 10px; }
    .plan-phone__title { margin: 0; font-size: 32px; font-weight: 700; letter-spacing: -.02em; flex: 1; }
    .plan-phone__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); text-align: center; }
    .plan-phone__day { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: var(--as-ink-3); }
    .plan-phone__day b { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--as-ink); }
    .plan-phone__day.is-on b { background: var(--as-ink); color: var(--as-surface); }
    .plan-phone__day.is-today:not(.is-on) b { color: var(--as-brand); }
    .plan-phone__bar, .plan-phone__range { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--as-ink-2); }
    .plan-phone__bar .mono { font-family: var(--as-mono); color: var(--as-ink); }
    .plan-phone__bar form { margin-left: auto; }
    .plan-dialog__card { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto; border-radius: 20px 20px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
    .plan-dialog__card > .sheet__grabber { display: block; }
    .plan-dialog__actions .btn { flex: 1; height: 44px; }
    .plan-month__day { min-height: 58px; padding: 6px 4px; align-items: center; }
    .plan-month__count { display: none; }
    .plan-month__trip { font-size: 9.5px; padding: 0 3px; }
    .plan-empty { margin: 12px 16px; }
  }
}

@layer components {
  /* ── Motion (design update 6, docs/design/motion.js): hover lift, press feedback, ambient. JS entrances: ui/js/motion.js ── */
  .today-tile, .today-need, .tray-task, .mail-ask__src, .plan-trip, .mail-rail__project, .mail-rail__meet, .today-suggestion, .mail-found__item, .plan-proposal {
    transition: transform var(--as-dur-1) var(--as-ease), box-shadow var(--as-dur-1) var(--as-ease), background-color var(--as-dur-1) var(--as-ease);
  }
  .today-tile:hover, .today-need:hover, .tray-task:hover, .mail-ask__src:hover, .plan-trip:hover, .mail-rail__project:hover, .mail-rail__meet:hover {
    transform: translateY(-2px); box-shadow: var(--as-shadow-md);
  }
  .today-card:hover, .money-card:hover { box-shadow: var(--as-shadow-md); }
  .btn, .side-item, .tabbar__item, .fab, .mail-tool, .mail-card__done, .triage__btn, .snooze-menu__opt, .segmented__item, .icon-btn, .mail-tabs__tab {
    transition: transform 260ms cubic-bezier(.34, 1.56, .64, 1), background-color var(--as-dur-1) var(--as-ease), color var(--as-dur-1) var(--as-ease), box-shadow var(--as-dur-1) var(--as-ease);
  }
  .btn:active, .side-item:active, .tabbar__item:active, .fab:active, .mail-tool:active, .mail-card__done:active, .triage__btn:active, .snooze-menu__opt:active, .segmented__item:active, .icon-btn:active, .mail-tabs__tab:active {
    transform: scale(.95); transition-duration: 90ms;
  }
  .side__live, .day-strip__now::before { animation: mh-live 1.8s ease-out infinite; }
  .badge--warn, .badge--crit, .plan-grid__over { animation: mh-breathe 2.6s ease-in-out infinite; }
  .today-suggestion, .mail-found__item:not(.is-added), .plan-proposal, .block--proposed { animation: mh-ghost 3s ease-in-out infinite; }
  @keyframes mh-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--as-pos) 50%, transparent); } 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--as-pos) 0%, transparent); } }
  @keyframes mh-breathe { 50% { filter: brightness(.93); } }
  @keyframes mh-ghost { 50% { border-color: var(--as-ink-3); } }
  .day-strip__now::before { animation-name: mh-live-brand; }
  @keyframes mh-live-brand { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--as-brand) 50%, transparent); } 100% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--as-brand) 0%, transparent); } }
  .check { transition: background-color 200ms var(--as-ease), border-color 200ms var(--as-ease); }

  @media (prefers-reduced-motion: reduce) {
    .side__live, .day-strip__now::before, .badge--warn, .badge--crit, .plan-grid__over, .today-suggestion, .mail-found__item, .plan-proposal, .block--proposed { animation: none; }
    .today-tile:hover, .today-need:hover, .tray-task:hover, .mail-ask__src:hover, .plan-trip:hover, .mail-rail__project:hover, .mail-rail__meet:hover { transform: none; }
    .btn:active, .side-item:active, .tabbar__item:active, .fab:active, .mail-tool:active, .mail-card__done:active, .triage__btn:active, .snooze-menu__opt:active, .segmented__item:active, .icon-btn:active, .mail-tabs__tab:active { transform: none; }
  }
}

@layer components {
  /* ── 7.7 small updates: notification-rule icon tiles, first-run stats, "Bill" on finance tasks ── */
  .rules__icon { width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--as-surface-3); color: var(--as-ink-2); display: flex; align-items: center; justify-content: center; }
  .fr-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .fr-stat { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: 10px; background: var(--as-surface-2); }
  .fr-stat__icon { color: var(--block-fg, var(--as-ink-2)); }
  .fr-stat__n { font-family: var(--as-mono); font-size: 20px; font-weight: 700; }
  .fr-stat span { font-size: 12px; color: var(--as-ink-3); }
  .task-row__bill { margin-left: 6px; font-family: var(--as-mono); font-size: 12px; color: var(--as-ink-3); }
}

@layer components {
  /* Projects / topics / goals (docs/15 §2) */
  .proj-index__help { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--as-ink-3); }
  .proj-goal__bar { display: block; height: 8px; border-radius: 4px; background: var(--as-surface-3); overflow: hidden; }
  .proj-goal__fill { display: block; height: 100%; width: var(--w); background: var(--as-pos); border-radius: 4px; }
  .proj-list__row[draggable="true"] { cursor: grab; }
  .proj-list__move { margin-left: auto; opacity: .55; }
  .proj-list__row:hover .proj-list__move, .proj-list__move:focus-visible { opacity: 1; }
  .proj-merge { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; font-size: 13px; }
  .proj-merge ul { margin: 4px 0 0; padding-left: 16px; color: var(--as-ink-2); }
  @media (max-width: 600px) { .proj-merge { grid-template-columns: 1fr; } }
  .proj-split__or { font-size: 12px; color: var(--as-ink-3); }
  .nav-item.is-drop { outline: 2px dashed var(--as-work); outline-offset: -2px; }
  /* Meeting time report (docs/15 §1, 8.3) */
  .mt { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
  .mt-card { display: flex; flex-direction: column; gap: 4px; }
  .mt-card__title { margin: 0 0 6px; font-size: 15px; }
  .mt-card__empty, .mt-note { margin: 0; font-size: 13px; color: var(--as-ink-3); }
  .mt-row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr 90px; grid-template-areas: "label bar value" ". sub sub"; align-items: center; gap: 2px 12px; padding: 6px 0; }
  .mt-row.is-current .mt-row__label { font-weight: 700; }
  .mt-row__label { grid-area: label; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mt-row__value { grid-area: value; text-align: right; font-size: 13px; }
  .mt-row__sub { grid-area: sub; font-size: 12px; color: var(--as-ink-3); }
  .mt-bar { grid-area: bar; height: 10px; border-radius: 5px; background: var(--as-surface-3); overflow: hidden; }
  .mt-bar__fill { display: block; height: 100%; width: var(--w); border-radius: 5px; background: var(--cal-1); }
  .mt-bar__fill--none { background: var(--as-border-2); }
  @media (max-width: 600px) { .mt-row { grid-template-columns: 1fr 70px; grid-template-areas: "label value" "bar bar" "sub sub"; } }
}

@layer components {
  /* Invites (docs/15 §6b) */
  .inv { display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
  .inv-card { display: flex; flex-direction: column; gap: 12px; }
  .inv-card.is-answered { opacity: .5; }
  .inv-card__head { display: flex; align-items: flex-start; gap: 12px; }
  .inv-card__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .inv-card__title { margin: 0; font-size: 17px; }
  .inv-card__when { font-size: 13px; color: var(--as-ink-2); }
  .inv-card__who { font-size: 13px; color: var(--as-ink-3); }
  .inv-suggest { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--as-surface-2); font-size: 13.5px; display: flex; gap: 8px; align-items: baseline; }
  .inv-suggest--accepted { background: var(--as-pos-bg); }
  .inv-suggest--tentative { background: var(--as-warn-bg); }
  .inv-suggest--declined { background: var(--as-crit-bg); }
  .inv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
  .inv-fact { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
  .inv-fact__label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--as-ink-3); }
  .inv-fact__warn { color: var(--as-warn); font-weight: 600; }
  .inv-fact__sub { font-size: 12px; color: var(--as-ink-3); }
  .inv-about { margin: 0; font-size: 13.5px; color: var(--as-ink-2); }
  .inv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .inv-slots summary { cursor: pointer; font-size: 13px; color: var(--as-ink-2); }
  .inv-slot { display: flex; gap: 8px; align-items: center; font-size: 13.5px; padding: 4px 0; }
  .inv-error { margin: 0; font-size: 13px; color: var(--as-crit); }
  .inv-empty { display: flex; gap: 8px; align-items: center; color: var(--as-ink-2); }
  .inv-done__row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 6px 0; border-top: 1px solid var(--as-border); font-size: 13.5px; }
  .inv-done__change { display: inline-flex; gap: 4px; }
  .mail-from { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
  .mail-from__note { margin: 0; }
  .trip-item__cal { margin: 0; display: inline; }
  .today-carry__acts { display: inline-flex; gap: 2px; }
  .today-carry__acts form { margin: 0; }
  .mem-search { margin: 8px 0; }
  .mem-search .input { width: 100%; max-width: 420px; }
  .mem-pages { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 10px 0; }
  .proj-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
  .proj-add .input:first-child { flex: 1 1 220px; }
  .proj-next__add { display: inline; margin: 0; }
  button.src-chip { cursor: pointer; border: 0; font: inherit; }
  .inv-done__change form { margin: 0; }
  .prep-answer { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
  .prep-answer form { margin: 0; }
}

@layer components {
  /* Assistant planner (docs/15 §4) */
  .pl { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
  .pl-card { display: flex; flex-direction: column; gap: 12px; }
  .pl-title { margin: 0; font-size: 20px; }
  .pl-note { margin: 0; font-size: 13px; color: var(--as-ink-3); }
  .pl-q { border: 0; margin: 0; padding: 10px 0; border-top: 1px solid var(--as-border); display: flex; flex-direction: column; gap: 6px; }
  .pl-q legend { font-weight: 600; font-size: 14.5px; padding: 0; margin-bottom: 4px; }
  .pl-opt { display: flex; gap: 8px; align-items: center; font-size: 14px; }
  .pl-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .pl-wait { flex-direction: row; align-items: center; gap: 14px; }
  .pl-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
  .pl-step { display: flex; flex-direction: column; gap: 4px; }
  .pl-step__head { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
  .pl-step__due { font-size: 12.5px; color: var(--as-ink-2); }
  .pl-needs { margin: 0; padding-left: 18px; font-size: 13px; color: var(--as-ink-2); }
  .pl-sources { display: flex; flex-wrap: wrap; gap: 6px; }
  .pl-sources a { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--as-surface-2); color: var(--as-ink-2); text-decoration: none; }
  .task-draft { display: flex; flex-direction: column; gap: 8px; padding: 10px 0; }
  .task-draft__out { display: flex; flex-direction: column; gap: 8px; }
  .task-draft__body { min-height: 140px; font-size: 14px; }
  .task-draft__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .task-draft__note { font-size: 12px; color: var(--as-ink-3); }
  .pl-row { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--as-ink); }
}

@layer components {
  /* First-run wizard (docs/15 §7) */
  .su { display: flex; flex-direction: column; gap: 16px; max-width: 860px; }
  .su-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
  .su-steps__item a { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--as-surface-2); color: var(--as-ink-2); text-decoration: none; font-size: 13px; font-weight: 600; }
  .su-steps__item.is-current a { background: var(--as-ink); color: var(--as-surface); }
  .su-steps__item.is-done a { color: var(--as-pos); }
  .su-steps__n { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--as-surface); color: var(--as-ink-2); font-size: 11px; }
  .su-card { display: flex; flex-direction: column; gap: 10px; }
  .su-note { font-size: 13px; color: var(--as-ink-3); margin: 0; }
  .su-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--as-border); }
  .su-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
  .su-row__state { font-size: 13px; color: var(--as-ink-2); }
  .su-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--as-border-2); flex: none; }
  .su-row--ok .su-dot { background: var(--as-pos); }
  .su-row--warn .su-dot { background: var(--as-crit); }
  .su-row--skipped .su-dot { background: var(--as-ink-3); }
  .su-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
  .su-actions--start { margin: 4px 0 8px; }
  .su-note--inline { display: inline; }
  .su-pair { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--as-surface-2); font-size: 14px; }
}

/* First-run wizard — calm and professional, like the development plan (owner 2026-11-07: "another Mardi Gras"):
   neutral surfaces, ink type, one status palette (green done / ink current / grey to do, red only for what needs
   fixing). Quiet motion: the hero and rows rise once, the ring and rail draw. Reduced motion: none of it. */
@property --su-p { syntax: '<number>'; inherits: false; initial-value: 0; }
@layer components {
  .su-hero { display: flex; align-items: center; gap: 16px; padding: 20px 22px; border-radius: 16px;
    background: var(--as-surface); border: 1px solid var(--as-border); box-shadow: var(--as-shadow-sm); animation: su-in .5s var(--as-ease) both; }
  .su-hero__mark { flex: none; width: 48px; height: 48px; display: grid; place-items: center; }
  .su-hero__mark img { width: 48px; height: 48px; border-radius: 12px; }
  .su-hero__text { flex: 1; min-width: 0; }
  .su-hero__title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--as-ink); }
  .su-hero__sub { margin: 4px 0 0; color: var(--as-ink-2); font-size: 14px; }
  .su-ring { flex: none; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; align-content: center;
    background: radial-gradient(closest-side, var(--as-surface) 84%, transparent 86% 100%), conic-gradient(var(--as-pos) calc(var(--su-p) * 1%), var(--as-border) 0);
    --su-p: var(--p); animation: su-ring 1s var(--as-ease) .15s both; }
  .su-ring__n { font-size: 18px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--as-ink); }
  .su-ring__of { font-size: 11px; color: var(--as-ink-3); font-weight: 600; }

  .su-rail { position: relative; list-style: none; margin: 0; padding: 4px 4px 0; display: grid; grid-template-columns: repeat(5, 1fr); }
  .su-rail__line { position: absolute; left: 10%; right: 10%; top: 20px; height: 2px; background: var(--as-border); overflow: hidden; }
  .su-rail__line i { display: block; height: 100%; width: calc(var(--at) * 25%); background: var(--as-pos); transform-origin: left; animation: su-grow .8s var(--as-ease) .2s both; }
  .su-rail__item { position: relative; display: flex; justify-content: center; }
  .su-rail__item a { display: flex; flex-direction: column; align-items: center; gap: 6px; text-decoration: none; color: var(--as-ink-3); font-size: 12.5px; font-weight: 600; text-align: center; }
  .su-rail__node { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--as-surface); color: var(--as-ink-3);
    border: 1.5px solid var(--as-border-2); transition: border-color .2s, color .2s; }
  .su-rail__item a:hover .su-rail__node { border-color: var(--as-ink-2); color: var(--as-ink); }
  .su-rail__item.is-done .su-rail__node { background: var(--as-pos); border-color: var(--as-pos); color: var(--as-surface); }
  .su-rail__item.is-done a { color: var(--as-ink-2); }
  .su-rail__item.is-current .su-rail__node { background: var(--as-ink); border-color: var(--as-ink); color: var(--as-surface); }
  .su-rail__item.is-current a { color: var(--as-ink); }
  .su-rail__label small { display: block; font-weight: 500; color: var(--as-ink-3); }

  .su-card__head { display: flex; align-items: center; gap: 12px; }
  .su-card__head .mt-card__title { margin: 0; font-size: 17px; }
  .su-tile { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--as-surface-2); color: var(--as-ink-2); }
  .su .su-row { animation: su-in .4s var(--as-ease) both; animation-delay: calc(.05s + var(--i, 0) * 40ms); padding-inline: 4px; }
  .su-row--warn .su-row__state { color: var(--as-crit); }
  .su-row.is-testing .su-dot { background: var(--as-ink-3); animation: su-pulse 1s ease-in-out infinite; }
  .su-launch { gap: 8px; padding: 11px 20px; font-size: 15px; border-radius: 12px; }
  .su-confetti { display: none; }

  @media (max-width: 640px) {
    .su-hero { flex-wrap: wrap; padding: 16px; }
    .su-hero__title { font-size: 18px; }
    .su-rail__label { font-size: 11px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .su-hero, .su-ring, .su-rail__line i, .su .su-row, .su-row.is-testing .su-dot { animation: none !important; }
  }
}
@keyframes su-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes su-ring { from { --su-p: 0; } }
@keyframes su-grow { from { transform: scaleX(0); } }
@keyframes su-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Development plan, live (admin) — /roadmap. Calm and professional: neutral surfaces, ink type, one status palette
   (green done, amber waiting on the owner, grey not started). Quiet motion: cards rise in sequence, the ring and the
   chart line draw, bars grow, numbers count up (motion.js), ticks pop. Reduced motion turns all of it off. */
@layer components {
  .rm { --rm-done: var(--as-pos); --rm-wait: color-mix(in oklab, var(--as-warn) 80%, var(--as-surface)); --rm-todo: var(--as-border-2);
    min-width: 0; width: 100%; max-width: 1120px; display: flex; flex-direction: column; gap: 16px; }
  .rm--updated .rm-hero { animation: rm-flash 1.4s var(--as-ease); }
  .rm-card, .rm-hero, .rm-phase { background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 16px; box-shadow: var(--as-shadow-sm); }
  .rm-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; min-width: 0; animation: rm-rise .6s var(--as-ease) calc(.08s * var(--i, 0)) both; }
  .rm-h { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--as-ink); }
  .rm-h__meta { margin-left: auto; font-size: 12px; font-weight: 500; letter-spacing: 0; color: var(--as-ink-3); }
  .rm-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; align-self: center; font-size: 11px; font-weight: 700; background: var(--as-ink); color: var(--as-surface); }
  .rm-id { flex: none; display: inline-block; min-width: 34px; font-size: 12px; font-weight: 600; color: var(--as-ink-3); }
  .rm-text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--as-ink-2); }
  .rm-text code, .rm-step__note code { font-family: var(--as-mono); font-size: 12px; padding: 1px 4px; border-radius: 4px; background: var(--as-surface-3); }
  .rm-fine { margin: 0; font-size: 12px; color: var(--as-ink-3); }

  /* summary */
  .rm-hero { display: flex; align-items: center; gap: 32px; padding: 26px 28px; animation: rm-rise .6s var(--as-ease) both; }
  .rm-ring { position: relative; flex: none; width: 150px; height: 150px; }
  .rm-ring__svg { width: 100%; height: 100%; transform: rotate(-90deg); }
  .rm-ring__svg circle { fill: none; stroke-width: 9; }
  .rm-ring__track { stroke: var(--as-surface-3); }
  .rm-ring__done { stroke: var(--rm-done); stroke-linecap: round; stroke-dasharray: var(--p) 100; animation: rm-dash 1.6s var(--as-ease) .2s both; }
  .rm-ring__wait { stroke: var(--rm-wait); stroke-dasharray: calc(var(--p) + var(--w)) 100; animation: rm-dash 1.9s var(--as-ease) .3s both; }
  .rm-ring__pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 38px; font-weight: 700; letter-spacing: -.04em; }
  .rm-ring__pct small { font-size: 16px; font-weight: 600; color: var(--as-ink-3); margin-left: 1px; }
  .rm-hero__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
  .rm-hero__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .rm-hero__big { margin: 0; font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
  .rm-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--as-ink-3); }
  .rm-live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rm-done); animation: rm-pulse 2.4s ease-out infinite; }
  .rm-hero__links { margin-left: auto; display: flex; gap: 16px; font-size: 13px; }
  .rm-hero__links a { color: var(--as-ink-2); font-weight: 600; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s var(--as-ease), color .2s; }
  .rm-hero__links a:hover { color: var(--as-ink); background-size: 100% 1px; }
  .rm-strip { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--as-surface-3); }
  .rm-strip__seg { flex: var(--w) 1 0; min-width: 0; transform-origin: 0 50%; animation: rm-grow 1.2s var(--as-ease) .25s both; }
  .rm-strip__seg--done { background: var(--rm-done); } .rm-strip__seg--waiting { background: var(--rm-wait); animation-delay: .45s; } .rm-strip__seg--todo { background: var(--rm-todo); animation-delay: .6s; }
  .rm-kpis { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr); border-top: 1px solid var(--as-border); padding-top: 14px; }
  .rm-kpi { padding: 0 16px; border-left: 1px solid var(--as-border); animation: rm-fade .5s ease calc(.4s + var(--i) * .07s) both; }
  .rm-kpi:first-child { padding-left: 0; border-left: 0; }
  .rm-kpi dt { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--as-ink-3); white-space: nowrap; }
  .rm-kpi dd { margin: 4px 0 0; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
  .rm-kpi--wide dd { font-size: 20px; display: flex; flex-direction: column; }
  .rm-kpi dd small { font-size: 12px; font-weight: 500; color: var(--as-ink-3); letter-spacing: 0; }
  .rm-key { width: 8px; height: 8px; border-radius: 2px; }
  .rm-key--done { background: var(--rm-done); } .rm-key--waiting { background: var(--rm-wait); } .rm-key--todo { background: var(--rm-todo); }

  .rm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; }

  /* now building */
  .rm-next { position: relative; display: flex; flex-direction: column; gap: 10px; }
  .rm-next__head { display: flex; align-items: center; gap: 10px; }
  .rm-badge { height: 24px; padding: 0 8px; border-radius: 6px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--as-ink); color: var(--as-surface); }
  .rm-next__t { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
  .rm-facts { margin: 0; display: grid; grid-template-columns: 1fr auto auto; gap: 16px; padding-top: 10px; border-top: 1px solid var(--as-border); }
  .rm-facts dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--as-ink-3); }
  .rm-facts dd { margin: 3px 0 0; font-size: 13px; font-weight: 600; }
  .rm-next__bar { height: 3px; border-radius: 2px; background: var(--as-surface-3); overflow: hidden; }
  .rm-next__bar span { display: block; width: 30%; height: 100%; border-radius: inherit; background: var(--as-ink); animation: rm-indeterminate 2.4s var(--as-ease) infinite; }

  /* forecast */
  .rm-fc { position: relative; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
  .rm-fc::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: 14px; width: 1px; background: var(--as-border-2); }
  .rm-fc__row { position: relative; display: grid; grid-template-columns: 9px auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 0; font-size: 14px; border-bottom: 1px solid var(--as-border);
    animation: rm-slide .5s var(--as-ease) calc(.3s + var(--i) * .07s) both; }
  .rm-fc__row:last-child { border-bottom: 0; }
  .rm-fc__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--as-surface); border: 1.5px solid var(--as-ink-3); }
  .rm-fc__row.is-next .rm-fc__dot { background: var(--as-ink); border-color: var(--as-ink); }
  .rm-fc__t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rm-fc__est { font-size: 12px; color: var(--as-ink-3); }
  .rm-fc__date { font-size: 13px; font-weight: 600; min-width: 84px; text-align: right; }

  /* the owner's to-do */
  .rm-todo__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 8px 28px; }
  .rm-todo__h { margin: 4px 0 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--as-ink-3); }
  .rm-item { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--as-border); animation: rm-fade .5s ease calc(.3s + var(--i) * .05s) both; }
  .rm-check { flex: none; width: 20px; height: 20px; margin-top: 1px; padding: 0; border-radius: 6px; border: 1.5px solid var(--as-border-2); background: var(--as-surface); color: transparent; display: grid; place-items: center; cursor: pointer;
    transition: background .2s, border-color .2s, transform .15s; }
  .rm-check:hover { border-color: var(--as-ink-3); }
  .rm-check:active { transform: scale(.9); }
  .rm-check:focus-visible { outline: none; box-shadow: var(--as-focus); }
  .rm-item.is-done .rm-check { background: var(--rm-done); border-color: var(--rm-done); color: var(--as-on-pos); }
  .rm-item.is-ticked .rm-check { animation: rm-tick .45s cubic-bezier(.34,1.56,.64,1); }
  .rm-item__main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
  .rm-item__t { margin: 0; font-size: 14px; font-weight: 600; transition: color .2s; }
  .rm-item.is-done .rm-item__t { color: var(--as-ink-3); text-decoration: line-through; text-decoration-color: var(--as-border-2); }
  .rm-item__meta { margin: 0; display: flex; gap: 10px; font-size: 12px; color: var(--as-ink-3); }
  .rm-item__how { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--as-ink-2); }
  .rm-item__how p { margin: 0; }
  .rm-cmd { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border-radius: 8px; background: var(--as-surface-2); border: 1px solid var(--as-border); min-width: 0; }
  .rm-cmd code { flex: 1; min-width: 0; font-size: 12px; overflow-x: auto; white-space: nowrap; color: var(--as-ink); }
  .rm-cmd__copy { flex: none; height: 26px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--as-border); background: var(--as-surface); font: inherit; font-size: 12px; font-weight: 600; color: var(--as-ink-2); cursor: pointer; transition: background .2s, color .2s; }
  .rm-cmd__copy:hover { color: var(--as-ink); background: var(--as-surface-3); }
  .rm-cmd__copy.is-copied { color: var(--rm-done); border-color: color-mix(in oklab, var(--rm-done) 40%, var(--as-border)); }

  /* charts */
  .rm-burn { margin: 0; display: flex; flex-direction: column; gap: 6px; }
  .rm-burn__svg { width: 100%; height: 180px; overflow: visible; }
  .rm-burn__grid { stroke: var(--as-border); vector-effect: non-scaling-stroke; }
  .rm-burn__area { fill: color-mix(in oklab, var(--rm-done) 10%, transparent); animation: rm-fade 1s ease 1.2s both; }
  .rm-burn__line { fill: none; stroke: var(--rm-done); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rm-draw 1.8s var(--as-ease) .4s forwards; }
  .rm-burn__dot { fill: var(--as-surface); stroke: var(--rm-done); stroke-width: 2; vector-effect: non-scaling-stroke; animation: rm-fade .4s ease calc(.8s + var(--i) * .1s) both; }
  .rm-burn__axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--as-ink-3); }
  .rm-ships { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; height: 180px; align-items: end; }
  .rm-ships__col { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
  .rm-ships__n { font-size: 11px; font-weight: 600; color: var(--as-ink-2); animation: rm-fade .4s ease calc(.9s + var(--i) * .04s) both; }
  .rm-ships__bar { width: 100%; max-width: 22px; height: var(--h); min-height: 3px; border-radius: 4px 4px 2px 2px; background: var(--as-ink-2); transform-origin: 50% 100%; animation: rm-grow-y .8s var(--as-ease) calc(.3s + var(--i) * .04s) both; transition: background .2s; }
  .rm-ships__col:hover .rm-ships__bar { background: var(--as-ink); }
  .rm-ships__bar.is-zero { background: var(--as-surface-3); }
  .rm-ships__d { font-size: 11px; color: var(--as-ink-3); }

  /* phase overview */
  .rm-journey { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .rm-journey__item { animation: rm-fade .5s ease calc(.3s + var(--i) * .05s) both; }
  .rm-node { height: 100%; box-sizing: border-box; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "k n" "t t" "b b"; gap: 6px 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--as-border); color: var(--as-ink); transition: border-color .2s, transform .2s var(--as-ease), box-shadow .2s; }
  .rm-node:hover { border-color: var(--as-border-2); transform: translateY(-2px); box-shadow: var(--as-shadow-sm); }
  .rm-node__k { grid-area: k; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--as-surface-3); }
  .rm-node--done .rm-node__k { background: var(--as-pos-bg); color: var(--rm-done); }
  .rm-node.is-current { border-color: var(--as-ink); }
  .rm-node.is-current .rm-node__k { background: var(--as-ink); color: var(--as-surface); }
  .rm-node__n { grid-area: n; justify-self: end; align-self: center; font-size: 11px; color: var(--as-ink-3); }
  .rm-node__t { grid-area: t; font-size: 13px; font-weight: 600; line-height: 1.3; }
  .rm-node__bar { grid-area: b; height: 4px; border-radius: 2px; background: var(--as-surface-3); overflow: hidden; align-self: end; }
  .rm-node__bar span { display: block; height: 100%; width: var(--p); border-radius: inherit; background: var(--rm-done); transform-origin: 0 50%; animation: rm-grow 1s var(--as-ease) calc(.5s + var(--i) * .05s) both; }

  /* phases in detail */
  .rm-phases { display: flex; flex-direction: column; gap: 10px; }
  .rm-phase { overflow: hidden; animation: rm-rise .5s var(--as-ease) calc(.2s + var(--i) * .05s) both; }
  .rm-phase__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; padding: 14px 18px; cursor: pointer; list-style: none; transition: background .2s; }
  .rm-phase__head:hover { background: var(--as-surface-2); }
  .rm-phase__head::-webkit-details-marker { display: none; }
  .rm-phase__badge { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--as-surface-3); }
  .rm-phase--done .rm-phase__badge { background: var(--as-pos-bg); color: var(--rm-done); }
  .rm-phase--active .rm-phase__badge { background: var(--as-ink); color: var(--as-surface); }
  .rm-phase__t { font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rm-phase__n { font-size: 13px; color: var(--as-ink-2); }
  .rm-phase__chev { display: inline-flex; color: var(--as-ink-3); transition: transform .3s var(--as-ease); }
  .rm-phase[open] .rm-phase__chev { transform: rotate(90deg); }
  .rm-heat { display: flex; flex-wrap: wrap; gap: 3px; max-width: 240px; justify-content: flex-end; }
  .rm-heat__c { width: 10px; height: 10px; border-radius: 2px; background: var(--rm-todo); }
  .rm-heat__c--done { background: var(--rm-done); } .rm-heat__c--waiting { background: var(--rm-wait); }
  .rm-steps { margin: 0; padding: 0 18px 8px; list-style: none; display: flex; flex-direction: column; border-top: 1px solid var(--as-border); }
  .rm-phase[open] .rm-step { animation: rm-fade .4s ease calc(var(--i) * .03s) both; }
  .rm-step { position: relative; display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--as-border); }
  .rm-step:last-child { border-bottom: 0; }
  .rm-step__icon { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--as-surface-3); color: var(--as-ink-3); }
  .rm-step--done .rm-step__icon { background: var(--as-pos-bg); color: var(--rm-done); }
  .rm-step--waiting .rm-step__icon { background: var(--as-warn-bg); color: var(--as-warn); }
  .rm-step__main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
  .rm-step__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .rm-step__t { font-size: 14px; font-weight: 700; }
  .rm-step__date { margin-left: auto; font-size: 12px; color: var(--as-ink-3); white-space: nowrap; }
  .rm-step__note { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--as-surface-2); font-size: 12.5px; line-height: 1.5; color: var(--as-ink-2); }
  .rm-step__foot { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 12.5px; color: var(--as-ink-2); }
  .rm-step__foot b { font-weight: 600; color: var(--as-ink-3); margin-right: 4px; }
  .rm-chip { height: 20px; padding: 0 7px; border-radius: 5px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; background: var(--as-surface-3); color: var(--as-ink-2); }
  .rm-chip--done { background: var(--as-pos-bg); color: var(--rm-done); }
  .rm-chip--waiting { background: var(--as-warn-bg); color: var(--as-warn); }
  .rm-pr { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 5px; font-size: 11px; font-weight: 600; color: var(--as-ink-2); border: 1px solid var(--as-border); transition: border-color .2s, color .2s; }
  .rm-pr:hover { color: var(--as-ink); border-color: var(--as-ink-3); }

  /* recently shipped */
  .rm-tl { position: relative; margin: 0; padding: 0 0 0 18px; list-style: none; display: flex; flex-direction: column; }
  .rm-tl::before { content: ""; position: absolute; left: 4px; top: 12px; bottom: 12px; width: 1px; background: var(--as-border-2); transform-origin: 50% 0; animation: rm-grow-y 1.2s var(--as-ease) .3s both; }
  .rm-tl__row { position: relative; display: flex; align-items: baseline; gap: 10px; padding: 7px 0; font-size: 14px; animation: rm-slide .45s var(--as-ease) calc(.3s + var(--i) * .04s) both; }
  .rm-tl__dot { position: absolute; left: -18px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--as-surface); border: 1.5px solid var(--as-ink-3); }
  .rm-tl__row:first-child .rm-tl__dot { background: var(--rm-done); border-color: var(--rm-done); }
  .rm-tl__t { flex: 1; min-width: 0; }
  .rm-tl__at { flex: none; font-size: 12px; color: var(--as-ink-3); }

  .rm-toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 10px; font-size: 13px; font-weight: 600;
    background: var(--as-ink); color: var(--as-surface); box-shadow: var(--as-shadow-lg); transform: translate(-50%, 160%); pointer-events: none; }
  .rm--updated .rm-toast, .rm-toast.is-on { animation: rm-toast 2.6s var(--as-ease) both; }

  .rm-doc { background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 16px; padding: 22px 26px; font-size: 14px; line-height: 1.65; overflow-x: auto; animation: rm-rise .5s var(--as-ease) both; }
  .rm-doc table { border-collapse: collapse; font-size: 13px; }
  .rm-doc th, .rm-doc td { border: 1px solid var(--as-border); padding: 6px 8px; vertical-align: top; text-align: left; }
  .rm-doc a { color: var(--as-work); }
  .rm-doc code { font-family: var(--as-mono); font-size: 12px; background: var(--as-surface-3); padding: 1px 4px; border-radius: 4px; }
  .rm-back { margin: 0; font-size: 13px; } .rm-back a { color: var(--as-work); font-weight: 600; }

  @media (max-width: 860px) {
    .rm-hero { flex-direction: column; align-items: stretch; gap: 18px; padding: 20px; }
    .rm-ring { width: 120px; height: 120px; align-self: center; }
    .rm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }
    .rm-kpi:nth-child(odd) { padding-left: 0; border-left: 0; }
    .rm-kpi--wide { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
    .rm-hero__links { margin-left: 0; }
    .rm-facts { grid-template-columns: 1fr 1fr; }
    .rm-facts > div:first-child { grid-column: 1 / -1; }
    .rm-phase__head { grid-template-columns: auto minmax(0, 1fr) auto auto; }
    .rm-phase__head .rm-heat { display: none; }
    .rm-step__date { margin-left: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rm, .rm *, .rm *::before, .rm *::after { animation: none !important; transition: none !important; }
    .rm-burn__line { stroke-dashoffset: 0; }
  }
}
@keyframes rm-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rm-slide { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes rm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rm-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rm-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes rm-dash { from { stroke-dasharray: 0 100; } }
@keyframes rm-draw { to { stroke-dashoffset: 0; } }
@keyframes rm-tick { 0% { transform: scale(.7); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes rm-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
@keyframes rm-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--as-pos) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
@keyframes rm-flash { 0% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--as-pos) 35%, transparent); } 100% { box-shadow: var(--as-shadow-sm); } }
@keyframes rm-toast { 0% { transform: translate(-50%, 160%); } 12%, 80% { transform: translate(-50%, 0); } 100% { transform: translate(-50%, 160%); } }

/* Settings → Mail & calendar accounts (8.15d) */
@layer components {
  .set-conn { align-items: flex-start; }
  .set-item__muted { font-weight: 500; color: var(--as-ink-3); }
  .set-conn__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
  .set-conn__chip { height: 20px; padding: 0 7px; border-radius: 5px; font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; background: var(--as-surface-3); color: var(--as-ink-2); }
  .set-conn__chip--muted { background: transparent; border: 1px solid var(--as-border-2); color: var(--as-ink-3); }
  .set-conn__state.is-bad { color: var(--as-crit); }
  .set-conn__acts { display: flex; gap: 12px; flex: none; }
  .set-conn__field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--as-ink-2); min-width: 0; }
  .set-conn__field small, .set-conn__adv summary small { font-weight: 500; color: var(--as-ink-3); }
  .set-conn__field .input { height: 40px; font-size: 15px; }
  .set-conn__help { margin: 0; font-size: 13px; line-height: 1.45; color: var(--as-ink-3); }
  .set-conn__adv summary { font-size: 13px; font-weight: 600; color: var(--as-work); cursor: pointer; }
  .set-conn__grid { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 10px; margin-top: 10px; }
  .set-conn__field--wide { grid-column: 1 / -1; }
  .set-conn__note { font-size: 12.5px; color: var(--as-ink-3); }
}

/* Settings → AI & privacy → Your AI (8.15e) */
@layer components {
  .set-aiprov { gap: 10px; }
  .set-aiprov__acts { display: flex; align-items: center; gap: 12px; }
}

/* Admin area (8.15h) — numbers about people, never their content */
@layer components {
  .adm { display: flex; flex-direction: column; gap: 16px; max-width: 1120px; min-width: 0; }
  .adm-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 10px; }
  .adm-tile { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--as-surface); border: 1px solid var(--as-border); color: var(--as-ink); transition: border-color .2s, transform .2s var(--as-ease); }
  a.adm-tile:hover { border-color: var(--as-border-2); transform: translateY(-1px); }
  .adm-tile.is-warn { border-color: var(--as-warn-border); background: var(--as-warn-bg); }
  .adm-tile__n { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
  .adm-tile__l { font-size: 12px; color: var(--as-ink-3); }
  .adm-invite { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .adm-invite .input { height: 38px; flex: 1 1 180px; min-width: 0; font-size: 14px; }
  .adm-link { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--as-surface-2); border: 1px solid var(--as-border); font-size: 13px; color: var(--as-ink-2); }
  .adm-link code { font-size: 12px; word-break: break-all; color: var(--as-ink); }
  .adm-table { display: flex; flex-direction: column; overflow-x: auto; }
  .adm-row { display: grid; grid-template-columns: minmax(180px, 2fr) 100px minmax(130px, 1.3fr) 110px minmax(120px, 1.2fr) 120px; gap: 12px; align-items: center; padding: 10px 4px; border-top: 1px solid var(--as-border); font-size: 13.5px; color: var(--as-ink); min-width: 780px; }
  a.adm-row:hover { background: var(--as-surface-2); }
  .adm-row--head { border-top: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--as-ink-3); }
  .adm-row small, .adm-who small { display: block; font-size: 12px; color: var(--as-ink-3); font-family: var(--as-font); }
  .adm-who { min-width: 0; }
  .adm-who b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .adm-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--as-surface-3); color: var(--as-ink-2); }
  .adm-chip--active { background: var(--as-pos-bg); color: var(--as-pos); }
  .adm-chip--invited { background: var(--as-work-tint); color: var(--as-work); }
  .adm-chip--disabled { background: var(--as-crit-bg); color: var(--as-crit); }
  .adm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .adm-head__t { margin: 0; font-size: 22px; font-weight: 700; }
  .adm-head__s { margin: 2px 0 0; font-size: 13px; color: var(--as-ink-3); }
  .adm-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; }
  .adm-facts { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .adm-facts dt { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--as-ink-3); }
  .adm-facts dd { margin: 2px 0 0; font-size: 14px; }
  .adm-sub { margin: 8px 0 0; font-size: 13px; font-weight: 700; }
  .adm-conn, .adm-ledger { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--as-border); font-size: 14px; }
  .adm-conn small, .adm-ledger small { color: var(--as-ink-3); font-size: 12px; }
  .adm-conn .adm-chip, .adm-ledger__acts { margin-left: auto; }
  .adm-ledger__acts { display: flex; gap: 12px; }
  .adm-ledger.is-done { color: var(--as-ink-3); }
  .adm-gap { margin-top: 10px; }
  .adm-features { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
  .adm-feat { display: flex; align-items: center; gap: 8px; font-size: 14px; }
  .adm-danger { border-color: color-mix(in oklab, var(--as-crit) 25%, var(--as-border)); }
  .adm-remove { color: var(--as-crit); }
}
@layer components { .set-conn__pad { margin: 0; padding: 0 14px 12px; } }

/* Meeting summary page: a saved recap keeps its line breaks */
.prep-after__saved { white-space: pre-wrap; }