screengraft 0.65.0 → 0.67.0

package/ui/index.html

@@ -68,14 +68,32 @@
        polished Button matrix (4:14): hover's border is border/edge-mid, and
        pressed keeps border/edge rather than dimming to edge-low — pressing a
        control must not make it look unavailable. Both had drifted. */
-    --btn-hover:#333337; --btn-hover-edge:#494a50;
-    --btn-press:#1c1c20; --btn-press-edge:#3a3b41;
+    /* Re-read 20 Sep 2026 and the family is now COMPLETE: rest had no token
+       of its own, so the button borrowed --raise/--edge and had quietly
+       diverged from button/secondary/container|border/default. Every value
+       below is read straight off 4:14. --btn-rest-edge (#46464e) is the border
+       every raised control wears — the Default button at rest AND pressed, and
+       the segmented track — which is why it is one token used in three places
+       rather than a new step in the --edge ladder.
+       NOTE: hover's surface (#2b2b30) is now a hair DARKER than rest
+       (#2b2c31), so hover is carried almost entirely by the border stepping to
+       edge-mid. That is what the file says; it looks like the hover variant
+       kept the old rest value when rest moved. Flagged for the design file. */
+    --btn-rest:#2b2c31;  --btn-rest-edge:#46464e;
+    --btn-hover:#2b2b30; --btn-hover-edge:#494a50;
+    --btn-press:#1c1c20; --btn-press-edge:#46464e;
     /* Accent disabled keeps the label READABLE rather than fading the whole
        button — the Button component in Figma says so explicitly. */
     /* Re-read 13 Sep 2026: primary/container/disabled is the SOLID press
        colour with the solid stroke and the solid label — the design fades
        nothing here, it recesses. Was three alpha variants. */
-    --acc-dis:#bb2b00; --acc-dis-edge:#ff6833; --acc-dis-ink:#fbf9f9;
+    /* Re-read 20 Sep 2026: primary/container/disabled stepped down again,
+       #bb2b00 -> #992800, and its border is now the accent itself rather than
+       the lighter stroke. #bb2b00 is primary/container/PRESSED only, which is
+       --acc-press — the two had been sharing one value and the pressed state
+       was borrowing --acc-dis-edge for its border, so it now has its own. */
+    --acc-dis:#992800; --acc-dis-edge:#f23b0d; --acc-dis-ink:#fbf9f9;
+    --acc-press-edge:#f23b0d;
     /* Strokes are 0.5px throughout the component sets (button, chip, input
        chip, segmented, switch, button group). A half pixel snaps to one device
        pixel on any screen, so it never vanishes; on a Retina Mac it is the
@@ -159,7 +177,15 @@
     --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s9:48px;
     /* 120ms originally, per the visual-language notes. asked for a bit
        slower on 5 Sep — one token, so retuning is a one-line change. */
-    --t:180ms cubic-bezier(.2,0,0,1);
+    --t-dur:180ms;                 /* the duration alone, for delays */
+    /* The source chip's grow/collapse runs slower than the app's general
+       motion on purpose: it is a shape change across ~100px, not a state
+       flip, and at 180ms it read as a snap rather than a movement. The cross
+       that follows it is quicker, and waits out this duration first. Tune
+       these two and the whole chip sequence moves with them. */
+    --t-chip:260ms;
+    --t-chip-cross:150ms;
+    --t:var(--t-dur) cubic-bezier(.2,0,0,1);
     --t-pop:220ms cubic-bezier(.2,0,0,1);   /* popovers travel further */
     /* Every control animates the SAME four properties on the same curve. Kept as
        one token because the failure mode here is a control that transitions its
@@ -185,20 +211,49 @@
        grid-template-columns:minmax(0,1fr);min-height:0;
        padding-bottom:32px;background:var(--bg)}
 
+  /* The bottom rule is an INSET SHADOW, not a border, for the same reason the
+     dock's is — and here it is not only about height, it is about which device
+     pixel things land on. A 1px border under box-sizing:border-box leaves a
+     55px content box; centring the 32px chip row in an ODD height puts it at
+     y=11.5. The chips carry a 0.5px stroke (--bw), which only survives because
+     a half CSS pixel snaps to one whole device pixel — and that assumption
+     holds only when the element's EDGES sit on whole device pixels. At 11.5 the
+     bottom edge straddles the boundary, renders faint or vanishes at dpr 2, and
+     the chip reads as pressed. Reported 20 Sep with a screenshot of exactly
+     that. As an inset shadow the content box is the full 56, the row centres on
+     y=12, and the rule is drawn in the same place it was before. */
   .topbar{display:flex;align-items:center;gap:8px;padding:0 12px 0 var(--s4);height:56px;
-          background:var(--card);border-bottom:1px solid var(--line);
-          box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 1px 0 rgba(0,0,0,.25)}
+          background:var(--card);
+          box-shadow:inset 0 1px 0 rgba(255,255,255,.04), inset 0 -1px 0 var(--line),
+                     0 1px 0 rgba(0,0,0,.25)}
   /* A nowrap flex row whose children keep min-width:auto cannot shrink
      below their content, so at 742px Save and Send to Claude sat at x=750..885
      — outside the viewport and unclickable. The chips carry a filename and are
      the part that should give; the actions are fixed-size and must not. */
   .topbar > *{min-width:0}
+  /* overflow:hidden clips the horizontal only in spirit — CSS couples the
+     axes — but nothing needs vertical room any more now that pressed does not
+     move. A long filename is still the part that gives. */
   .tb-chips{overflow:hidden}
-  .tb-actions{flex:none}
+  /* Figma 15:108: three groups at 16px — the format control, the save PAIR,
+     and the rail toggle — with 8px inside the pair. Save and Send to Claude
+     belong together (272:1517 frames them); the toggle does not. */
+  .tb-actions{flex:none;display:flex;align-items:center;gap:var(--s4)}
+  .tb-save{display:flex;align-items:center;gap:var(--s2)}
   .tb-left{display:flex;align-items:center;gap:var(--s9)}
   .tb-chips{display:flex;align-items:center;gap:var(--s2)}
   .tb-arrow{color:var(--mute)}
-  .tb-actions{display:flex;align-items:center;gap:var(--s2)}
+  /* Icon-only, but NOT squeezed: Figma 272:1494 is a secondary button keeping
+     the base 12px side padding around a 16px icon, so 40x28. An earlier version
+     of this forced it to 28 square and read as a different species from the
+     buttons beside it. */
+  .iconbtn{flex:none;display:inline-flex;align-items:center;justify-content:center}
+  .iconbtn svg{display:block;width:16px;height:16px}
+  /* Two glyphs, one button (icons / sidebar-opened 272:1489, sidebar-closed
+     272:1463). Each shows the rail's CURRENT state in the width of its two
+     panels, while its chevron points the way the next click will move it. */
+  #railBtn .i-closed,.app.railoff #railBtn .i-open{display:none}
+  .app.railoff #railBtn .i-closed{display:block}
   /* Mona Sans is the brand face in Figma; it is not installed on a stock Mac,
      so it degrades to the system UI face rather than to a serif. */
   /* The wordmark ships WITH the plugin. Mona Sans is the brand face in Figma and
@@ -237,13 +292,20 @@
      ------------------------------------------------------------------ */
   /* Both sizes are radius/sm (6px) — re-read from Button 4:14 on 13 Sep 2026,
      where every variant carries the same radius. Md had been 8 since 11 Sep. */
-  button{font:inherit;color:var(--ink);background:var(--raise);
-         border:var(--bw) solid var(--edge);border-radius:var(--r-sm);
+  button{font:inherit;color:var(--ink);background:var(--btn-rest);
+         border:var(--bw) solid var(--btn-rest-edge);border-radius:var(--r-sm);
          padding:0 var(--s3);height:28px;font-size:13px;cursor:pointer;
          transition:var(--t-all), transform var(--t)}
   button:hover{background:var(--btn-hover);border-color:var(--btn-hover-edge)}
+  /* Pressed does NOT move. It used to carry translateY(.5px) — half a CSS
+     pixel, so one device pixel at 2x — and that read as the button jumping on
+     every click rather than depressing. It also put the button's own 0.5px
+     stroke on a half-pixel boundary, and inside any clipping parent it pushed
+     the bottom edge out of the box: the top-bar chips visibly lost their
+     bottom stroke while held (20 Sep). The darker surface and the darker
+     border already say pressed, and they say it without motion. */
   button:active{background:var(--btn-press);border-color:var(--btn-press-edge);
-                box-shadow:none;transform:translateY(.5px)}
+                box-shadow:none}
   button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
   /* Default/Disabled RECESSES: surface/raise-low with border/edge-low, label at
      text/faint x 50%. It used to keep the raised surface and dim only the label.
@@ -268,22 +330,25 @@
 
   /* Primary. The accent means exactly one thing: the next action, so only one
      of these is lit at a time (see the accent hand-off in the JS). */
+  /* Weight 400, not 600: every one of the sixteen Button variants in 4:14 is
+     SF Pro Regular. The bold primary was a carry-over from before the matrix
+     existed, and it made the accent shout twice. */
   button.primary{background:var(--acc-btn-rest);color:var(--acc-ink);
-                 border-color:var(--acc-stroke);font-weight:600;box-shadow:none}
+                 border-color:var(--acc-stroke);font-weight:400;box-shadow:none}
   button.primary:hover{background:var(--acc);border-color:var(--acc-stroke)}
-  button.primary:active{background:var(--acc-press);border-color:var(--acc-dis-edge);
-                        transform:translateY(.5px)}
-  /* An accent-family button that is enabled but is NOT the next action reads
-     as an ordinary neutral control. */
-  button.accent:not(:disabled):not(.primary){
-    background:var(--raise); color:var(--ink); border-color:var(--edge);
-    font-weight:400}
-  /* Radius is deliberately NOT restated in these three rules any more. It is the
-     base button's, so .sm keeps winning on size — an accent .sm button used to
-     be handed --r-md by specificity alone. */
-  button.accent:disabled,button.primary:disabled{
+  button.primary:active{background:var(--acc-press);border-color:var(--acc-press-edge)}
+  /* The `.accent` class is gone (20 Sep 2026). Save and Send to Claude wore it
+     so that they could be accent-coloured while DISABLED — which is exactly
+     backwards: before anything is loaded the top bar showed two lit orange
+     buttons offering actions that could not be taken. They are ordinary
+     Default buttons now and gain `.primary` only when they genuinely are the
+     next action, which is the rule the Button component states.
+     Radius is deliberately NOT restated below. It is the base button's, so .sm
+     keeps winning on size — an accent .sm button used to be handed --r-md by
+     specificity alone. */
+  button.primary:disabled{
     background:var(--acc-dis); border-color:var(--acc-dis-edge);
-    color:var(--acc-dis-ink); font-weight:600; box-shadow:none; opacity:1}
+    color:var(--acc-dis-ink); font-weight:400; box-shadow:none; opacity:1}
 
   /* ------------------------------------------------------------------
      Render, while it is rendering: the button IS the progress bar.
@@ -372,13 +437,6 @@
      column and read like a segmented *bar*. justify-self:start is what
      actually holds it to its content width. */
 
-  /* A stepper should look joined. */
-  /* Stepper (Figma 28:816). NOT a bespoke control: it is ordinary Default
-     buttons butted together, so every state — hover, pressed, disabled — is
-     the button's own. The previous version was borderless, transparent and
-     24px tall, which is exactly why +/- read as a different species from the
-     buttons beside them. Only the corner radii and the shared middle border
-     are special. */
   /* ------------------------------------------------------------------
      `hidden` must actually hide. THREE components have now needed this
      patched one at a time — .cvbar, #outImg/#outVid, and the format
@@ -394,16 +452,6 @@
      ------------------------------------------------------------------ */
   [hidden]{display:none !important}
 
