/*
 * Suomi OW look for the public tournament pages (tournaments.html, tournament.html).
 * Loaded after styles.css and scoped to body.sow-theme, so the admin, draft and stream
 * pages keep their own look. Palette, fonts and component style follow the Suomi OW
 * graphic guidelines (the same as suomiow.fi); sow-fonts.css holds the self-hosted fonts.
 */

body.sow-theme {
    --sow-night: #001445;
    --sow-lion: #134380;
    --sow-crown: #1e8ab9;
    --sow-shadow: #0f356b;
    --sow-blade: #23c5d7;
    --sow-frost: #a9b8cc;
    --sow-white: #ffffff;

    --font-heading: 'Saira Semi Condensed', 'Arial Narrow', Arial, sans-serif;
    --font-body: 'Inter', Arial, sans-serif;

    /* sowdraft's own variables, mapped to the Suomi OW palette */
    --bg: var(--sow-night);
    --panel: var(--sow-shadow);
    --panel-strong: var(--sow-night);
    --surface: var(--sow-lion);
    --text: var(--sow-white);
    --muted: var(--sow-frost);
    --primary: var(--sow-blade);
    --primary-strong: var(--sow-blade);
    --accent: var(--sow-blade);
    --warn: var(--sow-blade);
    --border: var(--sow-lion);
    --shadow: none;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 100vh;
    padding: 0;
    background: var(--sow-night);
    color: var(--sow-white);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.5;
}

.sow-theme a { color: var(--sow-blade); text-underline-offset: 0.2em; }
.sow-theme a:hover { color: var(--sow-white); }

.sow-theme :focus-visible {
    outline: 2px solid var(--sow-blade);
    outline-offset: 3px;
}

/* Headings: left aligned, Saira Semi Condensed, H1 in capitals with a "teräviiva" under it */
.sow-theme h1,
.sow-theme h2,
.sow-theme h3,
.sow-theme h4 {
    font-family: var(--font-heading);
    color: var(--sow-white);
    text-align: left;
    line-height: 1.1;
    letter-spacing: 0;
}

.sow-theme h1 {
    font-size: 2.25rem;
    font-weight: 800;
    text-transform: uppercase;
}

.sow-theme h2 { font-size: 1.5rem; font-weight: 700; }
.sow-theme h3 { font-size: 1.125rem; font-weight: 700; }

.sow-theme h1::after {
    content: '';
    display: block;
    width: 160px; /* eight whole teeth */
    height: 10px;
    margin-top: 0.6rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpolygon points='0,10 10,0 20,10' fill='%2323c5d7'/%3E%3C/svg%3E") repeat-x;
}

/* No teräviiva under the tournament name on a tournament page */
.sow-theme #content h1::after { display: none; }

@media (min-width: 48em) {
    .sow-theme h1 { font-size: 3rem; }
    .sow-theme h2 { font-size: 2rem; }
    .sow-theme h3 { font-size: 1.5rem; }
}

/* The small uppercase labels above headings and cards */
.sow-theme .t-section-label,
.sow-theme .bracket-round-label,
.sow-theme .t-table th {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--sow-frost);
}

/* Cards: flat Varjonsininen surfaces, 4 px corners, no blur or shadow */
.sow-theme .t-card {
    background: var(--sow-shadow);
    border: 0;
    border-radius: 0.25rem;
    box-shadow: none;
    backdrop-filter: none;
}

.sow-theme a.t-card:hover {
    border: 0;
    transform: none;
    outline: 2px solid var(--sow-blade);
    outline-offset: -2px;
}

.sow-theme .t-team-card,
.sow-theme .ov-match-card,
.sow-theme .bmatch,
.sow-theme .t-list-item {
    background: var(--sow-night);
    border: 1px solid var(--sow-lion);
    border-radius: 0.25rem;
}

.sow-theme .ov-match-card:hover { border-color: var(--sow-blade); }
.sow-theme .bmatch.completed { border-color: var(--sow-crown); }
.sow-theme .bmatch.in_progress { border-color: var(--sow-blade); animation: none; }
.sow-theme .bmatch-team.winner,
.sow-theme .bmatch-team.winner .bmatch-score { color: var(--sow-blade); }

/* Tables */
.sow-theme .t-table th { border-bottom: 1px solid var(--sow-lion); }
.sow-theme .t-table td { border-bottom: 1px solid var(--sow-lion); }
.sow-theme .t-table tbody tr:hover { background: rgba(19, 67, 128, 0.35); }

