@twentyfirstmedia/pro 0.5.0 → 0.6.0

package/dist/scoped.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 @@
   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;
 }
 :where([data-kit="pro"]) .tf-search input {
   border: 0;
@@ -1459,6 +1485,7 @@
   font: 500 14px/20px var(--font-sans);
   color: var(--ink);
   width: 100%;
+  min-width: 0;
 }
 :where([data-kit="pro"]) .tf-search input::placeholder {
   color: var(--ink-subtle);
@@ -1540,7 +1567,7 @@
   display: flex;
 }
 :where([data-kit="pro"]) .tf-tabs-block .tf-tab {
-  flex: 1;
+  flex: 1 1 0;
 }
 
 /* StatTile */
@@ -1857,6 +1884,36 @@
   background: var(--accent);
   color: var(--accent-foreground);
 }
+/* expanded: names next to the icons (the sheet's first column follows the rail's width) */
+:where([data-kit="pro"]) .tf-rail {
+  transition: width var(--dur-base) var(--ease-out);
+}
+:where([data-kit="pro"]) .tf-rail.expanded {
+  width: 200px;
+}
+:where([data-kit="pro"]) .tf-rail.expanded .tf-rail-group {
+  align-items: stretch;
+}
+:where([data-kit="pro"]) .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);
+}
+:where([data-kit="pro"]) .tf-rail-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: 500 13px/18px var(--font-sans);
+}
+:where([data-kit="pro"]) .tf-rail.expanded .tf-dotcount {
+  position: static;
+  margin-left: auto;
+}
 :where([data-kit="pro"]) .tf-rail-btn[aria-current="page"] {
   background: var(--primary);
   color: var(--primary-foreground);
@@ -2006,9 +2063,28 @@
 :where([data-kit="pro"]) .tf-shell .tf-topbar {
   padding: 0 var(--space-6);
 }
+/* AppShell with navigation="sidebar": the labelled sidebar on the frame, the sheet beside it */
+:where([data-kit="pro"]) .tf-shell.tf-shell-sidebar {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: stretch;
+  padding: 8px;
+}
+:where([data-kit="pro"]) .tf-shell-tools {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+:where([data-kit="pro"]) .tf-sheet.tf-sheet-norail {
+  grid-template-columns: minmax(0, 1fr) 300px;
+}
+:where([data-kit="pro"]) .tf-sheet.tf-sheet-norail.tf-sheet-2 {
+  grid-template-columns: minmax(0, 1fr);
+}
 :where([data-kit="pro"]) .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 @@
   background: var(--accent);
   color: var(--accent-foreground);
 }
+:where([data-kit="pro"]) a.tf-row-item {
+  text-decoration: none;
+}
+:where([data-kit="pro"]) .tf-row-text {
+  min-width: 0;
+}
+/* not interactive: no hover, no pointer */
+:where([data-kit="pro"]) .tf-row-item.static {
+  cursor: default;
+}
+:where([data-kit="pro"]) .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 */
+:where([data-kit="pro"]) .tf-row-item.has-hit {
+  position: relative;
+}
+:where([data-kit="pro"]) .tf-row-item.has-hit:hover {
+  background: transparent;
+  color: var(--ink);
+}
+:where([data-kit="pro"]) .tf-row-item.has-hit:has(.tf-row-hit:hover) {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+:where([data-kit="pro"]) .tf-row-item.has-hit:has(.tf-row-hit:focus-visible) {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+:where([data-kit="pro"]) .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;
+}
+:where([data-kit="pro"]) .tf-row-hit::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+:where([data-kit="pro"]) .tf-row-item.has-actions {
+  grid-template-columns: auto 1fr auto auto;
+}
+:where([data-kit="pro"]) .tf-row-actions {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
 :where([data-kit="pro"]) .tf-row-item[aria-current="true"] {
   background: var(--surface);
   box-shadow: 0 0 0 var(--line-width) var(--line);
@@ -2536,12 +2670,27 @@
   gap: 8px;
 }
 :where([data-kit="pro"]) .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 */
+:where([data-kit="pro"]) .tf-row-sub.clamp,
+:where([data-kit="pro"]) .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;
+}
+:where([data-kit="pro"]) .tf-row-title.clamp {
+  align-items: flex-start;
+}
 :where([data-kit="pro"]) .tf-row-meta {
   font: 500 12px/16px var(--font-sans);
   color: var(--ink-muted);
@@ -2728,6 +2877,13 @@
   font: 500 13px/1 var(--font-sans);
   cursor: pointer;
 }
+:where([data-kit="pro"]) a.tf-page {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  text-decoration: none;
+}
 :where([data-kit="pro"]) .tf-page:hover {
   background: var(--accent);
   color: var(--ink);
@@ -2738,18 +2894,42 @@
 }
 :where([data-kit="pro"]) .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);
 }
