/* ---------------------------------------------------------------
   Palettes. Light borrows the teal/slate of the printed trackers;
   dark is the carriage-window board. Amber shifts darker on light
   backgrounds so it stays legible.
   --------------------------------------------------------------- */
:root, [data-theme="light"]{
  --ink:#f6f8fa;
  --panel:#ffffff;
  --panel-2:#eef2f6;
  --rule:#d5dee6;
  --paper:#1d2b36;
  --dim:#5d7183;
  --amber:#b45309;
  --amber-fill:#d97706;
  --teal:#0f766e;
  --rose:#be123c;
  --shadow:0 1px 2px rgba(29,43,54,.06);
}
[data-theme="dark"]{
  --ink:#10161c;
  --panel:#182027;
  --panel-2:#1e2831;
  --rule:#2b3742;
  --paper:#e7eef3;
  --dim:#8ea0ae;
  --amber:#f5a623;
  --amber-fill:#f5a623;
  --teal:#2dd4bf;
  --rose:#fb7185;
  --shadow:none;
}
@media (prefers-color-scheme: dark){
  [data-theme="auto"]{
    --ink:#10161c;
    --panel:#182027;
    --panel-2:#1e2831;
    --rule:#2b3742;
    --paper:#e7eef3;
    --dim:#8ea0ae;
    --amber:#f5a623;
    --amber-fill:#f5a623;
    --teal:#2dd4bf;
    --rose:#fb7185;
    --shadow:none;
  }
}

:root{ --tab-h:64px; --nav-w:212px; }

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--ink);color:var(--paper);min-height:100%}
body{
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
main{padding:14px 16px 8px;max-width:760px;margin:0 auto;width:100%}
h1{font-size:23px;font-weight:650;letter-spacing:-.2px}
h2{font-size:15px;font-weight:600;color:var(--dim);margin:22px 0 8px}
h3{font-size:16px;font-weight:600}
a{color:var(--teal)}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}

/* ---------- header ---------- */
#top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px 0;max-width:760px;margin:0 auto;width:100%;
}
#top .brand{font-size:13px;font-weight:700;color:var(--dim);letter-spacing:.04em}
#theme-btn{
  display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--dim);
  border:1px solid var(--rule);border-radius:999px;padding:6px 12px;background:var(--panel);
}
#theme-btn:hover{color:var(--paper)}
#theme-btn svg{width:14px;height:14px;fill:currentColor}

