/* Añejo — shared app styles (calculator, trainer portal, plan view) */
:root{
  --black:#0D0D0D; --forest:#071207; --green:#163414; --green-2:#1A3D2E; --green-dark:#0d2419;
  --gold:#C8BC6E; --gold-deep:#C08418; --gold-dark:#8B6B3E;
  --cream:#F5F2EC; --cream-2:#EAE5D8; --parchment:#E8E2CA;
  --ink:#1A1A1A; --muted:#6b6b6b; --bark:#1C0C06;
  --line:rgba(22,52,20,0.15);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Josefin Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  background:var(--cream); color:var(--ink); line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.serif{font-family:'Cormorant Garamond',Georgia,serif}
a{color:var(--gold-deep);text-decoration:none}
a:hover{text-decoration:underline}

/* Header / brand bar */
.brand{
  background:var(--black); border-bottom:1px solid rgba(200,188,110,.22);
  display:flex; align-items:center; gap:14px; padding:14px 22px; position:sticky; top:0; z-index:30;
}
.brand a.home{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand img.emblem{height:38px;width:auto;display:block}
.brand .wordmark{
  font-family:'Cormorant Garamond',Georgia,serif; font-weight:600; letter-spacing:6px;
  font-size:22px; color:var(--gold);
}
.brand .tagline{margin-left:auto;color:rgba(245,242,236,.65);font-size:12px;letter-spacing:2px;text-transform:uppercase}
@media(max-width:640px){.brand .tagline{display:none}}

/* Layout */
.container{max-width:1040px;margin:0 auto;padding:48px 22px 80px}
.container--narrow{max-width:680px}
.eyebrow{font-size:12px;letter-spacing:4px;text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin-bottom:14px}
h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(34px,6vw,58px);line-height:1.05;color:var(--green);letter-spacing:-.5px}
h2{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(26px,4vw,40px);color:var(--green);line-height:1.1}
h3{font-family:'Josefin Sans',sans-serif;font-weight:600;letter-spacing:1px;font-size:15px;text-transform:uppercase;color:var(--green);margin-bottom:6px}
.lede{font-size:18px;color:#3a3a3a;max-width:640px;margin-top:14px;line-height:1.65}

/* Cards / forms */
.card{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 22px;margin:18px 0;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.card h3{margin-bottom:14px}
.row{margin:14px 0}
.row:first-of-type{margin-top:0}
label{display:block;font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:6px;font-weight:500}
input,select,textarea{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);
  background:var(--cream);border:1px solid var(--line);border-radius:9px;padding:12px 13px;outline:none;
}
input:focus,select:focus,textarea:focus{border-color:var(--gold);background:#fff;box-shadow:0 0 0 3px rgba(200,188,110,.18)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.grid-2{grid-template-columns:1fr}}
.checkbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.checkbox-grid{grid-template-columns:1fr}}
.checkbox-grid label{display:flex;align-items:center;gap:9px;text-transform:none;letter-spacing:0;font-size:15px;color:var(--ink);background:var(--cream);border:1px solid var(--line);border-radius:9px;padding:11px 12px;cursor:pointer;margin:0}
.checkbox-grid input{width:auto}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:'Josefin Sans',sans-serif;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;font-size:13px;border:none;border-radius:999px;
  padding:15px 30px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn--gold{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#1c1606;box-shadow:0 8px 22px rgba(192,132,24,.28)}
.btn--ghost{background:transparent;color:var(--green);border:1.5px solid var(--green)}
.btn:disabled{opacity:.7;cursor:default;transform:none}
.btn--block{width:100%;justify-content:center}

/* Spinner / error */
.spinner{width:15px;height:15px;border:2px solid rgba(28,22,6,.35);border-top-color:#1c1606;border-radius:50%;display:inline-block;animation:spin .7s linear infinite;margin-right:4px}
@keyframes spin{to{transform:rotate(360deg)}}
.error{background:#fbecec;border:1px solid #e3b7b7;color:#8a2b2b;border-radius:10px;padding:13px 15px;margin:14px 0;font-size:15px}
.disclaimer{font-size:12.5px;color:var(--muted);margin-top:26px;line-height:1.6;max-width:680px}

/* Mode toggle pill (public vs trainer) */
.modebar{display:flex;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px;width:fit-content;margin:8px 0 4px}
.modebar a{font-size:12px;letter-spacing:1px;text-transform:uppercase;font-weight:600;color:var(--muted);padding:8px 16px;border-radius:999px}
.modebar a.active{background:var(--green);color:var(--cream)}
.modebar a:hover{text-decoration:none}

/* Plan view */
.plan-head{background:var(--black);color:var(--cream);border-radius:16px;padding:30px 26px;margin-bottom:8px;text-align:center}
.plan-head .emblem{height:64px;margin-bottom:12px}
.plan-head h1{color:var(--gold);font-size:clamp(28px,5vw,44px)}
.plan-head .sub{color:rgba(245,242,236,.78);margin-top:8px;font-size:15px}
.macros{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:18px 0}
@media(max-width:640px){.macros{grid-template-columns:repeat(2,1fr)}}
.macro{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center}
.macro .v{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:34px;color:var(--green);line-height:1}
.macro .k{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:6px}
.tierpill{display:inline-block;background:var(--green);color:var(--cream);border-radius:999px;padding:8px 18px;font-size:13px;letter-spacing:1px;margin:4px 0 6px}
.bowl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:14px}
.bowl{background:var(--green);color:var(--cream);border-radius:12px;padding:16px;text-align:center}
.bowl .name{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:22px;letter-spacing:2px;color:var(--gold)}
.bowl .count{font-size:26px;font-weight:600;margin:4px 0}
.bowl .count .x{color:var(--gold);font-size:16px}
.bowl .tagline{font-size:12px;color:rgba(245,242,236,.72)}
.notes{list-style:none;margin-top:8px}
.notes li{position:relative;padding-left:20px;margin:8px 0;font-size:15px;color:#333}
.notes li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--gold-deep)}
.backlink{display:inline-block;margin-top:8px;font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-deep)}