:root{
  --cream:#F6F2EA; --cream-2:#FBF8F2; --ink:#2A2520; --muted:#5C5349;
  --forest:#3D0B0D; --forest-2:#6B141A; --brass:#B08D4F; --brass-text:#7a6230;
  --hair:rgba(42,37,32,0.10);
  --open:#3f6f7a; --open-bg:rgba(63,111,122,0.10);
  --fill:#B08D4F; --fill-bg:rgba(176,141,79,0.12);
  --full:#9a8f80; --full-bg:rgba(42,37,32,0.05);
  --danger:#b5483a;
  --ease:cubic-bezier(0.32,0.72,0,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; background:var(--cream); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:'Fraunces',Georgia,serif; font-weight:500; letter-spacing:-0.01em; line-height:1.06; }
a{ color:var(--forest); }
.wrap{ width:min(1180px,94vw); margin:0 auto; }
.brand{ font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.01em; white-space:nowrap; }

/* top app bar */
.appbar{ position:sticky; top:0; z-index:40; background:rgba(251,248,242,0.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--hair); }
.appbar .row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 0; }
.appbar .brand{ font-size:20px; }
.appbar nav{ display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:8px; row-gap:8px; }
.pill-link{ text-decoration:none; color:var(--ink); font-size:14px; font-weight:600; padding:8px 14px; border-radius:999px; opacity:.8; white-space:nowrap; transition:background .25s var(--ease), opacity .25s var(--ease); }
.pill-link:hover{ opacity:1; background:rgba(42,37,32,0.05); }
.pill-link.active{ background:var(--ink); color:var(--cream-2); opacity:1; }

/* buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; border:0; cursor:pointer; font:inherit; font-weight:600; font-size:15px; border-radius:13px; padding:13px 18px; transition:transform .3s var(--ease), background .3s var(--ease); text-decoration:none; }
.btn-primary{ background:var(--forest); color:var(--cream-2); }
.btn-primary:hover{ background:var(--forest-2); } .btn-primary:active{ transform:scale(.98); }
.btn-ink{ background:var(--ink); color:var(--cream-2); }
.btn-ink:hover{ background:#3a342d; }
.btn-ghost{ background:transparent; border:1px solid var(--hair); color:var(--ink); }
.btn-ghost:hover{ background:rgba(42,37,32,0.04); }
.btn-block{ width:100%; }
.or-line{ display:flex; align-items:center; gap:12px; margin:18px 0 14px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.14em; }
.or-line::before,.or-line::after{ content:""; flex:1; height:1px; background:var(--hair); }
.btn-oauth{ display:flex; align-items:center; justify-content:center; gap:10px; }
.btn-google{ display:flex; align-items:center; justify-content:center; gap:10px; background:#fff; }
.btn-google:hover{ background:#fbfbfb; }
.btn[disabled]{ background:var(--full-bg); color:var(--full); cursor:not-allowed; }
.btn-sm{ padding:8px 13px; font-size:13px; border-radius:10px; }
.btn-danger{ background:transparent; border:1px solid rgba(181,72,58,.4); color:var(--danger); }
.btn-danger:hover{ background:rgba(181,72,58,.08); }

/* auth card */
.auth-page{ min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:28px; background:
  radial-gradient(55% 45% at 80% 12%, rgba(176,141,79,0.14), transparent 70%),
  radial-gradient(50% 40% at 12% 90%, rgba(109,20,26,0.13), transparent 70%); }
