/* ==========================================================================
   Soltherra Design System — Parchment Theme

   Warm parchment palette with teal and bronze accents.
   Light background with dark text for readability.
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Reset
   -------------------------------------------------------------------------- */

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

* {
    margin: 0;
    padding: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Design Tokens
   -------------------------------------------------------------------------- */

:root {
    /* --- Colors: Backgrounds --- */
    --color-bg-primary: #f8f6f1;
    --color-bg-secondary: #f0ede6;
    --color-bg-surface: #e8e5dd;
    --color-bg-surface-bright: #fcfbf8;

    /* --- Colors: Text --- */
    --color-text-primary: #2b2926;
    --color-text-secondary: #5c5650;
    --color-text-muted: #7a746d;
    --color-text-on-accent: #fff;

    /* --- Colors: Accents --- */
    --color-accent: #1a7a6d;
    --color-accent-hover: #14655a;
    --color-warm: #7d5a1a;
    --color-warm-hover: #6b4c15;

    /* --- Colors: Dropdown --- */
    --color-dnd-bg: #fef8e7;

    /* --- Colors: Links --- */
    --color-link: #1a7a6d;
    --color-link-hover: #14655a;

    /* --- Colors: Semantic --- */
    --color-success: #2d7a4f;
    --color-error: #c43e3e;
    --color-error-bg: #fdf0f0;
    /* Almost-black for health bar dying/dead phases — represents near-total depletion */
    --color-health-dying: #1a1a1a;
    /* Flanking-widget zone colors — front/side/rear/behind arc tints */
    --color-flank-front: #22c55e;
    --color-flank-side: #3b82f6;
    --color-flank-rear: #f59e0b;
    --color-flank-behind: #ef4444;

    /* --- Colors: Borders --- */
    --color-border: #d4d0c8;
    --color-border-light: #e0ddd6;

    /* --- Spacing --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.75rem;
    --space-7: 2.5rem;
    --space-8: 3.5rem;
    --space-9: 5rem;

    /* --- Typography: Font stacks --- */
    --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
    --font-body:
        "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, sans-serif;
    --font-mono:
        "JetBrains Mono", ui-monospace, "Cascadia Code", "Source Code Pro",
        Menlo, Consolas, monospace;

    /* --- Typography: Font sizes --- */
    --text-sm: 1rem;
    --text-base: 1.125rem;
    --text-h4: 1.1875rem;
    --text-h3: 1.375rem;
    --text-h2: 1.625rem;
    --text-h1: 1.875rem;
    --text-display: 2.25rem;

    /* --- Typography: Line heights --- */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-loose: 1.75;

    /* --- Typography: Font weights --- */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* --- Border Radius --- */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-full: 50%;

    /* --- Sizes --- */
    --profile-image-size: 250px;
    --profile-image-size-grid: 200px;

    /* --- Shadows --- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.24);

    /* --- Transitions ---
       Four durations for UI motion. Pick by call site: `fast` for
       micro-interactions (link hover, icon-button hover, nav toggles),
       `normal` for dialog fades and small panels, `slow` for larger-area
       panel slides and overlays, `fast-out` for directional exits that
       want ease-out instead of plain ease. Don't add new duration values;
       if you think you need one, reconsider the call site first. */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.25s ease;
    --transition-fast-out: 0.15s ease-out;

    /* --- Z-index scale ---
       Named stacking levels. Higher number = higher stack. Use the
       semantic name that matches what you're building, not the number.
       If you need a new level, add it here with a comment explaining
       where it sits relative to the existing names. */
    --z-base: 1; /* in-flow overlays inside a container */
    --z-skip-link: 100; /* skip link and persistent sidebar nav */
    --z-header: 300; /* sticky site-header */
    --z-overlay: 350; /* nav overlay scrim / click catcher */
    --z-panel: 400; /* nav panel sliding over the overlay */
    --z-popover: 500; /* glossary popover */
    --z-toast: 1000; /* save-status auto-save badge */

    /* --- Opacity ---
       `disabled` is the standard faded state for :disabled buttons,
       locked sections, and drag ghosts. `muted` is weaker, used for
       "unaffordable" XP dots that should read as out-of-reach but still
       readable. */
    --opacity-disabled: 0.4;
    --opacity-muted: 0.3;

    /* --- Scrim (backdrop tints) ---
       `light` dims the page behind the nav overlay. `dark` is the
       stronger tint used under native <dialog> ::backdrop. */
    --color-scrim-light: rgba(0, 0, 0, 0.3);
    --color-scrim-dark: rgba(0, 0, 0, 0.5);

    /* --- Colors: Print --- */
    --print-color-text: #000;
    --print-color-bg: #fff;
    --print-color-border: #000;
    --print-color-muted: #999;
    --print-color-subtle: #555;

    /* --- Sizes: Print --- */
    --print-profile-image-size: 5cm;
}

/* --------------------------------------------------------------------------
   Responsive breakpoints

   CSS custom properties don't work inside @media feature queries, so these
   breakpoints are a convention rather than tokens. Use the exact spellings
   below for consistency across every stylesheet and every JS matchMedia call.

     Mobile max:  @media (max-width: 39.999em)   below 640px
     Tablet+:     @media (min-width: 40em)       640px and up
     Laptop+:     @media (min-width: 48em)       768px and up
     Desktop+:    @media (min-width: 64em)       1024px and up

   The 39.999em mobile-max is "just below 40em" and is the inverse of the
   tablet+ breakpoint. If you need a new breakpoint, add it here with a
   comment explaining what it shields.

   One-off exception: header-auth in components.css hides the email at
   max-width: 600px (~37.5em), which is narrower than mobile-max. See the
   comment at that site for rationale.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Base Element Styles
   -------------------------------------------------------------------------- */

html {
    font-size: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    overflow-x: hidden;
}

/* --- Headings --- */

h1 {
    font-family: var(--font-heading);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    font-size: var(--text-h1);
    margin-bottom: var(--space-4);
}

h2,
h3,
h4 {
    font-family: var(--font-body);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    margin-bottom: var(--space-2);
}

h2 {
    font-size: var(--text-h2);
}

h3 {
    font-size: var(--text-h3);
}

h4 {
    font-size: var(--text-h4);
}

/* --- Paragraphs and inline text --- */

p {
    margin-bottom: var(--space-4);
}

small {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

strong {
    font-weight: var(--font-weight-bold);
}

/* --- Links --- */

a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    transition: color var(--transition-fast);
}

a:hover,
a:focus-visible {
    color: var(--color-link-hover);
}

a:focus-visible {
    border-radius: var(--radius-sm);
}

/* --- Code and preformatted text --- */

code,
kbd,
samp {
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--color-accent);
    background-color: var(--color-bg-surface);
    padding: 0.15em 0.35em;
    border-radius: var(--radius-md);
}

