/* ─────────────────────────────────────────────────────────────────────────────
   Chesswick — Design System
   Library / aristocratic aesthetic: warm cream, deep teal accents, serif headlines
   Mobile-first, full dvh layout
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Custom properties ───────────────────────────────────────────────────── */
:root {
    /* Palette */
    --color-bg:          #FAF7F2;       /* Warm cream */
    --color-bg-alt:      #F2EDE4;       /* Slightly darker cream (user messages) */
    --color-surface:     #FFFFFF;       /* Message cards, input */
    --color-border:      #E2D9CC;       /* Subtle warm border */
    --color-teal:        #1B6B77;       /* Primary accent — deep teal */
    --color-teal-dark:   #145560;       /* Hover / active teal */
    --color-teal-light:  #EAF4F5;       /* Light teal background */
    --color-text:        #2C2416;       /* Dark warm brown — body text */
    --color-text-muted:  #7A6E5F;       /* Muted text, hints */
    --color-user-bg:     #1B6B77;       /* User message bubble */
    --color-user-text:   #FFFFFF;
    --color-error:       #8B2020;

    /* Typography */
    --font-serif:   'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    /* Spacing */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;

    /* Layout */
    --header-height:    56px;
    --input-area-height: auto;
    --max-message-width: 680px;
    --border-radius:    8px;
    --border-radius-lg: 16px;
    --border-radius-msg: 18px;

    /* Transitions */
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;
}

/* ── Reset & Base ────────────────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

body {
    height: 100%;
    min-height: 100dvh;
    background-color: var(--color-bg);
    background-image:
        radial-gradient(ellipse 120% 80% at 50% -20%, rgba(27, 107, 119, 0.09), transparent 55%),
        radial-gradient(ellipse 70% 50% at 100% 100%, rgba(199, 149, 39, 0.06), transparent 50%);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

[data-theme="dark"] body {
    background-color: var(--color-bg);
    color: var(--color-text);
    background-image:
        radial-gradient(ellipse 120% 80% at 50% -25%, rgba(94, 200, 212, 0.12), transparent 55%),
        radial-gradient(ellipse 70% 50% at 100% 100%, rgba(180, 140, 255, 0.06), transparent 50%);
}

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

/* ── App Shell ───────────────────────────────────────────────────────────── */
.app-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;          /* dvh — iOS Safari safe */
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    background: var(--color-bg);
    background-clip: padding-box;
    box-shadow:
        0 0 0 1px rgba(44, 36, 22, 0.04),
        -24px 0 48px rgba(44, 36, 22, 0.03),
        24px 0 48px rgba(44, 36, 22, 0.03);
}

[data-theme="dark"] .app-shell {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        -24px 0 48px rgba(0, 0, 0, 0.2),
        24px 0 48px rgba(0, 0, 0, 0.2);
}

/* Deploy / build stamp (troubleshooting) — compact icon with popup */
.app-build-stamp {
    flex-shrink: 0;
    position: relative;
    display: inline-flex;
    font-family: var(--font-sans);
}

.app-build-stamp__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    list-style: none;
    cursor: pointer;
    color: var(--color-text-muted);
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.app-build-stamp__toggle::-webkit-details-marker {
    display: none;
}

.app-build-stamp__toggle:hover,
.app-build-stamp[open] > .app-build-stamp__toggle {
    opacity: 0.95;
}

.app-build-stamp__toggle:focus-visible {
    outline: 2px solid var(--color-accent, currentColor);
    outline-offset: 2px;
    border-radius: 50%;
}

.app-build-stamp__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-family: var(--font-serif, Georgia, serif);
    font-size: 0.5rem;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
}

.app-build-stamp__panel {
    position: absolute;
    z-index: 50;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 190px;
    max-width: min(260px, calc(100vw - 2rem));
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    box-shadow: 0 8px 24px rgba(44, 36, 22, 0.18);
    font-size: 0.7rem;
    line-height: 1.5;
    text-align: left;
    white-space: nowrap;
}

.app-build-stamp__row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
}

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

.app-build-stamp__val {
    font-family: var(--font-mono);
}

.app-build-stamp--footer-inline {
    align-self: center;
}

.site-footer-row {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 0.65rem;
    row-gap: 0.12rem;
    padding: 0.2rem var(--space-md) max(0.35rem, env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}

.app-site-footer {
    flex-shrink: 0;
}

.site-footer-row .app-footer-links {
    padding: 0;
}

.app-build-stamp--admin {
    margin-inline-start: auto;
    align-self: center;
}

/* Admin header sits at the top of the page — open the popup downward. */
.app-build-stamp--admin .app-build-stamp__panel {
    bottom: auto;
    top: calc(100% + 6px);
    left: auto;
    right: 0;
    transform: none;
}

.app-build-stamp--document {
    margin: 0.5rem var(--space-md);
}

/* Profile URL (/u/{name}, /u/{name}/games, /u/{name}/coaching): tabbed shell — chat, game history, coaching */
.profile-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.profile-shell-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    flex-shrink: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    padding: 0 var(--space-xs);
}

.profile-shell-tab {
    min-height: 44px;
    padding: var(--space-xs) var(--space-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

a.profile-shell-tab {
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
}

.profile-shell-tab:hover:not(:disabled),
a.profile-shell-tab:hover {
    color: var(--color-teal);
    background: var(--color-teal-light);
}

.profile-shell-tab--active {
    color: var(--color-teal);
    border-bottom-color: var(--color-teal);
    background: transparent;
}

.profile-shell-panels {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Enforce a single visible panel (complements [hidden]; avoids flex layouts showing multiple panels). */
.profile-shell-panels[data-profile-active="chat"] > .profile-shell-panel--games,
.profile-shell-panels[data-profile-active="chat"] > .profile-shell-panel--coaching {
    display: none !important;
}

.profile-shell-panels[data-profile-active="games"] > .profile-shell-panel--chat,
.profile-shell-panels[data-profile-active="games"] > .profile-shell-panel--coaching {
    display: none !important;
}

.profile-shell-panels[data-profile-active="coaching"] > .profile-shell-panel--chat,
.profile-shell-panels[data-profile-active="coaching"] > .profile-shell-panel--games {
    display: none !important;
}

.profile-shell-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Author `display:flex` must not defeat the UA [hidden] rule on some engines. */
.profile-shell-panel[hidden] {
    display: none !important;
}

.profile-games-scroll,
.profile-coaching-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-md);
}

.profile-games-lead {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-md);
    line-height: 1.55;
    max-width: 52rem;
}

.profile-games-kbd {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.85em;
    padding: 0.1em 0.35em;
    border-radius: 4px;
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
}

.profile-coaching-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    margin: 0 0 var(--space-sm);
    color: var(--color-teal);
}

.profile-coaching-lead {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0;
    max-width: 42rem;
}

.profile-coaching-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 42rem;
    margin-top: var(--space-md);
}

.profile-coaching-form .static-textarea {
    resize: vertical;
}

.profile-coaching-saved {
    font-size: 0.9rem;
    color: var(--color-teal);
    margin: var(--space-md) 0 0;
    max-width: 42rem;
}

.profile-coaching-privacy {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: var(--space-md) 0 0;
    max-width: 42rem;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    height: var(--header-height);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 10;
    flex-shrink: 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.brand-icon {
    font-size: 1.5rem;
    color: var(--color-teal);
    line-height: 1;
}

.brand-name {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-teal);
    letter-spacing: -0.01em;
}

.header-profile-tag {
    margin-left: var(--space-xs);
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-surface-elevated);
    border: 1px solid var(--color-border);
}

a.brand--link {
    display: flex;
    text-decoration: none;
    color: inherit;
    align-items: center;
}

a.brand--link:hover .brand-name {
    color: var(--color-teal-dark);
}

a.btn-settings {
    text-decoration: none;
    color: inherit;
    gap: var(--space-sm);
}

.btn-settings__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: currentColor;
}

.btn-new-chat .btn-label,
.btn-share .btn-label,
.btn-settings .btn-label {
    display: none;
}

@media (min-width: 480px) {
    .btn-new-chat .btn-label,
    .btn-share .btn-label,
    .btn-settings .btn-label {
        display: inline;
    }
}

a.btn-ghost:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 2px;
    border-radius: var(--border-radius);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* ── Button base styles ──────────────────────────────────────────────────── */
button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    transition: background-color var(--transition-fast), color var(--transition-fast),
                opacity var(--transition-fast);
}

button:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 2px;
    border-radius: var(--border-radius);
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-ghost {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius);
    color: var(--color-text-muted);
    min-height: 44px;
    min-width: 44px;
}

.btn-ghost:hover:not(:disabled) {
    background: var(--color-teal-light);
    color: var(--color-teal);
}

/* ── Messages area ───────────────────────────────────────────────────────── */
.messages-area {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.review-context-banner {
    margin: var(--space-sm) var(--space-md) 0;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-teal-light);
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    font-size: 0.8125rem;
}

.review-context-banner__text {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.review-context-banner__back {
    flex-shrink: 0;
    color: var(--color-teal-dark);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    background: var(--color-surface);
}

.review-context-banner__back:hover {
    text-decoration: underline;
}

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

.messages-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-md);
}

/* ── Messages ────────────────────────────────────────────────────────────── */
.message {
    display: flex;
    gap: var(--space-sm);
    max-width: var(--max-message-width);
    animation: fadeIn 150ms ease;
}

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

/* Assistant messages: left-aligned */
.message--assistant {
    align-self: flex-start;
    width: 100%;
    max-width: 100%;
    /* Follow-up chips are siblings of .message-content; wrap so chips sit below the bubble */
    flex-wrap: wrap;
}

.message--assistant .suggestion-chips {
    flex-basis: 100%;
    width: 100%;
}

/* User messages: right-aligned */
.message--user {
    align-self: flex-end;
    flex-direction: row-reverse;
    max-width: 85%;
}

.message-avatar {
    font-size: 1.25rem;
    color: var(--color-teal);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.message--assistant:not(.message--welcome) .message-avatar {
    overflow: hidden;
    border-radius: 50%;
}

.message--assistant .message-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.message--user .message-avatar {
    display: none;
}

.message-content {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-msg);
    padding: var(--space-sm) var(--space-md);
    font-size: 0.9375rem;
    line-height: 1.65;
    word-break: break-word;
}

.message--assistant .message-content {
    border-top-left-radius: 4px; /* Flat corner near avatar */
}

/* Welcome intro — intentionally compact so first visit leaves room for the composer. */
.message--welcome {
    max-width: 100%;
}

.message-avatar--welcome {
    width: 32px;
    height: 32px;
    margin-top: 1px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(145deg, var(--color-teal-light), var(--color-bg-alt));
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 5px rgba(27, 107, 119, 0.1);
}

.message-content--welcome {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface);
}

.welcome-lead {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text);
}

.message-content--welcome p:not(.welcome-lead) {
    font-size: 0.875rem;
}

/* A personalization line that has no content yet (no recent games / no Chess.com record) must not
   leave an empty paragraph gap in the welcome bubble. */
.welcome-context:empty {
    display: none;
}

/* Welcome offer + CTA (Play Coach): a short invitation followed by a button-styled link to the
   board workspace. Only rendered (in chat.js) when Play Coach is available. */
.welcome-offer {
    margin-top: var(--space-sm);
    color: var(--color-text);
}

/* Scoped under .message-content so the CTA's own text colour wins over the
   more-specific `.message-content a` link rule (teal on teal would otherwise be
   invisible). Uses the theme-aware --color-user-text (white in light, near-black
   in dark) — matching .landing-submit/.landing-continue — so text-on-teal keeps
   WCAG-AA contrast in both themes, including dark where --color-teal is light. */
.message-content .welcome-cta {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: var(--space-xs);
    padding: 0.5rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-user-text);
    background: var(--color-teal);
    border-radius: var(--border-radius);
    box-shadow: 0 1px 4px rgba(27, 107, 119, 0.2);
}

.message-content .welcome-cta:hover,
.message-content .welcome-cta:focus-visible {
    color: var(--color-user-text);
    background: var(--color-teal-dark, var(--color-teal));
    text-decoration: none;
}

