@charset "UTF-8"; /* ============================================================================ ez42-ui.css — EZ42 Design System v3.0 (unified), consolidated stylesheet ---------------------------------------------------------------------------- Standalone: no @import, no CDN, no build step. Drop into static/css/ and link from base_heb.html / base.html. Tokens are inlined below; the split files in tokens/ are the readable source of the same values. Direction: written with CSS logical properties, so one rule set serves RTL and LTR. Physical overrides, where unavoidable, are grouped under [dir="rtl"] and marked RTL OVERRIDE. Tailwind: this file is reset-hardened. It never relies on Tailwind preflight and re-asserts the properties preflight changes (margin, border, font, list-style, background) on its own elements. Themes: light is default. forces dark; data-theme="auto" follows the OS. Theme overrides live in 00b and only re-declare custom properties. Print is always light. Bootstrap: safe side by side. Everything is .ez- scoped; :root and [data-theme] rules declare custom properties only; color-scheme is applied through --ez-color-scheme on .ez- elements, never on html/body. Contents 00 Tokens 00b Dark + auto theme 01 Reset hardening + base 02 Utilities (focus, visually-hidden, tap target, scroll rail) 03 Icons 04 Buttons 05 Page chrome: hero, strip, section header, back link, toolbar, tabs 06 Filtering: filter row, chips, search, summary, view switcher 07 Cards: base, variants, states, grid, rail, list row, promo 08 Badges + tags 09 Stats, progress, ring 10 Table 11 Timeline 12 Empty / no-results / error / restricted 13 AI insight card 14 Overlays: toast, modal, drawer, callout 15 Loading: skeleton, spinner 16 Forms 17 Forms module: question builder row, wizard, runner 18 Commerce + gamification 19 Pagination + load more 21 Admin + data (page header, alert, disclosure, code, table cells, native select) 20 Print ========================================================================= */ /* ==== 00 TOKENS =========================================================== */ :root { /* Four leading colours. See tokens/PALETTE-MAP.md for the role table. */ --navy:#141f2e; --navy-soft:#24344a; --navy-line:#33465f; --coral:#ff7f50; --coral-dark:#e35f2c; --coral-tint:#fff2ec; --teal:#00acc1; --teal-dark:#00727f; --teal-tint:#e6f7fa; --purple:#8b5cf6; --purple-deep:#7c3aed; --indigo-soft:#6366f1; --purple-dark:#5b21b6; --purple-tint:#f3e8ff; --text:var(--navy); --text-soft:#475569; --text-muted:#64748b; --text-light:#94a3b8; --bg:#f8fafc; --surface:#ffffff; --border:#e2e8f0; --border-soft:#f1f5f9; --tip-bg-from:#f3e8ff; --tip-bg-to:#ede9fe; --tip-border:#c4b5fd; --tip-text:#5b21b6; --warn-bg:#fef3c7; --warn-border:#f59e0b; --warn-text:#92400e; --info-bg:var(--teal-tint); --info-border:var(--teal); --info-text:var(--teal-dark); --success-bg:#f0fdf4; --success-border:#22c55e; --success-text:#166534; --error-bg:#fef2f2; --error-border:#ef4444; --error-text:#991b1b; --focus-color:var(--purple); --selected-bg:var(--purple-tint); --selected-border:var(--purple); --hero-gradient:linear-gradient(135deg,#8b5cf6 0%,#7c3aed 100%); /* @kind color */ --hero-gradient-navy:linear-gradient(135deg,#1d2c42 0%,#141f2e 100%); /* @kind color */ --transition-strip:linear-gradient(90deg,#7c3aed 0%,#ff7f50 100%); /* @kind color */ --progress-fill:linear-gradient(90deg,#8b5cf6 0%,#7c3aed 100%); /* @kind color */ --progress-fill-teal:linear-gradient(90deg,#22c9de 0%,#00acc1 100%); /* @kind color */ --text-heading:var(--text); --text-body:var(--text-soft); --text-caption:var(--text-muted); --surface-page:var(--bg); --surface-card:var(--surface); --action:var(--coral); --action-hover:var(--coral-dark); --brand:var(--purple); --brand-hover:var(--purple-deep); --ink:var(--navy); --file-pdf:#dc2626; --file-docx:#2563eb; --file-pptx:#ea580c; --file-xlsx:#16a34a; --file-mp3:#7c3aed; --file-mp4:#db2777; --file-zip:#64748b; --viz-1:#00acc1; --viz-2:#8b5cf6; --viz-3:#ff7f50; --viz-4:#6366f1; --viz-5:#94a3b8; --viz-6:#00727f; /* v3: theme-aware state, danger, table, code, mono. Every hard-coded colour in the component rules now reads one of these, so dark mode is complete. */ --on-brand:#ffffff; --surface-raised:#ffffff; --surface-alt:#fbfcfe; --border-strong:#cbd5e1; --orange-tint:var(--coral-tint); --danger-bg:var(--error-bg); --danger-border:var(--error-border); --danger-text:var(--error-text); --danger-fill:#dc2626; --danger-fill-hover:#b91c1c; --table-header-bg:#f1f5f9; --table-header-text:#64748b; --table-text:var(--text); --table-stripe-bg:#fbfcfe; --table-hover-bg:#f1f5f9; --table-cell-border:#f1f5f9; --code-bg:#f8fafc; --code-text:var(--text); --overlay:rgba(15,23,42,0.45); --lock-veil:rgba(248,250,252,0.82); --hover-veil:rgba(0,0,0,0.06); --skeleton-shine:#e9eef5; --option-hover-bg:#fdfcff; --knob:#ffffff; --knob-shadow:rgba(0,0,0,0.2); --ai-hover-bg:#eef2ff; --ez-color-scheme:light; /* @kind color */ /* EZ Insights spectrum — RESERVED for AI surfaces. See §13. */ --ai-spectrum:linear-gradient(100deg,#7c3aed 0%,#6366f1 45%,#00acc1 100%); /* @kind color */ --ai-spectrum-rev:linear-gradient(280deg,#7c3aed 0%,#6366f1 45%,#00acc1 100%); /* @kind color */ --ai-spectrum-soft:linear-gradient(135deg,#f5f3ff 0%,#eef2ff 50%,#ecfeff 100%); /* @kind color */ --ai-ink:#4338ca; --ai-ring:rgba(99,102,241,0.35); --ai-glow:0 6px 28px rgba(99,102,241,0.28); /* Legacy names — first-class, permanent, no removal date. */ --prime-color:var(--navy); --accent-color:var(--coral); --auxiliary-color:var(--teal); --notification-color:#016ce4; --orange:var(--coral); --orange-dark:var(--coral-dark); --font-sans:'Assistant','Heebo',system-ui,-apple-system,'Segoe UI',sans-serif; --font-secondary:'Heebo','Assistant',system-ui,sans-serif; --font-mono:ui-monospace,'SFMono-Regular','Cascadia Code',Consolas,'Liberation Mono',Menlo,monospace; --fs-mono:0.875rem; --fs-hero:2.75rem; --fs-hero-mobile:1.75rem; --fs-h2:1.75rem; --fs-h3:1.2rem; --fs-body:1.075rem; --fs-body-sm:0.95rem; --fs-eyebrow:0.75rem; --fs-footnote:0.75rem; --fw-light:300; /* @kind font */ --fw-regular:400; /* @kind font */ --fw-medium:500; /* @kind font */ --fw-semibold:600; /* @kind font */ --fw-bold:700; /* @kind font */ --fw-black:800; /* @kind font */ --lh-tight:1.2; /* @kind font */ --lh-heading:1.3; /* @kind font */ --lh-body:1.75; /* @kind font */ --lh-relaxed:1.85; /* @kind font */ --ls-eyebrow:0.1em; /* @kind font */ --ls-tight:-0.01em; /* @kind font */ --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem; --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:999px; --radius-circle:50%; --shadow-card:0 4px 20px rgba(0,0,0,0.08); --shadow-cta:0 4px 14px rgba(255,127,80,0.4); --shadow-badge:0 2px 8px rgba(255,127,80,0.3); --shadow-hover:0 8px 28px rgba(0,0,0,0.12); --shadow-overlay:0 24px 64px rgba(15,23,42,0.24); --width-page:1200px; --width-reading:860px; --strip-height:4px; --grid-gap:2rem; --grid-gap-hero:3rem; --tap-min:44px; --card-min:280px; --card-min-wide:340px; --z-sticky:100; /* @kind other */ --z-drawer:200; /* @kind other */ --z-scrim:210; /* @kind other */ --z-modal:220; /* @kind other */ --z-toast:300; /* @kind other */ --ease:cubic-bezier(0.4,0,0.2,1); /* @kind other */ --ease-out:cubic-bezier(0.16,1,0.3,1); /* @kind other */ --dur-fast:0.15s; /* @kind other */ --dur:0.25s; /* @kind other */ --dur-slow:0.4s; /* @kind other */ --t-card-lift:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease); /* @kind other */ --t-chip-select:background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease); /* @kind other */ --t-color:color var(--dur-fast) var(--ease),background-color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease); /* @kind other */ --t-drawer:transform var(--dur-slow) var(--ease-out); /* @kind other */ --t-fade:opacity var(--dur) var(--ease); /* @kind other */ } /* ==== 00b DARK + AUTO THEME ============================================== Same brand, darker canvas. Coral stays the only action colour (same hex); purple hero, transition strip, AI spectrum and data-viz hues don't change. Purple AS TEXT lifts to #c4b5fd. Elevation = lighter surface, never alpha. Scope: (or any container, for previews). */ [data-theme="dark"] { --ez-color-scheme:dark; /* @kind color */ --purple-dark:#c4b5fd; --purple-tint:#2a1f52; --coral-tint:#3a2218; --teal-tint:#0b2e35; --orange-tint:#3a2218; --text:#f1f5f9; --text-soft:#cbd5e1; --text-muted:#94a3b8; --text-light:#8391a7; --text-heading:#f1f5f9; --text-body:#cbd5e1; --text-caption:#94a3b8; --bg:#0f172a; --surface:#1e293b; --surface-raised:#273449; --surface-alt:#19233a; --surface-page:#0f172a; --surface-card:#1e293b; --border:#334155; --border-soft:#273449; --border-strong:#475569; --tip-bg-from:#2a1f52; --tip-bg-to:#241c47; --tip-border:#7c3aed; --tip-text:#ddd6fe; --warn-bg:#3a2a0c; --warn-border:#f59e0b; --warn-text:#fcd34d; --info-bg:#0b2e35; --info-border:#00acc1; --info-text:#67e8f9; --success-bg:#0f2e1c; --success-border:#22c55e; --success-text:#86efac; --error-bg:#3b1219; --error-border:#ef4444; --error-text:#fca5a5; --danger-bg:#3b1219; --danger-border:#ef4444; --danger-text:#fca5a5; --focus-color:#a78bfa; --selected-bg:#2a1f52; --ai-spectrum-soft:linear-gradient(135deg,#221c45 0%,#1e2350 50%,#0e2a33 100%); /* @kind color */ --ai-ink:#a5b4fc; --ai-ring:rgba(129,140,248,0.45); --ai-hover-bg:#262c5a; --table-header-bg:#273449; --table-header-text:#94a3b8; --table-text:#cbd5e1; --table-stripe-bg:#233046; --table-hover-bg:#2d3b55; --table-cell-border:#334155; --code-bg:#0b1222; --code-text:#e2e8f0; --overlay:rgba(2,6,23,0.7); --lock-veil:rgba(15,23,42,0.85); --hover-veil:rgba(255,255,255,0.08); --skeleton-shine:#334155; --option-hover-bg:#241f3d; --knob-shadow:rgba(0,0,0,0.5); --shadow-card:0 4px 20px rgba(0,0,0,0.4); --shadow-hover:0 8px 28px rgba(0,0,0,0.55); --shadow-overlay:0 24px 64px rgba(0,0,0,0.6); --shadow-cta:0 4px 14px rgba(255,127,80,0.35); } @media (prefers-color-scheme: dark) { [data-theme="auto"] { --ez-color-scheme:dark; /* @kind color */ --purple-dark:#c4b5fd; --purple-tint:#2a1f52; --coral-tint:#3a2218; --teal-tint:#0b2e35; --orange-tint:#3a2218; --text:#f1f5f9; --text-soft:#cbd5e1; --text-muted:#94a3b8; --text-light:#8391a7; --text-heading:#f1f5f9; --text-body:#cbd5e1; --text-caption:#94a3b8; --bg:#0f172a; --surface:#1e293b; --surface-raised:#273449; --surface-alt:#19233a; --surface-page:#0f172a; --surface-card:#1e293b; --border:#334155; --border-soft:#273449; --border-strong:#475569; --tip-bg-from:#2a1f52; --tip-bg-to:#241c47; --tip-border:#7c3aed; --tip-text:#ddd6fe; --warn-bg:#3a2a0c; --warn-border:#f59e0b; --warn-text:#fcd34d; --info-bg:#0b2e35; --info-border:#00acc1; --info-text:#67e8f9; --success-bg:#0f2e1c; --success-border:#22c55e; --success-text:#86efac; --error-bg:#3b1219; --error-border:#ef4444; --error-text:#fca5a5; --danger-bg:#3b1219; --danger-border:#ef4444; --danger-text:#fca5a5; --focus-color:#a78bfa; --selected-bg:#2a1f52; --ai-spectrum-soft:linear-gradient(135deg,#221c45 0%,#1e2350 50%,#0e2a33 100%); /* @kind color */ --ai-ink:#a5b4fc; --ai-ring:rgba(129,140,248,0.45); --ai-hover-bg:#262c5a; --table-header-bg:#273449; --table-header-text:#94a3b8; --table-text:#cbd5e1; --table-stripe-bg:#233046; --table-hover-bg:#2d3b55; --table-cell-border:#334155; --code-bg:#0b1222; --code-text:#e2e8f0; --overlay:rgba(2,6,23,0.7); --lock-veil:rgba(15,23,42,0.85); --hover-veil:rgba(255,255,255,0.08); --skeleton-shine:#334155; --option-hover-bg:#241f3d; --knob-shadow:rgba(0,0,0,0.5); --shadow-card:0 4px 20px rgba(0,0,0,0.4); --shadow-hover:0 8px 28px rgba(0,0,0,0.55); --shadow-overlay:0 24px 64px rgba(0,0,0,0.6); --shadow-cta:0 4px 14px rgba(255,127,80,0.35); } } @keyframes ez-toast-in{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}} @keyframes ez-toast-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}} @keyframes ez-fade-in{from{opacity:0}to{opacity:1}} @keyframes ez-pop-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}} @keyframes ez-spin{to{transform:rotate(360deg)}} @keyframes ez-shimmer{from{background-position-x:100%}to{background-position-x:-100%}} /* ==== 01 RESET HARDENING + BASE ========================================== Scoped to ez- classes so this file never fights the host page's own reset. Everything Tailwind preflight touches is re-asserted here. */ [class^="ez-"], [class*=" ez-"], [class^="ez-"]::before, [class*=" ez-"]::before, [class^="ez-"]::after, [class*=" ez-"]::after { box-sizing: border-box; } .ez-page { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); margin: 0; } .ez-container { max-inline-size: var(--width-page); margin-inline: auto; padding-inline: var(--space-6); } .ez-container--reading { max-inline-size: var(--width-reading); } .ez-stack { display: flex; flex-direction: column; gap: var(--space-5); } .ez-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .ez-spacer { flex: 1 1 auto; } .ez-h1, .ez-h2, .ez-h3, .ez-eyebrow, .ez-body, .ez-caption { margin: 0; } .ez-h1 { font-size: var(--fs-hero); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text); } .ez-h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); color: var(--text); } .ez-h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); color: var(--text); } .ez-eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--purple-dark); } .ez-body { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--text-soft); text-wrap: pretty; } .ez-caption { font-size: var(--fs-body-sm); color: var(--text-muted); } .ez-footnote { font-size: var(--fs-footnote); color: var(--text-light); } /* Plain text links only. Classed links (.ez-btn, .ez-table__link, .ez-ai-entry…) style themselves; :where() keeps this at 0,1,0 so any component class wins. */ .ez-page :where(a:not([class])) { color: var(--purple-dark); text-decoration: none; } .ez-page :where(a:not([class])):hover { color: var(--purple); text-decoration: underline; } /* ==== 02 UTILITIES ======================================================== */ .ez-focusable:focus-visible, .ez-page :focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; border-radius: var(--radius-sm); } .ez-sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .ez-tap { min-block-size: var(--tap-min); min-inline-size: var(--tap-min); } .ez-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-inline-size: 0; } .ez-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ez-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ez-scroll-x { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } /* Latin-only run inside RTL text. Neutral leading characters (-, #, /, digits) jump to the wrong end without isolation: "--purple" renders "purple--". Use the class on a whole element, or dir="ltr" on an inline span mid-sentence. */ .ez-ltr { direction: ltr; unicode-bidi: isolate; text-align: left; } /* A numerator/denominator pair ("9 / 12", "24 / 28") is two digit runs separated by a neutral slash. Inside an RTL paragraph the neutrals take the embedding level and the runs reorder, so "9 / 12" paints as "12 / 9" — corrupted data, not just typography. Isolate every numeric readout at the component level so no consumer has to remember. */ .ez-progress__value, .ez-stat__value, .ez-hero__stat-value, .ez-card__stat-value, .ez-list-row__value, .ez-pagination__info, .ez-ring__label, .ez-price__value, .ez-table__num { direction: ltr; unicode-bidi: isolate; text-align: left; } /* ...but `direction: ltr` also resolves logical alignment, so `text-align: start` on these boxes computes to LEFT even inside an RTL page — the number pins to the wrong edge. Dropping text-align does not help: it inherits as the keyword `start` and re-resolves against the element's own LTR direction. The glyph order must stay LTR and the box alignment must follow the page, so the two are stated separately. (`text-align: match-parent` does this in one property; explicit overrides are used instead for the older school-issued devices the platform targets.) */ [dir="rtl"] .ez-ltr, [dir="rtl"] .ez-progress__value, [dir="rtl"] .ez-stat__value, [dir="rtl"] .ez-hero__stat-value, [dir="rtl"] .ez-card__stat-value, [dir="rtl"] .ez-list-row__value, [dir="rtl"] .ez-pagination__info, [dir="rtl"] .ez-ring__label, [dir="rtl"] .ez-price__value, [dir="rtl"] .ez-table__num, [dir="rtl"] .ez-card--file .ez-card__filetype { text-align: right; } /* ==== 03 ICONS ============================================================ Inline SVG only, 2px stroke, currentColor. Sizes via class. Mirroring: arrows/chevrons/back mirror in RTL. Media controls, logos, numbers and check marks NEVER mirror. Mark mirrorable icons .ez-icon--dir. */ .ez-icon { inline-size: 20px; block-size: 20px; flex: 0 0 auto; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; } .ez-icon--sm { inline-size: 16px; block-size: 16px; } .ez-icon--lg { inline-size: 24px; block-size: 24px; } .ez-icon--xl { inline-size: 32px; block-size: 32px; } [dir="rtl"] .ez-icon--dir { transform: scaleX(-1); } /* RTL OVERRIDE */ /* ==== 04 BUTTONS ========================================================== */ .ez-btn { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-bold); line-height: 1; padding: 0.85rem 1.6rem; min-block-size: var(--tap-min); border: 2px solid transparent; border-radius: var(--radius-md); background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; transition: var(--t-color), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .ez-btn:hover { text-decoration: none; } .ez-btn:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; } .ez-btn:disabled, .ez-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; } .ez-btn--primary { background: var(--orange); color: var(--on-brand); box-shadow: var(--shadow-cta); } .ez-btn--primary:hover:not(:disabled) { background: var(--orange-dark); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,127,80,0.45); } .ez-btn--primary:active:not(:disabled) { transform: translateY(0); } .ez-btn--purple { background: var(--purple); color: var(--on-brand); } .ez-btn--purple:hover:not(:disabled) { background: var(--purple-deep); transform: translateY(-1px); } .ez-btn--outline { background: var(--surface); border-color: var(--border); color: var(--text); } .ez-btn--outline:hover:not(:disabled) { border-color: var(--purple); color: var(--purple-dark); } .ez-btn--ghost { background: transparent; color: var(--purple-dark); padding-inline: 1rem; } .ez-btn--ghost:hover:not(:disabled) { background: var(--border-soft); } .ez-btn--danger { background: var(--surface); border-color: var(--error-border); color: var(--error-text); } .ez-btn--danger:hover:not(:disabled) { background: var(--error-bg); } .ez-btn--sm { font-size: var(--fs-body-sm); padding: 0.5rem 0.9rem; min-block-size: 36px; } .ez-btn--lg { font-size: 1.15rem; padding: 1rem 2rem; } .ez-btn--block { display: flex; inline-size: 100%; } .ez-btn--icon { padding: 0.6rem; min-inline-size: var(--tap-min); } /* Loading: label swaps for a spinner, width locks so nothing jumps */ .ez-btn.is-loading { pointer-events: none; position: relative; color: transparent; } .ez-btn.is-loading > * { visibility: hidden; } .ez-btn.is-loading::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 1.1em; block-size: 1.1em; margin-block-start: -0.55em; margin-inline-start: -0.55em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; color: var(--on-brand); animation: ez-spin 0.7s linear infinite; } .ez-btn--outline.is-loading::after, .ez-btn--ghost.is-loading::after { color: var(--purple-dark); } /* ==== 05 PAGE CHROME ====================================================== */ .ez-hero { background: var(--hero-gradient); color: var(--on-brand); padding-block: var(--space-8); } .ez-hero--flat { background: var(--surface); color: var(--text); border-block-end: 1px solid var(--border); } /* Navy hero: utility, admin and report pages. White text, same elements as the purple hero; the purple→coral .ez-strip still goes directly beneath. */ .ez-hero--navy { background: var(--hero-gradient-navy); color: var(--on-brand); } .ez-hero__inner { max-inline-size: var(--width-page); margin-inline: auto; padding-inline: var(--space-6); display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-5); } .ez-hero__main { display: flex; flex-direction: column; gap: var(--space-3); min-inline-size: 0; flex: 1 1 420px; } .ez-hero__eyebrow { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: rgba(255,255,255,0.85); } .ez-hero--flat .ez-hero__eyebrow { color: var(--purple-dark); } .ez-hero__title { margin: 0; font-size: var(--fs-hero); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: inherit; } .ez-hero__subtitle { margin: 0; font-size: var(--fs-body); line-height: var(--lh-relaxed); color: rgba(255,255,255,0.92); max-inline-size: 60ch; text-wrap: pretty; } .ez-hero--flat .ez-hero__subtitle { color: var(--text-soft); } .ez-hero__stats { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-block-start: var(--space-2); } .ez-hero__stat { display: flex; flex-direction: column; gap: 0.15rem; } .ez-hero__stat-value { font-size: 1.6rem; font-weight: var(--fw-black); line-height: 1.1; } .ez-hero__stat-label { font-size: var(--fs-footnote); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: rgba(255,255,255,0.75); } .ez-hero--flat .ez-hero__stat-label { color: var(--text-muted); } .ez-hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; } /* Hero parts promoted from production pages (v3): __ctx/__pill context pills above the title (teacher dashboard: institution, admin, spaces) __identity icon + text block (My Space header) __meta line under the title: institution logo/name, status badge __stat-of the "/target" part of a stat value; __stat-bar a mini progress bar --compact shorter hero for app pages */ /* --compact = the My Space header geometry (my_space.css, 2026-09) */ .ez-hero--compact { padding-block: 1.75rem var(--space-5); } .ez-hero--compact .ez-hero__inner { padding-inline: var(--space-5); gap: var(--space-5); } .ez-hero--compact .ez-hero__title { font-size: 2rem; line-height: 1.25; text-wrap: pretty; } .ez-hero--compact .ez-breadcrumb { gap: 6px; font-size: 0.875rem; margin-block-end: 2px; } .ez-hero__ctx { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .ez-hero__pill { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.35rem 0.8rem; min-block-size: var(--tap-min); border-radius: var(--radius-pill); background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22); color: var(--on-brand); font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); line-height: 1.2; text-decoration: none; cursor: pointer; transition: var(--t-color); white-space: nowrap; flex: 0 0 auto; max-inline-size: 100%; } /* Long institution names: wrap the label in . */ .ez-hero__pill-label { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; } .ez-hero__pill:hover { background: rgba(255,255,255,0.2); color: var(--on-brand); text-decoration: none; } .ez-hero__pill:focus-visible { outline: 2px solid var(--on-brand); outline-offset: 2px; } .ez-hero__pill--static, .ez-hero__pill--static:hover { cursor: default; background: rgba(255,255,255,0.12); } .ez-hero--flat .ez-hero__pill { background: var(--border-soft); border-color: var(--border); color: var(--text-soft); } .ez-hero--flat .ez-hero__pill:hover { background: var(--selected-bg); border-color: var(--purple); color: var(--purple-dark); } .ez-hero--flat .ez-hero__pill:focus-visible { outline-color: var(--focus-color); } .ez-hero--flat .ez-hero__pill--static, .ez-hero--flat .ez-hero__pill--static:hover { background: var(--border-soft); border-color: var(--border); color: var(--text-soft); } .ez-hero__identity { display: flex; align-items: center; gap: var(--space-4); min-inline-size: 0; } .ez-hero__identity > div { display: flex; flex-direction: column; min-inline-size: 0; } .ez-hero__icon { inline-size: 56px; block-size: 56px; flex: 0 0 auto; border-radius: var(--radius-lg); display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.14); color: var(--on-brand); } .ez-hero--flat .ez-hero__icon { background: var(--purple-tint); color: var(--purple-deep); } [data-theme="dark"] .ez-hero--flat .ez-hero__icon { color: var(--purple-dark); } @media (prefers-color-scheme: dark) { [data-theme="auto"] .ez-hero--flat .ez-hero__icon { color: var(--purple-dark); } } .ez-hero__meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-block-start: 6px; font-size: 0.875rem; color: rgba(255,255,255,0.85); } .ez-hero--flat .ez-hero__meta { color: var(--text-muted); } .ez-hero__meta img { inline-size: 20px; block-size: 20px; border-radius: var(--radius-circle); object-fit: cover; } .ez-hero .ez-breadcrumb, .ez-hero .ez-breadcrumb a, .ez-hero .ez-breadcrumb li[aria-current="page"] { color: rgba(255,255,255,0.85); } .ez-hero .ez-breadcrumb__sep { color: rgba(255,255,255,0.6); } .ez-hero .ez-breadcrumb a:hover { color: var(--on-brand); } .ez-hero--flat .ez-breadcrumb { color: var(--text-muted); } .ez-hero--flat .ez-breadcrumb a { color: var(--purple-dark); } .ez-hero--flat .ez-breadcrumb li[aria-current="page"] { color: var(--text-muted); font-weight: var(--fw-regular); } .ez-hero--flat .ez-breadcrumb__sep { color: var(--text-light); } .ez-hero--flat .ez-breadcrumb a:hover { color: var(--purple-deep); text-decoration: underline; } [data-theme="dark"] .ez-hero--flat .ez-breadcrumb a:hover { color: var(--purple-dark); } .ez-hero--flat .ez-hero__stat-value { color: var(--text); } .ez-hero__stat-of { font-size: 1rem; font-weight: var(--fw-semibold); opacity: 0.7; } .ez-hero--flat .ez-hero__stat-of { opacity: 1; color: var(--text-light); } .ez-hero__stat-bar { display: block; block-size: 4px; min-inline-size: 72px; margin-block-start: 0.35rem; background: rgba(255,255,255,0.22); border-radius: var(--radius-pill); overflow: hidden; } .ez-hero__stat-bar > span { display: block; block-size: 100%; background: var(--on-brand); border-radius: inherit; } .ez-hero--flat .ez-hero__stat-bar { background: var(--border-soft); } .ez-hero--flat .ez-hero__stat-bar > span { background: var(--progress-fill); } /* Status: dot + coloured text, no pill (My Space header, lists). */ .ez-status { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); color: var(--text-muted); } .ez-status::before { content: ""; inline-size: 7px; block-size: 7px; flex: 0 0 auto; border-radius: 50%; background: currentColor; } .ez-status--success { color: var(--success-text); } .ez-status--warn { color: var(--warn-text); } .ez-status--error { color: var(--error-text); } .ez-status--info { color: var(--info-text); } /* Stat group: one bordered box, cells split by hairlines (My Space header). Dividers are box-shadows on every cell clipped by the box, so any cell count and any wrap pattern works without nth-child rules. */ .ez-stat-group { display: flex; flex-wrap: wrap; inline-size: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .ez-stat-group__cell { flex: 1 1 40%; min-inline-size: 110px; padding: var(--space-3) 1.25rem; box-shadow: 1px 0 0 var(--border), 0 1px 0 var(--border); } .ez-stat-group__label { font-size: 0.8125rem; color: var(--text-muted); } .ez-stat-group__value { display: flex; align-items: center; gap: 6px; font-size: 1.5rem; font-weight: var(--fw-black); line-height: 1.3; color: var(--text); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; justify-content: flex-start; } [dir="rtl"] .ez-stat-group__value { justify-content: flex-end; } /* RTL OVERRIDE: LTR box, page-edge alignment */ .ez-stat-group__of { font-size: 0.875rem; font-weight: var(--fw-regular); color: var(--text-muted); } .ez-stat-group__bar { display: block; block-size: 4px; margin-block-start: 4px; background: var(--border); border-radius: 6px; overflow: hidden; } .ez-stat-group__bar > span { display: block; block-size: 100%; background: var(--progress-fill); border-radius: inherit; } .ez-strip { block-size: var(--strip-height); background: var(--transition-strip); } .ez-back { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: rgba(255,255,255,0.9); min-block-size: var(--tap-min); } .ez-hero--flat .ez-back, .ez-back--ink { color: var(--text-muted); } .ez-back:hover { color: var(--on-brand); text-decoration: underline; } .ez-hero--flat .ez-back:hover, .ez-back--ink:hover { color: var(--purple-dark); } .ez-breadcrumb { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--fs-body-sm); color: var(--text-muted); list-style: none; margin: 0; padding: 0; } .ez-breadcrumb__sep { color: var(--text-light); } .ez-breadcrumb__sep::before { content: "\2039"; } /* RTL-correct: guillemet flips with direction */ [dir="ltr"] .ez-breadcrumb__sep::before { content: "\203A"; } .ez-breadcrumb li[aria-current="page"] { color: var(--text); font-weight: var(--fw-semibold); } .ez-section-header { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin-block-end: var(--space-5); } .ez-section-header__title { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); color: var(--text); } .ez-section-header__count { font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--purple-dark); background: var(--tip-bg-from); border-radius: var(--radius-pill); padding: 0.2rem 0.6rem; } .ez-section-header__action { margin-inline-start: auto; font-size: var(--fs-body-sm); font-weight: var(--fw-bold); } .ez-toolbar { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); background: var(--surface); border-block-end: 1px solid var(--border); transform: translateY(-100%); opacity: 0; transition: var(--t-drawer), var(--t-fade); pointer-events: none; } .ez-toolbar.is-visible { transform: none; opacity: 1; pointer-events: auto; } .ez-toolbar__inner { max-inline-size: var(--width-page); margin-inline: auto; padding: var(--space-3) var(--space-6); display: flex; align-items: center; gap: var(--space-4); } .ez-toolbar__title { font-weight: var(--fw-bold); color: var(--text); } .ez-tabs { display: flex; gap: 0.25rem; border-block-end: 1px solid var(--border); background: var(--surface); overflow-x: auto; scrollbar-width: none; } .ez-tabs::-webkit-scrollbar { display: none; } .ez-tab { -webkit-appearance: none; appearance: none; background: none; border: none; border-block-end: 3px solid transparent; padding: var(--space-4) 1.1rem 0.85rem; font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--text-muted); white-space: nowrap; cursor: pointer; min-block-size: var(--tap-min); display: inline-flex; align-items: center; gap: var(--space-2); transition: var(--t-color); } .ez-tab:hover:not(:disabled) { color: var(--text); } .ez-tab[aria-selected="true"] { color: var(--purple-dark); border-block-end-color: var(--purple); } .ez-tab:disabled { color: var(--text-light); cursor: not-allowed; } .ez-tab__count { font-size: var(--fs-footnote); font-weight: var(--fw-bold); background: var(--border-soft); color: var(--text-muted); border-radius: var(--radius-pill); padding: 0.1rem 0.45rem; } .ez-tab[aria-selected="true"] .ez-tab__count { background: var(--tip-bg-from); color: var(--purple-dark); } /* ==== 06 FILTERING ======================================================== */ .ez-filter-row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-4) var(--space-5); } .ez-filter-group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-inline-size: 0; } .ez-filter-group__label { font-size: var(--fs-footnote); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-light); padding-inline-end: var(--space-1); } .ez-filter-divider { inline-size: 1px; align-self: stretch; min-block-size: 24px; background: var(--border); } .ez-filter-row__reset { margin-inline-start: auto; } .ez-chip { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--text-muted); background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-pill); padding: 0.5rem 0.95rem; min-block-size: var(--tap-min); white-space: nowrap; cursor: pointer; transition: var(--t-chip-select); } .ez-chip:hover:not(:disabled) { border-color: var(--purple); color: var(--purple-dark); } .ez-chip[aria-pressed="true"], .ez-chip.is-selected { background: var(--purple); border-color: var(--purple); color: var(--on-brand); } .ez-chip:disabled { opacity: 0.5; cursor: not-allowed; } .ez-chip__count { font-size: var(--fs-footnote); background: var(--border-soft); color: var(--text-muted); border-radius: var(--radius-pill); padding: 0.05rem 0.4rem; } .ez-chip[aria-pressed="true"] .ez-chip__count { background: rgba(255,255,255,0.25); color: var(--on-brand); } .ez-chip--multi { border-radius: var(--radius-md); } .ez-chip--removable { padding-inline-end: 0.5rem; } .ez-chip__remove { -webkit-appearance: none; appearance: none; background: none; border: none; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0.35rem; border-radius: var(--radius-circle); } .ez-chip__remove:hover { background: var(--hover-veil); } .ez-search { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-inline-size: 420px; } .ez-search__input { inline-size: 100%; font-family: var(--font-sans); font-size: var(--fs-body); color: var(--text); background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-md); padding-block: 0.7rem; padding-inline: 2.6rem 2.4rem; min-block-size: var(--tap-min); transition: var(--t-color); } .ez-search__input::placeholder { color: var(--text-light); } .ez-search__input:focus { outline: 2px solid var(--focus-color); outline-offset: 2px; border-color: var(--purple); } .ez-search__icon { position: absolute; inset-inline-start: 0.8rem; color: var(--text-light); pointer-events: none; } .ez-search__clear { position: absolute; inset-inline-end: 0.5rem; -webkit-appearance: none; appearance: none; background: none; border: none; color: var(--text-light); cursor: pointer; padding: 0.4rem; border-radius: var(--radius-circle); display: none; } .ez-search.has-value .ez-search__clear { display: inline-flex; } .ez-search__clear:hover { color: var(--text); background: var(--border-soft); } .ez-filter-summary { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; font-size: var(--fs-body-sm); color: var(--text-muted); } .ez-filter-summary__count { font-weight: var(--fw-bold); color: var(--text); } .ez-view-switcher { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px; gap: 4px; } .ez-view-switcher__btn { -webkit-appearance: none; appearance: none; background: none; border: none; border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; min-block-size: 36px; color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: var(--fw-bold); transition: var(--t-chip-select); } .ez-view-switcher__btn:hover { color: var(--text); } .ez-view-switcher__btn[aria-pressed="true"] { background: var(--purple); color: var(--on-brand); } /* ==== 07 CARDS ============================================================ */ .ez-card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-6); transition: var(--t-card-lift); } .ez-card--interactive { cursor: pointer; } .ez-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); } .ez-card--interactive:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; } .ez-card--flat { box-shadow: none; } .ez-card--pad-sm { padding: var(--space-4) var(--space-5); } .ez-card__accent { position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 6px; background: var(--hero-gradient); border-start-start-radius: var(--radius-lg); border-start-end-radius: var(--radius-lg); } .ez-card--accent { padding-block-start: calc(var(--space-6) + 6px); } .ez-card__head { display: flex; align-items: flex-start; gap: var(--space-4); } .ez-card__icon { inline-size: 52px; block-size: 52px; flex: 0 0 auto; border-radius: var(--radius-md); background: var(--tip-bg-from); color: var(--purple-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; line-height: 1; } .ez-card__icon--orange { background: var(--coral-tint); color: var(--orange-dark); } .ez-card__titles { display: flex; flex-direction: column; gap: 0.2rem; min-inline-size: 0; flex: 1; } .ez-card__title { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); color: var(--text); } .ez-card__subtitle { font-size: var(--fs-body-sm); color: var(--text-muted); } .ez-card__desc { margin: 0; font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--text-soft); text-wrap: pretty; } .ez-card__meta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; font-size: var(--fs-footnote); color: var(--text-light); } .ez-card__meta-item { display: inline-flex; align-items: center; gap: var(--space-1); } .ez-card__badges { display: flex; gap: var(--space-2); flex-wrap: wrap; } .ez-card__stats { display: flex; gap: var(--space-5); flex-wrap: wrap; padding-block: var(--space-1); } .ez-card__stat { display: flex; flex-direction: column; gap: 0.1rem; } .ez-card__stat-value { font-size: 1.25rem; font-weight: var(--fw-black); color: var(--text); line-height: 1.1; } .ez-card__stat-label { font-size: var(--fs-footnote); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); } .ez-card__footer { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-block-start: auto; padding-block-start: var(--space-2); } .ez-card__footer--split { justify-content: space-between; } /* -- Card variants -- */ .ez-card--track .ez-card__icon { background: var(--hero-gradient); color: var(--on-brand); } .ez-card--kit .ez-card__icon { background: var(--coral-tint); color: var(--orange-dark); } .ez-card--mission { border-inline-start: 4px solid var(--orange); } /* logical: flips correctly */ .ez-card--report .ez-card__accent { background: var(--hero-gradient); } .ez-card--form .ez-card__icon { background: var(--tip-bg-from); color: var(--purple-dark); } .ez-card--character { align-items: center; text-align: center; } .ez-card--character .ez-card__head { flex-direction: column; align-items: center; } .ez-card--file { padding-block-start: calc(var(--space-6) + 6px); } .ez-card--file .ez-card__accent { background: var(--file-zip); } .ez-card--file[data-filetype="pdf"] .ez-card__accent { background: var(--file-pdf); } .ez-card--file[data-filetype="docx"] .ez-card__accent { background: var(--file-docx); } .ez-card--file[data-filetype="pptx"] .ez-card__accent { background: var(--file-pptx); } .ez-card--file[data-filetype="xlsx"] .ez-card__accent { background: var(--file-xlsx); } .ez-card--file[data-filetype="mp3"] .ez-card__accent { background: var(--file-mp3); } .ez-card--file[data-filetype="mp4"] .ez-card__accent { background: var(--file-mp4); } .ez-card--file .ez-card__filetype { font-size: var(--fs-footnote); font-weight: var(--fw-black); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--file-zip); direction: ltr; unicode-bidi: isolate; text-align: left; } .ez-card--file[data-filetype="pdf"] .ez-card__filetype { color: var(--file-pdf); } .ez-card--file[data-filetype="docx"] .ez-card__filetype { color: var(--file-docx); } .ez-card--file[data-filetype="pptx"] .ez-card__filetype { color: var(--file-pptx); } .ez-card--file[data-filetype="xlsx"] .ez-card__filetype { color: var(--file-xlsx); } .ez-card--file[data-filetype="mp3"] .ez-card__filetype { color: var(--file-mp3); } .ez-card--file[data-filetype="mp4"] .ez-card__filetype { color: var(--file-mp4); } /* -- Card states -- */ .ez-card.is-locked { } .ez-card.is-locked .ez-card__body, .ez-card.is-locked .ez-card__footer { filter: blur(1.5px); opacity: 0.5; } .ez-card__lock { position: absolute; inset: 0; border-radius: var(--radius-lg); background: var(--lock-veil); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; padding: var(--space-5); } .ez-card__lock-title { font-weight: var(--fw-bold); color: var(--text); } .ez-card__lock-note { font-size: var(--fs-body-sm); color: var(--text-muted); max-inline-size: 30ch; } .ez-card.is-owned { border-color: var(--success-border); } .ez-card.is-in-progress { border-color: var(--purple); } .ez-card.is-completed { border-color: var(--success-border); background: linear-gradient(0deg, var(--success-bg), var(--success-bg)) padding-box, var(--surface); } .ez-card.is-archived { opacity: 0.72; box-shadow: none; } .ez-card.is-archived:hover { opacity: 1; } .ez-card.is-coming-soon { border-style: dashed; box-shadow: none; } .ez-card__ribbon { position: absolute; inset-block-start: var(--space-4); inset-inline-end: 0; background: var(--success-border); color: var(--on-brand); font-size: var(--fs-footnote); font-weight: var(--fw-black); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; padding: 0.25rem 0.7rem; border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); } .ez-card__ribbon--new { background: var(--orange); } /* A ribbon floats over the card's inline end, so the title block must yield that gutter or long titles collide with it. :has() covers modern browsers; the sibling selector covers the ribbon-before-head DOM order this package ships. */ .ez-card:has(> .ez-card__ribbon) .ez-card__titles, .ez-card__ribbon ~ .ez-card__head .ez-card__titles { padding-inline-end: 104px; } /* -- Grid, rail, list row, promo -- */ .ez-card-grid { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); align-items: stretch; } .ez-card-grid > .ez-card { block-size: 100%; } .ez-card-grid--2 { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); } .ez-card-grid--wide { grid-template-columns: repeat(auto-fill, minmax(var(--card-min-wide), 1fr)); } .ez-rail { position: relative; } .ez-rail__head { display: flex; align-items: center; gap: var(--space-3); margin-block-end: var(--space-4); } .ez-rail__nav { margin-inline-start: auto; display: flex; gap: var(--space-2); } .ez-rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 1fr); gap: var(--space-5); overflow-x: auto; scroll-snap-type: x mandatory; padding-block-end: var(--space-2); scrollbar-width: thin; } .ez-rail__track > * { scroll-snap-align: start; } .ez-list-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: var(--space-4); background: var(--surface); border-block-end: 1px solid var(--border-soft); padding: var(--space-3) var(--space-5); min-block-size: 56px; transition: var(--t-color); } .ez-list-row:hover { background: var(--surface-alt); } .ez-list-row__main { display: flex; flex-direction: column; gap: 0.15rem; min-inline-size: 0; } .ez-list-row__title { font-weight: var(--fw-semibold); color: var(--text); } .ez-list-row__meta { font-size: var(--fs-footnote); color: var(--text-light); } .ez-list-row__end { display: flex; align-items: center; gap: var(--space-3); } .ez-list-row__value { font-weight: var(--fw-bold); color: var(--text); font-variant-numeric: tabular-nums; } .ez-list-row__value--pos { color: var(--success-text); } .ez-list-row__value--neg { color: var(--error-text); } .ez-promo { position: relative; overflow: hidden; background: var(--hero-gradient); color: var(--on-brand); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); box-shadow: var(--shadow-card); } .ez-promo::after { content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -10%; inline-size: 60%; block-size: 180%; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.16) 100%); transform: rotate(18deg); pointer-events: none; } .ez-promo__title { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-black); line-height: var(--lh-heading); } .ez-promo__body { margin: 0; color: rgba(255,255,255,0.9); line-height: var(--lh-relaxed); max-inline-size: 48ch; } .ez-promo__stats { display: flex; gap: var(--space-6); flex-wrap: wrap; } .ez-promo .ez-btn--primary { box-shadow: 0 4px 14px rgba(0,0,0,0.2); } /* ==== 08 BADGES + TAGS ==================================================== */ .ez-badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: var(--radius-sm); background: var(--border-soft); color: var(--text-muted); white-space: nowrap; line-height: 1.4; } .ez-badge--purple { background: var(--tip-bg-from); color: var(--purple-dark); } .ez-badge--solid { background: var(--purple); color: var(--on-brand); } .ez-badge--orange { background: var(--coral-tint); color: var(--orange-dark); } .ez-badge--success { background: var(--success-bg); color: var(--success-text); } .ez-badge--warn { background: var(--warn-bg); color: var(--warn-text); } .ez-badge--error { background: var(--error-bg); color: var(--error-text); } .ez-badge--new { background: var(--orange); color: var(--on-brand); } .ez-badge--archived { background: var(--border-soft); color: var(--text-light); } .ez-badge--sm { font-size: 0.68rem; padding: 0.15rem 0.45rem; } .ez-badge--lg { font-size: var(--fs-body-sm); text-transform: none; letter-spacing: 0; padding: 0.35rem 0.75rem; } .ez-badge--count { text-transform: none; letter-spacing: 0; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; min-inline-size: 1.5rem; justify-content: center; } .ez-badge--dot::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .ez-badge--file { font-weight: var(--fw-black); } .ez-badge--coin { background: var(--warn-bg); color: var(--warn-text); text-transform: none; letter-spacing: 0; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; } .ez-tag { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text-soft); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 0.25rem 0.7rem; } .ez-tag--subject { border-color: var(--tip-border); color: var(--purple-dark); background: var(--tip-bg-from); } .ez-tag--skill { border-color: var(--border); color: var(--text-muted); } /* ==== 09 STATS, PROGRESS, RING ============================================ */ .ez-stat { display: flex; flex-direction: column; gap: 0.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-4) var(--space-5); min-inline-size: 0; } .ez-stat__label { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); } .ez-stat__value { font-size: 1.9rem; font-weight: var(--fw-black); color: var(--text); line-height: 1.1; font-variant-numeric: tabular-nums; } .ez-stat__value small { font-size: 1rem; font-weight: var(--fw-semibold); color: var(--text-light); } .ez-stat__note { font-size: var(--fs-footnote); color: var(--text-light); } .ez-stat--icon { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--space-4); align-items: center; } .ez-stat__icon { inline-size: 44px; block-size: 44px; border-radius: var(--radius-md); background: var(--tip-bg-from); color: var(--purple-dark); display: inline-flex; align-items: center; justify-content: center; } /* Solid icon tiles (teacher dashboard KPI row). One colour per metric, fixed order. */ .ez-stat__icon--purple { background: var(--purple); color: var(--on-brand); } .ez-stat__icon--teal { background: var(--teal); color: var(--on-brand); } .ez-stat__icon--coral { background: var(--coral); color: var(--on-brand); } .ez-stat__icon--navy { background: var(--navy); color: var(--on-brand); } [data-theme="dark"] .ez-stat__icon--navy { background: var(--navy-line); } @media (prefers-color-scheme: dark) { [data-theme="auto"] .ez-stat__icon--navy { background: var(--navy-line); } } .ez-stats-bar { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } .ez-stats-bar--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .ez-stats-bar--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } .ez-stats-bar--4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .ez-progress { display: flex; flex-direction: column; gap: var(--space-2); } .ez-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-body-sm); } .ez-progress__label { font-weight: var(--fw-semibold); color: var(--text-soft); } .ez-progress__value { font-weight: var(--fw-bold); color: var(--text); font-variant-numeric: tabular-nums; } .ez-progress__track { display: block; block-size: 10px; background: var(--border-soft); border-radius: var(--radius-pill); overflow: hidden; } .ez-progress__fill { display: block; block-size: 100%; inline-size: 0; background: var(--progress-fill); border-radius: var(--radius-pill); transition: inline-size var(--dur) var(--ease); } .ez-progress--compact .ez-progress__track { block-size: 6px; } .ez-progress--orange .ez-progress__fill { background: linear-gradient(90deg, #ff9a70 0%, var(--coral) 100%); } .ez-ring { position: relative; inline-size: 96px; block-size: 96px; } .ez-ring svg { inline-size: 100%; block-size: 100%; transform: rotate(-90deg); } [dir="rtl"] .ez-ring svg { transform: rotate(-90deg) scaleY(-1); } /* RTL OVERRIDE: fill runs the reading direction */ .ez-ring__track { stroke: var(--border-soft); fill: none; stroke-width: 8; } .ez-ring__fill { stroke: var(--purple); fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset var(--dur) var(--ease); } .ez-ring__label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: var(--fw-black); color: var(--text); font-variant-numeric: tabular-nums; } .ez-ring__label small { font-size: var(--fs-footnote); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-eyebrow); color: var(--text-muted); } /* ==== 10 TABLE ============================================================ */ .ez-table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: auto; max-block-size: var(--ez-table-max, 70vh); } .ez-table { inline-size: 100%; border-collapse: collapse; text-align: start; font-size: var(--fs-body-sm); } .ez-table caption { text-align: start; padding: var(--space-4) var(--space-5); font-weight: var(--fw-bold); color: var(--text); } .ez-table th, .ez-table td { text-align: start; padding: var(--space-3) var(--space-5); border-block-end: 1px solid var(--table-cell-border); vertical-align: middle; } .ez-table td { color: var(--table-text); } .ez-table thead th { position: sticky; inset-block-start: 0; z-index: 1; background: var(--table-header-bg); font-size: var(--fs-footnote); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--table-header-text); white-space: nowrap; } /* Stripe + hover set the text colour too: readable in dark (v3 fix). */ .ez-table--zebra tbody tr:nth-child(even) { background: var(--table-stripe-bg); color: var(--table-text); } .ez-table tbody tr:hover { background: var(--table-hover-bg); color: var(--table-text); } .ez-table__num { font-variant-numeric: tabular-nums; } .ez-table__sort { -webkit-appearance: none; appearance: none; background: none; border: none; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.3rem 0; min-block-size: 32px; } .ez-table__sort:hover { color: var(--text); } .ez-table__sort::after { content: "\2195"; font-size: 0.9em; opacity: 0.45; } .ez-table th[aria-sort="ascending"] .ez-table__sort::after { content: "\2191"; opacity: 1; } .ez-table th[aria-sort="descending"] .ez-table__sort::after { content: "\2193"; opacity: 1; } .ez-table th[aria-sort] { color: var(--purple-dark); } .ez-table__actions { display: flex; gap: var(--space-2); justify-content: flex-start; } .ez-table__cards { display: none; } /* ==== 11 TIMELINE ========================================================= */ .ez-timeline { display: flex; flex-direction: column; gap: var(--space-5); } .ez-timeline__group-head { display: flex; align-items: center; gap: var(--space-3); font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--text-muted); } .ez-timeline__group-head::after { content: ""; flex: 1; block-size: 1px; background: var(--border); } .ez-timeline__items { display: flex; flex-direction: column; gap: var(--space-3); padding-inline-start: var(--space-5); border-inline-start: 2px solid var(--border-soft); } .ez-timeline__item { position: relative; } .ez-timeline__item::before { content: ""; position: absolute; inset-block-start: 1.15rem; inset-inline-start: calc(-1 * var(--space-5) - 5px); inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 3px var(--surface); } /* ==== 12 EMPTY / NO-RESULTS / ERROR / RESTRICTED ========================== */ .ez-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; padding: var(--space-8) var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .ez-empty--bare { background: none; border: none; box-shadow: none; } .ez-empty--dashed { border-style: dashed; box-shadow: none; } .ez-empty__icon { inline-size: 64px; block-size: 64px; border-radius: var(--radius-circle); background: var(--tip-bg-from); color: var(--purple-dark); display: inline-flex; align-items: center; justify-content: center; } .ez-empty__title { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text); } .ez-empty__body { margin: 0; max-inline-size: 46ch; font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); color: var(--text-muted); text-wrap: pretty; } .ez-empty__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-block-start: var(--space-2); } .ez-empty--no-results .ez-empty__icon { background: var(--border-soft); color: var(--text-light); } .ez-empty--error .ez-empty__icon { background: var(--error-bg); color: var(--error-text); } .ez-empty--error { border-color: var(--error-border); } .ez-restricted { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-8) var(--space-6); overflow: hidden; position: relative; } .ez-restricted__strip { position: absolute; inset-block-start: 0; inset-inline: 0; block-size: var(--strip-height); background: var(--transition-strip); } .ez-restricted__icon { inline-size: 64px; block-size: 64px; border-radius: var(--radius-circle); background: var(--border-soft); border: 2px solid var(--border); color: var(--text-light); display: inline-flex; align-items: center; justify-content: center; } .ez-restricted__title { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-black); line-height: var(--lh-heading); color: var(--text); } .ez-restricted__body { margin: 0; max-inline-size: 52ch; line-height: var(--lh-relaxed); color: var(--text-soft); text-wrap: pretty; } .ez-restricted__meta { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; font-size: var(--fs-body-sm); color: var(--text-light); } .ez-restricted--in-card { padding: var(--space-6) var(--space-5); box-shadow: none; } .ez-restricted--in-card .ez-restricted__title { font-size: var(--fs-h3); } /* ==== 13 EZ INSIGHTS — THE AI IDENTITY ==================================== Everything here is RESERVED. The spectrum, the mark, the breathing node and the sweep animation may appear on EZ Insights surfaces and nowhere else. That is not decoration policy, it is the mechanism: the AI corner is recognisable because no other surface is allowed to look like it. Spend the spectrum on a marketing banner and the signal is gone. Rule of pairing: the spectrum is cool (purple → indigo → teal) and deliberately contains no coral, so a coral CTA sitting on an AI surface still reads as the action. Never put the mark inside a coral button. */ /* -- The mark. CSS paints the spectrum, so no gradient ids and no collisions. -- */ .ez-ai-mark { inline-size: 24px; block-size: 24px; flex: 0 0 auto; display: inline-block; vertical-align: middle; background-image: var(--ai-spectrum); -webkit-mask-image: var(--ez-ai-mask); mask-image: var(--ez-ai-mask); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; } .ez-ai-mark--sm { inline-size: 18px; block-size: 18px; } .ez-ai-mark--lg { inline-size: 32px; block-size: 32px; } .ez-ai-mark--xl { inline-size: 48px; block-size: 48px; } /* On the spectrum itself, or inside a filled button, the mark goes flat. */ .ez-ai-mark--flat { background-image: none; background-color: currentColor; } :root { --ez-ai-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M11.9 10.2L12.9 6.6M14.4 11.9L19.6 9.2M13.6 15.9L18 19.4M8.3 15.1L4 17.8'/%3E%3Ccircle cx='11.5' cy='13.5' r='3.3' fill='%23000' stroke='none'/%3E%3Ccircle cx='13.2' cy='4.6' r='2' fill='%23000' stroke='none'/%3E%3C/svg%3E"); /* @kind other */ } /* -- Wordmark lockup -- */ .ez-ai-lockup { display: inline-flex; align-items: center; gap: var(--space-2); } .ez-ai-wordmark { font-size: var(--fs-eyebrow); font-weight: var(--fw-black); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; background-image: var(--ai-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; } /* -- Badge: replaces a plain purple badge on AI surfaces -- */ .ez-ai-badge { display: inline-flex; align-items: center; gap: var(--space-2); background-image: var(--ai-spectrum); color: var(--on-brand); font-size: var(--fs-eyebrow); font-weight: var(--fw-black); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); white-space: nowrap; line-height: 1.4; box-shadow: var(--ai-glow); } /* -- Spectrum strip. Distinct from --transition-strip, which stays purple→coral. -- */ .ez-ai-strip { block-size: var(--strip-height); background-image: var(--ai-spectrum); } /* -- Entry point. NOT a button: a spectrum-bordered tile that reads as a doorway. -- */ .ez-ai-entry { display: inline-flex; align-items: center; gap: var(--space-3); background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--ai-spectrum) border-box; border: 2px solid transparent; border-radius: var(--radius-md); padding: 0.7rem 1.1rem; min-block-size: var(--tap-min); cursor: pointer; font-family: var(--font-sans); font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--ai-ink); text-align: start; transition: var(--t-card-lift), var(--t-color); } .ez-ai-entry:hover { transform: translateY(-1px); box-shadow: var(--ai-glow); text-decoration: none; } .ez-ai-entry:focus-visible { outline: 2px solid var(--indigo-soft); outline-offset: 2px; } .ez-ai-entry__text { display: flex; flex-direction: column; gap: 0.15rem; min-inline-size: 0; line-height: var(--lh-heading); } .ez-ai-entry__note { font-size: var(--fs-footnote); font-weight: var(--fw-semibold); color: var(--text-muted); line-height: var(--lh-heading); } .ez-ai-entry--solid { background-image: var(--ai-spectrum); border-color: transparent; color: var(--on-brand); box-shadow: var(--ai-glow); } .ez-ai-entry--solid .ez-ai-entry__note { color: rgba(255,255,255,0.82); } /* -- Tile: the AI corner as a card in a grid -- */ .ez-ai-tile { position: relative; display: flex; flex-direction: column; gap: var(--space-3); background: var(--ai-spectrum-soft); border: 1px solid var(--ai-ring); border-radius: var(--radius-lg); padding: var(--space-6); overflow: hidden; transition: var(--t-card-lift); } .ez-ai-tile::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: var(--strip-height); background-image: var(--ai-spectrum); } .ez-ai-tile:hover { transform: translateY(-2px); box-shadow: var(--ai-glow); } .ez-ai-tile__title { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text); } .ez-ai-tile__body { margin: 0; font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); color: var(--text-soft); text-wrap: pretty; } /* -- The panel -- */ .ez-insight { position: relative; background: var(--surface); border: 1px solid var(--ai-ring); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; } .ez-insight__strip { block-size: var(--strip-height); background-image: var(--ai-spectrum); } .ez-insight__head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-5) var(--space-6) 0; } .ez-insight__body { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4) var(--space-6) var(--space-6); } .ez-insight__title { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-black); line-height: var(--lh-heading); color: var(--text); } .ez-insight__block { display: flex; flex-direction: column; gap: var(--space-2); } .ez-insight__block-title { font-size: var(--fs-body-sm); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ai-ink); } .ez-insight__text { margin: 0; line-height: var(--lh-relaxed); color: var(--text-soft); text-wrap: pretty; } .ez-insight__sources { display: flex; gap: var(--space-2); flex-wrap: wrap; } .ez-insight__source { font-size: var(--fs-footnote); font-weight: var(--fw-semibold); color: var(--text-muted); background: var(--border-soft); border-radius: var(--radius-pill); padding: 0.2rem 0.6rem; } .ez-insight__source:hover { background: var(--ai-hover-bg); color: var(--ai-ink); text-decoration: none; } .ez-insight__footer { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; border-block-start: 1px solid var(--border-soft); background: var(--surface-alt); padding: var(--space-3) var(--space-6); font-size: var(--fs-footnote); color: var(--text-light); } /* Provenance items wrap between each other, never inside one — "EZ42 · 3.1" split across two lines reads as a broken value. */ .ez-insight__footer > span { white-space: nowrap; } /* -- Run states. The node breathes while thinking; the strip sweeps. -- */ .ez-insight__run { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-bold); } .ez-insight__run::before { content: ""; inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; } .ez-insight[data-run="queued"] .ez-insight__run { color: var(--text-light); } .ez-insight[data-run="running"] .ez-insight__run { color: var(--ai-ink); } .ez-insight[data-run="running"] .ez-insight__run::before { animation: ez-ai-breathe 1.6s var(--ease) infinite; } .ez-insight[data-run="done"] .ez-insight__run { color: var(--success-text); } .ez-insight[data-run="failed"] .ez-insight__run { color: var(--error-text); } .ez-insight[data-run="running"] .ez-insight__strip, .ez-ai-strip.is-running { background-size: 200% 100%; background-image: linear-gradient(100deg,#7c3aed 0%,#6366f1 25%,#00acc1 50%,#6366f1 75%,#7c3aed 100%); animation: ez-ai-sweep 2.2s linear infinite; } .ez-insight[data-run="running"] .ez-ai-mark { animation: ez-ai-breathe 1.6s var(--ease) infinite; } .ez-insight[data-run="failed"] .ez-insight__strip { background-image: none; background: var(--error-border); } .ez-insight[data-run="queued"] .ez-insight__strip { background-image: none; background: var(--border); } /* -- Thinking placeholder, shown in the body while running -- */ .ez-ai-thinking { display: flex; flex-direction: column; gap: var(--space-3); } /* A display: declaration on the class beats the UA sheet's [hidden] { display:none }, so every component whose base rule sets display must opt back in explicitly. */ .ez-ai-thinking[hidden], .ez-insight__block[hidden], .ez-ai-lockup[hidden] { display: none; } .ez-ai-thinking__line { block-size: 0.85em; border-radius: var(--radius-sm); background-image: var(--ai-spectrum-soft); background-color: var(--ai-hover-bg); background-size: 200% 100%; animation: ez-ai-sweep 2.2s linear infinite; } .ez-ai-thinking__line:nth-child(2) { inline-size: 82%; } .ez-ai-thinking__line:nth-child(3) { inline-size: 64%; } @media (prefers-reduced-motion: reduce) { .ez-insight[data-run="running"] .ez-insight__strip, .ez-ai-strip.is-running, .ez-ai-thinking__line, .ez-insight__run::before, .ez-ai-mark { animation: none !important; } } /* ==== 14 OVERLAYS ========================================================= */ /* -- Toast: block-start inline-end, so it lands top-left in RTL, top-right in LTR -- */ .ez-toast-region { position: fixed; inset-block-start: var(--space-5); inset-inline-end: var(--space-5); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-3); inline-size: min(380px, calc(100vw - 2 * var(--space-5))); pointer-events: none; } .ez-toast { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: var(--space-3); align-items: start; background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--text-light); border-radius: var(--radius-md); box-shadow: var(--shadow-overlay); padding: var(--space-4); pointer-events: auto; animation: ez-toast-in var(--dur) var(--ease-out) both; } .ez-toast.is-leaving { animation: ez-toast-out var(--dur) var(--ease) both; } .ez-toast__title { font-weight: var(--fw-bold); color: var(--text); font-size: var(--fs-body-sm); } .ez-toast__body { font-size: var(--fs-body-sm); color: var(--text-muted); line-height: var(--lh-body); } .ez-toast__close { -webkit-appearance: none; appearance: none; background: none; border: none; color: var(--text-light); cursor: pointer; padding: 0.3rem; border-radius: var(--radius-sm); min-block-size: 32px; min-inline-size: 32px; } .ez-toast__close:hover { color: var(--text); background: var(--border-soft); } .ez-toast--success { border-inline-start-color: var(--success-border); } .ez-toast--success .ez-toast__icon { color: var(--success-text); } .ez-toast--error { border-inline-start-color: var(--error-border); } .ez-toast--error .ez-toast__icon { color: var(--error-text); } .ez-toast--warning { border-inline-start-color: var(--warn-border); } .ez-toast--warning .ez-toast__icon { color: var(--warn-text); } .ez-toast--info { border-inline-start-color: var(--info-border); } .ez-toast--info .ez-toast__icon { color: var(--info-text); } /* -- Scrim, shared by modal and drawer -- */ .ez-scrim { position: fixed; inset: 0; background: var(--overlay); z-index: var(--z-scrim); animation: ez-fade-in var(--dur) var(--ease) both; } .ez-scrim[hidden] { display: none; } /* -- Modal -- */ .ez-modal { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-5); } .ez-modal[hidden] { display: none; } .ez-modal__panel { position: relative; display: flex; flex-direction: column; inline-size: min(520px, 100%); max-block-size: min(86vh, 720px); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-overlay); overflow: hidden; animation: ez-pop-in var(--dur) var(--ease-out) both; } .ez-modal__panel--wide { inline-size: min(720px, 100%); } .ez-modal__strip { block-size: var(--strip-height); background: var(--transition-strip); flex: 0 0 auto; } .ez-modal__head { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5) var(--space-6) var(--space-3); flex: 0 0 auto; } .ez-modal__icon { inline-size: 44px; block-size: 44px; flex: 0 0 auto; border-radius: var(--radius-circle); background: var(--tip-bg-from); color: var(--purple-dark); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; } .ez-modal--danger .ez-modal__icon { background: var(--error-bg); color: var(--error-text); } .ez-modal__title { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); color: var(--text); } .ez-modal__body { flex: 1 1 auto; overflow-y: auto; padding: 0 var(--space-6) var(--space-5); line-height: var(--lh-relaxed); color: var(--text-soft); } .ez-modal__footer { flex: 0 0 auto; display: flex; gap: var(--space-3); justify-content: flex-end; flex-wrap: wrap; border-block-start: 1px solid var(--border-soft); background: var(--surface-alt); padding: var(--space-4) var(--space-6); } .ez-modal__close { position: absolute; inset-block-start: var(--space-3); inset-inline-end: var(--space-3); -webkit-appearance: none; appearance: none; background: none; border: none; color: var(--text-light); cursor: pointer; padding: 0.4rem; border-radius: var(--radius-sm); min-block-size: 36px; min-inline-size: 36px; } .ez-modal__close:hover { color: var(--text); background: var(--border-soft); } /* -- Drawer: desktop side sheet, mobile bottom sheet -- */ .ez-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; z-index: var(--z-drawer); inline-size: min(420px, 100%); background: var(--surface); box-shadow: var(--shadow-overlay); display: flex; flex-direction: column; transform: translateX(100%); transition: var(--t-drawer); } [dir="rtl"] .ez-drawer { transform: translateX(-100%); } /* RTL OVERRIDE: slides in from the inline end */ .ez-drawer.is-open { transform: none; } .ez-drawer__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-3); border-block-end: 1px solid var(--border-soft); } .ez-drawer__title { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-bold); color: var(--text); } .ez-drawer__close { margin-inline-start: auto; } .ez-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: var(--space-5); } .ez-drawer__footer { border-block-start: 1px solid var(--border-soft); background: var(--surface-alt); padding: var(--space-4) var(--space-5); display: flex; gap: var(--space-3); } /* -- Callout -- */ .ez-callout { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: var(--space-3); align-items: start; border: 1px solid var(--tip-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); background: linear-gradient(135deg, var(--tip-bg-from) 0%, var(--tip-bg-to) 100%); color: var(--tip-text); } .ez-callout__title { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; margin-block-end: var(--space-1); } .ez-callout__text { margin: 0; font-size: var(--fs-body-sm); line-height: var(--lh-relaxed); color: inherit; } .ez-callout--warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); } .ez-callout--info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); } .ez-callout--success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); } .ez-callout__dismiss { -webkit-appearance: none; appearance: none; background: none; border: none; color: inherit; opacity: 0.6; cursor: pointer; padding: 0.3rem; border-radius: var(--radius-sm); min-block-size: 32px; min-inline-size: 32px; } .ez-callout__dismiss:hover { opacity: 1; background: var(--hover-veil); } /* ==== 15 LOADING ========================================================== */ .ez-skeleton { background-color: var(--border-soft); border-radius: var(--radius-sm); background-image: linear-gradient(90deg, var(--border-soft) 0%, var(--skeleton-shine) 50%, var(--border-soft) 100%); background-size: 200% 100%; animation: ez-shimmer 1.4s linear infinite; } .ez-skeleton--text { block-size: 0.85em; margin-block: 0.3em; } .ez-skeleton--title { block-size: 1.3em; inline-size: 55%; } .ez-skeleton--line-60 { inline-size: 60%; } .ez-skeleton--line-80 { inline-size: 80%; } .ez-skeleton--circle { border-radius: var(--radius-circle); } .ez-skeleton-card { display: flex; flex-direction: column; gap: var(--space-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--space-6); } .ez-skeleton-card__head { display: flex; gap: var(--space-4); align-items: center; } .ez-skeleton-card__icon { inline-size: 52px; block-size: 52px; flex: 0 0 auto; border-radius: var(--radius-md); } .ez-skeleton-row { display: grid; grid-template-columns: 32px minmax(0,1fr) 80px; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-5); border-block-end: 1px solid var(--border-soft); } .ez-skeleton-table { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .ez-skeleton-hero { background: var(--hero-gradient); padding-block: var(--space-8); } .ez-skeleton-hero .ez-skeleton { background-color: rgba(255,255,255,0.25); background-image: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.38) 50%, rgba(255,255,255,0.2) 100%); } .ez-spinner { display: inline-block; inline-size: 20px; block-size: 20px; border: 2px solid var(--border); border-top-color: var(--purple); border-radius: 50%; animation: ez-spin 0.7s linear infinite; } .ez-spinner--lg { inline-size: 34px; block-size: 34px; border-width: 3px; } .ez-spinner--on-brand { border-color: rgba(255,255,255,0.35); border-top-color: var(--on-brand); } .ez-autosave { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-footnote); font-weight: var(--fw-semibold); color: var(--text-light); } .ez-autosave[data-state="saving"] { color: var(--text-muted); } .ez-autosave[data-state="saved"] { color: var(--success-text); } .ez-autosave[data-state="error"] { color: var(--error-text); } /* ==== 16 FORMS ============================================================ */ .ez-field { display: flex; flex-direction: column; gap: var(--space-2); min-inline-size: 0; } .ez-label { font-size: var(--fs-body-sm); font-weight: var(--fw-semibold); color: var(--text); } .ez-label__req { color: var(--orange-dark); font-weight: var(--fw-bold); } .ez-help { font-size: var(--fs-footnote); color: var(--text-muted); line-height: var(--lh-body); } .ez-error { display: flex; align-items: center; gap: var(--space-1); font-size: var(--fs-footnote); font-weight: var(--fw-semibold); color: var(--error-text); } .ez-input, .ez-textarea, .ez-select__button { -webkit-appearance: none; appearance: none; inline-size: 100%; font-family: var(--font-sans); font-size: var(--fs-body); color: var(--text); background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-md); padding: 0.7rem 0.9rem; min-block-size: var(--tap-min); line-height: var(--lh-body); transition: var(--t-color); text-align: start; } .ez-input::placeholder, .ez-textarea::placeholder { color: var(--text-light); } .ez-input:hover, .ez-textarea:hover { border-color: var(--border-strong); } .ez-input:focus, .ez-textarea:focus, .ez-select__button:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; border-color: var(--purple); } .ez-input:disabled, .ez-textarea:disabled { background: var(--border-soft); color: var(--text-light); cursor: not-allowed; } .ez-input[aria-invalid="true"], .ez-textarea[aria-invalid="true"] { border-color: var(--error-border); background: var(--error-bg); } .ez-textarea { resize: vertical; min-block-size: 96px; } .ez-counter { align-self: flex-end; font-size: var(--fs-footnote); color: var(--text-light); font-variant-numeric: tabular-nums; } .ez-counter.is-over { color: var(--error-text); font-weight: var(--fw-bold); } /* Custom select: button + listbox, not a native (the .ez-select block is the custom listbox) */ .ez-native-select { -webkit-appearance: none; appearance: none; display: block; inline-size: 100%; margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.4; color: var(--text); background-color: var(--surface); border: 2px solid var(--border); border-radius: var(--radius-md); padding-block: 0.7rem; padding-inline: 0.9rem 2.5rem; min-block-size: var(--tap-min); cursor: pointer; transition: var(--t-color); background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9rem) 50%; background-size: 0.35rem 0.35rem; background-repeat: no-repeat; } [dir="rtl"] .ez-native-select { background-position: 0.9rem 50%, 1.25rem 50%; } /* RTL OVERRIDE */ .ez-native-select:hover { border-color: var(--border-strong); } .ez-native-select:focus { outline: 2px solid var(--focus-color); outline-offset: 2px; border-color: var(--purple); } .ez-native-select[aria-invalid="true"] { border-color: var(--error-border); } .ez-native-select:disabled { background-color: var(--border-soft); color: var(--text-light); cursor: not-allowed; } /* Monospace fields (SQL, code): always LTR */ .ez-input--mono, .ez-textarea--mono { font-family: var(--font-mono); font-size: var(--fs-mono); line-height: 1.6; tab-size: 2; direction: ltr; unicode-bidi: isolate; text-align: left; } /* Page header: breadcrumb, title, description, actions on the inline end */ .ez-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-6); padding-block-end: var(--space-5); margin-block-end: var(--space-6); border-block-end: 1px solid var(--border); } .ez-page-header__main { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 20rem; min-inline-size: 0; } .ez-page-header__title { margin: 0; font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-tight); color: var(--text); } .ez-page-header__desc { margin: 0; max-inline-size: 70ch; font-size: var(--fs-body-sm); line-height: 1.6; color: var(--text-muted); } .ez-page-header__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); } .ez-breadcrumb a { color: var(--text-muted); text-decoration: none; border-radius: 2px; } .ez-breadcrumb a:hover { color: var(--purple-dark); text-decoration: underline; } /* Alert: inline flash message. Toast look, in the page flow. */ .ez-alerts { display: flex; flex-direction: column; gap: var(--space-3); } .ez-alert { display: flex; align-items: flex-start; gap: var(--space-3); background: var(--surface); border: 1px solid var(--border); border-inline-start: 4px solid var(--text-light); border-radius: var(--radius-md); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); font-size: var(--fs-body-sm); line-height: 1.55; color: var(--text-soft); } [dir="rtl"] .ez-alert { padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3); } /* RTL OVERRIDE */ .ez-alert[hidden] { display: none; } .ez-alert__icon { margin-block-start: 0.1rem; } .ez-alert__body { flex: 1 1 auto; min-inline-size: 0; } .ez-alert__title { font-weight: var(--fw-bold); color: var(--text); } .ez-alert__close { -webkit-appearance: none; appearance: none; background: none; border: none; flex: 0 0 auto; color: var(--text-light); cursor: pointer; padding: 0.3rem; margin-block: -0.2rem; border-radius: var(--radius-sm); min-block-size: 32px; min-inline-size: 32px; display: inline-flex; align-items: center; justify-content: center; } .ez-alert__close:hover { color: var(--text); background: var(--border-soft); } .ez-alert--success { border-inline-start-color: var(--success-border); } .ez-alert--success .ez-alert__icon { color: var(--success-text); } .ez-alert--error { border-inline-start-color: var(--error-border); } .ez-alert--error .ez-alert__icon { color: var(--error-text); } .ez-alert--warning { border-inline-start-color: var(--warn-border); } .ez-alert--warning .ez-alert__icon { color: var(--warn-text); } .ez-alert--info { border-inline-start-color: var(--info-border); } .ez-alert--info .ez-alert__icon { color: var(--info-text); } /* Disclosure: native
/, no JS */ .ez-disclosure { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); } .ez-disclosure__summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-block-size: var(--tap-min); padding: var(--space-3) var(--space-5); list-style: none; cursor: pointer; border-radius: var(--radius-lg); font-weight: var(--fw-bold); line-height: 1.4; color: var(--text); } .ez-disclosure__summary::-webkit-details-marker { display: none; } .ez-disclosure__summary::marker { content: ""; } .ez-disclosure__summary:hover { color: var(--purple-dark); } .ez-disclosure__meta { margin-inline-start: auto; font-size: var(--fs-footnote); font-weight: var(--fw-semibold); color: var(--text-muted); } .ez-disclosure__chevron { color: var(--text-light); transition: transform var(--dur) var(--ease); } .ez-disclosure[open] > .ez-disclosure__summary { border-block-end: 1px solid var(--border); border-end-start-radius: 0; border-end-end-radius: 0; } .ez-disclosure[open] > .ez-disclosure__summary .ez-disclosure__chevron { transform: rotate(180deg); } .ez-disclosure__body { padding: var(--space-5); } /* Code block */ .ez-code-block { display: flex; flex-direction: column; gap: var(--space-2); min-inline-size: 0; } .ez-code-block__label { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); } .ez-code { display: block; margin: 0; padding: var(--space-4) var(--space-5); max-block-size: var(--ez-code-max, 24rem); overflow: auto; font-family: var(--font-mono); font-size: var(--fs-mono); line-height: 1.6; white-space: pre; tab-size: 2; direction: ltr; unicode-bidi: isolate; text-align: left; color: var(--code-text); background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--radius-md); } /* Data table: admin cells. Put the modifier on th AND td of a column. */ .ez-table--dense th, .ez-table--dense td { padding: var(--space-2) var(--space-4); } .ez-table .ez-table__cell--rownum { inline-size: 1%; text-align: end; white-space: nowrap; color: var(--text-muted); font-variant-numeric: tabular-nums; } .ez-table .ez-table__cell--num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; } .ez-table .ez-table__cell--truncate { max-inline-size: var(--ez-cell-max, 18rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ez-table .ez-table__cell--truncate:hover, .ez-table .ez-table__cell--truncate:focus { white-space: normal; overflow-wrap: anywhere; } .ez-table .ez-table__cell--null { color: var(--text-muted); } .ez-table .ez-table__cell--actions { inline-size: 1%; white-space: nowrap; } .ez-table__cell--actions .ez-table__actions { justify-content: flex-end; } .ez-table__link { color: var(--purple-dark); font-weight: var(--fw-semibold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; border-radius: 2px; } .ez-table__link:hover { color: var(--purple-dark); text-decoration-thickness: 2px; } .ez-table__sort:focus-visible { border-radius: var(--radius-sm); } /* ==== RESPONSIVE ========================================================== App pages redirect below 1280px, so these rules serve the mobile-allowed surfaces: store, landing, articles, downloads. */ @media (max-width: 768px) { .ez-container, .ez-hero__inner, .ez-toolbar__inner { padding-inline: var(--space-4); } .ez-hero { padding-block: var(--space-6); } .ez-hero__title, .ez-h1 { font-size: var(--fs-hero-mobile); } .ez-h2, .ez-section-header__title, .ez-insight__title, .ez-restricted__title { font-size: 1.4rem; } .ez-hero__inner { flex-direction: column; align-items: stretch; } .ez-hero__actions .ez-btn { flex: 1 1 auto; } .ez-hero__stats { gap: var(--space-5); } .ez-card { padding: var(--space-5); } .ez-card-grid, .ez-card-grid--2, .ez-card-grid--wide { grid-template-columns: minmax(0,1fr); gap: var(--space-4); } .ez-stats-bar, .ez-stats-bar--3, .ez-stats-bar--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } .ez-form-grid { grid-template-columns: minmax(0,1fr); } .ez-filter-row { flex-direction: column; align-items: stretch; padding: var(--space-4); } .ez-filter-divider { display: none; } .ez-filter-row__reset { margin-inline-start: 0; } .ez-search { max-inline-size: none; } .ez-card__stats { gap: var(--space-4); } .ez-modal { padding: 0; align-items: flex-end; } .ez-modal__panel { inline-size: 100%; max-block-size: 92vh; border-end-start-radius: 0; border-end-end-radius: 0; } .ez-modal__footer { flex-direction: column-reverse; } .ez-modal__footer .ez-btn { inline-size: 100%; } /* Drawer becomes a bottom sheet */ .ez-drawer { inset-block-start: auto; inset-inline: 0; inline-size: 100%; max-block-size: 88vh; border-start-start-radius: var(--radius-lg); border-start-end-radius: var(--radius-lg); transform: translateY(100%); } [dir="rtl"] .ez-drawer { transform: translateY(100%); } /* RTL OVERRIDE: sheet slides up, never sideways */ .ez-drawer.is-open { transform: none; } .ez-toast-region { inset-inline: var(--space-4); inline-size: auto; } /* Table becomes card-per-row */ .ez-table-wrap--responsive { border: none; background: none; box-shadow: none; overflow: visible; max-block-size: none; } .ez-table-wrap--responsive .ez-table { display: none; } .ez-table-wrap--responsive .ez-table__cards { display: flex; flex-direction: column; gap: var(--space-3); } .ez-table-card { display: flex; flex-direction: column; gap: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-4); } .ez-table-card__row { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--fs-body-sm); } .ez-table-card__label { flex: 0 0 40%; font-size: var(--fs-footnote); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); } .ez-table-card__value { min-inline-size: 0; color: var(--text); } .ez-wizard { overflow-x: auto; gap: var(--space-3); } .ez-wizard__step { flex: 0 0 96px; } .ez-list-row { grid-template-columns: auto minmax(0,1fr); } .ez-list-row__end { grid-column: 2; justify-content: flex-start; } } @media (max-width: 480px) { .ez-container, .ez-hero__inner { padding-inline: var(--space-3); } .ez-card, .ez-runner__q { padding: var(--space-4); } .ez-stats-bar, .ez-stats-bar--2, .ez-stats-bar--3, .ez-stats-bar--4 { grid-template-columns: minmax(0,1fr); } .ez-hero__stats { flex-direction: column; gap: var(--space-3); } .ez-btn { inline-size: 100%; } .ez-btn--icon, .ez-btn--inline { inline-size: auto; } .ez-likert { flex-wrap: wrap; } .ez-likert__btn { flex: 1 1 18%; } .ez-card__head { flex-direction: column; } .ez-tabs { gap: 0; } .ez-tab { padding-inline: 0.8rem; } } /* ==== 20 PRINT ============================================================ Ink-safe: gradients and brand fills become white with dark ink and a rule. Chrome disappears. Cards do not split across pages. */ @media print { @page { margin: 14mm; } .ez-page { background: #fff; color: #000; } .ez-no-print, .ez-tabs, .ez-toolbar, .ez-filter-row, .ez-pagination, .ez-loadmore, .ez-toast-region, .ez-scrim, .ez-drawer, .ez-btn, .ez-search, .ez-view-switcher, .ez-qrow__tools, .ez-card__lock { display: none !important; } .ez-print-only { display: revert !important; } .ez-hero, .ez-promo, .ez-insight__strip, .ez-strip, .ez-modal__strip, .ez-card__accent, .ez-ai-strip, .ez-ai-badge, .ez-ai-tile, .ez-ai-entry { background: #fff !important; background-image: none !important; color: #000 !important; } .ez-ai-mark { background-image: none !important; background-color: #000 !important; } .ez-ai-wordmark { background-image: none !important; color: #000 !important; } .ez-ai-tile, .ez-ai-entry, .ez-ai-badge { border: 1px solid #999 !important; box-shadow: none !important; } .ez-hero { border-block-end: 2px solid #000; padding-block: 0 var(--space-4); } .ez-hero__title, .ez-hero__subtitle, .ez-hero__eyebrow, .ez-hero__stat-label { color: #000 !important; } .ez-strip, .ez-insight__strip, .ez-card__accent { border-block-end: 2px solid #000; block-size: 0; } .ez-card, .ez-stat, .ez-insight, .ez-table-wrap, .ez-runner__q, .ez-callout { box-shadow: none !important; border: 1px solid #999 !important; break-inside: avoid; page-break-inside: avoid; } .ez-table-wrap { max-block-size: none; overflow: visible; } .ez-table thead th { position: static; background: #eee !important; color: #000 !important; } .ez-table thead { display: table-header-group; } .ez-table tbody tr { break-inside: avoid; } .ez-h1, .ez-h2, .ez-h3, .ez-card__title, .ez-section-header__title { break-after: avoid; } .ez-badge, .ez-chip, .ez-tag { border: 1px solid #999 !important; background: #fff !important; color: #000 !important; } .ez-progress__fill { background: #555 !important; } .ez-report-break { break-before: page; page-break-before: always; } } .ez-print-only { display: none; } /* ==== REPORT / PRINT SURFACES ============================================= */ .ez-report-head { display: flex; align-items: flex-start; gap: var(--space-5); border-block-end: 2px solid var(--border); padding-block-end: var(--space-4); margin-block-end: var(--space-5); } .ez-report-head__logo { inline-size: 48px; block-size: 48px; flex: 0 0 auto; } .ez-report-head__meta { margin-inline-start: auto; text-align: end; font-size: var(--fs-body-sm); color: var(--text-muted); display: flex; flex-direction: column; gap: 0.15rem; } .ez-score-block { display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--space-5); align-items: center; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); } .ez-skill-breakdown { display: flex; flex-direction: column; gap: var(--space-4); } .ez-skill-breakdown__row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) 56px; gap: var(--space-4); align-items: center; font-size: var(--fs-body-sm); } .ez-skill-breakdown__name { font-weight: var(--fw-semibold); color: var(--text); } .ez-skill-breakdown__score { text-align: end; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }