/* ============================================================
   90 DAY STRONG — "Ironbark / Forged"  (round 2 — hardcore pass)
   An H-PROJECT TECH product.
   Ember (movement) + Harper's leaf green #9BBB59 (fuel & recover)
   on near-black, green-tinted charcoal. Round 2 rules:
   - ink-dark wells, machined bright borders — plates, not pillows
   - weight-900 condensed numerals, tighter tracking: the number
     is the loudest thing in the room
   - glow lives where effort lives (day count, progress, done
     tiles, primary action); the chrome stays cold
   - grit: pure-CSS diagonal grain + one wide conic brush, <2%
     alpha — felt, not seen
   - warmth is NOT negotiable: comeback card, fuel green = fuel
     & recovery, the leaf full-stop signature, 44px+ targets
   Type: Barlow Condensed 600–900 (display) / Inter (body).
   All contrast pairs re-verified AA+ (see brand-notes.md).
   ============================================================ */

:root {
  /* neutrals — charred ironbark, rounds darker in R2 */
  --bg: #070805;
  --surface: #14170E;
  --surface-2: #1D2213;
  --well: #060703;             /* input wells, bar tracks — milled out */
  --border: #384029;           /* machined edge — brighter on darker ground */
  --hairline: rgba(244, 242, 230, .09);

  /* ink */
  --text: #F4F2E6;             /* warm bone white */
  --muted: #A9AE97;            /* sage grey */
  --dim: #7C826C;              /* metadata */

  /* MOVE — ember */
  --move: #F76B33;
  --move-top: #FF7A3A;
  --move-deep: #E5541E;
  --move-ink: #1A0800;
  --move-soft: rgba(247, 107, 51, .16);
  --move-glow: rgba(247, 107, 51, .5);

  /* FUEL & RECOVER — Harper's leaf, verbatim #9BBB59 */
  --fuel: #9BBB59;
  --fuel-top: #A6C464;
  --fuel-deep: #86A94A;
  --fuel-ink: #1B2408;
  --fuel-soft: rgba(155, 187, 89, .15);
  --fuel-glow: rgba(155, 187, 89, .42);

  /* achievement + alerts */
  --gold: #E9B44C;             /* brass — streaks, ranks, catch-up */
  --gold-soft: rgba(233, 180, 76, .12);
  --danger: #F0604F;

  /* geometry + type — sharper, heavier */
  color-scheme: dark;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-sm: 8px;
  --shadow-1: 0 1px 0 var(--hairline) inset, 0 12px 28px -18px rgba(0, 0, 0, .95);
  --font-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --font-body: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;
}

/* ---------- base ---------- */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  padding-bottom: calc(82px + env(safe-area-inset-bottom));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* first light — kept, but pulled tighter: the glow earns its spot */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(110% 240px at 50% -130px, rgba(247, 107, 51, .11), transparent 66%),
    radial-gradient(80% 200px at 50% -110px, rgba(233, 180, 76, .04), transparent 58%);
}
/* forged grit — diagonal micro-grain + one wide brushed sweep, pure CSS */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(135deg,
      rgba(244, 242, 230, .014) 0 1px, transparent 1px 4px),
    conic-gradient(from 200deg at 50% -10%,
      transparent 0deg, rgba(244, 242, 230, .018) 42deg,
      transparent 96deg, transparent 360deg);
}
#app {
  max-width: 560px;
  margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 24px;
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; color: inherit; }
::selection { background: var(--move); color: var(--move-ink); }
:where(button, [role="button"], input, select, textarea):focus-visible {
  outline: 2px solid var(--move);
  outline-offset: 2px;
}
input, select, textarea { font-family: inherit; }

/* global small print */
.sub { color: var(--muted); font-size: 13.5px; }
.card .sub { color: var(--muted); }

