/* -------------------------------------------------------------------------
   Golovin Dance, after dark.

   Reskinned 2026-08-28 to match golovindancesport.com. The ground is the
   studio itself: walnut timber, cream drapes, and the string lights as the
   only gold. Values come straight from ~/golovin-dance/brand/tokens.css so
   the app, the site, the cards, and the merch are one brand.

   Two rules carried over from the old scheme, because they are about use
   and not about taste:
     - Green still means the lesson happened. It is the one colour he acts
       on, so it never becomes gold.
     - Nothing here asks him to type. This is paint, not plumbing.

   Type: Superclarendon is the brand slab and ships on his iPhone, but it
   carries no Cyrillic. So the stack falls through to Prata, the didone
   already bundled here, which does. Latin gets the brand face, Russian
   gets Prata, and the browser picks per glyph without being told.
   ------------------------------------------------------------------------- */

@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 {
  /* The room. Same hex as brand/tokens.css. Never hard code a colour. */
  --walnut: #151009;
  --walnut2: #1e160d;
  --oak: #3b2a19;
  --lamp: #f0b95f;
  --brass: #e2b662;
  --honey: #c98f43;
  --cream: #f6efe2;
  --cream2: #e7dcc7;
  --sage: #9aa189;
  --rust: #a9501f;

  /* Roles. The old names are kept so the 1,100 lines below still resolve. */
  --ink: #f6efe2;
  --dim: #b8aa92;
  --faint: #9c8e79;
  --azure: #e2b662;
  --azure-deep: #f0b95f;
  --good: #8fae74;
  --wine: #d4785f;
  --paper: #151009;

  --display: 'Superclarendon', 'Rockwell', 'Prata', 'Bookman Old Style', Georgia, serif;
  --body: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;

  /* Materials. Every translucent surface in this file routes through these
     four, so the whole room can be relit from one block. */
  --glass: linear-gradient(165deg, rgba(48, 36, 22, 0.80), rgba(30, 22, 13, 0.60));
  --glass-border: rgba(246, 239, 226, 0.11);
  --glass-shadow:
    inset 0 1px 0 rgba(246, 239, 226, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 14px 34px -14px rgba(0, 0, 0, 0.70),
    0 2px 8px rgba(0, 0, 0, 0.35);

  /* Gold is an accent, never a fill. Banded metal on buttons only. */
  --metal: linear-gradient(100deg, #7d5619 0%, #b4873c 14%, #e8cd8d 30%,
    #d3a54e 44%, #9a6f28 58%, #d8b163 74%, #b0842f 90%, #7d5619 100%);
  --on-metal: #241705;

  --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(54% 40% at 14% -6%, rgba(240, 185, 95, 0.16), transparent 70%),
    radial-gradient(46% 34% at 94% 10%, rgba(201, 143, 67, 0.13), transparent 70%),
    radial-gradient(62% 44% at 50% 108%, rgba(240, 185, 95, 0.10), transparent 72%),
    radial-gradient(38% 30% at 78% 66%, rgba(59, 42, 25, 0.55), transparent 70%),
    linear-gradient(180deg, #1a130b, #100c06);
}

/* 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.035;
  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;
  gap: 10px;
  padding: 22px 18px 10px;
}

header h1 { flex: 1 1 auto; }

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(48, 36, 22, 0.55);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(246, 239, 226, 0.099), 0 2px 8px rgba(0, 0, 0, 0.176);
  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(246, 239, 226, 0.104), rgba(48, 36, 22, 0.85));
  color: var(--azure-deep);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.396), inset 0 1px 0 rgba(246, 239, 226, 0.08);
}

.sync {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--azure-deep);
  background: rgba(240, 185, 95, 0.152);
  border: 1px solid rgba(246, 239, 226, 0.066);
  border-radius: 999px;
  padding: 6px 10px;
  white-space: nowrap;
}

.sync.failed {
  color: #f6efe2;
  background: linear-gradient(170deg, #c2603f, #a9501f);
}

.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(--azure);
  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(48, 36, 22, 0.55), rgba(48, 36, 22, 0.35)); }
.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(246, 239, 226, 0.093) 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(246, 239, 226, 0.077);
  box-shadow: inset 0 1px 0 rgba(246, 239, 226, 0.077);
  white-space: nowrap;
}

.pill.ok { color: var(--good); background: rgba(143, 174, 116, 0.184); }
.pill.warn { color: var(--wine); background: rgba(212, 120, 95, 0.184); }
.pill.mute { color: var(--dim); background: rgba(154, 161, 137, 0.184); }

/* ---- 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(246, 239, 226, 0.083);
  background: linear-gradient(170deg, rgba(246, 239, 226, 0.099), rgba(48, 36, 22, 0.6));
  box-shadow: inset 0 1px 0 rgba(246, 239, 226, 0.08), 0 3px 10px -4px rgba(0, 0, 0, 0.55);
  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, #8fae74, #5d7a4b);
  border-color: rgba(246, 239, 226, 0.044);
  color: #f6efe2;
  box-shadow:
    inset 0 1px 0 rgba(246, 239, 226, 0.04),
    0 8px 18px -8px rgba(0, 0, 0, 0.75);
}

.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(246, 239, 226, 0.083);
  background: rgba(48, 36, 22, 0.6);
  box-shadow: inset 0 1px 0 rgba(246, 239, 226, 0.08);
  color: var(--dim);
  font: 600 13.5px/1 var(--body);
  flex-shrink: 0;
}

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

.person { cursor: pointer; }

/* ---- Free-class signups --------------------------------------------------
   Visually a step quieter than a student card: a rust hairline marks it as
   "not yours yet", and the whole card fades once the person has been added,
   so the section empties itself as he works down it. */

.signups-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 19px;
  color: var(--cream2);
  margin: 22px 4px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.signup {
  border-left: 2px solid rgba(212, 120, 95, 0.55);
}

.signup.resolved {
  opacity: 0.5;
  border-left-color: rgba(246, 239, 226, 0.14);
}

.signup-meta {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--dim);
  overflow-wrap: anywhere;
}

.signup-note {
  margin-top: 6px;
  font-size: 13.5px;
  color: var(--faint);
  font-style: italic;
}

.signup .signup-add {
  padding: 12px 0 2px;
  color: var(--azure-deep);
}

.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(--azure-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(246, 239, 226, 0.084);
  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(240, 185, 95, 0.2), transparent 70%),
    var(--glass);
}

.money-label {
  margin: 0 0 6px;
  color: var(--azure-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(246, 239, 226, 0.104), transparent 55%),
    conic-gradient(from 210deg, rgba(240, 185, 95, 0.3), rgba(201, 143, 67, 0.7), rgba(226, 182, 98, 0.8), rgba(240, 185, 95, 0.3));
  box-shadow: inset 0 0 0 5px rgba(246, 239, 226, 0.072), 0 10px 24px -10px rgba(0, 0, 0, 0.75);
}

.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(246, 239, 226, 0.126);
  background: rgba(48, 36, 22, 0.85);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.132);
  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(240, 185, 95, 0.66);
  outline-offset: 1px;
}

