/* =========================================================
   FLOW shared stylesheet
   Used by every FlowApp module (Work, Love, future modules).
   Brand aligned to vasantjc.com — dark slate + warm gold + classical serif.
   ========================================================= */

:root {
  --bg:           #0a0a0c;
  --bg-2:         #101015;
  --surface:      #15151c;
  --surface-2:    #1c1c25;
  --line:         #26262f;
  --line-soft:    #1d1d25;

  --text:         #f1ede4;
  --text-mid:     #b9b3a4;
  --text-muted:   #7a7468;

  --gold:         #c9a96e;
  --gold-bright:  #e0c184;
  --gold-deep:    #a4884f;
  --gold-soft:    rgba(var(--gold-rgb), 0.12);
  --gold-glow:    rgba(var(--gold-rgb), 0.35);
  --gold-rgb:     201, 169, 110;     /* for rgba() composition */

  --warn:         #d97757;
  --danger:       #b6453a;

  /* Timer-specific (theme-tuned) */
  --ring-track-color: #0c0c10;       /* dark track that gold burns down to */
  --channel-wall:     rgba(0,0,0,0.55);
  --channel-sheen:    rgba(255,255,255,0.04);
  --aura-color:       rgba(var(--gold-rgb),0.06);
  --minor-tick-color: rgba(241,237,228,0.18);
  --minor-tick-fifth: rgba(241,237,228,0.30);
  --major-tick-color: rgba(224,193,132,0.7);
  --start-tick-color: var(--gold-bright);
  --ember-core:       #fff3b0;
  --ember-edge:       #fff3b0;
  --ember-ray:        rgba(255,243,176,0.55);
  --ember-grad-id:    emberGrad;
  --ember-warn-grad-id:   emberWarnGrad;
  --ember-danger-grad-id: emberDangerGrad;

  --serif:        "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:         "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --radius:       4px;
  --max-w:        1240px;
  --gutter:       clamp(20px, 4vw, 56px);
  --ease:         cubic-bezier(.22, .61, .36, 1);

  /* Nav backdrop (theme-tuned) */
  --nav-bg:       rgba(10, 10, 12, 0.7);
  --nav-bg-solid: rgba(10, 10, 12, 0.92);
  --nav-border:   var(--line-soft);
}

/* ════════════════════════════════════════════════════════════════
   LIGHT THEME — warm cream paper, deep navy ink, saturated gold.
   Match to Sharp Apex / vasantjc.com light mode palette.
   ════════════════════════════════════════════════════════════════ */
body.theme-light {
  --bg:           #faf6ec;
  --bg-2:         #f3eddc;
  --surface:      #ffffff;
  --surface-2:    #f3eddc;
  --line:         #d9cba8;
  --line-soft:    #e8dfc7;

  --text:         #0d1525;
  --text-mid:     #1f2a40;
  --text-muted:   #6d6a5a;

  --gold:         #b8923f;
  --gold-bright:  #c9a96e;
  --gold-deep:    #8b6d2c;
  --gold-soft:    rgba(184, 146, 63, 0.10);
  --gold-glow:    rgba(184, 146, 63, 0.30);
  --gold-rgb:     184, 146, 63;

  --warn:         #b85b3f;
  --danger:       #8a2d24;

  /* Timer-specific (light variants) */
  --ring-track-color: #2c1f0a;       /* deep coffee — gold burns into earth */
  --channel-wall:     rgba(60, 40, 10, 0.45);
  --channel-sheen:    rgba(255, 240, 200, 0.5);
  --aura-color:       rgba(184, 146, 63, 0.15);
  --minor-tick-color: rgba(60, 40, 10, 0.30);
  --minor-tick-fifth: rgba(60, 40, 10, 0.45);
  --major-tick-color: rgba(139, 109, 44, 0.85);
  --start-tick-color: var(--gold-deep);
  --ember-core:       #6b3a18;
  --ember-edge:       #4a2d10;
  --ember-ray:        rgba(74, 45, 16, 0.65);
  --ember-grad-id:    emberGradLight;
  --ember-warn-grad-id:   emberWarnGradLight;
  --ember-danger-grad-id: emberDangerGradLight;

  --nav-bg:       rgba(250, 246, 236, 0.78);
  --nav-bg-solid: rgba(250, 246, 236, 0.95);
  --nav-border:   rgba(184, 146, 63, 0.22);
}

/* Smooth theme transition on major surfaces */
html, body { transition: background-color .45s var(--ease), color .45s var(--ease); }
.nav, .item, .panel, .add-form, .lane-picker, .date-wrap, .timer,
.brand-panel, .stat, .heat-cell, input, textarea {
  transition: background-color .45s var(--ease), color .45s var(--ease),
              border-color .45s var(--ease), box-shadow .45s var(--ease);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}
::selection { background: var(--gold); color: #15110a; }
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; background: none; border: none; color: inherit; padding: 0; }