/* ---------- boot ---------- */
.boot { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.boot-mark {
  font-family: var(--font-display); font-weight: 900; font-size: clamp(40px, 13vw, 50px);
  letter-spacing: .02em; color: var(--move);
  text-shadow: 0 0 16px var(--move-glow), 0 0 52px rgba(247, 107, 51, .22);
  animation: breathe 2.4s ease-in-out infinite;
}
.boot-mark span { color: var(--text); padding: 0 6px; text-shadow: none; }
.boot-sub { color: var(--dim); font-size: 13px; letter-spacing: .08em; }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .66; } }

/* the leaf full-stop — Harper's quiet signature */
.boot-mark::after, .auth-mark::after, .wordmark::after {
  content: "";
  display: inline-block;
  width: .13em; height: .13em;
  margin-left: .12em;
  border-radius: .03em;
  background: var(--fuel);
  box-shadow: 0 0 12px var(--fuel-glow);
}

/* ---------- header ---------- */
.header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.wordmark {
  font-family: var(--font-display); font-weight: 900; font-size: 22px;
  letter-spacing: .045em; color: var(--move);
}
.wordmark span { color: var(--text); }
.avatar-btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  font-weight: 700; font-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(244, 242, 230, .05);
}

/* ---------- hero (Today) ---------- */
.hero { margin: 8px 0 20px; }
.hero .day-big {
  font-family: var(--font-display); font-weight: 900;
  font-size: 74px; line-height: .88; letter-spacing: -.015em;
}
.hero .day-big em {
  font-style: normal; color: var(--move);
  text-shadow: 0 0 16px var(--move-glow), 0 0 60px rgba(247, 107, 51, .25);
}
.hero .day-sub { color: var(--muted); font-size: 14px; margin-top: 7px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.streak-pill {
  background: var(--gold-soft);
  border: 1px solid rgba(233, 180, 76, .34);
  color: var(--gold);
  border-radius: 6px; padding: 3px 10px; font-size: 14px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display); letter-spacing: .05em;
}
/* the day breaking — the app's one gradient with a meaning */
.progressbar {
  height: 10px; border-radius: 3px; background: var(--well);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(244, 242, 230, .04);
  margin-top: 14px; overflow: hidden;
}
.progressbar > div {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--move-deep), var(--move-top) 55%, var(--gold));
  box-shadow: 0 0 16px var(--move-glow);
  transition: width .4s ease;
}

/* ---------- sections & tick tiles ---------- */
.section-label {
  font-family: var(--font-display); font-weight: 700; font-size: 12.5px;
  letter-spacing: .15em; color: var(--dim); margin: 22px 0 10px;
  line-height: 1.6; text-transform: uppercase;
}
.section-label b { color: var(--text); font-weight: 800; font-size: 15.5px; letter-spacing: .18em; margin-right: 2px; }
.section-label::after {
  content: ""; display: block; height: 1px; margin-top: 6px;
  background: var(--border);
}
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
  position: relative; border-radius: var(--radius);
  background: linear-gradient(180deg, #171B0F, var(--surface));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  padding: 14px 14px 12px; min-height: 96px; text-align: left;
  color: var(--text);
  transition: transform .06s ease;
  display: flex; flex-direction: column; justify-content: space-between; gap: 6px;
}
.tile:active { transform: scale(.96); }
.tile .t-name { font-weight: 700; font-size: 15.5px; line-height: 1.2; letter-spacing: .01em; padding-right: 30px; }
.tile .t-hint { color: var(--muted); font-size: 12px; }
.tile .t-check {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 8px;
  border: 2px solid var(--dim); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: transparent;
}
/* semantic whisper before completion: the plate already knows its team */
.tile.move .t-check { border-color: rgba(247, 107, 51, .55); }
.tile.fuel .t-check { border-color: rgba(155, 187, 89, .60); }

