/* 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-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;
}

/* Completion buttons (Done, Confirm done, step ✓): green-rimmed until
   hovered, then fully green — the check turning real. */
.btn-done {
  border-color: var(--color-action);
  color: var(--color-link);
  font-weight: 600;
}

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

.btn-primary: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);
}

/* 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);
}

.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;
}

.waiting-drawer {
  margin-bottom: var(--space-6);
  color: var(--color-muted);
  font-size: var(--fs-caption);
}

.waiting-drawer summary {
  cursor: pointer;
}

.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;
}

.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;
}