/* The public site's styles. They sit on the product's: core styles.css supplies the buttons, fields, menus,
   dialogs and toasts, and this file adds the page layout, the type of a reading page and the site-only
   parts. Every value is a token from core/ui/tokens.css or site/src/tokens.css; the only raw lengths are
   the 768px and 1024px breakpoints in @media preludes. */

/* ---------- page ---------- */

/* Frame heights the landing page adds to the site tokens: a section frame is tall enough to show the board's
   chrome and its columns, and on a phone the hero frame is the product's phone layout, as tall as the screen below the nav and the frame bar so
   the cards show under the board's own chrome. */
:root { --hero-frame-h: clamp(640px, 82vh, 860px); --frame-section-h: clamp(560px, 78vh, 760px); }
@media (max-width: 767px) { :root { --hero-frame-h: clamp(560px, calc(100svh - var(--nav-h) - 2 * var(--frame-bar-h)), 760px); --frame-section-h: 520px; } }

/* The product's stylesheet fixes the body to the viewport for the app; a page scrolls. */
html:has(body.s-page) { height: auto; }
body.s-page {
  height: auto; min-height: 100%; overflow: visible;
  font: var(--fw-reg) var(--fs-4) / var(--lh-body) var(--font);
  letter-spacing: var(--track-body);
}
body.s-page :target { scroll-margin-block-start: calc(var(--nav-h) + var(--s4)); }

.s-skip {
  position: absolute; inset-block-start: var(--s2); inset-inline-start: var(--s4); z-index: var(--z-toast);
  padding: var(--s2) var(--s4); border-radius: var(--r-1); background: var(--ink); color: var(--bg); font-weight: var(--fw-med);
  transform: translateY(-300%);
}
.s-skip:focus { transform: none; }

.s-main { display: block; }
#top.s-section { padding-block-start: var(--s7); }
.s-section { padding-block: var(--sec-y); }
.s-section[data-tone="alt"] { background: var(--surface-band); }
.s-wrap { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); min-width: 0; }
.s-wrap > * + * { margin-block-start: var(--stack-2); }
.s-wrap > .s-lede + * { margin-block-start: var(--stack-3); }
.s-wrap > .s-h2 { margin-block-start: 0; }
.s-wrap > .s-split + * { margin-block-start: var(--stack-3); }
.s-wrap > * + :is(.s-list, .s-stat, .s-stats) { margin-block-start: var(--stack-3); }
.s-stack > * + * { margin-block-start: var(--stack-2); }
.s-stack > .s-lede + * { margin-block-start: var(--stack-3); }
.s-wrap.s-nav-row > *, .s-footer-row > * { margin: 0; }
/* The end group keeps its push to the far edge, which the reset above would otherwise remove. */
.s-wrap.s-nav-row > .s-nav-end { margin-inline-start: auto; }
.s-lede code, .s-body code { font-size: var(--fs-4); }

.s-h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--track-display); font-weight: var(--fw-bold); text-wrap: balance; }
.s-h2 { font-size: var(--fs-section); line-height: var(--lh-section); letter-spacing: var(--track-section); font-weight: var(--fw-bold); text-wrap: balance; }
.s-h3 { font-size: var(--fs-5); line-height: var(--lh-tight); letter-spacing: var(--track-section); font-weight: var(--fw-semi); text-wrap: balance; }
.s-lede { font-size: var(--fs-5); line-height: var(--lh-body); color: var(--ink-2); text-wrap: pretty; }
.s-body { font-size: var(--fs-4); text-wrap: pretty; }
.s-small { font-size: var(--fs-3); color: var(--ink-2); text-wrap: pretty; }
.s-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.s-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.s-split { display: grid; gap: var(--sec-gap); align-items: start; }
.s-split > * { min-width: 0; }
.s-split[data-align="end"] { align-items: end; }
.s-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }

/* a definition list: term and description rows split by hairlines */
.s-list { margin: 0; border-block-start: var(--hair) solid var(--line); }
.s-list-row { display: grid; gap: var(--s1); padding-block: var(--s4); border-block-end: var(--hair) solid var(--line); }
.s-list dt { font-weight: var(--fw-semi); }
.s-list dd { margin: 0; color: var(--ink-2); }
.s-list-empty .bk-state { align-items: flex-start; text-align: start; }
.s-list-empty { border: var(--hair) solid var(--line); border-radius: var(--r-card); background: var(--surface-card-2); }