.primary {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(246, 239, 226, 0.044);
  border-radius: 16px;
  background-image: var(--metal);
  background-size: 210% 100%;
  background-position: 14% 0;
  transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--on-metal);
  font: 650 16.5px/1.2 var(--body);
  letter-spacing: 0.01em;
  box-shadow:
    inset 0 1px 0 rgba(246, 239, 226, 0.044),
    0 10px 22px -10px rgba(0, 0, 0, 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(--azure-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(246, 239, 226, 0.126);
  background: rgba(48, 36, 22, 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(--azure); }

/* ---- 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(48, 36, 22, 0.82), rgba(48, 36, 22, 0.6));
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 rgba(246, 239, 226, 0.104),
    0 18px 40px -16px rgba(0, 0, 0, 0.75);
  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(--azure-deep);
  background: linear-gradient(170deg, rgba(246, 239, 226, 0.104), rgba(48, 36, 22, 0.85));
  box-shadow: inset 0 1px 0 rgba(246, 239, 226, 0.08), 0 4px 12px -4px rgba(0, 0, 0, 0.64);
}

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

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

.lock h1 {
  font-size: 22px;
  font-weight: 400;
  color: var(--dim);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 6px;
}

/* The lockup is the first thing anyone sees, so it gets the room to itself.
   Clear space is at least the height of the G, per BRAND.md. */
.brand-lockup {
  width: min(58vw, 216px);
  height: auto;
  justify-self: center;
  margin-bottom: 10px;
}

/* The mark alone in the header. Never the wordmark: a 26px lockup cannot
   hold its letterforms, and BRAND.md puts the floor at 3.5 inches. */
.brand-mark {
  height: 30px;
  width: auto;
  flex-shrink: 0;
  margin-right: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .brand-lockup { animation: rise 0.7s cubic-bezier(0.22, 0.9, 0.28, 1.04) backwards; }
}

.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(246, 239, 226, 0.14);
  background: rgba(48, 36, 22, 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(246, 239, 226, 0.044);
  border-radius: 16px;
  background-image: var(--metal);
  background-size: 210% 100%;
  background-position: 14% 0;
  transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  color: var(--on-metal);
  box-shadow: inset 0 1px 0 rgba(246, 239, 226, 0.044), 0 10px 22px -10px rgba(0, 0, 0, 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; }
}

/* ---- Calendar ------------------------------------------------------------- */

/* The grid card bleeds slightly past the main gutter so seven side-by-side
   day cells can each keep a genuine 48px tap width on a 360px phone. */
.cal-card {
  margin-inline: -8px;
  padding: 14px 4px 10px;
}

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0 4px;
}

.cal-nav {
  flex-shrink: 0;
  width: var(--tap);
  height: var(--tap);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--azure-deep);
}

