/* tmb2026 — THE TOPO SHEET. Workshop Web spine, trail materials variant.
   See visual-design.md. border-radius:0 everywhere; hard 2px ink borders;
   block shadows only; 8px module; blaze = the trail + the one action. */

:root {
  --map-paper:#ECE4D2; --card-paper:#F4EEDF; --contour:#C9B79A;
  --ink:#1C1B17; --graphite:#7A756A;
  --blaze:#E8541E; --blaze-stop:#C42B1C; --forest:#2E5A34; --flag:#E4B93F;
  --border:2px solid var(--ink); --radius:0; --unit:8px;
  --shadow-block:4px 4px 0 var(--ink);
  --font-display:'Oswald','Archivo Narrow',system-ui,sans-serif;
  --font-body:'IBM Plex Mono','Courier Prime',ui-monospace,monospace;
  --font-note:'Permanent Marker',cursive;
  --snap:120ms linear;
}

* { box-sizing:border-box; border-radius:0 !important; }

html, body { margin:0; padding:0; }
body {
  background-color:var(--map-paper);
  /* faint contour-grain: repeating hairlines, kept ~5% so it reads as stock */
  background-image:
    repeating-linear-gradient(0deg, rgba(28,27,23,0.03) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(28,27,23,0.03) 0 1px, transparent 1px 26px);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px; line-height:1.5;
  -webkit-text-size-adjust:100%;
}

h1,h2,h3,h4 {
  font-family:var(--font-display); text-transform:uppercase;
  font-weight:700; letter-spacing:.01em; line-height:1.05; margin:0;
}

/* content typed by a person is NEVER uppercased */
.usercontent, .caption, .place-name, input, textarea {
  text-transform:none;
}

a { color:var(--blaze); text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:3px; }
a.forest { color:var(--forest); }

.mono { font-family:var(--font-body); }
.label {
  font-family:var(--font-body); text-transform:uppercase;
  font-size:11px; letter-spacing:.08em; color:var(--graphite);
}
.note { font-family:var(--font-note); color:var(--ink); }

/* ---- site data plate (top bar) ---- */
.site-plate {
  display:flex; align-items:center; justify-content:space-between; gap:var(--unit);
  border-bottom:var(--border); background:var(--card-paper);
  padding:calc(var(--unit)*1.5) calc(var(--unit)*2);
  flex-wrap:wrap;
}
.site-plate .wordmark {
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  font-size:20px; letter-spacing:.04em;
}
.site-plate .wordmark .v { color:var(--blaze); }
.site-plate .daterange { font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--graphite); }

/* ---- layout shell ---- */
.shell { display:flex; flex-direction:column; min-height:100vh; }
.sheet-wrap { position:relative; flex:1 1 auto; min-height:60vh; background:var(--map-paper); }
#map { position:absolute; inset:0; width:100%; height:100%; background:var(--map-paper); }
.sheet-wrap { border-bottom:var(--border); }

/* Leaflet overrides — kill rounded, restore hard edges */
.leaflet-container { font-family:var(--font-body); background:var(--map-paper); }
.leaflet-bar, .leaflet-bar a, .leaflet-popup-content-wrapper, .leaflet-popup-tip,
.leaflet-control-attribution {
  border-radius:0 !important; box-shadow:none !important;
}
.leaflet-bar a { border:1px solid var(--ink); color:var(--ink); background:var(--card-paper); }
.leaflet-bar a:hover { background:var(--flag); }
.leaflet-control-attribution {
  background:var(--card-paper) !important; border:var(--border); border-right:none; border-bottom:none;
  font-size:10px; color:var(--graphite);
}
.leaflet-popup-content-wrapper { background:var(--card-paper); border:var(--border); box-shadow:var(--shadow-block) !important; }
.leaflet-popup-content { margin:calc(var(--unit)*1.5); }
.leaflet-popup-tip { background:var(--card-paper); border:var(--border); }