-:where([data-kit="pro"]) .tf-crumbs a {
+/* links and buttons get a 24px target without moving the text */
+:where([data-kit="pro"]) .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;
+}
+:where([data-kit="pro"]) a.tf-crumb,
+:where([data-kit="pro"]) button.tf-crumb {
+  cursor: pointer;
 }
-:where([data-kit="pro"]) .tf-crumbs a:hover {
+:where([data-kit="pro"]) a.tf-crumb:hover,
+:where([data-kit="pro"]) button.tf-crumb:hover {
   color: var(--ink);
 }
+:where([data-kit="pro"]) .tf-crumb:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 0;
+}
 :where([data-kit="pro"]) .tf-crumbs [aria-current] {
   color: var(--ink);
 }
@@ -2791,7 +2971,7 @@
   cursor: pointer;
 }
 :where([data-kit="pro"]) .tf-sheet-2 {
-  grid-template-columns: 44px 1fr;
+  grid-template-columns: auto 1fr;
 }
 :where([data-kit="pro"]) .tf-main {
   display: flex;
@@ -2864,6 +3044,26 @@
     justify-content: center;
   }
 }
+/* the TopBar measured that the labels do not fit: icons only, at any width */
+:where([data-kit="pro"]) .tf-nav.tight .tf-nav-label {
+  display: none;
+}
+:where([data-kit="pro"]) .tf-nav.tight .tf-nav-item {
+  position: relative;
+  width: 36px;
+  padding: 0;
+  justify-content: center;
+}
+:where([data-kit="pro"]) .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;
+}
 :where([data-kit="pro"]) .tf-main {
   animation: none;
 }
@@ -2989,6 +3189,19 @@
 :where([data-kit="pro"]) .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) */
+:where([data-kit="pro"]) .tf-user-name,
+:where([data-kit="pro"]) .tf-user-mail {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:where([data-kit="pro"]) .tf-user {
+  min-width: 0;
+  flex-shrink: 1;
 }
 
 /* Checkbox: real box + SVG check (no pseudo-elements on the input) */
@@ -3001,9 +3214,12 @@
 }
 :where([data-kit="pro"]) .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;
@@ -4078,6 +4294,23 @@
   font: 500 13px/18px var(--font-sans);
   pointer-events: none;
 }
+/* an interactive control at the end (reveal password, clear, copy) */
+:where([data-kit="pro"]) .tf-input-action {
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+}
+:where([data-kit="pro"]) .tf-inputwrap.has-action .tf-input {
+  padding-right: 44px;
+}
+:where([data-kit="pro"]) .tf-inputwrap.has-action.has-suffix .tf-input {
+  padding-right: 72px;
+}
+:where([data-kit="pro"]) .tf-inputwrap.has-action .tf-input-suffix {
+  right: 44px;
+}
 :where([data-kit="pro"]) .tf-input-suffix.err {
   color: var(--blush-ink);
 }
@@ -4237,7 +4470,7 @@
   display: flex;
 }
 :where([data-kit="pro"]) .tf-seg.block .tf-seg-item {
-  flex: 1;
+  flex: 1 1 0;
 }
 :where([data-kit="pro"]) .tf-seg-item {
   position: relative;
@@ -4849,6 +5082,10 @@
     border-color var(--dur-fast) ease,
     background-color var(--dur-fast) ease;
 }
