:root {
    /* The darkened page behind every popup (login, privacy, library, section text). */
    --scrim: rgba(0, 33, 70, 0.45);
    --bg: #FFFFFF;
    --bg-subtle: #F8FAFB;
    --bg-inset: #EFF2F4;
    --border: #D2D8DD;
    --border-strong: #BEC6CD;
    --text: #091219;
    --text-muted: #59646D;
    --heading: #002146;
    --ink: #002146;
    --ink-hover: #0B3566;
    --gold: #D1BB85;
    --sidebar-bg: #002146;
    --modal-bg: #F2F5F7;
    --intent-selected-bg: #DFE8F3;
    --gold-text: #B89E5C;
    --select-bg: rgba(204, 225, 240, 0.25);
    --select-border: #032137;
    --select-pill: rgba(204, 225, 240, 0.6);
    --header-h: 40px;
    --sidebar-w: 320px;
    --sidebar-collapsed-w: 64px;
    --primary-color: #002146;
    --primary-hover-color: #0B3566;
    --color-sent: #0B6BCB;
    --color-received: #1E8E5A;
    --color-error: #C0392B;
    --color-warning: #B26A00;
    --row-alt: rgba(11, 15, 20, 0.03);
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
    --bg: #161B22;
    --bg-subtle: #0D1117;
    --bg-inset: #070A0E;
    --border: #2A313B;
    --border-strong: #3D4650;
    --text: #E6EDF3;
    --text-muted: #9AA4AF;
    --heading: #E6EDF3;
    --ink: #1F4A7A;
    --ink-hover: #2A5C93;
    --sidebar-bg: #07182B;
    --modal-bg: #161B22;
    --intent-selected-bg: rgba(127, 179, 230, 0.15);
    --gold-text: #D1BB85;
    --select-bg: rgba(127, 179, 230, 0.12);
    --select-border: #7FB3E6;
    --select-pill: rgba(127, 179, 230, 0.2);
    --primary-color: #7FB3E6;
    --primary-hover-color: #A3C9EE;
    --color-sent: #4DA3F0;
    --color-received: #3FBE84;
    --color-error: #E5675A;
    --color-warning: #E0A458;
    --row-alt: rgba(255, 255, 255, 0.05);
}

[hidden] { display: none !important; }

/* Hard stop at the top and bottom of the page: no rubber-band bounce. */
html { overscroll-behavior: none; }

/* Full width layout */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    box-sizing: border-box;
    background-color: var(--bg-subtle);
    color: var(--text);
}

h2 { margin-top: 0; }

app-nav { display: contents; }

/* Header */
.util-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: var(--header-h);
    box-sizing: border-box;
    background-color: color-mix(in srgb, var(--bg) 95%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    position: sticky;
    top: 0;
    z-index: 100;
}

.brand-group {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-brand { display: inline-flex; align-items: center; }
.header-brand .brand-logo { display: block; height: 24px; width: auto; }
/* The logo asset carries its own grey backdrop and border; in the header it sits bare. */
.header-brand #logoBgFill { fill: transparent; }
.header-brand #logoBorderFill { fill: transparent; }

.header-about {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
}

.header-about:hover { color: var(--heading); }


.session-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.session-label-inline {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.session-id {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    background-color: var(--bg-inset);
    border-radius: 4px;
    padding: 2px 6px;
}

.util-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
}

.util-icon-btn:hover { background-color: var(--bg-inset); color: var(--text); }

.util-bar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

.util-bar-right .session-group { margin-right: 12px; }

.header-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    height: 30px;
    padding: 0 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    font-weight: 600;
    text-transform: uppercase;
}

.header-btn:hover {
    background-color: var(--bg-subtle);
    color: var(--text);
}

.util-bar .header-btn {
    height: 25px;
    padding: 0 10px;
    border-radius: 2px;
    background-color: var(--bg-inset);
    font-family: inherit;
    letter-spacing: 0.025em;
}

.header-square-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 2px;
    background-color: var(--bg-subtle);
    color: var(--text-muted);
}

.header-square-btn:hover { background-color: var(--bg-inset); color: var(--text); }

.action-btn {
    height: 36px;
    padding: 0 16px;
    flex-shrink: 0;
}

.header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    height: 40px;
    width: 40px;
    padding: 0;
}

.header-icon-btn:hover {
    background-color: var(--bg-subtle);
    color: var(--text);
}

.header-menu-wrap { position: relative; }

.header-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(11, 15, 20, 0.12);
    padding: 10px;
    min-width: 220px;
    flex-direction: column;
    gap: 8px;
}

#navMenu { min-width: 180px; padding: 6px; gap: 2px; }

.header-menu-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
}

.header-menu-divider {
    border-top: 1px solid var(--border);
    margin: 2px 0;
}

.header-menu-link {
    padding: 7px 10px;
    border-radius: 3px;
    font-size: 13px;
}

.header-menu-link:hover { background-color: var(--bg-inset); }
.header-menu-link.active { background-color: var(--select-bg); }

#nav-admin { display: flex; align-items: center; gap: 6px; }
.nav-admin-lock { display: inline-flex; align-items: center; color: var(--text-muted); }

/* Shows which menu is open. */
.header-square-btn[aria-expanded="true"] { background-color: var(--bg-inset); color: var(--heading); }

.session-logout-btn {
    margin-top: 4px;
    background-color: #C0392B;
    color: white;
    border: none;
    border-radius: 2px;
    height: 32px;
    font-weight: 600;
    font-size: 14px;
}

.session-logout-btn:hover { background-color: #a5301f; }

.nav-link {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: color 0.2s;
}

.nav-link:hover { color: var(--text); }

.nav-link.active {
    color: var(--heading);
    font-weight: 600;
}

/* Workspace: research-logs sidebar + the routed views */
.workspace {
    display: flex;
    flex-grow: 1;
    min-height: 0;
}

.workspace-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* The aside reserves the sidebar's space in the layout; the panel inside draws it. Hovering the
   collapsed rail widens only the panel, over the page, so the page doesn't shift under the cursor. */
.research-sidebar {
    position: sticky;
    top: var(--header-h);
    z-index: 50;
    align-self: flex-start;
    height: calc(100vh - var(--header-h));
    width: var(--sidebar-w);
    flex-shrink: 0;
    background-color: var(--sidebar-bg);
    color: #FBFBFB;
}

.sidebar-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--sidebar-bg);
    transition: width 0.2s ease, box-shadow 0.2s ease;
}

.sidebar-heading {
    padding: 24px;
    border-bottom: 1px solid rgba(251, 251, 251, 0.1);
    flex-shrink: 0;
}

.sidebar-heading h2 {
    margin: 0;
    color: var(--gold);
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    letter-spacing: -0.03em;
}

