/* ==========================================================================
   Soltherra — Component Styles

   Page-specific component styles: rules pages, glossary, flanking widget,
   combiner, lore navigation, and other non-layout components.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Home Page
   -------------------------------------------------------------------------- */

home-lead {
    display: block;
    font-size: var(--text-h4);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

/* --------------------------------------------------------------------------
   Rules Pages
   -------------------------------------------------------------------------- */

rules-lead {
    display: block;
    font-size: var(--text-h4);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-7);
}

rules-section {
    display: block;
    margin-bottom: var(--space-8);
}

rules-section h2 {
    color: var(--color-accent);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--color-border);
}

rules-section h3 {
    color: var(--color-text-primary);
    margin-top: var(--space-6);
    margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   Rules Tables (styled for light theme)
   -------------------------------------------------------------------------- */

rules-table {
    display: block;
    width: 100%;
    min-width: 16rem;
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow-x: auto;
    overflow-y: hidden;
}

rules-table th {
    background-color: var(--color-bg-surface);
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
    border-bottom: 2px solid var(--color-border);
    padding: var(--space-2) var(--space-6);
}

rules-table td {
    padding: var(--space-2) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

rules-table tbody tr:nth-child(even) {
    background-color: var(--color-bg-secondary);
}

rules-table tbody tr:last-child td {
    border-bottom: none;
}

rules-table [divider] {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* --- Responsive tables: horizontal scroll on narrow screens --- */

@media (max-width: 39.999em) {
    rules-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    rules-table th,
    rules-table td {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-sm);
    }
}

/* --- Spell tier cards --- */

spell-tier-cards {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

spell-tier {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

spell-tier:nth-child(even) {
    background-color: var(--color-bg-secondary);
}

spell-tier-header {
    display: block;
    padding: var(--space-2) var(--space-4);
    background-color: var(--color-bg-surface);
    color: var(--color-accent);
    font-weight: var(--font-weight-bold);
    border-bottom: 1px solid var(--color-border);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

spell-tier-header a {
    color: inherit;
    text-decoration: none;
}

spell-tier-props {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    padding: var(--space-3);
}

spell-tier-prop[variant="wide"] {
    grid-column: 1 / -1;
}

spell-tier-label {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--space-1);
}

spell-tier-value {
    display: block;
}

@media (min-width: 48em) {
    spell-tier-props {
        grid-template-columns: 1fr 1fr 1fr;
    }
    spell-tier-prop[variant="span-2"] {
        grid-column: span 2;
    }
}

@media (max-width: 39.999em) {
    spell-tier-props {
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   Skill Example Interactive Controls
   -------------------------------------------------------------------------- */

skill-example-controls {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

skill-example-controls label {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

skill-example-controls input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: var(--color-border);
    border-radius: var(--radius-sm);
    outline: none;
    cursor: pointer;
}

skill-example-controls input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    cursor: pointer;
    transition: background var(--transition-fast);
}

skill-example-controls input[type="range"]::-moz-range-thumb {
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    cursor: pointer;
    transition: background var(--transition-fast);
}

skill-example-controls input[type="range"]:hover::-webkit-slider-thumb,
skill-example-controls input[type="range"]:focus::-webkit-slider-thumb {
    background: var(--color-accent-hover);
}

skill-example-controls input[type="range"]:hover::-moz-range-thumb,
skill-example-controls input[type="range"]:focus::-moz-range-thumb {
    background: var(--color-accent-hover);
}

skill-example-controls input[type="range"]:focus-visible {
    outline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Gift + Skill Combiner
   -------------------------------------------------------------------------- */

combiner-controls {
    display: flex;
    gap: var(--space-6);
    margin-bottom: var(--space-6);
    flex-wrap: wrap;
}

combiner-select-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
    min-width: 12rem;
}

combiner-select-group label {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

combiner-select-group select {
    appearance: none;
    -webkit-appearance: none;
    padding: var(--space-2) var(--space-7) var(--space-2) var(--space-4);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237A746D' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-2) center;
    background-size: 12px 8px;
    transition: border-color var(--transition-fast);
}

combiner-select-group select:hover {
    border-color: var(--color-accent);
}

combiner-select-group select:focus-visible {
    border-color: var(--color-accent);
}

combiner-select-group select option,
combiner-select-group select optgroup {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

combiner-select-group select optgroup {
    font-weight: var(--font-weight-bold);
    color: var(--color-accent);
}

combination-results {
    display: block;
    min-height: 4rem;
}

combination-prompt {
    display: block;
    color: var(--color-text-muted);
    font-style: italic;
}

combination-note {
    display: block;
}

/* Mobile: stack combiner controls vertically */
@media (max-width: 39.999em) {
    combiner-controls {
        flex-direction: column;
    }

    combiner-select-group {
        min-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Glossary Tooltips
   -------------------------------------------------------------------------- */

glossary-term {
    display: inline;
    position: relative;
    color: inherit;
}

glossary-term[resolved] {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
    text-decoration-color: var(--color-text-secondary);
    cursor: help;
}

glossary-popover {
    display: none;
    position: fixed;
    width: max-content;
    max-width: 300px;
    background-color: var(--color-bg-surface-bright);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    z-index: var(--z-popover);
    font-size: var(--text-sm);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-normal);
    color: var(--color-text-primary);
    box-shadow: var(--shadow-md);
}

glossary-popover[active] {
    display: block;
}

glossary-popover-text {
    display: block;
    margin-bottom: var(--space-1);
}

glossary-popover-arrow {
    display: block;
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid var(--color-border);
}

glossary-popover-arrow::after {
    content: "";
    position: absolute;
    bottom: 1px;
    left: -5px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--color-bg-surface-bright);
}

/* Mobile: constrain popover so it doesn't overflow the viewport */
@media (max-width: 39.999em) {
    glossary-popover {
        left: var(--space-4) !important;
        right: var(--space-4);
        width: auto;
        max-width: none;
    }

    glossary-popover-arrow {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Glossary List (full-page glossary)
   -------------------------------------------------------------------------- */

glossary-list {
    display: block;
    margin-bottom: var(--space-7);
}

glossary-list dt {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-top: var(--space-6);
}

glossary-list dt:first-child {
    margin-top: 0;
}

glossary-list dd {
    margin-left: var(--space-6);
    padding-left: var(--space-2);
    border-left: 2px solid var(--color-border);
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
}

glossary-list dd a {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration-color: var(--color-border-light);
}

glossary-list dd a:hover,
glossary-list dd a:focus-visible {
    color: var(--color-link-hover);
    text-decoration-color: var(--color-link-hover);
}

/* Mobile: reduce left indent so entries don't overflow narrow screens */
@media (max-width: 39.999em) {
    glossary-list dd {
        margin-left: var(--space-4);
        padding-left: var(--space-1);
    }
}

/* --------------------------------------------------------------------------
   Flanking Widget
   -------------------------------------------------------------------------- */

#flanking-widget {
    margin-bottom: var(--space-4);
}

flanking-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

flanking-controls button {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    font-size: var(--text-sm);
    font-family: inherit;
    transition:
        border-color var(--transition-fast),
        background-color var(--transition-fast);
}

flanking-controls button:hover {
    border-color: var(--color-accent);
    background-color: var(--color-bg-secondary);
}

flanking-status {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Rules Callouts
   -------------------------------------------------------------------------- */

rule-callout {
    display: block;
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

rule-callout h3 {
    margin-top: 0;
}

rule-callout[variant="warning"] {
    border-left-color: var(--color-warm);
}

rule-callout[variant="constraint"] {
    border-left-color: var(--color-error);
}

/* --------------------------------------------------------------------------
   Lore Navigation (world index cards)
   -------------------------------------------------------------------------- */

lore-nav {
    display: block;
    margin-top: var(--space-8);
}

lore-nav ul {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

lore-nav-card {
    display: block;
    padding: var(--space-4);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition-fast);
}

lore-nav-card:hover,
lore-nav-card:focus-visible {
    border-color: var(--color-accent);
}

lore-nav-card-title {
    display: block;
    font-size: var(--text-h4);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-1);
}

lore-nav-card-desc {
    display: block;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
}

@media (min-width: 40em) {
    lore-nav ul {
        grid-template-columns: 1fr 1fr;
    }
}

/* --------------------------------------------------------------------------
   Login Form
   -------------------------------------------------------------------------- */

login-form {
    display: block;
    max-width: 400px;
    margin: var(--space-8) auto;
    padding: var(--space-6);
    background-color: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

login-form h1 {
    margin-bottom: var(--space-2);
}

login-form p {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

login-form label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-1);
}

login-form input[type="email"] {
    display: block;
    width: 100%;
    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);
    margin-bottom: var(--space-4);
}

login-form input[type="email"]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-color: var(--color-accent);
}

login-form button[type="submit"] {
    width: 100%;
}

/* --------------------------------------------------------------------------
   Lore See-Also (cross-page navigation footer)
   -------------------------------------------------------------------------- */

lore-see-also {
    display: block;
    margin-top: var(--space-8);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Header Auth (login/logout state in site header)
   -------------------------------------------------------------------------- */

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

header-auth-email {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

header-auth-logout,
header-auth-login {
    font-size: var(--text-sm);
    color: var(--color-accent);
    background: none;
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

header-auth-logout:hover,
header-auth-login:hover {
    background: var(--color-accent);
    color: var(--color-bg-primary);
}

/* Hide email on small screens, just show login/logout.
   One-off breakpoint: 600px (~37.5em) is intentionally narrower than the
   standard 39.999em mobile-max defined in main.css. The email label hides
   slightly earlier than the general mobile layout kicks in, because the
   header row gets crowded before the body does. Do not migrate this to
   39.999em without visual QA across the 37.5em-40em window. */
@media (max-width: 600px) {
    header-auth-email {
        display: none;
    }
}

/* Hide in print */
@media print {
    header-auth {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Character Bar (character list select + create + status)
   -------------------------------------------------------------------------- */

character-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-4);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

character-bar select {
    flex: 0 1 auto;
    min-width: 200px;
    max-width: 300px;
}

#character-create-btn {
    white-space: nowrap;
}

/* Hide create button in saved mode, show in draft mode */
character-bar[data-mode="saved"] #character-create-btn {
    display: none;
}

/* Hide character bar in print */
@media print {
    character-bar {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Glossary search dialog
   -------------------------------------------------------------------------- */

#glossary-search-dialog {
    margin: auto;
    width: calc(100% - var(--space-7));
    max-width: 40rem;
    height: calc(100vh - var(--space-7));
    overflow: hidden;
    display: flex;
    flex-direction: column;
    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);
}

#glossary-search-dialog:not([open]) {
    display: none;
}

#glossary-search-dialog::backdrop {
    background: var(--color-scrim-dark);
}

#glossary-search-dialog-close {
    align-self: flex-end;
    background: none;
    border: none;
    font-size: var(--text-h2);
    line-height: 1;
    cursor: pointer;
    color: var(--color-text-secondary);
    padding: 0 var(--space-1);
}

#glossary-search-dialog-close:hover {
    color: var(--color-text-primary);
}

glossary-search-header {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    background-color: var(--color-bg-surface);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}

glossary-search-header input {
    flex: 1;
}

glossary-search-header button {
    flex-shrink: 0;
}

#glossary-search-dialog glossary-list {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    margin-bottom: 0;
}