/* The concept builds' own brands: one stylesheet for all 19, driven by each brand's tokens (content/demos/<slug>.json
   brand.tokens, written onto the .bs / .bs-app root by build/brand.mjs as --b-* custom properties).
   A brand keeps its name, voice, colours, typeface and illustration. It is rebuilt clean: no pills, chips, uppercase
   labels, bordered cards, divider rules or tiny widgets; corners capped at 5px; container queries, so the same markup
   is the brand's full-width site, the framed site on its demo page and a real phone layout.
   FrameMatic's palette and Archivo never appear in here, and these colours never appear in FrameMatic's chrome. */

.bs, .bs-app {
  --b-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--b-ink); background: var(--b-bg); font-family: var(--b-sans); font-size: 16px; line-height: 1.5; font-stretch: 100%; text-align: left;
  -webkit-font-smoothing: antialiased; letter-spacing: 0;
}
.bs *, .bs-app *, .bs *::before, .bs *::after, .bs-app *::before, .bs-app *::after { box-sizing: border-box; }
:where(.bs, .bs-app) :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote) { margin: 0; }
:where(.bs, .bs-app) :where(ul, ol) { padding: 0; list-style: none; }
:where(.bs, .bs-app) a { color: inherit; }
:where(.bs, .bs-app) img { display: block; max-width: 100%; height: auto; }
.bs-word { font-family: var(--b-font); font-weight: 700; font-size: 23px; line-height: 1.1; text-decoration: none; }
.bs-btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; flex: none;
  background: var(--b-btn); color: var(--b-btn-ink); font-family: var(--b-sans); font-weight: 650; font-size: 16px; line-height: 1;
  padding: 16px 22px; border-radius: var(--b-radius); border: 0; text-decoration: none; cursor: pointer;
}
.bs-btn--s { padding: 12px 16px; font-size: 14.5px; }
.bs-btn, .bs-slot, .bs-tabs button, .bs-open, .bs-back { transition: transform var(--dur-press) var(--ease-out); }
.bs-btn:active, .bs-slot:active, .bs-tabs button:active, .bs-open:active, .bs-back:active { transform: scale(var(--press)); }
/* colour changes wipe in with a mask instead of fading: a layer of the new colour, clipped, opens left to right */
.bs-btn, .bs-slot { position: relative; isolation: isolate; overflow: hidden; }
.bs-btn::before, .bs-slot::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: inset(0 100% 0 0); transition: clip-path var(--dur-move) var(--ease-out); }
.bs-btn::before { background: var(--b-ink); }
.bs-slot::before { background: var(--b-btn); }
.bs-btn.is-pressed::before, .bs-slot[aria-checked="true"]::before { clip-path: inset(0); }
.bs-btn.is-pressed { color: var(--b-bg); transition: transform var(--dur-press) var(--ease-out), color 0s linear calc(var(--dur-move) / 3); }
.bs-btn:focus-visible, .bs-app button:focus-visible { outline: 2px solid var(--b-ink); outline-offset: 2px; }

