/* ════════════════════════════════════════════════════════════════════════
   CV BUILDER STUDIO PANEL (owner, 2026-09-11: "implement Studio now into
   live site"). The analysis panel of the CV Builder, redesigned as a
   studio: the CV is the canvas, the advert's requirements are tokens you
   drag onto it, a Before / Diff / After toggle shows what changed, and a
   command palette (Ctrl or Cmd K) lists every action.

   Everything here is scoped to #atsCvRoot.rr-studio, which
   assets/cv-studio.js adds when it mounts. The legacy cards stay in the
   DOM (their ids are read by other code and pinned by tests) and are
   hidden by the first rule below. Ink, hairlines, one acid-yellow accent
   (the brand's #e5ff00), red only for "the advert requires it and the CV
   is silent". No cards, no pills, no gradients.
   ════════════════════════════════════════════════════════════════════════ */

#atsCvRoot.rr-studio{
  --st-ink:#0d0d0d; --st-ink2:#3a3936; --st-mute:#747474; --st-tint:#F4F4F2; --st-hair:#dedad2; --st-hair2:#aaa59d;
  --st-acc:#e5ff00; --st-acc2:#d6ee00; --st-red:#c4271c; --st-red-soft:#FBE9E7;
  --st-good:#1B7A46; --st-good-soft:#DFF3E7; --st-warn:#9A6B00; --st-warn-fill:#F0C64F;
  /* The surface roles, named so the panel can invert them on its own:
     --st-bg is what a surface sits on, --st-on-ink is text drawn on an
     --st-ink fill, --st-on-acc is text drawn on the accent. */
  --st-bg:#fff; --st-bg2:#fbfbfa; --st-on-ink:#fff; --st-on-acc:#0d0d0d; --st-ground:#f7f7f7;
  --st-sans:'Instrument Sans',Helvetica,Arial,sans-serif;
  --st-mono:'IBM Plex Mono','JetBrains Mono',ui-monospace,Menlo,monospace;
  --sidebar-w:396px;
}
@media (max-width:1180px){ #atsCvRoot.rr-studio{ --sidebar-w:352px; } }

/* ── The panel in daylight ─────────────────────────────────────────────
   Owner, 2026-09-22, on a screenshot of the whole app: "i think the
   colours are all off, green white black yellow ... can we change to maybe
   white and see how it fits in? im talking about the cv builder side panel
   btw".
   They are right, and the screenshot says why better than any argument:
   the toolbar is white with the brand yellow on Download PDF, the CV is a
   white sheet, the rail is white -- and a black column with a cyan charge
   sat in the middle of it. Two worlds in one window. The panel was made
   dark on 2026-09-21 ("can we inverse the colours") and repainted in
   Aurora on the 22nd; both were good rooms in the wrong house.
   So the panel now takes the page's own light register. The scopes below
   are unchanged, and so is the reason they exist: these four surfaces are
   the panel and the things that float off it, and the CV stays a white
   sheet that prints as one.
   What is NOT simply the root block: the three marks. The page's own
   green, amber and red are 2.3 apart in OKLab for a protan reader, where
   8.0 is the target and 6.0 the floor, and 15.0 apart for a reader with
   full colour vision, which is itself the hard floor. They were never
   asked to carry a meaning next to each other before this panel existed.
   Re-stepped and measured the same way the dark ones were: 8.0 protan,
   10.5 tritan, 15.9 normal. Every one of them also clears 4.5 as TEXT on
   both the white and the tint, which the page's amber did not (3.6).
   The shapes stay as they always have: on the CV is a solid square,
   partly there is half filled, not mentioned is an outline. */
#rrStudio,.rr-st-pal,body.rr-st-on .rr-iae:not(.rr-kwp),body.rr-st-on #cvIaeHint{
  /* the page's own paper, its raised tint, and its ink */
  --st-bg:#ffffff; --st-bg2:#fbfbfa; --st-tint:#f4f4f2;
  --st-ink:#0d0d0d; --st-ink2:#3a3936;
  /* mute carries 11px sentences and clears 4.5 on both surfaces (5.36 on
     the white, 4.86 on the tint); the page's #747474 cleared only one. */
  --st-mute:#6b6b66;
  /* hair2 edges the "not mentioned" cell, which is otherwise a white
     square on a white ground, so it is a component edge and holds 3:1. */
  --st-hair:#e4e0d8; --st-hair2:#8f8a80;
  --st-on-ink:#ffffff; --st-on-acc:#0d0d0d;
  /* The charge is the brand yellow again, which is the whole point: the
     one lit control in the panel and the Download PDF button in the
     toolbar above it are now the same colour. */
  --st-acc:#e5ff00; --st-acc2:#d6ee00;
  /* The three marks, re-stepped for white and checked on EVERY pair.
     The first light stepping was checked on adjacent pairs only, so the
     two states this panel exists to tell apart -- on the CV, and not
     mentioned -- were never compared with each other. They were 2.0 apart
     in OKLab under deutan: the same colour to a red-green colourblind
     reader. Caught by re-running the validator with --pairs all after a
     Mobbin reference pass, and it is why "not mentioned" is a PURPLE.
     Under deutan the red-green axis collapses, so any red sits on top of
     any green of similar lightness, and both of these have to be dark
     enough to clear 4.5 as text on white -- which leaves no lightness
     gap to separate them with. Purple is the only third mark that
     survives. 8.1 protan, 10.5 tritan, 15.4 normal, and the green carries
     enough chroma not to read as grey (the first one that passed the pair
     checks came in under the floor at 0.084 and would have).
     --st-red keeps its name because twenty rules and their tests read it;
     it has always been the "not mentioned" slot rather than a hue. */
  --st-red:#7B1FA2; --st-red-soft:#f2e8f6;
  --st-good:#00785A; --st-good-soft:#e0efeb;
  --st-warn:#8F6100; --st-warn-fill:#8F6100;
  /* The figure's own bad tier, which is NOT a status mark and so is not
     bound by the separation above: the ring is one colour at a time and
     never sits beside another tier, so only its contrast matters. It
     needs a real red, because a purple ring around a low score reads as
     a category rather than as a warning -- the marks went purple to stay
     apart from the green, and the verdict has no such neighbour. */
  --st-bad:#c4271c;
  /* The plan's own surface. Owner, 2026-09-22: "same colours" -- so this
     is The Leap's own coral, sampled off the screenshot rather than
     guessed at: #f7654b on the card, #e7f548 on its button, #f7f7f7 as
     the page ground.
     The coral is the better of the two oranges on the numbers as well as
     the one asked for. Against white it clears 3.04, where YC's #FF6600
     managed 2.94 and missed the 3 to 1 a surface edge wants; ink on it is
     6.40 against 6.62, which is a rounding error. And their button lime
     turned out to be a hair off the brand yellow already -- 16.24 against
     17.25 for ink -- so the button needed no change to match.
     It is a SURFACE and not a mark, so it is not bound by the separation
     the three marks are: it never has to be told apart from one. */
  --st-plan:#f7654b; --st-plan-edge:#e04a30;
  /* The ground the cards sit on, also sampled from the reference: a light
     grey, not white. It is what makes a white card read AS a card rather
     than as more of the same surface, which is the whole mechanism of that
     layout. The sheet beside the panel stays white and prints as one. */
  --st-ground:#f7f7f7; --st-edge:#141414;
  /* The second light. On a dark panel it was an aurora; on paper it is a
     warm wash at the top edge and nothing more. */
  --st-sky:#efe9d8;
}/* The surfaces and the on-accent text are set at the end of this file, so
   they win over the rules that come between. */

/* The legacy cards stay for their ids; the studio is the only thing shown. */
#atsCvRoot.rr-studio .sidebar > :not(#rrStudio){ display:none !important; }
#atsCvRoot.rr-studio .sidebar{ padding:0; gap:0; background:#fff; border-right:1px solid var(--st-hair); overflow:hidden; }
#atsCvRoot.rr-studio .toolbar{ top:34px; }

/* Owner, 2026-09-22, pointing at the header beside the reference: "this
   in this style". The reference's layout is one mechanism -- a grey
   ground, white cards with a real ink edge sitting on it, a pill astride
   the top of each, and exactly one card in colour for the task at hand.
   Flat white on flat white cannot do that, so the panel becomes the
   stack: the score is a card, the list is a card, the plan is the coral
   one among them. */
#rrStudio{ display:flex; flex-direction:column; height:100%; min-height:0; padding:12px 10px 0; gap:11px; font-family:var(--st-sans); font-size:13px; line-height:1.4; color:var(--st-ink); -webkit-font-smoothing:antialiased; }
#rrStudio .st-head,#rrStudio .st-listcard{ position:relative; border:1.5px solid var(--st-edge); border-radius:16px; background:var(--st-bg); }
/* The card is the box with the edge and the pill. It must NOT clip, or it
   clips the pill astride its own top edge; the scroller inside carries the
   radius and does its own clipping. */
/* A floor, because the stack above it is flex:none and the list card takes
   what is left: with the plan's three steps in, the rig showed it squeezed
   to 2px -- a bordered hairline with the "Still to fill in" block scrolled
   off the panel inside it. */
#rrStudio .st-listcard{ flex:1 1 auto; min-height:158px; display:flex; flex-direction:column; overflow:visible; }
/* The pill astride the top edge, as the reference has it. */
#rrStudio .st-tab{ position:absolute; top:-10px; left:15px; z-index:1; display:inline-flex; align-items:center;
  padding:4px 10px; border-radius:99px; background:var(--st-edge); color:var(--st-bg);
  font:500 9px/1 var(--st-mono); letter-spacing:.16em; text-transform:uppercase; }
/* A section heading, the way the reference heads a list: plain, a size up,
   with what would be its controls on the right. The pill is reserved for
   the two cards that are heroes -- the match and the plan -- so a pill on
   every card stops meaning anything. */
#rrStudio .st-sech{ display:flex; align-items:center; gap:10px; margin:6px 2px 0; }
#rrStudio .st-sech .t{ flex:1 1 auto; min-width:0; font:600 17px/1.2 var(--st-sans); letter-spacing:-.025em; color:var(--st-ink); }
#rrStudio .st-sech .n{ flex:none; font:500 11.5px/1.2 var(--st-sans); color:var(--st-mute); }
#rrStudio .st-sech .n:empty,#rrStudio .st-sech .d:empty{ display:none; }
/* The list's one door, as a small outline control beside the heading --
   where the reference keeps "Design my store" beside "Products". It is the
   way in AND the way back, so there is one door in one place instead of a
   row under the plan and another at the foot of the list. */
#rrStudio .st-secbtn{ display:inline-flex; align-items:center; gap:5px; padding:5px 9px 5px 11px; border-radius:99px;
  border:1px solid var(--st-hair2); background:var(--st-bg); color:var(--st-ink2);
  font:500 11.5px/1 var(--st-sans); white-space:nowrap; transition:background .14s, border-color .14s, color .14s; }
#rrStudio .st-secbtn:hover{ background:var(--st-tint); border-color:var(--st-edge); color:var(--st-ink); }
#rrStudio .st-secbtn .h{ display:none; }
#rrStudio .st-secbtn svg{ width:13px; height:13px; flex:none; }
#rrStudio .st-secbtn[aria-expanded="true"] svg{ transform:rotate(180deg); }
#rrStudio *,#rrStudio *::before,#rrStudio *::after{ box-sizing:border-box; }
#rrStudio button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-align:left; }
#rrStudio b{ font-weight:600; }
#rrStudio :focus-visible{ outline:2px solid var(--st-ink); outline-offset:1px; }
#rrStudio svg{ display:block; }
#rrStudio .st-mono{ font-family:var(--st-mono); font-variant-numeric:tabular-nums; }

/* ── head: the figure, the track, the counts, the lead ── */
#rrStudio .st-head{ padding:16px 17px 13px; flex:none; }
/* The figure line, as the approved prototype has it: the figure, what it is
   out of, the verdict it amounts to, and the read's own note on the right
   with the advert it was read from. One baseline, nothing stacked. */
#rrStudio .st-fig{ display:flex; align-items:center; gap:13px; }
/* ── Aurora, screen 1 ──────────────────────────────────────────────────
   The prototype's first screen reads straight down the middle: the strip
   saying what you are looking at, the ring, the verdict as a heading, the
   sentence under it, the marks, the counts. One picture, one plain
   sentence, one button, and everything else one press away.
   Only the CALM state gets it. A walk, or an opened list, keeps the
   compact two-column header, because then the panel's job is the work in
   front of you and a 96px ring in the middle of it is furniture. */
#rrStudio .st-bar{ display:flex; align-items:flex-start; gap:10px; }
#rrStudio .st-bar .rd{ min-width:0; flex:1 1 auto; font-size:12px; line-height:1.4; color:var(--st-mute); }
#rrStudio .st-bar .rd b{ font-family:var(--st-mono); font-weight:500; color:var(--st-ink); }
#rrStudio .st-bar .rd button{ text-decoration:underline; text-underline-offset:3px; color:var(--st-ink); }
#rrStudio .st-head.calm .st-fig{ flex-direction:column; gap:0; margin-top:10px; }
/* 100 rather than 112, and the verdict a size down with it. The rig's
   reason: with the numbered checklist under the heading, the third step
   fell outside the list card at rest -- a three-item checklist showing two
   of three reads as unfinished, and the panel clips rather than scrolls, so
   nothing below the fold comes back. The disc is still four times the
   stroke it had before this round. */
#rrStudio .st-head.calm .st-ring{ width:100px; height:100px; }
/* 100px ring: hole radius 33.35px, worst corner 31.4px with "100" in it.
   Re-measured at this size, not carried over: at 112/40 that corner fell
   outside the hole, and the pair moved twice after -- once when the "/100"
   left and the figure could grow, once when the checklist needed the
   height back. */
#rrStudio .st-head.calm .st-fig .n{ font-size:32px; }
#rrStudio .st-head.calm .st-figw{ flex:none; margin-top:10px; text-align:center; }
#rrStudio .st-head.calm .st-fig .vb{ font:600 24px/1.15 var(--st-sans); letter-spacing:-.035em; color:var(--st-ink); text-wrap:balance; }
#rrStudio .st-head.calm .st-lead{ text-align:center; }
/* The ring: the figure and what it is out of, in one object. The viewBox
   is 96 square at every size, so the arc length in the script never moves
   when the box does. */
#rrStudio .st-ring{ position:relative; display:grid; place-items:center; width:64px; height:64px; flex:0 0 auto; }
#rrStudio .st-ring svg{ position:absolute; inset:0; width:100%; height:100%; }
/* The track is the pale one so the arc over it clears 3:1 in every tier
   (good 3.7:1, warn 3.5:1, bad 3.4:1 against #e4e0d8). A pale fill on a
   white card is only 1.32:1 against the card itself, so the SHAPE is
   carried by the two hairlines at its edges instead -- a component edge at
   3.43:1, which is the job --st-hair2 exists for. */
#rrStudio .st-ring .tr{ stroke:var(--st-hair); }
#rrStudio .st-ring .ed{ stroke:var(--st-hair2); }
/* No stroke-dasharray here: a CSS one beats the presentation attribute the
   script sets, and the arc stays at zero for ever. */
