/* CoachTrailMTB rider app — red-and-black brand, single dark theme (matches the Kettlebell Timer). */
:root{
  --ink:#0e0c0c; --panel:#1a1717; --panel2:#221e1e; --line:#2f2929;
  --red:#e3191f; --red-hi:#ff3d43; --red-soft:#3a1517;
  --paper:#f7f3ee; --muted:#a8a09c;
  --good:#45c47f; --good-soft:#123222; --warn:#f0a63c; --warn-soft:#38270b;
  --display:"Bangers","Impact","Arial Black",sans-serif;
  --label:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ink);color:var(--paper)}
body{font:400 16px/1.5 var(--body);min-height:100vh;display:flex;flex-direction:column;
  background-image:radial-gradient(rgba(227,25,31,.10) 1.2px,transparent 1.5px);background-size:9px 9px;
  padding-bottom:env(safe-area-inset-bottom,0)}
[hidden]{display:none!important}
.wrap{width:100%;max-width:860px;margin:0 auto;padding-inline:16px}
main.wrap{flex:1;padding-block:18px 32px}
button,input{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--red-hi);outline-offset:2px}
a{color:var(--red-hi)}

/* header */
.top{background:#000;border-bottom:3px solid var(--red);padding-top:env(safe-area-inset-top,0)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:12px}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.wm{font:400 clamp(24px,6vw,32px)/1 var(--display);letter-spacing:.03em;transform:skew(-6deg);white-space:nowrap}
.wm span{color:var(--red)}
.tag{font:700 12px/1 var(--label);letter-spacing:.14em;text-transform:uppercase;background:var(--red);color:#fff;padding:4px 8px 3px}

/* type */
.h-display{font:400 clamp(30px,7vw,42px)/1 var(--display);letter-spacing:.03em;margin:4px 0 10px;transform:skew(-4deg)}
.label{font:700 12px/1.2 var(--label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}
.muted{color:var(--muted)}
.center{text-align:center}
h2{font:700 20px/1.2 var(--label);letter-spacing:.06em;text-transform:uppercase;margin:0 0 8px}
h3{font:700 17px/1.2 var(--label);letter-spacing:.05em;text-transform:uppercase;margin:0}

/* cards + forms */
.card{background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:16px;margin-bottom:14px}
.card.red{border-color:var(--red);box-shadow:5px 5px 0 #000}
.auth{max-width:440px;margin:6vh auto 0}
.form{display:grid;gap:14px}
.field{display:grid;gap:6px}
input[type=email],input[type=password]{width:100%;background:var(--ink);border:2px solid var(--line);border-radius:9px;padding:12px;min-height:48px}
input:focus{border-color:var(--red);outline:none}
.hint{font-size:14px;color:var(--muted);margin:0}
.msg{margin:0;min-height:1.2em;font-size:15px}
.msg.err{color:var(--red-hi)} .msg.ok{color:var(--good)}
.banner{background:var(--warn-soft);border:2px solid var(--warn);border-radius:10px;padding:10px 14px;margin:0 0 14px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:10px 18px;border-radius:9px;border:2px solid var(--paper);
  background:var(--ink);font:700 15px/1 var(--label);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;text-decoration:none;color:var(--paper)}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff}
.btn.primary:hover{background:var(--red-hi)}
.btn.ghost{border-color:var(--line)}
.btn.small{min-height:36px;padding:6px 12px;font-size:13px;white-space:nowrap;flex:none}
.btn.block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}
.link{background:none;border:0;padding:4px 0;color:var(--muted);text-decoration:underline;cursor:pointer;justify-self:start}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

/* tabs */
.hello{margin-bottom:12px}
.tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:2px solid var(--paper);border-radius:10px;overflow:hidden;margin-bottom:16px;box-shadow:4px 4px 0 var(--red)}
.tabs button{background:var(--ink);border:0;border-right:2px solid var(--paper);padding:12px 4px;min-height:48px;font:700 14px/1.1 var(--label);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;min-width:0}
.tabs button:last-child{border-right:0}
.tabs button[aria-selected="true"]{background:var(--paper);color:var(--ink)}

/* chips */
.chip{display:inline-block;font:700 11px/1.5 var(--label);letter-spacing:.1em;text-transform:uppercase;border-radius:5px;padding:1px 7px;border:1.5px solid currentColor;white-space:nowrap}
.chip.draft{color:var(--warn);background:var(--warn-soft)}
.chip.ride{color:#fff;background:var(--red);border-color:var(--red)}
.chip.strength{color:var(--ink);background:var(--paper);border-color:var(--paper)}
.chip.done{color:var(--good);background:var(--good-soft)}
.chip.skipped{color:var(--muted)}
.chip.today{color:var(--red-hi)}

/* plan */
.plan-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:flex-start}
.plan-name{font:400 clamp(26px,6vw,34px)/1 var(--display);letter-spacing:.03em;margin:2px 0 4px}
.meter{height:12px;border-radius:999px;background:var(--ink);border:1.5px solid var(--line);overflow:hidden;margin:10px 0 6px}
.meter i{display:block;height:100%;width:0;background:var(--red)}
.next{display:grid;gap:8px}
.next .title{font:700 22px/1.15 var(--label);letter-spacing:.03em;text-transform:uppercase}

/* calendar */
.week{margin-bottom:16px}
.week h3{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-bottom:8px}
.week h3 small{font-weight:600;letter-spacing:.04em;color:var(--muted);text-transform:none;font-family:var(--body);font-size:14px}
.sess{border:2px solid var(--line);border-left:6px solid var(--red);border-radius:10px;background:var(--panel);margin-bottom:8px}
.sess.strength{border-left-color:var(--paper)}
.sess.is-today{border-color:var(--red);border-left-color:var(--red)}
.sess.is-done{opacity:.8}
.sess summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:62px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;min-height:56px}
.sess summary::-webkit-details-marker{display:none}
.sess .day{font:700 13px/1.15 var(--label);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sess .day b{display:block;font-size:18px;color:var(--paper)}
.sess .t{font:700 17px/1.2 var(--label);letter-spacing:.03em;text-transform:uppercase;overflow-wrap:anywhere}
.sess .t small{display:block;font:500 13px/1.3 var(--body);letter-spacing:0;text-transform:none;color:var(--muted)}
.sess.is-done .t{text-decoration:line-through;text-decoration-color:var(--good)}
.sess .body{border-top:1px solid var(--line);padding:12px;display:grid;gap:12px}
.sess .body p{margin:0;max-width:68ch}

/* progress */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.stat{background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0}
.stat .v{font:700 30px/1.1 var(--label);font-variant-numeric:tabular-nums}
.wbars{display:grid;gap:8px}
.wbar{display:grid;grid-template-columns:70px minmax(0,1fr) 54px;gap:10px;align-items:center;font:600 14px var(--label);letter-spacing:.04em}
.wbar .meter{margin:0}
.ride{border-top:1px solid var(--line);padding:10px 0}
.ride:first-child{border-top:0}
.ride b{font:700 16px var(--label);letter-spacing:.03em;text-transform:uppercase}
.ride .meta{font-size:14px;color:var(--muted)}
.fb{margin-top:8px;border-left:4px solid var(--red);padding:6px 10px;background:var(--panel2);border-radius:0 8px 8px 0}

.foot{padding-block:16px 24px;font-size:13px;color:var(--muted);text-align:center}

@media (max-width:420px){
  .wm{font-size:22px}
  .tag{display:none}
  .top-in{gap:8px}
  .tabs button{font-size:12.5px;letter-spacing:.04em}
  .stats{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .stat{padding:8px}
  .stat .v{font-size:24px}
  .sess summary{grid-template-columns:52px minmax(0,1fr) auto;gap:8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}