/* Skill pages: /skills (the page, reviews, the add-to-my-AI flow, the phone bar).
   Loaded after site.css, in the head, only on its own routes (Operations/AreaStyles.cs), so pages that
   don't use these rules never download them. Same tokens as site.css; no inline styles (CSP). Rules here were moved
   from site.css by page usage: a rule belongs here only when every page that uses it loads this file. */
/* skill page */
/* Two columns (the calm-site review, skill fix 2; #171): the top and the sections on the left, the get box on the right, staying on
   screen while you read, as a booking card does. Phones: the top, the box, then the sections. "More like this" runs under both. */
.skill-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-template-areas:"top box" "body box";column-gap:40px;align-items:start;padding-top:24px}
.skill-top{grid-area:top;min-width:0;display:grid;gap:12px}
.skill-layout>.get-box{grid-area:box;align-self:start}
.skill-body{grid-area:body;min-width:0}
@media (max-width:900px){
  .skill-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "box" "body";row-gap:20px}
}
/* The cream disclaimer at the top of the sections keeps its gap (layout batch 2 review M2). */
.skill-body>.disclaimer{margin-top:20px}
/* The name split at its colon (skill fix 6): the short name at most 2.6rem, so it takes one or two lines; the rest smaller under it.
   Phones (K-28): about 1.8rem at 375 px. */
.skill-title h1{font-size:var(--h1)}
.skill-sub{display:block;margin-top:6px;font-size:var(--fs-body);font-weight:600;line-height:1.3;color:var(--soft)}
/* One facts line (skill fix 6): who it's for, the AI apps, where it works and the language, a dot between each. */
.facts-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin:0;font-size:var(--fs-body);color:var(--soft);max-width:var(--measure)}
.facts-line>span+span::before{content:"\00B7";margin:0 8px}
.facts-line b{color:var(--ink);font-weight:600}
/* One trust line (skill fix 6; the audience audit, #173): our seal once, then plain words, never a row of filled badges. The badge
   classes stay on their links (tests and the cards read them); here they're words. */
.trust-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;margin:0;font-size:var(--fs-body);font-weight:600;color:var(--navy)}
.trust-line>*+*::before{content:"\00B7";margin:0 8px;color:var(--soft);font-weight:400}
.trust-checked{display:inline-flex;align-items:center;gap:6px;color:var(--navy);text-decoration:none}
.trust-checked svg{width:22px;height:22px;flex:none}
.trust-line .badge{display:inline;background:none;border:0;border-radius:0;padding:0;font-size:inherit;font-weight:inherit;color:var(--navy);align-self:auto}
.trust-line a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.trust-score{font-weight:500}
.trust-person{font-weight:500;color:var(--ink)}
/* "What it does" (skill fix 3): each thing it can do is a title and one sentence, with no box and one quiet icon tint; the products
   it works with are one line under them. */
.what-list .for-you-item{border:0;padding:0;background:none;grid-template-columns:36px minmax(0,1fr);gap:12px}
.what-list .for-you-ic{width:36px;height:36px;border-radius:12px;background:var(--mist)}
.what-list .for-you-ic svg{width:24px;height:24px}
.works-with-label{font-weight:600;color:var(--ink);align-self:center;margin-right:4px}
/* Save and Follow are quiet icon links here (skill fix 6): no border, so the get box's button is the one filled shape. */
.skill-top .save-btn{border-color:transparent;background:none;padding-inline:4px}
.skill-top .save-btn:hover{border-color:transparent;text-decoration:underline}
.skill-top .save-btn[aria-pressed="true"]{background:none;border-color:transparent;font-weight:600}
.get-box{border:2px solid var(--navy);border-radius:var(--r);padding:22px;display:grid;gap:14px;position:sticky;top:96px;background:var(--white)}
/* One press to a linked AI (G10, SIMP-21): the form fills the box as the plain button does, and in the phone bar takes its place. */
.get-send{display:grid}
.get-send-note{margin-top:-6px}
.phone-bar .get-send{flex:1 1 auto;max-width:320px;margin-left:auto}
.phone-bar .get-send>.btn{margin-left:0;max-width:none}
.get-box .big-price{font-family:var(--display);font-weight:700;font-size:var(--fs-num);color:var(--navy)}
.get-box ul{margin:0;padding-left:18px;font-size:var(--fs-body);color:var(--soft);display:grid;gap:4px}
/* "Show it to copy" under an app's choices (AUD-6). */
.paste-show{margin:8px 0 0}
/* "In Claude: link once, then add it by asking." under the fine print (#173: the "In your AI" pattern in one line). */
.get-how{margin:0;font-size:var(--fs-body);color:var(--ink)}
/* The box's fine print: a few short lines, no bullets (skill fix 2). */
.get-box .get-fine{padding-left:0;list-style:none}
/* "What you can download": a 44px target on touch (K-29). */
.get-choices summary{cursor:pointer;font-size:var(--fs-small);font-weight:600;color:var(--navy);min-height:44px;display:flex;align-items:center}
.get-choices ul{margin-top:8px}
.reviews{display:grid;gap:16px}
.review-who{display:flex;gap:10px;align-items:center;font-size:var(--fs-small)}
.histogram{display:grid;gap:6px;max-width:360px}
.histogram div{display:grid;grid-template-columns:44px 1fr 40px;gap:10px;align-items:center;font-size:var(--fs-small)}
.histogram .bar{height:8px;border-radius:4px;background:var(--mist);overflow:hidden}
.histogram .bar i{display:block;height:100%;background:var(--gold)}
.platforms{display:grid;gap:10px}
/* A download choice (#136, audit K-48): a short label, the line under it, and the whole row picks it (the label's hit area
   covers the row). */
