/* The Village — shared styles for the member web app.
   Restyle: "Functional command center". Mist page surface, cream cards,
   Georgia serif headings over Jost, hairline rules, pill controls sized for
   chalky hands. Community keeps the app's own palette (see community.html).

   Every class name here is also a JavaScript hook somewhere — names are kept
   exactly as they were. Only the styling changed. */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --ink:#16120E; --cream:#FAF6F1; --sand:#EED5C0; --terra:#B85C38; --rose:#C98B6B;
  --white:#fff; --mist:#F2EAE1; --line:#E6D8CA; --ok:#4A7C59; --err:#C0504A;
  --tick:#5FA090;
  --page:#F2EAE1;              /* page surface — mist */
  --surface:#FAF6F1;           /* cards — cream */
  --hair:rgba(22,18,14,.07);
  --shadow:0 1px 2px rgba(22,18,14,.04), 0 12px 32px -18px rgba(22,18,14,.28);
  --shadow-lift:0 2px 4px rgba(22,18,14,.05), 0 22px 44px -22px rgba(22,18,14,.34);
  --r:20px;
  --ease:cubic-bezier(.19,1,.22,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--page);color:var(--ink);font-family:'Jost',system-ui,-apple-system,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body::selection,::selection{background:var(--sand)}
a{color:var(--terra);text-decoration:none;transition:color .15s var(--ease)}
a:hover{color:var(--ink)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--terra);outline-offset:2px;border-radius:6px}

/* ── header ─────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--page) 88%,transparent);backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--line)}
.nav-in{max-width:1140px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:26px}
.brand{font-family:Georgia,'Times New Roman',serif;font-size:21px;letter-spacing:-.2px;color:var(--terra);white-space:nowrap}
.brand:hover{color:var(--ink)}
.nav a.link{position:relative;font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);opacity:.5;padding:6px 0}
.nav a.link:hover{opacity:1;color:var(--terra)}
.nav a.link.on{opacity:1;color:var(--terra)}
.nav a.link.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--terra)}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:12px}
@media(max-width:720px){
  .nav-in{gap:16px;overflow-x:auto;padding:12px 16px;scrollbar-width:none}
  .nav-in::-webkit-scrollbar{display:none}
  .nav a.link{font-size:11px;white-space:nowrap}
  .nav .right{flex:0 0 auto;gap:8px}
  .nav-in{padding-right:16px}
}

/* ── page shell ─────────────────────────────────────────── */
.wrap{max-width:1140px;margin:0 auto;padding:44px 22px 110px}
.wrap.narrow{padding-top:76px}
.narrow{max-width:520px}
h1.page{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(30px,5.2vw,44px);font-weight:400;letter-spacing:-.6px;line-height:1.08;margin-bottom:10px;text-wrap:balance}
.sub{opacity:.6;font-size:15.5px;max-width:56ch;margin-bottom:34px;text-wrap:pretty}
.eyebrow{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--terra);margin-bottom:12px;font-weight:600}

/* ── surfaces ───────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow);margin-bottom:20px}
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.grid .card{display:flex;flex-direction:column;margin-bottom:0;padding:0;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.grid .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.grid .card > img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:0!important;margin:0!important;background:var(--sand);border-bottom:1px solid var(--line)}
.grid .card > *:not(img){margin-left:24px;margin-right:24px}
.grid .card > *:first-child:not(img){margin-top:24px}
.grid .card > *:last-child{margin-bottom:24px}
.grid .card .btn.full{margin-top:auto;width:auto;display:flex}

/* ── type helpers ───────────────────────────────────────── */
.muted{opacity:.55;font-size:13.5px}
.err{color:var(--err);font-size:13.5px;min-height:18px}
.ok{color:var(--ok);font-size:13.5px}
.divider{height:1px;background:var(--line);margin:22px 0}
.center{text-align:center}
.hide{display:none!important}

