/* ==========================================================================
   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;
}

/* --------------------------------------------------------------------------
   Self-hosted Fonts
   -------------------------------------------------------------------------- */

@font-face {
    font-family: "Geist Mono";
    src: url("/static/fonts/GeistMono-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: optional;
}

/* --------------------------------------------------------------------------
   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;

    /* --- Colors: Soft variants --- */
    --color-accent-soft: #e5f1ef;
    --color-warm-soft: #f4ecd8;
    --color-success-bg: #eaf5ee;
    --color-warning: #a66a1a;
    --color-warning-bg: #fbf3e0;
    --color-focus-ring: var(--color-accent);
    /* Almost-black for health bar dying/dead phases — represents near-total depletion */
    --color-health-dying: #1a1a1a;
    --color-health-dead: #000000;
    /* 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;

    /* --- Spacing: Role aliases --- */
    --space-none: 0;
    --space-tight: 0.7rem;
    --space-form-row: 1rem;
    --space-group: 1.1rem;
    --space-block: 1.25rem;
    --space-section: 2.5rem;

    /* --- Grid min-widths (used by <layout-grid> min="sm|md|lg") --- */
    --grid-min-tiny: 8rem;
    --grid-min-small: 12rem;
    --grid-min-medium: 16rem;
    --grid-min-large: 20rem;

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

    /* --- Typography: Font sizes --- */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-h4: 1.0625rem;
    --text-h3: 1.125rem;
    --text-h2: 1.4375rem;
    --text-h1: 2.75rem;

    /* --- Typography: Line heights --- */
    --line-height-tight: 1.25;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.9;

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

    /* --- Typography: Tracking scale --- */
    --tracking-label: 0.08em;
    --tracking-tight: -0.01em;
    --tracking-hero: -0.02em;

    /* --- Layout --- */
    --max-prose: 68ch;
    --max-page: 1200px;
    --tap-target: 44px;

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

    /* --- Sizes --- */
    --profile-image-size: 250px;
    --profile-image-size-thumbnail: 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 */
    --z-upper-dialog: 2000; /* 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;
}

/* Mobile up to (639px) */
@media (max-width: 39.999em) {
    :root {
        --profile-image-size: 100%;
    }
}

/* Labtop and up (768px) */
@media (min-width: 48em) {
    :root {
        --text-h1: 3.5rem;
    }
}

/* --------------------------------------------------------------------------
   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-display);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-tight);
    font-size: var(--text-h1);
    letter-spacing: -0.03em;
    text-align: center;
}

h2,
h3 {
    font-family: var(--font-mono);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

h4 {
    font-family: var(--font-body);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
}

h2 {
    font-size: var(--text-h2);
    letter-spacing: -0.02em;
}

h3 {
    font-size: var(--text-h3);
    letter-spacing: -0.01em;
}

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

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

*[align="center"] {
    text-align: center;
}

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-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;
}

pre code {
    font-family: var(--font-mono);
    background: none;
    padding: 0;
    font-size: inherit;
    color: inherit;
}

/* --- Lists --- */

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

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

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

hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-6) 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
   `icon-button 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-family: var(--font-mono);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    font-size: var(--text-base);
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px dashed var(--color-border);
    color: var(--color-text-secondary);
    transition: 300ms;
}

button:hover {
    color: var(--color-accent);
    border: 1px dashed var(--color-accent);
}

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

*[full="true"] {
    width: 100%;
}

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);
}

/* --- Button variants (extend native <button>) --- */
button[variant="ghost"] {
    background: var(--color-bg-primary);
    border-color: transparent;
    color: var(--color-text-secondary);
}
button[variant="ghost"]:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border-color: transparent;
}

button[variant="danger"] {
    color: var(--color-error);
    border-color: color-mix(
        in oklab,
        var(--color-error) 50%,
        var(--color-border)
    );
}
button[variant="danger"]:hover {
    background: var(--color-error-bg);
    color: var(--color-error);
    border-color: var(--color-error);
}

button[variant="damage"] {
    background: var(--color-error);
    color: var(--color-error-bg);
    border: none;
}
button[variant="damage"]:hover {
    background: color-mix(in oklab, var(--color-error) 80%, black);
    color: var(--color-error-bg);
    border: none;
}

button[block] {
    width: 100%;
}

/* --- <icon-button>: 44×44 hit target for icon-only actions --- */
icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-target);
    height: var(--tap-target);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    transition:
        background var(--transition-fast),
        color var(--transition-fast);
    cursor: pointer;
}
icon-button:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}
icon-button > svg,
icon-button svg {
    width: 20px;
    height: 20px;
    display: block;
}
/* Icon-button with nested <button> or <a> (for form submit / link semantics) */
icon-button > button,
icon-button > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
}

/* --- Meter bar: generic progress/health/XP indicator --- */
meter-bar {
    display: block;
    position: relative;
    height: 12px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    overflow: hidden;
}
meter-bar-fill {
    display: block;
    height: 100%;
    background: var(--color-success);
    border-radius: inherit;
    transition: width var(--transition-normal);
}
meter-bar[data-state="wounded"] meter-bar-fill {
    background: var(--color-warning);
}
meter-bar[data-state="dying"] meter-bar-fill {
    background: var(--color-error);
}
meter-bar[data-state="dead"] meter-bar-fill {
    background: var(--color-health-dead);
}

/* --- Info pill: tag/badge with tone variants --- */
info-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-group);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
    border-radius: var(--radius-full);
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}
info-pill[variant="accent"] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-color: color-mix(
        in oklab,
        var(--color-accent) 25%,
        var(--color-border)
    );
}
info-pill[variant="warm"] {
    background: var(--color-warm-soft);
    color: var(--color-warm);
    border-color: color-mix(
        in oklab,
        var(--color-warm) 25%,
        var(--color-border)
    );
}
info-pill[variant="good"] {
    background: var(--color-success-bg);
    color: var(--color-success);
    border-color: color-mix(
        in oklab,
        var(--color-success) 25%,
        var(--color-border)
    );
}
info-pill[variant="bad"] {
    background: var(--color-error-bg);
    color: var(--color-error);
    border-color: color-mix(
        in oklab,
        var(--color-error) 25%,
        var(--color-border)
    );
}

/* Trigger pill affordance: info-pill used as a button (T-PH3-I).
   Adds cursor + subtle hover/focus indicator so the pill reads as interactive. */
info-pill[role="button"] {
    cursor: pointer;
}
info-pill[role="button"]:hover {
    filter: brightness(1.05);
}
info-pill[role="button"]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}
info-pill[role="button"][disabled] {
    cursor: not-allowed;
}

/* Picker-pill: button that wraps an <info-pill> inside the selector dialog
   (T-PH3-I). Reset native button chrome so the inner info-pill carries the
   visual weight. */
.picker-pills {
    margin-top: var(--space-block);
}
.picker-pill {
    background: none;
    border: none !important;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}
/* Hover: change border-color instead of filter to avoid layout jumps.
   info-pill already has a 1px border (stable width), so only the color changes. */
.picker-pill:hover info-pill {
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.picker-pill:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-full);
}

/* --- Typographic Primitives — Light-DOM custom elements, CSS-only --- */

display-title {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-tight);
    letter-spacing: -0.03em;
    color: var(--color-text-primary);
}

text-label {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
}

text-label[size="sm"] {
    font-size: var(--text-sm);
}

text-label[tone="accent"] {
    color: var(--color-accent);
}

text-label[tone="strong"] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
}

numeric-value {
    display: inline;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

numeric-value[align="right"] {
    text-align: right;
    display: inline-block;
}

text-meta {
    display: inline;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   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-primary);
    padding: var(--space-4) var(--space-6) 0;
    border-bottom: 1px solid var(--color-border);
}

site-header-max {
    display: block;
    max-width: var(--max-page);
    margin: 0 auto;
}

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

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

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

icon-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-target);
    height: var(--tap-target);
}

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

icon-button 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: var(--space-5);
    height: 2px;
    background-color: var(--color-text-primary);
    position: relative;
}

nav-burger-lines::before,
nav-burger-lines::after {
    content: "";
    display: block;
    width: var(--space-5);
    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-top: var(--space-7);
    overflow-x: hidden;
}

site-main-inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-section);
    margin: 0 auto;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

/* Mobile / tablet reading-width cap. In wide mode (>= 64em) the grid's
   content column caps width at `min(58ch, 100%)` so the cap here would be
   redundant; scoping it to below the wide breakpoint keeps the intent
   explicit and avoids any ambiguity about where the 58ch lives. */
@media (max-width: 63.999em) {
    site-main-inner {
        max-width: 58ch;
    }
}
/* Wide-mode grid for site-main is defined in the @media (min-width: 64em)
   block further down. It creates named "content" and "nav" columns so the
   content body and nav column sit side-by-side inside site-main, centered
   as a unit on the viewport. Direct children of site-main can opt into
   full-width spans with `grid-column: nav-start / content-end` (or the
   equivalent `grid-column: 1 / -1`). See that block for details. */

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

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

site-footer-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-block);
    max-width: var(--max-page);
    margin: 0 auto;
}

@media (min-width: 48em) {
    site-footer-inner {
        grid-template-columns: 1fr auto;
        align-items: start;
    }
}

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

/* Base nav-panel rules: shared look (bg, border, scroll, padding, flex
   layout) that applies in both mobile overlay and wide-mode inline states.
   Mobile overlay positioning and wide-mode cosmetic overrides (transparent
   bg, no border) each live in their respective media query blocks below. */
nav-panel {
    display: flex;
    background-color: var(--color-bg-secondary);
    border-right: 1px solid var(--color-border);
    overflow-y: auto;
    flex-direction: column;
    gap: var(--space-2);
}

/* Mobile / tablet overlay behaviour (< 1024px). Preserves the pre-F-090
   slide-in overlay panel byte-for-byte. */
@media (max-width: 63.999em) {
    nav-panel {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 20rem;
        z-index: var(--z-panel);
        transform: translateX(-100%);
        transition: transform var(--transition-slow);
        padding-top: var(--space-6);
    }

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

    /* Prevent body scroll when panel is open (mobile/tablet only). */
    body.nav-panel-open {
        overflow: hidden;
    }
}

/* --- 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;
}

/* body.nav-panel-open { overflow: hidden } now lives in the
   @media (max-width: 63.999em) block above so it only applies in overlay
   mode. In wide mode the panel flows with the page so no scroll lock is
   needed. */

/* --- 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;
    margin-right: var(--space-2);
}

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-main {
        padding: 0 var(--space-4);
    }

    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-footer {
        padding: var(--space-4) var(--space-4);
    }

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

/* Wide screens (>= 1024px): content column and nav column live inline
   inside site-main, centered as a unit on the viewport. site-header and
   site-footer remain full-viewport-width; the header keeps its sticky
   behaviour. nav-panel flows with the page and scrolls naturally (no
   fixed positioning, no 100vh, no slide-in transform).

   Grid formulation on site-main (2 tracks, centered via max-width):
       col 1 (nav)     — 20rem nav column
       col 2 (content) — 1fr, fills all remaining space up to --max-page

   Named grid lines: [nav-start] ... [nav-end content-start] ... [content-end]
   so direct children of site-main can opt into wide spans without having
   to count columns, e.g.:

       hero-banner { grid-column: nav-start / content-end; }
       wide-table  { grid-column: 1 / -1; }  (spans both tracks)

   Design decisions documented here:
   - Centering is handled by max-width: var(--max-page) + margin: 0 auto on
     site-main itself. No outer gutter columns needed.
   - Content track is minmax(0, 1fr) — fills all available space after nav,
     no fixed ch cap (the 58ch cap lives on site-main-inner at mobile only).
   - Column gap uses --space-7 (2.5rem), matching site-main's vertical
     rhythm.
   - DOM order is content-first (site-main-inner before nav-panel) to
     preserve tab order. Both items get explicit grid-row: 1 to prevent
     auto-placement from stacking them vertically.
*/
@media (min-width: 64em) {
    /* 1024px */
    nav-burger {
        display: none;
    }

    site-main {
        display: grid;
        grid-template-columns:
            [nav-start] 20rem [nav-end content-start]
            minmax(0, 1fr) [content-end];
        column-gap: var(--space-7);
        align-items: start;
        max-width: var(--max-page);
        margin: 0 auto;
        width: 100%;
    }

    /* Place site-main-inner in the content column. The mobile-scoped
       max-width: 58ch earlier in this file does not fire at this
       breakpoint; content fills available space via the 1fr track.
       grid-row: 1 forces inline placement regardless of DOM order. */
    site-main-inner {
        grid-column: content-start / content-end;
        grid-row: 1;
    }

    /* nav-panel lives inside site-main (sibling after site-main-inner) and
       lands in the nav column. Flows with the page; no fixed positioning,
       no transform, no overlay stacking.
       grid-row: 1 forces inline placement alongside site-main-inner. */
    site-main > nav-panel {
        grid-column: nav-start / nav-end;
        grid-row: 1;
    }
    nav-panel {
        position: static;
        width: 100%;
        transform: none;
        transition: none;
        z-index: auto;
        overflow-y: visible;
    }

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

    nav-overlay {
        display: none;
    }

    /* Wide (inline) mode: quiet surface — T-090-003 */
    nav-panel {
        background-color: transparent;
        border-right: none;
    }

    nav-group button[nav-toggle] {
        background-color: transparent;
    }

    nav-panel > a {
        background-color: transparent;
    }

    nav-group,
    nav-group-items {
        background: none;
        border: none;
        box-shadow: none;
    }

    /* Flat link lists — always visible at desktop (no collapsible toggle) */
    nav-group-items {
        display: block;
    }

    /* Top border between groups (sibling separator) */
    nav-group + nav-group {
        border-top: 1px solid var(--color-border);
        padding-top: var(--space-4);
        margin-top: var(--space-4);
    }

    /* Group header: mono uppercase label, non-interactive */
    nav-group button[nav-toggle] {
        font-family: var(--font-mono);
        font-size: var(--text-xs);
        text-transform: uppercase;
        letter-spacing: var(--tracking-label);
        color: var(--color-text-muted);
        cursor: default;
        pointer-events: none;
    }

    /* Hide chevron at desktop */
    nav-group button[nav-toggle] nav-chevron {
        display: none;
    }
}

/* Current page indicator — inset-left accent border; works at all breakpoints */
nav-panel a[aria-current="page"] {
    box-shadow: inset 2px 0 0 var(--color-accent);
    color: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   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;
}

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: flex;
    flex-direction: column;
    gap: var(--space-block);
    max-width: 90ch;
    margin: 0 auto;
    width: 100%;
}

@media (min-width: 64em) {
    tool-page {
        max-width: none;
    }
}

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-normal);
    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: flex;
    flex-direction: column;
    gap: var(--space-block);
}

@media (min-width: 48em) {
    tool-page-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-block);
    }
}

/* Thumbnail grid (campaign NPCs and locations subpages) */
.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(var(--profile-image-size-thumbnail), 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-thumbnail);
    height: var(--profile-image-size-thumbnail);
    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);
    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);
    border-top: 1px solid var(--color-border);
}

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

/* Portrait-dialog grid layout — header/footer pinned, body scrolls.
   Overrides the sticky/negative-margin tricks used by the base dialog.
   See T-IMG-002. */
dialog[app-dialog][portrait-dialog][open] {
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow-y: hidden;
    padding: 0;
    z-index: var(--z-upper-dialog);
}

[portrait-dialog] dialog-header {
    position: static;
    margin: 0;
}

[portrait-dialog] dialog-body {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    padding: var(--space-4) var(--space-6);
}

[portrait-dialog] dialog-footer {
    position: static;
    margin: 0;
}

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-lg);
    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-lg);
    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-normal);
    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: var(--space-5);
    height: var(--space-5);
    padding: 0;
    border: none;
    border-radius: var(--radius-lg);
    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-normal);
    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;
    }
}

/* --- Character sheet (merged from character-sheet.css) --- */

/* --- Identity strip layout --- */

/* Allow the identity block (name + player + pills) to fill remaining width */
.cs-identity-grow {
    flex: 1 1 auto;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Character Sheet
   -------------------------------------------------------------------------- */

xp-badge,
gift-dots-badge {
    display: inline;
    font-size: 0.75em;
    color: var(--color-text-muted);
    font-family: var(--font-body);
    font-weight: normal;
    margin-left: var(--space-2);
}

/* Inputs inside stat-value (Zone 1 HP/Armour/Shield/XP tiles):
   strip native input styling so the input inherits stat-value typography. */
stat-value > input {
    width: 100%;
    background: transparent;
    border: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
    padding: 0;
    appearance: textfield;
}
stat-value > input:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
stat-value > input::-webkit-outer-spin-button,
stat-value > input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Two-column layout — used in NPC editor (npc_editor.templ) */
character-sheet-two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

@media (min-width: 48em) {
    character-sheet-two-col {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-5);
    }
}

character-sheet-appearance-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

@media (min-width: 40em) {
    character-sheet-appearance-fields {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 48em) {
    tool-page-row[variant="floating"] {
        grid-template-columns: auto 1fr;
    }
}

/* Screen-reader only utility */
.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;
}

/* --- Gifts --- */

gift-block {
    display: block;
    border: none;
    padding: 0;
    margin: 0;
}

gift-block legend {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-3);
}

/* --- Dot-fill interactive --- */

dot-fill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-1) 0;
    min-width: 0;
}

dot-fill-label {
    display: inline;
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    min-width: 10ch;
    flex-shrink: 0;
}

dot-fill-dots {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

dot-fill-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-text-primary);
    background-color: transparent;
    vertical-align: middle;
    /* Enlarge touch target without changing visual size */
    padding: 0;
    cursor: pointer;
    position: relative;
}

dot-fill-dot[variant="filled"] {
    background-color: var(--color-text-primary);
}

dot-fill-dot[variant="empty"] {
    background-color: transparent;
}

/* --- XP management visual states (F-034) --- */

/* Unaffordable dots: player cannot buy this dot with current XP */
dot-fill-dot[unaffordable] {
    opacity: var(--opacity-muted);
    cursor: not-allowed;
}

/* Override hover and focus effects for unaffordable dots */
dot-fill-dot[unaffordable]:hover,
dot-fill-dot[unaffordable]:focus {
    opacity: var(--opacity-muted);
    outline: none;
    background-color: transparent;
}

/* Unaffordable filled dot: keep fill visible but dimmed */
dot-fill-dot[variant="filled"][unaffordable]:hover,
dot-fill-dot[variant="filled"][unaffordable]:focus {
    background-color: var(--color-text-primary);
}

/* Background-granted dots: came from background/caste selection, not bought with XP */
/* Uses --color-warm (bronze/warm accent) to distinguish from player-purchased dots */
dot-fill-dot[background] {
    background-color: var(--color-warm);
    border-color: var(--color-warm-hover);
    cursor: default;
}

dot-fill-dot[background]:hover {
    background-color: var(--color-warm);
    border-color: var(--color-warm-hover);
}

dot-fill-dot[background]:focus-visible {
    outline-color: var(--color-warm-hover);
}

/* Locked dot-fill container: section not yet available (before background+caste) */
dot-fill[locked] {
    opacity: var(--opacity-disabled);
    pointer-events: none;
}

/* Lock message: notice shown when skills/fame are locked */
lock-message {
    display: block;
    color: var(--color-error);
    font-style: italic;
    font-size: var(--text-sm);
    margin: var(--space-3) 0;
    font-weight: var(--font-weight-bold);
}

/* --- Health tracker --- */

health-tracker {
    display: block;
}

health-tracker-input-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

health-tracker-input-row input {
    width: 100%;
}

health-tracker-condition {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
}

health-tracker-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-1);
}

#cs-death-note {
    margin-top: var(--space-2);
    width: 100%;
}

/* --- Skill view toggle (Trained only / All skills) --- */

/* Trained-only mode: hide skill dot-fill rows with 0 active dots */
[data-skill-view="active"]
    skill-category:not([data-gifts])
    dot-fill[data-active="0"] {
    display: none;
}

/* Trained-only mode: dim skill categories where all children are hidden */
[data-skill-view="active"]
    skill-category:not([data-gifts]):not(:has(dot-fill[data-active="1"])) {
    opacity: 0.45;
}

/* Trained-only mode: show a placeholder in empty skill categories */
[data-skill-view="active"]
    skill-category:not([data-gifts]):not(
        :has(dot-fill[data-active="1"])
    )::after {
    content: "No dots yet";
    font-family: var(--font-body);
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    display: block;
    padding: var(--space-tight) 0;
}

/* All-skills mode: all rows visible, no dimming (reset) */
[data-skill-view="all"] dot-fill {
    display: flex;
}
[data-skill-view="all"] skill-category {
    opacity: 1;
}

/* --- Skills --- */

skill-category {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    overflow: visible;
}

skill-category h3,
skill-category text-label {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--color-border-light);
    padding-bottom: var(--space-1);
    margin-bottom: var(--space-2);
}

/* Override dot-fill label width inside skill categories for alignment */
skill-category dot-fill-label {
    min-width: 13ch;
}

/* --- Inventory section --- */

inventory-containers {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (min-width: 48em) {
    inventory-containers {
        display: grid;
        grid-template-columns: repeat(
            auto-fill,
            minmax(var(--profile-image-size), 1fr)
        );
        gap: var(--space-4);
    }
}

inventory-container {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    background-color: var(--color-bg-primary);
    border-left: 4px solid var(--color-accent);
}

inventory-container-header {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

inventory-container-name {
    display: inline;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    flex: 1;
    min-width: 0;
}

inventory-container-slots {
    display: inline;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

inventory-container-note {
    display: inline;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

/* Items area: bullet pills flow left-to-right, wrap to new lines. */
inventory-container-items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    min-height: 2rem;
    align-items: flex-start;
    padding: var(--space-1) 0;
}

inventory-container-items > text-meta {
    font-style: italic;
}

/* Bullet pill: matches <info-pill variant="accent"> visuals — rounded-full,
   accent bg/text/border, inline-flex. Keeps the embedded × button as an
   affordance on the right. */
inventory-bullet {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px var(--space-group);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: 0.02em;
    border-radius: var(--radius-full);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border: 1px solid
        color-mix(in oklab, var(--color-accent) 25%, var(--color-border));
    cursor: grab;
    word-break: break-word;
    max-width: 100%;
}

inventory-bullet:hover {
    border-color: var(--color-accent);
}

inventory-bullet-text {
    display: inline;
    min-width: 0;
}

inventory-bullet button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    padding: 0 0 0 var(--space-1);
    line-height: 1;
    flex-shrink: 0;
}

inventory-bullet button:hover {
    color: var(--color-error);
}

inventory-container[variant="permanent"] {
    border-style: solid;
    border-color: var(--color-border);
    border-left: 4px solid var(--color-accent);
}

inventory-bullet[dragging] {
    opacity: var(--opacity-disabled);
}

inventory-bullet[drag-clone] {
    box-shadow: var(--shadow-md);
    opacity: 0.9;
}

/* Drag-over highlight lands on the destination <inventory-container>
   (Option B: container-level drop target, not per-slot). */
inventory-container[drag-over] {
    border-color: var(--color-accent);
    background-color: var(--color-bg-secondary);
}

/* --- Magic section --- */

magic-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

known-spells-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/*
 * <rule-spells-list> is the HTMX swap target nested inside <known-spells-list>.
 * display: contents makes it transparent to layout: its <li> children behave
 * as direct flex items of <known-spells-list>, and custom-spell-item siblings
 * (which sit outside the swap target) line up with them.
 */
rule-spells-list {
    display: contents;
}

known-spells-list li {
    padding: var(--space-1) 0;
}

known-spells-list a {
    color: var(--color-link);
    text-decoration: none;
}

known-spells-list a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

known-spells-list custom-spell-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

custom-spell-item {
    display: block;
}

custom-spell-item button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    padding: 0 var(--space-1);
    line-height: 1;
    opacity: 0.6;
    border-radius: var(--radius-sm);
}

custom-spell-item button:hover {
    opacity: 1;
}

custom-spell-item button:focus-visible {
    outline-offset: 1px;
}

#cs-add-custom-spell-btn {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    margin-top: var(--space-2);
    display: inline-block;
}

/* Item dialog */
#cs-item-dialog {
    max-width: 36rem;
}

cs-item-dialog-char-count {
    display: inline;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: right;
}

cs-item-dialog-char-count[warning] {
    color: var(--color-error);
}

cs-item-dialog-inputs {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-2);
}

cs-item-dialog-input-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

cs-item-dialog-input-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

cs-item-dialog-input-wrap input {
    flex: 1;
}

/* Custom spell dialog */
#cs-custom-spell-dialog {
    max-width: 36rem;
}

/* --- Identity section --- */

identity-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* --- Appearance section --- */

appearance-section {
    display: block;
    clear: both;
}

/* --------------------------------------------------------------------------
   Character Rolls Dialog
   -------------------------------------------------------------------------- */

#cs-rolls-content {
    margin-top: var(--space-4);
}

rolls-xp-total {
    display: block;
    font-size: var(--text-h4);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-4);
}

rolls-set-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

rolls-set-label {
    display: inline;
    font-weight: var(--font-weight-bold);
    min-width: 4rem;
    flex-shrink: 0;
}

rolls-set-values {
    display: inline;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    flex-grow: 1;
    color: var(--color-text-secondary);
}

rolls-set-row button {
    font-size: var(--text-sm);
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Inventory — Carry Items dialog + dynamic container chrome
   -------------------------------------------------------------------------- */

/* Carry Items picker dialog: scoped width similar to other pickers. */
#cs-container-dialog {
    max-width: 36rem;
}

/* + Container trigger button sits flush-right in the section header. */
#cs-container-add-btn {
    flex-shrink: 0;
}

/* --- Dynamic container controls --- */

inventory-container-footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

inventory-container-footer button:last-child {
    margin-left: auto;
}

inventory-container-header button[inventory-action="remove"] {
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
    color: var(--color-text-secondary);
    padding: 0 var(--space-1);
    opacity: 0.6;
    border-radius: var(--radius-sm);
}

inventory-container-header button[inventory-action="remove"]:hover {
    opacity: 1;
    color: var(--color-text-primary);
}

inventory-container-header button[inventory-action="remove"]:focus-visible {
    outline-offset: 1px;
}

inventory-container[variant="unequipped"] {
    border-left: 4px solid var(--color-border);
}

/* Container list shares the same grid layout as inventory-containers */
#cs-container-list {
    display: contents;
}

#cs-xp-enable-btn {
    margin-bottom: var(--space-3);
}

/* Portrait picker (shared between character sheet and NPC creator) */
[portrait-section] {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background-color: transparent;
    padding: 0;
}

[portrait-picker] {
    max-width: var(--profile-image-size);
    aspect-ratio: 1;
    width: var(--profile-image-size);
    background: none;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    padding: 0;
    overflow: hidden;
}

@media (max-width: 39.999em) {
    [portrait-picker] {
        width: 100%;
        height: 100%;
        max-width: 100%;
    }
}

[portrait-picker]:hover {
    border-color: var(--color-accent);
}

[portrait-picker]::after {
    content: "Click to choose a portrait";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
    padding: var(--space-4);
}

[portrait-picker]:hover::after {
    color: var(--color-accent);
}

[portrait-picker][has-image] {
    border: 1px solid var(--color-border);
}

[portrait-picker][has-image]::after {
    display: none;
}

/* Location picker uses a location-specific prompt instead of the default
   "Click to choose a portrait" text shared with character and NPC pickers. */
#location-image-picker-btn::after {
    content: "Click to choose an image";
}

[portrait-picker] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

[portrait-picker] img[hidden] {
    display: none;
}

/* Image picker dialog (shared between character sheet and NPC creator) */
[portrait-dialog] {
    max-width: 72rem;
}

/* Image grid */
cs-image-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fill,
        minmax(var(--profile-image-size), 1fr)
    );
    gap: var(--space-3);
}

cs-image-grid button {
    background: var(--color-bg-secondary);
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    aspect-ratio: 1;
    transform: rotateY(90deg);
    transition: transform var(--transition-fast-out);
}

/* Placeholder buttons (no <img> child yet) reserve grid space so the
   dialog-body has its full scroll height before lazy hydration kicks in. */
cs-image-grid button.image-placeholder {
    background: var(--color-bg-secondary);
}

cs-image-grid button.cs-image-flipped {
    transform: rotateY(0);
}

cs-image-grid button:hover {
    border-color: var(--color-accent);
}

cs-image-grid button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

cs-image-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --------------------------------------------------------------------------
   Design system demo helpers
   Used only on /design-system — placeholder children for live examples.
   -------------------------------------------------------------------------- */

/* h2 default: prose section divider. Use variant="plain" to opt out. */
h2 {
    margin-top: var(--space-section);
    padding-top: var(--space-block);
    border-top: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-weight: var(--font-weight-bold);
    font-size: var(--text-h2);
    letter-spacing: -0.02em;
    line-height: var(--line-height-tight);
}

/* Plain variant: mono bold only, no divider/margin/padding. Use for dialog titles,
   stat-block labels, and any mid-container h2 that shouldn't read as a section break. */
h2[variant="plain"] {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.ds-demo-box {
    border: 2px dashed var(--color-border);
    background-color: var(--color-bg-surface);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    padding: var(--space-group) var(--space-form-row);
    border-radius: var(--radius-md);
    text-align: center;
    min-width: 4rem;
}

tip-box {
    width: 100%;
}