/* ═══════════════════════════════════════════════════════════════════════════
   ROZVRH STREAMŮ — .rz-*

   Starý rozvrh byl mřížka sedmi polí, ve které pět z nich hlásilo „Volno"
   šedou na šedé, a odpověď na „kdy příště?" se z něj musela luštit mezi
   prázdnými poli. Tenhle stojí na dvou úrovních: pruh tohohle týdne
   a pod ním rozbalovací celý měsíc.

   Tři rozhodnutí, ze kterých vychází zbytek:

   1) CO JE ÚDAJ, TO JE STROJOPIS.
      Rozvrh je jízdní řád, ne plakát: název dne, datum, rozsah týdne i
      popisky legendy jedou JetBrains Mono v drobných verzálkách, čísla dnů
      taky — číslice v něm mají stejnou šířku, takže se sloupce sedmi dnů
      zarovnají samy. Archivo zůstává jménu streamera v termínu, protože
      jméno není údaj.

   2) SEDM DLAŽDIC, SEDM STEJNÝCH ROZMĚRŮ.
      Volný den má stejný rozměr jako ostatní, jen ztlumenou plochu bez
      rámečku. Slovo „Volno" se nepíše — prázdná dlaždice to řekne sama.
      Termíny sedí u spodní hrany, takže volné místo vzniká uprostřed,
      ne pod obsahem, kde by vypadalo jako díra.

   3) ZELENÁ ZNAMENÁ „TADY JSI", NIC JINÉHO.
      V celém bloku svítí zeleně jediná věc: dnešek. Speciál se značí
      jantarovou (--coin), minulé dny se ztlumí. Barva tu nese stav,
      ne ozdobu.
   ═══════════════════════════════════════════════════════════════════════════ */

.rz {
    --rz-line:    var(--rail);
    --rz-line-2:  var(--rail-2);
    --rz-off:     color-mix(in srgb, var(--paper) 3.5%, transparent);   /* plocha volného dne */
    display: block;
}

/* Kolečko s profilovkou streamera. */
.rz-ava {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--panel-hi);
    display: grid;
    place-items: center;
}
.rz-ava img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rz-ava-ltr {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: .8rem;
    color: var(--paper-2);
}

/* ═══ TÝDEN ════════════════════════════════════════════════════════════════ */

.rz-weekhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: clamp(26px, 3vw, 36px) 0 12px;
}
.rz-weekhead h3 {
    margin: 0;
    font-family: var(--font-code);
    font-weight: 500;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--paper-3);
}
/* Rozsah dat je údaj, ne popiska. */
.rz-weekhead-range {
    font-family: var(--font-code);
    font-weight: 500;
    font-size: .68rem;
    letter-spacing: .08em;
    font-variant-numeric: tabular-nums;
    color: var(--paper-3);
}

/* Sedm dlaždic stejné šířky i výšky. Nerovná spodní hrana se v pruhu zkoušela
   (nižší dlaždice = volno) a četla se jako rozbitá mřížka, ne jako rytmus. */
.rz-week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    align-items: stretch;
    gap: 8px;
}
.rz-day {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 12px 14px;
    background: var(--panel);
    border: 1px solid var(--rz-line);
    border-radius: var(--r-btn);
    transition: background var(--t-fast), border-color var(--t-fast);
}
/* Volný den drží stejný rozměr jako ostatní, jen ztlumenou plochu a žádný
   rámeček. Slovo „Volno" se nepíše — prázdná dlaždice to řekne sama a
   ušetří pět opakování téhož slova vedle sebe. */
.rz-day.is-off {
    background: var(--rz-off);
    border-color: transparent;
}
.rz-day.is-past { opacity: .58; }
.rz-day.is-today {
    border-color: var(--go);
    background: var(--panel-hi);
}
.rz-day.is-special { border-color: rgba(var(--coin-rgb), .5); }

.rz-day-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}
.rz-day-dow {
    font-family: var(--font-code);
    font-weight: 500;
    font-size: .62rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--paper-3);
}
/* Číslo dne je údaj a stojí v sedmi sloupcích pod sebou — číslice stejné
   šířky ho zarovnají samy, což Archivo nedokáže. */
.rz-day-num {
    font-family: var(--font-num);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--paper-2);
    line-height: 1;
}
.rz-day:not(.is-off) .rz-day-num { color: var(--paper); }
.rz-day.is-today .rz-day-num { color: var(--go); }

