@justai/cuts 0.138.0 → 0.140.0

package/src/Segmented.astro

@@ -105,67 +105,63 @@ const on = value && options.some((o) => o.value === value) ? value : options[0]?
 </div>
 
 <style>
-  /* Scoped by Astro's hash AND placed in the cascade: a persona overriding this never has to
-     out-specify it. See @justai/ui/tokens.css for the order, and for what deliberately stays out. */
-  @layer justai.components {
-    /* queries: segmented control styles · the chosen segment · ios segmented look
-       ONE TRACK, THE CHOSEN ONE RAISED. The track is recessed and the selection sits on top of it —
-       which is what makes a segmented control read as "these are the options" rather than as a row of
-       buttons where one happens to be coloured. */
-    .jseg {
-      /* ITS OWN BOX MODEL, not the consumer's. `width: 100%` plus a padding and a border comes out
-         SIX pixels wider than its parent unless something has already said `border-box` — and on a
-         bare page nothing has. Inheriting a reset is homework (law 1), and this is the shape that
-         homework takes when nobody notices: a control that fits everywhere it was tried. */
-      box-sizing: border-box;
-      display: inline-flex;
-      align-items: stretch;
-      gap: 2px;
-      padding: 2px;
-      border-radius: var(--radius-md);
-      background: var(--surface-2);
-      border: 1px solid var(--border);
-      /* A control is one tab stop. The roving tabindex below is what makes that true for the keyboard;
-         this is what makes it true for the eye. */
-      isolation: isolate;
-    }
-    /* queries: segmented control height · 44px touch target · the segments are too small
-       TWO SIZES, AND THE DIFFERENCE IS WHAT THE CONTROL IS.
-       `full` is a VIEW'S OWN SWITCH — a thumb's first target on the screen, so it meets the fleet's
-       44px like every row and every action does. `inline` is a TOOLBAR CHIP, sitting among other
-       chrome at chrome's size; forcing 44 there would make a toolbar taller than its content, which
-       is why iOS ships its own segmented controls shorter in exactly that position.
-       Found by a consumer's spec measuring 33px where its page promised 44 — a number the component
-       should have owned rather than each page discovering separately. */
-    .jseg[data-width="full"] { display: flex; width: 100%; }
-    .jseg[data-width="full"] .jseg-item { flex: 1; min-height: 44px; }
+  /* queries: segmented control styles · the chosen segment · ios segmented look
+     ONE TRACK, THE CHOSEN ONE RAISED. The track is recessed and the selection sits on top of it —
+     which is what makes a segmented control read as "these are the options" rather than as a row of
+     buttons where one happens to be coloured. */
+  .jseg {
+    /* ITS OWN BOX MODEL, not the consumer's. `width: 100%` plus a padding and a border comes out
+       SIX pixels wider than its parent unless something has already said `border-box` — and on a
+       bare page nothing has. Inheriting a reset is homework (law 1), and this is the shape that
+       homework takes when nobody notices: a control that fits everywhere it was tried. */
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: stretch;
+    gap: 2px;
+    padding: 2px;
+    border-radius: var(--radius-md);
+    background: var(--surface-2);
+    border: 1px solid var(--border);
+    /* A control is one tab stop. The roving tabindex below is what makes that true for the keyboard;
+       this is what makes it true for the eye. */
+    isolation: isolate;
+  }
+  /* queries: segmented control height · 44px touch target · the segments are too small
+     TWO SIZES, AND THE DIFFERENCE IS WHAT THE CONTROL IS.
+     `full` is a VIEW'S OWN SWITCH — a thumb's first target on the screen, so it meets the fleet's
+     44px like every row and every action does. `inline` is a TOOLBAR CHIP, sitting among other
+     chrome at chrome's size; forcing 44 there would make a toolbar taller than its content, which
+     is why iOS ships its own segmented controls shorter in exactly that position.
+     Found by a consumer's spec measuring 33px where its page promised 44 — a number the component
+     should have owned rather than each page discovering separately. */
+  .jseg[data-width="full"] { display: flex; width: 100%; }
+  .jseg[data-width="full"] .jseg-item { flex: 1; min-height: 44px; }
 
-    .jseg-item {
-      box-sizing: border-box;
-      display: inline-flex; align-items: center; justify-content: center; gap: 6px;
-      min-width: 0; padding: 7px 12px;
-      border: 0; border-radius: calc(var(--radius-md) - 3px);
-      background: transparent; color: var(--text-dim);
-      font: inherit; font-size: var(--fs-sm); font-weight: 500; line-height: 1.2;
-      cursor: pointer;
-      transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out);
-    }
-    .jseg-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .jseg-item :global(svg) { width: 16px; height: 16px; flex: none; }
+  .jseg-item {
+    box-sizing: border-box;
+    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+    min-width: 0; padding: 7px 12px;
+    border: 0; border-radius: calc(var(--radius-md) - 3px);
+    background: transparent; color: var(--text-dim);
+    font: inherit; font-size: var(--fs-sm); font-weight: 500; line-height: 1.2;
+    cursor: pointer;
+    transition: background 0.18s var(--ease-out), color 0.18s var(--ease-out);
+  }
+  .jseg-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .jseg-item :global(svg) { width: 16px; height: 16px; flex: none; }
 