[data-theme="dark"] .message-avatar--welcome {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .message-content--welcome {
    background: var(--color-surface);
}

.message--user .message-content {
    background: var(--color-user-bg);
    border-color: var(--color-user-bg);
    color: var(--color-user-text);
    border-top-right-radius: 4px;
}

.message--error .message-content {
    background: var(--color-error);
    border-color: var(--color-error);
    color: white;
}

/* ── Markdown content styles ─────────────────────────────────────────────── */
.message-content p { margin-bottom: 0.75em; }
.message-content p:last-child { margin-bottom: 0; }

/* Streaming scaffolding (issue #615): a streaming answer is built as finished blocks appended ahead of
   a live tail, so the coach's completed prose is never re-parsed. The wrappers exist only to scope the
   DOM work — `display: contents` keeps them out of layout, and the margin rule restores the bottom
   margin `p:last-child` above would otherwise drop from every block but the last. */
.chat-stream-block,
.chat-stream-tail { display: contents; }
.chat-stream-block > p:last-child { margin-bottom: 0.75em; }

.message-content h1, .message-content h2, .message-content h3,
.message-content h4, .message-content h5, .message-content h6 {
    font-family: var(--font-serif);
    color: var(--color-teal);
    margin: 1em 0 0.5em;
    line-height: 1.3;
}
.message-content h1 { font-size: 1.4em; }
.message-content h2 { font-size: 1.25em; }
.message-content h3 { font-size: 1.1em; }

.message-content ul, .message-content ol {
    padding-left: 1.5em;
    margin-bottom: 0.75em;
}
.message-content li { margin-bottom: 0.25em; }

.message-content blockquote {
    border-left: 3px solid var(--color-teal);
    padding-left: var(--space-md);
    color: var(--color-text-muted);
    margin: 0.75em 0;
    font-style: italic;
}

.message-content code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--color-bg-alt);
    padding: 0.1em 0.35em;
    border-radius: 4px;
    border: 1px solid var(--color-border);
}

.message--user .message-content code {
    background: rgba(255,255,255,0.15);
    border-color: rgba(255,255,255,0.2);
    color: inherit;
}

.message-content pre {
    background: #1e1e2e;
    border-radius: var(--border-radius);
    padding: var(--space-md);
    overflow-x: auto;
    margin: 0.75em 0;
    border: 1px solid #313244;
}

.message-content pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.85em;
    color: #cdd6f4;
}

.message-content table {
    border-collapse: collapse;
    width: 100%;
    margin: 0.75em 0;
    font-size: 0.9em;
}

.message-content th, .message-content td {
    border: 1px solid var(--color-border);
    padding: var(--space-xs) var(--space-sm);
    text-align: left;
}

.message-content th {
    background: var(--color-teal-light);
    color: var(--color-teal-dark);
    font-weight: 500;
}

.message-content a {
    color: var(--color-teal);
    text-decoration: underline;
    text-decoration-color: transparent;
    transition: text-decoration-color var(--transition-fast);
}
.message-content a:hover { text-decoration-color: var(--color-teal); }

/* ── Thinking indicator ──────────────────────────────────────────────────── */
.message--thinking .message-content {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    color: var(--color-text-muted);
    font-style: italic;
}

.message--thinking--review .message-content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
}

.thinking-review-hint,
.thinking-reconnect-hint {
    margin: 0;
    padding: 0;
    font-size: 0.8125rem;
    font-style: normal;
    font-weight: 500;
    color: var(--color-text-muted);
}

.thinking-reconnect-hint {
    margin-top: var(--space-xs);
}

.thinking-dots {
    display: flex;
    gap: 4px;
}

.thinking-dots span {
    width: 6px;
    height: 6px;
    background: var(--color-teal);
    border-radius: 50%;
    animation: bounce 1.2s infinite;
}

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

@keyframes bounce {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
    40%           { transform: translateY(-6px); opacity: 1; }
}

/* ── Scroll to bottom button ─────────────────────────────────────────────── */
.scroll-to-bottom {
    position: absolute;
    bottom: var(--space-md);
    right: var(--space-md);
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    gap: 6px;
    background: var(--color-teal);
    color: white;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 12px rgba(27, 107, 119, 0.35), 0 1px 3px rgba(0, 0, 0, 0.15);
    transition: opacity var(--transition-fast), transform var(--transition-fast),
        box-shadow var(--transition-base);
}

.scroll-to-bottom__label {
    display: none;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

@media (min-width: 480px) {
    .scroll-to-bottom {
        padding: 0 14px 0 12px;
    }
    .scroll-to-bottom__label {
        display: inline;
    }
}

.scroll-to-bottom:hover {
    background: var(--color-teal-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(27, 107, 119, 0.4), 0 2px 6px rgba(0, 0, 0, 0.12);
}

.scroll-to-bottom:active {
    transform: translateY(0);
}

.scroll-to-bottom[hidden] { display: none; }

[data-theme="dark"] .scroll-to-bottom {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ── Input area ──────────────────────────────────────────────────────────── */
.input-area {
    flex-shrink: 0;
    padding: var(--space-xs) var(--space-md) var(--space-xs);
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
}

.input-form { width: 100%; }

.input-wrapper {
    display: flex;
    align-items: flex-end;
    gap: var(--space-sm);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-sm);
    transition: border-color var(--transition-fast);
    box-shadow: 0 2px 12px rgba(44, 36, 22, 0.08), 0 1px 3px rgba(44, 36, 22, 0.06);
}

.input-wrapper:focus-within {
    border-color: var(--color-teal);
}

/* Composer while Chesswick is streaming */
.app-shell--streaming .input-wrapper {
    border-color: var(--color-teal);
    box-shadow:
        0 0 0 1px rgba(27, 107, 119, 0.2),
        0 2px 16px rgba(27, 107, 119, 0.12),
        0 1px 3px rgba(44, 36, 22, 0.06);
    animation: inputStreamingGlow 2.2s ease-in-out infinite;
}

[data-theme="dark"] .app-shell--streaming .input-wrapper {
    box-shadow:
        0 0 0 1px rgba(94, 200, 212, 0.25),
        0 2px 20px rgba(0, 0, 0, 0.35),
        0 0 24px rgba(94, 200, 212, 0.08);
    animation-name: inputStreamingGlowDark;
}

@keyframes inputStreamingGlow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(27, 107, 119, 0.2), 0 2px 16px rgba(27, 107, 119, 0.12), 0 1px 3px rgba(44, 36, 22, 0.06); }
    50%      { box-shadow: 0 0 0 1px rgba(27, 107, 119, 0.35), 0 2px 20px rgba(27, 107, 119, 0.18), 0 1px 3px rgba(44, 36, 22, 0.06); }
}

@keyframes inputStreamingGlowDark {
    0%, 100% { box-shadow: 0 0 0 1px rgba(94, 200, 212, 0.25), 0 2px 20px rgba(0, 0, 0, 0.35), 0 0 24px rgba(94, 200, 212, 0.08); }
    50%      { box-shadow: 0 0 0 1px rgba(94, 200, 212, 0.45), 0 2px 24px rgba(0, 0, 0, 0.45), 0 0 32px rgba(94, 200, 212, 0.14); }
}

.message-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    color: var(--color-text);
    line-height: 1.5;
    resize: none;
    min-height: 24px;
    max-height: 160px;
    overflow-y: auto;
    padding: 2px 0;
    field-sizing: content;
}

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

.input-actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.btn-send, .btn-cancel {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.btn-send {
    background: var(--color-teal);
    color: white;
}

.btn-send:hover:not(:disabled) {
    background: var(--color-teal-dark);
    transform: scale(1.05);
}

.btn-cancel {
    background: var(--color-error);
    color: white;
}

.btn-cancel:hover:not(:disabled) {
    background: #6b1818;
}

.btn-cancel[hidden] { display: none; }
.btn-send[hidden]   { display: none; }

.btn-composer-tip {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.btn-composer-tip:hover {
    color: var(--color-teal);
    background: var(--color-teal-light);
}

.btn-composer-tip:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 2px;
}

[data-theme="dark"] .btn-composer-tip:hover {
    background: rgba(94, 200, 212, 0.12);
}

/* ── Error page ──────────────────────────────────────────────────────────── */
.error-page {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
}

.error-content {
    text-align: center;
    max-width: 400px;
}

.error-icon {
    display: block;
    font-size: 3rem;
    color: var(--color-teal);
    margin-bottom: var(--space-md);
}

.error-content h1 {
    font-family: var(--font-serif);
    color: var(--color-teal);
    margin-bottom: var(--space-sm);
}

.error-content p { color: var(--color-text-muted); margin-bottom: var(--space-md); }
.error-ref { font-size: 0.85rem; }

.btn-primary {
    display: inline-block;
    padding: var(--space-sm) var(--space-lg);
    background: var(--color-teal);
    color: white;
    text-decoration: none;
    border-radius: var(--border-radius);
    font-weight: 500;
    transition: background-color var(--transition-fast);
}

.btn-primary:hover { background: var(--color-teal-dark); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
    .messages-inner {
        padding: var(--space-xl) var(--space-xl);
    }

    .message--user {
        max-width: 75%;
    }

    .input-area {
        padding: var(--space-sm) var(--space-xl) var(--space-sm);
    }

    .starter-chips {
        padding-inline: var(--space-xl);
    }
}

/* iOS Safari: prevent layout shift when keyboard opens */
@supports (-webkit-touch-callout: none) {
    .app-shell {
        height: -webkit-fill-available;
    }
}

/* ── Knight logo image ───────────────────────────────────────────────────── */
.brand-icon-img {
    width: 28px;
    height: 28px;
    /* Tint the SVG to match teal — img tag can't use currentColor */
    filter: invert(35%) sepia(60%) saturate(500%) hue-rotate(155deg) brightness(80%);
}

/* ── Starter chips ───────────────────────────────────────────────────────── */
/* Suggestion chips appended below assistant message bubbles */
.suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-sm) 0 var(--space-xs);
    /* Indent to align with message content (past the avatar) */
    padding-left: calc(32px + var(--space-sm));
    animation: fadeIn 200ms ease both;
}

.composer-suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: 0 0 var(--space-sm);
    animation: fadeIn 200ms ease both;
}

.composer-suggestion-chips[hidden] {
    display: none;
}

/* Small, unobtrusive hint shown when follow-up suggestions fail to load. */
.suggestions-error {
    margin: 0;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-style: italic;
}

.starter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    /* Horizontal padding mirrors .messages-inner / .input-area so the suggested
       questions line up with the conversation and the composer below. */
    padding: var(--space-sm) var(--space-md) var(--space-md);
}

.starter-chips .chip:nth-child(1) { animation: chipRise 320ms ease 80ms both; }
.starter-chips .chip:nth-child(2) { animation: chipRise 320ms ease 140ms both; }
.starter-chips .chip:nth-child(3) { animation: chipRise 320ms ease 200ms both; }
.starter-chips .chip:nth-child(4) { animation: chipRise 320ms ease 260ms both; }

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

.chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-md);
    border: 1.5px solid var(--color-teal);
    border-radius: 999px;
    background: transparent;
    color: var(--color-teal);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    min-height: 36px;
    text-align: left;
}

.chip:hover,
.chip:focus-visible {
    background: var(--color-teal);
    color: white;
    outline: none;
}

.chip:focus-visible {
    box-shadow: 0 0 0 3px rgba(27, 107, 119, 0.3);
}

