/* The consent panel (docs/26-consent.md), the band, the sheet, the switch and the click to load placeholders, a part of
   the frame on every page once step 7 moves it into frame/consent/. Every move is a CSS transition consent.ts switches
   with data-cs-state and data-cs-sheet, at docs/14's values. Red appears only as a drawn full stop, a switch said yes and
   the focus ring. The responsive rules sit at the end (CLAUDE.md rule 2). */

/* the band and the sheet take the page's inverse. On ink, paper's palette, on paper and red, ink's, each mixed from
   --ink and --paper with tokens.css's own shares, so a change to the tokens reaches them (CLAUDE.md rule 5) */
:is(.cs,.cs-sheet){--cs-bg:var(--paper);--cs-fg:var(--ink);--cs-fg2:color-mix(in srgb,var(--ink) 62%,transparent);--cs-fg3:color-mix(in srgb,var(--ink) 38%,transparent);--cs-line:color-mix(in srgb,var(--ink) 13%,transparent)}
body:is([data-bg="paper"],[data-bg="red"]) :is(.cs,.cs-sheet){--cs-bg:var(--ink);--cs-fg:var(--paper);--cs-fg2:color-mix(in srgb,var(--paper) 62%,transparent);--cs-fg3:color-mix(in srgb,var(--paper) 36%,transparent);--cs-line:color-mix(in srgb,var(--paper) 14%,transparent)}
/* inside, the site's own names point at them, so .lbl, .sec-c and the label rows follow */
:is(.cs,.cs-sheet){--bg:var(--cs-bg);--fg:var(--cs-fg);--fg-2:var(--cs-fg2);--fg-3:var(--cs-fg3);--line:var(--cs-line);background:var(--cs-bg);color:var(--cs-fg)}
/* a class that sets display never undoes hidden inside the panel */
:is(.cs,.cs-sheet,.cs-embed) [hidden]{display:none!important}

/* ---------- the band ---------- */
.cs{position:fixed;left:0;right:0;bottom:0;z-index:38;transform:translateY(calc(100% + env(safe-area-inset-bottom,0px)));transition:transform .9s var(--e-out),background-color .8s var(--e-out),color .8s var(--e-out)}
.cs-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(0,1fr) auto;column-gap:24px;padding:28px var(--pad) calc(28px + env(safe-area-inset-bottom,0px))}
.cs-words{grid-column:1/7;grid-row:1/3;min-height:0}
.cs-asked{margin:0 0 10px;font-size:15px;line-height:1.5;font-weight:600}
.cs-tw{position:relative}
:is(.cs-t,.cs-sv,.cs-st){margin:0;font-family:var(--display);font-weight:800;font-size:clamp(24px,2.05vw,34px);line-height:.95;letter-spacing:-.04em}
.cs-sv{position:absolute;left:0;top:0;pointer-events:none}
.cs-text{margin:14px 0 0;max-width:58ch;font-size:17px;line-height:1.55}
/* above 1100px the later line sits over the pills in columns 7 to 12, so the band is no taller than its words. The
   pills come first in the markup (Tab meets the choice first), the rows place them */
.cs-later{grid-column:7/13;grid-row:1;align-self:end;margin:0 0 14px;max-width:62ch;font-size:15px;line-height:1.5;color:var(--cs-fg2);transition:color .8s var(--e-out)}
.cs>.cs-in>.cs-pills{grid-column:7/13;grid-row:2;align-self:end}

/* the drawn full stop, reading's .rd-stop shape, never a station */
.cs-stop{display:inline-block;width:.2em;height:.2em;margin-left:.04em;border-radius:50%;background:var(--red);vertical-align:baseline}

