/* ==========================================================================
   Fulcrium portrait redesign (PREVIEW) — THE SKILLS LIBRARY styles ("Learn the skills", Task 73).
   A non-FLOW reference room: landing → module rooms → the card sheet. Family tints + deep inks are
   the app's established values (the Task-71 room grammar; each ink AA-proven ≥4.5 on its deeper ground
   stop). The card sheet is z-index 80 — ABOVE the Repair Toolchest (70) — so a peek layers over it.
   ========================================================================== */

/* non-FLOW: hide the shared topbar on the library (the history/analysis precedent). */
/* Dawn-grounds unification (Task 75): the library LANDING's neutral paper -> dawn gradient on
   body[data-screen] (shows through the transparent landing view; the four module rooms keep their family
   tints and are exempt — their .sk-module gradients paint over this). Frozen file touched under the
   Task-75 ground-census authorization; ground declaration only. */
body[data-screen="skills"]{
  /* TASK 108 — THE GROUND GOES FLAT, and it is one declaration rather than two.
     OWNER RULING, measured on device: Break and the Glance were the ONLY screens
     without the pale bands, and they are the only screens whose CANVAS is a flat
     colour. Task 107's midpoint shipped and the bands did not move — a midpoint
     mismatches BOTH edges by ~10 units, because a gradient page is two different
     colours at its two ends and Safari has only one `background-color` to tint its
     chrome strips with. ONLY A FLAT PAGE LETS ONE COLOUR SERVE BOTH.
     THE VALUE IS THIS GROUND'S OWN LAST STOP, derived from this rule's own former gradient:
       stops #FBF7EE 0% … #F6EDD9 100%  ->  LAST = #F6EDD9
     The last stop and not another value because THE DARKEST-STOP CONTRAST DOCTRINE
     measured every ink pair against exactly this colour, so a flat fill equal to it
     cannot move any pair — T108-A4 measures that rather than assuming it.
     Task 107's `background-color` is gone: the shorthand now carries the colour. */  /* TASK 109 — AND THE GRADIENT IS GONE ENTIRELY. Task 108 put it on the frame,
     which fixed the bottom; the TOP still mismatched, because a gradient is pale
     where the flat canvas is not and Safari has only ONE colour to tint both of
     its chrome strips with. One colour serves both only if the page IS one
     colour. This value is unchanged from Task 108 — no new colour is invented and
     no token is re-valued; only the gradient rule was deleted. */
  background: #F6EDD9;
}
body[data-screen="skills"] .topbar{ display:none; }