-  .stepper{display:inline-flex;align-items:center}
-  .stepper button{border-radius:0}
-  .stepper button:first-child{border-top-left-radius:var(--r-sm);border-bottom-left-radius:var(--r-sm)}
-  .stepper button:last-child{border-top-right-radius:var(--r-sm);border-bottom-right-radius:var(--r-sm)}
-  /* One border between neighbours rather than two stacked. */
-  .stepper button + button{margin-left:calc(-1 * var(--bw))}
-  .stepper button:hover,.stepper button:focus-visible{position:relative;z-index:1}
-  /* The dock's stepper is Sm height but keeps 12px padding (Figma 8:31/8:33). */
-  .dock-step button{padding:0 var(--s3)}
-
   /* ------------------------------------------------------------------
      Segmented control (Figma 84:177). NOT a stepper: a stepper is ordinary
      buttons butted together, which is right for -/+ but wrong for a choice —
@@ -425,37 +473,45 @@
      the thumb is 24px tall at radius/xs. Hover lifts the thumb to raise-hi
      and the track's stroke to edge-mid; pressed drops the thumb to raise-mid. */
   .seg{display:inline-flex;align-items:center;gap:2px;padding:2px;
-       background:var(--raise-low);border:var(--bw) solid var(--edge);
+       background:var(--raise-low);border:var(--bw) solid var(--btn-rest-edge);
        border-radius:var(--r-sm);transition:var(--t-all)}
   .seg:hover{border-color:var(--edge-mid)}
   .seg:active{border-color:var(--edge-mid)}
   /* The track carries the border and the elevation, so a segment is a label
      until it is selected: no border, no shadow, no lift on press. */
-  .seg button{height:24px;padding:0 11px;font-size:12px;border-radius:var(--r-xs);
+  /* 70px each (Figma 84:161, so 2+70+2+70+2 = 146): a two-way choice reads as
+     one control rather than two adjacent buttons, and equal halves are most of
+     what sells that. min-width rather than width so the ghost below still
+     governs if a label ever outgrows 70. */
+  .seg button{height:24px;min-width:70px;padding:0 11px;font-size:12px;border-radius:var(--r-xs);
               background:transparent;border:0;box-shadow:none;color:var(--mute);
               font-weight:400;display:inline-flex;flex-direction:column;
               align-items:center;justify-content:center}
-  /* Each segment is as wide as its label at the SELECTED weight, whichever
-     weight it is showing. Without this the control reflowed on every switch:
-     600 is wider than 400, so selecting "ProRes" grew that segment, and the
-     whole control — left edge included — moved (reported 12 Sep 2026).
-     A zero-height ghost of the label at 600 sits under the visible one and
-     sets the width; `data-label` carries the text. Not padding. */
-  .seg button::after{content:attr(data-label);font-weight:600;height:0;
-                     overflow:hidden;visibility:hidden;pointer-events:none}
+  /* There used to be a zero-height ghost of the label at weight 600 here,
+     sizing each segment to its SELECTED width so the control did not reflow
+     when the selection moved (600 is wider than 400, so selecting "ProRes"
+     grew that segment and the whole control shifted — reported 12 Sep 2026).
+     The ghost is gone because its cause is: 84:177 has BOTH segments at
+     regular, selected and not, so no width changes on selection and the
+     `data-label` attributes in the markup are now inert. Selection is carried
+     by the thumb surface and the label colour, which is the stronger signal
+     anyway. Put the ghost back if a weight difference ever returns. */
   .seg button:hover{background:transparent;color:var(--ink)}
   .seg button:active{background:transparent;transform:none}
   /* The thumb. Its three surfaces are the Default button's own, which is the
      point of the component: one raised thing, behaving like every other raised
      thing on the page. */
-  .seg button.sel{background:var(--raise);color:var(--ink);font-weight:600}
+  .seg button.sel{background:var(--btn-rest);color:var(--ink);font-weight:400}
   .seg button.sel:hover{background:var(--raise-hi)}
-  .seg button.sel:active{background:var(--raise-mid);transform:none}
-  /* A toggle in the strip head. On = the raised surface every selected thing
-     on this page has (the segmented thumb, the device chip), off = a label. */
-  .striphead button[aria-pressed],#dofBoth[aria-pressed]{background:transparent;border-color:transparent;box-shadow:none;color:var(--mute)}
-  .striphead button[aria-pressed]:hover,#dofBoth[aria-pressed]:hover{color:var(--ink)}
-  .striphead button[aria-pressed="true"],#dofBoth[aria-pressed="true"]{background:var(--raise);border-color:var(--edge);color:var(--ink);font-weight:600}
+  .seg button.sel:active{background:var(--btn-hover);transform:none}
+  /* A text toggle that reads as a label until it is on. On = the raised
+     surface every selected thing on this page has (the segmented thumb, the
+     device chip). The edge view's Contrast toggle used to share this rule; it
+     is a Segment Button inside the strip's own zoom group now (Figma 8:28) and
+     takes .segbtn[aria-pressed="true"] instead. */
+  #dofBoth[aria-pressed]{background:transparent;border-color:transparent;box-shadow:none;color:var(--mute)}
+  #dofBoth[aria-pressed]:hover{color:var(--ink)}
+  #dofBoth[aria-pressed="true"]{background:var(--raise);border-color:var(--edge);color:var(--ink);font-weight:600}
   /* Input chip (Figma 5:14 / 5:20). Surface and shadow are declared here rather
    than inherited from the base button rule, so the filled state is explicit and
    the .is-empty override below has something definite to override.
@@ -467,15 +523,30 @@
      chosen source reads as a selection. Empty = its own recessed, dashed
      surface with a mid-grey label. Active = a file is being dragged OVER the
      chip: accent stroke and label on the empty one, accent fill on the filled. */
-  .inputchip{display:inline-flex;align-items:center;gap:var(--s2);max-width:220px;
+  /* The gap lives on the THUMB as a margin, not here as a flex gap: a gap
+     survives its neighbour collapsing to zero width, so an empty chip would
+     keep 8px of nothing between a thumbnail that is not there and its label.
+     As a margin it collapses with the thumb. The chip's own width is auto, so
+     it follows the thumb frame by frame — the only thing it animates itself is
+     the padding it gives back when the clear button leaves. */
+  .inputchip{display:inline-flex;align-items:center;max-width:220px;
              height:32px;padding:0 12px 0 6px;border-radius:999px;color:var(--ink);
-             background:var(--raise-hi);border:var(--bw) solid var(--edge-hi)}
+             background:var(--raise-hi);border:var(--bw) solid var(--edge-hi);
+             transition:var(--t-all), padding var(--t-chip) cubic-bezier(.2,0,0,1),
+                        width var(--t-chip) cubic-bezier(.2,0,0,1)}
   .inputchip:hover{background:var(--raise-highest);border-color:var(--edge-hi)}
   .inputchip:active{background:var(--raise-mid);border-color:var(--edge-hi)}
   .inputchip.over,.inputchip.over:hover{background:var(--acc);border-color:var(--acc-stroke);
                                         color:var(--acc-ink)}
-  .inputchip .sw{width:22px;height:22px;border-radius:999px;flex:none;
-                 background:var(--sunk);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
+  .inputchip .sw{width:22px;height:22px;margin-right:var(--s2);border-radius:999px;flex:none;
+                 background:var(--sunk);box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
+                 /* Scale from the left edge so the disc grows INTO the chip and
+                    the label is pushed, rather than both sliding apart. */
+                 transform-origin:left center;
+                 transition:width var(--t-chip) cubic-bezier(.2,0,0,1),
+                            margin-right var(--t-chip) cubic-bezier(.2,0,0,1),
+                            transform var(--t-chip) cubic-bezier(.2,0,0,1),
+                            opacity var(--t-chip) cubic-bezier(.2,0,0,1)}
   .inputchip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
   /* Empty is the SAME box as filled — 32px tall, same padding, same 22px
      avatar. Only the surface, border style and label colour change. It was
@@ -484,9 +555,27 @@
                    border-color:var(--edge);color:var(--inchip-ink);box-shadow:none}
   .inputchip.is-empty:hover{background:var(--float);border-color:var(--edge-mid)}
   .inputchip.is-empty:active{background:var(--raise-low);border-color:var(--edge-mid)}
-  .inputchip.is-empty.over,.inputchip.is-empty.over:hover{background:var(--float);
-                   border-color:var(--acc-stroke);color:var(--acc-stroke)}
-  .inputchip.is-empty .sw{box-shadow:inset 0 0 0 1px var(--line)}
+  /* Active on the UNSELECTED chip -- popover open, or a file dragged over it.
+     Re-read from Input chip 159:4117 on 20 Sep 2026: the stroke is grey
+     (input-chip/unselected/border/pressed, #494a50) and the surface is
+     raise-low, not the accent. The accent stroke shipped here was the one
+     place a control that is merely READY wore the colour reserved for "this
+     is the next action" -- and with an empty chip nothing has been chosen
+     yet, so it was promising an outcome the drop had not produced. The label
+     stays accent: that is what the file says, and one accent-coloured word
+     inside a grey pill reads as a target rather than a result.
+     The FILLED chip's Active state is unchanged and still solid accent
+     (input-chip/filled/container|border/active), which the file confirms. */
+  .inputchip.is-empty.over,.inputchip.is-empty.over:hover{background:var(--raise-low);
+                   border-color:var(--edge-mid);color:var(--acc-stroke)}
+  /* Empty shows NO thumbnail — there is nothing to show, and a placeholder
+     disc read as a broken image. It collapses to zero width AND zero scale:
+     the width is what moves the label and grows the chip, the scale is what
+     makes it look like the picture arrives rather than the box stretching. */
+  .inputchip.is-empty .sw{width:0;margin-right:0;transform:scale(0);opacity:0;
+                          background:none;box-shadow:none}
+  /* No thumb to hug, so the label gets the same 12px both sides. */
+  .inputchip.is-empty{padding-left:12px}
   /* The clear control is a SIBLING of the chip in the markup, not a child:
      the chip is one <button>, and a button inside a button is invalid HTML
      that browsers repair unpredictably. It is drawn INSIDE the pill though --
@@ -503,10 +592,29 @@
      the root. */
   .chipwrap{position:relative;display:inline-flex;min-width:0;z-index:52}
   .chipwrap .inputchip:not(.is-empty){padding-right:30px}
-  .chipclear{position:absolute;right:5px;top:50%;transform:translateY(-50%);
+  /* It waits for its space. The chip spends --t-dur growing and opening the
+     30px of right padding this sits in; only then does the cross fade and
+     scale in, so it never appears on top of a label still sliding underneath
+     it. Leaving is the reverse and immediate — it goes first, then the chip
+     closes up behind it.
+     visibility, not [hidden]: the global [hidden]{display:none!important} rule
+     cannot animate, and visibility still takes the button out of the tab order
+     and the accessibility tree while it is away. */
+  .chipclear{position:absolute;right:5px;top:50%;transform:translateY(-50%) scale(.6);
              width:22px;height:22px;padding:0;border-radius:999px;flex:none;
              display:inline-flex;align-items:center;justify-content:center;
-             color:var(--ink);background:var(--raise-hi);border:1px solid var(--edge)}
+             opacity:0;visibility:hidden;pointer-events:none;
+             color:var(--ink);background:var(--raise-hi);border:1px solid var(--edge);
+             transition:opacity var(--t-chip-cross) cubic-bezier(.2,0,0,1),
+                        transform var(--t-chip-cross) cubic-bezier(.2,0,0,1),
+                        background-color var(--t), border-color var(--t),
+                        visibility 0s linear var(--t-chip-cross)}
+  .chipclear.on{opacity:1;visibility:visible;pointer-events:auto;
+                transform:translateY(-50%) scale(1);
+                transition:opacity var(--t-chip-cross) cubic-bezier(.2,0,0,1) var(--t-chip),
+                           transform var(--t-chip-cross) cubic-bezier(.2,0,0,1) var(--t-chip),
+                           background-color var(--t), border-color var(--t),
+                           visibility 0s}
   /* The cross is drawn, not typed. As the &times; character at 15px it sat
      above centre in its disc -- a glyph carries its own ascent and side
      bearings and no line-height setting centres it in a 22px circle ("X icon
@@ -515,7 +623,7 @@
      glyphs took in v0.42.0. */
   .chipclear svg{display:block;width:10px;height:10px}
   .chipclear:hover{background:var(--raise-highest);border-color:var(--edge-hi)}
-  .chipclear:active{background:var(--raise-mid);transform:translateY(-50%)}
+  .chipclear:active{background:var(--raise-mid)}
 
   /* Status carries meaning in THREE channels: glyph, weight, luminance —
      never hue alone. */
@@ -526,14 +634,33 @@
           height:22px;padding:0 10px;border-radius:999px;background:var(--sunk);
           border:1px solid var(--line);box-shadow:none;transition:var(--t-all)}
   .status::before{font-size:11px}
+  /* The depth-of-field advanced row: two buttons and a whole sentence sharing
+     a ~296px rail. As a NOWRAP flex row every item shrank below its own label,
+     the labels wrapped inside boxes with a fixed height (button.sm is 24px,
+     .status is 22px), and .sect-body{overflow:hidden} sliced whatever stuck
+     out — "Both sides" rendered as "Both ·˙·" and the measured note stopped
+     mid-word (found 20 Sep by a UI test pass).
+     The fix is the ROW, not the container: the buttons keep their natural
+     width, and the note takes a line of its own and grows to fit. A fixed
+     height is right for a one-line pill and wrong for a sentence. */
+  .dof-adv{flex-wrap:wrap}
+  .dof-adv > button{flex:none}
+  .dof-adv > .status{flex:1 1 100%;height:auto;min-height:22px;
+                     padding-top:3px;padding-bottom:3px;align-items:flex-start}
   .status.ok{color:var(--ok);font-weight:400} .status.ok::before{content:"\2713";font-weight:600}
   .status.warn{color:var(--warn);font-weight:600} .status.warn::before{content:"!";font-weight:400}
   .status.err{color:var(--err);font-weight:600} .status.err::before{content:"\00d7"}
   /* A real spinner, not a static glyph. The old "\22ef" ellipsis never moved,
      so a wait that genuinely was in progress looked identical to a dead UI —
      which is exactly what it felt like while the agent wasn't running. */
+  /* --acc, not --accent. It said `var(--accent)` from the day it was written
+     and there is no such token in this file, so the declaration was invalid at
+     computed-value time and border-top-color fell back to currentColor. The
+     ring still turned -- the lit arc was just the label's own grey instead of
+     the accent, which is why nobody caught it by looking. Second one of these
+     today; see the kbd font shorthand. */
   .status.busy::before{content:"";width:9px;height:9px;border-radius:50%;
-          border:1.5px solid var(--line);border-top-color:var(--accent);
+          border:1.5px solid var(--line);border-top-color:var(--acc);
           animation:sg-spin .7s linear infinite}
   @keyframes sg-spin{to{transform:rotate(360deg)}}
   @media (prefers-reduced-motion:reduce){
@@ -551,18 +678,47 @@
      of this page where that is optional is a version where the check is
      optional. Two equal panes plus the rail. */
   .stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 344px;
-         min-height:0;overflow:hidden}
+         min-height:0;overflow:hidden;
+         /* The COLUMN animates, not the rail's contents: the panes have to grow
+            into the space at exactly the rate the rail gives it up, and one
+            interpolating track does that for free. Engines that will not
+            interpolate grid-template-columns simply jump, which is the
+            behaviour this replaces. The global prefers-reduced-motion rule
+            near the top of this sheet switches it off. */
+         transition:grid-template-columns var(--t)}
   /* Below ~1100px two panes and a 344px rail no longer fit, and the page starts
      scrolling sideways — which the UI audit catches as a hard failure. Stack the
      panes instead of dropping one: losing the comparison is the one thing this
      layout exists to prevent, so the axis gives way before the pairing does.
      (Found by the audit after compare stopped being optional, at 742px.) */
