/* ColorHub polish layer (lane L12, design lead, 2026-10-08). Loaded last. Three parts:
   1. Shell: the Room header, the bottom fade under the Rooms corner, the stem on short screens.
   2. Motion and touch: one enter/exit for screens and sheets, one pressed state, the lesson-complete moment,
      fly-to-the-map, all on the DESIGN-SYSTEM §8 tokens. Reduce Motion turns every move into a fade.
   3. Shared components: the squint key (.sq-key) and its states.
   4. Overrides for files other lanes are editing today (gym, match, gallery, honey): every tracked-uppercase
      mono label becomes a serif note (§4: mono only counts), and radii snap to the §6 scale. Generated by one
      sweep so the source files stay conflict-free; fold them into those files once the lanes settle. */

/* ================================================================ 1. shell */
/* The Room header: the converted Train and Studio headers (js/core.js roomChrome) and Learn's own */
.room-head{align-items:baseline;padding-top:2px}
.room-head .note{white-space:nowrap}
.room-head.rh-auto{margin-bottom:var(--s3)}
/* the last part of every room fades into the sheet, so content slides under the Rooms corner cleanly
   (DESIGN-SYSTEM §11 Room) instead of being covered mid-word; the scroll end reserves room to clear it */
.room-sheet::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--bottom) + 104px);pointer-events:none;z-index:3;
  background:linear-gradient(rgba(23,22,15,0),rgba(23,22,15,.86) 52%,var(--surface-1) 78%)}
.room-sheet:has(.xp-pager)::after{display:none}
.room-sheet>.screen.has-tabs{padding-bottom:calc(var(--bottom) + 56px + 12px + 64px)}
/* the stem: 100px apart and 78px bubbles where there's room; on a short screen (an SE, 320x568) the spacing
   and the bubbles shrink so the top one never runs off the screen (--n is set by toggleStem()) */
.rooms-stem{--step:min(100px,calc((100dvh - var(--top) - var(--bottom) - 112px) / var(--n,4)));--art:min(78px,calc(var(--step) - 12px))}
.rooms-stem .rm-bubble{bottom:calc(var(--bottom) + 12px + var(--step) * (var(--i) + 1) - 6px)}
.rooms-stem .rm-art{width:var(--art);height:var(--art)}
.rooms-stem .rm-bubble:active .rm-art{transform:scale(.94)}
.rm-art{transition:transform var(--dur-0) ease-out}
@media (max-height:600px){.rm-label b{font-size:26px}.rm-label em{font-size:15px}}
/* the corner: its press dip matches the bubbles' (.94, --dur-0) */
.corner{transition:transform var(--dur-0) ease-out,opacity .4s var(--ease)}   /* keeps Home's chrome fade; the ✕ swaps instantly */
.corner:active{transform:scale(.94)}
/* Explore's loading header still uses the old 56px tab title: same title-1 as every room */
.x-row .tab-title{font:400 44px/.95 var(--serif);letter-spacing:-.03em}
/* AA on paper: the deck label's "About scarlet" and "look-alikes" links used --soft (2.3:1 on paper) */
.label .peek-btn{color:var(--paper-soft);border-bottom-color:var(--paper-line)}
.vs[data-nb]::after,.compare[data-nb]::after,.pk-vs[data-nb]::after{white-space:nowrap;opacity:1;color:var(--soft)}
.label .vs[data-nb]::after{color:var(--paper-soft)}
/* Empty states (DESIGN-SYSTEM §10): one quiet line in the note voice, never a sans paragraph under a heading */
.studio .sec-head+.x-sub,.st-phrail>.x-sub,.st-phrail>.fine,.x-empty{margin:14px 0 0;font:italic 400 17px/1.35 var(--serif);color:var(--soft);max-width:32ch;text-wrap:pretty}
/* no glass anywhere (DESIGN-SYSTEM §1.2): the last blurred controls become solid level-2 surfaces */
.gl-badge,.xp-search,.pm-view,.glass-box,.cx .hc-cap{-webkit-backdrop-filter:none;backdrop-filter:none}
.gl-badge,.pm-view,.glass-box,.cx .hc-cap{background:var(--surface-2)}
.xp-search{background:var(--surface-2);border:1px solid rgba(236,232,223,.14);box-shadow:0 8px 24px rgba(0,0,0,.5)}
/* the old caps "SCREEN NOT CHECKED" pill (booth.css) reads as a quiet note, no outline box */
.scr-chip{border:0;padding:8px 0;background:none}

