/* NDP Search — Clean, professional, monochrome + single accent color.
 *
 * Design principles:
 * - Monochrome palette with a single accent (ink blue #3a5a80)
 * - High contrast for readability (lawyers reading dense text)
 * - Responsive: works on desktop and tablet (phone is secondary)
 * - Minimal visual noise — let the content speak
 */

/* --- Reset & Base --- */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    /* Accent — one confident colour, used sparingly (links, active states,
       primary buttons). Light/dark variants derive from it. */
    --accent: #3a5a80;
    --accent-light: #eaeff5;
    --accent-dark: #2c4663;
    /* Warm near-neutrals — paper rather than clinical white */
    --text: #1d1c1a;
    --text-secondary: #57534c;
    --text-muted: #6e6960;
    --bg: #faf9f7;
    --bg-card: #fff;
    --border: #e2dfd9;
    --border-light: #eceae5;
    /* Semantic colours — reserved for genuine status, not decoration */
    --success: #2d8a4e;
    --warning: #9a6d00;
    --danger: #c0392b;
    --radius: 6px;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.09);
    --max-width: 1100px;
}

html {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- Layout --- */

.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5rem;
    width: 100%;
}

main.container {
    flex: 1;
    padding-top: 2rem;
    padding-bottom: 3rem;
}

/* --- Typography --- */

h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.75rem; }
h2 { font-size: 1.35rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.5rem; }
h3 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.25rem; }

p { margin-bottom: 0.75rem; }
ul, ol { margin-bottom: 0.75rem; padding-left: 1.5rem; }
li { margin-bottom: 0.25rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* --- Buttons --- */

.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    line-height: 1.4;
}

.btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    text-decoration: none;
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--accent-dark);
    border-color: var(--accent-dark);
    color: #fff;
}

.btn-secondary {
    background: var(--bg);
    border-color: var(--border);
    color: var(--text-secondary);
}

.btn-small {
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
}

/* --- Header --- */

.site-header {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 0;
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.site-logo {
    /* Mark + wordmark as one clickable unit; the svg mark inherits
       --accent so it always matches the wordmark colour. */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -0.02em;
}

.site-logo svg {
    display: block;
    flex-shrink: 0;
}

.site-logo:hover {
    text-decoration: none;
    color: var(--accent-dark);
}

.site-nav {
    display: flex;
    gap: 1.5rem;
}

.site-nav a {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a.active {
    color: var(--accent);
    text-decoration: none;
    border-bottom-color: var(--accent);
}

/* --- Nav autocomplete (header country picker) --- */

.nav-autocomplete-wrapper {
    position: relative;
    width: 240px;
    flex-shrink: 0;
}

.nav-autocomplete-input {
    width: 100%;
    padding: 0.35rem 0.75rem !important;
    font-size: 0.85rem !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius) !important;
}

.nav-autocomplete-input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px rgba(58, 90, 128, 0.12);
}

.nav-autocomplete-input::placeholder {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* --- Footer --- */

.site-footer {
    border-top: 1px solid var(--border);
    padding: 1.5rem 0;
    margin-top: 2rem;
    background: var(--bg-card);
}

.site-footer .disclaimer {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.site-footer .footer-attribution {
    margin-top: 0.4rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.site-footer .footer-attribution a {
    color: var(--text-muted);
    text-decoration: underline;
}

.site-footer .footer-links {
    margin-top: 0.5rem;
    font-size: 0.8rem;
}

/* --- Landing Hero --- */
/* WHY a dedicated hero section: The primary user action is choosing a country,
   not running a text search. This vertically-centered hero with a single
   autocomplete bar makes the most important action unmissable. */

.landing-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1rem 2rem;
}

.landing-hero-inner {
    /* Widened from 600px so the one-line headline has room; the subtitle
       stays comfortably narrow because its text is short. */
    max-width: 840px;
    width: 100%;
}

.landing-title {
    /* Reduced from 2.25rem so the longer headline sits on a single row
       and the hero is less tall. Wraps gracefully on small phones. */
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
}

.landing-subtitle {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* Muted slashes; the surrounding spaces are the only break points, so the
   short line stays on one row on desktop and wraps cleanly on small phones. */
.landing-subtitle-sep {
    color: var(--text-muted);
    margin: 0 0.3rem;
}

.landing-autocomplete-wrap {
    max-width: 480px;
}

.landing-autocomplete-input {
    font-size: 1.15rem !important;
    padding: 0.85rem 1.25rem !important;
    border-width: 1px !important;
    border-color: var(--border) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.landing-autocomplete-input:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 2px 12px rgba(58, 90, 128, 0.12);
}

.landing-autocomplete-input::placeholder {
    color: var(--text-muted);
}

/* --- Landing: two paths in (search | AI assistant) sharing one row --- */

.landing-paths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    max-width: 880px;
    margin: 0 auto 2rem;
    padding: 0 1rem;
    align-items: stretch;
}

.landing-path {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.4rem 1.5rem;
}

.landing-path-title {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0;
}

/* Each card's content (picker + button, or demo + button) is one group,
   vertically centered in the space under the title and horizontally
   centered so the two buttons match and align across the row. */
.landing-path-body {
    margin: auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
}

.landing-path-body .landing-autocomplete-wrap,
.landing-path-body .mcp-demo {
    width: 100%;
    max-width: none;
}

.landing-path-btn {
    white-space: nowrap;
}

/* The rotating example exchange fades as one unit (search.html) */
.landing-demo .mcp-demo-user,
.landing-demo .mcp-demo-reply {
    transition: opacity 0.35s ease;
}

.landing-demo .mcp-demo-line {
    transition: width 0.35s ease;
}

@media (max-width: 720px) {
    .landing-paths {
        grid-template-columns: 1fr;
    }
}

/* --- Landing: demo video hero ---
   Replaces the old static "Browse and search" / "Use your AI assistant"
   mockup cards. Same 880px content width as the other landing sections so
   it lines up with the coverage strip below. The frame keeps the file's
   own 16:9 shape (height: auto) and rounds/shadows it to match the cards. */
.landing-video {
    max-width: 880px;
    margin: 0.5rem auto 2.25rem;
    padding: 0 1rem;
}

.landing-video-frame {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
    background: #000;
    line-height: 0;                 /* drop the inline-video baseline gap */
}

.landing-video-frame video {
    display: block;
    width: 100%;
    height: auto;                   /* preserves the 16:9 aspect from the file */
}

/* --- Landing: recently updated NDPs grid --- */

.landing-recent {
    max-width: 880px;
    margin: 0 auto 2rem;
    padding: 0 1rem;
}

.landing-recent-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
}

.landing-recent-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 0;
}

