/* Kopīgais stils: /, /turniri/noteikumi/, /turniri/grafiki/, /org/, /speles/. Lapu īpašais CSS paliek inline.
   Mainot tokenu nosaukumus — /org/ lieto --primary*, --accent, --border, --text-light, --radius, --shadow, .btn-submit. */

/* ---------- Reset ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    padding: 0;
}

:root {
    interpolate-size: allow-keywords;
    scrollbar-gutter: stable;
    text-wrap: pretty;
    overflow-wrap: break-word;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

body { min-height: 100svh; }
h1, h2, h3, h4 { text-wrap: balance; }
img, svg, video { display: block; max-width: 100%; height: auto; }
input, textarea, select { font-size: max(16px, 1rem); }
button, a, [role="button"] { touch-action: manipulation; }
button, [role="button"] { user-select: none; -webkit-user-select: none; }
[hidden] { display: none !important; }

/* ---------- Tokeni ---------- */
:root {
    color-scheme: only light; /* tikai gaišs — neļauj pārlūkam automātiski tumšot */

    /* krāsas: viena akcenta krāsa — METTA zaļā */
    --green: oklch(50% 0.13 152);
    --green-deep: oklch(29% 0.06 155);
    --green-ink: color-mix(in oklch, var(--green), black 30%);
    --green-tint: color-mix(in oklch, var(--green) 9%, white);
    --green-hover: color-mix(in oklch, var(--green), black 15%);
    --ink: oklch(23% 0.02 155);
    --muted: oklch(47% 0.015 155);
    --paper: oklch(98.6% 0.003 150);
    --surface: oklch(100% 0 none);
    --line: color-mix(in oklch, var(--ink) 15%, transparent);
    --line-strong: color-mix(in oklch, var(--ink) 30%, transparent);
    --danger: oklch(50% 0.17 28);
    --on-dark: oklch(100% 0 none);
    --on-dark-muted: color-mix(in oklch, var(--on-dark) 72%, transparent);

    /* saderība ar /org/ un vecajām lapām */
    --primary: var(--green);
    --primary-dark: var(--green-deep);
    --primary-light: var(--green-tint);
    --accent: color-mix(in oklch, var(--green), white 45%);
    --bg: var(--paper);
    --card-bg: var(--surface);
    --text: var(--ink);
    --text-light: var(--muted);
    --border: var(--line);
    --radius: 0.625rem;
    --shadow: 0 1px 2px color-mix(in oklch, var(--ink) 10%, transparent), 0 0 0 1px var(--line);

    /* viena fluid skala tipogrāfijai un atstarpēm (6 ievades) */
    --narrow: 20;
    --wide: 77.5;
    --size-narrow: 1;
    --size-wide: 1.125;
    --ratio-narrow: 1.2;
    --ratio-wide: 1.28;

    --fluid: clamp(0rem, (100vw - var(--narrow) * 1rem) / (var(--wide) - var(--narrow)), 1rem);
    --at-narrow: calc(var(--size-narrow) * (1rem - var(--fluid)));
    --at-wide: calc(var(--size-wide) * var(--fluid));

    --step--1: calc(var(--step-0) / var(--ratio-narrow));
    --step-0: calc(var(--at-narrow) + var(--at-wide));
    --step-1: calc(var(--at-narrow) * var(--ratio-narrow) + var(--at-wide) * var(--ratio-wide));
    --step-2: calc(var(--at-narrow) * pow(var(--ratio-narrow), 2) + var(--at-wide) * pow(var(--ratio-wide), 2));
    --step-3: calc(var(--at-narrow) * pow(var(--ratio-narrow), 3) + var(--at-wide) * pow(var(--ratio-wide), 3));
    --step-4: calc(var(--at-narrow) * pow(var(--ratio-narrow), 4) + var(--at-wide) * pow(var(--ratio-wide), 4));
    --step-5: calc(var(--at-narrow) * pow(var(--ratio-narrow), 5) + var(--at-wide) * pow(var(--ratio-wide), 5));

    --space-xs: calc(0.5 * var(--step-0));
    --space-s: var(--step-0);
    --space-m: calc(1.5 * var(--step-0));
    --space-l: calc(2 * var(--step-0));
    --space-xl: calc(3 * var(--step-0));
    --space-section: calc(var(--at-narrow) * 3 + var(--at-wide) * 5);

    --nav-h: 3.5rem;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

    --font: 'Archivo', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html { scroll-padding-block-start: calc(var(--nav-h) + 1rem); }
html:has(dialog:modal) { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.55;
    background: var(--paper);
    color: var(--ink);
}

a { color: var(--green-ink); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
:focus-visible { outline: max(2px, 0.08em) solid var(--green); outline-offset: 0.2em; }

/* ---------- Satura režģis ar breakout ---------- */
.content-grid {
    --gutter: var(--space-s);
    --content: 48rem;
    --breakout: 68rem;

    display: grid;
    grid-template-columns:
        [full-width-start] minmax(var(--gutter), 1fr)
        [breakout-start] minmax(0, calc((var(--breakout) - var(--content)) / 2))
        [content-start] min(100% - var(--gutter) * 2, var(--content)) [content-end]
        minmax(0, calc((var(--breakout) - var(--content)) / 2)) [breakout-end]
        minmax(var(--gutter), 1fr) [full-width-end];
}
:is(.content-grid, .full-width) > * { grid-column: content; }
:is(.content-grid, .full-width) > .breakout { grid-column: breakout; }
:is(.content-grid, .full-width) > .full-width { grid-column: full-width; display: grid; grid-template-columns: inherit; }

/* Publisko apakšlapu sadaļa (noteikumi, grafiki) */
.page { padding-block: var(--space-l) var(--space-section); }
.section-title { font-size: var(--step-3); font-weight: 750; line-height: 1.1; letter-spacing: -0.01em; font-stretch: 85%; }
.section-subtitle { color: var(--muted); margin-block: var(--space-xs) var(--space-l); max-inline-size: 60ch; }

/* ---------- Navigācija ---------- */
nav {
    position: sticky;
    inset-block-start: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: var(--space-s);
    min-block-size: var(--nav-h);
    padding-inline: var(--space-s);
    background: var(--green-deep);
    color: var(--on-dark);
}
nav .nav-brand { flex: none; }
nav .logo { color: var(--on-dark); font-weight: 750; font-stretch: 80%; font-size: 1.15rem; letter-spacing: 0.01em; text-decoration: none; }
nav .logo span { color: var(--accent); }
/* Šaurā ekrānā saites ir popover sarakstā zem pogas "Izvēlne"; no 48rem — rindā, poga paslēpta */
.nav-menu-btn {
    margin-inline-start: auto;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--on-dark);
    background: transparent;
    border: 1px solid color-mix(in oklch, var(--on-dark) 35%, transparent);
    border-radius: 0.375rem;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
}
.nav-menu-btn:active { background: color-mix(in oklch, var(--on-dark) 18%, transparent); }
.nav-menu-btn:focus-visible { outline-color: var(--on-dark); }
nav .nav-links {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0.125rem;
    min-inline-size: 14rem;
    padding: 0.5rem;
    margin: 0;
    background: var(--green-deep);
    border: 1px solid color-mix(in oklch, var(--on-dark) 20%, transparent);
    border-radius: var(--radius);
    box-shadow: 0 0.75rem 2rem color-mix(in oklch, black 35%, transparent);
    opacity: 0;
    transition: opacity 0.15s ease-out, display 0.15s allow-discrete, overlay 0.15s allow-discrete;
}
nav .nav-links:popover-open { display: flex; opacity: 1; }
@starting-style { nav .nav-links:popover-open { opacity: 0; } }
@supports (position-area: block-end) {
    nav .nav-links { position-area: block-end span-inline-start; margin-block-start: 0.5rem; position-try-fallbacks: flip-inline; }
}
@media (width >= 48rem) {
    .nav-menu-btn { display: none; }
    nav .nav-links,
    nav .nav-links:popover-open {
        position: static;
        display: flex;
        flex: 1;
        flex-direction: row;
        align-items: center;
        min-inline-size: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: none;
        opacity: 1;
        overflow: visible;
        inset: auto;
        inline-size: auto;
        block-size: auto;
        color: inherit;
    }
}
nav .nav-links a {
    flex: none;
    color: var(--on-dark-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 550;
    padding: 0.55rem 0.75rem;
    border-radius: 0.375rem;
    white-space: nowrap;
    transition: color 0.15s, background-color 0.15s;
}
nav .nav-links a[aria-current="page"] { color: var(--on-dark); background: color-mix(in oklch, var(--on-dark) 12%, transparent); }
@media (width >= 48rem) { nav .nav-links a.nav-switch { margin-inline-start: auto; } }
nav .nav-links a:active { background: color-mix(in oklch, var(--on-dark) 18%, transparent); }
nav .nav-links a:focus-visible { outline-color: var(--on-dark); outline-offset: -2px; }
.lang-toggle {
    flex: none;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 650;
    color: var(--on-dark);
    background: transparent;
    border: 1px solid color-mix(in oklch, var(--on-dark) 35%, transparent);
    border-radius: 0.375rem;
    padding: 0.3rem 0.55rem;
    cursor: pointer;
}
.lang-toggle:active { background: color-mix(in oklch, var(--on-dark) 18%, transparent); }
.lang-toggle:focus-visible { outline-color: var(--on-dark); }
@media (hover: hover) and (pointer: fine) {
    nav .nav-links a:hover { color: var(--on-dark); background: color-mix(in oklch, var(--on-dark) 10%, transparent); }
    .lang-toggle:hover, .nav-menu-btn:hover { border-color: var(--on-dark); }
}

/* ---------- Pogas ---------- */
.button, .btn-submit, .btn-register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    font: inherit;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    color: var(--on-dark);
    background: var(--green);
    border: 1px solid var(--green);
    border-radius: 0.5rem;
    padding: 0.8em 1.4em;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn-submit { inline-size: 100%; }
.button.quiet, .btn-ics {
    color: var(--green-ink);
    background: var(--surface);
    border-color: var(--line-strong);
}
.button:focus-visible, .btn-submit:focus-visible, .btn-register:focus-visible { outline-color: var(--green-ink); }
.button:active, .btn-submit:active, .btn-register:active { transform: scale(0.97); }
.button:disabled, .btn-submit:disabled { opacity: 0.6; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
    .button:hover, .btn-submit:hover, .btn-register:hover { background: var(--green-hover); border-color: var(--green-hover); }
    .button.quiet:hover, .btn-ics:hover { background: var(--green-tint); border-color: var(--green); }
}
@media (prefers-reduced-motion: no-preference) {
    .button, .btn-submit, .btn-register { transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 160ms var(--ease-out); }
}

/* Teksta poga (izskatās kā saite) */
.link-button {
    font: inherit;
    color: var(--green-ink);
    background: none;
    border: 0;
    padding: 0.35em 0.25em;
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    cursor: pointer;
}
.link-button:active { color: var(--ink); }

/* ---------- Formas lauki ---------- */
.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field > label, .field-label { font-weight: 600; font-size: 0.95rem; }
.field .hint { color: var(--muted); font-size: var(--step--1); }
.field input, .field textarea, .field select {
    font: inherit;
    font-size: max(16px, 1rem);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: 0.5rem;
    padding: 0.65rem 0.75rem;
    inline-size: 100%;
    transition: border-color 0.15s;
}
.field textarea { field-sizing: content; min-block-size: 3lh; max-block-size: 12lh; resize: none; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 0; border-color: var(--green); }
.field :user-invalid { border-color: var(--danger); }
.field .field-error { display: none; color: var(--danger); font-size: var(--step--1); font-weight: 550; }
.field:has(:user-invalid) .field-error { display: block; }
.form-error { color: var(--danger); font-weight: 600; }
.hp-field { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: clip; }

/* ---------- Grafika dialogs ---------- */
dialog.sched-modal {
    inline-size: min(100% - 1.5rem, 56rem);
    max-inline-size: none;
    max-block-size: min(100dvh - 1.5rem, 60rem);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: 0.75rem;
    color: var(--ink);
    background: var(--surface);
    box-shadow: 0 1.5rem 4rem color-mix(in oklch, var(--ink) 35%, transparent);
    overscroll-behavior: contain;
}
dialog.sched-modal::backdrop { background: color-mix(in oklch, var(--green-deep) 70%, transparent); }
.sched-modal-inner { padding: var(--space-m); display: flex; flex-direction: column; gap: var(--space-s); }
.sched-modal-header { display: flex; align-items: start; gap: var(--space-s); }
.sched-modal-header > div { flex: 1; }
.sched-modal-title { font-size: var(--step-2); font-weight: 750; font-stretch: 85%; line-height: 1.15; }
.sched-modal-subtitle { color: var(--muted); margin-block-start: 0.25rem; }
.sched-modal-close {
    position: relative;
    flex: none;
    font: inherit;
    font-size: 1.5rem;
    line-height: 1;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    color: var(--muted);
    background: none;
    border: 0;
    border-radius: 0.375rem;
    cursor: pointer;
}
.sched-modal-close::after { content: ""; position: absolute; inset: min(0px, (100% - 44px) / 2); }
.sched-modal-close:active { background: var(--green-tint); }
@media (hover: hover) and (pointer: fine) {
    .sched-modal-close:hover { color: var(--ink); background: var(--green-tint); }
}
.sched-info { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr)); gap: 0.75rem 1rem; padding: var(--space-s); background: var(--paper); border-radius: 0.5rem; }
.sched-info > div { display: flex; flex-direction: column; }
.sched-info .label { color: var(--muted); font-size: var(--step--1); }
.sched-info .value { font-weight: 650; font-variant-numeric: tabular-nums; }
.sched-section-title { font-size: var(--step-1); font-weight: 700; margin-block-start: var(--space-xs); }
.sched-team-list { padding-inline-start: 1.5rem; }
.sched-team-list.empty, .sched-team-list.wait { padding-inline-start: 0; color: var(--muted); }
.sched-pending { color: var(--muted); }
.sched-table-wrap { overflow-x: auto; }
.sched-table { inline-size: 100%; border-collapse: collapse; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.sched-table th { text-align: start; font-weight: 650; color: var(--muted); padding: 0.4rem 0.5rem; border-block-end: 1px solid var(--line-strong); white-space: nowrap; }
.sched-table td { padding: 0.5rem; border-block-end: 1px solid var(--line); vertical-align: top; }
.sched-table .round-cell, .sched-table .time-cell { white-space: nowrap; font-weight: 600; }
.sched-table .game-cell { white-space: nowrap; }
.sched-table .rest-cell { color: var(--muted); }
/* šaurā vietā (telefons, logs) tabula kļūst par kārtu kartītēm: "K1 · 10:00", zem tā laukumi un atpūta */
.sched-table-wrap { container-type: inline-size; }
@container (width < 34rem) {
  .sched-table, .sched-table tbody, .sched-table tr, .sched-table td { display: block; }
  .sched-table thead { display: none; }
  .sched-table tr { padding-block: 0.6rem; border-block-end: 1px solid var(--line-strong); }
  .sched-table td { border: 0; padding: 0.15rem 0; white-space: normal; }
  .sched-table .round-cell, .sched-table .time-cell { display: inline; }
  .sched-table .time-cell::before { content: " · "; }
  .sched-table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 0.85em; }
  .sched-table .empty { display: none; }
}
.slot-team { font-weight: 650; }
/* spēles rezultāts grafikā (no U-10; tabulu/vietu nav) */
.match-score { font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; padding-inline: 0.35em; color: var(--green-ink); }
.sched-modal-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-block-start: var(--space-xs); }