#rrStudio .st-ring .ar{ stroke:var(--st-mute); transition:stroke-dasharray .45s cubic-bezier(.3,0,.2,1); }
#rrStudio .st-fig.good .st-ring .ar{ stroke:var(--st-good); }
#rrStudio .st-fig.warn .st-ring .ar{ stroke:var(--st-warn); }
#rrStudio .st-fig.bad .st-ring .ar{ stroke:var(--st-bad); }
#rrStudio .st-ring .mid{ display:grid; justify-items:center; line-height:1; }
#rrStudio .st-figw{ min-width:0; flex:1 1 auto; }
/* The number sits in the hole, in ink. On a 20px disc the colour is
   already being carried at full strength by the ring around it, and a
   coloured figure inside a coloured disc is the same fact twice. */
/* Sized to the hole, not to taste, and measured rather than estimated: the
   rig sets the figure to "100" (the widest it can ever be) and checks every
   CORNER of its box against the hole's RADIUS, because the hole is a circle
   and a box can be narrower than the diameter and still cross the stroke.
   Compact, 64px ring: hole radius 21.35px, worst corner 19.62px.
   These numbers are re-measured on every size change, because the review
   caught three copies of them left over from two rounds back. The first cut
   of the disc put a 33px stack in a 30.3px hole with the "/100" drawn on the
   arc, where mute text over the warn tier is 1.01:1. */
#rrStudio .st-fig .n{ font:600 20px/1 var(--st-mono); letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--st-ink); }
#rrStudio .st-fig .n.empty{ color:var(--st-mute); }
#rrStudio .st-fig .vb{ display:block; font:600 13px/1.3 var(--st-sans); color:var(--st-mute); white-space:normal; }
#rrStudio .st-fig .vb:empty{ display:none; }
/* The verdict word is not painted by the score: the ring and the figure
   inside it carry that colour, and the word is its own carrier. */
#rrStudio .st-collapse{ margin-left:8px; width:22px; height:22px; display:grid; place-items:center; color:var(--st-mute); border-radius:4px; align-self:flex-start; flex:none; }
#rrStudio .st-collapse:hover{ background:var(--st-tint); color:var(--st-ink); }
/* While the walk runs it owns the head: the pre-walk summary steps aside so
   the step line and its rail sit directly under the figure. */
#rrStudio .st-head.walking .st-states,
#rrStudio .st-head.walking .st-lead{ display:none; }
#rrStudio .st-walk-slot:empty{ display:none; }
#rrStudio .st-lead{ margin:7px 0 0; font-size:12.5px; color:var(--st-ink2); line-height:1.45; }
#rrStudio .st-lead b{ font-family:var(--st-mono); font-weight:500; color:var(--st-ink); font-size:12px; }
#rrStudio .st-lead b.reach{ background:var(--st-acc); padding:0 3px; border-radius:2px; }
#rrStudio .st-lead button{ text-decoration:underline; text-underline-offset:3px; }

/* ── list ── */
#rrStudio .st-list{ flex:1 1 auto; min-height:0; overflow:auto; padding-bottom:4px; border-radius:14.5px; }
/* Each group is a section: a rule above, the title a size up, the reason
   on its own line, then air before the rows. */
#rrStudio .st-grp{ display:block; width:100%; padding:13px 14px 7px 18px; border-top:1px solid var(--st-hair); }
#rrStudio .st-list > .st-grp:first-child{ border-top:0; padding-top:10px; }
/* The plan card carries the list's own 1.5px edge under it, so the first
   group after it must not draw a second rule an ink hairline below the
   first. :first-child does not cover this -- renderList puts .st-go above
   the groups whenever there is a plan, so the group is never the first
   child in the state that actually needs it (review, round 4). */
#rrStudio .st-list > .st-go + .st-grp{ border-top:0; padding-top:10px; }
#rrStudio .st-grp-row{ display:flex; align-items:baseline; gap:8px; }
#rrStudio .st-grp .t{ font-size:13px; font-weight:600; letter-spacing:-.01em; }
#rrStudio .st-grp .why{ margin-top:2px; font-size:11.5px; line-height:1.4; font-weight:400; color:var(--st-mute); }
#rrStudio .st-grp .n{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-family:var(--st-mono); font-weight:400; color:var(--st-mute); font-size:11px; white-space:nowrap; }
#rrStudio .st-grp .n b{ font-weight:500; color:var(--st-ink); }
#rrStudio .st-grp.fold{ cursor:pointer; }
#rrStudio .st-grp.fold:hover .t{ text-decoration:underline; text-underline-offset:3px; }
#rrStudio .st-grp + .st-tok,#rrStudio .st-grp + .st-hist{ margin-top:1px; }
#rrStudio .st-tok + .st-grp,#rrStudio .st-hist + .st-grp,#rrStudio .st-wrap + .st-grp,#rrStudio .st-chk + .st-grp{ margin-top:8px; }
#rrStudio .st-grp .chev{ color:var(--st-mute); transition:transform .15s ease; }
#rrStudio .st-grp[aria-expanded=false] .chev{ transform:rotate(-90deg); }

#rrStudio .st-tok{ display:grid; grid-template-columns:20px 12px minmax(0,1fr) auto auto 12px; align-items:center; gap:8px; width:100%; height:28px; padding:0 12px 0 18px; font-size:12.5px; user-select:none; -webkit-user-select:none; touch-action:none; position:relative; }
#rrStudio .st-tok.drag{ cursor:grab; }
#rrStudio .st-tok:hover{ background:var(--st-tint); }
#rrStudio .st-tok.sel{ background:var(--st-tint); box-shadow:inset 3px 0 0 var(--st-acc); }
#rrStudio .st-tok .rk{ font-family:var(--st-mono); font-size:11px; color:var(--st-mute); }
#rrStudio .st-tok .rk.req{ color:var(--st-red); }
#rrStudio .st-tok .lb{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#rrStudio .st-tok .w,#rrStudio .st-tok .lift{ font-family:var(--st-mono); font-size:11px; color:var(--st-mute); white-space:nowrap; }
#rrStudio .st-tok .lift{ color:var(--st-ink); min-width:26px; text-align:right; }
#rrStudio .st-tok .grip{ color:var(--st-hair2); justify-self:end; }
#rrStudio .st-tok.drag:hover .grip{ color:var(--st-ink); }
#rrStudio .st-tok.ghosted{ opacity:.35; }
#rrStudio .st{ width:10px; height:10px; flex:none; display:inline-block; }
#rrStudio .st.s{ background:var(--st-good); }
#rrStudio .st.p{ background:linear-gradient(90deg,var(--st-warn-fill) 50%,var(--st-bg) 50%); border:1px solid var(--st-warn); }
#rrStudio .st.m{ border:1px solid var(--st-hair2); background:var(--st-bg); }
#rrStudio .st.m.req{ border-color:var(--st-red); background:var(--st-red-soft); }
#rrStudio .st-wrap{ display:flex; flex-wrap:wrap; gap:3px; padding:3px 18px 3px; }
#rrStudio .st-chip{ display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 6px 0 5px; background:var(--st-tint); border-radius:3px; font-size:11px; color:var(--st-ink2); max-width:100%; }
#rrStudio .st-chip span.lb{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#rrStudio .st-chip:hover,#rrStudio .st-chip.sel{ background:var(--st-acc); }
#rrStudio .st-chip .w{ font-family:var(--st-mono); font-size:10px; color:var(--st-mute); }
#rrStudio .st-chk{ display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:8px; align-items:center; width:100%; min-height:24px; padding:2px 18px; font-size:12px; color:var(--st-ink2); }
#rrStudio .st-chk .n{ font-family:var(--st-mono); font-size:10.5px; color:var(--st-mute); white-space:nowrap; }
#rrStudio .st-props{ display:grid; grid-template-columns:1fr 1fr; }
#rrStudio .st-prop{ display:grid; grid-template-columns:auto minmax(0,1fr) 12px; align-items:center; gap:7px; width:100%; height:28px; padding:0 10px 0 18px; font-size:12.5px; }
#rrStudio .st-props .st-prop:nth-child(even){ padding-left:12px; }
#rrStudio .st-prop:hover{ background:var(--st-tint); }
#rrStudio .st-prop.sel{ background:var(--st-tint); box-shadow:inset 3px 0 0 var(--st-acc); }
#rrStudio .st-prop.ro{ cursor:default; }
#rrStudio .st-prop.ro:hover{ background:none; }
#rrStudio .st-prop .k{ color:var(--st-mute); font-size:11.5px; white-space:nowrap; }
#rrStudio .st-prop .v{ font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#rrStudio .st-prop .chev{ color:var(--st-hair2); justify-self:end; }
/* The list stops at eight and says what it is holding back. */
/* ── Show me all N ─────────────────────────────────────────────────────
   The one press that opens the ranked list, and the one that closes it
   again. It reads as a door rather than a row: full width, a hairline
   above it, the count in the label so the press is never a guess. */
#rrStudio .st-open{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:9px;
  width:100%; min-height:46px; padding:12px 18px; border-top:1px solid var(--st-hair);
  background:none; font:600 13px var(--st-sans); color:var(--st-ink); }
#rrStudio .st-open:hover{ background:var(--st-tint); }
/* Inside screen 1's block it is the quiet way past the one lit control,
   so it is a line of text with a chevron, not a second bordered row. */
#rrStudio .st-go .st-open{ margin-top:15px; padding:0; border:0; background:none; justify-items:center;
  grid-template-columns:auto auto; justify-content:center; gap:7px; color:var(--st-mute); }
#rrStudio .st-go .st-open:hover{ background:none; color:var(--st-ink2); }
#rrStudio .st-go .st-open .lb{ font:500 12.5px/1 var(--st-sans); }
#rrStudio .st-go .st-open .h{ display:none; }
#rrStudio .st-open .lb{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#rrStudio .st-open .h{ font:400 11.5px var(--st-sans); color:var(--st-mute); white-space:nowrap; }
#rrStudio .st-open .chev{ color:var(--st-mute); }
#rrStudio .st-open.shut .chev{ transform:rotate(180deg); }
#rrStudio .st-open:hover .lb{ text-decoration:underline; text-underline-offset:3px; }
#rrStudio .st-more{ display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:9px; width:100%; height:38px; padding:0 12px 0 18px; margin:2px 0 0; border-top:1px solid var(--st-hair); background:none; font:500 12.5px var(--st-sans); color:var(--st-ink); }
#rrStudio .st-more:hover{ background:var(--st-tint); }
#rrStudio .st-more .rk{ font:500 10.5px/1 var(--st-mono); color:var(--st-ink); background:var(--st-acc); border-radius:3px; padding:5px 0; text-align:center; }
#rrStudio .st-more .lb{ min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#rrStudio .st-more .h{ font:400 10.5px/1 var(--st-mono); color:var(--st-mute); white-space:nowrap; }
#rrStudio .st-more:hover .lb{ text-decoration:underline; text-underline-offset:3px; }
#rrStudio .st-hist{ display:grid; grid-template-columns:12px minmax(0,1fr) auto auto; gap:8px; align-items:center; width:100%; height:26px; padding:0 12px 0 18px; font-size:12px; }
#rrStudio .st-hist:hover{ background:var(--st-tint); }
#rrStudio .st-hist .lb{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--st-ink2); }
#rrStudio .st-hist .d{ font-family:var(--st-mono); font-size:10.5px; color:var(--st-mute); white-space:nowrap; }
#rrStudio .st-hist .undo{ font-size:11.5px; font-weight:500; color:var(--st-ink); text-decoration:underline; text-underline-offset:3px; padding:2px 0; }
/* A change restored from the saved draft that has nothing left to act
   on: the row is the record, and there is no button to press. */
#rrStudio .st-hist.lost .lb{ color:var(--st-mute); }
/* The change taken off by the last undo, waiting to be put back. */
#rrStudio .st-hist.redo .lb{ color:var(--st-mute); }
#rrStudio .st-hist.redo .d{ font-style:italic; }
/* The bracketed values the drafts left for the user to supply. */
#rrStudio .st-ph-more{ margin:4px 0 0; padding:0 12px 0 18px; }
#rrStudio .st-hist .st-fine{ margin:0; font-size:10.5px; color:var(--st-mute); white-space:nowrap; cursor:help; }
#rrStudio .st-empty{ padding:10px 18px 12px; font-size:12.5px; color:var(--st-mute); line-height:1.45; }
#rrStudio .st-empty b{ color:var(--st-ink); font-weight:500; }
#rrStudio .st-empty button{ text-decoration:underline; text-underline-offset:3px; color:var(--st-ink); }
#rrStudio .st-spin{ display:inline-block; width:10px; height:10px; border:1.5px solid var(--st-hair2); border-top-color:var(--st-ink); border-radius:50%; animation:rrStSpin .8s linear infinite; vertical-align:-1px; margin-right:6px; }
@keyframes rrStSpin{ to{ transform:rotate(360deg); } }

/* ── inspector ── */
#rrStudio .st-insp{ flex:none; max-height:52%; overflow:auto; border:1.5px solid var(--st-edge); border-radius:16px; padding:12px 16px 13px; background:var(--st-bg); }
/* Both of these repainted the TOP edge only, from the era when .st-insp was
   a top border and nothing else. It is a four-sided card now, so a top-only
   repaint left one hairline edge against three ink ones, with a jog at both
   corners -- and .idle is the RESTING state, not an edge case.
   Restating it as a whole border was the wrong half of the fix: a contrast
   sweep of every painted shape in the panel caught the resting card sitting
   at 1.23:1 against the ground, the only one of the three cards without an
   ink edge. Idleness is carried by what the card SAYS -- a muted hint
   instead of a requirement -- not by dissolving its edge. */