/* ================================================================ 2. motion and touch */
/* screens rise in on the signature curve; sheets slide on it; the scrim fades on the same beat */
.screen{animation:enter var(--grow) var(--ease-grow) both}
.home,.meet,.has-tabs{animation-name:fade}
@keyframes enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sheet{animation:sheetIn var(--grow) var(--ease-grow) both}
.scrim{animation:fade var(--dur-2) ease-out both}
/* one pressed state for every tappable card, tile and row: a small dip, never a bounce */
.st-tile,.sg-card,.gs-tile,.play-row,.play-tile,.tday,.st-pal,.wd-tile,.wd-card,.gl-pin,.pin,.lk-row,.pm-row,.psg-row,.film-row,.cp-near,.qrow,.sheet .item,.lt-card,.pick-row{
  transition:transform var(--dur-0) ease-out,opacity var(--dur-0) ease-out,background var(--dur-1)}
.st-tile:active,.sg-card:active,.gs-tile:active,.play-tile:active,.tday:active,.st-pal:active,.wd-tile:active,.wd-card:active,.gl-pin:active,.pin:active,.cp-near:active,.lt-card:active{transform:scale(.97)}
.play-row:active,.lk-row:active,.pm-row:active,.psg-row:active,.film-row:active,.qrow:active,.sheet .item:active,.pick-row:active{opacity:.6}
[data-swatch]:active{filter:brightness(.92)}
.btn{transition:transform var(--dur-0) ease-out,opacity var(--dur-0) ease-out}
.btn:active{transform:scale(.97);opacity:1}
.iconq:active,.glass:active{transform:scale(.92)}
.iconq,.glass{transition:transform var(--dur-0) ease-out,background var(--dur-1)}

/* the lesson-complete moment: the plates settle in one after another, the line and the rows follow, once.
   Learn it's done (.lt-done-pal), a unit's done (.result .chips) and anything marked [data-done-moment]. */
.lt-done-pal i,.result .chips .chip,[data-done-moment]>*{animation:doneIn var(--dur-4) var(--ease-grow) both;animation-delay:calc(var(--k,0) * 70ms + 80ms)}
.lt-done-pal i:nth-child(1){--k:0}.lt-done-pal i:nth-child(2){--k:1}.lt-done-pal i:nth-child(3){--k:2}.lt-done-pal i:nth-child(4){--k:3}.lt-done-pal i:nth-child(5){--k:4}.lt-done-pal i:nth-child(6){--k:5}.lt-done-pal i:nth-child(n+7){--k:6}
@keyframes doneIn{from{opacity:0;transform:translateY(28px) scaleY(.6);transform-origin:50% 100%}to{opacity:1;transform:none}}
.learnit .lt-t1,.result h1{animation:enter var(--dur-4) var(--ease-grow) .42s both}
.learnit .lt-rows,.learnit .lt-done-note{animation:fade var(--dur-4) ease-out .62s both}

/* fly to the map (js/polish.js flyToMap): the chips in flight, and the soft ring that lights each bubble */
.map-flyer{position:fixed;z-index:60;display:block;pointer-events:none;border-radius:var(--r-1);box-shadow:0 10px 26px rgba(0,0,0,.5);will-change:transform}
.map-light{position:fixed;z-index:59;display:block;pointer-events:none;border-radius:50%;box-shadow:0 0 0 2px var(--paper);animation:mapLight .9s var(--ease-grow) forwards}
@keyframes mapLight{0%{opacity:0;transform:scale(.7)}25%{opacity:1}100%{opacity:0;transform:scale(1.6)}}

@media (prefers-reduced-motion:reduce){
  .screen,.sheet,.scrim{animation:fade var(--dur-1) linear both}
  .lt-done-pal i,.result .chips .chip,[data-done-moment]>*,.learnit .lt-t1,.result h1,.learnit .lt-rows,.learnit .lt-done-note{animation:fade var(--dur-1) linear both}
  .st-tile:active,.sg-card:active,.gs-tile:active,.btn:active,.corner:active{transform:none}
}

/* ================================================================ 3. shared components */
/* The squint key: one value-only toggle on every image and palette, bottom-right on its image.
   Solid level-2 (never glass); paper when on. With it on, the page is in value only. */