/* Hide all scrollbars site-wide */
html, body, * { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

.wrap {
  width: 100%; max-width: var(--max-w); margin: 0 auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
}

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--sans); font-weight: 500; font-size: 11px;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold);
  display: inline-block; margin: 0;
}
.h-section {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(28px, 3.6vw, 48px); line-height: 1.08;
  letter-spacing: -0.005em; margin: 0;
}
.h-card {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(20px, 1.8vw, 26px); line-height: 1.18;
  margin: 0; color: var(--text);
}
.accent { color: var(--gold); font-style: italic; font-weight: 400; }
.small { font-size: 13px; color: var(--text-muted); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 18px 0;
  background: var(--nav-bg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid var(--nav-border);
  transition: padding .3s var(--ease), background .3s var(--ease);
}
.nav.scrolled { padding: 12px 0; background: var(--nav-bg-solid); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: flex; align-items: baseline; gap: 4px; font-family: var(--serif); line-height: 1; text-decoration: none; }
.brand .brand-name { color: var(--text); font-weight: 600; font-size: 24px; letter-spacing: 0.01em; }
.brand .brand-dot  { color: var(--gold); font-weight: 500; font-style: italic; font-size: 26px; }
.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
.nav-links a, .nav-links button {
  background: none; border: none; padding: 0; text-decoration: none;
  color: var(--text-muted); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: color .3s var(--ease);
}
.nav-links a.active, .nav-links button.active { color: var(--gold); }
.nav-links a:hover, .nav-links button:hover { color: var(--text); }
.nav-links a.active:hover, .nav-links button.active:hover { color: var(--gold-bright); }

/* ---------- Main ---------- */
main { padding-top: 110px; padding-bottom: 96px; }
.section + .section { margin-top: 40px; }

/* ---------- Hero ---------- */
.hero { display: flex; flex-direction: column; gap: 16px; }

/* ---------- Action bar ---------- */
.actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 8px;
}
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--text);
  background: transparent;
  border-radius: var(--radius);
  transition: all .3s var(--ease);
}
.btn:hover { border-color: var(--gold); color: var(--gold); }
.btn-primary { background: var(--gold); border-color: var(--gold); color: #15110a; }
.btn-primary:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: #15110a; }
.btn-ghost { color: var(--text-muted); }
.btn-toggled { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-bright); }
.btn .glyph { font-size: 14px; line-height: 1; }

/* ── Due-date filter dropdown ───────────────────────────────── */
.due-filter { position: relative; display: inline-flex; }
.due-filter-btn { gap: 8px; }
.due-filter-btn .glyph { font-size: 11px; }
.due-filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
  min-width: 180px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.5);
}
body.theme-light .due-filter-menu { box-shadow: 0 12px 32px -8px rgba(108,95,60,0.25); }
.due-filter-menu[hidden] { display: none; }
.due-filter-menu button {
  padding: 9px 14px;
  background: transparent;
  border: none;
  border-radius: 2px;
  color: var(--text-mid);
  font-family: var(--sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.due-filter-menu button:hover { background: var(--gold-soft); color: var(--text); }
.due-filter-menu button.active { background: var(--gold-soft); color: var(--gold-bright); }
body.theme-light .due-filter-menu button.active { color: var(--gold-deep); }

/* ---------- Add Form ---------- */
.add-form {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  margin-top: 8px;
  display: none;
  flex-direction: column;
  gap: 12px;
}
.add-form.open { display: flex; }
.add-form input[type="text"], .add-form input[type="date"] {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--serif);
  font-size: 22px;
  padding: 14px 16px;
  width: 100%;
  outline: none;
  transition: border-color .25s var(--ease);
  -webkit-appearance: none;
  color-scheme: dark;
}
.add-form input[type="text"]::placeholder { color: var(--text-muted); font-style: italic; }
.add-form input:focus { border-color: var(--gold); }
.add-form .row { display: flex; flex-wrap: wrap; gap: 12px; }
.add-form .row > * { flex: 1 1 0; min-width: 0; }
.lane-picker {
  display: flex; gap: 4px; padding: 4px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.lane-picker button {
  flex: 1; padding: 10px 6px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-muted);
  border-radius: 2px;
  transition: all .25s var(--ease);
  min-width: 0;
}
.lane-picker button.active { background: var(--gold-soft); color: var(--gold-bright); }
.date-wrap {
  position: relative;
  display: flex; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0 14px;
  transition: border-color .25s var(--ease);
}
.date-wrap:focus-within { border-color: var(--gold); }
.date-wrap label {
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--text-muted); margin-right: 12px; flex-shrink: 0;
}
.date-trigger {
  flex: 1; min-width: 0;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 8px;
  background: transparent; border: none; padding: 12px 0;
  font-family: var(--serif); font-size: 16px; font-style: italic;
  color: var(--text-muted);
  cursor: pointer;
  text-align: left;
  transition: color .25s var(--ease);
}
.date-trigger:hover { color: var(--text); }
.date-trigger.has-value { color: var(--text); font-style: normal; }
.date-trigger .date-icon { color: var(--gold-deep); flex-shrink: 0; }
.date-trigger:hover .date-icon { color: var(--gold); }

/* Calendar popup */
.cal-popup {
  position: absolute;
  top: calc(100% + 8px);
  right: 0; left: auto;
  z-index: 70;
  width: 320px; max-width: calc(100vw - 32px);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 16px 48px -12px rgba(0,0,0,0.55);
  font-family: var(--sans);
}
body.theme-light .cal-popup { box-shadow: 0 16px 48px -12px rgba(108,95,60,0.30); }
.cal-popup[hidden] { display: none; }
@media (max-width: 640px) {
  .cal-popup { left: 0; right: 0; width: auto; }
}

