/* Makeover layer. Loaded after app.css: new palette, type, shapes and the
   floating tab bar. Floodlit-pitch dark (green-black ground, warm amber for the
   one thing to press), sentence case, big friendly numerals. */

:root {
  --deep:   #0D1310;   /* page */
  --slab:   #151C18;   /* cards */
  --raise:  #1F2823;   /* things you press */
  --line:   #2A352F;
  --sunken: #101714;   /* inputs */
  --chalk:  #EEF2EE;
  --mute:   #96A89C;
  --chrome: #F5B83D;   /* the app's one accent: amber, like a scoreboard */
  --good:   #5CCB8A;
  --warn:   #F5B83D;

  --strength: #A99BE0;
  --practice: #5CCB8A;
  --game:     #F0704A;
  --ball-mastery: #4FC3CF;
  --swim: #4FC3CF; --bike: #F5B83D; --run: #F0704A; --soccer: #5CCB8A;

  --radius: 16px;
  --tap: 48px;
  --shadow-card: none;
  --shadow-well: none;

  --t-title: 32px; --t-section: 20px; --t-card: 18px; --t-body: 16px; --t-meta: 13px;
  --t-stat: 34px; --t-figure: 18px;

  --sans: "Figtree", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Bricolage Grotesque", "Figtree", ui-sans-serif, system-ui, sans-serif;
  --cond: "Bricolage Grotesque", "Figtree", ui-sans-serif, system-ui, sans-serif;
}

body { font-size: 16px; line-height: 1.55; padding-bottom: calc(104px + env(safe-area-inset-bottom)); }

/* Sentence case everywhere. */
h1, h2, h3, .eyebrow, .tab, .btn, legend, label, .label, .sport-name, .stat .k, .sportgrid a {
  text-transform: none;
  letter-spacing: -0.01em;
  font-family: var(--cond);
  font-weight: 650;
}
.btn, label, legend { font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
h2 { font-size: 20px; }
.num, .stat .v { font-family: var(--cond); font-weight: 650; letter-spacing: -0.02em; }
.stat .k, .meta, .eyebrow { font-family: var(--sans); font-weight: 500; font-size: 13px; color: var(--mute); text-transform: none; letter-spacing: 0; }

/* --- Page header: plain, big title, date under it ------------------------- */
.topbar { background: none; border: 0; padding: calc(env(safe-area-inset-top) + 20px) 0 var(--s2); margin-bottom: var(--s2); }
.topbar::after { display: none; }
.topbar .row > div { display: flex; flex-direction: column-reverse; }
.topbar h1 { font-size: 34px; line-height: 1.05; letter-spacing: -0.03em; font-weight: 700; }
.topbar .eyebrow { margin: 4px 0 0; }
.surface-data .topbar { background: none; }

/* --- Cards: soft, no coloured edge ---------------------------------------- */
.card, .pane {
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 20px;
  background: var(--slab);
  box-shadow: none;
}
.card[data-sport] { border-left: 1px solid var(--line); box-shadow: inset 4px 0 0 0 var(--accent); }
.card.plain { box-shadow: none; }
.card-pad { padding: var(--s4); }
.pane { padding: var(--s4); margin-bottom: var(--s3); }
.pane-head { margin-bottom: var(--s3); }
.pane-head h2, .section-head h2 { font-size: 20px; }
.pane-head .meta a, a.meta { color: var(--mute); text-decoration: none; border-bottom: 1px solid var(--line); }

/* --- Buttons --------------------------------------------------------------- */
.btn { border-radius: 14px; min-height: 48px; background: var(--raise); border: 1px solid var(--line); font-size: 16px; }
.btn-primary, .btn-primary.btn-chrome {
  background: var(--chrome); color: #1B1304; border: 0; box-shadow: none;
  font-size: 17px; font-weight: 700; min-height: 54px; border-radius: 16px;
}
.btn-primary:active { filter: brightness(.92); box-shadow: none; }
.btn-danger { color: #FF8A66; }

/* --- Inputs ---------------------------------------------------------------- */
input[type="text"], input[type="number"], input[type="date"], input[type="time"],
input[type="password"], select, textarea {
  border-radius: 14px; background: var(--sunken); border: 1px solid var(--line);
  font-family: var(--sans); font-size: 16px; min-height: 52px; box-shadow: none;
}
input[inputmode="decimal"], input[inputmode="numeric"], input[type="date"], input[type="time"] { font-family: var(--cond); font-weight: 650; }
.chip { border-radius: 999px; }

/* --- Weigh-in ------------------------------------------------------------- */
.weightHead { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s1); }
.weightAvg { font-size: 56px; line-height: 1; letter-spacing: -0.04em; font-weight: 700; }
.weightAvg .unit { font-size: 18px; color: var(--mute); margin-left: 4px; font-weight: 500; letter-spacing: 0; }
.weightWhen { color: var(--mute); font-size: 15px; }
.weightNote { color: var(--mute); font-size: 15px; margin: 0 0 var(--s3); }
.weightForm { display: flex; gap: var(--s2); align-items: stretch; margin-top: var(--s3); }
.weightForm input { flex: 1; min-width: 0; font-size: 22px; text-align: left; padding: 0 var(--s4); }
.weightForm .btn { width: auto; flex: 0 0 auto; padding: 0 var(--s5); }
.weightFormWide { align-items: flex-end; flex-wrap: wrap; }
.weightFormWide .field { flex: 1 1 140px; margin: 0; }
.weightFormWide .field input { width: 100%; text-align: left; }
.weightFormWide .btn { min-height: 52px; }
.weighStats { gap: var(--s4); display: grid; grid-template-columns: repeat(3, 1fr); }
.weighStats .stat .v { font-size: 30px; }
.weighStats .sub { display: block; font-size: 12px; color: var(--mute); margin-top: 2px; }
@media (max-width: 420px) { .weighStats { grid-template-columns: 1fr; gap: var(--s3); } .weighStats .stat { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); } .weighStats .stat .k { order: 0; min-width: 96px; } }