.platform-option{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);column-gap:12px;row-gap:2px;align-items:start;border:2px solid var(--field);border-radius:var(--r-sm);padding:14px 16px}
.platform-option input{grid-row:1/span 2;accent-color:var(--navy);width:20px;height:20px;margin:2px 0 0}
.platform-option label{font-weight:600;color:var(--navy);cursor:pointer}
.platform-option label::after{content:"";position:absolute;inset:0;border-radius:inherit}
.platform-option small{grid-column:2;color:var(--soft);font-size:var(--fs-body);overflow-wrap:anywhere}
.proof-inline{padding:1px 9px}
.review-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.review-filters .input{width:auto;min-height:44px;padding:8px 12px}
@media (max-width:600px){
  .review-filters{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .review-filters .input{width:100%;min-width:0}
}
.histogram a{color:var(--navy)}
/* "More like this" (the calm-site review, skill fix 7): the jobs it does, how it stacks up and its collections as lines of links. */
.sd-lines{display:grid;gap:6px;font-size:var(--fs-small);max-width:var(--measure)}
.sd-line{margin:0;color:var(--soft)}
.sd-line b{color:var(--ink);font-weight:600}
.sd-family{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}   /* one press adds it to the family list (3.29c) */
@media (max-width:640px){.sd-family .link-btn,.sd-family a{min-height:44px;display:inline-flex;align-items:center}}
.skill-discovery{padding-top:0}
/* Phones: the skill page's price and main button live in the phone bar, so the box above drops only those (no doubled button):
   the main button, and the maker's "Open it in Studio". Everything else stays in the box: "Add to another app" for someone who
   has it, and the "Tell me when it's on sale" form with its consent words, which the bar only links to (the G5 review, M4). */
@media (max-width:900px){
  .get-box{position:static;border-color:var(--line)}
  .get-box .big-price,.get-box>.btn-go,.get-box .maker-box>.btn-go,.get-box>.get-send,.get-box>.get-send-note{display:none}
}
@media (pointer:coarse){
  .histogram{gap:0}
  .histogram div{min-height:44px}
  .histogram a{display:flex;align-items:center;min-height:44px}
}

/* ========== Anti-sharing (requirement #62): /skills/{slug}/get, connector-first "Add to my AI" for paid skills, the
   licence line, and "Need an offline copy instead?". The seal is in site.css. ========== */
.licence-line{display:flex;align-items:center;gap:10px;font-size:var(--fs-body)}
/* The seal stays beside the sentence on phones; the licence number and "Check it" never break in the middle. */
.licence-line>span:last-child{min-width:0}
.licence-line .mono,.licence-line .link{white-space:nowrap}
/* "Proof you bought it": the licence number, folded and in the body font (#136, audit K-51). */
.licence-proof>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--navy)}
.licence-proof .licence-line{margin-top:6px}
.connect-first{display:flex;gap:18px;align-items:flex-start;border-color:var(--navy);background:var(--ice)}
.connect-first-icon{flex:none;display:inline-grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--white)}
.connect-first-icon svg{width:36px;height:36px}
.connect-first-body{flex:1;min-width:0}
@media (max-width:520px){.connect-first{flex-direction:column;gap:12px}.connect-first .btn{width:100%}}
.note-box{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 18px;background:var(--mist);font-size:var(--fs-body)}
.offline-copy{border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.offline-copy>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;min-height:56px;padding:12px 48px 12px 20px;position:relative;font-weight:600;color:var(--navy)}
.offline-copy>summary::-webkit-details-marker{display:none}
.offline-copy>summary small{font-weight:400;color:var(--soft);font-size:var(--fs-small)}
.offline-copy>summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;margin-top:-7px;border-right:2.5px solid var(--navy);border-bottom:2.5px solid var(--navy);transform:rotate(45deg)}
.offline-copy[open]>summary::after{margin-top:-2px;transform:rotate(-135deg)}
.offline-copy>.form{margin:0;padding:0 clamp(14px,3vw,20px) 20px}
/* Phones: the offline copy is already a box, so the app choices inside drop their own box and use the full width. */
@media (max-width:600px){.offline-copy .fieldset{border:0;border-radius:0;padding:0}}
/* ========== end anti-sharing ========== */

/* ========== App guide on /skills/{slug}/get (requirement #77): under the app's choices, its requirements, steps and a
   request to try. Browsers with :has() show only the picked app's guide; older ones show every app's, still readable. ========== */
.platform-group{display:grid;gap:10px}
.platform-option:has(input:checked){border-color:var(--navy);background:var(--ice)}
.app-guide{border-left:4px solid var(--marigold);border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--white);padding:4px 4px 4px 18px;margin:2px 0 8px 10px;display:grid;gap:10px;font-size:var(--fs-body)}
.app-guide-title{font-size:var(--fs-body)}
.app-need{margin:0;color:var(--ink)}
.app-steps{margin:0;padding-left:1.4em;display:grid;gap:8px}
.app-steps li{padding-left:2px}
.app-check{border-radius:var(--r-sm);background:var(--cream);padding:12px 16px;display:grid;gap:6px}
.app-check p{margin:0}
.app-check-prompt{font-weight:600;color:var(--navy);overflow-wrap:anywhere}
.app-guide-more{margin:0}
@supports selector(:has(a)){
  .app-guide{display:none}
  .platform-group:has(input:checked) .app-guide{display:grid}
}
@media (max-width:600px){.app-guide{margin-left:0;padding-left:14px}}
/* "For technical users" (#136, audit K-42): terminal and code-editor apps, and plugins, folded under the everyday apps. */
.tech-choices{margin-top:14px;border-top:1px solid var(--line);padding-top:6px}
.tech-choices>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--navy)}
.tech-choices .platforms{margin-top:10px}
/* ========== end app guide ========== */

/* ========== Update note on /skills/{slug} (requirement #77): what's new in the current version, for downloaded copies
   (a guest's copy hears about updates nowhere else). Inside the get box, so it reads well on phones too. ========== */
.update-note{border-left:4px solid var(--marigold);background:var(--cream);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:10px 14px;display:grid;gap:6px;font-size:var(--fs-body);line-height:1.5;text-align:left}
.update-note p{margin:0}
/* ========== end update note ========== */

/* ========== Skill lifecycle (requirement #78, migration 0040). Where it works is in the skill page's facts line (above); the
   card line and the filters are in site.css (same marker). ========== */
/* "Try asking": each request in its own box; one tap selects the words (no script needed), Copy appears with js/site.js. */
.try-list{list-style:none;margin:0;padding:0;display:grid;gap:12px;max-width:760px}
.try-item{display:flex;gap:14px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;background:var(--white)}
.try-body{min-width:0;display:grid;gap:4px}
.try-text{margin:0;font-weight:500;color:var(--navy);overflow-wrap:anywhere;user-select:all;-webkit-user-select:all;cursor:text}
.try-text::before{content:"\201C"}
.try-text::after{content:"\201D"}
.try-note{margin:0;font-size:var(--fs-small);color:var(--soft)}
.try-copy{flex:none;min-height:44px;min-width:88px}
.try-copy[hidden]{display:none}
@media (max-width:600px){
  .try-item{flex-direction:column;align-items:stretch}
  .try-copy{width:100%}
}
/* For people who have the skill: a small box under the add button (feedback, settings, "is it working?"). */
.owner-box{border-top:1px solid var(--line);padding-top:12px;display:grid;gap:6px}
.owner-title{display:flex;gap:8px;align-items:center;margin:0;color:var(--navy)}
.owner-title svg{width:22px;height:22px;flex:none}
.get-box .owner-links{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:var(--fs-small);color:var(--navy)}
.owner-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--navy);font-weight:500}
/* Send feedback and Report this skill (/skills/{slug}/feedback, /report): one narrow column, big radio rows. */
.lifecycle-page{max-width:760px}
.lifecycle-page .notice p{margin:0}
.radio-list{display:grid;gap:4px}
.radio-list .check{align-items:center;min-height:44px;padding:4px 0;cursor:pointer}
.radio-list .check input{margin-top:0}
.lifecycle-form textarea{font-size:var(--fs-body);min-height:140px}
@media (max-width:600px){
  .lifecycle-page .actions .btn{width:100%}
}
/* The skill's own two (calm batch G, #190): the form as one white card, the choices as tiles, the chosen one marked. */
.sk-form-page .lead{color:var(--soft)}
.sk-form-page .notice{border-radius:20px}
.sk-form-page .lifecycle-form{padding:32px;border-radius:var(--r-lg);background:var(--white);box-shadow:0 0 0 1px var(--line),0 24px 48px -32px rgba(13,44,84,.3)}
.sk-form-page .radio-list{gap:8px}
.sk-form-page .radio-list .check{min-height:56px;padding:12px 16px;border:1px solid var(--line);border-radius:16px}
.sk-form-page .radio-list .check:has(input:checked){border-color:var(--navy);background:var(--mist)}
@media (max-width:600px){
  .sk-form-page .lifecycle-form{padding:20px 16px;border-radius:22px}
}
/* ========== end skill lifecycle ========== */
/* ========== Doing more in an AI app (requirement #98): connected apps and browser helpers on "Add to my AI" ========== */
.app-beyond{border-radius:var(--r-sm);border:1px solid var(--line);background:var(--white);padding:12px 16px;display:grid;gap:10px}
.app-beyond p{margin:0}
.app-beyond-title{color:var(--navy)}
.app-part{display:grid;gap:4px}
.app-part+.app-part{border-top:1px solid var(--line);padding-top:10px}
.app-part-head{display:flex;gap:8px;align-items:center;color:var(--navy)}
.app-part-ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--mist);flex:none}
.app-part-ic svg{width:22px;height:22px}
.app-part.reach-yes .app-part-ic,.app-part.reach-paidplans .app-part-ic{background:var(--mint)}
.app-part.reach-usonly .app-part-ic,.app-part.reach-admin .app-part-ic,.app-part.reach-technical .app-part-ic{background:var(--cream)}
.app-part-note{font-size:var(--fs-body);color:var(--soft)}
.app-part-steps{background:var(--mist);border-radius:12px;padding:8px 12px}
.app-still{font-size:var(--fs-body);border-left:4px solid var(--marigold);padding-left:10px}
.app-choice{font-size:var(--fs-body);font-weight:400;color:var(--navy)}
.app-beyond-fold summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--navy)}
.app-beyond-fold[open] summary{margin-bottom:6px}
/* ========== end doing more ========== */
/* A paid Original before sales are switched on (#97): the price shows, the button says it can't be bought yet. */
.btn.btn-off{background:var(--mist);color:var(--soft);border-color:var(--line);cursor:default;box-shadow:none}
.btn.btn-off:hover{transform:none}
.not-on-sale{margin:0;font-size:var(--fs-body);background:var(--cream);border-radius:12px;padding:8px 12px}