#rrStudio .st-insp.flow{ background:var(--st-tint); border-color:var(--st-ink); }
#rrStudio .st-insp.flow .st-ev{ background:var(--st-bg); }
#rrStudio #rrStFlowHint{ margin:8px 0 0; }
#rrStudio #rrStFlowHint b{ font-weight:500; color:var(--st-ink); }
#rrStudio .st-ttl{ display:flex; align-items:baseline; gap:8px; font-weight:600; font-size:13.5px; line-height:1.3; }
#rrStudio .st-ttl .x{ margin-left:auto; font-family:var(--st-mono); font-size:11px; color:var(--st-mute); font-weight:400; white-space:nowrap; }
#rrStudio .st-ttl .x:hover{ color:var(--st-ink); }
#rrStudio .st-meta{ display:flex; flex-wrap:wrap; gap:3px 12px; margin:5px 0 9px; font-family:var(--st-mono); font-size:11px; color:var(--st-mute); }
#rrStudio .st-meta b{ color:var(--st-ink); font-weight:500; }
#rrStudio .st-meta .req{ color:var(--st-red); }
#rrStudio .st-why{ margin:0 0 9px; font-size:12.5px; line-height:1.45; color:var(--st-ink2); }
#rrStudio .st-why b{ font-weight:500; color:var(--st-ink); }
#rrStudio .st-ev{ margin:0 0 10px; padding:7px 10px; border-left:2px solid var(--st-ink); background:var(--st-tint); font-size:12px; line-height:1.45; color:var(--st-ink); }
#rrStudio .st-ev.silent{ color:var(--st-mute); font-style:italic; }
#rrStudio .st-ev.silent.req{ border-left-color:var(--st-red); }
#rrStudio .st-ev q{ quotes:'\201C' '\201D'; }
#rrStudio .st-opt{ display:grid; grid-template-columns:16px minmax(0,1fr) auto; gap:8px; align-items:center; width:100%; min-height:30px; padding:5px 8px 5px 6px; margin:0 -6px; border-radius:5px; font-size:12.5px; line-height:1.3; }
#rrStudio .st-opt:hover,#rrStudio .st-opt.kb{ background:var(--st-tint); }
#rrStudio .st-opt .k{ font-family:var(--st-mono); font-size:11px; color:var(--st-mute); text-align:center; }
#rrStudio .st-opt small{ display:block; color:var(--st-mute); font-size:11.5px; margin-top:1px; }
#rrStudio .st-opt .rad{ width:12px; height:12px; border:1px solid var(--st-ink); border-radius:50%; justify-self:center; }
#rrStudio .st-opt.on .rad{ border-width:4px; }
#rrStudio .st-fine{ margin:7px 0 0; font-size:11.5px; color:var(--st-mute); line-height:1.4; }
#rrStudio .st-acts{ display:flex; gap:8px; margin-top:10px; align-items:center; flex-wrap:wrap; }
#rrStudio .st-acts .sp{ flex:1; }
#rrStudio .st-btn{ display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 11px; border:1px solid var(--st-hair2); border-radius:8px; font-weight:500; font-size:12.5px; background:var(--st-bg); white-space:nowrap; }
#rrStudio .st-btn:hover{ background:var(--st-tint); }
#rrStudio .st-btn.acc{ background:var(--st-acc); border-color:var(--st-acc); font-weight:600; }
#rrStudio .st-btn.acc:hover{ background:var(--st-acc2); border-color:var(--st-acc2); }
#rrStudio .st-btn.quiet{ border-color:transparent; color:var(--st-mute); }
#rrStudio .st-btn.quiet:hover{ color:var(--st-ink); background:var(--st-tint); }
#rrStudio .st-btn.sm{ height:24px; padding:0 8px; font-size:12px; border-radius:6px; }
#rrStudio .st-btn:disabled{ opacity:.5; cursor:default; }
#rrStudio .st-kbd{ font-family:var(--st-mono); font-size:10.5px; color:var(--st-mute); border:1px solid var(--st-hair); border-radius:4px; padding:1px 5px; line-height:1.3; background:var(--st-bg); }
#rrStudio .st-btn.acc .st-kbd{ border-color:rgba(0,0,0,.25); background:transparent; color:var(--st-ink); }
#rrStudio .st-insp textarea{ width:100%; min-height:72px; border:1px solid var(--st-hair2); border-radius:6px; padding:8px 9px; font:inherit; font-size:12.5px; resize:vertical; background:var(--st-bg); display:block; color:var(--st-ink); }
#rrStudio .st-insp textarea:focus{ outline:1px solid var(--st-ink); border-color:var(--st-ink); }
#rrStudio .st-next{ display:flex; align-items:center; gap:10px; width:100%; padding:4px 0; min-width:0; }
#rrStudio .st-next .rk{ font-family:var(--st-mono); font-size:11px; color:var(--st-mute); white-space:nowrap; }
#rrStudio .st-next .lb{ font-weight:600; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#rrStudio .st-next .h{ margin-left:auto; font-family:var(--st-mono); font-size:10.5px; color:var(--st-mute); white-space:nowrap; }
#rrStudio .st-next:hover .lb{ text-decoration:underline; text-underline-offset:3px; }
#rrStudio .st-foot{ display:flex; gap:12px; flex:none; height:30px; align-items:center; padding:0 6px; font-family:var(--st-mono); font-size:10.5px; color:var(--st-mute); white-space:nowrap; overflow:hidden; }
#rrStudio .st-list:focus{ outline:none; }
#rrStudio .st-foot b{ font-weight:500; color:var(--st-ink); }
#rrStudio .st-foot .sp{ flex:1; }
@media (max-width:1180px){ #rrStudio .st-foot{ gap:8px; font-size:10px; padding:0 12px; } }

/* ── the keyword flow, re-set in the studio's language. The flow itself
      (stages, prompts, gates, persistence) is the builder's own; only its
      clothes change here. ── */
#rrStudio #kwFlowHost{ display:block; }
#rrStudio .rr-iae.rr-kwp.rr-kwp-embed{ padding:0; margin:0; }
#rrStudio .rr-iae.rr-kwp .rr-iae-head{ display:none; }
#rrStudio .rr-iae-qhead{ font:600 13px/1.3 var(--st-sans); letter-spacing:0; color:var(--st-ink); text-transform:none; margin:4px 0 8px; }
#rrStudio .kwp-stg{ counter-reset:rrStOpt; }
/* Each spot is a control, not a menu line: the number is the key you can
   press, the name is the spot, and under it what the sheet already holds
   there (owner, 2026-09-11: "make those buttons more clear and better"). */
#rrStudio .kwp-row{ display:grid; grid-template-columns:24px minmax(0,1fr) 14px; align-items:center; gap:11px; width:100%; min-height:46px; padding:9px 11px 9px 9px; margin:0 0 5px; border:1px solid var(--st-hair2); border-radius:5px; background:var(--st-bg); box-shadow:none; transform:none; opacity:1; animation:none; font:600 13px/1.3 var(--st-sans); color:var(--st-ink); transition:border-color .12s,box-shadow .12s,background .12s; counter-increment:rrStOpt; }
#rrStudio .kwp-row::before{ content:counter(rrStOpt); width:24px; height:24px; border:1px solid var(--st-hair2); border-radius:4px; font:500 11px/22px var(--st-mono); color:var(--st-mute); text-align:center; background:var(--st-bg); transition:background .12s,border-color .12s,color .12s; }
#rrStudio .kwp-row:hover,#rrStudio .kwp-row.rr-kb{ background:var(--st-bg); border-color:var(--st-ink); box-shadow:inset 3px 0 0 var(--st-acc); transform:none; }
#rrStudio .kwp-row:hover::before,#rrStudio .kwp-row.rr-kb::before{ background:var(--st-ink); border-color:var(--st-ink); color:var(--st-on-ink); }
/* Past the eighth spot the list is folded; the rest are one press away. */
#rrStudio .rr-st-off{ display:none !important; }
#rrStudio .rr-st-wmore{ display:flex; align-items:center; gap:9px; width:100%; min-height:34px; padding:0 11px; margin:2px 0 4px; border:1px dashed var(--st-hair2); border-radius:5px; background:none; font:500 12px/1.3 var(--st-sans); color:var(--st-mute); cursor:pointer; }
#rrStudio .rr-st-wmore:hover{ border-style:solid; border-color:var(--st-ink); color:var(--st-ink); }
#rrStudio .rr-st-wmore .k{ font:500 10.5px/1 var(--st-mono); color:var(--st-ink); background:var(--st-acc); border-radius:3px; padding:4px 5px; }
#rrStudio .kwp-row.rr-rec > span::after{ content:'recommended'; display:inline-block; margin-left:8px; padding:1px 5px; border-radius:3px; background:var(--st-acc); color:var(--st-ink); font:500 10px/1.4 var(--st-mono); vertical-align:1px; }
#rrStudio .kwp-row i{ width:16px; height:16px; border-radius:0; background:transparent; color:var(--st-mute); font-style:normal; display:grid; place-items:center; }
#rrStudio .kwp-row:hover i{ background:transparent; color:var(--st-ink); transform:none; }
/* An option row was 107px while its neighbour was 55px, because a long
   quote wrapped to three lines in a 255px column (rig, 2026-09-22). The
   quote is shorter at source now; this is the net under it, so no single
   spot can ever tower over the list again. */
#rrStudio .kwp-row > span{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
#rrStudio .kwp-row .kwp-sub{ display:block; font:400 10px/1.4 var(--st-mono); letter-spacing:.07em; text-transform:uppercase; color:var(--st-mute); margin-top:3px; }
#rrStudio .kwp-row:hover .kwp-sub,#rrStudio .kwp-row.rr-kb .kwp-sub{ color:var(--st-ink2); }
#rrStudio .kwp-done{ display:flex; align-items:center; gap:8px; width:100%; padding:5px 8px; margin:0 0 6px; border:1px solid var(--st-hair2); border-radius:5px; background:var(--st-bg); font:500 12px/1.3 var(--st-sans); color:var(--st-ink2); }
#rrStudio .kwp-done:hover{ border-color:var(--st-ink); background:var(--st-bg); }
#rrStudio .kwp-done b{ width:14px; height:14px; border-radius:50%; background:var(--st-ink); color:var(--st-on-ink); font-size:9px; display:grid; place-items:center; flex:none; }
#rrStudio .kwp-done .edit{ color:var(--st-mute); font:500 10px/1 var(--st-mono); letter-spacing:.04em; border:0; background:none; padding:0; border-radius:0; }
#rrStudio .kwp-done:hover .edit{ color:var(--st-ink); border:0; }
#rrStudio .kwp-shim{ height:30px; border-radius:5px; margin-bottom:6px; background:linear-gradient(100deg,var(--st-tint) 40%,var(--st-bg2) 50%,var(--st-tint) 60%); background-size:200% 100%; }
#rrStudio .kwp-prim{ width:auto; display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 12px; margin-top:8px; background:var(--st-acc); color:var(--st-ink); border:1px solid var(--st-acc); border-radius:8px; font:600 12.5px var(--st-sans); box-shadow:none; transform:none; animation:none; opacity:1; }
#rrStudio .kwp-prim:hover{ background:var(--st-acc2); border-color:var(--st-acc2); box-shadow:none; transform:none; }
#rrStudio .kwp-prim:disabled{ opacity:.55; }
#rrStudio .kwp-ghost{ display:inline-flex; align-items:center; gap:7px; height:30px; padding:0 11px; border:1px solid var(--st-hair2); border-radius:8px; background:var(--st-bg); color:var(--st-ink); font:500 12.5px var(--st-sans); }
#rrStudio .kwp-ghost:hover{ border-color:var(--st-ink); color:var(--st-ink); background:var(--st-tint); }
#rrStudio .kwp-cost,#rrStudio .rr-iae-cost{ background:var(--st-ink); color:var(--st-on-ink); }
#rrStudio .rr-kwp-ta{ border:1px solid var(--st-ink); border-radius:6px; padding:8px 9px; font:400 12.5px/1.5 var(--st-sans); color:var(--st-ink); background:var(--st-bg); margin:0 0 2px; }
#rrStudio .rr-kwp-ta:focus{ border-color:var(--st-ink); outline:1px solid var(--st-ink); }
#rrStudio .kwp-weave{ text-align:left; padding:2px 0 0; }
#rrStudio .kwp-merge{ height:40px; margin:2px 0; }
#rrStudio .kwp-weave:has(.kwp-wacts.show) .kwp-merge{ display:none; }
#rrStudio .rr-st-was{ margin:0 0 6px; font:400 11.5px/1.45 var(--st-sans); color:var(--st-mute); }
#rrStudio .rr-st-was .k{ font:500 10.5px/1 var(--st-mono); color:var(--st-mute); margin-right:4px; }
#rrStudio .rr-st-was s{ text-decoration-color:var(--st-mute); }
#rrStudio .kwp-bullet .rr-st-ins{ background:var(--st-acc); border-radius:1px; padding:0 1px; }
#rrStudio .kwp-chip{ font:500 11px/1.3 var(--st-sans); border-radius:4px; padding:6px 9px; max-width:46%; box-shadow:none; }
#rrStudio .kwp-chipA{ background:var(--st-bg); border:1px solid var(--st-hair2); color:var(--st-ink2); }
#rrStudio .kwp-chipB{ background:var(--st-ink); color:var(--st-on-ink); }
#rrStudio .kwp-spark{ background:var(--st-acc); }
#rrStudio .kwp-bullet{ margin:0; max-width:none; padding:9px 11px; border:1px solid var(--st-hair2); border-radius:6px; font:400 12.5px/1.5 var(--st-sans); color:var(--st-ink); min-height:56px; }
#rrStudio .kwp-bullet em{ font-style:normal; font-weight:600; color:var(--st-ink); background:var(--st-acc); padding:0 1px; border-radius:1px; }
#rrStudio .kwp-cursor{ background:var(--st-ink); }
#rrStudio .kwp-grounded{ font:400 11.5px/1.4 var(--st-sans); color:var(--st-mute); margin-top:7px; }
#rrStudio .kwp-grounded b{ color:var(--st-ink); }
#rrStudio .kwp-wacts{ gap:8px; margin-top:8px; }
#rrStudio .kwp-wacts .kwp-prim{ flex:none; margin-top:0; }
#rrStudio .rr-iae-state.err{ font:400 12px/1.4 var(--st-sans); color:var(--st-red); margin:6px 0; }
#rrStudio .rr-kwp-raw{ color:var(--st-ink); font:500 12px var(--st-sans); }
#rrStudio .kwp-exit{ left:0; right:0; }

/* ── the sheet: zones a token can land on, evidence, the settle ── */
#atsCvRoot.rr-studio .doc .rr-st-zone{ position:relative; outline:1px dashed var(--st-hair2); outline-offset:3px; border-radius:2px; transition:background .18s ease,outline-color .18s ease; }
#atsCvRoot.rr-studio .doc .rr-st-zone.rec{ background:rgba(229,255,0,.42); outline-color:#8f9a00; }
#atsCvRoot.rr-studio .doc .rr-st-zone.over,#atsCvRoot.rr-studio .doc .rr-st-zone:hover{ outline:1px solid var(--st-ink); background:rgba(229,255,0,.7); }
#atsCvRoot.rr-studio .doc .rr-st-zone::after,#atsCvRoot.rr-studio .doc .rr-st-ev::after{ content:attr(data-rr-tag); position:absolute; right:-56px; top:50%; transform:translateY(-50%); font:500 9.5px/1.4 var(--st-mono); color:var(--st-ink); background:#fff; border:1px solid var(--st-ink); padding:1px 5px; border-radius:3px; white-space:nowrap; pointer-events:none; z-index:2; }
#atsCvRoot.rr-studio .doc .rr-st-zone.rec::after,#atsCvRoot.rr-studio .doc .rr-st-ev::after{ background:var(--st-acc); border-color:var(--st-acc); }
#atsCvRoot.rr-studio .doc .rr-st-ev{ position:relative; background:rgba(229,255,0,.55); outline:1px solid #c9dc00; outline-offset:2px; border-radius:2px; }
#atsCvRoot.rr-studio .doc .rr-st-target{ position:relative; outline:1px solid var(--st-ink); outline-offset:3px; border-radius:2px; background:rgba(229,255,0,.28); }
#atsCvRoot.rr-studio .doc .rr-st-settle{ animation:rrStSettle 1.6s ease-out forwards; }
@keyframes rrStSettle{ 0%{ background:var(--st-acc); } 60%{ background:var(--st-acc); } 100%{ background:transparent; } }
body.rr-st-dragging,body.rr-st-dragging *{ cursor:grabbing !important; }
.rr-st-ghostdrag{ position:fixed; z-index:9999; pointer-events:none; padding:4px 9px; background:#0d0d0d; color:#fff; font:400 12px/1.3 'Instrument Sans',Helvetica,Arial,sans-serif; border-radius:4px; transform:translate(14px,-150%); white-space:nowrap; box-shadow:0 2px 0 rgba(0,0,0,.15); }
.rr-st-ghostdrag i{ font-style:normal; font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; font-size:10.5px; opacity:.7; margin-left:8px; }

/* ── before / diff: a read-only ghost of the document takes the sheet ── */
/* The live document stays in layout (invisible, not removed), so the
   builder's pagination, its white sheets and the page count are untouched;
   the ghost is painted over it and keeps the same page-break spacers. */
#atsCvRoot.rr-studio .rr-st-ghost{ display:none; }
/* Opacity, never visibility: innerText of a rendered element with
   visibility:hidden is EMPTY, so while a ghost view was up every reader of
   the live document (analyze's classify, alignLines, the checks) saw a
   blank CV. One press of "Read the CV again" in Diff view then re-scored
   nothing: 56 to 0, every requirement silent, and the deep read resolved
   null without a request because there were no lines to send (owner's
   audit, 2026-09-20). Opacity keeps the text readable to code and hides it
   from eyes only; renderGhost switches off editing and the a11y tree. */
#atsCvRoot.rr-studio.rr-st-view-before #doc,#atsCvRoot.rr-studio.rr-st-view-diff #doc{ opacity:0; pointer-events:none; }
#atsCvRoot.rr-studio.rr-st-view-before .rr-st-ghost,#atsCvRoot.rr-studio.rr-st-view-diff .rr-st-ghost{ display:block; position:absolute; left:0; top:0; right:0; z-index:2; background:transparent; }
#atsCvRoot.rr-studio .rr-st-ghost .rr-st-del{ color:#8a8a85; text-decoration:line-through; text-decoration-color:#6f6d69; text-decoration-thickness:1px; }
#atsCvRoot.rr-studio .rr-st-ghost li.rr-st-del::marker{ color:#b0aea9; }
#atsCvRoot.rr-studio .rr-st-ghost .rr-st-ins{ background:var(--st-acc); border-radius:1px; }
#atsCvRoot.rr-studio .rr-st-ghost li.rr-st-ins{ background:rgba(229,255,0,.55); outline:1px solid #c9dc00; outline-offset:2px; border-radius:2px; }
#atsCvRoot.rr-studio .rr-st-diffhead{ position:absolute; top:22px; left:62px; right:62px; margin:0; font:400 9.5px/1.4 var(--st-mono); color:#8a8a85; }
#atsCvRoot.rr-studio .rr-st-diffhead b{ font-weight:500; color:#161616; }
#atsCvRoot.rr-studio .rr-st-diffhead s{ text-decoration-color:#6f6d69; }
#atsCvRoot.rr-studio .rr-st-diffhead mark{ background:var(--st-acc); padding:0 3px; color:inherit; }

/* ── tools bar above the sheet ── */
#atsCvRoot.rr-studio .rr-st-tools{ position:sticky; top:0; z-index:31; display:flex; align-items:center; gap:16px; height:34px; padding:0 16px; border-bottom:1px solid var(--st-hair2); background:#fff; font:400 12px var(--st-sans); color:var(--st-ink2); }
#atsCvRoot.rr-studio .rr-st-seg{ display:inline-flex; border:1px solid var(--st-ink); border-radius:6px; overflow:hidden; background:#fff; flex:none; }
#atsCvRoot.rr-studio .rr-st-seg button{ height:22px; padding:0 10px; font:500 12px var(--st-sans); color:var(--st-ink); border:0; border-right:1px solid var(--st-ink); background:#fff; cursor:pointer; display:inline-flex; align-items:center; }
#atsCvRoot.rr-studio .rr-st-seg button:last-child{ border-right:0; }
#atsCvRoot.rr-studio .rr-st-seg button:hover{ background:var(--st-tint); }
#atsCvRoot.rr-studio .rr-st-seg button[aria-pressed=true]{ background:var(--st-ink); color:#fff; }
#atsCvRoot.rr-studio .rr-st-seg button .n{ font-family:var(--st-mono); font-size:10.5px; margin-left:6px; opacity:.7; }
#atsCvRoot.rr-studio .rr-st-hint{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#atsCvRoot.rr-studio .rr-st-hint b{ font-weight:500; color:var(--st-ink); }
#atsCvRoot.rr-studio .rr-st-readout{ font:400 11px var(--st-mono); color:var(--st-ink2); white-space:nowrap; flex:none; }
#atsCvRoot.rr-studio .rr-st-readout i{ font-style:normal; color:var(--st-hair2); margin:0 6px; }
#atsCvRoot.rr-studio .rr-st-readout b{ font-weight:500; color:var(--st-ink); }
#atsCvRoot.rr-studio .rr-st-tools .rr-st-actions{ flex:none; display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 8px; border:1px solid transparent; border-radius:6px; font:500 12px var(--st-sans); color:var(--st-mute); background:none; cursor:pointer; }
#atsCvRoot.rr-studio .rr-st-tools .rr-st-actions:hover{ color:var(--st-ink); background:var(--st-tint); }
#atsCvRoot.rr-studio .rr-st-tools .rr-st-actions .st-kbd{ font-family:var(--st-mono); font-size:10.5px; color:var(--st-mute); border:1px solid var(--st-hair); border-radius:4px; padding:1px 5px; line-height:1.3; background:#fff; }
@media (max-width:1100px){ #atsCvRoot.rr-studio .rr-st-readout{ display:none; } }

/* ── command palette ── */
.rr-st-pal{ position:fixed; inset:0; z-index:9998; display:flex; justify-content:center; align-items:flex-start; padding-top:11vh; background:rgba(0,0,0,.62); font-family:'Instrument Sans',Helvetica,Arial,sans-serif; color:var(--st-ink); }
.rr-st-pal[hidden]{ display:none; }
.rr-st-pal .box{ width:560px; max-width:calc(100% - 32px); background:var(--st-bg); border:1px solid var(--st-hair2); border-radius:8px; overflow:hidden; box-shadow:0 1px 0 rgba(0,0,0,.08); }
.rr-st-pal input{ width:100%; height:44px; border:0; border-bottom:1px solid var(--st-hair); padding:0 16px; font:400 14px 'Instrument Sans',Helvetica,Arial,sans-serif; outline:0; background:var(--st-bg); color:var(--st-ink); box-sizing:border-box; }
.rr-st-pal .res{ max-height:58vh; overflow:auto; padding:4px 0 6px; }
.rr-st-pal .g{ padding:9px 16px 3px; font:400 10.5px 'IBM Plex Mono',ui-monospace,Menlo,monospace; color:var(--st-mute); }
.rr-st-pal .it{ display:flex; align-items:center; gap:10px; width:100%; padding:7px 16px; font:400 13px 'Instrument Sans',Helvetica,Arial,sans-serif; color:var(--st-ink); background:none; border:0; text-align:left; cursor:pointer; }
.rr-st-pal .it .lb{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:none; max-width:60%; }
.rr-st-pal .it .k{ font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; font-size:11px; color:var(--st-mute); min-width:22px; }
.rr-st-pal .it.kb,.rr-st-pal .it:hover{ background:var(--st-tint); }
.rr-st-pal .it .h{ margin-left:auto; font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace; font-size:11px; color:var(--st-mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.rr-st-pal .none{ padding:14px 16px; color:var(--st-mute); }
.rr-st-pal .pf{ display:flex; gap:14px; padding:7px 16px; border-top:1px solid var(--st-hair); font:400 10.5px 'IBM Plex Mono',ui-monospace,Menlo,monospace; color:var(--st-mute); }

@media (prefers-reduced-motion:reduce){ #rrStudio *,#atsCvRoot.rr-studio .doc *{ transition:none !important; animation:none !important; } }

/* Phone: the app's own tabs show the sidebar as the Analysis view; the
   studio just fills it. */
@media (max-width:767px){
  #atsCvRoot.rr-studio .sidebar{ width:auto; border-right:0; }
  #atsCvRoot.rr-studio #rrStudio .st-tok,#atsCvRoot.rr-studio #rrStudio .st-prop,#atsCvRoot.rr-studio #rrStudio .st-hist{ min-height:36px; height:auto; }
  #atsCvRoot.rr-studio #rrStudio .st-collapse{ display:none; }
  #rrStudio .st-insp{ max-height:none; }
  #rrStudio .st-tok{ touch-action:auto; }
  #atsCvRoot.rr-studio .rr-st-tools{ gap:10px; padding:0 10px; }
}

/* ── the builder chrome, in the studio's language (owner, 2026-09-11:
      "these elements no longer fit"). The header loses its frosted glass,
      pills and blue gradient; the formatting buttons leave their floating
      bar and dock into the one bar above the sheet. Markup and handlers are
      the builder's own. ── */
#atsCvRoot.rr-studio{ --header-h:52px; }
#atsCvRoot.rr-studio .header{ min-height:52px; padding:0 16px; gap:10px; background:#fff; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid var(--st-hair); font-family:var(--st-sans); }
#atsCvRoot.rr-studio .h-left{ gap:8px; }
#atsCvRoot.rr-studio .h-right{ gap:8px; }
#atsCvRoot.rr-studio .cv-back{ margin:0 4px 0 0; padding:0 6px; height:30px; border:0; border-radius:4px; background:none; font:500 13px/1 var(--st-sans); color:var(--st-ink2); }
#atsCvRoot.rr-studio .cv-back:hover{ background:var(--st-tint); color:var(--st-ink); }
#atsCvRoot.rr-studio .header .tbar{ height:32px; padding:0; gap:0; border:1px solid var(--st-hair2); border-radius:8px; background:#fff; box-shadow:none; }
#atsCvRoot.rr-studio .tpl-btn{ height:30px; padding:0 8px; gap:6px; border-radius:7px; font:500 13px var(--st-sans); color:var(--st-ink); }
#atsCvRoot.rr-studio .tpl-btn:hover{ background:var(--st-tint); }
#atsCvRoot.rr-studio .tpl-btn .tg{ font:500 10px/1.4 var(--st-mono); letter-spacing:0; color:var(--st-ink); background:none; border:1px solid var(--st-ink); padding:0 5px; border-radius:3px; }
#atsCvRoot.rr-studio .tpl-btn .tg .ico{ width:10px; height:10px; }
#atsCvRoot.rr-studio .tpl-pop{ border:1px solid var(--st-ink); border-radius:8px; box-shadow:0 1px 0 rgba(0,0,0,.08); padding:6px; font-family:var(--st-sans); }
#atsCvRoot.rr-studio .tpl-search{ border:0; border-bottom:1px solid var(--st-hair); border-radius:0; background:#fff; padding:6px 8px; margin-bottom:4px; }
#atsCvRoot.rr-studio .tpl-item{ border-radius:5px; padding:8px 9px; }
#atsCvRoot.rr-studio .tpl-item:hover,#atsCvRoot.rr-studio .tpl-item.sel{ background:var(--st-tint); box-shadow:inset 3px 0 0 var(--st-acc); }
#atsCvRoot.rr-studio .tpl-item .ti-name{ font-weight:600; }
#atsCvRoot.rr-studio .tpl-item .ti-name .ok{ color:var(--st-ink); }
#atsCvRoot.rr-studio .tpl-item .ti-desc{ font-weight:400; color:var(--st-mute); }
#atsCvRoot.rr-studio .cv-seg{ height:26px; padding:0; border:1px solid var(--st-ink); border-radius:6px; background:#fff; box-shadow:none; overflow:hidden; }
#atsCvRoot.rr-studio .cv-seg button{ height:24px; padding:0 10px; border-radius:0; border-right:1px solid var(--st-ink); font:500 12px var(--st-sans); color:var(--st-ink); }
#atsCvRoot.rr-studio .cv-seg button:last-child{ border-right:0; }
#atsCvRoot.rr-studio .cv-seg button:hover{ background:var(--st-tint); color:var(--st-ink); }
#atsCvRoot.rr-studio .cv-seg button.on{ background:var(--st-ink); color:#fff; box-shadow:none; }
#atsCvRoot.rr-studio .btn{ font:500 13px var(--st-sans); border-radius:8px; }
#atsCvRoot.rr-studio .btn-ghost{ height:32px; padding:0 10px; border:1px solid #171717; color:var(--st-ink); background:#fff; box-shadow:none; }
#atsCvRoot.rr-studio .btn-ghost:hover{ background:var(--st-tint); border-color:#171717; transform:none; }
#atsCvRoot.rr-studio .btn-primary{ height:32px; padding:0 2px 0 10px; background:var(--st-acc); border:1px solid var(--st-acc); color:var(--st-ink); font-weight:600; box-shadow:none; }
#atsCvRoot.rr-studio .btn-primary:hover{ background:var(--st-acc2); border-color:var(--st-acc2); transform:none; box-shadow:none; }
#atsCvRoot.rr-studio .btn-primary .div{ background:rgba(0,0,0,.22); }
#atsCvRoot.rr-studio .menu{ border:1px solid var(--st-ink); border-radius:8px; box-shadow:0 1px 0 rgba(0,0,0,.08); padding:4px; font-family:var(--st-sans); }
#atsCvRoot.rr-studio .menu-item{ border-radius:5px; font-weight:500; color:var(--st-ink); }
#atsCvRoot.rr-studio .menu-item:hover{ background:var(--st-tint); color:var(--st-ink); }
#atsCvRoot.rr-studio .menu-item small{ font-weight:400; color:var(--st-mute); }
#atsCvRoot.rr-studio .zoom .pct{ font:500 12px var(--st-mono); color:var(--st-ink); min-width:36px; }
#atsCvRoot.rr-studio .header .tb{ width:30px; height:30px; border-radius:7px; color:var(--st-ink2); }
#atsCvRoot.rr-studio .header .tb:hover{ background:var(--st-tint); color:var(--st-ink); }
/* the formatting buttons, docked */
#atsCvRoot.rr-studio .toolbar.rr-st-docked{ display:none; }
#atsCvRoot.rr-studio .rr-st-fmt{ display:inline-flex; align-items:center; gap:2px; flex:none; margin:0 auto; }
#atsCvRoot.rr-studio .rr-st-fmt .tbar{ background:none; border:0; border-radius:0; padding:0; gap:1px; box-shadow:none; }
#atsCvRoot.rr-studio .rr-st-fmt .tb{ width:24px; height:24px; border-radius:5px; color:var(--st-ink2); }
#atsCvRoot.rr-studio .rr-st-fmt .tb .ico{ width:14px; height:14px; }
#atsCvRoot.rr-studio .rr-st-fmt .tb:hover{ background:var(--st-tint); color:var(--st-ink); }
#atsCvRoot.rr-studio .rr-st-fmt .tb.active{ background:var(--st-ink); color:#fff; }
#atsCvRoot.rr-studio .rr-st-fmt .tb-sep{ width:1px; height:14px; background:var(--st-hair); margin:0 3px; }
#atsCvRoot.rr-studio .rr-st-fmt #fmtBtn{ display:none; }
#atsCvRoot.rr-studio.cv-preview .rr-st-fmt{ display:none; }
/* Preview (the Edit / Preview switch in the header) shows the sheet alone.
   The Before / Diff / After bar, the ghost and the zone and evidence marks
   are editing chrome, so preview is always the live document, as it is. */
#atsCvRoot.rr-studio.cv-preview .rr-st-tools{ display:none; }
#atsCvRoot.rr-studio.cv-preview .rr-st-ghost{ display:none; }
#atsCvRoot.rr-studio.cv-preview #doc{ opacity:1; pointer-events:auto; }
#atsCvRoot.rr-studio.cv-preview .doc .rr-st-zone,#atsCvRoot.rr-studio.cv-preview .doc .rr-st-ev,#atsCvRoot.rr-studio.cv-preview .doc .rr-st-target{ outline:none; background:transparent; }
#atsCvRoot.rr-studio.cv-preview .doc .rr-st-zone::after,#atsCvRoot.rr-studio.cv-preview .doc .rr-st-ev::after{ display:none; }
#atsCvRoot.rr-studio .rr-st-tools .rr-st-readout{ display:none; }
/* Below 1460px the buttons take a second header row rather than shrink. */
@media (max-width:1460px){ #atsCvRoot.rr-studio .header{ flex-wrap:wrap; padding:6px 16px; row-gap:4px; } #atsCvRoot.rr-studio .rr-st-fmt{ order:3; width:100%; margin:0; flex:none; } }
@media (max-width:767px){ #atsCvRoot.rr-studio .rr-st-fmt{ display:none; } #atsCvRoot.rr-studio .toolbar.rr-st-docked{ display:none; } }

/* ── "Edit with AI": the selection popover, in the studio's language
      (owner, 2026-09-11: "this thing needs to be made better or
      redesigned"). The popover floats on <body>, outside #atsCvRoot, so it
      is scoped by the body class the studio sets on boot. Markup, states
      and handlers are the builder's own. ── */
body.rr-st-on .rr-iae:not(.rr-kwp){ width:340px; padding:12px 14px 13px; background:var(--st-bg); border:1px solid var(--st-hair2); border-radius:8px; box-shadow:0 1px 0 rgba(0,0,0,.08),0 14px 36px rgba(0,0,0,.14); font-family:'Instrument Sans',Helvetica,Arial,sans-serif; color:var(--st-ink); }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-head{ margin-bottom:8px; }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-title{ font:600 13px/1.3 'Instrument Sans',Helvetica,Arial,sans-serif; letter-spacing:0; color:var(--st-ink); }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-x{ font:400 11px/1 'IBM Plex Mono',ui-monospace,Menlo,monospace; color:var(--st-mute); padding:0 2px; }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-x::before{ content:'esc '; }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-x:hover{ color:var(--st-ink); }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-chips{ gap:4px; margin-bottom:8px; }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-chip{ font:500 12px/1.3 'Instrument Sans',Helvetica,Arial,sans-serif; color:var(--st-ink); background:var(--st-bg); border:1px solid var(--st-hair2); border-radius:4px; padding:3px 8px; transition:border-color .12s,background .12s; }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-chip:hover:not(:disabled){ border-color:var(--st-ink); background:var(--st-tint); }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-row{ gap:6px; }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-input{ font:400 12.5px/1.4 'Instrument Sans',Helvetica,Arial,sans-serif; color:var(--st-ink); border:1px solid var(--st-hair2); border-radius:6px; padding:6px 9px; background:var(--st-bg); }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-input:focus{ border-color:var(--st-ink); box-shadow:inset 0 0 0 1px var(--st-ink); }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-go{ font:600 12.5px 'Instrument Sans',Helvetica,Arial,sans-serif; color:var(--st-ink); background:var(--st-acc); border:1px solid var(--st-acc); border-radius:6px; padding:0 11px; height:30px; }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-go:hover:not(:disabled){ background:var(--st-acc2); border-color:var(--st-acc2); }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-state{ font:400 12px/1.45 'Instrument Sans',Helvetica,Arial,sans-serif; color:var(--st-mute); }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-state.err{ color:var(--st-red); }
body.rr-st-on .rr-iae:not(.rr-kwp) .kwp-chip{ font:500 11px/1.3 'Instrument Sans',Helvetica,Arial,sans-serif; border-radius:4px; padding:6px 9px; box-shadow:none; }
body.rr-st-on .rr-iae:not(.rr-kwp) .kwp-chipA{ background:var(--st-bg); border:1px solid var(--st-hair2); color:var(--st-ink2); }
body.rr-st-on .rr-iae:not(.rr-kwp) .kwp-chipB{ background:var(--st-ink); color:var(--st-on-ink); }
body.rr-st-on .rr-iae:not(.rr-kwp) .kwp-spark{ background:var(--st-acc); }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-review{ margin-top:2px; }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-sug{ font:400 12.5px/1.5 'Instrument Sans',Helvetica,Arial,sans-serif; color:var(--st-ink); background:var(--st-bg); border:1px solid var(--st-hair2); border-radius:6px; padding:8px 10px; }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-sug[contenteditable="true"]:hover{ border-color:var(--st-ink); }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-sug[contenteditable="true"]:focus{ border-color:var(--st-ink); box-shadow:inset 0 0 0 1px var(--st-ink); background:var(--st-bg); }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-sug em{ font-style:normal; font-weight:600; color:var(--st-ink); background:var(--st-acc); padding:0 1px; border-radius:1px; }
body.rr-st-on .rr-iae:not(.rr-kwp) .kwp-cursor{ background:var(--st-ink); }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-grounded{ font:400 11.5px/1.4 'Instrument Sans',Helvetica,Arial,sans-serif; color:var(--st-mute); margin-top:7px; }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-grounded b{ color:var(--st-ink); }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-actions{ gap:6px; margin-top:9px; }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-accept{ font:600 12.5px 'Instrument Sans',Helvetica,Arial,sans-serif; color:var(--st-ink); background:var(--st-acc); border:1px solid var(--st-acc); border-radius:8px; padding:0 12px; height:32px; box-shadow:none; transform:none; }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-accept:hover{ background:var(--st-acc2); border-color:var(--st-acc2); box-shadow:none; transform:none; }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-regen,body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-cancel,body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-fixg{ font:500 12.5px 'Instrument Sans',Helvetica,Arial,sans-serif; color:var(--st-ink); background:var(--st-bg); border:1px solid var(--st-hair2); border-radius:8px; padding:0 11px; height:30px; }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-regen:hover,body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-cancel:hover,body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-fixg:hover{ background:var(--st-tint); border-color:var(--st-ink); color:var(--st-ink); }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-cost,body.rr-st-on .rr-iae:not(.rr-kwp) .kwp-cost{ background:var(--st-ink); color:var(--st-on-ink); }
/* the guided quantify rows */
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-qhead{ font:600 13px/1.3 'Instrument Sans',Helvetica,Arial,sans-serif; letter-spacing:0; color:var(--st-ink); text-transform:none; }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-qrow{ border:1px solid var(--st-hair2); border-radius:6px; background:var(--st-bg); font:500 12.5px/1.3 'Instrument Sans',Helvetica,Arial,sans-serif; color:var(--st-ink); padding:7px 9px; margin-bottom:4px; }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-qrow i{ color:var(--st-mute); }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-qrow:hover,body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-qrow.on{ border-color:var(--st-ink); background:var(--st-bg); box-shadow:inset 3px 0 0 var(--st-acc); }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-qrow:hover i,body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-qrow.on i{ color:var(--st-ink); transform:none; }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-qrefresh{ border:1px solid var(--st-hair2); color:var(--st-mute); background:var(--st-bg); border-radius:4px; }
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-qrefresh:hover{ border-color:var(--st-ink); color:var(--st-ink); }
/* the tip that points at the selection edit */
body.rr-st-on #cvIaeHint{ border-radius:6px; background:var(--st-ink); box-shadow:0 1px 0 rgba(0,0,0,.1),0 8px 20px rgba(0,0,0,.18); font:400 12.5px/1.4 'Instrument Sans',Helvetica,Arial,sans-serif; }
body.rr-st-on #cvIaeHint b{ font-weight:600; }

/* A failing format check is a row you can act on, not a number in a header
   (owner, 2026-09-12: "it does not give guidance on what not passed"). It
   selects like any other item, and carries its fix line on a second row so
   the answer reads without opening the inspector. */
#rrStudio .st-chk.bad{
  grid-template-columns:12px minmax(0,1fr) auto;
  align-items:start;
  padding:8px 18px;
  border:0;
  background:transparent;
  font:inherit;
  font-size:12px;
  text-align:left;
  color:var(--st-ink);
  cursor:pointer;
}
#rrStudio .st-chk.bad:hover{ background:var(--st-tint); }
#rrStudio .st-chk.bad.sel{ background:var(--st-tint); box-shadow:inset 3px 0 0 var(--st-acc); }
#rrStudio .st-chk.bad .lb{ font-weight:600; }
#rrStudio .st-chk.bad .n{ color:var(--st-warn); }
#rrStudio .st-chk.bad .fx{
  grid-column:2 / -1;
  margin-top:3px;
  font-size:11.5px;
  line-height:1.45;
  color:var(--st-ink2);
}
#rrStudio .st-chk .lb{ min-width:0; overflow-wrap:break-word; }

/* The flow sits under the row that opened it (see placeFlowSlot), so the
   line you are judging is next to the requirement it answers instead of a
   scroll away at the foot of the panel. */
#rrStudio .st-flow-mount{
  margin:0 0 6px;
  padding:0;
}
#rrStudio .st-flow-mount.flow{
  margin:2px 12px 10px 18px;
  padding:10px 12px 12px;
  background:var(--st-tint);
  border:1px solid var(--st-hair);
  border-left:3px solid var(--st-ink);
  border-radius:0 6px 6px 0;
}
#rrStudio .st-flow-mount.flow .st-ev{ background:var(--st-bg); }
#rrStudio .st-flow-mount .st-fine{ margin:8px 0 0; }
/* The field you type your own words into.
   Owner's screenshot, 2026-09-22, with "make something up" typed in it and
   a red circle round the box: it was white. This rule kept background:#fff
   from before the panel went dark, and it beats the .rr-kwp-ta rule above
   on specificity (one element more), so the field took a white ground and
   the dark palette's ink -- rgb(238,244,250) on rgb(255,255,255), measured
   at 1.11:1 in the rig. You could type into it and not read a word back.
   The panel's own surface now, at 16.97:1, with the placeholder in mute. */
#rrStudio .st-flow-mount textarea{
  width:100%; min-height:72px; border:1px solid var(--st-hair2); border-radius:6px;
  padding:8px 9px; font:inherit; font-size:12.5px; resize:vertical; background:var(--st-bg);
  display:block; color:var(--st-ink);
}
#rrStudio .st-flow-mount textarea::placeholder{ color:var(--st-mute); opacity:1; }
#rrStudio .st-flow-mount textarea:focus{ outline:1px solid var(--st-acc); border-color:var(--st-acc); }
/* The row stays visibly the owner of what opened under it. */
#rrStudio .st-tok.flowing{ background:var(--st-tint); box-shadow:inset 3px 0 0 var(--st-ink); }
/* While the flow is inline the inspector would only repeat the row above it. */
#rrStudio .st-insp.st-insp-away{
  display:none;
}

/* ── Fix everything: the guided walk ──
   Owner, 2026-09-12: "a fix all button ... walks you through everything
   you could fix on the cv - users also have the option to skip". Then, on
   a screenshot of the first bar: "could be more clear". The bar is now a
   step card: progress across the top, then what kind of step it is, what
   it asks you to do, why, and the two ways on. The start button wears the
   accent because it is the panel's one primary act. */
/* The one thing to do next glows rather than merely filling. The cast is
   mixed from the accent, so a repaint never leaves a stale yellow halo. */
/* Aurora, screen 1: the button is one lit control, not a block carrying
   its own small print. A rounded pill that casts light, centred, with the
   sentence that used to sit on it now under it in mute, and the door
   between them as a link. The cast is mixed from the charge, so a repaint
   never leaves a stale halo. */
/* ── The plan, as a thing ──────────────────────────────────────────────
   The Leap gives its guided task a saturated card with a tab, a title, a
   sentence and the button, while the app around it stays white. This block
   is the same object, so it takes the same shape: it stops being a button
   with small print under it and becomes the one piece of furniture on a
   calm panel that says "here is the work".
   It also settles the accent question the other way round -- orange is the
   surface of the plan, the brand yellow stays the button, and each colour
   has one job instead of competing for the same one. */
#rrStudio .st-go{ padding:16px 16px 16px; border-bottom:1.5px solid var(--st-edge); }
#rrStudio .st-plan{ position:relative; margin:10px 0 0; padding:15px 16px 16px; border-radius:16px;
  background:var(--st-plan); box-shadow:0 0 0 1px var(--st-plan-edge), 0 8px 22px -12px rgba(0,0,0,.45); }
/* The tab sits astride the top edge, as it does on the reference. */
#rrStudio .st-plan-tab{ position:absolute; top:-11px; left:14px; display:inline-flex; align-items:center;
  padding:5px 10px; border-radius:99px; background:var(--st-ink); color:var(--st-bg);
  font:500 9.5px/1 var(--st-mono); letter-spacing:.16em; text-transform:uppercase; }
