/**
 * NEPA MCP Toolkit - documentation site styles
 *
 * The palette is taken from the project lockup
 * (assets/permitai-nepa-mcp-toolkit-tm.svg): #009175 mark, #2F3845 wordmark,
 * #F9B800 leaf.
 */

:root {
    --brand-primary: #009175;
    --brand-primary-dark: #00745e;
    --brand-primary-darker: #005f4d;
    --brand-primary-darkest: #004538;
    --brand-ink: #2f3845;
    --brand-accent: #f9b800;

    --brand-primary-rgb: 0, 145, 117;
    --brand-ink-rgb: 47, 56, 69;
}

/* Base typography */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.serif {
    font-family: 'Crimson Pro', Georgia, serif;
}

/* Tailwind's slate-900 reads bluer than the lockup ink; align headings to it. */
.text-ink {
    color: var(--brand-ink);
}

/* Optically center the PermitAI wordmark.
   Measured from the rendered artwork (670x181 viewBox): the wordmark body spans
   x -0.3 to 576.5, so its centre sits at x=288.1 while the file's centre is 335.
   The trademark past x=576.5 is a pure superscript tail, so centering the file
   sits the wordmark 46.9 units left of true centre. Shifting right by that much
   restores optical balance while keeping the mark in normal flow.
   Verified centered on the h1 at 1440 / 1024 / 390. */
.brand-mark {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* translateX resolves against the element's own width, so 46.9/670 = 7%
       holds at any rendered size. This depends on where the wordmark sits inside
       the viewBox, not on the trademark's size. Static positioning, not motion,
       so it must survive the reduced-motion rules below. */
    transform: translateX(7%);
}

/* ============================================
   Animations
   ============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in-up {
    animation: fadeInUp 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

.delay-100 { animation-delay: 0.1s; opacity: 0; }
.delay-200 { animation-delay: 0.2s; opacity: 0; }
.delay-300 { animation-delay: 0.3s; opacity: 0; }
.delay-400 { animation-delay: 0.4s; opacity: 0; }

.animate-on-scroll {
    opacity: 0;
    transform: translateY(10px);
}

.scroll-reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal:nth-child(1) { transition-delay: 0.05s; }
.scroll-reveal:nth-child(2) { transition-delay: 0.1s; }
.scroll-reveal:nth-child(3) { transition-delay: 0.15s; }
.scroll-reveal:nth-child(4) { transition-delay: 0.2s; }

/* ============================================
   Surfaces
   ============================================ */

.hero-gradient {
    background: linear-gradient(135deg, #fafaf9 0%, #f5f5f4 50%, #e7e5e4 100%);
}

.premium-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 20px 60px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(var(--brand-primary-rgb), 0.15);
    border-color: rgba(var(--brand-primary-rgb), 0.3);
}

.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #cbd5e1, transparent);
}

/* ============================================
   Server flip cards
   ============================================ */

.flip-card {
    perspective: 1000px;
    cursor: pointer;
    min-height: 306px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    min-height: 306px;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    min-height: 306px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.flip-card-back {
    transform: rotateY(180deg);
}

.flip-card .premium-card {
    height: 100%;
    min-height: 306px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.flip-card:not(.flipped):hover .premium-card {
    transform: translateY(-8px);
    border-color: rgba(var(--brand-primary-rgb), 0.3);
    box-shadow:
        0 20px 60px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(var(--brand-primary-rgb), 0.15);
}

.flip-card.flipped .premium-card {
    transform: none;
}

.flip-card-back .premium-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.flip-card:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 4px;
    border-radius: 1rem;
}

.coverage-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
}

.coverage-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 11px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

.coverage-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.coverage-icon {
    flex-shrink: 0;
    width: 16px;
    margin-right: 9px;
    margin-top: 3px;
    opacity: 0.75;
}

.coverage-text {
    flex: 1;
    font-size: 0.78125rem;
    line-height: 1.4;
    color: #475569;
}

.coverage-code {
    display: block;
    font-weight: 600;
    color: var(--brand-ink);
    margin-bottom: 1px;
}

.flip-hint {
    text-align: center;
    font-size: 0.6875rem;
    color: rgba(100, 116, 139, 0.7);
    margin-top: 8px;
}

