/* Yardage Book: the website's component layer. Built only on tokens.css (the --yb-* roles, type, space, radii, lines, motion), which is a byte-for-byte copy of Striped design/yardage/tokens.css (scripts/explore/sync-shared.py --only tokens). The rules these classes implement are Striped design/yardage/DESIGN-LANGUAGE.md; a section number (§10) points at the paragraph that decides each one. No hex values in this file. The one block of raw numbers below holds the values DESIGN-LANGUAGE.md states but tokens.json does not carry yet; each cites where it comes from, and each is listed as a token gap in the template index so the design lead can move it into tokens.json. */ /* Every value here is a token (tokens.css). The stop-gaps of round 1 (--ybx-*) moved into tokens.json in Yardage round 2 (Striped d4e262d2). */ /* ------------------------------------------------------------- base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--yb-ground); color: var(--yb-text); font: normal 400 var(--yb-type-body-size)/var(--yb-type-body-line) var(--yb-font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, picture { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4, p, dl, dd, ol, ul, figure, blockquote { margin: 0; padding: 0; } ol, ul { list-style: none; } a { color: inherit; } button, input, select { font: inherit; color: inherit; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } /* Focus, §12: always visible, a 2 px text outline with the focus halo outside it (a ground gap, then the halo). */ :focus-visible, .is-focus { outline: var(--yb-focus-outline) solid var(--yb-text); outline-offset: var(--yb-focus-gap); box-shadow: 0 0 0 var(--yb-focus-gap) var(--yb-ground), 0 0 0 var(--yb-focus-halo) var(--yb-focus); } .yb-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .yb-skip { position: absolute; left: var(--yb-space-m); top: calc(-1 * var(--yb-space-x6)); z-index: 50; background: var(--yb-text); color: var(--yb-ground); padding: var(--yb-space-m) var(--yb-space-l); font: normal 600 var(--yb-type-body-strong-size)/1 var(--yb-font-sans); text-decoration: none; border-radius: var(--yb-radius-control); } .yb-skip:focus, .yb-skip.is-shown { top: var(--yb-space-m); } .yb-skip.is-shown { position: static; display: inline-block; } .yb-wrap { width: 100%; max-width: calc(var(--yb-max-width) + 2 * var(--yb-gutter)); margin: 0 auto; padding: 0 var(--yb-gutter); } /* Reading text. The lead's type is tokens.css's .yb-lead; here, its colour and measure. */ .yb-lead { color: var(--yb-text-secondary); max-width: 36rem; } * + .yb-lead { margin-top: var(--yb-space-l); } .yb-prose { max-width: 40rem; } .yb-prose > * + * { margin-top: var(--yb-space-m); } /* A measured value on paper sits on a ruled line (§4): 1.5 text underline, the numeral's width plus 2 either side. */ .yb-ruled { display: inline-block; margin: 0 calc(-1 * var(--yb-space-hair)); padding: 0 var(--yb-space-hair) var(--yb-space-xs); border-bottom: var(--yb-line-ink) solid var(--yb-text); white-space: nowrap; } /* A number with its label above it (§4: labels sit above numbers only). */ .yb-stat { display: grid; gap: var(--yb-space-xs); align-content: start; } .yb-stat .yb-label { white-space: nowrap; } /* ------------------------------------------------------ links (§10) */ /* Text button / text link: Fraunces italic, text colour, 1 underline; hover and press turn the underline accent and 2. */ .yb-link { font: italic 400 var(--yb-type-note-size)/1.3 var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); color: var(--yb-text); text-decoration: underline; text-decoration-thickness: var(--yb-line-thin); text-underline-offset: 0.22em; background: none; border: 0; padding: var(--yb-space-xs) 0; cursor: pointer; display: inline-flex; align-items: baseline; gap: var(--yb-space-xs); min-height: var(--yb-min-target); align-items: center; } .yb-link--large { font-size: var(--yb-type-title3-size); } .yb-link:hover, .yb-link.is-hover, .yb-link:active, .yb-link.is-active { text-decoration-color: var(--yb-accent); text-decoration-thickness: var(--yb-line-heavy); } .yb-link .yb-arrow { font-style: normal; font-family: var(--yb-font-mono); font-size: 0.9em; } /* In running text: the system font, underlined, the same hover. */ .yb-inline-link { text-decoration: underline; text-decoration-thickness: var(--yb-line-thin); text-underline-offset: 0.2em; } .yb-inline-link:hover, .yb-inline-link.is-hover { text-decoration-color: var(--yb-accent); text-decoration-thickness: var(--yb-line-heavy); } /* ---------------------------------------------------- buttons (§10) */ .yb-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--yb-space-s); min-height: var(--yb-button-height); min-width: var(--yb-min-target); padding: 0 var(--yb-space-xl); border-radius: var(--yb-radius-control); font: normal 600 var(--yb-type-body-strong-size)/1.2 var(--yb-font-sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--yb-motion-quick) ease-out, border-color var(--yb-motion-quick) ease-out, color var(--yb-motion-quick) ease-out; } .yb-btn svg { width: 18px; height: 18px; flex: none; } /* Primary: accent fill, onAccent label. At most one per screen. */ .yb-btn--primary { background: var(--yb-accent); color: var(--yb-on-accent); border: 0; } .yb-btn--primary:hover, .yb-btn--primary.is-hover { background: var(--yb-focus); } .yb-btn--primary:active, .yb-btn--primary.is-active { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--yb-on-accent) calc(var(--yb-pressed-overlay) * 100%), transparent); } /* The web's ink primary (§10 Website): allowed on paper where a green button would sit beside another green thing (the trace's impact, a motif's pin), so the viewport keeps one green. */ .yb-btn--ink { background: var(--yb-text); color: var(--yb-ground); border: 0; } .yb-btn--ink:hover, .yb-btn--ink.is-hover { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--yb-ground) calc(var(--yb-primary-ink-hover-overlay) * 100%), transparent); } .yb-btn--ink:active, .yb-btn--ink.is-active { box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--yb-ground) calc(var(--yb-pressed-overlay) * 100%), transparent); } /* Secondary: no fill, 1.5 text border. */ .yb-btn--secondary { background: transparent; color: var(--yb-text); border: var(--yb-line-ink) solid var(--yb-text); } .yb-btn--secondary:hover, .yb-btn--secondary.is-hover { background: var(--yb-ground-alt); } .yb-btn--secondary:active, .yb-btn--secondary.is-active { background: var(--yb-ground-alt); box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--yb-on-accent) calc(var(--yb-pressed-overlay) * 100%), transparent); } /* Destructive: secondary, in flag. */ .yb-btn--destructive { background: transparent; color: var(--yb-flag); border: var(--yb-line-ink) solid var(--yb-flag); } .yb-btn--destructive:hover, .yb-btn--destructive.is-hover { background: var(--yb-ground-alt); } /* Disabled (any kind): groundAlt fill, note label. */ .yb-btn:disabled, .yb-btn.is-disabled, .yb-btn[aria-disabled="true"] { background: var(--yb-ground-alt); color: var(--yb-note); border-color: transparent; cursor: not-allowed; box-shadow: none; } /* Secondary and destructive disabled: a rule border and a note label, no fill (a groundAlt fill reads as a disabled primary; section 10). */ .yb-btn--secondary:disabled, .yb-btn--secondary.is-disabled, .yb-btn--destructive:disabled, .yb-btn--destructive.is-disabled { background: transparent; color: var(--yb-note); border-color: var(--yb-rule); } .yb-btn[aria-busy="true"] { cursor: progress; } /* Icon button: 44 circle, 1.25 ruleStrong ring, glyph in text. */ .yb-icon-btn { width: var(--yb-min-target); height: var(--yb-min-target); flex: none; display: inline-grid; place-items: center; padding: 0; border-radius: var(--yb-radius-round); border: var(--yb-line-pencil) solid var(--yb-rule-strong); background: transparent; color: var(--yb-text); cursor: pointer; transition: border-color var(--yb-motion-quick) ease-out, background-color var(--yb-motion-quick) ease-out; } .yb-icon-btn svg { width: 20px; height: 20px; } .yb-icon-btn:hover, .yb-icon-btn.is-hover { border-color: var(--yb-text); } .yb-icon-btn[aria-pressed="true"] { background: var(--yb-ground-alt); border-color: var(--yb-text); } /* Info: the info ring (tokens.css) in a 44 px button. */ .yb-info-btn { width: var(--yb-min-target); height: var(--yb-min-target); display: inline-grid; place-items: center; background: none; border: 0; padding: 0; cursor: pointer; color: var(--yb-text); border-radius: var(--yb-radius-round); } /* ------------------------------------------------------ the ring */ /* The ring is tokens.css's ONE primitive (.yb-ring, .yb-info-ring): an exact closed capsule, 1.25 px, 4 px clear of the numerals, never tilted or open (section 0 layer 3, review 2026-10-13). A ringed numeral in a stat keeps its label clear of the ring. */ .yb-stat:has(.yb-ring) { gap: var(--yb-space-s); } .yb-proof .yb-ring--accent, .yb-night .yb-ring--accent { border-color: var(--yb-accent); } .yb-num-accent { color: var(--yb-accent); } /* Leaders: a dotted pencil leader ending in a 2 pt dot (§6). */ .yb-leader line, .yb-leader path { stroke: var(--yb-note); stroke-width: var(--yb-line-pencil); stroke-dasharray: var(--yb-dash-leader); stroke-linecap: round; fill: none; } .yb-leader circle { fill: var(--yb-note); } /* ------------------------------------------------------- fields (§10) */ /* A field is a ruled baseline: 1.5 text line, no box. */ .yb-field { display: grid; gap: var(--yb-space-xs); min-width: 0; } .yb-input { width: 100%; min-width: 0; height: var(--yb-button-height); border: 0; border-bottom: var(--yb-line-ink) solid var(--yb-text); border-radius: 0; background: transparent; color: var(--yb-text); padding: 0 var(--yb-space-hair); font: normal 400 var(--yb-type-body-size)/1 var(--yb-font-sans); transition: border-color var(--yb-motion-quick) ease-out, box-shadow var(--yb-motion-quick) ease-out; } .yb-input::placeholder { color: var(--yb-note); opacity: 1; } /* Focus: the baseline turns accent with a 2 focus line beneath it. */ .yb-input:focus, .yb-input.is-focus { outline: none; border-bottom-color: var(--yb-accent); box-shadow: 0 var(--yb-line-heavy) 0 var(--yb-focus); } .yb-input:focus-visible { outline: none; } .yb-input[aria-invalid="true"], .yb-input.is-error { border-bottom-color: var(--yb-flag); } .yb-input[aria-invalid="true"]:focus { box-shadow: 0 var(--yb-line-heavy) 0 var(--yb-flag); } .yb-input[readonly] { color: var(--yb-text-secondary); } .yb-field-error { font: normal 400 var(--yb-type-footnote-size)/var(--yb-type-footnote-line) var(--yb-font-sans); color: var(--yb-flag); } .yb-field-error:empty { display: none; } .yb-field-help { font: normal 400 var(--yb-type-footnote-size)/var(--yb-type-footnote-line) var(--yb-font-sans); color: var(--yb-note); } .yb-field-help a { color: inherit; } /* The waitlist (§10 Website): ruled-baseline field and a button on one line. */ .yb-join { max-width: 30rem; } .yb-join-line { font: italic 400 var(--yb-type-title3-size)/1.3 var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); color: var(--yb-text-secondary); margin-bottom: var(--yb-space-s); } .yb-join-row { display: flex; align-items: flex-end; gap: var(--yb-space-m); } .yb-join-row .yb-input { flex: 1; } .yb-join .yb-field-error { margin-top: var(--yb-space-s); } .yb-join .yb-field-help { margin-top: var(--yb-space-m); } .yb-join-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Success: the confirmation takes the form's place and height, written on a ruled line (ink on paper; the line is the rule, not green). */ .yb-join-done { max-width: 30rem; } .yb-join-done:focus { outline: none; } .yb-join-done p { font: italic 400 var(--yb-type-title2-size)/1.3 var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); padding-bottom: var(--yb-space-s); border-bottom: var(--yb-line-ink) solid var(--yb-text); } .yb-join-done .yb-field-help { margin-top: var(--yb-space-m); } /* ------------------------------------------------- header and nav (§10) */ .yb-brand { display: inline-flex; align-items: center; gap: var(--yb-space-s); text-decoration: none; min-height: var(--yb-min-target); } /* The mark (owner decision 1, 2026-10-13): the multi-green gradient S, bare, one swappable file (brand/striped-mark.svg) everywhere inside pages; the app-icon tile stays the favicon and home-screen icon. */ .yb-brand img { width: 28px; height: 28px; } .yb-brand span { font: italic 500 var(--yb-type-wordmark-size)/var(--yb-type-wordmark-line) var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); } .yb-header { position: sticky; top: 0; z-index: 30; background: var(--yb-ground); border-bottom: var(--yb-line-thin) solid transparent; transition: border-color var(--yb-motion-quick) ease-out; } .yb-header.is-scrolled { border-bottom-color: var(--yb-rule); } .yb-header-inner { height: var(--yb-header-height); display: flex; align-items: center; gap: var(--yb-space-x3); } .yb-nav { display: none; gap: var(--yb-space-xxl); margin-left: auto; } .yb-nav a { font: normal 400 var(--yb-type-mono-small-size)/var(--yb-type-mono-small-line) var(--yb-font-mono); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--yb-min-target); text-underline-offset: 0.45em; } .yb-nav a:hover, .yb-nav a.is-hover { text-decoration: underline; text-decoration-thickness: var(--yb-line-heavy); text-decoration-color: var(--yb-accent); } .yb-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: var(--yb-line-ink); text-decoration-color: var(--yb-text); } /* The CTA is a Fraunces italic text button. */ .yb-header-cta { display: none; } .yb-header-inner { position: relative; } .yb-menu { margin-left: auto; position: static; } .yb-menu > summary { list-style: none; cursor: pointer; width: var(--yb-min-target); height: var(--yb-min-target); display: grid; place-items: center; margin-right: calc(-1 * var(--yb-space-m)); border-radius: var(--yb-radius-control); } .yb-menu > summary::-webkit-details-marker { display: none; } .yb-menu > summary svg { width: 24px; height: 24px; } .yb-menu .yb-i-close, .yb-menu[open] .yb-i-open { display: none; } .yb-menu[open] .yb-i-close { display: block; } /* A closed details still lays its slot out under content-visibility, and that slot (not the header) becomes the panel's containing block: the gutter-to-gutter panel collapsed to nothing and its links ran 100 px past a 320 px screen. Closed, the panel takes no box at all. */ .yb-menu:not([open]) .yb-menu-panel { display: none; } .yb-menu[open] .yb-menu-panel { animation: yb-drop var(--yb-motion-move) both; transform-origin: top; } .yb-menu.is-closing .yb-menu-panel { animation: yb-drop-out var(--yb-motion-move) both; } @keyframes yb-drop { from { opacity: 0; transform: translateY(calc(-1 * var(--yb-space-s))); } to { opacity: 1; transform: none; } } @keyframes yb-drop-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(calc(-1 * var(--yb-space-s))); } } /* The mobile menu is a ruled page: each item sits on a ruled line, two lines tall so every row is a 44+ target (ruled line 28 x 2 = 56). */ .yb-menu-panel { position: absolute; left: var(--yb-gutter); right: var(--yb-gutter); top: calc(var(--yb-header-height) - var(--yb-space-xs)); background-color: var(--yb-ground); background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--yb-menu-row) - var(--yb-line-hair)), var(--yb-rule) calc(var(--yb-menu-row) - var(--yb-line-hair)) var(--yb-menu-row)); border: var(--yb-line-thin) solid var(--yb-rule-strong); border-radius: var(--yb-radius-card); padding: 0 var(--yb-space-xl); display: grid; } .yb-menu-panel a { height: var(--yb-menu-row); display: flex; align-items: flex-end; padding-bottom: var(--yb-space-s); font: normal 500 var(--yb-type-title3-size)/1 var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); text-decoration: none; } .yb-menu-panel a:hover, .yb-menu-panel a.is-hover { text-decoration: underline; text-decoration-color: var(--yb-accent); text-decoration-thickness: var(--yb-line-heavy); text-underline-offset: 0.2em; } .yb-menu-panel a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: var(--yb-line-ink); text-underline-offset: 0.2em; } @media (min-width: 960px) { .yb-header:not(.yb-header--compact) .yb-nav { display: flex; } .yb-header:not(.yb-header--compact) .yb-header-cta { display: inline-flex; } .yb-header:not(.yb-header--compact) .yb-menu { display: none; } } /* ------------------------------------------------ the back cover (§10) */ .yb-footer { position: relative; overflow: hidden; padding: var(--yb-space-x5) 0 var(--yb-space-x4); } .yb-footer > .yb-wrap { position: relative; z-index: 1; } .yb-footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--yb-space-xxl); padding-bottom: var(--yb-space-xxl); border-bottom: var(--yb-line-thin) solid var(--yb-rule); position: relative; } .yb-footer-nav { display: flex; flex-wrap: wrap; gap: 0 var(--yb-space-xxl); } .yb-footer-nav a { font: normal 400 var(--yb-type-mono-small-size)/var(--yb-type-mono-small-line) var(--yb-font-mono); text-decoration: none; min-height: var(--yb-min-target); display: inline-flex; align-items: center; } .yb-footer-nav a:hover { text-decoration: underline; text-decoration-color: var(--yb-accent); text-decoration-thickness: var(--yb-line-heavy); text-underline-offset: 0.45em; } .yb-footer-base { margin-top: var(--yb-space-xxl); display: grid; gap: var(--yb-space-s); max-width: 44rem; position: relative; } .yb-footer-base p { font: normal 400 var(--yb-type-footnote-size)/var(--yb-type-footnote-line) var(--yb-font-sans); color: var(--yb-note); } .yb-footer-base .yb-mono-small { color: var(--yb-note); } /* ------------------------------------------------ holes: site sections */ /* Every section is a hole (§6): the double rule opens it, the hole numeral sits in the margin column with a note, the content runs beside. */ .yb-hole-section { position: relative; overflow: hidden; padding: calc(var(--yb-section) * 0.8) 0 var(--yb-section); } .yb-hole-section::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--yb-double-rule-top) + var(--yb-double-rule-gap) + var(--yb-double-rule-bottom)); border-top: var(--yb-double-rule-top) solid var(--yb-rule-strong); border-bottom: var(--yb-double-rule-bottom) solid var(--yb-rule); } .yb-hole-grid { display: grid; grid-template-columns: var(--yb-margin-column) minmax(0, 1fr); position: relative; z-index: 1; } /* the margin column with its ruleStrong hairline down the right edge (section 5) */ .yb-margin { padding-top: var(--yb-space-xs); border-right: var(--yb-line-thin) solid var(--yb-rule-strong); padding-right: var(--yb-space-s); } .yb-hole-body { padding-left: var(--yb-space-l); } @media (min-width: 960px) { .yb-hole-body { padding-left: var(--yb-space-x4); } } .yb-hole-no { color: var(--yb-text); } .yb-mnote { display: none; margin-top: var(--yb-space-l); max-width: 9rem; } @media (min-width: 960px) { .yb-mnote { display: block; } } .yb-hole-body { min-width: 0; } .yb-hole-body > .yb-section-title + .yb-lead { margin-top: var(--yb-space-l); } .yb-more { margin-top: var(--yb-space-xxl); } /* The statement under the hero, in tokens.css's statement style. */ .yb-statement-section { padding: var(--yb-space-s) 0 var(--yb-section); } .yb-statement-section p { max-width: 30ch; color: var(--yb-text-secondary); } @media (min-width: 960px) { .yb-statement-section p { margin-left: var(--yb-margin-column); } } /* --------------------------------------------- the book spread (hero) */ .yb-hero { position: relative; overflow: hidden; padding: var(--yb-space-xxl) 0 var(--yb-section); } .yb-hero > .yb-wrap { position: relative; z-index: 1; } .yb-spread { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--yb-space-x4); } .yb-page { position: relative; } .yb-page--left { overflow: hidden; display: flex; flex-direction: column; justify-content: center; } .yb-page--left > * { position: relative; z-index: 1; } .yb-hero h1 { max-width: 11ch; } .yb-hero .yb-lead { margin-top: var(--yb-space-xl); } .yb-hero .yb-join, .yb-hero .yb-join-done { margin-top: var(--yb-space-x3); } /* The ruled grid: the chart grid cell, hairlines in rule. */ .yb-grid-paper { background-color: var(--yb-ground); background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--yb-grid-cell) - var(--yb-line-hair)), var(--yb-rule) calc(var(--yb-grid-cell) - var(--yb-line-hair)) var(--yb-grid-cell)), repeating-linear-gradient(to right, transparent 0 calc(var(--yb-grid-cell) - var(--yb-line-hair)), var(--yb-rule) calc(var(--yb-grid-cell) - var(--yb-line-hair)) var(--yb-grid-cell)); } /* The ruled page: ruled lines every 28. */ .yb-ruled-paper { background-color: var(--yb-ground); background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--yb-ruled-line) - var(--yb-line-hair)), var(--yb-rule) calc(var(--yb-ruled-line) - var(--yb-line-hair)) var(--yb-ruled-line)); } .yb-page--right { border: var(--yb-line-thin) solid var(--yb-rule); padding: var(--yb-space-l) var(--yb-space-l) var(--yb-space-xl); margin: 0 calc(-1 * var(--yb-gutter) + var(--yb-space-s)); } .yb-page-head { display: flex; justify-content: space-between; gap: var(--yb-space-m); padding-bottom: var(--yb-space-m); border-bottom: var(--yb-line-thin) solid var(--yb-rule-strong); color: var(--yb-note); } .yb-trace-box { position: relative; aspect-ratio: 1 / 1; } .yb-hero-nums { display: grid; grid-template-columns: auto auto 1fr; gap: var(--yb-space-xl); align-items: end; margin-top: var(--yb-space-s); } .yb-hero-nums .yb-stat:last-child { justify-self: end; } .yb-page--right figcaption { margin-top: var(--yb-space-xl); } @media (min-width: 960px) { .yb-hero { padding-top: var(--yb-space-x5); } .yb-spread { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border: var(--yb-line-thin) solid var(--yb-rule); } .yb-page--left { padding: var(--yb-space-x5) var(--yb-space-x5) var(--yb-space-x5) var(--yb-space-x4); } /* the fold: a ruleStrong line with a rule line beside it */ .yb-page--right { display: flex; flex-direction: column; justify-content: center; margin: 0; border: 0; border-left: var(--yb-line-thin) solid var(--yb-rule-strong); box-shadow: inset calc(var(--yb-space-s) + var(--yb-line-thin)) 0 0 calc(-1 * var(--yb-space-s)) var(--yb-rule); padding: var(--yb-space-xxl) var(--yb-space-x3) var(--yb-space-x3); } .yb-wrap.yb-spread { padding: 0; width: calc(100% - 2 * var(--yb-gutter)); max-width: var(--yb-max-width); } } /* ---------------------------------------------------- lists (§10) */ /* A ruled list: flat rows on hairlines, title, a pencil note, detail. */ .yb-list > * { padding: var(--yb-space-l) 0 var(--yb-space-l); border-top: var(--yb-line-hair) solid var(--yb-rule); } .yb-list > *:last-child { border-bottom: var(--yb-line-hair) solid var(--yb-rule); } .yb-list dt, .yb-list .yb-row-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--yb-space-xs) var(--yb-space-m); } .yb-list dd { margin-top: var(--yb-space-s); max-width: 34rem; color: var(--yb-text-secondary); } .yb-list .yb-adds { display: block; margin-top: var(--yb-space-s); color: var(--yb-note); } @media (min-width: 760px) { .yb-list--two { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--yb-space-x4); } .yb-list--two > *:nth-last-child(2):nth-child(odd) { border-bottom: var(--yb-line-hair) solid var(--yb-rule); } } /* A row with a trailing value and chevron (§10 Lists and rows). */ .yb-rows > li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--yb-space-m); min-height: var(--yb-min-target); padding: var(--yb-space-m) 0; border-top: var(--yb-line-hair) solid var(--yb-rule); } .yb-rows > li:last-child { border-bottom: var(--yb-line-hair) solid var(--yb-rule); } .yb-rows .yb-chev { color: var(--yb-rule-strong); width: 14px; height: 14px; } /* Steps: numbered with a Fraunces italic numeral, on dashed pencil rules. */ .yb-steps { display: grid; } .yb-steps li { align-content: start; display: grid; grid-template-columns: var(--yb-space-x4) minmax(0, 1fr); gap: var(--yb-space-hair) var(--yb-space-m); padding: var(--yb-space-l) 0; border-top: var(--yb-line-thin) solid var(--yb-rule); } .yb-steps .yb-step-no { grid-row: span 2; font: italic 400 var(--yb-type-title3-size)/var(--yb-type-title3-line) var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); color: var(--yb-text); } .yb-steps p { color: var(--yb-text-secondary); } @media (min-width: 960px) { .yb-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--yb-space-x4); } .yb-steps li { grid-template-columns: minmax(0, 1fr); } .yb-steps .yb-step-no { grid-row: auto; margin-bottom: var(--yb-space-xs); } } /* ------------------------------------------------- scorecard (§10) */ .yb-scorecard { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; background: var(--yb-ground); } .yb-scorecard caption { text-align: left; padding-bottom: var(--yb-space-s); } .yb-scorecard th, .yb-scorecard td { border: var(--yb-line-hair) solid var(--yb-rule); padding: var(--yb-space-s) var(--yb-space-m); height: var(--yb-ruled-line); text-align: right; vertical-align: baseline; } .yb-scorecard thead th { font: normal 500 var(--yb-type-label-size)/var(--yb-type-label-line) var(--yb-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--yb-note); border-top: 0; } .yb-scorecard thead th.yb-col-no { font: normal 400 var(--yb-type-numeral-xs-size)/1 var(--yb-font-mono); letter-spacing: 0; text-transform: none; color: var(--yb-text); } .yb-scorecard tbody th.yb-name { font: normal 400 var(--yb-type-mono-small-size)/var(--yb-type-mono-small-line) var(--yb-font-mono); letter-spacing: 0; text-transform: none; color: var(--yb-text); } .yb-scorecard tbody th { text-align: left; font: normal 500 var(--yb-type-label-size)/var(--yb-type-label-line) var(--yb-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--yb-note); white-space: nowrap; } .yb-scorecard td { font: normal 400 var(--yb-type-numeral-xs-size)/var(--yb-type-numeral-xs-line) var(--yb-font-mono); white-space: nowrap; } .yb-scorecard th:first-child, .yb-scorecard td:first-child { border-left: 0; padding-left: 0; } .yb-scorecard th:last-child, .yb-scorecard td:last-child { border-right: 0; } /* the session (total) column, separated by a ruleStrong line */ .yb-scorecard .yb-col-total { border-left: var(--yb-line-thin) solid var(--yb-rule-strong); } /* the selected column on groundAlt */ .yb-scorecard .is-selected { background: var(--yb-ground-alt); } /* The modes table: text cells, a scorecard all the same. */ .yb-scorecard--text td, .yb-scorecard--text tbody th { text-align: left; } .yb-scorecard--text tbody th { font: normal 500 var(--yb-type-title3-size)/var(--yb-type-title3-line) var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); letter-spacing: -0.01em; text-transform: none; color: var(--yb-text); } .yb-scorecard--text td { font: normal 400 var(--yb-type-callout-size)/var(--yb-type-callout-line) var(--yb-font-sans); white-space: normal; } .yb-scorecard--text td.yb-num { font: normal 400 var(--yb-type-numeral-s-size)/1 var(--yb-font-mono); white-space: nowrap; } .yb-scorecard--text td.yb-kind { font: italic 400 var(--yb-type-note-size)/1.4 var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); color: var(--yb-note); } /* Narrow screens: each text row folds into a stacked card of its cells. */ @media (max-width: 759px) { .yb-scorecard--text thead { display: none; } .yb-scorecard--text tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--yb-space-l); padding: var(--yb-space-m) 0; border-top: var(--yb-line-hair) solid var(--yb-rule); } .yb-scorecard--text tr:last-child { border-bottom: var(--yb-line-hair) solid var(--yb-rule); } .yb-scorecard--text th, .yb-scorecard--text td { border: 0; padding: 0; height: auto; } .yb-scorecard--text td.yb-kind { grid-column: 1; grid-row: 2; } .yb-scorecard--text td.yb-num { grid-column: 2; grid-row: 1 / span 2; align-self: center; } .yb-scorecard--text td.yb-measures { grid-column: 1 / -1; grid-row: 3; margin-top: var(--yb-space-xs); color: var(--yb-text-secondary); } } /* --------------------------------- proof panel, inset, notices (§10) */ .yb-proof-panel { border-radius: var(--yb-radius-card); padding: var(--yb-space-xl); color: var(--yb-text); } .yb-proof-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--yb-space-xs) var(--yb-space-l); } .yb-proof-meta { color: var(--yb-note); } .yb-proof-hero { margin-top: var(--yb-space-xl); } .yb-proof-row { display: flex; flex-wrap: wrap; gap: var(--yb-space-l) var(--yb-space-x3); margin-top: var(--yb-space-xl); } .yb-proof-row--ruled { padding-top: var(--yb-space-l); border-top: var(--yb-line-hair) solid var(--yb-rule); } .yb-proof-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--yb-space-xl) var(--yb-space-xxl); } .yb-proof-grid .yb-stat--wide { grid-column: 1 / -1; } @media (min-width: 760px) { .yb-proof-grid { grid-template-columns: auto repeat(3, minmax(0, max-content)); } .yb-proof-grid .yb-stat--wide { grid-column: auto; } } .yb-inset { background: var(--yb-ground-alt); border-radius: var(--yb-radius-card); padding: var(--yb-space-l) var(--yb-space-xl); } /* A notice: a margin note in a callout box (dashed ruleStrong, square). */ .yb-notice { position: relative; padding: var(--yb-space-m) var(--yb-space-l) var(--yb-space-m); max-width: 34rem; background: var(--yb-ground); } .yb-notice > .yb-dashbox { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .yb-dashbox rect { x: 0.5px; y: 0.5px; width: calc(100% - 1px); height: calc(100% - 1px); fill: none; stroke: var(--yb-rule-strong); stroke-width: var(--yb-line-thin); stroke-dasharray: var(--yb-dash-callout); } .yb-notice .yb-label { margin-bottom: var(--yb-space-xs); } .yb-notice p:not(.yb-label) { font: normal 400 var(--yb-type-callout-size)/var(--yb-type-callout-line) var(--yb-font-sans); } /* A warning adds a 2 flag rule on the leading edge and a flag label. */ .yb-notice--warn { border-left: var(--yb-line-heavy) solid var(--yb-flag); } .yb-notice--warn .yb-label { color: var(--yb-flag); } /* A toast is one note line that settles in at the foot and leaves. */ .yb-toast { font: italic 400 var(--yb-type-note-size)/var(--yb-type-note-line) var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); color: var(--yb-note); } .yb-toast[hidden] { display: none; } .yb-toast { transition: opacity var(--yb-motion-quick) ease-out; } .yb-toast.is-out { opacity: 0; } @media (prefers-reduced-motion: no-preference) { .yb-toast.is-in { animation: yb-settle var(--yb-motion-settle) both; } } @keyframes yb-settle { from { opacity: 0; transform: translateY(var(--yb-space-s)); } to { opacity: 1; transform: none; } } /* ------------------------------------------- legend strip (§9 rule 7) */ .yb-legend { display: inline-flex; flex-wrap: wrap; max-width: 100%; } .yb-legend li { display: inline-flex; align-items: center; gap: var(--yb-space-s); padding: var(--yb-space-xs) var(--yb-space-m); border: var(--yb-line-thin) solid var(--yb-rule); margin-left: calc(-1 * var(--yb-line-thin)); font: normal 400 var(--yb-type-mono-small-size)/var(--yb-type-mono-small-line) var(--yb-font-mono); white-space: nowrap; } .yb-legend li:first-child { margin-left: 0; border-radius: var(--yb-radius-chip) 0 0 var(--yb-radius-chip); } .yb-legend li:last-child { border-radius: 0 var(--yb-radius-chip) var(--yb-radius-chip) 0; } .yb-legend svg { width: 24px; height: 12px; overflow: visible; flex: none; } /* --------------------------------------- segmented control (§10) */ /* equal-width cells (the widest label sets them), labels on one line */ .yb-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: relative; max-width: 100%; } .yb-seg button, .yb-seg [role="radio"] { position: relative; min-height: var(--yb-segment-height); padding: 0 var(--yb-space-l); border: var(--yb-line-thin) solid var(--yb-rule); margin-left: calc(-1 * var(--yb-line-thin)); background: var(--yb-ground); color: var(--yb-text); font: normal 400 var(--yb-type-mono-small-size)/1 var(--yb-font-mono); cursor: pointer; white-space: nowrap; min-width: 0; transition: background-color var(--yb-motion-quick) ease-out, color var(--yb-motion-quick) ease-out; } /* the 44 hit area round a 36 visible cell */ .yb-seg button::after, .yb-seg [role="radio"]::after { content: ""; position: absolute; left: 0; right: 0; top: calc((var(--yb-segment-height) - var(--yb-min-target)) / 2); bottom: calc((var(--yb-segment-height) - var(--yb-min-target)) / 2); } .yb-seg > :first-child { margin-left: 0; border-radius: var(--yb-radius-chip) 0 0 var(--yb-radius-chip); } .yb-seg > :last-child { border-radius: 0 var(--yb-radius-chip) var(--yb-radius-chip) 0; } .yb-seg [aria-checked="true"], .yb-seg [aria-pressed="true"] { background: var(--yb-text); color: var(--yb-ground); border-color: var(--yb-text); z-index: 1; } .yb-seg button:hover:not([aria-checked="true"]):not([aria-pressed="true"]) { background: var(--yb-ground-alt); } /* The chosen cell's ink is one indicator that slides between cells (motion move; owner, 2026-10-13: "any kind of change or shift of elements on the page, we should try to interpolate"). gallery.js measures the chosen cell and sets --thumb-x/-y/-w/-h/-r; the cells go clear so it shows through. Without JavaScript the cell's own fill (above) stands. */ .yb-seg.has-thumb::before { content: ""; position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; width: var(--thumb-w, 0); height: var(--thumb-h, 0); transform: translate(var(--thumb-x, 0), var(--thumb-y, 0)); background: var(--yb-text); border-radius: var(--thumb-r, 0); } .yb-seg.has-thumb.is-ready::before { transition: transform var(--yb-motion-move), width var(--yb-motion-move), height var(--yb-motion-move), border-radius var(--yb-motion-move); } .yb-seg.has-thumb > [aria-checked="true"] { background: transparent; border-color: transparent; } .yb-seg.has-thumb > * { z-index: 2; } .yb-seg.has-thumb > [aria-checked="true"]:hover { background: transparent; } .yb-seg :focus-visible { z-index: 2; } /* ----------------------------------------------- the FAQ (§10 Website) */ .yb-faq details { border-top: var(--yb-line-hair) solid var(--yb-rule); } .yb-faq details:last-child { border-bottom: var(--yb-line-hair) solid var(--yb-rule); } .yb-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: var(--yb-space-xl); padding: var(--yb-space-l) 0; min-height: var(--yb-min-target); font: normal 500 var(--yb-type-title3-size)/var(--yb-type-title3-line) var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); letter-spacing: -0.01em; } .yb-faq summary::-webkit-details-marker { display: none; } .yb-faq summary::after { content: "+"; font: normal 400 var(--yb-type-mono-small-size)/1 var(--yb-font-mono); color: var(--yb-note); flex: none; } .yb-faq details[open] > summary::after { content: "–"; } .yb-faq summary:hover { text-decoration: underline; text-decoration-thickness: var(--yb-line-thin); text-underline-offset: 0.2em; } .yb-faq .yb-answer { padding: 0 0 var(--yb-space-xl); max-width: 40rem; color: var(--yb-text-secondary); } .yb-faq details.is-moving > .yb-answer { overflow: hidden; } /* ------------------------------------------------------ contact */ .yb-mail-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--yb-space-s) var(--yb-space-xxl); margin-top: var(--yb-space-xxl); } .yb-mail { font: italic 400 min(var(--yb-type-title1-size), 7.2vw)/1.15 var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); text-decoration: underline; text-decoration-thickness: var(--yb-line-thin); text-underline-offset: 0.16em; overflow-wrap: normal; word-break: normal; } .yb-mail:hover { text-decoration-color: var(--yb-accent); text-decoration-thickness: var(--yb-line-heavy); } .yb-copy-status { color: var(--yb-note); } /* --------------------------------------------- charts (§9) */ .yb-chart { position: relative; width: 100%; } .yb-chart > svg { width: 100%; height: auto; overflow: visible; } .c-axis { stroke: var(--yb-rule-strong); stroke-width: var(--yb-line-thin); fill: none; shape-rendering: crispEdges; } .c-tick { stroke: var(--yb-rule-strong); stroke-width: var(--yb-line-thin); shape-rendering: crispEdges; } .c-grid { stroke: var(--yb-rule); stroke-width: var(--yb-line-thin); shape-rendering: crispEdges; } .c-num { font: normal 400 var(--yb-type-numeral-xs-size) var(--yb-font-mono); fill: var(--yb-note); font-variant-numeric: tabular-nums; } .c-num--ink { fill: var(--yb-text); } .c-label { font: normal 500 var(--yb-type-label-size) var(--yb-font-mono); letter-spacing: 0.12em; text-transform: uppercase; fill: var(--yb-note); } .c-note { font: italic 400 var(--yb-type-note-small-size) var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); fill: var(--yb-note); } .c-note--ink { fill: var(--yb-text-secondary); } .c-dim { stroke: var(--yb-text); stroke-width: var(--yb-line-thin); fill: none; shape-rendering: crispEdges; } .c-leader { stroke: var(--yb-note); stroke-width: var(--yb-line-pencil); stroke-dasharray: var(--yb-dash-leader); stroke-linecap: round; fill: none; } .c-leader-dot { fill: var(--yb-note); } .c-pt { fill: var(--yb-series-1); } .c-pt.is-selected { fill: var(--yb-accent); stroke: var(--yb-chart-keyline); stroke-width: var(--yb-line-pencil); } /* The hand path: one uniform ink line (§0, §9 table). */ .c-trace { fill: none; stroke: var(--yb-text); stroke-width: var(--yb-line-trace); stroke-linecap: round; stroke-linejoin: round; } .c-trace--legend { stroke-width: var(--yb-line-ink); } .c-tdot { fill: var(--yb-text-secondary); } .c-bead { fill: var(--yb-ground); stroke: var(--yb-text-secondary); stroke-width: var(--yb-speed-dot-edge); } .c-trace--ink { stroke: var(--yb-text); } .c-through { fill: none; stroke: var(--yb-note); stroke-width: var(--yb-line-pencil); stroke-dasharray: var(--yb-dash-projection); stroke-linecap: round; } /* ---- Chart marks as the shipping app draws them (DESIGN-LANGUAGE section 9, owner 2026-10-13): Striped/Sources ReportTempoChart.swift (bars), Progress/ProgressChartMarks.swift (trend line 2 pt at 80%, variance bar 4 pt at 30% round-capped, the monotone ribbon at 14%), PersonalTargetChartBand (target: two 1 pt lines, dash 5 4), the reference rules (average dash 4 4, selection dash 3 3 on bars, 4 on Progress). Sizes and opacities as shipped; only the colours come from the palette and roles. */ .c-s1, .c-s2, .c-s3, .c-trend { fill: none; stroke-width: 2px; stroke-opacity: 0.8; stroke-linecap: round; stroke-linejoin: round; } .c-s1, .c-trend { stroke: var(--yb-series-1); } .c-s2 { stroke: var(--yb-series-2); } .c-s3 { stroke: var(--yb-series-3); } .yb-legend .c-s1, .yb-legend .c-s2, .yb-legend .c-s3 { stroke-opacity: 1; } .c-sym { fill: var(--yb-series-1); } .c-ribbon { fill: var(--yb-series-1); fill-opacity: 0.14; stroke: none; } .c-var { stroke: var(--yb-series-1); stroke-width: 4px; stroke-opacity: 0.3; stroke-linecap: round; } .c-bar { stroke: none; } .c-bar.is-dim { opacity: 0.42; } .c-fade { stop-color: var(--yb-series-1); } .c-fade--acc { stop-color: var(--yb-accent); } .c-fade.is-low { stop-opacity: 0.55; } /* option A, as shipped: Theme.bright (the focus token, #4CFFB0) at the top to Theme.mint (accent) at 55% at the bottom, in both themes */ .c-fade--a { stop-color: var(--yb-focus); } .c-fade--a.is-low { stop-color: var(--yb-accent); } .c-ref { stroke: var(--yb-note); stroke-width: 1px; stroke-dasharray: 4 4; fill: none; } .c-ref--bar { stroke-dasharray: 3 3; } .c-ref--progress { stroke-dasharray: 4 4; } .c-goal { stroke: var(--yb-note); stroke-width: 1px; stroke-dasharray: 5 4; fill: none; } /* the swing plane, as the wrist replay's tilt figure draws it (level 1 pt, the plane 2 pt, its arc 1.5 pt; the session's spread as the plane card's two ticks on the arc, 1.2 pt) */ .c-level { stroke: var(--yb-rule-strong); stroke-width: 1px; } .c-tilt { stroke: var(--yb-series-1); stroke-width: 2px; stroke-linecap: round; fill: none; } .c-tilt-arc { stroke: var(--yb-series-1); stroke-width: 1.5px; fill: none; } .c-spread-tick { stroke: var(--yb-note); stroke-width: 1.2px; } /* the beat pattern, as the live metronome page draws it (metronome.css): a 2 px rounded track, 12 px filled marks, the fill line while it plays */ .c-track { stroke: var(--yb-rule-strong); stroke-width: 2px; stroke-linecap: round; } .c-track--s1 { stroke: var(--yb-series-1); stroke-opacity: 0.45; } .c-beat-fill { stroke: var(--yb-accent); stroke-width: 2px; stroke-linecap: round; } .c-mark { fill: var(--yb-text-secondary); } .c-mark--s1 { fill: var(--yb-series-1); } .c-mark.is-rest { fill: var(--yb-note); } .c-mark.is-hit { fill: var(--yb-accent); } .c-m1 { fill: var(--yb-series-1); } .c-m2 { fill: var(--yb-series-2); } .c-m3 { fill: var(--yb-series-3); } .c-ground { stroke: var(--yb-rule-strong); stroke-width: var(--yb-line-thin); shape-rendering: crispEdges; } .c-plane { stroke: var(--yb-text); stroke-width: var(--yb-line-thin); } @media (prefers-reduced-motion: no-preference) { .yb-chart.is-drawing .c-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: yb-draw var(--yb-motion-draw) forwards; } } @keyframes yb-draw { to { stroke-dashoffset: 0; } } /* --------------------------------------------- loading and empty (§10) */ /* The scale ruler: 24 ticks inking in, left to right. */ .yb-ruler { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); align-items: end; height: var(--yb-space-l); border-bottom: var(--yb-line-thin) solid var(--yb-rule-strong); max-width: 20rem; } .yb-ruler i { justify-self: start; width: var(--yb-line-thin); height: var(--yb-tick-minor); background: var(--yb-rule); } .yb-ruler i:nth-child(6n + 1) { height: var(--yb-tick-major); } .yb-ruler i.on { background: var(--yb-text); } .yb-ruler-row { display: flex; align-items: end; gap: var(--yb-space-m); } .yb-ruler-row .yb-mono-small { color: var(--yb-note); min-width: 3.5em; } /* Determinate: the filled part is a 2 text line on the ruler's track. */ .yb-meter { position: relative; height: var(--yb-space-l); max-width: 20rem; flex: 1; } .yb-meter::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: var(--yb-line-thin) solid var(--yb-rule-strong); } .yb-meter-fill { position: absolute; left: 0; bottom: 0; height: var(--yb-line-heavy); background: var(--yb-text); } .yb-meter-ticks { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: end; } .yb-meter-ticks i { width: var(--yb-line-thin); height: var(--yb-tick-minor); background: var(--yb-rule-strong); } .yb-meter-ticks i:nth-child(5n + 1) { height: var(--yb-tick-major); } /* --------------------------------------------- motifs (§8) */ /* Every motif is FULLSCREEN (round 2, owner 2026-10-13): the library's motifs.css draws it with cover over its whole section (the wide drawing above 700 px, the tall one below), the subject front and centre and the ground running off every edge; there are no framed pages. motif-fade.js (copied with it) eases it to 1.5% under every piece of content. One per section; never two holes or greens in adjacent sections. */ .yb-motif { position: absolute; inset: 0; z-index: 0; } /* Review 2026-10-13: the tall par 4 puts yardage numerals beside the hero's form; at 700 px and under the hero takes the topo field instead (the same files motifs.css uses, relative to this sheet). */ @media (max-width: 700px) { .yb-hero > .yb-motif--hole-par4 { background-image: url("motifs/svg/topo-field-whisper-paper.svg"); } :is(.yb-night, [data-yb-theme="night"]) .yb-hero > .yb-motif--hole-par4 { background-image: url("motifs/svg/topo-field-whisper-night.svg"); } } /* A feature screen: the motif fullscreen at its composition's shape (16:9 above 700 px, 390:844 at 700 and under), the copy placed by feature-copy.js inside the composition's textRegions, on open ground. No border. */ .yb-feature-screen { position: relative; overflow: hidden; aspect-ratio: 16 / 9; } @media (max-width: 700px) { .yb-feature-screen { aspect-ratio: 390 / 844; } } .yb-feature-copy { position: relative; z-index: 1; padding: var(--yb-space-xl); display: grid; gap: var(--yb-space-s); justify-items: start; } .yb-feature-copy.is-placed { position: absolute; inset: 0; padding: 0; display: block; } .yb-feature-copy.is-placed > * { position: absolute; display: grid; gap: var(--yb-space-s); justify-items: start; align-content: start; } .show-slots .yb-motif { outline: var(--yb-line-thin) dashed var(--yb-rule-strong); outline-offset: calc(-1 * var(--yb-space-xs)); -webkit-mask-image: none !important; mask-image: none !important; } .show-slots .yb-motif[data-slot-label]::after { content: attr(data-slot-label); position: absolute; left: var(--yb-space-s); top: var(--yb-space-s); font: normal 500 var(--yb-type-label-size)/var(--yb-type-label-line) var(--yb-font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--yb-note); background: var(--yb-ground); padding: var(--yb-space-hair) var(--yb-space-xs); } /* --------------------------------------------- share card (§10) */ /* The 9:16 card as an object lying on the page: one soft paper shadow and a slight turn. Drawn at 336 x 597 CSS px (1080 x 1920 at 3.2x). */ .yb-card-stage { display: grid; place-items: center; padding: var(--yb-space-xl) 0; } .yb-card { position: relative; overflow: hidden; width: 336px; aspect-ratio: 9 / 16; max-width: 100%; box-shadow: var(--yb-shadow-card); transform: rotate(1.2deg); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; padding: var(--yb-space-xxl) var(--yb-space-xl) 0; background: var(--yb-ground); } .yb-card > * { position: relative; z-index: 1; } .yb-card > .yb-motif { position: absolute; z-index: 0; } .yb-card-head { display: flex; justify-content: space-between; align-items: center; } .yb-card-head .yb-brand { min-height: 0; } .yb-card-head .yb-brand img { width: 22px; height: 22px; } .yb-card-head .yb-brand span { font-size: var(--yb-type-note-size); } .yb-card-title { display: grid; gap: var(--yb-space-s); } /* The card is a fixed-size image (9:16 at 336 px), so its title takes title1's phone size at every width, as the app's card does. */ .yb-card .yb-card-title .yb-title1 { font-size: 2rem; } .yb-card-meta { color: var(--yb-note); } .yb-card-trace { margin: var(--yb-space-l) 0; } .yb-card .yb-trace-box { aspect-ratio: auto; min-height: 0; margin: var(--yb-space-s) 0; } .yb-card-num { display: grid; gap: var(--yb-space-xs); } .yb-card-foot { margin: var(--yb-space-l) calc(-1 * var(--yb-space-xl)) 0; padding: var(--yb-space-l) var(--yb-space-xl); display: flex; justify-content: space-between; color: var(--yb-text); } .yb-card-foot .yb-mono-small { color: var(--yb-text-secondary); } /* --------------------------------------------- legal and support pages */ .yb-doc { padding: var(--yb-space-x4) 0 var(--yb-section); } .yb-doc-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--yb-space-xxl); } .yb-doc-head { padding-bottom: var(--yb-space-xxl); border-bottom: var(--yb-line-thin) solid var(--yb-rule-strong); } .yb-doc-head .yb-mono-small { color: var(--yb-note); margin-top: var(--yb-space-m); } .yb-toc details > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: var(--yb-min-target); border-bottom: var(--yb-line-hair) solid var(--yb-rule); } .yb-toc details > summary::-webkit-details-marker { display: none; } .yb-toc details > summary::after { content: "+"; font: normal 400 var(--yb-type-mono-small-size)/1 var(--yb-font-mono); color: var(--yb-note); } .yb-toc details[open] > summary::after { content: "–"; } .yb-toc ol { padding: var(--yb-space-s) 0; display: grid; } .yb-toc a { display: flex; gap: var(--yb-space-s); align-items: baseline; min-height: var(--yb-min-target); padding: var(--yb-space-s) 0; text-decoration: none; font: normal 400 var(--yb-type-mono-small-size)/var(--yb-type-mono-small-line) var(--yb-font-mono); } .yb-toc a .yb-secno { color: var(--yb-note); } .yb-toc a:hover { text-decoration: underline; text-decoration-color: var(--yb-accent); text-decoration-thickness: var(--yb-line-heavy); text-underline-offset: 0.3em; } .yb-toc a[aria-current="true"] { text-decoration: underline; text-decoration-thickness: var(--yb-line-ink); text-underline-offset: 0.3em; } .yb-article { max-width: 42rem; } .yb-article h2 { margin-top: var(--yb-space-x5); padding-top: var(--yb-space-l); border-top: var(--yb-line-thin) solid var(--yb-rule-strong); } .yb-article h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .yb-article h3 { margin-top: var(--yb-space-x3); } .yb-article h2 + p, .yb-article h3 + p, .yb-article h2 + ul, .yb-article h3 + ul { margin-top: var(--yb-space-m); } .yb-article p + p, .yb-article p + ul, .yb-article ul + p { margin-top: var(--yb-space-m); } .yb-article ul { display: grid; gap: var(--yb-space-s); } .yb-article ul li { position: relative; padding-left: var(--yb-space-xl); } .yb-article ul li::before { content: "–"; position: absolute; left: 0; color: var(--yb-note); font-family: var(--yb-font-mono); } .yb-article a { text-decoration: underline; text-decoration-thickness: var(--yb-line-thin); text-underline-offset: 0.2em; } .yb-article a:hover { text-decoration-color: var(--yb-accent); text-decoration-thickness: var(--yb-line-heavy); } .yb-secno { font-family: var(--yb-font-mono); font-style: normal; font-size: 0.62em; color: var(--yb-note); letter-spacing: 0; margin-right: var(--yb-space-s); vertical-align: 0.18em; } /* A path through Settings: mono, with the arrows in pencil. */ .yb-path { font: normal 400 var(--yb-type-mono-small-size)/1.6 var(--yb-font-mono); white-space: normal; } .yb-path .yb-sep { color: var(--yb-note); margin: 0 var(--yb-space-xs); } @media (min-width: 960px) { .yb-doc-grid { grid-template-columns: var(--yb-margin-column) minmax(0, 1fr); column-gap: 0; } .yb-doc-head { grid-column: 2; } .yb-toc { grid-column: 1; grid-row: 2; position: sticky; top: calc(var(--yb-header-height) + var(--yb-space-l)); align-self: start; padding-right: var(--yb-space-xxl); border-right: var(--yb-line-thin) solid var(--yb-rule-strong); margin-right: var(--yb-space-x4); } .yb-toc details > summary { pointer-events: none; border-bottom: 0; } .yb-toc details > summary::after, .yb-toc details[open] > summary::after { content: none; } .yb-article { grid-column: 2; grid-row: 2; } } /* --------------------------------------------- the metronome page (§10) */ /* Night roles. The page is a tool: no motif, nothing measured. */ .yb-metro { min-height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 0 var(--yb-gutter) var(--yb-space-x4); } .yb-metro-bar { display: flex; justify-content: space-between; align-items: center; height: var(--yb-header-height); border-bottom: var(--yb-line-thin) solid var(--yb-rule); } .yb-sound { position: relative; display: inline-flex; align-items: center; gap: var(--yb-space-s); min-height: var(--yb-min-target); padding: 0 var(--yb-space-s); color: var(--yb-text); } .yb-sound svg { width: 18px; height: 18px; } .yb-sound .yb-updown { width: 10px; height: 10px; color: var(--yb-note); } .yb-metro-stage { display: grid; align-content: center; justify-items: center; gap: var(--yb-space-x4); padding: var(--yb-space-x4) 0; } /* The pace stepper: chevrons either side of the pace name and its ratio. */ .yb-pace { display: grid; grid-template-columns: var(--yb-min-target) minmax(0, auto) var(--yb-min-target); align-items: center; gap: var(--yb-space-m); } .yb-pace-label { position: relative; display: grid; justify-items: center; gap: var(--yb-space-xs); padding: 0 var(--yb-space-s); } .yb-pace-name { font: italic 460 var(--yb-type-title1-size)/var(--yb-type-title1-line) var(--yb-font-serif); font-variation-settings: var(--yb-serif-axes); letter-spacing: -0.01em; white-space: nowrap; } .yb-pace-ratio { display: inline-flex; align-items: center; gap: var(--yb-space-xs); color: var(--yb-note); } .yb-pace-ratio svg { width: 10px; height: 10px; } .yb-pace-ratio { min-height: var(--yb-min-target); padding: 0 var(--yb-space-s); } .yb-step-btn { width: var(--yb-min-target); height: var(--yb-min-target); display: grid; place-items: center; border-radius: var(--yb-radius-round); border: var(--yb-line-pencil) solid var(--yb-rule-strong); background: none; cursor: pointer; color: var(--yb-text); padding: 0; } .yb-step-btn svg { width: 18px; height: 18px; } .yb-step-btn:hover { border-color: var(--yb-text); } .yb-step-btn { transition: opacity var(--yb-motion-quick) ease-out, visibility 0s linear 0s, border-color var(--yb-motion-quick) ease-out; } .yb-step-btn[hidden], .yb-step-btn:disabled { visibility: hidden; display: grid; opacity: 0; transition: opacity var(--yb-motion-quick) ease-out, visibility 0s linear var(--yb-motion-quick); } /* The beat pattern: a scale ruler with the two spans as dimension lines. */ .yb-beats { width: min(100%, 34rem); } .yb-beats svg { width: 100%; height: auto; overflow: visible; } .yb-metro-controls { display: grid; justify-items: center; gap: var(--yb-space-xxl); } /* The start button: §10 metronome (off: an icon button; on: ink fill, ground glyph), at page scale (metronomeRoundPage). The beat is a text ring at the beat-ring tokens (opacity 0.3 paper / 0.45 night, width, scale) that grows and fades. */ .yb-go { position: relative; width: var(--yb-metronome-round-page); height: var(--yb-metronome-round-page); border-radius: var(--yb-radius-round); border: var(--yb-line-pencil) solid var(--yb-rule-strong); background: transparent; color: var(--yb-text); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background-color var(--yb-motion-quick) ease-out, border-color var(--yb-motion-quick) ease-out, color var(--yb-motion-quick) ease-out; } .yb-go:hover { border-color: var(--yb-text); } .yb-go svg { width: 30px; height: 28px; } /* off and on glyphs share the centre and cross-fade (quick) */ .yb-go > svg { grid-area: 1 / 1; transition: opacity var(--yb-motion-quick) ease-out; } .yb-go .yb-glyph-on, .yb-go[aria-pressed="true"] .yb-glyph-off { opacity: 0; } .yb-go[aria-pressed="true"] .yb-glyph-on { opacity: 1; } /* on: ink fill, ground glyph (layout.metronomeOn), so Start keeps the one green */ .yb-go[aria-pressed="true"] { background: var(--yb-text); border-color: var(--yb-text); color: var(--yb-ground); } .yb-go-beat { position: absolute; inset: calc(-1 * var(--yb-line-pencil)); border-radius: var(--yb-radius-round); border: var(--yb-beat-ring-width) solid color-mix(in srgb, var(--yb-text) calc(var(--yb-beat-ring-opacity) * 100%), transparent); opacity: 0; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .yb-go-beat.is-beat { animation: yb-beat var(--yb-motion-beat) ease-out; } } @keyframes yb-beat { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(var(--yb-beat-ring-scale)); } } .yb-metro-note { display: inline-flex; align-items: center; gap: var(--yb-space-s); } .yb-metro-note svg { width: 14px; height: 14px; color: var(--yb-note); } /* --------------------------------------------- 404 */ .yb-notfound-code { color: var(--yb-note); } .yb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--yb-space-m) var(--yb-space-xxl); margin-top: var(--yb-space-x3); } /* --------------------------------------------- reveal, motion */ .reveal-armed [data-reveal] { opacity: 0; transform: translateY(var(--yb-space-m)); transition: opacity var(--yb-motion-settle), transform var(--yb-motion-gentle); } .reveal-armed [data-reveal].is-in { opacity: 1; transform: none; } /* Reduce Motion (section 11, the same on the app and the web): every movement is instant (tokens.css zeroes settle, gentle, draw, move and stagger, so slides, resizes, draws and staggers snap), and only short opacity cross-fades of at most quick remain. Arrivals that settle in with a small rise become a plain quick fade; the gallery's page cross-fade shortens to quick. */ @media (prefers-reduced-motion: reduce) { .yb-toast.is-in, .yb-field-error.is-in, .yb-join-done.is-in { animation: yb-fade var(--yb-motion-quick) ease-out both; } .yb-menu[open] .yb-menu-panel { animation: yb-fade var(--yb-motion-quick) ease-out both; } .yb-menu.is-closing .yb-menu-panel { animation: yb-fade-out var(--yb-motion-quick) ease-out both; } .yb-listbox-scrim { transition: opacity var(--yb-motion-quick) ease-out; } .reveal-armed [data-reveal] { transform: none; transition: opacity var(--yb-motion-quick) ease-out; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--yb-motion-quick); } } @keyframes yb-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes yb-fade-out { from { opacity: 1; } to { opacity: 0; } } /* Forced colours (§12): give the filled buttons an edge. */ @media (forced-colors: active) { .yb-btn--primary, .yb-btn--ink { border: var(--yb-line-ink) solid ButtonText; } } /* =================================================== section layouts */ .yb-hero-words { position: relative; } .c-note--l { font-size: var(--yb-type-note-size); } .c-tick-label { font: normal 400 var(--yb-type-numeral-tick-size) var(--yb-font-mono); fill: var(--yb-note); font-variant-numeric: tabular-nums; } /* hole 1: one drawing (the devices) beside the device list, then the steps */ .yb-how-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--yb-space-x4); margin-top: var(--yb-space-x4); } .yb-devices { display: flex; align-items: flex-end; justify-content: center; } .yb-device-phone { width: 62%; max-width: 280px; } .yb-device-watch { width: calc(62% * 0.578); max-width: calc(280px * 0.578); margin-left: -4%; margin-bottom: 4%; } .yb-how-grid + .yb-steps { margin-top: var(--yb-space-x5); } @media (min-width: 960px) { .yb-how-grid { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: var(--yb-space-x5); align-items: center; } .yb-device-phone { width: 70%; } .yb-device-watch { width: calc(70% * 0.578); } } /* hole 2: the notes beside the home metronome */ .yb-range-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--yb-space-x5); } .yb-range-notes { margin-top: var(--yb-space-x3); } @media (min-width: 960px) { .yb-range-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--yb-space-x6); align-items: start; } } .yb-metro-card { border: var(--yb-line-thin) solid var(--yb-rule); padding: var(--yb-space-l) var(--yb-space-l) var(--yb-space-xl); display: grid; gap: var(--yb-space-xl); align-content: start; } .yb-metro-values { display: flex; flex-wrap: wrap; gap: var(--yb-space-l) var(--yb-space-xxl); } .yb-metro-hear { display: flex; flex-wrap: wrap; align-items: center; gap: var(--yb-space-m) var(--yb-space-xl); } .yb-metro-voice { color: var(--yb-text-secondary); } .yb-metro-voice q { quotes: "“" "”"; color: var(--yb-text); font-size: var(--yb-type-note-size); } /* A segmented control with more than four cells folds into rows of three under 560 px (§10): the viewport's width, or its own container's where the control sits in a narrower column (the home metronome card). */ .yb-metro-card, .g-seg-host { container-type: inline-size; } @container (max-width: 559px) { .yb-seg:has(> :nth-child(5)) { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; } .yb-seg:has(> :nth-child(5)) > * { margin: calc(-1 * var(--yb-line-thin)) 0 0 0; border-radius: 0; padding: 0 var(--yb-space-xs); } .yb-seg:has(> :nth-child(5)) > :not(:nth-child(3n + 1)) { margin-left: calc(-1 * var(--yb-line-thin)); } .yb-seg:has(> :nth-child(5)) > :first-child { border-radius: var(--yb-radius-chip) 0 0 0; } .yb-seg:has(> :nth-child(5)) > :nth-child(3) { border-radius: 0 var(--yb-radius-chip) 0 0; } .yb-seg:has(> :nth-child(5)) > :nth-last-child(3):nth-child(3n + 1) { border-radius: 0 0 0 var(--yb-radius-chip); } .yb-seg:has(> :nth-child(5)) > :last-child { border-radius: 0 0 var(--yb-radius-chip) 0; } } @media (max-width: 559px) { .yb-seg:has(> :nth-child(5)) { display: grid; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; } .yb-seg:has(> :nth-child(5)) > * { margin: calc(-1 * var(--yb-line-thin)) 0 0 0; border-radius: 0; padding: 0 var(--yb-space-xs); } .yb-seg:has(> :nth-child(5)) > :not(:nth-child(3n + 1)) { margin-left: calc(-1 * var(--yb-line-thin)); } .yb-seg:has(> :nth-child(5)) > :first-child { border-radius: var(--yb-radius-chip) 0 0 0; } .yb-seg:has(> :nth-child(5)) > :nth-child(3) { border-radius: 0 var(--yb-radius-chip) 0 0; } .yb-seg:has(> :nth-child(5)) > :nth-last-child(3):nth-child(3n + 1) { border-radius: 0 0 0 var(--yb-radius-chip); } .yb-seg:has(> :nth-child(5)) > :last-child { border-radius: 0 0 var(--yb-radius-chip) 0; } } /* hole 3: the report as a book spread */ .yb-book { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--yb-space-x5); border: var(--yb-line-thin) solid var(--yb-rule); } .yb-book-page { padding: var(--yb-space-l) var(--yb-space-l) var(--yb-space-xxl); min-width: 0; } /* A phone under 400 px leaves the book's scorecard about 200 px: the page comes in to the small space and the cells to the tick size, so all four columns, the session's included, still fit side by side (T-38's promise). */ @media (max-width: 399px) { .yb-book-page { padding-left: var(--yb-space-s); padding-right: var(--yb-space-s); } .yb-book .yb-scorecard:not(.yb-scorecard--text) :is(td, thead th) { padding-left: 2px; padding-right: 2px; } .yb-book .yb-scorecard:not(.yb-scorecard--text) td { font-size: var(--yb-type-numeral-tick-size); } .yb-book .yb-scorecard:not(.yb-scorecard--text) thead th { letter-spacing: 0.02em; } } .yb-book-page + .yb-book-page { border-top: var(--yb-line-thin) solid var(--yb-rule-strong); } .yb-book-big { margin-top: var(--yb-space-xl); display: grid; gap: var(--yb-space-s); } .yb-book-times { display: flex; flex-wrap: wrap; gap: var(--yb-space-l) var(--yb-space-xxl); margin: var(--yb-space-xl) 0 var(--yb-space-xxl); } .yb-book .yb-chart { margin-top: var(--yb-space-l); } .yb-page-head--second { margin-top: var(--yb-space-x3); } @media (min-width: 960px) { .yb-book { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .yb-book-page { padding: var(--yb-space-xxl) var(--yb-space-x3) var(--yb-space-x3); } .yb-book-page + .yb-book-page { border-top: 0; border-left: var(--yb-line-thin) solid var(--yb-rule-strong); box-shadow: inset calc(var(--yb-space-s) + var(--yb-line-thin)) 0 0 calc(-1 * var(--yb-space-s)) var(--yb-rule); } } .yb-table-scroll { overflow-x: auto; max-width: 100%; } .yb-metrics { margin-top: var(--yb-space-x5); } .yb-proof-line { margin-top: var(--yb-space-x5); color: var(--yb-text-secondary); } @media (max-width: 559px) { .yb-scorecard th, .yb-scorecard td { padding-left: var(--yb-space-s); padding-right: var(--yb-space-s); } /* Review 2026-10-13: the Session column was cut off at 390 px. Each row becomes a grid: the measure's name across the top, its values in equal columns under it, so every column stays on screen at 320 px. */ .yb-scorecard:not(.yb-scorecard--text), .yb-scorecard:not(.yb-scorecard--text) :is(thead, tbody) { display: block; } .yb-scorecard:not(.yb-scorecard--text) caption { display: block; } .yb-scorecard:not(.yb-scorecard--text) tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .yb-scorecard:not(.yb-scorecard--text):not(:has(thead th:nth-child(5))) tr { grid-template-columns: repeat(3, minmax(0, 1fr)); } .yb-scorecard:not(.yb-scorecard--text) thead th:first-child { display: none; } .yb-scorecard:not(.yb-scorecard--text) tbody th { grid-column: 1 / -1; border: 0; padding: var(--yb-space-s) 0 0; height: auto; } .yb-scorecard:not(.yb-scorecard--text) :is(td, thead th) { border-top: 0; border-right: 0; } .yb-scorecard:not(.yb-scorecard--text) :is(td, thead th):not(.yb-col-total) { border-left: 0; } } /* hole 4: the card beside its notes */ .yb-share-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--yb-space-x4); } .yb-card-notes { margin-top: var(--yb-space-xxl); display: grid; gap: var(--yb-space-xs); } .yb-card-notes li::before { content: "– "; font-family: var(--yb-font-mono); } @media (min-width: 960px) { .yb-share-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--yb-space-x6); align-items: center; } } .yb-card-head .yb-mono-small { color: var(--yb-note); } /* hole 5: night */ .yb-night-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--yb-space-x4); } .yb-night-devices { margin: 0 auto; width: 100%; } /* the Lock Screen under the range notes (T-111) */ .yb-range-lock { width: 62%; max-width: 250px; margin-top: var(--yb-space-x4); display: grid; gap: var(--yb-space-m); } .yb-range-lock figcaption { max-width: 22rem; } @media (min-width: 960px) { .yb-night-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: var(--yb-space-x6); align-items: center; } } /* holes 6 to 8 */ .yb-modes { margin-top: var(--yb-space-x4); } .yb-points { margin-top: var(--yb-space-x3); } .yb-faq--section { margin-top: var(--yb-space-x3); max-width: 46rem; } /* the admin page's forward */ .yb-forward { padding: var(--yb-space-x5) 0 var(--yb-space-x6); } /* the metronome round at control scale (T-09): 44, same states as T-130 */ .yb-go--round { width: var(--yb-metronome-round); height: var(--yb-metronome-round); } .yb-go--round svg { width: 22px; height: 20px; } /* Under 420 px a segmented strip shares the width and lets a label wrap onto two lines inside its cell rather than run off the page. */ @media (max-width: 419px) { .yb-seg:not(:has(> :nth-child(5))) { display: grid; width: 100%; } .yb-seg:not(:has(> :nth-child(5))) > * { padding: 0 var(--yb-space-s); } } /* under 360 px a label may take two lines; the selector matches the cell rule's own specificity, so it wins (it is later in the sheet) */ @media (max-width: 359px) { .yb-seg button, .yb-seg [role="radio"] { white-space: normal; line-height: 1.15; } } .yb-card-stage { min-width: 0; max-width: 100%; grid-template-columns: minmax(0, 1fr); justify-items: center; } /* the words of a hole start level with its numeral; only the object beside them centres */ .yb-share-grid > :first-child, .yb-range-grid > :first-child { align-self: start; } .yb-night-grid > :first-child { align-self: center; } /* ------------------------------------------------- listbox (T-20, web) */ /* Every native