#rrStudio .st-plan-t{ margin:6px 0 0; font:600 18px/1.25 var(--st-sans); letter-spacing:-.022em;
  color:var(--st-ink); text-wrap:balance; }
/* Black at 78% on the coral: 5.41, and it reads as a quieter voice rather
   than as a second colour. */
#rrStudio .st-plan-p{ margin:8px 0 0; font:400 12.5px/1.55 var(--st-sans); color:rgba(0,0,0,.78); }
#rrStudio .st-plan-p b{ color:var(--st-ink); font-weight:600; }
/* The Leap's numbered checklist: 1, 2, 3 in filled circles, each a bold
   underlined title with one line under it. The circles are the brand acid,
   which is the reference's own move.
   It sits in the LIST card, under the heading that introduces it, not in
   the coral card where the reference has it -- because the rig measured
   that version running 197px past the panel's bottom, and the panel clips
   rather than scrolls, so the inspector and the keyboard bar went off
   screen with it. The reference's checklist is its hero's content and its
   products sit under the heading; here the items ARE the products. */
#rrStudio .st-steps{ display:flex; flex-direction:column; padding:4px 14px 6px 16px; }
#rrStudio .st-step{ display:grid; grid-template-columns:22px minmax(0,1fr) auto; align-items:start; gap:0 11px;
  width:100%; padding:9px 0; border:0; border-top:1px solid var(--st-hair); background:none; text-align:left; }
