/* ==========================================================================
   Premium finish — loaded LAST on every page (includes/header.php).

   One shared layer of depth and typography over the existing styles:
   display serif for headings, a crisp UI face for controls, layered
   surfaces with a top highlight and soft shadow, sculpted buttons, inset
   fields with an accent focus ring, and a glassy tool chrome.

   Every colour still derives from the eight theme tokens in site.css
   (--bg, --bg-raised, --bg-card, --border, --text, --text-dim, --accent,
   --accent-soft), so each theme gets the same finish in its own palette.
   ========================================================================== */

:root {
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --radius: 14px;
    --radius-sm: 10px;

    /* Surfaces: a faint top-lit gradient over the theme's card colour */
    --surface: linear-gradient(180deg, color-mix(in srgb, var(--bg-card) 93%, #fff 7%) 0%, var(--bg-card) 42%);
    --surface-raised: linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 92%, #fff 8%) 0%, var(--bg-raised) 50%);
    --field: color-mix(in srgb, var(--bg) 70%, #000 30%);
    --edge: color-mix(in srgb, var(--border) 80%, transparent);
    --hairline: rgba(255, 255, 255, 0.055);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px -6px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.28), 0 16px 36px -12px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.3), 0 30px 70px -18px rgba(0, 0, 0, 0.65);

    --accent-hi: color-mix(in srgb, var(--accent) 80%, #fff 20%);
    --accent-lo: color-mix(in srgb, var(--accent) 80%, #000 20%);
    --accent-glow: color-mix(in srgb, var(--accent) 30%, transparent);
    --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
}
/* Light paper themes: warm, shallow shadows and bright fields */
:root[data-theme="parchment"] {
    --surface: linear-gradient(180deg, #fffaf0 0%, var(--bg-card) 45%);
    --surface-raised: linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 85%, #fff 15%), var(--bg-raised) 55%);
    --field: #fffdf7;
    --hairline: rgba(255, 255, 255, 0.85);
    --shadow-sm: 0 1px 2px rgba(91, 62, 20, 0.12), 0 4px 14px -6px rgba(91, 62, 20, 0.22);
    --shadow-md: 0 2px 4px rgba(91, 62, 20, 0.12), 0 16px 34px -14px rgba(91, 62, 20, 0.32);
    --shadow-lg: 0 2px 6px rgba(91, 62, 20, 0.14), 0 28px 60px -20px rgba(91, 62, 20, 0.4);
}
:root[data-theme="corkboard"] {
    --field: color-mix(in srgb, var(--bg) 82%, #000 18%);
    --hairline: rgba(255, 255, 255, 0.1);
}

/* ------------------------------------------------------------ Typography */
h1, h2,
.tools-section-title,
.brand-name {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.002em;
}
h1 { letter-spacing: -0.005em; }
.tool-header h1, .desc-hero h1 { font-size: clamp(2rem, 4.4vw, 2.85rem); line-height: 1.12; }

.tool-eyebrow,
.button-primary, .button-secondary,
.cipher-tab, .grouping-btn, .tool-history-chip, .desc-badges,
.tools-cat-badge, .tool-card-badge, .tool-card-char,
.cipher-label, .mp-label, .tools-grouping-label,
.et-titlebar, .et-statusbar,
.tool-page button, .tool-page select, .tool-page label {
    font-family: var(--font-ui);
}
.tool-eyebrow { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; }

/* Section headings get a small engraved rule beneath them */
.desc-section > h2,
.tools-section-title {
    position: relative;
    padding-bottom: 0.7rem;
}
.desc-section > h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 64px;
    height: 2px;
    transform: translateX(-50%);
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

/* ------------------------------------------------------------ Page glow */
body {
    background:
        radial-gradient(1200px 520px at 50% -220px, var(--accent-soft), transparent 72%) no-repeat,
        var(--bg);
}

/* ------------------------------------------------------------ Buttons */
.button-primary,
.button-secondary {
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.button-primary {
    background: linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 52%, var(--accent-lo) 100%);
    border: 1px solid var(--accent-lo);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 10px 26px -10px var(--accent-glow);
}
.button-primary:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 16px 34px -10px var(--accent-glow);
}
.button-primary:active { transform: translateY(0); filter: brightness(0.97); }
.button-secondary {
    background: var(--surface-raised);
    border: 1px solid var(--edge);
    box-shadow: inset 0 1px 0 var(--hairline), var(--shadow-sm);
}
.button-secondary:hover { transform: translateY(-1px); }
.button-primary:focus-visible,
.button-secondary:focus-visible { outline: none; box-shadow: var(--ring), var(--shadow-sm); }
.button-primary:disabled, .button-secondary:disabled { transform: none; filter: saturate(0.6); }

/* Pills and segmented choices */
.cipher-tab,
.grouping-btn,
.tool-history-chip,
.rt-entity-chip,
.export-bar button {
    background: var(--surface-raised);
    border-color: var(--edge);
    box-shadow: inset 0 1px 0 var(--hairline), 0 1px 2px rgba(0, 0, 0, 0.2);
    font-weight: 500;
}
.cipher-tab.active,
.grouping-btn.active {
    background: linear-gradient(180deg, var(--accent-hi), var(--accent) 55%, var(--accent-lo));
    border-color: var(--accent-lo);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 6px 18px -6px var(--accent-glow);
    font-weight: 600;
}

/* ------------------------------------------------------------ Surfaces */
.tool-card,
.feature-card,
.steps li,
.cipher-block,
.gemini-key-bar,
.web-verdict, .web-node,
.lineup-intro, .lineup-brief, .suspect-card, .lineup-chat, .lineup-reveal,
.palace-station, .practice-card, .palace-row,
.sod-observations, .sod-verdict,
.eti-problem-card, .eti-facts, .eti-hypothesis, .eti-conclusion,
.wcf-hole, .wcf-fairplay,
.rt-card,
.campaign-case-card, .campaign-ranks,
.course-enroll, .course-head, .course-graduation,
.toby-scent, .trivia-option,
.story-card, .story-act, .story-chapter-list li,
.lore-card, .lore-facts, .technique-example, .essay-card,
.tool-history,
.web-canvas-wrap, .rt-ribbon-wrap, .toby-map-wrap {
    background: var(--surface);
    border-color: var(--edge);
    border-radius: var(--radius);
    box-shadow: inset 0 1px 0 var(--hairline), var(--shadow-sm);
}
.cipher-block,
.gemini-key-bar,
.lineup-intro, .lineup-chat, .lineup-reveal,
.course-enroll, .course-head, .course-graduation {
    background: var(--surface-raised);
}

/* Cards that are links lift and catch the light */
.tool-card,
.story-card, .lore-card, .essay-card, .campaign-case-card, .suspect-card, .trivia-option {
    transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.tool-card-live:hover,
a.story-card:hover, a.lore-card:hover, a.essay-card:hover, a.campaign-case-card:hover,
.suspect-card:hover, .trivia-option:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    box-shadow: inset 0 1px 0 var(--hairline), var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.tool-card-icon,
.feature-icon {
    display: inline-grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 12px;
    font-size: 1.6rem;
    line-height: 1;
    background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 22%, transparent), var(--accent-soft) 70%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.feature-card .feature-icon { margin-bottom: 0.6rem; }

.step-number {
    font-family: var(--font-display);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent), 0 6px 16px -6px var(--accent-glow);
}

/* ------------------------------------------------------------ Fields */
.tool-page textarea,
.tool-page select,
.tool-page input[type="text"],
.tool-page input[type="search"],
.tool-page input[type="number"],
.tool-page input[type="email"],
.tool-page input[type="url"],
.tool-page input:not([type]),
.key-bar-input, .key-bar-model,
.lineup-chat-form input, .sprint-form input, .sod-level-select {
    background: var(--field);
    border: 1px solid var(--edge);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.22);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.tool-page textarea:hover,
.tool-page input[type="text"]:hover,
.tool-page select:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.tool-page textarea:focus,
.tool-page select:focus,
.tool-page input:focus,
.key-bar-input:focus, .key-bar-model:focus,
.lineup-chat-form input:focus, .sprint-form input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18), var(--ring);
}
.tool-page ::placeholder { color: color-mix(in srgb, var(--text-dim) 75%, transparent); }

/* ------------------------------------------------------------ Tool chrome */
.et-titlebar {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-raised) 88%, #fff 5%), color-mix(in srgb, var(--bg-raised) 92%, transparent));
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom-color: var(--edge);
    box-shadow: inset 0 -1px 0 var(--hairline), 0 6px 20px -12px rgba(0, 0, 0, 0.6);
}
.et-tb-brand strong { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; }
.et-tb-dropdown {
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}
.et-statusbar {
    background: linear-gradient(0deg, color-mix(in srgb, var(--bg-raised) 92%, #000 4%), var(--bg-raised));
    border-top-color: var(--edge);
    box-shadow: inset 0 1px 0 var(--hairline);
}

/* App mode: tools sit on a softly lit desk rather than a flat field */
body.app-mode {
    background:
        radial-gradient(900px 420px at 50% -120px, var(--accent-soft), transparent 70%) no-repeat,
        radial-gradient(1400px 700px at 50% 120%, color-mix(in srgb, var(--bg) 80%, #000 20%), transparent 70%) no-repeat,
        var(--bg);
}

/* ------------------------------------------------------------ Description pages */
.desc-hero { position: relative; padding-top: 0.5rem; }
.desc-hero-icon {
    display: inline-grid;
    place-items: center;
    width: 4.6rem;
    height: 4.6rem;
    margin: 1rem auto 0.4rem;
    border-radius: 22px;
    font-size: 2.5rem;
    line-height: 1;
    background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--accent) 26%, transparent), var(--accent-soft) 72%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent), 0 18px 40px -16px var(--accent-glow);
}
.desc-char-plaque {
    background: var(--surface-raised);
    border-color: var(--edge);
    box-shadow: inset 0 1px 0 var(--hairline), var(--shadow-sm);
    font-family: var(--font-ui);
    font-size: 0.85rem;
}
.desc-badges {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.2rem 0 0;
    padding: 0;
    font-size: 0.8rem;
    color: var(--text-dim);
}
.desc-badges li {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--edge);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-card) 70%, transparent);
}
.desc-inline {
    padding: clamp(1rem, 3vw, 1.8rem);
    border: 1px solid var(--edge);
    border-radius: calc(var(--radius) + 4px);
    background: var(--surface-raised);
    box-shadow: inset 0 1px 0 var(--hairline), var(--shadow-md);
}
.desc-inline > h2:first-child { margin-top: 0; }
.desc-guide { max-width: 46rem; margin-left: auto; margin-right: auto; }
.desc-guide p { color: var(--text); opacity: 0.92; font-size: 1.04rem; }
.desc-guide p + p { margin-top: 0.9rem; }
.desc-faq { max-width: 46rem; margin-left: auto; margin-right: auto; }
.desc-faq details {
    border: 1px solid var(--edge);
    border-radius: var(--radius-sm);
    background: var(--surface);
    box-shadow: inset 0 1px 0 var(--hairline);
    margin-bottom: 0.6rem;
    padding: 0 1.1rem;
    transition: border-color 0.2s ease;
}
.desc-faq details[open] { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.desc-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 0.9rem 1.6rem 0.9rem 0;
    position: relative;
    font-weight: bold;
}
.desc-faq summary::-webkit-details-marker { display: none; }
.desc-faq summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent);
    font-family: var(--font-ui);
    font-size: 1.2rem;
    transition: transform 0.2s ease;
}
.desc-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.desc-faq details p { margin: 0 0 1rem; color: var(--text-dim); }
.desc-related .tools-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.desc-related .tool-card p { font-size: 0.86rem; }

