/* 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 . */ :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; --positive: #1a7f3a; --negative: #b22222; --neutral: #555555; --mixed: #6b3fa0; --warn: #8a5a00; --maxw: 720px; } [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; --positive: #5cd68a; --negative: #ff7373; --neutral: #a0a0a0; --mixed: #c4a3ff; --warn: #f0c060; } /* 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; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; } /* ── 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; } .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; } } /* ── 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; } /* ── 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) ────────────────────────── */ .chip { display: inline-block; color: var(--text-faint); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0.4rem 0.6rem 0 0; } .chip::before { content: "· "; color: var(--text-faint); } .chip:first-child::before { content: ""; } .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; } .divergence p { color: var(--text-dim); font-style: italic; } .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); } .sentiment { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; padding: 0; border: none; background: none; } .sentiment-positive { color: var(--positive); } .sentiment-negative { color: var(--negative); } .sentiment-neutral { color: var(--neutral); } .sentiment-mixed { color: var(--mixed); } .per-channel p { margin: 0; color: var(--text-dim); font-size: 0.9rem; line-height: 1.55; } /* ── 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; } /* ── 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); } .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); } /* 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); } } .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 { border-bottom: 1px solid var(--rule-hairline); padding: 1rem 0; } .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-sentiment { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.35rem; border-radius: 3px; } .alert-sentiment--pozitiv { color: var(--positive); border: 1px solid var(--positive); } .alert-sentiment--negativ { color: var(--negative); border: 1px solid var(--negative); } .alert-sentiment--neutru { color: var(--neutral); border: 1px solid var(--neutral); } .alert-sentiment--mixt { color: var(--mixed); border: 1px solid var(--mixed); } .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; } } /* ── 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); } .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-sentiment { font-size: 0.65rem; text-transform: uppercase; padding: 0.1rem 0.3rem; border-radius: 3px; } .relation-sentiment--positive, .relation-sentiment--pozitiv { color: var(--positive); border: 1px solid var(--positive); } .relation-sentiment--negative, .relation-sentiment--negativ { color: var(--negative); border: 1px solid var(--negative); } .relation-sentiment--neutral, .relation-sentiment--neutru { color: var(--neutral); border: 1px solid var(--neutral); } .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; } }