/* ---------- buttons on a page ---------- */

/* A page button may carry a long label, so it wraps and grows instead of overflowing. */
body.s-page .bk-btn:not([data-icon-only]) { height: auto; min-height: var(--ctl-h); padding-block: var(--s1); white-space: normal; text-align: start; line-height: var(--lh-tight); max-width: 100%; }
body.s-page .bk-btn[data-size="sm"]:not([data-icon-only]) { min-height: var(--ctl-h-sm); }
body.s-page .bk-btn[data-size="lg"] { min-height: var(--tap); padding-inline: var(--s5); font-size: var(--fs-3); }
body.s-page .bk-btn > span { overflow-wrap: anywhere; }
body.s-page .bk-btn[aria-disabled="true"] { pointer-events: none; }
.s-force-focus { outline: var(--ring) solid var(--focus); outline-offset: var(--ring-gap); }

.bk-views > button { min-height: var(--ctl-h); }
body.s-page .bk-views > .bk-btn:not([data-icon-only]) { height: calc(var(--ctl-h) - var(--s1) - var(--s0)); padding-block: 0; white-space: nowrap; }
body.s-page .bk-views > .bk-btn > span { overflow-wrap: normal; }
.s-views { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.s-views::-webkit-scrollbar { display: none; }
.s-views > button { flex: none; }
.s-views > button[aria-selected="true"] { background: var(--surface-control); border-color: var(--line); color: var(--ink); }
.s-views > button[aria-selected="true"] .bk-icon { color: var(--sky-2); }
@media (hover: hover) { .s-views > button:hover { color: var(--ink); } }

/* ---------- mark and wordmark ---------- */

.s-mark { display: block; flex: none; width: var(--mark); height: var(--mark); overflow: visible; color: var(--mark-ink); }
.s-mark[data-size="lg"] { width: var(--mark-lg); height: var(--mark-lg); }
.s-mark[data-size="xl"] { width: var(--mark-xl); height: var(--mark-xl); }
@keyframes s-fade { from { opacity: var(--o-hidden); } to { opacity: 1; } }

.s-wordmark { display: inline-flex; align-items: center; gap: var(--s3); min-width: 0; color: var(--ink); text-decoration: none; }
.s-wordmark-name { font-size: var(--fs-3); font-weight: var(--fw-med); letter-spacing: var(--track-wordmark); text-transform: uppercase; line-height: 1; overflow-wrap: anywhere; }
@media (hover: hover) { .s-wordmark:hover { text-decoration: none; } }

/* a link inside a sentence is always underlined, in the same ink line the product draws */
:is(.s-lede, .s-body, .s-small, .s-footer-links) a:not(.bk-btn) { text-decoration: underline; text-decoration-color: var(--link-line); text-decoration-thickness: var(--link-thick); text-underline-offset: var(--link-offset); }
:is(.s-lede, .s-body, .s-small, .s-footer-links) a:not(.bk-btn):focus-visible { text-decoration-color: var(--link); text-decoration-thickness: var(--link-thick-hover); }
@media (hover: hover) { :is(.s-lede, .s-body, .s-small, .s-footer-links) a:not(.bk-btn):hover { text-decoration-color: var(--link); text-decoration-thickness: var(--link-thick-hover); } }

/* ---------- navigation bar ---------- */

.s-header { position: sticky; inset-block-start: 0; z-index: var(--z-panel); min-height: var(--nav-h); background: var(--surface-page); }
.s-nav { height: var(--nav-h); background: var(--surface-page); border-block-end: var(--hair) solid transparent; }
.s-nav[data-scrolled], .s-nav[data-demo] { background: var(--surface-chrome); border-block-end-color: var(--line); }
.s-nav-row { display: flex; align-items: center; gap: var(--s6); height: 100%; }
.s-nav .s-wordmark { flex: 0 1 auto; }
.s-nav .s-wordmark-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-nav-links { display: flex; align-items: center; gap: var(--s5); flex: 1; min-width: 0; }
.s-nav-link { color: var(--ink-2); font-size: var(--fs-3); font-weight: var(--fw-med); text-decoration: none; padding-block: var(--s2); }
@media (hover: hover) { .s-nav-link:hover { color: var(--ink); text-decoration: none; } }
.s-nav-end { display: flex; align-items: center; gap: var(--s3); margin-inline-start: auto; flex: none; }
.s-nav-menu { display: none; }
.s-nav-search { display: block; }
.s-sheet-foot { display: flex; flex-direction: column; align-items: stretch; gap: var(--s3); padding: var(--s4); border-block-start: var(--hair) solid var(--line); }
.s-sheet-foot .bk-views { align-self: flex-start; }
.s-sheet .bk-menu-item { text-decoration: none; font-size: var(--fs-3); }

@media (max-width: 767px) {
  .s-nav-links, .s-nav-theme, .s-nav-search { display: none; }
  .s-nav-menu { display: block; }
  .s-nav-row { gap: var(--s3); }
  .s-nav .s-wordmark-name { letter-spacing: var(--track-wordmark-phone); }
}
/* below 1024px the theme switch and search move into the menu, so the links and the action keep their room */
@media (max-width: 1023px) {
  .s-nav-theme, .s-nav-search { display: none; }
  .s-nav-menu { display: block; }
}
/* the catalogue draws the phone layout at any width */
.s-nav[data-layout="phone"] .s-nav-links, .s-nav[data-layout="phone"] .s-nav-theme, .s-nav[data-layout="phone"] .s-nav-search { display: none; }
.s-nav[data-layout="phone"] .s-nav-menu { display: block; }
.s-nav[data-layout="phone"] .s-nav-row { gap: var(--s3); }
.s-nav[data-layout="phone"] .s-wordmark-name { letter-spacing: var(--track-wordmark-phone); }

/* ---------- code block ---------- */

.s-code { border: var(--hair) solid var(--line); border-radius: var(--r-card); background: var(--code-bg); min-width: 0; overflow: hidden; }
.s-code-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--frame-bar-h); padding: var(--s1) var(--s2) var(--s1) var(--s4); border-block-end: var(--hair) solid var(--line); }
.s-code-label { font-size: var(--fs-2); font-weight: var(--fw-med); color: var(--ink-2); overflow-wrap: anywhere; }
.s-code-body { margin: 0; padding: var(--code-pad); font: var(--fw-reg) var(--fs-3) / var(--lh-body) var(--mono); white-space: pre-wrap; overflow-wrap: normal; word-break: normal; overflow-x: auto; color: var(--ink); }
.s-code-body code { font: inherit; }
.s-nb { white-space: nowrap; }
/* A line breaks only at a space, never inside a word or a flag; a line with no space to break at scrolls inside the block. */