/* Pievienot kalendārā */
.cal-add-wrap { position: relative; display: inline-flex; }
.cal-add-menu {
    position: absolute;
    inset-block-end: calc(100% + 0.5rem);
    inset-inline-start: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-inline-size: 15rem;
    padding: 0.35rem;
    background: var(--surface);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem color-mix(in oklch, var(--ink) 20%, transparent), 0 0 0 1px var(--line);
}
.cal-add-menu button {
    font: inherit;
    font-weight: 550;
    text-align: start;
    color: var(--ink);
    background: none;
    border: 0;
    border-radius: 0.375rem;
    padding: 0.6rem 0.75rem;
    cursor: pointer;
    white-space: nowrap;
}
.cal-add-menu button:active { background: var(--green-tint); }
.cal-add-menu .cal-hint { color: var(--muted); font-size: var(--step--1); padding: 0.25rem 0.75rem 0.4rem; }
@media (hover: hover) and (pointer: fine) {
    .cal-add-menu button:hover { background: var(--green-tint); }
}

/* Dialoga parādīšanās no display:none */
dialog.sched-modal {
    opacity: 0;
    transition:
        opacity 0.2s var(--ease-out),
        translate 0.2s var(--ease-out),
        display 0.2s allow-discrete,
        overlay 0.2s allow-discrete;
}
dialog.sched-modal::backdrop {
    opacity: 0;
    transition:
        opacity 0.2s var(--ease-out),
        display 0.2s allow-discrete,
        overlay 0.2s allow-discrete;
}
dialog.sched-modal[open],
dialog.sched-modal[open]::backdrop { opacity: 1; }
@starting-style {
    dialog.sched-modal[open],
    dialog.sched-modal[open]::backdrop { opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
    dialog.sched-modal { translate: 0 0.5rem; }
    dialog.sched-modal[open] { translate: 0 0; }
    @starting-style {
        dialog.sched-modal[open] { translate: 0 0.5rem; }
    }
}

/* ---------- Noteikumu akordeons (/turniri/noteikumi/) ---------- */
.rules-container { display: flex; flex-direction: column; gap: 0.5rem; }
.rule-item { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.rule-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-s);
    padding: 0.9rem 1.1rem;
    font-weight: 650;
    cursor: pointer;
    border-radius: var(--radius);
}
.rule-header:active { background: var(--green-tint); }
.rule-header .arrow { flex: none; color: var(--muted); font-size: 0.75rem; }
.rule-item.open .rule-header .arrow { rotate: 180deg; }
.rule-body { display: none; padding: 0 1.1rem 1.1rem; overflow-x: auto; }
.rule-item.open .rule-body { display: block; }
.rule-body ul { padding-inline-start: 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; }
.rule-table { inline-size: 100%; border-collapse: collapse; margin-block: 0.25rem 0.75rem; font-size: 0.92rem; }
.rule-table th { text-align: start; font-weight: 650; color: var(--muted); padding: 0.45rem 0.6rem; border-block-end: 1px solid var(--line-strong); }
.rule-table td { padding: 0.45rem 0.6rem; border-block-end: 1px solid var(--line); }
@media (hover: hover) and (pointer: fine) {
    .rule-header:hover { background: var(--green-tint); }
}

/* ---------- Kājene ---------- */
footer {
    background: var(--green-deep);
    color: var(--on-dark-muted);
    padding: var(--space-xl) var(--space-s) var(--space-l);
    font-size: 0.9rem;
}
footer > * { max-inline-size: 68rem; margin-inline: auto; }
footer a { color: var(--on-dark); }
footer a:focus-visible { outline-color: var(--on-dark); }
.footer-social, .footer-sponsors { margin-block-end: var(--space-m); }
.footer-social-label, .footer-sponsors-label { font-size: var(--step--1); margin-block-end: 0.5rem; }
.footer-sponsors-list, .footer-social-list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); }
.footer-sponsors-list a, .footer-social-list a { display: inline-flex; align-items: center; color: var(--on-dark); }
.footer-sponsors-list img { flex: none; width: auto; filter: brightness(0) invert(1); opacity: 0.85; }
.footer-sponsor-failiem { height: 1.75rem; }
.footer-sponsor-metta { height: 2.75rem; }
.footer-social-list svg, .footer-ig { flex: none; inline-size: 1.75rem; block-size: 1.75rem; }
.footer-sponsors-list a:active, .footer-social-list a:active { opacity: 0.7; }