.flip-hint-front {
    position: absolute;
    bottom: 1.125rem;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    font-size: 0.6875rem;
    color: rgba(100, 116, 139, 0.55);
}

/* ============================================
   Show-more controls
   ============================================ */

.show-more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--brand-primary-dark);
    background: #fff;
    border: 1px solid rgba(var(--brand-primary-rgb), 0.35);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.show-more:hover {
    background: rgba(var(--brand-primary-rgb), 0.06);
    border-color: rgba(var(--brand-primary-rgb), 0.6);
    transform: translateY(-1px);
}

.show-more i {
    transition: transform 0.25s ease;
}

.show-more[aria-expanded='true'] i {
    transform: rotate(180deg);
}

/* Fade the truncated edge so it reads as "more below". */
.collapsed-fade {
    position: relative;
}

.collapsed-fade::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.97));
}

/* On the tinted layer section, fade to that background instead of white. */
#layers .collapsed-fade::after {
    background: linear-gradient(to bottom, rgba(248, 250, 252, 0), rgba(248, 250, 252, 0.97));
}

/* Clear the sticky header when jumping to an anchor. Narrow viewports add a
   second nav row, so they need more room. */
section {
    scroll-margin-top: 132px;
}

@media (min-width: 768px) {
    section {
        scroll-margin-top: 92px;
    }
}

/* ============================================
   Quick Start rail
   ============================================ */

/* One container with numbered steps on a connected rail, rather than four
   free-floating cards. The rail carries the sequence, so each step repeats no
   card chrome and steps are free to differ in weight. */
.step-row {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    column-gap: 1.25rem;
}

.step-marker {
    position: relative;
    display: flex;
    justify-content: center;
}

.step-number {
    position: relative;
    z-index: 1;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #fff;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--brand-primary-darkest) 0%, var(--brand-primary) 100%);
}

/* The connector runs from just below one number to the next. The last row has
   no connector, so the rail terminates on the final step. */
.step-row:not(:last-child) .step-marker::after {
    content: '';
    position: absolute;
    top: 2.25rem;
    bottom: -0.25rem;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(to bottom, rgba(var(--brand-primary-rgb), 0.35), rgba(var(--brand-primary-rgb), 0.12));
}

.step-body {
    min-width: 0;
    padding-bottom: 2.5rem;
}

.step-row:last-child .step-body {
    padding-bottom: 0;
}

@media (max-width: 640px) {
    .step-row {
        grid-template-columns: 1.75rem 1fr;
        column-gap: 0.875rem;
    }

    .step-number {
        width: 1.75rem;
        height: 1.75rem;
        font-size: 0.8125rem;
    }

    .step-row:not(:last-child) .step-marker::after,
    .steps-in-motion .step-row:not(:last-child) .step-marker::before {
        top: 1.75rem;
    }
}

/* Motion on the rail. Gated on .steps-in-motion, which site.js adds only when
   the visitor has not asked for reduced motion, so a reduced-motion or
   script-less visit gets the finished rail with nothing hidden. */
.steps-in-motion .step-body {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.55s ease-out, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.steps-in-motion .step-row.step-lit .step-body {
    opacity: 1;
    transform: none;
}

.steps-in-motion .step-number {
    opacity: 0;
    transform: scale(0.88);
    transition: opacity 0.3s ease-out, transform 0.45s cubic-bezier(0.34, 1.32, 0.64, 1);
}

.steps-in-motion .step-row.step-lit .step-number {
    opacity: 1;
    transform: none;
    /* One soft ring as the number lands, then nothing. */
    animation: stepRing 0.9s ease-out 0.12s 1;
}

@keyframes stepRing {
    from { box-shadow: 0 0 0 0 rgba(var(--brand-primary-rgb), 0.32); }
    to { box-shadow: 0 0 0 14px rgba(var(--brand-primary-rgb), 0); }
}

/* The steps are a real sequence, so the connector draws itself one segment at a
   time: ::after dims to a track, and ::before is the segment that fills in. */
.steps-in-motion .step-row:not(:last-child) .step-marker::after {
    background: rgba(var(--brand-ink-rgb), 0.1);
}

.steps-in-motion .step-row:not(:last-child) .step-marker::before {
    content: '';
    position: absolute;
    top: 2.25rem;
    bottom: -0.25rem;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: linear-gradient(to bottom, rgba(var(--brand-primary-rgb), 0.55), rgba(var(--brand-primary-rgb), 0.14));
    transform: scaleY(0);
    transform-origin: top center;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) 0.12s;
}