/* Buttons: Teräsyaani with Yönsininen text, white on hover */
.sow-theme button,
.sow-theme .t-btn {
    min-height: 2.75rem;
    padding: 0.5rem 1.25rem;
    border: 2px solid var(--sow-blade);
    border-radius: 0.25rem;
    background: var(--sow-blade);
    color: var(--sow-night);
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    transform: none;
    filter: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.sow-theme button:hover,
.sow-theme .t-btn:hover {
    background: var(--sow-white);
    border-color: var(--sow-white);
    color: var(--sow-night);
    transform: none;
    filter: none;
}

.sow-theme .t-btn-secondary,
.sow-theme .t-btn-secondary:hover {
    background: transparent;
    color: var(--sow-blade);
    filter: none;
}

.sow-theme .t-btn-secondary:hover {
    background: var(--sow-white);
    color: var(--sow-night);
}

.sow-theme .t-btn-sm { min-height: 0; padding: 0.35rem 0.75rem; font-size: 0.9375rem; }

/* Tabs: underline in Teräsyaani */
.sow-theme .admin-tab-bar { border-bottom: 1px solid var(--sow-lion); }

.sow-theme .admin-tab-btn {
    min-height: 0;
    padding: 0.625rem 1.25rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--sow-frost);
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sow-theme .admin-tab-btn:hover {
    background: transparent;
    border-bottom-color: var(--sow-blade);
    color: var(--sow-white);
}

.sow-theme .admin-tab-btn.active {
    background: transparent;
    border-bottom: 2px solid var(--sow-blade);
    color: var(--sow-blade);
}

/* Tabs of the Add / Edit Participant page: a row of text tabs like the admin tabs. Without this the generic button rule above
   makes them filled Teräsyaani buttons, and the active tab's Teräsyaani text vanishes on that fill. */
.sow-theme .pt-edit-tabs { gap: 0.25rem; }

.sow-theme .pt-edit-tab {
    min-height: 0;
    padding: 0.5rem 1rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--sow-frost);
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.sow-theme .pt-edit-tab:hover {
    background: transparent;
    border-bottom-color: var(--sow-blade);
    color: var(--sow-white);
}

.sow-theme .pt-edit-tab.active {
    background: transparent;
    border-bottom: 2px solid var(--sow-blade);
    color: var(--sow-blade);
}

/* Filter buttons: outlined, filled when selected (same as the filters on suomiow.fi) */
.sow-theme .t-filter-btn {
    min-height: 2.5rem;
    padding: 0.25rem 1rem;
    border: 2px solid var(--sow-blade);
    border-radius: 0.25rem;
    background: transparent;
    color: var(--sow-white);
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sow-theme .t-filter-btn:hover { background: transparent; color: var(--sow-blade); }

.sow-theme .t-filter-btn.active,
.sow-theme .t-filter-btn.active:hover {
    background: var(--sow-blade);
    border-color: var(--sow-blade);
    color: var(--sow-night);
}

/* Status badges: outlined tags like on suomiow.fi */
.sow-theme .t-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 0.25rem;
    font-family: var(--font-heading);
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    background: transparent;
    color: var(--sow-white);
    border: 1px solid currentColor;
}

.sow-theme .t-badge-active {
    background: var(--sow-blade);
    border-color: var(--sow-blade);
    color: var(--sow-night);
    font-weight: 700;
}

.sow-theme .t-badge-setup,
.sow-theme .t-badge-completed,
.sow-theme .t-badge-archived {
    border-style: dashed;
    color: var(--sow-frost);
    background: transparent;
    opacity: 1;
}

/* Champion banner: gradient surface (top to bottom, Kruununsininen to Varjonsininen), big text on top */
.sow-theme .t-champion-banner {
    background: linear-gradient(to bottom, var(--sow-crown), var(--sow-shadow));
    border: 0;
    border-radius: 0.25rem;
    box-shadow: none;
}

.sow-theme .t-champion-banner > div {
    font-family: var(--font-heading);
    color: var(--sow-white) !important;
}

/* Inputs */
.sow-theme input[type="text"],
.sow-theme input[type="password"],
.sow-theme select,
.sow-theme .t-input {
    border: 1px solid var(--sow-frost);
    border-radius: 0.25rem;
    background: var(--sow-night);
    color: var(--sow-white);
    font-family: var(--font-body);
}

.sow-theme input[type="text"]:focus,
.sow-theme input[type="password"]:focus,
.sow-theme select:focus,
.sow-theme .t-input:focus {
    border-color: var(--sow-blade);
    box-shadow: 0 0 0 2px var(--sow-blade);
}

.sow-theme .t-empty,
.sow-theme .t-loading { color: var(--sow-frost); }

/* Wins use the palette's Teräsyaani; losses keep their red (#e06c6c, set inline in tournament.js) */
.sow-theme [style*="#4ade80"] { color: var(--sow-blade) !important; }

/* The overview's two-column layout is set inline in tournament.js: stack it on phones */
@media (max-width: 48em) {
    .sow-theme [style*="grid-template-columns:1fr 320px"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* Match setup page (user.html): its own inline classes */
.sow-theme label {
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
    color: var(--sow-frost);
}

.sow-theme .card {
    background: var(--sow-shadow);
    border: 0;
    border-radius: 0.25rem;
}

.sow-theme .btn-secondary {
    background: transparent;
    border: 2px solid var(--sow-blade);
    border-radius: 0.25rem;
    color: var(--sow-blade);
    font-weight: 700;
}

.sow-theme .btn-secondary:hover {
    background: var(--sow-white);
    border-color: var(--sow-white);
    color: var(--sow-night);
}

/* body.sow-theme: styles.css styles these with body:not(.draft-page), which would otherwise win */
body.sow-theme .map-category {
    padding: 1rem 0.5rem 0.75rem;
    border: 0;
    border-radius: 0.25rem;
    background: var(--sow-shadow);
}

body.sow-theme .map-category label {
    font-family: var(--font-body);
    font-size: 0.875rem;
    letter-spacing: 0;
    color: var(--sow-white);
}

/* Heading aligned with the checkboxes, a thin line between it and the list */
.sow-theme .map-category h4 {
    margin: 0 0 0.5rem;
    padding: 0 0.5rem 0.625rem;
    border-bottom: 1px solid var(--sow-lion);
    font-size: 1.125rem;
}

/* ── Page frame: the same width and gutters as suomiow.fi (1120 px) ── */
.sow-theme {
    --sow-page-width: 1120px;
    --sow-gutter: 1.25rem;
}

@media (min-width: 48em) {
    .sow-theme { --sow-gutter: 2rem; }
}

.sow-theme .sow-container {
    width: 100%;
    max-width: var(--sow-page-width);
    margin-inline: auto;
    padding-inline: var(--sow-gutter);
}

/* The page's own wrapper (set inline on every page): same width and gutters, grows so the footer sits low */
.sow-theme > div[style*="max-width"] {
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--sow-page-width) !important;
    padding: 1.5rem var(--sow-gutter) 0 !important;
}

.sow-theme #content[style*="max-width"] { max-width: none !important; }

.sow-theme .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* The create-match form: the fields stay readable (720 px); the map pool uses the full width so the map types fit on one row */
.sow-theme #createMatchForm > :not(#mapPoolContainer) { max-width: 720px; }

/* ── Header ── */
.sow-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--sow-night);
    border-bottom: 1px solid var(--sow-shadow);
}