-    /* THE CHOSEN ONE. `--surface` against a `--surface-2` track is the raise; the accent names it. */
-    .jseg-item[aria-checked="true"] {
-      background: var(--surface);
-      color: var(--accent);
-      box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
-    }
-    .jseg-item[aria-disabled="true"] { opacity: 0.45; cursor: default; }
-    .jseg-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+  /* THE CHOSEN ONE. `--surface` against a `--surface-2` track is the raise; the accent names it. */
+  .jseg-item[aria-checked="true"] {
+    background: var(--surface);
+    color: var(--accent);
+    box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
+  }
+  .jseg-item[aria-disabled="true"] { opacity: 0.45; cursor: default; }
+  .jseg-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 
-    /* Motion is never forced on somebody who asked it off. */
-    @media (prefers-reduced-motion: reduce) {
-      .jseg-item { transition: none; }
-    }
+  /* Motion is never forced on somebody who asked it off. */
+  @media (prefers-reduced-motion: reduce) {
+    .jseg-item { transition: none; }
   }
 </style>
 

package/src/Sheet.astro

@@ -187,260 +187,235 @@ const doneIsOurs = doneDefault || done === true;
 </dialog>
 
 <style>
-  /* Scoped by Astro's hash AND placed in the cascade: a persona overriding this never has to
-     out-specify it. See @justai/ui/tokens.css for the order, and for what deliberately stays out. */
-  @layer justai.components {
-    /* queries: the page scrolls behind an open sheet · background scroll lock · the sheet feels
-       inactive · scroll behind the dialog
-       THE PAGE BEHIND MUST NOT MOVE. `showModal()` makes the rest of the document INERT — it cannot
-       be clicked or focused — but it does not stop it SCROLLING, and a person swiping over the dim
-       watches the page slide under a sheet they thought they were using. The founder named the
-       feeling exactly: "aktif sheet sanki aktif degilmis hissi veriyor". Measured before fixing:
-       scrollY went 2244 → 1644 with a sheet open.
+  /* queries: the page scrolls behind an open sheet · background scroll lock · the sheet feels
+     inactive · scroll behind the dialog
+     THE PAGE BEHIND MUST NOT MOVE. `showModal()` makes the rest of the document INERT — it cannot
+     be clicked or focused — but it does not stop it SCROLLING, and a person swiping over the dim
+     watches the page slide under a sheet they thought they were using. The founder named the
+     feeling exactly: "aktif sheet sanki aktif degilmis hissi veriyor". Measured before fixing:
+     scrollY went 2244 → 1644 with a sheet open.
 
-       Set by script on <html> and reference-counted, because sheets nest: unlocking on the first
-       close would free the page while a second sheet is still up. */
-    :global(html[data-sheet-locked]) { overflow: hidden; }
+     Set by script on <html> and reference-counted, because sheets nest: unlocking on the first
+     close would free the page while a second sheet is still up. */
+  :global(html[data-sheet-locked]) { overflow: hidden; }
 
-    /* Trailing and level with the title, where a navigation bar's right-hand action lives — the one
-       place a thumb looks for "I am finished here". */
-    /* The back control mirrors Done across the header: same band, same weight, same restraint. It is
-       the accent colour because it is a NAVIGATION affordance rather than a destructive one, and the
-       chevron sits tight against the label the way iOS sets a back item. */
-    .sheet-back {
-      position: absolute; inset-inline-start: 12px; inset-block-start: 10px;
-      display: inline-flex; align-items: center; gap: 2px;
-      border: 0; background: none; padding: 6px 8px 6px 4px; cursor: pointer;
-      color: var(--accent); font: inherit; font-size: var(--fs-sm); font-weight: 500;
-      max-width: 42%;
-    }
-    .sheet-back[hidden] { display: none; }
-    .sheet-back svg { width: 20px; height: 20px; flex: none; }
-    .sheet-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-    .sheet-back:active { opacity: 0.6; }
-    .sheet-back:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
-
-    /* queries: sheet page transition · in-sheet push animation · the pages slide
-
-       Only one page is in the layout at a time, so the body's height is the CURRENT page's — which is
-       what makes the sheet grow and shrink around the content the way a navigation stack does. The
-       slide is 220ms and is skipped for reduced motion, where the pages simply swap. */
-    /* queries: the second sheet page appears BELOW the first · pushing shows both pages · the history
-       list is squeezed at the bottom · a page does not hide · consumer css beats the sheet
-       HIDING A PAGE IS A MECHANISM, NOT A SUGGESTION, so it is written where a class cannot outrank
-       it. `[data-sheet-page] { display: none }` is one attribute — specificity (0,1,0) — and any
-       consumer rule naming two classes beats it. files styles its detail page as `.pp .fd { display:
-       flex }`, which is ordinary and correct, and it meant the root page NEVER HID: pushing to the
-       versions drew them one under the other, so a person who tapped History got a cramped strip at
-       the bottom of a sheet still showing everything they had just left.
-       Qualified by the dialog it lives in, which raises this to (0,2,1) and keeps the rule honest —
-       a page outside a sheet is nobody's business here. */
-    @keyframes sheet-push { from { transform: translateX(18%); opacity: 0; } }
-    @keyframes sheet-pop { from { transform: translateX(-14%); opacity: 0; } }
-    @media (prefers-reduced-motion: reduce) {
-      :global([data-sheet-page].is-current), :global([data-sheet-page].is-popping) { animation: none; }
-    }
-
-    /* queries: cancel colour · should Cancel be tinted · cancel looks disabled · grey cancel ·
-       accent on the sheet bar · cancel vs done weight
-       MIRRORS DONE ACROSS THE BAR — same band, opposite edge, SAME TINT, LIGHTER WEIGHT.
-
-       This was grey (`--text-dim`), argued as "leaving without answering is an ordinary thing to do,
-       not the reason you came". True about the hierarchy, wrong about the means: on iOS a bar button
-       is TINTED, and grey text on a bar is what the platform uses to say UNAVAILABLE. Mail, Calendar
-       and Photos all put Cancel in the tint colour beside a bolder Done — the hierarchy is carried by
-       WEIGHT, 500 against 600, which is the one channel that does not collide with an existing
-       meaning. A dimmed way out reads as a door that will not open. */
-    .sheet-cancel {
-      position: absolute; inset-block-start: 0; inset-inline-start: 0;
-      background: none; border: 0; cursor: pointer; padding: 12px 16px;
-      font: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--accent);
-    }
-    .sheet-cancel:active { opacity: 0.6; }
-    .sheet-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
-    /* Cancel, Done and Back must never stand together — going back IS the way out of a pushed page,
-       so the leading slot belongs to whichever of the two is meaningful right now. */
-    .sheet:has(.sheet-back:not([hidden])) .sheet-cancel { display: none; }
-
-    .sheet-done {
-      position: absolute; inset-block-start: 0; inset-inline-end: 0;
-      background: none; border: 0; cursor: pointer; padding: 12px 16px;
-      font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--accent);
-    }
-    .sheet-done:active { opacity: 0.6; }
-    .sheet-done:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
+  /* Trailing and level with the title, where a navigation bar's right-hand action lives — the one
+     place a thumb looks for "I am finished here". */
+  /* The back control mirrors Done across the header: same band, same weight, same restraint. It is
+     the accent colour because it is a NAVIGATION affordance rather than a destructive one, and the
+     chevron sits tight against the label the way iOS sets a back item. */
+  .sheet-back {
+    position: absolute; inset-inline-start: 12px; inset-block-start: 10px;
+    display: inline-flex; align-items: center; gap: 2px;
+    border: 0; background: none; padding: 6px 8px 6px 4px; cursor: pointer;
+    color: var(--accent); font: inherit; font-size: var(--fs-sm); font-weight: 500;
+    max-width: 42%;
+  }
+  .sheet-back[hidden] { display: none; }
+  .sheet-back svg { width: 20px; height: 20px; flex: none; }
+  .sheet-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sheet-back:active { opacity: 0.6; }
+  .sheet-back:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
 