.s-codes { display: grid; gap: var(--s4); min-width: 0; align-content: start; }

/* ---------- product frame ---------- */

.s-frame { position: relative; margin: 0; border: var(--hair) solid var(--line); border-color: var(--frame-line); border-radius: var(--frame-r); background: var(--surface-chrome-2); overflow: hidden; min-width: 0; max-width: 100%; }
.s-frame-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--frame-bar-h); padding: var(--s1) var(--s2); border-block-end: var(--hair) solid var(--line); background: var(--frame-bar); }
.s-frame-bar .bk-live { flex: 0 1 auto; min-width: 0; }
.s-frame-bar .bk-live > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The skip link before the iframe sits over the bar, hidden until it has focus (the .s-skip rules). */
.s-frame .s-frame-skip { position: absolute; inset-block-start: var(--s1); inset-inline-start: var(--s2); z-index: var(--z-panel); font-size: var(--fs-2); padding-block: var(--s1); }
.s-frame-end { display: block; height: 0; }
/* On a phone the bar wraps before the label is cut: the label takes its own line when it and the actions do not fit together. */
@media (max-width: 767px) { .s-frame-bar { flex-wrap: wrap; } .s-frame-bar .bk-live { flex-shrink: 0; max-width: 100%; } }
.s-frame-actions { display: flex; align-items: center; gap: var(--s1); flex: none; }
.s-frame-iframe { display: block; width: 100%; max-width: 100%; border: 0; background: var(--surface-page); height: var(--frame-h); }
.s-frame[data-height="section"] .s-frame-iframe, .s-frame[data-height="section"] .s-frame-fail { height: var(--frame-section-h); }
.s-frame[data-height="hero"] .s-frame-iframe { height: var(--hero-frame-h); }
.s-frame-fail { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s3); height: var(--frame-h); padding: var(--s6) var(--gutter); background: var(--surface-page); }
.s-frame-fail[hidden] { display: none; }
.s-frame[data-height="hero"] .s-frame-fail { height: var(--hero-frame-h); }
.s-frame-fail > .bk-icon { color: var(--a-2); }

/* ---------- stat and steps ---------- */