/* the pill, .case-x's outline at touch size. The three are equal, none filled, none red */
.cs-pills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cs-pills[data-cs-stack]{grid-template-columns:minmax(0,1fr);gap:8px}
.cs-pill{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:48px;padding:12px 18px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--cs-fg,var(--fg));color:var(--cs-fg,var(--fg));font-size:15px;font-weight:600;line-height:1.15;text-align:center;text-decoration:none;transition:background-color .35s var(--e-out),color .35s var(--e-out),box-shadow .8s var(--e-out)}
.cs-pill>span{display:block;min-width:0;max-width:100%;text-wrap:balance}
/* hover and keyboard focus fill it alike (spec 4.4), focus keeps the red ring as well */
.cs-pill:focus-visible{outline:2px solid var(--red);outline-offset:4px;background:var(--cs-fg,var(--fg));color:var(--cs-bg,var(--bg))}
@media (hover:hover){.cs-pill:hover{background:var(--cs-fg,var(--fg));color:var(--cs-bg,var(--bg))}}

/* the text link, .cl-next's look */
.cs-link{position:relative;color:var(--cs-fg,var(--fg));font-weight:600;text-decoration:none;border-bottom:1px solid var(--cs-line,var(--line));padding-bottom:2px;transition:border-color .3s var(--e-out),color .8s var(--e-out)}
.cs-link::after{content:"";position:absolute;inset:-10px -6px}
.cs-link:hover{border-color:var(--red)}
.cs-link:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:2px}
@media (hover:none){.cs-link{display:inline-flex;min-height:44px;margin-block:-12px;align-items:center;border-bottom:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:var(--cs-line,var(--line))}}

/* the arrival, from wait to first (docs/26, Arrival). power3.out written as a curve */
.cs{--p3:cubic-bezier(.165,.84,.44,1)}
.cs :is(.cs-t,.cs-sv) .line-in{transform:translateY(112%)}
.cs :is(.cs-asked,.cs-text,.cs-later,.cs-pills>.cs-pill){opacity:0;transform:translateY(14px)}
.cs .cs-stop{transform:scale(0)}
.cs-asked{--d:.2s}.cs-text{--d:.3s}.cs-later{--d:.38s}
.cs-pills>.cs-pill:nth-child(1){--d:.46s}.cs-pills>.cs-pill:nth-child(2){--d:.54s}.cs-pills>.cs-pill:nth-child(3){--d:.62s}
.cs[data-cs-state="first"]{transform:none}
.cs[data-cs-state="first"] .cs-t .line-in{transform:none;transition:transform 1.25s var(--e-out) .15s}
.cs[data-cs-state="first"] :is(.cs-asked,.cs-text,.cs-later){opacity:1;transform:none;transition:opacity 1s var(--p3) var(--d),transform 1s var(--p3) var(--d),color .8s var(--e-out)}
.cs[data-cs-state="first"] .cs-pills>.cs-pill{opacity:1;transform:none;transition:opacity 1s var(--p3) var(--d),transform 1s var(--p3) var(--d),background-color .35s var(--e-out),color .35s var(--e-out),box-shadow .8s var(--e-out)}
.cs[data-cs-state="first"] .cs-t .cs-stop{transform:none;transition:transform .45s cubic-bezier(.3,1.7,.5,1) .9s}
/* saved, the homepage's title swap, then the band sinks to its top strip (docs/26, Saved) */
.cs[data-cs-state="saved"]{transform:translateY(calc(var(--cs-h,0px) - var(--cs-sh,84px)));transition:transform .45s var(--e-out) .3s,background-color .8s var(--e-out),color .8s var(--e-out)}
.cs[data-cs-state="gone"]{transition:transform .7s var(--e-io),background-color .8s var(--e-out),color .8s var(--e-out)}
.cs:is([data-cs-state="saved"],[data-cs-state="gone"]) .cs-t .line-in{transform:translateY(-112%);transition:transform .6s var(--e-io)}
.cs:is([data-cs-state="saved"],[data-cs-state="gone"]) .cs-t .cs-stop{transform:none}
.cs:is([data-cs-state="saved"],[data-cs-state="gone"]) .cs-sv .line-in{transform:none;transition:transform 1.25s var(--e-out) .15s}
.cs:is([data-cs-state="saved"],[data-cs-state="gone"]) .cs-sv .cs-stop{transform:none;transition:transform .45s cubic-bezier(.3,1.7,.5,1) .75s}
.cs:is([data-cs-state="saved"],[data-cs-state="gone"]) :is(.cs-asked,.cs-text,.cs-later,.cs-pills>.cs-pill){opacity:0;transform:none;transition:opacity .3s var(--e-out)}
/* the line that is not showing is hidden, so no ascender peeks over its clip */
.cs:not([data-cs-state="saved"]):not([data-cs-state="gone"]) .cs-sv{visibility:hidden}
.cs:is([data-cs-state="saved"],[data-cs-state="gone"]) .cs-t{visibility:hidden;transition:visibility 0s .6s}
/* the strip put in place under the sheet, or after a reload, with no move of the band and no title to leave */
.cs[data-cs-jump]{transition:background-color .8s var(--e-out),color .8s var(--e-out)}
.cs[data-cs-quiet] .cs-t{visibility:hidden}
/* focus entering the waiting band shows it at once, for one frame */
html.cs-now :is(.cs,.cs *){transition:none!important}
/* while the band is up, a focused element is never scrolled under it (WCAG 2.4.11) */
html.cs-up{scroll-padding-bottom:var(--cs-h,0px)}
/* the words scroll inside the band's cap on short screens, the later line and the pills pinned under them. The fade is
   a sticky veil in the band's colour, not a mask, so the box's focus ring is never clipped (WCAG 2.4.7). At the end of
   the words it sits under the last line and fades nothing */