+  /* Collapsed (the top bar's last button). The rail is 344px of window the two
+     panes are not getting, and nothing in it is needed while you are placing a
+     corner — so it folds away and they take the room. The state is remembered.
+     It also buys back the side-by-side comparison on a narrower window: the
+     rule below stacks the panes under 1100px because two of them PLUS a 344px
+     rail do not fit, and without the rail they do. */
+  /* A 0px THIRD track, not two tracks: the rail is still a grid item, and with
+     only two tracks declared it would be auto-placed into an implicit third
+     column and reappear at full width. */
+  .app.railoff .stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 0px}
+  /* display:none cannot animate, and a 0-wide rail with overflow:auto still
+     holds focusable buttons — so visibility does the hiding, delayed to the end
+     of the slide on the way out and immediate on the way in. */
+  .rail{transition:visibility 0s}
+  .app.railoff .rail{visibility:hidden;transition:visibility 0s linear var(--t-dur)}
   @media (max-width:1100px){
     .stage{grid-template-columns:minmax(0,1fr) 344px;
            grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
     .stage > .pane:first-of-type{grid-column:1;grid-row:1}
     .stage > #outPane{grid-column:1;grid-row:2;border-top:1px solid var(--line)}
     .stage > .rail{grid-column:2;grid-row:1 / span 2}
+    /* Collapsed at this width the panes are stacked and each one is now the
+       FULL width rather than sharing it with the rail, which is the better
+       trade here: side by side they would be ~370px each, narrower than the
+       stacked pair, and the comparison is what the layout exists for. */
+    /* Two tracks again rather than one, for the same reason as above: this
+       media query places the rail in column 2 explicitly. */
+    .app.railoff .stage{grid-template-columns:minmax(0,1fr) 0px}
   }
   #types{flex-wrap:nowrap}
   /* The same omission one level down: rows constrained, column implicit.
@@ -720,7 +876,6 @@
                max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
                display:inline-flex;line-height:20px}
   #detSt:empty,#outSt:empty{display:none}
-  .lbl{color:var(--ink);text-transform:uppercase;letter-spacing:.06em;font-size:11px;font-weight:600}
   /* overscroll-behavior:none on both wells (14 Sep 2026): a trackpad pinch is a
      wheel event we zoom on, but macOS still owns the gesture's elastic bounce.
      While the fingers were moving the browser let the well rubber-band past
@@ -997,7 +1152,11 @@
      tooltip hides the only copy of the explanation from anyone not using a
      mouse. */
   .info{flex:none;width:16px;height:16px;padding:0;border:none;
-        background:none;box-shadow:none;color:var(--edge-hi);cursor:help;line-height:0}
+        /* The file draws it at #3a3a40 = --raise-hi (64:375), well below the
+           --edge-hi it used to carry. It is an affordance, not information:
+           the sentence it holds is reachable by hover AND focus, and the
+           rule below lifts it to --mute the moment anyone goes looking. */
+        background:none;box-shadow:none;color:var(--raise-hi);cursor:help;line-height:0}
   .info svg{display:block;width:16px;height:16px}
   .info:hover, .info:focus-visible{color:var(--mute)}
   /* The tooltip is anchored to the section HEADER, not to the 16px icon, and
@@ -1120,13 +1279,20 @@
      silently re-deviated. */
   .hint{color:var(--faint);font-size:12px;margin:8px 0 0;line-height:1.5}
 
-  /* Figma 8:28: 198px tall — 16 padding, 28 header, 8 gap, 130 strip, 16
-     padding. It is a fixed band and must never absorb leftover height. */
-  .dock{background:var(--card);padding:var(--s4);display:grid;gap:var(--s2);
-        grid-template-rows:28px 130px;flex:none;
+  /* Figma 8:28, re-read 17 Sep: 146px tall — 8 padding, 130 strip, 8 padding.
+     It is a fixed band and must never absorb leftover height. The 28px header
+     that held the zoom stepper and the status line is gone; both float over
+     the strip now, and the 52px it cost is given back to the picture. */
+  .dock{background:var(--card);padding:var(--s2);display:grid;
+        grid-template-rows:130px;flex:none;
+        /* Anchors the two floating children. It must stay z-index:auto — a
+           stacking context here would cut their blend rings off from the strip
+           behind them, which is exactly what cost the video bar its stroke in
+           v0.65.0. position:relative alone creates no context. */
+        position:relative;
         /* The rule is an inset shadow, not a border, so it does not add a
-           pixel to the band's height: 16+28+8+130+16 = 198 exactly. */
-        box-shadow:inset 0 1px 0 var(--line), inset 0 2px 0 rgba(255,255,255,.04)}
+           pixel to the band's height: 8+130+8 = 146 exactly. */
+        box-shadow:inset 0 1px 0 var(--line)}
   .dock.hidden{display:none}
   /* Version badge. Bottom-right, fixed, and deliberately the quietest thing on
      screen: --faint is the captions token (measured 3.50:1, the 1.4.3 floor for
@@ -1156,9 +1322,24 @@
   #pointat.suggest{background:var(--raise-hi);border-color:var(--edge-hi);color:var(--ink)}
   #pointat.armed{background:var(--raise-highest);border-color:var(--edge-hi);color:var(--ink)}
   .scroller.pointing canvas#c{cursor:crosshair}
-  /* Figma 8:29 is a 28px header holding 24px buttons — the header does not
-     shrink to hug them. */
-  .striphead{display:flex;align-items:center;gap:8px;font-size:12px;min-height:28px}
+  /* Both of these float OVER the strip (Figma 8:28). Their offsets in the file
+     are from the STRIP's own top-left, and the strip starts at the dock's 8px
+     padding, so each one carries that 8 too: the group at 8+8 / 8+17, the pill
+     at 8+8 from the top and the right. An absolutely positioned child is laid
+     out against its ancestor's PADDING box, so these are measured from the
+     dock's own edges and the arithmetic is done here rather than by the box.
+     .stripzoom is a WRAPPER, not a group (Figma's Frame 271): two Button
+     Groups stacked with 8px between them, 32 wide and 104 tall in total. The
+     zoom pair is one group and Contrast is a group of its own — the same
+     separation the fit pane's left rail makes between its zoom group and Fit,
+     and the reason for it is the same: a group reads as one family of actions,
+     and magnification and tonal treatment are not one family. The file's 1x is
+     not ported; an edge view has no "actual size" to return to. */
+  .stripzoom{position:absolute;left:16px;top:25px;
+             display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
+  /* left:auto undoes .pillwrap's own centring, which is right for the two pane
+     pills and wrong for this one. */
+  .pillwrap.stripstat{top:16px;left:auto;right:16px;margin:0}
   canvas#strip{display:block;width:100%;height:130px;border-radius:var(--r-md);
         background:var(--well);box-shadow:inset 0 0 0 1px var(--line), inset 0 1px 3px rgba(0,0,0,.5)}
   /* Floating mode: the loupe follows the edge instead of taking a permanent band. */
