/* -------------------------------------------------------------------------
   Ballroom in daylight.

   A bright, warm room: ivory parquet light, champagne and blush glows like
   tall windows on a studio morning, and layered glass cards floating above
   it. The display face is Prata, a didone drawn for Cyrillic, used for the
   title, times, and money. Body text is the system face (SF Pro on his
   iPhone), which carries full Cyrillic and stays crisp at small sizes.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Prata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/prata-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Prata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/prata-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2212;
}

:root {
  --ink: #2c2115;
  --dim: #8a7a63;
  --faint: #b3a68d;
  --gold: #9c7a2e;
  --gold-deep: #7c5f1e;
  --good: #2f6b4f;
  --wine: #93384a;
  --paper: #f4eee1;

  --display: 'Prata', 'Didot', 'Bodoni 72', Georgia, 'Times New Roman', serif;
  --body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;

  --glass: linear-gradient(165deg, rgba(255, 255, 253, 0.78), rgba(255, 252, 244, 0.46));
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(140, 105, 45, 0.05),
    0 14px 34px -14px rgba(101, 69, 22, 0.28),
    0 2px 8px rgba(101, 69, 22, 0.07);

  --tap: 48px;
  --radius: 22px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--paper);
  color: var(--ink);
  font: 16px/1.45 var(--body);
  letter-spacing: 0.005em;
  padding-bottom: 128px;
  max-width: 100vw;
  overflow-x: hidden;
}

/* The room: layered warm glows, fixed so the glass has something to blur. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(52% 38% at 12% -4%, rgba(238, 205, 134, 0.75), transparent 70%),
    radial-gradient(46% 34% at 96% 12%, rgba(235, 187, 179, 0.6), transparent 70%),
    radial-gradient(60% 42% at 50% 108%, rgba(196, 210, 182, 0.55), transparent 72%),
    radial-gradient(38% 30% at 78% 68%, rgba(245, 226, 187, 0.5), transparent 70%),
    linear-gradient(180deg, #f8f3e7, #f2ebdb);
}

/* A whisper of grain so the light does not band. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

.hidden { display: none !important; }

/* ---- Header --------------------------------------------------------------- */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 22px 18px 10px;
}

h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.15;
  margin: 0;
  letter-spacing: 0.01em;
  min-width: 0;
  overflow-wrap: anywhere;
}

.head-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Language toggle: set once, tappable forever. */
.lang {
  display: flex;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 253, 0.55);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 8px rgba(101, 69, 22, 0.08);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}

.lang button {
  min-width: 48px;
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--dim);
  font: 600 13px/1 var(--body);
  letter-spacing: 0.06em;
}

.lang button.active {
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.95), rgba(250, 240, 216, 0.85));
  color: var(--gold-deep);
  box-shadow: 0 2px 6px rgba(101, 69, 22, 0.18), inset 0 1px 0 #fff;
}

.sync {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gold-deep);
  background: rgba(238, 205, 134, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  padding: 6px 10px;
  white-space: nowrap;
}

.sync.failed {
  color: #fff;
  background: linear-gradient(170deg, #b84a4a, #9c3a44);
}

.error { color: var(--wine); font-size: 14px; margin: 4px 0 10px; }

main { padding: 6px 14px 0; }

/* ---- Glass cards ---------------------------------------------------------- */

.card {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(1.55);
  -webkit-backdrop-filter: blur(20px) saturate(1.55);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow);
  padding: 16px;
  margin-bottom: 12px;
  overflow: hidden;
}

/* Entrance: cards rise like a first step onto the floor. Only replayed when
   a screen (or the language) actually changes; a tap mid-screen re-renders
   without the whole page dancing again. */
.animate-in .card,
.animate-in .add-btn,
.animate-in .empty-stage {
  animation: rise 0.55s cubic-bezier(0.22, 0.9, 0.28, 1.04) backwards;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* ---- Today ---------------------------------------------------------------- */

.lesson-top {
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.lesson-time {
  font-family: var(--display);
  font-size: 25px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.lesson-who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  min-width: 0;
}

.lesson-name {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 10px 12px 0;
  margin: -12px 0;
  background: none;
  border: 0;
  text-align: left;
  color: inherit;
  font-family: inherit;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  min-width: 0;
}

.lesson.resolved { background: linear-gradient(165deg, rgba(255, 255, 253, 0.5), rgba(252, 248, 238, 0.3)); }
.lesson.resolved .lesson-name,
.lesson.resolved .lesson-time { color: var(--faint); }
.lesson.resolved .pill { opacity: 0.6; }

/* A light sweep crosses the card the moment it resolves: the waltz turn. */
.lesson.resolved::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.85) 50%, transparent 70%);
  transform: translateX(-110%);
  animation: sweep 0.9s cubic-bezier(0.3, 0.6, 0.2, 1) 0.05s 1;
}