.auth-shell{ background:rgba(42,37,32,0.04); border:1px solid var(--hair); border-radius:30px; padding:8px; width:min(440px,100%); }
.auth-card{ background:var(--cream-2); border-radius:23px; padding:34px 30px; box-shadow:inset 0 1px 1px rgba(255,255,255,.6); }
.auth-card .home{ text-align:center; display:block; font-size:13px; text-decoration:none; color:var(--muted); margin-bottom:14px; }
.auth-card .brand{ font-size:24px; display:block; text-align:center; }
.auth-card h1{ font-size:27px; text-align:center; margin:14px 0 4px; }
.auth-card .sub{ text-align:center; color:var(--muted); font-size:14px; margin-bottom:22px; }
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:600; margin-bottom:6px; }
.field input{ width:100%; font:inherit; font-size:15px; padding:13px 15px; border:1px solid var(--hair); border-radius:13px; background:#fff; }
.field input:focus{ outline:2px solid var(--forest); outline-offset:1px; }
.msg{ font-size:13.5px; border-radius:12px; padding:11px 14px; margin-bottom:14px; display:none; }
.msg.err{ display:block; background:rgba(181,72,58,.08); color:var(--danger); }
.msg.ok{ display:block; background:var(--open-bg); color:var(--open); }
.swap{ text-align:center; font-size:13.5px; color:var(--muted); margin-top:18px; }

/* page heading */
.pagehead{ padding:30px 0 8px; }
.pagehead h1{ font-size:clamp(26px,4vw,38px); }
.pagehead .sub{ color:var(--muted); font-size:14px; margin-top:4px; }

/* calendar (shared with prototype look) */
.legend{ display:flex; gap:16px; flex-wrap:wrap; padding:14px 0 6px; color:var(--muted); font-size:12.5px; }
.legend span{ display:inline-flex; align-items:center; gap:7px; }
.dot{ width:9px; height:9px; border-radius:50%; }
.dot.open{ background:var(--open);} .dot.fill{ background:var(--fill);} .dot.full{ background:var(--full);} .dot.mine{ background:var(--forest);}
.week{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; padding:8px 0 50px; }
.day{ background:var(--cream-2); border:1px solid var(--hair); border-radius:18px; padding:10px; min-height:140px; display:flex; flex-direction:column; gap:8px; }
.day .dh{ text-align:center; padding:6px 0 8px; border-bottom:1px solid var(--hair); }
.day .dh .dow{ font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); }
.day .dh .dnum{ font-family:'Fraunces',serif; font-size:20px; display:block; }
.slot{ text-align:left; border:0; cursor:pointer; font:inherit; border-radius:13px; padding:10px 11px; transition:transform .3s var(--ease); position:relative; }
.slot:hover{ transform:translateY(-2px); } .slot:active{ transform:scale(.98); }
.slot.open{ background:var(--open-bg);} .slot.fill{ background:var(--fill-bg);} .slot.full{ background:var(--full-bg);}
.slot .t{ font-weight:700; font-size:13px; } .slot .ty{ font-size:12px; color:var(--muted); }
.slot .cap{ font-size:11.5px; font-weight:600; margin-top:6px; }
.slot.open .cap{ color:var(--open);} .slot.fill .cap{ color:var(--brass-text);} .slot.full .cap{ color:var(--full);}
.slot .mine{ position:absolute; top:8px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--forest); }
.empty{ color:var(--muted); font-size:12px; text-align:center; padding:14px 0; opacity:.6; }
.addbtn{ margin-top:auto; border:1px dashed var(--hair); background:transparent; color:var(--muted); cursor:pointer; font:inherit; font-size:12px; font-weight:600; padding:8px; border-radius:11px; }
.addbtn:hover{ background:rgba(42,37,32,0.04); color:var(--ink); }

