/* onefive design system — Calm & Polished (Linear/Things-inspired).
   Soft warm-neutral surfaces, rounded corners, one indigo accent used sparingly,
   dark mode via prefers-color-scheme. Logical properties keep RTL correct.
   No webfonts, no framework, no build step. See DESIGN.md. */

/* ---- Tokens: base scale (mode-independent) ------------------------------ */
:root {
  color-scheme: light dark;

  font-size: 15px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 22px;
  --fs-xl: clamp(24px, 20px + 1.2vw, 32px);   /* page h1 — fluid */
  --fs-2xl: clamp(32px, 24px + 2.5vw, 56px);  /* Focus title only */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 650;
  --lh: 1.5;
  --lh-tight: 1.2;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;

  /* elevation — 3 steps only, used consistently */
  --shadow-sm: 0 1px 2px rgba(20, 20, 30, 0.05);
  --shadow-md: 0 4px 12px rgba(20, 20, 30, 0.08);
  --shadow-lg: 0 12px 32px rgba(20, 20, 30, 0.14); /* dialog / bottom bar only */

  /* z-index scale — never use raw numbers elsewhere */
  --z-nav: 20;
  --z-bottombar: 30;
  --z-dialog: 100;

  /* containers: reading measure vs page shell (sidebar + content) */
  --sidebar-w: 15rem;
  --maxw-content: 46rem;
  --maxw-page: 80rem;
  --maxw: var(--maxw-content); /* back-compat */

  --transition: 120ms ease;
  --transition-slow: 200ms ease;

  /* Light palette (default) */
  --bg:           #f5f5f2;
  --surface:      #ffffff;
  --surface-2:    #f9f9f6;
  --border:       #dedcd6;
  --border-strong:#c7c5bd;
  --fg:           #15151a;
  --fg-muted:     #6d6d66;
  --fg-subtle:    #96968c;

  --accent:       #5b4bdb;
  --accent-hover: #4a3cc4;
  --accent-fg:    #ffffff;
  --accent-soft:  #e9e5fb;
  --accent-ring:  #c2b8f7;

  --danger:       #c92f4c;
  --danger-soft:  #fbe4e8;

  --k-task-bg:     #e3e8fb;  --k-task-fg:     #33499f;
  --k-overdue-bg:  #fbdfe4;  --k-overdue-fg:  #a91f3d;
  --k-note-bg:     #e2f0e4;  --k-note-fg:     #2b6b3a;
  --k-routine-bg:  #dfedf3;  --k-routine-fg:  #1f5f78;
  --k-reminder-bg: #faead6;  --k-reminder-fg: #9a5c10;
  --k-block-bg:    #e7e2fb;  --k-block-fg:    #4d3fb5;
  --k-event-bg:    #ede1f5;  --k-event-fg:    #7638a0;
  --k-goal-bg:     #f4e0e1;  --k-goal-fg:     #953a42;
  --k-link-bg:     #dcedf1;  --k-link-fg:     #1f5f78;
  --k-default-bg:  #eaeae6;  --k-default-fg:  #55554e;
}

/* Mobile: 16px root so iOS never auto-zooms inputs and body text meets the
   16px-minimum guideline. Everything scales via rem/em where used. */
@media (max-width: 40rem) {
  :root { font-size: 16px; --fs-base: 16px; }
}

/* Wide screens: same layouts, more air. */
@media (min-width: 90rem) {
  :root { --maxw-page: 88rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation: none !important; }
}

/* ---- Dark palette ------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #0b0b0e;
    --surface:      #1a1a20;
    --surface-2:    #232329;
    --border:       #303038;
    --border-strong:#42424b;
    --fg:           #f3f3f5;
    --fg-muted:     #9c9ca6;
    --fg-subtle:    #6f6f79;

    --accent:       #9a8ffa;
    --accent-hover: #aba2ff;
    --accent-fg:    #131118;
    --accent-soft:  #2c2748;
    --accent-ring:  #55488f;

    --danger:       #f2778c;
    --danger-soft:  #402028;

    --k-task-bg:     #24304f; --k-task-fg:     #aec0fc;
    --k-overdue-bg:  #431f29; --k-overdue-fg:  #fb9cae;
    --k-note-bg:     #1e3024; --k-note-fg:     #9adcae;
    --k-routine-bg:  #1c2e37; --k-routine-fg:  #8fd1ec;
    --k-reminder-bg: #37270f; --k-reminder-fg: #f0b06e;
    --k-block-bg:    #29234e; --k-block-fg:    #b7abfc;
    --k-event-bg:    #302040; --k-event-fg:    #dba8f0;
    --k-goal-bg:     #3a2129; --k-goal-fg:     #eda6ac;
    --k-link-bg:     #182e35; --k-link-fg:     #86ccea;
    --k-default-bg:  #29292f; --k-default-fg:  #b0b0b8;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  }
}

/* ---- Global resets ------------------------------------------------------ */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh);
  color: var(--fg);
  background: var(--bg);
}

strong, b { font-weight: var(--fw-bold); }

h1 { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
h2 { font-size: var(--fs-md); font-weight: var(--fw-medium); }
h3 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  text-transform: none;
}
h1, h2, h3 { margin: 0 0 var(--sp-3); line-height: var(--lh-tight); }
main > h1, .page-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
}
/* Section headings are quiet uppercase labels — the content inside the card
   is visually larger than its heading. */
