@bongos/core 1.19.1066 → 1.19.1068

package/modules/hall-ui/public/studio.css

@@ -1,148 +1,596 @@
-/* modules/hall-ui/public/studio.css — the Studio (artist mode), /builders/studio.
-   R06 of goal 1000074 (the artist's loop), task 1003117.
+/* modules/hall-ui/public/studio.css — the studio, /builders/studio.
 
-   The criterion (artist-mode): "a place an artist wants to be, not a form. A
-   focus environment on the Cloud Bongos screen — a lofi-girl-style zen garden of
-   focus and creativity — rather than another table of rows." So this sheet is
-   deliberately NOT the oversight row archetype the copy desk rides. It is a calm
-   room: one thing to tend at a time, generous air, tonal separation, and one
-   slow ambient presence — the warm "lamp" that gives a lofi room its light.
+   THE STUDIO HOME (task 1003971 / BV2.TW16, goal 1000095; ADR 0341 D2, D8 and
+   D11). docs/design/mocks/tweak-mode/Main.dc.html is the master design the
+   owner approved ("I like the lofi design for now"), and the first half of this
+   sheet is its inline styles, one rule per element: the night room (the window
+   with its moon, stars and city lights, the floor, the lamp and its glow, the
+   mug and the plant), the eyebrow and the tally pill, the greeting and its
+   sub-line, Resume, the three glass quick actions, and the two small glass
+   panels. What a gate or a route forced to differ is listed in
+   modules/hall-ui/records/studio.md, one line each.
 
-   THE ONE WARM THING RULE, kept (DESIGN.md): the salmon accent lights only what
-   is pressable (the primary action) or LIVE. The ambient lamp is the live thing
-   — a slow-breathing warm presence, the room's own light — and nothing else here
-   is warm: the eyebrows, the step numbers and the stones are ink, never accent.
+   ONE ROOM, BOTH MODES. The artboard is a room at night, so it is the room
+   whatever the hall's theme is (the tweak editor's precedent, tweak-editor.css):
+   its palette is the artboard's own values, declared as --st-* on this page's
+   body and spent only on the stage (main.studio), the two panels, and the
+   shell's full-screen button while it floats over the room. The hall chrome
+   around the stage keeps its own light and dark.
 
-   Tokens only — no colour literals (tests/hall_audit.mjs §9 holds every hall
-   sheet to that), so every colour is a var() or a color-mix() of one, and both
-   modes come for free from style.css's tier. The mode marker html[data-artist]
-   is set on this page's <html> (the social-mode pattern, shell.js applySocial):
-   entering the studio IS entering the mode, so the calm reads off the attribute. */
+   The second half is the older reviews' garden (R06 of goal 1000074, task
+   1003117), which still answers the reviews filed before Tweak Mode (TW14) in
+   its own quiet dialog, in the hall's own tokens as it always was. */
+
+body[data-page="studio"] {
+  --st-room: #07080d;
+  --st-frame: #14151b;
+  --st-night: #0c1122;
+  --st-moon: #f1e6d2;
+  --st-moon-halo: rgba(241, 230, 210, .18);
+  --st-star: #d8dcf0;
+  --st-tower-1: #090b16;
+  --st-tower-2: #0a0d1a;
+  --st-tower-3: #080a14;
+  --st-floor: #0d0d12;
+  --st-floor-edge: rgba(255, 255, 255, .06);
+  --st-glow: rgba(251, 149, 105, .22);
+  --st-glow-out: rgba(251, 149, 105, 0);
+  --st-stem: #1c1c24;
+  --st-shade: #22222b;
+  --st-mug: #1a1a22;
+  --st-leaf-1: #13261d;
+  --st-leaf-2: #173022;
+  --st-ink: #ffffff;
+  --st-ink-sub: #c9c9ce;
+  --st-ink-soft: #c0c0c0;
+  --st-ink-faint: #a8a8a8;
+  --st-ink-dim: #8a8a90;
+  --st-ink-hint: #85858c;
+  --st-glass: rgba(255, 255, 255, .06);
+  --st-glass-edge: rgba(255, 255, 255, .14);
+  --st-rule: rgba(255, 255, 255, .16);
+  --st-accent: #fb9569;
+  --st-on-accent: #000000;
+  --st-link: #fcbfa4;
+  --st-resume: rgba(251, 149, 105, .16);
+  --st-resume-edge: rgba(251, 149, 105, .55);
+  --st-word-hover: rgba(255, 255, 255, .28);
+  --st-word-ring: rgba(251, 149, 105, .45);
+  --st-scrim: rgba(4, 5, 9, .94);
+  --st-panel: rgba(255, 255, 255, .075);
+  --st-panel-edge: rgba(255, 255, 255, .18);
+  --st-panel-rim: rgba(255, 255, 255, .22);
+  --st-panel-drop: rgba(0, 0, 0, .55);
+  --st-close: rgba(255, 255, 255, .08);
+  --st-chip-edge: rgba(255, 255, 255, .16);
+  --st-track: rgba(255, 255, 255, .1);
+  --st-danger: #ff9b8a;
+  --st-face: var(--font-body, Manrope, "Segoe UI", system-ui, sans-serif);
+  --st-mono: var(--font-mono, "JetBrains Mono", ui-monospace, Consolas, monospace);
+}
+
+/* The stage fills the content box: the hall's content column is a reading
+   width, and the artboard is the whole window. */
+body[data-page="studio"] .app-content { max-width: none; padding: 0; }
+body[data-page="studio"] .app-foot { display: none; }
 
