/* ===========================================================
   Causeway Kaki -- main app theme
   Source: causeway-kaki-theme-README.md (causeway-production-v1)
   =========================================================== */
:root{
  --paper:#FBF5EA; --cream:#EFE4D0; --sand:#DCC29A;
  --clay:#C4643A; --deepclay:#8F4423; --moss:#4F6B41; --ink:#2A2320;
  --muted:#7C6C5C; --mutedlight:#8A7B6B; --mustard:#C9962E; --sbsred:#B33A3A;
  --red:#C0392B; --green:#5E8C4F; --alert:#B4622F;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);font-family:'Nunito Sans',sans-serif;color:var(--ink);height:100%}

/* ===========================================================
   Responsive app shell.
   Mobile (<=600px): full-bleed, no card chrome -- this IS the page.
   Desktop (>600px): a genuine full-width webpage -- NOT a phone
   mockup scaled up. No card border/shadow/fixed-height box; content
   fills the browser and re-flows into two columns on the Today tab
   (see .today-grid below). Capped at 1180px so text doesn't stretch
   edge-to-edge on very large monitors, but that's a readability cap,
   not a "this is secretly still a phone" trick.
   =========================================================== */
.phone{
  width:100%;max-width:100%;height:100dvh;
  background:var(--paper);overflow:hidden;
  display:flex;flex-direction:column;position:relative;margin:0 auto;
}
@media (min-width:900px){
  .phone{max-width:1180px;height:100vh}
  .statusbar{padding:0 40px}
  .scrollarea{padding:0 40px}
  /* Mobile spacing uses hardcoded 20px left/right margins per element
     (a mobile-card layout convention); on desktop the scrollarea's own
     40px padding replaces that, so zero out the per-element margins
     rather than stacking both. */
  .navrow,.sectionlbl,.card,.alertcard,.emptyrow,.combo,.rowline,
  .moneyrow3,.stopfilter,.footnote,.stub-box,.cam-header,.cam-tabs,
  .cam-map,.cam-detail,.cam-grid-wrap{
    margin-left:0;margin-right:0;width:auto;
  }
  .cam-map{width:100%}
}
/* Today tab: mobile stacks everything in document order (grid falls back
   to a single implicit column); desktop splits into a real 2-column
   layout -- alerts+combo (primary) left, weather/transport/money
   (secondary) right -- instead of one long vertical scroll. */
.today-grid{display:block}
@media (min-width:900px){
  .today-grid{
    display:grid;grid-template-columns:1.4fr 1fr;gap:0 32px;align-items:start;
    padding:0 40px;
  }
  .today-grid .navrow,.today-grid>.footnote{grid-column:1/-1;padding-left:0;padding-right:0}
  .today-col-main,.today-col-side{min-width:0}
  .today-col-main :is(.sectionlbl,.card,.alertcard,.emptyrow,.combo,.rowline,.moneyrow3,.stopfilter),
  .today-col-side :is(.sectionlbl,.card,.alertcard,.emptyrow,.combo,.rowline,.moneyrow3,.stopfilter){
    margin-left:0;margin-right:0;width:auto;
  }
}
.statusbar{height:40px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 22px;font-size:13px;font-weight:800}
.statusbar .sub{font-size:11px;color:var(--mutedlight);font-weight:700}
.scrollarea{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* Tab views: hidden attribute must actually hide the section -- a
   previous rule here (`.view{display:block}`) unconditionally forced
   every tab's content to render at once regardless of the `hidden`
   attribute app.js toggles. That was the entire "nav doesn't work /
   everything is one long stacked page" bug. Fixed: only the active
   view (the one WITHOUT [hidden]) gets display:block now. */
.view[hidden]{display:none !important}
.view:not([hidden]){display:block}

.navrow{padding:8px 20px 0;display:flex;align-items:center;gap:8px;justify-content:space-between}
.navtitle{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:18px}
.freshness{font-size:10.5px;color:var(--mutedlight);font-weight:700}

.sectionlbl{margin:16px 20px 0;font-size:11px;font-weight:800;color:var(--mutedlight);letter-spacing:.04em;text-transform:uppercase;display:flex;align-items:center}
.footnote{font-size:10.5px;color:#5B4E42;line-height:1.5;background:var(--cream);border-radius:14px;padding:9px 11px;margin:16px 20px 14px}

.card{margin:10px 20px 0;background:#fff;border:1px solid #E0D2BB;border-radius:18px;padding:14px}
.skeleton-line{height:14px;border-radius:6px;background:linear-gradient(90deg,#EFE4D0,#F8F0E4,#EFE4D0);background-size:200% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

.alertcard{margin:10px 20px 0;background:rgba(180,98,47,.1);border:1px solid rgba(180,98,47,.3);border-radius:14px;padding:10px 12px;display:flex;gap:8px;align-items:flex-start}
.alertdot{width:6px;height:6px;border-radius:50%;background:var(--alert);flex:none;margin-top:5px}
.alerttxt{font-size:11px;font-weight:700;color:var(--deepclay);line-height:1.4}
.alerttime{font-size:9.5px;color:var(--muted);margin-top:2px}
.emptyrow{margin:10px 20px 0;font-size:11.5px;color:var(--mutedlight)}
.alerts-more{margin:8px 20px 0;font-size:11px;font-weight:800;color:var(--deepclay);text-align:center;padding:8px;background:rgba(180,98,47,.08);border-radius:12px;cursor:pointer}
.alerts-more:hover{background:rgba(180,98,47,.16)}

.combo{margin:12px 20px 0;background:var(--ink);color:var(--paper);border-radius:22px;padding:16px 16px 20px;display:flex;gap:0}
.combo-half{flex:1;padding:0 10px;display:flex;flex-direction:column}
.combo-half+.combo-half{border-left:1px solid rgba(255,255,255,.14)}
.ch-lblrow{display:flex;align-items:center;gap:5px}
.ch-lbl{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#C9A98F}
/* aspect-ratio, not a fixed 52px height -- a fixed short height on a
   full-width column made the camera photo a badly letterboxed skinny
   strip, especially once the desktop 2-col layout widened this card. */
.ch-photo{margin-top:8px;aspect-ratio:16/9;border-radius:12px;background:linear-gradient(160deg,#DCC29A,#C9AE7E);background-size:cover;background-position:center}
.fueldivider{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.14)}
.fuel-lbl{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#C9A98F;display:block;margin-bottom:2px}
.fuelstatus{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15px}
.fuelstatus.red{color:#F0A08A} .fuelstatus.grn{color:#A9D19A} .fuelstatus.unk{color:#C9BBA9;font-size:12px}
.fueltime{font-size:9.5px;color:#C9BBA9;margin-top:2px}
.camcount{margin-top:8px;font-size:9.5px;color:#C9BBA9}

.rowline{display:flex;align-items:center;gap:10px;padding:10px 0;margin:0 20px}
.rowline+.rowline{border-top:1px solid #E8DCC7}
.busdot{width:9px;height:9px;border-radius:50%;flex:none}
.rowline .txt{font-size:12px;font-weight:800}
.rowline .right{margin-left:auto;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:13px}

.stopfilter{margin:10px 20px 0;display:flex;gap:6px;padding:5px;background:var(--cream);border-radius:999px;overflow-x:auto}
.stop-tab{flex:none;text-align:center;font-size:11px;font-weight:800;padding:7px 12px;border-radius:999px;cursor:pointer;color:var(--mutedlight);white-space:nowrap}
.stop-tab.on{background:var(--clay);color:var(--paper)}

.moneyrow3{display:flex;gap:8px;margin:10px 20px 0}
.moneybox{flex:1;background:#fff;border:1px solid #E0D2BB;border-radius:16px;padding:11px 10px}
.moneybox .l{font-size:8.5px;font-weight:800;color:var(--mutedlight);letter-spacing:.03em;text-transform:uppercase}
.moneybox .v{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:15px;margin-top:3px}
.moneybox .v2{font-size:10px;color:var(--muted);margin-top:2px}

.stub{padding:8px 0}
.stub-box{margin:16px 20px 0;background:var(--cream);border-radius:16px;padding:18px;font-size:12.5px;color:var(--muted);line-height:1.5;text-align:center}

.tabbar{
  flex:none;position:sticky;bottom:0;z-index:10;
  padding:10px 14px calc(16px + env(safe-area-inset-bottom));
  border-top:1px solid #E8DCC7;display:flex;justify-content:space-between;
  font-size:9.5px;font-weight:800;color:#B2A192;background:var(--paper);
}
.tabbar .tab{cursor:pointer;flex:1;text-align:center;padding:4px 2px;border-radius:10px}
.tabbar .tab.on{color:var(--clay)}

/* Mascot corner-peek utility -- card must be position:relative +
   overflow:visible; mascot sits absolute, breaking the edge slightly.
   One per screen, never over a live number (see Aesthetic Brief 7Q). */
.kaki-peek{
  position:absolute;bottom:-8px;right:10px;height:64px;width:auto;
  pointer-events:none;z-index:3;filter:drop-shadow(0 4px 6px rgba(90,60,40,.18));
}
.kaki-anchor{position:relative;overflow:visible}

/* ===========================================================
   Camera tab -- same reference (final-cam-map / design_handoff_
   camera_map) for LAYOUT (map card, tabs, detail panel, grid), but
   reskinned to the main theme's own tokens (clay/cream/ink, Baloo 2
   + Nunito Sans) instead of the reference's own terracotta/Caprasimo
   -- per Ronnie 2026-07-30, one palette for the whole app.

   Accent color = which CROSSING you're viewing, not which side a
   camera is on -- this is the actual convention already used
   everywhere else in causeway_kaki_PRODUCTION.html (Forecast legend,
   Routes chips/graph, Location screens: clay = Woodlands, moss =
   Tuas). There is no existing SG/JB-side color convention anywhere
   in either reference to copy, so side stays a plain text label
   ("SG side"/"JB side"), not a color. The crossing accent (clay/moss)
   is applied dynamically per tab in app.js -- see CROSSING_COLOR.
   =========================================================== */
.camera-view{
  background:var(--paper);color:var(--ink);font-family:'Nunito Sans',sans-serif;
}
.cam-header{display:flex;align-items:center;justify-content:space-between;padding:10px 22px 6px}
.cam-headrow{display:flex;align-items:center;gap:8px}
.cam-back{font-size:16px;color:var(--mutedlight)}
.cam-title{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:18px}
.cam-updated{font-size:11px;color:var(--mutedlight);font-weight:700}

.cam-tabs{margin:6px 22px 0;display:flex;gap:6px;padding:5px;background:var(--cream);border-radius:999px}
.cam-tab{flex:1;text-align:center;font-size:11.5px;font-weight:800;padding:8px 4px;border-radius:999px;cursor:pointer;color:var(--mutedlight);white-space:nowrap}
.cam-tab.on{color:var(--paper)} /* background color set inline per crossing, see app.js CROSSING_COLOR */

/* aspect-ratio, not a fixed height -- a fixed 200px height made the map
   badly stretched/cropped once desktop widened the container (e.g.
   1100px wide x 200px tall vs the design's 346x236 ~1.46:1 card), since
   background-size:cover just crops harder as the box gets wider relative
   to its height. max-height keeps it from ballooning on ultra-wide screens. */
.cam-map{position:relative;margin:14px 22px 0;width:calc(100% - 44px);aspect-ratio:3/2;max-height:340px;border-radius:20px;overflow:hidden;background:var(--sand)}
.cam-map-bg{position:absolute;inset:0;background-size:cover;background-position:50% 42%}

.cam-pin{position:absolute;transform:translate(-50%,-50%);border-radius:999px;background:var(--paper);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(90,60,40,.25);cursor:pointer}
.cam-pin.selected{width:30px;height:30px}
.cam-pin:not(.selected){width:26px;height:26px}

.cam-detail{padding:16px 22px 0}
.cam-detail-top{display:flex;align-items:flex-start;gap:8px}
.cam-detail-name{flex:1;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:17px;line-height:1.25}
.cam-detail-pill{font-size:11px;font-weight:800;color:var(--paper);border-radius:999px;padding:5px 10px;white-space:nowrap} /* background set inline per crossing */
.cam-detail-meta{font-size:12px;color:var(--muted);margin-top:4px}

.cam-snapshot{position:relative;aspect-ratio:16/9;border-radius:16px;background:linear-gradient(160deg,#DCC29A,#C9AE7E);margin-top:12px;display:flex;align-items:flex-end;padding:12px;background-size:cover;background-position:center}
.cam-snapshot-tag{position:absolute;top:10px;right:10px;font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--paper);background:var(--ink);border-radius:999px;padding:4px 9px}
.cam-snapshot-caption{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;color:var(--muted);background:rgba(251,245,234,.85);padding:2px 6px;border-radius:6px}

.cam-grid-wrap{padding:18px 22px 22px}
.cam-grid-title{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mutedlight);margin-bottom:10px}
.cam-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cam-grid-item{cursor:pointer}
.cam-grid-thumb{aspect-ratio:16/9;border-radius:12px;background:linear-gradient(160deg,#DCC29A,#C9AE7E);position:relative;background-size:cover;background-position:center}
.cam-grid-dot{position:absolute;left:6px;top:6px;width:7px;height:7px;border-radius:999px}
.cam-grid-name{font-size:12.5px;font-weight:800;margin-top:5px}
.cam-grid-sub{font-size:10px;color:var(--muted)}