@twentyfirstmedia/halo 0.5.0 → 0.7.0

package/dist/styles.css

@@ -335,6 +335,11 @@
   --chart-lilac: var(--lilac);
   --chart-butter: var(--butter);
   --chart-blush: var(--blush);
+  --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: #2f5d16;
   --ok-bg: #d6efc3;
   --info: #1f4f8a;
@@ -483,6 +488,11 @@
     --chart-lilac: var(--lilac-ink);
     --chart-butter: var(--butter-ink);
     --chart-blush: var(--blush-ink);
+    --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: #a8db86;
     --ok-bg: #24401a;
     --info: #9cc6f7;
@@ -632,6 +642,11 @@
     --chart-lilac: var(--lilac-ink);
     --chart-butter: var(--butter-ink);
     --chart-blush: var(--blush-ink);
+    --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: #a8db86;
     --ok-bg: #24401a;
     --info: #9cc6f7;
@@ -781,6 +796,11 @@
     --chart-lilac: var(--lilac);
     --chart-butter: var(--butter);
     --chart-blush: var(--blush);
+    --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: #2f5d16;
     --ok-bg: #d6efc3;
     --info: #1f4f8a;
@@ -929,6 +949,11 @@
   --chart-lilac: var(--lilac-ink);
   --chart-butter: var(--butter-ink);
   --chart-blush: var(--blush-ink);
+  --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: #a8db86;
   --ok-bg: #24401a;
   --info: #9cc6f7;
@@ -1076,6 +1101,11 @@
   --chart-lilac: var(--lilac);
   --chart-butter: var(--butter);
   --chart-blush: var(--blush);
+  --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: #2f5d16;
   --ok-bg: #d6efc3;
   --info: #1f4f8a;
@@ -1620,7 +1650,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;
@@ -1629,6 +1660,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);
@@ -1710,7 +1742,7 @@ select.tf-input {
   display: flex;
 }
 .tf-tabs-block .tf-tab {
-  flex: 1;
+  flex: 1 1 0;
 }
 
 /* StatTile */
@@ -2027,6 +2059,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: 600 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);
@@ -2176,9 +2238,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);
@@ -2695,6 +2776,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: var(--shadow-card);
@@ -2706,12 +2845,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: 600 12px/16px var(--font-sans);
   color: var(--ink-muted);
@@ -2898,6 +3052,13 @@ select.tf-input {
   font: 600 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);
@@ -2908,18 +3069,42 @@ select.tf-input {
 }
 .tf-crumbs {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 6px;
+  min-width: 0;
   font: 600 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);
 }
@@ -2961,7 +3146,7 @@ select.tf-input {
   cursor: pointer;
 }
 .tf-sheet-2 {
-  grid-template-columns: 44px 1fr;
+  grid-template-columns: auto 1fr;
 }
 .tf-main {
   display: flex;
@@ -3031,6 +3216,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;
 }
@@ -3156,6 +3361,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) */
@@ -3168,9 +3386,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;
@@ -4244,6 +4465,23 @@ select.tf-input {
   font: 600 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);
 }
@@ -4403,7 +4641,7 @@ select.tf-input {
   display: flex;
 }
 .tf-seg.block .tf-seg-item {
-  flex: 1;
+  flex: 1 1 0;
 }
 .tf-seg-item {
   position: relative;
@@ -5015,6 +5253,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: 600 14px/20px var(--font-sans);
   margin-top: 4px;
@@ -5077,6 +5319,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;
@@ -5120,7 +5363,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;
@@ -5136,8 +5380,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;
@@ -6141,14 +6388,29 @@ label.tf-menu-item {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  height: 32px;
-  padding: 0 12px 0 4px;
+  /* grows with a long title (two lines at most) instead of spilling over */
+  min-height: 32px;
+  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: 600 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);
@@ -7271,17 +7533,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: "";
@@ -7310,6 +7580,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);
@@ -7476,7 +7780,7 @@ label.tf-menu-item {
   color: var(--on-frame);
   box-shadow: var(--shadow-float);
 }