#screen-skills{ align-items:stretch; padding:0; }
.sk-view{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.sk-view[hidden]{ display:none; }

/* ==========================================================================
   THE FAMILY CLASSES — the per-family EXPANSION BY ROLE (Task R10-4b).
   Seven roles, four families, every cell a register token. The roles are derived from the
   design's own consumption table, not from token stems: the family INK alone lives under four
   DIFFERENT stems (--ink-key-sky / --ink-module-rose / --ink-dusk / --ink-veil), so expanding
   stems instead of roles reports gaps that do not exist.
   --sk-top AND --sk-ink SURVIVE WITH THEIR EXACT VALUES because the PICKER reads them
   (.sk-picker-mod, below) and Ruling 7 keeps the picker byte-identical. They are now token
   references rather than literals; the resolved colours are unchanged.
   --sk-bot IS GONE: its only two consumers were the tile and room gradients this task replaces
   with --fill-module-* / --room-*, and three of its four values had no register token.
   NAMING NOTE: dusk's pale tint is --fill-4 because the register carries bare --sky / --blush /
   --sun but no bare --dusk; the value is identical either way.
   ========================================================================== */
.sk-fam-sky{
  --sk-top:var(--sky); --sk-ink:var(--ink-key-sky);
  --sk-tile:var(--fill-module-sky); --sk-tile-shadow:var(--shadow-module-sky);
  --sk-room:var(--room-sky);
  --sk-pill:var(--fill-pill-sky); --sk-pill-shadow:var(--shadow-pill-sky);
  --sk-emboss:var(--emboss-title-sky);
}                                                                     /* Mindfulness */
.sk-fam-blush{
  --sk-top:var(--blush); --sk-ink:var(--ink-module-rose);
  --sk-tile:var(--fill-module-rose); --sk-tile-shadow:var(--shadow-module-rose);
  --sk-room:var(--room-rose);
  --sk-pill:var(--fill-pill-rose); --sk-pill-shadow:var(--shadow-pill-rose);
  --sk-emboss:var(--emboss-title-rose);
}                                                                     /* Distress tolerance — the register calls this family ROSE */
.sk-fam-lavender{
  --sk-top:var(--fill-4); --sk-ink:var(--ink-dusk);
  --sk-tile:var(--fill-module-dusk); --sk-tile-shadow:var(--shadow-module-dusk);
  --sk-room:var(--room-dusk);
  --sk-pill:var(--fill-pill-dusk); --sk-pill-shadow:var(--shadow-pill-dusk);
  --sk-emboss:var(--emboss-title-dusk);
}                                                                     /* Emotion regulation — the register calls this family DUSK */
.sk-fam-sun{
  --sk-top:var(--sun); --sk-ink:var(--ink-veil);
  --sk-tile:var(--fill-module-sun); --sk-tile-shadow:var(--shadow-module-sun);
  --sk-room:var(--room-sun);
  --sk-pill:var(--fill-pill-sun); --sk-pill-shadow:var(--shadow-pill-sun);
  --sk-emboss:var(--emboss-title-sun);
}                                                                     /* Interpersonal effectiveness */

/* the back chevron — top-left, ≥44px, aria-labeled (the room-exit convention). THE RIDER'S RULE:
   the ground turned under it, so it is re-audited as a control and takes the register's round-key
   treatment the design draws (raised disc), not a transparent glyph. */
/* R10-4c — THE CHEVRON IS OPTICALLY CENTRED, not line-box centred.
   OWNER-REPORTED from a device walk of the skills landing: the chevron sits low inside its
   circle. MEASURED (differential screenshot of the real button, glyph vs no glyph, three
   viewports, all identical): the "‹" ink box is 9x13px and its centre sat at (22.5, 25.5)
   in a 44x44 button whose centre is (22, 22) — dy=+3.5 LOW, dx=+0.5 right. An independent
   repaint of the same glyph from its computed font agreed: dy=+4.5, dx=+1.
   WHY A DOM RECTANGLE CANNOT SEE IT: flex centres the LINE BOX, which spans the font's full
   ascent-to-descent (measured fbbAscent 25 / fbbDescent 6 at 26px) while this glyph's ink
   occupies only abbAscent 13 / abbDescent 1 — so the box is centred and the stroke is not.
   THE BUTTON'S GEOMETRY DOES NOT CHANGE. `box-sizing:border-box` with min-width/min-height
   at var(--tap) keeps the border box 44x44 and the tap target >=44px; the padding only
   moves the CONTENT box the glyph is centred in. The shell's own chevron carries the same
   kind of correction (`.iconbtn .chev{margin-top:-2px}`, css/preview/base.css:159); this
   control is the button's own text node, so it takes the correction as padding instead. */
.sk-back{
  position:absolute; top:calc(env(safe-area-inset-top) + var(--s1)); left:calc(env(safe-area-inset-left) + 4px);
  min-width:var(--tap); min-height:var(--tap); box-sizing:border-box; border:0; cursor:pointer;
  padding:0 1px 7px 0;                                   /* OPTICAL CENTRING: -3.5px y, -0.5px x */
  border-radius:50%; background:var(--fill-back); box-shadow:var(--shadow-round);
  color:var(--ink); font-family:var(--font-q); font-weight:400; font-size:26px; line-height:1;
  display:flex; align-items:center; justify-content:center; z-index:2;
  transition:transform var(--dur-fast) var(--ease-standard);
}
.sk-back:active{ transform:scale(.94); }

/* ---- LANDING (W1) — the ground is NOT touched: Ruling 5 keeps the flat #F6EDD9 above. ---- */
.sk-landing{ position:relative; padding:calc(env(safe-area-inset-top) + var(--s5)) var(--s2) var(--s4); align-items:center; }
.sk-landing-head{ text-align:center; max-width:30ch; margin:0 auto var(--s3); }
.sk-landing-title{ margin:0 0 6px; font-family:var(--font-q); font-weight:400; color:var(--ink-strong); text-shadow:var(--emboss-title); font-size:clamp(28px,8vw,36px); line-height:1.05; }
.sk-landing-sub{ margin:0; font-family:var(--font-b); font-weight:600; color:var(--ink-helper); font-size:clamp(14px,4vw,16px); line-height:1.4; }
.sk-tiles{ width:100%; max-width:520px; margin:0 auto; display:flex; flex-direction:column; gap:14px; }
.sk-tile{
  width:100%; box-sizing:border-box; text-align:left; cursor:pointer; border:0;
  border-radius:var(--radius-chip-quiet); padding:16px 18px 18px;
  background:var(--sk-tile); box-shadow:var(--sk-tile-shadow);
  display:flex; flex-direction:column; gap:3px;
  transition:transform var(--dur-fast) var(--ease-standard);
}
.sk-tile:active{ transform:scale(.99); }
.sk-tile-title{ font-family:var(--font-q); font-weight:400; color:var(--sk-ink); text-shadow:var(--sk-emboss); font-size:clamp(19px,5.4vw,22px); line-height:1.1; }
.sk-tile-clinical{ font-family:var(--font-b); font-weight:600; font-style:italic; color:var(--sk-ink); font-size:13px; line-height:1.3; opacity:.92; }
.sk-tile-tagline{ font-family:var(--font-b); font-weight:600; color:var(--sk-ink); font-size:clamp(13px,3.6vw,14px); line-height:1.35; margin-top:2px; }

/* ---- MODULE ROOM (W2) — the tile becomes the room: the module's own --room-* ground ----
   TASK R10-room-ground: THE GROUND IS NO LONGER PAINTED HERE. The owner's finding was that the
   family colour arrived as "a rectangle tile inside the cream ground, not the ground itself" —
   measured: the body read #F6EDD9 in all four rooms and so did the theme-color meta, so Safari
   tinted its chrome strips cream inside a room. The colour now goes on the PAGE, painted by
   js/preview/screen-skills.js through Preview.Ground at every in-screen view change. Painting it
   here as well would put one colour over the same colour — invisible today, and a seam the first
   time either value moved. --sk-room STAYS DECLARED on the .sk-fam-* scopes above: it is what the
   module reads at paint time, so the value is still a token and still lives in this file. */
.sk-module{ position:relative; padding:calc(env(safe-area-inset-top) + var(--s5)) 18px 20px; }
.sk-module .sk-back{ color:var(--sk-ink); }
.sk-module-head{ max-width:34ch; margin:0 auto var(--s3); text-align:center; }
.sk-module-title{ margin:0 0 var(--s1); font-family:var(--font-q); font-weight:400; color:var(--sk-ink); text-shadow:var(--sk-emboss); font-size:clamp(24px,7vw,27px); line-height:1.1; }
.sk-module-intro{ margin:0; font-family:var(--font-b); font-weight:600; color:var(--sk-ink); font-size:clamp(13px,4vw,14px); line-height:1.5; }
.sk-rows{ width:100%; max-width:560px; margin:0 auto; display:flex; flex-direction:column; gap:8px; }
.sk-row{
  width:100%; box-sizing:border-box; text-align:left; cursor:pointer; border:0;
  background:var(--fill-key); box-shadow:var(--shadow-key); border-radius:var(--radius-tile); padding:9px 14px;
  display:flex; flex-direction:column; gap:2px;
  transition:transform var(--dur-fast) var(--ease-standard);
}
.sk-row:active{ transform:scale(.995); }
.sk-row-main{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.sk-row-name{ font-family:var(--font-b); font-weight:800; color:var(--ink); font-size:clamp(15px,4.2vw,15px); line-height:1.2; text-shadow:var(--sk-emboss);}
/* THE ONE INK SUBSTITUTION THIS TASK MADE, and it is measured rather than preferred. The design
   draws these two secondary lines in --ink-soft #6B7680; ON THE RENDER that measures 4.24 against
   --fill-key's DARKEST stop rgb(242,245,249) — below the 4.5 floor, so it is NOT consumed. The
   nearest darker SAME-HUE ink that passes is --ink-tagline #5F6972 at 5.12. The precedent is this
   file's own .sk-card-label, which Task 76 moved off --ink-soft for exactly this reason. (The
   nearest darker token by RAW luminance is --lane-sun-edge, an olive; family palettes are law and
   a sun-hued ink on three other families' rooms is not an option.) */
.sk-row-clinical{ font-family:var(--font-b); font-weight:600; color:var(--ink-tagline); font-size:12px; line-height:1.2; }
.sk-row-forwhen{ font-family:var(--font-b); font-weight:600; color:var(--ink-tagline); font-size:clamp(12.5px,3.6vw,12.5px); line-height:1.35; }

/* ==========================================================================
   THE CARD SHEET (W3) — a body-mounted modal (z-index 80, above the Toolchest at 70). Standing
   teaching-card taxonomy: dimmed backdrop, bottom sheet, zero displacement beneath, pointer-inert
   when hidden ([hidden]{display:none}), two dismissals (backdrop + Close).
   BUILT FOR ALL FOUR FAMILIES, not the two the design illustrates: the app opens thirty-two cards,
   one per skill, each in its module's family. The family class rides the card BODY so the title and
   the pill both read the same family — see buildCardBody in screen-skills.js.
   THE CARD TITLE'S EMBOSS IS THE CARD'S OWN FAMILY, and that is a RECORDED DEVIATION from the design
   of record, taken on the owner's ruling: the design draws both of its illustrated card titles with
   the NEUTRAL --emboss-title (design lines 1875 and 1947); the family-tinted embosses at 1842 and
   1902 belong to the ROOM titles behind each open sheet. The ink stays the design's --ink-strong.
   ========================================================================== */
.sk-cardwrap{ position:fixed; inset:0; z-index:80; display:flex; align-items:flex-end; justify-content:center; }
.sk-cardwrap[hidden]{ display:none; }
.sk-card-backdrop{ position:absolute; inset:0; background:var(--fill-scrim-card); }
.sk-card-sheet{
  position:relative; width:100%; max-width:560px; max-height:88vh; box-sizing:border-box;
  background:var(--fill-sheet-cool); border-radius:20px 20px 0 0; padding:10px 18px calc(env(safe-area-inset-bottom) + 18px);   /* RR-1: the menus' sheet */
  display:flex; flex-direction:column; box-shadow:var(--shadow-sheet);
}
.sk-card-handle{ width:44px; height:4px; border-radius:var(--radius-handle); background:var(--fill-card-handle); box-shadow:var(--shadow-card-handle); margin:2px auto 8px; flex:none; }
.sk-card-x{
  padding-bottom:var(--pad-glyph-optical);   /* R10-glyph-centring: the optical lift; border box unchanged (*{box-sizing:border-box}) */
  position:absolute; top:6px; right:6px; min-width:var(--tap); min-height:var(--tap); box-sizing:border-box;
  border:0; border-radius:50%; background:var(--fill-back); box-shadow:var(--shadow-round); cursor:pointer; color:var(--ink);
  font-family:var(--font-q); font-weight:800; font-size:22px; line-height:1; display:flex; align-items:center; justify-content:center;
  transition:transform var(--dur-fast) var(--ease-standard);
}
.sk-card-x:active{ transform:scale(.9); }
.sk-card-body{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:16px; padding-right:2px; }
.sk-card-headrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 40px 0 0; }
.sk-card-name{ margin:0; font-family:var(--font-q); font-weight:400; color:var(--ink-strong);
  font-size:clamp(19px,5.4vw,23px); line-height:1.15; -webkit-text-stroke:0.8px currentColor;
  text-shadow:var(--emboss-title); }   /* R3: the same SHEET-TITLE recipe as both menus */
.sk-card-pill{
  font-family:var(--font-b); font-weight:700; font-size:12px; line-height:1; color:var(--sk-ink);
  background:var(--sk-pill); box-shadow:var(--sk-pill-shadow); border-radius:var(--radius-pill); padding:7px 13px; white-space:nowrap;
  text-shadow:var(--emboss-body);   /* R2: CONTAINER ONLY. The text drops off --sk-emboss (= --emboss-title-*, a title carve on 12px) to the ruled flat etch. */
}
.sk-card-sec{ display:flex; flex-direction:column; gap:6px; }
.sk-card-label{ font-family:var(--font-b); font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-sheet-soft-cool); font-size:11px; line-height:1;
  text-shadow:var(--emboss-body);}   /* E1: 11px, so the engrave classification governs it independently of RR-1b.
     THE INK MOVED WITH THE SHEET: RR-1 put this label on --fill-sheet-cool, where --ink-tagline (#5F6972) reads
     4.27 — below the floor. --ink-sheet-soft-cool is the token already ruled for exactly this, on exactly this
     sheet: regressions-repair.mjs's R9-A8 records "the design's #5F6972 measured 4.27 on this sheet's floor". */