.tile.done { border-color: transparent; }
.tile.move.done {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 44%),
    linear-gradient(165deg, var(--move-top), var(--move-deep));
  color: var(--move-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 26px -10px var(--move-glow);
}
.tile.move.done .t-hint { color: var(--move-ink); opacity: .9; }
.tile.fuel.done {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 44%),
    linear-gradient(165deg, var(--fuel-top), var(--fuel-deep));
  color: var(--fuel-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 14px 26px -10px var(--fuel-glow);
}
.tile.fuel.done .t-hint { color: var(--fuel-ink); opacity: .9; }
.tile.done .t-check { border-color: transparent; }
.tile.move.done .t-check { background: var(--move-ink); color: var(--move-top); }
.tile.fuel.done .t-check { background: var(--fuel-ink); color: var(--fuel-top); }

/* week strip on Today */
.weekstrip {
  margin-top: 18px;
  background: linear-gradient(180deg, #171B0F, var(--surface));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  border-radius: var(--radius); padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.weekstrip .ws-items { display: flex; gap: 14px; font-size: 13px; color: var(--muted); flex-wrap: wrap; letter-spacing: .04em; }
.weekstrip .ws-items b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.weekstrip .ws-score {
  font-family: var(--font-display); font-weight: 900; font-size: 34px; line-height: 1;
  color: var(--move); text-shadow: 0 0 18px var(--move-glow);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

/* ---------- cards & lists ---------- */
.card {
  background: linear-gradient(180deg, #161A0E, var(--surface));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  border-radius: var(--radius); padding: 16px; margin-bottom: 12px;
}
.card h3 {
  margin: 0 0 10px; font-family: var(--font-display); font-weight: 800;
  font-size: 19px; letter-spacing: .07em; display: flex; align-items: center; gap: 9px;
  text-transform: uppercase;
}
.card h3::before {
  content: ""; flex: none; width: 5px; height: 16px; border-radius: 1.5px;
  background: linear-gradient(180deg, var(--move-top), var(--move-deep));
  transform: skewX(-12deg);
}

.bar-row { display: grid; grid-template-columns: 92px 1fr 46px; gap: 10px; align-items: center; margin: 9px 0; font-size: 14px; }
.bar-row .bar {
  height: 9px; background: var(--well); border-radius: 2px; overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(244, 242, 230, .04);
}
.bar-row .bar > div {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--move-deep), var(--move-top));
  transition: width .3s;
}
.bar-row .bar > div.full {
  background: linear-gradient(90deg, var(--fuel-deep), var(--fuel-top));
  box-shadow: 0 0 10px var(--fuel-glow);
}
.bar-row .num { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }

.weekrow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 4px; border-bottom: 1px solid var(--hairline); font-size: 14.5px;
}
.weekrow:last-child { border-bottom: none; }
.weekrow .w-label { font-weight: 600; }
.weekrow .w-dates { color: var(--dim); font-size: 12.5px; margin-left: 8px; }
.weekrow .w-score {
  font-weight: 900; font-family: var(--font-display); font-size: 21px;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.weekrow.future { opacity: .38; }
.weekrow.current .w-label::after {
  content: "NOW";
  color: var(--move); background: var(--move-soft);
  border-radius: 4px; padding: 2px 7px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
  margin-left: 8px; vertical-align: 2px;
}
.score-good { color: var(--fuel); }
.score-mid { color: var(--gold); }
.score-low { color: var(--muted); }

/* ---------- group ---------- */
.mate {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(180deg, #161A0E, var(--surface));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 10px;
}
/* avatar shape is global: crew rows, chat bubbles, RSVP chips
   — circles stay circles: faces are people, not plates */
.m-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: inset 0 0 0 1px rgba(244, 242, 230, .05);
}
.mate .m-avatar { width: 44px; height: 44px; }
.mate .m-info { flex: 1; min-width: 0; }
.mate .m-name { font-weight: 700; font-size: 15.5px; }
.mate .m-meta { color: var(--muted); font-size: 12.5px; display: flex; gap: 10px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.mate .m-ticks { display: flex; gap: 3px; margin-top: 7px; }
.mate .m-ticks i { width: 16px; height: 5px; border-radius: 1.5px; background: #20250F; }
.mate .m-ticks i.on-move { background: var(--move); box-shadow: 0 0 6px var(--move-glow); }
.mate .m-ticks i.on-fuel { background: var(--fuel); box-shadow: 0 0 6px var(--fuel-glow); }
.boost-btn {
  flex: none; border: 1px solid var(--border); border-radius: var(--radius-sm);
  min-width: 44px; min-height: 44px; padding: 8px 10px;
  background: var(--surface-2); font-size: 18px;
  transition: transform .08s;
}
.boost-btn:active { transform: scale(1.18); border-color: var(--move); }
.feed-item { display: flex; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--hairline); font-size: 14px; }
.feed-item:last-child { border-bottom: none; }
.feed-item .f-emoji { font-size: 18px; }
.feed-item .f-time { color: var(--dim); font-size: 12px; }
.feed-item .f-msg { color: var(--muted); margin-top: 2px; }
.invite-box {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--gold-soft);
  border: 1px dashed rgba(233, 180, 76, .4);
  border-radius: var(--radius-sm);
  padding: 10px 14px; margin-top: 10px; font-size: 14px;
}
.invite-box code {
  font-size: 19px; font-weight: 800; letter-spacing: .2em; color: var(--gold);
  font-family: var(--font-display);
}

/* ---------- segmented control ---------- */
.seg {
  display: flex; background: var(--well);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 4px;
  margin-bottom: 14px; gap: 4px;
}
.seg button {
  flex: 1; border: none; background: transparent; color: var(--muted);
  min-height: 44px; padding: 0; border-radius: 7px; font-weight: 600; font-size: 14px;
  transition: color .15s;
}
.seg button.active {
  background: linear-gradient(180deg, #242A16, var(--surface-2));
  color: var(--text);
  box-shadow: inset 0 1px 0 var(--hairline), 0 2px 8px rgba(0, 0, 0, .5);
  font-weight: 700;
}

/* ---------- board ---------- */
.rank-row { display: flex; align-items: center; gap: 12px; padding: 12px 8px; border-bottom: 1px solid var(--hairline); }
.rank-row:last-child { border-bottom: none; }
.rank-row .r-pos {
  font-family: var(--font-display); font-weight: 900; font-size: 21px; width: 26px;
  color: var(--dim); font-variant-numeric: tabular-nums;
}
.rank-row.top {
  background: linear-gradient(90deg, var(--gold-soft), transparent 72%);
  border-radius: 8px;
}
.rank-row.top .r-pos { color: var(--gold); text-shadow: 0 0 14px rgba(233, 180, 76, .45); }
.rank-row .r-name { flex: 1; font-weight: 600; min-width: 0; }
.r-you {
  color: var(--move); font-size: 10.5px; font-weight: 800; margin-left: 6px;
  letter-spacing: .1em; background: var(--move-soft); border-radius: 4px; padding: 2px 6px;
  vertical-align: 1px;
}
.rank-row .r-val {
  font-weight: 900; font-family: var(--font-display); font-size: 22px;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.rank-row .r-sub { color: var(--dim); font-size: 12px; text-align: right; }

/* ---------- forms ---------- */
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 6px;
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  font-family: var(--font-display);
}
.field input, .field select, .field textarea {
  width: 100%; background: var(--well); border: 2px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); padding: 12px 13px;
  font-size: 16px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.field input::placeholder, .test-row input::placeholder, .chat-inputrow input::placeholder { color: var(--dim); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--move);
  box-shadow: 0 0 0 3px var(--move-soft);
}
.btn {
  width: 100%; border: none; border-radius: var(--radius);
  min-height: 50px; padding: 13px 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 800; font-size: 18px; letter-spacing: .09em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--move-top), var(--move-deep));
  color: var(--move-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 10px 22px -10px var(--move-glow);
  transition: transform .06s ease, box-shadow .15s, filter .15s;
}
.btn:active { transform: translateY(1px); filter: brightness(.95); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.btn.secondary {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border);
  box-shadow: inset 0 1px 0 var(--hairline);
}
.btn.ghost { background: transparent; color: var(--muted); border: none; font-weight: 700; box-shadow: none; min-height: 44px; font-size: 15px; letter-spacing: .1em; }
.btn:disabled { opacity: .45; }
.btn + .btn { margin-top: 10px; }
.form-err { color: var(--danger); font-size: 13.5px; margin: 8px 0; min-height: 18px; }

/* ---------- auth ---------- */
.auth-wrap { min-height: 78vh; display: flex; flex-direction: column; justify-content: center; }
.auth-mark {
  font-family: var(--font-display); font-weight: 900; font-size: clamp(44px, 14.5vw, 58px);
  letter-spacing: .015em; text-align: center; color: var(--move); margin-bottom: 4px;
  text-shadow: 0 0 18px var(--move-glow), 0 0 64px rgba(247, 107, 51, .22);
}
.auth-mark span { color: var(--text); padding: 0 8px; text-shadow: none; }
.auth-tag {
  text-align: center; color: var(--muted); font-size: 12.5px;
  letter-spacing: .3em; margin-bottom: 30px; text-transform: uppercase;
}

/* ---------- tests table ---------- */
.test-row { display: grid; grid-template-columns: 1fr 86px 86px; gap: 8px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--hairline); }
.test-row:last-child { border-bottom: none; }
.test-row .tr-name { font-size: 14px; font-weight: 600; }
.test-row .tr-unit { color: var(--dim); font-size: 12px; display: block; font-weight: 400; }
.test-row input {
  width: 100%; background: var(--well); border: 2px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); padding: 10px; font-size: 15px; text-align: center;
  font-variant-numeric: tabular-nums;
  transition: border-color .15s, box-shadow .15s;
}
.test-row input:focus { outline: none; border-color: var(--move); box-shadow: 0 0 0 3px var(--move-soft); }
.test-head {
  display: grid; grid-template-columns: 1fr 86px 86px; gap: 8px;
  font-family: var(--font-display); text-transform: uppercase;
  font-size: 12px; letter-spacing: .16em; color: var(--dim); font-weight: 700; padding-bottom: 6px;
}
.test-head div:nth-child(n+2) { text-align: center; }