-/* The room. Generous vertical air so the one focus sits in space, not in a list.
-   position:relative anchors the ambient layer below it. */
 .studio {
+  color-scheme: dark;
   position: relative;
-  padding: clamp(28px, 6vh, 76px) 0 64px;
+  overflow: hidden;
+  min-height: calc(100vh - var(--topbar-h, 56px));
+  box-sizing: border-box;
+  padding: 48px 88px 64px;
+  background: var(--st-room);
+  color: var(--st-ink);
+  font-family: var(--st-face);
+}
+html[data-fullscreen="on"] .studio { min-height: 100vh; }
+.studio a { color: var(--st-link); }
+.studio a:hover { color: var(--st-accent); }
+.studio button { font-family: inherit; }
+
+/* In full screen the shell's one button floats over the night room in either
+   theme, so on this page it wears the room's glass, not the hall's ink. */
+html[data-fullscreen="on"] body[data-page="studio"] .fullscreen-toggle {
+  color: var(--st-ink);
+  background: var(--st-glass);
+  box-shadow: inset 0 0 0 1px var(--st-glass-edge);
 }
 
-/* The ambient presence — the lamp. A single soft warm disc, low and slow, the
-   only atmosphere the room draws (the hall's --plate ground is a deferred seam,
-   owner's call, so nothing is painted into it here). overflow:hidden clips the
-   disc to the room so it can never widen the document (the no-sideways rule). */
-.studio-atmos {
+/* ---------------------------------------------------------------------------
+   The night room. Positions are the artboard's, measured from the centre of
+   its 1440 frame, so the room stays composed on a wider or narrower window;
+   the window never slides under the words column (its left edge holds at
+   680px). Clipped by the stage, so it can never widen the document.
+   --------------------------------------------------------------------------- */
+.st-room {
   position: absolute;
   inset: 0;
-  overflow: hidden;
   pointer-events: none;
   z-index: 0;
 }
-.studio-atmos::before {
-  content: "";
-  position: absolute;
-  top: -24%;
-  right: -10%;
-  width: min(680px, 82vw);
-  aspect-ratio: 1;
+.st-room > *,
+.st-window > * { position: absolute; }
+.st-window {
+  left: max(calc(50% + 60px), 680px);
+  top: 86px;
+  width: 560px;
+  height: 560px;
+  box-sizing: border-box;
+  border: 16px solid var(--st-frame);
+  border-radius: 6px;
+  background: var(--st-night);
+  overflow: hidden;
+}
+.st-moon {
+  left: 372px; top: 64px; width: 64px; height: 64px;
   border-radius: 50%;
-  background: color-mix(in srgb, var(--accent) 12%, transparent);
-  animation: studio-lamp 38s ease-in-out infinite;
-}
-/* A second, cooler and fainter presence low-left, so the room has depth rather
-   than one lamp in a corner. --glass is the world's tonal wash token (translucent
-   ink on paper in light, translucent white on black in dark) — the sanctioned way
-   to lay a neutral wash that reads right in both modes, never a raw --ink mix into
-   transparent (which inverts; tests/hall_audit.mjs bans it). */
-.studio-atmos::after {
-  content: "";
-  position: absolute;
-  bottom: -30%;
-  left: -14%;
-  width: min(560px, 72vw);
-  aspect-ratio: 1;
+  background: var(--st-moon);
+  box-shadow: 0 0 60px 12px var(--st-moon-halo);
+}
+.st-star { border-radius: 50%; background: var(--st-star); }
+.st-star--1 { left: 80px; top: 70px; width: 3px; height: 3px; }
+.st-star--2 { left: 190px; top: 40px; width: 2px; height: 2px; }
+.st-star--3 { left: 260px; top: 120px; width: 3px; height: 3px; opacity: .7; }
+.st-star--4 { left: 470px; top: 170px; width: 2px; height: 2px; }
+.st-star--5 { left: 130px; top: 190px; width: 2px; height: 2px; opacity: .6; }
+.st-tower { bottom: 0; }
+.st-tower--1 { left: 0; width: 120px; height: 230px; background: var(--st-tower-1); }
+.st-tower--2 { left: 110px; width: 90px; height: 310px; background: var(--st-tower-2); }
+.st-tower--3 { left: 200px; width: 140px; height: 200px; background: var(--st-tower-3); }
+.st-tower--4 { left: 330px; width: 80px; height: 270px; background: var(--st-tower-2); }
+.st-tower--5 { left: 400px; width: 140px; height: 180px; background: var(--st-tower-1); }
+.st-light { width: 6px; height: 8px; background: var(--st-accent); }
+.st-light--1 { left: 136px; bottom: 250px; opacity: .75; }
+.st-light--2 { left: 160px; bottom: 210px; opacity: .55; }
+.st-light--3 { left: 30px; bottom: 150px; opacity: .6; }
+.st-light--4 { left: 350px; bottom: 220px; opacity: .7; }
+.st-light--5 { left: 370px; bottom: 170px; opacity: .45; }
+.st-light--6 { left: 460px; bottom: 110px; opacity: .6; }
+.st-light--7 { left: 250px; bottom: 120px; opacity: .5; }
+.st-mullion { left: 264px; top: 0; width: 0; height: 100%; border-left: 12px solid var(--st-frame); }
+.st-floor {
+  left: 0; right: 0; top: 700px; bottom: 0;
+  min-height: 200px;
+  background: var(--st-floor);
+  border-top: 1px solid var(--st-floor-edge);
+}
+.st-glow {
+  left: calc(50% + 440px); top: 470px; width: 300px; height: 300px;
   border-radius: 50%;
-  background: var(--glass);
-  animation: studio-lamp 52s ease-in-out infinite reverse;
-}
-/* Long-period, transform/opacity only, and dead under the shell's global
-   reduced-motion kill switch (style.css) — the DESIGN.md rule for ambient loops. */
-@keyframes studio-lamp {
-  0%, 100% { transform: scale(1); opacity: .85; }
-  50% { transform: scale(1.08); opacity: 1; }
+  background: radial-gradient(circle, var(--st-glow) 0%, var(--st-glow-out) 65%);
+}
+.st-lamp-stem { left: calc(50% + 570px); top: 560px; width: 6px; height: 140px; background: var(--st-stem); }
+.st-lamp-shade { left: calc(50% + 526px); top: 540px; width: 94px; height: 46px; border-radius: 48px 48px 6px 6px; background: var(--st-shade); }
+.st-mug { left: calc(50% + 340px); top: 650px; width: 46px; height: 52px; border-radius: 0 0 10px 10px; background: var(--st-mug); }
+.st-leaf { border-radius: 50% 50% 0 0; }
+.st-leaf--1 { left: calc(50% + 180px); top: 610px; width: 64px; height: 90px; background: var(--st-leaf-1); }
+.st-leaf--2 { left: calc(50% + 220px); top: 590px; width: 50px; height: 110px; background: var(--st-leaf-2); }
+
+/* Everything the artist reads or presses sits above the room. */
+.st-top,
+.st-words,
+.st-actions { position: relative; z-index: 1; }
+
+/* ---------------------------------------------------------------------------
+   The top row: the room's name, and the tally pill.
+   --------------------------------------------------------------------------- */
+.st-top { display: flex; align-items: center; min-height: 48px; gap: 16px; flex-wrap: wrap; }
+.st-eyebrow {
+  font-family: var(--st-mono);
+  font-size: 11px;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: var(--st-ink-faint);
 }
+.st-tally {
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  height: 48px;
+  padding: 0 22px;
+  box-sizing: border-box;
+  border-radius: 999px;
+  background: var(--st-glass);
+  border: 1px solid var(--st-glass-edge);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+.st-tally[hidden] { display: none; }
+.st-tally__item { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
+.st-tally__n { font-size: 20px; font-weight: 300; color: var(--st-ink); font-variant-numeric: tabular-nums; }
+.st-tally__n--credits { color: var(--st-accent); }
+.st-tally__label { font-size: 13px; color: var(--st-ink-soft); }
+.st-tally__rule { width: 1px; height: 20px; background: var(--st-rule); }
 
-/* Everything the reader acts on sits above the lamp. */
-.studio-head,
-.studio-doors,
-.studio-focus,
-.studio-rest { position: relative; z-index: 1; }
+/* ---------------------------------------------------------------------------
+   The studio's own words: the greeting, its sub-line and the hint. Held to the
+   artboard's 176px so the actions stand where it draws them.
+   --------------------------------------------------------------------------- */
+.st-words {
+  margin-top: 70px;
+  width: min(560px, 100%);
+  min-height: 176px;
+  display: flex;
+  flex-direction: column;
+  gap: 18px;
+}
+.st-greet {
+  margin: 0;
+  font-size: 64px;
+  font-weight: 200;
+  line-height: 1.02;
+  letter-spacing: -.04em;
+  color: var(--st-ink);
+}
+.st-sub {
+  margin: 0;
+  font-size: 19px;
+  line-height: 1.5;
+  font-weight: 300;
+  color: var(--st-ink-sub);
+}
+.st-words [data-words] { cursor: text; border-radius: 2px; }
+.st-words [data-words]:hover { box-shadow: 0 1px 0 var(--st-word-hover); }
+.st-words [data-words][contenteditable="true"]:focus { box-shadow: 0 1px 0 var(--st-accent); }
+.st-words [data-words][contenteditable="true"]:focus-visible {
+  outline: 1px solid var(--st-word-ring);
+  outline-offset: 6px;
+}
+/* A word the studio's reading does not list (a sentence newer than the last
+   reading) cannot be tweaked in place: it keeps its words and loses the cue. */
+.st-words [data-words][data-unread] { cursor: default; box-shadow: none; }
+.st-hint {
+  align-self: flex-start;
+  min-height: 24px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font-size: 12.5px;
+  color: var(--st-ink-hint);
+  text-align: left;
+  cursor: pointer;
+}
+.st-hint:hover { color: var(--st-ink-soft); }
+.st-hint[hidden] { display: none; }
+.st-editing {
+  margin: 0;
+  min-height: 24px;
+  font-size: 12.5px;
+  line-height: 24px;
+  color: var(--st-ink-soft);
+}
+.st-editing[hidden] { display: none; }
+.st-editing a { display: inline-block; min-height: 24px; }
+.st-editing--failed { color: var(--st-danger); }
 
-/* The quick actions (task 1004323 / TW12): the master design's 72px glass rows
-   (docs/design/mocks/tweak-mode/Main.dc.html), in the hall's own tokens so they
-   read in both modes. One today, the Approval queue; the lofi home (TW16)
-   brings the rest and the night room around them. */
-.studio-doors {
+/* The offer: taking the studio page before its words are typed over. */
+.st-offer {
   display: flex;
   flex-direction: column;
   gap: 12px;
+  padding: 16px 18px;
+  border-radius: 18px;
+  background: var(--st-glass);
+  border: 1px solid var(--st-glass-edge);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+}
+.st-offer[hidden] { display: none; }
+.st-offer__text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--st-ink-soft); }
+.st-offer__err { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--st-danger); }
+.st-offer__err[hidden] { display: none; }
+.st-offer__acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
+.st-offer__take {
+  height: 44px;
+  padding: 0 20px;
+  border-radius: 999px;
+  border: 0;
+  cursor: pointer;
+  background: var(--st-accent);
+  color: var(--st-on-accent);
+  font-size: 14px;
+}
+.st-offer__take:disabled { opacity: .6; cursor: default; }
+.st-offer__no {
+  height: 44px;
+  padding: 0 16px;
+  border-radius: 999px;
+  border: 0;
+  cursor: pointer;
+  background: var(--st-close);
+  color: var(--st-ink);
+  font-size: 13px;
+}
+
+/* ---------------------------------------------------------------------------
+   Resume and the three quick actions: 72px glass rows, 420 wide.
+   --------------------------------------------------------------------------- */
+.st-actions {
+  margin-top: 72px;
   width: min(420px, 100%);
-  margin-bottom: clamp(22px, 4vh, 40px);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
 }
-.studio-door {
+.st-resume,
+.st-action {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: center;
   gap: 3px;
   min-height: 72px;
-  padding: 0 24px;
+  padding: 10px 24px;
   box-sizing: border-box;
   border-radius: 22px;
-  cursor: pointer;
   text-align: left;
-  font-family: var(--font-body);
-  background: var(--glass);
-  border: 1px solid var(--rule-soft);
-  color: var(--ink);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
 }
-.studio-door:hover { border-color: var(--ink-faint); }
-.studio-door__label { font-size: 17px; color: var(--ink); }
-.studio-door__detail { font-size: 13px; color: var(--ink-soft); }
+.st-resume {
+  text-decoration: none;
+  background: var(--st-resume);
+  border: 1px solid var(--st-resume-edge);
+}
+.st-resume[hidden] { display: none; }
+.st-action {
+  cursor: pointer;
+  background: var(--st-glass);
+  border: 1px solid var(--st-glass-edge);
+  color: var(--st-ink);
+}
+.st-action:hover { border-color: var(--st-rule); background: var(--st-close); }
+.st-resume__label,
+.st-action__label { font-size: 17px; color: var(--st-ink); }
+.st-resume__detail { font-size: 13px; color: var(--st-link); }
+.st-action__detail { font-size: 13px; color: var(--st-ink-faint); }
+.st-resume:focus-visible,
+.st-action:focus-visible,
+.st-hint:focus-visible,
+.st-older:focus-visible { outline: 2px solid var(--st-accent); outline-offset: 3px; }
 
-/* The head: a mono eyebrow naming the mode, then the greeting as the display
-   voice (Manrope light, tight), then the live count as a quiet sub-line. */
-.studio-head { margin-bottom: clamp(22px, 4vh, 40px); max-width: var(--measure); }
-.studio-eyebrow {
-  margin: 0 0 10px;
-  font-family: var(--font-mono);
+/* The older reviews' door: a quiet line under the actions, not a fourth row. */
+.st-older {
+  align-self: flex-start;
+  min-height: 24px;
+  margin-top: 6px;
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+  font-family: var(--st-mono);
+  font-size: 11px;
+  letter-spacing: .08em;
+  color: var(--st-ink-faint);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.st-older:hover { color: var(--st-ink); }
+.st-older[hidden] { display: none; }
+
+/* ---------------------------------------------------------------------------
+   The small glass panel (the Tweak/CopyWrite Flow and Artist Review Status):
+   580 wide over the room. Like the Approval queue's, the one thing that follows
+   the hall's theme is the scrim: the artboard's .42 over the dark room, .94
+   over the light hall (the panel's grey words fall under AA at .42 over a light
+   page), and .88 on a phone.
+   --------------------------------------------------------------------------- */
+.st-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal, 160);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  box-sizing: border-box;
+  background: var(--st-scrim);
+  color: var(--st-ink);
+  font-family: var(--st-face);
+  color-scheme: dark;
+}
+.st-overlay[hidden] { display: none; }
+html[data-theme="dark"] body[data-page="studio"] { --st-scrim: rgba(4, 5, 9, .42); }
+@media (prefers-color-scheme: dark) {
+  html:not([data-theme]) body[data-page="studio"] { --st-scrim: rgba(4, 5, 9, .42); }
+}
+html.st-open { overflow: hidden; }
+.st-dialog {
+  width: min(580px, 100%);
+  max-height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+  padding: 34px 36px 32px;
+  border-radius: 30px;
+  background: var(--st-panel);
+  border: 1px solid var(--st-panel-edge);
+  backdrop-filter: blur(30px) saturate(160%);
+  -webkit-backdrop-filter: blur(30px) saturate(160%);
+  box-shadow: inset 0 1px 0 var(--st-panel-rim), 0 40px 90px var(--st-panel-drop);
+  display: flex;
+  flex-direction: column;
+  gap: 22px;
+}
+.st-overlay button { font-family: inherit; }
+.st-overlay :focus-visible { outline: 2px solid var(--st-accent); outline-offset: 2px; }
+.st-dialog__head { display: flex; align-items: center; gap: 12px; }
+.st-dialog__title {
+  margin: 0;
+  font-family: var(--st-mono);
   font-size: 11px;
+  font-weight: 400;
   letter-spacing: .14em;
   text-transform: uppercase;
-  color: var(--ink-faint);
+  color: var(--st-ink-soft);
 }
-.studio-greet {
-  margin: 0 0 8px;
-  font-weight: 300;
-  font-size: clamp(28px, 4.4vw, 46px);
-  line-height: 1.04;
-  letter-spacing: -.028em;
+.st-close {
+  margin-left: auto;
+  height: 44px;
+  padding: 0 16px;
+  border-radius: 999px;
+  cursor: pointer;
+  border: 0;
+  background: var(--st-close);
+  color: var(--st-ink);
+  font-size: 13px;
+}
+.st-dialog__body { display: flex; flex-direction: column; gap: 22px; }
+.st-panel__line { margin: 0; font-size: 15px; line-height: 1.5; color: var(--st-ink-soft); }
+.st-panel__err { margin: 0; font-size: 14px; line-height: 1.45; color: var(--st-danger); }
+.st-panel__err[hidden] { display: none; }
+
+/* The Tweak/CopyWrite Flow: the recommended page, take it, pick another. */
+.st-next { display: flex; flex-direction: column; gap: 6px; }
+.st-next__page { font-size: 40px; font-weight: 200; line-height: 1.15; letter-spacing: -.035em; color: var(--st-ink); overflow-wrap: anywhere; }
+.st-next__why { font-size: 15px; color: var(--st-ink-soft); }
+.st-next__acts { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
+.st-take {
+  display: inline-flex;
+  align-items: center;
+  height: 48px;
+  padding: 0 26px;
+  border-radius: 999px;
+  border: 0;
+  cursor: pointer;
+  background: var(--st-accent);
+  color: var(--st-on-accent);
+  font-size: 15px;
+}
+.st-take:disabled { opacity: .6; cursor: default; }
+.st-pick {
+  height: 44px;
+  padding: 0 6px;
+  cursor: pointer;
+  border: 0;
+  background: transparent;
+  color: var(--st-ink-faint);
+  font-size: 13.5px;
+  text-decoration: underline;
+}
+.st-picks { display: flex; flex-wrap: wrap; gap: 8px; }
+.st-picks[hidden] { display: none; }
+.st-chip {
+  min-height: 44px;
+  padding: 0 16px;
+  border-radius: 999px;
+  cursor: pointer;
+  background: var(--st-glass);
+  border: 1px solid var(--st-chip-edge);
+  color: var(--st-ink);
+  font-size: 13.5px;
+  text-align: left;
+}
+
+/* Artist Review Status: one line per surface, "N of M tweaked". */
+.st-surfaces { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 0; list-style: none; }
+.st-surface { display: flex; flex-direction: column; gap: 9px; }
+.st-surface__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
+.st-surface__name { font-size: 20px; font-weight: 300; color: var(--st-ink); }
+.st-surface__where { font-size: 13px; color: var(--st-ink-dim); }
+.st-surface__count { margin-left: auto; font-size: 14px; color: var(--st-ink-soft); font-variant-numeric: tabular-nums; }
+.st-surface__track { height: 4px; border-radius: 999px; background: var(--st-track); overflow: hidden; }
+.st-surface__fill { height: 4px; border-radius: 999px; background: var(--st-accent); }
+.st-asked { margin: 0; font-size: 14px; line-height: 1.5; color: var(--st-ink-faint); }
+
+/* ---------------------------------------------------------------------------
+   The phone. The room keeps its night: the window shrinks to the top right
+   (scaled whole, so its moon and lights keep their places), the desk sits on a
+   floor at the bottom, and the words and actions take the width.
+   --------------------------------------------------------------------------- */
+@media (max-width: 760px) {
+  .studio { padding: 20px 16px 140px; }
+  .st-top { gap: 12px; }
+  .st-tally {
+    margin-left: 0;
+    width: 100%;
+    height: auto;
+    min-height: 48px;
+    padding: 8px 16px;
+    gap: 10px;
+    justify-content: space-between;
+  }
+  .st-tally__item { flex-direction: column; align-items: flex-start; gap: 0; }
+  .st-tally__n { font-size: 18px; }
+  .st-tally__label { font-size: 12px; }
+  .st-window {
+    left: auto;
+    right: 16px;
+    top: 96px;
+    transform: scale(.36);
+    transform-origin: top right;
+    opacity: .9;
+  }
+  .st-words { margin-top: 110px; min-height: 0; gap: 14px; }
+  .st-greet { font-size: 44px; }
+  .st-sub { font-size: 17px; }
+  .st-actions { margin-top: 36px; width: 100%; }
+  .st-floor { top: auto; bottom: 0; min-height: 0; height: 96px; }
+  .st-glow { left: auto; right: -110px; top: auto; bottom: -20px; }
+  .st-lamp-stem { left: auto; right: 44px; top: auto; bottom: 96px; height: 100px; }
+  .st-lamp-shade { left: auto; right: 0; top: auto; bottom: 170px; }
+  .st-mug { left: auto; right: 116px; top: auto; bottom: 96px; }
+  .st-leaf--1 { left: auto; right: 190px; top: auto; bottom: 96px; }
+  .st-leaf--2 { left: auto; right: 164px; top: auto; bottom: 96px; }
+  .st-overlay { padding: 8px; }
+  body[data-page="studio"] .st-overlay { --st-scrim: rgba(4, 5, 9, .88); }
+  .st-dialog { padding: 24px 20px; border-radius: 24px; }
+  .st-next__page { font-size: 32px; }
+}
+@media (max-width: 360px) {
+  .st-tally__n { font-size: 16px; }
+  .st-tally__label { font-size: 11px; }
+  .st-greet { font-size: 38px; }
+}
+
+/* ===========================================================================
+   The older reviews (R06 of goal 1000074, task 1003117; retired in TW14,
+   task 1004325). One piece at a time, a stone to tend, in the hall's own
+   tokens, in a dialog that opens from the quiet door above.
+   =========================================================================== */
+.st-reviews {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal, 160);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  box-sizing: border-box;
+  background: var(--scrim);
   color: var(--ink);
+  font-family: var(--font-body);
 }
-.studio-sub {
+.st-reviews[hidden] { display: none; }
+.st-reviews__dialog {
+  width: min(780px, 100%);
+  max-height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
+  padding: clamp(18px, 3vw, 28px);
+  border-radius: var(--radius);
+  background: var(--bg);
+}
+.st-reviews__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
+.st-reviews__head .btn-ghost { margin-left: auto; }
+.st-reviews__title {
   margin: 0;
-  font-size: 15.5px;
-  line-height: 1.5;
-  color: var(--ink-soft);
+  font-weight: 300;
+  font-size: clamp(20px, 2.6vw, 24px);
+  letter-spacing: -.02em;
+  color: var(--ink);
 }
+.st-reviews__sub { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); max-width: var(--measure); }
 
-/* The focus — the one thing to tend now. Tone separates it from the room (the
-   v3 hall rule: a --bg-card panel at the full radius, no drawn edge), and it is
-   held to a reading width so it stays a card and not a banner. */
+/* The focus — the one thing to tend now. Tone separates it (the v3 hall rule:
+   a --bg-card panel at the full radius, no drawn edge). */
 .studio-focus {
-  max-width: 720px;
   background: var(--bg-card);
   border-radius: var(--radius);
-  padding: clamp(22px, 3.2vw, 34px);
+  padding: clamp(18px, 3vw, 30px);
 }
 .studio-card__eyebrow {
   margin: 0 0 14px;
@@ -161,8 +609,7 @@
   color: var(--ink);
 }
 /* The product's own words, shown as evidence for a flag — mono, wrapping
-   preserved (leading/trailing space is often exactly what is wrong), in a soft
-   tonal well so the quote reads as quotation, not as this room's own voice. */
+   preserved, in a soft tonal well so the quote reads as quotation. */
 .studio-card__quote {
   display: block;
   margin: 0 0 16px;
@@ -185,20 +632,7 @@
 }
 
 /* THE PLATE — the reviewed work's ship-time visual (task 1003829). The picture
-   IS the card: an artist is being asked to LOOK at something, so it is given the
-   card's full width and as much height as a screen can spare, not the 44px
-   thumbnail a ship feed uses. Markup comes from the kit's one renderer
-   (OTBVisual.taskVisualFigureHtml); only the size is this room's decision.
-
-   max-height in vh, and MEASURED at 1440x900 rather than chosen. The size an
-   artist can judge it at wins over a zero-scroll card — that is the task's own
-   priority — so this is not tuned to fit the verdict on the first screen; the
-   room's head alone is ~300px and no judgeable plate fits under it. What 40vh
-   buys is that the picture AND its caption are wholly in view together (plate
-   459-819, caption 827-865), with the weights one short scroll below (946). At
-   58vh the caption fell off too, which is worse: a plate you cannot read the
-   subject of. The tonal well behind it is --glass, so a transparent PNG has
-   something to sit on in both modes. */
+   IS the card; markup comes from the kit's one renderer. */
 .studio-plate { margin: 0 0 18px; }
 .studio-plate__img {
   display: block;
@@ -209,9 +643,6 @@
   border-radius: var(--radius-sm);
   background: var(--glass);
 }
-/* The shipper's own words about the picture, in the caption voice — drawn only
-   when they wrote some (the kit omits the element otherwise, never a caption
-   that reads "Visual for task 1899"). */
 .studio-plate__caption {
   margin: 8px 0 0;
   font-size: 12.5px;
@@ -220,9 +651,7 @@
   max-width: var(--measure);
 }
 
-/* The two steps of a review (R04): coach the grader, then remake or tweak. Not
-   a checklist widget — a gentle reminder of the shape of the work, so the room
-   describes the craft without becoming the form the criterion warns against. */
+/* The two steps of a review (R04): coach the grader, then remake or tweak. */
 .studio-steps {
   list-style: none;
   margin: 0 0 20px;
@@ -253,10 +682,7 @@
   color: var(--ink-faint);
 }
 
-/* THE VERDICT — the artist's answer, said here rather than somewhere else
-   (task 1003829). A tonal well separates it from the card's prose without a
-   drawn edge (the v3 hall rule), and it sits ABOVE the actions so the reader
-   meets "what did you think" before "open this" / "let it be". */
+/* THE VERDICT — the artist's answer, said here (task 1003829). */
 .studio-verdict {
   margin: 0 0 20px;
   padding: 16px;
@@ -272,8 +698,6 @@
   text-transform: var(--label-case);
   color: var(--ink-soft);
 }
-/* The clarifier rides inside the label (so clicking it still focuses the field)
-   but drops out of the label voice — caps are for the label, not a sentence. */
 .studio-verdict__label small {
   font-family: var(--font-body);
   font-size: 12.5px;
@@ -288,27 +712,18 @@
   font-size: 14.5px;
   line-height: 1.5;
 }
-/* The inline error, beside the control that caused it and gone the moment the
-   field is edited. --danger is the platform's measured status red; the room
-   spends no other colour. */
 .studio-verdict__err {
   margin: 8px 0 0;
   font-size: 13px;
   line-height: 1.45;
   color: var(--danger);
 }
-/* Three equal answers on one line, wrapping to a column on a phone rather than
-   squeezing. The 24px control floor is the shell's (.btn-ghost); the gap keeps
-   them from reading as a segmented control, which would imply one is selected. */
 .studio-verdict__weights {
   margin-top: 12px;
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
 }
-/* What a viewer below the routes' floor sees instead of three buttons it would
-   refuse: a sentence naming where the verdict is recorded. Quiet, not a warning
-   — this is not an error, it is a different door. */
 .studio-verdict__sealed {
   margin: 0 0 20px;
   padding: 14px 16px;
@@ -319,9 +734,6 @@
   color: var(--ink-soft);
   max-width: var(--measure);
 }
-
-/* The one place the accent is spent on a control. Ghost is the calm pass —
-   "let it be for now" advances to the next piece without changing anything. */
 .studio-card__actions {
   display: flex;
   flex-wrap: wrap;
@@ -329,17 +741,15 @@
   align-items: center;
 }
 
-/* What else waits — a gentle line and a row of stones, one per remaining piece
-   (the zen garden), never a table. Non-interactive on purpose: the room asks the
-   reader to tend one thing, not to scan a queue. */
+/* What else waits — a gentle line and a row of stones, never a table. */
 .studio-rest {
-  margin-top: clamp(20px, 3.5vh, 34px);
-  max-width: 720px;
+  margin-top: 18px;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 14px;
 }
+.studio-rest[hidden] { display: none; }
 .studio-rest__line {
   margin: 0;
   font-size: 13.5px;
@@ -358,27 +768,17 @@
   background: var(--ink-faint);
 }
 
-/* Where the full queues live — the calm room is the front door; the tables it
-   replaces stay one link away for when the reader wants the whole list. */
+/* Where the full queues live, one link away. */
 .studio-links {
-  position: relative;
-  z-index: 1;
-  margin-top: clamp(26px, 4vh, 44px);
-  padding-top: 18px;
+  margin-top: 22px;
+  padding-top: 16px;
   border-top: 1px solid var(--rule-soft);
   display: flex;
   flex-wrap: wrap;
   gap: 8px 22px;
-  max-width: 720px;
   font-size: 13.5px;
   color: var(--ink-faint);
 }
-/* The 24px control floor, which these two links were failing at every width and
-   in both modes (the kit's controls-24px audit: 229x21 and 154x21). A link IS a
-   control, and the floor is "clears 24px on both sides" — so they get the height
-   here rather than staying the one failing pair on an otherwise clean surface.
-   inline-flex + align-items keeps the text where it sits today; only the hit
-   area grows. */
 .studio-links a {
   color: var(--accent-ink);
   display: inline-flex;
@@ -386,13 +786,7 @@
   min-height: 24px;
 }
 
-/* The empty room — a good sign, said plainly, not a dead panel. */
-.studio-empty {
-  max-width: 720px;
-  background: var(--bg-card);
-  border-radius: var(--radius);
-  padding: clamp(24px, 3.4vw, 36px);
-}
+/* The empty garden — a good sign, said plainly. */
 .studio-empty h2 {
   margin: 0 0 8px;
   font-weight: 300;
@@ -408,14 +802,9 @@
   max-width: var(--measure);
 }
 
-/* Phone: the room keeps its air but the head and cards take the full width. */
 @media (max-width: 640px) {
-  .studio { padding-top: 20px; }
+  .st-reviews { padding: 8px; }
   .studio-card__actions { gap: 8px; }
-  /* The plate takes less of a phone's height so the verdict is still reachable
-     without a scroll past the picture. */
   .studio-plate__img { max-height: 34vh; }
-  /* Full-width weights, stacked: three buttons side by side at 320px would each
-     fall under the 24px-clearance floor. */
   .studio-verdict__weights { flex-direction: column; align-items: stretch; }
 }