.sow-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    min-height: 4rem;
}

.sow-header__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.3125rem 0;
}

.sow-header__brand img { display: block; width: 40px; height: 40px; }

.sow-theme .sow-header__brand,
.sow-theme .sow-header__brand:hover {
    color: var(--sow-white);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
}

.sow-header__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sow-theme .sow-header__list a {
    display: block;
    padding: 0.5rem 0;
    color: var(--sow-white);
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
}

.sow-theme .sow-header__list a:hover { color: var(--sow-blade); }
.sow-theme .sow-header__list a[aria-current='page'] { box-shadow: inset 0 -3px 0 var(--sow-blade); }

/* ── Footer ── */
.sow-footer {
    margin-top: 3rem;
    padding-block: 2rem 1.5rem;
    background: var(--sow-shadow);
    color: var(--sow-white);
}

.sow-footer__inner { display: grid; gap: 1.5rem; }

.sow-footer__name {
    margin: 0 0 0.25rem;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 700;
    text-align: left;
}

.sow-footer__caption,
.sow-footer__legal {
    margin: 0;
    color: var(--sow-frost);
    font-size: 0.875rem;
    text-align: left;
}

.sow-footer__legal { margin-top: 1.5rem; }

.sow-footer__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sow-theme .sow-footer__list a { display: block; padding: 0.375rem 0; }

@media (min-width: 48em) {
    .sow-footer__inner { grid-template-columns: 1fr auto; align-items: start; gap: 2rem; }
}

/* ── Tournament cards: same structure as the event cards on suomiow.fi ── */
.sow-theme .t-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.sow-theme .t-card.sow-card {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 1.25rem;
    color: var(--sow-white);
}

.sow-card__eyebrow {
    text-align: left;
    margin: 0 0 0.5rem;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sow-frost);
}