.cal-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.cal-nav {
  width: 30px; height: 30px;
  background: transparent; border: 1px solid var(--line);
  border-radius: 3px; color: var(--text-muted);
  font-size: 18px; line-height: 1;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.cal-nav:hover { color: var(--gold); border-color: var(--gold); }
.cal-title {
  font-family: var(--serif); font-size: 17px; font-weight: 500;
  color: var(--text);
}

.cal-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  margin-bottom: 6px;
  font-size: 9px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.cal-day {
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 13px; font-weight: 400;
  color: var(--text-mid);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: all .2s var(--ease);
}
.cal-day:hover { background: var(--gold-soft); color: var(--text); border-color: var(--gold-soft); }
.cal-day.cal-outside { color: var(--text-muted); opacity: 0.4; }
.cal-day.cal-today {
  font-weight: 600; color: var(--gold-bright);
  border-color: var(--gold-soft);
}
body.theme-light .cal-day.cal-today { color: var(--gold-deep); }
.cal-day.cal-selected {
  background: var(--gold); color: #15110a; border-color: var(--gold); font-weight: 600;
}
.cal-day.cal-selected:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

.cal-foot {
  display: flex; gap: 8px; margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.cal-foot-btn {
  flex: 1;
  padding: 8px 10px;
  background: transparent; border: 1px solid var(--line); border-radius: 3px;
  color: var(--text-muted);
  font-family: var(--sans); font-size: 10px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.cal-foot-btn:hover { color: var(--gold); border-color: var(--gold); }
.cal-foot-btn.cal-today { color: var(--gold); border-color: var(--gold); }
.cal-foot-btn.cal-today:hover { background: var(--gold-soft); }
.add-form .actions-row { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }

/* ---------- Lanes ---------- */
.lanes { display: flex; flex-direction: column; gap: 36px; }
.lane-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px; padding: 0 2px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.lane-title-group { display: flex; align-items: baseline; gap: 14px; }
.lane-num {
  font-family: var(--serif); font-style: italic;
  font-weight: 400; font-size: 18px;
  color: var(--gold); letter-spacing: 0.05em;
}
.lane-title { font-family: var(--serif); font-size: 24px; font-weight: 500; color: var(--text); }
.lane-count {
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Items ---------- */
.items { display: flex; flex-direction: column; gap: 6px; }
.item-empty {
  color: var(--text-muted); font-style: italic; font-family: var(--serif);
  font-size: 16px; padding: 12px 4px;
}
.item {
  display: grid;
  /* 9 columns: grip, complete, star, body, logged, expand, edit, start, delete.
     The extra `auto` column for `expand` is what stops the delete-button
     from wrapping to a new row after the subtask UI was added. */
  grid-template-columns: 18px 20px 22px 1fr auto auto auto auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;          /* anchor for the absolute .item-progress bar */
  transition: border-color .25s var(--ease), background .25s var(--ease),
              opacity .4s var(--ease), transform .4s var(--ease);
}
/* Completed view uses a 5-col layout (no grip, no start) */
.item--completed-view {
  grid-template-columns: 20px 22px 1fr auto 28px;
}
.item--completed-view .grip,
.item--completed-view .start-btn { display: none; }

.item.fading-out { opacity: 0; transform: translateY(-6px) scale(0.985); pointer-events: none; }
.item.completed .item-title {
  text-decoration: line-through;
  text-decoration-color: var(--text-muted);
  color: var(--text-mid);
}
.item:hover { border-color: rgba(var(--gold-rgb),0.35); }
.item.starred { background: rgba(var(--gold-rgb),0.06); }
.item.dragging {
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  border-color: var(--gold);
  cursor: grabbing;
}
.item-placeholder {
  border: 1px dashed var(--gold);
  background: var(--gold-soft);
  border-radius: var(--radius);
  margin: 0;
}

.grip {
  color: var(--text-muted);
  font-size: 18px; line-height: 1;
  cursor: grab; touch-action: none;
  user-select: none; -webkit-user-select: none;
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  transition: color .25s var(--ease);
}
.grip:hover { color: var(--text); }
.grip:active { cursor: grabbing; }

.star-btn {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  transition: color .25s var(--ease), transform .15s var(--ease);
}
.star-btn:hover { color: var(--gold); transform: scale(1.1); }
.item.starred .star-btn { color: var(--gold); }

/* Complete checkbox — empty circle that fills with gold on completion */
.complete-btn {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border: 1.4px solid var(--text-muted);
  border-radius: 50%;
  background: transparent;
  color: transparent;
  transition: all .25s var(--ease);
  flex-shrink: 0;
  padding: 0;
}
.complete-btn:hover { border-color: var(--gold); }
.complete-btn.checked,
.item.completed .complete-btn {
  background: var(--gold);
  border-color: var(--gold);
  color: #15110a;
}
.complete-btn svg { width: 10px; height: 10px; opacity: 0; transition: opacity .2s var(--ease); }
.complete-btn.checked svg,
.item.completed .complete-btn svg { opacity: 1; }

/* Completed-view layout: date groups */
.completed-view { display: flex; flex-direction: column; gap: 28px; }
.date-group { display: flex; flex-direction: column; gap: 10px; }
.date-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  gap: 12px;
}
.date-title {
  font-family: var(--serif); font-size: 22px; font-weight: 500;
  color: var(--text); line-height: 1.2;
}
.date-count {
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.lane-chip {
  font-family: var(--sans);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-deep);
  padding: 3px 8px;
  border: 1px solid var(--gold-soft);
  border-radius: 2px;
  background: rgba(var(--gold-rgb),0.03);
  white-space: nowrap;
}
.lane-chip .lane-chip-num {
  color: var(--gold); font-style: italic; font-family: var(--serif);
  margin-right: 4px; letter-spacing: 0;
}
.completed-at {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

.item-body { min-width: 0; }
.item-title {
  font-family: var(--serif); font-size: 19px; font-weight: 400;
  color: var(--text); line-height: 1.25;
  word-break: break-word;
  cursor: text;
}
.item-title.editing {
  outline: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}
.item-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 4px;
  font-size: 11px; color: var(--text-muted);
  letter-spacing: 0.08em;
}
.item-meta .due-soon { color: var(--warn); }
.item-meta .due-late { color: var(--danger); }

.logged-chip {
  font-family: var(--sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold);
  padding: 4px 8px;
  border: 1px solid var(--gold-soft);
  border-radius: 2px;
  background: rgba(var(--gold-rgb),0.04);
  white-space: nowrap;
}

.start-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--gold); color: var(--gold);
  background: transparent; border-radius: 2px;
  transition: all .25s var(--ease);
}
.start-btn:hover { background: var(--gold); color: #15110a; }
.start-btn .glyph { font-size: 9px; }

.edit-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  opacity: 0.55;
  transition: opacity .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
  border-radius: 2px;
}
.edit-btn:hover { opacity: 1; color: var(--gold); background: var(--gold-soft); }
.edit-btn svg { display: block; }

.delete-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  font-size: 14px; opacity: 0.5;
  transition: opacity .25s var(--ease), color .25s var(--ease);
  border-radius: 2px;
}
.delete-btn:hover { opacity: 1; color: var(--danger); background: rgba(182,69,58,0.08); }

