/* MANDA Fit: white, with the MANDA Network's blue and gold (Mathew, 27 Oct 2026: "the same colors as the network, the blue and the gold, but I want white to be majority of the background. Not so heavy on the blue, but distinctive in it. And the gold around, like the thin edges"). Phone first.
   White page and cards, blue only for the action (buttons, links, the active tab, the meal times), gold for edges, labels and rules.
   Contrast (measured, WCAG): ink 13.6, muted 5.3, blue on white 8.6, gold text 5.0, ok 5.3, warn 5.4, bad 6.6. Input borders are the dark gold (3.96, the 3 to 1 a control edge needs). */
:root{color-scheme:light;
  --bg:#FFFFFF;--card:#FFFFFF;--soft:#F4F7FC;--tint:#EAF0FB;
  --line:#E4D5AE;--gold-rule:#C8A96E;--edge:#9E7A3A;
  --ink:#1C2D50;--muted:#5B6B90;
  --volt:#2A4A8A;--volt-ink:#FFFFFF;--navy:#1E3259;
  --gold:#8A6A2E;--gold-lt:#FBF4E6;
  --warn:#9A5B00;--bad:#B42318;--ok:#1B7A4B;
  --shadow:0 2px 14px rgba(14,26,54,.07)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
.app{min-height:100vh;display:flex;flex-direction:column}
.bar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top)) 16px 10px;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:2px solid var(--gold-rule)}
.bar-mark{border-radius:9px}
.bar-title{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.15}
.bar-title span{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:21px;letter-spacing:.4px;text-transform:uppercase;color:var(--navy)}
.bar-title small{color:var(--muted);font-size:12px}
.bar-btn{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:var(--card);display:grid;place-items:center;cursor:pointer;color:var(--volt)}
.bar-btn i{font-size:20px}
.bar-btn.spinning i{animation:spin 1s linear infinite}
.main{flex:1;width:100%;max-width:640px;margin:0 auto;padding:14px 16px calc(96px + env(safe-area-inset-bottom))}
.bottom{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:space-around;background:#FFFFFF;border-top:2px solid var(--gold-rule);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
.bt{flex:1;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:0;background:none;color:var(--muted);font-size:11px;cursor:pointer;border-radius:12px}
.bt i{font-size:22px}
.bt.on{color:var(--volt);background:var(--tint);font-weight:600}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px;margin:0 0 12px;box-shadow:var(--shadow)}
.card.warn{border-color:#D9A441}
.card.bad{border-color:#D9786C}
.card p{margin:6px 0}
.k{font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:14px;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);display:block}
.k.mt{margin-top:12px}
.muted{color:var(--muted)}
.small{font-size:12.5px}
h2{font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:26px;line-height:1.1;margin:8px 0 6px;color:var(--navy)}
h3{margin:4px 0;font-size:17px;color:var(--navy)}
.h{font-family:"Barlow Condensed",sans-serif;font-size:18px;letter-spacing:.8px;text-transform:uppercase;margin:18px 0 8px;color:var(--navy);padding-bottom:4px;border-bottom:1px solid var(--line)}
.about-short{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--muted);margin:0 0 12px;padding:10px 12px;border-radius:12px;background:var(--soft);border:1px dashed var(--gold-rule)}
.about-short i{color:var(--gold);font-size:16px;margin-top:1px}
.btn{min-height:44px;padding:10px 16px;border-radius:12px;border:1px solid var(--gold-rule);background:var(--card);color:var(--navy);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600}
.btn.small{min-height:44px;padding:8px 12px;font-size:13px}
.btn.volt{background:var(--volt);color:var(--volt-ink);border-color:var(--volt)}
.btn.wide{width:100%;margin:0 0 12px}
.btn[disabled]{opacity:.6;cursor:default}
.link{background:none;border:0;padding:0;color:var(--volt);text-decoration:underline;cursor:pointer;min-height:44px}
.link.danger{color:var(--bad);margin-top:8px}
.ci-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.pill{font-size:11.5px;padding:3px 9px;border-radius:999px;background:var(--soft);color:var(--muted);white-space:nowrap}
.pill.ok{background:#E7F5EC;color:var(--ok)}
.pill.warn{background:#FFF4E0;color:var(--warn)}
.pill.grey{background:var(--soft);color:var(--muted)}
.focus{display:flex;gap:10px;align-items:flex-start;background:var(--gold-lt);border:1px solid var(--gold-rule);border-radius:14px;padding:12px;margin:10px 0}
.focus i{font-size:22px;color:var(--gold)}
.focus p{margin:2px 0 0}
.sec{margin:10px 0}
.sec b{display:block;font-size:13px;color:var(--gold);letter-spacing:.4px}
.ml{list-style:none;padding:0;margin:4px 0}
.ml li{display:flex;gap:10px;padding:4px 0;border-bottom:1px solid var(--line)}
.ml li span{min-width:62px;color:var(--volt);font-weight:600}
.flags ul{margin:4px 0;padding-left:18px}
.refer{display:flex;gap:10px;align-items:flex-start;background:#FDECEA;border:1px solid #D9786C;border-radius:14px;padding:12px;margin-top:10px}
.refer i{font-size:22px;color:var(--bad)}
.refer p{margin:0}
.yours{background:var(--soft);border-radius:10px;padding:8px 10px}
textarea,input,select{width:100%;min-height:44px;background:#FFFFFF;border:1px solid var(--edge);border-radius:10px;padding:10px 12px;margin:6px 0 10px;color:var(--ink)}
textarea::placeholder,input::placeholder{color:var(--muted);opacity:1}
textarea:focus-visible,input:focus-visible,select:focus-visible,button:focus-visible,.link:focus-visible{outline:2px solid var(--volt);outline-offset:2px}
textarea{resize:vertical}
.plan-row{display:flex;gap:10px;align-items:center;padding:6px 0}
.plan-row i{color:var(--volt);font-size:19px}
.meals{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.meal{padding:6px 10px;border-radius:999px;background:var(--soft);border:1px solid var(--line);font-size:13px;font-weight:600}
.meal.next{background:var(--volt);color:var(--volt-ink);border-color:var(--volt)}
.bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-items:end;height:150px;margin:10px 0 4px}
.barcol{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:3px}
.barv{width:100%;min-height:3px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#2A4A8A,#6F8FD0);border-top:2px solid var(--gold-rule)}
.bn{font-weight:700;font-size:13px}
.bl{font-size:10.5px;color:var(--muted);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ex,.list,.study{list-style:none;padding:0;margin:6px 0 0}
.ex li,.list li{min-width:0;overflow-wrap:anywhere;display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ex li span{color:var(--muted);font-size:13px}
.study li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.study li i{font-size:20px;color:var(--muted)}
.study li i.ok{color:var(--ok)}
.study li div{display:flex;flex-direction:column}
.row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.row .sel{flex:1;min-width:120px}
.sel span,.fld span,.grid3 span{font-size:12.5px;color:var(--muted)}
.fld{display:block;margin-bottom:6px}
.fld select,.fld input{margin-bottom:2px}
.src{display:block;font-size:11.5px;margin-bottom:8px}
.src-default{color:var(--muted)}
.src-answer{color:var(--ok)}
.src-you{color:var(--muted)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cmp img,.noimg{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;background:var(--soft);border:1px solid var(--line);display:grid;place-items:center;color:var(--muted);font-size:13px}
.conn{display:flex;gap:12px;align-items:flex-start}
.conn>i{font-size:26px;color:var(--volt);margin-top:2px}
.conn>div{flex:1;min-width:0}
.loading{display:flex;gap:10px;align-items:center;color:var(--muted)}
.spin{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;display:inline-block;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:var(--navy);color:#FFFFFF;padding:10px 16px;border-radius:12px;border:1px solid var(--gold-rule);font-weight:600;font-size:14px;transition:.2s;max-width:calc(100% - 32px);z-index:20}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.ver{text-align:center}
@media (prefers-reduced-motion:reduce){.spin,.bar-btn.spinning i{animation:none}}
.ml li.next{color:var(--ink)}
.ml li em{font-style:normal;margin-left:6px}
.mrow{display:grid;grid-template-columns:96px 84px 1fr 44px;gap:6px;align-items:center}
.mrow input,.mrow select{margin:4px 0}
.icon-btn{width:44px;height:44px;border-radius:10px;border:1px solid var(--gold-rule);background:var(--card);color:var(--volt);display:grid;place-items:center;cursor:pointer}
@media (max-width:380px){.mrow{grid-template-columns:88px 76px 1fr 44px}}
.remind{display:flex;gap:12px;align-items:flex-start}
.remind>i{font-size:22px;color:var(--gold);margin-top:2px}
.rrow{border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin:8px 0}
.rtop{display:grid;grid-template-columns:auto 1fr 44px;gap:8px;align-items:center}
.rtop input{margin:0}
.sw{display:flex;gap:6px;align-items:center;min-height:44px}
.sw input,.day input{width:20px;height:20px;min-height:0;margin:0;accent-color:var(--volt)}
.r-text{margin:6px 0}
.days{display:flex;flex-wrap:wrap;gap:4px}
.day{display:flex;align-items:center;gap:4px;padding:6px 8px;border-radius:999px;background:var(--soft);border:1px solid var(--line);font-size:12.5px;min-height:36px}
.btn.mt{margin-top:10px}
.sub{display:block;font-size:13px;color:var(--ink);margin:12px 0 2px}
.tpl{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:10px 0}
.tpl .grid3 input{margin:4px 0 6px}

/* The sign-in screen is the shared MANDA number pad (manda-pin.js, used by the other apps). These rules sit under #gate, so they change
   MANDA Fit only: a white page, a white card with a gold edge, blue buttons, the same ink and gold as the rest of the app. */
#gate .mgate{background:#FFFFFF}
#gate .mgate-card{background:#FFFFFF;color:var(--ink);border:1px solid var(--gold-rule);box-shadow:0 12px 40px rgba(14,26,54,.10)}
#gate .mgate-kick{color:var(--gold)}
#gate .mgate-title{color:var(--navy)}
#gate .mgate-sub{color:var(--muted)}
#gate .mgate .mpin{--mpin-ink:var(--ink);--mpin-dot:var(--edge);--mpin-line:#C8A96E;--mpin-key:var(--soft);--mpin-key-on:#DCE6F7}
#gate .mgate-err{color:var(--bad)}
#gate .mgate-foot,#gate .mgate-foot a,#gate .mgate-link{color:var(--muted)}
#gate .mgate-device i{color:var(--gold)}
#gate .mgate-device .mgate-h{color:var(--navy)}
#gate .mgate-device p{color:var(--muted)}
#gate .mgate-btn{background:var(--volt);color:var(--volt-ink)}
.mpin-offer{background:#FFFFFF;color:var(--ink);border:1px solid var(--gold-rule);box-shadow:0 10px 40px rgba(14,26,54,.18)}
.mpin-offer-b button{border:1px solid var(--gold-rule);color:var(--navy)}
.mpin-offer-b button.go{background:var(--volt);color:var(--volt-ink);border-color:var(--volt)}
.mpin-offer .never{color:var(--muted);opacity:1}