.sidebar-heading p {
    margin: 4px 0 0;
    color: rgba(251, 251, 251, 0.5);
    font-size: 11px;
    line-height: 16.5px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.sidebar-logs {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-logs::-webkit-scrollbar-track { background: transparent; }
.sidebar-logs::-webkit-scrollbar-thumb { background: rgba(251, 251, 251, 0.2); }

.sidebar-empty {
    margin: 0;
    padding: 12px 14px;
    color: rgba(251, 251, 251, 0.5);
    font-size: 13px;
    line-height: 1.5;
}

.nav-link.sidebar-log {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 4px;
    border-left: 2px solid transparent;
    color: rgba(251, 251, 251, 0.9);
}

.nav-link.sidebar-log:hover { background-color: rgba(251, 251, 251, 0.06); color: #FCFCFC; }

.nav-link.sidebar-log.active {
    background-color: rgba(251, 251, 251, 0.1);
    border-left-color: var(--gold);
    color: #FCFCFC;
    font-weight: 500;
}

.sidebar-log-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Brighter than the page's own success/error colours, which are too dark on the navy. */
.sidebar-log-outcome { display: inline-flex; flex-shrink: 0; }

/* The page spinner is navy on white; on the navy sidebar it needs light colours. */
.sidebar-log-outcome.is-running .spinner {
    margin: 0;
    border-color: rgba(251, 251, 251, 0.2);
    border-top-color: var(--gold);
}

.sidebar-section-label {
    margin: 10px 0 2px;
    padding: 0 14px;
    color: rgba(251, 251, 251, 0.45);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.sidebar-section-label:first-child { margin-top: 0; }
.sidebar-log-outcome.is-answered { color: #5FD39A; }
.sidebar-log-outcome.is-unanswered,
.sidebar-log-outcome.is-failed { color: #F07A6E; }

.sidebar-log-title {
    min-width: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-log-date {
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(251, 251, 251, 0.4);
}

.sidebar-footer {
    flex-shrink: 0;
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 24px;
    background-color: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(251, 251, 251, 0.1);
}

.sidebar-new-btn {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    height: auto;
    padding: 8px 0;
    background: transparent;
    color: rgba(251, 251, 251, 0.7);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.sidebar-new-btn:hover { background: transparent; color: #FCFCFC; }

.sidebar-new-btn svg { flex-shrink: 0; }

/* Pinned to the sidebar's right edge rather than laid out in the band, so it travels with the
   edge while the sidebar animates -- and at the collapsed width lands centred in the rail. */
.sidebar-toggle {
    position: absolute;
    top: 22px;
    right: 16px;
}

.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 4px;
    background: transparent;
    color: rgba(251, 251, 251, 0.7);
}

.sidebar-toggle:hover { background-color: rgba(251, 251, 251, 0.1); color: #FCFCFC; }

.research-sidebar { transition: width 0.2s ease; }

/* Everything inside keeps the full expanded width in both states, and the sidebar just clips it:
   if the contents followed the animating width, text would re-wrap every frame and jump. The "+"
   sits inside the first 64px and the toggle rides the right edge, so collapsed leaves exactly
   those two showing. */
.sidebar-panel > * {
    width: var(--sidebar-w);
    box-sizing: border-box;
}

.sidebar-heading h2,
.sidebar-heading p,
.sidebar-logs,
.sidebar-new-label {
    transition: opacity 0.15s ease, visibility 0.15s;
}

/* Collapsed (the default). */
:root:not([data-sidebar="expanded"]) .research-sidebar { width: var(--sidebar-collapsed-w); }
:root:not([data-sidebar="expanded"]) .research-sidebar:not(.is-peeking) .sidebar-heading h2,
:root:not([data-sidebar="expanded"]) .research-sidebar:not(.is-peeking) .sidebar-heading p,
:root:not([data-sidebar="expanded"]) .research-sidebar:not(.is-peeking) .sidebar-logs,
:root:not([data-sidebar="expanded"]) .research-sidebar:not(.is-peeking) .sidebar-new-label {
    opacity: 0;
    visibility: hidden;
}

/* Peeking: the collapsed rail opened by hover or keyboard focus, drawn over the page. */
:root:not([data-sidebar="expanded"]) .research-sidebar.is-peeking .sidebar-panel {
    width: var(--sidebar-w);
    box-shadow: 12px 0 32px rgba(0, 0, 0, 0.22);
}

/* Landing hero */
#queryView { background-color: var(--bg); }

#landingView {
    max-width: 944px;
    width: 100%;
    margin: 0 auto;
    padding: 48px 24px;
    box-sizing: border-box;
}

.hero {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 10px;
    background-image:
        repeating-linear-gradient(0deg, color-mix(in srgb, var(--border) 55%, transparent) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(90deg, color-mix(in srgb, var(--border) 55%, transparent) 0 1px, transparent 1px 44px);
    background-color: var(--bg);
    padding: 48px 24px;
    text-align: center;
}

.hero-crosshair {
    position: absolute;
    font-family: var(--mono);
    color: color-mix(in srgb, var(--text-muted) 70%, transparent);
    font-size: 14.4px;
    line-height: 1;
}

.hero-crosshair-tl { top: -8px; left: -8px; }
.hero-crosshair-tr { top: -8px; right: -8px; }

.hero-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

.hero-tag {
    font-family: var(--mono);
    font-size: 11px;
    line-height: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--border);
    background-color: var(--bg);
    border-radius: 8px;
    padding: 4px 9px;
}

.hero-title {
    font-weight: 700;
    font-size: clamp(34px, 5vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.04em;
    margin: 20px 0 0;
    color: var(--heading);
}

.hero-band {
    background-color: var(--ink);
    color: #F8FAFB;
    font-size: 16px;
    line-height: 24px;
    padding: 10px 16px;
    max-width: 576px;
    border-radius: 8px;
    margin: 20px auto 0;
    box-sizing: border-box;
}

.hero-sub {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
    max-width: 576px;
    margin: 20px auto 0;
}

/* Query card: a chat-style composer. The question box runs borderless inside the card, with the
   optional refinement fields and the toggles / jurisdiction / send row beneath it. */
.query-section { margin-top: 36px; }

.query-card-title {
    margin: 0 0 16px;
    color: var(--heading);
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
}

.query-card-title label { cursor: text; }

.query-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background-color: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    box-shadow: 0 12px 20px -10px color-mix(in srgb, var(--ink) 24%, transparent);
}

#queryInput {
    display: block;
    width: 100%;
    height: 176px;
    max-height: none;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background-color: transparent;
    color: var(--heading);
    font-size: 16px;
    line-height: 28px;
    resize: none;
}

#queryInput:focus { box-shadow: none; }

#queryInput::placeholder { color: var(--text-muted); }

/* Revealed by the Refine Query toggle: the wrapper animates its row from 0fr to 1fr so the
   sections slide open and the controls below them glide down rather than jump. */
.query-refine-options {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows 0.3s ease, opacity 0.25s ease, visibility 0s linear 0.3s;
}

.query-refine-options.open {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition: grid-template-rows 0.3s ease, opacity 0.25s ease 0.05s, visibility 0s;
}

.query-refine-inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    padding: 22px 8px 0;
    border-top: 1px solid var(--border);
}

@media (prefers-reduced-motion: reduce) {
    .query-refine-options, .query-refine-options.open { transition: none; }
}

.option-label {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 11px;
    line-height: 11px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.query-card-footer {
    display: flex;
    align-items: center;
    gap: 12px;
}

.query-toggles {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-right: auto;
    padding: 0 8px;
}

.query-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 16px;
    font-weight: 500;
}

.query-toggle label:first-child { cursor: pointer; }

.query-toggle .switch { width: 32px; height: 20px; }
.query-toggle .slider { border: 1px solid transparent; box-sizing: border-box; }
.query-toggle .slider:before { width: 14px; height: 14px; left: 2px; bottom: 2px; box-shadow: none; }
.query-toggle input:checked + .slider:before { transform: translateX(12px); }

.query-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Which kind of question: a tab strip across the top of the card, styled like the admin console's
   tabs (.admin-tab-btn) but split evenly in half, with a divider below it. Both halves always show;
   the selected one is darker with an underline. The negative margins cancel the card's padding so
   the strip runs edge to edge. */
.query-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: -16px -16px 0;
    border-bottom: 1px solid var(--border);
}

.query-mode button {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    height: auto;
    min-height: 44px;
    padding: 10px 12px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background-color: transparent;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

/* Rounded to the card's inner corner (18px radius less its 1px border). */
.query-mode button:first-child { border-top-left-radius: 17px; }
.query-mode button:last-child { border-top-right-radius: 17px; }

.query-mode button:hover { background-color: var(--bg-inset); color: var(--text); }

.query-mode button[aria-checked="true"] {
    color: var(--heading);
    border-bottom-color: var(--ink);
}

/* "About P4P" questions are answered without a search, so the search options don't apply. They
   fade out but keep their space, so the card is the same size in both modes. (An open refine panel
   stays open behind the fade for the same reason.) visibility drops once the fade ends, which also
   takes them out of the tab order. */
.query-toggles, .jurisdiction-picker { transition: opacity 0.25s ease, visibility 0s; }

.query-card.is-about .query-toggles,
.query-card.is-about .jurisdiction-picker,
.query-card.is-about .query-refine-options.open {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

@media (prefers-reduced-motion: reduce) {
    .query-toggles, .jurisdiction-picker,
    .query-card.is-about .query-toggles,
    .query-card.is-about .jurisdiction-picker,
    .query-card.is-about .query-refine-options.open { transition: none; }
}

.search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 10px;
    background-color: var(--ink);
    color: #FCFCFC;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.search-btn:hover { background-color: var(--ink-hover); }

.search-btn.is-empty { opacity: 0.5; }
.search-btn.is-empty:hover { background-color: var(--ink); }

.search-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Jurisdiction picker: trigger beside the send button, popover opening upward from it. */
.jurisdiction-picker {
    position: relative;
    min-width: 0;
}

.jurisdiction-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    height: 44px;
    padding: 0 12px;
    border-radius: 10px;
    background-color: var(--bg-inset);
    color: var(--heading);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.jurisdiction-trigger:hover { background-color: color-mix(in srgb, var(--bg-inset) 80%, var(--border)); }
.jurisdiction-trigger:disabled { cursor: default; }
.jurisdiction-trigger:disabled .intent-chevron { display: none; }
.jurisdiction-trigger[aria-expanded="true"] .intent-chevron { transform: rotate(180deg); }

.jurisdiction-summary {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jurisdiction-trigger:disabled .jurisdiction-summary { color: var(--text-muted); font-style: italic; font-weight: 400; }

.jurisdiction-mode-label { color: var(--text-muted); }
.jurisdiction-mode-label:empty { display: none; }

.jurisdiction-popover {
    position: absolute;
    right: 0;
    bottom: calc(100% + 8px);
    z-index: 30;
    display: flex;
    flex-direction: column;
    width: 350px;
    max-width: calc(100vw - 32px);
    padding: 8px;
    box-sizing: border-box;
    background-color: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(11, 15, 20, 0.12);
    color: var(--heading);
}

.jurisdiction-popover[hidden] { display: none; }

.jurisdiction-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px 8px 4px;
}

.jurisdiction-popover-header h2 {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.jurisdiction-mode {
    display: inline-flex;
    padding: 2px;
    border-radius: 10px;
    background-color: var(--bg-inset);
}

.jurisdiction-mode button {
    height: 28px;
    padding: 0 12px;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
}

/* Every popover button sets its own hover background: the global button:hover fill
   (--primary-hover-color) would otherwise sit behind dark text. */
.jurisdiction-mode button:hover { background: transparent; color: var(--heading); }

.jurisdiction-mode button[aria-checked="true"] {
    background-color: var(--bg);
    color: var(--heading);
    box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(0, 0, 0, 0.08);
}

.jurisdiction-search {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    color: var(--text-muted);
}

.jurisdiction-search:focus-within { border-color: var(--heading); }

.jurisdiction-search input {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--heading);
    font-size: 14px;
}

.jurisdiction-search input::placeholder { color: var(--text-muted); }

.jurisdiction-search input:focus { box-shadow: none; }

.jurisdiction-list {
    max-height: 288px;
    overflow-y: auto;
    /* No top padding: scrolled rows would show through it above the sticky header. */
    margin-top: 8px;
    padding: 0 0 4px;
    border-bottom: 1px solid var(--border);
}

.jurisdiction-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 8px 12px;
    box-sizing: border-box;
    border-radius: 10px;
    background: transparent;
    color: var(--heading);
    text-align: left;
}

.jurisdiction-option:hover:not(:disabled) { background-color: var(--bg-inset); }
.jurisdiction-option[aria-pressed="true"] { background-color: var(--select-bg); }
.jurisdiction-option[aria-pressed="true"]:hover { background-color: var(--select-pill); }

/* Muted by colour, not opacity, so "Coming soon" stays readable. */
.jurisdiction-option:disabled,
.jurisdiction-option:disabled:hover { cursor: default; background: transparent; }
.jurisdiction-option:disabled .jurisdiction-name { color: var(--text-muted); font-weight: 400; }
.jurisdiction-option:disabled .jurisdiction-code,
.jurisdiction-option:disabled .jurisdiction-description { color: color-mix(in srgb, var(--text-muted) 80%, var(--bg)); }

.jurisdiction-code {
    flex-shrink: 0;
    width: 24px;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 11px;
    line-height: 16px;
    font-weight: 500;
}

.jurisdiction-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.jurisdiction-name {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.jurisdiction-description {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
}

.jurisdiction-check {
    display: flex;
    flex-shrink: 0;
    width: 20px;
    justify-content: center;
    color: var(--heading);
}

.jurisdiction-group {
    padding: 12px 12px 6px;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 11px;
    line-height: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.jurisdiction-request { text-decoration: none; }
.jurisdiction-request .jurisdiction-name { color: var(--text-muted); font-weight: 400; }
.jurisdiction-request .jurisdiction-code { color: color-mix(in srgb, var(--text-muted) 80%, var(--bg)); }
.jurisdiction-request:hover .jurisdiction-name { color: var(--heading); text-decoration: underline; }

.jurisdiction-request-hint {
    margin-left: auto;
    color: color-mix(in srgb, var(--text-muted) 70%, var(--bg));
    font-size: 13px;
    visibility: hidden;
}

.jurisdiction-request:hover .jurisdiction-request-hint,
.jurisdiction-request:focus-visible .jurisdiction-request-hint { visibility: visible; }

.jurisdiction-group-soon {
    /* Stays pinned to the top of the scrolling list while its rows pass underneath. */
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--bg);
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--border, currentColor);
}

.jurisdiction-empty {
    margin: 0;
    padding: 16px 12px;
    color: var(--text-muted);
    font-size: 13px;
}

.jurisdiction-footer {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 4px 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 16px;
}

.jurisdiction-count { color: var(--heading); font-weight: 500; }

.scope-compare {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0 0;
    padding: 5px 8px;
    border: 1px solid rgba(48, 120, 165, 0.6);
    background-color: #D3E7F7;
    color: #002146;
    font-size: 11px;
    line-height: 16.5px;
    font-weight: 600;
}

.scope-compare svg { color: #3078A5; flex-shrink: 0; }

:root[data-theme="dark"] .scope-compare { background-color: rgba(48, 120, 165, 0.2); color: var(--text); }
:root[data-theme="dark"] .scope-compare svg { color: #7FB3E6; }

.option-optional {
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0;
    text-transform: none;
}

.intent-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background-color: var(--bg);
    color: var(--heading);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.intent-trigger:hover { background-color: var(--bg-inset); }

.intent-chevron { color: var(--text-muted); transition: transform 0.15s; }
.intent-trigger[aria-expanded="true"] .intent-chevron { transform: rotate(180deg); }

.intent-panel {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background-color: var(--bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.intent-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: auto;
    min-height: 38px;
    padding: 9px 12px;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 2px;
    background-color: var(--bg-subtle);
    color: var(--text);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.intent-option:hover { background-color: var(--bg-inset); }

.intent-option.selected {
    border-color: var(--heading);
    background-color: var(--intent-selected-bg);
}

.intent-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    color: transparent;
}

.intent-option.selected .intent-checkbox {
    border-color: var(--ink);
    background-color: var(--ink);
    color: #FCFCFC;
}

.topic-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.topic-pill {
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background-color: var(--bg);
    color: var(--heading);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.topic-pill:hover { background-color: var(--bg-inset); color: var(--heading); }

.topic-pill.selected {
    border-color: var(--ink);
    background-color: var(--ink);
    color: #FCFCFC;
}

.topic-more-btn {
    height: 34px;
    padding: 0 4px;
    background: transparent;
    color: var(--heading);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.topic-more-btn:hover { background: transparent; text-decoration: underline; }

/* Browse library dialog */
.corpus-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--scrim);
}

.corpus-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 2px;
    background: transparent;
    color: var(--text-muted);
}

.corpus-modal-close:hover { background-color: var(--bg-inset); color: var(--text); }

.admin-modal-refresh-btn { right: 48px; }

.corpus-progress-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.corpus-progress-header {
    display: flex;
    align-items: center;
    gap: 4px;
}

.corpus-progress-row .spinner { margin-right: 2px; }

.corpus-progress-row.done .spinner { display: none; }

.corpus-progress-name {
    font-weight: 600;
    color: var(--text);
}

.corpus-progress-status {
    color: var(--text-muted);
}

.corpus-progress-row.done .corpus-progress-status {
    color: var(--color-received);
}

.corpus-progress-subquery-list {
    list-style: none;
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.corpus-progress-subquery {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.9em;
}

.corpus-progress-subquery-count {
    color: var(--text);
    font-weight: 600;
    white-space: nowrap;
}

.corpus-progress-subquery-text {
    color: var(--text-muted);
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-label {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: var(--text);
    margin-bottom: 10px;
}

.modal-field-optional {
    text-transform: none;
    font-weight: 400;
    letter-spacing: normal;
    color: var(--text-muted);
}

.card-label.small {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 0;
}

/* Search progress view (between Search and the answer) */
#searchView {
    max-width: 944px;
    width: 100%;
    margin: 0 auto;
    padding: 48px 24px;
    box-sizing: border-box;
}

.search-panel {
    border: 1px solid var(--border);
    border-radius: 4px;
    background-color: var(--bg-subtle);
    padding: 28px 32px 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.search-question {
    margin: 6px 0 20px;
    color: var(--heading);
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.search-progress {
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.progress-stage {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.progress-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    color: var(--heading);
}

.progress-icon .spinner { margin: 0; }

.is-done > .progress-icon {
    background-color: var(--select-bg);
    box-shadow: inset 0 0 0 1px var(--select-border);
}

.progress-body { flex: 1; min-width: 0; padding-top: 1px; }

.progress-label {
    margin: 0;
    color: var(--heading);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}

.is-done > .progress-body > .progress-label { font-weight: 500; }

.progress-detail {
    margin: 2px 0 0;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 18px;
}

.progress-items {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.progress-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background-color: var(--bg);
    font-size: 13px;
    line-height: 18px;
}

/* Sub-queries: quoted text, not rows -- boxed, they read as editable fields. */
.progress-item:not(.is-active):not(.is-done) {
    padding: 1px 0 1px 12px;
    border: none;
    border-left: 2px solid var(--border);
    border-radius: 0;
    background: transparent;
    color: var(--text-muted);
    font-style: italic;
}

.progress-item .progress-icon { width: 18px; height: 18px; }
.progress-item.is-done .progress-icon { background: none; box-shadow: none; }

.progress-item-text { color: var(--text); font-weight: 500; min-width: 0; }
.progress-item:not(.is-active):not(.is-done) .progress-item-text { color: var(--text-muted); font-weight: 400; }

.progress-item-detail {
    margin-left: auto;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 11px;
    white-space: nowrap;
}

.progress-divider {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* White pane with a slim warning-coloured header strip. */
.clarify-block {
    margin-top: 24px;
    border: 1px solid #E5C06B;
    border-radius: 4px;
    background-color: var(--bg);
    overflow: hidden;
}

:root[data-theme="dark"] .clarify-block { border-color: rgba(229, 192, 107, 0.4); }

.clarify-head {
    align-items: center;
    padding: 8px 14px;
    border-bottom: 1px solid #E5C06B;
    background-color: #FDF6E3;
    color: #4A3A12;
    font-size: 13px;
    line-height: 18px;
}

.clarify-head svg { margin-top: 0; }

:root[data-theme="dark"] .clarify-head {
    border-bottom-color: rgba(229, 192, 107, 0.4);
    background-color: rgba(229, 192, 107, 0.12);
    color: var(--text);
}

.clarify-body { padding: 16px 18px 18px; }

.clarify-body .clarify-label { margin: 0; }

.clarify-question {
    margin: 6px 0 0;
    color: var(--heading);
    font-size: 18px;
    line-height: 26px;
    font-weight: 500;
}

:root[data-theme="dark"] .clarify-question { color: var(--text); }

/* Same look as the landing query card: bordered rounded box, bare textarea, send arrow. */
.clarify-field {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-top: 14px;
    padding: 12px;
    background-color: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: 18px;
    box-shadow: 0 12px 20px -10px color-mix(in srgb, var(--ink) 24%, transparent);
}

.clarify-field textarea {
    flex: 1;
    min-height: 44px;
    padding: 8px;
    border: none;
    border-radius: 10px;
    background-color: transparent;
    color: var(--heading);
    font-size: 16px;
    line-height: 28px;
    resize: none;
}

.clarify-field textarea:focus { box-shadow: none; }
.clarify-field textarea::placeholder { color: var(--text-muted); }

.clarify-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.clarify-skip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--border-strong);
    border-radius: 10px;
    background: none;
    color: var(--text-muted);
}

.clarify-skip-btn:hover { background-color: var(--bg-subtle); color: var(--text); }

.clarify-btn {
    height: 32px;
    padding: 0 20px;
    border-radius: 6px;
    background-color: var(--ink);
    color: #FCFCFC;
    font-size: 13px;
    font-weight: 600;
}

.clarify-btn:hover { background-color: var(--ink-hover); }

.clarify-btn-secondary {
    background-color: #FFFFFF;
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
}

.clarify-btn-secondary:hover { background-color: var(--bg-subtle); color: var(--text); }

/* Same shape as .clarify-block, in the error colour: the backend gave up on this question. */
.search-error-block {
    margin-top: 24px;
    padding: 16px 18px;
    border: 1px solid #E8A39B;
    border-radius: 4px;
    background-color: #FDF0EE;
    color: #5C1D16;
}

:root[data-theme="dark"] .search-error-block {
    border-color: rgba(240, 122, 110, 0.4);
    background-color: rgba(240, 122, 110, 0.12);
    color: var(--text);
}

.search-error-block .answer-warning-head svg { color: var(--color-error); }
:root[data-theme="dark"] .search-error-block .answer-warning-head svg { color: #F07A6E; }

.search-error-text { margin: 8px 0 0; font-size: 14px; line-height: 20px; }

.search-error-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

/* Another tab has taken over this session (see ui.js showSessionBanner). */
.session-banner {
    position: fixed;
    top: calc(var(--header-h) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 12px 10px 18px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background-color: var(--bg);
    color: var(--text);
    font-size: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.session-banner[hidden] { display: none; }

/* Admin-chosen site-wide announcement (see ui.js showAnnouncement). Sits just under the session
   banner's spot so the two never cover each other. */
.announcement-banner {
    position: fixed;
    top: calc(var(--header-h) + 12px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    width: 420px;
    max-width: calc(100vw - 32px);
    padding: 10px 12px 14px 18px;
    border: 1px solid var(--border-strong);
    border-top: 3px solid var(--gold);
    border-radius: 6px;
    background-color: var(--bg);
    color: var(--text);
    font-size: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.announcement-banner[hidden] { display: none; }
.announcement-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.announcement-title { color: var(--heading); font-size: 15px; font-weight: 600; }
.announcement-divider { height: 1px; margin: 8px 6px 10px 0; background-color: var(--border); }
.announcement-dismiss {
    flex: none;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.announcement-dismiss:hover { background-color: var(--bg-subtle); color: var(--text); }

/* Answer page */
#answerView {
    flex-direction: column;
    padding: 0 0 48px;
}

.answer-topbar {
    position: sticky;
    top: var(--header-h);
    z-index: 15;
    display: flex;
    align-items: center;
    padding: 12px 24px;
    background-color: color-mix(in srgb, var(--bg) 95%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}

.answer-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 10px;
    border-radius: 4px;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 500;
}

.answer-back-btn:hover { background-color: var(--bg-inset); color: var(--heading); }

.answer-export-btn { margin-left: auto; }

.answer-layout {
    display: grid;
    grid-template-columns: 200px minmax(0, 896px);
    gap: 56px;
    justify-content: center;
    padding: 40px 24px 0;
}

.answer-rail {
    position: sticky;
    top: calc(var(--header-h) + 72px);
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.answer-rail-label {
    margin: 0 0 12px 12px;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.answer-rail-link {
    padding: 8px 12px;
    border-left: 2px solid transparent;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    line-height: 20px;
}

.answer-rail-link:hover { color: var(--heading); }

.answer-rail-link.active {
    border-left-color: var(--gold);
    background-color: color-mix(in srgb, var(--bg-inset) 60%, transparent);
    color: var(--heading);
    font-weight: 500;
}

.answer-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
}

.answer-eyebrow {
    margin: 0;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.answer-question {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.answer-question-icon { color: var(--text-muted); flex-shrink: 0; margin-top: 2px; }

.answer-question-text {
    margin: 6px 0 0;
    color: var(--heading);
    font-size: 24px;
    line-height: 32px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.answer-corpus-note { margin: 0; }

#historyView { flex-direction: column; padding: 0 0 48px; }

.history-topbar { justify-content: space-between; }

.history-topbar .answer-export-btn { margin-left: 0; }

.history-topbar-meta {
    margin-left: auto;
    margin-right: 16px;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
}

.history-empty { font-size: 14px; }

.answer-warning {
    padding: 14px 16px;
    border: 1px solid #E5C06B;
    background-color: #FDF6E3;
    color: #4A3A12;
    border-radius: 4px;
}

:root[data-theme="dark"] .answer-warning {
    border-color: rgba(229, 192, 107, 0.4);
    background-color: rgba(229, 192, 107, 0.12);
    color: var(--text);
}

.answer-warning-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 20px;
}

.answer-warning-head svg { flex-shrink: 0; margin-top: 2px; color: #B26A00; }

.answer-card {
    border: 1px solid var(--border);
    border-radius: 4px;
    background-color: var(--bg);
    padding: 20px 24px 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    scroll-margin-top: calc(var(--header-h) + 80px);
}

.answer-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.answer-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--heading);
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}

.answer-card-title > svg { color: var(--gold-text); flex-shrink: 0; }

/* Square-cornered and mono, like the citation badges and tags. */
.answer-card-count {
    padding: 1px 8px;
    border-radius: 2px;
    background-color: var(--bg-inset);
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.answer-markdown {
    color: var(--text);
    font-size: 15px;
    line-height: 24px;
}

.answer-markdown p { margin: 0 0 12px; }
.answer-markdown p:last-child { margin-bottom: 0; }
.answer-markdown ul { margin: 0; padding-left: 20px; }
.answer-markdown li { margin-bottom: 8px; }
.answer-markdown li::marker { color: var(--gold-text); }
.answer-markdown strong { color: var(--heading); }
.answer-markdown blockquote {
    margin: 16px 0;
    padding: 4px 0 4px 16px;
    border-left: 3px solid var(--gold);
    color: var(--text-muted);
    font-style: italic;
}

.answer-tldr-body { margin-top: 16px; }

.answer-synthesis-question {
    margin: 4px 0 16px;
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
}

.answer-synthesis .answer-markdown > p:first-child {
    color: var(--heading);
    font-size: 19px;
    line-height: 30px;
}

.answer-cite-chip {
    height: auto;
    padding: 1px 4px;
    border-radius: 3px;
    border: none;
    background-color: var(--select-bg);
    box-shadow: inset 0 -1px 0 var(--select-border);
    color: var(--heading);
    font: inherit;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.answer-cite-chip:hover { background-color: var(--intent-selected-bg); }

/* A mention that fits several cited sections: warning colors, opens a list of the candidates. */
.answer-cite-chip-conflict {
    background-color: color-mix(in srgb, var(--color-warning) 16%, transparent);
    box-shadow: inset 0 -1px 0 var(--color-warning);
}

.answer-cite-chip-conflict::before {
    content: "\26A0\FE0E";
    margin-right: 3px;
    color: var(--color-warning);
}

.answer-cite-chip-conflict:hover { background-color: color-mix(in srgb, var(--color-warning) 28%, transparent); }

.cite-conflict-popover {
    position: absolute;
    z-index: 1000;
    min-width: 240px;
    max-width: 360px;
    padding: 8px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background-color: var(--bg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.cite-conflict-heading {
    margin: 2px 4px 6px;
    color: var(--text-muted);
    font-size: 12px;
}

.cite-conflict-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: auto;
    padding: 6px 8px;
    border: none;
    border-radius: 4px;
    background: none;
    color: var(--heading);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.cite-conflict-item:hover { background-color: var(--intent-selected-bg); }
.cite-conflict-label { font-weight: 600; }
.cite-conflict-detail { color: var(--text-muted); font-size: 12px; }

/* Citation cards */
.citation-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.citation-card {
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background-color: var(--bg-subtle);
    scroll-margin-top: calc(var(--header-h) + 80px);
}

.citation-card:target {
    border-color: var(--select-border);
    box-shadow: 0 0 0 3px var(--select-bg);
}

.citation-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 2px;
    background-color: var(--ink);
    color: #FCFCFC;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.citation-badge svg { width: 12px; height: 12px; }

/* Flags a citation fetched because a retrieved section cites it, not returned by search itself. */
.citation-badges {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.citation-ref-tag {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 8px;
    border: 1px solid currentColor;
    border-radius: 2px;
    color: var(--heading);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.citation-badge-statute {
    background-color: #1E6B4A;
}

:root[data-theme="dark"] .citation-badge-statute { background-color: #2F8A62; }

.citation-label {
    margin: 10px 0 0;
    color: var(--heading);
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
}

.citation-title {
    margin: 4px 0 0;
    color: var(--heading);
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
}

.citation-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.citation-crumb {
    padding: 2px 8px;
    border-radius: 2px;
    background-color: var(--bg-inset);
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 11px;
    line-height: 18px;
}

.citation-crumb.is-section {
    background-color: var(--ink);
    color: #FCFCFC;
}

.citation-crumb-sep { color: var(--text-muted); font-size: 11px; }

.citation-reason {
    margin: 12px 0 0;
    color: var(--text);
    font-size: 14px;
    line-height: 21px;
}

/* Stands in for the relevance summary on a section fetched by reference that has nothing to summarize. */
.citation-reason-note {
    font-style: italic;
}

.citation-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.citation-ref-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 2px;
    background-color: var(--bg);
    color: var(--text-muted);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
}

.citation-ref-link:hover { border-color: var(--border-strong); color: var(--heading); }

/* Full section text popup */
.section-text-modal {
    width: 100%;
    max-width: 840px;
    max-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid var(--border);
    border-radius: 4px;
    background-color: var(--bg);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
}

.section-text-modal.admin-session-modal { max-width: 1080px; }
.section-text-modal.admin-index-modal { max-width: 520px; }

.section-text-head {
    padding: 20px 56px 16px 24px;
    border-bottom: 1px solid var(--border);
}

.section-text-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.section-text-title {
    margin: 6px 0 0;
    color: var(--heading);
    font-size: 22px;
    line-height: 30px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.section-text-cite {
    margin: 6px 0 0;
    color: var(--heading);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
}

.section-text-doc {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.section-text-head .citation-crumbs { margin-top: 12px; }

.section-text-body {
    overflow-y: auto;
    padding: 20px 24px 24px;
    color: var(--text);
    font-size: 14px;
    line-height: 22px;
}

.section-text-paragraph {
    margin: 0 0 14px;
    white-space: pre-wrap;
}

.section-text-callout {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-left: 3px solid var(--gold);
    background-color: color-mix(in srgb, var(--gold) 12%, transparent);
}

.section-text-callout .section-text-paragraph { margin: 0; color: var(--heading); }

.section-text-callout-label {
    margin: 0 0 6px;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.section-text-mark {
    color: inherit;
    border-radius: 2px;
    background-color: transparent;
}

/* Model highlight, chunk-retrieval match, and the two agreeing. */
.section-text-mark.is-model { background-color: #FBECA8; }
.section-text-mark.is-retrieved { background-color: #C9DEF5; }
.section-text-mark.is-both { background-color: #B7E4C2; }

:root[data-theme="dark"] .section-text-mark.is-model { background-color: rgba(230, 195, 60, 0.32); }
:root[data-theme="dark"] .section-text-mark.is-retrieved { background-color: rgba(92, 155, 224, 0.32); }
:root[data-theme="dark"] .section-text-mark.is-both { background-color: rgba(74, 186, 116, 0.32); }

.section-text-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 11px;
}

.section-text-key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.section-text-key.is-absent {
    color: color-mix(in srgb, var(--text-muted) 50%, transparent);
}

.section-text-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    display: inline-block;
}

.section-text-swatch.is-model { background-color: #FBECA8; }
.section-text-swatch.is-retrieved { background-color: #C9DEF5; }
.section-text-swatch.is-both { background-color: #B7E4C2; }

.citation-fulltext-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    border-radius: 2px;
    background-color: var(--ink);
    color: #FCFCFC;
    font-size: 12px;
    font-weight: 600;
}

.citation-fulltext-btn:hover { background-color: var(--ink-hover); }

/* Corpus + provenance sections */
.answer-corpus-count {
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.answer-corpus-group {
    margin: 20px 0 8px;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.corpus-doc-list { display: flex; flex-direction: column; gap: 8px; }

.corpus-doc {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background-color: var(--bg-subtle);
}

.corpus-doc-label {
    margin: 0;
    color: var(--heading);
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
}

.corpus-doc-title { margin: 4px 0 0; font-size: 13px; color: var(--text); }
.corpus-doc-summary { margin: 4px 0 0; font-size: 12px; color: var(--text-muted); }

details.answer-card > summary { cursor: pointer; list-style: none; }
details.answer-card > summary::-webkit-details-marker { display: none; }
details.answer-card > summary::after {
    content: '+';
    margin-left: auto;
    color: var(--text-muted);
    font-size: 16px;
}
details.answer-card[open] > summary::after { content: '\2212'; }

.assembly-list {
    margin: 16px 0 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--text);
    font-size: 13px;
    line-height: 20px;
}

.assembly-step::marker { color: var(--text-muted); font-family: var(--mono); font-size: 11px; }
.assembly-step { white-space: pre-wrap; }

.assembly-dropped-label {
    margin: 18px 0 8px;
    color: var(--text-muted);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.assembly-dropped-list { margin-top: 8px; }

/* Results composer: sticks to the bottom of the viewport under the log */
.results-composer {
    position: sticky;
    bottom: 0;
    z-index: 20;
    padding: 16px 0 16px;
    background: linear-gradient(to bottom, transparent, var(--bg) 16px);
}

.textarea-wrap { position: relative; }

#followupInput {
    display: block;
    width: 100%;
    padding-right: 52px;
    border-radius: 4px;
    background-color: var(--bg);
    box-shadow: 0 -10px 30px rgba(11, 15, 20, 0.15);
}

.icon-send-btn {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ink);
    color: white;
    border: none;
    border-radius: 2px;
}

.icon-send-btn:hover { background-color: var(--ink-hover); }

.results-new-btn { width: 100%; }

.disclaimer {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: -0.03em;
    margin: 24px 0 0;
}

.muted-text { color: var(--text-muted); }

select {
    flex-grow: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    font-size: 16px;
    background-color: var(--bg-subtle);
    color: var(--text);
    box-sizing: border-box;
    height: 40px;
    width: 100%;
}

input, textarea {
    flex-grow: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    font-size: 16px;
    font-family: inherit;
    background-color: var(--bg-subtle);
    color: var(--text);
    box-sizing: border-box;
    height: 40px;
}

/* A plain input+datalist combobox doesn't reliably render a dropdown-arrow affordance across
   browsers the way <select> does -- draw our own so it visually reads as a dropdown too. */
input[list] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 36px;
}

textarea {
    height: auto;
    max-height: 200px;
    overflow-y: auto;
    resize: none;
    line-height: 1.5;
}

input::placeholder, textarea::placeholder { color: #9CA3AF; }

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 143, 214, 0.15);
}

button {
    padding: 0 25px;
    cursor: pointer;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    font-size: 16px;
    box-sizing: border-box;
    height: 40px;
}

button:hover { background-color: var(--primary-hover-color); }

#log {
    color: var(--text);
    padding: 0;
    flex-grow: 1;
    width: 100%;
    white-space: pre-wrap;
    box-sizing: border-box;
}

#resultsView { max-width: 1200px; width: 100%; margin: 0 auto; padding: 12px 24px 0; box-sizing: border-box; flex-grow: 1; }

.status { color: var(--text-muted); font-style: italic; margin-bottom: 10px; }
.sent { color: var(--color-sent); margin-bottom: 10px; }
.received { color: var(--color-received); margin-bottom: 10px; }
.error { color: var(--color-error); margin-bottom: 10px; }

.parsed-response {
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.response-block {
    background-color: var(--bg-subtle);
    padding: 10px;
    border-radius: 6px;
    scroll-margin-top: 55px;
}

details.response-block:not([open]) {
    padding-bottom: 0;
}

.block-label {
    font-weight: bold;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fff;
    background-color: var(--text-muted);
    margin: -10px -10px 10px -10px;
    padding: 8px 12px;
    border-radius: 6px 6px 0 0;
}

.received-label, .info-label, .refinement-label { background-color: #1E8E5A; }
.sent-label { background-color: #0B6BCB; }
.error-label { background-color: #C0392B; }
.status-label { background-color: var(--text-muted); }
.warning-label { background-color: #B26A00; }

details.response-block > summary.block-label {
    position: sticky;
    top: var(--header-h);
    z-index: 10;
    cursor: pointer;
}

.block-content {
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    background-color: var(--border);
    border-radius: 6px;
    padding: 10px 12px;
}

.block-content + .block-content {
    margin-top: 8px;
}

.block-content.markdown-content { white-space: normal; }
.block-content.markdown-content p { margin-top: 0; margin-bottom: 10px; }
.block-content.markdown-content p:last-child { margin-bottom: 0; }
.block-content.markdown-content pre {
    background-color: var(--border-strong);
    padding: 10px;
    border-radius: 6px;
    overflow-x: auto;
    white-space: pre-wrap;
}
.block-content.markdown-content code {
    background-color: var(--border-strong);
    padding: 2px 4px;
    border-radius: 6px;
}

.list-count-badge {
    background-color: var(--border);
    color: var(--text);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.8em;
    margin-left: 8px;
    vertical-align: middle;
    display: inline-block;
}

details[open] > summary .list-count-badge {
    display: none;
}

.sub-block-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.sub-block {
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px;
    scroll-margin-top: 130px;
}

.ref-header {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    font-size: 0.85em;
}

.ref-header-label {
    color: var(--text-muted);
    font-weight: bold;
    margin-right: 4px;
}

.ref-pill {
    color: var(--color-sent);
    text-decoration: none;
    background-color: var(--bg-subtle);
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    display: inline-block;
}

.ref-pill:hover { border-color: var(--color-sent); }

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

.doc-tag {
    background-color: rgba(66, 133, 244, 0.1);
    border: 1px solid #4285f4;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.85em;
    color: #1a56c4;
    white-space: nowrap;
}

:root[data-theme="dark"] .doc-tag { color: #7fabf7; }

.topic-tag {
    background-color: rgba(30, 142, 90, 0.1);
    border: 1px solid #1E8E5A;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.85em;
    color: #17693f;
    white-space: nowrap;
}

:root[data-theme="dark"] .topic-tag { color: #6fd6a5; }

.corpus-tag {
    background-color: rgba(178, 106, 0, 0.1);
    border: 1px solid #B26A00;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 0.85em;
    color: #8a5300;
    white-space: nowrap;
}

:root[data-theme="dark"] .corpus-tag { color: #e0a458; }

.tag-sep {
    width: 1px;
    height: 20px;
    background-color: var(--border-strong);
    margin: 0 4px;
}

.full-response {
    margin-top: 15px;
    padding: 15px;
    background-color: var(--border-strong);
    border-radius: 6px;
}

.full-response-title {
    font-weight: bold;
    font-size: 0.85em;
    margin-bottom: 10px;
    color: var(--color-error);
}

.nav-bar {
    position: sticky;
    top: calc(var(--header-h) + 32px);
    background-color: var(--bg-subtle);
    z-index: 9;
    padding: 8px 10px;
    margin: -6px 0 10px 0;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(11, 15, 20, 0.12);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-label {
    font-size: 0.85em;
    color: var(--text-muted);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.nav-buttons {
    display: flex;
    gap: 8px;
}

.nav-btn {
    background-color: var(--bg);
    border: 1px solid var(--border-strong);
    color: var(--text);
    padding: 4px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-btn:hover {
    background-color: var(--bg-subtle);
}

.nav-counter {
    color: var(--text-muted);
    font-size: 0.85em;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
}

.sub-item { margin-bottom: 8px; }
.sub-item:last-child { margin-bottom: 0; }

.sub-key {
    font-weight: bold;
    color: var(--color-sent);
    font-size: 0.8em;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.sub-value {
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.95em;
}

.spinner {
    border: 3px solid rgba(11, 15, 20, 0.08);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.spinner-sm {
    width: 12px;
    height: 12px;
    border-width: 2px;
    margin-right: 6px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-subtle); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #9AA4AF; }

#usernameModal, #adminLoginModal {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--scrim);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal-content {
    background: var(--bg);
    padding: 24px 28px 28px;
    border-radius: 4px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    text-align: left;
    width: 90%;
    max-width: 340px;
    box-sizing: border-box;
}

.modal-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.modal-eyebrow {
    font-family: var(--mono);
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
}

.modal-content h3 { margin: 0; color: var(--heading); font-size: 20px; line-height: 28px; font-weight: 600; }

.modal-field { display: flex; flex-direction: column; gap: 6px; }

.modal-content input, .modal-content select { width: 100%; text-align: left; }

.modal-primary-btn { width: 100%; }

.modal-primary-btn {
    margin-top: 8px;
    height: 36px;
    border-radius: 2px;
    background-color: var(--ink);
    color: #FCFCFC;
    font-size: 14px;
    font-weight: 600;
}

.modal-primary-btn:hover { background-color: var(--ink-hover); }

.modal-actions { display: flex; gap: 8px; margin-top: 8px; }
.modal-actions .modal-primary-btn { margin-top: 0; flex: 1; }

.modal-secondary-btn {
    flex: 1;
    height: 36px;
    border-radius: 2px;
    background-color: transparent;
    border: 1px solid var(--border-strong);
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

.modal-secondary-btn:hover { background-color: var(--bg-inset); }

.admin-login-error { margin: 0; color: var(--color-error); font-size: 13px; }

/* Admin: Log Viewer */
.admin-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    box-sizing: border-box;
}

.admin-title { margin: 0; color: var(--heading); font-size: 22px; font-weight: 600; }

#adminContent {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border);
}

.admin-tab-btn {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    padding: 8px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 3px 3px 0 0;
    background-color: transparent;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.admin-tab-btn:hover { background-color: var(--bg-inset); color: var(--text); }
.admin-tab-btn.active { color: var(--heading); border-bottom-color: var(--ink); }
.admin-tab-btn.active:hover { background-color: var(--bg-inset); }

.admin-tab-panel { display: flex; flex-direction: column; gap: 16px; }

.admin-session-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 28px;
    padding: 5px 10px;
    margin-bottom: 8px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.admin-session-meta-row:last-of-type { margin-bottom: 12px; }

.admin-session-meta-row + .admin-table-wrap { margin-top: 8px; }

.admin-session-meta-item { display: flex; flex-direction: column; gap: 2px; }

.admin-session-meta-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.admin-session-meta-value { font-size: 14px; line-height: 20px; color: var(--heading); }

.admin-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-search-input {
    flex-grow: 1;
    max-width: 480px;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--border-strong);
    background-color: var(--bg-inset);
    color: var(--text);
}

.admin-error { margin: 0; color: var(--color-error); font-size: 14px; }

/* Rate Limits tab (see admin.js's renderRateLimits). */
.admin-note { margin: 0; font-size: 13px; }
.admin-subheading { margin: 8px 0 0; font-size: 15px; color: var(--heading); }
.admin-log-table th.admin-num, .admin-log-table td.admin-num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-log-table td.admin-at-limit { color: var(--color-error); font-weight: 600; }
/* Separates one instance's In use / At limit / Refused columns from the next. */
.admin-log-table .admin-col-group { border-left: 1px solid var(--border-strong); }
.admin-log-table th.admin-col-group[colspan] { text-align: center; text-transform: none; }
/* With several instances the limits table can be wider than the page and scroll sideways: headers
   stay on one line, and the Limit column stays put so each row is still identifiable. Pinned cells
   need an opaque background or the scrolled columns show through -- --row-alt is translucent, so
   even rows layer it over --bg. */
.admin-limits-table th { white-space: nowrap; }
.admin-limits-table .admin-sticky-col {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--bg);
    box-shadow: inset -1px 0 0 var(--border);
}
.admin-limits-table th.admin-sticky-col { background-color: var(--bg-subtle); }
.admin-limits-table tr:nth-child(even) td.admin-sticky-col {
    background: linear-gradient(var(--row-alt), var(--row-alt)), var(--bg);
}

/* 4px corners rather than .header-btn's default 6px, matching the admin console's other buttons. */
.admin-icon-refresh-btn { width: 36px; padding: 0; gap: 0; flex-shrink: 0; justify-content: center; border-radius: 4px; }

.admin-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--bg);
}

.admin-log-table { width: 100%; border-collapse: collapse; }

.admin-log-table th, .admin-log-table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    color: var(--text);
    vertical-align: top;
}

.admin-log-table th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background-color: var(--bg-subtle);
}

.admin-log-table tr:last-child td { border-bottom: none; }
.admin-log-table tr:nth-child(even) td { background-color: var(--row-alt); }

.admin-log-table tbody tr.admin-row-clickable { cursor: pointer; }
.admin-log-table tbody tr.admin-row-clickable:hover td { background-color: var(--select-bg); }
.admin-log-table tbody tr.admin-row-clickable:focus-visible td { background-color: var(--select-bg); }

.admin-row-icon-cell {
    width: 1%;
    white-space: nowrap;
    text-align: center;
    color: var(--text-muted);
}

.admin-row-icon-cell svg { display: block; margin: 0 auto; }
.admin-row-clickable:hover .admin-row-icon-cell { color: var(--text); }

.admin-status-abandoned { color: var(--color-warning); }
.admin-status-incomplete { color: var(--text-muted); }

.admin-log-table td.admin-satisfactory-yes { color: var(--color-received); }
.admin-log-table td.admin-satisfactory-no { color: var(--color-error); }
.admin-satisfactory-yes svg, .admin-satisfactory-no svg { display: inline-block; vertical-align: middle; }

.admin-satisfactory-badge {
    display: inline-flex;
    align-items: center;
}

.admin-log-raw {
    white-space: pre-wrap;
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text);
}

.admin-log-turns { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }

.admin-log-turn {
    padding: 12px 14px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background-color: var(--bg-subtle);
}

.admin-log-turn-agent { background-color: var(--bg-inset); }
.admin-log-turn-system { background-color: transparent; border-style: dashed; font-style: italic; }

.admin-log-turn-role {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 6px;
}

.admin-log-turn-text { color: var(--text); }
.admin-log-turn-text-plain { white-space: pre-wrap; overflow-wrap: anywhere; }
.admin-log-turn-text > *:first-child { margin-top: 0; }
.admin-log-turn-text > *:last-child { margin-bottom: 0; }

.admin-log-tldr {
    margin: 0 0 10px 0;
    padding: 8px 12px;
    border-left: 3px solid var(--border-strong);
    background-color: var(--bg-subtle);
    font-size: 13px;
    color: var(--text-muted);
}
.admin-log-tldr > *:first-child { margin-top: 0; }
.admin-log-tldr > *:last-child { margin-bottom: 0; }

.admin-log-heading {
    margin: 20px 0 10px 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    cursor: default;
}

.admin-log-citation {
    padding: 12px 14px;
    border-radius: 6px;
    border: 1px solid var(--border);
    margin-bottom: 10px;
}

.admin-log-citation-title { font-weight: 600; color: var(--heading); margin-bottom: 4px; }

.admin-log-citation-meta { font-size: 12px; color: var(--text-muted); margin: 4px 0; }

.admin-log-citation-reason { margin: 4px 0; font-size: 14px; color: var(--text); }
.admin-log-citation-reason > *:first-child { margin-top: 0; }
.admin-log-citation-reason > *:last-child { margin-bottom: 0; }

.admin-log-citation-fulltext {
    white-space: pre-wrap;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 8px;
}

.admin-log-excerpt {
    margin: 4px 0;
    padding: 6px 10px;
    border-left: 3px solid var(--border-strong);
    font-size: 13px;
    color: var(--text);
}

/* Toggle Switch Styles */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border-strong);
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(11, 15, 20, 0.3);
}

input:checked + .slider {
    background-color: var(--ink);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--primary-color);
}

input:checked + .slider:before {
    transform: translateX(16px);
}

input:disabled + .slider {
    background-color: var(--border);
    cursor: not-allowed;
}

input:disabled + .slider:before {
    background-color: #D8DEE4;
}

/* Metrics page: same flat cards, hairline tables and mono eyebrows as the admin console. */
.metrics-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 16px 20px 40px;
    box-sizing: border-box;
}

#metricsView { overflow-y: auto; }

.action-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    padding: 20px 20px 0;
    box-sizing: border-box;
}

.action-bar-spacer { flex-grow: 1; }
.metrics-updated { font-size: 13px; margin-left: 8px; }
#metricsUpdatingSpinner { margin: 0 4px 0 0; }
.metrics-error { padding: 4px 0; white-space: pre-wrap; }

.metrics-card {
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
}

.metrics-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 20px 20px;
    color: var(--text);
}

.metrics-card > summary,
.sub-metrics-card > summary {
    display: flex;
    align-items: center;
    cursor: pointer;
    list-style: none;
    user-select: none;
    outline: none;
}

.metrics-card > summary::-webkit-details-marker,
.sub-metrics-card > summary::-webkit-details-marker { display: none; }

.metrics-card > summary {
    padding: 16px 20px;
    font-size: 17px;
    font-weight: 600;
    color: var(--heading);
}

.metrics-card > summary:hover { background-color: var(--bg-subtle); }
.metrics-card > summary:focus-visible,
.sub-metrics-card > summary:focus-visible { box-shadow: inset 0 0 0 2px var(--select-border); }

.sub-metrics-card {
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: var(--bg);
}

.sub-metrics-card > summary {
    padding: 9px 14px;
    background-color: var(--bg-subtle);
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.sub-metrics-card[open] > summary {
    border-bottom: 1px solid var(--border);
    border-radius: 6px 6px 0 0;
}

.sub-metrics-card > summary:hover { color: var(--text); }
.sub-metrics-card > :not(summary) { margin: 0; padding: 12px 14px; }

/* Chevron marker (rotates when open). */
.metrics-card > summary::before,
.sub-metrics-card > summary::before {
    content: '';
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    margin: 0 12px 2px 3px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.metrics-card[open] > summary::before,
.sub-metrics-card[open] > summary::before { transform: rotate(45deg); }

.metrics-card .spinner { margin-right: 10px; }

/* Label / value rows (overviews, counts by corpus/document/topic). */
.metrics-list { list-style: none; margin: 0; padding: 0; }

.metrics-list > li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 4px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
    color: var(--text);
}

.metrics-list > li:last-child { border-bottom: none; }
.metrics-list > li:nth-child(even) { background-color: var(--row-alt); }

.metrics-list-value {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--heading);
    white-space: nowrap;
}

.metrics-list-group { font-weight: 600; color: var(--heading); }
.metrics-list > li:has(.metrics-sublist) { flex-direction: column; gap: 4px; }
.metrics-sublist { margin: 0; padding-left: 20px; list-style: circle; color: var(--text); }

.metrics-list-header {
    margin-bottom: 8px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.metrics-empty { color: var(--text-muted); font-size: 14px; font-style: italic; }

.metrics-filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

.metrics-filter-input {
    flex: 1 1 180px;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--border-strong);
    background-color: var(--bg-inset);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
}

.metrics-data {
    white-space: pre-wrap;
    font-family: var(--mono);
    color: var(--text);
    background-color: var(--bg-subtle);
    padding: 15px;
    border-radius: 6px;
    overflow-x: auto;
    border: 1px solid var(--border);
}

/* Custom details marker for the research-log accordions. */
#log details > summary { list-style: none; }
#log details > summary::-webkit-details-marker { display: none; }
#log details > summary::before {
    content: '+';
    display: inline-block;
    width: 1em;
    text-align: center;
    margin-right: 5px;
    font-weight: bold;
}
#log details[open] > summary::before { content: '-'; }

/* Session Info Layout (used inside session dropdown) */
.session-info {
    display: flex;
    align-items: center;
    background-color: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
}

.session-field {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

.session-field:last-child {
    margin-right: 0;
}

.session-label {
    color: var(--text-muted);
    margin-right: 4px;
}

.session-val {
    color: var(--text);
    font-weight: bold;
}

/* The research-logs sidebar needs room beside the query card; below this width the logs stay
   reachable through the header's session menu (Research logs -> History). */
@media (max-width: 1024px) {
    .research-sidebar { display: none; }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    /* The header keeps one line: the session label and Export log's text give way first. */
    .util-bar { padding: 0 12px; }
    .brand-group { gap: 12px; }
    .header-about { white-space: nowrap; }
    .util-bar .session-label-inline,
    .util-bar .header-btn-label { display: none; }
    .util-bar-right .session-group { margin-right: 4px; }
    .util-bar .header-btn { padding: 0 8px; }

    #landingView { padding: 28px 16px 24px; }

    .hero { padding: 32px 16px; }

    .query-card { padding: 12px; }
    .query-mode { margin: -12px -12px 0; }
    #queryInput { height: 140px; padding: 8px; }
    .query-refine-inner { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 18px 4px 0; }
    .query-card-footer { flex-wrap: wrap; }
    .query-toggles { padding: 0 4px; }
    /* The jurisdiction row takes its own line, and its popover spans that line. */
    .query-actions { position: relative; flex: 1 1 100%; }
    .jurisdiction-picker { position: static; flex: 1; }
    .jurisdiction-trigger { width: 100%; }
    .jurisdiction-trigger .intent-chevron { margin-left: auto; }
    .jurisdiction-popover { left: 0; right: 0; width: auto; max-width: none; }
    .jurisdiction-mode-label { display: none; }

    #resultsView { padding: 12px 16px 0; }

    #searchView { padding: 24px 16px; }
    .search-panel { padding: 20px 16px 24px; }
    .clarify-actions { justify-content: flex-end; }
    .clarify-btn { width: 100%; }

    .answer-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 16px 0; }
    .answer-rail { display: none; }
    .answer-card { padding: 16px; }

    .action-bar { flex-wrap: wrap; }
    .action-bar-spacer { flex-basis: 100%; height: 0; }

    #logoutBtn {
        height: auto !important;
    }
}

.citation-pending {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 21px;
}

#privacyModal {
    position: fixed;
    inset: 0;
    z-index: 10000; /* above the login dialog (9999) */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    background: var(--scrim);
}

#privacyModal[hidden] { display: none; }

.privacy-container {
    width: 75vw;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
    box-sizing: border-box;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    color: var(--text);
    font-size: 15px;
    line-height: 24px;
}

.privacy-body h2 { margin: 24px 0 0; color: var(--heading); font-size: 17px; font-weight: 600; }
.privacy-body p { margin: 12px 0 0; }
.privacy-body ul { margin: 12px 0 0; padding-left: 22px; }
.privacy-body li { margin-top: 8px; }

.modal-privacy-note { margin: 0; color: var(--text-muted); font-size: 12px; text-align: center; }

.site-footer {
    margin-top: auto;
    padding: 16px 20px;
    text-align: center;
    border-top: 1px solid var(--border);
}

/* A button that reads as an inline link. */
.link-btn {
    padding: 0;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.footer-link {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 12px;
    transition: color 0.2s;
}

.footer-link:hover { color: var(--text); }

.privacy-head {
    flex-shrink: 0;
    padding: 20px 56px 16px 28px;
    border-bottom: 1px solid var(--border);
    /* Raised above the scrolling text so the shadow shows over it. */
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Only the text scrolls; the header and its close button stay put. */
.privacy-body {
    overflow-y: auto;
    /* Hard stop at the ends: no rubber-band bounce, and no scrolling of the page behind. */
    overscroll-behavior: none;
    padding: 4px 28px 32px;
}

/* Corpus Browser page (see browser.js): one drill-down pane under clickable breadcrumbs. */
#browserView { overflow-y: auto; }
.browser-filter, .browser-sort {
    height: 32px;
    padding: 6px 10px;
    font-size: 14px;
    color: var(--text);
    background-color: var(--bg-subtle);
    border: 1px solid var(--border-strong);
    border-radius: 6px;
}
.browser-filter { flex: 1 1 200px; min-width: 0; }
.browser-sort { flex: 0 1 220px; min-width: 0; }
.browser-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.browser-toolbar[hidden] { display: none; }
.browser-toolbar { align-items: center; }
.browser-refresh { height: 32px; }
.browser-refresh.spinning svg { animation: browser-spin 0.9s linear infinite; }
.browser-refresh:disabled { cursor: progress; }
.browser-updated { flex: 0 1 auto; font-size: 13px; }
@keyframes browser-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .browser-refresh.spinning svg { animation: none; } }
.browser-crumbs, #browserError, .browser-pane, .browser-toolbar {
    max-width: 1100px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}
.browser-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    padding: 10px 14px 0; /* + the crumb buttons' own 6px puts the first label on the pane's left edge */
    font-size: 14px;
}
.browser-crumb-sep { color: var(--text-muted); }
button.browser-crumb {
    height: auto;
    padding: 2px 6px;
    font-size: 14px;
    font-weight: normal;
    color: var(--primary-color);
    background: none;
    border-radius: 4px;
    text-align: left;
}
button.browser-crumb:hover { background-color: var(--bg-subtle); text-decoration: underline; }
.browser-crumb.current { padding: 2px 6px; font-weight: 600; color: var(--heading); }
#browserError { padding: 8px 20px 0; }
.browser-pane {
    flex-grow: 1;
    margin-top: 12px;
    margin-bottom: 24px;
    padding: 12px;
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    min-height: 240px;
    overflow: hidden; /* the full-bleed list rows (below) follow the rounded corners */
}
/* Inset by the same 20px as the title, breadcrumbs and error above, so their left edge is the panes'. */
.browser-toolbar, .browser-pane { width: calc(100% - 40px); max-width: 1060px; }
.browser-empty { padding: 12px 4px; font-size: 14px; }

/* The list cancels the pane's padding so each row's divider and hover highlight run edge to edge;
   the row's own padding puts the text back where the pane padding had it. */
.browser-list { list-style: none; margin: -12px; padding: 0; }
.browser-list li:last-child .browser-item { border-bottom: 0; }
.browser-item {
    height: auto;
    font-weight: normal;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 10px 24px;
    text-align: left;
    font-size: 14px;
    color: var(--text);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
}
.browser-item:hover { background-color: var(--bg-subtle); }
.browser-item:focus-visible { outline: 2px solid var(--select-border); outline-offset: -2px; }
.browser-item-label { overflow-wrap: anywhere; }
.browser-item-meta { font-size: 12px; font-family: var(--mono); }
.browser-item.folder .browser-item-label::before { content: '\25B8'; margin-right: 6px; color: var(--text-muted); }

.browser-skeleton { padding: 4px 0; }
.browser-skeleton-row {
    height: 18px;
    margin: 14px 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--border) 50%, var(--bg-subtle) 75%);
    background-size: 200% 100%;
    animation: browser-shimmer 1.2s linear infinite;
}
.browser-skeleton-row:nth-child(3n) { width: 70%; }
.browser-skeleton-row:nth-child(3n+1) { width: 85%; }
@keyframes browser-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .browser-skeleton-row { animation: none; } }

.browser-detail-title { margin: 0; font-size: 18px; color: var(--heading); }
.browser-detail-divider { height: 1px; margin: 10px 0 12px; background-color: var(--border); }
.browser-detail-path { font-size: 13px; margin-bottom: 8px; }
.browser-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.browser-subheading { margin: 16px 0 8px; font-size: 14px; color: var(--heading); }
.browser-text {
    margin: 0;
    padding: 10px 12px;
    font: 13px/1.5 var(--mono);
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background-color: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: 6px;
}
.browser-fulltext > summary { cursor: pointer; font-size: 14px; padding: 4px 0; }
.browser-fulltext[open] > summary { margin-bottom: 6px; }

.browser-hint { margin: 8px 0; font-size: 13px; }
.browser-view-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 4px 0 8px;
    border-bottom: 1px solid var(--border);
}
/* Same tab strip as the query box's mode switch (.query-mode), split evenly with an underline on the selected half. */
.browser-view-btn {
    appearance: none;
    -webkit-appearance: none;
    font-family: inherit;
    height: auto;
    min-height: 40px;
    padding: 8px 12px;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background-color: transparent;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.browser-view-btn:hover { background-color: var(--bg-inset); color: var(--text); }
.browser-view-btn[aria-checked="true"] { color: var(--heading); border-bottom-color: var(--ink); }
mark.browser-hl {
    padding: 1px 0;
    color: inherit;
    cursor: pointer;
    background-color: rgba(209, 187, 133, 0.35);
    border-bottom: 2px solid var(--gold);
}
mark.browser-hl:focus-visible { outline: none; }
mark.browser-hl.multi { background-color: rgba(209, 187, 133, 0.6); }
/* While one is hovered (see buildDetail): its chunk turns blue, and the stretches where it overlaps
   another chunk turn green. */
mark.browser-hl.hl-on { background-color: rgba(74, 134, 200, 0.42); border-bottom-color: #4A86C8; }
mark.browser-hl.hl-overlap { background-color: rgba(76, 175, 110, 0.42); border-bottom-color: #4CAF6E; }
.browser-unlocated { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
button.browser-unlocated-btn {
    height: auto;
    padding: 4px 8px;
    font-size: 13px;
    font-weight: normal;
    text-align: left;
    color: var(--primary-color);
    background: none;
    border: 1px solid var(--border);
}
button.browser-unlocated-btn:hover { background-color: var(--bg-subtle); }
/* Hover card over a highlighted chunk: same look as the answer view's citation popover. */
.browser-hover-card {
    position: fixed;
    z-index: 1000;
    min-width: 160px;
    max-width: 320px;
    padding: 8px;
    border: 1px solid var(--border-strong);
    border-radius: 6px;
    background-color: var(--bg);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    pointer-events: none;
}
.browser-hover-card[hidden] { display: none; }
.browser-hover-title { margin: 2px 4px 0; color: var(--heading); font-size: 13px; font-weight: 600; }
.browser-hover-divider { height: 1px; margin: 6px 0 8px; background-color: var(--border); }
.browser-hover-heading { margin: 10px 4px 4px; color: var(--text-muted); font-size: 12px; }
.browser-hover-divider + .browser-hover-heading { margin-top: 0; }
.browser-hover-divider + .browser-hover-category { margin-top: 0; }
.browser-hover-category {
    margin-top: 4px;
    padding: 4px 8px;
    border-left: 3px solid var(--gold);
    border-radius: 0 4px 4px 0;
    background-color: var(--bg-subtle);
    color: var(--heading);
    font-size: 13px;
    font-weight: 600;
}
.browser-hover-heading + .browser-hover-category { margin-top: 0; }
.browser-hover-none { padding: 2px 4px; font-size: 13px; }

.browser-popup-chunk + .browser-popup-chunk { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }

.browser-category { margin-top: 8px; padding: 8px 12px; border-left: 3px solid var(--gold); background-color: var(--bg-subtle); border-radius: 0 6px 6px 0; }
.browser-category-name { font-size: 13px; font-weight: 600; color: var(--heading); }
.browser-category-context { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
.browser-subcategories { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 6px 0 0; font-size: 13px; }
.browser-subcategories dt { color: var(--text-muted); }
.browser-subcategories dd { margin: 0; overflow-wrap: anywhere; }