/* Smooth anchor scrolling — for TOC links on the lists page */
html { scroll-behavior: smooth; }

/*
 * dashboard/style.css — PKA Dashboard
 * Pixel — Frontend Design Engineer — 2026-07-07
 *
 * Visual refresh (2026-07-07 pm): warm oat canvas (--bg), card-elevated
 * sections (white surface + hairline warm border + soft --shadow-card),
 * more generous spacing. Home page only; inner pages inherit token changes.
 *
 * Token additions over house baseline: --ink-800, --ink-400, --card-border, --shadow-card
 * Fixes over Stack's skeleton:
 *   - .daily-pips display: flex (not block) when has-session
 *   - .pigeons-section margin dedup
 *   - list-link text-decoration suppressed
 *   - .pigeon-item duplicate color removed
 *   - .dash-header-left defined
 *   - gate page section complete
 *   - ::selection, :focus-visible, prefers-reduced-motion added
 *   - fadeUp entrance on .dashboard and .gate-card
 *   - #featuredListsContainer spacing from inbox
 *   - .modal-select custom dropdown arrow
 */

/* ============================================================
   TOKENS
   ============================================================ */

:root {
  /* Neutral — warm stone */
  --ink-900: #18160f;
  --ink-800: #28251d;   /* primary navigable text — between 900 and 700 */
  --ink-700: #38342a;
  --ink-500: #6b6558;
  --ink-400: #8c867b;   /* metadata, dates, secondary annotations */
  --ink-300: #aea89e;
  --ink-200: #ccc8be;   /* mid step — used for vertical dividers, subtle separators */
  --ink-100: #e4e0d8;
  --ink-050: #f2efea;
  --bg:      #efe9dd;   /* warm oat canvas — deeper, warmer than the old near-white so white cards lift off it */
  --bg-card: #ffffff;
  --card-border: #e8e1d4;  /* warm hairline for card edges */

  /* Accent — Dusk */
  --accent-bg:     #eef1f6;
  --accent-border: #8aa0c4;
  --accent-text:   #33456b;
  --accent:        #4f6699;
  --accent-strong: #3d5488;
  --accent-ring:   rgba(79, 102, 153, 0.14);

  /* Done — Sage */
  --done-bg:     #eaf2eb;
  --done-border: #7aaa7e;
  --done-text:   #2a5c30;
  --done:        #5a9960;

  /* --danger is not yet in :root; used as var(--danger, #c0392b) with fallback. */

  /* Shortcut-card rainbow — gentle warm-desaturated washes, green → yellow.
     Each card carries a resting tint, a hairline border a step deeper, and a
     hover tint deeper still so hover keeps the card's own colour identity
     rather than snapping to the accent. Ink stays dark on all six. */
  --tint-green:         #e8f0e4;
  --tint-green-border:  #d3e2cc;
  --tint-green-hover:   #dfebd9;
  --tint-blue:          #e7edf5;
  --tint-blue-border:   #d3ddec;
  --tint-blue-hover:    #dbe4f0;
  --tint-purple:        #efe9f4;
  --tint-purple-border: #ddd2e6;
  --tint-purple-hover:  #e7dff0;
  --tint-red:           #f6e9e6;
  --tint-red-border:    #e8d2cb;
  --tint-red-hover:     #f0ded9;
  --tint-orange:        #f7ede1;
  --tint-orange-border: #ecd8bf;
  --tint-orange-hover:  #f2e4d0;
  --tint-yellow:        #f5f0d8;
  --tint-yellow-border: #e8dfb0;
  --tint-yellow-hover:  #ede8c8;

  /* Type */
  --font-sans:  -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-mono:  "SF Mono", "Fira Mono", "Cascadia Code", monospace;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.75rem;

  /* Radius */
  --radius-sm:   8px;
  --radius:      12px;
  --radius-pill: 999px;

  /* Elevation */
  --shadow-card: 0 1px 2px rgba(50, 42, 28, 0.04),
                 0 3px 10px rgba(50, 42, 28, 0.05);

  /* Dashboard layout */
  --dash-max-width:         1080px;
  --dash-padding-x:         40px;
  --dash-col-gap:           24px;
  --dash-section-gap:       44px;
  --dash-section-inner-gap: 20px;
}

/* ============================================================
   BASE RESET
   ============================================================ */

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

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--ink-900);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

ul, ol { list-style: none; margin: 0; padding: 0; }

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

button { font-family: inherit; cursor: pointer; }

::selection {
  background: var(--accent-bg);
  color: var(--accent-text);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Named separately so modals can be adjusted independently */
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

/* ============================================================
   SHIMMER SKELETON
   ============================================================ */

.skel {
  background: linear-gradient(
    90deg,
    var(--ink-100) 25%,
    var(--ink-050) 50%,
    var(--ink-100) 75%
  );
  background-size: 400px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
  display: inline-block;
}

/* ============================================================
   UTILITIES
   ============================================================ */

.hidden { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ============================================================
   SHARED BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.9375rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1.5px solid transparent;
  font-family: inherit;
  transition: background 0.15s var(--ease-out),
              border-color 0.15s var(--ease-out),
              opacity 0.15s;
}

.btn.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
@media (hover: hover) {
  .btn.btn-primary:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
  }
}
.btn.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.btn.btn-ghost {
  background: transparent;
  color: var(--ink-500);
  border-color: var(--ink-100);
}
@media (hover: hover) {
  .btn.btn-ghost:hover {
    background: var(--ink-050);
    border-color: var(--ink-300);
    color: var(--ink-700);
  }
}
.btn.btn-ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ============================================================
   GATE PAGE — /dashboard/index.html
   ============================================================ */

.gate-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.gate-card {
  background: var(--bg-card);
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 360px;
  width: 100%;
  animation: fadeUp 0.22s var(--ease-out) both;
}

/* Full-width primary button on gate page */
.gate-card .btn.btn-primary { width: 100%; }

.gate-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: normal;
  color: var(--ink-900);
  margin: 0 0 4px;
}

.gate-sub {
  font-size: 0.875rem;
  color: var(--ink-400);
  margin: 0 0 24px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.field-input {
  padding: 12px 14px;
  font-size: 1rem;
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-sm);
  width: 100%;
  background: var(--bg-card);
  font-family: inherit;
  color: var(--ink-900);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.field-input:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.field-input::placeholder { color: var(--ink-300); }

.gate-hint {
  font-size: 0.875rem;
  color: var(--ink-500);
  margin-top: 10px;
  min-height: 1.2em;
  text-align: center;
}
.gate-hint.is-error { color: #a85030; }

/* ============================================================
   PAGE SHELL — LAYOUT
   ============================================================ */

.dashboard {
  max-width: var(--dash-max-width);
  margin: 0 auto;
  padding: 40px var(--dash-padding-x) 60px;
  animation: fadeUp 0.28s var(--ease-out) both;
}

/* Zone A — Header */
.dash-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--dash-col-gap);
  margin-bottom: var(--dash-section-gap);
}

.dash-header-left {
  flex: 1;
  min-width: 0;
}

.dash-header-cards {
  display: grid;
  grid-template-columns: 193px 193px;
  gap: var(--dash-col-gap);
  width: 410px;
  flex-shrink: 0;
  align-items: stretch;
  margin-left: auto;
}


/* ─── Phone Tag widget ──────────────────────────────────────────────────────
   Shares the same card shell as .daily-widget (padding, border, radius,
   shadow — applied via .daily-widget class on the element in HTML).
   Only the interior components are bespoke.
   ─────────────────────────────────────────────────────────────────────────── */
.phone-tag-widget {
  /* Card shell is handled by .daily-widget — no duplicate box model here */
  display: flex;
  flex-direction: column;
}

.phone-tag-label {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-300);
  margin-bottom: 10px;
}

.phone-tag-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 1px 0;
}

.phone-tag-row + .phone-tag-row {
  border-top: 1px solid var(--card-border);
}

.phone-tag-cb {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--accent, #4f6699);
  margin: 0;
}

.phone-tag-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-sans, -apple-system, sans-serif);
  font-size: 0.8125rem;
  color: var(--ink-900, #18160f);
  padding: 0;
  line-height: 1.4;
}

.phone-tag-input::placeholder {
  color: var(--ink-100, #e4e0d8);
}

.phone-tag-input:focus-visible {
  outline: none; /* inline; no visible ring — card context is tight */
}

.phone-tag-age {
  font-size: 0.6875rem;
  color: var(--ink-300, #aea89e);
  flex-shrink: 0;
  white-space: nowrap;
  /* Hidden until the row has saved content — JS toggles visibility */
  visibility: hidden;
  font-variant-numeric: tabular-nums;
}

.dash-greeting {
  font-family: var(--font-serif);
  font-size: 1.875rem;
  font-weight: normal;
  color: var(--ink-900);
  margin: 0 0 6px;
}

.dash-date {
  font-size: 0.875rem;
  color: var(--ink-400);
  margin: 0;
}

/* ── Date + Week pill inline row ── */
/* Outer wrapper — flex-column, sized to its content so the hr below
   aligns with the right edge of the week button rather than the full
   column width. fit-content resolves to the widest child (the inline row). */
.dash-date-week-row {
  display: inline-flex;
  flex-direction: column;
  margin-top: 4px;
}

/* Inner side-by-side row: date | divider | week pill */
.dash-date-week-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Vertical hairline between date and week button */
.dash-date-week-divider {
  display: block;
  width: 1px;
  height: 1em;
  background: var(--ink-200);
  flex-shrink: 0;
}

/* Horizontal rule — sits inside the fit-content wrapper so its 100% width
   resolves to the inline row's width, not the full column. */
.dash-header-rule {
  border: none;
  border-top: 1px solid var(--ink-100);
  margin: 10px 0 10px;
  width: 100%;
}

/* ── Stacked nav inside header-left ── */
.dash-header-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dash-header-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  color: var(--ink-400);
  text-decoration: none;
  padding: 3px 4px;
  border-radius: 5px;
  transition: color 0.12s, background 0.12s;
  line-height: 1.4;
}
@media (hover: hover) {
  .dash-header-nav-link:hover {
    color: var(--accent);
    background: var(--accent-bg);
    text-decoration: none;
  }
}

/* Scale the SVG icons in the stacked nav to match the 0.8125rem text */
.dash-header-nav-link .browse-nav-icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Zone B — Quick actions strip */
.dash-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 14px 16px;
  margin: 0 0 var(--dash-section-gap);
}

/*
 * Six shortcut cards spanning the full width of the white strip.
 * display: grid (not inline-grid) so the grid stretches to the container
 * edge; 1fr tracks share the available space equally so all cards are
 * identical width regardless of label length.
 */
.dash-actions-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  width: 100%;
}

.dash-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 100px;
  padding: 12px 16px;
  /* Rainbow tint, per-card via :nth-child below; falls back to the warm
     off-white if a card carries no tint. */
  background: var(--card-tint, var(--ink-050));
  border: 1.5px solid var(--card-tint-border, var(--ink-100));
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s var(--ease-out),
              border-color 0.15s var(--ease-out);
  font-family: var(--font-sans);
}
@media (hover: hover) {
  .dash-action-btn:hover {
    background: var(--card-tint-hover, var(--accent-bg));
    border-color: var(--card-tint-border, var(--accent-border));
  }
}
.dash-action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Rainbow order: green → blue → purple → red → orange → yellow.
   Inbox · Quick note · New task · New note · Add expense · Add resource */
.dash-actions-grid .dash-action-btn:nth-child(1) {
  --card-tint: var(--tint-green);
  --card-tint-border: var(--tint-green-border);
  --card-tint-hover: var(--tint-green-hover);
}
.dash-actions-grid .dash-action-btn:nth-child(2) {
  --card-tint: var(--tint-blue);
  --card-tint-border: var(--tint-blue-border);
  --card-tint-hover: var(--tint-blue-hover);
}
.dash-actions-grid .dash-action-btn:nth-child(3) {
  --card-tint: var(--tint-purple);
  --card-tint-border: var(--tint-purple-border);
  --card-tint-hover: var(--tint-purple-hover);
}
.dash-actions-grid .dash-action-btn:nth-child(4) {
  --card-tint: var(--tint-red);
  --card-tint-border: var(--tint-red-border);
  --card-tint-hover: var(--tint-red-hover);
}
.dash-actions-grid .dash-action-btn:nth-child(5) {
  --card-tint: var(--tint-orange);
  --card-tint-border: var(--tint-orange-border);
  --card-tint-hover: var(--tint-orange-hover);
}
.dash-actions-grid .dash-action-btn:nth-child(6) {
  --card-tint: var(--tint-yellow);
  --card-tint-border: var(--tint-yellow-border);
  --card-tint-hover: var(--tint-yellow-hover);
}

/* Inbox status dot — absolute-positioned indicator in top-right corner.
   The button already has position: relative via .dash-action-btn (see below).
   .dot-green = inbox clear, .dot-red = items need attention. */
.dash-action-btn {
  position: relative;
}
.inbox-status-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--card-tint, var(--ink-050));
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.inbox-status-dot.dot-green {
  background: var(--done, #5a9960);
  border-color: var(--done-border, #7aaa7e);
}
.inbox-status-dot.dot-red {
  background: var(--danger, #c0392b);
  border-color: #a0312a;
}

/* Dark ink so the icon reads on every tint; stroke-drawn for even, thin
   visual weight — one viewBox + one stroke-width across all five. */
.dash-action-glyph {
  color: var(--ink-700);
  line-height: 0;
}
.dash-action-glyph svg {
  display: block;
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dash-action-label {
  font-size: 0.75rem;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1;
}

/* Zone C — Primary two-column (58 / 42) — matches Zone D proportions so
   Areas aligns with Calendar and Jump+Pigeons aligns with Deadlines */
.dash-main {
  display: grid;
  grid-template-columns: 58fr 42fr;
  gap: var(--dash-col-gap);
  margin-bottom: var(--dash-section-gap);
}

.dash-col-primary   { min-width: 0; }  /* Areas column */
.dash-col-secondary { min-width: 0; }  /* Jump + Pigeons column */

/* Zone D — Calendar row (58 / 42) */
.dash-lower {
  display: grid;
  grid-template-columns: 58fr 42fr;
  gap: var(--dash-col-gap);
}

.dash-col-calendar  { min-width: 0; }  /* Calendar column */
.dash-col-reference { min-width: 0; }  /* Deadlines + Lists column */

/* Every dashboard section is a card — a white surface lifted off the warm
   oat canvas by a hairline warm border and a soft shadow. This is the
   primary mechanism giving each section its own visual footprint. */
.dash-section,
.quick-list {
  background: var(--bg-card);
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px;
}

/* Generic section spacing — gap between stacked cards in a column */
.dash-section + .dash-section {
  margin-top: var(--dash-section-inner-gap);
}

/* Section label — all-caps 11px above every component */
.dash-section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-300);
  margin: 0 0 10px;
}

/* ============================================================
   DAILY WIDGET
   ============================================================ */

.daily-widget {
  min-width: 0;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--card-border);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}

.daily-widget-label {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-300);
  margin-bottom: 8px;
}