.s-stat { margin: 0; display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.s-stat-value { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s2); }
.s-stat-n { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: var(--fw-bold); letter-spacing: var(--track-section); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.s-stat-unit { font-size: var(--fs-5); color: var(--ink-2); }
.s-stat figcaption { font-size: var(--fs-4); color: var(--ink); text-wrap: pretty; }
.s-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6) var(--sec-gap); }
.s-stats > .s-stat { padding-block-start: var(--s4); border-block-start: var(--hair) solid var(--line); }

.s-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--stack-3); }
.s-step { display: grid; grid-template-columns: var(--step-n) minmax(0, 1fr); gap: var(--s4); align-items: start; }
.s-step > div { min-width: 0; }
.s-step > div > * + * { margin-block-start: var(--s2); }
.s-step > div > .s-code { margin-block-start: var(--s3); }
.s-step-n { display: grid; place-items: center; width: var(--step-n); height: var(--step-n); border: var(--hair) solid var(--line-2); border-radius: var(--r-pill); background: var(--surface-card); font: var(--fw-semi) var(--fs-3) / 1 var(--mono); color: var(--ink); }

/* ---------- one task, done twice: the written sequence beside the board's, each in its own panel ---------- */

.s-twice { display: grid; gap: var(--sec-gap); }
.s-twice > * { min-width: 0; }
.s-wrap > .s-twice + * { margin-block-start: var(--stack-3); }
.s-way { padding: var(--s6); border: var(--hair) solid var(--line); border-radius: var(--r-card); background: var(--surface-card); }
.s-way > * + * { margin-block-start: var(--stack-2); }
.s-way[data-way="board"] { border-color: var(--sky); }
.s-walk { margin: 0; padding-inline-start: var(--s6); display: grid; gap: var(--s3); }
.s-walk li { padding-inline-start: var(--s1); }
.s-walk li::marker { color: var(--ink-2); font-family: var(--mono); }

/* ---------- footer ---------- */

.s-footer { background: var(--surface-foot); border-block-start: var(--hair) solid var(--line); padding-block: var(--s8); }
.s-footer-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s5) var(--s7); }
.s-footer-row > * { margin: 0; }
.s-footer-id { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.s-footer-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.s-footer-links a, .s-footer-links [aria-current="page"] { color: var(--ink-2); font-size: var(--fs-3); }
.s-footer-links [aria-current="page"] { color: var(--ink); font-weight: var(--fw-semi); }
.s-footer-note { flex-basis: 100%; }
@media (hover: hover) { .s-footer-links a:hover { color: var(--ink); } }

/* ---------- layers on a page ---------- */

.bk-toast { max-width: calc(100vw - var(--s8)); width: auto; }
.bk-toast .bk-btn { color: var(--toast-ink); }
@media (hover: hover) { .bk-toast .bk-btn:hover { background: transparent; color: var(--toast-ink); } }
.s-cmd .bk-menu-item { text-decoration: none; }

/* ---------- catalogue ---------- */

.s-cat > * + * { margin-block-start: var(--stack-3); }
.s-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--cat-cell)), 1fr)); gap: var(--s4); }
.s-cat-cell { align-self: stretch; display: flex; flex-direction: column; gap: var(--s2); min-width: 0; margin: 0; }
.s-cat-cell > figcaption { font-size: var(--fs-4); color: var(--ink); text-wrap: pretty; }
.s-cat-demo { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); min-width: 0; padding: var(--s4); border: var(--hair) solid var(--line); border-radius: var(--r-card); background: var(--surface-card); }
.s-cat-demo > * { min-width: 0; max-width: 100%; }
.s-cat-demo .s-wrap, .s-phone .s-wrap { padding-inline: var(--s4); }
.s-cat-demo .s-footer, .s-phone .s-footer { padding-block: var(--s4); border-block-start: 0; }
.s-cat-demo.is-stack { flex-direction: column; align-items: stretch; }
.s-cat-cell[data-top] { align-self: start; }
.s-cat-wide { grid-column: 1 / -1; }
.s-phone { width: var(--demo-phone-w); max-width: 100%; border: var(--hair) solid var(--line-2); border-radius: var(--frame-r); background: var(--surface-card); overflow: hidden; }
.s-phone > * + * { margin-block-start: var(--s4); }
.s-phone > .s-pad { padding: var(--s4); }