@keyframes sweep {
  to { transform: translateX(110%); }
}

/* ---- Status pills --------------------------------------------------------- */

.pill {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.pill.ok { color: var(--good); background: rgba(88, 143, 111, 0.16); }
.pill.warn { color: var(--wine); background: rgba(173, 82, 100, 0.16); }
.pill.mute { color: var(--dim); background: rgba(160, 145, 115, 0.14); }

/* ---- Outcome buttons ------------------------------------------------------ */

.actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.act {
  flex: 1;
  min-width: 0;
  min-height: 58px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.9), rgba(255, 252, 244, 0.6));
  box-shadow: inset 0 1px 0 #fff, 0 3px 10px -4px rgba(101, 69, 22, 0.25);
  color: var(--dim);
  font: 600 12.5px/1.1 var(--body);
  padding: 6px 4px;
  transition: transform 0.12s ease;
}

.act:active { transform: scale(0.96); }

.act .ic { width: 17px; height: 17px; }
.act span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

.act-done {
  background: linear-gradient(170deg, #4d8a68, #2f6b4f);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fdfdf7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 8px 18px -8px rgba(47, 107, 79, 0.7);
}

.act-miss { color: var(--wine); }
.act-cxl { color: var(--dim); }

/* ---- Resolved state ------------------------------------------------------- */

.handled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  animation: settle 0.45s cubic-bezier(0.2, 1.1, 0.3, 1.05) backwards;
}

@keyframes settle {
  from { opacity: 0; transform: translateY(6px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

.handled-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 650;
  font-size: 15px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.handled-label .ic { width: 18px; height: 18px; flex-shrink: 0; }

.handled.is-done .handled-label { color: var(--good); }
.handled.is-no_show .handled-label { color: var(--wine); }
.handled.is-cancelled .handled-label { color: var(--dim); }

.undo {
  min-height: var(--tap);
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 253, 0.6);
  box-shadow: inset 0 1px 0 #fff;
  color: var(--dim);
  font: 600 13.5px/1 var(--body);
  flex-shrink: 0;
}

/* ---- Students ------------------------------------------------------------- */

.person { cursor: pointer; }

.person-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 10px;
}

.person-name {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
  min-width: 0;
  overflow-wrap: anywhere;
}

.person.inactive .person-name { color: var(--dim); }

.reasons { color: var(--wine); font-size: 13px; margin-top: 5px; }

.archive-toggle { display: block; }

/* ---- Detail --------------------------------------------------------------- */

.back-btn,
.edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.back-btn .ic { width: 16px; height: 16px; }

.detail-hero { padding: 20px 18px; }

.detail-name {
  font-family: var(--display);
  font-weight: 400;
  font-size: 27px;
  margin: 0 0 10px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.detail-slots {
  color: var(--dim);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  margin: 10px 0 0;
}

h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gold-deep);
  margin: 0 0 12px;
}

.card h3 + .handled { margin-top: 4px; }
.card h3 + .actions { margin-top: 4px; }

/* ---- History -------------------------------------------------------------- */

.history { margin: 0; padding: 0; list-style: none; }

.hist-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(140, 105, 45, 0.12);
  font-size: 14.5px;
}

.hist-item:last-child { border-bottom: 0; }

.hist-when {
  color: var(--dim);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  min-width: 96px;
}

.hist-what {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-weight: 600;
  min-width: 0;
}

.hist-what .ic { width: 14px; height: 14px; }
.hist-what.is-done { color: var(--good); }
.hist-what.is-no_show { color: var(--wine); }
.hist-what.is-cancelled { color: var(--dim); }

.hist-note { color: var(--dim); font-weight: 500; font-size: 13px; }

.hist-item .link.small { margin-left: auto; }

/* ---- Money ---------------------------------------------------------------- */

.money-hero {
  text-align: center;
  padding: 26px 18px 22px;
  background:
    radial-gradient(80% 120% at 50% -20%, rgba(238, 205, 134, 0.5), transparent 70%),
    var(--glass);
}

.money-label {
  margin: 0 0 6px;
  color: var(--gold-deep);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.money-sum {
  margin: 0;
  font-family: var(--display);
  font-size: 44px;
  line-height: 1.1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---- Empty states --------------------------------------------------------- */

.empty-stage {
  display: grid;
  justify-items: center;
  gap: 16px;
  padding: 52px 20px 20px;
  text-align: center;
}

/* A quiet spotlight ring on the empty floor. */
.empty-mark {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95), transparent 55%),
    conic-gradient(from 210deg, rgba(238, 205, 134, 0.9), rgba(235, 187, 179, 0.7), rgba(196, 210, 182, 0.8), rgba(238, 205, 134, 0.9));
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, 0.65), 0 10px 24px -10px rgba(101, 69, 22, 0.4);
}