pre {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    overflow-x: auto;
    margin-bottom: var(--space-4);
}

pre code {
    background: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

/* --- Lists --- */

ul,
ol {
    padding-left: var(--space-6);
    margin-bottom: var(--space-4);
}

li {
    margin-bottom: var(--space-1);
}

/* --- Horizontal rule --- */

hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-7) 0;
}

/* --- Tables (minimal base) --- */

table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    text-align: left;
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

th {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
}

/* --- Form elements --- */

input[type="text"],
input[type="number"],
textarea,
select {
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-base);
    color: var(--color-text-primary);
    width: 100%;
}

textarea {
    resize: vertical;
}

auto-textarea {
    display: block;
    width: 100%;
}

auto-textarea textarea {
    overflow-y: hidden;
    min-height: 70px;
}

/* --- Buttons ---
   Bare <button> carries the default app style. `variant="primary"` layers an
   accent look on top. `size="small"` composes with either. Scoped rules like
   `header-icon-btn button` win via specificity and can reset what they need.
   See docs/architecture.md → "Button styling convention". */

button {
    border: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    font-size: var(--text-base);
    padding: var(--space-2) var(--space-4);
    background: transparent;
}

button:hover {
    color: var(--color-accent);
}

button:disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
}

button[variant="primary"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: var(--color-text-on-accent);
}

button[variant="primary"]:hover {
    background: var(--color-accent-hover);
    color: var(--color-text-on-accent);
}

button[size="small"] {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-sm);
}

/* --------------------------------------------------------------------------
   Mobile-first Responsive Typography
   -------------------------------------------------------------------------- */

/* Tablet and up (640px) */
@media (min-width: 40em) {
    :root {
        --text-h1: 2.25rem;
        --text-h2: 1.875rem;
        --text-h3: 1.5rem;
        --text-display: 3rem;
    }
}

/* --------------------------------------------------------------------------
   Skip Link (accessibility)
   -------------------------------------------------------------------------- */

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    z-index: var(--z-skip-link);
    font-weight: 600;
}

.skip-link:focus {
    top: 0;
}