.seg { display: inline-flex; background: var(--sunken); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg a { padding: 6px 12px; border-radius: 999px; color: var(--mute); text-decoration: none; font-size: 14px; font-weight: 600; }
.seg a[aria-current="true"] { background: var(--raise); color: var(--chalk); }

.wchart { width: 100%; height: auto; display: block; }
.wchart .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.wchart .line { fill: none; stroke: var(--chrome); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.wchart .dot { fill: var(--deep); stroke: var(--chrome); stroke-width: 2; }
.wchart text { fill: var(--mute); font-size: 11px; font-family: var(--sans); }

.wlist { list-style: none; margin: 0; padding: 0; }
.wrow { border-top: 1px solid var(--line); }
.wrow:first-child { border-top: 0; }
.wrow summary { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s3); align-items: center; min-height: 56px; cursor: pointer; list-style: none; }
.wrow summary::-webkit-details-marker { display: none; }
.wday { font-size: 16px; }
.wval { font-size: 20px; }
.wedit { color: var(--mute); font-size: 14px; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.wrow details[open] summary .wedit { color: var(--chrome); border-color: var(--chrome); }
.wdelete { margin: var(--s2) 0 var(--s3); }
.linkbtn { background: none; border: 0; color: var(--mute); font: inherit; font-size: 14px; text-decoration: underline; padding: var(--s2) 0; min-height: 44px; }

.linkcard { display: flex; align-items: center; justify-content: space-between; text-decoration: none; min-height: 56px; }
.linkcard .chev { font-size: 28px; color: var(--mute); line-height: 1; }

.addEx { margin: var(--s4) 0; }
.addEx label { display: block; margin-bottom: var(--s2); color: var(--mute); font-size: 14px; }
.addExRow { display: flex; gap: var(--s2); }
.addExRow input { flex: 1; min-width: 0; }

/* --- Flash / alerts -------------------------------------------------------- */
.flash { border-radius: 14px; background: var(--raise); border: 1px solid var(--line); border-left: 1px solid var(--line); }
.alert { border-radius: 18px; }

/* --- Phone: floating tab bar with icons ------------------------------------ */
.tabbar {
  left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
  border: 1px solid var(--line); border-radius: 26px; padding: 6px; padding-bottom: 6px;
  background: color-mix(in srgb, var(--slab) 92%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  grid-template-columns: repeat(6, 1fr); gap: 2px;
}
.tabbar::after { display: none; }
.tab { flex-direction: column; gap: 3px; min-height: 52px; border-radius: 20px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--mute); }
.tab svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab[aria-current="page"] { color: var(--chrome); background: color-mix(in srgb, var(--chrome) 14%, transparent); }
.tab[aria-current="page"]::before { display: none; }

/* --- Wide screens: top bar --------------------------------------------------- */
.topnav { background: color-mix(in srgb, var(--deep) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.topnav-brand { font-family: var(--cond); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; text-transform: none; }
.topnav-links a { border-radius: 999px; font-family: var(--sans); font-size: 15px; font-weight: 600; text-transform: none; letter-spacing: 0; padding: 8px 14px; }
.topnav-links a[aria-current="page"] { background: color-mix(in srgb, var(--chrome) 16%, transparent); color: var(--chrome); box-shadow: none; }
@media (min-width: 700px) { body { padding-bottom: var(--s6); } .topbar { padding-top: var(--s5); } }

.logoutFoot button, .logoutForm button { text-transform: none; font-family: var(--sans); letter-spacing: 0; }

.formactions { flex-wrap: wrap; }
.formactions .btn, .formactions form { flex: 1 1 auto; }
.formactions form .btn { width: 100%; }
.weighStats .stat { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s3); align-items: center; }
.weighStats .stat .k { grid-column: 1; grid-row: 1 / span 2; }
.weighStats .stat .v { grid-column: 2; grid-row: 1; text-align: right; }
.weighStats .stat .sub { grid-column: 2; grid-row: 2; text-align: right; margin: 0; }
@media (min-width: 560px) {
  .weighStats .stat { display: block; }
  .weighStats .stat .v, .weighStats .stat .sub { text-align: left; }
}
th { text-transform: none !important; letter-spacing: 0 !important; font-family: var(--sans); font-weight: 600; font-size: 13px; }
.diag { margin: var(--s6) 0 var(--s4); color: var(--mute); }
.diag > summary { cursor: pointer; font-size: 14px; padding: var(--s3) 0; min-height: 44px; }
.empty::after { display: none; }
.chip, .quickBtn, .chip * { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-weight: 600; }
.pane > .empty { border: 0; background: none; padding: 0; box-shadow: none; }

summary { text-transform: none; letter-spacing: 0; }
.accordion summary, details > summary { font-family: var(--cond); font-weight: 650; }

/* login */
.loginPage::before { background: radial-gradient(60% 40% at 50% 0%, rgba(245,184,61,.10), transparent 70%); }
.loginPage h1 { font-size: 36px; letter-spacing: -0.03em; font-weight: 700; }
.loginMark span:nth-child(1) { background: var(--chrome); }
.loginMark span:nth-child(2) { background: var(--good); }
.loginMark span:nth-child(3) { background: var(--game); }
.loginMark span:nth-child(4) { background: var(--strength); }
.loginPage input { text-align: left; }
.loginPage label { font-size: 14px; }

/* shopping: one clear button per item, the rest under "More" */
.shopItem { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--s3); row-gap: var(--s2); padding: var(--s3) 0; }
.shopItem-name { grid-column: 1; grid-row: 1; font-size: 17px; }
.shopItem-actions { display: contents; }
.shopItem-actions > form:first-child { grid-column: 2; grid-row: 1; }
.shopItem-actions .btn { min-height: 44px; font-size: 15px; }
.shopItem-actions > form:first-child .btn { padding: 0 var(--s4); }
.shopMore { grid-column: 1 / -1; grid-row: 2; }
.shopMore > summary { cursor: pointer; color: var(--mute); font-family: var(--sans); font-weight: 500; font-size: 14px; list-style: none; min-height: 36px; display: inline-flex; align-items: center; }
.shopMore > summary::-webkit-details-marker { display: none; }
.shopMore > summary::after { content: " ›"; margin-left: 4px; }
.shopMore[open] > summary::after { content: " ‹"; }
.shopMoreBody { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s2) 0; align-items: center; }
.shopMoreBody form { display: flex; gap: var(--s1); }
.shopItem + .shopItem { border-top: 1px solid var(--line); }
.shopItem.is-priority { padding: var(--s3) var(--s3); }
.shopItem.is-priority .shopItem-actions { display: flex; gap: var(--s2); grid-column: 2; grid-row: 1; }
.shopItem.is-priority .shopItem-actions .btn { min-height: 44px; }
.bar-label, .dayrow .dow, .ghost-label, .fuelbar-note, .source-label, .src, .est, .stage, .doneSport, .pbTitle,
.pbEditBody > summary, .pbAdd > summary, .meal-tag, .parkedTag, .builtTag, .subscribeTag, .shopHaveIt > summary,
.setchip .pr, .dayTable thead th, .dayTable tbody th, .session-confirm p { text-transform: none; letter-spacing: 0; }
.pbTitle { font-size: 18px; font-family: var(--cond); font-weight: 650; }
.wchart { max-width: 640px; margin: 0 auto; }