/* ---- day / station marker: a square blaze plate stamped with the day # ---- */
.day-marker {
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  border:2px solid var(--ink); background:var(--card-paper); color:var(--ink);
  box-shadow:var(--shadow-block);
}
.day-marker.active { background:var(--blaze); color:var(--card-paper); }
.day-marker.has-photos::after {
  content:''; position:absolute; right:-4px; top:-4px;
  width:8px; height:8px; background:var(--forest); border:1px solid var(--ink);
}
.photo-marker {
  width:16px; height:16px; background:var(--flag); border:2px solid var(--ink);
  box-shadow:2px 2px 0 var(--ink);
}
.photo-marker.placed { background:var(--blaze); }

/* ---- photo/video thumbnail markers + clusters ---- */
.photo-thumb {
  width:46px; height:46px; border:2px solid var(--ink); background:var(--card-paper);
  box-shadow:2px 2px 0 var(--ink); overflow:hidden; position:relative;
}
.photo-thumb img { width:100%; height:100%; object-fit:cover; display:block; background:var(--contour); }
.photo-thumb.video { border-color:var(--blaze-stop); }
.photo-thumb .pt-play {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  color:var(--card-paper); font-size:13px; text-shadow:0 0 3px rgba(0,0,0,.85); pointer-events:none;
}
.photo-cluster {
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  background:var(--blaze); color:var(--card-paper); border:2px solid var(--ink); box-shadow:var(--shadow-block);
}

/* ---- station popup ---- */
.pop-day { font-family:var(--font-display); text-transform:uppercase; font-weight:700; font-size:16px; }
.pop-route { margin:4px 0; font-size:12px; }
.pop-meta { color:var(--graphite); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.pop-btn { margin-top:var(--unit); }

/* ---- buttons ---- */
button, .btn {
  font-family:var(--font-display); text-transform:uppercase; font-weight:600;
  letter-spacing:.04em; font-size:14px;
  border:var(--border); background:var(--card-paper); color:var(--ink);
  padding:calc(var(--unit)) calc(var(--unit)*1.5); cursor:pointer;
  box-shadow:var(--shadow-block); transition:transform var(--snap), box-shadow var(--snap);
}
button:active, .btn:active { transform:translate(2px,2px); box-shadow:2px 2px 0 var(--ink); }
button.primary, .btn.primary { background:var(--blaze); color:var(--card-paper); }
button.stop { background:var(--blaze-stop); color:var(--card-paper); }
button:disabled { background:var(--contour); color:var(--graphite); cursor:not-allowed; box-shadow:none; }

/* ---- panels / cards ---- */
.panel {
  background:var(--card-paper); border:var(--border); box-shadow:var(--shadow-block);
  padding:calc(var(--unit)*2); margin:calc(var(--unit)*2); position:relative;
}
.fig-plate {
  position:absolute; top:-1px; left:-1px; padding:2px 6px;
  font-family:var(--font-body); text-transform:uppercase; font-size:10px; letter-spacing:.08em;
  background:var(--ink); color:var(--card-paper); border:var(--border);
}
.section-head {
  display:flex; align-items:baseline; gap:var(--unit);
  border-bottom:3px solid var(--ink); padding-bottom:var(--unit); margin-bottom:calc(var(--unit)*2);
}
.section-head .num { color:var(--blaze); font-family:var(--font-display); font-weight:700; }

/* ---- day gallery drawer ---- */
.drawer {
  position:fixed; left:0; right:0; bottom:0; max-height:72vh; overflow-y:auto;
  background:var(--card-paper); border-top:var(--border);
  transform:translateY(100%); transition:transform var(--snap); z-index:1200;
}
.drawer.open { transform:translateY(0); }
.drawer-head {
  position:sticky; top:0; background:var(--card-paper); border-bottom:var(--border);
  display:flex; align-items:center; justify-content:space-between; gap:var(--unit);
  padding:calc(var(--unit)*1.5) calc(var(--unit)*2); z-index:2;
}
.drawer-head .day-title { display:flex; flex-direction:column; gap:2px; }
.drawer-head .day-plate {
  font-family:var(--font-display); text-transform:uppercase; font-weight:700;
  background:var(--blaze); color:var(--card-paper); padding:2px 8px; font-size:13px; align-self:flex-start;
}
.drawer-head h2 { font-size:20px; }
.drawer-body { padding:calc(var(--unit)*2); }

/* knolling grid of FIG. plates */
.plate-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr));
  gap:calc(var(--unit)*1.5);
}
.plate {
  border:var(--border); background:var(--map-paper); position:relative; cursor:pointer;
  box-shadow:var(--shadow-block); overflow:hidden;
}
.plate img { display:block; width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--contour); }
.plate .playbadge {
  position:absolute; left:50%; top:calc(50% - 12px); transform:translate(-50%,-50%);
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:rgba(28,27,23,0.72); color:var(--card-paper); border:2px solid var(--card-paper);
  font-size:18px; line-height:1; padding-left:3px; pointer-events:none; z-index:2;
}
.plate .fignum {
  position:absolute; top:-1px; left:-1px; background:var(--ink); color:var(--card-paper);
  font-size:10px; letter-spacing:.08em; padding:1px 5px;
}
.plate .dupflag {
  position:absolute; top:-1px; right:-1px; z-index:2;
  background:var(--flag); color:var(--ink); border-left:2px solid var(--ink); border-bottom:2px solid var(--ink);
  font-family:var(--font-display); text-transform:uppercase; font-weight:700;
  font-size:10px; letter-spacing:.06em; padding:1px 5px;
}
.plate .cap {
  padding:6px 8px; font-size:12px; border-top:var(--border);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-transform:none;
}
.plate .cap .tstamp { font-family:var(--font-body); color:var(--graphite); letter-spacing:.04em; }
.reconcile-box { margin-bottom:calc(var(--unit)*2); }
#reconcile { background:var(--flag); color:var(--ink); }
#reconcile:disabled { background:var(--contour); color:var(--graphite); }
.empty-day { color:var(--graphite); font-size:13px; padding:calc(var(--unit)*2) 0; }