/* --------------------------------------------------------------------------
   Page Layout: body as flex column so footer stays at the bottom
   -------------------------------------------------------------------------- */

body {
    display: flex;
    flex-direction: column;
}

/* --------------------------------------------------------------------------
   Site Header
   -------------------------------------------------------------------------- */

site-header {
    display: block;
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background-color: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-6) 0;
    box-shadow: var(--shadow-sm);
}

site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-7);
    margin: 0 0 var(--space-2);
}

a[site-header-title] {
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
}

a[site-header-title]:hover,
a[site-header-title]:focus-visible {
    color: var(--color-accent-hover);
}

/* --- Header Actions (print button + burger) --- */

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

header-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
}

header-icon-btn button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-md);
    color: var(--color-text-primary);
    transition: background-color var(--transition-fast);
}

header-icon-btn button:hover {
    background-color: var(--color-bg-surface);
}

/* --- Burger Button --- */

nav-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-fast);
}

nav-burger:hover {
    background-color: var(--color-bg-surface);
}

nav-burger-lines {
    display: block;
    width: 1.25rem;
    height: 2px;
    background-color: var(--color-text-primary);
    position: relative;
}

nav-burger-lines::before,
nav-burger-lines::after {
    content: "";
    display: block;
    width: 1.25rem;
    height: 2px;
    background-color: var(--color-text-primary);
    position: absolute;
    left: 0;
}

nav-burger-lines::before {
    top: -6px;
}

nav-burger-lines::after {
    top: 6px;
}

/* --------------------------------------------------------------------------
   Site Main
   -------------------------------------------------------------------------- */

site-main {
    display: block;
    flex: 1;
    padding: var(--space-7) var(--space-6);
    overflow-x: hidden;
}

site-main-inner {
    display: block;
    max-width: 65ch;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Site Footer
   -------------------------------------------------------------------------- */

site-footer {
    display: block;
    background-color: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-6);
}

site-footer-inner {
    display: block;
    max-width: 65ch;
    margin: 0 auto;
}

site-footer p {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Navigation Panel
   -------------------------------------------------------------------------- */

nav-panel {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 20rem;
    background-color: var(--color-bg-secondary);
    border-right: 1px solid var(--color-border);
    z-index: var(--z-panel);
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    overflow-y: auto;
    padding: var(--space-7) var(--space-6);
    flex-direction: column;
    gap: var(--space-2);
}

nav-panel[open] {
    transform: translateX(0);
}

/* --- Panel Close Button --- */

nav-panel button[nav-close] {
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-md);
    font-size: var(--text-h2);
    color: var(--color-text-secondary);
    line-height: 1;
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
    margin-bottom: var(--space-4);
}

nav-panel button[nav-close]:hover {
    color: var(--color-text-primary);
    background-color: var(--color-bg-surface);
}

/* --- Navigation Overlay --- */

nav-overlay {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-scrim-light);
    z-index: var(--z-overlay);
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--transition-slow),
        visibility var(--transition-slow);
}

nav-overlay[visible] {
    opacity: 1;
    visibility: visible;
}

/* Prevent body scroll when panel is open */
body.nav-panel-open {
    overflow: hidden;
}

/* --- Navigation Groups --- */

nav-group {
    display: block;
}

nav-group button[nav-toggle] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--space-2) var(--space-2);
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    text-align: left;
    border-radius: var(--radius-md);
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}

nav-group button[nav-toggle]:hover {
    color: var(--color-text-primary);
    background-color: var(--color-bg-surface);
}

nav-chevron {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--transition-normal);
    flex-shrink: 0;
}

nav-group[expanded] nav-chevron {
    transform: rotate(45deg);
}

nav-group-items {
    display: none;
    flex-direction: column;
    padding-left: var(--space-4);
}

nav-group[expanded] nav-group-items {
    display: flex;
}

nav-group-items a {
    display: block;
    padding: var(--space-2) var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}

nav-group-items a:hover,
nav-group-items a:focus-visible {
    color: var(--color-accent);
    background-color: var(--color-bg-surface);
}

/* --- Direct Links (e.g., Glossary) --- */

nav-panel > a {
    display: block;
    padding: var(--space-2) var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}

nav-panel > a:hover,
nav-panel > a:focus-visible {
    color: var(--color-accent);
    background-color: var(--color-bg-surface);
}

/* --- Navigation Sub-links (indented child pages) --- */

nav-group-items a[nav-sub-link] {
    padding-left: var(--space-6);
    font-size: var(--text-sm);
    opacity: 0.85;
}