.s-swatch { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; font-size: var(--fs-2); }
.s-swatch-chip { height: var(--swatch-h); border: var(--hair) solid var(--line-2); border-radius: var(--r-1); background: var(--swatch); }
.s-swatch code { font-size: var(--fs-2); overflow-wrap: anywhere; }
.s-swatch span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.s-grid-sw { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--tile-min)), 1fr)); gap: var(--s4); }

.s-type-row { display: grid; gap: var(--s1); padding-block: var(--s3); border-block-end: var(--hair) solid var(--line); }
.s-type-row > code { font-size: var(--fs-2); color: var(--ink-2); }
.s-type-sample { overflow-wrap: anywhere; }
.s-type-meta { display: block; margin-block-start: var(--s1); font-variant-numeric: tabular-nums; }

.s-space-row { display: grid; grid-template-columns: var(--label-w) minmax(0, 1fr); align-items: center; gap: var(--s3); padding-block: var(--s1); }
.s-space-row code { font-size: var(--fs-2); }
.s-space-bar { display: block; height: var(--s4); border-radius: var(--r-1); background: var(--sky); }
.s-radii { display: flex; flex-wrap: wrap; gap: var(--s4); }
.s-radius { display: flex; flex-direction: column; gap: var(--s2); font-size: var(--fs-2); }
.s-radius > i { display: block; width: var(--demo-box); height: var(--demo-box); border: var(--hair) solid var(--ink-3); background: var(--surface-fill); }
.s-motion-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--fs-2); }
.s-motion-row > div { display: flex; flex-direction: column; }
.s-motion-row span { color: var(--ink-2); }

/* ---------- form fields ---------- */

.s-field { display: grid; gap: var(--s1); min-width: 0; }
.s-label { font-size: var(--fs-3); font-weight: var(--fw-med); color: var(--ink); }
.s-field .bk-field { height: var(--tap); padding-inline: var(--s3); background: var(--surface-field); color: var(--ink); }
.s-field .bk-field[data-multiline] { height: auto; align-items: stretch; padding-block: var(--s2); }
.s-field .bk-field :is(input, textarea) { font: inherit; font-size: var(--fs-4); color: var(--ink); }
.s-field .bk-field textarea { flex: 1; min-width: 0; width: 100%; border: 0; background: transparent; outline: none; resize: vertical; line-height: var(--lh-body); }
.s-field[data-invalid] .bk-field { border-color: var(--r); }
.s-field-msg { display: flex; align-items: flex-start; gap: var(--s1); color: var(--r-2); }
.s-field-msg[hidden] { display: none; }

/* ---------- phone: one live board, folded references, a tighter rhythm ---------- */

.s-fold > summary { display: none; }
@media (max-width: 767px) {
  :root { --sec-y: var(--s5); --stack-3: var(--s5); }
  .s-split { gap: var(--s4); }
  /* the hero is the one live board; the section frames keep their label and a link to open the board on its own */
  .s-frame[data-height="section"] .s-frame-iframe, .s-frame[data-height="section"] .s-frame-fail, .s-frame[data-height="section"] .s-frame-skip { display: none; }
  /* with no board inside, a section frame is its label and the link to the board: no empty box and no status dot */
  .s-frame[data-height="section"] { border: 0; border-radius: 0; background: none; }
  .s-frame[data-height="section"] .s-frame-bar { flex-direction: column; align-items: flex-start; gap: var(--s2); min-height: 0; padding: 0; border-block-end: 0; background: none; }
  .s-frame[data-height="section"] .bk-live { height: auto; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink); font-size: var(--fs-3); line-height: var(--lh-body); }
  .s-frame[data-height="section"] .bk-live .bk-dot { display: none; }
  .s-frame[data-height="section"] .bk-live > span { white-space: normal; overflow: visible; text-wrap: pretty; }
  .s-frame[data-height="section"] .s-frame-actions .bk-btn { margin-inline-start: calc(-1 * var(--s2)); white-space: nowrap; }
  .s-way { padding: 0; border: 0; background: none; }
  .s-fold > summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--tap); cursor: pointer; list-style: none;
    border-block: var(--hair) solid var(--line); font-weight: var(--fw-med); color: var(--ink);
  }
  .s-fold > summary::-webkit-details-marker { display: none; }
  .s-fold > summary::after { content: "Show"; font-weight: var(--fw-reg); color: var(--ink-2); font-size: var(--fs-3); }
  .s-fold[open] > summary::after { content: "Hide"; }
  .s-fold[open] > summary { margin-block-end: var(--s4); }
}