.sk-card-forwhen-text{ margin:0; font-family:var(--font-b); font-weight:700; color:var(--ink); font-size:clamp(15px,4.2vw,16px); line-height:1.45; }
.sk-card-para{ margin:0; font-family:var(--font-b); font-weight:600; color:var(--ink); font-size:clamp(14px,4vw,15px); line-height:1.55; }
.sk-card-why-text{ margin:0; font-family:var(--font-b); font-weight:600; color:var(--ink); font-size:clamp(14px,4vw,15px); line-height:1.55; }
/* the caution callout — a quiet warm sunken box, no label; it renders BETWEEN For when and Try this,
   never after (the standing doctrine; suite-asserted by the caution-position row). */
.sk-card-caution{ background:var(--fill-caution); box-shadow:var(--shadow-caution); border-radius:var(--radius-zone); padding:12px 14px; }
.sk-card-caution-text{ margin:0; font-family:var(--font-b); font-weight:700; color:var(--ink-caution); font-size:clamp(13px,3.8vw,14px); line-height:1.45; }
.sk-card-done{
  flex:none; margin-top:var(--s2); align-self:stretch; min-height:var(--tap); box-sizing:border-box;
  border:0; border-radius:var(--radius-zone); background:var(--fill-key); box-shadow:var(--shadow-key); color:var(--ink-strong); cursor:pointer;
  font-family:var(--font-q); font-weight:600; font-size:16px;
  transition:transform var(--dur-fast) var(--ease-standard);
  text-shadow:var(--emboss-body);   /* A2 drift fix: it renders OUTSIDE every .sk-fam-* scope, so the fallback fired and put a TITLE carve on 16px text. */
}
.sk-card-done:active{ transform:scale(.99); }

