@twentyfirstmedia/halo 0.6.0 → 0.7.0

package/dist/styles.css

@@ -14544,6 +14544,37 @@ a.tf-iconbtn {
   }
 }
 
+/* Fluid actions: an action row measures itself, so its buttons answer to the box it sits in (a
+   thin card, a side panel, a phone) instead of the window. When the row is narrow it wraps and
+   its buttons share the full width; when it is very narrow each button takes a line. The rows are
+   the kit's own footers and action bars, and plain `.tf-row`s of buttons placed directly in a
+   column box (panel, card, dialog, form …), where they always span the box. */
+:is(
+  .tf-modal-foot,
+  .tf-card-foot,
+  .tf-approval-foot,
+  .tf-review-actions,
+  .tf-cookie-actions,
+  .tf-push-actions,
+  .tf-insight-actions,
+  .tf-journal-foot,
+  :is(.tf-panel, .tf-card, .tf-modal, .tf-drawer, .tf-popover, .tf-form, .tf-col)
+    > .tf-row:not(:has(> :not(.tf-btn, .tf-iconbtn)))
+) {
+  container: tf-actions / inline-size;
+  flex-wrap: wrap;
+}
+@container tf-actions (max-width: 400px) {
+  .tf-btn {
+    flex: 1 1 auto;
+  }
+}
+@container tf-actions (max-width: 240px) {
+  .tf-btn {
+    flex-basis: 100%;
+  }
+}
+
 /* 07-polish.css */
 /* ───────────── Polish ─────────────
    Small consistency fixes found by auditing every preview in both kits and themes. Zero
@@ -14752,10 +14783,17 @@ textarea.tf-input,
     .tf-card,
     .tf-stat,
     .tf-dock,
-    .tf-sidebar,
+    .tf-sidebar:not(.shell),
     .tf-map-legend,
     .tf-map-ctl,
-    .tf-map-pop
+    .tf-map-pop,
+    .tf-vital,
+    .tf-journal,
+    .tf-goal,
+    .tf-insight,
+    .tf-consent-item,
+    .tf-nw,
+    .tf-policy
   ):not(
     :is(
         .tf-panel,
@@ -14771,6 +14809,13 @@ textarea.tf-input,
         .tf-palette,
         .tf-modal,
         .tf-drawer,
+        .tf-vital,
+        .tf-journal,
+        .tf-goal,
+        .tf-insight,
+        .tf-consent-item,
+        .tf-nw,
+        .tf-policy,
         .tf-glass
       )
       *
@@ -14865,6 +14910,10 @@ textarea.tf-input,
         .tf-modal,
         .tf-drawer,
         .tf-glass,
+        .tf-insight,
+        .tf-policy,
+        .tf-consent-item,
+        .tf-journal,
         .tf-btngroup,
         .tf-map-ctl,
         .tf-topbar
@@ -14890,7 +14939,21 @@ textarea.tf-input,
 }
 [data-surface="glass"]
   :is(.tf-iconbtn-soft, .tf-iconbtn-outline, .tf-btn-secondary, .tf-chip):not(
-    :is(.tf-panel, .tf-card, .tf-dock, .tf-popover, .tf-menu, .tf-modal, .tf-drawer, .tf-glass) *
+    :is(
+        .tf-panel,
+        .tf-card,
+        .tf-dock,
+        .tf-popover,
+        .tf-menu,
+        .tf-modal,
+        .tf-drawer,
+        .tf-insight,
+        .tf-policy,
+        .tf-consent-item,
+        .tf-journal,
+        .tf-glass
+      )
+      *
   ):not(.tf-solid):not([aria-pressed="true"]):hover {
   background:
     linear-gradient(var(--glass-hover), var(--glass-hover)) border-box,
@@ -14941,10 +15004,17 @@ textarea.tf-input,
       .tf-card,
       .tf-stat,
       .tf-dock,
-      .tf-sidebar,
+      .tf-sidebar:not(.shell),
       .tf-map-legend,
       .tf-map-ctl,
-      .tf-map-pop
+      .tf-map-pop,
+      .tf-vital,
+      .tf-journal,
+      .tf-goal,
+      .tf-insight,
+      .tf-consent-item,
+      .tf-nw,
+      .tf-policy
     ) {
     outline: 1px solid CanvasText;
     outline-offset: -1px;
@@ -15336,3 +15406,1373 @@ textarea.tf-input,
 [data-motion="off"] .tf-ambient-field {
   animation: none;
 }
+
+/* 11-life.css */
+/* Life: habits, mood, vitals, activity rings, sleep, medication, journal, goals, insights, consent */
+
+/* HabitTracker */
+.tf-habits {
+  container: tf-habits / inline-size;
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+.tf-habit-days,
+.tf-habit-marks {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 24px;
+  gap: 6px;
+}
+.tf-habit-days {
+  justify-self: end;
+  padding-right: 12px;
+  font: 600 11px/16px var(--font-sans);
+  color: var(--ink-muted);
+  text-align: center;
+}
+.tf-habit {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  border-radius: var(--radius-md);
+}
+.tf-habit:hover {
+  background: var(--surface-sunken);
+}
+.tf-habit-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.tf-habit-text b {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: 600 14px/20px var(--font-sans);
+}
+.tf-habit-text small {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-habit-streak {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--butter-ink);
+}
+.tf-habit-mark {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  box-sizing: border-box;
+  padding: 0;
+  border: 1.5px solid var(--line-strong);
+  border-radius: 50%;
+  background: transparent;
+  color: var(--primary-foreground);
+}
+.tf-habit-mark.done {
+  border-color: var(--mint-ink);
+  background: var(--mint-ink);
+}
+/* missed: an empty ring with a small cross; no entry: a faint dashed ring */
+.tf-habit-mark.missed {
+  color: var(--ink-subtle);
+}
+.tf-habit-mark:not(.done):not(.missed) {
+  border-style: dashed;
+  border-color: var(--line);
+}
+.tf-habit-mark.today {
+  box-shadow:
+    0 0 0 2px var(--surface),
+    0 0 0 4px var(--line-strong);
+}
+/* narrow: the marks go under the name, the day labels line up with them */
+@container tf-habits (max-width: 400px) {
+  .tf-habit {
+    grid-template-columns: auto minmax(0, 1fr);
+    row-gap: 8px;
+  }
+  .tf-habit-marks {
+    grid-column: 1 / -1;
+  }
+  .tf-habit-days {
+    justify-self: start;
+    padding: 0 0 0 12px;
+  }
+}
+@container tf-habits (max-width: 240px) {
+  .tf-habit-days,
+  .tf-habit-marks {
+    gap: 2px;
+  }
+}
+button.tf-habit-mark {
+  cursor: pointer;
+}
+button.tf-habit-mark:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 4px;
+}
+
+/* MoodPicker */
+.tf-mood {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.tf-mood-q {
+  padding: 0;
+  margin-bottom: 12px;
+  font: 600 14px/20px var(--font-sans);
+}
+.tf-mood-scale {
+  container: tf-mood / inline-size;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 8px;
+}
+.tf-mood-opt {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-width: 0;
+  min-height: 72px;
+  padding: 8px 4px;
+  box-sizing: border-box;
+  border-radius: var(--radius-md);
+  color: var(--ink-muted);
+  font: 600 12px/16px var(--font-sans);
+  cursor: pointer;
+}
+/* the picked level keeps the tint its tf-t-* class gives it */
+.tf-mood-opt:not(.on) {
+  background: var(--surface-sunken);
+}
+.tf-mood.compact .tf-mood-opt {
+  min-height: 48px;
+}
+.tf-mood-opt span {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* narrow: tighter cells so every word still fits */
+@container tf-mood (max-width: 300px) {
+  .tf-mood-opt {
+    padding: 8px 2px;
+    font-size: 11px;
+  }
+}
+.tf-mood-opt input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.tf-mood-opt:hover {
+  color: var(--ink);
+}
+.tf-mood-opt.on {
+  box-shadow: inset 0 0 0 2px currentColor;
+}
+.tf-mood-opt:has(input:focus-visible) {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
+/* VitalTile */
+.tf-vital {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  padding: 16px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: var(--shadow-card);
+}
+.tf-vital-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.tf-vital-head .tf-badge {
+  flex: none;
+  white-space: nowrap;
+}
+.tf-vital-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  font: 600 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-vital-main {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 12px;
+}
+.tf-vital-value {
+  font: 700 28px/34px var(--font-sans);
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+}
+.tf-vital-value small {
+  margin-left: 4px;
+  font: 600 13px/18px var(--font-sans);
+  letter-spacing: 0;
+  color: var(--ink-muted);
+}
+.tf-vital-band {
+  position: relative;
+  height: 8px;
+  border-radius: var(--radius-pill);
+  background: var(--surface-sunken);
+}
+.tf-vital-normal {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  border-radius: var(--radius-pill);
+  background: var(--mint);
+}
+.tf-vital-dot {
+  position: absolute;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  box-sizing: border-box;
+  border: 3px solid var(--surface);
+  border-radius: 50%;
+  background: var(--mint-ink);
+  translate: -50% -50%;
+}
+.tf-vital.is-low .tf-vital-dot,
+.tf-vital.is-high .tf-vital-dot {
+  background: var(--butter-ink);
+}
+.tf-vital-foot {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 4px 12px;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+
+/* ActivityRings */
+.tf-rings {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 20px;
+  min-width: 0;
+}
+.tf-rings svg {
+  flex: none;
+}
+.tf-rings-legend {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.tf-rings-legend li {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  column-gap: 8px;
+}
+.tf-rings-key {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+.tf-rings-name {
+  font: 600 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-rings-legend b {
+  grid-column: 2;
+  font: 700 14px/20px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+
+/* SleepChart */
+.tf-sleep {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+.tf-sleep-chart {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.tf-sleep-lane {
+  display: grid;
+  grid-template-columns: 52px minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+}
+.tf-sleep-name {
+  font: 600 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-sleep-track {
+  position: relative;
+  height: 20px;
+  border-radius: var(--radius-sm);
+  background: var(--surface-sunken);
+}
+.tf-sleep-seg {
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  min-width: 2px;
+  border-radius: var(--radius-sm);
+}
+.tf-sleep-axis {
+  display: flex;
+  justify-content: space-between;
+  margin-left: 64px;
+  font: 500 11px/16px var(--font-sans);
+  color: var(--ink-muted);
+  font-variant-numeric: tabular-nums;
+}
+.tf-sleep-sum {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px 16px;
+}
+.tf-sleep-sum b {
+  font: 700 14px/20px var(--font-sans);
+}
+.tf-sleep-sum ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 14px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.tf-sleep-sum li {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-sleep-sum li span:last-child {
+  color: var(--ink);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+/* MedicationList */
+.tf-meds {
+  container: tf-meds / inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.tf-med {
+  display: grid;
+  grid-template-columns: 48px auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  border-radius: var(--radius-md);
+}
+.tf-med.is-due {
+  background: var(--surface-sunken);
+}
+.tf-med-time {
+  font: 600 13px/18px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-muted);
+}
+.tf-med-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.tf-med-text b {
+  font: 600 14px/20px var(--font-sans);
+  overflow-wrap: break-word;
+}
+.tf-med-text small {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-med.is-taken .tf-med-text b {
+  color: var(--ink-muted);
+}
+.tf-med-act {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+/* narrow: time, name and status; the icon gives way */
+@container tf-meds (max-width: 400px) {
+  .tf-med {
+    grid-template-columns: 44px minmax(0, 1fr) auto;
+    gap: 8px;
+    padding: 8px;
+  }
+  .tf-med > .tf-tinticon {
+    display: none;
+  }
+}
+
+/* JournalEntry */
+.tf-journal {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  padding: 20px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: var(--shadow-card);
+}
+.tf-journal-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font: 600 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-journal-mood {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+}
+.tf-journal-title {
+  margin: 0;
+  font: 700 16px/22px var(--font-sans);
+}
+.tf-journal-body {
+  font: 500 14px/22px var(--font-sans);
+  color: var(--ink);
+  overflow-wrap: anywhere;
+}
+.tf-journal-body p {
+  margin: 0 0 8px;
+}
+.tf-journal-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding-top: 4px;
+}
+.tf-journal-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+/* GoalCard */
+.tf-goal {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  padding: 20px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: var(--shadow-card);
+}
+/* narrow: the icon steps aside so the title keeps whole words */
+@container tf-goal (max-width: 280px) {
+  .tf-goal-head > .tf-tinticon {
+    display: none;
+  }
+}
+.tf-goal-head {
+  container: tf-goal / inline-size;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.tf-goal-head .tf-option-text {
+  flex: 1;
+  padding: 0;
+}
+.tf-goal-head b {
+  font: 700 14px/20px var(--font-sans);
+}
+.tf-goal-pct {
+  font: 700 20px/26px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+.tf-goal-bar {
+  height: 10px;
+  overflow: hidden;
+  border-radius: var(--radius-pill);
+  background: var(--surface-sunken);
+}
+.tf-goal-bar > span {
+  display: block;
+  height: 100%;
+  border-radius: var(--radius-pill);
+}
+.tf-goal-meta,
+.tf-goal-note {
+  margin: 0;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-goal-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font: 500 13px/18px var(--font-sans);
+}
+.tf-goal-steps li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.tf-goal-steps li.done {
+  color: var(--ink-muted);
+}
+.tf-goal-step {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border: 1.5px solid var(--line-strong);
+  border-radius: 50%;
+  color: var(--primary-foreground);
+}
+.tf-goal-steps li.done .tf-goal-step {
+  border-color: var(--primary);
+  background: var(--primary);
+}
+
+/* InsightCard */
+.tf-insight {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  padding: 16px 16px 16px 20px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow:
+    var(--shadow-card),
+    inset 3px 0 0 var(--sky-ink);
+  /* on glass the card takes a faint wash of its tone */
+  --tint: var(--sky);
+}
+.tf-insight.is-success {
+  --tint: var(--mint);
+  box-shadow:
+    var(--shadow-card),
+    inset 3px 0 0 var(--mint-ink);
+}
+.tf-insight.is-warning {
+  --tint: var(--butter);
+  box-shadow:
+    var(--shadow-card),
+    inset 3px 0 0 var(--butter-ink);
+}
+.tf-insight.is-highlight {
+  --tint: var(--lilac);
+  box-shadow:
+    var(--shadow-card),
+    inset 3px 0 0 var(--lilac-ink);
+}
+.tf-insight-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+.tf-insight-titles {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+.tf-insight-titles small {
+  font: 600 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-insight-titles b {
+  font: 700 15px/22px var(--font-sans);
+  overflow-wrap: anywhere;
+}
+.tf-insight-body {
+  font: 500 14px/20px var(--font-sans);
+  color: var(--ink);
+}
+.tf-insight-why button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 24px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--ink-muted);
+  font: 600 12px/16px var(--font-sans);
+  cursor: pointer;
+}
+.tf-insight-why button:hover {
+  color: var(--ink);
+}
+.tf-insight-why button:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+.tf-insight-why button[aria-expanded="true"] .tf-insight-chev {
+  rotate: 180deg;
+}
+.tf-insight-whytext {
+  margin-top: 8px;
+  padding: 12px;
+  border-radius: var(--radius-md);
+  background: var(--surface-sunken);
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-insight-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* ConsentList */
+.tf-consent {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+.tf-consent-item {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: var(--shadow-card);
+}
+.tf-consent-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+.tf-consent-head .tf-option-text {
+  flex: 1;
+  min-width: 140px;
+  padding: 0;
+}
+.tf-consent-purpose {
+  margin: 0;
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-consent-scopes {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.tf-consent-scopes li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 0;
+  border-top: 1px solid var(--line);
+}
+.tf-consent-scopes .tf-option-text {
+  min-width: 0;
+  padding: 0;
+}
+.tf-consent-req {
+  flex: none;
+  font: 600 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+
+/* 12-household.css */
+/* Life: budgets, subscriptions, net worth, deadlines, policies, coverage, claims, documents */
+
+/* BudgetList */
+.tf-budgets,
+.tf-subs ul,
+.tf-deadlines,
+.tf-docs,
+.tf-claim-steps,
+.tf-nw-side ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.tf-budgets {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.tf-budget {
+  container: tf-budget / inline-size;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 10px 12px;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--ink);
+  font: inherit;
+  text-align: left;
+}
+button.tf-budget {
+  cursor: pointer;
+}
+button.tf-budget:hover {
+  background: var(--accent);
+}
+button.tf-budget:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+.tf-budget-main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+.tf-budget-top {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0 12px;
+}
+/* narrow: the icon steps aside so the category keeps its name */
+@container tf-budget (max-width: 300px) {
+  .tf-budget > .tf-tinticon {
+    display: none;
+  }
+}
+.tf-budget-top b {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: 600 14px/20px var(--font-sans);
+}
+.tf-budget-nums {
+  flex: none;
+  font: 700 13px/18px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+.tf-budget-nums small {
+  font-weight: 500;
+  color: var(--ink-muted);
+}
+.tf-budget-bar {
+  display: block;
+  height: 8px;
+  overflow: hidden;
+  border-radius: var(--radius-pill);
+  background: var(--surface-sunken);
+}
+.tf-budget-bar > span {
+  display: block;
+  height: 100%;
+  border-radius: var(--radius-pill);
+}
+.tf-budget-left {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-budget-left.over {
+  color: var(--blush-ink);
+  font-weight: 600;
+}
+
+/* SubscriptionList */
+.tf-subs {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+.tf-subs ul {
+  container: tf-subs / inline-size;
+  display: flex;
+  flex-direction: column;
+}
+.tf-sub {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 4px;
+  border-bottom: 1px solid var(--line);
+}
+.tf-sub:last-child {
+  border-bottom: 0;
+}
+.tf-sub-text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+.tf-sub-text b {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: 600 14px/20px var(--font-sans);
+}
+.tf-sub-text small {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-sub-amount {
+  flex: none;
+  font: 700 14px/20px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+.tf-sub-amount small {
+  margin-left: 2px;
+  font-weight: 500;
+  color: var(--ink-muted);
+}
+/* narrow: amount and trial badge go under the name, the menu stays at the end */
+@container tf-subs (max-width: 380px) {
+  .tf-sub {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: 4px 12px;
+    align-items: center;
+  }
+  .tf-sub > :first-child {
+    grid-row: 1 / span 2;
+    align-self: start;
+  }
+  .tf-sub > .tf-sub-text,
+  .tf-sub > .tf-badge,
+  .tf-sub > .tf-sub-amount {
+    grid-column: 2;
+    justify-self: start;
+    text-align: left;
+  }
+  .tf-sub > :last-child:not(.tf-sub-amount) {
+    grid-column: 3;
+    grid-row: 1;
+  }
+}
+.tf-sub.is-cancelled .tf-sub-text b,
+.tf-sub.is-cancelled .tf-sub-amount {
+  color: var(--ink-muted);
+  text-decoration: line-through;
+}
+.tf-subs-total {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 4px 12px;
+  padding: 12px;
+  border-radius: var(--radius-md);
+  background: var(--surface-sunken);
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-subs-total b {
+  color: var(--ink);
+  font: 700 15px/20px var(--font-sans);
+}
+
+/* NetWorthCard */
+.tf-nw {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+  padding: 20px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: var(--shadow-card);
+}
+.tf-nw-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 12px;
+}
+.tf-nw-head > :first-child {
+  flex: 1 1 200px;
+}
+.tf-nw-head > :last-child:not(:first-child) {
+  flex: none;
+  max-width: 45%;
+}
+.tf-nw-title {
+  font: 600 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-nw-total {
+  font: 700 32px/38px var(--font-sans);
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+}
+.tf-nw-change {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font: 600 12px/16px var(--font-sans);
+  color: var(--mint-ink);
+}
+.tf-nw-change.down {
+  color: var(--blush-ink);
+}
+.tf-nw-change.down .tf-ico {
+  rotate: 180deg;
+}
+.tf-nw-change span {
+  font-weight: 500;
+  color: var(--ink-muted);
+}
+.tf-nw-sides {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+}
+.tf-nw-side {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+.tf-nw-sidehead {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--line);
+  font: 600 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-nw-sidehead b {
+  color: var(--ink);
+  font-variant-numeric: tabular-nums;
+}
+.tf-nw-side li {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 4px 0;
+  font: 500 13px/18px var(--font-sans);
+}
+.tf-nw-side li span:first-child {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  color: var(--ink-muted);
+}
+.tf-nw-side li span:last-child {
+  font-variant-numeric: tabular-nums;
+}
+
+/* DeadlineList */
+.tf-deadlines {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.tf-deadline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  padding: 8px 12px;
+  border-radius: var(--radius-md);
+}
+.tf-deadline.is-overdue {
+  background: var(--blush);
+}
+.tf-deadline.is-soon {
+  background: var(--surface-sunken);
+}
+.tf-deadline-date {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  align-items: center;
+  width: 40px;
+  padding: 4px 0;
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  box-shadow: inset 0 0 0 1px var(--line);
+}
+.tf-deadline-date b {
+  font: 700 16px/20px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+.tf-deadline-date small {
+  font: 600 10px/12px var(--font-sans);
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+.tf-deadline-text {
+  display: flex;
+  flex: 1 1 160px;
+  flex-direction: column;
+  min-width: 0;
+}
+.tf-deadline-text b {
+  font: 600 14px/20px var(--font-sans);
+  overflow-wrap: break-word;
+}
+.tf-deadline-text small {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-deadline-amount {
+  font: 700 13px/18px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+.tf-deadline.is-done .tf-deadline-text b {
+  color: var(--ink-muted);
+  text-decoration: line-through;
+}
+.tf-deadline-done {
+  color: var(--mint-ink);
+}
+
+/* PolicyCard */
+.tf-policy {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+  padding: 20px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: var(--shadow-card);
+}
+.tf-policy-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+.tf-policy-head .tf-option-text {
+  flex: 1;
+  min-width: 120px;
+  padding: 0;
+}
+.tf-policy-head b {
+  font: 700 15px/20px var(--font-sans);
+}
+.tf-policy-facts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+  gap: 12px;
+  margin: 0;
+}
+.tf-policy-facts div {
+  min-width: 0;
+}
+.tf-policy-facts dt {
+  font: 600 11px/14px var(--font-sans);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+.tf-policy-facts dd {
+  margin: 2px 0 0;
+  font: 700 15px/20px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: break-word;
+}
+.tf-policy-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding-top: 12px;
+  border-top: 1px solid var(--line);
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-policy-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+/* CoverageMatrix */
+.tf-coverage {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+.tf-coverage-sum {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+}
+.tf-coverage-box {
+  container: tf-coverage / inline-size;
+}
+.tf-coverage-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.tf-coverage-table th,
+.tf-coverage-table td {
+  padding: 10px 8px;
+  border-top: 1px solid var(--line);
+  text-align: left;
+  vertical-align: middle;
+}
+.tf-coverage-table th {
+  font-weight: inherit;
+}
+.tf-coverage-table th b {
+  display: block;
+  font: 600 14px/20px var(--font-sans);
+}
+.tf-coverage-table th small {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-coverage-table td:nth-child(2) {
+  white-space: nowrap;
+}
+.tf-coverage-note {
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-coverage-table tr.is-none th b {
+  color: var(--blush-ink);
+}
+/* narrow: each risk becomes a block, its status top right, the note underneath */
+@container tf-coverage (max-width: 440px) {
+  .tf-coverage-table,
+  .tf-coverage-table tbody {
+    display: block;
+  }
+  .tf-coverage-table tr {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 4px 12px;
+    padding: 10px 4px;
+    border-top: 1px solid var(--line);
+  }
+  .tf-coverage-table th,
+  .tf-coverage-table td {
+    padding: 0;
+    border-top: 0;
+  }
+  .tf-coverage-table td.tf-coverage-note {
+    grid-column: 1 / -1;
+  }
+}
+
+/* ClaimTimeline */
+.tf-claim {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+.tf-claim-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+.tf-claim-head .tf-option-text {
+  padding: 0;
+}
+.tf-claim-head b {
+  font: 700 15px/20px var(--font-sans);
+}
+.tf-claim-amount {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font: 700 18px/24px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+.tf-claim-amount small {
+  font: 600 11px/14px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-claim-steps {
+  display: flex;
+  flex-direction: column;
+}
+.tf-claim-steps li {
+  position: relative;
+  display: flex;
+  gap: 12px;
+  padding-bottom: 16px;
+}
+.tf-claim-steps li:last-child {
+  padding-bottom: 0;
+}
+.tf-claim-steps li:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  top: 20px;
+  bottom: 0;
+  left: 9px;
+  width: 2px;
+  background: var(--line);
+}
+.tf-claim-steps li.is-done:not(:last-child)::before {
+  background: var(--mint-ink);
+}
+.tf-claim-dot {
+  position: relative;
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  border: 2px solid var(--line-strong);
+  border-radius: 50%;
+  background: var(--surface);
+  color: var(--primary-foreground);
+}
+.tf-claim-steps li.is-done .tf-claim-dot {
+  border-color: var(--mint-ink);
+  background: var(--mint-ink);
+}
+.tf-claim-steps li.is-current .tf-claim-dot {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 4px var(--accent);
+}
+.tf-claim-steps li.is-failed .tf-claim-dot {
+  border-color: var(--blush-ink);
+  background: var(--blush-ink);
+}
+.tf-claim-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.tf-claim-text b {
+  font: 600 14px/20px var(--font-sans);
+}
+.tf-claim-steps li.is-todo .tf-claim-text b {
+  color: var(--ink-muted);
+  font-weight: 500;
+}
+.tf-claim-text small {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+
+/* DocumentList */
+.tf-docs {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.tf-doc {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  width: 100%;
+  padding: 10px 12px;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--ink);
+  font: inherit;
+  text-align: left;
+}
+button.tf-doc {
+  cursor: pointer;
+}
+button.tf-doc:hover {
+  background: var(--accent);
+}
+button.tf-doc:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+.tf-doc-text {
+  display: flex;
+  flex: 1 1 160px;
+  flex-direction: column;
+  min-width: 0;
+}
+.tf-doc-text b {
+  font: 600 14px/20px var(--font-sans);
+  overflow-wrap: break-word;
+}
+.tf-doc-text small,
+.tf-doc-valid {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}