@@ -1233,6 +1414,11 @@
   .toast.err{border-color:var(--edge)}
   .toast.err .g, .toast.err .msg{color:var(--warn)}
   .toast .msg{min-width:0;word-break:break-word}
+  /* The one action a toast may carry. Sm height and the neutral surface: it is
+     an offer beside the message, not the next step, so it takes no accent —
+     that means "the next action" and Send to Claude already has it. */
+  .toast .act{display:inline-flex;align-items:center;margin-top:8px;
+              height:24px;padding:0 9px;font-size:12px;border-radius:var(--r-sm)}
   .toast .x{flex:none;margin:-3px -4px 0 4px;width:22px;height:22px;padding:0;
             background:none;border:none;box-shadow:none;color:var(--mute);
             font-size:15px;line-height:22px;border-radius:var(--r-sm);opacity:0;
@@ -1315,8 +1501,36 @@
   .sm{font-size:12px}
   code{font:12px ui-monospace,Menlo,monospace;background:var(--sunk);padding:2px 6px;
        border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--line)}
+  /* LONGHAND, deliberately. This was `font:11px/1.6 inherit`, which is an
+     INVALID shorthand -- `inherit` is not a permitted font-family value there,
+     so the browser dropped the whole declaration and every key cap silently
+     rendered at .hint's inherited 12px/1.5. The 11px never once shipped.
+     Caught 20 Sep 2026 while measuring cap heights, because the computed
+     line-height came back 18px and 19.5px when it had just been set to 14.
+     13px, up a step by request: a key cap is a label you hunt for mid-fit, not
+     body copy. `kbd.sym` goes one further because a bare glyph -- an arrow, the
+     cmd or shift sign -- fills a fraction of its em box, so at a shared size it
+     reads smaller and lighter than a cap holding a word like Tab.
+     The line box is pinned in px rather than a ratio so both sizes yield caps
+     of the SAME height; on a ratio they came out 20 and 19, and a row of caps
+     disagreeing by a pixel reads as a wobble rather than a set. */
   kbd{border:1px solid var(--edge);border-bottom-width:2px;border-radius:var(--r-sm);
-      padding:1px 5px;font:11px/1.6 inherit;color:var(--mute);background:var(--sunk)}
+      padding:1px 5px;font-family:inherit;font-size:13px;line-height:15px;
+      /* inline-block, and this is the load-bearing part: on a plain inline box
+         the painted height comes from the FONT's content area, not line-height,
+         so pinning the line box did nothing and the 14px caps still measured
+         21.5 against the 13px caps' 20. An inline-block takes its height from
+         its line box, so both land on 20. */
+      display:inline-block;
+      color:var(--mute);background:var(--sunk)}
+  kbd.sym{font-size:14px}
+  /* The Keys legend. max-content on the first column sizes it to the widest
+     cap, so every description starts on the same x and the caps form a single
+     column the eye can run down. */
+  dl.keys{display:grid;grid-template-columns:max-content 1fr;gap:6px 10px;
+          margin:8px 0 0;align-items:baseline}
+  dl.keys dt{color:var(--faint);font-size:12px;white-space:nowrap}
+  dl.keys dd{margin:0;color:var(--faint);font-size:12px;line-height:1.5}
 </style>
 </head>
 <body>
@@ -1330,9 +1544,9 @@
     <div class="tb-left">
       <span class="brand">Screengraft</span><span id="sess" hidden></span>
       <div class="tb-chips">
-        <span class="chipwrap"><button class="inputchip is-empty" id="chip1"><span class="sw" id="sw1"></span><span class="nm">Choose a photo…</span></button><button class="chipclear" id="clear1" data-role="photo" aria-label="Remove photo" title="Remove the photo and start over. A fit you saved for it comes back when you pick it again." hidden><svg aria-hidden="true" viewBox="0 0 10 10"><path d="M1.5 1.5l7 7M8.5 1.5l-7 7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button></span>
+        <span class="chipwrap"><button class="inputchip is-empty" id="chip1"><span class="sw" id="sw1"></span><span class="nm">Choose a photo…</span></button><button class="chipclear" id="clear1" data-role="photo" aria-label="Remove photo" title="Remove the photo and start over. A fit you saved for it comes back when you pick it again."><svg aria-hidden="true" viewBox="0 0 10 10"><path d="M1.5 1.5l7 7M8.5 1.5l-7 7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button></span>
         <span class="tb-arrow">&rarr;</span>
-        <span class="chipwrap"><button class="inputchip is-empty" id="chip2"><span class="sw" id="sw2"></span><span class="nm">Choose a screenshot…</span></button><button class="chipclear" id="clear2" data-role="screenshot" aria-label="Remove screenshot" title="Remove the screenshot. The fit on the photo is kept." hidden><svg aria-hidden="true" viewBox="0 0 10 10"><path d="M1.5 1.5l7 7M8.5 1.5l-7 7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button></span>
+        <span class="chipwrap"><button class="inputchip is-empty" id="chip2"><span class="sw" id="sw2"></span><span class="nm">Choose a screenshot…</span></button><button class="chipclear" id="clear2" data-role="screenshot" aria-label="Remove screenshot" title="Remove the screenshot. The fit on the photo is kept."><svg aria-hidden="true" viewBox="0 0 10 10"><path d="M1.5 1.5l7 7M8.5 1.5l-7 7" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></button></span>
       </div>
     </div>
     <span class="spacer"></span>
@@ -1349,8 +1563,11 @@
       <span class="seg" id="fmt" role="radiogroup" aria-label="Output format" hidden>
         <button class="sel" data-preset="web" data-label="Web" role="radio" aria-checked="true" title="H.264 at CRF 16 — near-visually-lossless, plays anywhere.">Web</button><button data-preset="prores" data-label="ProRes" role="radio" aria-checked="false" title="ProRes 422 HQ — bigger file, no chroma subsampling. For a case study or further editing.">ProRes</button>
       </span>
-      <button id="save" class="accent" disabled>Preview first</button>
-      <button id="imp" class="accent" disabled title="Send the saved file to Claude so it appears in the chat">Send to Claude</button>
+      <span class="tb-save">
+        <button id="save" disabled>Save</button>
+        <button id="imp" disabled title="Send the saved file to Claude so it appears in the chat">Send to Claude</button>
+      </span>
+      <button id="railBtn" class="iconbtn" aria-expanded="true" aria-controls="rail" aria-label="Settings rail"><svg class="i-open" viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--mute)" d="M4.76855 1C4.50954 1.2888 4.30589 1.62677 4.17383 2H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H4.17383C4.30589 14.3732 4.50954 14.7112 4.76855 15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V3C1 1.89543 1.89543 1 3 1H4.76855Z"/><path fill="var(--icon)" d="M7 15C5.89543 15 5 14.1046 5 13V3C5 1.96435 5.78722 1.113 6.7959 1.01074L7 1H13L13.2041 1.01074C14.1457 1.1062 14.8938 1.85435 14.9893 2.7959L15 3V13C15 14.1046 14.1046 15 13 15H7ZM13 14C13.5523 14 14 13.5523 14 13V3C14 2.44771 13.5523 2 13 2H7C6.44771 2 6 2.44771 6 3V13C6 13.5523 6.44772 14 7 14H13ZM7.14648 8.64648L7.79297 8L7.14648 7.35352L7.85352 6.64648L9.20703 8L7.85352 9.35352L7.14648 8.64648Z"/></svg><svg class="i-closed" viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--mute)" d="M8.76855 1C8.50954 1.2888 8.30589 1.62677 8.17383 2H3C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H8.17383C8.30589 14.3732 8.50954 14.7112 8.76855 15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V3C1 1.89543 1.89543 1 3 1H8.76855Z"/><path fill="var(--icon)" d="M11 15C9.89543 15 9 14.1046 9 13V3C9 1.96435 9.78722 1.113 10.7959 1.01074L11 1H13L13.2041 1.01074C14.1457 1.1062 14.8938 1.85435 14.9893 2.7959L15 3V13C15 14.1046 14.1046 15 13 15H11ZM13 14C13.5523 14 14 13.5523 14 13V3C14 2.44771 13.5523 2 13 2H11C10.4477 2 10 2.44771 10 3V13C10 13.5523 10.4477 14 11 14H13ZM10.793 8L12.1465 6.64648L12.8535 7.35352L12.207 8L12.8535 8.64648L12.1465 9.35352L10.793 8Z"/></svg></button>
     </div>
   </header>
 
@@ -1380,10 +1597,10 @@
           <button class="segbtn" id="czFit" aria-label="Fit the photo to the pane" title="Fit the whole photo in the pane"><svg viewBox="0 0 16 16" fill="none" aria-hidden="true"><path fill="var(--mute)" d="M14.1025 1.00488C14.6067 1.05621 15 1.48232 15 2V14L14.9951 14.1025C14.9472 14.573 14.573 14.9472 14.1025 14.9951L14 15H2C1.48232 15 1.05621 14.6067 1.00488 14.1025L1 14V2C1 1.44772 1.44772 1 2 1H14L14.1025 1.00488ZM2 14H14V2H2V14Z"/><path stroke="var(--icon)" d="M7 11.5H4.5V9M4.5 11.5L7.5 8.5"/><path stroke="var(--icon)" d="M9 4.5H11.5V7M11.5 4.5L8.5 7.5"/></svg></button>
         </div>
         <div class="bgroup corners" role="group" aria-label="Select corner"><i class="ring" aria-hidden="true"></i><i class="ring lift" aria-hidden="true"></i>