#rrStudio .st-steps > .st-step:first-child{ border-top:0; }
#rrStudio .st-step:not(:has(.sw)){ align-items:center; }
#rrStudio .st-step .sn{ width:22px; height:22px; display:grid; place-items:center; border-radius:50%;
  background:var(--st-acc); box-shadow:0 0 0 1px color-mix(in srgb, var(--st-ink) 22%, transparent);
  font:600 11.5px/1 var(--st-mono); color:var(--st-on-acc); }
#rrStudio .st-step .sb{ min-width:0; }
/* No underline (owner, 2026-09-23: "CAN WE REMOVER THE UNDERLINE"). The
   reference underlines its checklist titles because they are links out to
   its docs; these are rows in this panel's own list, and three underlined
   lines at 13.5px read as a wall of links. */
#rrStudio .st-step .sl{ display:block; font:600 13.5px/1.3 var(--st-sans); letter-spacing:-.012em;
  color:var(--st-ink); }
#rrStudio .st-step .sw{ display:block; margin-top:3px; font:400 11.5px/1.4 var(--st-sans); color:var(--st-mute); }
#rrStudio .st-step .sx{ font:600 11px/1.9 var(--st-mono); color:var(--st-mute); white-space:nowrap; }
/* So the press shows the way the list's own rows show it: a tint on hover,
   and the selected one carries the same acid rail a selected row carries.
   The padding goes negative-margin so the tint reads as a full row rather
   than as a box drawn round the words. */