section > header h2 {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}
p { margin: 0 0 var(--sp-3); }

/* Numerics line up (times, counts, stats). */
.num, .plan-time { font-variant-numeric: tabular-nums; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:has(button) { text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---- Layout containers ---------------------------------------------------
   Shell tiers (mobile-first):
   - base / <40rem:  sticky compact top bar + fixed bottom tab bar
   - ≥40rem tablet:  top bar (brand) + single scrollable nav row
   - ≥64rem desktop: persistent 15rem sidebar, shell widens to --maxw-page  */
header.site, main, footer.site, nav {
  max-width: var(--maxw);
  margin-inline: auto;
}
header.site {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
}
header.site a.brand { color: var(--fg); text-decoration: none; }
header.site strong { font-size: var(--fs-md); font-weight: var(--fw-bold); }

/* Secondary destinations in the mobile top bar; hidden from 40rem up
   (they live in the main nav there). */
.nav-secondary { display: flex; align-items: center; gap: var(--sp-1); }
.nav-secondary a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.nav-secondary a[aria-current="page"] { color: var(--fg); }
@media (min-width: 40rem) { .nav-secondary { display: none; } }

main { padding: var(--sp-5) var(--sp-4); }

footer.site {
  padding: var(--sp-6) var(--sp-4);
  border-top: 1px solid var(--border);
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
}

/* ---- Nav ------------------------------------------------------------------
   Chrome is pinned LTR; user content elements carry their own dir. */
nav {
  direction: ltr;
  display: flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-4);
  border-bottom: 1px solid var(--border);
}
nav .nav-brand, nav .nav-context { display: none; }
nav ul {
  display: flex;
  flex-wrap: nowrap;              /* the badge can never force a second row */
  overflow-x: auto;
  scrollbar-width: none;
  gap: var(--sp-1);
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav ul::-webkit-scrollbar { display: none; }
nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
nav a:hover { background: var(--surface-2); color: var(--fg); text-decoration: none; }
nav a[aria-current="page"] { color: var(--fg); background: var(--accent-soft); }

/* Inbox count pill */
.badge {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1;
  padding: 2px 6px;
  border-radius: var(--r-full);
  margin-inline-start: 6px;
}

/* -- Mobile < 40rem: sticky top bar + fixed bottom tab bar ----------------- */
@media (max-width: 40rem) {
  header.site {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    padding: var(--sp-2) var(--sp-3);
    max-width: none;
  }

  nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--z-bottombar);
    max-width: none;
    border-top: 1px solid var(--border);
    border-bottom: none;
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    padding: var(--sp-1) var(--sp-2) max(var(--sp-1), env(safe-area-inset-bottom));
  }
  nav li[data-nav="secondary"] { display: none; }
  nav ul {
    justify-content: space-around;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0;
    overflow: visible;
  }
  /* Tab order pinned LTR regardless of content language. */
  nav li[data-tab="today"]   { order: 1; }
  nav li[data-tab="week"]    { order: 2; }
  nav li[data-tab="capture"] { order: 3; }
  nav li[data-tab="inbox"]   { order: 4; }
  nav li[data-tab="items"]   { order: 5; }
  nav a {
    min-height: 48px;
    min-width: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    padding: var(--sp-1) var(--sp-2);
  }
  /* Capture is the raised primary tab. */
  nav li[data-tab="capture"] a {
    background: var(--accent);
    color: var(--accent-fg);
    border-radius: var(--r-full);
    padding-inline: var(--sp-4);
    margin-top: -14px;
    box-shadow: var(--shadow-md);
    border: 3px solid var(--bg);
  }
  nav li[data-tab="capture"] a:hover { background: var(--accent-hover); }
  /* Badge floats over its tab instead of widening it. */
  nav a .badge {
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    margin: 0;
  }

  /* Content must clear the fixed bottom bar. */
  main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  footer.site { margin-bottom: calc(56px + env(safe-area-inset-bottom)); }
  /* No bottom bar when logged out (login page). */
  body.anon main { padding-bottom: var(--sp-4); }
  body.anon footer.site { margin-bottom: 0; }

  /* Mobile chrome: cut side padding on the page itself (see the bleed rules
     right after the section/card template below, which must win the cascade
     over the base card border/radius — kept in source order after them). */
  main { padding-inline: var(--sp-3); padding-top: var(--sp-3); }
}

/* -- Desktop ≥ 64rem: persistent sidebar ----------------------------------- */
@media (min-width: 64rem) {
  body.authed {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    min-height: 100dvh;
  }
  /* Brand lives in the sidebar; the duplicate top header goes away. */
  body.authed header.site { display: none; }

  body.authed nav {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-4);
    max-width: none;
    margin: 0;
    padding: var(--sp-4) var(--sp-3);
    border-bottom: none;
    border-inline-end: 1px solid var(--border);
    background: var(--surface);
  }
  body.authed nav .nav-brand {
    display: block;
    padding: var(--sp-1) var(--sp-3) var(--sp-2);
    color: var(--fg);
    text-decoration: none;
  }
  body.authed nav .nav-brand strong { font-size: var(--fs-md); font-weight: var(--fw-bold); }
  body.authed nav ul {
    flex-direction: column;
    gap: 2px;
    overflow: visible;
    width: auto;
  }
  body.authed nav a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
  }
  body.authed nav .nav-context {
    display: grid;
    gap: var(--sp-1);
    margin-top: auto;
    padding: var(--sp-2) var(--sp-3);
    color: var(--fg-muted);
    font-size: var(--fs-xs);
  }

  body.authed main {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: calc(var(--maxw-page) - var(--sidebar-w));
    margin-inline: 0;
    padding: var(--sp-6) var(--sp-8) var(--sp-8);
  }
  /* Until pages opt into their own grids, keep a reading measure on page
     content inside the wide shell. Page grids (later phases) override this. */
  body.authed main > * { max-width: var(--maxw-content); }

  body.authed footer.site {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--sp-8);
  }
}

