/*
 * CoffeeDaddy app shell.
 *
 * Design tokens, the reset, and the page furniture every page shares:
 * <header>, the logo lockup, the sync pill and the stat chips.
 *
 * Loaded BEFORE each page's inline <style>, so anything a page wants to do
 * differently (its own main width, its own .btn padding) still wins without
 * needing !important. Anything genuinely page-specific stayed inline.
 *
 * theme.css loads last and owns the dark palette + motion, as before.
 */

:root{
    /* Direction B — Refined Parchment palette */
    --bg:#F7F0E4;            /* Linen — page bg */
    --bg-grad:#F0E8D8;       /* Oat — soft gradient end */
    --surface:#FFFDF7;       /* Cream — cards, modals, inputs */
    --surface-2:#F0E8D8;     /* Oat — raised chips, icon-btn bg */
    --ink:#2C1A0E;           /* Espresso Ink — primary text */
    --ink-soft:#7A5C38;      /* Walnut — muted text */
    --line:#E5D8C0;          /* Biscuit — borders, dividers */
    --espresso:#2C1A0E;      /* Espresso Ink — active pill bg */
    --caramel:#8B5E28;       /* Dark Roast — primary CTA */
    --caramel-dk:#6B4720;    /* deeper Dark Roast — gradient end */
    --gold:#C8882A;          /* Honey — stars, accents */
    --vanilla:#FFF3DC;       /* Vanilla — featured badge bg */
    --green:#4F8A4A;
    --red:#C0492F;
    --shadow:0 6px 22px rgba(44,26,14,.10);
    --shadow-sm:0 2px 8px rgba(44,26,14,.08);
    --radius:16px;
    --radius-btn:10px;       /* doc: button radius */
    --radius-icon:8px;       /* doc: icon button radius */
  }
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
    font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    color:var(--ink);
    /* No background-attachment:fixed — it forces a full repaint on every
       scroll frame (and iOS ignores it anyway). */
    background:linear-gradient(160deg,var(--bg) 0%,var(--bg-grad) 100%);
    min-height:100%;
    -webkit-font-smoothing:antialiased;
  }
a{color:var(--caramel-dk)}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:15px}
/* ---------- Header ---------- */
  header{
    background:linear-gradient(150deg,#F7F0E4 0%,#EDE3CE 100%);
    border-bottom:1px solid var(--line);
    padding:14px 20px;
    box-shadow:var(--shadow);
  }
.header-inner{max-width:1080px;margin:0 auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.logo-icon{
    height:42px;width:42px;flex:none;object-fit:contain;
    filter:drop-shadow(0 2px 5px rgba(58,36,26,.26));
  }
.logo-text{
    height:36px;width:auto;flex:none;
    filter:drop-shadow(0 1px 2px rgba(58,36,26,.16));
  }
.sync{
    display:flex;align-items:center;gap:7px;cursor:pointer;
    background:rgba(255,255,255,.65);border:1px solid var(--line);
    border-radius:999px;padding:8px 13px;color:var(--ink);font-size:12.5px;font-weight:600;
    box-shadow:var(--shadow-sm);transition:background .15s ease;
  }
.sync:hover{background:#fff}
.sync .dot{width:9px;height:9px;border-radius:50%;background:#a08f7d;flex:none}
.sync.loading .dot{background:#a08f7d}
.sync.synced .dot{background:#5fb85a}
.sync.saving .dot{background:#e0a52e}
.sync.error .dot{background:#e0664a}
.sync.offline .dot{background:#a08f7d}
.stats{display:flex;gap:10px}
.stat{
    background:rgba(255,255,255,.65);border:1px solid var(--line);
    border-radius:12px;padding:8px 14px;text-align:center;min-width:78px;box-shadow:var(--shadow-sm);
  }
.stat b{display:block;font-size:20px;line-height:1.1;color:var(--ink)}
.stat span{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-soft)}
/* ---------- Sync status popover (anchored to the sync pill) ---------- */
  .sync-wrap{position:relative;margin-left:auto}