/* App shell styles. All values come from tokens.css — colors from the palette
   tokens, sizes from the modular type scale, spacing from the 4px-base scale
   (grid canon §2.1: no arbitrary values). */

/* Brand type (D61): Mulish, self-hosted (OFL) — the free look-alike for
   Avenir Next / Proxima Nova; Apple devices use their native Avenir Next via
   the token stack. Variable weight file, latin + latin-ext subsets. */
@font-face {
  font-family: Mulish;
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/mulish-latin.50220d0057de.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Mulish;
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/mulish-latin-ext.3172231ee546.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1D00-1DBF,
    U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--text-base);
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--leading);
  background: var(--color-bg);
  color: var(--color-ink);
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

/* --- Type scale (typography canon §3: hierarchy via size/weight/space) ---- */

h1 {
  font-size: var(--fs-h1);
  line-height: var(--leading-tight);
  margin: var(--space-4) 0 var(--space-6);
  text-wrap: balance;
  color: var(--brand-navy); /* D68: headings carry the brand ink */
}

h2 {
  font-size: var(--fs-h2);
  line-height: var(--leading-tight);
  margin: var(--space-8) 0 var(--space-3);
  text-wrap: balance;
  color: var(--brand-navy);
}

p {
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
}

.skip-link:focus {
  left: var(--space-2);
  z-index: 10;
}

/* --- Chrome -------------------------------------------------------------- */

/* D68: the header is the brand bar — solid navy in both themes. Everything
   inside it recalibrates: light ink, lifted section hues for the icons. */
.site-header {
  display: flex;
  flex-wrap: wrap; /* six nav links must reflow, not overlap, at phone widths */
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-6);
  background: var(--header-bg);
  color: var(--header-ink);
  border-bottom: 3px solid var(--brand-green-lift); /* D69: the green baseline */
  --sec-today: #9fc2e8;
  --sec-inbox: #2dd4bf;
  --sec-calendar: #38bdf8;
  --sec-goals: #a3e635;
  --sec-values: #fb7185;
  --sec-meetings: #fb923c;
  --sec-review: #a78bfa;
  --sec-utility: #b9c6d8;
  --brand-navy: #9fc2e8; /* the logo's arc must read on its own bar */
  --brand-green: var(--brand-green-lift);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600; /* the wordmark's demi-bold */
  font-size: var(--fs-body);
  color: var(--header-ink);
  text-decoration: none;
}

.brand-mark {
  width: 1.5em;
  height: 1.5em;
  flex: none;
}

.brand-tagline {
  font-size: var(--fs-caption);
  color: var(--color-muted);
  letter-spacing: 0.35em;
  text-transform: uppercase;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
}

/* Nav links read as labeled doors: icon in the section's hue, quiet text,
   a visible "you are here" chip on the current page. */
.site-nav a {
  font-size: var(--fs-caption);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--header-ink); /* D68: the nav lives on the navy brand bar */
  text-decoration: none;
  padding: var(--space-1) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius);
}

.site-nav a:hover {
  border-color: var(--sec, var(--color-accent));
}

.site-nav a[aria-current="page"] {
  border-color: var(--sec, var(--color-accent));
  background: rgb(250 248 244 / 0.14); /* a lightened chip on the navy bar */
  font-weight: 600;
}

/* D70: the planning-horizon group — one slot, the rest on hover/focus. */
.nav-group {
  position: relative;
  display: inline-flex;
}

.nav-group-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  flex-direction: column;
  gap: var(--space-1);
  min-width: max-content;
  padding: var(--space-1);
  background: var(--header-bg);
  border: 1px solid rgb(250 248 244 / 0.25);
  border-radius: var(--radius);
}

.nav-group:hover .nav-group-menu,
.nav-group:focus-within .nav-group-menu {
  display: flex;
}

/* --- Section identity marks ----------------------------------------------- */

.icon {
  width: 1em;
  height: 1em;
  flex: none;
}

.site-nav a .icon {
  width: 1.1em;
  height: 1.1em;
  color: var(--sec, var(--color-muted));
}

.sec-today { --sec: var(--sec-today); }
.sec-inbox { --sec: var(--sec-inbox); }
.sec-calendar { --sec: var(--sec-calendar); }
.sec-goals { --sec: var(--sec-goals); }
.sec-values { --sec: var(--sec-values); }
.sec-meetings { --sec: var(--sec-meetings); }
.sec-review { --sec: var(--sec-review); }
.sec-notes { --sec: var(--sec-notes); }
.sec-utility { --sec: var(--sec-utility); }

.page-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  width: fit-content;
  border-bottom: 2px solid var(--brand-green); /* D69: green underscores the place */
  padding-bottom: var(--space-1);
}

.page-title .icon {
  width: 0.9em;
  height: 0.9em;
  color: var(--sec, var(--color-accent));
}

/* --- Help tips: a small ? with hover text (D62) ----------------------------
   Reveals on hover and keyboard focus (pure CSS) and on tap (tips.js adds
   data-open); Esc dismisses. */