/* -- Touch targets: any coarse pointer, and any narrow viewport (a phone is
      the likely device there even when the pointer reports fine) ----------- */
@media (pointer: coarse), (max-width: 40rem) {
  button, nav a, .nav-secondary a, .quick-types button, select, summary {
    min-height: 44px;
  }
  summary { display: flex; align-items: center; }
  .item-actions button { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
  input[type="checkbox"] { width: 20px; height: 20px; }
  label:has(> input[type="checkbox"]) {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    margin-bottom: 0;
  }
}

/* ---- Section template (cards) ------------------------------------------- */
section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-5);
}
section > header { margin-bottom: var(--sp-4); }
section > .content { margin-bottom: var(--sp-4); }
section > .content:last-child { margin-bottom: 0; }
section > .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
section > .actions:empty { display: none; }
/* When actions are empty, the content above carries no extra bottom margin. */
section > .content:has(+ .actions:empty) { margin-bottom: 0; }

/* Generic list reset. Row dividers are added per-component below. */
ul { list-style: none; margin: 0; padding: 0; }

/* ---- Stats / dl --------------------------------------------------------- */
dl, dl.stats {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-3) var(--sp-5);
  margin: 0;
}
dt { color: var(--fg-muted); font-size: var(--fs-sm); }
dd { margin: 0; color: var(--fg); font-size: var(--fs-sm); word-break: break-word; }

/* ---- Buttons — accent discipline ---------------------------------------- */
button, input[type="submit"] {
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  cursor: pointer;
  line-height: 1.2;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

/* Ghost / outline — default button */
button {
  background: var(--surface);
  color: var(--fg);
  border: 1px solid var(--border);
}
button:hover { background: var(--surface-2); border-color: var(--border-strong); }

/* Primary (filled accent) — .primary + submit inputs */
button.primary, input[type="submit"] {
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid var(--accent);
}
button.primary:hover, input[type="submit"]:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* Danger (quiet) */
button.danger {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--danger);
}
button.danger:hover { background: var(--danger-soft); border-color: var(--danger); }

/* ---- Inputs / selects / textareas --------------------------------------- */
input[type="text"], input[type="password"], input[type="search"],
input[type="number"], input[type="datetime-local"], input[type="date"],
input[type="time"], textarea, select {
  font: inherit;
  font-size: var(--fs-base);
  color: var(--fg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
}
input[type="text"], input[type="password"], input[type="search"],
input[type="number"], input[type="datetime-local"], input[type="date"],
input[type="time"], textarea {
  width: 100%;
}
textarea { min-height: 5.5rem; resize: vertical; }
input:focus, textarea:focus, select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  outline: none;
}
::placeholder { color: var(--fg-subtle); }
input:disabled, textarea:disabled, select:disabled,
input[readonly], textarea[readonly] {
  background: var(--surface-2);
  color: var(--fg-muted);
}

label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  margin-bottom: var(--sp-3);
}

/* Vertical form stacks inside sections. minmax(0,1fr) keeps content-sized
   controls (long <select> options) from growing the track past the card. */
form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
form.filters, form.login-form { gap: var(--sp-3); }
section form label { margin-bottom: 0; }

fieldset {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}
legend { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--fg-muted); }

.alert { color: var(--danger); }
.muted { color: var(--fg-muted); }

/* ---- kbd + code --------------------------------------------------------- */
kbd {
  font: inherit;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-color: var(--border-strong);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  box-shadow: var(--shadow-sm);
}
code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 2px 6px;
  font-size: var(--fs-sm);
}

/* ---- Login form --------------------------------------------------------- */
form.login-form {
  max-width: 22rem;
  margin: var(--sp-8) auto;
  display: grid;
  gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-6);
}

/* ---- Kind chips (badges) ------------------------------------------------ */
.plan-badge, .list-entry-type {
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: 1;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  text-transform: none;
  text-decoration: none;
  flex: 0 0 auto;
  background: var(--k-default-bg);
  color: var(--k-default-fg);
}
[data-kind="task"]     { background: var(--k-task-bg);     color: var(--k-task-fg); }
[data-kind="overdue"]  { background: var(--k-overdue-bg);  color: var(--k-overdue-fg); }
[data-kind="note"]     { background: var(--k-note-bg);     color: var(--k-note-fg); }
[data-kind="routine"]  { background: var(--k-routine-bg);  color: var(--k-routine-fg); }
[data-kind="reminder"] { background: var(--k-reminder-bg); color: var(--k-reminder-fg); }
[data-kind="block"]    { background: var(--k-block-bg);    color: var(--k-block-fg); }
[data-kind="event"]    { background: var(--k-event-bg);    color: var(--k-event-fg); }
[data-kind="goal"]     { background: var(--k-goal-bg);     color: var(--k-goal-fg); }
[data-kind="link"]     { background: var(--k-link-bg);     color: var(--k-link-fg); }