.steps-in-motion .step-row.step-lit .step-marker::before {
    transform: scaleY(1);
}

/* Recorded output arrives a line at a time, the way the command prints it. */
.steps-in-motion .transcript.is-streaming .t-line {
    opacity: 0;
    animation: streamLine 0.26s ease-out forwards;
}

.steps-in-motion .transcript.is-streaming .t-line:nth-child(1) { animation-delay: 0.05s; }
.steps-in-motion .transcript.is-streaming .t-line:nth-child(2) { animation-delay: 0.19s; }
.steps-in-motion .transcript.is-streaming .t-line:nth-child(3) { animation-delay: 0.29s; }
.steps-in-motion .transcript.is-streaming .t-line:nth-child(4) { animation-delay: 0.39s; }
.steps-in-motion .transcript.is-streaming .t-line:nth-child(5) { animation-delay: 0.53s; }
.steps-in-motion .transcript.is-streaming .t-line:nth-child(6) { animation-delay: 0.63s; }
.steps-in-motion .transcript.is-streaming .t-line:nth-child(7) { animation-delay: 0.73s; }

@keyframes streamLine {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* A caret only while the output is still arriving; site.js drops the class when
   the last line lands, which takes the caret with it. */
.steps-in-motion .transcript.is-streaming .t-prompt::after {
    content: '▌';
    margin-left: 0.15rem;
    animation: caretBlink 0.5s steps(1, end) 3;
}

@keyframes caretBlink {
    50% { opacity: 0; }
}

/* The example prompts are the one place a visitor is meant to reach for
   something, so they lift on hover. */
.prompt-card {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
}

.prompt-card:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--brand-primary-rgb), 0.45);
    box-shadow: 0 12px 26px -20px rgba(var(--brand-ink-rgb), 0.5);
}

/* ============================================
   Buttons, badges, code
   ============================================ */

.btn-premium {
    background: linear-gradient(135deg, var(--brand-primary-darkest) 0%, var(--brand-primary) 100%);
    box-shadow: 0 4px 20px rgba(var(--brand-primary-rgb), 0.4);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-premium:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(var(--brand-primary-rgb), 0.5);
}

.badge-premium {
    background: linear-gradient(135deg, var(--brand-primary-darkest) 0%, var(--brand-primary) 100%);
    box-shadow: 0 4px 20px rgba(var(--brand-primary-rgb), 0.3);
}

.code-block {
    position: relative;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

/* A recorded terminal session, not something to copy. Dimmer than a command
   block so the two never read as interchangeable, and the prompt and the
   proof line carry the only emphasis. */
.transcript {
    background: #0f172a;
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.transcript pre {
    color: #94a3b8;
}

.transcript .t-prompt {
    color: #5eead4;
}

.transcript .t-proof {
    color: #f1f5f9;
    font-weight: 600;
}

/* ============================================
   Plugin panel
   ============================================ */

/* The plugin is an alternative to step 3, not a fifth step. A dark surface
   separates it from the white step cards without inventing a new treatment —
   it reuses the code-block gradient already used across the page. */
.plugin-panel {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid rgba(148, 163, 184, 0.18);
}

/* Recessed rather than a slab floating on the panel. */
.plugin-panel .plugin-code {
    position: relative;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(148, 163, 184, 0.14);
}

.copy-button {
    position: absolute;
    top: 1rem;
    right: 1rem;
    /* Visible at rest, not hidden until hover: copying a command is the main
       thing to do in Quick Start, and a control nobody can see is a control
       nobody uses. Held back far enough to stay quieter than the code. */
    opacity: 0.55;
    transition: all 0.3s ease;
}

.code-block:hover .copy-button,
.copy-button:hover,
.copy-button:focus-visible {
    opacity: 1;
}

/* Touch devices never hover, so keep copy affordances permanently visible. */
@media (hover: none) {
    .copy-button {
        opacity: 1;
    }
}

/* ============================================
   Accessibility
   ============================================ */

.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--brand-primary-darkest);
    color: #fff;
    padding: 8px 16px;
    z-index: 100;
    transition: top 0.3s;
}

.skip-to-content:focus {
    top: 0;
}