.sow-card__eyebrow .t-badge { vertical-align: middle; }

.sow-card__title { margin: 0 0 0.25rem; font-size: 1.5rem; }

/* The whole card is clickable through the title link */
.sow-theme .sow-card__title a { color: var(--sow-white); text-decoration: none; }
.sow-theme .sow-card__title a::after { content: ''; position: absolute; inset: 0; }
.sow-theme .sow-card__title a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.sow-theme .sow-card:focus-within { outline: 2px solid var(--sow-blade); outline-offset: 2px; }

.sow-card__when { margin: 0 0 0.5rem; font-weight: 600; text-align: left; }

.sow-card__summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    margin: 0 0 0.75rem;
    text-align: left;
}

.sow-card__meta { margin: auto 0 0; color: var(--sow-frost); font-size: 0.875rem; text-align: left; }

/* The organisation name and logo are in the shared header now */
.sow-theme #orgHeader { display: none !important; }

/* Login page (tournament-login.html): its own centred box */
.sow-theme .login-box {
    margin: 3rem auto;
    background: var(--sow-shadow);
    border: 0;
    border-radius: 0.25rem;
}

.sow-theme .login-box .logo { text-align: left; }
.sow-theme .login-box .logo h1 { font-size: 2.25rem; }
.sow-theme .login-box .logo p { color: var(--sow-frost); text-align: left; }
.sow-theme .login-box label { font-size: 0.9375rem; color: var(--sow-frost); }

.sow-theme .btn-login {
    border: 2px solid var(--sow-blade);
    border-radius: 0.25rem;
    background: var(--sow-blade);
    color: var(--sow-night);
    font-family: var(--font-heading);
}

.sow-theme .btn-login:hover { background: var(--sow-white); border-color: var(--sow-white); }
.sow-theme .btn-login:disabled { background: var(--sow-lion); border-color: var(--sow-lion); color: var(--sow-frost); }
.sow-theme .remember { color: var(--sow-frost); }

/* Map pool: one card per map type, all on one row when there is room */
.sow-theme #mapPoolContainer,
.sow-theme #editMapPoolContainer {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

body.sow-theme .map-category label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.3125rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    line-height: 1.25;
    transition: background 0.12s;
}

.sow-theme .map-category label:hover { background: rgba(0, 20, 69, 0.55); }

/* A ticked map stands out with the footer blue, so the Teräsyaani stays for lines, buttons and links */
.sow-theme .map-category label:has(input:checked) { background: var(--sow-lion); color: var(--sow-white); font-weight: 600; }
/* Hover on a ticked row: an outline instead of a lighter fill (white on Kruununsininen is only 3.9:1) */
.sow-theme .map-category label:has(input:checked):hover { box-shadow: inset 0 0 0 2px var(--sow-frost); }

/* Checkboxes: square, Huurre outline, filled Leijonansininen with a white check mark when ticked */
.sow-theme input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    display: inline-grid;
    place-content: center;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    border: 2px solid var(--sow-frost);
    border-radius: 0.25rem;
    background: transparent;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.sow-theme input[type="checkbox"]:hover { border-color: var(--sow-white); }

.sow-theme input[type="checkbox"]:checked {
    border-color: var(--sow-white);
    background: var(--sow-lion) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.sow-theme input[type="checkbox"]:checked:hover { background-color: var(--sow-crown); }

.sow-theme input[type="checkbox"]:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Brackets ── */
.sow-theme .bracket-round-title {
    text-align: center;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sow-frost);
}