.cs-words[data-cs-scroll]::after{content:"";position:sticky;bottom:0;display:block;height:24px;background:linear-gradient(transparent,var(--cs-bg));pointer-events:none}
.cs-words[data-cs-scroll]:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* the spacer after the footer, so its last row can scroll clear of the band. Red like the footer */
.cs-room{height:var(--cs-h,0px);background:var(--red)}

/* the homepage's dock (sections/industries/industries.css, fixed at bottom 20px, z-index 38) would sit on the band, so
   while the band is up the dock stays down, with its own move. A homepage rule for the migration (docs/26, For the
   migration session), harmless on pages without a dock */
html.cs-up .dock{transform:translate(-50%,160%);opacity:0;pointer-events:none}
/* the phone menu (39) and the case sheet (60) cover the screen, and the band steps down out of view under them */
html:is(.menu-open,.case-open) .cs[data-cs-state]{transform:translateY(calc(100% + env(safe-area-inset-bottom,0px)));visibility:hidden;transition:transform .45s var(--e-out),visibility 0s .45s}
/* its still version, the band simply goes (CLAUDE.md rule 6, this rule outweighs .rm's) */
html.rm:is(.menu-open,.case-open) .cs[data-cs-state]{transition:none}

/* ---------- the sheet, Cookie settings ---------- */
.cs-sheet{position:fixed;inset:auto 0 0 0;width:100%;max-width:none;height:auto;max-height:82svh;margin:0;border:0;padding:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;overflow:hidden;clip-path:inset(calc(100% - var(--cs-from,0px)) 0 0 0);transition:clip-path .7s cubic-bezier(.87,0,.13,1),background-color .3s var(--e-out)}
.cs-sheet:not([open]){display:none}
.cs-sheet[data-cs-sheet="open"]{clip-path:inset(0)}
.cs-sheet[data-cs-sheet="closing"]{transition:clip-path .7s var(--e-io)}
.cs-sheet[data-cs-sheet="saving"]{clip-path:inset(calc(100% - var(--cs-sh,84px)) 0 0 0);background-color:transparent;transition:clip-path .7s var(--e-io),background-color .3s var(--e-out)}
/* the first value for browsers whose ::backdrop does not inherit custom properties (Safari before 17.4). It is
   --ink at 55% written out, used only there */
.cs-sheet::backdrop{background:rgba(18,17,20,.55);background:color-mix(in srgb,var(--ink) 55%,transparent);opacity:0;transition:opacity .3s}
.cs-sheet[data-cs-sheet="open"]::backdrop{opacity:1}
/* the rows fade up as it grows, 1s power3.out from 0.25s, 0.06s apart (--cs-i, set as it opens) */
.cs-sheet[data-cs-sheet="shut"] [data-cs-in]{opacity:0;transform:translateY(14px)}
.cs-sheet[data-cs-sheet="open"] [data-cs-in]{transition:opacity 1s cubic-bezier(.165,.84,.44,1) calc(.25s + var(--cs-i,0) * .06s),transform 1s cubic-bezier(.165,.84,.44,1) calc(.25s + var(--cs-i,0) * .06s)}
.cs-sheet[data-cs-sheet="saving"] :is(.cs-sh-head,.cs-sh-body,.cs-sh-foot){opacity:0;transition:opacity .3s var(--e-out)}

.cs-sh-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;padding:28px var(--pad) 0}
.cs-st{grid-column:1/9}
/* Nothing to ask has no Close in the head, the foot's is the one */
.cs-sh-head>.cs-st:only-child{grid-column:1/-1}
/* the title takes focus as the sheet opens, so its name is read and Close is never pressed by accident. It is not a
   control, so it draws no ring */
.cs-st:focus{outline:0}
.cs-x{grid-column:10/13;justify-self:end;min-height:44px;padding:10px 16px;font-size:14px}
.cs-sh-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-content:start;overflow-y:auto;overscroll-behavior:contain;padding:0 var(--pad);scroll-padding-top:24px;scroll-padding-bottom:40px}
/* the body has no bottom padding, so its last box sits on the scrollport's edge, the foot's rule. At rest that box is
   the 28px of room under the last row. While more is under the foot (consent.ts sets data-cs-scroll) it becomes a
   sticky veil like the band's, 32px, stuck to the foot's rule, so the last line fades into the foot and is never sliced
   by it, and no focus ring is clipped. At the end of the scroll it sits under the last row as its room */
.cs-sh-body::after{content:"";grid-column:1/-1;height:28px;pointer-events:none}
.cs-sh-body[data-cs-scroll]::after{position:sticky;bottom:0;height:32px;background:linear-gradient(transparent,var(--cs-bg))}
/* the same at the head's edge. A 16px veil stuck to the body's top, taking no room (its negative margin), so at rest it
   lies over the empty margin above the first row and, scrolled, the line going under the head fades instead of being
   cut by it. scroll-padding-top keeps a focused row clear of it */
.cs-sh-body::before{content:"";grid-column:1/-1;position:sticky;top:0;z-index:1;height:16px;margin-bottom:-16px;pointer-events:none;background:linear-gradient(var(--cs-bg),transparent)}
.cs-intro{grid-column:1/7;margin:20px 0 0;max-width:52ch;font-size:15px;line-height:1.5;color:var(--cs-fg2)}
.cs-first{grid-column:1/7;margin:8px 0 0;font-size:15px;line-height:1.5;font-weight:600}
.cs-rows.cs-record{grid-column:1/7;margin-top:20px}
.cs-list{grid-column:1/-1;margin-top:28px}
.cs-nothing{grid-column:1/7;margin:20px 0 0;font-size:17px;line-height:1.55;font-weight:600}
.cs-sh-foot{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;padding:20px var(--pad) calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--cs-line)}
.cs-sh-foot>.cs-link{grid-column:1/7;justify-self:start}
.cs-sh-foot>.cs-pills{grid-column:7/13}
.cs-pills-one{display:flex;justify-content:flex-end}
.cs-pills-one>.cs-pill{min-width:140px}

