/* ============================================================
   Fit Assist by Parivartanam — premium wellness design system
   Palette drawn from the mark: a copper figure inside four petals.
   The four PILLARS are the brand accents, in mark order —
     saffron (nourishment) · red (heart) · green (movement) · purple (confidence)
   — over a warm off-white ground, with copper carrying the wordmark.
   Blue is no longer a brand colour; it survives only as a neutral
   category tint for charts and badges that already leaned on it.
   ============================================================ */
:root {
  --bg:        #FDF8F2;
  --bg-2:      #F5EDE2;
  --surface:   #FFFFFF;
  --surface-2: #F7F0E6;
  --ink:       #2E1A10;
  --ink-2:     #4A3527;
  --muted:     #7D6A58;
  --line:      rgba(46,26,16,.09);
  --line-2:    rgba(46,26,16,.06);

  /* copper — the figure at the centre, and the wordmark */
  --copper:    #B5764A;
  --copper-2:  #8E5330;
  --copper-soft:#F5E6D8;

  /* pillar 1 — saffron: nourishment */
  --saffron:   #DC7C12;
  --saffron-2: #B4620A;
  --saffron-soft:#FBEBD3;
  --amber:     #F4A644;

  /* pillar 3 — green: movement (and the primary UI colour) */
  --green:     #33702B;
  --green-2:   #24551F;
  --green-bright:#5E9040;
  --green-soft:#E9F0E2;

  /* pillar 2 — red: heart · pillar 4 — purple: confidence */
  --terra:     #C0402C;
  --terra-soft:#F9DFD6;
  --red:       #C3281F;
  --red-soft:  #F9DCD7;
  --purple:    #7E3583;
  --purple-soft:#F0E2F2;
  /* retired from the brand; kept so existing category tints still resolve */
  --blue:      #3A5F9E;
  --blue-soft: #E1E7F3;
  --cream:     #EDD9B8;

  --danger:    #D8382F;
  --ok:        var(--green);

  --radius:   22px;
  --radius-sm:15px;
  --radius-lg:28px;
  --shadow:   0 1px 3px rgba(58,40,24,.05), 0 8px 22px rgba(58,40,24,.06);
  --shadow-lg:0 12px 36px rgba(58,40,24,.13);
  --nav-h:    70px;
  --maxw:     1120px;

  --brand-grad: linear-gradient(140deg,#E7A47A 0%,#C2814F 46%,#8E5330 100%);
  --hero-grad:  radial-gradient(130% 130% at 18% 0%,#3E8433 0%,#33702B 48%,#204D1C 100%);
  --wordmark:   linear-gradient(96deg,#8E5330 0%,#C2814F 46%,#8E5330 100%);

  --font:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Fraunces", Georgia, "Times New Roman", serif;

  color-scheme: light;
}

/* ---------- dark mode (JS sets data-theme; "system" resolves to light/dark) ---------- */
:root[data-theme="dark"] {
    --bg:        #17120E;
    --bg-2:      #221B15;
    --surface:   #221B15;
    --surface-2: #2D241C;
    --ink:       #F4EADD;
    --ink-2:     #DCCEBC;
    --muted:     #B1A08C;
    --line:      rgba(255,255,255,.10);
    --line-2:    rgba(255,255,255,.06);

    --copper:    #D9A177;
    --copper-2:  #E7BC98;
    --copper-soft:rgba(217,161,119,.16);

    --saffron:   #F0A445;
    --saffron-2: #F6BC55;
    --saffron-soft:rgba(240,164,69,.16);
    --amber:     #F0A445;

    --green:     #57B24A;
    --green-2:   #74C866;
    --green-bright:#74C866;
    --green-soft:rgba(87,178,74,.16);

    --terra:     #E8836A;
    --terra-soft:rgba(192,64,44,.18);
    --red:       #EE6A5B;
    --red-soft:  rgba(195,40,31,.18);
    --purple:    #BC79C0;
    --purple-soft:rgba(126,53,131,.20);
    --blue:      #7E9DD8;
    --blue-soft: rgba(58,95,158,.22);

    --danger:    #EE6A5B;
    --shadow:    0 1px 3px rgba(0,0,0,.3), 0 10px 28px rgba(0,0,0,.35);
    --shadow-lg: 0 14px 40px rgba(0,0,0,.55);
    --brand-grad: linear-gradient(140deg,#EDB78F 0%,#C2814F 50%,#8E5330 100%);
    --hero-grad:  radial-gradient(130% 130% at 18% 0%,#3E8433 0%,#2C6526 52%,#16380F 100%);
    --wordmark:   linear-gradient(96deg,#D9A177 0%,#F0C69F 46%,#D9A177 100%);

    color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Prevent horizontal page jiggle WITHOUT turning the root into a scroll
   container. `overflow-x: hidden` on html/body forces overflow-y to compute
   to `auto`, which on iOS Safari freezes vertical touch-scrolling on any page
   that has horizontally-overflowing content to clip (e.g. the admin Users
   view's wide filter-tab strip). `overflow-x: clip` clips the same overflow
   but keeps overflow-y `visible`, so normal viewport scrolling is preserved.
   The `hidden` line is a fallback for browsers without `clip` support. */
html, body { margin: 0; padding: 0; overflow-x: hidden; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
h1,h2,h3,h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; color: var(--ink); font-family: var(--display); }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.28rem; }
h3 { font-size: 1.08rem; }
p { margin: 0; }
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-2); }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
:focus-visible { outline: 3px solid var(--green-bright); outline-offset: 2px; border-radius: 8px; }

/* ---------- layout ---------- */
.app { min-height: 100vh; min-height: 100dvh; }
.screen { max-width: var(--maxw); margin: 0 auto; padding: 18px 16px calc(var(--nav-h) + 28px); }
@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: 248px 1fr; }
  .screen { padding: 28px 34px 40px; }
}

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top)) 16px 14px; background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 900px){ .topbar { padding: 16px 34px; } }
.topbar .brand-mark { width: 34px; height: 34px; }
.brand-mark { display: block; flex: none; }
.topbar h1 { font-size: 1.15rem; }
.topbar .spacer { flex: 1; }

