/* src/web/static/app.css — T16: the one stylesheet for all owned screens (blueprint §8). Tokens on :root; AA contrast (4.5:1 body text, 3:1 large text, UI borders and focus); visible :focus-visible outline; 24×24 CSS-pixel minimum targets (WCAG 2.2 AA 2.5.8); no horizontal scroll at 320px; honours prefers-reduced-motion. */ /* UX-MATURE (2026-09-28): this file has two halves. LEGACY — every rule below up to the "DESIGN LANGUAGE v2" banner is scoped with :where(html:not([data-design])) (zero added specificity), so it styles only pages still rendered by the old layout (tests/gates/design-v2.test.ts KNOWN_OLD) and shrinks as they are rebuilt. V2 — the banner section at the end applies only to pages. */ /* UX-MATURE: self-hosted variable fonts (SIL OFL; licences in /static/fonts). Design language v2 (Owner approval 2026-09-27): the Refero "Claude" system — Source Serif 4 for display (weight 400 only), Inter for everything else — with Hermès orange #F37021 as the single chromatic accent. Metric-matched local fallbacks keep layout stable while the files load (font-display: swap). */ @font-face { font-family: "Inter"; src: url("/static/fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Source Serif 4"; src: url("/static/fonts/SourceSerif4-Variable.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter Fallback"; src: local("Helvetica Neue"), local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: "Source Serif 4 Fallback"; src: local("Georgia"), local("Times New Roman"); size-adjust: 103%; ascent-override: 91%; descent-override: 27%; line-gap-override: 0%; } :root { --layout-form-width: 58rem; --layout-field-min: 18rem; --text-section-heading: 1.25rem; --skeleton-section-height: 14rem; --layer-sticky: 10; --layout-auth-width: 26rem; --layout-consent-width: 36rem; --text-auth-title: 2.5rem; --control-height: 3rem; --motion-fast: 150ms; --motion-standard: 200ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --press-scale: 0.98; --border-width: 1px; --focus-width: 3px; --focus-offset: 2px; /* Design language v2 (Owner approval 2026-09-27): Refero "Claude" system tokens. Surfaces are a paper progression — canvas (bone parchment) → paper (cards) → stone (nested). */ --canvas: #f8f8f6; --paper: #ffffff; --stone: #efeeeb; --chalk: #e7e6e1; --mist: #b7b7b5; --obsidian: #000000; --surface-soft: var(--stone); --surface-card: var(--paper); --surface-cream-strong: var(--chalk); --ink: #121212; --body: #373734; /* The system's "ashen" #7b7974 is 4.09:1 on the canvas; readable secondary text uses this warmer-darker step of the same family (5.1:1). #7b7974 is kept for decorative captions only. */ --muted: #6c6a64; --ashen: #7b7974; --pebble: #9c9a92; /* Accent — Hermès orange, the only chromatic colour (Owner 2026-09-27). Never a button fill (system rule: actions are ink on canvas or canvas on ink). Orange TEXT uses --brand-text, the same hue darkened to 5.05:1 on the canvas. */ --brand: #F37021; --brand-hover: #D95F14; --on-brand: #121212; --brand-text: #b04d0f; --primary-active: var(--ink); --primary: var(--brand); --error: #c64545; --error-text: #b33a3a; --success: #5db872; --warning: #d4a017; /* Control borders must clear 3:1 (WCAG 1.4.11); the system's mist #b7b7b5 is 1.9:1, so controls use this warm grey of the same family (3.2:1). Mist and chalk are decorative. */ --muted-soft: #8e8b82; --hairline: var(--chalk); --surface-dark: var(--obsidian); --on-dark: #f8f8f6; --on-dark-muted: #9c9a92; --shadow-lg: rgba(0, 0, 0, 0.04) 0 4px 20px 0; --shadow-lg-2: rgba(0, 0, 0, 0.10) 0 4px 24px 0; --font-display: "Source Serif 4", "Source Serif 4 Fallback", ui-serif, Georgia, Cambria, "Times New Roman", serif; --font-body: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono-numbers: "Inter", ui-sans-serif, system-ui, sans-serif; --font-weight-regular: 400; --font-weight-medium: 500; --spacing-unit: 4px; --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-24: 24px; --spacing-32: 32px; --spacing-48: 48px; --spacing-96: 96px; --section-gap: 48px; --card-padding: 32px; --element-gap: 16px; --radius-buttons: 8px; /* v2 system: 8px controls (supersedes the 2026-09-26 pill decision; Owner approval 2026-09-27) */ --radius-inputs: 8px; --radius-cards: 16px; --radius-large: 24px; --radius-pills: 999px; /* badges and pill tabs only */ --radius-small: 8px; --shadow-subtle: var(--shadow-lg); /* Compatibility aliases for existing page classes; all resolve to 10C tokens. */ --color-gallery-white: var(--canvas); --color-studio-mist: var(--surface-soft); --color-paper-frost: var(--canvas); --color-hairline-silver: var(--hairline); --color-control-gray: var(--surface-cream-strong); --color-ink: var(--ink); --color-slate: var(--muted); --color-steel: var(--muted-soft); --color-apple-blue: var(--primary-active); --color-pricing-blue: var(--primary-active); --color-launch-orange: var(--error); --font-sf-pro-display: var(--font-display); --font-sf-pro-text: var(--font-body); --font-arial: var(--font-body); --text-global-nav: 14px; --leading-global-nav: 1.4; --tracking-global-nav: 0; --text-compact-control: 16px; --leading-compact-control: 1.35; --tracking-compact-control: 0; --text-body-small: 14px; --leading-body-small: 1.5; --tracking-body-small: 0; --text-body: 16px; --leading-body: 1.55; --tracking-body: 0; --text-feature-copy: 16px; --leading-feature-copy: 1.55; --tracking-feature-copy: 0; --text-product-nav-title: 16px; --leading-product-nav-title: 1.4; --tracking-product-nav-title: 0; --text-product-kicker: 16px; --leading-product-kicker: 1.4; --tracking-product-kicker: 0; --text-feature-heading: 36px; --leading-feature-heading: 1.12; --tracking-feature-heading: -0.02em; --text-hero-display: 56px; --leading-hero-display: 1.05; --tracking-hero-display: -0.02em; --font-weight-semibold: 500; --spacing-20: 24px; --spacing-28: 32px; --spacing-40: 48px; --spacing-52: 48px; --spacing-64: 48px; --spacing-76: 96px; --spacing-80: 96px; --spacing-128: 96px; --spacing-144: 96px; --radius-links: 8px; --radius-badges: 999px; --radius-images: 16px; --radius-navigation: 12px; --shadow-subtle-2: var(--shadow-subtle); --surface-gallery-white: var(--canvas); --surface-studio-mist: var(--surface-soft); --surface-paper-frost: var(--canvas); --surface-control-gray: var(--surface-cream-strong); --ink-soft: var(--muted); --surface: var(--surface-card); --border: var(--muted-soft); --control: var(--surface-cream-strong); --danger: var(--error); --danger-bg: #f9e8e5; --ok-bg: var(--surface-soft); --focus: var(--primary); --link: var(--primary-active); --action: var(--primary-active); --radius: 12px; --pad: 1rem; } /* UX-MATURE: authentication is a single decision, not a dashboard card. */ :where(html:not([data-design])) * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } :where(html:not([data-design])) body { margin: 0; background: var(--canvas); color: var(--body); font-family: var(--font-body); font-size: 16px; line-height: 1.55; letter-spacing: 0; } /* Skip link: hidden until focused, then clearly visible (WCAG 2.4.1 / 2.4.7). */ :where(html:not([data-design])) .skip-link { position: absolute; left: -9999px; top: 0; background: var(--paper); color: var(--link); padding: 0.75rem 1rem; z-index: 10; } :where(html:not([data-design])) .skip-link:focus { left: 0.5rem; top: 0.5rem; } :where(html:not([data-design])) main { max-width: 72rem; margin: 0 auto; padding: 48px 32px 96px; background: var(--canvas); border: 0; border-radius: 0; } :where(html:not([data-design])) h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 3.5rem); line-height: 1.05; margin: 0 0 24px; letter-spacing: -0.02em; font-weight: 500; color: var(--ink); } :where(html:not([data-design])) h2 { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1.12; margin: 48px 0 16px; letter-spacing: -0.02em; font-weight: 500; color: var(--ink); } :where(html:not([data-design])) h3 { font-family: var(--font-body); font-size: 1.125rem; line-height: 1.4; margin: 24px 0 8px; letter-spacing: 0; font-weight: 500; color: var(--ink); } /* Visible focus for every control (WCAG 2.4.11 / 2.4.13). */ :where(html:not([data-design])) a:focus-visible, :where(html:not([data-design])) button:focus-visible, :where(html:not([data-design])) input:focus-visible, :where(html:not([data-design])) select:focus-visible, :where(html:not([data-design])) textarea:focus-visible, :where(html:not([data-design])) [tabindex]:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 40%, transparent); outline-offset: 2px; border-radius: 8px; } :where(html:not([data-design])) a { color: var(--link); text-underline-offset: 0.15em; } :where(html:not([data-design])) fieldset { border: 0; border-radius: 12px; margin: 32px 0 0; padding: 32px; background: var(--surface-card); min-width: 0; } :where(html:not([data-design])) legend { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 500; line-height: 1.12; letter-spacing: -0.02em; width: auto; margin: 0 0 16px; padding: 0 4px; color: var(--ink); } :where(html:not([data-design])) .field { margin: 0 0 var(--spacing-40); } :where(html:not([data-design])) .field:last-child { margin-bottom: 0; } :where(html:not([data-design])) .field label { display: block; font-family: var(--font-body); font-size: 16px; line-height: 1.4; font-weight: 500; margin-bottom: 8px; letter-spacing: 0; color: var(--ink); } :where(html:not([data-design])) input:not([type]), :where(html:not([data-design])) input[type="text"], :where(html:not([data-design])) input[type="email"], :where(html:not([data-design])) input[type="number"], :where(html:not([data-design])) input[type="password"], :where(html:not([data-design])) input[type="url"], :where(html:not([data-design])) input[type="date"], :where(html:not([data-design])) input[type="time"], :where(html:not([data-design])) input[type="datetime-local"], :where(html:not([data-design])) select, :where(html:not([data-design])) textarea { display: block; width: 100%; max-width: 48rem; font: inherit; color: var(--ink); background: var(--canvas); border: 1px solid var(--muted-soft); border-radius: 8px; padding: 10px 12px; min-height: 44px; transition: border-color 160ms ease, background-color 160ms ease; } :where(html:not([data-design])) input:not([type]):hover, :where(html:not([data-design])) input[type="text"]:hover, :where(html:not([data-design])) input[type="email"]:hover, :where(html:not([data-design])) input[type="number"]:hover, :where(html:not([data-design])) textarea:hover { border-color: var(--color-steel); } :where(html:not([data-design])) input:not([type]):focus, :where(html:not([data-design])) input[type="text"]:focus, :where(html:not([data-design])) input[type="email"]:focus, :where(html:not([data-design])) input[type="number"]:focus, :where(html:not([data-design])) textarea:focus { border-color: var(--focus); outline: 0; background: var(--surface-soft); } :where(html:not([data-design])) input[type="checkbox"], :where(html:not([data-design])) input[type="radio"] { min-width: 24px; min-height: 24px; } :where(html:not([data-design])) .choice { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--spacing-12); row-gap: var(--spacing-4); align-items: start; margin: var(--spacing-20) 0; } :where(html:not([data-design])) .choice > label { grid-column: 2; display: block; font-family: var(--font-sf-pro-text); font-size: var(--text-body); line-height: var(--leading-body); font-weight: var(--font-weight-regular); letter-spacing: var(--tracking-body); } :where(html:not([data-design])) .choice > .hint, :where(html:not([data-design])) .choice > .field-error { grid-column: 2; } :where(html:not([data-design])) .choice input[type="radio"], :where(html:not([data-design])) .choice input[type="checkbox"] { grid-column: 1; grid-row: 1; width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--focus); } :where(html:not([data-design])) button, :where(html:not([data-design])) .button-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-size: 16px; line-height: 1.35; letter-spacing: 0; font-weight: 500; color: var(--ink); background: var(--canvas); border: 1px solid var(--muted-soft); border-radius: var(--radius-buttons); padding: 10px 20px; min-height: 44px; min-width: 44px; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 100ms ease-out; text-decoration: none; } :where(html:not([data-design])) button.primary, :where(html:not([data-design])) .button-link.primary { color: var(--on-brand); background: var(--brand); border-color: var(--brand); } :where(html:not([data-design])) button.danger { color: var(--error); background: var(--canvas); border-color: var(--error); } :where(html:not([data-design])) button.secondary, :where(html:not([data-design])) .button-link.secondary { color: var(--ink); background: var(--canvas); border-color: var(--muted-soft); } :where(html:not([data-design])) .button-link.quiet-link { min-height: 44px; padding: 0; border: 0; border-radius: var(--radius-links); color: var(--link); line-height: 25px; font-size: 17px; letter-spacing: -0.374px; } :where(html:not([data-design])) button:hover, :where(html:not([data-design])) .button-link:hover { background: var(--surface-soft); } :where(html:not([data-design])) button.primary:hover, :where(html:not([data-design])) .button-link.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); } :where(html:not([data-design])) .button-link.quiet-link:hover { background: transparent; color: var(--primary-active); transform: none; text-decoration: underline; } /* Instant press feedback (apple-design: respond on pointer-down, not release). */ :where(html:not([data-design])) button:active, :where(html:not([data-design])) .button-link:active { transform: scale(0.97); } :where(html:not([data-design])) .button-link.quiet-link:active { transform: none; } :where(html:not([data-design])) button.danger:hover { background: var(--danger-bg); color: var(--danger); } :where(html:not([data-design])) button:disabled { opacity: 0.7; cursor: wait; } :where(html:not([data-design])) .optional { font-weight: 400; color: var(--body); } :where(html:not([data-design])) .hint { color: var(--body); font-size: var(--text-feature-copy); line-height: var(--leading-feature-copy); margin: 0 0 var(--spacing-16); letter-spacing: var(--tracking-feature-copy); } :where(html:not([data-design])) .field-error { color: var(--error-text); font-weight: 600; margin: 0.5rem 0; background: var(--danger-bg); padding: 0.65rem 0.8rem; border-radius: var(--radius-small); } :where(html:not([data-design])) .live { min-height: 1.5em; margin: 0 0 0.5rem; font-weight: 600; } :where(html:not([data-design])) [aria-invalid="true"] { border-color: var(--danger); border-width: 2px; } @media (max-width: 22.5em) { /* 320px and below: single column, full-width controls, no horizontal scroll. */ :where(html:not([data-design])) main { padding: 0.75rem 0.75rem 3rem; } :where(html:not([data-design])) input:not([type]), :where(html:not([data-design])) input[type="text"], :where(html:not([data-design])) input[type="email"], :where(html:not([data-design])) input[type="number"], :where(html:not([data-design])) textarea { max-width: 100%; } :where(html:not([data-design])) button, :where(html:not([data-design])) .button-link { width: 100%; } } @media (prefers-reduced-motion: reduce) { :where(html:not([data-design])) * { transition: none !important; animation: none !important; } } /* Local preview directory. These styles are additive and do not change the form screens. */ :where(html:not([data-design])) .preview-main { max-width: 68rem; margin: 0 auto; padding: 0 2rem 6rem; background: var(--paper); border: 0; border-radius: 0; } :where(html:not([data-design])) .preview-nav { align-items: center; border-bottom: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: var(--element-gap); justify-content: space-between; min-height: 44px; padding: 0.75rem 0; } :where(html:not([data-design])) .preview-nav a { font-weight: 600; } :where(html:not([data-design])) .preview-nav .preview-brand { color: var(--ink); font-family: var(--font-sf-pro-display); font-size: 19px; letter-spacing: 0.012em; margin-right: auto; text-decoration: none; } :where(html:not([data-design])) .preview-hero { padding: var(--spacing-80) 0 var(--spacing-64); max-width: 58rem; margin: 0 auto; text-align: center; } :where(html:not([data-design])) .preview-kicker { color: var(--link); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; margin: 0 0 0.5rem; } :where(html:not([data-design])) .preview-hero h1 { font-family: var(--font-sf-pro-display); font-size: clamp(3rem, 7vw, var(--text-hero-display)); line-height: var(--leading-hero-display); letter-spacing: var(--tracking-hero-display); max-width: 15ch; margin: 0 auto 1.5rem; } :where(html:not([data-design])) .preview-lead { color: var(--ink-soft); font-size: var(--text-body); line-height: 1.24; max-width: 42rem; margin: 0 auto; letter-spacing: -0.015em; } :where(html:not([data-design])) .preview-note, :where(html:not([data-design])) .preview-callout { background: var(--surface); border-left: 0; border-radius: var(--radius-cards); padding: var(--element-gap) var(--card-padding); max-width: 52rem; margin: 2rem auto 0; text-align: left; } :where(html:not([data-design])) .preview-section-heading { margin-bottom: var(--element-gap); } :where(html:not([data-design])) .preview-section-heading h2 { margin: 0; } :where(html:not([data-design])) .preview-section-heading p:not(.preview-kicker) { color: var(--ink-soft); max-width: 48rem; } :where(html:not([data-design])) .preview-manual-first, :where(html:not([data-design])) .preview-help-section { background: var(--surface); border-radius: var(--radius-large); margin-top: var(--section-gap); padding: var(--card-padding); } :where(html:not([data-design])) .preview-pages-section { border-top: 1px solid var(--hairline); margin-top: var(--section-gap); padding-top: var(--card-padding); } :where(html:not([data-design])) .preview-choice-grid, :where(html:not([data-design])) .preview-help-grid { display: grid; gap: var(--element-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); } :where(html:not([data-design])) .preview-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } :where(html:not([data-design])) .preview-choice-card, :where(html:not([data-design])) .preview-help-card { border: 1px solid var(--hairline); border-radius: var(--radius-cards); padding: var(--card-padding); background: var(--paper); transition: border-color 160ms ease, transform 160ms ease, background-color 160ms ease; } :where(html:not([data-design])) .preview-choice-card:hover, :where(html:not([data-design])) .preview-help-card:hover { border-color: var(--action); transform: translateY(-2px); } :where(html:not([data-design])) .preview-choice-card { display: flex; gap: var(--element-gap); } :where(html:not([data-design])) .preview-choice-card h3, :where(html:not([data-design])) .preview-help-card h3 { margin-top: 0.35rem; } :where(html:not([data-design])) .preview-choice-card p, :where(html:not([data-design])) .preview-help-card p { color: var(--ink-soft); } :where(html:not([data-design])) .preview-card-label { color: var(--link) !important; font-family: var(--font-sf-pro-text); font-size: 12px; font-weight: 600; line-height: 1.33; letter-spacing: -0.01em; margin: 0; } :where(html:not([data-design])) .preview-step { align-items: center; background: transparent; border-radius: 0; color: var(--action); display: flex; flex: none; font-family: var(--font-sf-pro-display); font-size: 21px; font-weight: 600; height: auto; justify-content: center; width: auto; } :where(html:not([data-design])) .preview-manual-note { background: var(--surface); border-left: 0; border-radius: var(--radius-cards); margin: var(--element-gap) 0 0; padding: var(--element-gap) var(--card-padding); } :where(html:not([data-design])) .preview-page-list { border-top: 1px solid var(--hairline); } :where(html:not([data-design])) .preview-page-list a { align-items: center; border-bottom: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: var(--spacing-4) var(--element-gap); justify-content: space-between; min-height: 3.5rem; padding: 0.75rem 0; color: var(--ink); font-size: var(--text-body); letter-spacing: var(--tracking-body); text-decoration: none; } :where(html:not([data-design])) .preview-page-list a:hover strong { color: var(--link); } :where(html:not([data-design])) .preview-page-list span { color: var(--ink-soft); font-size: 14px; line-height: 1.29; } :where(html:not([data-design])) .preview-help-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } :where(html:not([data-design])) .preview-help-card { padding-top: var(--card-padding); } :where(html:not([data-design])) .assistant-card { border-top: 1px solid var(--hairline); } :where(html:not([data-design])) .assistant-claude, :where(html:not([data-design])) .assistant-chatgpt, :where(html:not([data-design])) .assistant-gemini { --assistant-color: var(--action); } :where(html:not([data-design])) .assistant-name { align-items: center; color: var(--ink) !important; display: flex; font-family: var(--font-sf-pro-display); font-size: 19px; font-weight: 600; letter-spacing: 0.012em; gap: 0.55rem; margin: 0 0 0.5rem; } :where(html:not([data-design])) .assistant-dot { background: var(--assistant-color); border-radius: 50%; display: inline-block; height: 0.75rem; width: 0.75rem; } :where(html:not([data-design])) .preview-help-card ol { margin: var(--element-gap) 0; padding-left: 1.25rem; } :where(html:not([data-design])) .preview-help-card li { margin: var(--element-gap) 0; } :where(html:not([data-design])) .preview-help-card code, :where(html:not([data-design])) .preview-tech-list code { background: var(--control); border-radius: 4px; padding: 0.1rem 0.3rem; } :where(html:not([data-design])) .preview-assistant-section, :where(html:not([data-design])) .preview-technical { margin-top: var(--section-gap); } :where(html:not([data-design])) .preview-callout { margin-top: 1.5rem; } :where(html:not([data-design])) .preview-tech-list { border-top: 1px solid var(--hairline); list-style: none; margin: 0; padding: 0; } :where(html:not([data-design])) .preview-tech-list li { align-items: center; border-bottom: 1px solid var(--hairline); display: flex; flex-wrap: wrap; gap: var(--element-gap); justify-content: space-between; padding: var(--element-gap) 0; } :where(html:not([data-design])) .preview-tech-list span { color: var(--ink-soft); } :where(html:not([data-design])) .preview-technical details { border-top: 1px solid var(--hairline); padding-top: 1.25rem; } :where(html:not([data-design])) .preview-technical summary { cursor: pointer; font-size: var(--text-body); font-weight: 500; min-height: 2.75rem; padding: var(--spacing-12) 0; } @media (max-width: 44rem) { :where(html:not([data-design])) main { padding: 2.5rem 1rem 4rem; } :where(html:not([data-design])) .preview-main { padding: 0 1rem 4rem; } :where(html:not([data-design])) .preview-hero { padding: 4rem 0 3rem; } :where(html:not([data-design])) .preview-manual-first, :where(html:not([data-design])) .preview-help-section { padding: 2rem 1rem; } :where(html:not([data-design])) .preview-pages-section { margin-top: 3rem; } :where(html:not([data-design])) .preview-choice-grid, :where(html:not([data-design])) .preview-help-grid { grid-template-columns: 1fr; } :where(html:not([data-design])) .preview-nav .preview-brand { flex-basis: 100%; } } /* Order 10C shared KEENY shell. */ :where(html:not([data-design])) .keeny-topbar { min-height: 64px; border-bottom: 1px solid var(--hairline); background: var(--canvas); } :where(html:not([data-design])) .keeny-topbar__inner { max-width: 72rem; min-height: 64px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 12px; } :where(html:not([data-design])) .keeny-mark { width: 34px; height: 34px; flex: none; } :where(html:not([data-design])) .keeny-wordmark { color: var(--ink); font-family: var(--font-body); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; } :where(html:not([data-design])) .card, :where(html:not([data-design])) .panel, :where(html:not([data-design])) section[data-card="true"] { background: var(--surface-card); border-radius: 12px; padding: 32px; } /* #6c6a64 on #efe9de is ~4.476:1; card eyebrow text must clear AA 4.5:1. */ :where(html:not([data-design])) section[data-card="true"] > .eyebrow { color: var(--body); } :where(html:not([data-design])) table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } :where(html:not([data-design])) th, :where(html:not([data-design])) td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--hairline); /* ESC-40 q1/q2: a long unbroken value (an email address, an invite's expiry timestamp) must break inside its own cell at narrow widths rather than forcing the whole table (and, via .table-wrap's scroll container, the page) wider than the viewport. */ overflow-wrap: anywhere; } :where(html:not([data-design])) th { color: var(--muted); font-size: 14px; font-weight: 500; } :where(html:not([data-design])) tbody tr[aria-current="true"], :where(html:not([data-design])) tbody tr.is-selected { background: var(--surface-cream-strong); } :where(html:not([data-design])) code, :where(html:not([data-design])) pre, :where(html:not([data-design])) .tabular { font-variant-numeric: tabular-nums; } :where(html:not([data-design])) code { overflow-wrap: anywhere; word-break: break-word; } /* Order 10C provider application structures. */ :where(html:not([data-design])) .app-nav { margin: 0 0 32px; border-bottom: 1px solid var(--hairline); } :where(html:not([data-design])) .app-nav ul { list-style: none; margin: 0; padding: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px 20px; } :where(html:not([data-design])) .app-nav a { color: var(--body); font-size: 14px; font-weight: 500; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; } :where(html:not([data-design])) .app-nav a:hover, :where(html:not([data-design])) .app-nav a:focus-visible { color: var(--primary-active); text-decoration: underline; text-underline-offset: 4px; } :where(html:not([data-design])) .eyebrow { color: var(--muted); font-size: 14px; font-weight: 500; margin: 0 0 8px; text-transform: none; } :where(html:not([data-design])) .invoice-create-card .eyebrow { color: var(--body); } :where(html:not([data-design])) .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :where(html:not([data-design])) .empty-state { color: var(--muted); padding: 16px 0; } :where(html:not([data-design])) .table-wrap { width: 100%; overflow-x: auto; } :where(html:not([data-design])) .invoice-create-card, :where(html:not([data-design])) .record-summary { margin: 24px 0 32px; } :where(html:not([data-design])) .invoice-create-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 28rem); gap: 32px; align-items: end; } :where(html:not([data-design])) .invoice-create-card h2, :where(html:not([data-design])) .record-summary h2 { margin-top: 0; } :where(html:not([data-design])) .record-summary .eyebrow { color: var(--body); } :where(html:not([data-design])) .record-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; } :where(html:not([data-design])) .record-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 0 0 32px; } :where(html:not([data-design])) .record-actions form { margin: 0; } :where(html:not([data-design])) .record-actions label { display: grid; gap: 8px; } :where(html:not([data-design])) .record-details { margin-top: 32px; border-top: 1px solid var(--hairline); padding-top: 16px; } :where(html:not([data-design])) .record-details summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 500; color: var(--ink); } :where(html:not([data-design])) .record-details pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-soft); padding: 16px; border-radius: 8px; } :where(html:not([data-design])) .pricing-card { background: var(--surface-card); border: 1px solid transparent; border-radius: 12px; padding: 32px; } :where(html:not([data-design])) .pricing-card.is-current { border-color: var(--primary-active); background: var(--surface-cream-strong); } :where(html:not([data-design])) .pricing-card h2 { margin: 0 0 16px; font-size: 1.5rem; } :where(html:not([data-design])) .current-plan { font-weight: 500; color: var(--ink); margin-top: 24px; } @media (max-width: 44rem) { :where(html:not([data-design])) .keeny-topbar__inner { padding: 0 16px; } :where(html:not([data-design])) .app-nav ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; } :where(html:not([data-design])) .invoice-create-card { grid-template-columns: 1fr; } :where(html:not([data-design])) .record-summary { flex-direction: column; } :where(html:not([data-design])) .record-actions { align-items: stretch; } :where(html:not([data-design])) .record-actions form, :where(html:not([data-design])) .record-actions button, :where(html:not([data-design])) .record-actions .button-link { width: 100%; } :where(html:not([data-design])) th, :where(html:not([data-design])) td { padding: 10px 12px; } } /* Order 10C provider dashboard/settings structures. */ :where(html:not([data-design])) .dashboard-heading { margin-bottom: 32px; } :where(html:not([data-design])) .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 16px; } :where(html:not([data-design])) .section-heading h2 { margin: 0; } :where(html:not([data-design])) .section-heading p { margin: 4px 0 0; color: var(--muted); } :where(html:not([data-design])) .form-actions { display: flex; gap: 12px; align-items: center; } @media (max-width: 44rem) { :where(html:not([data-design])) .section-heading { flex-direction: column; gap: 12px; } } /* Order 10C participant portal structures. */ :where(html:not([data-design])) .participant-welcome { max-width: 44rem; margin-bottom: 24px; } :where(html:not([data-design])) .participant-welcome h2 { margin-top: 0; font-size: clamp(2rem,5vw,3rem); } :where(html:not([data-design])) .participant-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 32px; padding-bottom: 16px; border-bottom: 1px solid var(--hairline); } :where(html:not([data-design])) .participant-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--primary-active); font-weight: 500; } :where(html:not([data-design])) .participant-section, :where(html:not([data-design])) .invoice-fact-card { margin: 16px 0; } :where(html:not([data-design])) .participant-section h2, :where(html:not([data-design])) .invoice-fact-card h2 { margin-top: 0; } :where(html:not([data-design])) .participant-section th, :where(html:not([data-design])) .participant-section a { color: var(--body); } :where(html:not([data-design])) .invoice-fact-card pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--canvas); border-radius: 8px; padding: 16px; margin-bottom: 0; } :where(html:not([data-design])) .chat-intro { text-align: center; padding: 48px 0 24px; } :where(html:not([data-design])) .chat-intro h2 { font-size: clamp(2rem,5vw,3rem); margin: 0 0 12px; } :where(html:not([data-design])) .chat-composer { display: grid; gap: 12px; background: var(--surface-card); border-radius: 16px; padding: 24px; } :where(html:not([data-design])) .chat-composer label { display: grid; gap: 8px; font-weight: 500; } :where(html:not([data-design])) .chat-composer textarea { min-height: 8rem; max-width: none; } :where(html:not([data-design])) .chat-composer button { justify-self: end; } @media (max-width: 44rem) { :where(html:not([data-design])) .participant-nav { display: grid; grid-template-columns: 1fr; gap: 4px; } :where(html:not([data-design])) .participant-section, :where(html:not([data-design])) .invoice-fact-card { padding: 24px; } :where(html:not([data-design])) .chat-intro { text-align: left; padding-top: 24px; } :where(html:not([data-design])) .chat-composer button { width: 100%; } } /* Order 10C schedule and recovery structures. */ /* Order 10C evidence reading and provenance structures. */ :where(html:not([data-design])) .evidence-workspace { display: grid; gap: 48px; } :where(html:not([data-design])) .evidence-intro { max-width: 48rem; } :where(html:not([data-design])) .evidence-tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; } :where(html:not([data-design])) .evidence-tool-card { background: var(--surface-card); border-radius: 12px; padding: 24px; } :where(html:not([data-design])) .evidence-tool-card h2 { margin-top: 0; font-size: 1.75rem; } :where(html:not([data-design])) .evidence-tool-card form { display: grid; gap: 12px; } :where(html:not([data-design])) .evidence-sources { margin-top: 16px; } :where(html:not([data-design])) .search-meta { color: var(--muted); font-size: 14px; } :where(html:not([data-design])) .review-facts { background: var(--surface-card); border-radius: 12px; padding: 24px; margin: 24px 0; } :where(html:not([data-design])) .review-facts > div { display: grid; grid-template-columns: 8rem minmax(0,1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--hairline); } :where(html:not([data-design])) .review-facts > div:last-child { border-bottom: 0; } :where(html:not([data-design])) .review-facts dt { color: var(--body); font-weight: 500; } :where(html:not([data-design])) .review-facts dd { margin: 0; overflow-wrap: anywhere; } @media (max-width: 44rem) { :where(html:not([data-design])) .evidence-tools { grid-template-columns: 1fr; } :where(html:not([data-design])) .review-facts > div { grid-template-columns: 1fr; gap: 4px; } } /* Order 10C private-sharing structures. */ :where(html:not([data-design])) #location-status { padding: 12px 16px; background: var(--surface-soft); border-radius: 8px; color: var(--body); } /* Order 10C participant-record structures. */ :where(html:not([data-design])) .record-timeline { margin-top: 48px; } :where(html:not([data-design])) .record-timeline code { white-space: normal; overflow-wrap: anywhere; } @media (max-width: 44rem) { :where(html:not([data-design])) .record-timeline { min-width: 0; max-width: 100%; } } /* Order 10C frozen V1 owned-screen structures. */ /* Order 10C consent and show-once secret structures. */ /* C12 workspace navigation: plain list without JS; enhanced drawer under 768px. */ :where(html:not([data-design])) .workspace-navigation { max-width: 72rem; margin: 0 auto; padding: 0 32px; background: var(--canvas); } :where(html:not([data-design])) .workspace-menu-toggle, :where(html:not([data-design])) .workspace-menu-close { display: none; } :where(html:not([data-design])) .workspace-drawer > .app-nav, :where(html:not([data-design])) .workspace-drawer > .participant-nav { margin: 0 0 32px; } :where(html:not([data-design])) .participant-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 12px 0; border-bottom: 1px solid var(--hairline); } :where(html:not([data-design])) .participant-nav a, :where(html:not([data-design])) .workspace-menu-toggle, :where(html:not([data-design])) .workspace-menu-close { min-height: 44px; } :where(html:not([data-design])) .participant-nav a { display: inline-flex; align-items: center; color: var(--body); font-size: 14px; font-weight: 500; text-decoration: none; } :where(html:not([data-design])) .app-nav a[aria-current="page"], :where(html:not([data-design])) .participant-nav a[aria-current="page"] { color: var(--brand-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; } @media (max-width: 767px) { :where(html:not([data-design])) .workspace-navigation { padding: 8px 16px 12px; } :where(html:not([data-design])) .workspace-navigation.is-enhanced .workspace-menu-toggle { display: inline-flex; align-items: center; justify-content: center; } :where(html:not([data-design])) .workspace-navigation.is-enhanced .workspace-drawer { display: none; } :where(html:not([data-design])) .workspace-navigation.is-enhanced[data-open="true"] .workspace-drawer { display: block; position: fixed; inset: 0; z-index: 1000; overflow-y: auto; padding: 24px; background: var(--canvas); } :where(html:not([data-design])) .workspace-navigation.is-enhanced[data-open="true"] .workspace-menu-close { display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; } :where(html:not([data-design])) .workspace-navigation.is-enhanced[data-open="true"] .app-nav ul, :where(html:not([data-design])) .workspace-navigation.is-enhanced[data-open="true"] .participant-nav { display: grid; grid-template-columns: 1fr; gap: 4px; } :where(html:not([data-design])) body.workspace-nav-open { overflow: hidden; } } /* UX-MATURE — sectioned setup, selected Wix hierarchy in KEENY tokens. */ /* UX-MATURE — designed file control (setup logo). The real input stays focusable and clickable on top of the styled button; the label keeps the accessible name. */ /* The sticky save bar must never sit over the last section: reserve its height below the form. */ /* ===================================================================================== UX-MATURE foundation — JEV CSS-01 adopted techniques and the product shell. T19 input 16px · T16/17 colour derivation from --brand (hex fallbacks first) · T18 100vh/100dvh pair · T2 corner-shape superellipse token (pills stay pills). ===================================================================================== */ :root { --sidebar-width: 16.5rem; --layout-content-width: 72rem; --corner: superellipse(1.6); --brand-tint: #FDEDE3; --brand-tint-strong: #FBD9C4; --brand-border: #F3A778; --focus-ring: #974514; } @supports (color: color-mix(in oklch, red, blue)) { :root { --brand-hover: color-mix(in oklch, var(--brand), black 10%); --brand-tint: color-mix(in oklch, var(--brand) 10%, var(--canvas)); --brand-tint-strong: color-mix(in oklch, var(--brand) 22%, var(--canvas)); --brand-border: color-mix(in oklch, var(--brand) 45%, var(--canvas)); --focus-ring: color-mix(in oklch, var(--brand-text) 92%, black); } } /* T19: never below 16px on a form control (iOS zoom). */ :where(html:not([data-design])) input, :where(html:not([data-design])) select, :where(html:not([data-design])) textarea { font-size: max(16px, 1rem); } /* T2: continuous corners where supported; border-radius stays the fallback. */ @supports (corner-shape: superellipse(1.6)) { :where(html:not([data-design])) .preview-choice-card, :where(html:not([data-design])) .live, :where(html:not([data-design])) .workflow-card, :where(html:not([data-design])) .surface-panel, :where(html:not([data-design])) .pricing-card, :where(html:not([data-design])) .icon-tile, :where(html:not([data-design])) dialog, :where(html:not([data-design])) input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), :where(html:not([data-design])) textarea, :where(html:not([data-design])) select { corner-shape: var(--corner); } } :where(html:not([data-design])) :focus-visible { outline-color: var(--focus-ring); } /* Page header pattern: title, one-line context, the single primary action at the right. */ :where(html:not([data-design])) .page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--spacing-16) var(--spacing-24); margin: 0 0 var(--spacing-32); } :where(html:not([data-design])) .page-header__text { min-width: 0; max-width: 48rem; } :where(html:not([data-design])) .page-header h1 { margin: 0; } :where(html:not([data-design])) .page-lede { margin: var(--spacing-8) 0 0; color: var(--muted); } :where(html:not([data-design])) .page-actions { display: flex; gap: var(--spacing-12); } :where(html:not([data-design])) .page-actions .button-link.primary { display: inline-flex; align-items: center; min-height: var(--control-height); padding: 0 var(--spacing-24); border-radius: var(--radius-buttons); background: var(--brand); color: var(--ink); font-weight: var(--font-weight-medium); text-decoration: none; } :where(html:not([data-design])) .page-actions .button-link.primary:hover { background: var(--brand-hover); } /* The product shell. Same DOM as the C12 drawer; under 768px nothing here applies. */ :where(html:not([data-design])) .sidebar-brand, :where(html:not([data-design])) .sidebar-footer, :where(html:not([data-design])) .nav-group-label { display: none; } :where(html:not([data-design])) body.page-app h1 { font-size: clamp(2rem, 3.4vw, 2.625rem); } @media (min-width: 768px) { :where(html:not([data-design])) body.page-app { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; min-height: 100dvh; } :where(html:not([data-design])) body.page-app .keeny-topbar { grid-column: 2; grid-row: 1; } :where(html:not([data-design])) body.page-app .keeny-topbar__inner { max-width: none; margin: 0; padding: 0 var(--spacing-48); justify-content: flex-end; } :where(html:not([data-design])) body.page-app .keeny-topbar .keeny-mark { display: none; } :where(html:not([data-design])) body.page-app .workspace-navigation { grid-column: 1; grid-row: 1 / 3; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; max-width: none; margin: 0; padding: var(--spacing-24) var(--spacing-16); background: var(--surface-soft); border-right: var(--border-width) solid var(--hairline); } :where(html:not([data-design])) body.page-app .workspace-drawer { display: flex; flex-direction: column; min-height: 100%; } :where(html:not([data-design])) body.page-app main { grid-column: 2; grid-row: 2; width: 100%; max-width: var(--layout-content-width); margin: 0; padding: var(--spacing-32) var(--spacing-48) var(--spacing-96); } :where(html:not([data-design])) .sidebar-brand { display: flex; align-items: center; gap: 10px; margin: 0 var(--spacing-12) var(--spacing-32); font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: 0.01em; color: var(--ink); } :where(html:not([data-design])) .sidebar-brand img { width: 28px; height: 28px; } :where(html:not([data-design])) .nav-group { margin: 0 0 var(--spacing-16); } :where(html:not([data-design])) .nav-group-label { display: block; margin: 0 0 4px; padding: 0 var(--spacing-12); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } :where(html:not([data-design])) body.page-app .workspace-drawer > .app-nav, :where(html:not([data-design])) body.page-app .workspace-drawer > .participant-nav { margin: 0; border: 0; padding: 0; } :where(html:not([data-design])) body.page-app .app-nav ul { display: block; padding: 0; } :where(html:not([data-design])) body.page-app .app-nav li { margin: 2px 0; } :where(html:not([data-design])) body.page-app .app-nav a, :where(html:not([data-design])) body.page-app .participant-nav a { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 0 var(--spacing-12); border-radius: var(--radius-inputs); font-size: 0.9375rem; color: var(--body); text-decoration: none; transition: background-color var(--motion-fast) var(--ease-out); } :where(html:not([data-design])) body.page-app .participant-nav { display: block; } :where(html:not([data-design])) body.page-app .participant-nav a { margin: 2px 0; } :where(html:not([data-design])) body.page-app .app-nav a:hover, :where(html:not([data-design])) body.page-app .participant-nav a:hover { background: var(--brand-tint); color: var(--ink); text-decoration: none; } :where(html:not([data-design])) body.page-app .app-nav a[aria-current="page"], :where(html:not([data-design])) body.page-app .participant-nav a[aria-current="page"] { background: var(--brand-tint-strong); color: var(--brand-text); font-weight: 600; text-decoration: none; box-shadow: inset 3px 0 0 var(--brand); } :where(html:not([data-design])) .sidebar-footer { display: block; margin-top: auto; padding: var(--spacing-16) var(--spacing-12) 0; border-top: var(--border-width) solid var(--hairline); font-size: 0.75rem; color: var(--muted); } } @media (min-width: 1280px) { :where(html:not([data-design])) body.page-app main { padding: var(--spacing-48) var(--spacing-64) var(--spacing-96); } } @media (max-width: 767px) { :where(html:not([data-design])) .workspace-navigation.is-enhanced[data-open="true"] .nav-group-label { display: block; margin: var(--spacing-16) 0 4px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } :where(html:not([data-design])) .workspace-navigation.is-enhanced[data-open="true"] .app-nav a { display: flex; min-height: 44px; } } @media (prefers-reduced-motion: reduce) { :where(html:not([data-design])) body.page-app .app-nav a, :where(html:not([data-design])) body.page-app .participant-nav a, :where(html:not([data-design])) .page-actions .button-link.primary { transition: none; } } /* ===================================================================================== Design language v2 — component system (Owner approval 2026-09-27). Source: docs/jev/ux-design-selection/DESIGN-LANGUAGE.md v2 (Refero "Claude" style, Hermès orange accent) and the approved comp docs/jev/ux-design-selection/comps/keeny-design.html. This layer overrides the earlier component rules; page layouts below it are unchanged until each page is rebuilt as an assembly of these primitives. ===================================================================================== */ :root { --accent: var(--brand); --accent-text: var(--brand-text); --accent-soft: #fdeee4; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --motion-base: 220ms; --text-display: clamp(2.125rem, 4.4vw, 3.5rem); --text-heading: 1.875rem; /* 30px: section titles, page h1 in the workspace uses 34px */ --text-heading-sm: 1.5rem; /* 24px */ --text-ui: 0.9375rem; /* 15px: buttons, nav */ --text-body-small: 14px; } @supports (color: color-mix(in oklch, red, blue)) { :root { --accent-soft: color-mix(in oklch, var(--brand) 12%, var(--canvas)); } } /* Type: the serif speaks at weight 400 only; hierarchy comes from size, never from bold. */ :where(html:not([data-design])) h1, :where(html:not([data-design])) h2 { font-weight: 400; letter-spacing: -0.01em; } :where(html:not([data-design])) h1 { font-size: var(--text-display); line-height: 1.08; } :where(html:not([data-design])) h2 { font-size: var(--text-heading); line-height: 1.2; margin: 48px 0 12px; } :where(html:not([data-design])) h3 { font-size: 1.0625rem; font-weight: 500; } :where(html:not([data-design])) body.page-app h1 { font-size: 2.125rem; line-height: 1.15; } :where(html:not([data-design])) .eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } :where(html:not([data-design])) a { color: var(--body); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; } :where(html:not([data-design])) a:hover { color: var(--ink); } :where(html:not([data-design])) .muted, :where(html:not([data-design])) .page-lede, :where(html:not([data-design])) .hint { color: var(--muted); } /* Focus: canvas gap + accent ring (the accent's one interactive use besides marks). */ :where(html:not([data-design])) a:focus-visible, :where(html:not([data-design])) button:focus-visible, :where(html:not([data-design])) input:focus-visible, :where(html:not([data-design])) select:focus-visible, :where(html:not([data-design])) textarea:focus-visible, :where(html:not([data-design])) [tabindex]:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-buttons); } /* Buttons: dark fill = primary; outlined paper = secondary; ghost = tertiary. 8px radius. */ :where(html:not([data-design])) button, :where(html:not([data-design])) .button-link, :where(html:not([data-design])) .btn { border-radius: var(--radius-buttons); font-size: var(--text-ui); line-height: 1; padding: 8px 20px; background: var(--paper); border: 1px solid var(--muted-soft); color: var(--ink); transition: transform 100ms ease-out, background-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease); text-decoration: none; } :where(html:not([data-design])) button:hover, :where(html:not([data-design])) .button-link:hover, :where(html:not([data-design])) .btn:hover { background: var(--stone); border-color: var(--body); } :where(html:not([data-design])) button.primary, :where(html:not([data-design])) .button-link.primary, :where(html:not([data-design])) .btn-dark, :where(html:not([data-design])) .page-actions .button-link.primary, :where(html:not([data-design])) .auth-form button[type="submit"] { background: var(--ink); border-color: var(--ink); color: var(--canvas); } :where(html:not([data-design])) button.primary:hover, :where(html:not([data-design])) .button-link.primary:hover, :where(html:not([data-design])) .btn-dark:hover, :where(html:not([data-design])) .page-actions .button-link.primary:hover { background: var(--body); border-color: var(--body); color: var(--canvas); } :where(html:not([data-design])) button.secondary, :where(html:not([data-design])) .button-link.secondary, :where(html:not([data-design])) .btn-line { background: var(--paper); border-color: var(--muted-soft); color: var(--ink); } :where(html:not([data-design])) .button-link.quiet-link, :where(html:not([data-design])) .btn-ghost { background: transparent; border-color: transparent; color: var(--body); font-size: var(--text-ui); letter-spacing: 0; line-height: 1; padding: 8px 12px; } :where(html:not([data-design])) .button-link.quiet-link:hover, :where(html:not([data-design])) .btn-ghost:hover { background: var(--stone); color: var(--ink); text-decoration: none; } :where(html:not([data-design])) button.danger { background: var(--paper); color: var(--error); border-color: var(--error); } :where(html:not([data-design])) button.danger:hover { background: var(--danger-bg); border-color: var(--error); } :where(html:not([data-design])) button:active, :where(html:not([data-design])) .button-link:active, :where(html:not([data-design])) .btn:active { transform: scale(0.97); } :where(html:not([data-design])) .btn-block { width: 100%; } :where(html:not([data-design])) .sign-out-form button { background: transparent; border-color: transparent; color: var(--body); padding: 8px 12px; } :where(html:not([data-design])) .sign-out-form button:hover { background: var(--stone); color: var(--ink); } /* Inputs: paper fill, 3:1 border, 8px radius, ink border on focus plus the accent ring. */ :where(html:not([data-design])) input:not([type]), :where(html:not([data-design])) input[type="text"], :where(html:not([data-design])) input[type="email"], :where(html:not([data-design])) input[type="number"], :where(html:not([data-design])) input[type="password"], :where(html:not([data-design])) input[type="url"], :where(html:not([data-design])) input[type="date"], :where(html:not([data-design])) input[type="time"], :where(html:not([data-design])) input[type="datetime-local"], :where(html:not([data-design])) select, :where(html:not([data-design])) textarea { background: var(--paper); border: 1px solid var(--muted-soft); border-radius: var(--radius-inputs); color: var(--ink); min-height: 44px; } :where(html:not([data-design])) input:not([type]):hover, :where(html:not([data-design])) input[type="text"]:hover, :where(html:not([data-design])) input[type="email"]:hover, :where(html:not([data-design])) input[type="number"]:hover, :where(html:not([data-design])) textarea:hover { border-color: var(--body); } :where(html:not([data-design])) input:not([type]):focus, :where(html:not([data-design])) input[type="text"]:focus, :where(html:not([data-design])) input[type="email"]:focus, :where(html:not([data-design])) input[type="number"]:focus, :where(html:not([data-design])) textarea:focus, :where(html:not([data-design])) select:focus { border-color: var(--ink); } :where(html:not([data-design])) .field label { color: var(--body); font-weight: 500; font-size: 14px; } :where(html:not([data-design])) .field-error { background: transparent; padding: 0; font-weight: 500; color: var(--error-text); } /* Cards: paper on canvas with a chalk hairline; nested surfaces are stone; elevation is rare. */ :where(html:not([data-design])) .card, :where(html:not([data-design])) .panel, :where(html:not([data-design])) section[data-card="true"], :where(html:not([data-design])) .surface-panel, :where(html:not([data-design])) .workflow-card, :where(html:not([data-design])) .pricing-card, :where(html:not([data-design])) .preview-choice-card { background: var(--paper); border: 1px solid var(--chalk); border-radius: var(--radius-cards); padding: 32px; box-shadow: none; } :where(html:not([data-design])) .nested, :where(html:not([data-design])) [role="status"].notice { background: var(--stone); border: 0; border-radius: var(--radius-cards); } :where(html:not([data-design])) .card.elevated, :where(html:not([data-design])) .pricing-card.is-current { border-radius: var(--radius-large); box-shadow: var(--shadow-lg); } :where(html:not([data-design])) .card.hover:hover { box-shadow: var(--shadow-lg-2); transform: translateY(-2px); } :where(html:not([data-design])) .live { font-weight: 500; color: var(--body); } /* Badges: 8px radius, warm-grey family; status is the dot plus the word, never colour alone. */ :where(html:not([data-design])) .badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; padding: 3px 8px; background: var(--stone); color: var(--body); font-size: 12px; font-weight: 500; line-height: 1.5; } :where(html:not([data-design])) .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pebble); content: ""; } :where(html:not([data-design])) .badge.on .dot { background: var(--brand); } /* Tables: paper surface, canvas header row, chalk row lines, tabular figures. */ :where(html:not([data-design])) .table-wrap, :where(html:not([data-design])) .tbl { overflow-x: auto; border-radius: var(--radius-cards); } :where(html:not([data-design])) table { background: var(--paper); border: 1px solid var(--chalk); border-radius: var(--radius-cards); overflow: hidden; font-size: 14px; } :where(html:not([data-design])) th { text-align: left; font-weight: 500; font-size: 12px; color: var(--muted); padding: 12px 16px; background: var(--canvas); border-bottom: 1px solid var(--chalk); } :where(html:not([data-design])) td { padding: 14px 16px; border-bottom: 1px solid var(--chalk); vertical-align: middle; } :where(html:not([data-design])) tr:last-child td { border-bottom: 0; } :where(html:not([data-design])) td.num, :where(html:not([data-design])) th.num { font-variant-numeric: tabular-nums; white-space: nowrap; } :where(html:not([data-design])) td.r, :where(html:not([data-design])) th.r { text-align: right; } :where(html:not([data-design])) td a { text-decoration: none; font-weight: 500; color: var(--ink); } /* Top bar (public + auth): canvas, 64px, hairline; the workspace shell replaces it. */ :where(html:not([data-design])) .keeny-topbar { background: var(--canvas); border-bottom: 1px solid var(--chalk); } :where(html:not([data-design])) .keeny-wordmark { font-family: var(--font-display); font-size: 22px; letter-spacing: 0.02em; font-weight: 400; } :where(html:not([data-design])) .skip-link { background: var(--paper); color: var(--ink); border-radius: var(--radius-buttons); } /* Continuous corners on the v2 primitives where supported (JEV CSS-01 T2). */ @supports (corner-shape: superellipse(1.6)) { :where(html:not([data-design])) .card, :where(html:not([data-design])) .panel, :where(html:not([data-design])) section[data-card="true"], :where(html:not([data-design])) .nested, :where(html:not([data-design])) .badge, :where(html:not([data-design])) table, :where(html:not([data-design])) .btn, :where(html:not([data-design])) button, :where(html:not([data-design])) .button-link { corner-shape: var(--corner); } } @media (prefers-reduced-motion: reduce) { :where(html:not([data-design])) button, :where(html:not([data-design])) .button-link, :where(html:not([data-design])) .btn, :where(html:not([data-design])) .card.hover, :where(html:not([data-design])) a { transition: none; } :where(html:not([data-design])) button:active, :where(html:not([data-design])) .button-link:active, :where(html:not([data-design])) .btn:active { transform: none; } } /* Sidebar current page (v2): paper card, ink text, accent marker at the left edge. */ @media (min-width: 768px) { :where(html:not([data-design])) body.page-app .app-nav a[aria-current="page"], :where(html:not([data-design])) body.page-app .participant-nav a[aria-current="page"] { background: var(--paper); color: var(--ink); font-weight: 500; box-shadow: inset 0 0 0 1px var(--chalk), inset 3px 0 0 var(--brand); } :where(html:not([data-design])) body.page-app .app-nav a:hover, :where(html:not([data-design])) body.page-app .participant-nav a:hover { background: var(--stone); color: var(--ink); } } /* ── v2 product shell ───────────────────────────────────────────────────────────────────── */ :root { --sidebar-width: 15rem; } :where(html:not([data-design])) .keeny-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); } :where(html:not([data-design])) .keeny-brand:hover { color: var(--ink); } :where(html:not([data-design])) .keeny-topbar__inner { justify-content: space-between; } :where(html:not([data-design])) .topbar-tools { display: flex; align-items: center; gap: 4px; margin-left: auto; } :where(html:not([data-design])) .topbar-icon { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-buttons); color: var(--body); transition: background-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); } :where(html:not([data-design])) .topbar-icon:hover { background: var(--stone); color: var(--ink); } :where(html:not([data-design])) .sign-out-form { margin: 0; } :where(html:not([data-design])) .sign-out-form button { display: inline-flex; gap: 8px; align-items: center; min-height: 40px; } :where(html:not([data-design])) .workspace-menu-toggle, :where(html:not([data-design])) .workspace-menu-close { align-items: center; gap: 8px; } @media (max-width: 767px) { :where(html:not([data-design])) .workspace-navigation.is-enhanced .workspace-menu-toggle { display: inline-flex; } :where(html:not([data-design])) .workspace-navigation.is-enhanced[data-open="true"] .workspace-menu-close { display: inline-flex; } } :where(html:not([data-design])) .sidebar-action { display: none; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 4px 0 16px; padding: 8px 16px; background: var(--ink); color: var(--canvas); border-radius: var(--radius-buttons); font-weight: 500; font-size: var(--text-ui); text-decoration: none; transition: background-color var(--motion-fast) var(--ease), transform 100ms ease-out; } :where(html:not([data-design])) .sidebar-action:hover { background: var(--body); color: var(--canvas); text-decoration: none; } :where(html:not([data-design])) .sidebar-action:active { transform: scale(0.97); } :where(html:not([data-design])) .sidebar-account { display: none; } :where(html:not([data-design])) .page-eyebrow { margin: 0 0 4px; font-size: 13px; color: var(--muted); } :where(html:not([data-design])) .nav-icon { flex: none; color: var(--muted); } :where(html:not([data-design])) a[aria-current="page"] .nav-icon, :where(html:not([data-design])) a:hover .nav-icon { color: var(--ink); } :where(html:not([data-design])) .workspace-navigation.is-enhanced[data-open="true"] .sidebar-action { display: inline-flex; width: 100%; } @media (min-width: 768px) { :where(html:not([data-design])) body.page-app .workspace-navigation { background: var(--canvas); padding: 16px 12px; } :where(html:not([data-design])) .sidebar-brand { margin: 6px 10px 16px; font-size: 1.25rem; font-weight: 400; letter-spacing: 0.02em; } :where(html:not([data-design])) .sidebar-action { display: inline-flex; } :where(html:not([data-design])) .nav-group-label { color: var(--muted); font-weight: 500; margin: 14px 0 6px; } :where(html:not([data-design])) body.page-app .app-nav a, :where(html:not([data-design])) body.page-app .participant-nav a { gap: 10px; padding: 0 10px; font-weight: 500; color: var(--body); } :where(html:not([data-design])) .sidebar-footer { display: block; } :where(html:not([data-design])) .sidebar-account { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 14px 10px 4px; border-top: 1px solid var(--chalk); } :where(html:not([data-design])) .sidebar-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--canvas); font-size: 12px; font-weight: 500; } :where(html:not([data-design])) .sidebar-account__text { display: grid; min-width: 0; } :where(html:not([data-design])) .sidebar-account__name { font-size: 14px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :where(html:not([data-design])) .sidebar-account__detail { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :where(html:not([data-design])) body.page-app .keeny-topbar { border-bottom: 0; } :where(html:not([data-design])) body.page-app .keeny-topbar__inner { padding: 12px 32px 0; min-height: 56px; } :where(html:not([data-design])) body.page-app .keeny-brand { display: none; } :where(html:not([data-design])) body.page-app main { padding-top: 8px; } } @media (max-width: 767px) { :where(html:not([data-design])) .workspace-navigation.is-enhanced[data-open="true"] .sidebar-account { display: flex; align-items: center; gap: 10px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--chalk); } :where(html:not([data-design])) .workspace-navigation.is-enhanced[data-open="true"] .sidebar-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--canvas); font-size: 12px; } :where(html:not([data-design])) .workspace-navigation.is-enhanced[data-open="true"] .sidebar-account__text { display: grid; } :where(html:not([data-design])) .workspace-navigation.is-enhanced[data-open="true"] .sidebar-account__detail { font-size: 12px; color: var(--muted); } } /* ── v2 public shell (public site + sign-in): top bar with links and the obsidian footer ── */ :where(html:not([data-design])) .public-top { display: flex; align-items: center; gap: 8px; min-height: 64px; max-width: 75rem; margin: 0 auto; padding: 0 24px; } :where(html:not([data-design])) .public-top .keeny-brand { margin-right: auto; } :where(html:not([data-design])) .public-top nav { display: flex; gap: 4px; } :where(html:not([data-design])) .public-top nav a { padding: 8px 14px; border-radius: var(--radius-buttons); text-decoration: none; font-weight: 500; font-size: var(--text-ui); color: var(--body); transition: background-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); } :where(html:not([data-design])) .public-top nav a:hover, :where(html:not([data-design])) .public-top nav a[aria-current="page"] { background: var(--stone); color: var(--ink); } :where(html:not([data-design])) .public-top .public-cta { display: flex; gap: 8px; margin-left: 8px; } :where(html:not([data-design])) .public-foot { background: var(--obsidian); color: var(--on-dark-muted); padding: 64px 0 40px; margin-top: 80px; } :where(html:not([data-design])) .public-foot__inner { max-width: 75rem; margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; } :where(html:not([data-design])) .public-foot .keeny-wordmark { color: var(--on-dark); } :where(html:not([data-design])) .public-foot h2 { margin: 0 0 12px; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--on-dark); letter-spacing: 0; } :where(html:not([data-design])) .public-foot a { display: block; padding: 3px 0; font-size: 14px; color: var(--on-dark-muted); text-decoration: none; } :where(html:not([data-design])) .public-foot a:hover { color: var(--on-dark); } :where(html:not([data-design])) .public-foot p { margin: 10px 0 0; font-size: 14px; max-width: 26rem; } :where(html:not([data-design])) .public-foot__fine { max-width: 75rem; margin: 40px auto 0; padding: 0 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; } :where(html:not([data-design])) .public-foot__fine a { display: inline; padding: 0; font-size: 12px; text-decoration: underline; } :where(html:not([data-design])) body.page-public main { max-width: 75rem; padding: 48px 24px 0; } @media (max-width: 767px) { :where(html:not([data-design])) .public-top nav { display: none; } :where(html:not([data-design])) .public-top, :where(html:not([data-design])) .public-foot__inner, :where(html:not([data-design])) .public-foot__fine { padding-inline: 16px; } :where(html:not([data-design])) .public-foot__inner { grid-template-columns: 1fr; } :where(html:not([data-design])) body.page-public main { padding: 32px 16px 0; } } @media (prefers-reduced-motion: reduce) { :where(html:not([data-design])) .topbar-icon, :where(html:not([data-design])) .sidebar-action, :where(html:not([data-design])) .public-top nav a { transition: none; } :where(html:not([data-design])) .sidebar-action:active { transform: none; } } /* ══════════════════════════════════════════════════════════════════════════════════════════════ DESIGN LANGUAGE v2 — FROZEN (Owner 2026-09-27): the Refero "Claude" system with Hermès orange #F37021 as the only chromatic accent (docs/jev/ux-design-selection/DESIGN-LANGUAGE.md, the comp comps/keeny-design.html) and the motion rules of MOTION.md (Owner 2026-09-28). Everything below applies only to pages rendered by the v2 renderers (); the legacy rules above are scoped to html:not([data-design]), so the two never touch each other. ══════════════════════════════════════════════════════════════════════════════════════════════ */ /* Registered so press and lift can transition/spring (MOTION §3). */ @property --press { syntax: ""; inherits: false; initial-value: 1; } @property --rv { syntax: ""; inherits: false; initial-value: 1; } @property --lift { syntax: ""; inherits: false; initial-value: 0; } /* Page to page (MOTION §3): View Transitions cross-fade + 8px rise, 220ms; instant under reduced motion. */ @view-transition { navigation: auto; } /* Root cross-fades both ways; only a forward navigation (motion.js adds the "forward" type) also rises 8px. */ ::view-transition-old(root) { animation: k-vt-out var(--t-base, 220ms) var(--e-exit, cubic-bezier(.8,0,.8,.2)) both; } /* exit on the mirrored curve (§7) */ ::view-transition-new(root) { animation: k-vt-fade var(--t-base, 220ms) var(--e-enter, ease-out) both; } html:active-view-transition-type(forward)::view-transition-new(root) { animation-name: k-vt-in; } @keyframes k-vt-out { to { opacity: 0; } } @keyframes k-vt-fade { from { opacity: 0; } } @keyframes k-vt-in { from { opacity: 0; transform: translateY(8px); } } @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } @keyframes k-rise { from { opacity: 0; transform: translateY(var(--rise, 24px)); } } @keyframes k-fade { from { opacity: 0; } } @keyframes k-show { to { opacity: 1; transform: none; } } @keyframes k-parallax { to { transform: translate3d(0, var(--px-shift, 120px), 0); } } html[data-design] { /* ── tokens (DESIGN-LANGUAGE v2; refero-claude/tokens.json) ── */ --canvas: #f8f8f6; --paper: #ffffff; --stone: #efeeeb; --chalk: #e7e6e1; --mist: #b7b7b5; --ink: #121212; --graphite: #373734; --ashen: #6c6a64; --pebble: #9c9a92; --obsidian: #000000; --accent: #F37021; --accent-text: #b04d0f; --accent-soft: #fdeee4; /* Gate decision: #6c6a64 (--ashen) for muted TEXT (5.1:1); the export's #7b7974 only for non-text marks. */ --ashen-mark: #7b7974; --serif: "Source Serif 4", "Source Serif 4 Fallback", ui-serif, Georgia, Cambria, serif; --sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --r-ctl: 8px; --r-card: 16px; --r-elev: 24px; --shadow: rgba(0,0,0,.04) 0 4px 20px 0; --shadow-2: rgba(0,0,0,.10) 0 4px 24px 0; --gutter: 1.5rem; --maxw: 75rem; /* ── motion tokens (MOTION.md §2 — use these names; no ad-hoc numbers) ── */ --t-fast: 150ms; --t-base: 220ms; --t-slow: 420ms; --t-reveal: 700ms; --t-reveal-words: 700ms; --t-press: 100ms; --t-overlay: 280ms; --t-rm: 200ms; --t-shimmer: 1400ms; --e-enter: cubic-bezier(.2,.8,.2,1); --e-move: cubic-bezier(.22,1,.36,1); --e-line: cubic-bezier(.215,.61,.355,1); --e-word: cubic-bezier(.165,.84,.44,1); --e-exit: cubic-bezier(.8,0,.8,.2); /* the enter curve mirrored in time, for exits along the entry path */ color-scheme: light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; } @media (prefers-reduced-motion: reduce) { html[data-design] { scroll-behavior: auto; } } :where([data-design]) { *, *::before, *::after { box-sizing: border-box; } body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--canvas); color: var(--ink); font: 400 0.9375rem/1.5 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; font-weight: 400; text-wrap: balance; } p, ul, ol, dl, dd, figure, blockquote { margin: 0; } ul, ol { padding: 0; } img, svg { max-width: 100%; } img { display: block; height: auto; } a { color: var(--graphite); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--t-fast) var(--e-enter); } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } ::selection { background: var(--accent-soft); color: var(--ink); } [hidden] { display: none !important; } [id] { scroll-margin-top: 5rem; } .num, td.num, .kpi, .big b { font-variant-numeric: tabular-nums; } .serif { font-family: var(--serif); } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--ink); color: var(--canvas); padding: .75rem 1rem; border-radius: var(--r-ctl); text-decoration: none; font-weight: 500; transition: top var(--t-fast) var(--e-enter); } .skip:focus { top: 1rem; } .icon { width: 1.125rem; height: 1.125rem; flex: none; fill: currentColor; } .icon.sm { width: 1rem; height: 1rem; } .icon.lg { width: 1.25rem; height: 1.25rem; } .muted { color: var(--ashen); } .sec { color: var(--graphite); } .eyebrow { font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ashen); } .hair { border: 0; border-top: 1px solid var(--chalk); margin: 0; } .mark { width: 28px; height: 28px; object-fit: contain; } .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); } .display { font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; line-height: 1.12; } /* ── buttons (comp .btn): ink fill for primary, never the accent ── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .5rem 1.25rem; border-radius: var(--r-ctl); font: 500 .9375rem/1 var(--sans); text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; transition: transform var(--t-press) var(--e-enter), background-color var(--t-fast) var(--e-enter), color var(--t-fast) var(--e-enter), box-shadow var(--t-fast) var(--e-enter); } .btn:active { transform: scale(.97); } .btn-block:active, .create:active { transform: scale(.985); } .btn-dark { background: var(--ink); color: var(--canvas); } .btn-ghost { color: var(--graphite); background: transparent; } .btn-line { color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--mist); } .btn-block { width: 100%; } @media (max-width: 40rem) { .btn { white-space: normal; text-align: center; line-height: 1.25; max-width: 100%; } } .btn-sm { min-height: 36px; padding: .375rem .875rem; font-size: .875rem; } .btn .icon { width: 1rem; height: 1rem; } .btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; } .link-btn { color: var(--graphite); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; } @media (hover: hover) and (pointer: fine) { a:hover { color: var(--ink); } .btn-dark:hover { background: var(--graphite); color: var(--canvas); } .btn-ghost:hover { background: var(--stone); color: var(--ink); } .btn-line:hover { box-shadow: inset 0 0 0 1px var(--graphite); color: var(--ink); } } /* ── surfaces ── */ .card { background: var(--paper); border: 1px solid var(--chalk); border-radius: var(--r-card); padding: 2rem; } .card.elev { border-radius: var(--r-elev); } .card.pad-s { padding: 1.5rem; } .nested { background: var(--stone); border-radius: var(--r-card); padding: 1.5rem; } [data-lift] { transform: translateY(calc(var(--lift) * -2px)) scale(var(--press)); box-shadow: 0 4px 24px rgba(0,0,0, calc(var(--lift) * .10)); transition: --press var(--t-press) var(--e-enter), background-color var(--t-fast) var(--e-enter); } [data-lift]:active { --press: .99; } @supports (corner-shape: superellipse(1.5)) { .card, .btn, .nested, .field input, .field select, .field textarea, .stage, .mock, .todo, .tbl, .ico { corner-shape: superellipse(1.5); } } /* ── badges (status: dot + word, never colour alone) ── */ .badge { display: inline-flex; align-items: center; gap: .375rem; border-radius: 8px; padding: .1875rem .5rem; font-size: .75rem; font-weight: 500; line-height: 1.4; background: var(--stone); color: var(--graphite); white-space: nowrap; transition: background-color var(--t-fast) var(--e-enter), color var(--t-fast) var(--e-enter); } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pebble); flex: none; } .badge.on .dot { background: var(--accent); } .badge.ink { background: var(--ink); color: var(--canvas); } .badge.ink .dot { background: var(--canvas); } /* ── forms (comp .field) ── */ .form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; min-width: 0; } .field { display: grid; gap: .375rem; min-width: 0; } .field label, .field .label, .field .hint, fieldset.field legend { overflow-wrap: anywhere; } .field label, .field .label, fieldset.field legend { font-size: .875rem; font-weight: 500; color: var(--graphite); padding: 0; } .field .hint { font-size: .8125rem; color: var(--ashen); } .field .opt { margin-left: .5rem; font-size: .75rem; font-weight: 400; color: var(--ashen); } .field .req { color: var(--ink); font-weight: 400; } .field input, .field select, .field textarea { width: 100%; min-height: 44px; padding: 0 .75rem; border: 1px solid var(--mist); border-radius: var(--r-ctl); background: var(--paper); font: 400 max(16px, 1rem)/1.4 var(--sans); color: var(--ink); transition: box-shadow var(--t-fast) var(--e-enter), border-color var(--t-fast) var(--e-enter); } .field textarea { padding: .625rem .75rem; min-height: 7rem; resize: vertical; } /* verifier FAIL cycle 2: a data: SVG here was blocked by the public CSP's img-src 'self' (no data:), so every in the product (this rule and .team-acts select). */ .field select { appearance: none; padding-right: 2.25rem; background-color: var(--paper); background-image: url('/static/select-chevron.svg'); background-repeat: no-repeat; background-position: right .75rem center; background-size: 12px; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); outline: 3px solid var(--accent); outline-offset: 1px; } /* Errors never use the accent (gate decision): ink border, ink text, an icon and the word "Error". */ .field [aria-invalid="true"] { border-color: var(--ink); } .field .error, .field-error { font-size: .8125rem; color: var(--ink); font-weight: 500; display: flex; gap: .375rem; align-items: flex-start; } .field .error::before, .field-error::before, .decl .error::before { content: "Error:"; font-weight: 600; flex: none; } /* the ink warning icon comes first, then the word, then the message */ .field .error > .icon, .field-error > .icon, .decl .error > .icon { order: -1; width: .875rem; height: .875rem; margin-top: .15rem; flex: none; } .field-error[hidden] { display: none; } .field .error .icon { width: .875rem; height: .875rem; margin-top: .15rem; } fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; } .choices { display: grid; gap: .5rem; } .choice { display: flex; align-items: center; gap: .75rem; min-height: 44px; padding: .625rem .875rem; border: 1px solid var(--mist); border-radius: var(--r-ctl); background: var(--paper); cursor: pointer; font-size: .9375rem; transition: border-color var(--t-fast) var(--e-enter), background-color var(--t-fast) var(--e-enter); } .choice input { width: 20px; height: 20px; min-width: 24px; min-height: 24px; margin: 0; accent-color: var(--ink); flex: none; } .choice:has(input:checked) { border-color: var(--ink); background: var(--canvas); } .choice:has(input:focus-visible) { border-color: var(--ink); } .row2 { display: grid; gap: 1rem; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } /* ── notices, alerts, empty states ── */ .notice { display: flex; gap: .75rem; align-items: flex-start; padding: 1rem 1.125rem; border-radius: var(--r-card); background: var(--stone); color: var(--graphite); font-size: .9375rem; } .notice .icon { margin-top: .125rem; color: var(--ink); } .notice.alert { background: var(--paper); border: 1px solid var(--chalk); box-shadow: inset 3px 0 0 var(--ink); color: var(--ink); } .notice b { font-weight: 500; color: var(--ink); } .notice ul { margin-top: .375rem; padding-left: 1.1rem; } .notice a { color: var(--ink); } .live { font-size: .875rem; color: var(--graphite); } .live:empty { display: none; } .empty { text-align: center; padding: 3rem 1.5rem; display: grid; justify-items: center; gap: .75rem; } .empty .ico { width: 48px; height: 48px; border-radius: 12px; background: var(--stone); display: grid; place-items: center; } .empty h2, .empty h3 { font-family: var(--serif); font-size: 1.5rem; letter-spacing: -.01em; } .empty p { color: var(--ashen); max-width: 28rem; } .skeleton { border-radius: var(--r-ctl); background: linear-gradient(90deg, var(--stone), var(--chalk), var(--stone)) 0 0 / 200% 100%; animation: k-shimmer var(--t-shimmer) var(--e-move) 3; min-height: 1rem; } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } } /* ── tables (comp): hairline rows, muted header on canvas, tabular right-aligned numbers ── */ .tbl { overflow-x: auto; border-radius: var(--r-card); border: 1px solid var(--chalk); background: var(--paper); } table { width: 100%; border-collapse: collapse; font-size: .875rem; } th { text-align: left; font-weight: 500; font-size: .75rem; color: var(--ashen); padding: .75rem 1rem; border-bottom: 1px solid var(--chalk); background: var(--canvas); white-space: nowrap; } td { padding: .875rem 1rem; border-bottom: 1px solid var(--chalk); vertical-align: middle; } tbody tr:last-child td { border-bottom: 0; } tbody tr { transition: background-color var(--t-fast) var(--e-enter); } td.r, th.r { text-align: right; } td.num { white-space: nowrap; } td a { text-decoration: none; font-weight: 500; color: var(--ink); } @media (hover: hover) and (pointer: fine) { tbody tr:hover { background: var(--canvas); } td a:hover { text-decoration: underline; } } /* phone: rows become cards (each cell labelled by data-label) */ @media (max-width: 40rem) { .tbl.stack { border: 0; background: none; overflow: visible; } .tbl.stack table, .tbl.stack tbody, .tbl.stack tr, .tbl.stack td { display: block; } .tbl.stack thead { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .tbl.stack tr { background: var(--paper); border: 1px solid var(--chalk); border-radius: var(--r-card); padding: .75rem 1rem; } .tbl.stack tr + tr { margin-top: .75rem; } .tbl.stack td { border: 0; padding: .375rem 0; text-align: left; } .tbl.stack td > * { overflow-wrap: anywhere; min-width: 0; } .tbl.stack td::before { content: attr(data-label); color: var(--ashen); font-size: .8125rem; text-align: left; display: block; margin-bottom: .125rem; } .tbl.stack td.lead { font-size: 1rem; padding-bottom: .5rem; } .tbl.stack td.lead::before { display: none; } /* U-017: only right-aligned figures keep the label-left/value-right row; prose cells (the "Why" column) stack the label above the value and read left-aligned, ragged-right. */ .tbl.stack td.num { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; text-align: right; } .tbl.stack td.num::before { display: inline; margin-bottom: 0; } } /* ── key/value lists ── */ .kv { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: 0; font-size: .9375rem; } .kv dt { color: var(--ashen); padding: .75rem 0; border-top: 1px solid var(--chalk); } .kv dd { padding: .75rem 0; border-top: 1px solid var(--chalk); color: var(--ink); min-width: 0; overflow-wrap: anywhere; } .kv dt:first-of-type, .kv dd:first-of-type { border-top: 0; } @media (max-width: 30rem) { .kv { grid-template-columns: 1fr; } .kv dd { border-top: 0; padding-top: 0; } } /* ── reveals (MOTION §3). Hidden only under .m-reveal, which motion.js sets before first paint when it can reveal; rise items are driven by its spring through --rv (one choreography, velocity handed on). ── */ &.m-reveal [data-reveal]:not(.in) { opacity: 0; } &.m-reveal [data-reveal="rise"]:not(.in) { transform: translateY(var(--rise, 24px)); } [data-reveal="rise"].sp { opacity: var(--rv); transform: translateY(calc((1 - var(--rv)) * var(--rise, 24px))); } [data-reveal="fade"].in { animation: k-fade var(--t-slow) var(--e-enter) both; } .ln { display: block; overflow: clip; padding-block: .06em; margin-block: -.06em; } .ln-i { display: inline-block; animation: k-rise var(--t-reveal) var(--e-line) var(--d, 0ms) both; --rise: 105%; } .wd { display: inline-block; } .is-split .wd { animation: k-rise var(--t-reveal-words) var(--e-word) var(--d, 0ms) both; } .ln-i .wd { animation: none; } /* ══ PUBLIC SHELL (comp: landing) ══ */ .pub-top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--canvas) 82%, transparent); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid color-mix(in srgb, var(--chalk) 70%, transparent); } @media (prefers-reduced-transparency: reduce) { .pub-top { background: var(--canvas); backdrop-filter: none; -webkit-backdrop-filter: none; } } .pub-top .bar { display: flex; align-items: center; gap: .5rem; height: 64px; } .brand { display: inline-flex; align-items: center; gap: .625rem; color: var(--ink); text-decoration: none; min-height: 44px; } .pub-top .brand { margin-right: auto; } .pub-nav { display: flex; gap: .25rem; } .pub-nav a { padding: .5rem .875rem; border-radius: var(--r-ctl); text-decoration: none; font-weight: 500; color: var(--graphite); min-height: 44px; display: inline-flex; align-items: center; transition: background-color var(--t-fast) var(--e-enter), color var(--t-fast) var(--e-enter); } .pub-nav a[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; } @media (hover: hover) and (pointer: fine) { .pub-nav a:hover { background: var(--stone); color: var(--ink); } } .pub-cta { display: flex; gap: .5rem; margin-left: .5rem; } .menu-btn { display: none; flex: none; width: 44px; height: 44px; border-radius: var(--r-ctl); place-items: center; color: var(--ink); } .menu-btn .icon { width: 1.25rem; height: 1.25rem; } .overlay { position: fixed; inset: 0; z-index: 60; background: var(--canvas); display: flex; flex-direction: column; padding: 0 var(--gutter) 2rem; opacity: 0; transition: opacity var(--t-overlay) var(--e-enter); overflow-y: auto; } .overlay.in { opacity: 1; } .overlay .bar { display: flex; align-items: center; justify-content: space-between; height: 64px; } .overlay nav { display: grid; margin-top: 1.5rem; } .overlay nav a { font-family: var(--serif); font-size: 2rem; letter-spacing: -.02em; line-height: 1.2; color: var(--ink); text-decoration: none; padding: .625rem 0; border-bottom: 1px solid var(--chalk); opacity: 0; transform: translateY(16px); transition: opacity var(--t-slow) var(--e-enter) var(--d, 0ms), transform var(--t-slow) var(--e-move) var(--d, 0ms); } .overlay nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--accent); padding-left: .75rem; } .overlay.in nav a { opacity: 1; transform: none; } .overlay.out { transition-timing-function: var(--e-exit); } .overlay.out nav a { transition-timing-function: var(--e-exit), var(--e-exit); transition-duration: var(--t-base), var(--t-base); } .overlay .cta { display: grid; gap: .625rem; margin-top: 2rem; } @media (prefers-reduced-motion: reduce) { .overlay { transition-duration: var(--t-rm); } .overlay nav a { transform: none; transition: opacity var(--t-rm) var(--e-enter); } } .intro { display: none; } &.m-js:not(.intro-seen) .intro { display: grid; position: fixed; inset: 0; z-index: 90; background: var(--ink); color: var(--canvas); place-items: center; transform: translate3d(0, var(--iy, 0%), 0); } .intro .intro-inner { display: grid; justify-items: center; gap: 1.25rem; transition: opacity var(--t-overlay) var(--e-enter); } .intro .mark { width: 48px; height: 48px; object-fit: contain; } .intro-count { font: 400 clamp(3.5rem, 12vw, 7.5rem)/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .intro.leaving .intro-inner { opacity: 0; } @media (prefers-reduced-motion: reduce) { .intro { transition: opacity var(--t-rm) var(--e-enter); } .intro.leaving { opacity: 0; } .intro.leaving .intro-inner { opacity: 1; } } &.menu-open body { overflow: hidden; } .hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center; padding-block: 4rem 5rem; } .hero h1 { font-family: var(--serif); font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1.08; letter-spacing: -.02em; margin-top: .875rem; } .hero h1 em { font-style: normal; color: var(--accent-text); } .hero .lede { font-size: 1.125rem; line-height: 1.55; color: var(--graphite); max-width: 34rem; margin-top: 1.25rem; } .hero .actions { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: 1.75rem; } .hero .proof { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: 1.75rem; color: var(--ashen); font-size: .875rem; list-style: none; } .hero .proof li { display: flex; align-items: center; gap: .5rem; white-space: nowrap; } @media (min-width: 68.75rem) { .hero .proof { flex-wrap: nowrap; gap: 1.125rem; } } .dot-accent { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: inline-block; flex: none; } .wordmark { background: linear-gradient(100deg, #D95F14, #974514); -webkit-background-clip: text; background-clip: text; color: #974514; -webkit-text-fill-color: transparent; } @supports not ((background-clip: text) or (-webkit-background-clip: text)) { .wordmark { -webkit-text-fill-color: currentColor; } } .hero-art { position: relative; } .mock { position: relative; background: var(--paper); border-radius: var(--r-elev); border: 1px solid var(--chalk); box-shadow: var(--shadow-2); overflow: hidden; } @supports (animation-timeline: scroll()) { @media (prefers-reduced-motion: no-preference) { [data-parallax] { animation: k-parallax linear both; animation-timeline: scroll(root); animation-range: 0 100vh; } [data-parallax="0.85"] { --px-shift: 15vh; } } } .mock .mbar { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid var(--chalk); font-size: .75rem; color: var(--ashen); } .mock .mbar .pill { margin-left: auto; background: var(--stone); border-radius: 999px; padding: .1875rem .625rem; } .mock .mbody { display: grid; grid-template-columns: 9.5rem 1fr; min-height: 21rem; } .mock .mside { background: var(--canvas); border-right: 1px solid var(--chalk); padding: .875rem .625rem; font-size: .75rem; color: var(--graphite); display: grid; align-content: start; gap: .25rem; } .mock .mside b { display: block; padding: .375rem .625rem; border-radius: 6px; font-weight: 500; background: var(--paper); color: var(--ink); position: relative; box-shadow: inset 0 0 0 1px var(--chalk); } .mock .mside b::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--accent); } .mock .mside span { padding: .375rem .625rem; display: block; } .mock .mmain { padding: 1.125rem; } .mock .mmain h3 { font-family: var(--serif); font-size: 1.25rem; } .mock .mstages { display: grid; grid-template-columns: repeat(3, 1fr); gap: .625rem; margin-top: .875rem; } .mock .mstage { border: 1px solid var(--chalk); border-radius: 10px; padding: .75rem; border-top: 3px solid var(--accent); } .mock .mstage:nth-child(2) { border-top-color: var(--graphite); } .mock .mstage:nth-child(3) { border-top-color: var(--pebble); } .mock .mstage small { display: block; font-size: .6875rem; color: var(--ashen); } .mock .mstage strong { display: block; font-size: 1.375rem; font-weight: 600; margin-top: .25rem; font-variant-numeric: tabular-nums; } .mock .mrows { margin-top: .875rem; display: grid; gap: .375rem; } .mock .mrow { display: grid; grid-template-columns: 1fr auto auto; gap: .625rem; font-size: .75rem; padding: .5625rem .625rem; border: 1px solid var(--chalk); border-radius: 8px; } .mock .mrow span:nth-child(2) { font-variant-numeric: tabular-nums; } .band { padding-block: 4rem; } .band.tight { padding-top: 0; } .band h2, .sect-title { font-family: var(--serif); font-size: 1.875rem; line-height: 1.2; letter-spacing: -.02em; } .band .sub { color: var(--ashen); font-size: 1rem; margin-top: .5rem; max-width: 38rem; } .feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; } .feat .card h3 { font-size: 1.0625rem; font-weight: 500; margin-top: 1rem; } .feat .card p { color: var(--graphite); font-size: .875rem; margin-top: .5rem; line-height: 1.6; } .ico { width: 40px; height: 40px; border-radius: 10px; background: var(--stone); display: grid; place-items: center; color: var(--ink); flex: none; } .ico .icon { width: 1.125rem; height: 1.125rem; } .steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 2rem; border-top: 1px solid var(--chalk); list-style: none; } .steps li { padding: 1.5rem 1.5rem 1.5rem 0; border-bottom: 1px solid var(--chalk); } .steps .n { font-family: var(--serif); font-size: 1.875rem; color: var(--accent-text); line-height: 1; } .steps h3 { font-size: 1rem; font-weight: 500; margin-top: .875rem; } .steps p { color: var(--graphite); font-size: .875rem; margin-top: .375rem; line-height: 1.6; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2rem; list-style: none; } .stats li { border-top: 1px solid var(--ink); padding-top: 1rem; } .stats b { display: block; font: 400 2.75rem/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .stats span { display: block; color: var(--graphite); font-size: .875rem; margin-top: .5rem; } .stone-band { background: var(--stone); border-radius: var(--r-elev); padding: 3rem; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; } .stone-band h2 { font-family: var(--serif); font-size: 1.875rem; line-height: 1.2; letter-spacing: -.02em; } .ticks { margin-top: 1rem; list-style: none; display: grid; gap: .625rem; color: var(--graphite); font-size: .9375rem; } .ticks li { display: flex; gap: .625rem; align-items: flex-start; } .ticks .tick { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 1px solid var(--chalk); display: grid; place-items: center; margin-top: 2px; } .ticks .tick .icon { width: 10px; height: 10px; } .quote { background: var(--paper); border-radius: var(--r-card); padding: 1.75rem; border: 1px solid var(--chalk); } .quote p { font-family: var(--serif); font-size: 1.25rem; line-height: 1.4; } .quote { margin: 0; } .reviewed { font-size: .8125rem; margin-top: 1.5rem; } .works .icon { width: 1.25rem; height: 1.25rem; flex: none; } .quote footer { margin-top: .875rem; font-size: .8125rem; color: var(--ashen); } .works { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; padding: 1.25rem 1.5rem; margin-top: 1rem; border: 1px solid var(--chalk); border-radius: var(--r-card); background: var(--paper); color: var(--graphite); font-size: .9375rem; } .works b { font-weight: 500; color: var(--ink); } .foot { background: var(--obsidian); color: var(--pebble); padding-block: 4rem; margin-top: 5rem; } .foot .grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 2rem; } .foot h2 { margin: 0 0 .75rem; color: var(--canvas); font: 500 .8125rem/1.4 var(--sans); } .foot a { color: var(--pebble); text-decoration: none; display: block; padding: .5rem 0; font-size: .875rem; min-height: 24px; } @media (hover: hover) and (pointer: fine) { .foot a:hover { color: var(--canvas); } } .foot .word { font-family: var(--serif); font-size: 1.375rem; color: var(--canvas); letter-spacing: .02em; } .foot p { font-size: .875rem; margin-top: .625rem; max-width: 26rem; } .foot .fine { margin-top: 2.5rem; font-size: .75rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .foot .fine a { display: inline; padding: 0; font-size: .75rem; text-decoration: underline; } .prose { max-width: 44rem; padding-block: 3.5rem 1rem; } .prose h1 { font-family: var(--serif); font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -.02em; margin-top: .75rem; } .prose .lede { font-size: 1.125rem; color: var(--graphite); margin-top: 1rem; } .prose .body { margin-top: 2rem; display: grid; gap: 1.125rem; font-size: 1rem; line-height: 1.7; color: var(--graphite); } .prose .body strong { font-weight: 600; color: var(--ink); } .prose .body ul { padding-left: 1.2rem; display: grid; gap: .375rem; } .prose .reviewed { margin-top: 2rem; font-size: .8125rem; color: var(--ashen); } .aside-links { display: grid; gap: .5rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--chalk); } .pager { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .75rem; margin-top: 3rem; } .pager a { display: block; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--chalk); border-radius: var(--r-card); padding: 1.25rem 1.5rem; } .pager a small { display: block; color: var(--ashen); font-size: .8125rem; } .pager a span { font-weight: 500; } @media (max-width: 56.25rem) { --gutter: 1rem; .hero { grid-template-columns: 1fr; padding-block: 2.5rem 3rem; gap: 2.5rem; } .stone-band, .foot .grid { grid-template-columns: 1fr; } .feat, .steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); } .foot .grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); } .stone-band { padding: 1.75rem; } .pub-nav { display: none; } &.has-menu .menu-btn { display: grid; } /* U-018 (verify-fail cycle 1): "Sign in" was wrapping onto two lines next to "Start free" and the menu button — tighter gap and no wrap on the button label, the existing ≤56.25rem breakpoint, not a new one. */ .pub-top .bar { gap: .375rem; } .pub-cta { gap: .375rem; margin-left: .25rem; } .pub-cta .btn { white-space: nowrap; padding-inline: .75rem; } .mock .mbody { grid-template-columns: 1fr; } .mock .mside { display: none; } .mock .mstages { grid-template-columns: repeat(3, 1fr); } .mock .mrow span:nth-child(3) { display: none; } .mock .mrow { grid-template-columns: 1fr auto; } } @media (max-width: 30rem) { .stats { grid-template-columns: 1fr; } .pub-cta .btn-dark { padding-inline: .875rem; } .mock .mstages { grid-template-columns: 1fr 1fr 1fr; gap: .375rem; } .mock .mstage { padding: .5rem; } } @media (max-width: 24rem) { .pub-cta .btn-ghost { display: none; } } /* ══ AUTH (comp: sign in) ══ */ .auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 5fr 6fr; } .auth .side { background: var(--stone); padding: 3rem; display: flex; flex-direction: column; gap: 2.5rem; } .auth .side h2 { font-family: var(--serif); font-size: 2.125rem; line-height: 1.15; letter-spacing: -.02em; margin-top: auto; } .auth .side h2 em { font-style: normal; color: var(--accent-text); } .auth .side ul { list-style: none; display: grid; gap: .875rem; color: var(--graphite); font-size: .9375rem; } .auth .side li { display: flex; gap: .75rem; align-items: flex-start; } .auth .side li .dot-accent { margin-top: .5625rem; } .auth .side .fine { font-size: .75rem; color: var(--ashen); } .auth .pane { display: grid; place-items: center; padding: 3rem 1.5rem; } .auth .card { width: min(26.25rem, 100%); border-radius: var(--r-elev); padding: 2.5rem; box-shadow: var(--shadow); } .auth .card h1 { font-family: var(--serif); font-size: 1.875rem; line-height: 1.2; letter-spacing: -.02em; } .auth .card .lede { color: var(--ashen); margin-top: .5rem; font-size: .9375rem; } .auth .card form, .auth .card .stack { display: grid; gap: 1rem; margin-top: 1.75rem; } .auth .card .foot-note { color: var(--ashen); margin-top: 1.5rem; font-size: .8125rem; text-align: center; display: grid; gap: .5rem; } .auth .card .foot-note a { color: var(--graphite); } .auth .card .or { display: flex; align-items: center; gap: .75rem; color: var(--pebble); font-size: .75rem; } .auth .card .or::before, .auth .card .or::after { content: ""; flex: 1; border-top: 1px solid var(--chalk); } .auth .pane-brand { display: none; width: min(26.25rem, 100%); margin-bottom: 1.25rem; } .auth .pane-top { position: absolute; top: 1.5rem; right: 1.5rem; } @media (max-width: 56.25rem) { .auth { grid-template-columns: 1fr; } .auth .side { padding: 1.5rem; gap: 1.5rem; order: 2; } .auth .side h2 { margin-top: 0; font-size: 1.625rem; } .auth .side > .brand { display: none; } .auth .pane { padding: 1.5rem 1rem 2rem; place-items: start center; } .auth .pane-brand { display: flex; } .auth .card { padding: 1.75rem 1.25rem; } } .auth .pane-wrap { display: grid; justify-items: center; width: 100%; } /* ══ PRODUCT SHELL (comp: workspace) ══ */ .app { display: grid; grid-template-columns: 15rem minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; } .side-nav { background: var(--canvas); border-right: 1px solid var(--chalk); padding: 1rem .75rem; display: flex; flex-direction: column; gap: .25rem; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: auto; overscroll-behavior: contain; } .side-nav .brand { padding: .25rem .625rem .875rem; } .side-nav .create { margin: .25rem 0 .75rem; } .app-nav, .participant-nav { display: grid; gap: .25rem; } .nav-group ul { list-style: none; display: grid; gap: 2px; } .nav-group-label { margin: .875rem 0 0; padding: 0 .625rem .375rem; font-size: .6875rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ashen); } .app-nav a, .participant-nav a { display: flex; align-items: center; gap: .625rem; min-height: 40px; padding: .5625rem .625rem; border-radius: var(--r-ctl); text-decoration: none; color: var(--graphite); font-size: .875rem; font-weight: 500; position: relative; transition: background-color var(--t-fast) var(--e-enter), color var(--t-fast) var(--e-enter), transform var(--t-press) var(--e-enter); } .app-nav a:active, .participant-nav a:active { transform: scale(.99); } .app-nav a[aria-current="page"], .participant-nav a[aria-current="page"] { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--chalk); } .app-nav a[aria-current="page"]::before, .participant-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -.75rem; top: .5625rem; bottom: .5625rem; width: 3px; border-radius: 0 2px 2px 0; background: var(--accent); } .app-nav .nav-icon, .participant-nav .nav-icon { width: 1.125rem; height: 1.125rem; flex: none; fill: currentColor; } @media (hover: hover) and (pointer: fine) { .app-nav a:hover, .participant-nav a:hover { background: var(--stone); color: var(--ink); } } .acct { margin-top: auto; border-top: 1px solid var(--chalk); display: flex; align-items: center; gap: .625rem; padding: .875rem .625rem .25rem; } .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--canvas); display: grid; place-items: center; font-size: .75rem; font-weight: 500; flex: none; } .acct b { font-weight: 500; font-size: .875rem; display: block; } .acct small { display: block; color: var(--ashen); font-size: .75rem; } .main-col { min-width: 0; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: .5rem; height: 64px; padding-inline: 2rem; background: color-mix(in srgb, var(--canvas) 82%, transparent); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); } @media (prefers-reduced-transparency: reduce) { .topbar { background: var(--canvas); backdrop-filter: none; -webkit-backdrop-filter: none; } } .topbar .crumbs { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--ashen); min-width: 0; } .topbar .crumbs a { color: var(--graphite); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; } .topbar .crumbs .icon { width: .75rem; height: .75rem; } .topbar .tools { margin-left: auto; display: flex; align-items: center; gap: .25rem; } .icon-btn { flex: none; width: 44px; height: 44px; border-radius: var(--r-ctl); display: inline-grid; place-items: center; color: var(--graphite); text-decoration: none; position: relative; transition: background-color var(--t-fast) var(--e-enter), color var(--t-fast) var(--e-enter), transform var(--t-press) var(--e-enter); } .icon-btn:active { transform: scale(.97); } .icon-btn .icon { width: 1.125rem; height: 1.125rem; } .icon-btn.has-dot::after { content: ""; position: absolute; top: 11px; right: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); border: 2px solid var(--canvas); } .sign-out { display: inline-flex; } .sign-out button { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 .75rem; border-radius: var(--r-ctl); color: var(--graphite); font-weight: 500; font-size: .875rem; transition: background-color var(--t-fast) var(--e-enter), color var(--t-fast) var(--e-enter), transform var(--t-press) var(--e-enter); } .sign-out button:active { transform: scale(.97); } @media (hover: hover) and (pointer: fine) { .icon-btn:hover, .sign-out button:hover { background: var(--stone); color: var(--ink); } } .topbar .tbrand { display: none; } .workspace-menu-toggle { display: none; } .workspace-menu-close { display: none; } .scrim { display: none; } main.content { padding: 0 2rem 3rem; flex: 1; } .pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-block: 1rem 1.5rem; } .pagehead .date { font-size: .8125rem; color: var(--ashen); } .pagehead h1 { font-family: var(--serif); font-size: 2.125rem; line-height: 1.15; letter-spacing: -.02em; margin-top: .25rem; outline: 0; } .pagehead .lede { color: var(--ashen); margin-top: .375rem; max-width: 40rem; } .pagehead .acts { display: flex; gap: .5rem; flex-wrap: wrap; } .grid-main { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; } .sect h2 { font-size: 1rem; font-weight: 500; margin-bottom: .75rem; display: flex; align-items: baseline; gap: .625rem; } .sect h2 a, .sect h2 .more { margin-left: auto; font-size: .8125rem; font-weight: 500; color: var(--graphite); text-decoration: none; } .sect + .sect { margin-top: 2rem; } .stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; } .stage:active { --press: .99; } .stage { background: var(--paper); border: 1px solid var(--chalk); border-radius: var(--r-card); padding: 1.25rem; border-top: 3px solid var(--accent); text-decoration: none; color: inherit; display: block; } .stage:nth-child(2) { border-top-color: var(--graphite); } .stage:nth-child(3) { border-top-color: var(--pebble); } .stage .t { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--ashen); } .stage .t .icon { width: 1rem; height: 1rem; } .stage .big { display: flex; align-items: baseline; gap: .5rem; margin-top: .625rem; flex-wrap: wrap; } .stage .big b { font-size: 2rem; font-weight: 600; line-height: 1; } .stage .big span { font-size: .9375rem; font-weight: 500; } .stage ul { margin-top: .75rem; list-style: none; font-size: .8125rem; color: var(--graphite); display: grid; gap: .25rem; } .stage li { display: flex; justify-content: space-between; gap: .5rem; } .todo { background: var(--paper); border: 1px solid var(--chalk); border-radius: var(--r-card); overflow: hidden; list-style: none; } .todo li + li { border-top: 1px solid var(--chalk); } .todo a, .todo .row { display: grid; grid-template-columns: 40px 1fr auto; gap: .875rem; align-items: center; padding: 1rem; text-decoration: none; color: inherit; transition: background-color var(--t-fast) var(--e-enter), transform var(--t-press) var(--e-enter); } .todo a:active { background: var(--stone); transform: scale(.99); } @media (hover: hover) and (pointer: fine) { .todo a:hover { background: var(--canvas); } } .todo b { font-weight: 500; display: block; font-size: .9375rem; } .todo small { color: var(--ashen); font-size: .8125rem; display: block; } .aside { min-width: 0; } .aside .card { padding: 1.5rem; } .aside .card + .card { margin-top: 1rem; } .aside h2, .aside h3 { font-size: .9375rem; font-weight: 500; display: flex; justify-content: space-between; align-items: center; gap: .5rem; } .aside h2 a, .aside h3 a { font-size: .8125rem; font-weight: 500; text-decoration: none; color: var(--graphite); } .aside .kpi { font-size: 1.75rem; font-weight: 600; margin-top: .625rem; line-height: 1; } .aside .kpi small { font-size: .8125rem; font-weight: 400; color: var(--ashen); margin-left: .375rem; } .aside .sub { font-size: .8125rem; color: var(--ashen); margin-top: .375rem; } .aside .line { display: flex; justify-content: space-between; gap: .5rem; font-size: .875rem; padding: .625rem 0; border-top: 1px solid var(--chalk); } .aside .line:first-of-type { margin-top: .75rem; } .next-title { margin-top: .5rem; font-weight: 500; } .aside .btn-block { margin-top: 1rem; } .plan-link { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; } .sect h2 .count { font-weight: 400; } .card.empty { padding: 2rem 1.5rem; } .card.plan { background: var(--stone); border: 0; } .page-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; min-width: 0; } fieldset.group { border: 0; margin: 0; padding: 1.25rem 0 0; border-top: 1px solid var(--chalk); display: grid; gap: 1rem; min-width: 0; } fieldset.group:first-of-type { border-top: 0; padding-top: 0; } fieldset.group legend { font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ashen); padding: 0; margin-bottom: .25rem; } .row3 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); } .result td .muted { font-size: .75rem; } .result .why { font-size: .8125rem; color: var(--graphite); margin-top: .375rem; max-width: 34rem; } .result .total { display: flex; justify-content: space-between; align-items: baseline; padding: 1rem 1rem 0; font-size: 1rem; } .result .total b { font-size: 1.5rem; font-weight: 600; } .result .notice, .result .form-actions { margin-top: 1rem; } .aside .items { margin: 1rem 0 0; } .gen-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end; } .gen-form .field { flex: 1 1 18rem; } .invoice-doc { display: grid; gap: 1.5rem; } .invoice-doc .doc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; } .invoice-doc h2.serif { font-size: 1.875rem; letter-spacing: -.02em; margin-top: .25rem; } .invoice-doc .parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.5rem; padding: 1.25rem; background: var(--canvas); border-radius: var(--r-card); } .invoice-doc .parties b { display: block; font-weight: 500; margin-top: .375rem; } .invoice-doc .parties p:not(.eyebrow) { color: var(--graphite); font-size: .875rem; } .invoice-doc .total, .result .total { display: flex; justify-content: space-between; align-items: baseline; padding: 0 1rem; } .invoice-doc .total b { font-size: 1.5rem; font-weight: 600; } .invoice-doc .why { font-size: .8125rem; color: var(--graphite); } .invoice-doc .totals { display: grid; grid-template-columns: 1fr auto; gap: .5rem 0; margin: 0 0 0 auto; width: min(100%, 24rem); font-size: .9375rem; } .invoice-doc .totals dt { color: var(--graphite); } .invoice-doc .totals dd { margin: 0; text-align: right; padding-left: 1.5rem; } .invoice-doc .totals dd small { display: block; font-size: .75rem; color: var(--ashen); max-width: 14rem; margin-left: auto; } .invoice-doc .totals .grand { border-top: 1px solid var(--ink); padding-top: .75rem; font-size: 1.25rem; font-weight: 600; color: var(--ink); } .invoice-doc .evidence-line { font-size: .8125rem; } .invoice-doc td .why { margin-top: .25rem; } @media (max-width: 40rem) { .invoice-doc .totals { width: 100%; } .invoice-doc .tbl.stack td.lead { display: block; } } .invoice-doc .kv.pay { grid-template-columns: minmax(8rem, 10rem) 1fr; } .items { list-style: none; display: grid; margin-bottom: 1.25rem; border-top: 1px solid var(--chalk); } .item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .875rem 0; border-bottom: 1px solid var(--chalk); } .item b { font-weight: 500; display: block; } .item small { display: flex; gap: .5rem; align-items: center; color: var(--ashen); font-size: .8125rem; margin-top: .25rem; } .item.note { display: grid; gap: .5rem; } .item .body-text { margin-top: .5rem; color: var(--graphite); white-space: pre-wrap; } .inline-form { display: flex; gap: .5rem; align-items: center; } .inline-form select { min-height: 36px; border: 1px solid var(--mist); border-radius: var(--r-ctl); background: var(--paper); padding: 0 2rem 0 .625rem; font: 400 max(16px,1rem)/1.2 var(--sans); } .dashed { border: 1px dashed var(--mist); border-radius: var(--r-ctl); padding: 1rem; text-align: center; color: var(--ashen); margin-bottom: 1.25rem; font-size: .875rem; } .form.add { padding-top: 1.25rem; border-top: 1px solid var(--chalk); } .timeline { list-style: none; display: grid; gap: 0; } .timeline li { display: grid; grid-template-columns: 12px 1fr; gap: .875rem; padding-bottom: 1.125rem; position: relative; } .timeline li:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 1px; background: var(--chalk); } .timeline .tl-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 2px solid var(--pebble); margin-top: 4px; } .timeline li:first-child .tl-dot { border-color: var(--accent); } .timeline b { font-weight: 500; } .timeline p { color: var(--graphite); font-size: .875rem; overflow-wrap: anywhere; } .timeline time { font-size: .8125rem; color: var(--ashen); } /* verifier FAIL: with the base .kv's gap:0, a long label (e.g. "Last checked with the NDIA") and a long right-aligned value sat with zero space between their columns at desktop widths — column-gap keeps them apart even when the label wraps onto two lines. */ .aside .kv { grid-template-columns: 1fr auto; column-gap: .75rem; margin-top: .75rem; font-size: .875rem; } .aside .kv dd { text-align: right; } @media (max-width: 30rem) { .aside .kv { grid-template-columns: 1fr auto; } .aside .kv dd { border-top: 1px solid var(--chalk); padding-top: .75rem; } .aside .kv dd:first-of-type { border-top: 0; } } @media (max-width: 64rem) { .grid-main.aside-first > .aside { order: -1; } } .aside .card .form { margin-top: 1rem; gap: .75rem; } .card.danger { border-color: var(--chalk); } .sect-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; } .sect-card { position: relative; } .sect-card > h2 { font-size: 1.125rem; font-weight: 500; } .sect-card > .sect-desc { margin-top: .25rem; font-size: .875rem; color: var(--ashen); } .sect-card > h2 + *, .sect-card > .sect-desc + * { margin-top: 1.25rem; } .sect-card.has-action > h2 { padding-right: 10rem; } .sect-card > .sect-action { position: absolute; top: 1.75rem; right: 2rem; } .form-page { max-width: 40rem; display: grid; gap: 1rem; } .form-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .25rem; } main.content > .count { margin-bottom: .75rem; } .card.plan .badge { background: var(--paper); } .toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin-bottom: 1rem; } .toolbar .field { flex: 1 1 14rem; } .count { font-size: .8125rem; color: var(--ashen); } .actionbar { position: sticky; bottom: 0; z-index: 20; display: flex; justify-content: flex-end; gap: .5rem; padding: .875rem 0; background: color-mix(in srgb, var(--canvas) 88%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--chalk); margin-top: 2rem; } @media (prefers-reduced-transparency: reduce) { .actionbar { background: var(--canvas); backdrop-filter: none; -webkit-backdrop-filter: none; } } .rail { list-style: none; display: grid; gap: 0; counter-reset: step; } .rail li { display: grid; grid-template-columns: 28px 1fr; gap: .75rem; align-items: start; padding-bottom: 1.25rem; position: relative; font-size: .875rem; color: var(--ashen); } .rail li::before { counter-increment: step; content: counter(step); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: .75rem; font-weight: 500; background: var(--paper); border: 1px solid var(--mist); color: var(--graphite); } .rail li:not(:last-child)::after { content: ""; position: absolute; left: 13.5px; top: 30px; bottom: 2px; width: 1px; background: var(--chalk); } .rail li[aria-current="step"] { color: var(--ink); font-weight: 500; } .rail li[aria-current="step"]::before { background: var(--ink); border-color: var(--ink); color: var(--canvas); } .rail li.done::before { content: "✓"; background: var(--stone); border-color: var(--stone); } .plain { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; } .plain > .wrap { width: 100%; } .plain .ptop { display: flex; align-items: center; justify-content: space-between; height: 64px; } .plain main { display: grid; place-items: center; padding: 2rem var(--gutter) 4rem; } .plain .card { width: min(34rem, 100%); } .refusal .refusal-top { display: flex; align-items: center; justify-content: space-between; } .plain .form { margin-top: 1.25rem; } .plain .card.referral { width: min(44rem, 100%); display: grid; gap: 1.25rem; } .referral h1 { margin-top: 0; } .referral .offer-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } .referral .nested h2 { font-size: 1rem; font-weight: 500; margin-bottom: .5rem; } .referral .nested p { color: var(--graphite); font-size: .9375rem; } .referral code { overflow-wrap: anywhere; } .plain h1 { font-family: var(--serif); font-size: 1.875rem; line-height: 1.2; letter-spacing: -.02em; margin-top: 1rem; } .plain .lede { color: var(--graphite); margin-top: .75rem; font-size: 1rem; } .plain .acts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.75rem; } .plain .pfoot { padding-block: 1.5rem; font-size: .75rem; color: var(--ashen); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } /* Participant portal (v2): row actions in a table cell, and short record identifiers. */ .row-acts { display: inline-flex; flex-wrap: wrap; gap: .375rem; justify-content: flex-end; } .hash { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8125rem; overflow-wrap: anywhere; } .aside .items { margin-bottom: 0; } .aside .item { padding: .75rem 0; } .aside .dashed { margin: .75rem 0 0; } td.lead b.num { white-space: nowrap; } /* Search results (private evidence and open-web discovery): one paper card per passage. */ .hit h2 { font-size: 1.0625rem; font-weight: 500; overflow-wrap: anywhere; } .hit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; font-size: .8125rem; color: var(--ashen); } .hit-text { margin-top: 1rem; padding-left: 1rem; border-left: 2px solid var(--chalk); color: var(--graphite); white-space: pre-wrap; overflow-wrap: anywhere; } .hit .kv { margin-top: 1rem; } .hit > p:last-child { margin-top: .75rem; } /* Participant schedule: an item row with its actions; the edit form opens full width below. */ .sched-item { align-items: flex-start; min-width: 0; } .sched-item > div:first-child { flex: 1 1 min(100%, 16rem); min-width: 0; } .sched-when { margin-top: .375rem; font-size: .8125rem; color: var(--graphite); } .sched-acts { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; flex: 1 1 100%; min-width: 0; } .sched-edit { flex: 0 0 auto; } .sched-edit[open] { flex: 1 1 100%; order: 9; } .sched-edit > summary { list-style: none; cursor: pointer; } .sched-edit > summary::-webkit-details-marker { display: none; } .sched-edit[open] > summary { margin-bottom: 1rem; } .sched-edit .form { padding: 1.25rem; border: 1px solid var(--chalk); border-radius: var(--r-card); background: var(--canvas); } .inline-form.snooze { flex: 1 1 min(100%, 20rem); min-width: 0; flex-wrap: wrap; gap: .25rem .5rem; } .snooze-label { flex: 1 1 100%; font-size: .8125rem; color: var(--graphite); } .sect-card > .items:last-child { margin-bottom: 0; } /* Participant sharing: the one-time location capture row, and the facts of a created share. */ .locate { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: 1rem; background: var(--canvas); border-radius: var(--r-card); } .locate > div { flex: 1 1 min(100%, 12rem); min-width: 0; } .locate b { font-weight: 500; } .locate .sub { font-size: .8125rem; color: var(--ashen); } .aside .rail { margin-top: 1rem; } .aside .rail + .sub { margin-top: 0; } .card .notice + .kv { margin-top: 1rem; } .card .kv + .form-actions { margin-top: 1.25rem; } /* Participant forms, chat and optional form groups. */ .form-title { font-size: 1.125rem; font-weight: 500; } .btn.btn-wrap { white-space: normal; line-height: 1.3; text-align: center; max-width: 100%; } fieldset.group .row2, fieldset.group .row3 { align-items: end; } .chat-intro { align-items: center; } .chat { max-width: 44rem; } .chat-intro { display: flex; gap: 1rem; align-items: flex-start; } .chat-intro h2 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.2; } .chat-intro .sub { margin-top: .5rem; color: var(--ashen); font-size: .875rem; } .chat-thread { display: grid; gap: 1rem; } .msg { padding: 1rem 1.25rem; border-radius: var(--r-card); background: var(--canvas); white-space: pre-wrap; overflow-wrap: anywhere; } .msg.mine { background: var(--stone); margin-left: 15%; } .msg .who { font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ashen); margin-bottom: .375rem; } .inline-form.snooze input { flex: 1 1 6rem; min-width: 0; min-height: 36px; border: 1px solid var(--mist); border-radius: var(--r-ctl); background: var(--paper); padding: 0 .625rem; font: 400 max(16px,1rem)/1.2 var(--sans); } /* U-001 (verify-fail cycle 2): a native date input's "dd/mm/yyyy" placeholder was clipping at 1280 — the 6rem basis could shrink to 0 in the cramped aside; a date input never shrinks below the width its own placeholder needs. */ .inline-form.snooze input[type="date"] { flex-basis: 9rem; min-width: 9rem; } .inline-form.snooze .field-error { flex: 1 1 100%; } .inline-form.snooze [aria-invalid="true"] { border-color: var(--ink); } /* Evidence answer, reply draft and action status: the question as a serif line, numbered citations, the unsent body. */ .answer-q { font-family: var(--serif); font-size: 1.375rem; line-height: 1.25; letter-spacing: -.01em; margin-top: .375rem; overflow-wrap: anywhere; } .answer > h2 { font-size: 1.125rem; font-weight: 500; } .answer .body-text, .card > .body-text { margin-top: .5rem; color: var(--graphite); white-space: pre-wrap; overflow-wrap: anywhere; } .answer-inf { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--chalk); } .answer-inf h3 { font-size: .9375rem; font-weight: 500; } .cite h3 { font-size: 1.0625rem; font-weight: 500; overflow-wrap: anywhere; } .draft-label { margin-top: 1.5rem; } .draft-body { margin-top: .75rem; padding: 1.25rem; background: var(--canvas); border-radius: var(--r-card); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); } .aside .card > .btn-block + .btn-block, .aside .card > .form + .btn-block { margin-top: .5rem; } .aside .card > .kv + .sub { margin-top: 1rem; } .aside .card > .sub + .btn-block { margin-top: 1rem; } .outcome .sect-head, .answer .sect-head { flex-wrap: wrap; } .outcome .sect-head > div, .answer .sect-head > div { flex: 1 1 min(100%, 16rem); min-width: 0; } .outcome .sect-head h2 { font-size: 1.25rem; font-weight: 500; line-height: 1.3; overflow-wrap: anywhere; } .outcome .sect-head .badge { flex: none; } /* Team, invites and notifications. */ .token-box { margin-top: .25rem; padding: 1rem 1.25rem; background: var(--stone); border-radius: var(--r-ctl); overflow-wrap: anywhere; } .token-box code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .9375rem; user-select: all; } .token-box + .kv { margin-top: 1rem; } .card .kv + .notice { margin-top: 1rem; } .card > .notice + .form-actions { margin-top: 1.25rem; } .who { display: grid; gap: .125rem; text-align: left; min-width: 0; overflow-wrap: anywhere; } .who b { font-weight: 500; } .who .muted { font-size: .8125rem; } .team-acts { align-items: center; } .team-acts .inline-form { flex-wrap: nowrap; gap: .375rem; } /* verifier FAIL cycle 3: the same first-party chevron .field select uses above — one arrow style, not two. */ .team-acts select { appearance: none; min-height: 36px; padding: 0 2rem 0 .625rem; border: 1px solid var(--mist); border-radius: var(--r-ctl); font: 400 max(16px, 1rem)/1.2 var(--sans); color: var(--ink); background: var(--paper) url('/static/select-chevron.svg') no-repeat right .625rem center / 12px; } @media (max-width: 40rem) { .tbl.stack td:has(> .team-acts) { display: block; text-align: left; } .tbl.stack td:has(> .team-acts)::before { display: block; margin-bottom: .5rem; } .tbl.stack td > .team-acts { display: flex; justify-content: flex-start; } .team-acts .inline-form { flex: 1 1 100%; } .team-acts .inline-form select { flex: 1 1 auto; min-width: 0; } .tbl.stack td .holder-note { text-align: right; } } .holder-note { font-size: .8125rem; max-width: 18rem; margin-left: auto; } .notices .item { align-items: flex-start; } .notices .item > div { flex: 1 1 min(100%, 18rem); min-width: 0; } .notices .item .body-text { margin-top: .25rem; font-size: .875rem; overflow-wrap: anywhere; } .notices .item small { margin-top: .5rem; flex-wrap: wrap; } /* Pricing: current plan summary, then the plan cards (current one marked with the accent edge). */ .plan-now { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .75rem; } .plan-now b { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; line-height: 1.2; } .plan-now + .sub { margin-top: .25rem; color: var(--ashen); font-size: .875rem; } .plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 1rem; } .pricing-card { display: flex; flex-direction: column; gap: .75rem; } .pricing-card.is-current { border-top: 3px solid var(--accent); } .pricing-card h3 { font-size: 1.0625rem; font-weight: 500; } .plan-price { display: grid; gap: .125rem; } .plan-price b { font-family: var(--serif); font-weight: 400; font-size: 2.25rem; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .plan-price span { font-size: .8125rem; color: var(--ashen); } .plan-act { margin-top: auto; padding-top: .5rem; } .current-plan { display: flex; align-items: center; justify-content: center; gap: .375rem; min-height: 44px; border-radius: var(--r-ctl); background: var(--stone); font-weight: 500; font-size: .875rem; } .plan-note { min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--mist); border-radius: var(--r-ctl); font-size: .875rem; color: var(--ashen); } /* Count tiles (metrics, financial summary) and the holding-account release form. */ .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .sect > .tiles { margin-bottom: 0; } .tile { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: .5rem; padding: 1.25rem 1.5rem; } .tile dt { font-size: .875rem; color: var(--graphite); } .tile dd { font: 400 2.25rem/1 var(--serif); letter-spacing: -.02em; } .holdings .item { align-items: flex-start; } .holdings .item > div { flex: 1 1 min(100%, 14rem); min-width: 0; } .holdings .release { flex: 1 1 100%; gap: .75rem; padding: 1rem; background: var(--canvas); border-radius: var(--r-card); } .holdings .release .btn { justify-self: start; } .items.holdings { margin: 0; } .card > .items.holdings .item:last-child { border-bottom: 0; } .aside .sect-head { flex-wrap: wrap; gap: .5rem 1rem; } .aside .sect-head h2 { flex: 1 1 10rem; min-width: 0; } .art-acts { display: grid; gap: .5rem; margin-top: 1rem; } .art-acts .form { margin: 0 0 .5rem; } .preview-kv dd { white-space: pre-wrap; overflow-wrap: anywhere; } /* Share & Earn: the referral quote (amounts right-aligned, currency muted). */ .cur { color: var(--ashen); font-size: .875rem; margin-right: .125rem; } .kv.quote-kv dd { text-align: right; } .kv.quote-kv b { font-weight: 500; } .kv.quote-kv .total-row b { font-size: 1.125rem; font-weight: 600; } .kv.quote-kv + .notice { margin-top: 1rem; } .card > .notice + form.form-actions, .card > .kv + form.form-actions { margin-top: 1.25rem; } .sect-card > .body-text + .kv, .sect-card > .kv + .sub, .sect-card > .notice + .sub { margin-top: 1rem; } .sect-card > .sub { color: var(--ashen); font-size: .875rem; } .sect-card > .sub + form.form-actions { margin-top: 1.25rem; } .next-step { margin-top: 1rem; color: var(--graphite); } .next-step b { color: var(--ink); font-weight: 500; } .card > .notice { margin-top: .25rem; } @media (max-width: 64rem) { .grid-main { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 47.9375rem) { .app { grid-template-columns: minmax(0, 1fr); } .topbar { padding-inline: .5rem 1rem; } .topbar .tbrand { display: inline-flex; } .topbar .crumbs { display: none; } .sign-out button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .sign-out button { width: 44px; justify-content: center; padding: 0; } main.content { padding: 0 1rem 2.5rem; } .pagehead { flex-direction: column; align-items: stretch; padding-top: .5rem; } .pagehead h1 { font-size: 1.875rem; } .pagehead .acts .btn { width: 100%; } .stages { grid-template-columns: 1fr; } .card { padding: 1.5rem; } /* without navigation.js the sidebar stays in the page flow, so every link is reachable */ .app:not(.is-enhanced) .side-nav { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--chalk); } .app.is-enhanced .workspace-menu-toggle { display: inline-grid; } .app.is-enhanced .side-nav { position: fixed; z-index: 70; inset: 0 auto 0 0; width: min(20rem, 86vw); height: 100%; border-right: 1px solid var(--chalk); box-shadow: var(--shadow-2); padding-top: .5rem; visibility: hidden; transform: translate3d(-100%, 0, 0); transition: transform var(--t-slow) var(--e-move), visibility 0s var(--t-slow); } .app.is-enhanced[data-open="true"] .side-nav { visibility: visible; transform: none; transition: transform var(--t-slow) var(--e-move); } .app.is-enhanced .workspace-menu-close { display: inline-flex; align-self: flex-end; align-items: center; gap: .375rem; min-height: 44px; padding: 0 .75rem; border-radius: var(--r-ctl); color: var(--graphite); font-weight: 500; font-size: .875rem; } .app.is-enhanced .scrim { display: block; position: fixed; inset: 0; z-index: 65; background: rgba(18,18,18,.32); opacity: 0; visibility: hidden; transition: opacity var(--t-slow) var(--e-enter), visibility 0s var(--t-slow); } .app.is-enhanced[data-open="true"] .scrim { opacity: 1; visibility: visible; transition: opacity var(--t-slow) var(--e-enter); } /* motion.js drives the same drawer with a spring through --p (0 closed … 1 open); items are offset by index, so they enter in order and leave in reverse on the same path. CSS above is the fallback. */ .app.is-dragging .side-nav { cursor: grabbing; user-select: none; } .app.is-sprung .side-nav a { -webkit-user-drag: none; } .app.is-sprung .side-nav { touch-action: pan-y; transition: none; visibility: visible; transform: translate3d(calc((var(--p, 0) - 1) * 100%), 0, 0); } .app.is-sprung:not(.is-moving):not([data-open="true"]) .side-nav { visibility: hidden; } .app.is-sprung .scrim { transition: none; visibility: visible; opacity: var(--p, 0); } .app.is-sprung:not(.is-moving):not([data-open="true"]) .scrim { visibility: hidden; } .app.is-sprung .side-nav :is(.brand, .create, .nav-group-label, .app-nav a, .participant-nav a, .acct) { --ip: clamp(0, calc(var(--p, 0) * 1.5 - var(--i, 0) * .04), 1); opacity: var(--ip); translate: calc((1 - var(--ip)) * -12px) 0; } @media (prefers-reduced-motion: reduce) { .app.is-enhanced .side-nav { transform: none; opacity: 0; transition: opacity var(--t-rm) var(--e-enter), visibility 0s var(--t-rm); } .app.is-enhanced[data-open="true"] .side-nav { opacity: 1; visibility: visible; transition: opacity var(--t-rm) var(--e-enter); } .app.is-sprung .side-nav { transform: none; opacity: var(--p, 0); transition: opacity var(--t-rm) var(--e-enter); } .app.is-sprung .scrim { transition: opacity var(--t-rm) var(--e-enter); } .app.is-sprung .side-nav :is(.brand, .create, .nav-group-label, .app-nav a, .participant-nav a, .acct) { opacity: 1; translate: none; } } .app-nav a, .participant-nav a { min-height: 44px; } } &.workspace-nav-open body, body.workspace-nav-open { overflow: hidden; } /* ══ OWNED SCREENS (setup, subscription, account): shared state parts ══ */ .owner-loading { display: grid; gap: 1rem; max-width: 46rem; } .loading-note { font-size: .9375rem; color: var(--graphite); } .skel-card { display: grid; gap: .875rem; } .skeleton.w30 { width: 30%; } .skeleton.w50 { width: 50%; } .skeleton.w70 { width: 70%; } .skeleton.w100 { width: 100%; } .skeleton.tall { min-height: 2.75rem; } .state-card { max-width: 34rem; display: grid; justify-items: start; gap: .75rem; } .state-card .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--stone); display: grid; place-items: center; } .state-card h2 { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; letter-spacing: -.01em; } .state-card .retry-message { color: var(--graphite); } .state-card form { margin-top: .5rem; } .field .req { margin-left: .375rem; font-size: .75rem; font-weight: 400; color: var(--graphite); } .field .error:not([hidden]) { display: flex; } .choice.long { align-items: flex-start; line-height: 1.45; } .choice.long input { margin-top: .0625rem; } /* ══ SETUP: stepped onboarding — progress rail + one card per step + sticky action bar (one form) ══ */ .setup-flow { display: grid; grid-template-columns: 13.5rem minmax(0, 46rem); gap: 3rem; align-items: start; } .setup-rail { position: sticky; top: 5rem; padding-top: .5rem; } .setup-rail .rail li { padding-bottom: 0; grid-template-columns: 28px minmax(0, 1fr); } .setup-rail .rail li:not(:last-child) { padding-bottom: .75rem; } .setup-rail .rail li:not(:last-child)::after { top: 32px; bottom: 4px; } .setup-rail .rail li::before { margin-top: .5rem; transition: background-color var(--t-fast) var(--e-enter), border-color var(--t-fast) var(--e-enter), color var(--t-fast) var(--e-enter); } .setup-rail .rail a { display: grid; gap: .125rem; min-height: 44px; padding: .5rem .625rem; margin-left: -.25rem; border-radius: var(--r-ctl); text-decoration: none; color: inherit; transition: background-color var(--t-fast) var(--e-enter), color var(--t-fast) var(--e-enter); } .setup-rail .rail b { font-weight: 500; font-size: .9375rem; color: var(--graphite); } .setup-rail .rail-sub { font-size: .8125rem; color: var(--ashen); font-weight: 400; } .setup-rail .rail li[aria-current="step"] a { background: var(--paper); box-shadow: inset 0 0 0 1px var(--chalk); } .setup-rail .rail li[aria-current="step"] b { color: var(--ink); } .setup-rail .rail li.done::before { color: var(--ink); } .setup-rail .rail li.has-error::before { content: "!"; background: var(--paper); border-color: var(--ink); color: var(--ink); } @media (hover: hover) and (pointer: fine) { .setup-rail .rail a:hover { background: var(--stone); } .setup-rail .rail a:hover b { color: var(--ink); } } main.content > .live + :is(.setup-flow, .owner-col) { margin-top: 1rem; } .setup-main { display: grid; gap: 1rem; min-width: 0; } .setup-form { display: grid; gap: 1rem; min-width: 0; } .step-card { display: grid; gap: 1.5rem; } .step-card:first-child { border-top: 3px solid var(--accent); } .step-no { font-size: .75rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ashen); } .step-head h2 { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; letter-spacing: -.01em; margin-top: .375rem; } .step-head .sect-desc { margin-top: .375rem; font-size: .9375rem; color: var(--ashen); max-width: 34rem; } .step-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; align-items: start; } .step-fields > .wide { grid-column: 1 / -1; } .step-card fieldset.group { padding-top: 1.5rem; } .step-card fieldset.group:first-of-type { padding-top: 0; } .step-card fieldset.group > .field + .field { margin-top: .25rem; } .gst-field legend { margin-bottom: .5rem; } .gst-field .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } .group-desc { font-size: .875rem; color: var(--ashen); margin-top: -.5rem; } .decl { display: grid; gap: .375rem; } .decl .hint { font-size: .8125rem; color: var(--ashen); padding-left: .875rem; } .decl .error { font-size: .8125rem; color: var(--ink); font-weight: 500; display: flex; gap: .375rem; } .file-pick { position: relative; display: flex; align-items: center; gap: .875rem; min-height: 64px; padding: .75rem 1rem; border: 1px dashed var(--mist); border-radius: var(--r-ctl); background: var(--canvas); transition: border-color var(--t-fast) var(--e-enter), background-color var(--t-fast) var(--e-enter); } .file-pick input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; cursor: pointer; border: 0; padding: 0; } .file-pick:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; border-color: var(--ink); } .file-pick .file-ico { width: 40px; height: 40px; border-radius: 10px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--chalk); display: grid; place-items: center; flex: none; } .file-pick .file-text { display: grid; gap: .125rem; min-width: 0; } .file-pick .file-text b { font-weight: 500; color: var(--ink); } .file-pick .file-text span { font-size: .8125rem; color: var(--ashen); overflow-wrap: anywhere; } @media (hover: hover) and (pointer: fine) { .file-pick:hover { border-color: var(--graphite); background: var(--paper); } } .setup-summary ul { list-style: disc; } .setup-summary a { min-height: 24px; display: inline-block; } .setup-summary:focus:not(:focus-visible) { outline: 0; } .setup-bar { align-items: center; margin-top: .5rem; } .setup-bar .bar-note { margin-right: auto; font-size: .875rem; color: var(--ashen); } /* ══ SUBSCRIPTION: one plan card in the pricing-tier style ══ */ .owner-col { max-width: 36rem; display: grid; gap: 1rem; } .tier { display: grid; gap: 1.25rem; box-shadow: var(--shadow); } .tier.is-current { border-top: 3px solid var(--accent); } .tier-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; } .tier-head h2 { font-size: 1.125rem; font-weight: 500; margin-top: .25rem; } .tier-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .625rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--chalk); } .tier-price b { font-size: 3rem; line-height: 1; } .tier-price span { font-size: .9375rem; } .subscription-status { font-size: 1rem; color: var(--ink); } .subscription-status[data-status="past_due"] { padding-left: .75rem; box-shadow: inset 3px 0 0 var(--ink); } .tier-points { list-style: none; display: grid; gap: .625rem; color: var(--graphite); } .tier-points li { display: flex; gap: .625rem; align-items: flex-start; } .tier-points .icon { width: 1rem; height: 1rem; margin-top: .1875rem; color: var(--ink); } .tier .plan-act { display: grid; gap: .625rem; padding-top: .25rem; margin-top: 0; } .tier-note { font-size: .8125rem; color: var(--ashen); text-align: center; } @media (max-width: 40rem) { .tier-price b { font-size: 2.5rem; } .tier-head { flex-wrap: wrap; } } /* ══ ACCOUNT: export card first, then the danger card for closing ══ */ .owner-col.wide { max-width: 46rem; } .acct-card, .danger-card { display: grid; gap: 1.25rem; } .acct-head { display: flex; gap: 1rem; align-items: flex-start; } .acct-head .ico, .closed-notice .ico { width: 44px; height: 44px; border-radius: 12px; background: var(--stone); display: grid; place-items: center; flex: none; } .acct-head h2 { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; letter-spacing: -.01em; } .acct-head .sect-desc { margin-top: .375rem; font-size: .9375rem; color: var(--ashen); } .acct-act { display: flex; flex-wrap: wrap; gap: .5rem; } .acct-empty { font-size: .875rem; color: var(--ashen); margin-top: -.5rem; } .export-ready { border-top: 3px solid var(--accent); } .danger-card { box-shadow: inset 3px 0 0 var(--ink); } .danger-card .acct-head .ico { background: var(--stone); color: var(--ink); } .deletion-messaging { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .dm-item { background: var(--canvas); border: 1px solid var(--chalk); border-radius: var(--r-card); padding: 1.25rem; } .dm-item h3 { font-size: .9375rem; font-weight: 500; } .dm-item p { margin-top: .5rem; font-size: .875rem; color: var(--graphite); } .account-delete-form { display: grid; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--chalk); } .confirm-field label.choice { padding: .625rem .875rem; font-size: .9375rem; font-weight: 500; color: var(--ink); align-items: center; } .confirm-field .error { display: flex; gap: .375rem; align-items: flex-start; } .btn-danger { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } @media (hover: hover) and (pointer: fine) { .btn-danger:hover { background: var(--stone); color: var(--ink); } } .closed-notice { display: grid; gap: .75rem; justify-items: start; } .closed-notice h2 { font-family: var(--serif); font-size: 1.5rem; line-height: 1.2; } .closed-notice p { color: var(--graphite); } @media (max-width: 40rem) { .deletion-messaging { grid-template-columns: minmax(0, 1fr); } .acct-head { flex-direction: column; gap: .75rem; } .acct-act .btn { flex: 1 1 100%; white-space: normal; text-align: center; line-height: 1.3; } } /* ══ CONSENT: the decision in the auth composition — equal-weight stacked choices ══ */ .auth .card .consent-h1 { margin-top: 1rem; } .auth .card .consent-request { color: var(--graphite); font-size: 1rem; } .auth .card .consent-request strong, .consent-who strong { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; } .consent-who { display: flex; gap: .5rem; align-items: flex-start; margin-top: 1rem; font-size: .875rem; color: var(--graphite); } .consent-who .icon { width: 1rem; height: 1rem; margin-top: .125rem; } .consent-scope { margin-top: 1.25rem; padding: 1.25rem; background: var(--stone); border-radius: var(--r-card); } .consent-scope h2 { font-size: .9375rem; font-weight: 500; } .consent-scope ul { list-style: none; display: grid; gap: .625rem; margin-top: .75rem; font-size: .875rem; color: var(--graphite); } .consent-scope li { display: flex; gap: .625rem; align-items: flex-start; } .consent-scope .icon { width: 1rem; height: 1rem; margin-top: .125rem; color: var(--ink); } .consent-warn { margin-top: 1.25rem; font-size: .875rem; color: var(--graphite); } .auth .card form.consent-form { gap: .625rem; margin-top: 1.25rem; } @media (max-width: 64rem) { .setup-flow { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; } .gst-field .choices { grid-template-columns: minmax(0, 1fr); } .setup-rail { position: static; padding-top: 0; } .setup-rail .rail { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .setup-rail .rail li, .setup-rail .rail li:not(:last-child) { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-bottom: 0; } .setup-rail .rail li::before { margin-top: 0; } .setup-rail .rail li:not(:last-child)::after { left: calc(50% + 18px); right: calc(-50% + 18px); top: 13.5px; bottom: auto; width: auto; height: 1px; } .setup-rail .rail a { justify-items: center; margin: .25rem 0 0; padding: .375rem .25rem; width: 100%; } .setup-rail .rail li[aria-current="step"] a { background: none; box-shadow: none; } .setup-rail .rail-sub { display: none; } .setup-rail .rail b { font-size: .8125rem; } } @media (max-width: 40rem) { .step-fields, .gst-field .choices { grid-template-columns: minmax(0, 1fr); } .step-head h2 { font-size: 1.375rem; } .setup-bar .bar-note { display: none; } .setup-bar .btn { flex: 1; } } /* ══ REFERENCE LOOKUP (card REFERENCE-LOOKUP): search card, item and provision cards — comp tokens only ══ */ .ref-search { display: grid; gap: 1rem; } .ref-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; } .ref-search .form-actions { margin-top: 0; } .ref-examples { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; } .ref-examples .btn { white-space: normal; text-align: left; line-height: 1.3; } .ref-note { font-size: .875rem; color: var(--graphite); margin-bottom: 1rem; } .ref-code { font-size: 1.375rem; font-weight: 600; letter-spacing: .01em; color: var(--ink); overflow-wrap: anywhere; margin-top: .125rem; } .ref-item h3, .ref-provision h3 { font-family: var(--serif); font-size: 1.375rem; line-height: 1.25; letter-spacing: -.01em; margin-top: .5rem; overflow-wrap: anywhere; } .ref-provision .eyebrow { overflow-wrap: anywhere; } .ref-item .tbl { margin-top: 1rem; } .ref-rules { margin-top: 1rem; border-top: 1px solid var(--chalk); padding-top: .75rem; } .ref-rules > summary { cursor: pointer; font-weight: 500; padding: .75rem 0; } /* keeps the native disclosure marker */ .ref-rules > ul { list-style: none; display: grid; gap: .875rem; margin-top: .5rem; } .ref-rules b { font-weight: 500; } .ref-rule-src { font-size: .8125rem; color: var(--ashen); margin-top: .25rem; } .ref-verbatim { margin-top: 1rem; padding: 1rem 1.25rem; background: var(--canvas); border-left: 2px solid var(--ink); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; } .ref-provision .kv { margin-top: 1rem; } .ref-provision > p:last-child, .ref-links a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; } .ref-provision > p:last-child .icon, .ref-links .icon { width: 1rem; height: 1rem; flex: none; } .ref-aside-h { font-size: .9375rem; font-weight: 500; margin-top: 1.25rem; } .ref-links { list-style: none; display: grid; gap: .25rem; margin-top: .5rem; font-size: .875rem; } .ref-links a { overflow-wrap: anywhere; } .ref-sources { list-style: none; display: grid; gap: 0; margin-top: .75rem; font-size: .875rem; } .ref-sources li { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .625rem 0; border-top: 1px solid var(--chalk); } .ref-sources li:first-child { border-top: 0; } .ref-sources .badge { flex: none; } .aside .card > .ref-sources + .sub { margin-top: 1rem; } /* REFERENCE-LOOKUP-2: a source problem is ink words with the warning icon, never the accent (verifier obs. 2). */ .badge.ref-problem { color: var(--ink); background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); } .badge.ref-problem .icon { width: .875rem; height: .875rem; flex: none; } .ref-group { font-size: .875rem; color: var(--ashen); margin-top: .25rem; overflow-wrap: anywhere; } .ref-notcalc { display: flex; align-items: flex-start; gap: .5rem; margin-top: 1rem; padding: .75rem 1rem; background: var(--stone); border-radius: var(--r-ctl); font-size: .875rem; color: var(--ink); } .ref-notcalc .icon { width: 1rem; height: 1rem; flex: none; margin-top: .125rem; } .ref-cat .kv { margin-top: 1rem; } .ref-none { color: var(--ashen); font-size: .875rem; } .ref-srcgroup { margin-top: 1rem; border-top: 1px solid var(--chalk); } .ref-srcgroup > summary { cursor: pointer; font-weight: 500; font-size: .9375rem; padding: .75rem 0; min-height: 44px; } .ref-srcgroup .ref-sources { margin-top: 0; } .ref-ndia li { display: grid; gap: .125rem; } .ref-url { font-size: .8125rem; color: var(--ashen); overflow-wrap: anywhere; padding-left: 1.5rem; } .state-card .ref-ndia { margin-top: 1rem; text-align: left; } /* ══ PLAN + PRICING (TIERING card 1, NDIS-BUILD-ESC-58): plan cards in the subscription-tier style, usage meters on the workflow stage cards, the billing switch. Orange stays wayfinding only: the current plan's top edge (.tier.is-current) and its status dot; meters fill in ink; limits reached are marked in ink. ══ */ .tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; } .tier-grid .tier { align-content: start; } .tier-grid .tier .plan-act { margin-top: auto; } .tier .eyebrow { line-height: 1.4; } .tier-head h3 { font-size: 1.125rem; font-weight: 500; margin-top: .25rem; } .tier-save { font-size: .8125rem; color: var(--ashen); margin-top: -.75rem; } .tier-points li.off { color: var(--ashen); } .tier-points li.off .icon { color: var(--ashen-mark); } .tier.coming { box-shadow: none; background: var(--canvas); } .coming-grid { margin-top: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .bill-switch { display: inline-flex; gap: .25rem; padding: .25rem; background: var(--stone); border-radius: 999px; flex: none; } .bill-switch a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 1rem; border-radius: 999px; text-decoration: none; color: var(--graphite); font-weight: 500; font-size: .875rem; white-space: nowrap; transition: background-color var(--t-fast) var(--e-enter), color var(--t-fast) var(--e-enter), transform var(--t-press) var(--e-enter); } .bill-switch a[aria-current="true"] { background: var(--paper); color: var(--ink); box-shadow: var(--shadow); } .bill-switch a:active { transform: scale(.97); } @media (hover: hover) and (pointer: fine) { .bill-switch a:not([aria-current="true"]):hover { color: var(--ink); background: var(--chalk); } } .bands { list-style: none; display: grid; border-top: 1px solid var(--chalk); } .band-row { display: grid; gap: .625rem; padding: .875rem 0; border-bottom: 1px solid var(--chalk); } .band-row.is-current { box-shadow: inset 3px 0 0 var(--accent); padding-left: .75rem; } .band-what { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; } .band-what b { font-weight: 500; } .band-what .num { color: var(--graphite); font-size: .9375rem; } .band-act .tier-note { text-align: left; margin-top: .375rem; } .band-act .field { margin-bottom: .5rem; } .team-tier .tier-price span:first-child { order: -1; } .meters { grid-template-columns: repeat(4, minmax(0, 1fr)); } .meters .stage { border-top-color: var(--pebble); } .meters .stage.at-limit { border-top-color: var(--ink); } .meters .stage .big span:empty { display: none; } .meters .stage .big b.word { font-size: 1.25rem; } .plan-page > .sect { margin-top: 0; } .tier-grid .tier { min-width: 0; overflow-wrap: anywhere; } .tier-head { min-width: 0; } .tier-head .badge { flex: none; white-space: nowrap; } .meter { height: 6px; border-radius: 999px; background: var(--stone); margin-top: .75rem; overflow: hidden; } .meter i { display: block; height: 100%; border-radius: inherit; background: var(--ink); width: 0; } .meter .m-1 { width: 10%; } .meter .m-2 { width: 20%; } .meter .m-3 { width: 30%; } .meter .m-4 { width: 40%; } .meter .m-5 { width: 50%; } .meter .m-6 { width: 60%; } .meter .m-7 { width: 70%; } .meter .m-8 { width: 80%; } .meter .m-9 { width: 90%; } .meter .m-10 { width: 100%; } .meter-text { font-size: .8125rem; color: var(--graphite); margin-top: .375rem; } .inline-form { margin-top: .75rem; } .notice .inline-form { margin-top: .625rem; } .price-head { display: grid; gap: 1rem; justify-items: start; padding-block: 4rem 2.5rem; max-width: 48rem; } .price-head h1 { font-family: var(--serif); font-size: clamp(2.25rem, 4.4vw, 3.5rem); line-height: 1.08; letter-spacing: -.02em; } .price-head h1 em { font-style: normal; color: var(--accent-text); } .price-head .lede { font-size: 1.125rem; line-height: 1.55; color: var(--graphite); max-width: 36rem; } .price-terms { display: grid; gap: .875rem; } .price-terms p { color: var(--graphite); font-size: .9375rem; line-height: 1.5; } .price-terms b { color: var(--ink); font-weight: 500; } .refusal.upgrade .meter { margin-top: 1.25rem; } .refusal.upgrade .fine { margin-top: 1rem; font-size: .8125rem; color: var(--ashen); } @media (max-width: 64rem) { .meters { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 60rem) { .tier-grid, .coming-grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 40rem) { .meters { grid-template-columns: minmax(0, 1fr); } .sect-head:has(.bill-switch) { flex-direction: column; } .price-head { padding-block: 2.5rem 1.5rem; } } @media (prefers-reduced-motion: reduce) { .bill-switch a:active { transform: none; } } /* OPPORTUNITY-MATCHING (JEV NDIS-BUILD-ESC-56): discovery profile, opportunities inbox and detail. Comp components only. */ .opp-profile-form { display: grid; gap: 1.5rem; } .group-desc { font-size: .875rem; color: var(--graphite); } .opp-days { display: grid; gap: .25rem; } .opp-day { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; align-items: end; padding: .5rem 0; border-top: 1px solid var(--chalk); } .opp-day:first-child { border-top: 0; } .opp-day-name { font-weight: 500; padding-bottom: .75rem; } @media (max-width: 30rem) { .opp-day { grid-template-columns: 1fr 1fr; } .opp-day-name { grid-column: 1 / -1; padding-bottom: 0; } } .opp-exception + .opp-exception { padding-top: .75rem; border-top: 1px solid var(--chalk); } /* Kimi K-001: windows and exceptions are an editable list (add/remove rows), not a fixed grid of slots. */ .opp-window-list { display: grid; gap: .75rem; } .opp-window-row { padding: .75rem 0; border-top: 1px solid var(--chalk); } .opp-window-row:first-child { padding-top: 0; border-top: 0; } .opp-exception-list { display: grid; gap: .75rem; } .opp-row-remove { align-self: end; } @media (max-width: 30rem) { .opp-row-remove { justify-self: start; } } /* Kimi K-005: page-50 next/prev over the band-filtered inbox. */ .opp-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--chalk); } .opp-pagination-text { font-size: .875rem; color: var(--graphite); } .opp-pagination-links { display: flex; gap: .5rem; } .rotate-180 { transform: rotate(180deg); } .opp-creds { list-style: none; display: grid; gap: .5rem; } .opp-creds li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } .opp-add-form { display: grid; gap: 1.5rem; } .opp-daypick { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr)); } .opp-notice-list { list-style: none; display: grid; gap: .75rem; margin-top: .75rem; font-size: .875rem; color: var(--graphite); } .opp-notice-list li { padding-left: 1rem; position: relative; } .opp-notice-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .375rem; height: .375rem; border-radius: 50%; background: var(--ink); } .opp-tabs { display: flex; flex-wrap: wrap; gap: .5rem; } .opp-tab { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1rem; border: 1px solid var(--chalk); border-radius: 999px; background: var(--paper); color: var(--graphite); text-decoration: none; font-weight: 500; font-size: .875rem; transition: background-color var(--t-fast) var(--e-enter), color var(--t-fast) var(--e-enter); } .opp-tab[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--canvas); } .opp-tab .count { font-weight: 400; } @media (hover: hover) and (pointer: fine) { .opp-tab:not([aria-current]):hover { background: var(--stone); color: var(--ink); } } .opp-stage.is-current { box-shadow: inset 0 0 0 1px var(--ink); } @media (max-width: 40rem) { .stages { grid-template-columns: 1fr; } } .opp-row-badges { display: flex; flex-wrap: wrap; gap: .375rem; justify-content: flex-end; } .opp-list small { overflow-wrap: anywhere; } .opp-match .sect-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; } .opp-reasons { list-style: none; display: grid; margin-top: 1rem; border-top: 1px solid var(--chalk); } .opp-reason { display: grid; grid-template-columns: minmax(7rem, 9rem) minmax(7rem, 9rem) 1fr; gap: .75rem; align-items: baseline; padding: .75rem 0; border-bottom: 1px solid var(--chalk); font-size: .9375rem; } .opp-criterion { color: var(--graphite); font-weight: 500; } .opp-outcome { display: inline-flex; align-items: center; gap: .375rem; color: var(--ink); font-size: .8125rem; font-weight: 500; } .opp-outcome .icon { width: .875rem; height: .875rem; flex: none; } .opp-reason p { overflow-wrap: anywhere; } @media (max-width: 40rem) { .opp-reason { grid-template-columns: 1fr 1fr; } .opp-reason p { grid-column: 1 / -1; } } .opp-match > .sub:last-child { margin-top: 1rem; } .opp-verbatim { margin-top: 1rem; padding: 1rem 1.25rem; background: var(--canvas); border-left: 2px solid var(--ink); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.6; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; } .opp-verbatim + .kv { margin-top: 1rem; } .opp-replies { display: grid; gap: 1.25rem; } .opp-reply { display: grid; gap: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--chalk); } .opp-reply:first-of-type { padding-top: .25rem; border-top: 0; } .opp-reply .sect-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; } .opp-reply h3 { font-size: 1rem; font-weight: 500; } .opp-reply .draft-body { margin-top: .25rem; } .opp-reply form { margin-top: .5rem; } .opp-reply p > a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; } .opp-reply p > a .icon { width: 1rem; height: 1rem; } .opp-reply-subject { font-size: .9375rem; overflow-wrap: anywhere; } .opp-reply-form { display: grid; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--chalk); } .opp-replies > h2 + .opp-reply-form { padding-top: 0; border-top: 0; } } @keyframes k-shimmer { to { background-position: -200% 0; } }