/* a category row, the label left and its details beside it, on a rule */
.cs-cat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start;padding:20px 0;border-top:1px solid var(--cs-line)}
.cs-cat:last-child{border-bottom:1px solid var(--cs-line)}
.cs-cat-l{grid-column:1/6;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;row-gap:6px;min-height:48px;cursor:pointer}
div.cs-cat-l{cursor:default}
.cs-cat-n{font-family:var(--display);font-weight:500;font-size:clamp(20px,1.75vw,27px);line-height:1.25;letter-spacing:-.022em}
.cs-always{align-self:center;white-space:nowrap}
.cs-cat-d{grid-column:1/-1;max-width:44ch;font-size:15px;line-height:1.5;color:var(--cs-fg2)}
.cs-vd{grid-column:7/13;min-width:0}
.cs-vd summary{display:flex;align-items:baseline;gap:8px;min-height:48px;padding:12px 0;font-size:17px;line-height:1.4;font-weight:600;list-style:none;cursor:pointer}
.cs-vd summary::-webkit-details-marker{display:none}
.cs-vd summary:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.cs-vd-x{margin-left:auto;font-family:var(--display);font-weight:500;font-size:24px;line-height:1;transition:transform .35s var(--e-out)}
.cs-vd[open] .cs-vd-x{transform:rotate(45deg)}
.cs-vd-b{padding:4px 0 8px}

/* label rows, reading's .rd-rows shape (templates/reading/reading.css), defined here since the panel is in the frame
   of every page and reading.css is not */
.cs-rows{display:grid;margin:8px 0 0}
/* six columns of the page's grid inside the six the record and the details span, so the values start on a column */
.cs-rows>div{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:24px;padding:10px 0;border-top:1px solid var(--cs-line)}
.cs-rows dt{grid-column:span 2}
.cs-rows dd{grid-column:span 4}
.cs-rows>div:last-child{border-bottom:1px solid var(--cs-line)}
.cs-rows dt{font-size:15px;color:var(--cs-fg2)}
.cs-rows dd{margin:0;font-size:15px;line-height:1.5;font-variant-numeric:tabular-nums}
.cs-row-l{display:block}
.cs-v+.cs-v{margin-top:20px}
.cs-v-n{margin:0;font-weight:600}
.cs-v-n .pv-tag{margin-left:8px}
.cs-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* the switch, its knob an empty ring that lands as the red dot on a yes. Shape and place say the state (WCAG 1.4.1) */
.cs-sw-w{position:relative;display:block;width:44px;height:26px;margin-top:4px}
.cs-sw{position:absolute;inset:-11px -2px;width:auto;height:auto;margin:0;opacity:0;cursor:pointer}
.cs-sw-t{position:absolute;inset:0;border-radius:999px;box-shadow:inset 0 0 0 1px var(--cs-fg);transition:box-shadow .8s var(--e-out)}
.cs-sw-k{position:absolute;top:6px;left:6px;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--cs-fg2);transition:transform .45s cubic-bezier(.3,1.7,.5,1),background-color .2s,box-shadow .2s}
.cs-sw:checked+.cs-sw-t .cs-sw-k{transform:translateX(18px);background:var(--red);box-shadow:none}
.cs-sw:focus-visible+.cs-sw-t{outline:2px solid var(--red);outline-offset:4px}