/* ── forms ──────────────────────────────────────────────── */
label{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.5;margin-bottom:8px;font-weight:600}
input,textarea,select{width:100%;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:14px 16px;font:inherit;font-size:16px;color:var(--ink);outline:none;transition:border-color .18s var(--ease),box-shadow .18s var(--ease)}
input:focus,textarea:focus,select:focus{border-color:var(--terra);box-shadow:0 0 0 3px rgba(184,112,74,.14)}
input::placeholder,textarea::placeholder{color:#A79684}
textarea{min-height:110px;resize:vertical;line-height:1.6}
.field{margin-bottom:20px}

/* ── buttons — 46px minimum, thumb-first ────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;background:var(--terra);color:#fff;border:1px solid var(--terra);border-radius:999px;padding:13px 28px;font:inherit;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease),color .2s var(--ease);box-shadow:0 10px 22px -14px rgba(184,112,74,.9)}
.btn:hover{background:#A9633E;border-color:#A9633E;color:#fff}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:default;box-shadow:none}
.btn.full{width:100%}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);box-shadow:none}
.btn.ghost:hover{background:var(--sand);border-color:var(--sand);color:var(--ink)}
.btn.owned,.btn[disabled].owned{background:var(--mist);border:1.5px solid var(--line);color:rgba(22,18,14,.4);box-shadow:none}
.btn.sm{min-height:38px;padding:9px 18px;font-size:10.5px;letter-spacing:.16em}
.card .btn + .btn{margin-left:8px}

/* ── tags ───────────────────────────────────────────────── */
.tag{display:inline-block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:rgba(184,112,74,.1);color:var(--terra);font-weight:600}
.tag.owned{background:rgba(74,124,89,.12);color:var(--ok)}

.spinner{width:24px;height:24px;border:2px solid var(--line);border-top-color:var(--terra);border-radius:50%;animation:spin .7s linear infinite;margin:60px auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── training plan ──────────────────────────────────────── */
.weekbar{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:24px;scrollbar-width:none}
.weekbar::-webkit-scrollbar{display:none}
.weekbtn{flex:0 0 auto;min-height:44px;padding:10px 20px;border-radius:999px;border:1px solid var(--line);background:var(--surface);cursor:pointer;font:inherit;font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:rgba(22,18,14,.55);transition:all .22s var(--ease)}
.weekbtn:hover{color:var(--ink);border-color:var(--terra)}
.weekbtn.on{background:var(--terra);color:#fff;border-color:var(--terra);box-shadow:0 10px 20px -14px rgba(184,112,74,.9)}

.day{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:22px;margin-bottom:16px;box-shadow:var(--shadow)}
.day h3{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--terra);margin-bottom:14px;font-weight:600}
.wo{border:1px solid var(--line);border-radius:16px;padding:18px;margin-bottom:12px;background:var(--white)}
.wo:last-child{margin-bottom:0}
.wo h4{font-family:'Instrument Serif',Georgia,serif;font-size:20px;font-weight:400;letter-spacing:-.2px;margin-bottom:6px}
.blk{background:var(--mist);border:1px solid var(--line);border-radius:14px;padding:14px;margin-top:12px}
.blk.grp{border-color:rgba(184,112,74,.45);background:rgba(184,112,74,.05)}
.exrow{display:flex;gap:10px;align-items:center;padding:12px 4px;border-bottom:1px solid var(--line);cursor:pointer;border-radius:8px;transition:background .18s var(--ease)}
.exrow:hover{background:rgba(255,255,255,.6)}
.exrow:last-child{border-bottom:none}
.exrow .nm{font-weight:500;font-size:15.5px}
.exrow .amt{margin-left:auto;font-size:13px;opacity:.65;white-space:nowrap;font-variant-numeric:tabular-nums}
.exrow .logtoggle{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.45;margin-left:10px;white-space:nowrap;font-weight:600}
.exrow:hover .logtoggle{opacity:1;color:var(--terra)}
/* Softened with a text colour rather than opacity — opacity would fade the
   highlighter colours inside it along with everything else. */
.note{font-size:13.5px;color:rgba(22,18,14,.78);background:rgba(184,112,74,.06);border-left:2px solid var(--terra);padding:9px 13px;border-radius:0 10px 10px 0;margin-top:10px;white-space:pre-wrap;line-height:1.62}

/* The two highlighters in the builder. Kept pale so text stays readable. */
mark.pink,mark.blue{color:inherit;padding:0 2px;border-radius:3px}
mark.pink{background:#FFD3E4}
mark.blue{background:#CFE7FF}

/* Set logging — the same weight/reps grid the phone app uses. */
.sets{padding:12px 0 6px}
.lastline{font-size:12.5px;opacity:.6;font-style:italic;margin-bottom:10px}
.sethead,.setrow{display:grid;grid-template-columns:40px 1fr 1fr 52px;gap:8px;align-items:center}
.sethead span:nth-child(2),.sethead span:nth-child(3){text-align:center}
.sethead{font-size:9px;letter-spacing:.16em;font-weight:600;opacity:.42;text-transform:uppercase;padding:0 2px 8px;border-bottom:1px solid var(--line);margin-bottom:8px}
.setrow{margin-bottom:8px}
.setidx{font-size:13px;opacity:.55;text-align:center;font-variant-numeric:tabular-nums}
.setin{width:100%;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:12px 12px;font:inherit;font-size:16px;color:inherit;text-align:center;font-variant-numeric:tabular-nums}
.setin:focus{border-color:var(--terra);box-shadow:0 0 0 3px rgba(184,112,74,.14);outline:none}
.setin:disabled{background:rgba(95,160,144,.07);border-color:rgba(95,160,144,.3);color:var(--ink);opacity:1}
.settick{width:48px;height:48px;border-radius:14px;border:1.5px solid var(--line);background:var(--white);color:rgba(22,18,14,.22);cursor:pointer;font-size:16px;line-height:1;transition:all .2s var(--ease)}
.settick:hover{border-color:var(--tick);color:var(--tick)}
.settick.on{background:var(--tick);border-color:var(--tick);color:#fff;box-shadow:0 8px 18px -10px rgba(95,160,144,.9)}
.setrow.on .setidx{color:var(--tick);opacity:1}
@media (max-width:420px){.sethead,.setrow{grid-template-columns:30px 1fr 1fr 48px;gap:6px}}
@media (max-width:560px){
  .exrow{flex-wrap:wrap;row-gap:4px}
  .exrow .nm{flex:1 1 100%}
  .exrow .amt{margin-left:0}
  .exrow .logtoggle{margin-left:auto}
  .exrow .demobtn{order:3}
}

/* ── learning portal ────────────────────────────────────── */
.chapters{display:grid;grid-template-columns:260px 1fr;gap:32px}
@media(max-width:760px){.chapters{grid-template-columns:1fr;gap:20px}}
.chaplist{border-right:1px solid var(--line);padding-right:20px;position:sticky;top:88px;align-self:start}
@media(max-width:760px){.chaplist{border-right:none;padding-right:0;position:static}}
.chapitem{padding:11px 13px;border-radius:10px;cursor:pointer;font-size:14px;transition:background .18s var(--ease),color .18s var(--ease)}
.chapitem:hover{background:rgba(238,213,192,.5)}
.chapitem.on{background:var(--terra);color:#fff}
.chapitem.sub{margin-left:14px;font-size:13px;opacity:.85}
.doc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow)}
.doc h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:29px;letter-spacing:-.4px;margin-bottom:18px}
.doc p{margin-bottom:15px;max-width:68ch;text-wrap:pretty}
.doc img{border-radius:14px;margin:18px 0}
.video{position:relative;padding-top:56.25%;border-radius:16px;overflow:hidden;background:#000;margin:16px 0}
.video video,.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ── community — matches the phone app, do not restyle ──── */
.post{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:18px;margin-bottom:14px;box-shadow:0 10px 30px rgba(22,18,14,.07)}
.phead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--terra),var(--rose));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;flex:0 0 auto}
.pname{font-weight:500;font-size:14.5px}
.ptime{font-size:12px;opacity:.45}
.pbody{white-space:pre-wrap;font-size:15px}
.pactions{display:flex;gap:18px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line);font-size:13px}
.pact{cursor:pointer;opacity:.6;display:flex;align-items:center;gap:6px;background:none;border:none;font:inherit;padding:0;color:inherit}
.pact:hover{opacity:1}
.pact.on{opacity:1;color:var(--terra)}
.reply{margin-left:18px;padding:11px 0 0;border-top:1px dashed var(--line);margin-top:11px}
.mention{color:var(--terra);font-weight:500}