+:where([data-kit="pro"]) .tf-drop.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 :where([data-kit="pro"]) .tf-drop b {
   font: 500 14px/20px var(--font-sans);
   margin-top: 4px;
@@ -4911,6 +5148,7 @@
 /* Alert, confirm, toaster */
 :where([data-kit="pro"]) .tf-alert {
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-start;
   gap: 12px;
   padding: 12px 12px 12px 16px;
@@ -4954,7 +5192,8 @@
   color: var(--lilac-ink);
 }
 :where([data-kit="pro"]) .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;
@@ -4970,8 +5209,11 @@
 :where([data-kit="pro"]) .tf-alert-actions {
   flex: none;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 4px;
+  max-width: 100%;
+  margin-left: auto;
 }
 :where([data-kit="pro"]) .tf-alert .tf-iconbtn-ghost {
   background: transparent;
@@ -5981,14 +6223,29 @@
   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%);
+}
+:where([data-kit="pro"]) .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;
+}
+:where([data-kit="pro"]) .tf-source > .tf-ico,
+:where([data-kit="pro"]) .tf-source-n {
+  flex: none;
 }
 :where([data-kit="pro"]) .tf-source:hover {
   background: var(--line);
@@ -7111,17 +7368,25 @@
   color: var(--ink-muted);
 }
 :where([data-kit="pro"]) .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;
 }
 :where([data-kit="pro"]) .tf-csteps li {
   display: flex;
   align-items: center;
   gap: 8px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-cstep-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 :where([data-kit="pro"]) .tf-csteps li + li::before {
   content: "";
@@ -7150,6 +7415,40 @@
 :where([data-kit="pro"]) .tf-csteps button:disabled {
   cursor: default;
 }
+:where([data-kit="pro"]) .tf-csteps button {
+  min-width: 0;
+  max-width: 100%;
+}
+:where([data-kit="pro"]) .tf-csteps.compact li:not(.cur) .tf-cstep-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+:where([data-kit="pro"]) .tf-csteps.compact li:not(.cur) button {
+  padding: 0 4px;
+}
+:where([data-kit="pro"]) .tf-csteps.compact li + li::before {
+  width: 12px;
+}
+@container tf-csteps (max-width: 560px) {
+  :where([data-kit="pro"]) .tf-csteps li:not(.cur) .tf-cstep-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  :where([data-kit="pro"]) .tf-csteps li:not(.cur) button {
+    padding: 0 4px;
+  }
+  :where([data-kit="pro"]) .tf-csteps li + li::before {
+    width: 12px;
+  }
+}
 :where([data-kit="pro"]) .tf-csteps li.cur button {
   background: var(--surface);
   color: var(--ink);
@@ -7316,7 +7615,7 @@
   color: var(--on-frame);
   box-shadow: var(--shadow-float), 0 0 0 var(--line-width) var(--line);
 }
-:where([data-kit="pro"]) .tf-plan.featured .tf-plan-head span,
+:where([data-kit="pro"]) .tf-plan.featured .tf-plan-head span:not(.tf-badge),
 :where([data-kit="pro"]) .tf-plan.featured .tf-plan-price span,
 :where([data-kit="pro"]) .tf-plan.featured .tf-plan-price s,
 :where([data-kit="pro"]) .tf-plan.featured .tf-plan-feats li.no {
@@ -7347,10 +7646,22 @@
 :where([data-kit="pro"]) .tf-plan-head b {
   font: 600 18px/24px var(--font-sans);
 }
-:where([data-kit="pro"]) .tf-plan-head span {
+:where([data-kit="pro"]) .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 */
+:where([data-kit="pro"]) .tf-plan-head .tf-plan-current {
+  align-self: flex-start;
+}
+:where([data-kit="pro"]) .tf-plan-note {
+  margin: -4px 0 0;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+:where([data-kit="pro"]) a.tf-plan-cta {
+  text-decoration: none;
+}
 :where([data-kit="pro"]) .tf-plan-price {
   display: flex;
   align-items: baseline;
@@ -9456,7 +9767,7 @@
 :where([data-kit="pro"]) .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;
@@ -9475,6 +9786,17 @@
   cursor: pointer;
   border-radius: var(--radius-1);
 }
+:where([data-kit="pro"]) .tf-tabbar-item {
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-tabbar-label {
+  max-width: 100%;
+  padding: 0 4px;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 :where([data-kit="pro"]) .tf-tabbar-item.on {
   color: var(--on-frame);
   background: var(--frame-hover);
@@ -9787,6 +10109,22 @@
   padding-bottom: 10px;
   color: var(--ink-muted);
 }
+/* in a narrow column (a filter sidebar) the number fields give their padding to the digits */
+:where([data-kit="pro"]) .tf-range {
+  container: tf-range / inline-size;
+}
+@container tf-range (max-width: 280px) {
+  :where([data-kit="pro"]) .tf-range-inputs {
+    gap: 4px;
+  }
+  :where([data-kit="pro"]) .tf-range-num .tf-input {
+    padding-left: 10px;
+    padding-right: 24px;
+  }
+  :where([data-kit="pro"]) .tf-range-num > span {
+    right: 10px;
+  }
+}
 :where([data-kit="pro"]) .tf-range-vals {
   display: flex;
   justify-content: space-between;
@@ -9940,6 +10278,31 @@
   font: 500 12px/16px var(--font-sans);
   color: var(--ink-muted);
 }
+/* layout="list": compact rows */
+:where([data-kit="pro"]) .tf-tiles.list {
+  grid-template-columns: minmax(0, 1fr);
+  gap: 8px;
+}
+:where([data-kit="pro"]) .tf-tiles.list .tf-tile {
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 44px 8px 8px;
+}
+:where([data-kit="pro"]) .tf-tiles.list .tf-tile-art {
+  flex: none;
+  width: 40px;
+  height: var(--density-control);
+  aspect-ratio: auto;
+}
+:where([data-kit="pro"]) .tf-tiles.list .tf-tile-label {
+  min-width: 0;
+  padding: 0;
+}
+:where([data-kit="pro"]) .tf-tiles.list .tf-tile-check {
+  top: 50%;
+  translate: 0 -50%;
+}
 :where([data-kit="pro"]) .tf-tile-check {
   position: absolute;
   top: 14px;
@@ -11049,6 +11412,16 @@
   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) */
+:where([data-kit="pro"]) .tf-qr {
+  display: block;
+  width: 100%;
+  height: auto;
+  color: var(--paper-ink);
+}
+:where([data-kit="pro"]) .tf-qr-bg {
+  fill: var(--paper);
+}
 :where([data-kit="pro"]) .tf-2fa-qr > * {
   max-width: 100%;
   max-height: 100%;
@@ -11300,7 +11673,8 @@
   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;
 }
@@ -12204,6 +12578,14 @@
 :where([data-kit="pro"]) .tf-togglegroup .tf-toggle {
   height: var(--control-sm);
 }
+:where([data-kit="pro"]) .tf-togglegroup.block {
+  display: flex;
+  flex-wrap: nowrap;
+  width: auto;
+}
+:where([data-kit="pro"]) .tf-togglegroup.block .tf-toggle {
+  flex: 1 1 0;
+}
 :where([data-kit="pro"]) .tf-togglegroup .tf-toggle.icon {
   width: 32px;
 }
@@ -12414,6 +12796,11 @@
   text-align: left;
   cursor: pointer;
 }
+:where([data-kit="pro"]) .tf-selectmenu.sm {
+  height: var(--control-sm);
+  padding: 0 12px;
+  font-size: 13px;
+}
 :where([data-kit="pro"]) .tf-selectmenu.empty .tf-selectmenu-value {
   color: var(--ink-subtle);
 }
@@ -12690,26 +13077,44 @@
   outline-offset: -2px;
 }
 
-/* Sidebar */
+/* Sidebar: floating (a card), attached (flush with the screen's edge) or on the AppShell frame */
 :where([data-kit="pro"]) .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);
 }
 :where([data-kit="pro"]) .tf-sidebar.collapsed {
   width: 64px;
 }
+:where([data-kit="pro"]) .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);
+}
+:where([data-kit="pro"]) .tf-sidebar-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: var(--density-control);
+  padding: 0 4px;
+}
 :where([data-kit="pro"]) .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;