/* ════════════════════════════════════════════════════════════════
   Subtasks — per-item subcollection, expand chevron + panel below
   ════════════════════════════════════════════════════════════════ */

/* The expand chevron on each active item row — sized to match its
   star/complete neighbours so it doesn't visually add bulk to the row. */
.expand-btn {
  background: transparent; border: none;
  color: var(--text-muted);
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  border-radius: var(--radius);
  padding: 0;
  transition: color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease);
}
.expand-btn:hover { color: var(--gold); background: rgba(var(--gold-rgb), 0.06); }
.expand-btn.open  { color: var(--gold); transform: rotate(180deg); }
.expand-btn svg   { display: block; }

/* Subtask progress bar — absolute-positioned at the bottom edge of the
   .item card so it adds ZERO height to the row. This keeps the rows the
   same compact height they had before subtasks existed. The 1px bar sits
   flush with the bottom border of the item card. */
.item-progress {
  position: absolute;
  bottom: 0;
  left: 14px;                /* match .item padding */
  right: 14px;
  height: 1px;
  background: var(--line);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  overflow: hidden;
  pointer-events: none;
}
.item-progress-fill {
  display: block;
  height: 100%;
  background: var(--gold);
  transition: width .35s var(--ease);
}
@media (max-width: 640px) {
  .item-progress { left: 12px; right: 12px; }   /* match mobile .item padding */
}

/* Inline "3/5" chip in the meta line */
.subtask-chip {
  display: inline-block;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 2px;
}