/* ---- Plan rows ---------------------------------------------------------- */
.list.plan, .list { margin: 0; padding: 0; }
.plan-entry {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--r-sm);
}
.plan-entry + .plan-entry { border-top: 1px solid var(--border); }
.plan-entry:hover { background: var(--surface-2); }
.plan-time {
  flex: 0 0 auto;
  min-width: 3.25rem;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
  text-align: end;
}
/* Titles are the content: they wrap to 2 full lines (3 on mobile) and only
   then ellipsize. Never single-line nowrap — that truncated Hebrew/long
   titles to a handful of characters. */
.plan-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--fg);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  text-decoration: none;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
@media (max-width: 40rem) {
  .plan-title { -webkit-line-clamp: 3; }
}
.plan-title:hover { text-decoration: underline; }
.plan-entry .item-actions { margin-inline-start: auto; }

/* ---- Items list --------------------------------------------------------- */
.list-entry {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
}
.list-entry + .list-entry { border-top: 1px solid var(--border); }
.list-entry-title {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--fg);
  font-weight: var(--fw-medium);
  font-size: var(--fs-base);
  text-decoration: none;
}
.list-entry-title:hover { text-decoration: underline; }
.list-entry .content { color: var(--fg-muted); font-size: var(--fs-xs); }
.list-entry[data-pinned="1"] {
  border-inline-start: 2px solid var(--accent);
  padding-inline-start: var(--sp-3);
  border-radius: var(--r-sm);
}
.list-entry[data-revoked="1"] { opacity: 0.55; }

/* Routines: due-today rows get a quiet accent flag on the kind chip; streak
   reads as a warm highlight, not just muted text. */
.list-entry[data-due="1"] .list-entry-type[data-kind="routine"] {
  background: var(--k-overdue-bg);
  color: var(--k-overdue-fg);
}
.streak { color: var(--k-reminder-fg); }

/* New-routine form: human labels, only the field for the picked frequency —
   pure CSS via :has(); no-:has() browsers show every field (no regression). */
.routine-form .freq-field { display: none; }
.routine-form:has(select[name="freq"] option[value="weekly"]:checked) .freq-weekday,
.routine-form:has(select[name="freq"] option[value="monthly"]:checked) .freq-monthday,
.routine-form:has(select[name="freq"] option[value="every_n"]:checked) .freq-n {
  display: block;
}
.routine-delete { margin-inline-start: var(--sp-6); }
.routine-delete button.danger { color: var(--danger); }

/* Routines list rows: comfortable desktop row (badge · title · actions);
   mobile stacks into badge row / full-width title / full-width touch
   action row, same anatomy as the Items rows. */
.page-routines .list-entry { flex-wrap: wrap; }
.page-routines .list-entry-title { flex-basis: 12rem; }
@media (max-width: 40rem) {
  .page-routines .list-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--sp-1);
    padding-block: var(--sp-3);
  }
  .page-routines .list-entry-title { flex-basis: auto; }
  .page-routines .list-entry-type { justify-self: start; }
  .page-routines .list-entry .item-actions { justify-content: flex-start; }
  .page-routines .routine-delete { margin-inline-start: 0; }
}

/* Tag chips (quiet accent). <bdi>/isolation keeps "#tag" intact in RTL. */
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.tags small, .tags .scope, .tags .tag {
  font-size: var(--fs-xs);
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: var(--r-sm);
  unicode-bidi: isolate;
  text-decoration: none;
  white-space: nowrap;
}
.tags .tag:hover { text-decoration: none; box-shadow: 0 0 0 1px var(--accent-ring) inset; }
.tags bdi { unicode-bidi: isolate; }

/* ---- Row quick-actions (quiet text buttons) ----------------------------- */
.item-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.item-actions form { display: inline; margin: 0; }
.item-actions label { margin: 0; }
.item-actions button {
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-muted);
}
.item-actions button:hover {
  background: var(--surface-2);
  color: var(--fg);
  border-color: var(--border);
}
.item-actions button.danger {
  background: transparent;
  border: 1px solid transparent;
  color: var(--danger);
}
.item-actions button.danger:hover { background: var(--danger-soft); border-color: var(--danger); }

/* ---- Filters + inline forms --------------------------------------------- */
form.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: end;
}
form.filters label { margin: 0; }
select { width: auto; max-width: 100%; min-width: 0; }

/* ---- Week board -----------------------------------------------------------
   A single horizontally-scrolling board of day columns at every breakpoint —
   never a cramped stacked list. Each day is a fixed, comfortable width with
   scroll-snap; the board itself owns the overflow-x, so the page never
   scrolls sideways. Today is highlighted and scrolled into view on load
   (app.js) for both mouse and touch. Natural weekday order throughout. */