.rz-day-list {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    margin-top: auto;
}
.rz-slot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    background: var(--raise);
    border-radius: var(--r-chip);
    min-width: 0;
}
.rz-slot.is-special {
    background: rgba(var(--coin-rgb), .1);
    box-shadow: inset 0 0 0 1px rgba(var(--coin-rgb), .3);
}
.rz-slot .rz-ava { width: 22px; height: 22px; flex-basis: 22px; }
.rz-slot-who {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: var(--track-tight);
    color: var(--paper);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Volný den nedostane slovo „Volno". Prázdná plocha to řekne sama a ušetří
   pět opakování téhož slova vedle sebe. */
.rz-day.is-off .rz-day-list { display: none; }

.rz-badge-today {
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--go);
    color: var(--go-ink);
    font-family: var(--font-code);
    font-weight: 600;
    font-size: .58rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* ═══ CELÝ MĚSÍC ═══════════════════════════════════════════════════════════ */

.rz-more {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}
.rz-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: transparent;
    border: 1px solid var(--rz-line-2);
    border-radius: var(--r-pill);
    color: var(--paper-2);
    font-family: var(--font-code);
    font-weight: 500;
    font-size: .68rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.rz-more-btn:hover { color: var(--paper); border-color: var(--paper-3); }
.rz-more-btn svg { transition: transform var(--t-fast); }
.rz-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.rz-month { display: none; margin-top: 18px; }
.rz-month.is-open { display: block; }

.rz-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
}
.rz-grid-head {
    font-family: var(--font-code);
    font-weight: 500;
    font-size: .62rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--paper-3);
    text-align: center;
    padding-bottom: 4px;
}

/* Buňka měsíce je hustší než buňka týdne: číslo a tečky. Kdo přesně vysílá
   se dozví z popisku, protože v mřížce třiceti dnů by se jména stejně
   nevešla a rozbila by to, co má být přehled. */
.rz-cell {
    min-height: 58px;
    padding: 8px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: var(--r-chip);
    background: var(--rz-off);
    font-family: var(--font-num);
    font-weight: 600;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    color: var(--paper-3);
}
.rz-cell.is-blank { background: transparent; }
.rz-cell.has-stream {
    background: var(--panel);
    box-shadow: inset 0 0 0 1px var(--rz-line);
    color: var(--paper);
}
.rz-cell.is-past { opacity: .58; }
.rz-cell.is-today {
    box-shadow: inset 0 0 0 1px var(--go);
    color: var(--go);
}
.rz-dots { display: flex; gap: 3px; }
.rz-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--paper-2);
}
.rz-dot.is-special { background: var(--coin); }

.rz-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 14px;
    font-family: var(--font-code);
    font-weight: 500;
    font-size: .62rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--paper-3);
}
.rz-legend span { display: inline-flex; align-items: center; gap: 7px; }
.rz-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--paper-2);
    font-style: normal;
}
.rz-legend i.sp { background: var(--coin); }
.rz-legend i.td { background: var(--go); }
.rz-legend i.of { background: var(--rz-off); box-shadow: inset 0 0 0 1px var(--rz-line); }

/* ═══ PRÁZDNÝ STAV ═════════════════════════════════════════════════════════ */

.rz-blank {
    padding: clamp(26px, 4vw, 40px) clamp(20px, 3vw, 30px);
    background: var(--panel);
    border: 1px dashed var(--rz-line-2);
    border-radius: var(--r-card);
    text-align: center;
}
.rz-blank h3 {
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 1.15rem;
    letter-spacing: var(--track-tight);
    color: var(--paper);
}
.rz-blank p {
    margin: 0 auto;
    max-width: 52ch;
    font-size: .92rem;
    line-height: 1.55;
    color: var(--paper-2);
}
.rz-blank-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 18px;
}

.rz-note {
    margin: 18px 0 0;
    font-size: .82rem;
    line-height: 1.6;
    color: var(--paper-3);
}
.rz-note a { color: var(--go); text-decoration: none; }
.rz-note a:hover { text-decoration: underline; }

/* ═══ MENŠÍ OBRAZOVKY ══════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    /* Týden na výšku: sedm proužků pod sebou se čte líp než sedm sloupků
       širokých jako palec. Volný den se srazí na tenkou linku. */
    .rz-week { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .rz-day {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        min-height: 0;
        padding: 10px 14px;
    }
    .rz-day-top {
        flex: 0 0 84px;
        align-items: baseline;
        gap: 8px;
    }
    .rz-day-list { flex: 1 1 auto; flex-direction: row; flex-wrap: wrap; margin-top: 0; }
    .rz-day.is-off { padding: 10px 14px; }
}

@media (max-width: 560px) {
    .rz-grid { gap: 4px; }
    .rz-cell { font-size: .75rem; gap: 4px; min-height: 46px; }
    .rz-dot { width: 4px; height: 4px; }
}