/* * GeoPolMap — application styles. * * All theming is driven by CSS custom properties keyed off the * `data-theme` attribute on , which js/app.js sets to "light" or * "dark" (and keeps in sync with the basemap + localStorage). Setting the * attribute before first paint (see the inline logic in app.js) avoids a * flash of the wrong theme. */ /* ---- Vendored wordmark font (§4.4/§10.2 — self-hosted, no CDN) ------------- */ /* * Archivo (Omnibus-Type), SIL OFL 1.1 — see fonts/OFL.txt. Self-hosted variable * woff2 (latin subset only; the wordmark is ASCII). Exposes the width + weight * axes, so a single file gives us the condensed cut at both wordmark weights. * font-display: swap → the system-condensed fallback shows until it loads. */ @font-face { font-family: "Archivo Condensed"; font-style: normal; font-weight: 300 800; font-stretch: 62.5%; font-display: swap; src: url("../fonts/archivo-condensed-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122; } /* ---- Theme tokens --------------------------------------------------------- */ /* Light theme is the default set of tokens. */ :root { --bg: #f5f3ee; /* page backdrop; roughly matches the light basemap */ --ctrl-bg: #ffffff; /* control (button) background */ --ctrl-bg-hover: #efefef; --ctrl-fg: #1a1a1a; /* control icon/text colour */ --ctrl-border: rgba(0, 0, 0, 0.12); --ctrl-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); /* Panels / legend surfaces + text */ --panel-bg: #fbfaf7; --panel-fg: #1a1a1a; --muted-fg: #6b6459; --hairline: rgba(0, 0, 0, 0.10); --accent: #b8781f; /* amber; matches the selected-country treatment */ --panel-shadow: -2px 0 18px rgba(0, 0, 0, 0.14); /* Two-row masthead: rows carry subtly contrasting surfaces (§ item 8). */ --masthead-top-bg: #efece4; /* wordmark row — slightly deeper */ --masthead-main-bg: #fbfaf7; /* search + toolbar row */ --search-border: #1e40af; /* search box: dark blue, stands out (§ item 9) */ --masthead-h: 88px; /* two-row masthead height; the map starts below it */ } /* Dark theme overrides. */ :root[data-theme="dark"] { --bg: #14181c; /* roughly matches the dark basemap */ --ctrl-bg: #232a31; --ctrl-bg-hover: #2d353d; --ctrl-fg: #e8eaed; --ctrl-border: rgba(255, 255, 255, 0.14); --ctrl-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); --panel-bg: #1c2228; --panel-fg: #e8eaed; --muted-fg: #9aa3ad; --hairline: rgba(255, 255, 255, 0.10); --accent: #e0b84a; --panel-shadow: -2px 0 18px rgba(0, 0, 0, 0.5); --masthead-top-bg: #12171b; /* wordmark row — slightly deeper than main */ --masthead-main-bg: #1c2228; /* search + toolbar row */ --search-border: #4d84f0; /* lighter blue for dark-theme contrast */ } /* ---- Layout --------------------------------------------------------------- */ html, body { margin: 0; height: 100%; } body { background: var(--bg); /* shown behind the canvas until tiles paint */ } /* Full-viewport map. */ /* Map fills the viewport BELOW the masthead (§3). */ #map { position: absolute; top: var(--masthead-h); right: 0; bottom: 0; left: 0; } /* ---- Light/dark toggle control ------------------------------------------- * The container reuses MapLibre's own control classes (.maplibregl-ctrl, * .maplibregl-ctrl-group) so it sits and spaces itself like the built-in * controls. We restyle the button with our theme tokens so it matches the * active theme rather than MapLibre's fixed white default. */ /* Selector carries the parent class so it out-specifies MapLibre's `.maplibregl-ctrl-group button { display:block }` — otherwise the block layout wins and the inline SVG left-aligns instead of centering (§ item 1). */ .theme-toggle .theme-toggle__btn { display: flex; align-items: center; justify-content: center; width: 29px; height: 29px; padding: 0; border: none; background: var(--ctrl-bg); color: var(--ctrl-fg); cursor: pointer; } .theme-toggle .theme-toggle__btn:hover { background: var(--ctrl-bg-hover); } /* The inline SVG inherits the button's text colour. */ .theme-toggle__btn svg { width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Give the toggle's own container group the themed surface + shadow so it * reads as one piece with the button. */ .theme-toggle.maplibregl-ctrl-group { background: var(--ctrl-bg); border: 1px solid var(--ctrl-border); box-shadow: var(--ctrl-shadow); } /* ---- Info panel ----------------------------------------------------------- * One component, two layouts (see js/info-panel.js): * .mode-rail → right drawer (desktop/tablet, v1) * .mode-sheet → bottom sheet (phone, later — styled now so it's free) * `.is-open` runs the slide-in transition; the closed transform differs per * mode so each hides off its own edge. */ .info-panel { position: fixed; z-index: 5; display: flex; flex-direction: column; background: var(--panel-bg); color: var(--panel-fg); box-shadow: var(--panel-shadow); font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; transition: transform 0.22s ease; will-change: transform; } /* Rail: drawer on the right, starting BELOW the masthead so its header is never hidden behind it (§ item 2). */ .info-panel.mode-rail { top: var(--masthead-h); right: 0; bottom: 0; width: 340px; max-width: 88vw; border-left: 1px solid var(--hairline); transform: translateX(100%); } .info-panel.mode-rail.is-open { transform: translateX(0); } /* Sheet: bottom drawer spanning the width (phone layout, not active in v1). */ .info-panel.mode-sheet { left: 0; right: 0; bottom: 0; max-height: 62vh; border-top: 1px solid var(--hairline); border-radius: 14px 14px 0 0; transform: translateY(100%); } .info-panel.mode-sheet.is-open { transform: translateY(0); } .info-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 12px; border-bottom: 1px solid var(--hairline); } /* Flag + name group (§ item 12). */ .info-panel__id { display: flex; align-items: center; gap: 10px; min-width: 0; } .info-panel__flag { flex: none; width: 28px; height: 20px; border-radius: 3px; border: 1px solid var(--hairline); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--ctrl-bg); } .info-panel__flag-img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Neutral placeholder — dashed muted pennant, never a broken image. */ .info-panel__flag.is-placeholder { border-style: dashed; background: transparent; color: var(--muted-fg); } .info-panel__flag .flag-ph { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* Contested marker (§ item 12): a subtle accent ring + small corner wedge — a distinguishing affordance, not a warning icon. --accent is themed, so it stays legible in light and dark. The flag becomes an activatable "more info" control. */ .info-panel__flag.is-contested { overflow: visible; /* let the corner wedge show */ cursor: pointer; box-shadow: 0 0 0 1.5px var(--accent); } .info-panel__flag.is-contested .info-panel__flag-img { border-radius: 2px; } .info-panel__flag.is-contested::after { content: ""; position: absolute; right: -1px; bottom: -1px; border: 5px solid transparent; border-right-color: var(--accent); border-bottom-color: var(--accent); } .info-panel__flag.is-contested:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Recognition context popover, anchored under the flag/name row. */ .info-panel__id { position: relative; } .recognition-note { position: absolute; top: calc(100% + 8px); left: 0; z-index: 6; width: 300px; max-width: calc(100vw - 44px); padding: 10px 12px; background: var(--panel-bg); color: var(--panel-fg); border: 1px solid var(--hairline); border-left: 3px solid var(--accent); border-radius: 8px; box-shadow: var(--ctrl-shadow); font-size: 12.5px; line-height: 1.5; } .recognition-note__text { margin: 0; } .recognition-note__source { margin: 6px 0 0; color: var(--muted-fg); font-size: 11.5px; } .recognition-note__source a { color: var(--search-border); } .info-panel__title { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: 0.01em; } .info-panel__close { flex: none; width: 28px; height: 28px; border: none; border-radius: 6px; background: transparent; color: var(--muted-fg); font-size: 22px; line-height: 1; cursor: pointer; } .info-panel__close:hover { background: var(--ctrl-bg-hover); color: var(--panel-fg); } .info-panel__body { padding: 14px 18px 20px; overflow-y: auto; } .info-panel__facts { margin: 0 0 18px; } .info-panel__fact { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid var(--hairline); } .info-panel__fact dt { color: var(--muted-fg); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; } .info-panel__fact dd { margin: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; } .mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 13px; } /* Sourced-assertion codes (§5.7). The code sits right-aligned like any fact; a researched source note (user-assigned / NE-shared / "none assigned") reads as a smaller, left-aligned, un-transformed line beneath it. */ .info-panel__code { font-variant-numeric: tabular-nums; } .info-panel__iso--none { color: var(--muted-fg); } .info-panel__code-src { align-self: stretch; text-align: left; font-size: 11px; line-height: 1.35; color: var(--muted-fg); text-transform: none; letter-spacing: 0; } .info-panel__section-title { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-fg); } .info-panel__empty { margin: 0; color: var(--muted-fg); font-style: italic; } /* ---- Interim toolbar: Back / Forward / Reset (top-centre) ----------------- * Minimal cluster until the full masthead/toolbar step. Themed via the same * control tokens; the 1px gap over the border colour makes hairline dividers. */ /* Toolbar now lives inline in masthead row 2 (was a floating cluster). */ .toolbar { display: flex; gap: 1px; background: var(--ctrl-border); border: 1px solid var(--ctrl-border); border-radius: 8px; overflow: hidden; } .toolbar__btn { display: inline-flex; align-items: center; gap: 6px; min-width: 34px; height: 32px; padding: 0 10px; border: none; background: var(--ctrl-bg); color: var(--ctrl-fg); font: inherit; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; } .toolbar__btn:hover { background: var(--ctrl-bg-hover); } /* Toolbar icons: sized clearly (fixes the too-small back/forward/reset — item 3). */ .toolbar__ico { flex: none; width: 18px; height: 18px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .toolbar__lbl { display: inline; } /* Disabled "coming soon" toolbar buttons (Export, History). */ .toolbar__btn--soon { color: var(--muted-fg); cursor: not-allowed; } .toolbar__btn--soon:hover { background: var(--ctrl-bg); } .toolbar__soon, .layers-menu__soon { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--panel-bg); background: var(--muted-fg); border-radius: 999px; padding: 1px 5px; line-height: 1.5; } /* Display modes (§ item 7) — driven by the toolbar's data-mode attribute. */ .toolbar[data-mode="icons"] .toolbar__lbl, .toolbar[data-mode="icons"] .toolbar__soon { display: none; } .toolbar[data-mode="text"] .toolbar__ico { display: none; } .toolbar[data-mode="minimal"] .toolbar__btn--evident .toolbar__lbl { display: none; } /* ---- Floating map control: 2D/3D globe + terrain -------------------------- */ .mapctl.maplibregl-ctrl-group { background: var(--ctrl-bg); border: 1px solid var(--ctrl-border); box-shadow: var(--ctrl-shadow); } .mapctl__btn { display: flex; align-items: center; justify-content: center; width: 29px; height: 29px; padding: 0; border: none; background: var(--ctrl-bg); color: var(--ctrl-fg); font-size: 16px; line-height: 1; cursor: pointer; } .mapctl__btn:hover { background: var(--ctrl-bg-hover); } .mapctl__btn.is-active { background: var(--accent); color: #fff; } /* ---- Graticule edge labels (DOM overlay, Mercator) ------------------------ */ .graticule-labels { position: fixed; inset: 0; z-index: 3; pointer-events: none; } .grat-label { position: absolute; font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--panel-fg); text-shadow: 0 0 2px var(--panel-bg), 0 0 2px var(--panel-bg), 0 0 4px var(--panel-bg); } .grat-label:not(.grat-label--lat) { bottom: 4px; transform: translateX(-50%); } .grat-label--lat { left: 4px; transform: translateY(-50%); } /* ---- Layers dropdown ------------------------------------------------------ */ .layers-menu { position: fixed; top: 50px; left: 50%; transform: translateX(-50%); z-index: 5; min-width: 220px; padding: 8px; background: var(--panel-bg); color: var(--panel-fg); border: 1px solid var(--hairline); border-radius: 8px; box-shadow: var(--ctrl-shadow); font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .layers-menu__title { margin: 2px 6px 8px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-fg); } .layers-menu__row { display: flex; align-items: center; gap: 9px; padding: 6px; border-radius: 6px; cursor: pointer; } .layers-menu__row:hover { background: var(--ctrl-bg-hover); } .layers-menu__swatch { flex: none; width: 13px; height: 13px; border-radius: 3px; border: 1px solid var(--hairline); } /* ---- Info-panel: layer memberships ---------------------------------------- */ .membership { display: flex; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--hairline); } .membership__swatch { flex: none; width: 12px; height: 12px; margin-top: 3px; border-radius: 3px; border: 1px solid var(--hairline); } .membership__body { min-width: 0; } .membership__layer { font-weight: 600; } .membership__detail { color: var(--panel-fg); } .membership__source, .membership__note { margin-top: 2px; font-size: 12px; color: var(--muted-fg); } .membership__note { font-style: italic; } .membership.is-lapsed .membership__layer, .membership.is-lapsed .membership__detail { color: var(--muted-fg); } .badge { display: inline-block; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 600; vertical-align: 1px; } .badge--lapsed { background: var(--ctrl-bg-hover); color: var(--muted-fg); } .badge--contested { background: rgba(179, 68, 59, 0.16); color: #b3443b; } /* ---- Legend (MapLibre bottom-left control) -------------------------------- */ .legend { min-width: 148px; max-width: 240px; padding: 10px 12px; background: var(--panel-bg); color: var(--panel-fg); border: 1px solid var(--hairline); border-radius: 8px; box-shadow: var(--ctrl-shadow); font: 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .legend__title { margin: 0 0 6px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-fg); } .legend__list { margin: 0; padding: 0; list-style: none; } .legend__item { display: flex; align-items: center; gap: 8px; padding: 3px 0; } .legend__swatch { flex: none; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--hairline); } .legend__empty { margin: 0; color: var(--muted-fg); font-style: italic; } /* ---- Masthead (two rows) — §3 --------------------------------------------- */ .masthead { position: fixed; top: 0; left: 0; right: 0; height: var(--masthead-h); z-index: 10; display: flex; flex-direction: column; background: var(--masthead-main-bg); color: var(--panel-fg); border-bottom: 1px solid var(--hairline); font: 14px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .masthead__row { display: flex; align-items: center; gap: 12px; padding: 0 14px; } /* Rows carry subtly contrasting surfaces so they read as two bands (§ item 8). */ .masthead__row--top { height: 36px; justify-content: space-between; background: var(--masthead-top-bg); border-bottom: 1px solid var(--hairline); } .masthead__row--main { flex: 1; background: var(--masthead-main-bg); } /* Wordmark: GEOPOL heavy + MAP light, condensed grotesque (§2). Self-hosted Archivo Condensed (see @font-face above); the remaining families are graceful fallbacks while it loads / if it fails to. */ .wordmark { font-family: "Archivo Condensed", "Saira Condensed", "Roboto Condensed", "Oswald", system-ui, sans-serif; font-stretch: 62.5%; font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase; user-select: none; } .wordmark__geo { font-weight: 800; } .wordmark__map { font-weight: 300; } .masthead__nav { display: flex; gap: 4px; } .masthead__link { border: none; background: transparent; color: var(--muted-fg); font: inherit; font-size: 13px; padding: 4px 8px; border-radius: 6px; cursor: pointer; } .masthead__link:hover { background: var(--ctrl-bg-hover); color: var(--panel-fg); } .masthead__gap { flex: 1; } /* ---- Search bar (Navigate mode, §7.1) ------------------------------------------------------ */ .search-bar { position: relative; flex: 1; max-width: 640px; display: flex; align-items: center; } .search-bar__icon { position: absolute; left: 11px; width: 17px; height: 17px; fill: none; stroke: var(--search-border); /* dark blue, stands out (§ item 9) */ stroke-width: 2.2; stroke-linecap: round; pointer-events: none; } .search-bar__input { width: 100%; height: 34px; padding: 0 12px 0 34px; border: 1.5px solid var(--search-border); /* dark blue border (§ item 9) */ border-radius: 8px; background: var(--ctrl-bg); color: var(--panel-fg); font: inherit; font-size: 14px; outline: none; } .search-bar__input::placeholder { color: var(--muted-fg); opacity: 0.9; } .search-bar__input:focus { border-color: var(--search-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--search-border) 24%, transparent); } .search-bar__results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; background: var(--panel-bg); border: 1px solid var(--hairline); border-radius: 8px; box-shadow: var(--ctrl-shadow); max-height: 320px; overflow-y: auto; z-index: 12; } .search-res { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 10px; border-radius: 6px; cursor: pointer; } .search-res.is-active { background: var(--ctrl-bg-hover); } .search-res__name { font-weight: 550; } .search-res__sub { color: var(--muted-fg); font-size: 12px; } .search-res--msg { color: var(--muted-fg); font-style: italic; cursor: default; } /* Places are nav-only "city" targets — visually flagged as distinct from selectable political entities (lighter name, tagged sub). */ .search-res--place .search-res__name { font-weight: 450; } .search-res--place .search-res__sub { font-variant: small-caps; letter-spacing: 0.03em; opacity: 0.85; } /* Toolbar dropdowns now open under their masthead buttons (placed in JS). */ .layers-menu { z-index: 12; } /* Map-menu placeholders for planned-but-unbuilt features (§ item 11). */ .layers-menu__divider { height: 1px; background: var(--hairline); margin: 6px 4px; } .layers-menu__row--soon { justify-content: space-between; color: var(--muted-fg); cursor: not-allowed; } .layers-menu__row--soon:hover { background: transparent; } /* ---- Settings modal (§ items 5 & 7) --------------------------------------- */ .settings-overlay[hidden] { display: none; } /* author display:flex would else beat [hidden] */ .settings-overlay { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; background: rgba(0, 0, 0, 0.42); } .settings { width: 460px; max-width: 100%; background: var(--panel-bg); color: var(--panel-fg); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4); font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; overflow: hidden; } .settings__head { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; background: var(--masthead-top-bg); border-bottom: 1px solid var(--hairline); } .settings__title { margin: 0; font-size: 17px; font-weight: 650; } .settings__close { width: 28px; height: 28px; border: none; border-radius: 6px; background: transparent; color: var(--muted-fg); font-size: 22px; line-height: 1; cursor: pointer; } .settings__close:hover { background: var(--ctrl-bg-hover); color: var(--panel-fg); } .settings__body { padding: 6px 18px 16px; max-height: 66vh; overflow-y: auto; } .settings__section { padding: 12px 0; } .settings__section + .settings__section { border-top: 1px solid var(--hairline); } .settings__section-title { margin: 0 0 3px; font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-fg); } .settings__hint { margin: 0 0 10px; color: var(--muted-fg); font-size: 13px; } .settings__options { display: flex; flex-direction: column; gap: 3px; } .settings__option { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; } .settings__option:hover { background: var(--ctrl-bg-hover); } .settings__option input { margin-top: 2px; accent-color: var(--search-border); } .settings__option-text { display: flex; flex-direction: column; } .settings__option-name { font-weight: 600; } .settings__option-hint { color: var(--muted-fg); font-size: 12.5px; } .settings__hint a { color: var(--search-border); } .settings__badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--panel-bg); background: var(--muted-fg); border-radius: 999px; padding: 1px 5px; vertical-align: 1px; } /* ---- About panel (§9 / §6.1 / §7.5) — product surface, not a footer -------- */ .about { width: 620px; } .about__body { line-height: 1.55; } .about__lede { margin: 4px 0 14px; font-size: 15px; } .about__section { padding: 12px 0; border-top: 1px solid var(--hairline); } .about__h { margin: 0 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-fg); } .about__section p { margin: 0 0 8px; font-size: 13.5px; } .about__list { margin: 0; padding-left: 18px; font-size: 13px; } .about__list li { margin: 3px 0; } .about__fine { color: var(--muted-fg); font-size: 12.5px; } /* ---- Query mode answer panel (§7.2) --------------------------------------- */ .answer-panel { position: fixed; top: calc(var(--masthead-h) + 10px); left: 14px; z-index: 9; width: 640px; max-width: calc(100vw - 28px); max-height: calc(100vh - var(--masthead-h) - 28px); display: flex; flex-direction: column; background: var(--panel-bg); color: var(--panel-fg); border: 1px solid var(--hairline); border-radius: 10px; box-shadow: var(--ctrl-shadow); font: 14px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .answer-panel[hidden] { display: none; } .answer-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--hairline); } .answer-panel__q { font-weight: 600; } .answer-panel__close { flex: none; width: 26px; height: 26px; border: none; border-radius: 6px; background: transparent; color: var(--muted-fg); font-size: 20px; line-height: 1; cursor: pointer; } .answer-panel__close:hover { background: var(--ctrl-bg-hover); color: var(--panel-fg); } .answer-panel__body { padding: 12px 14px; overflow-y: auto; } .answer-status { margin: 0; color: var(--muted-fg); font-style: italic; } /* Grounded segment: plain prose + source chips. */ .answer-seg { margin: 0 0 12px; } .answer-seg__text { margin: 0; } .answer-cites { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; } .answer-cite { font-size: 11.5px; color: var(--search-border); background: color-mix(in srgb, var(--search-border) 12%, transparent); border: 1px solid color-mix(in srgb, var(--search-border) 35%, transparent); border-radius: 999px; padding: 1px 8px; } /* General-knowledge segment — VISUALLY DISTINCT, explicitly labelled (§7.2). */ .answer-seg--general { padding: 10px 12px; border: 1px dashed var(--accent); border-radius: 8px; background: color-mix(in srgb, var(--accent) 9%, transparent); } .answer-genlabel { display: block; margin-bottom: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); } /* Honest refusal — "not in the loaded data". */ .answer-refusal { padding: 12px 14px; border: 1px solid var(--hairline); border-left: 3px solid var(--muted-fg); border-radius: 8px; background: var(--ctrl-bg-hover); } .answer-refusal__title { font-weight: 650; margin-bottom: 4px; } .answer-refusal__text { margin: 0; color: var(--muted-fg); } /* Provider-failure (§7.4): a contract failure must LOOK like one, not like a soft refusal. Warm border + tint distinguish it from "not in the loaded data". */ .answer-failed { border-left-color: var(--contested, #b3443b); background: color-mix(in srgb, #b3443b 8%, transparent); } .answer-failed .answer-refusal__title { color: #b3443b; } .answer-panel__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--hairline); color: var(--muted-fg); font-size: 12px; } .answer-clear { border: 1px solid var(--hairline); background: transparent; color: var(--panel-fg); font: inherit; font-size: 12px; padding: 3px 9px; border-radius: 6px; cursor: pointer; } .answer-clear:hover { background: var(--ctrl-bg-hover); }