@@ -12722,13 +13127,49 @@
   padding: 0;
   list-style: none;
 }
+:where([data-kit="pro"]) .tf-sidebar-grouphead {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 24px;
+  margin-bottom: 8px;
+  padding: 0 4px 0 12px;
+}
 :where([data-kit="pro"]) .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);
 }
+:where([data-kit="pro"]) button.tf-sidebar-grouplabel {
+  cursor: pointer;
+}
+:where([data-kit="pro"]) button.tf-sidebar-grouplabel:hover {
+  color: var(--ink);
+}
+:where([data-kit="pro"]) button.tf-sidebar-grouplabel:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+:where([data-kit="pro"]) .tf-sidebar-grouplabel[aria-expanded="false"] .tf-sidebar-chev {
+  transform: rotate(-90deg);
+}
+:where([data-kit="pro"]) .tf-sidebar-groupaction {
+  flex: none;
+  margin-left: auto;
+}
+:where([data-kit="pro"]) .tf-sidebar-li {
+  position: relative;
+}
 :where([data-kit="pro"]) .tf-sidebar-item {
   display: flex;
   align-items: center;
@@ -12736,15 +13177,86 @@
   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;
 }
-:where([data-kit="pro"]) .tf-sidebar-item:hover {
+/* Filter options (Sidebar as="aside"): a checkbox or radio mark, the label and a count */
+:where([data-kit="pro"]) .tf-sidebar-option {
+  position: relative;
+}
+:where([data-kit="pro"]) .tf-sidebar-option.disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+:where([data-kit="pro"]) .tf-sidebar-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+:where([data-kit="pro"]) .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);
+}
+:where([data-kit="pro"]) .tf-sidebar-mark.radio {
+  border-radius: var(--radius-full);
+}
+:where([data-kit="pro"]) .tf-sidebar-mark svg {
+  opacity: 0;
+}
+:where([data-kit="pro"]) .tf-sidebar-input:checked + .tf-sidebar-mark {
+  background: var(--primary);
+  border-color: var(--primary);
+}
+:where([data-kit="pro"]) .tf-sidebar-input:checked + .tf-sidebar-mark.radio {
+  box-shadow: inset 0 0 0 3px var(--surface);
+}
+:where([data-kit="pro"]) .tf-sidebar-input:checked + .tf-sidebar-mark svg {
+  opacity: 1;
+}
+:where([data-kit="pro"]) .tf-sidebar-input:focus-visible + .tf-sidebar-mark {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+:where([data-kit="pro"]) .tf-sidebar-option:has(.tf-sidebar-input:checked) {
+  color: var(--ink);
+}
+/* free content in a group (sliders, date fields, chips) */
+:where([data-kit="pro"]) .tf-sidebar-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 4px 12px 0;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-sidebar-groupbody {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-sidebar-item:hover,
+:where([data-kit="pro"]) .tf-sidebar-item.flying {
   background: var(--sidebar-accent);
   color: var(--ink);
 }
@@ -12759,10 +13271,21 @@
   outline: 2px solid var(--focus);
   outline-offset: 2px;
 }
+:where([data-kit="pro"]) .tf-sidebar-item:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+:where([data-kit="pro"]) .tf-sidebar-item:disabled:hover {
+  background: transparent;
+  color: var(--ink-muted);
+}
 :where([data-kit="pro"]) .tf-sidebar-item.nested {
   height: var(--control-sm);
   padding-left: 40px;
 }
+:where([data-kit="pro"]) .tf-sidebar-sub {
+  margin-top: 2px !important;
+}
 :where([data-kit="pro"]) .tf-sidebar-label {
   flex: 1;
   min-width: 0;
@@ -12771,22 +13294,107 @@
   white-space: nowrap;
 }
 :where([data-kit="pro"]) .tf-sidebar-chev {
+  flex: none;
   transition: transform var(--dur-base) var(--ease-out);
 }
 :where([data-kit="pro"]) .tf-sidebar-item[aria-expanded="true"] .tf-sidebar-chev {
   transform: rotate(180deg);
 }
+:where([data-kit="pro"]) .tf-sidebar-ext {
+  flex: none;
+  opacity: 0.7;
+}
+:where([data-kit="pro"]) .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;
+}
+:where([data-kit="pro"]) .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;
+}
+:where([data-kit="pro"]) .tf-sidebar-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+  background: var(--count);
+}
+:where([data-kit="pro"]) .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 */
+:where([data-kit="pro"]) .tf-sidebar-li.with-actions > .tf-sidebar-item {
+  padding-right: 40px;
+}
+:where([data-kit="pro"]) .tf-sidebar-more {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  opacity: 0;
+  transition: opacity var(--dur-fast) var(--ease-out);
+}
+:where([data-kit="pro"]) .tf-sidebar-li:hover > .tf-sidebar-more,
+:where([data-kit="pro"]) .tf-sidebar-more:focus-visible,
+:where([data-kit="pro"]) .tf-sidebar-more[aria-expanded="true"] {
+  opacity: 1;
+}
 :where([data-kit="pro"]) .tf-sidebar-foot {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 8px;
   padding-top: 12px;
   border-top: 1px solid var(--sidebar-border);
 }