/* ---------- the website ---------- */
.bs { container-type: inline-size; }
.bs-top { display: flex; align-items: center; gap: 28px; padding: 20px clamp(20px, 4cqi, 52px); }
.bs-nav { display: flex; gap: 26px; font-size: 15.5px; margin-left: auto; }
.bs-top__act { display: flex; align-items: center; gap: 20px; }
.bs-call { font-weight: 650; font-size: 15.5px; text-decoration: none; white-space: nowrap; }
/* nav labels never break mid-word: they hold one line, and the nav goes before it can crowd the bar */
.bs-nav { min-width: 0; overflow: hidden; }
.bs-nav li, .bs-word { white-space: nowrap; }
@container (max-width: 960px) { .bs-nav { display: none; } .bs-top__act { margin-left: auto; } }
.bs-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5cqi, 72px); align-items: center; padding: clamp(28px, 6cqi, 84px) clamp(20px, 4cqi, 52px) clamp(40px, 7cqi, 96px); }
.bs-h1 { font-family: var(--b-font); font-weight: 700; font-size: clamp(34px, 5.1cqi, 64px); line-height: 1.04; text-wrap: balance; }
.bs-sub { margin-top: 20px; font-size: clamp(16.5px, 1.6cqi, 19px); line-height: 1.55; color: var(--b-muted); max-width: 34em; }
.bs-ask { display: flex; gap: 10px; margin-top: 28px; max-width: 34em; }
.bs-field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; padding: 0 16px; background: var(--b-surface); color: var(--b-muted); border-bottom: 2px solid var(--b-ink); white-space: nowrap; overflow: hidden; }
.bs-micro { margin-top: 14px; font-size: 14.5px; color: var(--b-muted); }
.bs-micro a { color: var(--b-ink); font-weight: 650; text-decoration: none; white-space: nowrap; }
.bs-art img { width: 100%; aspect-ratio: 880 / 657; object-fit: cover; border-radius: min(var(--b-radius), 4px); }
.bs-art figcaption { margin-top: 12px; font-size: 14.5px; color: var(--b-muted); }
.bs-h2 { font-family: var(--b-font); font-weight: 700; font-size: clamp(26px, 3cqi, 38px); line-height: 1.1; text-wrap: balance; }
.bs-svc { padding: clamp(40px, 6cqi, 80px) clamp(20px, 4cqi, 52px); background: var(--b-surface); }
.bs-svc__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px clamp(20px, 3cqi, 40px); margin-top: clamp(24px, 3cqi, 40px); }
.bs-svc__b { display: block; font-family: var(--b-font); font-weight: 700; font-size: clamp(19px, 1.9cqi, 23px); line-height: 1.2; }
.bs-svc__t { display: block; margin-top: 6px; color: var(--b-muted); }
.bs-say { padding: clamp(40px, 6cqi, 80px) clamp(20px, 4cqi, 52px); }
.bs-say__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px clamp(20px, 3cqi, 44px); }
.bs-say blockquote { font-family: var(--b-font); font-size: clamp(21px, 2.3cqi, 28px); line-height: 1.25; text-wrap: balance; }
.bs-say blockquote::before { content: "\201C"; } .bs-say blockquote::after { content: "\201D"; }
.bs-say__list span { display: block; margin-top: 12px; color: var(--b-muted); font-size: 15px; }
.bs-end { background: var(--b-end); color: var(--b-end-ink); padding: clamp(40px, 6cqi, 76px) clamp(20px, 4cqi, 52px) 28px; }
.bs-end__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.bs-end__h { font-family: var(--b-font); font-weight: 700; font-size: clamp(28px, 3.6cqi, 44px); line-height: 1.1; text-wrap: balance; max-width: 20em; }
.bs-towns { margin-top: clamp(28px, 4cqi, 48px); font-size: 15.5px; max-width: 60em; }
.bs-meta { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-top: 10px; font-size: 14px; color: var(--b-end-muted); }
@container (max-width: 860px) {
  .bs-nav { display: none; }
  .bs-top__act { margin-left: auto; }
  .bs-hero { grid-template-columns: minmax(0, 1fr); }
  .bs-svc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-say__list { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 520px) {
  .bs-top { padding-block: 14px; gap: 12px; }
  .bs-word { font-size: 21px; }
  .bs-top__act .bs-btn { display: none; }
  .bs-call { font-size: 15px; }
  .bs-ask { flex-direction: column; }
  .bs-field { min-height: 50px; }
  .bs-svc__list { grid-template-columns: minmax(0, 1fr); }
}
@container (max-width: 340px) { .bs-call { display: none; } }

/* ---------- the software: the screens on the demo page ----------
   One large, legible screen at a time: the brand's bar, a head, three to six rows and what came out. One surface per
   brand (the screen) plus its ground (a message as written); no zebra rows, no tint ladders, no rules, no tiles. */
.bs-app { background: var(--b-surface); container-type: inline-size; }
.bs-app__bar { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 4px 18px; padding: 14px clamp(18px, 5cqi, 36px); background: var(--b-bar); color: var(--b-bar-ink); font-size: 15px; }
.bs-app__bar .bs-word { font-size: 17px; color: var(--b-bar-ink); }
.bs-app__time { margin-left: auto; white-space: nowrap; }
/* the brand and the time always share the bar's one line: a long place label shortens, and goes on a narrow screen */
.bs-app__bar > span:not(.bs-word):not(.bs-app__time) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 380px) { .bs-app__bar > span:not(.bs-word):not(.bs-app__time) { display: none; } }
.bs-app__body { padding: clamp(24px, 5cqi, 36px); }
.bs-phone { max-width: 400px; }

