/* Schedule on phones (2026-09-29).
   Before: the page was pinned to the screen height and every row of chrome
   (title, plan card, two toolbar rows, week strip, a replan bar) came out of
   the agenda, which was left a 112px scroll box under a sticky strip that
   swallowed taps. Now the page scrolls as one, the chrome is compact, the
   week strip sticks while the day scrolls, and the undo is a small toast.
   Phone only (the schedule's own phone breakpoint); desktop is untouched -
   except "Clear schedule" (the menu item, its confirmation and the toast),
   which is for every width and sits at the end of this file. */
@media (max-width: 639px) {
  /* ---- one scroll: the page, not a box inside it ------------------------ */
  html body .kv-app-shell .sc-page {
    flex: none; height: auto; min-height: 100%;
    gap: 12px; padding: 12px 14px calc(96px + var(--kv-safe-b, 0px));
  }
  html body .kv-app-shell .sc-body { display: block; min-height: 0; height: auto; }
  html body .kv-app-shell .sc-canvas { display: block; min-height: 0; height: auto; overflow: visible; border: 0; background: transparent; padding: 0; box-shadow: none; }
  html body .kv-app-shell .sc-agenda { overflow: visible; height: auto; flex: none; padding: 0; }

  /* ---- header: title + two compact actions ------------------------------ */
  html body .kv-app-shell .sc-head { min-height: 0; align-items: center; gap: 10px; }
  html body .kv-app-shell .sc-head h1 { margin: 0; font-size: 24px; line-height: 1.1; letter-spacing: -.01em; }
  html body .kv-app-shell .sc-head__actions { gap: 8px; }
  html body .kv-app-shell .sc-head__actions .kv-btn { min-height: 38px !important; height: 38px; border-radius: 12px; font-size: 14px; }
  html body .kv-app-shell .sc-head__actions .kv-btn--secondary { width: 38px !important; }
  html body .kv-app-shell .sc-head__actions .kv-btn--primary { padding-inline: 12px 14px !important; gap: 6px; }

  /* ---- plan card: numbers on one line, subjects scroll sideways --------- */
  html body .kv-app-shell .sc-page .kvp-bar { gap: 10px; margin: 0; padding: 12px; border-radius: 16px; }
  html body .kv-app-shell .sc-page .kvp-bar__top { flex-wrap: nowrap; align-items: flex-start; gap: 8px; }
  html body .kv-app-shell .sc-page .kvp-bar__stats { flex: 1; min-width: 0; gap: 4px 12px; font-size: 12.5px; line-height: 1.35; }
  html body .kv-app-shell .sc-page .kvp-bar__stats b { font-size: 14px; }
  html body .kv-app-shell .sc-page .kvp-bar__exam { flex-basis: 100%; }
  html body .kv-app-shell .sc-page .kvp-bar__actions { flex: none; }
  html body .kv-app-shell .sc-page .kvp-bar__actions .kv-btn {
    min-height: 34px !important; height: 34px; padding: 0 10px !important; border-radius: 10px; font-size: 13px;
  }
  html body .kv-app-shell .sc-page .kvp-bar__subjects {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    margin-inline: -12px; padding-inline: 12px; scroll-padding-inline: 12px;
  }
  html body .kv-app-shell .sc-page .kvp-bar__subjects::-webkit-scrollbar { display: none; }
  html body .kv-app-shell .sc-page .kvp-ws-chip { flex: none; min-height: 32px !important; height: 32px; padding: 0 11px !important; font-size: 13px; }

  /* ---- toolbar: range + arrows + today, then the view switch ------------ */
  html body .kv-app-shell .sc-toolbar { display: grid; gap: 8px; padding: 0; margin: 0; border: 0; background: transparent; }
  html body .kv-app-shell .sc-toolbar__nav { display: flex; align-items: center; gap: 4px; min-width: 0; }
  html body .kv-app-shell .sc-toolbar__nav .sc-datepicker { order: -1; flex: 1; min-width: 0; margin: 0; }
  html body .kv-app-shell .sc-range {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 36px !important; padding: 0 !important;
    border: 0; background: transparent; font-size: 17px; font-weight: 700; color: var(--kv-text);
  }
  html body .kv-app-shell .sc-range span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body .kv-app-shell .sc-steppers { display: flex; gap: 2px; }
  html body .kv-app-shell .sc-steppers button, html body .kv-app-shell .sc-today {
    min-height: 34px !important; height: 34px; min-width: 34px; border-radius: 10px; font-size: 13px;
  }
  html body .kv-app-shell .sc-today { padding: 0 12px !important; }
  html body .kv-app-shell .sc-toolbar__right { display: flex; align-items: center; gap: 6px; width: 100%; }
  html body .kv-app-shell .sc-views { flex: 1; display: flex; min-height: 36px; padding: 3px; border-radius: 12px; }
  html body .kv-app-shell .sc-views button { flex: 1; min-height: 30px !important; height: 30px; padding: 0 6px !important; border-radius: 9px; font-size: 13px; }
  html body .kv-app-shell .sc-inbox-toggle, html body .kv-app-shell .sc-overflow__trigger {
    flex: none; min-height: 36px !important; height: 36px; min-width: 36px; padding: 0 10px !important; border-radius: 12px;
  }
  html body .kv-app-shell .sc-inbox-toggle > span { display: none; }

  /* ---- week strip: sticks under the app bar while the day scrolls ------- */
  html body .kv-app-shell .sc-week-strip {
    position: sticky !important; top: 0; z-index: 6;
    margin: 0 -14px 10px; padding: 8px 14px !important; gap: 4px !important;
    background: var(--kv-canvas) !important;
    border-block-end: 1px solid var(--kv-line);
  }
  html body .kv-app-shell .sc-week-strip button { min-height: 54px !important; padding: 6px 0 !important; border-radius: 14px !important; gap: 3px !important; }
  html body .kv-app-shell .sc-week-strip button.is-today:not(.is-selected) b { color: var(--kv-on-violet); }
  html body .kv-app-shell .sc-week-strip b { font-size: 16px; font-weight: 700; }
  html body .kv-app-shell .sc-agenda__day { scroll-margin-top: 84px; }

  /* ---- one day ---------------------------------------------------------- */
  html body .kv-app-shell .sc-agenda__day.is-selected { border: 0; padding: 0; background: transparent; }
  html body .kv-app-shell .sc-agenda__head { display: flex; align-items: baseline; gap: 8px; padding: 2px 2px 10px !important; border: 0; }
  html body .kv-app-shell .sc-agenda__date { display: inline-flex; align-items: baseline; gap: 6px; }
  html body .kv-app-shell .sc-agenda__date b { font-size: 16px; font-weight: 700; color: var(--kv-text); }
  html body .kv-app-shell .sc-agenda__date em { font-style: normal; font-size: 16px; font-weight: 700; color: var(--kv-text); }
  html body .kv-app-shell .sc-agenda__summary { flex: 1; font-size: 12.5px; color: var(--kv-text-muted); }
  html body .kv-app-shell .sc-agenda__add { width: 32px; height: 32px; min-height: 32px !important; border-radius: 10px; }
  html body .kv-app-shell .sc-agenda__list { display: grid; gap: 8px !important; }

  /* ---- a session -------------------------------------------------------- */
  html body .kv-app-shell .sc-block--agenda {
    display: flex; align-items: stretch; width: 100%; min-height: 64px !important; padding: 0;
    border: 1px solid var(--kv-line); border-radius: 14px !important; overflow: hidden;
    background: var(--kv-card); text-align: start;
  }
  html body .kv-app-shell .sc-block--agenda .sc-block__rail { flex: none; width: 4px; background: var(--sc-accent, var(--kv-on-violet)); }
  html body .kv-app-shell .sc-block--agenda .sc-block__body { flex: 1; min-width: 0; display: grid; gap: 3px; padding: 10px 12px !important; }
  html body .kv-app-shell .sc-block--agenda .sc-block__meta { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; }
  html body .kv-app-shell .sc-block--agenda .sc-block__kind { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px !important; color: var(--kv-text-muted); }
  html body .kv-app-shell .sc-block--agenda .sc-block__time { margin-inline-start: auto; font-size: 12.5px; font-weight: 650; color: var(--kv-text-2); white-space: nowrap; }
  html body .kv-app-shell .sc-block--agenda .sc-block__duration { margin-inline-start: 6px; font-weight: 500; color: var(--kv-text-muted); }
  html body .kv-app-shell .sc-block--agenda .sc-block__title { font-size: 15px !important; font-weight: 650; color: var(--kv-text); }
  html body .kv-app-shell .sc-block--agenda .sc-block__reason { font-size: 12px; color: var(--kv-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body .kv-app-shell .sc-block--agenda .sc-block__flags { align-self: center; margin-inline-end: 10px !important; color: var(--kv-text-muted); }
  html body .kv-app-shell .sc-block--agenda.is-completed { opacity: .6; }
  html body .kv-app-shell .sc-block--agenda.is-completed .sc-block__title { text-decoration: line-through; }

  /* ---- undo: a toast above the tab bar, not a bar over the day ---------- */
  html body .kv-app-shell .sc-undo {
    position: fixed; z-index: 60; inset-inline: 12px; bottom: calc(76px + var(--kv-safe-b, 0px));
    display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0; padding: 6px 6px 6px 14px;
    border: 1px solid var(--kv-line-2); border-radius: 14px;
    background: var(--kv-card-raised); box-shadow: 0 8px 28px rgba(0,0,0,.18);
    font-size: 13px; color: var(--kv-text-2);
    transition: opacity .3s ease, transform .3s ease;
  }
  html[dir="rtl"] body .kv-app-shell .sc-undo { padding: 6px 14px 6px 6px; }
  html body .kv-app-shell .sc-undo > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body .kv-app-shell .sc-undo button { flex: none; min-height: 36px !important; height: 36px; padding: 0 12px !important; border-radius: 10px; }
  html body .kv-app-shell .sc-undo.sm-gone { opacity: 0; transform: translateY(12px); pointer-events: none; }

  /* ---- type: the UI face for times and day names (mono read as code) ---- */
  html body .kv-app-shell .sc-agenda__date b { font-family: inherit; text-transform: none; letter-spacing: 0; }
  html body .kv-app-shell .sc-block--agenda .sc-block__time,
  html body .kv-app-shell .sc-block--agenda .sc-block__duration { font-family: inherit; letter-spacing: 0; font-variant-numeric: tabular-nums; }
  html body .kv-app-shell .sc-block--agenda .sc-block__kind { font-size: 10.5px !important; letter-spacing: .06em; }
  html body .kv-app-shell .sc-week-strip span { font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0; }

  /* ---- plan card: settings is an icon, so the numbers get the width ---- */
  html body .kv-app-shell .sc-page .kvp-bar__actions .kv-btn { width: 34px; padding: 0 !important; justify-content: center; font-size: 0; gap: 0; }
  html body .kv-app-shell .sc-page .kvp-bar__actions .kv-btn svg { width: 16px; height: 16px; }
  html body .kv-app-shell .sc-page .kvp-bar__stats { gap: 2px 10px; }
  html body .kv-app-shell .sc-page .kvp-bar__exam {
    flex-basis: auto; display: inline-flex; align-items: center; margin-top: 4px; padding: 3px 9px; border-radius: 999px;
    background: color-mix(in srgb, var(--kv-warning, #e0a33c) 14%, transparent); font-size: 12px;
  }

  /* ---- a session's actions: a bottom sheet, clear of the tab bar -------- */
  html body .kv-app-shell .sc-pop {
    position: fixed !important; z-index: 600 !important; /* over the tab bar (header.os-top-nav, z 500) */
    inset: auto 0 0 0 !important; width: auto !important; max-height: 80svh; overflow-y: auto;
    padding: 18px 16px calc(16px + var(--kv-safe-b, 0px)) !important;
    border-radius: 22px 22px 0 0 !important; border-inline: 0 !important; border-block-end: 0 !important;
    box-shadow: 0 0 0 100vmax rgba(0,0,0,.42), 0 -8px 30px rgba(0,0,0,.2) !important;
    animation: sm-sheet-up .2s ease both;
  }
  @keyframes sm-sheet-up { from { transform: translateY(24px); opacity: .6; } }
  html body .kv-app-shell .sc-pop::before {
    content: ''; display: block; width: 38px; height: 4px; margin: -8px auto 10px; border-radius: 999px; background: var(--kv-line-3);
  }
  html body .kv-app-shell .sc-pop__title { font-size: 20px; margin-block: 10px 4px; }
  html body .kv-app-shell .sc-pop__when { font-family: inherit; letter-spacing: 0; font-variant-numeric: tabular-nums; }
  html body .kv-app-shell .sc-pop__actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; margin-top: 14px; }
  html body .kv-app-shell .sc-pop__actions button { justify-content: center; min-height: 44px !important; border-radius: 12px; font-size: 14px; }
  html body .kv-app-shell .sc-pop__actions .is-focus { grid-column: 1 / -1; }
  html body .kv-app-shell .sc-pop__edit input { font-size: 16px; min-height: 42px; }

  /* ---- Tasks drawer: over the tab bar too (it sat under it, z 260 < 500) - */
  html body .kv-app-shell .sc-body.has-inbox::before { z-index: 590 !important; }
  html body .kv-app-shell .sc-body.has-inbox .sc-inbox { z-index: 600 !important; padding-bottom: var(--kv-safe-b, 0px); }

  /* ---- month: a compact grid of days with a dot per session; tap a day - */
  html body .kv-app-shell .sc-month { border: 0; }
  html body .kv-app-shell .sc-month__weekdays span { font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; text-align: center; }
  html body .kv-app-shell .sc-month__grid { grid-auto-rows: 58px !important; height: auto !important; gap: 4px; border: 0; background: transparent; }
  html body .kv-app-shell .sc-month__cell {
    position: relative; min-height: 0 !important; height: 58px; padding: 6px 0 0 !important;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    border: 0 !important; border-radius: 12px; background: var(--kv-card) !important;
  }
  html body .kv-app-shell .sc-month__cell.is-outside { background: transparent !important; opacity: .45; }
  html body .kv-app-shell .sc-month__cell.is-today { box-shadow: inset 0 0 0 1.5px var(--kv-on-violet); }
  html body .kv-app-shell .sc-month__daynum {
    position: static; width: auto; height: auto; min-height: 0 !important; padding: 0 !important; border: 0; background: transparent;
    font-family: inherit; font-size: 14px; font-weight: 650; color: var(--kv-text); text-align: center; align-self: stretch;
  }
  html body .kv-app-shell .sc-month__daynum::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
  html body .kv-app-shell .sc-month__chips { display: flex !important; flex-direction: row !important; justify-content: center; gap: 3px; pointer-events: none; }
  html body .kv-app-shell .sc-month__chips .sc-block--chip {
    width: 6px; height: 6px; min-height: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50%;
    background: var(--sc-accent, var(--kv-on-violet)) !important; overflow: hidden;
  }
  html body .kv-app-shell .sc-month__chips .sc-block--chip > * { display: none !important; }
  html body .kv-app-shell .sc-month__more { min-height: 0 !important; padding: 0 !important; border: 0; background: transparent; font-size: 10px; line-height: 6px; color: var(--kv-text-muted); }
}

/* ---- Clear schedule (every width) -------------------------------------- */
html body .kv-app-shell .sc-overflow__menu .sm-clear-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border-block-start: 1px solid var(--kv-line); margin-block-start: 4px; padding-block-start: 10px;
  color: var(--kv-danger, #d9534f); background: transparent; font: inherit; text-align: start; cursor: pointer;
}
html body .kv-app-shell .sc-overflow__menu .sm-clear-item:hover { background: color-mix(in srgb, var(--kv-danger, #d9534f) 8%, transparent); }
.sm-clear {
  position: fixed; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px;
  background: rgba(0, 0, 0, .48); backdrop-filter: blur(3px); animation: sm-fade .16s ease both;
}
@keyframes sm-fade { from { opacity: 0; } }
.sm-clear__sheet {
  width: min(420px, 100%); display: grid; gap: 10px; padding: 22px 20px 18px;
  border: 1px solid var(--kv-line-2, rgba(128,128,128,.25)); border-radius: 22px;
  background: var(--kv-card-raised, var(--kv-card, #fff)); color: var(--kv-text, inherit);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
.sm-clear__mark {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px;
  background: color-mix(in srgb, var(--kv-danger, #d9534f) 14%, transparent); color: var(--kv-danger, #d9534f);
}
.sm-clear__mark svg { width: 20px; height: 20px; }
.sm-clear h2 { margin: 4px 0 0; font-size: 20px; line-height: 1.25; }
.sm-clear__what { margin: 0; color: var(--kv-text-2, inherit); font-size: 14px; line-height: 1.5; }
.sm-clear ul { margin: 2px 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 14px; }
.sm-clear li { position: relative; padding-inline-start: 22px; line-height: 1.45; }
.sm-clear li::before { position: absolute; inset-inline-start: 0; top: 0; font-weight: 700; }
.sm-clear li.sm-go::before { content: '×'; color: var(--kv-danger, #d9534f); }
.sm-clear li.sm-stay::before { content: '✓'; color: var(--kv-on-violet, #2bb3a3); }
.sm-clear__todos { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid var(--kv-line, rgba(128,128,128,.2)); border-radius: 12px; font-size: 14px; cursor: pointer; }
.sm-clear__todos input { width: 18px; height: 18px; accent-color: var(--kv-danger, #d9534f); }
.sm-clear__error { margin: 0; color: var(--kv-danger, #d9534f); font-size: 13px; }
.sm-clear__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.sm-clear__actions button { min-height: 46px; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 650; cursor: pointer; }
.sm-clear .sm-cancel { border: 1px solid var(--kv-line-2, rgba(128,128,128,.3)); background: transparent; color: var(--kv-text, inherit); }
.sm-clear .sm-confirm { border: 0; background: var(--kv-danger, #d9534f); color: #fff; }
.sm-clear .sm-confirm:disabled { opacity: .6; cursor: default; }
@media (max-width: 639px) {
  .sm-clear { place-items: end stretch; padding: 0; }
  .sm-clear__sheet { width: 100%; border-radius: 22px 22px 0 0; padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); animation: sm-sheet-up .2s ease both; }
}
.sm-toast {
  position: fixed; z-index: 1300; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%);
  padding: 11px 16px; border-radius: 14px; background: var(--kv-text, #111); color: var(--kv-canvas, #fff);
  font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.25); transition: opacity .3s ease, transform .3s ease;
}
.sm-toast.sm-gone { opacity: 0; transform: translate(-50%, 8px); }
@keyframes sm-sheet-up { from { transform: translateY(24px); opacity: .6; } }