/* modal */
.overlay{ position:fixed; inset:0; z-index:90; background:rgba(42,37,32,.42); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:20px; }
.overlay.show{ display:flex; }
.modal{ width:min(460px,100%); background:var(--cream-2); border:1px solid var(--hair); border-radius:26px; padding:8px; box-shadow:0 40px 90px -40px rgba(42,37,32,.6); }
.modal .inner{ padding:22px 24px; }
.closebar{ display:flex; justify-content:flex-end; }
.closebar button{ border:0; background:rgba(42,37,32,0.05); width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:18px; }
.tag{ font-size:11px; text-transform:uppercase; letter-spacing:.16em; font-weight:600; color:var(--brass-text); }
.modal h2{ font-size:25px; margin:8px 0 2px; }
.when{ color:var(--muted); font-size:14px; margin-bottom:14px; }
.capbar{ height:8px; border-radius:999px; background:rgba(42,37,32,0.08); overflow:hidden; margin:4px 0 6px; }
.capbar i{ display:block; height:100%; background:var(--forest); transition:width .4s var(--ease); }
.capnote{ font-size:13px; color:var(--muted); margin-bottom:14px; }
.info{ background:rgba(42,37,32,0.04); border-radius:13px; padding:12px 14px; font-size:13.5px; margin-bottom:14px; }
.info b{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin-bottom:3px; font-weight:600; }
.roster{ list-style:none; display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
.roster li{ display:flex; align-items:center; gap:10px; font-size:14px; padding:8px 11px; background:rgba(42,37,32,0.03); border-radius:10px; }
.roster .av{ width:26px; height:26px; border-radius:50%; background:var(--forest); color:var(--cream-2); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex:0 0 auto; }
.roster .nt{ color:var(--muted); font-size:12.5px; }
.me-pill{ font-size:10px; background:var(--forest); color:var(--cream-2); border-radius:999px; padding:2px 7px; margin-left:6px; }

/* admin */
.panel{ background:var(--cream-2); border:1px solid var(--hair); border-radius:22px; padding:22px 22px; margin:14px 0; }
.panel h2{ font-size:22px; margin-bottom:4px; }
.panel .ph-sub{ color:var(--muted); font-size:13.5px; margin-bottom:16px; }
.pending-item{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--hair); flex-wrap:wrap; }
.pending-item:last-child{ border-bottom:0; }
.pending-item .who{ flex:1 1 200px; }
.pending-item .who .nm{ font-weight:600; }
.pending-item .who .ct{ color:var(--muted); font-size:13px; }
.pending-item .acts{ display:flex; gap:8px; }
.formgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.formgrid .field{ margin:0; }
.formgrid .full{ grid-column:1 / -1; }
select,.formgrid input{ width:100%; font:inherit; font-size:14px; padding:11px 13px; border:1px solid var(--hair); border-radius:11px; background:#fff; }
.book{ display:flex; flex-direction:column; gap:10px; }
.book input{ width:100%; font:inherit; font-size:14px; padding:13px 15px; border:1px solid var(--hair); border-radius:13px; background:#fff; }
.muted-note{ text-align:center; color:var(--muted); font-size:12.5px; padding:6px 0 40px; }

/* calendar controls + month/day views */
.cal-controls{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:6px 0 14px; }
.cal-seg{ display:inline-flex; background:rgba(42,37,32,0.05); border:1px solid var(--hair); border-radius:999px; padding:4px; }
.cal-seg button{ border:0; background:transparent; cursor:pointer; font:inherit; font-weight:600; font-size:13px; color:var(--muted); padding:7px 15px; border-radius:999px; transition:all .3s var(--ease); }
.cal-seg button.active{ background:var(--ink); color:var(--cream-2); }
.cal-nav{ display:inline-flex; align-items:center; gap:6px; }
.cal-nav button{ border:1px solid var(--hair); background:var(--cream-2); cursor:pointer; font:inherit; font-weight:600; font-size:14px; color:var(--ink); height:34px; min-width:34px; padding:0 12px; border-radius:10px; transition:background .3s var(--ease); }
.cal-nav button:hover{ background:rgba(42,37,32,0.05); }
.cal-label{ font-family:'Fraunces',serif; font-size:20px; margin-left:auto; }
.cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; padding:2px 0 6px; }
.cal-dow span{ text-align:center; font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:600; }
.cal-month{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; padding-bottom:40px; }
.cal-cell{ position:relative; text-align:left; border:1px solid var(--hair); background:var(--cream-2); cursor:pointer; font:inherit; border-radius:14px; min-height:84px; padding:9px 10px; display:flex; flex-direction:column; gap:6px; transition:transform .25s var(--ease), border-color .25s var(--ease); }
.cal-cell:hover{ transform:translateY(-2px); border-color:rgba(42,37,32,0.22); }
.cal-cell .cd{ font-family:'Fraunces',serif; font-size:16px; color:var(--ink); }
.cal-cell.out{ opacity:.4; } .cal-cell.past{ opacity:.5; }
.cal-cell.today{ border-color:var(--forest); box-shadow:inset 0 0 0 1px var(--forest); }
.cal-cell .cc{ font-size:11px; font-weight:600; color:var(--forest); background:var(--open-bg); border-radius:7px; padding:3px 7px; align-self:flex-start; }
.cal-cell .cc.mine{ background:var(--forest); color:var(--cream-2); }
.day.is-today .dh{ border-color:var(--forest); }
.cal-day{ display:flex; flex-direction:column; gap:10px; padding-bottom:40px; max-width:520px; }
.cal-day-row .slot{ width:100%; }
.cal-day-row .slot .t{ font-size:15px; } .cal-day-row .slot .ty{ font-size:13px; }
.cal-closed{ display:inline-block; font-size:11px; font-weight:600; color:#9a3f31; background:rgba(181,72,58,.10); border:1px solid rgba(181,72,58,.18); border-radius:7px; padding:3px 8px; margin-top:4px; line-height:1.3; }
.week .cal-closed{ display:block; }
.cal-feed{ display:inline-block; font-size:11px; font-weight:600; color:#8C6F3E; background:rgba(176,141,79,.12); border:1px solid rgba(176,141,79,.28); border-radius:7px; padding:3px 8px; margin-top:4px; line-height:1.3; }
.week .cal-feed{ display:block; }
/* Reward badges: champagne medallions; locked ones are muted with a goal hint. */
.ff-badges{ display:flex; flex-wrap:wrap; gap:14px; }
.ff-badge{ width:84px; text-align:center; }
.ff-badge .medal{ width:56px; height:56px; margin:0 auto 6px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:Fraunces,serif; font-size:20px; font-weight:600; }
.ff-badge.earned .medal{ background:radial-gradient(circle at 35% 30%, #cdb072, #8C6F3E); color:#fff; box-shadow:0 6px 14px -6px rgba(140,111,62,.7), inset 0 1px 2px rgba(255,255,255,.5); border:1px solid #7a5f33; }
.ff-badge.locked .medal{ background:#ece7df; color:#b9b1a5; border:1px dashed #cfc7ba; }
.ff-badge .blabel{ font-size:11px; font-weight:600; color:#3D0B0D; line-height:1.2; }
.ff-badge.locked .blabel{ color:#9a9286; font-weight:500; }
.ff-badge .bhint{ font-size:10px; color:#9a9286; line-height:1.2; margin-top:2px; }
/* Rider progress polaroid card: white frame, stats on the bottom strip, lifts off the page. */
.ff-polaroid{ position:relative; width:280px; max-width:100%; margin:8px auto 24px; background:#fff; padding:14px 14px 0; border-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.12), 0 18px 30px -12px rgba(42,37,32,.45), 0 44px 64px -30px rgba(42,37,32,.40); transform:rotate(-2deg); transition:transform .25s ease, box-shadow .25s ease; }
.ff-polaroid:hover{ transform:rotate(0deg) translateY(-5px) scale(1.02); box-shadow:0 2px 4px rgba(0,0,0,.14), 0 30px 46px -12px rgba(42,37,32,.50), 0 64px 84px -30px rgba(42,37,32,.45); }
.ff-polaroid .photo{ width:100%; aspect-ratio:1/1; border-radius:2px; background:#3D0B0D; object-fit:cover; }
.ff-polaroid .cap{ padding:14px 6px 18px; }

@media (max-width:1024px){
  .appbar .row{ flex-wrap:wrap; row-gap:6px; align-items:center; }
  .appbar nav{ width:100%; justify-content:flex-start; }
}
@media (max-width:820px){
  .week{ grid-template-columns:1fr; }
  .day{ min-height:0; } .day .dh{ text-align:left; display:flex; align-items:baseline; gap:8px; }
  .day .dh .dnum{ display:inline; }
  .formgrid{ grid-template-columns:1fr; }
  .cal-month{ gap:5px; } .cal-cell{ min-height:64px; border-radius:11px; padding:7px 7px; }
  .cal-cell .cc{ font-size:10px; padding:2px 5px; }
  .cal-label{ font-size:18px; }
}

/* My Lessons cards (shared double-bezel) */
.card-shell{ background:rgba(42,37,32,0.04); border:1px solid var(--hair); border-radius:22px; padding:7px; }
.card{ background:var(--cream-2); border-radius:16px; padding:18px 20px; box-shadow:inset 0 1px 1px rgba(255,255,255,0.6); }

@media (max-width:640px){
  .appbar .row{ flex-wrap:wrap; gap:8px; }
  .appbar nav{ flex-wrap:wrap; gap:6px; row-gap:8px; }
  .pill-link{ padding:6px 10px; font-size:13px; }
  .pending-item .acts{ flex:1 1 100%; }
  .roster li{ flex-wrap:wrap; }
}
@media (max-width:520px){
  .cal-cell{ min-height:54px; }
  .cal-cell .cd{ font-size:13px; }
  .cal-cell .cc{ font-size:0; padding:0; width:8px; height:8px; border-radius:50%; align-self:flex-start; }
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* ── Polish pass: tactile inputs, richer progress, reward interactivity ── */
input[type="checkbox"], input[type="radio"]{ accent-color:var(--forest); width:18px; height:18px; cursor:pointer; }
select:focus-visible, input:focus-visible, button:focus-visible{ outline:2px solid var(--forest); outline-offset:1px; }
.capbar{ height:10px; }
.capbar i{ background:linear-gradient(90deg, var(--brass), var(--forest)); }
/* skill checklist rows (trainer): hover affordance */
label:has(> input[type="checkbox"][data-skilltick]){ border-radius:9px; margin:0 -8px; padding:6px 8px; transition:background .2s var(--ease); }
label:has(> input[type="checkbox"][data-skilltick]):hover{ background:rgba(176,141,79,.10); }
/* on-brand select controls used in the new panels */
select{ font-family:inherit; }
/* reward badges: subtle lift + tilt on the earned ones */
.ff-badge .medal{ transition:transform .25s var(--ease), box-shadow .25s var(--ease); }
.ff-badge.earned:hover .medal{ transform:translateY(-3px) rotate(-3deg); box-shadow:0 11px 20px -6px rgba(140,111,62,.85), inset 0 1px 2px rgba(255,255,255,.6); }


/* ── Mobile field hardening ── */
/* No control or long word may spill past its container. */
input, select, textarea, button { max-width:100%; }
.caption, .cprev, .bub { overflow-wrap:anywhere; }
@media (max-width:640px){
  /* iOS Safari zooms the page whenever a focused field is under 16px, which shoves the
     layout sideways and makes fields look misaligned. Hold text controls at 16px on phones. */
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size:16px; }
  .appbar .brand{ font-size:16px; line-height:1.2; }
  .field input{ padding:12px 14px; }
  /* Stacked flex rows shouldn't let a child overflow the row on a narrow screen. */
  .formgrid .field, .pending-item, .roster li { min-width:0; }
}


/* ── Top-bar messages icon (Instagram-style) ── */
.msg-ico{ position:relative; display:inline-flex; align-items:center; justify-content:center; padding:6px 10px; color:var(--ink); }
.msg-ico svg{ display:block; }
.msg-ico:hover{ color:var(--forest); }
.msg-badge{ position:absolute; top:-1px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:9px; background:#a3203a; color:#fff; font-size:10px; font-weight:700; line-height:16px; text-align:center; box-shadow:0 0 0 2px var(--cream-2,#FBF8F2); }