.page-week { max-width: none; overflow-x: hidden; }
.week-daily-line { display: none; }
.week-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(16rem, 18rem);
  gap: var(--sp-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--sp-1);
  padding-block: var(--sp-1) var(--sp-3);
  margin-inline: calc(-1 * var(--sp-1));
  padding-inline: var(--sp-1);
  -webkit-overflow-scrolling: touch;
}
.week-day {
  order: var(--day-order, 0);
  scroll-snap-align: start;
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}
.week-day[data-today="1"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.week-day[data-today="1"] .week-day-head { color: var(--accent); }
.week-day-head {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
  margin-bottom: var(--sp-2);
}
.week-day .plan-entry { padding: var(--sp-1); flex-wrap: wrap; }
.week-day .plan-title {
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: var(--fs-sm);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.day-add summary {
  cursor: pointer;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  min-height: 32px;
  display: flex;
  align-items: center;
}
.day-add form.filters { flex-direction: column; align-items: stretch; gap: var(--sp-2); }

/* Desktop ≥64rem: the week page earns full shell width; columns get a touch
   more room since there's space to spare, but the board still scrolls
   rather than squeezing 7 columns into whatever's left of the shell. */
@media (min-width: 64rem) {
  body.authed main.page-week > * { max-width: none; }
  .week-grid { grid-auto-columns: minmax(17rem, 1fr); }
}

/* ---- Focus view -----------------------------------------------------------
   Truly minimal: chrome suppressed, one thing huge and centered, actions as
   big targets. Nav hidden on this page only (both breakpoints); a small
   "← Today" link is the escape hatch instead. */
@media (min-width: 64rem) {
  body:has(.page-focus) nav { display: none; }
  body.authed:has(.page-focus) {
    grid-template-columns: minmax(0, 1fr);
  }
  body.authed:has(.page-focus) main {
    grid-column: 1;
    max-width: var(--maxw-page);
    margin-inline: auto;
  }
  body.authed:has(.page-focus) footer.site { grid-column: 1; }
}
@media (max-width: 40rem) {
  body:has(.page-focus) nav { display: none; }
  body:has(.page-focus) main { padding-bottom: var(--sp-4); }
}

.page-focus {
  position: relative;
  min-height: 70dvh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: var(--sp-6);
  max-width: 34rem;
  margin-inline: auto;
}
/* Escape hatch, pinned top-start of the page (persistent-nav guideline) —
   not part of the centered content flow. */
.focus-back {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  text-decoration: none;
}
.focus-back:hover { color: var(--fg); }
.focus-one { display: grid; gap: var(--sp-4); justify-items: center; }
.focus-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--fg);
  max-width: 24ch;
  margin: 0;
}
.focus-open { color: var(--fg-muted); font-size: var(--fs-sm); }
.page-focus .focus-actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  flex-wrap: wrap;
}
.page-focus .focus-actions button {
  min-height: 52px;
  padding-inline: var(--sp-6);
  font-size: var(--fs-md);
}

/* ---- Capture page + dialog ---------------------------------------------- */
form.capture-form textarea {
  min-height: 7rem;
  font-size: var(--fs-md);
  border-radius: var(--r-md);
  padding: var(--sp-3);
}

dialog {
  z-index: var(--z-dialog);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
  width: min(92vw, 34rem);
  margin: auto;
}
dialog::backdrop { background: rgba(20, 20, 30, 0.35); backdrop-filter: blur(2px); }
dialog h2 { font-size: var(--fs-md); margin-bottom: var(--sp-3); }
dialog textarea { min-height: 5.5rem; }
dialog .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: flex-end;
}

/* ---- Today dashboard ------------------------------------------------------
   Mobile: one focused column (markup order = importance order) with the
   secondary sections behind <details> disclosures. Desktop ≥64rem: a
   full-width grid inside the 80rem shell — briefing strip on top, plan as
   the hero column, stats/focus/signals/pinned in a side column. */
.page-today {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  align-content: start;
}
.page-today > h1 { margin: 0; order: 0; }
.page-today section { margin-bottom: 0; }
.area-side { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; }
/* Mobile order: Plan first, then Briefing (Plan is the point of the page).
   `order` never affects the desktop grid-area placement below. */
.area-plan { order: 1; }
.area-briefing { order: 2; }
.area-side { order: 3; }
.area-add { order: 4; }

@media (min-width: 64rem) {
  /* Fill the wide shell — the reading-measure cap is for prose pages. */
  body.authed main.page-today > * { max-width: none; }
  .page-today {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
    /* The last row takes all slack from a tall side column, so the add strip
       sits right under the plan instead of floating mid-column. */
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "h1 h1"
      "briefing briefing"
      "plan side"
      "add side";
    align-items: start;
  }
  .page-today > h1  { grid-area: h1; }
  .area-briefing    { grid-area: briefing; }
  .area-plan        { grid-area: plan; }
  .area-add         { grid-area: add; }
  .area-side        { grid-area: side; }
}

/* Briefing strip: one line of summary; caveat + Refresh are quiet metadata. */
.briefing-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}
.briefing-strip > h2 {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}
.briefing-strip > p { margin: 0; flex: 1 1 18rem; min-width: 0; font-size: var(--fs-sm); }
.briefing-meta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-inline-start: auto;
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.briefing-meta form { display: inline; margin: 0; }
.briefing-meta button {
  padding: 2px var(--sp-2);
  font-size: var(--fs-xs);
  background: transparent;
  border-color: transparent;
  color: var(--fg-muted);
}
.briefing-meta button:hover { background: var(--surface-2); border-color: var(--border); }

/* Disclosures: card-shaped <details>; summary doubles as the section header.
   App-wide progressive-disclosure pattern (Today, Items, Item detail). */