/* Idle elements — hidden by default, shown when NOT has-session */
.daily-widget .daily-widget-idle,
.daily-widget .daily-idle-link {
  display: none;
}
.daily-widget:not(.has-session) .daily-widget-idle,
.daily-widget:not(.has-session) .daily-idle-link {
  display: block;
}

/* Note: .daily-widget-session-name, .daily-pips, .daily-widget-activity, and
   .daily-session-link visibility is managed by the three-state widget architecture
   (.hidden class on .daily-state containers). No has-session gating needed here. */

.daily-widget-idle {
  font-size: 0.875rem;
  color: var(--ink-500);
  margin: 0 0 8px;
}

.daily-idle-link,
.daily-session-link {
  font-size: 0.875rem;
  /* color comes from base a { color: var(--accent) } */
}

/* Day-type name chip — contextual metadata, visually subordinate to activity title */
.daily-widget-session-name {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink-400);
  background: var(--ink-050);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  margin: 0 0 8px;
  line-height: 1.5;
}

.daily-pips {
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.daily-pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.daily-pip.is-done     { background: var(--done); }
.daily-pip.is-current  { background: var(--accent); }
.daily-pip.is-upcoming { background: var(--ink-100); }

.daily-widget-step {
  font-size: 0.8125rem;
  color: var(--ink-400);
  margin-left: 6px;
}

.daily-widget-activity {
  font-size: 0.875rem;
  color: var(--ink-500);
  margin: 0 0 8px;
}

/* ── New three-state widget elements ─────────────────────────────────────── */

.daily-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.daily-widget-header .daily-widget-label {
  margin-bottom: 0;
}
.daily-widget-dots-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--ink-300);
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
@media (hover: hover) {
  .daily-widget-dots-btn:hover {
    background: var(--ink-050);
    color: var(--ink-700);
  }
}

/* State containers */
.daily-state { }

/* Idle state */
.daily-widget-idle-text {
  font-size: 0.875rem;
  color: var(--ink-500);
  margin: 0 0 10px;
}
.daily-idle-cta {
  font-size: 0.875rem;
  /* inherits accent color from base a */
}

/* Active state */
.daily-widget-activity-block { margin: 4px 0 10px; }
.daily-widget-activity-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-300);
  margin: 0 0 2px;
}
.daily-widget-activity {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--ink-900);
  margin: 0;
}

.daily-widget-progress-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}
.daily-widget-step {
  font-size: 0.75rem;
  color: var(--ink-400);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* Bar-mode progress (> 10 activities) */
.daily-widget-bar-track {
  flex: 1;
  height: 5px;
  background: var(--ink-100);
  border-radius: 999px;
  overflow: hidden;
}
.daily-widget-bar-fill {
  height: 100%;
  background: var(--done, #5a9960);
  border-radius: 999px;
  transition: width 0.3s;
}

/* Timer row */
.daily-widget-timer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  min-height: 28px;
}
.daily-widget-begin-btn {
  font-size: 0.8125rem;
  font-family: inherit;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid var(--accent-border, #8aa0c4);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.12s;
}
@media (hover: hover) {
  .daily-widget-begin-btn:hover { background: var(--accent-bg); }
}
.daily-widget-timer {
  font-family: 'SF Mono', 'Fira Mono', monospace;
  font-size: 1rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  flex: 1;
}
.daily-widget-timer.is-overrun { color: var(--ink-300); }

/* Pause/play button — sits after the timer display */
.daily-widget-pause-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--ink-100);
  background: transparent;
  color: var(--ink-400);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  padding: 0;
}
@media (hover: hover) {
  .daily-widget-pause-btn:hover {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent-border);
  }
}

/* Next button */
.daily-widget-actions { }
.daily-widget-next-btn {
  font-size: 0.8125rem;
  font-family: inherit;
  padding: 6px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--accent, #4f6699);
  background: var(--accent, #4f6699);
  color: #fff;
  cursor: pointer;
  width: 100%;
  transition: background 0.12s;
}
@media (hover: hover) {
  .daily-widget-next-btn:hover { background: #3d5488; border-color: #3d5488; }
}
.daily-widget-next-btn:disabled { opacity: 0.6; cursor: default; }

/* Done state */
.daily-state-done {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.daily-done-mark { margin-bottom: 4px; }
.daily-done-title {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--ink-900);
  margin: 0;
}
.daily-done-summary {
  font-size: 0.8125rem;
  color: var(--ink-400);
  margin: 0 0 6px;
}

/* ============================================================
   AREAS LIST
   ============================================================ */

.areas-list { }

.area-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
@media (hover: hover) {
  .area-item:hover {
    background: var(--ink-050);
    text-decoration: none;
  }
}

.area-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--area-color, var(--ink-100));
}

.area-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--area-color, var(--ink-400));
  display: flex;
  align-items: center;
  justify-content: center;
}
.area-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.area-name {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--ink-800);
  min-width: 0;
}

.area-meta {
  font-size: 0.8125rem;
  color: var(--ink-300);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.area-empty {
  font-size: 0.875rem;
  color: var(--ink-300);
  padding: 10px 12px;
}

/* Skeleton state — .skel children do the shimmer work */
.area-item.is-loading {
  cursor: default;
  pointer-events: none;
  gap: 10px;
}

/* ============================================================
   JUMP BACK INTO
   ============================================================ */

.jump-list { }

.jump-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
@media (hover: hover) {
  .jump-item:hover {
    background: var(--ink-050);
    text-decoration: none;
  }
}

.jump-name {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--ink-800);
  min-width: 0;
}

.jump-area-tag {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--ink-050);
  color: var(--ink-500);
  border: 1px solid var(--ink-100);
  white-space: nowrap;
  flex-shrink: 0;
}

.jump-recency {
  font-size: 0.8125rem;
  color: var(--ink-300);
  white-space: nowrap;
  flex-shrink: 0;
}

.jump-empty {
  font-size: 0.875rem;
  color: var(--ink-300);
  padding: 10px 12px;
}

/* ============================================================
   ACTIVE PIGEONS
   ============================================================ */

/*
 * .pigeons-section is also .dash-section — the adjacent-sibling rule
 * .dash-section + .dash-section handles margin-top at specificity 0,2,0.
 * We only add the visual separator here (border-top + padding-top).
 */
/* Pigeons is now its own card, so the old border-top/padding-top separator
   (needed only when sections were transparent) is no longer required. */
.pigeons-section { }

.pigeons-list { }

.pigeon-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  color: var(--ink-700);
  font-size: 0.9375rem;
  transition: background 0.12s;
}
@media (hover: hover) {
  .pigeon-item:hover {
    background: var(--ink-050);
    text-decoration: none;
  }
}

.pigeon-bullet {
  color: var(--ink-300);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.pigeon-empty {
  font-size: 0.875rem;
  color: var(--ink-300);
  padding: 8px 12px;
}

/* ============================================================
   CALENDAR
   ============================================================ */

.cal { }

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.cal-nav-btn {
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--ink-300);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color 0.12s, background 0.12s;
  line-height: 1;
}
@media (hover: hover) {
  .cal-nav-btn:hover {
    color: var(--ink-700);
    background: var(--ink-050);
  }
}
.cal-nav-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.cal-month-label {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--ink-800);
  font-weight: normal;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--ink-100);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-sm);
  /* overflow: hidden removed — required so absolute-positioned tooltips
     can escape the grid boundary. Minor trade-off: corner cells lose
     the border-radius clip on their backgrounds. */
  overflow: visible;
}

.cal-weekday {
  font-size: 0.6875rem;
  text-transform: uppercase;
  color: var(--ink-300);
  text-align: center;
  padding: 6px 0;
  background: var(--bg);
  letter-spacing: 0.04em;
}

.cal-day {
  background: var(--bg-card);
  height: 52px;          /* fixed — content never stretches cells */
  padding: 6px;
  position: relative;
  overflow: visible;     /* allow tooltip to escape cell bounds */
}

.cal-day-num {
  font-size: 0.8125rem;
  color: var(--ink-500);
  line-height: 1;
  display: block;
  font-variant-numeric: tabular-nums;
}

.cal-day.is-today { background: var(--accent-bg); }
.cal-day.is-today .cal-day-num {
  color: var(--accent);
  font-weight: 500;
}

.cal-day.is-weekend .cal-day-num    { color: var(--ink-300); }
.cal-day.is-other-month .cal-day-num { color: var(--ink-100); }

.cal-events {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

.cal-event {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.625rem;
  color: var(--ink-500);
  line-height: 1.2;
  overflow: hidden;
}

.cal-event-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.cal-event.is-task      .cal-event-dot { background: var(--ink-300); }
.cal-event.is-goal      .cal-event-dot { background: var(--accent); }
.cal-event.is-milestone .cal-event-dot { background: var(--done); }
.cal-event.is-calendar  .cal-event-dot { background: var(--ink-500); }
.cal-event.is-past { opacity: 0.4; }

.cal-event-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-overflow {
  font-size: 0.625rem;
  color: var(--ink-300);
  padding-left: 9px; /* indent to clear dot + gap */
}

/* ============================================================
   CALENDAR — dots + tooltip (replaces inline event text)
   ============================================================ */

.cal-dots {
  display: flex;
  justify-content: center;
  gap: 3px;
  margin-top: 5px;
}

.cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}

/* Tooltip: hidden by default, shown on cell hover via pure CSS */
.cal-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card, #faf8f4);
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-sm, 6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
  padding: 6px 10px;
  min-width: 130px;
  max-width: 210px;
  z-index: 20;
  pointer-events: none;
}

@media (hover: hover) {
  .cal-day:hover .cal-tooltip {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
}

.cal-tooltip-item {
  font-size: 0.75rem;
  color: var(--ink-700);
  line-height: 1.4;
  font-family: var(--font-sans);
  display: flex;
  flex-direction: column;
}

.cal-tooltip-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-tooltip-parent {
  font-size: 0.68rem;
  color: var(--ink-300, #bbb);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

/* ============================================================
   DEADLINES
   ============================================================ */

.deadlines-list { }

.deadline-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-050);
}
.deadline-item:last-child { border-bottom: none; }

.deadline-row-primary {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.deadline-date {
  font-size: 0.75rem;
  color: var(--ink-300);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 3.5em;
}

.deadline-name {
  font-size: 0.9375rem;
  color: var(--ink-800);
  flex: 1;
  min-width: 0;
}
.deadline-name-link {
  color: inherit;
  text-decoration: none;
}
@media (hover: hover) {
  .deadline-name-link:hover {
    text-decoration: underline;
  }
}

.deadline-type {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--ink-050);
  border: 1px solid var(--ink-100);
  white-space: nowrap;
  flex-shrink: 0;
}
.deadline-type.is-task      { color: var(--ink-500); }
.deadline-type.is-goal      { color: var(--accent-text); background: var(--accent-bg); border-color: var(--accent-border); }
.deadline-type.is-milestone { color: var(--done-text);   background: var(--done-bg);   border-color: var(--done-border); }

.deadline-parent-inline {
  font-size: 0.75rem;
  color: var(--ink-300);
  font-weight: 400;
}
.deadline-parent-label {
  color: var(--ink-400);
  font-weight: 500;
}

.deadline-item.is-urgent  .deadline-name { color: var(--accent-text); }
.deadline-item.is-overdue .deadline-name { color: var(--ink-900); font-weight: 500; }

.deadlines-empty {
  font-size: 0.875rem;
  color: var(--ink-300);
  padding: 10px 0;
}

/* ============================================================
   QUICK LISTS
   ============================================================ */

.quick-lists {
  margin-top: var(--dash-section-inner-gap);
}

.quick-list {
  margin-top: var(--dash-section-inner-gap);
}
.quick-list:first-child { margin-top: 0; }

/*
 * The featured lists container (#featuredListsContainer) is a plain div,
 * not a .quick-list, so it needs its own spacing from the inbox above it.
 */
#featuredListsContainer:not(:empty) {
  margin-top: var(--dash-section-inner-gap);
}

.quick-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.quick-list-name {
  font-size: 0.875rem;
  color: var(--ink-700);
  font-weight: 500;
}

.quick-list-count {
  font-size: 0.6875rem;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--ink-050);
  color: var(--ink-400);
  border: 1px solid var(--ink-100);
  font-variant-numeric: tabular-nums;
}

.quick-list-items { }

.quick-list-item {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 0;
  font-size: 0.875rem;
  color: var(--ink-700);
}

.quick-list-item-bullet {
  color: var(--ink-100);
  font-size: 0.875rem;
  line-height: 1.4;
  flex-shrink: 0;
}

.quick-list-item-title {
  flex: 1;
  min-width: 0;
}

.quick-list-more {
  font-size: 0.8125rem;
  color: var(--ink-300);
  display: block;
  margin-top: 6px;
  text-decoration: none;
}
@media (hover: hover) {
  .quick-list-more:hover {
    color: var(--accent);
    text-decoration: none;
  }
}


.quick-list-empty {
  font-size: 0.875rem;
  color: var(--ink-300);
  padding: 5px 0;
}

/* ============================================================
   MODALS
   ============================================================ */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.28);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.is-open {
  display: flex;
}

.modal {
  background: var(--bg-card);
  border-radius: 14px;
  border: 1.5px solid var(--ink-100);
  padding: 24px;
  max-width: 480px;
  width: 92%;
  position: relative;
  animation: modalIn 0.22s var(--ease-out) both;
}

.modal-title {
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: normal;
  color: var(--ink-900);
  margin: 0 0 20px;
  padding-right: 28px;
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--ink-300);
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: color 0.12s, background 0.12s;
}
@media (hover: hover) {
  .modal-close:hover {
    color: var(--ink-700);
    background: var(--ink-050);
  }
}
.modal-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.modal-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.modal-label {
  font-size: 0.8125rem;
  color: var(--ink-500);
}

