/* ==========================================================================
   The Flow — Upgrade Pack v1.0  ·  stylesheet
   Scoped under .flow-x / .flow-* so nothing here can clobber existing rules.
   ========================================================================== */

.flow-x {
  --f-surface:      #141b1e;
  --f-surface-2:    #1b2427;
  --f-plane:        #0a0d0e;
  --f-ink:          #ffffff;
  --f-ink-2:        #b9c6cc;
  --f-muted:        #8a98a0;
  --f-line:         rgba(255,255,255,0.09);
  --f-grid:         rgba(255,255,255,0.06);

  --f-accent:       #17bb92;   /* validated: contrast 3:1+ on #151c1f */
  --f-accent-soft:  rgba(23,187,146,0.14);
  --f-accent-2:     #3987e5;   /* categorical slot 1, dark  */

  /* sequential aqua ramp — ordinal-validated, monotone L, single hue */
  --f-seq-1: #0b5f4a; --f-seq-2: #0e7a5f; --f-seq-3: #129a78;
  --f-seq-4: #17bb92; --f-seq-5: #2fd4a8;

  /* status — fixed, never themed, always paired with icon + label */
  --f-good:     #0ca30c;
  --f-warning:  #fab219;
  --f-serious:  #ec835a;
  --f-critical: #d03b3b;

  --f-radius: 12px;
  --f-radius-sm: 8px;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--f-ink);
}

/* ---------- sections we own ------------------------------------------- */
.flow-section { display: none; }
.flow-section.active { display: block; }

/* ---------- layout primitives ----------------------------------------- */
.flow-card {
  background: var(--f-surface);
  border: 1px solid var(--f-line);
  border-radius: var(--f-radius);
  padding: 18px 20px;
  margin: 14px 0;
}
.flow-card > h3 {
  margin: 0 0 4px; font-size: 15px; font-weight: 700; letter-spacing: .01em;
}
.flow-card > .flow-sub { margin: 0 0 14px; color: var(--f-muted); font-size: 12.5px; line-height: 1.5; }

.flow-grid { display: grid; gap: 14px; }
.flow-grid.c2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.flow-grid.c3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.flow-grid.c4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }


.flow-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.flow-row.between { justify-content: space-between; }
.flow-spacer { flex: 1 1 auto; }

/* ---------- controls --------------------------------------------------- */
.flow-btn {
  appearance: none; cursor: pointer;
  background: var(--f-surface-2); color: var(--f-ink);
  border: 1px solid var(--f-line); border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 600;
  font-family: inherit; line-height: 1.2;
  transition: background .12s ease, border-color .12s ease, transform .08s ease;
}
.flow-btn:hover { background: #232e32; border-color: rgba(255,255,255,.18); }
.flow-btn:active { transform: translateY(1px); }
.flow-btn.primary { background: var(--f-accent); color: #05231b; border-color: transparent; }
.flow-btn.primary:hover { background: var(--f-seq-5); }
.flow-btn.ghost { background: transparent; }
.flow-btn.danger { color: #ffbdbd; border-color: rgba(208,59,59,.45); }
.flow-btn.danger:hover { background: rgba(208,59,59,.16); }
.flow-btn[disabled] { opacity: .45; cursor: not-allowed; }
.flow-btn.sm { padding: 4px 10px; font-size: 11.5px; }

.flow-in, .flow-x select, .flow-x textarea {
  background: var(--f-plane); color: var(--f-ink);
  border: 1px solid var(--f-line); border-radius: var(--f-radius-sm);
  padding: 8px 10px; font-size: 13px; font-family: inherit;
  outline: none; min-width: 0;
}
.flow-in:focus, .flow-x select:focus, .flow-x textarea:focus { border-color: var(--f-accent); }
.flow-in::placeholder { color: #5d6a71; }
.flow-in.grow { flex: 1 1 220px; }
.flow-x textarea { width: 100%; resize: vertical; min-height: 80px; line-height: 1.55; }
.flow-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--f-muted); font-weight: 700; }
.flow-field { display: flex; flex-direction: column; gap: 6px; }

.flow-switch { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--f-grid); }
.flow-switch:last-child { border-bottom: 0; }
.flow-switch .t { flex: 1; }
.flow-switch .t b { display: block; font-size: 13px; font-weight: 600; }
.flow-switch .t span { display: block; font-size: 11.5px; color: var(--f-muted); margin-top: 2px; line-height: 1.45; }
.flow-switch input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--f-accent); cursor: pointer; }

/* ---------- stat tiles -------------------------------------------------- */
.flow-stat {
  background: var(--f-surface); border: 1px solid var(--f-line);
  border-radius: var(--f-radius); padding: 16px 18px;
}
.flow-stat .v { font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -.01em; }
.flow-stat .l { margin-top: 6px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--f-muted); font-weight: 700; }
.flow-stat .d { margin-top: 6px; font-size: 11.5px; color: var(--f-ink-2); }
.flow-hero { font-size: 52px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }

/* ---------- timeline ---------------------------------------------------- */
.flow-tl { list-style: none; margin: 0; padding: 0; }
.flow-tl li {
  display: grid; grid-template-columns: 62px 1fr auto; gap: 12px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--f-grid);
}
.flow-tl li:last-child { border-bottom: 0; }
.flow-tl .tm { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; color: var(--f-accent); }
.flow-tl .tm.none { color: var(--f-muted); font-weight: 500; }
.flow-tl .tx { font-size: 13.5px; line-height: 1.4; }
.flow-tl .tx small { display: block; color: var(--f-muted); font-size: 11px; margin-top: 2px; }
.flow-tl li.done .tx { text-decoration: line-through; opacity: .5; }

.flow-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--f-surface-2); border: 1px solid var(--f-line);
  border-radius: 999px; padding: 2px 9px; font-size: 11px; color: var(--f-ink-2);
  white-space: nowrap;
}
.flow-chip.accent { background: var(--f-accent-soft); border-color: rgba(23,187,146,.35); color: #7ff0cd; }

.flow-empty { color: var(--f-muted); font-size: 12.5px; padding: 14px 0; line-height: 1.55; }

/* ---------- schedule chip injected into existing task rows -------------- */
.flow-time-chip {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 6px; padding: 1px 8px;
  font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums;
  border-radius: 999px; cursor: pointer; user-select: none;
  background: transparent; border: 1px dashed rgba(255,255,255,.22); color: #7c8b93;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  vertical-align: middle; line-height: 1.6;
}
/* Label comes from a pseudo-element, so it never appears in the row's
   textContent and can never be picked up by the host app's own saves. */
.flow-time-chip::after { content: attr(data-label); }
.flow-time-chip:hover { border-color: var(--f-accent); color: var(--f-accent); }
.flow-time-chip.set {
  border-style: solid; border-color: rgba(23,187,146,.45);
  background: rgba(23,187,146,.14); color: #7ff0cd;
}

.flow-pop {
  position: absolute; z-index: 99999; width: 288px;
  background: var(--f-surface); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--f-radius); padding: 14px;
  box-shadow: 0 18px 48px rgba(0,0,0,.6);
}
.flow-pop h4 { margin: 0 0 10px; font-size: 12.5px; font-weight: 700; line-height: 1.4; }
.flow-pop .g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.flow-pop .flow-in { width: 100%; }

/* ---------- toast ------------------------------------------------------- */
#flow-toasts { position: fixed; right: 18px; bottom: 18px; z-index: 100000; display: flex; flex-direction: column; gap: 8px; }
.flow-toast {
  background: var(--f-surface); border: 1px solid var(--f-line); border-left: 3px solid var(--f-accent);
  color: var(--f-ink); padding: 10px 14px; border-radius: 10px; font-size: 12.5px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5); max-width: 340px; line-height: 1.45;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  animation: flow-in .18s ease;
}
.flow-toast.err { border-left-color: var(--f-critical); }
.flow-toast.warn { border-left-color: var(--f-warning); }
@keyframes flow-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- notes: bracket tree ---------------------------------------- */
.flow-bracket {
  border: 1px solid var(--f-line); border-left: 3px solid var(--f-seq-3);
  border-radius: 10px; padding: 10px 12px; margin: 8px 0;
  background: rgba(255,255,255,.015);
}
.flow-bracket .bh { display: flex; align-items: center; gap: 8px; }
.flow-bracket .bh .tw {
  background: none; border: 0; color: var(--f-muted); cursor: pointer;
  font-size: 11px; width: 18px; padding: 0; font-family: inherit;
}
.flow-bracket .bh .bt {
  flex: 1; background: transparent; border: 0; color: var(--f-ink);
  font-size: 13.5px; font-weight: 700; padding: 3px 0; outline: none; font-family: inherit;
}
.flow-bracket .bh .bt:focus { border-bottom: 1px solid var(--f-accent); }
.flow-bracket .bb { margin-top: 8px; }
.flow-bracket.collapsed .bb { display: none; }
.flow-bracket .kids { margin-left: 16px; padding-left: 10px; border-left: 1px dashed var(--f-line); }
.flow-bracket .bactions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.flow-note-status { font-size: 11.5px; color: var(--f-muted); }
.flow-note-status.ok { color: var(--f-good); }
.flow-note-status.pending { color: var(--f-warning); }