/* the head: a heading, a status on its right, at most one line under it */
.bs-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: baseline; }
.bs-h3 { font-family: var(--b-font); font-weight: 700; font-size: clamp(23px, 4.6cqi, 30px); line-height: 1.15; text-wrap: balance; }
.bs-sub { grid-column: 1 / -1; margin-top: 8px; color: var(--b-muted); font-size: 16.5px; line-height: 1.45; }
.bs-status { grid-column: 2; grid-row: 1; max-width: 16ch; color: var(--b-accent-text); font-weight: 650; font-size: 16px; text-align: right; transform-origin: 100% 50%; }
@container (max-width: 460px) {
  .bs-head { grid-template-columns: minmax(0, 1fr); }
  .bs-status { grid-column: 1; grid-row: auto; order: 3; max-width: none; margin-top: 8px; text-align: left; transform-origin: 0 50%; }
  .bs-sub { order: 2; }
}

/* rows: a lead (a time), the main line with its detail, an end (a status). The rows share their columns (subgrid). */
.bs-list { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(14px, 3cqi, 28px); margin-top: clamp(16px, 3cqi, 24px); }
.bs-list.has-lead { grid-template-columns: fit-content(8.5em) minmax(0, 1fr) auto; }
.bs-li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; position: relative; isolation: isolate; padding-block: 12px; }
@supports not (grid-template-columns: subgrid) { .bs-li { grid-template-columns: inherit; column-gap: inherit; } }
.bs-li + .bs-li { margin-top: 2px; }
.bs-li__lead { grid-column: 1; padding-top: 1px; color: var(--b-muted); font-variant-numeric: tabular-nums; font-size: 16px; }
.bs-li__main { grid-column: 1; min-width: 0; }
.has-lead > .bs-li__main, .has-lead > .bs-li > .bs-li__main { grid-column: 2; }
.bs-li__end { grid-column: -2; justify-self: end; max-width: 24ch; padding-top: 2px; color: var(--b-muted); font-size: 15.5px; text-align: right; }
.bs-li__t { display: block; font-size: 17.5px; font-weight: 650; line-height: 1.35; }
.bs-li__d { display: block; margin-top: 3px; color: var(--b-muted); font-size: 15.5px; line-height: 1.45; }
.bs-li.is-quiet .bs-li__t { font-weight: 400; font-size: 16px; color: var(--b-muted); }
.bs-li.is-miss .bs-li__end { color: var(--b-accent-text); font-weight: 650; }
.bs-li.is-wait .bs-li__t { font-weight: 400; }
/* the rule or row that fits: its colour, bled a little past the text, wipes in with a mask */
.bs-li.is-hot { color: var(--b-hot-ink); }
.bs-li.is-hot::before { content: ""; position: absolute; inset: 0 -12px; z-index: -1; background: var(--b-hot); border-radius: min(var(--b-radius), 4px); clip-path: inset(0); transition: clip-path var(--dur-move) var(--ease-out); }
.bs-li.is-hot .bs-li__lead, .bs-li.is-hot .bs-li__d, .bs-li.is-hot .bs-li__end { color: var(--b-hot-ink); }
.bs-li.is-hot .bs-li__end { font-weight: 650; }
.bs-li.is-hot + .bs-li, .bs-li + .bs-li.is-hot { margin-top: 8px; }
/* a wide screen lays each row across its width: the main line and its detail side by side */
@container (min-width: 900px) {
  .bs-li__main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: clamp(14px, 3cqi, 28px); align-items: baseline; }
  .bs-li__d { margin-top: 0; }
}
@container (max-width: 520px) {
  .bs-list { grid-template-columns: minmax(0, 1fr); }
  .bs-list.has-lead { grid-template-columns: fit-content(6.4em) minmax(0, 1fr); }
  .bs-li__end { grid-column: -2; justify-self: start; max-width: none; margin-top: 3px; padding-top: 0; text-align: left; }
}

/* a state that changes in place: the old and the new overlap as they swap (rule 16) */
.bs-sw { display: inline-grid; }
.bs-sw > * { grid-area: 1 / 1; }
.bs-sw > :first-child { opacity: 0; }

/* a record, a document, a reading: keys and what was written beside them */
.bs-kv { margin-top: clamp(14px, 3cqi, 22px); }
.bs-kv div { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 2px 18px; padding-block: 9px; }
.bs-kv dt { color: var(--b-muted); font-size: 15.5px; }
.bs-kv dd { margin: 0; font-size: 17px; line-height: 1.4; }
.bs-kv .is-from dd { color: var(--b-accent-text); font-weight: 650; }
@container (max-width: 420px) { .bs-kv div { grid-template-columns: minmax(0, 1fr); } }