/* ---------- click to load ---------- */
.cs-embed{position:relative;align-self:start;margin:0;container-type:inline-size}
.cs-embed-f{position:relative;aspect-ratio:var(--cs-ratio,16 / 9);border-radius:10px 10px 0 0;overflow:hidden;background:color-mix(in srgb,var(--fg) 6%,transparent);box-shadow:inset 0 0 0 1px var(--line);transition:background-color .8s var(--e-out),box-shadow .8s var(--e-out)}
.cs-embed-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
:is(.cs-embed-addr,.cs-embed-lead){position:absolute;left:24px;top:24px;right:24px;margin:0;font-family:var(--display);font-weight:500;font-size:clamp(20px,1.75vw,27px);line-height:1.25;letter-spacing:-.022em}
.cs-embed-s{display:grid;gap:12px;padding:16px 20px;border-radius:0 0 10px 10px;background:var(--fg);color:var(--bg);transition:transform .45s var(--e-out),opacity .45s var(--e-out),background-color .8s var(--e-out),color .8s var(--e-out)}
.cs-embed-s>p{margin:0;max-width:46ch;font-size:15px;line-height:1.5}
.cs-embed-a{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.cs-embed-s .cs-pill{min-height:44px;padding:10px 16px;font-size:14px;box-shadow:inset 0 0 0 1px var(--bg);color:var(--bg)}
.cs-embed-s .cs-pill:focus-visible{background:var(--bg);color:var(--fg)}
@media (hover:hover){.cs-embed-s .cs-pill:hover{background:var(--bg);color:var(--fg)}}
.cs-embed-s .cs-link{font-size:15px;color:var(--bg);border-color:color-mix(in srgb,var(--bg) 30%,transparent)}
.cs-embed-s .cs-link:hover{border-color:var(--red)}
.cs-embed[data-cs-loaded] .cs-embed-s{transform:translateY(100%);opacity:0;pointer-events:none}
.cs-embed iframe,.cs-embed .cs-frame{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .6s var(--e-out)}
.cs-embed [data-cs-shown]{opacity:1}
.cs-embed[data-cs-loaded] .cs-embed-f>:not(.cs-frame){visibility:hidden;transition:visibility 0s .6s}
/* a map or a booking calendar is one card at every width, its address or lead at the top, the strip over its foot */
.cs-embed:is([data-cs-kind="map"],[data-cs-kind="booking"]) .cs-embed-f{border-radius:10px}
.cs-embed:is([data-cs-kind="map"],[data-cs-kind="booking"]) .cs-embed-s{position:absolute;left:0;right:0;bottom:0}

/* ---------- still, reduced motion and forced colours ---------- */
/* reduced motion, nothing slides, clips, rises or fades. The theme and the hover colours still change (docs/14) */
.rm :is(.cs,.cs-sheet){transition:background-color .8s var(--e-out),color .8s var(--e-out)}
.rm :is(.cs,.cs-sheet) :is(.line-in,.cs-asked,.cs-text,.cs-later,.cs-stop,.cs-sw-k,.cs-vd-x,[data-cs-in],.cs-sh-head,.cs-sh-body,.cs-sh-foot){transition:none!important}
.rm .cs-pill{transition:background-color .35s var(--e-out),color .35s var(--e-out)!important}
.rm .cs-sheet::backdrop{transition:none}
.rm .cs-embed :is(.cs-embed-s,iframe,.cs-frame){transition:none}
@media (forced-colors:active){
  /* forced colours drop box-shadow, so the knob is a border */
  .cs-sw-k{box-shadow:none;border:2px solid CanvasText;box-sizing:border-box}
  .cs-sw:checked+.cs-sw-t .cs-sw-k{background:Highlight;border-color:Highlight}
  .cs-sw-t,.cs-pill{border:1px solid CanvasText}
  .cs-stop{background:CanvasText}
}

/* ---------- responsive ---------- */
/* the click to load strip lies across the frame's foot from 560px, stacked, and beside its actions from 760px */
@container (min-width:560px){
  .cs-embed-f{border-radius:10px}
  .cs-embed-s{position:absolute;left:0;right:0;bottom:0}
}
@container (min-width:760px){
  .cs-embed-s{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:20px}
  .cs-embed-a{justify-content:flex-end}
}
/* a narrow map stands taller, so its address and the strip never meet */
@container (max-width:419px){
  .cs-embed[data-cs-kind="map"] .cs-embed-f{aspect-ratio:4 / 5}
}
@media (max-width:1100px) and (min-width:761px){
  .cs-words{grid-column:1/9;grid-row:1}
  .cs-later{grid-column:1/9;grid-row:2;align-self:start;margin:10px 0 0}
  .cs>.cs-in>.cs-pills{grid-column:9/13;grid-row:1/3;grid-template-columns:minmax(0,1fr);gap:8px}
  :is(.cs-t,.cs-sv,.cs-st){font-size:24px}
  .cs-intro,.cs-first,.cs-rows.cs-record,.cs-nothing{grid-column:1/9}
  .cs-record>div{grid-template-columns:repeat(8,minmax(0,1fr))}
  .cs-record dd{grid-column:span 6}
  .cs-cat-l{grid-column:1/7;padding-right:32px}
  /* the foot's link takes four columns, so the three pills keep one line each */
  .cs-sh-foot>.cs-link{grid-column:1/5}
  .cs-sh-foot>.cs-pills{grid-column:5/13}
}
@media (min-width:761px) and (max-height:820px){
  .cs-in{padding-top:22px;padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}
  .cs-text{font-size:15px;line-height:1.5}
  .cs-pill{min-height:44px}
  .cs-sh-foot{padding-bottom:calc(22px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:760px){
  .cs-in{grid-template-columns:minmax(0,1fr);padding-top:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .cs-words,.cs-later,.cs>.cs-in>.cs-pills{grid-column:1}
  .cs-words{grid-row:1}
  .cs-later{grid-row:2;align-self:start}
  .cs>.cs-in>.cs-pills{grid-row:3}
  :is(.cs-t,.cs-sv,.cs-st){font-size:24px}
  .cs-text{margin-top:10px;font-size:15px;line-height:1.5}
  .cs-later{margin:6px 0 0;font-size:14px;line-height:1.45}
  .cs>.cs-in>.cs-pills{margin-top:14px}
  .cs-pills{gap:8px}
  .cs-pill{min-height:44px;padding:8px 10px;font-size:14px}
  .cs-sheet{max-height:92svh}
  .cs-sh-head{grid-template-columns:minmax(0,1fr) auto;column-gap:16px;padding-top:calc(16px + env(safe-area-inset-top,0px))}
  .cs-st{grid-column:1}
  .cs-x{grid-column:2}
  .cs-sh-body,.cs-cat,.cs-sh-foot{grid-template-columns:minmax(0,1fr)}
  .cs-sh-body>*,.cs-sh-body>.cs-rows.cs-record,.cs-cat>*,.cs-sh-foot>.cs-link,.cs-sh-foot>.cs-pills{grid-column:1/-1}
  .cs-intro{margin-top:16px}
  .cs-list{margin-top:24px}
  .cs-vd{margin-top:8px}
  /* the foot ends where the band ends, so the hand does not move */
  .cs-sh-foot{row-gap:14px;padding-top:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .cs-rows>div,.cs-record>div{grid-template-columns:minmax(0,1fr);row-gap:2px}
  .cs-rows :is(dt,dd){grid-column:1/-1}
  .cs-pills-one>.cs-pill{flex:1}
}
@media (max-width:760px) and (max-height:699px){
  .cs-in{max-height:42svh;grid-template-rows:minmax(0,1fr) auto auto}
  .cs-words{overflow-y:auto;overscroll-behavior:contain}
  :is(.cs-t,.cs-sv){font-size:20px}
}
@media (max-height:499px){
  .cs-in{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(0,1fr) auto;max-height:52svh;padding-top:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .cs-words{grid-column:1/9;grid-row:1;overflow-y:auto;overscroll-behavior:contain}
  .cs-later{grid-column:1/9;grid-row:2;align-self:start;margin:8px 0 0;font-size:14px;line-height:1.45}
  .cs>.cs-in>.cs-pills{grid-column:9/13;grid-row:1/3;margin-top:0;grid-template-columns:minmax(0,1fr)!important;gap:8px}
  :is(.cs-t,.cs-sv){font-size:20px}
  .cs-text{margin-top:10px;font-size:15px;line-height:1.5}
  .cs-pill{min-height:44px}
  /* the sheet keeps its head and foot short, so the categories have the room */
  .cs-sheet{max-height:92svh}
  .cs-sh-head{padding-top:16px}
  .cs-intro{margin-top:12px}
  .cs-list{margin-top:20px}
  .cs-sh-body::before{height:12px;margin-bottom:-12px}
  .cs-sh-foot{padding-top:12px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
}