/* A match: a flat Varjonsininen card like the other cards, no outline */
.sow-theme .bracket-card {
    overflow: hidden;
    border: 0;
    border-radius: 0.25rem;
    background: var(--sow-shadow);
    transition: outline-color 0.12s;
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.sow-theme .bracket-card[data-action]:hover { outline-color: var(--sow-frost); }

/* Row dividers inside a card: Leijonansininen instead of translucent white */
.sow-theme .bracket-card > div[style*="border-bottom"] { border-bottom-color: var(--sow-lion) !important; }
.sow-theme .bracket-card > div[style*="border-top"] { border-top-color: var(--sow-lion) !important; }

/* Connector lines between rounds */
.sow-theme [style*="position:absolute"][style*="background:var(--border)"] { background: var(--sow-lion) !important; }

/* Stage switcher (League / Double Elimination): quieter than the tabs, no cyan fill */
.sow-theme .pub-stage-btn {
    min-height: 2.5rem;
    padding: 0.25rem 1.25rem;
    border: 2px solid var(--sow-lion);
    border-radius: 0.25rem;
    background: transparent;
    color: var(--sow-white);
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sow-theme .pub-stage-btn:hover { background: transparent; border-color: var(--sow-frost); color: var(--sow-white); }

.sow-theme .pub-stage-btn.active,
.sow-theme .pub-stage-btn.active:hover {
    border-color: var(--sow-frost);
    background: var(--sow-lion);
    color: var(--sow-white);
}

/* Scores: the same size and weight for both teams, in a fixed-width column so the digits line up */
.sow-theme .bracket-score,
.sow-theme .bmatch-score {
    flex: none;
    width: 1.5rem;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

/* Scores on the Matches tab: the winner's box is filled (Teräsyaani, the one accent of the card), the loser's is outlined */
.sow-theme .score-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 2px solid var(--sow-lion);
    border-radius: 0.25rem;
    background: transparent;
    color: var(--sow-frost);
    font-family: 'Russo One', 'Arial Narrow', Arial, sans-serif;
    font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.sow-theme .score-box--win {
    border-color: var(--sow-blade);
    background: var(--sow-blade);
    color: var(--sow-night);
}

.sow-theme .score-box--pending { font-size: 1rem; }

/* Orange "ASAP" text is outside the palette */
.sow-theme [style*="#f59e0b"] { color: var(--sow-blade) !important; }

/* Match cards on the Matches tab: flat Varjonsininen cards like the others */
.sow-theme .pub-match-card {
    border: 0;
    border-radius: 0.25rem;
    background: var(--sow-shadow);
    outline: 2px solid transparent;
    outline-offset: -2px;
}

.sow-theme .pub-match-card:hover { border: 0; outline-color: var(--sow-frost); }

/* Cards: even padding, and the heading label starts at the top edge instead of below an extra margin */
.sow-theme .t-card { padding: 1.25rem; }

.sow-theme .t-card > .t-section-label:first-child { margin-top: 0; }
.sow-theme .t-card > .t-section-label + * { margin-top: 0.625rem; }

/* Results / Upcoming switch on the Matches tab: same as the other filter buttons */
.sow-theme .pub-mtab-btn {
    min-height: 2.5rem;
    padding: 0.25rem 1rem;
    border: 2px solid var(--sow-blade);
    border-radius: 0.25rem;
    background: transparent;
    color: var(--sow-white);
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sow-theme .pub-mtab-btn:hover { background: transparent; color: var(--sow-blade); }

.sow-theme .pub-mtab-btn.active,
.sow-theme .pub-mtab-btn.active:hover {
    background: var(--sow-blade);
    color: var(--sow-night);
}

/* Login box: the form inside it is not a second card (styles.css gives every <form> a panel look) */
.sow-theme .login-box { padding: 2rem; max-width: 26rem; }

.sow-theme .login-box form {
    width: auto;
    margin: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
}

.sow-theme .login-box .remember {
    font-family: var(--font-body);
    font-size: 0.9375rem;
    letter-spacing: 0;
    text-transform: none;
}

.sow-theme .login-box .back-link { margin-top: 1.5rem; text-align: left; font-size: 0.9375rem; }
.sow-theme .login-box .back-link a { color: var(--sow-blade); }
.sow-theme .login-box .back-link a:hover { color: var(--sow-white); text-decoration: underline; }

/* Button variants: a positive action is Teräsyaani, a destructive one is red (#e06c6c, 5.5:1 with Yönsininen text),
   secondary actions are outlined. Without this every button on the page would look the same. */
.sow-theme .btn-danger,
.sow-theme .t-btn-danger {
    border-color: #e06c6c;
    background: #e06c6c;
    color: var(--sow-night);
}

.sow-theme .btn-danger:hover,
.sow-theme .t-btn-danger:hover {
    border-color: var(--sow-white);
    background: var(--sow-white);
    color: var(--sow-night);
}

/* Small outlined buttons ("Edit", "Delete" in lists) */
.sow-theme .btn-small,
.sow-theme .btn-danger-small {
    min-height: 0;
    padding: 0.1875rem 0.625rem;
    border: 2px solid var(--sow-frost);
    background: transparent;
    color: var(--sow-white);
    font-size: 0.875rem;
}

.sow-theme .btn-small:hover { background: var(--sow-white); border-color: var(--sow-white); color: var(--sow-night); }

/* Filled, not outlined: red text on the card blue is only 3.8:1 */
.sow-theme .btn-danger-small { border-color: #e06c6c; background: #e06c6c; color: var(--sow-night); }
.sow-theme .btn-danger-small:hover { border-color: var(--sow-white); background: var(--sow-white); color: var(--sow-night); }