/* ========== The skill page as a community hub (G5, #148) and UX batch 5: the shared header, the tabs, the get box's states,
   the demo answers, folds. Same tokens as site.css; nothing new in colour or type. ========== */
.hub-head{display:grid;gap:12px}
.hub-head .answer-first{margin-top:2px}
.hub-name{margin:0;font-family:var(--display);font-weight:700;font-size:var(--h2);line-height:1.2}
.hub-name a{color:var(--navy);text-decoration:none}
.hub-name a:hover{text-decoration:underline;text-decoration-color:var(--gold)}
.hub-promise{margin:0;color:var(--soft);max-width:var(--measure)}
/* "Works in" chips under the promise (K-08). */
.hub-apps{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0;font-size:var(--fs-small);color:var(--soft)}
.hub-apps-label{font-weight:600;color:var(--ink)}
.app-chip{display:inline-flex;align-items:center;border-radius:999px;padding:3px 12px;background:var(--ice);color:var(--navy);font-weight:500}
.hub-not{color:var(--soft)}
/* Stars, recommend, follow, save: the save pill's look for each, so the row reads as one set. */
.hub-social{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.hub-stars{display:inline-flex;align-items:center;gap:6px;min-height:36px;color:var(--ink);text-decoration:none;font-size:var(--fs-small)}
.hub-stars .star{color:var(--gold)}
.hub-stars span:last-child{color:var(--soft)}
.hub-count{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-small);color:var(--soft)}
.hub-count .save-ic svg{width:22px;height:22px}
.hub-n{color:var(--soft);font-weight:400}
.hub-primary{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.hub-price{font-family:var(--display);font-weight:700;font-size:var(--h3);color:var(--navy)}
/* The tabs stay in view under the site header while you scroll (plan 3e item 2, CSS only). */
.skill-tabs{position:sticky;top:72px;z-index:20;background:var(--white);margin-top:8px}
.skill-tabs .count{margin-left:6px;background:var(--mist)}
.skill-tabs a[aria-current="page"] .count{background:var(--marigold)}
@media (max-width:1200px){.skill-tabs{top:64px}}
/* Phones scroll past the tabs: with the header and the phone bar, sticky tabs took a quarter of the screen (the calm-site review, #171). */
@media (max-width:900px){.skill-tabs{position:static}}
.narrow-col{max-width:820px}
.community-layout.one-col{grid-template-columns:minmax(0,1fr)}
/* The get box's states (K-04 to K-07): a status and a real button; the maker's tools; one "Something wrong?". */
.get-box>.btn+.btn{margin-top:-4px}
.maker-box{display:grid;gap:8px}
.maker-box .owner-title svg{width:22px;height:22px}
.get-box .maker-box .owner-links{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:var(--fs-small)}
.sale-alert{display:grid;gap:6px;margin:0}
.sale-alert .hint{margin:0}
.sale-alert-on{display:flex;align-items:center;gap:8px;margin:0;font-size:var(--fs-body);color:var(--ink)}
.sale-alert-on svg{width:22px;height:22px;flex:none}
/* "Ask your company" for a workspace member (G9, W-07): what's true, and the way to ask. */
.ask-company{display:grid;gap:8px;justify-items:start;margin:4px 0 0;padding:12px 14px;border-radius:var(--r-sm);background:var(--ice)}
.ask-company p{margin:0;font-size:var(--fs-body);color:var(--ink)}
/* Each fold's sign is the one chevron, .disclose (site.css; layout review L17). */
.wrong-box>summary,.fold>summary,.bubble-more>summary{min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--navy)}
.wrong-box .owner-links{margin-top:2px}
/* Demo answers read as they would in the app (K-03): Markdown, not raw marks; about 12 lines, then "Show the whole answer". */
.bubble.md{white-space:normal}
.bubble.md>*{margin:0}
.bubble.md>*+*{margin-top:10px}
.bubble.md ul,.bubble.md ol{padding-left:20px;display:grid;gap:4px}
.bubble.md table{border-collapse:collapse;font-size:var(--fs-body);width:100%}
.bubble.md th,.bubble.md td{border-bottom:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}
.bubble-more{margin-top:8px}
/* The demo's question, once above both answers (layout review G5-41): a light bubble with a navy edge, so the main button is the
   one filled navy shape (the calm-site review, 4.6). */
.demo-ask{display:flex;flex-direction:column;gap:6px;max-width:var(--measure)}
.demo-ask .bubble.me{align-self:flex-start;max-width:100%;background:var(--white);color:var(--ink);border:1px solid var(--navy)}
/* The use numbers as one line in "What people say" (the calm-site review, section F): a dot between each. */
.use-line{display:flex;flex-wrap:wrap;gap:4px 0;margin-bottom:0;font-size:var(--fs-body);color:var(--ink);max-width:var(--measure)}
.use-line>span+span::before{content:"\00B7";margin:0 8px;color:var(--soft)}
.use-line b{color:var(--navy);font-weight:600}
/* The measured line at the top of "See the difference" (the audience audit, 3.1 a). */
.demo-measured{margin-bottom:0;font-weight:600;color:var(--navy);max-width:var(--measure)}
.bubble-more[open]>summary{margin-bottom:6px}
/* The inline ask box (plan 3e item 4). */
.ask-box{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin-top:16px;background:var(--white)}
.ask-box .form{margin:0}
.ask-line{margin:0 0 10px}
/* Phones (K-28): the short crumb is site-wide (site.css, UX audit G-19); the title minimum is 1.8rem (.skill-title h1, top). */
/* ========== end community hub ========== */

/* The skill page's length budget (layout pattern T; the G5 review's M5 and the lead's decision on 18 Oct 2026): smaller section
   headings and tighter sections on every screen, and on phones the storyboard becomes one sideways row with a line saying so. With
   the phone folds (site.css .phone-fold) this is what keeps a real Original's page near its phone budget (SkillPagePhoneTests). */