/* ---------- tables ------------------------------------------------------ */
.flow-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.flow-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--f-muted); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--f-line);
  white-space: nowrap;
}
.flow-table td { padding: 8px 10px; border-bottom: 1px solid var(--f-grid); vertical-align: middle; }
.flow-table tr:last-child td { border-bottom: 0; }
.flow-table td.num, .flow-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.flow-table tbody tr:hover { background: rgba(255,255,255,.03); }
.flow-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ---------- charts ------------------------------------------------------ */
.flow-chart { width: 100%; display: block; overflow: visible; }
.flow-chart .grid { stroke: var(--f-grid); stroke-width: 1; }
.flow-chart .axis { stroke: rgba(255,255,255,.14); stroke-width: 1; }
.flow-chart text { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
.flow-chart .lbl { fill: var(--f-ink-2); font-size: 11.5px; }
.flow-chart .val { fill: var(--f-ink); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.flow-chart .tick { fill: var(--f-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.flow-chart .bar { fill: var(--f-accent); }
.flow-chart .bar:hover { fill: var(--f-seq-5); }
.flow-chart .line { fill: none; stroke: var(--f-accent-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.flow-chart .dot { fill: var(--f-accent-2); stroke: var(--f-surface); stroke-width: 2; }

.flow-tip {
  position: fixed; z-index: 100001; pointer-events: none;
  background: #0b1113; border: 1px solid rgba(255,255,255,.18); border-radius: 8px;
  padding: 7px 10px; font-size: 11.5px; color: #fff; white-space: nowrap;
  box-shadow: 0 10px 26px rgba(0,0,0,.55);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- receipt preview -------------------------------------------- */
.flow-receipt { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.flow-receipt img {
  max-width: 190px; max-height: 250px; border-radius: 10px;
  border: 1px solid var(--f-line); display: block;
}
.flow-drop {
  border: 1.5px dashed rgba(255,255,255,.2); border-radius: var(--f-radius);
  padding: 26px 18px; text-align: center; cursor: pointer; color: var(--f-muted);
  font-size: 13px; transition: border-color .15s ease, background .15s ease; line-height: 1.55;
}
.flow-drop:hover, .flow-drop.over { border-color: var(--f-accent); background: var(--f-accent-soft); color: var(--f-ink); }
.flow-prog { height: 4px; background: var(--f-surface-2); border-radius: 999px; overflow: hidden; margin-top: 10px; }
.flow-prog i { display: block; height: 100%; background: var(--f-accent); width: 0%; transition: width .2s ease; }

.flow-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 12.5px; }
.flow-kv dt { color: var(--f-muted); }
.flow-kv dd { margin: 0; }

.flow-code {
  background: var(--f-plane); border: 1px solid var(--f-line); border-radius: 8px;
  padding: 10px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--f-ink-2); overflow-x: auto; white-space: pre; line-height: 1.6;
}
.flow-ol { margin: 8px 0 0; padding-left: 20px; font-size: 12.5px; color: var(--f-ink-2); line-height: 1.7; }
.flow-ol li { margin-bottom: 4px; }

/* ==========================================================================
   Visual language — breakdowns, empty states, journal
   ========================================================================== */

/* ---------- designed empty state (replaces the stretched grey blob) ------ */
.flow-nodata {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 30px 18px; text-align: center; gap: 4px; min-height: 190px;
}
.flow-nodata svg { opacity: .8; margin-bottom: 10px; }
.flow-nodata .t { font-size: 13.5px; font-weight: 600; color: var(--f-ink-2); }
.flow-nodata .s { font-size: 12px; color: var(--f-muted); max-width: 300px; line-height: 1.55; }

/* ---------- donut ------------------------------------------------------- */
.flow-donut-wrap {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  padding: 6px 0 2px;
}
.flow-donut {
  position: relative; flex: 0 0 auto;
  width: 210px; height: 210px;          /* square in BOTH axes — the whole fix */
}
.flow-donut svg { width: 100%; height: 100%; display: block; }
.flow-donut-mid {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; pointer-events: none; text-align: center;
}
.flow-donut-mid .v {
  font-size: clamp(17px, 2.1vw, 24px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  max-width: 128px; white-space: nowrap;
}
.flow-donut-mid .l {
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--f-muted); font-weight: 700; margin-top: 4px;
}
.flow-chart .slice {
  transition: stroke-dasharray .5s cubic-bezier(.22,.61,.36,1), opacity .15s ease;
  animation: flow-arc .55s cubic-bezier(.22,.61,.36,1) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.flow-chart .slice:hover { opacity: .82; }
@keyframes flow-arc { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .flow-chart .slice { animation: none; transition: none; } }

/* Capped so the legend reads as one block beside the ring instead of
   stretching its values to the far edge of a wide card. */
.flow-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 260px; min-width: 210px; max-width: 440px; }
.flow-legend li {
  display: grid; grid-template-columns: 10px 1fr auto auto; gap: 10px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--f-grid); font-size: 12.5px;
}
.flow-legend li:last-child { border-bottom: 0; }
.flow-legend i { width: 10px; height: 10px; border-radius: 3px; display: block; }
.flow-legend .n { color: var(--f-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flow-legend .p { color: var(--f-muted); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.flow-legend .v { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- segmented control ------------------------------------------- */
.flow-seg {
  display: inline-flex; background: var(--f-plane); border: 1px solid var(--f-line);
  border-radius: 999px; padding: 2px;
}
.flow-seg button {
  appearance: none; border: 0; background: transparent; color: var(--f-muted);
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  padding: 4px 12px; border-radius: 999px; cursor: pointer; transition: all .14s ease;
}
.flow-seg button.on { background: var(--f-accent); color: #05231b; }
.flow-seg button:not(.on):hover { color: var(--f-ink); }

.flow-viz { margin-top: 6px; }
.flow-chart .bar { transition: fill .14s ease; }

/* ---------- journal ------------------------------------------------------ */
.flow-log-collapsed > *:not(.flow-x) { display: none !important; }

.flow-jentry {
  border: 1px solid var(--f-line); border-radius: var(--f-radius);
  padding: 15px 17px; margin: 10px 0; background: rgba(255,255,255,.014);
  transition: border-color .15s ease;
}
.flow-jentry:hover { border-color: rgba(255,255,255,.16); }
.flow-jbody {
  margin: 10px 0 0; font-size: 13.5px; line-height: 1.68; color: var(--f-ink-2);
  white-space: pre-wrap; word-break: break-word;
}
.flow-jprompt {
  margin-top: 9px; padding-left: 11px; border-left: 2px solid var(--f-seq-2);
  font-size: 12.5px; line-height: 1.6;
}
.flow-jprompt b { display: block; color: var(--f-muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; }
.flow-jprompt span { color: var(--f-ink-2); }

.flow-x .jr-mood, .flow-x .jr-energy { padding: 4px 9px; font-size: 13px; line-height: 1.2; }
.flow-x #jr-body { font-size: 14px; line-height: 1.7; }

@media print { .flow-btn, .flow-time-chip, .flow-seg { display: none !important; } }

/* ---------- Today: folded groups ---------------------------------------- */
.flow-fold .td-group-head {
  cursor: pointer;
  position: relative;
  padding-right: 22px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.flow-fold .td-group-head:active { opacity: .7; }
.flow-fold .flow-fold-chev {
  position: absolute; right: 2px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  opacity: .5;
  transform: rotate(45deg);
  transition: transform .18s ease, opacity .18s ease;
}
.flow-fold.is-open .flow-fold-chev { transform: rotate(-135deg); margin-top: -2px; opacity: .8; }
/* The progress bar under the head stays visible when folded — it is the
   summary. Only the rows themselves collapse. */
.flow-fold .td-row,
.flow-fold .td-empty-row { display: none; }
.flow-fold.is-open .td-row { display: flex; }
.flow-fold.is-open .td-empty-row { display: block; }
@media (prefers-reduced-motion: reduce) { .flow-fold .flow-fold-chev { transition: none; } }

/* ---------- Today: pulse strip + injected sections ---------------------- */
.flow-td-pulse {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
  margin: 14px 0 4px;
}
.flow-td-tile {
  appearance: none; cursor: pointer; text-align: left;
  background: var(--f-surface); border: 1px solid var(--f-line);
  border-radius: 12px; padding: 9px 8px 10px;
  display: flex; flex-direction: column; gap: 1px;
  font-family: inherit; color: var(--f-ink);
  -webkit-tap-highlight-color: transparent;
  transition: border-color .14s ease, background .14s ease;
}
.flow-td-tile:active { background: var(--f-surface-2); }
.flow-td-tile .l {
  font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--f-muted); font-weight: 800;
}
.flow-td-tile .v { font-size: 19px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.flow-td-tile .s { font-size: 9.5px; color: var(--f-muted); line-height: 1.3; }
/* Status tone is paired with the number and its label, never colour alone. */
.flow-td-tile.good .v { color: #2fd4a8; }
.flow-td-tile.warn .v { color: var(--f-warning); }
.flow-td-tile.bad  .v { color: #ff7a7a; }
.flow-td-tile.bad  { border-color: rgba(208,59,59,.35); }

.flow-td-sec { margin: 18px 0 0; }
/* The host's own groups carry no top margin, so one following an injected
   section collided with it. */
.flow-td + .td-group, .flow-td + .td-rocks { margin-top: 20px; }
.flow-td-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 7px; border-bottom: 1px solid var(--f-line); margin-bottom: 2px;
}
.flow-td-head .l {
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--f-muted); font-weight: 800;
}
.flow-td-head .c { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--f-ink-2); }
.flow-td-head .c.ok  { color: #2fd4a8; }
.flow-td-head .c.bad { color: #ff7a7a; }

.flow-td-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--f-grid);
  font-size: 14px; line-height: 1.4;
}
.flow-td-row:last-child { border-bottom: 0; }
.flow-td-row .tx { flex: 1; min-width: 0; }
.flow-td-row .mt { font-size: 11px; color: var(--f-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.flow-td-row.od .mt { color: #ff9a9a; }
.flow-td-row[data-q], .flow-td-row[data-hb] { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.flow-td-row[data-q]:active, .flow-td-row[data-hb]:active { opacity: .6; }

.flow-td-row .bx {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px;
  border: 1.5px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: #05231b;
}
.flow-td-row.done .bx { background: #2fd4a8; border-color: #2fd4a8; }
.flow-td-row.done .tx { text-decoration: line-through; opacity: .45; }

.flow-td-empty { color: var(--f-muted); font-size: 12.5px; padding: 12px 0; line-height: 1.55; }
.flow-td-note { color: var(--f-muted); font-size: 11.5px; padding: 7px 0 0; }
.flow-td-bar { height: 5px; background: var(--f-surface-2); border-radius: 999px; overflow: hidden; margin-top: 10px; }
.flow-td-bar i { display: block; height: 100%; background: var(--f-accent); border-radius: 999px; }
.flow-td-bar i.over { background: var(--f-critical); }

@media (max-width: 400px) {
  .flow-td-tile .v { font-size: 17px; }
  .flow-td-pulse { gap: 5px; }
}

/* ---------- sign-in ------------------------------------------------------ *
   The recovery-code screen is the same card on the same black ground. It is
   shown in the same moments the sign-in screen is — before the app exists for
   this person — so it gets the same treatment rather than a dialog floating
   over a dashboard they cannot use yet. */
#flow-auth, #flow-codes {
  position: fixed; inset: 0; z-index: 2147483000;
  background: #0a0d0e;
  display: flex; align-items: center; justify-content: center;
  padding: 22px; overflow-y: auto;
}
#flow-auth .fa-card, #flow-codes .fa-card {
  width: 100%; max-width: 380px;
  background: var(--f-surface); border: 1px solid var(--f-line);
  border-radius: 18px; padding: 30px 26px 26px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
#flow-auth .fa-brand, #flow-codes .fa-brand { font-size: 21px; font-weight: 400; letter-spacing: -.01em; margin-bottom: 22px; color: var(--f-ink-2); }
#flow-auth .fa-brand b, #flow-codes .fa-brand b { font-weight: 800; color: var(--f-ink); }
#flow-auth .fa-h, #flow-codes .fa-h { margin: 0 0 6px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
#flow-auth .fa-sub, #flow-codes .fa-sub { margin: 0 0 20px; font-size: 12.5px; line-height: 1.55; color: var(--f-muted); }
#flow-auth .flow-label, #flow-codes .flow-label { display: block; margin: 14px 0 6px; }
#flow-auth .flow-in { width: 100%; padding: 11px 12px; font-size: 15px; border-radius: 10px; }
#flow-auth .fa-go, #flow-codes .fa-go { width: 100%; margin-top: 22px; padding: 12px; font-size: 14px; border-radius: 10px; }
#flow-auth .fa-alt { width: 100%; margin-top: 9px; padding: 9px; font-size: 12.5px; border-radius: 10px; color: var(--f-muted); }
#flow-auth .fa-err, #flow-codes .fa-err {
  background: rgba(208,59,59,.14); border: 1px solid rgba(208,59,59,.4);
  color: #ffc2c2; border-radius: 9px; padding: 9px 11px; font-size: 12.5px; line-height: 1.5;
  margin-bottom: 4px;
}
/* The codes are going to be copied by hand off this screen onto paper, so
   they are set larger and looser than any other text in the app. */
#flow-codes #fc-list {
  font-size: 14.5px; line-height: 1.9; letter-spacing: .06em;
  text-align: center; margin: 0; padding: 14px 10px;
  user-select: all; -webkit-user-select: all;
}
#flow-codes .fa-go[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- markets strip ------------------------------------------------ */
.flow-mkt { margin: 10px 0 4px; }
.flow-mkt-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px;
}
@media (max-width: 560px){ .flow-mkt-row { grid-template-columns: repeat(2, 1fr); } }
.flow-mkt-tile {
  background: var(--f-surface); border: 1px solid var(--f-line);
  border-radius: var(--f-radius); padding: 9px 10px;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.flow-mkt-tile.dim { opacity: .45; }
.flow-mkt-tile .l { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--f-muted); }
.flow-mkt-tile .v { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-mkt-note { margin-top: 6px; font-size: 11.5px; color: var(--f-muted); }

/* ---------- database status line, inside Today ----------------------------
 * The phone's only copy of the pill and the save line — the header cluster is
 * hidden there. On desktop the header still carries them, so this line would
 * be a duplicate; it stays phone-only. .dbind/.saveind styling is the host's.
 * ------------------------------------------------------------------------- */
.flow-dbline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.flow-dbline .saveind { margin-top: 0; text-align: left; }
@media (min-width: 761px) { .flow-dbline { display: none; } }

/* ---------- shared-task inbox -------------------------------------------- */
.flow-inbox-row {
  border: 1px solid var(--f-line); border-radius: var(--f-radius-sm);
  padding: 10px 12px; margin-top: 10px; background: var(--f-surface-2);
}
.flow-inbox-row .t { font-weight: 600; }
.flow-inbox-row .m { font-size: 12px; color: var(--f-muted); margin-top: 2px; }
.flow-inbox-row .n { font-size: 12.5px; color: var(--f-ink-2); margin-top: 6px; white-space: pre-wrap; }
.flow-inbox-row .a { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ---------- the assistant ------------------------------------------------ */
/* ======================================================================
 * Ask — a chat surface, not a form
 *
 * The old panel was a card with a log inside it: the answer sat in a bubble
 * the same colour as the question, the composer was a textarea with a green
 * button beside it, and nothing about it said "conversation". This is the
 * shape people already know — a scrolling thread with the composer docked
 * beneath it, the person's words in a bubble and the assistant's as plain
 * prose, because an answer with lists and paragraphs does not belong in a
 * speech bubble.
 * ==================================================================== */
.ask-shell{
  display:flex; flex-direction:column;
  height:calc(100vh - 250px); min-height:440px; max-height:900px;
}
@media (max-width:760px){ .ask-shell{ height:calc(100dvh - 230px); min-height:0; } }

.ask-scroll{ flex:1; overflow-y:auto; min-height:0; scrollbar-width:thin; }
.ask-scroll::-webkit-scrollbar{ width:8px; }
.ask-scroll::-webkit-scrollbar-thumb{ background:var(--f-line); border-radius:99px; }
.ask-inner{ max-width:720px; margin:0 auto; padding:4px 2px 18px; }

.ask-msg{ margin:20px 0; display:flex; }
.ask-msg:first-child{ margin-top:6px; }
.ask-msg.user{ justify-content:flex-end; }
.ask-bubble{
  background:var(--f-accent-soft); border:1px solid transparent;
  color:var(--f-ink); border-radius:18px 18px 5px 18px;
  padding:11px 15px; font-size:15px; line-height:1.55;
  max-width:82%; white-space:normal; overflow-wrap:anywhere;
}
.ask-body{ font-size:15px; line-height:1.65; color:var(--f-ink); max-width:100%; overflow-wrap:anywhere; }
.ask-body p{ margin:0 0 11px; }
.ask-body p:last-child{ margin-bottom:0; }
.ask-body h4{ margin:16px 0 7px; font-size:14px; font-weight:700; letter-spacing:-.01em; }
.ask-body h4:first-child{ margin-top:0; }
.ask-body ul, .ask-body ol{ margin:0 0 11px; padding-left:20px; }
.ask-body li{ margin:0 0 5px; }
.ask-body code{
  background:var(--f-surface-2); border:1px solid var(--f-line);
  border-radius:5px; padding:1px 5px; font-size:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.ask-body pre{
  background:var(--f-surface-2); border:1px solid var(--f-line);
  border-radius:10px; padding:12px 14px; overflow-x:auto; margin:0 0 11px;
}
.ask-body pre code{ background:none; border:none; padding:0; font-size:12.5px; }
.ask-body strong{ font-weight:700; }

/* The caret that says the words are still arriving. */
.ask-body.writing > :last-child::after{
  content:''; display:inline-block; width:2px; height:1em;
  background:var(--f-accent); margin-left:3px; vertical-align:-2px;
  animation:askCaret 1s steps(2,start) infinite;
}
@keyframes askCaret{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* Thinking: three dots, and a word for what it is doing. Blank space is
   what makes a wait feel like a failure. */
.ask-think{ display:flex; align-items:center; gap:10px; color:var(--f-muted); font-size:13.5px; }
.ask-dots{ display:inline-flex; gap:4px; }
.ask-dots i{
  width:6px; height:6px; border-radius:50%; background:var(--f-muted);
  animation:askDot 1.2s ease-in-out infinite;
}
.ask-dots i:nth-child(2){ animation-delay:.16s }
.ask-dots i:nth-child(3){ animation-delay:.32s }
@keyframes askDot{ 0%,60%,100%{opacity:.25; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)} }

/* ---------- the composer ---------- */
.ask-dock{ flex:none; padding-top:10px; }
.ask-box{
  max-width:720px; margin:0 auto; display:flex; align-items:flex-end; gap:8px;
  background:var(--f-surface-2); border:1px solid var(--f-line);
  border-radius:22px; padding:7px 7px 7px 16px;
  transition:border-color .15s ease;
}
.ask-box:focus-within{ border-color:var(--f-accent); }
.ask-box textarea{
  /* .flow-x textarea sets min-height:80px for the app's note fields, which
     would leave this one three rows tall with nothing in it. A composer
     starts at one line and grows. */
  flex:1; min-width:0; background:none; border:none; resize:none; outline:none;
  color:var(--f-ink); font-family:inherit; font-size:15px; line-height:1.5;
  padding:8px 0; min-height:0; height:38px; max-height:168px; overflow-y:auto;
}
.ask-box textarea::placeholder{ color:var(--f-muted); }
.ask-send{
  flex:none; width:36px; height:36px; border-radius:50%; border:none; cursor:pointer;
  background:var(--f-accent); color:#05231b;
  display:flex; align-items:center; justify-content:center; transition:background .15s ease;
}
.ask-send svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.ask-send.stop svg{ fill:currentColor; stroke:none; }
.ask-send:hover{ background:var(--f-seq-5); }

.ask-foot{
  max-width:720px; margin:7px auto 0; display:flex; justify-content:space-between;
  align-items:center; gap:12px; font-size:11.5px; color:var(--f-muted);
}
.ask-clear{
  background:none; border:none; color:var(--f-muted); font:inherit; font-size:11.5px;
  cursor:pointer; padding:2px 0; text-decoration:underline; text-underline-offset:3px;
}
.ask-clear:hover{ color:var(--f-ink); }

/* ---------- the empty state ---------- */
.ask-empty{ padding:34px 4px 10px; max-width:620px; }
.ask-empty-h{ font-size:21px; font-weight:700; letter-spacing:-.02em; margin-bottom:8px; }
.ask-empty p{ margin:0 0 18px; font-size:14px; line-height:1.6; color:var(--f-muted); }
.ask-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.ask-chip{
  background:var(--f-surface-2); border:1px solid var(--f-line); color:var(--f-ink);
  border-radius:999px; padding:9px 14px; font:inherit; font-size:13px; cursor:pointer;
  text-align:left;
}
.ask-chip:hover{ border-color:var(--f-accent); color:var(--f-accent); }

/* ---------- guest mode ---------------------------------------------------- */
.fa-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; color: var(--f-muted); font-size: 12px; }
.fa-or::before, .fa-or::after { content: ''; flex: 1; height: 1px; background: var(--f-line); }
.fa-fine { margin: 8px 0 0; font-size: 11.5px; color: var(--f-muted); line-height: 1.5; }
#flow-guestbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; font-size: 12.5px;
  background: var(--f-surface); border-top: 1px solid var(--f-line); color: var(--f-ink-2);
}
@media (max-width: 760px){ #flow-guestbar { bottom: 62px; } }
.flow-btn.tiny { padding: 5px 10px; font-size: 12px; }

/* ---------- priorities: let a row breathe on a phone ---------------------
 * The host builds each priority as one non-wrapping flex line: checkbox,
 * text, ✏️, → Rock, the quadrant selector, ×, and (since this pack) a time
 * chip. On a 390px screen the fixed-width controls take ~230px of it, so the
 * text was being squeezed to about 50px — a sentence rendered in a column two
 * words wide, with the × crushed to 8px and the selector clipped.
 *
 * Giving the text its own line and letting the controls wrap underneath costs
 * one row of height and makes the whole thing readable. Unchanged above 760px,
 * where there is room for everything on one line.
 * --------------------------------------------------------------------- */
@media (max-width: 760px) {
  .qitem {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  /* Checkbox and text share the first line; everything else wraps below. */
  .qitem .qt,
  .qitem .qt-edit {
    flex: 1 1 calc(100% - 30px);
    min-width: 0;                 /* flex items default to min-width:auto,
                                     which is what forced the overflow */
    overflow-wrap: anywhere;
  }
  /* First control on the wrapped line pushes the group to the right. */
  .qitem .q-edit { margin-left: auto; }
  /* Stop the small controls being shrunk to slivers. */
  .qitem .q-edit,
  .qitem .q-rock,
  .qitem .q-del,
  .qitem select { flex: 0 0 auto; }
  .qitem .q-del { padding: 2px 8px; }
}


/* ══════════════════════════════════════════════════════════════════════════
 * 29 · Navigation — the iOS bottom bar and the desktop sidebar
 *
 * Purely additive. The host's own .tabs pill row and .mobilenav bottom bar are
 * left in the DOM and hidden, because syncMobileNav() and the swipe handler
 * both still read them. Everything here is new markup layered on top, and
 * every destination is still reached by clicking the host's own pill — so the
 * host's per-section render callbacks fire exactly as they always did.
 * ══════════════════════════════════════════════════════════════════════════ */

:root{
  --fn-bar-h: 54px;
  --fn-side-w: 236px;
  --fn-side-w-sm: 64px;
}

#flow-nav-sprite{display:none;}
.fn-i{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;}

/* ──────────────────────────────────────────────────────────────────────────
 * PHONE — bottom tab bar
 * ────────────────────────────────────────────────────────────────────────── */
#flow-tabbar{display:none;}

@media (max-width:760px){
  /* The host's own bottom bar and its "More" sheet step aside. They stay in
     the DOM so syncMobileNav() keeps working against them. */
  .mobilenav{display:none !important;}
  .moresheet,.morebackdrop{display:none !important;}

  body{padding-bottom:calc(var(--fn-bar-h) + env(safe-area-inset-bottom) + 26px) !important;}

  #flow-tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);align-items:end;
    position:fixed;left:0;right:0;bottom:0;z-index:940;
    padding:7px 6px calc(7px + env(safe-area-inset-bottom));
    background:rgba(14,16,20,.93);
    backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
    border-top:1px solid var(--border);
  }
  #flow-tabbar button{
    background:none;border:0;cursor:pointer;font-family:inherit;color:var(--muted);
    display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;
    padding:6px 2px;min-height:44px;                 /* 44pt minimum touch target */
    -webkit-tap-highlight-color:transparent;transition:color .15s;
  }
  #flow-tabbar button .fn-lb{font-size:9.5px;font-weight:700;letter-spacing:.01em;}
  #flow-tabbar button.on{color:var(--accent);}
  #flow-tabbar button.on .fn-i{stroke-width:2.3;}

  /* The capture button — deliberately the largest target on the screen. */
  #flow-tabbar .fn-cap{align-self:center;}
  #flow-tabbar .fn-cap .fn-knob{
    width:48px;height:48px;border-radius:16px;
    background:linear-gradient(150deg,var(--accent),#0072c6);
    display:grid;place-items:center;color:#fff;
    box-shadow:0 8px 20px -6px rgba(0,147,231,.7);transition:transform .14s;
  }
  #flow-tabbar .fn-cap:active .fn-knob{transform:scale(.93);}
  #flow-tabbar .fn-cap .fn-i{width:24px;height:24px;stroke-width:2.5;}
}

/* ──────────────────────────────────────────────────────────────────────────
 * PHONE — header row (avatar + search), segment bar
 * ────────────────────────────────────────────────────────────────────────── */
#flow-headtools{display:none;}
@media (max-width:760px){
  #flow-headtools{display:flex;align-items:center;gap:9px;margin-left:auto;}
  .fn-icobtn{
    width:38px;height:38px;border-radius:12px;background:var(--card);
    border:1px solid var(--border);color:var(--muted);
    display:grid;place-items:center;cursor:pointer;flex:0 0 auto;
    -webkit-tap-highlight-color:transparent;
  }
  .fn-icobtn:active{background:var(--card2);}
  .fn-avatar{
    width:38px;height:38px;border-radius:50%;flex:0 0 auto;cursor:pointer;
    background:linear-gradient(150deg,var(--accent),var(--purple));
    display:grid;place-items:center;color:#fff;font-size:14px;font-weight:800;
    border:0;font-family:inherit;-webkit-tap-highlight-color:transparent;
  }
}

/* Segment bar — the second level of navigation, inside Focus and Body. */
#flow-seg{
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
  margin:0 0 18px;padding-bottom:2px;-webkit-overflow-scrolling:touch;
}
#flow-seg::-webkit-scrollbar{display:none;}
/* Painted by paintSeg only when the row actually overflows: fades both edges
   so the cut-off pill reads as "more this way", not as a rendering bug. */
#flow-seg.fn-overflow{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14px,#000 calc(100% - 34px),transparent);
}
#flow-seg button{
  background:var(--card);border:1px solid var(--border);border-radius:100px;
  color:var(--muted);font-family:inherit;font-size:13px;font-weight:600;
  padding:9px 15px;min-height:38px;cursor:pointer;white-space:nowrap;flex:0 0 auto;
  transition:.14s;-webkit-tap-highlight-color:transparent;
}
#flow-seg button:hover{color:var(--text);border-color:var(--border2,#333846);}
#flow-seg button.on{
  background:rgba(0,147,231,.14);border-color:rgba(0,147,231,.42);color:#63c2f7;
}
@media (min-width:761px){
  #flow-seg{display:none;}          /* desktop has the sidebar; segments would duplicate it */
}

/* ──────────────────────────────────────────────────────────────────────────
 * Capture sheet
 * ────────────────────────────────────────────────────────────────────────── */
.fn-sheetwrap{position:fixed;inset:0;z-index:960;display:none;}
.fn-sheetwrap.on{display:block;}
.fn-sheetwrap .fn-scrim{position:absolute;inset:0;background:rgba(0,0,0,.62);
  animation:fnFade .2s ease;}
@keyframes fnFade{from{opacity:0}to{opacity:1}}
.fn-sheetwrap .fn-sheet{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--card2);border-top:1px solid var(--border2,#333846);
  border-radius:24px 24px 0 0;
  padding:10px 18px calc(24px + env(safe-area-inset-bottom));
  max-height:88vh;overflow-y:auto;
  animation:fnUp .28s cubic-bezier(.2,.9,.3,1);
}
@keyframes fnUp{from{transform:translateY(100%)}to{transform:none}}
@media (min-width:761px){
  .fn-sheetwrap .fn-sheet{
    left:50%;bottom:auto;top:16vh;transform:translateX(-50%);
    width:440px;border-radius:20px;border:1px solid var(--border2,#333846);
    animation:fnPop .18s ease;padding-bottom:24px;
  }
  @keyframes fnPop{from{opacity:0;transform:translateX(-50%) scale(.97)}
                   to{opacity:1;transform:translateX(-50%) scale(1)}}
}
.fn-sheetwrap .fn-grab{width:38px;height:4px;border-radius:100px;
  background:var(--border2,#333846);margin:0 auto 14px;cursor:pointer;}
.fn-sheetwrap h4{font-size:17px;font-weight:700;margin:0 0 3px;}
.fn-sheetwrap .fn-sub{font-size:12.5px;color:var(--muted);margin-bottom:15px;}
.fn-sheetwrap .fn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;}
.fn-sheetwrap .fn-grid button{
  background:var(--card);border:1px solid var(--border);border-radius:15px;
  padding:15px 5px;display:flex;flex-direction:column;align-items:center;gap:7px;
  cursor:pointer;font-family:inherit;color:var(--muted);font-size:11.5px;font-weight:600;
  min-height:76px;transition:.14s;-webkit-tap-highlight-color:transparent;
}
.fn-sheetwrap .fn-grid button:hover{border-color:var(--accent);color:var(--text);}
.fn-sheetwrap .fn-grid button:active{transform:scale(.96);}

/* the inline quick-note pane */
#flow-capture .fn-note{display:none;}
#flow-capture.note .fn-grid{display:none;}
#flow-capture.note .fn-note{display:block;}
#flow-capture textarea{
  width:100%;background:var(--card);border:1px solid var(--border);border-radius:14px;
  color:var(--text);font-family:inherit;font-size:16px;line-height:1.5;      /* 16px: no iOS zoom */
  padding:13px 14px;min-height:120px;resize:vertical;
}
#flow-capture textarea:focus{outline:none;border-color:var(--accent);}
#flow-capture .fn-acts{display:flex;gap:9px;margin-top:12px;}
#flow-capture .fn-acts button{
  flex:1;border-radius:12px;font-family:inherit;font-size:14px;font-weight:700;
  padding:12px;cursor:pointer;border:1px solid var(--border);min-height:44px;
  background:var(--card);color:var(--muted);
}
#flow-capture .fn-acts button.pri{background:var(--accent);border-color:var(--accent);color:#fff;}

/* ──────────────────────────────────────────────────────────────────────────
 * Command palette — ⌘K on desktop, the search icon on phone
 * ────────────────────────────────────────────────────────────────────────── */
#flow-pal{position:fixed;inset:0;z-index:980;display:none;}
#flow-pal.on{display:block;}
#flow-pal .fn-scrim{position:absolute;inset:0;background:rgba(0,0,0,.55);}
#flow-pal .fn-box{
  position:absolute;left:50%;transform:translateX(-50%);top:11vh;
  width:min(540px,92vw);
  background:rgba(24,27,34,.98);backdrop-filter:blur(24px);
  border:1px solid var(--border2,#333846);border-radius:16px;overflow:hidden;
  box-shadow:0 34px 80px -18px rgba(0,0,0,.9);
  animation:fnPop2 .16s ease;
}
@keyframes fnPop2{from{opacity:0;transform:translateX(-50%) scale(.97)}
                  to{opacity:1;transform:translateX(-50%) scale(1)}}
#flow-pal .fn-in{display:flex;align-items:center;gap:11px;padding:14px 17px;
  border-bottom:1px solid var(--border);}
#flow-pal input{
  flex:1;background:none;border:0;outline:none;color:var(--text);
  font-family:inherit;font-size:16px;font-weight:500;
}
#flow-pal input::placeholder{color:var(--muted2,#5c626f);}
#flow-pal .fn-list{max-height:min(52vh,380px);overflow-y:auto;padding:7px;}
#flow-pal .fn-cat{font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted2,#5c626f);padding:10px 12px 5px;}
#flow-pal .fn-row{
  display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;
  font-size:14px;color:var(--text2,#c3c8d4);cursor:pointer;
}
#flow-pal .fn-row.on{background:var(--accent);color:#fff;}
#flow-pal .fn-row .fn-hint{margin-left:auto;font-size:10.5px;opacity:.75;}
#flow-pal .fn-empty{padding:26px 16px;text-align:center;color:var(--muted);font-size:14px;}

/* ──────────────────────────────────────────────────────────────────────────
 * DESKTOP — the sidebar
 * ────────────────────────────────────────────────────────────────────────── */
#flow-side{display:none;}

@media (min-width:761px){
  .tabs{display:none !important;}   /* the pill row is replaced, not hidden-and-duplicated */

  body.fn-on{
    padding-left:calc(var(--fn-side-w) + 28px) !important;
    max-width:calc(1300px + var(--fn-side-w) + 28px) !important;
  }

  #flow-side{
    display:flex;flex-direction:column;gap:2px;
    position:fixed;left:0;top:0;bottom:0;width:var(--fn-side-w);z-index:930;
    background:#0e1015;border-right:1px solid var(--border);
    padding:16px 11px 18px;overflow-y:auto;scrollbar-width:none;
  }
  #flow-side::-webkit-scrollbar{display:none;}

  .fn-brand{display:flex;align-items:center;gap:10px;padding:4px 9px 14px;}
  .fn-brand .fn-mark{width:26px;height:26px;border-radius:8px;flex:0 0 auto;
    background:linear-gradient(150deg,var(--accent),var(--purple));}
  .fn-brand .fn-nm{font-size:14.5px;font-weight:800;letter-spacing:-0.02em;
    white-space:nowrap;overflow:hidden;}

  .fn-k{
    display:flex;align-items:center;gap:8px;width:100%;
    background:var(--card);border:1px solid var(--border);border-radius:10px;
    color:var(--muted);font-family:inherit;font-size:12.5px;font-weight:600;
    padding:8px 10px;margin-bottom:6px;cursor:pointer;transition:.14s;
  }
  .fn-k:hover{border-color:var(--accent);color:var(--text);}
  .fn-k .fn-kbd{margin-left:auto;font-size:10.5px;border:1px solid var(--border);
    border-radius:5px;padding:1px 5px;}

  .fn-grouplbl{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
    color:var(--muted2,#5c626f);padding:14px 10px 5px;white-space:nowrap;}

  .fn-link{
    display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
    cursor:pointer;font-size:13.5px;font-weight:600;color:var(--text2,#c3c8d4);
    border:1px solid transparent;transition:.12s;background:none;font-family:inherit;
    width:100%;text-align:left;
  }
  .fn-link:hover{background:var(--card);color:var(--text);}
  .fn-link.on{background:rgba(0,147,231,.14);color:#63c2f7;border-color:rgba(0,147,231,.28);}
  .fn-link .fn-i{width:16px;height:16px;}
  .fn-link .fn-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .fn-spacer{flex:1;min-height:14px;}
}

/* Between 761 and 1180 the sidebar drops to an icon rail so the content
   column keeps a usable width on a small laptop. */
@media (min-width:761px) and (max-width:1180px){
  body.fn-on{padding-left:calc(var(--fn-side-w-sm) + 20px) !important;}
  #flow-side{width:var(--fn-side-w-sm);padding:16px 8px 18px;align-items:stretch;}
  #flow-side .fn-txt,#flow-side .fn-grouplbl,#flow-side .fn-brand .fn-nm,
  #flow-side .fn-k span:not(.fn-i-wrap){display:none;}
  #flow-side .fn-link,#flow-side .fn-k{justify-content:center;padding:10px 6px;}
  #flow-side .fn-brand{justify-content:center;padding:4px 0 12px;}
  #flow-side .fn-grouplbl{display:block;height:1px;padding:0;margin:10px 8px;
    background:var(--border);overflow:hidden;text-indent:-999px;}
}

#flow-menu .fn-grid{grid-template-columns:1fr;gap:5px;}
#flow-menu .fn-grid button{
  flex-direction:row;justify-content:flex-start;gap:12px;min-height:52px;
  padding:13px 15px;font-size:14.5px;color:var(--text2,#c3c8d4);
}

/* Today is the landing screen and should use the full content width, exactly
   like Week Compass and Priorities — no narrower column, no centring. (The
   host rule already sets 100%; this used to clamp it to 880px on desktop.) */
@media (min-width:1181px){
  body.fn-on #tab-today{max-width:100%;}
}

@media print{
  #flow-tabbar,#flow-side,.fn-sheetwrap,#flow-pal,#flow-seg,#flow-headtools{display:none !important;}
  body.fn-on{padding-left:24px !important;}
}

/* ══════════════════════════════════════════════════════════════════════════
 * 31 · The system pass  (phase 4)
 * ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Type scale — six steps, nothing between. */
  --fs-display:40px; --fs-title:28px; --fs-heading:20px;
  --fs-body:17px;    --fs-support:14px; --fs-label:11px;
  /* Spacing — a 4px grid. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px;
  /* Colour with a job. Blue is the only thing that means "you can touch this". */
  --role-action:#0093e7; --role-good:#00e88a; --role-warn:#ffc200;
  --role-bad:#ff294d;   --role-quiet:#7e8493;
}

/* Touch targets. Several of the app's inline row controls are 24–28px, which
   is what made the priority rows feel fiddly on a phone. Rather than resize
   them — which would change every layout they sit in — the *tap* area is
   expanded past the visual edge. Nothing moves; the target just gets bigger. */
@media (max-width:760px){
  .qitem .q-edit, .qitem .q-rock, .qitem .q-del,
  .hab-del, .tr-del, .note-del, .j-del{
    position:relative;
  }
  .qitem .q-edit::after, .qitem .q-rock::after, .qitem .q-del::after,
  .hab-del::after, .tr-del::after, .note-del::after, .j-del::after{
    content:'';position:absolute;top:50%;left:50%;
    width:44px;height:44px;transform:translate(-50%,-50%);
  }
  /* Anything that is already a block-level control simply gets the height. */
  .flow-btn, .r-btn, .mobilenav button{min-height:44px;}
}

/* Numbers are compared far more often than they are read. */
.stat .num, .big-n, .fn-rmkt .v, .flow-mkt-tile .v, .td-stat .v{
  font-variant-numeric:tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════════════
 * 30 · Colour themes
 *
 * Each theme overrides a handful of custom properties on <html>. Because
 * html[data-flow-theme="x"] outranks :root, one attribute reskins the whole
 * app — host tokens (--accent, --purple, the body gradient) and pack tokens
 * (--f-accent, --f-accent-soft) together. Switching is instant: the picker in
 * Settings just sets the attribute, so a change shows without any reload.
 * Available to everyone, including guests and brand-new accounts.
 * ══════════════════════════════════════════════════════════════════════════ */

/* Slate — masculine: cool steel blue on graphite. */
html[data-flow-theme="slate"]{
  --accent:#4076f0; --purple:#6d7be6; --teal:#4076f0;
  --f-accent:#5b8cf0; --f-accent-soft:rgba(91,140,240,0.15); --f-accent-2:#5b8cf0;
}
html[data-flow-theme="slate"] body{background:radial-gradient(1200px 600px at 50% -200px,#12151d 0%,#07090d 60%);}

/* Rose — feminine: warm rose and plum. */
html[data-flow-theme="rose"]{
  --accent:#ff5f95; --purple:#c56cff; --teal:#ff5f95;
  --f-accent:#ff7aa8; --f-accent-soft:rgba(255,122,168,0.16); --f-accent-2:#ff7aa8;
}
html[data-flow-theme="rose"] body{background:radial-gradient(1200px 600px at 50% -200px,#1b1016 0%,#0a0709 60%);}

/* Cyber — tech: neon cyan and violet on near-black. */
html[data-flow-theme="cyber"]{
  --accent:#17d4ff; --purple:#7b5cff; --teal:#17d4ff;
  --f-accent:#22d3ee; --f-accent-soft:rgba(34,211,238,0.16); --f-accent-2:#22d3ee;
}
html[data-flow-theme="cyber"] body{background:radial-gradient(1200px 600px at 50% -200px,#0a1220 0%,#05070e 60%);}

/* Executive — entrepreneur: gold on charcoal. */
html[data-flow-theme="executive"]{
  --accent:#d1a94e; --purple:#9a86ff; --teal:#d1a94e;
  --f-accent:#d8b45f; --f-accent-soft:rgba(216,180,95,0.15); --f-accent-2:#d8b45f;
}
html[data-flow-theme="executive"] body{background:radial-gradient(1200px 600px at 50% -200px,#14120b 0%,#090806 60%);}

/* Athlete — sporty: high-energy orange. */
html[data-flow-theme="athlete"]{
  --accent:#ff6a2c; --purple:#ff9e3d; --teal:#ff6a2c;
  --f-accent:#ff7a3c; --f-accent-soft:rgba(255,122,60,0.16); --f-accent-2:#ff7a3c;
}
html[data-flow-theme="athlete"] body{background:radial-gradient(1200px 600px at 50% -200px,#170f0a 0%,#0a0705 60%);}

/* Whoop — stark black with a desaturated recovery-green primary. Darker
   surfaces across the board for that flat, near-black instrument look. */
html[data-flow-theme="whoop"]{
  --bg:#000000; --card:#0c0d11; --card2:#131519; --border:#20232b;
  --accent:#00e6a0; --purple:#1f8bff; --teal:#00e6a0;
  --f-accent:#00e6a0; --f-accent-soft:rgba(0,230,160,0.14); --f-accent-2:#1f8bff;
  --f-surface:#0c0d11; --f-surface-2:#131519; --f-plane:#000000; --f-line:rgba(255,255,255,0.08);
}
html[data-flow-theme="whoop"] body{background:radial-gradient(900px 500px at 50% -160px,#0a0b0d 0%,#000000 55%);}

/* The pack declares its --f-* tokens on .flow-x, and a property set on an
   element wins over one inherited from <html> — so the blocks above are
   shadowed for every pack component. Re-assert the pack tokens at a selector
   that outranks a bare .flow-x. Host tokens (--accent etc.) live on :root and
   are already handled by the blocks above. */
html[data-flow-theme="slate"]     .flow-x{ --f-accent:#5b8cf0; --f-accent-soft:rgba(91,140,240,0.15); --f-accent-2:#5b8cf0; }
html[data-flow-theme="rose"]      .flow-x{ --f-accent:#ff7aa8; --f-accent-soft:rgba(255,122,168,0.16); --f-accent-2:#ff7aa8; }
html[data-flow-theme="cyber"]     .flow-x{ --f-accent:#22d3ee; --f-accent-soft:rgba(34,211,238,0.16); --f-accent-2:#22d3ee; }
html[data-flow-theme="executive"] .flow-x{ --f-accent:#d8b45f; --f-accent-soft:rgba(216,180,95,0.15); --f-accent-2:#d8b45f; }
html[data-flow-theme="athlete"]   .flow-x{ --f-accent:#ff7a3c; --f-accent-soft:rgba(255,122,60,0.16); --f-accent-2:#ff7a3c; }
html[data-flow-theme="whoop"]     .flow-x{
  --f-accent:#00e6a0; --f-accent-soft:rgba(0,230,160,0.14); --f-accent-2:#1f8bff;
  --f-surface:#0c0d11; --f-surface-2:#131519; --f-plane:#000000; --f-line:rgba(255,255,255,0.08);
}

/* ── The picker in Settings ── */
.theme-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-top:12px;
}
.theme-swatch{
  display:flex; align-items:center; gap:10px; text-align:left;
  background:var(--f-surface-2); border:1px solid var(--f-line); border-radius:12px;
  padding:11px 13px; cursor:pointer; font-family:inherit; color:var(--f-ink); transition:.14s;
}
.theme-swatch:hover{ border-color:var(--f-accent); }
.theme-swatch.on{ border-color:var(--f-accent); box-shadow:0 0 0 1px var(--f-accent) inset; }
.theme-swatch .sw-dot{
  width:26px; height:26px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 32% 30%, #fff2, transparent 60%), var(--d);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;
}
.theme-swatch .sw-nm{ font-size:13.5px; font-weight:700; }
.theme-swatch .sw-sub{ font-size:11px; color:var(--f-muted); margin-left:auto; }

/* ---------- North Star -------------------------------------------------- */
.ns-hero{
  background:
    radial-gradient(600px 300px at 12% -40%, var(--f-accent-soft), transparent 70%),
    var(--f-surface);
  border-color: rgba(23,187,146,.28);
}
.ns-eyebrow{
  font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--f-accent); margin-bottom:10px;
}
.ns-principle{
  margin:0 0 14px; padding:0 0 0 16px;
  border-left:3px solid var(--f-accent);
  font-family:Georgia, "Times New Roman", serif; font-style:italic;
  font-size:19px; line-height:1.5; color:var(--f-ink);
}
.ns-prin-edit{ width:100%; margin-bottom:10px; font-size:15px; line-height:1.5; resize:vertical; }
@media (max-width:600px){ .ns-principle{ font-size:16.5px; } }

/* Right-now matrix strip */
.ns-q1{ list-style:none; margin:6px 0 0; padding:0; }
.ns-q1 li{
  display:flex; align-items:flex-start; gap:10px;
  padding:9px 0; border-top:1px solid var(--f-line); font-size:14px; line-height:1.45;
}
.ns-q1 li:first-child{ border-top:0; }
.ns-q1 .ns-dot{
  flex:0 0 auto; width:8px; height:8px; margin-top:6px; border-radius:50%;
  background:var(--f-critical); box-shadow:0 0 0 3px rgba(208,59,59,.16);
}
.ns-q1 .ns-more{ color:var(--f-muted); font-size:12.5px; }
.ns-q1 .ns-more::before{ display:none; }
.ns-empty{ margin:4px 0 0; font-size:13.5px; line-height:1.55; color:var(--f-ink-2); }
.ns-empty em{ color:var(--f-accent); font-style:normal; font-weight:700; }
.ns-q-meta{ margin-top:10px; font-size:11.5px; letter-spacing:.02em; color:var(--f-muted); }

/* Focus-area goals */
.ns-goals{ display:flex; flex-direction:column; gap:14px; margin-bottom:14px; }
.ns-goal{ }
.ns-goal-top{ display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.ns-goal-ic{ font-size:17px; flex:0 0 auto; }
.ns-goal-name{ font-size:14px; font-weight:600; color:var(--f-ink); cursor:text; }
.ns-goal-name:hover{ text-decoration:underline dotted; text-underline-offset:3px; }
.ns-goal-pct{ margin-left:auto; font-size:12.5px; font-weight:700; color:var(--f-accent); font-variant-numeric:tabular-nums; }
.ns-bar{
  height:12px; border-radius:999px; background:var(--f-grid); overflow:hidden;
  cursor:pointer; position:relative;
}
.ns-bar > i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--f-seq-3), var(--f-seq-5));
  transition:width .22s ease;
}
.ns-goal-ctl{ display:flex; gap:6px; margin-top:7px; }
.ns-goal-ctl .flow-btn{ min-width:38px; }

.ns-x{
  flex:0 0 auto; margin-left:4px; width:22px; height:22px; line-height:1;
  border:0; border-radius:6px; background:transparent; color:var(--f-muted);
  font-size:17px; cursor:pointer; transition:.14s;
}
.ns-x:hover{ background:rgba(208,59,59,.16); color:#ffbdbd; }

/* Operating principles */
.ns-tenets{ list-style:none; margin:0 0 14px; padding:0; }
.ns-tenet{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 0; border-top:1px solid var(--f-line);
}
.ns-tenet:first-child{ border-top:0; }
.ns-tenet-txt{
  flex:1 1 auto; font-size:14px; line-height:1.5; color:var(--f-ink-2); cursor:text;
  padding-left:16px; position:relative;
}
.ns-tenet-txt::before{
  content:""; position:absolute; left:0; top:9px;
  width:6px; height:6px; border-radius:50%; background:var(--f-accent);
}
.ns-tenet-txt:hover{ color:var(--f-ink); }
.ns-tenet .ns-x{ margin-top:2px; }
.ns-addrow{ margin-top:2px; }

/* ======================================================================
 * Scoreboard — one tap per thing done, and the week either shows it or not
 * ==================================================================== */
/* Foldable cards — the Scoreboard, the Focus areas, the principles.
   Same fold as the Diet block on Today: header, summary, chevron. The
   progress bar under the header is deliberately outside the folding part,
   because folded it is the whole answer. */
.fold-head{
  display:flex; align-items:center; gap:12px; cursor:pointer; position:relative;
  padding-right:20px; -webkit-tap-highlight-color:transparent; user-select:none;
}
.fold-head:active{ opacity:.7; }
.fold-head h3{ margin:0; }
.fold-head .flow-chip{ margin-left:auto; }
.fold-head .flow-chip.zero{ color:var(--f-muted); border-color:var(--f-line); background:none; }
.fold-head .flow-fold-chev{
  position:absolute; right:0; top:50%;
  width:7px; height:7px; margin-top:-5px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor;
  opacity:.5; transform:rotate(45deg);
  transition:transform .18s ease, opacity .18s ease;
}
.fold-card.is-open .fold-head .flow-fold-chev{ transform:rotate(-135deg); margin-top:-2px; opacity:.8; }
.fold-prog{ margin:11px 0 0; }
.fold-card.is-open .fold-prog{ margin-bottom:2px; }
.fold-body{ display:none; }
.fold-card.is-open .fold-body{ display:block; }
/* Nothing to measure, nothing to fold open into a gap: a card with no bar
   keeps the header flush when it is shut. */
.fold-card > .fold-head + .fold-body{ margin-top:12px; }
@media (prefers-reduced-motion: reduce){ .fold-head .flow-fold-chev{ transition:none; } }

.sc-list{ display:flex; flex-direction:column; gap:15px; margin-bottom:15px; }
.sc-metric{ padding-bottom:14px; border-bottom:1px solid var(--f-grid); }
.sc-metric:last-child{ border-bottom:none; padding-bottom:0; }
.sc-head{ display:flex; align-items:center; gap:9px; margin-bottom:8px; flex-wrap:wrap; }
.sc-ic{ font-size:17px; flex:0 0 auto; line-height:1; }
.sc-name{
  background:none; border:none; padding:0; font:inherit; cursor:pointer;
  font-size:14px; font-weight:600; color:var(--f-ink); text-align:left;
}
.sc-name:hover{ text-decoration:underline dotted; text-underline-offset:3px; }
.sc-streak{ font-size:11.5px; font-weight:700; color:var(--f-warning); }
.sc-count{
  margin-left:auto; font-size:19px; font-weight:800; line-height:1;
  color:var(--f-ink); font-variant-numeric:tabular-nums;
}
.sc-metric.done .sc-count{ color:var(--f-accent); }
.sc-target{ font-size:11.5px; color:var(--f-ink-2); white-space:nowrap; }
.sc-bar{ height:8px; border-radius:999px; background:var(--f-grid); overflow:hidden; }
.sc-bar > i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg, var(--f-seq-3), var(--f-seq-5));
  transition:width .22s ease;
}
.sc-foot{ display:flex; gap:7px; align-items:center; margin-top:8px; }
.sc-foot .flow-btn{ min-width:40px; flex:0 0 auto; }
.sc-spacer{ flex:1; }
.sc-days{ display:flex; gap:3px; flex:1; min-width:0; }
.sc-days .sc-day{
  flex:1; min-width:0; height:15px; border-radius:4px; background:var(--f-grid);
  display:flex; align-items:center; justify-content:center;
  font-size:9.5px; font-weight:700; font-style:normal;
  color:#05231b; font-variant-numeric:tabular-nums;
}
.sc-days .sc-day.on{ background:var(--f-accent); }
.sc-days .sc-day.now{ box-shadow:0 0 0 1.5px var(--f-ink-2) inset; }
.sc-days .sc-day.on.now{ box-shadow:0 0 0 1.5px var(--f-ink) inset; }
.sc-plus span{ opacity:.72; font-weight:500; }
.sc-edit{ display:flex; flex-direction:column; gap:8px; }
.sc-e-ic{ width:56px; text-align:center; }
.sc-e-n{ width:74px; }
.flow-btn.danger{ color:var(--f-bad, #e5484d); }

/* ======================================================================
 * Direction — the read on where this is actually going
 * ==================================================================== */
.dir-card{ position:relative; }
.dir-top{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.dir-sign{ font-size:12px; font-weight:700; color:var(--f-accent); letter-spacing:.06em; text-transform:uppercase; }
.dir-when{ font-size:11.5px; color:var(--f-ink-2); margin-left:auto; }
.dir-lede{
  font-size:16.5px; line-height:1.5; font-weight:500; color:var(--f-ink);
  margin:8px 0 14px;
}
.dir-block{ margin-top:15px; }
.dir-block h4{
  margin:0 0 7px; font-size:11.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--f-ink-2);
}
.dir-block p{ margin:0 0 8px; font-size:14px; line-height:1.55; color:var(--f-ink); }
.dir-acts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.dir-acts li{ display:flex; gap:10px; font-size:14px; line-height:1.5; align-items:flex-start; }
.dir-acts li::before{
  content:''; flex:0 0 auto; width:6px; height:6px; border-radius:50%;
  background:var(--f-accent); margin-top:7px;
}
.dir-watch{ color:var(--f-warning); }
.dir-watch::before{ background:var(--f-warning) !important; }
.dir-empty{ font-size:14px; line-height:1.55; color:var(--f-ink-2); margin:6px 0 12px; }
.dir-birth{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.dir-birth input{ width:170px; }

/* ──────────────────────────────────────────────────────────────────────────
 * Friends — the paired-up scoreboard
 *
 * Deliberately quieter than your own scoreboard: this is somebody else's
 * week, and it should read as a glance, not compete with your own numbers.
 * ────────────────────────────────────────────────────────────────────────── */
.fr-none{ margin:0 0 16px; }
.fr-err{
  margin:0 0 14px; font-size:13px; color:var(--f-warn,#e0a33e);
  background:rgba(224,163,62,.09); border:1px solid rgba(224,163,62,.24);
  border-radius:10px; padding:9px 12px;
}
.fr-quiet{ margin:2px 0 0; font-size:13px; color:var(--f-ink-2); }

.fr-people{ display:flex; flex-direction:column; gap:14px; margin-bottom:18px; }
.fr-person{
  border:1px solid var(--f-grid); border-radius:14px; padding:14px;
  background:var(--card2,rgba(255,255,255,.02));
}
.fr-head{ display:flex; align-items:center; gap:9px; margin-bottom:11px; }
.fr-av{
  width:26px; height:26px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(150deg,var(--accent,#0093e7),var(--purple,#8b5cf6));
  color:#fff; font-size:12px; font-weight:800;
  display:grid; place-items:center; line-height:1;
}
.fr-name{ font-size:14.5px; font-weight:700; color:var(--f-ink); }
.fr-when{ font-size:11.5px; color:var(--f-ink-2); }
.fr-x{
  margin-left:auto; background:none; border:none; padding:4px 2px;
  font:inherit; font-size:11.5px; color:var(--f-ink-2); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.fr-x:hover{ color:var(--f-warn,#e0a33e); }

.fr-block{ margin-top:12px; }
.fr-block:first-child{ margin-top:0; }
.fr-block h5{
  margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--f-ink-2);
}

.fr-metric{
  display:grid; align-items:center; gap:0 8px; margin-bottom:7px;
  grid-template-columns:auto 1fr auto auto;
  grid-template-areas:"ic nm ct st" "bar bar bar bar";
}
.fr-metric:last-child{ margin-bottom:0; }
.fr-ic{ grid-area:ic; font-size:13px; line-height:1; }
.fr-nm{ grid-area:nm; font-size:12.5px; color:var(--f-ink); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fr-ct{ grid-area:ct; font-size:12px; font-weight:700; color:var(--f-ink-2);
  font-variant-numeric:tabular-nums; }
.fr-metric.hit .fr-ct{ color:var(--f-accent); }
.fr-st{ grid-area:st; font-size:11px; color:var(--f-ink-2); }
.fr-bar{
  grid-area:bar; height:4px; border-radius:999px; background:var(--f-grid);
  overflow:hidden; margin-top:4px;
}
.fr-bar > i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--f-seq-3),var(--f-seq-5));
}

.fr-rocks{ margin:0; padding-left:17px; }
.fr-rocks li{ font-size:12.5px; color:var(--f-ink); margin-bottom:3px; }
.fr-rocks li.done{ color:var(--f-ink-2); text-decoration:line-through; }
.fr-plan{ margin:0; font-size:12.5px; line-height:1.55; color:var(--f-ink);
  white-space:pre-wrap; }

.fr-checkin{
  font-size:13px; line-height:1.5; color:var(--f-ink);
  background:rgba(23,187,146,.07); border:1px solid rgba(23,187,146,.2);
  border-radius:10px; padding:9px 12px;
}
.fr-ci-lbl{
  display:block; font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--f-accent); margin-bottom:3px;
}

.fr-cibox{ margin-bottom:18px; position:relative; }
.fr-cibox label{
  display:block; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--f-ink-2); margin-bottom:6px;
}
.fr-cisaved{
  position:absolute; right:2px; top:0; font-size:10.5px; color:var(--f-accent);
}

.fr-pair{ border-top:1px solid var(--f-grid); padding-top:15px; }
.fr-pair h5, .fr-share h5{
  margin:0 0 7px; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--f-ink-2);
}
.fr-pair .flow-sub{ margin:0 0 11px; }
.fr-code{ display:flex; align-items:center; gap:8px; margin-bottom:9px; flex-wrap:wrap; }
.fr-code code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:16px; font-weight:700; letter-spacing:.12em; color:var(--f-ink);
  background:var(--f-grid); border-radius:8px; padding:7px 12px;
  -webkit-user-select:all; user-select:all;
}
.fr-enter{ display:flex; gap:8px; margin-top:11px; flex-wrap:wrap; }
.fr-enter .flow-in{
  flex:1 1 150px; min-width:0; text-transform:uppercase; letter-spacing:.1em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:700;
}

.fr-share{ border-top:1px solid var(--f-grid); padding-top:15px; margin-top:16px; }
.fr-sw{ display:flex; align-items:flex-start; gap:10px; margin-bottom:11px; cursor:pointer; }
.fr-sw input{ margin-top:2px; flex:0 0 auto; width:17px; height:17px; accent-color:var(--f-accent); }
.fr-sw span{ display:block; min-width:0; }
.fr-sw b{ display:block; font-size:13px; font-weight:600; color:var(--f-ink); }
.fr-sw em{ display:block; font-size:11.5px; font-style:normal; color:var(--f-ink-2); line-height:1.45; }
.fr-note{ margin:2px 0 0; }

/* ──────────────────────────────────────────────────────────────────────────
 * The routine audit
 *
 * The one screen in the app that is not about today. It should feel like
 * sitting down with the evidence, so: the quote as the framing, then one
 * plain row per recurring thing — the number, the direction, and three
 * buttons. No colour until a decision is made.
 * ────────────────────────────────────────────────────────────────────────── */
.au-quote{
  margin:0 0 16px; padding:0 0 0 15px; border-left:2px solid var(--f-accent);
  display:flex; flex-direction:column; gap:3px;
  font-size:14.5px; line-height:1.5; color:var(--f-ink); font-style:normal;
}
.au-quote span:first-child{ font-weight:600; }
.au-quote span:last-child{ color:var(--f-ink-2); }

.au-range{ margin:0 0 16px; }
.au-group{ margin-bottom:20px; }
.au-group h5{
  margin:0 0 10px; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--f-ink-2);
}

.au-row{
  border:1px solid var(--f-grid); border-radius:14px; padding:13px 14px 12px;
  margin-bottom:10px; transition:border-color .15s, opacity .15s;
}
.au-row.done{ border-color:rgba(23,187,146,.28); }
.au-top{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.au-ic{ font-size:15px; line-height:1; flex:0 0 auto; }
.au-name{ font-size:14px; font-weight:600; color:var(--f-ink); flex:1; min-width:0; }
.au-said{
  font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:100px; white-space:nowrap;
}
.au-said.keep  { background:rgba(23,187,146,.14); color:var(--f-accent); }
.au-said.cut   { background:rgba(224,90,90,.14);  color:var(--f-warn,#e0665e); }
.au-said.change{ background:rgba(0,147,231,.14);  color:#63c2f7; }

.au-bar{ height:5px; border-radius:999px; background:var(--f-grid); overflow:hidden; margin-bottom:8px; }
.au-bar > i{ display:block; height:100%; border-radius:999px; }
.au-bar > i.good{ background:var(--f-accent); }
.au-bar > i.mid { background:linear-gradient(90deg,var(--f-seq-3),var(--f-seq-5)); }
.au-bar > i.low { background:#6b7280; }

.au-meta{ font-size:12px; line-height:1.55; color:var(--f-ink-2); margin-bottom:11px; }
.au-meta b{ color:var(--f-ink); font-weight:600; }
.au-up  { color:var(--f-accent); }
.au-down{ color:var(--f-warn,#e0a33e); }
.au-flat{ color:var(--f-ink-2); }

.au-acts{ display:flex; gap:7px; }
.au-btn{
  flex:1; min-height:38px; border-radius:10px; cursor:pointer;
  background:var(--card,rgba(255,255,255,.03)); border:1px solid var(--f-grid);
  color:var(--f-ink-2); font-family:inherit; font-size:13px; font-weight:600;
  transition:.14s; -webkit-tap-highlight-color:transparent;
}
.au-btn:hover{ color:var(--f-ink); }
.au-btn.keep.on  { background:rgba(23,187,146,.16); border-color:rgba(23,187,146,.45); color:var(--f-accent); }
.au-btn.change.on{ background:rgba(0,147,231,.16);  border-color:rgba(0,147,231,.45);  color:#63c2f7; }
.au-btn.cut.on   { background:rgba(224,90,90,.16);  border-color:rgba(224,90,90,.45);  color:#e0665e; }

.au-edit{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.au-edit label{ font-size:11.5px; color:var(--f-ink-2); }
.au-edit .flow-in{ width:74px; flex:0 0 auto; text-align:center; min-height:0; height:38px; }
.au-per{ font-size:11.5px; color:var(--f-ink-2); flex:1; min-width:0; }

.au-foot{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:4px; }
.au-left{ margin:0; flex:1; }
.au-hist{ margin-top:18px; border-top:1px solid var(--f-grid); padding-top:14px; }
.au-hist h5{
  margin:0 0 8px; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--f-ink-2);
}
.au-hist ul{ margin:0; padding-left:17px; }
.au-hist li{ font-size:12.5px; color:var(--f-ink-2); margin-bottom:3px; }
.au-hist li b{ color:var(--f-ink); font-weight:600; }

/* The twice-a-year banner on Today. Deliberately not red: nothing is wrong,
   something is due. */
.td-audit{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  background:linear-gradient(150deg,rgba(23,187,146,.10),rgba(23,187,146,.03));
  border:1px solid rgba(23,187,146,.28); border-radius:18px;
  padding:16px 18px; margin-bottom:22px;
}
.td-audit-body{ flex:1 1 240px; min-width:0; }
.td-audit .lbl{
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--f-accent); margin-bottom:5px;
}
.td-audit p{ margin:0; font-size:14px; line-height:1.5; color:var(--f-ink); }
.td-audit-acts{ display:flex; gap:8px; flex:0 0 auto; }

/* The five lines on the sign-in screen. They are the reason the app exists,
   so they sit above the form rather than under it, and they are quiet — a
   creed read once, not a headline shouted every time. */
.fa-creed{
  margin:0 0 22px; padding:0 0 0 14px;
  border-left:2px solid rgba(23,187,146,.5);
  display:flex; flex-direction:column; gap:3px;
  font-size:13.5px; line-height:1.5; font-style:normal;
  color:var(--f-ink-2,#9aa4b2);
}
.fa-creed span:first-child{ color:var(--f-ink,#e7ebf0); font-weight:600; }
.fa-creed .last{ color:rgba(23,187,146,.9); }

/* ── Connect to Claude ───────────────────────────────────────────────────
   A secret shown once wants to look like a secret: monospaced, boxed, and
   sitting next to the one button that matters. */
.mcp-url{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.mcp-url code{flex:1;min-width:220px;background:var(--f-card2,rgba(255,255,255,.04));border:1px solid var(--f-border,rgba(255,255,255,.12));
  border-radius:9px;padding:10px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  color:var(--f-text,#e9eef5);word-break:break-all;line-height:1.45;}
.mcp-new{margin-top:14px;padding:12px;border-radius:11px;border:1px solid var(--f-accent,#63c2f7);
  background:color-mix(in srgb,var(--f-accent,#63c2f7) 8%,transparent);}
.mcp-new .flow-label{margin-bottom:7px;}
.mcp-list{margin-top:14px;display:flex;flex-direction:column;gap:8px;}
/* The empty state is a quiet note, not a headline — it says nothing is wrong. */
.mcp-list .flow-sub{margin:0;font-size:13px;line-height:1.55;}
.mcp-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  background:var(--f-card2,rgba(255,255,255,.04));border:1px solid var(--f-border,rgba(255,255,255,.10));}
.mcp-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.mcp-meta b{font-size:14px;color:var(--f-text,#e9eef5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mcp-meta span{font-size:12px;color:var(--f-muted,#93a2b4);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;}
.mcp-acts{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.mcp-acts .flow-in{flex:1;min-width:200px;}
@media(max-width:520px){
  .mcp-row{flex-wrap:wrap;}
  .mcp-acts .flow-in{min-width:100%;}
}