.landing-recent-chips {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

.landing-recent-chip {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.45rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.landing-recent-chip:hover {
    text-decoration: none;
    border-color: var(--accent);
    box-shadow: 0 1px 4px rgba(58, 90, 128, 0.15);
}

.landing-recent-name {
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.landing-recent-date {
    flex-shrink: 0;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.landing-recent-all {
    font-size: 0.8rem;
    color: var(--accent);
    white-space: nowrap;
}

@media (max-width: 720px) {
    .landing-recent-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* --- MCP instructions page ---
   Design notes: quiet ink-blue system, but the example prompts are styled
   as chat inputs (tap to copy) and the hero carries a miniature
   conversation. Motion is one staggered page-load reveal, CSS only. */

.mcp-page {
    max-width: 880px;
    margin: 2rem auto 3rem;
}

.mcp-page h1 {
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
}

.mcp-page h2 {
    font-size: 1.1rem;
    margin: 2.25rem 0 0.75rem;
}

/* Hero: text left, mini-conversation right */
.mcp-hero {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.mcp-intro,
.mcp-body {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.65;
}

.mcp-demo {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mcp-demo-user {
    align-self: flex-end;
    max-width: 90%;
    background: var(--accent);
    color: #fff;
    border-radius: 14px 14px 4px 14px;
    padding: 0.55rem 0.85rem;
    font-size: 0.82rem;
    line-height: 1.45;
    box-shadow: 0 2px 8px rgba(44, 70, 99, 0.25);
}

.mcp-demo-reply {
    align-self: flex-start;
    width: 88%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px 14px 14px 4px;
    padding: 0.75rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.mcp-demo-line {
    display: block;
    height: 7px;
    border-radius: 4px;
    background: var(--border-light);
}

.mcp-demo-cites {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.2rem;
    flex-wrap: wrap;
}

.mcp-demo-cite {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.68rem;
    color: var(--accent);
    background: rgba(58, 90, 128, 0.09);
    border-radius: 3px;
    padding: 0.15rem 0.45rem;
    white-space: nowrap;
}

.mcp-demo-caption {
    font-size: 0.72rem;
    color: var(--text-muted);
    text-align: right;
    margin: 0;
}

/* Staggered load reveal for the conversation */
@media (prefers-reduced-motion: no-preference) {
    .mcp-demo-user,
    .mcp-demo-reply,
    .mcp-demo-caption {
        opacity: 0;
        transform: translateY(8px);
        animation: mcp-rise 0.45s ease-out forwards;
    }
    .mcp-demo-reply { animation-delay: 0.35s; }
    .mcp-demo-caption { animation-delay: 0.7s; }

    .mcp-tool-card {
        opacity: 0;
        transform: translateY(8px);
        animation: mcp-rise 0.45s ease-out forwards;
    }
    .mcp-tool-card:nth-child(1) { animation-delay: 0.05s; }
    .mcp-tool-card:nth-child(2) { animation-delay: 0.12s; }
    .mcp-tool-card:nth-child(3) { animation-delay: 0.19s; }
    .mcp-tool-card:nth-child(4) { animation-delay: 0.26s; }
}

@keyframes mcp-rise {
    to { opacity: 1; transform: translateY(0); }
}

/* Setup steps + tip */
.mcp-setup-layout {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 2rem;
    align-items: start;
    margin-top: 1rem;
}

.mcp-steps {
    position: relative;
}

.mcp-step {
    position: relative;
    display: flex;
    gap: 0.9rem;
    padding-bottom: 1.1rem;
    font-size: 0.92rem;
    line-height: 1.55;
}

/* Timeline thread connecting the step numbers */
.mcp-step:not(:last-of-type)::before {
    content: "";
    position: absolute;
    left: 0.8rem;
    top: 1.8rem;
    bottom: -0.1rem;
    width: 2px;
    background: var(--border);
    transform: translateX(-50%);
}

.mcp-step p {
    margin: 0 0 0.4rem;
}

.mcp-step-num {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem;
}

.mcp-field-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 0.9rem;
    align-items: center;
    margin-top: 0.5rem;
}

.mcp-field-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 600;
}

.mcp-field-value {
    font-size: 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.3rem 0.6rem;
    user-select: all;
}

.mcp-other-clients {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-top: 0.5rem;
}

.mcp-other-clients code {
    font-size: 0.8rem;
    user-select: all;
}

.mcp-sidebar-tip {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem 1.1rem;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.mcp-sidebar-tip strong {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--text);
}

.mcp-sidebar-tip p {
    margin: 0;
}

/* Tool cards */
.mcp-try-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: -0.25rem 0 1rem;
}

.mcp-tools-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.mcp-tool-card {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.1rem 1.2rem;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.mcp-tool-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 14px rgba(44, 70, 99, 0.1);
    transform: translateY(-2px);
}

.mcp-tool-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.mcp-tool-head h3 {
    font-size: 0.95rem;
    margin: 0;
}

.mcp-tool-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    background: rgba(58, 90, 128, 0.09);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mcp-tool-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.mcp-tool-card > p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* "Try" prompts styled as chat inputs; click copies the question */
.mcp-try {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    text-align: left;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    font: inherit;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.mcp-try:hover {
    border-color: var(--accent);
    background: #fff;
    box-shadow: 0 1px 6px rgba(58, 90, 128, 0.15);
}

.mcp-try.copied {
    border-color: var(--accent);
}

.mcp-try-prompt {
    flex-shrink: 0;
    color: var(--accent);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
}

.mcp-try-text {
    flex: 1;
    min-width: 0;
}

.mcp-try-action {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    opacity: 0;
    transition: opacity 0.15s;
}

.mcp-try:hover .mcp-try-action,
.mcp-try.copied .mcp-try-action {
    opacity: 1;
}

/* The big composed question: dark ink panel, serif quote */
.mcp-bigq {
    margin: 1.5rem 0 1rem;
    background: #2c4663;
    border-radius: 12px;
    padding: 1.4rem 1.6rem;
    color: #fff;
}

.mcp-bigq-eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 0.6rem;
}

.mcp-bigq-quote.mcp-try {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    padding: 0.8rem 1.1rem;
    color: #fff;
}

.mcp-bigq-quote.mcp-try:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: none;
}

.mcp-bigq-quote .mcp-try-text {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.5;
}

.mcp-bigq-quote .mcp-try-action {
    color: #fff;
}

.mcp-bigq-note {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0.7rem 0 0;
}

.mcp-tools-note {
    font-size: 0.85rem;
    color: var(--text-muted);
}

@media (max-width: 760px) {
    .mcp-hero,
    .mcp-setup-layout,
    .mcp-tools-grid {
        grid-template-columns: 1fr;
    }
    .mcp-hero { gap: 1.5rem; }
    .mcp-demo { max-width: 380px; }
}


/* --- Contact page --- */

.contact-page {
    max-width: 640px;
    margin: 2rem auto 3rem;
    font-size: 0.95rem;
    line-height: 1.65;
}

.contact-email {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 1.25rem 0;
}

/* --- Search Form --- */

.search-section {
    max-width: 860px;
    margin: 0 auto;
}

.search-bar {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Country picker column inside the search bar — fixed width on desktop,
   full width when the bar wraps on narrow screens. Doubled selector so it
   outranks the base .autocomplete-wrapper { width: 100% } rule below. */
.search-bar .search-country-wrap {
    width: 230px;
    flex-shrink: 0;
}

.search-bar .autocomplete-input {
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    border-width: 1px;
}

@media (max-width: 640px) {
    .search-bar .search-country-wrap {
        width: 100%;
    }
}

.search-input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    transition: border-color 0.15s;
    background: var(--bg-card);
}

.search-input:focus {
    border-color: var(--accent);
}

.search-btn {
    padding: 0.65rem 1.5rem;
    font-size: 1rem;
}

.search-filters {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 0.6rem 0 1rem;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.filter-group label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.filter-group select {
    padding: 0.4rem 0.6rem;
    font-size: 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    min-width: 200px;
}

/* Mode option — generic label style for checkbox/radio toggles */
.mode-option {
    cursor: pointer;
}

/* --- Result Cards --- */

.results-meta-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.results-count {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0;
}

/* Quiet text-only button (e.g. "Expand all") */
.btn-text {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8rem;
    color: var(--accent);
    cursor: pointer;
}

.btn-text:hover {
    text-decoration: underline;
}

.result-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 0.75rem;
    transition: box-shadow 0.15s;
}

.result-card:hover {
    box-shadow: var(--shadow-hover);
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.result-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}

.result-source {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

.result-snippet {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.result-snippet mark {
    background: #fdf0c2;
    padding: 0 2px;
    border-radius: 2px;
}

.result-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.result-cited {
    font-size: 0.75rem;
    color: var(--accent);
    background: var(--accent-light);
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    white-space: nowrap;
    font-weight: 500;
}

/* Clickable variant — opens the Decisions tab filtered to this item */
.result-cited-link {
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.result-cited-link:hover {
    background: var(--accent);
    color: #fff;
    text-decoration: none;
}

.result-quality-warning {
    font-size: 0.75rem;
    color: var(--warning);
    white-space: nowrap;
}

.result-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-copy {
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-copy.copied {
    background: var(--success);
    border-color: var(--success);
    color: #fff;
}

/* --- Search Error --- */

.search-error {
    background: #fdf2f2;
    border: 1px solid #e8c4c4;
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--danger);
    margin-bottom: 1rem;
}

/* Degradation notice: search ran but not at full strength (query
   auto-simplified, or the meaning-based path was down). Amber, not red —
   results are still valid, the reader just needs the caveat. */
.search-notice {
    background: #fdf8ec;
    border: 1px solid #e8d9b0;
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #7a5c1e;
    margin-bottom: 1rem;
}

.search-notice p {
    margin: 0;
}

.search-notice p + p {
    margin-top: 0.35rem;
}

/* --- No Results / Help --- */

.no-results,
.search-help,
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-secondary);
}

.search-help {
    text-align: left;
    max-width: 520px;
    margin: 0 auto;
}

.search-help h2 {
    margin-top: 0;
}

/* --- Countries Grid --- */

.section-intro {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.countries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}

.country-card {
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    text-decoration: none;
    color: var(--text);
    transition: box-shadow 0.15s, border-color 0.15s;
}

.country-card:hover {
    text-decoration: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-hover);
}

.country-name {
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.country-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.country-recent-pill {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--accent);
    background: rgba(58, 90, 128, 0.09);
    border-radius: 3px;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
}

/* Dataset at-a-glance band above the countries grid */
.countries-glance {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 720px;
    margin-bottom: 1.25rem;
}

/* --- Country Detail --- */

/* Country page version date in h1 */
.country-version {
    font-weight: 400;
    font-size: 0.65em;
    color: var(--text-muted);
}

/* Country page toolbar: search bar + IRB link */
.country-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0 1.25rem;
}

.country-search-form {
    display: flex;
    flex: 1;
    gap: 0;
}

.country-search-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    border: 1px solid var(--border);
    border-right: none;
    border-radius: var(--radius) 0 0 var(--radius);
    outline: none;
}

.country-search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(58, 90, 128, 0.15);
}

.country-search-btn {
    border-radius: 0 var(--radius) var(--radius) 0;
    padding: 0.5rem 1rem;
}

.btn-irb {
    white-space: nowrap;
}

/* Change memos */
.memo-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    margin-bottom: 0.75rem;
}

