/* Rozvrh — barvu nese skupina, ne předmět. */

:root {
  --ground:#F1F3F7; --surface:#FFFFFF; --sunk:#E7EAF1;
  --line:#D6DCE7; --line-soft:#E4E9F1;
  --ink:#11151C; --body:#333B47; --muted:#5D6777; --faint:#8A93A2;
  --accent:#B2295C; --accent-soft:#FBE7EE;
  --warn-bg:#FDF3E3; --warn-ink:#7A4A06;

  --s1-bg:#E4EBFD; --s1-line:#A5BDF4; --s1-ink:#1B3B8C; --s1-mark:#2C58C9;
  --s2-bg:#FBEEDA; --s2-line:#EBC888; --s2-ink:#754506; --s2-mark:#B4740B;
  --all-bg:#E9ECF1; --all-line:#C3CAD6; --all-ink:#2E3644; --all-mark:#4A5568;
  --gone:#EDEFF3; --gone-ink:#8A93A2;
  /* Úkol z To Do. Vlastní barva schválně: akcentní růžová patří dnešku a změnám,
     a puntík v ní by se pletl s pruhem změněné hodiny. */
  --todo:#0E7C66; --todo-soft:#E1F3EE;

  --font-d:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-m:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --daycol:92px;
  /* Strop šířky obsahu; na velkých displejích roste (viz blok níž). */
  --wrap-max:1320px;
  /* Okraje stránky = větší z designového odsazení a výřezu displeje (iPhone na šířku). */
  --pad-l:20px;
  --pad-r:20px;
  color-scheme: light;
}

@supports (padding: max(0px, env(safe-area-inset-left))) {
  :root { --pad-l: max(20px, env(safe-area-inset-left)); --pad-r: max(20px, env(safe-area-inset-right)); }
}

/* Prázdný data-theme = řiď se systémem. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:#13161B; --surface:#1B1F26; --sunk:#22272F;
    --line:#2E353F; --line-soft:#252B34;
    --ink:#EAEDF2; --body:#C3CAD5; --muted:#98A2B0; --faint:#727C8B;
    --accent:#F2789F; --accent-soft:#3A1A26;
    --warn-bg:#332712; --warn-ink:#E8BE72;
    --s1-bg:#1B2A4B; --s1-line:#35538F; --s1-ink:#AEC6F8; --s1-mark:#7BA0EE;
    --s2-bg:#342710; --s2-line:#6E5420; --s2-ink:#EAC079; --s2-mark:#D2A054;
    --all-bg:#242A33; --all-line:#3B4250; --all-ink:#C9D0DB; --all-mark:#98A2B0;
    --gone:#1E222A; --gone-ink:#6B7482;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground:#13161B; --surface:#1B1F26; --sunk:#22272F;
  --line:#2E353F; --line-soft:#252B34;
  --ink:#EAEDF2; --body:#C3CAD5; --muted:#98A2B0; --faint:#727C8B;
  --accent:#F2789F; --accent-soft:#3A1A26;
  --warn-bg:#332712; --warn-ink:#E8BE72;
  --s1-bg:#1B2A4B; --s1-line:#35538F; --s1-ink:#AEC6F8; --s1-mark:#7BA0EE;
  --s2-bg:#342710; --s2-line:#6E5420; --s2-ink:#EAC079; --s2-mark:#D2A054;
  --all-bg:#242A33; --all-line:#3B4250; --all-ink:#C9D0DB; --all-mark:#98A2B0;
  --gone:#1E222A; --gone-ink:#6B7482;
  --todo:#4FD1B3; --todo-soft:#12332C;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* Pravidla s `display` níže by jinak přebila `hidden` z UA stylu. */
[hidden] { display: none !important; }

/* Safari na iPhonu jinak na šířku samo nafukuje písmo a rozbíjí tím sazbu. */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font-family: var(--font-d);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Žádné vodorovné rolování celé stránky — mřížka si roluje sama uvnitř .board. */
  overflow-x: hidden;
}

/* Modrý blik při ťuknutí na iOS; stavy si kreslíme sami přes :hover/:active. */
button, select, a, summary { -webkit-tap-highlight-color: transparent; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 18px var(--pad-r) 0 var(--pad-l); }

/* ---------- horní lišta ---------- */