.help-tip-wrap {
  /* Inline-flex + middle keeps the badge centered on ITS line; the old
     inline-block + rem-sized badge hung below the baseline in small text
     (D69 pilot report). */
  display: inline-flex;
  align-items: center;
  position: relative;
  vertical-align: middle;
  /* vertical-align: middle sits ~0.2em under true line center (it aligns to
     baseline − x-height/2); measured on h2 and p alike. Nudge without
     affecting layout. */
  transform: translateY(-0.2em);
}

.help-tip-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: help;
  display: block;
  font: inherit;
}

.help-tip-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* em, not rem: the badge scales with the text it annotates. */
  width: 1.4em;
  height: 1.4em;
  border: 1px solid var(--color-muted);
  border-radius: 50%;
  color: var(--color-muted);
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1;
}

.help-tip-wrap:hover .help-tip-badge,
.help-tip-wrap:focus-within .help-tip-badge,
.help-tip-wrap[data-open] .help-tip-badge {
  border-color: var(--sec, var(--color-accent));
  color: var(--sec, var(--color-accent));
}

.help-tip-panel {
  display: none;
  position: absolute;
  z-index: 20;
  top: calc(100% + var(--space-1));
  left: 0;
  width: max-content;
  max-width: min(24rem, 78vw);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--sec, var(--color-accent));
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--fs-caption);
  font-weight: 400;
  text-align: left;
  text-transform: none;
  letter-spacing: normal;
}

.help-tip-wrap:hover .help-tip-panel,
.help-tip-wrap:focus-within .help-tip-panel,
.help-tip-wrap[data-open] .help-tip-panel {
  display: block;
}

/* Near the right edge (e.g. in flex rows) the panel could clip; on narrow
   screens let it flow in place instead of floating. */
@media (max-width: 40rem) {
  .help-tip-panel {
    position: static;
    width: auto;
    max-width: var(--measure);
  }
}

.header-controls {
  display: flex;
  flex-wrap: wrap; /* phone widths: capture box + buttons reflow, never overflow */
  gap: var(--space-2);
}

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--space-4) var(--space-6) var(--space-8);
}

/* --- Buttons: ONE quiet default + ONE saturated primary per screen
   (colour canon §2: the accent earns its keep on small areas) -------------- */

.control-btn {
  font: inherit;
  font-size: var(--fs-caption);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-ink);
  cursor: pointer;
}

.control-btn:hover {
  border-color: var(--color-accent);
}

.btn-primary {
  /* D69: the primary act is GREEN — you say it in navy, you do it in green. */
  background: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-action-ink);
  font-weight: 600;
}

/* D191: finishing is the point of the app, so Done (and Confirm done, Hand it
   back) is solid green, body-sized, a full 44px target and carries a check.
   Every open task has one, so this is the exception to "one primary". */
.btn-done {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  background: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-action-ink);
  font-size: var(--fs-body);
  font-weight: 600;
}

.btn-done::before {
  content: "✓" / "";
}

/* A goal's step ✓ / ○ is a toggle, not a Done: filled solid, an open step
   would read as finished. Green-rimmed until hovered, as before. */
.btn-step {
  border-color: var(--color-action);
  color: var(--color-link);
  font-weight: 600;
}

.btn-step:hover {
  background: var(--color-action);
  border-color: var(--color-action);
  color: var(--color-action-ink);
}

.btn-primary:hover,
.btn-done:hover {
  filter: brightness(1.08);
}

/* --- Notes & metadata ----------------------------------------------------- */

.placeholder-note,
.date-note,
.carry-note,
.deadline-label,
.handoff-link {
  font-size: var(--fs-caption);
}

.placeholder-note,
.date-note,
.deadline-label {
  color: var(--color-muted);
}

.date-note,
.carry-note {
  font-variant-numeric: tabular-nums;
}

.carry-note {
  color: var(--color-warn);
  font-weight: 600;
}

/* --- Forms ---------------------------------------------------------------- */

.capture-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-8);
}

.capture-form input[type="text"] {
  flex: 1 1 14rem;
}

.capture-form input,
.login-form input,
.handoff-form input,
.handoff-form textarea,
.respond-form input,
.task-row select,
.triage-option input[type="date"] {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-ink);
}

.login-form,
.handoff-form,
.respond-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 24rem;
  margin-bottom: var(--space-6);
}

.handoff-form {
  max-width: 34rem;
}

/* D117: people asked before — a name to pick and an "x" to take it off. */
.past-recipients ul {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.past-recipients li {
  display: inline-flex;
}

.past-recipients li[hidden] {
  display: none;
}

.past-recipients .past-pick {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  overflow-wrap: anywhere;
  text-align: left;
}

.past-recipients .past-forget {
  min-width: 44px;
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  color: var(--color-muted);
}

/* D132: the address to give Claude — easy to select, never wrapped mid-word. */
.connect-url {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-bg);
  user-select: all;
  overflow-wrap: anywhere;
}

/* D130, D131: "Later" and "More" on a row — a button at rest; opened, the
   choices take a line of their own under the row. */
.later > summary,
.row-more > summary {
  list-style: none;
  cursor: pointer;
}

.later > summary::-webkit-details-marker,
.row-more > summary::-webkit-details-marker {
  display: none;
}

.task-row > .later[open],
.task-row > .row-more[open] {
  flex-basis: 100%;
}

