/* ==========================================================================
   Chess It Out -- shared components
   ==========================================================================
   Loaded by every page after theme.css. Holds the reset, typography and the
   UI elements that used to exist twice: `.btn` (landing pages) and `.button`
   (game views) are now one component; `.button` is kept as an alias so the
   existing markup and JS keep working.

   No colour literals here -- everything comes from theme.css.
   ========================================================================== */

/* ------------------------------------------------------------- reset ---- */

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

html {
    -webkit-text-size-adjust: 100%;
    /* Kein blauer Kasten beim Antippen: mobile Browser legen per
       -webkit-tap-highlight-color eine Flaeche ueber jedes getippte Bedienelement.
       Auf den Vote-Knoepfen mit den Koenigen sah das aus wie ein Fehler. Die
       Rueckmeldung fehlt deshalb nicht -- die Elemente haben eigene :hover-,
       :active-, :focus-visible- und checked-Zustaende. Vererbt sich auf alles. */
    -webkit-tap-highlight-color: transparent;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-ui);
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    touch-action: manipulation;
}

h1, h2, h3, h4, p, figure, blockquote {
    margin: 0;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Digits that do not jitter -- clocks, ratings, material counts. */
.tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

/* --------------------------------------------------------- focus ring --- */

:focus {
    outline: none;
}

:focus-visible {
    outline: none;
    box-shadow: var(--ring);
    border-radius: var(--radius-sm);
}

/* ----------------------------------------------------------- buttons ---- */

.btn,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    min-height: 2.75rem;
    padding: 0 var(--space-5);

    font-family: var(--font-ui);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-decoration: none;

    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;

    background-color: var(--surface-2);
    color: var(--text);

    transition: background-color var(--transition),
                border-color var(--transition),
                color var(--transition),
                box-shadow var(--transition);
}

.btn:hover,
.button:hover {
    background-color: var(--surface-3);
    text-decoration: none;
}

.btn:active,
.button:active {
    background-color: var(--surface-2);
}

.btn:focus-visible,
.button:focus-visible {
    box-shadow: var(--ring);
}

.btn:disabled,
.button:disabled,
.btn.is-disabled,
.button.is-disabled,
.disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Variants ---------------------------------------------------------------- */

.btn-primary {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn-primary:active {
    background-color: var(--accent-active);
    border-color: var(--accent-active);
}

.btn-brand {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--text-on-brand);
}

.btn-brand:hover {
    background-color: var(--brand-hover);
    border-color: var(--brand-hover);
}

.btn-brand:active {
    background-color: var(--brand-active);
    border-color: var(--brand-active);
}

.btn-secondary {
    background-color: transparent;
    border-color: var(--border-accent);
    color: var(--accent);
}

.btn-secondary:hover {
    background-color: var(--accent-soft);
    border-color: var(--accent);
}

.btn-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--text-muted);
    font-weight: var(--fw-medium);
}

.btn-ghost:hover {
    background-color: var(--surface-2);
    color: var(--text);
}

.btn-danger {
    background-color: transparent;
    border-color: color-mix(in srgb, var(--danger) 55%, transparent);
    color: var(--danger);
}

.btn-danger:hover {
    background-color: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger-hover);
}

/* Wie .btn-danger, nur in Gold: fuer Nebenaktionen, die neben einem gefuellten
   Knopf stehen und ihn nicht ueberschreien sollen (Remis anbieten). */
.btn-outline-accent {
    background-color: transparent;
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    color: var(--accent);
}

.btn-outline-accent:hover {
    background-color: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-hover);
}

.btn-sm {
    min-height: 2.25rem;
    padding: 0 var(--space-4);
    font-size: var(--fs-sm);
}

.btn-lg {
    min-height: 3.25rem;
    padding: 0 var(--space-6);
    font-size: var(--fs-lg);
}

.btn-block {
    display: flex;
    width: 100%;
}

/* --------------------------------------------------------------- card --- */

.card {
    background-color: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* -------------------------------------------------------------- badge --- */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-2);
    min-height: 1.25rem;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    background-color: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--border-accent);
}

/* --------------------------------------------------------------- icon --- */

.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.icon-filled {
    fill: currentColor;
    stroke: none;
}

/* -------------------------------------------------------- help popover --- */
/* A small "(?)" trigger next to a control, opening a short explanation.
   Wire-up is generic -- static/help_popover.js binds any `.help-btn` whose
   `aria-controls` points at a sibling `.help-popover` -- so this pair can be
   dropped next to any control without new JS. */

/* Abgeschaltet ueber den Haken in der Sidebar (siehe help_popover.js). Die
   Elemente bleiben im DOM -- die Beschriftung der Bedienelemente haengt an
   ihnen (aria-controls), und der Zustand kann jederzeit zurueckgeschaltet
   werden, ohne dass eine Seite neu geladen werden muss. */
body.no-help-icons .help {
    display: none;
}

/* Taken out of flow and hung off the right edge of its host, so the control it
   annotates stays centred on its own width -- in flow the icon widened the row
   and pushed "skip" / "Peek" off-centre. The host needs `position: relative`
   (see #checkbox-container and .button-row in main_view.css). */
.help {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    margin-left: var(--space-2);

    display: inline-flex;
    flex: none;
}

/* `.help` is a class selector and would otherwise beat the UA's
   `[hidden] { display: none }`, leaving #peek-help visible on screens that
   explicitly hide it (the invite screen, for one). */