/* ---- lightbox (full FIG. view) ---- */
.lightbox {
  position:fixed; inset:0; background:rgba(28,27,23,0.92); z-index:2000;
  display:none; align-items:center; justify-content:center; padding:calc(var(--unit)*2);
}
.lightbox.open { display:flex; }
.lightbox-inner { max-width:min(960px,100%); max-height:100%; width:100%; display:flex; flex-direction:column; }
.lightbox img, .lightbox video { max-width:100%; max-height:72vh; width:100%; object-fit:contain; border:var(--border); background:var(--map-paper); }
.lightbox .frame-meta {
  background:var(--card-paper); border:var(--border); border-top:none; padding:calc(var(--unit)*1.5);
}
.lightbox .fig-label { font-family:var(--font-display); text-transform:uppercase; font-weight:700; font-size:15px; }
.lightbox .caption { margin:6px 0; text-transform:none; }
.lightbox .gridref { color:var(--graphite); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.lightbox .close { position:absolute; top:calc(var(--unit)*2); right:calc(var(--unit)*2); }
.lightbox .nav { display:flex; gap:var(--unit); margin-top:var(--unit); }

/* ---- legend footer ---- */
.legend {
  border-top:var(--border); background:var(--card-paper);
  padding:calc(var(--unit)*2); font-size:11px; color:var(--graphite);
  display:flex; flex-wrap:wrap; gap:calc(var(--unit)*2); align-items:center;
}
.legend .swatch { display:inline-flex; align-items:center; gap:6px; text-transform:uppercase; letter-spacing:.06em; }
.legend .chip { width:22px; height:12px; border:1px solid var(--ink); display:inline-block; }
.legend .chip.route { background:var(--blaze); }
.legend .chip.station { background:var(--card-paper); }
.legend .serial { margin-left:auto; }

/* ---- intake (upload) page ---- */
.intake { padding:calc(var(--unit)*2); max-width:900px; margin:0 auto; }
.intake .gate {
  background:var(--card-paper); border:var(--border); box-shadow:var(--shadow-block);
  padding:calc(var(--unit)*2); margin-bottom:calc(var(--unit)*2);
}
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:var(--unit); }
input[type=text], input[type=password], textarea, select {
  font-family:var(--font-body); font-size:14px; color:var(--ink);
  background:var(--map-paper); border:var(--border); padding:calc(var(--unit)) calc(var(--unit)*1.5);
}
textarea { resize:vertical; min-height:56px; }
.dropzone {
  border:3px dashed var(--ink); background:var(--card-paper);
  padding:calc(var(--unit)*3); text-align:center; cursor:pointer;
}
.dropzone.drag { background:var(--flag); }
.queue { margin-top:calc(var(--unit)*2); display:flex; flex-direction:column; gap:var(--unit); }
.qrow {
  display:grid; grid-template-columns:64px 1fr auto; gap:var(--unit); align-items:center;
  border:var(--border); background:var(--card-paper); padding:var(--unit);
}
.qrow img { width:64px; height:64px; object-fit:cover; border:1px solid var(--ink); background:var(--contour); }
.qrow .meta { font-size:12px; }
.qrow .daytag {
  font-family:var(--font-display); text-transform:uppercase; background:var(--blaze); color:var(--card-paper);
  padding:1px 6px; font-size:12px; display:inline-block;
}
.qrow .daytag.unknown { background:var(--graphite); }