.later > summary,
.row-more > summary {
  display: inline-flex;
  align-items: center;
  width: fit-content;
}

.later-form,
.row-more-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-2);
}

.later-form label,
.row-more-body label {
  font-size: var(--fs-caption);
  color: var(--color-muted);
}

.later-form input[type="date"] {
  font: inherit;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-ink);
}

.later .look-again-form {
  padding-top: var(--space-2);
}

.letter-badge {
  font-weight: 700;
  min-width: 1.25em;
  text-align: center;
  color: var(--color-accent);
}

/* D126: the composer on Today — the title row, and under it everything
   else a task can carry, one press away. */
.composer {
  margin-bottom: var(--space-8);
}

.composer .capture-form {
  margin-bottom: var(--space-2);
}

.composer-more {
  max-width: 34rem;
}

.composer-fields {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
}

.composer-more summary {
  cursor: pointer;
  color: var(--color-muted);
  font-size: var(--fs-caption);
  padding: var(--space-3) 0;
}

.composer-fields label {
  font-size: var(--fs-caption);
  color: var(--color-muted);
  margin-top: var(--space-2);
}

.composer-fields textarea,
.composer-fields input[type="email"],
.composer-fields input[type="date"] {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-ink);
}

.composer-fields .btn-primary {
  align-self: flex-start;
}

/* D121: the owner's own words on an ask, shown back on the task page. */
.asked-block + .asked-block {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
}

/* D119: the "look again on" date beside an idea or a stored task. */
.look-again-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.look-again-form label {
  font-size: var(--fs-caption);
  color: var(--color-muted);
}

.look-again-form input[type="date"] {
  font: inherit;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-ink);
}

/* D118: the date, and beside it the two words that can stand in for it. */
.needed-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.needed-row select {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-ink);
}

.login-form label,
.handoff-form label,
.respond-form label {
  font-size: var(--fs-caption);
  color: var(--color-muted);
  margin-top: var(--space-2);
}

.initiative-set {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.initiative-set legend {
  font-size: var(--fs-caption);
  color: var(--color-muted);
  padding: 0 var(--space-1);
}

.form-error {
  color: var(--color-danger);
  font-size: var(--fs-caption);
}

/* --- Task rows ------------------------------------------------------------ */

.task-list {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}

.task-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-rule);
}

.task-title {
  flex: 1 1 12rem;
}

.task-row select {
  width: 3.5rem;
  text-align: center;
  padding: var(--space-1);
}

/* D178: the reason list in a Today row needs its words, not a letter's width. */
.task-row select[name="reason"] {
  width: auto;
  max-width: 100%;
  text-align: start;
}

.due-strip {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-4);
  margin-bottom: var(--space-6);
}

.cal-strip {
  border-left: 3px solid var(--color-rule);
  padding-left: var(--space-4);
  margin-bottom: var(--space-6);
}

.cal-strip h2 {
  margin-top: 0;
}

.cal-time {
  min-width: 6rem;
}

.due-strip h2 {
  margin-top: 0;
}

/* D170: Deep Storage or a new date, side by side on the row. */
.decide-date {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.waiting-on-others {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-4);
}

/* --- Triage --------------------------------------------------------------- */

.triage-form fieldset {
  border: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: var(--measure);
}

.triage-option {
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}

.triage-disabled {
  color: var(--color-muted);
}

/* --- Cards & explainers ---------------------------------------------------- */

.request-card {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
}

.request-card h2 {
  margin-top: 0;
}

.respond-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.intro-card {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--brand-green); /* D68: the welcome is green */
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
}

.request-card {
  border-left: 3px solid var(--brand-navy);
}

/* D68: the landing hero — the brand speaking in its own colors. */
.brand-hero {
  background: var(--header-bg);
  color: #faf8f4;
  border-radius: var(--radius);
  padding: var(--space-8) var(--space-6);
  margin-bottom: var(--space-6);
}

.brand-hero .page-title {
  color: #faf8f4;
  margin-top: 0;
}

.brand-hero .brand-mark {
  width: 2em;
  height: 2em;
  --brand-navy: #9fc2e8;
  --brand-green: var(--brand-green-lift);
}

.brand-hero .brand-tagline {
  color: var(--brand-green-lift);
}

.intro-card h2 {
  margin-top: 0;
}

/* Newcomer explainers (kit Directive 19): tappable, dotted underline. */
.explain {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-caption);
  color: var(--color-muted);
  max-width: var(--measure);
}

.explain summary {
  cursor: pointer;
  display: inline;
  border-bottom: 1px dotted var(--color-muted);
}

.explain[open] summary {
  color: var(--color-ink);
}

.explain p {
  margin: var(--space-2) 0 0;
}

/* --- Messages -------------------------------------------------------------- */

.messages {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
}

.message {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-rule);
  border-left: 3px solid var(--brand-green); /* D69: good news reads green */
  border-radius: var(--radius);
  background: var(--color-surface);
}

.message-error {
  border-left-color: var(--color-danger);
}

/* --- Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .control-btn,
  a {
    transition: border-color 120ms ease, color 120ms ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- Phase 6: meetings, review, print picker ------------------------------ */

.stacked-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 66ch;
  margin-block: var(--space-3);
}