/* ---------- 768px and up ---------- */

@media (min-width: 768px) {
  .s-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-list-row { grid-template-columns: minmax(var(--label-w), 1fr) 2fr; gap: var(--s5); }
  .s-space-row { grid-template-columns: var(--label-w) minmax(0, 1fr); }
  .s-type-row { grid-template-columns: var(--label-w) minmax(0, 1fr); align-items: baseline; gap: var(--s5); }
}

@media (min-width: 1024px) {
  .s-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s-split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8); }
  .s-twice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- touch and motion preferences ---------- */

@media (pointer: coarse) {
  body.s-page .bk-btn:not([data-icon-only]), body.s-page .bk-btn[data-size="sm"]:not([data-icon-only]), .bk-views > button { min-height: var(--tap); }
  body.s-page .bk-btn[data-icon-only], body.s-page .bk-btn[data-size="sm"][data-icon-only] { width: var(--tap); min-height: var(--tap); }
  .s-nav-link, .s-footer-links a { display: inline-flex; align-items: center; min-height: var(--tap); }
  .bk-menu-item { min-height: var(--tap); }
  .s-wordmark, .s-skip { min-height: var(--tap); }
  .s-skip { display: inline-flex; align-items: center; }
  .bk-toast .bk-toast-act { min-height: var(--tap); min-width: var(--tap); }
}

@media (prefers-reduced-motion: reduce) {
  .s-skip { transition: none; }
}

/* ---------- brand guide page: the mark stage, construction drawing, grounds, downloads, type, voice and motion samples ---------- */

/* the mark stage: the large mark and the button that plays its move */
.b-stage { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--s6); padding: var(--s6); border: var(--hair) solid var(--line); border-radius: var(--frame-r); background: var(--surface-card); min-width: 0; }
.b-stage .s-mark { width: calc(var(--mark-xl) * 2); height: calc(var(--mark-xl) * 2); max-width: 100%; align-self: center; margin-block: auto; }
.s-wrap > .b-sub { margin-block-start: var(--stack-3); }
.b-table { width: 100%; border-collapse: collapse; font-size: var(--fs-3); font-variant-numeric: tabular-nums; }
.b-table th, .b-table td { padding: var(--s3) var(--s4) var(--s3) 0; border-block-end: var(--hair) solid var(--line); text-align: start; vertical-align: top; }
.b-table thead th { color: var(--ink-2); font-weight: var(--fw-semi); border-block-start: var(--hair) solid var(--line); }
.b-table tbody th { font-weight: var(--fw-semi); }
.s-wrap > .s-split + .s-list { margin-block-start: var(--stack-3); }
.b-grid-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--cat-cell) * 1.5)), 1fr)); }
.b-stack { display: grid; gap: var(--s5); align-content: start; min-width: 0; }

/* drawings: an svg with labels laid over it at percentages of its own box */
.b-draw { position: relative; margin: 0; }
.b-draw > svg { display: block; width: 100%; height: auto; overflow: visible; }
.b-draw > figcaption { margin-block-start: var(--s3); font-size: var(--fs-4); color: var(--ink); text-wrap: pretty; }
.b-box { position: relative; }
/* Labels hung off a drawing's edge sit in this padding, so the drawing scales inside it and no label is cut by the screen edge. */
.b-box-pad { padding-inline: var(--s6) var(--s8); }
.b-lab[data-align="start"] { transform: translate(0, -50%); }
.b-lab[data-align="end"] { transform: translate(-100%, -50%); }
.b-lab { position: absolute; inset-inline-start: calc(var(--x) * 1%); inset-block-start: calc(var(--y) * 1%); transform: translate(-50%, -50%); padding-inline: var(--s1); background: var(--surface-page); color: var(--ink); font: var(--fw-reg) var(--fs-2) / 1 var(--mono); white-space: nowrap; }
.b-gl, .b-gl4, .b-frame, .b-bound, .b-clear, .b-dim, .b-guide, .b-strike { fill: none; vector-effect: non-scaling-stroke; stroke-width: var(--hair); }
.b-gl { stroke: var(--line); }
.b-gl4 { stroke: var(--line-2); }
.b-frame { stroke: var(--ink-3); }
.b-bound { stroke: var(--sky-2); }
.b-clear { stroke: var(--ink-3); }
.b-dim { stroke: var(--ink-2); }
.b-guide { stroke: var(--sky-2); }
.b-strike { stroke: var(--ink-3); }
.b-wm-text { font-family: var(--font); fill: var(--ink); }
.b-mark { color: var(--mark-ink); }
.b-ex .b-recolour { color: var(--v); }
.b-ex { display: block; width: var(--mark-xl); height: var(--mark-xl); overflow: visible; }
.b-ex .b-halo { fill: none; stroke: var(--sky); opacity: var(--o-loop); }
.b-ex .b-ramp { fill: var(--surface-page); }
.b-ex .b-tile { fill: var(--surface-fill); stroke: var(--line-2); stroke-width: var(--hair); }
.s-cat-demo.b-demo { justify-content: flex-start; }
.b-nope { display: flex; align-items: flex-start; gap: var(--s2); }
.b-nope > .bk-icon { flex: none; margin-block-start: var(--s0); color: var(--ink-2); }

