/* Schedy Mini App — tokens, the solid content of the Now tab, and the glass of the floating layer.
   Content is solid; glass lives only on the floating control layer (shell.css styles the shell itself).
   Tiers (set on <html data-tier>): A = Chromium lens (SVG displacement), B = Telegram-like light glass
   with a conic specular rim, C = solid. data-tint="tinted" thickens the glass; data-scheme follows
   the Telegram theme. All colours come from Telegram themeParams (set by app/chrome.js). */

@property --light {
  syntax: '<angle>';
  inherits: true;
  initial-value: 135deg;
}

:root {
  --bg: #ffffff;
  --bg2: #efeff4;
  --section: #ffffff;
  --text: #000000;
  --hint: #8e8e93;
  --subtitle: #6d6d72;
  --link: #007aff;
  --accent: #007aff;
  --accent-text: #ffffff;
  --sep: #c8c7cc;
  --destructive: #ff3b30;
  --section-header: var(--hint);
  --tabbar-h: 62px;          /* the floating tab bar */
  --float-gap: 10px;
  --sat: 0px;               /* safe area + Telegram content safe area, set by app/chrome.js */
  --sab: 0px;
  --sal: 0px;
  --sar: 0px;
  --spring: cubic-bezier(.2, .9, .3, 1.15);
  --spring-dur: 500ms;
  --rim-opacity: .6;
  --glow: rgb(255 255 255 / .5);
  /* The same colours as "r g b" triplets (app/chrome.js keeps them in sync with themeParams), so every
     translucent fill is rgb(var(--x-rgb) / a), never color-mix, which iOS 15 / Chromium < 111 lack. */
  --bg-rgb: 255 255 255;
  --bg2-rgb: 239 239 244;
  --text-rgb: 0 0 0;
  --accent-rgb: 0 122 255;
  --thumb-dark: #3a3a3c;
  --font: -apple-system, BlinkMacSystemFont, system-ui, Inter, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  color-scheme: light;
}
:root[data-scheme="dark"] {
  --destructive: #ff453a;
  --bg: #000000;
  --bg2: #1c1c1d;
  --section: #1c1c1d;
  --text: #ffffff;
  --hint: #98989e;
  --subtitle: #98989e;
  --sep: #38383a;
  --bg-rgb: 0 0 0;
  --bg2-rgb: 28 28 29;
  --text-rgb: 255 255 255;
  --rim-opacity: .3;
  --glow: rgb(255 255 255 / .22);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.3 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }

/* ---------- solid content (the Now tab; the shell's screens are in shell.css) ---------- */

.hero { padding: 8px 4px 4px; }
.eyebrow {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 2px;
  font-size: 13px; font-weight: 600; letter-spacing: .01em;
  color: var(--hint);
  min-height: 18px;
}
.pill {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  color: var(--accent);
  background: rgb(var(--accent-rgb) / 0.14);
}
h1 { margin: 0; font-size: 34px; line-height: 1.12; font-weight: 700; letter-spacing: -.022em; }
.subtitle { margin: 2px 0 0; font-size: 15px; color: var(--subtitle); }
.status {
  margin: 12px 4px 0;
  font-size: 13px; color: var(--hint);
  display: flex; align-items: center; gap: 6px;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: var(--hint); }

.notice {
  margin-top: 16px;
  padding: 16px;
  border-radius: 18px;
  background: var(--bg2);
}
.notice h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; }
.notice p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--subtitle); }

.lessons { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.lessons:empty { margin: 0; }
.lesson {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--bg2);
  contain: paint;
  transition: opacity .3s ease;
}
.lesson .time { display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.lesson .time b { font-size: 16px; font-weight: 600; }
.lesson .time span { font-size: 13px; color: var(--hint); }
.lesson .body { min-width: 0; }
.lesson .subj { font-size: 17px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.lesson .meta { margin-top: 2px; font-size: 14px; color: var(--subtitle); }
.lesson .who { margin-top: 2px; font-size: 13px; color: var(--hint); }
.lesson .pair { font-size: 12px; font-weight: 600; color: var(--hint); padding-top: 2px; }
.lesson.past { opacity: .5; }
.lesson.current::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent);
}
.bar {
  margin-top: 10px; height: 4px; border-radius: 2px; overflow: hidden;
  background: rgb(var(--accent-rgb) / 0.18);
}
.bar i {
  display: block; height: 100%; border-radius: 2px; background: var(--accent);
  transform-origin: left center; transform: scaleX(var(--p, 0));
  transition: transform .6s ease;
}
.lesson.flash { animation: flash 1.1s ease; }
.lesson.skeleton { height: 78px; animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .55; } }
@keyframes flash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  25% { box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / 0.45); }
}

