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

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

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

.quick-capture input[type="text"] {
  width: 11em;
  max-width: 40vw;
}

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