/* --- Nav Panel Mobile Actions ---
   Mirrors the print/search/logout controls from the header on narrow
   viewports, where those header controls are hidden. Styled to match
   nav-group-items > a so the three actions look like nav links. */

nav-panel-mobile-actions {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

nav-panel-mobile-actions > form {
    display: block;
    margin: 0;
}

nav-panel-mobile-actions > button,
nav-panel-mobile-actions > form > button,
nav-panel-mobile-actions > a {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-2);
    font-size: var(--text-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    text-align: left;
    text-decoration: none;
    background: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);
}

nav-panel-mobile-actions > button:hover,
nav-panel-mobile-actions > button:focus-visible,
nav-panel-mobile-actions > form > button:hover,
nav-panel-mobile-actions > form > button:focus-visible,
nav-panel-mobile-actions > a:hover,
nav-panel-mobile-actions > a:focus-visible {
    color: var(--color-accent);
    background-color: var(--color-bg-surface);
}

/* Only visible below the tablet breakpoint — on tablet+ the same actions
   live in the header. */
@media (min-width: 40em) {
    nav-panel-mobile-actions {
        display: none;
    }
}

/* Mobile: full-width panel and tighter padding */
@media (max-width: 39.999em) {
    nav-panel {
        max-width: 100%;
    }

    site-header {
        padding: var(--space-3) var(--space-4) 0;
    }

    site-header-breadcrumb {
        padding: var(--space-2) 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    site-header-breadcrumb ol {
        flex-wrap: nowrap;
        white-space: nowrap;
        font-size: var(--text-sm);
    }

    site-main {
        padding: var(--space-5) var(--space-4);
    }

    site-footer {
        padding: var(--space-4) var(--space-4);
    }

    /* Hide header actions on mobile — they live inside the nav panel instead. */
    site-header-actions header-icon-btn,
    site-header-actions header-auth {
        display: none;
    }
}

/* Wide screens: panel as persistent sidebar on the left, below the header */
@media (min-width: 64em) {
    /* 1024px */
    nav-burger {
        display: none;
    }

    nav-panel {
        transform: translateX(0);
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: var(--z-skip-link);
        padding-top: 5.5rem;
    }

    nav-panel button[nav-close] {
        display: none;
    }

    nav-overlay {
        display: none;
    }

    /* Offset header, main content and footer so they don't sit behind the sidebar */
    site-header {
        margin-left: 20rem;
    }

    site-main {
        margin-left: 20rem;
    }

    site-footer {
        margin-left: 20rem;
    }

    /* Don't lock body scroll in sidebar mode */
    body.nav-panel-open {
        overflow: auto;
    }
}

/* --------------------------------------------------------------------------
   Header Breadcrumb
   -------------------------------------------------------------------------- */

site-header-breadcrumb {
    display: block;
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border-light);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

site-header-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
}

site-header-breadcrumb li + li::before {
    content: "\203A";
    margin: 0 var(--space-2);
    color: var(--color-text-muted);
}

site-header-breadcrumb a {
    color: var(--color-link);
}

site-header-breadcrumb span {
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Tool Page Primitives
   Generic layout primitives for tool pages (character sheet, NPC creator,
   campaign manager, etc.). Page-specific extensions live in their own files.
   -------------------------------------------------------------------------- */

tool-page {
    display: block;
    max-width: 90ch;
    margin: 0 auto;
}

tool-page h1 {
    font-family: var(--font-heading);
    font-size: var(--text-h2);
    color: var(--color-accent);
    margin-bottom: var(--space-4);
    justify-content: space-between;
    align-items: center;
    display: flex;
}

tool-page-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}

tool-page-section > h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    color: var(--color-accent);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-4);
}

tool-page-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

tool-page-field label {
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

tool-page-field input:focus-visible,
tool-page-field textarea:focus-visible {
    outline-offset: 1px;
}

tool-page-field input[type="number"] {
    width: 100%;
}

tool-page-field select {
    cursor: pointer;
}

tool-page-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: var(--space-5);
}

@media (min-width: 48em) {
    tool-page-row {
        gap: var(--space-5);
    }
}

tool-page-row > tool-page-section {
    margin-bottom: var(--space-5);
}

@media (min-width: 48em) {
    tool-page-row > tool-page-section {
        margin-bottom: 0;
    }
}

/* Thumbnail grid (campaign NPCs and locations subpages) */
.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(var(--profile-image-size-grid), 1fr)
    );
    gap: var(--space-4);
}

