/* ── #GTD26 — mobile-first, MD3-flavoured, same palette as Better Tasks ── */
:root {
  --primary:      #1565C0;
  --primary-dk:   #0D47A1;
  --primary-bg:   #E3F2FD;
  --on-primary:   #ffffff;
  --surface:      #ffffff;
  --surface-2:    #f2f4f7;
  --bg:           #f5f5f5;
  --text:         #1c1b1f;
  --text-med:     #5b5b64;
  --text-hint:    #8f8f99;
  --divider:      #e3e3e8;
  --ok:           #1B7F3B;
  --warn:         #B26A00;
  --error:        #C62828;
  --bar-h:        56px;
  --nav-h:        60px;
  --shadow-1:     0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  --shadow-3:     0 6px 20px rgba(0,0,0,.16);
}

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

body {
  font-family: 'Roboto', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; }

/* ── Auth ── */
.fullscreen-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: linear-gradient(160deg, var(--primary), var(--primary-dk));
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.auth-card {
  background: var(--surface); border-radius: 20px; padding: 36px 28px;
  width: 100%; max-width: 400px; box-shadow: var(--shadow-3);
}
.brand-row { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.brand-icon { color: var(--primary); font-size: 30px; }
.brand-icon.sm { font-size: 22px; }
.brand-name { font-size: 22px; font-weight: 700; letter-spacing: -.4px; color: var(--primary); }
.auth-sub { color: var(--text-med); font-size: 14px; line-height: 1.5; margin-bottom: 22px; }
.auth-error { color: var(--error); font-size: 13px; margin-top: 12px; }
.auth-card .btn.text.full { justify-content: center; margin-top: 6px; color: var(--text-med); }

/* ── Demo banner ── */
.banner.action#demo-banner { align-items: center; }
#demo-banner .btn.small { flex: none; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; border-radius: 999px; padding: 10px 18px;
  background: var(--surface-2); color: var(--text);
  font-size: 14px; font-weight: 500; line-height: 1.2;
  transition: filter .15s, background .15s;
}
.btn:hover { filter: brightness(.96); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn .material-icons { font-size: 18px; }
.btn.primary { background: var(--primary); color: var(--on-primary); }
.btn.large { padding: 14px 22px; font-size: 15px; }
.btn.full { width: 100%; }
.btn.small { padding: 6px 14px; font-size: 13px; }
.btn.text { background: transparent; justify-content: flex-start; padding: 12px 8px; }
.btn.text:hover { background: var(--surface-2); }

.icon-btn {
  background: none; border: none; color: var(--text-med);
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:hover { background: rgba(0,0,0,.05); }

.link-btn {
  background: none; border: none; color: var(--text-med);
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; padding: 6px 8px; border-radius: 8px;
}
.link-btn .material-icons { font-size: 16px; }
.link-btn:hover { background: rgba(0,0,0,.05); }
.link-btn.danger { color: var(--error); }

@keyframes spin { to { transform: rotate(360deg); } }
.spinning { animation: spin 1s linear infinite; }

/* ── Busy: instant feedback while a tap waits on the API ──
   The control keeps its box (so nothing reflows), hides its own label and
   spins in place. Applied by Busy.run() to whatever was actually tapped —
   a button, a row's checkmark, a list in the move sheet. */
.is-busy {
  --busy-c: var(--text-med);
  position: relative; pointer-events: none;
  color: transparent !important;             /* hides bare text nodes too */
}
.is-busy > * { visibility: hidden; }
.is-busy::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid var(--busy-c); border-top-color: transparent;
  border-radius: 50%; opacity: .8;
  animation: spin .7s linear infinite;
}
.btn.is-busy:disabled, .move-item.is-busy:disabled { opacity: 1; }   /* the spinner is the cue */
.btn.primary.is-busy { --busy-c: var(--on-primary); }
.act-do.is-busy    { --busy-c: var(--ok); }
.act-div.is-busy   { --busy-c: var(--primary-dk); }
.act-block.is-busy { --busy-c: var(--warn); }
.row-check.is-busy { border-color: transparent; }

/* ── Shell ── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  height: var(--bar-h); display: flex; align-items: center; gap: 8px;
  padding: 0 8px 0 14px; background: var(--surface);
  border-bottom: 1px solid var(--divider);
}
.topbar h1 { font-size: 18px; font-weight: 500; flex: 1; }

#main {
  padding: 12px 12px calc(var(--nav-h) + 24px);
  max-width: 720px; margin: 0 auto;
}

.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  height: var(--nav-h); display: flex;
  background: var(--surface); border-top: 1px solid var(--divider);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-btn {
  flex: 1; border: none; background: none; color: var(--text-hint);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 11px; font-weight: 500;
}
.nav-btn .material-icons { font-size: 22px; }
.nav-btn.active { color: var(--primary); }
.nav-count {
  display: inline-block; margin-left: 4px; min-width: 16px; padding: 0 4px;
  background: var(--primary); color: #fff; border-radius: 999px;
  font-size: 10px; line-height: 16px; text-align: center;
}

/* ── Banners ── */
.banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 12px; margin-bottom: 12px;
  font-size: 13.5px; line-height: 1.4;
}
.banner .material-icons { font-size: 20px; flex: none; }
.banner div { flex: 1; }
.banner.warn   { background: #FFF4E0; color: #6B4400; }
.banner.action { background: var(--primary-bg); color: var(--primary-dk); }
.banner.action .btn { background: var(--primary); color: #fff; }

/* ── Sections & rows ── */
.section {
  background: var(--surface); border-radius: 14px;
  padding: 6px 4px 8px; margin-bottom: 12px; box-shadow: var(--shadow-1);
}
.section-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 12px 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-med);
}
.section-head i { font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-hint); }
.section > .btn.small { margin: 4px 12px 8px; }