.memo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.memo-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.memo-stats {
    display: flex;
    gap: 0.75rem;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.memo-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.stat-added { color: var(--success); }
.stat-removed { color: var(--danger); }
.stat-updated { color: var(--warning); }
.stat-renumbered { color: var(--text-muted); }

.memo-content {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-line;
}

.memo-link {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

/* --- Document List (country detail page) --- */

/* NOTE: the section table of contents (.doc-toc) is styled in
   ndp-changes.css as a sticky left sidebar, scoped to .ndp-v2. The old
   two-column inline TOC styles that used to live here clashed with that
   layout (cramped double columns inside a 220px sidebar) and were removed. */

/* Section number in the heading — visually muted, consistent with TOC */
.doc-section-num {
    color: var(--text-muted);
    font-weight: 400;
    margin-right: 0.25rem;
}

.doc-list {
    margin-top: 1rem;
}

/* Offset for anchor links so header doesn't hide behind sticky elements */
.doc-section-header {
    scroll-margin-top: 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--accent-dark);
    padding: 0.75rem 0 0.25rem;
    border-bottom: 1px solid var(--border-light);
    margin-top: 1rem;
    margin-bottom: 0.25rem;
}

.doc-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 0.875rem;
}

.doc-row:last-child {
    border-bottom: none;
}

.doc-item {
    flex-shrink: 0;
    width: 3.5rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.doc-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.doc-source {
    font-size: 0.75rem;
    color: var(--accent);
    background: var(--accent-light);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    margin-left: 0.5rem;
    white-space: nowrap;
}

.doc-status {
    flex-shrink: 0;
    font-size: 0.75rem;
}

.status-ok { color: var(--success); }
.status-missing { color: var(--text-muted); font-style: italic; }

.doc-link {
    flex-shrink: 0;
    font-size: 0.75rem;
}

.doc-cited {
    flex-shrink: 0;
    font-size: 0.7rem;
    color: var(--accent);
    background: var(--accent-light);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    white-space: nowrap;
}

.doc-unavailable {
    opacity: 0.6;
}

/* --- About page --- */

.about-section {
    max-width: 720px;
}

.about-section h1 {
    margin-bottom: 0.5rem;
}

/* About page tab strip — mirrors .results-tabs pattern */
.about-tabs {
    display: flex;
    flex-wrap: wrap;            /* five tabs overflow narrow screens — wrap */
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.5rem;
}

@media (max-width: 640px) {
    .about-tab {
        padding: 0.5rem 0.65rem;
        font-size: 0.85rem;
    }
}

.about-tab {
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.about-tab:hover {
    color: var(--text);
}

.about-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.about-panel[hidden] {
    display: none;
}

/* First h2 inside a panel doesn't need the top margin — tabs provide context */
.about-panel > h2:first-child {
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
}

.about-section h2 {
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.25rem;
    margin-top: 2rem;
}

.about-section h3 {
    margin-top: 1.25rem;
    scroll-margin-top: 3.5rem;
}

.about-section ol,
.about-section ul {
    padding-left: 1.5rem;
}

.about-section ol li,
.about-section ul li {
    margin-bottom: 0.5rem;
}

/* --- Coverage & Currency counter band (landing page, below recent strip) --- */
.landing-coverage {
    max-width: 880px;       /* matches .landing-recent so the two align */
    margin: 0 auto 2rem;
    padding: 0 1rem;
}

/* Corpus facts as a framed "spec panel" — a bordered card with an uppercase
   label column and an aligned value column. Reads as an intentional at-a-glance
   summary, not a marketing dashboard of big numbers. */
.coverage-table {
    border-collapse: collapse;
    width: 100%;                    /* fills the page column, matching the
                                       Recently-updated chips row above */
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;               /* clip row dividers to the rounded corners */
}

.coverage-table th,
.coverage-table td {
    text-align: left;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-light);
    vertical-align: baseline;
}

.coverage-table tr:last-child th,
.coverage-table tr:last-child td {
    border-bottom: none;
}

.coverage-table th {
    width: 260px;                   /* fixed so every value starts at one x */
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    line-height: 1.35;
}

.coverage-table td {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

/* Quiet clarifier after a value ("across current NDPs") — plain weight so the
   number stays the emphasis. */
.coverage-sub {
    font-weight: 400;
    color: var(--text-muted);
}

/* A row whose value is a full sentence (Case law links) reads as prose, not a
   single figure: normal weight, with the numbers bolded inline via <strong>. */
.coverage-table td.coverage-sentence {
    font-weight: 400;
    color: var(--text-secondary);
}
.coverage-table td.coverage-sentence strong {
    font-weight: 700;
    color: var(--text);
}

@media (max-width: 560px) {
    /* Stack label above value so neither column gets crushed on narrow screens. */
    .coverage-table,
    .coverage-table tbody,
    .coverage-table tr { display: block; }
    .coverage-table th,
    .coverage-table td {
        display: block;
        width: auto;
        border-bottom: none;
        padding: 0.75rem 1.1rem;
    }
    .coverage-table th { padding-bottom: 0.15rem; }
    .coverage-table td { padding-top: 0; }
    .coverage-table tr { border-bottom: 1px solid var(--border-light); }
    .coverage-table tr:last-child { border-bottom: none; }
}

/* --- Responsive --- */

@media (max-width: 640px) {
    .site-header .container {
        flex-direction: column;
        gap: 0.5rem;
    }

    .site-nav {
        gap: 0.75rem;
    }

    /* On phones the headline wraps to 2-3 lines; shrink it so it doesn't
       dominate the screen. */
    .landing-title {
        font-size: 1.4rem;
    }

    .nav-autocomplete-wrapper {
        width: 160px;
    }

    .search-filters {
        flex-direction: column;
    }

    .filter-group select {
        min-width: 100%;
    }

    .countries-grid {
        grid-template-columns: 1fr;
    }

    .result-header {
        flex-direction: column;
        gap: 0.25rem;
    }

    .result-meta {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .doc-row {
        flex-wrap: wrap;
    }

    .doc-title {
        white-space: normal;
    }
}

/* --- Synthesis box: LLM-generated summary of search results --- */
/* One calm treatment: a hairline card with an accent rule, a single small
   label, and a single inline verification note in the header. The old
   amber warning bar + orange label + button stack tripled the message. */

.synthesis-box {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

.synthesis-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.synthesis-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

/* Single inline verification note — the one place we say it */
.synthesis-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}

.synthesis-body {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text);
    margin-bottom: 0.75rem;
}

.synthesis-body p {
    margin-bottom: 0;
}

/* --- Structured Litigation Themes in Decision Synthesis --- */
/* WHY structured rendering: The LLM returns JSON with legal headings like
   "credibility", "state_protection", "ifa". These styles make themes scannable
   so lawyers can quickly jump to the issue area they care about. */

.synthesis-context {
    margin: 0 0 0.75rem 0;
    font-style: italic;
    color: var(--text-secondary);
}

/* Claim types header — e.g. "sexual orientation; divorced women" */
.themes-claim-types {
    margin: 0 0 0.75rem 0;
    font-size: 0.88rem;
    line-height: 1.5;
}

.themes-claim-label {
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    margin-right: 0.35rem;
}

/* Individual theme section — one per legal issue */
.theme-section {
    margin: 0.5rem 0 0.75rem 0;
    padding-left: 0.75rem;
    border-left: 2px solid var(--border);
}

.theme-heading {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin: 0 0 0.25rem 0;
}

/* Bullet list within a theme */
.theme-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 0.25rem 0;
}

.theme-bullet {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text);
    padding: 0.1rem 0;
    /* Hanging indent for multi-line bullets so the dash stays left-aligned */
    padding-left: 1rem;
    text-indent: -0.85rem;
}