.empty { color: var(--dim); margin: 0; }
.empty.small { padding: 4px 0; font-size: 14px; border: 0; }

/* ---- Forms ---------------------------------------------------------------- */

.field { display: grid; gap: 6px; margin-bottom: 14px; }

.field label {
  color: var(--dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.field input,
.field select {
  min-height: var(--tap);
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(140, 105, 45, 0.18);
  background: rgba(255, 255, 253, 0.85);
  box-shadow: inset 0 1px 3px rgba(101, 69, 22, 0.06);
  color: var(--ink);
  font-size: 17px;
  font-family: var(--body);
  padding: 0 14px;
}

.field input:focus,
.field select:focus,
.lock input:focus {
  outline: 2px solid rgba(156, 122, 46, 0.55);
  outline-offset: 1px;
}

.primary {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  background: linear-gradient(170deg, #b28a38, #94701f);
  color: #fffdf5;
  font: 650 16.5px/1.2 var(--body);
  letter-spacing: 0.01em;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 10px 22px -10px rgba(148, 112, 31, 0.75);
  transition: transform 0.12s ease;
}

.primary:active { transform: scale(0.98); }

.add-btn { margin-bottom: 14px; }

.link {
  background: none;
  border: 0;
  color: var(--gold-deep);
  font: 600 15px/1.2 var(--body);
  padding: 12px 2px;
  min-height: var(--tap);
  text-align: left;
}

.link.small { font-size: 13px; padding: 12px 6px; }

.edit { margin: 0 0 12px; }

.edit .primary { margin-top: 16px; }

.slot-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.slot-row select,
.slot-row input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  border-radius: 14px;
  border: 1px solid rgba(140, 105, 45, 0.18);
  background: rgba(255, 255, 253, 0.85);
  color: var(--ink);
  font-size: 15px;
  font-family: var(--body);
  padding: 0 10px;
}

.slot-row .link { flex: 0 0 auto; }

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--ink);
}

.check input { width: 24px; height: 24px; accent-color: var(--gold); }

/* ---- Navigation ----------------------------------------------------------- */

nav {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex;
  gap: 4px;
  padding: 6px;
  border-radius: 30px;
  background: linear-gradient(170deg, rgba(255, 255, 253, 0.82), rgba(253, 249, 240, 0.6));
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 18px 40px -16px rgba(101, 69, 22, 0.45);
  backdrop-filter: blur(22px) saturate(1.6);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  z-index: 10;
}

nav button {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  border-radius: 24px;
  background: none;
  color: var(--dim);
  font: 600 11.5px/1.2 var(--body);
  letter-spacing: 0.02em;
  padding: 4px 2px;
  transition: color 0.2s ease;
}

nav .nav-ic { width: 21px; height: 21px; }

nav .nav-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

nav button.active {
  color: var(--gold-deep);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.95), rgba(248, 235, 205, 0.8));
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px -4px rgba(148, 112, 31, 0.45);
}

/* ---- Lock ----------------------------------------------------------------- */

.lock {
  min-height: 92vh;
  display: grid;
  place-content: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
}

.lock h1 {
  font-size: 40px;
  margin-bottom: 6px;
}

.lock form {
  display: grid;
  gap: 12px;
  width: min(320px, 82vw);
}

.lock input {
  min-height: 54px;
  font-size: 22px;
  text-align: center;
  letter-spacing: 0.3em;
  border-radius: 16px;
  border: 1px solid rgba(140, 105, 45, 0.2);
  background: rgba(255, 255, 253, 0.85);
  color: var(--ink);
  padding: 0 14px;
  font-family: var(--body);
}

.lock button {
  min-height: 52px;
  font: 650 17px/1 var(--body);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  background: linear-gradient(170deg, #b28a38, #94701f);
  color: #fffdf5;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 22px -10px rgba(148, 112, 31, 0.75);
}

/* ---- Motion restraint ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: -1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}

/* ---- Narrow phones -------------------------------------------------------- */

@media (max-width: 374px) {
  main { padding: 6px 10px 0; }
  .card { padding: 14px; }
  .lesson-time { font-size: 22px; }
  .lesson-name { font-size: 17.5px; }
  .money-sum { font-size: 38px; }
  .act { font-size: 11.5px; }
  .hist-when { min-width: 84px; }
}