/* Travelog — the shell. The palette is the mockup's: pine on paper, the
   route in ochre. System fonts, because this app is meant to open in a
   canyon with no signal and a web font is a request. */
:root{
  --paper:#e7ebe6; --screen:#f2f4ef; --ink:#17211c; --sub:#586a60;
  --panel:#ffffff; --line:#d9e0d7; --pine:#17694f; --pine-ink:#0c3a2c;
  --route:#df8e17; --water:#a3c6c6; --sand:#e0d3b3; --chip:#e9efe8;
  --no:#b3362b; --risky:#b57a12; --yes:#17694f;
  /* the map under the route: quieter than the app around it, so the
     road and the markers stay the things you look at */
  --map-water:#c6dde0; --map-land:#eef1e8; --map-road:#c2a578;
  --map-edge:#b3c0b2; --map-town:#4d5d54;
  --shadow:0 12px 26px rgba(20,40,30,.18);
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0d1310; --screen:#131a16; --ink:#e9efe9; --sub:#8fa298;
    --panel:#1a231e; --line:#28322c; --pine:#38a988; --pine-ink:#c1ebde;
    --route:#f0a63a; --water:#20393a; --sand:#26302a; --chip:#212b25;
    --no:#e0655a; --risky:#e3a53a; --yes:#38a988;
    --map-water:#0f2128; --map-land:#1a231d; --map-road:#7b6a4e;
    --map-edge:#33403a; --map-town:#9db0a4;
    --shadow:0 12px 26px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  --paper:#0d1310; --screen:#131a16; --ink:#e9efe9; --sub:#8fa298;
  --panel:#1a231e; --line:#28322c; --pine:#38a988; --pine-ink:#c1ebde;
  --route:#f0a63a; --water:#20393a; --sand:#26302a; --chip:#212b25;
  --no:#e0655a; --risky:#e3a53a; --yes:#38a988;
  --map-water:#0f2128; --map-land:#1a231d; --map-road:#7b6a4e;
  --map-edge:#33403a; --map-town:#9db0a4;
  --shadow:0 12px 26px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--screen); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased; display:flex; flex-direction:column;
  overscroll-behavior:none;
}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
a{color:var(--pine)}