/* ---------- tab bar ---------- */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-around;
  background: rgba(5, 6, 3, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(244, 242, 230, .1);
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
}
.tab {
  flex: 1; max-width: 96px; background: none; border: none; color: var(--dim);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  position: relative; padding: 2px 0 0;
  transition: color .18s ease;
}
.tab svg { width: 22px; height: 22px; fill: currentColor; }
.tab::after {
  content: ""; position: absolute; top: -8px; left: 50%;
  width: 22px; height: 3px; border-radius: 0;
  background: var(--move);
  transform: translateX(-50%) scaleX(0);
  transition: transform .2s ease;
  box-shadow: 0 1px 8px var(--move-glow);
}
.tab.active { color: var(--move); }
.tab.active::after { transform: translateX(-50%) scaleX(1); }
/* R2 glow discipline: the chrome stays cold — no icon halo */
.tab.active svg { filter: none; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: linear-gradient(180deg, #242A16, var(--surface-2));
  border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius); padding: 12px 18px; font-size: 14px; font-weight: 600; z-index: 99;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .7); max-width: 86vw; text-align: center;
  animation: toast-in .28s cubic-bezier(.21, .9, .35, 1.2);
}
@keyframes toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------- countdown / notice ---------- */
.notice { text-align: center; padding: 34px 18px; }
.notice .n-big {
  font-family: var(--font-display); font-weight: 900; font-size: 46px;
  color: var(--move); letter-spacing: .01em;
  text-shadow: 0 0 18px var(--move-glow), 0 0 58px rgba(247, 107, 51, .22);
}
.notice p { color: var(--muted); }