+:where([data-kit="pro"]) .tf-sidebar-foot > :not(.tf-sidebar-toggle) {
+  flex: 1;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-sidebar-toggle {
+  flex: none;
+  margin-left: auto;
+}
+:where([data-kit="pro"]) .tf-sidebar-head .tf-pop-anchor,
+:where([data-kit="pro"]) .tf-sidebar-foot .tf-pop-anchor {
+  display: block;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-sidebar-head .tf-wssw {
+  width: 100%;
+}
+:where([data-kit="pro"]) .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 */
+:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-body {
+  gap: 12px;
+}
 :where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-label,
 :where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-chev,
-:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-grouplabel {
+:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-ext,
+:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-grouphead {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -12794,12 +13402,19 @@
   clip-path: inset(50%);
   white-space: nowrap;
 }
+:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-group + .tf-sidebar-group {
+  padding-top: 12px;
+  border-top: 1px solid var(--sidebar-border);
+}
 :where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-item {
   position: relative;
   justify-content: center;
   padding: 0;
 }
-:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-subnav-count {
+:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-item.has-current {
+  background: var(--sidebar-accent);
+}
+:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-count {
   position: absolute;
   top: -2px;
   right: -2px;
@@ -12809,13 +13424,273 @@
   font-size: 10px;
   line-height: 16px;
 }
+:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-dot,
+:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-badge {
+  position: absolute;
+  top: 6px;
+  right: 8px;
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  font-size: 0;
+}
+:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-head {
+  justify-content: center;
+  padding: 0;
+}
 :where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-foot {
   flex-direction: column;
 }
+:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-foot > :not(.tf-sidebar-toggle) {
+  flex: none;
+}
+:where([data-kit="pro"]) .tf-sidebar.collapsed .tf-sidebar-toggle {
+  margin-left: 0;
+}
+
+/* tooltips, flyouts and item menus float in the portal, so the scrolling body does not clip them */
+:where([data-kit="pro"]) .tf-sidebar-layer {
+  position: fixed;
+  z-index: var(--z-palette);
+}
+:where([data-kit="pro"]) .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-pro-fade var(--dur-fast) var(--ease-out) both;
+}
+:where([data-kit="pro"]) .tf-sidebar-tipcount {
+  color: var(--on-frame-muted);
+}
+:where([data-kit="pro"]) .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-pro-fade var(--dur-fast) var(--ease-out) both;
+}
+:where([data-kit="pro"]) .tf-sidebar-flyout ul {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+:where([data-kit="pro"]) .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);
+}
+:where([data-kit="pro"]) .tf-sidebar-flyout .tf-sidebar-item.nested {
+  padding-left: 12px;
+}
+
+/* on the AppShell frame */
+:where([data-kit="pro"]) .tf-sidebar.shell {
+  align-self: stretch;
+  padding: 16px 8px 8px;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  color: var(--on-frame);
+}
+:where([data-kit="pro"]) .tf-sidebar.shell .tf-sidebar-item,
+:where([data-kit="pro"]) .tf-sidebar.shell .tf-sidebar-grouplabel {
+  color: var(--on-frame-muted);
+}
+:where([data-kit="pro"]) .tf-sidebar.shell .tf-sidebar-item:hover,
+:where([data-kit="pro"]) .tf-sidebar.shell .tf-sidebar-item.flying,
+:where([data-kit="pro"]) .tf-sidebar.shell.collapsed .tf-sidebar-item.has-current {
+  background: var(--frame-hover);
+  color: var(--on-frame);
+}
+:where([data-kit="pro"]) .tf-sidebar.shell .tf-sidebar-item.has-current,
+:where([data-kit="pro"]) .tf-sidebar.shell button.tf-sidebar-grouplabel:hover {
+  color: var(--on-frame);
+}
+:where([data-kit="pro"]) .tf-sidebar.shell .tf-sidebar-item[aria-current="page"] {
+  background: var(--frame-active);
+  color: var(--on-frame);
+}
+:where([data-kit="pro"]) .tf-sidebar.shell .tf-sidebar-item:disabled:hover {
+  background: transparent;
+  color: var(--on-frame-muted);
+}
+:where([data-kit="pro"]) .tf-sidebar.shell .tf-sidebar-foot,
+:where([data-kit="pro"]) .tf-sidebar.shell.collapsed .tf-sidebar-group + .tf-sidebar-group {
+  border-color: var(--frame-hover);
+}
+:where([data-kit="pro"]) .tf-sidebar.shell .tf-iconbtn-ghost {
+  color: var(--on-frame-muted);
+}
+:where([data-kit="pro"]) .tf-sidebar.shell .tf-iconbtn-ghost:hover {
+  background: var(--frame-hover);
+  color: var(--on-frame);
+}
+:where([data-kit="pro"]) .tf-sidebar.shell .tf-sidebar-head {
+  min-height: 44px;
+}
+
+/* UserMenu: the signed-in person, opening their account menu */
+:where([data-kit="pro"]) .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;
+}
+:where([data-kit="pro"]) .tf-usermenu.compact {
+  width: auto;
+  padding: 4px;
+}
+:where([data-kit="pro"]) .tf-usermenu:hover,
+:where([data-kit="pro"]) .tf-usermenu[aria-expanded="true"] {
+  background: var(--sidebar-accent);
+}
+:where([data-kit="pro"]) .tf-usermenu:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+:where([data-kit="pro"]) .tf-usermenu-avatar {
+  display: inline-flex;
+  flex: none;
+}
+:where([data-kit="pro"]) .tf-usermenu-text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-usermenu-name {
+  font: 500 13px/18px var(--font-sans);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:where([data-kit="pro"]) .tf-usermenu-mail {
+  font: 500 11px/14px var(--font-sans);
+  color: var(--ink-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+:where([data-kit="pro"]) .tf-sidebar.shell .tf-usermenu {
+  color: var(--on-frame);
+}
+:where([data-kit="pro"]) .tf-sidebar.shell .tf-usermenu:hover,
+:where([data-kit="pro"]) .tf-sidebar.shell .tf-usermenu[aria-expanded="true"] {
+  background: var(--frame-hover);
+}
+:where([data-kit="pro"]) .tf-sidebar.shell .tf-usermenu-mail {
+  color: var(--on-frame-muted);
+}
+:where([data-kit="pro"]) .tf-wssw.compact {
+  padding: 4px;
+}
+
+/* the bar that opens the sidebar as a drawer on phones */
+:where([data-kit="pro"]) .tf-sidebar-bar,
+:where([data-kit="pro"]) .tf-sidebar-scrim {
+  display: none;
+}
 @media (max-width: 760px) {
-  :where([data-kit="pro"]) .tf-sidebar {
-    width: 100%;
+  :where([data-kit="pro"]) .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);
   }
+  :where([data-kit="pro"]) .tf-sidebar-bar.attached {
+    border-radius: 0;
+    box-shadow: none;
+    background: var(--sidebar);
+    border-bottom: 1px solid var(--sidebar-border);
+  }
+  :where([data-kit="pro"]) .tf-sidebar-bar.shell {
+    min-height: 56px;
+    padding: 8px 8px 8px 0;
+    border-radius: 0;
+    box-shadow: none;
+    background: transparent;
+    color: var(--on-frame);
+  }
+  :where([data-kit="pro"]) .tf-sidebar-bar.shell .tf-iconbtn-ghost {
+    color: var(--on-frame);
+  }
+  :where([data-kit="pro"]) .tf-sidebar-bar > :not(.tf-iconbtn) {
+    min-width: 0;
+  }
+  :where([data-kit="pro"]) .tf-sidebar,
+  :where([data-kit="pro"]) .tf-sidebar.attached,
+  :where([data-kit="pro"]) .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);
+  }
+  :where([data-kit="pro"]) .tf-sidebar.shell {
+    background: var(--frame);
+  }
+  :where([data-kit="pro"]) .tf-sidebar.attached {
+    background: var(--sidebar);
+  }
+  :where([data-kit="pro"]) .tf-sidebar.open {
+    transform: none;
+    visibility: visible;
+    transition: transform var(--dur-base) var(--ease-out);
+  }
+  :where([data-kit="pro"]) .tf-sidebar-toggle {
+    display: none;
+  }
+  :where([data-kit="pro"]) .tf-sidebar-scrim {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-overlay);
+    background: var(--scrim-strong);
+    animation: tf-pro-fade var(--dur-base) var(--ease-out) both;
+  }
+}
+
+@media (max-width: 760px) {
   :where([data-kit="pro"]) .tf-navmenu-panel.with-feature {
     grid-template-columns: minmax(0, 1fr);
   }
@@ -12998,7 +13873,7 @@
 /* Tablet: asides move below the main column, nav labels and the page nav shrink to icons */
 @container tf-shell (max-width: 1180px) {
   :where([data-kit="pro"]) .tf-sheet:not(.tf-sheet-2):not(.tf-sheet-nav) {
-    grid-template-columns: 44px minmax(0, 1fr);
+    grid-template-columns: auto minmax(0, 1fr);
   }
   :where([data-kit="pro"]) .tf-sheet-nav.tf-sheet-aside {
     grid-template-columns: 208px minmax(0, 1fr);
@@ -13006,6 +13881,13 @@
   :where([data-kit="pro"]) .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 */
+  :where([data-kit="pro"]) .tf-sheet.tf-sheet-norail:not(.tf-sheet-2) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  :where([data-kit="pro"]) .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) */
   :where([data-kit="pro"]) .tf-main-dock {
     padding-bottom: 0;
@@ -13036,7 +13918,7 @@
 @container tf-shell (max-width: 1040px) {
   :where([data-kit="pro"]) .tf-sheet-nav,
   :where([data-kit="pro"]) .tf-sheet-nav.tf-sheet-aside {
-    grid-template-columns: 44px minmax(0, 1fr);
+    grid-template-columns: auto minmax(0, 1fr);
   }
   :where([data-kit="pro"]) .tf-subnav-eyebrow {
     display: none;
@@ -13133,6 +14015,21 @@
   :where([data-kit="pro"]) .tf-rail-group {
     flex-direction: row;
   }
+  /* on phones the rail is a row of icons, expanded or not */
+  :where([data-kit="pro"]) .tf-rail.expanded {
+    width: auto;
+  }
+  :where([data-kit="pro"]) .tf-rail.expanded .tf-rail-btn {
+    display: grid;
+    width: 40px;
+    padding: 0;
+  }
+  :where([data-kit="pro"]) .tf-rail.expanded .tf-rail-label {
+    display: none;
+  }
+  :where([data-kit="pro"]) .tf-rail.expanded .tf-dotcount {
+    position: absolute;
+  }
   :where([data-kit="pro"]) .tf-main {
     gap: var(--space-4);
   }
@@ -13224,6 +14121,56 @@
   max-width: 100%;
   overflow-x: auto;
 }
+/* Table stack: narrow boxes show every row as a card, each cell with its column label */
+:where([data-kit="pro"]) .tf-table-stackbox {
+  container: tf-table / inline-size;
+}
+@container tf-table (max-width: 600px) {
+  :where([data-kit="pro"]) .tf-table.stack thead {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+  :where([data-kit="pro"]) .tf-table.stack,
+  :where([data-kit="pro"]) .tf-table.stack tbody,
+  :where([data-kit="pro"]) .tf-table.stack tr {
+    display: block;
+  }
+  :where([data-kit="pro"]) .tf-table.stack tr {
+    padding: 8px 0;
+    border-bottom: 1px solid var(--line);
+  }
+  :where([data-kit="pro"]) .tf-table.stack tr:last-child {
+    border-bottom: 0;
+  }
+  :where([data-kit="pro"]) .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;
+  }
+  :where([data-kit="pro"]) .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);
+  }
+  :where([data-kit="pro"]) .tf-table.stack tbody tr:hover td {
+    background: transparent;
+  }
+}
 
 /* ── Phone: components ── */
 @media (max-width: 760px) {
@@ -13258,15 +14205,15 @@
     height: 52px;
   }
 
-  /* segmented controls and tabs scroll sideways when the labels do not fit */
-  :where([data-kit="pro"]) .tf-seg,
-  :where([data-kit="pro"]) .tf-tabs {
+  /* segmented controls and tabs scroll sideways when the labels do not fit (block ones shrink) */
+  :where([data-kit="pro"]) .tf-seg:not(.block),
+  :where([data-kit="pro"]) .tf-tabs:not(.tf-tabs-block) {
     max-width: 100%;
     overflow-x: auto;
     scrollbar-width: none;
   }
-  :where([data-kit="pro"]) .tf-seg-item,
-  :where([data-kit="pro"]) .tf-tab {
+  :where([data-kit="pro"]) .tf-seg:not(.block) .tf-seg-item,
+  :where([data-kit="pro"]) .tf-tabs:not(.tf-tabs-block) .tf-tab {
     flex: none;
   }
   :where([data-kit="pro"]) .tf-seg,
@@ -13415,6 +14362,40 @@
   }
 }
 
+/* AppShell with a sidebar on phones: the sidebar's bar on top of the frame, the sheet below */
+@media (max-width: 760px) {
+  :where([data-kit="pro"]) .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. */
+:where([data-kit="pro"]) .tf-tabs {
+  max-width: 100%;
+  box-sizing: border-box;
+}
+:where([data-kit="pro"]) .tf-seg-item,
+:where([data-kit="pro"]) .tf-tab,
+:where([data-kit="pro"]) .tf-togglegroup .tf-toggle {
+  min-width: 0;
+}
+:where([data-kit="pro"]) .tf-seg-label,
+:where([data-kit="pro"]) .tf-tab,
+:where([data-kit="pro"]) .tf-toggle-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* key hints mean nothing on touch screens */
+@media (pointer: coarse) {
+  :where([data-kit="pro"]) .tf-search .tf-kbd {
+    display: none;
+  }
+}
+
 /* 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 ─────────────
@@ -13940,11 +14921,13 @@
   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);
@@ -13975,6 +14958,32 @@
   grid-area: bottom;
   justify-self: center;
 }
+/* background controls and source notes: the free corner, clear of the panels and the dock */
+:where([data-kit="pro"]) .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;
+}
+:where([data-kit="pro"]) .tf-floating-controls > * {
+  pointer-events: auto;
+}
+:where([data-kit="pro"]) .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;
+}
+:where([data-kit="pro"]) .tf-floating-handle {
+  display: none;
+}
 :where([data-kit="pro"]) .tf-floating-ui > :is(.tf-floating-top, .tf-floating-bottom) {
   pointer-events: none;
 }
@@ -14000,6 +15009,75 @@
     gap: var(--space-3);
     padding: var(--space-3);
   }