/* ---------- who is signed in ---------- */
/* Stacked under the route title so it costs no horizontal room: on a 360px
   phone there is nowhere to put a name beside three icon buttons, and mobile is
   exactly where the sidebar (the other place it appears) does not exist. */
.topbar-id { display: flex; flex-direction: column; justify-content: center; gap: 1px; min-width: 0; }
.topbar-id h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whoami { display: flex; align-items: baseline; gap: 5px; min-width: 0; line-height: 1.25; font-size: .74rem; font-weight: 700; color: var(--muted); }
.whoami .who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whoami .who-sep { opacity: .45; flex: none; }
.who-role { flex: none; white-space: nowrap; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- sidebar (desktop) / bottom nav (mobile) ---------- */
.sidebar { display: none; }
@media (min-width: 900px) {
  .sidebar {
    display: flex; flex-direction: column; gap: 4px;
    padding: 22px 16px; position: sticky; top: 0; height: 100vh;
    background: var(--surface); border-right: 1px solid var(--line);
  }
  .sidebar .logo { display: flex; align-items: center; gap: 10px; padding: 6px 10px 20px; }
  .sidebar .logo .brand-name { --bn: 1.04rem; }
  .sidebar a.nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: var(--ink-2); font-weight: 600; font-size: .94rem; }
  .sidebar a.nav-item svg { width: 20px; height: 20px; opacity: .8; }
  .sidebar a.nav-item:hover { background: var(--surface-2); }
  .sidebar a.nav-item.active { background: var(--green-soft); color: var(--green); }
  .sidebar a.nav-item.active svg { opacity: 1; }
  .sidebar .side-user {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 10px 12px; margin: -10px 0 14px; border-radius: 14px;
    background: var(--surface-2); border: 1px solid var(--line);
  }
  .sidebar .side-user:hover { border-color: var(--green); }
  .sidebar .side-user .su-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .sidebar .side-user .su-text b { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar .side-foot { margin-top: auto; }
}

.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: space-around; align-items: center;
  height: var(--nav-h); padding-bottom: env(safe-area-inset-bottom);
  background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
@media (min-width: 900px){ .bottomnav { display: none; } }
.bottomnav a { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--muted); font-size: .66rem; font-weight: 700; flex: 1; padding: 6px 0; transition: color .2s; }
.bottomnav a svg { width: 22px; height: 22px; transition: transform .25s; }
.bottomnav a.active { color: var(--green); }
.bottomnav a.active svg { transform: translateY(-1px) scale(1.08); }

/* ---------- cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
}
.card.pad-lg { padding: 22px; }
.card.tight { padding: 14px; }
.card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.card-h h3 { font-size: 1.02rem; }
.grid { display: grid; gap: 14px; }
.grid > *, .row > * { min-width: 0; }  /* responsive: never let a child force horizontal overflow */
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
/* Small screens: stack image tiles vertically (one per row) instead of a
   cramped 2-up row that clips on narrow phones. */