-          <button class="segbtn" data-jump="0" aria-label="Top-left corner" title="Jump to the top-left corner"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--mute)" d="M2 13C2 13.5523 2.44772 14 3 14H6V15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V10H2V13ZM15 13C15 14.0357 14.2128 14.887 13.2041 14.9893L13 15H10V14H13C13.5523 14 14 13.5523 14 13V10H15V13ZM6 2H3C2.44772 2 2 2.44772 2 3V6H1V3C1 1.89543 1.89543 1 3 1H6V2ZM13 1C14.1046 1 15 1.89543 15 3V6H14V3C14 2.44772 13.5523 2 13 2H10V1H13Z"/><path fill="var(--acc-ink)" d="M6 2H3C2.44772 2 2 2.44772 2 3V6H1V3C1 1.89543 1.89543 1 3 1H6V2Z"/></svg></button>
-          <button class="segbtn" data-jump="1" aria-label="Top-right corner" title="Jump to the top-right corner"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--mute)" d="M2 13C2 13.5523 2.44772 14 3 14H6V15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V10H2V13ZM15 13C15 14.0357 14.2128 14.887 13.2041 14.9893L13 15H10V14H13C13.5523 14 14 13.5523 14 13V10H15V13ZM6 2H3C2.44772 2 2 2.44772 2 3V6H1V3C1 1.89543 1.89543 1 3 1H6V2ZM13 1C14.1046 1 15 1.89543 15 3V6H14V3C14 2.44772 13.5523 2 13 2H10V1H13Z"/><path fill="var(--acc-ink)" d="M10 2H13C13.5523 2 14 2.44772 14 3V6H15V3C15 1.89543 14.1046 1 13 1H10V2Z"/></svg></button>
-          <button class="segbtn" data-jump="3" aria-label="Bottom-left corner" title="Jump to the bottom-left corner"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--mute)" d="M2 13C2 13.5523 2.44772 14 3 14H6V15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V10H2V13ZM15 13C15 14.0357 14.2128 14.887 13.2041 14.9893L13 15H10V14H13C13.5523 14 14 13.5523 14 13V10H15V13ZM6 2H3C2.44772 2 2 2.44772 2 3V6H1V3C1 1.89543 1.89543 1 3 1H6V2ZM13 1C14.1046 1 15 1.89543 15 3V6H14V3C14 2.44772 13.5523 2 13 2H10V1H13Z"/><path fill="var(--acc-ink)" d="M6 14H3C2.44772 14 2 13.5523 2 13V10H1V13C1 14.1046 1.89543 15 3 15H6V14Z"/></svg></button>
-          <button class="segbtn" data-jump="2" aria-label="Bottom-right corner" title="Jump to the bottom-right corner"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--mute)" d="M2 13C2 13.5523 2.44772 14 3 14H6V15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V10H2V13ZM15 13C15 14.0357 14.2128 14.887 13.2041 14.9893L13 15H10V14H13C13.5523 14 14 13.5523 14 13V10H15V13ZM6 2H3C2.44772 2 2 2.44772 2 3V6H1V3C1 1.89543 1.89543 1 3 1H6V2ZM13 1C14.1046 1 15 1.89543 15 3V6H14V3C14 2.44772 13.5523 2 13 2H10V1H13Z"/><path fill="var(--acc-ink)" d="M10 14H13C13.5523 14 14 13.5523 14 13V10H15V13C15 14.1046 14.1046 15 13 15H10V14Z"/></svg></button>
+          <button class="segbtn" data-jump="0" aria-label="Top-left corner" title="Jump to the top-left corner"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--edge-hi)" d="M2 13C2 13.5523 2.44772 14 3 14H5V15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V11H2V13ZM15 13C15 14.0357 14.2128 14.887 13.2041 14.9893L13 15H11V14H13C13.5523 14 14 13.5523 14 13V11H15V13ZM5 2H3C2.44772 2 2 2.44772 2 3V5H1V3C1 1.89543 1.89543 1 3 1H5V2ZM13 1C14.1046 1 15 1.89543 15 3V5H14V3C14 2.44772 13.5523 2 13 2H11V1H13Z"/><path fill="var(--acc-ink)" d="M5 2.5H3C2.72386 2.5 2.5 2.72386 2.5 3V5H1V3C1 1.89543 1.89543 1 3 1H5V2.5Z"/></svg></button>
+          <button class="segbtn" data-jump="1" aria-label="Top-right corner" title="Jump to the top-right corner"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--edge-hi)" d="M2 13C2 13.5523 2.44772 14 3 14H5V15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V11H2V13ZM15 13C15 14.0357 14.2128 14.887 13.2041 14.9893L13 15H11V14H13C13.5523 14 14 13.5523 14 13V11H15V13ZM5 2H3C2.44772 2 2 2.44772 2 3V5H1V3C1 1.89543 1.89543 1 3 1H5V2ZM13 1C14.1046 1 15 1.89543 15 3V5H14V3C14 2.44772 13.5523 2 13 2H11V1H13Z"/><path fill="var(--acc-ink)" d="M11 2.5H13C13.2761 2.5 13.5 2.72386 13.5 3V5H15V3C15 1.89543 14.1046 1 13 1H11V2.5Z"/></svg></button>
+          <button class="segbtn" data-jump="3" aria-label="Bottom-left corner" title="Jump to the bottom-left corner"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--edge-hi)" d="M2 13C2 13.5523 2.44772 14 3 14H5V15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V11H2V13ZM15 13C15 14.0357 14.2128 14.887 13.2041 14.9893L13 15H11V14H13C13.5523 14 14 13.5523 14 13V11H15V13ZM5 2H3C2.44772 2 2 2.44772 2 3V5H1V3C1 1.89543 1.89543 1 3 1H5V2ZM13 1C14.1046 1 15 1.89543 15 3V5H14V3C14 2.44772 13.5523 2 13 2H11V1H13Z"/><path fill="var(--acc-ink)" d="M5 13.5H3C2.72386 13.5 2.5 13.2761 2.5 13V11H1V13C1 14.1046 1.89543 15 3 15H5V13.5Z"/></svg></button>
+          <button class="segbtn" data-jump="2" aria-label="Bottom-right corner" title="Jump to the bottom-right corner"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--edge-hi)" d="M2 13C2 13.5523 2.44772 14 3 14H5V15H3L2.7959 14.9893C1.85435 14.8938 1.1062 14.1457 1.01074 13.2041L1 13V11H2V13ZM15 13C15 14.0357 14.2128 14.887 13.2041 14.9893L13 15H11V14H13C13.5523 14 14 13.5523 14 13V11H15V13ZM5 2H3C2.44772 2 2 2.44772 2 3V5H1V3C1 1.89543 1.89543 1 3 1H5V2ZM13 1C14.1046 1 15 1.89543 15 3V5H14V3C14 2.44772 13.5523 2 13 2H11V1H13Z"/><path fill="var(--acc-ink)" d="M11 13.5H13C13.2761 13.5 13.5 13.2761 13.5 13V11H15V13C15 14.1046 14.1046 15 13 15H11V13.5Z"/></svg></button>
         </div>
       </div>
       <!-- Corner jump. It is a SIBLING of the scroller, not a child: anything
@@ -1414,7 +1631,13 @@
         fitted quad by the browser. Not the composite — the composite already
         has a frame burned into it, so playing over that would show two screens.
       --><div id="liveWrap" hidden><img id="liveBg" alt=""><video id="liveVid" loop muted playsinline></video></div></div>
-      <span class="pillwrap"><i class="ring sat" aria-hidden="true"></i><i class="ring lum" aria-hidden="true"></i><i class="ring hue" aria-hidden="true"></i><i class="ring lift" aria-hidden="true"></i><span class="status" id="outSt">Press Preview</span></span>
+      <span class="pillwrap"><i class="ring sat" aria-hidden="true"></i><i class="ring lum" aria-hidden="true"></i><i class="ring hue" aria-hidden="true"></i><i class="ring lift" aria-hidden="true"></i><!-- Empty on purpose. It read "Press Preview" until 20 Sep 2026, which named
+           a button that does not exist: the compare pane renders on its own after
+           every correction, so there is nothing to press. The pane already says
+           what it is waiting for in its own body text, and .pillwrap:has(>
+           .status:empty) hides the pill until there is something true to put in
+           it. -->
+      <span class="status" id="outSt"></span></span>
       <!-- Video controls. Hidden entirely for a still source: a scrubber over a
            screenshot is a control that can only confuse. The fit itself is
            unchanged — you match the edges on one frame and every frame gets the
@@ -1454,7 +1677,7 @@
       </div>
     </section>
 
-    <aside class="rail">
+    <aside class="rail" id="rail">
       <div class="sect" id="secDevice" data-on="1">
         <div class="sect-top"><div class="sect-left"><h4>Device</h4></div></div>
         <div class="chips" id="types"></div>
@@ -1522,7 +1745,7 @@
         <div class="sect-body"><div class="sect-body-in">
           <div style="display:grid;gap:var(--s2)">
             <div style="display:flex;align-items:center;justify-content:space-between;gap:var(--s2)">
-              <span class="sm" style="color:var(--mute)">Blur grows toward (of the screen)</span>
+              <span class="sm" style="color:var(--mute)">Blur grows toward</span>
               <span class="sm" id="dofDirVal" style="font-variant-numeric:tabular-nums"></span>
             </div>
             <input type="range" id="dofDir" min="0" max="355" step="5" value="90" aria-label="Direction the blur grows in">
@@ -1531,7 +1754,7 @@
               <span class="sm" id="dofStrVal" style="font-variant-numeric:tabular-nums"></span>
             </div>
             <input type="range" id="dofStr" min="0" max="1" step="0.05" value="0.3" aria-label="Blur strength at the far edge">
-            <div style="display:flex;align-items:center;gap:var(--s2)">
+            <div class="dof-adv" style="display:flex;align-items:center;gap:var(--s2)">
               <button class="sm" id="dofBoth" aria-pressed="false" title="Blur on both sides of the focus line — the depth of field's near and far limits, for a phone whose middle is sharp and both ends soft. Off, the plane of focus is at the screen's edge and blur grows one way.">Both sides</button>
               <button class="sm" id="dofMeasure" title="Read the direction and a starting strength off the photo's own bezel">Measure from photo</button>
               <span class="status sm" id="dofSt" style="min-width:0"></span>
@@ -1552,26 +1775,61 @@
       </div>
       <div class="sect" id="secKeys" data-on="1">
         <div class="sect-top"><div class="sect-left"><h4>Keys</h4></div></div>
-        <!-- Two lines, split by what they act on: the QUAD you are fitting, and
-             the VIEW you are fitting it in. Grouping them by that rather than
-             by modifier is what makes the list scannable while you are mid-fit
-             and looking for one of them. -->
-        <p class="hint"><kbd>&larr;&uarr;&rarr;&darr;</kbd> nudge 1px · <kbd>&#8679;</kbd>+arrow 10px · <kbd>Tab</kbd> next edge</p>
-        <p class="hint"><kbd>&#8984;</kbd>+scroll zoom to pointer · <kbd>Space</kbd>+drag pan · scroll pans</p>
+        <!-- One row per key, in the order you meet them: place the quad, move
+             between its parts, then move the view you are placing it in.
+
+             A <dl>, because these ARE term/description pairs -- saying so in the
+             markup is also what lets a screen reader read a key and its meaning
+             as one unit. It ran as prose lines until 20 Sep 2026, which read
+             fine in a wide rail and badly in a narrow one: the caps ended up
+             mid-sentence and mid-wrap, so finding one meant reading the line
+             rather than scanning a column.
+
+             Checked line by line against the handlers the same day and it held,
+             with two gaps, both fixed here. (a) The arrows do nothing until an
+             edge or corner is SELECTED (`if (!pick) return`) -- "nudge 1px"
+             implied they always work. (b) Escape was undocumented, and it is the
+             way out of the canvas's Tab cycle, so the one line that told you how
+             to get IN had no counterpart telling you how to get out. Also named
+             the trackpad pinch: the wheel handler takes ctrlKey as well as
+             metaKey, so a pinch has always zoomed, unmentioned, on the gesture
+             most people reach for first on this hardware.
+
+             Those two conditions sit in the note BELOW the list rather than in
+             parentheses on a row, because each qualifies several rows. -->
+        <dl class="keys">
+          <dt><kbd class="sym">&larr;&uarr;&rarr;&darr;</kbd></dt><dd>nudge 1px</dd>
+          <dt><kbd class="sym">&#8679;</kbd>+arrow</dt><dd>nudge 10px</dd>
+          <dt><kbd>Tab</kbd></dt><dd>next edge</dd>
+          <dt><kbd>Esc</kbd></dt><dd>release the photo</dd>
+          <dt><kbd class="sym">&#8984;</kbd>+scroll or pinch</dt><dd>zoom to the pointer</dd>
+          <dt><kbd>Space</kbd>+drag</dt><dd>pan</dd>
+          <dt><kbd>scroll</kbd></dt><dd>pan</dd>
+        </dl>
+        <p class="hint">Arrows act on the selected edge or corner. <kbd>Tab</kbd> and <kbd>Esc</kbd> need a click on the photo first.</p>
       </div>
     </aside>
   </div>
 
   <footer class="dock" id="dock">