.topbar {
  position: sticky; top: 0; z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  /* V nainstalované PWA je stavový řádek průhledný (black-translucent) a obsah
     by lezl pod hodiny — odsazení si lišta drží sama. */
  padding-top: env(safe-area-inset-top, 0px);
}
.bar {
  max-width: var(--wrap-max); margin: 0 auto; padding: 12px var(--pad-r) 12px var(--pad-l);
  display: flex; align-items: center; gap: 16px 26px; flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 11px; margin-right: auto; }
.brand .mark {
  width: 26px; height: 26px; border-radius: 4px; flex: none;
  background: linear-gradient(to bottom right,
    var(--s1-bg) 0 calc(50% - 1px), var(--all-line) calc(50% - 1px) calc(50% + 1px),
    var(--s2-bg) calc(50% + 1px) 100%);
  border: 1px solid var(--all-line);
}
.titles { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.titles b { font-size: 1.06rem; font-weight: 700; color: var(--ink); letter-spacing: -.015em; }
.school {
  font-family: var(--font-m); font-size: .68rem; color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44ch;
}

.tools { display: flex; align-items: flex-end; gap: 10px 18px; flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: 4px; }
.clabel {
  font-family: var(--font-m); font-size: .62rem; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}

select {
  font-family: var(--font-d); font-size: .84rem; font-weight: 600; color: var(--ink);
  background: var(--ground); border: 1px solid var(--line); border-radius: 3px;
  padding: 6px 10px; cursor: pointer; min-width: 90px;
}

.seg { display: flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: var(--ground); }
.seg button {
  font-family: var(--font-d); font-size: .8rem; font-weight: 600; color: var(--muted);
  background: transparent; border: 0; border-right: 1px solid var(--line);
  padding: 6px 12px; cursor: pointer; white-space: nowrap;
}
.seg button:last-child { border-right: 0; }
/* Značka motivu je náhrada popisku pro mobil — na širokém displeji je zbytečná. */
.seg button .ico { display: none; }
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--ground); }
.seg button.s1[aria-pressed="true"] { background: var(--s1-mark); color: #fff; }
.seg button.s2[aria-pressed="true"] { background: var(--s2-mark); color: #fff; }

.refresh {
  font-family: var(--font-d); font-size: .8rem; font-weight: 600; color: var(--muted);
  background: var(--ground); border: 1px solid var(--line); border-radius: 3px;
  padding: 6px 12px; cursor: pointer; display: flex; align-items: center; gap: 6px;
}
.refresh:hover:not(:disabled) { color: var(--ink); }
.refresh:disabled { opacity: .5; cursor: default; }
.refresh:disabled .ico { animation: spin 1s linear infinite; }

/* Připojený stav nese barvu úkolů, ať je z lišty poznat bez čtení. */
.todo-btn[aria-pressed="true"] { color: var(--todo); border-color: var(--todo); background: var(--todo-soft); }
@keyframes spin { to { transform: rotate(360deg); } }

.status {
  max-width: var(--wrap-max); margin: 0 auto; padding: 7px var(--pad-r) 7px var(--pad-l);
  font-family: var(--font-m); font-size: .72rem; color: var(--muted);
  border-top: 1px solid var(--line-soft);
}
.status.warn { background: var(--warn-bg); color: var(--warn-ink); }

.back {
  font-family: var(--font-d); font-size: .78rem; font-weight: 600; color: var(--muted);
  background: var(--ground); border: 1px solid var(--line); border-radius: 3px;
  padding: 5px 10px; cursor: pointer; margin-left: 4px; white-space: nowrap;
}
.back:hover { color: var(--ink); }

/* ---------- Teď / Pak ---------- */

.nownext {
  display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 14px;
  padding: 11px 15px; background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 3px;
}
.nn-part { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.nn-label {
  font-family: var(--font-m); font-size: .62rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent);
}
.nn-part b { font-size: 1.12rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.nn-meta, .nn-tail { font-family: var(--font-m); font-size: .72rem; color: var(--muted); }
.nn-tail { color: var(--faint); }

/* ---------- co je jinak než obvykle ---------- */

.changes { margin-bottom: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; }
.changes summary {
  display: flex; align-items: center; gap: 10px; padding: 10px 15px;
  cursor: pointer; list-style: none; color: var(--ink); font-size: .96rem;
}
/* Stejné odsazení i velikost písma jako summary — všechny stavy panelu musí
   být přesně stejně vysoké, jinak by mřížka pod nimi poskakovala. */
.ch-note { margin: 0; padding: 10px 15px; font-size: .96rem; color: var(--muted); }
.changes summary::-webkit-details-marker { display: none; }
.changes summary::before {
  content: "▸"; color: var(--faint); font-size: .8rem; transition: transform .15s ease;
}
.changes details[open] summary::before { transform: rotate(90deg); }
.ch-count {
  font-family: var(--font-m); font-size: .68rem; font-weight: 600;
  background: var(--accent); color: #fff; border-radius: 9px; padding: 1px 8px 2px;
}
.ch-body {
  display: flex; flex-wrap: wrap; gap: 6px 34px;
  padding: 4px 15px 14px; border-top: 1px solid var(--line-soft);
}
.ch-day { padding-top: 10px; min-width: 210px; }
.ch-when {
  font-family: var(--font-m); font-size: .66rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.ch-day ul { margin: 5px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ch-day li { display: flex; align-items: baseline; gap: 7px; font-size: .87rem; color: var(--body); }
.ch-tag {
  font-family: var(--font-m); font-size: .58rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; padding: 1px 5px 2px; border-radius: 2px; flex: none;
  background: var(--all-bg); color: var(--all-ink); border: 1px solid var(--all-line);
}
.ch-odpadá .ch-tag { background: var(--gone); color: var(--gone-ink); }
.ch-volno .ch-tag, .ch-navíc .ch-tag { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.ch-učebna .ch-tag, .ch-učitel .ch-tag, .ch-předmět .ch-tag {
  background: var(--s2-bg); color: var(--s2-ink); border-color: var(--s2-line);
}
.ch-hour { font-family: var(--font-m); font-size: .72rem; color: var(--faint); flex: none; }

/* ---------- mřížka ---------- */

.board { background: var(--surface); border: 1px solid var(--line); border-radius: 3px; overflow-x: auto; }
.grid { min-width: 880px; display: grid; }

.gcell { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.corner { background: var(--sunk); }

.hhead {
  padding: 9px 6px 8px; background: var(--sunk);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
}
.hhead .n { font-size: .94rem; font-weight: 700; color: var(--ink); line-height: 1; }
.hhead .t {
  font-family: var(--font-m); font-size: .63rem; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.hhead.nowcol { background: var(--accent-soft); }
.hhead.nowcol .n { color: var(--accent); }

.dhead {
  padding: 12px; background: var(--surface); position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
}
.dhead .d { font-size: 1.02rem; font-weight: 700; color: var(--ink); text-transform: capitalize; line-height: 1.1; }
.dhead .dt { font-family: var(--font-m); font-size: .7rem; color: var(--faint); }
.dhead.today { background: var(--accent-soft); }
.dhead.today .d { color: var(--accent); }
.dhead.today::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--accent); }

.slot { padding: 3px; display: flex; flex-direction: column; gap: 3px; min-height: 84px; }
.slot.nowcell { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent); border-radius: 3px; }

.card {
  flex: 1; min-height: 0; border: 1px solid transparent; border-radius: 2px;
  padding: 5px 7px 6px; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  /* karta je <button> — reset, ať vypadá jako dlaždice, ne jako tlačítko */
  font: inherit; text-align: left; width: 100%; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.card:hover { filter: brightness(1.03); }
.card:active { transform: scale(.985); }
.card .subj { font-size: 1.22rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.card.half .subj { font-size: 1.02rem; }
.card .subj.sm { font-size: .95rem; }
.card .row {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--font-m); font-size: .655rem; line-height: 1.25;
}
.card .row .rm { margin-left: auto; opacity: .82; }

.lnk {
  font: inherit; color: inherit; background: none; border: 0; padding: 0;
  cursor: pointer; border-bottom: 1px dotted currentColor;
}
.lnk:hover { border-bottom-style: solid; }
.grp {
  position: absolute; top: 0; right: 0; padding: 1px 4px 2px; border-radius: 0 0 0 3px;
  font-family: var(--font-m); font-size: .58rem; font-weight: 600; letter-spacing: .05em;
}

.card.s1 { background: var(--s1-bg); border-color: var(--s1-line); color: var(--s1-ink); }
.card.s1 .grp { background: var(--s1-mark); color: #fff; }
.card.s2 { background: var(--s2-bg); border-color: var(--s2-line); color: var(--s2-ink); }
.card.s2 .grp { background: var(--s2-mark); color: #fff; }

/* Celá třída = obě skupiny naráz, tedy obě barvy přeťaté úhlopříčkou. */
.card.all {
  background: linear-gradient(to bottom right,
    var(--s1-bg) 0 calc(50% - 1px),
    var(--all-line) calc(50% - 1px) calc(50% + 1px),
    var(--s2-bg) calc(50% + 1px) 100%);
  border-color: var(--all-line); color: var(--all-ink);
}
/* Volitelný předmět není půlka třídy — neutrální, není co dělit. */
.card.opt { background: var(--all-bg); border-color: var(--all-line); color: var(--all-ink); }
.card.opt .grp { background: var(--all-mark); color: var(--surface); }

.card.chg { box-shadow: inset 3px 0 0 var(--accent); }

/* Puntík vlevo nahoře: text karty je svisle vystředěný, takže roh je volný
   i u nejmenší půlené buňky. Vpravo nahoře sedí značka skupiny. */
.card .todo {
  position: absolute; top: 5px; left: 6px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--todo);
  box-shadow: 0 0 0 1.5px var(--surface);
}
.card.chg .todo { left: 9px; } /* uhnout pruhu změněné hodiny */
.card .todo.late { background: var(--accent); }

.gone {
  flex: 1; border: 1px dashed var(--line); border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  /* Pevný úhel: šrafování má vypadat stejně ve všech buňkách bez ohledu na jejich tvar. */
  background: repeating-linear-gradient(135deg, var(--gone) 0 6px, transparent 6px 12px);
}
.gone span {
  font-family: var(--font-m); font-size: .6rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gone-ink);
}
.blank { background: var(--surface); }

.dayoff {
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: .95rem;
}
.dayoff .m {
  font-family: var(--font-m); font-size: .68rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; opacity: .75;
}

/* ---------- legenda ---------- */

.legend {
  display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 14px 2px 0;
  font-family: var(--font-m); font-size: .7rem; color: var(--muted);
}
.legend i {
  display: inline-block; width: 13px; height: 13px; border-radius: 2px;
  border: 1px solid; vertical-align: -2px; margin-right: 6px;
}
/* Vlastní prefix: `.gone` a spol. už patří kartám v mřížce a přebily by tyhle vzorky. */
.li { display: inline-flex; align-items: center; flex: none; }
.li-s1 i { background: var(--s1-bg); border-color: var(--s1-line); }
.li-s2 i { background: var(--s2-bg); border-color: var(--s2-line); }
.li-all i {
  background: linear-gradient(to bottom right,
    var(--s1-bg) 0 calc(50% - 1px), var(--all-line) calc(50% - 1px) calc(50% + 1px),
    var(--s2-bg) calc(50% + 1px) 100%);
  border-color: var(--all-line);
}
.li-opt i { background: var(--all-bg); border-color: var(--all-line); }
.li-gone i { background: var(--gone); border-color: var(--line); border-style: dashed; }
.li-chg i { background: var(--surface); border-color: var(--line); box-shadow: inset 3px 0 0 var(--accent); }
.li-todo i { background: var(--todo); border-color: var(--todo); border-radius: 50%; }

/* ---------- denní seznam (mobil) ---------- */

.agenda { display: none; flex-direction: column; gap: 13px; }
.aday { background: var(--surface); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.aday h2 {
  margin: 0; padding: 9px 13px; background: var(--sunk);
  display: flex; align-items: baseline; gap: 9px; font-size: 1rem;
}
.aday h2 b { color: var(--ink); text-transform: capitalize; }
.aday h2 span { font-family: var(--font-m); font-size: .7rem; font-weight: 400; color: var(--faint); }
.aday.today h2 { background: var(--accent-soft); }
.aday.today h2 b { color: var(--accent); }
.aday summary { list-style: none; cursor: pointer; }
.aday summary::-webkit-details-marker { display: none; }
.aday h2 { min-height: 44px; align-items: center; }
.aday h2::before {
  content: "▸"; color: var(--faint); font-size: .8rem; transition: transform .15s ease;
}
.aday[open] h2::before { transform: rotate(90deg); }
.aday .acount {
  margin-left: auto; font-style: normal; font-family: var(--font-m);
  font-size: .68rem; font-weight: 400; color: var(--faint);
}

.arow { display: flex; gap: 10px; padding: 8px 13px; border-top: 1px solid var(--line-soft); align-items: stretch; }
.arow.nowrow { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 1px var(--accent); }
.arow .hn {
  width: 54px; flex: none; display: flex; flex-direction: column; justify-content: center;
  font-family: var(--font-m); font-size: .78rem; font-weight: 600; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.arow .hn em { font-style: normal; font-size: .66rem; font-weight: 400; color: var(--faint); }
.arow .cards { display: flex; gap: 6px; flex: 1; min-width: 0; }
.arow .cards .card { padding: 6px 9px; min-height: 46px; }
.arow.empty .cards {
  align-items: center; font-family: var(--font-m); font-size: .74rem; color: var(--faint);
}


/* ---------- profil učitele ---------- */

.profile {
  display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: flex-start;
  margin-bottom: 14px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
}
.tcard { display: flex; gap: 13px; align-items: flex-start; min-width: 240px; }
.avatar {
  width: 58px; height: 58px; border-radius: 4px; object-fit: cover; flex: none;
  background: var(--sunk); border: 1px solid var(--line);
}
.avatar.ph {
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.2rem; color: var(--faint); letter-spacing: .02em;
}
.tcard.compact .avatar { width: 44px; height: 44px; }
.tc-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tc-body > b { font-size: 1.02rem; color: var(--ink); letter-spacing: -.01em; }
.tc-meta { font-family: var(--font-m); font-size: .71rem; color: var(--muted); }
.tc-abbr {
  background: var(--sunk); border: 1px solid var(--line); border-radius: 2px;
  padding: 0 4px; color: var(--ink); font-weight: 600;
}
.tc-subjects { display: flex; flex-wrap: wrap; gap: 4px; }
.tc-subjects span {
  font-family: var(--font-m); font-size: .64rem; font-weight: 600;
  background: var(--all-bg); color: var(--all-ink); border: 1px solid var(--all-line);
  border-radius: 2px; padding: 1px 5px 2px; cursor: help;
}
/* Dlouhý e-mail nemá kde zalomit a na úzkém displeji by přetekl kartu. */
.tc-links {
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  font-family: var(--font-m); font-size: .7rem; overflow-wrap: anywhere;
}
.tc-links a { color: var(--accent); }
.tc-links.muted { color: var(--faint); }

.teaches { display: flex; flex-direction: column; gap: 5px; min-width: 220px; flex: 1; }
.tc-label {
  font-family: var(--font-m); font-size: .62rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint);
}
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-size: .82rem; font-weight: 600; color: var(--ink);
  background: var(--ground); border: 1px solid var(--line); border-radius: 2px; padding: 2px 7px 3px;
}
.chip i { font-style: normal; font-family: var(--font-m); font-size: .64rem; color: var(--faint); font-weight: 400; }
.tc-total { font-family: var(--font-m); font-size: .7rem; color: var(--muted); margin-top: 2px; }

/* ---------- dialog: detail hodiny a nastavení ---------- */

.sheet {
  width: min(520px, calc(100% - 32px)); max-height: min(86vh, 760px);
  padding: 0 20px 20px; border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface); color: var(--body); overflow: auto;
  /* Dorolovaný panel jinak posune stránku pod sebou. */
  overscroll-behavior: contain;
}
/* Na mobilu je `vh` výška včetně schované URL lišty — panel by přerostl
   viditelnou plochu a křížek by skončil za okrajem. */
@supports (height: 100dvh) {
  .sheet { max-height: min(86dvh, 760px); }
}
.sheet::backdrop { background: rgba(6, 8, 12, .5); backdrop-filter: blur(2px); }
.sheet-head {
  position: sticky; top: 0; z-index: 1; background: var(--surface);
  display: flex; align-items: flex-start; gap: 14px; padding: 18px 0 14px;
  border-bottom: 1px solid var(--line-soft); margin-bottom: 16px;
}
.sheet-head h2 { margin: 2px 0 0; font-size: 1.32rem; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.sheet-eyebrow {
  font-family: var(--font-m); font-size: .65rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.sheet-x {
  margin-left: auto; flex: none; width: 32px; height: 32px; border-radius: 3px;
  font-size: 1.4rem; line-height: 1; color: var(--muted);
  background: var(--ground); border: 1px solid var(--line); cursor: pointer;
}
.sheet-x:hover { color: var(--ink); }
.sheet-label {
  display: block; font-family: var(--font-m); font-size: .62rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 7px;
}
.sheet-change {
  margin: 0 0 16px; padding: 9px 12px; border-radius: 3px; font-size: .9rem;
  background: var(--accent-soft); color: var(--accent); border-left: 3px solid var(--accent);
}
.sheet-facts { margin: 0 0 18px; display: flex; flex-direction: column; gap: 1px; }
.dt-row { display: grid; grid-template-columns: 90px 1fr; gap: 12px; padding: 7px 0; border-top: 1px solid var(--line-soft); }
.dt-row dt { font-family: var(--font-m); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding-top: 2px; }
.dt-row dd { margin: 0; color: var(--ink); font-size: .95rem; }
.sheet-section { display: flex; flex-direction: column; gap: 12px; }
.sheet-btn {
  align-self: flex-start; font-family: var(--font-d); font-size: .85rem; font-weight: 600;
  background: var(--ink); color: var(--ground); border: 0; border-radius: 3px;
  padding: 9px 16px; cursor: pointer;
}
.sheet-btn:hover { opacity: .9; }

.tasks { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.task {
  display: grid; grid-template-columns: 62px 1fr auto; align-items: baseline; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--line-soft);
}
.task .tk-due {
  font-family: var(--font-m); font-size: .68rem; font-weight: 600;
  letter-spacing: .04em; color: var(--todo);
}
.task .tk-title { color: var(--ink); font-size: .95rem; }
.task .tk-list { font-family: var(--font-m); font-size: .62rem; color: var(--faint); }
.task.late .tk-due { color: var(--accent); text-transform: uppercase; letter-spacing: .06em; font-size: .6rem; }

/* ---------- výběr třídy při první návštěvě ---------- */

.pick-note { margin: 0 0 16px; font-size: .9rem; color: var(--muted); }
.pick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 7px;
}
.pick-grid button {
  font-family: var(--font-d); font-size: .92rem; font-weight: 600; color: var(--ink);
  background: var(--ground); border: 1px solid var(--line); border-radius: 3px;
  padding: 11px 6px; cursor: pointer;
}
.pick-grid button:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- stavy ---------- */

.skeleton { display: flex; flex-direction: column; gap: 3px; }
.sk-row {
  height: 84px; border-radius: 3px;
  background: linear-gradient(90deg, var(--sunk) 0%, var(--surface) 50%, var(--sunk) 100%);
  background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.error {
  background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
  padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
}
.error b { font-size: 1.05rem; color: var(--ink); }
.error p { margin: 0; color: var(--muted); font-size: .92rem; max-width: 58ch; }
.error button {
  margin-top: 4px; font-family: var(--font-d); font-size: .84rem; font-weight: 600;
  background: var(--ink); color: var(--ground); border: 0; border-radius: 3px;
  padding: 8px 16px; cursor: pointer;
}

.foot {
  max-width: var(--wrap-max); margin: 0 auto;
  padding: 22px var(--pad-r) calc(40px + env(safe-area-inset-bottom, 0px)) var(--pad-l);
  display: flex; gap: 8px 22px; flex-wrap: wrap;
  font-family: var(--font-m); font-size: .68rem; color: var(--faint);
}
.foot a { color: var(--muted); }

/* ---------- velké displeje ---------- */

/* Samotné rozšíření stropu by dalo obří poloprázdné buňky — v buňce jsou tři
   krátké údaje, na které stačí ~120px. Roste proto i písmo a výška řádku,
   aby si mřížka udržela proporce a byla čitelná z větší vzdálenosti.
   Strop zůstává: přes ~1800px je grafika roztažená, ne lépe čitelná. */

@media (min-width: 1500px) {
  :root { --wrap-max: 1540px; --daycol: 102px; }
  html { font-size: 17px; }
  body { font-size: 16px; }
  .slot { min-height: 94px; }
  .dhead { padding: 14px; }
}

@media (min-width: 1920px) {
  :root { --wrap-max: 1800px; --daycol: 116px; }
  html { font-size: 18px; }
  body { font-size: 17px; }
  .slot { min-height: 108px; }
  .dhead { padding: 16px; }
  .card { padding: 7px 10px 8px; }
}

/* Mobilní bloky jsou schválně až tady na konci: mají stejnou specificitu jako
   základní pravidla, takže rozhoduje pořadí v souboru. Dřív seděly uprostřed
   a všechno, co se definuje níž (panel, profil, výběr třídy, patička), je
   tiše přebíjelo. */

/* ---------- mobil ---------- */

@media (max-width: 860px) {
  body { font-size: 16px; }
  /* Užší okraje než na desktopu, ale nikdy pod výřez displeje na šířku. */
  .wrap, .bar, .status, .foot { --pad-l: 12px; --pad-r: 12px; }
  @supports (padding: max(0px, env(safe-area-inset-left))) {
    .wrap, .bar, .status, .foot {
      --pad-l: max(12px, env(safe-area-inset-left));
      --pad-r: max(12px, env(safe-area-inset-right));
    }
  }
  .wrap { padding: 12px var(--pad-r) 0 var(--pad-l); }

  .board { display: none; }
  .agenda { display: flex; }

  /* Lišta: značka na svém řádku, ovládání pod ní. Zalamuje se, nikoli roluje —
     rolovací pruh bez scrollbaru schovával přepínač motivu úplně mimo obrazovku. */
  .bar { padding: 9px var(--pad-r) 9px var(--pad-l); gap: 9px; }
  .brand { width: 100%; margin-right: 0; }
  .tools { width: 100%; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
  .field { flex-direction: row; align-items: center; gap: 7px; flex: none; }
  .clabel { display: none; }
  .seg button, .refresh { padding: 0 13px; font-size: .86rem; }
  /* 16px, jinak Safari na iPhonu při ťuknutí nazoomuje celou stránku. */
  select { padding: 0 10px; font-size: 16px; }
  /* Palcem trefitelný cíl podle WCAG 2.5.8 (24px) i doporučení Applu (44px). */
  .seg button, .refresh, select, .back, .changes summary, .pick-grid button {
    min-height: 44px;
  }
  /* Popisky pryč, zůstanou značky — ovládání se pak vejde na dva řádky. */
  .refresh .txt, .seg button .txt { display: none; }
  .seg button .ico { display: inline; }
  .refresh .ico, .seg button .ico { font-size: 1.05rem; }

  /* Hlavička dne se schválně nelepí. Lepivý prvek se odlepí od začátku sekce
     a jde dolů, dokud ho nedožene její spodní hrana — u krátkých sekcí (den má
     1–6 hodin) tedy leží přes vlastní karty. S `top: 0` to nebylo vidět jen
     proto, že mizela pod horní lištou. */
  .arow { padding: 7px 11px; gap: 11px; }
  .arow .hn { width: 46px; }
  .arow .cards { gap: 5px; }
  .arow .cards .card { min-height: 54px; padding: 8px 11px; }
  .card .subj, .card.half .subj { font-size: 1.15rem; }
  .card .row { font-size: .74rem; }
  .grp { font-size: .64rem; padding: 2px 5px 3px; }

  .nownext { padding: 12px 14px; gap: 10px 20px; }
  .nn-part b { font-size: 1.2rem; }

  .profile { gap: 14px; padding: 13px 14px; }
  .ch-body { gap: 4px 20px; }

  /* Dialog jako panel vytažený zespodu — palec ho dosáhne. Spodní odsazení
     počítá s indikátorem domů na iPhonu, ať pod ním neleží tlačítko. */
  .sheet {
    width: 100%; max-width: none; max-height: 90vh; margin: auto 0 0;
    border-radius: 10px 10px 0 0; border-bottom: 0;
    padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
  }
  @supports (height: 100dvh) {
    .sheet { max-height: 90dvh; }
  }
  .sheet-head { padding-top: 16px; }
  .sheet-x { width: 44px; height: 44px; }
  .sheet-btn { width: 100%; text-align: center; padding: 13px 16px; min-height: 44px; }
  .dt-row { grid-template-columns: 76px 1fr; }
}

@media (max-width: 460px) {
  .titles b { font-size: .98rem; }
  .arow .hn { width: 40px; font-size: .7rem; }
  .legend { gap: 6px 14px; font-size: .66rem; }
  .foot { flex-direction: column; gap: 4px; }
  .ch-day { min-width: 100%; }
  .nownext { flex-direction: column; gap: 8px; }

  /* Teprve tady se S1 a S2 skládají pod sebe. Na širším mobilu i tabletu
     vedle sebe drží — jinak by se rozvrh na délku zbytečně zdvojnásobil. */
  .arow .cards { flex-direction: column; }

  /* Užší tlačítka, ať se ovládání drží na dvou řádcích i na 360px displeji. */
  .seg button, .refresh, select { padding: 0 10px; }
  select { min-width: 0; }
  /* Minimální šířky z desktopu by tady vynutily vodorovné přetečení. */
  .tcard, .teaches { min-width: 0; }
  .pick-grid { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); }
}


@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}