.help[hidden] {
    display: none;
}

.help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;

    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    margin: 0;

    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--text-faint);

    background-color: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-full);
    cursor: pointer;

    transition: color var(--transition), border-color var(--transition),
                background-color var(--transition);
}

.help-btn:hover {
    color: var(--text);
    border-color: var(--border-accent);
}

.help-btn[aria-expanded="true"] {
    color: var(--text-on-accent);
    background-color: var(--accent);
    border-color: var(--accent);
}

.help-btn:focus-visible {
    box-shadow: var(--ring);
}

.help-popover {
    position: absolute;
    z-index: var(--z-popup);
    bottom: calc(100% + var(--space-2));
    left: 50%;
    transform: translateX(calc(-50% + var(--help-shift, 0px)));

    width: max-content;
    max-width: 14rem;
    padding: var(--space-3);

    font-family: var(--font-ui);
    font-size: var(--fs-xs);
    font-weight: var(--fw-normal);
    line-height: var(--lh-normal);
    text-align: left;
    color: var(--text);

    background-color: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.help-popover[hidden] {
    display: none;
}

/* ------------------------------------------------------- form controls --- */

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: left;
}

.field > label,
.form-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

.input,
input[type="number"].input,
input[type="text"].input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0 var(--space-3);
    font-family: var(--font-ui);
    font-size: var(--fs-md);
    font-variant-numeric: tabular-nums;
    text-align: center;
    color: var(--text);
    background-color: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.input:hover {
    border-color: var(--border-brand);
}

.input:focus-visible {
    border-color: var(--accent);
    box-shadow: var(--ring);
}

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

/* Spinners off -- the values are stepped by the surrounding UI, not the arrows */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ------------------------------------------------------------- toggle --- */
/* A labelled checkbox that reads as a control rather than as a raw input. */

.toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background-color: var(--surface-1);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    user-select: none;
    transition: border-color var(--transition), color var(--transition),
                background-color var(--transition);
}

.toggle:hover {
    border-color: var(--border-strong);
    color: var(--text);
}

.toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    flex: none;
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80%;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition);
}

.toggle input[type="checkbox"]:checked {
    background-color: var(--accent);
    border-color: var(--accent);
    /* A real check mark, not the X the old control used. Stroke is
       --text-on-accent's static equivalent; masks cannot read a var(). */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131518' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

.toggle:has(input:checked) {
    border-color: var(--border-accent);
    color: var(--text);
}

.toggle input[type="checkbox"]:focus-visible {
    box-shadow: var(--ring);
}

/* ------------------------------------------------------- login option --- */
/* Die Wahl "darf Chess It Out fuer mich ziehen?", die vor dem Sprung auf die
   lichess-Zustimmungsseite getroffen wird -- in der Sidebar unter dem Sign-In-Knopf
   (templates/_login_option.html) und im Spiel im Login-Overlay (main_view.js).
   Aussehen kommt von .toggle, hier nur die Platzierung: als Block statt inline, weil
   der Text in der schmalen Sidebar umbricht (align-items: flex-start haelt das
   Kaestchen dabei an der ersten Zeile, nicht in der Mitte des Blocks). */

.login-option {
    display: flex;
    align-items: flex-start;
    width: 100%;
    max-width: 32rem;
    text-align: left;
    line-height: var(--lh-normal);
}

/* Klassenselektor -- schlaegt sonst das `[hidden] { display: none }` des Browsers
   (landing.js blendet den Block fuer eingeloggte Spieler so aus). */
.login-option[hidden] {
    display: none;
}

/* -------------------------------------------------- segmented control --- */
/* The vote control. Radio inputs and their values are untouched -- this is
   purely the presentation layer, so main_view.js keeps working. */

.segmented {
    display: inline-flex;
    align-items: stretch;
    padding: var(--space-1);
    gap: var(--space-1);
    background-color: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.segmented label {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);

    min-height: 2.75rem;
    min-width: 5.5rem;
    padding: var(--space-2) var(--space-4);

    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-tight);
    text-align: center;
    color: var(--text-muted);

    border-radius: var(--radius-md);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition), color var(--transition);
}

.segmented label:hover {
    background-color: var(--surface-2);
    color: var(--text);
}

/* The input stays in the DOM (JS reads .checked) but is visually replaced by
   its label. It is still focusable and still announced by screen readers. */
.segmented input[type="radio"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.segmented label:has(input:checked) {
    background-color: var(--accent);
    color: var(--text-on-accent);
}

.segmented label:has(input:focus-visible) {
    box-shadow: var(--ring);
}

/* A hidden option -- the vote UI hides 3 of its 5 -- must not leave a gap. */
.segmented label[hidden],
.segmented label.is-hidden {
    display: none;
}

/* ------------------------------------------------------- message card --- */
/* Replaces the bare <pre> that used to sit inside #overlay. */

.message-card {
    max-width: min(30rem, 88%);
    margin: 0;
    padding: var(--space-5) var(--space-6);

    font-family: var(--font-ui);
    font-size: var(--fs-lg);
    font-weight: var(--fw-medium);
    line-height: var(--lh-normal);
    text-align: center;
    white-space: pre-wrap;
    color: var(--text);

    background-color: var(--surface-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.message-card:empty {
    display: none;
}

.message-card a {
    word-break: break-all;
}

/* ------------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}