.modal-input,
.modal-select,
.modal-textarea {
  padding: 10px 12px;
  font-size: 0.9375rem;
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--ink-900);
  font-family: var(--font-sans);
  width: 100%;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.modal-input:focus,
.modal-select:focus,
.modal-textarea:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.modal-input::placeholder,
.modal-textarea::placeholder {
  color: var(--ink-300);
}

/* Custom dropdown arrow — replaces native across all browsers */
.modal-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23aea89e' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

.modal-textarea {
  resize: vertical;
  min-height: 80px;
}

.capture-input {
  padding: 12px;
  font-size: 1rem;
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: var(--ink-900);
  font-family: var(--font-sans);
  width: 100%;
  resize: none;
  min-height: 88px;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.capture-input:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.capture-input::placeholder { color: var(--ink-300); }

.modal-error {
  font-size: 0.8125rem;
  color: #a85030;
  min-height: 1.2em;
  margin: 0;
}

/* ============================================================
   TOAST
   ============================================================ */

.dash-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink-700);
  color: #fff;
  font-size: 0.875rem;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  z-index: 2000;
  pointer-events: none;
  animation: fadeUp 0.2s var(--ease-out) both;
  white-space: nowrap;
}

/* ============================================================
   TABLET — 641px – 900px
   Calendar cells compress at this range.
   ============================================================ */

@media (max-width: 900px) {
  .cal-day { height: 44px; }
}

/* ============================================================
   MOBILE — ≤ 640px
   ============================================================ */

@media (max-width: 640px) {
  :root {
    --dash-padding-x: 20px;
  }

  .dashboard {
    padding-top: 24px;
    padding-bottom: 40px;
  }

  .dash-header {
    flex-direction: column;
    gap: 16px;
  }

  .dash-greeting { font-size: 1.5rem; }

  /* Stack both top-row cards on narrow screens */
  .dash-header-cards {
    grid-template-columns: 1fr;
    width: 100%;
    margin-left: 0;
  }

  .dash-actions { justify-content: center; }

  /* Shortcut cards reflow to two-up so they don't overflow the strip */
  .dash-actions-grid {
    width: 100%;
    grid-template-columns: repeat(2, 1fr);
  }

  .dash-action-btn {
    min-width: 80px;
    padding: 10px 12px;
  }

  .dash-main,
  .dash-lower {
    grid-template-columns: 1fr;
  }

  /* Calendar hidden on mobile per brief (open question 2) */
  .dash-col-calendar { display: none; }

  .modal {
    border-radius: var(--radius);
    padding: 20px;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

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

/* ============================================================
   INNER PAGES — SHARED CHROME
   Page shell, back nav, header block, contenteditable fields,
   tags, save indicator, error banner.
   ============================================================ */

.inner-page {
  max-width: var(--dash-max-width);
  margin: 0 auto;
  padding: 32px 40px 60px;
  animation: fadeUp 0.22s var(--ease-out) both;
}

/* Back-nav breadcrumb */
.inner-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8125rem;
  color: var(--ink-400);
  text-decoration: none;
  margin-bottom: 24px;
  transition: color 0.12s;
}
@media (hover: hover) {
  .inner-breadcrumb:hover {
    color: var(--ink-700);
    text-decoration: none;  /* overrides base a:hover */
  }
}

/* Entity header block */
.inner-header { margin-bottom: 28px; }

.inner-header-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}

/* Editable h1 — transparent border at rest, hints on hover, accent on focus */
.inner-name {
  font-family: var(--font-serif);
  font-size: 1.625rem;
  font-weight: normal;
  color: var(--ink-900);
  margin: 0;
  outline: none;
  border-bottom: 1.5px solid transparent;
  border-radius: 3px;
  padding: 2px 4px;
  transition: border-color 0.12s;
  min-width: 40px;
}
/* Hover hint — editability affordance without a permanent underline.
   Wrapped in (hover: hover) so the border doesn't stick on touch. */
@media (hover: hover) {
  .inner-name:hover:not(:focus) { border-bottom-color: var(--ink-100); }
}
.inner-name:focus              { border-bottom-color: var(--accent-border); }

/* Editable description */
.inner-desc {
  font-size: 0.9375rem;
  color: var(--ink-500);
  outline: none;
  border-bottom: 1.5px solid transparent;
  border-radius: 3px;
  padding: 2px 4px;
  margin: 0 0 12px;
  transition: border-color 0.12s;
  min-width: 40px;
  display: block;
}
@media (hover: hover) {
  .inner-desc:hover:not(:focus) { border-bottom-color: var(--ink-100); }
}
.inner-desc:focus              { border-bottom-color: var(--accent-border); }

/* Contenteditable placeholder — rendered via ::before when data-empty="true" */
[contenteditable][data-empty="true"]::before {
  content: attr(data-placeholder);
  color: var(--ink-300);
  pointer-events: none;
}

/* Save flash indicator */
.inner-save-indicator {
  font-size: 0.75rem;
  color: var(--done);
  opacity: 0;
  transition: opacity 0.3s;
  margin-left: 8px;
  flex-shrink: 0;
}
.inner-save-indicator.is-visible { opacity: 1; }

/* Tags display row */
.inner-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.inner-tag {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--ink-050);
  color: var(--ink-500);
  border: 1px solid var(--ink-100);
}

.inner-tags-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  /* margin-bottom intentionally omitted — varies per page (project adds 14px inline) */
}

.inner-tags-edit-btn {
  font-size: 0.75rem;
  color: var(--ink-300);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: inherit;
  transition: color 0.12s, background 0.12s;
}
@media (hover: hover) {
  .inner-tags-edit-btn:hover {
    color: var(--accent);
    background: var(--accent-bg);
  }
}

.inner-tags-input {
  font-size: 0.8125rem;
  border: 1.5px solid var(--accent-border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  background: var(--bg-card);
  color: var(--ink-900);
  font-family: inherit;
  width: 260px;
  transition: box-shadow 0.12s;
}
.inner-tags-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Error banner */
.inner-error {
  background: #fef2ef;
  border: 1.5px solid #f5c5b8;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.875rem;
  color: #a85030;
  margin-bottom: 20px;
}

/* ============================================================
   INNER PAGES — AREA INDICATOR (dot or icon in page header)
   Larger than the home-page variants; share same --area-color token.
   ============================================================ */

.inner-area-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
  background-color: var(--area-color, var(--ink-100));
}

.inner-area-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 4px;
  color: var(--area-color, var(--ink-400));
  display: flex;
  align-items: center;
  justify-content: center;
}
.inner-area-icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

/* ============================================================
   INNER PAGES — TAB SYSTEM
   Hairline bottom border on container; active tab "pokes through"
   via negative margin-bottom + solid 2px border.
   ============================================================ */

.inner-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1.5px solid var(--ink-100);
  margin-bottom: 24px;
}

.inner-tab {
  font-size: 0.8125rem;
  color: var(--ink-400);
  background: none;
  border: none;
  padding: 8px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;  /* poke through container border */
  font-family: inherit;
  transition: color 0.12s;
}
@media (hover: hover) {
  .inner-tab:hover { color: var(--ink-700); }
}

/* Active tab: accent color + solid bottom border, not heavy */
.inner-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 500;
}

.inner-panel.is-hidden { display: none; }

/* ============================================================
   AREA PAGE — PROJECTS TAB
   ============================================================ */

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

.area-project-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}
@media (hover: hover) {
  .area-project-item:hover {
    background: var(--ink-050);
    text-decoration: none;
  }
}

.area-project-name {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--ink-800);
  min-width: 0;
}

.area-project-status {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.area-project-status.is-active    { background: var(--done-bg);   color: var(--done-text);   border: 1px solid var(--done-border); }
.area-project-status.is-on_hold   { background: var(--ink-050);   color: var(--ink-500);     border: 1px solid var(--ink-100); }
.area-project-status.is-completed { background: var(--accent-bg); color: var(--accent-text); border: 1px solid var(--accent-border); }
.area-project-status.is-archived,
.area-project-status.is-abandoned { background: var(--ink-050);   color: var(--ink-300);     border: 1px solid var(--ink-100); }

.area-project-meta {
  font-size: 0.8125rem;
  color: var(--ink-300);
  white-space: nowrap;
  flex-shrink: 0;
}

.area-projects-empty {
  font-size: 0.875rem;
  color: var(--ink-300);
  padding: 10px 12px;
}

/* ============================================================
   PROJECT PAGE — TYPE BADGE, META ROW, STATUS SELECT
   ============================================================ */

/* "project" or "pigeon" pill left of the h1 */
.inner-type-badge {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--ink-100);
  color: var(--ink-400);
  background: var(--ink-050);
  margin-top: 7px;
  flex-shrink: 0;
}
/* Pigeon projects get accent-tinted badge — a pigeon has its own energy */
.inner-type-badge.is-pigeon {
  background: var(--accent-bg);
  color: var(--accent-text);
  border-color: var(--accent-border);
}

/* Area link + status select row below the title */
.inner-meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.inner-area-link {
  font-size: 0.8125rem;
  color: var(--accent);
  text-decoration: none;
}
@media (hover: hover) {
  .inner-area-link:hover { text-decoration: underline; }
}
.inner-area-link::before { content: '↑ '; }

.inner-status-label {
  font-size: 0.8125rem;
  color: var(--ink-400);
}

.inner-status-select {
  font-size: 0.8125rem;
  font-family: inherit;
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  background: var(--bg-card);
  color: var(--ink-700);
  cursor: pointer;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.inner-status-select:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ============================================================
   PROJECT PAGE — "WHERE I LEFT OFF"
   The notable field. Italic placeholder signals "personal, freeform."
   Hover steps the border up before the full focus ring fires.
   ============================================================ */

.inner-last-note-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-300);
  margin: 0 0 6px;
}

.inner-last-note {
  font-size: 0.9375rem;
  color: var(--ink-700);
  outline: none;
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 18px;
  transition: border-color 0.12s, box-shadow 0.12s;
  min-height: 56px;
  display: block;
  width: 100%;
  background: var(--bg-card);
  font-family: inherit;
  line-height: 1.5;
  resize: none;
}
/* Hover: step the border up before the focus ring fires */
@media (hover: hover) {
  .inner-last-note:hover { border-color: var(--ink-300); }
}
.inner-last-note:focus {
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-ring);
  outline: none;
}
/*
 * Italic placeholder: the inline block only sets color, not font-style.
 * This property wins freely from the external stylesheet.
 */
.inner-last-note::placeholder {
  color: var(--ink-300);
  font-style: italic;
}

/* ============================================================
   AREA / PROJECT PAGES — TASK LIST
   Shared between area (floating tasks) and project (project tasks).
   ============================================================ */

.inner-task-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* "+" add-task trigger button */
.inner-add-task-btn {
  font-size: 0.8125rem;
  color: var(--accent);
  background: none;
  border: 1.5px solid var(--accent-border);
  border-radius: var(--radius-sm);
  padding: 4px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}
@media (hover: hover) {
  .inner-add-task-btn:hover { background: var(--accent-bg); }
}

/* Inline add-task form row */
.inner-add-task-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.inner-add-task-input {
  flex: 1;
  font-size: 0.9375rem;
  border: 1.5px solid var(--accent-border);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  background: var(--bg-card);
  color: var(--ink-900);
  font-family: inherit;
  transition: box-shadow 0.12s;
}
.inner-add-task-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.inner-add-task-input::placeholder { color: var(--ink-300); }

.inner-add-task-submit {
  font-size: 0.875rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}
@media (hover: hover) {
  .inner-add-task-submit:hover { background: var(--accent-strong); }
}

.inner-add-task-cancel {
  font-size: 0.875rem;
  background: none;
  color: var(--ink-400);
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, color 0.12s;
}
@media (hover: hover) {
  .inner-add-task-cancel:hover {
    background: var(--ink-050);
    color: var(--ink-700);
  }
}

/* Task list */
.inner-task-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.inner-task-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  transition: background 0.12s;
}
@media (hover: hover) {
  .inner-task-item:hover { background: var(--ink-050); }
}

/* Circle complete button — fills sage on hover.
   Wrapped in (hover: hover) so the filled state doesn't stick on touch
   after unchecking. On touch devices the button returns to its plain
   resting state immediately after the tap. */
.inner-task-complete-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-300);
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s, background 0.12s;
  padding: 0;
}
@media (hover: hover) {
  .inner-task-complete-btn:hover {
    border-color: var(--done);
    background: var(--done-bg);
  }
}

.inner-task-title {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--ink-800);
  min-width: 0;
}

.inner-task-due {
  font-size: 0.75rem;
  color: var(--ink-300);
  white-space: nowrap;
  flex-shrink: 0;
}
/* Overdue date shifts to accent-text (focused, not alarming) */
.inner-task-due.is-overdue { color: var(--accent-text); }

.inner-tasks-empty {
  font-size: 0.875rem;
  color: var(--ink-300);
  padding: 10px 12px;
}

/* "Show completed (N)" disclosure toggle */
.inner-completed-toggle {
  font-size: 0.8125rem;
  color: var(--ink-400);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 12px;
  font-family: inherit;
  text-align: left;
  transition: color 0.12s;
}
@media (hover: hover) {
  .inner-completed-toggle:hover { color: var(--ink-700); }
}

.inner-completed-list { display: none; }
.inner-completed-list.is-open { display: block; }

/* Completed task row — strikethrough + muted */
.inner-task-item.is-completed .inner-task-title {
  color: var(--ink-300);
  text-decoration: line-through;
}

/* ============================================================
   AREA / PROJECT PAGES — GOALS TAB
   ============================================================ */

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

.inner-goal-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ink-050);
}
.inner-goal-item:last-child { border-bottom: none; }

.inner-goal-title {
  font-size: 0.9375rem;
  color: var(--ink-800);
  margin: 0 0 4px;
}

.inner-goal-date {
  font-size: 0.8125rem;
  color: var(--ink-300);
  margin: 0 0 8px;
}

/* Nested milestones under a goal */
.inner-goal-milestone-list {
  list-style: none;
  margin: 4px 0 0 16px;
  padding: 0;
}

.inner-goal-milestone-item {
  font-size: 0.875rem;
  color: var(--ink-500);
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Small dot before each milestone — muted until done */
.inner-goal-milestone-item::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ink-300);
  flex-shrink: 0;
}
.inner-goal-milestone-item.is-done::before { background: var(--done); }
.inner-goal-milestone-item.is-done {
  color: var(--ink-300);
  text-decoration: line-through;
}