@media (max-width: 480px){ .grid.cols-2 { grid-template-columns: 1fr; } .grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 680px){ .grid.cols-4 { grid-template-columns: repeat(4,1fr);} .grid.auto { grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); } }
@media (min-width: 900px){ .grid.md-2 { grid-template-columns: 1.5fr 1fr; } .grid.md-3 { grid-template-columns: repeat(3,1fr);} }
.grid.auto { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px){ .grid.auto { grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); } }

.section-title { display: flex; align-items: center; justify-content: space-between; margin: 22px 2px 12px; }
.section-title h2 { font-size: 1.12rem; }
.hello { margin: 4px 2px 18px; }
.hello .greet { color: var(--muted); font-weight: 600; font-size: .9rem; }
.hello h1 { font-size: 1.7rem; margin-top: 2px; }

/* ---------- stat tiles ---------- */
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; box-shadow: var(--shadow); }
.stat .lbl { font-size: .72rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; display: flex; align-items: center; gap: 6px; }
.stat .val { font-size: 1.6rem; font-weight: 600; margin-top: 6px; letter-spacing: -.02em; font-family: var(--display); }
.stat .val small { font-size: .8rem; font-weight: 600; color: var(--muted); font-family: var(--font); }
.stat .sub { font-size: .76rem; color: var(--muted); margin-top: 2px; }
.stat.accent { background: var(--brand-grad); border: none; color: #fff; }
.stat.accent .lbl, .stat.accent .sub { color: rgba(255,255,255,.92); }
.stat.green { background: var(--hero-grad); border: none; color: #fff; }
.stat.green .lbl, .stat.green .sub { color: rgba(255,255,255,.88); }
.stat .icn { width: 16px; height: 16px; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer;
  font-weight: 700; font-size: .92rem; padding: 11px 18px; border-radius: 13px; transition: transform .05s, filter .15s, background .15s; }
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }
.btn.primary { background: var(--green); color: #fff; }
.btn.primary:hover { background: var(--green-2); }
.btn.green { background: var(--green); color: #fff; }
.btn.green:hover { background: var(--green-2); }
.btn.ghost { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--bg-2); }
.btn.soft { background: var(--copper-soft); color: var(--copper-2); }
.btn.block { width: 100%; }
.btn.sm { padding: 8px 13px; font-size: .84rem; border-radius: 11px; }
.btn.icon { padding: 9px; border-radius: 11px; }
.btn.danger { background: var(--terra-soft); color: var(--terra); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---- action-in-progress cue (double-submit guard, wired in app.js) ---- */
.is-busy { pointer-events: none; }
.is-busy::before {
  content: ''; width: 15px; height: 15px; flex: 0 0 auto; box-sizing: border-box;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  opacity: .9; animation: pari-spin .6s linear infinite;
}
@keyframes pari-spin { to { transform: rotate(360deg); } }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); cursor: pointer; }
.chip.active { background: var(--green); color: #fff; border-color: var(--green); }
.chip.on { background: var(--saffron-soft); color: var(--saffron-2); border-color: transparent; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .02em; }
.badge.green { background: var(--green-soft); color: var(--green-2); }
.badge.saffron { background: var(--saffron-soft); color: var(--saffron-2); }
.badge.red { background: var(--terra-soft); color: var(--terra); }
.badge.blue { background: var(--blue-soft); color: var(--blue); }
.badge.grey { background: var(--bg-2); color: var(--muted); }

/* ---------- forms ---------- */
/* The `hidden` attribute must win over any author display rule. Without this,
   `label.field { display:block }` out-specifies the UA's `[hidden]` and a
   field set hidden in markup or by script stays fully visible. */
[hidden] { display: none !important; }
label.field { display: block; margin-bottom: 12px; }
label.field > span { display: block; font-size: .8rem; font-weight: 700; color: var(--ink-2); margin-bottom: 6px; }
input, select, textarea {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--ink);
  padding: 11px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
input:focus, select:focus, textarea:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px var(--green-soft); }
textarea { resize: vertical; min-height: 78px; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }
.inline-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }

/* ---------- progress visuals ---------- */
.bar { height: 10px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--amber), var(--saffron)); transition: width .5s ease; }
.bar.green > span { background: linear-gradient(90deg, var(--green-bright), var(--green)); }
.bar.blue > span { background: linear-gradient(90deg, #6FA0BE, var(--blue)); }
.bar.copper > span { background: linear-gradient(90deg, #D49A72, var(--copper)); }
.bar.purple > span { background: linear-gradient(90deg, #A56BC4, var(--purple)); }
.macro-row { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 700; margin-bottom: 5px; }
.macro-row span:last-child { color: var(--muted); }

.ring-wrap { display: flex; align-items: center; gap: 16px; }
.ring { position: relative; width: 118px; height: 118px; flex: none; }
.ring .center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring .center b { font-size: 1.6rem; font-weight: 600; font-family: var(--display); }
.ring .center small { font-size: .68rem; color: var(--muted); font-weight: 700; text-transform: uppercase; }

/* ---------- avatars & lists ---------- */
.avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; flex: none; font-size: .95rem; }
.avatar.lg { width: 62px; height: 62px; font-size: 1.3rem; }
.avatar.sm { width: 34px; height: 34px; font-size: .8rem; }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line-2); }
.list-item:last-child { border-bottom: none; }
.list-item .grow { flex: 1; min-width: 0; }
.list-item .grow .t { font-weight: 700; font-size: .92rem; }
.list-item .grow .s { font-size: .8rem; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.tiny { font-size: .72rem; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tabs .tab { white-space: nowrap; padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: .86rem; color: var(--muted); cursor: pointer; background: var(--surface-2); border: 1px solid var(--line); }
.tabs .tab.active { background: var(--green); color: #fff; border-color: var(--green); }
.tabs .tab .pill-count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; font-size: .68rem; font-weight: 800; background: rgba(0,0,0,.08); }
.tabs .tab.active .pill-count { background: rgba(255,255,255,.22); }

/* ---------- user management ---------- */
.user-row .user-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.role-seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.role-seg.block { display: flex; }
.role-seg.block button { flex: 1; }
.role-seg button { border: none; background: none; cursor: pointer; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: .8rem; color: var(--muted); transition: background .15s, color .15s; }
.role-seg button.on { background: var(--green); color: #fff; box-shadow: var(--shadow); }
.role-seg button:not(.on):hover { color: var(--ink); }
.role-seg.locked { opacity: .7; }
.role-seg button[disabled] { cursor: default; }
@media (max-width: 560px) {
  .user-row { flex-wrap: wrap; }
  .user-row .user-actions { width: 100%; margin-top: 8px; justify-content: space-between; }
}

/* ---------- chat ---------- */
.chat { display: flex; flex-direction: column; gap: 8px; padding: 10px 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; }
.bubble { max-width: 78%; padding: 10px 14px; border-radius: 16px; font-size: .9rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; box-shadow: 0 1px 2px rgba(43,38,32,.06); }
.bubble.me { align-self: flex-end; background: var(--green); color: #fff; border-bottom-right-radius: 5px; }
.bubble.them { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.bubble .when { display: block; font-size: .64rem; opacity: .7; margin-top: 3px; }
.bubble.me .when { text-align: right; }
/* day separator between message groups */
.chat-day { display: flex; align-items: center; justify-content: center; margin: 4px 0 2px; }
.chat-day span { font-size: .64rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 3px 11px; }
/* "Broadcast" flag + sender name inside a bubble */
.chat-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .58rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; opacity: .85; margin-bottom: 4px; }
.bubble.them .chat-tag { color: var(--copper); }
.chat-who { display: block; font-size: .66rem; font-weight: 800; color: var(--copper); margin-bottom: 2px; }
.chat .empty { align-self: center; }

/* ---------- table ---------- */
table.data { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.data th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.data td { padding: 11px 10px; border-bottom: 1px solid var(--line-2); }
table.data tr:hover td { background: var(--surface-2); }

/* ---------- modal / sheet ---------- */
.overlay { position: fixed; inset: 0; background: rgba(43,38,32,.42); z-index: 60; display: flex; align-items: flex-end; justify-content: center; animation: fade .18s; }
@media (min-width: 700px){ .overlay { align-items: center; } }
.sheet { background: var(--surface); width: 100%; max-width: 520px; border-radius: 22px 22px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom)); max-height: 92vh; max-height: 92dvh; overflow-y: auto; animation: slideup .22s ease; }
@media (min-width: 700px){ .sheet { border-radius: 22px; } }
.sheet .sheet-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
@keyframes slideup { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------- toast ---------- */
.toast-wrap { position: fixed; bottom: calc(var(--nav-h) + 16px); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 80; pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 13px; font-weight: 600; font-size: .88rem; box-shadow: var(--shadow-lg); animation: slideup .2s; max-width: 90%; }
.toast.ok { background: var(--green); }
.toast.err { background: var(--danger); }

/* ---------- auth ---------- */
.auth-wrap { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 20px; position: relative; overflow: hidden;
  background: var(--hero-grad); }
/* soft light pooling so the large desktop field reads as depth, not flat paint */
.auth-wrap::before { content: ''; position: absolute; inset: -20%; pointer-events: none;
  background:
    radial-gradient(42% 46% at 22% 26%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(38% 42% at 82% 78%, rgba(198,124,58,.22), transparent 72%),
    radial-gradient(60% 60% at 50% 120%, rgba(0,0,0,.30), transparent 70%); }
.auth-wrap .auth-theme { position: fixed; top: calc(18px + env(safe-area-inset-top)); right: 18px; z-index: 5; color: #fff; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.28); backdrop-filter: blur(8px); }
.auth-wrap .auth-theme:hover { background: rgba(255,255,255,.24); }
.auth-shell { position: relative; z-index: 1; width: 100%; max-width: 420px; display: flex; justify-content: center; }
.auth-aside { display: none; }
.auth-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 26px;
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.12); }

/* desktop: two-column composition — brand story left, form right */
@media (min-width: 900px) {
  .auth-wrap { padding: 40px; }
  .auth-shell { max-width: 1000px; display: grid; grid-template-columns: 1fr 420px; align-items: center; gap: 72px; }
  .auth-aside { display: block; color: #fff; }
  /* the mark is a copper coin on an off-white plate: crop the plate away and
     ring the coin so it reads cleanly against the dark green field */
  /* The mark is transparent-backed and its petals run to the edge of the box, so
     it sits on the hero as artwork — no coin crop, no ring, nothing to clip a tip. */
  .auth-aside-mark { width: 96px; height: 96px; margin-bottom: 26px;
    filter: drop-shadow(0 14px 30px rgba(0,0,0,.45)); }
  .auth-aside-mark svg, .auth-aside-mark img { width: 100%; height: 100%; display: block;
    /* decorative mark (the h1 below carries the name) — never let alt text spill */
    font-size: 0; color: transparent; }
  .auth-aside h1 { font-family: var(--display); font-weight: 600; font-size: clamp(2.6rem, 3.6vw, 3.4rem); line-height: 1.04; letter-spacing: -.025em; margin: 0 0 10px;
    /* stated, not inherited: the base `h1 { color: var(--ink) }` matches the
       element directly and would otherwise put dark ink on the green hero. */
    color: #fff; }
  .auth-aside-by { margin: 0 0 20px; font-size: .8rem; font-weight: 700; letter-spacing: .26em;
    text-transform: uppercase; color: var(--amber, #F4A644); }
  .auth-aside-about { display: flex; align-items: baseline; gap: 10px; margin: 0 0 22px; font-size: .82rem; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.55); }
  .auth-aside-about span { font-size: 1.02rem; letter-spacing: 0; text-transform: none; color: var(--saffron, #e0a33c); font-family: var(--display); }
  .auth-aside-about em { font-style: normal; color: rgba(255,255,255,.82); }
  .auth-aside-tag { font-size: 1.06rem; line-height: 1.6; color: rgba(255,255,255,.78); max-width: 30ch; margin: 0 0 30px; text-wrap: pretty; }
  .auth-aside-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  .auth-aside-list li { position: relative; padding-left: 22px; font-size: .94rem; color: rgba(255,255,255,.68); }
  .auth-aside-list li::before { content: ''; position: absolute; left: 0; top: .52em; width: 7px; height: 7px; border-radius: 50%; background: var(--saffron, #e0a33c); }
  .auth-card { padding: 38px 34px; border-radius: 24px; }
  .auth-wrap .auth-card .brand { display: none; }
  .auth-wrap .auth-card .tag { font-size: 1.05rem; color: var(--ink); font-family: var(--display); font-weight: 600; margin-bottom: 24px; }
}
.auth-card .brand { display: flex; align-items: center; gap: 13px; margin-bottom: 8px; }
.auth-card .brand .brand-name { --bn: 1.34rem; }
.auth-card .tag { color: var(--muted); font-size: .9rem; margin-bottom: 22px; }
.role-toggle { display: flex; gap: 8px; margin-bottom: 18px; }
.role-toggle button { flex: 1; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); font-weight: 700; cursor: pointer; color: var(--ink-2); }
.role-toggle button.active { background: var(--green); color: #fff; border-color: var(--green); }
.demo-note { margin-top: 16px; font-size: .78rem; color: var(--muted); background: var(--surface-2); border: 1px dashed var(--line); border-radius: 12px; padding: 10px 12px; }
.link-btn { background: none; border: none; color: var(--green-2); font-weight: 700; cursor: pointer; padding: 0; font-size: .9rem; }
.auth-recover { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.auth-recover .link-btn { color: var(--copper-2); font-size: .85rem; }
.auth-recover .link-btn:hover { color: var(--copper); }
.auth-recover .auth-dot { color: var(--muted); font-size: .85rem; }
.auth-card .brand-mark { filter: drop-shadow(0 5px 14px rgba(120,70,35,.20)); }
.auth-site { text-align: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.auth-site a { color: var(--copper-2); font-weight: 700; font-size: .84rem; }
.auth-site a:hover { color: var(--copper); }
.pending-check { width: 64px; height: 64px; margin: 18px auto 6px; border-radius: 50%; background: var(--green); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; box-shadow: 0 6px 18px rgba(46,107,78,.35); animation: slideup .3s ease; }

/* ---------- the wordmark ----------------------------------------------------
   Set rather than drawn, so it stays selectable, scales with the type ramp and
   re-colours with the theme. Size comes from one custom property (--bn) so a
   caller sets the name size and the "by Parivartanam" line follows it. The flat
   copper is painted first and the gradient only layered on where background-clip
   is supported — without that fallback an unsupported browser shows nothing at
   all, the text being transparent. */
.brand-name { --bn: 1rem; display: flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1; }
.brand-name b {
  font-family: var(--display); font-weight: 600; font-size: var(--bn);
  text-transform: uppercase; letter-spacing: .15em; white-space: nowrap;
  color: var(--copper-2);
}
@supports (-webkit-background-clip: text) or (background-clip: text) {
  .brand-name b { background-image: var(--wordmark); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.brand-name i {
  font-style: normal; font-weight: 700; font-size: calc(var(--bn) * .5);
  text-transform: uppercase; letter-spacing: .2em; white-space: nowrap; color: var(--muted);
}

/* ---------- misc ---------- */
.empty { text-align: center; padding: 34px 18px; color: var(--muted); }
.empty svg { width: 40px; height: 40px; opacity: .4; margin-bottom: 10px; }
.pill-row { display: flex; gap: 8px; flex-wrap: wrap; }
.divider { height: 1px; background: var(--line-2); margin: 14px 0; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.center-col { display: flex; flex-direction: column; align-items: center; }
.notif-dot { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; background: var(--terra); border-radius: 50%; border: 2px solid var(--surface); }
/* unread-message count on a nav item (hidden until there is something to read) */
.nav-count { display: none; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--terra); color: #fff; font-size: .62rem; font-weight: 800; line-height: 1; align-items: center; justify-content: center; }
.nav-count.on { display: inline-flex; }
.sidebar a.nav-item .nav-count { margin-left: auto; }
.bottomnav a { position: relative; }
.bottomnav a .nav-count { position: absolute; top: 2px; left: 50%; margin-left: 4px; border: 2px solid var(--surface); }

/* ---------- activity timeline, laid out like the chat ---------- */
/* Same reading convention as a conversation: what YOU did sits on the right,
   what the MEMBER did sits on the left, newest first. */
.tl-chat { display: flex; flex-direction: column; gap: 10px; padding: 10px 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; }
.tl-bubble { display: flex; gap: 10px; align-items: flex-start; max-width: 84%; padding: 10px 12px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; text-align: left; transition: border-color .15s, transform .15s; }
.tl-bubble:hover { border-color: var(--green); transform: translateY(-1px); }
.tl-bubble.mine { align-self: flex-end; border-bottom-right-radius: 5px; }
.tl-bubble.theirs { align-self: flex-start; border-bottom-left-radius: 5px; }
.tl-ico { flex: 0 0 30px; width: 30px; height: 30px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; }
.tl-body { min-width: 0; }
.tl-t { font-weight: 700; font-size: .87rem; line-height: 1.3; }
.tl-s { font-size: .78rem; color: var(--ink-2); margin-top: 3px; overflow-wrap: anywhere; }
.tl-when { display: block; font-size: .64rem; color: var(--muted); margin-top: 5px; }
/* member name on a coach's all-members activity bubble */
.tl-who { display: block; font-size: .66rem; font-weight: 800; color: var(--copper); margin-bottom: 2px; }
@media (max-width: 520px) { .tl-bubble { max-width: 94%; } }
.iconbtn { position: relative; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 9px; cursor: pointer; display: inline-flex; }
.iconbtn svg { width: 20px; height: 20px; }
.skeleton { background: linear-gradient(90deg, var(--line-2), var(--surface-2), var(--line-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 12px; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.fab { position: fixed; right: 18px; bottom: calc(var(--nav-h) + 18px); z-index: 35; width: 56px; height: 56px; border-radius: 50%; background: var(--green); color: #fff; border: none; box-shadow: var(--shadow-lg); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fab svg { width: 26px; height: 26px; }
@media (min-width: 900px){ .fab { display: none; } }

/* Temporary-password display (admin reset) */
.temp-pw { display: flex; align-items: center; gap: 10px; justify-content: space-between; background: var(--surface-2, #f3ece0); border: 1px dashed var(--line, #d9cdb8); border-radius: 12px; padding: 12px 14px; }
.temp-pw code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; font-weight: 700; letter-spacing: .5px; color: var(--ink, #2a231b); word-break: break-all; }


/* --- Mood & energy quick-log pickers ------------------------------------- */
.mood-pick { display: flex; gap: 8px; }
.mood-opt { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 4px 9px; border-radius: var(--radius-sm); background: var(--surface-2);
  border: 1.5px solid var(--line); cursor: pointer; transition: transform .1s, background .15s, border-color .15s; }
.mood-opt .e { font-size: 1.7rem; line-height: 1; filter: grayscale(.4) opacity(.8); transition: filter .15s, transform .15s; }
.mood-opt .l { font-size: .7rem; font-weight: 700; color: var(--muted); }
.mood-opt:hover { border-color: var(--green-bright); }
.mood-opt:active { transform: scale(.95); }
.mood-opt.sel { background: var(--green-soft); border-color: var(--green); }
.mood-opt.sel .e { filter: none; transform: scale(1.14); }
.mood-opt.sel .l { color: var(--green-2); }

.energy-read { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.energy-read .ev { font-size: 2rem; font-weight: 800; line-height: 1; color: var(--saffron-2); }
.energy-read .emax { font-size: .85rem; font-weight: 700; color: var(--muted); }
.energy-read .eword { margin-left: auto; font-size: .78rem; font-weight: 700; color: var(--saffron-2);
  background: var(--saffron-soft); padding: 4px 12px; border-radius: 999px; }
.energy-range { -webkit-appearance: none; appearance: none; width: 100%; height: 12px; border-radius: 999px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, var(--saffron) var(--pct, 66%), var(--surface-2) var(--pct, 66%)); }
.energy-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; border: 4px solid var(--saffron); box-shadow: var(--shadow); cursor: pointer; }
.energy-range::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 4px solid var(--saffron); cursor: pointer; box-shadow: var(--shadow); }
.energy-scale { display: flex; justify-content: space-between; margin-top: 7px; font-size: .72rem; font-weight: 600; color: var(--muted); }

/* ---------- quantity stepper (water glasses, meal portions) ---------- */
/* Anything the member counts up must be able to count back down, so this is one
   shared control: minus, the number (tap it to type an exact amount), plus. */
.stepper { display: inline-flex; align-items: center; gap: 2px; background: var(--surface-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 13px; padding: 3px; }
.stepper.block { display: flex; width: 100%; justify-content: space-between; }
.stepper > button { background: none; border: none; font: inherit; color: inherit; cursor: pointer; border-radius: 10px;
  padding: 7px 10px; display: inline-flex; align-items: center; justify-content: center; }
.stepper > button:hover:not([disabled]) { background: var(--bg-2); }
.stepper > button[disabled] { opacity: .32; cursor: not-allowed; }
.stepper svg { width: 16px; height: 16px; }
.stepper .lead { display: inline-flex; align-items: center; padding-left: 7px; color: var(--muted); }
.stepper .val { min-width: 62px; text-align: center; font-weight: 800; font-size: .95rem; line-height: 1.1; padding: 5px 6px; }
.stepper .val small { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); margin-top: 1px; }
.stepper.sm .val { min-width: 46px; font-size: .86rem; }
.stepper.sm > button { padding: 6px 8px; }

/* Plate builder: the tray of items being logged as one meal. */
.tray { border: 1px dashed var(--line); border-radius: 14px; padding: 10px 12px; background: var(--surface-2); }
.tray .tray-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
.tray .tray-row + .tray-row { border-top: 1px solid var(--line-2, var(--line)); }
.tray .tray-row .grow { min-width: 0; }
.tray .tray-row .t { font-weight: 700; font-size: .9rem; }
.tray .tray-row .s { font-size: .74rem; color: var(--muted); }

/* Day navigator on the food log: ◀ Friday, 21 Aug ▶ */
.day-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.day-nav > div { flex: 1; }

/* Self-check chips (member Home). A ticked habit has to read as TICKED at a
   glance — the soft `.chip.on` wash was too close to the untouched state. */
.chip.ticked { background: var(--green); color: #fff; border-color: var(--green); }
.chip.ticked .tiny { color: rgba(255,255,255,.85); }

/* Coach: the member's self-check as a marker-by-day grid. One row per marker,
   one box per day, and a state you can name from across the room. */
.chk-grid { display: grid; gap: 4px; align-items: center; min-width: max-content; }
.chk-head { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.chk-head span { font-size: .58rem; font-weight: 800; color: var(--muted); letter-spacing: .04em; }
.chk-head b { font-size: .72rem; font-weight: 800; }
.chk-lbl { font-size: .78rem; font-weight: 700; padding-right: 10px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.chk-lbl.sub { font-weight: 800; color: var(--green-2); }
.chk-count { font-size: .72rem; font-weight: 800; padding-left: 8px; white-space: nowrap; }
.chk-count .muted { color: var(--muted); font-weight: 700; }
.chk-cell { width: 22px; height: 22px; border-radius: 7px; display: inline-flex;
  align-items: center; justify-content: center; box-sizing: border-box; }
.chk-cell svg { width: 13px; height: 13px; }
.chk-cell.on { background: var(--green); color: #fff; border: 1px solid var(--green); }
.chk-cell.auto { background: var(--green-soft); color: var(--green-2); border: 1px dashed var(--green); }
.chk-cell.off { background: var(--bg-2); border: 1px solid var(--line); }
.chk-cell.none { background: transparent; border: 1px dashed var(--line); }
.chk-legend { gap: 14px; flex-wrap: wrap; }
.chk-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--muted); font-weight: 700; }
.chk-legend i.chk-cell { width: 16px; height: 16px; border-radius: 5px; }
.chk-legend i.chk-cell svg { width: 10px; height: 10px; }

/* ---------------------------------------------------------------------------
   NOTICE BOARD (v1.80.0) — posters, their call-to-action buttons and the
   full-screen viewer. Used by the member's Home teaser, the Notice board
   screen, the coach's compose preview and history, and inside chat bubbles.
   Everything is drawn from the shared renderers in state.js.
--------------------------------------------------------------------------- */
.poster-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  overflow: hidden; box-shadow: 0 2px 10px rgba(43,38,32,.05); margin-bottom: 14px; }
.poster-card.pinned { border-color: var(--saffron); box-shadow: 0 2px 14px rgba(224,145,47,.18); }
.poster-media { display: block; width: 100%; padding: 0; border: none; cursor: zoom-in;
  background: var(--bg-2); overflow: hidden; }
.poster-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster-media.flat { border-radius: 12px; margin: 2px 0 8px; max-width: 260px; }
.poster-body { padding: 13px 15px 14px; }
.poster-head { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.poster-when { font-size: .7rem; color: var(--muted); font-weight: 700; margin-left: auto; }
.poster-caption { font-size: .92rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 11px; }
.poster-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 11px; }
.poster-cta .btn { flex: 1 1 auto; min-width: 132px; }
.poster-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border-top: 1px solid var(--line-2); padding-top: 10px; }
.poster-foot .grow { margin-left: auto; }
.poster-foot .btn.sm { padding: 6px 11px; font-size: .78rem; }

/* a poster inside a chat bubble — the bubble stops being a text pill */
.bubble.has-poster { max-width: 88%; padding: 8px 10px 10px; }
.bubble.has-poster .poster-cta { margin: 8px 0 2px; }
.bubble.has-poster .poster-cta .btn { min-width: 0; font-size: .78rem; padding: 6px 11px; }
.bubble .bubble-text { display: block; }

/* the coach's compose preview */
.poster-pick { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px dashed var(--line);
  border-radius: 14px; margin-bottom: 14px; background: var(--bg-2); }
.poster-pick img { width: 62px; height: 78px; object-fit: cover; border-radius: 9px; flex: none; }
.poster-pick .grow { min-width: 0; }
.poster-lib { display: flex; gap: 9px; overflow-x: auto; padding: 2px 0 8px; -webkit-overflow-scrolling: touch; }
.poster-lib button { flex: none; width: 58px; height: 74px; padding: 0; border-radius: 10px; overflow: hidden;
  border: 2px solid transparent; background: var(--bg-2); cursor: pointer; }
.poster-lib button.on { border-color: var(--green); }
.poster-lib img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-thumb { width: 42px; height: 54px; object-fit: cover; border-radius: 8px; flex: none; }

/* full-screen viewer */
.poster-viewer { position: fixed; inset: 0; z-index: 300; background: rgba(24,20,16,.94);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 18px; }
.poster-viewer img { max-width: 100%; max-height: 78vh; border-radius: 12px; object-fit: contain; }
.poster-viewer-cap { color: #fff; font-size: .88rem; text-align: center; max-width: 560px;
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.poster-close { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.16); color: #fff; cursor: pointer;
  display: grid; place-items: center; }

/* Home teaser */
.board-teaser { display: flex; gap: 13px; align-items: flex-start; }
.board-teaser .board-thumb { width: 68px; height: 86px; object-fit: cover; border-radius: 12px; flex: none;
  border: 1px solid var(--line); cursor: zoom-in; padding: 0; background: var(--bg-2); }
.board-teaser .board-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 11px; display: block; }