-    <div class="striphead">
-      <span class="lbl">Edge view</span>
-      <span class="stepper dock-step"><button id="stripOut" aria-label="Zoom the edge view out">&minus;</button><button id="stripIn" aria-label="Zoom the edge view in">+</button></span>
-      <span class="sm" id="stripZ" style="color:var(--mute);font-variant-numeric:tabular-nums"></span>
-      <button class="sm" id="stripHC" aria-pressed="false" title="Stretch the strip's own tonal range to full contrast. For a dark screen on a dark frame, where the boundary is a few levels apart. The strip only — the composite is untouched.">Contrast</button>
-      <span class="spacer"></span>
-      <span class="sm" id="stripSt" style="color:var(--mute)"></span>
-    </div>
     <canvas id="strip" width="1280" height="130"></canvas>
+    <!-- Both float over the strip and come AFTER it in the DOM, so they paint
+         on top of it without a z-index — the same reason #outSt sits after
+         #outWrap. A z-index here would cost them their blend rings. -->
+    <div class="stripzoom">
+      <div class="bgroup" role="group" aria-label="Edge view magnification"><i class="ring" aria-hidden="true"></i><i class="ring lift" aria-hidden="true"></i>
+        <button class="segbtn" id="stripIn" aria-label="Zoom the edge view in" title="Zoom the edge view in — a narrower band across the boundary"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--icon)" d="M8.5 7.5H12.5V8.5H8.5V12.5H7.5V8.5H3.5V7.5H7.5V3.5H8.5V7.5Z"/></svg></button>
+        <button class="segbtn" id="stripOut" aria-label="Zoom the edge view out" title="Zoom the edge view out — a wider band across the boundary"><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--icon)" d="M12.5 8.5H3.5V7.5H12.5V8.5Z"/></svg></button>
+      </div>
+      <!-- Its own group (Figma 271:1337), a single segment, so it takes the
+           radius on all four corners from .bgroup > .segbtn:only-of-type.
+           Glyph is icons / contrast (272:1421), which replaced the half-disc
+           drawn here while the file still had the Fit icon on this button. -->
+      <div class="bgroup"><i class="ring" aria-hidden="true"></i><i class="ring lift" aria-hidden="true"></i>
+        <button class="segbtn" id="stripHC" aria-pressed="false" aria-label="High contrast" title="Stretch the strip's own tonal range to full contrast. For a dark screen on a dark frame, where the boundary is a few levels apart. The strip only — the composite is untouched."><svg viewBox="0 0 16 16" aria-hidden="true"><path fill="var(--mute)" d="M7 2.08398C4.16237 2.56013 2 5.02706 2 8C2 10.9729 4.16245 13.4388 7 13.915V14.9268C3.60787 14.4414 1 11.5264 1 8C1 4.4736 3.6078 1.55758 7 1.07227V2.08398Z"/><path fill="var(--icon)" d="M8 1C9.90691 1 11.635 1.76326 12.8975 3H13V3.10156C14.237 4.36408 15 6.09284 15 8C15 9.90691 14.2367 11.635 13 12.8975V13H12.8975C11.635 14.2367 9.90691 15 8 15V1ZM9 13.915C9.34419 13.8573 9.67834 13.7709 10 13.6572V2.3418C9.67838 2.22811 9.34414 2.14173 9 2.08398V13.915ZM11 13.1953C11.3584 12.9879 11.6934 12.7452 12 12.4707V3.52832C11.6935 3.25392 11.3584 3.01105 11 2.80371V13.1953ZM13 11.3164C13.6315 10.3663 14 9.22632 14 8C14 6.77339 13.6317 5.63287 13 4.68262V11.3164Z"/></svg></button>
+      </div>
+    </div>
+    <span class="pillwrap stripstat"><i class="ring sat" aria-hidden="true"></i><i class="ring lum" aria-hidden="true"></i><i class="ring hue" aria-hidden="true"></i><i class="ring lift" aria-hidden="true"></i><span class="status" id="stripSt"></span></span>
   </footer>
 </div>
 
@@ -1730,6 +1988,20 @@ function toastPath(p){
   return `<span class="path">${esc.replace(/\//g, '/<wbr>')}</span>`;
 }
 