.inner-goals-empty {
  font-size: 0.875rem;
  color: var(--ink-300);
  padding: 10px 12px;
}

/* ============================================================
   AREA / PROJECT PAGES — KNOWLEDGE TAB
   Four sub-sections stacked vertically. Cards, not rows.
   ============================================================ */

.inner-knowledge-section { margin-bottom: 28px; }
.inner-knowledge-section:last-child { margin-bottom: 0; }

/* Same label treatment as .dash-section-label and .inner-last-note-label */
.inner-knowledge-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-300);
  margin: 0 0 8px;
}

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

/* Knowledge item card — border steps up on hover for discoverability */
.inner-knowledge-item {
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--ink-100);
  margin-bottom: 6px;
  background: var(--bg-card);
  transition: border-color 0.15s;
}
@media (hover: hover) {
  .inner-knowledge-item:hover { border-color: var(--ink-300); }
}

.inner-knowledge-title {
  font-size: 0.9375rem;
  color: var(--ink-800);
  margin: 0 0 3px;
}

.inner-knowledge-preview {
  font-size: 0.8125rem;
  color: var(--ink-400);
  margin: 0;
}

.inner-knowledge-empty {
  font-size: 0.875rem;
  color: var(--ink-300);
  padding: 4px 0;
}

/* Disabled "Add" placeholder — dashed border signals intent, not-allowed cursor signals not yet */
.inner-knowledge-add-btn {
  font-size: 0.8125rem;
  color: var(--ink-300);
  background: none;
  border: 1.5px dashed var(--ink-100);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  cursor: not-allowed;
  font-family: inherit;
  width: 100%;
  text-align: left;
  margin-top: 4px;
}

/* ============================================================
   LISTS PAGE
   Full list management view. Inbox always open, accent-bordered.
   ============================================================ */

.lists-page {
  max-width: var(--dash-max-width);
  margin: 0 auto;
  padding: 32px 40px 60px;
  animation: fadeUp 0.22s var(--ease-out) both;
}

.lists-page-title {
  font-family: var(--font-serif);
  font-size: 1.625rem;
  font-weight: normal;
  color: var(--ink-900);
  margin: 0 0 28px;
}

/* Shared error banner (also used as .inner-error on area/project pages) */
.page-error {
  background: #fef2ef;
  border: 1.5px solid #f5c5b8;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.875rem;
  color: #a85030;
  margin-bottom: 20px;
}

/* ── 3-column grid ──────────────────────────────────────────────────────────
 * Lists lay out in a 3-column grid on desktop. Cards vary in content height;
 * allow natural height (align-items: start prevents stretching). The Inbox
 * card occupies the first slot in DOM order (API always returns it first) and
 * is visually distinct but does NOT span full-width — it fits column 1 as a
 * natural peer. Its accent border + shadow is enough elevation.
 *
 * Mobile: 2-col at ≤900px (mid-width), 1-col at ≤640px (phones).
 * The skeleton loading cards flow into the same grid automatically.
 * ─────────────────────────────────────────────────────────────────────────── */
#listsContainer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  #listsContainer {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  #listsContainer {
    grid-template-columns: 1fr;
  }
}

/* Inbox card spans columns 2–3 of the lists grid, giving it a wider footprint
   in Row 1 alongside the meta panel in column 1. */
#listsContainer > .is-inbox {
  grid-column: span 2;
}
@media (max-width: 900px) {
  #listsContainer > .is-inbox {
    grid-column: span 1;
  }
}

/* ── Lists meta panel (Row 1, Column 1) ──────────────────────────────────────
 * A white card occupying the first column of Row 1. Contains two stacked zones:
 *   1. Description — an inline-editable field for a short page-level note.
 *   2. TOC — anchor links to every non-Inbox list card, in sort order.
 * The card uses the same visual language as list-accordion cards: white bg,
 * warm hairline border, house radius, and the same shadow used by .list-accordion.
 * ─────────────────────────────────────────────────────────────────────────── */
.lists-meta-panel {
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* align-self: stretch lets the panel grow to match the Inbox card's height
     when the Inbox is taller. flex children then distribute the space. */
  align-self: stretch;
}
@media (max-width: 900px) {
  /* At 2-col and 1-col, the meta panel goes full-width and returns to auto height */
  .lists-meta-panel {
    grid-column: 1 / -1;
    align-self: auto;
  }
}
@media (max-width: 640px) {
  .lists-meta-panel {
    grid-column: 1;
  }
}

/* Description zone — top half of the meta panel */
.lists-desc-zone {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--ink-050);
  flex-shrink: 0;
}

/* Static display — shown when not editing */
.lists-desc-static {
  font-size: 0.875rem;
  color: var(--ink-700);
  line-height: 1.5;
  cursor: text;
  min-height: 36px;
  /* Subtle hover hint that this is editable — same pattern as .inner-desc */
  border-bottom: 1.5px solid transparent;
  padding-bottom: 1px;
  transition: border-color 0.12s;
}
.lists-desc-static.is-placeholder {
  color: var(--ink-300);
  font-style: italic;
}
@media (hover: hover) {
  .lists-desc-static:hover {
    border-bottom-color: var(--ink-100);
  }
}

/* Textarea — shown while editing */
.lists-desc-textarea {
  width: 100%;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--ink-700);
  line-height: 1.5;
  border: 1.5px solid var(--ink-100);
  border-radius: 6px;
  padding: 6px 8px;
  background: var(--bg-card);
  resize: none;
  min-height: 56px;
  transition: border-color 0.12s;
  display: none; /* hidden by default; JS shows it on click */
}
.lists-desc-textarea:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* TOC zone — lower half of the meta panel; takes remaining height */
.lists-toc-zone {
  padding: 12px 16px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lists-toc-zone.is-hidden {
  display: none;
}

.lists-toc-label {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-300);
  margin: 0 0 4px;
  user-select: none;
}

.lists-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lists-toc-item a {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-500);
  text-decoration: none;
  padding: 3px 0;
  border-radius: 4px;
  transition: color 0.1s;
}
@media (hover: hover) {
  .lists-toc-item a:hover {
    color: var(--accent);
  }
}
.lists-toc-item a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Accordion card ── */
.list-accordion {
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  overflow: hidden;
  /* margin-bottom removed — grid gap handles vertical spacing */
}

/*
 * Inbox distinction: accent border + a breath of shadow.
 * The Inbox is always open and holds unprocessed captures —
 * it deserves more visual weight than a regular list.
 */
.list-accordion.is-inbox {
  border-color: var(--accent-border);
  box-shadow: 0 1px 6px var(--accent-ring);
}

/* ── Accordion header (clickable) ── */
/* Simpler than before: now contains ONLY chevron + name (for non-Inbox cards)
   or chevron + name + count (for the Inbox card). All other controls moved to
   the .list-card-handle strip above this button.
   align-items: flex-start still correct — the chevron should align with the
   first line of a long title, not vertically centre against a tall block. */
.list-accordion-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: background 0.12s;
}
@media (hover: hover) {
  .list-accordion-header:hover { background: var(--ink-050); }
  /* Inbox header warms to accent-bg on hover (no handle strip above it) */
  .list-accordion.is-inbox .list-accordion-header:hover { background: var(--accent-bg); }
}

/* Animated chevron — rotates 90° when the list is open.
   Small top nudge to align with the title's first-line baseline when title wraps. */
.list-accordion-chevron {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  color: var(--ink-300);
  flex-shrink: 0;
  transition: transform 0.2s var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
}
.list-accordion-chevron svg { width: 14px; height: 14px; fill: currentColor; }
.list-accordion.is-open .list-accordion-chevron { transform: rotate(90deg); }

/* List name in header — wraps freely onto multiple lines.
   The truncation rules were removed: the Owner wants the full title visible. */
.list-name {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-800);
  min-width: 0;
  overflow-wrap: anywhere;
}
/* Inbox name uses accent color — reinforces its elevated status */
.list-accordion.is-inbox .list-name { color: var(--accent); }

/* Task count — now lives in the .list-card-handle strip above the title.
   Bare number, small and muted — this is metadata, not a CTA. */
.list-task-count {
  font-size: 0.75rem;
  color: var(--ink-400);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ── Collapsible body ── */
.list-body {
  display: none;
  border-top: 1.5px solid var(--ink-100);
}
.list-body.is-open { display: block; }
/* Inbox body border matches the card's accent border */
.list-accordion.is-inbox .list-body { border-top-color: var(--accent-border); }

/* ── Task rows ── */
/*
 * Two-level flex layout (see lists.html inline <style> for .list-task-main):
 * .list-task-row    — flex-wrap:wrap outer shell; .list-attr-panel (flex-basis:100%)
 *                     drops to its own full-width line below the content row.
 * .list-task-main   — flex-wrap:nowrap inner row; holds checkbox, drag handle,
 *                     title, and Attribute button on one guaranteed horizontal line.
 * The inline <style> in lists.html defines .list-task-main; this file defines the
 * outer row and shared children so both cascade layers are consistent.
 */
.list-task-row {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0;
  padding: 9px 16px;
  border-bottom: 1px solid var(--ink-050);
  transition: background 0.1s;
}
@media (hover: hover) {
  .list-task-row:hover { background: var(--ink-050); }
}
.list-task-row:last-child { border-bottom: none; }

.list-task-title {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--ink-800);
  min-width: 0;
  line-height: 1.45;
  padding-top: 1px; /* optical nudge — aligns first-line baseline with adjacent buttons */
}
/* Recurring indicator appended via CSS — doesn't add a DOM node */
.list-task-title.is-recurring::after {
  content: ' ↻';
  color: var(--ink-300);
  font-size: 0.75rem;
}

/* Action buttons revealed on row hover — opacity fade, pinned to top of inner row */
.list-task-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  align-self: flex-start;
  opacity: 0;
  transition: opacity 0.12s;
}
@media (hover: hover) {
  .list-task-row:hover .list-task-actions { opacity: 1; }
}

/* Done + Toss buttons */
.list-complete-btn,
.list-toss-btn {
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1.5px solid;
  cursor: pointer;
  font-family: inherit;
  background: none;
  transition: background 0.1s, color 0.1s;
}
.list-complete-btn {
  color: var(--done-text);
  border-color: var(--done-border);
}
@media (hover: hover) {
  .list-complete-btn:hover { background: var(--done-bg); }
}

.list-toss-btn {
  color: var(--ink-400);
  border-color: var(--ink-100);
}
@media (hover: hover) {
  .list-toss-btn:hover {
    background: var(--ink-050);
    color: var(--ink-700);
  }
}

/* ── Inline add-task row at bottom of each open list ── */
.list-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--ink-050);
}

.list-add-input {
  flex: 1;
  font-size: 0.9375rem;
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  background: var(--bg-card);
  color: var(--ink-900);
  font-family: inherit;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.list-add-input:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.list-add-input::placeholder { color: var(--ink-300); }
.list-add-input:disabled { opacity: 0.5; cursor: not-allowed; }

/* .list-add-submit removed — Enter key handles submission on all devices */

/* ── Completed section ── */
.list-completed-toggle {
  font-size: 0.8125rem;
  color: var(--ink-400);
  background: none;
  border: none;
  border-top: 1px solid var(--ink-050);
  width: 100%;
  text-align: left;
  padding: 8px 16px;
  cursor: pointer;
  font-family: inherit;
  display: block;
  transition: color 0.12s;
}
@media (hover: hover) {
  .list-completed-toggle:hover { color: var(--ink-700); }
}

.list-completed-body { display: none; }
.list-completed-body.is-open { display: block; }

/* Completed task rows — muted strikethrough */
.list-task-row.is-completed .list-task-title {
  color: var(--ink-300);
  text-decoration: line-through;
}

/* ── Empty state ── */
.list-empty {
  padding: 12px 16px;
  font-size: 0.875rem;
  color: var(--ink-300);
}

/* ── Loading skeleton for lists page ──
   The inline <style> in lists.html defines skelPulse (opacity pulse).
   The external shimmer (position-based) is defined here for consistency;
   the inline animation wins at equal specificity, which is acceptable.
   ──────────────────────────────────── */
.skel-list {
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  padding: 14px 16px;
  /* margin-bottom removed — #listsContainer grid gap handles spacing */
}

.skel-bar {
  background: linear-gradient(
    90deg,
    var(--ink-100) 25%,
    var(--ink-050) 50%,
    var(--ink-100) 75%
  );
  background-size: 400px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  height: 14px;
}

/* ============================================================
   INNER PAGES + LISTS — MOBILE (≤ 640px)
   ============================================================ */

@media (max-width: 640px) {
  .inner-page  { padding: 20px 20px 40px; }
  .lists-page  { padding: 20px 20px 40px; }
}

/* ============================================================
   BROWSE PAGES — areas.html, projects.html, pigeons.html
   Skeleton blocks. Pixel fills in the design detail.
   ============================================================ */

.browse-page-title {
  font-family: var(--font-serif);
  font-size: 1.625rem;
  font-weight: normal;
  color: var(--ink-900);
  margin: 0 0 24px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Icon inside .browse-page-title — shared across areas, projects, pigeons pages.
   Sized to pair with the 1.625rem heading; muted ink-400 so the icon is a
   typographic complement rather than competing with the heading text. */
.browse-page-title-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--ink-400);
}

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

.browse-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--ink-050);
  transition: background 0.12s;
}
.browse-row:last-child { border-bottom: none; }
@media (hover: hover) {
  .browse-row:hover { background: var(--ink-050); }
}

.browse-row-name {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--ink-800);
  text-decoration: none;
  min-width: 0;
}
@media (hover: hover) {
  .browse-row-name:hover {
    color: var(--accent);
    text-decoration: none;
  }
}

/* Area name badge — same styling as .jump-area-tag */
.browse-row-area {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--ink-050);
  color: var(--ink-500);
  border: 1px solid var(--ink-100);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Meta text (project count, task count) */