.theme-bullet::before {
    content: "–";
    color: var(--text-muted);
    margin-right: 0.4rem;
}

/* Legacy styles kept for backward compat with old non-JSON responses */
.synthesis-theme {
    margin: 0.6rem 0;
    padding-left: 0.75rem;
    border-left: 2px solid var(--border);
    line-height: 1.6;
}

.synthesis-theme-name {
    color: var(--accent);
    font-weight: 600;
}

.synthesis-theme-content {
    color: var(--text);
}

/* Case citations within themes — subtle emphasis so they're findable */
.synthesis-citation {
    font-weight: 500;
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.03);
    padding: 0 0.2rem;
    border-radius: 2px;
}

/* Clickable citation links — underline to signal interactivity */
a.synthesis-citation-link {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: rgba(58, 90, 128, 0.3);
    text-underline-offset: 2px;
    transition: text-decoration-color 0.15s, background 0.15s;
    cursor: pointer;
}

a.synthesis-citation-link:hover {
    text-decoration-color: var(--accent);
    background: var(--accent-light);
}

/* "+N more" toggle folding long citation chains in litigation themes —
   deliberately muted so the visible citations stay the emphasis */
a.synthesis-citation-more {
    color: var(--text-muted);
    font-size: 0.85em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

a.synthesis-citation-more:hover {
    color: var(--accent);
    text-decoration: underline;
}

.synthesis-citations {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    font-size: 0.85rem;
}

.synthesis-citations-label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.synthesis-cite-link {
    color: var(--accent);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    transition: background 0.15s;
}

.synthesis-cite-link:hover {
    background: var(--accent-light);
    text-decoration: none;
}

.synthesis-disclaimer {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    margin-bottom: 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-light);
}

/* Citation index badge on result cards — only shown when synthesis is active */
.result-cite-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-dark);
    margin-right: 0.3rem;
}

/* --- Full-text expander for search results --- */
/* WHY: Snippets are shown by default (2-3 sentences). The full chunk text
   is hidden behind a toggle because lawyers sometimes need the full context
   before deciding to cite, but showing it by default overwhelms the page. */

.result-full-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.result-full-text[hidden] {
    display: none;
}

/* Formatted by _formatFullText() in search.js: raw extraction lines are
   rebuilt into <p> paragraphs, so this reads as prose — comfortable
   measure, real paragraph spacing, no pre-wrap fragmenting. */
.result-full-text-content {
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    max-width: 72ch;
    line-height: 1.7;
    word-wrap: break-word;
}

.result-full-text-content p {
    margin-bottom: 0.75em;
}

.result-full-text-content p:last-child {
    margin-bottom: 0;
}

/* Section headings detected in the extraction (ALL-CAPS lines) */
.fulltext-heading {
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text);
    margin-top: 1.2em;
}

/* Footnote markers that were stranded on their own lines — kept, but
   inline and de-emphasized so they stop fragmenting the text */
.fulltext-fnref {
    font-size: 0.72em;
    vertical-align: super;
    color: var(--text-muted);
}

/* Truncation notices when a long chunk is capped to a readable window */
.fulltext-trim {
    font-size: 0.85em;
    font-style: italic;
    color: var(--text-muted);
}

.result-full-text-content mark {
    background: #fdf0c2;
    padding: 0 2px;
    border-radius: 2px;
}

/* Toggle button styling — sits between snippet and metadata */
.btn-toggle-text {
    color: var(--accent);
    border-color: transparent;
    background: none;
    padding: 0.15rem 0;
    font-size: 0.8rem;
    margin-bottom: 0.5rem;
}

.btn-toggle-text:hover {
    color: var(--accent-dark);
    border-color: transparent;
    background: none;
    text-decoration: underline;
}

/* Result index badge — [1], [2] etc. for cross-referencing with AI synthesis */
.result-index {
    display: inline-block;
    min-width: 2em;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--accent-dark);
    background: var(--accent-light);
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* Make result header a flex row so index + title align */
.result-header {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
}

/* --- Loading dots animation for async synthesis --- */
.synthesis-trigger-btn {
    display: block;
    margin: 0.25rem 0;
}

.synthesis-loading {
    text-align: center;
    padding: 0.5rem 0;
    color: var(--text-muted);
}

.synthesis-loading p {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    font-style: italic;
}

.loading-dots {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
}

.loading-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    animation: dot-pulse 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes dot-pulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1); }
}

/* Error state for synthesis */
.synthesis-error {
    color: #9ca3af;
    font-style: italic;
    font-size: 0.9rem;
}

/* --- Citation links in synthesis summary --- */
.cite-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9em;
    cursor: pointer;
    border-bottom: 1px dotted var(--accent);
    transition: color 0.15s;
}

.cite-link:hover {
    color: var(--accent-dark);
}

/* --- Citation tooltip popup --- */
.cite-tooltip {
    position: absolute;
    z-index: 1000;
    background: #1e293b;
    color: #f1f5f9;
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    max-width: 340px;
    font-size: 0.82rem;
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
}

.cite-tooltip-title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.cite-tooltip-org {
    color: #94a3b8;
    font-size: 0.78rem;
    margin-bottom: 0.35rem;
}

.cite-tooltip-link {
    display: inline-block;
    color: #38bdf8;
    text-decoration: none;
    font-size: 0.78rem;
    margin-top: 0.15rem;
}

.cite-tooltip-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Results Tabs — Documents vs Decisions
   ========================================================================== */
/* WHY tabs: Lawyers need both NDP evidence and case law in one place.
   Tabs keep both accessible without cluttering the page. The decisions
   tab loads async so it doesn't slow down the initial page render. */

.results-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.25rem;
}

.results-tab {
    padding: 0.6rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.results-tab:hover {
    color: var(--text);
}

.results-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.tab-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg);
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    min-width: 1.5em;
    text-align: center;
}

.results-tab.active .tab-count {
    color: var(--accent);
    background: var(--accent-light);
}

.tab-panel[hidden] {
    display: none;
}

/* ==========================================================================
   Decisions Filters — tribunal checkboxes + sort dropdown
   ========================================================================== */

.decisions-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-light);
}

.decisions-filter-group {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

.decisions-dataset-toggle {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
}

.decisions-dataset-toggle input[type="checkbox"] {
    accent-color: var(--accent);
    width: 0.9rem;
    height: 0.9rem;
}

.decisions-sort-group select {
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}

/* ==========================================================================
   Decision Cards — case law results from A2AJ API
   ========================================================================== */
/* Visually distinct from NDP result cards: uses a left-border accent
   instead of shadow-on-hover, and shows tribunal badges prominently. */

.decision-card {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    transition: box-shadow 0.15s;
}

.decision-card:hover {
    box-shadow: var(--shadow-hover);
}

.decision-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.decision-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
}