.stacked-form textarea {
  font: inherit;
  padding: var(--space-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
}

.picker-sections {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.picker-sections legend {
  font-size: var(--fs-caption);
  padding-inline: var(--space-1);
}

/* Dictation buttons: quiet until listening */
.dictate-btn.dictating {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

/* D113: a microphone on every text box. Small beside the field; the line
   after it says what is happening (listening, working, what went wrong). */
.dictate-auto {
  min-height: 36px;
  padding: var(--space-1) var(--space-2);
  align-self: flex-start;
  width: fit-content;
}

.dictate-btn.dictate-working {
  opacity: 0.6;
  cursor: progress;
}

.dictate-status {
  font-size: var(--fs-caption);
  color: var(--color-muted);
}

.dictate-status:empty {
  display: none;
}

/* D116: an eye inside every password box. peek.js wraps the box; without
   script there is no wrapper and no eye, and the box is as it always was. */
.pw-wrap {
  position: relative;
  display: flex;
}

.pw-wrap input {
  flex: 1;
  min-width: 0;
  padding-right: calc(44px + var(--space-1));
}

.pw-peek {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-muted);
  cursor: pointer;
}

.pw-peek:hover,
.pw-peek[aria-pressed="true"] {
  color: var(--color-ink);
}

.pw-peek .icon {
  width: 1.25em;
  height: 1.25em;
}

.pw-peek span {
  display: inline-flex;
}

.pw-peek .pw-hide-icon,
.pw-peek[aria-pressed="true"] .pw-show-icon {
  display: none;
}

.pw-peek[aria-pressed="true"] .pw-hide-icon {
  display: inline-flex;
}

/* Goals: completed steps overstruck, never erased (D17) */
.task-done {
  text-decoration: line-through;
  color: var(--color-muted);
}

.stacked-form select {
  font: inherit;
  padding: var(--space-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-ink);
}

/* --- Week view (calendar slice 2) ----------------------------------------- */

.week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-2);
}

@media (max-width: 60rem) {
  .week-grid { grid-template-columns: repeat(2, 1fr); }
}

.week-day {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  padding: var(--space-2);
  min-height: 8rem;
}

.week-day h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-muted);
}

.week-today {
  border-color: var(--color-accent);
}

.week-card {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--fs-caption);
  background: var(--color-surface);
  cursor: grab;
}

.week-event {
  border-left: 3px solid var(--color-rule);
}

.week-task {
  border-left: 3px solid var(--color-accent);
}

.week-card.dragging { opacity: 0.5; }
.week-day.drop-target { outline: var(--focus-ring); }

/* D72: card titles are doors to the task page; the card still drags. */
.week-card a {
  color: inherit;
  text-decoration: none;
}

.week-card a:hover {
  text-decoration: underline;
  color: var(--color-link);
}

/* D66: adjacent-week rails and adjacent-month squares — dashed = drop zone. */
.week-board {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.week-board .week-grid {
  flex: 1 1 auto;
}

.week-side {
  flex: 0 0 10rem;
  border: 1px dashed var(--color-rule);
  border-radius: var(--radius);
  padding: var(--space-2);
}

.week-side h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-muted);
}

.month-sides {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.month-side {
  flex: 1 1 14rem;
  border: 1px dashed var(--color-rule);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
}

.month-side h2 {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-caption);
  color: var(--color-muted);
}

.week-side.drop-target,
.month-side.drop-target,
.month-cell.drop-target {
  outline: var(--focus-ring);
  outline-offset: -2px;
}

.month-task {
  cursor: grab;
}

@media (max-width: 60rem) {
  .week-board {
    flex-direction: column;
  }

  .week-side {
    flex: 1 1 auto;
  }
}

/* Busy state on slow (AI) submit buttons — see static/js/busy.js */
.control-btn.is-busy {
  animation: busy-pulse 1.4s ease-in-out infinite;
}

@keyframes busy-pulse {
  50% { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
  .control-btn.is-busy {
    animation: none;
    opacity: 0.7;
  }
}

/* Header quick-capture (req 53) — capture into the Inbox from any screen */
.quick-capture {
  display: flex;
  gap: var(--space-1);
  align-items: center;
}

.quick-capture .control-btn,
.dictate-btn,
.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.icon-btn .icon {
  width: 1.15em;
  height: 1.15em;
}

.quick-capture .control-btn .icon {
  color: var(--sec, var(--color-muted));
}

/* D112: the capture box. One line at rest; clicking into it opens a real
   writing space with the file picker underneath. `.qc-open` is set by
   capture.js so the panel stays while the file dialog has the focus;
   :focus-within opens it with no script at all. */
.quick-capture {
  position: relative;
}

.quick-capture textarea {
  font: inherit;
  width: 11em;
  max-width: 40vw;
  height: 2.25em;
  min-height: 0;
  padding: var(--space-1) var(--space-2);
  resize: none;
  overflow: hidden;
  box-sizing: border-box;
}

.qc-more {
  display: none;
}

.quick-capture:focus-within textarea,
.quick-capture.qc-open textarea,
.quick-capture:focus-within .qc-more,
.quick-capture.qc-open .qc-more {
  /* Pinned to the top middle of the screen, whatever row or side of the
     header the box sits on at this width. */
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(36rem, 92vw);
  max-width: none;
  box-sizing: border-box;
  z-index: 30;
}

.quick-capture:focus-within textarea,
.quick-capture.qc-open textarea {
  top: var(--space-3);
  height: 12em;
  overflow: auto;
  resize: vertical;
  outline: 2px solid var(--color-rule);
}

.quick-capture:focus-within .qc-more,
.quick-capture.qc-open .qc-more {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  top: calc(var(--space-3) + 12.5em);
  padding: var(--space-2);
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  outline: 2px solid var(--color-rule);
}

.qc-attach-label {
  font-weight: 600;
}

/* D115: Dictate on the left; Clear and the close "x" on the right. */
.qc-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.qc-bar .qc-clear {
  margin-left: auto;
}

.qc-bar .qc-close {
  min-width: 44px;
  min-height: 44px;
  font-size: 1.25em;
  line-height: 1;
}

.qc-bar .dictate-status {
  flex: 1;
}

/* Closed by the "x": stay shut even though the focus is still inside. */
.quick-capture.qc-shut textarea {
  position: static;
  transform: none;
  width: 11em;
  max-width: 40vw;
  height: 2.25em;
  overflow: hidden;
  resize: none;
  outline: none;
}

.quick-capture.qc-shut .qc-more {
  display: none;
}

/* Month & year views */
.month-scroll { overflow-x: auto; }

.month-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 40rem;
}