/* REDUCED MOTION — every animation this task ships is suppressed. The animations are the press
   transitions on the five pressables above; under `reduce` both the transition and the pressed
   transform are gone, so a press is instant and still. Suite-asserted (reduced-motion row). */
@media (prefers-reduced-motion:reduce){
  .sk-tile, .sk-row, .sk-card-x, .sk-card-done, .sk-back{ transition:none; }
  .sk-tile:active, .sk-row:active, .sk-card-x:active, .sk-card-done:active, .sk-back:active{ transform:none; }
}

/* ==========================================================================
   THE PICKER (Task 78) — the full-library chooser, a second body-mounted seam (Break's gap
   panel is its first consumer). Z 65: ABOVE the break panel (55) and its arrival sheet (58) /
   teaching card (60), BELOW the card sheet (80) — so a "?" peek stacks the card over the picker
   per the standing rule. Sheet body = SHEET DAWN (the standing sheet grammar); rows are white
   figures on it; module headers wear the module-pill treatment (family tint + deep ink) at
   sheet scale. Chosen rows wear the NEUTRAL SLATE selected treatment, now consumed BY NAME as
   --fill-skill-chosen / --ink-skill-chosen (the gap panel's own chosen-chip tokens; sage
   discipline: a selected skill must NOT read as sage). Inert = opacity .45 + aria-disabled (no
   established disabled class exists app-wide; recorded in STATE).

   TASK R10-picker (v4) — THE PICKER TAKES THE DIMENSIONAL REGISTER. The design of record does
   not draw this surface (docs/STATE.md, "the design does NOT draw it"), so its treatment source
   is the ON-RECORD TOOLCHEST VALUE-COMPARISON in docs/STATE.md's G7 section: the cool sheet
   (--fill-sheet-cool / --shadow-sheet-cool), the warm scrim (--fill-scrim-warm), and the
   round-control recipe on the close x (--fill-round / --shadow-round / --ink-sheet-strong,
   taken as a whole from its twin .brk-panel-close rather than half-applied). The OPTION ROWS
   take the Toolchest's carved chip (--fill-sort-chip / --shadow-sort-chip / --radius-tile) —
   the owner's standing flat-veto, honoured by construction on its fourth surface; the 2px
   border retires because the carve carries the edge, exactly as it did on .brk-skill.
   THE FLOOR FIX: .sk-picker-clinical / .sk-picker-forwhen moved off the #6B7680 literal
   (= --ink-soft) onto --ink-tagline. On the NEW carved fill the old ink reads 4.24 at rest and
   3.90 chosen -- BELOW the 4.5 floor in BOTH states, so a chosen-state-only override would not
   have been enough. --ink-tagline is the ink .brk-skill-hint already wears for this exact role.
   .sk-picker-peek is deliberately LEFT AS SHIPPED: R-C does not name it and it is an
   info-disclosure control, not a skill option -- named as a judgment call, not decided in
   silence. Its ink stays legible because its fill stays white.
   ========================================================================== */