/* Tribunal badge — color-coded by dataset */
.tribunal-badge {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Federal Court — indigo/purple to distinguish from NDP's teal */
.tribunal-badge[data-dataset="FC"] {
    color: #4338ca;
    background: #e0e7ff;
}

.decision-card:has(.tribunal-badge[data-dataset="FC"]) {
    border-left-color: #6366f1;
}

/* Federal Court of Appeal — darker indigo */
.tribunal-badge[data-dataset="FCA"] {
    color: #312e81;
    background: #c7d2fe;
}

.decision-card:has(.tribunal-badge[data-dataset="FCA"]) {
    border-left-color: #4338ca;
}

/* RAD — warm amber to match IRB/administrative tone */
.tribunal-badge[data-dataset="RAD"] {
    color: #92400e;
    background: #fef3c7;
}

.decision-card:has(.tribunal-badge[data-dataset="RAD"]) {
    border-left-color: #f59e0b;
}

/* RLLR — sage green (Refugee Law Lab) */
.tribunal-badge[data-dataset="RLLR"] {
    color: #166534;
    background: #dcfce7;
}

.decision-card:has(.tribunal-badge[data-dataset="RLLR"]) {
    border-left-color: #22c55e;
}

/* --- Tribunal Section Headers --- */
/* WHY grouped by tribunal: Lawyers need to see jurisprudence organized by
   source — FC (judicial review), FCA (appeals), RAD (merits), RLLR (IRB).
   Visual grouping makes scanning for relevant precedent faster. */

.tribunal-section-header {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 1.25rem 0 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-muted);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
}

/* First section header doesn't need top margin */
.tribunal-section-header:first-child {
    margin-top: 0;
}

/* Color-code section headers to match their tribunal's badge */
.tribunal-section-header[data-tribunal="FC"] {
    border-left-color: #6366f1;
}
.tribunal-section-header[data-tribunal="FCA"] {
    border-left-color: #4338ca;
}
.tribunal-section-header[data-tribunal="RAD"] {
    border-left-color: #f59e0b;
}
.tribunal-section-header[data-tribunal="RLLR"] {
    border-left-color: #22c55e;
}

.tribunal-section-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Fallback for browsers without :has() — default indigo left border */

.decision-citation {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.decision-snippet {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 0.6rem;
}

.decision-snippet mark {
    background: #fef3cd;
    padding: 0 2px;
    border-radius: 2px;
}

/* NDP citation context — replaces generic snippet when available */
.decision-ndp-cites {
    font-size: 0.85rem;
    margin-bottom: 0.6rem;
}

.ndp-cite-item {
    padding: 0.3rem 0;
    line-height: 1.5;
    border-bottom: 1px solid var(--border-light, #eee);
}

.ndp-cite-item:last-child {
    border-bottom: none;
}

.ndp-cite-ref {
    font-weight: 600;
    color: var(--accent, #0e7569);
    white-space: nowrap;
}

.ndp-cite-context {
    color: var(--text-secondary);
}

.ndp-cite-more {
    display: inline-block;
    margin-top: 0.2rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.decision-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.decision-actions {
    display: flex;
    gap: 0.5rem;
}

/* "View decision" button for RAD/RLLR (fetch full text from A2AJ) */
.btn-view-text {
    cursor: pointer;
}

/* Expandable full text panel for RAD/RLLR decisions */
.decision-fulltext {
    margin-top: 0.75rem;
    border-top: 1px solid var(--border-light);
    padding-top: 0.75rem;
}

.decision-fulltext-content {
    font-family: inherit;
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--text);
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.75rem;
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
}

/* Loading and error states for decisions */
.decisions-loading {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
}

.decisions-loading p {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    font-style: italic;
}

.decisions-error {
    background: #fdf2f2;
    border: 1px solid #e8c4c4;
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: var(--danger);
}

.decisions-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Citation filter header — shown when viewing decisions citing a specific doc */
.citation-filter-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-muted);
    border-radius: var(--radius);
    border-left: 3px solid var(--accent);
}

.citation-filter-back {
    color: var(--accent);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.citation-filter-back:hover {
    text-decoration: underline;
}

.citation-filter-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.decisions-attribution {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-light);
}

.decisions-attribution a {
    color: var(--text-muted);
    text-decoration: underline;
}

/* --- Citation-filtered tribunal sub-tabs --- */
/* WHY sub-tabs: When viewing decisions citing an NDP item, the list mixes
   FC (judicial reviews), RAD (merits appeals), and RLLR (leading cases).
   Tabs let lawyers focus on the tribunal type relevant to their argument. */
.citation-tribunal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border-light);
    margin-bottom: 1rem;
}

.citation-tribunal-tab {
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}

.citation-tribunal-tab:hover {
    color: var(--text-primary);
}

.citation-tribunal-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* --- Prior NDP version indicator --- */
/* WHY: Item numbers persist across NDP versions but content changes.
   Decisions predating the current NDP version cite an earlier document.
   Visual dimming + badge helps lawyers focus on current jurisprudence. */
.decision-card.prior-version {
    opacity: 0.7;
    border-left-color: var(--border-light);
}

.decision-badges {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-shrink: 0;
}