details.disclosure {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
details.disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  cursor: pointer;
  padding: var(--sp-3) var(--sp-4);
  list-style: none;
  border-radius: var(--r-md);
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary:hover { background: var(--surface-2); }
details.disclosure > summary h2 {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}
details.disclosure > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-inline-end: 3px;
  border-inline-end: 1.5px solid var(--fg-subtle);
  border-block-end: 1.5px solid var(--fg-subtle);
  transform: rotate(45deg);
  transition: transform var(--transition);
}
details.disclosure[open] > summary::after { transform: rotate(-135deg); }
details.disclosure > .content { padding: 0 var(--sp-4) var(--sp-4); }

/* Mobile: cards bleed near-flush with the viewport edge (only a hairline +
   inner padding delineates them) so the content column reads wide on a
   phone instead of being squeezed by an outer margin *and* a padded card
   *and* a bordered box all at once. Placed after the base card/disclosure/
   briefing-strip rules above so it wins the cascade at equal specificity. */
@media (max-width: 40rem) {
  section, details.disclosure, .briefing-strip {
    margin-inline: calc(-1 * var(--sp-3));
    border-radius: 0;
    border-inline-width: 0;
  }
  section { padding: var(--sp-4); margin-bottom: var(--sp-4); }
  details.disclosure > .content { padding-inline: var(--sp-4); }
}

/* Plan rows on Today: meta (time · badge) / title / actions grid. Untimed
   rows carry no time element, so no empty gutter is reserved. */
.page-today .plan-entry {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  grid-template-areas: "meta title actions";
  align-items: center;
  column-gap: var(--sp-3);
  padding: var(--sp-2);
}
/* Row anatomy (time gutter · badge · actions) is chrome: pinned LTR on
   wide layouts so RTL rows don't mirror the columns mid-list. The title
   keeps dir="auto" + <bdi>, so Hebrew text itself still renders RTL. */
@media (min-width: 40rem) {
  .page-today .plan-entry { direction: ltr; }
}
.page-today .row-meta {
  grid-area: meta;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.page-today .plan-time {
  min-width: 2.6rem;
  text-align: end;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
}
.page-today .plan-title { grid-area: title; }
.page-today .plan-entry .item-actions {
  grid-area: actions;
  margin-inline-start: 0;
  justify-content: flex-end;
}
@media (max-width: 40rem) {
  /* Stack: meta chips, then the full-width title (up to 3 lines), then a
     full-width touch action row. */
  .page-today .plan-entry {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "meta" "title" "actions";
    row-gap: var(--sp-1);
    padding-block: var(--sp-3);
  }
  .page-today .plan-time { min-width: 0; text-align: start; }
  .page-today .plan-entry .item-actions { justify-content: flex-start; }
}

/* "Anytime" sub-heading gets real separation from the timed rows above. */
.area-plan h3 {
  margin: var(--sp-4) 0 var(--sp-1);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
}

/* Add-to-today: two labeled sub-forms, each a 2-column field grid. */
.area-add .content { display: grid; gap: var(--sp-4); }
form.add-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  align-items: end;
}
form.add-form .form-title {
  grid-column: 1 / -1;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--fg);
}
form.add-form .alert { grid-column: 1 / -1; margin: 0; }
form.add-form label { margin: 0; }
form.add-form label.check { align-self: center; }
form.add-form button { grid-column: 1 / -1; justify-self: start; }
form.add-form + form.add-form { border-top: 1px solid var(--border); padding-top: var(--sp-4); }
@media (max-width: 40rem) {
  form.add-form { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Inbox triage ---------------------------------------------------------
   Compact rows: captured text (2-line clamp) + age/source meta. The full
   triage form lives behind a per-row disclosure — only the first entry ships
   open, so N captures read as N short rows, not N forms. Row chrome is
   pinned LTR (age/source, control layout); text keeps its own dir via
   dir="auto" + <bdi> so it never mirrors. */
.inbox-entry { display: grid; gap: var(--sp-2); padding: var(--sp-4) 0; }
.inbox-entry + .inbox-entry { border-top: 1px solid var(--border); }
.inbox-entry .content {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--fg);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.inbox-meta {
  direction: ltr;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs);
}
.inbox-meta .tags { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); }
.inbox-entry details.triage { box-shadow: none; border: none; background: transparent; }
.inbox-entry details.triage > summary {
  padding: var(--sp-1) 0;
  border-radius: var(--r-sm);
}
.inbox-entry details.triage > .content { padding: 0; }
.triage-form, .quick-types { direction: ltr; }
.triage-form { display: grid; gap: var(--sp-3); }
.triage-form label { margin: 0; }
.quick-types { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.quick-types button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.quick-types button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--k-default-fg);
}
.quick-types button[data-kind="task"]::before { background: var(--k-task-fg); }
.quick-types button[data-kind="note"]::before { background: var(--k-note-fg); }
.quick-types button[data-kind="link"]::before { background: var(--k-link-fg); }
.quick-types button[data-kind="reminder"]::before { background: var(--k-reminder-fg); }
.quick-types button[data-kind="event"]::before { background: var(--k-event-fg); }
.classify-form { margin-top: var(--sp-2); }
@media (pointer: coarse), (max-width: 40rem) {
  .quick-types button { min-height: 44px; }
}

/* ---- Items page (/items) --------------------------------------------------
   Row structure is chrome: pinned LTR at every width so adjacent Hebrew and
   English rows share one anatomy; titles/previews own their direction via
   dir + <bdi>. Mobile: stacked touch rows (meta+date, full-width title with a
   generous preview, tags, 44px action row). Desktop ≥64rem: full-shell-width
   table-like rows with aligned metadata columns and hover-revealed actions. */