-.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 {
@@ -7507,10 +7811,22 @@ label.tf-menu-item {
 .tf-plan-head b {
   font: 700 20px/26px 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;
@@ -9610,7 +9926,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: 24px 24px 0 0;
@@ -9629,6 +9945,17 @@ label.tf-menu-item {
   cursor: pointer;
   border-radius: 16px;
 }
+.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);
@@ -9936,6 +10263,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;
@@ -10089,6 +10432,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: 40px;
+  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;
@@ -11198,6 +11566,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%;
@@ -11449,7 +11827,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;
 }
@@ -12348,6 +12727,14 @@ button.tf-runs-main[aria-expanded]:hover {
 .tf-togglegroup .tf-toggle {
   height: 32px;
 }
+.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;
 }
@@ -12558,6 +12945,11 @@ button.tf-runs-main[aria-expanded]:hover {
   text-align: left;
   cursor: pointer;
 }
+.tf-selectmenu.sm {
+  height: 32px;
+  padding: 0 12px;
+  font-size: 13px;
+}
 .tf-selectmenu.empty .tf-selectmenu-value {
   color: var(--ink-subtle);
 }
@@ -12834,26 +13226,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: var(--shadow-card);
+  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: 40px;
+  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;
@@ -12866,13 +13276,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: 600 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;
@@ -12880,15 +13326,86 @@ button.tf-runs-main[aria-expanded]:hover {
   width: 100%;
   height: 40px;
   padding: 0 12px;
+  box-sizing: border-box;
   border: 0;
   border-radius: var(--radius-pill);
   background: transparent;
   color: var(--ink-muted);
   font: 600 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: 6px;
+  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: 50%;
+}
+.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);
 }
@@ -12903,10 +13420,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: 32px;
   padding-left: 40px;
 }
+.tf-sidebar-sub {
+  margin-top: 2px !important;
+}
 .tf-sidebar-label {
   flex: 1;
   min-width: 0;
@@ -12915,22 +13443,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: 700 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: 700 10px/20px var(--font-sans);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.tf-sidebar-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  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;
@@ -12938,12 +13551,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;
@@ -12953,57 +13573,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: 600 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);
+  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: 600 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: 600 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: var(--shadow-card);
+    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);
+    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)));
@@ -13141,7 +14021,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);
@@ -13149,6 +14029,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;
@@ -13179,7 +14066,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;
@@ -13276,6 +14163,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);
   }