#rrStudio .st-step{ margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:7px; transition:background .14s; }
#rrStudio .st-step:hover{ background:var(--st-tint); }
#rrStudio .st-step:hover .sw{ color:var(--st-ink2); }
#rrStudio .st-step.sel{ background:var(--st-tint); box-shadow:inset 3px 0 0 var(--st-acc); }
/* Waiting, in the shape of what is coming. The same shimmer the rest of the
   builder waits with (kwpShim, from styles.css), on the checklist's own
   geometry: a circle where the number goes, a bar where the title goes.
   Nothing here carries a name or a count, because the statuses these rows
   will be built from are exactly what the read is still deciding. */
#rrStudio .st-skel .st-step{ border-top-color:var(--st-hair); pointer-events:none; }
#rrStudio .st-skel .sl{ height:13px; border-radius:4px; width:82%; }
#rrStudio .st-skel .sw{ height:11px; border-radius:4px; width:58%; margin-top:5px; }
/* The plan waits as its own shape, so the list card does not take the
   freed space and the panel does not reflow when the read lands. */
#rrStudio .st-plan-skel .sk-card{ height:106px; margin:11px 0 0; border-radius:16px; }
#rrStudio .st-plan-skel .sk-btn{ height:46px; margin:12px 0 0; border-radius:12px; }
#rrStudio .st-skel .sn,#rrStudio .st-skel .sl,#rrStudio .st-skel .sw{
  background:linear-gradient(100deg,var(--st-tint) 40%,var(--st-bg2) 50%,var(--st-tint) 60%);
  background-size:200% 100%; animation:kwpShim 1.1s linear infinite; box-shadow:none; }
/* sk- prefixed, not .card and .btn: styles.css carries 25 rules for a
   global .btn, and one of them collapsed the button block to a sliver --
   the rig showed a 46px block rendering as a hairline. A skeleton's class
   names have to be as scoped as any other.
   And the plan's two blocks wait on the GREY GROUND, not on a white card, so
   they are white-on-tint rather than tint-on-white: --st-tint over
   --st-ground is 1.01:1, which the rig showed as the button block simply
   not being there. They take a hairline too, so the shape is bounded on the
   ground the way the card it stands in for is. */
#rrStudio .st-plan-skel .sk-card,#rrStudio .st-plan-skel .sk-btn{
  border:1px solid var(--st-hair);
  background:linear-gradient(100deg,var(--st-bg) 40%,var(--st-tint) 50%,var(--st-bg) 60%);
  background-size:200% 100%; animation:kwpShim 1.1s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  #rrStudio .st-skel .sn,#rrStudio .st-skel .sl,#rrStudio .st-skel .sw,
  #rrStudio .st-plan-skel .sk-card,#rrStudio .st-plan-skel .sk-btn{ animation:none; background:var(--st-bg); }
}
/* The button is its own full-width row UNDER the coral card, the way
   "+ Add product" sits under that screen's hero rather than inside it --
   which also makes it the panel's one primary action at full width instead
   of a button on a coloured surface competing with the surface. */
#rrStudio .st-go > .st-walkbtn{ margin-top:12px; }
/* The plan's own slot, on the panel ground between the two cards. It
   collapses to nothing while a walk runs, when the journey inside the list
   IS the plan. */
#rrStudio .st-plan-slot{ flex:none; }
#rrStudio .st-plan-slot:empty{ display:none; }
#rrStudio .st-plan-slot .st-go{ padding:0; border:0; }
#rrStudio .st-plan-slot .st-plan{ margin:11px 0 0; }
/* On paper a glow is a smudge: a yellow cast around a yellow button reads
   as printing that has slipped. The button keeps its shape and its weight
   and takes a real shadow instead, with an ink edge so it holds against
   the white rather than dissolving into it. */
#rrStudio .st-walkbtn{ display:flex; align-items:center; justify-content:center; width:100%; min-height:46px; padding:12px 16px; border-radius:12px;
  background:var(--st-acc);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--st-ink) 16%, transparent),
             0 6px 18px -8px color-mix(in srgb, var(--st-ink) 40%, transparent),
             inset 0 1px 0 rgba(255,255,255,.4);
  transition:box-shadow .2s, transform .12s; }
#rrStudio .st-walkbtn:hover{ background:var(--st-acc2);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--st-ink) 26%, transparent),
             0 9px 24px -8px color-mix(in srgb, var(--st-ink) 46%, transparent),
             inset 0 1px 0 rgba(255,255,255,.5); }
#rrStudio .st-walkbtn:active{ transform:translateY(1px); }
#rrStudio .st-walkbtn .lb{ font:600 15px/1.2 var(--st-sans); letter-spacing:-.01em; white-space:nowrap; }
/* The sentence, off the button. 12px rather than 11.5: it is read before
   the press now, and mute clears 4.5 on both surfaces. */
#rrStudio .st-say{ margin:12px 0 0; text-align:center; font:400 12px/1.6 var(--st-sans); color:var(--st-mute); }
#rrStudio .st-say b{ color:var(--st-ink2); font-weight:600; }
/* Where the last walk's thirteen went, above the button that offers the
   next one (owner, 2026-09-20). */
#rrStudio .st-walk-done{ padding:9px 18px 8px; border-bottom:1px solid var(--st-hair); font-size:11.5px; line-height:1.4; color:var(--st-ink2); }
#rrStudio .st-woven button{ background:none; border:0; padding:0; font:inherit; color:var(--st-ink); text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
#rrStudio .st-woven button:hover{ color:var(--st-ink2); }
#rrStudio .st-tok.woven .lift{ color:var(--st-mute); font-style:italic; font-size:10.5px; }
#rrStudio .st-walk-done b{ color:var(--st-ink); font-weight:600; }
/* A format check's card, inline under its row like the flow (see
   placeInspBody). The body keeps its dock styling; only the frame is the
   flow's. */
#rrStudio .st-insp-mount{ margin-top:2px; }
#rrStudio .st-insp-mount .st-ttl{ font-size:13px; }
/* The marked-bullet walk inside a check's card: which line is marked on
   the CV, and the two ways on (owner, 2026-09-20). */
#rrStudio .st-imp{ margin-top:10px; padding-top:8px; border-top:1px dashed var(--st-hair); }
#rrStudio .st-imp .st-meta{ margin:0 0 6px; }
/* The marked line, read back: a quotation, never a field. */
#rrStudio .st-mark{ margin:0 0 8px; padding:0 0 0 10px; border-left:2px solid var(--st-ink); font-size:12px; line-height:1.45; font-style:italic; color:var(--st-ink2); }
#rrStudio .st-mark::before{ content:'\201C'; }
#rrStudio .st-mark::after{ content:'\201D'; }
/* The number panel docks after this anchor, inside the card. */
#rrStudio .st-quant-anchor{ height:0; }
/* Docked in the card it fills the card, never its own 340px (owner,
   2026-09-20: "does not sit flush behind grey background"). */
#rrStudio .rr-iae.rr-iae-embed{ margin:8px 0 4px; }
#rrStudio .rr-iae.rr-iae-embed.quant{ width:100%; max-width:100%; box-sizing:border-box; }

#rrStudio .st-walk{ margin-top:9px; }
/* Full-bleed across the card, so it reads as progress and not as an
   underline beneath the line above it (which is how the 3px rule under
   the old title read). */
/* --st-hair, not --st-tint: an empty rail on white has to be visible at
   step one, or the progress reads as missing rather than as none yet. */
/* One segment per step (owner, 2026-09-21, from the prototype): done in
   ink, this one in the accent, skipped hatched, still to come in hair. */
/* Aurora, screen 2: the bar is one line -- close, how far along, which
   step -- so the rail sits inline between the mark and the count instead
   of on a row of its own. */
#rrStudio .st-walk-bar{ display:flex; gap:4px; height:5px; margin:0; flex:1 1 auto; min-width:0; }
#rrStudio .st-walk-bar i{ flex:1; height:5px; border-radius:2px; background:var(--st-hair); transition:background .3s ease; }
#rrStudio .st-walk-bar i.done{ background:var(--st-ink); }
#rrStudio .st-walk-bar i.cur{ background:var(--st-acc); box-shadow:inset 0 0 0 1px var(--st-hair2); }
#rrStudio .st-walk-bar i.skip{ background:repeating-linear-gradient(90deg,var(--st-hair2) 0 3px,transparent 3px 6px); }
/* The journey: the walk's steps as rows, the current one opened into its card. */
#rrStudio .st-jrow{ display:grid; grid-template-columns:22px 20px minmax(0,1fr) auto; align-items:center; gap:8px; width:100%; min-height:34px; padding:5px 14px 5px 14px; border-bottom:1px solid var(--st-hair); font-size:12.5px; }
#rrStudio .st-jrow .g{ width:16px; height:16px; border-radius:50%; border:1.5px solid var(--st-hair2); display:grid; place-items:center; font:600 10px/1 var(--st-mono); color:var(--st-on-ink); }
#rrStudio .st-jrow.done .g{ background:var(--st-good); border-color:var(--st-good); }
#rrStudio .st-jrow.cur .g{ background:var(--st-acc); border-color:var(--st-ink); color:var(--st-ink); }
#rrStudio .st-jrow.skip .g{ border-style:dashed; color:var(--st-mute); }
#rrStudio .st-jrow .rk{ font-size:11px; color:var(--st-mute); }
#rrStudio .st-jrow .lb{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#rrStudio .st-jrow.done .lb, #rrStudio .st-jrow.skip .lb{ color:var(--st-mute); }
#rrStudio .st-jrow.skip .lb{ text-decoration:line-through; text-decoration-color:var(--st-hair2); }
#rrStudio .st-jrow .r{ font-size:11px; color:var(--st-mute); white-space:nowrap; }
#rrStudio .st-jrow .r b{ color:var(--st-ink); font-weight:500; }
#rrStudio .st-jrow.done .r b{ color:var(--st-good); }
#rrStudio .st-jrow.cur{ background:var(--st-tint); border-bottom:0; }
#rrStudio .st-jrow.cur .lb{ font-weight:600; white-space:normal; }
#rrStudio .st-jrow[data-act]:hover .lb{ text-decoration:underline; text-underline-offset:2px; color:var(--st-ink); }
#rrStudio .st-walk-card{ margin:0 12px 10px 18px; padding:10px 12px 12px; background:var(--st-bg); border:1px solid var(--st-hair); border-left:3px solid var(--st-ink); border-radius:0 6px 6px 0; }
#rrStudio .st-journey > .st-walk-card{ margin-top:0; }
#rrStudio .st-journey{ background:var(--st-tint); }
#rrStudio .st-journey > .st-jrow:not(.cur){ background:var(--st-bg); }
#rrStudio .st-journey > .st-flow-mount{ margin-left:18px; margin-right:12px; }
#rrStudio .st-journey > .st-flow-mount.flow{ margin:0 12px 10px 18px; }
#rrStudio .st-walk-lbl{ display:flex; gap:8px; align-items:center; margin:10px 0 6px; font:500 10.5px/1 var(--st-mono); letter-spacing:.07em; text-transform:uppercase; color:var(--st-mute); }
#rrStudio .st-walk-pill{ background:var(--st-acc); color:var(--st-ink); padding:3px 6px; border-radius:4px; letter-spacing:.05em; }
#rrStudio .st-walk-card .st-mark{ margin-bottom:2px; }
#rrStudio .st-walk-card .st-fine{ margin:8px 0 0; }
#rrStudio .st-walk-top{ display:flex; align-items:center; gap:12px; }
/* The way out is the close mark it always was. Stopping keeps everything
   accepted, so this is a close, not a discard; its title, its aria-label
   and "esc close" on the key strip all still name it. */
#rrStudio .st-walk-x{ display:grid; place-items:center; width:30px; height:30px; flex:none; border-radius:9px; color:var(--st-mute); }
#rrStudio .st-walk-x:hover{ background:color-mix(in srgb, var(--st-ink) 8%, transparent); color:var(--st-ink); }
#rrStudio .st-walk-step{ font:500 12px/1 var(--st-mono); letter-spacing:.04em; color:var(--st-ink2); flex:none; }
#rrStudio .st-walk-kind{ font-size:11px; color:var(--st-mute); text-transform:uppercase; letter-spacing:.06em; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Its own column, never squeezed by a long kind label. */
#rrStudio .st-walk-top button{ margin-left:auto; flex:none; font-size:12px; color:var(--st-mute); text-decoration:underline; text-underline-offset:3px; }
#rrStudio .st-walk-top button:hover{ color:var(--st-ink); }
/* The step's own eyebrow: what kind of thing this is, and where in the walk. */
/* Aurora, screen 2: one line saying why you are looking at this, toned by
   what kind of reason it is, with a lit dot in front of it. The step count
   moved to the bar, so this is alone and can be the prototype's pill. */
#rrStudio .st-walk-eye{ display:inline-flex; gap:8px; align-items:center; margin:0 0 12px;
  padding:7px 12px 7px 10px; border-radius:99px;
  font:500 10px/1 var(--st-mono); letter-spacing:.16em; text-transform:uppercase; }
#rrStudio .st-walk-eye.need{ color:var(--st-red); background:color-mix(in srgb, var(--st-red) 13%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--st-red) 34%, transparent); }
#rrStudio .st-walk-eye.part{ color:var(--st-warn); background:color-mix(in srgb, var(--st-warn) 13%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--st-warn) 34%, transparent); }
#rrStudio .st-walk-eye.fmt{ color:var(--st-acc); background:color-mix(in srgb, var(--st-acc) 12%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--st-acc) 32%, transparent); }
#rrStudio .st-walk-eye.gap{ color:var(--st-mute); box-shadow:inset 0 0 0 1px var(--st-hair2); }
/* The instruction. The prototype sets it at 24px because it is the one
   thing the screen is asking; ours was 14.5px, the same size as a row. */
#rrStudio .st-walk-now{ font:500 22px/1.22 var(--st-sans); letter-spacing:-.028em; text-wrap:balance; }
#rrStudio .st-walk-why{ margin:7px 0 0; font-size:13px; color:var(--st-ink2); line-height:1.55; }

/* ── The little guy, and what he holds ──────────────────────────────────
   Owner, 2026-09-22: "i like the little guy speaking for the second one".
   The quote and the note were already on the card, in two registers and a
   screenful apart; this is the same two things said by one speaker. He is
   drawn from the charge, so a repaint carries him, and aria-hidden, so
   nothing he holds is announced twice. */
