/* Schedy shell: screens, the floating tab bar and the design-system components (app/ui.js).
   Content is solid (bg / bg2 from the Telegram theme). Glass appears only on .floating controls in
   #overlay (tab bar, back button, the Now switch and capsule) and follows the tiers in app.css.
   No CSS colour mixing functions: translucent fills use rgb(var(--x-rgb) / a) so iOS 15 / Chromium < 111 stay opaque. */

/* ---------- screens ---------- */

.screens { max-width: 560px; margin: 0 auto; }
.screen {
  padding: calc(var(--sat) + 12px) calc(16px + var(--sar)) calc(var(--sab) + var(--tabbar-h) + 40px) calc(16px + var(--sal));
  min-height: 100vh;
}
/* The Now tab has a floating switch on top and the "Next" capsule above the tab bar. */
.screen[data-screen="now"] {
  padding-top: calc(var(--sat) + 72px);
  padding-bottom: calc(var(--sab) + 12px + var(--tabbar-h) + var(--float-gap) + 84px + 28px);
}
/* Outside Telegram (debug / dev / browser) our own back button floats top-left. */
:root:is([data-mode="debug"], [data-mode="dev"], [data-mode="browser"]) .screen:not([data-screen="now"]) {
  padding-top: calc(var(--sat) + 60px);
}
.screen-head { padding: 8px 4px 4px; }
.large-title { margin: 0; font-size: 34px; line-height: 1.12; font-weight: 700; letter-spacing: -.022em; overflow-wrap: anywhere; }
.screen-sub { margin: 2px 0 0; font-size: 15px; color: var(--subtitle); }
.screen-body { margin-top: 8px; }
.screen-actions { display: grid; gap: 10px; margin-top: 24px; }
.sections { display: grid; gap: 0; }
.feature-section + .feature-section { margin-top: 4px; }
.now-sections:empty { display: none; }
.now-sections { margin-top: 8px; }
.noscript { padding: 24px; text-align: center; color: var(--hint); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- grouped lists (section / header / row) ---------- */

.group { margin-top: 22px; }
.group-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 0 4px 7px;
}
.group-title h2 { margin: 0; font-size: 15px; font-weight: 600; color: var(--section-header); }
.feature-section > .group-title { margin-top: 22px; }
.group-body { background: var(--bg2); border-radius: 14px; overflow: hidden; contain: paint; }
.group-pad { padding: 10px; }
.group-footer { margin: 7px 4px 0; font-size: 13px; line-height: 1.35; color: var(--hint); }
.link-btn { border: 0; background: none; padding: 0; color: var(--link); font-size: 15px; cursor: pointer; }

