/* ===================================================================
   Summer League - styl spójny z resztą qlip:
   - Barlow Condensed jako font podstawowy
   - Ethnocentric tylko do logo / nagłówka strony (--su-font-headline)
   - dark theme, bez emoji, bez "korporacyjnego" stylu
   =================================================================== */

@font-face {
    font-family: 'Ethnocentric';
    src: url('https://qlip.pl/ethnocentric.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --su-font-headline: 'Ethnocentric', 'Barlow Condensed', sans-serif;
    --su-font-body: 'Barlow Condensed', system-ui, sans-serif;

    --su-bg: #071a1c;
    --su-bg-alt: #0c2224;
    --su-card: #0d2528;
    --su-border: #134047;

    /* Tropical Neon - straight from the qlip Summer League banner/logo:
       cyan #02F7F7, gold #FEE400, orange #FB7B02, on a dark turquoise base
       instead of the neutral cyan-on-slate used elsewhere on qlip.pl */
    --su-accent: #02f7f7;
    --su-accent-dim: #0e7a86;
    --su-orange: #fb7b02;
    --su-orange-dim: #a85400;
    --su-gold: #fee400;
    --su-gold-dim: #b39e00;

    --su-text: #e3fbfb;
    --su-text-dim: #7fa3a6;

    --su-win: #6ee7a0;
    --su-loss: #f87171;
    --su-draw: #fbbf24;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--su-bg);
    color: var(--su-text);
    font-family: var(--su-font-body);
    font-size: 17px;
    line-height: 1.4;
}

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

.su-wrap {
    max-width: 1300px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

/* --- header (banner as a faded backdrop, ~30% visible / 70% covered) --- */

.su-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    padding: 1.75rem 1.25rem;
    border: 1px solid var(--su-border);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    background-image: linear-gradient(rgba(7, 26, 28, .8), rgba(7, 26, 28, .88)), url('img/banner.jpg');
    background-size: cover;
    background-position: center 71%;
}

.su-header .su-title {
    font-family: var(--su-font-headline);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 1.9rem;
    color: var(--su-accent);
    margin: 0;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

.su-header .su-subtitle {
    color: var(--su-text-dim);
    font-size: 1.05rem;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

.su-nav {
    display: flex;
    gap: 1.25rem;
    font-size: 1.05rem;
}

.su-nav a {
    color: var(--su-text-dim);
}
.su-nav a.active,
.su-nav a:hover {
    color: var(--su-accent);
}

.su-user-badge {
    font-size: .9rem;
    color: var(--su-text-dim);
}
.su-user-badge b {
    color: var(--su-text);
}
.su-role-admin {
    color: var(--su-accent);
}

/* --- karty / sekcje --- */

.su-card {
    background: var(--su-card);
    border: 1px solid var(--su-border);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.su-section-title {
    font-family: var(--su-font-headline);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 1.1rem;
    color: var(--su-gold);
    margin: 0 0 1rem;
}

/* --- tabela head-to-head (wzór z 250fps, przerobiony na 2v2) --- */

.su-table-scroll {
    overflow-x: auto;
    width: fit-content;
    max-width: 100%;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(2, 247, 247, .16), rgba(251, 123, 2, .06) 55%, rgba(7, 26, 28, .55));
    border: 1px solid var(--su-border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 16px 32px -16px rgba(0, 0, 0, .65);
}

table.su-standings {
    width: auto;
    border-collapse: collapse;
    white-space: nowrap;
}

table.su-standings th,
table.su-standings td {
    padding: .5rem .55rem;
    text-align: center;
    font-size: 1rem;
    border-bottom: 1px solid var(--su-border);
}

table.su-standings thead th {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--su-text);
    vertical-align: bottom;
    padding-bottom: .6rem;
}

table.su-standings th.su-col-pos,
table.su-standings td.su-col-pos {
    width: 2.3rem;
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--su-bg-alt);
    font-size: 1.05rem;
}

table.su-standings th.su-col-team,
table.su-standings td.su-col-team {
    text-align: left;
    white-space: normal;
    width: 10.5rem;
    max-width: 10.5rem;
    position: sticky;
    left: 2.3rem;
    z-index: 2;
    background: var(--su-bg-alt);
    box-shadow: 2px 0 6px rgba(0, 0, 0, .35);
}

table.su-standings td.su-col-team .su-team-tag {
    font-weight: 700;
    font-size: 1.08rem;
    color: var(--su-text);
    white-space: nowrap;
}
table.su-standings td.su-col-team .su-team-players {
    color: var(--su-text-dim);
    font-size: .8rem;
    line-height: 1.25;
    display: block;
    white-space: normal;
}

/* opponent columns: kept deliberately tight - width here is multiplied by
   20 teams, so every extra pixel here costs 20x. Uses writing-mode instead
   of position:absolute+rotate: table cells with overflow:hidden don't
   reliably clip absolutely positioned children across browsers, which is
   what made the old headers overlap into a garbled mess. */
table.su-standings th.su-col-opp {
    width: 2.85rem;
    height: 8.8rem;
    vertical-align: bottom;
    padding: 0 .1rem .45rem;
    cursor: pointer;
}
table.su-standings th.su-col-opp > div {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    display: inline-block;
    font-weight: 700;
    font-size: .88rem;
    white-space: nowrap;
}

table.su-standings td.su-col-score,
table.su-standings td.su-col-diag {
    width: 2.85rem;
    padding: .4rem .15rem;
    font-size: .88rem;
}

table.su-standings td.su-col-diag {
    color: var(--su-text-dim);
}

/* row hover - brightens whatever the row's background already is (qualify
   tint, top-3, plain) without fighting its specificity */
table.su-standings tbody tr:hover td {
    filter: brightness(1.18);
}

/* team hover highlight (row + matching column), like 250fps - toggled by
   clicking a team name or an opponent column header (see index.php script) */
table.su-standings tr.su-hl > td,
table.su-standings tr.su-hl > th,
table.su-standings td.su-hl,
table.su-standings th.su-hl {
    background: rgba(254, 228, 0, .22) !important;
}
table.su-standings th.su-col-opp,
table.su-standings td.su-col-team {
    cursor: pointer;
}

/* top 8 = playoff qualification zone */
table.su-standings tr.su-qualify td {
    background: rgba(110, 231, 160, .1);
}
table.su-standings tr.su-qualify td.su-col-pos,
table.su-standings tr.su-qualify td.su-col-team {
    background: linear-gradient(to right, rgba(110, 231, 160, .18), var(--su-bg-alt) 70%);
}

/* top 3 - extra rank-number colour on top of the qualify highlight */
tr.su-row-top-1 td.su-col-pos,
tr.su-row-top-2 td.su-col-pos,
tr.su-row-top-3 td.su-col-pos {
    font-weight: 700;
    font-size: 1.15rem;
}
tr.su-row-top-1 td.su-col-pos { color: var(--su-gold); }
tr.su-row-top-2 td.su-col-pos { color: #cbd5e1; }
tr.su-row-top-3 td.su-col-pos { color: #d9a066; }

.su-qualify-legend-swatch {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 2px;
    background: rgba(110, 231, 160, .35);
    border: 1px solid var(--su-win);
    margin-right: .4rem;
    vertical-align: middle;
}

table.su-standings td.su-win {
    color: var(--su-win);
    font-weight: 600;
}
table.su-standings td.su-loss {
    color: var(--su-text-dim);
}
table.su-standings td.su-draw {
    color: var(--su-draw);
    font-weight: 600;
}

table.su-standings th.su-col-wl,
table.su-standings td.su-col-wl {
    width: 4.2rem;
}
table.su-standings td.su-col-wl {
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    font-weight: 700;
    background: linear-gradient(to bottom, rgba(2, 247, 247, .1), transparent);
}
table.su-standings td.su-col-wl .su-w {
    color: var(--su-win);
}
table.su-standings td.su-col-wl .su-l {
    color: var(--su-loss);
}
table.su-standings td.su-col-wl .su-d {
    color: var(--su-draw);
}
table.su-standings td.su-col-wl .sep {
    color: var(--su-text-dim);
    padding: 0 .2rem;
    font-weight: 400;
}

/* --- teams that dropped out + free wins ------------------------------
   A dropped-out team stays in the table struck through; every result of
   theirs (their whole row and their whole column) is greyed out because it
   no longer counts for anyone. A free win is the league's compensation for
   a fixture that can't be played any more - always the orange accent, so
   nobody mistakes it for a match that was actually played. */

table.su-standings tr.su-dq td {
    background: rgba(248, 113, 113, .05);
    color: var(--su-text-dim);
    text-decoration: line-through;
    text-decoration-color: var(--su-loss);
    text-decoration-thickness: 1.5px;
    opacity: .7;
}
table.su-standings tr.su-dq td.su-col-pos {
    text-decoration: none;
}
table.su-standings tr.su-dq td.su-col-team {
    background: linear-gradient(to right, rgba(248, 113, 113, .12), var(--su-bg-alt) 70%);
}
table.su-standings tr.su-dq td.su-col-wl .su-w,
table.su-standings tr.su-dq td.su-col-wl .su-l,
table.su-standings tr.su-dq td.su-col-wl .su-d {
    color: var(--su-text-dim);
}

/* the dropped-out team's own column header gets the same treatment */
table.su-standings th.su-th-dq > div {
    color: var(--su-text-dim);
    text-decoration: line-through;
    text-decoration-color: var(--su-loss);
}

/* voided cell - a played result against a team that dropped out */
table.su-standings td.su-void {
    color: var(--su-text-dim);
    opacity: .45;
    text-decoration: line-through;
}

/* free win - orange, the banner's third accent colour */
table.su-standings td.su-freewin {
    color: var(--su-orange);
    font-weight: 700;
}
table.su-standings td.su-col-wl .su-fw {
    color: var(--su-orange);
    font-weight: 700;
    cursor: help;
}

.su-dq-legend {
    color: var(--su-text-dim);
    text-decoration: line-through;
    text-decoration-color: var(--su-loss);
    font-weight: 600;
}
.su-freewin-legend,
.su-freewin-text {
    color: var(--su-orange);
    font-weight: 700;
}

/* match log: a result that no longer counts */
tr.su-void-row td {
    opacity: .5;
    text-decoration: line-through;
    text-decoration-color: var(--su-loss);
}
tr.su-void-row td .su-muted {
    text-decoration: none;
}

/* --- playoff bracket: double elimination ---------------------------
   Karty stoją w siatce o stałej wysokości wiersza, więc półfinał wypada
   dokładnie w połowie między dwoma ćwierćfinałami. Karta jest wyższa niż
   wiersz i wystaje poza niego - dlatego nagłówki rund siedzą u GÓRY wiersza 1,
   a drzewo ma zapas na dole. Sąsiednie karty w kolumnie dzielą dwa wiersze,
   więc --su-de-rh to połowa odstępu, nie cała karta. */

.su-de-title {
    font-family: var(--su-font-body);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: .02em;
    margin: 0 0 .2rem;
    display: flex;
    align-items: baseline;
    gap: .6rem;
    color: var(--su-text);
}
.su-de-title span {
    font-size: .72rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600;
}
.su-de-up { color: var(--su-accent); }
.su-de-lo { color: var(--su-orange); }
.su-de-lead { margin: 0 0 1rem; max-width: 80ch; }

.su-de-scroll {
    --su-de-rh: 4.7rem;
    --su-de-gap: 2.6rem;
    overflow-x: auto;
    overflow-y: hidden;
}
.su-de-tree {
    display: grid;
    grid-template-rows: 3.8rem;
    grid-auto-rows: var(--su-de-rh);
    column-gap: var(--su-de-gap);
    align-items: center;
    min-width: max-content;
    position: relative;
    padding-bottom: 1.4rem;
}
.su-de-rh {
    grid-column: var(--c);
    grid-row: 1;
    align-self: start;
}
.su-de-rh b {
    display: block;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--su-text);
}
.su-de-rh i {
    font-style: normal;
    font-size: .76rem;
    color: var(--su-text-dim);
}

.su-de-match {
    grid-column: var(--c);
    grid-row: var(--r);
    width: 14rem;
    position: relative;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(2, 247, 247, .05), rgba(7, 26, 28, .5));
    border: 1px solid var(--su-border);
    border-left: 3px solid #2a6d78;
    box-shadow: 0 10px 20px -14px rgba(0, 0, 0, .8);
}
.su-de-head {
    display: flex;
    justify-content: space-between;
    padding: .2rem .55rem;
    border-bottom: 1px solid var(--su-border);
    font-size: .7rem;
    letter-spacing: .09em;
    color: var(--su-text-dim);
    font-weight: 700;
}
.su-de-side {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .34rem .55rem;
    min-height: 2.75rem;
    font-variant-numeric: tabular-nums;
}
.su-de-side + .su-de-side { border-top: 1px solid rgba(19, 64, 71, .65); }
.su-de-seed {
    width: 1.15rem;
    height: 1.15rem;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 2px;
    background: rgba(254, 228, 0, .14);
    color: var(--su-gold);
    font-size: .7rem;
    font-weight: 700;
}
.su-de-who {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.12;
}
.su-de-who b {
    font-size: .98rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.su-de-who i {
    font-style: normal;
    font-size: .76rem;
    color: var(--su-text-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.su-de-pt {
    width: 1rem;
    flex: none;
    text-align: right;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--su-text-dim);
}
.su-de-pt:empty::after { content: '-'; color: #2b4f55; }

/* wygrana strona - ten sam zielony co w tabeli grupowej */
.su-de-won .su-de-who b { color: var(--su-win); }
.su-de-won .su-de-pt { color: var(--su-win); }

/* slot jeszcze nierozstrzygnięty */
.su-de-tbd .su-de-seed { visibility: hidden; }
.su-de-tbd .su-de-who b {
    color: var(--su-text-dim);
    font-weight: 600;
    letter-spacing: .02em;
    font-size: .88rem;
    white-space: nowrap;
}
.su-de-tbd .su-de-who b em {
    font-style: normal;
    color: var(--su-orange);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .66rem;
    letter-spacing: .05em;
}

.su-de-adv {
    background: rgba(254, 228, 0, .18);
    border: 1px solid rgba(254, 228, 0, .55);
    color: var(--su-gold);
    border-radius: 2px;
    font-size: .68rem;
    font-weight: 700;
    padding: 0 .26rem;
    flex: none;
}
.su-de-note {
    margin: 0;
    padding: .2rem .55rem .3rem;
    font-size: .72rem;
    color: var(--su-orange);
    border-top: 1px solid var(--su-border);
}

.su-de-qf { border-left-color: var(--su-accent); }
.su-de-lb { border-left-color: var(--su-orange); }
.su-de-gf {
    border-left-color: var(--su-gold);
    background: linear-gradient(180deg, rgba(254, 228, 0, .1), rgba(7, 26, 28, .5));
}

/* łączniki: poziome ogonki sięgają środka rynny, .su-de-join rysuje pion */
.su-de-match[data-out]::after {
    content: '';
    position: absolute;
    left: 100%;
    top: 50%;
    width: calc(var(--su-de-gap) / 2);
    border-top: 2px solid #35818e;
}
.su-de-match[data-in]::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    width: calc(var(--su-de-gap) / 2);
    border-top: 2px solid #35818e;
}
.su-de-join {
    grid-column: var(--c);
    grid-row: var(--r);
    align-self: stretch;
    border-right: 2px solid #35818e;
    margin: calc(var(--su-de-rh) / 2) calc(var(--su-de-gap) / -2) calc(var(--su-de-rh) / 2) 0;
    pointer-events: none;
}

.su-de-gflabel {
    grid-column: var(--c);
    grid-row: var(--r);
    align-self: start;
    font-size: .72rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--su-gold);
    font-weight: 700;
}
.su-de-gfnote {
    grid-column: var(--c);
    grid-row: var(--r);
    align-self: start;
    padding-top: 1.7rem;
    width: 14rem;
    font-size: .82rem;
    color: var(--su-text-dim);
    margin: 0;
    line-height: 1.3;
}
.su-de-gfnote b { color: var(--su-gold); }

.su-de-places {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: .4rem 1.8rem;
    margin-top: 1.8rem;
    padding-top: 1rem;
    border-top: 1px solid var(--su-border);
}
.su-de-places div {
    display: flex;
    gap: .6rem;
    align-items: baseline;
    font-size: .88rem;
}
.su-de-places b {
    color: var(--su-gold);
    font-weight: 700;
    min-width: 3.1rem;
    flex: none;
}
.su-de-places span { color: var(--su-text-dim); }

@media (max-width: 640px) {
    .su-de-scroll { --su-de-gap: 1.6rem; }
    .su-de-match { width: 12.4rem; }
}

/* --- playoff bracket --- */

.su-bracket {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    padding-bottom: .5rem;
}
.su-bracket-round {
    min-width: 220px;
}
.su-bracket-round h3 {
    font-family: var(--su-font-headline);
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--su-text-dim);
    margin: 0 0 .75rem;
}
.su-bracket-match {
    background: var(--su-bg-alt);
    border: 1px solid var(--su-border);
    border-radius: 8px;
    padding: .6rem .75rem;
    margin-bottom: 1rem;
}
.su-bracket-team {
    display: flex;
    justify-content: space-between;
    padding: .15rem 0;
}
.su-bracket-team.su-winner {
    color: var(--su-win);
    font-weight: 700;
}
.su-bracket-tbd {
    color: var(--su-text-dim);
    font-style: italic;
}

/* --- free agents --- */

.su-free-agents ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.su-free-agents li {
    background: var(--su-bg-alt);
    border: 1px solid var(--su-border);
    border-radius: 999px;
    padding: .3rem .9rem;
}

/* --- rules --- */

.su-rules summary {
    cursor: pointer;
    font-family: var(--su-font-headline);
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--su-text);
}
.su-rules {
    color: var(--su-text-dim);
}
.su-rules h4 {
    color: var(--su-text);
    margin: 1rem 0 .3rem;
}
.su-rules ul {
    margin: 0 0 .5rem 1.1rem;
    padding: 0;
}
.su-rules code {
    background: rgba(2, 247, 247, .14);
    color: var(--su-accent);
    border-radius: 4px;
    padding: .05rem .35rem;
    font-family: var(--su-font-body);
    font-size: .95em;
}

/* --- formularze panelu --- */

.su-form label {
    display: block;
    font-size: .85rem;
    color: var(--su-text-dim);
    margin-bottom: .2rem;
}
.su-form .su-field {
    margin-bottom: .9rem;
}
.su-form input[type="text"],
.su-form input[type="password"],
.su-form input[type="date"],
.su-form input[type="number"],
.su-form select,
.su-form textarea {
    width: 100%;
    background: var(--su-bg-alt);
    border: 1px solid var(--su-border);
    color: var(--su-text);
    border-radius: 6px;
    padding: .5rem .6rem;
    font-family: var(--su-font-body);
    font-size: 1rem;
}
.su-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}