/* The panel itself — slots in right below the item row */
.subtasks-panel {
  margin: 0 0 14px 0;
  padding: 14px 18px 12px 56px;     /* left pad aligns with the item title (past grip + check + star) */
  background: rgba(var(--gold-rgb), 0.025);
  border-left: 1px solid var(--line);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.subtask-list {
  display: flex; flex-direction: column;
  gap: 2px;
  margin-bottom: 10px;
}

.subtask-row {
  display: flex; align-items: center;
  gap: 10px;
  padding: 7px 4px;
  border-radius: var(--radius);
  transition: background .2s var(--ease);
}
.subtask-row:hover { background: rgba(var(--gold-rgb), 0.05); }
.subtask-row.dragging { background: var(--surface); box-shadow: 0 8px 20px -8px rgba(0,0,0,0.4); cursor: grabbing; }
.subtask-row.optimistic { opacity: 0.55; }   /* faded while the create write is in flight */

.subtask-placeholder {
  background: rgba(var(--gold-rgb), 0.08);
  border-radius: var(--radius);
}

.subtask-grip {
  background: transparent; border: none;
  color: var(--text-muted);
  font-size: 14px; line-height: 1;
  cursor: grab;
  opacity: 0.4;
  padding: 0 2px;
  transition: opacity .2s var(--ease);
  touch-action: none;
}
.subtask-row:hover .subtask-grip { opacity: 0.9; }
.subtask-grip:active { cursor: grabbing; }
span.subtask-grip { cursor: default; opacity: 0.3; }   /* placeholder grip for optimistic rows */

.subtask-check {
  flex-shrink: 0;
  width: 16px; height: 16px;
  border: 1.5px solid var(--text-muted);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
.subtask-check:hover { border-color: var(--gold); }
.subtask-check[aria-pressed="true"] {
  border-color: var(--gold);
  background: var(--gold);
}
.subtask-check[aria-pressed="true"]::after {
  content: '';
  position: absolute;
  inset: 3px 3px 4px 3px;
  background: var(--bg);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}

.subtask-title {
  flex: 1; min-width: 0;
  font-family: var(--sans);
  font-size: 14px; font-weight: 400;
  color: var(--text);
  cursor: text;
  word-break: break-word;
  outline: none;
}
.subtask-title.editing {
  background: var(--surface);
  border-radius: 2px;
  padding: 1px 4px;
  margin: -1px -4px;
}
.subtask-row.completed .subtask-title {
  text-decoration: line-through;
  color: var(--text-muted);
  opacity: 0.65;
}

.subtask-delete {
  flex-shrink: 0;
  background: transparent; border: none;
  color: var(--text-muted);
  font-size: 16px; line-height: 1;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  border-radius: 2px;
  transition: opacity .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.subtask-row:hover .subtask-delete { opacity: 1; }
.subtask-delete:hover { color: var(--danger); background: rgba(182,69,58,0.08); }

/* The textarea form below the list */
.subtask-input-wrap {
  display: block;
  margin-top: 6px;
}
.subtask-input {
  width: 100%;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  padding: 9px 12px;
  resize: none;
  outline: none;
  transition: border-color .25s var(--ease), background .25s var(--ease);
  line-height: 1.45;
  min-height: 36px;
  max-height: 240px;
  overflow-y: auto;
}
.subtask-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
  font-size: 12px;
  opacity: 0.8;
}
.subtask-input:focus {
  border-color: var(--gold);
  background: rgba(var(--gold-rgb), 0.04);
}

/* Mobile — subtask panel tightens up */
@media (max-width: 640px) {
  .subtasks-panel { padding: 12px 14px 10px 14px; }
  .subtask-title  { font-size: 14px; }
  .subtask-input  { font-size: 14px; }
}

/* ---------- Timer Fullscreen ---------- */
.timer {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: none;
  flex-direction: column;
  padding: 20px;
  /* overflow: auto rather than hidden — final safety net for very short
     viewports. The short-viewport media queries below handle 99% of cases;
     this lets the user scroll within the overlay as a last resort instead
     of seeing the dial clipped off-screen. */
  overflow: auto;
}
.timer.open { display: flex; }
.timer-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.timer-close {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  font-size: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all .25s var(--ease);
}
.timer-close:hover { color: var(--text); border-color: var(--text-muted); }
.timer-title-area { flex: 1; min-width: 0; text-align: center; }
.timer-lane {
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold); display: block;
}
.timer-title {
  font-family: var(--serif); font-size: 18px; font-weight: 400;
  color: var(--text);
  margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.timer-spacer { width: 36px; }

.timer-main {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 28px; min-height: 0;
}

.ring-wrap {
  position: relative;
  /* Bound the dial by BOTH viewport-minimum (square) AND viewport-height
     (so wide-but-short tabs don't blow out the rest of the layout) AND a
     hard pixel cap. The dial is the only element allowed to shrink to
     make room — every other timer element has flex-shrink: 0 below. */
  width:  min(72vmin, 62vh, 540px);
  height: min(72vmin, 62vh, 540px);
  flex-shrink: 1;
  flex-grow: 0;
  display: flex; align-items: center; justify-content: center;
}
.ring-svg { width: 100%; height: 100%; overflow: visible; }

/* Engraved channel walls */
.channel-wall   { fill: none; stroke: var(--channel-wall); stroke-width: 1; }
.channel-sheen  { fill: none; stroke: var(--channel-sheen); stroke-width: 0.6; }

/* Atmospheric breathing aura */
.aura { fill: none; stroke: var(--aura-color); stroke-width: 0.6; }
@keyframes aura-breath { 0%,100% { opacity: 0.5; } 50% { opacity: 0.9; } }
.aura.breathing { animation: aura-breath 4.5s ease-in-out infinite; }

/* Ring */
.ring-track { fill: none; stroke: var(--ring-track-color); }
.ring-fill  {
  fill: none;
  stroke-linecap: butt;
  transition: stroke-dashoffset .35s linear;
  filter: drop-shadow(0 0 6px var(--gold-glow));
}

/* Tick marks */
.minor-tick { stroke: var(--minor-tick-color); stroke-width: 0.6; }
.major-tick { stroke: var(--major-tick-color); stroke-width: 1.4; }
.start-tick { stroke: var(--start-tick-color); stroke-width: 2;   opacity: 0.95; }

/* Quadrant labels */
.quadrant-label {
  font-family: var(--serif);
  font-style: italic;
  font-size: 8px;
  font-weight: 500;
  fill: var(--gold-deep);
  letter-spacing: 0.04em;
}

/* Ember (luminous terminator) */
.ember-grp { transition: transform .35s linear; transform-box: fill-box; }
.ember-halo {
  fill: url(#emberGrad);
  transform-origin: center; transform-box: fill-box;
  animation: ember-breath 2.2s ease-in-out infinite;
}
.ember-core { fill: var(--ember-core); }
.ember-edge { stroke: var(--ember-edge); stroke-width: 1.2; opacity: 0.9; }
.ember-ray  { stroke: var(--ember-ray); stroke-width: 0.7; stroke-linecap: round; }
@keyframes ember-breath {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.15); opacity: 0.85;}
}
.ember-grp.pulsing .ember-halo { animation: ember-breath 0.6s ease-in-out infinite; }

/* Light mode: swap ember gradients to the deeper-amber light variants */
body.theme-light .ember-halo { fill: url(#emberGradLight); }
body.theme-light .ember-grp.warn   .ember-halo { fill: url(#emberWarnGradLight); }
body.theme-light .ember-grp.danger .ember-halo { fill: url(#emberDangerGradLight); }

/* Color states (countdown only) */
.ring-fill.warn   { stroke: url(#warnGrad)   !important; filter: drop-shadow(0 0 10px rgba(217,119,87,0.45)); }
.ring-fill.danger { stroke: url(#dangerGrad) !important; filter: drop-shadow(0 0 14px rgba(182,69,58,0.6)); }
.ember-grp.warn   .ember-halo { fill: url(#emberWarnGrad); }
.ember-grp.danger .ember-halo { fill: url(#emberDangerGrad); }
.ember-grp.warn   .ember-core { fill: #a04930; }
.ember-grp.danger .ember-core { fill: #7a2d24; }
body.theme-light .ember-grp.warn   .ember-core { fill: #a04930; }
body.theme-light .ember-grp.danger .ember-core { fill: #7a2d24; }

/* ---------- Theme toggle button (in nav) ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  color: var(--text-muted);
  border-radius: 50%;
  transition: color .25s var(--ease), background .25s var(--ease);
  margin-left: 4px;
}
.theme-toggle:hover { color: var(--gold); background: var(--gold-soft); }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .icon-sun  { display: block; }
.theme-toggle .icon-moon { display: none; }
body.theme-light .theme-toggle .icon-sun  { display: none; }
body.theme-light .theme-toggle .icon-moon { display: block; }

/* ---------- Light-mode subtle overrides for items ---------- */
body.theme-light .item.dragging { box-shadow: 0 12px 32px rgba(108, 95, 60, 0.25); }
body.theme-light .delete-btn:hover { background: rgba(138, 45, 36, 0.08); }
/* Active-state text on gold-soft backgrounds needs deeper gold in light mode for contrast */
body.theme-light .btn-toggled,
body.theme-light .lane-picker button.active,
body.theme-light .mode-toggle button.active,
body.theme-light .dur-chip.active { color: var(--gold-deep); }
body.theme-light .nav-links a.active:hover,
body.theme-light .nav-links button.active:hover { color: var(--gold-deep); }
/* In light mode the channel walls + sheen need to read against cream as engraved tan grooves */
body.theme-light .channel-wall { stroke: rgba(60, 40, 10, 0.4); }
body.theme-light .channel-sheen { stroke: rgba(255, 240, 200, 0.85); }

.ring-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  pointer-events: none;
}
.time-display {
  font-family: var(--serif);
  font-size: clamp(56px, 14vmin, 140px);
  font-weight: 400;
  line-height: 1; letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: lining-nums tabular-nums;
}
.time-label {
  margin-top: 8px;
  font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--text-muted);
}

/* Mode toggle */
.mode-toggle {
  display: inline-flex;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px;
  gap: 4px;
}
.mode-toggle button {
  padding: 10px 22px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--text-muted);
  border-radius: 2px;
  transition: all .25s var(--ease);
}
.mode-toggle button.active { background: var(--gold-soft); color: var(--gold-bright); }

/* Duration chips */
.durations {
  display: flex; gap: 8px;
  overflow-x: auto;
  max-width: 100%;
  padding: 4px 8px;
  width: 100%;
  flex-shrink: 0;
  justify-content: flex-start;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 800px) { .durations { justify-content: center; flex-wrap: wrap; } }
.dur-chip {
  flex-shrink: 0;
  padding: 8px 14px;
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--bg-2);
  transition: all .25s var(--ease);
}
.dur-chip:hover { border-color: var(--gold); color: var(--gold); }
.dur-chip.active {
  border-color: var(--gold); color: var(--gold-bright);
  background: var(--gold-soft);
}

/* Stop button — fixed dark text on gold for legibility in both themes */
.stop-btn {
  align-self: center;
  flex-shrink: 0;
  padding: 18px 56px;
  font-family: var(--sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: #15110a;
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  transition: all .25s var(--ease);
  margin-bottom: 12px;
}
.stop-btn:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

.timer.complete .ring-text .time-display { color: var(--warn); }
.timer.complete .time-label { color: var(--warn); }

/* ---------- Mobile (≤640px) ---------- */
@media (max-width: 640px) {
  :root { --gutter: 18px; }
  main { padding-top: 84px; padding-bottom: 48px; }
  .section + .section { margin-top: 28px; }
  .h-section { font-size: 30px; line-height: 1.08; letter-spacing: -0.01em; }
  .hero .eyebrow { font-size: 9px; letter-spacing: 0.3em; }
  .actions { gap: 8px; }
  .btn { padding: 10px 14px; font-size: 11px; letter-spacing: 0.16em; }
  .add-form { padding: 14px; }
  .add-form input[type="text"] { font-size: 18px; padding: 12px 14px; }
  .lane-picker button { padding: 9px 4px; font-size: 10px; letter-spacing: 0.14em; }
  .add-form .row { flex-direction: column; }
  .item {
    grid-template-columns: 16px 18px 20px 1fr 22px 22px auto 22px;
    grid-template-areas: "grip complete star body expand edit start delete";
    gap: 7px;
    padding: 10px 12px;
  }
  .item .grip         { grid-area: grip; }
  .item .complete-btn { grid-area: complete; }
  .item .star-btn     { grid-area: star; }
  .item .expand-btn   { grid-area: expand; }
  .item .item-body    { grid-area: body; }
  .item .edit-btn     { grid-area: edit; opacity: 0.7; width: 22px; height: 22px; }
  .item .start-btn    { grid-area: start; padding: 7px 11px; font-size: 10px; }
  .item .delete-btn   { grid-area: delete; opacity: 0.7; width: 22px; height: 22px; }
  .item .logged-chip  { display: none; }

  /* Completed view on mobile: 4-col compact (no grip/start) */
  .item--completed-view {
    grid-template-columns: 18px 20px 1fr 26px;
    grid-template-areas: "complete star body delete";
  }
  .item-meta .mobile-logged { display: inline; }
  .item-title { font-size: 17px; }
  .lane-title { font-size: 20px; }
  .lanes { gap: 28px; }
  .timer { padding: 14px; }
  .timer-title { font-size: 15px; }
  .timer-main { gap: 18px; }
  /* Narrow viewports: still bound by height to prevent overflow when the
     viewport is narrow AND short (e.g. landscape phones). */
  .ring-wrap {
    width:  min(78vmin, 60vh, 420px);
    height: min(78vmin, 60vh, 420px);
  }
  .durations { padding: 4px 2px; }
  .stop-btn { padding: 16px 42px; font-size: 12px; letter-spacing: 0.28em; }
}
@media (min-width: 641px) {
  .item-meta .mobile-logged { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   Short-viewport tiers — keep the timer fully usable when the tab
   is wide-but-short (e.g. landscape phone, vertically resized
   browser window, Chromebook in tablet mode).  We shrink the dial
   aggressively and tighten gaps; chips/controls stay readable.
   ══════════════════════════════════════════════════════════════ */
@media (max-height: 700px) {
  .timer-main { gap: 18px; }
  .ring-wrap {
    width:  min(64vmin, 56vh, 480px);
    height: min(64vmin, 56vh, 480px);
  }
}
@media (max-height: 560px) {
  .timer { padding: 14px; }
  .timer-main { gap: 12px; }
  .ring-wrap {
    width:  min(54vmin, 50vh, 380px);
    height: min(54vmin, 50vh, 380px);
  }
  .timer-header { gap: 10px; }
  .timer-title { font-size: 14px; }
  .timer-lane  { font-size: 9px;  letter-spacing: 0.22em; }
  .mode-toggle button { padding: 8px 16px; font-size: 10px; letter-spacing: 0.18em; }
  .dur-chip    { padding: 6px 11px; font-size: 10px; letter-spacing: 0.12em; }
  .stop-btn    { padding: 12px 32px; font-size: 11px; letter-spacing: 0.24em; }
  .quadrant-label { font-size: 7px; }
}
@media (max-height: 420px) {
  .timer { padding: 10px; }
  .timer-main { gap: 8px; }
  .ring-wrap {
    width:  min(44vmin, 44vh, 280px);
    height: min(44vmin, 44vh, 280px);
  }
  .timer-close, .timer-expand { width: 30px; height: 30px; font-size: 16px; }
  .timer-title { font-size: 13px; }
  .mode-toggle button { padding: 6px 12px; font-size: 9px; }
  .dur-chip    { padding: 5px 9px;  font-size: 9px; }
  .stop-btn    { padding: 10px 26px; font-size: 10px; letter-spacing: 0.2em; }
}

/* ════════════════════════════════════════════════════════════════
   Auth chrome (sign-in button + modal + popover)
   ════════════════════════════════════════════════════════════════ */
.auth-btn-li { display: inline-flex; align-items: center; }

/* Hide [hidden] elements explicitly — overrides the .auth-avatar display rule below */
.auth-btn [hidden] { display: none !important; }

.auth-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 44px;
  padding: 0 44px;          /* generous breathing room on BOTH sides */
  line-height: 1;
  text-indent: 0.28em;      /* compensate for trailing letter-space so glyphs sit visually centered */
  /* Polished brass — light catches the top edge, deepens toward the base */
  background: linear-gradient(180deg,
    #f0d59a 0%,
    #d9b777 38%,
    #b8965c 72%,
    #8b6e3e 100%);
  border: 1px solid #a4884f;
  border-top-color: #f0d59a;
  border-radius: 999px;     /* full pill */
  color: #15110a;
  font-family: var(--sans);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 243, 200, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 200, 0.55),
    inset 0 -1px 0 rgba(74, 45, 16, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.28);
  transition: background .3s var(--ease),
              border-color .3s var(--ease),
              box-shadow .3s var(--ease),
              transform .2s var(--ease);
}
.auth-btn:hover {
  background: linear-gradient(180deg,
    #fde8b0 0%,
    #f0d59a 38%,
    #d9b777 72%,
    #b8965c 100%);
  border-color: #c9a96e;
  border-top-color: #fde8b0;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 200, 0.7),
    inset 0 -1px 0 rgba(74, 45, 16, 0.22),
    0 4px 12px rgba(0, 0, 0, 0.3),
    0 0 26px -2px rgba(var(--gold-rgb), 0.5);   /* warm halo */
}
.auth-btn:active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 4px rgba(74, 45, 16, 0.3),
    0 1px 2px rgba(0, 0, 0, 0.15);
}
.auth-btn.auth-disabled {
  opacity: 0.4; cursor: not-allowed;
  background: transparent; border-color: var(--line); color: var(--text-muted);
  text-shadow: none; box-shadow: none;
}
.auth-btn.auth-disabled:hover {
  background: transparent; color: var(--text-muted); border-color: var(--line);
  transform: none; box-shadow: none;
}

/* Signed-in state: morph into a circular avatar with no fill */
.auth-btn .auth-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gold-soft);
  overflow: hidden;
}
.auth-btn .auth-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.auth-btn .auth-avatar .auth-initial {
  font-family: var(--serif); font-style: italic;
  font-size: 14px; font-weight: 500;
  color: var(--gold);
}
/* Signed-in state — morph into a clean circular avatar */
.auth-btn:has(.auth-avatar:not([hidden])) {
  padding: 2px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  height: 38px; width: 38px;
  text-shadow: none;
  box-shadow: none;
}
.auth-btn:has(.auth-avatar:not([hidden])):hover {
  border-color: var(--gold);
  background: transparent;
  transform: none;
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.15);
}

/* Modal backdrop */
.auth-modal {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity .25s var(--ease);
}
body.theme-light .auth-modal { background: rgba(250, 246, 236, 0.65); }
.auth-modal.open { display: flex; opacity: 1; }

.auth-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 40px 36px 32px;
  width: 100%; max-width: 420px;
  position: relative;
  box-shadow: 0 24px 64px -16px rgba(0,0,0,0.6);
  transform: translateY(8px) scale(0.98);
  transition: transform .35s var(--ease);
}
body.theme-light .auth-card {
  background: var(--bg);
  box-shadow: 0 24px 64px -16px rgba(108, 95, 60, 0.30);
}
.auth-modal.open .auth-card { transform: translateY(0) scale(1); }

.auth-close {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: var(--text-muted);
  background: transparent; border: none; cursor: pointer;
  border-radius: 4px;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.auth-close:hover { color: var(--text); background: var(--gold-soft); }

.auth-head { text-align: center; margin-bottom: 28px; }
.auth-eyebrow {
  font-family: var(--sans); font-weight: 500;
  font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
}
.auth-title {
  font-family: var(--serif); font-weight: 400;
  font-size: 32px; line-height: 1.1; letter-spacing: -0.01em;
  margin: 10px 0 8px;
  color: var(--text);
}
.auth-title em { color: var(--gold); font-style: italic; font-weight: 400; }
.auth-sub {
  font-family: var(--serif); font-style: italic;
  font-size: 15px; color: var(--text-mid);
  margin: 0;
}

.auth-providers {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 22px;
}
.prov-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 14px 18px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.prov-btn:hover { border-color: var(--gold); background: var(--gold-soft); color: var(--text); }
.prov-btn svg { flex-shrink: 0; }

.auth-fine {
  text-align: center; margin: 0;
  font-family: var(--sans); font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* User popover */
.auth-popover {
  position: fixed; z-index: 250;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 16px;
  min-width: 220px;
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.5);
}
.ap-name {
  font-family: var(--serif); font-size: 16px; font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}
.ap-email {
  font-family: var(--sans); font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  word-break: break-all;
}
.ap-action {
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text-mid);
  font-family: var(--sans);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.ap-action:hover { border-color: var(--danger); color: var(--danger); background: rgba(182,69,58,0.06); }
body.theme-light .ap-action:hover { background: rgba(138,45,36,0.06); }
.ap-action.ap-refresh { margin-bottom: 8px; }
.ap-action.ap-refresh:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-soft); }
.ap-action[disabled] { opacity: 0.6; cursor: wait; }

@media (max-width: 640px) {
  .auth-btn { padding: 0 10px; font-size: 9px; letter-spacing: 0.18em; }
  .auth-card { padding: 32px 24px 24px; }
  .auth-title { font-size: 26px; }
}

/* ════════════════════════════════════════════════════════════════
   Brand mark — Vasant apex glyph prepended to every "Flow" wordmark
   ════════════════════════════════════════════════════════════════ */
.brand-glyph {
  display: inline-block;
  width: 1em; height: 1em;
  margin-right: 0.35em;
  vertical-align: -0.08em;
  background: url("flow-mark.svg") no-repeat center / contain;
  flex-shrink: 0;
}

/* Make the brand wordmark a flex row so glyph + text align cleanly */
.brand { align-items: center !important; }
.brand .brand-glyph { width: 28px; height: 28px; margin-right: 8px; vertical-align: middle; }

/* ════════════════════════════════════════════════════════════════
   Auth Gate — prevents app pages from rendering until auth resolves
   ════════════════════════════════════════════════════════════════ */
html.flow-gating::before {
  content: '';
  position: fixed; inset: 0; z-index: 9998;
  background: #0a0a0c;
}
html.flow-gating.theme-light-pre::before { background: #faf6ec; }
html.flow-gating::after {
  content: '';
  position: fixed; inset: 0; z-index: 9999;
  background: url("flow-mark.svg") no-repeat center / 64px 64px;
  animation: gate-breathe 2s ease-in-out infinite;
}
@keyframes gate-breathe {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.05); }
}
html.flow-gated body { visibility: hidden; }
html.flow-gating body { visibility: hidden; }