:where(a, button, [tabindex]:not([tabindex='-1'])):focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ============================================
   MCP client row
   ============================================ */

/* Preserve the original vertical logo-and-label composition while using
   neutral interface symbols instead of product artwork. */
.mcp-client-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mcp-client-item:hover {
    transform: translateY(-4px);
}

.mcp-client-logo {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 1.35rem;
    opacity: 0.5;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mcp-client-item:hover .mcp-client-logo,
.mcp-client-item:focus-visible .mcp-client-logo {
    opacity: 1;
}

/* Echo the original artwork's color return on hover without reproducing any
   vendor mark. Codex uses a laptop-code icon; Desktop retains the plugin cue. */
.client-claude:hover .mcp-client-logo,
.client-claude:focus-visible .mcp-client-logo {
    color: #d97757;
}

.client-vscode:hover .mcp-client-logo,
.client-vscode:focus-visible .mcp-client-logo {
    color: #007acc;
}

.client-codex:hover .mcp-client-logo,
.client-codex:focus-visible .mcp-client-logo {
    color: #111827;
}

.client-codex-desktop:hover .mcp-client-logo,
.client-codex-desktop:focus-visible .mcp-client-logo {
    color: var(--brand-primary-dark);
}

.mcp-client-name {
    font-size: 0.7rem;
    font-weight: 500;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: color 0.3s ease;
}

.mcp-client-item:hover .mcp-client-name,
.mcp-client-item:focus-visible .mcp-client-name {
    color: #334155;
}

/* ============================================
   Hero stat badge - sequential reveal
   ============================================ */

#unified-badge .badge-stat,
#unified-badge .badge-arrow {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

#unified-badge .badge-stat.revealed,
#unified-badge .badge-arrow.revealed {
    opacity: 1;
    transform: scale(1);
}

#unified-badge .badge-finale.revealed {
    animation: finaleGlow 0.6s ease-out;
}

@keyframes finaleGlow {
    0% { text-shadow: 0 0 0 transparent; }
    50% { text-shadow: 0 0 12px rgba(255, 255, 255, 0.8); }
    100% { text-shadow: 0 0 0 transparent; }
}

/* ============================================
   Finding -> obligation ticker
   ============================================ */

#jurisdiction-flow {
    cursor: pointer;
}

#jurisdiction-flow .flow-feature,
#jurisdiction-flow .flow-result {
    display: inline-block;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#jurisdiction-flow .flow-arrow {
    transition: opacity 0.2s ease;
}

/* ============================================
   Explorers - shared controls
   ============================================ */

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.filter-chip:hover {
    border-color: rgba(var(--brand-primary-rgb), 0.45);
    color: var(--brand-primary-dark);
}

.filter-chip[aria-pressed='true'],
.filter-chip[aria-selected='true'] {
    color: #fff;
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
}

.filter-chip .chip-count {
    font-variant-numeric: tabular-nums;
    opacity: 0.65;
    font-size: 0.75rem;
}

.explorer-search {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.75rem;
    font-size: 0.9375rem;
    color: var(--brand-ink);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    transition: all 0.2s ease;
}

.explorer-search::placeholder {
    color: #94a3b8;
}

.explorer-search:focus {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-primary-rgb), 0.12);
}

.explorer-count {
    font-variant-numeric: tabular-nums;
}

.explorer-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: #64748b;
}

/* ============================================
   Tool explorer
   ============================================ */

.tool-group {
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 1rem;
    background: #fff;
    overflow: hidden;
}

.tool-group + .tool-group {
    margin-top: 0.75rem;
}

.tool-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    background: linear-gradient(90deg, rgba(248, 250, 252, 0.9), rgba(255, 255, 255, 0.6));
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.tool-group-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-primary-darker);
}

.tool-row {
    width: 100%;
    display: block;
    padding: 0.875rem 1.25rem;
    text-align: left;
    background: none;
    border: 0;
    border-top: 1px solid rgba(241, 245, 249, 0.9);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.tool-group .tool-row:first-of-type {
    border-top: 0;
}

.tool-row:hover {
    background-color: rgba(var(--brand-primary-rgb), 0.05);
}

.tool-row-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    color: var(--brand-primary-dark);
    word-break: break-word;
}

.tool-row-purpose {
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.5;
    margin-top: 0.125rem;
}