.month-grid th {
  font-size: var(--fs-caption);
  color: var(--color-muted);
  text-align: left;
  padding: var(--space-1);
}

.month-cell {
  border: 1px solid var(--color-rule);
  vertical-align: top;
  padding: var(--space-1);
  height: 5.5rem;
}

.month-other { opacity: 0.45; }

.month-today { outline: 2px solid var(--color-accent); }

.month-daynum {
  display: block;
  font-size: var(--fs-caption);
  color: var(--color-muted);
}

.month-item {
  display: block;
  font-size: var(--fs-caption);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.month-deadline { font-weight: 600; }

.month-event { color: var(--color-muted); }

.year-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-2);
}

.year-month {
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  padding: var(--space-2);
  background: var(--color-surface);
}

/* D76: an invitation that never left the building says so, and hands over
   the link so the sender can pass it along by hand. */
.undelivered {
  display: block;
  flex: 1 1 100%;
  font-size: var(--fs-caption);
}

.undelivered-link {
  display: block;
  margin-top: var(--space-1);
  word-break: break-all;
  font-size: var(--fs-caption);
}

/* --- D96: the character count beside long text fields ---------------------- */

.char-count {
  font-size: var(--fs-caption);
  color: var(--color-muted);
  font-variant-numeric: tabular-nums;
}

/* One-line fields: the line appears only once script has something to say. */
.char-count-quiet {
  display: none;
}

.char-count-quiet[data-state] {
  display: inline;
}

.char-count[hidden] {
  display: none;
}

.char-count[data-state="near"] {
  color: var(--color-warn);
  font-weight: 600;
}

.char-count[data-state="over"] {
  color: var(--color-danger);
  font-weight: 600;
}

/* --- D96: attached files ---------------------------------------------------- */

.files-section {
  margin: var(--space-6) 0;
  max-width: 34rem;
}

.file-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
}

/* 44px targets: a file name is something a thumb has to hit. */
.file-link,
.file-count {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  overflow-wrap: anywhere;
}

.file-link {
  font-weight: 600;
}

.file-remove {
  min-height: 44px;
  min-width: 44px;
}

.file-control {
  font: inherit;
  max-width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  padding: var(--space-1) var(--space-2);
  border: 1px dashed var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-ink);
}

.file-control::file-selector-button {
  font: inherit;
  min-height: 36px;
  margin-right: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
}

.file-picked {
  font-size: var(--fs-caption);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

.file-picked[data-state="over"] {
  color: var(--color-danger);
  font-weight: 600;
}

/* D123: a picked file that has not been sent — the way to drop it, and the
   sentence shown when something else is pressed first. */
.file-cancel {
  align-self: flex-start;
  width: fit-content;
}

.file-hold {
  color: var(--color-danger);
  font-weight: 600;
}

.file-hold[hidden],
.file-cancel[hidden] {
  display: none;
}

/* D212: a form a file is being dragged over, ready to take it. */
.file-drop {
  outline: 2px dashed var(--color-rule);
  outline-offset: 4px;
}

.files-section .control-btn[type="submit"] {
  min-height: 44px;
  align-self: flex-start;
}

.note-preview {
  margin: 0;
  padding-left: var(--space-3);
  border-left: 3px solid var(--color-rule);
  color: var(--color-muted);
  overflow-wrap: anywhere;
}

/* --- D135: page heads, cards and tabs ------------------------------------- */
/* D192: the date and links sit on the title's baseline. Centred, they lined up
   on the title plus its green underscore, so they rode above its words. */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}

.page-head .page-title {
  align-items: baseline;
  margin-bottom: 0;
}

.page-head .page-title .icon,
.page-head > .letter-badge { align-self: center; }

.page-sub { color: var(--color-muted); }

.page-head-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.inline-form { display: inline-flex; gap: var(--space-2); align-items: center; }