/* ── Streaming cursor ────────────────────────────────────────────────────── */
.streaming-cursor::after {
    content: '▋';
    display: inline-block;
    color: var(--color-teal);
    animation: blink 0.7s step-end infinite;
    margin-left: 1px;
    font-size: 0.9em;
    vertical-align: baseline;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Header polish ───────────────────────────────────────────────────────── */
.app-header {
    box-shadow: 0 1px 0 var(--color-border), 0 2px 8px rgba(44, 36, 22, 0.04);
}

/* ── Message bubble depth ────────────────────────────────────────────────── */
.message-content {
    box-shadow: 0 1px 3px rgba(44, 36, 22, 0.06);
}

/* ── Header theme toggle ─────────────────────────────────────────────────── */
.btn-theme {
    position: relative;
}

.btn-theme .icon-theme-light,
.btn-theme .icon-theme-dark {
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-theme .icon-theme-dark {
    display: none;
}

[data-theme="dark"] .btn-theme .icon-theme-light {
    display: none;
}

[data-theme="dark"] .btn-theme .icon-theme-dark {
    display: flex;
}

/* Theme toggle fixed position for _Layout (Error etc.) and grouping helper for static topbar actions */
.layout-theme-toggle {
    position: fixed;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    right: calc(1rem + env(safe-area-inset-right, 0px));
    z-index: 1000;
}

.settings-topbar--actions > div {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ── Settings page ─────────────────────────────────────────────────────── */
.settings-shell {
    min-height: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
}

.settings-topbar {
    padding: var(--space-sm) var(--space-md);
    padding-top: max(var(--space-sm), env(safe-area-inset-top));
    flex-shrink: 0;
}

.settings-topbar--actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.settings-back-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color var(--transition-fast), color var(--transition-fast),
        border-color var(--transition-fast);
}

.settings-back-pill:hover {
    background: var(--color-teal-light);
    color: var(--color-teal);
    border-color: var(--color-border);
}

.settings-back-pill:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 2px;
}

.settings-share-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    border: 1px solid transparent;
    background: transparent;
    min-height: 40px;
}

.settings-share-pill:hover:not(:disabled) {
    background: var(--color-teal-light);
    color: var(--color-teal);
    border-color: var(--color-border);
}

.settings-main {
    flex: 1;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 var(--space-md) max(var(--space-xl), env(safe-area-inset-bottom));
    width: 100%;
}

.settings-hero {
    text-align: center;
    padding: var(--space-md) 0 var(--space-xl);
}

.settings-hero__mark {
    width: 72px;
    height: 72px;
    margin: 0 auto var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-teal-light);
    border: 1px solid var(--color-border);
}

.settings-hero__knight {
    display: block;
}

[data-theme="dark"] .settings-hero__knight {
    filter: invert(72%) sepia(35%) saturate(450%) hue-rotate(145deg) brightness(95%);
}

.settings-title {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-teal);
    margin-bottom: var(--space-sm);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.settings-lead {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    max-width: 36em;
    margin: 0 auto;
}

/* Static pages (About, Contact, Privacy) */
.static-page-shell .settings-main,
.static-page-main {
    flex: 1;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 var(--space-md) var(--space-lg);
    width: 100%;
}

.static-page-footer {
    flex-shrink: 0;
    padding: 0;
    text-align: center;
}

.static-page-footer--settings {
    padding-top: var(--space-xl);
}

.static-page-footer .site-footer-row {
    border-top: none;
}

.static-page-footer:not(.static-page-footer--settings) .site-footer-row {
    padding-top: var(--space-sm);
}

.static-prose {
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--color-text);
}

.static-prose p {
    margin: 0 0 1rem;
}

.static-prose__h2 {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-teal);
    margin: 1.5rem 0 0.5rem;
}

.static-prose__h2:first-child {
    margin-top: 0;
}

.static-prose ul {
    margin: 0 0 1rem;
    padding-left: 1.35rem;
    list-style: disc;
}

.static-prose li {
    margin-bottom: 0.45rem;
    line-height: 1.55;
}

.static-contact-form {
    margin-top: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.static-textarea {
    min-height: 8rem;
    resize: vertical;
    line-height: 1.5;
}

.static-flash {
    border-radius: 10px;
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    font-size: 0.9375rem;
}

.static-flash--success {
    background: rgba(27, 107, 119, 0.12);
    border: 1px solid rgba(27, 107, 119, 0.35);
    color: var(--color-text);
}

.static-validation-summary {
    border-radius: 8px;
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
    background: rgba(180, 50, 50, 0.08);
    border: 1px solid rgba(180, 50, 50, 0.35);
    font-size: 0.875rem;
}

.static-field-error {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: #a33030;
}

/* Public static forms (Contact, Contributor interest).
   The .settings-* classes are shared with the admin panel, where inputs are narrow,
   monospace key fields. On the public pages we want a contained card, full-width inputs
   in the reading font, and a button that doesn't stretch awkwardly on desktop. */
.static-form-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 1px 3px rgba(44, 36, 22, 0.06);
}

[data-theme="dark"] .static-form-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Honeypot wrapper on the public forms: parked off-screen (not display:none, which naive
   bots skip) so autofillers/spam scripts still populate it while humans never see it. */
.static-form-trap {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.static-form-card__title {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--color-teal);
    margin-bottom: var(--space-xs);
    letter-spacing: -0.01em;
}

.static-form-card__lead {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

/* Contact/contributor inputs fill the form and use the reading font, not the
   monospace + 20rem cap that suits admin key fields. */
.static-contact-form .settings-text-input {
    max-width: none;
    font-family: var(--font-sans);
    font-size: 1rem;
    padding: 0.65rem 0.75rem;
}

.static-contact-form .settings-field {
    margin-bottom: 0;
}

.static-form-grid {
    display: grid;
    gap: var(--space-md);
    grid-template-columns: 1fr;
}

.static-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-xs);
}

.static-form-actions .btn-settings-primary {
    width: 100%;
}

@media (min-width: 560px) {
    .static-form-grid {
        grid-template-columns: 1fr 1fr;
    }

    .static-form-actions .btn-settings-primary {
        width: auto;
        min-width: 12rem;
    }
}

/* "Interested in contributing?" callout below the contributors list. */
.contributor-cta {
    margin-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

.app-footer-links {
    flex-shrink: 0;
    padding: 0;
    text-align: center;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0;
    font-family: var(--font-sans);
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.app-footer-links a {
    color: var(--color-teal-dark);
    text-decoration: none;
    font-weight: 500;
    opacity: 0.92;
}

.app-footer-links a:hover {
    text-decoration: underline;
}

.app-footer-links__sep {
    margin: 0 0.35rem;
    opacity: 0.45;
}

.settings-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-bottom: var(--space-xl);
}

.settings-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    box-shadow: 0 1px 3px rgba(44, 36, 22, 0.06);
}

[data-theme="dark"] .settings-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.settings-card__title {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.settings-card__desc {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin-bottom: var(--space-md);
}

.settings-field {
    margin-bottom: var(--space-sm);
}

.settings-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: 0.35rem;
}

.settings-text-input {
    width: 100%;
    max-width: 20rem;
    box-sizing: border-box;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.9375rem;
    padding: 0.55rem 0.65rem;
    border-radius: var(--border-radius-md, 8px);
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.settings-text-input:focus {
    outline: 2px solid var(--color-teal);
    outline-offset: 1px;
}

.settings-actions-row {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.settings-actions-row--split {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: stretch;
}

.settings-actions-row--split .btn-settings-primary,
.settings-actions-row--split .btn-settings-secondary {
    flex: 1 1 12rem;
    width: auto;
    min-height: 48px;
}

.settings-hint--status {
    margin-top: var(--space-sm);
    margin-bottom: 0;
    min-height: 1.25em;
}

.settings-segment {
    display: flex;
    padding: 3px;
    gap: 3px;
    border-radius: 12px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
}

.settings-segment--triple {
    flex-wrap: wrap;
}

.settings-segment--triple .settings-segment__opt {
    flex: 1 1 30%;
    min-width: 5.5rem;
}

.settings-segment__opt {
    flex: 1;
    cursor: pointer;
    position: relative;
}

.settings-segment__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

.settings-segment__face {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 44px;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 9px;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    border: 1px solid transparent;
    transition: background-color var(--transition-fast), color var(--transition-fast),
        border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.settings-segment__opt:hover .settings-segment__face {
    color: var(--color-text);
    background: rgba(255, 255, 255, 0.35);
}

[data-theme="dark"] .settings-segment__opt:hover .settings-segment__face {
    background: rgba(255, 255, 255, 0.04);
}

.settings-segment__input:focus-visible + .settings-segment__face {
    outline: 2px solid var(--color-teal);
    outline-offset: 2px;
}

.settings-segment__input:checked + .settings-segment__face {
    background: var(--color-surface);
    color: var(--color-teal);
    border-color: var(--color-border);
    box-shadow: 0 1px 4px rgba(44, 36, 22, 0.08);
}

[data-theme="dark"] .settings-segment__input:checked + .settings-segment__face {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.settings-hint {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: var(--space-md);
    line-height: 1.45;
}

.btn-settings-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    min-height: 48px;
    padding: var(--space-sm) var(--space-lg);
    border: none;
    border-radius: var(--border-radius);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--color-teal);
    color: #fff;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.btn-settings-primary:hover:not(:disabled) {
    background: var(--color-teal-dark);
}

.btn-settings-primary:active:not(:disabled) {
    transform: scale(0.99);
}

.btn-settings-primary:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 3px;
}

.btn-settings-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    min-height: 48px;
    padding: var(--space-sm) var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--color-surface);
    color: var(--color-text);
    transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.btn-settings-secondary:hover:not(:disabled) {
    background: var(--color-bg-alt);
    border-color: var(--color-text-muted);
}

.btn-settings-secondary:active:not(:disabled) {
    transform: scale(0.99);
}

.btn-settings-secondary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-settings-secondary:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 3px;
}

.detail-level-select {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text);
    min-height: 36px;
}

/* ── Starter chips visibility (no inline styles — CSP) ─────────────────── */
.starter-chips.starter-chips--hidden {
    display: none;
}

/* ── Cancelled stream note ──────────────────────────────────────────────── */
.message-content__cancelled {
    color: var(--color-text-muted);
    font-size: 0.85em;
}

/* ── Code block copy toolbar ───────────────────────────────────────────── */
.code-block {
    position: relative;
    margin: 0.75em 0;
}

.code-block__toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.btn-copy-code {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--color-teal-light);
    color: var(--color-teal-dark);
    border: 1px solid var(--color-border);
    min-height: auto;
}

.btn-copy-code:hover:not(:disabled) {
    background: var(--color-teal);
    color: white;
    border-color: var(--color-teal);
}

.btn-copy-code:disabled {
    opacity: 0.7;
}

.code-block pre {
    margin-top: 0;
}

/* ── Recent Chess.com games + review dialog ─────────────────────────────── */
.recent-games {
    flex-shrink: 0;
    padding: 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}

.recent-games__disclosure {
    margin: 0;
}

.recent-games__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    min-height: 40px;
    padding: 6px var(--space-md);
    list-style: none;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--color-text);
    user-select: none;
}

.recent-games__summary:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 2px;
}

.recent-games__summary::-webkit-details-marker {
    display: none;
}

.recent-games__summary::before {
    content: '';
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-right: 2px;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: rotate(-45deg);
    transition: transform var(--transition-fast);
    flex-shrink: 0;
    opacity: 0.75;
}

.recent-games__disclosure[open] > .recent-games__summary::before {
    transform: rotate(45deg);
    margin-top: -2px;
}

.recent-games__summary-title {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.recent-games__summary-meta {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted);
    text-align: right;
    min-width: 0;
    flex: 1;
}

/* Profile tab: full-page game list (no disclosure) */
.recent-games--profile {
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: var(--color-bg);
    overflow: hidden;
}

.recent-games__profile-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-elevated);
}

.recent-games__profile-title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text);
}

.recent-games--profile .recent-games__summary-meta {
    flex: 0 0 auto;
    text-align: right;
}

.recent-games--profile .recent-games__body {
    border-top: none;
    padding: var(--space-xs) var(--space-md) var(--space-md);
    max-height: min(50vh, 420px);
    overflow: auto;
}

.recent-games__body {
    padding: 0 var(--space-md) var(--space-xs);
    max-height: min(28vh, 220px);
    overflow: auto;
    border-top: 1px solid rgba(226, 217, 204, 0.55);
}

[data-theme="dark"] .recent-games__body {
    border-top-color: rgba(58, 58, 74, 0.9);
}

.recent-games__list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--space-xs) 0;
}

