/* ---------------------------------------------------------------------------
   rekurro — modern SaaS theme.

   Cool light-gray canvas, white cards with soft shadows, rounded corners,
   the brand teal as the single primary, pill badges for state. Native sans
   stack, no frameworks, no external assets (CSP allows same-origin only),
   zero JS required.
   --------------------------------------------------------------------------- */

:root {
  /* Light and dark, chosen by the OS setting. There is deliberately no
     toggle: prefers-color-scheme is the only input, so no JS, no stored
     preference and no profile field are involved.

     `color-scheme` is load-bearing twice over: light-dark() resolves to its
     LIGHT value without it, and the native widgets (9 date pickers, radios,
     checkboxes, selects, scrollbars) only go dark because of it.

     Every colour token below is light-dark(light, dark) so a new token
     cannot be added without deciding its dark value — enforced by
     `every_color_token_declares_both_themes` in web/mod.rs. */
  color-scheme: light dark;

  /* Surfaces */
  --bg: light-dark(#f6f7f9, #0f1115);        /* app canvas */
  --card: light-dark(#ffffff, #171a21);      /* raised surfaces */
  --subtle: light-dark(#f9fafb, #1c2029);    /* table heads, hovers, wells */
  /* Ink */
  --fg: light-dark(#101828, #e6e8ec);
  /* Secondary text runs LIGHTER on dark than a straight ratio match would
     suggest (9.4:1 vs the light theme's 4.6:1). WCAG 2.x overstates
     light-on-dark legibility — light strokes bloom against a dark canvas —
     and --muted carries the smallest, most letter-spaced text in the app
     (0.72rem badges, the OVERDUE SINCE label), which blooms worst. */
  --muted: light-dark(#667085, #b0b7c4);
  /* Primary (the brand tile teal). On dark the accent is BRIGHTENED: the
     brand teal as link text on the dark canvas is only ~3.7:1, and links
     are the main navigation affordance on /home and /tasks. Hover therefore
     goes lighter on dark, where it goes darker on light. */
  --accent: light-dark(#0e7d6c, #2dd4bf);
  --accent-hover: light-dark(#0b6558, #5eead4);
  --accent-soft: light-dark(#e6f3f1, #10312c);  /* tinted chips/rings */
  /* Text sitting ON the accent. White works on the light theme's dark teal;
     the dark theme's bright teal needs near-black instead. One token so no
     rule ever hard-codes a colour that cannot follow the theme. */
  --on-accent: light-dark(#ffffff, #06231e);
  /* Danger / overdue */
  --late: light-dark(#b42318, #fda29b);
  --late-soft: light-dark(#fef3f2, #2a1512);
  --late-border: light-dark(#fecdca, #5c2420);
  /* Warning / paused */
  --warn-soft: light-dark(#fef7e6, #2a1f0d);
  --warn-fg: light-dark(#b54708, #f5a524);
  /* Lines */
  --border: light-dark(#e4e7ec, #262b36);
  --divider: light-dark(#f2f4f7, #1f242e);
  /* Flash */
  --ok-bg: light-dark(#ecfdf3, #0d2a1c);
  --ok-fg: light-dark(#067647, #6ce9a6);
  --ok-border: light-dark(#abefc6, #1a4d33);
  --err-bg: light-dark(#fef3f2, #2a1512);
  --err-fg: light-dark(#b42318, #fda29b);
  --err-border: light-dark(#fecdca, #5c2420);
  /* Overlay for hover states painted ON a surface: black darkens a light
     card, but is invisible on a dark one, so it flips to white. */
  --overlay-hover: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.08));
  /* Shape & depth. Shadows are re-tuned rather than reused: an alpha tuned
     for white surfaces is invisible on #171a21, so dark runs ~5x. */
  --r-card: 12px; --r-ctl: 8px;
  --shadow-card:
    0 1px 3px light-dark(rgba(16, 24, 40, 0.08), rgba(0, 0, 0, 0.5)),
    0 1px 2px light-dark(rgba(16, 24, 40, 0.04), rgba(0, 0, 0, 0.35));
  --shadow-ctl: 0 1px 2px light-dark(rgba(16, 24, 40, 0.05), rgba(0, 0, 0, 0.4));
  --shadow-pop: 0 6px 16px light-dark(rgba(16, 24, 40, 0.14), rgba(0, 0, 0, 0.6));
  --shadow-menu: 0 2px 8px light-dark(rgba(16, 24, 40, 0.1), rgba(0, 0, 0, 0.55));
  --ring: 0 0 0 4px light-dark(rgba(14, 125, 108, 0.16), rgba(45, 212, 191, 0.25));
  /* Type */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
          Arial, sans-serif;
  --mono-nums: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* Inline icons scale with their text and inherit its color. */
.icon { width: 1em; height: 1em; flex: none; vertical-align: -0.14em; }
/* Bare icon + label (outside a pill/badge) — keep them from touching. */
.icon-text { display: inline-flex; align-items: center; gap: 0.3em; }
.icon-text .icon { vertical-align: 0; }

body {
  margin: 0; color: var(--fg); background: var(--bg);
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* Sticky footer: body fills the viewport and main takes the slack, so the
     footer sits at the bottom on short pages and after content on long ones.
     dvh tracks the *visible* viewport; plain vh ignores mobile browser chrome
     and would push the footer below the fold. vh first as the fallback. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column;
}

/* ----- Header ------------------------------------------------------------ */
/* Header nav only (direct child of body) — a bare `nav` selector would also
   hit the footer's nav and any nav a page adds inside main. */
body > nav {
  display: flex; align-items: center; gap: 0.25rem 1.35rem; flex-wrap: wrap;
  padding: 0.65rem 1.25rem;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
body > nav .brand { margin-right: 0.5rem; }
body > nav .brand img { height: 1.5rem; display: block; }
body > nav .spacer { flex: 1; }
body > nav a {
  color: var(--muted); text-decoration: none;
  font-size: 0.875rem; font-weight: 500;
  padding: 0.3rem 0.1rem;
  /* Transparent border so plain links are the same height as the bordered
     Log in button — keeps the header height identical in both states. */
  border: 1px solid transparent;
  transition: color 0.15s ease;
}
body > nav a:hover { color: var(--fg); }
body > nav form { display: inline; }
body > nav button {
  /* "Log out" sits among the links: quiet, not a filled button. */
  background: none; border: none; color: var(--muted);
  font: inherit; font-size: 0.875rem; font-weight: 500;
  padding: 0.3rem 0.1rem; cursor: pointer; box-shadow: none;
}
body > nav button:hover { color: var(--late); background: none; }

/* User dropdown — native <details>, no JS. `display: flex` so the summary is
   a flex child (not baseline-aligned in a line box), which would seat it a
   sub-pixel high relative to the sibling nav links. */
.user-menu { position: relative; display: flex; align-items: center; }
.user-menu > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--muted); font-size: 0.875rem; font-weight: 500;
  /* Same padding + border as the nav links so the summary is exactly their
     height and the name shares their baseline. */
  padding: 0.3rem 0.1rem;
  border: 1px solid transparent;
}
.nav-avatar {
  /* Sized to the nav text's line box so it never makes the summary taller
     than the links. The ring is an inset shadow (no layout box) for the same
     reason — a real border would add 2px and reintroduce the misalignment. */
  width: 1.35rem; height: 1.35rem; border-radius: 50%; object-fit: cover;
  display: block; flex: none;
  box-shadow: inset 0 0 0 1px var(--border);
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary::after {
  content: "\25be"; /* ▾ */ font-size: 0.7em; line-height: 1;
}
.user-menu > summary:hover,
.user-menu[open] > summary { color: var(--fg); }
.user-menu-panel {
  position: absolute; right: 0; top: calc(100% + 0.45rem); z-index: 20;
  min-width: 10rem;
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.35rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-pop);
}
.user-menu-panel a,
.user-menu-panel button {
  display: block; width: 100%; text-align: left;
  padding: 0.5rem 0.6rem; border-radius: var(--r-ctl);
  background: none; border: none; box-shadow: none;
  color: var(--fg); font: inherit; font-size: 0.875rem; font-weight: 500;
  text-decoration: none; cursor: pointer;
}
.user-menu-panel a:hover,
.user-menu-panel button:hover { background: var(--subtle); color: var(--accent); }
.user-menu-panel form { display: block; }

/* ----- Page column ------------------------------------------------------- */
/* flex: 1 takes the vertical slack, keeping the footer at the bottom. */
main { flex: 1; max-width: 46rem; width: 100%; margin: 0 auto; padding: 2rem 1.25rem 2.5rem; }

/* ----- Type -------------------------------------------------------------- */
h1 {
  font-size: 1.6rem; font-weight: 650; line-height: 1.2;
  letter-spacing: -0.02em; margin: 0 0 0.4rem;
}
h2 {
  font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted);
  margin: 2rem 0 0.6rem;
}
.agenda-group h2 { margin-bottom: 0.5rem; }
.hint { color: var(--muted); font-size: 0.85rem; }
p.hint { margin-top: 0.2rem; }
a { color: var(--accent); }
hr { border: 0; border-top: 1px solid var(--divider); margin: 1.75rem 0; }

/* Dates and durations: quiet, tabular. */
time {
  font-size: 0.8rem; color: var(--muted);
  font-variant-numeric: tabular-nums; cursor: help;
}
.overdue { color: var(--late); font-weight: 600; }
/* Overdue stamps become soft red pills. */
time.overdue, span.overdue {
  display: inline-block;
  background: var(--late-soft); color: var(--late);
  border: 1px solid var(--late-border); border-radius: 999px;
  padding: 0.05rem 0.6rem; font-size: 0.75rem; font-weight: 600;
}

/* ----- Agenda ------------------------------------------------------------ */
/* Each group is a white card; entries are divided rows. */
ul.agenda {
  list-style: none; padding: 0; margin: 0.25rem 0 1rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
  overflow: hidden;
}
ul.agenda li {
  display: flex; align-items: center; gap: 0.4rem 0.75rem; flex-wrap: wrap;
  padding: 0.7rem 1rem;
  transition: background 0.15s ease;
}
ul.agenda li + li { border-top: 1px solid var(--divider); }
ul.agenda li:hover { background: var(--subtle); }
ul.agenda li > a {
  color: var(--fg); text-decoration: none; font-weight: 550;
}
ul.agenda li > a:hover { color: var(--accent); }
ul.agenda li time { margin-left: auto; }
ul.agenda li form { margin-left: auto; }
ul.agenda li time + form { margin-left: 0.35rem; }
/* Reserve the trailing action column so a suppressed "Done early" button
   (a task already done today) leaves the due date in place instead of
   letting it slide to the right edge. The empty span holds the column open;
   the button right-aligns within it. */
ul.agenda li .agenda-action {
  flex: 0 0 auto; min-width: 6rem;
  display: flex; align-items: center; justify-content: flex-end;
}
ul.agenda li time + .agenda-action { margin-left: 0.35rem; }
ul.agenda li.projected { color: var(--muted); background: var(--subtle); }
ul.agenda li.projected em { font-style: normal; font-weight: 450; }

/* Part-of-day: neutral pill badge. */
.pod-tag {
  display: inline-flex; align-items: center; gap: 0.3em;
  font-size: 0.72rem; font-weight: 500;
  color: var(--muted); background: var(--subtle);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.1rem 0.55rem; vertical-align: middle;
}
.pod-tag .icon { width: 0.95em; height: 0.95em; vertical-align: 0; }
.projected { color: var(--muted); }

/* Heading plus its status marker on one line. The h1 keeps its own bottom
   margin, so page spacing is unchanged from a bare <h1>. */
.page-head { display: flex; align-items: baseline; gap: 0.5rem; }

/* Live-agenda connection marker (#conn, beside the Agenda heading).
   Revealed by app.js only after the stream has been down for a few
   seconds, and deliberately quiet: the page still works, just not live. */
#conn {
  font-size: 0.7rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
  background: var(--subtle); border: 1px solid var(--border);
  border-radius: 999px; padding: 0.1rem 0.5rem;
}
#conn[hidden] { display: none; }

/* Kind glyph leading a task title in list rows. */
.cell-ico { color: var(--muted); margin-right: 0.4rem; }
.cell-ico .icon { width: 1.05em; height: 1.05em; }

.kind-chooser { list-style: none; padding-left: 0; }
.kind-chooser li {
  margin-bottom: 0.75rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.kind-chooser li:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-menu);
}
/* The whole card is one link. */
.kind-link {
  display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  padding: 1rem 1.15rem;
  color: inherit; text-decoration: none;
}
.kind-link:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-card); }
.kind-text { flex: 1; min-width: 14rem; }
.kind-text strong { font-size: 1.05rem; }
.kind-link:hover .kind-text strong { color: var(--accent); }
.kind-text p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.9rem; }

/* Little "row of calendar days" glyph distinguishing the task kinds. */
.kind-svg { width: 147px; height: 20px; flex: none; }
.cal-cell { fill: var(--card); stroke: var(--border); stroke-width: 1.5; }
.cal-cell.on { fill: var(--accent); stroke: var(--accent); }
.cal-cell.shade { fill: var(--accent-soft); stroke: var(--accent-soft); }
.cal-num { fill: var(--muted); font-size: 9px; font-weight: 600; font-family: var(--sans); }
.cal-num.on { fill: var(--on-accent); }

/* ----- Buttons ----------------------------------------------------------- */
button, .button {
  display: inline-block;
  font: inherit; font-size: 0.875rem; font-weight: 550;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--accent); border-radius: var(--r-ctl);
  background: var(--accent); color: var(--on-accent);
  cursor: pointer; text-decoration: none;
  box-shadow: var(--shadow-ctl);
  transition: background 0.15s ease, border-color 0.15s ease;
}
button:hover, .button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button:active, .button:active { transform: translateY(1px); }
/* Match the plain nav links' vertical padding so the header keeps the same
   height whether or not the Log in button is present (mobile included). */
body > nav a.button { color: var(--on-accent); padding: 0.3rem 0.9rem; }
body > nav a.button:hover { color: var(--on-accent); }
/* Lower-emphasis action (e.g. remove profile picture, cancel-ish things). */
button.secondary {
  background: var(--card); color: var(--fg); border-color: var(--border);
}
button.secondary:hover { background: var(--subtle); border-color: var(--border); }
.inline-form { display: inline; }
/* Row-level actions ("Done", "Delete") are compact. */
.inline-form button, td button { padding: 0.3rem 0.75rem; font-size: 0.8rem; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-ctl); }

/* ----- Forms ------------------------------------------------------------- */
/* Label hugs its own field: small bottom margin to the input, the larger top
   margin providing the gap BETWEEN field groups. Inputs add no top margin of
   their own, so the label→input gap is identical whether the input is a
   sibling of the label or wrapped inside it. */
label { display: block; margin: 1rem 0 0.35rem; font-size: 0.875rem; font-weight: 500; }
fieldset {
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: var(--card); padding: 0.85rem 1.1rem; margin: 1rem 0;
  box-shadow: var(--shadow-card);
}
legend {
  font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); padding: 0 0.4rem;
}
fieldset label { margin: 0.65rem 0; font-weight: 450; }
/* All text-like inputs. Enumerating types is fragile — adding an input of a
   new type (email, url, number, date...) would silently lose its styling —
   so exclude the types that must NOT be full-width blocks instead. File
   inputs are excluded so the far less specific rule below can be overridden
   (five :not()s here would otherwise outweigh it). */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]),
textarea,
select {
  display: block; width: 100%; max-width: 26rem; padding: 0.5rem 0.75rem;
  margin-top: 0;
  border: 1px solid var(--border); border-radius: var(--r-ctl); font: inherit;
  font-weight: 400;
  background: var(--card); color: var(--fg);
  box-shadow: var(--shadow-ctl);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input[type="file"] {
  display: block; width: 100%; max-width: 26rem; padding: 0.5rem 0.75rem;
  border: 1px solid var(--border); border-radius: var(--r-ctl); font: inherit;
  background: var(--card);
}
/* Inline controls inside radio/checkbox rows shouldn't become blocks. */
fieldset label input:not([type="checkbox"]):not([type="radio"]),
fieldset label select {
  display: inline-block; width: auto; margin-top: 0;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}
/* Style the native file input's button; keeps its "no file chosen" text,
   which is the only selection feedback available without JS. */
input[type="file"]::file-selector-button {
  margin-right: 0.75rem;
  font: inherit; font-size: 0.8rem; font-weight: 550;
  padding: 0.35rem 0.8rem; border: 1px solid var(--border);
  border-radius: var(--r-ctl);
  background: var(--card); color: var(--fg); cursor: pointer;
}
/* Browsers give <select> a grey UA background, which reads as "disabled"
   next to the genuinely read-only fields below. Editable means white. */
select { background: var(--card); }
/* Read-only fields (e.g. email) read as informational, not editable. The
   full :not() chain matches the general text-input selector's specificity so
   this actually wins (a plain `input[readonly]` loses to it and the field
   would render white — looking editable). border-color/box-shadow are pinned
   so a focused read-only field shows no active styling either. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"])[readonly] {
  background: var(--subtle); color: var(--muted);
  border-color: var(--border); box-shadow: none; cursor: default;
}

/* ----- Tables ------------------------------------------------------------ */
/* Tables are cards: separate borders let the radius clip cleanly. */
table {
  border-collapse: separate; border-spacing: 0; width: 100%; margin: 0.75rem 0;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
  overflow: hidden;
}
th, td { text-align: left; padding: 0.6rem 1rem; }
thead th {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
  background: var(--subtle); border-bottom: 1px solid var(--border);
}
tbody td { border-bottom: 1px solid var(--divider); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background 0.15s ease; }
tbody tr:hover { background: var(--subtle); }
td a { color: var(--fg); font-weight: 550; text-decoration: none; }
td a:hover { color: var(--accent); }
td form { display: inline; }

/* Below ~40rem, tables reflow into stacked cards: the header row is hidden
   and each cell prints its own label (from data-label). */
@media (max-width: 40rem) {
  table, tbody {
    display: block; background: none; border: 0; box-shadow: none;
    overflow: visible;
  }
  thead { display: none; }
  tr {
    display: block; margin: 0 0 0.8rem;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--r-card); box-shadow: var(--shadow-card);
    padding: 0.6rem 1rem;
  }
  td, tbody td { display: block; border-bottom: 0; padding: 0.3rem 0; }
  td[data-label]::before {
    content: attr(data-label);
    display: inline-block; min-width: 6.5rem;
    font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--muted);
  }
}

/* ----- Flash ------------------------------------------------------------- */
.flash {
  max-width: 46rem; margin: 1rem auto 0; padding: 0.65rem 1rem;
  border-radius: var(--r-ctl); border: 1px solid;
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  font-size: 0.875rem; font-weight: 500;
  width: calc(100% - 2rem);
  box-shadow: var(--shadow-card);
}
.flash-success { background: var(--ok-bg); color: var(--ok-fg); border-color: var(--ok-border); }
.flash-error { background: var(--err-bg); color: var(--err-fg); border-color: var(--err-border); }
/* Every flash fades in on render (opacity only — the box keeps its space so
   nothing below shifts). Success flashes (e.g. "Done") then auto-dismiss:
   hold briefly, then fade out. Errors stay put so a failure is never missed. */
.flash { animation: flash-in 0.18s ease both; }
.flash-success {
  animation: flash-in 0.18s ease both, flash-dismiss 0.6s ease 5s forwards;
}
@keyframes flash-in { from { opacity: 0; } }
@keyframes flash-dismiss {
  to { opacity: 0; pointer-events: none; }
}
.flash .icon { width: 1.15em; height: 1.15em; }
.flash-text { flex: 1; min-width: 0; }
.flash form { margin-left: auto; }
.flash button {
  background: transparent; color: inherit; border: 1px solid currentColor;
  box-shadow: none; padding: 0.25rem 0.7rem; font-size: 0.8rem;
}
.flash button:hover { background: var(--overlay-hover); border-color: currentColor; }

/* ----- Pagination -------------------------------------------------------- */
/* Keyset pagination controls: Newer left, Older right. */
.pagination {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 1rem; font-size: 0.85rem; font-weight: 500;
}
.pagination a { color: var(--muted); text-decoration: none; }
.pagination a:hover { color: var(--accent); }
/* Keep "Older" on the right even when "Newer" is absent. */
.pagination a[rel="next"]:only-child { margin-left: auto; }

/* ----- Profile / avatar -------------------------------------------------- */
.avatar {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--card); box-shadow: var(--shadow-card);
}
/* Profile picture block: image beside its actions. */
.avatar-row { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.5rem; }
.avatar-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.field-label { font-size: 0.875rem; font-weight: 600; }
.avatar-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.avatar-form label { margin: 0; }
/* Enhanced state (app.js sets .js): the file input becomes a styled label
   and the choice is applied immediately, so the explicit Upload button is
   unnecessary. Without JS the native input + Upload button are shown, and
   the flow still works — just with an extra click. */
.avatar-picker { display: none; }
.js .avatar-picker { display: inline-block; }
.js .avatar-form input[type="file"] {
  /* Visually hidden, still focusable/labelable. */
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.js .avatar-form .avatar-submit { display: none; }

/* ----- Footer ------------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--border); margin-top: 2rem;
  padding: 0.85rem 1.25rem; font-size: 0.8rem; color: var(--muted);
  background: var(--card);
}
.site-footer .footer-inner {
  max-width: 46rem; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem;
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }

/* ----- Landing ----------------------------------------------------------- */
.hero-title { font-size: 2.4rem; font-weight: 700; margin-top: 2rem; letter-spacing: -0.03em; }
.hero-lede { font-size: 1.1rem; color: var(--muted); max-width: 34rem; }
.promise {
  list-style: none; padding: 0.35rem 0; max-width: 36rem; margin: 1.25rem 0;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.promise li { padding: 0.6rem 1.1rem 0.6rem 2.6rem; position: relative; }
.promise li + li { border-top: 1px solid var(--divider); }
.promise li::before {
  content: "✓";
  position: absolute; left: 1rem; top: 0.62rem;
  width: 1.15rem; height: 1.15rem; line-height: 1.15rem; text-align: center;
  font-size: 0.7rem; font-weight: 700;
  color: var(--accent); background: var(--accent-soft); border-radius: 999px;
}

/* ----- Task detail ------------------------------------------------------- */
.detail-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.4rem 0 0.5rem; }
.badge {
  display: inline-flex; align-items: center; gap: 0.3em;
  font-size: 0.75rem; font-weight: 550;
  padding: 0.2rem 0.6rem; border-radius: 999px;
  background: var(--subtle); color: var(--muted); border: 1px solid var(--border);
}
.badge .icon { width: 0.95em; height: 0.95em; }
.badge-kind,
.badge-status.is-active {
  background: var(--accent-soft); color: var(--accent); border-color: transparent;
}
.badge-status.is-paused {
  background: var(--warn-soft); color: var(--warn-fg); border-color: transparent;
}
.badge-status.is-archived { background: var(--subtle); color: var(--muted); }
.rule-line { color: var(--muted); margin: 0.1rem 0 0.4rem; }
.detail-desc { margin: 0.5rem 0 0; }

/* Prominent "next due" strip with a left accent bar. */
.due-banner {
  display: flex; align-items: baseline; gap: 0.2rem 0.75rem; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
  padding: 0.9rem 1.15rem; margin: 1.25rem 0;
}
.due-label {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
}
.due-value { font-size: 1.3rem; font-weight: 650; letter-spacing: -0.01em; }
.due-banner.is-overdue { border-left-color: var(--late); background: var(--late-soft); }
.due-banner.is-overdue .due-value { color: var(--late); }
.due-banner.is-none { border-left-color: var(--border); }
.due-banner.is-none .due-value { color: var(--muted); }

/* Complete form, carded with a comfortable gap between input and button. */
.complete-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
  padding: 1.1rem 1.25rem; margin: 1.25rem 0;
}
.complete-card label { margin: 0; }
.complete-card .date-row {
  display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
  margin-top: 0.45rem;
}
.complete-card .date-row input[type="date"] {
  width: auto; margin-top: 0; flex: 0 1 15rem;
}
.complete-card .date-row button { flex: none; }
.complete-card .hint { margin: 0.7rem 0 0; }

.detail-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 1.25rem 0; }
.paused-note { margin: 1rem 0; }

/* ----- Time away --------------------------------------------------------- */
/* Reusable carded form/well. */
.panel {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
  padding: 1rem 1.25rem 1.15rem; margin: 0.5rem 0 1rem;
}
.panel > label:first-of-type,
.panel > fieldset:first-of-type { margin-top: 0.25rem; }

/* Save/Cancel (and similar) grouped with a comfortable gap. */
.form-actions {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.1rem;
}
.form-actions button { margin-top: 0; }
.form-actions a { font-weight: 500; }

/* Login: a compact centered card rather than a full-width form. */
.login-panel { max-width: 24rem; }

/* At-a-glance "are you away right now?" banner. */
.away-status {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1.15rem; margin: 0.75rem 0 1.5rem;
  background: var(--card); border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-card); box-shadow: var(--shadow-card);
}
.away-status .away-icon { width: 1.5rem; height: 1.5rem; flex: none; }
.away-status strong { display: block; }
.away-status .hint { display: block; }
.away-status.is-away { border-left-color: var(--warn-fg); background: var(--warn-soft); }
.away-status.is-away .away-icon { color: var(--warn-fg); }
.away-status.is-home .away-icon { color: var(--accent); }

/* Period-state row badges (reusing the pill .badge). */
.badge.is-current { background: var(--warn-soft); color: var(--warn-fg); border-color: transparent; }
.badge.is-upcoming { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.badge.is-past { background: var(--subtle); color: var(--muted); }

/* Highlight the row (or card) covering today. */
tr.row-current td { background: var(--warn-soft); }

/* Space out inline row actions so "Edit" doesn't touch "Delete". */
.row-actions { white-space: nowrap; }
.row-actions a { margin-right: 0.85rem; }

/* ----- Small screens ----------------------------------------------------- */
@media (max-width: 40rem) {
  h1 { font-size: 1.35rem; }
  .due-value { font-size: 1.15rem; }
  /* Card layout: mark the current period with an amber edge instead of a
     cell background (cells are full-width blocks here). */
  tr.row-current { border-left: 3px solid var(--warn-fg); }
  tr.row-current td { background: none; }
  .row-actions a { display: inline-block; margin: 0.3rem 0.85rem 0 0; }
  .hero-title { font-size: 1.8rem; }
  main { padding: 1.25rem 1rem 1.5rem; }
  body > nav { gap: 0.25rem 1rem; padding: 0.6rem 1rem; }
  /* Save header width: show only the avatar, but keep the name for screen
     readers (visually hidden, not removed). */
  .user-menu .nav-name {
    position: absolute; width: 1px; height: 1px;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
  /* Comfortable thumb targets. */
  button, .button { padding: 0.6rem 1rem; }
  .inline-form button, td button { padding: 0.45rem 0.85rem; }
  /* Agenda entries: title on its own line, badge + action beneath. */
  ul.agenda li > a { flex: 1 0 100%; }
  ul.agenda li time { margin-left: 0; }
  ul.agenda li form, ul.agenda li time + form,
  ul.agenda li .agenda-action, ul.agenda li time + .agenda-action {
    margin-left: auto;
  }
}