/* ============================================================================= Design System — Recall Observatory ============================================================================= The app's visual identity lives here as `ak-*` component classes built on the design tokens declared in the Tailwind `@theme` block (app/assets/tailwind/ application.css). docs/DESIGN.md is the sole visual contract. Warm paper, ink text, hairline rules, evidence states, and mono numerics. Tailwind utilities carry layout; identity comes from these tokens and classes. Reach for the `Ui::*` view helpers (app/helpers/ui/*.rb) before hand-rolling these classes — the helpers are the SSOT. This file is imported by app/assets/tailwind/application.css so it compiles into the Tailwind build and the `@theme` `var(--…)` tokens resolve. ============================================================================= */ /* --- App shell -------------------------------------------------------------- */ /* Set on by the responsive_navbar layout. Establishes the canvas, the body voice (IBM Plex Sans), ink text, and tabular numerics everywhere. */ .ak-app-shell { background: var(--color-canvas); color: var(--color-ink); font-family: var(--font-body); font-variant-numeric: tabular-nums; } /* --- Typography helpers ----------------------------------------------------- */ .ak-kicker, .ak-label { color: var(--color-faint); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .ak-page-title { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; } .ak-section-title { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.25rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; } .ak-muted { color: var(--color-muted); } .ak-faint { color: var(--color-faint); } .ak-tabular { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .ak-meta { color: var(--color-faint); font-family: var(--font-mono); font-size: 12px; } /* --- Page container --------------------------------------------------------- */ .ak-page { width: 100%; max-width: 1120px; margin-inline: auto; padding: 32px 20px 48px; } .ak-page--prose { max-width: 760px; } .ak-page--narrow { max-width: 560px; } /* --- Links ------------------------------------------------------------------ */ .ak-link { color: var(--color-primary); font-weight: 500; text-decoration: underline; text-underline-offset: 0.14em; transition: color 140ms ease; } .ak-link:hover { color: var(--color-primary-dark); text-decoration: underline; } /* Isolated navigation actions need a full touch target. Keep this opt-in so compact links inside evidence ledgers and tables retain their data density. */ .ak-standalone-link { display: inline-flex; align-items: center; min-block-size: 44px; max-inline-size: 100%; overflow-wrap: anywhere; } /* Visited state is limited to content destinations. Buttons and the current navigation item keep their component/state colors. */ .ak-link:visited:not(.ak-btn):not(.is-current), .ak-panel-link:visited, .footer-link:visited, a.ro-ledger-title:visited, .ro-breadcrumb a:visited, .ro-search-examples a:visited, .ro-search-message a:visited, .ro-search-option:visited, .ro-see-all-results:visited { color: var(--color-visited); } .ak-link:visited:hover:not(.ak-btn):not(.is-current), .ak-panel-link:visited:hover, .footer-link:visited:hover, a.ro-ledger-title:visited:hover, .ro-breadcrumb a:visited:hover, .ro-search-examples a:visited:hover, .ro-search-message a:visited:hover, .ro-search-option:visited:hover, .ro-see-all-results:visited:hover { color: var(--color-visited-dark); } /* Quiet footer link (used by the footer + generators that inject footer links). */ .footer-link { color: var(--color-muted); text-decoration: none; transition: color 140ms ease; } .footer-link:hover { color: var(--color-ink); } /* --- Buttons ---------------------------------------------------------------- */ .ak-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 16px; border: 1px solid transparent; border-radius: var(--radius-ak-md); background: transparent; color: var(--color-ink); font-family: var(--font-body); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease; } .ak-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .ak-btn:disabled, .ak-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } .ak-btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: #f1f6ef; } .ak-btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); } .ak-btn--secondary { background: var(--color-surface); border-color: var(--color-rule); color: var(--color-ink); } .ak-btn--secondary:hover { background: var(--color-surface-muted); border-color: var(--color-muted); } .ak-btn--danger { background: var(--color-sell); border-color: var(--color-sell); color: #fff; } .ak-btn--danger:hover { filter: brightness(0.92); } .ak-btn--ghost { background: transparent; border-color: transparent; color: var(--color-muted); } .ak-btn--ghost:hover { background: var(--color-surface-muted); color: var(--color-ink); } .ak-btn--sm { min-height: 32px; padding: 6px 12px; font-size: 13px; } .ak-btn--lg { min-height: 46px; padding: 13px 22px; font-size: 15px; } .ak-btn--block { width: 100%; } /* --- Panels (sections framed by a hairline, not a shadow) ------------------- */ .ak-panel { overflow: hidden; border: 1px solid var(--color-soft-rule); border-radius: 0; background: var(--color-surface); } .ak-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--color-soft-rule); } .ak-panel-title { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: 15px; font-weight: 700; } .ak-panel-caption { margin: 3px 0 0; color: var(--color-muted); font-size: 12px; line-height: 1.3; } .ak-panel-link { flex-shrink: 0; color: var(--color-primary); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; } .ak-panel-link:hover { text-decoration: underline; } .ak-panel-body { padding: 16px; } /* --- Tables (primary objects: hairline rows, mono right-aligned numerics) ---- */ .ak-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; } .ak-table th, .ak-table td { padding: 11px 12px; border-bottom: 1px solid var(--color-soft-rule); text-align: left; vertical-align: middle; } .ak-table th { color: var(--color-faint); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; } .ak-table .text-right, .ak-table [data-align="right"] { text-align: right; } .ak-table .text-center, .ak-table [data-align="center"] { text-align: center; } .ak-table tbody tr:last-child td { border-bottom: 0; } .ak-table tbody tr:hover { background: var(--color-surface-muted); } /* Desktop tables and mobile definition-list rows share the same source order. */ .ro-desktop-ledger { overflow-x: auto; } .ro-mobile-ledger { display: none; list-style: none; } .ro-mobile-ledger > li { padding: 16px 12px; border-bottom: 1px solid var(--color-rule); } .ro-mobile-ledger > li:last-child { border-bottom: 0; } .ro-mobile-ledger dl { display: grid; grid-template-columns: minmax(5.5rem, .35fr) minmax(0, 1fr); gap: 9px 14px; } .ro-mobile-ledger dt { color: var(--color-faint); font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .ro-mobile-ledger dd { min-width: 0; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; } .ro-mobile-ledger dd code { white-space: normal; overflow-wrap: anywhere; } /* Monospace numerics inside tables and stat blocks. */ .ak-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* --- Badges (compact, rectangular, color + text — never color alone) -------- */ .ak-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-ak-sm); background: var(--color-neutral-bg); color: var(--color-neutral-text); font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; } .ak-badge--success { background: var(--color-buy-bg); color: var(--color-buy-text); } .ak-badge--danger { background: var(--color-sell-bg); color: var(--color-sell-text); } .ak-badge--warning { background: var(--color-trim-bg); color: var(--color-trim-text); } .ak-badge--info { background: #e3edf5; color: var(--color-info); } .ak-badge--neutral { background: var(--color-neutral-bg); color: var(--color-neutral-text); } /* --- Stats ------------------------------------------------------------------ */ .ak-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--color-soft-rule); border: 1px solid var(--color-soft-rule); border-radius: var(--radius-ak-md); overflow: hidden; } .ak-stat { padding: 14px 16px; background: var(--color-surface); } .ak-stat-label { color: var(--color-faint); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .ak-stat-value { margin-top: 4px; color: var(--color-ink); font-family: var(--font-mono); font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; } /* --- Forms ------------------------------------------------------------------ */ .ak-field, .ak-select { display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--color-rule); border-radius: var(--radius-ak-md); background: var(--color-surface); color: var(--color-ink); font-family: var(--font-body); font-size: 15px; line-height: 1.4; transition: border-color 140ms ease, box-shadow 140ms ease; } .ak-field::placeholder { color: var(--color-faint); } .ak-field:focus, .ak-select:focus { outline: 0; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent); } .ak-field--invalid { border-color: var(--color-sell); } .ak-field--invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-sell) 16%, transparent); } .ak-field-label { display: block; margin-bottom: 6px; color: var(--color-ink); font-size: 13px; font-weight: 600; } .ak-field-hint { margin-top: 6px; color: var(--color-muted); font-size: 12px; } .ak-field-error { margin-top: 6px; color: var(--color-sell); font-size: 12px; font-weight: 500; } .ak-required { color: var(--color-sell); } .ak-checkbox { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--color-rule); accent-color: var(--color-primary); } .ak-form-errors { margin-bottom: 20px; padding: 12px 14px; border: 1px solid var(--color-sell-bg); border-radius: var(--radius-ak-md); background: var(--color-sell-bg); color: var(--color-sell-text); font-size: 13px; } .ak-form-errors ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; } /* --- Alerts / flash --------------------------------------------------------- */ .ak-alert { display: flex; gap: 10px; padding: 12px 14px; margin-bottom: 20px; border: 1px solid var(--color-soft-rule); border-radius: var(--radius-ak-md); background: var(--color-surface-muted); color: var(--color-ink); font-size: 14px; font-weight: 500; } .ak-alert--success { border-color: var(--color-buy-bg); background: var(--color-buy-bg); color: var(--color-buy-text); } .ak-alert--error { border-color: var(--color-sell-bg); background: var(--color-sell-bg); color: var(--color-sell-text); } .ak-alert--warning { border-color: var(--color-trim-bg); background: var(--color-trim-bg); color: var(--color-trim-text); } .ak-alert--info { border-color: #dbe7f1; background: #eef4f9; color: var(--color-info); } /* --- Empty states ----------------------------------------------------------- */ .ak-empty { padding: 48px 24px; border: 1px dashed var(--color-rule); border-radius: var(--radius-ak-md); text-align: center; } .ak-empty-title { margin: 0; color: var(--color-ink); font-size: 15px; font-weight: 600; } .ak-empty-text { margin: 6px 0 0; color: var(--color-muted); font-size: 13px; } /* --- List rows (the Ollama "list of real things") --------------------------- */ .ak-list { margin: 0; padding: 0; list-style: none; } .ak-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--color-rule); } .ak-row { display: flex; align-items: center; gap: 14px; padding: 13px 4px; border-bottom: 1px solid var(--color-soft-rule); } .ak-rank { min-width: 24px; color: var(--color-faint); font-family: var(--font-mono); font-size: 12px; text-align: right; } /* --- Hero (landing / marketing) -------------------------------------------- */ .ak-hero { width: min(820px, 100%); margin-inline: auto; padding: clamp(56px, 12vh, 130px) 20px clamp(36px, 7vh, 72px); text-align: center; } .ak-hero-title { margin: 0; color: var(--color-ink); font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; } .ak-hero-lede { max-width: 620px; margin: 22px auto 0; color: var(--color-muted); font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.5; text-wrap: pretty; } .ak-hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; } /* --- Dividers --------------------------------------------------------------- */ .ak-divider { height: 1px; margin: 24px 0; background: var(--color-soft-rule); border: 0; } .ak-divider-text { display: flex; align-items: center; gap: 14px; margin: 28px 0; color: var(--color-faint); font-size: 12px; } .ak-divider-text::before, .ak-divider-text::after { content: ""; flex: 1; height: 1px; background: var(--color-soft-rule); } /* --- Recall Observatory shell and search ---------------------------------- */ .ro-skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 8px 12px; background: var(--color-surface); color: var(--color-primary-dark); transform: translateY(-160%); } .ro-skip-link:focus { transform: translateY(0); } .ro-masthead { border-bottom: 1px solid var(--color-ink); background: var(--color-paper); } .ro-masthead-inner { width: min(90rem, 100%); margin-inline: auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .ro-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-ink); text-decoration: none; } .ro-brand img { width: 40px; height: 40px; } .ro-brand strong { display: block; font-family: var(--font-display); font-size: 18px; line-height: 1; } .ro-brand small { display: block; margin-top: 3px; color: var(--color-muted); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .06em; } .ro-nav { display: flex; align-items: center; gap: 16px; } .ro-nav-desktop-records { display: contents; } .ro-nav-mobile-records { display: none; } .ro-nav > .ak-link, .ro-nav-desktop-records > .ak-link, .ro-search-trigger { min-height: 44px; display: inline-flex; align-items: center; } .ro-nav > .ak-link.is-current, .ro-nav-desktop-records > .ak-link.is-current { color: var(--color-ink); font-weight: 600; text-decoration-thickness: 2px; } .ro-footer { width: min(90rem, 100%); margin: 32px auto 0; padding: 20px; border-top: 1px solid var(--color-rule); color: var(--color-muted); font-size: 13px; } .ro-home-intro { max-width: 58rem; padding-block: 48px 40px; } .ro-home-intro h1 { margin-top: 8px; font-family: var(--font-display); font-size: clamp(2.25rem, 4vw, 3.25rem); font-weight: 600; line-height: 1.02; } .ro-home-intro > p:last-child { max-width: 46rem; margin-top: 20px; color: var(--color-muted); font-size: 1.125rem; line-height: 1.55; } .ro-root-search { padding: 24px; border-top: 1px solid var(--color-info); border-bottom: 1px solid var(--color-rule); background: var(--color-surface); } .ro-root-search h2, .ro-section-heading h2, .ro-search-dialog-header h2 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; line-height: 1.15; } .ro-root-search > div > p:last-child { margin-top: 6px; color: var(--color-muted); } .ro-root-search form { margin-top: 20px; } .ro-root-search-controls { display: grid; grid-template-columns: minmax(0, 1fr) 12rem auto; gap: 8px; align-items: end; } .ro-search-examples { margin-top: 12px; color: var(--color-muted); font-size: 13px; } .ro-search-examples a { margin-left: 8px; color: var(--color-primary-dark); text-decoration: underline; } .ro-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--color-ink); } .ro-surface-ledger { list-style: none; } .ro-surface-ledger li { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 12px; border-bottom: 1px solid var(--color-rule); } .ro-surface-ledger li > span, .ro-surface-ledger li > strong { color: var(--color-muted); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; } .ro-surface-ledger h3 { font-size: 1.05rem; font-weight: 600; } .ro-surface-ledger p { margin-top: 3px; color: var(--color-muted); font-size: 14px; } .ro-corpus-notice { margin-top: 40px; padding: 16px; border-left: 4px solid var(--color-derived-border); background: var(--color-trim-bg); color: var(--color-trim-text); } .ro-corpus-notice p { margin-top: 4px; max-width: 52rem; font-size: 14px; line-height: 1.5; } .ro-timeline-section, .ro-evidence-ledger, .ro-event-products { margin-top: 48px; } .ro-timeline-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto; gap: 12px; align-items: end; margin-top: 20px; padding: 16px; border: 1px solid var(--color-rule); background: var(--color-surface); } .ro-timeline-filters label { display: block; margin-bottom: 6px; } .ro-unit-note { max-width: 65rem; margin-top: 14px; color: var(--color-muted); font-size: 14px; line-height: 1.55; } .ro-chart-scroll { margin-top: 24px; overflow-x: auto; border: 1px solid var(--color-rule); background: var(--color-surface); } .ro-chart-scroll:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .ro-timeline-chart { display: block; max-width: none; } .ro-chart-axis { stroke: var(--color-rule); stroke-width: 1; } .ro-chart-bar { fill: var(--color-primary); } .ro-chart-bar:hover { fill: var(--color-primary-dark); } .ro-chart-year { fill: var(--color-faint); font-family: var(--font-mono); font-size: 9px; } .ro-chart-table { margin-top: 12px; border-bottom: 1px solid var(--color-rule); } .ro-chart-table summary, .ro-product-details summary { padding: 12px 0; color: var(--color-primary-dark); font-weight: 600; cursor: pointer; } .ro-chart-table[open] summary { border-bottom: 1px solid var(--color-rule); } .ro-chart-table .overflow-x-auto { max-height: 28rem; overflow: auto; } .ro-undated-notice, .ro-empty-evidence { margin-top: 16px; padding: 14px 16px; border-left: 3px solid var(--color-derived-border); background: var(--color-trim-bg); color: var(--color-trim-text); font-size: 14px; } .ro-coverage { display: grid; grid-template-columns: minmax(12rem, .7fr) minmax(0, 1.5fr) auto; gap: 24px; align-items: start; margin-top: 32px; padding: 18px 0; border-block: 1px solid var(--color-rule); } .ro-coverage ul { list-style: none; } .ro-coverage li { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 5px 12px; margin-bottom: 8px; font-size: 14px; } .ro-coverage li strong { text-transform: capitalize; } .ro-coverage li small { grid-column: 2; color: var(--color-sell-text); } .ro-coverage > .ak-link { grid-column: 3; grid-row: 1; font-size: 14px; } .ro-coverage-note { grid-column: 2; grid-row: 2; color: var(--color-muted); font-size: 14px; line-height: 1.45; } .ro-ledger-list { list-style-position: inside; } .ro-ledger-list > li { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(20rem, 1fr); gap: 24px; padding: 18px 12px; border-bottom: 1px solid var(--color-rule); } .ro-ledger-title { display: block; margin-top: 4px; color: var(--color-ink); font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; text-decoration: none; } a.ro-ledger-title:hover { color: var(--color-primary-dark); text-decoration: underline; } .ro-ledger-list p { margin-top: 5px; color: var(--color-muted); font-size: 14px; } .ro-ledger-list dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .ro-ledger-list dt, .ro-product-facts dt, .ro-event-summary dt, .ro-provenance dt { color: var(--color-faint); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } .ro-ledger-list dd, .ro-product-facts dd, .ro-event-summary dd, .ro-provenance dd { margin-top: 4px; font-size: 14px; overflow-wrap: anywhere; } .ro-pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; } .ro-pagination__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ro-pagination__gap { color: var(--color-faint); font-family: var(--font-mono); padding-inline: 4px; } .ak-btn.is-current { background: var(--color-primary); border-color: var(--color-primary); color: #f1f6ef; } .ak-btn.is-current:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); } .ro-breadcrumb { display: flex; gap: 8px; margin-bottom: 28px; color: var(--color-muted); font-size: 13px; } .ro-event-header { display: flex; align-items: start; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 2px solid var(--color-ink); } .ro-event-header p:last-child { max-width: 48rem; margin-top: 12px; color: var(--color-muted); line-height: 1.5; } .ro-event-summary { margin-top: 28px; padding: 18px; border: 1px solid var(--color-rule); background: var(--color-surface); } .ro-event-summary dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 18px; } .ro-event-summary-wide { grid-column: span 2; } .ro-coverage--event { grid-template-columns: minmax(14rem, .7fr) minmax(0, 1.5fr) auto; } .ro-product-evidence { padding: 22px 12px; border-bottom: 1px solid var(--color-rule); } .ro-product-evidence > header { display: flex; align-items: start; justify-content: space-between; gap: 20px; } .ro-product-evidence h3 { max-width: 52rem; margin-top: 5px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.35; } .ro-product-facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin-top: 18px; } .ro-product-details { margin-top: 10px; } .ro-derived-modes { margin-top: 18px; padding: 14px 16px; border-left: 3px solid var(--color-derived-border); background: var(--color-trim-bg); } .ro-derived-mode { display: grid; grid-template-columns: minmax(14rem, .65fr) minmax(0, 1.35fr); gap: 18px; padding-block: 10px; border-bottom: 1px solid var(--color-soft-rule); } .ro-derived-mode:last-of-type { border-bottom: 0; } .ro-derived-mode strong, .ro-derived-mode span { display: block; } .ro-derived-mode blockquote { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-trim-text); font-size: 14px; line-height: 1.5; } .ro-evidence-copy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 16px; border: 1px solid var(--color-soft-rule); background: var(--color-surface); } .ro-evidence-copy h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } .ro-evidence-copy p { margin-top: 7px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; } .ro-provenance { padding: 16px; border-inline: 1px solid var(--color-soft-rule); border-bottom: 1px solid var(--color-soft-rule); background: var(--color-official-bg); } .ro-provenance dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 10px; } .ro-provenance p:last-child { margin-top: 14px; font-size: 14px; } .ro-provenance code { font-family: var(--font-mono); font-size: 14px; overflow-wrap: anywhere; } .ro-mode-controls { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 18px; border-block: 1px solid var(--color-rule); background: var(--color-surface); } .ro-mode-controls h2 { margin-top: 4px; font-family: var(--font-display); font-size: 1.65rem; } .ro-mode-controls form { display: flex; align-items: end; gap: 8px; } .ro-mode-controls label { display: block; margin-bottom: 6px; } .ro-mode-register { margin-top: 28px; border-top: 2px solid var(--color-ink); } .ro-mode-entry { padding: 28px 12px; border-bottom: 1px solid var(--color-rule); scroll-margin-top: 20px; } .ro-mode-entry > header { display: flex; align-items: start; justify-content: space-between; gap: 24px; } .ro-mode-entry h2 { margin-top: 5px; font-family: var(--font-display); font-size: 1.55rem; } .ro-mode-count { font-family: var(--font-mono); font-size: 12px; text-align: right; } .ro-mode-explanation { max-width: 62rem; margin-top: 14px; line-height: 1.55; } .ro-mode-evidence-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(14rem, .5fr); gap: 32px; margin-top: 20px; } .ro-mode-evidence-grid h3 { padding-bottom: 8px; border-bottom: 1px solid var(--color-rule); font-family: var(--font-mono); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; } .ro-mode-samples, .ro-mode-events { list-style: none; } .ro-mode-samples li, .ro-mode-events li { padding: 10px 0; border-bottom: 1px solid var(--color-soft-rule); } .ro-mode-samples blockquote { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.5; } .ro-mode-samples p { margin-top: 5px; color: var(--color-muted); font-family: var(--font-mono); font-size: 12px; } .ro-device-definitions, .ro-device-wordings, .ro-device-ledger { margin-top: 40px; } .ro-device-state-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; } .ro-evidence-state { min-height: 10rem; padding: 18px; background: var(--color-surface); } .ro-evidence-state dt { display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; } .ro-evidence-state dt strong { font-family: var(--font-mono); font-size: 12px; font-weight: 500; } .ro-evidence-state dd { margin-top: 12px; color: var(--color-muted); font-size: 14px; line-height: 1.55; } .ro-evidence-state--sourced { border: 1px solid var(--color-official-border); border-left-width: 4px; background: var(--color-official-bg); } .ro-evidence-state--unknown { border: 2px dotted var(--color-rule); background: var(--color-neutral-bg); } .ro-evidence-state--unavailable { border: 2px dashed var(--color-rule); } .ro-evidence-state--ambiguous { border: 3px double var(--color-derived-border); background: var(--color-trim-bg); } .ro-coverage--device { grid-template-columns: minmax(14rem, .7fr) minmax(0, 1.5fr) auto; } .ro-coverage--device li { grid-template-columns: 8rem minmax(0, 1fr); } .ro-device-wording-table { max-height: 34rem; margin-top: 18px; overflow: auto; border-block: 1px solid var(--color-rule); background: var(--color-surface); } .ro-device-wording-table th { position: sticky; z-index: 1; top: 0; background: var(--color-surface-muted); } .ro-device-wording-table blockquote { max-width: 60rem; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; } .ro-device-filter { display: grid; grid-template-columns: minmax(14rem, 22rem) auto auto; gap: 8px; align-items: end; margin-top: 20px; padding: 16px; border: 1px solid var(--color-rule); background: var(--color-surface); } .ro-device-filter label { display: block; margin-bottom: 6px; } .ro-device-product-list { margin-top: 22px; border-top: 2px solid var(--color-ink); } .ro-device-product { padding: 24px 12px; border-bottom: 1px solid var(--color-rule); } .ro-device-product > header { display: flex; align-items: start; justify-content: space-between; gap: 20px; } .ro-device-product h3 { max-width: 52rem; margin-top: 5px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; line-height: 1.35; } .ro-device-product header .ak-meta { margin-top: 7px; } .ro-evidence-state-label { display: inline-flex; padding: 3px 9px; border: 1px solid var(--color-rule); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .ro-evidence-state-label--sourced { border-color: var(--color-official-border); background: var(--color-official-bg); color: var(--color-info); } .ro-evidence-state-label--unknown { border-style: dotted; background: var(--color-neutral-bg); } .ro-evidence-state-label--unavailable { border-style: dashed; background: var(--color-surface); } .ro-evidence-state-label--ambiguous { border: 3px double var(--color-derived-border); background: var(--color-trim-bg); color: var(--color-trim-text); } .ro-device-product-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 18px; } .ro-device-product-facts dt, .ro-device-provenance dt { color: var(--color-faint); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } .ro-device-product-facts dd, .ro-device-provenance dd { margin-top: 4px; font-size: 14px; overflow-wrap: anywhere; } .ro-device-evidence { margin-top: 18px; padding: 16px; font-size: 14px; line-height: 1.55; } .ro-device-evidence-disclosure { margin-top: 14px; } .ro-device-evidence-disclosure > summary { min-height: 44px; display: flex; align-items: center; color: var(--color-primary-dark); font-weight: 600; cursor: pointer; } .ro-device-evidence-disclosure[open] > summary { border-bottom: 1px solid var(--color-rule); } .ro-device-evidence-disclosure .ro-device-evidence { margin-top: 12px; } .ro-device-evidence > p + p { margin-top: 8px; } .ro-device-evidence > p:last-child { margin-top: 12px; } .ro-device-evidence--sourced { border-left: 4px solid var(--color-official-border); background: var(--color-official-bg); } .ro-device-evidence--unknown { border: 2px dotted var(--color-rule); background: var(--color-neutral-bg); } .ro-device-evidence--unavailable { border: 2px dashed var(--color-rule); background: var(--color-surface); } .ro-device-evidence--ambiguous { border: 3px double var(--color-derived-border); background: var(--color-trim-bg); color: var(--color-trim-text); } .ro-device-evidence blockquote { margin-top: 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; line-height: 1.55; } .ro-device-evidence-record + .ro-device-evidence-record { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-rule); } .ro-device-provenance { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--color-rule); } .ro-device-provenance dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .ro-device-provenance > .ak-link { display: inline-block; margin-top: 10px; } .ro-device-provenance code { font-family: var(--font-mono); font-size: 14px; overflow-wrap: anywhere; } .ro-device-not-applicable { margin-top: 24px; padding: 14px 16px; border: 1px solid var(--color-rule); background: var(--color-surface); color: var(--color-muted); font-size: 14px; } .ro-device-not-applicable strong { color: var(--color-ink); } .ro-firm-lookup, .ro-firm-variants, .ro-firm-chronology { margin-top: 40px; } .ro-firm-lookup-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; padding: 16px; border: 1px solid var(--color-rule); background: var(--color-surface); } .ro-firm-lookup-form label { display: block; margin-bottom: 6px; } .ro-firm-lookup-result { margin-top: 14px; } .ro-firm-result-summary { display: flex; justify-content: space-between; gap: 20px; padding: 12px; border-bottom: 2px solid var(--color-ink); } .ro-firm-result-summary h3 { font-family: var(--font-display); font-size: 1.2rem; } .ro-firm-result-summary p { color: var(--color-muted); font-size: 13px; } .ro-firm-candidates { list-style-position: inside; } .ro-firm-candidates > li { display: grid; grid-template-columns: minmax(14rem, .75fr) minmax(0, 1.25fr); gap: 24px; padding: 18px 12px; border-bottom: 1px solid var(--color-rule); } .ro-firm-candidates p { margin-top: 5px; color: var(--color-muted); font-size: 14px; } .ro-firm-variants-compact strong { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } .ro-firm-variants-compact ul { margin-top: 5px; list-style: none; } .ro-firm-variants-compact li { display: inline; color: var(--color-muted); font-size: 14px; } .ro-firm-variants-compact li:not(:last-child)::after { content: " · "; } .ro-firm-variants-compact small { display: block; margin-top: 5px; color: var(--color-faint); } .ro-firm-header { padding-bottom: 24px; border-bottom: 2px solid var(--color-ink); } .ro-firm-header > p:not(.ak-kicker) { max-width: 58rem; margin-top: 12px; color: var(--color-muted); line-height: 1.55; } .ro-firm-key code { padding: 4px 7px; background: var(--color-surface-muted); color: var(--color-ink); font-family: var(--font-mono); font-size: 14px; } .ro-firm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; } .ro-firm-stats div { padding-top: 10px; border-top: 1px solid var(--color-rule); } .ro-firm-stats dt, .ro-firm-entry-date span, .ro-firm-entry-links dt { color: var(--color-faint); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } .ro-firm-stats dd { margin-top: 4px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; } .ro-firm-variants > ul { list-style: none; } .ro-firm-variants > ul li { display: flex; justify-content: space-between; gap: 20px; padding: 11px 12px; border-bottom: 1px solid var(--color-rule); } .ro-firm-variants > ul strong { color: var(--color-muted); font-family: var(--font-mono); font-size: 12px; } .ro-firm-chronology-list { list-style-position: inside; } .ro-firm-chronology-list > li { display: grid; grid-template-columns: 11rem minmax(0, 1fr) minmax(12rem, .55fr); gap: 24px; padding: 20px 12px; border-bottom: 1px solid var(--color-rule); } .ro-firm-chronology-list > li.is-undated { border-left: 3px dashed var(--color-rule); } .ro-firm-entry-date strong { display: block; margin-top: 5px; font-size: 14px; } .ro-firm-entry-main h3 { margin-top: 4px; font-family: var(--font-display); font-size: 1.15rem; } .ro-firm-entry-main p { margin-top: 6px; color: var(--color-muted); font-size: 14px; line-height: 1.45; } .ro-firm-entry-main .ro-source-note { color: var(--color-sell-text); } .ro-firm-entry-links { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: 14px; } .ro-firm-entry-links details { width: 100%; margin-top: 4px; } .ro-firm-entry-links summary { cursor: pointer; color: var(--color-primary); font-size: 12px; text-decoration: underline; } .ro-firm-entry-links dl { margin-top: 9px; } .ro-firm-entry-links dl div + div { margin-top: 7px; } .ro-firm-entry-links dd { margin-top: 2px; overflow-wrap: anywhere; font-size: 14px; } .ro-firm-entry-links code { font-family: var(--font-mono); font-size: 14px; } .ro-search-trigger { display: inline-flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--color-rule); background: var(--color-surface); color: var(--color-ink); text-decoration: none; } .ro-search-trigger.is-current { box-shadow: inset 0 -3px var(--color-primary); font-weight: 600; } .ro-search-trigger kbd, .ro-search-close { font-family: var(--font-mono); font-size: 10px; } .ro-search-trigger:focus-visible, .ro-search-close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .ro-search-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 16px; border: 0; background: transparent; } .ro-search-dialog::backdrop { background: rgb(23 26 25 / 55%); } .ro-search-sheet { width: min(42rem, 100%); max-height: min(44rem, calc(100vh - 32px)); margin: 8vh auto 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-ink); background: var(--color-surface); } .ro-search-dialog-header { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 16px; border-bottom: 1px solid var(--color-rule); } .ro-search-close { padding: 6px 8px; border: 1px solid var(--color-rule); background: var(--color-paper); color: var(--color-muted); cursor: pointer; } .ro-palette-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; border-bottom: 1px solid var(--color-rule); } .ro-palette-form input, .ro-palette-form select, .ro-palette-form button { min-height: 48px; padding: 10px 12px; border: 0; background: var(--color-surface); color: var(--color-ink); } .ro-palette-form input { min-width: 0; border-right: 1px solid var(--color-rule); } .ro-palette-form select { border-right: 1px solid var(--color-rule); } .ro-palette-form button { background: var(--color-primary); color: white; font-weight: 600; cursor: pointer; } .ro-palette-form input:focus, .ro-palette-form select:focus { outline: 0; box-shadow: inset 0 -2px var(--color-primary); } .ro-search-status { min-height: 3px; padding-inline: 16px; color: var(--color-muted); font-size: 12px; } .ro-search-status.is-loading { padding-block: 6px; border-top: 3px solid var(--color-primary); } .ro-search-empty, .ro-search-message { padding: 28px 20px; color: var(--color-muted); } .ro-search-empty > p, .ro-search-message p { line-height: 1.5; } .ro-search-message strong { color: var(--color-ink); } .ro-search-message a, .ro-see-all-results { display: inline-block; margin-top: 10px; color: var(--color-primary-dark); text-decoration: underline; } .ro-search-message--error { border-left: 4px solid var(--color-sell); background: var(--color-sell-bg); color: var(--color-sell-text); } .ro-search-results { min-height: 0; overflow-y: auto; } .ro-suggestion-group h3 { position: sticky; top: 0; z-index: 1; padding: 6px 16px; border-block: 1px solid var(--color-rule); background: var(--color-surface-muted); color: var(--color-muted); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; } .ro-search-option { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 16px; border-bottom: 1px solid var(--color-soft-rule); color: var(--color-ink); text-decoration: none; } .ro-search-option:hover, .ro-search-option:focus, .ro-search-option.is-active { background: var(--color-surface-muted); box-shadow: inset 2px 0 var(--color-primary); outline: 0; } .ro-search-option-type, .ro-search-option-id { color: var(--color-muted); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; } .ro-search-option-main strong, .ro-search-option-main span { display: block; } .ro-search-option-main span { margin-top: 2px; color: var(--color-muted); font-size: 14px; } .ro-see-all-results { margin: 12px 16px 16px; } .ro-search-hint { display: flex; gap: 18px; padding: 8px 16px; border-top: 1px solid var(--color-rule); background: var(--color-surface-muted); color: var(--color-muted); font-family: var(--font-mono); font-size: 10px; } /* Native interactive text shares the same visible keyboard treatment as the button system. Keep this after component-specific focus rules so the design contract's external ring is never replaced by the browser default. */ .ak-link:focus-visible, .ak-panel-link:focus-visible, .footer-link:focus-visible, .ro-skip-link:focus-visible, .ro-brand:focus-visible, .ro-ledger-title:focus-visible, .ro-breadcrumb a:focus-visible, .ro-chart-table summary:focus-visible, .ro-product-details summary:focus-visible, .ro-device-evidence-disclosure > summary:focus-visible, .ro-firm-entry-links summary:focus-visible, .ro-search-examples a:focus-visible, .ro-search-message a:focus-visible, .ro-search-option:focus-visible, .ro-see-all-results:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .ro-search-intro { padding-bottom: 30px; border-bottom: 2px solid var(--color-ink); } .ro-search-intro > p:last-child { max-width: 52rem; margin-top: 12px; color: var(--color-muted); font-size: 1.05rem; line-height: 1.6; } .ro-detailed-search { margin-top: 28px; } .ro-search-primary-controls { display: grid; grid-template-columns: minmax(0, 1fr) 13rem auto; align-items: end; gap: 10px; padding: 18px; border-block: 1px solid var(--color-info); background: var(--color-surface); } .ro-search-primary-controls label, .ro-search-filters label { display: block; margin-bottom: 6px; } .ro-search-primary-controls + .ro-unit-note { margin-top: 8px; } .ro-search-refinements > summary { display: none; } .ro-search-refinements:not([open]) > .ro-search-filters { display: grid; } .ro-search-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 24px; padding: 18px; border-block: 1px solid var(--color-rule); background: var(--color-surface-muted); } .ro-search-filters legend { padding-inline: 5px; } .ro-search-filter-wide { grid-column: span 2; } .ro-search-results-section { margin-top: 44px; } .ro-search-group-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 18px; } .ro-search-group-counts div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--color-rule); } .ro-search-group-counts dt { color: var(--color-muted); } .ro-search-group-counts dd { font-family: var(--font-mono); font-weight: 600; } .ro-search-result-group { margin-top: 34px; } .ro-search-result-group > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; padding-bottom: 10px; border-bottom: 2px solid var(--color-ink); } .ro-search-result-group > header h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; } .ro-search-result { padding: 20px 12px; border-bottom: 1px solid var(--color-rule); } .ro-search-result > header { display: flex; justify-content: space-between; gap: 20px; } .ro-search-result h4 { max-width: 54rem; margin-top: 4px; font-family: var(--font-display); font-size: 1.15rem; line-height: 1.35; } .ro-search-result > header code { align-self: start; max-width: 20rem; padding: 3px 7px; background: var(--color-surface-muted); font-family: var(--font-mono); font-size: 14px; overflow-wrap: anywhere; } .ro-search-match { margin-top: 13px; padding: 12px 14px; border-left: 3px solid var(--color-official-border); background: var(--color-official-bg); } .ro-search-match strong { font-size: 12px; } .ro-search-match p { margin-top: 4px; color: var(--color-muted); font-size: 14px; line-height: 1.55; } .ro-search-match mark { padding: 0 2px; background: var(--color-trim-bg); color: var(--color-ink); font-weight: 600; } .ro-search-result-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; } .ro-search-result-meta dt { color: var(--color-faint); font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } .ro-search-result-meta dd { margin-top: 3px; font-size: 14px; } .ro-search-variants { margin-top: 12px; color: var(--color-muted); font-size: 14px; } .ro-search-result > footer { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-size: 14px; } .ro-search-start { max-width: 48rem; margin-top: 40px; padding: 18px; border-left: 4px solid var(--color-official-border); background: var(--color-official-bg); } .ro-search-start h2 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; } .ro-search-start p { margin-top: 7px; color: var(--color-muted); line-height: 1.55; } @media (max-width: 47.99rem) { .ro-desktop-ledger { display: none; } .ro-mobile-ledger { display: block; } .ro-masthead-inner { flex-direction: column; align-items: stretch; gap: 12px; } .ro-nav { display: grid; grid-template-columns: repeat(3, max-content); align-items: start; justify-content: start; gap: 8px 12px; } .ro-nav-desktop-records { display: none; } .ro-search-trigger kbd { display: none; } .ro-nav-mobile-records { display: block; grid-column: 1 / -1; width: 100%; } .ro-nav-mobile-records > summary { height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-block: 1px solid var(--color-rule); background: var(--color-surface-muted); cursor: pointer; font-weight: 600; } .ro-nav-mobile-records > summary::after { content: "+"; margin-left: 16px; font-family: var(--font-mono); font-size: 18px; line-height: 1; } .ro-nav-mobile-records[open] > summary::after { content: "−"; } .ro-nav-mobile-records.is-current > summary { box-shadow: inset 3px 0 var(--color-primary); color: var(--color-ink); } .ro-nav-mobile-records > summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .ro-nav-mobile-records:not([open]) > .ro-nav-mobile-record-links { display: none; } .ro-nav-mobile-record-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--color-rule); } .ro-nav-mobile-record-links > .ak-link { min-height: 44px; display: inline-flex; align-items: center; padding: 7px 12px; border-bottom: 1px solid var(--color-soft-rule); } .ro-nav-mobile-record-links > .ak-link.is-current { color: var(--color-ink); font-weight: 600; text-decoration-thickness: 2px; } .ro-root-search-controls { grid-template-columns: 1fr; } .ro-surface-ledger li { grid-template-columns: 2rem minmax(0, 1fr); } .ro-surface-ledger li > strong { grid-column: 2; } .ro-search-dialog { padding: 8px; } .ro-search-sheet { width: 100%; height: calc(100vh - 16px); max-height: none; margin: 0; } .ro-palette-form { grid-template-columns: minmax(0, 1fr) auto; } .ro-palette-form button { grid-column: 1 / -1; } .ro-search-option { grid-template-columns: minmax(0, 1fr) auto; } .ro-search-option-type { grid-column: 1 / -1; } .ro-search-refinements { margin-top: 24px; } .ro-search-refinements > summary { display: flex; min-height: 48px; align-items: center; gap: 12px; padding: 10px 12px; border-block: 1px solid var(--color-rule); background: var(--color-surface-muted); cursor: pointer; font-weight: 600; } .ro-search-refinements > summary::before { content: "+"; flex: 0 0 auto; font-family: var(--font-mono); font-size: 18px; line-height: 1; } .ro-search-refinements[open] > summary::before { content: "−"; } .ro-search-refinements > summary:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } .ro-search-refinement-summary { margin-left: auto; color: var(--color-muted); font-family: var(--font-mono); font-size: 12px; font-weight: 500; text-align: right; } .ro-search-refinements:not([open]) > .ro-search-filters { display: none; } .ro-search-refinements > .ro-search-filters { margin-top: 0; } .ro-search-primary-controls, .ro-search-filters, .ro-search-group-counts, .ro-search-result-meta { grid-template-columns: 1fr; } .ro-search-filter-wide { grid-column: auto; } .ro-search-result-group > header, .ro-search-result > header { display: block; } .ro-search-result-group > header p, .ro-search-result > header code { display: inline-block; margin-top: 7px; } .ro-timeline-filters, .ro-coverage, .ro-coverage--event { grid-template-columns: 1fr; } .ro-coverage > .ak-link, .ro-coverage-note { grid-column: 1; grid-row: auto; } .ro-ledger-list > li { grid-template-columns: 1fr; } .ro-ledger-list dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ro-event-header { display: block; } .ro-event-header .ak-btn { margin-top: 16px; } .ro-event-summary dl, .ro-product-facts, .ro-evidence-copy, .ro-provenance dl { grid-template-columns: 1fr 1fr; } .ro-event-summary-wide { grid-column: auto; } .ro-derived-mode, .ro-mode-evidence-grid { grid-template-columns: 1fr; } .ro-mode-controls, .ro-mode-entry > header { display: block; } .ro-mode-controls form { width: 100%; margin-top: 14px; display: grid; grid-template-columns: 1fr; align-items: end; } .ro-mode-controls .ak-field, .ro-mode-controls .ak-btn { width: 100%; max-width: 100%; } .ro-mode-count { display: block; margin-top: 10px; text-align: left; } .ro-device-state-grid, .ro-device-filter, .ro-device-product-facts, .ro-device-provenance dl { grid-template-columns: 1fr; } .ro-coverage--device { grid-template-columns: 1fr; } .ro-device-product > header { display: block; } .ro-device-product .ro-evidence-state-label { margin-top: 12px; } .ro-firm-lookup-form, .ro-firm-candidates > li, .ro-firm-chronology-list > li, .ro-firm-stats { grid-template-columns: 1fr; } .ro-firm-result-summary, .ro-firm-variants > ul li { display: block; } .ro-firm-result-summary p, .ro-firm-variants > ul strong { display: block; margin-top: 5px; } } /* --- Analysis atlas -------------------------------------------------------- */ .ro-analysis-page { max-width: 1280px; } .ro-analysis-intro { max-width: 64rem; } .ro-analysis-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 2px solid var(--color-ink); background: var(--color-surface); } .ro-analysis-stat-grid > div { min-width: 0; padding: 20px; border-right: 1px solid var(--color-rule); } .ro-analysis-stat-grid > div:last-child { border-right: 0; } .ro-analysis-stat-grid span { display: block; color: var(--color-faint); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; } .ro-analysis-stat-grid strong { display: block; margin-top: 8px; font-family: var(--font-display); font-size: clamp(1.65rem, 3vw, 2.35rem); font-weight: 600; line-height: 1; overflow-wrap: anywhere; } .ro-analysis-stat-grid small { display: block; margin-top: 9px; color: var(--color-muted); font-size: 12px; line-height: 1.4; } .ro-analysis-stat-grid--compact { margin-top: 28px; } .ro-analysis-date-stat { font-family: var(--font-mono) !important; font-size: clamp(1rem, 2vw, 1.35rem) !important; line-height: 1.25 !important; } .ro-analysis-composition, .ro-analysis-directory, .ro-analysis-chart-section { margin-top: 48px; } .ro-analysis-composition-grid, .ro-analysis-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 24px; } .ro-analysis-composition-grid h3 { padding-bottom: 8px; border-bottom: 1px solid var(--color-rule); font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; } .ro-analysis-measure { padding-block: 12px; border-bottom: 1px solid var(--color-soft-rule); } .ro-analysis-measure > div, .ro-analysis-bar-list li > div > div, .ro-firm-band-register > div > div, .ro-duration-register header { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .ro-analysis-measure strong, .ro-analysis-bar-list li > div > div > span, .ro-firm-band-register > div > div > span, .ro-duration-register header span { font-family: var(--font-mono); font-size: 12px; } .ro-analysis-measure small, .ro-analysis-bar-list small, .ro-firm-band-register small { display: block; margin-top: 6px; color: var(--color-muted); font-size: 11px; } .ro-analysis-track { display: block; width: 100%; height: 8px; margin-top: 7px; overflow: hidden; background: var(--color-surface-muted); border-bottom: 1px solid var(--color-rule); } .ro-analysis-track i { display: block; height: 100%; background: var(--color-info); } .ro-analysis-track i.is-food { background: var(--color-ink); } .ro-analysis-track i.is-drug { background: var(--color-info); } .ro-analysis-track i.is-device { background: var(--color-derived-border); } .ro-analysis-track i.is-class_i { background: var(--color-primary); } .ro-analysis-track i.is-class_ii { background: var(--color-info); } .ro-analysis-track i.is-class_iii { background: var(--color-derived-border); } .ro-analysis-track i.is-not_yet_classified { background: var(--color-rule); } .ro-analysis-track i.is-state { background: var(--color-derived-border); } .ro-analysis-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 24px; border: 1px solid var(--color-rule); background: var(--color-rule); } .ro-analysis-card { position: relative; min-height: 320px; padding: 24px; overflow: hidden; background: var(--color-surface); transition: background 80ms ease-out; } .ro-analysis-card:hover { background: var(--color-surface-muted); } .ro-analysis-card:focus-within { z-index: 1; outline: 2px solid var(--color-primary); outline-offset: 2px; } .ro-analysis-card-link { position: absolute; inset: 0; z-index: 2; text-decoration: none; } .ro-analysis-card-link:focus-visible { outline: 0; } .ro-analysis-card-index { color: var(--color-faint); font-family: var(--font-mono); font-size: 11px; } .ro-analysis-card-mark { display: flex; align-items: end; gap: 5px; height: 54px; margin-block: 28px 24px; border-bottom: 1px solid var(--color-rule); } .ro-analysis-card-mark span { width: 12px; background: var(--color-info); } .ro-analysis-card-mark span:nth-child(1) { height: 35%; } .ro-analysis-card-mark span:nth-child(2) { height: 72%; } .ro-analysis-card-mark span:nth-child(3) { height: 52%; } .ro-analysis-card-mark span:nth-child(4) { height: 92%; } .ro-analysis-card--classifications .ro-analysis-card-mark span { width: 22%; height: 18px; background: var(--color-derived-border); } .ro-analysis-card--classifications .ro-analysis-card-mark span:nth-child(2) { background: var(--color-info); } .ro-analysis-card--classifications .ro-analysis-card-mark span:nth-child(3) { background: var(--color-primary); } .ro-analysis-card--geography .ro-analysis-card-mark span { width: 4px; border-radius: 50%; background: var(--color-info); } .ro-analysis-card--firms .ro-analysis-card-mark span { width: 20%; } .ro-analysis-card--firms .ro-analysis-card-mark span:nth-child(1) { height: 94%; } .ro-analysis-card--firms .ro-analysis-card-mark span:nth-child(2) { height: 44%; } .ro-analysis-card--firms .ro-analysis-card-mark span:nth-child(3) { height: 25%; } .ro-analysis-card--firms .ro-analysis-card-mark span:nth-child(4) { height: 14%; } .ro-analysis-card--durations .ro-analysis-card-mark { align-items: center; } .ro-analysis-card--durations .ro-analysis-card-mark span { width: 22%; height: 8px; } .ro-analysis-card--durations .ro-analysis-card-mark span:nth-child(1) { width: 12%; } .ro-analysis-card--durations .ro-analysis-card-mark span:nth-child(2) { width: 32%; } .ro-analysis-card--durations .ro-analysis-card-mark span:nth-child(3) { width: 22%; } .ro-analysis-card--quality .ro-analysis-card-mark { display: grid; grid-template-columns: 1fr; gap: 5px; align-content: center; } .ro-analysis-card--quality .ro-analysis-card-mark span { width: auto; height: 5px; background: var(--color-rule); } .ro-analysis-card--quality .ro-analysis-card-mark span::after { content: ""; display: block; width: 78%; height: 100%; background: var(--color-info); } .ro-analysis-card h3 { margin-top: 8px; font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; line-height: 1.15; } .ro-analysis-card > p:not(.ak-kicker) { margin-top: 12px; color: var(--color-muted); font-size: 14px; line-height: 1.55; } .ro-analysis-card-action { position: absolute; bottom: 24px; left: 24px; color: var(--color-primary-dark); font-size: 13px; } .ro-analysis-breadcrumb { display: flex; gap: 8px; padding-top: 24px; color: var(--color-muted); font-size: 13px; } .ro-analysis-page-header { max-width: 62rem; padding-block: 32px 28px; } .ro-analysis-page-header h1 { margin-top: 8px; font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 600; line-height: 1.02; } .ro-analysis-page-header > p:last-child { max-width: 50rem; margin-top: 16px; color: var(--color-muted); font-size: 1.05rem; line-height: 1.6; } .ro-analysis-nav { display: flex; flex-wrap: wrap; border-block: 1px solid var(--color-rule); } .ro-analysis-nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-right: 1px solid var(--color-rule); color: var(--color-muted); font-size: 13px; font-weight: 500; text-decoration: none; } .ro-analysis-nav-link:hover { background: var(--color-surface-muted); color: var(--color-ink); } .ro-analysis-nav-link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } .ro-analysis-nav-link.is-current { background: var(--color-surface); box-shadow: inset 0 -3px var(--color-primary); color: var(--color-ink); font-weight: 600; } .ro-analysis-legend { display: flex; flex-wrap: wrap; gap: 14px; color: var(--color-muted); font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; } .ro-analysis-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 5px; background: var(--color-ink); } .ro-analysis-legend .is-drug::before { background: var(--color-info); } .ro-analysis-legend .is-device::before { background: var(--color-derived-border); } .ro-analysis-activity-chart, .ro-analysis-event-chart { display: block; max-width: none; } .ro-analysis-series--food { fill: var(--color-ink); } .ro-analysis-series--drug { fill: var(--color-info); } .ro-analysis-series--device { fill: var(--color-derived-border); } .ro-analysis-event-bar { fill: var(--color-info); } .ro-analysis-series:hover, .ro-analysis-event-bar:hover { opacity: .75; } .ro-chart-note { fill: var(--color-primary); font-family: var(--font-mono); font-size: 8px; text-transform: uppercase; } .ro-scroll-hint { display: none; margin-top: 10px; color: var(--color-primary-dark); font-family: var(--font-mono); font-size: 10px; } .ro-analysis-data-table { margin-top: 18px; border-block: 1px solid var(--color-rule); } .ro-analysis-data-table summary { min-height: 44px; padding: 12px 0; color: var(--color-primary-dark); font-weight: 600; cursor: pointer; } .ro-analysis-data-table[open] summary { border-bottom: 1px solid var(--color-rule); } .ro-analysis-data-table .overflow-x-auto { max-height: 34rem; overflow: auto; } .ro-analysis-table-wrap { margin-top: 20px; border: 1px solid var(--color-rule); background: var(--color-surface); } .ro-classification-register { margin-top: 22px; border-top: 2px solid var(--color-ink); } .ro-classification-register article { padding: 22px 12px; border-bottom: 1px solid var(--color-rule); } .ro-classification-register article > header { display: flex; justify-content: space-between; gap: 20px; } .ro-classification-register h3 { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; } .ro-classification-register article > header strong { font-family: var(--font-mono); font-size: 12px; } .ro-classification-stack { display: flex; height: 24px; margin-top: 16px; overflow: hidden; background: var(--color-surface-muted); } .ro-classification-stack > span { min-width: 1px; height: 100%; background: var(--color-rule); } .ro-classification-stack .is-class_i { background: var(--color-primary); } .ro-classification-stack .is-class_ii { background: var(--color-info); } .ro-classification-stack .is-class_iii { background: var(--color-derived-border); } .ro-classification-stack .is-not_yet_classified { background: var(--color-muted); } .ro-classification-register dl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 14px; } .ro-classification-register dt { color: var(--color-faint); font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; } .ro-classification-register dd { margin-top: 4px; font-size: 12px; } .ro-classification-register dd span { color: var(--color-muted); } .ro-analysis-matrix th[scope="row"] { font-family: var(--font-body); font-size: 13px; letter-spacing: 0; text-transform: none; } .ro-analysis-split > .ro-analysis-chart-section { margin-top: 48px; } .ro-analysis-bar-list { list-style: none; margin-top: 14px; } .ro-analysis-bar-list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 10px; padding: 11px 8px; border-bottom: 1px solid var(--color-soft-rule); } .ro-analysis-rank { padding-top: 2px; color: var(--color-faint); font-family: var(--font-mono); font-size: 10px; } .ro-analysis-bar-list li > div { min-width: 0; } .ro-analysis-bar-list strong, .ro-analysis-bar-list .ak-link { overflow-wrap: anywhere; font-size: 13px; } .ro-analysis-bar-list code { font-family: var(--font-mono); font-size: 9px; overflow-wrap: anywhere; } .ro-analysis-bar-list--wide li { grid-template-columns: 2.5rem minmax(0, 1fr); padding-block: 13px; } .ro-firm-band-register, .ro-duration-register, .ro-quality-register { margin-top: 20px; border-top: 2px solid var(--color-ink); } .ro-firm-band-register > div, .ro-duration-register > div { padding: 16px 12px; border-bottom: 1px solid var(--color-rule); } .ro-firm-band-register .ro-analysis-track { max-width: 48rem; } .ro-duration-register dl { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 9px; } .ro-duration-register dl div { display: flex; gap: 5px; color: var(--color-muted); font-size: 11px; } .ro-duration-register dd { font-family: var(--font-mono); } .ro-quality-register article { padding: 20px 12px; border-bottom: 1px solid var(--color-rule); } .ro-quality-register article header { display: flex; justify-content: space-between; gap: 32px; } .ro-quality-register h3 { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; } .ro-quality-register header p { max-width: 48rem; margin-top: 4px; color: var(--color-muted); font-size: 13px; line-height: 1.45; } .ro-quality-register header > strong { font-family: var(--font-mono); font-size: 1.15rem; } .ro-quality-register .ro-analysis-track { height: 10px; } .ro-quality-register > article > .ak-meta { margin-top: 7px; } .ro-analysis-register-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin-top: 48px; border: 1px solid var(--color-rule); background: var(--color-rule); } .ro-analysis-register-grid section { padding: 20px; background: var(--color-surface); } .ro-analysis-register-grid h2 { margin-top: 5px; font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; } .ro-analysis-register-grid dl { margin-top: 14px; } .ro-analysis-register-grid dl div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--color-soft-rule); font-size: 13px; } .ro-analysis-register-grid dd { font-family: var(--font-mono); } @media (max-width: 74.99rem) { .ro-analysis-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ro-analysis-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ro-analysis-stat-grid > div:nth-child(2) { border-right: 0; } .ro-analysis-stat-grid > div:nth-child(-n + 2) { border-bottom: 1px solid var(--color-rule); } } @media (max-width: 47.99rem) { .ro-analysis-page { padding-inline: 16px; } .ro-analysis-stat-grid, .ro-analysis-composition-grid, .ro-analysis-split, .ro-analysis-card-grid, .ro-analysis-register-grid { grid-template-columns: 1fr; } .ro-analysis-stat-grid > div { border-right: 0; border-bottom: 1px solid var(--color-rule); } .ro-analysis-stat-grid > div:last-child { border-bottom: 0; } .ro-analysis-card { min-height: 300px; } .ro-analysis-nav { flex-wrap: nowrap; overflow-x: auto; } .ro-analysis-nav-link { flex: 0 0 auto; } .ro-scroll-hint { display: block; } .ro-section-heading { align-items: flex-start; } .ro-analysis-legend { justify-content: flex-end; } .ro-classification-register dl { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ro-quality-register article header { gap: 16px; } } @media (prefers-reduced-motion: reduce) { .ro-analysis-card, .ro-analysis-nav-link { transition: none; } } /* --- Feedback ------------------------------------------------------------- */ .ro-feedback-button { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 50; display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border: 1px solid var(--color-ink); border-radius: 50%; background: var(--color-primary); color: #fff; box-shadow: 3px 3px 0 rgb(23 26 25 / 18%); transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease; } .ro-feedback-button:hover { background: var(--color-primary-dark); box-shadow: 1px 1px 0 rgb(23 26 25 / 22%); transform: translate(2px, 2px); } .ro-feedback-button:focus-visible, .ro-feedback-dialog-close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } .ro-feedback-dialog { width: min(32rem, calc(100% - 32px)); max-width: none; max-height: min(44rem, calc(100dvh - 32px)); margin: auto; padding: 0; overflow: visible; border: 1px solid var(--color-ink); border-radius: 0; background: transparent; color: var(--color-ink); } .ro-feedback-dialog::backdrop { background: rgb(23 26 25 / 58%); } .ro-feedback-dialog-panel { display: flex; max-height: min(44rem, calc(100dvh - 32px)); flex-direction: column; overflow: hidden; background: var(--color-surface); } .ro-feedback-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--color-rule); } .ro-feedback-dialog-header .ak-kicker { margin-bottom: 3px; } .ro-feedback-dialog-close { display: inline-flex; width: 36px; height: 36px; flex: 0 0 auto; align-items: center; justify-content: center; border: 1px solid var(--color-rule); background: var(--color-paper); color: var(--color-muted); cursor: pointer; } .ro-feedback-dialog-close:hover { border-color: var(--color-ink); color: var(--color-ink); } .ro-feedback-dialog-body { overflow-y: auto; padding: 20px; } .ro-feedback-form { display: grid; gap: 18px; } .ro-feedback-field { display: grid; gap: 7px; } .ro-feedback-honeypot { position: absolute; left: -10000px; } .ro-feedback-actions { padding-top: 2px; } .ro-feedback-page .ak-page-title { margin-top: 5px; } .ro-feedback-subtitle { margin: 10px 0 24px; line-height: 1.55; } .ro-feedback-success { display: grid; justify-items: center; gap: 14px; padding: 32px 20px; text-align: center; } .ro-feedback-success-mark { display: inline-flex; padding: 10px; border: 1px solid var(--color-buy); background: var(--color-buy-bg); color: var(--color-buy); } .ro-feedback-success-icon { width: 32px; height: 32px; } .ro-feedback-success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 4px; } @media (max-width: 36rem) { .ro-feedback-button { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); } .ro-feedback-dialog { width: calc(100% - 16px); max-height: calc(100dvh - 16px); } .ro-feedback-dialog-panel { max-height: calc(100dvh - 16px); } .ro-feedback-dialog-header, .ro-feedback-dialog-body { padding: 16px; } }