.skill-page h2{font-size:var(--h2)}
.skill-page .section-tight{padding-block:clamp(22px,3.5vw,44px)}
@media (max-width:600px){
  .skill-page .sb-board{position:relative;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(15rem,78%);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding-bottom:8px}
  .skill-page .sb-card{scroll-snap-align:start}
  .skill-page .sb-swipe{display:block;margin:0 0 8px;font-size:var(--fs-small);color:var(--soft)}
}

/* ===== Calm batch G (#176 "show, don't tell"): the skill page as the mockups v2 draw it (Eddie approved, 20 Oct;
   C:\TrillyOps\plans\calm-show-mockups-v2\site\skill.html). The first screen sells; then one idea a section. Pictures are
   css/pictures.css. Sizes are the six tokens; weights are v2's (below); motion is transform and opacity only, and stops with
   reduced motion. The page's old two-column rules above stay for the tabs, which still use the shared header. Every row that
   swipes is position:relative, so a hidden label inside it can't widen the page (the calm-g-skill review, H1). */
.sk-page{padding-bottom:0}
/* v2's type (the mockups v2; the design review, P1 7; BRAND.md rule 6, batch G): Gabarito 700 for the name, 600 for the headings and
   their second lines, -.02em; 800 at most for a number; 900 only on the one display number. Calmer than the 900/800 of before. */
.sk-page h1{font-weight:700;letter-spacing:-.02em}
.sk-page h2,.sk-page h3{font-weight:600;letter-spacing:-.02em}
.sk-page .sk-tt{font-family:var(--display);font-weight:600}
.sk-page .sk-price b,.sk-page .sk-pm b,.sk-page .sk-going-test b,.sk-page .replay-total b,.sk-page .map-apps-title,.sk-page .map-tile-app,.sk-page .map-tile-app b{font-family:var(--display);font-weight:700}
.sk-top{padding-top:24px}
.sk-top-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;align-items:center}
.sk-top-copy{display:grid;justify-items:start;gap:16px;min-width:0}
.sk-crumbs{display:flex}
.sk-crumb{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:var(--fs-body);color:var(--soft);text-decoration:none}
.sk-crumb:hover{color:var(--navy);text-decoration:underline}
.sk-crumb .ui-ico{width:16px;height:16px}
.sk-name{font-size:var(--h1-hero)}
.sk-sub{display:block;margin-top:8px;font-family:var(--body);font-size:var(--h3);font-weight:500;letter-spacing:0;line-height:1.3;color:var(--soft)}
.sk-by{color:var(--soft)}
.sk-by a,.sk-by b{color:var(--navy);font-weight:500}
.sk-by.sk-by-original{display:flex;align-items:center;gap:8px}
.sk-by-original svg{width:22px;height:22px;flex:none}
.sk-by-original .badge{background:none;border:0;padding:0;font-size:inherit;font-weight:500;color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sk-promise{font-size:var(--h3);line-height:1.45;color:var(--soft);max-width:30em}
.sk-promise-phone{display:none}
.sk-buy{display:grid;justify-items:start;gap:14px;margin-top:16px;width:100%}
.sk-price{color:var(--soft)}
.sk-price b{font-family:var(--display);font-weight:700;font-size:var(--fs-num);color:var(--navy);letter-spacing:-.02em;margin-right:4px}
.sk-reassure,.sk-terms{color:var(--soft)}
.sk-buy .ask-company,.sk-buy .owner-box,.sk-buy .update-note,.sk-buy .maker-box{width:100%;max-width:30rem}
.sk-pic{display:grid;align-items:center;min-height:360px}
.sk-pic-ic{justify-self:center;display:grid;place-items:center;width:160px;height:160px;border-radius:44px;background:var(--white)}
.sk-pic-ic svg{width:96px;height:96px}
/* The facts: one row of words with icons, never a row of filled badges (the badge classes stay for tests and cards) */
.sk-facts{position:relative;list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;margin:48px 0 0;padding:24px 0 0;border-top:1px solid var(--line);color:var(--navy);font-size:var(--fs-small)}
.sk-facts:focus-visible{outline:var(--ring-line);outline-offset:4px;box-shadow:var(--ring)}
.sk-facts li{display:flex;align-items:center;gap:8px;min-width:0}
.sk-facts li > svg{width:20px;height:20px;flex:none}
.sk-facts a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.sk-facts .trust-checked{gap:8px}
.sk-facts .trust-checked svg{width:20px;height:20px}
.sk-facts .app-chip{display:inline;background:none;border:0;border-radius:0;padding:0;font-size:inherit;font-weight:500;color:var(--navy)}
.sk-facts .app-chip + .app-chip::before{content:", "}
.sk-facts .badge{display:inline;background:none;border:0;border-radius:0;padding:0;font-size:inherit;font-weight:500;color:var(--navy)}
.sk-facts b{font-weight:600}
.sk-also{margin-top:12px}
/* The tabs, with Save and Follow at their end */
.sk-tabbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:24px;border-bottom:1px solid var(--line)}
.sk-tabbar .skill-tabs{position:relative;top:auto;flex:1 1 auto;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;border-bottom:0;margin-bottom:0}
.sk-tabbar .skill-tabs a{white-space:nowrap;min-height:52px;display:inline-flex;align-items:center;gap:6px}
.sk-tabbar .hub-social{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0}
.sk-tabbar .save-btn{border-color:transparent;background:none;font-size:var(--fs-body)}
.sk-tabbar .save-btn:hover{border-color:transparent;text-decoration:underline}
.sk-tabbar .save-btn[aria-pressed="true"]{background:none;border-color:transparent;font-weight:600}
.sk-disclaimer{margin-top:20px}
.sk-update{margin-top:20px;max-width:var(--measure)}
/* Sections: one idea each */
.sk-sec{padding-block:clamp(72px,9vw,128px) 0}
.sk-sec h2,.sk-closing h2{font-size:var(--h2);line-height:1.06}
.sk-tt{display:block;color:var(--soft)}
.sk-sec-h,.sk-related h2{margin-bottom:40px;max-width:46rem}
.sk-narrow{max-width:calc(var(--measure) + 64px)}
.sk-fold-h{margin-top:16px;font-size:var(--h3)}
/* "Same question, two answers" */
.sk-diff{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:64px;align-items:start}
.sk-diff-copy{display:grid;gap:24px;position:sticky;top:100px;min-width:0}
.sk-diff-pics{min-width:0}
.sk-replay{margin-top:24px}
/* The replay's phone fold (K-09): open with no summary on wider screens (site.css .phone-fold), so no fold line there either. */
@media (min-width:901px){@supports selector(::details-content){.sk-replay-fold{border-top:0}}}
.sk-night .sk-replay{margin-top:8px}
.sk-score{display:grid;gap:8px}
.sk-score .demo-measured{color:var(--soft)}
.sk-score .display-number{white-space:normal}
.sk-fold.sk-price-fold{border-bottom:1px solid var(--line)}
.sk-whole-h{font-weight:600;margin-top:8px}
.sk-whole{background:var(--mist);border-radius:var(--r-sm);padding:14px 16px;overflow-wrap:anywhere}
.proof-in-fold{padding:0}
/* How it's going: the one navy band */
.sk-night{background:var(--navy);color:var(--white);border-radius:40px;padding:64px;display:grid;gap:24px}
.sk-night h2,.sk-night h3{color:var(--white)}
.sk-going-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;margin-bottom:16px}
.sk-go{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:var(--white);text-decoration:none;min-height:44px}
.sk-go span{text-decoration:underline;text-underline-offset:4px}
.sk-go .ui-ico{width:18px;height:18px}
.sk-perf,.sk-later-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sk-pm{display:grid;gap:6px;align-content:start;background:color-mix(in oklab,var(--white) 7%,var(--navy));border-radius:var(--r-sm);padding:18px}
.sk-pm b{font-family:var(--display);font-weight:700;font-size:var(--fs-num);line-height:1;letter-spacing:-.02em;color:var(--marigold);font-variant-numeric:tabular-nums}
.sk-pm span{color:var(--on-navy-soft);line-height:1.35}
.sk-pm.sk-pm-light{background:var(--mist)}
.sk-pm.sk-pm-light b{color:var(--navy)}
.sk-pm.sk-pm-light span{color:var(--soft)}
.sk-range{position:relative;display:block;height:8px;border-radius:4px;background:var(--line)}
.sk-range i{position:absolute;left:83%;right:11%;top:0;bottom:0;border-radius:4px;background:var(--marigold)}
.sk-pm .sk-sure{color:var(--navy)}
/* #201: a result from 20 people leads the band (two across), and says how many people it's from. */
.sk-perf.sk-perf-lead{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:20px}
.sk-pm .sk-from{font-size:var(--fs-small)}
.sk-going-note{color:var(--on-navy-soft)}
.sk-going-note a,.sk-going-note b{color:var(--white)}
.sk-going-note-phone{display:none}
.sk-going-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:24px}
.sk-now,.sk-later{background:var(--white);color:var(--navy);border-radius:var(--r-lg);padding:28px;gap:14px}
.sk-now{display:flex;flex-direction:column;align-items:flex-start}
.sk-now h3{color:var(--navy)}
.sk-now p{color:var(--soft)}
.sk-now .art-empty{width:150px;margin:4px 0}
.sk-later{display:grid;align-content:start}
.sk-later-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.sk-later-top b{font-weight:500}
.sk-fold.sk-fold-night{border-top-color:color-mix(in oklab,var(--white) 16%,var(--navy))}
.sk-fold.sk-fold-night > summary{color:var(--white)}
.sk-fold.sk-fold-night .sk-fold-body{color:var(--on-navy-soft)}
.sk-going-test{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;border-radius:22px;overflow:hidden}
.sk-going-test li{background:color-mix(in oklab,var(--white) 7%,var(--navy));padding:20px 22px;display:grid;gap:8px}
.sk-going-test b{font-family:var(--display);font-weight:700;font-size:var(--fs-num);line-height:1;color:var(--marigold)}
.sk-going-test span{color:var(--on-navy-soft)}
/* Trilly's own test, after the band: a test isn't real use (the code review, L6) */
.sk-tested{display:grid;gap:16px;margin-top:24px}
.sk-tested:not(:has(*)){display:none}
.sk-tested .sk-going-test li{background:var(--mist)}
.sk-tested .sk-going-test b{color:var(--navy)}
.sk-tested .sk-going-test span{color:var(--soft)}
.sk-tested-note{color:var(--soft);max-width:var(--measure)}
.sk-tested-note a,.sk-tested-note b{color:var(--navy)}
/* How it works: the approved map's scenes as a row that swipes */
.sk-map-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
.sk-map-key{display:flex;align-items:center;gap:8px;color:var(--soft)}
.sk-map-key svg{width:22px;height:22px;flex:none}
.sk-steps{position:relative;list-style:none;margin:0;padding:0 0 6px;display:grid;align-items:start;grid-auto-flow:column;grid-auto-columns:calc((100% - 72px) / 3.4);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.sk-steps::-webkit-scrollbar{display:none}
.sk-steps:focus-visible{outline:var(--ring-line);outline-offset:4px;box-shadow:var(--ring)}
.sk-step{scroll-snap-align:start;display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px;border-radius:22px;background:var(--mist);min-width:0}
.sk-step.sk-step-you{background:var(--cream)}
.sk-step.sk-step-app,.sk-step.sk-step-chat{background:var(--mist)}
.sk-step.sk-step-copy{background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.sk-step.sk-step-other{background:var(--apricot)}
.sk-step-n{color:var(--soft)}
.sk-step-who{display:flex;align-items:center;gap:8px;font-weight:500}
.sk-step-who svg{width:24px;height:24px;flex:none}
.sk-step-t{font-size:var(--h3)}
.sk-step-d{color:var(--soft)}
.sk-step-stop{display:flex;gap:8px;align-items:flex-start;color:var(--bad);margin-top:auto;padding-top:6px}
.sk-step-stop svg{width:22px;height:22px;flex:none}
.sk-row-ctrl{display:flex;justify-content:flex-end;gap:10px;margin:12px 0 0}
.sk-icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--white);color:var(--navy);cursor:pointer}
.sk-icon-btn:hover{border-color:var(--navy)}
.sk-icon-btn .ui-ico{width:18px;height:18px}
.sk-icon-btn[disabled]{opacity:.35;cursor:default}
.sk-map-foot{margin-top:16px;color:var(--soft);max-width:var(--measure)}
.sk-map-fold{margin-top:24px;border-bottom:1px solid var(--line)}
.skill-map-full{padding-top:8px}
/* What it can reach: three tiles */
.sk-reach{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sk-rt{border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:14px;background:var(--mist);min-width:0}
.sk-rt.sk-rt-reads{background:var(--ice)}
.sk-rt.sk-rt-changes{background:var(--cream)}
.sk-rt.sk-rt-never{background:var(--mint)}
.sk-rt > svg{width:56px;height:56px}
.sk-rt ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.sk-rt li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;line-height:1.45}
.sk-rt li svg{width:28px;height:28px}
.sk-rt li b{display:block;font-weight:500;color:var(--navy);overflow-wrap:anywhere}
.sk-rt li span{color:var(--soft);font-size:var(--fs-small)}
.sk-strip{display:flex;gap:10px;align-items:flex-start;margin:24px 0 0;color:var(--navy);max-width:var(--measure)}
.sk-strip svg{width:28px;height:28px;flex:none}
.sk-strip a{color:var(--navy);font-weight:500}
#reach .sk-folds{margin-top:32px;max-width:var(--measure)}
/* The closing box */
.sk-closing{padding:clamp(72px,9vw,128px) 0 96px}
.sk-getbox{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:start;gap:24px 64px;background:var(--cream);border-radius:40px;padding:56px}
.sk-getbox > .sk-getbox-main{grid-column:1;grid-row:1 / span 4}
.sk-getbox > :not(.sk-getbox-main){grid-column:2}
.sk-related .swipe{position:relative}
.sk-getbox-main{display:grid;gap:8px}
.sk-getbox .sk-buy{margin-top:12px}
.sk-getbox .sk-fold{max-width:var(--measure);border-color:color-mix(in oklab,var(--cream),var(--navy) 12%)}
.sk-getbox .get-fine{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.sk-more{display:flex;flex-wrap:wrap;gap:12px 28px}
.sk-getbox .sd-lines{margin-top:0}
/* The bar that keeps the one action in reach once the first screen has gone (the mockups v2): along the top on a wide screen,
   only where the browser can tie it to scrolling; at the bottom on a phone (site.css's phone bar), sliding in after the first
   screen where it can, there from the start where it can't. */
.sk-bar-name,.sk-bar-note{display:none}
.phone-bar.sk-bar .btn{white-space:nowrap}
.sk-bar-rest{color:var(--soft)}
@media (min-width:901px){
  .phone-bar.sk-bar{display:flex;position:fixed;left:0;right:0;top:0;bottom:auto;z-index:35;align-items:center;gap:20px;padding:12px max(32px,calc((100vw - 1160px) / 2 + 32px));background:var(--white);border-bottom:1px solid var(--line);box-shadow:0 10px 24px -14px rgba(13,44,84,.18);visibility:hidden;opacity:0;transform:translateY(-100%)}
  .phone-bar.sk-bar .sk-bar-name{display:block;margin-right:auto;font-family:var(--display);font-weight:600;font-size:var(--h3);color:var(--navy)}
  .phone-bar.sk-bar .sk-bar-note{display:inline;font-family:var(--body);font-weight:400;font-size:var(--fs-body);color:var(--soft)}
  .phone-bar.sk-bar .btn,.phone-bar.sk-bar .get-send{flex:none;margin-left:0}
  /* They slide only while the script moves them (sk-bar-moving, 300 ms), so a window that crosses 900 px, or a full-page
     screenshot (which resizes the page), never catches the bar half-way over the menu. */
  html.sk-bar-on .phone-bar.sk-bar{visibility:visible;opacity:1;transform:none}
  html.sk-bar-on .nav{transform:translateY(-100%)}
  html.sk-bar-moving .phone-bar.sk-bar{transition:transform 250ms cubic-bezier(.2,.8,.2,1),opacity 250ms,visibility 0s linear 250ms}
  html.sk-bar-moving.sk-bar-on .phone-bar.sk-bar{transition:transform 250ms cubic-bezier(.2,.8,.2,1),opacity 250ms}
  html.sk-bar-moving .nav{transition:transform 250ms cubic-bezier(.2,.8,.2,1)}
  .nav:focus-within{z-index:40}
}
@keyframes sk-bar-down{from{visibility:hidden;opacity:0;transform:translateY(-100%)}to{visibility:visible;opacity:1;transform:none}}
@keyframes sk-bar-up{from{visibility:hidden;opacity:0;transform:translateY(100%)}to{visibility:visible;opacity:1;transform:none}}
@keyframes sk-bar-show{from{visibility:hidden;opacity:0}to{visibility:visible;opacity:1}}
@supports (animation-timeline:scroll()){
  @media (min-width:901px){
    html:not(.sk-bar-js) .phone-bar.sk-bar{animation:sk-bar-down linear both;animation-timeline:scroll(root);animation-range:620px 700px}
  }
  @media (max-width:900px){
    .phone-bar.sk-bar{animation:sk-bar-up linear both;animation-timeline:scroll(root);animation-range:560px 640px}
  }
  /* Reduced motion: the bar still waits for the first screen to go by, then shows, with no slide. */
  @media (min-width:901px) and (prefers-reduced-motion:reduce){
    html:not(.sk-bar-js) .phone-bar.sk-bar{animation:sk-bar-show linear both!important;animation-timeline:scroll(root)!important;animation-range:699px 700px!important}
  }
  @media (max-width:900px) and (prefers-reduced-motion:reduce){
    .phone-bar.sk-bar{animation:sk-bar-show linear both!important;animation-timeline:scroll(root)!important;animation-range:639px 640px!important}
  }
}
/* Quiet entrances: each section rises as it comes into view, in CSS only; at rest wherever that isn't supported */
@keyframes sk-rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sk-sec > .wrap,.sk-closing > .wrap{animation:sk-rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  }
}
@media (max-width:1080px){
  .sk-top-grid,.sk-diff{grid-template-columns:minmax(0,1fr);gap:40px}
  .sk-diff-copy{position:static}
  .sk-going-grid{grid-template-columns:minmax(0,1fr)}
  .sk-steps{grid-auto-columns:calc((100% - 24px) / 2.2)}
  .sk-reach{grid-template-columns:minmax(0,1fr)}
  .sk-getbox{grid-template-columns:minmax(0,1fr)}
  .sk-getbox > .sk-getbox-main,.sk-getbox > :not(.sk-getbox-main){grid-column:auto;grid-row:auto}
}
/* Phones: the name, the picture's first line, the price and the button on the first screen */
@media (max-width:760px){
  .sk-top{padding-top:8px}
  .sk-top-grid{display:flex;flex-direction:column;gap:24px;min-height:calc(100svh - 96px)}
  .sk-top-copy{display:contents}
  .sk-crumbs{order:0;align-self:flex-start}
  .sk-crumbs-row{order:0;align-self:stretch}   /* the crumb and Share (REMAINING 3.34, package 5) */
  .sk-name{order:1}
  .sk-by{order:2;align-self:flex-start}
  .sk-promise{display:none}
  .sk-promise-phone{display:block;margin-top:32px;font-size:var(--fs-body);line-height:1.5;color:var(--soft)}
  .sk-pic{order:3;min-height:0;flex:0 0 auto}
  .sk-buy{order:4;margin-top:auto}
  .sk-top .sk-price-note{display:none}
  .phone-bar.sk-bar .phone-bar-price{display:grid;line-height:1.2}
  .phone-bar.sk-bar .sk-bar-rest{font-size:var(--fs-small)}
  .sk-buy .btn,.sk-buy .get-send{width:100%}
  .sk-reassure{display:none}
  .sk-reassure.sk-terms{display:block}
  /* A form's title drops on a phone; a letter keeps its subject and its stamp, so it says "a letter of demand" at a glance (the design
     re-review r3, item 3). The tint is tighter, so the button stays on the first screen (item 4). */
  .sk-pic .pic-chip,.sk-pic .pic-made .pic-paper:not(.pic-paper-doc) > .pic-title{display:none}
  .sk-pic.pic-field{padding:20px 18px 22px}
  .sk-sub{font-size:var(--fs-body)}
  .sk-facts{margin-top:20px;padding-top:20px;flex-wrap:nowrap;gap:10px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;margin-inline:calc(-1 * clamp(16px,4vw,32px));padding-inline:clamp(16px,4vw,32px)}
  .sk-facts::-webkit-scrollbar{display:none}
  .sk-facts li{flex:none;white-space:nowrap;padding:8px 14px;border:1px solid var(--line);border-radius:999px}
  .sk-sec h2,.sk-closing h2{font-size:var(--h2)}
  .sk-diff{gap:28px}
  /* The switch and the cards it changes together on a phone (the design re-review r3, item 2): the headline, the switch, the cards,
     then the score, the folds and the replay. The cards hold nothing to focus, so the tab order still follows what's seen. */
  .sk-diff-copy,.sk-diff-pics{display:contents}
  .sk-diff #demo{order:1}
  .sk-diff .pic-flip{order:2}
  .sk-diff .pic-fc{order:3}
  .sk-diff .sk-score,.sk-diff [data-demo-label]{order:4}
  .sk-diff .sk-folds{order:5}
  /* The replay's fold joins the two folds above it, one list of three (K-09). */
  .sk-diff .sk-replay-fold{order:6;margin-top:-28px;border-top:0;border-bottom:1px solid var(--line)}
  /* No fold above it (no proof panel, no example fold): its own top rule and no pull-up (the review, L3). */
  .sk-diff:not(:has(.sk-folds > *)) .sk-replay-fold{margin-top:0;border-top:1px solid var(--line)}
  .sk-night{padding:36px 18px;border-radius:var(--r-lg)}
  .sk-going-head{grid-template-columns:minmax(0,1fr);gap:12px}
  .sk-now,.sk-later{padding:20px;border-radius:22px}
  /* No data yet: the sentence and the example say it on a phone; the empty-state drawing is left out (K-09). */
  .sk-now .art-empty{display:none}
  /* Where the use numbers come from, said in "How sure these numbers are" on a phone (K-09: 80 words a screen). */
  .sk-going-note-phone{display:block}
  .sk-going-note-wide{display:none}
  .sk-perf,.sk-going-test{grid-template-columns:minmax(0,1fr)}
  /* A result's tile has the phone's width too: its two-across rule above outranked the line before (the re-check 3's D1). */
  .sk-perf.sk-perf-lead{grid-template-columns:minmax(0,1fr)}
  /* The use numbers in tighter tiles: the room goes to the safety tiles' rows and their folds below, so no phone screen is a
     wall of words (CalmPageTests, the lead's ruling (a), 21 Oct). The numbers' size is --fs-num at every width. */
  .sk-perf{gap:8px}
  .sk-perf .sk-pm{padding:14px 18px;gap:4px}
  .sk-map-head{flex-direction:column;align-items:flex-start}
  .sk-map-checked,.sk-map-only-checked{display:none}
  /* The red tags say each stop in words ("Only you", "Your yes"), so the key that explains their colour goes to wider screens (K-09:
     a phone screen held to 80 words, CalmPageTests). */
  .sk-map-key{display:none}
  .sk-steps{grid-auto-columns:84%;gap:14px;margin-inline:calc(-1 * clamp(16px,4vw,32px));padding-inline:clamp(16px,4vw,32px);scroll-padding-inline:clamp(16px,4vw,32px)}
  .sk-row-ctrl{display:none}
  .sk-rt{padding:18px 18px 20px;border-radius:22px;gap:10px}
  .sk-rt > svg{width:40px;height:40px}
  /* The safety tiles in one sideways row, the next tile peeking in, as the steps above (K-09: stacked they took 1,211 px of a real
     Original's page). Only on the skill page: Add to my AI's keeps them stacked. */
  #reach .sk-reach{position:relative;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;margin-inline:calc(-1 * clamp(16px,4vw,32px));padding-inline:clamp(16px,4vw,32px);scroll-padding-inline:clamp(16px,4vw,32px)}
  #reach .sk-reach::-webkit-scrollbar{display:none}
  #reach .sk-rt{scroll-snap-align:start}
  #reach .sk-folds{margin-top:48px}
  .sk-reach{gap:14px}
  .sk-later-grid{grid-template-columns:minmax(0,1fr)}
  .sk-later-grid > :nth-child(n+2){display:none}
  .sk-pm .sk-sure{display:none}
  .sk-getbox{padding:32px 20px;border-radius:var(--r-lg)}
}
@media (forced-colors:active){
  .sk-night,.sk-getbox,.sk-rt,.sk-step,.sk-now,.sk-later{border:1px solid CanvasText}
}