.su-btn {
    display: inline-block;
    background: var(--su-orange);
    color: #2a1200;
    border: none;
    border-radius: 6px;
    padding: .5rem 1.1rem;
    font-family: var(--su-font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.su-btn:hover {
    background: #fb9b3e;
}
.su-btn-danger {
    background: var(--su-loss);
    color: #250808;
}
.su-btn-ghost {
    background: transparent;
    border: 1px solid var(--su-border);
    color: var(--su-text-dim);
}
.su-btn-sm {
    padding: .25rem .6rem;
    font-size: .85rem;
}
/* found-slot buttons stack GMT time over the viewer's local equivalent */
.su-btn .su-cal-gmt {
    display: block;
    line-height: 1.2;
}
.su-btn .su-local-slot {
    display: block;
    font-size: .72rem;
    font-weight: 400;
    line-height: 1.1;
}

.su-alert {
    padding: .7rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: .95rem;
}
.su-alert-error {
    background: rgba(248, 113, 113, .12);
    border: 1px solid rgba(248, 113, 113, .4);
    color: #fca5a5;
}
.su-alert-ok {
    background: rgba(110, 231, 160, .12);
    border: 1px solid rgba(110, 231, 160, .4);
    color: #86efac;
}

/* --- panel: lista wpisów --- */

table.su-plain {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
table.su-plain th,
table.su-plain td {
    text-align: left;
    padding: .5rem .6rem;
    border-bottom: 1px solid var(--su-border);
}
table.su-plain th {
    color: var(--su-text-dim);
    font-weight: 600;
}
table.su-plain tr:hover td {
    background: rgba(255, 255, 255, .02);
}

.su-tag-admin {
    color: var(--su-accent);
    font-weight: 600;
}
.su-tag-moderator {
    color: var(--su-text-dim);
}

.su-muted {
    color: var(--su-text-dim);
    font-size: .85rem;
}

/* The two edge zones of the league, spelled out by country rather than by
   abbreviation. Rendered server-side so the line still reads correctly in a
   screenshot pasted into Discord, with no JS and no timezone to decode. */
.su-zone-strip {
    display: block;
    color: var(--su-text-dim);
    font-size: .84rem;
    letter-spacing: .01em;
    white-space: nowrap;
}

.su-win-text {
    color: var(--su-win);
    font-weight: 600;
}

/* --- availability grid --- */

.su-week-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0;
}
.su-week-label {
    font-family: var(--su-font-headline);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--su-text-dim);
    font-size: .95rem;
}

.su-day-past {
    color: #566072;
    opacity: .6;
}
.su-avail-disabled {
    cursor: default;
    opacity: .35;
}
.su-avail-disabled:hover {
    outline: none;
}

/* Shared calendar: built with CSS Grid (not a <table>) so cells always keep a
   visible size even though they hold no text - a 1px "gap" shows through as the
   grid background colour, guaranteeing grid lines regardless of cell content. */
.su-cal-wrap {
    overflow-x: auto;
    border-radius: 10px;
    border: 1px solid var(--su-border);
}
.su-cal-grid {
    display: grid;
    gap: 1px;
    background: var(--su-border);
    min-width: 32rem;
    font-size: .8rem;
}
.su-cal-cell {
    background: var(--su-bg-alt);
    min-height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Calendar headers use the BODY font (Barlow Condensed), not Ethnocentric -
   Ethnocentric is decorative-only (section titles) and becomes illegible at
   small sizes / in tight cells. */
.su-cal-head {
    color: var(--su-text-dim);
    font-weight: 600;
    font-family: var(--su-font-body);
    letter-spacing: 0;
    white-space: nowrap;
    padding: .3rem .35rem;
    font-size: .85rem;
}
.su-cal-day {
    flex-direction: column;
    line-height: 1.15;
}
.su-cal-dayname {
    font-weight: 700;
    font-size: .9rem;
    color: var(--su-text);
    text-transform: uppercase;
}
.su-cal-daydate {
    font-size: .72rem;
    color: var(--su-text-dim);
}
.su-cal-corner {
    flex-direction: column;
    line-height: 1.2;
    align-items: center;
}
.su-cal-cornergmt {
    font-weight: 700;
    font-size: .82rem;
    color: var(--su-accent);
}
.su-cal-local-head {
    font-size: .68rem;
    color: var(--su-text-dim);
}
.su-cal-hour {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    padding-right: .5rem;
    line-height: 1.15;
}
.su-cal-gmt {
    font-weight: 700;
    font-size: .85rem;
    color: var(--su-text);
}
.su-cal-unit {
    font-size: .58rem;
    font-weight: 600;
    color: var(--su-accent);
    letter-spacing: .02em;
}
.su-cal-local {
    font-size: .68rem;
    color: var(--su-text-dim);
}
.su-cal-slot {
    cursor: pointer;
    position: relative;
    font-size: .8rem;
    font-weight: 600;
    color: var(--su-text);
    font-variant-numeric: tabular-nums;
}
.su-cal-slot:hover {
    outline: 2px solid var(--su-accent);
    outline-offset: -2px;
}
/* last tapped cell - indicates which time the detail panel describes */
.su-cal-slot.su-selected {
    outline: 3px solid var(--su-gold);
    outline-offset: -2px;
    z-index: 1;
}
.su-cal-slot.su-saving {
    cursor: progress;
    opacity: .7;
}

.su-slot-detail {
    margin-top: .7rem;
    background: var(--su-bg-alt);
    border: 1px solid var(--su-border);
    border-radius: 10px;
    padding: .7rem .9rem;
    min-height: 3.2rem;
}
.su-detail-time {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--su-gold);
}
.su-detail-chip {
    display: inline-block;
    background: rgba(2, 247, 247, .14);
    color: var(--su-accent);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: .88rem;
    margin: 2px 6px 2px 0;
}
.su-detail-error {
    color: var(--su-loss);
    font-weight: 600;
}
.su-cal-slot.su-mine::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    border: 2px solid var(--su-accent);
    border-radius: 3px;
    pointer-events: none;
}
/* teammate marked this slot but you haven't yet -> faded dashed border, a hint to
   also click it so your team becomes ready here. */