.page-items .list-entry {
  direction: ltr;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  grid-template-areas:
    "meta    date"
    "title   title"
    "tags    tags"
    "actions actions";
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  padding-block: var(--sp-3);
  padding-inline: var(--sp-1);
}
.page-items .list-entry .row-meta {
  grid-area: meta;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}
.page-items .list-entry-title {
  grid-area: title;
  display: block;
  flex: none;
  min-width: 0;
  color: var(--fg);
  text-decoration: none;
}
.page-items .list-entry-title:hover { text-decoration: none; }
.page-items .list-entry-title:hover .entry-title { text-decoration: underline; }
.entry-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  text-align: start;
}
.entry-preview {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  margin-top: 2px;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 1.45;
  text-align: start;
}
.entry-flag {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  line-height: 1.4;
  color: var(--fg-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 0 8px;
}
.page-items .list-entry[data-status="done"] .entry-title {
  color: var(--fg-muted);
  text-decoration: line-through;
  text-decoration-color: var(--fg-subtle);
}
.page-items .list-entry .tags { grid-area: tags; }
.entry-date {
  grid-area: date;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
  text-align: end;
  white-space: nowrap;
}
.page-items .list-entry .item-actions { grid-area: actions; justify-content: flex-start; }
.page-items .list-entry[data-pinned="1"] {
  border-inline-start: 2px solid var(--accent);
  padding-inline-start: var(--sp-3);
}

/* Mobile: the row is a single tappable target — title (generous, wrapping)
   over one quiet meta line (type + relative time). No inline action buttons,
   no tag chips, no body preview — that detail lives on the item page after
   tapping. Actions still live behind hover/focus on desktop, unchanged. */
@media (max-width: 40rem) {
  .page-items .list-entry {
    position: relative;
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas: "meta date" "title title";
    row-gap: var(--sp-1);
    padding-block: var(--sp-4);
    padding-inline: 0;
  }
  .page-items .list-entry .tags,
  .page-items .list-entry .item-actions,
  .page-items .list-entry .entry-preview {
    display: none;
  }
  .page-items .list-entry .entry-title { -webkit-line-clamp: 3; font-size: var(--fs-md); }
  /* Stretched link: the whole row opens the item, without extra markup. */
  .page-items .list-entry-title::after { content: ""; position: absolute; inset: 0; }
}

/* Tablet 40–64rem: one horizontal row — meta column spans both rows, tags sit
   under the title, date under the actions. */
@media (min-width: 40rem) and (max-width: 63.999rem) {
  .page-items .list-entry {
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    grid-template-areas:
      "meta title actions"
      "meta tags  date";
    align-items: start;
    column-gap: var(--sp-3);
  }
  .page-items .list-entry .item-actions { justify-content: flex-end; }
  .page-items .list-entry .tags:empty { display: none; }
}

/* Desktop ≥64rem: the Items page earns the full 80rem shell. Fixed metadata
   tracks align down the page; actions are a quiet floating cluster revealed
   on hover / keyboard focus (visibility, so row height never jumps). */
@media (min-width: 64rem) {
  body.authed main.page-items > * { max-width: none; }
  .page-items .list-entry {
    position: relative;
    grid-template-columns: 6.5rem minmax(0, 1fr) 13rem 4.5rem;
    grid-template-areas: "meta title tags date";
    align-items: center;
    column-gap: var(--sp-5);
    padding-block: var(--sp-3);
    padding-inline: var(--sp-2);
    border-radius: var(--r-sm);
  }
  .page-items .list-entry:hover { background: var(--surface-2); }
  .page-items .list-entry .row-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
    align-self: start;
    padding-top: 2px;
  }
  .page-items .list-entry .entry-title { -webkit-line-clamp: 2; }
  .page-items .list-entry .tags { align-self: start; padding-top: 3px; }
  .page-items .list-entry .entry-date { align-self: start; padding-top: 5px; }
  .page-items .list-entry .item-actions {
    position: absolute;
    inset-inline-end: var(--sp-2);
    top: 50%;
    transform: translateY(-50%);
    flex-wrap: nowrap;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    padding: var(--sp-1) var(--sp-2);
  }
}
@media (min-width: 64rem) and (hover: hover) {
  .page-items .list-entry .item-actions { visibility: hidden; }
  .page-items .list-entry:hover .item-actions,
  .page-items .list-entry:focus-within .item-actions { visibility: visible; }
}
/* No hover available (touch desktop): actions get their own in-flow column. */
@media (min-width: 64rem) and (hover: none) {
  .page-items .list-entry {
    grid-template-columns: 6.5rem minmax(0, 1fr) 13rem 4.5rem max-content;
    grid-template-areas: "meta title tags date actions";
  }
  .page-items .list-entry .item-actions {
    position: static;
    transform: none;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
  }
}

/* Filters: mobile 2-up grid (44px targets via the coarse-pointer block),
   desktop a single aligned toolbar row with Search taking the slack. */