-    .sheet {
-      /* The dialog is the full-screen STAGE; the PANEL is the sheet.
-         `position: fixed` is written out rather than inherited: the UA gives a dialog
-         `position: absolute`, and an absolutely-positioned top-layer element resolves against the
-         initial containing block — which is document-relative, so on a scrolled page the sheet would
-         be placed at coordinates the visitor is no longer looking at. */
-      position: fixed;
-      inset: 0;
-      width: 100%;
-      height: 100%;
-      max-width: none;
-      max-height: none;
-      margin: 0;
-      padding: 0;
-      border: 0;
-      background: none;
-      overflow: visible;
-      /* The stage seats the panel on the BOTTOM edge, centred. It has to be written as a
-         display:none/display:flex pair, because a `display` of our own on a <dialog> would defeat the
-         UA rule that hides it while closed — a sheet permanently visible on every page. */
-      display: none;
-    }
-    .sheet[open] {
-      display: flex;
-      align-items: flex-end;
-      justify-content: center;
-    }
+  /* queries: sheet page transition · in-sheet push animation · the pages slide
 
-    /* Entry motion is written with @starting-style, not with an [open] toggle. A dialog enters from
-       display:none, and a property that had no previous computed value does not transition — the
-       "from" state has to be declared, or the sheet simply appears where it belongs with no travel at
-       all. That silent no-op is the class of failure the harness exists to catch. */
-    .sheet::backdrop {
-      background: rgba(0, 0, 0, 0.4);
-      -webkit-backdrop-filter: blur(3px);
-      backdrop-filter: blur(3px);
-      opacity: 1;
-      transition: opacity 0.3s var(--ease-out);
-    }
-    @starting-style {
-      .sheet[open]::backdrop { opacity: 0; }
-    }
+     Only one page is in the layout at a time, so the body's height is the CURRENT page's — which is
+     what makes the sheet grow and shrink around the content the way a navigation stack does. The
+     slide is 220ms and is skipped for reduced motion, where the pages simply swap. */
+  /* queries: the second sheet page appears BELOW the first · pushing shows both pages · the history
+     list is squeezed at the bottom · a page does not hide · consumer css beats the sheet
+     HIDING A PAGE IS A MECHANISM, NOT A SUGGESTION, so it is written where a class cannot outrank
+     it. `[data-sheet-page] { display: none }` is one attribute — specificity (0,1,0) — and any
+     consumer rule naming two classes beats it. files styles its detail page as `.pp .fd { display:
+     flex }`, which is ordinary and correct, and it meant the root page NEVER HID: pushing to the
+     versions drew them one under the other, so a person who tapped History got a cramped strip at
+     the bottom of a sheet still showing everything they had just left.
+     Qualified by the dialog it lives in, which raises this to (0,2,1) and keeps the rule honest —
+     a page outside a sheet is nobody's business here. */
+  :global(dialog [data-sheet-page]:not(.is-current):not(.is-popping)) { display: none; }
+  :global([data-sheet-page]) { display: none; }
+  :global([data-sheet-page].is-current) { display: block; animation: sheet-push 0.22s var(--ease-out) both; }
+  :global([data-sheet-page].is-popping) { display: block; animation: sheet-pop 0.22s var(--ease-out) both; }
+  @keyframes sheet-push { from { transform: translateX(18%); opacity: 0; } }
+  @keyframes sheet-pop { from { transform: translateX(-14%); opacity: 0; } }
+  @media (prefers-reduced-motion: reduce) {
+    :global([data-sheet-page].is-current), :global([data-sheet-page].is-popping) { animation: none; }
+  }
 