/* ---------- chat ---------- */
.chat-card { padding: 10px; display: flex; flex-direction: column; }
.chat-scroll {
  max-height: 52vh; min-height: 220px; overflow-y: auto; padding: 6px 4px;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.chat-scroll::-webkit-scrollbar { width: 4px; }
.chat-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.msg { display: flex; gap: 8px; margin: 10px 0; align-items: flex-end; }
.msg.mine { flex-direction: row-reverse; }
.msg-avatar { width: 30px; height: 30px; font-size: 11px; flex: none; }
.msg-bubble {
  max-width: 76%;
  background: linear-gradient(180deg, #212715, var(--surface-2));
  border: 1px solid var(--hairline);
  border-radius: 14px 14px 14px 4px; padding: 9px 13px; font-size: 14.5px;
  overflow-wrap: anywhere;
  box-shadow: 0 4px 14px -8px rgba(0, 0, 0, .8);
}
.msg.mine .msg-bubble {
  background: linear-gradient(180deg, var(--move-top), var(--move-deep));
  color: var(--move-ink); border: none;
  border-radius: 14px 14px 4px 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 4px 14px -8px var(--move-glow);
}
.msg-name { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.msg-time { font-size: 10.5px; color: var(--dim); margin-top: 3px; }
.msg.mine .msg-time { color: var(--move-ink); opacity: .72; }
.chat-inputrow { display: flex; gap: 8px; margin-top: 8px; }
.chat-inputrow input {
  flex: 1; background: var(--well); border: 2px solid var(--border);
  border-radius: 12px; color: var(--text); padding: 12px 15px; font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
.chat-inputrow input:focus { outline: none; border-color: var(--move); box-shadow: 0 0 0 3px var(--move-soft); }
.chat-send { width: 48px; height: 48px; flex: none; border-radius: 50%; padding: 0; font-size: 17px; min-height: 48px; }

/* ---------- events ---------- */
.event-card { padding: 14px; }
.ev-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ev-title { font-weight: 700; font-size: 16px; }
.ev-del {
  background: none; border: none; color: var(--dim); font-size: 16px;
  width: 44px; height: 44px; margin: -12px -14px 0 0; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.ev-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ev-chips { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.chip { width: 30px; height: 30px; font-size: 11px; display: inline-flex; }
.ev-rsvp { display: flex; gap: 8px; }
.ev-btn { width: auto; min-height: 44px; padding: 9px 15px; font-size: 14px; margin: 0 !important; letter-spacing: .07em; }
.ev-btn.rsvp-in {
  background: linear-gradient(180deg, var(--fuel-top), var(--fuel-deep));
  color: var(--fuel-ink); border-color: transparent; font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 6px 14px -8px var(--fuel-glow);
}
.ev-btn.rsvp-out {
  background: rgba(240, 96, 79, .08); color: var(--danger);
  border-color: rgba(240, 96, 79, .5);
}

/* ---------- venture footer — H-PROJECT TECH nameplate ---------- */
/* microtype: condensed caps, tracked wide, hairline lead-in,
   leaf full-stop AFTER the name (the signature ends the statement) */
.hh-footer {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 26px 0 8px; color: var(--dim);
  font-family: var(--font-display);
  font-size: 10.5px; font-weight: 700; letter-spacing: .32em;
  text-transform: uppercase; text-align: center;
  text-indent: .32em; /* optically re-centre tracked caps */
}
.hh-footer::before {
  content: ""; width: 22px; height: 1px; flex: none;
  background: var(--border);
}
.hh-footer::after {
  content: ""; width: 6px; height: 6px; border-radius: 1.5px; flex: none;
  background: var(--fuel); box-shadow: 0 0 10px var(--fuel-glow);
}

/* ---------- wide screens ---------- */
@media (min-width: 600px) {
  .tiles { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .hero .day-big { font-size: 86px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   DAYLIGHT — the light counterpart (PRISM, R2.5)
   6am at the gym with the roller door up: warm paper and bone
   grounds, the same ember / leaf / brass species recalibrated
   to ink duty. The fire stays vivid where effort lives — the
   primary button, done tiles, my-bubble, progress bar keep the
   IDENTICAL hot stops as the dark theme, so the brand heat is
   theme-invariant; only the grounds and the text-duty accents
   shift. Every text-on-ground + accent-ink pair verified
   >=4.5:1 (wcag.py battery, 55 pairs, 2026-08-25).
   The app sets data-theme / data-daypart on <html>; this block
   only defines what they mean. Token NAMES unchanged.
   ============================================================ */
:root[data-theme="light"] {
  color-scheme: light;

  /* neutrals — bone paper, milled wells */
  --bg: #F2EDE2;
  --surface: #FAF7EF;
  --surface-2: #FFFDF6;
  --well: #E4DCCA;
  --border: #C3B99F;
  --hairline: rgba(32, 28, 14, .13);

  /* ink — charred ironbark on paper */
  --text: #201D12;
  --muted: #565A45;
  --dim: #63604A;

  /* MOVE — ember branded into the paper (text duty);
     top/deep/ink stops inherit unchanged = the fire itself */
  --move: #AC400E;
  --move-soft: rgba(172, 64, 14, .10);
  --move-glow: rgba(229, 84, 30, .25);

  /* FUEL & RECOVER — deep-shade leaf for ink duty;
     the verbatim Harper green ramp stays on every fuel surface */
  --fuel: #526B1E;
  --fuel-soft: rgba(82, 107, 30, .12);
  --fuel-glow: rgba(134, 169, 74, .32);

  /* achievement + alerts */
  --gold: #825E10;
  --gold-soft: rgba(201, 148, 42, .13);
  --danger: #BA3728;

  --shadow-1: 0 1px 0 rgba(255, 255, 255, .7) inset,
              0 10px 24px -18px rgba(70, 58, 30, .55);
}

/* ---------- light-ground touch-ups (hardcoded darks re-cut) ---------- */
/* first light through the roller door — warm wash at the top */
[data-theme="light"] body::before {
  background:
    radial-gradient(110% 240px at 50% -130px, rgba(229, 84, 30, .10), transparent 66%),
    radial-gradient(80% 200px at 50% -110px, rgba(201, 148, 42, .06), transparent 58%);
}
/* grit flips to ink on paper — still felt, not seen */
[data-theme="light"] body::after {
  background:
    repeating-linear-gradient(135deg,
      rgba(32, 28, 14, .03) 0 1px, transparent 1px 4px),
    conic-gradient(from 200deg at 50% -10%,
      transparent 0deg, rgba(32, 28, 14, .022) 42deg,
      transparent 96deg, transparent 360deg);
}
/* glow discipline on paper: heat marks shrink to a warm halo */
[data-theme="light"] .boot-mark,
[data-theme="light"] .auth-mark { text-shadow: 0 0 14px rgba(229, 84, 30, .22); }
[data-theme="light"] .hero .day-big em { text-shadow: 0 0 14px rgba(229, 84, 30, .25); }
[data-theme="light"] .weekstrip .ws-score { text-shadow: 0 0 12px rgba(229, 84, 30, .22); }
[data-theme="light"] .notice .n-big { text-shadow: 0 0 14px rgba(229, 84, 30, .22); }
[data-theme="light"] .rank-row.top .r-pos { text-shadow: 0 0 10px rgba(201, 148, 42, .4); }
/* plates: paper gradients instead of moss-dark ones */
[data-theme="light"] .tile,
[data-theme="light"] .weekstrip,
[data-theme="light"] .card,
[data-theme="light"] .mate { background: linear-gradient(180deg, #FFFDF6, var(--surface)); }
[data-theme="light"] .seg button.active {
  background: linear-gradient(180deg, #FFFEFA, var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 8px rgba(70, 58, 30, .18);
}
[data-theme="light"] .toast {
  background: linear-gradient(180deg, #FFFEFA, var(--surface-2));
  box-shadow: 0 12px 34px rgba(70, 58, 30, .3);
}
[data-theme="light"] .msg-bubble {
  background: linear-gradient(180deg, #FFFEF8, var(--surface-2));
  box-shadow: 0 4px 14px -8px rgba(70, 58, 30, .28);
}
/* wells recess with warm shade, not black */
[data-theme="light"] .progressbar,
[data-theme="light"] .bar-row .bar {
  box-shadow: inset 0 1px 2px rgba(70, 58, 30, .22), inset 0 0 0 1px rgba(32, 28, 14, .06);
}
/* people-circles: ink-hairline ring on paper */
[data-theme="light"] .avatar-btn,
[data-theme="light"] .m-avatar { box-shadow: inset 0 0 0 1px rgba(32, 28, 14, .06); }
/* the tab bar: bone glass */
[data-theme="light"] .tabbar {
  background: rgba(247, 243, 234, .92);
  border-top: 1px solid rgba(32, 28, 14, .12);
}
/* semantic whispers re-inked for paper */
[data-theme="light"] .tile.move .t-check { border-color: rgba(172, 64, 14, .8); }
[data-theme="light"] .tile.fuel .t-check { border-color: rgba(82, 107, 30, .85); }
[data-theme="light"] .mate .m-ticks i:not(.on-move):not(.on-fuel) { background: #DED6C1; }
[data-theme="light"] ::selection { background: var(--move-deep); }
/* brass + danger chrome on paper */
[data-theme="light"] .streak-pill { border-color: rgba(130, 94, 16, .4); }
[data-theme="light"] .invite-box { border-color: rgba(130, 94, 16, .45); }
[data-theme="light"] .ev-btn.rsvp-out {
  background: rgba(186, 55, 40, .07);
  border-color: rgba(186, 55, 40, .45);
}
/* features.css consumers whose base token went ink-duty:
   done plan-cells keep the vivid fire/leaf, ink stays legible */
[data-theme="light"] .plan-cell.done {
  background: linear-gradient(165deg, var(--move-top), var(--move-deep));
  color: var(--move-ink);
}
[data-theme="light"] .plan-cell.alt.done {
  background: linear-gradient(165deg, var(--fuel-top), var(--fuel-deep));
  color: var(--fuel-ink);
}
[data-theme="light"] .milestone {
  background: linear-gradient(90deg, var(--move-top), #E9B44C);
  color: #1A0800;
}

/* ---------- daypart nuance — accent temperature only ----------
   dawn: the paper takes first light, rose-gold wash.
   dusk: the paper warms toward amber, ember wash deepens.
   Subtle by contract; all ink pairs re-verified on both grounds. */
:root[data-theme="light"][data-daypart="dawn"] { --bg: #F3ECE7; }
[data-theme="light"][data-daypart="dawn"] body::before {
  background:
    radial-gradient(110% 240px at 50% -130px, rgba(216, 108, 84, .12), transparent 66%),
    radial-gradient(80% 200px at 50% -110px, rgba(201, 148, 42, .05), transparent 58%);
}
:root[data-theme="light"][data-daypart="dusk"] { --bg: #F1E9D8; }
[data-theme="light"][data-daypart="dusk"] body::before {
  background:
    radial-gradient(110% 240px at 50% -130px, rgba(229, 84, 30, .13), transparent 66%),
    radial-gradient(80% 200px at 50% -110px, rgba(201, 148, 42, .08), transparent 58%);
}
/* the forge at the edges of the day — a whisper, dark theme only */
[data-theme="dark"][data-daypart="dawn"] body::before {
  background:
    radial-gradient(110% 240px at 50% -130px, rgba(240, 118, 92, .10), transparent 66%),
    radial-gradient(80% 200px at 50% -110px, rgba(233, 180, 76, .04), transparent 58%);
}
[data-theme="dark"][data-daypart="dusk"] body::before {
  background:
    radial-gradient(110% 240px at 50% -130px, rgba(247, 107, 51, .13), transparent 66%),
    radial-gradient(80% 200px at 50% -110px, rgba(233, 180, 76, .06), transparent 58%);
}