/* what came out */
.bs-out { margin-top: clamp(16px, 3cqi, 24px); font-family: var(--b-font); font-weight: 700; font-size: clamp(19px, 3.4cqi, 22px); line-height: 1.25; text-wrap: balance; transform-origin: 0 50%; }
.bs-out span { display: block; margin-top: 6px; font-family: var(--b-sans); font-weight: 400; font-size: 15.5px; line-height: 1.45; color: var(--b-muted); text-wrap: pretty; }
.bs-foot { font-size: 15px; color: var(--b-muted); }
.bs-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: clamp(18px, 3.4cqi, 26px); }

/* a form, on a phone */
.bs-fields { margin-top: 22px; }
.bs-fields div + div { margin-top: 18px; }
.bs-fields dt { font-size: 14.5px; color: var(--b-muted); }
.bs-fields dd { margin: 4px 0 0; padding: 10px 0 9px; font-size: 18px; border-bottom: 2px solid var(--b-ink); }
.bs-btn--full { width: 100%; margin-top: 28px; padding-block: 18px; font-size: 17px; }

/* a message, as the customer wrote it (on the brand's ground) */
.bs-msg { margin-top: 18px; padding: 18px 20px; background: var(--b-bg); border-radius: var(--b-radius); font-size: 17px; line-height: 1.5; }
.bs-msg p + p { margin-top: .6em; }

/* what arrives on a desk from the phone */
.bs-arrive, .bs-arrive > * { display: block; }
.bs-arrive { margin-top: clamp(14px, 3cqi, 20px); }
.bs-arrive:first-child { margin-top: 0; }
/* in flight it is a solid chip of the desk's surface, so it covers what it passes instead of printing over it; the
   chip is on the inner box, which carries the rise, and needs no space of its own */
