/* Components. Each block maps to a template in templates/components. */
@layer components {
  /* ---- icon ---- */
  .icon {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.2em;
  }

  /* ---- wordmark ---- */
  .wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.04em;
    white-space: nowrap;
    color: var(--ink);
    text-decoration: none;
  }
  .wordmark__mark {
    width: 1rem;
    height: 1rem;
    border-radius: 5px;
    background: var(--accent);
    box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.2);
  }
  .wordmark--inverse { color: var(--brand-ink); }
  .wordmark--inverse .wordmark__mark { background: var(--brand-ink); box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.12); }

  /* ---- button ---- */
  .btn {
    --btn-bg: var(--surface);
    --btn-fg: var(--ink);
    --btn-bd: var(--rule-strong);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45em;
    min-height: 2.6rem;
    padding: 0.55em 1.05em;
    white-space: nowrap;
    border: 1px solid var(--btn-bd);
    border-radius: var(--radius-button);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 650;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
  }
  .btn:hover { --btn-bg: var(--surface-2); }
  .btn:active { transform: translateY(1px); }
  .btn:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
  .btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

  .btn--primary { --btn-bg: var(--accent); --btn-fg: var(--accent-ink); --btn-bd: var(--accent); }
  .btn--primary:hover { --btn-bg: var(--accent-hover); --btn-bd: var(--accent-hover); }

  .btn--quiet { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--ink-2); }
  .btn--quiet:hover { --btn-bg: var(--surface-2); --btn-fg: var(--ink); }

  .btn--danger { --btn-bg: transparent; --btn-fg: var(--danger); --btn-bd: color-mix(in srgb, var(--danger) 45%, transparent); }
  .btn--danger:hover { --btn-bg: var(--danger-soft); }

  .btn--sm { min-height: 2.1rem; padding: 0.35em 0.7em; font-size: 0.875rem; }
  .btn--block { width: 100%; }
  .btn--icon { padding-inline: 0; aspect-ratio: 1; }
  .htmx-request .btn, .btn.htmx-request { opacity: 0.6; pointer-events: none; }
  /* The desk's line is ready again the moment it empties; the flight shows the work. */
  .capture--desk.htmx-request .capture__row .btn { opacity: 1; pointer-events: auto; }

  /* ---- field ---- */
  .field { display: flex; flex-direction: column; gap: var(--space-2); }
  .field__label { font-weight: 650; font-size: 0.92rem; }
  .field__input {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    transition: border-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
  }
  .field__input:focus { outline: 2px solid transparent; border-color: var(--accent); box-shadow: var(--focus-ring); }
  .field__hint { font-size: var(--step--1); color: var(--ink-3); }
  .field__error { display: flex; align-items: center; gap: 0.4em; font-size: var(--step--1); color: var(--danger); }
  .field--invalid .field__input { border-color: var(--danger); }

  /* ---- reveal and pop (design/docs/motion.md, "Görünmez → görünür"): what shows and hides
     is always drawn. Closed it cannot be seen, reached or clicked (visibility, inert); opening
     brings it in, closing takes it out the same way. Nothing is switched with display or
     the hidden attribute, so nothing is laid out from scratch and nothing below it jumps.
     .reveal sits in the flow: its room grows from nothing (one child, min-height 0).
     .pop floats over the page (a list of suggestions): it takes no room. JS sets .is-open
     (motion.reveal); a CSS state may open it too (the capture line's keys while writing). ---- */
  .reveal {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows var(--reveal) var(--ease), opacity var(--base) var(--ease), visibility 0s linear var(--reveal);
  }
  .reveal > * { min-height: 0; overflow: hidden; translate: 0 -0.35rem; transition: translate var(--dur-appear) var(--ease-spring); }
  .reveal.is-open,
  .capture:has(> .capture__row:focus-within) > .cap-hint,
  .capture.is-writing > .cap-hint,
  .ask:has(#mode-new:checked) .ask__new,
  .ask:has(#mode-existing:checked) .ask__existing {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .reveal.is-open > *,
  .capture:has(> .capture__row:focus-within) > .cap-hint > *,
  .capture.is-writing > .cap-hint > *,
  .ask:has(#mode-new:checked) .ask__new > *,
  .ask:has(#mode-existing:checked) .ask__existing > * { translate: 0 0; }
  .pop {
    opacity: 0;
    visibility: hidden;
    translate: 0 -0.35rem;
    transition: opacity var(--base) var(--ease), translate var(--dur-appear) var(--ease-spring), visibility 0s linear var(--base);
  }
  .pop.is-open { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
  /* Reduced motion: base.css makes every transition instant but keeps its delay, so a closing
     part still waits for a tap to land. */

  /* ---- capture: the main interaction of the app ---- */
  .capture { margin-block: var(--space-6) var(--space-7); }
  .capture__label { display: block; margin-bottom: var(--space-1); font-size: var(--step--1); font-weight: 650; color: var(--ink-2); }
  .capture__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--rule-strong);
    transition: border-color var(--base) var(--ease);
  }
  .capture__row:focus-within { border-color: var(--accent); }
  .capture__input {
    flex: 1;
    min-width: 0;
    padding: var(--space-2) 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: clamp(1.45rem, 1.05rem + 1.9vw, 2.3rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: var(--leading-snug);
  }
  .capture__input:focus { outline: 2px solid transparent; }
  .capture__input::placeholder { color: var(--ink-3); font-weight: 400; }
  .capture__hint { margin-top: var(--space-2); font-size: var(--step--1); color: var(--ink-3); }
  /* A message line opens when it gets words and closes when they go (where the browser can
     grow to "auto"; elsewhere it fades). */
  .capture__error, .sys-error { overflow: clip; transition: block-size var(--reveal) var(--ease), opacity var(--base) var(--ease), margin-top var(--reveal) var(--ease); }
  .capture__error:empty, .sys-error:empty { block-size: 0; opacity: 0; margin-top: 0; }
  @starting-style { .capture__error:not(:empty), .sys-error:not(:empty) { block-size: 0; opacity: 0; } } /* an answer that brings one in */
  .capture__error { display: flex; align-items: center; gap: 0.4em; margin-top: var(--space-2); font-size: var(--step--1); color: var(--danger); }
  .capture:not(.capture--desk).htmx-request .capture__row { border-color: var(--accent-soft); }

  /* ---- what is written is kept: the park, the page's error line, the item's saved line ---- */
  /* A note that could not be saved waits just above the line it was written on, faded and
     dashed (app.js): a tap sends it now, and it goes again by itself (back online, after the
     next note that lands, when the desk opens). The line under it stays free for the next one. */
  .cap-park__in { padding-bottom: var(--space-2); }
  .cap-park__note { color: var(--ink-3); font-size: var(--step--1); }
  .cap-park__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin: var(--space-1) 0 0; padding: 0; list-style: none; }
  .parked {
    max-width: 100%;
    padding: 0.3em 0.8em;
    border: 1px dashed var(--rule-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: var(--step--1);
    text-align: start;
    overflow-wrap: anywhere;
    opacity: 0.72;
    cursor: pointer;
    transition: opacity var(--base) var(--ease), border-color var(--base) var(--ease);
  }
  .parked:hover, .parked:focus-visible { opacity: 1; border-color: var(--accent); }
  .parked[aria-busy="true"] { opacity: 0.45; cursor: progress; }
  @starting-style { .parked { opacity: 0; } }
  .cap-park__more { color: var(--ink-3); font-size: var(--step--1); }
  /* A chip whose word the server will not read stays in the text: dashed, and said under the chips. */
  .cap-chips .dchip--warn { border-style: dashed; border-color: var(--danger); background: transparent; color: var(--danger); }
  .cap-chips .dchip--warn .icon { color: var(--danger); }
  .cap-warn { display: flex; flex-direction: column; margin: 0; color: var(--danger); font-size: var(--step--1); }
  .cap-warn:not(:empty) { margin-top: var(--space-1); }
  /* The page's error line (layout.html): drawn on every page, it opens when keep.js gives it the
     catalog's sentence; it floats at the top, clear of the theme switch. */
  .page-error {
    position: fixed;
    z-index: 30;
    inset-block-start: max(var(--space-2), env(safe-area-inset-top));
    inset-inline: max(var(--space-3), env(safe-area-inset-left)) calc(max(var(--space-2), env(safe-area-inset-right)) + 3rem);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25em 0.5em;
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--danger);
    border-radius: var(--radius-sheet);
    background: var(--surface);
    box-shadow: var(--shadow-sheet);
    color: var(--danger);
    font-size: var(--step--1);
    transition: opacity var(--base) var(--ease), translate var(--dur-appear) var(--ease-spring), visibility 0s linear var(--base);
  }
  .page-error:empty { opacity: 0; visibility: hidden; translate: 0 -0.35rem; }
  .page-error:not(:empty) { transition-delay: 0s; }
  .page-error .icon { flex: none; }
  .page-error span { flex: 1 1 12rem; }
  .page-error__link { color: var(--accent); font-weight: 750; white-space: nowrap; }
  @media (min-width: 48rem) { .page-error { inset-inline: 0; width: min(34rem, calc(100% - 8rem)); margin-inline: auto; } }
  /* The item's text says where it stands under it: "Saved.", or what kept it from saving. */
  .itemsheet__saved { min-height: 1.45em; margin: var(--space-1) 0 0; color: var(--ink-3); font-size: var(--step--1); }
  .itemsheet__saved.is-error { color: var(--danger); }
  /* The desk brought up to date after a long pause comes in without a move (keep.js). */
  :root.is-quiet *, :root.is-quiet *::before, :root.is-quiet *::after { transition: none !important; animation: none !important; }

  /* ---- sheet: a list surface ---- */
  .sheet {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius-sheet);
    box-shadow: var(--shadow-sheet);
    overflow: hidden;
  }
  .sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--rule);
  }
  .sheet__title { display: flex; align-items: center; gap: 0.5em; font-size: var(--step-1); }
  .sheet__title .icon { color: var(--ink-3); }

  .count {
    display: inline-block;
    min-width: 2rem;
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: var(--step--1);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }
  .count__n { display: inline-block; } /* the digit rolls (motion.count) */

  /* ---- row: one item ---- */
  .rows { margin: 0; padding: 0; list-style: none; }
  .row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
    border-top: 1px solid var(--rule);
  }
  .row:first-child { border-top: 0; }
  /* A narrow list (a drawer on a small phone) puts a row's moves under its title, so the title keeps
     the width and its words stay whole (the day's leftovers do it everywhere, .row--decide). */
  .rows { container-type: inline-size; }
  @container (max-width: 22rem) {
    .row { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--space-1); }
    .row:not(.row--decide) > :nth-child(3) { grid-column: 2; justify-self: end; margin-inline-end: calc(var(--space-2) * -1); }
  }
  .row__check { display: contents; }
  .row__title { font-weight: 550; line-height: var(--leading-snug); overflow-wrap: break-word; }
  .row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: 0.15rem; font-size: var(--step--1); color: var(--ink-3); }
  .row--new { animation: row-arrive var(--slow) var(--ease) both; }
  /* With motion.js the new row waits for its note and arrives by script (js/motion.js). */
  .motion .row--new { animation: none; }
  .motion-wait { opacity: 0; }

  @keyframes row-arrive {
    0% { opacity: 0; transform: translateY(-0.6rem); background-color: var(--accent-soft); }
    35% { opacity: 1; transform: none; background-color: var(--accent-soft); }
    100% { background-color: transparent; }
  }

  .check {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    font-size: 1.35rem;
    transition: color var(--fast) var(--ease), background-color var(--fast) var(--ease);
  }
  .check .icon--on { display: none; }
  /* A finger needs 44 px: a row's small buttons and checks grow on touch screens. */
  @media (pointer: coarse) {
    .check { width: 2.75rem; height: 2.75rem; }
    .row__acts .btn--sm { min-width: 2.75rem; min-height: 2.75rem; }
  }
  .check:hover:not(:disabled), .check:focus-visible { color: var(--accent); background: var(--accent-soft); }
  .check:hover:not(:disabled) .icon--off, .check:focus-visible .icon--off { display: none; } /* not a reveal: one icon swaps for the other in place */
  .check:hover:not(:disabled) .icon--on, .check:focus-visible .icon--on { display: block; }
  .check:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
  .check:disabled { cursor: default; }

  /* ---- the flying note (js/motion.js): a captured line on its way to the list ---- */
  .fly {
    position: fixed;
    z-index: 50;
    max-width: min(90vw, 40rem);
    margin: 0;
    padding: 0.05em 0.4em;
    overflow: hidden;
    border-radius: var(--radius-control);
    background: var(--surface);
    box-shadow: var(--shadow-lift);
    color: var(--ink);
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    transform-origin: center;
    will-change: transform, opacity;
  }

  /* ---- badge ---- */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.2em 0.6em;
    border-radius: var(--radius-pill);
    background: var(--surface-2);
    color: var(--ink-2);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
  }
  .badge--work, .badge--life, .badge--chore { color: var(--tone); background: var(--tone-soft); }
  .badge--work::before, .badge--life::before, .badge--chore::before {
    content: "";
    width: 0.45em;
    height: 0.45em;
    border-radius: 50%;
    background: currentColor;
  }
  .badge--work { --tone: var(--area-work); --tone-soft: var(--area-work-soft); }
  .badge--life { --tone: var(--area-life); --tone-soft: var(--area-life-soft); }
  .badge--chore { --tone: var(--area-chore); --tone-soft: var(--area-chore-soft); }
  .badge--accent { color: var(--accent); background: var(--accent-soft); }

  /* ---- flash ---- */
  .flash {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
    background: var(--surface);
  }
  .flash .icon { margin-top: 0.2em; color: var(--ink-2); }
  .flash--error { border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--danger-soft); }
  .flash--error .icon { color: var(--danger); }
  .flash--success { border-color: color-mix(in srgb, var(--success) 35%, transparent); background: var(--success-soft); }
  .flash--success .icon { color: var(--success); }

  /* ---- empty state ---- */
  .empty { display: flex; gap: var(--space-4); padding: var(--space-6) var(--space-5); color: var(--ink-2); }
  .empty__icon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none; border-radius: 50%; background: var(--surface-2); color: var(--ink-3); font-size: 1.15rem; }
  .empty__title { color: var(--ink); font-weight: 650; }
  .empty__body { margin-top: 0.15rem; font-size: 0.95rem; max-width: 34ch; }

  /* ---- top bar ---- */
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); }
  .topbar__user { display: flex; align-items: center; gap: var(--space-2); min-width: 0; margin-inline-end: 2.5rem; } /* the theme switch sits at the corner */
  .topbar__name { color: var(--ink-2); font-size: 0.92rem; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* ---- the desk: the capture line and its two handles, nothing else at rest ---- */
  html:has(.page--desk) { overscroll-behavior-x: none; }
  .desk {
    min-height: 100dvh;
    padding: min(28dvh, 9rem) var(--space-4) max(var(--space-4), env(safe-area-inset-bottom));
    touch-action: pan-y pinch-zoom;
  }
  @media (min-width: 48rem) { .desk { padding-top: 34dvh; } }
  .desk__inner { width: min(40rem, 100%); margin-inline: auto; transition: scale var(--base) var(--ease); }
  .capture--desk { margin: 0; }
  /* The Add pill appears with the first character; hidden it cannot take focus. */
  .capture--desk .capture__row .btn {
    transition: opacity var(--base) var(--ease), scale var(--dur-appear) var(--ease-spring), visibility 0s;
  }
  .capture--desk .capture__row:has(.capture__input:placeholder-shown) .btn {
    opacity: 0;
    scale: 0.85;
    visibility: hidden;
    transition: opacity var(--fast) var(--ease), scale var(--base) var(--ease), visibility 0s linear var(--base);
  }
  .desk__status { margin-top: var(--space-3); color: var(--ink-2); font-size: var(--step--1); }
  :root:not(.motion) .desk__status:empty { display: none; } /* not a reveal: without scripts the sentence only comes with a new page */
  /* With JavaScript the sentence is for screen readers; the hop says it to the eye. */
  .motion .desk__status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* The veil: the desk recedes while a drawer is open; a tap on it is a tap outside the drawer. */
  .desk::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 10;
    background: var(--veil);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--base) var(--ease);
  }
  :root:has(.drawer:popover-open) .desk::after { opacity: var(--drawer-p, 1); }
  :root:has(.drawer:popover-open) .desk__inner { scale: 0.985; }
  :root:has(.drawer--drag) .desk::after, :root:has(.drawer--drag) .desk__inner { transition: none; }
  /* Under the veil the handles take no taps: a tap there closes the drawer, it does not open the other one. */
  :root:has(.drawer:popover-open) .handles { pointer-events: none; }

  /* First-run peek: the Inbox drawer's edge shows for a moment after the first note lands. */
  .desk::before {
    content: "";
    position: fixed;
    z-index: 15;
    inset-block: var(--space-2);
    left: 0;
    width: 3rem;
    border-radius: var(--radius-sheet);
    background: var(--surface);
    box-shadow: var(--shadow-sheet);
    translate: calc(-100% - 3rem) 0; /* far enough that its shadow stays off screen */
    pointer-events: none;
    transition: translate var(--dur-hop) var(--ease-hop);
  }
  .desk--peek::before { translate: calc(-100% + var(--peek)) 0; transition: translate var(--dur-appear) var(--ease-spring); }

  /* ---- handle: the quiet ends of the capture line that open a drawer ---- */
  .handles { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
  .handle {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    min-height: 2.75rem;
    margin-inline: calc(var(--space-3) * -1);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: var(--step--1);
    font-weight: 650;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
  }
  .handle:hover, .handle:focus-visible { background: var(--surface-2); color: var(--ink); }
  .handle:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
  .handle__chev {
    display: inline-grid;
    place-items: center;
    width: 1.6em;
    height: 1.6em;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--accent);
    transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease);
  }
  .handle__n { display: inline-flex; }
  .handle__count { display: inline-block; color: var(--accent); font-weight: 750; font-variant-numeric: tabular-nums; }
  .handle__count.motion-wait { display: none; } /* not a reveal: the count waits for its note's flight, motion.resize grows the handle */
  /* Touch has no hover: the handles read as buttons at rest. */
  @media (pointer: coarse) { .handle { margin-inline: 0; background: var(--surface-2); } }
  /* A keyboard user sees the arrow keys while the field is focused and empty. */
  @media (pointer: fine) {
    .desk:has(.capture__input:focus:placeholder-shown) .handle__chev {
      border-color: var(--rule-strong);
      border-bottom-width: 2px;
      background: var(--surface);
    }
  }
  /* After a no-JS action the answering handle hops once (motion.js does it otherwise). */
  :root:not(.motion) .handle--hit { animation: handle-hit var(--dur-hop) var(--ease-hop) both; }
  @keyframes handle-hit {
    from { transform: translateY(var(--hop-lift)) scale(var(--hop-scale)); }
    to { transform: none; }
  }

  /* ---- drawer: a sheet (popover) that slides in from its side and closes back to the desk ---- */
  .drawer {
    --drawer-from: calc(-100% - 1.5rem);
    position: fixed;
    z-index: 20;
    flex-direction: column; /* also while it slides out, when display is still held */
    inset: var(--space-2) auto var(--space-2) max(var(--space-2), env(safe-area-inset-left));
    width: min(26rem, calc(100% - 3.5rem - env(safe-area-inset-left) - env(safe-area-inset-right)));
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent; /* an edge in forced-colors mode */
    border-radius: var(--radius-sheet);
    background: var(--surface);
    box-shadow: var(--shadow-sheet), var(--shadow-lift);
    touch-action: pan-y pinch-zoom; /* horizontal moves belong to gesture.js */
    color: var(--ink);
    opacity: 0;
    translate: var(--drawer-from) 0;
    transition: translate var(--base) var(--ease), opacity var(--base) var(--ease),
      display var(--base) allow-discrete, overlay var(--base) allow-discrete;
  }
  .drawer--end { --drawer-from: calc(100% + 1.5rem); inset: var(--space-2) max(var(--space-2), env(safe-area-inset-right)) var(--space-2) auto; }
  .drawer:popover-open {
    display: flex;
    opacity: 1;
    translate: 0 0;
    transition: translate var(--dur-appear) var(--ease-spring), opacity var(--base) var(--ease),
      display var(--dur-appear) allow-discrete, overlay var(--dur-appear) allow-discrete;
  }
  @starting-style { .drawer:popover-open { opacity: 0; translate: var(--drawer-from) 0; } }
  .drawer::backdrop { background: transparent; }
  /* While a finger holds the sheet it follows 1:1; on release the transition above takes over. */
  .drawer.drawer--drag, .drawer--drag:popover-open { transition: none; }
  @media (min-width: 48rem) {
    .drawer { inset: var(--space-3) auto var(--space-3) max(var(--space-3), env(safe-area-inset-left)); }
    .drawer--end { inset: var(--space-3) max(var(--space-3), env(safe-area-inset-right)) var(--space-3) auto; }
  }
  .drawer__head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-4) var(--space-3); }
  .drawer__heading { flex: 1; min-width: 0; }
  .drawer--start .drawer__title { flex: 1; min-width: 0; }
  .drawer__title {
    font-family: var(--font-display);
    font-size: clamp(var(--step-2), 1rem + 2vw, var(--step-3));
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
    line-height: var(--leading-tight);
  }
  .drawer__title:focus { outline: none; }
  /* Next's drawer: the date over its name, quiet. */
  .drawer__eyebrow { color: var(--ink-3); font-size: var(--step--1); font-weight: 650; }
  .drawer__count { align-self: center; }
  .drawer__close {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: calc(var(--space-2) * -1);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink-2);
    font-size: 1.15rem;
    cursor: pointer;
    transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
  }
  .drawer__close:hover { background: var(--surface-2); color: var(--ink); }
  .drawer__close:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
  .drawer__body { flex: 1; min-height: 0; overflow: hidden auto; overscroll-behavior: contain; border-top: 1px solid var(--rule); } /* a row sliding out never scrolls it sideways */
  .drawer__foot { padding: var(--space-3) var(--space-4) max(var(--space-3), env(safe-area-inset-bottom)); border-top: 1px solid var(--rule); }
  /* A short screen (a phone on its side, a page zoomed to 200 or 400%): the drawer is one scroll
     container and its foot (the account row) follows the list instead of holding the bottom, so
     the list keeps its room; the undo notice keeps to the drawer's bottom edge while it scrolls. */
  @media (max-height: 40rem) {
    .drawer { overflow: hidden auto; overscroll-behavior: contain; }
    .drawer__body { flex: none; overflow-x: clip; overflow-y: visible; }
    .drawer > .toast-slot { position: sticky; }
  }
  /* The first rows slide in after the sheet, a beat apart, only while it opens;
     rows further down are off screen and simply there. */
  .drawer:popover-open:not(.is-settled) .row:nth-child(-n + 8) {
    transition: translate var(--dur-appear) var(--ease-spring), opacity var(--base) var(--ease);
  }
  @starting-style { .drawer:popover-open:not(.is-settled) .row:nth-child(-n + 8) { opacity: 0; translate: 0 0.5rem; } }
  .drawer:popover-open:not(.is-settled) .row:nth-child(2) { transition-delay: 40ms; }
  .drawer:popover-open:not(.is-settled) .row:nth-child(3) { transition-delay: 80ms; }
  .drawer:popover-open:not(.is-settled) .row:nth-child(4) { transition-delay: 120ms; }
  .drawer:popover-open:not(.is-settled) .row:nth-child(5) { transition-delay: 160ms; }
  .drawer:popover-open:not(.is-settled) .row:nth-child(n + 6):nth-child(-n + 8) { transition-delay: 200ms; }
  /* Without the Popover API the drawers are plain sections under the desk. */
  @supports not selector(:popover-open) {
    .handles { display: none; }
    .drawer { position: static; opacity: 1; translate: none; width: auto; max-width: 40rem; margin: var(--space-5) auto; box-shadow: none; overflow: visible; }
  }

  /* The account: the name and "sign out" on one line, the rest under it,
     "everywhere" quietest of all. The name gets the room it needs first. */
  .account { display: flex; flex-direction: column; gap: var(--space-2); }
  .account__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-width: 0; }
  .account__name { min-width: 0; overflow: hidden; color: var(--ink-2); font-size: var(--step--1); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
  .account__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
  .account__all-btn { width: fit-content; padding: 0; border: 0; background: none; color: var(--ink-3); font: inherit; font-size: var(--step--1); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; list-style: none; }
  .account__all-btn::-webkit-details-marker { display: none; }
  .account__all-btn:hover { color: var(--ink-2); }
  .account__all-btn:focus-visible { outline: 2px solid transparent; border-radius: 4px; box-shadow: var(--focus-ring); }
  /* "Everywhere" asks first: its line says what happens and does it (the details opens like every part, base.css). */
  .account__all-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: var(--space-2) 0 0; color: var(--ink-2); font-size: var(--step--1); }

  /* Done today: closed by default, hidden while empty. */
  /* What got done today: a quiet door at the drawer's end, to Genel bakış's Done. */
  .done-door { margin: 0 var(--space-4) var(--space-4); }
  .done-door__link {
    display: flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding: var(--space-2) 0;
    border-top: 1px solid var(--rule); color: var(--ink-2); font-size: var(--step--1); font-weight: 650; text-decoration: none;
  }
  .done-door__link > span { flex: 1; min-width: 0; }
  .done-door__link .icon:first-child { color: var(--success); }
  .done-door__link:hover { color: var(--ink); }
  .done-door__link:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); border-radius: var(--radius-control); }
  .row--done .row__title { color: var(--ink-3); text-decoration: line-through; }
  .check--on { color: var(--accent); }
  .check--on:hover:not(:disabled) { color: var(--ink-2); background: var(--surface-2); }

  /* ---- auth page ---- */
  .auth { display: grid; min-height: 100dvh; grid-template-columns: minmax(0, 1fr); }
  .auth__statement { display: none; }
  .auth__panel { display: grid; place-items: center; padding: var(--space-7) var(--space-5); }
  .auth__form { width: min(100%, 24rem); --stack-gap: var(--space-5); }
  .auth__title { font-size: var(--step-3); }
  .auth__quote { margin: 0; }
  .auth__quote p {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 1rem + 3.2vw, 3.9rem);
    font-weight: var(--display-weight);
    line-height: 1.04;
    letter-spacing: -0.035em;
    max-width: 13ch;
  }
  .auth__figure { margin: 0; }
  .auth__switch { color: var(--ink-2); }
  .auth__cite { margin-top: var(--space-5); font-size: var(--step-0); opacity: 0.85; }

  @media (min-width: 56rem) {
    .auth { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
    .auth__statement {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: var(--space-7);
      padding: clamp(2rem, 5vw, 4.5rem);
      background: var(--brand);
      color: var(--brand-ink);
    }
    .auth__mobile-mark { display: none; }
  }

  /* ---- error page ---- */
  .error-page { padding-block: var(--space-5) var(--space-8); }
  .error-page__body { margin-top: var(--space-8); max-width: 36rem; }
  .error-page h1 { font-size: var(--step-4); }

  /* ---- gallery (development only) ---- */
  .gallery { padding-bottom: var(--space-8); }
  .gallery__intro { padding-block: var(--space-5) var(--space-6); --stack-gap: var(--space-2); }
  .gallery__intro h1 { font-size: var(--step-4); }
  .gallery__section { padding-block: var(--space-6); border-top: 1px solid var(--rule); }
  .gallery__section > h2 { margin-bottom: var(--space-5); font-size: var(--step-2); }
  .gallery__grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
  .capture--demo { margin-block: var(--space-6) 0; }
  .gallery__system { display: grid; gap: var(--space-6); max-width: 40rem; margin-top: var(--space-5); }
  .swatches, .icon-grid { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
  .swatches { grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
  .swatch { display: flex; flex-direction: column; gap: var(--space-2); }
  .swatch__chip { height: 3.5rem; border-radius: var(--radius-control); border: 1px solid var(--rule); }
  .swatch--bg { background: var(--bg); }
  .swatch--surface { background: var(--surface); }
  .swatch--ink { background: var(--ink); }
  .swatch--ink-2 { background: var(--ink-2); }
  .swatch--rule { background: var(--rule); }
  .swatch--accent { background: var(--accent); }
  .swatch--danger { background: var(--danger); }
  .swatch--work { background: var(--area-work); }
  .swatch--life { background: var(--area-life); }
  .swatch--chore { background: var(--area-chore); }
  .swatch--tone { background: linear-gradient(90deg, var(--tone) 0 50%, var(--tone-soft) 50%); }
  .icon-grid { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
  .icon-grid li { display: flex; align-items: center; gap: var(--space-2); font-size: 1.2rem; }
  .icon-grid code { font-size: 0.8rem; }

  /* ---- language switch (EN | TR) ---- */
  .lang-switch { display: inline-flex; }
  .lang-switch__group {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-control);
  }
  .lang-switch__btn {
    min-width: 2.5rem;
    min-height: 2.1rem;
    padding: 0 0.5em;
    border: 0;
    border-radius: calc(var(--radius-control) - 2px);
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .lang-switch__btn:hover { background: var(--surface-2); color: var(--ink); }
  .lang-switch__btn:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
  /* The chosen language says so by more than its color: a thin accent edge and a heavier word. */
  .lang-switch__btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 800; box-shadow: inset 0 0 0 1px var(--accent); cursor: default; }
  .lang-switch__btn[aria-pressed="true"]:focus-visible { box-shadow: inset 0 0 0 1px var(--accent), var(--focus-ring); }

  /* ---- the theme switch: a quiet round button at the top right of every page (ui/theme-switch).
     Both icons are drawn; the moon shows by day (press for dark), the sun at night. ---- */
  .theme-switch {
    position: fixed;
    inset-block-start: max(var(--space-2), env(safe-area-inset-top));
    inset-inline-end: max(var(--space-2), env(safe-area-inset-right));
    z-index: 5;
  }
  /* On a narrow or touch screen it keeps its corner at the top of the page but scrolls away with
     it: fixed, it would sit over the buttons and the text further down. */
  @media (max-width: 40rem), (pointer: coarse) { .theme-switch { position: absolute; } }
  .theme-switch__btn {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
  }
  .theme-switch__btn:hover { background: var(--surface-2); color: var(--ink); }
  .theme-switch__btn:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); }
  .theme-switch__icon {
    grid-area: 1 / 1;
    display: grid;
    transition: opacity var(--base) var(--ease), rotate var(--dur-appear) var(--ease-spring), scale var(--dur-appear) var(--ease-spring);
  }
  .theme-switch__icon .icon { width: 1.15rem; height: 1.15rem; }
  .theme-switch__icon--sun,
  [data-theme="dark"] .theme-switch__icon--moon { opacity: 0; rotate: -60deg; scale: 0.6; }
  [data-theme="dark"] .theme-switch__icon--sun { opacity: 1; rotate: 0deg; scale: 1; }

  /* ---- very narrow phones: the user name leaves the topbar (screen readers still get it) ---- */
  @media (max-width: 24rem) {
    .topbar__name {
      position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
  }

  /* ---- buttons that keep only their icon on narrow screens ---- */
  @media (max-width: 30rem) {
    .btn--collapse { padding-inline: 0; aspect-ratio: 1; }
    .btn--collapse .btn__label {
      position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }
  }
  /* Under a leftover's title there is room: its decision keeps its words. */
  .row--decide .btn--collapse { padding-inline: var(--space-2); aspect-ratio: auto; }
  .row--decide .btn--collapse .btn__label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }

  /* ---- Sistemini kur: the onboarding that stays (templates/components/system.html) ---- */
  .guide {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    width: 100%;
    max-width: 48rem;
    min-height: 100dvh;
    margin-inline: auto;
    padding: clamp(0.75rem, 3vw, 2rem) clamp(1rem, 4vw, 2.5rem) var(--space-5);
  }
  .guide__copy { display: flex; flex-direction: column; gap: var(--space-2); view-transition-name: step-copy; }
  .guide__eyebrow { font-size: var(--step--1); font-weight: 700; color: var(--accent); letter-spacing: 0.02em; }
  .guide__title { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 2.6rem); line-height: var(--leading-tight); }
  .guide__hint { color: var(--ink-2); max-width: 36rem; }

  /* Top row: Geri on the left; "Masaya geç" (a guest: "Giriş yap") on the right; from the map, back to it. */
  .sys-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 2.75rem; padding-inline-end: 2.75rem; } /* the theme switch's corner */
  .sys-top__form { display: contents; }
  .sys-top__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    min-height: 2.75rem;
    margin-inline: calc(var(--space-2) * -1);
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: var(--step--1);
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }
  .sys-top__link:hover { background: var(--surface-2); color: var(--ink); }
  .sys-top__link:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
  /* A crowded row shortens the way back's words before anything reaches the theme switch's corner. */
  .sys-top__link { min-width: 0; }
  .sys-top__link > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .sys-top__aside { color: var(--ink-2); font-size: var(--step--1); text-align: end; }
  .sys-top__aside a { font-weight: 700; }

  /* The guide's bar: a given piece first (language and time came with the browser), then one
     segment per step. Passed steps fill whether they were done or skipped. */
  .steps { display: flex; align-items: flex-start; gap: var(--space-2); margin-top: calc(var(--space-3) * -1); }
  .steps__given {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.3em;
    height: 1.4rem;
    padding: 0 0.55rem;
    border-radius: var(--radius-pill);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
  }
  .steps__given .icon { width: 0.95em; height: 0.95em; }
  .steps__bar { display: flex; flex: 1; gap: 0.3rem; margin: 0; padding: 0.55rem 0 0; list-style: none; view-transition-name: progress; }
  .steps__seg { flex: 1; min-width: 0; }
  .steps__seg::before { content: ""; display: block; height: 0.32rem; border-radius: var(--radius-pill); background: var(--rule); transition: background-color var(--base) var(--ease); }
  .steps__seg.is-done::before { background: color-mix(in oklab, var(--accent) 55%, var(--rule)); }
  .steps__seg.is-current::before { background: var(--accent); }
  .steps__label { display: none; }
  @media (max-width: 30rem) {
    .steps__given { justify-content: center; width: 1.4rem; padding: 0; }
    .steps__given-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  }
  @media (min-width: 48rem) {
    /* A step's name that does not fit ends in "…" before it reaches the next one. */
    .steps__label { display: block; margin-top: 0.35rem; padding-inline-end: 0.35rem; overflow: hidden; color: var(--ink-3); font-size: 0.75rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
    .steps__seg.is-current .steps__label { color: var(--ink); }
  }

  .sys-body { display: flex; flex-direction: column; gap: var(--space-5); }
  .sys-contract { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--surface); color: var(--ink-2); font-size: 0.95rem; }
  .sys-contract .icon { margin-top: 0.2em; color: var(--accent); }
  .sys-choice { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; border: 0; }
  .sys-choice legend { margin-bottom: var(--space-2); padding: 0; }
  .sys-fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  @media (min-width: 40rem) { .sys-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .inline-add { display: flex; gap: var(--space-2); }
  .inline-add .field__input { flex: 1; min-width: 0; }

  /* The foot: the step's one main action with "Şimdilik geç" under it (beside it on wide screens). */
  .sys-foot { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2); margin-top: auto; padding-top: var(--space-4); }
  .sys-foot__skip { align-self: center; min-height: 2.75rem; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-2); font: inherit; font-size: 0.95rem; font-weight: 650; cursor: pointer; }
  @media (hover: hover) { .sys-foot__skip:hover { background: var(--surface-2); color: var(--ink); } }
  .sys-foot__skip:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
  @media (min-width: 40rem) {
    .sys-foot { flex-direction: row; align-items: center; }
    .sys-foot__skip { order: -1; }
    .sys-foot__main { min-width: 12rem; margin-left: auto; }
  }

  /* Chips: a choice (language, day, a bucket for the note) or a place; without a tone of their own they answer in the accent. */
  .chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0; border: 0; }
  .chips__legend { float: left; margin-right: var(--space-1); padding: 0; font-size: var(--step--1); font-weight: 700; color: var(--ink-3); }
  /* chip: chooses. The detail chip (.dchip) and the select (.filter) are chips too. */
  .chip, .dchip, .filter {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-height: 2.25rem;
    padding: 0.3em 0.8em;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-chip);
    background: var(--surface);
    color: var(--ink-2);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
  }
  .chip { position: relative; cursor: pointer; }
  .chip:not([data-hue]) { --tone: var(--accent); --tone-soft: var(--accent-soft); }
  .chip .icon { color: var(--tone); }
  @media (hover: hover) { .chip:hover { border-color: var(--tone); color: var(--ink); } }
  .chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  .chip:has(input:checked) { border-color: var(--tone); background: var(--tone-soft); color: var(--ink); }
  .chip:has(input:focus-visible), .chip:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
  .chip-form { display: contents; }
  .chip.chip--mine { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
  .chip.chip--mine .icon { color: var(--accent); }
  .chip.chip--sample { border-style: dashed; background: transparent; }
  .chip.chip--sample .icon { color: var(--ink-3); }
  @media (hover: hover) { .chip.chip--sample:hover { border-color: var(--accent); background: color-mix(in oklab, var(--accent-soft) 55%, transparent); } }
  .chip .chip-mark { width: 0.9em; height: 0.9em; color: var(--ink-3); }

  /* Places: the person's chips first, the samples under them. */
  .places { display: flex; flex-direction: column; gap: var(--space-4); }
  .places__group { display: flex; flex-direction: column; gap: var(--space-2); }
  .places__label { font-size: var(--step--1); font-weight: 700; letter-spacing: 0; color: var(--ink-3); }
  .places__list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .places__empty { color: var(--ink-2); font-size: 0.95rem; }

  /* Bucket grid and tiles. A tile fills with its own soft tone; the inbox is the one white tile. */
  .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); view-transition-name: bucket-grid; }
  @media (min-width: 40rem) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 46rem) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  /* The icon (and the × of a person's own bucket) on the first line, the name under them across
     the whole tile: a name wraps between words and stops after three lines (it is read whole). */
  .tile {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tile-h, 8.25rem);
    padding: var(--space-3);
    border-radius: var(--radius-tile);
    background: var(--tone-soft);
    color: var(--ink);
  }
  .tile[data-hue="0"] { background: var(--surface); }
  .tile__icon { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: calc(var(--radius-tile) * 0.6); background: var(--surface); color: var(--tone); }
  .tile[data-hue="0"] .tile__icon { background: var(--surface-2); }
  .tile__name {
    display: -webkit-box;
    grid-column: 1 / -1;
    overflow: hidden;
    font-family: var(--font-sans);
    font-size: var(--step-0);
    font-weight: 680;
    letter-spacing: 0;
    line-height: var(--leading-snug);
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
  .tile__count { grid-column: 1 / -1; align-self: end; overflow: hidden; font-family: var(--font-display); font-size: var(--tile-count, var(--step-4)); font-weight: var(--display-weight); font-variant-numeric: tabular-nums lining-nums; line-height: 1; }
  .tile__count [data-count] { display: inline-block; }
  .tile__last { grid-column: 1 / -1; min-height: 1.2em; overflow: hidden; color: var(--ink-3); font-size: var(--step--1); text-overflow: ellipsis; white-space: nowrap; }
  .tile__kind { grid-column: 1 / -1; color: var(--ink-2); font-size: var(--step--1); font-weight: 700; }
  .tile--project { grid-column: span 2; }
  .grid--compact { --tile-h: 6.25rem; --tile-count: var(--step-3); }
  /* A sample tile: faded and dashed in its tone; touched, it fills and is the person's. Text keeps its
     contrast: "faded" comes from the missing fill and the dashed edge, not from opacity. */
  .tile-form { display: contents; }
  .tile--sample {
    width: 100%;
    min-height: 6rem;
    margin: 0;
    border: 1.5px dashed color-mix(in oklab, var(--tone) 50%, var(--rule-strong));
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease);
  }
  @media (hover: hover) { .tile--sample:hover { border-color: var(--tone); background: color-mix(in oklab, var(--tone-soft) 60%, transparent); } }
  .tile--sample:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
  .tile--sample .tile__icon { border: 1px dashed color-mix(in oklab, var(--tone) 45%, var(--rule-strong)); background: transparent; }
  .tile--sample .tile__name { color: var(--ink-2); }
  .tile__foot { display: flex; grid-column: 1 / -1; align-self: end; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--step--1); font-weight: 700; }
  .tile__tag { color: var(--ink-3); }
  .tile__add { display: inline-flex; align-items: center; gap: 0.25em; color: var(--ink-2); }
  /* The × on the person's own bucket (buckets card) gives it back. */
  .tile-remove { position: absolute; top: var(--space-1); right: var(--space-1); margin: 0; }
  .tile-remove__btn {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
  }
  .tile-remove__btn .icon { width: 1rem; height: 1rem; }
  .tile-remove__btn:hover { background: var(--surface); color: var(--ink); }
  .tile-remove__btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
  /* The project's own form under the grid: two fields, then "Projeyi aç". */
  .project-fields, .project-add { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
  .project-add__btn { align-self: flex-start; }
  /* Without motion.js a new or hit tile still answers once (a form post and redirect). */
  :root:not(.motion) .tile--new { animation: tile-appear var(--dur-appear) var(--ease-spring) both; }
  :root:not(.motion) .tile--hit { animation: tile-hit var(--dur-hop) var(--ease-hop) both; }
  @keyframes tile-appear { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
  @keyframes tile-hit { from { transform: translateY(var(--hop-lift)) scale(var(--hop-scale)); } to { transform: none; } }

  .guide-capture { margin: 0; }

  /* Decide: the guide's step is Clarify's card (.clarify .card, .decide); when the notes are
     decided it closes with what went where. */
  .decide__card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-sheet); background: var(--surface); box-shadow: var(--shadow-sheet); }
  .decide__title { font-size: var(--step-2); font-weight: 680; line-height: var(--leading-snug); overflow-wrap: anywhere; }
  .decide__card--done { align-items: flex-start; }
  .decide__mark { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 1.2rem; }
  .decide__sum { color: var(--ink-2); }

  /* The frame the person set up; the guide's end lines it up one by one. */
  .summary { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .summary__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--surface); color: var(--ink-2); }
  .summary__item strong { color: var(--ink); font-weight: 700; }
  .summary__item > .icon { color: var(--accent); }
  .guide--ready { justify-content: center; }
  .guide__mark { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 1.6rem; transition: scale var(--dur-hop) var(--ease-hop); }
  @starting-style { .guide__mark { scale: 0.4; } }
  .guide--ready .summary__item { transition: opacity var(--base) var(--ease), translate var(--dur-appear) var(--ease-spring); }
  @starting-style { .guide--ready .summary__item { opacity: 0; translate: 0 0.6rem; } }
  .guide--ready .summary__item:nth-child(2) { transition-delay: 90ms; }
  .guide--ready .summary__item:nth-child(3) { transition-delay: 180ms; }
  .guide--ready .summary__item:nth-child(4) { transition-delay: 270ms; }
  .guide__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

  /* ---- the five pill families (see /ui): tag (says), badge (marks), chip
     (chooses: .chip, the detail .dchip, the select .filter), tab (goes) and
     key (types). One size and one radius per family. ---- */
  /* tag: read-only; a note's place, time, reason, a count. Always one line: a tag longer than its
     line ends in "…" (a narrow screen first leaves out a lead, a step's project before its flow). */
  .tag { display: inline-block; max-width: 100%; overflow: hidden; padding: 0.1em 0.55em; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-2); font-size: 0.8rem; font-weight: 650; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
  .tag .icon { width: 1em; height: 1em; color: var(--ink-3); }
  .tag > .icon:only-child, .tag > .icon:first-child:has(+ .tag__lead) { margin-inline-end: 0.3em; }
  .tag > * + :not(.tag__lead) { margin-inline-start: 0.3em; }
  @media (max-width: 30rem) { .tag__lead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
  .tag--sample { margin-left: var(--space-2); border: 1px dashed var(--rule-strong); background: transparent; }
  .tag--due { background: var(--accent-soft); color: var(--ink); }
  .tag--late { background: var(--danger-soft); color: var(--danger); }
  .tag--late .icon { color: var(--danger); }
  .tag--project .icon { color: var(--accent); }
  .tag--day .icon { color: var(--accent); }
  .tag--now { background: var(--accent); color: var(--accent-ink); }
  .tag--now .icon { color: var(--accent-ink); }

  /* The page: the frame's cards, each a door to its card. */
  .sys-map { display: flex; flex-direction: column; gap: var(--space-5); width: 100%; max-width: 40rem; min-height: 100dvh; margin-inline: auto; padding: clamp(0.75rem, 3vw, 2rem) clamp(1rem, 4vw, 2.5rem) var(--space-6); }
  .sys-map__head { display: flex; flex-direction: column; gap: var(--space-2); }
  .sys-map__title { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.6rem); line-height: var(--leading-tight); }
  .sys-map__lead { color: var(--ink-2); }
  .resume { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-sheet); background: var(--accent-soft); color: var(--ink); text-decoration: none; }
  .resume:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
  .resume__body { display: flex; flex: 1; flex-direction: column; }
  .resume__title { font-weight: 700; }
  .resume__line { color: var(--ink-2); font-size: var(--step--1); }
  .resume > .icon { color: var(--accent); }
  .cards { margin: 0; padding: 0; overflow: hidden; border-radius: var(--radius-sheet); background: var(--surface); box-shadow: var(--shadow-sheet); list-style: none; }
  .cards > li + li { border-top: 1px solid var(--rule); }
  .card-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); color: var(--ink); text-decoration: none; transition: background-color var(--fast) var(--ease); }
  .card-row:hover { background: var(--surface-2); }
  .card-row:focus-visible { outline: 2px solid transparent; box-shadow: inset var(--focus-ring); }
  .card-row__icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
  .card-row__body { display: flex; flex-direction: column; min-width: 0; }
  .card-row__name { font-weight: 680; }
  .card-row__line { color: var(--ink-2); font-size: var(--step--1); overflow-wrap: anywhere; }
  .card-row__state { display: inline-flex; align-items: center; gap: 0.2em; color: var(--ink-3); }
  .sys-map__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }

  /* Step changes slide (htmx transition:true); Geri slides the other way. The grid and the bar move as one. */
  ::view-transition-group(bucket-grid), ::view-transition-group(progress) { animation-duration: var(--dur-step); animation-timing-function: var(--ease-step); }
  ::view-transition-old(step-copy) { animation: var(--dur-step) var(--ease-step) both vt-out-left; }
  ::view-transition-new(step-copy) { animation: var(--dur-step) var(--ease-step) both vt-in-right; }
  :root[data-vt="back"]::view-transition-old(step-copy) { animation-name: vt-out-right; }
  :root[data-vt="back"]::view-transition-new(step-copy) { animation-name: vt-in-left; }
  @keyframes vt-out-left { to { opacity: 0; transform: translateX(-12%); } }
  @keyframes vt-in-right { from { opacity: 0; transform: translateX(12%); } }
  @keyframes vt-out-right { to { opacity: 0; transform: translateX(12%); } }
  @keyframes vt-in-left { from { opacity: 0; transform: translateX(-12%); } }

  /* ---- clarify: one note, eight decisions (templates/components/clarify.html) ---- */
  .clarify { display: flex; flex-direction: column; gap: var(--space-5); view-transition-name: clarify-card; }
  .clarify__progress {
    display: block;
    width: 100%;
    height: 0.32rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--rule);
    overflow: hidden;
    appearance: none;
  }
  .clarify__progress::-webkit-progress-bar { background: var(--rule); border-radius: var(--radius-pill); }
  .clarify__progress::-webkit-progress-value { background: var(--accent); border-radius: var(--radius-pill); transition: inline-size var(--base) var(--ease); }
  .clarify__progress::-moz-progress-bar { background: var(--accent); border-radius: var(--radius-pill); }
  .card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border-radius: var(--radius-sheet);
    background: var(--surface);
    box-shadow: var(--shadow-sheet);
  }
  .card__age { color: var(--ink-3); font-size: var(--step--1); font-weight: 650; }
  .card__title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.15rem + 2.2vw, 2.4rem);
    font-weight: var(--display-weight);
    letter-spacing: var(--display-tracking);
    line-height: var(--leading-tight);
    overflow-wrap: anywhere;
  }
  .card__title:focus { outline: none; }
  .card__notes { color: var(--ink-2); white-space: pre-line; overflow-wrap: anywhere; }
  .clarify__error { display: flex; align-items: center; gap: 0.4em; color: var(--danger); font-size: 0.95rem; }
  /* Clarify's sheet: the note (.card) and its detail chips on one surface. */
  .clarify__sheet { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-sheet); background: var(--surface); box-shadow: var(--shadow-sheet); }
  .clarify__sheet > .card { padding: 0; border-radius: 0; background: none; box-shadow: none; }
  .clarify__details .dchips { margin-top: var(--space-2); }
  /* A small screen (narrow, or short) shows the decisions without scrolling: the sheet opens up,
     its chips wait under the decisions (focus follows that order where the browser can), and a
     long title shows four lines until it is tapped (clarify.js keeps the card's own focus quiet). */
  @media (max-width: 40rem), (max-height: 700px) {
    .clarify-page, .clarify { gap: var(--space-3); }
    .clarify { reading-flow: flex-visual; }
    .clarify__sheet { display: contents; }
    .clarify__sheet > .card { padding: var(--space-4); border-radius: var(--radius-sheet); background: var(--surface); box-shadow: var(--shadow-sheet); }
    .clarify .decide { gap: var(--space-3); }
    .clarify .decide__legend { margin-bottom: var(--space-1); }
    .clarify .decision { min-height: 2.75rem; padding-block: 0.4em; }
    .clarify__details { order: 1; }
    .clarify__details .dchips { margin-top: 0; }
    .clarify__skip { order: 2; }
    .clarify .card__title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }
    .clarify .card__title:is(:focus-visible, :focus:not([data-quiet])) { -webkit-line-clamp: unset; }
  }
  /* The card's details sit in the card's own column; its alert line (clarify/alert) is always
     drawn and takes room (and the column's gap) only while it speaks. */
  .card__details { display: contents; }
  .clarify > .clarify__alert { margin-block-start: calc(-1 * var(--space-5)); }
  .clarify > .clarify__alert .clarify__error { padding-top: var(--space-5); }
  .clarify__empty > .clarify__alert { margin-block-end: calc(-1 * var(--space-3)); }
  .clarify__empty > .clarify__alert .clarify__error { padding-bottom: var(--space-3); }

  .decide { display: flex; flex-direction: column; gap: var(--space-4); }
  .decide__group { min-width: 0; margin: 0; padding: 0; border: 0; }
  .decide__legend { margin-bottom: var(--space-2); padding: 0; color: var(--ink-3); font-size: var(--step--1); font-weight: 700; }
  .decide__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  @media (min-width: 40rem) { .decide__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .decision {
    display: flex;
    align-items: center;
    gap: 0.55em;
    min-width: 0;
    min-height: 2.9rem;
    padding: 0.55em 0.8em;
    border: 1px solid var(--rule);
    border-radius: var(--radius-control);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 650;
    text-align: start;
    cursor: pointer;
    transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
  }
  .decision .icon { color: var(--accent); }
  /* Only a pointer that hovers shows it: a touch screen would keep a tapped decision lit on the next card. */
  @media (hover: hover) { .decision:hover { border-color: var(--accent); background: var(--accent-soft); } }
  .decision:active { transform: translateY(1px); }
  .decision:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
  /* A label wraps between words; a word breaks (at a syllable) only if it cannot fit a line alone. */
  .decision__label { flex: 1; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
  /* A narrow screen with a keyboard shows each decision's key: one decision a line keeps every word whole. */
  @media (max-width: 30rem) and (pointer: fine) { .decide__grid { grid-template-columns: minmax(0, 1fr); } }
  .decide__group + .decide__group .decision .icon { color: var(--ink-3); }
  /* A key shows only where there is a keyboard. */
  .key, .cap-key kbd {
    display: none;
    min-width: 1.5em;
    padding: 0.05em 0.35em;
    border: 1px solid var(--rule-strong);
    border-bottom-width: 2px;
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink-2);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
  }
  @media (pointer: fine) { .key { display: inline-block; } }
  .clarify__skip { align-self: flex-end; display: inline-flex; align-items: center; gap: 0.2em; min-height: 2.75rem; padding: 0 var(--space-2); border-radius: var(--radius-pill); color: var(--ink-2); font-size: 0.95rem; font-weight: 650; text-decoration: none; }
  @media (hover: hover) { .clarify__skip:hover { background: var(--surface-2); color: var(--ink); } }
  .clarify__skip:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

  /* The second question of Delegate, Defer and Make a project. */
  .ask { display: flex; flex-direction: column; gap: var(--space-4); }
  .ask__when { margin: 0; }
  .ask__when legend { margin-bottom: var(--space-2); }
  .chip__hint { color: var(--ink-3); font-size: 0.8rem; font-weight: 600; }
  .ask__foot { display: flex; justify-content: flex-end; gap: var(--space-2); }

  .clarify__empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-sheet); background: var(--surface); box-shadow: var(--shadow-sheet); }
  .clarify__empty-icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 1.3rem; }
  .clarify__left { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .clarify__left strong { color: var(--ink); font-variant-numeric: tabular-nums; }
  .clarify__empty-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  ::view-transition-old(clarify-card) { animation: var(--dur-step) var(--ease-step) both vt-out-left; }
  ::view-transition-new(clarify-card) { animation: var(--dur-step) var(--ease-step) both vt-in-right; }
  :root[data-vt="back"]::view-transition-old(clarify-card) { animation-name: vt-out-right; }
  :root[data-vt="back"]::view-transition-new(clarify-card) { animation-name: vt-in-left; }
  /* A detail changes the same card: it grows or shrinks in place and its content crossfades. */
  :root[data-vt="same"]::view-transition-old(clarify-card) { animation: var(--base) var(--ease) both vt-fade-out; }
  :root[data-vt="same"]::view-transition-new(clarify-card) { animation: var(--base) var(--ease) both vt-fade-in; }
  ::view-transition-group(clarify-card), ::view-transition-group(itemsheet), ::view-transition-group(week-look) { animation-duration: var(--reveal); animation-timing-function: var(--ease); }
  @keyframes vt-fade-out { to { opacity: 0; } }
  @keyframes vt-fade-in { from { opacity: 0; } }

  /* ---- the undo notice: low on the screen, over everything, for 6 seconds ---- */
  .toast-slot {
    position: fixed;
    z-index: 40;
    inset: auto var(--space-3) max(var(--space-3), env(safe-area-inset-bottom));
    display: flex;
    justify-content: center;
    pointer-events: none;
  }
  /* While a notice waits (on a touch screen, until the next action) its page keeps room for it
     under the last line, so the last button can always be scrolled above it. */
  main:has(> .toast-slot) { transition: padding-bottom var(--reveal) var(--ease); }
  main:has(> .toast-slot > .toast) { padding-bottom: calc(var(--toast-h) + env(safe-area-inset-bottom)); }
  .toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 100%;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--ink);
    color: var(--bg);
    box-shadow: var(--shadow-lift);
    pointer-events: auto;
    animation: toast-in var(--dur-appear) var(--ease-spring) both;
  }
  .toast.is-leaving { animation: toast-out var(--base) var(--ease) both; }
  .toast__text { min-width: 0; font-size: 0.95rem; font-weight: 600; }
  .toast--notice { gap: var(--space-2); padding: var(--space-2) var(--space-4); }
  .toast--notice .icon { flex: none; }
  .toast__btn {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.4em;
    min-height: 2.5rem;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--bg) 16%, transparent);
    color: var(--bg);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 750;
    cursor: pointer;
  }
  .toast__btn:hover { background: color-mix(in srgb, var(--bg) 26%, transparent); }
  .toast__btn:focus-visible { outline: 2px solid var(--bg); outline-offset: 2px; }
  .toast .key { border-color: color-mix(in srgb, var(--bg) 45%, transparent); background: transparent; color: var(--bg); }
  @keyframes toast-in { from { opacity: 0; transform: translateY(1rem) scale(0.96); } }
  @keyframes toast-out { to { opacity: 0; transform: translateY(0.5rem); } }

  /* ---- the desk's way into clarify, and Waiting under Next ---- */
  .clarify-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-3) var(--space-3) var(--space-1);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-control);
    background: var(--accent-soft);
    color: var(--ink);
    text-decoration: none;
    transition: background-color var(--fast) var(--ease);
  }
  .clarify-bar > .icon { color: var(--accent); font-size: 1.15rem; }
  .clarify-bar:hover { background: color-mix(in oklab, var(--accent-soft) 70%, var(--accent) 12%); }
  .clarify-bar:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
  .clarify-bar__text { display: flex; flex: 1; flex-direction: column; min-width: 0; }
  .clarify-bar__text span { color: var(--ink-2); font-size: var(--step--1); }
  .drawer__foot--end { display: flex; justify-content: flex-end; gap: var(--space-2); }

  /* ---- a list page of Genel bakış (pages/lists.html): its rows; the tab pill (the gallery's family) ---- */
  .tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-height: 2.5rem;
    padding: 0.3em 0.85em;
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-2);
    font-size: 0.9rem;
    font-weight: 650;
    text-decoration: none;
  }
  .tab .icon { color: var(--ink-3); }
  .tab:hover { border-color: var(--accent); color: var(--ink); }
  .tab:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
  .tab.is-current { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
  .tab.is-current .icon { color: var(--accent); }
  .tab__n { color: var(--accent); font-weight: 750; font-variant-numeric: tabular-nums; }
  .list { view-transition-name: list-sheet; }
  .list__error { padding: var(--space-3) var(--space-5) 0; }
  .row__acts { display: flex; align-items: center; gap: var(--space-1); }
  .row__act { display: contents; }
  /* A leftover waits for a decision: its moves sit under the title, the title keeps the width. */
  .row--decide { grid-template-columns: auto minmax(0, 1fr); row-gap: var(--space-1); }
  .row--decide .row__acts { grid-column: 2; flex-wrap: wrap; margin-left: calc(-1 * var(--space-2)); }
  .row__icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; color: var(--ink-3); font-size: 1.2rem; }
  .row--stale .row__meta { color: var(--ink-2); }
  ::view-transition-group(list-sheet) { animation-duration: var(--base); }
  @media (max-width: 30rem) { .tab .icon { display: none; } }
  /* In the gallery the notice stays in the flow. */
  .pill-families { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: var(--space-3) var(--space-4); margin: 0; }
  .pill-families dt { color: var(--ink-3); font-size: var(--step--1); font-weight: 700; }
  .pill-families dd { margin: 0; }
  @media (pointer: fine) { .pill-families .key { display: inline-block; } }
  .gallery__clarify { display: flex; flex-direction: column; gap: var(--space-4); }
  .gallery__clarify .toast-slot, .gallery__notice .toast-slot { position: static; justify-content: flex-start; }

  /* ---- details: an item's chips and the picker of the open one (components/details.html) ---- */
  .dchips, .cap-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  /* Unset, a detail chip is a quiet invitation; set, it is filled. */
  .dchip { border-color: var(--rule); background: transparent; color: var(--ink-3); cursor: pointer; }
  .dchip .icon { color: var(--ink-3); }
  .dchip:hover { border-color: var(--accent); color: var(--ink); }
  .dchip:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
  .dchip--set { border-style: solid; border-color: transparent; background: var(--surface-2); color: var(--ink); }
  .dchip--set .icon { color: var(--accent); }
  .dchip--due { background: var(--danger-soft); }
  .dchip--due .icon { color: var(--danger); }
  .dchip--project .icon { color: var(--accent); }
  .dchip.is-open { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
  .dchip-form { display: contents; }
  .dchip__x { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin: -0.3em -0.45em -0.3em 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-3); cursor: pointer; }
  .dchip__x:hover { background: var(--surface); color: var(--ink); }
  .dchip__x .icon { width: 0.9em; height: 0.9em; }
  .picker { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-2); padding: var(--space-4); border-radius: var(--radius-control); background: var(--bg); }
  .picker .chips { margin: 0; }
  .picker__q { color: var(--ink-2); font-size: var(--step--1); font-weight: 700; }
  .picker__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .picker__row .field__input { width: auto; flex: 1 1 8rem; min-width: 0; }
  .picker__foot { display: flex; justify-content: flex-end; gap: var(--space-2); }
  .chip__hint { color: var(--ink-3); font-size: 0.8rem; font-weight: 600; }
  .toggle { display: inline-flex; align-items: center; gap: 0.5em; color: var(--ink-2); font-size: 0.95rem; font-weight: 600; cursor: pointer; }
  .toggle input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }

  /* ---- the capture line's chips, suggestions and syntax hint (js/capture.js) ---- */
  /* The room above them is inside the part that grows, so a closed one leaves none. */
  .cap-chips { padding-top: var(--space-3); }
  .cap-hint__keys { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-3); }
  /* Leaving the line closes them a moment later, so a tap that took focus away (a handle,
     a key) lands before anything under it moves. Opening has no wait. */
  .cap-hint { transition-delay: 250ms, 250ms, calc(250ms + var(--reveal)); }
  .cap-key { display: inline-flex; align-items: center; gap: 0.35em; min-height: 2rem; padding: 0 0.7em 0 0.35em; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-3); font: inherit; font-size: var(--step--1); font-weight: 600; cursor: pointer; }
  .cap-key:hover { background: var(--surface-2); color: var(--ink-2); }
  .cap-key:active { background: var(--accent-soft); color: var(--ink); }
  .cap-key kbd { display: inline-grid; place-items: center; height: 1.5em; font-size: inherit; }
  .suggest { position: absolute; z-index: 5; inset: calc(100% + var(--space-2)) 0 auto; margin: 0; padding: var(--space-1); border-radius: var(--radius-control); background: var(--surface); box-shadow: var(--shadow-sheet), var(--shadow-lift); list-style: none; }
  .suggest__item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: 10px; cursor: pointer; }
  .suggest__item .icon { color: var(--accent); }
  .suggest__item.is-active, .suggest__item:hover { background: var(--accent-soft); }
  .suggest__n { margin-left: auto; color: var(--ink-3); font-size: var(--step--1); font-variant-numeric: tabular-nums; }
  .suggest__item--new { color: var(--ink-2); }

  /* ---- the project question: a new project or a step of an existing one ---- */
  .seg { display: inline-flex; align-self: flex-start; padding: 3px; border-radius: var(--radius-pill); background: var(--surface-2); }
  .seg__opt { position: relative; padding: 0.4em 1em; border-radius: var(--radius-pill); color: var(--ink-2); font-size: 0.92rem; font-weight: 650; cursor: pointer; }
  .seg__opt input { position: absolute; opacity: 0; }
  .seg__opt:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sheet); }
  .seg__opt:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .seg__opt:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
  /* Make a project: both answers are drawn, the mode opens one (.reveal, opened above by :has()).
     The closed one gives back the gap it would take; a field's focus ring is not cut. */
  .ask__panel { display: flex; flex-direction: column; gap: var(--space-4); }
  .ask__new, .ask__existing {
    margin-top: calc(var(--space-4) * -1);
    transition: grid-template-rows var(--reveal) var(--ease), margin-top var(--reveal) var(--ease), opacity var(--base) var(--ease), visibility 0s linear var(--reveal);
  }
  .ask:has(#mode-new:checked) .ask__new, .ask:has(#mode-existing:checked) .ask__existing { margin-top: 0; }
  .ask .reveal > * { overflow: clip; overflow-clip-margin: 4px; }
  /* Its two "go" buttons share one place; the mode shows its own. */
  .ask__gos { display: inline-grid; }
  .ask__go { display: flex; grid-area: 1 / 1; justify-content: flex-end; opacity: 0; visibility: hidden; transition: opacity var(--base) var(--ease), visibility 0s linear var(--base); }
  .ask:has(#mode-new:checked) .ask__go--new, .ask:has(#mode-existing:checked) .ask__go--existing { opacity: 1; visibility: visible; transition-delay: 0s; }
  .projpick { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
  .projpick legend { margin-bottom: var(--space-1); }
  .projpick__opt { position: relative; display: flex; flex-direction: column; gap: 0.1rem; padding: var(--space-3) var(--space-4); border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--surface); cursor: pointer; }
  .projpick__opt input { position: absolute; opacity: 0; }
  .projpick__opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
  .projpick__opt--flow { margin-inline-start: var(--space-5); padding-block: var(--space-2); } /* a flow of the project above: the step joins it */
  .projpick__opt:has(input:focus-visible) { box-shadow: var(--focus-ring); }
  .projpick__name { display: flex; align-items: center; gap: 0.45em; font-weight: 700; }
  .projpick__name .icon { color: var(--accent); }
  .projpick__next { color: var(--ink-2); font-size: var(--step--1); }
  .projpick__opt--stuck { border-style: dashed; }

  /* ---- the item sheet (pages/item.html): a sheet on the right on wide screens, the whole screen on a phone ---- */
  .itempage { min-height: 100dvh; padding: var(--space-3) var(--space-4) var(--space-6); }
  .itemsheet { view-transition-name: itemsheet; display: flex; flex-direction: column; width: min(32rem, 100%); margin-inline: auto; border-radius: var(--radius-sheet); background: var(--surface); box-shadow: var(--shadow-sheet), var(--shadow-lift); }
  @media (min-width: 64rem) { .itemsheet { margin-right: max(var(--space-6), calc(50% - 30rem)); } }
  @media (max-width: 40rem) { .itempage { padding: 0; } .itemsheet { min-height: 100dvh; border-radius: 0; box-shadow: none; } }
  .itemsheet__top { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) calc(var(--space-4) + 2.5rem) var(--space-3) var(--space-4); } /* the theme switch's corner */
  .itemsheet__top .sys-top__link { margin-right: auto; }
  .itemsheet__top > :not(.sys-top__link) { flex: none; } /* the way back gives way first */
  .liststate { display: inline-flex; align-items: center; gap: 0.35em; min-height: 2.25rem; padding: 0 0.85em; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--ink); font-size: 0.9rem; font-weight: 700; text-decoration: none; }
  .liststate .icon:first-child { color: var(--accent); }
  .liststate:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
  .itemsheet__moves { margin: 0 var(--space-4); }
  /* A move's second question (Clarify's own form) sits where the list picker was, as a picker does. */
  .itemsheet > .ask { margin: var(--space-2) var(--space-4) 0; padding: var(--space-4); border-radius: var(--radius-control); background: var(--bg); }
  .itemsheet__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-2) var(--space-5) var(--space-5); }
  .itemsheet__text { display: flex; flex-direction: column; gap: var(--space-3); }
  .itemsheet__title, .itemsheet__notes { width: 100%; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; resize: none; field-sizing: content; }
  .itemsheet__title { overflow: hidden; font-family: var(--font-display); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: var(--leading-tight); }
  .itemsheet__notes { min-height: 3em; color: var(--ink-2); line-height: var(--leading-body); }
  .itemsheet__title:focus, .itemsheet__notes:focus { outline: none; box-shadow: 0 2px 0 var(--accent); }
  .itemsheet__notes::placeholder { color: var(--ink-3); }
  .itemsheet__waiting { display: flex; align-items: center; gap: 0.4em; color: var(--ink-2); font-size: 0.95rem; }
  .itemsheet__foot { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-5) var(--space-5); border-top: 1px solid var(--rule); }
  .history summary { display: inline-flex; align-items: center; gap: 0.4em; color: var(--ink-2); font-size: var(--step--1); font-weight: 700; cursor: pointer; }
  .history__list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0 0; padding: 0 0 0 var(--space-3); border-left: 2px solid var(--rule); list-style: none; font-size: 0.92rem; }
  .history__list li { display: flex; flex-direction: column; }
  .history__when { color: var(--ink-3); font-size: var(--step--1); font-weight: 650; }
  /* A row's title opens its sheet. */
  .row__link { color: inherit; text-decoration: none; }
  .row__link:hover { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 0.2em; }
  .row__link:focus-visible { outline: 2px solid transparent; border-radius: 4px; box-shadow: var(--focus-ring); }

  /* ---- the Today drawer's head: Now and its three choices; groups, tags, notes (pages/today.html) ---- */
  .nowpick { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); }
  .filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .filter { position: relative; gap: 0.2em; padding-block: 0; padding-inline: 0.6em; }
  .filter > .icon { width: 1em; height: 1em; }
  /* A phone's drawer fits the three choices on one line: their words say what they are. */
  @media (max-width: 26rem) { .filter > .icon:first-child { display: none; } }
  .filter select { field-sizing: content; min-width: 0; max-width: 10rem; padding: 0.3em 1.1em 0.3em 0.15em; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; appearance: none; text-overflow: ellipsis; }
  .filter .filter-chev { position: absolute; right: 0.6em; width: 0.85em; height: 0.85em; color: var(--ink-3); pointer-events: none; }
  .filter select:focus-visible { outline: none; }
  .filter:has(select:focus-visible) { box-shadow: var(--focus-ring); }
  .filter:has(option:checked:not([value=""])) { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
  .filter:has(option:checked:not([value=""])) > .icon:first-child { color: var(--accent); }
  .now { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-sheet); background: linear-gradient(160deg, var(--accent-soft), var(--surface) 75%); box-shadow: var(--shadow-sheet); }
  .now__eyebrow { display: inline-flex; align-items: center; gap: 0.35em; color: var(--accent); font-size: var(--step--1); font-weight: 750; }
  .now__title { font-family: var(--font-display); font-size: var(--step-2); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); line-height: var(--leading-tight); overflow-wrap: anywhere; }
  .now__why { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; list-style: none; }
  .now__note { color: var(--ink-2); font-size: var(--step--1); }
  .now__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
  .now--empty { border: 1px dashed var(--rule-strong); background: var(--surface); box-shadow: none; }
  .now--empty .now__title { font-size: var(--step-1); }
  .group-title { display: flex; align-items: center; gap: 0.4em; margin: 0 var(--space-4); padding: var(--space-3) 0 var(--space-1); border-top: 1px solid var(--rule); color: var(--ink-2); font-family: inherit; font-size: var(--step--1); font-weight: 700; }
  .group-title .icon { color: var(--ink-3); }
  .group-title--due .icon { color: var(--danger); }
  .group-title--focus .icon, .group-title--leftover .icon { color: var(--accent); }
  .group-title + .rows .row:first-child { border-top: 0; }
  /* A full Today: one quiet sentence under its rows, never a block. */
  .group-note { margin: var(--space-1) var(--space-4) var(--space-2); color: var(--ink-2); font-size: var(--step--1); }
  /* What an answer brings in (a reminder, a notice, a picker) comes in the same way. */
  .notice-list, .remind, .picker { transition: opacity var(--base) var(--ease), translate var(--dur-appear) var(--ease-spring); }
  @starting-style { .notice-list, .remind, .picker { opacity: 0; translate: 0 -0.35rem; } }
  .notice-list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) var(--space-4) var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--rule); }
  .notice { display: flex; align-items: center; gap: var(--space-2); color: var(--ink-2); font-size: var(--step--1); }
  .notice .icon { flex: none; color: var(--ink-3); }
  .notice span { flex: 1; }
  .notice a { flex: none; color: var(--accent); font-weight: 750; }
  .sys-open { display: flex; justify-content: flex-end; margin: 0 0 var(--space-3); }

  /* ---- fired reminders: the Today drawer's head, a bell on its handle ---- */
  .remind { margin: var(--space-2) 0 0; }
  .remind .group-title { border-top: 0; color: var(--accent); }
  .remind .group-title .icon { color: var(--accent); }
  .remind .row__icon { display: grid; place-items: center; color: var(--accent); }
  .remind__acts { display: flex; gap: var(--space-1); }
  .handle__bell { display: inline-grid; place-items: center; margin-left: 0.25em; color: var(--accent); }
  .handle__bell .icon { width: 0.95em; height: 0.95em; }

  /* ---- saved views: the form (pages/view-form.html) ---- */
  .viewform { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5); }
  .viewform__part { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
  /* Search: one pill (the overview's zones, the search page). */
  .list-search { position: relative; display: flex; align-items: center; }
  .list-search__icon { position: absolute; inset-inline-start: 0.9rem; display: flex; color: var(--ink-3); pointer-events: none; }
  .list-search__icon .icon { width: 1.05em; height: 1.05em; }
  .list-search__input {
    flex: 1; min-width: 0; min-height: 2.75rem; padding: 0.5em 1em 0.5em 2.6rem;
    border: 1px solid var(--rule-strong); border-radius: var(--radius-pill); background: var(--surface);
    color: var(--ink); font: inherit;
  }
  .list-search__input::placeholder { color: var(--ink-3); }
  .list-search__input:focus-visible { outline: 2px solid transparent; border-color: var(--accent); box-shadow: var(--focus-ring); }
  .list__view-acts { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-1); padding: var(--space-2) var(--space-3) 0; }
  /* The page's cards: one row per name (renamed in place; "…" merges, gives an area or puts it away). */
  .org__list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
  .org__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--rule); }
  .org__row:first-child { border-top: 0; }
  /* A name put away steps back by color, not opacity: its words stay readable (AA). */
  .org__row.is-archived .org__input { border-style: dashed; color: var(--ink-3); }
  .org__row.is-archived .org__dot { background: var(--rule-strong); }
  .org__name { display: flex; flex: 1 1 14rem; align-items: center; gap: var(--space-2); min-width: 0; }
  .org__sigil { color: var(--ink-3); font-weight: 750; }
  .org__input { flex: 1; min-width: 0; padding-block: 0.35em; }
  .org__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
  .org__more { display: contents; }
  .org__more > summary { list-style: none; }
  .org__more > summary::-webkit-details-marker { display: none; }
  .org__more[open] > .org__acts { flex-basis: 100%; justify-content: flex-end; padding-top: var(--space-1); }
  .org__merge { display: flex; align-items: center; gap: var(--space-1); }
  .org__select { width: auto; max-width: 10rem; padding-block: 0.35em; }
  .org__dot { flex: none; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: var(--tone, var(--accent)); }
  .org__fixed { color: var(--ink-3); font-size: var(--step--1); }
  .org__error { flex-basis: 100%; margin: 0; }
  /* ---- a second tap (ui/confirm): the row under a button that would lose something says what
     happens and does it; drawn always (.reveal), its room grows from nothing. Under the guide's
     grid the rows share one place spanning the grid (the grid's gap is taken back while closed). ---- */
  .confirm__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding-top: var(--space-2); }
  .confirm__text { display: flex; flex: 1 1 14rem; align-items: flex-start; gap: 0.4em; min-width: 0; margin: 0; font-size: var(--step--1); font-weight: 600; }
  .confirm__text .icon { flex: none; margin-top: 0.15em; color: var(--danger); }
  .grid__asks { grid-column: 1 / -1; margin-top: calc(-1 * var(--space-3)); }
  .grid__asks .confirm__in { padding-top: var(--space-3); }
  .org__acts .confirm { flex-basis: 100%; }
  .org__merge:has(.confirm) { flex-wrap: wrap; justify-content: flex-end; }
}