/* ===== Calm batch G (#176, #190): the skill's tab pages (reviews, questions, results, changes) in the v2 look. One compact band
   for the skill (its icon, name and maker; its price and one action on the right), the overview's tab bar with Save and Follow at
   its end, then the page's own heading and list. The shared header keeps its classes (tests and /posts read them). */
.sk-tabpage .crumbs{margin-top:24px}
.sk-tabpage .hub-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:40px;row-gap:8px;align-items:center;padding:16px 0 4px}
.sk-tabpage .hub-head > :not(.hub-primary){grid-column:1}
.sk-tabpage .hub-head .skill-title{align-items:center;gap:16px}
.sk-tabpage .hub-head .skill-title .ic{width:56px;height:56px;border-radius:18px}
.sk-tabpage .hub-head .skill-title .ic svg{width:34px;height:34px}
/* The skill's name below the tab's own h1 in size, now and after the v2 scale moves --h2 (the design review, tabs item 1). */
.sk-tabpage .hub-head .hub-name{font-size:var(--h3);line-height:1.2}
.sk-tabpage .hub-head .hub-primary{grid-column:2;grid-row:1 / span 3;justify-self:end;gap:12px 16px}
.sk-tabpage .hub-head .hub-price{font-family:var(--display);font-weight:700;font-size:var(--fs-num)}
/* The tab's title is a step above its sections and the skill's name (--h3): the 30 to 32 px size of the scale (the design-b16-lows review, M2). */
.sk-tabpage .h-page{margin-top:40px;font-size:var(--fs-num);letter-spacing:-.02em}
.sk-sub-lead{margin-top:12px;color:var(--soft);max-width:var(--measure)}
.sk-tabpage .empty{margin-top:24px;background:var(--mist);border:0;border-radius:var(--r-lg);padding:20px 24px;text-align:left;color:var(--ink)}
/* One empty state for every tab (_TabEmpty; the design review, tabs item 2): v2's small drawn clipboard beside a title and a line. */
.sk-empty{display:grid;grid-template-columns:120px minmax(0,1fr);gap:24px;align-items:center}
.sk-empty-art{display:block;width:120px;height:auto}
.sk-empty-words p{margin:0}
.sk-empty-words p + p{margin-top:4px}
.sk-tabpage .sk-empty-t{font-family:var(--display);font-weight:700;font-size:var(--h3);line-height:1.25;color:var(--navy)}
.sk-tabpage .narrow-col{max-width:820px;padding-bottom:96px}
.sk-tabpage .community-layout{padding-bottom:96px}
@media (max-width:760px){
  .sk-tabpage .hub-head{grid-template-columns:minmax(0,1fr)}
  .sk-tabpage .hub-head .skill-title{flex-direction:row;gap:12px}
  .sk-tabpage .hub-head .skill-title .ic{width:44px;height:44px;border-radius:14px}
  .sk-tabpage .hub-head .skill-title .ic svg{width:28px;height:28px}
  /* The price and the button on one row, so the tab's own h1 comes up the screen (the design review, tabs item 1). */
  .sk-tabpage .hub-head .hub-primary{grid-column:1;grid-row:auto;justify-self:start;align-items:center;gap:10px 14px}
  .sk-tabpage .hub-head .hub-primary .btn{min-height:44px;padding:0 18px}
  .sk-tabpage .h-page{margin-top:24px;font-size:var(--h2);letter-spacing:-.025em}
  .sk-tabpage .empty{padding:16px 18px;border-radius:22px}
  .sk-empty{grid-template-columns:minmax(0,1fr);gap:12px}
  .sk-empty-art{width:96px}
  /* The tab's own content leads on a phone (the lead's 70/80 ruling): the promise and "Works in" are the overview's, and a tab's
     intro drops as a link guide's does (Changes keeps its one consent line). By the same ruling the stars, "I recommend this",
     Follow and Save stay on the overview's tab bar (the design sweep, group C: ten words of every tab's first screen; Reviews says
     the rating in its own summary). */
  .sk-tabpage .hub-head .hub-promise,.sk-tabpage .hub-head .hub-apps,.sk-tabpage .sk-sub-lead:not(.sk-sub-keep),.sk-tabpage .sk-tabbar .hub-social{display:none}
  /* "Have a question?" goes on a phone: the ask box's button says it (main, design-b16-lows). */
  .sk-tabpage .ask-q{display:none}
}
/* More tabs past the edge on a phone: the strip fades at its right edge until it's scrolled to the end (the design review, tabs
   item 5). Only where the browser ties it to the strip's own scroll; a strip that fits never fades. */