.row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 12px; border-radius: 10px; cursor: pointer;
}
.row:hover { background: var(--surface-2); }
.row-check {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  border: 2px solid var(--text-hint); border-radius: 50%;
  background: none; display: flex; align-items: center; justify-content: center;
  color: transparent; transition: all .12s;
}
.row-check .material-icons { font-size: 15px; }
.row-check:hover { border-color: var(--ok); color: var(--ok); }
.row-body { flex: 1; min-width: 0; }
.row-title { font-size: 14.5px; line-height: 1.35; word-break: break-word; }
.row-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }

.ctx     { color: var(--primary); font-weight: 500; }
.proj    { font-weight: 500; }
.hashtag { color: #6A3EA1; font-weight: 500; }

.tag {
  font-size: 11px; line-height: 1.6; padding: 1px 7px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-med); white-space: nowrap;
}
.tag.overdue  { background: #FDECEC; color: var(--error); font-weight: 500; }
.tag.due      { background: var(--primary-bg); color: var(--primary-dk); }
.tag.list     { background: #ECECF2; }
.tag.proj-tag { background: #EAF6EC; color: var(--ok); }
.tag.clickable { cursor: pointer; }
.tag.clickable:hover { filter: brightness(.94); text-decoration: underline; }
/* "+ date" on an undated review card — an offer, not a suggestion: Rule 1
   says most things never earn one, so it stays the quietest chip there. */
.tag.add-date {
  background: none; border: 1px dashed var(--divider); color: var(--text-hint);
  padding: 0 7px;
}

.empty-note { padding: 6px 12px 8px; font-size: 13px; color: var(--text-hint); line-height: 1.45; }

/* ── Daily scoreboard ──
   Four rings on the Now view, the same four series as bars in the sheet.
   One hue per KPI, reused in both places so a colour means one thing. */
.kpi-band { padding-bottom: 4px; }
.kpi-band .kpi-streak { color: var(--warn); font-weight: 500; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 2px 6px 6px; }
.kpi-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; }

.kpi-ring { position: relative; display: block; width: 44px; height: 44px; }
.kpi-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.kpi-ring circle { fill: none; stroke-width: 4; }
.kpi-ring .kpi-track { stroke: var(--surface-2); }
.kpi-ring .kpi-arc { stroke: var(--kpi-c); stroke-linecap: round; transition: stroke-dasharray .35s ease; }
.kpi-ring b {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; color: var(--kpi-c);
}
.kpi-ring.zero b { color: var(--text-hint); }

/* One hue per KPI — --kpi-c is read by both the ring and the history bars. */
.k-ok   { --kpi-c: var(--ok); }
.k-pro  { --kpi-c: #6A3EA1; }
.k-pri  { --kpi-c: var(--primary); }
.k-warn { --kpi-c: var(--warn); }

.kpi-label { font-size: 11.5px; font-weight: 500; color: var(--text); }
.kpi-goal { font-size: 10px; color: var(--text-hint); }
.kpi-tile.met .kpi-goal { color: var(--ok); font-weight: 500; }

.kpi-more {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: calc(100% - 12px); margin: 2px 6px 4px;
  border: none; border-radius: 10px; padding: 8px;
  background: none; color: var(--text-med); font-size: 12.5px;
}
.kpi-more:hover { background: var(--surface-2); }
.kpi-more .material-icons { font-size: 16px; }

/* ── Progress sheet ── */
.kpi-hist { margin-top: 18px; }
.kpi-hist-head {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-med);
}
.kpi-hist-head i {
  flex: 1; text-align: right; font-style: normal; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: var(--text-hint); font-size: 11.5px;
}
.kpi-hist-head i b { color: var(--kpi-c, var(--text-med)); }

/* The dashed line is the target: bars that clear it met the day's goal. */
.kpi-bars {
  position: relative; display: flex; align-items: flex-end; gap: 3px;
  height: 46px; margin-top: 8px; padding-bottom: 1px;
  border-bottom: 1px solid var(--divider);
}
.kpi-bars::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: var(--target);
  border-top: 1px dashed var(--divider);
}
.kpi-bar {
  flex: 1; height: var(--h); min-height: 2px; border-radius: 3px 3px 0 0;
  background: var(--kpi-c); opacity: .3;
}
.kpi-bar.met { opacity: .85; }
.kpi-bar.is-today { outline: 1px solid var(--kpi-c); outline-offset: 1px; }
.kpi-hist-hint { margin-top: 6px; font-size: 11.5px; color: var(--text-hint); line-height: 1.4; }

.kpi-backlog { margin-top: 24px; }
.kpi-backlog .rules-table { margin-top: 8px; }
.kpi-backlog .rules-table td { font-size: 13.5px; }
.kpi-backlog .rules-table td:first-child { color: var(--text); }
.kpi-now { text-align: right; font-weight: 500; width: 60px; }
.kpi-delta { text-align: right; font-size: 12px; width: 40%; }
.kpi-delta.good { color: var(--ok); }
.kpi-delta.bad  { color: var(--warn); }
.kpi-delta.flat { color: var(--text-hint); }

/* ── Drag-to-reorder (Next/Pro rows, Now view) ── */
.row.draggable { cursor: grab; }
.row.dragging { opacity: .25; pointer-events: none; }
.row.drop-target-before { box-shadow: inset 3px 0 0 var(--primary); border-radius: 10px; }
.row-drag-ghost {
  position: absolute; z-index: 900; pointer-events: none;
  background: var(--surface); box-shadow: var(--shadow-3);
  border-radius: 10px;
}

/* ── Review ── */
.queue-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; }
.qtab {
  flex: none; border: 1px solid var(--divider); background: var(--surface);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; color: var(--text-med);
}
.qtab i { font-style: normal; margin-left: 5px; color: var(--text-hint); font-size: 11px; }
.qtab.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.qtab.active i { color: rgba(255,255,255,.8); }