.cal-nav .ic { width: 20px; height: 20px; }
.cal-nav:active { background: rgba(240, 185, 95, 0.12); }

/* The title doubles as the jump-to-today control. */
.cal-title {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--display);
  font-size: 21px;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cal-switch {
  display: flex;
  margin: 4px auto 10px;
  padding: 2px;
  width: fit-content;
  border-radius: 999px;
  background: rgba(246, 239, 226, 0.06);
  border: 1px solid rgba(246, 239, 226, 0.066);
}

.cal-switch button {
  min-width: 92px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--dim);
  font: 600 13.5px/1 var(--body);
}

.cal-switch button.active {
  background: linear-gradient(170deg, rgba(246, 239, 226, 0.104), rgba(48, 36, 22, 0.85));
  color: var(--azure-deep);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.352), inset 0 1px 0 rgba(246, 239, 226, 0.08);
}

.cal-dows,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.cal-dow {
  text-align: center;
  color: var(--faint);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 0 6px;
}

.cal-day {
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--ink);
  font: 600 15px/1 var(--body);
  font-variant-numeric: tabular-nums;
  padding: 4px 0;
}

.cal-day.other .cal-num { color: var(--faint); opacity: 0.55; }

.cal-day.now .cal-num {
  color: var(--azure-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.cal-day.sel {
  background: linear-gradient(170deg, rgba(246, 239, 226, 0.104), rgba(48, 36, 22, 0.85));
  box-shadow: inset 0 1px 0 rgba(246, 239, 226, 0.08), 0 4px 12px -4px rgba(0, 0, 0, 0.64);
}

.cal-day.sel .cal-num { color: var(--azure-deep); }

.cal-dots {
  display: flex;
  gap: 3px;
  min-height: 5px;
}

.dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.dot-done { background: var(--good); }
.dot-plan { background: var(--azure); }
.dot-miss { background: var(--wine); }

/* The day sheet under the grid. */
.cal-day-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 21px;
  margin: 16px 2px 10px;
  overflow-wrap: anywhere;
}

.cal-empty { padding: 8px 2px 14px; }

.cal-lesson .actions { margin-top: 12px; }

/* Move and cancel sit side by side, and one of them calls off a lesson. At
   the old 2px horizontal padding they were two 13px labels a thumb-width
   apart, so a mis-tap on a 360px phone cancelled a lesson the coach meant
   to move. Wider padding, a wider gap, and a different look on the
   destructive one: it reads as wine on a tinted chip, not as another plain
   blue link. */
.cal-tools {
  display: flex;
  align-items: center;
  gap: 8px 20px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.cal-tools .link {
  padding: 12px 12px;
  border-radius: 12px;
}

.cal-tools .link.danger {
  color: var(--wine);
  background: rgba(212, 120, 95, 0.115);
  border: 1px solid rgba(212, 120, 95, 0.322);
}

.cal-tools .link.danger:active { background: rgba(212, 120, 95, 0.207); }

.add-lesson-btn { display: block; margin: 2px 0 8px; }

.cal-add { margin-top: 4px; }
.cal-add .link { display: block; }

/* Inline move form on a lesson row. */
.resched {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(246, 239, 226, 0.098);
}

.resched-fields {
  display: flex;
  gap: 8px;
}

.resched-fields input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  border-radius: 14px;
  border: 1px solid rgba(246, 239, 226, 0.126);
  background: rgba(48, 36, 22, 0.85);
  color: var(--ink);
  font-size: 15px;
  font-family: var(--body);
  padding: 0 10px;
}

.resched-fields input:focus {
  outline: 2px solid rgba(240, 185, 95, 0.66);
  outline-offset: 1px;
}

.resched .cal-tools { margin-top: 10px; }

.primary.slim {
  width: auto;
  min-height: var(--tap);
  padding: 0 18px;
  font-size: 15px;
}

/* ---- Student portal ------------------------------------------------------- */
/* The same room, fewer pieces of furniture. One column, no bottom nav, and a
   veil over the part of the page that would embarrass somebody if a friend
   glanced at their phone. */

body.portal { padding-bottom: 40px; }

body.portal main { padding: 6px 14px 0; max-width: 560px; margin: 0 auto; }

/* The closed state. A whole card that is one big tap target. */
.portal-veil {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 96px;
  text-align: left;
  cursor: pointer;
  font-family: var(--body);
  color: var(--ink);
}

.veil-mark {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(246, 239, 226, 0.104), transparent 55%),
    conic-gradient(from 210deg, rgba(240, 185, 95, 0.3), rgba(201, 143, 67, 0.7), rgba(226, 182, 98, 0.8), rgba(240, 185, 95, 0.3));
  box-shadow: inset 0 0 0 4px rgba(246, 239, 226, 0.072);
}