.browse-row-meta {
  font-size: 0.8125rem;
  color: var(--ink-300);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Inline status select — functionally styled; Pixel refines appearance */
.browse-row-status {
  font-size: 0.8125rem;
  font-family: inherit;
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-sm);
  padding: 3px 24px 3px 8px;
  background: var(--bg-card);
  color: var(--ink-700);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.12s, box-shadow 0.12s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23aea89e' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.browse-row-status:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Delete button — visible on row hover only */
.browse-delete-btn {
  font-size: 0.75rem;
  color: var(--ink-300);
  background: none;
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  opacity: 0;
  transition: color 0.12s, border-color 0.12s, background 0.12s, opacity 0.12s;
}
@media (hover: hover) {
  .browse-row:hover .browse-delete-btn { opacity: 1; }
  .browse-delete-btn:hover {
    color: #a85030;
    border-color: #f5c5b8;
    background: #fef2ef;
  }
}
.browse-delete-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Empty state */
.browse-empty {
  font-size: 0.875rem;
  color: var(--ink-300);
  padding: 20px 12px;
  list-style: none;
}

/* ============================================================
   BROWSE SORT BAR
   Pill/chip row above the browse list on areas, projects, pigeons pages.
   ============================================================ */

.browse-sort-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.browse-sort-pill {
  font-size: 0.75rem;
  font-family: inherit;
  color: var(--ink-400);
  background: transparent;
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
  line-height: 1.4;
}

@media (hover: hover) {
  .browse-sort-pill:hover {
    color: var(--ink-700);
    border-color: var(--ink-300);
    background: var(--ink-050);
  }
}

.browse-sort-pill.is-active {
  color: var(--accent-text);
  background: var(--accent-bg);
  border-color: var(--accent-border);
}

/* Group heading rows injected into browse list by "By area" sort */
.browse-group-heading {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-300);
  padding: 14px 12px 4px;
  user-select: none;
  list-style: none;
}

.browse-group-heading:first-child {
  padding-top: 4px;
}

/* ============================================================
   BROWSE NAV
   Quiet footer link strip on every dashboard page.
   ============================================================ */

.dash-browse-nav {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--ink-100);
  margin-top: var(--dash-section-gap);
  padding-top: 20px;
  padding-bottom: 4px;
}

.dash-browse-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--ink-400);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  transition: color 0.12s, background 0.12s;
}
@media (hover: hover) {
  .dash-browse-nav-link:hover {
    color: var(--accent);
    background: var(--accent-bg);
    text-decoration: none;
  }
}

.dash-browse-nav-sep {
  color: var(--ink-100);
  font-size: 0.875rem;
  user-select: none;
  flex-shrink: 0;
}

/* ============================================================
   AREA PAGE — GOALS TAB (interactive: complete, edit, delete, milestones)
   Stack provides layout skeleton; Pixel fills in design detail.
   ============================================================ */

/* Goal list item — flex column wrapper */
.inner-goal-item {
  padding: 10px 12px;
}

/* Goal header row — complete btn + name + date + action btns */
.goal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}

/* Goal completion toggle */
.goal-complete-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-300);
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.12s, background 0.12s;
}
@media (hover: hover) {
  .goal-complete-btn:hover {
    border-color: var(--done);
    background: var(--done-bg);
  }
}
.goal-complete-btn.is-completed {
  border-color: var(--done);
  background: var(--done-bg);
}