@media (prefers-reduced-motion: reduce) {
    .tool-card, .button-primary, .button-secondary, .story-card, .lore-card, .essay-card { transition: none; }
    .tool-card-live:hover, .button-primary:hover, .button-secondary:hover { transform: none; }
}

/* Game room */
.game-card-title { color: inherit; text-decoration: none; }
.game-card-title:hover { color: var(--accent); }
.games-index .tools-section-title { margin-top: 2.6rem; }
.games-guide { margin-top: 3rem; }

/* ------------------------------------------------------------ App mode
   The title bar names the tool; a compact hero under it says what the
   tool is for, and the input form sits on a raised workbench card. */
body.app-mode .tool-page > .tool-header {
    display: block;
    max-width: 780px;
    margin: 0.6rem auto 1.4rem;
    text-align: center;
}
body.app-mode .tool-page > .tool-header .tool-eyebrow { display: none; }
body.app-mode .tool-page > .tool-header h1 {
    margin: 0 0 0.4rem;
    font-size: clamp(1.45rem, 2.6vw, 1.9rem);
}
body.app-mode .tool-page > .tool-header .lead {
    font-size: 0.95rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
body.app-mode .tool-form {
    margin-left: auto;
    margin-right: auto;
    padding: clamp(1rem, 2.4vw, 1.6rem);
    border: 1px solid var(--edge);
    border-radius: calc(var(--radius) + 4px);
    background: var(--surface-raised);
    box-shadow: inset 0 1px 0 var(--hairline), var(--shadow-md);
}
.tool-form label[for],
.tool-form .cipher-label {
    font-family: var(--font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
}
body.app-mode .tool-page > .tool-header { border-left: none; padding-left: 0; }
body.app-mode .tool-page > .tool-header .lead { margin: 0 auto; }

/* Narrow phones: the display face sets the brand a little wider, so
   tighten the masthead to keep it inside the screen. */
@media (max-width: 420px) {
    .site-masthead { gap: 0.5rem; padding-left: 0.75rem; padding-right: 0.75rem; }
    .brand { gap: 0.45rem; }
    .brand-name { font-size: 1.02rem; }
    .masthead-utils { gap: 0.35rem; min-width: 0; }
    #site-theme-picker { max-width: 4.8rem; }
}
@media (max-width: 640px) {
    .desc-char-plaque { display: inline-block; border-radius: 14px; line-height: 1.5; }
    .desc-char-plaque .desc-char-emoji { margin-right: 0.3rem; vertical-align: -0.1em; }
}