@keyframes sk-tabs-end{0%,95%{mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)}100%{mask-image:none}}
@supports (animation-timeline:scroll()){
  @media (max-width:760px){
    .skill-tabs{animation:sk-tabs-end linear both;animation-timeline:scroll(self inline)}
  }
}

/* ===== Calm batch G (#176, #190): the Get page (/skills/{slug}/get). The job and the skill beside Trilly's own scene; one clear card
   for the way in (white, a soft shadow, its icon on mist); the rest quieter: notes, "Your version", the safety list, the download fold. */
.gt-page{padding-bottom:96px}
.gt-page > :not(.gt-head):not(.crumbs):not(.gt-body),.gt-main{max-width:760px}
/* The side card: the skill, its price and the page's one action beside the way in, from 941 px (the design review, Add to my AI
   item 6); the bar does that job below it. */
.gt-side{display:none}
/* Motion on Add to my AI: the sections after the way in rise as the skill page's do (never the way in itself). */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .gt-main > :is(.your-version,.permissions,.offline-copy){animation:sk-rise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  }
}
.gt-side-card{display:grid;gap:12px;padding:24px;border-radius:var(--r-lg);background:var(--white);box-shadow:0 0 0 1px var(--line),0 24px 48px -32px rgba(13,44,84,.3)}
.gt-side-name{margin:0;font-family:var(--display);font-weight:600;font-size:var(--h3);line-height:1.25;color:var(--navy)}
.gt-side-price{margin:0;font-weight:600;color:var(--navy)}
.gt-side-card .btn{width:100%;white-space:normal;text-align:center;padding-inline:16px}
.gt-side-note{margin:0;font-size:var(--fs-small);color:var(--soft)}
@media (min-width:941px){
  .gt-body{display:grid;grid-template-columns:minmax(0,760px) minmax(0,1fr);gap:48px;align-items:start}
  .gt-side{display:block;position:sticky;top:96px;margin-top:24px}
  .gt-bar{display:none}
}
.gt-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:48px;align-items:center;margin-top:16px}
.gt-head-copy{min-width:0}
.gt-head h1{font-size:var(--h1-hero);letter-spacing:-.03em}
.gt-head .lead{margin-top:12px;font-size:var(--h3);color:var(--soft)}
.gt-head .lead b{color:var(--navy);font-weight:600}
/* The job beside the way in on a wide screen; under it on a phone, so the button stays on the first screen (the lead's ruling). */
.gt-pic{padding:32px 28px}
.gt-pic-phone{display:none}
.gt-beyond{border-bottom:1px solid var(--line)}
.gt-page .panel{border:0;border-radius:var(--r-lg);background:var(--white);box-shadow:0 0 0 1px var(--line),0 24px 48px -32px rgba(13,44,84,.3);padding:28px}
.gt-page .connect-first{background:var(--white)}
.gt-page .connect-first-icon{background:var(--mist);border-radius:18px}
.gt-page .your-version{border-radius:22px;padding:18px 22px;background:var(--mist);border:0}
.gt-page .offline-copy{border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;padding:0}
.gt-page .offline-copy > summary{min-height:60px}
.gt-page .permissions{margin-top:24px}
.gt-page .panel .app-beyond{margin-top:16px;padding:0;border:0;border-radius:0;background:none}
@media (max-width:760px){
  .gt-head{grid-template-columns:minmax(0,1fr);gap:16px}
  .gt-head h1{font-size:var(--h1)}
  .gt-head .lead{font-size:var(--fs-body)}
  .gt-head .gt-pic{display:none}
  .gt-pic-phone{display:block;margin-top:16px;padding:20px 14px;border-radius:22px}
  .gt-page .connect-first-icon{display:none}
  .gt-page .panel{padding:20px 16px;border-radius:22px}
}