/* Goal name — contenteditable span, grows to fill available space */
.goal-name-text {
  flex: 1;
  font-size: 0.9375rem;
  color: var(--ink-800);
  min-width: 0;
  outline: none;
  border-bottom: 1.5px solid transparent;
  border-radius: 3px;
  padding: 1px 3px;
  cursor: text;
  transition: border-color 0.12s;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.goal-name-text:focus {
  border-color: var(--accent-border);
  white-space: normal;
  overflow: visible;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Goal date — always-visible native date picker, styled as metadata */
.goal-date-input {
  font-size: 0.8125rem;
  color: var(--ink-400);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  flex-shrink: 0;
  width: auto;
}
.goal-date-input:focus {
  outline: none;
  color: var(--ink-700);
}

/* Goal action button group (right side) */
.goal-action-btns {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Goal delete — visible on row hover only */
.goal-delete-btn {
  font-size: 0.75rem;
  color: var(--ink-300);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: inherit;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
@media (hover: hover) {
  .inner-goal-item:hover .goal-delete-btn {
    opacity: 1;
  }
  .goal-delete-btn:hover {
    color: var(--accent);
    background: var(--accent-bg);
  }
}

/* Goal milestones toggle pill */
.goal-ms-toggle {
  font-size: 0.75rem;
  color: var(--ink-400);
  background: none;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
@media (hover: hover) {
  .goal-ms-toggle:hover {
    color: var(--accent);
    border-color: var(--accent-border);
    background: var(--accent-bg);
  }
}

/* Completed goal — muted name with strikethrough */
.inner-goal-item.is-completed .goal-name-text {
  color: var(--ink-300);
  text-decoration: line-through;
}
.inner-goal-item.is-completed .goal-date-input {
  opacity: 0.5;
}

/* Milestones collapsible section */
.goal-milestones-section {
  padding: 8px 0 4px 26px;
}

/* Milestone completion button */
.milestone-complete-btn {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-300);
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.12s, background 0.12s;
}
@media (hover: hover) {
  .milestone-complete-btn:hover {
    border-color: var(--done);
    background: var(--done-bg);
  }
}
.milestone-complete-btn.is-completed {
  border-color: var(--done);
  background: var(--done-bg);
}

/* Milestone name */
.milestone-name {
  flex: 1;
  min-width: 0;
}

/* Milestone date metadata */
.milestone-date {
  font-size: 0.75rem;
  color: var(--ink-300);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Milestone delete — visible on row hover */
.milestone-delete-btn {
  font-size: 0.875rem;
  color: var(--ink-300);
  background: none;
  border: none;
  cursor: pointer;
  padding: 1px 4px;
  border-radius: 3px;
  line-height: 1;
  font-family: inherit;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
@media (hover: hover) {
  .inner-goal-milestone-item:hover .milestone-delete-btn {
    opacity: 1;
  }
  .milestone-delete-btn:hover {
    color: var(--accent);
    background: var(--accent-bg);
  }
}

/* "+ Add milestone" text button */
.milestone-show-add {
  font-size: 0.8125rem;
  color: var(--ink-400);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
  font-family: inherit;
  text-align: left;
  display: block;
  margin-top: 4px;
  transition: color 0.12s;
}
@media (hover: hover) {
  .milestone-show-add:hover {
    color: var(--accent);
  }
}

/* Inline add-milestone row */
.milestone-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 6px 0 2px;
}

.milestone-add-input {
  flex: 1;
  font-size: 0.875rem;
  border: 1.5px solid var(--accent-border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  background: var(--bg-card);
  color: var(--ink-900);
  font-family: inherit;
  min-width: 0;
}
.milestone-add-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.milestone-add-input::placeholder {
  color: var(--ink-300);
}

.milestone-add-date {
  font-size: 0.875rem;
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  background: var(--bg-card);
  color: var(--ink-700);
  font-family: inherit;
  flex-shrink: 0;
}
.milestone-add-date:focus {
  outline: none;
  border-color: var(--accent-border);
}

/* ============================================================
   PROJECTS BROWSE PAGE — FEATURED (PIN) TOGGLE
   Change 1: is_featured toggle on dashboard/projects.html
   Stack provides layout skeleton; Pixel fills in design detail.
   ============================================================ */

/* Pin button — default (unpinned) state */
.browse-pin-btn {
  font-size: 0.75rem;
  font-family: inherit;
  color: var(--ink-300);
  background: none;
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
@media (hover: hover) {
  .browse-pin-btn:hover {
    color: var(--accent);
    border-color: var(--accent-border);
    background: var(--accent-bg);
  }
}

/* Pinned state — visually distinct so it reads as "currently active" */
.browse-pin-btn.is-pinned {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-bg);
  font-weight: 500;
}
@media (hover: hover) {
  .browse-pin-btn.is-pinned:hover {
    color: var(--ink-500);
    border-color: var(--ink-100);
    background: none;
  }
}

/* Inline cap warning ("5 pinned — unpin one first") */
.browse-pin-warn {
  font-size: 0.75rem;
  color: #a85030;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================
   LISTS PAGE — ATTRIBUTE PANEL (INBOX TASKS)
   Change 2: inline attribution panel on dashboard/lists.html
   Stack provides layout skeleton; Pixel fills in design detail.
   ============================================================ */

/* Attribute button — sits alongside Done and Toss in the actions group */
.list-attribute-btn {
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 5px;
  border: 1.5px solid var(--ink-100);
  cursor: pointer;
  font-family: inherit;
  background: none;
  color: var(--ink-400);
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
@media (hover: hover) {
  .list-attribute-btn:hover {
    background: var(--accent-bg);
    color: var(--accent);
    border-color: var(--accent-border);
  }
}
/* Active state while panel is open */
.list-attribute-btn.is-active {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent-border);
}

/* Delete button — matches Attribute button weight; destructive hover/confirm state */
.list-delete-btn {
  font-size: 0.75rem;
  padding: 3px 8px;    /* matches .list-attribute-btn */
  border-radius: 5px;
  border: 1.5px solid var(--ink-100);
  cursor: pointer;
  font-family: inherit;
  background: none;
  color: var(--ink-400);  /* matches .list-attribute-btn rest color */
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
@media (hover: hover) {
  .list-delete-btn:hover {
    background: #fef2ef;
    color: #a85030;
    border-color: #f5c5b8;
  }
}
/* Confirm state — text label "Delete?"; line-height: normal prevents inline-flex
   text from sitting off-baseline on some rendering engines */
.list-delete-btn.is-confirming {
  background: #fef2ef;
  color: #a85030;
  border-color: #f5c5b8;
  line-height: normal;
}

/* Inline panel — wraps to its own line inside the flex task row */
.list-attr-panel {
  flex-basis: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 4px;
  flex-wrap: wrap;
}

/* Area / Project / Pigeon toggle group */
.list-attr-toggles {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.list-attr-toggle-btn {
  font-size: 0.75rem;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--ink-100);
  background: none;
  color: var(--ink-400);
  cursor: pointer;
  font-family: inherit;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
}
@media (hover: hover) {
  .list-attr-toggle-btn:hover {
    color: var(--ink-700);
    border-color: var(--ink-300);
  }
}
.list-attr-toggle-btn.is-active {
  background: var(--accent-bg);
  color: var(--accent);
  border-color: var(--accent-border);
}

/* Dropdown populated by the active toggle */
.list-attr-select {
  font-size: 0.8125rem;
  font-family: inherit;
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-sm);
  padding: 4px 24px 4px 8px;
  background: var(--bg-card);
  color: var(--ink-700);
  cursor: pointer;
  flex: 1;
  min-width: 140px;
  max-width: 280px;
  transition: border-color 0.12s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23aea89e' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.list-attr-select:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* Move button — confirms the attribution */
.list-attr-move-btn {
  font-size: 0.875rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 5px 14px;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
  transition: background 0.12s;
}
@media (hover: hover) {
  .list-attr-move-btn:hover { background: var(--accent-strong); }
}
.list-attr-move-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================
   AREA COLOUR PICKER (dashboard/areas.html)
   ============================================================ */

/* Allow the picker to wrap onto its own line within the flex row */
.browse-row {
  flex-wrap: wrap;
}

/* Clickable dot affordance */
.area-dot--clickable {
  cursor: pointer;
  transition: opacity 0.12s;
}
@media (hover: hover) {
  .area-dot--clickable:hover {
    opacity: 0.72;
  }
}

/* Picker strip — appears below the row flex items */
.area-color-picker {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 2px 4px;
}

/* Individual swatch button */
.area-color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: transform 0.1s, border-color 0.1s;
  outline: none;
}
@media (hover: hover) {
  .area-color-swatch:hover {
    transform: scale(1.18);
  }
}
.area-color-swatch:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.area-color-swatch.is-selected {
  border-color: var(--ink-700);
  box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--ink-700);
}

/* "None" swatch — shows × symbol, not a background colour */
.area-color-swatch.is-none {
  background: var(--ink-050);
  border-color: var(--ink-100);
  font-size: 0.75rem;
  color: var(--ink-400);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (hover: hover) {
  .area-color-swatch.is-none:hover {
    background: var(--ink-100);
    transform: scale(1.1);
  }
}

/* ── Resources tab (area and project detail pages) ───────────────────────── */

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

.resource-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--ink-050, #f2efea);
}
.resource-item:last-child { border-bottom: none; }

.resource-item-main {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.resource-title-link {
  font-size: 0.9375rem;
  color: var(--accent, #4f6699);
  text-decoration: none;
  flex: 1;
  min-width: 0;
}
@media (hover: hover) {
  .resource-title-link:hover { text-decoration: underline; }
}

.resource-title-text {
  font-size: 0.9375rem;
  color: var(--ink-800, #28251d);
  flex: 1;
  min-width: 0;
}

.resource-notes {
  font-size: 0.8125rem;
  color: var(--ink-400, #8c867b);
  margin: 4px 0 0 0;
}

.resource-file-link {
  font-size: 0.8125rem;
  color: var(--accent, #4f6699);
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}
@media (hover: hover) {
  .resource-file-link:hover { text-decoration: underline; }
}

.resource-delete-btn {
  font-size: 0.75rem;
  color: var(--ink-300, #aea89e);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: inherit;
  flex-shrink: 0;
  margin-left: auto;
}
@media (hover: hover) {
  .resource-delete-btn:hover { color: #a85030; background: #fef2ef; }
}

.resource-empty {
  font-size: 0.875rem;
  color: var(--ink-300, #aea89e);
  padding: 10px 12px;
  list-style: none;
}

/* Add resource form */

.resource-add-form {
  border: 1.5px solid var(--accent-border, #8aa0c4);
  border-radius: var(--radius-sm, 8px);
  padding: 12px 14px;
  background: var(--bg-card, #fff);
  margin-bottom: 12px;
}

.resource-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.resource-add-row:last-child { margin-bottom: 0; }

.resource-file-label {
  font-size: 0.8125rem;
  color: var(--ink-500, #6b6558);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.resource-file-input {
  font-size: 0.8125rem;
  color: var(--ink-700, #38342a);
  font-family: inherit;
}

.resource-upload-status {
  font-size: 0.75rem;
  color: var(--ink-400, #8c867b);
  margin-top: 2px;
}

/* ============================================================
   BROWSE PAGE HEADER — title + add-button row
   Used on areas.html, projects.html, pigeons.html, lists.html
   ============================================================ */

.browse-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}

.browse-page-header .browse-page-title,
.browse-page-header .lists-page-title {
  margin: 0;
}

.browse-add-btn {
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--accent, #4f6699);
  background: none;
  border: 1.5px solid var(--accent-border, #8aa0c4);
  border-radius: var(--radius-sm, 8px);
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}

@media (hover: hover) {
  .browse-add-btn:hover {
    background: var(--accent-bg, #eef1f6);
  }
}

/* ============================================================
   MODAL COLOUR PICKER GRID
   Shared across browse-page add modals; mirrors home.html inline style
   ============================================================ */

.colour-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0;
}

.colour-swatch-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform 0.1s;
  flex-shrink: 0;
}

@media (hover: hover) {
  .colour-swatch-btn:hover { transform: scale(1.15); }
}

.colour-swatch-btn.is-selected {
  border-color: var(--ink-900, #18160f);
  box-shadow: 0 0 0 2px var(--bg, #faf8f4), 0 0 0 4px var(--ink-900, #18160f);
}

.colour-swatch-btn.is-none {
  background: var(--ink-050, #f2efea);
  border-color: var(--ink-100, #e4e0d8);
  color: var(--ink-300, #aea89e);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans, sans-serif);
}

.colour-swatch-btn.is-none.is-selected {
  border-color: var(--ink-500, #6b6558);
  box-shadow: none;
}

/* ============================================================
   MODAL ICON PICKER GRID
   Shared across browse-page add modals; mirrors home.html inline style
   ============================================================ */

.icon-picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 2px 0;
  max-height: 170px;
  overflow-y: auto;
}

.icon-picker-btn {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1.5px solid var(--ink-100, #e4e0d8);
  background: var(--bg, #faf8f4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-400, #8c867b);
  transition: border-color 0.1s, color 0.1s, background 0.1s;
  flex-shrink: 0;
  padding: 0;
}

@media (hover: hover) {
  .icon-picker-btn:hover {
    border-color: var(--accent-border, #8aa0c4);
    color: var(--accent, #4f6699);
  }
}

.icon-picker-btn.is-selected {
  border-color: var(--accent, #4f6699);
  color: var(--accent, #4f6699);
  background: var(--accent-bg, #eef1f6);
}

.icon-picker-btn.is-none {
  font-size: 0.625rem;
  font-family: var(--font-sans, sans-serif);
  color: var(--ink-300, #aea89e);
  letter-spacing: 0.02em;
}

.icon-picker-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

/* ============================================================
   MODAL CHECKBOX ROW
   Used in the lists "Add List" modal for retain-history toggle
   ============================================================ */

.modal-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.modal-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
  accent-color: var(--accent, #4f6699);
}

.modal-checkbox-label {
  font-size: 0.9375rem;
  color: var(--ink-700, #38342a);
  cursor: pointer;
}

/* ============================================================
   AREA ICON TRIGGER (areas.html browse row)
   Clickable element next to the colour dot; opens inline icon picker
   ============================================================ */

.area-icon-trigger {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--area-color, var(--ink-300, #aea89e));
  transition: opacity 0.12s;
}

.area-icon-trigger svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

.area-icon-trigger.is-empty {
  border: 1.5px dashed var(--ink-150, #d8d3c8);
  border-radius: 3px;
  color: var(--ink-200, #cbc6be);
  font-size: 0.625rem;
}

@media (hover: hover) {
  .area-icon-trigger:hover { opacity: 0.7; }
}

/* ============================================================
   AREA ICON PICKER (areas.html browse row inline grid)
   Opens below the row when clicking the icon trigger
   ============================================================ */

.area-icon-picker {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 0 4px;
  max-height: 190px;
  overflow-y: auto;
}

.area-icon-swatch {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1.5px solid var(--ink-100, #e4e0d8);
  background: var(--bg, #faf8f4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-400, #8c867b);
  padding: 0;
  flex-shrink: 0;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
}

.area-icon-swatch svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}

@media (hover: hover) {
  .area-icon-swatch:hover {
    border-color: var(--accent-border, #8aa0c4);
    color: var(--accent, #4f6699);
  }
}

.area-icon-swatch.is-selected {
  border-color: var(--accent, #4f6699);
  color: var(--accent, #4f6699);
  background: var(--accent-bg, #eef1f6);
}

.area-icon-swatch.is-none {
  font-size: 0.6rem;
  font-family: var(--font-sans, sans-serif);
  color: var(--ink-300, #aea89e);
  letter-spacing: 0.02em;
  border-style: dashed;
}

@media (hover: hover) {
  .area-icon-swatch.is-none:hover {
    background: var(--ink-050, #f2efea);
    color: var(--ink-600, #504c43);
    border-color: var(--ink-300, #aea89e);
    border-style: solid;
  }
}


/* ==========================================================================
   PINNED LISTS SECTION — home page
   Full-width card above Zone D (calendar/deadlines row). Up to 3 pinned
   lists render side by side. Each card shares the house card language
   (white surface, hairline warm border, shadow) with a subtle accent
   top-border to read as "pinned/elevated" rather than just another section.
   ========================================================================== */

/*
 * .pinned-lists-section also carries .dash-section, so the white card
 * treatment (background, border, shadow, radius, padding) is already applied.
 * Only explicit rule needed here: margin-bottom to space it from Zone D.
 */
.pinned-lists-section {
  margin-bottom: var(--dash-section-gap);
}

/*
 * Section title inside .dash-section-header — styled identically to
 * .dash-section-label (all-caps 11px ink-300) but reset from h2 defaults.
 */
.dash-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.6875rem;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-300);
  margin: 0;
}

/*
 * Exactly 3 equal tracks — not auto-fill, not minmax.
 * Three 1fr tracks guarantee all cards are pixel-identical width.
 * Gap matches --dash-col-gap (24px) for visual rhythm with Zones C and D.
 */
.pinned-lists-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--dash-col-gap);
}

/*
 * Card language: same white surface + hairline warm border + shadow as
 * .dash-section, distinguishable by the 2px accent-border top edge.
 * That top stripe is the "pinned" signal — promoted without being loud,
 * in the same register as the Inbox card's accent treatment on the lists page.
 */
.pinned-list-card {
  background: var(--bg-card);
  border: 1px solid var(--card-border);
  border-top: 2px solid var(--accent-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
  min-width: 0;
}

.pinned-list-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

/* Drag grip inside pinned card header — sits left-most, flex-shrinks to icon size */
.pinned-list-card-drag-handle {
  flex-shrink: 0;
}

.pinned-list-card-name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-800);
  min-width: 0;
}

/*
 * "3 tasks" written out as muted metadata — plain text, not a pill badge.
 * The count is descriptive context here, not a dense data indicator.
 */
.pinned-list-card-count {
  font-size: 0.8125rem;
  color: var(--ink-300);
  flex-shrink: 0;
  white-space: nowrap;
}

/*
 * Task list also carries .quick-list-items, which provides the list reset.
 * No additional layout override needed; card padding provides context.
 */
.pinned-list-tasks { }

/*
 * Compact single-line task row. Mirrors .quick-list-item exactly (same
 * font size, bullet gap, baseline alignment) so both surfaces share the
 * same design language. Slightly tighter vertical padding fits the card.
 */
.pinned-list-task {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
  font-size: 0.875rem;
  color: var(--ink-700);
}

/* Reveal checkbox faintly on row hover (mirrors .list-task-row:hover pattern).
   Wrapped in (hover: hover) so it doesn't stick on touch. */
@media (hover: hover) {
  .pinned-list-task:hover .list-check-btn {
    border-color: var(--done-border);
    color: var(--done-border);
  }
}

/* Title wraps freely — full text visible in pinned list preview cards */
.pinned-list-task-title {
  flex: 1;
  min-width: 0;
}

/* Mobile: collapse to single column — 33% is too narrow for task previews */
@media (max-width: 640px) {
  .pinned-lists-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   LISTS PAGE — INLINE EDIT (Change 2, 2026-07-08)
   Pin/unpin and delete have moved inside the gear settings panel.
   .list-pin-btn / .list-pin-warn / .list-delete-btn removed.
   ============================================================ */

/* Editable list name — cursor hint on hover */
.list-name--editable {
  cursor: text;
}
@media (hover: hover) {
  .list-name--editable:hover {
    color: var(--ink-900);
  }
}

/* Inline edit input that replaces the name span */
.list-name-edit {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 500;
  font-family: inherit;
  color: var(--ink-800);
  background: var(--bg-card);
  border: 1.5px solid var(--accent-border);
  border-radius: 4px;
  padding: 1px 6px;
  min-width: 0;
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* ============================================================
   TASK ITEM INLINE TITLE EDIT
   Mirrors the list-name--editable / list-name-edit pattern above.
   Applied to .list-task-title (lists page) and the equivalent
   spans in the featured + pinned list widgets on the home page.
   ============================================================ */

/* Editable task title — cursor hint on hover */
.list-task-title--editable {
  cursor: text;
}
@media (hover: hover) {
  .list-task-title--editable:hover {
    color: var(--ink-900);
  }
}

/* Inline input that replaces a task title span during edit */
.list-task-title-edit {
  flex: 1;
  font-size: 0.9375rem;
  font-family: inherit;
  color: var(--ink-800);
  background: var(--bg-card);
  border: 1.5px solid var(--accent-border);
  border-radius: 4px;
  padding: 1px 6px;
  min-width: 0;
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
  line-height: 1.45;
}

/* ============================================================
   LISTS PAGE — CHECKBOX & DRAG HANDLE (Coordinator + Change 3)
   ============================================================ */

/* Custom checkbox circle — replaces the Done button */
.list-check-btn {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--ink-100);
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;          /* hide checkmark at rest */
  transition: border-color 0.12s, background 0.12s, color 0.12s;
  line-height: 1;
}
.list-check-btn svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}
/* Show faint check on row hover. Solid on direct button hover.
   Both wrapped in (hover: hover) so neither state sticks after a touch tap —
   the circle returns to its plain resting state immediately. */
@media (hover: hover) {
  .list-task-row:hover .list-check-btn {
    border-color: var(--done-border);
    color: var(--done-border);
  }
  .list-check-btn:hover {
    background: var(--done-bg);
    border-color: var(--done);
    color: var(--done);
  }
}

/* Drag handle — ⢿ glyph, shown on row hover only */
.list-drag-handle {
  font-size: 1rem;
  color: transparent;           /* hidden at rest */
  cursor: grab;
  flex-shrink: 0;
  user-select: none;
  line-height: 1;
  padding: 0 2px;
  transition: color 0.12s;
}
@media (hover: hover) {
  .list-task-row:hover .list-drag-handle,
  .pinned-list-task:hover .list-drag-handle {
    color: var(--ink-300);
  }
}
.list-drag-handle:active {
  cursor: grabbing;
}

/* Ghost row while dragging tasks within a list */
.is-sortable-ghost {
  opacity: 0.4;
  background: var(--accent-bg);
}

/* ── Card-level drag handle ─────────────────────────────────────────────────
 * Six-dot grip icon prepended to non-Inbox card headers. Hidden at rest;
 * revealed on header hover as a subtle affordance. Using a standalone
 * span (not the accordion-header button itself) keeps click semantics clean —
 * the accordion toggle still fires on all other parts of the header.
 *
 * The handle sits before the chevron so it reads: [grip] [▶] [Name] [count]
 * Tab index is -1 (aria-hidden) — keyboard users don't need it since they
 * can use the sort_order field directly via the edit modal.
 * ─────────────────────────────────────────────────────────────────────────── */
.list-card-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--ink-300);       /* always visible — no longer hover-gated */
  cursor: grab;
  user-select: none;
  transition: color 0.12s, background 0.12s;
  border-radius: 4px;
}

@media (hover: hover) {
  .list-card-drag-handle:hover {
    color: var(--ink-500);
    background: var(--ink-100);
  }
}

.list-card-drag-handle:active {
  cursor: grabbing;
}

/* Ghost card while dragging a list card */
.is-card-sortable-ghost {
  opacity: 0.35;
  background: var(--accent-bg);
  border-color: var(--accent-border);
}

/* Chosen card (the one being dragged) — subtle lift */
.is-card-sortable-chosen {
  box-shadow: 0 4px 16px rgba(79, 102, 153, 0.18);
  border-color: var(--accent-border);
}

/* ============================================================
   HOME PAGE — PINNED LIST INLINE ADD-TASK (Change 1, 2026-07-08)
   ============================================================ */

.pinned-list-add-row {
  padding: 7px 12px 9px;
  border-top: 1px solid var(--ink-050);
}

.pinned-list-add-input {
  width: 100%;
  font-size: 0.875rem;
  font-family: var(--font-sans);
  border: 1.5px solid var(--ink-100);
  border-radius: var(--radius-sm);
  padding: 5px 9px;
  background: var(--bg-card);
  color: var(--ink-900);
  transition: border-color 0.12s, box-shadow 0.12s;
  box-sizing: border-box;
}
.pinned-list-add-input:focus {
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.pinned-list-add-input::placeholder {
  color: var(--ink-300);
}
.pinned-list-add-input:disabled {
  opacity: 0.5;
}

/* ============================================================
   CHECKBOX + CLEAR ALL CHECKED (Task 6, 2026-07-08)
   Shared across pinned-list cards (home.html) and lists page.
   ============================================================ */

/*
 * Checked task row — strikethrough text to signal pending removal.
 * Row stays visible so the Owner can review before clearing.
 * The is-checked class is toggled in JS; no API call fires on check.
 */
.list-task-row.is-checked .list-task-title,
.pinned-list-task.is-checked .pinned-list-task-title {
  text-decoration: line-through;
  color: var(--ink-300);
}

/*
 * Checkbox in checked state — filled green circle with white checkmark.
 * is-task-checked is toggled alongside is-checked on the row.
 */
.list-check-btn.is-task-checked,
.pinned-list-task .list-check-btn.is-task-checked {
  background: var(--done, #4a8c52);
  border-color: var(--done, #4a8c52);
  color: #fff;
}

/*
 * "Clear checked" button — appears below the task list when ≥1 item is
 * checked. Compact, secondary treatment: ghost button with done-color text
 * so it reads as a completion action, not a destructive one.
 *
 * Lists page: .list-clear-checked-btn
 * Home page pinned cards: .pinned-clear-btn
 * Both share the same visual grammar.
 */
.list-clear-checked-btn,
.pinned-clear-btn {
  display: block;
  width: calc(100% - 32px);
  margin: 6px 16px 2px;
  padding: 5px 10px;
  font-size: 0.8125rem;
  font-family: inherit;
  color: var(--done-text, #2a5c30);
  background: var(--done-bg, #eaf2eb);
  border: 1.5px solid var(--done-border, #7aaa7e);
  border-radius: var(--radius-sm, 8px);
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, color 0.12s;
}
@media (hover: hover) {
  .list-clear-checked-btn:hover,
  .pinned-clear-btn:hover {
    background: var(--done-bg-strong, #d4e9d6);
  }
}
.list-clear-checked-btn:disabled,
.pinned-clear-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Pinned card variant: tighter margin to fit inside the card padding */
.pinned-clear-btn {
  width: calc(100% - 24px);
  margin: 6px 12px 2px;
}

/* ============================================================
   TASK ROW — HOVER DELETE BUTTON (lists page + pinned cards)
   ============================================================ */

/*
 * Small × button that appears on the right of a task row on hover.
 * Hidden at rest (opacity: 0); revealed when the parent row is hovered.
 * Single-click hard delete — no confirm dialog.
 *
 * Used in:
 *   lists.html  — .list-task-row  > .list-task-main > .list-task-actions
 *   app.js      — .pinned-list-task (pinned card items)
 *
 * The button reuses the .list-task-actions opacity-gating that already
 * exists on the Inbox row (Attribute + Delete). For non-Inbox list rows
 * a new .list-task-actions div is added containing only the delete btn.
 * For pinned card items the delete btn is appended directly to the <li>.
 */
.task-delete-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--ink-300, #aea89e);
  opacity: 0;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
  line-height: 1;
}

/* Reveal on parent row hover */
.list-task-row:hover .task-delete-btn,
.pinned-list-task:hover .task-delete-btn {
  opacity: 1;
}

/* Danger color on button hover */
@media (hover: hover) {
  .task-delete-btn:hover {
    color: var(--danger, #c0392b);
    background: var(--danger-bg, #fff0ee);
  }
}

/* Keep visible (don't vanish) while disabled after click */
.task-delete-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

/* ============================================================
   EXPENSES TAB — area.html / project.html (2026-07-08)
   ============================================================ */

/* List */
.expense-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Each row */
.expense-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--ink-050);
  font-size: 0.875rem;
  color: var(--ink-700);
  flex-wrap: wrap;
}
.expense-item:last-child { border-bottom: none; }

/* Amount — fixed width, monospaced feel, right-aligned */
.expense-amount {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--ink-900);
  flex-shrink: 0;
  min-width: 100px;
  text-align: right;
}

/* Description — grows to fill space */
.expense-desc {
  flex: 1;
  min-width: 120px;
  color: var(--ink-700);
}

/* Date */
.expense-date {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: var(--ink-400);
  white-space: nowrap;
}

/* Account */
.expense-account {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: var(--ink-500);
  white-space: nowrap;
}

/* Tag chips — interactive chip row */
.expense-tags-zone {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.expense-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: var(--radius-pill, 999px);
  background: var(--accent-bg, #eef1f6);
  color: var(--accent-text, #33456b);
  border: 1px solid var(--accent-border, #8aa0c4);
}
.expense-tag-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent-text, #33456b);
  opacity: 0.6;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1;
  display: flex;
  align-items: center;
  font-family: inherit;
}
@media (hover: hover) {
  .expense-tag-remove-btn:hover { opacity: 1; }
}
.expense-tag-add-btn {
  font-size: 0.75rem;
  color: var(--ink-300, #aea89e);
  background: none;
  border: 1px dashed var(--ink-100, #e4e0d8);
  border-radius: var(--radius-pill, 999px);
  padding: 1px 7px;
  cursor: pointer;
  font-family: inherit;
}
@media (hover: hover) {
  .expense-tag-add-btn:hover { color: var(--accent, #4f6699); border-color: var(--accent-border, #8aa0c4); }
}
.expense-tag-input {
  font-size: 0.8125rem;
  border: 1.5px solid var(--accent-border, #8aa0c4);
  border-radius: var(--radius-sm, 8px);
  padding: 2px 7px;
  background: var(--bg-card, #fff);
  color: var(--ink-900, #18160f);
  font-family: inherit;
  width: 110px;
}
.expense-tag-input:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-ring, rgba(79,102,153,0.14)); }

/* Delete button */
.expense-delete-btn {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--ink-300);
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: color 0.12s, background 0.12s;
}
@media (hover: hover) {
  .expense-delete-btn:hover {
    color: var(--danger, #c0392b);
    background: var(--danger-bg, #fff0ee);
  }
}

/* Empty state */
.expense-empty {
  list-style: none;
  padding: 24px 0;
  font-size: 0.875rem;
  color: var(--ink-300);
  text-align: center;
}

/* Receipt link — shown when receipt_url is present */
.expense-receipt-link {
  flex-shrink: 0;
  font-size: 0.8125rem;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
@media (hover: hover) {
  .expense-receipt-link:hover { text-decoration: underline; }
}

/* Receipt zone — wraps the link+clear or the attach button */
.expense-receipt-zone {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.expense-receipt-clear-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-300, #aea89e);
  padding: 0;
  font-size: 0.875rem;
  line-height: 1;
  font-family: inherit;
}
@media (hover: hover) {
  .expense-receipt-clear-btn:hover { color: var(--danger, #c0392b); }
}
.expense-attach-btn {
  font-size: 0.8125rem;
  color: var(--ink-300, #aea89e);
  background: none;
  border: 1px dashed var(--ink-100, #e4e0d8);
  border-radius: var(--radius-sm, 8px);
  padding: 3px 8px;
  cursor: pointer;
  font-family: inherit;
}
@media (hover: hover) {
  .expense-attach-btn:hover { color: var(--accent, #4f6699); border-color: var(--accent-border, #8aa0c4); }
}
.expense-attach-status {
  font-size: 0.8125rem;
  color: var(--ink-400, #8c867b);
}

/* Inline add form */
.expense-add-form {
  margin-bottom: 16px;
}
.expense-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Tags row inside add-expense form */
.expense-add-tags-row {
  margin-top: 6px;
}
.expense-tags-label {
  font-size: 0.8125rem;
  color: var(--ink-500);
  flex-shrink: 0;
  white-space: nowrap;
}
.expense-tags-input { flex: 1; }

/* ============================================================
   HOME PAGE — SECTION HEADER ROW
   Label + optional add button, used in Areas / Jump back into /
   Active Pigeons / Quick Lists section headers.
   Also lives in home.html inline <style> as a fallback; the
   external definition here is the canonical version.
   ============================================================ */

.dash-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

/* Suppress the margin on the label when it's a direct child of the header row */
.dash-section-header .dash-section-label {
  margin: 0;
}

/* Small ghost "+" button appearing top-right of each section card.
   Accent text, no fill at rest, accent-bg fill on hover. */
.dash-section-add-btn {
  font-size: 0.75rem;
  font-family: var(--font-sans);
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 6px;
  line-height: 1;
  transition: background 0.12s;
}
@media (hover: hover) {
  .dash-section-add-btn:hover {
    background: var(--accent-bg);
  }
}

/* ============================================================
   HOME PAGE — CASCADE PARENT SELECTOR
   Area / Project / Pigeon toggle row above the parent dropdown
   in the New Task, New Note, New Expense, and Add Resource modals.
   Also lives in home.html inline <style> as a fallback.
   ============================================================ */

.cascade-type-row {
  display: flex;
  gap: 4px;
  margin-bottom: 7px;
}

.cascade-btn {
  font-size: 0.75rem;
  font-family: inherit;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--ink-100);
  background: none;
  color: var(--ink-500);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
@media (hover: hover) {
  .cascade-btn:hover { background: var(--ink-050); }
}

/* Active type — filled accent pill */
.cascade-btn.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ============================================================
   HOME PAGE — MODAL UPLOAD STATUS LINE
   Appears below file inputs in the expense and resource modals
   while a file is uploading. Hidden by default via .is-hidden.
   ============================================================ */

.modal-upload-status {
  font-size: 0.8125rem;
  color: var(--ink-400);
  display: block;
  margin-top: 4px;
}

/* ============================================================
   LISTS PAGE — CARD HANDLE STRIP
   A narrow strip at the TOP of each non-Inbox card, sitting above the
   title header. Contains four always-visible controls in a single flex
   row: drag grip (left), task count, spacer, mode circle, gear (right).
   26px tall — compact enough to read as a handle, not a content row.
   Background: --ink-050 gives a subtle cool/dark step up from the white
   card body, making it read as the physical top-edge of the card.
   No border-radius on the top corners — the card's own overflow:hidden
   clips those to the card's corner radius, keeping it flush.
   ============================================================ */

.list-card-handle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 26px;
  background: var(--ink-050);
  flex-shrink: 0;
}

/* Spacer between count and mode circle */
.list-card-handle-spacer { flex: 1; }

/* ── Clear-mode icon ──
   SVG icon indicating the list's completed-item behaviour. Replaces the old
   letter-in-filled-square approach, which had centering issues at small scale.
   Archive (soft) = box/archive icon in house done-green (var(--done)).
   Delete (hard)  = trash/bin icon in danger red (var(--danger, #c0392b)).
   Container is a transparent 16px slot; icon colour carries the meaning. */
.list-mode-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: default;
  user-select: none;
}
.list-mode-circle svg { display: block; }
.list-mode-circle.is-soft { color: var(--done, #5a9960); }   /* house done-green — archive */
.list-mode-circle.is-hard { color: var(--danger, #c0392b); } /* danger red — delete */

/* ============================================================
   LISTS PAGE — GEAR / SETTINGS BUTTON
   Now lives in the .list-card-handle strip (always visible —
   no hover gate, no opacity transition).
   ============================================================ */

.list-settings-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: 0.875rem;
  color: var(--ink-300);
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
@media (hover: hover) {
  .list-settings-btn:hover {
    color: var(--ink-600, #504c44);
    background: var(--ink-100);
  }
}
.list-settings-btn.is-open {
  color: var(--accent);
  background: var(--accent-bg);
}

/* ============================================================
   LISTS PAGE — SETTINGS PANEL
   Inline panel that opens below the card header when gear is clicked.
   ============================================================ */

.list-settings-panel {
  display: none;
  padding: 12px 16px;
  border-top: 1.5px solid var(--ink-100);
  background: var(--bg-card, #fff);
}
.list-settings-panel.is-open { display: block; }

.list-settings-label {
  font-size: 0.8125rem;
  color: var(--ink-500);
  font-weight: 500;
  margin: 0 0 8px;
}
.list-settings-radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.list-settings-radio-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.875rem;
  color: var(--ink-700);
  cursor: pointer;
}

/* Divider between the settings fields and the action buttons */
.list-settings-divider {
  margin: 14px 0;
  border: none;
  border-top: 1px solid var(--ink-100);
}

/* Action group: a column of plain action links/buttons below the divider */
.list-settings-actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Base action button — plain text links, full-width, left-aligned */
.list-settings-action-btn {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 0.875rem;
  font-family: inherit;
  background: none;
  border: none;
  border-radius: 5px;
  padding: 5px 6px;
  cursor: pointer;
  color: var(--ink-600, #504c44);
  transition: background 0.1s, color 0.1s;
}
@media (hover: hover) {
  .list-settings-action-btn:hover {
    background: var(--ink-050, #f2efea);
    color: var(--ink-900, #18160f);
  }
}

/* Destructive variant — delete list */
.list-settings-action-btn.is-destructive {
  color: var(--rust, #a86348);
}
@media (hover: hover) {
  .list-settings-action-btn.is-destructive:hover {
    background: #fef2ef;
    color: #8c3c20;
  }
}
/* Confirming state — stays rust-toned, no hover reset */
.list-settings-action-btn.is-destructive.is-confirming {
  color: #8c3c20;
  background: #fef2ef;
  font-weight: 500;
}

/* Inline pin-max warning below the Pin action button */
.list-settings-action-warn {
  font-size: 0.75rem;
  color: var(--rust, #a86348);
  margin: 2px 0 4px 6px;
  padding: 0;
}
.list-settings-action-warn.hidden { display: none; }

/* ============================================================
   LISTS PAGE — COMPLETED SECTION: HEADER ROW + CLEAR ALL BUTTON
   ============================================================ */

.list-completed-header {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--ink-050);
}
.list-completed-header .list-completed-toggle {
  border-top: none;
  flex: 1;
}

.list-clear-all-btn {
  font-size: 0.8125rem;
  color: var(--ink-400);
  background: none;
  border: none;
  border-left: 1px solid var(--ink-050);
  padding: 8px 12px;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.12s;
  flex-shrink: 0;
  white-space: nowrap;
}
@media (hover: hover) {
  .list-clear-all-btn:hover { color: var(--ink-700); }
}

/* ============================================================
   LIFE CALENDAR WIDGET
   ============================================================

   Dashboard home widget: week number displayed below the date.
   Clicking opens the 52×90 modal grid.

   Cell sizing math (no-scroll requirement):
     Viewport ~1200px. Modal width = 100vw - 48px padding ≈ 980px usable.
     Row label column = 24px.
     Grid usable = 980 - 24 = 956px.
     Cell width = floor(956 / 52) = 18px — comfortable.
     Cell height = 11px; row header = 11px.
     Total grid height = 90 × (11 + 1px gap) = 990px.
     Modal body is scrollable in the vertical axis on shorter viewports,
     but on a standard 900px+ desktop the grid fits comfortably.
     Cell size is intentionally compact (closer to 10–12px spec) to
     maximise density while remaining clickable.

   Color convention (placeholder palette — Pixel to replace):
     Each --lc-* token maps to one location. Troy appears twice;
     both spans use --lc-troy so they share a color automatically.
     Checked cells: band color at full saturation + × mark.
     Unchecked cells: band color at ~15% opacity (very light tint).
     Current week: --lc-current-border accent.

   To apply Pixel's palette: set the --lc-* custom properties below.
   ============================================================ */

/* ── Location color tokens — palette restored to pre-2026-07-10 revision ── */
:root {
  --loc-longisland:         #4f6699;
  --loc-longisland-tint:    #edf0f5;
  --loc-longisland-border:  #b5bfd4;
  --loc-balstonlake:        #6b7c3e;  /* muted olive — Balston Lake area 1990–2002 */
  --loc-balstonlake-tint:   #eef1e8;
  --loc-balstonlake-border: #bbc9a4;
  --loc-roundlake:          #2f7168;  /* original teal — Round Lake 2002–2007 */
  --loc-roundlake-tint:     #eaf1f0;
  --loc-roundlake-border:   #a8c3c0;
  --loc-latham:             #4a6878;  /* slate blue — Latham 2007–2009 */
  --loc-latham-tint:        #eaeff2;
  --loc-latham-border:      #a9bec8;
  --loc-boulder:            #4f8347;
  --loc-boulder-tint:       #eef4ed;
  --loc-boulder-border:     #bad0b5;
  --loc-troy:               #9c7729;
  --loc-troy-tint:          #f5f1ea;
  --loc-troy-border:        #d5c6a5;
  --loc-asheville:          #a6512e;
  --loc-asheville-tint:     #f6eeea;
  --loc-asheville-border:   #dab6a7;
  --loc-tempe:              #993548;
  --loc-tempe-tint:         #f5ebed;
  --loc-tempe-border:       #d4aab2;
  --loc-tromso:             #5f477e;
  --loc-tromso-tint:        #efedf2;
  --loc-tromso-border:      #bcb2c9;

  --cell-size:         11px;  /* single density knob — adjust here to resize all cells */
  --cell-gap:           2px;
  --cell-radius:        2px;
  --cell-current-ring: var(--ink-900); /* accent ring on current week */

  /* alias for grid layout vars */
  --lc-cell-size: var(--cell-size);
  --lc-cell-gap:  var(--cell-gap);
}

/* ── Week number home button (pill/badge style in the date+week row) ── */
.life-cal-week-btn {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans, -apple-system, sans-serif);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: #4e4b48;
  border: none;
  border-radius: 999px;
  padding: 3px 9px;
  cursor: pointer;
  letter-spacing: 0.04em;
  line-height: 1;
  flex-shrink: 0;
  transition: opacity 0.12s;
}
@media (hover: hover) {
  .life-cal-week-btn:hover {
    opacity: 0.8;
  }
}

/* ── Modal overlay ── */
.lc-overlay {
  position: fixed;
  inset: 0;
  background: rgba(24, 22, 15, 0.52);
  z-index: 1000;
  display: flex;           /* set by JS when opening */
  align-items: flex-start;
  justify-content: center;
  padding: 24px 16px;
  overflow-y: auto;
}

/* ── Modal card ── */
.lc-modal {
  background: #4e4b48;
  border-radius: 12px;
  box-shadow: 0 8px 48px rgba(0,0,0,0.18);
  width: 100%;
  max-width: 1040px;
  display: flex;
  flex-direction: column;
  animation: fadeUp 0.18s ease both;
}

/* ── Modal header ── */
.lc-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  flex-shrink: 0;
}
.lc-modal-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-sans, -apple-system, sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c8c4bc;
  margin: 0;
}
.lc-title-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #a09c96;
}
.lc-close-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: none;
  background: none;
  font-size: 1.25rem;
  line-height: 1;
  color: #a09c96;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, color 0.12s;
}
@media (hover: hover) {
  .lc-close-btn:hover {
    background: rgba(255,255,255,0.1);
    color: #e8e4dc;
  }
}

/* ── Modal body ── */
.lc-modal-body {
  padding: 14px 20px 20px;
  overflow-x: auto;       /* safety net on narrow viewports */
}

/* ── Legend — very light warm grey so it lifts off the dark modal body
      without the harshness of pure white ── */
.lc-legend {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  width: fit-content;  /* hug the 3-column content — prevents border stretching past the grid */
  gap: 6px 18px;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: #f0ede8;
  border: 1px solid var(--ink-100, #e4e0d8);
  border-radius: 6px;
}
.lc-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.6875rem;
  color: var(--ink-500);
  font-family: var(--font-sans, -apple-system, sans-serif);
  white-space: nowrap;
}
.lc-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Grid wrapper ── */
.lc-grid-wrap {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Axis labels ── */

/*
  Layout — two standard chart axis labels:
    "← YEARS"  runs VERTICALLY (Y axis) down the left edge of the grid, in its
               own narrow column inside lc-body-row. Top-anchored so the label
               sits beside row 0 (birth year). writing-mode: vertical-rl +
               rotate(180deg) makes the text read bottom→top: the first HTML
               character ("←") lands at the BOTTOM pointing down, the last
               ("S") lands at the TOP beside row 0.
    "Weeks →"  runs HORIZONTALLY (X axis) above the week-number header.

  On the dark modal background (#4e4b48) both labels and all number labels
  use a crisp warm light-grey (#ede9e3) for legibility.
*/

/* Axis-label row — holds the horizontal "Weeks →" X-axis label */
.lc-axis-row {
  display: flex;
  align-items: flex-end;
  margin-bottom: 2px;
}

/* Spacer kept as no-op for backward compat with any JS that references it */
.lc-years-label-spacer {
  display: none;
}

/* "← YEARS" — vertical Y-axis label in the left column of lc-body-row.
   vertical-rl + rotate(180deg) reads bottom→top; align-self: flex-start
   top-anchors it so the "S" sits beside row 0 (birth year) rather than
   stretching or centering down the full grid height. */
.lc-years-label {
  font-family: var(--font-sans, -apple-system, sans-serif);
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #ede9e3;
  line-height: 1;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  width: 12px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-right: 2px;
}

/* "Weeks →" — horizontal X-axis label above the week-number header */
.lc-weeks-label {
  font-family: var(--font-sans, -apple-system, sans-serif);
  font-size: 0.5rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: #ede9e3;
  line-height: 1;
  white-space: nowrap;
}

/* Legacy wrappers — used in earlier layouts; now hidden */
.lc-years-label-wrap,
.lc-axis-label-group {
  display: none;
}

/* ── Column header (week numbers 1–52) ── */
.lc-col-header {
  display: flex;
  align-items: flex-end;
  margin-bottom: 2px;
  /* Mirror the body-row's left offset so the week numbers sit above their
     columns. The grid in lc-body-row is preceded by the years-label column
     (12px + 2px margin-right = 14px) then lc-row-header (24px) = 38px.
     Here: this padding (14px) + the JS-generated lc-row-header-spacer (24px)
     = 38px, so col-num 1 aligns with grid column 0. */
  padding-left: 14px;
}
.lc-row-header-spacer {
  /* matches the row-label column width so col numbers align with grid */
  width: 24px;
  flex-shrink: 0;
}
.lc-col-num {
  width: var(--lc-cell-size);
  font-size: 0.5rem;
  color: #ede9e3;
  text-align: center;
  font-family: var(--font-sans, -apple-system, sans-serif);
  flex-shrink: 0;
  margin-right: var(--lc-cell-gap);
  line-height: 1;
  overflow: visible;
}

/* ── Body row: age labels + grid ── */
.lc-body-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

/* ── Row header (ages 0–89) ── */
.lc-row-header {
  display: flex;
  flex-direction: column;
  width: 24px;
  flex-shrink: 0;
}
.lc-age-label {
  height: var(--lc-cell-size);
  font-size: 0.5rem;
  color: #ede9e3;
  text-align: right;
  padding-right: 4px;
  font-family: var(--font-sans, -apple-system, sans-serif);
  line-height: var(--lc-cell-size);
  margin-bottom: var(--lc-cell-gap);
  flex-shrink: 0;
  /* show only every 5th age to keep it readable */
}
.lc-age-label:not(:first-child):not(:nth-child(5n+1)) {
  color: transparent;
}

/* ── Grid ── */
.lc-grid {
  display: grid;
  grid-template-columns: repeat(52, var(--lc-cell-size));
  grid-auto-rows: var(--lc-cell-size);
  gap: var(--lc-cell-gap);
}

/* ── Individual cells — Pixel's palette system ── */

/* Base cell: defaults to a neutral tint, overridden by loc-* classes below.
   --c, --c-tint, --c-border are set per location class. */
.lc-cell {
  width:  var(--cell-size);
  height: var(--cell-size);
  border-radius: var(--cell-radius);
  box-sizing: border-box;
  cursor: pointer;
  /* Per-cell color vars — defaults to neutral, overridden by loc-* class */
  --c:        var(--ink-300);
  --c-tint:   var(--ink-050);
  --c-border: var(--ink-100);
  background: var(--c-tint);
  border: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s, border-color 0.12s;
}

/* Location color overrides: set --c / --c-tint / --c-border per band */
.lc-cell.loc-longisland  { --c: var(--loc-longisland);  --c-tint: var(--loc-longisland-tint);  --c-border: var(--loc-longisland-border);  }
.lc-cell.loc-roundlake   { --c: var(--loc-roundlake);   --c-tint: var(--loc-roundlake-tint);   --c-border: var(--loc-roundlake-border);   }
.lc-cell.loc-balstonlake { --c: var(--loc-balstonlake); --c-tint: var(--loc-balstonlake-tint); --c-border: var(--loc-balstonlake-border); }
.lc-cell.loc-latham      { --c: var(--loc-latham);      --c-tint: var(--loc-latham-tint);      --c-border: var(--loc-latham-border);      }
.lc-cell.loc-boulder     { --c: var(--loc-boulder);     --c-tint: var(--loc-boulder-tint);     --c-border: var(--loc-boulder-border);     }
.lc-cell.loc-troy        { --c: var(--loc-troy);        --c-tint: var(--loc-troy-tint);        --c-border: var(--loc-troy-border);        }
.lc-cell.loc-asheville   { --c: var(--loc-asheville);   --c-tint: var(--loc-asheville-tint);   --c-border: var(--loc-asheville-border);   }
.lc-cell.loc-tempe       { --c: var(--loc-tempe);       --c-tint: var(--loc-tempe-tint);       --c-border: var(--loc-tempe-border);       }
.lc-cell.loc-tromso      { --c: var(--loc-tromso);      --c-tint: var(--loc-tromso-tint);      --c-border: var(--loc-tromso-border);      }

/* Checked: solid band color — unchecked shows tint, checked shows full saturation */
.lc-cell.is-checked {
  background: var(--c);
  border-color: var(--c);
}

/* Current week: tint background + heavy border ring */
.lc-cell.is-current {
  background: var(--c-tint);
  border: 1.5px solid var(--cell-current-ring);
  box-shadow: 0 0 0 1px var(--bg, #efe9dd), 0 0 0 2.5px var(--c);
  z-index: 1;
}
.lc-cell.is-current.is-checked {
  background: var(--c);
  border-color: var(--cell-current-ring);
}

/* Hover: reveal band color on border */
@media (hover: hover) {
  .lc-cell:not(.is-checked):hover {
    border-color: var(--c);
    z-index: 2;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lc-cell { transition: none; }
}

/* Future weeks: plain white background regardless of location band.
   The --loc-*-tint variables are intentionally kept intact — they are still
   consumed by .is-current for the current-week tint treatment.
   Checked future weeks (unlikely but possible) get full location color as normal. */
.lc-cell.is-future:not(.is-checked) {
  background:   #ffffff;
  border-color: var(--ink-100, #e8e1d4);
}

/* Suppress the hover band-color border on future cells — no action available */
@media (hover: hover) {
  .lc-cell.is-future:not(.is-checked):hover {
    border-color: var(--ink-100, #e8e1d4);
    cursor: default;
  }
}

/* ── Band color on legend swatches — inherits from loc-* via --c ── */
/* Legend swatches use the full saturation color directly */
.lc-legend-swatch.loc-longisland  { background: var(--loc-longisland); }
.lc-legend-swatch.loc-roundlake   { background: var(--loc-roundlake); }
.lc-legend-swatch.loc-balstonlake { background: var(--loc-balstonlake); }
.lc-legend-swatch.loc-latham      { background: var(--loc-latham); }
.lc-legend-swatch.loc-boulder     { background: var(--loc-boulder); }
.lc-legend-swatch.loc-troy        { background: var(--loc-troy); }
.lc-legend-swatch.loc-asheville   { background: var(--loc-asheville); }
.lc-legend-swatch.loc-tempe       { background: var(--loc-tempe); }
.lc-legend-swatch.loc-tromso      { background: var(--loc-tromso); }
.list-clear-all-btn.is-confirming { color: var(--rust, #a86348); }

/* ============================================================
   LIST ITEM — INLINE HYPERLINKS
   Rendered from markdown-style [text](url) syntax at display time.
   Applies across: Inbox task rows, Quick List items, Pinned List cards.
   ============================================================ */

/* Inline link inside a list item title — inherits font-size from parent.
   Uses the accent color at rest; underlines on hover so plain-text items
   and linked items look visually consistent until the user interacts.
   text-underline-offset lifts the underline off the descender line for
   cleaner rendering at 15px. Focus ring is explicit — the base a rule
   has none, and inline links inside task titles need keyboard discoverability. */
.list-item-link {
  color: var(--accent);
  text-decoration: none;
}
@media (hover: hover) {
  .list-item-link:hover {
    color: var(--accent-strong, #3d5488);
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}
.list-item-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-radius: 2px;
}

/* ============================================================
   LISTS PAGE — ICON ADDITIONS
   Page-title icon, Inbox card icon, browse-nav icons.
   All inline SVG, stroke: currentColor, stroke-width: 1.5,
   fill: none so they inherit text colour and respond to hover.
   ============================================================ */

/* Page title icon — sits left of the "Lists" h1 text.
   Sized to pair with the 1.625rem serif heading at display scale.
   Colour is ink-400 (muted) so it reads as a typographic accent
   rather than competing with the heading text itself. */
.lists-page-title {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lists-page-title-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  color: var(--ink-400, #8c867b);
}

/* Inbox card icon — inline flex element inside the accordion header,
   between the chevron and the name span. Uses accent colour so it
   matches the Inbox name (also accent).
   The Inbox header gets align-items: center (overriding flex-start on the
   base rule) because "Inbox" never wraps — true vertical centering works.
   Non-Inbox headers keep flex-start for wrapping long names. */
.list-accordion.is-inbox .list-accordion-header {
  align-items: center;
}
.list-inbox-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--accent, #4f6699);
}

/* Browse nav icons — inline-block so they flow naturally within
   the link text. Explicit width/height required: SVGs without attributes
   default to 300×150px. 12px sits at or just below the 13px nav text so
   icons read as typographic marks, not decorations. vertical-align: middle
   pairs them with the 0.8125rem nav link text. margin-right provides the
   gap between icon and label; margin-top optical nudge corrects for midline
   vs. cap-height difference on small text. */
.browse-nav-icon {
  display: block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}