@twentyfirstmedia/pro 0.5.0 → 0.7.0

package/dist/styles.css

@@ -303,6 +303,11 @@
   --chart-lilac: var(--fg-300);
   --chart-butter: var(--fg-200);
   --chart-blush: var(--line-300);
+  --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
+  --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
+  --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
+  --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
+  --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
   --ok: #5cc28f;
   --ok-bg: rgba(92,194,143,0.12);
   --info: #7aa7f5;
@@ -451,6 +456,11 @@
     --chart-lilac: var(--fg-300);
     --chart-butter: var(--fg-200);
     --chart-blush: var(--line-300);
+    --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
+    --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
+    --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
+    --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
+    --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
     --ok: #5cc28f;
     --ok-bg: rgba(92,194,143,0.12);
     --info: #7aa7f5;
@@ -600,6 +610,11 @@
     --chart-lilac: var(--fg-300);
     --chart-butter: var(--fg-200);
     --chart-blush: var(--line-300);
+    --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
+    --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
+    --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
+    --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
+    --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
     --ok: #177447;
     --ok-bg: rgba(23,116,71,0.09);
     --info: #2856b0;
@@ -748,6 +763,11 @@
   --chart-lilac: var(--fg-300);
   --chart-butter: var(--fg-200);
   --chart-blush: var(--line-300);
+  --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
+  --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
+  --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
+  --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
+  --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
   --ok: #5cc28f;
   --ok-bg: rgba(92,194,143,0.12);
   --info: #7aa7f5;
@@ -895,6 +915,11 @@
   --chart-lilac: var(--fg-300);
   --chart-butter: var(--fg-200);
   --chart-blush: var(--line-300);
+  --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
+  --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
+  --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
+  --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
+  --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
   --ok: #177447;
   --ok-bg: rgba(23,116,71,0.09);
   --info: #2856b0;