a.icon-btn,
summary.icon-btn,
button.icon-btn {
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-ink);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
}

summary.icon-btn { list-style: none; }
summary.icon-btn::-webkit-details-marker { display: none; }

.card {
  border: 1px solid var(--color-rule);
  border-radius: calc(var(--radius) * 1.6);
  padding: var(--space-4);
  margin: var(--space-4) 0;
  background: var(--color-surface, var(--color-bg));
}

.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-bottom: 2px solid var(--color-rule);
  margin: var(--space-6) 0 var(--space-4);
}

.tab-bar a {
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-muted);
  font-weight: 700;
  margin-bottom: -2px;
  border-bottom: 3px solid transparent;
}

.tab-bar a[aria-selected="true"],
.tab-bar a[aria-current="page"] {
  color: var(--color-ink);
  border-bottom-color: var(--color-accent);
}

/* --- D135: notes ---------------------------------------------------------- */
.note-composer-row {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}

.note-composer-row textarea { flex: 1; min-width: 0; }
.note-composer-row .control-btn { min-height: 44px; }
.note-files { margin: var(--space-2) 0; }

.note-list { list-style: none; margin: 0; padding: 0; }

.note-row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-rule);
}

.note-when {
  flex: 0 0 8.5rem;
  color: var(--color-muted);
  font-size: var(--fs-caption);
}

.note-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.note-text { margin: 0; }
.note-home { font-size: var(--fs-caption); }
.note-loose { color: var(--color-muted); }
.note-edit[open] > summary { margin-bottom: var(--space-2); }

.talk-switch {
  display: inline-flex;
  border: 1px solid var(--color-rule);
  border-radius: 22px;
  overflow: hidden;
}

.talk-switch a {
  padding: var(--space-2) var(--space-3);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--color-muted);
}

.talk-switch a[aria-current="true"] {
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-weight: 700;
}

/* --- D135: the top bar's Asks number and More in three groups ------------- */
.nav-badge {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 0.4em;
  border-radius: 1em;
  background: var(--color-ok);
  color: var(--color-action-ink);
  font-size: var(--fs-caption);
  font-weight: 800;
  text-align: center;
  line-height: 1.4;
}

.nav-group-columns { gap: var(--space-4); }
.nav-group:hover .nav-group-columns,
.nav-group:focus-within .nav-group-columns { flex-direction: row; }

.nav-menu-group { display: flex; flex-direction: column; gap: var(--space-1); }

.nav-menu-heading {
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
  padding: 0 var(--space-2);
}

/* --- D135: Today's goals, the composer's second row, the row's letter ---- */
.goals-banner {
  background: var(--color-surface);
  border-radius: calc(var(--radius) * 1.6);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
}

.goals-banner p { margin: 0 0 var(--space-2); }

.goal-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.goal-chips a {
  border: 1px solid var(--color-rule);
  border-radius: 1.2em;
  padding: var(--space-1) var(--space-3);
  background: var(--color-bg);
  text-decoration: none;
  color: var(--color-ink);
  font-size: var(--fs-caption);
}

.composer-row2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.composer-row2 label { font-size: var(--fs-caption); color: var(--color-muted); }
.composer-row2 select,
.composer-row2 input { max-width: 100%; min-width: 0; }

.row-letter > summary { list-style: none; cursor: pointer; }
.row-letter > summary::-webkit-details-marker { display: none; }
.task-row > .row-letter[open] { flex-basis: 100%; }

.letter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 44px;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius);
  font-weight: 800;
  color: var(--color-accent);
  background: var(--color-bg);
}

.letter-btn.letter-a {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

.letter-btn.letter-c { border-color: var(--color-rule); color: var(--color-muted); }

.letter-choices { display: inline-flex; gap: var(--space-1); }

.task-main { flex: 1 1 14rem; min-width: 0; display: flex; flex-direction: column; }
.task-main .task-title { flex: none; }
.task-sub:empty { display: none; }

.ask-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.ask-card {
  display: block;
  border: 1px solid var(--color-rule);
  border-radius: calc(var(--radius) * 1.6);
  padding: var(--space-3) var(--space-4);
  text-decoration: none;
  color: var(--color-ink);
}

.ask-card strong { color: var(--color-accent); }

.handed-back-card .request-card { flex-basis: 100%; }
.progress-form input[type="text"] { min-width: 12rem; }

.goal-chips-item {
  border: 1px solid var(--color-rule);
  border-radius: 1.2em;
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-caption);
}

.next-step { margin: var(--space-2) 0; }

/* --- D135: dictation from an earlier page, kept for the person ------------ */
.dictate-tray {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  max-width: min(28rem, calc(100vw - 2 * var(--space-4)));
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  z-index: 40;
}

.dictate-tray:empty { display: none; }

.dictate-tray-item {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
}

.task-facts > span + span::before { content: " · "; }

.note-composer textarea,
.note-edit textarea,
.handoff-form textarea {
  font: inherit;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-ink);
}

/* --- D135: the hand-off page — three cards, full width ------------------- */
#handoff-form { max-width: 46rem; }

#handoff-form .card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

#handoff-form .card h2 {
  margin: 0;
  font-size: var(--fs-lead);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
}