.tool-row-chevron {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    color: #94a3b8;
}

.tool-row[aria-expanded='true'] .tool-row-chevron {
    transform: rotate(90deg);
    color: var(--brand-primary);
}

.tool-params {
    display: none;
    padding: 0 1.25rem 1.125rem 1.25rem;
    background: rgba(248, 250, 252, 0.6);
    border-top: 1px dashed rgba(203, 213, 225, 0.7);
}

.tool-params.expanded {
    display: block;
}

.param-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.param-row + .param-row {
    border-top: 1px solid rgba(226, 232, 240, 0.7);
}

.param-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--brand-ink);
}

.param-type {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    color: #475569;
    background: rgba(226, 232, 240, 0.8);
}

.param-flag {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
}

.param-flag-required {
    color: #9f1239;
    background: rgba(255, 228, 230, 0.9);
}

.param-flag-default {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: none;
    letter-spacing: 0;
    color: var(--brand-primary-darker);
    background: rgba(var(--brand-primary-rgb), 0.1);
}

.param-description {
    flex: 1 1 100%;
    font-size: 0.78125rem;
    color: #64748b;
    line-height: 1.5;
}

/* ============================================
   Layer explorer
   ============================================ */

.profile-button {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    padding: 0.625rem 1rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.profile-button:hover {
    border-color: rgba(var(--brand-primary-rgb), 0.45);
    transform: translateY(-2px);
}

.profile-button[aria-pressed='true'] {
    background: linear-gradient(135deg, var(--brand-primary-darkest) 0%, var(--brand-primary) 100%);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(var(--brand-primary-rgb), 0.3);
}

.profile-button-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--brand-ink);
}

.profile-button-count {
    font-size: 0.6875rem;
    color: #64748b;
    font-variant-numeric: tabular-nums;
}

.profile-button[aria-pressed='true'] .profile-button-name,
.profile-button[aria-pressed='true'] .profile-button-count {
    color: #fff;
}

.profile-button[aria-pressed='true'] .profile-button-count {
    opacity: 0.8;
}

.layer-category-name {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
}

.layer-card {
    padding: 0.875rem 1rem;
    background: #fff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-left: 3px solid rgba(var(--brand-primary-rgb), 0.55);
    border-radius: 0.625rem;
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.3s ease, border-color 0.3s ease;
}

.layer-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

/* Layers outside the active profile stay readable but visibly recede. */
.layer-card.dimmed {
    opacity: 0.35;
    border-left-color: #cbd5e1;
}

.layer-card.dimmed:hover {
    opacity: 0.7;
}

.layer-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--brand-ink);
    line-height: 1.35;
}

.layer-card-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6875rem;
    color: var(--brand-primary-dark);
}

.layer-card-meta {
    font-size: 0.75rem;
    color: #64748b;
    line-height: 1.45;
}

