/* ========================================================================== Paradigm — the admin design system for the Aednan companies. Tokens are derived from the Aednan design system (aednan/designsystem): Kol/Panel/Papper for the dark theme, Newsreader + Inter, the 4–64 px spacing scale, 2 px corners and hairline borders instead of shadows. - Everything is prefixed: tokens `--p-*`, classes `.p-*`, so this file can sit next to antd-*.css without either touching the other. Base element styles only apply under `.p-root` (put it on ). - Per-company accent: the shell prints App\Libraries\UiAccent::style($hex) on , e.g. . Never add CSS per company. - Theme: follows the OS; `data-theme="light|dark"` on forces one. `data-theme` also works on any element, scoping that theme to a subtree. - The light and dark colour blocks are pinned by tests/unit/UiThemeTest.php (WCAG AA contrast, and the two dark blocks must stay identical). ========================================================================== */ /* ---------- Fonts (self-hosted, variable, same files as the Aednan design system) ---------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/paradigm/inter-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/paradigm/inter-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('../fonts/paradigm/newsreader-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 300 500; font-display: swap; src: url('../fonts/paradigm/newsreader-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Tokens: theme-independent ---------- */ :root { /* Accent — defaults are UiAccent::derive(UiAccent::DEFAULT), Aednan "Brons". The shell overrides all five from company config via UiAccent::style(). */ --accent: #b99056; --accent-hover: #c6a474; --on-accent: #110c0a; --accent-ink: #7a5f39; --accent-ink-dark: #b99056; /* Type */ --p-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --p-font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --p-font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace; --p-text-xs: 0.75rem; /* 12 — badges, table headings, captions */ --p-text-sm: 0.8125rem; /* 13 — labels, hints, breadcrumbs, meta */ --p-text-md: 0.875rem; /* 14 — body, controls, table cells (base) */ --p-text-lg: 1rem; /* 16 — card titles, empty-state titles */ --p-text-xl: 1.25rem; /* 20 — section headings */ --p-text-2xl: 1.75rem; /* 28 — page title (display face) */ --p-text-3xl: 2.25rem; /* 36 — rare, display only */ --p-leading-tight: 1.25; --p-leading: 1.5; --p-weight-regular: 400; --p-weight-medium: 500; --p-weight-semibold: 600; --p-tracking-caps: 0.06em; /* Aednan eyebrow tracking for uppercase labels */ /* Space — the Aednan scale */ --p-space-1: 4px; --p-space-2: 8px; --p-space-3: 12px; --p-space-4: 16px; --p-space-5: 24px; --p-space-6: 32px; --p-space-7: 48px; --p-space-8: 64px; /* Radius — Aednan corners are crisp */ --p-radius-sm: 2px; --p-radius: 2px; --p-radius-lg: 4px; --p-radius-pill: 999px; /* Sizes */ --p-control-h: 36px; --p-control-h-sm: 30px; --p-gutter: 16px; --p-content-max: 1200px; --p-duration: 120ms; } /* ---------- Tokens: light theme (default) ---------- */ :root, [data-theme="light"] { color-scheme: light; --p-bg: #f4f1ec; /* warm paper */ --p-surface: #fdfcfa; /* cards, header bar */ --p-surface-sunken: #efebe4; /* table heads, hover, code */ --p-field-bg: #ffffff; --p-ink: #1a1513; /* headings, strong text */ --p-body: #3a3430; /* running text */ --p-muted: #6a625b; /* labels, hints, meta */ --p-border: #e3ddd4; /* hairlines (decorative) */ --p-border-strong: #8c837a; /* field and control edges (3:1) */ --p-success: #2e6b3c; --p-warning: #8a5300; --p-danger: #a3342b; --p-info: #2e5f88; --p-danger-fill: #a3342b; /* danger button, white label */ --p-accent-text: var(--accent-ink); --p-shadow-sm: 0 1px 2px rgb(26 21 19 / 0.06); --p-shadow-md: 0 6px 20px rgb(26 21 19 / 0.10); } /* ---------- Tokens: dark theme — Aednan Kol/Panel/Papper ---------- Two blocks with identical declarations (OS preference, forced). UiThemeTest fails if they drift apart. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --p-bg: #110c0a; --p-surface: #1a1513; --p-surface-sunken: #221c19; --p-field-bg: #110c0a; --p-ink: #f2eee7; --p-body: #c8c3bd; --p-muted: #9a948e; --p-border: #322c2a; --p-border-strong: #766e68; --p-success: #86c994; --p-warning: #e0b35f; --p-danger: #f0968b; --p-info: #8fbbe0; --p-danger-fill: #a3342b; --p-accent-text: var(--accent-ink-dark); --p-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --p-shadow-md: 0 8px 24px rgb(0 0 0 / 0.5); } } [data-theme="dark"] { color-scheme: dark; --p-bg: #110c0a; --p-surface: #1a1513; --p-surface-sunken: #221c19; --p-field-bg: #110c0a; --p-ink: #f2eee7; --p-body: #c8c3bd; --p-muted: #9a948e; --p-border: #322c2a; --p-border-strong: #766e68; --p-success: #86c994; --p-warning: #e0b35f; --p-danger: #f0968b; --p-info: #8fbbe0; --p-danger-fill: #a3342b; --p-accent-text: var(--accent-ink-dark); --p-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --p-shadow-md: 0 8px 24px rgb(0 0 0 / 0.5); } /* ---------- Derived tokens ---------- Declared on every theme scope so color-mix() resolves against that scope's colours, not the root's. Tint strength matches UiAccent::TINT_PERCENT. */ :root, [data-theme] { --p-accent-soft: color-mix(in srgb, var(--accent) 14%, var(--p-surface)); --p-accent-line: color-mix(in srgb, var(--accent) 45%, var(--p-surface)); --p-focus: var(--p-accent-text); --p-success-bg: color-mix(in srgb, var(--p-success) 12%, var(--p-surface)); --p-warning-bg: color-mix(in srgb, var(--p-warning) 12%, var(--p-surface)); --p-danger-bg: color-mix(in srgb, var(--p-danger) 12%, var(--p-surface)); --p-info-bg: color-mix(in srgb, var(--p-info) 12%, var(--p-surface)); --p-success-line: color-mix(in srgb, var(--p-success) 40%, var(--p-surface)); --p-warning-line: color-mix(in srgb, var(--p-warning) 40%, var(--p-surface)); --p-danger-line: color-mix(in srgb, var(--p-danger) 40%, var(--p-surface)); --p-info-line: color-mix(in srgb, var(--p-info) 40%, var(--p-surface)); } /* A themed subtree paints its own background, so a dark panel is dark. */ [data-theme]:not(:root) { background: var(--p-bg); color: var(--p-body); } /* ========================================================================== Base — only under .p-root, so legacy pages are untouched. ========================================================================== */ .p-root { background: var(--p-bg); color: var(--p-body); font-family: var(--p-font-ui); font-size: var(--p-text-md); line-height: var(--p-leading); -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; /* Inter: single-storey a off, open digits */ } .p-root body { margin: 0; background: var(--p-bg); } .p-root *, .p-root *::before, .p-root *::after { box-sizing: border-box; } .p-root h1, .p-root h2, .p-root h3, .p-root h4 { color: var(--p-ink); margin: 0; line-height: var(--p-leading-tight); } .p-root p { margin: 0; } .p-root a { color: var(--p-accent-text); text-underline-offset: 2px; } .p-root a:hover { text-decoration-thickness: 2px; } .p-root code { font-family: var(--p-font-mono); font-size: 0.92em; background: var(--p-surface-sunken); padding: 1px 5px; border-radius: var(--p-radius-sm); color: var(--p-ink); } .p-root :focus-visible { outline: 2px solid var(--p-focus); outline-offset: 2px; } .p-root ::selection { background: var(--p-accent-soft); color: var(--p-ink); } /* ---------- Layout primitives ---------- */ .p-page { max-width: var(--p-content-max); margin: 0 auto; padding: var(--p-space-5) var(--p-gutter) var(--p-space-8); } .p-stack { display: flex; flex-direction: column; gap: var(--p-space-4); } .p-stack--lg { gap: var(--p-space-6); } .p-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--p-space-2); } .p-grid { display: grid; gap: var(--p-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } .p-grid > * { min-width: 0; } .p-section-title { font-size: var(--p-text-xs); font-weight: var(--p-weight-semibold); letter-spacing: var(--p-tracking-caps); text-transform: uppercase; color: var(--p-muted); } .p-text-muted { color: var(--p-muted); } .p-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (min-width: 768px) { :root { --p-gutter: 24px; } } /* ---------- Brand (company logo or monogram) ---------- */ .p-brand { display: inline-flex; align-items: center; gap: var(--p-space-3); color: var(--p-ink); text-decoration: none; min-width: 0; } .p-brand__logo { height: 28px; width: auto; display: block; } .p-brand__mark { width: 28px; height: 28px; flex: none; display: inline-grid; place-items: center; background: var(--accent); color: var(--on-accent); border-radius: var(--p-radius); font-family: var(--p-font-display); font-weight: var(--p-weight-medium); font-size: 17px; } .p-brand__name { font-family: var(--p-font-display); font-size: var(--p-text-xl); font-weight: var(--p-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ========================================================================== Page header ========================================================================== */ .p-page-header { display: flex; flex-direction: column; gap: var(--p-space-2); padding-bottom: var(--p-space-5); margin-bottom: var(--p-space-5); border-bottom: 1px solid var(--p-border); } .p-page-header__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--p-space-3) var(--p-space-5); } .p-page-header__heading { min-width: 0; flex: 1 1 320px; } .p-page-header__title { font-family: var(--p-font-display); font-weight: var(--p-weight-medium); font-size: var(--p-text-2xl); letter-spacing: -0.005em; color: var(--p-ink); overflow-wrap: anywhere; } .p-page-header__subtitle { margin-top: var(--p-space-1); color: var(--p-muted); font-size: var(--p-text-md); } .p-page-header__actions { display: flex; flex-wrap: wrap; gap: var(--p-space-2); } .p-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--p-space-1); margin: 0; padding: 0; font-size: var(--p-text-sm); color: var(--p-muted); } .p-breadcrumbs li { display: inline-flex; align-items: center; gap: var(--p-space-1); min-width: 0; } .p-breadcrumbs li + li::before { content: '/'; color: var(--p-border-strong); padding-right: var(--p-space-1); } .p-root .p-breadcrumbs a { color: var(--p-muted); text-decoration: none; } .p-root .p-breadcrumbs a:hover { color: var(--p-ink); text-decoration: underline; } .p-breadcrumbs [aria-current="page"] { color: var(--p-body); } /* ========================================================================== Button ========================================================================== */ .p-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--p-space-2); min-height: var(--p-control-h); padding: 0 var(--p-space-4); font-family: var(--p-font-ui); font-size: var(--p-text-md); font-weight: var(--p-weight-semibold); line-height: 1.2; text-decoration: none; white-space: nowrap; border: 1px solid transparent; border-radius: var(--p-radius); cursor: pointer; user-select: none; transition: background-color var(--p-duration), border-color var(--p-duration), color var(--p-duration); } .p-root a.p-btn { text-decoration: none; } .p-btn:focus-visible { outline: 2px solid var(--p-focus); outline-offset: 2px; } .p-btn--sm { min-height: var(--p-control-h-sm); padding: 0 var(--p-space-3); font-size: var(--p-text-sm); } .p-btn--block { display: flex; width: 100%; } .p-btn--primary, .p-root a.p-btn--primary { background: var(--accent); color: var(--on-accent); } .p-btn--primary:hover, .p-root a.p-btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); } .p-btn--secondary, .p-root a.p-btn--secondary { background: var(--p-surface); color: var(--p-ink); border-color: var(--p-border-strong); } .p-btn--secondary:hover, .p-root a.p-btn--secondary:hover { background: var(--p-surface-sunken); color: var(--p-ink); } .p-btn--danger, .p-root a.p-btn--danger { background: var(--p-danger-fill); color: #ffffff; } .p-btn--danger:hover, .p-root a.p-btn--danger:hover { background: color-mix(in srgb, var(--p-danger-fill) 86%, #000); color: #ffffff; } .p-btn--ghost, .p-root a.p-btn--ghost { background: transparent; color: var(--p-body); font-weight: var(--p-weight-medium); } .p-btn--ghost:hover, .p-root a.p-btn--ghost:hover { background: var(--p-surface-sunken); color: var(--p-ink); } .p-btn:disabled, .p-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ========================================================================== Card ========================================================================== */ .p-card { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: var(--p-radius-lg); min-width: 0; } .p-card__header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--p-space-2) var(--p-space-4); padding: var(--p-space-4) var(--p-space-5); border-bottom: 1px solid var(--p-border); } .p-card__heading { min-width: 0; } .p-card__title { font-size: var(--p-text-lg); font-weight: var(--p-weight-semibold); color: var(--p-ink); } .p-card__meta { margin-top: 2px; font-size: var(--p-text-sm); color: var(--p-muted); } .p-card__actions { display: flex; flex-wrap: wrap; gap: var(--p-space-2); } .p-card__body { padding: var(--p-space-5); } .p-card--flush > .p-card__body { padding: 0; } .p-card__footer { padding: var(--p-space-3) var(--p-space-5); border-top: 1px solid var(--p-border); font-size: var(--p-text-sm); color: var(--p-muted); } @media (max-width: 480px) { .p-card__header, .p-card__body, .p-card__footer { padding-left: var(--p-space-4); padding-right: var(--p-space-4); } } /* ========================================================================== Table — scrolls inside its own container, never the page ========================================================================== */ .p-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .p-table-wrap:focus-visible { outline: 2px solid var(--p-focus); outline-offset: -2px; } .p-table { width: 100%; border-collapse: collapse; font-size: var(--p-text-md); font-variant-numeric: tabular-nums; } .p-table caption { text-align: left; padding: var(--p-space-3) var(--p-space-4); font-size: var(--p-text-sm); color: var(--p-muted); } .p-table th { text-align: left; white-space: nowrap; padding: var(--p-space-2) var(--p-space-4); background: var(--p-surface-sunken); color: var(--p-muted); font-size: var(--p-text-xs); font-weight: var(--p-weight-semibold); letter-spacing: var(--p-tracking-caps); text-transform: uppercase; border-bottom: 1px solid var(--p-border); } .p-table td { padding: var(--p-space-3) var(--p-space-4); border-bottom: 1px solid var(--p-border); color: var(--p-body); vertical-align: middle; } .p-table tbody tr:last-child td { border-bottom: 0; } .p-table tbody tr:hover td { background: color-mix(in srgb, var(--p-surface-sunken) 60%, transparent); } .p-table .p-table__strong { color: var(--p-ink); font-weight: var(--p-weight-medium); } .p-table .p-table__end { text-align: right; } .p-table .p-table__center { text-align: center; } .p-table .p-table__nowrap { white-space: nowrap; } .p-table--dense td { padding-top: var(--p-space-2); padding-bottom: var(--p-space-2); } .p-table__empty td { padding: 0; } .p-table__empty:hover td { background: transparent; } /* ========================================================================== Form field ========================================================================== */ .p-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .p-field__label { font-size: var(--p-text-sm); font-weight: var(--p-weight-medium); color: var(--p-ink); } .p-field__req { color: var(--p-danger); margin-left: 2px; } .p-field__optional { color: var(--p-muted); font-weight: var(--p-weight-regular); margin-left: 4px; } .p-field__hint { font-size: var(--p-text-sm); color: var(--p-muted); } .p-field__error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--p-text-sm); color: var(--p-danger); font-weight: var(--p-weight-medium); } .p-field__error svg { flex: none; margin-top: 2px; } .p-input, .p-select, .p-textarea { width: 100%; min-height: var(--p-control-h); padding: 7px var(--p-space-3); font: inherit; font-size: var(--p-text-md); line-height: 1.4; color: var(--p-ink); background: var(--p-field-bg); border: 1px solid var(--p-border-strong); border-radius: var(--p-radius); transition: border-color var(--p-duration), box-shadow var(--p-duration); } .p-textarea { min-height: 96px; resize: vertical; } .p-select { appearance: none; padding-right: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--p-muted) 50%), linear-gradient(-45deg, transparent 50%, var(--p-muted) 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px; background-repeat: no-repeat; } .p-input::placeholder, .p-textarea::placeholder { color: var(--p-muted); opacity: 1; } .p-input:hover, .p-select:hover, .p-textarea:hover { border-color: var(--p-muted); } .p-input:focus-visible, .p-select:focus-visible, .p-textarea:focus-visible { outline: none; border-color: var(--p-focus); box-shadow: 0 0 0 1px var(--p-focus), 0 0 0 4px var(--p-accent-soft); } .p-input:disabled, .p-select:disabled, .p-textarea:disabled { background: var(--p-surface-sunken); color: var(--p-muted); cursor: not-allowed; } .p-field--invalid .p-input, .p-field--invalid .p-select, .p-field--invalid .p-textarea { border-color: var(--p-danger); } .p-field--invalid .p-input:focus-visible, .p-field--invalid .p-select:focus-visible, .p-field--invalid .p-textarea:focus-visible { border-color: var(--p-danger); box-shadow: 0 0 0 1px var(--p-danger), 0 0 0 4px var(--p-danger-bg); } .p-check { display: inline-flex; align-items: flex-start; gap: var(--p-space-2); cursor: pointer; color: var(--p-ink); font-size: var(--p-text-md); } .p-check input { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: var(--accent); cursor: pointer; } .p-check input:focus-visible { outline: 2px solid var(--p-focus); outline-offset: 2px; } .p-check input:disabled, .p-check input:disabled + span { cursor: not-allowed; opacity: 0.6; } .p-field--check .p-field__hint, .p-field--check .p-field__error { padding-left: 24px; } .p-form-grid { display: grid; gap: var(--p-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); } .p-form-grid > .p-field--wide { grid-column: 1 / -1; } /* ========================================================================== Badge — tone carries meaning (see App\Libraries\UiBadge) ========================================================================== */ .p-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; max-width: 100%; font-size: var(--p-text-xs); font-weight: var(--p-weight-semibold); line-height: 1.5; letter-spacing: 0.02em; white-space: nowrap; border: 1px solid var(--p-border); border-radius: var(--p-radius-pill); background: var(--p-surface-sunken); color: var(--p-body); } .p-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; } .p-badge--neutral { background: var(--p-surface-sunken); color: var(--p-body); border-color: var(--p-border); } .p-badge--info { background: var(--p-info-bg); color: var(--p-info); border-color: var(--p-info-line); } .p-badge--success { background: var(--p-success-bg); color: var(--p-success); border-color: var(--p-success-line); } .p-badge--warning { background: var(--p-warning-bg); color: var(--p-warning); border-color: var(--p-warning-line); } .p-badge--danger { background: var(--p-danger-bg); color: var(--p-danger); border-color: var(--p-danger-line); } .p-badge--accent { background: var(--p-accent-soft); color: var(--p-accent-text); border-color: var(--p-accent-line); } /* ========================================================================== Alert ========================================================================== */ .p-alert { display: flex; gap: var(--p-space-3); align-items: flex-start; padding: var(--p-space-3) var(--p-space-4); border: 1px solid var(--p-border); border-left-width: 3px; border-radius: var(--p-radius); background: var(--p-surface); color: var(--p-body); } .p-alert__icon { flex: none; margin-top: 2px; } .p-alert__content { min-width: 0; flex: 1; } .p-alert__title { font-weight: var(--p-weight-semibold); color: var(--p-ink); } .p-alert__title + .p-alert__body { margin-top: 2px; } .p-alert__body { overflow-wrap: anywhere; } .p-alert__actions { margin-top: var(--p-space-2); display: flex; flex-wrap: wrap; gap: var(--p-space-2); } .p-alert--info { background: var(--p-info-bg); border-color: var(--p-info-line); border-left-color: var(--p-info); } .p-alert--success { background: var(--p-success-bg); border-color: var(--p-success-line); border-left-color: var(--p-success); } .p-alert--warning { background: var(--p-warning-bg); border-color: var(--p-warning-line); border-left-color: var(--p-warning); } .p-alert--danger { background: var(--p-danger-bg); border-color: var(--p-danger-line); border-left-color: var(--p-danger); } .p-alert--info .p-alert__icon { color: var(--p-info); } .p-alert--success .p-alert__icon { color: var(--p-success); } .p-alert--warning .p-alert__icon { color: var(--p-warning); } .p-alert--danger .p-alert__icon { color: var(--p-danger); } /* ========================================================================== Empty state ========================================================================== */ .p-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--p-space-2); padding: var(--p-space-7) var(--p-space-5); } .p-empty--compact { padding: var(--p-space-5) var(--p-space-4); } .p-empty__icon { color: var(--p-border-strong); margin-bottom: var(--p-space-2); } .p-empty__title { font-size: var(--p-text-lg); font-weight: var(--p-weight-semibold); color: var(--p-ink); } .p-empty__text { max-width: 44ch; color: var(--p-muted); } .p-empty__action { margin-top: var(--p-space-3); } /* ========================================================================== Segmented control (used by the reference page; ready for the shell) ========================================================================== */ .p-segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--p-border); border-radius: var(--p-radius); background: var(--p-surface-sunken); } .p-segmented button { font: inherit; font-size: var(--p-text-sm); font-weight: var(--p-weight-medium); min-height: 28px; padding: 0 var(--p-space-3); border: 0; border-radius: var(--p-radius-sm); background: transparent; color: var(--p-muted); cursor: pointer; } .p-segmented button:hover { color: var(--p-ink); } .p-segmented button[aria-pressed="true"] { background: var(--p-surface); color: var(--p-ink); box-shadow: var(--p-shadow-sm); } .p-segmented button:focus-visible { outline: 2px solid var(--p-focus); outline-offset: 1px; } @media (prefers-reduced-motion: reduce) { .p-root *, .p-root *::before, .p-root *::after { transition: none !important; } }