/* ===========================================================================
   Studee — per-page rules. The sign-in screen is `.yu-auth` from the house
   style; the handful of rules below only place Studee's wordmark, the card
   and the language switch under it.
   Row titles and figures are Unageo SemiBold, tracked tight.
   =========================================================================== */

/* -------------------------------------------------------- the sign-in screen */
/* min-width: 0 and anywhere: the column sits in an auto grid track, and an
   EduPage error with a link in it would widen it past the screen. */
.auth-col { width: 100%; max-width: 440px; min-width: 0; overflow-wrap: anywhere; display: flex; flex-direction: column; }
.auth-col yumee-logo { --yu-logo-size: clamp(2.6rem, 2rem + 2vw, 3.2rem); }
.auth-col .yu-auth__card { width: 100%; margin-top: 10px; padding: clamp(28px, 5vw, 38px) clamp(22px, 5vw, 36px) clamp(24px, 5vw, 36px); }
.auth-col .yu-auth__title { margin-top: 0; }
.auth-kicker { margin: 0; }
.auth-foot { margin-top: 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.auth-foot .auth-aside { margin-top: 0; }
.lang-switch { justify-content: flex-start; }
.auth-foot .lang-switch { justify-content: center; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .field { gap: 6px; }
.auth-2fa { display: flex; flex-direction: column; gap: 14px; text-align: center; }
.auth-2fa .waiting { font-size: .875rem; color: var(--muted); }
.auth-aside { margin-top: 18px; text-align: center; font-size: .875rem; color: var(--muted); }

/* ------------------------------------------------------------ rozvrh */
.week-nav { display: flex; align-items: center; gap: 8px; }
.week-label { font-family: var(--head); font-weight: var(--w-head); font-size: .9375rem; letter-spacing: -.01em; color: var(--ink); min-width: 150px; text-align: center; font-variant-numeric: tabular-nums; }
.week-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.day-col .day-head { display: flex; align-items: baseline; gap: 7px; padding: 2px 8px 10px; }
.day-col .dh-name { font-family: var(--head); font-weight: var(--w-head); font-size: 1rem; letter-spacing: var(--track-head); text-transform: capitalize; }
.day-col .dh-date { font-size: .6875rem; color: var(--muted); flex: 1; }
.day-col .day-head .chip { font-size: .625rem; padding: 4px 8px; }
.day-col.today .dh-name { color: var(--purple-ink); }

.day-col .day-card { padding: 10px; display: flex; flex-direction: column; gap: 6px; min-height: 140px; }
.day-col.today .day-card { border-color: var(--lav-300); background: var(--lav-50); }
.day-free { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: .875rem; min-height: 80px; }

.wk-lesson {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 9px 10px;
  border-radius: var(--r-md);
  background: var(--surface);
  width: 100%;
  text-align: left;
  transition: background .1s var(--ease);
}
.wk-lesson:hover { background: var(--tint); }
.day-col.today .wk-lesson { background: var(--card); box-shadow: inset 0 0 0 1px var(--line-card); }
.day-col.today .wk-lesson:hover { background: var(--lav-50); }
.wk-lesson .num {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  border: var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--head);
  font-weight: var(--w-head);
  font-size: .8125rem;
  color: var(--purple-ink);
  background: var(--card);
  font-variant-numeric: tabular-nums;
}
.wk-lesson .wk-body { flex: 1 1 96px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wk-lesson .wl-subj { font-family: var(--head); font-weight: var(--w-head); font-size: .9375rem; letter-spacing: -.01em; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-lesson .wl-meta { font-size: .6875rem; color: var(--muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-lesson .wl-teacher { font-size: .6875rem; color: var(--purple-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-lesson .chip { font-size: .5625rem; padding: 3px 7px; flex: 0 0 auto; }
/* In a narrow day column the state chip goes under the subject rather than
   squeezing it to nothing. */
.wk-lesson .wk-body + .chip, .wk-lesson .wk-body + .chip + .chip { margin-left: auto; }
.wk-lesson.done { opacity: 0.6; }
.wk-lesson.done .num { background: var(--surface); color: var(--muted); }
.wk-lesson.now { background: var(--lav-50); box-shadow: inset 0 0 0 1px var(--lav-300); }
.wk-lesson.now .num { background: var(--purple-ink); border-color: var(--purple-ink); color: var(--on-contrast); }
.wk-lesson.now .wl-subj { color: var(--purple-ink); }
.wk-lesson.subst { background: var(--subst-soft); border-left: 4px solid var(--subst); }
.wk-lesson.subst .wl-teacher { color: var(--subst-ink); font-weight: 600; }
.wk-lesson.changed { background: var(--lav-50); border-left: 4px solid var(--violet); }
.wk-lesson.cancelled { background: var(--danger-soft); border-left: 4px solid var(--danger); }
.wk-lesson.cancelled .wl-subj { text-decoration: line-through; text-decoration-color: var(--danger); color: var(--ink); }
.wk-lesson.cancelled .num { border-color: var(--danger); color: var(--muted); }

.change-banner { margin-bottom: 16px; }
.cb-list { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  border: var(--hairline);
  background: var(--lav-50);
  font-size: .8125rem;
  max-width: 100%;
  min-width: 0;
  flex-wrap: wrap;
  text-align: left;
  overflow-wrap: anywhere;
}
.cb-item:hover { border-color: var(--lav-300); }
.cb-item b { font-weight: 600; text-transform: capitalize; }
.cb-item .cb-what { font-size: .625rem; font-weight: var(--w-ui); letter-spacing: var(--track); text-transform: uppercase; opacity: 0.75; }
.cb-item.subst { border-color: var(--subst); background: var(--subst-soft); color: var(--subst-ink); }
.cb-item.cancelled { border-color: var(--danger); background: var(--danger-soft); color: var(--ink); }

/* In the five-column week the current lesson is already marked (purple number,
   lavender tile, the day's "dnes"), so its chip would only crowd the tile. */
@media (max-width: 1600px) and (min-width: 900px) {
  .wk-lesson .chip.now { display: none; }
}
@media (max-width: 899px) {
  .week-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .day-col .day-card { min-height: 0; }
  .day-free { min-height: 44px; }
  /* sticky under the floating header band */
  .day-col .day-head { position: sticky; top: calc(70px + var(--safe-top)); z-index: 5; background: var(--bg); padding-top: 6px; }
  .wk-lesson { padding: 11px 12px; }
  .week-nav { width: 100%; }
  .week-label { flex: 1; }
}

/* ------------------------------------------------------------ znamky */
.grades-head { display: flex; align-items: center; gap: 12px; }

.grades-avg { font-size: .875rem; color: var(--muted); }
.grades-avg b { font-family: var(--head); color: var(--ink); font-size: 1.25rem; font-weight: var(--w-head); letter-spacing: var(--track-head); }
.grades-avg.bad b { color: var(--danger); }

.subject-card { margin-bottom: 16px; }
.subject-card.weak { border-color: var(--danger); }
.subject-head .s-avg.bad { color: var(--danger); }
.subject-head { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; }
.subject-head .s-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-family: var(--head); font-weight: var(--w-head); font-size: 1.0625rem; letter-spacing: var(--track-head); }
.subject-head .s-avg { font-family: var(--head); font-size: 1.25rem; font-weight: var(--w-head); letter-spacing: var(--track-head); font-variant-numeric: tabular-nums; }
.subject-head .s-class { font-size: .75rem; color: var(--muted); }
.subject-grades { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.g-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  border: var(--hairline);
  background: var(--card);
  min-width: 48px;
}
.g-chip .g-val { font-family: var(--head); font-size: 1.0625rem; font-weight: var(--w-head); font-variant-numeric: tabular-nums; }
.g-chip .g-meta { font-size: .625rem; color: var(--muted); }

/* ------------------------------------------------------------- ulohy */
.filter-row { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.task-group-label { font-size: .6875rem; font-weight: var(--w-ui); letter-spacing: var(--track); text-transform: uppercase; color: var(--faint); margin: 22px 4px 10px; }
.task-group-label:first-child { margin-top: 0; }
/* a count beside a filter, a year or the archive toggle: the house tab count */
.fc-count {
  font-style: normal;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  min-width: 24px;
  padding: 4px 7px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.active > .fc-count { background: var(--primary-soft); color: var(--purple-ink); }

@media (max-width: 559px) {
  .task-row { flex-wrap: wrap; gap: 8px 12px; padding: 12px 2px; }
  .task-row .t-title { flex: 1 1 100%; order: 3; white-space: normal; }
  .task-row .task-check { order: 1; }
  .task-row .subject-chip { order: 2; }
  .task-row .chip { order: 2; }
  .task-row .t-due { order: 2; margin-left: auto; }
  .task-row .detail-btn { order: 4; }
  .lesson-row { gap: 6px 10px; padding: 9px 8px; flex-wrap: wrap; }
  .lesson-row .time { min-width: 0; }
  .lesson-row .lr-body { flex: 1 1 100%; order: 4; padding-left: 40px; }
  .lesson-row .check { display: none; }
  .abs-row { flex-wrap: wrap; gap: 6px 10px; }
  .abs-row .ab-text { flex: 1 1 100%; }
  .abs-row .ab-note { max-width: 100%; }
}

/* ---------------------------------------------------------- dochádzka */
.abs-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 559px) { .abs-stats { grid-template-columns: 1fr; } }

.abs-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; }
.abs-row.unexcused { border-left: 3px solid var(--danger); padding-left: 9px; }
.abs-row + .abs-row { border-top: var(--hairline); }
.abs-row .ab-date { flex: 0 0 64px; font-family: var(--head); font-size: .875rem; font-weight: var(--w-head); color: var(--purple-ink); font-variant-numeric: tabular-nums; }
.abs-row .ab-text { flex: 1; font-size: .875rem; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.abs-row .ab-periods { font-size: .75rem; color: var(--muted); }
.abs-row .ab-note { font-size: .75rem; color: var(--muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.abs-day { cursor: pointer; border-radius: var(--r-sm); }
.abs-day:hover { background: var(--lav-50); }

.ab-chart { display: flex; align-items: flex-end; gap: 8px; height: 132px; padding: 8px 2px 0; }
.ab-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; padding: 0; }
.ab-bar-fill {
  width: 100%;
  max-width: 46px;
  background: var(--primary-soft);
  border-radius: var(--r-sm) var(--r-sm) 6px 6px;
  transition: background var(--fast) var(--ease);
}
.ab-bar.active .ab-bar-fill { background: var(--violet); }
.ab-bar:hover .ab-bar-fill { background: var(--primary); }
.ab-bar.active:hover .ab-bar-fill { background: var(--violet); }
.ab-bar-val { font-family: var(--head); font-size: .875rem; font-weight: var(--w-head); font-variant-numeric: tabular-nums; }
.ab-bar-label { font-size: .625rem; color: var(--muted); }

.ab-lessons { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.ab-lesson { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-width: 0; overflow-wrap: anywhere; padding: 6px 11px; border-radius: var(--r-sm); border: var(--hairline); background: var(--card); font-size: .8125rem; }
.ab-code { font-size: .625rem; color: var(--muted); font-weight: 600; letter-spacing: .04em; }

/* --------------------------------------------------------- nástenka */
:where(.nb-card, .filter-chip, .file-row, .ann-row, .nb-detail-head)[data-cat] {
  --cat: var(--violet);
  --cat-soft: var(--surface);
  --cat-ink: var(--purple-ink);
}
[data-cat="message"] { --cat: var(--violet); --cat-soft: var(--lav-50); --cat-ink: var(--purple-ink); }
[data-cat="grade"] { --cat: var(--mint); --cat-soft: var(--mint-soft); --cat-ink: var(--mint-ink); }
[data-cat="homework"] { --cat: var(--subst); --cat-soft: var(--subst-soft); --cat-ink: var(--subst-ink); }
[data-cat="absence"] { --cat: var(--pink); --cat-soft: var(--pink-soft); --cat-ink: var(--pink-ink); }
[data-cat="event"] { --cat: var(--sky); --cat-soft: var(--sky-soft); --cat-ink: var(--sky-ink); }
[data-cat="other"] { --cat: var(--line-quiet); --cat-soft: var(--surface); --cat-ink: var(--muted); }

.nb-actions { display: flex; align-items: center; gap: 8px; }
.nb-actions .btn { padding: 0 18px; }

.nb-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 2px 16px; }
.nb-bar .filter-row { flex: 1 1 320px; min-width: 0; margin: 0; }
.fc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cat); flex: 0 0 auto; }
.filter-chip[data-cat="all"] .fc-dot, .filter-chip[data-cat="soon"] .fc-dot { display: none; }
.filter-chip[data-cat="soon"].active { background: var(--subst-soft); color: var(--subst-ink); border-color: transparent; }

.nb-search { min-width: 240px; }
.nb-search input { font-size: .875rem; }
.nb-search input::-webkit-search-cancel-button { display: none; }

.nb-files { margin-bottom: 16px; }
.file-row .f-icon { color: var(--cat-ink); }

.nb-section { margin-bottom: 22px; }
.nb-sec-head { display: flex; align-items: baseline; gap: 8px; padding: 2px 4px 10px; }
.nb-sec-label { font-size: .6875rem; font-weight: var(--w-ui); letter-spacing: var(--track); text-transform: uppercase; color: var(--faint); }
.nb-sec-count { font-size: .6875rem; font-weight: 600; color: var(--purple-ink); background: var(--lav-50); border-radius: var(--r-pill); padding: 2px 8px; font-variant-numeric: tabular-nums; }
.nb-sec-hint { margin-left: auto; font-size: .75rem; color: var(--muted); }
.nb-section[data-sec="soon"] .nb-sec-label { color: var(--subst-ink); }
.nb-section[data-sec="today"] .nb-sec-label { color: var(--purple-ink); }

.nb-feed { display: flex; flex-direction: column; gap: 14px; }

.nb-more {
  width: 100%;
  margin-top: 12px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: var(--hairline);
  background: var(--card);
  box-shadow: var(--shadow-card);
  font-size: .875rem;
  font-weight: var(--w-ui);
  color: var(--purple-ink);
  transition: border-color var(--fast) var(--ease), box-shadow var(--slow) var(--ease);
}
.nb-more:hover { border-color: var(--lav-300); box-shadow: var(--shadow-hover); }
.nb-cap { font-size: .75rem; color: var(--muted); text-align: center; margin: 4px 0 8px; }

/* A record on the board: a paper card, its category in a 4px edge. */
.nb-card { display: flex; gap: 14px; border-left: 4px solid var(--cat); padding: 16px 18px; }
.nb-icon {
  flex: 0 0 40px;
  height: 40px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cat-soft);
  color: var(--cat-ink);
}
.nb-body { flex: 1; min-width: 0; }
.nb-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 6px; }
.nb-top .chip { font-size: .625rem; padding: 4px 9px; }
.chip.nb-type { background: var(--cat-soft); color: var(--cat-ink); }
.nb-flag { order: -1; }
.nb-date { font-size: .75rem; color: var(--muted); margin-left: auto; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; text-align: right; }
.nb-exact { color: var(--faint); font-size: .625rem; }
.nb-title { font-family: var(--head); font-weight: var(--w-head); font-size: 1.0625rem; letter-spacing: var(--track-head); line-height: 1.3; text-align: left; display: block; width: 100%; }
.nb-title:hover { color: var(--purple-ink); }
.nb-meta { font-size: .75rem; color: var(--cat-ink); margin-top: 2px; font-weight: var(--w-ui); }
.nb-text { font-size: .8125rem; color: var(--muted); margin-top: 6px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nb-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.nb-author { font-size: .75rem; font-weight: 600; }
.nb-att { display: inline-flex; align-items: center; gap: 4px; font-size: .75rem; color: var(--muted); }
.nb-spacer { flex: 1; }

.nb-card.is-cancelled { border-left-color: var(--danger); background: var(--surface); box-shadow: none; }
.nb-card.is-cancelled .nb-title, .gd-title.struck { text-decoration: line-through; text-decoration-color: var(--danger); text-decoration-thickness: 1.5px; color: var(--ink); opacity: 0.8; }
.nb-card.is-cancelled .nb-meta { text-decoration: line-through; text-decoration-color: var(--danger); }
.nb-card.is-cancelled .nb-text { opacity: 0.75; }
.nb-card.is-cancelled .nb-icon { color: var(--danger); background: var(--danger-soft); }
.nb-card.is-cancelled:hover, .nb-card.is-cancelled:focus-within { background: var(--card); }

#nb-body { padding-bottom: calc(6px + var(--tabbar-space)); }

.nb-when-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .8125rem; font-weight: var(--w-ui); color: var(--purple-ink); }
.nb-when-row svg { flex: 0 0 auto; }

.nb-detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nb-reply-row { border-left: 2.5px solid var(--violet); padding: 8px 0 8px 12px; margin-top: 8px; }
.nb-reply-row.own { border-left-color: var(--pink); }
.nbr-top { display: flex; justify-content: space-between; gap: 10px; font-size: .75rem; }
.nbr-top span { color: var(--muted); }
.nbr-text { font-size: .875rem; margin-top: 3px; white-space: pre-wrap; }
.nbr-quote { font-size: .8125rem; background: var(--surface); border-radius: var(--r-md); padding: 10px 12px; margin-top: 5px; }
.nb-replying { margin-bottom: 4px; }

.nb-compose { display: flex; flex-direction: column; gap: 14px; }
.nb-attach-btn { align-self: flex-start; cursor: pointer; }
.nb-atts:not(:empty) { margin-bottom: 8px; }

@media (max-width: 899px) {
  .nb-actions { width: 100%; }
  .nb-actions .btn { flex: 1; }
  /* Chips wrap onto the next line on a phone. A chip row that scrolls
     sideways is the page panning in a smaller box (DESIGN-SYSTEM.md §4). */
  .filter-chip { flex: 0 0 auto; padding: 0 12px; }
  /* iOS zooms into a focused field under 16px, and a zoomed page pans. */
  .nb-search input { font-size: 1rem; }
}
@media (max-width: 559px) {
  .nb-bar { gap: 10px; }
  .nb-search { min-width: 100%; }
  .nb-card { padding: 14px 14px 14px 12px; gap: 10px; }
  .nb-icon { flex-basis: 34px; height: 34px; }
  .nb-foot { gap: 8px; }
  .detail-btn { padding: 0 11px; }
}

/* ------------------------------------------------------------ oznamy */
.oznam-card { margin-bottom: 12px; }
.oznam-head { display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left; }
.oznam-head .o-title { flex: 1; font-family: var(--head); font-weight: var(--w-head); font-size: 1.0625rem; letter-spacing: var(--track-head); }
.oznam-head .o-date { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.oznam-body { font-size: .875rem; margin-top: 10px; color: var(--ink); overflow-wrap: anywhere; }
.oznam-body a { text-decoration: underline; }
.oznam-author { font-size: .75rem; color: var(--muted); margin-top: 8px; }

/* ------------------------------------------------------------ subory */
.file-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; }
.file-row + .file-row { border-top: var(--hairline); }
.file-row .f-name { flex: 1; font-size: .875rem; font-weight: var(--w-ui); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-row .f-meta { font-size: .75rem; color: var(--muted); white-space: nowrap; }

/* -------------------------------------------------------- nastavenia */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 899px) { .settings-grid { grid-template-columns: 1fr; gap: 16px; } }
.settings-note { font-size: .75rem; color: var(--muted); margin-top: 10px; }
.settings-body { font-size: .875rem; }
.settings-body.muted { color: var(--muted); }

.settings-actions { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.danger-link { color: var(--danger); font-size: .8125rem; font-weight: 600; }