.su-cal-slot.su-mate::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    border: 2px dashed rgba(127, 163, 166, .55);
    border-radius: 3px;
    pointer-events: none;
}
/* both teammates free at this slot -> orange border (stronger signal than cyan).
   team-ready implies you marked it, so this also covers cells with no su-mine. */
.su-cal-slot.su-team-ready::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    border: 2px solid var(--su-orange);
    border-radius: 3px;
    pointer-events: none;
}

.su-legend-border {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: .3rem;
    background: var(--su-bg-alt);
}
.su-legend-cyan {
    border: 2px solid var(--su-accent);
}
.su-legend-orange {
    border: 2px solid var(--su-orange);
}
.su-legend-mate {
    border: 2px dashed rgba(127, 163, 166, .55);
}
.su-avail-1 { background: rgba(110, 231, 160, .18); }
.su-avail-2 { background: rgba(110, 231, 160, .34); }
.su-avail-3 { background: rgba(110, 231, 160, .5); }
.su-avail-4 { background: rgba(110, 231, 160, .68); }
.su-avail-5 { background: rgba(110, 231, 160, .9); }

.su-legend {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-top: .75rem;
    font-size: .8rem;
    color: var(--su-text-dim);
}
.su-cal-legend-swatch {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: .3rem;
    border: 1px solid var(--su-border);
}

.su-footer {
    text-align: center;
    color: var(--su-text-dim);
    font-size: .8rem;
    margin-top: 2rem;
}