/* ==========================================================================
   cal.css — Cal-AI design system for the in-app routes (scoped to body.cal-mode:
   dashboard, plans, calendar). Loaded AFTER ios.css so it fully REPLACES the
   Apple / iOS aesthetic on these routes. Auth & onboarding never get .cal-mode,
   so they are untouched. The .ios markup classes are kept (so the views still
   work) but every iOS visual is re-skinned to the new style here.
   ========================================================================== */

/* ---- surfaces & tokens : pure white, real hairlines, orange brand accent --- */
body.cal-mode {
  --surface-0: #FFFFFF;
  --surface-1: #FFF0F7;
  --surface-2: #FFF0F7;
  --surface-dim: #FFF0F7;
  --border: rgba(0,0,0,0.09);
  --border-strong: rgba(0,0,0,0.14);
  --ink: #1C1B1F; --fg-1: #1C1B1F; --fg-2: #6B6B72; --fg-3: #A7A7AE;
  --flame: #F39827; --flame-bg: #FCEFDD;     /* brand accent → orange, not iOS blue */
  background: #fff;
}
body.cal-mode, body.cal-mode #view { background: #fff !important; }
body.cal-mode .dmain:not(.dmain-grad), body.cal-mode .dside { background: #fff !important; }

/* ---- cards / grouped lists / stat tiles → clean white bordered cards ------- */
body.cal-mode .card,
body.cal-mode .ios-card,
body.cal-mode .ios-list,
body.cal-mode .ios-stat,
body.cal-mode .link-edit-card,
body.cal-mode .reset-fab {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 22px rgba(0,0,0,0.05);
}
body.cal-mode .chart-card { border-radius: 18px; }

/* dark hero (balance) stays dark — it's a brand block, not an Apple grey panel */
body.cal-mode .ios-hero { background: #15141A; border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.12); }

/* ---- list rows : transparent on the card, bolder labels, clean dividers ---- */
body.cal-mode .ios-row, body.cal-mode .ios-rrow { background: transparent; }
body.cal-mode .ios-row:not(.static):active,
body.cal-mode .ios-rrow:active { background: var(--surface-1); }
body.cal-mode .ios-row .tx b, body.cal-mode .ios-rb b { font-weight: 600; color: var(--fg-1); }
body.cal-mode .ios-row .val, body.cal-mode .ios-rv { color: var(--fg-2); }
body.cal-mode .ios-row + .ios-row::before,
body.cal-mode .ios-rrow + .ios-rrow::before { background: var(--border); height: 1px; transform: none; }
body.cal-mode .ios-rc, body.cal-mode .ios-row .chev { color: var(--fg-3); }

/* ---- stat tiles : Cal-AI typography ---------------------------------------- */
body.cal-mode .ios-stat .lab { color: var(--fg-2); }
body.cal-mode .ios-stat .lab svg { color: #F39827; }
body.cal-mode .ios-stat .val { color: var(--fg-1); }

/* ---- segmented control → bold Cal pill (not an iOS settings segment) -------- */
body.cal-mode .seg { background: var(--surface-1); padding: 4px; gap: 4px; border-radius: 999px; }
body.cal-mode .seg button { height: 40px; padding: 0 16px; border-radius: 999px; font: 600 14.5px/1 var(--font-sans); color: var(--fg-2); }
body.cal-mode .seg button.on { background: #fff; color: var(--fg-1); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* ---- titles & section labels → bold Cal-AI ---------------------------------- */
body.cal-mode .ios-title h1, body.cal-mode .ios-large-title h1 { font: 800 32px/1.05 var(--font-sans); letter-spacing: -0.03em; color: var(--fg-1); }
body.cal-mode .ios-section-label, body.cal-mode .ios-grouplabel { color: var(--fg-2); font-weight: 600; }

/* ---- buttons : bold, pill primary (consistent with the onboarding CTAs) ----- */
body.cal-mode .btn { border-radius: 14px; font-weight: 700; }
body.cal-mode .btn-lg, body.cal-mode .btn-block { border-radius: 999px; }
body.cal-mode .btn-primary { background: var(--tint); color: #fff; }
body.cal-mode .btn-outline { background: var(--surface-1); color: var(--fg-1); border: none; }
body.cal-mode .btn-outline:hover { background: var(--surface-2); }
body.cal-mode .btn-ghost { background: transparent; color: var(--fg-1); }

/* ---- fields → white, bordered, ink focus ring ------------------------------ */
body.cal-mode .field input,
body.cal-mode .field textarea,
body.cal-mode .field select {
  background: #fff; border: 1.5px solid var(--border-strong); border-radius: 14px; box-shadow: none; color: var(--fg-1);
}
body.cal-mode .field input:focus,
body.cal-mode .field textarea:focus,
body.cal-mode .field select:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(28,27,31,0.07); }
body.cal-mode .field > label { color: var(--fg-2); }

/* ---- chips / badges -------------------------------------------------------- */
body.cal-mode .chip { background: var(--surface-1); color: var(--fg-2); }

/* ---- modal : kill the iOS bottom-sheet + grabber → centered Cal card -------- */
body.cal-mode .scrim { align-items: center; padding: 24px; }
body.cal-mode .modal-card {
  border-radius: 24px; max-width: 420px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(0,0,0,0.22);
  transform: translateY(14px) scale(.98);
  padding: 28px 24px;
}
body.cal-mode .scrim.show .modal-card { transform: none; }
body.cal-mode .modal-card::before { display: none; }   /* remove the grabber handle */
body.cal-mode .modal-card h3 { font: 800 20px/1.25 var(--font-sans); letter-spacing: -0.01em; color: var(--fg-1); }
body.cal-mode .modal-card p { color: var(--fg-2); }

/* ---- toast → solid Cal pill (less frosted-iOS) ----------------------------- */
body.cal-mode .toast { background: #1C1B1F; border-radius: 16px; }