.row-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 48px; padding: 10px 16px;
  border: 0; background: none; color: var(--text); text-align: left;
  font: inherit;
}
.row-item.tappable { cursor: pointer; }
.row-item.tappable:active { background: rgb(var(--text-rgb) / 0.06); }
.row-item + .row-item::before {
  content: ""; position: absolute; top: 0; right: 0; left: 16px;
  border-top: .5px solid var(--sep);
}
.row-item:has(.row-ico) + .row-item::before { left: 56px; }
.row-ico {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  background: rgb(var(--accent-rgb) / 0.14); color: var(--tint, var(--accent));
}
.row-ico .ico { width: 19px; height: 19px; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.row-title { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.row-sub { font-size: 13px; line-height: 1.3; color: var(--hint); margin-top: 1px; }
.row-value { flex: none; font-size: 15px; color: var(--hint); max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-chev { flex: none; color: var(--hint); display: grid; }
.row-chev .ico { width: 16px; height: 16px; stroke-width: 2.2; }
.row-item.destructive .row-title { color: var(--destructive); }
.row-item.destructive .row-ico { background: rgb(255 59 48 / 0.12); color: var(--destructive); }
.has-more { padding-right: 52px; }
.more-btn {
  position: absolute; right: 8px; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 18px;
  color: var(--hint); cursor: pointer;
}
.more-btn:active { background: rgb(var(--text-rgb) / 0.08); }
.more-btn .ico { width: 20px; height: 20px; }

/* ---------- icons ---------- */

.ico { width: 24px; height: 24px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8;
       stroke-linecap: round; stroke-linejoin: round; }
.ico .fill { fill: currentColor; stroke: none; }

/* ---------- cards, badges, progress ---------- */

.card { background: var(--bg2); border-radius: 18px; padding: 16px; margin-top: 10px; contain: paint; }
.card.accent { box-shadow: inset 0 0 0 1.5px rgb(var(--accent-rgb) / 0.5); }
.card.tappable { cursor: pointer; transition: scale .2s ease; }
.card.tappable:active { scale: .985; }
.card-title { font-size: 17px; font-weight: 600; line-height: 1.25; }
.card-sub { font-size: 14px; color: var(--subtitle); margin-top: 2px; }
.badge {
  display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--accent); background: rgb(var(--accent-rgb) / 0.14);
}
.badge.warn { color: #b25000; background: rgb(255 149 0 / 0.16); }
.badge.danger { color: var(--destructive); background: rgb(255 59 48 / 0.12); }
.progress { height: 6px; border-radius: 3px; overflow: hidden; background: rgb(var(--accent-rgb) / 0.16); }
.progress i { display: block; height: 100%; border-radius: 3px; background: var(--accent);
              transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform .5s ease; }

/* ---------- buttons, chips ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px;
  font-size: 16px; font-weight: 600; cursor: pointer;
  transition: scale .18s ease, opacity .2s ease;
}
.btn:active { scale: .97; }
.btn:disabled { opacity: .45; cursor: default; scale: 1; }
.btn .ico { width: 20px; height: 20px; }
.btn-large { min-height: 50px; width: 100%; font-size: 17px; }
.btn-small { min-height: 34px; padding: 0 14px; font-size: 15px; }
.btn-primary { background: var(--accent); color: var(--accent-text); }
.btn-secondary { background: rgb(var(--accent-rgb) / 0.12); color: var(--accent); }
.btn-plain { background: none; color: var(--accent); }
.btn-destructive { background: rgb(255 59 48 / 0.12); color: var(--destructive); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px;
  background: rgb(var(--text-rgb) / 0.07); color: var(--text);
  font-size: 15px; font-weight: 500; cursor: pointer;
}
.chip .ico { width: 18px; height: 18px; }
.chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }

/* ---------- segmented control (solid, for content) ---------- */

.segmented {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: 2px; border-radius: 999px; background: rgb(var(--text-rgb) / 0.07);
}
.segmented::before {
  content: ""; position: absolute; top: 2px; bottom: 2px; left: 2px;
  width: calc((100% - 4px) / var(--n, 2)); border-radius: 999px;
  background: var(--bg); box-shadow: 0 1px 4px rgb(0 0 0 / .12);
  transform: translateX(calc(var(--i, 0) * 100%));
  transition: transform var(--spring-dur) var(--spring);
}
:root[data-scheme="dark"] .segmented::before { background: var(--thumb-dark); }
.seg-item {
  position: relative; z-index: 1; min-height: 32px; padding: 0 10px; border: 0; background: none;
  color: var(--text); font-size: 14px; font-weight: 600; cursor: pointer; border-radius: 999px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- stepper, date & pair pickers, hold to confirm ---------- */

.stepper { display: inline-flex; align-items: center; gap: 6px; }
.stepper-btn {
  display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 19px;
  background: rgb(var(--text-rgb) / 0.07); color: var(--accent); cursor: pointer;
}
.stepper-btn:disabled { color: var(--hint); opacity: .5; cursor: default; }
.stepper-btn .ico { width: 20px; height: 20px; stroke-width: 2.2; }
.stepper-value { min-width: 3.2em; text-align: center; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stepper-value.as-button { border: 0; background: none; color: var(--text); cursor: pointer; padding: 6px 8px; border-radius: 10px; }
.date-picker .stepper-value { min-width: 10em; }
.pair-picker .chip { min-width: 44px; justify-content: center; font-variant-numeric: tabular-nums; }

.btn.hold { position: relative; overflow: hidden; flex-direction: column; gap: 0; min-height: 54px; width: 100%;
            -webkit-user-select: none; user-select: none; touch-action: none; }
.hold-fill { position: absolute; inset: 0; background: rgb(255 255 255 / 0.3); transform-origin: left center;
             transform: scaleX(0); pointer-events: none; }
.btn-destructive .hold-fill { background: rgb(255 59 48 / 0.22); }
.hold-text { position: relative; }
.hold-hint { position: relative; font-size: 12px; font-weight: 500; opacity: .75; }
.btn.hold.holding { scale: .985; }
.btn.hold.confirmed { scale: 1; }

/* ---------- empty / error states, skeletons ---------- */

.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
         padding: 40px 20px; color: var(--text); }
.empty.compact { padding: 18px 12px; background: var(--bg2); border-radius: 14px; }
.empty-ico { color: var(--hint); }
.empty-ico .ico { width: 44px; height: 44px; stroke-width: 1.5; }
.empty.compact .empty-ico .ico { width: 28px; height: 28px; }
.empty h3 { margin: 4px 0 0; font-size: 17px; font-weight: 600; }
.empty p { margin: 0; max-width: 34ch; font-size: 15px; line-height: 1.4; color: var(--subtitle); }
.empty .btn { margin-top: 8px; }
.skeleton-list { display: grid; gap: 8px; margin-top: 8px; }
.skeleton { border-radius: 16px; background: var(--bg2); animation: breathe 1.6s ease-in-out infinite; }

/* ---------- sheets and toasts (solid, above the floating layer) ---------- */

.layer { position: relative; z-index: 20; }
.sheet-wrap { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; justify-content: flex-end; }
.sheet-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.32); opacity: 0; transition: opacity .25s ease; }
.sheet {
  position: relative; max-height: 88vh; overflow: auto; overscroll-behavior: contain;
  margin: 0 auto; width: 100%; max-width: 560px;
  padding: 6px calc(16px + var(--sar)) calc(var(--sab) + 18px) calc(16px + var(--sal));
  border-radius: 22px 22px 0 0; background: var(--bg);
  box-shadow: 0 -8px 30px rgb(0 0 0 / 0.12);
  transform: translateY(100%); transition: transform .32s var(--spring);
}
.sheet-wrap.open .sheet-backdrop { opacity: 1; }
.sheet-wrap.open .sheet { transform: translateY(0); }
.sheet-grab { width: 36px; height: 5px; border-radius: 3px; margin: 4px auto 10px; background: rgb(var(--text-rgb) / 0.18); touch-action: none; }
.sheet-title { margin: 0 4px 8px; font-size: 20px; font-weight: 700; touch-action: none; }
.sheet-body .group:first-child { margin-top: 6px; }
.sheet-actions { display: grid; gap: 8px; margin-top: 16px; }
.sheet-actions .btn { width: 100%; min-height: 50px; }

.toasts {
  position: fixed; left: 0; right: 0; z-index: 30; pointer-events: none;
  bottom: calc(var(--sab) + 12px + var(--tabbar-h) + var(--float-gap));
  display: flex; justify-content: center; padding: 0 16px;
}
.toast {
  display: inline-flex; align-items: center; gap: 8px; max-width: 480px;
  padding: 11px 16px; border-radius: 999px;
  background: rgb(var(--text-rgb) / 0.9); color: var(--bg);
  font-size: 15px; font-weight: 500; line-height: 1.3;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.18);
  opacity: 0; translate: 0 8px; transition: opacity .25s ease, translate .25s ease;
}
.toast.show { opacity: 1; translate: 0 0; }
.toast .ico { width: 20px; height: 20px; flex: none; }
.toast.error .ico { color: #ff6961; }

/* ---------- the floating layer: tab bar, back button, status ---------- */

.tabbar {
  left: 50%; translate: -50% 0;
  bottom: calc(var(--sab) + 12px);
  width: min(calc(100vw - 32px - var(--sal) - var(--sar)), 420px);
  height: var(--tabbar-h);
  border-radius: calc(var(--tabbar-h) / 2);
  padding: 4px;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  touch-action: none;                 /* the bar owns its drag (see app.css .glass.seg) */
}
.tab {
  position: relative; z-index: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border: 0; background: none; padding: 0; border-radius: calc((var(--tabbar-h) - 8px) / 2);
  color: var(--text); cursor: pointer; min-width: 0;
}
.tab .ico, .tab-lens-item .ico { width: 25px; height: 25px; }
.tab-label { font-size: 10.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tab-thumb {
  position: absolute; z-index: 1; top: 4px; left: 4px;
  height: calc(var(--tabbar-h) - 8px);          /* concentric: outer radius − 4px inset */
  border-radius: calc((var(--tabbar-h) - 8px) / 2);
  overflow: hidden; pointer-events: none;
  background: var(--bg);
  box-shadow: 0 2px 8px rgb(0 0 0 / .08), inset 0 0 0 .5px rgb(0 0 0 / .06);
  will-change: transform;
}
:root[data-scheme="dark"] .tab-thumb { background: var(--thumb-dark); box-shadow: 0 2px 8px rgb(0 0 0 / .3), inset 0 0 0 .5px rgb(255 255 255 / .1); }
:root[data-tier="C"] .tab-thumb { background: var(--bg); box-shadow: 0 0 0 1px var(--sep); }
.tab-lens {
  position: absolute; top: 0; left: 0; height: 100%;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  color: var(--accent); will-change: transform;
}
.tab-lens-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; }
.tabbar.pressed { --press: .985; }

.back-fab {
  top: calc(var(--sat) + 10px); left: calc(var(--sal) + 12px);
  width: 44px; height: 44px; border-radius: 22px;
  display: grid; place-items: center; color: var(--accent); cursor: pointer;
}
.back-fab .ico { width: 24px; height: 24px; stroke-width: 2.2; }

.status-pill {
  position: absolute; top: calc(var(--sat) + 12px); left: 50%; translate: -50% 0;
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px;
  background: var(--bg2); color: var(--hint); font-size: 13px; font-weight: 600;
  box-shadow: 0 0 0 .5px var(--sep);
}
.status-pill .ico { width: 16px; height: 16px; }

/* On Now, the content also dissolves under the "Next" capsule above the tab bar. */
:root[data-tab="now"] .edge-bottom { height: calc(var(--sab) + 12px + var(--tabbar-h) + var(--float-gap) + 84px + 24px); }

/* ---------- screen transitions ---------- */

/* Only the screens are captured. The root is not, so the floating glass layer keeps rendering live during a
   transition (WebKit drops backdrop-filter from snapshots: a captured root made the tab bar blink), and taps
   reach it at once. main.js uses View Transitions only for push/pop on Chromium. */
:root { view-transition-name: none; }
::view-transition { pointer-events: none; }
.screens { view-transition-name: screens; }
::view-transition-group(screens) { animation-duration: .34s; }
:root[data-nav="push"]::view-transition-old(screens) { animation: .34s cubic-bezier(.2, .8, .2, 1) both vt-out-left; }
:root[data-nav="push"]::view-transition-new(screens) { animation: .34s cubic-bezier(.2, .8, .2, 1) both vt-in-right; }
:root[data-nav="pop"]::view-transition-old(screens) { animation: .3s cubic-bezier(.2, .8, .2, 1) both vt-out-right; }
:root[data-nav="pop"]::view-transition-new(screens) { animation: .3s cubic-bezier(.2, .8, .2, 1) both vt-in-left; }
:root[data-nav="tab"]::view-transition-old(screens) { animation: .18s ease both vt-fade-out; }
:root[data-nav="tab"]::view-transition-new(screens) { animation: .22s ease both vt-fade-in; }
@keyframes vt-in-right { from { transform: translateX(28%); opacity: 0; } }
@keyframes vt-out-left { to { transform: translateX(-12%); opacity: 0; } }
@keyframes vt-in-left { from { transform: translateX(-12%); opacity: 0; } }
@keyframes vt-out-right { to { transform: translateX(28%); opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes vt-fade-out { to { opacity: 0; } }
/* Without View Transitions: the incoming screen slides in over (push) or under (pop) a frozen copy of the
   old one, which slides away. A tab switch only settles the new content in: no blank frame, no slide. */
.screen.enter-push { position: relative; z-index: 1; animation: vt-in-right .32s cubic-bezier(.2, .8, .2, 1) both; }
.screen.enter-pop { animation: vt-in-left .28s cubic-bezier(.2, .8, .2, 1) both; }
.screen.enter-tab { animation: tab-in .16s ease-out both; }
.screen-ghost { position: fixed; z-index: 0; margin: 0; background: var(--bg); pointer-events: none; }
.screen-ghost.leave-push { animation: vt-out-left .32s cubic-bezier(.2, .8, .2, 1) both; }
.screen-ghost.leave-pop { z-index: 2; animation: vt-out-right .28s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tab-in { from { opacity: .4; transform: translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media (prefers-contrast: more) {
  .group-body, .card, .empty.compact, .chip, .segmented { box-shadow: inset 0 0 0 1px var(--sep); }
  .row-sub, .group-footer, .screen-sub, .empty p { color: var(--text); }
  .tab-label { font-weight: 700; }
}

/* ---------- app screens: Week grid, Me header, Settings receipt, onboarding (app/screens/*.js) ---------- */

/* Subject tints (stable per subject, model.js subjectTint). Text stays var(--text): the tint is a fill and
   an edge, never the only carrier of meaning (the legend and the sheet name every subject). */
.tint-0 { --tint-rgb: 10 132 255; }   /* blue */
.tint-1 { --tint-rgb: 255 149 0; }    /* orange */
.tint-2 { --tint-rgb: 52 199 89; }    /* green */
.tint-3 { --tint-rgb: 255 45 85; }    /* pink */
.tint-4 { --tint-rgb: 175 82 222; }   /* purple */
.tint-5 { --tint-rgb: 48 176 199; }   /* teal */
.tint-6 { --tint-rgb: 162 132 94; }   /* brown */
.tint-7 { --tint-rgb: 88 86 214; }    /* indigo */

.wk-bar { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.wk-nav {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 20px;
  background: rgb(var(--text-rgb) / 0.07); color: var(--accent); cursor: pointer;
}
.wk-nav:disabled { color: var(--hint); opacity: .45; cursor: default; }
.wk-nav .ico { width: 22px; height: 22px; stroke-width: 2.2; }
.wk-label { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.wk-title { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wk-sub { font-size: 13px; color: var(--hint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.wk-today-row { display: flex; justify-content: center; margin-top: 8px; }
.wk-notice:not(:empty) { margin-top: 12px; }

.wk-grid-host { margin-top: 12px; touch-action: pan-y; transition: opacity .2s ease; }
.wk-grid-host.loading { opacity: .5; }
.wk-in-next { animation: wk-in-next .26s cubic-bezier(.2, .9, .3, 1) both; }
.wk-in-prev { animation: wk-in-prev .26s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes wk-in-next { from { transform: translateX(28px); opacity: 0; } }
@keyframes wk-in-prev { from { transform: translateX(-28px); opacity: 0; } }

.wk-grid {
  display: grid; gap: 3px; padding: 6px; border-radius: 16px; background: var(--bg2); contain: layout paint;
  grid-template-columns: 30px repeat(var(--cols, 6), minmax(0, 1fr));
  grid-template-rows: auto repeat(var(--rows, 4), minmax(58px, auto));
}
.wk-day { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 2px 0 5px; min-width: 0; }
.wk-wd { font-size: 11px; font-weight: 600; color: var(--hint); text-transform: uppercase; letter-spacing: .02em; }
.wk-dn {
  display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 4px; border-radius: 12px;
  font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.wk-day.today .wk-wd { color: var(--accent); }
.wk-day.today .wk-dn { background: var(--accent); color: var(--accent-text); }
.wk-day.off .wk-dn { color: var(--hint); }
.wk-tag {
  max-width: 100%; padding: 0 4px; border-radius: 5px; font-size: 9.5px; font-weight: 700; line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgb(var(--text-rgb) / 0.08); color: var(--subtitle);
}
.wk-day.moved .wk-tag { background: rgb(var(--accent-rgb) / 0.14); color: var(--accent); }
.wk-pair { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; }
.wk-pair b { font-size: 12px; font-weight: 700; }
.wk-pair span { font-size: 9.5px; color: var(--hint); font-variant-numeric: tabular-nums; }
.wk-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; border-radius: 10px; background: rgb(var(--bg-rgb) / 0.6); }
.wk-cell.today { background: rgb(var(--accent-rgb) / 0.08); }
.wk-lesson {
  flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; min-height: 0;
  padding: 4px 3px 4px 5px; border: 0; border-left: 3px solid rgb(var(--tint-rgb)); border-radius: 9px;
  background: rgb(var(--tint-rgb) / 0.16); color: var(--text); text-align: left; cursor: pointer;
  font: inherit; transition: scale .16s ease;
}
.wk-lesson:active { scale: .96; }
.wk-lesson.past { opacity: .5; }
.wk-lesson.now { box-shadow: inset 0 0 0 2px var(--accent); }
.wk-abbr { font-size: 12px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.wk-full { display: none; font-size: 12px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.wk-room { font-size: 10px; color: var(--subtitle); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-cell.split .wk-room { display: none; }
@media (max-width: 359px) {
  .wk-room { display: none; }                         /* a cut "3/2…" would mislead: the sheet has the room */
  .wk-lesson { padding: 4px 2px 4px 4px; border-left-width: 2px; }
  .wk-abbr { font-size: 11px; letter-spacing: -.01em; }
}
@media (min-width: 480px) {
  .wk-abbr { display: none; }
  .wk-full { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .wk-grid { grid-template-columns: 36px repeat(var(--cols, 6), minmax(0, 1fr)); }
}
.wk-holiday {
  display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 10px;
  background: repeating-linear-gradient(-45deg, rgb(var(--text-rgb) / 0.06) 0 6px, transparent 6px 12px);
}
.wk-holiday span {
  writing-mode: vertical-rl; transform: rotate(180deg); max-height: 100%;
  font-size: 11px; font-weight: 600; color: var(--subtitle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wk-uncovered {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: 26px 18px; border-radius: 18px;
  background: repeating-linear-gradient(-45deg, rgb(var(--text-rgb) / 0.035) 0 8px, transparent 8px 16px), var(--bg2);
}
.wk-uncovered .empty-ico .ico { width: 40px; height: 40px; stroke-width: 1.5; }
.wk-uncovered h3 { margin: 2px 0 0; font-size: 17px; font-weight: 600; }
.wk-uncovered p { margin: 0; max-width: 36ch; font-size: 15px; line-height: 1.4; color: var(--subtitle); }
.wk-uncovered p.wk-why { font-size: 13px; color: var(--hint); }
.wk-uncovered-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
.wk-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 12px; padding: 0 4px; }
.wk-key { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 13px; }
.wk-key b {
  flex: none; padding: 1px 6px; border-radius: 6px; border-left: 3px solid rgb(var(--tint-rgb));
  background: rgb(var(--tint-rgb) / 0.16); font-size: 11px; font-weight: 700;
}
.wk-key span { color: var(--subtitle); overflow-wrap: anywhere; }
@media (min-width: 480px) { .wk-legend { display: none; } }
.wk-footer:empty { display: none; }
.wk-footer { margin: 12px 4px 0; font-size: 12.5px; line-height: 1.35; color: var(--hint); }

.me-head { margin-top: 12px; }
.me-head-row { display: flex; align-items: center; gap: 12px; }
.me-badge {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 23px;
  background: rgb(var(--accent-rgb) / 0.14); color: var(--accent);
}
.me-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.me-group { font-size: 20px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.me-file { font-size: 13px; line-height: 1.3; color: var(--hint); overflow-wrap: anywhere; }
.row-check { flex: none; display: grid; color: var(--accent); }
.row-check .ico { width: 20px; height: 20px; stroke-width: 2.4; }

.join-lead { margin: 4px 4px 0; font-size: 15px; line-height: 1.4; color: var(--subtitle); }
.join .empty.compact { margin-top: 12px; }
.join-search-wrap {
  display: flex; align-items: center; gap: 8px; margin-top: 14px; padding: 0 12px; height: 44px;
  border-radius: 12px; background: var(--bg2); color: var(--hint);
}
.join-search-wrap .ico { width: 20px; height: 20px; flex: none; }
.join-search {
  flex: 1; min-width: 0; height: 100%; border: 0; background: none; outline: none;
  color: var(--text); font: inherit; font-size: 16px; -webkit-user-select: text; user-select: text;
}
.join-search::placeholder { color: var(--hint); }
.join-confirm { text-align: center; padding: 22px 16px 14px; }
.join-ask { margin: 0; font-size: 15px; color: var(--subtitle); }
.join-big { margin-top: 4px; font-size: 34px; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.join-meta { margin-top: 2px; font-size: 13px; color: var(--hint); overflow-wrap: anywhere; }
.join-members { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--accent); }
.join-members .ico { width: 18px; height: 18px; }
.join-other { margin-top: 8px; }
.sheet-text { margin: 0 4px; font-size: 15px; line-height: 1.45; color: var(--subtitle); }

@media (prefers-reduced-motion: reduce) {
  .wk-in-next, .wk-in-prev { animation: none; }
  .wk-grid-host, .wk-lesson { transition: none; }
}
@media (prefers-contrast: more) {
  .wk-lesson, .wk-key b { box-shadow: inset 0 0 0 1px rgb(var(--tint-rgb)); }
  .wk-room, .wk-pair span, .wk-wd, .wk-footer, .me-file, .join-lead, .join-meta { color: var(--text); }
}