-    .sheet-panel {
-      position: relative;   /* the Done action is positioned against this */
-      display: flex;
-      flex-direction: column;
-      /* THE ONE SIZING RULE, and there is no media query anywhere in this file. The persona's column
-         is the active view, and its width is READ rather than repeated: `--column` is declared once in
-         @justai/ui and the page is sized from the same token. On a phone this is the whole screen; on a
-         desk it is the persona's own width, centred. It said 480 until 2026-08-04, in its own copy of
-         the number — so when the page became 768 the sheet stayed a phone's width on a tablet. */
-      /* THE FALLBACK IS NOT DECORATION. `--column` arrives with @justai/ui, and a page that uses this
-         cut without it — the harness's own sheet fixture is one — never sees the token at all. So the
-         literal here is the fleet's real width, not a historical one: it was 768 for an afternoon and
-         the sheet quietly rendered at 768 on a 640 fleet, which is how that was found. */
-      width: min(100%, var(--sheet-width, var(--column, 640px)));
-      /* dvh is Chromium 108+; the fallback above it survives because the build has targets. */
-      max-height: min(92vh, 100vh - 24px);
-      max-height: min(92dvh, 100dvh - 24px);
-      /* The material the fleet already agreed reads as legible glass (ConfirmSheet, 93%). */
-      background: color-mix(in srgb, var(--bg) 93%, transparent);
-      -webkit-backdrop-filter: blur(30px) saturate(1.5);
-      backdrop-filter: blur(30px) saturate(1.5);
-      border-top: 1px solid var(--border);
-      border-radius: 20px 20px 0 0;
-      /* Sliding UP with an overshoot spring would bounce the panel past the screen edge and back —
-         iOS decelerates into place instead — an overshoot spring belongs to something that scales,
-         not to something that travels to an edge. */
-      transform: translateY(0);
-      transition: transform 0.34s var(--ease-out);
-      will-change: transform;
-    }
-    @starting-style {
-      .sheet[open] .sheet-panel { transform: translateY(100%); }
-    }
-    /* The panel takes focus programmatically, so it must not wear a focus ring — it is a surface, not
-       a control. Focus a visitor MOVES lands on the rows, which do show one. */
-    .sheet-panel:focus { outline: none; }
-    /* While a finger is on it, the panel follows the finger with no transition — a 0.34s ease between
-       every pointermove is what makes a web sheet feel like a web page. */
-    .sheet[data-dragging] .sheet-panel { transition: none; }
+  /* queries: cancel colour · should Cancel be tinted · cancel looks disabled · grey cancel ·
+     accent on the sheet bar · cancel vs done weight
+     MIRRORS DONE ACROSS THE BAR — same band, opposite edge, SAME TINT, LIGHTER WEIGHT.
 
-    .sheet-grip {
-      flex: none;
-      display: grid;
-      place-items: center;
-      height: 28px;
-      cursor: grab;
-      touch-action: none; /* the browser must not claim the vertical gesture we are reading */
-    }
-    .sheet-grip span {
-      width: 36px;
-      height: 5px;
-      border-radius: 2.5px;
-      background: color-mix(in srgb, var(--text) 22%, transparent);
-    }
-    .sheet:not([data-dragging]) .sheet-grip:active { cursor: grabbing; }
+     This was grey (`--text-dim`), argued as "leaving without answering is an ordinary thing to do,
+     not the reason you came". True about the hierarchy, wrong about the means: on iOS a bar button
+     is TINTED, and grey text on a bar is what the platform uses to say UNAVAILABLE. Mail, Calendar
+     and Photos all put Cancel in the tint colour beside a bolder Done — the hierarchy is carried by
+     WEIGHT, 500 against 600, which is the one channel that does not collide with an existing
+     meaning. A dimmed way out reads as a door that will not open. */
+  .sheet-cancel {
+    position: absolute; inset-block-start: 0; inset-inline-start: 0;
+    background: none; border: 0; cursor: pointer; padding: 12px 16px;
+    font: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--accent);
+  }
+  .sheet-cancel:active { opacity: 0.6; }
+  .sheet-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
+  /* Cancel, Done and Back must never stand together — going back IS the way out of a pushed page,
+     so the leading slot belongs to whichever of the two is meaningful right now. */
+  .sheet:has(.sheet-back:not([hidden])) .sheet-cancel { display: none; }
 