/* v2's type on the skill's other pages (batch G, #190; BRAND.md rule 6): h1 700, h2 and h3 600 at -.02em, and nothing else in the
   heading font over 700 (the design pre-check). The shared parts keep rule 6's weights everywhere else. */
.sk-tabpage h1,.gt-page h1{font-weight:700;letter-spacing:-.02em}
.sk-tabpage h2,.sk-tabpage h3,.gt-page h2,.gt-page h3{font-weight:600;letter-spacing:-.02em}
.sk-tabpage .h3,.gt-page .h3,.sk-tabpage .hub-name,.sk-tabpage .result-card-title,.sk-tabpage .row-title,.gt-page fieldset.group legend,.gt-page .fieldset legend{font-family:var(--display);font-weight:600}
.sk-tabpage .hub-price,.sk-tabpage .avatar,.sk-tabpage .stat b,.sk-tabpage .thread-score b,.gt-page .stat b,.gt-page .your-version-line,.gt-page .iya-word,.gt-page .guide-card b{font-family:var(--display);font-weight:700}
.gt-page ol.steps>li::before,.gt-page .iya-steps>li::before{font-family:var(--display);font-weight:700}
.sk-form-page h1{font-size:var(--h2);font-weight:700;letter-spacing:-.02em}
.sk-form-page h2,.sk-form-page h3,.sk-form-page .fieldset legend{font-family:var(--display);font-weight:600}
.sk-form-page .notice b{font-family:var(--display);font-weight:700}
/* ===== design sweep, group C (a skill's own pages, 29 Oct 2026; the v2 bar, #190) ===== */
/* Reviews: the stars summary is the picture, the average large beside the bars, in one white card. */
.rv-summary{display:flex;flex-wrap:wrap;align-items:center;gap:20px 48px;width:fit-content;max-width:100%;margin-top:24px;padding:24px 28px;border-radius:var(--r-lg);background:var(--white);box-shadow:0 0 0 1px var(--line)}
.rv-avg{display:grid;justify-items:start;gap:2px;margin:0}
.rv-avg b{font-family:var(--display);font-weight:700;font-size:var(--h2);line-height:1;color:var(--navy)}
.rv-of,.rv-count{font-size:var(--fs-small);color:var(--soft)}
.rv-summary .histogram{flex:1 1 240px;min-width:240px}
/* The card says the rating, so the tab bar's stars line doesn't say it again a screen above (one idea a screen; the review's M2).
   Follow and Save stay. */
.rv-page .sk-tabbar .hub-stars{display:none}
/* With no reviews, a phone stops at the one card (the first screen's budget; the review's L3). */
@media (max-width:760px){.rv-empty-note{display:none}}
/* Changes: an older version shows its first line; the rest of its notes and how it works changed fold. */
.ver-more{margin-top:4px}
/* "No longer stops for you at ..." is a safety line, so body size on a version, not small print (the design-sweep-c2 review's M1). */
.versions .map-changes{font-size:var(--fs-body)}
/* Feedback: what the maker sees, as the studio inbox draws it, beside the form from 901 px and under it on a phone. */
.lifecycle-page.fb-page{max-width:1160px}   /* .wrap's own width, so the crumb and h1 line up with the nav (the review's L1) */
.fb-layout{display:grid;gap:32px}
.fb-main{min-width:0}
.fb-peek{padding:24px;border-radius:var(--r-lg);background:var(--mist)}
.fb-peek-h{margin:0;font-family:var(--display);font-weight:600;font-size:var(--h3);color:var(--navy)}
.fb-card{display:grid;gap:6px;margin-top:16px;padding:16px 18px;border-radius:20px;background:var(--white);box-shadow:0 0 0 1px var(--line),0 16px 32px -24px rgba(13,44,84,.3)}
.fb-card p{margin:0}
.fb-card-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.fb-card-skill{font-weight:600;color:var(--navy)}
.fb-card-from{font-size:var(--fs-small);color:var(--soft)}
@media (min-width:901px){
  .fb-layout{grid-template-columns:minmax(0,720px) minmax(0,340px);gap:48px;align-items:start}
  .fb-peek{position:sticky;top:96px;margin-top:24px}
}
/* ===== end design sweep, group C ===== */