/* ============================================================ Phinder Portal design layer (P32 "Claude Design" system). Source of truth: design/2026-08-01-claude-design-portal/ (colors_and_type.css tokens + the Phinder Portal.dc.html helmet styles and inline styles, extracted to classes because the portal CSP forbids inline styles and scripts). Loads after portal/base.css. base.css keeps the legacy Lamplight component classes alive for not-yet-restyled pages; this file is the token source and component system for the P32 portal shell and the two portal surfaces. All new classes are prefixed dc- (except .ph-portal-grid and the semantic .t-* type ramp, whose names are load-bearing in the design source). Theme bridge: the design switches on [data-ph-theme="dark|light"]; the shipped theme.js toggles .dark-theme/.light-theme on and stays untouched. The token overrides below respond to BOTH, plus prefers-color-scheme when no explicit choice is stored. ============================================================ */ /* ---------- Self-hosted fonts (OFL; see fonts/OFL-*.txt). Geist + Geist Mono: static woff2 from vercel/geist-font. Instrument Serif: static ttf from google/fonts ofl/instrumentserif (no woff2 is published there; ttf vendored as-is). ---------- */ @font-face { font-family: "Geist"; src: url("fonts/Geist-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Geist"; src: url("fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Geist"; src: url("fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Geist"; src: url("fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Geist"; src: url("fonts/Geist-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; } /* ============================================================ TOKENS - dark (default), from colors_and_type.css :root, plus the dc.html helmet extras (--accent-contrast, --nav-bg) and the helmet's dark foreground tweaks (--fg-2/--fg-3 brightened). ============================================================ */ :root { color-scheme: dark; /* ---------- COLOR - Surfaces ---------- */ --bg-base: #0a0a0a; --bg-elev-1: #131210; --bg-elev-2: #1b1916; --bg-elev-3: #24211c; --bg-inset: #060605; /* ---------- COLOR - Borders ---------- */ --border: #2a2722; --border-strong: #3a362f; --border-faint: #1f1d19; /* ---------- COLOR - Foreground (warm whites). fg-2/fg-3 carry the helmet [data-ph-theme="dark"] tweak (#b6b0a4 / #8d877b over the base #a8a39a / #6e6a62). ---------- */ --fg-1: #f5f1e8; --fg-2: #b6b0a4; --fg-3: #8d877b; --fg-4: #4a463f; /* ---------- COLOR - Single accent (warm amber) ---------- */ --accent: #f5a524; --accent-hi: #ffb84d; --accent-lo: #c47e10; --accent-ink: #0a0a0a; --accent-glow: rgba(245, 165, 36, 0.18); --accent-faint: rgba(245, 165, 36, 0.08); /* ---------- Helmet extras ---------- */ --accent-contrast: #1a1200; --nav-bg: rgba(10, 10, 10, 0.7); /* ---------- COLOR - Status ---------- */ --status-ok: #a8a39a; --status-warn: var(--accent); --status-danger: #d97757; /* ---------- TYPE - Families ---------- */ --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-serif: "Instrument Serif", "Iowan Old Style", "Apple Garamond", Georgia, serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* ---------- TYPE - Scale (px) ---------- */ --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px; --fs-20: 20px; --fs-24: 24px; --fs-28: 28px; --fs-32: 32px; --fs-40: 40px; --fs-56: 56px; --fs-72: 72px; --fs-96: 96px; /* ---------- TYPE - Tracking ---------- */ --tracking-tight: -0.022em; --tracking-snug: -0.012em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-mono: 0.01em; /* ---------- TYPE - Line heights ---------- */ --lh-display: 1.02; --lh-heading: 1.12; --lh-body: 1.55; --lh-tight: 1.25; /* ---------- SPACING ---------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; /* ---------- RADII ---------- */ --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-5: 24px; --r-full: 999px; /* ---------- SHADOWS ---------- */ --shadow-1: 0 1px 0 0 rgba(0, 0, 0, 0.6), 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.5); --shadow-3: 0 24px 56px -16px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.5); --shadow-accent: 0 0 0 1px var(--accent-glow), 0 8px 32px -8px var(--accent-glow); --ring-focus: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--accent); /* ---------- MOTION ---------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-std: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --dur-quick: 120ms; --dur-base: 200ms; --dur-slow: 400ms; --dur-slower: 700ms; } /* ---------- TOKENS - light (helmet [data-ph-theme="light"] block). Applied when: the device prefers light and no explicit dark choice is stored (media query below), OR an explicit light choice exists (theme.js .light-theme on :root, or a [data-ph-theme="light"] scope). The block is intentionally duplicated across the two selectors because a media query cannot be combined with them. */ @media (prefers-color-scheme: light) { :root:not(.dark-theme):not([data-ph-theme="dark"]) { color-scheme: light; --bg-base: #f7f4ec; --bg-elev-1: #fffdf8; --bg-elev-2: #f0ece1; --bg-elev-3: #e8e3d5; --bg-inset: #efebe0; --fg-1: #231f19; --fg-2: #544f46; --fg-3: #6f6a5e; --fg-4: #a29b8d; --border-faint: #e6e1d3; --border: #d7d1c1; --border-strong: #bcb4a1; --accent: #9a6206; --accent-hi: #7d4f04; --accent-lo: #b57708; --accent-glow: rgba(154, 98, 6, 0.2); --accent-faint: rgba(154, 98, 6, 0.07); --accent-contrast: #fffdf8; --nav-bg: rgba(247, 244, 236, 0.75); --shadow-accent: 0 0 0 1px rgba(154, 98, 6, 0.35), 0 4px 16px rgba(154, 98, 6, 0.16); } } :root.light-theme, [data-ph-theme="light"] { color-scheme: light; --bg-base: #f7f4ec; --bg-elev-1: #fffdf8; --bg-elev-2: #f0ece1; --bg-elev-3: #e8e3d5; --bg-inset: #efebe0; --fg-1: #231f19; --fg-2: #544f46; --fg-3: #6f6a5e; --fg-4: #a29b8d; --border-faint: #e6e1d3; --border: #d7d1c1; --border-strong: #bcb4a1; --accent: #9a6206; --accent-hi: #7d4f04; --accent-lo: #b57708; --accent-glow: rgba(154, 98, 6, 0.2); --accent-faint: rgba(154, 98, 6, 0.07); --accent-contrast: #fffdf8; --nav-bg: rgba(247, 244, 236, 0.75); --shadow-accent: 0 0 0 1px rgba(154, 98, 6, 0.35), 0 4px 16px rgba(154, 98, 6, 0.16); } /* Explicit dark choice (stored toggle or a scoped dark region) wins over both the OS light preference and an enclosing light scope. */ :root.dark-theme, [data-ph-theme="dark"] { color-scheme: dark; --bg-base: #0a0a0a; --bg-elev-1: #131210; --bg-elev-2: #1b1916; --bg-elev-3: #24211c; --bg-inset: #060605; --border: #2a2722; --border-strong: #3a362f; --border-faint: #1f1d19; --fg-1: #f5f1e8; --fg-2: #b6b0a4; --fg-3: #8d877b; --fg-4: #4a463f; --accent: #f5a524; --accent-hi: #ffb84d; --accent-lo: #c47e10; --accent-glow: rgba(245, 165, 36, 0.18); --accent-faint: rgba(245, 165, 36, 0.08); --accent-contrast: #1a1200; --nav-bg: rgba(10, 10, 10, 0.7); --shadow-accent: 0 0 0 1px var(--accent-glow), 0 8px 32px -8px var(--accent-glow); } /* Keep the legacy Lamplight variables (base.css components) pointed at the same ink so both class systems read as one page while surfaces migrate. */ :root, :root.dark-theme, :root.light-theme { --brand-color: var(--accent); --brand-accent: var(--accent); --bg: var(--bg-base); --surface-bg: var(--bg-elev-1); --input-bg: var(--bg-elev-2); --text: var(--fg-1); --text-muted: var(--fg-2); --link-color: var(--accent); --link-hover: var(--accent-hi); } /* ============================================================ Semantic typography (verbatim from colors_and_type.css) ============================================================ */ .t-display { font-family: var(--font-serif); font-weight: 400; font-size: clamp(48px, 8vw, var(--fs-96)); line-height: var(--lh-display); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .t-display em, .t-display i { font-style: italic; color: var(--accent); } .t-h1 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(36px, 5vw, var(--fs-56)); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); color: var(--fg-1); } .t-h2 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-32); line-height: var(--lh-heading); letter-spacing: var(--tracking-snug); color: var(--fg-1); } .t-h3 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-20); line-height: var(--lh-tight); letter-spacing: var(--tracking-snug); color: var(--fg-1); } .t-h4 { font-family: var(--font-sans); font-weight: 500; font-size: var(--fs-16); line-height: var(--lh-tight); color: var(--fg-1); } .t-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-16); line-height: var(--lh-body); color: var(--fg-2); } .t-body-lg { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-18); line-height: var(--lh-body); color: var(--fg-2); } .t-small { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-14); line-height: 1.5; color: var(--fg-2); } .t-caption { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-13); line-height: 1.45; color: var(--fg-3); } .t-eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-12); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); } .t-eyebrow-mute { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-12); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-3); } .t-mono { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-13); letter-spacing: var(--tracking-mono); color: var(--fg-2); } .t-quote { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: var(--fs-28); line-height: 1.3; letter-spacing: var(--tracking-tight); color: var(--fg-1); } .t-link { color: var(--fg-1); text-decoration: none; border-bottom: 1px solid var(--border-strong); transition: border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } .t-link:hover { color: var(--accent); border-bottom-color: var(--accent); } .phinder-surface { background: var(--bg-base); color: var(--fg-1); font-family: var(--font-sans); font-size: var(--fs-16); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; } ::selection { background: var(--accent); color: var(--accent-ink); } /* ============================================================ Shell: page body, header, footer ============================================================ */ body { background: var(--bg-base); color: var(--fg-1); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-feature-settings: "ss01", "cv11"; } /* Accent links (helmet `a` rule), opt-in per element so legacy pages styled by base.css are not restyled wholesale. */ .dc-link { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--border-strong); transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .dc-link:hover { color: var(--accent-hi); border-bottom-color: var(--accent); } .dc-link-quiet { font-size: 12.5px; color: var(--fg-2); text-decoration: none; border-bottom: none; } .dc-link-quiet:hover { color: var(--accent); } /* P32.A11: the shared back affordance above every deep page's head. Flex-column wrappers (.dc-claims/.dc-engagements/.dc-profile) place it via align-self; plain .dc-page wrappers get their own spacing. */ .dc-backlink { align-self: flex-start; } .dc-page:not(.dc-claims) > .dc-backlink { display: inline-block; margin: 24px 0 -16px; } /* P32.A11: the role-aware lander's two-path card grid. Cards sit side by side where there is room and stack on narrow screens; DOM order is the priority order (seeker-marked accounts get the seeker card first). */ .dc-path-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; align-items: stretch; } /* P32 r5: the grid stretches the two path cards to equal height (and dc-card-pad already flexes them column-wise), but nothing pinned the action rows - CTAs landed at different heights depending on copy length. Auto top margin pushes actions to the bottom edge. */ .dc-path-grid > .dc-card > .dc-actions { margin-top: auto; } .dc-header { position: sticky; top: 0; z-index: 20; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; padding: 0 40px; border-bottom: 1px solid var(--border-faint); background: var(--nav-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } .dc-header-left { display: flex; align-items: center; gap: 28px; } .dc-header-right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; } .dc-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; border-bottom: none; color: var(--fg-1); } .dc-brand-dot { width: 14px; height: 14px; border-radius: var(--r-full); border: 2px solid var(--accent); box-shadow: 0 0 12px var(--accent-glow); flex-shrink: 0; } .dc-brand-name { font-weight: 600; font-size: 15px; letter-spacing: var(--tracking-snug); color: var(--fg-1); } .dc-brand-scope { font-family: var(--font-mono); font-weight: 500; font-size: 11px; color: var(--fg-3); letter-spacing: var(--tracking-wide); text-transform: uppercase; } .dc-header-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; } .dc-header-nav a { font-size: 13px; color: var(--fg-2); text-decoration: none; border-bottom: none; white-space: nowrap; } .dc-header-nav a:hover { color: var(--accent); } /* Role tabs (the "Requests to me / My searches" switch and the seeker "Searching as" actor switch). Foundation only - the tabs themselves ship with the surface lanes. */ .dc-role-tabs { display: flex; gap: 3px; padding: 3px; border: 1px solid var(--border); border-radius: var(--r-full); } .dc-role-tab { background: transparent; color: var(--fg-3); border: none; border-radius: var(--r-full); padding: 6px 15px; font: 500 12.5px var(--font-sans); cursor: pointer; white-space: nowrap; margin: 0; width: auto; text-decoration: none; } .dc-role-tab:hover { background: transparent; color: var(--fg-1); } .dc-role-tab.is-active { background: var(--bg-elev-3); color: var(--fg-1); } .dc-role-tab.is-active:hover { background: var(--bg-elev-3); } .dc-role-tab.dc-role-tab-sm { padding: 5px 13px; font-size: 12px; } /* Identity area (avatar monogram + name). */ .dc-identity { display: flex; align-items: center; gap: 9px; min-width: 0; } .dc-identity-name { font-size: 13px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Avatar monograms. Default 28px accent ring; size and tone modifiers below. Neutral tone is the anonymised "Researcher #NNN" state. */ .dc-avatar { width: 28px; height: 28px; border-radius: var(--r-full); border: 1px solid var(--accent-lo); background: var(--accent-faint); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; font: 500 11px var(--font-mono); flex-shrink: 0; } .dc-avatar-neutral { border-color: var(--border-strong); background: transparent; color: var(--fg-3); } .dc-avatar-filled { border-color: var(--border-strong); background: var(--bg-elev-2); color: var(--fg-2); } .dc-avatar-lg { width: 56px; height: 56px; font-size: 18px; } .dc-avatar-md { width: 40px; height: 40px; font-size: 13px; } .dc-avatar-vis { width: 32px; height: 32px; font-size: 13px; } .dc-avatar-sm { width: 26px; height: 26px; font-size: 10px; } /* Footer (design shell; the current footer partial keeps its own classes until the surface lanes adopt these). */ .dc-footer { border-top: 1px solid var(--border-faint); margin-top: 48px; } .dc-footer-inner { max-width: 1240px; margin: 0 auto; padding: 28px 40px 40px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; } .dc-footer-copy { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-mono); color: var(--fg-4); } /* ============================================================ Page scaffold ============================================================ */ /* Pages that opt into the design layout mark their root with .dc-page; the base template's
then widens from the legacy 900px column to the design's 1240px canvas. */ main:has(> .dc-page) { max-width: 1240px; margin: 0 auto; padding: 0 40px 40px; } .dc-page { min-width: 0; } .dc-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; flex-wrap: wrap; padding: 40px 0 28px; border-bottom: 1px solid var(--border-faint); } .dc-page-head-id { display: flex; gap: 18px; align-items: flex-start; } .dc-page-head-col { display: flex; flex-direction: column; gap: 6px; } .dc-page-title { margin: 0; font: 400 32px/1.15 var(--font-serif); letter-spacing: -0.018em; color: var(--fg-1); } .dc-page-sub { font-size: 14px; color: var(--fg-2); } .dc-page-subrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dc-page-orcid { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-mono); color: var(--fg-3); } /* Availability block (right side of the researcher page head). */ .dc-avail { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } .dc-avail-status { display: flex; align-items: center; gap: 10px; } .dc-avail-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--fg-4); flex-shrink: 0; } .dc-avail-dot.is-on { background: var(--accent); } .dc-avail-label { font: 500 13.5px var(--font-sans); color: var(--fg-1); } /* Portal grid: nav rail + content + aside rail. Sides yield before the content starves (helmet .ph-portal-grid, load-bearing). */ .ph-portal-grid { display: grid; grid-template-columns: 172px minmax(0, 1fr) 320px; gap: 32px; padding-top: 32px; align-items: start; } .ph-portal-grid > nav { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 2px; } .ph-portal-grid > aside { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 20px; scroll-margin-top: 88px; } @media (max-width: 1180px) { .ph-portal-grid { grid-template-columns: 172px minmax(0, 1fr); } .ph-portal-grid > aside { grid-column: 2; position: static; } } @media (max-width: 780px) { .ph-portal-grid { grid-template-columns: minmax(0, 1fr); } .ph-portal-grid > nav { position: static; flex-direction: row; flex-wrap: wrap; } .ph-portal-grid > aside { grid-column: 1; } } /* Content column between the rails. */ .dc-content-col { display: flex; flex-direction: column; gap: 32px; min-width: 0; } .dc-content-col.dc-gap-lg { gap: 36px; } /* Section nav rail. */ .dc-rail-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: transparent; border: none; border-left: 2px solid var(--border-faint); border-radius: 0 6px 6px 0; color: var(--fg-2); font: 400 13px var(--font-sans); padding: 8px 10px 8px 12px; cursor: pointer; text-align: left; text-decoration: none; white-space: nowrap; margin: 0; width: auto; transition: color var(--dur-quick) var(--ease-out), background var(--dur-quick) var(--ease-out); } .dc-rail-link:hover { color: var(--fg-1); background: var(--bg-elev-2); } .dc-rail-link.is-active { background: var(--bg-elev-2); border-left-color: var(--accent); color: var(--fg-1); } .dc-rail-badge { font-family: var(--font-mono); font-weight: 500; font-size: 10px; color: var(--accent); } /* Sections. */ .dc-section { display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 88px; } .dc-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .dc-section-title { margin: 0; font: 500 19px var(--font-sans); letter-spacing: var(--tracking-snug); color: var(--fg-1); scroll-margin-top: 88px; } /* Mono caption utilities used throughout (clocks, section notes, card eyebrows). */ .dc-eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-3); } .dc-mono-note { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-mono); color: var(--fg-3); } .dc-mono-tiny { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-mono); color: var(--fg-3); } .dc-mono-tiny.is-accent { color: var(--accent); } .dc-spacer { flex: 1; min-width: 0; } /* ============================================================ Buttons ============================================================ */ .dc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-2); color: var(--fg-1); font: 400 13px var(--font-sans); padding: 9px 16px; cursor: pointer; white-space: nowrap; text-decoration: none; margin: 0; width: auto; transition: background var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out), color var(--dur-quick) var(--ease-out); } .dc-btn:hover { background: var(--bg-elev-2); border-color: var(--border-strong); color: var(--fg-1); } .dc-btn + .dc-btn { margin-left: 0; } .dc-btn-primary { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); padding: 9px 18px; font-weight: 600; box-shadow: var(--shadow-accent); } .dc-btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: var(--accent-contrast); } .dc-btn-quiet { color: var(--fg-2); } .dc-btn-quiet:hover { color: var(--fg-2); } .dc-btn-dashed { border-style: dashed; border-color: var(--border-strong); color: var(--fg-2); padding: 10px 18px; align-self: flex-start; } .dc-btn-dashed:hover { background: transparent; border-color: var(--accent-lo); color: var(--accent); } .dc-btn-faint { border-color: var(--border-faint); color: var(--fg-3); padding: 9px 14px; font-size: 12.5px; } .dc-btn-faint:hover { background: transparent; border-color: var(--border); color: var(--fg-2); } .dc-btn-sm { padding: 7px 14px; font-size: 12.5px; } /* Inline text "Edit" affordance. */ .dc-edit-link { background: none; border: none; border-bottom: 1px solid var(--border-strong); border-radius: 0; color: var(--fg-3); font: 400 12px var(--font-sans); padding: 2px 4px; cursor: pointer; margin: 0; width: auto; } .dc-edit-link:hover { background: none; color: var(--accent); } /* Focus: the design's --ring-focus for every dc control. */ .dc-btn:focus-visible, .dc-role-tab:focus-visible, .dc-rail-link:focus-visible, .dc-edit-link:focus-visible, .dc-eli-glyph:focus-visible, .dc-tick:focus-visible, .dc-link:focus-visible, .dc-link-quiet:focus-visible, .dc-header-nav a:focus-visible, .dc-brand:focus-visible { outline: none; box-shadow: var(--ring-focus); } /* ============================================================ Cards, pills, terms, notes ============================================================ */ .dc-card { border: 1px solid var(--border); border-radius: var(--r-3); background: var(--bg-elev-1); } .dc-card.is-hot { border-color: var(--accent-lo); box-shadow: 0 0 24px var(--accent-faint); } .dc-card.is-muted { border-color: var(--border-faint); box-shadow: none; } /* Quiet outline card with no fill (aside info cards). */ .dc-card-flat { border: 1px solid var(--border-faint); border-radius: var(--r-3); background: transparent; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; } .dc-card-flat-text { font: 400 13px/1.6 var(--font-sans); color: var(--fg-2); } /* Generic padded card body (aside cards, sent cards, bounty cards). */ .dc-card-pad { padding: 20px; display: flex; flex-direction: column; gap: 16px; } .dc-card-pad.dc-gap-sm { gap: 12px; } .dc-card-pad.dc-gap-md { gap: 14px; } /* Status pills. */ .dc-pill { display: inline-flex; align-items: center; border: 1px solid var(--border); color: var(--fg-2); background: transparent; border-radius: var(--r-full); padding: 4px 10px; font: 500 10.5px var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; } .dc-pill-hot { border-color: var(--accent-lo); color: var(--accent); background: var(--accent-faint); } .dc-pill-calm { border-color: var(--border); color: var(--fg-2); background: transparent; } .dc-pill-mute { border-color: var(--border-faint); color: var(--fg-3); background: transparent; } /* Lowercase tag (request purpose: "consultancy", "paid review"...). */ .dc-tag { display: inline-flex; align-items: center; border: 1px solid var(--border); color: var(--fg-2); border-radius: var(--r-full); padding: 3px 9px; font: 400 10.5px var(--font-mono); letter-spacing: 0.03em; white-space: nowrap; } /* "N new matches" pill on saved-search rows. */ .dc-pill-new { display: inline-flex; align-items: center; border: 1px solid var(--accent-lo); color: var(--accent); background: var(--accent-faint); border-radius: var(--r-full); padding: 4px 10px; font: 500 10.5px var(--font-mono); white-space: nowrap; } /* Request card (researcher inbox). */ .dc-request { border: 1px solid var(--border); border-radius: var(--r-3); background: var(--bg-elev-1); box-shadow: none; overflow: hidden; } .dc-request.is-hot { border-color: var(--accent-lo); box-shadow: 0 0 24px var(--accent-faint); } .dc-request-head { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--border-faint); background: var(--bg-inset); } .dc-request-org { font: 500 14px var(--font-sans); color: var(--fg-1); white-space: nowrap; } .dc-request-sector { font-size: 13px; color: var(--fg-3); white-space: nowrap; } .dc-request-clock { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-mono); color: var(--fg-3); white-space: nowrap; } .dc-request-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; } .dc-request-intro { display: flex; flex-direction: column; gap: 7px; } .dc-request-title { font: 500 15.5px var(--font-sans); color: var(--fg-1); } .dc-request-summary { font: 400 14px/1.6 var(--font-sans); color: var(--fg-2); } /* Terms grid (inset key/value strip inside cards). */ .dc-terms { display: flex; flex-wrap: wrap; gap: 10px 28px; padding: 14px 16px; border: 1px solid var(--border-faint); border-radius: var(--r-2); background: var(--bg-inset); } .dc-term { display: flex; flex-direction: column; gap: 3px; } .dc-term-k { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-3); } .dc-term-v { font: 500 13.5px var(--font-sans); color: var(--fg-1); } /* Amber left-border note (questions, decline reasons). */ .dc-note { border-left: 2px solid var(--accent); padding-left: 14px; font: 400 13.5px/1.6 var(--font-sans); color: var(--fg-2); } /* Action row at a card's foot. */ .dc-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .dc-foot-note { font-size: 12.5px; color: var(--fg-3); } /* ============================================================ Profile fieldset (label rail / content / edit rows) ============================================================ */ .dc-fieldset { border: 1px solid var(--border); border-radius: var(--r-3); background: var(--bg-elev-1); overflow: hidden; } .dc-field-row { display: flex; gap: 14px 20px; align-items: flex-start; padding: 18px 20px; border-bottom: 1px solid var(--border-faint); flex-wrap: wrap; } .dc-field-label { width: 128px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; } .dc-field-count { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: var(--tracking-mono); color: var(--fg-3); } .dc-field-main { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 8px; } .dc-field-main.dc-gap-md { gap: 10px; } .dc-field-text { font: 400 14px/1.6 var(--font-sans); color: var(--fg-2); } .dc-field-hint { font-size: 12px; color: var(--fg-3); } .dc-field-edit { flex-shrink: 0; } .dc-field-foot { display: flex; align-items: center; gap: 14px; padding: 14px 20px; background: var(--bg-inset); font-size: 12.5px; color: var(--fg-3); } /* Chips (skills, keywords). */ .dc-chips { display: flex; flex-wrap: wrap; gap: 6px; } .dc-chip { display: inline-flex; align-items: center; border: 1px solid var(--border); color: var(--fg-1); background: var(--bg-elev-2); font-size: 12.5px; padding: 5px 11px; border-radius: var(--r-full); } /* ============================================================ ELI slider row (profile-text level picker) ============================================================ */ .dc-eli { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .dc-eli-scale { display: flex; flex-direction: column; } .dc-eli-glyphs { display: flex; justify-content: space-between; } .dc-eli-glyph { display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 2px 4px; width: 40px; border-radius: 6px; margin: 0; } .dc-eli-glyph:hover { background: var(--bg-elev-2); } .dc-eli-glyph svg { stroke: var(--fg-3); fill: none; } .dc-eli-glyph.is-active svg, .dc-eli-glyph[aria-pressed="true"] svg { stroke: var(--accent); } .dc-eli-slider { width: 196px; accent-color: var(--accent); margin: 3px 2px 0; cursor: pointer; } /* Production wording next to the slider: a static "Explain like I'm" lead-in followed by the per-level caption (P32.A11-R4a). */ .dc-eli-caption { display: inline-flex; align-items: baseline; gap: 6px; } .dc-eli-lead { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: var(--tracking-mono); color: var(--fg-3); } .dc-eli-hint { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: var(--tracking-mono); color: var(--accent); } /* ============================================================ Meter (FoU-bisyssla hours bar). Width comes from a .dc-pct-* step class because the CSP forbids style attributes. ============================================================ */ .dc-meter { height: 6px; border-radius: var(--r-full); background: var(--bg-elev-3); overflow: hidden; } .dc-meter-fill { height: 100%; background: var(--accent); width: 0; } .dc-pct-0 { width: 0%; } .dc-pct-5 { width: 5%; } .dc-pct-10 { width: 10%; } .dc-pct-15 { width: 15%; } .dc-pct-20 { width: 20%; } .dc-pct-25 { width: 25%; } .dc-pct-30 { width: 30%; } .dc-pct-35 { width: 35%; } .dc-pct-40 { width: 40%; } .dc-pct-45 { width: 45%; } .dc-pct-50 { width: 50%; } .dc-pct-55 { width: 55%; } .dc-pct-60 { width: 60%; } .dc-pct-65 { width: 65%; } .dc-pct-70 { width: 70%; } .dc-pct-75 { width: 75%; } .dc-pct-80 { width: 80%; } .dc-pct-85 { width: 85%; } .dc-pct-90 { width: 90%; } .dc-pct-95 { width: 95%; } .dc-pct-100 { width: 100%; } /* ============================================================ Aside rails: key/value rows, who-sees-what matrix ============================================================ */ .dc-kv-list { display: flex; flex-direction: column; gap: 12px; } .dc-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .dc-kv-k { font-size: 13px; color: var(--fg-3); } .dc-kv-v { font: 500 13px var(--font-sans); color: var(--fg-1); text-align: right; } .dc-aside-note { font-size: 12px; color: var(--fg-3); line-height: 1.5; } .dc-meter-block { display: flex; flex-direction: column; gap: 7px; } /* Who-sees-what preview card. */ .dc-vis-preview { border: 1px solid var(--border-faint); border-radius: var(--r-2); background: var(--bg-inset); padding: 14px; display: flex; gap: 12px; align-items: flex-start; } .dc-vis-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .dc-vis-idrow { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .dc-vis-name { font: 500 13.5px var(--font-sans); color: var(--fg-1); } .dc-vis-caption { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: var(--tracking-mono); color: var(--fg-4); } .dc-vis-text { font: 400 12.5px/1.5 var(--font-sans); color: var(--fg-2); } /* Tier rows with level ticks. Prototype-only (labs/dc-foundation, DEBUG builds): P32.A19 i4 scoped these under .dc-vis-tiers so they cannot reach the shipped "Who sees what" table, whose rows are real . */ .dc-vis-tiers { display: flex; flex-direction: column; gap: 8px; } .dc-vis-tiers .dc-vis-row { display: flex; align-items: center; gap: 10px; } .dc-vis-tiers .dc-vis-who { width: 86px; flex-shrink: 0; } .dc-vis-who { width: 22%; text-align: left; font: 400 12.5px/1.4 var(--font-sans); color: var(--fg-1); } .dc-vis-ticks { display: flex; gap: 3px; } .dc-tick { width: 16px; height: 16px; border-radius: var(--r-1); display: inline-flex; align-items: center; justify-content: center; font: 500 8.5px var(--font-mono); background: transparent; border: 1px solid var(--border-faint); color: var(--fg-4); cursor: default; padding: 0; margin: 0; } .dc-tick.is-on { background: var(--accent-faint); border-color: var(--accent-lo); color: var(--accent); cursor: pointer; } .dc-tick.is-selected { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); cursor: pointer; } .dc-tick:hover { background: transparent; } .dc-tick.is-on:hover { background: var(--accent-faint); } .dc-tick.is-selected:hover { background: var(--accent); } .dc-vis-tier-name { width: 24%; font: 400 12px/1.4 var(--font-sans); color: var(--fg-2); } .dc-vis-tier-name.is-hidden { color: var(--fg-2); } .dc-vis-tier-name.is-shown { color: var(--accent); } /* ============================================================ Seeker surface: overview cards, sent requests, step tracker, bounty cards, saved searches, shortlists, stats ============================================================ */ /* Overview stat cards. */ .dc-stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; } .dc-stat-card { border: 1px solid var(--border); border-radius: var(--r-3); background: var(--bg-elev-1); padding: 16px 18px; display: flex; flex-direction: column; gap: 5px; } .dc-stat-card.is-hot { border-color: var(--accent-lo); } .dc-stat-value { font: 500 15px var(--font-sans); color: var(--fg-1); } .dc-stat-card.is-hot .dc-stat-value { color: var(--accent); } /* Sent-request card. */ .dc-sent { border: 1px solid var(--border); border-radius: var(--r-3); background: var(--bg-elev-1); padding: 20px; display: flex; flex-direction: column; gap: 16px; box-shadow: none; } .dc-sent.is-hot { border-color: var(--accent-lo); box-shadow: 0 0 24px var(--accent-faint); } .dc-sent-head { display: flex; gap: 14px; align-items: flex-start; } .dc-sent-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .dc-sent-idrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .dc-sent-who { font: 500 15.5px var(--font-sans); color: var(--fg-1); } .dc-sent-what { font-size: 13px; color: var(--fg-3); } .dc-sent-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex-shrink: 0; } /* Step tracker (sent -> researcher replies -> terms agreed -> work starts). */ .dc-steps { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } .dc-step { display: flex; align-items: center; gap: 7px; } .dc-step-dot { width: 9px; height: 9px; border-radius: var(--r-full); background: transparent; border: 1px solid var(--border-strong); box-sizing: border-box; flex-shrink: 0; } .dc-step.is-done .dc-step-dot { background: var(--accent); border-color: var(--accent); } .dc-step-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-mono); color: var(--fg-3); white-space: nowrap; } .dc-step.is-done .dc-step-label { color: var(--fg-1); } .dc-step-line { width: 18px; height: 1px; background: var(--border-faint); } .dc-step-line.is-done { background: var(--accent-lo); } /* Bounty / open-call card. */ .dc-bounty { border: 1px solid var(--border); border-radius: var(--r-3); background: var(--bg-elev-1); padding: 20px; display: flex; flex-direction: column; gap: 14px; } .dc-bounty.is-muted { border-color: var(--border-faint); } .dc-bounty-head { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .dc-bounty-main { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; } .dc-bounty-title { font: 500 15.5px var(--font-sans); color: var(--fg-1); } .dc-bounty-meta { font-size: 13px; color: var(--fg-3); } .dc-bounty-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* Face pile (respondent monograms). */ .dc-facepile { display: flex; gap: 5px; align-items: center; } .dc-facepile-extra { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-mono); color: var(--fg-3); margin-left: 3px; } /* Saved searches list. */ .dc-list { border: 1px solid var(--border); border-radius: var(--r-3); background: var(--bg-elev-1); overflow: hidden; } .dc-list-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border-faint); flex-wrap: wrap; } .dc-list-row:last-child { border-bottom: none; } .dc-list-row:hover { background: var(--bg-elev-2); } .dc-list-main { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 3px; } .dc-list-q { font: 400 14px var(--font-sans); color: var(--fg-1); } /* Shortlist / bench cards. */ .dc-bench-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } .dc-bench { border: 1px solid var(--border); border-radius: var(--r-3); background: var(--bg-elev-1); padding: 18px; display: flex; flex-direction: column; gap: 14px; cursor: pointer; transition: background var(--dur-quick) var(--ease-out), border-color var(--dur-quick) var(--ease-out); } .dc-bench:hover { background: var(--bg-elev-2); border-color: var(--border-strong); } .dc-bench-id { display: flex; flex-direction: column; gap: 4px; } .dc-bench-name { font: 500 14.5px var(--font-sans); color: var(--fg-1); } .dc-bench-people { display: flex; gap: 6px; flex-wrap: wrap; } /* N4 (round-3 audit): masked chips carry "#" labels wider than the fixed avatar circle, so adjacent chips' labels collided. In the pile contexts the chip grows into a pill around its label instead. */ .dc-bench-people .dc-avatar, .dc-facepile .dc-avatar { width: auto; min-width: 26px; padding: 0 8px; } .dc-bench-disciplines { font-size: 12.5px; color: var(--fg-3); } /* ============================================================ Responsiveness + motion ============================================================ */ @media (max-width: 780px) { .dc-header { padding: 10px 16px; } main:has(> .dc-page) { padding: 0 16px 24px; } .dc-page-head { padding-top: 24px; } .dc-footer-inner { padding: 20px 16px 28px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } } /* ============================================================ === A03 additions === Researcher-home wiring helpers (P32.A03). Append-only: nothing above this marker is modified by lane A03. ============================================================ */ /* dl-based terms grid: strip UA dt/dd margins inside .dc-terms. */ dl.dc-terms { margin: 0; } .dc-terms dt, .dc-terms dd { margin: 0; } /* Eli level panels: one visible at a time (JS toggles [hidden]). */ .dc-eli-panel { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .dc-eli-panel[hidden] { display: none; } /* Inline ask/decline forms on request cards (no-JS friendly details). */ .dc-inline-form { display: inline-block; } .dc-inline-form > summary { list-style: none; display: inline-flex; } .dc-inline-form > summary::-webkit-details-marker { display: none; } .dc-inline-form-body { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--border-faint); border-radius: var(--r-2); background: var(--bg-inset); min-width: 260px; } .dc-inline-form-body textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--bg-elev-1); color: var(--fg-1); font: 400 13px/1.5 var(--font-sans); padding: 8px 10px; } /* Pre-claim workflow lists reuse the kv stack as ul/ol. */ ul.dc-kv-list, ol.dc-kv-list { list-style: none; margin: 0; padding: 0; } /* P32 r5: the kv value column right-aligns for aside key/value rails, but workflow lists (ul/ol reuse) are full-width step text - a wrapped step must not right-align its continuation lines. */ ul.dc-kv-list .dc-kv, ol.dc-kv-list .dc-kv { justify-content: flex-start; } ul.dc-kv-list .dc-kv-v, ol.dc-kv-list .dc-kv-v { text-align: left; } /* ============================================================ === A19 additions === Routed portal IA (P32.A19 iteration 1): one-row header with a CSS-only account menu, the four-item route bar, the computed status strip, and the factual "Who sees what" table. Append-only: nothing above this marker is modified by lane A19. ============================================================ */ /* Screen-reader-only text (the visibility table states each cell's fact in words next to its glyph). */ .dc-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --- Header account cluster (CSS-only details/summary menu) --- */ .dc-account { position: relative; } .dc-account > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 6px; border-radius: var(--r-full); min-height: 44px; box-sizing: border-box; } .dc-account > summary::-webkit-details-marker { display: none; } .dc-account > summary:hover { background: var(--bg-elev-2); } .dc-account-summary-label { font-size: 13px; color: var(--fg-2); } .dc-account-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: flex; flex-direction: column; min-width: 232px; padding: 6px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--bg-elev-2); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28); } .dc-account-menu a { display: block; padding: 10px 12px; border-radius: var(--r-1); border-bottom: none; font-size: 13px; color: var(--fg-2); text-decoration: none; white-space: nowrap; } .dc-account-menu a:hover { background: var(--bg-elev-3); color: var(--fg-1); } /* Menu duplicates of the header's product links: hidden while the header row shows them, revealed when that row collapses. */ .dc-account-menu-compact { display: none; } /* --- Route bar: the canonical portal navigation --- */ .dc-route-bar { border-bottom: 1px solid var(--border-faint); background: var(--bg-elev-1); } .dc-route-bar-inner { max-width: 1240px; margin: 0 auto; padding: 0 40px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; } .dc-route-bar-inner::-webkit-scrollbar { display: none; } .dc-route-link { display: inline-flex; align-items: center; padding: 12px 14px; border-bottom: 2px solid transparent; color: var(--fg-3); font: 400 13px var(--font-sans); text-decoration: none; white-space: nowrap; } .dc-route-link:hover { color: var(--fg-1); } .dc-route-link.is-active { color: var(--fg-1); border-bottom-color: var(--accent); } .dc-route-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* --- Computed status strip --- */ .dc-status-strip { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--border-faint); border-radius: var(--r-2); background: var(--bg-inset); } .dc-status-chips { display: flex; flex-wrap: wrap; gap: 8px; } .dc-status-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--r-full); border: 1px solid var(--border); font: 500 12px var(--font-sans); color: var(--fg-2); } .dc-status-chip-waiting { border-color: var(--accent-lo); background: var(--accent-faint); color: var(--accent); } .dc-status-line { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; font: 400 13.5px/1.6 var(--font-sans); color: var(--fg-2); } .dc-status-clause + .dc-status-clause::before { content: "ยท "; color: var(--fg-4); } .dc-next-action { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-top: 14px; } /* --- Overview excerpt card --- */ .dc-overview-terms { border-top: 1px solid var(--border-faint); padding-top: 14px; } /* --- "Who sees what" as a factual table (no clickable tiers) --- P32.A19 i4 (opus 3): a REAL table on a fixed layout. The flex version could not align a column, so every cell repeated its own header to stay readable and no two rows lined up. Level names live in the header row only, `table-layout: fixed` does the aligning, and a cell carries one of three marks plus its screen-reader sentence. */ .dc-vis-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .dc-vis-table { width: 100%; min-width: 520px; table-layout: fixed; border-collapse: collapse; } .dc-vis-table th, .dc-vis-table td { padding: 8px 6px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--border-faint); } .dc-vis-table thead th { border-bottom: 1px solid var(--border); } .dc-vis-table tbody tr:last-child th, .dc-vis-table tbody tr:last-child td { border-bottom: none; } .dc-vis-level { width: 13%; font: 500 11.5px/1.35 var(--font-sans); color: var(--fg-2); } .dc-vis-cell { color: var(--fg-2); } .dc-vis-cell-mark { font: 500 14px var(--font-sans); } .dc-vis-cell-reads { color: var(--accent); } .dc-vis-cell-fallback { color: var(--fg-2); background: var(--accent-faint); } .dc-vis-cell-closed { color: var(--fg-3); } .dc-vis-overview { margin: 0; font: 500 13.5px/1.6 var(--font-sans); color: var(--fg-1); } .dc-vis-legend { display: block; } /* --- 390px: the iteration-1 components --- */ @media (max-width: 480px) { .dc-header { gap: 8px 12px; } /* Search and Engagements collapse out of the header row; the account menu carries every remaining destination. Signed-out chrome (Log in / Sign up) keeps its row - there is no menu to collapse into. */ .dc-header-nav-app { display: none; } .dc-account-menu-compact { display: block; } .dc-account-summary-label { display: none; } .dc-route-bar-inner { padding: 0 16px; } .dc-route-link { padding: 12px 10px; font-size: 12.5px; } /* Clauses stack; the request chip is already rendered first. */ .dc-status-line { flex-direction: column; gap: 6px; } .dc-status-clause + .dc-status-clause::before { content: ""; } .dc-eli-slider { width: 100%; } .dc-eli-glyph { min-width: 44px; min-height: 44px; } .dc-vis-table { min-width: 460px; } } /* ============================================================ === A19 iteration 2 additions === The profile workspace (`/portal/profile/`): named reading-level rows with per-language state, one editor card, term chips whose hidden state is always reachable, and the matched-record zone. Append-only: nothing above this marker is modified. ============================================================ */ /* --- Reading-level navigation: five named rows --- */ .dc-level-rows { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; } .dc-level-row { display: flex; align-items: stretch; flex-wrap: wrap; gap: 6px; padding: 8px 10px; border: 1px solid var(--border-faint); border-radius: var(--r-2); background: var(--bg-elev-1); } .dc-level-row.is-selected { border-color: var(--accent-lo); background: var(--accent-faint); } .dc-level-row-name { display: flex; flex-direction: column; justify-content: center; gap: 2px; flex: 1 1 200px; min-width: 0; min-height: 44px; padding: 4px 6px; border-bottom: none; text-decoration: none; color: var(--fg-1); } .dc-level-row-title { font: 500 14px var(--font-sans); color: var(--fg-1); } .dc-level-row-caption { font: 400 12px var(--font-sans); color: var(--fg-4); } .dc-level-row-langs { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 300px; min-width: 0; } .dc-level-lang { display: flex; flex-direction: column; justify-content: center; gap: 2px; flex: 1 1 150px; min-width: 0; min-height: 44px; padding: 6px 10px; border: 1px solid var(--border-faint); border-radius: var(--r-1); border-bottom: 1px solid var(--border-faint); background: var(--bg-elev-2); text-decoration: none; } .dc-level-lang.is-selected { border-color: var(--accent); } .dc-level-lang:hover { border-color: var(--accent-lo); } .dc-level-lang-name { font: 500 12px var(--font-sans); color: var(--fg-2); } .dc-level-state { font: 400 11.5px/1.4 var(--font-sans); color: var(--fg-4); } .dc-level-state-edited { color: var(--accent); } .dc-level-state-pending { color: var(--fg-3); } /* --- The one editor card --- */ .dc-audience { margin: 0 0 4px; font: 400 13.5px/1.6 var(--font-sans); color: var(--fg-2); } .dc-disclosure { border-left: 2px solid var(--border); padding-left: 10px; } /* --- Term chips: read state --- */ .dc-chip-own .dc-chip-note, .dc-chip-hidden .dc-chip-note { margin-left: 6px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: var(--tracking-mono); color: var(--fg-4); } .dc-chip-hidden { border-style: dashed; color: var(--fg-4); } .dc-chips-hidden { margin-top: 6px; } /* --- Term chips: edit mode --- The control is still the hide-flag checkbox the batch form has always posted; it is only drawn as a chip. Its state is spelled out in words next to it, never by a strikethrough alone. */ .dc-chip-edit-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; padding: 0; list-style: none; } .dc-chip-edit { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--bg-elev-2); cursor: pointer; font: 400 13px var(--font-sans); color: var(--fg-1); } .dc-chip-edit input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .dc-chip-edit:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } .dc-chip-edit-x { font: 500 14px var(--font-mono); color: var(--fg-4); } .dc-chip-edit-on, .dc-chip-edit-off { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: var(--tracking-mono); color: var(--fg-3); } /* Only the state that is actually true is shown. */ .dc-chip-edit-on, .dc-chip-edit input:checked ~ .dc-chip-edit-off { display: none; } .dc-chip-edit input:checked ~ .dc-chip-edit-on { display: inline; } .dc-chip-edit input:checked ~ .dc-chip-edit-term { color: var(--fg-4); } .dc-chip-edit.is-hidden { border-style: dashed; } /* --- Section edit mode (server-decided open state) --- */ .dc-section-edit { margin-top: 10px; } .dc-section-edit-summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font: 500 13px var(--font-sans); color: var(--accent); } /* --- The matched record zone --- */ .dc-record-lead { margin: 0 0 12px; font: 400 14px/1.65 var(--font-sans); color: var(--fg-2); } /* --- 390px: the workspace components --- */ @media (max-width: 480px) { .dc-level-row { flex-direction: column; } .dc-level-row-name, .dc-level-row-langs, .dc-level-lang { flex: 1 1 auto; width: 100%; box-sizing: border-box; } .dc-level-row-langs { flex-direction: column; } .dc-workspace textarea, .dc-workspace input[type="text"], .dc-workspace select { width: 100%; box-sizing: border-box; } .dc-workspace .dc-actions .dc-btn { width: 100%; justify-content: center; } .dc-chip-edit-list { gap: 6px; } .dc-chip-edit { max-width: 100%; } .dc-chip-edit-term { overflow-wrap: anywhere; } } /* ============================================================ === A19 iteration 3 additions === Honest previews of your own page (the two "view of me" links and the copy-a-link control), the owner-only banner on the portal detail page, and the 390px pass across all three iterations. ============================================================ */ /* --- The two "view of me" links, one per destination --- */ .dc-preview-links { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; } .dc-preview-link { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; } /* --- Copy-a-link control (input is the control, button is the enhancement; see portal/copy-link.js) --- */ .dc-copy-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; min-width: 0; } .dc-copy-link-input { flex: 1 1 220px; min-width: 0; box-sizing: border-box; padding: 7px 10px; border: 1px solid var(--border-faint); border-radius: var(--r-1); background: var(--bg-inset); color: var(--fg-2); font: 400 12.5px var(--font-mono); } .dc-copy-link-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* Hidden until copy-link.js enhances the block: a no-JS reader is never offered a button that cannot do anything. */ .dc-copy-link-btn { display: none; } .dc-copy-link.is-enhanced .dc-copy-link-btn { display: inline-flex; } .dc-copy-link-status { font: 400 12.5px var(--font-sans); color: var(--fg-3); flex: 1 1 100%; } /* --- The owner-only banner on `/portal/researchers//` --- */ .dc-profile .dc-banner.dc-owner-banner { flex-direction: row; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; } /* --- 390px: the remaining components across all three iterations --- */ @media (max-width: 480px) { /* The excerpt-card slider row: a real touch target, full width. */ .dc-eli-slider { min-height: 44px; } .dc-eli-scale { flex: 1 1 100%; min-width: 0; } .dc-eli-glyphs { gap: 2px; } /* "Who sees what" keeps its true table shape and scrolls INSIDE its own container; the page itself never scrolls sideways. */ .dc-vis-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .dc-vis-who { width: 72px; } /* Preview links and their copy controls stack full-width. */ .dc-copy-link-input { flex: 1 1 100%; } .dc-copy-link .dc-copy-link-btn { width: 100%; justify-content: center; min-height: 44px; } .dc-preview-link .dc-link { overflow-wrap: anywhere; } } /* ============================================================ === A19 iteration 4 additions === One status truth per reading level, the rebuilt "Who sees what" table's surrounding copy, the register pass (kickers in sans, not monospace) and the AA contrast pass on pale secondary text. ============================================================ */ /* --- Register: kickers are small-caps SANS, not console output --- Round-2 finding 20 (opus) / 7 (codex): monospace ALL-CAPS labels on nearly every block read as an internal tool. The brand fonts are unchanged and no asset is added - only the family these labels resolve to. Monospace stays for genuinely technical metadata (the copy-a-link input, revision digests). */ .dc-eyebrow { font-family: var(--font-sans); font-weight: 600; font-size: 11px; letter-spacing: 0.06em; color: var(--fg-2); } .dc-mono-note { font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.02em; color: var(--fg-2); } .dc-eli-lead { font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: normal; color: var(--fg-2); } .dc-eli-hint { font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: normal; color: var(--accent); } /* --- AA contrast pass on the pale secondary text (codex 7) --- Every one of these carries meaning a reader has to be able to read: status chips, hints, notes and hidden-chip labels. --fg-4 is a border-weight tone and never passes at these sizes. */ .dc-field-hint, .dc-aside-note, .dc-foot-note { color: var(--fg-2); } .dc-level-state, .dc-level-row-caption, .dc-chip-own .dc-chip-note, .dc-chip-hidden .dc-chip-note, .dc-chip-edit-on, .dc-chip-edit-off, .dc-chip-edit-x { color: var(--fg-2); } .dc-level-state-pending { color: var(--fg-2); } .dc-chip-edit-on, .dc-chip-edit-off, .dc-chip-own .dc-chip-note, .dc-chip-hidden .dc-chip-note { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.02em; } /* --- One state line per reading-level editor card --- */ .dc-level-state-line { margin: 0 0 6px; font: 400 13.5px/1.6 var(--font-sans); color: var(--fg-1); } .dc-level-state-line.dc-level-state-pending { color: var(--fg-1); } /* The provenance sentence, set apart from the hints around it. */ .dc-provenance { border-left: 2px solid var(--border); padding-left: 10px; } /* --- Overview status card (heading + real list + NEXT inside) --- */ .dc-status-card .dc-section-title { margin-bottom: 4px; } .dc-status-list { margin: 8px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font: 400 13.5px/1.6 var(--font-sans); color: var(--fg-2); } .dc-status-list li { list-style: disc; } /* NEXT sits inside the card now, with real space above it - it used to float between two sections and read as a control for the one below (opus 18). */ .dc-status-card .dc-next-action { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-faint); } /* --- Preview links: one primary proof, one demoted owner link --- */ .dc-preview-link-primary { padding-bottom: 12px; border-bottom: 1px solid var(--border-faint); width: 100%; } .dc-preview-url { overflow-wrap: anywhere; } /* --- The confirmation's second line (the correction offer) --- */ .dc-saved-offer { margin: 0 0 10px; } /* --- Add-your-own inputs: single-term width, numbered labels --- */ .dc-addition-slots { display: flex; flex-wrap: wrap; gap: 10px 14px; margin: 4px 0 8px; } .dc-addition-slot { display: flex; flex-direction: column; gap: 4px; flex: 0 1 220px; min-width: 0; } .dc-addition-slot input[type="text"] { width: 100%; box-sizing: border-box; } /* --- The matched-record zone: one visually distinct container --- Round-2 finding 9 (opus): "how you're presented" and "what search matches on" were identical white cards in one stack, so nothing told the eye where the owner's control ends. */ .dc-record-zone { border-left: 3px solid var(--border-strong); border-radius: var(--r-2); background: var(--bg-inset); padding: 16px 18px; } .dc-record-zone .dc-section-head { margin-bottom: 2px; } /* --- The owner banner reads as one sentence, not three flex items --- The 4px flex gap rendered as "see Who sees what ." (opus 19). */ .dc-owner-banner-line { margin: 0; } /* --- Hidden chips are the ONE restore affordance (opus 15) --- */ a.dc-chip-hidden { text-decoration: none; cursor: pointer; } a.dc-chip-hidden:hover, a.dc-chip-hidden:focus-visible { border-color: var(--accent); color: var(--fg-1); } /* --- 390px: the iteration-4 components --- */ @media (max-width: 480px) { .dc-addition-slot { flex: 1 1 100%; } .dc-record-zone { padding: 14px 12px; } } /* ============================================================ === A19 iteration 5 additions === Erik's live run-2 feedback: the first-contact welcome card, the "Explain like I'm [level]" picker and its explainer, the coming-soon generate control, and the two convergent vote-round fixes (the boundary sentence where typing starts, one plain sentence per "Who sees what" row). Append-only: nothing above this marker is modified. ============================================================ */ /* --- The first-contact welcome card --- A banner-style card, never a modal: it sits in the flow at the top of the Overview and can be left alone. Dismissal is a class on , stamped by welcome-card.js before paint. */ .dc-welcome { display: flex; flex-direction: column; gap: 12px; border-color: var(--accent-lo); background: var(--accent-faint); margin-bottom: var(--s-5); } :root.portal-welcome-dismissed .dc-welcome { display: none; } .dc-welcome-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px 14px; } /* The dismiss control ships hidden and is revealed only by the enhancement, so a no-JS reader never meets a dead button. */ .dc-welcome-dismiss { display: none; } .dc-welcome.is-enhanced .dc-welcome-dismiss { display: inline-flex; } .dc-welcome-lead { margin: 0; font: 400 15px/1.6 var(--font-sans); color: var(--fg-1); } .dc-welcome-steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 20px; } .dc-welcome-step { list-style: decimal; } .dc-welcome-step-title { display: inline-block; font-weight: 500; } .dc-welcome-step .dc-field-hint { display: block; } .dc-welcome-time { display: block; } /* --- The canonical five-style explainer --- */ .dc-elix-explainer { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--border-faint); border-radius: var(--r-2); background: var(--bg-elev-1); } .dc-elix-explainer-lead { margin: 0; font: 500 13px/1.5 var(--font-sans); color: var(--fg-1); } .dc-elix-styles { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; } .dc-elix-style { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; min-width: 0; } .dc-elix-style-glyph svg { width: 20px; height: 20px; color: var(--accent); } .dc-elix-style-text { font: 400 13px/1.5 var(--font-sans); color: var(--fg-2); } .dc-elix-style-name { font-weight: 500; color: var(--fg-1); } .dc-elix-explainer-disclosure > summary { cursor: pointer; padding: 4px 0; font: 500 13px/1.5 var(--font-sans); color: var(--fg-2); } .dc-elix-explainer-disclosure[open] > summary { margin-bottom: 8px; } /* --- "Explain like I'm [level]": the phrase IS the control --- The phrase wraps as a unit; the menu is a details/summary disclosure whose items are real `?level=` links, so the no-JS path is a plain server-side selection. */ .dc-elix-picker { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; } .dc-elix-picker-lead { font: 500 14px/1.5 var(--font-sans); color: var(--fg-1); } .dc-elix-picker-menu { position: relative; } .dc-elix-picker-summary { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--bg-elev-1); cursor: pointer; list-style: none; } .dc-elix-picker-summary::-webkit-details-marker { display: none; } .dc-elix-picker-summary:hover, .dc-elix-picker-menu[open] > .dc-elix-picker-summary { border-color: var(--accent); } .dc-elix-picker-summary:focus-visible { outline: none; box-shadow: var(--ring-focus); } /* Only the active level's glyph is painted in the summary; the other four are rendered so the enhancement can swap without templating. */ .dc-elix-picker-glyph { display: none; align-items: center; } .dc-elix-picker-glyph.is-active { display: inline-flex; } .dc-elix-picker-glyph svg { width: 20px; height: 20px; color: var(--accent); } .dc-elix-picker-name { font: 500 14px/1.5 var(--font-sans); color: var(--accent); } .dc-elix-picker-caret { font-size: 11px; color: var(--fg-2); } .dc-elix-picker-panel { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; min-width: 280px; max-width: min(360px, calc(100vw - 48px)); display: flex; flex-direction: column; gap: 10px; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-2); background: var(--bg-elev-1); box-shadow: var(--shadow-2); } .dc-elix-picker-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; } .dc-elix-picker-option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-2); color: var(--fg-1); text-decoration: none; } .dc-elix-picker-option:hover, .dc-elix-picker-option:focus-visible { background: var(--accent-faint); } .dc-elix-picker-option.is-active { padding: 7px 9px; border: 1px solid var(--accent-lo); background: var(--accent-faint); } .dc-elix-picker-option-name { font: 500 13px/1.4 var(--font-sans); } .dc-elix-picker-option-gloss { font: 400 12px/1.4 var(--font-sans); color: var(--fg-2); } /* --- "Let Phinder generate", coming soon --- */ .dc-generate { margin-left: auto; } .dc-generate-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border-faint); border-radius: var(--r-full); background: var(--bg-elev-1); color: var(--fg-2); cursor: pointer; list-style: none; } .dc-generate-btn::-webkit-details-marker { display: none; } .dc-generate-btn:hover, .dc-generate[open] > .dc-generate-btn { border-color: var(--accent); color: var(--accent); } .dc-generate-btn:focus-visible { outline: none; box-shadow: var(--ring-focus); } .dc-generate-glyph svg { width: 18px; height: 18px; } .dc-generate-note { margin: 8px 0 0; padding: 10px 12px; max-width: 46ch; border: 1px solid var(--border-faint); border-radius: var(--r-2); background: var(--bg-inset); font: 400 13px/1.6 var(--font-sans); color: var(--fg-1); } /* --- The boundary sentence, where the typing happens --- */ .dc-boundary-note { display: block; border-left: 2px solid var(--border); padding-left: 10px; } /* --- One plain sentence per "Who sees what" row --- It rides in its own full-width row of the fixed-layout table, so the marks above it keep their column alignment exactly. */ .dc-vis-summary-row td.dc-vis-summary { padding: 0 6px 10px; border-bottom: 1px solid var(--border-faint); font: 400 12.5px/1.5 var(--font-sans); color: var(--fg-2); text-align: left; } /* --- 390px: the iteration-5 components --- */ @media (max-width: 480px) { /* The welcome card stacks; its dismiss control drops below the heading rather than squeezing it. */ .dc-welcome-head { flex-direction: column; align-items: flex-start; } .dc-welcome.is-enhanced .dc-welcome-dismiss { width: 100%; min-height: 44px; justify-content: center; } /* One style per line - glyph plus text does not fit two across. */ .dc-elix-style { flex: 1 1 100%; } /* The phrase wraps as a unit; the menu becomes full width. */ .dc-elix-picker { align-items: flex-start; } .dc-elix-picker-menu { width: 100%; } .dc-elix-picker-summary { box-sizing: border-box; width: 100%; min-height: 44px; } .dc-elix-picker-panel { box-sizing: border-box; min-width: 0; width: 100%; max-width: none; } .dc-generate-note { max-width: none; } } /* ============================================================ === A19 iteration 6: the obvious fixes === One level control, a menu that neither repeats itself nor covers the text it changes, a labelled generate control, a five-column explainer, and the AA/target pass on the smallest i5 text. ============================================================ */ /* --- The picker menu (opus 2, codex 5) --- In FLOW, not a popover: on the excerpt card the only thing below the trigger is the level text the menu changes, so an absolutely positioned panel could only land on top of it. Opening the disclosure pushes the text down instead, which is what a
does anyway. The panel is as wide as its widest row, so no row wraps. */ .dc-elix-picker { /* The phrase and its menu own the full row now that the menu is a block in flow rather than an overlay anchored to the trigger. */ align-items: flex-start; width: 100%; } .dc-elix-picker-menu { position: static; min-width: 0; } .dc-elix-picker-summary { min-height: 44px; } .dc-elix-picker-panel { position: static; z-index: auto; width: max-content; min-width: 0; max-width: 100%; margin-top: 8px; box-shadow: none; } /* One line per row: name, then its descriptor, neither wrapping. */ .dc-elix-picker-option { min-height: 44px; flex-wrap: nowrap; } .dc-elix-picker-option-name, .dc-elix-picker-option-gloss { white-space: nowrap; } .dc-elix-picker-option-name { font-size: 13.5px; } /* AA pass: the descriptor is meaning, not decoration (codex 6). */ .dc-elix-picker-option-gloss { font-size: 13px; color: var(--fg-2); } /* --- The five styles read as five peers (opus 6, codex 8) --- Flex-wrap laid four across at desktop and stranded "An old-timer" alone on a second row beside 1000px of dead space. A grid cannot orphan the fifth: five equal columns from 1200px, and a balanced auto-fit below it. */ .dc-elix-styles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 18px; } .dc-elix-style { flex: none; } @media (min-width: 1200px) { .dc-elix-styles { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .dc-elix-explainer-disclosure > summary { min-height: 44px; display: flex; align-items: center; font-size: 13.5px; color: var(--fg-2); } /* --- The generate control is labelled and visibly unavailable --- */ .dc-generate { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; } .dc-generate-btn { width: auto; height: auto; min-height: 44px; gap: 8px; padding: 6px 14px; border-radius: var(--r-full); font: 500 13px/1.4 var(--font-sans); } /* A disabled control must LOOK disabled, and must not offer a hover affordance it cannot honour. */ .dc-generate-btn[disabled] { cursor: not-allowed; opacity: 0.75; } .dc-generate-btn[disabled]:hover { border-color: var(--border-faint); color: var(--fg-2); } .dc-generate-label { white-space: nowrap; } .dc-generate-pill { flex: none; padding: 2px 8px; border: 1px solid var(--border-faint); border-radius: var(--r-full); background: var(--bg-inset); color: var(--fg-2); font: 500 11.5px/1.4 var(--font-sans); letter-spacing: 0.02em; white-space: nowrap; } .dc-generate-note { margin: 0; max-width: 42ch; text-align: left; font-size: 12.5px; } /* --- Counters read as words, not as arithmetic in console type --- */ .dc-field-count { font-family: var(--font-sans); font-size: 12px; letter-spacing: normal; color: var(--fg-2); } /* --- The live-listing block on the Overview (opus 1, codex 2) --- */ .dc-preview-link-primary .dc-copy-link { margin: 2px 0; } @media (max-width: 480px) { .dc-elix-picker-panel { width: 100%; max-width: none; } /* Nowrap would force a horizontal scroll at 390px; the rows may wrap here, where there is no width to hold them on one line. */ .dc-elix-picker-option { flex-wrap: wrap; } .dc-elix-picker-option-name, .dc-elix-picker-option-gloss { white-space: normal; } .dc-generate { align-items: stretch; width: 100%; } .dc-generate-btn { width: 100%; justify-content: center; } .dc-generate-label { white-space: normal; } }