.review-progress { font-size: 12px; color: var(--text-hint); padding: 4px 2px 8px; }
.review-card {
  background: var(--surface); border-radius: 16px; padding: 20px 18px;
  box-shadow: var(--shadow-1); min-height: 150px;
}
.card-title { font-size: 20px; line-height: 1.3; font-weight: 500; word-break: break-word; }
.card-notes {
  margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--text-med);
  white-space: pre-wrap; max-height: 200px; overflow-y: auto;
}
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.card-ask {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--divider);
  font-size: 12.5px; color: var(--text-hint); line-height: 1.45;
}

/* Auto-flow columns rather than a fixed count: the "→ Next" button is
   hidden on a card that is already in Next or Pro, and the row has to
   close up rather than leave a gap. */
.review-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin-top: 14px; }
.review-actions .btn { flex-direction: column; gap: 3px; padding: 12px 2px; font-size: 11.5px; }
.review-actions .btn .material-icons { font-size: 22px; }
.act-do    { background: #E4F4E8; color: var(--ok); }
.act-div   { background: var(--primary-bg); color: var(--primary-dk); }
.act-block { background: #FFF4E0; color: var(--warn); }
.act-next  { background: #E8EAF6; color: #303F9F; }
.act-skip  { background: var(--surface-2); color: var(--text-med); }

.review-extra { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px; margin-top: 10px; }
.review-empty {
  background: var(--surface); border-radius: 16px; padding: 44px 20px;
  text-align: center; color: var(--text-hint); box-shadow: var(--shadow-1);
}
.review-empty .material-icons { font-size: 40px; color: var(--ok); opacity: .5; }
.review-empty p { margin-top: 10px; font-size: 14px; }

/* ── Fields ── */
.field-label {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-med); margin: 16px 2px 6px;
}
.field-label .hint { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-hint); }
.field {
  width: 100%; border: 1px solid var(--divider); border-radius: 12px;
  background: var(--surface); padding: 12px 14px;
  font: inherit; font-size: 15px; color: var(--text);
}
.field:focus { outline: 2px solid var(--primary); outline-offset: -1px; border-color: transparent; }
.field.area { resize: vertical; line-height: 1.45; }

.field-row { display: flex; gap: 8px; }
.field-row .field { flex: 1; min-width: 0; }

.suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pill {
  border: 1px solid var(--divider); background: var(--surface);
  border-radius: 999px; padding: 5px 12px; font-size: 13px; color: var(--primary);
  display: inline-flex; align-items: center; gap: 6px;
}
.pill i { font-style: normal; font-size: 10px; color: var(--text-hint); }
.pill:hover { background: var(--primary-bg); }
.pill.proj { color: var(--text); }
.pill.tagpill { color: #6A3EA1; }
.pill.tagpill:hover { background: #F0E7FB; }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--divider); background: var(--surface); color: var(--text-med);
  border-radius: 999px; padding: 8px 14px; font-size: 13.5px;
}
.chip.selected { background: var(--primary); border-color: var(--primary); color: #fff; }

/* ── Context filter: tri-state chips + topbar badge ── */
.filter-chips { margin-top: 4px; max-height: 46vh; overflow-y: auto; }
.chip.inc {
  background: var(--primary); border-color: var(--primary); color: #fff;
}
.chip.exc {
  background: #FDECEC; border-color: #F3C6C6; color: var(--error);
  text-decoration: line-through;
}
.chip .chip-mark { font-size: 15px; margin-right: 3px; vertical-align: -3px; }
.chip .chip-n { font-size: 10px; opacity: .65; margin-left: 5px; }

.filter-badge {
  position: absolute; top: 6px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--primary); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.icon-btn { position: relative; }

.filter-note {
  font-size: 11.5px; color: var(--text-hint); margin: 6px 2px 0;
}
.chip-sub { opacity: .65; font-size: 11px; margin-left: 4px; }

.cap-head { display: flex; justify-content: flex-end; margin-bottom: 4px; }
#cap-save { margin-top: 22px; }
.foot-note { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--text-hint); }

/* ── Sheets & modals ── */
.sheet-overlay {
  position: fixed; inset: 0; z-index: 800; background: rgba(0,0,0,.4);
  display: flex; align-items: flex-end; justify-content: center;
}
.sheet {
  background: var(--surface); width: 100%; max-width: 560px;
  border-radius: 20px 20px 0 0; padding: 18px 18px calc(20px + env(safe-area-inset-bottom));
  max-height: 88dvh; overflow-y: auto; box-shadow: var(--shadow-3);
}
.sheet.tall { max-height: 92dvh; }
.sheet-head { display: flex; align-items: center; gap: 8px; }
.sheet-head h2 { flex: 1; font-size: 17px; font-weight: 500; line-height: 1.3; }
.sheet-hint { font-size: 13px; color: var(--text-med); line-height: 1.45; margin-top: 6px; }
.sheet-for {
  font-size: 14.5px; line-height: 1.35; margin-top: 8px;
  color: var(--text); word-break: break-word;
}
.sheet-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.sheet-actions.vertical { flex-direction: column; margin-top: 14px; }
.sheet-actions.vertical .btn { width: 100%; }

@media (min-width: 640px) {
  .sheet-overlay { align-items: center; }
  .sheet { border-radius: 20px; }
}

/* ── Move sheet ── */
.move-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.move-item {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; text-align: left;
  border: 1px solid var(--divider); border-radius: 12px; padding: 12px 14px;
  background: var(--surface); color: var(--text); font-size: 14.5px;
}
.move-item:hover:not(:disabled) { background: var(--surface-2); }
.move-item:disabled { color: var(--primary); border-color: var(--primary); font-weight: 500; cursor: default; }
.move-item .material-icons { font-size: 18px; color: var(--primary); }

/* ── Shortcuts ── */
kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  background: var(--surface-2); border: 1px solid var(--divider); border-radius: 5px;
  padding: 1px 6px; color: var(--text);
}

/* ── Rules ── */
.rules-body { font-size: 13.5px; line-height: 1.55; color: var(--text); margin-top: 12px; }
.rules-body p { margin-top: 12px; }
.rules-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; background: var(--surface-2); padding: 1px 5px; border-radius: 5px; }
.rules-table { width: 100%; border-collapse: collapse; }
.rules-table td { padding: 6px 8px 6px 0; vertical-align: top; border-bottom: 1px solid var(--divider); }
.rules-table td:first-child { white-space: nowrap; color: var(--primary); }
.rules-body .src { margin-top: 18px; font-size: 12px; color: var(--text-hint); }
.rules-body .src a { color: var(--primary); text-decoration: none; }
.rules-body .src a:hover { text-decoration: underline; }

/* ── Snackbar ── */
.snackbar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--nav-h) + 14px); z-index: 950;
  background: #303036; color: #fff; border-radius: 10px;
  padding: 11px 18px; font-size: 13.5px; max-width: calc(100% - 32px);
  box-shadow: var(--shadow-3);
}

/* ── Weekly review run ──
   A banner rather than a screen of its own: the review is done *in* the
   normal surfaces, one step at a time, so the step has to sit above
   whichever view the step is about. */
.banner.wr {
  display: block; background: var(--primary-dk); color: #fff;
  padding: 14px 16px;
}
.wr-head { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.wr-head b { opacity: 1; font-weight: 700; }
.wr-step { font-size: 17px; font-weight: 500; margin-top: 3px; }
.wr-hint { font-size: 13px; line-height: 1.45; opacity: .85; margin-top: 4px; }

.wr-dots { display: flex; gap: 6px; margin-top: 12px; }
.wr-dot {
  flex: 1; height: 4px; border: none; border-radius: 2px; padding: 0;
  background: rgba(255,255,255,.28);
}
.wr-dot.past { background: rgba(255,255,255,.55); }
.wr-dot.on   { background: #fff; }

.wr-actions { display: flex; gap: 8px; margin-top: 12px; }
.banner.wr .btn.small { background: rgba(255,255,255,.16); color: #fff; }
.banner.wr .btn.small.primary { background: #fff; color: var(--primary-dk); font-weight: 500; }
.banner.wr .btn.small.text { background: none; color: rgba(255,255,255,.8); }

/* ── Search over the review queues ── */
.search-row {
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--divider);
  border-radius: 999px; padding: 0 6px 0 12px;
}
.search-row .material-icons { font-size: 20px; color: var(--text-hint); }
.search-input {
  flex: 1; border: none; outline: none; background: none;
  font: inherit; font-size: 14px; color: var(--text);
  padding: 9px 0; min-width: 0;
}
.search-input::-webkit-search-cancel-button { display: none; }
.search-row .icon-btn { width: 32px; height: 32px; }
.search-row .icon-btn .material-icons { font-size: 18px; }

/* ── Done, and the trail each project leaves ── */
.done-list { margin-top: 10px; }
.done-day {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-hint); margin: 12px 0 4px;
}
.done-day:first-child { margin-top: 0; }
.done-row { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; }
.done-row .material-icons { font-size: 16px; color: var(--ok); margin-top: 2px; flex: none; }
.done-title { font-size: 13.5px; line-height: 1.4; color: var(--text-med); word-break: break-word; }

.trails { margin-top: 10px; }
.trail {
  border-left: 2px solid var(--divider); padding: 2px 0 2px 12px;
  margin-bottom: 14px;
}
.trail-head { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.trail-head i {
  flex: 1; text-align: right; font-style: normal;
  font-size: 11.5px; color: var(--text-hint);
}
.trail-step {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 13px; line-height: 1.4; margin-top: 5px; color: var(--text-med);
}
.trail-step .material-icons { font-size: 15px; margin-top: 1px; flex: none; }
.trail-step.done .material-icons { color: var(--ok); }
.trail-step.next { color: var(--text); }
.trail-step.next .material-icons { color: var(--primary); }
.trail-step.none { color: var(--warn); }