@@ -1450,7 +1475,8 @@ select.tf-input {
   border-radius: var(--radius-pill);
   background: var(--surface-sunken);
   color: var(--ink-muted);
-  min-width: 220px;
+  min-width: min(220px, 100%);
+  box-sizing: border-box;
 }
 .tf-search input {
   border: 0;
@@ -1459,6 +1485,7 @@ select.tf-input {
   font: 500 14px/20px var(--font-sans);
   color: var(--ink);
   width: 100%;
+  min-width: 0;
 }
 .tf-search input::placeholder {
   color: var(--ink-subtle);
@@ -1540,7 +1567,7 @@ select.tf-input {
   display: flex;
 }
 .tf-tabs-block .tf-tab {
-  flex: 1;
+  flex: 1 1 0;
 }
 
 /* StatTile */
@@ -1857,6 +1884,36 @@ select.tf-input {
   background: var(--accent);
   color: var(--accent-foreground);
 }
+/* expanded: names next to the icons (the sheet's first column follows the rail's width) */
+.tf-rail {
+  transition: width var(--dur-base) var(--ease-out);
+}
+.tf-rail.expanded {
+  width: 200px;
+}
+.tf-rail.expanded .tf-rail-group {
+  align-items: stretch;
+}
+.tf-rail.expanded .tf-rail-btn {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 0 10px;
+  box-sizing: border-box;
+  border-radius: var(--radius-pill);
+}
+.tf-rail-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: 500 13px/18px var(--font-sans);
+}
+.tf-rail.expanded .tf-dotcount {
+  position: static;
+  margin-left: auto;
+}
 .tf-rail-btn[aria-current="page"] {
   background: var(--primary);
   color: var(--primary-foreground);
@@ -2006,9 +2063,28 @@ select.tf-input {
 .tf-shell .tf-topbar {
   padding: 0 var(--space-6);
 }
+/* AppShell with navigation="sidebar": the labelled sidebar on the frame, the sheet beside it */
+.tf-shell.tf-shell-sidebar {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: stretch;
+  padding: 8px;
+}
+.tf-shell-tools {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.tf-sheet.tf-sheet-norail {
+  grid-template-columns: minmax(0, 1fr) 300px;
+}
+.tf-sheet.tf-sheet-norail.tf-sheet-2 {
+  grid-template-columns: minmax(0, 1fr);
+}
 .tf-sheet {
   display: grid;
-  grid-template-columns: 44px 1fr 300px;
+  grid-template-columns: auto 1fr 300px;
   gap: var(--space-6);
   padding: var(--space-6);
   background: var(--canvas);
@@ -2525,6 +2601,64 @@ select.tf-input {
   background: var(--accent);
   color: var(--accent-foreground);
 }
+a.tf-row-item {
+  text-decoration: none;
+}
+.tf-row-text {
+  min-width: 0;
+}
+/* not interactive: no hover, no pointer */
+.tf-row-item.static {
+  cursor: default;
+}
+.tf-row-item.static:hover {
+  background: transparent;
+  color: var(--ink);
+}
+/* own buttons: the title is the link or button and its hit area stretches over the row */
+.tf-row-item.has-hit {
+  position: relative;
+}
+.tf-row-item.has-hit:hover {
+  background: transparent;
+  color: var(--ink);
+}
+.tf-row-item.has-hit:has(.tf-row-hit:hover) {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+.tf-row-item.has-hit:has(.tf-row-hit:focus-visible) {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+.tf-row-hit {
+  display: block;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+}
+.tf-row-hit::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+.tf-row-item.has-actions {
+  grid-template-columns: auto 1fr auto auto;
+}
+.tf-row-actions {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
 .tf-row-item[aria-current="true"] {
   background: var(--surface);
   box-shadow: 0 0 0 var(--line-width) var(--line);
@@ -2536,12 +2670,27 @@ select.tf-input {
   gap: 8px;
 }
 .tf-row-sub {
+  display: block;
   font: 500 13px/18px var(--font-sans);
   color: var(--ink-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+/* titleLines / subtitleLines: wrap, then end in an ellipsis after that many lines */
+.tf-row-sub.clamp,
+.tf-row-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--lines, 2);
+  line-clamp: var(--lines, 2);
+  white-space: normal;
+  overflow: hidden;
+  min-width: 0;
+}
+.tf-row-title.clamp {
+  align-items: flex-start;
+}
 .tf-row-meta {
   font: 500 12px/16px var(--font-sans);
   color: var(--ink-muted);
@@ -2728,6 +2877,13 @@ select.tf-input {
   font: 500 13px/1 var(--font-sans);
   cursor: pointer;
 }
+a.tf-page {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  text-decoration: none;
+}
 .tf-page:hover {
   background: var(--accent);
   color: var(--ink);
@@ -2738,18 +2894,42 @@ select.tf-input {
 }
 .tf-crumbs {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 6px;
+  min-width: 0;
   font: 500 13px/18px var(--font-sans);
   color: var(--ink-muted);
 }
-.tf-crumbs a {
+/* links and buttons get a 24px target without moving the text */
+.tf-crumb {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  max-width: 100%;
+  padding: 0 4px;
+  /* the target grows to 24px around the 18px line without moving the text */
+  margin: -3px -4px;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: none;
   color: inherit;
+  font: inherit;
   text-decoration: none;
+  overflow-wrap: anywhere;
+}
+a.tf-crumb,
+button.tf-crumb {
+  cursor: pointer;
 }
-.tf-crumbs a:hover {
+a.tf-crumb:hover,
+button.tf-crumb:hover {
   color: var(--ink);
 }
+.tf-crumb:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 0;
+}
 .tf-crumbs [aria-current] {
   color: var(--ink);
 }
@@ -2791,7 +2971,7 @@ select.tf-input {
   cursor: pointer;
 }
 .tf-sheet-2 {
-  grid-template-columns: 44px 1fr;
+  grid-template-columns: auto 1fr;
 }
 .tf-main {
   display: flex;
@@ -2861,6 +3041,26 @@ select.tf-input {
     justify-content: center;
   }
 }
+/* the TopBar measured that the labels do not fit: icons only, at any width */
+.tf-nav.tight .tf-nav-label {
+  display: none;
+}
+.tf-nav.tight .tf-nav-item {
+  position: relative;
+  width: 36px;
+  padding: 0;
+  justify-content: center;
+}
+.tf-nav.tight .tf-nav-item .tf-nav-count {
+  position: absolute;
+  top: -2px;
+  right: -4px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  font-size: 10px;
+  line-height: 16px;
+}
 .tf-main {
   animation: none;
 }
@@ -2986,6 +3186,19 @@ select.tf-input {
 .tf-user-text {
   display: flex;
   flex-direction: column;
+  min-width: 0;
+  max-width: 200px;
+}
+/* a long name or address ends in an ellipsis instead of pushing the nav out (title has it whole) */
+.tf-user-name,
+.tf-user-mail {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tf-user {
+  min-width: 0;
+  flex-shrink: 1;
 }
 
 /* Checkbox: real box + SVG check (no pseudo-elements on the input) */
@@ -2998,9 +3211,12 @@ select.tf-input {
 }
 .tf-checkbox input {
   position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
+  /* the box keeps its size; the hit area is at least 24px (WCAG 2.2 target size) */
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  width: max(24px, 100%);
+  height: max(24px, 100%);
   margin: 0;
   opacity: 0;
   cursor: pointer;
@@ -4075,6 +4291,23 @@ select.tf-input {
   font: 500 13px/18px var(--font-sans);
   pointer-events: none;
 }
+/* an interactive control at the end (reveal password, clear, copy) */
+.tf-input-action {
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+}
+.tf-inputwrap.has-action .tf-input {
+  padding-right: 44px;
+}
+.tf-inputwrap.has-action.has-suffix .tf-input {
+  padding-right: 72px;
+}
+.tf-inputwrap.has-action .tf-input-suffix {
+  right: 44px;
+}
 .tf-input-suffix.err {
   color: var(--blush-ink);
 }
@@ -4234,7 +4467,7 @@ select.tf-input {
   display: flex;
 }
 .tf-seg.block .tf-seg-item {
-  flex: 1;
+  flex: 1 1 0;
 }
 .tf-seg-item {
   position: relative;
@@ -4846,6 +5079,10 @@ label.tf-menu-item {
     border-color var(--dur-fast) ease,
     background-color var(--dur-fast) ease;
 }
+.tf-drop.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 .tf-drop b {
   font: 500 14px/20px var(--font-sans);
   margin-top: 4px;
@@ -4908,6 +5145,7 @@ label.tf-menu-item {
 /* Alert, confirm, toaster */
 .tf-alert {
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-start;
   gap: 12px;
   padding: 12px 12px 12px 16px;
@@ -4951,7 +5189,8 @@ label.tf-menu-item {
   color: var(--lilac-ink);
 }
 .tf-alert-body {
-  flex: 1;
+  /* when the alert is too narrow for text and actions, the actions move to their own line */
+  flex: 1 1 200px;
   min-width: 0;
   display: flex;
   flex-direction: column;
@@ -4967,8 +5206,11 @@ label.tf-menu-item {
 .tf-alert-actions {
   flex: none;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 4px;
+  max-width: 100%;
+  margin-left: auto;
 }
 .tf-alert .tf-iconbtn-ghost {
   background: transparent;
@@ -5973,14 +6215,29 @@ label.tf-menu-item {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  height: var(--control-sm);
-  padding: 0 12px 0 4px;
+  /* grows with a long title (two lines at most) instead of spilling over */
+  min-height: var(--control-sm);
+  box-sizing: border-box;
+  padding: 4px 12px 4px 4px;
   border-radius: var(--radius-pill);
   background: var(--surface-sunken);
   color: var(--ink);
   text-decoration: none;
   font: 500 12px/16px var(--font-sans);
-  max-width: 260px;
+  max-width: min(260px, 100%);
+}
+.tf-source-title {
+  min-width: 0;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+}
+.tf-source > .tf-ico,
+.tf-source-n {
+  flex: none;
 }
 .tf-source:hover {
   background: var(--line);
@@ -7103,17 +7360,25 @@ label.tf-menu-item {
   color: var(--ink-muted);
 }
 .tf-csteps {
+  /* one row at every width: steps shrink to their numbers instead of wrapping */
+  container: tf-csteps / inline-size;
   display: flex;
   gap: 8px;
   margin: 0;
   padding: 0;
   list-style: none;
-  flex-wrap: wrap;
 }
 .tf-csteps li {
   display: flex;
   align-items: center;
   gap: 8px;
+  min-width: 0;
+}
+.tf-cstep-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .tf-csteps li + li::before {
   content: "";
@@ -7142,6 +7407,40 @@ label.tf-menu-item {
 .tf-csteps button:disabled {
   cursor: default;
 }
+.tf-csteps button {
+  min-width: 0;
+  max-width: 100%;
+}
+.tf-csteps.compact li:not(.cur) .tf-cstep-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.tf-csteps.compact li:not(.cur) button {
+  padding: 0 4px;
+}
+.tf-csteps.compact li + li::before {
+  width: 12px;
+}
+@container tf-csteps (max-width: 560px) {
+  .tf-csteps li:not(.cur) .tf-cstep-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .tf-csteps li:not(.cur) button {
+    padding: 0 4px;
+  }
+  .tf-csteps li + li::before {
+    width: 12px;
+  }
+}
 .tf-csteps li.cur button {
   background: var(--surface);
   color: var(--ink);
@@ -7308,7 +7607,7 @@ label.tf-menu-item {
   color: var(--on-frame);
   box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
 }
-.tf-plan.featured .tf-plan-head span,
+.tf-plan.featured .tf-plan-head span:not(.tf-badge),
 .tf-plan.featured .tf-plan-price span,
 .tf-plan.featured .tf-plan-price s,
 .tf-plan.featured .tf-plan-feats li.no {
@@ -7339,10 +7638,22 @@ label.tf-menu-item {
 .tf-plan-head b {
   font: 600 18px/24px var(--font-sans);
 }
-.tf-plan-head span {
+.tf-plan-head span:not(.tf-badge) {
   font: 500 13px/18px var(--font-sans);
   color: var(--ink-muted);
 }
+/* "Current plan" next to the name, and the note under the price */
+.tf-plan-head .tf-plan-current {
+  align-self: flex-start;
+}
+.tf-plan-note {
+  margin: -4px 0 0;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+a.tf-plan-cta {
+  text-decoration: none;
+}
 .tf-plan-price {
   display: flex;
   align-items: baseline;
@@ -9443,7 +9754,7 @@ label.tf-menu-item {
 .tf-tabbar {
   display: grid;
   grid-auto-flow: column;
-  grid-auto-columns: 1fr;
+  grid-auto-columns: minmax(0, 1fr);
   padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
   background: var(--frame);
   border-radius: var(--radius-1) var(--radius-1) 0 0;
@@ -9462,6 +9773,17 @@ label.tf-menu-item {
   cursor: pointer;
   border-radius: var(--radius-1);
 }
+.tf-tabbar-item {
+  min-width: 0;
+}
+.tf-tabbar-label {
+  max-width: 100%;
+  padding: 0 4px;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .tf-tabbar-item.on {
   color: var(--on-frame);
   background: var(--frame-hover);
@@ -9770,6 +10092,22 @@ label.tf-menu-item {
   padding-bottom: 10px;
   color: var(--ink-muted);
 }
+/* in a narrow column (a filter sidebar) the number fields give their padding to the digits */
+.tf-range {
+  container: tf-range / inline-size;
+}
+@container tf-range (max-width: 280px) {
+  .tf-range-inputs {
+    gap: 4px;
+  }
+  .tf-range-num .tf-input {
+    padding-left: 10px;
+    padding-right: 24px;
+  }
+  .tf-range-num > span {
+    right: 10px;
+  }
+}
 .tf-range-vals {
   display: flex;
   justify-content: space-between;
@@ -9923,6 +10261,31 @@ label.tf-menu-item {
   font: 500 12px/16px var(--font-sans);
   color: var(--ink-muted);
 }
+/* layout="list": compact rows */
+.tf-tiles.list {
+  grid-template-columns: minmax(0, 1fr);
+  gap: 8px;
+}
+.tf-tiles.list .tf-tile {
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 44px 8px 8px;
+}
+.tf-tiles.list .tf-tile-art {
+  flex: none;
+  width: 40px;
+  height: var(--density-control);
+  aspect-ratio: auto;
+}
+.tf-tiles.list .tf-tile-label {
+  min-width: 0;
+  padding: 0;
+}
+.tf-tiles.list .tf-tile-check {
+  top: 50%;
+  translate: 0 -50%;
+}
 .tf-tile-check {
   position: absolute;
   top: 14px;
@@ -11032,6 +11395,16 @@ button.tf-runs-main[aria-expanded]:hover {
   color: var(--paper-ink);
   box-shadow: inset 0 0 0 1px var(--line);
 }
+/* QrCode: dark modules on paper, in every theme (scanners expect dark on light) */
+.tf-qr {
+  display: block;
+  width: 100%;
+  height: auto;
+  color: var(--paper-ink);
+}
+.tf-qr-bg {
+  fill: var(--paper);
+}
 .tf-2fa-qr > * {
   max-width: 100%;
   max-height: 100%;
@@ -11283,7 +11656,8 @@ button.tf-runs-main[aria-expanded]:hover {
   border-radius: var(--radius-md);
   overflow: hidden;
   background: var(--surface-sunken);
-  touch-action: none;
+  /* sideways drags move the divider; the page still scrolls up and down over it */
+  touch-action: pan-y;
   user-select: none;
   cursor: ew-resize;
 }
@@ -12183,6 +12557,14 @@ button.tf-runs-main[aria-expanded]:hover {
 .tf-togglegroup .tf-toggle {
   height: var(--control-sm);
 }
+.tf-togglegroup.block {
+  display: flex;
+  flex-wrap: nowrap;
+  width: auto;
+}
+.tf-togglegroup.block .tf-toggle {
+  flex: 1 1 0;
+}
 .tf-togglegroup .tf-toggle.icon {
   width: 32px;
 }
@@ -12393,6 +12775,11 @@ button.tf-runs-main[aria-expanded]:hover {
   text-align: left;
   cursor: pointer;
 }
+.tf-selectmenu.sm {
+  height: var(--control-sm);
+  padding: 0 12px;
+  font-size: 13px;
+}
 .tf-selectmenu.empty .tf-selectmenu-value {
   color: var(--ink-subtle);
 }
@@ -12669,26 +13056,44 @@ button.tf-runs-main[aria-expanded]:hover {
   outline-offset: -2px;
 }
 
-/* Sidebar */
+/* Sidebar: floating (a card), attached (flush with the screen's edge) or on the AppShell frame */
 .tf-sidebar {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  flex: none;
+  gap: 12px;
   width: 248px;
   padding: 12px;
   box-sizing: border-box;
   border-radius: var(--radius-lg);
   background: var(--surface);
   box-shadow: 0 0 0 var(--line-width) var(--line);
+  color: var(--ink);
   transition: width var(--dur-base) var(--ease-out);
 }
 .tf-sidebar.collapsed {
   width: 64px;
 }
+.tf-sidebar.attached {
+  align-self: stretch;
+  min-height: 100%;
+  border-radius: 0;
+  box-shadow: none;
+  background: var(--sidebar);
+  border-right: 1px solid var(--sidebar-border);
+}
+.tf-sidebar-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: var(--density-control);
+  padding: 0 4px;
+}
 .tf-sidebar-body {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  /* groups sit clearly apart; a label sits close to its own items */
+  gap: 20px;
   flex: 1;
   min-height: 0;
   overflow-y: auto;
@@ -12701,13 +13106,49 @@ button.tf-runs-main[aria-expanded]:hover {
   padding: 0;
   list-style: none;
 }
+.tf-sidebar-grouphead {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 24px;
+  margin-bottom: 8px;
+  padding: 0 4px 0 12px;
+}
 .tf-sidebar-grouplabel {
-  padding: 0 12px 6px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: none;
   font: 500 11px/14px var(--font-sans);
   letter-spacing: 0.06em;
   text-transform: uppercase;
+  text-align: left;
   color: var(--ink-muted);
 }
+button.tf-sidebar-grouplabel {
+  cursor: pointer;
+}
+button.tf-sidebar-grouplabel:hover {
+  color: var(--ink);
+}
+button.tf-sidebar-grouplabel:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+.tf-sidebar-grouplabel[aria-expanded="false"] .tf-sidebar-chev {
+  transform: rotate(-90deg);
+}
+.tf-sidebar-groupaction {
+  flex: none;
+  margin-left: auto;
+}
+.tf-sidebar-li {
+  position: relative;
+}
 .tf-sidebar-item {
   display: flex;
   align-items: center;
@@ -12715,15 +13156,86 @@ button.tf-runs-main[aria-expanded]:hover {
   width: 100%;
   height: var(--density-control);
   padding: 0 12px;
+  box-sizing: border-box;
   border: 0;
   border-radius: var(--radius-pill);
   background: transparent;
   color: var(--ink-muted);
   font: 500 13px/18px var(--font-sans);
   text-align: left;
+  text-decoration: none;
   cursor: pointer;
 }
-.tf-sidebar-item:hover {
+/* Filter options (Sidebar as="aside"): a checkbox or radio mark, the label and a count */
+.tf-sidebar-option {
+  position: relative;
+}
+.tf-sidebar-option.disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.tf-sidebar-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+.tf-sidebar-mark {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+  border-radius: var(--radius-1);
+  border: 1.5px solid var(--line-strong);
+  background: var(--surface);
+  color: var(--primary-foreground);
+  transition:
+    background-color var(--dur-fast) var(--ease-out),
+    border-color var(--dur-fast) var(--ease-out);
+}
+.tf-sidebar-mark.radio {
+  border-radius: var(--radius-full);
+}
+.tf-sidebar-mark svg {
+  opacity: 0;
+}
+.tf-sidebar-input:checked + .tf-sidebar-mark {
+  background: var(--primary);
+  border-color: var(--primary);
+}
+.tf-sidebar-input:checked + .tf-sidebar-mark.radio {
+  box-shadow: inset 0 0 0 3px var(--surface);
+}
+.tf-sidebar-input:checked + .tf-sidebar-mark svg {
+  opacity: 1;
+}
+.tf-sidebar-input:focus-visible + .tf-sidebar-mark {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+.tf-sidebar-option:has(.tf-sidebar-input:checked) {
+  color: var(--ink);
+}
+/* free content in a group (sliders, date fields, chips) */
+.tf-sidebar-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 4px 12px 0;
+  min-width: 0;
+}
+.tf-sidebar-groupbody {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.tf-sidebar-item:hover,
+.tf-sidebar-item.flying {
   background: var(--sidebar-accent);
   color: var(--ink);
 }
@@ -12738,10 +13250,21 @@ button.tf-runs-main[aria-expanded]:hover {
   outline: 2px solid var(--focus);
   outline-offset: 2px;
 }
+.tf-sidebar-item:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.tf-sidebar-item:disabled:hover {
+  background: transparent;
+  color: var(--ink-muted);
+}
 .tf-sidebar-item.nested {
   height: var(--control-sm);
   padding-left: 40px;
 }
+.tf-sidebar-sub {
+  margin-top: 2px !important;
+}
 .tf-sidebar-label {
   flex: 1;
   min-width: 0;
@@ -12750,22 +13273,107 @@ button.tf-runs-main[aria-expanded]:hover {
   white-space: nowrap;
 }
 .tf-sidebar-chev {
+  flex: none;
   transition: transform var(--dur-base) var(--ease-out);
 }
 .tf-sidebar-item[aria-expanded="true"] .tf-sidebar-chev {
   transform: rotate(180deg);
 }
+.tf-sidebar-ext {
+  flex: none;
+  opacity: 0.7;
+}
+.tf-sidebar-count {
+  flex: none;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  box-sizing: border-box;
+  border-radius: var(--radius-pill);
+  background: var(--count);
+  color: var(--on-count);
+  font: 600 11px/20px var(--font-sans);
+  text-align: center;
+}
+.tf-sidebar-badge {
+  flex: none;
+  height: 20px;
+  padding: 0 8px;
+  box-sizing: border-box;
+  border-radius: var(--radius-pill);
+  background: var(--count);
+  color: var(--on-count);
+  font: 600 10px/20px var(--font-sans);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.tf-sidebar-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  background: var(--count);
+}
+.tf-sidebar-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+/* the "…" menu of an item shows on hover and focus */
+.tf-sidebar-li.with-actions > .tf-sidebar-item {
+  padding-right: 40px;
+}
+.tf-sidebar-more {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  opacity: 0;
+  transition: opacity var(--dur-fast) var(--ease-out);
+}
+.tf-sidebar-li:hover > .tf-sidebar-more,
+.tf-sidebar-more:focus-visible,
+.tf-sidebar-more[aria-expanded="true"] {
+  opacity: 1;
+}
 .tf-sidebar-foot {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 8px;
   padding-top: 12px;
   border-top: 1px solid var(--sidebar-border);
 }
+.tf-sidebar-foot > :not(.tf-sidebar-toggle) {
+  flex: 1;
+  min-width: 0;
+}
+.tf-sidebar-toggle {
+  flex: none;
+  margin-left: auto;
+}
+.tf-sidebar-head .tf-pop-anchor,
+.tf-sidebar-foot .tf-pop-anchor {
+  display: block;
+  min-width: 0;
+}
+.tf-sidebar-head .tf-wssw {
+  width: 100%;
+}
+.tf-sidebar-head .tf-wssw .tf-option-text {
+  flex: 1;
+  min-width: 0;
+}
+
+/* collapsed: icons only; labels stay the accessible names, tooltips and flyouts show them */
+.tf-sidebar.collapsed .tf-sidebar-body {
+  gap: 12px;
+}
 .tf-sidebar.collapsed .tf-sidebar-label,
 .tf-sidebar.collapsed .tf-sidebar-chev,
-.tf-sidebar.collapsed .tf-sidebar-grouplabel {
+.tf-sidebar.collapsed .tf-sidebar-ext,
+.tf-sidebar.collapsed .tf-sidebar-grouphead {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -12773,12 +13381,19 @@ button.tf-runs-main[aria-expanded]:hover {
   clip-path: inset(50%);
   white-space: nowrap;
 }
+.tf-sidebar.collapsed .tf-sidebar-group + .tf-sidebar-group {
+  padding-top: 12px;
+  border-top: 1px solid var(--sidebar-border);
+}
 .tf-sidebar.collapsed .tf-sidebar-item {
   position: relative;
   justify-content: center;
   padding: 0;
 }
-.tf-sidebar.collapsed .tf-subnav-count {
+.tf-sidebar.collapsed .tf-sidebar-item.has-current {
+  background: var(--sidebar-accent);
+}
+.tf-sidebar.collapsed .tf-sidebar-count {
   position: absolute;
   top: -2px;
   right: -2px;
@@ -12788,57 +13403,317 @@ button.tf-runs-main[aria-expanded]:hover {
   font-size: 10px;
   line-height: 16px;
 }
+.tf-sidebar.collapsed .tf-sidebar-dot,
+.tf-sidebar.collapsed .tf-sidebar-badge {
+  position: absolute;
+  top: 6px;
+  right: 8px;
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  font-size: 0;
+}
+.tf-sidebar.collapsed .tf-sidebar-head {
+  justify-content: center;
+  padding: 0;
+}
 .tf-sidebar.collapsed .tf-sidebar-foot {
   flex-direction: column;
 }
-@media (max-width: 760px) {
-  .tf-sidebar {
-    width: 100%;
-  }
-  .tf-navmenu-panel.with-feature {
-    grid-template-columns: minmax(0, 1fr);
-  }
-  .tf-navmenu-feature {
-    min-height: 0;
-  }
-  .tf-navmenu-list {
-    flex-wrap: wrap;
-  }
-  .tf-menubar {
-    flex-wrap: wrap;
-    border-radius: var(--radius-lg);
-  }
+.tf-sidebar.collapsed .tf-sidebar-foot > :not(.tf-sidebar-toggle) {
+  flex: none;
+}
+.tf-sidebar.collapsed .tf-sidebar-toggle {
+  margin-left: 0;
 }
 
-/* Drawer (sheet) sides */
-.tf-drawer.side-left {
-  right: auto;
-  left: 0;
-  animation-name: tf-sheet-left;
+/* tooltips, flyouts and item menus float in the portal, so the scrolling body does not clip them */
+.tf-sidebar-layer {
+  position: fixed;
+  z-index: var(--z-palette);
 }
-.tf-drawer.side-top,
-.tf-drawer.side-bottom {
-  left: 0;
-  right: 0;
-  width: 100%;
-  max-height: min(80%, 640px);
+.tf-sidebar-tip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+  background: var(--frame);
+  color: var(--on-frame);
+  font: 500 12px/16px var(--font-sans);
+  white-space: nowrap;
+  pointer-events: none;
+  animation: tf-fade var(--dur-fast) var(--ease-out) both;
 }
-.tf-drawer.side-top {
-  bottom: auto;
-  animation-name: tf-sheet-top;
+.tf-sidebar-tipcount {
+  color: var(--on-frame-muted);
 }
-.tf-drawer.side-bottom {
-  top: auto;
-  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
-  animation-name: tf-sheet-bottom;
+.tf-sidebar-flyout {
+  min-width: 200px;
+  padding: 6px;
+  border-radius: var(--radius-md);
+  background: var(--surface);
+  color: var(--ink);
+  box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
+  animation: tf-fade var(--dur-fast) var(--ease-out) both;
 }
-@keyframes tf-sheet-left {
-  from {
-    opacity: 0;
-    transform: translateX(calc(-24px * var(--motion-travel)));
-  }
+.tf-sidebar-flyout ul {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
-@keyframes tf-sheet-top {
+.tf-sidebar-flytitle {
+  padding: 6px 12px 8px;
+  font: 500 11px/14px var(--font-sans);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+.tf-sidebar-flyout .tf-sidebar-item.nested {
+  padding-left: 12px;
+}
+
+/* on the AppShell frame */
+.tf-sidebar.shell {
+  align-self: stretch;
+  padding: 16px 8px 8px;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  color: var(--on-frame);
+}
+.tf-sidebar.shell .tf-sidebar-item,
+.tf-sidebar.shell .tf-sidebar-grouplabel {
+  color: var(--on-frame-muted);
+}
+.tf-sidebar.shell .tf-sidebar-item:hover,
+.tf-sidebar.shell .tf-sidebar-item.flying,
+.tf-sidebar.shell.collapsed .tf-sidebar-item.has-current {
+  background: var(--frame-hover);
+  color: var(--on-frame);
+}
+.tf-sidebar.shell .tf-sidebar-item.has-current,
+.tf-sidebar.shell button.tf-sidebar-grouplabel:hover {
+  color: var(--on-frame);
+}
+.tf-sidebar.shell .tf-sidebar-item[aria-current="page"] {
+  background: var(--frame-active);
+  color: var(--on-frame);
+}
+.tf-sidebar.shell .tf-sidebar-item:disabled:hover {
+  background: transparent;
+  color: var(--on-frame-muted);
+}
+.tf-sidebar.shell .tf-sidebar-foot,
+.tf-sidebar.shell.collapsed .tf-sidebar-group + .tf-sidebar-group {
+  border-color: var(--frame-hover);
+}
+.tf-sidebar.shell .tf-iconbtn-ghost {
+  color: var(--on-frame-muted);
+}
+.tf-sidebar.shell .tf-iconbtn-ghost:hover {
+  background: var(--frame-hover);
+  color: var(--on-frame);
+}
+.tf-sidebar.shell .tf-sidebar-head {
+  min-height: 44px;
+}
+
+/* UserMenu: the signed-in person, opening their account menu */
+.tf-usermenu {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 44px;
+  padding: 4px 8px 4px 4px;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: var(--ink);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.tf-usermenu.compact {
+  width: auto;
+  padding: 4px;
+}
+.tf-usermenu:hover,
+.tf-usermenu[aria-expanded="true"] {
+  background: var(--sidebar-accent);
+}
+.tf-usermenu:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+.tf-usermenu-avatar {
+  display: inline-flex;
+  flex: none;
+}
+.tf-usermenu-text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+.tf-usermenu-name {
+  font: 500 13px/18px var(--font-sans);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tf-usermenu-mail {
+  font: 500 11px/14px var(--font-sans);
+  color: var(--ink-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tf-sidebar.shell .tf-usermenu {
+  color: var(--on-frame);
+}
+.tf-sidebar.shell .tf-usermenu:hover,
+.tf-sidebar.shell .tf-usermenu[aria-expanded="true"] {
+  background: var(--frame-hover);
+}
+.tf-sidebar.shell .tf-usermenu-mail {
+  color: var(--on-frame-muted);
+}
+.tf-wssw.compact {
+  padding: 4px;
+}
+
+/* the bar that opens the sidebar as a drawer on phones */
+.tf-sidebar-bar,
+.tf-sidebar-scrim {
+  display: none;
+}
+@media (max-width: 760px) {
+  .tf-sidebar-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 52px;
+    padding: 6px 12px 6px 6px;
+    box-sizing: border-box;
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+    box-shadow: 0 0 0 var(--line-width) var(--line);
+    color: var(--ink);
+  }
+  .tf-sidebar-bar.attached {
+    border-radius: 0;
+    box-shadow: none;
+    background: var(--sidebar);
+    border-bottom: 1px solid var(--sidebar-border);
+  }
+  .tf-sidebar-bar.shell {
+    min-height: 56px;
+    padding: 8px 8px 8px 0;
+    border-radius: 0;
+    box-shadow: none;
+    background: transparent;
+    color: var(--on-frame);
+  }
+  .tf-sidebar-bar.shell .tf-iconbtn-ghost {
+    color: var(--on-frame);
+  }
+  .tf-sidebar-bar > :not(.tf-iconbtn) {
+    min-width: 0;
+  }
+  .tf-sidebar,
+  .tf-sidebar.attached,
+  .tf-sidebar.shell {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: var(--z-overlay);
+    width: min(300px, 86vw);
+    min-height: 0;
+    padding: 12px;
+    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
+    box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
+    transform: translateX(-105%);
+    visibility: hidden;
+    transition:
+      transform var(--dur-base) var(--ease-out),
+      visibility 0s linear var(--dur-base);
+  }
+  .tf-sidebar.shell {
+    background: var(--frame);
+  }
+  .tf-sidebar.attached {
+    background: var(--sidebar);
+  }
+  .tf-sidebar.open {
+    transform: none;
+    visibility: visible;
+    transition: transform var(--dur-base) var(--ease-out);
+  }
+  .tf-sidebar-toggle {
+    display: none;
+  }
+  .tf-sidebar-scrim {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-overlay);
+    background: var(--scrim-strong);
+    animation: tf-fade var(--dur-base) var(--ease-out) both;
+  }
+}
+
+@media (max-width: 760px) {
+  .tf-navmenu-panel.with-feature {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .tf-navmenu-feature {
+    min-height: 0;
+  }
+  .tf-navmenu-list {
+    flex-wrap: wrap;
+  }
+  .tf-menubar {
+    flex-wrap: wrap;
+    border-radius: var(--radius-lg);
+  }
+}
+
+/* Drawer (sheet) sides */
+.tf-drawer.side-left {
+  right: auto;
+  left: 0;
+  animation-name: tf-sheet-left;
+}
+.tf-drawer.side-top,
+.tf-drawer.side-bottom {
+  left: 0;
+  right: 0;
+  width: 100%;
+  max-height: min(80%, 640px);
+}
+.tf-drawer.side-top {
+  bottom: auto;
+  animation-name: tf-sheet-top;
+}
+.tf-drawer.side-bottom {
+  top: auto;
+  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
+  animation-name: tf-sheet-bottom;
+}
+@keyframes tf-sheet-left {
+  from {
+    opacity: 0;
+    transform: translateX(calc(-24px * var(--motion-travel)));
+  }
+}
+@keyframes tf-sheet-top {
   from {
     opacity: 0;
     transform: translateY(calc(-24px * var(--motion-travel)));
@@ -12977,7 +13852,7 @@ a.tf-iconbtn {
 /* Tablet: asides move below the main column, nav labels and the page nav shrink to icons */
 @container tf-shell (max-width: 1180px) {
   .tf-sheet:not(.tf-sheet-2):not(.tf-sheet-nav) {
-    grid-template-columns: 44px minmax(0, 1fr);
+    grid-template-columns: auto minmax(0, 1fr);
   }
   .tf-sheet-nav.tf-sheet-aside {
     grid-template-columns: 208px minmax(0, 1fr);
@@ -12985,6 +13860,13 @@ a.tf-iconbtn {
   .tf-sheet > .tf-main ~ :not(.tf-dock-float) {
     grid-column: 2;
   }
+  /* with the sidebar there is no rail column: asides go below the main column */
+  .tf-sheet.tf-sheet-norail:not(.tf-sheet-2) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .tf-sheet-norail > .tf-main ~ :not(.tf-dock-float) {
+    grid-column: 1;
+  }
   /* the dock floats over the end of the sheet, not of the main column (asides follow it) */
   .tf-main-dock {
     padding-bottom: 0;
@@ -13015,7 +13897,7 @@ a.tf-iconbtn {
 @container tf-shell (max-width: 1040px) {
   .tf-sheet-nav,
   .tf-sheet-nav.tf-sheet-aside {
-    grid-template-columns: 44px minmax(0, 1fr);
+    grid-template-columns: auto minmax(0, 1fr);
   }
   .tf-subnav-eyebrow {
     display: none;
@@ -13112,6 +13994,21 @@ a.tf-iconbtn {
   .tf-rail-group {
     flex-direction: row;
   }
+  /* on phones the rail is a row of icons, expanded or not */
+  .tf-rail.expanded {
+    width: auto;
+  }
+  .tf-rail.expanded .tf-rail-btn {
+    display: grid;
+    width: 40px;
+    padding: 0;
+  }
+  .tf-rail.expanded .tf-rail-label {
+    display: none;
+  }
+  .tf-rail.expanded .tf-dotcount {
+    position: absolute;
+  }
   .tf-main {
     gap: var(--space-4);
   }
@@ -13203,6 +14100,56 @@ a.tf-iconbtn {
   max-width: 100%;
   overflow-x: auto;
 }
+/* Table stack: narrow boxes show every row as a card, each cell with its column label */
+.tf-table-stackbox {
+  container: tf-table / inline-size;
+}
+@container tf-table (max-width: 600px) {
+  .tf-table.stack thead {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+  .tf-table.stack,
+  .tf-table.stack tbody,
+  .tf-table.stack tr {
+    display: block;
+  }
+  .tf-table.stack tr {
+    padding: 8px 0;
+    border-bottom: 1px solid var(--line);
+  }
+  .tf-table.stack tr:last-child {
+    border-bottom: 0;
+  }
+  .tf-table.stack td {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    height: auto;
+    min-height: var(--control-sm);
+    padding: 4px 0;
+    border-bottom: 0;
+    text-align: right;
+    white-space: normal;
+  }
+  .tf-table.stack td::before {
+    content: attr(data-label);
+    flex: none;
+    max-width: 50%;
+    text-align: left;
+    font: 500 11px/14px var(--font-sans);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--ink-muted);
+  }
+  .tf-table.stack tbody tr:hover td {
+    background: transparent;
+  }
+}
 
 /* ── Phone: components ── */
 @media (max-width: 760px) {
@@ -13237,15 +14184,15 @@ a.tf-iconbtn {
     height: 52px;
   }
 
-  /* segmented controls and tabs scroll sideways when the labels do not fit */
-  .tf-seg,
-  .tf-tabs {
+  /* segmented controls and tabs scroll sideways when the labels do not fit (block ones shrink) */
+  .tf-seg:not(.block),
+  .tf-tabs:not(.tf-tabs-block) {
     max-width: 100%;
     overflow-x: auto;
     scrollbar-width: none;
   }
-  .tf-seg-item,
-  .tf-tab {
+  .tf-seg:not(.block) .tf-seg-item,
+  .tf-tabs:not(.tf-tabs-block) .tf-tab {
     flex: none;
   }
   .tf-seg,
@@ -13394,6 +14341,71 @@ a.tf-iconbtn {
   }
 }
 
+/* AppShell with a sidebar on phones: the sidebar's bar on top of the frame, the sheet below */
+@media (max-width: 760px) {
+  .tf-shell.tf-shell-sidebar {
+    grid-template-columns: minmax(0, 1fr);
+    padding: 0 8px 8px;
+  }
+}
+
+/* Fluid at every width: segmented controls, tabs and toggle groups never push past their
+   container. When space runs short the items shrink and their labels end in an ellipsis. */
+.tf-tabs {
+  max-width: 100%;
+  box-sizing: border-box;
+}
+.tf-seg-item,
+.tf-tab,
+.tf-togglegroup .tf-toggle {
+  min-width: 0;
+}
+.tf-seg-label,
+.tf-tab,
+.tf-toggle-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* key hints mean nothing on touch screens */
+@media (pointer: coarse) {
+  .tf-search .tf-kbd {
+    display: none;
+  }
+}
+
+/* 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 */
 /* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
 /* ───────────── Polish ─────────────
@@ -13604,10 +14616,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,
@@ -13623,6 +14642,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
       )
       *
@@ -13717,6 +14743,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
@@ -13742,7 +14772,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,
@@ -13793,10 +14837,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;
@@ -13825,11 +14876,13 @@ textarea.tf-input,
   inset: 0;
   z-index: 1;
   display: grid;
-  grid-template-columns: minmax(0, 320px) minmax(0, 1fr) minmax(0, 340px);
+  grid-template-columns:
+    minmax(0, var(--floating-start, 320px)) minmax(0, 1fr)
+    minmax(0, var(--floating-end, 340px));
   grid-template-rows: auto minmax(0, 1fr) auto;
   grid-template-areas:
     "top top top"
-    "start . end"
+    "start controls end"
     "bottom bottom bottom";
   gap: var(--space-4);
   padding: var(--space-4);
@@ -13860,6 +14913,32 @@ textarea.tf-input,
   grid-area: bottom;
   justify-self: center;
 }
+/* background controls and source notes: the free corner, clear of the panels and the dock */
+.tf-floating-ui > .tf-floating-controls {
+  grid-area: controls;
+  align-self: end;
+  justify-self: end;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--space-2);
+  pointer-events: none;
+}
+.tf-floating-controls > * {
+  pointer-events: auto;
+}
+.tf-floating-attribution {
+  max-width: 100%;
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--ink-muted);
+  font: 500 11px/16px var(--font-sans);
+  overflow-wrap: anywhere;
+}
+.tf-floating-handle {
+  display: none;
+}
 .tf-floating-ui > :is(.tf-floating-top, .tf-floating-bottom) {
   pointer-events: none;
 }
@@ -13885,7 +14964,76 @@ textarea.tf-input,
     gap: var(--space-3);
     padding: var(--space-3);
   }
-}
+  .tf-floating-ui > .tf-floating-controls {
+    grid-area: auto;
+    grid-row: 3;
+  }
+  /* the end slot as a bottom sheet over the background: a peek, or most of the height */
+  .tf-floating.has-sheet .tf-floating-ui {
+    grid-template-rows: auto auto minmax(120px, 1fr) auto;
+    grid-template-areas:
+      "top"
+      "start"
+      "."
+      "bottom";
+    padding-bottom: calc(var(--space-3) + 96px);
+  }
+  .tf-floating.has-sheet .tf-floating-end {
+    position: absolute;
+    left: var(--space-3);
+    right: var(--space-3);
+    bottom: 0;
+    z-index: 2;
+    max-height: 96px;
+    overflow: hidden;
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+    background: var(--surface);
+    box-shadow: 0 0 0 var(--line-width) var(--line);
+    transition: max-height var(--dur-base) var(--ease-out);
+  }
+  [data-surface="glass"].tf-floating.has-sheet .tf-floating-end {
+    background: var(--glass);
+    -webkit-backdrop-filter: var(--glass-filter);
+    backdrop-filter: var(--glass-filter);
+  }
+  .tf-floating.has-sheet.sheet-full .tf-floating-end {
+    max-height: 75%;
+    overflow-y: auto;
+  }
+  .tf-floating.has-sheet .tf-floating-handle {
+    display: block;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    height: 24px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+  .tf-floating.has-sheet .tf-floating-handle::before {
+    content: "";
+    display: block;
+    width: 40px;
+    height: 4px;
+    margin: 10px auto;
+    border-radius: var(--radius-pill);
+    background: var(--line-strong);
+  }
+  .tf-floating.has-sheet .tf-floating-handle:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: -2px;
+  }
+}
+
+/* in a glass layout the attribution is glass too */
+[data-surface="glass"] .tf-floating-attribution {
+  background: var(--glass);
+  -webkit-backdrop-filter: var(--glass-filter);
+  backdrop-filter: var(--glass-filter);
+}
 
 /* 09-motion.css */
 /* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
@@ -13915,183 +15063,1555 @@ textarea.tf-input,
     translate: calc(40px * var(--motion-travel)) 0;
   }
 }
-@keyframes tf-out-left {
-  to {
-    opacity: 0;
-    translate: calc(-40px * var(--motion-travel)) 0;
-  }
+@keyframes tf-out-left {
+  to {
+    opacity: 0;
+    translate: calc(-40px * var(--motion-travel)) 0;
+  }
+}
+@keyframes tf-out-up {
+  to {
+    opacity: 0;
+    translate: 0 calc(-40px * var(--motion-travel));
+  }
+}
+@keyframes tf-out-down {
+  to {
+    opacity: 0;
+    translate: 0 calc(16px * var(--motion-travel));
+  }
+}
+[data-closing] {
+  pointer-events: none;
+}
+.tf-popover[data-closing],
+.tf-hovercard[data-closing],
+.tf-modal-wrap[data-closing] .tf-modal,
+.tf-overlay[data-closing] :is(.tf-modal, .tf-confirm),
+.tf-palette-wrap[data-closing] .tf-palette {
+  animation: tf-out var(--dur-exit) var(--ease-in-out) forwards;
+}
+.tf-tooltip[data-closing],
+.tf-modal-wrap[data-closing] .tf-backdrop,
+.tf-overlay[data-closing] .tf-backdrop,
+.tf-palette-wrap[data-closing],
+.tf-drawer-wrap[data-closing] {
+  animation: tf-out-fade var(--dur-exit) var(--ease-in-out) forwards;
+}
+.tf-drawer-wrap[data-closing] .tf-drawer {
+  animation: tf-out-right var(--dur-exit) var(--ease-in-out) forwards;
+}
+.tf-drawer-wrap[data-closing] .tf-drawer.side-left {
+  animation-name: tf-out-left;
+}
+.tf-drawer-wrap[data-closing] .tf-drawer.side-top {
+  animation-name: tf-out-up;
+}
+.tf-drawer-wrap[data-closing] .tf-drawer.side-bottom,
+.tf-toast[data-closing] {
+  animation: tf-out-down var(--dur-exit) var(--ease-in-out) forwards;
+}
+
+/* ── Reveal: a Stagger below the fold waits until it scrolls into view ── */
+.tf-stagger[data-reveal="waiting"] > *,
+.tf-stagger[data-reveal="waiting"] > * * {
+  animation-play-state: paused;
+}
+
+/* ── Page transitions (startViewTransition, Next.js and React view transitions) ── */
+@keyframes tf-vt-out {
+  to {
+    opacity: 0;
+    translate: 0 calc(-6px * var(--motion-travel));
+  }
+}
+@keyframes tf-vt-in {
+  from {
+    opacity: 0;
+    translate: 0 calc(10px * var(--motion-travel));
+  }
+}
+:root::view-transition-old(root) {
+  animation: tf-vt-out var(--dur-base) var(--ease-in-out) both;
+}
+:root::view-transition-new(root) {
+  animation: tf-vt-in var(--dur-enter) var(--ease-out) both;
+}
+
+/* ── Expressive: things come into focus as they rise (Halo; Pro keeps a blur of 0) ── */
+@keyframes tf-focus-in {
+  from {
+    filter: blur(var(--motion-blur));
+  }
+  to {
+    filter: none;
+  }
+}
+[data-motion="expressive"] :is(.tf-stagger > *, .tf-in) {
+  animation-name: tf-rise, tf-focus-in;
+}
+[data-motion="expressive"] .tf-topbar {
+  animation-name: tf-drop, tf-focus-in;
+}
+
+/* 10-ambient.css */
+/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
+/* Ambient: a calm, living background for glass UI. Soft colour fields from the kit (pastels in
+ * Halo, a faint aurora in Pro) drift slowly; a photo or video can take their place under a scrim.
+ * The drift only moves (transform), stops with motion off and pauses off screen.
+ */
+:where(:has(> .tf-ambient:not(.fixed))) {
+  position: relative;
+  isolation: isolate;
+}
+.tf-ambient {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  overflow: hidden;
+  background: var(--ambient-base);
+  pointer-events: none;
+}
+.tf-ambient.fixed {
+  position: fixed;
+}
+.tf-ambient-field {
+  position: absolute;
+  width: 75%;
+  aspect-ratio: 1;
+  border-radius: var(--radius-1);
+  background: radial-gradient(closest-side, var(--field), transparent);
+  animation: tf-ambient-drift 34s var(--ease-in-out) infinite alternate;
+}
+.tf-ambient-field:nth-child(1) {
+  top: -30%;
+  left: -15%;
+}
+.tf-ambient-field:nth-child(2) {
+  top: -10%;
+  right: -25%;
+  animation-duration: 41s;
+  animation-direction: alternate-reverse;
+}
+.tf-ambient-field:nth-child(3) {
+  bottom: -35%;
+  left: 10%;
+  animation-duration: 47s;
+}
+.tf-ambient-field:nth-child(4) {
+  bottom: -25%;
+  right: -10%;
+  animation-duration: 38s;
+  animation-direction: alternate-reverse;
+}
+.tf-ambient-field:nth-child(n + 5) {
+  top: 20%;
+  left: 30%;
+  width: 55%;
+  animation-duration: 52s;
+}
+@keyframes tf-ambient-drift {
+  to {
+    translate: 12% 9%;
+    scale: 1.15;
+  }
+}
+.tf-ambient.still .tf-ambient-field,
+.tf-ambient[data-paused] .tf-ambient-field {
+  animation-play-state: paused;
+}
+.tf-ambient-media {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.tf-ambient.media::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: var(--ambient-scrim);
+}
+@media (prefers-reduced-motion: reduce) {
+  .tf-ambient-field {
+    animation: none;
+  }
+}
+[data-motion="off"] .tf-ambient-field {
+  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 */
+.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: 500 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: 500 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: var(--radius-1);
+  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: 500 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: 500 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: 0 0 0 var(--line-width) var(--line);
+}
+.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: 500 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: 600 22px/28px var(--font-sans);
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+}
+.tf-vital-value small {
+  margin-left: 4px;
+  font: 500 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: var(--radius-full);
+  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: var(--radius-1);
+}
+.tf-rings-name {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-rings-legend b {
+  grid-column: 2;
+  font: 600 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: 500 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: 600 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: 500;
+  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: 500 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: 500 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: 0 0 0 var(--line-width) var(--line);
+}
+.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);
+}
+.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: 600 14px/20px var(--font-sans);
+}
+.tf-journal-body {
+  font: 500 14px/20px 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: 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) {
+  .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: 600 14px/20px var(--font-sans);
+}
+.tf-goal-pct {
+  font: 600 18px/24px 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: var(--radius-1);
+  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:
+    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);
+}
+.tf-insight.is-success {
+  --tint: var(--mint);
+  box-shadow:
+    0 0 0 var(--line-width) var(--line),
+    inset 3px 0 0 var(--mint-ink);
+}
+.tf-insight.is-warning {
+  --tint: var(--butter);
+  box-shadow:
+    0 0 0 var(--line-width) var(--line),
+    inset 3px 0 0 var(--butter-ink);
+}
+.tf-insight.is-highlight {
+  --tint: var(--lilac);
+  box-shadow:
+    0 0 0 var(--line-width) var(--line),
+    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: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-insight-titles b {
+  font: 600 15px/20px 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: 500 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: 0 0 0 var(--line-width) var(--line);
+}
+.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: 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 */
+.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: 500 14px/20px var(--font-sans);
+}
+.tf-budget-nums {
+  flex: none;
+  font: 600 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: 500;
+}
+
+/* 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: 500 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: 600 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: 600 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: 0 0 0 var(--line-width) var(--line);
+}
+.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: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-nw-total {
+  font: 600 24px/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: 500 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: 500 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: 600 14px/20px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+.tf-deadline-date small {
+  font: 500 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: 500 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: 600 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: 0 0 0 var(--line-width) var(--line);
+}
+.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: 600 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: 500 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: 600 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;
 }
-@keyframes tf-out-up {
-  to {
-    opacity: 0;
-    translate: 0 calc(-40px * var(--motion-travel));
-  }
+.tf-coverage-box {
+  container: tf-coverage / inline-size;
 }
-@keyframes tf-out-down {
-  to {
-    opacity: 0;
-    translate: 0 calc(16px * var(--motion-travel));
-  }
+.tf-coverage-table {
+  width: 100%;
+  border-collapse: collapse;
 }
-[data-closing] {
-  pointer-events: none;
+.tf-coverage-table th,
+.tf-coverage-table td {
+  padding: 10px 8px;
+  border-top: 1px solid var(--line);
+  text-align: left;
+  vertical-align: middle;
 }
-.tf-popover[data-closing],
-.tf-hovercard[data-closing],
-.tf-modal-wrap[data-closing] .tf-modal,
-.tf-overlay[data-closing] :is(.tf-modal, .tf-confirm),
-.tf-palette-wrap[data-closing] .tf-palette {
-  animation: tf-out var(--dur-exit) var(--ease-in-out) forwards;
+.tf-coverage-table th {
+  font-weight: inherit;
 }
-.tf-tooltip[data-closing],
-.tf-modal-wrap[data-closing] .tf-backdrop,
-.tf-overlay[data-closing] .tf-backdrop,
-.tf-palette-wrap[data-closing],
-.tf-drawer-wrap[data-closing] {
-  animation: tf-out-fade var(--dur-exit) var(--ease-in-out) forwards;
+.tf-coverage-table th b {
+  display: block;
+  font: 500 14px/20px var(--font-sans);
 }
-.tf-drawer-wrap[data-closing] .tf-drawer {
-  animation: tf-out-right var(--dur-exit) var(--ease-in-out) forwards;
+.tf-coverage-table th small {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
 }
-.tf-drawer-wrap[data-closing] .tf-drawer.side-left {
-  animation-name: tf-out-left;
+.tf-coverage-table td:nth-child(2) {
+  white-space: nowrap;
 }
-.tf-drawer-wrap[data-closing] .tf-drawer.side-top {
-  animation-name: tf-out-up;
+.tf-coverage-note {
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
 }
-.tf-drawer-wrap[data-closing] .tf-drawer.side-bottom,
-.tf-toast[data-closing] {
-  animation: tf-out-down var(--dur-exit) var(--ease-in-out) forwards;
+.tf-coverage-table tr.is-none th b {
+  color: var(--blush-ink);
 }
-
-/* ── Reveal: a Stagger below the fold waits until it scrolls into view ── */
-.tf-stagger[data-reveal="waiting"] > *,
-.tf-stagger[data-reveal="waiting"] > * * {
-  animation-play-state: paused;
+/* 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;
+  }
 }
 
-/* ── Page transitions (startViewTransition, Next.js and React view transitions) ── */
-@keyframes tf-vt-out {
-  to {
-    opacity: 0;
-    translate: 0 calc(-6px * var(--motion-travel));
-  }
+/* ClaimTimeline */
+.tf-claim {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
 }
-@keyframes tf-vt-in {
-  from {
-    opacity: 0;
-    translate: 0 calc(10px * var(--motion-travel));
-  }
+.tf-claim-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
 }
-:root::view-transition-old(root) {
-  animation: tf-vt-out var(--dur-base) var(--ease-in-out) both;
+.tf-claim-head .tf-option-text {
+  padding: 0;
 }
-:root::view-transition-new(root) {
-  animation: tf-vt-in var(--dur-enter) var(--ease-out) both;
+.tf-claim-head b {
+  font: 600 15px/20px var(--font-sans);
 }
-
-/* ── Expressive: things come into focus as they rise (Halo; Pro keeps a blur of 0) ── */
-@keyframes tf-focus-in {
-  from {
-    filter: blur(var(--motion-blur));
-  }
-  to {
-    filter: none;
-  }
+.tf-claim-amount {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font: 600 18px/24px var(--font-sans);
+  font-variant-numeric: tabular-nums;
 }
-[data-motion="expressive"] :is(.tf-stagger > *, .tf-in) {
-  animation-name: tf-rise, tf-focus-in;
+.tf-claim-amount small {
+  font: 500 11px/14px var(--font-sans);
+  color: var(--ink-muted);
 }
-[data-motion="expressive"] .tf-topbar {
-  animation-name: tf-drop, tf-focus-in;
+.tf-claim-steps {
+  display: flex;
+  flex-direction: column;
 }
-
-/* 10-ambient.css */
-/* Generated by scripts/pro-css.ts from packages/halo/css. Do not edit; the Pro look lives in 90-pro-look.css. */
-/* Ambient: a calm, living background for glass UI. Soft colour fields from the kit (pastels in
- * Halo, a faint aurora in Pro) drift slowly; a photo or video can take their place under a scrim.
- * The drift only moves (transform), stops with motion off and pauses off screen.
- */
-:where(:has(> .tf-ambient:not(.fixed))) {
+.tf-claim-steps li {
   position: relative;
-  isolation: isolate;
+  display: flex;
+  gap: 12px;
+  padding-bottom: 16px;
 }
-.tf-ambient {
+.tf-claim-steps li:last-child {
+  padding-bottom: 0;
+}
+.tf-claim-steps li:not(:last-child)::before {
+  content: "";
   position: absolute;
-  inset: 0;
-  z-index: -1;
-  overflow: hidden;
-  background: var(--ambient-base);
-  pointer-events: none;
+  top: 20px;
+  bottom: 0;
+  left: 9px;
+  width: 2px;
+  background: var(--line);
 }
-.tf-ambient.fixed {
-  position: fixed;
+.tf-claim-steps li.is-done:not(:last-child)::before {
+  background: var(--mint-ink);
 }
-.tf-ambient-field {
-  position: absolute;
-  width: 75%;
-  aspect-ratio: 1;
-  border-radius: var(--radius-1);
-  background: radial-gradient(closest-side, var(--field), transparent);
-  animation: tf-ambient-drift 34s var(--ease-in-out) infinite alternate;
+.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);
 }
-.tf-ambient-field:nth-child(1) {
-  top: -30%;
-  left: -15%;
+.tf-claim-steps li.is-done .tf-claim-dot {
+  border-color: var(--mint-ink);
+  background: var(--mint-ink);
 }
-.tf-ambient-field:nth-child(2) {
-  top: -10%;
-  right: -25%;
-  animation-duration: 41s;
-  animation-direction: alternate-reverse;
+.tf-claim-steps li.is-current .tf-claim-dot {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 4px var(--accent);
 }
-.tf-ambient-field:nth-child(3) {
-  bottom: -35%;
-  left: 10%;
-  animation-duration: 47s;
+.tf-claim-steps li.is-failed .tf-claim-dot {
+  border-color: var(--blush-ink);
+  background: var(--blush-ink);
 }
-.tf-ambient-field:nth-child(4) {
-  bottom: -25%;
-  right: -10%;
-  animation-duration: 38s;
-  animation-direction: alternate-reverse;
+.tf-claim-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
 }
-.tf-ambient-field:nth-child(n + 5) {
-  top: 20%;
-  left: 30%;
-  width: 55%;
-  animation-duration: 52s;
+.tf-claim-text b {
+  font: 500 14px/20px var(--font-sans);
 }
-@keyframes tf-ambient-drift {
-  to {
-    translate: 12% 9%;
-    scale: 1.15;
-  }
+.tf-claim-steps li.is-todo .tf-claim-text b {
+  color: var(--ink-muted);
+  font-weight: 500;
 }
-.tf-ambient.still .tf-ambient-field,
-.tf-ambient[data-paused] .tf-ambient-field {
-  animation-play-state: paused;
+.tf-claim-text small {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
 }
-.tf-ambient-media {
-  position: absolute;
-  inset: 0;
+
+/* 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%;
-  height: 100%;
-  object-fit: cover;
+  padding: 10px 12px;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--ink);
+  font: inherit;
+  text-align: left;
 }
-.tf-ambient.media::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background: var(--ambient-scrim);
+button.tf-doc {
+  cursor: pointer;
 }
-@media (prefers-reduced-motion: reduce) {
-  .tf-ambient-field {
-    animation: none;
-  }
+button.tf-doc:hover {
+  background: var(--accent);
 }
-[data-motion="off"] .tf-ambient-field {
-  animation: none;
+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: 500 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);
 }
 
 /* 90-pro-look.css */
@@ -14510,6 +17030,14 @@ select.tf-input {
   gap: var(--line-width);
   box-shadow: 0 0 0 var(--line-width) var(--line);
 }
+/* with the sidebar, the sidebar and the sheet sit side by side on the same hairline */
+.tf-shell.tf-shell-sidebar {
+  padding: 0;
+  gap: var(--line-width);
+}
+.tf-shell-sidebar > .tf-sidebar.shell {
+  border-radius: 0;
+}
 .tf-topbar,
 .tf-shell .tf-topbar {
   border-radius: 0;