/* ---- storage meter (R2 budget) ---- */
.storage-meter {
  border:var(--border); background:var(--card-paper); box-shadow:var(--shadow-block);
  padding:calc(var(--unit)*1.5); margin-bottom:calc(var(--unit)*2);
}
.storage-meter .bar { height:14px; border:2px solid var(--ink); background:var(--map-paper); margin-top:8px; }
.storage-meter .bar-fill { height:100%; width:0%; background:var(--forest); transition:width var(--snap); }
.storage-meter.warn .bar-fill { background:var(--blaze-stop); }
.storage-meter.warn .meter-label { color:var(--blaze-stop); }
.qrow .daytag.zip { background:var(--ink); color:var(--card-paper); }
.qrow .daytag.video { background:var(--blaze-stop); color:var(--card-paper); }
.qrow .rowretry {
  display:block; margin-top:5px; font-size:11px; letter-spacing:.06em;
  padding:2px 8px; box-shadow:2px 2px 0 var(--ink); background:var(--flag); color:var(--ink);
}
#retryFailed { margin:8px 0; background:var(--flag); color:var(--ink); }
.zip-note {
  border:var(--border); border-left:6px solid var(--flag);
  background:var(--card-paper); padding:8px 10px; margin:8px 0;
}
.status-plate {
  display:inline-block; border:var(--border); padding:2px 6px; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase;
}
.status-plate.ok { background:var(--card-paper); }
.status-plate.up { background:var(--forest); color:var(--card-paper); }
.status-plate.err { background:var(--blaze-stop); color:var(--card-paper); }
.status-plate.gps { background:var(--flag); }

.toast {
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  background:var(--ink); color:var(--card-paper); border:var(--border);
  padding:var(--unit) calc(var(--unit)*2); font-size:13px; z-index:3000; box-shadow:var(--shadow-block);
}

.hint { color:var(--graphite); font-size:12px; }
.center { text-align:center; }
.row { display:flex; gap:var(--unit); align-items:center; flex-wrap:wrap; }
.grow { flex:1 1 auto; }
.hidden { display:none !important; }

/* ---- public viewing gate (full-screen ACCESS prompt) ---- */
.viewgate {
  position:fixed; inset:0; z-index:1500; display:flex; align-items:center; justify-content:center;
  background:var(--map-paper); padding:calc(var(--unit)*2);
  background-image:
    repeating-linear-gradient(0deg, rgba(28,27,23,0.03) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(28,27,23,0.03) 0 1px, transparent 1px 26px);
}
.viewgate .gate-card {
  background:var(--card-paper); border:var(--border); box-shadow:var(--shadow-block);
  padding:calc(var(--unit)*3); max-width:420px; width:100%;
}

@media (prefers-reduced-motion: reduce) {
  *, .drawer, button, .btn { transition:none !important; }
}