#rrStudio .st-bub{ display:flex; align-items:flex-end; gap:11px; margin:16px 0 0; }
#rrStudio .st-guy{ width:52px; height:52px; flex:none;
  filter:drop-shadow(0 3px 6px color-mix(in srgb, var(--st-ink) 22%, transparent)); }
#rrStudio .st-bub .sp{ position:relative; flex:1 1 auto; min-width:0; padding:12px 13px; border-radius:15px;
  background:color-mix(in srgb, var(--st-ink) 6%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--st-ink) 10%, transparent); }
#rrStudio .st-bub .sp::before{ content:""; position:absolute; bottom:15px; left:-5px; width:11px; height:11px;
  transform:rotate(45deg); background:color-mix(in srgb, var(--st-ink) 6%, transparent);
  box-shadow:inset 1px -1px 0 color-mix(in srgb, var(--st-ink) 10%, transparent); }
#rrStudio .st-bub .st-walk-lbl{ margin:0 0 7px; }
#rrStudio .st-bub .st-mark{ margin:0; border-left-color:var(--st-acc); font-size:13px; font-style:normal; color:var(--st-ink); }
#rrStudio .st-bub .st-fine{ margin:9px 0 0; }
#rrStudio .st-bub .st-mark + .st-fine{ padding-top:9px; border-top:1px solid color-mix(in srgb, var(--st-ink) 9%, transparent); }
@media (prefers-reduced-motion:reduce){ #rrStudio .st-guy{ filter:none; } }

/* ── Aurora, screen 3: the payoff ──────────────────────────────────────
   Owner, 2026-09-22 and twice before: "make it really easy to understand
   and use, like Duolingo". A lesson there always stops on the win. Ours
   did not stop at all -- the step ended on a 600ms timer and the next
   question was on screen before you had read the answer to the last one.
   The card stands where the question was, so it is a stop rather than a
   banner over the next thing, and it takes the green the panel already
   uses for "on the CV". */
#rrStudio .st-paid{ margin:0; padding:16px 18px 18px; border-radius:16px;
  background:color-mix(in srgb, var(--st-good) 13%, var(--st-bg));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--st-good) 30%, transparent); }
#rrStudio .st-paid-hd{ display:flex; align-items:center; gap:11px; }
#rrStudio .st-paid .tick{ display:grid; place-items:center; width:32px; height:32px; flex:none;
  border-radius:50%; background:var(--st-good); color:var(--st-on-ink);
  box-shadow:0 3px 8px -3px color-mix(in srgb, var(--st-good) 55%, transparent); }
#rrStudio .st-paid .tick svg{ width:17px; height:17px; }
#rrStudio .st-paid-hd .t{ font:500 17px/1.25 var(--st-sans); letter-spacing:-.022em; color:var(--st-good); text-wrap:balance; }
/* The figure moving, in front of you rather than quietly in the header. */
#rrStudio .st-paid-mv{ display:flex; align-items:center; gap:11px; margin:14px 0 0; padding:12px 14px; border-radius:12px;
  background:color-mix(in srgb, var(--st-ink) 6%, transparent); }
#rrStudio .st-paid-mv .a{ font:400 21px/1 var(--st-mono); letter-spacing:-.03em; color:var(--st-mute); }
#rrStudio .st-paid-mv .ar{ font:400 14px/1 var(--st-mono); color:var(--st-mute); }
/* The figure the read has not returned yet. A shape, so the row does not
   reflow when the number lands in it. */
#rrStudio .st-paid-mv .wait{ width:26px; height:3px; border-radius:2px; background:var(--st-hair2); }
#rrStudio .st-paid-mv .b + .a{ font-size:12px; letter-spacing:.02em; }
#rrStudio .st-paid-mv .b{ font:500 29px/1 var(--st-mono); letter-spacing:-.04em; color:var(--st-good); }
/* What the step was actually about: the words now on the CV. */
#rrStudio .st-paid-line{ margin:12px 0 0; padding:10px 12px; border-radius:11px; font-size:13px; line-height:1.5;
  color:var(--st-ink); background:color-mix(in srgb, var(--st-ink) 6%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--st-good) 22%, transparent); }
#rrStudio .st-paid-mv .lb{ margin-left:auto; text-align:right; font:400 11.5px/1.4 var(--st-sans); color:var(--st-ink2); }
/* A weave that lowered the match keeps the card and the undo and loses
   the green: the amber the panel already uses for "partly there", because
   what happened is real and landed, and is also not a win. */
#rrStudio .st-paid.down{ background:color-mix(in srgb, var(--st-warn) 11%, var(--st-bg));
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--st-warn) 30%, transparent); }
#rrStudio .st-paid.down .tick{ background:var(--st-warn); box-shadow:0 3px 8px -3px color-mix(in srgb, var(--st-warn) 55%, transparent); }
#rrStudio .st-paid.down .st-paid-hd .t{ color:var(--st-warn); }
#rrStudio .st-paid.down .st-paid-line{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--st-warn) 22%, transparent); }
#rrStudio .st-paid.down .st-paid-mv .b{ color:var(--st-warn); }
#rrStudio .st-paid .st-walk-acts{ margin-top:14px; }
#rrStudio .st-paid .st-fine{ margin:11px 0 0; text-align:center; }
#rrStudio .st-walk-acts{ display:flex; gap:8px; margin-top:10px; align-items:center; flex-wrap:wrap; }
#rrStudio .st-walk-acts .dn{ margin-left:-1px; }

/* ── Smart fix all: the review sheet ──
   Owner, 2026-09-12: "can we do a smart fix all". One press drafts the
   queue; the drafts live here and reach the document only one accept at a
   time. The free fixes get the one bulk button because none of them can
   assert anything. The accent belongs to Smart fix all, the quieter
   outline to the manual walk beneath it. */
/* One button since 2026-09-20: the walk is the only entry, and it keeps
   the accent background from the base rule above -- the highlighted state
   that used to belong to .smart. The white :not(.smart) tier went with the
   second button, and its hover went with it on 2026-09-21: left behind, it
   beat the accent hover above and turned the yellow button grey (and, once
   the panel went black, turned it near-black under dark text). */
#rrStudio .st-sheet-cost{ margin:6px 0 0; padding:0 0 0 16px; font-size:12.5px; line-height:1.5; color:var(--st-ink2); }
#rrStudio .st-sheet-cost li{ margin:2px 0; }
#rrStudio .st-sheet-free{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; padding:9px 18px; border-bottom:1px solid var(--st-hair); }
#rrStudio .st-sheet-free .lb{ font-weight:600; }
#rrStudio .st-sheet-free small{ flex:1 0 100%; font-size:11.5px; color:var(--st-mute); }
#rrStudio .st-sheet-freeacts{ padding:10px 18px; border-bottom:1px solid var(--st-hair); }
#rrStudio .st-sheet-row{ padding:12px 18px; border-bottom:1px solid var(--st-hair); }
#rrStudio .st-sheet-row.is-out{ opacity:.66; }
#rrStudio .st-sheet-row.is-out .st-sheet-draft{ color:var(--st-mute); }
#rrStudio .st-sheet-acts .st-fine{ margin:0; align-self:center; }
#rrStudio .st-sheet-row.is-in{ background:var(--st-good-soft); }
#rrStudio .st-sheet-head{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
#rrStudio .st-sheet-head .k{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--st-mute); }
#rrStudio .st-sheet-head .lb{ font-weight:600; font-size:12.5px; }
#rrStudio .st-sheet-was{ font-size:12px; color:var(--st-mute); margin-bottom:4px; }
#rrStudio .st-sheet-was .k{ text-transform:uppercase; letter-spacing:.06em; font-size:10.5px; margin-right:5px; }
#rrStudio .st-sheet-draft{ font-size:13px; line-height:1.5; color:var(--st-ink); }
#rrStudio .st-sheet-draft .rr-st-ins{ background:var(--st-acc); border-radius:2px; padding:0 1px; }
#rrStudio .st-sheet-note{ margin-top:5px; font-size:11.5px; color:var(--st-warn); }
#rrStudio .st-sheet-why{ font-size:12px; color:var(--st-ink2); line-height:1.45; }
#rrStudio .st-sheet-wait{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--st-mute); }
#rrStudio .st-sheet-acts{ display:flex; gap:8px; align-items:center; margin-top:9px; flex-wrap:wrap; }
#rrStudio .st-sheet-done{ font-size:12px; font-weight:600; color:var(--st-good); }

/* ── The panel in black: the surfaces, last so they win ──────────────── */
/* The column the panel sits in, and the hairline between it and the page. */
#atsCvRoot.rr-studio .sidebar{ background:var(--st-ground); border-right-color:var(--st-hair); }
/* ── The light ─────────────────────────────────────────────────────────
   The panel stops being a flat white rectangle without pretending to
   glow. Two washes bleed in from above the top edge -- the charge and the
   warm second light, at a few per cent each, which on paper reads as a
   sheet catching light rather than as an aurora -- and a dot field sits
   under everything. All three are background layers on the panel itself:
   the panel is a flex column and a pseudo-element would become a flex
   item, which would move every row in it. The dots are painted from
   --st-ink so a repaint carries them, and the whole stack is behind the
   content by construction, so nothing needs a z-index. */
#rrStudio{
  background-color:var(--st-ground);
  background-image:
    radial-gradient(46% 30% at 74% 0%, color-mix(in srgb, var(--st-acc) 9%, transparent), transparent 70%),
    radial-gradient(42% 26% at 12% 1%, color-mix(in srgb, var(--st-sky) 52%, transparent), transparent 72%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--st-ink) 7%, transparent) 1px, transparent 0);
  background-size:auto, auto, 19px 19px;
  background-repeat:no-repeat, no-repeat, repeat;
}
/* A floating surface needs a real shadow against a dark panel. */
.rr-st-pal .box,body.rr-st-on .rr-iae:not(.rr-kwp){ box-shadow:0 12px 34px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06); }
.rr-st-pal{ background:rgba(13,13,13,.34); }
/* Text on the charge: near-black, at every depth. */
#rrStudio .st-btn.acc,#rrStudio .st-btn.acc *,
#rrStudio .st-walkbtn,#rrStudio .st-walkbtn *,
#rrStudio .kwp-prim,#rrStudio .kwp-prim *,
#rrStudio .st-chip:hover,#rrStudio .st-chip.sel,
#rrStudio .st-more .rk,#rrStudio .rr-st-wmore .k,
#rrStudio .st-walk-pill,#rrStudio .st-jrow.cur .g,
#rrStudio .st-lead b.reach,#rrStudio .kwp-bullet em,#rrStudio .kwp-bullet .rr-st-ins,
#rrStudio .st-sheet-draft .rr-st-ins,#rrStudio .kwp-row.rr-rec > span::after,
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-go,
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-accept,
body.rr-st-on .rr-iae:not(.rr-kwp) .rr-iae-sug em{ color:var(--st-on-acc); }
/* On the accent, a quieter line is a darker one, never a lighter one. */
#rrStudio .st-walkbtn .h,#rrStudio .kwp-prim .h,#rrStudio .st-btn.acc .h{ color:rgba(0,0,0,.74); }
#rrStudio .st-btn.acc .st-kbd{ border-color:rgba(0,0,0,.3); color:var(--st-on-acc); }


/* ── The three states, as controls ─────────────────────────────────────
   Owner, 2026-09-23, over the bar, the tiles and the axis: "BREAK OUT OF
   WHAT YOU ARE IN NOW". Four rounds of styling went into a block that was
   the fourth restatement of one fact on one screen, and no amount of
   styling fixes redundancy.
   So it is three buttons instead of a chart. The count is the hero, the
   word says what it counts, and pressing one opens the list at that
   group -- which is the question a count provokes and the answer the
   panel already had one press away. */
/* Owner, 2026-09-23, on the three-column strip: "FOR THIAS PART NEED ZERO
   STYLE BAR CHART". So: a bar chart, and nothing else. No card, no border,
   no radius on the block, no dividers, no tint, no axis, no tiles, no
   legend -- three rows, each one a label, its own bar and its count.
   Segments of a single bar were built first and MEASURED, and they cannot
   tell the truth at this width: with the words under their own segments,
   every column needs a floor wide enough to hold its word, and at the
   panel's real 339px that floor drew a 10% state as 22% of the bar. A bar
   whose widths are not the shares it claims is worse than no bar. A row
   each has no floor to distort -- every bar starts at the same x and runs
   to its own share of one scale -- and the label still lives inside the
   element that draws the bar, which is the part that matters: the key
   cannot come apart from the thing it keys.
   And this is the fourth answer to the same block without being a fifth
   restatement, because the bar is the only thing here that says what SHARE
   of the job each state is. The disc says how much is earned in total, the
   words say which state is which; neither says that "not mentioned" is
   nearly half the weight of the advert. A bar's length does. */
/* The three rows share ONE set of columns, which is the whole point: three
   independent grids sized their label column by their own longest word, so
   every bar started at a different x and the common scale -- the only thing
   a bar chart is for -- was gone. The rig caught it in the first shot.
   subgrid hands each row the parent's tracks; the fixed label column below
   is the fallback where it is not supported, sized for the longest of the
   three words at 11.5px. */
#rrStudio .st-states{ display:grid; grid-template-columns:minmax(0,max-content) minmax(58px,1fr) 24px; gap:8px 0; margin:13px 0 0; }
#rrStudio .st-states:empty{ display:none; }
#rrStudio .st-state{ display:grid; grid-template-columns:84px minmax(58px,1fr) 24px; grid-column:1 / -1;
  align-items:center; gap:0 10px; width:100%; min-width:0; padding:0; border:0; border-radius:0;
  background:transparent; text-align:left; }
@supports (grid-template-columns: subgrid) {
  #rrStudio .st-state{ grid-template-columns:subgrid; }
}
#rrStudio .st-state .w{ font:400 11.5px/1.35 var(--st-sans); color:var(--st-mute); white-space:nowrap; }
/* One scale, three bars off the same left edge. 8px is a measure rather
   than a block of colour, and there is no track behind it: an empty track
   would draw a fourth line the data does not have. */
#rrStudio .st-state .bar{ display:block; height:8px; min-width:0; }
#rrStudio .st-state .bar i{ display:block; height:8px; width:var(--sh, 0%); min-width:2px; border-radius:2px; background:var(--st-hair2);
  transition:width .45s cubic-bezier(.3,0,.2,1); }
#rrStudio .st-state.s .bar i{ background:var(--st-good); }
#rrStudio .st-state.p .bar i{ background:var(--st-warn); }
#rrStudio .st-state.m .bar i{ background:var(--st-red); }
/* The counts share a column and a right edge, so the three can be compared
   without reading across three different x positions. */
#rrStudio .st-state .n{ justify-self:end; font:600 18px/1 var(--st-mono); letter-spacing:-.04em; font-variant-numeric:tabular-nums; color:var(--st-ink); }
#rrStudio .st-state .rq{ display:block; margin-top:2px; font:400 10.5px/1.3 var(--st-sans); color:var(--st-red); white-space:nowrap; }
#rrStudio .st-state .rq b{ font:600 10.5px/1.3 var(--st-mono); color:var(--st-red); }
/* The vouch tally is not a share of the advert -- it is the same
   requirements counted a second way -- so it draws no bar and takes a plain
   line under the chart. */