/* the two grounds a mark or lockup is shown on: the page's own ink and background, swapped in the dark theme; text and drawings inside take the ground's colour */
.b-ground { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s6); padding: var(--s6); border: var(--hair) solid var(--line); border-radius: var(--r-card); background: var(--surface-card); color: var(--ink); min-width: 0; }
.b-ground[data-ground="dark"] { background: var(--ink); color: var(--bg); }
.b-flip .b-ground { background: var(--ink); color: var(--bg); }
.b-flip .b-ground[data-ground="dark"] { background: var(--surface-page); color: var(--ink); }
.b-ground svg, .b-ground img { display: block; flex: none; max-width: 100%; }
.b-size { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); }
.b-size > span { font: var(--fw-reg) var(--fs-2) / 1 var(--mono); }

/* downloads */
.b-files > * + * { margin-block-start: var(--stack-3); }
.b-file-list { list-style: none; margin: var(--s3) 0 0; padding: 0; border-block-start: var(--hair) solid var(--line); }
.b-file { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2) var(--s4); align-items: center; padding-block: var(--s4); border-block-end: var(--hair) solid var(--line); }
.b-file > .b-thumb { grid-row: span 2; }
.b-file > div { min-width: 0; }
.b-file code { font-size: var(--fs-3); font-weight: var(--fw-semi); overflow-wrap: anywhere; }
.b-file p { margin: var(--s1) 0 0; color: var(--ink-2); font-size: var(--fs-3); text-wrap: pretty; }
.b-file > .b-get { grid-column: 2; justify-self: start; }
.b-thumb { color: var(--ink); display: grid; place-items: center; width: calc(var(--demo-box) * 2); height: var(--demo-box); border: var(--hair) solid var(--line); border-radius: var(--r-1); background: var(--surface-card); overflow: hidden; }
.b-thumb[data-ground="dark"] { background: var(--ink); color: var(--bg); }
.b-flip .b-thumb[data-ground="light"] { background: var(--ink); color: var(--bg); }
.b-flip .b-thumb[data-ground="dark"] { background: var(--surface-page); color: var(--ink); }
.b-thumb[data-ground="none"] { background: var(--surface-fill); }
.b-thumb img { display: block; max-width: calc(100% - var(--s4)); max-height: calc(100% - var(--s4)); }

/* type */
.b-type { display: grid; gap: 0; border-block-start: var(--hair) solid var(--line); }
.b-type-row { display: grid; gap: var(--s3); padding-block: var(--s5); border-block-end: var(--hair) solid var(--line); min-width: 0; }
.b-type-row > * { min-width: 0; }
.b-type-use { margin: 0; font-size: var(--fs-3); font-weight: var(--fw-semi); }
.b-sample { overflow-wrap: anywhere; text-wrap: pretty; margin: 0; }
.b-sample + .b-sample { margin-block-start: var(--s2); }
.b-t-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--track-display); font-weight: var(--fw-bold); text-wrap: balance; }
.b-t-section { font-size: var(--fs-section); line-height: var(--lh-section); letter-spacing: var(--track-section); font-weight: var(--fw-bold); text-wrap: balance; }
.b-t-lede { font-size: var(--fs-5); line-height: var(--lh-body); letter-spacing: var(--track-body); font-weight: var(--fw-reg); }
.b-t-body { font-size: var(--fs-4); line-height: var(--lh-body); letter-spacing: var(--track-body); font-weight: var(--fw-reg); }
.b-t-small { font-size: var(--fs-3); line-height: var(--lh-body); font-weight: var(--fw-reg); }
.b-t-ui-s { font-size: var(--fs-2); line-height: var(--lh-body); font-weight: var(--fw-reg); }
.b-t-ui-l { font-size: var(--fs-6); line-height: var(--lh-tight); font-weight: var(--fw-semi); }
.b-t-mono { font-family: var(--mono); font-size: var(--fs-4); }