/* ---- the bar ---- */
.bar{ display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:calc(8px + var(--sat)) 16px 8px; flex:0 0 auto; }
.brand{ font-weight:700; font-size:20px; letter-spacing:-.3px; display:flex; align-items:baseline; }
.brand span{ color:var(--pine); }
/* The "l", cut through on the slant. Sized off the font so it scales with it. */
.brand-l{ width:.27em; height:.76em; margin:0 .035em 0 .01em; display:inline-block; vertical-align:baseline; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.bar-right{ display:flex; align-items:center; gap:8px; }
.sig{ font-size:10.5px; font-weight:700; color:var(--pine); background:var(--chip);
  padding:3px 8px; border-radius:20px; white-space:nowrap; }
.sig.off{ color:var(--sub); }
.tmode{ display:flex; align-items:center; gap:7px; background:var(--chip); border:1px solid var(--line);
  color:var(--ink); padding:6px 12px; border-radius:22px; font-size:12px; font-weight:600; }
.tmode.on{ background:var(--pine); color:#fff; border-color:var(--pine); }
.live{ width:8px; height:8px; border-radius:50%; background:var(--sub); }
.tmode.on .live{ background:#93f2ca; }
@media (prefers-reduced-motion:no-preference){
  .tmode.on .live{ animation:pulse 2.1s infinite; }
  @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(147,242,202,.7)} 70%{box-shadow:0 0 0 8px rgba(147,242,202,0)} 100%{box-shadow:0 0 0 0 rgba(147,242,202,0)} }
}

/* ---- the view ---- */
.view{ flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; padding:0 12px 12px; }
.view > .page{ max-width:720px; margin:0 auto; }
.ptitle{ font-weight:700; font-size:19px; letter-spacing:-.3px; padding:6px 4px 8px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.heading{ font-size:13px; font-weight:700; padding:14px 4px 4px; }
.heading em{ font-style:normal; color:var(--sub); font-weight:500; }
.muted{ color:var(--sub); font-size:12.5px; line-height:1.45; }
.empty{ color:var(--sub); font-size:13px; padding:28px 12px; text-align:center; line-height:1.5; }

/* ---- the map ---- */
.map{ position:relative; height:min(62vh, 560px); border-radius:20px; overflow:hidden;
  border:1px solid var(--line); background:var(--paper); }
.map svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.toast{ position:absolute; top:12px; left:12px; right:12px; z-index:3; display:flex; gap:10px; align-items:center;
  background:var(--panel); border:1px solid var(--line); border-radius:13px; padding:9px 11px; box-shadow:var(--shadow); }
.toast .ic{ width:30px; height:30px; border-radius:9px; background:var(--chip); display:grid; place-items:center; font-size:15px; flex:0 0 auto; }
.toast b{ font-size:12.5px; display:block; }
.toast em{ font-style:normal; color:var(--sub); font-size:11.5px; }
.stopcard{ position:absolute; left:12px; right:12px; bottom:12px; z-index:3; display:flex; gap:11px;
  background:var(--panel); border:1px solid var(--line); border-radius:17px; padding:11px; box-shadow:var(--shadow); }
.thumb{ width:62px; height:62px; border-radius:13px; flex:0 0 auto; overflow:hidden;
  background:linear-gradient(150deg,#6fa89a,#d9be86); }
.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.st-t{ font-weight:700; font-size:14px; }
.st-s{ color:var(--sub); font-size:11.5px; line-height:1.4; margin:3px 0 7px; }
.st-m{ display:flex; gap:14px; font-size:11px; color:var(--pine); font-weight:600; }
.fab{ position:absolute; right:12px; bottom:96px; z-index:3; background:var(--pine); color:#fff; border:0; border-radius:26px;
  padding:11px 16px; font-weight:700; font-size:13px; box-shadow:var(--shadow); }
.fab:disabled{ opacity:.5 }
.mapfoot{ display:flex; justify-content:space-between; gap:8px; padding:8px 4px 0; font-size:12px; color:var(--sub); }

/* ---- cards ---- */
.cards{ display:flex; flex-direction:column; gap:11px; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:15px; padding:12px; }
.card.tap{ cursor:pointer }
.cs-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.cs-n{ font-weight:700; font-size:14px; }
.cs-agy{ font-size:11px; color:var(--sub); margin-top:2px; }
.cost{ font-weight:800; font-size:15px; color:var(--pine-ink); white-space:nowrap; }
.cost small{ font-weight:600; font-size:10px; color:var(--sub); }
.cost.free{ color:var(--pine); letter-spacing:.3px; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; }
.chip{ font-size:10.5px; font-weight:600; padding:4px 9px; border-radius:20px; background:var(--chip); color:var(--pine-ink); }
.chip.off{ color:var(--sub); opacity:.6; }
.chip.yes{ background:var(--yes); color:#fff; }
.chip.risky,.chip.unknown{ background:var(--risky); color:#fff; }
.chip.no{ background:var(--no); color:#fff; }
.best{ font-size:11.5px; color:var(--sub); line-height:1.45; margin-top:10px; border-left:2px solid var(--route); padding-left:9px; white-space:pre-line; }
.best b{ color:var(--ink); font-weight:600; }
.access{ border-left-color:var(--risky); }
.access.yes{ border-left-color:var(--yes); }
.access.no{ border-left-color:var(--no); }
.row-btns{ display:flex; gap:8px; margin-top:11px; flex-wrap:wrap; }
.btn{ border:1px solid var(--line); background:transparent; color:var(--pine-ink); font-weight:600; font-size:12px;
  padding:9px 12px; border-radius:11px; flex:1 1 auto; }
.btn.primary{ background:var(--pine); color:#fff; border-color:var(--pine); }
.btn.small{ flex:0 0 auto; padding:6px 10px; font-size:11.5px; }
.btn:disabled{ opacity:.5; cursor:default; }
.btn:focus-visible,.tab:focus-visible,.tmode:focus-visible{ outline:2px solid var(--pine); outline-offset:2px; }

/* ---- forms ---- */
/* minmax(0,1fr), not the default auto: an auto column is as wide as the
   widest thing in it, and the vehicle garage is three cards wide however
   narrow the phone is. Left alone it pushed every field on the form off
   the side of the screen. */
.form{ background:var(--panel); border:1px solid var(--line); border-radius:15px; padding:12px;
  display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.form label{ display:grid; min-width:0; gap:4px; font-size:11.5px; font-weight:600; color:var(--sub); }
.form input,.form select,.form textarea{ width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:10px;
  background:var(--screen); color:var(--ink); font-size:14px; }
.form textarea{ min-height:80px; resize:vertical; }
.form .two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
.form .three{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap:10px; }
.route-in{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px; }
.rl{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; }
.rl+.rl{ margin-top:10px; }
.rl em{ font-style:normal; color:var(--sub); font-weight:500; font-size:12px; }
.pin{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.pin.a{ background:var(--pine); } .pin.b{ background:var(--route); }
.photos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:6px; margin-top:10px; }
.photos img{ width:100%; aspect-ratio:1; object-fit:cover; border-radius:10px; display:block; }
.kv{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:12.5px; }
.kv b{ color:var(--sub); font-weight:600; }
.ok{ color:var(--yes) } .bad{ color:var(--no) }

/* ---- vehicles ----
   The pictures are cut out of white studio renders and keep a little of
   that light along every edge, so they are shown on white whatever the
   theme is: on a dark panel they would wear a pale halo. The text inside
   these panels is pinned dark for the same reason. */
/* align-items:start, or every card grows to the height of the tallest —
   which is whichever one is explaining why it cannot be used — and the
   rest stand in a pool of their own background. */
.garage{ display:flex; align-items:flex-start; gap:8px; overflow-x:auto; padding:2px 2px 6px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.garage::-webkit-scrollbar{ display:none; }
.vcard{ flex:0 0 auto; width:136px; background:#fff; color:#17211c; border:1px solid #dfe4df; border-radius:13px;
  padding:8px; text-align:center; touch-action:none; user-select:none; cursor:grab; }
.vcard .vd{ color:#5d6b63; }
.vcard.blocked{ opacity:.45; cursor:not-allowed; }
.vcard.dragging{ opacity:.35; }
/* One box for the picture whatever shape it is, and the vehicle stood on
   the floor of it: a low pickup and a tall trailer then share a ground
   line, and their names start on the same row. */
.vcard > div:first-child{ height:58px; display:flex; align-items:flex-end; justify-content:center; }
.vcard .vn{ font-size:11.5px; font-weight:700; margin-top:4px; }
/* Two lines at most, so one long reason cannot set the height of the row. */
.vcard .vwhy{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; font-size:10px; line-height:1.25; color:#5d6b63; margin-top:2px; }
.vcard .vd{ font-size:10px; color:var(--sub); }
.vdrop{ min-height:78px; border:1.5px dashed #cfd6cf; border-radius:15px; padding:10px; background:#fff; color:#17211c;
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; transition:border-color .15s, background .15s; }
.vdrop.over{ border-color:var(--pine); background:#eef5ef; }
.vdrop.empty{ display:flex; align-items:center; justify-content:center; min-height:64px;
  color:#5d6b63; font-size:12.5px; text-align:center; }
.vdrop .vcard{ cursor:default; }
.vghost{ position:fixed; z-index:99; pointer-events:none; opacity:.9; width:132px;
  background:#fff; color:#17211c; border:1px solid var(--pine); border-radius:13px; padding:8px; text-align:center; box-shadow:var(--shadow); }
.vpair{ display:flex; flex-direction:column; align-items:center; gap:2px; background:transparent;
  border:0; padding:4px 2px; flex:1 1 100%; cursor:pointer; }
.vpair > div{ width:100%; }
.vcard img, .vcard svg, .vpair img, .vpair svg{ height:auto; }
.vhitch{ font-size:11px; color:#5d6b63; text-align:center; width:100%; margin-top:4px; }

/* ---- tabs ---- */
.tabs{ display:flex; justify-content:space-around; padding:8px 6px calc(10px + var(--sab)); flex:0 0 auto;
  background:var(--screen); border-top:1px solid var(--line); }
.tab{ display:flex; flex-direction:column; align-items:center; gap:3px; background:none; border:0; color:var(--sub); font-size:10px; font-weight:600; padding:4px 10px; }
.tab.on{ color:var(--pine); font-weight:700; }
.tab i{ font-size:17px; font-style:normal; }

/* ---- the one-line toast ---- */
.toast-line{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(76px + var(--sab)); z-index:9;
  background:var(--ink); color:var(--screen); font-size:12.5px; padding:8px 14px; border-radius:20px; box-shadow:var(--shadow); max-width:90vw; }

@media (min-width:720px){ .map{ height:min(68vh,640px) } }