/* ========================================================================= Site stylesheet — iOS 26 inspired ("Liquid Glass" navigation layer). House rules (CLAUDE.md, Rule 2): - every value comes from a --token; derived sizes use calc(); grids use fr - lengths in rem / em only (never px); breakpoint 48em - every element is styled separately in the MOBILE block and the DESKTOP block; shared: tokens, reset, glass materials, tints and motion (keyframes / transitions) ========================================================================= */ /* ---- 1. Tokens ---------------------------------------------------------- */ :root { --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --step-base: 1rem; --step-ratio: 1.25; --step-1: calc(var(--step-base) * var(--step-ratio)); --step-2: calc(var(--step-1) * var(--step-ratio)); --step-3: calc(var(--step-2) * var(--step-ratio)); --step-4: calc(var(--step-3) * var(--step-ratio)); --step-small: calc(var(--step-base) / 1.125); --step-tiny: calc(var(--step-base) * 0.6875); --space: 1rem; --space-2xs: calc(var(--space) * 0.125); --space-xs: calc(var(--space) * 0.25); --space-s: calc(var(--space) * 0.5); --space-m: calc(var(--space) * 1.5); --space-l: calc(var(--space) * 2); --space-xl: calc(var(--space) * 3); --line: 0.0625rem; --focus-ring: 0.1875rem; --radius-s: 0.625rem; --radius: 0.875rem; --radius-l: 1.25rem; --radius-xl: 1.75rem; --radius-pill: 62.5rem; --tap: 2.75rem; --tile: 2.25rem; --island-h: 3.875rem; --icon: 1.25rem; --measure: 38rem; --content-max: 72rem; --narrow-max: 28rem; --prose-max: 44rem; --card-min: 17rem; --dot: 0.5rem; --dot-active: 1.75rem; --control: 2.25rem; --slide-ratio-mobile: 4 / 5; --slide-ratio-desktop: 21 / 9; --ease-spring: cubic-bezier(0.32, 0.72, 0, 1); --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-fast: 0.2s; --dur: 0.35s; --dur-sheet: 0.5s; --slide-duration: 7s; --bg: #f5f5f7; --surface: #ffffff; --text: #1d1d1f; --text-2: #5e5e63; --border: #e3e3e8; --separator: rgba(60, 60, 67, 0.14); --fill: rgba(120, 120, 128, 0.12); /* Accent: every shade derives from --accent-base (brand amber). Change it here and the site follows. */ --accent-base: #f9ae00; --shade-light: #ffffff; --shade-dark: #000000; --accent-50: color-mix(in srgb, var(--accent-base) 8%, var(--shade-light)); --accent-100: color-mix(in srgb, var(--accent-base) 16%, var(--shade-light)); --accent-200: color-mix(in srgb, var(--accent-base) 32%, var(--shade-light)); --accent-300: color-mix(in srgb, var(--accent-base) 55%, var(--shade-light)); --accent-400: color-mix(in srgb, var(--accent-base) 78%, var(--shade-light)); --accent-500: var(--accent-base); --accent-600: color-mix(in srgb, var(--accent-base) 86%, var(--shade-dark)); --accent-700: color-mix(in srgb, var(--accent-base) 72%, var(--shade-dark)); --accent-800: color-mix(in srgb, var(--accent-base) 56%, var(--shade-dark)); --accent-900: color-mix(in srgb, var(--accent-base) 42%, var(--shade-dark)); --accent-950: color-mix(in srgb, var(--accent-base) 28%, var(--shade-dark)); /* Roles (contrast-checked): fills use --accent with --accent-text; text/links use --accent-ink. An optional brand colour (/admin/appearance, e.g. the EU preset) sets --brand-* in /theme.css; without it every role falls back to the accent shades. */ --accent: var(--accent-500); --accent-hover: var(--accent-400); --accent-text: var(--brand-on-accent, var(--ink)); --accent-ink: var(--brand-ink, var(--accent-800)); --accent-ink-hover: var(--brand-ink-hover, var(--accent-900)); --accent-soft: var(--accent-100); --accent-line: var(--accent-300); --focus-color: var(--brand-ink, var(--accent-700)); --ink: #1d1d1f; /* Icon tile colours (tint-* classes) */ /* Natural, muted palette (serious B2B look; no rainbow): the class names stay, the hues are calm. White icons on every tile keep >= 4.5:1 (steel 6.6, graphite 7.9, sage 5.4, olive 5.7, bronze 5.6...). */ --tint-blue-color: #4a6072; /* steel */ --tint-indigo-color: #4b5162; /* graphite */ --tint-teal-color: #52706a; /* sage */ --tint-green-color: #5d6b47; /* olive */ --tint-amber-color: var(--accent-700); /* brand bronze */ --tint-orange-color: #8b5e3c; /* bronze */ --tint-purple-color: #6e5f66; /* taupe */ --tint-slate-color: #5f6b7a; /* slate */ --tint-gray-color: #76767b; /* stone */ --tile-highlight: rgba(255, 255, 255, 0.28); --glass-dark-solid: rgba(16, 18, 24, 0.72); --error-bg: #fdecec; --error: #a3191c; --ok-bg: #e8f6ee; --ok: #1d6b3d; --info-bg: #eaf0fd; --info: #1f3f99; --on-image: #ffffff; --backdrop: rgba(0, 0, 0, 0.28); --glass-bg: rgba(255, 255, 255, 0.72); --glass-bg-strong: rgba(250, 250, 252, 0.86); --glass-rim: rgba(255, 255, 255, 0.75); --glass-edge: rgba(0, 0, 0, 0.07); --glass-selected: rgba(0, 0, 0, 0.06); --glass-nav: rgba(255, 255, 255, 0.8); --dot-bg: rgba(0, 0, 0, 0.22); --switch-on: var(--accent-500); --switch-off: rgba(120, 120, 128, 0.32); --knob: #ffffff; --knob-shadow: 0 0.1875rem 0.5rem rgba(0, 0, 0, 0.15), 0 0.1875rem 0.0625rem rgba(0, 0, 0, 0.06); --switch-w: 2.875rem; --switch-h: 1.75rem; --knob-size: 1.5rem; --segment-h: 2rem; --logo-plate: var(--shade-light); --logo-size-m: 4.5rem; --logo-size-d: 6rem; --field-h: 3rem; --textarea-h: 10rem; --radio: 1.5rem; --contact-sticky: 6rem; --footer-logo: 3rem; --row-h: 3rem; --admin-rail: 16rem; --read-max: 40rem; --article-aside: 18rem; --article-head-max: 52rem; --thumb: 5rem; --step-dot: 1.5rem; /* Desktop form geometry: single column, field width = expected answer length (Baymard) */ --form-main-min: 34rem; --form-side-min: 18rem; --field-max: 30rem; --field-short: 16rem; --topic-min: 13rem; /* Forms: own layered container (tinted panel), white section cards, field borders >= 3:1 (WCAG 1.4.11) */ --form-bg: color-mix(in srgb, var(--accent-base) 12%, var(--surface)); --form-ring: var(--accent-200); --form-section: var(--surface); --field-bg: var(--surface); --field-border: #86868b; --slide-min-desktop: 26rem; --slider-controls-reserve: 19rem; --segment-pad: calc(var(--space-2xs) * 1.5); --tile-s: 1.875rem; --step-caption: calc(var(--step-base) * 0.78); --badge: 3.25rem; --consent-w: 25rem; --consent-wide: 52rem; --glass-blur: blur(1.5rem) saturate(1.5); --glass-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.12), 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.06); --glass-sheen: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.9), inset 0 -0.0625rem 0 rgba(255, 255, 255, 0.3); --glass-dark-bg: rgba(16, 18, 24, 0.55); /* >= 4.5:1 for white text over any photo (0.45 x white -> luminance 0.17) */ --glass-dark-rim: rgba(255, 255, 255, 0.22); --card-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.06); color-scheme: light; /* Article editor + article components (Rule 23) */ --prose-wide: 56rem; --ed-side: 22rem; --ed-rich-min: 7rem; --ed-code-min: 14rem; --ed-thumb: 4.5rem; --ed-library-min: 9rem; --ed-tool: 1.875rem; --embed-card-max: 28rem; --stat-size: calc(var(--step-base) * 2.25); /* 2FA setup QR (always dark on light, also in dark mode: scanners expect it) */ --qr-ink: var(--shade-dark); --qr-plate: var(--shade-light); --qr-size-d: 15rem; --qr-size-m: 14rem; /* Brand mark (header logo pill): the brand colour when one is set, otherwise the text colour. */ --mark-bg: var(--brand-ink, var(--text)); /* Frosted panels for sticky bars that carry text over scrolling content (editor toolbars, tabs, action bar). 88 % surface + 1 rem blur: research range 70-90 % for text-bearing glass (NN/g, WCAG 4.5:1 over any content). */ --panel-glass-bg: color-mix(in srgb, var(--surface) 88%, transparent); --panel-glass-blur: blur(1rem) saturate(1.4); --panel-glass-edge: var(--separator); --drag-opacity: 0.6; } /* Dark palette: OS setting unless the visitor chose Light; or the visitor chose Dark. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0b0c0f; --surface: #16171b; --text: #f5f5f7; --text-2: #a1a1a6; --border: #2c2c31; --separator: rgba(84, 84, 88, 0.5); --fill: rgba(120, 120, 128, 0.24); --accent: var(--accent-600); --accent-hover: var(--accent-500); --accent-ink: var(--brand-ink-dark, var(--accent-400)); --accent-ink-hover: var(--brand-ink-hover-dark, var(--accent-300)); --accent-soft: color-mix(in srgb, var(--accent-base) 20%, transparent); --focus-color: var(--brand-ink-dark, var(--accent-400)); --mark-bg: var(--brand-ink-dark, var(--text)); --ink: #1d1d1f; --error-bg: #3a1618; --error: #ffb4b0; --ok-bg: #12301f; --ok: #9fe0b8; --info-bg: #17223d; --info: #b6c8ff; --backdrop: rgba(0, 0, 0, 0.5); --glass-bg: rgba(30, 31, 36, 0.7); --glass-bg-strong: rgba(28, 29, 34, 0.9); --glass-rim: rgba(255, 255, 255, 0.14); --glass-edge: rgba(0, 0, 0, 0.5); --glass-selected: rgba(255, 255, 255, 0.1); --glass-nav: rgba(28, 29, 34, 0.8); --dot-bg: rgba(255, 255, 255, 0.3); --switch-on: var(--accent-600); --switch-off: rgba(120, 120, 128, 0.36); --form-bg: color-mix(in srgb, var(--accent-base) 8%, var(--bg)); --form-ring: color-mix(in srgb, var(--accent-base) 30%, transparent); --form-section: #1f2026; --field-bg: #111215; --glass-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.5), 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.4); --glass-sheen: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.12), inset 0 -0.0625rem 0 rgba(255, 255, 255, 0.04); --card-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.4); color-scheme: dark; } } :root[data-theme="dark"] { --bg: #0b0c0f; --surface: #16171b; --text: #f5f5f7; --text-2: #a1a1a6; --border: #2c2c31; --separator: rgba(84, 84, 88, 0.5); --fill: rgba(120, 120, 128, 0.24); --accent: var(--accent-600); --accent-hover: var(--accent-500); --accent-ink: var(--brand-ink-dark, var(--accent-400)); --accent-ink-hover: var(--brand-ink-hover-dark, var(--accent-300)); --accent-soft: color-mix(in srgb, var(--accent-base) 20%, transparent); --focus-color: var(--brand-ink-dark, var(--accent-400)); --mark-bg: var(--brand-ink-dark, var(--text)); --ink: #1d1d1f; --error-bg: #3a1618; --error: #ffb4b0; --ok-bg: #12301f; --ok: #9fe0b8; --info-bg: #17223d; --info: #b6c8ff; --backdrop: rgba(0, 0, 0, 0.5); --glass-bg: rgba(30, 31, 36, 0.7); --glass-bg-strong: rgba(28, 29, 34, 0.9); --glass-rim: rgba(255, 255, 255, 0.14); --glass-edge: rgba(0, 0, 0, 0.5); --glass-selected: rgba(255, 255, 255, 0.1); --glass-nav: rgba(28, 29, 34, 0.8); --dot-bg: rgba(255, 255, 255, 0.3); --switch-on: var(--accent-600); --switch-off: rgba(120, 120, 128, 0.36); --form-bg: color-mix(in srgb, var(--accent-base) 8%, var(--bg)); --form-ring: color-mix(in srgb, var(--accent-base) 30%, transparent); --form-section: #1f2026; --field-bg: #111215; --glass-shadow: 0 0.75rem 2.5rem rgba(0, 0, 0, 0.5), 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.4); --glass-sheen: inset 0 0.0625rem 0 rgba(255, 255, 255, 0.12), inset 0 -0.0625rem 0 rgba(255, 255, 255, 0.04); --card-shadow: 0 0.125rem 0.75rem rgba(0, 0, 0, 0.4); color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* Visitor display preferences (display_options_vddmj, applied by assets/prefs.js) */ :root[data-text="large"] { --step-base: 1.125rem; } /* "Reduce transparency" / "Increase contrast" in the OS: every glass surface becomes solid (Apple HIG, MDN). */ @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { :root { --panel-glass-bg: var(--surface); --panel-glass-blur: none; --glass-bg: var(--glass-bg-strong); --glass-nav: var(--glass-bg-strong); } } /* ---- 2. Minimal shared reset ------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } img { max-inline-size: 100%; block-size: auto; } :focus-visible { outline: var(--focus-ring) solid var(--focus-color); outline-offset: calc(var(--focus-ring) / 1.5); } /* ---- 3. Materials and tints (shared) ------------------------------------ */ .glass { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); border: var(--line) solid var(--glass-rim); box-shadow: var(--glass-shadow), var(--glass-sheen); } .glass-dark { background: var(--glass-dark-bg); -webkit-backdrop-filter: blur(1.25rem) saturate(1.6); backdrop-filter: blur(1.25rem) saturate(1.6); border: var(--line) solid var(--glass-dark-rim); box-shadow: inset 0 var(--line) 0 var(--glass-dark-rim); } @supports not ((backdrop-filter: blur(1rem)) or (-webkit-backdrop-filter: blur(1rem))) { .glass { background: var(--glass-bg-strong); } .glass-dark { background: var(--glass-dark-solid); } } .tint-blue { --tint: var(--tint-blue-color); } .tint-indigo { --tint: var(--tint-indigo-color); } .tint-teal { --tint: var(--tint-teal-color); } .tint-green { --tint: var(--tint-green-color); } .tint-amber { --tint: var(--tint-amber-color); } .tint-orange { --tint: var(--tint-orange-color); } .tint-purple { --tint: var(--tint-purple-color); } .tint-slate { --tint: var(--tint-slate-color); } .tint-gray { --tint: var(--tint-gray-color); } /* ---- 4. MOBILE (below 48em) -------------------------------------------- */ @media (max-width: 47.9375em) { html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-padding-block-start: calc(var(--space-xl) * 1.5); overflow-x: clip; } body { margin: 0; font: var(--step-base)/1.5 var(--font-body); background: var(--bg); color: var(--text); padding-block-end: calc(var(--island-h) + var(--space-l) + env(safe-area-inset-bottom, 0rem)); -webkit-tap-highlight-color: transparent; overflow-x: clip; overflow-wrap: anywhere; } .wrap { padding-inline: var(--space); } .skip-link { position: absolute; inset-inline-start: var(--space); inset-block-start: calc(var(--space-xl) * -2); padding: var(--space-s) var(--space); background: var(--accent); color: var(--accent-text); border-radius: var(--radius-pill); z-index: 100; } .skip-link:focus { inset-block-start: var(--space-s); } .visually-hidden { position: absolute; inline-size: var(--line); block-size: var(--line); overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .icon { inline-size: var(--icon); block-size: var(--icon); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* top bar: brand + burger */ header.site-header { position: sticky; inset-block-start: 0; z-index: 40; padding: calc(env(safe-area-inset-top, 0rem) + var(--space-s)) var(--space-s) 0; view-transition-name: site-header; } .bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-s); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-s); border-radius: var(--radius-pill); } .brand { display: flex; align-items: center; gap: var(--space-s); min-inline-size: 0; color: var(--text); text-decoration: none; } .brand-mark { display: grid; place-items: center; min-inline-size: var(--control); block-size: var(--control); padding-inline: var(--space-s); border-radius: var(--radius-pill); background: var(--mark-bg); color: var(--bg); font: 800 var(--step-tiny)/1 var(--font-display); letter-spacing: 0.06em; } .brand-name { font: 600 var(--step-small)/1.2 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .desk-nav { display: none; } .desk-link { display: none; } .desk-link:hover { display: none; } .desk-link[aria-current="page"] { display: none; } .desk-group[data-active="true"] { display: none; } .desk-group .icon-chevron { display: none; } .desk-cta { display: none; } .burger { display: grid; place-items: center; inline-size: var(--tap); block-size: var(--tap); border-radius: 50%; background: var(--fill); color: var(--text); } .desk-icon { display: none; } .desk-icon:hover { display: none; } .mega { display: none; } .mega:popover-open { display: none; } .mega-head { display: none; } .mega-title { display: none; } .mega-description { display: none; } .mega-grid { display: none; } .mega-item { display: none; } .mega-item:hover { display: none; } .mega-item[aria-current="page"] { display: none; } .tile-icon { display: grid; place-items: center; inline-size: var(--tile); block-size: var(--tile); border-radius: var(--radius-s); background: var(--tint, var(--accent)); color: var(--on-image); box-shadow: inset 0 var(--line) 0 var(--tile-highlight); } .tile-text { display: grid; gap: var(--space-2xs); min-inline-size: 0; } .tile-text strong { font-weight: 600; font-size: var(--step-base); } .tile-text span { color: var(--text-2); font-size: calc(var(--step-small) * 0.92); line-height: 1.35; } .staff-bar { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space); padding: var(--space-s) var(--space); font-size: var(--step-small); } .staff-bar form { display: inline; } main { padding-block: var(--space); } section { margin-block-end: var(--space-l); } article { margin: 0; } aside { margin: 0; } footer.site-footer { margin-block-start: var(--space-l); padding: var(--space-l) var(--space) var(--space-m); background: var(--surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0; color: var(--text-2); font-size: var(--step-small); } footer.site-footer p { margin: 0; } h1 { font: 700 var(--step-3)/1.15 var(--font-display); letter-spacing: -0.01em; margin: 0 0 var(--space-s); } h2 { font: 700 var(--step-2)/1.2 var(--font-display); letter-spacing: -0.01em; margin: 0 0 var(--space-s); } h3 { font: 600 var(--step-1)/1.3 var(--font-display); margin: 0 0 var(--space-xs); } p { margin: 0 0 var(--space-s); } a { color: var(--accent-ink); } ul, ol { padding-inline-start: var(--space-m); margin: 0 0 var(--space-s); } li { margin-block-end: var(--space-xs); } code { font-family: var(--font-mono); font-size: 0.9em; overflow-wrap: anywhere; } pre { max-inline-size: 100%; white-space: pre-wrap; overflow-wrap: anywhere; } img, video, iframe, svg { max-inline-size: 100%; } form { display: grid; gap: var(--space-xs); } label { font-weight: 600; margin-block-start: var(--space-s); } input:not([type="checkbox"]):not([type="radio"]) { inline-size: 100%; min-block-size: var(--tap); padding: var(--space-s) var(--space); font: inherit; font-size: 1em; color: inherit; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius); } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } .button, button[type="submit"] { display: flex; align-items: center; justify-content: center; gap: var(--space-s); inline-size: 100%; min-block-size: var(--tap); margin-block-start: var(--space-s); padding-inline: var(--space-m); font-weight: 600; color: var(--accent-text); background: var(--accent); border-radius: var(--radius-pill); text-decoration: none; } .button:hover, button[type="submit"]:hover { filter: brightness(1.08); } button.link { inline-size: auto; min-block-size: 0; margin: 0; padding: 0; color: var(--accent-ink); background: none; font-weight: 400; text-decoration: underline; } table { inline-size: 100%; max-inline-size: 100%; table-layout: fixed; border-collapse: collapse; font-size: var(--step-small); } th, td { text-align: start; padding: var(--space-xs) var(--space-s); border-block-end: var(--line) solid var(--border); white-space: normal; overflow-wrap: anywhere; } .card { background: var(--surface); border-radius: var(--radius-l); padding: var(--space); margin-block-end: var(--space); box-shadow: var(--card-shadow); } .narrow { max-inline-size: var(--narrow-max); margin-inline: auto; } .notice { padding: var(--space-s) var(--space); border-radius: var(--radius); } .muted { color: var(--text-2); font-size: var(--step-small); } .steps li { margin-block-end: var(--space-s); } code.secret { display: block; margin-block: var(--space-s); padding: var(--space-s); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius); font-size: var(--step-base); letter-spacing: 0.05em; overflow-wrap: anywhere; user-select: all; } code.secret.small { font-size: var(--step-small); letter-spacing: 0; } /* slider: rounded card, everything inside the photo */ .slider { position: relative; isolation: isolate; margin-block: var(--space-xs) var(--space-l); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface); box-shadow: var(--glass-shadow); } .slider-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow: hidden; scroll-behavior: smooth; touch-action: pan-y; } .slider-track::-webkit-scrollbar { display: none; } .slide { position: relative; display: grid; grid-template-areas: "stack"; aspect-ratio: var(--slide-ratio-mobile); scroll-snap-align: start; overflow: hidden; } .slide-media { grid-area: stack; overflow: hidden; } .slide-image { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } .slide-caption { grid-area: stack; align-self: end; margin: var(--space-s); padding: var(--space) var(--space) var(--space-m); border-radius: var(--radius-l); color: var(--on-image); } .slide-eyebrow { margin: 0 0 var(--space-xs); font-size: var(--step-tiny); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; } .slide-heading { font: 700 var(--step-2)/1.15 var(--font-display); letter-spacing: -0.01em; margin: 0 0 var(--space-s); color: var(--on-image); } .slide-text { margin: 0 0 var(--space-s); font-size: var(--step-small); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .slide-button { inline-size: auto; justify-self: start; min-block-size: var(--tap); margin-block-start: var(--space-xs); padding-inline: var(--space); background: var(--accent); color: var(--accent-text); font-size: var(--step-small); } .slide-button .icon { inline-size: 1em; block-size: 1em; } .slider-controls { position: absolute; inset-block-start: var(--space-s); inset-inline-end: var(--space-s); z-index: 2; display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-s); border-radius: var(--radius-pill); } .slider-dots { display: flex; align-items: center; gap: var(--space-xs); } .slider-dot { position: relative; inline-size: var(--dot); block-size: var(--dot); border-radius: var(--radius-pill); background: var(--dot-bg); overflow: hidden; transition: inline-size var(--dur) var(--ease-spring); } .slider-dot[aria-current="true"] { inline-size: var(--dot-active); } .slider-dot-fill { position: absolute; inset: 0; background: var(--text); border-radius: inherit; transform: scaleX(0); transform-origin: left center; } .slider-dot.is-active .slider-dot-fill { transform: scaleX(1); } .slider.is-paused .slider-dot-fill { animation-play-state: paused; } .slider-prev, .slider-next, .slider-pause { display: grid; place-items: center; inline-size: var(--control); block-size: var(--control); border-radius: 50%; color: var(--text); } .icon-prev { transform: rotate(90deg); } .icon-next { transform: rotate(-90deg); } .slider-prev { display: none; } .slider-next { display: none; } .pause-bars { inline-size: 0.625rem; block-size: 0.75rem; border-inline: 0.1875rem solid currentColor; } .slider-pause.is-play .pause-bars { inline-size: 0; block-size: 0; border-block: 0.375rem solid transparent; border-inline-start: 0.625rem solid currentColor; border-inline-end: 0; margin-inline-start: 0.1875rem; } /* content */ .intro { margin-block-end: var(--space-l); } .prose { max-inline-size: var(--prose-max); } .prose h2 { font-size: var(--step-1); margin-block: var(--space-m) var(--space-s); } .prose h3 { font-size: var(--step-base); margin-block: var(--space) var(--space-xs); } .prose li { margin-block-end: var(--space-s); } .prose h4 { font-size: var(--step-base); margin-block: var(--space) var(--space-xs); } .intro-title { font: 700 var(--step-2)/1.2 var(--font-display); letter-spacing: -0.01em; margin: 0; } .intro-head { display: grid; grid-template-columns: var(--logo-size-m) minmax(0, 1fr); align-items: center; gap: var(--space); margin-block-end: var(--space); } .intro-logo { display: grid; place-items: center; inline-size: var(--logo-size-m); aspect-ratio: 1; padding: calc(var(--space-xs) * 1.5); border-radius: var(--radius-l); background: var(--logo-plate); box-shadow: var(--card-shadow); } .intro-logo-img { display: block; inline-size: 100%; block-size: auto; } .card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space); } .feature-card { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border-radius: var(--radius-l); overflow: hidden; box-shadow: var(--card-shadow); } .feature-image { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .feature-body { padding: var(--space); } .feature-body h3, .card-title { font-size: var(--step-1); margin: 0 0 var(--space-s); } .feature-body h3 a, .card-title a { color: var(--text); text-decoration: none; } .more { display: inline-flex; align-items: center; gap: var(--space-xs); margin-block-start: var(--space-s); color: var(--text); font-size: var(--step-small); font-weight: 600; text-decoration: underline; text-decoration-color: var(--border); text-decoration-thickness: var(--line); text-underline-offset: 0.3em; } .feature-card.is-linked { position: relative; cursor: pointer; } .card-link { color: inherit; text-decoration: none; } .card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .card-link:focus-visible { outline: none; } .feature-card.is-linked:has(.card-link:focus-visible) { outline: var(--focus-ring) solid var(--focus-color); outline-offset: var(--space-2xs); } .more .icon, .more-link .icon { inline-size: 1em; block-size: 1em; transition: transform var(--dur) var(--ease-spring); } .more-link { display: inline-flex; align-items: center; gap: var(--space-xs); min-block-size: var(--tap); color: var(--accent-ink); font-weight: 600; text-decoration: none; } .text-section { margin-block-end: var(--space-l); } .cta { margin-block-end: var(--space-l); } .latest { margin-block-start: var(--space-l); } /* bottom island (iOS 26 floating tab bar + menu island) */ .island { position: fixed; z-index: 50; inset-inline: var(--space-s); inset-block-end: calc(var(--space-s) + env(safe-area-inset-bottom, 0rem)); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--space-s); view-transition-name: island; } .island-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-2xs); margin: 0; padding: var(--space-xs); list-style: none; border-radius: var(--radius-pill); background: var(--glass-nav); transition: padding var(--dur) var(--ease-spring); } .island-tabs li { margin: 0; } .island-tab { display: grid; justify-items: center; align-content: center; gap: var(--space-2xs); min-block-size: calc(var(--island-h) - var(--space-s)); padding-inline: var(--space-2xs); border-radius: var(--radius-pill); color: var(--text-2); text-decoration: none; transition: min-block-size var(--dur) var(--ease-spring), background var(--dur-fast); } .island-tab .icon { inline-size: calc(var(--icon) * 1.15); block-size: calc(var(--icon) * 1.15); } .island-tab[aria-current="page"] { color: var(--accent-ink); background: var(--glass-selected); } .island-label { font-size: var(--step-tiny); font-weight: 600; line-height: 1; overflow-wrap: normal; white-space: nowrap; transition: opacity var(--dur-fast), block-size var(--dur) var(--ease-spring); } .island-menu { display: grid; place-items: center; inline-size: var(--island-h); block-size: var(--island-h); border-radius: 50%; background: var(--glass-nav); color: var(--text); transition: inline-size var(--dur) var(--ease-spring), block-size var(--dur) var(--ease-spring); } .island.is-compact .island-tabs { padding: var(--space-2xs); } .island.is-compact .island-label { opacity: 0; block-size: 0; } .island.is-compact .island-tab { min-block-size: max(var(--tap), calc(var(--island-h) * 0.7)); } .island.is-compact .island-menu { inline-size: calc(var(--island-h) * 0.8); block-size: calc(var(--island-h) * 0.8); } /* slide-up menu sheet */ .sheet { position: fixed; inset: auto 0 0; display: none; margin: 0 auto; inline-size: 100%; max-inline-size: 40rem; max-block-size: calc(100% - var(--space-xl)); padding: 0 0 env(safe-area-inset-bottom, 0rem); border: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow), var(--glass-sheen); color: var(--text); overflow: hidden; grid-template-rows: auto auto 1fr; transform: translateY(100%); transition: transform var(--dur-sheet) var(--ease-spring), display var(--dur-sheet) allow-discrete, overlay var(--dur-sheet) allow-discrete; } .sheet[open] { display: grid; transform: translateY(var(--sheet-drag, 0rem)); } .sheet.is-dragging { transition: none; } .sheet:focus { outline: none; } .sheet::backdrop { background: transparent; transition: background var(--dur-sheet) var(--ease-out), display var(--dur-sheet) allow-discrete, overlay var(--dur-sheet) allow-discrete; } .sheet[open]::backdrop { background: var(--backdrop); } .sheet-grabber { display: grid; place-items: center; padding-block: var(--space-s) var(--space-xs); touch-action: none; cursor: grab; } .sheet-handle { inline-size: 2.25rem; block-size: 0.3125rem; border-radius: var(--radius-pill); background: var(--text-2); opacity: 0.45; } .sheet-head { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 var(--space) var(--space-s) var(--space-m); touch-action: none; } .sheet-title { margin: 0; font: 700 var(--step-1)/1.2 var(--font-display); } .sheet-close { display: grid; place-items: center; inline-size: var(--control); block-size: var(--control); border-radius: 50%; background: var(--fill); color: var(--text-2); } .sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space) var(--space-l); } .sheet-group { margin: 0 0 var(--space); } .sheet-group-title { margin: var(--space-s) var(--space) var(--space-xs); font: 600 var(--step-tiny)/1.2 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); } .sheet-list { margin: 0; padding: 0; list-style: none; background: var(--surface); border-radius: var(--radius-l); overflow: hidden; } .sheet-list li + li { border-block-start: var(--line) solid var(--separator); } .sheet-item { display: grid; grid-template-columns: var(--tile) 1fr auto; align-items: center; gap: var(--space); min-block-size: 3.5rem; margin: 0; padding: var(--space-s) var(--space); color: var(--text); text-decoration: none; transition: background var(--dur-fast); } button.sheet-item { inline-size: 100%; text-align: start; } .sheet-item:active { background: var(--fill); } .sheet-item[aria-current="page"] { background: var(--accent-soft); } .sheet-item.is-cta .tile-icon { box-shadow: 0 0 0 var(--focus-ring) var(--accent-soft); } .icon-go { inline-size: 1rem; block-size: 1rem; color: var(--text-2); } /* ---- consent switch (real checkbox on top, drawn track + knob underneath) ---- */ .m-switch { position: relative; display: inline-grid; flex: none; inline-size: var(--switch-w); block-size: var(--switch-h); } .m-switch-input { appearance: none; position: absolute; inset: 0; z-index: 1; inline-size: 100%; block-size: 100%; min-block-size: 0; margin: 0; padding: 0; border: 0; border-radius: var(--radius-pill); background: none; opacity: 0; cursor: pointer; } .m-switch-track { display: block; inline-size: 100%; block-size: 100%; border-radius: var(--radius-pill); background: var(--switch-off); box-shadow: inset 0 0 0 var(--line) var(--separator); transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .m-switch-knob { position: absolute; inset-block-start: calc((var(--switch-h) - var(--knob-size)) / 2); inset-inline-start: calc((var(--switch-h) - var(--knob-size)) / 2); inline-size: var(--knob-size); block-size: var(--knob-size); border-radius: 50%; background: var(--knob); box-shadow: var(--knob-shadow); transition: transform var(--dur) var(--ease-spring); } .m-switch-input:checked + .m-switch-track { background: var(--switch-on); box-shadow: none; } .m-switch-input:checked + .m-switch-track .m-switch-knob { transform: translateX(calc(var(--switch-w) - var(--switch-h))); } .m-switch-input:focus-visible + .m-switch-track { outline: var(--focus-ring) solid var(--focus-color); outline-offset: var(--space-2xs); } .m-switch-input:active + .m-switch-track .m-switch-knob { inline-size: calc(var(--knob-size) * 1.2); } .d-switch { display: none; } .d-switch-input { display: none; } .d-switch-track { display: none; } .d-switch-knob { display: none; } .d-switch-input:checked + .d-switch-track { display: none; } .d-switch-input:checked + .d-switch-track .d-switch-knob { display: none; } .d-switch-input:focus-visible + .d-switch-track { display: none; } .d-switch-input:active + .d-switch-track .d-switch-knob { display: none; } /* ---- consent + display preferences ---- */ .m-cookie-fab { position: fixed; z-index: 45; inset-inline-end: var(--space-s); inset-block-end: calc(var(--island-h) + var(--space) + env(safe-area-inset-bottom, 0rem)); display: grid; place-items: center; inline-size: var(--tap); block-size: var(--tap); border-radius: 50%; background: var(--glass-nav); color: var(--text); transition: opacity var(--dur-fast), transform var(--dur) var(--ease-spring); } .m-cookie-fab .icon { inline-size: calc(var(--icon) * 1.1); block-size: calc(var(--icon) * 1.1); } html.consent-open .m-cookie-fab { opacity: 0; transform: scale(0.6); pointer-events: none; } .m-consent { position: fixed; z-index: 60; inset: auto var(--space-s) calc(var(--island-h) + var(--space) + env(safe-area-inset-bottom, 0rem)); display: none; margin: 0 auto; inline-size: auto; max-inline-size: 36rem; max-block-size: calc(100% - var(--space-xl) * 2); padding: 0; border: var(--line) solid var(--glass-rim); border-radius: var(--radius-xl); background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow), var(--glass-sheen); color: var(--text); overflow: hidden; transform: translateY(calc(100% + var(--space-xl))); transition: transform var(--dur-sheet) var(--ease-spring), display var(--dur-sheet) allow-discrete, overlay var(--dur-sheet) allow-discrete; } .m-consent[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; transform: translateY(var(--consent-drag, 0rem)); } .m-consent:focus { outline: none; } .m-consent.is-dragging { transition: none; } .m-consent::backdrop { background: transparent; transition: background var(--dur-sheet) var(--ease-out), display var(--dur-sheet) allow-discrete, overlay var(--dur-sheet) allow-discrete; } .m-consent[open]::backdrop { background: var(--backdrop); } .m-consent-grabber { display: grid; place-items: center; padding-block: var(--space-s) var(--space-xs); touch-action: none; cursor: grab; } .m-consent-handle { inline-size: 2.25rem; block-size: 0.3125rem; border-radius: var(--radius-pill); background: var(--text-2); opacity: 0.45; } .m-consent-intro { display: grid; justify-items: center; gap: var(--space-s); padding: var(--space-xs) var(--space-m) var(--space-m); text-align: center; } .m-consent-badge { display: grid; place-items: center; inline-size: var(--badge); block-size: var(--badge); border-radius: var(--radius); background: var(--tint, var(--accent)); color: var(--on-image); box-shadow: inset 0 var(--line) 0 var(--tile-highlight); } .m-consent-badge .icon { inline-size: calc(var(--icon) * 1.4); block-size: calc(var(--icon) * 1.4); } .m-consent-title { margin: 0; font: 700 var(--step-1)/1.2 var(--font-display); } .m-consent-text { margin: 0; color: var(--text-2); font-size: var(--step-small); line-height: 1.45; } .m-consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); inline-size: 100%; margin-block-start: var(--space-xs); } .m-consent-choice { min-block-size: var(--tap); padding-inline: var(--space); border-radius: var(--radius-pill); background: var(--text); color: var(--bg); font-weight: 600; } .m-consent-more { display: inline-flex; align-items: center; gap: var(--space-xs); min-block-size: var(--tap); padding-inline: var(--space); color: var(--accent-ink); font-weight: 600; } .m-consent-more .icon { inline-size: 1em; block-size: 1em; } .m-consent-settings { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-block-size: 0; } .m-consent-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--space-s) var(--space-s); } .m-consent-back { display: inline-flex; align-items: center; gap: var(--space-2xs); justify-self: start; min-block-size: var(--tap); padding-inline: var(--space-xs); color: var(--accent-ink); font-weight: 500; } .m-icon-back { transform: rotate(90deg); } .m-consent-bar-title { margin: 0; font: 600 var(--step-base)/1.2 var(--font-display); text-align: center; } .m-consent-close { display: grid; place-items: center; justify-self: end; inline-size: var(--control); block-size: var(--control); border-radius: 50%; background: var(--fill); color: var(--text-2); } .m-consent-scroll { overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--space) var(--space); } .m-consent-lead { margin: 0 var(--space-xs) var(--space-s); color: var(--text-2); font-size: var(--step-small); } .m-consent-group { margin: var(--space) var(--space) var(--space-xs); font: 600 var(--step-tiny)/1.2 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); } .m-consent-list { margin: 0; padding: 0; list-style: none; background: var(--surface); border-radius: var(--radius-l); overflow: hidden; } .m-consent-row { display: grid; grid-template-columns: var(--tile-s) minmax(0, 1fr) auto; align-items: center; gap: var(--space-s); padding: calc(var(--space-s) * 1.25) var(--space-s) calc(var(--space-s) * 1.25) calc(var(--space) * 0.75); } .m-consent-row + .m-consent-row { border-block-start: var(--line) solid var(--separator); } .m-consent-tile { display: grid; place-items: center; inline-size: var(--tile-s); block-size: var(--tile-s); border-radius: var(--radius-s); background: var(--tint, var(--accent)); color: var(--on-image); } .m-consent-row-text { display: grid; gap: var(--space-2xs); margin: 0; font-weight: 400; min-inline-size: 0; cursor: pointer; } .m-consent-row-text strong { font-weight: 600; font-size: var(--step-small); line-height: 1.25; } .m-consent-row-text span { font-weight: 400; color: var(--text-2); font-size: var(--step-caption); line-height: 1.3; } .m-consent-locked { padding: var(--space-2xs) var(--space-s); border-radius: var(--radius-pill); background: var(--fill); color: var(--text-2); font-size: var(--step-tiny); font-weight: 600; white-space: nowrap; } .m-display { display: grid; gap: var(--space); padding: calc(var(--space) * 0.875) var(--space); } .m-segment-field { display: grid; gap: calc(var(--space-xs) * 1.5); min-inline-size: 0; margin: 0; padding: 0; border: 0; } .m-segment-legend { float: none; inline-size: auto; margin: 0; padding: 0; color: var(--text); font-size: var(--step-small); font-weight: 600; line-height: 1.2; } .m-segment { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--segment-pad); padding: var(--segment-pad); border-radius: var(--radius-s); background: var(--fill); } .m-segment-option { position: relative; display: grid; min-inline-size: 0; margin: 0; font-weight: inherit; } .m-segment-option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } .m-segment-face { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); min-block-size: var(--segment-h); padding-inline: var(--space-xs); border-radius: calc(var(--radius-s) - var(--segment-pad)); color: var(--text-2); font-size: var(--step-caption); font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; transition: background var(--dur-fast), color var(--dur-fast); } .m-segment-face .icon { inline-size: 1em; block-size: 1em; } .m-segment-option input:checked + .m-segment-face { background: var(--surface); color: var(--text); box-shadow: var(--card-shadow); } .m-segment-option input:focus-visible + .m-segment-face { outline: var(--focus-ring) solid var(--focus-color); outline-offset: var(--space-2xs); } .m-consent-note { margin: var(--space-s) var(--space-xs) 0; color: var(--text-2); font-size: calc(var(--step-small) * 0.92); } .m-consent-reset { min-block-size: var(--tap); padding-inline: var(--space-xs); color: var(--accent-ink); font-weight: 600; } .m-consent-details { margin-block-start: var(--space-s); background: var(--surface); border-radius: var(--radius-l); overflow: hidden; } .m-consent-summary { display: flex; align-items: center; justify-content: space-between; min-block-size: var(--tap); padding: var(--space-s) var(--space); font-weight: 600; list-style: none; cursor: pointer; } .m-consent-summary::-webkit-details-marker { display: none; } .m-icon-disclose { transition: transform var(--dur) var(--ease-spring); } .m-consent-details[open] .m-icon-disclose { transform: rotate(180deg); } .m-cookie-list { display: grid; gap: var(--space-s); margin: 0; padding: 0 var(--space) var(--space); } .m-cookie-item { padding-block-start: var(--space-s); border-block-start: var(--line) solid var(--separator); } .m-cookie-item dt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); } .m-cookie-item dd { margin: var(--space-2xs) 0 0; color: var(--text-2); font-size: calc(var(--step-small) * 0.92); } .m-cookie-tag { padding: 0 var(--space-s); border-radius: var(--radius-pill); background: var(--fill); font-size: var(--step-tiny); font-weight: 600; } .m-cookie-duration { display: block; font-size: var(--step-tiny); font-weight: 600; } .m-consent-footer { padding: var(--space-s) var(--space) var(--space); border-block-start: var(--line) solid var(--separator); } .m-consent-save { inline-size: 100%; margin: 0; } .m-consent-status { margin: 0; padding: 0 var(--space) var(--space-s); color: var(--ok); font-size: var(--step-small); font-weight: 600; text-align: center; } .m-consent-status:empty { display: none; } .d-cookie-fab { display: none; } .d-cookie-fab .icon { display: none; } .d-cookie-fab-label { display: none; } .d-cookie-fab:hover, .d-cookie-fab:focus-visible { display: none; } .d-cookie-fab:hover .d-cookie-fab-label, .d-cookie-fab:focus-visible .d-cookie-fab-label { display: none; } html.consent-open .d-cookie-fab { display: none; } .d-consent { display: none; } .d-consent[open] { display: none; } .d-consent[data-current-view="settings"] { display: none; } .d-consent:focus { display: none; } .d-consent::backdrop { display: none; } .d-consent[open]::backdrop { display: none; } .d-consent-intro { display: none; } .d-consent-head { display: none; } .d-consent-badge { display: none; } .d-consent-badge .icon { display: none; } .d-consent-title { display: none; } .d-consent-text { display: none; } .d-consent-actions { display: none; } .d-consent-choice { display: none; } .d-consent-choice:hover { display: none; } .d-consent-more { display: none; } .d-consent-more .icon { display: none; } .d-consent-settings { display: none; } .d-consent-bar { display: none; } .d-consent-bar-title { display: none; } .d-consent-lead { display: none; } .d-consent-close { display: none; } .d-consent-columns { display: none; } .d-consent-col { display: none; } .d-consent-group { display: none; } .d-consent-list { display: none; } .d-consent-row { display: none; } .d-consent-row + .d-consent-row { display: none; } .d-consent-tile { display: none; } .d-consent-row-text { display: none; } .d-consent-row-text strong { display: none; } .d-consent-row-text span { display: none; } .d-consent-locked { display: none; } .d-segment-field { display: none; } .d-segment-legend { display: none; } .d-segment { display: none; } .d-segment-option { display: none; } .d-segment-option input { display: none; } .d-segment-face { display: none; } .d-segment-face .icon { display: none; } .d-segment-option input:checked + .d-segment-face { display: none; } .d-segment-option input:focus-visible + .d-segment-face { display: none; } .d-segment-option:hover .d-segment-face { display: none; } .d-consent-note { display: none; } .d-consent-reset { display: none; } .d-consent-details { display: none; } .d-consent-summary { display: none; } .d-consent-summary::-webkit-details-marker { display: none; } .d-icon-disclose { display: none; } .d-consent-details[open] .d-icon-disclose { display: none; } .d-cookie-table { display: none; } .d-cookie-table th, .d-cookie-table td { display: none; } .d-cookie-table thead th { display: none; } .d-cookie-tag { display: none; } .d-consent-footer { display: none; } .d-consent-back { display: none; } .d-icon-back { display: none; } .d-consent-save { display: none; } .d-consent-status { display: none; } .d-consent-status:empty { display: none; } /* ---- footer ---- */ .m-footer { display: grid; gap: var(--space-m); } .m-footer-cta { display: grid; gap: var(--space-s); padding: var(--space-m) var(--space); background: var(--form-bg); border: var(--line) solid var(--form-ring); border-radius: var(--radius-xl); } .m-footer-cta-title { margin: 0; color: var(--text); font: 700 var(--step-1)/1.2 var(--font-display); } .m-footer-cta-text { color: var(--text-2); font-size: var(--step-small); line-height: 1.5; } .m-footer-direct { display: flex; align-items: center; gap: var(--space-s); min-block-size: var(--tap); color: var(--text); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; } .m-footer-direct .icon { color: var(--accent-ink); } .m-footer-cta-button { display: flex; align-items: center; justify-content: center; gap: var(--space-s); min-block-size: var(--row-h); margin-block-start: var(--space-xs); padding-inline: var(--space-m); color: var(--accent-text); background: var(--accent); border-radius: var(--radius-pill); font-size: var(--step-base); font-weight: 700; text-decoration: none; } .m-footer-cta-button .icon { inline-size: 1.1em; block-size: 1.1em; } .m-footer-brand { display: grid; grid-template-columns: var(--footer-logo) minmax(0, 1fr); align-items: center; gap: var(--space-s); } .m-footer-logo { display: grid; place-items: center; inline-size: var(--footer-logo); aspect-ratio: 1; padding: var(--space-xs); background: var(--logo-plate); border-radius: var(--radius); box-shadow: var(--card-shadow); } .m-footer-logo-img { display: block; inline-size: 100%; block-size: auto; } .m-footer-mark { display: grid; place-items: center; inline-size: var(--footer-logo); block-size: var(--footer-logo); border-radius: var(--radius-pill); background: var(--text); color: var(--bg); font: 800 var(--step-tiny)/1 var(--font-display); letter-spacing: 0.06em; } .m-footer-brand-text { display: grid; gap: var(--space-2xs); min-inline-size: 0; } .m-footer-name { color: var(--text); font: 700 var(--step-base)/1.2 var(--font-display); } .m-footer-tagline { font-size: var(--step-small); } .m-footer-groups { display: grid; overflow: hidden; background: var(--bg); border-radius: var(--radius-l); } .m-footer-acc + .m-footer-acc { border-block-start: var(--line) solid var(--separator); } .m-footer-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto var(--icon); align-items: center; gap: var(--space-s); min-block-size: var(--row-h); padding-inline: var(--space); color: var(--text); cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; } .m-footer-summary::-webkit-details-marker { display: none; } .m-footer-summary:focus-visible { outline: var(--focus-ring) solid var(--focus-color); outline-offset: calc(var(--focus-ring) * -1); } .m-footer-title { font: 600 var(--step-base)/1.2 var(--font-body); } .m-footer-count { min-inline-size: calc(var(--space) * 1.5); padding: var(--space-2xs) var(--space-xs); color: var(--text-2); font-size: var(--step-caption); font-variant-numeric: tabular-nums; text-align: center; background: var(--fill); border-radius: var(--radius-pill); } .m-footer-chevron { color: var(--text-2); transition: transform var(--dur) var(--ease-spring); } .m-footer-acc[open] .m-footer-summary { color: var(--accent-ink); } .m-footer-acc[open] .m-footer-chevron { transform: rotate(180deg); } .m-footer-acc[open] .m-footer-panel { animation: footer-reveal var(--dur) var(--ease-out); } .m-footer-panel { padding: 0 var(--space-xs) var(--space-xs); } .m-footer-list { display: grid; margin: 0; padding: 0; list-style: none; background: var(--surface); border-radius: var(--radius); } .m-footer-list li { margin: 0; } .m-footer-list li + li { border-block-start: var(--line) solid var(--separator); } .m-footer-link { display: grid; grid-template-columns: var(--tile-s) minmax(0, 1fr) var(--icon); align-items: center; gap: var(--space-s); inline-size: 100%; min-block-size: var(--row-h); padding-inline: var(--space-s); color: var(--text); font-size: var(--step-base); text-align: start; text-decoration: none; } .m-footer-link .tile-icon { inline-size: var(--tile-s); block-size: var(--tile-s); } .m-footer-link-label { min-inline-size: 0; overflow-wrap: anywhere; } .m-footer-go { inline-size: 1em; block-size: 1em; color: var(--text-2); } .m-footer-link[aria-current="page"] { color: var(--accent-ink); font-weight: 600; } .m-footer-legal { display: grid; justify-items: start; gap: var(--space-xs); padding-block-start: var(--space); border-block-start: var(--line) solid var(--separator); font-size: var(--step-caption); } .m-footer-privacy { display: inline-flex; align-items: center; gap: var(--space-xs); min-block-size: var(--tap); padding-inline: var(--space); color: var(--text); font-size: var(--step-small); font-weight: 500; background: var(--fill); border-radius: var(--radius-pill); } .m-footer-privacy .icon { inline-size: 1.1em; block-size: 1.1em; color: var(--text-2); } .m-footer-copy { color: var(--text-2); } .m-footer-credit { color: var(--text-2); } .m-footer-credit-link { color: var(--text); font-weight: 600; } .d-footer { display: none; } .d-footer-grid { display: none; } .d-footer-brand { display: none; } .d-footer-home { display: none; } .d-footer-mark { display: none; } .d-footer-name { display: none; } .d-footer-tagline { display: none; } .d-footer-col { display: none; } .d-footer-title { display: none; } .d-footer-links { display: none; } .d-footer-links li { display: none; } .d-footer-link { display: none; } .d-footer-link:hover { display: none; } .d-footer-link[aria-current="page"] { display: none; } .d-footer-legal { display: none; } .d-footer-copy { display: none; } .d-footer-privacy { display: none; } .d-footer-privacy .icon { display: none; } .d-footer-top { display: none; } .d-icon-up { display: none; } .d-footer-credit { display: none; } .d-footer-credit-link { display: none; } /* ---- tables: mobile = cards / label-value lists ---- */ .data-table { margin-block: var(--space) var(--space-m); } .m-records { display: grid; gap: var(--space-s); margin: 0; padding: 0; list-style: none; } .m-records > .m-record { margin: 0; padding: calc(var(--space) * 0.875) var(--space); background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--card-shadow); } .m-record-title { margin: 0; font: 600 var(--step-base)/1.3 var(--font-display); overflow-wrap: anywhere; } .m-record-fields { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-xs) var(--space-s); margin: var(--space-s) 0 0; padding-block-start: var(--space-s); border-block-start: var(--line) solid var(--separator); font-size: var(--step-small); } .m-record-field { display: contents; } .m-record-field dt { color: var(--text-2); } .m-record-field dd { margin: 0; overflow-wrap: anywhere; font-weight: 500; font-variant-numeric: tabular-nums; } .m-spec { margin: 0; background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--card-shadow); overflow: hidden; } .m-spec-row { display: grid; gap: var(--space-2xs); padding: calc(var(--space) * 0.75) var(--space); } .m-spec-row + .m-spec-row { border-block-start: var(--line) solid var(--separator); } .m-spec-row dt { color: var(--text-2); font-size: var(--step-caption); font-weight: 600; } .m-spec-row dd { margin: 0; font-size: var(--step-small); overflow-wrap: anywhere; } .d-table-wrap { display: none; } .d-table { display: none; } .d-table th, .d-table td { display: none; } .d-table thead th { display: none; } .d-table tbody th { display: none; } .d-table tbody tr:last-child th, .d-table tbody tr:last-child td { display: none; } .d-spec-table th[scope="row"] { display: none; } /* ---- features (bento on desktop, grouped list on mobile) ---- */ .features { margin-block: var(--space-l); } .features-eyebrow { margin: 0 0 var(--space-xs); color: var(--accent-ink); font-size: var(--step-tiny); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .features-title { margin: 0 0 var(--space); font: 700 var(--step-2)/1.2 var(--font-display); letter-spacing: -0.01em; } .m-features { margin: 0; padding: 0; list-style: none; background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--card-shadow); overflow: hidden; } .m-feature { display: grid; grid-template-columns: var(--tile) minmax(0, 1fr); align-items: start; gap: var(--space-s) calc(var(--space) * 0.875); margin: 0; padding: calc(var(--space) * 0.875) var(--space); } .m-feature + .m-feature { border-block-start: var(--line) solid var(--separator); } .m-feature-tile { display: grid; place-items: center; inline-size: var(--tile); block-size: var(--tile); border-radius: var(--radius-s); background: var(--tint, var(--accent)); color: var(--on-image); box-shadow: inset 0 var(--line) 0 var(--tile-highlight); } .m-feature-body { display: grid; gap: var(--space-2xs); min-inline-size: 0; } .m-feature-title { margin: 0; font: 600 var(--step-base)/1.3 var(--font-display); } .m-feature-text { margin: 0; color: var(--text-2); font-size: var(--step-small); line-height: 1.45; } .d-features { display: none; } .d-feature { display: none; } .d-feature:nth-child(-n + 2) { display: none; } .d-feature-num { display: none; } .d-feature-tile { display: none; } .d-feature-tile .icon { display: none; } .d-feature-title { display: none; } .d-feature-text { display: none; } /* ---- tables (audit fixes: spans, captions, feeds) ---- */ .m-record-value dt { display: none; } .m-record-value dd { grid-column: 1 / -1; } .m-record-values { display: grid; gap: var(--space-xs); margin: var(--space-s) 0 0; padding: var(--space-s) 0 0; list-style: none; border-block-start: var(--line) solid var(--separator); font-size: var(--step-small); } .m-record-values li { margin: 0; overflow-wrap: anywhere; } .m-table-caption { margin: 0 0 var(--space-s); color: var(--text-2); font-size: var(--step-small); font-weight: 600; } .m-feed { margin-block: var(--space) var(--space-m); } .m-feed-day { margin: var(--space-s) 0 0; padding-block: var(--space-xs); color: var(--text-2); font-size: var(--step-small); font-weight: 600; font-variant-numeric: tabular-nums; } .m-feed-list { margin: 0; padding: 0; list-style: none; } .m-feed-item { margin: 0; padding-block: var(--space-s); border-block-start: var(--line) solid var(--separator); } .m-feed-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-s); align-items: baseline; margin: 0; } .m-feed-title { font-weight: 600; overflow-wrap: anywhere; } .m-feed-time { color: var(--text-2); font-size: var(--step-small); font-variant-numeric: tabular-nums; } .m-feed-meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-xs); margin: var(--space-2xs) 0 0; color: var(--text-2); font-size: var(--step-small); } .m-feed-field { overflow-wrap: anywhere; } .m-feed-field + .m-feed-field::before { content: "·"; margin-inline-end: var(--space-xs); } .m-feed-more { margin-block-start: var(--space-s); } .m-feed-summary { display: flex; align-items: center; min-block-size: var(--tap); color: var(--accent-ink); font-weight: 600; cursor: pointer; } .d-table-caption { display: none; } /* ---- 404 page and breadcrumbs ---- */ .notfound { margin-block: var(--space) var(--space-l); } .m-crumbs { margin-block: calc(var(--space-xs) * -1) var(--space-xs); } .m-crumbs-back { display: inline-flex; align-items: center; gap: var(--space-2xs); max-inline-size: 100%; min-block-size: var(--tap); padding-inline-end: var(--space-s); color: var(--accent-ink); font-size: var(--step-small); font-weight: 600; text-decoration: none; } .m-crumbs-icon { inline-size: calc(var(--icon) * 0.9); block-size: calc(var(--icon) * 0.9); stroke-width: 2.2; transform: rotate(90deg); } .m-crumbs-label { min-inline-size: 0; overflow-wrap: anywhere; } .d-crumbs { display: none; } .d-crumbs-list { display: none; } .d-crumbs-item { display: none; } .d-crumbs-link { display: none; } .d-crumbs-sep { display: none; } .d-crumbs-current { display: none; } .m-notfound { display: grid; gap: var(--space-s); } .m-notfound-code { margin: 0; color: var(--text); font: 800 var(--step-3)/1 var(--font-display); letter-spacing: -0.03em; } .m-notfound-code::after { content: ""; display: block; inline-size: var(--space-l); block-size: calc(var(--line) * 2); margin-block-start: var(--space-xs); background: var(--accent); } .m-notfound-title { margin: var(--space-xs) 0 0; font: 700 var(--step-2)/1.2 var(--font-display); } .m-notfound-text { margin: 0; color: var(--text-2); } .m-notfound-path { display: grid; gap: var(--space-2xs); margin: 0; padding: var(--space-s) var(--space); border-radius: var(--radius); background: var(--fill); font-size: var(--step-small); } .m-notfound-path span { color: var(--text-2); font-size: var(--step-tiny); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .m-notfound-path code { overflow-wrap: anywhere; color: var(--text); } .m-notfound-home { margin-block-start: var(--space-xs); } .m-notfound-secondary { display: flex; align-items: center; justify-content: center; min-block-size: var(--tap); color: var(--accent-ink); font-weight: 600; text-decoration: none; } .m-notfound-next-title { margin: var(--space-s) 0 0; font: 600 var(--step-tiny)/1.2 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); } .m-notfound-links { margin: 0; padding: 0; list-style: none; background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--card-shadow); overflow: hidden; } .m-notfound-links li { margin: 0; } .m-notfound-links li + li { border-block-start: var(--line) solid var(--separator); } .m-notfound-link { display: grid; grid-template-columns: var(--tile) minmax(0, 1fr) auto; align-items: center; gap: var(--space); min-block-size: calc(var(--tap) * 1.15); padding: var(--space-xs) var(--space); color: var(--text); font-weight: 500; text-decoration: none; } .icon-go-m { inline-size: 1rem; block-size: 1rem; color: var(--text-2); } .d-notfound { display: none; } .d-notfound-main { display: none; } .d-notfound-code { display: none; } .d-notfound-code::after { display: none; } .d-notfound-title { display: none; } .d-notfound-text { display: none; } .d-notfound-path { display: none; } .d-notfound-path span { display: none; } .d-notfound-path code { display: none; } .d-notfound-actions { display: none; } .d-notfound-actions .button { display: none; } .d-notfound-actions .button .icon { display: none; } .d-notfound-secondary { display: none; } .d-notfound-next { display: none; } .d-notfound-next-title { display: none; } .d-notfound-links { display: none; } .d-notfound-links li { display: none; } .d-notfound-link { display: none; } .icon-go-d { display: none; } /* ---- contact page (mobile: m-contact) ---- */ .contact-head { margin-block: var(--space-xs) var(--space-m); } .contact-eyebrow { margin: 0 0 var(--space-xs); color: var(--accent-ink); font-size: var(--step-small); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .contact-title { margin: 0 0 var(--space-s); font: 700 var(--step-3)/1.15 var(--font-display); letter-spacing: -0.01em; } .contact-lead { margin: 0; color: var(--text-2); line-height: 1.5; } .contact-hp { position: absolute; inline-size: var(--line); block-size: var(--line); overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .cta-actions { margin: var(--space) 0 0; } .cta-button .icon { inline-size: 1.1em; block-size: 1.1em; } .m-contact { display: grid; gap: var(--space); margin-block-end: var(--space-l); } .m-direct { display: grid; margin: 0; padding: 0; list-style: none; overflow: hidden; background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--card-shadow); } .m-direct li + li { border-block-start: var(--line) solid var(--separator); } .m-direct-link { display: grid; grid-template-columns: var(--tile) minmax(0, 1fr) var(--icon); align-items: center; gap: var(--space-s); min-block-size: calc(var(--tap) + var(--space-s)); padding: var(--space-xs) var(--space); color: var(--text); text-decoration: none; } .m-direct-text { display: grid; min-inline-size: 0; } .m-direct-text span { color: var(--text-2); font-size: var(--step-small); overflow-wrap: anywhere; } .m-contact-form-title { margin: var(--space-xs) 0 0; font: 700 var(--step-1)/1.25 var(--font-display); } .m-contact-note { margin: calc(var(--space-s) * -1) 0 0; color: var(--text-2); font-size: var(--step-small); } .m-error-summary { scroll-margin-block-start: var(--contact-sticky); padding: var(--space); color: var(--error); background: var(--error-bg); border: var(--focus-ring) solid var(--error); border-radius: var(--radius-l); } .m-error-summary:focus { outline: var(--focus-ring) solid var(--focus-color); outline-offset: var(--space-2xs); } .m-error-summary-title { margin: 0 0 var(--space-xs); color: var(--error); font: 700 var(--step-base)/1.3 var(--font-display); } .m-error-summary-list { display: grid; gap: var(--space-xs); margin: 0; padding-inline-start: var(--space); } .m-error-summary-list a { color: var(--error); font-weight: 600; } .m-contact-form { display: grid; gap: var(--space); padding: var(--space-s); background: var(--form-bg); border: var(--line) solid var(--form-ring); border-radius: var(--radius-xl); } .m-section { min-inline-size: 0; overflow: hidden; padding: var(--space); background: var(--form-section); border-radius: var(--radius-l); box-shadow: var(--card-shadow); } .m-topics, .m-group { display: grid; gap: var(--space-xs); min-inline-size: 0; margin: 0; padding: 0; border: 0; } .m-legend { padding: 0 0 var(--space-xs); font: 600 var(--step-base)/1.3 var(--font-body); } .m-topic-list { display: grid; margin: 0 calc(var(--space) * -1) calc(var(--space) * -1); border-block-start: var(--line) solid var(--separator); } .m-topic { position: relative; display: block; margin: 0; font-weight: 400; } .m-topic + .m-topic { border-block-start: var(--line) solid var(--separator); } .m-topic-input { position: absolute; inset: 0; z-index: 1; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; } .m-topic-face { display: grid; grid-template-columns: var(--tile) minmax(0, 1fr) var(--radio); align-items: center; gap: var(--space-s); min-block-size: calc(var(--tap) + var(--space-s)); padding: var(--space-s) var(--space); transition: background var(--dur-fast); } .m-topic-text { display: grid; min-inline-size: 0; } .m-topic-text span { color: var(--text-2); font-size: var(--step-small); line-height: 1.35; } .m-topic-radio { display: grid; place-items: center; inline-size: var(--radio); block-size: var(--radio); color: transparent; border: calc(var(--line) * 2) solid var(--field-border); border-radius: 50%; transition: background var(--dur-fast), border-color var(--dur-fast); } .m-topic-radio .icon { inline-size: calc(var(--radio) * 0.6); block-size: calc(var(--radio) * 0.6); stroke-width: 3; } .m-topic-input:checked + .m-topic-face { background: var(--accent-soft); } .m-topic-input:checked + .m-topic-face .m-topic-radio { color: var(--accent-text); background: var(--accent); border-color: var(--accent); } .m-topic-input:focus-visible + .m-topic-face { outline: var(--focus-ring) solid var(--focus-color); outline-offset: calc(var(--focus-ring) * -1); } .m-topics.is-invalid .m-topic-list { box-shadow: inset 0 0 0 calc(var(--line) * 2) var(--error); } .m-field-list { display: grid; gap: var(--space); } .m-field { scroll-margin-block-start: var(--contact-sticky); display: grid; gap: var(--space-xs); min-inline-size: 0; } .m-label { margin: 0; font-weight: 600; } .m-optional { color: var(--text-2); font-weight: 400; } .m-hint { margin: 0; color: var(--text-2); font-size: var(--step-small); } .m-error { margin: 0; color: var(--error); font-size: var(--step-small); font-weight: 600; } .m-field input.m-input { min-block-size: var(--field-h); margin: 0; font-size: var(--step-base); background: var(--field-bg); border-color: var(--field-border); } .m-field textarea.m-textarea { display: block; inline-size: 100%; min-block-size: var(--textarea-h); margin: 0; padding: var(--space-s) var(--space); color: inherit; font: inherit; font-size: var(--step-base); line-height: 1.5; background: var(--field-bg); border: var(--line) solid var(--field-border); border-radius: var(--radius); resize: vertical; } .m-field input.m-input:focus, .m-field textarea.m-textarea:focus { border-color: var(--accent); outline: var(--focus-ring) solid var(--focus-color); outline-offset: 0; } .m-field.is-invalid input.m-input, .m-field.is-invalid textarea.m-textarea { border: calc(var(--line) * 2) solid var(--error); } .m-counter { margin: 0; justify-self: end; color: var(--text-2); font-size: var(--step-small); font-variant-numeric: tabular-nums; } .m-counter.is-over { color: var(--error); font-weight: 600; } .m-privacy { display: grid; grid-template-columns: var(--icon) minmax(0, 1fr); gap: var(--space-s); margin: 0; padding: var(--space-s) var(--space); color: var(--text-2); font-size: var(--step-small); background: var(--fill); border-radius: var(--radius); } .m-privacy .icon { color: var(--accent-ink); } button.m-submit { min-block-size: calc(var(--tap) + var(--space-xs)); margin: 0; font-size: var(--step-base); } button.m-submit[aria-busy="true"] { opacity: 0.7; cursor: progress; } .m-submit-note { margin: calc(var(--space-s) * -1) 0 0; color: var(--text-2); font-size: var(--step-small); text-align: center; } .m-section-title { margin: var(--space) 0 0; font: 700 var(--step-1)/1.25 var(--font-display); } .m-steps { display: grid; gap: var(--space-s); margin: 0; padding: 0; list-style: none; } .m-step { display: grid; grid-template-columns: var(--step-dot) minmax(0, 1fr); align-items: start; gap: var(--space-s); } .m-step-number { display: grid; place-items: center; inline-size: var(--step-dot); block-size: var(--step-dot); margin-block-start: var(--space-2xs); color: var(--text); font-size: var(--step-caption); font-weight: 700; border: var(--line) solid var(--field-border); border-radius: 50%; } .m-places { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; } .m-places li { padding: var(--space-xs) var(--space-s); font-size: var(--step-small); background: var(--surface); border-radius: var(--radius-pill); box-shadow: var(--card-shadow); } .contact-sent { display: grid; justify-items: center; gap: var(--space-s); margin-block: var(--space-l); padding: var(--space-l) var(--space); text-align: center; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--card-shadow); } .contact-sent-badge { display: grid; place-items: center; inline-size: var(--badge); block-size: var(--badge); color: var(--accent-text); background: var(--accent); border-radius: 50%; } .contact-sent-badge .icon { inline-size: calc(var(--badge) * 0.5); block-size: calc(var(--badge) * 0.5); stroke-width: 2.6; } .contact-sent-title { margin: 0; font: 700 var(--step-2)/1.2 var(--font-display); } .contact-sent-text { margin: 0; color: var(--text-2); line-height: 1.5; } .contact-sent-actions { display: grid; gap: var(--space-s); inline-size: 100%; } .contact-sent-actions .button { margin: 0; } .contact-sent-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-block-size: var(--tap); color: var(--accent-ink); font-weight: 600; text-decoration: none; } /* desktop contact tree: hidden on phones */ .d-section { display: none; } button.d-submit { display: none; } button.d-submit[aria-busy="true"] { display: none; } .d-contact { display: none; } .d-contact-card { display: none; } .d-contact-form-title { display: none; } .d-contact-note { display: none; } .d-error-summary { display: none; } .d-error-summary:focus { display: none; } .d-error-summary-title { display: none; } .d-error-summary-list { display: none; } .d-error-summary-list a { display: none; } .d-contact-form { display: none; } .d-topics { display: none; } .d-group { display: none; } .d-legend { display: none; } .d-topic-grid { display: none; } .d-topic { display: none; } .d-topic-input { display: none; } .d-topic-face { display: none; } .d-topic-text { display: none; } .d-topic-text span { display: none; } .d-topic-check { display: none; } .d-topic-check .icon { display: none; } .d-topic-input:hover + .d-topic-face { display: none; } .d-topic-input:checked + .d-topic-face { display: none; } .d-topic-input:checked + .d-topic-face .d-topic-check { display: none; } .d-topic-input:focus-visible + .d-topic-face { display: none; } .d-topics.is-invalid .d-topic-face { display: none; } .d-field-grid { display: none; } .d-field { display: none; } .d-field-full { display: none; } .d-field-half { display: none; } .d-field input.d-input[type="tel"] { display: none; } .d-label { display: none; } .d-optional { display: none; } .d-hint { display: none; } .d-error { display: none; } .d-field input.d-input { display: none; } .d-field textarea.d-textarea { display: none; } .d-field input.d-input:focus { display: none; } .d-field textarea.d-textarea:focus { display: none; } .d-field.is-invalid input.d-input { display: none; } .d-field.is-invalid textarea.d-textarea { display: none; } .d-counter { display: none; } .d-counter.is-over { display: none; } .d-privacy { display: none; } .d-privacy .icon { display: none; } .d-submit-row { display: none; } .d-submit-note { display: none; } .d-contact-aside { display: none; } .d-aside-card { display: none; } .d-aside-title { display: none; } .d-direct { display: none; } .d-direct-link { display: none; } .d-direct-link > span:last-child { display: none; } .d-direct-link strong { display: none; } .d-steps { display: none; } .d-step { display: none; } .d-step-number { display: none; } .d-places { display: none; } .d-places li { display: none; } /* ---- admin area (mobile: m-admin-nav, m-overview, m-enq, m-appearance) ---- */ .admin { display: grid; gap: var(--space); margin-block: var(--space-s) var(--space-l); } .admin-main { display: grid; gap: var(--space); min-inline-size: 0; } .admin-head { display: grid; gap: var(--space-xs); } .admin-title { margin: 0; font: 700 var(--step-3)/1.15 var(--font-display); letter-spacing: -0.01em; } .admin-lead { margin: 0; color: var(--text-2); font-size: var(--step-small); } .admin-updated { display: block; margin-block-start: var(--space-2xs); color: var(--text-2); } .admin-card { display: grid; gap: var(--space-s); min-inline-size: 0; margin: 0; padding: var(--space); background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--card-shadow); } .admin-card-title { margin: 0; font: 700 var(--step-1)/1.25 var(--font-display); } .admin-card-hint { margin: 0; color: var(--text-2); font-size: var(--step-small); } .admin-empty { margin: 0; padding: var(--space); color: var(--text-2); text-align: center; background: var(--fill); border-radius: var(--radius); } .admin-status { display: inline-flex; align-items: center; min-block-size: calc(var(--space) * 1.5); padding-inline: var(--space-s); font-size: var(--step-caption); font-weight: 700; white-space: nowrap; border-radius: var(--radius-pill); } .admin-health { display: grid; gap: var(--space-s); margin: 0; padding: 0; list-style: none; } .admin-health li { display: grid; grid-template-columns: var(--dot) minmax(0, 1fr); align-items: start; gap: var(--space-s); } .admin-health-text { display: grid; min-inline-size: 0; } .admin-health-text span { color: var(--text-2); font-size: var(--step-small); } .admin-dot { display: block; inline-size: var(--dot); block-size: var(--dot); margin-block-start: calc(var(--space-xs) * 1.5); border-radius: 50%; } .admin-pair { display: grid; gap: var(--space); } .admin-env { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: 0; } button.admin-button { margin: 0; } .m-admin-nav { min-inline-size: 0; } .m-admin-tiles { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; } .m-admin-tile { display: inline-flex; align-items: center; gap: var(--space-xs); min-block-size: var(--tap); padding-inline: var(--space-s) var(--space); color: var(--text); font-size: var(--step-small); font-weight: 600; text-decoration: none; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-pill); } .m-admin-tile .tile-icon { inline-size: var(--tile-s); block-size: var(--tile-s); border-radius: 50%; } .m-admin-tile[aria-current="page"] { color: var(--bg); background: var(--text); border-color: var(--text); } .m-admin-tile-label { overflow-wrap: anywhere; } .m-admin-badge { display: grid; place-items: center; min-inline-size: calc(var(--space) * 1.125); block-size: calc(var(--space) * 1.125); padding-inline: var(--space-2xs); color: var(--accent-text); font-size: var(--step-tiny); font-weight: 700; background: var(--accent); border-radius: var(--radius-pill); } .m-overview { display: grid; gap: var(--space); } .m-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); margin: 0; padding: 0; list-style: none; } .m-kpi-link { display: grid; align-content: start; gap: var(--space-2xs); block-size: 100%; padding: var(--space-s) var(--space); color: var(--text); text-decoration: none; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius); } .m-kpi-value { font: 700 var(--step-1)/1.1 var(--font-display); font-variant-numeric: tabular-nums; } .m-kpi-label { color: var(--text-2); font-size: var(--step-caption); } .m-kpi.is-alert .m-kpi-link { border-color: var(--accent); } .m-kpi.is-alert .m-kpi-value { color: var(--accent-ink); } .m-kpi.is-warn .m-kpi-value { color: var(--error); } .m-latest { display: grid; margin: 0; padding: 0; list-style: none; } .m-latest-row { display: grid; gap: var(--space-2xs); padding-block: var(--space-s); } .m-latest-row + .m-latest-row { border-block-start: var(--line) solid var(--separator); } .m-latest-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); min-inline-size: 0; overflow-wrap: anywhere; } .m-latest-meta { color: var(--text-2); font-size: var(--step-small); } .m-card-more { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); min-block-size: var(--tap); color: var(--accent-ink); font-weight: 600; text-decoration: none; background: var(--fill); border-radius: var(--radius); } .m-card-more .icon { inline-size: 1em; block-size: 1em; } .m-enq { display: grid; gap: var(--space); } .m-filters { display: flex; flex-wrap: wrap; gap: var(--space-xs); } .m-filter { display: inline-flex; align-items: center; gap: var(--space-xs); min-block-size: var(--tap); padding-inline: var(--space); color: var(--text); font-size: var(--step-small); font-weight: 600; text-decoration: none; background: var(--surface); border-radius: var(--radius-pill); box-shadow: var(--card-shadow); } .m-filter[aria-current="true"] { color: var(--accent-text); background: var(--accent); } .m-filter-count { min-inline-size: calc(var(--space) * 1.25); padding-inline: var(--space-2xs); font-size: var(--step-caption); text-align: center; background: var(--fill); border-radius: var(--radius-pill); } .m-enq-list { display: grid; gap: var(--space-s); margin: 0; padding: 0; list-style: none; } .m-enq-card { display: grid; gap: var(--space-xs); padding: var(--space); background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--card-shadow); } .m-enq-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); } .m-enq-ref { color: var(--text-2); font: 600 var(--step-small)/1.2 var(--font-mono); } .m-enq-name { margin: 0; font: 700 var(--step-base)/1.3 var(--font-display); overflow-wrap: anywhere; } .m-enq-meta { margin: 0; color: var(--text-2); font-size: var(--step-small); overflow-wrap: anywhere; } .m-enq-message { margin-block: var(--space-xs); background: var(--bg); border-radius: var(--radius); } .m-enq-summary { display: flex; align-items: center; min-block-size: var(--tap); padding-inline: var(--space); font-weight: 600; cursor: pointer; } .m-enq-text { margin: 0; padding: 0 var(--space) var(--space); line-height: 1.5; overflow-wrap: anywhere; } .m-enq-reply { display: flex; align-items: center; justify-content: center; gap: var(--space-s); min-block-size: var(--tap); color: var(--accent-text); font-weight: 700; text-decoration: none; background: var(--accent); border-radius: var(--radius-pill); } .m-enq-reply .icon { inline-size: 1.1em; block-size: 1.1em; } .m-enq-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); margin: 0; } .m-enq-actions-label { grid-column: 1 / -1; color: var(--text-2); font-size: var(--step-caption); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } button.m-enq-status { inline-size: 100%; min-block-size: var(--tap); margin: 0; padding-inline: var(--space-s); color: var(--text); font-size: var(--step-small); font-weight: 600; background: var(--fill); border-radius: var(--radius); } button.m-enq-status[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent-soft); cursor: default; } .m-appearance { display: grid; gap: var(--space); } .m-set-form { display: grid; gap: var(--space); } .m-set-group { display: grid; gap: var(--space-xs); min-inline-size: 0; margin: 0; padding: 0 0 var(--space); border: 0; border-block-end: var(--line) solid var(--separator); } .m-set-group:last-child { padding-block-end: 0; border-block-end: 0; } .m-set-label { margin: 0; padding: 0; font-weight: 600; } .m-set-hint { margin: 0; color: var(--text-2); font-size: var(--step-small); } .m-colour { display: flex; align-items: center; gap: var(--space-s); } .m-set-form input.m-colour-input { inline-size: calc(var(--tap) * 1.5); block-size: var(--tap); min-block-size: var(--tap); padding: var(--space-2xs); background: var(--field-bg); border: var(--line) solid var(--field-border); border-radius: var(--radius); cursor: pointer; } .m-colour-value { font: 600 var(--step-base)/1 var(--font-mono); } .m-range { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-s); } .m-set-form input.m-range-input { inline-size: 100%; min-block-size: var(--tap); padding: 0; accent-color: var(--accent); background: none; border: 0; } .m-range-value { min-inline-size: calc(var(--space) * 3); font: 600 var(--step-base)/1 var(--font-mono); text-align: end; } .m-bars { display: grid; gap: var(--space-s); } .m-bar { display: flex; align-items: center; gap: var(--space-s); margin: 0; font-weight: 500; } .m-contrast { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; } .m-contrast-row { display: grid; grid-template-columns: var(--dot) minmax(0, 1fr) auto; align-items: center; gap: var(--space-s); font-size: var(--step-small); } .m-contrast-row .admin-dot { margin: 0; } .m-contrast-ratio { font: 600 var(--step-small)/1 var(--font-mono); } .m-contrast-row.is-bad .m-contrast-ratio { color: var(--error); } .m-preview { display: grid; justify-items: start; gap: var(--space-s); padding: var(--pv-space, var(--space)); background: var(--surface); border-radius: var(--pv-radius, var(--radius-l)); box-shadow: var(--card-shadow); } .m-preview-title { margin: 0; color: var(--text-2); font-size: var(--step-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .m-preview-button { display: inline-flex; align-items: center; gap: var(--space-xs); min-block-size: var(--tap); padding-inline: var(--space-m); color: var(--pv-text, var(--accent-text)); font-weight: 700; background: var(--pv-fill, var(--accent)); border-radius: var(--radius-pill); } .m-preview-button .icon { inline-size: 1em; block-size: 1em; } .m-preview-link { color: var(--pv-ink, var(--accent-ink)); font-weight: 600; text-decoration: underline; } .m-preview-chip { padding: var(--space-2xs) var(--space-s); color: var(--pv-ink, var(--accent-ink)); font-size: var(--step-caption); font-weight: 700; background: var(--pv-soft, var(--accent-soft)); border-radius: var(--radius-pill); } .m-set-problems { padding: var(--space); color: var(--error); background: var(--error-bg); border: var(--focus-ring) solid var(--error); border-radius: var(--radius-l); } .m-set-problems-title { margin: 0 0 var(--space-xs); font-weight: 700; } .m-set-problems ul { margin: 0; padding-inline-start: var(--space); } button.m-set-save { min-block-size: var(--row-h); margin: 0; } button.m-set-reset { min-block-size: var(--tap); margin: 0; color: var(--text); background: var(--fill); } /* desktop admin tree: hidden on phones */ .d-admin-side { display: none; } .d-admin-menu { display: none; } .d-admin-link { display: none; } .d-admin-link:hover { display: none; } .d-admin-link[aria-current="page"] { display: none; } .d-admin-link[aria-current="page"] strong { display: none; } .d-admin-link-text { display: none; } .d-admin-link-text span { display: none; } .d-admin-badge { display: none; } .d-overview { display: none; } .d-kpis { display: none; } .d-kpi-link { display: none; } .d-kpi-link:hover { display: none; } .d-kpi-label { display: none; } .d-kpi-value { display: none; } .d-kpi-hint { display: none; } .d-kpi.is-alert .d-kpi-link { display: none; } .d-kpi.is-alert .d-kpi-value { display: none; } .d-kpi.is-warn .d-kpi-value { display: none; } .d-overview-grid { display: none; } .d-card-head { display: none; } .d-card-more { display: none; } .d-card-more .icon { display: none; } .d-latest { display: none; } .d-latest-row { display: none; } .d-latest-row + .d-latest-row { display: none; } .d-latest-who { display: none; } .d-latest-who span { display: none; } .d-latest-topic { display: none; } .d-latest-time { display: none; } .d-enq { display: none; } .d-filters { display: none; } .d-filter { display: none; } .d-filter:hover { display: none; } .d-filter[aria-current="true"] { display: none; } .d-filter-count { display: none; } .d-enq-list { display: none; } .d-enq-item { display: none; } .d-enq-row { display: none; } .d-enq-ref { display: none; } .d-enq-ref strong { display: none; } .d-enq-ref span { display: none; } .d-enq-who { display: none; } .d-enq-who span { display: none; } .d-enq-topic { display: none; } .d-enq-topic .tile-icon { display: none; } .d-enq-message { display: none; } .d-enq-summary { display: none; } .d-enq-text { display: none; } .d-enq-foot { display: none; } .d-enq-reply { display: none; } .d-enq-reply .icon { display: none; } .d-enq-actions { display: none; } .d-enq-actions-label { display: none; } button.d-enq-status { display: none; } button.d-enq-status:hover { display: none; } button.d-enq-status[aria-pressed="true"] { display: none; } .d-appearance { display: none; } .d-set-form { display: none; } .d-set-group { display: none; } .d-set-label { display: none; } .d-set-hint { display: none; } .d-colour { display: none; } .d-set-form input.d-colour-input { display: none; } .d-colour-value { display: none; } .d-range { display: none; } .d-set-form input.d-range-input { display: none; } .d-range-value { display: none; } .d-bars { display: none; } .d-bar { display: none; } .d-set-actions { display: none; } button.d-set-save { display: none; } button.d-set-reset { display: none; } .d-set-aside { display: none; } .d-contrast { display: none; } .d-contrast-row { display: none; } .d-contrast-row .admin-dot { display: none; } .d-contrast-ratio { display: none; } .d-contrast-row.is-bad .d-contrast-ratio { display: none; } .d-preview { display: none; } .d-preview-title { display: none; } .d-preview-button { display: none; } .d-preview-button .icon { display: none; } .d-preview-link { display: none; } .d-preview-chip { display: none; } .d-set-problems { display: none; } .d-set-problems-title { display: none; } .d-set-problems ul { display: none; } /* ---- article page (mobile: m-toc, m-article-end, m-related) - serious editorial, natural colours ---- */ .article-head { display: grid; gap: var(--space-s); margin-block: var(--space-xs) var(--space-m); } .article-eyebrow { display: flex; align-items: center; gap: var(--space-s); margin: 0; color: var(--text-2); font-size: var(--step-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .article-eyebrow::before { content: ""; flex: none; inline-size: var(--space-m); block-size: calc(var(--line) * 2); background: var(--accent); } .article-title { margin: 0; color: var(--text); font: 700 var(--step-3)/1.15 var(--font-display); letter-spacing: -0.015em; overflow-wrap: anywhere; } .article-standfirst { margin: 0; color: var(--text-2); font-size: var(--step-base); line-height: 1.55; } .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); margin: 0; padding-block-start: var(--space-s); color: var(--text-2); font-size: var(--step-small); border-block-start: var(--line) solid var(--border); } .article-meta-sep { color: var(--text-2); } .article-figure { margin: 0 0 var(--space-m); } .article-image { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-l); } .article-layout { display: grid; } .article-body { display: grid; gap: var(--space-m); min-inline-size: 0; } .article-prose { color: var(--text); font-size: var(--step-base); line-height: 1.65; } .article-prose p { margin-block: 0 var(--space); } .article-prose h2 { margin-block: var(--space-l) var(--space-s); padding-block-start: var(--space); font: 700 var(--step-1)/1.25 var(--font-display); letter-spacing: -0.01em; border-block-start: var(--line) solid var(--border); scroll-margin-block-start: var(--contact-sticky); } .article-prose h3 { margin-block: var(--space-m) var(--space-xs); font: 600 var(--step-base)/1.3 var(--font-display); } .article-prose a { color: var(--accent-ink); text-decoration-thickness: var(--line); text-underline-offset: 0.18em; } .article-prose ul, .article-prose ol { padding-inline-start: var(--space-m); } .article-prose li::marker { color: var(--text-2); } .article-prose blockquote { margin: var(--space-m) 0; padding: var(--space); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius); } .m-toc { overflow: hidden; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-l); } .m-toc-summary { display: grid; grid-template-columns: minmax(0, 1fr) auto var(--icon); align-items: center; gap: var(--space-s); min-block-size: var(--row-h); padding-inline: var(--space); font-weight: 600; cursor: pointer; list-style: none; } .m-toc-summary::-webkit-details-marker { display: none; } .m-toc-count { min-inline-size: calc(var(--space) * 1.5); padding: var(--space-2xs) var(--space-xs); color: var(--text-2); font-size: var(--step-caption); text-align: center; background: var(--fill); border-radius: var(--radius-pill); } .m-toc-chevron { color: var(--text-2); transition: transform var(--dur) var(--ease-spring); } .m-toc[open] .m-toc-chevron { transform: rotate(180deg); } .m-toc-list { margin: 0; padding: var(--space-2xs) var(--space) var(--space-s) calc(var(--space) * 2); border-block-start: var(--line) solid var(--separator); } .m-toc-list li { margin: 0; color: var(--text-2); } .m-toc-link { display: block; padding-block: var(--space-s); color: var(--text); text-decoration: none; overflow-wrap: anywhere; } .m-article-end { display: grid; gap: var(--space-s); padding: var(--space); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-l); } .m-facts { display: grid; margin: 0 0 var(--space-xs); } .m-fact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-s); padding-block: var(--space-xs); font-size: var(--step-small); border-block-end: var(--line) solid var(--separator); } .m-fact dt { color: var(--text-2); } .m-fact dd { margin: 0; color: var(--text); font-weight: 600; text-align: end; } .m-article-cta-title { margin: 0; font: 700 var(--step-base)/1.3 var(--font-display); } .m-article-cta-text { margin: 0; color: var(--text-2); font-size: var(--step-small); } .m-article-cta-link { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); min-block-size: var(--row-h); color: var(--bg); font-weight: 700; text-decoration: none; background: var(--text); border-radius: var(--radius-pill); } .m-article-cta-link .icon { inline-size: 1em; block-size: 1em; } .related { display: grid; gap: var(--space); margin-block: var(--space-l); padding-block-start: var(--space-m); border-block-start: var(--line) solid var(--border); } .related-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-s); } .related-title { margin: 0; font: 700 var(--step-1)/1.25 var(--font-display); } .related-all { display: inline-flex; align-items: center; gap: var(--space-xs); min-block-size: var(--tap); color: var(--accent-ink); font-weight: 600; text-decoration: none; } .related-all .icon { inline-size: 1em; block-size: 1em; } .m-related { display: grid; overflow: hidden; margin: 0; padding: 0; list-style: none; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-l); } .m-related-row { position: relative; display: grid; grid-template-columns: var(--thumb) minmax(0, 1fr); align-items: center; gap: var(--space-s); padding: var(--space-s); } .m-related-row + .m-related-row { border-block-start: var(--line) solid var(--separator); } .m-related-image { display: block; inline-size: var(--thumb); block-size: var(--thumb); object-fit: cover; border-radius: var(--radius-s); } .m-related-body { display: grid; gap: var(--space-2xs); min-inline-size: 0; } .m-related-section { margin: 0; color: var(--text-2); font-size: var(--step-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .m-related-title { margin: 0; font: 600 var(--step-small)/1.35 var(--font-body); overflow-wrap: anywhere; } /* desktop article parts: hidden on phones */ .d-article-aside { display: none; } .d-toc { display: none; } .d-toc-title { display: none; } .d-toc-list { display: none; } .d-toc-link { display: none; } .d-toc-link:hover { display: none; } .d-facts { display: none; } .d-fact { display: none; } .d-fact + .d-fact { display: none; } .d-fact dt { display: none; } .d-fact dd { display: none; } .d-article-cta { display: none; } .d-article-cta-title { display: none; } .d-article-cta-text { display: none; } .d-article-cta-link { display: none; } .d-article-cta-link .icon { display: none; } .d-related { display: none; } .d-related-card { display: none; } .d-related-card:hover { display: none; } .d-related-card:has(.card-link:focus-visible) { display: none; } .d-related-image { display: none; } .d-related-body { display: none; } .d-related-section { display: none; } .d-related-title { display: none; } /* ---- insights list (mobile: m-insights) ---- */ .insights-head { display: grid; gap: var(--space-xs); margin-block: var(--space-xs) var(--space-m); padding-block-end: var(--space); border-block-end: var(--line) solid var(--border); } .insights-title { margin: 0; font: 700 var(--step-3)/1.1 var(--font-display); letter-spacing: -0.015em; } .insights-lead { margin: 0; color: var(--text-2); font-size: var(--step-small); line-height: 1.5; } .m-insights { display: grid; gap: var(--space); margin-block-end: var(--space-l); } .m-lead { position: relative; display: grid; overflow: hidden; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-l); } .m-lead-image { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; } .m-lead-body { display: grid; gap: var(--space-xs); padding: var(--space); } .m-lead-title { margin: 0; font: 700 var(--step-1)/1.25 var(--font-display); overflow-wrap: anywhere; } .m-lead-text { margin: 0; color: var(--text-2); font-size: var(--step-small); line-height: 1.5; } .m-card-section { margin: 0; color: var(--text-2); font-size: var(--step-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .m-card-meta { margin: 0; color: var(--text-2); font-size: var(--step-caption); } .m-rows { display: grid; overflow: hidden; margin: 0; padding: 0; list-style: none; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-l); } .m-row { position: relative; display: grid; grid-template-columns: var(--thumb) minmax(0, 1fr); align-items: center; gap: var(--space-s); padding: var(--space-s); } .m-row + .m-row { border-block-start: var(--line) solid var(--separator); } .m-row-image { display: block; inline-size: var(--thumb); block-size: var(--thumb); object-fit: cover; border-radius: var(--radius-s); } .m-row-body { display: grid; gap: var(--space-2xs); min-inline-size: 0; } .m-row-title { margin: 0; font: 600 var(--step-small)/1.35 var(--font-body); overflow-wrap: anywhere; } /* desktop insights tree: hidden on phones */ .d-insights { display: none; } .d-lead { display: none; } .d-lead:hover { display: none; } .d-lead:has(.card-link:focus-visible) { display: none; } .d-lead-image { display: none; } .d-lead-body { display: none; } .d-lead-title { display: none; } .d-lead-text { display: none; } .d-card-section { display: none; } .d-card-meta { display: none; } .d-cards { display: none; } .d-card { display: none; } .d-card:hover { display: none; } .d-card:has(.card-link:focus-visible) { display: none; } .d-card-image { display: none; } .d-card-body { display: none; } .d-card-title { display: none; } .d-card-text { display: none; } /* ---- inside articles (mobile): lists, Q&A, spec tables - neutral, hairlines, no colour blocks ---- */ .article-prose > p:first-of-type { color: var(--text); font-size: calc(var(--step-base) * 1.0625); line-height: 1.6; } .article-prose strong { color: var(--text); font-weight: 650; } .article-prose em { color: var(--text-2); } .article-prose ul { display: grid; margin: 0 0 var(--space-m); padding: 0; list-style: none; border-block: var(--line) solid var(--border); } .article-prose ul > li { position: relative; margin: 0; padding: var(--space-s) 0 var(--space-s) var(--space-m); line-height: 1.55; } .article-prose ul > li + li { border-block-start: var(--line) solid var(--separator); } .article-prose ul > li::before { content: ""; position: absolute; inset-inline-start: var(--space-2xs); inset-block-start: calc(var(--space-s) + 0.55em); inline-size: calc(var(--space-xs) * 1.25); block-size: calc(var(--space-xs) * 1.25); background: var(--text-2); } .article-prose h3 + p { padding-inline-start: var(--space); border-inline-start: calc(var(--line) * 2) solid var(--border); } .article-prose .m-spec { margin-block: var(--space-s) var(--space-m); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius); box-shadow: none; } .article-prose .m-spec-row dt { font-size: var(--step-tiny); letter-spacing: 0.05em; text-transform: uppercase; } .article-prose .d-table-wrap { display: none; } .article-prose .d-spec-table th[scope="row"] { display: none; } /* ---- Article editor + article components (Rule 23) ---- */ .m-ed-insert, .m-ed-linkdlg { inline-size: 100%; max-inline-size: 100%; max-block-size: 85%; margin: auto 0 0; padding: var(--space); color: var(--text); background: var(--bg); border: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--card-shadow); overflow-y: auto; } .m-ed-insert::backdrop, .m-ed-linkdlg::backdrop { background: var(--backdrop); } .m-ed-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space); margin-block-end: var(--space-s); } .m-ed-dialog-title { margin: 0; font: 700 var(--step-1)/1.2 var(--font-display); } .m-ed-insert-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); margin: var(--space-s) 0 0; padding: 0; list-style: none; } .m-ed-insert-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-xs); inline-size: 100%; min-block-size: var(--tap); margin: 0; padding: var(--space-xs) var(--space-s); font: inherit; color: var(--text); text-align: start; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius); cursor: pointer; } .m-ed-insert-item:hover, .m-ed-insert-item:focus-visible { border-color: var(--accent-line); background: var(--accent-50); } .m-ed-insert-item .icon { inline-size: var(--icon); block-size: var(--icon); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .m-ed-link-list { display: grid; gap: var(--space-2xs); margin: var(--space-xs) 0; padding: 0; list-style: none; max-block-size: calc(var(--space) * 14); overflow-y: auto; } .m-ed-link-pick { display: grid; gap: var(--space-2xs); inline-size: 100%; min-block-size: var(--tap); margin: 0; padding: var(--space-xs) var(--space-s); font: inherit; color: var(--text); text-align: start; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius); cursor: pointer; } .m-ed-link-pick:hover, .m-ed-link-pick:focus-visible { border-color: var(--accent-line); } .m-ed-link-pick strong { font-size: var(--step-small); line-height: 1.3; overflow-wrap: anywhere; } .m-ed-link-pick span { color: var(--text-2); font: var(--step-caption)/1.3 var(--font-mono); overflow-wrap: anywhere; } .m-ed-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs); margin-block-start: var(--space-s); } .m-ed-dialog-actions button.m-ed-primary { inline-size: auto; padding-inline: var(--space-m); } .m-ed-toast { position: fixed; z-index: 60; inset-inline: var(--space-s); inset-block-end: calc(var(--island-h) + var(--tap) + var(--space-l) + env(safe-area-inset-bottom, 0rem)); display: flex; align-items: center; justify-content: space-between; gap: var(--space); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space); color: var(--bg); font-size: var(--step-small); background: var(--text); border-radius: var(--radius-pill); box-shadow: var(--card-shadow); } button.m-ed-toast-undo { display: inline-flex; align-items: center; inline-size: auto; min-block-size: var(--tap); margin: 0; padding-inline: var(--space); font-weight: 700; color: var(--accent-text); background: var(--accent); border: 0; border-radius: var(--radius-pill); cursor: pointer; } .m-ed-draft { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-s); padding: var(--space-s) var(--space); color: var(--info); background: var(--info-bg); border-radius: var(--radius-l); } .m-ed-draft-text { flex: 1 1 calc(var(--space) * 14); margin: 0; font-size: var(--step-small); font-weight: 600; } .m-ed-draft button.m-ed-primary, .m-ed-draft button.m-ed-ghost { inline-size: auto; flex: 0 0 auto; } .m-ed-stats { margin: 0; color: var(--text-2); font-size: var(--step-caption); font-weight: 600; font-variant-numeric: tabular-nums; } .m-ed-checks { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; } .m-ed-check-row { display: grid; grid-template-columns: var(--dot) minmax(0, 1fr); align-items: start; gap: var(--space-xs); font-size: var(--step-caption); line-height: 1.4; } .m-ed-check-dot { inline-size: var(--dot); block-size: var(--dot); margin-block-start: calc(var(--space-xs) * 1.2); border-radius: 50%; background: var(--ok); } .m-ed-check-row.is-warn .m-ed-check-dot { background: var(--accent-ink); } .m-ed-check-row.is-bad .m-ed-check-dot { background: var(--error); } .m-ed-check-row.is-bad { color: var(--error); } .m-ed-outline { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; } .m-ed-outline-item.is-h3 { padding-inline-start: var(--space); } .m-ed-outline-item.is-h4 { padding-inline-start: var(--space-l); } .m-ed-outline-link { display: block; inline-size: 100%; min-block-size: var(--tap); margin: 0; padding: var(--space-2xs) var(--space-xs); font: inherit; font-size: var(--step-small); color: var(--text); text-align: start; background: none; border: 0; border-inline-start: calc(var(--line) * 2) solid var(--border); cursor: pointer; overflow-wrap: anywhere; } .m-ed-outline-link:hover, .m-ed-outline-link:focus-visible { color: var(--accent-ink); border-inline-start-color: var(--accent-ink); } .m-ed-outline-empty { color: var(--text-2); font-size: var(--step-caption); } .m-ed-serp { display: grid; gap: var(--space-2xs); padding: var(--space-s) var(--space); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius); overflow-wrap: anywhere; } .m-ed-serp-site { display: grid; margin: 0; line-height: 1.3; } .m-ed-serp-name { font-size: var(--step-small); font-weight: 600; } .m-ed-serp-url { color: var(--text-2); font-size: var(--step-caption); } .m-ed-serp-title { margin: 0; color: var(--info); font-size: var(--step-1); line-height: 1.3; } .m-ed-serp-desc { margin: 0; color: var(--text-2); font-size: var(--step-small); line-height: 1.45; } .d-ed-insert, .d-ed-linkdlg, .d-ed-keys { display: none; } .d-ed-insert::backdrop, .d-ed-linkdlg::backdrop, .d-ed-keys::backdrop { display: none; } .d-ed-dialog-head { display: none; } .d-ed-dialog-title { display: none; } .d-ed-insert-list { display: none; } .d-ed-insert-item { display: none; } .d-ed-insert-item:hover, .d-ed-insert-item:focus-visible { display: none; } .d-ed-insert-item .icon { display: none; } .d-ed-link-list { display: none; } .d-ed-link-pick { display: none; } .d-ed-link-pick:hover, .d-ed-link-pick:focus-visible { display: none; } .d-ed-link-pick strong { display: none; } .d-ed-link-pick span { display: none; } .d-ed-dialog-actions { display: none; } .d-ed-dialog-actions button.d-ed-primary { display: none; } .d-ed-keys-list { display: none; } .d-ed-keys-row { display: none; } .d-ed-keys-row dt, .d-ed-keys-row dd { display: none; } .d-ed-keys-row kbd { display: none; } button.d-ed-keys-open { display: none; } .d-ed-toast { display: none; } button.d-ed-toast-undo { display: none; } .d-ed-draft { display: none; } .d-ed-draft-text { display: none; } .d-ed-draft button.d-ed-primary, .d-ed-draft button.d-ed-ghost { display: none; } .d-ed-stats { display: none; } .d-ed-checks { display: none; } .d-ed-check-row { display: none; } .d-ed-check-dot { display: none; } .d-ed-check-row.is-warn .d-ed-check-dot { display: none; } .d-ed-check-row.is-bad .d-ed-check-dot { display: none; } .d-ed-check-row.is-bad { display: none; } .d-ed-outline { display: none; } .d-ed-outline-item.is-h3 { display: none; } .d-ed-outline-item.is-h4 { display: none; } .d-ed-outline-link { display: none; } .d-ed-outline-link:hover, .d-ed-outline-link:focus-visible { display: none; } .d-ed-outline-empty { display: none; } .d-ed-serp { display: none; } .d-ed-serp-site { display: none; } .d-ed-serp-name { display: none; } .d-ed-serp-url { display: none; } .d-ed-serp-title { display: none; } .d-ed-serp-desc { display: none; } .m-text-actions { display: flex; gap: var(--space-xs); inline-size: 100%; } button.m-text-cancel { display: inline-flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: var(--tap); margin: 0; padding-inline: var(--space); font-size: var(--step-small); font-weight: 600; color: var(--text); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-pill); cursor: pointer; } .d-text-actions { display: none; } button.d-text-cancel { display: none; } .texts-hit { padding: 0 var(--space-2xs); color: inherit; background: var(--accent-100); border-radius: var(--radius-s); } .texts-clear { display: inline-flex; align-items: center; min-block-size: var(--tap); color: var(--accent-ink); font-size: var(--step-small); font-weight: 700; } .m-texts { display: grid; gap: var(--space-s); } .m-texts-stats { margin: 0; color: var(--text-2); font-size: var(--step-small); } .m-texts-pick { display: grid; gap: var(--space-2xs); margin: 0; } .m-texts-pick-label { margin: 0; font-size: var(--step-small); font-weight: 600; } .m-texts-group { inline-size: 100%; min-block-size: var(--tap); padding: var(--space-xs) var(--space-s); font: inherit; font-weight: 600; color: var(--text); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius); } button.m-texts-open { display: flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: var(--tap); margin: 0; font-weight: 700; color: var(--text); background: var(--fill); border: 0; border-radius: var(--radius-pill); } .m-texts-head { display: grid; gap: var(--space-2xs); padding-block-start: var(--space-xs); } .m-texts-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs); margin: 0; } .m-texts-q { inline-size: 100%; min-block-size: var(--tap); margin: 0; padding: var(--space-xs) var(--space-s); font: inherit; font-size: 1em; color: var(--text); background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius-pill); } button.m-texts-go { display: flex; align-items: center; justify-content: center; inline-size: auto; min-block-size: var(--tap); margin: 0; padding-inline: var(--space); font-size: var(--step-small); font-weight: 700; color: var(--accent-text); background: var(--accent); border: 0; border-radius: var(--radius-pill); } .m-texts-filter { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-block-size: var(--tap); padding-inline: var(--space-s); color: var(--text); font-size: var(--step-small); font-weight: 600; text-decoration: none; background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius-pill); } .m-texts-filter[aria-current="true"] { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line); } .m-texts-filter-count { min-inline-size: calc(var(--space) * 1.5); padding: 0 var(--space-xs); color: var(--text-2); font-size: var(--step-caption); text-align: center; background: var(--fill); border-radius: var(--radius-pill); } .m-texts-title { margin: 0; font: 700 var(--step-1)/1.2 var(--font-display); overflow-wrap: anywhere; } .m-texts-sub { margin: 0; color: var(--text-2); font-size: var(--step-small); line-height: 1.45; } .m-texts-list { display: grid; gap: var(--space-s); margin: 0; padding: 0; list-style: none; } .m-text { display: grid; gap: var(--space-xs); padding: var(--space); background: var(--surface); border: var(--line) solid transparent; border-radius: var(--radius-l); box-shadow: var(--card-shadow); scroll-margin-block-start: var(--contact-sticky); } .m-text:target { border-color: var(--accent-line); } .m-text.is-invalid { border-color: var(--error); } .m-text-form { display: grid; gap: var(--space-xs); margin: 0; } .m-text-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); } .m-text-label { margin: 0; margin-inline-end: auto; font-size: var(--step-base); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; } .m-text-badge { display: inline-flex; align-items: center; min-block-size: calc(var(--space) * 1.4); padding-inline: var(--space-xs); color: var(--text-2); font-size: var(--step-caption); font-weight: 700; background: var(--fill); border-radius: var(--radius-pill); } .m-text-badge.is-seo { color: var(--info); background: var(--info-bg); } .m-text-badge.is-locked { color: var(--text-2); background: var(--fill); } .m-text-badge.is-edited { color: var(--ok); background: var(--ok-bg); } .m-text-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: 0; } .m-text-key code { color: var(--text-2); font: var(--step-caption)/1.3 var(--font-mono); overflow-wrap: anywhere; } button.m-text-copy { display: inline-flex; align-items: center; inline-size: auto; min-block-size: var(--tap); margin: 0; padding-inline: var(--space-xs); font-size: var(--step-caption); font-weight: 600; color: var(--accent-ink); background: none; border: 0; border-radius: var(--radius-pill); cursor: pointer; } .m-text-value { inline-size: 100%; min-block-size: var(--tap); margin: 0; padding: var(--space-xs) var(--space-s); font: inherit; font-size: 1em; line-height: 1.5; color: var(--text); background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius-s); resize: vertical; overflow-wrap: anywhere; } .m-text-value:focus-visible { border-color: var(--accent-line); } .m-text-value:invalid { border-color: var(--error); } .m-text-value[readonly] { color: var(--text-2); background: var(--fill); } .m-text-problem { margin: 0; padding: var(--space-2xs) var(--space-xs); color: var(--error); font-size: var(--step-caption); background: var(--error-bg); border-radius: var(--radius-s); } .m-text-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); } .m-text-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-s); margin: 0; color: var(--text-2); font-size: var(--step-caption); } .m-text-count { font-variant-numeric: tabular-nums; font-weight: 600; } .m-text-count[data-state="ok"] { color: var(--ok); } .m-text-count[data-state="bad"] { color: var(--error); } .m-text-keep code { padding: 0 var(--space-2xs); color: var(--accent-ink); font-family: var(--font-mono); background: var(--accent-50); border-radius: var(--radius-s); } .m-text-locked { font-style: italic; } button.m-text-save { display: inline-flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: var(--tap); margin: 0; padding-inline: var(--space-m); font-size: var(--step-small); font-weight: 700; color: var(--text-2); background: var(--fill); border: 0; border-radius: var(--radius-pill); } button.m-text-save.is-changed { color: var(--accent-text); background: var(--accent); } .m-text-history { padding-block-start: var(--space-2xs); border-block-start: var(--line) solid var(--separator); } .m-text-history-summary { display: flex; align-items: center; min-block-size: var(--tap); color: var(--text-2); font-size: var(--step-caption); font-weight: 600; cursor: pointer; } .m-text-history-list { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; } .m-text-change { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-2xs) var(--space-s); padding: var(--space-xs) var(--space-s); background: var(--bg); border-radius: var(--radius-s); } .m-text-change-when { grid-column: 1; color: var(--text-2); font-size: var(--step-caption); } .m-text-change-old { grid-column: 1; color: var(--text-2); font-size: var(--step-small); text-decoration: line-through; text-decoration-color: var(--separator); overflow-wrap: anywhere; } .m-text-change-new { grid-column: 1; font-size: var(--step-small); overflow-wrap: anywhere; } .m-text-change-tag { font-weight: 700; text-decoration: none; display: inline-block; } .m-text-restore { margin: 0; } button.m-text-restore-button { display: inline-flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: var(--tap); margin: 0; padding-inline: var(--space); font-size: var(--step-caption); font-weight: 700; color: var(--text); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-pill); } .d-texts { display: none; } .d-texts-side { display: none; } .d-texts-group-list { display: none; } .d-texts-group { display: none; } .d-texts-group .tile-icon { display: none; } .d-texts-group:hover { display: none; } .d-texts-group[aria-current="page"] { display: none; } .d-texts-group-name { display: none; } .d-texts-count { display: none; } .d-texts-main { display: none; } .d-texts-stats { display: none; } .d-texts-stat { display: none; } .d-texts-stat dt { display: none; } .d-texts-stat dd { display: none; } .d-texts-head { display: none; } .d-texts-head-icon { display: none; } .d-texts-head-text { display: none; } .d-texts-search { display: none; } .d-texts-q { display: none; } button.d-texts-go { display: none; } .d-texts-filter { display: none; } .d-texts-filter[aria-current="true"] { display: none; } .d-texts-filter-count { display: none; } .d-texts-title { display: none; } .d-texts-sub { display: none; } .d-texts-list { display: none; } .d-text { display: none; } .d-text:target { display: none; } .d-text.is-invalid { display: none; } .d-text-form { display: none; } .d-text-head { display: none; } .d-text-label { display: none; } .d-text-badge { display: none; } .d-text-badge.is-seo { display: none; } .d-text-badge.is-locked { display: none; } .d-text-badge.is-edited { display: none; } .d-text-key { display: none; } .d-text-key code { display: none; } button.d-text-copy { display: none; } .d-text-value { display: none; } .d-text-value:focus-visible { display: none; } .d-text-value:invalid { display: none; } .d-text-value[readonly] { display: none; } .d-text-problem { display: none; } .d-text-foot { display: none; } .d-text-meta { display: none; } .d-text-count { display: none; } .d-text-count[data-state="ok"] { display: none; } .d-text-count[data-state="bad"] { display: none; } .d-text-keep code { display: none; } .d-text-locked { display: none; } button.d-text-save { display: none; } button.d-text-save.is-changed { display: none; } .d-text-history { display: none; } .d-text-history-summary { display: none; } .d-text-history-list { display: none; } .d-text-change { display: none; } .d-text-change-when { display: none; } .d-text-change-old { display: none; } .d-text-change-new { display: none; } .d-text-change-tag { display: none; } .d-text-restore { display: none; } button.d-text-restore-button { display: none; } .m-font-select { inline-size: 100%; min-block-size: var(--tap); margin: 0 0 var(--space-2xs); padding: var(--space-xs) var(--space-s); font: inherit; color: var(--text); background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius-s); } .m-font-sample { margin: 0 0 var(--space-s); padding: var(--space-xs) var(--space-s); font-size: var(--step-base); line-height: 1.3; background: var(--fill); border-radius: var(--radius-s); overflow-wrap: anywhere; } .d-font-select { display: none; } .d-font-sample { display: none; } .preset-swatch { display: block; inline-size: calc(var(--tap) * 0.9); block-size: auto; flex: none; } .m-presets { display: grid; gap: var(--space-s); } .m-preset-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); margin: 0; padding: 0; list-style: none; } .m-preset-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2xs); } .m-preset-form, .m-preset-delete, .m-preset-save { margin: 0; } button.m-preset { display: flex; align-items: center; gap: var(--space-s); inline-size: 100%; min-block-size: var(--tap); margin: 0; padding: var(--space-xs) var(--space-s); font: inherit; color: var(--text); text-align: start; background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius); cursor: pointer; } button.m-preset:hover { border-color: var(--accent-line); } button.m-preset[aria-current="true"] { border-color: var(--accent-ink); box-shadow: 0 0 0 var(--line) var(--accent-ink); } .m-preset-text { display: grid; flex: 1 1 auto; min-inline-size: 0; } .m-preset-text strong { font-size: var(--step-small); } .m-preset-text span { color: var(--text-2); font-size: var(--step-caption); line-height: 1.35; overflow-wrap: anywhere; } .m-preset-on { flex: none; padding: var(--space-2xs) var(--space-xs); font-size: var(--step-caption); font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); border-radius: var(--radius-pill); } button.m-preset-remove { inline-size: auto; min-block-size: var(--tap); margin: 0; padding-inline: var(--space-s); font-size: var(--step-caption); font-weight: 600; color: var(--error); background: none; border: 0; border-radius: var(--radius-pill); cursor: pointer; } .m-preset-save-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); margin-block-start: var(--space-2xs); } .m-preset-name { inline-size: 100%; min-block-size: var(--tap); margin: 0; padding: var(--space-xs) var(--space-s); font: inherit; color: var(--text); background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius-s); } button.m-preset-save-button { display: flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: var(--tap); margin: 0; padding-inline: var(--space); font-weight: 700; color: var(--text); background: var(--fill); border: 0; border-radius: var(--radius-pill); } .d-presets { display: none; } .d-preset-list { display: none; } .d-preset-item { display: none; } .d-preset-form, .d-preset-delete, .d-preset-save { display: none; } button.d-preset { display: none; } button.d-preset:hover { display: none; } button.d-preset[aria-current="true"] { display: none; } .d-preset-text { display: none; } .d-preset-text strong { display: none; } .d-preset-text span { display: none; } .d-preset-on { display: none; } button.d-preset-remove { display: none; } .d-preset-save-row { display: none; } .d-preset-name { display: none; } button.d-preset-save-button { display: none; } .mfa { display: grid; gap: var(--space); max-inline-size: var(--content-max); margin: var(--space) auto var(--space-l); } .mfa-head { display: grid; gap: var(--space-xs); } .mfa-title { margin: 0; font: 700 var(--step-3)/1.15 var(--font-display); letter-spacing: -0.01em; } .mfa-lead { margin: 0; color: var(--text-2); } .qr { display: block; inline-size: 100%; block-size: auto; } .qr .qr-plate { fill: var(--qr-plate); } .qr .qr-ink { fill: var(--qr-ink); } .m-mfa { display: grid; gap: var(--space); padding: var(--space); background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--card-shadow); } .m-mfa-open { display: flex; align-items: center; justify-content: center; min-block-size: var(--tap); margin-block: var(--space-2xs); font-weight: 700; color: var(--accent-text); text-decoration: none; background: var(--accent); border-radius: var(--radius-pill); } .m-mfa-other { margin-block-start: var(--space-xs); padding: var(--space-s) var(--space); background: var(--fill); border-radius: var(--radius); } .m-mfa-other-summary { min-block-size: var(--tap); display: flex; align-items: center; font-size: var(--step-small); font-weight: 600; cursor: pointer; } .m-mfa-qr-plate { inline-size: var(--qr-size-m); margin: var(--space-s) auto 0; padding: var(--space-xs); background: var(--qr-plate); border-radius: var(--radius-l); } .m-mfa-list { display: grid; gap: var(--space); margin: 0; padding: 0; list-style: none; counter-reset: mfa; } .m-mfa-step { position: relative; display: grid; gap: var(--space-2xs); padding-inline-start: calc(var(--tile) + var(--space-s)); counter-increment: mfa; } .m-mfa-step::before { content: counter(mfa); position: absolute; inset-inline-start: 0; inset-block-start: 0; display: grid; place-items: center; inline-size: var(--tile); block-size: var(--tile); font-weight: 700; color: var(--accent-text); background: var(--accent); border-radius: 50%; } .m-mfa-step > span { color: var(--text-2); font-size: var(--step-small); line-height: 1.45; } .m-mfa-key { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2xs) var(--space-s); inline-size: 100%; padding: var(--space-s) var(--space); background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius); } .m-mfa-key-label { grid-column: 1 / -1; color: var(--text-2); font-size: var(--step-caption); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .m-mfa-key-value { font: 600 var(--step-base)/1.4 var(--font-mono); letter-spacing: 0.06em; overflow-wrap: anywhere; user-select: all; } button.m-mfa-copy { display: inline-flex; align-items: center; justify-content: center; inline-size: auto; min-block-size: var(--tap); margin: 0; padding-inline: var(--space); font-size: var(--step-small); font-weight: 700; color: var(--text); background: var(--fill); border: 0; border-radius: var(--radius-pill); cursor: pointer; } .m-mfa-meta { grid-column: 1 / -1; color: var(--text-2); font-size: var(--step-caption); overflow-wrap: anywhere; } .m-mfa-form { display: grid; gap: var(--space-xs); margin: 0; } .m-mfa-label { margin: 0; font-size: var(--step-small); font-weight: 600; } .m-mfa-code { inline-size: 100%; min-block-size: calc(var(--tap) * 1.2); padding: var(--space-s) var(--space); font: 600 var(--step-2)/1 var(--font-mono); letter-spacing: 0.3em; text-align: center; color: var(--text); background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius); } .m-mfa-code:focus-visible { border-color: var(--accent); } button.m-mfa-submit { display: flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: var(--tap); margin: 0; padding: var(--space-xs) var(--space); line-height: 1.25; text-align: center; font-weight: 700; color: var(--accent-text); background: var(--accent); border: 0; border-radius: var(--radius-pill); } .m-mfa-note { margin: 0; color: var(--text-2); font-size: var(--step-caption); } .d-mfa { display: none; } .d-mfa-steps { display: none; } .d-mfa-qr { display: none; } .d-mfa-qr-plate { display: none; } .d-mfa-qr-caption { display: none; } .d-mfa-list { display: none; } .d-mfa-step { display: none; } .d-mfa-step::before { display: none; } .d-mfa-step > span { display: none; } .d-mfa-key { display: none; } .d-mfa-key-label { display: none; } .d-mfa-key-value { display: none; } button.d-mfa-copy { display: none; } .d-mfa-meta { display: none; } .d-mfa-form { display: none; } .d-mfa-label { display: none; } .d-mfa-code { display: none; } .d-mfa-code:focus-visible { display: none; } button.d-mfa-submit { display: none; } .d-mfa-note { display: none; } .m-ed-tool .icon { inline-size: var(--icon); block-size: var(--icon); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .m-ed-toolbar { position: sticky; inset-block-start: calc(var(--tap) * 2 + var(--space)); z-index: 1; } .d-ed-tool .icon { display: none; } .d-ed-toolbar { display: none; } .admin-links { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; } .admin-link { display: inline-flex; align-items: center; min-block-size: var(--tap); padding-inline: var(--space); color: var(--accent-ink); font-size: var(--step-small); font-weight: 600; text-decoration: none; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-pill); } .admin-link:hover { border-color: var(--accent-line); } .admin-code { margin: 0; padding: var(--space-s); font: var(--step-small)/1.5 var(--font-mono); overflow-wrap: anywhere; background: var(--fill); border-radius: var(--radius-s); } .ed-data { display: none; } .ax-preview-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-s); margin: var(--space-s) 0; padding: var(--space-s) var(--space); font-size: var(--step-small); color: var(--info); background: var(--info-bg); border-radius: var(--radius); } .ax-preview-back { color: inherit; font-weight: 700; } .article-prose { font-family: var(--article-font-body, var(--font-body)); } .article-title, .article-prose h2, .article-prose h3, .article-prose h4, .ax-faq-q h3 { font-family: var(--article-font-heading, var(--font-display)); } .ax-layout-wide .article-prose { max-inline-size: none; } .ax-figure { display: grid; gap: var(--space-xs); margin: var(--space-m) 0; } .ax-figure-image { inline-size: 100%; block-size: auto; border-radius: var(--radius); } .ax-figure-inline { max-inline-size: 100%; } .ax-figure-wide { max-inline-size: 100%; } .ax-figure-full { max-inline-size: 100%; } .ax-figure-full .ax-figure-image { border-radius: 0; } .ax-figure-caption { color: var(--text-2); font-size: var(--step-small); line-height: 1.45; } .ax-embed { display: grid; gap: var(--space-xs); margin: var(--space-m) 0; } .ax-embed-stage { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--fill); border: var(--line) solid var(--border); border-radius: var(--radius); } .ax-ratio-16-9 .ax-embed-stage { aspect-ratio: 16 / 9; } .ax-ratio-4-3 .ax-embed-stage { aspect-ratio: 4 / 3; } .ax-ratio-1-1 .ax-embed-stage { aspect-ratio: 1 / 1; } .ax-ratio-9-16 .ax-embed-stage { aspect-ratio: 9 / 16; max-block-size: calc(var(--space) * 36); } .ax-ratio-21-9 .ax-embed-stage { aspect-ratio: 4 / 3; } .ax-embed-card { display: grid; gap: var(--space-xs); max-inline-size: var(--embed-card-max); padding: var(--space); text-align: center; } .ax-embed-provider { margin: 0; color: var(--text-2); font-size: var(--step-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .ax-embed-title { margin: 0; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; } .ax-embed-note { margin: 0; color: var(--text-2); font-size: var(--step-caption); line-height: 1.4; } .ax-embed-load { justify-self: center; min-block-size: var(--tap); margin: 0; padding-inline: var(--space-m); font: inherit; font-weight: 700; color: var(--accent-text); background: var(--accent); border: 0; border-radius: var(--radius-pill); cursor: pointer; } .ax-embed-settings { justify-self: center; min-block-size: var(--tap); margin: 0; padding-inline: var(--space); font: inherit; font-size: var(--step-caption); color: var(--accent-ink); background: none; border: 0; text-decoration: underline; cursor: pointer; } .ax-embed-frame { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; } .ax-embed-caption { font-size: var(--step-caption); } .ax-embed-caption a { color: var(--accent-ink); } .ax-html { display: block; min-inline-size: 0; } .ax-quote { margin: var(--space-m) 0; padding: var(--space) var(--space) var(--space) var(--space-m); font-size: var(--step-1); line-height: 1.45; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-l); } .ax-quote p { margin: 0 0 var(--space-s); } .ax-quote-cite { color: var(--text-2); font-size: var(--step-small); } .ax-quote-cite cite { font-style: normal; font-weight: 600; } .ax-callout { display: grid; gap: var(--space-xs); margin: var(--space-m) 0; padding: var(--space); border-radius: var(--radius-l); color: var(--text); background: var(--fill); } .ax-callout > :last-child { margin-block-end: 0; } .ax-callout-tip { color: var(--info); background: var(--info-bg); } .ax-callout-warning { color: var(--accent-ink); background: var(--accent-soft); } .ax-callout-success { color: var(--ok); background: var(--ok-bg); } .ax-callout a, .ax-callout strong { color: inherit; } .ax-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin: var(--space-m) 0; } .article-prose .ax-btn { display: inline-flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: var(--tap); padding-inline: var(--space-m); font-weight: 700; text-decoration: none; border-radius: var(--radius-pill); } .article-prose .ax-btn-primary { color: var(--accent-text); background: var(--accent); } .article-prose .ax-btn-secondary { color: var(--text); background: var(--surface); border: var(--line) solid var(--border); } .article-prose .ax-btn:hover { filter: brightness(1.06); } .ax-divider { margin: var(--space-l) 0; border: 0; border-block-start: var(--line) solid var(--border); } .ax-faq { display: grid; margin: var(--space-m) 0; border-block: var(--line) solid var(--border); } .ax-faq-item + .ax-faq-item { border-block-start: var(--line) solid var(--separator); } .ax-faq-q { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-s); min-block-size: var(--tap); padding-block: var(--space-s); cursor: pointer; list-style: none; } .ax-faq-q::-webkit-details-marker { display: none; } .ax-faq-q::after { content: "+"; color: var(--accent-ink); font-size: var(--step-1); font-weight: 600; } .ax-faq-item[open] .ax-faq-q::after { content: "\2212"; } .article-prose .ax-faq-q h3 { margin: 0; font-size: var(--step-base); line-height: 1.35; } .ax-faq-a { padding-block-end: var(--space-s); } .ax-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space); margin: var(--space-m) 0; } .ax-cols-2 { grid-template-columns: minmax(0, 1fr); } .ax-cols-3 { grid-template-columns: minmax(0, 1fr); } .ax-col > :first-child { margin-block-start: 0; } .ax-grid-2, .ax-grid-3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space); margin: var(--space-m) 0; } .ax-grid-2 { grid-template-columns: minmax(0, 1fr); } .ax-grid-3 { grid-template-columns: minmax(0, 1fr); } .ax-card { display: grid; align-content: start; gap: var(--space-xs); min-inline-size: 0; padding: var(--space); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-l); } .ax-card > * { margin: 0; } .ax-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); margin: var(--space-m) 0; } .ax-stats > div { display: grid; gap: var(--space-2xs); padding: var(--space); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-l); } .ax-stats dt { order: 2; color: var(--text-2); font-size: var(--step-small); } .ax-stats dd { order: 1; margin: 0; font: 700 calc(var(--stat-size) * 0.8)/1 var(--article-font-heading, var(--font-display)); color: var(--accent-ink); } .ax-box { margin: var(--space-m) 0; padding: var(--space); background: var(--accent-50); border-radius: var(--radius-l); } .ax-box > :last-child { margin-block-end: 0; } .ax-lead { font-size: var(--step-1); line-height: 1.45; } .ax-muted { color: var(--text-2); } .ax-center { text-align: center; } .ax-badge { display: inline-block; padding: var(--space-2xs) var(--space-s); font-size: var(--step-caption); font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); border-radius: var(--radius-pill); } .ax-details { margin: var(--space-s) 0; padding: var(--space-s) var(--space); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius); } .ax-details summary { min-block-size: var(--tap); display: flex; align-items: center; font-weight: 700; cursor: pointer; } .m-arts { display: grid; gap: var(--space-s); } .m-arts-new, .m-arts-fonts { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); min-block-size: var(--tap); font-weight: 700; text-decoration: none; border-radius: var(--radius-pill); } .m-arts-new { color: var(--accent-text); background: var(--accent); } .m-arts-fonts { color: var(--text); background: var(--surface); border: var(--line) solid var(--border); } .m-arts-list { display: grid; gap: var(--space-s); margin: 0; padding: 0; list-style: none; } .m-arts-card { display: grid; grid-template-columns: var(--ed-thumb) minmax(0, 1fr); gap: var(--space-s); padding: var(--space-s); background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--card-shadow); } .m-arts-thumb { inline-size: var(--ed-thumb); aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius); background: var(--fill); } .m-arts-body { display: grid; justify-items: start; align-content: start; gap: var(--space-2xs); min-inline-size: 0; } .m-arts-title { color: var(--text); font-weight: 700; line-height: 1.3; text-decoration: none; overflow-wrap: anywhere; } .m-arts-meta { color: var(--text-2); font-size: var(--step-caption); } .m-arts-view { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; min-block-size: var(--tap); color: var(--text); font-size: var(--step-small); font-weight: 700; text-decoration: none; background: var(--fill); border-radius: var(--radius-pill); } .m-fonts { display: grid; gap: var(--space-s); margin: 0; padding: 0; list-style: none; } .m-font-card { display: grid; gap: var(--space-xs); padding: var(--space); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--card-shadow); } .m-font-name { display: grid; gap: var(--space-2xs); margin: 0; } .m-font-name span { color: var(--text-2); font-size: var(--step-caption); } .m-font-sample { margin: 0; font-size: var(--step-1); line-height: 1.3; overflow-wrap: anywhere; } .m-revs { display: grid; gap: var(--space-s); margin: 0; padding: 0; list-style: none; } .m-revs-card { display: grid; gap: var(--space-2xs); padding: var(--space); background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--card-shadow); } .m-revs-when, .m-revs-title, .m-revs-meta { margin: 0; } .m-revs-when { display: grid; gap: var(--space-2xs); } .m-revs-when span, .m-revs-meta { color: var(--text-2); font-size: var(--step-caption); } .m-revs-title { font-weight: 600; overflow-wrap: anywhere; } .m-revs-form { margin: 0; } button.m-revs-restore { display: inline-flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: calc(var(--tap) * 0.85); margin: 0; padding-inline: var(--space); font-size: var(--step-small); color: var(--text); background: var(--fill); border-radius: var(--radius-pill); } .m-editor { display: grid; gap: var(--space); padding-block-end: calc(var(--tap) * 2); } .m-ed-title { inline-size: 100%; min-block-size: calc(var(--step-3) * 2.6); margin: 0; padding: var(--space-s) 0; font: 700 var(--step-3)/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--text); background: none; border: 0; border-block-end: var(--line) solid var(--border); resize: none; overflow-y: hidden; } .m-ed-title:focus-visible { outline: none; border-block-end-color: var(--accent); } .m-ed-canvas { display: grid; gap: var(--space-s); min-inline-size: 0; } .m-ed-canvas[data-empty]:not([data-empty=""])::before { content: attr(data-empty); padding: var(--space-m); color: var(--text-2); text-align: center; background: var(--fill); border-radius: var(--radius-l); } .m-ed-block { display: grid; min-inline-size: 0; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-l); box-shadow: var(--card-shadow); } .m-ed-block:focus-within { border-color: var(--accent-line); } .m-ed-block.is-dragging { opacity: var(--drag-opacity); } .m-ed-block-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space); border-block-end: var(--line) solid var(--separator); } .m-ed-block-kind { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--text-2); font-size: var(--step-caption); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .m-ed-block-kind .icon { inline-size: var(--icon); block-size: var(--icon); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .m-ed-block-tools { display: flex; gap: var(--space-2xs); } .m-ed-block-body { display: grid; gap: var(--space-s); min-inline-size: 0; padding: var(--space-s); } .m-ed-tool { display: inline-grid; place-items: center; min-inline-size: var(--tap); min-block-size: var(--tap); margin: 0; padding: 0 var(--space-xs); font: 700 var(--step-small)/1 var(--font-body); color: var(--text); background: none; border: 0; border-radius: var(--radius-s); cursor: pointer; } .m-ed-tool:hover { background: var(--fill); } .m-ed-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2xs); padding: var(--space-2xs); background: var(--panel-glass-bg); -webkit-backdrop-filter: var(--panel-glass-blur); backdrop-filter: var(--panel-glass-blur); border-block-end: var(--line) solid var(--panel-glass-edge); border-radius: var(--radius) var(--radius) 0 0; } .m-ed-rich-wrap { display: grid; min-inline-size: 0; border: var(--line) solid var(--border); border-radius: var(--radius); } .m-ed-rich { min-block-size: var(--ed-rich-min); padding: var(--space-s) var(--space); line-height: 1.6; overflow-wrap: anywhere; font-family: var(--font-body); outline: none; } .m-ed-rich:focus-visible { box-shadow: inset 0 0 0 var(--focus-ring) var(--accent-line); } .m-ed-rich p, .m-ed-rich ul, .m-ed-rich ol, .m-ed-rich blockquote { margin: 0 0 var(--space-s); } .m-ed-rich h3, .m-ed-rich h4 { margin: var(--space) 0 var(--space-xs); font-family: var(--font-display); } .m-ed-rich a { color: var(--accent-ink); } .m-ed-rich blockquote { padding-inline-start: var(--space); border-inline-start: var(--focus-ring) solid var(--border); } .m-ed-rich table { inline-size: 100%; border-collapse: collapse; } .m-ed-rich th, .m-ed-rich td { padding: var(--space-2xs) var(--space-xs); border: var(--line) solid var(--border); overflow-wrap: anywhere; } .m-ed-field { display: grid; gap: var(--space-2xs); min-inline-size: 0; margin: 0; padding: 0; border: 0; } .m-ed-label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs); margin: 0; color: var(--text); font-size: var(--step-small); font-weight: 600; } .m-ed-hint { margin: 0; color: var(--text-2); font-size: var(--step-caption); line-height: 1.4; } .m-ed-input { inline-size: 100%; min-block-size: var(--tap); margin: 0; padding: var(--space-xs) var(--space-s); font: inherit; font-size: 1em; color: var(--text); background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius-s); } .m-ed-input:focus-visible { border-color: var(--accent-line); } .m-ed-area { resize: vertical; line-height: 1.5; } .m-ed-code { min-block-size: var(--ed-code-min); font: var(--step-small)/1.55 var(--font-mono); tab-size: 2; resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere; } .m-ed-heading-input { font: 700 var(--step-1)/1.3 var(--font-display); } .m-ed-count { color: var(--text-2); font-size: var(--step-caption); font-weight: 500; } .m-ed-count[data-state="bad"] { color: var(--error); } .m-ed-count[data-state="ok"] { color: var(--ok); } .m-ed-slug { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius-s); } .m-ed-slug-prefix { padding-inline: var(--space-s) 0; color: var(--text-2); font: var(--step-caption)/1 var(--font-mono); } .m-ed-slug .m-ed-input { border: 0; background: none; font-family: var(--font-mono); } .m-ed-row { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-s); } .m-ed-grow { flex: 1 1 calc(var(--space) * 14); } .m-ed-stack { display: grid; gap: var(--space-s); min-inline-size: 0; } .m-ed-segment { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2xs); padding: var(--space-2xs); background: var(--fill); border-radius: var(--radius-s); } .m-ed-segment-option { position: relative; display: grid; margin: 0; font-weight: 600; } .m-ed-segment-option input { position: absolute; opacity: 0; inline-size: 100%; block-size: 100%; margin: 0; cursor: pointer; } .m-ed-segment-option span { display: grid; place-items: center; min-block-size: var(--tap); padding-inline: var(--space-xs); font-size: var(--step-caption); text-align: center; border-radius: calc(var(--radius-s) - var(--space-2xs)); } .m-ed-segment-option input:checked + span { color: var(--text); background: var(--surface); box-shadow: var(--card-shadow); } .m-ed-segment-option input:focus-visible + span { outline: var(--focus-ring) solid var(--focus-color); } .m-ed-check { display: inline-flex; align-items: center; gap: var(--space-xs); margin: 0; font-size: var(--step-small); } .m-ed-ghost { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-block-size: var(--tap); margin: 0; padding-inline: var(--space); font: inherit; font-size: var(--step-small); font-weight: 600; color: var(--text); background: var(--fill); border: 0; border-radius: var(--radius-pill); cursor: pointer; } .m-ed-ghost:hover { background: var(--accent-soft); } .m-ed-ghost .icon, .m-ed-add-item .icon, .m-ed-bar-add .icon { inline-size: var(--icon); block-size: var(--icon); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .m-ed-divider { margin: var(--space-s) 0; border: 0; border-block-start: var(--line) solid var(--border); } .m-ed-detected { margin: 0; color: var(--accent-ink); font-size: var(--step-caption); font-weight: 600; } .m-ed-image-frame, .m-ed-cover-frame { display: grid; place-items: center; min-block-size: calc(var(--space) * 8); overflow: hidden; background: var(--fill); border-radius: var(--radius); } .m-ed-image-preview, .m-ed-cover-image { inline-size: 100%; block-size: auto; border-radius: var(--radius); } .m-ed-image-empty, .m-ed-cover-empty { padding: var(--space); color: var(--text-2); font-size: var(--step-small); } .m-ed-cover { display: grid; gap: var(--space-s); } .m-ed-library { inline-size: 100%; max-inline-size: 100%; max-block-size: 100%; margin: auto 0 0; padding: 0; color: var(--text); background: var(--bg); border: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--card-shadow); overflow-y: auto; } .m-ed-library::backdrop { background: var(--backdrop); } .m-ed-library-head { position: sticky; inset-block-start: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space); padding: var(--space-s) var(--space); background: var(--bg); border-block-end: var(--line) solid var(--separator); } .m-ed-library-title { margin: 0; font: 700 var(--step-1)/1.2 var(--font-display); } .m-ed-icon-button { display: grid; place-items: center; inline-size: var(--tap); block-size: var(--tap); margin: 0; padding: 0; color: var(--text); background: var(--fill); border: 0; border-radius: 50%; cursor: pointer; } .m-ed-icon-button .icon { inline-size: var(--icon); block-size: var(--icon); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .m-ed-upload { display: grid; gap: var(--space-xs); margin: var(--space); padding: var(--space); background: var(--surface); border-radius: var(--radius-l); } .m-ed-upload-title { margin: 0; font-weight: 700; } .m-ed-file { inline-size: 100%; font: inherit; font-size: var(--step-small); } .m-ed-progress { inline-size: 100%; block-size: var(--space-s); accent-color: var(--accent); } .m-ed-upload-status { margin: 0; font-size: var(--step-small); font-weight: 600; } .m-ed-library-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); margin: 0; padding: 0 var(--space) var(--space); list-style: none; } .m-ed-library-item { display: grid; gap: var(--space-2xs); inline-size: 100%; margin: 0; padding: var(--space-2xs); font: inherit; color: var(--text); text-align: start; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius); cursor: pointer; } .m-ed-library-item:hover, .m-ed-library-item:focus-visible { border-color: var(--accent); } .m-ed-library-image { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radius) - var(--space-2xs)); } .m-ed-library-alt { font-size: var(--step-caption); line-height: 1.3; color: var(--text-2); overflow-wrap: anywhere; } .m-ed-table-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: var(--line); padding: var(--line); background: var(--border); border-radius: var(--radius-s); } .m-ed-cell { min-block-size: var(--tap); padding: var(--space-xs); font-size: var(--step-small); line-height: 1.4; overflow-wrap: anywhere; background: var(--surface); outline: none; } .m-ed-cell:focus-visible { box-shadow: inset 0 0 0 var(--focus-ring) var(--accent-line); } .m-ed-cell.is-head { font-weight: 700; background: var(--fill); } .m-ed-faq { display: grid; gap: var(--space-s); } .m-ed-faq-item { display: grid; gap: var(--space-xs); padding: var(--space-s); background: var(--bg); border-radius: var(--radius); } .m-ed-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-s); } .m-ed-cols[data-count="3"] { grid-template-columns: minmax(0, 1fr); } .m-ed-html-preview { min-block-size: calc(var(--space) * 4); padding: var(--space); background: var(--bg); border: var(--line) dashed var(--border); border-radius: var(--radius); overflow-wrap: anywhere; } .m-ed-preview-problem { margin: 0; color: var(--error); } .m-ed-add { display: grid; gap: var(--space-s); padding: var(--space); background: var(--surface); border: var(--line) dashed var(--border); border-radius: var(--radius-l); } .m-ed-add-title { margin: 0; font-weight: 700; } .m-ed-add-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); margin: 0; padding: 0; list-style: none; } .m-ed-add-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-xs); inline-size: 100%; min-block-size: var(--tap); margin: 0; padding: var(--space-xs) var(--space-s); font: inherit; color: var(--text); text-align: start; background: var(--bg); border: var(--line) solid transparent; border-radius: var(--radius); cursor: pointer; } .m-ed-add-item:hover, .m-ed-add-item:focus-visible { border-color: var(--accent-line); background: var(--accent-50); } .m-ed-add-text { display: grid; min-inline-size: 0; } .m-ed-add-text strong { font-size: var(--step-small); } .m-ed-add-text span { display: none; } .m-ed-card { display: grid; gap: var(--space-s); min-inline-size: 0; margin: 0; padding: var(--space); background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--card-shadow); } .m-ed-card-title { margin: 0; font: 700 var(--step-base)/1.3 var(--font-display); } .m-ed-card-summary { font-weight: 700; cursor: pointer; } .m-ed-switch { position: relative; display: grid; grid-template-columns: var(--switch-w) minmax(0, 1fr); align-items: center; gap: var(--space-s); margin: 0; cursor: pointer; } .m-ed-switch input { position: absolute; opacity: 0; inline-size: var(--switch-w); block-size: var(--switch-h); margin: 0; } .m-ed-switch-track { position: relative; inline-size: var(--switch-w); block-size: var(--switch-h); background: var(--switch-off); border-radius: var(--radius-pill); transition: background var(--dur-fast) var(--ease-out); } .m-ed-switch-track::after { content: ""; position: absolute; inset-block-start: calc((var(--switch-h) - var(--knob-size)) / 2); inset-inline-start: calc((var(--switch-h) - var(--knob-size)) / 2); inline-size: var(--knob-size); block-size: var(--knob-size); background: var(--knob); border-radius: 50%; box-shadow: var(--knob-shadow); transition: transform var(--dur-fast) var(--ease-spring); } .m-ed-switch input:checked + .m-ed-switch-track { background: var(--switch-on); } .m-ed-switch input:checked + .m-ed-switch-track::after { transform: translateX(calc(var(--switch-w) - var(--switch-h))); } .m-ed-switch input:focus-visible + .m-ed-switch-track { outline: var(--focus-ring) solid var(--focus-color); outline-offset: calc(var(--focus-ring) / 1.5); } .m-ed-switch-label { font-weight: 700; } .m-ed-actions { display: grid; gap: var(--space-xs); } button.m-ed-save, button.m-ed-save-preview, button.m-ed-primary { display: flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: var(--tap); margin: 0; padding-inline: var(--space); font-weight: 700; color: var(--accent-text); background: var(--accent); border: 0; border-radius: var(--radius-pill); } button.m-ed-save-preview { color: var(--text); background: var(--fill); } .m-ed-primary { cursor: pointer; } .m-ed-status { min-block-size: 1.2em; margin: 0; color: var(--accent-ink); font-size: var(--step-caption); font-weight: 600; } .m-ed-css-result { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; font-size: var(--step-caption); } .m-ed-css-ok { color: var(--ok); font-weight: 600; } .m-ed-css-bad { padding: var(--space-2xs) var(--space-xs); color: var(--error); background: var(--error-bg); border-radius: var(--radius-s); } .m-ed-css-wait { color: var(--text-2); } .m-ed-font-sample { margin: 0; padding: var(--space-xs) var(--space-s); font-size: var(--step-1); line-height: 1.3; background: var(--fill); border-radius: var(--radius-s); overflow-wrap: anywhere; } .m-ed-problems { display: grid; gap: var(--space-2xs); padding: var(--space) var(--space-m); color: var(--error); background: var(--error-bg); border-radius: var(--radius-l); } .m-ed-problems-title { margin: 0; font-weight: 700; } .m-ed-problems ul { margin: 0; padding-inline-start: var(--space); } .m-ed-delete { display: grid; gap: var(--space-xs); margin: 0; } button.m-ed-danger { display: flex; align-items: center; justify-content: center; inline-size: 100%; justify-self: start; min-block-size: var(--tap); margin: 0; padding-inline: var(--space-m); font-weight: 700; color: var(--error); background: var(--error-bg); border: 0; border-radius: var(--radius-pill); } .m-ed-danger-zone { border: var(--line) solid var(--error-bg); } .m-ed-blocks-out { display: none; } .m-ed-tabs { position: sticky; inset-block-start: calc(var(--tap) + var(--space)); z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2xs); padding: var(--space-2xs); background: var(--panel-glass-bg); -webkit-backdrop-filter: var(--panel-glass-blur); backdrop-filter: var(--panel-glass-blur); box-shadow: 0 0 0 var(--line) var(--panel-glass-edge); border-radius: var(--radius-pill); } .m-ed-tab { min-block-size: var(--tap); margin: 0; font: inherit; font-size: var(--step-small); font-weight: 700; color: var(--text); background: none; border: 0; border-radius: var(--radius-pill); cursor: pointer; } .m-ed-tab[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); box-shadow: var(--card-shadow); } .m-ed-panel { display: grid; gap: var(--space-s); min-inline-size: 0; } .m-ed-bar { position: sticky; inset-block-end: calc(var(--island-h) + var(--space-m) + env(safe-area-inset-bottom, 0)); z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-xs); padding: var(--space-xs); background: var(--panel-glass-bg); -webkit-backdrop-filter: var(--panel-glass-blur); backdrop-filter: var(--panel-glass-blur); border: var(--line) solid var(--glass-rim); border-radius: var(--radius-pill); box-shadow: var(--card-shadow); } .m-ed-bar-add { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); min-block-size: var(--tap); margin: 0; font: inherit; font-weight: 700; color: var(--text); background: var(--fill); border: 0; border-radius: var(--radius-pill); cursor: pointer; } .d-arts { display: none; } .d-arts-bar { display: none; } .d-arts-new, .d-arts-fonts { display: none; } .d-arts-new { display: none; } .d-arts-fonts { display: none; } .d-arts-list { display: none; } .d-arts-item { display: none; } .d-arts-item + .d-arts-item { display: none; } .d-arts-thumb { display: none; } .d-arts-main { display: none; } .d-arts-title { display: none; } .d-arts-title:hover { display: none; } .d-arts-path { display: none; } .d-arts-sphere { display: none; } .d-arts-state { display: none; } .d-arts-when { display: none; } .d-arts-actions { display: none; } .d-arts-edit, .d-arts-view { display: none; } .d-arts-edit { display: none; } .d-arts-view { display: none; } .d-fonts { display: none; } .d-font-card { display: none; } .d-font-name { display: none; } .d-font-name span { display: none; } .d-font-sample { display: none; } .d-revs { display: none; } .d-revs-row { display: none; } .d-revs-row + .d-revs-row { display: none; } .d-revs-when { display: none; } .d-revs-when span, .d-revs-meta { display: none; } .d-revs-title { display: none; } .d-revs-form { display: none; } button.d-revs-restore { display: none; } .d-editor { display: none; } .d-ed-layout { display: none; } .d-ed-main { display: none; } .d-ed-side { display: none; } .d-ed-publish { display: none; } .d-ed-title { display: none; } .d-ed-title:focus-visible { display: none; } .d-ed-canvas { display: none; } .d-ed-canvas[data-empty]:not([data-empty=""])::before { display: none; } .d-ed-block { display: none; } .d-ed-block:focus-within { display: none; } .d-ed-block.is-dragging { display: none; } .d-ed-block-bar { display: none; } .d-ed-block-kind { display: none; } .d-ed-block-kind .icon { display: none; } .d-ed-block-tools { display: none; } .d-ed-block-body { display: none; } .d-ed-tool { display: none; } .d-ed-tool:hover { display: none; } .d-ed-toolbar { display: none; } .d-ed-rich-wrap { display: none; } .d-ed-rich { display: none; } .d-ed-rich:focus-visible { display: none; } .d-ed-rich p, .d-ed-rich ul, .d-ed-rich ol, .d-ed-rich blockquote { display: none; } .d-ed-rich h3, .d-ed-rich h4 { display: none; } .d-ed-rich a { display: none; } .d-ed-rich blockquote { display: none; } .d-ed-rich table { display: none; } .d-ed-rich th, .d-ed-rich td { display: none; } .d-ed-field { display: none; } .d-ed-label { display: none; } .d-ed-hint { display: none; } .d-ed-input { display: none; } .d-ed-input:focus-visible { display: none; } .d-ed-area { display: none; } .d-ed-code { display: none; } .d-ed-heading-input { display: none; } .d-ed-count { display: none; } .d-ed-count[data-state="bad"] { display: none; } .d-ed-count[data-state="ok"] { display: none; } .d-ed-slug { display: none; } .d-ed-slug-prefix { display: none; } .d-ed-slug .d-ed-input { display: none; } .d-ed-row { display: none; } .d-ed-grow { display: none; } .d-ed-stack { display: none; } .d-ed-segment { display: none; } .d-ed-segment-option { display: none; } .d-ed-segment-option input { display: none; } .d-ed-segment-option span { display: none; } .d-ed-segment-option input:checked + span { display: none; } .d-ed-segment-option input:focus-visible + span { display: none; } .d-ed-check { display: none; } .d-ed-ghost { display: none; } .d-ed-ghost:hover { display: none; } .d-ed-ghost .icon, .d-ed-add-item .icon, .d-ed-bar-add .icon { display: none; } .d-ed-divider { display: none; } .d-ed-detected { display: none; } .d-ed-image-frame, .d-ed-cover-frame { display: none; } .d-ed-image-preview, .d-ed-cover-image { display: none; } .d-ed-image-empty, .d-ed-cover-empty { display: none; } .d-ed-cover { display: none; } .d-ed-library { display: none; } .d-ed-library::backdrop { display: none; } .d-ed-library-head { display: none; } .d-ed-library-title { display: none; } .d-ed-icon-button { display: none; } .d-ed-icon-button .icon { display: none; } .d-ed-upload { display: none; } .d-ed-upload-title { display: none; } .d-ed-file { display: none; } .d-ed-progress { display: none; } .d-ed-upload-status { display: none; } .d-ed-library-grid { display: none; } .d-ed-library-item { display: none; } .d-ed-library-item:hover, .d-ed-library-item:focus-visible { display: none; } .d-ed-library-image { display: none; } .d-ed-library-alt { display: none; } .d-ed-table-grid { display: none; } .d-ed-cell { display: none; } .d-ed-cell:focus-visible { display: none; } .d-ed-cell.is-head { display: none; } .d-ed-faq { display: none; } .d-ed-faq-item { display: none; } .d-ed-cols { display: none; } .d-ed-cols[data-count="3"] { display: none; } .d-ed-html-preview { display: none; } .d-ed-preview-problem { display: none; } .d-ed-add { display: none; } .d-ed-add-title { display: none; } .d-ed-add-grid { display: none; } .d-ed-add-item { display: none; } .d-ed-add-item:hover, .d-ed-add-item:focus-visible { display: none; } .d-ed-add-text { display: none; } .d-ed-add-text strong { display: none; } .d-ed-add-text span { display: none; } .d-ed-card { display: none; } .d-ed-card-title { display: none; } .d-ed-card-summary { display: none; } .d-ed-switch { display: none; } .d-ed-switch input { display: none; } .d-ed-switch-track { display: none; } .d-ed-switch-track::after { display: none; } .d-ed-switch input:checked + .d-ed-switch-track { display: none; } .d-ed-switch input:checked + .d-ed-switch-track::after { display: none; } .d-ed-switch input:focus-visible + .d-ed-switch-track { display: none; } .d-ed-switch-label { display: none; } .d-ed-actions { display: none; } button.d-ed-save, button.d-ed-save-preview, button.d-ed-primary { display: none; } button.d-ed-save-preview { display: none; } .d-ed-primary { display: none; } .d-ed-status { display: none; } .d-ed-css-result { display: none; } .d-ed-css-ok { display: none; } .d-ed-css-bad { display: none; } .d-ed-css-wait { display: none; } .d-ed-font-sample { display: none; } .d-ed-problems { display: none; } .d-ed-problems-title { display: none; } .d-ed-problems ul { display: none; } .d-ed-delete { display: none; } button.d-ed-danger { display: none; } .d-ed-danger-zone { display: none; } .d-ed-blocks-out { display: none; } } /* ---- 5. DESKTOP (48em and wider) --------------------------------------- */ @media (min-width: 48em) { html { font-size: 100%; scroll-padding-block-start: calc(var(--space-xl) * 2); overflow-x: visible; } body { margin: 0; font: var(--step-base)/1.6 var(--font-body); background: var(--bg); color: var(--text); padding-block-end: 0; -webkit-tap-highlight-color: transparent; overflow-x: visible; overflow-wrap: break-word; } .wrap { max-inline-size: calc(var(--content-max) + var(--space-l) * 2); margin-inline: auto; padding-inline: var(--space-l); } .skip-link { position: absolute; inset-inline-start: var(--space-l); inset-block-start: calc(var(--space-xl) * -2); padding: var(--space-s) var(--space); background: var(--accent); color: var(--accent-text); border-radius: var(--radius-pill); z-index: 100; } .skip-link:focus { inset-block-start: var(--space); } .visually-hidden { position: absolute; inline-size: var(--line); block-size: var(--line); overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .icon { inline-size: var(--icon); block-size: var(--icon); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; } /* floating glass bar */ header.site-header { position: sticky; inset-block-start: var(--space-s); z-index: 40; padding-inline: var(--space-l); view-transition-name: site-header; } .bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-l); max-inline-size: var(--content-max); margin: var(--space-s) auto 0; padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-s); border-radius: var(--radius-pill); } .brand { display: flex; align-items: center; gap: var(--space-s); min-inline-size: 0; color: var(--text); text-decoration: none; } .brand-mark { display: grid; place-items: center; min-inline-size: var(--tap); block-size: var(--tap); padding-inline: var(--space-s); border-radius: var(--radius-pill); background: var(--mark-bg); color: var(--bg); font: 800 var(--step-small)/1 var(--font-display); letter-spacing: 0.06em; } .brand-name { min-inline-size: 0; overflow: hidden; font: 600 var(--step-base)/1.2 var(--font-display); white-space: nowrap; text-overflow: ellipsis; } .desk-nav { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2xs); } .desk-link { display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; min-block-size: var(--tap); padding-inline: var(--space); border-radius: var(--radius-pill); color: var(--text); font-weight: 500; text-decoration: none; transition: background var(--dur-fast); } .desk-link:hover { background: var(--glass-selected); } .desk-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink); } .desk-group[data-active="true"] { background: var(--accent-soft); color: var(--accent-ink); } .desk-group .icon-chevron { inline-size: 1em; block-size: 1em; transition: transform var(--dur) var(--ease-spring); } .desk-cta { margin-inline-start: var(--space-xs); background: var(--accent); color: var(--accent-text); font-weight: 600; } .burger { display: none; } .desk-icon { display: grid; place-items: center; inline-size: var(--tap); block-size: var(--tap); border-radius: 50%; color: var(--text); transition: background var(--dur-fast); } .desk-icon:hover { background: var(--glass-selected); } /* mega panel for groups (native popover: light dismiss, Esc) */ .mega { position: fixed; inset: calc(var(--tap) + var(--space-xl)) 0 auto; margin: 0 auto; inline-size: min(60rem, calc(100% - var(--space-l) * 2)); padding: var(--space-m); border-radius: var(--radius-xl); color: var(--text); opacity: 0; transform: translateY(calc(var(--space-s) * -1)) scale(0.98); transform-origin: top center; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring), display var(--dur) allow-discrete, overlay var(--dur) allow-discrete; } .mega:popover-open { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-l); opacity: 1; transform: none; } .mega-head { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space-s); } .mega-title { margin: 0; font: 700 var(--step-2)/1.15 var(--font-display); } .mega-description { margin: 0; color: var(--text-2); } .mega-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xs); margin: 0; padding: 0; list-style: none; } .mega-item { display: grid; grid-template-columns: var(--tile) 1fr; align-items: start; gap: var(--space); padding: var(--space); border-radius: var(--radius-l); color: var(--text); text-decoration: none; transition: background var(--dur-fast); } .mega-item:hover { background: var(--glass-selected); } .mega-item[aria-current="page"] { background: var(--accent-soft); } .tile-icon { display: grid; place-items: center; inline-size: var(--tile); block-size: var(--tile); border-radius: var(--radius-s); background: var(--tint, var(--accent)); color: var(--on-image); box-shadow: inset 0 var(--line) 0 var(--tile-highlight); } .tile-text { display: grid; gap: var(--space-2xs); } .tile-text strong { font-weight: 600; font-size: var(--step-base); } .tile-text span { color: var(--text-2); font-size: var(--step-small); line-height: 1.4; } .staff-bar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space); max-inline-size: var(--content-max); margin: var(--space-s) auto 0; padding-inline: var(--space-l); font-size: var(--step-small); } .staff-bar form { display: inline; } main { padding-block: var(--space-l) var(--space-xl); } section { margin-block-end: var(--space-xl); } article { margin: 0; } aside { margin: 0; } footer.site-footer { margin-block-start: var(--space-xl); padding: var(--space-xl) var(--space-l) var(--space-l); background: var(--surface); border-block-start: var(--line) solid var(--border); color: var(--text-2); font-size: var(--step-small); } footer.site-footer p { margin: 0; } h1 { font: 700 var(--step-4)/1.08 var(--font-display); letter-spacing: -0.02em; margin: 0 0 var(--space); } h2 { font: 700 var(--step-3)/1.12 var(--font-display); letter-spacing: -0.015em; margin: 0 0 var(--space); } h3 { font: 600 var(--step-1)/1.3 var(--font-display); margin: 0 0 var(--space-s); } p { margin: 0 0 var(--space); max-inline-size: var(--measure); } a { color: var(--accent-ink); } ul, ol { padding-inline-start: var(--space-m); margin: 0 0 var(--space); } li { margin-block-end: var(--space-xs); } code { font-family: var(--font-mono); font-size: 0.9em; } pre { max-inline-size: 100%; overflow-x: auto; } img, video, iframe, svg { max-inline-size: 100%; } form { display: grid; gap: var(--space-xs); } label { font-weight: 600; margin-block-start: var(--space); } input:not([type="checkbox"]):not([type="radio"]) { inline-size: 100%; padding: calc(var(--space-s) * 1.3) var(--space); font: inherit; color: inherit; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius); } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } .button, button[type="submit"] { display: inline-flex; align-items: center; gap: var(--space-s); justify-self: start; min-block-size: var(--tap); margin-block-start: var(--space); padding-inline: var(--space-m); font-weight: 600; color: var(--accent-text); background: var(--accent); border-radius: var(--radius-pill); text-decoration: none; } .button:hover, button[type="submit"]:hover { filter: brightness(1.08); } button.link { min-block-size: 0; margin: 0; padding: 0; color: var(--accent-ink); background: none; font-weight: 400; text-decoration: underline; } table { inline-size: 100%; max-inline-size: none; table-layout: auto; border-collapse: collapse; font-size: var(--step-small); } th, td { text-align: start; padding: var(--space-s) calc(var(--space-s) * 1.2); border-block-end: var(--line) solid var(--border); white-space: normal; overflow-wrap: normal; } .card { background: var(--surface); border-radius: var(--radius-xl); padding: var(--space-l); margin-block-end: var(--space-m); box-shadow: var(--card-shadow); } .narrow { max-inline-size: var(--narrow-max); margin-inline: auto; } .notice { padding: var(--space-s) var(--space); border-radius: var(--radius); } .muted { color: var(--text-2); font-size: var(--step-small); } .steps li { margin-block-end: var(--space-s); } code.secret { display: block; margin-block: var(--space-s); padding: var(--space-s) var(--space); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius); font-size: var(--step-1); letter-spacing: 0.05em; overflow-wrap: anywhere; user-select: all; } code.secret.small { font-size: var(--step-small); letter-spacing: 0; } /* slider: wide rounded stage, glass caption card inside, glass controls */ .slider { position: relative; isolation: isolate; margin-block: 0 var(--space-xl); border-radius: var(--radius-xl); overflow: hidden; background: var(--surface); box-shadow: var(--glass-shadow); } .slider-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; } .slider-track::-webkit-scrollbar { display: none; } .slide { position: relative; display: grid; grid-template-areas: "stack"; aspect-ratio: var(--slide-ratio-desktop); min-block-size: var(--slide-min-desktop); scroll-snap-align: start; overflow: hidden; } .slide-media { grid-area: stack; overflow: hidden; } .slide-image { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; } .slide-caption { grid-area: stack; align-self: end; justify-self: start; max-inline-size: min(36rem, calc(100% - var(--slider-controls-reserve))); margin: var(--space-l); padding: var(--space-l) var(--space-l) var(--space-m); border-radius: var(--radius-xl); color: var(--on-image); } .slide-eyebrow { margin: 0 0 var(--space-s); font-size: var(--step-small); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; } .slide-heading { font: 700 var(--step-3)/1.1 var(--font-display); letter-spacing: -0.015em; margin: 0 0 var(--space-s); color: var(--on-image); } .slide-text { margin: 0 0 var(--space); font-size: var(--step-base); line-height: 1.5; display: block; max-inline-size: 32rem; } .slide-button { justify-self: start; min-block-size: var(--tap); margin-block-start: var(--space-xs); padding-inline: var(--space-m); background: var(--accent); color: var(--accent-text); } .slide-button .icon { inline-size: 1em; block-size: 1em; transition: transform var(--dur) var(--ease-spring); } .slider-controls { position: absolute; inset-block-end: var(--space-l); inset-inline-end: var(--space-l); z-index: 2; display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-xs); border-radius: var(--radius-pill); } .slider-dots { display: flex; align-items: center; gap: var(--space-s); padding-inline: var(--space-xs); } .slider-dot { position: relative; inline-size: var(--dot); block-size: var(--dot); border-radius: var(--radius-pill); background: var(--dot-bg); overflow: hidden; transition: inline-size var(--dur) var(--ease-spring); } .slider-dot[aria-current="true"] { inline-size: calc(var(--dot-active) * 1.25); } .slider-dot-fill { position: absolute; inset: 0; background: var(--text); border-radius: inherit; transform: scaleX(0); transform-origin: left center; } .slider-dot.is-active .slider-dot-fill { transform: scaleX(1); } .slider.is-paused .slider-dot-fill { animation-play-state: paused; } .slider-prev, .slider-next, .slider-pause { display: grid; place-items: center; inline-size: var(--tap); block-size: var(--tap); border-radius: 50%; color: var(--text); transition: background var(--dur-fast); } .icon-prev { transform: rotate(90deg); } .icon-next { transform: rotate(-90deg); } .slider-prev { display: grid; } .slider-next { display: grid; } .pause-bars { inline-size: 0.625rem; block-size: 0.75rem; border-inline: 0.1875rem solid currentColor; } .slider-pause.is-play .pause-bars { inline-size: 0; block-size: 0; border-block: 0.375rem solid transparent; border-inline-start: 0.625rem solid currentColor; border-inline-end: 0; margin-inline-start: 0.1875rem; } /* content */ .intro { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-xl); align-items: start; margin-block-end: var(--space-xl); } .prose { max-inline-size: var(--prose-max); } .prose h2 { font-size: var(--step-2); margin-block: var(--space-l) var(--space-s); } .prose h3 { font-size: var(--step-1); margin-block: var(--space-m) var(--space-s); } .prose li { margin-block-end: var(--space-s); } .prose h4 { font-size: var(--step-base); margin-block: var(--space-m) var(--space-xs); } .intro-title { font: 700 var(--step-3)/1.12 var(--font-display); letter-spacing: -0.015em; margin: 0; } .intro-head { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-m); } .intro-logo { display: grid; place-items: center; inline-size: var(--logo-size-d); aspect-ratio: 1; padding: var(--space-s); border-radius: var(--radius-xl); background: var(--logo-plate); box-shadow: var(--card-shadow); } .intro-logo-img { display: block; inline-size: 100%; block-size: auto; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); gap: var(--space-m); } .feature-card { display: grid; grid-template-rows: auto 1fr; background: var(--surface); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--card-shadow); transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur); } .feature-image { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .feature-body { padding: var(--space-m); } .feature-body h3, .card-title { font-size: var(--step-1); margin: 0 0 var(--space-s); } .feature-body h3 a, .card-title a { color: var(--text); text-decoration: none; } .more { display: inline-flex; align-items: center; gap: var(--space-xs); margin-block-start: var(--space-s); color: var(--text); font-size: var(--step-small); font-weight: 600; text-decoration: underline; text-decoration-color: var(--border); text-decoration-thickness: var(--line); text-underline-offset: 0.3em; } .feature-card.is-linked { position: relative; cursor: pointer; } .card-link { color: inherit; text-decoration: none; } .card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .card-link:focus-visible { outline: none; } .feature-card.is-linked:has(.card-link:focus-visible) { outline: var(--focus-ring) solid var(--focus-color); outline-offset: var(--space-2xs); } .more .icon, .more-link .icon { inline-size: 1em; block-size: 1em; transition: transform var(--dur) var(--ease-spring); } .more-link { display: inline-flex; align-items: center; gap: var(--space-xs); min-block-size: var(--tap); color: var(--accent-ink); font-weight: 600; text-decoration: none; } .text-section { max-inline-size: var(--prose-max); margin-block-end: var(--space-xl); } .cta { margin-block-end: var(--space-xl); } .latest { margin-block-start: var(--space-xl); } /* the island and sheet are the mobile navigation: not rendered on desktop */ .island { display: none; view-transition-name: island; } .island-tabs { display: none; } .island-tabs li { display: none; } .island-tab { display: none; } .island-tab .icon { display: none; } .island-tab[aria-current="page"] { display: none; } .island-label { display: none; } .island-menu { display: none; } .island.is-compact .island-tabs { display: none; } .island.is-compact .island-label { display: none; } .island.is-compact .island-tab { display: none; } .island.is-compact .island-menu { display: none; } .sheet { display: none; } .sheet[open] { display: none; } .sheet.is-dragging { display: none; } .sheet:focus { outline: none; } .sheet::backdrop { display: none; } .sheet[open]::backdrop { display: none; } .sheet-grabber { display: none; } .sheet-handle { display: none; } .sheet-head { display: none; } .sheet-title { display: none; } .sheet-close { display: none; } .sheet-body { display: none; } .sheet-group { display: none; } .sheet-group-title { display: none; } .sheet-list { display: none; } .sheet-list li + li { display: none; } .sheet-item { display: none; } button.sheet-item { display: none; } .sheet-item:active { display: none; } .sheet-item[aria-current="page"] { display: none; } .sheet-item.is-cta .tile-icon { display: none; } .icon-go { display: none; } /* ---- consent switch (real checkbox on top, drawn track + knob underneath) ---- */ .d-switch { position: relative; display: inline-grid; flex: none; inline-size: var(--switch-w); block-size: var(--switch-h); } .d-switch-input { appearance: none; position: absolute; inset: 0; z-index: 1; inline-size: 100%; block-size: 100%; min-block-size: 0; margin: 0; padding: 0; border: 0; border-radius: var(--radius-pill); background: none; opacity: 0; cursor: pointer; } .d-switch-track { display: block; inline-size: 100%; block-size: 100%; border-radius: var(--radius-pill); background: var(--switch-off); box-shadow: inset 0 0 0 var(--line) var(--separator); transition: background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out); } .d-switch-knob { position: absolute; inset-block-start: calc((var(--switch-h) - var(--knob-size)) / 2); inset-inline-start: calc((var(--switch-h) - var(--knob-size)) / 2); inline-size: var(--knob-size); block-size: var(--knob-size); border-radius: 50%; background: var(--knob); box-shadow: var(--knob-shadow); transition: transform var(--dur) var(--ease-spring); } .d-switch-input:checked + .d-switch-track { background: var(--switch-on); box-shadow: none; } .d-switch-input:checked + .d-switch-track .d-switch-knob { transform: translateX(calc(var(--switch-w) - var(--switch-h))); } .d-switch-input:focus-visible + .d-switch-track { outline: var(--focus-ring) solid var(--focus-color); outline-offset: var(--space-2xs); } .d-switch-input:active + .d-switch-track .d-switch-knob { inline-size: calc(var(--knob-size) * 1.2); } .m-switch { display: none; } .m-switch-input { display: none; } .m-switch-track { display: none; } .m-switch-knob { display: none; } .m-switch-input:checked + .m-switch-track { display: none; } .m-switch-input:checked + .m-switch-track .m-switch-knob { display: none; } .m-switch-input:focus-visible + .m-switch-track { display: none; } .m-switch-input:active + .m-switch-track .m-switch-knob { display: none; } /* ---- consent + display preferences ---- */ .d-cookie-fab { position: fixed; z-index: 45; inset-inline-start: var(--space-l); inset-block-end: var(--space-l); display: inline-flex; align-items: center; gap: 0; min-block-size: var(--tap); padding-inline: calc((var(--tap) - var(--icon)) / 2); border-radius: var(--radius-pill); color: var(--text); font-weight: 600; font-size: var(--step-small); transition: gap var(--dur) var(--ease-spring), opacity var(--dur-fast); } .d-cookie-fab .icon { inline-size: var(--icon); block-size: var(--icon); } .d-cookie-fab-label { max-inline-size: 0; overflow: hidden; white-space: nowrap; transition: max-inline-size var(--dur) var(--ease-spring); } .d-cookie-fab:hover, .d-cookie-fab:focus-visible { gap: var(--space-s); } .d-cookie-fab:hover .d-cookie-fab-label, .d-cookie-fab:focus-visible .d-cookie-fab-label { max-inline-size: 16rem; } html.consent-open .d-cookie-fab { opacity: 0; pointer-events: none; } .d-consent { position: fixed; z-index: 60; inset: auto auto var(--space-l) var(--space-l); display: none; margin: 0; inline-size: var(--consent-w); max-inline-size: calc(100% - var(--space-l) * 2); max-block-size: calc(100% - var(--space-xl) * 2); padding: 0; border: var(--line) solid var(--glass-rim); border-radius: var(--radius-xl); background: var(--glass-bg-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-shadow), var(--glass-sheen); color: var(--text); overflow: hidden; opacity: 0; transform: translateY(var(--space)) scale(0.98); transform-origin: bottom left; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring), inline-size var(--dur) var(--ease-spring), display var(--dur) allow-discrete, overlay var(--dur) allow-discrete; } .d-consent[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; opacity: 1; transform: none; } .d-consent[data-current-view="settings"] { inline-size: var(--consent-wide); } .d-consent:focus { outline: none; } .d-consent::backdrop { background: transparent; transition: background var(--dur) var(--ease-out), display var(--dur) allow-discrete, overlay var(--dur) allow-discrete; } .d-consent[open]::backdrop { background: var(--backdrop); } .d-consent-intro { display: grid; gap: var(--space-s); padding: var(--space-m); } .d-consent-head { display: flex; align-items: center; gap: var(--space-s); } .d-consent-badge { display: grid; place-items: center; inline-size: calc(var(--tile) * 1.15); block-size: calc(var(--tile) * 1.15); border-radius: var(--radius-s); background: var(--tint, var(--accent)); color: var(--on-image); box-shadow: inset 0 var(--line) 0 var(--tile-highlight); } .d-consent-badge .icon { inline-size: calc(var(--icon) * 1.1); block-size: calc(var(--icon) * 1.1); } .d-consent-title { margin: 0; font: 700 var(--step-1)/1.2 var(--font-display); } .d-consent-text { margin: 0; max-inline-size: none; color: var(--text-2); font-size: var(--step-small); line-height: 1.5; } .d-consent-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); margin-block-start: var(--space-xs); } .d-consent-choice { min-block-size: var(--tap); padding-inline: var(--space); border-radius: var(--radius-pill); background: var(--text); color: var(--bg); font-weight: 600; transition: filter var(--dur-fast); } .d-consent-choice:hover { filter: brightness(1.15); } .d-consent-more { display: inline-flex; align-items: center; gap: var(--space-xs); justify-self: start; min-block-size: var(--control); color: var(--accent-ink); font-weight: 600; } .d-consent-more .icon { inline-size: 1em; block-size: 1em; } .d-consent-settings { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-block-size: 0; } .d-consent-bar { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: var(--space); padding: var(--space-m) var(--space-m) var(--space-s); } .d-consent-bar-title { margin: 0 0 var(--space-xs); font: 700 var(--step-2)/1.15 var(--font-display); } .d-consent-lead { margin: 0; max-inline-size: 36rem; color: var(--text-2); font-size: var(--step-small); } .d-consent-close { display: grid; place-items: center; inline-size: var(--control); block-size: var(--control); border-radius: 50%; background: var(--fill); color: var(--text-2); } .d-consent-columns { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-m); min-block-size: 0; padding: var(--space-s) var(--space-m) var(--space-m); overflow-y: auto; overscroll-behavior: contain; } .d-consent-col { display: grid; align-content: start; gap: var(--space-s); } .d-consent-group { margin: 0; font: 600 var(--step-tiny)/1.2 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); } .d-consent-list { margin: 0; padding: 0; list-style: none; background: var(--surface); border-radius: var(--radius-l); overflow: hidden; } .d-consent-row { display: grid; grid-template-columns: var(--tile-s) minmax(0, 1fr) auto; align-items: center; gap: var(--space-s); padding: calc(var(--space-s) * 1.25) var(--space-s) calc(var(--space-s) * 1.25) calc(var(--space) * 0.75); } .d-consent-row + .d-consent-row { border-block-start: var(--line) solid var(--separator); } .d-consent-tile { display: grid; place-items: center; inline-size: var(--tile-s); block-size: var(--tile-s); border-radius: var(--radius-s); background: var(--tint, var(--accent)); color: var(--on-image); } .d-consent-row-text { display: grid; gap: var(--space-2xs); margin: 0; font-weight: 400; cursor: pointer; } .d-consent-row-text strong { font-weight: 600; font-size: var(--step-small); line-height: 1.25; } .d-consent-row-text span { font-weight: 400; color: var(--text-2); font-size: var(--step-caption); line-height: 1.3; } .d-consent-locked { padding: var(--space-2xs) var(--space-s); border-radius: var(--radius-pill); background: var(--fill); color: var(--text-2); font-size: var(--step-tiny); font-weight: 600; white-space: nowrap; } .d-segment-field { display: grid; gap: calc(var(--space-xs) * 1.5); min-inline-size: 0; margin: 0; padding: 0; border: 0; } .d-segment-legend { float: none; inline-size: auto; margin: 0; padding: 0; color: var(--text); font-size: var(--step-small); font-weight: 600; line-height: 1.2; } .d-segment { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--segment-pad); padding: var(--segment-pad); border-radius: var(--radius-s); background: var(--fill); } .d-segment-option { position: relative; display: grid; min-inline-size: 0; margin: 0; font-weight: inherit; } .d-segment-option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } .d-segment-face { display: flex; align-items: center; justify-content: center; gap: var(--space-xs); min-block-size: var(--segment-h); padding-inline: var(--space-xs); border-radius: calc(var(--radius-s) - var(--segment-pad)); color: var(--text-2); font-size: var(--step-caption); font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; transition: background var(--dur-fast), color var(--dur-fast); } .d-segment-face .icon { inline-size: 1em; block-size: 1em; } .d-segment-option input:checked + .d-segment-face { background: var(--surface); color: var(--text); box-shadow: var(--card-shadow); } .d-segment-option input:focus-visible + .d-segment-face { outline: var(--focus-ring) solid var(--focus-color); outline-offset: var(--space-2xs); } .d-segment-option:hover .d-segment-face { color: var(--text); } .d-consent-note { margin: 0; color: var(--text-2); font-size: calc(var(--step-small) * 0.92); } .d-consent-reset { justify-self: start; color: var(--accent-ink); font-weight: 600; } .d-consent-details { background: var(--surface); border-radius: var(--radius-l); overflow: hidden; } .d-consent-summary { display: flex; align-items: center; justify-content: space-between; min-block-size: var(--tap); padding: var(--space-s) var(--space); font-weight: 600; list-style: none; cursor: pointer; } .d-consent-summary::-webkit-details-marker { display: none; } .d-icon-disclose { transition: transform var(--dur) var(--ease-spring); } .d-consent-details[open] .d-icon-disclose { transform: rotate(180deg); } .d-cookie-table { inline-size: 100%; border-collapse: collapse; font-size: calc(var(--step-small) * 0.92); } .d-cookie-table th, .d-cookie-table td { padding: var(--space-xs) var(--space); text-align: start; vertical-align: top; white-space: normal; border-block-start: var(--line) solid var(--separator); } .d-cookie-table thead th { color: var(--text-2); font-size: var(--step-tiny); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .d-cookie-tag { display: inline-block; margin-inline-start: var(--space-xs); padding: 0 var(--space-s); border-radius: var(--radius-pill); background: var(--fill); font-size: var(--step-tiny); font-weight: 600; } .d-consent-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space); padding: var(--space-s) var(--space-m) var(--space-m); border-block-start: var(--line) solid var(--separator); } .d-consent-back { display: inline-flex; align-items: center; gap: var(--space-2xs); min-block-size: var(--tap); color: var(--accent-ink); font-weight: 500; } .d-icon-back { transform: rotate(90deg); } .d-consent-save { margin: 0; } .d-consent-status { margin: 0; padding: 0 var(--space-m) var(--space-s); color: var(--ok); font-size: var(--step-small); font-weight: 600; } .d-consent-status:empty { display: none; } .m-cookie-fab { display: none; } .m-cookie-fab .icon { display: none; } html.consent-open .m-cookie-fab { display: none; } .m-consent { display: none; } .m-consent[open] { display: none; } .m-consent:focus { display: none; } .m-consent.is-dragging { display: none; } .m-consent::backdrop { display: none; } .m-consent[open]::backdrop { display: none; } .m-consent-grabber { display: none; } .m-consent-handle { display: none; } .m-consent-intro { display: none; } .m-consent-badge { display: none; } .m-consent-badge .icon { display: none; } .m-consent-title { display: none; } .m-consent-text { display: none; } .m-consent-actions { display: none; } .m-consent-choice { display: none; } .m-consent-more { display: none; } .m-consent-more .icon { display: none; } .m-consent-settings { display: none; } .m-consent-bar { display: none; } .m-consent-back { display: none; } .m-icon-back { display: none; } .m-consent-bar-title { display: none; } .m-consent-close { display: none; } .m-consent-scroll { display: none; } .m-consent-lead { display: none; } .m-consent-group { display: none; } .m-consent-list { display: none; } .m-consent-row { display: none; } .m-consent-row + .m-consent-row { display: none; } .m-consent-tile { display: none; } .m-consent-row-text { display: none; } .m-consent-row-text strong { display: none; } .m-consent-row-text span { display: none; } .m-consent-locked { display: none; } .m-display { display: none; } .m-segment-field { display: none; } .m-segment-legend { display: none; } .m-segment { display: none; } .m-segment-option { display: none; } .m-segment-option input { display: none; } .m-segment-face { display: none; } .m-segment-face .icon { display: none; } .m-segment-option input:checked + .m-segment-face { display: none; } .m-segment-option input:focus-visible + .m-segment-face { display: none; } .m-consent-note { display: none; } .m-consent-reset { display: none; } .m-consent-details { display: none; } .m-consent-summary { display: none; } .m-consent-summary::-webkit-details-marker { display: none; } .m-icon-disclose { display: none; } .m-consent-details[open] .m-icon-disclose { display: none; } .m-cookie-list { display: none; } .m-cookie-item { display: none; } .m-cookie-item dt { display: none; } .m-cookie-item dd { display: none; } .m-cookie-tag { display: none; } .m-cookie-duration { display: none; } .m-consent-footer { display: none; } .m-consent-save { display: none; } .m-consent-status { display: none; } .m-consent-status:empty { display: none; } /* ---- footer ---- */ .d-footer { display: grid; gap: var(--space-l); max-inline-size: var(--content-max); margin-inline: auto; padding-block-end: calc(var(--tap) + var(--space-l)); } .d-footer-grid { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: var(--space-l); } .d-footer-brand { display: grid; align-content: start; gap: var(--space-s); } .d-footer-home { display: inline-flex; align-items: center; gap: var(--space-s); color: var(--text); text-decoration: none; } .d-footer-mark { display: grid; place-items: center; min-inline-size: var(--tap); block-size: var(--tap); padding-inline: var(--space-s); border-radius: var(--radius-pill); background: var(--text); color: var(--bg); font: 800 var(--step-small)/1 var(--font-display); letter-spacing: 0.06em; } .d-footer-name { font: 600 var(--step-1)/1.2 var(--font-display); } .d-footer-tagline { max-inline-size: 22rem; color: var(--text-2); } .d-footer-col { display: grid; align-content: start; gap: var(--space-s); } .d-footer-title { margin: 0; font: 600 var(--step-tiny)/1.2 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); } .d-footer-links { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; } .d-footer-links li { margin: 0; } .d-footer-link { display: inline-flex; align-items: center; min-block-size: calc(var(--tap) * 0.8); color: var(--text); font-size: var(--step-small); text-decoration: none; transition: color var(--dur-fast); } .d-footer-link:hover { color: var(--accent-ink); } .d-footer-link[aria-current="page"] { color: var(--accent-ink); font-weight: 600; } .d-footer-legal { display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: var(--space-m); padding-block-start: var(--space-m); border-block-start: var(--line) solid var(--separator); font-size: var(--step-caption); } .d-footer-copy { color: var(--text-2); } .d-footer-privacy { display: inline-flex; align-items: center; gap: var(--space-xs); min-block-size: var(--control); padding-inline: var(--space-s); border-radius: var(--radius-pill); background: var(--fill); color: var(--text); font-weight: 500; } .d-footer-privacy .icon { inline-size: 1.1em; block-size: 1.1em; } .d-footer-top { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--text-2); text-decoration: none; } .d-icon-up { inline-size: 1em; block-size: 1em; transform: rotate(180deg); } .d-footer-credit { color: var(--text-2); } .d-footer-credit-link { color: var(--text); font-weight: 600; } .m-footer { display: none; } .m-footer-cta { display: none; } .m-footer-cta-title { display: none; } .m-footer-cta-text { display: none; } .m-footer-direct { display: none; } .m-footer-direct .icon { display: none; } .m-footer-cta-button { display: none; } .m-footer-cta-button .icon { display: none; } .m-footer-brand { display: none; } .m-footer-logo { display: none; } .m-footer-logo-img { display: none; } .m-footer-mark { display: none; } .m-footer-brand-text { display: none; } .m-footer-name { display: none; } .m-footer-tagline { display: none; } .m-footer-groups { display: none; } .m-footer-acc + .m-footer-acc { display: none; } .m-footer-summary { display: none; } .m-footer-summary::-webkit-details-marker { display: none; } .m-footer-summary:focus-visible { display: none; } .m-footer-title { display: none; } .m-footer-count { display: none; } .m-footer-chevron { display: none; } .m-footer-acc[open] .m-footer-summary { display: none; } .m-footer-acc[open] .m-footer-chevron { display: none; } .m-footer-acc[open] .m-footer-panel { display: none; } .m-footer-panel { display: none; } .m-footer-list { display: none; } .m-footer-list li { display: none; } .m-footer-list li + li { display: none; } .m-footer-link { display: none; } .m-footer-link .tile-icon { display: none; } .m-footer-link-label { display: none; } .m-footer-go { display: none; } .m-footer-link[aria-current="page"] { display: none; } .m-footer-legal { display: none; } .m-footer-privacy { display: none; } .m-footer-privacy .icon { display: none; } .m-footer-copy { display: none; } .m-footer-credit { display: none; } .m-footer-credit-link { display: none; } /* ---- tables: desktop = semantic table ---- */ .data-table { margin-block: var(--space-m) var(--space-l); } .d-table-wrap { max-inline-size: 100%; overflow: clip; background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--card-shadow); } .d-table { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--step-small); } .d-table th, .d-table td { padding: calc(var(--space) * 0.75) var(--space); text-align: start; vertical-align: top; border-block-end: var(--line) solid var(--separator); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; } .d-table thead th { position: sticky; inset-block-start: calc(var(--space-s) * 2 + var(--tap) + var(--space-xs) * 2); z-index: 1; background: var(--surface); color: var(--text-2); font-size: var(--step-tiny); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; } .d-table tbody th { font-weight: 600; } .d-table tbody tr:last-child th, .d-table tbody tr:last-child td { border-block-end: 0; } .d-spec-table th[scope="row"] { inline-size: 34%; color: var(--text-2); font-weight: 600; } .m-records { display: none; } .m-records > .m-record { display: none; } .m-record-title { display: none; } .m-record-fields { display: none; } .m-record-field { display: none; } .m-record-field dt { display: none; } .m-record-field dd { display: none; } .m-spec { display: none; } .m-spec-row { display: none; } .m-spec-row + .m-spec-row { display: none; } .m-spec-row dt { display: none; } .m-spec-row dd { display: none; } /* ---- features (bento on desktop, grouped list on mobile) ---- */ .features { margin-block: var(--space-xl); } .features-eyebrow { margin: 0 0 var(--space-s); color: var(--accent-ink); font-size: var(--step-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .features-title { max-inline-size: 36rem; margin: 0 0 var(--space-l); font: 700 var(--step-3)/1.12 var(--font-display); letter-spacing: -0.015em; } .d-features { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-m); margin: 0; padding: 0; list-style: none; } .d-feature { position: relative; grid-column: span 2; display: grid; align-content: start; gap: var(--space-s); margin: 0; padding: var(--space-l); border-radius: var(--radius-xl); background: linear-gradient(145deg, color-mix(in srgb, var(--tint) 10%, var(--surface)) 0%, var(--surface) 60%); box-shadow: var(--card-shadow); overflow: hidden; transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur); } .d-feature:nth-child(-n + 2) { grid-column: span 3; } .d-feature-num { position: absolute; inset-block-start: var(--space-m); inset-inline-end: var(--space-m); color: color-mix(in srgb, var(--tint) 35%, transparent); font: 800 var(--step-3)/1 var(--font-display); letter-spacing: -0.02em; } .d-feature-tile { display: grid; place-items: center; inline-size: calc(var(--tile) * 1.3); block-size: calc(var(--tile) * 1.3); margin-block-end: var(--space-xs); border-radius: var(--radius); background: var(--tint, var(--accent)); color: var(--on-image); box-shadow: inset 0 var(--line) 0 var(--tile-highlight), 0 var(--space-xs) var(--space) color-mix(in srgb, var(--tint) 30%, transparent); } .d-feature-tile .icon { inline-size: calc(var(--icon) * 1.2); block-size: calc(var(--icon) * 1.2); } .d-feature-title { margin: 0; font: 700 var(--step-1)/1.25 var(--font-display); } .d-feature-text { margin: 0; max-inline-size: 30rem; color: var(--text-2); line-height: 1.55; } .m-features { display: none; } .m-feature { display: none; } .m-feature + .m-feature { display: none; } .m-feature-tile { display: none; } .m-feature-body { display: none; } .m-feature-title { display: none; } .m-feature-text { display: none; } /* ---- tables (audit fixes: spans, captions, feeds) ---- */ .d-table-caption { padding: var(--space) var(--space) 0; caption-side: top; text-align: start; color: var(--text-2); font-size: var(--step-small); font-weight: 600; } .m-record-value dt { display: none; } .m-record-value dd { display: none; } .m-record-values { display: none; } .m-record-values li { display: none; } .m-table-caption { display: none; } .m-feed { display: none; } .m-feed-day { display: none; } .m-feed-list { display: none; } .m-feed-item { display: none; } .m-feed-head { display: none; } .m-feed-title { display: none; } .m-feed-time { display: none; } .m-feed-meta { display: none; } .m-feed-field { display: none; } .m-feed-field + .m-feed-field::before { display: none; } .m-feed-more { display: none; } .m-feed-summary { display: none; } /* ---- 404 page and breadcrumbs ---- */ .notfound { margin-block: var(--space-l) var(--space-xl); } .m-crumbs { display: none; } .m-crumbs-back { display: none; } .m-crumbs-icon { display: none; } .m-crumbs-label { display: none; } .d-crumbs { margin-block-end: var(--space); } .d-crumbs-list { display: flex; align-items: center; gap: var(--space-xs); min-inline-size: 0; margin: 0; padding: 0; list-style: none; font-size: var(--step-caption); line-height: 1.4; letter-spacing: 0.01em; } .d-crumbs-item { display: inline-flex; flex: none; align-items: center; gap: var(--space-xs); margin: 0; } .d-crumbs-link { color: var(--accent-ink); font-weight: 500; text-decoration: none; text-underline-offset: 0.2em; } .d-crumbs-sep { inline-size: 0.9em; block-size: 0.9em; color: var(--text-2); stroke-width: 2; transform: rotate(-90deg); } .d-crumbs-current { min-inline-size: 0; max-inline-size: 30rem; margin: 0; overflow: hidden; color: var(--text-2); white-space: nowrap; text-overflow: ellipsis; } .d-notfound { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; gap: var(--space-xl); } .d-notfound-main { display: grid; gap: var(--space); } .d-notfound-code { margin: 0; color: var(--text); font: 800 calc(var(--step-4) * 2.4)/0.85 var(--font-display); letter-spacing: -0.05em; } .d-notfound-code::after { content: ""; display: block; inline-size: calc(var(--space-xl) * 1.5); block-size: calc(var(--space-xs) * 1.5); margin-block-start: var(--space-m); border-radius: var(--radius-pill); background: var(--accent); } .d-notfound-title { margin: var(--space-s) 0 0; font: 700 var(--step-3)/1.1 var(--font-display); letter-spacing: -0.015em; } .d-notfound-text { margin: 0; max-inline-size: 34rem; color: var(--text-2); font-size: var(--step-1); line-height: 1.5; } .d-notfound-path { display: inline-grid; justify-self: start; gap: var(--space-2xs); margin: 0; padding: var(--space-s) var(--space); border-radius: var(--radius); background: var(--fill); } .d-notfound-path span { color: var(--text-2); font-size: var(--step-tiny); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .d-notfound-path code { max-inline-size: 34rem; overflow-wrap: anywhere; color: var(--text); } .d-notfound-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space) var(--space-l); margin-block-start: var(--space-xs); } .d-notfound-actions .button { margin: 0; } .d-notfound-actions .button .icon { inline-size: 1em; block-size: 1em; } .d-notfound-secondary { color: var(--accent-ink); font-weight: 600; text-decoration: none; } .d-notfound-next { padding: var(--space-m); border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--card-shadow); } .d-notfound-next-title { margin: 0 0 var(--space-s); font: 600 var(--step-tiny)/1.2 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); } .d-notfound-links { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; } .d-notfound-links li { margin: 0; } .d-notfound-link { display: grid; grid-template-columns: var(--tile) minmax(0, 1fr) auto; align-items: center; gap: var(--space); padding: var(--space-s); border-radius: var(--radius-l); color: var(--text); font-weight: 500; text-decoration: none; transition: background var(--dur-fast); } .icon-go-d { inline-size: 1rem; block-size: 1rem; color: var(--text-2); transition: transform var(--dur) var(--ease-spring); } .m-notfound { display: none; } .m-notfound-code { display: none; } .m-notfound-code::after { display: none; } .m-notfound-title { display: none; } .m-notfound-text { display: none; } .m-notfound-path { display: none; } .m-notfound-path span { display: none; } .m-notfound-path code { display: none; } .m-notfound-home { display: none; } .m-notfound-secondary { display: none; } .m-notfound-next-title { display: none; } .m-notfound-links { display: none; } .m-notfound-links li { display: none; } .m-notfound-links li + li { display: none; } .m-notfound-link { display: none; } .icon-go-m { display: none; } /* ---- contact page (desktop: d-contact) ---- */ .contact-head { max-inline-size: var(--prose-max); margin-block: var(--space-s) var(--space-l); } .contact-eyebrow { margin: 0 0 var(--space-s); color: var(--accent-ink); font-size: var(--step-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .contact-title { margin: 0 0 var(--space-s); font: 700 var(--step-4)/1.1 var(--font-display); letter-spacing: -0.02em; } .contact-lead { margin: 0; color: var(--text-2); font-size: var(--step-1); line-height: 1.45; } .contact-hp { position: absolute; inline-size: var(--line); block-size: var(--line); overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .cta-actions { margin: var(--space-m) 0 0; } .cta-button .icon { inline-size: 1.1em; block-size: 1.1em; } .d-contact { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-l); margin-block-end: var(--space-xl); } .d-contact-card { flex: 2 1 var(--form-main-min); min-inline-size: 0; padding: var(--space-l); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--card-shadow); } .d-section { min-inline-size: 0; padding-block-start: var(--space-m); border-block-start: var(--line) solid var(--separator); } .d-contact-form-title { margin: 0; font: 700 var(--step-2)/1.2 var(--font-display); } .d-contact-note { margin: var(--space-xs) 0 var(--space-m); color: var(--text-2); font-size: var(--step-small); } .d-error-summary { scroll-margin-block-start: var(--contact-sticky); margin-block-end: var(--space-m); padding: var(--space) var(--space-m); color: var(--error); background: var(--error-bg); border: var(--focus-ring) solid var(--error); border-radius: var(--radius-l); } .d-error-summary:focus { outline: var(--focus-ring) solid var(--focus-color); outline-offset: var(--space-2xs); } .d-error-summary-title { margin: 0 0 var(--space-xs); color: var(--error); font: 700 var(--step-1)/1.3 var(--font-display); } .d-error-summary-list { display: grid; gap: var(--space-xs); margin: 0; padding-inline-start: var(--space-m); } .d-error-summary-list a { color: var(--error); font-weight: 600; } .d-contact-form { display: grid; gap: var(--space-m); } .d-topics, .d-group { display: grid; gap: var(--space-s); min-inline-size: 0; margin: 0; padding: 0; border: 0; } .d-legend { padding: 0 0 var(--space-s); font: 600 var(--step-1)/1.3 var(--font-display); } .d-topic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--topic-min)), 1fr)); gap: var(--space-s); } .d-topic { position: relative; display: block; margin: 0; font-weight: 400; } .d-topic-input { position: absolute; inset: 0; z-index: 1; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; } .d-topic-face { position: relative; display: grid; grid-template-columns: var(--tile) minmax(0, 1fr) var(--radio); align-items: start; gap: var(--space-s); block-size: 100%; padding: var(--space); background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius-l); transition: border-color var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast); } .d-topic-text { display: grid; gap: var(--space-2xs); min-inline-size: 0; overflow-wrap: break-word; hyphens: auto; } .d-topic-text span { color: var(--text-2); font-size: var(--step-small); line-height: 1.35; } .d-topic-check { display: grid; place-items: center; inline-size: var(--radio); block-size: var(--radio); color: transparent; border: calc(var(--line) * 2) solid var(--field-border); border-radius: 50%; transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); } .d-topic-check .icon { inline-size: calc(var(--radio) * 0.6); block-size: calc(var(--radio) * 0.6); stroke-width: 3; } .d-topic-input:hover + .d-topic-face { border-color: var(--accent-line); } .d-topic-input:checked + .d-topic-face { background: var(--accent-soft); border-color: var(--accent); box-shadow: 0 0 0 var(--line) var(--accent); } .d-topic-input:checked + .d-topic-face .d-topic-check { color: var(--accent-text); background: var(--accent); border-color: var(--accent); } .d-topic-input:focus-visible + .d-topic-face { outline: var(--focus-ring) solid var(--focus-color); outline-offset: var(--space-2xs); } .d-topics.is-invalid .d-topic-face { border-color: var(--error); } .d-field-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m); } .d-field { scroll-margin-block-start: var(--contact-sticky); display: grid; align-content: start; gap: var(--space-xs); min-inline-size: 0; } .d-field-full { grid-column: 1 / -1; } .d-field-half { max-inline-size: var(--field-max); } .d-field input.d-input[type="tel"] { max-inline-size: var(--field-short); } .d-label { margin: 0; font-weight: 600; } .d-optional { color: var(--text-2); font-weight: 400; } .d-hint { margin: calc(var(--space-2xs) * -1) 0 0; color: var(--text-2); font-size: var(--step-small); line-height: 1.4; } .d-error { margin: 0; color: var(--error); font-size: var(--step-small); font-weight: 600; } .d-field input.d-input { min-block-size: var(--field-h); margin: 0; font-size: var(--step-base); background: var(--field-bg); border-color: var(--field-border); transition: border-color var(--dur-fast); } .d-field textarea.d-textarea { display: block; inline-size: 100%; min-block-size: var(--textarea-h); margin: 0; padding: var(--space-s) var(--space); color: inherit; font: inherit; font-size: var(--step-base); line-height: 1.5; background: var(--field-bg); border: var(--line) solid var(--field-border); border-radius: var(--radius); resize: vertical; } .d-field input.d-input:focus, .d-field textarea.d-textarea:focus { border-color: var(--accent); outline: var(--focus-ring) solid var(--focus-color); outline-offset: 0; } .d-field.is-invalid input.d-input, .d-field.is-invalid textarea.d-textarea { border: calc(var(--line) * 2) solid var(--error); } .d-counter { margin: 0; justify-self: end; color: var(--text-2); font-size: var(--step-small); font-variant-numeric: tabular-nums; } .d-counter.is-over { color: var(--error); font-weight: 600; } .d-privacy { display: grid; grid-template-columns: var(--icon) minmax(0, 1fr); align-items: start; gap: var(--space-s); margin: 0; color: var(--text-2); font-size: var(--step-small); } .d-privacy .icon { color: var(--accent-ink); } .d-submit-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-m); } button.d-submit { min-block-size: var(--field-h); margin: 0; padding-inline: var(--space-l); font-size: var(--step-base); } button.d-submit[aria-busy="true"] { opacity: 0.7; cursor: progress; } .d-submit-note { margin: 0; color: var(--text-2); font-size: var(--step-small); } .d-contact-aside { flex: 1 1 var(--form-side-min); position: sticky; inset-block-start: var(--contact-sticky); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--form-side-min)), 1fr)); align-items: start; gap: var(--space); min-inline-size: 0; } .d-aside-card { padding: var(--space-m); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--card-shadow); } .d-aside-title { margin: 0 0 var(--space); font: 700 var(--step-1)/1.25 var(--font-display); } .d-direct { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; } .d-direct-link { display: grid; grid-template-columns: var(--tile) minmax(0, 1fr); align-items: center; gap: var(--space-s); padding: var(--space-s); color: var(--text); text-decoration: none; border-radius: var(--radius); } .d-direct-link > span:last-child { display: grid; min-inline-size: 0; color: var(--text-2); font-size: var(--step-small); overflow-wrap: anywhere; } .d-direct-link strong { color: var(--text); font-size: var(--step-base); } .d-steps { display: grid; gap: var(--space); margin: 0; padding: 0; list-style: none; } .d-step { display: grid; grid-template-columns: var(--step-dot) minmax(0, 1fr); align-items: start; gap: var(--space-s); color: var(--text-2); line-height: 1.45; } .d-step-number { display: grid; place-items: center; inline-size: var(--step-dot); block-size: var(--step-dot); margin-block-start: var(--space-2xs); color: var(--text); font-size: var(--step-caption); font-weight: 700; border: var(--line) solid var(--field-border); border-radius: 50%; } .d-places { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; } .d-places li { padding: var(--space-xs) var(--space-s); font-size: var(--step-small); background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius-pill); } .contact-sent { display: grid; justify-items: center; gap: var(--space); max-inline-size: var(--consent-wide); margin: var(--space-xl) auto; padding: var(--space-xl) var(--space-l); text-align: center; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--card-shadow); } .contact-sent-badge { display: grid; place-items: center; inline-size: calc(var(--badge) * 1.25); block-size: calc(var(--badge) * 1.25); color: var(--accent-text); background: var(--accent); border-radius: 50%; } .contact-sent-badge .icon { inline-size: calc(var(--badge) * 0.6); block-size: calc(var(--badge) * 0.6); stroke-width: 2.4; } .contact-sent-title { margin: 0; font: 700 var(--step-3)/1.15 var(--font-display); letter-spacing: -0.01em; } .contact-sent-text { max-inline-size: var(--measure); margin: 0; color: var(--text-2); font-size: var(--step-1); line-height: 1.45; } .contact-sent-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-m); } .contact-sent-actions .button { margin: 0; } .contact-sent-link { display: inline-flex; align-items: center; gap: var(--space-xs); min-block-size: var(--tap); color: var(--accent-ink); font-weight: 600; text-decoration: none; } /* mobile contact tree: hidden on desktop */ .m-section { display: none; } button.m-submit { display: none; } button.m-submit[aria-busy="true"] { display: none; } .m-contact { display: none; } .m-direct { display: none; } .m-direct li + li { display: none; } .m-direct-link { display: none; } .m-direct-text { display: none; } .m-direct-text span { display: none; } .m-contact-form-title { display: none; } .m-contact-note { display: none; } .m-error-summary { display: none; } .m-error-summary:focus { display: none; } .m-error-summary-title { display: none; } .m-error-summary-list { display: none; } .m-error-summary-list a { display: none; } .m-contact-form { display: none; } .m-topics { display: none; } .m-group { display: none; } .m-legend { display: none; } .m-topic-list { display: none; } .m-topic { display: none; } .m-topic + .m-topic { display: none; } .m-topic-input { display: none; } .m-topic-face { display: none; } .m-topic-text { display: none; } .m-topic-text span { display: none; } .m-topic-radio { display: none; } .m-topic-radio .icon { display: none; } .m-topic-input:checked + .m-topic-face { display: none; } .m-topic-input:checked + .m-topic-face .m-topic-radio { display: none; } .m-topic-input:focus-visible + .m-topic-face { display: none; } .m-topics.is-invalid .m-topic-list { display: none; } .m-field-list { display: none; } .m-field { display: none; } .m-label { display: none; } .m-optional { display: none; } .m-hint { display: none; } .m-error { display: none; } .m-field input.m-input { display: none; } .m-field textarea.m-textarea { display: none; } .m-field input.m-input:focus { display: none; } .m-field textarea.m-textarea:focus { display: none; } .m-field.is-invalid input.m-input { display: none; } .m-field.is-invalid textarea.m-textarea { display: none; } .m-counter { display: none; } .m-counter.is-over { display: none; } .m-privacy { display: none; } .m-privacy .icon { display: none; } .m-submit-note { display: none; } .m-section-title { display: none; } .m-steps { display: none; } .m-step { display: none; } .m-step-number { display: none; } .m-places { display: none; } .m-places li { display: none; } /* ---- admin area (desktop: d-admin-side, d-overview, d-enq, d-appearance) ---- */ .admin { display: grid; grid-template-columns: var(--admin-rail) minmax(0, 1fr); align-items: start; gap: var(--space-l); margin-block: var(--space) var(--space-xl); } .admin-main { display: grid; gap: var(--space-m); min-inline-size: 0; } .admin-head { display: grid; gap: var(--space-xs); } .admin-title { margin: 0; font: 700 var(--step-4)/1.1 var(--font-display); letter-spacing: -0.02em; } .admin-lead { max-inline-size: var(--prose-max); margin: 0; color: var(--text-2); } .admin-updated { color: var(--text-2); font-size: var(--step-small); } .admin-card { display: grid; align-content: start; gap: var(--space-s); min-inline-size: 0; margin: 0; padding: var(--space-m); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--card-shadow); } .admin-card-title { margin: 0; font: 700 var(--step-1)/1.25 var(--font-display); } .admin-card-hint { margin: 0; color: var(--text-2); font-size: var(--step-small); } .admin-empty { margin: 0; padding: var(--space-m); color: var(--text-2); text-align: center; background: var(--fill); border-radius: var(--radius-l); } .admin-status { display: inline-flex; align-items: center; min-block-size: calc(var(--space) * 1.5); padding-inline: var(--space-s); font-size: var(--step-caption); font-weight: 700; white-space: nowrap; border-radius: var(--radius-pill); } .admin-health { display: grid; gap: var(--space); margin: 0; padding: 0; list-style: none; } .admin-health li { display: grid; grid-template-columns: var(--dot) minmax(0, 1fr); align-items: start; gap: var(--space-s); } .admin-health-text { display: grid; min-inline-size: 0; } .admin-health-text span { color: var(--text-2); font-size: var(--step-small); } .admin-dot { display: block; inline-size: var(--dot); block-size: var(--dot); margin-block-start: calc(var(--space-xs) * 1.5); border-radius: 50%; } .admin-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-m); } .admin-env { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: 0; } button.admin-button { margin: 0; } .d-admin-side { position: sticky; inset-block-start: var(--contact-sticky); padding: var(--space-s); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--card-shadow); } .d-admin-menu { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; } .d-admin-link { display: grid; grid-template-columns: var(--tile) minmax(0, 1fr) auto; align-items: center; gap: var(--space-s); padding: var(--space-s); color: var(--text); text-decoration: none; border-radius: var(--radius-l); transition: background var(--dur-fast); } .d-admin-link:hover { background: var(--fill); } .d-admin-link[aria-current="page"] { background: var(--accent-soft); } .d-admin-link[aria-current="page"] strong { color: var(--accent-ink); } .d-admin-link-text { display: grid; min-inline-size: 0; } .d-admin-link-text span { color: var(--text-2); font-size: var(--step-caption); } .d-admin-badge { min-inline-size: calc(var(--space) * 1.5); padding: var(--space-2xs) var(--space-xs); color: var(--accent-text); font-size: var(--step-caption); font-weight: 700; text-align: center; background: var(--accent); border-radius: var(--radius-pill); } .d-overview { display: grid; gap: var(--space-m); } .d-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space); margin: 0; padding: 0; list-style: none; } .d-kpi-link { display: grid; align-content: start; gap: var(--space-xs); block-size: 100%; padding: var(--space-m); color: var(--text); text-decoration: none; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--card-shadow); transition: transform var(--dur-fast) var(--ease-out); } .d-kpi-link:hover { transform: translateY(calc(var(--space-2xs) * -1)); } .d-kpi-label { color: var(--text-2); font-size: var(--step-small); font-weight: 600; } .d-kpi-value { font: 700 var(--step-4)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .d-kpi-hint { color: var(--text-2); font-size: var(--step-caption); } .d-kpi.is-alert .d-kpi-link { background: var(--accent-soft); box-shadow: 0 0 0 var(--line) var(--accent-line), var(--card-shadow); } .d-kpi.is-alert .d-kpi-value { color: var(--accent-ink); } .d-kpi.is-warn .d-kpi-value { color: var(--error); } .d-overview-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; gap: var(--space-m); } .d-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space); } .d-card-more { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--accent-ink); font-weight: 600; text-decoration: none; } .d-card-more .icon { inline-size: 1em; block-size: 1em; } .d-latest { display: grid; margin: 0; padding: 0; list-style: none; } .d-latest-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) auto; align-items: center; gap: var(--space); padding-block: var(--space-s); } .d-latest-row + .d-latest-row { border-block-start: var(--line) solid var(--separator); } .d-latest-who { display: grid; min-inline-size: 0; } .d-latest-who span { overflow: hidden; color: var(--text-2); font-size: var(--step-small); text-overflow: ellipsis; white-space: nowrap; } .d-latest-topic { color: var(--text-2); font-size: var(--step-small); } .d-latest-time { color: var(--text-2); font-size: var(--step-small); font-variant-numeric: tabular-nums; } .d-enq { display: grid; gap: var(--space); } .d-filters { display: flex; flex-wrap: wrap; justify-self: start; gap: var(--space-2xs); padding: var(--space-2xs); background: var(--fill); border-radius: var(--radius-pill); } .d-filter { display: inline-flex; align-items: center; gap: var(--space-xs); min-block-size: var(--control); padding-inline: var(--space); color: var(--text); font-size: var(--step-small); font-weight: 600; text-decoration: none; border-radius: var(--radius-pill); } .d-filter:hover { background: var(--surface); } .d-filter[aria-current="true"] { background: var(--surface); box-shadow: var(--card-shadow); } .d-filter-count { color: var(--text-2); font-size: var(--step-caption); font-variant-numeric: tabular-nums; } .d-enq-list { display: grid; gap: var(--space-s); margin: 0; padding: 0; list-style: none; } .d-enq-item { display: grid; gap: var(--space-s); padding: var(--space) var(--space-m); background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--card-shadow); } .d-enq-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.3fr) auto; align-items: center; gap: var(--space-m); } .d-enq-ref { display: grid; } .d-enq-ref strong { font: 600 var(--step-small)/1.3 var(--font-mono); } .d-enq-ref span { color: var(--text-2); font-size: var(--step-caption); } .d-enq-who { display: grid; min-inline-size: 0; } .d-enq-who span { color: var(--text-2); font-size: var(--step-small); overflow-wrap: anywhere; } .d-enq-topic { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--step-small); } .d-enq-topic .tile-icon { inline-size: var(--tile-s); block-size: var(--tile-s); } .d-enq-message { background: var(--bg); border-radius: var(--radius); } .d-enq-summary { padding: var(--space-xs) var(--space); color: var(--accent-ink); font-size: var(--step-small); font-weight: 600; cursor: pointer; } .d-enq-text { max-inline-size: var(--prose-max); margin: 0; padding: 0 var(--space) var(--space); line-height: 1.55; } .d-enq-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-s); } .d-enq-reply { display: inline-flex; align-items: center; gap: var(--space-xs); min-block-size: var(--control); padding-inline: var(--space); color: var(--accent-text); font-size: var(--step-small); font-weight: 700; text-decoration: none; background: var(--accent); border-radius: var(--radius-pill); } .d-enq-reply .icon { inline-size: 1.1em; block-size: 1.1em; } .d-enq-actions { display: flex; align-items: center; gap: var(--space-2xs); margin: 0; padding: var(--space-2xs); background: var(--fill); border-radius: var(--radius-pill); } .d-enq-actions-label { padding-inline: var(--space-s) var(--space-xs); color: var(--text-2); font-size: var(--step-caption); font-weight: 600; } button.d-enq-status { min-block-size: calc(var(--control) - var(--space-xs)); margin: 0; padding-inline: var(--space-s); color: var(--text); font-size: var(--step-caption); font-weight: 600; background: none; border-radius: var(--radius-pill); } button.d-enq-status:hover { background: var(--surface); } button.d-enq-status[aria-pressed="true"] { color: var(--accent-ink); background: var(--surface); box-shadow: var(--card-shadow); cursor: default; } .d-appearance { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; gap: var(--space-m); } .d-set-form { gap: var(--space); } .d-set-group { display: grid; gap: var(--space-xs); min-inline-size: 0; margin: 0; padding: 0 0 var(--space); border: 0; border-block-end: var(--line) solid var(--separator); } .d-set-label { margin: 0; padding: 0; font-weight: 600; } .d-set-hint { margin: 0; color: var(--text-2); font-size: var(--step-small); } .d-colour { display: flex; align-items: center; gap: var(--space-s); } .d-set-form input.d-colour-input { inline-size: calc(var(--tap) * 1.5); block-size: var(--tap); min-block-size: var(--tap); padding: var(--space-2xs); background: var(--field-bg); border: var(--line) solid var(--field-border); border-radius: var(--radius); cursor: pointer; } .d-colour-value { font: 600 var(--step-base)/1 var(--font-mono); } .d-range { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-s); max-inline-size: var(--measure); } .d-set-form input.d-range-input { inline-size: 100%; min-block-size: var(--tap); padding: 0; accent-color: var(--accent); background: none; border: 0; } .d-range-value { min-inline-size: calc(var(--space) * 3); font: 600 var(--step-base)/1 var(--font-mono); text-align: end; } .d-bars { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s) var(--space-l); } .d-bar { display: flex; align-items: center; gap: var(--space-s); margin: 0; font-weight: 500; } .d-set-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); } button.d-set-save { margin: 0; } button.d-set-reset { margin: 0; color: var(--text); background: var(--fill); } .d-set-aside { position: sticky; inset-block-start: var(--contact-sticky); display: grid; gap: var(--space); } .d-contrast { display: grid; gap: var(--space-s); margin: 0; padding: 0; list-style: none; } .d-contrast-row { display: grid; grid-template-columns: var(--dot) minmax(0, 1fr) auto; align-items: center; gap: var(--space-s); font-size: var(--step-small); } .d-contrast-row .admin-dot { margin: 0; } .d-contrast-ratio { font: 600 var(--step-small)/1 var(--font-mono); } .d-contrast-row.is-bad .d-contrast-ratio { color: var(--error); } .d-preview { display: grid; justify-items: start; gap: var(--space-s); padding: var(--pv-space, var(--space-m)); background: var(--surface); border-radius: var(--pv-radius, var(--radius-xl)); box-shadow: var(--card-shadow); } .d-preview-title { margin: 0; color: var(--text-2); font-size: var(--step-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .d-preview-button { display: inline-flex; align-items: center; gap: var(--space-xs); min-block-size: var(--tap); padding-inline: var(--space-m); color: var(--pv-text, var(--accent-text)); font-weight: 700; background: var(--pv-fill, var(--accent)); border-radius: var(--radius-pill); } .d-preview-button .icon { inline-size: 1em; block-size: 1em; } .d-preview-link { color: var(--pv-ink, var(--accent-ink)); font-weight: 600; text-decoration: underline; } .d-preview-chip { padding: var(--space-2xs) var(--space-s); color: var(--pv-ink, var(--accent-ink)); font-size: var(--step-caption); font-weight: 700; background: var(--pv-soft, var(--accent-soft)); border-radius: var(--radius-pill); } .d-set-problems { padding: var(--space) var(--space-m); color: var(--error); background: var(--error-bg); border: var(--focus-ring) solid var(--error); border-radius: var(--radius-l); } .d-set-problems-title { margin: 0 0 var(--space-xs); font-weight: 700; } .d-set-problems ul { margin: 0; padding-inline-start: var(--space-m); } /* mobile admin tree: hidden on desktop */ .m-admin-tile .tile-icon { display: none; } .m-admin-nav { display: none; } .m-admin-tiles { display: none; } .m-admin-tile { display: none; } .m-admin-tile[aria-current="page"] { display: none; } .m-admin-tile-label { display: none; } .m-admin-badge { display: none; } .m-overview { display: none; } .m-kpis { display: none; } .m-kpi-link { display: none; } .m-kpi-value { display: none; } .m-kpi-label { display: none; } .m-kpi.is-alert .m-kpi-link { display: none; } .m-kpi.is-alert .m-kpi-value { display: none; } .m-kpi.is-warn .m-kpi-value { display: none; } .m-latest { display: none; } .m-latest-row { display: none; } .m-latest-row + .m-latest-row { display: none; } .m-latest-top { display: none; } .m-latest-meta { display: none; } .m-card-more { display: none; } .m-card-more .icon { display: none; } .m-enq { display: none; } .m-filters { display: none; } .m-filter { display: none; } .m-filter[aria-current="true"] { display: none; } .m-filter-count { display: none; } .m-enq-list { display: none; } .m-enq-card { display: none; } .m-enq-top { display: none; } .m-enq-ref { display: none; } .m-enq-name { display: none; } .m-enq-meta { display: none; } .m-enq-message { display: none; } .m-enq-summary { display: none; } .m-enq-text { display: none; } .m-enq-reply { display: none; } .m-enq-reply .icon { display: none; } .m-enq-actions { display: none; } .m-enq-actions-label { display: none; } button.m-enq-status { display: none; } button.m-enq-status[aria-pressed="true"] { display: none; } .m-appearance { display: none; } .m-set-form { display: none; } .m-set-group { display: none; } .m-set-group:last-child { display: none; } .m-set-label { display: none; } .m-set-hint { display: none; } .m-colour { display: none; } .m-set-form input.m-colour-input { display: none; } .m-colour-value { display: none; } .m-range { display: none; } .m-set-form input.m-range-input { display: none; } .m-range-value { display: none; } .m-bars { display: none; } .m-bar { display: none; } .m-contrast { display: none; } .m-contrast-row { display: none; } .m-contrast-row .admin-dot { display: none; } .m-contrast-ratio { display: none; } .m-contrast-row.is-bad .m-contrast-ratio { display: none; } .m-preview { display: none; } .m-preview-title { display: none; } .m-preview-button { display: none; } .m-preview-button .icon { display: none; } .m-preview-link { display: none; } .m-preview-chip { display: none; } .m-set-problems { display: none; } .m-set-problems-title { display: none; } .m-set-problems ul { display: none; } button.m-set-save { display: none; } button.m-set-reset { display: none; } /* ---- article page (desktop: d-article-aside, d-toc, d-related) - serious editorial, natural colours ---- */ .article-head { display: grid; gap: var(--space-s); max-inline-size: var(--article-head-max); margin-block: var(--space-s) var(--space-l); } .article-eyebrow { display: flex; align-items: center; gap: var(--space-s); margin: 0; color: var(--text-2); font-size: var(--step-small); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .article-eyebrow::before { content: ""; flex: none; inline-size: var(--space-l); block-size: calc(var(--line) * 2); background: var(--accent); } .article-title { margin: 0; color: var(--text); font: 700 var(--step-4)/1.08 var(--font-display); letter-spacing: -0.025em; } .article-standfirst { max-inline-size: var(--read-max); margin: 0; color: var(--text-2); font-size: var(--step-1); line-height: 1.45; } .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: 0; padding-block-start: var(--space); color: var(--text-2); font-size: var(--step-small); border-block-start: var(--line) solid var(--border); } .article-meta-sep { color: var(--text-2); } .article-figure { margin: 0 0 var(--space-xl); } .article-image { display: block; inline-size: 100%; block-size: auto; aspect-ratio: var(--slide-ratio-desktop); object-fit: cover; border-radius: var(--radius-xl); } .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--article-aside); align-items: start; gap: var(--space-xl); } .article-body { display: grid; grid-column: 1; grid-row: 1; gap: var(--space-l); min-inline-size: 0; } .article-prose { max-inline-size: var(--read-max); color: var(--text); font-size: calc(var(--step-base) * 1.0625); line-height: 1.72; } .article-prose p { margin-block: 0 var(--space-m); } .article-prose h2 { margin-block: var(--space-xl) var(--space); padding-block-start: var(--space-m); font: 700 var(--step-2)/1.2 var(--font-display); letter-spacing: -0.015em; border-block-start: var(--line) solid var(--border); scroll-margin-block-start: var(--contact-sticky); } .article-prose h3 { margin-block: var(--space-l) var(--space-s); font: 600 var(--step-1)/1.3 var(--font-display); } .article-prose a { color: var(--accent-ink); text-decoration-thickness: var(--line); text-underline-offset: 0.18em; } .article-prose ul, .article-prose ol { padding-inline-start: var(--space-l); } .article-prose li::marker { color: var(--text-2); } .article-prose blockquote { margin: var(--space-l) 0; padding: var(--space-m); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-l); } .d-article-aside { position: sticky; inset-block-start: var(--contact-sticky); display: grid; grid-column: 2; grid-row: 1; gap: var(--space-m); } .d-toc { display: grid; gap: var(--space-s); } .d-toc-title { margin: 0; color: var(--text-2); font-size: var(--step-caption); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .d-toc-list { display: grid; margin: 0; padding: 0; list-style: none; border-inline-start: var(--line) solid var(--border); } .d-toc-link { display: block; margin-inline-start: calc(var(--line) * -1); padding: var(--space-xs) var(--space-s); color: var(--text-2); font-size: var(--step-small); line-height: 1.35; text-decoration: none; border-inline-start: calc(var(--line) * 2) solid transparent; transition: color var(--dur-fast), border-color var(--dur-fast); } .d-toc-link:hover { color: var(--text); border-inline-start-color: var(--text-2); } .d-facts { display: grid; margin: 0; padding: var(--space-xs) var(--space); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-l); } .d-fact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-s); padding-block: var(--space-xs); font-size: var(--step-small); } .d-fact + .d-fact { border-block-start: var(--line) solid var(--separator); } .d-fact dt { color: var(--text-2); } .d-fact dd { margin: 0; font-weight: 600; text-align: end; } .d-article-cta { display: grid; gap: var(--space-xs); padding: var(--space); color: var(--bg); background: var(--text); border-radius: var(--radius-l); } .d-article-cta-title { margin: 0; font: 700 var(--step-base)/1.3 var(--font-display); } .d-article-cta-text { margin: 0; font-size: var(--step-small); line-height: 1.45; } .d-article-cta-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-block-size: var(--tap); margin-block-start: var(--space-xs); color: var(--accent-text); font-weight: 700; text-decoration: none; background: var(--accent); border-radius: var(--radius-pill); } .d-article-cta-link .icon { inline-size: 1em; block-size: 1em; } .related { display: grid; gap: var(--space-m); margin-block: var(--space-xl); padding-block-start: var(--space-l); border-block-start: var(--line) solid var(--border); } .related-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space); } .related-title { margin: 0; font: 700 var(--step-2)/1.2 var(--font-display); } .related-all { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--accent-ink); font-weight: 600; text-decoration: none; } .related-all .icon { inline-size: 1em; block-size: 1em; } .d-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); margin: 0; padding: 0; list-style: none; } .d-related-card { position: relative; display: grid; align-content: start; overflow: hidden; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-l); transition: box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-out); } .d-related-card:hover { box-shadow: var(--card-shadow); transform: translateY(calc(var(--space-2xs) * -1)); } .d-related-card:has(.card-link:focus-visible) { outline: var(--focus-ring) solid var(--focus-color); outline-offset: var(--space-2xs); } .d-related-image { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; } .d-related-body { display: grid; gap: var(--space-xs); padding: var(--space); } .d-related-section { margin: 0; color: var(--text-2); font-size: var(--step-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .d-related-title { margin: 0; font: 600 var(--step-base)/1.35 var(--font-display); } /* mobile article parts: hidden on desktop */ .m-toc { display: none; } .m-toc-summary { display: none; } .m-toc-summary::-webkit-details-marker { display: none; } .m-toc-count { display: none; } .m-toc-chevron { display: none; } .m-toc[open] .m-toc-chevron { display: none; } .m-toc-list { display: none; } .m-toc-list li { display: none; } .m-toc-link { display: none; } .m-article-end { display: none; } .m-facts { display: none; } .m-fact { display: none; } .m-fact dt { display: none; } .m-fact dd { display: none; } .m-article-cta-title { display: none; } .m-article-cta-text { display: none; } .m-article-cta-link { display: none; } .m-article-cta-link .icon { display: none; } .m-related { display: none; } .m-related-row { display: none; } .m-related-row + .m-related-row { display: none; } .m-related-image { display: none; } .m-related-body { display: none; } .m-related-section { display: none; } .m-related-title { display: none; } /* ---- insights list (desktop: d-insights) ---- */ .insights-head { display: grid; gap: var(--space-s); max-inline-size: var(--article-head-max); margin-block: var(--space-s) var(--space-l); padding-block-end: var(--space-m); border-block-end: var(--line) solid var(--border); } .insights-title { margin: 0; font: 700 var(--step-4)/1.08 var(--font-display); letter-spacing: -0.025em; } .insights-lead { max-inline-size: var(--read-max); margin: 0; color: var(--text-2); font-size: var(--step-1); line-height: 1.45; } .d-insights { display: grid; gap: var(--space-l); margin-block-end: var(--space-xl); } .d-lead { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); overflow: hidden; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-xl); transition: box-shadow var(--dur-fast); } .d-lead:hover { box-shadow: var(--card-shadow); } .d-lead:has(.card-link:focus-visible) { outline: var(--focus-ring) solid var(--focus-color); outline-offset: var(--space-2xs); } .d-lead-image { display: block; inline-size: 100%; block-size: 100%; min-block-size: var(--slide-min-desktop); object-fit: cover; } .d-lead-body { display: grid; align-content: center; gap: var(--space-s); padding: var(--space-l); } .d-lead-title { margin: 0; font: 700 var(--step-2)/1.2 var(--font-display); letter-spacing: -0.015em; } .d-lead-text { margin: 0; color: var(--text-2); line-height: 1.55; } .d-card-section { margin: 0; color: var(--text-2); font-size: var(--step-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .d-card-meta { margin: 0; color: var(--text-2); font-size: var(--step-caption); } .d-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); margin: 0; padding: 0; list-style: none; } .d-card { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-l); transition: box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-out); } .d-card:hover { box-shadow: var(--card-shadow); transform: translateY(calc(var(--space-2xs) * -1)); } .d-card:has(.card-link:focus-visible) { outline: var(--focus-ring) solid var(--focus-color); outline-offset: var(--space-2xs); } .d-card-image { display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover; } .d-card-body { display: grid; align-content: start; gap: var(--space-xs); padding: var(--space); } .d-card-title { margin: 0; font: 600 var(--step-base)/1.35 var(--font-display); } .d-card-text { margin: 0; color: var(--text-2); font-size: var(--step-small); line-height: 1.5; } /* mobile insights tree: hidden on desktop */ .m-insights { display: none; } .m-lead { display: none; } .m-lead-image { display: none; } .m-lead-body { display: none; } .m-lead-title { display: none; } .m-lead-text { display: none; } .m-card-section { display: none; } .m-card-meta { display: none; } .m-rows { display: none; } .m-row { display: none; } .m-row + .m-row { display: none; } .m-row-image { display: none; } .m-row-body { display: none; } .m-row-title { display: none; } /* ---- inside articles (desktop): lists, Q&A, spec tables - neutral, hairlines, no colour blocks ---- */ .article-prose > p:first-of-type { color: var(--text); font-size: calc(var(--step-base) * 1.1875); line-height: 1.6; } .article-prose strong { color: var(--text); font-weight: 650; } .article-prose em { color: var(--text-2); } .article-prose ul { display: grid; margin: 0 0 var(--space-l); padding: 0; list-style: none; border-block: var(--line) solid var(--border); } .article-prose ul > li { position: relative; margin: 0; padding: var(--space-s) 0 var(--space-s) var(--space-l); line-height: 1.6; } .article-prose ul > li + li { border-block-start: var(--line) solid var(--separator); } .article-prose ul > li::before { content: ""; position: absolute; inset-inline-start: var(--space-xs); inset-block-start: calc(var(--space-s) + 0.6em); inline-size: calc(var(--space-xs) * 1.25); block-size: calc(var(--space-xs) * 1.25); background: var(--text-2); } .article-prose h3 + p { padding-inline-start: var(--space-m); border-inline-start: calc(var(--line) * 2) solid var(--border); } .article-prose .d-table-wrap { margin-block: var(--space-s) var(--space-l); border: var(--line) solid var(--border); border-radius: var(--radius); box-shadow: none; } .article-prose .d-spec-table th[scope="row"] { font-size: var(--step-caption); letter-spacing: 0.05em; text-transform: uppercase; } .article-prose .m-spec { display: none; } .article-prose .m-spec-row dt { display: none; } /* ---- Article editor + article components (Rule 23) ---- */ .m-ed-insert, .m-ed-linkdlg { display: none; } .m-ed-insert::backdrop, .m-ed-linkdlg::backdrop { display: none; } .m-ed-dialog-head { display: none; } .m-ed-dialog-title { display: none; } .m-ed-insert-list { display: none; } .m-ed-insert-item { display: none; } .m-ed-insert-item:hover, .m-ed-insert-item:focus-visible { display: none; } .m-ed-insert-item .icon { display: none; } .m-ed-link-list { display: none; } .m-ed-link-pick { display: none; } .m-ed-link-pick:hover, .m-ed-link-pick:focus-visible { display: none; } .m-ed-link-pick strong { display: none; } .m-ed-link-pick span { display: none; } .m-ed-dialog-actions { display: none; } .m-ed-dialog-actions button.m-ed-primary { display: none; } .m-ed-toast { display: none; } button.m-ed-toast-undo { display: none; } .m-ed-draft { display: none; } .m-ed-draft-text { display: none; } .m-ed-draft button.m-ed-primary, .m-ed-draft button.m-ed-ghost { display: none; } .m-ed-stats { display: none; } .m-ed-checks { display: none; } .m-ed-check-row { display: none; } .m-ed-check-dot { display: none; } .m-ed-check-row.is-warn .m-ed-check-dot { display: none; } .m-ed-check-row.is-bad .m-ed-check-dot { display: none; } .m-ed-check-row.is-bad { display: none; } .m-ed-outline { display: none; } .m-ed-outline-item.is-h3 { display: none; } .m-ed-outline-item.is-h4 { display: none; } .m-ed-outline-link { display: none; } .m-ed-outline-link:hover, .m-ed-outline-link:focus-visible { display: none; } .m-ed-outline-empty { display: none; } .m-ed-serp { display: none; } .m-ed-serp-site { display: none; } .m-ed-serp-name { display: none; } .m-ed-serp-url { display: none; } .m-ed-serp-title { display: none; } .m-ed-serp-desc { display: none; } .d-ed-insert, .d-ed-linkdlg, .d-ed-keys { inline-size: min(100%, calc(var(--space) * 36)); max-inline-size: 100%; max-block-size: calc(100% - var(--space-xl)); margin: auto; padding: var(--space); color: var(--text); background: var(--bg); border: 0; border-radius: var(--radius-xl); box-shadow: var(--card-shadow); overflow-y: auto; } .d-ed-insert::backdrop, .d-ed-linkdlg::backdrop, .d-ed-keys::backdrop { background: var(--backdrop); } .d-ed-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space); margin-block-end: var(--space-s); } .d-ed-dialog-title { margin: 0; font: 700 var(--step-1)/1.2 var(--font-display); } .d-ed-insert-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); margin: var(--space-s) 0 0; padding: 0; list-style: none; } .d-ed-insert-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-xs); inline-size: 100%; min-block-size: var(--tap); margin: 0; padding: var(--space-xs) var(--space-s); font: inherit; color: var(--text); text-align: start; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius); cursor: pointer; } .d-ed-insert-item:hover, .d-ed-insert-item:focus-visible { border-color: var(--accent-line); background: var(--accent-50); } .d-ed-insert-item .icon { inline-size: var(--icon); block-size: var(--icon); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .d-ed-link-list { display: grid; gap: var(--space-2xs); margin: var(--space-xs) 0; padding: 0; list-style: none; max-block-size: calc(var(--space) * 16); overflow-y: auto; } .d-ed-link-pick { display: grid; gap: var(--space-2xs); inline-size: 100%; min-block-size: var(--tap); margin: 0; padding: var(--space-xs) var(--space-s); font: inherit; color: var(--text); text-align: start; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius); cursor: pointer; } .d-ed-link-pick:hover, .d-ed-link-pick:focus-visible { border-color: var(--accent-line); } .d-ed-link-pick strong { font-size: var(--step-small); line-height: 1.3; overflow-wrap: anywhere; } .d-ed-link-pick span { color: var(--text-2); font: var(--step-caption)/1.3 var(--font-mono); overflow-wrap: anywhere; } .d-ed-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs); margin-block-start: var(--space-s); } .d-ed-dialog-actions button.d-ed-primary { inline-size: auto; padding-inline: var(--space-m); } .d-ed-keys-list { display: grid; gap: var(--space-2xs); margin: 0; } .d-ed-keys-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: var(--space-s); padding: var(--space-xs) 0; border-block-end: var(--line) solid var(--separator); } .d-ed-keys-row dt, .d-ed-keys-row dd { margin: 0; } .d-ed-keys-row kbd { display: inline-block; padding: var(--space-2xs) var(--space-xs); font: 600 var(--step-caption)/1.2 var(--font-mono); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-s); } button.d-ed-keys-open { display: inline-flex; align-items: center; inline-size: auto; min-block-size: calc(var(--tap) * 0.7); margin: 0; padding-inline: var(--space-xs); font-size: var(--step-caption); font-weight: 600; color: var(--accent-ink); background: none; border: 0; cursor: pointer; } .d-ed-toast { position: fixed; z-index: 60; inset-inline-start: var(--space-l); inset-block-end: var(--space-l); display: flex; align-items: center; justify-content: space-between; gap: var(--space); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space); color: var(--bg); font-size: var(--step-small); background: var(--text); border-radius: var(--radius-pill); box-shadow: var(--card-shadow); } button.d-ed-toast-undo { display: inline-flex; align-items: center; inline-size: auto; min-block-size: calc(var(--tap) * 0.8); margin: 0; padding-inline: var(--space); font-weight: 700; color: var(--accent-text); background: var(--accent); border: 0; border-radius: var(--radius-pill); cursor: pointer; } .d-ed-draft { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-s); padding: var(--space-s) var(--space); color: var(--info); background: var(--info-bg); border-radius: var(--radius-l); } .d-ed-draft-text { flex: 1 1 calc(var(--space) * 14); margin: 0; font-size: var(--step-small); font-weight: 600; } .d-ed-draft button.d-ed-primary, .d-ed-draft button.d-ed-ghost { inline-size: auto; flex: 0 0 auto; } .d-ed-stats { margin: 0; color: var(--text-2); font-size: var(--step-caption); font-weight: 600; font-variant-numeric: tabular-nums; } .d-ed-checks { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; } .d-ed-check-row { display: grid; grid-template-columns: var(--dot) minmax(0, 1fr); align-items: start; gap: var(--space-xs); font-size: var(--step-caption); line-height: 1.4; } .d-ed-check-dot { inline-size: var(--dot); block-size: var(--dot); margin-block-start: calc(var(--space-xs) * 1.2); border-radius: 50%; background: var(--ok); } .d-ed-check-row.is-warn .d-ed-check-dot { background: var(--accent-ink); } .d-ed-check-row.is-bad .d-ed-check-dot { background: var(--error); } .d-ed-check-row.is-bad { color: var(--error); } .d-ed-outline { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; } .d-ed-outline-item.is-h3 { padding-inline-start: var(--space); } .d-ed-outline-item.is-h4 { padding-inline-start: var(--space-l); } .d-ed-outline-link { display: block; inline-size: 100%; min-block-size: calc(var(--tap) * 0.7); margin: 0; padding: var(--space-2xs) var(--space-xs); font: inherit; font-size: var(--step-small); color: var(--text); text-align: start; background: none; border: 0; border-inline-start: calc(var(--line) * 2) solid var(--border); cursor: pointer; overflow-wrap: anywhere; } .d-ed-outline-link:hover, .d-ed-outline-link:focus-visible { color: var(--accent-ink); border-inline-start-color: var(--accent-ink); } .d-ed-outline-empty { color: var(--text-2); font-size: var(--step-caption); } .d-ed-serp { display: grid; gap: var(--space-2xs); padding: var(--space-s) var(--space); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius); overflow-wrap: anywhere; } .d-ed-serp-site { display: grid; margin: 0; line-height: 1.3; } .d-ed-serp-name { font-size: var(--step-small); font-weight: 600; } .d-ed-serp-url { color: var(--text-2); font-size: var(--step-caption); } .d-ed-serp-title { margin: 0; color: var(--info); font-size: var(--step-1); line-height: 1.3; } .d-ed-serp-desc { margin: 0; color: var(--text-2); font-size: var(--step-small); line-height: 1.45; } .m-text-actions { display: none; } button.m-text-cancel { display: none; } .d-text-actions { display: flex; gap: var(--space-xs); } button.d-text-cancel { display: inline-flex; align-items: center; justify-content: center; inline-size: auto; min-block-size: calc(var(--tap) * 0.8); margin: 0; padding-inline: var(--space); font-size: var(--step-small); font-weight: 600; color: var(--text); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-pill); cursor: pointer; } .texts-hit { padding: 0 var(--space-2xs); color: inherit; background: var(--accent-100); border-radius: var(--radius-s); } .texts-clear { display: inline-flex; align-items: center; min-block-size: calc(var(--tap) * 0.8); padding-inline: var(--space); color: var(--accent-ink); font-size: var(--step-small); font-weight: 700; text-decoration: none; background: var(--accent-50); border-radius: var(--radius-pill); } .m-texts { display: none; } .m-texts-stats { display: none; } .m-texts-pick { display: none; } .m-texts-pick-label { display: none; } .m-texts-group { display: none; } button.m-texts-open { display: none; } .m-texts-head { display: none; } .m-texts-search { display: none; } .m-texts-q { display: none; } button.m-texts-go { display: none; } .m-texts-filter { display: none; } .m-texts-filter[aria-current="true"] { display: none; } .m-texts-filter-count { display: none; } .m-texts-title { display: none; } .m-texts-sub { display: none; } .m-texts-list { display: none; } .m-text { display: none; } .m-text:target { display: none; } .m-text.is-invalid { display: none; } .m-text-form { display: none; } .m-text-head { display: none; } .m-text-label { display: none; } .m-text-badge { display: none; } .m-text-badge.is-seo { display: none; } .m-text-badge.is-locked { display: none; } .m-text-badge.is-edited { display: none; } .m-text-key { display: none; } .m-text-key code { display: none; } button.m-text-copy { display: none; } .m-text-value { display: none; } .m-text-value:focus-visible { display: none; } .m-text-value:invalid { display: none; } .m-text-value[readonly] { display: none; } .m-text-problem { display: none; } .m-text-foot { display: none; } .m-text-meta { display: none; } .m-text-count { display: none; } .m-text-count[data-state="ok"] { display: none; } .m-text-count[data-state="bad"] { display: none; } .m-text-keep code { display: none; } .m-text-locked { display: none; } button.m-text-save { display: none; } button.m-text-save.is-changed { display: none; } .m-text-history { display: none; } .m-text-history-summary { display: none; } .m-text-history-list { display: none; } .m-text-change { display: none; } .m-text-change-when { display: none; } .m-text-change-old { display: none; } .m-text-change-new { display: none; } .m-text-change-tag { display: none; } .m-text-restore { display: none; } button.m-text-restore-button { display: none; } .d-texts { display: grid; grid-template-columns: minmax(calc(var(--space) * 18), 1.2fr) minmax(0, 3fr); align-items: start; gap: var(--space-m); } .d-texts-side { position: sticky; inset-block-start: var(--contact-sticky); display: grid; gap: var(--space-s); padding: var(--space-s); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--card-shadow); } .d-texts-group-list { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; } .d-texts-group { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-xs); min-block-size: calc(var(--tap) * 0.9); padding: var(--space-2xs) var(--space-xs); color: var(--text); font-size: var(--step-small); font-weight: 600; text-decoration: none; border-radius: var(--radius); } .d-texts-group .tile-icon { inline-size: var(--tile-s); block-size: var(--tile-s); border-radius: var(--radius-s); } .d-texts-group:hover { background: var(--fill); } .d-texts-group[aria-current="page"] { color: var(--accent-ink); background: var(--accent-soft); } .d-texts-group-name { overflow-wrap: anywhere; } .d-texts-count { color: var(--text-2); font-size: var(--step-caption); font-weight: 500; } .d-texts-main { display: grid; gap: var(--space); min-inline-size: 0; } .d-texts-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-s); margin: 0; } .d-texts-stat { display: grid; gap: var(--space-2xs); padding: var(--space) var(--space-m); background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--card-shadow); } .d-texts-stat dt { order: 2; color: var(--text-2); font-size: var(--step-small); } .d-texts-stat dd { order: 1; margin: 0; font: 700 var(--step-3)/1 var(--font-display); } .d-texts-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-s); } .d-texts-head-icon { inline-size: var(--tap); block-size: var(--tap); border-radius: var(--radius); } .d-texts-head-text { display: grid; gap: var(--space-2xs); min-inline-size: 0; } .d-texts-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs); margin: 0; } .d-texts-q { inline-size: 100%; min-block-size: var(--tap); margin: 0; padding: var(--space-xs) var(--space-s); font: inherit; font-size: var(--step-small); color: var(--text); background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius-pill); } button.d-texts-go { display: flex; align-items: center; justify-content: center; inline-size: auto; min-block-size: var(--tap); margin: 0; padding-inline: var(--space); font-size: var(--step-small); font-weight: 700; color: var(--accent-text); background: var(--accent); border: 0; border-radius: var(--radius-pill); } .d-texts-filter { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-block-size: var(--tap); padding-inline: var(--space-s); color: var(--text); font-size: var(--step-small); font-weight: 600; text-decoration: none; background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius-pill); } .d-texts-filter[aria-current="true"] { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line); } .d-texts-filter-count { min-inline-size: calc(var(--space) * 1.5); padding: 0 var(--space-xs); color: var(--text-2); font-size: var(--step-caption); text-align: center; background: var(--fill); border-radius: var(--radius-pill); } .d-texts-title { margin: 0; font: 700 var(--step-2)/1.2 var(--font-display); overflow-wrap: anywhere; } .d-texts-sub { margin: 0; color: var(--text-2); font-size: var(--step-small); line-height: 1.45; } .d-texts-list { display: grid; gap: var(--space-s); margin: 0; padding: 0; list-style: none; } .d-text { display: grid; gap: var(--space-xs); padding: var(--space) var(--space-m); background: var(--surface); border: var(--line) solid transparent; border-radius: var(--radius-l); box-shadow: var(--card-shadow); scroll-margin-block-start: var(--contact-sticky); } .d-text:target { border-color: var(--accent-line); } .d-text.is-invalid { border-color: var(--error); } .d-text-form { display: grid; gap: var(--space-xs); margin: 0; } .d-text-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-xs); } .d-text-label { margin: 0; margin-inline-end: auto; font-size: var(--step-base); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; } .d-text-badge { display: inline-flex; align-items: center; min-block-size: calc(var(--space) * 1.4); padding-inline: var(--space-xs); color: var(--text-2); font-size: var(--step-caption); font-weight: 700; background: var(--fill); border-radius: var(--radius-pill); } .d-text-badge.is-seo { color: var(--info); background: var(--info-bg); } .d-text-badge.is-locked { color: var(--text-2); background: var(--fill); } .d-text-badge.is-edited { color: var(--ok); background: var(--ok-bg); } .d-text-key { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: 0; } .d-text-key code { color: var(--text-2); font: var(--step-caption)/1.3 var(--font-mono); overflow-wrap: anywhere; } button.d-text-copy { display: inline-flex; align-items: center; inline-size: auto; min-block-size: calc(var(--tap) * 0.6); margin: 0; padding-inline: var(--space-xs); font-size: var(--step-caption); font-weight: 600; color: var(--accent-ink); background: none; border: 0; border-radius: var(--radius-pill); cursor: pointer; } .d-text-value { inline-size: 100%; min-block-size: var(--tap); margin: 0; padding: var(--space-xs) var(--space-s); font: inherit; font-size: var(--step-small); line-height: 1.5; color: var(--text); background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius-s); resize: vertical; overflow-wrap: anywhere; } .d-text-value:focus-visible { border-color: var(--accent-line); } .d-text-value:invalid { border-color: var(--error); } .d-text-value[readonly] { color: var(--text-2); background: var(--fill); } .d-text-problem { margin: 0; padding: var(--space-2xs) var(--space-xs); color: var(--error); font-size: var(--step-caption); background: var(--error-bg); border-radius: var(--radius-s); } .d-text-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); } .d-text-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-s); margin: 0; color: var(--text-2); font-size: var(--step-caption); } .d-text-count { font-variant-numeric: tabular-nums; font-weight: 600; } .d-text-count[data-state="ok"] { color: var(--ok); } .d-text-count[data-state="bad"] { color: var(--error); } .d-text-keep code { padding: 0 var(--space-2xs); color: var(--accent-ink); font-family: var(--font-mono); background: var(--accent-50); border-radius: var(--radius-s); } .d-text-locked { font-style: italic; } button.d-text-save { display: inline-flex; align-items: center; justify-content: center; inline-size: auto; min-block-size: calc(var(--tap) * 0.8); margin: 0; padding-inline: var(--space-m); font-size: var(--step-small); font-weight: 700; color: var(--text-2); background: var(--fill); border: 0; border-radius: var(--radius-pill); } button.d-text-save.is-changed { color: var(--accent-text); background: var(--accent); } .d-text-history { padding-block-start: var(--space-2xs); border-block-start: var(--line) solid var(--separator); } .d-text-history-summary { display: flex; align-items: center; min-block-size: calc(var(--tap) * 0.7); color: var(--text-2); font-size: var(--step-caption); font-weight: 600; cursor: pointer; } .d-text-history-list { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; } .d-text-change { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2xs) var(--space-s); padding: var(--space-xs) var(--space-s); background: var(--bg); border-radius: var(--radius-s); } .d-text-change-when { grid-column: 1; color: var(--text-2); font-size: var(--step-caption); } .d-text-change-old { grid-column: 1; color: var(--text-2); font-size: var(--step-small); text-decoration: line-through; text-decoration-color: var(--separator); overflow-wrap: anywhere; } .d-text-change-new { grid-column: 1; font-size: var(--step-small); overflow-wrap: anywhere; } .d-text-change-tag { font-weight: 700; text-decoration: none; display: inline-block; } .d-text-restore { margin: 0; grid-column: 2; grid-row: 1 / span 3; } button.d-text-restore-button { display: inline-flex; align-items: center; justify-content: center; inline-size: auto; min-block-size: calc(var(--tap) * 0.8); margin: 0; padding-inline: var(--space); font-size: var(--step-caption); font-weight: 700; color: var(--text); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-pill); } .m-font-select { display: none; } .m-font-sample { display: none; } .d-font-select { inline-size: 100%; min-block-size: var(--tap); margin: 0 0 var(--space-2xs); padding: var(--space-xs) var(--space-s); font: inherit; color: var(--text); background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius-s); } .d-font-sample { margin: 0 0 var(--space-s); padding: var(--space-xs) var(--space-s); font-size: var(--step-1); line-height: 1.3; background: var(--fill); border-radius: var(--radius-s); overflow-wrap: anywhere; } .preset-swatch { display: block; inline-size: calc(var(--tap) * 0.9); block-size: auto; flex: none; } .m-presets { display: none; } .m-preset-list { display: none; } .m-preset-item { display: none; } .m-preset-form, .m-preset-delete, .m-preset-save { display: none; } button.m-preset { display: none; } button.m-preset:hover { display: none; } button.m-preset[aria-current="true"] { display: none; } .m-preset-text { display: none; } .m-preset-text strong { display: none; } .m-preset-text span { display: none; } .m-preset-on { display: none; } button.m-preset-remove { display: none; } .m-preset-save-row { display: none; } .m-preset-name { display: none; } button.m-preset-save-button { display: none; } .d-presets { grid-column: 1 / -1; display: grid; gap: var(--space-s); } .d-preset-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--space) * 17), 1fr)); gap: var(--space-xs); margin: 0; padding: 0; list-style: none; } .d-preset-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2xs); } .d-preset-form, .d-preset-delete, .d-preset-save { margin: 0; } button.d-preset { display: flex; align-items: center; gap: var(--space-s); inline-size: 100%; min-block-size: var(--tap); margin: 0; padding: var(--space-xs) var(--space-s); font: inherit; color: var(--text); text-align: start; background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius); cursor: pointer; } button.d-preset:hover { border-color: var(--accent-line); } button.d-preset[aria-current="true"] { border-color: var(--accent-ink); box-shadow: 0 0 0 var(--line) var(--accent-ink); } .d-preset-text { display: grid; flex: 1 1 auto; min-inline-size: 0; } .d-preset-text strong { font-size: var(--step-small); } .d-preset-text span { color: var(--text-2); font-size: var(--step-caption); line-height: 1.35; overflow-wrap: anywhere; } .d-preset-on { flex: none; padding: var(--space-2xs) var(--space-xs); font-size: var(--step-caption); font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); border-radius: var(--radius-pill); } button.d-preset-remove { inline-size: auto; min-block-size: calc(var(--tap) * 0.8); margin: 0; padding-inline: var(--space-s); font-size: var(--step-caption); font-weight: 600; color: var(--error); background: none; border: 0; border-radius: var(--radius-pill); cursor: pointer; } .d-preset-save-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xs); margin-block-start: var(--space-2xs); } .d-preset-name { inline-size: 100%; min-block-size: var(--tap); margin: 0; padding: var(--space-xs) var(--space-s); font: inherit; color: var(--text); background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius-s); } button.d-preset-save-button { display: flex; align-items: center; justify-content: center; inline-size: auto; min-block-size: var(--tap); margin: 0; padding-inline: var(--space); font-weight: 700; color: var(--text); background: var(--fill); border: 0; border-radius: var(--radius-pill); } .mfa { display: grid; gap: var(--space-m); max-inline-size: calc(var(--space) * 56); margin: var(--space-l) auto var(--space-xl); } .mfa-head { display: grid; gap: var(--space-xs); } .mfa-title { margin: 0; font: 700 var(--step-4)/1.1 var(--font-display); letter-spacing: -0.02em; } .mfa-lead { margin: 0; max-inline-size: var(--prose-max); color: var(--text-2); } .qr { display: block; inline-size: 100%; block-size: auto; } .qr .qr-plate { fill: var(--qr-plate); } .qr .qr-ink { fill: var(--qr-ink); } .m-mfa { display: none; } .m-mfa-open { display: none; } .m-mfa-other { display: none; } .m-mfa-other-summary { display: none; } .m-mfa-qr-plate { display: none; } .m-mfa-list { display: none; } .m-mfa-step { display: none; } .m-mfa-step::before { display: none; } .m-mfa-step > span { display: none; } .m-mfa-key { display: none; } .m-mfa-key-label { display: none; } .m-mfa-key-value { display: none; } button.m-mfa-copy { display: none; } .m-mfa-meta { display: none; } .m-mfa-form { display: none; } .m-mfa-label { display: none; } .m-mfa-code { display: none; } .m-mfa-code:focus-visible { display: none; } button.m-mfa-submit { display: none; } .m-mfa-note { display: none; } .d-mfa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--space-l); } .d-mfa-steps { display: grid; gap: var(--space-m); padding: var(--space-l); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--card-shadow); } .d-mfa-qr { display: grid; justify-items: center; gap: var(--space); margin: 0; padding: var(--space-l); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--card-shadow); } .d-mfa-qr-plate { inline-size: var(--qr-size-d); padding: var(--space-xs); background: var(--qr-plate); border-radius: var(--radius-l); box-shadow: 0 0 0 var(--line) var(--border); } .d-mfa-qr-caption { color: var(--text-2); font-size: var(--step-small); } .d-mfa-list { display: grid; gap: var(--space); margin: 0; padding: 0; list-style: none; counter-reset: mfa; } .d-mfa-step { position: relative; display: grid; gap: var(--space-2xs); padding-inline-start: calc(var(--tile) + var(--space-s)); counter-increment: mfa; } .d-mfa-step::before { content: counter(mfa); position: absolute; inset-inline-start: 0; inset-block-start: 0; display: grid; place-items: center; inline-size: var(--tile); block-size: var(--tile); font-weight: 700; color: var(--accent-text); background: var(--accent); border-radius: 50%; } .d-mfa-step > span { color: var(--text-2); font-size: var(--step-small); line-height: 1.45; } .d-mfa-key { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2xs) var(--space-s); inline-size: 100%; padding: var(--space-s) var(--space); background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius); } .d-mfa-key-label { grid-column: 1 / -1; color: var(--text-2); font-size: var(--step-caption); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .d-mfa-key-value { font: 600 var(--step-1)/1.4 var(--font-mono); letter-spacing: 0.06em; overflow-wrap: anywhere; user-select: all; } button.d-mfa-copy { display: inline-flex; align-items: center; justify-content: center; inline-size: auto; min-block-size: calc(var(--tap) * 0.85); margin: 0; padding-inline: var(--space); font-size: var(--step-small); font-weight: 700; color: var(--text); background: var(--fill); border: 0; border-radius: var(--radius-pill); cursor: pointer; } .d-mfa-meta { grid-column: 1 / -1; color: var(--text-2); font-size: var(--step-caption); overflow-wrap: anywhere; } .d-mfa-form { display: grid; gap: var(--space-xs); margin: 0; } .d-mfa-label { margin: 0; font-size: var(--step-small); font-weight: 600; } .d-mfa-code { inline-size: 100%; min-block-size: calc(var(--tap) * 1.2); padding: var(--space-s) var(--space); font: 600 var(--step-2)/1 var(--font-mono); letter-spacing: 0.3em; text-align: center; color: var(--text); background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius); } .d-mfa-code:focus-visible { border-color: var(--accent); } button.d-mfa-submit { display: flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: var(--tap); margin: 0; font-weight: 700; color: var(--accent-text); background: var(--accent); border: 0; border-radius: var(--radius-pill); } .d-mfa-note { margin: 0; color: var(--text-2); font-size: var(--step-caption); } .m-ed-tool .icon { display: none; } .m-ed-toolbar { display: none; } .d-ed-tool .icon { inline-size: calc(var(--icon) * 0.9); block-size: calc(var(--icon) * 0.9); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .d-ed-toolbar { position: sticky; inset-block-start: var(--contact-sticky); z-index: 1; } .admin-links { display: flex; flex-wrap: wrap; gap: var(--space-s); margin: 0; } .admin-link { display: inline-flex; align-items: center; min-block-size: calc(var(--tap) * 0.85); padding-inline: var(--space); color: var(--accent-ink); font-size: var(--step-small); font-weight: 600; text-decoration: none; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-pill); } .admin-link:hover { border-color: var(--accent-line); } .admin-code { margin: 0; padding: var(--space-s) var(--space); font: var(--step-small)/1.5 var(--font-mono); overflow-wrap: anywhere; background: var(--fill); border-radius: var(--radius-s); } .ed-data { display: none; } .ax-preview-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-s); margin: var(--space) 0; padding: var(--space-s) var(--space); font-size: var(--step-small); color: var(--info); background: var(--info-bg); border-radius: var(--radius-l); } .ax-preview-back { color: inherit; font-weight: 700; } .article-prose { font-family: var(--article-font-body, var(--font-body)); } .article-title, .article-prose h2, .article-prose h3, .article-prose h4, .ax-faq-q h3 { font-family: var(--article-font-heading, var(--font-display)); } .ax-layout-wide .article-prose { max-inline-size: var(--prose-wide); } .ax-figure { display: grid; gap: var(--space-s); margin: var(--space-l) 0; } .ax-figure-image { inline-size: 100%; block-size: auto; border-radius: var(--radius-l); } .ax-figure-inline { max-inline-size: var(--prose-max); } .ax-figure-wide { max-inline-size: 100%; } .ax-figure-full { max-inline-size: 100%; } .ax-figure-full .ax-figure-image { border-radius: var(--radius-xl); } .ax-figure-caption { color: var(--text-2); font-size: var(--step-small); line-height: 1.5; } .ax-embed { display: grid; gap: var(--space-s); margin: var(--space-l) 0; max-inline-size: var(--prose-max); } .ax-embed-stage { position: relative; display: grid; place-items: center; overflow: hidden; background: var(--fill); border: var(--line) solid var(--border); border-radius: var(--radius-l); } .ax-ratio-16-9 .ax-embed-stage { aspect-ratio: 16 / 9; } .ax-ratio-4-3 .ax-embed-stage { aspect-ratio: 4 / 3; } .ax-ratio-1-1 .ax-embed-stage { aspect-ratio: 1 / 1; } .ax-ratio-9-16 .ax-embed-stage { aspect-ratio: 9 / 16; max-inline-size: calc(var(--space) * 22); } .ax-ratio-21-9 .ax-embed-stage { aspect-ratio: 21 / 9; } .ax-embed-card { display: grid; gap: var(--space-s); max-inline-size: var(--embed-card-max); padding: var(--space-m); text-align: center; } .ax-embed-provider { margin: 0; color: var(--text-2); font-size: var(--step-caption); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .ax-embed-title { margin: 0; font: 700 var(--step-1)/1.25 var(--font-display); } .ax-embed-note { margin: 0; color: var(--text-2); font-size: var(--step-small); line-height: 1.45; } .ax-embed-load { justify-self: center; min-block-size: var(--tap); margin: 0; padding-inline: var(--space-m); font: inherit; font-weight: 700; color: var(--accent-text); background: var(--accent); border: 0; border-radius: var(--radius-pill); cursor: pointer; } .ax-embed-settings { justify-self: center; margin: 0; padding: var(--space-2xs) var(--space-s); font: inherit; font-size: var(--step-small); color: var(--accent-ink); background: none; border: 0; text-decoration: underline; cursor: pointer; } .ax-embed-frame { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; } .ax-embed-caption { font-size: var(--step-small); } .ax-embed-caption a { color: var(--accent-ink); } .ax-html { display: block; min-inline-size: 0; } .ax-quote { margin: var(--space-l) 0; padding: var(--space-m) var(--space-l); font: 500 var(--step-2)/1.4 var(--article-font-heading, var(--font-display)); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-xl); } .ax-quote p { margin: 0 0 var(--space-s); } .ax-quote-cite { color: var(--text-2); font: 400 var(--step-small)/1.4 var(--article-font-body, var(--font-body)); } .ax-quote-cite cite { font-style: normal; font-weight: 600; } .ax-callout { display: grid; gap: var(--space-s); margin: var(--space-l) 0; padding: var(--space) var(--space-m); border-radius: var(--radius-l); color: var(--text); background: var(--fill); } .ax-callout > :last-child { margin-block-end: 0; } .ax-callout-tip { color: var(--info); background: var(--info-bg); } .ax-callout-warning { color: var(--accent-ink); background: var(--accent-soft); } .ax-callout-success { color: var(--ok); background: var(--ok-bg); } .ax-callout a, .ax-callout strong { color: inherit; } .ax-actions { display: flex; flex-wrap: wrap; gap: var(--space-s); margin: var(--space-l) 0; } .article-prose .ax-btn { display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--tap); padding-inline: var(--space-l); font-weight: 700; text-decoration: none; border-radius: var(--radius-pill); } .article-prose .ax-btn-primary { color: var(--accent-text); background: var(--accent); } .article-prose .ax-btn-secondary { color: var(--text); background: var(--surface); border: var(--line) solid var(--border); } .article-prose .ax-btn:hover { filter: brightness(1.06); } .ax-divider { margin: var(--space-xl) 0; border: 0; border-block-start: var(--line) solid var(--border); } .ax-faq { display: grid; margin: var(--space-l) 0; border-block: var(--line) solid var(--border); } .ax-faq-item + .ax-faq-item { border-block-start: var(--line) solid var(--separator); } .ax-faq-q { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space); padding-block: var(--space); cursor: pointer; list-style: none; } .ax-faq-q::-webkit-details-marker { display: none; } .ax-faq-q::after { content: "+"; color: var(--accent-ink); font-size: var(--step-1); font-weight: 600; } .ax-faq-item[open] .ax-faq-q::after { content: "\2212"; } .article-prose .ax-faq-q h3 { margin: 0; font-size: var(--step-base); line-height: 1.35; } .ax-faq-a { padding-block-end: var(--space); } .ax-cols { display: grid; gap: var(--space-l); margin: var(--space-l) 0; } .ax-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ax-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ax-col > :first-child { margin-block-start: 0; } .ax-grid-2, .ax-grid-3 { display: grid; gap: var(--space-m); margin: var(--space-l) 0; } .ax-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ax-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ax-card { display: grid; align-content: start; gap: var(--space-s); min-inline-size: 0; padding: var(--space-m); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-xl); } .ax-card > * { margin: 0; } .ax-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--space) * 10), 1fr)); gap: var(--space); margin: var(--space-l) 0; } .ax-stats > div { display: grid; gap: var(--space-xs); padding: var(--space-m); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-xl); } .ax-stats dt { order: 2; color: var(--text-2); font-size: var(--step-small); } .ax-stats dd { order: 1; margin: 0; font: 700 var(--stat-size)/1 var(--article-font-heading, var(--font-display)); color: var(--accent-ink); } .ax-box { margin: var(--space-l) 0; padding: var(--space-m); background: var(--accent-50); border-radius: var(--radius-xl); } .ax-box > :last-child { margin-block-end: 0; } .ax-lead { font-size: var(--step-1); line-height: 1.5; } .ax-muted { color: var(--text-2); } .ax-center { text-align: center; } .ax-badge { display: inline-block; padding: var(--space-2xs) var(--space-s); font-size: var(--step-caption); font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); border-radius: var(--radius-pill); } .ax-details { margin: var(--space) 0; padding: var(--space-s) var(--space); background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-l); } .ax-details summary { display: flex; align-items: center; min-block-size: calc(var(--tap) * 0.85); font-weight: 700; cursor: pointer; } .m-arts { display: none; } .m-arts-new, .m-arts-fonts { display: none; } .m-arts-new { display: none; } .m-arts-fonts { display: none; } .m-arts-list { display: none; } .m-arts-card { display: none; } .m-arts-thumb { display: none; } .m-arts-body { display: none; } .m-arts-title { display: none; } .m-arts-meta { display: none; } .m-arts-view { display: none; } .m-fonts { display: none; } .m-font-card { display: none; } .m-font-name { display: none; } .m-font-name span { display: none; } .m-font-sample { display: none; } .m-revs { display: none; } .m-revs-card { display: none; } .m-revs-when, .m-revs-title, .m-revs-meta { display: none; } .m-revs-when { display: none; } .m-revs-when span, .m-revs-meta { display: none; } .m-revs-title { display: none; } .m-revs-form { display: none; } button.m-revs-restore { display: none; } .m-editor { display: none; } .m-ed-title { display: none; } .m-ed-title:focus-visible { display: none; } .m-ed-canvas { display: none; } .m-ed-canvas[data-empty]:not([data-empty=""])::before { display: none; } .m-ed-block { display: none; } .m-ed-block:focus-within { display: none; } .m-ed-block.is-dragging { display: none; } .m-ed-block-bar { display: none; } .m-ed-block-kind { display: none; } .m-ed-block-kind .icon { display: none; } .m-ed-block-tools { display: none; } .m-ed-block-body { display: none; } .m-ed-tool { display: none; } .m-ed-tool:hover { display: none; } .m-ed-toolbar { display: none; } .m-ed-rich-wrap { display: none; } .m-ed-rich { display: none; } .m-ed-rich:focus-visible { display: none; } .m-ed-rich p, .m-ed-rich ul, .m-ed-rich ol, .m-ed-rich blockquote { display: none; } .m-ed-rich h3, .m-ed-rich h4 { display: none; } .m-ed-rich a { display: none; } .m-ed-rich blockquote { display: none; } .m-ed-rich table { display: none; } .m-ed-rich th, .m-ed-rich td { display: none; } .m-ed-field { display: none; } .m-ed-label { display: none; } .m-ed-hint { display: none; } .m-ed-input { display: none; } .m-ed-input:focus-visible { display: none; } .m-ed-area { display: none; } .m-ed-code { display: none; } .m-ed-heading-input { display: none; } .m-ed-count { display: none; } .m-ed-count[data-state="bad"] { display: none; } .m-ed-count[data-state="ok"] { display: none; } .m-ed-slug { display: none; } .m-ed-slug-prefix { display: none; } .m-ed-slug .m-ed-input { display: none; } .m-ed-row { display: none; } .m-ed-grow { display: none; } .m-ed-stack { display: none; } .m-ed-segment { display: none; } .m-ed-segment-option { display: none; } .m-ed-segment-option input { display: none; } .m-ed-segment-option span { display: none; } .m-ed-segment-option input:checked + span { display: none; } .m-ed-segment-option input:focus-visible + span { display: none; } .m-ed-check { display: none; } .m-ed-ghost { display: none; } .m-ed-ghost:hover { display: none; } .m-ed-ghost .icon, .m-ed-add-item .icon, .m-ed-bar-add .icon { display: none; } .m-ed-divider { display: none; } .m-ed-detected { display: none; } .m-ed-image-frame, .m-ed-cover-frame { display: none; } .m-ed-image-preview, .m-ed-cover-image { display: none; } .m-ed-image-empty, .m-ed-cover-empty { display: none; } .m-ed-cover { display: none; } .m-ed-library { display: none; } .m-ed-library::backdrop { display: none; } .m-ed-library-head { display: none; } .m-ed-library-title { display: none; } .m-ed-icon-button { display: none; } .m-ed-icon-button .icon { display: none; } .m-ed-upload { display: none; } .m-ed-upload-title { display: none; } .m-ed-file { display: none; } .m-ed-progress { display: none; } .m-ed-upload-status { display: none; } .m-ed-library-grid { display: none; } .m-ed-library-item { display: none; } .m-ed-library-item:hover, .m-ed-library-item:focus-visible { display: none; } .m-ed-library-image { display: none; } .m-ed-library-alt { display: none; } .m-ed-table-grid { display: none; } .m-ed-cell { display: none; } .m-ed-cell:focus-visible { display: none; } .m-ed-cell.is-head { display: none; } .m-ed-faq { display: none; } .m-ed-faq-item { display: none; } .m-ed-cols { display: none; } .m-ed-cols[data-count="3"] { display: none; } .m-ed-html-preview { display: none; } .m-ed-preview-problem { display: none; } .m-ed-add { display: none; } .m-ed-add-title { display: none; } .m-ed-add-grid { display: none; } .m-ed-add-item { display: none; } .m-ed-add-item:hover, .m-ed-add-item:focus-visible { display: none; } .m-ed-add-text { display: none; } .m-ed-add-text strong { display: none; } .m-ed-add-text span { display: none; } .m-ed-card { display: none; } .m-ed-card-title { display: none; } .m-ed-card-summary { display: none; } .m-ed-switch { display: none; } .m-ed-switch input { display: none; } .m-ed-switch-track { display: none; } .m-ed-switch-track::after { display: none; } .m-ed-switch input:checked + .m-ed-switch-track { display: none; } .m-ed-switch input:checked + .m-ed-switch-track::after { display: none; } .m-ed-switch input:focus-visible + .m-ed-switch-track { display: none; } .m-ed-switch-label { display: none; } .m-ed-actions { display: none; } button.m-ed-save, button.m-ed-save-preview, button.m-ed-primary { display: none; } button.m-ed-save-preview { display: none; } .m-ed-primary { display: none; } .m-ed-status { display: none; } .m-ed-css-result { display: none; } .m-ed-css-ok { display: none; } .m-ed-css-bad { display: none; } .m-ed-css-wait { display: none; } .m-ed-font-sample { display: none; } .m-ed-problems { display: none; } .m-ed-problems-title { display: none; } .m-ed-problems ul { display: none; } .m-ed-delete { display: none; } button.m-ed-danger { display: none; } .m-ed-danger-zone { display: none; } .m-ed-blocks-out { display: none; } .m-ed-tabs { display: none; } .m-ed-tab { display: none; } .m-ed-tab[aria-selected="true"] { display: none; } .m-ed-panel { display: none; } .m-ed-bar { display: none; } .m-ed-bar-add { display: none; } .d-arts { display: grid; gap: var(--space); } .d-arts-bar { display: flex; flex-wrap: wrap; gap: var(--space-s); } .d-arts-new, .d-arts-fonts { display: inline-flex; align-items: center; gap: var(--space-xs); min-block-size: var(--tap); padding-inline: var(--space) var(--space-m); font-weight: 700; text-decoration: none; border-radius: var(--radius-pill); } .d-arts-new { color: var(--accent-text); background: var(--accent); } .d-arts-fonts { color: var(--text); background: var(--surface); border: var(--line) solid var(--border); } .d-arts-list { display: grid; margin: 0; padding: 0; list-style: none; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--card-shadow); } .d-arts-item { display: grid; grid-template-columns: var(--ed-thumb) minmax(0, 3fr) minmax(0, 1.2fr) minmax(0, 1.2fr) auto; align-items: center; gap: var(--space); padding: var(--space-s) var(--space); } .d-arts-item + .d-arts-item { border-block-start: var(--line) solid var(--separator); } .d-arts-thumb { inline-size: var(--ed-thumb); aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s); background: var(--fill); } .d-arts-main { display: grid; gap: var(--space-2xs); min-inline-size: 0; } .d-arts-title { color: var(--text); font-weight: 700; line-height: 1.3; text-decoration: none; } .d-arts-title:hover { color: var(--accent-ink); text-decoration: underline; } .d-arts-path { color: var(--text-2); font: var(--step-caption)/1.3 var(--font-mono); overflow-wrap: anywhere; } .d-arts-sphere { color: var(--text-2); font-size: var(--step-small); } .d-arts-state { display: grid; justify-items: start; gap: var(--space-2xs); } .d-arts-when { color: var(--text-2); font-size: var(--step-caption); } .d-arts-actions { display: flex; gap: var(--space-xs); } .d-arts-edit, .d-arts-view { display: inline-flex; align-items: center; min-block-size: calc(var(--tap) * 0.8); padding-inline: var(--space); font-size: var(--step-small); font-weight: 700; text-decoration: none; border-radius: var(--radius-pill); } .d-arts-edit { color: var(--accent-text); background: var(--accent); } .d-arts-view { color: var(--text); background: var(--fill); } .d-fonts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space); margin: 0; padding: 0; list-style: none; } .d-font-card { display: grid; gap: var(--space-xs); padding: var(--space-m); background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--card-shadow); } .d-font-name { display: grid; gap: var(--space-2xs); margin: 0; } .d-font-name span { color: var(--text-2); font-size: var(--step-caption); } .d-font-sample { margin: 0; font-size: var(--step-2); line-height: 1.3; overflow-wrap: anywhere; } .d-revs { display: grid; margin: 0; padding: 0; list-style: none; background: var(--surface); border-radius: var(--radius-xl); box-shadow: var(--card-shadow); } .d-revs-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) minmax(0, 1fr) auto; align-items: center; gap: var(--space); padding: var(--space-s) var(--space); } .d-revs-row + .d-revs-row { border-block-start: var(--line) solid var(--separator); } .d-revs-when { display: grid; gap: var(--space-2xs); } .d-revs-when span, .d-revs-meta { color: var(--text-2); font-size: var(--step-caption); } .d-revs-title { font-weight: 600; } .d-revs-form { margin: 0; } button.d-revs-restore { display: inline-flex; align-items: center; justify-content: center; inline-size: auto; min-block-size: calc(var(--tap) * 0.85); margin: 0; padding-inline: var(--space); font-size: var(--step-small); color: var(--text); background: var(--fill); border-radius: var(--radius-pill); } .d-editor { display: grid; gap: var(--space); } .d-ed-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--ed-side); align-items: start; gap: var(--space-l); } .d-ed-main { display: grid; gap: var(--space); min-inline-size: 0; } .d-ed-side { display: grid; align-content: start; gap: var(--space-s); min-inline-size: 0; } .d-ed-publish { position: sticky; inset-block-start: var(--contact-sticky); z-index: 1; } .d-ed-title { inline-size: 100%; min-block-size: calc(var(--step-4) * 1.4); margin: 0; padding: var(--space-s) 0; font: 700 var(--step-4)/1.15 var(--font-display); letter-spacing: -0.01em; color: var(--text); background: none; border: 0; border-block-end: var(--line) solid var(--border); resize: none; overflow-y: hidden; } .d-ed-title:focus-visible { outline: none; border-block-end-color: var(--accent); } .d-ed-canvas { display: grid; gap: var(--space-s); min-inline-size: 0; } .d-ed-canvas[data-empty]:not([data-empty=""])::before { content: attr(data-empty); padding: var(--space-m); color: var(--text-2); text-align: center; background: var(--fill); border-radius: var(--radius-l); } .d-ed-block { display: grid; min-inline-size: 0; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius-l); box-shadow: var(--card-shadow); } .d-ed-block:focus-within { border-color: var(--accent-line); } .d-ed-block.is-dragging { opacity: var(--drag-opacity); } .d-ed-block-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space); border-block-end: var(--line) solid var(--separator); cursor: grab; } .d-ed-block-kind { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--text-2); font-size: var(--step-caption); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .d-ed-block-kind .icon { inline-size: var(--icon); block-size: var(--icon); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .d-ed-block-tools { display: flex; gap: var(--space-2xs); } .d-ed-block-body { display: grid; gap: var(--space-s); min-inline-size: 0; padding: var(--space); } .d-ed-tool { display: inline-grid; place-items: center; min-inline-size: var(--ed-tool); min-block-size: var(--ed-tool); margin: 0; padding: 0 var(--space-xs); font: 700 var(--step-small)/1 var(--font-body); color: var(--text); background: none; border: 0; border-radius: var(--radius-s); cursor: pointer; } .d-ed-tool:hover { background: var(--fill); } .d-ed-toolbar { display: flex; flex-wrap: wrap; gap: var(--space-2xs); padding: var(--space-2xs); background: var(--panel-glass-bg); -webkit-backdrop-filter: var(--panel-glass-blur); backdrop-filter: var(--panel-glass-blur); border-block-end: var(--line) solid var(--panel-glass-edge); border-radius: var(--radius) var(--radius) 0 0; } .d-ed-rich-wrap { display: grid; min-inline-size: 0; border: var(--line) solid var(--border); border-radius: var(--radius); } .d-ed-rich { min-block-size: var(--ed-rich-min); padding: var(--space-s) var(--space); line-height: 1.6; overflow-wrap: anywhere; font-family: var(--font-body); outline: none; } .d-ed-rich:focus-visible { box-shadow: inset 0 0 0 var(--focus-ring) var(--accent-line); } .d-ed-rich p, .d-ed-rich ul, .d-ed-rich ol, .d-ed-rich blockquote { margin: 0 0 var(--space-s); } .d-ed-rich h3, .d-ed-rich h4 { margin: var(--space) 0 var(--space-xs); font-family: var(--font-display); } .d-ed-rich a { color: var(--accent-ink); } .d-ed-rich blockquote { padding-inline-start: var(--space); border-inline-start: var(--focus-ring) solid var(--border); } .d-ed-rich table { inline-size: 100%; border-collapse: collapse; } .d-ed-rich th, .d-ed-rich td { padding: var(--space-2xs) var(--space-xs); border: var(--line) solid var(--border); overflow-wrap: anywhere; } .d-ed-field { display: grid; gap: var(--space-2xs); min-inline-size: 0; margin: 0; padding: 0; border: 0; } .d-ed-label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs); margin: 0; color: var(--text); font-size: var(--step-small); font-weight: 600; } .d-ed-hint { margin: 0; color: var(--text-2); font-size: var(--step-caption); line-height: 1.4; } .d-ed-input { inline-size: 100%; min-block-size: var(--tap); margin: 0; padding: var(--space-xs) var(--space-s); font: inherit; font-size: var(--step-small); color: var(--text); background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius-s); } .d-ed-input:focus-visible { border-color: var(--accent-line); } .d-ed-area { resize: vertical; line-height: 1.5; } .d-ed-code { min-block-size: var(--ed-code-min); font: var(--step-small)/1.55 var(--font-mono); tab-size: 2; resize: vertical; white-space: pre-wrap; overflow-wrap: anywhere; } .d-ed-heading-input { font: 700 var(--step-1)/1.3 var(--font-display); } .d-ed-count { color: var(--text-2); font-size: var(--step-caption); font-weight: 500; } .d-ed-count[data-state="bad"] { color: var(--error); } .d-ed-count[data-state="ok"] { color: var(--ok); } .d-ed-slug { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; background: var(--bg); border: var(--line) solid var(--border); border-radius: var(--radius-s); } .d-ed-slug-prefix { padding-inline: var(--space-s) 0; color: var(--text-2); font: var(--step-caption)/1 var(--font-mono); } .d-ed-slug .d-ed-input { border: 0; background: none; font-family: var(--font-mono); } .d-ed-row { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-s); } .d-ed-grow { flex: 1 1 calc(var(--space) * 14); } .d-ed-stack { display: grid; gap: var(--space-s); min-inline-size: 0; } .d-ed-segment { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2xs); padding: var(--space-2xs); background: var(--fill); border-radius: var(--radius-s); } .d-ed-segment-option { position: relative; display: grid; margin: 0; font-weight: 600; } .d-ed-segment-option input { position: absolute; opacity: 0; inline-size: 100%; block-size: 100%; margin: 0; cursor: pointer; } .d-ed-segment-option span { display: grid; place-items: center; min-block-size: calc(var(--tap) * 0.75); padding-inline: var(--space-xs); font-size: var(--step-caption); text-align: center; border-radius: calc(var(--radius-s) - var(--space-2xs)); } .d-ed-segment-option input:checked + span { color: var(--text); background: var(--surface); box-shadow: var(--card-shadow); } .d-ed-segment-option input:focus-visible + span { outline: var(--focus-ring) solid var(--focus-color); } .d-ed-check { display: inline-flex; align-items: center; gap: var(--space-xs); margin: 0; font-size: var(--step-small); } .d-ed-ghost { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-block-size: calc(var(--tap) * 0.85); margin: 0; padding-inline: var(--space); font: inherit; font-size: var(--step-small); font-weight: 600; color: var(--text); background: var(--fill); border: 0; border-radius: var(--radius-pill); cursor: pointer; } .d-ed-ghost:hover { background: var(--accent-soft); } .d-ed-ghost .icon, .d-ed-add-item .icon, .d-ed-bar-add .icon { inline-size: var(--icon); block-size: var(--icon); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .d-ed-divider { margin: var(--space-s) 0; border: 0; border-block-start: var(--line) solid var(--border); } .d-ed-detected { margin: 0; color: var(--accent-ink); font-size: var(--step-caption); font-weight: 600; } .d-ed-image-frame, .d-ed-cover-frame { display: grid; place-items: center; min-block-size: calc(var(--space) * 8); overflow: hidden; background: var(--fill); border-radius: var(--radius); } .d-ed-image-preview, .d-ed-cover-image { inline-size: 100%; block-size: auto; border-radius: var(--radius); } .d-ed-image-empty, .d-ed-cover-empty { padding: var(--space); color: var(--text-2); font-size: var(--step-small); } .d-ed-cover { display: grid; gap: var(--space-s); } .d-ed-library { inline-size: min(100%, calc(var(--space) * 56)); max-inline-size: 100%; max-block-size: calc(100% - var(--space-xl)); margin: auto; padding: 0; color: var(--text); background: var(--bg); border: 0; border-radius: var(--radius-xl); box-shadow: var(--card-shadow); overflow-y: auto; } .d-ed-library::backdrop { background: var(--backdrop); } .d-ed-library-head { position: sticky; inset-block-start: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--space); padding: var(--space-s) var(--space); background: var(--bg); border-block-end: var(--line) solid var(--separator); } .d-ed-library-title { margin: 0; font: 700 var(--step-1)/1.2 var(--font-display); } .d-ed-icon-button { display: grid; place-items: center; inline-size: var(--tap); block-size: var(--tap); margin: 0; padding: 0; color: var(--text); background: var(--fill); border: 0; border-radius: 50%; cursor: pointer; } .d-ed-icon-button .icon { inline-size: var(--icon); block-size: var(--icon); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } .d-ed-upload { display: grid; gap: var(--space-xs); margin: var(--space); padding: var(--space); background: var(--surface); border-radius: var(--radius-l); } .d-ed-upload-title { margin: 0; font-weight: 700; } .d-ed-file { inline-size: 100%; font: inherit; font-size: var(--step-small); } .d-ed-progress { inline-size: 100%; block-size: var(--space-s); accent-color: var(--accent); } .d-ed-upload-status { margin: 0; font-size: var(--step-small); font-weight: 600; } .d-ed-library-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--ed-library-min), 1fr)); gap: var(--space-s); margin: 0; padding: 0 var(--space) var(--space); list-style: none; } .d-ed-library-item { display: grid; gap: var(--space-2xs); inline-size: 100%; margin: 0; padding: var(--space-2xs); font: inherit; color: var(--text); text-align: start; background: var(--surface); border: var(--line) solid var(--border); border-radius: var(--radius); cursor: pointer; } .d-ed-library-item:hover, .d-ed-library-item:focus-visible { border-color: var(--accent); } .d-ed-library-image { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--radius) - var(--space-2xs)); } .d-ed-library-alt { font-size: var(--step-caption); line-height: 1.3; color: var(--text-2); overflow-wrap: anywhere; } .d-ed-table-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: var(--line); padding: var(--line); background: var(--border); border-radius: var(--radius-s); } .d-ed-cell { min-block-size: var(--tap); padding: var(--space-xs); font-size: var(--step-small); line-height: 1.4; overflow-wrap: anywhere; background: var(--surface); outline: none; } .d-ed-cell:focus-visible { box-shadow: inset 0 0 0 var(--focus-ring) var(--accent-line); } .d-ed-cell.is-head { font-weight: 700; background: var(--fill); } .d-ed-faq { display: grid; gap: var(--space-s); } .d-ed-faq-item { display: grid; gap: var(--space-xs); padding: var(--space-s); background: var(--bg); border-radius: var(--radius); } .d-ed-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-s); } .d-ed-cols[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .d-ed-html-preview { min-block-size: calc(var(--space) * 4); padding: var(--space); background: var(--bg); border: var(--line) dashed var(--border); border-radius: var(--radius); overflow-wrap: anywhere; } .d-ed-preview-problem { margin: 0; color: var(--error); } .d-ed-add { display: grid; gap: var(--space-s); padding: var(--space); background: var(--surface); border: var(--line) dashed var(--border); border-radius: var(--radius-l); } .d-ed-add-title { margin: 0; font-weight: 700; } .d-ed-add-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--space) * 13), 1fr)); gap: var(--space-xs); margin: 0; padding: 0; list-style: none; } .d-ed-add-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--space-xs); inline-size: 100%; min-block-size: var(--tap); margin: 0; padding: var(--space-xs) var(--space-s); font: inherit; color: var(--text); text-align: start; background: var(--bg); border: var(--line) solid transparent; border-radius: var(--radius); cursor: pointer; } .d-ed-add-item:hover, .d-ed-add-item:focus-visible { border-color: var(--accent-line); background: var(--accent-50); } .d-ed-add-text { display: grid; min-inline-size: 0; } .d-ed-add-text strong { font-size: var(--step-small); } .d-ed-add-text span { color: var(--text-2); font-size: var(--step-caption); line-height: 1.3; } .d-ed-card { display: grid; gap: var(--space-s); min-inline-size: 0; margin: 0; padding: var(--space); background: var(--surface); border-radius: var(--radius-l); box-shadow: var(--card-shadow); } .d-ed-card-title { margin: 0; font: 700 var(--step-base)/1.3 var(--font-display); } .d-ed-card-summary { font-weight: 700; cursor: pointer; } .d-ed-switch { position: relative; display: grid; grid-template-columns: var(--switch-w) minmax(0, 1fr); align-items: center; gap: var(--space-s); margin: 0; cursor: pointer; } .d-ed-switch input { position: absolute; opacity: 0; inline-size: var(--switch-w); block-size: var(--switch-h); margin: 0; } .d-ed-switch-track { position: relative; inline-size: var(--switch-w); block-size: var(--switch-h); background: var(--switch-off); border-radius: var(--radius-pill); transition: background var(--dur-fast) var(--ease-out); } .d-ed-switch-track::after { content: ""; position: absolute; inset-block-start: calc((var(--switch-h) - var(--knob-size)) / 2); inset-inline-start: calc((var(--switch-h) - var(--knob-size)) / 2); inline-size: var(--knob-size); block-size: var(--knob-size); background: var(--knob); border-radius: 50%; box-shadow: var(--knob-shadow); transition: transform var(--dur-fast) var(--ease-spring); } .d-ed-switch input:checked + .d-ed-switch-track { background: var(--switch-on); } .d-ed-switch input:checked + .d-ed-switch-track::after { transform: translateX(calc(var(--switch-w) - var(--switch-h))); } .d-ed-switch input:focus-visible + .d-ed-switch-track { outline: var(--focus-ring) solid var(--focus-color); outline-offset: calc(var(--focus-ring) / 1.5); } .d-ed-switch-label { font-weight: 700; } .d-ed-actions { display: grid; gap: var(--space-xs); } button.d-ed-save, button.d-ed-save-preview, button.d-ed-primary { display: flex; align-items: center; justify-content: center; inline-size: 100%; min-block-size: var(--tap); margin: 0; padding-inline: var(--space); font-weight: 700; color: var(--accent-text); background: var(--accent); border: 0; border-radius: var(--radius-pill); } button.d-ed-save-preview { color: var(--text); background: var(--fill); } .d-ed-primary { cursor: pointer; } .d-ed-status { min-block-size: 1.2em; margin: 0; color: var(--accent-ink); font-size: var(--step-caption); font-weight: 600; } .d-ed-css-result { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; list-style: none; font-size: var(--step-caption); } .d-ed-css-ok { color: var(--ok); font-weight: 600; } .d-ed-css-bad { padding: var(--space-2xs) var(--space-xs); color: var(--error); background: var(--error-bg); border-radius: var(--radius-s); } .d-ed-css-wait { color: var(--text-2); } .d-ed-font-sample { margin: 0; padding: var(--space-xs) var(--space-s); font-size: var(--step-1); line-height: 1.3; background: var(--fill); border-radius: var(--radius-s); overflow-wrap: anywhere; } .d-ed-problems { display: grid; gap: var(--space-2xs); padding: var(--space) var(--space-m); color: var(--error); background: var(--error-bg); border-radius: var(--radius-l); } .d-ed-problems-title { margin: 0; font-weight: 700; } .d-ed-problems ul { margin: 0; padding-inline-start: var(--space); } .d-ed-delete { display: grid; gap: var(--space-xs); margin: 0; } button.d-ed-danger { display: flex; align-items: center; justify-content: center; inline-size: auto; justify-self: start; min-block-size: var(--tap); margin: 0; padding-inline: var(--space-m); font-weight: 700; color: var(--error); background: var(--error-bg); border: 0; border-radius: var(--radius-pill); } .d-ed-danger-zone { border: var(--line) solid var(--error-bg); } .d-ed-blocks-out { display: none; } } /* ---- 6. Motion (shared; all disabled for prefers-reduced-motion) -------- */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur); } @starting-style { .sheet[open] { transform: translateY(100%); } .sheet[open]::backdrop { background: transparent; } .mega:popover-open { opacity: 0; transform: translateY(calc(var(--space-s) * -1)) scale(0.98); } .m-consent[open] { transform: translateY(calc(100% + var(--space-xl))); } .d-consent[open] { opacity: 0; transform: translateY(var(--space)) scale(0.98); } .m-consent[open]::backdrop, .d-consent[open]::backdrop { background: transparent; } } @keyframes kb-zoom-in { from { transform: scale(1); } to { transform: scale(1.09); } } @keyframes kb-zoom-out { from { transform: scale(1.12); } to { transform: scale(1); } } @keyframes kb-pan-left { from { transform: scale(1.1) translateX(2.5%); } to { transform: scale(1.1) translateX(-2.5%); } } @keyframes kb-pan-right { from { transform: scale(1.1) translateX(-2.5%); } to { transform: scale(1.1) translateX(2.5%); } } @keyframes rise { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } } @keyframes dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .slider.is-enhanced .slide.is-active .slide-image { animation: kb-zoom-in calc(var(--slide-duration) + 2s) linear both; } .slider.is-enhanced .motion-zoom-out.is-active .slide-image { animation-name: kb-zoom-out; } .slider.is-enhanced .motion-pan-left.is-active .slide-image { animation-name: kb-pan-left; } .slider.is-enhanced .motion-pan-right.is-active .slide-image { animation-name: kb-pan-right; } .slider.is-enhanced .slide.is-active .slide-caption > * { animation: rise 0.7s var(--ease-out) both; } .slider.is-enhanced .slide.is-active .slide-caption > :nth-child(2) { animation-delay: 0.08s; } .slider.is-enhanced .slide.is-active .slide-caption > :nth-child(3) { animation-delay: 0.16s; } .slider.is-enhanced .slide.is-active .slide-caption > :nth-child(4) { animation-delay: 0.24s; } .slider.is-enhanced .slider-dot.is-active .slider-dot-fill { animation: dot-fill var(--slide-duration) linear both; } .slider.is-paused .slide.is-active .slide-image { animation-play-state: paused; } @media (hover: hover) { .d-notfound-link:hover { background: var(--glass-selected); } .d-notfound-link:hover .icon-go-d { transform: translateX(var(--space-2xs)); } .d-crumbs-link:hover { text-decoration: underline; } .button:hover, button[type="submit"]:hover, .desk-cta:hover, .slide-button:hover { background: var(--accent-hover); filter: none; } .feature-card.is-linked:hover .more { text-decoration-color: var(--accent); } .feature-card.is-linked:hover .more .icon, .more-link:hover .icon { transform: translateX(var(--space-2xs)); } .more-link:hover { color: var(--accent-ink-hover); } .d-table tbody tr:hover { background: var(--glass-selected); } .d-feature:hover { transform: translateY(calc(var(--space-xs) * -1)); box-shadow: var(--glass-shadow); } .feature-card:hover { transform: translateY(calc(var(--space-xs) * -1)); box-shadow: var(--glass-shadow); } .slide-button:hover .icon { transform: translateX(var(--space-2xs)); } .desk-group:hover .icon-chevron { transform: translateY(var(--space-2xs)); } } :root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } } /* ---- 7. State colours (tokens only, same meaning on every device) ------ */ .notice-error { background: var(--error-bg); color: var(--error); } .notice-success { background: var(--ok-bg); color: var(--ok); } .notice-info { background: var(--info-bg); color: var(--info); } .status-new { background: var(--accent); color: var(--accent-text); } .status-read { background: var(--info-bg); color: var(--info); } .status-answered { background: var(--ok-bg); color: var(--ok); } .status-closed { background: var(--fill); color: var(--text-2); } .admin-dot.is-ok { background: var(--ok); } .admin-dot.is-bad { background: var(--error); } /* Footer accordion reveal (mobile); the reduced-motion switch above turns animations off. */ @keyframes footer-reveal { from { opacity: 0; transform: translateY(calc(var(--space-xs) * -1)); } to { opacity: 1; transform: none; } }