.recent-games__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 5px var(--space-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.recent-games__info {
    min-width: 0;
}

.recent-games__opponent {
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.25;
}

.recent-games__sub {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    margin-top: 1px;
    line-height: 1.3;
}

.recent-games__empty {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    padding: var(--space-xs) 0 var(--space-sm);
}

.btn-recent-game-review {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-teal);
    background: transparent;
    color: var(--color-teal);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.recent-games__actions {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
}

.btn-recent-game-moves {
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.btn-recent-game-share {
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
}

.btn-recent-game-moves:hover:not(:disabled) {
    color: var(--color-teal-dark);
    border-color: var(--color-border);
    background: var(--color-bg-alt);
    text-decoration: none;
}

.btn-recent-game-share:hover:not(:disabled) {
    color: var(--color-teal-dark);
    border-color: var(--color-border);
    background: var(--color-bg-alt);
}

.btn-recent-game-review:hover:not(:disabled) {
    background: var(--color-teal-light);
    color: var(--color-teal-dark);
    border-color: var(--color-teal-dark);
}

.btn-recent-game-review.is-reviewing {
    background: var(--color-teal);
    color: #fff;
    border-color: var(--color-teal);
}

.game-review-dialog {
    padding: 0;
    border: none;
    background: transparent;
    max-width: 100vw;
    width: min(560px, 100vw - 2rem);
}

.game-review-dialog::backdrop {
    background: rgba(44, 36, 22, 0.45);
}

[data-theme="dark"] .game-review-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.game-review-dialog__panel {
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: 0 16px 48px rgba(44, 36, 22, 0.18);
    overflow: hidden;
}

[data-theme="dark"] .game-review-dialog__panel {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.game-review-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-alt);
}

.game-review-dialog__title {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    font-weight: 600;
}

.game-review-dialog__close {
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--border-radius);
}

.game-review-dialog__close:hover {
    color: var(--color-text);
    background: var(--color-border);
}

.game-review-dialog__body {
    padding: var(--space-md) var(--space-lg);
    max-height: min(70vh, 640px);
    overflow: auto;
}