#handoff-form .card h2 .date-note { font-weight: 400; }
#handoff-form textarea,
#handoff-form input[type="email"] { width: 100%; box-sizing: border-box; }
.one-minute-goal { border-left: 3px solid var(--color-accent); }
#handoff-form .needed-row { display: flex; flex-wrap: wrap; gap: var(--space-4); }

details.card > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  width: fit-content;
  list-style: none;
  cursor: pointer;
}

details.card > summary::-webkit-details-marker { display: none; }
details.card[open] > summary { margin-bottom: var(--space-3); }

/* --- D139: one menu button for the header's occasional controls ---------- */
.header-menu { position: relative; }
.header-menu > summary { list-style: none; cursor: pointer; }
.header-menu > summary::-webkit-details-marker { display: none; }

.header-menu-body {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-1));
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-1);
  min-width: 12rem;
  padding: var(--space-2);
  background: var(--color-bg);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.18);
}

.header-menu-body .control-btn,
.header-menu-body .logout-form .control-btn {
  width: 100%;
  min-height: 44px;
  justify-content: flex-start;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body);
}

/* --- D139: the Inbox page's capture box opens in place ------------------- */
.quick-capture-inline { margin: var(--space-4) 0; flex-wrap: wrap; }
.quick-capture-inline textarea { width: auto; max-width: none; flex: 1 1 12rem; min-width: 0; }

.quick-capture-inline:focus-within textarea,
.quick-capture-inline.qc-open textarea,
.quick-capture-inline:focus-within .qc-more,
.quick-capture-inline.qc-open .qc-more {
  position: static;
  transform: none;
  width: 100%;
  z-index: auto;
}

.quick-capture-inline:focus-within .qc-more,
.quick-capture-inline.qc-open .qc-more { flex-basis: 100%; }

.quick-capture-inline.qc-shut textarea { width: auto; max-width: none; flex: 1 1 12rem; }
.quick-capture-inline:focus-within textarea,
.quick-capture-inline.qc-open textarea { flex-basis: 100%; }

/* --- D139: the Inbox's four sorts as a 2×2 of icons ---------------------- */
.sort-grid {
  display: inline-flex;
  gap: var(--space-1);
}

.sort-grid .icon-btn {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  padding: 0;
}

.undo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

.task-row .sort-form {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  max-width: none;
  margin-bottom: 0;
}

.quick-capture-inline:focus-within > .dictate-btn,
.quick-capture-inline.qc-open > .dictate-btn { display: none; }

/* --- D141: each Inbox thought is a card — its words, then its buttons ---- */
.task-list .inbox-row {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  padding: var(--space-3);
  margin: 0 0 var(--space-3);
  border: 1px solid var(--color-rule);
  border-radius: calc(var(--radius) * 1.6);
}

.inbox-row .task-title { flex: none; }
.inbox-row .sort-form { gap: var(--space-2); }

/* --- D159, D161: shared projects — the blocked look and people's badges ---- */
/* Blocked is red everywhere it shows (D161), and never by colour alone: an
   outline, a chip with a stop sign and the word, and the blocker's words. */
.is-blocked {
  outline: 2px solid var(--color-danger);
  outline-offset: 2px;
  border-radius: 6px;
}

.blocked-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.chip-blocked {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0 var(--space-2);
  border: 1.5px solid var(--color-danger);
  border-radius: 999px;
  color: var(--color-danger);
  font-weight: 700;
  font-size: 0.85em;
}

.blocked-text {
  font-style: italic;
}

.blocking-line {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-danger);
  font-weight: 600;
}

.blocker-card {
  margin: var(--space-4) 0;
}

/* A person's initials in place of a letter that is theirs alone (D10). */
.person-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2em;
  height: 2em;
  padding: 0 var(--space-1);
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: 0.8em;
  font-weight: 700;
}

.chip-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  border: 0;
  padding: 0;
  margin: 0;
}

.chip-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-rule);
  border-radius: 999px;
}

.standup-person {
  margin-bottom: var(--space-4);
}

.standup-controls select,
.standup-controls input[type="date"] {
  max-width: 100%;
}

/* Backlog (D102): Deep Storage's count of reasons. */
.storage-why h3 { font-size: 1rem; margin: 0.75rem 0 0.25rem; }
.storage-why ul { margin: 0 0 0.5rem 1.25rem; padding: 0; }