.bs-arrive.is-flying { position: relative; z-index: 3; }
.bs-arrive.is-flying > div { position: relative; isolation: isolate; }
.bs-arrive.is-flying > div::before { content: ""; position: absolute; inset: -10px -14px; z-index: -1; background: var(--b-surface); border-radius: var(--b-radius); }
.bs-in { font-family: var(--b-font); font-weight: 700; font-size: clamp(20px, 3.8cqi, 24px); line-height: 1.2; text-wrap: balance; }
/* a licence plate: the brand's ink, the region over the number */
.bs-plate { display: inline-grid; justify-items: center; gap: 2px; padding: 9px 26px 11px; background: var(--b-ink); color: var(--b-bg); border-radius: min(var(--b-radius), 5px); }
.bs-plate__r { font-size: 13.5px; line-height: 1.2; }
.bs-plate__v { font-family: var(--b-font); font-weight: 700; font-size: clamp(28px, 6.4cqi, 36px); line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* booking */
.bs-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.bs-slot { padding: 18px 12px; background: var(--b-bg); color: var(--b-ink); border: 0; border-radius: var(--b-radius); font-size: 18px; font-weight: 650; cursor: pointer; }
.bs-slot:hover { text-decoration: underline; text-underline-offset: .3em; }
.bs-slot[aria-checked="true"] { color: var(--b-btn-ink); transition: transform var(--dur-press) var(--ease-out), color 0s linear calc(var(--dur-move) / 3); }
.bs-held { margin-top: 18px; min-height: 3em; font-size: 16.5px; transform-origin: 0 50%; }

/* ---------- the play states (assets/fm.js) ----------
   Without .is-armed a screen shows its finished state. Armed, a row waits in the muted colour with its old state
   showing, and is read in turn (14 x the stagger); a written row is not there until it is read; the row that fits
   wipes to the fired colour as it is read; statuses swap at the end; what came out rises in last. */
.bs-li, .bs-li__lead, .bs-li__d, .bs-li__end, .bs-sw > *, .bs-kv dd, .bs-act, .bs-out, .bs-arrive {
  transition: opacity var(--dur-in) var(--ease-out), transform var(--dur-in) var(--ease-out);
}
.is-armed .bs-li[data-step]:not(.is-seen), .is-armed .bs-li[data-step]:not(.is-seen) > *,
.is-armed .bs-li[data-step]:not(.is-seen) .bs-li__d, .is-armed .bs-li[data-step]:not(.is-seen) .bs-li__end { color: var(--b-muted); }
.is-armed .bs-li.is-hot[data-step]:not(.is-seen)::before { clip-path: inset(0 100% 0 0); }
.is-armed .bs-li.is-hot.is-seen, .is-armed .bs-li.is-hot.is-seen > *, .is-armed .bs-li.is-hot.is-seen .bs-li__d { transition: color 0s linear calc(var(--dur-move) / 3); }
.is-armed [data-step]:not(.is-seen) .bs-sw > :first-child, .is-armed [data-swap]:not(.is-seen) .bs-sw > :first-child { opacity: 1; }
.is-armed [data-step]:not(.is-seen) .bs-sw > :last-child, .is-armed [data-swap]:not(.is-seen) .bs-sw > :last-child { opacity: 0; transform: translateY(6px); }
.is-armed .bs-kv [data-step]:not(.is-seen) dd { opacity: 0; transform: translateX(-8px); }
.is-armed [data-step="in"]:not(.is-seen), .is-armed [data-fire]:not(.is-seen) { opacity: 0; transform: translateY(8px); }
.is-armed [data-arrive]:not(.is-seen) { transform: none; }
/* a replay sets its start state at once: nothing wipes or fades backwards */
.is-reset *, .is-reset *::before, .is-reset *::after { transition-duration: 0s !important; transition-delay: 0s !important; }

/* the morning board */
.bs-tabs { position: relative; display: flex; gap: 26px; padding: 0 clamp(18px, 4cqi, 36px); background: var(--b-surface); overflow-x: auto; scrollbar-width: none; }
.bs-tabs button { flex: none; background: none; border: 0; padding: 18px 0 16px; font-size: 16.5px; color: var(--b-muted); cursor: pointer; }
.bs-tabs button[aria-selected="true"] { color: var(--b-ink); font-weight: 650; }
.bs-tabs__ind { position: absolute; left: 0; bottom: 0; width: 1px; height: 3px; background: var(--b-accent); transform-origin: 0 0; pointer-events: none; }
.no-js .bs-tabs__ind { display: none; }
.bs-panels { display: grid; }
.bs-panel { grid-area: 1 / 1; min-width: 0; background: var(--b-surface); padding: 4px clamp(18px, 4cqi, 36px) clamp(18px, 4cqi, 32px); }
.js .bs-panel { opacity: 0; visibility: hidden; transition: opacity 0s linear var(--dur-cut), visibility 0s linear var(--dur-cut); }
.js .bs-panel.is-on { opacity: 1; visibility: visible; z-index: 1; transition: opacity var(--dur-cut) var(--ease-in-out); }
.bs-panel .bs-list, .bs-panel .bs-kv { margin-top: 10px; }
@container (max-width: 340px) {
  .bs-tabs { gap: 14px; padding-inline: 16px; }
  .bs-tabs button { font-size: 14.5px; }
  .bs-panel { padding-inline: 18px; }
}

/* a row that opens into its record (the shared element, rule 20) */
.bs-views { display: grid; }
.bs-views > [data-view], .bs-views > [data-view-home] { grid-area: 1 / 1; min-width: 0; }
.bs-views > .is-off { visibility: hidden; }
.bs-views > .is-front { z-index: 2; }
.bs-open, .bs-back { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; cursor: pointer; }
.bs-back { margin-top: 16px; padding: 10px 0; font-weight: 650; }
/* the record view paints no surface of its own: only its head (the hot row's fill) and its body do, so the board stays
   on screen under the move and its rows fade out under the opening body (rule 16); the row is lifted while its head
   is away, so it never shows twice */
.bs-job { align-self: start; }
.bs-job__body { background: var(--b-surface); }
.bs-views .is-lifted { visibility: hidden; }
.bs-job__head { grid-template-columns: minmax(0, 1fr); column-gap: clamp(14px, 3cqi, 28px); padding: 14px clamp(18px, 5cqi, 36px); }
.bs-job__head.has-lead { grid-template-columns: fit-content(8.5em) minmax(0, 1fr); }
.bs-li.bs-job__head::before { inset: 0; border-radius: 0; }
.bs-job__body .bs-foot { margin-top: 14px; }
.bs-job__body { padding: clamp(18px, 4cqi, 30px) clamp(18px, 5cqi, 36px) clamp(18px, 4cqi, 30px); }