/* ---------- the board ---------- */
.board{
  background:var(--panel);border:1px solid var(--rule);border-radius:5px;
  padding:16px 18px 18px;margin-bottom:8px;box-shadow:var(--shadow);
}
[data-theme="dark"] .board{background:linear-gradient(180deg,#0c1116,#151d24)}
@media (prefers-color-scheme: dark){
  [data-theme="auto"] .board{background:linear-gradient(180deg,#0c1116,#151d24)}
}
.board .when{color:var(--amber);font-size:12.5px;font-weight:700;letter-spacing:.02em}
.board .clock{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  font-size:54px;line-height:1;font-weight:600;color:var(--amber);
  margin:6px 0 2px;letter-spacing:-1px;
}
.board .what{font-size:19px;font-weight:600;margin-top:8px}
.board .where{color:var(--dim);font-size:14px;margin-top:4px}
.board .ref{
  font-variant-numeric:tabular-nums;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--rule);font-size:14px;color:var(--dim);
}
.board .ref b{color:var(--paper);font-weight:700;letter-spacing:.04em}
.board.quiet .clock,.board.quiet .when{color:var(--teal)}

/* ---------- rows ---------- */
.row{
  display:flex;gap:14px;padding:13px 0;border-bottom:1px solid var(--rule);
  align-items:baseline;text-align:left;width:100%;
}
.row:last-child{border-bottom:none}
.row .t{
  font-variant-numeric:tabular-nums;color:var(--amber);font-weight:700;
  font-size:14px;min-width:52px;flex:0 0 52px;
}
.row .t.none{color:var(--rule)}
.row .body{flex:1;min-width:0}
.row .body .sub{color:var(--dim);font-size:13.5px;margin-top:3px;display:block}
.row.done .body{opacity:.45;text-decoration:line-through}

/* Itinerary rows open a detail screen, so they need an affordance. */
.row.tap{align-items:center}
.row .go{flex:0 0 auto;color:var(--dim);font-size:19px;line-height:1;padding-left:4px}
.row .go.ok{color:var(--teal);font-size:15px}
.row.tap:hover .go{color:var(--amber)}

/* ---------- item detail screen ---------- */
.back{color:var(--teal);font-size:14px;font-weight:600;padding:2px 0 12px;display:inline-block}
.dhead{border-bottom:1px solid var(--rule);padding-bottom:15px;margin-bottom:16px}
.dhead h1{margin-top:2px}
.dwhen{color:var(--amber);font-size:12.5px;font-weight:700;letter-spacing:.02em}
.dtime{
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";
  font-size:44px;line-height:1;font-weight:600;color:var(--amber);
  margin:5px 0 4px;letter-spacing:-1px;
}
.dtime.notime{font-size:17px;font-weight:600;color:var(--teal);letter-spacing:0;margin:6px 0 2px}
.ddetail{color:var(--dim);font-size:14.5px;margin-top:7px}
.btn.tick{display:block;width:100%;text-align:center}
.maps{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.maps .btn{font-size:14px;padding:9px 14px}
.pins{font-size:12.5px;color:var(--dim);margin-top:9px;line-height:1.45}
.pins a{white-space:nowrap}
.card.fact{color:var(--dim);font-size:14.5px;line-height:1.55}

/* Researched practicalities. Unverified values are visibly different — that
   difference is the point, so do not tidy it away. */
.fld{padding:11px 0;border-bottom:1px solid var(--rule)}
.fld:first-child{padding-top:2px}
.fld:last-child{border-bottom:none;padding-bottom:2px}
.fld .lab{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--dim)}
.fld .val{font-size:14.5px;margin-top:4px;line-height:1.5}
.fld.shaky{border-left:2px solid var(--amber);padding-left:10px;margin-left:-12px}
.fld.shaky .lab{color:var(--amber)}
.fld.shaky .val{color:var(--amber)}
.stamp{font-size:12.5px;color:var(--dim);padding-top:11px;line-height:1.45}
.stamp.none{color:var(--amber)}
.stamp a{margin-left:5px;white-space:nowrap}

.pill{
  display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;
  border-radius:3px;vertical-align:1px;margin-left:6px;
}
.p-ok{background:color-mix(in srgb,var(--teal) 15%,transparent);color:var(--teal)}
.p-wait{background:color-mix(in srgb,var(--amber) 15%,transparent);color:var(--amber)}
.p-flag{background:color-mix(in srgb,var(--rose) 15%,transparent);color:var(--rose)}

/* ---------- cards ---------- */
.card{
  background:var(--panel);border:1px solid var(--rule);border-radius:5px;
  padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow);
  break-inside:avoid;
}
.card .head{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.kv{font-size:13.5px;color:var(--dim);margin-top:8px}
.kv b{color:var(--paper);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.03em}
.note{font-size:13.5px;color:var(--dim);margin-top:9px;padding-top:9px;border-top:1px solid var(--rule)}
.note.warn{color:var(--amber)}
/* A note that stands on its own rather than sitting inside a card. */
.note.standalone{border-top:none;padding-top:0;margin-top:14px}

/* ---------- day picker ---------- */
.daypick{display:flex;gap:6px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}
.daypick::-webkit-scrollbar{display:none}
.daypick button{
  flex:0 0 auto;padding:7px 12px;border:1px solid var(--rule);border-radius:3px;
  background:var(--panel);font-size:13px;color:var(--dim);white-space:nowrap;
}
.daypick button.on{background:var(--amber-fill);border-color:var(--amber-fill);color:#fff;font-weight:650}
.daypick button.today{border-color:var(--amber);color:var(--amber)}

/* ---------- money ---------- */
.bars{margin:14px 0 4px}
.bar{height:9px;background:var(--panel-2);border-radius:2px;overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.legend{display:flex;gap:16px;font-size:12.5px;color:var(--dim);margin-top:8px;flex-wrap:wrap}
.legend s{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;text-decoration:none}
.big{font-variant-numeric:tabular-nums;font-size:30px;font-weight:650;letter-spacing:-.5px}
.big.good{color:var(--teal)} .big.thin{color:var(--amber)} .big.over{color:var(--rose)}

/* ---------- forms & buttons ---------- */
.drop{
  border:1.5px dashed var(--rule);border-radius:5px;padding:26px 18px;text-align:center;
  color:var(--dim);font-size:14.5px;background:var(--panel);
}
.drop.hot{border-color:var(--amber);color:var(--amber)}
.btn{
  display:inline-block;background:var(--amber-fill);color:#fff;font-weight:650;
  padding:11px 18px;border-radius:4px;font-size:15px;text-decoration:none;
}
.btn.ghost{background:none;border:1px solid var(--rule);color:var(--paper);font-weight:500}
.btn:disabled{opacity:.5}
label.f{display:block;margin-bottom:11px;font-size:13px;color:var(--dim)}
label.f input,label.f select,label.f textarea{
  display:block;width:100%;margin-top:5px;background:var(--ink);color:var(--paper);
  border:1px solid var(--rule);border-radius:4px;padding:10px;font:inherit;font-size:16px;
}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}

/* ---------- checkboxes ---------- */
.check{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--rule);width:100%;text-align:left}
.check .box{
  flex:0 0 21px;width:21px;height:21px;border:1.5px solid var(--rule);border-radius:4px;
  margin-top:1px;position:relative;background:var(--panel);
}
.check.on .box{background:var(--teal);border-color:var(--teal)}
.check.on .box:after{content:"";position:absolute;left:6px;top:2px;width:6px;height:11px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.check.on .lab{opacity:.45;text-decoration:line-through}
.check .sub{color:var(--dim);font-size:13.5px;margin-top:3px;display:block}
.due{font-size:12.5px;color:var(--amber);font-variant-numeric:tabular-nums}
.due.past{color:var(--rose)}
.empty{color:var(--dim);font-size:14.5px;padding:30px 0;text-align:center}

/* ---------- navigation: bottom bar on phones ---------- */
#tabs{
  position:fixed;left:0;right:0;bottom:0;height:calc(var(--tab-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:flex;background:color-mix(in srgb,var(--ink) 94%,transparent);
  border-top:1px solid var(--rule);backdrop-filter:blur(8px);z-index:20;
}
#tabs button{flex:1;font-size:12.5px;color:var(--dim);display:flex;align-items:center;justify-content:center}
#tabs button.on{color:var(--amber);font-weight:700;box-shadow:inset 0 2px 0 var(--amber)}

#offline-bar{
  background:var(--amber-fill);color:#fff;font-size:13px;font-weight:600;
  padding:9px 16px;text-align:center;
}
#toast{
  position:fixed;left:16px;right:16px;bottom:calc(var(--tab-h) + 18px);
  background:var(--panel-2);border:1px solid var(--rule);border-left:3px solid var(--teal);
  border-radius:4px;padding:13px 15px;font-size:14px;z-index:30;max-width:688px;margin:0 auto;
  box-shadow:0 4px 14px rgba(0,0,0,.14);
}
#toast.bad{border-left-color:var(--rose)}
@media (prefers-reduced-motion:no-preference){
  #toast{animation:rise .18s ease-out}
  @keyframes rise{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
}

/* ===============================================================
   Tablet: more room, so cards go two-up and the day picker wraps
   instead of scrolling. iPad portrait lands here.
   =============================================================== */
@media (min-width:700px){
  main{padding:18px 24px 8px;max-width:820px}
  #top{padding:14px 24px 0;max-width:820px}
  h1{font-size:26px}
  .board{padding:20px 24px 22px}
  .board .clock{font-size:64px}
  .board .what{font-size:21px}
  .daypick{flex-wrap:wrap;overflow:visible}
  .cols{columns:2;column-gap:14px}
  .cols .card{margin-bottom:14px}
}

/* ===============================================================
   Desktop and iPad landscape: navigation moves to a sidebar so the
   thumb-reach bottom bar doesn't eat screen on a device you're not
   holding. Content stays measured rather than stretching wide.
   =============================================================== */
@media (min-width:1000px){
  body{
    padding-bottom:0;
    display:grid;
    grid-template-columns:var(--nav-w) 1fr;
    grid-template-rows:auto auto 1fr;
    grid-template-areas:"nav bar" "nav head" "nav main";
    min-height:100vh;
  }
  #offline-bar{grid-area:bar}
  #top{grid-area:head;max-width:900px;margin:0;padding:22px 32px 0}
  main{grid-area:main;max-width:900px;margin:0;padding:10px 32px 40px}

  #tabs{
    grid-area:nav;position:sticky;top:0;align-self:start;
    height:100vh;flex-direction:column;justify-content:flex-start;gap:2px;
    padding:26px 12px;border-top:none;border-right:1px solid var(--rule);
    background:var(--panel);backdrop-filter:none;
  }
  #tabs:before{
    content:"GB Trip";display:block;padding:0 12px 20px;
    font-size:13px;font-weight:700;color:var(--dim);letter-spacing:.04em;
  }
  #tabs button{
    flex:0 0 auto;justify-content:flex-start;width:100%;
    padding:11px 12px;border-radius:5px;font-size:14.5px;
  }
  #tabs button:hover{background:var(--panel-2);color:var(--paper)}
  #tabs button.on{
    background:color-mix(in srgb,var(--amber) 12%,transparent);
    color:var(--amber);box-shadow:none;
  }
  #top .brand{display:none}
  #toast{left:auto;right:26px;bottom:26px;max-width:380px}
  .board .clock{font-size:70px}
}

@media (min-width:1500px){
  main,#top{max-width:1080px}
  .cols{columns:3}
}