-    .sheet-title {
-      flex: none;
-      margin: 0;
-      padding: 2px 20px 10px;
-      font-size: var(--fs-md);
-      font-weight: 700;
-      letter-spacing: -0.01em;
-      color: var(--text);
-      text-align: center;
-    }
+  .sheet-done {
+    position: absolute; inset-block-start: 0; inset-inline-end: 0;
+    background: none; border: 0; cursor: pointer; padding: 12px 16px;
+    font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--accent);
+  }
+  .sheet-done:active { opacity: 0.6; }
+  .sheet-done:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 8px; }
 
-    .sheet-body {
-      flex: 1 1 auto;
-      min-height: 0;
-      overflow-y: auto;
-      /* queries: the sheet scrolls sideways · horizontal scroll in a sheet · long text pushes the
-         panel wider · content wider than the sheet
-         NOTHING SCROLLS SIDEWAYS. A sheet is a column with a known width, and a person dragging it
-         left to read the end of a mime type has been handed a defect rather than a feature —
-         measured at 867px of content in a 390px panel, from one unbroken string.
+  .sheet {
+    /* The dialog is the full-screen STAGE; the PANEL is the sheet.
+       `position: fixed` is written out rather than inherited: the UA gives a dialog
+       `position: absolute`, and an absolutely-positioned top-layer element resolves against the
+       initial containing block — which is document-relative, so on a scrolled page the sheet would
+       be placed at coordinates the visitor is no longer looking at. */
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    overflow: visible;
+    /* The stage seats the panel on the BOTTOM edge, centred. It has to be written as a
+       display:none/display:flex pair, because a `display` of our own on a <dialog> would defeat the
+       UA rule that hides it while closed — a sheet permanently visible on every page. */
+    display: none;
+  }
+  .sheet[open] {
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+  }
 