/* voice */
.b-voice { width: 100%; border-collapse: collapse; }
.b-voice th, .b-voice td { width: 50%; }
.b-voice th { text-align: start; font-size: var(--fs-3); font-weight: var(--fw-semi); color: var(--ink-2); padding: 0 var(--s5) var(--s3) 0; }
.b-voice td { vertical-align: top; padding: var(--s4) var(--s5) var(--s4) 0; border-block-start: var(--hair) solid var(--line); text-wrap: pretty; }
.b-voice td:last-child { color: var(--ink-2); padding-inline-end: 0; }
.b-voice tbody tr:last-child td { border-block-end: var(--hair) solid var(--line); }
.b-rules { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--cat-cell)), 1fr)); gap: 0 var(--s6); }
.s-wrap > .b-rules { margin-block-start: var(--s3); }
.b-rules li { padding-block: var(--s3); border-block-start: var(--hair) solid var(--line); text-wrap: pretty; }
.b-sub { margin-block-start: var(--stack-3); }

/* colour */

/* motion: each sample plays once, on its own duration and easing */
.b-runs { display: grid; gap: var(--s5); }
.b-run { display: grid; gap: var(--s3); min-width: 0; }
.b-track { display: grid; grid-template-columns: repeat(4, minmax(0, var(--demo-box))); gap: var(--s2); }
.b-slot { grid-row: 1; grid-column: 1; height: var(--demo-box); border: var(--hair) solid var(--line-2); border-radius: var(--r-1); }
.b-chip { grid-row: 1; height: var(--demo-box); border-radius: var(--r-1); background: var(--sky); }
.b-chip-glide { grid-column: 4; }
.b-chip-card, .b-chip-fast { grid-column: 1; }
.b-run-meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); align-items: baseline; }
.b-run-meta code { font-size: var(--fs-3); font-weight: var(--fw-semi); }
.b-run-meta span { color: var(--ink-2); font-size: var(--fs-3); font-variant-numeric: tabular-nums; }
@keyframes b-slide { from { transform: translateX(calc(-3 * (100% + var(--s2)))); } to { transform: none; } }
@keyframes b-settle { from { opacity: var(--o-dim); transform: scale(var(--scale-drop)); } to { opacity: 1; transform: none; } }
.is-playing .b-chip-glide { animation: b-slide var(--dur-glide) var(--ease-out) both; }
.is-playing .b-chip-card { animation: b-settle var(--dur-card) var(--ease-out) both; }
.is-playing .b-chip-fast { animation: s-fade var(--dur-fast) var(--ease-out) both; }

/* space and shape */

@media (min-width: 768px) {
  .b-file { grid-template-columns: auto minmax(0, 1fr) auto; }
  .b-file > .b-thumb { grid-row: auto; }
  .b-file > .b-get { grid-column: auto; justify-self: end; }
}
@media (max-width: 767px) {
  .b-voice thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .b-voice, .b-voice tbody, .b-voice tr, .b-voice td { display: block; }
  .b-voice td, .b-voice td:last-child { padding: var(--s3) 0; border: 0; }
  .b-voice tr { padding-block: var(--s2); border-block-start: var(--hair) solid var(--line); }
  .b-voice tbody tr:last-child { border-block-end: var(--hair) solid var(--line); }
  .b-table thead { position: absolute; width: var(--hair); height: var(--hair); overflow: hidden; clip-path: inset(50%); }
  .b-table, .b-table tbody, .b-table tr, .b-table th, .b-table td { display: block; }
  .b-table tr { padding-block: var(--s2); border-block-end: var(--hair) solid var(--line); }
  .b-table th, .b-table td { padding: var(--s1) 0; border: 0; }
  .b-table td::before { content: attr(data-label) ": "; color: var(--ink-2); }
  .b-voice td::before { content: attr(data-label); display: block; font-size: var(--fs-2); font-weight: var(--fw-semi); color: var(--ink-2); margin-block-end: var(--s1); }
}
@media (min-width: 1024px) {
  .b-stage { min-height: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .is-playing .b-chip-glide, .is-playing .b-chip-card { animation: s-fade var(--dur-card) var(--ease-std) both; }
}