+  :where([data-kit="pro"]) .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 */
+  :where([data-kit="pro"]) .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);
+  }
+  :where([data-kit="pro"]) .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);
+  }
+  :where([data-kit="pro"])[data-surface="glass"].tf-floating.has-sheet .tf-floating-end, :where([data-kit="pro"]) [data-surface="glass"].tf-floating.has-sheet .tf-floating-end {
+    background: var(--glass);
+    -webkit-backdrop-filter: var(--glass-filter);
+    backdrop-filter: var(--glass-filter);
+  }
+  :where([data-kit="pro"]) .tf-floating.has-sheet.sheet-full .tf-floating-end {
+    max-height: 75%;
+    overflow-y: auto;
+  }
+  :where([data-kit="pro"]) .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;
+  }
+  :where([data-kit="pro"]) .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);
+  }
+  :where([data-kit="pro"]) .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 */
+:where([data-kit="pro"])[data-surface="glass"] .tf-floating-attribution, :where([data-kit="pro"]) [data-surface="glass"] .tf-floating-attribution {
+  background: var(--glass);
+  -webkit-backdrop-filter: var(--glass-filter);
+  backdrop-filter: var(--glass-filter);
 }
 
 /* 09-motion.css */
@@ -14625,6 +15703,14 @@
   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 */
+:where([data-kit="pro"]) .tf-shell.tf-shell-sidebar {
+  padding: 0;
+  gap: var(--line-width);
+}
+:where([data-kit="pro"]) .tf-shell-sidebar > .tf-sidebar.shell {
+  border-radius: 0;
+}
 :where([data-kit="pro"]) .tf-topbar,
 :where([data-kit="pro"]) .tf-shell .tf-topbar {
   border-radius: 0;