@twentyfirstmedia/pro 0.6.0 → 0.8.0

package/dist/scoped.css

@@ -14396,6 +14396,37 @@
   }
 }
 
+/* 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. */
+:where([data-kit="pro"]) :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) {
+  :where([data-kit="pro"]) .tf-btn {
+    flex: 1 1 auto;
+  }
+}
+@container tf-actions (max-width: 240px) {
+  :where([data-kit="pro"]) .tf-btn {
+    flex-basis: 100%;
+  }
+}
+
 /* 07-polish.css */
 /* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
 /* ───────────── Polish ─────────────
@@ -14605,10 +14636,24 @@
     .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,
+    .tf-connector,
+    .tf-device,
+    .tf-vehicle,
+    .tf-nowplaying,
+    .tf-workout,
+    .tf-booking,
+    .tf-scorecard
   ):not(
     :is(
         .tf-panel,
@@ -14624,6 +14669,20 @@
         .tf-palette,
         .tf-modal,
         .tf-drawer,
+        .tf-vital,
+        .tf-journal,
+        .tf-goal,
+        .tf-insight,
+        .tf-consent-item,
+        .tf-nw,
+        .tf-policy,
+        .tf-connector,
+        .tf-device,
+        .tf-vehicle,
+        .tf-nowplaying,
+        .tf-workout,
+        .tf-booking,
+        .tf-scorecard,
         .tf-glass
       )
       *
@@ -14634,10 +14693,24 @@
     .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,
+    .tf-connector,
+    .tf-device,
+    .tf-vehicle,
+    .tf-nowplaying,
+    .tf-workout,
+    .tf-booking,
+    .tf-scorecard
   ):not(
     :is(
         .tf-panel,
@@ -14653,6 +14726,20 @@
         .tf-palette,
         .tf-modal,
         .tf-drawer,
+        .tf-vital,
+        .tf-journal,
+        .tf-goal,
+        .tf-insight,
+        .tf-consent-item,
+        .tf-nw,
+        .tf-policy,
+        .tf-connector,
+        .tf-device,
+        .tf-vehicle,
+        .tf-nowplaying,
+        .tf-workout,
+        .tf-booking,
+        .tf-scorecard,
         .tf-glass
       )
       *
@@ -14769,6 +14856,17 @@
         .tf-modal,
         .tf-drawer,
         .tf-glass,
+        .tf-insight,
+        .tf-policy,
+        .tf-consent-item,
+        .tf-journal,
+        .tf-connector,
+        .tf-device,
+        .tf-vehicle,
+        .tf-nowplaying,
+        .tf-workout,
+        .tf-booking,
+        .tf-scorecard,
         .tf-btngroup,
         .tf-map-ctl,
         .tf-topbar
@@ -14798,6 +14896,17 @@
         .tf-modal,
         .tf-drawer,
         .tf-glass,
+        .tf-insight,
+        .tf-policy,
+        .tf-consent-item,
+        .tf-journal,
+        .tf-connector,
+        .tf-device,
+        .tf-vehicle,
+        .tf-nowplaying,
+        .tf-workout,
+        .tf-booking,
+        .tf-scorecard,
         .tf-btngroup,
         .tf-map-ctl,
         .tf-topbar
@@ -14823,10 +14932,52 @@
 }
 :where([data-kit="pro"])[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-connector,
+        .tf-device,
+        .tf-vehicle,
+        .tf-nowplaying,
+        .tf-workout,
+        .tf-booking,
+        .tf-scorecard,
+        .tf-glass
+      )
+      *
   ):not(.tf-solid):not([aria-pressed="true"]):hover, :where([data-kit="pro"]) [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-connector,
+        .tf-device,
+        .tf-vehicle,
+        .tf-nowplaying,
+        .tf-workout,
+        .tf-booking,
+        .tf-scorecard,
+        .tf-glass
+      )
+      *
   ):not(.tf-solid):not([aria-pressed="true"]):hover {
   background:
     linear-gradient(var(--glass-hover), var(--glass-hover)) border-box,
@@ -14878,10 +15029,24 @@
       .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,
+      .tf-connector,
+      .tf-device,
+      .tf-vehicle,
+      .tf-nowplaying,
+      .tf-workout,
+      .tf-booking,
+      .tf-scorecard
     ),
   :where([data-kit="pro"]) [data-surface="glass"]
     :is(
@@ -14889,10 +15054,24 @@
       .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,
+      .tf-connector,
+      .tf-device,
+      .tf-vehicle,
+      .tf-nowplaying,
+      .tf-workout,
+      .tf-booking,
+      .tf-scorecard
     ) {
     outline: 1px solid CanvasText;
     outline-offset: -1px;
@@ -15287,6 +15466,2429 @@
   animation: none;
 }
 
+/* 11-life.css */
+/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
+/* Life: habits, mood, vitals, activity rings, sleep, medication, journal, goals, insights, consent */
+
+/* HabitTracker */
+:where([data-kit="pro"]) .tf-habits {
+  container: tf-habits / inline-size;
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-habit-days,
+:where([data-kit="pro"]) .tf-habit-marks {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 24px;
+  gap: 6px;
+}
+:where([data-kit="pro"]) .tf-habit-days {
+  justify-self: end;
+  padding-right: 12px;
+  font: 500 11px/16px var(--font-sans);
+  color: var(--ink-muted);
+  text-align: center;
+}
+:where([data-kit="pro"]) .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);
+}
+:where([data-kit="pro"]) .tf-habit:hover {
+  background: var(--surface-sunken);
+}
+:where([data-kit="pro"]) .tf-habit-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-habit-text b {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: 500 14px/20px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-habit-text small {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-habit-streak {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--butter-ink);
+}
+:where([data-kit="pro"]) .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: var(--radius-1);
+  background: transparent;
+  color: var(--primary-foreground);
+}
+:where([data-kit="pro"]) .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 */
+:where([data-kit="pro"]) .tf-habit-mark.missed {
+  color: var(--ink-subtle);
+}
+:where([data-kit="pro"]) .tf-habit-mark:not(.done):not(.missed) {
+  border-style: dashed;
+  border-color: var(--line);
+}
+:where([data-kit="pro"]) .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) {
+  :where([data-kit="pro"]) .tf-habit {
+    grid-template-columns: auto minmax(0, 1fr);
+    row-gap: 8px;
+  }
+  :where([data-kit="pro"]) .tf-habit-marks {
+    grid-column: 1 / -1;
+  }
+  :where([data-kit="pro"]) .tf-habit-days {
+    justify-self: start;
+    padding: 0 0 0 12px;
+  }
+}
+@container tf-habits (max-width: 240px) {
+  :where([data-kit="pro"]) .tf-habit-days,
+  :where([data-kit="pro"]) .tf-habit-marks {
+    gap: 2px;
+  }
+}
+:where([data-kit="pro"]) button.tf-habit-mark {
+  cursor: pointer;
+}
+:where([data-kit="pro"]) button.tf-habit-mark:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 4px;
+}
+
+/* MoodPicker */
+:where([data-kit="pro"]) .tf-mood {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+:where([data-kit="pro"]) .tf-mood-q {
+  padding: 0;
+  margin-bottom: 12px;
+  font: 500 14px/20px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-mood-scale {
+  container: tf-mood / inline-size;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 8px;
+}
+:where([data-kit="pro"]) .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: 500 12px/16px var(--font-sans);
+  cursor: pointer;
+}
+/* the picked level keeps the tint its tf-t-* class gives it */
+:where([data-kit="pro"]) .tf-mood-opt:not(.on) {
+  background: var(--surface-sunken);
+}
+:where([data-kit="pro"]) .tf-mood.compact .tf-mood-opt {
+  min-height: 48px;
+}
+:where([data-kit="pro"]) .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) {
+  :where([data-kit="pro"]) .tf-mood-opt {
+    padding: 8px 2px;
+    font-size: 11px;
+  }
+}
+:where([data-kit="pro"]) .tf-mood-opt input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+:where([data-kit="pro"]) .tf-mood-opt:hover {
+  color: var(--ink);
+}
+:where([data-kit="pro"]) .tf-mood-opt.on {
+  box-shadow: inset 0 0 0 2px currentColor;
+}
+:where([data-kit="pro"]) .tf-mood-opt:has(input:focus-visible) {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
+/* VitalTile */
+:where([data-kit="pro"]) .tf-vital {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  padding: 16px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: 0 0 0 var(--line-width) var(--line);
+}
+:where([data-kit="pro"]) .tf-vital-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+:where([data-kit="pro"]) .tf-vital-head .tf-badge {
+  flex: none;
+  white-space: nowrap;
+}
+:where([data-kit="pro"]) .tf-vital-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-vital-main {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 12px;
+}
+:where([data-kit="pro"]) .tf-vital-value {
+  font: 600 22px/28px var(--font-sans);
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-vital-value small {
+  margin-left: 4px;
+  font: 500 13px/18px var(--font-sans);
+  letter-spacing: 0;
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-vital-band {
+  position: relative;
+  height: 8px;
+  border-radius: var(--radius-pill);
+  background: var(--surface-sunken);
+}
+:where([data-kit="pro"]) .tf-vital-normal {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  border-radius: var(--radius-pill);
+  background: var(--mint);
+}
+:where([data-kit="pro"]) .tf-vital-dot {
+  position: absolute;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  box-sizing: border-box;
+  border: 3px solid var(--surface);
+  border-radius: var(--radius-full);
+  background: var(--mint-ink);
+  translate: -50% -50%;
+}
+:where([data-kit="pro"]) .tf-vital.is-low .tf-vital-dot,
+:where([data-kit="pro"]) .tf-vital.is-high .tf-vital-dot {
+  background: var(--butter-ink);
+}
+:where([data-kit="pro"]) .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 */
+:where([data-kit="pro"]) .tf-rings {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 20px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-rings svg {
+  flex: none;
+}
+:where([data-kit="pro"]) .tf-rings-legend {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:where([data-kit="pro"]) .tf-rings-legend li {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  column-gap: 8px;
+}
+:where([data-kit="pro"]) .tf-rings-key {
+  width: 10px;
+  height: 10px;
+  border-radius: var(--radius-1);
+}
+:where([data-kit="pro"]) .tf-rings-name {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-rings-legend b {
+  grid-column: 2;
+  font: 600 14px/20px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+
+/* SleepChart */
+:where([data-kit="pro"]) .tf-sleep {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-sleep-chart {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+:where([data-kit="pro"]) .tf-sleep-lane {
+  display: grid;
+  grid-template-columns: 52px minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+}
+:where([data-kit="pro"]) .tf-sleep-name {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-sleep-track {
+  position: relative;
+  height: 20px;
+  border-radius: var(--radius-sm);
+  background: var(--surface-sunken);
+}
+:where([data-kit="pro"]) .tf-sleep-seg {
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  min-width: 2px;
+  border-radius: var(--radius-sm);
+}
+:where([data-kit="pro"]) .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;
+}
+:where([data-kit="pro"]) .tf-sleep-sum {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px 16px;
+}
+:where([data-kit="pro"]) .tf-sleep-sum b {
+  font: 600 14px/20px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-sleep-sum ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 14px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:where([data-kit="pro"]) .tf-sleep-sum li {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-sleep-sum li span:last-child {
+  color: var(--ink);
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+}
+
+/* MedicationList */
+:where([data-kit="pro"]) .tf-meds {
+  container: tf-meds / inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:where([data-kit="pro"]) .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);
+}
+:where([data-kit="pro"]) .tf-med.is-due {
+  background: var(--surface-sunken);
+}
+:where([data-kit="pro"]) .tf-med-time {
+  font: 500 13px/18px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-med-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-med-text b {
+  font: 500 14px/20px var(--font-sans);
+  overflow-wrap: break-word;
+}
+:where([data-kit="pro"]) .tf-med-text small {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-med.is-taken .tf-med-text b {
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .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) {
+  :where([data-kit="pro"]) .tf-med {
+    grid-template-columns: 44px minmax(0, 1fr) auto;
+    gap: 8px;
+    padding: 8px;
+  }
+  :where([data-kit="pro"]) .tf-med > .tf-tinticon {
+    display: none;
+  }
+}
+
+/* JournalEntry */
+:where([data-kit="pro"]) .tf-journal {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  padding: 20px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: 0 0 0 var(--line-width) var(--line);
+}
+:where([data-kit="pro"]) .tf-journal-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-journal-mood {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+}
+:where([data-kit="pro"]) .tf-journal-title {
+  margin: 0;
+  font: 600 14px/20px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-journal-body {
+  font: 500 14px/20px var(--font-sans);
+  color: var(--ink);
+  overflow-wrap: anywhere;
+}
+:where([data-kit="pro"]) .tf-journal-body p {
+  margin: 0 0 8px;
+}
+:where([data-kit="pro"]) .tf-journal-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding-top: 4px;
+}
+:where([data-kit="pro"]) .tf-journal-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+/* GoalCard */
+:where([data-kit="pro"]) .tf-goal {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  padding: 20px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: 0 0 0 var(--line-width) var(--line);
+}
+/* narrow: the icon steps aside so the title keeps whole words */
+@container tf-goal (max-width: 280px) {
+  :where([data-kit="pro"]) .tf-goal-head > .tf-tinticon {
+    display: none;
+  }
+}
+:where([data-kit="pro"]) .tf-goal-head {
+  container: tf-goal / inline-size;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+:where([data-kit="pro"]) .tf-goal-head .tf-option-text {
+  flex: 1;
+  padding: 0;
+}
+:where([data-kit="pro"]) .tf-goal-head b {
+  font: 600 14px/20px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-goal-pct {
+  font: 600 18px/24px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-goal-bar {
+  height: 10px;
+  overflow: hidden;
+  border-radius: var(--radius-pill);
+  background: var(--surface-sunken);
+}
+:where([data-kit="pro"]) .tf-goal-bar > span {
+  display: block;
+  height: 100%;
+  border-radius: var(--radius-pill);
+}
+:where([data-kit="pro"]) .tf-goal-meta,
+:where([data-kit="pro"]) .tf-goal-note {
+  margin: 0;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-goal-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font: 500 13px/18px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-goal-steps li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+:where([data-kit="pro"]) .tf-goal-steps li.done {
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .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: var(--radius-1);
+  color: var(--primary-foreground);
+}
+:where([data-kit="pro"]) .tf-goal-steps li.done .tf-goal-step {
+  border-color: var(--primary);
+  background: var(--primary);
+}
+
+/* InsightCard */
+:where([data-kit="pro"]) .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:
+    0 0 0 var(--line-width) var(--line),
+    inset 3px 0 0 var(--sky-ink);
+  /* on glass the card takes a faint wash of its tone */
+  --tint: var(--sky);
+}
+:where([data-kit="pro"]) .tf-insight.is-success {
+  --tint: var(--mint);
+  box-shadow:
+    0 0 0 var(--line-width) var(--line),
+    inset 3px 0 0 var(--mint-ink);
+}
+:where([data-kit="pro"]) .tf-insight.is-warning {
+  --tint: var(--butter);
+  box-shadow:
+    0 0 0 var(--line-width) var(--line),
+    inset 3px 0 0 var(--butter-ink);
+}
+:where([data-kit="pro"]) .tf-insight.is-highlight {
+  --tint: var(--lilac);
+  box-shadow:
+    0 0 0 var(--line-width) var(--line),
+    inset 3px 0 0 var(--lilac-ink);
+}
+:where([data-kit="pro"]) .tf-insight-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+:where([data-kit="pro"]) .tf-insight-titles {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-insight-titles small {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-insight-titles b {
+  font: 600 15px/20px var(--font-sans);
+  overflow-wrap: anywhere;
+}
+:where([data-kit="pro"]) .tf-insight-body {
+  font: 500 14px/20px var(--font-sans);
+  color: var(--ink);
+}
+:where([data-kit="pro"]) .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: 500 12px/16px var(--font-sans);
+  cursor: pointer;
+}
+:where([data-kit="pro"]) .tf-insight-why button:hover {
+  color: var(--ink);
+}
+:where([data-kit="pro"]) .tf-insight-why button:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+:where([data-kit="pro"]) .tf-insight-why button[aria-expanded="true"] .tf-insight-chev {
+  rotate: 180deg;
+}
+:where([data-kit="pro"]) .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);
+}
+:where([data-kit="pro"]) .tf-insight-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* ConsentList */
+:where([data-kit="pro"]) .tf-consent {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-consent-item {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: 0 0 0 var(--line-width) var(--line);
+}
+:where([data-kit="pro"]) .tf-consent-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+:where([data-kit="pro"]) .tf-consent-head .tf-option-text {
+  flex: 1;
+  min-width: 140px;
+  padding: 0;
+}
+:where([data-kit="pro"]) .tf-consent-purpose {
+  margin: 0;
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-consent-scopes {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:where([data-kit="pro"]) .tf-consent-scopes li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 0;
+  border-top: 1px solid var(--line);
+}
+:where([data-kit="pro"]) .tf-consent-scopes .tf-option-text {
+  min-width: 0;
+  padding: 0;
+}
+:where([data-kit="pro"]) .tf-consent-req {
+  flex: none;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+
+/* 12-household.css */
+/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
+/* Life: budgets, subscriptions, net worth, deadlines, policies, coverage, claims, documents */
+
+/* BudgetList */
+:where([data-kit="pro"]) .tf-budgets,
+:where([data-kit="pro"]) .tf-subs ul,
+:where([data-kit="pro"]) .tf-deadlines,
+:where([data-kit="pro"]) .tf-docs,
+:where([data-kit="pro"]) .tf-claim-steps,
+:where([data-kit="pro"]) .tf-nw-side ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:where([data-kit="pro"]) .tf-budgets {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .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;
+}
+:where([data-kit="pro"]) button.tf-budget {
+  cursor: pointer;
+}
+:where([data-kit="pro"]) button.tf-budget:hover {
+  background: var(--accent);
+}
+:where([data-kit="pro"]) button.tf-budget:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+:where([data-kit="pro"]) .tf-budget-main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .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) {
+  :where([data-kit="pro"]) .tf-budget > .tf-tinticon {
+    display: none;
+  }
+}
+:where([data-kit="pro"]) .tf-budget-top b {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: 500 14px/20px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-budget-nums {
+  flex: none;
+  font: 600 13px/18px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-budget-nums small {
+  font-weight: 500;
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-budget-bar {
+  display: block;
+  height: 8px;
+  overflow: hidden;
+  border-radius: var(--radius-pill);
+  background: var(--surface-sunken);
+}
+:where([data-kit="pro"]) .tf-budget-bar > span {
+  display: block;
+  height: 100%;
+  border-radius: var(--radius-pill);
+}
+:where([data-kit="pro"]) .tf-budget-left {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-budget-left.over {
+  color: var(--blush-ink);
+  font-weight: 500;
+}
+
+/* SubscriptionList */
+:where([data-kit="pro"]) .tf-subs {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-subs ul {
+  container: tf-subs / inline-size;
+  display: flex;
+  flex-direction: column;
+}
+:where([data-kit="pro"]) .tf-sub {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 4px;
+  border-bottom: 1px solid var(--line);
+}
+:where([data-kit="pro"]) .tf-sub:last-child {
+  border-bottom: 0;
+}
+:where([data-kit="pro"]) .tf-sub-text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-sub-text b {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: 500 14px/20px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-sub-text small {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-sub-amount {
+  flex: none;
+  font: 600 14px/20px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+:where([data-kit="pro"]) .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) {
+  :where([data-kit="pro"]) .tf-sub {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: 4px 12px;
+    align-items: center;
+  }
+  :where([data-kit="pro"]) .tf-sub > :first-child {
+    grid-row: 1 / span 2;
+    align-self: start;
+  }
+  :where([data-kit="pro"]) .tf-sub > .tf-sub-text,
+  :where([data-kit="pro"]) .tf-sub > .tf-badge,
+  :where([data-kit="pro"]) .tf-sub > .tf-sub-amount {
+    grid-column: 2;
+    justify-self: start;
+    text-align: left;
+  }
+  :where([data-kit="pro"]) .tf-sub > :last-child:not(.tf-sub-amount) {
+    grid-column: 3;
+    grid-row: 1;
+  }
+}
+:where([data-kit="pro"]) .tf-sub.is-cancelled .tf-sub-text b,
+:where([data-kit="pro"]) .tf-sub.is-cancelled .tf-sub-amount {
+  color: var(--ink-muted);
+  text-decoration: line-through;
+}
+:where([data-kit="pro"]) .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);
+}
+:where([data-kit="pro"]) .tf-subs-total b {
+  color: var(--ink);
+  font: 600 15px/20px var(--font-sans);
+}
+
+/* NetWorthCard */
+:where([data-kit="pro"]) .tf-nw {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+  padding: 20px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: 0 0 0 var(--line-width) var(--line);
+}
+:where([data-kit="pro"]) .tf-nw-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 12px;
+}
+:where([data-kit="pro"]) .tf-nw-head > :first-child {
+  flex: 1 1 200px;
+}
+:where([data-kit="pro"]) .tf-nw-head > :last-child:not(:first-child) {
+  flex: none;
+  max-width: 45%;
+}
+:where([data-kit="pro"]) .tf-nw-title {
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-nw-total {
+  font: 600 24px/38px var(--font-sans);
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-nw-change {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--mint-ink);
+}
+:where([data-kit="pro"]) .tf-nw-change.down {
+  color: var(--blush-ink);
+}
+:where([data-kit="pro"]) .tf-nw-change.down .tf-ico {
+  rotate: 180deg;
+}
+:where([data-kit="pro"]) .tf-nw-change span {
+  font-weight: 500;
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-nw-sides {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+}
+:where([data-kit="pro"]) .tf-nw-side {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-nw-sidehead {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--line);
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-nw-sidehead b {
+  color: var(--ink);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-nw-side li {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 4px 0;
+  font: 500 13px/18px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-nw-side li span:first-child {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-nw-side li span:last-child {
+  font-variant-numeric: tabular-nums;
+}
+
+/* DeadlineList */
+:where([data-kit="pro"]) .tf-deadlines {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-deadline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  padding: 8px 12px;
+  border-radius: var(--radius-md);
+}
+:where([data-kit="pro"]) .tf-deadline.is-overdue {
+  background: var(--blush);
+}
+:where([data-kit="pro"]) .tf-deadline.is-soon {
+  background: var(--surface-sunken);
+}
+:where([data-kit="pro"]) .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);
+}
+:where([data-kit="pro"]) .tf-deadline-date b {
+  font: 600 14px/20px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-deadline-date small {
+  font: 500 10px/12px var(--font-sans);
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-deadline-text {
+  display: flex;
+  flex: 1 1 160px;
+  flex-direction: column;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-deadline-text b {
+  font: 500 14px/20px var(--font-sans);
+  overflow-wrap: break-word;
+}
+:where([data-kit="pro"]) .tf-deadline-text small {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-deadline-amount {
+  font: 600 13px/18px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-deadline.is-done .tf-deadline-text b {
+  color: var(--ink-muted);
+  text-decoration: line-through;
+}
+:where([data-kit="pro"]) .tf-deadline-done {
+  color: var(--mint-ink);
+}
+
+/* PolicyCard */
+:where([data-kit="pro"]) .tf-policy {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+  padding: 20px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: 0 0 0 var(--line-width) var(--line);
+}
+:where([data-kit="pro"]) .tf-policy-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+:where([data-kit="pro"]) .tf-policy-head .tf-option-text {
+  flex: 1;
+  min-width: 120px;
+  padding: 0;
+}
+:where([data-kit="pro"]) .tf-policy-head b {
+  font: 600 15px/20px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-policy-facts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+  gap: 12px;
+  margin: 0;
+}
+:where([data-kit="pro"]) .tf-policy-facts div {
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-policy-facts dt {
+  font: 500 11px/14px var(--font-sans);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-policy-facts dd {
+  margin: 2px 0 0;
+  font: 600 15px/20px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: break-word;
+}
+:where([data-kit="pro"]) .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);
+}
+:where([data-kit="pro"]) .tf-policy-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+/* CoverageMatrix */
+:where([data-kit="pro"]) .tf-coverage {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-coverage-sum {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+}
+:where([data-kit="pro"]) .tf-coverage-box {
+  container: tf-coverage / inline-size;
+}
+:where([data-kit="pro"]) .tf-coverage-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+:where([data-kit="pro"]) .tf-coverage-table th,
+:where([data-kit="pro"]) .tf-coverage-table td {
+  padding: 10px 8px;
+  border-top: 1px solid var(--line);
+  text-align: left;
+  vertical-align: middle;
+}
+:where([data-kit="pro"]) .tf-coverage-table th {
+  font-weight: inherit;
+}
+:where([data-kit="pro"]) .tf-coverage-table th b {
+  display: block;
+  font: 500 14px/20px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-coverage-table th small {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-coverage-table td:nth-child(2) {
+  white-space: nowrap;
+}
+:where([data-kit="pro"]) .tf-coverage-note {
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .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) {
+  :where([data-kit="pro"]) .tf-coverage-table,
+  :where([data-kit="pro"]) .tf-coverage-table tbody {
+    display: block;
+  }
+  :where([data-kit="pro"]) .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);
+  }
+  :where([data-kit="pro"]) .tf-coverage-table th,
+  :where([data-kit="pro"]) .tf-coverage-table td {
+    padding: 0;
+    border-top: 0;
+  }
+  :where([data-kit="pro"]) .tf-coverage-table td.tf-coverage-note {
+    grid-column: 1 / -1;
+  }
+}
+
+/* ClaimTimeline */
+:where([data-kit="pro"]) .tf-claim {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-claim-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+:where([data-kit="pro"]) .tf-claim-head .tf-option-text {
+  padding: 0;
+}
+:where([data-kit="pro"]) .tf-claim-head b {
+  font: 600 15px/20px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-claim-amount {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font: 600 18px/24px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-claim-amount small {
+  font: 500 11px/14px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-claim-steps {
+  display: flex;
+  flex-direction: column;
+}
+:where([data-kit="pro"]) .tf-claim-steps li {
+  position: relative;
+  display: flex;
+  gap: 12px;
+  padding-bottom: 16px;
+}
+:where([data-kit="pro"]) .tf-claim-steps li:last-child {
+  padding-bottom: 0;
+}
+:where([data-kit="pro"]) .tf-claim-steps li:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  top: 20px;
+  bottom: 0;
+  left: 9px;
+  width: 2px;
+  background: var(--line);
+}
+:where([data-kit="pro"]) .tf-claim-steps li.is-done:not(:last-child)::before {
+  background: var(--mint-ink);
+}
+:where([data-kit="pro"]) .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: var(--radius-full);
+  background: var(--surface);
+  color: var(--primary-foreground);
+}
+:where([data-kit="pro"]) .tf-claim-steps li.is-done .tf-claim-dot {
+  border-color: var(--mint-ink);
+  background: var(--mint-ink);
+}
+:where([data-kit="pro"]) .tf-claim-steps li.is-current .tf-claim-dot {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 4px var(--accent);
+}
+:where([data-kit="pro"]) .tf-claim-steps li.is-failed .tf-claim-dot {
+  border-color: var(--blush-ink);
+  background: var(--blush-ink);
+}
+:where([data-kit="pro"]) .tf-claim-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-claim-text b {
+  font: 500 14px/20px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-claim-steps li.is-todo .tf-claim-text b {
+  color: var(--ink-muted);
+  font-weight: 500;
+}
+:where([data-kit="pro"]) .tf-claim-text small {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+
+/* DocumentList */
+:where([data-kit="pro"]) .tf-docs {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .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;
+}
+:where([data-kit="pro"]) button.tf-doc {
+  cursor: pointer;
+}
+:where([data-kit="pro"]) button.tf-doc:hover {
+  background: var(--accent);
+}
+:where([data-kit="pro"]) button.tf-doc:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+:where([data-kit="pro"]) .tf-doc-text {
+  display: flex;
+  flex: 1 1 160px;
+  flex-direction: column;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-doc-text b {
+  font: 500 14px/20px var(--font-sans);
+  overflow-wrap: break-word;
+}
+:where([data-kit="pro"]) .tf-doc-text small,
+:where([data-kit="pro"]) .tf-doc-valid {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+
+/* 13-connectors.css */
+/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
+/* Connectors: service marks, the connector gallery, sync status, agent activity */
+
+/* ServiceMark */
+:where([data-kit="pro"]) .tf-svc {
+  position: relative;
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 36px;
+  height: var(--density-control);
+  box-sizing: border-box;
+  border-radius: var(--radius-md);
+}
+:where([data-kit="pro"]) .tf-svc-sm {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-sm);
+}
+:where([data-kit="pro"]) .tf-svc-lg {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-lg);
+}
+:where([data-kit="pro"]) .tf-svc > img,
+:where([data-kit="pro"]) .tf-svc > svg:not(.tf-ico) {
+  width: 62%;
+  height: 62%;
+  object-fit: contain;
+}
+:where([data-kit="pro"]) .tf-svc-mono {
+  font: 600 13px/1 var(--font-sans);
+  letter-spacing: 0.02em;
+}
+:where([data-kit="pro"]) .tf-svc-sm .tf-svc-mono {
+  font-size: 10px;
+}
+:where([data-kit="pro"]) .tf-svc-lg .tf-svc-mono {
+  font-size: 17px;
+}
+/* the state dot sits on the corner, ringed in the surface colour */
+:where([data-kit="pro"]) .tf-svc-dot {
+  position: absolute;
+  right: -2px;
+  bottom: -2px;
+  width: 10px;
+  height: 10px;
+  box-sizing: border-box;
+  border: 2px solid var(--card);
+  border-radius: var(--radius-full);
+  background: var(--idle);
+}
+:where([data-kit="pro"]) .tf-svc-sm .tf-svc-dot {
+  width: 8px;
+  height: 8px;
+  border-width: 1.5px;
+}
+:where([data-kit="pro"]) .tf-svc-dot.is-connected {
+  background: var(--ok);
+}
+:where([data-kit="pro"]) .tf-svc-dot.is-syncing {
+  background: var(--info);
+}
+:where([data-kit="pro"]) .tf-svc-dot.is-error {
+  background: var(--danger);
+}
+:where([data-kit="pro"]) .tf-svc-dot.is-paused {
+  background: var(--warn);
+}
+
+/* ConnectorGallery */
+:where([data-kit="pro"]) .tf-connectors {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-connectors-filters {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+:where([data-kit="pro"]) .tf-connectors-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+:where([data-kit="pro"]) .tf-connectors-group {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+:where([data-kit="pro"]) .tf-connectors-title {
+  margin: 0;
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-connectors-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
+  gap: 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:where([data-kit="pro"]) .tf-connector {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  padding: 16px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: 0 0 0 var(--line-width) var(--line);
+}
+:where([data-kit="pro"]) .tf-connector-head {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-connector-head .tf-option-text {
+  min-width: 0;
+  padding: 0;
+}
+:where([data-kit="pro"]) .tf-connector-head b {
+  font: 500 14px/20px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-connector-head small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:where([data-kit="pro"]) .tf-connector-desc {
+  display: -webkit-box;
+  margin: 0;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-connector-note {
+  margin: 0;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-subtle);
+}
+:where([data-kit="pro"]) .tf-connector-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: auto;
+  padding-top: 4px;
+}
+:where([data-kit="pro"]) .tf-connector.is-soon {
+  box-shadow: inset 0 0 0 1px var(--line);
+  background: transparent;
+}
+
+/* SyncStatus */
+:where([data-kit="pro"]) .tf-sync {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink);
+}
+:where([data-kit="pro"]) .tf-sync-line {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+}
+:where([data-kit="pro"]) .tf-sync-icon {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: var(--radius-1);
+  background: var(--mint);
+  color: var(--mint-ink);
+}
+:where([data-kit="pro"]) .tf-sync.is-syncing .tf-sync-icon {
+  background: var(--sky);
+  color: var(--sky-ink);
+}
+:where([data-kit="pro"]) .tf-sync.is-syncing .tf-sync-icon .tf-ico {
+  animation: tf-pro-spin 1.2s linear infinite;
+}
+:where([data-kit="pro"]) .tf-sync.is-error .tf-sync-icon {
+  background: var(--blush);
+  color: var(--blush-ink);
+}
+:where([data-kit="pro"]) .tf-sync.is-paused .tf-sync-icon {
+  background: var(--butter);
+  color: var(--butter-ink);
+}
+:where([data-kit="pro"]) .tf-sync.is-never .tf-sync-icon {
+  background: var(--surface-sunken);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-sync-text small,
+:where([data-kit="pro"]) .tf-sync-next {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-sync-line > .tf-btn {
+  margin-left: auto;
+}
+:where([data-kit="pro"]) .tf-sync-error {
+  margin: 0;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--blush-ink);
+}
+:where([data-kit="pro"]) .tf-sync-counts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 14px;
+  margin: 0;
+  padding: 0 0 0 28px;
+  list-style: none;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-sync-counts b {
+  font-weight: 500;
+  color: var(--ink);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-sync.compact {
+  font-size: 12px;
+  line-height: 16px;
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-sync.compact .tf-sync-icon {
+  width: 16px;
+  height: 16px;
+}
+:where([data-kit="pro"]) .tf-sync.compact .tf-sync-icon .tf-ico {
+  width: 11px;
+  height: 11px;
+}
+
+/* AgentActivity */
+:where([data-kit="pro"]) .tf-agentlog {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-agentlog-day ul {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:where([data-kit="pro"]) .tf-agentlog-title {
+  margin: 0 0 4px;
+  font: 500 12px/16px var(--font-sans);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-agentlog-item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 4px 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--line);
+}
+:where([data-kit="pro"]) .tf-agentlog-item:last-child {
+  border-bottom: 0;
+}
+:where([data-kit="pro"]) .tf-agentlog-item > .tf-svc {
+  margin-top: 1px;
+}
+:where([data-kit="pro"]) .tf-agentlog-main {
+  display: flex;
+  flex: 1 1 200px;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-agentlog-text {
+  margin: 0;
+  font: 500 14px/20px var(--font-sans);
+  color: var(--ink);
+}
+:where([data-kit="pro"]) .tf-agentlog-item.is-declined .tf-agentlog-text,
+:where([data-kit="pro"]) .tf-agentlog-item.is-undone .tf-agentlog-text {
+  color: var(--ink-muted);
+  text-decoration: line-through;
+}
+:where([data-kit="pro"]) .tf-agentlog-detail {
+  margin: 0;
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-agentlog-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 8px;
+  margin: 2px 0 0;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-agentlog-kind,
+:where([data-kit="pro"]) .tf-agentlog-state,
+:where([data-kit="pro"]) .tf-scope-level {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 6px;
+  border-radius: var(--radius-pill);
+  font: 500 11px/18px var(--font-sans);
+  white-space: nowrap;
+  background: var(--surface-sunken);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-agentlog-kind.kind-act,
+:where([data-kit="pro"]) .tf-scope-level.is-act {
+  background: var(--sky);
+  color: var(--sky-ink);
+}
+:where([data-kit="pro"]) .tf-agentlog-kind.kind-money,
+:where([data-kit="pro"]) .tf-scope-level.is-money {
+  background: var(--butter);
+  color: var(--butter-ink);
+}
+:where([data-kit="pro"]) .tf-agentlog-state.is-waiting {
+  background: var(--lilac);
+  color: var(--lilac-ink);
+}
+:where([data-kit="pro"]) .tf-agentlog-state.is-failed {
+  background: var(--blush);
+  color: var(--blush-ink);
+}
+:where([data-kit="pro"]) .tf-agentlog-item > .tf-btn {
+  flex: none;
+  align-self: center;
+}
+
+/* ConsentList: what a permission allows */
+:where([data-kit="pro"]) .tf-scope-level {
+  align-self: flex-start;
+  margin-top: 4px;
+}
+
+/* ConnectionList */
+:where([data-kit="pro"]) .tf-connlist {
+  container: tf-connlist / inline-size;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:where([data-kit="pro"]) .tf-connlist-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: 4px 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--line);
+}
+:where([data-kit="pro"]) .tf-connlist-item:last-child {
+  border-bottom: 0;
+}
+:where([data-kit="pro"]) .tf-connlist-item .tf-option-text {
+  min-width: 0;
+  padding: 0;
+}
+:where([data-kit="pro"]) .tf-connlist-item .tf-option-text small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:where([data-kit="pro"]) .tf-connlist-item > .tf-btn {
+  grid-column: 4;
+}
+/* narrow: the sync line goes under the name */
+@container tf-connlist (max-width: 480px) {
+  :where([data-kit="pro"]) .tf-connlist-item {
+    grid-template-columns: auto minmax(0, 1fr) auto;
+  }
+  :where([data-kit="pro"]) .tf-connlist-item > .tf-sync {
+    grid-column: 2;
+    grid-row: 2;
+  }
+  :where([data-kit="pro"]) .tf-connlist-item > .tf-btn {
+    grid-column: 3;
+    grid-row: 1;
+  }
+}
+
+/* 14-connected-data.css */
+/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
+/* Connected data: devices, car, now playing, workouts, calls, bookings, golf, holdings */
+
+/* the cards */
+:where([data-kit="pro"]) .tf-device,
+:where([data-kit="pro"]) .tf-vehicle,
+:where([data-kit="pro"]) .tf-nowplaying,
+:where([data-kit="pro"]) .tf-workout,
+:where([data-kit="pro"]) .tf-booking,
+:where([data-kit="pro"]) .tf-scorecard {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  padding: 16px;
+  box-sizing: border-box;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: 0 0 0 var(--line-width) var(--line);
+}
+:where([data-kit="pro"]) :is(
+  .tf-device-head,
+  .tf-vehicle-head,
+  .tf-nowplaying-head,
+  .tf-workout-head,
+  .tf-booking-head,
+  .tf-scorecard-head
+) {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) :is(
+    .tf-device-head,
+    .tf-vehicle-head,
+    .tf-nowplaying-head,
+    .tf-workout-head,
+    .tf-booking-head,
+    .tf-scorecard-head
+  )
+  > .tf-option-text {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+}
+:where([data-kit="pro"]) :is(
+    .tf-device-head,
+    .tf-vehicle-head,
+    .tf-nowplaying-head,
+    .tf-workout-head,
+    .tf-booking-head,
+    .tf-scorecard-head
+  )
+  b {
+  font: 500 14px/20px var(--font-sans);
+}
+
+/* DeviceTile */
+:where([data-kit="pro"]) .tf-device-ico {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 36px;
+  height: var(--density-control);
+  border-radius: var(--radius-pill);
+  background: var(--surface-sunken);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-device-ico.is-on {
+  background: var(--butter);
+  color: var(--butter-ink);
+}
+:where([data-kit="pro"]) .tf-device.kind-thermostat .tf-device-ico.is-on {
+  background: var(--blush);
+  color: var(--blush-ink);
+}
+:where([data-kit="pro"]) .tf-device.kind-vacuum .tf-device-ico.is-on,
+:where([data-kit="pro"]) .tf-device.kind-purifier .tf-device-ico.is-on {
+  background: var(--sky);
+  color: var(--sky-ink);
+}
+:where([data-kit="pro"]) .tf-device-body {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+:where([data-kit="pro"]) .tf-device-value {
+  font: 600 22px/28px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-device.is-offline .tf-device-value,
+:where([data-kit="pro"]) .tf-device.is-off .tf-device-value {
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-device-status {
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-device-stepper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 4px;
+  border-radius: var(--radius-pill);
+  background: var(--surface-sunken);
+  font: 500 13px/18px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-device-stepper > span {
+  flex: 1;
+  text-align: center;
+}
+:where([data-kit="pro"]) .tf-device-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+:where([data-kit="pro"]) .tf-device-battery {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-right: auto;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-device-battery.is-low {
+  color: var(--blush-ink);
+}
+
+/* VehicleCard */
+:where([data-kit="pro"]) .tf-vehicle-charge {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px 12px;
+}
+:where([data-kit="pro"]) .tf-vehicle-pct {
+  font: 600 24px/38px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-vehicle-range {
+  font: 500 14px/20px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-vehicle-bar {
+  position: relative;
+  height: 12px;
+  border-radius: var(--radius-pill);
+  background: var(--surface-sunken);
+}
+:where([data-kit="pro"]) .tf-vehicle-fill {
+  height: 100%;
+  border-radius: var(--radius-pill);
+  background: var(--mint-ink);
+}
+:where([data-kit="pro"]) .tf-vehicle-fill.is-charging {
+  background: var(--sky-ink);
+}
+:where([data-kit="pro"]) .tf-vehicle-limit {
+  position: absolute;
+  top: -3px;
+  bottom: -3px;
+  width: 2px;
+  margin-left: -1px;
+  border-radius: 1px;
+  background: var(--ink);
+}
+:where([data-kit="pro"]) .tf-vehicle-line {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 14px;
+  margin: 0;
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-vehicle-line > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+:where([data-kit="pro"]) .tf-vehicle-state.is-charging {
+  color: var(--sky-ink);
+}
+:where([data-kit="pro"]) .tf-vehicle-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+:where([data-kit="pro"]) .tf-vehicle-inside {
+  margin-left: auto;
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+
+/* NowPlaying */
+:where([data-kit="pro"]) .tf-nowplaying {
+  flex-direction: row;
+  align-items: stretch;
+}
+:where([data-kit="pro"]) .tf-nowplaying-art {
+  display: grid;
+  flex: none;
+  place-items: center;
+  width: 88px;
+  height: 88px;
+  overflow: hidden;
+  border-radius: var(--radius-md);
+  background: var(--lilac);
+  color: var(--lilac-ink);
+}
+:where([data-kit="pro"]) .tf-nowplaying-art > img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+:where([data-kit="pro"]) .tf-nowplaying-main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-nowplaying-head small {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:where([data-kit="pro"]) .tf-nowplaying-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+:where([data-kit="pro"]) .tf-nowplaying-bar {
+  height: 4px;
+  overflow: hidden;
+  border-radius: var(--radius-pill);
+  background: var(--surface-sunken);
+}
+:where([data-kit="pro"]) .tf-nowplaying-bar > span {
+  display: block;
+  height: 100%;
+  background: var(--ink);
+}
+:where([data-kit="pro"]) .tf-nowplaying-times {
+  display: flex;
+  justify-content: space-between;
+  font: 500 11px/14px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-nowplaying-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px 8px;
+  margin-top: auto;
+}
+:where([data-kit="pro"]) .tf-nowplaying-device {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-nowplaying-controls {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-left: auto;
+}
+
+/* WorkoutCard */
+:where([data-kit="pro"]) .tf-workout-stats {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
+  gap: 10px 16px;
+  margin: 0;
+}
+:where([data-kit="pro"]) .tf-workout-stats dt {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-workout-stats dd {
+  margin: 0;
+  font: 600 14px/20px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-workout-zones {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+:where([data-kit="pro"]) .tf-workout-zones-title {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-workout-zonebar {
+  display: flex;
+  gap: 2px;
+  height: 8px;
+  overflow: hidden;
+  border-radius: var(--radius-pill);
+}
+:where([data-kit="pro"]) .tf-workout-zonebar > span {
+  flex-basis: 0;
+  min-width: 2px;
+}
+:where([data-kit="pro"]) .tf-workout-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 12px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-workout-legend li {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+:where([data-kit="pro"]) .tf-workout-legend i {
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+}
+
+/* CallLog */
+:where([data-kit="pro"]) .tf-calls {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-calls-day ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:where([data-kit="pro"]) .tf-call {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--line);
+}
+:where([data-kit="pro"]) .tf-call:last-child {
+  border-bottom: 0;
+}
+:where([data-kit="pro"]) .tf-call-ico {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 32px;
+  height: var(--control-sm);
+  border-radius: var(--radius-pill);
+  background: var(--surface-sunken);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-call.is-missed .tf-call-ico {
+  background: var(--blush);
+  color: var(--blush-ink);
+}
+:where([data-kit="pro"]) .tf-call-main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-call-name {
+  align-self: flex-start;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--ink);
+  font: 500 14px/20px var(--font-sans);
+  text-align: left;
+}
+:where([data-kit="pro"]) button.tf-call-name {
+  cursor: pointer;
+}
+:where([data-kit="pro"]) button.tf-call-name:hover {
+  text-decoration: underline;
+}
+:where([data-kit="pro"]) button.tf-call-name:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+:where([data-kit="pro"]) .tf-call.is-missed .tf-call-name {
+  color: var(--blush-ink);
+}
+:where([data-kit="pro"]) .tf-call-meta {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-call-summary {
+  margin: 2px 0 0;
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink);
+}
+
+/* ReservationCard */
+:where([data-kit="pro"]) .tf-booking-when {
+  margin: 0;
+  font: 500 15px/20px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-booking-place {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin: 0;
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-booking-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+:where([data-kit="pro"]) .tf-booking-code {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-booking-code b {
+  font: 500 12px/16px var(--font-mono);
+  color: var(--ink);
+}
+:where([data-kit="pro"]) .tf-booking.is-cancelled .tf-booking-when {
+  color: var(--ink-muted);
+  text-decoration: line-through;
+}
+:where([data-kit="pro"]) .tf-booking-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+/* Scorecard */
+:where([data-kit="pro"]) .tf-scorecard-total {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  align-items: flex-end;
+}
+:where([data-kit="pro"]) .tf-scorecard-total b {
+  font: 600 24px/28px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-scorecard-total small {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-scorecard-scroll {
+  overflow-x: auto;
+}
+:where([data-kit="pro"]) .tf-scorecard-table {
+  width: 100%;
+  min-width: 360px;
+  border-collapse: collapse;
+  font: 500 13px/18px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+:where([data-kit="pro"]) .tf-scorecard-table th,
+:where([data-kit="pro"]) .tf-scorecard-table td {
+  padding: 6px 2px;
+  border-bottom: 1px solid var(--line);
+}
+:where([data-kit="pro"]) .tf-scorecard-table th[scope="row"] {
+  padding-right: 8px;
+  text-align: left;
+  font-weight: 500;
+  color: var(--ink-muted);
+  white-space: nowrap;
+}
+:where([data-kit="pro"]) .tf-scorecard-table thead th {
+  font-weight: 500;
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-scorecard-table td:last-child,
+:where([data-kit="pro"]) .tf-scorecard-table th:last-child {
+  background: var(--surface-sunken);
+}
+:where([data-kit="pro"]) .tf-scorecard-par td,
+:where([data-kit="pro"]) .tf-scorecard-putts td {
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-score {
+  display: inline-grid;
+  place-items: center;
+  min-width: 22px;
+  height: 22px;
+  box-sizing: border-box;
+  font-weight: 500;
+}
+/* the usual marks: circles under par, squares over it */
+:where([data-kit="pro"]) .tf-score.is-birdie {
+  border: 1.5px solid currentColor;
+  border-radius: var(--radius-1);
+}
+:where([data-kit="pro"]) .tf-score.is-eagle {
+  border: 1.5px solid currentColor;
+  border-radius: var(--radius-1);
+  box-shadow:
+    0 0 0 2px var(--surface),
+    0 0 0 3.5px currentColor;
+}
+:where([data-kit="pro"]) .tf-score.is-bogey {
+  border: 1.5px solid currentColor;
+  border-radius: 2px;
+}
+:where([data-kit="pro"]) .tf-score.is-double {
+  border: 1.5px solid currentColor;
+  border-radius: 2px;
+  box-shadow:
+    0 0 0 2px var(--surface),
+    0 0 0 3.5px currentColor;
+}
+:where([data-kit="pro"]) .tf-scorecard-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 16px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-scorecard-legend li {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+:where([data-kit="pro"]) .tf-scorecard-legend .tf-score {
+  min-width: 14px;
+  height: 14px;
+}
+
+/* HoldingsList */
+:where([data-kit="pro"]) .tf-holdings {
+  container: tf-holdings / inline-size;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:where([data-kit="pro"]) .tf-holdings > li {
+  border-bottom: 1px solid var(--line);
+}
+:where([data-kit="pro"]) .tf-holdings > li:last-child {
+  border-bottom: 0;
+}
+:where([data-kit="pro"]) .tf-holding {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(96px, 160px);
+  align-items: center;
+  gap: 4px 16px;
+  width: 100%;
+  padding: 10px 0;
+  border: 0;
+  background: none;
+  color: var(--ink);
+  font: inherit;
+  text-align: left;
+}
+:where([data-kit="pro"]) button.tf-holding {
+  cursor: pointer;
+}
+:where([data-kit="pro"]) button.tf-holding:hover {
+  background: var(--accent);
+}
+:where([data-kit="pro"]) button.tf-holding:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+:where([data-kit="pro"]) .tf-holding .tf-option-text {
+  min-width: 0;
+  padding: 0;
+}
+:where([data-kit="pro"]) .tf-holding .tf-option-text b {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: 500 14px/20px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-holding-nums {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font-variant-numeric: tabular-nums;
+}
+:where([data-kit="pro"]) .tf-holding-nums b {
+  font: 500 14px/20px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-holding-change {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-holding-change.is-up {
+  color: var(--mint-ink);
+}
+:where([data-kit="pro"]) .tf-holding-change.is-down {
+  color: var(--blush-ink);
+}
+:where([data-kit="pro"]) .tf-holding-change.is-down .tf-ico {
+  transform: rotate(180deg);
+}
+:where([data-kit="pro"]) .tf-holding-weight {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font: 500 11px/14px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) .tf-holding-bar {
+  height: 6px;
+  overflow: hidden;
+  border-radius: var(--radius-pill);
+  background: var(--surface-sunken);
+}
+:where([data-kit="pro"]) .tf-holding-bar > span {
+  display: block;
+  height: 100%;
+  background: var(--lilac-ink);
+}
+/* narrow: the share goes under the name */
+@container tf-holdings (max-width: 420px) {
+  :where([data-kit="pro"]) .tf-holding {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+  :where([data-kit="pro"]) .tf-holding-weight {
+    grid-column: 1 / -1;
+  }
+}
+
 /* 90-pro-look.css */
 /* Pro look ("Clean Dark Pro", reference/pro): monochrome surfaces on a visible 1px hairline grid,
    square corners (2px on controls), Geist and Geist Mono, colour only for state, dense by default.