:root{
  --water:#18606b; --water-dark:#0f444c; --cedar:#bd743a;
  --loaded:#3f7d4f; --paper:#eef2f1; --surface:#ffffff;
  --ink:#1d2c30; --muted:#67797c; --hair:#d8e0de; --hair-soft:#e7ecea;
  --shadow:0 1px 2px rgba(20,50,55,.05), 0 8px 24px rgba(20,50,55,.06);
  --radius:14px; --tap:44px;
}
*{box-sizing:border-box}
/* Make the hidden attribute authoritative: class display rules (e.g. .empty-state,
   .menu button) would otherwise override the attribute's default display:none. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased;
}
.serif{font-family:Georgia,"Times New Roman",serif}

/* header */
header{position:sticky; top:0; z-index:30; background:var(--water); color:#eaf4f3;
  padding:max(env(safe-area-inset-top),10px) 16px 0; box-shadow:0 2px 10px rgba(15,68,76,.18)}
.bar-top{display:flex; align-items:center; gap:10px; padding-bottom:8px}
.brand{display:flex; align-items:baseline; gap:8px; min-width:0; flex:1; overflow:hidden}
.brand h1{font-family:Georgia,serif; font-weight:600; font-size:19px; margin:0; white-space:nowrap;
  min-width:0; overflow:hidden; text-overflow:ellipsis}