@@ -13367,6 +14269,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: 32px;
+    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: 600 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) {
@@ -13401,15 +14353,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,
@@ -13558,6 +14510,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 */
 /* ───────────── Polish ─────────────
    Small consistency fixes found by auditing every preview in both kits and themes. Zero
@@ -13766,10 +14783,17 @@ textarea.tf-input,
     .tf-card,
     .tf-stat,
     .tf-dock,
-    .tf-sidebar,
+    .tf-sidebar:not(.shell),
     .tf-map-legend,
     .tf-map-ctl,
-    .tf-map-pop
+    .tf-map-pop,
+    .tf-vital,
+    .tf-journal,
+    .tf-goal,
+    .tf-insight,
+    .tf-consent-item,
+    .tf-nw,
+    .tf-policy
   ):not(
     :is(
         .tf-panel,
@@ -13785,6 +14809,13 @@ textarea.tf-input,
         .tf-palette,
         .tf-modal,
         .tf-drawer,
+        .tf-vital,
+        .tf-journal,
+        .tf-goal,
+        .tf-insight,
+        .tf-consent-item,
+        .tf-nw,
+        .tf-policy,
         .tf-glass
       )
       *
@@ -13879,6 +14910,10 @@ textarea.tf-input,
         .tf-modal,
         .tf-drawer,
         .tf-glass,
+        .tf-insight,
+        .tf-policy,
+        .tf-consent-item,
+        .tf-journal,
         .tf-btngroup,
         .tf-map-ctl,
         .tf-topbar
@@ -13904,7 +14939,21 @@ textarea.tf-input,
 }
 [data-surface="glass"]
   :is(.tf-iconbtn-soft, .tf-iconbtn-outline, .tf-btn-secondary, .tf-chip):not(
-    :is(.tf-panel, .tf-card, .tf-dock, .tf-popover, .tf-menu, .tf-modal, .tf-drawer, .tf-glass) *
+    :is(
+        .tf-panel,
+        .tf-card,
+        .tf-dock,
+        .tf-popover,
+        .tf-menu,
+        .tf-modal,
+        .tf-drawer,
+        .tf-insight,
+        .tf-policy,
+        .tf-consent-item,
+        .tf-journal,
+        .tf-glass
+      )
+      *
   ):not(.tf-solid):not([aria-pressed="true"]):hover {
   background:
     linear-gradient(var(--glass-hover), var(--glass-hover)) border-box,
@@ -13955,10 +15004,17 @@ textarea.tf-input,
       .tf-card,
       .tf-stat,
       .tf-dock,
-      .tf-sidebar,
+      .tf-sidebar:not(.shell),
       .tf-map-legend,
       .tf-map-ctl,
-      .tf-map-pop
+      .tf-map-pop,
+      .tf-vital,
+      .tf-journal,
+      .tf-goal,
+      .tf-insight,
+      .tf-consent-item,
+      .tf-nw,
+      .tf-policy
     ) {
     outline: 1px solid CanvasText;
     outline-offset: -1px;
@@ -13987,11 +15043,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);
@@ -14022,6 +15080,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;
 }
@@ -14047,10 +15131,79 @@ textarea.tf-input,
     gap: var(--space-3);
     padding: var(--space-3);
   }
-}
-
-/* 09-motion.css */
-/* Motion: leaving layers, reveal on scroll, page transitions, the expressive level.
+  .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: var(--shadow-card);
+    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 */
+/* Motion: leaving layers, reveal on scroll, page transitions, the expressive level.
  *
  * Levels come from `data-motion` (tokens.css): "standard", "expressive" (longer, staggered page
  * entrances, more travel) and "off". The reader's reduced-motion setting always means off. Only
@@ -14253,3 +15406,1373 @@ textarea.tf-input,
 [data-motion="off"] .tf-ambient-field {
   animation: none;
 }
+
+/* 11-life.css */
+/* Life: habits, mood, vitals, activity rings, sleep, medication, journal, goals, insights, consent */
+
+/* HabitTracker */
+.tf-habits {
+  container: tf-habits / inline-size;
+  display: grid;
+  gap: 4px;
+  min-width: 0;
+}
+.tf-habit-days,
+.tf-habit-marks {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 24px;
+  gap: 6px;
+}
+.tf-habit-days {
+  justify-self: end;
+  padding-right: 12px;
+  font: 600 11px/16px var(--font-sans);
+  color: var(--ink-muted);
+  text-align: center;
+}
+.tf-habit {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  border-radius: var(--radius-md);
+}
+.tf-habit:hover {
+  background: var(--surface-sunken);
+}
+.tf-habit-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.tf-habit-text b {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: 600 14px/20px var(--font-sans);
+}
+.tf-habit-text small {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-habit-streak {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--butter-ink);
+}
+.tf-habit-mark {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  box-sizing: border-box;
+  padding: 0;
+  border: 1.5px solid var(--line-strong);
+  border-radius: 50%;
+  background: transparent;
+  color: var(--primary-foreground);
+}
+.tf-habit-mark.done {
+  border-color: var(--mint-ink);
+  background: var(--mint-ink);
+}
+/* missed: an empty ring with a small cross; no entry: a faint dashed ring */
+.tf-habit-mark.missed {
+  color: var(--ink-subtle);
+}
+.tf-habit-mark:not(.done):not(.missed) {
+  border-style: dashed;
+  border-color: var(--line);
+}
+.tf-habit-mark.today {
+  box-shadow:
+    0 0 0 2px var(--surface),
+    0 0 0 4px var(--line-strong);
+}
+/* narrow: the marks go under the name, the day labels line up with them */
+@container tf-habits (max-width: 400px) {
+  .tf-habit {
+    grid-template-columns: auto minmax(0, 1fr);
+    row-gap: 8px;
+  }
+  .tf-habit-marks {
+    grid-column: 1 / -1;
+  }
+  .tf-habit-days {
+    justify-self: start;
+    padding: 0 0 0 12px;
+  }
+}
+@container tf-habits (max-width: 240px) {
+  .tf-habit-days,
+  .tf-habit-marks {
+    gap: 2px;
+  }
+}
+button.tf-habit-mark {
+  cursor: pointer;
+}
+button.tf-habit-mark:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 4px;
+}
+
+/* MoodPicker */
+.tf-mood {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.tf-mood-q {
+  padding: 0;
+  margin-bottom: 12px;
+  font: 600 14px/20px var(--font-sans);
+}
+.tf-mood-scale {
+  container: tf-mood / inline-size;
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 8px;
+}
+.tf-mood-opt {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  min-width: 0;
+  min-height: 72px;
+  padding: 8px 4px;
+  box-sizing: border-box;
+  border-radius: var(--radius-md);
+  color: var(--ink-muted);
+  font: 600 12px/16px var(--font-sans);
+  cursor: pointer;
+}
+/* the picked level keeps the tint its tf-t-* class gives it */
+.tf-mood-opt:not(.on) {
+  background: var(--surface-sunken);
+}
+.tf-mood.compact .tf-mood-opt {
+  min-height: 48px;
+}
+.tf-mood-opt span {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+/* narrow: tighter cells so every word still fits */
+@container tf-mood (max-width: 300px) {
+  .tf-mood-opt {
+    padding: 8px 2px;
+    font-size: 11px;
+  }
+}
+.tf-mood-opt input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.tf-mood-opt:hover {
+  color: var(--ink);
+}
+.tf-mood-opt.on {
+  box-shadow: inset 0 0 0 2px currentColor;
+}
+.tf-mood-opt:has(input:focus-visible) {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+
+/* VitalTile */
+.tf-vital {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  padding: 16px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: var(--shadow-card);
+}
+.tf-vital-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.tf-vital-head .tf-badge {
+  flex: none;
+  white-space: nowrap;
+}
+.tf-vital-label {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  font: 600 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-vital-main {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 12px;
+}
+.tf-vital-value {
+  font: 700 28px/34px var(--font-sans);
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+}
+.tf-vital-value small {
+  margin-left: 4px;
+  font: 600 13px/18px var(--font-sans);
+  letter-spacing: 0;
+  color: var(--ink-muted);
+}
+.tf-vital-band {
+  position: relative;
+  height: 8px;
+  border-radius: var(--radius-pill);
+  background: var(--surface-sunken);
+}
+.tf-vital-normal {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  border-radius: var(--radius-pill);
+  background: var(--mint);
+}
+.tf-vital-dot {
+  position: absolute;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  box-sizing: border-box;
+  border: 3px solid var(--surface);
+  border-radius: 50%;
+  background: var(--mint-ink);
+  translate: -50% -50%;
+}
+.tf-vital.is-low .tf-vital-dot,
+.tf-vital.is-high .tf-vital-dot {
+  background: var(--butter-ink);
+}
+.tf-vital-foot {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 4px 12px;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+
+/* ActivityRings */
+.tf-rings {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 20px;
+  min-width: 0;
+}
+.tf-rings svg {
+  flex: none;
+}
+.tf-rings-legend {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.tf-rings-legend li {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  column-gap: 8px;
+}
+.tf-rings-key {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+.tf-rings-name {
+  font: 600 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-rings-legend b {
+  grid-column: 2;
+  font: 700 14px/20px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+
+/* SleepChart */
+.tf-sleep {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+.tf-sleep-chart {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.tf-sleep-lane {
+  display: grid;
+  grid-template-columns: 52px minmax(0, 1fr);
+  align-items: center;
+  gap: 12px;
+}
+.tf-sleep-name {
+  font: 600 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-sleep-track {
+  position: relative;
+  height: 20px;
+  border-radius: var(--radius-sm);
+  background: var(--surface-sunken);
+}
+.tf-sleep-seg {
+  position: absolute;
+  top: 2px;
+  bottom: 2px;
+  min-width: 2px;
+  border-radius: var(--radius-sm);
+}
+.tf-sleep-axis {
+  display: flex;
+  justify-content: space-between;
+  margin-left: 64px;
+  font: 500 11px/16px var(--font-sans);
+  color: var(--ink-muted);
+  font-variant-numeric: tabular-nums;
+}
+.tf-sleep-sum {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px 16px;
+}
+.tf-sleep-sum b {
+  font: 700 14px/20px var(--font-sans);
+}
+.tf-sleep-sum ul {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 14px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.tf-sleep-sum li {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-sleep-sum li span:last-child {
+  color: var(--ink);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+/* MedicationList */
+.tf-meds {
+  container: tf-meds / inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.tf-med {
+  display: grid;
+  grid-template-columns: 48px auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  border-radius: var(--radius-md);
+}
+.tf-med.is-due {
+  background: var(--surface-sunken);
+}
+.tf-med-time {
+  font: 600 13px/18px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+  color: var(--ink-muted);
+}
+.tf-med-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.tf-med-text b {
+  font: 600 14px/20px var(--font-sans);
+  overflow-wrap: break-word;
+}
+.tf-med-text small {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-med.is-taken .tf-med-text b {
+  color: var(--ink-muted);
+}
+.tf-med-act {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+/* narrow: time, name and status; the icon gives way */
+@container tf-meds (max-width: 400px) {
+  .tf-med {
+    grid-template-columns: 44px minmax(0, 1fr) auto;
+    gap: 8px;
+    padding: 8px;
+  }
+  .tf-med > .tf-tinticon {
+    display: none;
+  }
+}
+
+/* JournalEntry */
+.tf-journal {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  padding: 20px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: var(--shadow-card);
+}
+.tf-journal-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  font: 600 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-journal-mood {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  border-radius: var(--radius-pill);
+}
+.tf-journal-title {
+  margin: 0;
+  font: 700 16px/22px var(--font-sans);
+}
+.tf-journal-body {
+  font: 500 14px/22px var(--font-sans);
+  color: var(--ink);
+  overflow-wrap: anywhere;
+}
+.tf-journal-body p {
+  margin: 0 0 8px;
+}
+.tf-journal-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding-top: 4px;
+}
+.tf-journal-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+/* GoalCard */
+.tf-goal {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  padding: 20px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: var(--shadow-card);
+}
+/* narrow: the icon steps aside so the title keeps whole words */
+@container tf-goal (max-width: 280px) {
+  .tf-goal-head > .tf-tinticon {
+    display: none;
+  }
+}
+.tf-goal-head {
+  container: tf-goal / inline-size;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.tf-goal-head .tf-option-text {
+  flex: 1;
+  padding: 0;
+}
+.tf-goal-head b {
+  font: 700 14px/20px var(--font-sans);
+}
+.tf-goal-pct {
+  font: 700 20px/26px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+.tf-goal-bar {
+  height: 10px;
+  overflow: hidden;
+  border-radius: var(--radius-pill);
+  background: var(--surface-sunken);
+}
+.tf-goal-bar > span {
+  display: block;
+  height: 100%;
+  border-radius: var(--radius-pill);
+}
+.tf-goal-meta,
+.tf-goal-note {
+  margin: 0;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-goal-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font: 500 13px/18px var(--font-sans);
+}
+.tf-goal-steps li {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.tf-goal-steps li.done {
+  color: var(--ink-muted);
+}
+.tf-goal-step {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  box-sizing: border-box;
+  border: 1.5px solid var(--line-strong);
+  border-radius: 50%;
+  color: var(--primary-foreground);
+}
+.tf-goal-steps li.done .tf-goal-step {
+  border-color: var(--primary);
+  background: var(--primary);
+}
+
+/* InsightCard */
+.tf-insight {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+  padding: 16px 16px 16px 20px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow:
+    var(--shadow-card),
+    inset 3px 0 0 var(--sky-ink);
+  /* on glass the card takes a faint wash of its tone */
+  --tint: var(--sky);
+}
+.tf-insight.is-success {
+  --tint: var(--mint);
+  box-shadow:
+    var(--shadow-card),
+    inset 3px 0 0 var(--mint-ink);
+}
+.tf-insight.is-warning {
+  --tint: var(--butter);
+  box-shadow:
+    var(--shadow-card),
+    inset 3px 0 0 var(--butter-ink);
+}
+.tf-insight.is-highlight {
+  --tint: var(--lilac);
+  box-shadow:
+    var(--shadow-card),
+    inset 3px 0 0 var(--lilac-ink);
+}
+.tf-insight-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+.tf-insight-titles {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+.tf-insight-titles small {
+  font: 600 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-insight-titles b {
+  font: 700 15px/22px var(--font-sans);
+  overflow-wrap: anywhere;
+}
+.tf-insight-body {
+  font: 500 14px/20px var(--font-sans);
+  color: var(--ink);
+}
+.tf-insight-why button {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 24px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--ink-muted);
+  font: 600 12px/16px var(--font-sans);
+  cursor: pointer;
+}
+.tf-insight-why button:hover {
+  color: var(--ink);
+}
+.tf-insight-why button:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+.tf-insight-why button[aria-expanded="true"] .tf-insight-chev {
+  rotate: 180deg;
+}
+.tf-insight-whytext {
+  margin-top: 8px;
+  padding: 12px;
+  border-radius: var(--radius-md);
+  background: var(--surface-sunken);
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-insight-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+/* ConsentList */
+.tf-consent {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+.tf-consent-item {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: var(--shadow-card);
+}
+.tf-consent-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+.tf-consent-head .tf-option-text {
+  flex: 1;
+  min-width: 140px;
+  padding: 0;
+}
+.tf-consent-purpose {
+  margin: 0;
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-consent-scopes {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.tf-consent-scopes li {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 0;
+  border-top: 1px solid var(--line);
+}
+.tf-consent-scopes .tf-option-text {
+  min-width: 0;
+  padding: 0;
+}
+.tf-consent-req {
+  flex: none;
+  font: 600 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+
+/* 12-household.css */
+/* Life: budgets, subscriptions, net worth, deadlines, policies, coverage, claims, documents */
+
+/* BudgetList */
+.tf-budgets,
+.tf-subs ul,
+.tf-deadlines,
+.tf-docs,
+.tf-claim-steps,
+.tf-nw-side ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.tf-budgets {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.tf-budget {
+  container: tf-budget / inline-size;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 10px 12px;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--ink);
+  font: inherit;
+  text-align: left;
+}
+button.tf-budget {
+  cursor: pointer;
+}
+button.tf-budget:hover {
+  background: var(--accent);
+}
+button.tf-budget:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+.tf-budget-main {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+.tf-budget-top {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0 12px;
+}
+/* narrow: the icon steps aside so the category keeps its name */
+@container tf-budget (max-width: 300px) {
+  .tf-budget > .tf-tinticon {
+    display: none;
+  }
+}
+.tf-budget-top b {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: 600 14px/20px var(--font-sans);
+}
+.tf-budget-nums {
+  flex: none;
+  font: 700 13px/18px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+.tf-budget-nums small {
+  font-weight: 500;
+  color: var(--ink-muted);
+}
+.tf-budget-bar {
+  display: block;
+  height: 8px;
+  overflow: hidden;
+  border-radius: var(--radius-pill);
+  background: var(--surface-sunken);
+}
+.tf-budget-bar > span {
+  display: block;
+  height: 100%;
+  border-radius: var(--radius-pill);
+}
+.tf-budget-left {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-budget-left.over {
+  color: var(--blush-ink);
+  font-weight: 600;
+}
+
+/* SubscriptionList */
+.tf-subs {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+.tf-subs ul {
+  container: tf-subs / inline-size;
+  display: flex;
+  flex-direction: column;
+}
+.tf-sub {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 4px;
+  border-bottom: 1px solid var(--line);
+}
+.tf-sub:last-child {
+  border-bottom: 0;
+}
+.tf-sub-text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+.tf-sub-text b {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: 600 14px/20px var(--font-sans);
+}
+.tf-sub-text small {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-sub-amount {
+  flex: none;
+  font: 700 14px/20px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+.tf-sub-amount small {
+  margin-left: 2px;
+  font-weight: 500;
+  color: var(--ink-muted);
+}
+/* narrow: amount and trial badge go under the name, the menu stays at the end */
+@container tf-subs (max-width: 380px) {
+  .tf-sub {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    gap: 4px 12px;
+    align-items: center;
+  }
+  .tf-sub > :first-child {
+    grid-row: 1 / span 2;
+    align-self: start;
+  }
+  .tf-sub > .tf-sub-text,
+  .tf-sub > .tf-badge,
+  .tf-sub > .tf-sub-amount {
+    grid-column: 2;
+    justify-self: start;
+    text-align: left;
+  }
+  .tf-sub > :last-child:not(.tf-sub-amount) {
+    grid-column: 3;
+    grid-row: 1;
+  }
+}
+.tf-sub.is-cancelled .tf-sub-text b,
+.tf-sub.is-cancelled .tf-sub-amount {
+  color: var(--ink-muted);
+  text-decoration: line-through;
+}
+.tf-subs-total {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 4px 12px;
+  padding: 12px;
+  border-radius: var(--radius-md);
+  background: var(--surface-sunken);
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-subs-total b {
+  color: var(--ink);
+  font: 700 15px/20px var(--font-sans);
+}
+
+/* NetWorthCard */
+.tf-nw {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+  padding: 20px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: var(--shadow-card);
+}
+.tf-nw-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 12px;
+}
+.tf-nw-head > :first-child {
+  flex: 1 1 200px;
+}
+.tf-nw-head > :last-child:not(:first-child) {
+  flex: none;
+  max-width: 45%;
+}
+.tf-nw-title {
+  font: 600 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-nw-total {
+  font: 700 32px/38px var(--font-sans);
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+}
+.tf-nw-change {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font: 600 12px/16px var(--font-sans);
+  color: var(--mint-ink);
+}
+.tf-nw-change.down {
+  color: var(--blush-ink);
+}
+.tf-nw-change.down .tf-ico {
+  rotate: 180deg;
+}
+.tf-nw-change span {
+  font-weight: 500;
+  color: var(--ink-muted);
+}
+.tf-nw-sides {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 16px;
+}
+.tf-nw-side {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+.tf-nw-sidehead {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--line);
+  font: 600 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-nw-sidehead b {
+  color: var(--ink);
+  font-variant-numeric: tabular-nums;
+}
+.tf-nw-side li {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 4px 0;
+  font: 500 13px/18px var(--font-sans);
+}
+.tf-nw-side li span:first-child {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  color: var(--ink-muted);
+}
+.tf-nw-side li span:last-child {
+  font-variant-numeric: tabular-nums;
+}
+
+/* DeadlineList */
+.tf-deadlines {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.tf-deadline {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  padding: 8px 12px;
+  border-radius: var(--radius-md);
+}
+.tf-deadline.is-overdue {
+  background: var(--blush);
+}
+.tf-deadline.is-soon {
+  background: var(--surface-sunken);
+}
+.tf-deadline-date {
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  align-items: center;
+  width: 40px;
+  padding: 4px 0;
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  box-shadow: inset 0 0 0 1px var(--line);
+}
+.tf-deadline-date b {
+  font: 700 16px/20px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+.tf-deadline-date small {
+  font: 600 10px/12px var(--font-sans);
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+.tf-deadline-text {
+  display: flex;
+  flex: 1 1 160px;
+  flex-direction: column;
+  min-width: 0;
+}
+.tf-deadline-text b {
+  font: 600 14px/20px var(--font-sans);
+  overflow-wrap: break-word;
+}
+.tf-deadline-text small {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-deadline-amount {
+  font: 700 13px/18px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+.tf-deadline.is-done .tf-deadline-text b {
+  color: var(--ink-muted);
+  text-decoration: line-through;
+}
+.tf-deadline-done {
+  color: var(--mint-ink);
+}
+
+/* PolicyCard */
+.tf-policy {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+  padding: 20px;
+  border-radius: var(--radius-lg);
+  background: var(--surface);
+  box-shadow: var(--shadow-card);
+}
+.tf-policy-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+.tf-policy-head .tf-option-text {
+  flex: 1;
+  min-width: 120px;
+  padding: 0;
+}
+.tf-policy-head b {
+  font: 700 15px/20px var(--font-sans);
+}
+.tf-policy-facts {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
+  gap: 12px;
+  margin: 0;
+}
+.tf-policy-facts div {
+  min-width: 0;
+}
+.tf-policy-facts dt {
+  font: 600 11px/14px var(--font-sans);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+.tf-policy-facts dd {
+  margin: 2px 0 0;
+  font: 700 15px/20px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+  overflow-wrap: break-word;
+}
+.tf-policy-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding-top: 12px;
+  border-top: 1px solid var(--line);
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-policy-actions {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+/* CoverageMatrix */
+.tf-coverage {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  min-width: 0;
+}
+.tf-coverage-sum {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+}
+.tf-coverage-box {
+  container: tf-coverage / inline-size;
+}
+.tf-coverage-table {
+  width: 100%;
+  border-collapse: collapse;
+}
+.tf-coverage-table th,
+.tf-coverage-table td {
+  padding: 10px 8px;
+  border-top: 1px solid var(--line);
+  text-align: left;
+  vertical-align: middle;
+}
+.tf-coverage-table th {
+  font-weight: inherit;
+}
+.tf-coverage-table th b {
+  display: block;
+  font: 600 14px/20px var(--font-sans);
+}
+.tf-coverage-table th small {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-coverage-table td:nth-child(2) {
+  white-space: nowrap;
+}
+.tf-coverage-note {
+  font: 500 13px/18px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-coverage-table tr.is-none th b {
+  color: var(--blush-ink);
+}
+/* narrow: each risk becomes a block, its status top right, the note underneath */
+@container tf-coverage (max-width: 440px) {
+  .tf-coverage-table,
+  .tf-coverage-table tbody {
+    display: block;
+  }
+  .tf-coverage-table tr {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 4px 12px;
+    padding: 10px 4px;
+    border-top: 1px solid var(--line);
+  }
+  .tf-coverage-table th,
+  .tf-coverage-table td {
+    padding: 0;
+    border-top: 0;
+  }
+  .tf-coverage-table td.tf-coverage-note {
+    grid-column: 1 / -1;
+  }
+}
+
+/* ClaimTimeline */
+.tf-claim {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  min-width: 0;
+}
+.tf-claim-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+.tf-claim-head .tf-option-text {
+  padding: 0;
+}
+.tf-claim-head b {
+  font: 700 15px/20px var(--font-sans);
+}
+.tf-claim-amount {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  font: 700 18px/24px var(--font-sans);
+  font-variant-numeric: tabular-nums;
+}
+.tf-claim-amount small {
+  font: 600 11px/14px var(--font-sans);
+  color: var(--ink-muted);
+}
+.tf-claim-steps {
+  display: flex;
+  flex-direction: column;
+}
+.tf-claim-steps li {
+  position: relative;
+  display: flex;
+  gap: 12px;
+  padding-bottom: 16px;
+}
+.tf-claim-steps li:last-child {
+  padding-bottom: 0;
+}
+.tf-claim-steps li:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  top: 20px;
+  bottom: 0;
+  left: 9px;
+  width: 2px;
+  background: var(--line);
+}
+.tf-claim-steps li.is-done:not(:last-child)::before {
+  background: var(--mint-ink);
+}
+.tf-claim-dot {
+  position: relative;
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 20px;
+  height: 20px;
+  box-sizing: border-box;
+  border: 2px solid var(--line-strong);
+  border-radius: 50%;
+  background: var(--surface);
+  color: var(--primary-foreground);
+}
+.tf-claim-steps li.is-done .tf-claim-dot {
+  border-color: var(--mint-ink);
+  background: var(--mint-ink);
+}
+.tf-claim-steps li.is-current .tf-claim-dot {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 4px var(--accent);
+}
+.tf-claim-steps li.is-failed .tf-claim-dot {
+  border-color: var(--blush-ink);
+  background: var(--blush-ink);
+}
+.tf-claim-text {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+.tf-claim-text b {
+  font: 600 14px/20px var(--font-sans);
+}
+.tf-claim-steps li.is-todo .tf-claim-text b {
+  color: var(--ink-muted);
+  font-weight: 500;
+}
+.tf-claim-text small {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+
+/* DocumentList */
+.tf-docs {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  min-width: 0;
+}
+.tf-doc {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 12px;
+  width: 100%;
+  padding: 10px 12px;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--ink);
+  font: inherit;
+  text-align: left;
+}
+button.tf-doc {
+  cursor: pointer;
+}
+button.tf-doc:hover {
+  background: var(--accent);
+}
+button.tf-doc:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+.tf-doc-text {
+  display: flex;
+  flex: 1 1 160px;
+  flex-direction: column;
+  min-width: 0;
+}
+.tf-doc-text b {
+  font: 600 14px/20px var(--font-sans);
+  overflow-wrap: break-word;
+}
+.tf-doc-text small,
+.tf-doc-valid {
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}