/* UI v2 cascade-layer ORDER (docs/ui-v2-plan.md). This statement must live here, in the FIRST stylesheet the browser parses, and nowhere else. A `@layer` statement can only REGISTER layer names; it cannot reorder a layer that an earlier stylesheet already created. Declaring this order inside style-v2.css looked right and silently did nothing: style.css loads first, its `@layer base { … }` created `base` as layer #1, and the later statement could only append `v2base` and `v2` AFTER it — so the generic heading rules meant to sit BELOW v1 ended up above it, and every styled heading in the app inflated to the generic size. Declared here, before any layer exists, the order is the intended one: v2base — v2's generic element typography (BELOW v1) base — v1 (this file + the bundled PWA supplement) v2 — v2 tokens, aliases and component rules (ABOVE v1) Harmless when style-v2.css is not loaded: naming a layer does not create content, and an empty layer has no effect. */ @layer v2base, base, v2; /* kg-web — clean editorial theme with light + dark variants. Self-hosted, no external CDN, no rounded cards. Thin 1px lines, generous whitespace, system sans-serif. Theme follows OS preference by default; toggle in header overrides via data-theme on . */ /* ── cascade layer: v1 ──────────────────────────────────────────── Everything below lives in the `base` layer so UI v2 (static/style-v2.css, docs/ui-v2-plan.md) can override it from a LATER layer without an !important or a specificity arms race. Layering changes nothing about how this file renders on its own — but the direction only works with v1 inside a layer, because UNLAYERED styles beat layered ones. Do not un-wrap this. ───────────────────────────────────────────────────────────────── */ @layer base { :root { /* Light theme (default). The dark variant is in [data-theme="dark"] below. Vars used everywhere instead of hardcoded colors so the toggle is one root attribute change. */ --bg: #ffffff; --bg-elev: #fafafa; /* very subtle section tint */ --text: #111111; --text-dim: #333333; --text-faint: #555555; --rule: #111111; /* full-strength rule for editorial dividers */ --rule-soft: #d4d4d4; /* card borders — bumped up from #e6e6e6 for clearer card edges */ --rule-hairline: #ececec; /* very faint inner separators */ --accent: #111111; /* Brand accent — Apple system blue. Used sparingly, only on primary CTAs; body text + editorial rules stay on --accent (ink) so the newspaper look is preserved. --brand-ink is the text colour that rides on --brand. */ --brand: #007aff; --brand-hover: #0063cc; --brand-ink: #ffffff; --positive: #1a7f3a; --negative: #b22222; --neutral: #555555; --mixed: #6b3fa0; --warn: #8a5a00; /* Per-channel analytics line colours — brand-aligned, one fixed hue per station slug (Digi purple, Antena bleu, B1 golden, Realitatea bright red, Romania TV dark red). Identity is never colour-alone — the legend + tooltip carry channel labels — which keeps the two reds distinguishable. */ --ch-digi24: #7b3fd4; /* purple */ --ch-antena3: #1a8fd6; /* bleu */ --ch-b1: #d99500; /* golden */ --ch-realitateaplus: #8eca72; /* light green — see note below */ --ch-romaniatv: #8f1616; /* dark red */ --ch-fallback: #5f6b7a; /* slate — unknown channel */ /* Realitatea Plus moved off red 2026-08-09: it and România TV were both red and hard to separate in a per-channel chart. Values chosen by measuring CIELAB distance to the rest of the palette under normal, deuteranopic and protanopic vision, not by eye — this palette is CVD-safe by intent. The binding constraint is --positive, which is a green: in DARK mode it is a LIGHT green (#5cd68a), so a saturated light green there lands ΔE 3–13 from "positive sentiment" in the very charts both appear in. Hence the dark value leans lime (worst-case ΔE 16.9 vs 28.9 in light). A cleaner separation needs --positive to move, which is a semantics decision, not a palette one. */ --maxw: 1080px; /* app/dashboard shell — cards, lists, charts, forms */ --readw: 760px; /* long-form prose column (single-story / user report) */ } [data-theme="dark"] { --bg: #0a0a0a; --bg-elev: #141414; --text: #ededed; --text-dim: #c8c8c8; --text-faint: #999999; --rule: #ededed; --rule-soft: #2a2a2a; --rule-hairline: #1c1c1c; --accent: #ededed; --brand: #0a84ff; /* Apple system blue, dark step */ --brand-hover: #409cff; --brand-ink: #ffffff; --positive: #5cd68a; --negative: #ff7373; --neutral: #a0a0a0; --mixed: #c4a3ff; --warn: #f0c060; /* Dark steps of the same brand channel hues (lifted for the #0a0a0a surface; dark-red romaniatv lightened to a brick so it stays legible yet distinct from bright-red realitateaplus). */ --ch-digi24: #a066e8; /* purple */ --ch-antena3: #43a9ef; /* bleu */ --ch-b1: #e0a92e; /* golden */ --ch-realitateaplus: #9be564; /* light green (lime-leaning) */ --ch-romaniatv: #cf5349; /* dark red */ --ch-fallback: #8592a3; /* slate */ } /* Default is the light theme for all visitors regardless of OS preference; the toggle in the header opts into dark and persists the choice in localStorage. */ * { box-sizing: border-box; } html { height: 100%; } body { margin: 0; padding: 0; min-height: 100%; display: flex; flex-direction: column; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2px; } main { flex: 1; } /* `width: 100%` is load-bearing, not redundant with `max-width`. * * The page wrapper is used on `
`, which is a direct flex item of a * column flex container in BOTH shells (`body` for the Jinja pages, `#root` * for the PWA). A flex item is normally stretched to the container's cross * size — but `margin: 0 auto` sets auto margins on the cross axis, and auto * cross-axis margins cancel the stretch. Without an explicit width the main * column therefore sizes to `fit-content`: as wide as its content wants, up * to `--maxw`. * * On most pages the content's max-content width exceeds --maxw, so it clamps * to --maxw and the bug is invisible. It shows the moment a page holds only * narrow content: send the first chat message and, while the agent is still * thinking, the log holds one short question and a "Mă gândesc" indicator — * the whole shell collapses to ~647px in a 1440px viewport and snaps back to * 1080px when a long answer lands. Header and footer don't move with it, * because their `.wrap` is an ordinary block child, not a flex item. * * With a definite width the item is full-width first and clamped by * max-width second, so the shell measures the same whatever it contains. */ .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; } /* Long-form, single-column reading pages (a single story, a saved user query report) keep a comfortable line length inside the wider app shell — text is centred in a narrower column so lines don't run too long to read. */ .story-detail, .report-detail { max-width: var(--readw); margin-inline: auto; } /* ── Header ──────────────────────────────────────────────── */ .site-header { border-bottom: 1px solid var(--rule); padding: 1.25rem 0; margin-bottom: 2rem; } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; } .header-right { display: flex; align-items: center; gap: 0.5rem; } .header-auth { display: flex; align-items: center; gap: 0.5rem; } /* Buttons — shared verbatim with the PWA (services/pwa-app/src/styles.css) so the header auth CTAs render identically on the server-rendered Jinja pages. */ .btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1.1rem; border: 1px solid var(--rule-soft); border-radius: 6px; background: var(--bg); color: var(--text); text-decoration: none; font-size: 0.95rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: border-color 0.15s, opacity 0.15s; } .btn:hover { border-color: var(--text); text-decoration: none; } .btn--primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); } .btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); opacity: 1; } .btn--sm { padding: 0.4rem 0.8rem; font-size: 0.85rem; } .btn--ghost { background: transparent; } .brand { font-weight: 700; font-size: 1.1rem; letter-spacing: 0; color: var(--text); text-decoration: none; } .brand:hover { text-decoration: none; } .nav-desktop { display: flex; align-items: baseline; gap: 0.85rem; flex-shrink: 0; } .nav-desktop a { color: var(--text-dim); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none; white-space: nowrap; } .nav-desktop a:hover { color: var(--text); text-decoration: underline; } /* Theme toggle button — flips data-theme on and persists in localStorage. Renders a sun (in dark mode) or moon (in light mode). */ .theme-toggle { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 0.35rem; font: inherit; line-height: 0; display: inline-flex; align-items: center; justify-content: center; transition: border-color 0.15s, color 0.15s; } .theme-toggle:hover { color: var(--text); } .theme-toggle svg { display: block; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: inline; } [data-theme="dark"] .theme-toggle .icon-sun { display: inline; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* Hamburger button — hidden on desktop */ .nav-burger { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 0.25rem; line-height: 0; } /* ── Mobile drawer ──────────────────────────────────────── */ .nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 900; opacity: 0; transition: opacity 0.25s; } .nav-backdrop.open { display: block; opacity: 1; } .nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 260px; max-width: 80vw; background: var(--bg); border-left: 1px solid var(--rule-soft); z-index: 950; transform: translateX(100%); transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); display: flex; flex-direction: column; } .nav-drawer.open { transform: translateX(0); } .nav-drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--rule-soft); } .nav-drawer-close { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 0.25rem; line-height: 0; } .nav-drawer-close:hover { color: var(--text); } .nav-drawer-links { display: flex; flex-direction: column; padding: 1rem 0; flex: 1; } .nav-drawer-links a { display: block; padding: 0.75rem 1.5rem; color: var(--text); font-size: 1rem; text-decoration: none; letter-spacing: 0.02em; } .nav-drawer-links a:hover { background: var(--bg-elev); } .nav-drawer-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--rule-soft); } .nav-drawer-footer .theme-toggle { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.5rem 0; } .theme-toggle-label { font-size: 0.85rem; color: var(--text-dim); } @media (max-width: 768px) { .nav-desktop { display: none; } .nav-burger { display: inline-flex; } /* Auth buttons live in the drawer on mobile — hide the top-bar pair so they don't overlap the hamburger. */ .header-auth { display: none; } } /* ── Footer ──────────────────────────────────────────────── */ .site-footer { margin-top: auto; padding: 1.5rem 0; color: var(--text-faint); font-size: 0.7rem; text-align: center; letter-spacing: 0.04em; } .nav-lock { margin-left: 0.3rem; opacity: 0.45; vertical-align: -1px; } .footer-legal { display: flex; gap: 1.1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 0.6rem; } .footer-legal a { color: var(--text-faint); text-decoration: none; } .footer-legal a:hover { color: var(--text-dim); text-decoration: underline; } /* ── Page header ─────────────────────────────────────────── */ .page-header { margin: 1.5rem 0 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule); } .kicker { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-faint); margin: 0 0 0.6rem; } .page-header h1 { margin: 0 0 0.5rem; font-size: 2.1rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; } .page-header .lead { color: var(--text-dim); font-size: 1.05rem; margin: 0.6rem 0 0; } .warmup { border-left: 2px solid var(--rule); padding: 0.4rem 0 0.4rem 0.9rem; color: var(--text-dim); font-size: 0.9rem; font-style: italic; margin: 1rem 0 0; } /* ── Sections ────────────────────────────────────────────── */ .section { margin: 2.5rem 0; } .section h2 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--text); margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule); } /* ── Story list (daily index) ────────────────────────────── */ /* Each story is a card with a clear gray border on all four sides. The numbered counter sits inside the card, top-left. */ .story-list { list-style: none; padding: 0; margin: 0; counter-reset: story; } .story-list li { counter-increment: story; margin: 0; border-top: 1px solid var(--rule-soft); background: var(--bg); transition: background 0.15s; } .story-list li:last-child { border-bottom: 1px solid var(--rule-soft); } .story-link { display: block; color: var(--text); text-decoration: none; position: relative; padding: 1.25rem 0 1.25rem 2rem; } .story-link::before { content: counter(story, decimal-leading-zero); position: absolute; left: 0; top: 1.4rem; color: var(--text-faint); font-size: 0.85rem; font-variant-numeric: tabular-nums; letter-spacing: 0.05em; } .story-link h3 { margin: 0 0 0.4rem; font-size: 1.2rem; font-weight: 600; line-height: 1.35; color: var(--text); } .story-link:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .story-link .summary { margin: 0.4rem 0 0; color: var(--text-dim); font-size: 0.95rem; line-height: 1.55; } /* ── Channel chips (kept minimal) ────────────────────────── */ /* Per-station channel tag — a deliberately DIFFERENT visual language from the sentiment badge so the two never read as the same kind of label: • channel = squared (3px), OUTLINED, uppercase call-sign, coloured left spine • sentiment = rounded pill, coloured round dot, tinted fill Channels are colour-coded via a left spine that consumes the shared --ch- tokens (same palette as the analytics charts); the label stays --text-dim for legibility (channel colours like yellow fail text contrast). */ .station-chip { display: inline-flex; align-items: center; margin: 0.4rem 0.5rem 0 0; padding: 0.1em 0.5em; border-radius: 3px; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.5; color: var(--text-dim); background: transparent; border: 1px solid var(--rule-soft); white-space: nowrap; vertical-align: middle; } /* Per-channel colour spine (shared --ch- tokens; CVD-safe palette). */ .station-chip--digi24 { border-left: 3px solid var(--ch-digi24); } .station-chip--antena3 { border-left: 3px solid var(--ch-antena3); } .station-chip--b1 { border-left: 3px solid var(--ch-b1); } .station-chip--realitateaplus { border-left: 3px solid var(--ch-realitateaplus); } .station-chip--romaniatv { border-left: 3px solid var(--ch-romaniatv); } .channels { margin: 0.5rem 0 0; } /* ── Connection lists (hidden + first-time) ──────────────── */ .link-list { list-style: none; padding: 0; margin: 0; } .link-list li { padding: 0.85rem 0; border-top: 1px solid var(--rule-soft); margin: 0; font-size: 0.95rem; line-height: 1.55; } .link-list li:last-child { border-bottom: 1px solid var(--rule-soft); } .link-list .via { color: var(--text-faint); font-size: 0.85rem; font-style: italic; } .link-list strong { font-weight: 600; color: var(--text); } /* ── Story detail ────────────────────────────────────────── */ .breadcrumb { margin: 0 0 1rem; font-size: 0.85rem; color: var(--text-dim); } .breadcrumb a { color: var(--text-dim); text-decoration: none; } .breadcrumb a:hover { color: var(--text); text-decoration: underline; } /* Editorial-divergence callout (P4-C3) — the key cross-channel-bias insight, elevated from a plain italic line into a tinted accent box. */ .divergence { margin: 1.5rem 0; padding: 1rem 1.15rem; background: color-mix(in srgb, var(--mixed) 8%, transparent); border: 1px solid color-mix(in srgb, var(--mixed) 22%, transparent); border-left: 3px solid var(--mixed); border-radius: 8px; } .divergence h2 { font-size: 0.9rem; text-transform: none; letter-spacing: 0; margin: 0 0 0.45rem; padding: 0; border-bottom: none; color: var(--mixed); } .divergence p { margin: 0; color: var(--text); line-height: 1.6; } .per-channel-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 600px) { .per-channel-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; } } .per-channel { border-top: 1px solid var(--rule-soft); padding-top: 0.85rem; } .channel-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 0.4rem; font-size: 0.95rem; } .channel-head strong { font-weight: 600; color: var(--text); } /* Unified sentiment badge (P4-C2) — one glanceable component, RO labels. Replaces .sentiment / .alert-sentiment / .relation-sentiment. */ .badge-sentiment { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.12em 0.6em; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; line-height: 1.6; border: 1px solid transparent; white-space: nowrap; vertical-align: middle; } .badge-sentiment::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; flex: none; } .badge-sentiment--positive { color: var(--positive); background: color-mix(in srgb, var(--positive) 12%, transparent); border-color: color-mix(in srgb, var(--positive) 30%, transparent); } .badge-sentiment--negative { color: var(--negative); background: color-mix(in srgb, var(--negative) 12%, transparent); border-color: color-mix(in srgb, var(--negative) 30%, transparent); } .badge-sentiment--neutral { color: var(--neutral); background: color-mix(in srgb, var(--neutral) 12%, transparent); border-color: color-mix(in srgb, var(--neutral) 30%, transparent); } .badge-sentiment--mixed { color: var(--mixed); background: color-mix(in srgb, var(--mixed) 12%, transparent); border-color: color-mix(in srgb, var(--mixed) 30%, transparent); } /* Per-channel framing (P4-C3) — the editorial framing is the substance of each card, so lift it from dim small text to primary readable copy with a subtle quote accent. */ .per-channel p { margin: 0; padding-left: 0.7rem; border-left: 2px solid var(--rule-soft); color: var(--text); font-size: 0.92rem; line-height: 1.6; } /* ── Archive ─────────────────────────────────────────────── */ .archive-list { list-style: none; padding: 0; margin: 0; } .archive-list li { margin: 0; border-top: 1px solid var(--rule-soft); } .archive-list li:last-child { border-bottom: 1px solid var(--rule-soft); } .archive-list a { display: grid; grid-template-columns: 110px 1fr auto; gap: 1.5rem; align-items: baseline; padding: 1rem 0; color: var(--text); text-decoration: none; } .archive-list a:hover .archive-headline { text-decoration: underline; } .archive-date { color: var(--text-faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; font-variant-numeric: tabular-nums; } .archive-headline { color: var(--text); font-size: 0.98rem; font-weight: 500; } .archive-meta { color: var(--text-faint); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } /* ── Rapoarte page (PWA): latest-report hero + searchable archive ── */ .reports-hero { display: block; border: 1px solid var(--rule-soft); border-left: 3px solid var(--brand); border-radius: 10px; padding: 1.25rem 1.5rem; margin: 0 0 2rem; text-decoration: none; color: var(--text); transition: background 0.15s ease; } .reports-hero:hover { background: var(--bg-elev); } .reports-hero .kicker { margin: 0 0 0.3rem; } .reports-hero-date { margin: 0 0 0.75rem; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; } .reports-hero-stories { margin: 0 0 0.9rem; padding-left: 1.1rem; color: var(--text-dim); font-size: 0.95rem; line-height: 1.6; } .reports-hero-stories li { margin: 0 0 0.2rem; } .reports-hero-cta { color: var(--brand); font-weight: 600; font-size: 0.9rem; } /* Latest report rendered in full inline (not just a headline teaser). Framed like the hero card, but expands to the whole report body (reuses the shared daily-page .section / .story-list / .link-list styles). */ .reports-latest { border: 1px solid var(--rule-soft); border-left: 3px solid var(--brand); border-radius: 10px; padding: 1.25rem 1.5rem; margin: 0 0 2rem; } .reports-latest .kicker { margin: 0 0 0.3rem; } .reports-latest .reports-hero-date { margin: 0 0 0.75rem; } .reports-latest .section:first-of-type { margin-top: 1.25rem; } .reports-latest .section:last-child { margin-bottom: 0; } .reports-archive-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 0.5rem; } .reports-archive-head h2 { margin: 0; font-size: 1.15rem; } .reports-archive-filters { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: flex-end; } .reports-search { flex: 1; min-width: 180px; max-width: 320px; padding: 0.5rem 0.75rem; font-size: 0.9rem; border: 1px solid var(--rule-soft); border-radius: 8px; background: transparent; color: var(--text); } .reports-date { flex: 0 0 auto; padding: 0.5rem 0.75rem; font-size: 0.9rem; font-family: inherit; border: 1px solid var(--rule-soft); border-radius: 8px; background: transparent; color: var(--text); color-scheme: light dark; } .reports-date:focus-visible, .reports-search:focus-visible { outline: none; border-color: var(--brand); } .archive-item { border-top: 1px solid var(--rule-soft); } .archive-item:last-child { border-bottom: 1px solid var(--rule-soft); } .pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1.5rem 0 0; } .pager-btn { padding: 0.4rem 0.9rem; font-size: 0.85rem; border: 1px solid var(--rule-soft); border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; } .pager-btn:hover:not(:disabled) { background: var(--bg-elev); } .pager-btn:disabled { opacity: 0.4; cursor: default; } .pager-status { font-size: 0.85rem; color: var(--text-faint); font-variant-numeric: tabular-nums; } /* ── Badges ──────────────────────────────────────────────── */ .badge { display: inline-block; padding: 0.15rem 0.55rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; border: 1px solid currentColor; margin-left: 0.5rem; } .badge-warn { color: var(--warn); } /* ── Empty / placeholder ─────────────────────────────────── */ .empty { color: var(--text-dim); padding: 2rem 0; font-size: 0.95rem; font-style: italic; } .empty-state .empty { font-size: 1.05rem; } /* ── Auth pages (login, verify, forbidden) ──────────────────── */ .auth-page { display: flex; justify-content: center; align-items: flex-start; min-height: 60vh; padding: 4rem 1rem 2rem; } .auth-card { width: 100%; max-width: 420px; text-align: center; } /* Icon circle */ .auth-icon { width: 80px; height: 80px; margin: 0 auto 1.75rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule-soft); border-radius: 50%; color: var(--text-dim); } .auth-icon--warn { color: var(--warn); border-color: var(--warn); } .auth-title { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.5rem; letter-spacing: -0.01em; } .auth-subtitle { font-size: 0.95rem; color: var(--text-dim); margin: 0 0 1.5rem; line-height: 1.6; } .auth-phone-display { font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.1em; margin: -0.5rem 0 1.75rem; color: var(--text); } /* Error banner */ .auth-error { display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: var(--negative); font-size: 0.9rem; margin: 0 0 1.25rem; padding: 0.65rem 1rem; border: 1px solid var(--negative); border-radius: 6px; background: color-mix(in srgb, var(--negative) 6%, transparent); } /* Fields */ .auth-field { text-align: left; margin-bottom: 1.25rem; } .auth-field label { display: block; font-size: 0.8rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; } .auth-input { display: block; width: 100%; padding: 0.75rem 0.85rem; font-size: 1.05rem; font-family: inherit; color: var(--text); background: var(--bg); border: none; outline: none; } /* Standalone input (no prefix wrapper) */ .auth-field > .auth-input { border: 1px solid var(--rule-soft); border-radius: 6px; transition: border-color 0.15s; } .auth-field > .auth-input:focus { border-color: var(--text); } /* An `.auth-input` + submit button sharing one row, outside `.auth-field` (Account → "Adaugă email"). Two things this fixes, both of which had been worked around at the call site: 1. The border. `.auth-input` is deliberately borderless — the border comes from `.auth-field > .auth-input`, and this input has no such parent. It used to carry `border`/`border-radius` as an INLINE style, which no cascade layer can override, so UI v2 could not restyle it however correctly it targeted the selector. Stating it here lets v2 restate it in its own layer, the way it already does for `.auth-field > .auth-input`. 2. The wrap. `.btn` is an inline-flex with no `white-space`, so a greedy input squeezed it until "Trimite cod" broke across two lines. The button keeps its intrinsic width; the input takes the remainder (`min-width: 0` because a flex item's default `min-width: auto` refuses to shrink below its content). */ .input-row { display: flex; gap: 0.5rem; align-items: center; } .input-row > .auth-input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--rule-soft); border-radius: 6px; transition: border-color 0.15s; } .input-row > .auth-input:focus { border-color: var(--text); } .input-row > .btn { flex: 0 0 auto; white-space: nowrap; } .auth-code { font-size: 1.8rem; letter-spacing: 0.45em; text-align: center; font-variant-numeric: tabular-nums; font-weight: 500; padding: 0.85rem 1rem; } .auth-code::placeholder { letter-spacing: 0.35em; color: var(--rule-soft); } /* Primary button */ .auth-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.8rem 1.5rem; font-size: 1rem; font-weight: 600; font-family: inherit; color: var(--bg); background: var(--text); border: none; border-radius: 6px; cursor: pointer; transition: opacity 0.15s, transform 0.1s; text-decoration: none; } .auth-btn:hover { opacity: 0.85; } .auth-btn:active { transform: scale(0.98); } /* Secondary button (forbidden page) */ .auth-btn--secondary { background: transparent; color: var(--text); border: 1px solid var(--rule-soft); } .auth-btn--secondary:hover { border-color: var(--text); opacity: 1; } /* Alt actions row (resend + change number) */ .auth-alt-actions { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-top: 1.25rem; } .auth-sep { color: var(--rule-soft); } .auth-link { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 0.85rem; font-family: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .auth-link:hover { color: var(--text); } .auth-muted { color: var(--text-dim); font-size: 0.85rem; } /* Signup consent row: checkbox + inline links */ .auth-consent { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.25rem 0 1.25rem; text-align: left; font-size: 0.82rem; color: var(--text-dim); line-height: 1.45; } .auth-consent input[type="checkbox"] { margin-top: 0.15rem; flex-shrink: 0; } .auth-consent a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; } /* Footer note */ .auth-footer-note { margin-top: 1.5rem; font-size: 0.75rem; color: var(--text-faint); line-height: 1.4; } /* Mobile tweaks */ @media (max-width: 480px) { .auth-page { padding-top: 2rem; } .auth-icon { width: 64px; height: 64px; margin-bottom: 1.25rem; } .auth-icon svg { width: 36px; height: 36px; } .auth-title { font-size: 1.3rem; } .auth-code { font-size: 1.5rem; letter-spacing: 0.35em; } } /* ── Shared page elements ───────────────────────────────── */ .page-header { margin-bottom: 2rem; } .page-header h1 { font-size: 1.5rem; margin: 0 0 0.25rem; font-weight: 700; } .page-subtitle { color: var(--text-dim); font-size: 0.95rem; margin: 0; } .empty-note { color: var(--text-faint); font-style: italic; margin: 2rem 0; } /* ── Modal (logout confirmation) ────────────────────────── */ .modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 1000; opacity: 0; transition: opacity 0.2s; } .modal-backdrop.open { display: block; opacity: 1; } .modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); width: 340px; max-width: calc(100vw - 2rem); background: var(--bg); border: 1px solid var(--rule-soft); border-radius: 12px; padding: 2rem; text-align: center; z-index: 1001; opacity: 0; transition: opacity 0.2s, transform 0.2s; } .modal.open { display: block; opacity: 1; transform: translate(-50%, -50%) scale(1); } .modal-icon { color: var(--text-dim); margin-bottom: 1rem; } .modal-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 0.5rem; } .modal-text { font-size: 0.9rem; color: var(--text-dim); margin: 0 0 1.5rem; line-height: 1.5; } .modal-actions { display: flex; gap: 0.75rem; } .modal-btn { flex: 1; padding: 0.6rem 1rem; font-size: 0.9rem; font-family: inherit; font-weight: 600; border-radius: 6px; cursor: pointer; text-decoration: none; text-align: center; transition: opacity 0.15s; border: 1px solid var(--rule-soft); } .modal-btn:hover { opacity: 0.85; } .modal-btn--cancel { background: transparent; color: var(--text); } .modal-btn--confirm { background: var(--negative); color: #fff; border-color: var(--negative); } /* ── Query page (single question → answer) ──────────────── */ .query-page { padding-bottom: 2rem; } .query-hero { text-align: center; padding: 3rem 0 1.5rem; transition: padding 0.3s; } .query-hero.compact { padding: 1rem 0; } .query-hero h1 { font-size: 1.5rem; margin: 0 0 0.3rem; font-weight: 700; transition: font-size 0.3s; } .query-hero.compact h1 { font-size: 1.1rem; } .query-hero-sub { color: var(--text-dim); font-size: 0.9rem; margin: 0 0 1.5rem; transition: opacity 0.3s, max-height 0.3s; } .query-hero.compact .query-hero-sub { opacity: 0; max-height: 0; margin: 0; overflow: hidden; } /* Search bar */ .query-bar { display: flex; align-items: center; max-width: 600px; margin: 0 auto; background: var(--bg-elev); border: 1px solid var(--rule-soft); border-radius: 24px; padding: 0.3rem 0.4rem; transition: border-color 0.15s; } .query-bar:focus-within { border-color: var(--text); } .query-bar-input { flex: 1; border: none; outline: none; background: transparent; font-size: 1rem; font-family: inherit; color: var(--text); padding: 0.5rem 0.75rem; } .query-bar-settings, .query-bar-submit { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 0.45rem; line-height: 0; border-radius: 50%; transition: color 0.15s, background 0.15s; } .query-bar-settings:hover, .query-bar-submit:hover { color: var(--text); background: var(--rule-hairline); } .query-bar-settings.active { color: var(--text); } .query-bar-submit:disabled { opacity: 0.3; cursor: wait; } .query-settings { max-width: 600px; margin: 0.5rem auto 0; text-align: center; } .query-settings select { padding: 0.35rem 0.6rem; font-size: 0.85rem; font-family: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--rule-soft); border-radius: 4px; } /* Suggestion pills */ .query-suggestions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin-top: 1.5rem; } .query-suggestions button { background: transparent; border: 1px solid var(--rule-soft); border-radius: 20px; padding: 0.4rem 1rem; font-size: 0.85rem; font-family: inherit; color: var(--text-dim); cursor: pointer; transition: border-color 0.15s, color 0.15s; } .query-suggestions button:hover { border-color: var(--text); color: var(--text); } /* Loading */ .query-loading { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 2rem 0; color: var(--text-dim); font-size: 0.95rem; } .query-spinner { width: 20px; height: 20px; border: 2px solid var(--rule-soft); border-top-color: var(--text); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Handoff to Stripe (Billing, arriving with ?plan= from the marketing site). Creating a Checkout session takes a beat, and the page used to spend that beat rendering the price list — so someone who had already chosen a plan on revelat.ai was shown the two prices again and asked, in effect, to choose twice. This occupies the gap instead. Tokens only, so v2 follows the palette without restating anything. */ .pay-redirect { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; min-height: 55vh; text-align: center; padding: 2rem 1rem; } .pay-redirect-spinner { width: 44px; height: 44px; border: 3px solid var(--rule-soft); border-top-color: var(--brand); border-radius: 50%; animation: spin 0.8s linear infinite; } .pay-redirect-title { font-size: 1.05rem; font-weight: 600; color: var(--text); } .pay-redirect-note { font-size: 0.9rem; color: var(--text-dim); max-width: 34ch; } /* A spinner is decorative, but an indefinite one is also the only signal that anything is happening — so reduced motion gets a pulse rather than nothing. */ @media (prefers-reduced-motion: reduce) { .pay-redirect-spinner { animation: pay-redirect-pulse 1.4s ease-in-out infinite; border-top-color: var(--rule-soft); background: var(--brand); } } @keyframes pay-redirect-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } .query-error-box { max-width: 600px; margin: 1.5rem auto; padding: 0.75rem 1rem; color: var(--negative); border: 1px solid var(--negative); border-radius: 6px; font-size: 0.9rem; background: color-mix(in srgb, var(--negative) 6%, transparent); text-align: center; } /* Result card */ .query-result { max-width: 700px; margin: 1.5rem auto 0; border: 1px solid var(--rule-soft); border-radius: 8px; overflow: hidden; } .query-result-question { padding: 1rem 1.25rem; background: var(--bg-elev); font-weight: 600; font-size: 1rem; border-bottom: 1px solid var(--rule-hairline); } .query-result-answer { padding: 1.25rem; font-size: 0.95rem; line-height: 1.7; } .query-result-sources { padding: 0 1.25rem; } .sources-toggle { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: none; font-size: 0.75rem; font-family: inherit; color: var(--text-faint); cursor: pointer; padding: 0.2rem 0; text-transform: uppercase; letter-spacing: 0.04em; } .sources-toggle:hover { color: var(--text-dim); } .sources-toggle svg { transition: transform 0.2s; } .sources-toggle.open svg { transform: rotate(180deg); } .sources-list { margin-top: 0.4rem; padding-bottom: 0.5rem; } .query-result-meta { display: flex; gap: 1.5rem; font-size: 0.7rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; padding: 0.75rem 1.25rem; border-top: 1px solid var(--rule-hairline); background: var(--bg-elev); } /* Shared markdown content styling */ .md-content h2, .md-content h3, .md-content h4 { font-size: 0.95rem; font-weight: 700; margin: 0.75rem 0 0.3rem; } .md-content h2:first-child, .md-content h3:first-child, .md-content h4:first-child { margin-top: 0; } .md-content ul, .md-content ol { margin: 0.3rem 0; padding-left: 1.2rem; } .md-content li { margin: 0.15rem 0; } .md-content code { font-size: 0.85em; padding: 0.1rem 0.3rem; background: var(--rule-hairline); border-radius: 3px; } .md-content pre { margin: 0.5rem 0; padding: 0.6rem 0.8rem; background: var(--bg-elev); border: 1px solid var(--rule-hairline); border-radius: 4px; overflow-x: auto; font-size: 0.85em; } .md-content pre code { padding: 0; background: none; } .md-content strong { font-weight: 700; } .md-content p { margin: 0 0 0.5rem; } .md-content p:last-child { margin: 0; } .citation-chip { display: inline-block; font-size: 0.7rem; padding: 0.15rem 0.4rem; margin: 0.1rem 0.2rem 0.1rem 0; border: 1px solid var(--rule-soft); border-radius: 3px; color: var(--text-dim); } @media (max-width: 768px) { .query-hero { padding: 1.5rem 0 1rem; } .query-bar { border-radius: 12px; } .query-result { border-radius: 0; border-left: none; border-right: none; margin-left: -1.5rem; margin-right: -1.5rem; } } /* ── Alerts page ────────────────────────────────────────── */ .alerts-list { display: flex; flex-direction: column; } .alert-card { display: flex; gap: 0.9rem; border-bottom: 1px solid var(--rule-hairline); padding: 1rem 0; } .alert-body { flex: 1; min-width: 0; } .alert-term-group { display: inline-flex; gap: 0.4rem; align-items: center; } .alert-thumb { position: relative; flex-shrink: 0; width: 120px; height: 68px; border: 0; padding: 0; border-radius: 6px; overflow: hidden; cursor: pointer; background: var(--bg-elev); } .alert-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .alert-thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0, 0, 0, 0.25); opacity: 0.9; transition: opacity 0.15s, background 0.15s; } .alert-thumb:hover .alert-thumb-play { opacity: 1; background: rgba(0, 0, 0, 0.42); } .alert-relevance { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.05em 0.4em; border-radius: 3px; color: var(--text-faint); border: 1px solid var(--rule-soft); } .alert-relevance--principal { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 45%, transparent); } /* filter bar + clip lightbox */ .alerts-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; } .alerts-filters input, .alerts-filters select { padding: 0.4rem 0.6rem; font-size: 0.85rem; border: 1px solid var(--rule-soft); border-radius: 6px; background: transparent; color: var(--text); } .alerts-filter-search { flex: 1; min-width: 160px; } .video-modal-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.7); padding: 1rem; } .video-modal { position: relative; width: 100%; max-width: 800px; } .video-modal-player { width: 100%; border-radius: 8px; display: block; background: #000; max-height: 80vh; } .video-modal-close { position: absolute; top: -2.4rem; right: 0; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.15); color: #fff; font-size: 1rem; cursor: pointer; } .alert-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.5rem; } .alert-header-left { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .alert-header-right { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .alert-term { font-weight: 600; font-size: 0.95rem; } .alert-channel { font-size: 0.8rem; color: var(--text-dim); } .alert-time { font-size: 0.75rem; color: var(--text-faint); font-variant-numeric: tabular-nums; } .alert-summary { font-size: 0.9rem; color: var(--text-dim); margin: 0 0 0.5rem; line-height: 1.55; } .alert-media-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--text-dim); text-decoration: none; border: 1px solid var(--rule-soft); border-radius: 4px; padding: 0.3rem 0.6rem; transition: border-color 0.15s, color 0.15s; margin-top: 0.25rem; } .alert-media-link:hover { color: var(--text); border-color: var(--text); } @media (max-width: 768px) { .alert-header { flex-direction: column; align-items: flex-start; gap: 0.3rem; } } /* ── Public teaser feed (P4-E) ──────────────────────────── */ .feed-teaser-note { border: 1px solid var(--rule-soft); border-left: 3px solid var(--accent); border-radius: 6px; background: var(--bg-elev); padding: 0.75rem 1rem; margin-bottom: 1.5rem; } .feed-teaser-note p { margin: 0; font-size: 0.9rem; color: var(--text-dim); } .feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; } .feed-card { border: 1px solid var(--rule-soft); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; } .feed-thumb { position: relative; aspect-ratio: 16 / 9; background: var(--bg-elev); } .feed-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .feed-thumb-badge { position: absolute; top: 0.5rem; left: 0.5rem; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; color: #fff; background: rgba(0, 0, 0, 0.6); padding: 0.15rem 0.4rem; border-radius: 3px; } .feed-body { padding: 0.85rem; display: flex; flex-direction: column; gap: 0.4rem; } .feed-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .feed-when { font-size: 0.75rem; color: var(--text-faint); font-variant-numeric: tabular-nums; } /* ── Account page ───────────────────────────────────────── */ .account-grid { display: flex; flex-direction: column; gap: 1.25rem; } .account-card { border: 1px solid var(--rule-soft); border-radius: 8px; overflow: hidden; } .account-card-header { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; background: var(--bg-elev); border-bottom: 1px solid var(--rule-hairline); } .account-avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--text); color: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; flex-shrink: 0; } .account-name { font-size: 1.1rem; font-weight: 700; margin: 0; } .account-phone { font-size: 0.85rem; color: var(--text-dim); margin: 0.15rem 0 0; font-variant-numeric: tabular-nums; } .account-card-body { padding: 1rem 1.25rem; } .account-row { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0; border-bottom: 1px solid var(--rule-hairline); } .account-row:last-child { border-bottom: none; } .account-label { font-size: 0.85rem; color: var(--text-dim); } .account-status { font-size: 0.85rem; font-weight: 600; } .account-status--active { color: var(--positive); } .account-status--passive, .account-status--pending { color: var(--warn); } .account-status--unsubscribed { color: var(--text-faint); } .account-section-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; margin: 0; padding: 0.85rem 1.25rem; background: var(--bg-elev); border-bottom: 1px solid var(--rule-hairline); color: var(--text-dim); } .account-count { margin-left: auto; font-size: 0.75rem; color: var(--text-faint); font-weight: 400; } .tier-badge { display: inline-block; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.5rem; border-radius: 3px; } .tier-badge--free { color: var(--text-faint); border: 1px solid var(--rule-soft); } .tier-badge--paid { color: #4f46e5; border: 1px solid #4f46e5; } .tier-badge--admin { color: var(--warn); border: 1px solid var(--warn); } .tier-expiry { font-size: 0.8rem; color: var(--text-faint); margin-left: 0.4rem; } .usage-count { font-weight: 600; font-variant-numeric: tabular-nums; } .usage-cap { font-size: 0.85rem; color: var(--text-faint); } .usage-warn { font-size: 0.7rem; color: var(--negative); margin-left: 0.4rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .kw-row { padding: 0.6rem 0; border-bottom: 1px solid var(--rule-hairline); display: flex; flex-direction: column; gap: 0.15rem; } .kw-row:last-child { border-bottom: none; } .kw-term { font-weight: 600; font-size: 0.9rem; } .kw-desc { font-size: 0.8rem; color: var(--text-dim); } .pref-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; } .pref-item { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; padding: 0.25rem 0.6rem; border-radius: 4px; border: 1px solid var(--rule-soft); } .pref-on { color: var(--positive); border-color: var(--positive); } .pref-off { color: var(--text-faint); text-decoration: line-through; } .account-footer-note { text-align: center; font-size: 0.8rem; color: var(--text-faint); margin-top: 2rem; } @media (max-width: 768px) { .chat-container { height: calc(100vh - 130px); } .chat-bubble { max-width: 92%; } .alert-header { flex-direction: column; align-items: flex-start; gap: 0.4rem; } .alert-header-right { width: 100%; justify-content: space-between; } .account-card-header { flex-direction: column; text-align: center; } .account-row { flex-direction: column; align-items: flex-start; gap: 0.25rem; } } /* ── Archive user reports ───────────────────────────────── */ .archive-section { margin-bottom: 2.5rem; } .archive-section-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule-hairline); } .archive-count { margin-left: auto; font-weight: 400; color: var(--text-faint); font-size: 0.75rem; } .archive-badge { display: inline-block; font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.4rem; border-radius: 3px; flex-shrink: 0; } .archive-query-icon { vertical-align: -1px; margin-right: 0.4rem; color: var(--mixed); flex-shrink: 0; } /* ── Report detail page ─────────────────────────────────── */ .report-detail { padding-bottom: 2rem; } .breadcrumb { font-size: 0.8rem; color: var(--text-faint); margin-bottom: 1.5rem; } .breadcrumb a { color: var(--text-dim); } .report-header { margin-bottom: 2rem; } .report-header h1 { font-size: 1.3rem; margin: 0.5rem 0 0.3rem; font-weight: 700; } .report-meta-line { font-size: 0.8rem; color: var(--text-faint); margin: 0; } .report-body { font-size: 0.95rem; line-height: 1.7; margin-bottom: 2rem; } .report-sources { border-top: 1px solid var(--rule-hairline); padding-top: 1rem; } .report-sources-title { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin: 0 0 0.5rem; } .report-sources-list { display: flex; flex-wrap: wrap; gap: 0.3rem; } /* ── Archive mobile ─────────────────────────────────────── */ @media (max-width: 768px) { .archive-list a { grid-template-columns: 1fr; gap: 0.25rem; } .archive-date { font-size: 0.75rem; } .archive-meta { font-size: 0.7rem; } } /* ── Preferences page ───────────────────────────────────── */ .pref-toast { max-width: 600px; margin: 0 auto 1.5rem; padding: 0.6rem 1rem; font-size: 0.9rem; color: var(--positive); border: 1px solid var(--positive); border-radius: 6px; text-align: center; background: color-mix(in srgb, var(--positive) 6%, transparent); } .pref-section-desc { font-size: 0.85rem; color: var(--text-dim); margin: 0 0 1rem; } .pref-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin: 0.75rem 0 0.4rem; } .pref-label:first-of-type { margin-top: 0; } .pref-checks { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; } .pref-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; cursor: pointer; color: var(--text); } .pref-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--text); cursor: pointer; } .pref-save-btn { display: block; width: 100%; max-width: 200px; margin: 1.25rem auto 0; padding: 0.65rem 1.5rem; font-size: 0.95rem; font-weight: 600; font-family: inherit; color: var(--bg); background: var(--text); border: none; border-radius: 6px; cursor: pointer; transition: opacity 0.15s; } .pref-save-btn:hover { opacity: 0.85; } .pref-kw-row { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 0; border-bottom: 1px solid var(--rule-hairline); } .pref-kw-row:last-of-type { border-bottom: none; } .pref-kw-info { display: flex; flex-direction: column; gap: 0.1rem; } .pref-remove-btn { background: none; border: 1px solid var(--rule-soft); border-radius: 4px; color: var(--text-faint); cursor: pointer; padding: 0.3rem; line-height: 0; transition: color 0.15s, border-color 0.15s; } .pref-remove-btn:hover { color: var(--negative); border-color: var(--negative); } /* Two-step delete confirm: the trash button arms this inline prompt so a stray click can't remove a monitored term outright. */ .kw-remove-confirm { display: inline-flex; align-items: center; gap: 0.35rem; } .kw-remove-confirm-label { font-size: 0.8rem; color: var(--text-dim); white-space: nowrap; } .kw-remove-yes, .kw-remove-no { background: none; border: 1px solid var(--rule-soft); border-radius: 4px; padding: 0.25rem 0.6rem; font: inherit; font-size: 0.8rem; line-height: 1.2; cursor: pointer; transition: color 0.15s, border-color 0.15s, background 0.15s; } .kw-remove-yes { color: var(--negative); border-color: var(--negative); } .kw-remove-yes:hover { background: var(--negative); color: var(--bg); } .kw-remove-no { color: var(--text-dim); } .kw-remove-no:hover { border-color: var(--text-dim); color: var(--text); } .kw-remove-yes:disabled, .kw-remove-no:disabled { opacity: 0.5; cursor: default; } .pref-kw-note { font-size: 0.8rem; color: var(--text-faint); margin: 0.75rem 0 0; font-style: italic; } /* ── Entity pages ───────────────────────────────────────── */ .entity-profile { padding-bottom: 2rem; } .entity-header { margin-bottom: 2rem; } .entity-header h1 { font-size: 1.5rem; margin: 0.4rem 0 0.5rem; font-weight: 700; } .entity-desc { font-size: 0.95rem; color: var(--text-dim); line-height: 1.6; margin: 0 0 0.75rem; } .entity-meta { display: flex; gap: 1.5rem; font-size: 0.8rem; color: var(--text-faint); margin-bottom: 0.5rem; } .entity-aliases { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; } .entity-alias { font-size: 0.75rem; padding: 0.15rem 0.5rem; border: 1px solid var(--rule-soft); border-radius: 3px; color: var(--text-dim); } /* Type badges */ .entity-type { display: inline-block; font-size: 0.65rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.15rem 0.45rem; border-radius: 3px; border: 1px solid; } .entity-type--person { color: #3b82f6; border-color: #3b82f6; } .entity-type--organization { color: #6366f1; border-color: #6366f1; } .entity-type--location { color: #22c55e; border-color: #22c55e; } .entity-type--event { color: #f59e0b; border-color: #f59e0b; } .entity-type--topic { color: var(--text-dim); border-color: var(--rule-soft); } .entity-type--legislation { color: #e11d48; border-color: #e11d48; } .entity-type--document { color: #64748b; border-color: #64748b; } /* Sections */ .entity-section { margin-bottom: 2rem; } .entity-section-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--text-dim); margin: 0 0 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule-hairline); } .entity-section-note { font-weight: 400; font-size: 0.75rem; color: var(--text-faint); margin-left: auto; } /* Timeline */ .entity-timeline { display: flex; flex-direction: column; } .timeline-day { display: flex; align-items: baseline; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule-hairline); } .timeline-date { font-size: 0.8rem; color: var(--text-faint); font-variant-numeric: tabular-nums; min-width: 90px; flex-shrink: 0; } .timeline-channels { display: flex; flex-wrap: wrap; gap: 0.5rem; } .timeline-channel { font-size: 0.85rem; color: var(--text-dim); } .timeline-count { font-size: 0.75rem; font-weight: 600; color: var(--text-faint); margin-left: 0.15rem; } /* Relations */ .entity-relations { display: flex; flex-direction: column; } .relation-card { display: block; padding: 0.75rem 0; border-bottom: 1px solid var(--rule-hairline); text-decoration: none; color: var(--text); transition: background 0.15s; } .relation-card:hover { background: var(--bg-elev); } .relation-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } .relation-name { font-weight: 600; font-size: 0.95rem; } .relation-meta { display: flex; align-items: center; gap: 0.5rem; } .relation-type { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); } .relation-weight { font-size: 0.7rem; color: var(--text-faint); } .relation-context { font-size: 0.8rem; color: var(--text-dim); margin: 0.25rem 0 0; line-height: 1.4; } /* Entity search page */ .entity-search { display: flex; max-width: 500px; margin: 0 auto 2rem; border: 1px solid var(--rule-soft); border-radius: 24px; overflow: hidden; transition: border-color 0.15s; } .entity-search:focus-within { border-color: var(--text); } .entity-search-input { flex: 1; border: none; outline: none; background: transparent; font-size: 1rem; font-family: inherit; color: var(--text); padding: 0.6rem 1rem; } .entity-search-btn { background: none; border: none; color: var(--text-dim); cursor: pointer; padding: 0.6rem 0.85rem; line-height: 0; } .entity-search-btn:hover { color: var(--text); } .entity-results { display: flex; flex-direction: column; } .entity-result { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--rule-hairline); text-decoration: none; color: var(--text); transition: background 0.15s; } .entity-result:hover { background: var(--bg-elev); } .entity-result-header { display: flex; align-items: center; gap: 0.5rem; } .entity-result-name { font-weight: 600; font-size: 0.95rem; } .entity-result-desc { font-size: 0.85rem; color: var(--text-dim); margin: 0.25rem 0 0; line-height: 1.4; } @media (max-width: 768px) { .timeline-day { flex-direction: column; gap: 0.25rem; } .timeline-date { min-width: auto; } .entity-meta { flex-direction: column; gap: 0.25rem; } } /* ── Analytics (Pro sentiment page) ──────────────────────────────── */ .analytics-controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } /* Segmented time-unit control */ .seg { display: inline-flex; border: 1px solid var(--rule-soft); border-radius: 6px; overflow: hidden; } .seg-btn { appearance: none; border: none; background: transparent; color: var(--text-dim); font: inherit; font-size: 0.85rem; padding: 0.35rem 0.85rem; cursor: pointer; transition: background 0.12s, color 0.12s; } .seg--sm .seg-btn { padding: 0.2rem 0.55rem; font-size: 0.72rem; } .entity-mentions-toggle { margin-left: auto; } .mentions-chart { width: 100%; margin: 0.75rem 0 0.25rem; } .mentions-chart svg { width: 100%; height: auto; display: block; overflow: visible; } .mentions-chart-axis { stroke: var(--rule-soft); stroke-width: 1; } .mentions-chart-label { fill: var(--text-faint); font-size: 11px; } .seg-btn + .seg-btn { border-left: 1px solid var(--rule-soft); } .seg-btn:hover { background: var(--bg-elev); color: var(--text); } .seg-btn--active { background: var(--accent); color: var(--bg); } .seg-btn--active:hover { background: var(--accent); color: var(--bg); } /* Per-channel summary rail beside a single full-width chart (landing demo): ranked net score + a diverging bar + mentions. Rows are buttons — they double as the chart's channel filter, which is why a plain legend is no longer needed anywhere. */ .channel-rail { min-width: 0; } .channel-rail-title { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 600; margin: 0 0 0.5rem; } .channel-rail-row { appearance: none; display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--rule-hairline); padding: 0.5rem 0; font: inherit; color: var(--text-dim); cursor: pointer; transition: opacity 0.12s; } .channel-rail-row:last-child { border-bottom: 0; } .channel-rail-row:hover { color: var(--text); } .channel-rail-row--off { opacity: 0.4; } .channel-rail-row--off:hover { opacity: 0.65; } .channel-rail-head { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.82rem; } .channel-rail-swatch { width: 0.62rem; height: 0.62rem; border-radius: 2px; flex: none; align-self: center; } .channel-rail-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .channel-rail-score { margin-left: auto; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; } /* Bar diverges from a centred zero, so a negative month reads as negative without needing the number. */ .channel-rail-bar { display: block; position: relative; height: 4px; margin-top: 0.35rem; background: var(--rule-hairline); } .channel-rail-fill { position: absolute; top: 0; bottom: 0; display: block; } .channel-rail-sub { display: block; margin-top: 0.2rem; font-size: 0.7rem; color: var(--text-faint); font-variant-numeric: tabular-nums; } /* Interactive channel filter (swatch chips that toggle a line on/off) — used at both the page level and inside each chart's per-graph controls; doubles as the legend. */ .channel-toggles { display: flex; align-items: center; gap: 0.4rem 0.55rem; flex-wrap: wrap; } .channel-toggle { appearance: none; display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--rule-soft); border-radius: 999px; background: var(--bg); color: var(--text-dim); font: inherit; font-size: 0.75rem; padding: 0.15rem 0.55rem 0.15rem 0.4rem; cursor: pointer; transition: background 0.12s, color 0.12s, opacity 0.12s; } .channel-toggle:hover { background: var(--bg-elev); color: var(--text); } .channel-toggle-swatch { width: 0.7rem; height: 0.7rem; border-radius: 2px; display: inline-block; flex: none; } .channel-toggle--off { opacity: 0.4; } .channel-toggle--off .channel-toggle-swatch { background: var(--rule-soft) !important; } .channel-toggle--off:hover { opacity: 0.65; } .analytics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.25rem; } /* Chart wrapper carrying per-graph filters above the (now borderless) chart. */ .chart-card { border: 1px solid var(--rule-soft); border-radius: 6px; background: var(--bg); display: flex; flex-direction: column; min-width: 0; overflow: hidden; } .chart-card .sentiment-chart { border: none; border-radius: 0; } .chart-card-bar { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; padding: 0.4rem 0.7rem 0; } .chart-filter-btn { appearance: none; border: none; background: transparent; color: var(--text-faint); font: inherit; font-size: 0.75rem; padding: 0.1rem 0.2rem; cursor: pointer; } .chart-filter-btn:hover, .chart-filter-btn--open { color: var(--brand); } .chart-filter-reset { appearance: none; border: none; background: transparent; color: var(--text-faint); font: inherit; font-size: 0.72rem; cursor: pointer; text-decoration: underline; } .chart-filter-reset:hover { color: var(--text-dim); } .chart-card-controls { display: flex; flex-direction: column; gap: 0.7rem; padding: 0.6rem 0.7rem 0.7rem; border-bottom: 1px solid var(--rule-hairline); } /* Each control on its own labelled row; the label is a fixed-width gutter so the seg + chips align, and the seg keeps its natural width (never stretches). */ .chart-control-group { display: flex; align-items: center; gap: 0.5rem 0.6rem; flex-wrap: wrap; } .chart-control-label { flex: none; width: 3.5rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); } /* Chart + summary rail (`rail` prop): the chart takes the width it needs and the remainder goes to the per-channel ranking. Rail drops below the chart on narrow viewports. */ .chart-card-split { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 0.25rem 1.4rem; align-items: start; padding: 0 0.9rem 0.9rem; } .chart-card-plot { min-width: 0; } .chart-card--rail .sentiment-chart { padding-left: 0; padding-right: 0; } .chart-card--rail .channel-rail { padding-top: 1rem; } @media (max-width: 720px) { .chart-card-split { grid-template-columns: minmax(0, 1fr); } .chart-card--rail .channel-rail { padding-top: 0.25rem; } } .sentiment-chart { margin: 0; border: 1px solid var(--rule-soft); border-radius: 6px; padding: 0.9rem 1rem 0.6rem; background: var(--bg); min-width: 0; } .sentiment-chart--empty { display: flex; flex-direction: column; } .sentiment-chart--empty .empty-note { margin: 0.75rem 0 0.5rem; font-size: 0.85rem; } .sentiment-chart-title { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; font-weight: 600; font-size: 0.95rem; color: var(--text); margin-bottom: 0.5rem; } .sentiment-chart-sub { font-weight: 400; font-size: 0.72rem; color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; } .sentiment-chart-plot { position: relative; } .sentiment-chart-svg { display: block; width: 100%; height: auto; background: var(--bg); overflow: visible; } /* One smooth line per channel; stroke color is the per-channel token (inline). */ .sentiment-chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .sentiment-chart-dot { stroke: var(--bg); stroke-width: 1.5; } .sentiment-chart-axis { stroke: var(--rule-soft); stroke-width: 1; } /* Recessive half-scale guides above/below the zero baseline. */ .sentiment-chart-grid { stroke: var(--rule-hairline); stroke-width: 1; } .sentiment-chart-crosshair { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 2 2; } .sentiment-chart-xlabel, .sentiment-chart-ylabel { fill: var(--text-faint); font-size: 11px; font-variant-numeric: tabular-nums; } /* ±peak reference labels flank the centred zero baseline. */ .sentiment-chart-ylabel { font-size: 10px; } .sentiment-chart-tip { position: absolute; top: 0; transform: translateX(-50%); pointer-events: none; background: var(--bg); border: 1px solid var(--rule-soft); border-radius: 6px; padding: 0.45rem 0.6rem; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); min-width: 132px; z-index: 5; } .sentiment-chart-tip-date { font-size: 0.72rem; font-weight: 600; color: var(--text); margin-bottom: 0.3rem; } .sentiment-chart-tip-row { display: grid; grid-template-columns: 0.7rem 1fr auto; align-items: center; gap: 0.4rem; font-size: 0.72rem; color: var(--text-dim); line-height: 1.5; } .sentiment-chart-tip-swatch { width: 0.6rem; height: 0.6rem; border-radius: 2px; } .sentiment-chart-tip-val { font-variant-numeric: tabular-nums; color: var(--text); } .sentiment-chart-tip-total { margin-top: 0.3rem; padding-top: 0.3rem; border-top: 1px solid var(--rule-hairline); font-size: 0.72rem; color: var(--text-dim); display: flex; justify-content: space-between; } .sentiment-chart-tip-total strong { color: var(--text); font-variant-numeric: tabular-nums; } @media (max-width: 768px) { .analytics-grid { grid-template-columns: 1fr; } .analytics-controls { gap: 0.75rem; } } /* ── Legal documents (Terms / Privacy) ──────────────────── */ .legal-doc { max-width: 46rem; margin: 0 auto 3rem; font-size: 0.95rem; line-height: 1.75; color: var(--text-dim); } .legal-doc .legal-updated { font-size: 0.8rem; color: var(--text-faint); margin: -1rem 0 2rem; } .legal-doc h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); margin: 2.4rem 0 0.8rem; padding-top: 1.6rem; border-top: 1px solid var(--rule-hairline); } .legal-doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.5rem; } .legal-doc h3 { font-size: 1rem; font-weight: 600; color: var(--text); margin: 1.6rem 0 0.5rem; } .legal-doc p { margin: 0 0 1rem; } .legal-doc ul, .legal-doc ol { margin: 0 0 1rem; padding-left: 1.4rem; } .legal-doc li { margin: 0 0 0.4rem; } .legal-doc a { color: var(--brand); } .legal-doc strong { color: var(--text); font-weight: 600; } .legal-doc .legal-note { border-left: 2px solid var(--brand); background: color-mix(in srgb, var(--brand) 5%, transparent); padding: 0.75rem 1rem; border-radius: 0 6px 6px 0; margin: 0 0 1.5rem; font-size: 0.88rem; color: var(--text-dim); } .legal-doc .legal-fill { background: color-mix(in srgb, var(--brand) 12%, transparent); border-radius: 3px; padding: 0 0.25em; font-style: normal; color: var(--text); } .legal-doc table { width: 100%; border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.85rem; } .legal-doc th, .legal-doc td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--rule-hairline); vertical-align: top; } .legal-doc th { color: var(--text); font-weight: 600; } /* ── Billing / subscription portal ──────────────────────── */ .billing-banner { max-width: 640px; margin: 0 0 1.25rem; padding: 0.7rem 1rem; border-radius: 8px; font-size: 0.9rem; border: 1px solid var(--rule-soft); } .billing-banner--ok { color: var(--positive); border-color: var(--positive); background: color-mix(in srgb, var(--positive) 7%, transparent); } .billing-banner--err { color: var(--negative); border-color: var(--negative); background: color-mix(in srgb, var(--negative) 7%, transparent); } .billing-summary { margin-bottom: 1.25rem; } .billing-note { font-size: 0.85rem; color: var(--text-dim); margin: 0.5rem 0 0; } .billing-note--faint { color: var(--text-faint); font-size: 0.8rem; } .billing-note a { color: var(--brand); } .billing-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 1.25rem 0; } .billing-plan { display: flex; } .billing-plan .account-card-body { display: flex; flex-direction: column; width: 100%; } .billing-plan--current { border-color: var(--brand); } .billing-plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; } .billing-plan-name { font-size: 1.15rem; font-weight: 700; margin: 0; } .billing-plan-price { font-size: 1.35rem; font-weight: 700; margin: 0; white-space: nowrap; } .billing-plan-per { font-size: 0.8rem; font-weight: 400; color: var(--text-faint); } .billing-plan-trial { font-size: 0.8rem; font-weight: 600; color: var(--brand); margin: 0 0 0.4rem; } .billing-plan-blurb { font-size: 0.88rem; color: var(--text-dim); margin: 0 0 0.75rem; } .billing-plan-features { list-style: none; padding: 0; margin: 0 0 1rem; font-size: 0.88rem; color: var(--text-dim); flex: 1; } .billing-plan-features li { padding: 0.25rem 0 0.25rem 1.3rem; position: relative; } .billing-plan-features li::before { content: "✓"; position: absolute; left: 0; color: var(--brand); font-weight: 700; } /* ── Agent-assisted add-keyword modal ───────────────────── */ .account-add-kw { margin-left: auto; } .akw-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.5); padding: 1rem; } .akw-modal { background: var(--bg); border: 1px solid var(--rule-soft); border-radius: 12px; padding: 1.5rem; width: 100%; max-width: 420px; } .akw-title { margin: 0 0 0.75rem; font-size: 1.1rem; } .akw-help { font-size: 0.88rem; color: var(--text-dim); margin: 0 0 0.5rem; } .akw-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); margin: 0.75rem 0 0.3rem; } .akw-input { width: 100%; padding: 0.5rem 0.7rem; font-size: 0.9rem; border: 1px solid var(--rule-soft); border-radius: 8px; background: transparent; color: var(--text); } .akw-proposal { border-left: 3px solid var(--brand); background: color-mix(in srgb, var(--brand) 6%, transparent); border-radius: 0 8px 8px 0; padding: 0.75rem 1rem; margin: 0 0 0.25rem; } .akw-proposal-term { margin: 0 0 0.25rem; font-weight: 600; } .akw-proposal-desc { margin: 0; font-size: 0.88rem; color: var(--text-dim); line-height: 1.5; } .akw-error { color: var(--negative); font-size: 0.85rem; margin: 0.5rem 0 0; } .akw-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end; margin-top: 1.25rem; } .monitor-teaser { border: 1px solid var(--rule-soft); border-radius: 10px; padding: 1.75rem 1.5rem; text-align: center; max-width: 480px; margin: 1.5rem auto; } .monitor-teaser h2 { margin: 0 0 0.5rem; font-size: 1.15rem; } .monitor-teaser p { color: var(--text-dim); font-size: 0.92rem; margin: 0 0 1rem; line-height: 1.6; } .billing-manage { margin-top: 0.5rem; } .billing-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; } .billing-confirm { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--text-dim); } /* Pre-confirm card for a previewed plan switch — brand-accented to stand out. */ .billing-confirm-card { margin-bottom: 1.25rem; border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand) inset; } .billing-confirm-card .billing-actions { margin-top: 0.9rem; } /* Scheduled-downgrade notice inside the summary card. */ .billing-scheduled { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; } @media (max-width: 640px) { .billing-plans { grid-template-columns: 1fr; } } } /* end @layer base — kg-web canonical design system */