.layer-source-link {
    color: var(--brand-primary-dark);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-color: rgba(var(--brand-primary-rgb), 0.3);
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.layer-source-link:hover {
    color: var(--brand-primary-darker);
    text-decoration-color: currentColor;
}

.layer-source-link:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.layer-geometry {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 500;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    color: #475569;
    background: rgba(226, 232, 240, 0.8);
    white-space: nowrap;
}

/* ============================================
   Sponsor logos
   ============================================ */

/* The two marks differ sharply in aspect ratio (PNNL 2.1:1, DOE 4.1:1), so cap
   each by width and tune height per mark to equalize optical weight. Heights are
   set so the rendered areas land within a few percent of each other; matching
   heights instead would make the wide DOE lockup dominate. */
.sponsor-logo {
    width: auto;
    max-width: 320px;
    object-fit: contain;
}

.sponsor-logo-pnnl {
    max-height: 5.5rem;
}

.sponsor-logo-doe {
    max-height: 4rem;
}

/* ============================================
   Credential pills
   ============================================ */

.credential-pill {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    white-space: nowrap;
}

.credential-pill-none {
    color: var(--brand-primary-darker);
    background: rgba(var(--brand-primary-rgb), 0.1);
}

.credential-pill-optional {
    color: #92400e;
    background: rgba(254, 243, 199, 0.9);
}

/* ============================================
   Demo frame
   ============================================ */

.demo-frame {
    width: 100%;
    height: 700px;
    border: 0;
    display: block;
}

@media (max-width: 768px) {
    .demo-frame {
        height: 460px;
    }
}

/* ============================================
   Vision menu

   The two vision sheets sit under one label. "Coverage" and "GIS" do not read as
   a pair on their own, and neither says that both are the open-source vision
   rather than shipped documentation.
   ============================================ */

.nav-menu {
    position: relative;
}

.nav-pop {
    position: absolute;
    right: 0;
    top: calc(100% + 0.55rem);
    min-width: 15.5rem;
    padding: 0.4rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 60;
}

/* focus-within carries the keyboard path, so the menu needs no script. */
.nav-menu:hover .nav-pop,
.nav-menu:focus-within .nav-pop {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.nav-pop a {
    display: block;
    padding: 0.5rem 0.7rem;
    border-radius: 0.5rem;
    transition: background 0.15s ease;
}

.nav-pop a:hover,
.nav-pop a:focus-visible {
    background: #f1f5f9;
}

/* ============================================
   Vision disclosure

   One card on the index that opens to the two vision sheets. Their own titles do
   not explain themselves to someone who has not met them yet, so "Vision" is the
   thing on the page and the sheets sit inside it.
   ============================================ */

.vision-disclose {
    border: 1px solid rgba(153, 246, 228, 0.9);
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.7);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.vision-disclose:hover,
.vision-disclose[open] {
    border-color: rgba(var(--brand-primary-rgb), 0.4);
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.vision-disclose > summary {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    /* Both are needed to drop the native triangle across browsers. */
    list-style: none;
}

.vision-disclose > summary::-webkit-details-marker {
    display: none;
}

.vision-disclose > summary:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
    border-radius: 0.7rem;
}

.vision-chev {
    margin-left: auto;
    margin-top: 0.3rem;
    font-size: 0.6875rem;
    color: var(--brand-primary);
    transition: transform 0.25s ease;
}

.vision-disclose[open] .vision-chev {
    transform: rotate(180deg);
}

.vision-sheet {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0 0.5rem 0.5rem;
    padding: 0.6rem 0.7rem;
    border-radius: 0.55rem;
    transition: background 0.15s ease;
}

.vision-sheet:hover {
    background: rgba(var(--brand-primary-rgb), 0.06);
}

/* ============================================
   Reduced motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Anything that animates in must not be left invisible or displaced. */
    .fade-in-up,
    .fade-in,
    .animate-on-scroll,
    .scroll-reveal,
    .delay-100,
    .delay-200,
    .delay-300,
    .delay-400,
    #unified-badge .badge-stat,
    #unified-badge .badge-arrow {
        opacity: 1 !important;
        transform: none !important;
    }

    /* site.js skips the rail sequence under reduced motion, but the setting can
       change after load, so never leave a step hidden. */
    .steps-in-motion .step-body,
    .steps-in-motion .step-number,
    .steps-in-motion .transcript.is-streaming .t-line {
        opacity: 1 !important;
        transform: none !important;
    }

    .steps-in-motion .step-row:not(:last-child) .step-marker::before {
        transform: scaleY(1) !important;
    }

    .steps-in-motion .transcript.is-streaming .t-prompt::after {
        content: none !important;
    }

    .premium-card:hover,
    .profile-button:hover,
    .layer-card:hover,
    .btn-premium:hover,
    .mcp-client-item:hover,
    .prompt-card:hover,
    .show-more:hover {
        transform: none !important;
    }

    /* Flipping is the card's only affordance, so keep it — just make it instant. */
    .flip-card-inner {
        transition: none !important;
    }

    /* This transform is static optical alignment, not motion. Keep it. */
    .brand-mark {
        transform: translateX(7.4%) !important;
    }
}

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

@media print {
    .skip-to-content,
    #site-banner,
    #site-nav,
    .copy-button,
    .demo-frame {
        display: none !important;
    }

    .premium-card,
    .layer-card,
    .tool-group {
        box-shadow: none !important;
        border: 1px solid #cbd5e1 !important;
    }

    .layer-card.dimmed,
    .animate-on-scroll,
    .scroll-reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .tool-params {
        display: block !important;
    }

    /* Print everything, not just the initially visible subset. */
    .show-more {
        display: none !important;
    }

    .collapsed-fade::after {
        display: none !important;
    }

    .collapsible-hidden {
        display: block !important;
    }
}