.page-items form.filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  align-items: end;
}
.page-items form.filters label { margin: 0; min-width: 0; }
.page-items form.filters select { width: 100%; }
.page-items form.filters .filters-q { grid-column: 1 / -1; }
.page-items .filters-actions { display: flex; align-items: center; gap: var(--sp-3); }
.page-items .filters-clear { color: var(--fg-muted); font-size: var(--fs-sm); }
.page-items .filters-clear:hover { color: var(--fg); }
@media (min-width: 64rem) {
  .page-items form.filters {
    grid-template-columns: repeat(3, minmax(8rem, max-content)) minmax(14rem, 1fr) max-content;
  }
  .page-items form.filters .filters-q { grid-column: auto; }
  .page-items .area-filters .content { margin-bottom: 0; }
}
@media (pointer: coarse), (max-width: 40rem) {
  .page-items form.filters input[type="search"] { min-height: 44px; }
}

/* New item: a closed disclosure (the footer button's #new anchor lands here).
   Desktop: 2-column field grid, title spanning. */
.page-items details.disclosure { margin-bottom: var(--sp-4); }
@media (min-width: 64rem) {
  .page-items .new-item-form {
    max-width: var(--maxw-content);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .page-items .new-item-form .new-item-title { grid-column: 1 / -1; }
  .page-items .new-item-form button { grid-column: 1 / -1; justify-self: start; }
}

/* ---- Item detail (/items/:id) ---------------------------------------------
   View-first: title + meta header, the item view and Activity in the main
   column; Edit (closed disclosure), Reminders and Relations in the side
   column; delete demoted to a quiet danger line at the bottom. */
.page-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
  align-content: start;
}
.page-item section, .page-item details.disclosure { margin-bottom: 0; }
.page-item .area-side { display: grid; gap: var(--sp-4); align-content: start; min-width: 0; }

.item-head { display: grid; gap: var(--sp-2); min-width: 0; }
.item-head h1 { margin: 0; overflow-wrap: anywhere; }
.item-meta {
  direction: ltr;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin: 0;
  color: var(--fg-muted);
  font-size: var(--fs-sm);
}
.item-body { white-space: pre-wrap; overflow-wrap: anywhere; }

@media (min-width: 64rem) {
  body.authed main.page-item > * { max-width: none; }
  .page-item {
    grid-template-columns: minmax(0, 3fr) minmax(18rem, 2fr);
    grid-template-areas:
      "head   head"
      "view   side"
      "activity side"
      "danger danger";
    align-items: start;
  }
  .item-head { grid-area: head; }
  .page-item .area-view { grid-area: view; }
  .page-item .area-activity { grid-area: activity; }
  .page-item .area-side { grid-area: side; }
  .page-item .danger-line { grid-area: danger; }
}

/* Activity log: verb + readable change summary + relative time. The row is
   pinned LTR (machine text); values isolate their own direction via <bdi>. */
.activity { list-style: none; margin: 0; padding: 0; }
.activity li {
  direction: ltr;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-1) var(--sp-3);
  padding-block: var(--sp-2);
}
.activity li + li { border-top: 1px solid var(--border); }
.activity-verb { flex: 0 0 auto; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.activity-meta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  min-width: 0;
  color: var(--fg-muted);
  font-size: var(--fs-xs);
}
.activity-field { overflow-wrap: anywhere; unicode-bidi: isolate; }
.activity-field bdi { unicode-bidi: isolate; }
.activity-time {
  margin-inline-start: auto;
  flex: 0 0 auto;
  color: var(--fg-subtle);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.activity code, .page-item code {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
}

/* Relations + reminders rows: hairline dividers, quiet end-aligned actions. */
.rel-row, .rem-row {
  direction: ltr;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-2);
  min-width: 0;
}
.rel-row + .rel-row, .rem-row + .rem-row { border-top: 1px solid var(--border); }
.rel-kind {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  color: var(--fg-muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 1px 8px;
  white-space: nowrap;
}
.rel-title { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rel-row .item-actions, .rem-row .item-actions { margin-inline-start: auto; flex: 0 0 auto; }
.rem-when { flex: 0 0 auto; color: var(--fg-muted); font-size: var(--fs-sm); white-space: nowrap; }
.rem-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; text-align: start; }
@media (max-width: 40rem) {
  .rel-row, .rem-row { flex-wrap: wrap; }
  .rem-text { flex-basis: 100%; }
}

/* Danger line: one quiet destructive affordance, no card. */
.danger-line { font-size: var(--fs-sm); }
.danger-line > summary {
  cursor: pointer;
  color: var(--danger);
  padding: var(--sp-2) 0;
  width: max-content;
  list-style: none;
}
.danger-line > summary::-webkit-details-marker { display: none; }
.danger-line > summary:hover { text-decoration: underline; }
.danger-line form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
}
.danger-line p { margin: 0; }

/* ---- Settings (/settings) --------------------------------------------------
   Desktop ≥64rem: two columns of grouped sections; h1 spans both. */
.page-settings { display: grid; gap: var(--sp-4); }
.page-settings section { margin-bottom: 0; }
@media (min-width: 64rem) {
  body.authed main.page-settings > * { max-width: none; }
  .page-settings {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  .page-settings > h1 { grid-column: 1 / -1; }
}
label:has(input[data-full-access]) { font-weight: var(--fw-medium); color: var(--fg); }

/* ---- Login (/login) ------------------------------------------------------- */
.page-login { min-height: 80dvh; display: grid; place-items: center; }
form.login-form {
  width: min(92vw, 22rem);
  text-align: start;
  max-width: none;
  margin: 0;
}
form.login-form h1 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); }
form.login-form .alert {
  border-inline-start: 2px solid var(--danger);
  padding-inline-start: var(--sp-3);
  margin: 0;
}