.veil-text {
  flex: 1;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--dim);
  overflow-wrap: anywhere;
}

.veil-cta {
  flex-shrink: 0;
  color: var(--azure-deep);
  font-weight: 700;
  font-size: 14.5px;
}

.portal-hero { padding: 20px 18px; }
.portal-hero .pill { margin-right: 10px; }
.portal-hero .link { padding-left: 0; }

.portal-hint {
  color: var(--dim);
  font-size: 13.5px;
  margin: 0 0 12px;
}

.portal-ok {
  color: var(--good);
  font-size: 14px;
  font-weight: 600;
  margin: 4px 0 0;
}

.portal-when {
  font-size: 16px;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.portal .lesson .link { display: block; margin-top: 6px; }

.portal .resched { border-top: 0; padding-top: 4px; }

.primary[disabled] { opacity: 0.6; }

/* ---- Reschedule requests, on the coach's side ----------------------------- */

.req-card { border-color: rgba(212, 120, 95, 0.4); }

.req + .req {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(246, 239, 226, 0.098);
}

.req-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 6px;
}

.req-name {
  font-size: 17px;
  font-weight: 650;
  overflow-wrap: anywhere;
  min-width: 0;
}

.req-when {
  color: var(--dim);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.req-wants {
  font-family: var(--display);
  font-size: 19px;
  color: var(--azure);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.req-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.req-actions .primary.slim { flex: 1; }

.req-actions .link.danger {
  flex: 0 0 auto;
  color: var(--wine);
  background: rgba(212, 120, 95, 0.115);
  border: 1px solid rgba(212, 120, 95, 0.322);
  border-radius: 12px;
  padding: 12px 14px;
}

/* The copy-link control. The link itself is shown as selectable text so a
   phone that refuses the clipboard API still has a way to send it. */
.link-box {
  width: 100%;
  min-height: var(--tap);
  border-radius: 14px;
  border: 1px solid rgba(246, 239, 226, 0.126);
  background: rgba(48, 36, 22, 0.85);
  color: var(--dim);
  font: 13px/1.4 var(--body);
  padding: 12px 14px;
  margin-bottom: 12px;
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}