.sq-key{position:absolute;right:10px;bottom:10px;z-index:2;border:1px solid rgba(236,232,223,.14);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.sq-key.on{background:var(--paper);color:var(--paper-ink);border-color:transparent}
.sq-css{filter:grayscale(1)}
html.squint .c-hero,html.squint .xp-flat{filter:grayscale(1)}

/* ================================================================ 4. overrides (generated by the label/radius sweep) */
.gs-best{font:italic 400 17px/1.3 var(--serif);letter-spacing:0}
.sa{border-radius:var(--r-1)}
.sg-lv>span:last-child{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.sg-go span{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.gs-meta>span{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.mem-chip{border-radius:var(--r-1)}
.gy-field{border-radius:var(--r-1)}
.gy-tags{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.gy-sl span{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.af-field{border-radius:var(--r-1)}
.gr-lv span{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.gy-score span{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.gy-miss{border-radius:var(--r-1)}
.gy-miss-sw{border-radius:var(--r-1)}
.gy-miss-sw b{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.gs-meta em{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.ey-row span{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.ey-foot{font:italic 400 17px/1.4 var(--serif);letter-spacing:0;text-transform:none}
.gy-conf span{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.gy-conf button{border-radius:var(--r-1)}
.gy-skip{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.gy-news b{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.gy-fixwhat{font:italic 400 17px/1.4 var(--serif)!important;letter-spacing:0;text-transform:none}
.sq-img img{border-radius:var(--r-1)}
.sq-dot b{border-radius:var(--r-2)}
.gy-hold{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.eye-cap{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.pq-lab{border-radius:var(--r-1)}
.pq-grey span{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.pq-grey i{border-radius:var(--r-1)}
.pq-grey em{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
/* ↑ css/gym.css */
.mt-wait{font-size:15px;font-family:var(--serif);font-style:italic;letter-spacing:0;text-transform:none}
.mt-ar{border-radius:var(--r-1)}
.mt-ar figcaption{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;border-radius:var(--r-1)}
.mt-lab{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;border-radius:var(--r-1)}
.mt-sl-top{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.mt-sl input::-webkit-slider-runnable-track{border-radius:var(--r-1)}
.mt-wh-name{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.mt-chips button{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;border-radius:var(--r-1)}
.mt-curves canvas{border-radius:var(--r-1)}
.mt-score span{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.mt-scale,.mt-scale-wrap{border-radius:var(--r-1)}
.mt-steps i em{border-radius:var(--r-1)}
.mt-chips3{border-radius:var(--r-1)}
.mt-chips3 span{border-radius:var(--r-1)}
.mt-chips3 em{border-radius:var(--r-1)}
.mt-ring span{border-radius:var(--r-1)}
.mt-mrow [data-j]{border-radius:var(--r-1)}
.mt-mrow [data-j] span{border-radius:var(--r-1)}
.mt-squint{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;border-radius:var(--r-1)}
.mt-zorn{border-radius:var(--r-1)}
.mt-sw i{border-radius:var(--r-1)}
.mt-sw span{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
/* ↑ css/match.css */
.gl-adj{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.gl-sum{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.gl-im{border-radius:var(--r-1)}
.gl-pin small{font:italic 400 13px/14px var(--serif);letter-spacing:0;text-transform:none}
.gl-badge{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;border-radius:var(--r-1)}
.gl-sh-top span{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.gl-reset{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.gl-lab{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.gl-sw button{border-radius:var(--r-1)}
.gl-chips button{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;border-radius:var(--r-1)}
.gl-range{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.gl-tr{border-radius:var(--r-1)}
.gl-hero>span{border-radius:var(--r-1)}
.gl-in h3{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.gl-full{font:italic 400 17px/1.4 var(--serif);letter-spacing:0;text-transform:none}
/* ↑ css/gallery.css */
.cx-card{border-radius:var(--r-1)}
.cx-open{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.cx-title{border-radius:var(--r-3)}
.cx-title small{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.cx .hc-cap{border-radius:var(--r-pill)}
.cx-btns button{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;border-radius:var(--r-2)}
.cx-pill{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none;border-radius:var(--r-pill)}
.cx-link{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.cx-sec b{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.cx-ns{border-radius:var(--r-pill)}
.cx-chip{border-radius:var(--r-2)}
.cx-hue p b{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.cx-f>span b{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.hc-cap small{font:italic 400 17px/1.3 var(--serif);letter-spacing:0;text-transform:none}
.cb-ring-mid span{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
.cb-track{border-radius:var(--r-1)}
.hc-sw{border-radius:var(--r-1)}
.hc-hex small{font:italic 400 17px/1.2 var(--serif);letter-spacing:0;text-transform:none}
/* ↑ css/honey.css */