-         Two halves, and both are needed: `overflow-x` stops the panel itself from becoming a
-         horizontal scroller, and `overflow-wrap` makes a long unbroken token WRAP instead of being
-         silently clipped by it. Content that is genuinely wide — a table, a code block — carries its
-         own scroller; the sheet never becomes one. */
-      overflow-x: hidden;
-      overflow-wrap: anywhere;
-      /* A scroll that reaches its end must not become the page's scroll behind the sheet. */
-      overscroll-behavior: contain;
-      -webkit-overflow-scrolling: touch;
-      /* The top padding is not spacing, it is CLEARANCE. This is a scroll container, so it clips at
-         its own edge — and a focused first child draws its ring OUTSIDE its border box, which lands
-         exactly on that edge and gets cut. The founder saw it on the picker's search field: the ring
-         reads as sliced along the top. 6px is a focus ring's width plus its offset, which is the only
-         number that makes the clipping impossible rather than unlikely. */
-      padding: 6px 12px max(14px, env(safe-area-inset-bottom));
-    }
+  /* Entry motion is written with @starting-style, not with an [open] toggle. A dialog enters from
+     display:none, and a property that had no previous computed value does not transition — the
+     "from" state has to be declared, or the sheet simply appears where it belongs with no travel at
+     all. That silent no-op is the class of failure the harness exists to catch. */
+  .sheet::backdrop {
+    background: rgba(0, 0, 0, 0.4);
+    -webkit-backdrop-filter: blur(3px);
+    backdrop-filter: blur(3px);
+    opacity: 1;
+    transition: opacity 0.3s var(--ease-out);
+  }
+  @starting-style {
+    .sheet[open]::backdrop { opacity: 0; }
+  }
 
