/* Class names mirror PHP functions: ui_button() -> .ui-button, layout_page_start() -> .layout-* Color/type/spacing tokens ported from ~/Develop/Python ui/1_theme.py (Material You, seed #63A002) — keep both in sync if the seed or scale changes there. M3 window size classes (breakpoints) — no differing content yet, all sizes render the same; this is the single source of truth to use once a screen actually needs to differ: compact < 600px — phone portrait medium 600–839px — tablet/foldable portrait expanded 840–1199px — phone/tablet/foldable landscape large 1200–1599px — desktop extra-large 1600px+ — desktop, ultra-wide CSS custom properties can't be used inside @media conditions, so these thresholds are documented here and must be hardcoded again in any @media (min-width: ...) rule that uses them. */ :root { /* Material You color roles — light scheme (default) */ --md-primary: #4C662B; --md-on-primary: #FFFFFF; --md-primary-container: #CDEDA3; --md-on-primary-container: #354E16; --md-secondary: #586249; --md-on-secondary: #FFFFFF; --md-secondary-container: #DCE7C8; --md-on-secondary-container: #404A33; --md-tertiary: #386663; --md-on-tertiary: #FFFFFF; --md-tertiary-container: #BCECE7; --md-on-tertiary-container: #1F4E4B; --md-error: #BA1A1A; --md-on-error: #FFFFFF; --md-error-container: #FFDAD6; --md-on-error-container: #93000A; --md-background: #F9FAEF; --md-on-background: #1A1C16; --md-surface: #F9FAEF; --md-on-surface: #1A1C16; --md-surface-variant: #E1E4D5; --md-on-surface-variant: #44483D; --md-surface-container-lowest: #FFFFFF; --md-surface-container-low: #F3F4E9; --md-surface-container: #EEEFE3; --md-surface-container-high: #E8E9DE; --md-surface-container-highest: #E2E3D8; --md-outline: #75796C; --md-outline-variant: #C5C8BA; --md-inverse-surface: #2F312A; --md-inverse-on-surface: #F1F2E6; --md-inverse-primary: #B1D18A; /* Extended colors (Material Theme Builder), named by color: `node bin/theme/from-seed.mjs --extended '#63A002'`; an app's theme block has its own. */ --md-red: #B42800; --md-on-red: #FFFFFF; --md-red-container: #FFDAD2; --md-on-red-container: #8A1D00; --md-yellow: #795900; --md-on-yellow: #FFFFFF; --md-yellow-container: #FFDFA0; --md-on-yellow-container: #5C4300; --md-green: #286C07; --md-on-green: #FFFFFF; --md-green-container: #AAF685; --md-on-green-container: #1A5200; /* M3 typescale (line heights: M3 spec, not in ~/Develop/Python ui/1_theme.py) */ --md-display-large-size: 57px; --md-display-large-weight: 400; --md-display-large-line-height: 64px; --md-display-medium-size: 45px; --md-display-medium-weight: 400; --md-display-medium-line-height: 52px; --md-display-small-size: 36px; --md-display-small-weight: 400; --md-display-small-line-height: 44px; --md-headline-large-size: 32px; --md-headline-large-weight: 400; --md-headline-large-line-height: 40px; --md-headline-medium-size: 28px; --md-headline-medium-weight: 400; --md-headline-medium-line-height: 36px; --md-headline-small-size: 24px; --md-headline-small-weight: 400; --md-headline-small-line-height: 32px; --md-title-large-size: 22px; --md-title-large-weight: 400; --md-title-large-line-height: 28px; --md-title-medium-size: 16px; --md-title-medium-weight: 500; --md-title-medium-line-height: 24px; --md-title-small-size: 14px; --md-title-small-weight: 500; --md-title-small-line-height: 20px; --md-body-large-size: 16px; --md-body-large-weight: 400; --md-body-large-line-height: 24px; --md-body-medium-size: 14px; --md-body-medium-weight: 400; --md-body-medium-line-height: 20px; --md-body-small-size: 12px; --md-body-small-weight: 400; --md-body-small-line-height: 16px; --md-label-large-size: 14px; --md-label-large-weight: 500; --md-label-large-line-height: 20px; --md-label-medium-size: 12px; --md-label-medium-weight: 500; --md-label-medium-line-height: 16px; --md-label-small-size: 11px; --md-label-small-weight: 500; --md-label-small-line-height: 16px; /* Something new (an unread letter): text and icon 100 above their normal weight, text 400 → 500, icon 200 → 300 (user decision, 2026-11-01) */ --md-emphasis-weight: 500; --md-icon-emphasis-weight: 300; /* Spacing scale */ --spacing-xxxsmall: 2px; --spacing-xxsmall: 4px; --spacing-xsmall: 8px; --spacing-small: 12px; --spacing-medium: 16px; --spacing-large: 24px; --spacing-xlarge: 32px; --spacing-xxlarge: 40px; --spacing-xxxlarge: 48px; /* Content pane width — two separate tokens (not one shared value) so an app can override just its centered column or just its grid without the other following along. Same default today: 840px, Medium/Expanded's own M3 boundary (above) — the point where a card grid and a column of body text both still read fine. */ --layout-centered-max-width: 840px; --layout-grid-max-width: 840px; /* A fixed pane's starting width (.claude/rules/navigation-sizes.md "Panes"): 360 − 2 × 16px padding = 328px = two tracker buttons (2 × 160 + 8); M3 uses 360dp too. */ --layout-pane-fixed-360: 360px; /* The nav rail's column (from 600px); the panes, the corner FAB and the content cap's breakpoint follow it. */ --layout-nav-rail-width: 96px; --radius: 6px; --font: system-ui, sans-serif; } @media (prefers-color-scheme: dark) { :root { --md-primary: #B1D18A; --md-on-primary: #1F3701; --md-primary-container: #354E16; --md-on-primary-container: #CDEDA3; --md-secondary: #BFCBAD; --md-on-secondary: #2A331E; --md-secondary-container: #404A33; --md-on-secondary-container: #DCE7C8; --md-tertiary: #A0D0CB; --md-on-tertiary: #003735; --md-tertiary-container: #1F4E4B; --md-on-tertiary-container: #BCECE7; --md-error: #FFB4AB; --md-on-error: #690005; --md-error-container: #93000A; --md-on-error-container: #FFDAD6; --md-background: #12140E; --md-on-background: #E2E3D8; --md-surface: #12140E; --md-on-surface: #E2E3D8; --md-surface-variant: #44483D; --md-on-surface-variant: #C5C8BA; --md-surface-container-lowest: #0C0F09; --md-surface-container-low: #1A1C16; --md-surface-container: #1E201A; --md-surface-container-high: #282B24; --md-surface-container-highest: #33362E; --md-outline: #8F9285; --md-outline-variant: #44483D; --md-inverse-surface: #E2E3D8; --md-inverse-on-surface: #2F312A; --md-inverse-primary: #4C662B; --md-red: #FFB4A2; --md-on-red: #621100; --md-red-container: #8A1D00; --md-on-red-container: #FFDAD2; --md-yellow: #F8BD2A; --md-on-yellow: #402D00; --md-yellow-container: #5C4300; --md-on-yellow-container: #FFDFA0; --md-green: #8FD96C; --md-on-green: #0F3900; --md-green-container: #1A5200; --md-on-green-container: #AAF685; } } * { box-sizing: border-box; } /* Mobile-native feel: no iOS auto-zoom on inputs, no rubber-band past page edges, no gray tap flash / 300ms tap delay */ /* No page bounce when content fits: only a [data-pane-scroll] box that really scrolls rubber-bands, like a native scroll view. */ html { -webkit-text-size-adjust: 100%; overscroll-behavior: none; } /* The part of the screen behind the browser's own bars (iOS 26 Safari's glass tab bar, 0 on the home screen): the compact pane reaches under it like a native scroll view, and its content keeps clear of it (.claude/rules/scroll-elevation.md). The pane is taller than the page then, so the page itself must not scroll. */ :root { --layout-behind-bars: calc(100lvh - 100svh); overflow: hidden; } /* With the keyboard open the pane reaches under it too, and Safari's pill above it (Bottom tabs) no longer leaves an empty band. */ :root[data-keyboard-open] { --layout-behind-bars: var(--layout-keyboard-inset, 0px); } @media (min-width: 600px) { :root, :root[data-keyboard-open] { --layout-behind-bars: 0px; } } body { margin: 0; font-family: var(--font); color: var(--md-on-background); background: var(--md-background); } a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Screen transitions (cross-document view transitions; Safari 18.2+, Chrome 126+, instant elsewhere). app.js sets the kind on from the page's layout_nav_stack() outlets, which renames the first pane — see .claude/rules/transitions.md: app-forward/app-back = shared axis slide, app-state = same state (e.g. an answer picked). Only the pane moves; the rest (root: background, nav rail) stands still, so root never animates — it would also block taps until it ended. */ @view-transition { navigation: auto; } [data-transition="forward"] .layout-panes { view-transition-name: app-forward; } [data-transition="back"] .layout-panes { view-transition-name: app-back; } [data-transition="state"] .layout-panes { view-transition-name: app-state; } /* A screen's script presents a pane that started hidden (app.js, same-document): it slides in from its side, and the first pane eases into its new size. */ [data-transition^="present"] [data-pane="first"] { view-transition-name: app-pane-first; } [data-transition^="present"] [data-pane="supporting"] { view-transition-name: app-pane-supporting; } ::view-transition-group(app-pane-first), ::view-transition-group(app-pane-supporting) { animation-duration: 0.3s; animation-timing-function: ease-out; } ::view-transition-old(app-pane-first), ::view-transition-new(app-pane-first) { height: 100%; object-fit: cover; object-position: left top; animation-duration: 0.3s; } [data-transition="present-beside"]::view-transition-new(app-pane-supporting) { animation: app-slide-in-right 0.3s ease-out; } [data-transition="present-below"]::view-transition-new(app-pane-supporting) { animation: app-slide-in-up 0.3s ease-out; } /* A pane presented on top of joined panes slides down from under the first pane's bar: the bar stands still, the pane's group clips its slide. */ [data-transition="present-above"] [data-pane="first"] > .app-bar { view-transition-name: app-pane-bar; } ::view-transition-group(app-pane-bar), ::view-transition-old(app-pane-bar), ::view-transition-new(app-pane-bar) { animation: none; } [data-transition="present-above"]::view-transition-group(app-pane-supporting) { overflow: clip; } [data-transition="present-above"]::view-transition-new(app-pane-supporting) { animation: app-slide-in-down 0.3s ease-out; } ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation: none; } ::view-transition-old(app-forward), ::view-transition-old(app-back), ::view-transition-new(app-forward), ::view-transition-new(app-back) { animation-duration: 0.3s; animation-timing-function: ease-out; } ::view-transition-old(app-forward) { animation-name: app-slide-out-left; } ::view-transition-new(app-forward) { animation-name: app-slide-in-right; } ::view-transition-old(app-back) { animation-name: app-slide-out-right; } ::view-transition-new(app-back) { animation-name: app-slide-in-left; } /* Swap instantly — a whole-page animation here read as lag. Give these an animation-name to animate state changes. */ ::view-transition-group(app-state), ::view-transition-old(app-state), ::view-transition-new(app-state) { animation: none; } @keyframes app-slide-out-left { to { transform: translateX(-100%); } } @keyframes app-slide-in-right { from { transform: translateX(100%); } } @keyframes app-slide-out-right { to { transform: translateX(100%); } } @keyframes app-slide-in-left { from { transform: translateX(-100%); } } @keyframes app-slide-in-up { from { transform: translateY(100%); } } @keyframes app-slide-in-down { from { transform: translateY(-100%); } } /* layout_app_bar() — M3 Small Top App Bar, ported from ~/Develop/Python ui/1_app_bar.py; menu icon opens layout_nav_drawer(), title always centered. Pinned to the top of its pane (like a native nav bar); on surface at rest, tinted by app.js once content scrolls under it (--scrolled). Left/right padding add safe-area-inset so the icon/title never sit under a landscape notch or rounded corner. */ /* Fixed itself (same spot: the compact pane fills the viewport): iOS 26 Safari tints its status-bar band only from a fixed edge element's own background (.claude/rules/scroll-elevation.md). */ .app-bar { position: fixed; top: var(--layout-keyboard-top, 0px); left: 0; right: 0; /* --layout-bar-strip: the height of a bar's strip under its title row (layout_app_bar($stripHtml)), measured by app.js; 0 without one. */ height: calc(64px + env(safe-area-inset-top) + var(--layout-bar-strip, 0px)); padding: env(safe-area-inset-top) calc(12px + env(safe-area-inset-right)) 0 env(safe-area-inset-left); display: flex; align-items: center; gap: 0; box-sizing: border-box; background: var(--md-surface); transition: background-color 0.2s ease-out; z-index: 10; } /* A later pane's own bar (beside the first pane) sits at its pane's top, never across the viewport. */ .layout-pane + .layout-pane > .app-bar { position: absolute; } /* Scroll elevation, ported from ~/Develop/Python ui/1_layout.py attach_scroll_elevation() (.bar-elevated there). */ .app-bar--scrolled { background: var(--md-surface-container-low); } /* layout_app_bar($stripHtml): a strip under the title row, part of the bar (sticky with it, tinted with it). The bar's bottom padding is the strip's measured height, so the title row keeps its 64px content box and stays centered; the strip stands at the bar's bottom, 16px from its sides (2026-10-29). */ .app-bar--with-strip { padding-bottom: var(--layout-bar-strip, 0px); } .app-bar__strip:has(> [hidden]:only-child) { display: none; } .app-bar__strip { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 calc(var(--spacing-medium) + env(safe-area-inset-right)) var(--spacing-small) calc(var(--spacing-medium) + env(safe-area-inset-left)); } .app-bar__icon-btn { width: 48px; height: 48px; flex-shrink: 0; margin-left: var(--spacing-xsmall); display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--md-on-surface-variant); z-index: 1; } /* Trailing account icon (opens layout_profile_drawer()) — pushed to the right edge; the bar's own padding-right already holds the 12px + safe-area. */ .app-bar__icon-btn--end { margin-left: auto; width: auto; min-width: 48px; } /* 56px inset ported as-is from the source's title_left constant — an 8px gap after the 48px icon, same in Python; extended by the safe-area on each side. */ .app-bar__title { position: absolute; left: 0; right: 0; margin: 0; padding: 0 calc(56px + env(safe-area-inset-right)) 0 calc(56px + env(safe-area-inset-left)); text-align: center; font-size: var(--md-title-large-size); font-weight: var(--md-title-large-weight); color: var(--md-on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* layout_app_bar(actionCount:): 2 or 3 trailing 40px icon buttons 4px apart; the title keeps the same clearance on both sides, so it stays centered. */ :is(.app-bar--actions-2, .app-bar--actions-3) .app-bar__icon-btn--end { gap: var(--spacing-xxsmall); } .app-bar--actions-2 .app-bar__title { padding-inline: calc(12px + 2 * 40px + var(--spacing-xxsmall) + max(env(safe-area-inset-left), env(safe-area-inset-right))); } .app-bar--actions-3 .app-bar__title { padding-inline: calc(12px + 3 * 40px + 2 * var(--spacing-xxsmall) + max(env(safe-area-inset-left), env(safe-area-inset-right))); } /* Offline (public/_assets/offline.js sets html[data-offline]): the bar turns tertiary container, its text and icons on-tertiary-container; the scroll tint pauses. */ html[data-offline] .app-bar, html[data-offline] .app-bar--scrolled { background: var(--md-tertiary-container); } html[data-offline] .app-bar :is(.app-bar__icon-btn, .app-bar__title, .app-bar__subtitle, .ui-icon-button--standard) { color: var(--md-on-tertiary-container); } /* layout_offline_html(): the dialog's "Last connection" line under its text. */ .ui-dialog__body [data-offline-last] { margin-top: var(--spacing-xsmall); } /* layout_app_bar_offline_button(): only while offline.js marks the page offline; the title then clears two leading slots (8 + 48 + 8 + 48), unless three trailing icons need more. */ .app-bar__offline { display: none; } html[data-offline] .app-bar__offline { display: flex; } html[data-offline] .app-bar:not(.app-bar--actions-3) .app-bar__title { padding-inline: calc(2 * var(--spacing-xsmall) + 2 * 48px + max(env(safe-area-inset-left), env(safe-area-inset-right))); } /* layout_app_bar($titleSuffix): only the title text shrinks with an ellipsis, the suffix ("(3/20)") always stays whole. */ .app-bar__title--suffixed { display: flex; justify-content: center; column-gap: var(--spacing-xxsmall); } .app-bar__title-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .app-bar__title-suffix { flex: none; } /* layout_app_bar($subtitle): title line (28px) + subtitle line (16px) = 44px, centered in the 64px bar like M3's small app bar with a subtitle. */ .app-bar__title--subtitled { line-height: var(--md-title-large-line-height); } .app-bar__title-line, .app-bar__subtitle { display: block; overflow: hidden; text-overflow: ellipsis; } .app-bar__title-line.app-bar__title--suffixed { display: flex; } .app-bar__subtitle { font-size: var(--md-label-medium-size); font-weight: var(--md-label-medium-weight); line-height: var(--md-label-medium-line-height); color: var(--md-on-surface-variant); } /* layout_app_bar_late() icons (app.js marks their slot): instant on a fast page, fade in with the content after a loading screen (.claude/rules/navigation.md). */ .layout-was-loading .app-bar [data-app-bar-late] > * { animation: layout-appear 0.2s ease-out both; } /* layout_nav_drawer() — M3 modal nav drawer: scrim + a left-edge panel, both driven by the drawer's own aria-hidden (app.js only flips the attribute, same pattern as ui_fab()'s aria-disabled). No Python source to port from — the Python sidebar (ui/1_nav.py) is a permanently visible desktop rail, not a mobile modal overlay. */ .ui-nav-drawer { position: fixed; inset: 0; z-index: 20; visibility: hidden; /* visibility itself can't fade/slide, but a transitioned discrete property only flips at the END of the transition when animating toward "hidden" (and immediately when animating toward "visible", CSS spec) — so closing keeps the scrim/panel visible for their own 200/250ms transitions instead of vanishing at once. */ transition: visibility 250ms; } .ui-nav-drawer[aria-hidden="false"] { visibility: visible; } .ui-nav-drawer__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 200ms ease; } .ui-nav-drawer[aria-hidden="false"] .ui-nav-drawer__scrim { opacity: 1; } .ui-nav-drawer__panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(320px, 85vw); box-sizing: border-box; background: var(--md-surface-container-low); /* M3 modal drawer shape: flush against the screen's left/top/bottom edges, rounded only on the trailing edge. */ border-radius: 0 16px 16px 0; padding: calc(var(--spacing-small) + env(safe-area-inset-top)) var(--spacing-small) calc(var(--spacing-small) + env(safe-area-inset-bottom)) calc(var(--spacing-small) + env(safe-area-inset-left)); display: flex; flex-direction: column; overflow-y: auto; transform: translateX(-100%); transition: transform 250ms cubic-bezier(0.2, 0, 0, 1); } .ui-nav-drawer[aria-hidden="false"] .ui-nav-drawer__panel { transform: translateX(0); } /* layout_profile_drawer() — the same drawer mirrored onto the right edge: rounded on its leading edge, right safe-area inset. */ .ui-nav-drawer--end .ui-nav-drawer__panel { left: auto; right: 0; border-radius: 16px 0 0 16px; padding-left: var(--spacing-small); padding-right: calc(var(--spacing-small) + env(safe-area-inset-right)); transform: translateX(100%); } /* layout_end_drawer(): its content below the header; a ui_list_group() fills the panel's width. */ .ui-nav-drawer__body { display: flex; flex-direction: column; gap: var(--spacing-small); } /* Loading/empty/error start at the same height as a page's own: app bar (64px, .layout-main has no top padding below it), minus the panel's own. */ .ui-nav-drawer__state:not([hidden]) { padding-top: calc(64px - var(--spacing-small)); } .ui-nav-drawer__header { display: flex; align-items: center; height: 56px; flex-shrink: 0; margin: 0; padding: 0 var(--spacing-medium); color: var(--md-on-surface-variant); font-size: var(--md-title-small-size); font-weight: var(--md-title-small-weight); } .ui-nav-drawer__divider { flex-shrink: 0; margin: var(--spacing-small) var(--spacing-medium); border: none; border-top: 1px solid var(--md-outline-variant); } .ui-nav-drawer__item { display: flex; align-items: center; gap: var(--spacing-medium); height: 56px; flex-shrink: 0; padding: 0 var(--spacing-medium); border-radius: 28px; color: var(--md-on-surface-variant); text-decoration: none; font-size: var(--md-label-large-size); font-weight: var(--md-label-large-weight); } @media (hover: hover) { .ui-nav-drawer__item:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); } } .ui-nav-drawer__item--active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); } @media (hover: hover) { .ui-nav-drawer__item--active:hover { background: color-mix(in srgb, var(--md-on-secondary-container) 8%, var(--md-secondary-container)); } } /* M3 state layers, the content color over the container: hover 8%, pressed 10% (a tap: no hover). With a mouse, pressed sits on top of the hover layer, as in Figma (8% + 10%). iOS applies :active because app.js listens to touchstart. */ .ui-nav-drawer__item:active { background: color-mix(in srgb, var(--md-on-surface) 10%, transparent); } @media (hover: hover) { .ui-nav-drawer__item:active { background: color-mix(in srgb, var(--md-on-surface) 10%, color-mix(in srgb, var(--md-on-surface) 8%, transparent)); } } .ui-nav-drawer__item--active:active { background: color-mix(in srgb, var(--md-on-secondary-container) 10%, var(--md-secondary-container)); } @media (hover: hover) { .ui-nav-drawer__item--active:active { background: color-mix(in srgb, var(--md-on-secondary-container) 10%, color-mix(in srgb, var(--md-on-secondary-container) 8%, var(--md-secondary-container))); } } /* layout_page_start() — the panes' area (.layout-panes) and the first pane (.claude/rules/navigation.md): app bar + scroll region, the one element a screen transition moves. Compact: the whole viewport. Absolute, not fixed (body never scrolls, same spot): a full-width fixed element at the bottom edge makes iOS 26 Safari paint a solid band under its toolbar (.claude/rules/scroll-elevation.md). The generated panes block arranges the panes in it. */ .layout-panes { position: absolute; inset: 0; /* Set by app.js while the on-screen keyboard is open (.claude/rules/keyboard.md). */ top: var(--layout-keyboard-top, 0px); bottom: calc(var(--layout-keyboard-inset, 0px) - var(--layout-behind-bars)); /* The first pane's bar: the room a slot on top of joined panes leaves above itself (generated panes block). */ --layout-app-bar-height: calc(64px + env(safe-area-inset-top) + var(--layout-bar-strip, 0px)); } /* Each pane's own bar strip; app.js sets the measured height on the pane that has one (the first pane's also on the panes, for --layout-app-bar-height). */ .layout-pane { position: relative; --layout-bar-strip: 0px; } .layout-pane[hidden] { display: none; } /* Scrollable content region below the pane's app bar; this is what actually scrolls, not body. */ .layout-scroll { position: absolute; /* A variable, because a hugging pane (the generated panes block) puts the box in flow and keeps the bar's room as its margin. */ --layout-scroll-top: calc(64px + env(safe-area-inset-top) + var(--layout-bar-strip, 0px)); top: var(--layout-scroll-top); left: 0; right: 0; bottom: 0; overflow-y: auto; overscroll-behavior-y: contain; background: var(--md-surface); transition: background-color 0.2s ease-out; padding-bottom: env(safe-area-inset-bottom); } /* The keyboard covers the home indicator, so its inset would only be a gap above the keyboard (app.js sets the attribute, .claude/rules/keyboard.md). */ :root[data-keyboard-open] .layout-scroll { padding-bottom: 0; } /* Every box that scrolls a screen's content (layout_page_start()/layout_page_end() mark it; .claude/rules/pane-layout.md) reaches under the browser's bars: the spacer at its end lets the last content scroll clear of them, and a focused field stops above them. A spacer, not padding, because a flex scroll box may drop its end padding. */ [data-pane-scroll] { scroll-padding-bottom: var(--layout-behind-bars); } [data-pane-scroll]::after { content: ''; display: block; flex: 0 0 auto; height: var(--layout-behind-bars); } .ui-sheet-open [data-pane-scroll] { overflow: hidden; } /* Desktop scrollbar (.claude/rules/design.md): a mouse/trackpad gets app.js's overlay thumb instead of the native bars; touch keeps its own. Overrides the popover UA box (inset, margin, border, padding, canvas background). Place and size come from app.js as custom properties. */ .layout-scrollbar { display: none; } @media (hover: hover) and (pointer: fine) { * { scrollbar-width: none; } *::-webkit-scrollbar { display: none; } .layout-scrollbar { display: block; position: fixed; inset: var(--layout-scrollbar-top, 0px) var(--layout-scrollbar-right, 0px) auto auto; z-index: 30; width: 6px; height: var(--layout-scrollbar-height, 44px); margin: 0; padding: 0; border: none; border-radius: 100px; overflow: visible; background: var(--md-outline-variant); opacity: 0; pointer-events: none; transition: opacity 150ms, background-color 150ms; } .layout-scrollbar--visible { opacity: 1; pointer-events: auto; } .layout-scrollbar:hover, .layout-scrollbar--dragging { background: var(--md-outline); } .layout-scrollbar--dragging { transition: none; } } /* No app bar on this page (layout_page_start() called without one) — scroll region then starts below the notch itself instead. */ .layout-scroll--no-app-bar { --layout-scroll-top: env(safe-area-inset-top); } /* A full-height box sits absolute in the scroll box, so it keeps the 16px gap that .layout-main's padding gives a scrolling one. */ .layout-scroll--no-app-bar > .layout-main > .layout-content--fills-pane { top: var(--spacing-medium); } /* Joined panes (generated panes block): a scroll in a lower pane tints the bar and the whole pane above it, so that pane reads as part of the bar (app.js). */ .layout-pane[data-joined-scrolled] > .layout-scroll { background: var(--md-surface-container-low); } /* No top gap under an app bar: bar and content share --md-surface, the scroll tint separates them (.claude/rules/scroll-elevation.md). */ .layout-scroll--no-app-bar > .layout-main { padding-top: var(--spacing-medium); } .layout-main { padding-top: 0; padding-bottom: var(--spacing-medium); /* Never less than the 16px baseline; grows only if a landscape notch/rounded corner actually needs more. */ padding-left: max(var(--spacing-medium), env(safe-area-inset-left)); padding-right: max(var(--spacing-medium), env(safe-area-inset-right)); } /* layout_nav_rail() — M3 navigation rail, ported from ~/Develop/Python ui/1_nav.py + 1_navigation_item.py: 96px column, pill indicator + icon + label per item. Medium+ only (.claude/rules/navigation.md); below 600px the drawers take over. Its own view-transition-name + z-index above the pane: it stands still and a sliding pane passes underneath it. */ .layout-nav-rail { display: none; } .layout-nav-rail__item { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 100%; padding: var(--spacing-xxsmall) 0; color: var(--md-on-surface-variant); text-decoration: none; } .layout-nav-rail__indicator { display: flex; align-items: center; justify-content: center; width: 56px; height: 32px; border-radius: 16px; } @media (hover: hover) { .layout-nav-rail__item:hover .layout-nav-rail__indicator { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); } } .layout-nav-rail__item--active .layout-nav-rail__indicator { background: var(--md-secondary-container); color: var(--md-on-secondary-container); } @media (hover: hover) { .layout-nav-rail__item--active:hover .layout-nav-rail__indicator { background: color-mix(in srgb, var(--md-on-secondary-container) 8%, var(--md-secondary-container)); } } .layout-nav-rail__item:active .layout-nav-rail__indicator { background: color-mix(in srgb, var(--md-on-surface) 10%, transparent); } @media (hover: hover) { .layout-nav-rail__item:active .layout-nav-rail__indicator { background: color-mix(in srgb, var(--md-on-surface) 10%, color-mix(in srgb, var(--md-on-surface) 8%, transparent)); } } .layout-nav-rail__item--active:active .layout-nav-rail__indicator { background: color-mix(in srgb, var(--md-on-secondary-container) 10%, var(--md-secondary-container)); } @media (hover: hover) { .layout-nav-rail__item--active:active .layout-nav-rail__indicator { background: color-mix(in srgb, var(--md-on-secondary-container) 10%, color-mix(in srgb, var(--md-on-secondary-container) 8%, var(--md-secondary-container))); } } .layout-nav-rail__label { max-width: calc(96px - 2 * var(--spacing-xxsmall)); margin-top: var(--spacing-xxsmall); font-size: var(--md-label-medium-size); font-weight: var(--md-label-medium-weight); line-height: var(--md-label-medium-line-height); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .layout-nav-rail__item--active .layout-nav-rail__label { color: var(--md-on-surface); }::view-transition-group(app-rail), ::view-transition-old(app-rail), ::view-transition-new(app-rail) { animation: none; } /* Medium+ with a rail (layout_page_start() sets .layout-has-rail whenever it renders one): ported from ~/Develop/Python ui/1_layout.py — rail + a rounded surface card inset 16px on surface-container, the app bar inside the card. The bar drops the compact container items (menu, account — the rail holds them), early or late; a back arrow stays. */ @media (min-width: 600px) { .layout-has-rail { background: var(--md-surface-container); } .layout-has-rail .layout-nav-rail { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1; width: calc(var(--layout-nav-rail-width) + env(safe-area-inset-left)); padding: calc(var(--spacing-medium) + env(safe-area-inset-top)) 0 calc(var(--spacing-medium) + env(safe-area-inset-bottom)) env(safe-area-inset-left); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xxsmall); overflow-y: auto; background: var(--md-surface-container); view-transition-name: app-rail; } /* layout_nav_rail_expanded(): the drawer's rows on the window background, 16px to the edge and to the pane card; the app name level with the card's 64px bar. */ .layout-has-rail .layout-nav-rail--expanded { display: none; align-items: stretch; gap: 0; padding-left: calc(var(--spacing-medium) + env(safe-area-inset-left)); padding-right: var(--spacing-medium); } .layout-nav-rail--expanded .ui-nav-drawer__header:first-child { height: 64px; } .layout-has-rail .layout-panes { position: fixed; top: calc(var(--spacing-medium) + env(safe-area-inset-top) + var(--layout-keyboard-top, 0px)); right: calc(var(--spacing-medium) + env(safe-area-inset-right)); bottom: calc(var(--spacing-medium) + max(env(safe-area-inset-bottom), var(--layout-keyboard-inset, 0px))); left: calc(var(--layout-nav-rail-width) + env(safe-area-inset-left)); --layout-app-bar-height: calc(64px + var(--layout-bar-strip, 0px)); } .layout-has-rail .layout-pane { border-radius: 16px; overflow: hidden; background: var(--md-surface); } .layout-has-rail .app-bar { position: absolute; top: 0; height: calc(64px + var(--layout-bar-strip, 0px)); padding: 0 12px 0 0; } .layout-has-rail .app-bar__title { padding: 0 56px; } .layout-has-rail .app-bar--with-strip { padding-bottom: var(--layout-bar-strip, 0px); } .layout-has-rail .app-bar__strip { padding: 0 var(--spacing-medium) var(--spacing-small); } /* The clearance for two or three trailing icons holds in the card too, so a narrow pane (the tracker's court beside its buttons) cuts the title, never overlaps it. */ .layout-has-rail .app-bar--actions-2 .app-bar__title { padding-inline: calc(12px + 2 * 40px + var(--spacing-xxsmall)); } .layout-has-rail .app-bar--actions-3 .app-bar__title { padding-inline: calc(12px + 3 * 40px + 2 * var(--spacing-xxsmall)); } .layout-has-rail .app-bar [data-drawer-toggle] { display: none; } /* A root bar's leading slot holds only the hidden menu from 600px, so the offline button takes its place; a pushed bar keeps both slots. */ .layout-has-rail .app-bar--root [data-app-bar-slot="leading"] { display: none; } html[data-offline] .layout-has-rail .app-bar--root:not(.app-bar--actions-2):not(.app-bar--actions-3) .app-bar__title { padding-inline: 56px; } html[data-offline] .layout-has-rail .app-bar:not(.app-bar--root):not(.app-bar--actions-3) .app-bar__title { padding-inline: calc(2 * var(--spacing-xsmall) + 2 * 48px); } .layout-has-rail .layout-scroll { --layout-scroll-top: calc(64px + var(--layout-bar-strip, 0px)); padding-bottom: 0; } /* A pane without a bar beside the first one (a supporting pane) starts at its own top edge: the pane's margin already clears the safe area. */ .layout-has-rail .layout-scroll--no-app-bar { --layout-scroll-top: 0px; } .layout-has-rail .layout-main { padding-inline: var(--spacing-medium); } /* The pane card's 16px gaps above and below also count toward the 320px viewport floor. */ .layout-has-rail .layout-content--fills-pane { bottom: var(--spacing-medium); left: var(--spacing-medium); right: var(--spacing-medium); min-height: calc(320px - 64px - 3 * var(--spacing-medium)); } .layout-has-rail .layout-content--fill { bottom: 0; left: 0; right: 0; padding-bottom: var(--spacing-medium); padding-inline: var(--spacing-medium); } /* Flush with the centered column's (and its rows') right edge: pane margin + .layout-main padding, plus half the pane width the column cap leaves free (100vw − rail − pane margin − 2 × padding − cap). Below the cap the extra is 0, so it sits in the pane corner, flush with the rows, as before. */ .layout-has-rail .ui-fab { right: calc(2 * var(--spacing-medium) + env(safe-area-inset-right) + max(0px, (100vw - var(--layout-nav-rail-width) - env(safe-area-inset-left) - env(safe-area-inset-right) - 3 * var(--spacing-medium) - var(--layout-centered-max-width)) / 2)); bottom: calc(2 * var(--spacing-medium) + env(safe-area-inset-bottom)); } } /* The expanded rail (.claude/rules/navigation-sizes.md): 312px = 96 + the 216px a single pane's margins have at 1200px (1200 − 984, where its content reaches the 840px cap). A screen with a pane beside the first waits for 1600px, where its first pane's content still has the full 840px. */ @media (min-width: 1200px) { .layout-has-rail[data-nav-rail-expanded-from="large"] { --layout-nav-rail-width: 312px; } .layout-has-rail[data-nav-rail-expanded-from="large"] .layout-nav-rail { display: none; } .layout-has-rail[data-nav-rail-expanded-from="large"] .layout-nav-rail--expanded { display: flex; } } @media (min-width: 1600px) { .layout-has-rail { --layout-nav-rail-width: 312px; } .layout-has-rail .layout-nav-rail { display: none; } .layout-has-rail .layout-nav-rail--expanded { display: flex; } } /* panes:start — generated by bin/build-pane-css.py from bin/storyboard_model.py: never edit it (.claude/rules/pane-layout.md). */ .layout-panes { display: flex; flex-direction: column; } .layout-pane { min-width: 0; min-height: 0; } /* Beside each other from 840px or on a low screen (any phone in landscape); from 600px each pane is its own rounded area. */ @media (min-width: 840px), (max-height: 479.98px) { .layout-panes { flex-direction: row; gap: var(--spacing-medium); } } /* Otherwise the panes join into one pane, one below the other: from 600px the panes' area is the rounded area, and a lower pane starts 16px below the one above (user decision, 2026-10-29). */ @media (max-width: 839.98px) and (min-height: 480px) { .layout-has-rail .layout-panes { border-radius: 16px; overflow: hidden; background: var(--md-surface); } .layout-has-rail .layout-pane { border-radius: 0; } /* Joined, a lower pane's own bar hides: the first pane's bar is the one bar (layout_page_end() $paneAppBars). */ .layout-pane + .layout-pane > .app-bar { display: none; } .layout-pane + .layout-pane > .layout-scroll { --layout-scroll-top: 0px; } .layout-pane + .layout-pane > .layout-scroll > .layout-main { padding-top: var(--spacing-medium); } .layout-pane + .layout-pane > .layout-scroll > .layout-main > .layout-content--fills-pane { top: var(--spacing-medium); } } /* While a slot waits hidden (isHidden, until the screen's script presents it), the first slot fills the area alone. */ .layout-panes[data-pane-hidden] > [data-pane="first"] { flex: 1 1 0; } @media (max-width: 599.98px) and (max-height: 479.98px) { .layout-pane[data-sizes~="compact-compact:hidden"] { display: none; } .layout-pane[data-sizes~="compact-compact:fixed-360"] { flex: 0 0 var(--layout-pane-fixed-360); } .layout-pane[data-sizes~="compact-compact:flexible"] { flex: 1 1 0; } .layout-pane[data-sizes~="compact-compact:hug"] { flex: 0 0 auto; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="compact-compact:hug"] > .layout-scroll { position: relative; top: auto; bottom: auto; margin-top: var(--layout-scroll-top); overflow: visible; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="compact-compact:hug"] > .layout-scroll > .layout-main { padding: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="compact-compact:hug"] .layout-content--fills-pane { position: relative; inset: auto; min-height: 0; overflow: visible; padding-bottom: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="compact-compact:hug"] [data-pane-scroll]::after { display: none; } } @media (max-width: 599.98px) and (min-height: 480px) and (max-height: 899.98px) { .layout-pane[data-sizes~="compact-medium:hidden"] { display: none; } .layout-pane[data-sizes~="compact-medium:fixed-360"] { flex: 0 0 var(--layout-pane-fixed-360); } .layout-pane[data-sizes~="compact-medium:flexible"] { flex: 1 1 0; } .layout-pane[data-sizes~="compact-medium:hug"] { flex: 0 0 auto; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="compact-medium:hug"] > .layout-scroll { position: relative; top: auto; bottom: auto; margin-top: var(--layout-scroll-top); overflow: visible; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="compact-medium:hug"] > .layout-scroll > .layout-main { padding: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="compact-medium:hug"] .layout-content--fills-pane { position: relative; inset: auto; min-height: 0; overflow: visible; padding-bottom: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="compact-medium:hug"] [data-pane-scroll]::after { display: none; } .layout-panes[data-on-top~="compact-medium:supporting"] > [data-pane="supporting"] { order: -1; } .layout-panes[data-on-top~="compact-medium:supporting"]:not([data-pane-hidden]) > [data-pane="supporting"] > .layout-scroll { --layout-scroll-top: var(--layout-app-bar-height); } .layout-panes[data-on-top~="compact-medium:supporting"]:not([data-pane-hidden]) > [data-pane="first"] { position: static; display: flex; flex-direction: column; } .layout-panes[data-on-top~="compact-medium:supporting"]:not([data-pane-hidden]) > [data-pane="first"] > .layout-scroll { position: relative; inset: auto; flex: 1 1 0; min-height: 0; } .layout-panes[data-on-top~="compact-medium:supporting"]:not([data-pane-hidden]) > [data-pane="first"] > .layout-scroll > .layout-main { padding-top: var(--spacing-small); } .layout-panes[data-on-top~="compact-medium:supporting"]:not([data-pane-hidden]) > [data-pane="first"] > .layout-scroll > .layout-main > .layout-content--fills-pane { top: var(--spacing-small); } .layout-panes[data-scrolls-as-one~="compact-medium"]:not([data-pane-hidden]) { overflow-y: auto; overscroll-behavior-y: contain; } .layout-panes[data-scrolls-as-one~="compact-medium"]:not([data-pane-hidden]) > .layout-pane { flex: 0 0 auto; } .layout-panes[data-scrolls-as-one~="compact-medium"]:not([data-pane-hidden]) > .layout-pane > .layout-scroll { position: relative; top: auto; bottom: auto; overflow: visible; } .layout-has-rail .layout-panes[data-scrolls-as-one~="compact-medium"]:not([data-pane-hidden]) > [data-pane="first"] { display: contents; } .layout-has-rail .layout-panes[data-scrolls-as-one~="compact-medium"]:not([data-pane-hidden]) > [data-pane="first"] > .app-bar { position: sticky; top: 0; flex: 0 0 auto; } .layout-has-rail .layout-panes[data-scrolls-as-one~="compact-medium"]:not([data-pane-hidden]) > [data-pane="first"] > .layout-scroll { margin-top: 0; } } @media (max-width: 599.98px) and (min-height: 900px) { .layout-pane[data-sizes~="compact-expanded:hidden"] { display: none; } .layout-pane[data-sizes~="compact-expanded:fixed-360"] { flex: 0 0 var(--layout-pane-fixed-360); } .layout-pane[data-sizes~="compact-expanded:flexible"] { flex: 1 1 0; } .layout-pane[data-sizes~="compact-expanded:hug"] { flex: 0 0 auto; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="compact-expanded:hug"] > .layout-scroll { position: relative; top: auto; bottom: auto; margin-top: var(--layout-scroll-top); overflow: visible; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="compact-expanded:hug"] > .layout-scroll > .layout-main { padding: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="compact-expanded:hug"] .layout-content--fills-pane { position: relative; inset: auto; min-height: 0; overflow: visible; padding-bottom: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="compact-expanded:hug"] [data-pane-scroll]::after { display: none; } .layout-panes[data-on-top~="compact-expanded:supporting"] > [data-pane="supporting"] { order: -1; } .layout-panes[data-on-top~="compact-expanded:supporting"]:not([data-pane-hidden]) > [data-pane="supporting"] > .layout-scroll { --layout-scroll-top: var(--layout-app-bar-height); } .layout-panes[data-on-top~="compact-expanded:supporting"]:not([data-pane-hidden]) > [data-pane="first"] { position: static; display: flex; flex-direction: column; } .layout-panes[data-on-top~="compact-expanded:supporting"]:not([data-pane-hidden]) > [data-pane="first"] > .layout-scroll { position: relative; inset: auto; flex: 1 1 0; min-height: 0; } .layout-panes[data-on-top~="compact-expanded:supporting"]:not([data-pane-hidden]) > [data-pane="first"] > .layout-scroll > .layout-main { padding-top: var(--spacing-small); } .layout-panes[data-on-top~="compact-expanded:supporting"]:not([data-pane-hidden]) > [data-pane="first"] > .layout-scroll > .layout-main > .layout-content--fills-pane { top: var(--spacing-small); } .layout-panes[data-scrolls-as-one~="compact-expanded"]:not([data-pane-hidden]) { overflow-y: auto; overscroll-behavior-y: contain; } .layout-panes[data-scrolls-as-one~="compact-expanded"]:not([data-pane-hidden]) > .layout-pane { flex: 0 0 auto; } .layout-panes[data-scrolls-as-one~="compact-expanded"]:not([data-pane-hidden]) > .layout-pane > .layout-scroll { position: relative; top: auto; bottom: auto; overflow: visible; } .layout-has-rail .layout-panes[data-scrolls-as-one~="compact-expanded"]:not([data-pane-hidden]) > [data-pane="first"] { display: contents; } .layout-has-rail .layout-panes[data-scrolls-as-one~="compact-expanded"]:not([data-pane-hidden]) > [data-pane="first"] > .app-bar { position: sticky; top: 0; flex: 0 0 auto; } .layout-has-rail .layout-panes[data-scrolls-as-one~="compact-expanded"]:not([data-pane-hidden]) > [data-pane="first"] > .layout-scroll { margin-top: 0; } } @media (min-width: 600px) and (max-width: 839.98px) and (max-height: 479.98px) { .layout-pane[data-sizes~="medium-compact:hidden"] { display: none; } .layout-pane[data-sizes~="medium-compact:fixed-360"] { flex: 0 0 var(--layout-pane-fixed-360); } .layout-pane[data-sizes~="medium-compact:flexible"] { flex: 1 1 0; } .layout-pane[data-sizes~="medium-compact:hug"] { flex: 0 0 auto; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="medium-compact:hug"] > .layout-scroll { position: relative; top: auto; bottom: auto; margin-top: var(--layout-scroll-top); overflow: visible; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="medium-compact:hug"] > .layout-scroll > .layout-main { padding: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="medium-compact:hug"] .layout-content--fills-pane { position: relative; inset: auto; min-height: 0; overflow: visible; padding-bottom: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="medium-compact:hug"] [data-pane-scroll]::after { display: none; } } @media (min-width: 600px) and (max-width: 839.98px) and (min-height: 480px) and (max-height: 899.98px) { .layout-pane[data-sizes~="medium-medium:hidden"] { display: none; } .layout-pane[data-sizes~="medium-medium:fixed-360"] { flex: 0 0 var(--layout-pane-fixed-360); } .layout-pane[data-sizes~="medium-medium:flexible"] { flex: 1 1 0; } .layout-pane[data-sizes~="medium-medium:hug"] { flex: 0 0 auto; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="medium-medium:hug"] > .layout-scroll { position: relative; top: auto; bottom: auto; margin-top: var(--layout-scroll-top); overflow: visible; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="medium-medium:hug"] > .layout-scroll > .layout-main { padding: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="medium-medium:hug"] .layout-content--fills-pane { position: relative; inset: auto; min-height: 0; overflow: visible; padding-bottom: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="medium-medium:hug"] [data-pane-scroll]::after { display: none; } .layout-panes[data-on-top~="medium-medium:supporting"] > [data-pane="supporting"] { order: -1; } .layout-panes[data-on-top~="medium-medium:supporting"]:not([data-pane-hidden]) > [data-pane="supporting"] > .layout-scroll { --layout-scroll-top: var(--layout-app-bar-height); } .layout-panes[data-on-top~="medium-medium:supporting"]:not([data-pane-hidden]) > [data-pane="first"] { position: static; display: flex; flex-direction: column; } .layout-panes[data-on-top~="medium-medium:supporting"]:not([data-pane-hidden]) > [data-pane="first"] > .layout-scroll { position: relative; inset: auto; flex: 1 1 0; min-height: 0; } .layout-panes[data-on-top~="medium-medium:supporting"]:not([data-pane-hidden]) > [data-pane="first"] > .layout-scroll > .layout-main { padding-top: var(--spacing-small); } .layout-panes[data-on-top~="medium-medium:supporting"]:not([data-pane-hidden]) > [data-pane="first"] > .layout-scroll > .layout-main > .layout-content--fills-pane { top: var(--spacing-small); } .layout-panes[data-scrolls-as-one~="medium-medium"]:not([data-pane-hidden]) { overflow-y: auto; overscroll-behavior-y: contain; } .layout-panes[data-scrolls-as-one~="medium-medium"]:not([data-pane-hidden]) > .layout-pane { flex: 0 0 auto; } .layout-panes[data-scrolls-as-one~="medium-medium"]:not([data-pane-hidden]) > .layout-pane > .layout-scroll { position: relative; top: auto; bottom: auto; overflow: visible; } .layout-has-rail .layout-panes[data-scrolls-as-one~="medium-medium"]:not([data-pane-hidden]) > [data-pane="first"] { display: contents; } .layout-has-rail .layout-panes[data-scrolls-as-one~="medium-medium"]:not([data-pane-hidden]) > [data-pane="first"] > .app-bar { position: sticky; top: 0; flex: 0 0 auto; } .layout-has-rail .layout-panes[data-scrolls-as-one~="medium-medium"]:not([data-pane-hidden]) > [data-pane="first"] > .layout-scroll { margin-top: 0; } } @media (min-width: 600px) and (max-width: 839.98px) and (min-height: 900px) { .layout-pane[data-sizes~="medium-expanded:hidden"] { display: none; } .layout-pane[data-sizes~="medium-expanded:fixed-360"] { flex: 0 0 var(--layout-pane-fixed-360); } .layout-pane[data-sizes~="medium-expanded:flexible"] { flex: 1 1 0; } .layout-pane[data-sizes~="medium-expanded:hug"] { flex: 0 0 auto; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="medium-expanded:hug"] > .layout-scroll { position: relative; top: auto; bottom: auto; margin-top: var(--layout-scroll-top); overflow: visible; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="medium-expanded:hug"] > .layout-scroll > .layout-main { padding: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="medium-expanded:hug"] .layout-content--fills-pane { position: relative; inset: auto; min-height: 0; overflow: visible; padding-bottom: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="medium-expanded:hug"] [data-pane-scroll]::after { display: none; } .layout-panes[data-on-top~="medium-expanded:supporting"] > [data-pane="supporting"] { order: -1; } .layout-panes[data-on-top~="medium-expanded:supporting"]:not([data-pane-hidden]) > [data-pane="supporting"] > .layout-scroll { --layout-scroll-top: var(--layout-app-bar-height); } .layout-panes[data-on-top~="medium-expanded:supporting"]:not([data-pane-hidden]) > [data-pane="first"] { position: static; display: flex; flex-direction: column; } .layout-panes[data-on-top~="medium-expanded:supporting"]:not([data-pane-hidden]) > [data-pane="first"] > .layout-scroll { position: relative; inset: auto; flex: 1 1 0; min-height: 0; } .layout-panes[data-on-top~="medium-expanded:supporting"]:not([data-pane-hidden]) > [data-pane="first"] > .layout-scroll > .layout-main { padding-top: var(--spacing-small); } .layout-panes[data-on-top~="medium-expanded:supporting"]:not([data-pane-hidden]) > [data-pane="first"] > .layout-scroll > .layout-main > .layout-content--fills-pane { top: var(--spacing-small); } .layout-panes[data-scrolls-as-one~="medium-expanded"]:not([data-pane-hidden]) { overflow-y: auto; overscroll-behavior-y: contain; } .layout-panes[data-scrolls-as-one~="medium-expanded"]:not([data-pane-hidden]) > .layout-pane { flex: 0 0 auto; } .layout-panes[data-scrolls-as-one~="medium-expanded"]:not([data-pane-hidden]) > .layout-pane > .layout-scroll { position: relative; top: auto; bottom: auto; overflow: visible; } .layout-has-rail .layout-panes[data-scrolls-as-one~="medium-expanded"]:not([data-pane-hidden]) > [data-pane="first"] { display: contents; } .layout-has-rail .layout-panes[data-scrolls-as-one~="medium-expanded"]:not([data-pane-hidden]) > [data-pane="first"] > .app-bar { position: sticky; top: 0; flex: 0 0 auto; } .layout-has-rail .layout-panes[data-scrolls-as-one~="medium-expanded"]:not([data-pane-hidden]) > [data-pane="first"] > .layout-scroll { margin-top: 0; } } @media (min-width: 840px) and (max-width: 1199.98px) and (max-height: 479.98px) { .layout-pane[data-sizes~="expanded-compact:hidden"] { display: none; } .layout-pane[data-sizes~="expanded-compact:fixed-360"] { flex: 0 0 var(--layout-pane-fixed-360); } .layout-pane[data-sizes~="expanded-compact:flexible"] { flex: 1 1 0; } .layout-pane[data-sizes~="expanded-compact:hug"] { flex: 0 0 auto; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="expanded-compact:hug"] > .layout-scroll { position: relative; top: auto; bottom: auto; margin-top: var(--layout-scroll-top); overflow: visible; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="expanded-compact:hug"] > .layout-scroll > .layout-main { padding: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="expanded-compact:hug"] .layout-content--fills-pane { position: relative; inset: auto; min-height: 0; overflow: visible; padding-bottom: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="expanded-compact:hug"] [data-pane-scroll]::after { display: none; } } @media (min-width: 840px) and (max-width: 1199.98px) and (min-height: 480px) and (max-height: 899.98px) { .layout-pane[data-sizes~="expanded-medium:hidden"] { display: none; } .layout-pane[data-sizes~="expanded-medium:fixed-360"] { flex: 0 0 var(--layout-pane-fixed-360); } .layout-pane[data-sizes~="expanded-medium:flexible"] { flex: 1 1 0; } .layout-pane[data-sizes~="expanded-medium:hug"] { flex: 0 0 auto; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="expanded-medium:hug"] > .layout-scroll { position: relative; top: auto; bottom: auto; margin-top: var(--layout-scroll-top); overflow: visible; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="expanded-medium:hug"] > .layout-scroll > .layout-main { padding: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="expanded-medium:hug"] .layout-content--fills-pane { position: relative; inset: auto; min-height: 0; overflow: visible; padding-bottom: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="expanded-medium:hug"] [data-pane-scroll]::after { display: none; } } @media (min-width: 840px) and (max-width: 1199.98px) and (min-height: 900px) { .layout-pane[data-sizes~="expanded-expanded:hidden"] { display: none; } .layout-pane[data-sizes~="expanded-expanded:fixed-360"] { flex: 0 0 var(--layout-pane-fixed-360); } .layout-pane[data-sizes~="expanded-expanded:flexible"] { flex: 1 1 0; } .layout-pane[data-sizes~="expanded-expanded:hug"] { flex: 0 0 auto; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="expanded-expanded:hug"] > .layout-scroll { position: relative; top: auto; bottom: auto; margin-top: var(--layout-scroll-top); overflow: visible; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="expanded-expanded:hug"] > .layout-scroll > .layout-main { padding: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="expanded-expanded:hug"] .layout-content--fills-pane { position: relative; inset: auto; min-height: 0; overflow: visible; padding-bottom: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="expanded-expanded:hug"] [data-pane-scroll]::after { display: none; } } @media (min-width: 1200px) and (max-width: 1599.98px) and (max-height: 479.98px) { .layout-pane[data-sizes~="large-compact:hidden"] { display: none; } .layout-pane[data-sizes~="large-compact:fixed-360"] { flex: 0 0 var(--layout-pane-fixed-360); } .layout-pane[data-sizes~="large-compact:flexible"] { flex: 1 1 0; } .layout-pane[data-sizes~="large-compact:hug"] { flex: 0 0 auto; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="large-compact:hug"] > .layout-scroll { position: relative; top: auto; bottom: auto; margin-top: var(--layout-scroll-top); overflow: visible; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="large-compact:hug"] > .layout-scroll > .layout-main { padding: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="large-compact:hug"] .layout-content--fills-pane { position: relative; inset: auto; min-height: 0; overflow: visible; padding-bottom: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="large-compact:hug"] [data-pane-scroll]::after { display: none; } } @media (min-width: 1200px) and (max-width: 1599.98px) and (min-height: 480px) and (max-height: 899.98px) { .layout-pane[data-sizes~="large-medium:hidden"] { display: none; } .layout-pane[data-sizes~="large-medium:fixed-360"] { flex: 0 0 var(--layout-pane-fixed-360); } .layout-pane[data-sizes~="large-medium:flexible"] { flex: 1 1 0; } .layout-pane[data-sizes~="large-medium:hug"] { flex: 0 0 auto; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="large-medium:hug"] > .layout-scroll { position: relative; top: auto; bottom: auto; margin-top: var(--layout-scroll-top); overflow: visible; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="large-medium:hug"] > .layout-scroll > .layout-main { padding: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="large-medium:hug"] .layout-content--fills-pane { position: relative; inset: auto; min-height: 0; overflow: visible; padding-bottom: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="large-medium:hug"] [data-pane-scroll]::after { display: none; } } @media (min-width: 1200px) and (max-width: 1599.98px) and (min-height: 900px) { .layout-pane[data-sizes~="large-expanded:hidden"] { display: none; } .layout-pane[data-sizes~="large-expanded:fixed-360"] { flex: 0 0 var(--layout-pane-fixed-360); } .layout-pane[data-sizes~="large-expanded:flexible"] { flex: 1 1 0; } .layout-pane[data-sizes~="large-expanded:hug"] { flex: 0 0 auto; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="large-expanded:hug"] > .layout-scroll { position: relative; top: auto; bottom: auto; margin-top: var(--layout-scroll-top); overflow: visible; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="large-expanded:hug"] > .layout-scroll > .layout-main { padding: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="large-expanded:hug"] .layout-content--fills-pane { position: relative; inset: auto; min-height: 0; overflow: visible; padding-bottom: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="large-expanded:hug"] [data-pane-scroll]::after { display: none; } } @media (min-width: 1600px) and (max-height: 479.98px) { .layout-pane[data-sizes~="extraLarge-compact:hidden"] { display: none; } .layout-pane[data-sizes~="extraLarge-compact:fixed-360"] { flex: 0 0 var(--layout-pane-fixed-360); } .layout-pane[data-sizes~="extraLarge-compact:flexible"] { flex: 1 1 0; } .layout-pane[data-sizes~="extraLarge-compact:hug"] { flex: 0 0 auto; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="extraLarge-compact:hug"] > .layout-scroll { position: relative; top: auto; bottom: auto; margin-top: var(--layout-scroll-top); overflow: visible; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="extraLarge-compact:hug"] > .layout-scroll > .layout-main { padding: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="extraLarge-compact:hug"] .layout-content--fills-pane { position: relative; inset: auto; min-height: 0; overflow: visible; padding-bottom: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="extraLarge-compact:hug"] [data-pane-scroll]::after { display: none; } } @media (min-width: 1600px) and (min-height: 480px) and (max-height: 899.98px) { .layout-pane[data-sizes~="extraLarge-medium:hidden"] { display: none; } .layout-pane[data-sizes~="extraLarge-medium:fixed-360"] { flex: 0 0 var(--layout-pane-fixed-360); } .layout-pane[data-sizes~="extraLarge-medium:flexible"] { flex: 1 1 0; } .layout-pane[data-sizes~="extraLarge-medium:hug"] { flex: 0 0 auto; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="extraLarge-medium:hug"] > .layout-scroll { position: relative; top: auto; bottom: auto; margin-top: var(--layout-scroll-top); overflow: visible; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="extraLarge-medium:hug"] > .layout-scroll > .layout-main { padding: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="extraLarge-medium:hug"] .layout-content--fills-pane { position: relative; inset: auto; min-height: 0; overflow: visible; padding-bottom: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="extraLarge-medium:hug"] [data-pane-scroll]::after { display: none; } } @media (min-width: 1600px) and (min-height: 900px) { .layout-pane[data-sizes~="extraLarge-expanded:hidden"] { display: none; } .layout-pane[data-sizes~="extraLarge-expanded:fixed-360"] { flex: 0 0 var(--layout-pane-fixed-360); } .layout-pane[data-sizes~="extraLarge-expanded:flexible"] { flex: 1 1 0; } .layout-pane[data-sizes~="extraLarge-expanded:hug"] { flex: 0 0 auto; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="extraLarge-expanded:hug"] > .layout-scroll { position: relative; top: auto; bottom: auto; margin-top: var(--layout-scroll-top); overflow: visible; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="extraLarge-expanded:hug"] > .layout-scroll > .layout-main { padding: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="extraLarge-expanded:hug"] .layout-content--fills-pane { position: relative; inset: auto; min-height: 0; overflow: visible; padding-bottom: 0; } .layout-panes:not([data-pane-hidden]) > .layout-pane[data-sizes~="extraLarge-expanded:hug"] [data-pane-scroll]::after { display: none; } } /* panes:end */ /* Streamed page (layout_page_start/end): loading screen appears only after 150ms, disappears once .layout-content exists (:has) or parsing ends (.layout-loaded, app.js — Safari's :has goes stale while streaming). Content fades in only if the loading screen was actually visible (app.js sets .layout-was-loading), so fast pages don't flicker. */ .layout-paint-trigger { position: absolute; visibility: hidden; } .layout-loading { animation: layout-appear 0.2s ease-out 0.15s both; } .layout-main:has(> .layout-content) > .layout-loading, .layout-loaded .layout-loading { display: none; } .layout-was-loading .layout-main > .layout-content { animation: layout-appear 0.2s ease-out both; } /* The real page after a placeholder page (.claude/rules/placeholders.md) shows its own placeholder at once, then its content fades in over it while it fades out: a crossfade inside the page. Chrome's page-to-page crossfade often began from a white picture of the placeholder page (user reports, 2026-10-18). Absolute in .layout-scroll with the main box's padding, the fading placeholder keeps the content's place. Never a positioned .layout-main: a full-height box measures from .layout-scroll, and in a contentless main it shrank to its minimum (map quiz, 2026-10-19). */ [data-placeholder-arrival] .layout-loading { animation: none; } [data-placeholder-arrival] .layout-main:has(> .layout-content) > .layout-loading, [data-placeholder-arrival].layout-loaded .layout-loading { display: block; position: absolute; inset: 0; /* The whole scroll box like .layout-main: its own 840px cap would hold the padding too, and its placeholder sat 16px in on a wide screen. */ width: auto; max-width: none; margin: 0; padding: inherit; box-sizing: border-box; pointer-events: none; animation: layout-placeholder-out 0.25s ease-out forwards; } [data-placeholder-arrival] .layout-main > .layout-content, [data-placeholder-arrival] .app-bar__title { animation: layout-appear 0.25s ease-out both; } @keyframes layout-placeholder-out { to { opacity: 0; visibility: hidden; } } @media (prefers-reduced-motion: reduce) { [data-placeholder-arrival] .layout-main:has(> .layout-content) > .layout-loading, [data-placeholder-arrival].layout-loaded .layout-loading { display: none; } [data-placeholder-arrival] .layout-main > .layout-content, [data-placeholder-arrival] .app-bar__title { animation: none; } } @keyframes layout-appear { from { opacity: 0; } } /* A screen's placeholder (.claude/rules/placeholders.md): its layout with static blocks for text, icons and media, like iOS's .redacted(reason: .placeholder) (user decision, 2026-10-18: no shimmer). As there, each block is its own text color, faint: dark text gives a light gray block, primary text a light primary one. The text itself is en spaces, so it draws nothing. */ .layout-placeholder { max-width: none; } .ui-placeholder__text { background: color-mix(in srgb, currentColor 14%, transparent); border-radius: 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .ui-placeholder__icon { display: inline-block; width: 1em; height: 1em; border-radius: 50%; background: color-mix(in srgb, currentColor 14%, transparent); } .ui-placeholder__media { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); } /* A filled control has no fill in a placeholder, only its label as a faint primary block, like an iOS button's label (user report, 2026-10-18: the dark "Start App" box). Pseudo-element text (the dots between facts) draws nothing. */ :is(.ui-placeholder, [data-placeholder-pane] .app-bar) :is(.ui-button--filled, .ui-button--tonal, .ui-icon-button--filled, .ui-icon-button--tonal, .ui-fab) { background: transparent; box-shadow: none; color: var(--md-primary); } /* A selected segment looks like the others, so the control reads as one light shape. */ .ui-placeholder .ui-segmented-button__input:checked + .ui-segmented-button__pill { background: var(--md-secondary-container); color: var(--md-on-secondary-container); } .ui-placeholder ::before, .ui-placeholder ::after { color: transparent; } /* The content pane (.layout-content, or the standalone .layout-loading screen before it exists): defaults to a centered single column, capped at --layout-centered-max-width (Medium/Expanded's own boundary — content stops growing where it already looks intentional, rather than stretching edge to edge on a wide screen). Floored so the viewport itself never needs to go below 320px (Compact's own boundary, also iPad Split View's narrowest pane) — the pane's own min-width is 320px minus .layout-main's 16px side padding, not 320px itself, since that padding sits outside this element. Below 320px viewport the pane overflows horizontally instead of shrinking further. */ .layout-content, .layout-loading { width: 100%; min-width: calc(320px - 2 * var(--spacing-medium)); max-width: var(--layout-centered-max-width); margin-inline: auto; } .layout-content { display: flex; flex-direction: column; gap: var(--spacing-medium); } /* layout_page_end(..., hasFab: true) — a fixed ui_fab() floats over the scroll region's own end, so the pane reserves room below its last child equal to the largest ui_fab() size (80px) + its own bottom offset (M3 spec: that's enough clearance, no extra gap needed), even on a page using the smaller medium FAB (harmless extra slack, not worth a param). */ .layout-content--has-fab { padding-bottom: calc(80px + var(--spacing-medium)); } /* layout_page_end(..., layout: 'centeredFullHeight'): the content fills exactly the visible pane's height and never scrolls (a full-height map card). Absolute in the fixed-size .layout-scroll with .layout-main's own padding, so no :has() is needed (Safari misses it while streaming). Its last child takes the remaining height; a ui_card() there gives it to its media. Floored like the width: a viewport under 320px tall scrolls the pane instead of squashing the map (320px − the 64px bar − its 16px bottom gap). */ .layout-content--fills-pane { position: absolute; top: 0; bottom: calc(var(--spacing-medium) + env(safe-area-inset-bottom)); left: max(var(--spacing-medium), env(safe-area-inset-left)); right: max(var(--spacing-medium), env(safe-area-inset-right)); width: auto; min-height: calc(320px - 64px - var(--spacing-medium)); /* Like a scrolling screen's .layout-scroll: the box reaches under the browser's bars, content taller than the pane scrolls behind them. */ overflow-y: auto; overscroll-behavior: contain; } /* In the flex column the [data-pane-scroll] spacer would add the column's gap too: its negative margin cancels it, so with no bars it adds nothing. */ .layout-content--fills-pane::after { margin-top: calc(-1 * var(--spacing-medium)); } /* The last child grows into the free height but never shrinks below its content: taller content then scrolls, and the spacer follows its real end. */ .layout-content--fills-pane > :last-child { flex: 1 1 auto; min-height: min-content; } .layout-content--fills-pane > .ui-card > .ui-card__media { flex: 1 1 auto; height: auto; min-height: 0; } .layout-content--fills-pane > .ui-card > .ui-card__body { flex: none; } /* layout: 'fill': the same full height, and the whole pane's width without the column cap. The gaps are padding, so the box ends at the pane edge like .layout-scroll: its scrollbar thumb, and that of a child reaching into the padding, sits at that edge. */ .layout-content--fill { max-width: none; bottom: 0; left: 0; right: 0; /* The spacer for Safari's bars already clears the last row; the 16px fills in only where no bars stand. */ padding-bottom: max(env(safe-area-inset-bottom), var(--spacing-medium) - var(--layout-behind-bars)); padding-inline: max(var(--spacing-medium), env(safe-area-inset-left)) max(var(--spacing-medium), env(safe-area-inset-right)); } /* layout_page_end(..., gridCount: N) — an M3 column grid instead of the centered column, for real content only: layout_page_end() never adds this class for the empty/error fallback, since one placeholder message stretched across grid columns would look broken, not adaptive. M3's 4/8/12-column system (compact/medium/expanded+): every card spans 4 columns, so it's the same width everywhere and lines up with future elements (nav rail, detail pane) built on the same column grid — 1 per row at compact, 2 at medium, 3 from expanded up. No 4th tier: this deliberately caps at 3 per row rather than adding a Large/Extra-large step. Capped at --layout-grid-max-width, a separate token from the centered column's (both default to the same 840px today, so a card-grid page and a centered-text page share one page width/margins unless an app's own style.css overrides just one of them) — not Large's own 1600px ceiling, so the grid just stops widening its 3 cards past that point rather than gaining side margin, since cards narrower than that still read fine at 3-up. Rejected: an auto-fit/:has()-based sparse-column fix (tried and reverted) — auto-fit's 1fr tracks stretch a sparse card to fill the whole cap instead of staying card-width and centered, and any :has()-based variant is unreliable here: Safari doesn't re-check :has() for content that arrives while the page is still streaming (.claude/rules/streaming.md), which is exactly how these cards arrive — headless Playwright doesn't reproduce that, so a passing test could still ship the wrong column count to a real phone. */ .layout-content--grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-medium); max-width: var(--layout-grid-max-width); } .layout-content--grid > * { grid-column: span 4; } /* A grid sparse enough to fit one row (1-2 cards, PHP knows the count via layout_page_end()'s $gridCount) shares that row out evenly instead of leaving empty trailing columns: 1 card spans the full width (same as the centered layout), 2 cards split it in half. 2 cards at medium and 3+ cards anywhere already tile full rows. */ .layout-content--count-1 > * { grid-column: 1 / -1; } @media (min-width: 600px) { .layout-content--grid { grid-template-columns: repeat(8, 1fr); } } @media (min-width: 840px) { .layout-content--grid { grid-template-columns: repeat(12, 1fr); } .layout-content--count-2 > * { grid-column: span 6; } } .layout-main h1 { font-size: var(--md-headline-medium-size); font-weight: var(--md-headline-medium-weight); margin: 0 0 var(--spacing-large); color: var(--md-on-background); } /* Plain long-form content (legal/'s imprint + privacy pages, root CLAUDE.md's "h1, p, ul") — .layout-content is a flex column with its own gap, so these only set type/color and reset each tag's default margin to 0 (h2 keeps a little extra margin-top, to read as a new section rather than just the next paragraph); the gap does the rest. */ .layout-main h2 { font-size: var(--md-title-large-size); font-weight: var(--md-title-large-weight); margin: var(--spacing-medium) 0 0; color: var(--md-on-background); } .layout-main h3 { font-size: var(--md-title-medium-size); font-weight: var(--md-title-medium-weight); margin: 0; color: var(--md-on-background); } .layout-main p { margin: 0; font-size: var(--md-body-large-size); font-weight: var(--md-body-large-weight); line-height: 1.5; } .layout-main ul { margin: 0; padding-left: var(--spacing-large); } .layout-main li { font-size: var(--md-body-large-size); font-weight: var(--md-body-large-weight); line-height: 1.5; } /* A bare "a" tag selector here would beat ui_button()/ui_fab()'s own single-class color rule on specificity alone (a type selector + a class beats a class alone) and silently recolor every button site-wide — a real regression this caused once already. A plain prose link gets this class explicitly instead. */ .ui-text-link { color: var(--md-primary); } /* Self-hosted (Apache 2.0 licensed, see google/material-design-icons) — avoids a third-party request to Google's CDN. */ /* Subset — generated by bin/build-icons.sh, see .claude/rules/design.md */ @font-face { font-family: 'Material Symbols Rounded'; font-style: normal; font-weight: 100 700; font-display: block; src: url('/_assets/material-symbols-rounded.woff2?v=09df5497') format('woff2'); } /* ui_icon() — Material Symbols Rounded, rendered via ligature text; icon inherits color from its parent. Size = the square frame (line-height 1); the font draws its glyph in 20/24 of it, e.g. small 20px → 16.67px glyph (Figma). */ .ui-icon { font-family: 'Material Symbols Rounded'; font-weight: 200; font-style: normal; line-height: 1; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; font-variation-settings: 'FILL' 0, 'GRAD' 0, 'opsz' 24; } .ui-icon--small { font-size: 20px; } .ui-icon--medium { font-size: 24px; } .ui-icon--large { font-size: 40px; } .ui-icon--xlarge { font-size: 48px; } .ui-icon--xxlarge { font-size: 96px; } /* ui_button() — M3 pill buttons, ported from ~/Develop/Python ui/1_button.py (filled/outlined/tonal/text, medium/small) */ .ui-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-xsmall); box-sizing: border-box; text-decoration: none; white-space: nowrap; font-family: var(--font); font-size: var(--md-label-large-size); font-weight: var(--md-label-large-weight); cursor: pointer; } /* Save mode (postFields): same busy pattern as .ui-fab — locked at once, spinner after 150ms. */ /* :where() keeps this reset below the variants, so a