:root { color-scheme: light; /* Surfaces - warm paper, never sterile pure-white. Separation comes from hairline rules, not drop shadows. */ --page: #f1efe8; --card: #fbfaf6; --surface-2: #efece2; --ink: #1b1d18; --ink-soft: #44473d; --muted: #71746a; --line: #e0dccf; --line-strong: #cac5b5; /* Accent - deep botanical green, used with restraint. */ --accent: #1f6f4a; --accent-dark: #154a32; --accent-soft: #e3ede4; --accent-rgb: 31, 111, 74; --on-accent: #ffffff; --warm: #a4661a; --green: #1f6f4a; --danger: #a83b3a; --info: #2f6f8f; --violet: #5a5da6; /* Type - editorial serif for display, grotesk for UI, mono for data/IDs. */ --font-display: "Spectral", Georgia, "Times New Roman", serif; --font-ui: "Hanken Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --radius: 6px; --radius-sm: 4px; /* Resting elevation is intentionally flat; only popovers/overlays get a shadow. */ --shadow: none; --shadow-pop: 0 1px 2px rgba(20, 24, 18, 0.06), 0 10px 28px rgba(20, 24, 18, 0.10); } [data-theme="dark"] { color-scheme: dark; /* Neutral cool-slate surfaces (no green cast) so the green reads as a deliberate accent rather than a Matrix-style green-on-green terminal. */ --page: #14171c; --card: #1c2026; --surface-2: #252a31; --ink: #e7e9ee; --ink-soft: #abb1bb; --muted: #7d838d; --line: #2b313a; --line-strong: #3c434e; /* Softer, less neon green; only accent-soft keeps a faint green tint. */ --accent: #4ca583; --accent-dark: #7ac6a3; --accent-soft: #1a2620; --accent-rgb: 76, 165, 131; --on-accent: #0c1611; --warm: #d2a154; --green: #4ca583; --danger: #df6b67; --info: #6fb8d6; --violet: #9a9ce0; --shadow: none; --shadow-pop: 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 32px rgba(0, 0, 0, 0.55); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { height: 100%; /* Hide the document-level scrollbar AND prevent any horizontal overflow. */ scrollbar-width: none; -ms-overflow-style: none; overflow-x: hidden; } html::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } body { font-family: var(--font-ui); background: var(--page); color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; min-height: 100dvh; /* Lock body width to the full viewport so it never changes when content overflows. Combined with the hidden scrollbar above, the layout's centering no longer depends on whether content is long or short. */ width: 100vw; max-width: 100%; display: flex; flex-direction: column; scrollbar-width: none; /* `clip` prevents horizontal overflow WITHOUT making a scroll container, so `position: sticky` on the topbar keeps working on the document-scrolling pages. `hidden` here would force overflow-y:auto and break the sticky header. */ overflow-x: clip; } body::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; } /* Ask page: lock body to the viewport so the composer is always pinned. */ body:has(.ask-layout) { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Topbar */ .topbar { display: flex; align-items: center; gap: 24px; padding: 14px 28px; background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; flex-shrink: 0; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); text-decoration: none; } .brand:hover { text-decoration: none; } .brand-mark { width: 26px; height: 26px; color: var(--accent); display: grid; place-items: center; } .brand-mark svg { width: 24px; height: 24px; display: block; } .brand-name { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; display: inline-flex; align-items: baseline; gap: 6px; color: var(--ink); } .brand-name-tag { font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--ink-soft); } .topnav { display: flex; gap: 2px; margin-left: 16px; } .navlink { padding: 7px 12px; border-radius: var(--radius-sm); color: var(--ink-soft); font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; transition: background 0.12s, color 0.12s; } .navlink:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; } .navlink.active { color: var(--accent-dark); background: var(--accent-soft); } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; } .theme-toggle { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink-soft); cursor: pointer; transition: border-color 0.12s, color 0.12s; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent-dark); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .theme-icon-moon { display: none; } [data-theme="dark"] .theme-toggle .theme-icon-sun { display: none; } [data-theme="dark"] .theme-toggle .theme-icon-moon { display: block; } .lang-switch { display: inline-flex; align-items: stretch; height: 34px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--card); } .lang-btn { display: inline-flex; align-items: center; border: 0; background: transparent; color: var(--muted); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 0 10px; cursor: pointer; transition: background 0.12s, color 0.12s; } .lang-btn + .lang-btn { border-left: 1px solid var(--line); } .lang-btn:hover { color: var(--ink); background: var(--surface-2); } .lang-btn.active { background: var(--accent-soft); color: var(--accent-dark); } .coverage-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); font-size: 11.5px; font-family: var(--font-mono); color: var(--muted); cursor: help; } .coverage-pill .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--green); transition: background 0.15s; } .coverage-pill .dot.warn { background: var(--warm); } /* Layouts */ .ask-layout { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; } .ask-scroll { flex: 1 1 auto; overflow-y: auto; padding: 32px 48px 24px; scroll-behavior: smooth; min-height: 0; } .browse-layout, .profile-layout { /* Anchor width to the viewport (100vw) instead of the parent so the layout width is identical regardless of page content length, scrollbar state, or any quirk in body sizing. Capped at 1180px on wide screens. */ width: min(1180px, 100vw); margin-inline: auto; padding: 32px 40px 64px; box-sizing: border-box; } .control { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; font: inherit; font-size: 14px; background: var(--card); color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s; } .control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15); } .control::placeholder { color: var(--muted); } .ghost-button { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; cursor: pointer; } .ghost-button:hover { border-color: var(--accent); color: var(--accent-dark); text-decoration: none; } .status { margin: 10px 0 0; color: var(--muted); font-size: 13px; } /* Composer (chat-style input, pinned at the bottom of the main column) */ .composer-wrap { flex-shrink: 0; padding: 14px 48px 22px; background: var(--page); position: relative; z-index: 5; } .composer-toolbar { max-width: 880px; margin: 0 auto 8px; display: flex; justify-content: flex-end; } .mode-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); font-size: 12px; color: var(--muted); transition: border-color 0.12s, color 0.12s; } .mode-pill:hover, .mode-pill:focus-within { border-color: var(--accent); color: var(--accent-dark); } .mode-pill .mode-pill-label { text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; font-weight: 700; } .mode-pill select { appearance: none; -webkit-appearance: none; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7686' d='M5 6L0 0h10z'/%3E%3C/svg%3E") no-repeat right 8px center; padding: 2px 22px 2px 4px; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink); cursor: pointer; outline: none; } .mode-pill select:focus { outline: none; } .composer-wrap::before { content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 28px; background: linear-gradient(to top, var(--page), rgba(246, 248, 251, 0)); pointer-events: none; } .composer-card { display: flex; align-items: flex-end; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 8px 8px 16px; box-shadow: 0 4px 18px rgba(15, 33, 46, 0.06), 0 1px 2px rgba(15, 33, 46, 0.04); max-width: 880px; margin: 0 auto; transition: border-color 0.15s, box-shadow 0.15s; } .composer-card:focus-within { border-color: var(--accent); box-shadow: 0 6px 22px rgba(var(--accent-rgb), 0.12), 0 0 0 3px rgba(var(--accent-rgb), 0.12); } .composer-card textarea { flex: 1 1 auto; border: 0; resize: none; outline: none; font: inherit; font-size: 15px; line-height: 1.55; padding: 9px 4px; background: transparent; color: var(--ink); min-height: 22px; max-height: 220px; overflow-y: auto; } .composer-card textarea::placeholder { color: var(--muted); } .send-button { flex-shrink: 0; width: 38px; height: 38px; border-radius: 10px; border: 0; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; cursor: pointer; transition: background 0.15s, transform 0.1s, opacity 0.15s; margin: 0; padding: 0; position: relative; } .send-button:hover:not(:disabled) { background: var(--accent-dark); } .send-button:active:not(:disabled) { transform: scale(0.94); } .send-button:disabled { background: var(--line-strong); cursor: not-allowed; opacity: 0.6; } .send-button .icon-send, .send-button .icon-stop { width: 18px; height: 18px; position: absolute; inset: 0; margin: auto; transition: opacity 0.12s, transform 0.12s; } .send-button .icon-stop { opacity: 0; transform: scale(0.6); } .send-button.streaming { background: var(--danger); } .send-button.streaming:hover { background: #8e1c2d; } .send-button.streaming .icon-send { opacity: 0; transform: scale(0.6); } .send-button.streaming .icon-stop { opacity: 1; transform: scale(1); } .composer-foot { max-width: 880px; margin: 8px auto 0; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); gap: 12px; flex-wrap: wrap; } .composer-foot .status { margin: 0; } .composer-hint kbd { font-family: var(--font-mono); font-size: 11px; padding: 1px 5px; background: var(--card); border: 1px solid var(--line); border-radius: 4px; color: var(--ink-soft); margin: 0 1px; } /* Hero empty state with example prompt cards */ .empty-state.hero-empty { padding: 24px 24px 28px; background: transparent; border: 0; text-align: left; } .empty-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; max-width: 760px; margin: 0 auto 16px; } .empty-head h2 { font-size: 18px; margin: 0 0 4px; } .empty-head p { font-size: 13px; margin: 0; color: var(--muted); } .suggest-button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink-soft); font-size: 12px; font-weight: 500; cursor: pointer; transition: border-color 0.12s, color 0.12s, background 0.12s; flex-shrink: 0; } .suggest-button:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); } .suggest-button:disabled { opacity: 0.6; cursor: not-allowed; } .suggest-button svg { width: 14px; height: 14px; transition: transform 0.5s ease; } .suggest-button.loading svg { animation: spin 0.8s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .empty-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 760px; margin: 0 auto; transition: opacity 0.15s ease; } .empty-examples.refreshing { opacity: 0.5; pointer-events: none; } @media (max-width: 540px) { .empty-examples { grid-template-columns: 1fr; } .empty-head { flex-direction: column; align-items: flex-start; } } .empty-examples .example { width: 100%; text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius); padding: 14px 16px; font-size: 14px; color: var(--ink); cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; font-family: inherit; line-height: 1.45; } .empty-examples .example em { font-style: italic; } .empty-examples .example:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08); } .example-tag { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--accent-dark); background: var(--accent-soft); padding: 2px 8px; border-radius: var(--radius-sm); } /* Page heads */ .page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 22px; } .page-title { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.01em; } .page-sub { margin: 8px 0 0; color: var(--muted); font-size: 14px; max-width: 720px; } /* Compact stat strip (replaces the old big metric tiles) */ .ask-head { margin-bottom: 16px; } .ask-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; } .ask-sub { margin: 4px 0 12px; color: var(--muted); font-size: 13px; max-width: 720px; } .stat-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 12px; color: var(--muted); width: max-content; max-width: 100%; } .stat-strip .stat { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; } .stat-strip .stat strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } .stat-strip .stat-label { text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; color: var(--muted); } .stat-strip .stat-sep { width: 1px; height: 12px; background: var(--line-strong); flex-shrink: 0; } .stat-strip .stat-llm { font-family: var(--font-mono); font-size: 12px; } .stat-strip .stat-llm strong { font-weight: 600; } .stat-strip .stat-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--line-strong); } .stat-strip .stat-dot.ok { background: var(--green); } .stat-strip .stat-dot.warn { background: var(--warm); } /* Results / answer */ .results-area { display: flex; flex-direction: column; gap: 14px; } .empty-state { background: var(--card); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 36px; text-align: center; color: var(--muted); } .empty-state h2 { margin: 0 0 6px; color: var(--ink); font-weight: 600; font-size: 18px; } .empty-state p { margin: 0; font-size: 14px; } .evidence-banner { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow); } .evidence-banner .label { display: inline-block; text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; color: var(--accent-dark); font-weight: 700; margin-bottom: 8px; } .evidence-banner .label.warning { color: var(--warm); } .evidence-banner .body { font-family: var(--font-display); font-size: 17px; line-height: 1.55; color: var(--ink); } .evidence-banner .body strong { color: var(--ink); } .evidence-banner .footnote { margin-top: 10px; font-size: 12px; color: var(--muted); } .route-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .chip { border: 1px solid var(--line); border-radius: 3px; padding: 2px 7px; font-size: 11px; font-weight: 500; color: var(--ink-soft); background: var(--surface-2); line-height: 1.5; } .chip.accent { border-color: transparent; color: var(--accent-dark); background: var(--accent-soft); font-weight: 600; } .chip.warm { border-color: transparent; color: var(--warm); background: color-mix(in srgb, var(--warm) 12%, transparent); } .chip.stat { font-family: var(--font-mono); font-size: 11px; color: var(--muted); background: transparent; border-color: var(--line); } .section-heading { margin: 8px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--muted); } /* Trait grid */ .trait-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; } .trait-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); transition: border-color 0.15s, transform 0.15s; } .trait-card:hover { border-color: var(--line-strong); } .trait-card .name { font-size: 16px; font-weight: 600; color: var(--ink); } .trait-card .name a { color: var(--ink); } .trait-card .name a:hover { color: var(--accent-dark); } .trait-card .meta { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 10px; } .trait-card .evidence { border-top: 1px solid var(--line); padding-top: 10px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; } .trait-card .evidence-section { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 4px; } .trait-card .evidence-snippet { background: var(--surface-2); border-left: 3px solid var(--accent); padding: 8px 10px; border-radius: 4px; } .trait-card .footer-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; } .trait-card .footer-row a { font-weight: 500; } /* Evidence chunks */ .evidence-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); } .evidence-card .head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; } .evidence-card .name { font-size: 16px; font-weight: 600; margin: 0 0 4px; } .evidence-card .meta { color: var(--muted); font-size: 12px; } .evidence-card .text { margin-top: 10px; white-space: pre-wrap; line-height: 1.55; color: var(--ink-soft); font-size: 14px; } .evidence-card .links { margin-top: 8px; font-size: 12px; } /* Retriever comparison */ .comparison-panel { display: grid; gap: 14px; margin-top: 18px; } .comparison-panel.standalone { margin-top: 0; } .venn-panel { display: grid; grid-template-columns: minmax(260px, 360px) minmax(0, 1fr); gap: 16px; align-items: center; border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 14px; } .venn-diagram { position: relative; min-height: 180px; } .venn-circle { position: absolute; top: 14px; width: 160px; height: 160px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 1px solid transparent; } .venn-circle.tfidf { left: 28px; background: rgba(21, 80, 113, 0.16); border-color: rgba(21, 80, 113, 0.28); color: var(--info); } .venn-circle.embeddings { right: 28px; background: rgba(23, 99, 62, 0.16); border-color: rgba(23, 99, 62, 0.28); color: var(--green); } .venn-overlap { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); width: 84px; height: 84px; border-radius: 50%; background: rgba(255, 255, 255, 0.78); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--ink); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08); } .venn-count { display: block; font-size: 26px; font-weight: 700; line-height: 1; } .venn-label { display: block; font-size: 11px; font-weight: 650; line-height: 1.2; margin-top: 5px; } .venn-notes { color: var(--ink-soft); font-size: 13px; line-height: 1.5; } .venn-list { margin-top: 7px; color: var(--muted); word-break: break-word; } .venn-list span { color: var(--ink); font-weight: 650; } .venn-list code { display: inline-block; margin: 2px 3px 2px 0; padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-2); color: var(--ink-soft); font-size: 11px; } .comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; } .comparison-column { min-width: 0; } .comparison-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 6px; } .comparison-head h3 { margin: 0; font-size: 15px; line-height: 1.25; } .comparison-hint { margin: 0 0 10px; color: var(--muted); font-size: 12px; } .comparison-list { display: grid; gap: 10px; } .comparison-card { border: 1px solid var(--line); background: var(--card); border-radius: 8px; padding: 12px; } .comparison-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .comparison-card .name { font-weight: 650; color: var(--ink); } .comparison-card .name a { color: var(--ink); } .comparison-card .meta { color: var(--muted); font-size: 12px; margin-top: 2px; } .comparison-card .text { color: var(--ink); font-size: 13px; line-height: 1.55; word-break: break-word; } .support-row { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin: 0 0 8px; color: var(--muted); font-size: 12px; } .support-badge { border-radius: var(--radius-sm); padding: 3px 7px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0; } .support-badge.direct_match { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); } .support-badge.partial_match { background: color-mix(in srgb, var(--warm) 18%, transparent); color: var(--warm); } .support-badge.semantic_related { background: color-mix(in srgb, var(--info) 16%, transparent); color: var(--info); } .support-badge.off_topic { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); } .support-badge.supports_negative_trait { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); } .support-badge.excluded_by_evidence { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); } .support-badge.unknown_no_attribute_evidence { background: var(--surface-2); color: var(--muted); } .retriever-badge, .constraint-chip { border-radius: var(--radius-sm); padding: 3px 7px; font-size: 11px; font-weight: 650; color: var(--ink-soft); background: var(--surface-2); border: 1px solid var(--line); line-height: 1.2; } .retriever-badge.tfidf { background: color-mix(in srgb, var(--info) 16%, transparent); color: var(--info); border-color: rgba(21, 80, 113, 0.22); } .retriever-badge.embeddings { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); border-color: rgba(23, 99, 62, 0.2); } .retriever-badge.both { background: color-mix(in srgb, var(--violet) 16%, transparent); color: var(--violet); border-color: color-mix(in srgb, var(--violet) 35%, transparent); } .constraint-chip { background: var(--card); color: var(--muted); } .comparison-card mark { background: color-mix(in srgb, var(--warm) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; } .matched-terms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .matched-terms span { border: 1px solid var(--line); border-radius: 999px; padding: 3px 7px; font-size: 11px; color: var(--muted); background: var(--surface-2); } .repr-badge { flex: 0 0 auto; border-radius: var(--radius-sm); padding: 4px 8px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0; } .repr-badge.tfidf { background: color-mix(in srgb, var(--info) 16%, transparent); color: var(--info); } .repr-badge.embeddings { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); } .chip.warning { background: color-mix(in srgb, var(--warm) 16%, transparent); color: var(--warm); } .empty-state.compact { padding: 14px; } @media (max-width: 900px) { .comparison-grid { grid-template-columns: 1fr; } .venn-panel { grid-template-columns: 1fr; } .venn-diagram { max-width: 360px; width: 100%; } } /* Browse */ .browse-controls { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; } .search-with-suggestions { position: relative; } .search-with-suggestions .control { padding: 12px 16px 12px 42px; font-size: 15px; border-radius: var(--radius-sm); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7686' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 14px center; } .search-with-suggestions .control::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; height: 14px; width: 14px; background: var(--line-strong); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M19 6.4 17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z'/%3E%3C/svg%3E") center / contain no-repeat; cursor: pointer; } .suggestion-list { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); list-style: none; margin: 0; padding: 4px 0; box-shadow: var(--shadow); z-index: 10; max-height: 320px; overflow-y: auto; } .suggestion-list li { padding: 8px 12px; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 8px; } .suggestion-list li:hover, .suggestion-list li.active { background: var(--accent-soft); } .suggestion-list .name { font-weight: 500; } .suggestion-list .accepted-name { color: var(--muted); font-size: 12px; } .suggestion-list .status-tag { margin-left: auto; } .letter-strip { display: flex; flex-wrap: wrap; gap: 4px; } .letter { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); font-size: 13px; cursor: pointer; color: var(--ink-soft); font-weight: 500; min-width: 32px; } .letter:hover { border-color: var(--accent); color: var(--accent-dark); } .letter.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .letter:disabled { opacity: 0.35; cursor: not-allowed; } .browse-meta { display: flex; gap: 14px; align-items: baseline; margin: 8px 0 14px; font-size: 13px; color: var(--ink-soft); } .muted { color: var(--muted); } .species-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; } .browse-empty { width: 100%; display: block; } .browse-empty .empty-state { width: 100%; display: block; } .species-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; } .species-card:hover { border-color: var(--accent); text-decoration: none; transform: translateY(-1px); } .species-card .name { font-style: italic; font-weight: 600; color: var(--ink); font-size: 15px; } .species-card .authorship { color: var(--muted); font-size: 12px; } .species-card .family { color: var(--accent-dark); font-size: 12px; font-weight: 500; } .species-card .blurb { color: var(--ink-soft); font-size: 13px; line-height: 1.5; margin-top: 4px; } .species-card .synonyms { margin-top: 6px; font-size: 11px; color: var(--muted); } .browse-footer { text-align: center; margin-top: 22px; } /* Profile */ .profile-breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 14px; } .profile-breadcrumb .sep { margin: 0 6px; } .profile-header { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px; display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; margin-bottom: 20px; box-shadow: var(--shadow); } .species-name { margin: 0; font-family: var(--font-display); font-size: 34px; font-style: italic; font-weight: 600; letter-spacing: -0.005em; color: var(--ink); } .species-authorship { color: var(--muted); margin-top: 6px; font-size: 14px; font-family: var(--font-mono); } .species-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .profile-actions { display: flex; flex-direction: column; gap: 8px; min-width: 220px; } .profile-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 14px; } .card-title { margin: 0 0 12px; font-size: 15px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink); border-bottom: 1px solid var(--line); padding-bottom: 8px; } .synonym-list { list-style: none; margin: 0; padding: 0; } .synonym-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; } .synonym-list li:last-child { border-bottom: 0; } .synonym-name { font-style: italic; font-weight: 500; } .status-tag { padding: 2px 8px; font-size: 11px; border-radius: 999px; font-weight: 600; text-transform: lowercase; letter-spacing: 0.02em; } .status-synonym { background: color-mix(in srgb, var(--warm) 15%, transparent); color: var(--warm); } .status-accepted { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); } .status-misapplied { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); } .profile-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; } .profile-toc { position: sticky; top: 76px; align-self: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; font-size: 13px; } .toc-title { margin: 0 0 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; } .profile-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .profile-toc a { color: var(--ink-soft); display: block; padding: 4px 6px; border-radius: 4px; } .profile-toc a:hover { background: var(--accent-soft); color: var(--accent-dark); text-decoration: none; } .section-text { font-family: var(--font-display); font-size: 15px; line-height: 1.65; color: var(--ink-soft); white-space: pre-wrap; } /* Generated answer panel */ .answer-panel { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; } .answer-pane { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px 24px; box-shadow: var(--shadow); min-width: 0; } .answer-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; border-bottom: 1px solid var(--line); padding-bottom: 14px; margin-bottom: 16px; } .answer-question { font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1.4; letter-spacing: -0.005em; } .answer-subtitle { margin-top: 6px; color: var(--muted); font-size: 12px; } .answer-subtitle strong { color: var(--accent-dark); font-weight: 600; } .answer-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 60%; } .answer-body { position: relative; } .answer-prose { font-family: var(--font-display); font-size: 17px; line-height: 1.65; color: var(--ink); } .answer-prose p { margin: 0 0 12px; } .answer-prose p:last-child { margin-bottom: 0; } .answer-prose em { color: var(--ink); } .answer-prose strong { color: var(--ink); } .answer-prose p.uncited { border-left: 3px solid var(--warm); padding-left: 12px; background: color-mix(in srgb, var(--warm) 10%, transparent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; position: relative; } .answer-prose p.uncited::after { content: "uncited"; position: absolute; top: 6px; right: 8px; font-family: var(--font-ui); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--warm); } .answer-error { background: color-mix(in srgb, var(--danger) 13%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); color: var(--danger); padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px; font-family: var(--font-ui); } .citation-chip { display: inline-flex; align-items: center; justify-content: center; vertical-align: text-top; min-width: 22px; height: 22px; padding: 0 7px; margin: 0 2px 0 1px; font-family: var(--font-ui); font-size: 11px; font-weight: 600; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-dark); cursor: pointer; transition: background 0.12s, transform 0.12s, box-shadow 0.12s; line-height: 1; } .citation-chip:hover, .citation-chip.highlighted { background: var(--accent); color: var(--on-accent); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(var(--accent-rgb), 0.25); } .citation-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .stream-cursor { display: inline-block; width: 8px; height: 18px; margin-left: 2px; background: var(--accent); border-radius: 2px; vertical-align: middle; animation: blink 1s step-end infinite; } @keyframes blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } .answer-extras { margin-top: 16px; } .export-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; } .export-label { font-size: 12.5px; color: var(--muted); font-weight: 500; } .export-actions .ghost-button { font-size: 12.5px; padding: 4px 12px; } .export-status { font-size: 12px; color: var(--green); font-style: italic; margin-left: auto; } .followup-panel { margin-top: 18px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); } .followup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .followup-title { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); } .followup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; transition: opacity 0.15s ease; } .followup-grid.refreshing { opacity: 0.5; pointer-events: none; } @media (max-width: 540px) { .followup-grid { grid-template-columns: 1fr; } .followup-head { flex-direction: column; align-items: flex-start; } } .followup-grid .example { width: 100%; text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13.5px; color: var(--ink); cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s, box-shadow 0.15s; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; font-family: inherit; line-height: 1.45; } .followup-grid .example:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.08); } /* Evidence rail */ .evidence-rail { position: sticky; top: 76px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 12px; box-shadow: var(--shadow); max-height: calc(100vh - 96px); overflow-y: auto; } .rail-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 10px; } .rail-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: var(--muted); } .rail-hint { color: var(--muted); font-size: 11px; } .evidence-list { display: flex; flex-direction: column; gap: 10px; } /* When the rail overflows, leave scroll room below the last item so it can be centered when its citation is clicked. JS adds .has-overflow on render. */ .evidence-rail.has-overflow .evidence-list { padding-bottom: 30vh; } .evidence-item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 12px 10px; background: var(--card); transition: border-color 0.15s, background 0.15s, transform 0.15s, box-shadow 0.15s; scroll-margin-top: 76px; } .evidence-item.highlighted { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15); } .evidence-item.uncited-evidence { opacity: 0.55; background: var(--surface-2); border-style: dashed; position: relative; } .evidence-item.uncited-evidence:hover { opacity: 0.9; } .evidence-item.uncited-evidence .evidence-num { background: transparent; color: var(--muted); border: 1px dashed var(--line-strong); } .evidence-item.uncited-evidence::after { content: "retrieved, not cited"; position: absolute; top: 8px; right: 10px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); background: var(--card); padding: 2px 7px; border: 1px dashed var(--line-strong); border-radius: 999px; pointer-events: none; } .evidence-item.flash { animation: flash 1.4s ease-out; } @keyframes flash { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.45); } 60% { box-shadow: 0 0 0 8px rgba(var(--accent-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } } .evidence-head { display: flex; gap: 10px; align-items: flex-start; } .evidence-num { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 999px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 11px; font-weight: 700; } .evidence-name { font-style: italic; font-weight: 600; font-size: 14px; } .evidence-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11px; color: var(--muted); margin-top: 3px; } .evidence-meta span:not(:last-child)::after { content: "·"; margin-left: 6px; color: var(--line-strong); } .evidence-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; } .evidence-text { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); } .evidence-synonyms { margin-top: 6px; font-size: 11px; color: var(--muted); } .evidence-foot { margin-top: 8px; display: flex; gap: 12px; font-size: 12px; } .rail-empty { color: var(--muted); padding: 16px 4px; font-size: 13px; } .rail-skeleton { height: 70px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-2) 25%, var(--line) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease-in-out infinite; } @keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (max-width: 1100px) { .answer-panel { grid-template-columns: 1fr; } .evidence-rail { position: static; max-height: none; } } /* Name resolution list */ .name-list { display: flex; flex-direction: column; gap: 10px; } .name-row { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; justify-content: space-between; gap: 16px; align-items: center; } .name-row .accepted { font-weight: 600; font-style: italic; } .name-row .matched { color: var(--muted); font-size: 13px; margin-top: 4px; } /* ============================================================================ Methodology page (slim two-diagram explainer) ============================================================================ */ .methodology-layout { width: min(1180px, 100vw); margin-inline: auto; padding: 36px 32px 64px; box-sizing: border-box; } .paper { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 40px 44px; box-shadow: var(--shadow); min-width: 0; } .paper-head { margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .paper-title { font-family: var(--font-display); font-size: 26px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 8px; color: var(--ink); } .paper-byline { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 700px; } .section-subtitle { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); margin: 36px 0 8px; padding-top: 18px; border-top: 1px solid var(--line); } .section-subtitle:first-of-type { padding-top: 0; border-top: none; margin-top: 24px; } .section-lede { margin: 0 0 16px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; max-width: 760px; } .section-lede code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; font-size: 12px; color: var(--ink); } .diagram { margin: 22px 0 0; padding: 28px 24px 22px; /* Mermaid figures are designed on a light ground; render them as an intentional light "schematic" card in both themes (a common, legible pattern for diagrams). */ background: #f5f7f8; border: 1px solid #dde3ea; border-radius: var(--radius); } .diagram .mermaid { background: transparent; display: block; width: 100%; text-align: center; min-height: 240px; } /* Mermaid sets an inline max-width on its rendered SVG to its natural size, which keeps diagrams small. Force the SVG to fill the container width. */ .diagram .mermaid svg { max-width: min(100%, 760px) !important; width: 100%; height: auto; display: block; margin: 0 auto; } .architecture-diagram .mermaid { min-height: 360px; } .architecture-diagram .mermaid svg { max-width: 100% !important; } .diagram figcaption { margin-top: 16px; font-size: 12px; /* Fixed slate so the caption stays readable on the always-light figure card. */ color: #5b6470; font-style: italic; text-align: left; line-height: 1.5; } @media (max-width: 720px) { .methodology-layout { padding: 24px 18px 48px; } .paper { padding: 24px 22px 32px; } .paper-title { font-size: 22px; } .diagram { padding: 18px 12px 14px; } } /* Responsive */ @media (max-width: 960px) { .profile-grid { grid-template-columns: 1fr; } .profile-toc { position: static; } } @media (max-width: 640px) { .topbar { gap: 12px; padding: 10px 16px; } .coverage-pill { display: none; } .ask-scroll { padding: 22px 18px 16px; } .composer-wrap { padding: 12px 18px 18px; } .browse-layout, .profile-layout { padding: 22px 18px 40px; } .page-head { flex-direction: column; gap: 12px; } .profile-header { flex-direction: column; } .profile-actions { flex-direction: row; } } /* ============================================================================ Cite page (acknowledgment-first layout) ============================================================================ */ .cite-layout { /* One coherent reading column: the lede and every citation block share a single comfortable measure instead of a narrow lede floating in a wide page. */ width: min(780px, 100vw); margin-inline: auto; padding: 40px 24px 80px; box-sizing: border-box; } /* Hero --------------------------------------------------------------------- */ .cite-hero { display: flex; flex-direction: column; align-items: flex-start; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 8px 0 28px; margin-bottom: 8px; } .cite-hero-logo { height: 64px; display: flex; align-items: center; justify-content: flex-start; position: relative; } .cite-hero-logo img { height: 100%; width: auto; display: block; } .cite-hero-logo-fallback { display: none; height: 100%; padding: 0 18px; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 32px; letter-spacing: -0.02em; color: var(--accent); background: var(--accent-soft); border-radius: 10px; } .cite-hero-eyebrow { margin: 0 0 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .cite-hero-title { font-family: var(--font-display); font-size: 32px; font-weight: 600; margin: 0 0 14px; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); } .cite-hero-lede { margin: 0 0 16px; color: var(--ink-soft); font-size: 16px; line-height: 1.72; } .cite-hero-lede strong { color: var(--ink); font-weight: 600; } .cite-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; } .cite-cta { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font-size: 13px; font-weight: 500; text-decoration: none; transition: background 120ms ease, border-color 120ms ease, transform 120ms ease; } .cite-cta:hover { background: var(--surface-2); border-color: var(--ink-soft); } .cite-cta.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .cite-cta.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); } .cite-hero-meta { margin: 0; font-size: 12.5px; color: var(--ink-soft); } .cite-hero-meta .muted { color: var(--muted); } .cite-hero-meta code { background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; font-size: 12px; color: var(--ink); } /* Source feature (FishBase logo + caption) --------------------------------- */ .cite-source-feature { display: flex; align-items: center; gap: 18px; margin: 14px 0 4px; padding: 14px 18px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); } .cite-source-feature-logo { flex: 0 0 auto; height: 48px; display: flex; align-items: center; } .cite-source-feature-logo img { height: 100%; width: auto; display: block; } .cite-source-feature-fallback { display: none; height: 48px; padding: 0 14px; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; color: var(--accent); background: var(--accent-soft); border-radius: 8px; } .cite-source-feature-body { flex: 1 1 auto; font-size: 14px; color: var(--ink-soft); line-height: 1.55; } .cite-source-feature-body p { margin: 0; } /* Per-source block (WCVP / POWO / WFO) ------------------------------------- */ .cite-source-block { margin-top: 18px; padding: 18px 18px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .cite-source-block-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; } .cite-source-block-head > .cite-cta { margin-left: auto; font-size: 12.5px; padding: 6px 12px; } .cite-source-block-head > div:not(.cite-source-badge) { display: flex; flex-direction: column; gap: 2px; } .cite-source-block .cite-card { margin-top: 0; } .cite-source-block .cite-reveal { margin-top: 8px; } /* Section heads ------------------------------------------------------------ */ .cite-section-head { margin: 36px 0 14px; } .cite-section-head h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 6px; color: var(--ink); } .cite-section-head p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; max-width: 720px; } /* Citation cards ----------------------------------------------------------- */ .cite-card { margin-top: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .cite-card.no-margin { margin-top: 0; } .cite-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--card); } .cite-card-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .cite-copy { border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); border-radius: var(--radius-sm); font: inherit; font-size: 12px; padding: 4px 12px; cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .cite-copy:hover { background: var(--surface-2); color: var(--ink); } .cite-copy.copied { background: color-mix(in srgb, var(--green) 15%, transparent); color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, transparent); } .cite-text { margin: 0; padding: 14px 16px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; word-break: break-word; background: transparent; } /* Reveal panels (BibTeX, per-species) -------------------------------------- */ .cite-reveal { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); } .cite-reveal > summary { cursor: pointer; list-style: none; padding: 10px 14px; font-size: 13px; font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 8px; user-select: none; } .cite-reveal > summary::-webkit-details-marker { display: none; } .cite-reveal > summary::before { content: ">"; font-size: 11px; color: var(--muted); transition: transform 120ms ease; display: inline-block; } .cite-reveal[open] > summary::before { transform: rotate(90deg); } .cite-reveal[open] > summary { border-bottom: 1px solid var(--line); } .cite-reveal-body { margin: 0; padding: 12px 16px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); border-bottom: 1px solid var(--line); } .cite-reveal-body.muted { color: var(--muted); font-size: 12.5px; border-bottom: none; border-top: 1px solid var(--line); } .cite-reveal-body code, .cite-section-head code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; font-size: 12px; color: var(--ink); } .cite-reveal .cite-card { margin: 0; border: none; border-radius: 0; } .cite-reveal .cite-card-head { background: var(--surface-2); } /* Secondary sources grid --------------------------------------------------- */ .cite-secondary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .cite-source-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 18px 18px 16px 64px; min-height: 92px; } .cite-source-badge { position: absolute; top: 18px; left: 16px; width: 38px; height: 38px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.03em; color: var(--accent-dark); background: var(--accent-soft); border: 1px solid var(--line); } /* Badge inside the per-source block head uses inline (not absolute) layout */ .cite-source-block-head .cite-source-badge { position: static; width: 44px; height: 44px; flex: 0 0 auto; } .cite-source-name { font-weight: 600; color: var(--ink); font-size: 15px; line-height: 1.2; } .cite-source-tag { margin-top: 2px; font-size: 12px; color: var(--muted); } .cite-source-text { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-soft); } .cite-source-text a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); } .cite-source-text a:hover { color: var(--accent-dark); border-bottom-style: solid; } /* ============================================================================ Shared primary button (used by profile actions, compare, tray) ============================================================================ */ .primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; } .primary-button:hover { background: var(--accent-dark); border-color: var(--accent-dark); text-decoration: none; } .primary-button:active { transform: scale(0.98); } /* ============================================================================ Compare: add-to-compare button (cards, profile, evidence) ============================================================================ */ .compare-add { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink-soft); border-radius: var(--radius-sm); font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 11px; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; line-height: 1.2; } .compare-add::before { content: "+"; font-size: 13px; line-height: 1; margin-top: -1px; } .compare-add:hover { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); } .compare-add.is-added { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .compare-add.is-added::before { content: "✓"; } /* Compare button positioned on browse species cards (card is a relative anchor). */ .species-card { position: relative; } .species-card .compare-add { position: absolute; top: 10px; right: 10px; opacity: 0; transform: translateY(-2px); transition: opacity 0.12s, transform 0.12s, background 0.12s, border-color 0.12s, color 0.12s; } .species-card:hover .compare-add, .species-card:focus-within .compare-add, .species-card .compare-add.is-added { opacity: 1; transform: translateY(0); } /* ============================================================================ Compare page (aligned section matrix) ============================================================================ */ .compare-layout { width: min(1320px, 100vw); margin-inline: auto; padding: 32px 40px 120px; box-sizing: border-box; } .compare-head-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .compare-loading { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; } .compare-loading .rail-skeleton { height: 120px; } .compare-empty { background: var(--card); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 48px 36px; text-align: center; max-width: 620px; margin: 24px auto; } .compare-empty h2 { margin: 0 0 8px; font-size: 20px; color: var(--ink); } .compare-empty p { margin: 0 auto 18px; font-size: 14px; color: var(--muted); max-width: 480px; line-height: 1.6; } .compare-scroll { max-height: calc(100vh - 220px); overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); } .compare-matrix { display: grid; /* Fixed-min columns so cell text wraps inside each column; the grid overflows the scroll container horizontally when the columns don't fit, rather than letting long source text blow out a single column's width. */ grid-template-columns: 184px repeat(var(--cols), minmax(300px, 1fr)); } .compare-matrix > .cm-cell { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 12px 14px; min-width: 0; } /* Sticky header row */ .cm-head, .cm-corner { position: sticky; top: 0; z-index: 2; background: var(--surface-2); border-bottom: 1px solid var(--line-strong) !important; } .cm-corner { left: 0; z-index: 4; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--muted); display: flex; align-items: flex-end; } /* Sticky section-label column */ .cm-label { position: sticky; left: 0; z-index: 1; background: var(--surface-2); font-size: 12px; font-weight: 600; color: var(--ink-soft); line-height: 1.4; } .cm-head { position: relative; } .cm-head.cm-head { position: sticky; } .cm-remove { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; display: grid; place-items: center; transition: background 0.12s, color 0.12s, border-color 0.12s; } .cm-remove:hover { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); } .cm-name { font-style: italic; font-weight: 700; font-size: 15px; color: var(--ink); padding-right: 26px; line-height: 1.3; } .cm-authorship { font-size: 12px; color: var(--muted); margin-top: 2px; } .cm-head-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .cm-head-links { margin-top: 8px; font-size: 12px; display: flex; align-items: center; gap: 6px; } .cm-dot { color: var(--line-strong); } .cm-value { font-size: 13px; line-height: 1.55; color: var(--ink-soft); white-space: pre-wrap; max-height: 260px; overflow-y: auto; } .cm-value.cm-empty { color: var(--line-strong); font-size: 16px; text-align: center; } /* Zebra striping by section row for readability across wide rows. */ .compare-matrix > .cm-label, .compare-matrix > .cm-value { background-clip: padding-box; } .compare-foot-note { margin: 12px 2px 0; font-size: 12px; color: var(--muted); line-height: 1.55; } @media (max-width: 720px) { .compare-layout { padding: 24px 16px 120px; } .compare-matrix { grid-template-columns: 132px repeat(var(--cols), minmax(220px, 1fr)); } } /* ============================================================================ Compare tray (persistent bottom bar) ============================================================================ */ .compare-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--card); border-top: 1px solid var(--line-strong); box-shadow: 0 -6px 24px rgba(15, 33, 46, 0.08); transform: translateY(110%); transition: transform 0.22s ease; } .compare-tray.show { transform: translateY(0); } .compare-tray-inner { width: min(1320px, 100vw); margin-inline: auto; display: flex; align-items: center; gap: 16px; padding: 10px 28px; } .compare-tray-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); flex-shrink: 0; } .compare-tray-count { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; } .compare-tray-source { text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; font-weight: 700; color: var(--accent-dark); background: var(--accent-soft); padding: 2px 7px; border-radius: 999px; } .compare-tray-chips { display: flex; gap: 6px; overflow-x: auto; flex: 1 1 auto; padding: 2px 0; scrollbar-width: thin; } .compare-tray-chip { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px 4px 11px; font-size: 12px; color: var(--ink); background: var(--surface-2); } .compare-tray-chip em { font-style: italic; } .compare-tray-remove { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; border-radius: 999px; } .compare-tray-remove:hover { color: var(--danger); } .compare-tray-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .compare-tray-actions .ghost-button { padding: 7px 12px; font-size: 13px; } .compare-tray-go { padding: 8px 16px; font-size: 13px; } @media (max-width: 640px) { .compare-tray-inner { padding: 10px 14px; gap: 10px; flex-wrap: wrap; } .compare-tray-label { order: 0; } .compare-tray-actions { order: 1; margin-left: auto; } .compare-tray-chips { order: 2; flex-basis: 100%; } } /* ============================================================================ Live GBIF panel (species profile) ============================================================================ */ .gbif-card { border-left: 3px solid var(--accent); } .gbif-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .gbif-title { display: flex; align-items: center; gap: 10px; margin: 0; border: 0; padding: 0; } .gbif-source-pill { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-dark); background: var(--accent-soft); border-radius: 999px; padding: 3px 9px; } .gbif-link { font-size: 13px; font-weight: 500; flex-shrink: 0; } .gbif-loading { display: flex; flex-direction: column; gap: 10px; } .gbif-loading .rail-skeleton { height: 60px; } .gbif-empty { color: var(--muted); font-size: 13.5px; margin: 6px 0 0; } .gbif-match-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .gbif-match-name { font-style: italic; font-weight: 600; font-size: 15px; color: var(--ink); } .gbif-taxonomy { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); margin-bottom: 14px; } .gbif-taxonomy .gbif-sep { color: var(--line-strong); margin: 0 2px; } .gbif-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; } .gbif-stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; } .gbif-stat-value { font-size: 22px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.1; } .gbif-stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; } .gbif-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; } .gbif-map { height: 280px; border-radius: var(--radius-sm); border: 1px solid var(--line); overflow: hidden; z-index: 0; } .gbif-map-empty { display: grid; place-items: center; background: var(--surface-2); color: var(--muted); font-size: 13px; text-align: center; padding: 16px; } .gbif-map-note { font-size: 11px; color: var(--muted); margin-top: 6px; } .gbif-block-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; color: var(--muted); margin: 0 0 8px; } .gbif-breakdowns .gbif-block-label:not(:first-child) { margin-top: 16px; } .gbif-bars { display: flex; flex-direction: column; gap: 7px; } .gbif-bar-row { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 12px; } .gbif-bar-label { color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gbif-bar-track { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .gbif-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); } .gbif-bar-count { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .gbif-vern-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; } .gbif-vern { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; color: var(--ink-soft); background: var(--card); } .gbif-vern-lang { font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: 4px; padding: 1px 4px; } .gbif-provenance { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); line-height: 1.5; } @media (max-width: 860px) { .gbif-grid { grid-template-columns: 1fr; } .gbif-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Responsive --------------------------------------------------------------- */ @media (max-width: 720px) { .cite-layout { padding: 24px 18px 48px; } .cite-hero { padding: 22px 22px 24px; } .cite-hero-logo { height: 48px; } .cite-hero-logo-fallback { font-size: 24px; padding: 0 14px; } .cite-hero-title { font-size: 24px; } .cite-secondary-grid { grid-template-columns: 1fr; } .cite-source-card { padding: 16px 16px 14px 60px; } .cite-card-head { padding: 8px 12px; } .cite-text { padding: 12px 12px; font-size: 12px; } } /* ============================================================================ Data-coverage chip + popover (replaces the always-on coverage disclaimer) ============================================================================ */ .data-chip-wrap { position: relative; } .data-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px 6px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink-soft); font-size: 12px; font-family: var(--font-mono); cursor: pointer; transition: border-color 0.12s, color 0.12s; } .data-chip:hover { border-color: var(--accent); color: var(--accent-dark); } .data-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--green); flex-shrink: 0; } .data-dot.warn { background: var(--warm); } .data-chip-caret { width: 9px; height: 9px; opacity: 0.55; } .data-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 308px; z-index: 50; background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: 14px 16px; } .data-pop-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--muted); margin-bottom: 11px; } .data-pop-rows { margin: 0; display: flex; flex-direction: column; gap: 9px; } .data-pop-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .data-pop-row dt { font-size: 13px; color: var(--ink-soft); } .data-pop-row dd { margin: 0; text-align: right; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; } .data-pop-row dd span { font-family: var(--font-ui); font-size: 10.5px; color: var(--muted); margin-top: 1px; } .data-pop-note { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11.5px; line-height: 1.55; color: var(--muted); } @media (max-width: 640px) { #dataChipLabel { display: none; } .data-pop { width: 264px; } } /* ============================================================================ Compare: mode toggle + trait matrix (species x character, grounded values) ============================================================================ */ .compare-modebar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; } .seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--card); } .seg-btn { border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-size: 13px; font-weight: 500; padding: 7px 16px; cursor: pointer; transition: background 0.12s, color 0.12s; } .seg-btn + .seg-btn { border-left: 1px solid var(--line); } .seg-btn:hover { color: var(--ink); } .seg-btn.active { background: var(--accent); color: var(--on-accent); font-weight: 600; } .compare-modebar-right { display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; } .trait-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; user-select: none; } .trait-toggle input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; } .compare-export { display: inline-flex; align-items: center; gap: 8px; } .compare-export .export-label { font-size: 12px; color: var(--muted); } .compare-export .ghost-button { padding: 5px 12px; font-size: 12.5px; } .trait-loading { padding: 8px 2px; } .trait-loading .rail-skeleton { height: 90px; margin-bottom: 12px; } .trait-loading-note { font-size: 13px; color: var(--muted); line-height: 1.5; max-width: 620px; } .trait-matrix { display: grid; grid-template-columns: 200px repeat(var(--cols), minmax(132px, 1fr)); } .trait-matrix > .tm-cell { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 10px 12px; min-width: 0; font-size: 13px; } .tm-charhead, .tm-corner { position: sticky; top: 0; z-index: 2; background: var(--surface-2); border-bottom: 1px solid var(--line-strong) !important; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-soft); text-transform: uppercase; display: flex; align-items: flex-end; line-height: 1.3; } .tm-corner { left: 0; z-index: 4; color: var(--muted); } .tm-species { position: sticky; left: 0; z-index: 1; background: var(--card); font-style: italic; font-family: var(--font-display); font-weight: 600; font-size: 14px; } .tm-species a { color: var(--ink); } .tm-species a:hover { color: var(--accent-dark); } /* Transposed orientation: taxa as column headers, characters as row labels. */ .tm-spcol { position: sticky; top: 0; z-index: 2; background: var(--surface-2); border-bottom: 1px solid var(--line-strong) !important; font-style: italic; font-family: var(--font-display); font-weight: 600; font-size: 14px; display: flex; align-items: flex-end; } .tm-spcol a { color: var(--ink); } .tm-spcol a:hover { color: var(--accent-dark); } .tm-charrow { position: sticky; left: 0; z-index: 1; background: var(--card); font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ink-soft); display: flex; align-items: center; } .trait-transpose { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 12.5px; } .trait-transpose.active { border-color: var(--accent); color: var(--accent-dark); background: var(--accent-soft); } .tm-value { display: flex; align-items: baseline; gap: 6px; color: var(--ink); font-variant-numeric: tabular-nums; } .tm-value.tm-empty { color: var(--line-strong); justify-content: center; } .tm-dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 999px; background: var(--muted); transform: translateY(-1px); } .tm-dot.tm-high { background: var(--green); } .tm-dot.tm-medium { background: var(--warm); } .tm-dot.tm-low { background: var(--line-strong); } @media (max-width: 720px) { .trait-matrix { grid-template-columns: 132px repeat(var(--cols), minmax(116px, 1fr)); } } /* ============================================================================ Identify (descriptor-based identification) ============================================================================ */ .identify-layout { width: min(1180px, 100vw); margin-inline: auto; padding: 32px 40px 80px; box-sizing: border-box; } .identify-grid { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; } .identify-form { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 20px; position: sticky; top: 76px; } .identify-help { margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.5; } /* "Describe your specimen" -> auto-extract shortcut */ .id-describe { margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px dashed var(--line); } .id-describe-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 6px; } .id-describe-input { width: 100%; resize: vertical; min-height: 64px; font-size: 13px; line-height: 1.45; } .id-describe-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .id-extract-status { font-size: 12px; color: var(--muted); } .id-char-input.id-prefilled, .id-custom-value.id-prefilled { border-color: var(--accent); background: var(--accent-soft); } .id-chars { display: flex; flex-direction: column; gap: 12px; } /* User-added custom characteristics */ .id-custom-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .id-custom-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 6px; align-items: center; } .id-custom-remove { border: 1px solid var(--line); background: var(--surface-2); color: var(--muted); border-radius: var(--radius-sm); width: 28px; height: 28px; line-height: 1; cursor: pointer; font-size: 16px; } .id-custom-remove:hover { color: var(--danger); border-color: var(--danger); } .id-add-char { margin-top: 10px; } .id-char { display: flex; flex-direction: column; gap: 5px; } .id-char-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); } .id-char-input { font-size: 13.5px; } .id-char-input::placeholder { color: var(--line-strong); font-size: 12px; } .identify-actions { display: flex; gap: 10px; margin-top: 16px; } .identify-note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); line-height: 1.55; } .identify-results { min-width: 0; } .identify-empty { background: var(--card); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 40px 28px; text-align: center; color: var(--muted); font-size: 14px; } .identify-loading { display: flex; flex-direction: column; gap: 12px; } .identify-loading .rail-skeleton { height: 90px; } .identify-results-head { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--muted); margin: 2px 0 12px; } /* Interactive multi-access key panel: live narrowing + best-character suggestions */ .id-keypanel { background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; } .id-narrow { font-size: 14px; color: var(--ink-soft); } .id-narrow strong { font-family: var(--font-mono); font-size: 17px; color: var(--ink); } .id-suggest { margin-top: 12px; } .id-suggest-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--muted); margin-bottom: 8px; } .id-sugg-list { display: flex; flex-wrap: wrap; gap: 8px; } .id-sugg { display: inline-flex; flex-direction: column; gap: 5px; min-width: 120px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); padding: 7px 11px; cursor: pointer; transition: border-color 0.12s, background 0.12s; } .id-sugg:hover { border-color: var(--accent); background: var(--accent-soft); } .id-sugg-name { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); } .id-sugg-bar { height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; } .id-sugg-bar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .identify-list { display: flex; flex-direction: column; gap: 12px; } .id-candidate { display: flex; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; } .id-rank { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-dark); display: grid; place-items: center; font-family: var(--font-mono); font-size: 13px; font-weight: 700; } .id-cand-main { flex: 1 1 auto; min-width: 0; } .id-cand-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; } .id-cand-name { font-family: var(--font-display); font-style: italic; font-size: 16px; font-weight: 600; } .id-cand-name a { color: var(--ink); } .id-cand-name a:hover { color: var(--accent-dark); } .id-cand-auth { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); } .id-cand-match { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--accent-dark); background: var(--accent-soft); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } .id-matchbar { height: 5px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 10px 0 12px; } .id-matchbar span { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .id-char-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .id-row { display: grid; grid-template-columns: 16px 130px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 12.5px; } .id-tick { font-size: 12px; } .id-hit .id-tick { color: var(--green); font-weight: 700; } .id-miss { opacity: 0.6; } .id-miss .id-tick { color: var(--line-strong); } .id-ch { color: var(--ink-soft); font-weight: 500; } .id-exact, .id-kind { font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--accent-dark); background: var(--accent-soft); border-radius: 3px; padding: 1px 4px; margin-left: 5px; vertical-align: middle; } .id-ev { color: var(--muted); line-height: 1.45; } .id-miss-note { font-style: italic; } .id-cand-actions { margin-top: 12px; } @media (max-width: 860px) { .identify-layout { padding: 28px 18px 64px; } .identify-grid { grid-template-columns: 1fr; } .identify-form { position: static; } .id-row { grid-template-columns: 16px 1fr; } .id-row .id-ev { grid-column: 2; } } /* --- Faithfulness / verification panel (the VERIFY stage made visible) --- */ .verify-panel { margin-top: 18px; border: 1px solid var(--line); border-left: 3px solid var(--line-strong); background: var(--card); border-radius: 8px; padding: 14px 16px; } .verify-panel.verify-ok { border-left-color: var(--accent); } .verify-panel.verify-warn { border-left-color: var(--warm); } .verify-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .verify-head h3 { margin: 0; font-family: var(--font-ui); font-size: 0.95rem; letter-spacing: 0.01em; } .verify-score { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); white-space: nowrap; } .verify-summary { margin: 8px 0 0; color: var(--ink-soft); font-size: 0.9rem; } .verify-repair { margin: 8px 0 0; font-size: 0.84rem; color: var(--accent-dark); } .verify-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; } .verify-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius-sm); } .verify-badge { font-family: var(--font-mono); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px; white-space: nowrap; margin-top: 1px; } .verify-badge.unsupported { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); } .verify-badge.partial { color: var(--warm); background: color-mix(in srgb, var(--warm) 14%, transparent); } .verify-claim { color: var(--ink-soft); line-height: 1.45; font-size: 0.9rem; } .verify-note { margin: 12px 0 0; font-size: 0.78rem; color: var(--muted); } .verify-judge { font-family: var(--font-mono); } /* ============================================================================ Trait-matrix similarity (Compare): how alike + where they differ ============================================================================ */ .tm-sim { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line-strong); } .tm-sim-title { font-family: var(--font-display); font-size: 17px; margin: 0 0 2px; } .tm-sim-sub { color: var(--ink-soft); font-size: 13px; margin: 0 0 14px; } .tm-sim-readout { font-size: 15px; margin: 0 0 14px; } .tm-sim-readout strong { font-size: 20px; color: var(--accent-dark); } .tm-sim-readout em { font-style: italic; font-family: var(--font-display); } .tm-sim-cov { color: var(--ink-soft); font-size: 12.5px; } /* Pairwise similarity heatmap (>=3 species) */ .tm-sim-heat { display: grid; grid-template-columns: 184px repeat(var(--cols), minmax(64px, 1fr)); margin-bottom: 16px; } .tm-sim-heat > .tm-cell { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 9px 10px; font-size: 13px; text-align: center; min-width: 0; } .tm-sim-col, .tm-sim-corner { position: sticky; top: 0; z-index: 2; background: var(--surface-2); font-style: italic; font-family: var(--font-display); font-size: 12.5px; border-bottom: 1px solid var(--line-strong) !important; } .tm-sim-rowlabel { position: sticky; left: 0; z-index: 1; background: var(--card); text-align: left; font-style: italic; font-family: var(--font-display); } .tm-sim-val { font-weight: 600; font-variant-numeric: tabular-nums; } .tm-sim-self { color: var(--ink-faint, var(--ink-soft)); } /* Shared / distinguishing character panels */ .tm-sim-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 720px) { .tm-sim-cols { grid-template-columns: 1fr; } } .tm-sim-panel h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); margin: 0 0 8px; display: flex; align-items: center; gap: 8px; } .tm-sim-count { font-family: var(--font-mono); font-size: 11px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--ink); } .tm-sim-list { list-style: none; margin: 0; padding: 0; } .tm-sim-list > li { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; } .tm-sim-list > li:last-child { border-bottom: none; } .tm-sim-char { font-weight: 600; font-size: 13px; } .tm-sim-state { color: var(--ink); font-size: 13px; } .tm-sim-states { display: flex; flex-wrap: wrap; gap: 6px; } .tm-sim-chip { font-size: 12px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; } .tm-sim-chip em { font-style: italic; font-family: var(--font-display); color: var(--ink-soft); margin-right: 4px; } .tm-sim-dist .tm-sim-char { color: var(--accent-dark); } .tm-sim-empty { color: var(--ink-soft); font-size: 13px; font-style: italic; } .tm-sim-note { margin: 16px 0 0; font-size: 12px; color: var(--ink-soft); line-height: 1.5; } /* Heatmap + dendrogram side by side */ .tm-sim-top { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; margin-bottom: 18px; } .tm-sim-heatwrap { flex: 1 1 320px; min-width: 280px; margin-bottom: 0; } .tm-dg { flex: 0 1 330px; min-width: 250px; margin: 0; } .tm-dg-cap { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: 8px; } .tm-dg-svg { display: block; max-width: 100%; overflow: visible; } .tm-dg-link { stroke: var(--line-strong); stroke-width: 1.4; fill: none; } .tm-dg-label { fill: var(--ink); font-size: 12.5px; font-style: italic; font-family: var(--font-display); } /* Discriminant-power bars: per-character ranking */ .tm-db { margin-top: 4px; } .tm-db-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); margin: 0 0 10px; } .tm-db-list { list-style: none; margin: 0; padding: 0; } .tm-db-row { padding: 9px 0; border-bottom: 1px solid var(--line); } .tm-db-row:last-child { border-bottom: none; } .tm-db-head { display: grid; grid-template-columns: minmax(110px, 1.4fr) minmax(80px, 2fr) auto; gap: 12px; align-items: center; } .tm-db-label { font-weight: 600; font-size: 13px; } .tm-db-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .tm-db-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; transition: width 0.3s ease; } .tm-db-meta { font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } .tm-db-states { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; } .tm-db-state b { font-weight: 600; } .tm-db-state i { font-style: italic; color: var(--ink-soft); } .tm-db-shared .tm-db-label { color: var(--ink-soft); font-weight: 500; } .tm-db-shared .tm-db-fill { background: var(--line-strong); } /* Consensus colouring on the matrix cells (where a species diverges from the group) */ .tm-diverge { background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 3px 0 0 var(--accent); }