.extras { margin-top: 24px; display: grid; gap: 8px; }
.row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px 16px;
  border: 0; border-radius: 18px;
  background: var(--bg2);
  text-align: left; cursor: pointer;
}
.row-icon svg { width: 22px; height: 22px; display: block; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linejoin: round; }
.row-icon .fill { fill: var(--accent); stroke: none; }
.row-text { flex: 1; min-width: 0; }
.row-text b { display: block; font-size: 16px; font-weight: 500; }
.row-text small { display: block; font-size: 13px; color: var(--hint); }
.row-value { font-size: 15px; color: var(--hint); }

/* ---------- scroll edges (content softly dissolves under the floating controls) ---------- */

.edge { position: fixed; left: 0; right: 0; z-index: 5; pointer-events: none; }
.edge-top {
  top: 0; height: calc(var(--sat) + 76px);
  background: linear-gradient(to bottom, rgb(var(--bg-rgb) / 0.9),
              rgb(var(--bg-rgb) / 0.6) 55%, rgb(var(--bg-rgb) / 0));
}
.edge-bottom {
  bottom: 0; height: calc(var(--sab) + var(--tabbar-h) + 40px);
  background: linear-gradient(to top, rgb(var(--bg-rgb) / 0.92),
              rgb(var(--bg-rgb) / 0.7) 50%, rgb(var(--bg-rgb) / 0));
}
:root:is([data-tier="A"], [data-tier="B"]):not([data-perf="LOW"]) .edge {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
:root:is([data-tier="A"], [data-tier="B"]):not([data-perf="LOW"]) .edge-top {
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
:root:is([data-tier="A"], [data-tier="B"]):not([data-perf="LOW"]) .edge-bottom {
  -webkit-mask-image: linear-gradient(to top, #000 60%, transparent);
  mask-image: linear-gradient(to top, #000 60%, transparent);
}

/* ---------- the floating layer ---------- */

.overlay { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.overlay > * { pointer-events: auto; }
.floating[data-parked] { display: none !important; }   /* a floating control of a screen that isn't shown */
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.glass {
  position: absolute;
  border: 0;
  /* Tier B: the recipe of Telegram-iOS's own glass (LegacyGlassView). */
  background: rgb(var(--bg-rgb) / 0.25);
  -webkit-backdrop-filter: blur(3px) saturate(2) brightness(1.1);
  backdrop-filter: blur(3px) saturate(2) brightness(1.1);
  box-shadow: 0 8px 30px rgb(0 0 0 / .045), 0 2px 10px rgb(0 0 0 / .02), inset 0 0 0 .5px rgb(0 0 0 / .10);
  transition: scale var(--spring-dur) var(--spring);
  scale: var(--press, 1);
  touch-action: manipulation;
}
/* The switch owns its gesture: with pan allowed the browser would take a horizontal drag as a
   scroll and cancel it (pointercancel) after a few pixels on every touch screen. */
.glass.seg { touch-action: none; }
:root[data-scheme="dark"] .glass {
  box-shadow: 0 8px 30px rgb(0 0 0 / .25), 0 2px 10px rgb(0 0 0 / .2), inset 0 0 0 .5px rgb(255 255 255 / .08);
}
/* The 0.8px specular rim: a conic highlight whose angle (--light) follows the gyroscope. */
.glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: .8px;
  background: conic-gradient(from var(--light, 135deg), #fff 0 6%, #fff0 20% 45%, #fff 50% 56%, #fff0 70% 94%, #fff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: var(--rim-opacity);
  pointer-events: none;
  z-index: 2;
}
/* Touch lights the glass from under the finger. */
.glass::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(140px circle at var(--gx, 50%) var(--gy, 50%), var(--glow), transparent 70%);
  mix-blend-mode: plus-lighter;
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
  z-index: 2;
}
.glass.lit::after { opacity: 1; transition-duration: .08s; }
.glass.pressed { --press: .97; transition-duration: 180ms; }

:root[data-tint="tinted"] .glass { background: rgb(var(--bg-rgb) / 0.72); }

/* Tier A: the lens. A plain blur is declared first; glass.js then sets backdrop-filter: url(#lens-…)
   inline once the displacement map for the element's fixed size exists. */
:root[data-tier="A"] .glass {
  background: rgb(var(--bg-rgb) / 0.3);
  -webkit-backdrop-filter: blur(2px) saturate(1.8);
  backdrop-filter: blur(2px) saturate(1.8);
}
:root[data-tier="A"][data-tint="tinted"] .glass { background: rgb(var(--bg-rgb) / 0.6); }

/* Tier C: solid surfaces, a 1px separator border, no moving highlight. */
:root[data-tier="C"] .glass {
  background: rgb(var(--bg2-rgb) / 0.94);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: 0 0 0 1px var(--sep), 0 6px 20px rgb(0 0 0 / .08);
}
:root[data-tier="C"] .glass::before { display: none; }

/* Segmented control: Today / Tomorrow */
.seg {
  top: calc(var(--sat) + 10px);
  left: 50%;
  translate: -50% 0;
  width: 248px; height: 44px;
  border-radius: 22px;
  padding: 4px;
  display: grid; grid-template-columns: 1fr 1fr;
}
.seg-tab {
  position: relative; z-index: 0;
  border: 0; background: none; padding: 0;
  border-radius: 18px;
  font-size: 15px; font-weight: 600;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.seg-thumb {
  position: absolute; z-index: 1;
  top: 4px; left: 4px;
  width: 120px; height: 36px;           /* concentric: 22px outer radius − 4px inset */
  border-radius: 18px;
  overflow: hidden;
  pointer-events: none;
  /* Opaque, so the label under the drop never doubles with the lens copy riding inside it. */
  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"] .seg-thumb {
  background: var(--thumb-dark);       /* bg mixed 35/65 with #636366, computed in app/chrome.js */
  box-shadow: 0 2px 8px rgb(0 0 0 / .3), inset 0 0 0 .5px rgb(255 255 255 / .1);
}
:root[data-tier="C"] .seg-thumb { background: var(--bg); box-shadow: 0 0 0 1px var(--sep); }
/* The "false lens": a magnified copy of the labels, clipped by the drop, riding with it. */
.seg-lens {
  position: absolute; top: 0; left: 0;
  width: 240px; height: 36px;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; text-align: center;
  font-size: 15px; font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
  will-change: transform;
}
.seg-lens span { overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }

/* The "Next" capsule */
.capsule {
  left: 50%;
  bottom: calc(var(--sab) + 12px + var(--tabbar-h) + var(--float-gap));
  translate: -50% 0;
  width: min(calc(100vw - 32px - var(--sal) - var(--sar)), 480px);
  height: 84px;
  border-radius: 42px;
  padding: 12px 28px 0;
  display: flex; flex-direction: column; align-items: stretch;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.cap-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; line-height: 18px; }
.cap-label { color: var(--accent); white-space: nowrap; }
.cap-when { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-subject { font-size: 18px; font-weight: 650; line-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-meta { font-size: 14px; line-height: 18px; color: var(--subtitle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cap-progress {
  position: absolute; left: 28px; right: 28px; bottom: 7px;
  height: 3px; border-radius: 2px; overflow: hidden;
  background: rgb(var(--text-rgb) / 0.12);
}
.cap-progress i {
  display: block; height: 100%; background: var(--accent);
  transform-origin: left center; transform: scaleX(var(--p, 0));
  transition: transform .6s ease;
}

/* Materialisation: controls grow into place on a spring instead of a plain fade. */
.materialize { animation: materialize var(--spring-dur) var(--spring) both; }
@keyframes materialize {
  from { opacity: 0; scale: .9; }
  to { opacity: 1; scale: 1; }
}

.view-swap { animation: swap .32s ease both; }
@keyframes swap {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (prefers-contrast: more) {
  .glass { box-shadow: 0 0 0 1px var(--text) !important; }
  .lesson, .notice, .row { box-shadow: inset 0 0 0 1px var(--sep); }
  .lesson .meta, .lesson .who, .subtitle, .cap-meta { color: var(--text); }
}