.sk-pickerwrap{ position:fixed; inset:0; z-index:65; display:flex; align-items:flex-end; justify-content:center; }
.sk-pickerwrap[hidden]{ display:none; }                     /* closed -> not painted, pointer-inert */
.sk-picker-backdrop{ position:absolute; inset:0; background:var(--fill-scrim-warm); }
.sk-picker-sheet{
  position:relative; width:100%; max-width:540px; max-height:86vh; display:flex; flex-direction:column;
  background:var(--fill-sheet-cool); border-radius:20px 20px 0 0; padding:20px 18px calc(env(safe-area-inset-bottom) + 18px);   /* THE REGISTER'S COOL SHEET (R-C) */
  box-shadow:var(--shadow-sheet-cool);
}
.sk-picker-x{
  padding-bottom:var(--pad-glyph-optical);   /* R10-glyph-centring: the optical lift; border box unchanged (*{box-sizing:border-box}) */
  position:absolute; top:10px; right:12px; width:var(--tap); height:var(--tap); min-width:var(--tap); min-height:var(--tap);
  border:0; border-radius:50%; background:var(--fill-round); box-shadow:var(--shadow-round);
  color:var(--ink-sheet-strong); font-family:var(--font-q); font-size:22px; font-weight:800; line-height:1;   /* R4(iii): Fredoka w800, the one glyph on all three surfaces */
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.sk-picker-x:active{ transform:scale(.9); }
.sk-picker-title{ margin:0 40px 10px 0; font-family:var(--font-q); font-weight:400; font-size:clamp(19px,5.4vw,23px);
  color:var(--ink-strong); line-height:1.15; -webkit-text-stroke:0.8px currentColor;   /* STANDING LITERAL, the recipe's own: screen-thoughts.css:333 */
  text-shadow:var(--emboss-title); }   /* R3: THE SHEET-TITLE RECIPE, read from .sheet-title / .brk-panel-title. The 600 was O-2's "too bold". */
.sk-picker-list{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:8px; padding-right:2px; }
.sk-picker-mod{
  align-self:flex-start; margin-top:8px; font-family:var(--font-b); font-weight:700; font-size:12px; line-height:1;
  color:var(--sk-ink); background:var(--sk-pill); box-shadow:var(--sk-pill-shadow); border-radius:var(--radius-pill);
  padding:7px 13px; white-space:nowrap; text-shadow:var(--emboss-body);   /* O-3 + R2: the POPUP's pill container, and the FLAT etch on its text (12px <= 16px) */
}
.sk-picker-mod:first-child{ margin-top:0; }
.sk-picker-rowpair{ display:flex; align-items:stretch; gap:6px; }
.sk-picker-row{
  flex:1 1 auto; min-width:0; display:block; text-align:left; min-height:var(--tap); cursor:pointer;
  border:0; border-radius:var(--radius-tile); background:var(--fill-sort-chip); box-shadow:var(--shadow-sort-chip);
  padding:9px 14px; color:var(--ink-sheet-strong);
}
/* TASK R10-chosen-well — THE CHOSEN ROW IS A SUNKEN WELL (owner, 2026-08-20: "Part A, go
   with (C), the sunken well. I've changed my mind and i think it will look really nice with
   our 3D carved (etched) theme"). He had declined this option once and reversed that ON
   MEASUREMENT; the reversal is his.

   WHY COLOUR COULD NOT DO IT, MEASURED RATHER THAN ASSERTED. --fill-skill-chosen #E7ECF1
   separates from --fill-sheet-cool's nearest stop #E7EEF7 at 1.017 — invisible. TWO inks
   render on that fill, not one: the name (--ink-skill-chosen, headroom) and the secondary
   texts (--ink-tagline, 4.71 against a 4.5 floor — the binding constraint). At the hard floor
   the darkest legal fill still separates at only ~1.06. So the signal stops being colour.

   AN UNCHOSEN ROW STAYS A RAISED CARVED CHIP; A CHOSEN ROW BECOMES A WELL. The register's
   GENERAL well recipe is consumed WHOLE and BY NAME — --fill-well with --shadow-well, the
   pair the register itself defines together (the fills block names --fill-well as the fill
   that pairs with the shadow ramps, and nine consumers across eight screens already wear it).
   --fill-auth-well is the SCOPED variant and is not adopted here. Depth has no ink floor to
   fight: every ink IMPROVES on the well's darkest stop #ECEFF3 (its TOP, by luminance) —
   name 7.76 -> 8.00, secondary 4.71 -> 4.86.

   R-LEDGE is satisfied without a border: border-width stays 0 from the base rule and the
   carve carries a solid (zero-blur) stop — --shadow-well's `inset 0 -1px 0 rgba(255,255,255,.95)`.
   GEOMETRY DOES NOT MOVE. Only paint changes: the radius stays the chip's --radius-tile (the
   well's own --radius-well 10px is deliberately NOT taken — a radius that changed on tap would
   be a shape jump under the thumb), and padding, min-height and the border box are untouched.
   The base/unchosen rule above is byte-identical to what shipped. --fill-skill-chosen loses its
   last consumer with its twin in screen-break.css and is DORMANT — recorded, not removed
   (base.css is read-only here). */
.sk-picker-row[aria-pressed="true"]{ background:var(--fill-skill-chosen); box-shadow:var(--shadow-well); }
.sk-picker-row[aria-pressed="true"] .sk-picker-name{ color:var(--ink-skill-chosen); }
.sk-picker-nameline{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.sk-picker-name{ font-family:var(--font-b); font-weight:800; font-size:14px; line-height:1.25; color:var(--ink);
  text-shadow:var(--emboss-body); }   /* DISPLAY, 14px <= 16px -> the flat etch; the chosen state re-inks only, so this one site carves both */
.sk-picker-clinical{ font-family:var(--font-b); font-weight:600; font-style:italic; font-size:12px; line-height:1.2; color:var(--ink-tagline); }
.sk-picker-forwhen{ font-family:var(--font-b); font-weight:600; font-size:12px; line-height:1.35; margin-top:2px; color:var(--ink-tagline); }
.sk-picker-peek{
  flex:0 0 auto; width:var(--tap); min-height:var(--tap); box-sizing:border-box; cursor:pointer;
  border:0; border-radius:var(--radius-tile); background:var(--fill-sort-chip); box-shadow:var(--shadow-sort-chip);
  color:var(--ink-sheet-soft);   /* R4(i): CARVED. The shipped #6B7680 (= --ink-soft) reads 4.24 on this fill — below the
     floor — so the floor governs. It takes the ink the Toolchest's peek already wore, which keeps R9-A9's
     owner-ratified 5.20 figure intact rather than moving a ratified number for no reason. */
  font-family:var(--font-q); font-weight:600; font-size:18px; line-height:1;
}
.sk-picker-peek:active{ transform:scale(.95); }
.sk-inert{ opacity:.45; }   /* THE INERT TREATMENT — no established disabled class exists; recorded */