.brand .mark{font-size:17px; opacity:.85}
.conn{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#cfe7e4; white-space:nowrap}
.conn .dot{width:8px; height:8px; border-radius:50%; background:#9fc3bf; transition:background .2s}
.conn.online .dot{background:#7fd6a0}
.conn.syncing .dot{background:#e7c46a; animation:pulse 1s infinite}
.conn.offline .dot{background:var(--cedar); animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.35}}
/* Phones need that width for the title: the steady "Up to date" label collapses
   to its green dot. Anything worth reading (syncing/offline, always with a count)
   keeps its words. */
@media(max-width:480px){ .conn.online #connText{display:none} }
.icon-btn{height:36px; min-width:36px; padding:0 10px; border-radius:9px; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.22);
  font-size:14px; font-weight:600; display:inline-flex; align-items:center; gap:6px; font-family:inherit}
.icon-btn:hover{background:rgba(255,255,255,.2)}
.icon-btn.on{background:#fff; color:var(--water-dark); border-color:#fff}
.menu-wrap{position:relative}
.menu{position:absolute; right:0; top:44px; background:var(--surface); color:var(--ink);
  border:1px solid var(--hair); border-radius:12px; box-shadow:var(--shadow); min-width:220px;
  padding:6px; display:none; z-index:40}
.menu.open{display:block}
.menu button{display:flex; width:100%; align-items:center; gap:10px; text-align:left; background:none;
  border:0; padding:11px 12px; border-radius:8px; cursor:pointer; font-size:14px; color:var(--ink); font-family:inherit}
.menu button:hover{background:var(--hair-soft)}
.menu button .em{margin-left:auto; opacity:.7}
.menu .sep{height:1px; background:var(--hair); margin:5px 4px}

.bar-dates{display:flex; align-items:center; gap:10px; padding-bottom:10px; flex-wrap:wrap}
.datefield{font-size:12px; color:#cfe7e4; display:inline-flex; align-items:center; gap:6px}
.datefield input{font-family:inherit; font-size:14px; border-radius:8px; border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.14); color:#fff; padding:6px 8px; min-height:34px}
.trip-range{font-family:Georgia,serif; font-size:15px; color:#fff}
.presence{margin-left:auto; font-size:12px; color:#cfe7e4}

nav{display:flex; gap:2px; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
nav::-webkit-scrollbar{display:none}
.tab{appearance:none; background:none; border:0; cursor:pointer; white-space:nowrap;
  color:rgba(255,255,255,.72); font-family:inherit; font-size:14px; font-weight:600;
  padding:12px 14px 13px; border-bottom:3px solid transparent}
.tab .tab-em{margin-right:7px}
.tab[aria-selected="true"]{color:#fff; border-bottom-color:var(--cedar)}
.tab .count{font-size:11px; background:rgba(255,255,255,.18); padding:1px 7px; border-radius:20px; margin-left:7px; font-weight:600}

/* banner */
.banner{background:#fdf6ee; border-bottom:1px solid #ecd9c2; color:#7a4d20; padding:10px 16px;
  font-size:14px; text-align:center}
.banner .link{background:none; border:0; color:var(--water-dark); font-weight:700; cursor:pointer; font-family:inherit; font-size:14px; text-decoration:underline}

/* layout */
main{max-width:1080px; margin:0 auto; padding:18px 16px 90px}
.panel{display:none}
.panel.active{display:block}
.lead{color:var(--muted); font-size:14px; margin:2px 2px 18px}

.card{background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius);
  box-shadow:var(--shadow); margin-bottom:18px; overflow:hidden}
.card-head{display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--hair-soft)}
.card-head h2{font-family:Georgia,serif; font-size:18px; font-weight:600; margin:0; flex:1; min-width:0}
.progress{font-size:12px; color:var(--muted); white-space:nowrap; display:inline-flex; align-items:center; gap:8px}
.meter{width:54px; height:6px; border-radius:6px; background:var(--hair); overflow:hidden}
.meter > i{display:block; height:100%; background:var(--loaded); width:0; transition:width .25s ease}
.ghost{appearance:none; border:1px solid var(--hair); background:var(--surface); color:var(--water-dark);
  border-radius:8px; padding:8px 12px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit}
.ghost:hover{background:var(--hair-soft)}
.ghost.primary{background:var(--water); color:#fff; border-color:var(--water)}
.ghost.danger{color:#a8392f}

.list{padding:6px}
.cols{column-gap:6px}
@media(min-width:640px){ .cols.c2{column-count:2} }
@media(min-width:980px){ .cols.c2{column-count:3} }

/* food group boundaries (docs/02 §2.4) */
.group-start{break-inside:avoid}
.group-label{padding:10px 10px 2px; font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted)}

/* generic row */
.item{display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:10px; break-inside:avoid}
.item:hover{background:var(--hair-soft)}
.item .label{flex:1; min-width:0; font-size:15px}
.item.done .label{color:var(--muted); text-decoration:line-through; text-decoration-color:var(--hair)}
.item.plain{gap:8px}
.item .bullet{color:var(--cedar)}
.label-input{flex:1; min-width:0; font-family:inherit; font-size:15px; color:var(--ink);
  border:1px solid var(--hair); border-radius:8px; padding:6px 9px; background:#fff}
.del{flex:none; width:30px; height:30px; border-radius:8px; border:1px solid var(--hair);
  background:#fff; color:#a8392f; cursor:pointer; font-size:17px; line-height:1; display:none}
body.editing .del{display:inline-flex; align-items:center; justify-content:center}

/* single round check */
.check{flex:none; width:26px; height:26px; border-radius:50%; border:2px solid var(--hair);
  background:#fff; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; color:#fff}
.check svg{width:14px; height:14px; opacity:0; transform:scale(.5); transition:opacity .12s, transform .12s}
.check.on{background:var(--loaded); border-color:var(--loaded)}
.check.on svg{opacity:1; transform:scale(1)}

/* double-check track */
.track{flex:none; display:inline-flex; border:1px solid var(--hair); border-radius:10px; overflow:hidden; background:#fbfcfc}
.step{appearance:none; border:0; background:none; cursor:pointer; font-family:inherit;
  width:52px; height:38px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; color:var(--muted)}
.step + .step{border-left:1px solid var(--hair)}
.step .s-lab{font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; font-weight:700}
.step .s-dot{width:14px; height:14px; border-radius:50%; border:2px solid var(--hair); background:#fff;
  display:flex; align-items:center; justify-content:center}
.step .s-dot svg{width:9px; height:9px; opacity:0; color:#fff}
.step.on{color:var(--water-dark)}
.step.on .s-dot{background:var(--water); border-color:var(--water)}
.step.on .s-dot svg{opacity:1}
.item.full .step.on .s-dot{background:var(--loaded); border-color:var(--loaded)}
.item.full .step.on{color:var(--loaded)}
.item.full .track{border-color:var(--loaded)}
@media(max-width:380px){ .step{width:46px} }

/* acquire cart (quiet on packing lists, prominent on inventory) */
.cart{flex:none; width:34px; height:34px; border-radius:8px; border:1px solid var(--hair);
  background:#fff; cursor:pointer; font-size:15px}
.cart.quiet{opacity:.28; border-color:transparent; background:transparent}
.cart.quiet:hover{opacity:.7}
.cart.on{opacity:1; background:#fdf3e8; border-color:var(--cedar)}

/* storage tri-state */
.store{flex:none; width:34px; height:34px; border-radius:8px; border:1px solid var(--hair);
  background:#fff; cursor:pointer; font-size:15px; color:var(--muted)}
.store.store-normal{opacity:.32}
.store.store-cold{background:#eef6fb; border-color:#9fc4dd; opacity:1}
.store.store-frozen{background:#e9f1fb; border-color:#7ea6d8; opacity:1}

/* inventory */
.inv{display:flex; align-items:center; gap:11px; padding:7px 10px; border-radius:10px; break-inside:avoid}
.inv:hover{background:var(--hair-soft)}
.inv .qty{flex:none; width:48px; height:34px; text-align:center; font-family:inherit; font-size:15px; font-weight:600;
  border:1px solid var(--hair); border-radius:8px; background:#fff; color:var(--ink)}
.inv .label{flex:1; min-width:0; font-size:15px}
.inv.buy{background:#fdf6ee}

/* add row */
.add{display:flex; gap:8px; padding:8px 10px 4px}
.add input{flex:1; font-family:inherit; font-size:14px; padding:10px 11px; border:1px dashed var(--hair);
  border-radius:9px; background:#fbfcfc}
.add .ghost{flex:none}
.add-wrap{display:none}
body.editing .add-wrap, .add-wrap.always{display:block}
.empty{padding:16px; color:var(--muted); font-size:14px; text-align:center; font-style:italic}

/* meals */
.meals{width:100%; border-collapse:collapse}
.meals th, .meals td{border:1px solid var(--hair-soft); vertical-align:top; padding:0}
.meals thead th{background:var(--water); color:#eaf4f3; font-family:Georgia,serif; font-weight:600; font-size:14px; padding:9px 12px; text-align:left}
.meals thead th:first-child{width:96px}
.meals .day{font-family:Georgia,serif; font-weight:600; font-size:14px; padding:10px 12px; background:#f6f9f8; white-space:nowrap}
.meals .cell textarea{width:100%; min-height:46px; border:0; resize:none; overflow:hidden; display:block;
  font-family:inherit; font-size:14px; padding:10px 12px; background:transparent; color:var(--ink); line-height:1.4}
.meals .cell textarea:focus{outline:2px solid var(--water); outline-offset:-2px; background:#fbfcfc}

/* shopping summary */
.shop{margin:0 0 18px; background:#fdf6ee; border:1px solid #ecd9c2; border-radius:var(--radius); padding:14px 16px}
.shop .row{display:flex; align-items:center; gap:10px}
.shop h3{margin:0; font-family:Georgia,serif; font-size:16px; flex:1}
.shop ul{margin:8px 0 0; padding-left:20px; columns:2; column-gap:24px}
@media(max-width:520px){ .shop ul{columns:1} }
.shop li{font-size:14px; margin:2px 0; break-inside:avoid}
.shop.empty-shop{display:none}

/* empty state */
.no-trip nav, .no-trip .bar-dates, .no-trip .panel, .no-trip #completeBanner{display:none !important}
.empty-state{display:flex; justify-content:center; padding:40px 16px}
.empty-card{background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:28px; text-align:center; max-width:360px}
.empty-card h2{margin:0 0 8px}
.empty-card p{color:var(--muted); margin:0 0 18px}

/* focus visibility */
button:focus-visible, input:focus-visible, textarea:focus-visible{outline:2px solid var(--water); outline-offset:2px}

/* footer + toast */
footer{max-width:1080px; margin:0 auto; padding:6px 16px 30px; color:var(--muted); font-size:12px}
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:var(--water-dark); color:#fff; padding:11px 18px; border-radius:11px; font-size:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.25); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:60; max-width:90vw}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* modal */
.overlay{position:fixed; inset:0; background:rgba(15,40,45,.45); display:flex; align-items:center; justify-content:center; padding:20px; z-index:70}
.dialog{background:var(--surface); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.3); padding:22px; max-width:380px; width:100%}
.dialog h3{margin:0 0 8px; font-family:Georgia,serif; font-size:18px}
.dialog p{margin:0 0 18px; color:var(--muted); font-size:14px; white-space:pre-line}
.dialog-actions{display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end}

@media (prefers-reduced-motion: reduce){ *{transition:none !important; animation:none !important} }

/* ---------- print: dense, 2-page feel like the paper original ---------- */
@media print{
  header, nav, footer, .toast, .menu-wrap, .ghost, .add-wrap, .lead, .conn, .bar-dates, #completeBanner, .overlay{display:none !important}
  body{background:#fff; font-size:11px}
  main{padding:0; max-width:none}
  .panel{display:block !important; break-before:page}
  .panel:first-of-type{break-before:auto}
  .panel-title{display:block; font-family:Georgia,serif; font-size:16px; margin:0 0 6px}
  .card{box-shadow:none; border:1px solid #bbb; break-inside:avoid; margin-bottom:8px}
  .card-head{padding:6px 10px}
  .card-head h2{font-size:13px}
  .progress{display:none}
  .list{padding:2px 6px; column-count:3; column-gap:10px}
  .item, .inv{padding:2px 4px; gap:6px}
  .item:hover, .inv:hover{background:none}
  .del, .cart, .store{display:none !important}
  .check{width:14px; height:14px; border-width:1px}
  .track{transform:scale(.85); transform-origin:left}
  .meals .cell textarea{min-height:0}
  .shop{break-inside:avoid}
}
.panel-title{display:none}