.thumbnail-link {
    display: flex;
    text-decoration: none;
    color: inherit;
    flex-direction: column;
    align-items: center;
}

.thumbnail-link:hover .thumbnail {
    border-color: var(--color-accent);
}

.thumbnail-link:hover .thumbnail-placeholder {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.thumbnail {
    width: var(--profile-image-size-grid);
    height: var(--profile-image-size-grid);
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

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

.thumbnail-placeholder {
    width: 100%;
    height: 100%;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-4);
}

.thumbnail-name {
    margin-top: var(--space-2);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

html:has(dialog[app-dialog][open]) {
    overflow: hidden;
}

/* Shared dialog base — see T-WEBCL-019 (TD-011) */
dialog[app-dialog] {
    position: fixed;
    inset: 0;
    margin: auto;
    width: calc(100% - var(--space-7));
    max-height: calc(100vh - var(--space-7));
    overflow-y: auto;
    background-color: var(--color-bg-surface);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-lg);
}

dialog[app-dialog]::backdrop {
    background: var(--color-scrim-dark);
}

dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: calc(-1 * var(--space-6));
    background-color: var(--color-bg-surface);
    margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) 0;
    padding: var(--space-4) var(--space-6);
    z-index: 1;
    border-bottom: 1px solid var(--color-border);
}

dialog-header h2 {
    margin: 0;
}

dialog-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

dialog-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    position: sticky;
    bottom: calc(-1 * var(--space-6));
    background-color: var(--color-bg-surface);
    margin: 0 calc(-1 * var(--space-6)) calc(-1 * var(--space-6));
    padding: var(--space-4) var(--space-6);
    z-index: 1;
    border-top: 1px solid var(--color-border);
}

[portrait-dialog] dialog-footer {
    justify-content: center;
}

dialog-header button[dialog-close] {
    background: none;
    border: none;
    font-size: var(--text-h2);
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-secondary);
    padding: 0 var(--space-1);
}

dialog-header button[dialog-close]:hover {
    color: var(--color-text-primary);
}

/* NPC edit dialog */
#npc-edit-dialog,
#location-edit-dialog {
    max-width: 56rem;
}

/* NPC editor save-status inside dialog — override fixed positioning to stay within dialog */
#npc-edit-dialog save-status,
#location-edit-dialog save-status {
    position: sticky;
    bottom: var(--space-4);
    float: right;
    margin-top: calc(-1 * var(--space-8));
}

/* Save status indicator - fixed position in bottom-right corner */
save-status {
    display: none;
    position: fixed;
    bottom: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-toast);
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-bg-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

save-status[data-state="editing"] {
    display: flex;
    color: var(--color-text-secondary);
}

save-status[data-state="saved"] {
    display: flex;
    background: var(--color-success);
    color: white;
}

save-status[data-state="editing"] .status-icon-saved,
save-status[data-state="saved"] .status-icon-edit,
save-status[data-state="hidden"] .status-icon-edit,
save-status[data-state="hidden"] .status-icon-saved {
    display: none;
}

/* --------------------------------------------------------------------------
   NPC pill assignment widget (location dialog)
   -------------------------------------------------------------------------- */

.npc-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    min-height: var(--space-6);
}

.npc-pill {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.npc-pill:hover {
    border-color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   NPC accordion panels (assigned NPCs in location dialog)
   -------------------------------------------------------------------------- */

.npc-accordion-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

npc-accordion {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.npc-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-surface);
    border: none;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
    text-align: left;
}

.npc-accordion-header:hover {
    background: var(--color-bg-secondary);
}

.npc-accordion-controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.npc-accordion-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: none;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    cursor: pointer;
    line-height: 1;
}

.npc-accordion-remove:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.npc-accordion-chevron {
    transition: transform var(--transition-fast);
    color: var(--color-text-muted);
}

.npc-accordion-header[aria-expanded="true"] .npc-accordion-chevron {
    transform: rotate(90deg);
}

.npc-accordion-body {
    padding: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.npc-accordion-details dt {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    margin-top: var(--space-2);
}

.npc-accordion-details dt:first-child {
    margin-top: 0;
}

.npc-accordion-details dd {
    margin: var(--space-1) 0 0 0;
    white-space: pre-wrap;
}

.npc-accordion-edit {
    margin-top: var(--space-3);
}

.npc-accordion-loading {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-style: italic;
}

@media print {
    save-status {
        display: none !important;
    }
}