#rrStudio .st-state.v{ display:block; grid-column:1 / -1; margin-top:3px; font:400 11.5px/1.35 var(--st-sans); color:var(--st-mute); }
#rrStudio .st-state.v .bar{ display:none; }
#rrStudio .st-state.v .n{ display:inline; font-size:12px; }
#rrStudio .st-state.v .w{ display:inline; }
/* With no box to light up, the press shows on the words and the count. */
#rrStudio button.st-state:not(:disabled):hover .w{ color:var(--st-ink2); }
#rrStudio button.st-state:not(:disabled):hover .n{ text-decoration:underline; text-underline-offset:3px; }
#rrStudio button.st-state:not(:disabled):active .bar i{ opacity:.7; }
#rrStudio button.st-state:disabled{ cursor:default; }
#rrStudio button.st-state:disabled .n{ color:var(--st-mute); }
/* A state with nothing in it keeps its row: its bar is 2px of the pale
   hairline, which reads as "none of it" rather than as a missing row. */
#rrStudio .st-state.none .bar i{ background:var(--st-hair); }
/* forced-colors drops every background to the user's Canvas, which would
   take the whole chart with it: the bar's LENGTH is the only place this
   panel says what share of the job a state is, and a white bar on a white
   ground says nothing. So the fill is re-declared in a system colour and
   given an edge, and the zero row is left as an outline -- length still
   reads, identity is carried by the word beside it as it already was, and
   the hue that is lost was never load-bearing. */
@media (forced-colors: active) {
  /* A BORDER, not a background: forced-colors flattens every background to
     the user's Canvas -- which is the point of the mode -- but preserves
     border-style, so an outlined bar of the right length survives where a
     filled one does not. Length is the encoding here and the word beside it
     carries identity, so the hue that is lost was never load-bearing.
     forced-color-adjust:none was tried and is the wrong tool twice over: it
     opts the user out of the mode they chose, and the per-tier background
     rules out-specify it anyway, so it kept the brand colours instead of
     the system ones. */
  #rrStudio .st-state .bar i{ border:1px solid CanvasText; }
  #rrStudio .st-state.none .bar i{ border-style:dotted; }
  #rrStudio button.st-state:disabled .n{ color:GrayText; }
}

/* ═══════ MATCH, REDRAWN (owner's reference set, 2026-09-23) ═══════════
   Pink ring, black badge, verdict as the heading; three status rows with
   round marks; the plan as a pink banner with lime steps and a lime
   button. Palette: coral-pink, lime, mint, a clear yellow, black type on
   cool greys. No browns, no beiges: the warm hairline and the khaki warn
   that the rest of the panel uses stop at this block's edge. Every piece
   is drawn (SVG, CSS, text); nothing here is a picture. */
#rrStudio{
  --st-mt-pink:#FF3D7F; --st-mt-pink2:#FF9EBB; --st-mt-blush:#FFE3EC; --st-mt-banner:#FFC9DA; --st-mt-banner2:#FFB3CB;
  --st-mt-lime:#E5FF00; --st-mt-lime2:#DDF95A; --st-mt-mint:#27C98B; --st-mt-mint-soft:#C9F5E2;
  --st-mt-yel:#FFC21A; --st-mt-yel-soft:#FFEDB3; --st-mt-pink-soft:#FFD3E0;
  --st-mt-row:#F5F6F9; --st-mt-rowh:#EDEFF4; --st-mt-track:#E6E9EF; --st-mt-grey:#6B7080; --st-mt-line:#D9DCE3;
  --st-mt-ink:#0d0d0d; --st-mt-ink2:#2b2d33; --st-mt-ink3:#3a2f36; --st-mt-white:#ffffff;
}
/* the card: no tab astride the edge at rest, the badge inside says it */
#rrStudio .st-head.calm > .st-tab{ display:none; }
#rrStudio .st-head{ border-radius:22px; }
#rrStudio .st-head.calm{ padding:12px 15px 12px; }
#rrStudio .st-bar .rd{ color:var(--st-mt-grey); }

/* ring + words side by side */
#rrStudio .st-head.calm .st-fig{ flex-direction:row; align-items:center; gap:14px; margin-top:6px; }
#rrStudio .st-head.calm .st-ring{ width:104px; height:104px; }
#rrStudio .st-ring .st-ringsvg{ position:absolute; inset:0; width:100%; height:100%; }
#rrStudio .st-ring .tr{ stroke:var(--st-mt-blush); stroke-width:13; }
#rrStudio .st-ring .ar,
#rrStudio .st-fig.good .st-ring .ar,
#rrStudio .st-fig.warn .st-ring .ar,
#rrStudio .st-fig.bad .st-ring .ar{ stroke:url(#rrStRingGrad); stroke-width:13; stroke-linecap:round; }
#rrStudio .st-ring .mid{ position:relative; display:grid; justify-items:center; gap:3px; }
#rrStudio .st-fig .n,#rrStudio .st-head.calm .st-fig .n{ font:800 34px/1 var(--st-sans); letter-spacing:-.05em; color:var(--st-mt-ink); }
#rrStudio .st-fig .mid .of{ font:500 12.5px/1 var(--st-sans); color:var(--st-mt-grey); }
#rrStudio .st-head:not(.calm) .st-fig .n{ font-size:22px; }
#rrStudio .st-head:not(.calm) .st-fig .mid .of{ display:none; }
/* hand-drawn marks: dashes off the ring's shoulder, a pink sparkle at its foot */
#rrStudio .st-doo,#rrStudio .st-ring svg.st-doo{ position:absolute; inset:auto; width:22px; height:22px; fill:none; stroke:var(--st-mt-ink); stroke-width:2.2; stroke-linecap:round; pointer-events:none; }
#rrStudio .st-ring svg.st-doo-dash{ top:-4px; left:-6px; width:22px; height:22px; }
#rrStudio .st-ring svg.st-doo-spark{ right:-8px; bottom:-4px; width:24px; height:24px; fill:var(--st-mt-pink-soft); stroke-width:1.7; stroke-linejoin:round; }
#rrStudio .st-figw{ position:relative; }
#rrStudio .st-doo-flick{ top:2px; right:-2px; width:18px; height:18px; }
#rrStudio .st-head:not(.calm) .st-doo{ display:none; }

/* badge, verdict, one plain line */
#rrStudio .st-badge{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 11px; border-radius:99px;
  background:var(--st-mt-ink); color:var(--st-mt-white); font:600 9.5px/1 var(--st-mono); letter-spacing:.14em; text-transform:uppercase; white-space:nowrap; }
#rrStudio .st-badge .spk{ width:12px; height:12px; fill:var(--st-mt-lime); }
#rrStudio .st-head.calm .st-figw{ flex:1 1 auto; min-width:0; margin:0; text-align:left; }
#rrStudio .st-head.calm .st-fig .vb{ margin-top:7px; font:800 24px/1.05 var(--st-sans); letter-spacing:-.04em; color:var(--st-mt-ink); }
#rrStudio .st-fig .say{ display:block; margin-top:5px; font:400 12px/1.4 var(--st-sans); color:var(--st-mt-grey); }
#rrStudio .st-fig .say:empty{ display:none; }
#rrStudio .st-head:not(.calm) .st-badge,#rrStudio .st-head:not(.calm) .st-fig .say{ display:none; }

/* status rows: round mark, word, bar, n / total */
#rrStudio .st-states{ display:flex; flex-direction:column; gap:5px; margin-top:11px; }
#rrStudio .st-state{ display:grid; grid-template-columns:24px 92px minmax(0,1fr) auto; align-items:center; gap:0 10px;
  width:100%; padding:5px 12px 5px 8px; border-radius:13px; background:var(--st-mt-row); border:0; transition:background .14s, transform .14s; }
#rrStudio .st-state:not([disabled]):hover{ background:var(--st-mt-rowh); }
#rrStudio .st-state .ic{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center; }
#rrStudio .st-state .ic svg{ width:15px; height:15px; fill:none; stroke:var(--st-mt-ink); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
#rrStudio .st-state.s .ic{ background:var(--st-mt-mint); }
#rrStudio .st-state.s .ic svg{ stroke:var(--st-mt-white); }
#rrStudio .st-state.p .ic{ background:var(--st-mt-yel-soft); }
#rrStudio .st-state.m .ic{ background:var(--st-mt-pink-soft); }
#rrStudio .st-state .w{ font:500 13px/1.2 var(--st-sans); color:var(--st-mt-ink); white-space:nowrap; }
#rrStudio .st-state .w .rq{ display:block; margin-top:2px; font:600 10.5px/1 var(--st-sans); color:var(--st-mt-pink); }
#rrStudio .st-state .bar{ display:block; height:10px; border-radius:99px; background:var(--st-mt-track); overflow:hidden; }
#rrStudio .st-state .bar i{ display:block; height:100%; width:var(--sh); min-width:10px; border-radius:99px; transition:width .5s cubic-bezier(.3,0,.2,1); }
#rrStudio .st-state.none .bar i{ min-width:0; width:0; }
#rrStudio .st-state.s .bar i{ background:var(--st-mt-mint); }
#rrStudio .st-state.p .bar i{ background:var(--st-mt-yel); }
#rrStudio .st-state.m .bar i{ background:var(--st-mt-pink); }
#rrStudio .st-state .n{ font:400 12.5px/1 var(--st-sans); color:var(--st-mt-grey); white-space:nowrap; text-align:right; }
#rrStudio .st-state .n b{ font:700 15px/1 var(--st-sans); color:var(--st-mt-ink); margin-right:1px; }
#rrStudio .st-state.v{ display:block; padding:6px 12px; font-size:12px; color:var(--st-mt-grey); }

/* the lead: where it gets you, with the destination in lime */
#rrStudio .st-head.calm .st-lead{ text-align:left; margin-top:9px; font:400 12.5px/1.5 var(--st-sans); color:var(--st-mt-ink2); }
#rrStudio .st-lead b.reach{ background:var(--st-mt-lime); color:var(--st-mt-ink); padding:1px 6px; border-radius:99px; font-family:var(--st-sans); font-weight:700; }

/* ── the plan: a pink banner with lime steps and a lime button ── */
#rrStudio .st-go{ border-bottom:0; padding:0; }
#rrStudio .st-plan.st-boost{ position:relative; margin:0; padding:13px 15px 13px; border:0; border-radius:22px;
  background:linear-gradient(160deg, var(--st-mt-banner) 0%, var(--st-mt-banner2) 100%); color:var(--st-mt-ink); overflow:hidden; box-shadow:none; }
#rrStudio .st-boost .st-plan-tab{ display:none; }
#rrStudio .st-boost .st-plan-t{ position:relative; z-index:1; margin:9px 0 0; max-width:68%; font:800 21px/1.08 var(--st-sans); letter-spacing:-.04em; color:var(--st-mt-ink); }
#rrStudio .st-boost .st-plan-p{ position:relative; z-index:1; margin:5px 0 0; max-width:70%; font:400 12px/1.45 var(--st-sans); color:var(--st-mt-ink3); }
#rrStudio .st-boost .st-plan-p .h{ display:inline; }
#rrStudio .st-boost-art{ position:absolute; top:8px; right:-10px; width:112px; height:122px; pointer-events:none; }
#rrStudio .st-boost-art .blob{ fill:var(--st-mt-lime2); }
#rrStudio .st-boost-art .phone rect:first-child{ fill:var(--st-mt-ink); }
#rrStudio .st-boost-art .scr{ fill:var(--st-mt-white); }
#rrStudio .st-boost-art .ln{ fill:var(--st-mt-line); }
#rrStudio .st-boost-art .hl{ fill:var(--st-mt-lime); stroke:var(--st-mt-ink); stroke-width:1; }
#rrStudio .st-boost-art .spk-a{ fill:var(--st-mt-lime); stroke:var(--st-mt-ink); stroke-width:1.6; stroke-linejoin:round; }
#rrStudio .st-boost-art .spk-b{ fill:var(--st-mt-white); stroke:var(--st-mt-ink); stroke-width:1.5; stroke-linejoin:round; }
#rrStudio .st-boost-art .dash{ fill:none; stroke:var(--st-mt-ink); stroke-width:2.2; stroke-linecap:round; }
/* numbered steps, joined by a thread, each opening its requirement */
#rrStudio .st-bsteps{ position:relative; z-index:1; list-style:none; margin:9px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; max-width:80%; }
#rrStudio .st-bsteps li{ position:relative; }
#rrStudio .st-bsteps li + li::before{ content:""; position:absolute; left:11px; top:-5px; width:2px; height:6px; background:var(--st-mt-ink); }
#rrStudio .st-bstep{ display:flex; align-items:center; gap:10px; width:100%; padding:2px 6px 2px 0; border-radius:99px; }
#rrStudio .st-bstep .sn{ flex:none; width:24px; height:24px; display:grid; place-items:center; border-radius:50%;
  background:var(--st-mt-lime); border:1.8px solid var(--st-mt-ink); font:700 11.5px/1 var(--st-sans); color:var(--st-mt-ink); }
#rrStudio .st-bstep .sl{ min-width:0; font:500 13px/1.25 var(--st-sans); color:var(--st-mt-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#rrStudio .st-bstep:hover .sl{ text-decoration:underline; text-underline-offset:3px; }
/* the button the whole card leads to */
#rrStudio .st-boost .st-walkbtn{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  margin:11px 0 0; padding:12px 18px; border-radius:99px; background:var(--st-mt-lime); color:var(--st-mt-ink);
  border:2px solid var(--st-mt-ink); box-shadow:0 4px 0 var(--st-mt-ink); font:800 16px/1 var(--st-sans); letter-spacing:-.02em; text-align:center;
  transition:transform .12s, box-shadow .12s; }
#rrStudio .st-boost .st-walkbtn:hover{ transform:translateY(-1px); box-shadow:0 5px 0 var(--st-mt-ink); }
#rrStudio .st-boost .st-walkbtn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--st-mt-ink); }
#rrStudio .st-boost .st-walkbtn .arw{ width:18px; height:18px; fill:none; stroke:var(--st-mt-ink); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; transition:transform .15s; }
#rrStudio .st-boost .st-walkbtn:hover .arw{ transform:translateX(3px); }
#rrStudio .st-viewreq{ position:relative; z-index:1; display:block; margin:10px auto 0; font:600 12px/1 var(--st-sans); color:var(--st-mt-ink); text-decoration:underline; text-underline-offset:3px; text-align:center; }
@media (prefers-reduced-motion: reduce){
  #rrStudio .st-state .bar i,#rrStudio .st-boost .st-walkbtn,#rrStudio .st-boost .st-walkbtn .arw{ transition:none; }
}
/* The list card's floor comes down while the banner carries the first
   three steps: at rest the card only holds the sections under them. */
#rrStudio .st-plan-slot:has(.st-bsteps) ~ .st-listcard{ min-height:84px; }
#rrStudio .st-plan-slot:has(.st-bsteps) ~ .st-sech{ margin-top:2px; }
/* ═══════ END MATCH, REDRAWN ═══════ */