/* ── exercise demo clips ────────────────────────────────── */
.exrow .demobtn{margin-left:8px;width:30px;height:30px;border-radius:15px;border:none;background:var(--terra);
  color:#fff;font-size:11px;cursor:pointer;line-height:1;flex:0 0 auto}
.demoback{position:fixed;inset:0;background:rgba(22,18,14,.76);z-index:130;display:flex;align-items:center;justify-content:center;padding:20px}
.demobox{position:relative;width:min(880px,100%);background:#000;border-radius:16px;overflow:hidden}
.demobox video,.demobox iframe{width:100%;aspect-ratio:16/9;display:block;border:0}
.democlose{position:absolute;top:8px;right:12px;z-index:2;background:rgba(0,0,0,.5);border:none;color:#fff;
  font-size:26px;line-height:1;width:38px;height:38px;border-radius:19px;cursor:pointer}

/* ── coach tools: tables read as data, not as decoration ── */
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.45;font-weight:600;padding:12px 10px;border-bottom:1px solid var(--line);background:rgba(238,213,192,.28)}
td{padding:13px 10px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(255,255,255,.6)}

/* ── site footer ────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);background:var(--page);padding:44px 0}
.foot-in{max-width:1140px;margin:0 auto;padding:0 22px;display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:baseline}
.foot .brand{font-size:18px}
.foot p{max-width:34ch;font-size:13.5px;opacity:.6;margin-top:10px}
.foot a{font-size:13.5px;opacity:.75}
.footlinks{display:flex;gap:24px;flex-wrap:wrap}

/* programme shop cards */
.cardmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.cardtitle{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-size:23px;letter-spacing:-.3px;line-height:1.2;margin-bottom:6px}
.carddesc{font-size:14.5px;opacity:.7;margin-bottom:20px;text-wrap:pretty}

.cardmeta .muted+.muted::before{content:"·";opacity:.5;margin-right:8px}