.game-review-dialog__footer {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.btn-game-review-primary {
    flex: 1 1 auto;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    background: var(--color-teal);
    color: #fff;
    transition: background var(--transition-fast);
}

.btn-game-review-primary:hover:not(:disabled) {
    background: var(--color-teal-dark);
}

.btn-game-review-secondary {
    flex: 0 0 auto;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 9px 12px;
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.btn-game-review-secondary:hover:not(:disabled) {
    color: var(--color-teal-dark);
    border-color: var(--color-teal);
}

.game-review-replay-hint {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--cw-muted, #5c6370);
}

[data-theme="dark"] .game-review-replay-hint {
    color: var(--cw-muted-dark, #9aa4b2);
}

.game-review-meta {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

.game-review-error {
    font-size: 0.875rem;
    color: var(--color-error);
    margin-top: var(--space-sm);
}

/* Player names + ratings now render inside the board widget itself
   (issue #271); the standalone .game-review-names row was removed. */

.game-review-dialog__body .chesswick-diagram {
    margin-top: var(--space-sm);
}

/* ── Dark theme ─────────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --color-bg:          #14141a;
    --color-bg-alt:      #1c1c26;
    --color-surface:     #22222e;
    --color-border:      #3a3a4a;
    --color-teal:        #5ec8d4;
    --color-teal-dark:   #3daab8;
    --color-teal-light:  #1a3338;
    --color-text:        #e8e4dc;
    --color-text-muted:  #9a9488;
    --color-user-bg:     #3daab8;
    --color-user-text:   #0f1115;
    --color-error:       #e07070;
}

[data-theme="dark"] .brand-icon-img {
    filter: invert(72%) sepia(35%) saturate(450%) hue-rotate(145deg) brightness(95%);
}

[data-theme="dark"] .message-content pre {
    border-color: #45475a;
}

[data-theme="dark"] .input-wrapper {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .app-header {
    box-shadow: 0 1px 0 var(--color-border), 0 2px 8px rgba(0, 0, 0, 0.25);
}

@media (prefers-reduced-motion: reduce) {
    .message,
    .starter-chips,
    .suggestion-chips,
    .chip {
        animation: none;
    }

    .starter-chips .chip:nth-child(1),
    .starter-chips .chip:nth-child(2),
    .starter-chips .chip:nth-child(3),
    .starter-chips .chip:nth-child(4) {
        animation: none;
    }

    .messages-area {
        scroll-behavior: auto;
    }

    .app-shell--streaming .input-wrapper {
        animation: none;
    }

    .btn-send:hover:not(:disabled),
    .scroll-to-bottom:hover {
        transform: none;
    }
}

/* ── Admin (behind Cloudflare Access /path) ─────────────────────────────── */
.admin-body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans, Inter, system-ui, sans-serif);
    background: var(--color-bg, #f4f1ea);
    color: var(--color-text, #1a1a22);
}

.admin-header {
    background: var(--color-surface, #fff);
    border-bottom: 1px solid var(--color-border, #d8d2c6);
}

.admin-header__inner {
    max-width: 94rem;
    margin: 0 auto;
    padding: 0.75rem 1rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

.admin-brand {
    font-family: var(--font-display, "Playfair Display", Georgia, serif);
    font-weight: 600;
    font-size: 1.1rem;
}

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 0.9rem;
}

.admin-nav__group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.admin-nav__group + .admin-nav__group {
    padding-left: 0.9rem;
    border-left: 1px solid var(--color-border, #d8d2c6);
}

.admin-nav__group-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted, #6b6457);
    padding-left: 0.2rem;
}

.admin-nav__group-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.55rem;
}

.admin-nav a {
    color: var(--color-teal-dark, #1B6B77);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.84rem;
    line-height: 1.2;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--color-bg-alt, #ebe6dc);
    transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.admin-nav a:hover {
    text-decoration: none;
    background: #e4ddd1;
    border-color: var(--color-border, #d8d2c6);
}

.admin-nav a:focus-visible {
    outline: 2px solid var(--color-teal, #1B6B77);
    outline-offset: 1px;
}

.admin-nav a.admin-nav__link--active {
    background: var(--color-teal-dark, #1B6B77);
    border-color: var(--color-teal-dark, #1B6B77);
    color: #fff;
}

.admin-main {
    max-width: 94rem;
    margin: 0 auto;
    padding: 1.25rem 1rem 2.5rem;
}

.admin-h1 {
    font-family: var(--font-display, "Playfair Display", Georgia, serif);
    font-size: 1.75rem;
    margin: 0 0 0.75rem;
}

.admin-h2 {
    font-size: 1.1rem;
    margin: 1.25rem 0 0.5rem;
}

.admin-h3 {
    font-size: 0.95rem;
    margin: 0 0 0.35rem;
}

.admin-lead,
.admin-list {
    line-height: 1.55;
}

.admin-list {
    padding-left: 1.2rem;
}

.admin-section {
    margin-top: 1.5rem;
}

.admin-flash {
    padding: 0.5rem 0.75rem;
    background: #e6f6f3;
    border: 1px solid #9dd4cc;
    border-radius: 6px;
}

.admin-flash--error {
    background: #fdecea;
    border-color: #e0a9a3;
}

.admin-form {
    margin-top: 1rem;
}

.admin-validation-list {
    margin: 0;
    padding-left: 1.2rem;
}

.admin-form__row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.admin-form__col {
    flex: 1;
    min-width: 12rem;
}

.admin-form__col--wide {
    min-width: 14rem;
}

.admin-field-error {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-error);
    margin: 0.35rem 0 0;
}

.admin-input[aria-invalid="true"],
.admin-textarea[aria-invalid="true"] {
    border-color: var(--color-error);
}

.admin-settings-save-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1rem;
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #d8d2c6);
    border-radius: 8px;
}

.admin-settings-save-bar .admin-button {
    margin-top: 0;
}

.admin-settings-save-bar__hint {
    margin: 0;
    flex: 1 1 14rem;
    max-width: 36rem;
}

.admin-form--inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: flex-end;
}

.admin-fieldset {
    border: 1px solid var(--color-border, #d8d2c6);
    border-radius: 8px;
    padding: 0.75rem 1rem 1rem;
    margin-bottom: 1rem;
}

.admin-fieldset legend {
    padding: 0 0.35rem;
    font-weight: 600;
}

.admin-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0.5rem 0 0.2rem;
}

.admin-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.45rem;
    font-size: 0.85rem;
    font-weight: 500;
}

.admin-inline-check input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
}

.admin-input {
    display: block;
    width: 100%;
    max-width: 32rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid var(--color-border, #d8d2c6);
    border-radius: 6px;
    font: inherit;
    box-sizing: border-box;
}

.admin-form--inline .admin-input {
    max-width: 16rem;
}

.admin-input--mono {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.85rem;
}

.admin-hint,
.admin-meta {
    font-size: 0.8rem;
    color: var(--color-text-muted, #5c574e);
    margin: 0.35rem 0 0;
}

.admin-llm-test-hint {
    margin-top: 0.6rem;
}

.admin-llm-test {
    min-height: 1.2em;
    font-weight: 500;
}

.admin-llm-test--ok {
    color: #1a6b2e;
}

.admin-llm-test--err {
    color: #9a2c2c;
}

/* OpenRouter model picker: sits under the model field it fills, indented so it reads as an aid to that
   input rather than a separate setting. Hidden until the row's base URL points at OpenRouter. */
.admin-model-picker {
    margin: 0.35rem 0 0.5rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--color-border, #d8d2c6);
}

.admin-model-picker[hidden] {
    display: none;
}

.admin-model-picker .admin-label {
    font-size: 0.8rem;
}

.admin-model-picker .admin-input {
    max-width: 32rem;
}

.admin-fieldset .admin-button--ghost {
    margin-top: 0.45rem;
}

.admin-button {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.45rem 1rem;
    border: none;
    border-radius: 6px;
    background: var(--color-teal-dark, #1B6B77);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.admin-button--ghost {
    background: transparent;
    color: var(--color-teal-dark, #1B6B77);
    border: 1px solid var(--color-teal-dark, #1B6B77);
    margin-top: 0;
    text-decoration: none;
    text-align: center;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.88rem;
}

.admin-table th,
.admin-table td {
    border: 1px solid var(--color-border, #d8d2c6);
    padding: 0.4rem 0.5rem;
    vertical-align: top;
}

.admin-table th {
    text-align: left;
    background: var(--color-bg-alt, #ebe6dc);
}

.admin-table__clip {
    white-space: pre-wrap;
    word-break: break-word;
}

.admin-pager {
    margin-top: 1rem;
    display: flex;
    gap: 0.5rem;
}

.admin-thread-turn {
    border: 1px solid var(--color-border, #d8d2c6);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    background: var(--color-surface, #fff);
}

.admin-thread-turn__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    font-size: 0.8rem;
    color: var(--color-text-muted, #5c574e);
    margin-bottom: 0.5rem;
}

.admin-tag {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: #eee9e0;
    font-weight: 600;
    color: #333;
}

.admin-pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.82rem;
    max-height: 20rem;
    overflow: auto;
}

.admin-table__nowrap {
    white-space: nowrap;
}

.admin-table__detail-row td {
    background: var(--color-bg-alt, #ebe6dc);
    border-top: none;
}

.admin-message-pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.82rem;
    line-height: 1.45;
    max-height: 16rem;
    overflow: auto;
}

.admin-md {
    border-top: 1px dashed var(--color-border, #d8d2c6);
    padding-top: 0.5rem;
}

/* Admin dashboard — stat strip + tile grid */

.admin-lead--secure {
    font-size: 0.82rem;
    color: var(--color-muted, #6b6354);
    margin-bottom: 1.25rem;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.admin-stat {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #d8d2c6);
    border-radius: 8px;
    padding: 0.875rem 1rem;
    text-align: center;
}

.admin-stat--alert {
    border-color: var(--color-teal, #1B6B77);
}

a.admin-stat {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

a.admin-stat:hover {
    border-color: var(--color-teal, #1B6B77);
    box-shadow: 0 2px 10px rgba(27, 107, 119, 0.10);
    cursor: pointer;
}

.admin-stat__value {
    display: block;
    font-family: var(--font-display, "Playfair Display", Georgia, serif);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-teal, #1B6B77);
    line-height: 1;
}

.admin-stat__label {
    display: block;
    font-size: 0.72rem;
    color: var(--color-muted, #6b6354);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.3rem;
}

.admin-dashboard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.875rem;
    margin-top: 0.25rem;
}

.admin-dash-group {
    grid-column: 1 / -1;
    margin-top: 0.75rem;
}

.admin-dash-group:first-child {
    margin-top: 0;
}

.admin-dash-group__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted, #6b6354);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--color-border, #d8d2c6);
}

.admin-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 1.1rem 1.25rem 1.1rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #d8d2c6);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.admin-tile:hover {
    border-color: var(--color-teal, #1B6B77);
    box-shadow: 0 2px 10px rgba(27, 107, 119, 0.10);
    text-decoration: none;
}

.admin-tile__icon {
    color: var(--color-teal, #1B6B77);
    flex-shrink: 0;
    margin-bottom: 0.1rem;
}

.admin-tile__title {
    font-family: var(--font-display, "Playfair Display", Georgia, serif);
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--color-text, #2C2416);
}

.admin-tile__desc {
    font-size: 0.8rem;
    color: var(--color-muted, #6b6354);
    margin: 0;
    line-height: 1.45;
}

.admin-tile__desc code {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.75rem;
    background: var(--color-bg, #FAF7F2);
    padding: 0.05em 0.3em;
    border-radius: 3px;
}

.admin-tile__badge {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    background: var(--color-teal, #1B6B77);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-family: var(--font-sans, Inter, system-ui, sans-serif);
    white-space: nowrap;
}

.admin-tile__badge--alert {
    background: var(--color-error, #8B2020);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Landing pages — homepage at "/" and the visual concept previews under "/landing/*"
   Built with the same warm cream + teal palette as the chat shell.
   ───────────────────────────────────────────────────────────────────────────── */

.landing-shell {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    max-width: 900px;
    margin: 0 auto;
    background: var(--color-bg);
    box-shadow:
        0 0 0 1px rgba(44, 36, 22, 0.04),
        -24px 0 48px rgba(44, 36, 22, 0.03),
        24px 0 48px rgba(44, 36, 22, 0.03);
}

[data-theme="dark"] .landing-shell {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.04),
        -24px 0 48px rgba(0, 0, 0, 0.2),
        24px 0 48px rgba(0, 0, 0, 0.2);
}

.landing-topbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem var(--space-md);
    border-bottom: 1px solid transparent;
}

.landing-topbar .brand--link {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.landing-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.landing-topbar-link {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 999px;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.landing-topbar-link:hover {
    color: var(--color-teal);
    background: var(--color-teal-light);
}

.landing-main {
    flex: 1;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-md) var(--space-md) var(--space-xl);
    display: flex;
    flex-direction: column;
}

.landing-footer {
    flex-shrink: 0;
    text-align: center;
}

.landing-footer .site-footer-row {
    border-top: none;
    padding-top: var(--space-sm);
}

/* Common: username input form */
.landing-form {
    width: 100%;
    margin: 0;
}

.landing-input-wrap {
    display: flex;
    align-items: stretch;
    gap: var(--space-xs);
    background: var(--color-surface);
    border: 1.5px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: 6px;
    padding-left: var(--space-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: 0 2px 12px rgba(44, 36, 22, 0.08), 0 1px 3px rgba(44, 36, 22, 0.06);
}

[data-theme="dark"] .landing-input-wrap {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.landing-input-wrap:focus-within {
    border-color: var(--color-teal);
}

.landing-input-wrap--invalid {
    border-color: var(--color-error);
}

.landing-input-prefix {
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: 1rem;
    padding-right: 2px;
    user-select: none;
}

.landing-input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    font-family: var(--font-sans);
    font-size: 1rem;
    color: var(--color-text);
    line-height: 1.5;
    padding: var(--space-sm) 0;
    min-width: 0;
}

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

.landing-submit {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 0 var(--space-lg);
    background: var(--color-teal);
    color: var(--color-user-text);
    border: none;
    border-radius: calc(var(--border-radius-lg) - 4px);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

[data-theme="dark"] .landing-submit {
    color: #0f1115;
}

.landing-submit:hover:not(:disabled) {
    background: var(--color-teal-dark);
}

.landing-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.landing-submit__arrow {
    transform: translateY(0.5px);
}

/* Returning-visitor state: a one-tap "Continue as @username" shown in place of the
   entry form when we already know the handle. data-known-user is set before paint
   (no-FOUC) by an inline script; landing.js fills in the name and link. */
.landing-returning {
    width: 100%;
    margin: 0;
    /* Hidden until a known handle is detected; shown via the data-known-user rule below. Driven purely
       by CSS (no [hidden] attribute) so a degraded-JS render is never visually shown yet aria-hidden. */
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-md);
}

.landing-returning-lead {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

.landing-continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-teal);
    color: var(--color-user-text);
    border-radius: var(--border-radius-lg);
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(44, 36, 22, 0.08), 0 1px 3px rgba(44, 36, 22, 0.06);
    transition: background-color var(--transition-fast);
}

.landing-continue:hover {
    background: var(--color-teal-dark);
}

[data-theme="dark"] .landing-continue {
    color: #0f1115;
}

.landing-continue__name {
    font-weight: 700;
}

.landing-switch-link {
    align-self: center;
    background: none;
    border: none;
    border-bottom: 1px dashed var(--color-border);
    padding: 0 0 1px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.landing-switch-link:hover {
    color: var(--color-teal);
    border-bottom-color: var(--color-teal);
}

/* When the handle is known (flag set pre-paint by the head script and maintained by landing.js),
   swap the form for the returning block. The id selector outweighs the base .landing-returning rule. */
html[data-known-user="1"] #landingHandleForm {
    display: none;
}

html[data-known-user="1"] #landingReturning {
    display: flex;
}

.landing-status {
    margin-top: var(--space-sm);
    min-height: 1.25rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

/* Collapse the status line while it carries no message so the example
   players sit directly beneath the search box; it expands back in place
   (adjacent to the input) once validation feedback is shown. */
.landing-status:empty {
    display: none;
}

.landing-status--error {
    color: var(--color-error);
}

.landing-fineprint {
    margin-top: var(--space-md);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.55;
}

.landing-fineprint a {
    color: var(--color-text-muted);
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    text-underline-offset: 2px;
}

.landing-fineprint a:hover {
    color: var(--color-teal);
}

/* Popular-player example links beneath the username search. Subtle by
   design — they're a fallback for visitors without their own account,
   not a primary call to action. */
.landing-examples {
    margin-top: var(--space-md);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.55;
}

.landing-example-link {
    color: var(--color-text-muted);
    text-decoration: underline;
    text-decoration-color: var(--color-border);
    text-underline-offset: 2px;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.landing-example-link:hover {
    color: var(--color-teal);
}

.landing-secondary-link {
    margin-top: var(--space-lg);
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.landing-secondary-link a {
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 1px dashed var(--color-border);
    padding-bottom: 1px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.landing-secondary-link a:hover {
    color: var(--color-teal);
    border-bottom-color: var(--color-teal);
}

/* Coach avatar — used by the "-coach" landing variants which swap the
   knight brand mark for Chesswick himself. The PNG already has a transparent
   background with a soft chess-piece halo, so we don't add another frame —
   just a subtle border and shadow to seat it on the cream surface. */
.coach-avatar {
    display: block;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 12px rgba(44, 36, 22, 0.10);
    background: var(--color-surface);
}

[data-theme="dark"] .coach-avatar {
    border-color: rgba(94, 200, 212, 0.20);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.coach-avatar--card {
    width: 96px;
    height: 96px;
    margin: 0 auto var(--space-md);
}

.coach-avatar--pitch {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-md);
}

.coach-avatar--bubble {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    /* Slight optical lift so the portrait doesn't look pasted on. */
    box-shadow: 0 2px 8px rgba(27, 107, 119, 0.12);
}

.coach-avatar--foyer {
    width: 128px;
    height: 128px;
    margin: 0 auto var(--space-lg);
    border-width: 2px;
    border-color: var(--color-teal-light);
    box-shadow: 0 4px 18px rgba(44, 36, 22, 0.12);
}

[data-theme="dark"] .coach-avatar--foyer {
    border-color: rgba(94, 200, 212, 0.22);
    box-shadow: 0 4px 22px rgba(0, 0, 0, 0.45);
}

/* Concept preview strip — sits at the top of /landing/A, /landing/B, etc. */
.landing-preview-strip {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-xs) var(--space-md);
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.landing-preview-strip__back {
    color: var(--color-text-muted);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.landing-preview-strip__back:hover {
    color: var(--color-teal);
    background: var(--color-teal-light);
}

.landing-preview-strip__title {
    text-align: center;
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.9375rem;
    flex: 1;
}

.landing-preview-strip__hint {
    color: var(--color-text-muted);
    font-style: italic;
    flex-shrink: 0;
    text-align: right;
    min-width: 6rem;
}

@media (max-width: 520px) {
    .landing-preview-strip__hint { display: none; }
}

/* ── Concept A — "The Card" ─────────────────────────────────────────────── */
.concept-card-hero {
    margin: auto;
    text-align: center;
    padding: var(--space-xl) 0;
}

.concept-card-hero__mark {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-md);
}

.concept-card-hero__brand {
    font-family: var(--font-serif);
    font-size: 2.25rem;
    font-weight: 600;
    color: var(--color-teal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: var(--space-sm);
}

.concept-card-hero__lead {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    max-width: 32em;
    margin: 0 auto var(--space-xl);
}

/* ── Concept B — "The Greeting" ─────────────────────────────────────────── */
.concept-greeting {
    margin: auto 0;
    padding: var(--space-md) 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.concept-greeting-bubble {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.concept-greeting-avatar {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(145deg, var(--color-teal-light), var(--color-bg-alt));
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 8px rgba(27, 107, 119, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="dark"] .concept-greeting-avatar {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.concept-greeting-avatar img {
    width: 28px;
    height: 28px;
}

.concept-greeting-content {
    flex: 1;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-teal);
    border-radius: var(--border-radius-msg);
    border-top-left-radius: 4px;
    padding: var(--space-md) var(--space-lg);
    background-image: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-alt) 100%);
}

.concept-greeting-lead {
    font-family: var(--font-serif);
    font-size: 1.125rem;
    color: var(--color-text);
    margin-bottom: 0.5em;
    line-height: 1.45;
}

.concept-greeting-body {
    font-size: 0.9375rem;
    color: var(--color-text);
    line-height: 1.65;
}

.concept-greeting-form {
    /* The form sits below the bubble, indented to align with bubble content */
    padding-left: calc(44px + var(--space-md));
}

@media (max-width: 520px) {
    .concept-greeting-form { padding-left: 0; }
}

/* ── Concept C — "The Pitch" ─────────────────────────────────────────────── */
.concept-pitch-hero {
    text-align: center;
    padding: var(--space-xl) 0 var(--space-lg);
}

.concept-pitch-mark {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-md);
}

.concept-pitch-headline {
    font-family: var(--font-serif);
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin-bottom: var(--space-md);
    max-width: 22em;
    margin-left: auto;
    margin-right: auto;
}

.concept-pitch-headline em {
    color: var(--color-teal);
    font-style: italic;
}

.concept-pitch-sub {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    max-width: 30em;
    margin: 0 auto var(--space-xl);
}

.concept-pitch-points {
    display: grid;
    gap: var(--space-md);
    margin: var(--space-xl) 0 var(--space-lg);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-xl);
}

.concept-pitch-point {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    align-items: baseline;
    gap: var(--space-md);
}

.concept-pitch-point__bullet {
    color: var(--color-teal);
    font-weight: 700;
    font-family: var(--font-serif);
    font-size: 1.25rem;
    line-height: 1;
    transform: translateY(0.1em);
}

.concept-pitch-point__title {
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.15rem;
    line-height: 1.3;
}

.concept-pitch-point__body {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0;
}

/* ── Concept D — "The Foyer" ─────────────────────────────────────────────── */
.concept-foyer {
    text-align: center;
    padding: var(--space-xl) 0;
    margin: auto 0;
}

.concept-foyer__mark {
    width: 96px;
    height: 96px;
    margin: 0 auto var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-teal-light);
    border: 1px solid var(--color-border);
}

.concept-foyer__mark img {
    width: 56px;
    height: 56px;
}

.concept-foyer__brand {
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 600;
    color: var(--color-teal);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: var(--space-md);
}

.concept-foyer__epigraph {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.0625rem;
    color: var(--color-text);
    line-height: 1.6;
    max-width: 26em;
    margin: 0 auto var(--space-xl);
}

.concept-foyer__epigraph::before,
.concept-foyer__epigraph::after {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--color-border);
    margin: 1.25rem auto;
}

.concept-foyer__epigraph::before { margin-top: 0; }

.concept-foyer .landing-form {
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
}

/* ── B+C hybrid — used by the live homepage at "/" ───────────────────────── */
.concept-hybrid {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding: var(--space-md) 0;
}

.concept-hybrid-points {
    margin-top: var(--space-md);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
    display: grid;
    gap: var(--space-md);
}

/* ── Landing gallery — /landing tile index ──────────────────────────────── */
.landing-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

@media (min-width: 700px) {
    .landing-gallery {
        grid-template-columns: 1fr 1fr;
    }
}

.landing-gallery__tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-lg);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.landing-gallery__tile:hover {
    border-color: var(--color-teal);
    transform: translateY(-1px);
}

.landing-gallery__tile--featured {
    border-color: var(--color-teal);
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-teal-light) 140%);
}

.landing-gallery__badge {
    align-self: flex-start;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-teal);
    background: var(--color-teal-light);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
}

.landing-gallery__name {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
    line-height: 1.25;
}

.landing-gallery__name-suffix {
    color: var(--color-text-muted);
    font-style: italic;
    font-weight: 400;
    margin-left: 0.35rem;
}

.landing-gallery__pitch {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0;
    flex: 1;
}

.landing-gallery__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-teal);
    font-size: 0.875rem;
    font-weight: 600;
    margin-top: var(--space-sm);
}

.landing-gallery-meta {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.6;
}

.landing-gallery-meta strong {
    color: var(--color-text);
}

/* ── Dictionary section ─────────────────────────────────────────── */
.dict-page {
    max-width: 46rem;
    margin: 0 auto;
}

.dict-search {
    margin-bottom: var(--space-lg);
    position: relative;
}

.dict-search__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-xs);
}

.dict-search__row {
    display: flex;
    gap: var(--space-sm);
}

.dict-search__input {
    flex: 1;
    padding: 0.6rem 0.8rem;
    font-size: 1rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.dict-search__input:focus-visible {
    outline: 2px solid var(--color-teal);
    outline-offset: 1px;
}

.dict-search__submit {
    padding: 0.6rem 1.1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    background: var(--color-teal);
    border: 1px solid var(--color-teal);
    border-radius: 8px;
    cursor: pointer;
}

.dict-search__submit:hover {
    background: var(--color-teal-dark);
}

.dict-suggest {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0.25rem;
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.dict-suggest__item {
    padding: 0.45rem 0.6rem;
    font-size: 0.9375rem;
    color: var(--color-text);
    border-radius: 6px;
    cursor: pointer;
}

.dict-suggest__item.is-active,
.dict-suggest__item:hover {
    background: var(--color-teal-light);
}

.dict-az {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: var(--space-md);
}

.dict-az__link {
    min-width: 2rem;
    padding: 0.3rem 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-teal);
    text-decoration: none;
    border: 1px solid var(--color-border);
    border-radius: 6px;
}

.dict-az__link:hover,
.dict-az__link.is-active {
    background: var(--color-teal);
    color: #fff;
    border-color: var(--color-teal);
}

/* §5.1 hub — letters with no terms stay linked but read as secondary. */
.dict-az__link--empty {
    color: var(--color-text-muted);
    border-style: dashed;
    opacity: 0.7;
}

/* ── §5.1 Dictionary hub ─────────────────────────────────────────── */
.dict-hub-count {
    font-weight: 600;
    color: var(--color-teal);
}

.dict-hub-section {
    margin-top: var(--space-xl);
}

.dict-hub-section__heading {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--color-teal);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-xs);
    margin: 0 0 var(--space-md);
}

/* Category shortcut tiles (§5.4) */
.dict-cat-tiles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--space-sm);
}

.dict-cat-tile {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 0.9rem;
    text-decoration: none;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dict-cat-tile:hover,
.dict-cat-tile:focus-visible {
    background: var(--color-teal-light);
    border-color: var(--color-teal);
}

.dict-cat-tile__label {
    font-weight: 700;
    color: var(--color-teal);
}

.dict-cat-tile__count {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* Recently updated rail */
.dict-recent {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dict-recent__item {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-border);
}

.dict-recent__term {
    font-weight: 600;
    color: var(--color-teal);
    text-decoration: none;
}

.dict-recent__term:hover {
    text-decoration: underline;
}

.dict-recent__date {
    margin-left: auto;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* Featured-terms-per-letter grid */
.dict-letter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-md);
}

.dict-letter-card {
    padding: var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

.dict-letter-card__heading {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    margin: 0 0 var(--space-sm);
}

.dict-letter-card__heading a {
    color: var(--color-teal);
    text-decoration: none;
}

.dict-letter-card__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dict-letter-card__item + .dict-letter-card__item {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
}

.dict-letter-card__termline {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
}

.dict-letter-card__term {
    font-weight: 700;
    color: var(--color-teal);
    text-decoration: none;
}

.dict-letter-card__term:hover {
    text-decoration: underline;
}

.dict-letter-card__def {
    margin: 0.2rem 0 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.dict-letter-card__more a,
.dict-letter-card__empty a {
    color: var(--color-teal);
    text-decoration: none;
    font-weight: 600;
}

.dict-letter-card__more,
.dict-letter-card__empty {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* Category pill (links to the category page) */
.dict-category-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    margin-left: 0.35rem;
    background: var(--color-teal-light);
    color: var(--color-teal-dark);
    border: 1px solid var(--color-border);
}

.dict-category-badge:hover {
    background: var(--color-teal);
    color: #fff;
}

.dict-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: var(--space-lg);
}

.dict-tag {
    padding: 0.25rem 0.6rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-teal);
    text-decoration: none;
    background: var(--color-teal-light);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

.dict-tag:hover,
.dict-tag.is-active {
    background: var(--color-teal);
    color: #fff;
    border-color: var(--color-teal);
}

.dict-results__heading {
    font-size: 1.05rem;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-xs);
    margin-bottom: var(--space-md);
}

.dict-results__count {
    color: var(--color-text-muted);
    font-weight: 400;
}

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

.dict-list {
    margin: 0;
}

.dict-list__item {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.dict-list__term {
    font-weight: 700;
    font-size: 1.05rem;
}

.dict-list__term a {
    color: var(--color-teal);
    text-decoration: none;
}

.dict-list__term a:hover {
    text-decoration: underline;
}

.dict-list__def {
    margin: 0.15rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

/* ── Dictionary entry page ──────────────────────────────────────── */
.dict-entry {
    max-width: min(52rem, 100%);
    margin: 0 auto;
}

.dict-entry__back {
    margin-bottom: var(--space-md);
    font-size: 0.875rem;
}

.dict-entry__back a {
    color: var(--color-teal);
    text-decoration: none;
}

.dict-entry__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    color: var(--color-text);
    margin: 0;
}

.dict-entry__short {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin: var(--space-xs) 0 0;
}

.dict-entry__aliases {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: var(--space-sm);
}

.dict-entry__aliases-label {
    font-weight: 600;
}

/* ── Term page §5.3 ─────────────────────────────────────────────────
   Sections rendered conditionally based on which structured fields and
   body H2s are present. The 17-section template lives in Term.cshtml. */

.dict-breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.dict-breadcrumb li + li::before {
    content: "/";
    margin-right: 0.4rem;
    color: var(--color-border);
}

.dict-breadcrumb a {
    color: var(--color-teal);
    text-decoration: none;
}

.dict-breadcrumb [aria-current="page"] {
    color: var(--color-text);
    font-weight: 600;
}

/* v1 spec §10 — Deprecation banner for archived terms */
.dict-archived-banner {
    margin: var(--space-md) 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-warning-bg, #fff8e1);
    border: 1px solid var(--color-warning-border, #f0c040);
    border-radius: 6px;
    font-size: 0.925rem;
}

.dict-archived-banner__text {
    margin: 0;
    color: var(--color-text);
}

.dict-archived-banner__text a {
    color: var(--color-teal);
}

.dict-archived-banner__link {
    display: inline-block;
    margin-top: var(--space-xs);
    color: var(--color-teal);
    font-weight: 600;
}

.dict-keyfacts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-lg);
    margin: var(--space-md) 0 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.03));
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 0.875rem;
}

.dict-keyfacts__cell {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.dict-keyfacts__cell dt {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.dict-keyfacts__cell dd {
    margin: 0;
    color: var(--color-text);
}

.dict-keyfacts__link {
    color: var(--color-teal);
    text-decoration: none;
    font-weight: 600;
}

.dict-keyfacts .dict-difficulty-badge {
    margin-left: 0;
}

/* Representative image (#359) — rendered below the key-facts strip. Constrained so a large
   source asset never overflows the column; the figure keeps it centred and rounded. */
.dict-entry__hero {
    margin: var(--space-lg) 0 0;
}

.dict-entry__hero-img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.dict-takeaways {
    margin: var(--space-lg) 0 0;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-surface-muted, rgba(0, 0, 0, 0.03));
    border-left: 4px solid var(--color-teal);
    border-radius: 4px;
}

.dict-takeaways__heading {
    margin: 0 0 var(--space-sm);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text);
}

.dict-takeaways__list {
    margin: 0;
    padding-left: 1.2rem;
}

.dict-takeaways__list li {
    margin: 0.3rem 0;
    line-height: 1.5;
}

.dict-toc {
    margin: var(--space-lg) 0 0;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    font-size: 0.9375rem;
}

.dict-toc__heading {
    margin: 0 0 var(--space-xs);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}

.dict-toc__list {
    margin: 0;
    padding-left: 1.4rem;
}

.dict-toc__list li {
    margin: 0.25rem 0;
}

.dict-toc__list a {
    color: var(--color-teal);
    text-decoration: none;
}

.dict-toc__list a:hover,
.dict-toc__list a:focus {
    text-decoration: underline;
}

.dict-faq {
    margin-top: var(--space-xl);
}

.dict-faq__list {
    margin: var(--space-sm) 0 0;
}

.dict-faq__item {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.dict-faq__item:last-child {
    border-bottom: none;
}

.dict-faq__question {
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 0.35rem;
}

.dict-faq__answer {
    margin: 0;
    color: var(--color-text);
    line-height: 1.6;
}

.dict-sources {
    margin-top: var(--space-xl);
}

.dict-sources__list {
    margin: var(--space-sm) 0 0;
    padding-left: 1.4rem;
    font-size: 0.9375rem;
}

.dict-sources__list li {
    margin: 0.3rem 0;
}

.dict-sources__list a {
    color: var(--color-teal);
    text-decoration: none;
    font-weight: 500;
}

.dict-entry__reviewers {
    margin: 0.25rem 0 0;
}

.dict-entry__reviewer strong {
    color: var(--color-text);
}

/* §5.3 §17 — "Discuss with Chesswick" chat handoff CTA (issue #117) */
.dict-discuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background: linear-gradient(145deg, var(--color-teal-light), var(--color-bg-alt));
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
}

.dict-discuss__text {
    flex: 1 1 14rem;
    min-width: 0;
}

.dict-discuss__title {
    font-family: var(--font-serif);
    color: var(--color-teal);
    font-size: 1.2rem;
    line-height: 1.3;
    margin: 0;
}

.dict-discuss__lead {
    margin: 0.35rem 0 0;
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.dict-discuss__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.7rem 1.1rem;
    background: var(--color-teal);
    color: #fff;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    border-radius: var(--border-radius);
    transition: background-color 0.15s ease;
}

.dict-discuss__cta:hover,
.dict-discuss__cta:focus-visible {
    background: var(--color-teal-dark);
    color: #fff;
}

.dict-entry__body {
    margin-top: var(--space-lg);
    font-size: 1rem;
    line-height: 1.7;
}

/* Markdown body (same semantics as chat .message-content, without bubble chrome) */
.dict-entry__body p {
    margin: 0 0 1rem;
}

.dict-entry__body p:last-child {
    margin-bottom: 0;
}

.dict-entry__body h1,
.dict-entry__body h2,
.dict-entry__body h3,
.dict-entry__body h4 {
    font-family: var(--font-serif);
    color: var(--color-teal);
    line-height: 1.3;
    margin: 1.35em 0 0.5em;
}

.dict-entry__body h1 { font-size: 1.5rem; }
.dict-entry__body h2 { font-size: 1.25rem; }
.dict-entry__body h3 { font-size: 1.1rem; }
.dict-entry__body h4 { font-size: 1rem; }

.dict-entry__body h1:first-child,
.dict-entry__body h2:first-child,
.dict-entry__body h3:first-child {
    margin-top: 0;
}

.dict-entry__body ul,
.dict-entry__body ol {
    margin: 0 0 1rem;
    padding-left: 1.5em;
}

.dict-entry__body li {
    margin-bottom: 0.35em;
}

.dict-entry__body li > ul,
.dict-entry__body li > ol {
    margin-top: 0.35em;
    margin-bottom: 0;
}

.dict-entry__body blockquote {
    margin: 1rem 0;
    padding: 0.5rem 0 0.5rem var(--space-md);
    border-left: 3px solid var(--color-teal);
    color: var(--color-text-muted);
    font-style: italic;
}

.dict-entry__body strong {
    font-weight: 600;
    color: var(--color-text);
}

.dict-entry__body em {
    font-style: italic;
}

.dict-entry__body a {
    color: var(--color-teal);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--color-teal) 35%, transparent);
}

.dict-entry__body a:hover {
    text-decoration-color: var(--color-teal);
}

/* Wiki-link cross-references [[slug]] — subtle dotted underline to distinguish from external links */
.dict-xref,
.article-xref {
    color: var(--color-teal);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: color-mix(in srgb, var(--color-teal) 50%, transparent);
}

.dict-xref:hover,
.article-xref:hover {
    text-decoration-style: solid;
    text-decoration-color: var(--color-teal);
}

.dict-entry__body code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--color-bg-alt);
    padding: 0.12em 0.35em;
    border-radius: 4px;
    border: 1px solid var(--color-border);
}

.dict-entry__body pre {
    background: #1e1e2e;
    border-radius: var(--border-radius);
    padding: var(--space-md);
    overflow-x: auto;
    margin: 1rem 0;
    border: 1px solid #313244;
}

.dict-entry__body pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.85em;
    color: #cdd6f4;
}

/* CVN blocks are replaced by chesswick-diagram.js — avoid a JSON code block flash */
.dict-entry__body pre:has(> code.language-chesswick) {
    background: transparent;
    border: none;
    padding: 0;
    margin: 1.25rem 0;
    overflow: visible;
}

.dict-entry__body pre code.language-chesswick {
    display: block;
    min-height: 0;
    color: inherit;
    background: transparent;
    border: none;
    padding: 0;
    white-space: pre-wrap;
}

.dict-entry__body .chesswick-diagram {
    margin: 1.25rem 0;
}

.dict-entry__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9375rem;
}

.dict-entry__body th,
.dict-entry__body td {
    border: 1px solid var(--color-border);
    padding: var(--space-xs) var(--space-sm);
    text-align: left;
}

.dict-entry__body th {
    background: var(--color-teal-light);
    color: var(--color-teal-dark);
    font-weight: 600;
}

.dict-entry__body hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1.5rem 0;
}

.dict-entry__tags {
    margin-top: var(--space-lg);
}

.dict-entry__section-heading {
    font-size: 1.05rem;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-xs);
}

.dict-entry__related {
    margin-top: var(--space-xl);
}

.dict-related-list {
    list-style: none;
    padding: 0;
    margin: var(--space-sm) 0 0;
}

.dict-related-list li {
    padding: 0.3rem 0;
}

.dict-related-list a {
    color: var(--color-teal);
    text-decoration: none;
    font-weight: 600;
}

.dict-related-list__gloss {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

.dict-entry__provenance {
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.dict-entry__byline {
    margin: 0;
}

.dict-entry__dates {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin: var(--space-sm) 0 0;
}

.dict-entry__dates dt {
    font-weight: 600;
    color: var(--color-text);
}

.dict-entry__dates dd {
    margin: 0;
}

/* ── Dictionary category page ────────────────────────────────────── */
.dict-category-band {
    margin-top: var(--space-xl);
}

.dict-category-band__heading {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 2px solid var(--color-border);
}

.dict-difficulty-badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
    margin-left: 0.35rem;
    text-decoration: none;
}

/* The badge is now an anchor to the difficulty archive; the per-level modifiers set its
   colour, and we restore an underline only on interaction so it reads as a link. */
a.dict-difficulty-badge:hover,
a.dict-difficulty-badge:focus-visible {
    text-decoration: underline;
}

/* Sibling-band links on the difficulty archive itself. */
.dict-difficulty-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 var(--space-md);
}

.dict-difficulty-nav .dict-difficulty-badge {
    margin-left: 0;
}

.dict-difficulty-badge--beginner {
    background: #d4edda;
    color: #1a5c2e;
}

.dict-difficulty-badge--intermediate {
    background: #fff3cd;
    color: #7a5800;
}

.dict-difficulty-badge--advanced {
    background: #fde8e8;
    color: #7a1a1a;
}

/* ── Admin dictionary form helpers ──────────────────────────────── */
.admin-textarea {
    width: 100%;
    max-width: 56rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
}

.admin-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: var(--space-sm);
    font-size: 0.875rem;
}

.admin-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    margin-top: var(--space-md);
}

.admin-button--small {
    font-size: 0.8125rem;
    padding: 0.3rem 0.6rem;
}

.admin-field-row {
    margin-bottom: var(--space-md);
}

.admin-field-row--stack .admin-label {
    margin-bottom: var(--space-xs);
}

.admin-field-row__controls {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

.admin-field-row__controls--top {
    align-items: flex-start;
}

.admin-field-row__controls .admin-input,
.admin-field-row__controls .admin-textarea {
    flex: 1;
    min-width: 0;
}

.admin-field-row__label-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.admin-field-row__inline-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.admin-body-preview {
    margin-top: var(--space-sm);
    padding: var(--space-md);
    border: 1px solid var(--border-subtle, #d8dde6);
    border-radius: 8px;
    background: var(--surface-elevated, #fafbfc);
    max-height: 32rem;
    overflow: auto;
}

.admin-dict-full-preview {
    margin-bottom: 1.5rem;
    border: 2px solid var(--border-subtle, #d8dde6);
    border-radius: 8px;
    overflow: hidden;
}

.admin-dict-full-preview__label {
    padding: 0.4rem 1rem;
    background: var(--surface-elevated, #f0f2f5);
    border-bottom: 1px solid var(--border-subtle, #d8dde6);
    font-size: 0.8125rem;
    color: var(--text-secondary, #6b7280);
    letter-spacing: 0.03em;
}

.admin-dict-full-preview__content {
    padding: 2rem;
}

.admin-button--danger {
    background: #9a2c2c;
    color: #fff;
    border: none;
    margin-top: 0;
}

.admin-button--danger:hover {
    background: #7a1f1f;
}

.admin-status-badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-status-badge--published {
    background: #d4edda;
    color: #1a5c2e;
}

.admin-status-badge--draft {
    background: #fff3cd;
    color: #7a5800;
}

.admin-status-badge--archived {
    background: #e9ecef;
    color: #495057;
}

.admin-char-count,
.admin-word-count {
    font-size: 0.78rem;
    color: var(--color-text-muted, #5c574e);
    white-space: nowrap;
}

.admin-char-count--warn,
.admin-word-count--warn {
    color: #9a2c2c;
    font-weight: 600;
}

.admin-dict-filter-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.admin-dict-filter {
    max-width: 22rem;
    margin-top: 0;
}

.dict-th-sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.dict-th-sortable:hover {
    background: var(--color-bg, #f4f1ea);
}

.dict-sort-indicator {
    display: inline-block;
    width: 1ch;
    font-size: 0.72em;
    opacity: 0.65;
    margin-left: 0.2em;
}

.dict-row-actions {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.dict-row-actions .admin-button,
.dict-row-actions a.admin-button {
    margin-top: 0;
    white-space: nowrap;
    padding: 0.3rem 0.55rem;
}

.dict-term-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-teal-dark, #1B6B77);
    font-weight: 600;
    text-decoration: none;
}

.dict-term-link:hover,
.dict-term-link:focus-visible {
    text-decoration: underline;
}

.dict-term-link__icon {
    font-size: 0.84em;
}

.dict-term-link__disabled {
    display: inline-flex;
    color: inherit;
    font-weight: 600;
}

.dict-bulk-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.875rem;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-teal, #1B6B77);
    border-radius: 6px;
    margin-bottom: 0.625rem;
    flex-wrap: wrap;
}

.dict-bulk-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-teal, #1B6B77);
    min-width: 6rem;
}

.dict-bulk-form {
    margin: 0;
}

.dict-bulk-note {
    margin-left: auto;
    font-size: 0.72rem;
}

.dict-filter-row th {
    padding: 0.2rem 0.4rem;
    background: var(--color-bg, #FAF7F2);
}

.dict-col-filter {
    width: 100%;
    padding: 0.2rem 0.35rem;
    font-size: 0.75rem;
    font-family: inherit;
    border: 1px solid var(--color-border, #d8d2c6);
    border-radius: 4px;
    background: var(--color-surface, #fff);
    color: inherit;
    box-sizing: border-box;
    min-width: 0;
}

.dict-col-filter:focus {
    outline: none;
    border-color: var(--color-teal, #1B6B77);
    box-shadow: 0 0 0 2px rgba(27, 107, 119, 0.15);
}

#dict-terms-table {
    min-width: 0;
    table-layout: fixed;
}

#dict-terms-table th,
#dict-terms-table td {
    overflow-wrap: anywhere;
}

#dict-terms-table th:nth-child(2),
#dict-terms-table td:nth-child(2) {
    width: 13rem;
}

#dict-terms-table th:nth-child(3),
#dict-terms-table td:nth-child(3) {
    width: 10rem;
}

#dict-terms-table th:nth-child(10),
#dict-terms-table td:nth-child(10) {
    width: 5.75rem;
}

#dict-terms-table th:nth-child(11),
#dict-terms-table td:nth-child(11) {
    width: 8.75rem;
}

#dict-terms-table th:nth-child(12),
#dict-terms-table td:nth-child(12) {
    width: 13.5rem;
}

.admin-section:has(#dict-terms-table) {
    overflow-x: visible;
}

@media (max-width: 70rem) {
    #dict-terms-table {
        min-width: 64rem;
    }

    .admin-section:has(#dict-terms-table) {
        overflow-x: auto;
    }
}

.dict-th-check,
.dict-td-check {
    width: 2rem;
    text-align: center;
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}

/* ── Dictionary editor: classification + repeatable rows ─────────── */
.admin-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    max-width: 56rem;
}

.admin-repeatable__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.admin-repeatable__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

.admin-repeatable__row .admin-repeatable__input {
    flex: 1 1 14rem;
    min-width: 0;
    max-width: none;
}

.admin-repeatable__row--stack {
    flex-direction: column;
    align-items: stretch;
}

.admin-repeatable__row--stack .admin-repeatable__input {
    flex: 1 1 auto;
    width: 100%;
}

/* ── Admin dictionary tabs (Terms vs Most-wanted) ──────────────────── */

.admin-dict-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--color-border, #d8d2c6);
    margin-bottom: 1rem;
    padding-bottom: 0;
}

.admin-dict-tab {
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 0.45rem 0.9rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted, #5c574e);
    cursor: pointer;
    border-radius: 4px 4px 0 0;
}

.admin-dict-tab:hover {
    color: var(--color-teal, #1B6B77);
    background: var(--color-teal-light, #e6f6f3);
}

.admin-dict-tab--active {
    color: var(--color-teal, #1B6B77);
    border-bottom-color: var(--color-teal, #1B6B77);
    font-weight: 600;
    background: transparent;
}

.admin-dict-tab-count {
    font-size: 0.72em;
    font-weight: 600;
    opacity: 0.7;
    margin-left: 0.3em;
}

.admin-dict-panel[hidden] {
    display: none !important;
}

/* ── Admin dictionary status filter pills (Published / Draft / Archived etc) ── */
.admin-dict-status-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.6rem;
    align-items: center;
}

.admin-dict-status-btn {
    appearance: none;
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #d8d2c6);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text-muted, #5c574e);
    cursor: pointer;
    line-height: 1.1;
    transition: all 0.1s ease;
}

.admin-dict-status-btn:hover {
    border-color: var(--color-teal, #1B6B77);
    color: var(--color-teal, #1B6B77);
}

.admin-dict-status-btn.active,
.admin-dict-status-btn[aria-selected="true"] {
    background: var(--color-teal, #1B6B77);
    border-color: var(--color-teal, #1B6B77);
    color: #fff;
    font-weight: 600;
}

.admin-dict-status-btn .count {
    font-size: 0.9em;
    font-weight: 600;
    opacity: 0.85;
    margin-left: 0.15em;
}

/* ── Articles section ───────────────────────────────────────────── */

/* Index list (used on /articles and /articles/comparisons) */
.article-index-section {
    margin-bottom: var(--space-xl);
}

.article-index-section h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
}

.article-index-section h2 a {
    color: inherit;
    text-decoration: none;
}

.article-index-section h2 a:hover {
    color: var(--color-teal);
}

.article-index {
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-index__item {
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.article-index__item:first-child {
    border-top: 1px solid var(--color-border);
}

.article-index__link {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--color-teal);
    text-decoration: none;
}

.article-index__link:hover {
    text-decoration: underline;
}

.article-index__summary {
    margin: 0.2rem 0 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

/* Shared markdown prose container */
.markdown-body {
    line-height: 1.75;
}

.markdown-body p { margin: 0 0 var(--space-md); }
.markdown-body p:last-child { margin-bottom: 0; }
.markdown-body ul,
.markdown-body ol { margin: 0 0 var(--space-md); padding-left: 1.5rem; }
.markdown-body li + li { margin-top: 0.25rem; }
.markdown-body strong { font-weight: 700; }
.markdown-body em { font-style: italic; }
.markdown-body code {
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
    font-size: 0.875em;
    background: var(--color-bg-alt);
    border-radius: 3px;
    padding: 0.1em 0.3em;
}

/* Essay article */
.article-essay {
    max-width: min(52rem, 100%);
    margin: 0 auto;
}

.article-essay__header {
    margin-bottom: var(--space-xl);
}

.article-essay__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    color: var(--color-text);
    margin: var(--space-sm) 0 var(--space-xs);
    line-height: 1.25;
}

.article-essay__summary {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin: var(--space-xs) 0 var(--space-sm);
}

.article-essay__byline {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
}

.article-essay__body {
    font-size: 1.0625rem;
}

/* Comparison article */
.article-comparison {
    max-width: min(60rem, 100%);
    margin: 0 auto;
}

.article-comparison__header {
    margin-bottom: var(--space-lg);
}

.article-comparison__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    color: var(--color-text);
    margin: var(--space-sm) 0 var(--space-xs);
    line-height: 1.25;
}

.article-comparison__summary {
    font-size: 1.1rem;
    color: var(--color-text-muted);
    margin: var(--space-xs) 0 0;
}

.article-comparison__intro {
    margin-bottom: var(--space-lg);
    font-size: 1.0625rem;
}

/* vs label row */
.article-comparison__labels {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.article-comparison__label {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    border-radius: 6px;
    font-weight: 700;
    font-size: 1.05rem;
    text-align: center;
}

.article-comparison__label--left {
    background: var(--color-teal-light);
    color: var(--color-teal-dark);
}

.article-comparison__label--right {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.article-comparison__label-vs {
    font-weight: 700;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Head-to-head table */
.article-comparison__table-section {
    margin-bottom: var(--space-xl);
    overflow-x: auto;
}

.article-comparison__table-section h2 {
    font-size: 1.25rem;
    margin: 0 0 var(--space-sm);
}

.article-comparison__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.article-comparison__table th,
.article-comparison__table td {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    text-align: left;
}

.article-comparison__table thead th {
    background: var(--color-bg-alt);
    font-weight: 700;
}

.article-comparison__table tbody tr:nth-child(even) td,
.article-comparison__table tbody tr:nth-child(even) th {
    background: var(--color-bg-alt);
}

/* When-to-use section */
.article-comparison__when {
    margin-bottom: var(--space-xl);
}

.article-comparison__when h2 {
    font-size: 1.25rem;
    margin: 0 0 var(--space-md);
}

.article-comparison__when-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.article-comparison__when-card {
    padding: var(--space-md);
    border-radius: 8px;
    border: 1px solid var(--color-border);
}

.article-comparison__when-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 var(--space-sm);
}

.article-comparison__when-card--left {
    background: var(--color-teal-light);
    border-color: color-mix(in srgb, var(--color-teal) 20%, transparent);
}

.article-comparison__when-card--right {
    background: var(--color-bg-alt);
}

.article-comparison__footer {
    margin-top: var(--space-xl);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border);
}

.article-comparison__byline {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
}

@media (max-width: 36rem) {
    .article-comparison__when-grid {
        grid-template-columns: 1fr;
    }

    .article-comparison__labels {
        flex-direction: column;
    }
}

/* ── Opening explorer (/openings, /openings/explore, /openings/collections) ──────────── */
.op-search {
    display: flex;
    gap: var(--space-sm);
    margin: 0 0 var(--space-lg);
    flex-wrap: wrap;
}
.op-search__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.op-search__input {
    flex: 1 1 16rem;
    min-width: 0;
    padding: 0.7rem 0.9rem;
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}
.op-search__input:focus {
    outline: 2px solid var(--color-teal);
    outline-offset: 1px;
    border-color: var(--color-teal);
}
.op-search__btn {
    padding: 0.7rem 1.2rem;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--color-teal);
    border: 1px solid var(--color-teal);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background var(--transition-base);
}
.op-search__btn:hover { background: var(--color-teal-dark); }

.op-explore-cta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin: 0 0 var(--space-xl);
    padding: var(--space-md) var(--space-lg);
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-teal-light);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    transition: border-color var(--transition-base), transform var(--transition-base);
}
.op-explore-cta:hover {
    border-color: var(--color-teal);
    transform: translateY(-1px);
}
.op-explore-cta__icon { font-size: 1.75rem; line-height: 1; color: var(--color-teal); }
.op-explore-cta__text { flex: 1; }
.op-explore-cta__text strong { display: block; font-size: 1.05rem; }
.op-explore-cta__text span { color: var(--color-text-muted); font-size: 0.9rem; }
.op-explore-cta__arrow { font-size: 1.25rem; color: var(--color-teal); }

.op-section { margin-top: var(--space-xl); }
.op-group { margin-bottom: var(--space-lg); }
.op-group__heading { font-family: var(--font-serif); font-size: 1.15rem; margin: 0 0 0.15rem; }
.op-group__caption { margin: 0 0 var(--space-sm); color: var(--color-text-muted); font-size: 0.9rem; }
.op-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-sm);
}
.op-card { margin: 0; }
.op-card__link {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    height: 100%;
    padding: 0.75rem 0.9rem;
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: border-color var(--transition-base), transform var(--transition-base);
}
.op-card__link:hover { border-color: var(--color-teal); transform: translateY(-1px); }
.op-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.op-card__name { font-weight: 600; }
.op-card__eco { font-family: var(--font-mono); font-size: 0.72rem; color: var(--color-text-muted); flex: none; }
.op-card__blurb { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.4; }

.op-shelves {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--space-md);
}
.op-shelf {
    display: flex;
    flex-direction: column;
    padding: var(--space-md);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
}
.op-shelf__title { font-family: var(--font-serif); font-size: 1.1rem; margin: 0 0 0.1rem; }
.op-shelf__title a { text-decoration: none; color: var(--color-text); }
.op-shelf__title a:hover { color: var(--color-teal); }
.op-shelf__tagline { margin: 0 0 var(--space-sm); color: var(--color-text-muted); font-size: 0.88rem; }
.op-chips {
    list-style: none;
    margin: 0 0 var(--space-sm);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.op-chip {
    display: inline-block;
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
    text-decoration: none;
    color: var(--color-teal-dark);
    background: var(--color-teal-light);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    transition: border-color var(--transition-base);
}
.op-chip:hover { border-color: var(--color-teal); }
.op-shelf__more { margin-top: auto; font-size: 0.85rem; font-weight: 600; text-decoration: none; color: var(--color-teal); }

/* Interactive tree */
.op-tree { margin-top: var(--space-lg); }
.op-tree__board { margin: 0 auto var(--space-lg); max-width: 22rem; }
.op-tree__named {
    margin: 0 0 var(--space-lg);
    padding: var(--space-md);
    background: var(--color-teal-light);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}
.op-tree__named strong { font-size: 1.05rem; }
.op-tree__named-link { display: inline-block; margin-top: 0.3rem; font-weight: 600; color: var(--color-teal); text-decoration: none; }
.op-tree__prompt { margin: 0 0 var(--space-sm); font-weight: 600; }
.op-moves {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: var(--space-sm);
}
.op-move {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    padding: 0.6rem 0.8rem;
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    transition: border-color var(--transition-base), transform var(--transition-base);
}
.op-move:hover { border-color: var(--color-teal); transform: translateY(-1px); }
.op-move__san { font-family: var(--font-mono); font-weight: 600; color: var(--color-teal-dark); flex: none; }
.op-move__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-move__count { flex: none; font-size: 0.75rem; color: var(--color-text-muted); }
.op-tree__more { margin-top: var(--space-md); }
.op-tree__more summary { cursor: pointer; font-weight: 600; color: var(--color-teal); }
.op-tree__more .op-moves { margin-top: var(--space-sm); }

.op-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
    margin: 0 0 var(--space-md);
    font-size: 0.85rem;
}
.op-crumbs a { text-decoration: none; color: var(--color-teal); }
.op-crumbs__sep,
.op-crumbs__current { color: var(--color-text-muted); }

.op-variations { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }

@media (max-width: 600px) {
    .op-grid,
    .op-shelves,
    .op-moves { grid-template-columns: 1fr; }
}

/* ── Contributor profile photos ─────────────────────────────────────────── */

.contributor-profile__header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.contributor-profile__photo {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border);
    background: var(--color-surface-elevated);
    flex-shrink: 0;
}

.contributor-profile__heading { min-width: 0; }

/* External profile links (sameAs) on the public profile page (issue #487). */
.contributor-profile__links {
    margin-top: var(--space-lg);
}

.contributor-profile__links-heading {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--color-teal);
    margin-bottom: var(--space-sm);
}

.contributor-profile__link-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.contributor-profile__link {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-elevated);
    font-size: 0.9rem;
    text-decoration: none;
}

.contributor-profile__link:hover,
.contributor-profile__link:focus {
    border-color: var(--color-teal);
}

/* Contributors index — avatar + text rows */
.contributor-list { list-style: none; margin: 0; padding: 0; }

.contributor-list__item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-border);
}

.contributor-list__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border);
    background: var(--color-surface-elevated);
    flex-shrink: 0;
}

.contributor-list__text { min-width: 0; }

/* On-page "About the author / reviewer" bio cards (article + dictionary term pages, issue #486). */
.contributor-bios {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.contributor-bios__heading {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    color: var(--color-teal);
    margin-bottom: var(--space-sm);
}

.contributor-bios__heading:not(:first-child) {
    margin-top: var(--space-lg);
}

.contributor-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
}

.contributor-card__photo {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border);
    background: var(--color-bg-alt);
    flex-shrink: 0;
}

.contributor-card__body { min-width: 0; }

.contributor-card__name {
    margin: 0 0 var(--space-xs);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

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

.contributor-card__bio {
    margin: 0 0 var(--space-xs);
    color: var(--color-text);
}

.contributor-card__more {
    margin: 0;
    font-size: 0.9rem;
}

/* Admin edit — current-photo preview */
.admin-contrib-photo-preview {
    display: block;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--color-border);
    margin-bottom: 0.5rem;
}