+/* "Open folder" on the save toast. A browser cannot open a file manager from
+   an http page, so the page asks the server, which runs on the machine.
+   Delegated from the container rather than wired per toast: a toast is created
+   and destroyed constantly, and one listener outlives all of them. It fails
+   soft on purpose — the page has a second host with no filesystem at all, and
+   there the route simply is not there. */
+$('#toasts')?.addEventListener('click', async (e) => {
+  const b = e.target.closest('[data-reveal]');
+  if (!b) return;
+  b.disabled = true;
+  try { await api('/api/reveal', { path: decodeURIComponent(b.dataset.reveal) }); }
+  catch (err) { b.disabled = false; toast('err', 'Could not open the folder: ' + err.message); }
+});
+
 function toast(kind, html, opts = {}) {
   const wrap = $('#toasts');
   if (!wrap) return null;
@@ -1766,7 +2038,11 @@ function toast(kind, html, opts = {}) {
      there is nowhere down for it to go. */
   let startX = 0, startY = 0, dragging = false;
   el.addEventListener('pointerdown', e => {
-    if (e.target.closest('.x')) return;
+    // Anything clickable in a toast must bail out BEFORE the capture below:
+    // setPointerCapture retargets the resulting click to the toast, so a
+    // button inside it never sees one. The dismiss × has always needed this;
+    // .act (Open folder) needs it for exactly the same reason.
+    if (e.target.closest('.x, .act')) return;
     dragging = true; startX = e.clientX; startY = e.clientY;
     el.dataset.dragging = 'true';
     try { el.setPointerCapture(e.pointerId); } catch (err) {}
@@ -1940,12 +2216,66 @@ function casedText(c, text, x, y, color){
    The page reads the bytes and the SERVER judges them: whether this is the
    photograph the fit was made for is a question only the side holding the
    pixels can answer. */
+/* One busy state for every operation on this page that can take a while.
+
+   Measured 20 Sep 2026, because the report was "the 4K image takes time to
+   load" and the guess attached to it was detection. The guess was right and
+   the description was not: a cold 4000x4000 photo fetches and decodes in about
+   150ms, while `scripts/detect.py` on the same file takes **11.2s** -- it runs
+   at full resolution, it does not downscale. So the wait is real, it is
+   detection, and it was already being narrated -- just not well enough to be
+   believed, because a static "Detecting..." for eleven seconds is
+   indistinguishable from a page that has stopped.
+
+   Two things fix that, and neither is a bigger spinner. A counter that keeps
+   moving is the difference between slow and stuck, which the Figma import has
+   understood since it was written -- this is that pattern, lifted out of it so
+   three more callers can have it. And the 250ms delay means a fast operation
+   never flashes a spinner it did not need, which is why this can be used on
+   everything without making the page feel busier than it is.
+
+   `settle(restore)` ends it. Pass true when the caller does NOT write its own
+   status afterwards and the line held something worth putting back; pass false
+   when the caller is about to overwrite it anyway. */
+function busy(el, label, opts){
+  const o = opts || {};
+  const delay = o.delay == null ? 250 : o.delay;
+  const countFrom = o.countFrom == null ? 2 : o.countFrom;
+  const t0 = Date.now();
+  const prev = {cls: el.className, html: el.innerHTML, title: el.title};
+  // Keep a size modifier the caller had set; only the state word changes.
+  const cls = 'status ' + (/\bsm\b/.test(prev.cls) ? 'sm ' : '') + 'busy';
+  let armed = false, tick = null;
+  const paint = () => {
+    const n = Math.round((Date.now() - t0) / 1000);
+    el.className = cls;
+    el.innerHTML = n >= countFrom ? `${label} <span class="el">${n}s</span>` : `${label}…`;
+  };
+  const arm = setTimeout(() => { armed = true; paint(); tick = setInterval(paint, 1000); }, delay);
+  // A timer is throttled to about once a minute in a hidden tab, and this is
+  // exactly the wait somebody switches away from. Repaint on return so the
+  // number is right the moment they look at it again.
+  document.addEventListener('visibilitychange', paint);
+  return function settle(restore){
+    clearTimeout(arm);
+    if (tick){ clearInterval(tick); tick = null; }
+    document.removeEventListener('visibilitychange', paint);
+    if (armed && restore){ el.className = prev.cls; el.innerHTML = prev.html; el.title = prev.title; }
+    armed = false;
+  };
+}
 async function loadFitFile(file){
   const s = $('#detSt');
+  // Declared out here so the catch can end the counter too.
+  let settle = () => {};
   try {
     const text = await file.text();
-    s.className = 'status busy'; s.textContent = 'Reading that fit…';
+    // /api/fit hashes the photograph's decoded pixels to decide whether this
+    // fit belongs to it, so it costs more on a big photo, for the same reason
+    // detection does.
+    settle = busy(s, 'Reading that fit');
     const r = await api('/api/fit', {fit: JSON.parse(text)});
+    settle(false);
     st.corners = r.corners.map(c => c.slice());
     st.measured = null;
     st.quadFrom = 'file';
@@ -1968,6 +2298,7 @@ async function loadFitFile(file){
     pick = {kind:'edge', i:0};
     draw(); drawStrip(); autoPreview();
   } catch (e) {
+    settle(false);
     s.className = 'status warn'; s.textContent = 'That fit could not be used';
     s.title = e.message || '';
     toast('err', 'Could not load that fit: ' + (e.message || e));
@@ -2016,17 +2347,59 @@ async function loadRecent(){
    the corners, the screenshot owns the video state and the fitted frame,
    either owns the result. The server does the same to the session
    (/api/clear), so a reload agrees with what is on screen. */
+/* The chip is sized by its content, and content changes in ONE frame: the
+   label swaps between "Choose a photo…" and a filename, and the box arrives at
+   its new width before the thumbnail has moved at all. That is the jump — the
+   thumb and the padding were animating politely while the width had already
+   finished. `auto` cannot be transitioned, so the width is measured on both
+   sides of the change and animated explicitly between the two.
+   Released back to auto once it lands, because a fixed width would stop a
+   later filename or a window resize from reflowing the chip normally.
+   Found 20 Sep by reading a screen recording frame by frame. */
+const chipMs = () => parseFloat(getComputedStyle(document.documentElement)
+                       .getPropertyValue('--t-chip')) || 260;
+function reshapeChip(chip, apply){
+  const from = chip.getBoundingClientRect().width;
+  // Pin BEFORE the content changes, so the swap cannot paint at its new
+  // natural width even for a frame — and so the measurement below, which
+  // forces a layout, cannot commit that width as the transition's start.
+  chip.style.width = from + 'px';
+  apply();
+  // Measure the target on a GHOST, not on the live chip. The live thumbnail is
+  // mid-transition at this instant and still reports width 0, so measuring
+  // here lands ~30px short and the chip finishes with a second, untimed step
+  // when the pin is released. The ghost carries the same classes and content
+  // with transitions off, so it is already at rest.
+  const ghost = chip.cloneNode(true);
+  ghost.removeAttribute('id');
+  ghost.querySelectorAll('[id]').forEach(e => e.removeAttribute('id'));
+  ghost.style.cssText = 'position:absolute;left:-9999px;top:0;width:auto;' +
+                        'visibility:hidden;pointer-events:none;transition:none';
+  chip.parentElement.appendChild(ghost);
+  const to = ghost.getBoundingClientRect().width;
+  ghost.remove();
+  if (Math.abs(to - from) < 0.5){ chip.style.width = ''; return; }
+  void chip.offsetWidth;                        // commit the start
+  chip.style.width = to + 'px';
+  // Back to auto once it lands: a fixed width would stop a later filename or a
+  // window resize from reflowing the chip normally.
+  clearTimeout(chip._reshape);
+  chip._reshape = setTimeout(() => { chip.style.width = ''; }, chipMs() + 40);
+}
+
 async function clearSource(role){
   try { await api('/api/clear', {role}); }
   catch(e){ alert(e.message); return; }
   const n = role==='photo'?1:2;
   const chip = $('#chip'+n);
-  chip.classList.add('is-empty');
-  chip.querySelector('.nm').textContent = role==='photo' ? 'Choose a photo…' : 'Choose a screenshot…';
+  reshapeChip(chip, () => {
+    chip.classList.add('is-empty');
+    chip.querySelector('.nm').textContent = role==='photo' ? 'Choose a photo…' : 'Choose a screenshot…';
+  });
   chip.title = '';
   $('#sw'+n).style.background = '';
   $('#pv'+n).innerHTML = '<span class="empty">Select a recent image</span>';
-  $('#clear'+n).hidden = true;
+  $('#clear'+n).classList.remove('on');
   document.querySelectorAll('#recent'+n+' .th').forEach(x=>x.classList.remove('sel'));
   dropResult();
   if (role==='photo'){
@@ -2035,6 +2408,10 @@ async function clearSource(role){
     // Nothing to draw on: the canvas goes back to its empty state rather
     // than showing the last photograph with no way to act on it.
     const c = $('#c'); c.getContext('2d').clearRect(0, 0, c.width, c.height);
+    // Belt and braces, and worth it on its own: a 4000x4000 decode is ~64MB of
+    // pixels held for a photograph the user has just removed. Dropping it makes
+    // the stale-repaint above impossible rather than merely unpainted.
+    img.removeAttribute('src');
     // ... and the edge view, which would otherwise keep showing a strip of a
     // photograph that is no longer here.
     for (const id of ['strip', 'stripF']) {
@@ -2085,14 +2462,16 @@ function setChosen(role, path, size, el, meta){
   const ver = (meta && meta.mtime) || Date.now();
   $('#pv'+n).innerHTML = `<img src="${srcURL(thumb, ver)}" alt="">`;
   const chip = $('#chip'+n);
-  chip.classList.remove('is-empty');
   // The file's own name and nothing else. The size and, for a clip, the frame
   // count used to follow it in the same 12px, which pushed the one thing that
   // identifies the file into an ellipsis; they live on hover now, with the
   // full path. An upload's session copy is "<role>-<epoch>-<name>", so the
   // server sends the original name back as `name`.
   const shown = (meta && meta.name) || path.split('/').pop();
-  chip.querySelector('.nm').textContent = shown;
+  reshapeChip(chip, () => {
+    chip.classList.remove('is-empty');
+    chip.querySelector('.nm').textContent = shown;
+  });
   // A different file in either role: the composite on screen is of the old
   // one. Dropped here, before the state changes, so nothing downstream can
   // narrate over it; maybeStart() re-renders once the fit is ready.
@@ -2100,7 +2479,7 @@ function setChosen(role, path, size, el, meta){
   chip.title = `${homePath(path)}\n${size[0]}×${size[1]}`
     + (meta && meta.video ? ` · ${meta.frames} frames @ ${Math.round(meta.fps)}fps` : '');
   $('#sw'+n).style.background = `center/cover no-repeat url("${srcURL(thumb, ver)}")`;
-  $('#clear'+n).hidden = false;
+  $('#clear'+n).classList.add('on');
   // A fit the server recognised from this photograph's own pixels. Held
   // rather than applied here: the quad only means anything once there is a
   // screenshot to put inside it, which is what maybeStart() waits for.
@@ -2313,10 +2692,44 @@ function distToSeg(p,a,b){
   return {d: vlen(sub(p, add(a, mul(ab,t)))), t};
 }
 
+/* Loading the photograph is the one long step on this page that said nothing.
+   `detect()` has narrated itself since it existed, and it runs AFTER this, so a
+   4K photo spent its whole fetch-and-decode in silence with the picker already
+   closed and the canvas still empty -- which reads as the click not having
+   landed. Reported 20 Sep 2026, with detection as the suspected cause; it was
+   not, and the measured order is: set img.src -> fetch the full-resolution file
+   -> browser decode -> onload -> computeFit/draw -> only then detect().
+
+   Armed on a 250ms delay so a small photo never flashes a spinner it does not
+   need, and it counts seconds past 2 for the same reason the Figma import does:
+   a number that keeps moving is the difference between slow and stuck.
+
+   The previous status is CAPTURED and handed back on settle rather than
+   blanked. One caller (setChosen, changing the screenshot under an existing
+   fit) writes "the fit on the photo is kept" and then calls in here, and the
+   branch below that keeps existing corners writes nothing -- so clearing would
+   have eaten somebody else's message. */
+let photoBusy = null;                // settle() for a load still in flight
 async function maybeStart(){
   if (!st.photo) return;
   const ready = !!st.shot;           // the screenshot gates the fit, not the photo
+  const s = $('#detSt');
+  if (photoBusy) photoBusy(true);    // a second pick mid-load: retire the first
+  const done = busy(s, 'Loading the photo');
+  const settle = () => { done(true); photoBusy = null; };
+  photoBusy = settle;
+  // There was no onerror at all, so a photo that failed to decode left the page
+  // silent for good: no canvas, no message, nothing to do next.
+  img.onerror = () => {
+    // Clearing the photo drops img's src on purpose; that is not a failure.
+    if (!st.photo) { settle(); return; }
+    settle();
+    s.className = 'status err';
+    s.textContent = 'That photo could not be opened — try another, or drop the file in again.';
+    s.title = homePath(st.photo || '');
+  };
   img.onload = () => {
+    settle();
     computeFit(); setCanvasZoom(fitScale);
     refreshRings();
     if (!ready){
@@ -2525,9 +2938,11 @@ $('#scroller').addEventListener('pointerdown', e => {
   pointAt(p[0], p[1]);
 }, true);
 async function pointAt(x, y){
-  const s = $('#detSt'); s.className = 'status busy'; s.textContent = 'Reading that point…';
+  const s = $('#detSt');
+  const settle = busy(s, 'Reading that point');
   try {
     const r = await api('/api/detect', {click: [x, y]});
+    settle(false);
     if (r.found){
       st.corners = r.corners; st.measured = r.corner_radius; st.quadFrom = 'detected';
       orientQuad();
@@ -2543,6 +2958,7 @@ async function pointAt(x, y){
       s.title = r.message || '';
     }
   } catch (err) {
+    settle(false);
     s.className = 'status warn'; s.textContent = 'Could not read that point: ' + err.message;
   }
   pick = {kind:'edge', i:0};
@@ -2557,8 +2973,29 @@ document.querySelectorAll('[data-jump]').forEach(b => {
 });
 
 async function detect(){
-  const s = $('#detSt'); s.className='status busy'; s.textContent = 'Detecting…';
-  const r = await api('/api/detect', {});
+  const s = $('#detSt');
+  // The longest wait on the page: 11.2s measured on a 4000x4000 photo, because
+  // detect.py runs at full resolution. The counter is what makes that read as
+  // working rather than hung.
+  const settle = busy(s, 'Detecting');
+  let r;
+  // There was no catch here at all, so a request that failed left 'Detecting…'
+  // spinning for good -- the one state the page could never leave.
+  try { r = await api('/api/detect', {}); }
+  catch (e){
+    settle(false);
+    s.className = 'status err';
+    s.textContent = 'Detection failed — try Point at screen, or place the edges by hand';
+    s.title = e.message || '';
+    suggestPointing(true);
+    st.corners = defaultQuad(); st.quadFrom = 'default';
+    if (!st.type) setType('phone');
+    applyPreset();
+    pick = {kind:'edge', i:0};
+    draw(); drawStrip(); autoPreview();
+    return;
+  }
+  settle(false);
   if (r.found){
     st.corners = r.corners; st.measured = r.corner_radius; st.quadFrom = 'detected';
     orientQuad();
@@ -2784,7 +3221,12 @@ function paintRingsFallback(){
   if (!IS_WEBKIT || _ringsQueued) return;
   _ringsQueued = true;
   requestAnimationFrame(() => { _ringsQueued = false;
-    const panes = [[$('#c'), $('.pane')], [$('#outImg'), $('#outPane')]];
+    // The edge-view dock is a third surface carrying groups (Figma 8:28, 17
+    // Sep), and its backdrop is the strip canvas rather than either pane's
+    // picture. Without this pair the dock's zoom group and status pill get no
+    // ring colour at all in Safari: they sit outside both panes, so the loop
+    // never reached them and .noblend leaves the ring transparent.
+    const panes = [[$('#c'), $('.pane')], [$('#outImg'), $('#outPane')], [strip, $('#dock')]];
     for (const [src, pane] of panes){
       if (!src || !pane) continue;
       const ok = src.tagName === 'CANVAS' ? src.width > 0 : (!src.hidden && src.naturalWidth > 0);
@@ -2814,7 +3256,16 @@ function draw(){
   if (!$('#liveWrap').hidden) placeLiveVideo();
   ctx.setTransform(cvDpr, 0, 0, cvDpr, 0, 0);          // CSS px from here on; the store is cvDpr times larger
   ctx.clearRect(0,0,cvW,cvH);
-  if (!img.naturalWidth) return;
+  // st.photo FIRST, and this is the whole bug reported 21 Sep 2026: clear the
+  // photo, then click anywhere in the fit pane, and the photograph came back
+  // while the chip still read "Choose a photo…". The guard here was
+  // `img.naturalWidth` alone -- the <img> keeps its decoded pixels until
+  // something replaces them, and clearSource only wiped the CANVAS, so the
+  // image was still 4000x4000 and perfectly drawable. The click ran
+  // cv.onpointerdown -> no hit -> draw(), and draw() repainted what it still
+  // had. Asking the <img> whether there is a photo was the mistake: the <img>
+  // is a cache, st.photo is the answer.
+  if (!(st.photo && img.naturalWidth)) return;
   ctx.drawImage(img, 0,0, cvW, cvH);
   if (!st.corners) return;
   const P = st.corners.map(([x,y]) => [x*scale, y*scale]);
@@ -2965,9 +3416,21 @@ cv.onpointerup = cv.onpointercancel = () => { drag = null; draw(); drawStrip();
 cv.onpointerleave = () => { if (!drag){ hover = null; draw(); drawStrip(); } };
 
 window.addEventListener('keydown', e => {
-  if (e.key === 'Escape'){ closePop(); return; }
+  // Escape also releases the canvas, so Tab-cycling is never a one-way door.
+  if (e.key === 'Escape'){ closePop(); if (document.activeElement === cv) cv.blur(); return; }
   if (!st.corners || document.querySelector('.pop.on')) return;
   if (e.key === 'Tab'){
+    // Tab is the BROWSER's focus key everywhere except the fit canvas itself.
+    // This was taken at window level with no target check, so the moment a fit
+    // existed a keyboard user could never reach the top bar or the rail: focus
+    // stayed where it was and the EDGE advanced instead. Reported 20 Sep with
+    // the focus ring visibly stuck on a device chip while the edge cycled —
+    // WCAG 2.1.1, and the KEYS legend's "Tab next edge" is why it looked
+    // deliberate rather than broken.
+    // The canvas is tabindex="-1": it holds focus only after a click on it,
+    // which is exactly when cycling edges is what Tab should mean. Escape
+    // above gives it back.
+    if (document.activeElement !== cv) return;
     e.preventDefault();
     const i = pick && pick.kind==='edge' ? (pick.i+1)%4 : 0;
     pick = {kind:'edge', i}; draw(); drawStrip(); return;
@@ -3422,7 +3885,7 @@ function setStripHC(on){
   $('#stripHC').setAttribute('aria-pressed', on ? 'true' : 'false');
 }
 $('#stripHC').onclick = () => { setStripHC(!stripHC); drawStrip(); };
-function paintStrip(c, W, H, i, mode){
+function paintStrip(c, W, H, i, mode, padLeft = 9){
   c.setTransform(1,0,0,1,0,0);
   c.fillStyle = '#0c0c0b'; c.fillRect(0,0,W,H);
   const A = st.corners[i], B = st.corners[(i+1)%4];
@@ -3462,8 +3925,8 @@ function paintStrip(c, W, H, i, mode){
   const centre = st.corners.reduce((acc,cc)=>[acc[0]+cc[0]/4, acc[1]+cc[1]/4],[0,0]);
   const inwardIsDown = (n[0]*(centre[0]-A[0]) + n[1]*(centre[1]-A[1])) > 0;
   c.font = '600 11px system-ui'; c.textBaseline = 'middle';
-  casedText(c, 'screen', 9, inwardIsDown ? H/2 + 15 : H/2 - 15, 'rgba(255,255,255,.95)');
-  casedText(c, 'outside', 9, inwardIsDown ? H/2 - 15 : H/2 + 15, 'rgba(255,255,255,.62)');
+  casedText(c, 'screen', padLeft, inwardIsDown ? H/2 + 15 : H/2 - 15, 'rgba(255,255,255,.95)');
+  casedText(c, 'outside', padLeft, inwardIsDown ? H/2 - 15 : H/2 + 15, 'rgba(255,255,255,.62)');
 }
 function swingText(mode){
   if (mode === 'rotA') return 'the right end swings, pivot on the left';
@@ -3510,11 +3973,31 @@ function paintCorner(c, W, H, i){
   casedText(c, LBL[i], W/2 + 12, H/2 - 12, 'rgba(255,255,255,.95)');
 }
 const HANDLE_GAP_S = 4 + 1 + CASE_PAD/2 + 1;   // the same break the canvas leaves around a ring
+/* Figma 8:28 puts the strip's labels at x=59, which is exactly where the
+   floating zoom group ends (8 left + 32 wide) plus 19 of air. Two things stop
+   that 59 from being a literal here.
+   The canvas is a fixed 1280 wide stretched to whatever the band measures, so
+   a number in CSS pixels and a number in canvas pixels only agree at one window
+   width — hence the conversion.
+   And the gap is measured off the GROUP rather than assumed: the labels are
+   drawn from JS while the group is laid out by CSS, so anything that changes
+   the group's width (a longer icon set, a different radius, a zoom level) would
+   silently slide it under the text. Reading its real right edge means the air
+   between them is the design's 19px whatever the group does, and the design's
+   59 is the floor for the case where the group has not been laid out yet —
+   width 0 would otherwise put the labels at the strip's edge, UNDER the group.
+   The floating loupe has no group over it and keeps the default. */
+function stripLabelInset(W){
+  const r = strip.getBoundingClientRect();
+  if (!(r.width > 0)) return Math.round(59 * W / 1280);
+  const g = document.querySelector('.stripzoom');
+  const gRight = g ? g.getBoundingClientRect().right - r.left : 40;
+  return Math.round(Math.max(59, gRight + 19) * W / r.width);
+}
 function drawStrip(){
   const a = drag || hover || pick;
   const has = !!(st.corners && a && (a.kind === 'edge' || a.kind === 'corner') && img.naturalWidth);
   const corner = has && a.kind === 'corner';
-  $('#stripZ').textContent = '±' + stripHalf + 'px';
   if (loupeMode === 'dock'){
     $('#floatLoupe').classList.remove('on');
     const W = strip.width, H = strip.height;
@@ -3527,7 +4010,7 @@ function drawStrip(){
       paintCorner(sctx, W, H, a.i);
       $('#stripSt').textContent = `${LBL[a.i]} corner · ${(H/(2*cornerHalf())).toFixed(1)}× — the whole arc, and where each edge lands on it`;
     } else {
-      paintStrip(sctx, W, H, a.i, a.mode);
+      paintStrip(sctx, W, H, a.i, a.mode, stripLabelInset(W));
       $('#stripSt').textContent = `${EDGE_LBL[a.i]} edge · ±${stripHalf}px · ${(H/(2*stripHalf)).toFixed(1)}× across the boundary — ${swingText(a.mode)}`;
     }
   } else {
@@ -3608,15 +4091,25 @@ let outNat = 0, autoTimer = null;
    would do. On a tool whose whole pitch is that the output is exact, a label
    that disagrees with its action is not a small thing. */
 function saveLabel(){ return st.video ? 'Render' : 'Save'; }
-/* The labels that mean "there is something to do". markStale's 'Preview first'
-   and the in-flight 'Saving…' / progress text must survive a source change, so
+/* The in-flight 'Saving…' / progress text must survive a source change, so
    relabelling only touches a button that is currently offering the action. */
 function relabelSave(){
   const b = $('#save');
   if (b.textContent === 'Save' || b.textContent === 'Render') b.textContent = saveLabel();
 }
 function markStale(){
-  const b = $('#save'); b.disabled = true; b.textContent = 'Preview first';
+  // This used to relabel the button 'Preview first'. Removed 20 Sep 2026 on
+  // request, and the request was right on inspection: with the compare pane
+  // open by default, EVERY caller of markStale that has all three inputs is
+  // followed by autoPreview() within the same interaction -- pointerup after a
+  // drag, the same line after a keyboard nudge, the end of pointAt(), the
+  // callers of setFrac. So the label was only ever on screen for the 350ms
+  // debounce. The one place it PERSISTED was a failed /api/preview, where it
+  // told the user to do the thing they had just done and that had just failed.
+  // Dead in the happy path, wrong in the sad one. The button keeps its own
+  // verb and simply reads as unavailable; the status line says why.
+  const b = $('#save'); b.disabled = true;
+  b.textContent = saveLabel();
   // Exactly one lit action at a time — the Figma Button component says the
   // accent marks the NEXT action and that only one may be on screen. With no
   // current render there is nothing to save, so nothing is lit: Preview stays
@@ -4084,8 +4577,11 @@ $('#save').onclick = async () => {
     // Naming the fit file here is the whole reason it is discoverable: it is
     // written silently beside the mockup, and a file nobody knows about is a
     // file nobody drags back in.
+    // encodeURIComponent, not an HTML escape: the path goes into an attribute
+    // and a filename may legally contain quotes. This cannot break out of it.
     toast('ok', 'Saved' + toastPath(homePath(r.output))
-      + (r.fit_file ? `<span class="path" style="margin-top:8px;color:var(--mute)">The fit is beside it as ${r.fit_file.split('/').pop()} — drop that back on this page to reuse these corners.</span>` : ''),
+      + (r.fit_file ? `<span class="path" style="margin-top:8px;color:var(--mute)">The fit is beside it as ${r.fit_file.split('/').pop()} — drop that back on this page to reuse these corners.</span>` : '')
+      + `<button type="button" class="act" data-reveal="${encodeURIComponent(r.output)}">Open folder</button>`,
       { ms: 9000, dismissible: true });
     const imp = $('#imp');
     imp.disabled = false; imp.textContent = 'Send to Claude';
@@ -4142,14 +4638,23 @@ $('#imp').onclick = async () => {
     $('#ver').textContent = 'v' + s.version + (s.build ? ' · ' + s.build : '');
     $('#ver').classList.toggle('dev', !!s.build);
   }
-  // Say up front where Save will put things. With --out-dir this is usually the
-  // project folder, and a designer should not have to press Save to find out.
-  toast('info', 'Fit the four edges, then Preview. Saves go to' + toastPath(homePath(s.out_dir || '')),
-        { ms: 9000, dismissible: true });
+  // There used to be a toast here on every load, saying "Fit the four edges,
+  // then Preview" and naming the save folder. Removed 20 Sep 2026 on request.
+  // It was the one message that fired when the user had done nothing, so it
+  // greeted every single session -- including the hundredth -- with an
+  // instruction and a long path, over the picker that had just opened by
+  // itself. The instruction is already in the fit pane's own status line, and
+  // the save folder is named in the toast that appears AFTER a save, which is
+  // the moment it is actually wanted. Nothing replaced it: no toast on load.
   const types = $('#types');
   for (const t of ['phone','tablet','laptop','desktop']){
     const b=document.createElement('button'); b.className='chip'; b.dataset.t=t; b.textContent=t;   /* Chip is one size in Figma (5:6): h28, 12px */
-    b.onclick=()=>{setType(t); applyPreset(); autoPreview();}; types.appendChild(b);
+    // Re-clicking the device you are ALREADY on used to re-apply its preset and
+    // silently overwrite a hand-set corner radius — phone → phone jumped 10.2%
+    // back to 15.4% (found 20 Sep). Picking the device you already have is a
+    // no-op; the preset dropdown is the deliberate way to re-apply one.
+    b.onclick=()=>{ if (st.type === t) return; setType(t); applyPreset(); autoPreview(); };
+    types.appendChild(b);
   }
   setLoupeMode(loupeMode);
   setStripHC(stripHC);
@@ -4200,6 +4705,51 @@ $('#imp').onclick = async () => {
     computeFit(); setCanvasZoom(wasFit ? fitScale : scale);
   });
 })();
+
+/* ---- the settings rail collapses -----------------------------------------
+   Last button in the top bar, after Send to Claude. Nothing in the rail is
+   needed while a corner is being placed, and it is 344px the two panes are not
+   getting — so it folds away and they take the room. Remembered across
+   sessions, like the loupe mode and the strip's contrast.
+   This block sits at the very end of the script deliberately: it calls into
+   drawStrip/syncOut on toggle, and those close over consts declared throughout
+   the file, so it must not run while any of them is still in its temporal dead
+   zone. */
+(() => {
+  const app = document.querySelector('.app'), btn = $('#railBtn'), stage = $('#stage');
+  let railWait;
+  const apply = (open, relayout) => {
+    app.classList.toggle('railoff', !open);
+    btn.setAttribute('aria-expanded', open ? 'true' : 'false');
+    btn.title = open ? 'Hide the settings rail' : 'Show the settings rail';
+    if (!relayout) return;
+    // The panes just changed width, which is a resize in everything but name —
+    // so do what the resize handler does, then repaint the things that are
+    // MEASURED rather than laid out and have all just moved: the strip's
+    // labels are positioned off the zoom group's box, and the blend rings'
+    // WebKit fallback samples pixels at coordinates taken from the panes.
+    // AFTER the slide, not during: measuring mid-transition fits the canvas to
+    // a width the pane is still leaving. The wait is read off the transition
+    // itself rather than written as a number, so it cannot drift from --t, and
+    // it collapses to ~nothing under prefers-reduced-motion, where the rule at
+    // the top of the sheet has already set the duration to zero.
+    clearTimeout(railWait);
+    const ms = (parseFloat(getComputedStyle(stage).transitionDuration) || 0) * 1000;
+    railWait = setTimeout(() => {
+      if (img.naturalWidth){
+        const wasFit = Math.abs(scale - fitScale) < 1e-6;
+        computeFit(); setCanvasZoom(wasFit ? fitScale : scale);
+      }
+      drawStrip(); syncOut(); refreshRings();
+    }, ms + 20);
+  };
+  btn.onclick = () => {
+    const open = app.classList.contains('railoff');   // toggling TO open
+    remember('rail', open ? '1' : '0');
+    apply(open, true);
+  };
+  apply(recall('rail', '1') === '1', false);
+})();
 </script>
 </body>
 </html>