/* --- Responsive adjustments for decisions --- */
@media (max-width: 640px) {
    .decisions-filters {
        flex-direction: column;
        align-items: flex-start;
    }

    .decision-header {
        flex-direction: column;
        gap: 0.25rem;
    }

    .decision-meta {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .results-tabs {
        gap: 0;
    }

    .results-tab {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   Autocomplete Component — shared by landing page and countries filter
   ========================================================================== */
/* WHY a shared component: Both the search page (country selection) and the
   countries index (filtering) need type-ahead search. Same styling and
   behavior ensures consistency; different callbacks handle selection vs filter. */

.autocomplete-wrapper {
    position: relative;
    width: 100%;
}

.autocomplete-input {
    width: 100%;
    padding: 0.65rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    transition: border-color 0.15s;
    background: var(--bg-card);
}

.autocomplete-input:focus {
    border-color: var(--accent);
}

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

.autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-hover);
    max-height: 320px;
    overflow-y: auto;
}

.autocomplete-suggestions[hidden] {
    display: none;
}

.autocomplete-item {
    padding: 0.6rem 1rem;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: background 0.1s;
}

.autocomplete-item:last-child {
    border-bottom: none;
}

.autocomplete-item:hover,
.autocomplete-item.highlighted {
    background: var(--accent-light);
}

.autocomplete-item-name {
    font-weight: 500;
    color: var(--text);
}

.autocomplete-item-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

.autocomplete-no-results {
    padding: 0.75rem 1rem;
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.9rem;
}

/* Clear button inside autocomplete input */
.autocomplete-clear {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.25rem;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.autocomplete-clear:hover {
    opacity: 1;
    color: var(--text);
}

.autocomplete-clear[hidden] {
    display: none;
}

/* ==========================================================================
   Document Cards — cleaner layout for country page document list
   ========================================================================== */
/* WHY cards instead of rows: The original dense row layout was noisy with
   too much horizontal information. Cards give each doc breathing room and
   establish visual hierarchy: title > publisher > metadata. */

.doc-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.875rem 1rem;
    margin-bottom: 0.5rem;
    transition: box-shadow 0.15s;
}

.doc-card:hover {
    box-shadow: var(--shadow);
}

.doc-card-header {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.doc-card-item {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-muted);
    min-width: 2.75rem;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.doc-card-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    flex: 1;
    line-height: 1.35;
}

.doc-card-star {
    color: #f59e0b;
    font-size: 1rem;
    flex-shrink: 0;
    margin-left: 0.25rem;
}

.doc-card-publisher {
    font-size: 0.85rem;
    color: var(--accent);
    margin-top: 0.3rem;
    margin-left: 3.25rem; /* Align with title (item width + gap) */
}

.doc-card-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
    margin-left: 3.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.doc-card-meta a {
    color: var(--accent);
}

.doc-card-divider {
    color: var(--border);
}

.doc-card-status {
    font-size: 0.75rem;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
}

.doc-card-status.status-pending {
    color: var(--text-muted);
    background: var(--bg);
}

/* --- Terms-of-Use click-through gate (restored 2026-06-13) --- */
.tou-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.tou-modal {
    background: var(--bg-card, #fff);
    border-radius: var(--radius, 8px);
    padding: 2rem;
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.tou-modal h2 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.tou-content {
    font-size: 0.92rem;
    color: var(--text-secondary, var(--text-muted));
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.tou-modal form {
    text-align: center;
}

/* Maps, atlases, portals, scanned images — not searchable by nature (not
   "coming soon"). Muted, distinct from the amber-ish pending look. */
.doc-card-status.status-skipped {
    color: var(--text-faint, var(--text-muted));
    background: var(--bg);
    font-style: italic;
}

/* --- NDP version selector + archived-edition treatment --- */
/* Citation on the left (plain, copyable), version dropdown on the right,
   same row — keeps vertical space tight and the citation string intact. */
/* ==========================================================================
   NDP version identity + list toolbar (owner design pass 2026-07-10)
   The header carries ONE prominent element: the citation with its status
   pill. Every list control (filter / sort / version / compare / change
   chips) lives in the single .ndp-toolbar box below — one height, one text
   size, Shopify-style listing toolbar.
   ========================================================================== */
.ndp-version-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 0.7rem;
    margin-bottom: 0.35rem;
}
/* The citation is the page's loud element: bigger, heavier, copyable. */
.ndp-version-title .tab-citation {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    min-width: 0;
    overflow-wrap: anywhere;
}
.ndp-status-pill {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    white-space: nowrap;
}
/* Only the off-normal state is tagged: current is the default and carries
   no pill (owner decision 2026-07-10). */
.ndp-status-pill--archived {
    color: #8a5a10;
    background: #f6e7c6;
    border: 1px solid #e4c98a;
}
.ndp-doc-count {
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Archived view: a clear, warm colour shift so it's unmistakable that this is
   NOT the current NDP. Bordered band + sepia tint. */
.ndp-version-header--archived {
    background: #fbf3e3;
    border: 1px solid #e4c98a;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
}
.ndp-version-header--archived .vh-eyebrow {
    color: #9a6a14;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* --- The toolbar box ---------------------------------------------------- */
.ndp-toolbar {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    padding: 0.7rem 0.75rem;
    margin-bottom: 1.1rem;
    box-shadow: var(--shadow);
}
/* Strict 2-column grid: Version | Compare over Filter | Sort. Every
   control fills its cell so edges align — no ragged gaps (owner request
   2026-07-10). Missing controls collapse: no version row for single-
   version countries; without a sort the filter spans the full width. */
.ndp-toolbar-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
@media (max-width: 700px) {
    .ndp-toolbar-grid { grid-template-columns: 1fr; }
}
/* Filter with no sort after it (no citation data): take the whole row */
.ndp-toolbar-filter:last-child {
    grid-column: 1 / -1;
}
/* One control height + one text size for EVERYTHING in the box. */
.ndp-toolbar {
    --toolbar-h: 36px;
    --toolbar-fs: 0.85rem;
}
.ndp-toolbar-filter {
    width: 100%;
    min-width: 0;
    height: var(--toolbar-h);
    padding: 0 0.75rem;
    font-size: var(--toolbar-fs);
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    outline: none;
    transition: border-color 0.15s;
}
.ndp-toolbar-filter:focus {
    border-color: var(--accent);
    /* a visible ring, not just a 1px colour change — keyboard users must
       be able to spot the focused control at a glance */
    box-shadow: 0 0 0 3px var(--accent-light);
}
.ndp-toolbar-filter::placeholder { color: var(--text-muted); }
/* Labelled select: muted label + chromeless select inside one border,
   the standard listing-page "Sort by: …" control. */
.ndp-toolbar-field {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;              /* let grid cells shrink the field */
    height: var(--toolbar-h);
    padding: 0 0.3rem 0 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    transition: border-color 0.15s;
    cursor: pointer;
}
.ndp-toolbar-field:hover { border-color: var(--accent); }
.ndp-toolbar-field:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}
.ndp-toolbar-field-label {
    font-size: var(--toolbar-fs);
    color: var(--text-muted);
    white-space: nowrap;
}
.ndp-toolbar-select {
    border: none;
    background: transparent;
    font-size: var(--toolbar-fs);
    font-weight: 600;
    color: var(--text);
    height: 100%;
    flex: 1 1 auto;            /* the select fills its field's cell */
    min-width: 0;
    cursor: pointer;
    outline: none;
}
/* Archived view: the Version field carries the warm tint so the off-current
   state is visible inside the toolbar too. */
.ndp-toolbar--archived .ndp-toolbar-field:has(#ndp-version-select) {
    border-color: #d8b35a;
    background: #fbf3e3;
}
/* Second row: change legend chips, hairline-separated. */
.ndp-toolbar-changes {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border-light);
}
.ndp-archived-note {
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: #8a5a10;
    line-height: 1.5;
}
.ndp-archived-note a { color: #8a5a10; font-weight: 600; white-space: nowrap; }

/* --- Per-item copy-citation icon button --- */
.doc-card-copy {
    margin-left: auto;          /* push to the right of the card header */
    align-self: center;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-faint, var(--text-muted));
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    transition: color 0.12s, background 0.12s;
}
.doc-card-copy:hover {
    color: var(--accent, var(--text));
    background: var(--bg);
}
/* On copy: hide the clipboard glyph, flash a green check (no innerHTML swap) */
.doc-card-copy.copied { color: #2e7d32; }
.doc-card-copy.copied svg { display: none; }
.doc-card-copy.copied::after {
    content: "✓";
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

/* Citation badge — clickable link to see decisions citing this doc */
.doc-card-cited {
    font-size: 0.75rem;
    color: var(--accent);
    background: var(--accent-light);
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.doc-card-cited:hover {
    background: var(--accent);
    color: white;
    text-decoration: none;
}

/* Unavailable docs (not extracted) */
.doc-card.doc-unavailable {
    opacity: 0.65;
}

/* ==========================================================================
   Sort Controls — for country page document list
   ========================================================================== */

/* (The old .sort-controls / .sort-btn button row and .doc-filter-bar were
   replaced by the .ndp-toolbar box — see the NDP toolbar section.) */

/* ==========================================================================
   Coverage Info Bar — enhanced version with country link
   ========================================================================== */

/* NDP identity line — one quiet line naming the NDP in use.
   Replaces the old tinted hero card that pushed results below the fold. */
.ndp-line {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-light);
}

.ndp-line-title {
    font-weight: 600;
    color: var(--text);
}

.ndp-line-title:hover {
    color: var(--accent);
    text-decoration: none;
}

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

.ndp-line-browse {
    margin-left: auto;
    white-space: nowrap;
    font-size: 0.85rem;
}

/* ==========================================================================
   Countries Page Filter
   ========================================================================== */

.countries-filter {
    margin-bottom: 1.5rem;
    max-width: 400px;
}

.countries-filter .autocomplete-input {
    font-size: 0.95rem;
    padding: 0.55rem 0.9rem;
}

@media (max-width: 768px) {
    .countries-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    .search-section {
        max-width: 100%;
    }
}

/* ==========================================================================
   Responsive Adjustments for New Components
   ========================================================================== */

@media (max-width: 640px) {
    .doc-card-publisher,
    .doc-card-meta {
        margin-left: 0;
    }

    .doc-card-header {
        flex-wrap: wrap;
    }

    .doc-card-title {
        flex-basis: calc(100% - 3.25rem);
    }

    .sort-controls {
        flex-wrap: wrap;
    }

    .country-toolbar {
        flex-direction: column;
    }
}

/* --- Smooth scrolling for cross-reference links --- */
html {
    scroll-behavior: smooth;
}

/* --- Target highlight for cross-reference navigation --- */
.result-card:target,
.result-card.highlight-target {
    animation: target-highlight 2s ease;
}

@keyframes target-highlight {
    0% { box-shadow: 0 0 0 3px var(--accent); }
    100% { box-shadow: var(--shadow); }
}

/* ==========================================================================
   Document Filter — country page inline search
   ========================================================================== */

/* "Showing X of Y" while the toolbar's text filter is active — its own
   line below the control grid, so no control ever shifts when it appears
   (adversarial UX review 2026-07-10). */
.doc-filter-count {
    display: block;
    margin-top: 0.45rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: nowrap;
    text-align: right;
}
.doc-filter-count:empty { display: none; }

/* One class, one owner: every hide/show of cards and section headers goes
   through the visibility arbiter in search.js, which sets this class.
   (Replaced the per-feature inline styles that fought each other.) */
.doc-card.doc-hidden,
.doc-section-header.doc-hidden {
    display: none !important;
}

/* Honest empty state when active filters match nothing */
.doc-list-empty {
    margin: 0 0 1rem;
    padding: 1.25rem;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}

/* ==========================================================================
   Date Range Filters for Decisions
   ========================================================================== */

.decisions-date-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.decisions-date-group label {
    font-weight: 500;
}

.decisions-date-group input[type="date"] {
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
}

/* ==========================================================================
   Back to Search Link
   ========================================================================== */

.back-to-search {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--accent);
    margin-bottom: 0.75rem;
}

.back-to-search:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    /* Hide chrome */
    .site-header,
    .site-footer,
    .search-form,
    .search-filters,
    .results-tabs,
    .result-actions,
    .btn-toggle-text,
    .synthesis-loading,
    .decisions-filters,
    .sort-controls,
    .ndp-line,
    .results-meta-row,
    .autocomplete-wrapper,
    .country-toolbar,
    #tab-decisions,
    #tab-history {
        display: none !important;
    }

    /* Reset layout */
    body { min-height: auto; }
    main.container { padding: 0; }
    .container { max-width: 100%; padding: 0; }
    .search-section { max-width: 100%; }

    /* Clean card styling */
    .result-card {
        box-shadow: none;
        border: 1px solid #ccc;
        page-break-inside: avoid;
        margin-bottom: 0.5rem;
    }

    /* Show source URLs as visible text */
    .result-card::after {
        content: attr(data-source-url);
        display: block;
        font-size: 0.75rem;
        color: #666;
        margin-top: 0.5rem;
        word-break: break-all;
    }

    /* Show full text if expanded */
    .result-full-text:not([hidden]) {
        display: block;
    }

    /* Synthesis box: clean print look */
    .synthesis-box {
        border-left: 2px solid #999;
        background: none;
    }

    /* Print header */
    .results-count::before {
        content: "NDP Search Results — ";
        font-weight: 700;
    }
}


/* ── Profile Cards ────────────────────────────────────────────────── */

.profiles-loading {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.profiles-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
}

.profiles-empty a {
    color: var(--accent);
}

/* Ground section headers */
.profile-ground-section {
    margin-bottom: 1.5rem;
}

.profile-ground-heading {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.4rem;
    margin-bottom: 0.75rem;
}

/* Tile grid */
.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.75rem;
}

.profile-tile {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.profile-tile:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.profile-tile-name {
    font-weight: 600;
    margin-bottom: 0.4rem;
    text-transform: capitalize;
}

.profile-tile-meta {
    display: flex;
    gap: 0.75rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.profile-tile-stale {
    font-size: 0.75rem;
    color: #b45309;
    margin-top: 0.3rem;
}

/* Card detail view */
.profile-back-btn {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    padding: 0.3rem 0;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.profile-back-btn:hover {
    text-decoration: underline;
}

.profile-card-title {
    font-size: 1.4rem;
    margin-bottom: 0.3rem;
    text-transform: capitalize;
}

.profile-card-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

/* AI disclaimer under the profile card meta bar */
.profile-ai-note {
    font-size: 0.78rem;
    font-style: italic;
    color: var(--text-muted);
    margin: 0 0 1.5rem;
}

/* Framework pillars */
.profile-pillar {
    background: #fffbf0;
    border-left: 3px solid var(--accent);
    border-radius: 4px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.profile-pillar-heading {
    color: var(--accent);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.profile-pillar-body {
    font-size: 0.92rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

.profile-pillar-collapsed {
    max-height: 6.4em;  /* ~4 lines at 1.6 line-height */
    overflow: hidden;
    position: relative;
}

/* Fade-out at bottom of collapsed text */
.profile-pillar-collapsed::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2em;
    background: linear-gradient(transparent, #fffbf0);
    pointer-events: none;
}

.profile-pillar-toggle {
    background: none;
    border: none;
    color: var(--accent);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.3rem 0 0;
}

.profile-pillar-toggle:hover {
    text-decoration: underline;
}

.profile-pillar-empty {
    color: var(--text-muted);
    font-style: italic;
}

/* Citation links in synthesis text */
.profile-citation {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dotted var(--accent);
}

.profile-citation:hover {
    border-bottom-style: solid;
}

/* Citation tooltip — appears on hover over inline citations */
.profile-citation-tooltip {
    position: absolute;
    z-index: 100;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    padding: 0.6rem 0.8rem;
    max-width: 400px;
    font-size: 0.82rem;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.profile-citation-tooltip[hidden] {
    display: none;
}

.tooltip-item-num {
    font-weight: 700;
    color: var(--accent);
}

.tooltip-title {
    color: var(--text-primary);
}

.tooltip-org {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.tooltip-section {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-style: italic;
}

/* Source index */
.profile-source-index {
    border-top: 1px solid var(--border);
    margin-top: 1.5rem;
    padding-top: 1rem;
}

.profile-source-index-heading {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.profile-source-item {
    display: flex;
    gap: 0.5rem;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    align-items: baseline;
}

.profile-source-item:target {
    background: #fffde0;
    border-radius: 3px;
    padding-left: 0.3rem;
    margin-left: -0.3rem;
}

.profile-source-num {
    font-weight: 600;
    color: var(--accent);
    min-width: 2.5rem;
    flex-shrink: 0;
}

a.profile-source-title {
    flex: 1;
    color: var(--accent);
    text-decoration: none;
}

a.profile-source-title:hover {
    text-decoration: underline;
}

span.profile-source-title {
    flex: 1;
}

.profile-source-org {
    color: var(--text-muted);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .profile-grid {
        grid-template-columns: 1fr;
    }

    .profile-source-item {
        flex-wrap: wrap;
    }

    .profile-source-org {
        width: 100%;
        padding-left: 3rem;
    }
}

/* --- Admin: shared tab bar ----------------------------------------------- */
/* One persistent nav that ties the admin pages (Coverage / Recovery Queue /
   Dashboard) into a single tabbed panel. Reuses the .admin-* palette and the
   accent colour so it reads as native, not bolted on. Rendered by the
   _admin_nav.html partial included at the top of each admin page. */

.admin-nav {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    margin: 0 0 1.5rem;
    border-bottom: 2px solid var(--border);
}

.admin-nav-tab {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    /* Pull the tab down 2px so its own border overlaps the nav's bottom
       border; the active tab then "connects" to the page below it. */
    margin-bottom: -2px;
}

.admin-nav-tab:hover {
    color: var(--accent);
    background: var(--accent-light);
}

.admin-nav-tab-active {
    color: var(--accent);
    font-weight: 600;
    background: var(--bg-card);
    border-color: var(--border);
    /* White bottom edge hides the nav's border under the active tab, so it
       reads as a foreground tab joined to the content. */
    border-bottom: 2px solid var(--bg-card);
}

.admin-nav-tab-active:hover {
    background: var(--bg-card);
}

/* --- Admin: manual document queue ---------------------------------------- */
/* Internal page for manually uploading PDFs the auto-acquirer couldn't get.
   Aimed at the project owner, not end users; intentionally compact. */

.admin-manual-queue h1 {
    margin-bottom: 0.5rem;
}

.admin-queue-count {
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

.admin-queue-empty {
    color: var(--success);
}

.admin-flashes {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-flash {
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius);
    font-size: 0.9rem;
    border: 1px solid var(--border);
    background: var(--bg-card);
}

.admin-flash-success {
    border-color: var(--success);
    background: #eafaf0;
    color: #1f5d34;
}

.admin-flash-error {
    border-color: var(--danger);
    background: #fdecea;
    color: #842018;
}

.admin-country-group {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 2px solid var(--border-light);
}

.admin-country-group:first-of-type {
    border-top: none;
    padding-top: 0;
}

.admin-country-header {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 1.25rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.admin-country-count {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: normal;
}

.admin-section-header {
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 0.25rem;
}

.admin-queue-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin-bottom: 0.6rem;
    box-shadow: var(--shadow);
}

.admin-queue-card-header {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.25rem;
}

.admin-queue-item {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: var(--bg);
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    flex-shrink: 0;
}

.admin-queue-title {
    font-weight: 500;
    color: var(--text);
    line-height: 1.35;
}

.admin-queue-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.admin-queue-org {
    color: var(--text-secondary);
}

.admin-queue-status {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    padding: 0.05rem 0.4rem;
    border-radius: 3px;
    font-weight: 600;
}

.admin-queue-status-needs_manual {
    background: #fdecea;
    color: #842018;
}

.admin-queue-status-needs_ocr {
    background: #fff4d8;
    color: #7a5a00;
}

.admin-queue-error-type {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--danger);
}

.admin-queue-error {
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--bg);
    border-left: 3px solid var(--border);
    padding: 0.35rem 0.6rem;
    margin: 0.4rem 0 0.6rem 0;
    border-radius: 0 3px 3px 0;
}

.admin-queue-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.6rem;
}

.admin-queue-source-link {
    flex-shrink: 0;
}

.admin-queue-no-source {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

.admin-queue-upload-form {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.admin-queue-upload-form input[type="file"] {
    font-size: 0.85rem;
}


/* --- Pipeline dashboard ---------------------------------------------------- */

.admin-dashboard h1 {
    margin-bottom: 0.5rem;
}

.admin-dashboard-summary {
    color: var(--text-muted);
    margin: 0.5rem 0 1.25rem;
    font-size: 0.9rem;
}

.admin-dashboard-empty {
    background: var(--surface-2);
    border-left: 3px solid var(--accent);
    padding: 1rem 1.25rem;
    color: var(--text);
    border-radius: 4px;
}

.admin-dashboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.92rem;
}

.admin-dashboard-table th,
.admin-dashboard-table td {
    text-align: left;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.admin-dashboard-table th {
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    border-bottom: 2px solid var(--border);
}

.admin-dashboard-table th.num,
.admin-dashboard-table td.num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.admin-dashboard-table .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.admin-dashboard-row-error {
    background: rgba(220, 80, 80, 0.04);
}

.admin-dashboard-row-running {
    background: rgba(80, 160, 220, 0.05);
}

.admin-pill {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--surface-2);
    color: var(--text-muted);
    text-transform: lowercase;
    letter-spacing: 0.02em;
}

.admin-pill-pending  { background: #eee; color: #666; }
.admin-pill-ready    { background: #d8efe1; color: #1d6e3a; }
.admin-pill-running  { background: #d8e6f5; color: #1f4f80; }
.admin-pill-complete { background: #f1f1f1; color: #777; }
.admin-pill-error    { background: #f6d8d8; color: #8b1f1f; }

.admin-since {
    margin-left: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.admin-faded {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.admin-warn {
    color: #8b1f1f;
    font-size: 0.8rem;
    margin-left: 0.25rem;
}

.admin-queue-link {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
.admin-queue-link:hover { text-decoration: underline; }

.admin-inline-form {
    display: inline;
    margin: 0;
}

.admin-dashboard-legend {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.8;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.admin-sort-header {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    display: inline-block;
}
.admin-sort-header:hover { color: var(--text); }
.admin-sort-header-active { color: var(--text); }
.admin-sort-arrow {
    font-size: 0.65rem;
    margin-left: 0.15rem;
    color: var(--accent);
}

.admin-cell-sub {
    display: block;
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.3;
    font-weight: normal;
    margin-top: 0.1rem;
}

.admin-missing-count {
    font-weight: 600;
}


/* --- Per-doc drill-down + preview ----------------------------------------- */

.admin-breadcrumb {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
}
.admin-breadcrumb a {
    color: var(--accent);
    text-decoration: none;
}
.admin-breadcrumb a:hover { text-decoration: underline; }

.admin-package-detail h1,
.admin-doc-preview h1 {
    margin: 0 0 0.4rem;
    font-size: 1.25rem;
}

.admin-doc-meta {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0 0 1rem;
}

.admin-doc-status-strip {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    margin: 0.75rem 0;
    padding: 0.6rem 0.75rem;
    background: var(--surface-2);
    border-radius: 4px;
    font-size: 0.85rem;
}

.admin-doc-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin: 0.5rem 0 1rem;
    flex-wrap: wrap;
}

.admin-doc-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 0.5rem;
}
.admin-doc-pane {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.6rem 0.8rem;
    min-height: 70vh;
    display: flex;
    flex-direction: column;
}
.admin-doc-pane h3 {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}
.admin-doc-embed {
    width: 100%;
    flex: 1;
    border: none;
    background: #fafafa;
}
.admin-doc-parsed {
    flex: 1;
    margin: 0;
    overflow: auto;
    background: var(--surface-2);
    padding: 0.75rem;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    font-size: 0.78rem;
    line-height: 1.45;
    white-space: pre-wrap;
}

/* Acquisition + text-status pill colors (compact, distinct) */
.admin-pill-acq-acquired         { background: #d8efe1; color: #1d6e3a; }
.admin-pill-acq-skipped          { background: #eee;    color: #666; }
.admin-pill-acq-pending          { background: #f1f1f1; color: #777; }
.admin-pill-acq-needs_manual,
.admin-pill-acq-needs_ocr        { background: #fff0d8; color: #8a5a14; }
.admin-pill-acq-failed_retryable { background: #f6e3d8; color: #8a4a14; }
.admin-pill-acq-failed_permanent { background: #f6d8d8; color: #8b1f1f; }

.admin-pill-text-extracted       { background: #d8efe1; color: #1d6e3a; }
.admin-pill-text-pending         { background: #f1f1f1; color: #777; }
.admin-pill-text-failed          { background: #f6d8d8; color: #8b1f1f; }
.admin-pill-text-empty           { background: #fff0d8; color: #8a5a14; }
.admin-pill-text-low_confidence  { background: #fff0d8; color: #8a5a14; }

.admin-filter-active { color: var(--text); text-decoration: underline; }
.admin-filter-group  { font-size: 0.85rem; color: var(--text-muted); }

.admin-dashboard-toolbar {
    display: flex;
    gap: 0.75rem;
    margin: 0.5rem 0 1rem;
    align-items: center;
    flex-wrap: wrap;
}



/* NDP version chips — which NDP version a decision cited.
   Green = the current version; yellow/amber = a prior version.
   Used on decision cards in the Decisions tab. */
.ndp-version-chip {
    font-size: 0.7rem;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    font-weight: 600;
    white-space: nowrap;
}

.ndp-version-chip--current {
    background-color: #e6f4ea;
    color: #2d8a4e;
}

.ndp-version-chip--prior {
    background-color: #fdf3d7;
    color: #8a6d1a;
}


/* Litigation-themes bottom line — the 2-4 sentence overview rendered
   above the per-issue sections. */
.themes-bottom-line {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    border-left: 3px solid var(--accent);
    padding: 0.55rem 0.8rem;
    margin: 0 0 0.9rem;
}

/* Flash highlight when a synthesis citation or "back to item" link jumps
   the reader to a card. */
.cite-flash {
    animation: cite-flash 1.6s ease-out;
}

@keyframes cite-flash {
    0% { background-color: #fdf3d7; }
    100% { background-color: transparent; }
}

/* ==========================================================================
   Version-resolved citation counts (owner decisions 2026-07-10)
   Headline badge (.result-cited / .doc-card-cited): decisions citing THIS
   document. The --prior variant combines earlier-version + version-unknown
   citations into one muted-but-clickable "Prior versions of this item"
   button. Both open the Decisions tab filtered to the item.
   ========================================================================== */
.result-cited--prior,
.doc-card-cited--prior {
    color: var(--text-muted) !important;
    background: transparent !important;
    border: 1px solid var(--border);
}

.result-cited--prior:hover,
.doc-card-cited--prior:hover {
    color: #fff !important;
    background: var(--text-muted) !important;
    border-color: var(--text-muted);
}

/* Meta rows carry NO separators (owner decision 2026-07-10): hand-placed
   "|" spans produced stray double pipes next to conditional elements, and
   CSS-generated ones rendered inside the badge pills (a child's ::before
   sits inside its background box). The flex gap + pill borders suffice. */

/* Change markers: small coloured dots next to the item number
   (new / updated / renumbered), explained + filterable via the legend. */
.doc-flag {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    cursor: help;
}

.doc-flag--added      { background: var(--success); }
.doc-flag--updated    { background: var(--warning); }
.doc-flag--renumbered { background: var(--text-muted); }

/* Legend chips (inside the toolbar's bottom row): explain the dots and
   filter by them — no caption, the chips speak for themselves. Same text
   size as every other toolbar control. */
.legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.legend-chip:hover {
    border-color: var(--accent);
}

.legend-chip.active {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent-dark);
}

/* (Legend-filter hiding now goes through the shared .doc-hidden class set
   by the visibility arbiter — see the toolbar section.) */

/* Comfortable touch targets for the chips on small screens */
@media (max-width: 600px) {
    .legend-chip { padding: 0.45rem 0.85rem; }
}