-    /* The medium detent — half height, promoted to large by a pull upwards. It applies at EVERY width
-       now, because the gesture that changes it does too: the grabber is never hidden. */
-    .sheet[data-detent="medium"]:not([data-expanded]) .sheet-panel { max-height: min(56dvh, 100dvh - 24px); }
+  .sheet-panel {
+    position: relative;   /* the Done action is positioned against this */
+    display: flex;
+    flex-direction: column;
+    /* THE ONE SIZING RULE, and there is no media query anywhere in this file. The persona's column
+       is the active view, and its width is READ rather than repeated: `--column` is declared once in
+       @justai/ui and the page is sized from the same token. On a phone this is the whole screen; on a
+       desk it is the persona's own width, centred. It said 480 until 2026-08-04, in its own copy of
+       the number — so when the page became 768 the sheet stayed a phone's width on a tablet. */
+    /* THE FALLBACK IS NOT DECORATION. `--column` arrives with @justai/ui, and a page that uses this
+       cut without it — the harness's own sheet fixture is one — never sees the token at all. So the
+       literal here is the fleet's real width, not a historical one: it was 768 for an afternoon and
+       the sheet quietly rendered at 768 on a 640 fleet, which is how that was found. */
+    width: min(100%, var(--sheet-width, var(--column, 640px)));
+    /* dvh is Chromium 108+; the fallback above it survives because the build has targets. */
+    max-height: min(92vh, 100vh - 24px);
+    max-height: min(92dvh, 100dvh - 24px);
+    /* The material the fleet already agreed reads as legible glass (ConfirmSheet, 93%). */
+    background: color-mix(in srgb, var(--bg) 93%, transparent);
+    -webkit-backdrop-filter: blur(30px) saturate(1.5);
+    backdrop-filter: blur(30px) saturate(1.5);
+    border-top: 1px solid var(--border);
+    border-radius: 20px 20px 0 0;
+    /* Sliding UP with an overshoot spring would bounce the panel past the screen edge and back —
+       iOS decelerates into place instead — an overshoot spring belongs to something that scales,
+       not to something that travels to an edge. */
+    transform: translateY(0);
+    transition: transform 0.34s var(--ease-out);
+    will-change: transform;
+  }
+  @starting-style {
+    .sheet[open] .sheet-panel { transform: translateY(100%); }
+  }
+  /* The panel takes focus programmatically, so it must not wear a focus ring — it is a surface, not
+     a control. Focus a visitor MOVES lands on the rows, which do show one. */
+  .sheet-panel:focus { outline: none; }
+  /* While a finger is on it, the panel follows the finger with no transition — a 0.34s ease between
+     every pointermove is what makes a web sheet feel like a web page. */
+  .sheet[data-dragging] .sheet-panel { transition: none; }
 
-    @media (prefers-reduced-motion: reduce) {
-      .sheet-panel, .sheet::backdrop { transition: none; }
-      .sheet-panel { transform: none; opacity: 1; }
-    }
+  .sheet-grip {
+    flex: none;
+    display: grid;
+    place-items: center;
+    height: 28px;
+    cursor: grab;
+    touch-action: none; /* the browser must not claim the vertical gesture we are reading */
   }