/* ---- D203: recordings (mockups K, K2, L, M) ---------------------------- */
.checkbox-line { display: flex; align-items: flex-start; gap: var(--space-2); }
.link-btn {
  font: inherit; background: none; border: none; padding: 0; min-height: 44px;
  color: var(--color-link); text-decoration: underline; cursor: pointer;
}
.danger-link { color: var(--color-danger); }
.chip {
  display: inline-block; padding: 2px var(--space-3); border-radius: 999px;
  border: 1px solid var(--color-rule); font-size: var(--fs-caption); white-space: nowrap;
}
.chip-due { border-color: var(--color-warn); color: var(--color-warn); }
.chip-ai { border-color: var(--color-ok); color: var(--color-ok); vertical-align: middle; }
.record-box, .recording-now, .upload-box { margin-block: var(--space-4); }
.announce { display: grid; gap: var(--space-2); justify-items: start; margin-block: var(--space-3); }
.announce-words {
  margin: 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-ok);
  font-style: italic; max-width: var(--measure);
}
.btn-record {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 52px;
  padding-inline: var(--space-6); border-radius: 26px; font-weight: 800;
  background: var(--color-danger); border-color: var(--color-danger); color: var(--color-action-ink);
}
.record-dot {
  width: 12px; height: 12px; border-radius: 50%; background: currentColor; display: inline-block;
}
.recording-now { display: grid; gap: var(--space-3); justify-items: center; text-align: center; }
.recording-badge {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: 2px var(--space-3);
  border-radius: 14px; background: var(--color-danger); color: var(--color-action-ink); font-weight: 800;
}
.record-clock { font-size: 3rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.level-meter { display: flex; gap: 4px; align-items: flex-end; height: 40px; }
.level-meter span { width: 6px; height: 8px; border-radius: 3px; background: var(--color-rule); }
.level-meter span.lit { height: 30px; background: var(--color-ok); }
.record-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.record-actions .control-btn { min-height: 52px; border-radius: 26px; padding-inline: var(--space-6); }
.upload-box summary { cursor: pointer; font-weight: 700; min-height: 44px; }
.recording-list .chip { margin-inline-start: auto; }
.transcript-lines {
  list-style: none; padding: 0; margin: 0; max-height: 18rem; overflow-y: auto;
  display: grid; gap: var(--space-2);
}
.found-list { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.found-item p { margin-block: var(--space-1); }
.found-head { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.found-text { font-size: var(--fs-lead); }
.found-dismissed .found-text { text-decoration: line-through; color: var(--color-muted); }
.ask-draft { width: 100%; }
.ask-draft > summary { list-style: none; display: inline-flex; cursor: pointer; }
.ask-draft[open] > summary { margin-bottom: var(--space-3); }
.remove-recording { margin-block: var(--space-8); }
.remove-recording > summary { list-style: none; cursor: pointer; display: inline-block; }
.source-line { display: block; font-size: var(--fs-caption); color: var(--color-muted); }
.found-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }
.found-actions .inline-form { margin: 0; }
.ask-draft[open] { flex-basis: 100%; }
.record-box > h2:first-child, .recording-now h2, .found-item > :first-child,
.transcript > h2:first-child, .card > h2:first-child { margin-top: 0; }
.ask-draft form, #upload-form, .record-box > label { display: grid; gap: var(--space-3); max-width: 36rem; }
.ask-draft form label, #upload-form label:not(.checkbox-line), .record-box > label {
  display: grid; gap: var(--space-1);
}
.ask-draft input, .ask-draft textarea, #upload-form input[type="datetime-local"], #record-what {
  width: 100%; font: inherit; min-height: 44px; box-sizing: border-box;
}
.ask-draft button[type="submit"], #upload-form button[type="submit"] { justify-self: start; }

/* --- D215 (mockups R, S, T, V): the hand-off, opened where a task is made - */
.handoff-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-basis: 100%;
  width: 100%;
  box-sizing: border-box;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-rule);
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 400;
}
.handoff-panel[hidden] { display: none; }
.handoff-head { margin: 0; }
.handoff-head strong { color: var(--color-accent); }
.handoff-label { font-weight: 700; }
.handoff-to, .handoff-when, .handoff-send {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.handoff-to input[type="email"] { flex: 1 1 12rem; min-width: 0; }
.handoff-panel textarea { width: 100%; box-sizing: border-box; resize: vertical; font: inherit; padding: var(--space-2); }
.handoff-person { font: inherit; background: var(--color-surface); color: var(--color-ink); cursor: pointer; }
.handoff-person[aria-pressed="true"],
.handoff-when .chip-choice:has(input:checked) {
  border: 2px solid var(--color-action);
  font-weight: 700;
}
.handoff-when .chip-choice input { margin: 0; }
.handoff-toggle { display: inline-flex; align-items: center; gap: var(--space-1); }
.handoff-toggle[aria-expanded="true"] { border: 2px solid var(--color-accent); }
.handoff-panel .explain label,
.handoff-panel .explain input[type="text"],
.handoff-panel .explain input[type="date"] { display: block; margin-top: var(--space-1); }
.found-form { display: flex; flex-direction: column; gap: var(--space-2); }
/* The capture box sits pinned at the top; with the hand-off open it scrolls. */
.quick-capture:focus-within .qc-more,
.quick-capture.qc-open .qc-more { max-height: calc(100vh - 15em); overflow-y: auto; }
.quick-capture-inline:focus-within .qc-more,
.quick-capture-inline.qc-open .qc-more { max-height: none; overflow-y: visible; }
/* The capture box pins ITS text box to the top of the screen; the
   hand-off's done box inside it stays in the flow. */
.quick-capture .qc-more .handoff-panel textarea {
  position: static;
  transform: none;
  top: auto;
  left: auto;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 5em;
  overflow: auto;
  resize: vertical;
  outline: none;
  z-index: auto;
}
.quick-capture .qc-more { overflow-x: hidden; }
/* D218: the drag-or-paste hint is for a pointer and a keyboard; a phone has neither. */
@media (hover: none) { .file-drop-hint { display: none; } }