+  .sheet-grip span {
+    width: 36px;
+    height: 5px;
+    border-radius: 2.5px;
+    background: color-mix(in srgb, var(--text) 22%, transparent);
+  }
+  .sheet:not([data-dragging]) .sheet-grip:active { cursor: grabbing; }
 
-  /* queries: why is this rule outside the layer · unlayered css · a mechanism a consumer must not
-     switch off · component invariant vs appearance
+  .sheet-title {
+    flex: none;
+    margin: 0;
+    padding: 2px 20px 10px;
+    font-size: var(--fs-md);
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    color: var(--text);
+    text-align: center;
+  }
 
-     OUTSIDE THE LAYER, AND THAT IS THE WHOLE POINT.
+  .sheet-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    /* queries: the sheet scrolls sideways · horizontal scroll in a sheet · long text pushes the
+       panel wider · content wider than the sheet
+       NOTHING SCROLLS SIDEWAYS. A sheet is a column with a known width, and a person dragging it
+       left to read the end of a mime type has been handed a defect rather than a feature —
+       measured at 867px of content in a 390px panel, from one unbroken string.
 
-     Everything above is this component's APPEARANCE, and a persona overriding it should not have to
-     out-specify anything — that is what `@layer justai.components` buys. These four rules are not
-     appearance. They are the mechanism that makes a sheet a navigation stack rather than a list, and
-     in CSS an unlayered rule beats every layered one, whoever wrote it.
+       Two halves, and both are needed: `overflow-x` stops the panel itself from becoming a
+       horizontal scroller, and `overflow-wrap` makes a long unbroken token WRAP instead of being
+       silently clipped by it. Content that is genuinely wide — a table, a code block — carries its
+       own scroller; the sheet never becomes one. */
+    overflow-x: hidden;
+    overflow-wrap: anywhere;
+    /* A scroll that reaches its end must not become the page's scroll behind the sheet. */
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+    /* The top padding is not spacing, it is CLEARANCE. This is a scroll container, so it clips at
+       its own edge — and a focused first child draws its ring OUTSIDE its border box, which lands
+       exactly on that edge and gets cut. The founder saw it on the picker's search field: the ring
+       reads as sliced along the top. 6px is a focus ring's width plus its offset, which is the only
+       number that makes the clipping impossible rather than unlikely. */
+    padding: 6px 12px max(14px, env(safe-area-inset-bottom));
+  }
 
-     The fight was already had once with specificity: `[data-sheet-page] { display: none }` is (0,1,0)
-     and `files` styles its detail page `.pp .fd { display: flex }`, which is ordinary and correct —
-     the root page never hid, and pushing to the versions drew both, one under the other. Layering
-     these would hand that defect straight back, which is how it was found again: the spec named "a
-     consumer's own class cannot keep a page in the layout" failed the moment they went in.
+  /* The medium detent — half height, promoted to large by a pull upwards. It applies at EVERY width
+     now, because the gesture that changes it does too: the grabber is never hidden. */
+  .sheet[data-detent="medium"]:not([data-expanded]) .sheet-panel { max-height: min(56dvh, 100dvh - 24px); }
 
-     THE RULE THIS IS AN INSTANCE OF: a component's appearance is the consumer's to override; an
-     invariant a stylesheet can switch off is not an invariant. Across fifteen components and 1,539
-     lines of CSS, this is the only block that needed to be here — which is worth knowing, because it
-     means the distinction is cheap to hold rather than a judgement on every rule. */
-    :global(dialog [data-sheet-page]:not(.is-current):not(.is-popping)) { display: none; }
-    :global([data-sheet-page]) { display: none; }
-    :global([data-sheet-page].is-current) { display: block; animation: sheet-push 0.22s var(--ease-out) both; }
-    :global([data-sheet-page].is-popping) { display: block; animation: sheet-pop 0.22s var(--ease-out) both; }
+  @media (prefers-reduced-motion: reduce) {
+    .sheet-panel, .sheet::backdrop { transition: none; }
+    .sheet-panel { transform: none; opacity: 1; }
+  }
 </style>
 
   <script>