/* ROTW26 — gorpcore field-brand.
   Ground: scanned warm paper. Accent: flat safety-orange, sits on top like screenprint.
   Ink: warm near-black. Type: condensed caps + monospace readouts.
   Still mobile-first, glove-friendly (>=52px targets) and sunlight-legible. */

:root {
  /* ground */
  --paper:  #efe7d8;
  --card:   #e9e0cd;
  --card2:  #ded2b9;
  --well:   #f6f1e5;

  /* ink */
  --ink:    #171310;
  --dim:    #6d6558;
  --line:   #c6b99f;
  --line2:  #a5977a;

  /* one accent */
  --amber:  #ff4d00;          /* safety-orange (kept var name: app.js/legacy refs) */
  --amber-ink: #b83900;       /* orange dark enough to read as text on paper */

  /* status inks */
  --green:  #1d6b3d;
  --red:    #b3251c;
  --blue:   #1b4f8a;
  --violet: #4b3184;

  --on-accent: #16110d;   /* ink for type sitting on the orange block */

  --radius: 4px;              /* screenprint blocks aren't rounded */
  --cond: "Avenir Next Condensed","HelveticaNeue-CondensedBold","Roboto Condensed","Arial Narrow",ui-sans-serif,system-ui,sans-serif;
  --mono: ui-monospace,"SF Mono",Menlo,Consolas,"Roboto Mono",monospace;
  --sans: -apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--paper); color: var(--ink);
  font: 17px/1.45 var(--sans);
}
body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

/* ---- finish spec: scanned-paper grain + faint fold creases ---- */
body::before {   /* grain */
  content: ""; position: fixed; inset: 0; z-index: 9999; pointer-events: none;
  opacity: .17; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}
body::after {    /* fold creases */
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  background-image:
    linear-gradient(180deg, transparent 0 38%, rgba(0,0,0,.035) 38.1%, transparent 38.45%),
    linear-gradient(180deg, transparent 0 74%, rgba(0,0,0,.028) 74.1%, transparent 74.4%),
    linear-gradient(90deg,  transparent 0 61%, rgba(0,0,0,.03) 61.1%, transparent 61.35%);
}

/* ---- top bar ---- */
#topbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center;
  justify-content: space-between; padding: 10px 16px;
  background: rgba(239,231,216,.94); backdrop-filter: blur(6px);
  border-bottom: 1.5px solid var(--ink);
  box-shadow: 0 3px 0 -1.5px var(--line);
}
#brand {
  font-family: var(--cond); font-weight: 800; font-size: 21px;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--amber); color: var(--on-accent);
  padding: 5px 10px 4px; border-radius: 2px;
}
#brand sup { font-size: .5em; letter-spacing: 0; vertical-align: super; }

.chip {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 6px 10px; border-radius: 2px;
  background: transparent; color: var(--dim);
  border: 1.5px solid var(--line2); white-space: nowrap;
}
.chip.ok      { color: var(--green);  border-color: var(--green); }
.chip.off     { color: var(--on-accent); background: var(--amber); border-color: var(--on-accent); }
.chip.syncing { color: var(--blue);   border-color: var(--blue); }

/* ---- page ---- */
main { padding: 14px 16px 16px; max-width: 640px; margin: 0 auto; }
main::before {   /* ephemera: file header readout */
  content: "ZANSKAR ⁄ LADAKH · SEP 26 — OCT 06 · [ALTITUDE TESTED]";
  display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim);
  border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 14px;
}

/* ---- tab bar ---- */
#tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex;
  background: var(--paper); border-top: 1.5px solid var(--ink);
  padding-bottom: env(safe-area-inset-bottom);
}
#tabbar a {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 11px 0 9px; color: var(--dim); text-decoration: none;
  font-family: var(--cond); font-size: 12px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; min-height: 56px;
}
#tabbar a.active { color: var(--ink); }
#tabbar a.active::before {           /* orange block marks the active tab */
  content: ""; position: absolute; top: 0; left: 8px; right: 8px; height: 4px;
  background: var(--amber);
}
#tabbar .ico { font-size: 19px; line-height: 1; }

/* ---- type ---- */
h1 {
  font-family: var(--cond); font-size: 30px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; margin: 4px 0 14px;
}
h2 {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--cond); font-size: 15px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  margin: 24px 0 10px;
}
h2::after { content: ""; flex: 1; height: 1.5px; background: var(--line2); }

.muted { color: var(--dim); font-size: 14px; }
.big {
  font-family: var(--cond); font-size: 44px; font-weight: 800;
  letter-spacing: .01em; line-height: 1.02; text-transform: uppercase;
}
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grow { flex: 1; }
.right { text-align: right; }

/* ---- cards ---- */
.card {
  position: relative; background: var(--card);
  border: 1.5px solid var(--ink); border-radius: var(--radius);
  padding: 16px; margin-bottom: 12px;
  box-shadow: 3px 3px 0 -1px var(--line);
}
.card::after {                        /* ephemera: crosshair scatter mark */
  content: "✳"; position: absolute; top: 6px; right: 8px;
  font-size: 11px; color: var(--line2); pointer-events: none;
}
.card.hero { padding: 0; overflow: hidden; }
.card.hero::after { content: none; }
.hero img { width: 100%; display: block; border-bottom: 1.5px solid var(--ink); }
.hero .heropad { padding: 16px; }

/* the packing note on a ride day */
.packnote {
  margin-top: 10px; padding: 10px 12px; border-radius: 2px;
  background: var(--amber); color: var(--on-accent); font-weight: 700;
}

/* ---- controls ---- */
button, .btn {
  font-family: var(--cond); font-size: 17px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1.5px solid var(--ink); border-radius: 2px;
  padding: 14px 18px; min-height: 52px; cursor: pointer;
  background: var(--card2); color: var(--ink);
}
button.primary, .btn.primary { background: var(--amber); color: var(--on-accent); }
button.danger  { background: #f0d9d6; color: var(--red); border-color: var(--red); }
button.small   { min-height: 44px; padding: 9px 14px; font-size: 15px; }
button:active  { transform: translate(1px,1px); }

input, select, textarea {
  font: inherit; width: 100%; background: var(--well); color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 2px;
  padding: 13px 14px; min-height: 52px;
  accent-color: var(--amber);
}
input[type="checkbox"], input[type="radio"] { border-radius: 0; padding: 0; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--amber); outline-offset: -1px; }
textarea { min-height: 88px; resize: vertical; }
label {
  display: block; font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--dim); margin: 14px 0 5px;
  text-transform: uppercase; letter-spacing: .12em;
}
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* ---- status pills (ink on tinted paper) ---- */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--cond); font-size: 14px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  border-radius: 2px; padding: 8px 14px; min-height: 40px; min-width: 84px;
  cursor: pointer; border: 1.5px solid var(--line2);
  background: var(--card2); color: var(--dim);
}
.pill.Have    { background: #d6e3d2; color: var(--green);     border-color: var(--green); }
.pill.Tobuy   { background: #ffdcc9; color: var(--amber-ink); border-color: var(--amber-ink); }
.pill.Ordered { background: #d4dfef; color: var(--blue);   border-color: var(--blue); }
.pill.Packed  { background: #ded6ee; color: var(--violet); border-color: var(--violet); }

.dot { width: 16px; height: 16px; border-radius: 0; display: inline-block; border: 1px solid var(--ink); }
.dot.Have { background: var(--green); } .dot.Tobuy { background: var(--amber); }
.dot.Ordered { background: var(--blue); } .dot.Packed { background: var(--violet); }
.dot.none { background: transparent; border-color: var(--line2); }

/* ---- gear ---- */
.gearitem { border-top: 1px solid var(--line); padding: 12px 0; }
.gearitem:first-child { border-top: none; }
.gearname { font-weight: 700; font-size: 16px; }
.gearmeta { font-size: 13px; color: var(--dim); margin-top: 2px; }
details.geardetail summary { list-style: none; cursor: pointer; }
details.geardetail summary::-webkit-details-marker { display: none; }

table.matrix { width: 100%; border-collapse: collapse; font-size: 14px; }
table.matrix th, table.matrix td { padding: 9px 6px; border-bottom: 1px solid var(--line); text-align: center; }
table.matrix th {
  font-family: var(--cond); text-transform: uppercase; letter-spacing: .1em;
  border-bottom: 1.5px solid var(--ink);
}
table.matrix td:first-child, table.matrix th:first-child { text-align: left; }

/* ---- segmented control ---- */
.seg {
  display: flex; background: var(--well); border-radius: 2px; padding: 3px; gap: 3px;
  margin-bottom: 14px; border: 1.5px solid var(--ink);
}
.seg button {
  flex: 1; min-height: 46px; padding: 8px 4px; font-size: 14px; letter-spacing: .06em;
  background: transparent; color: var(--dim); border: none; border-radius: 0;
}
.seg button.on { background: var(--amber); color: var(--on-accent); }

/* ---- itinerary ---- */
.itday { margin-bottom: 10px; }
.itday summary {
  display: flex; gap: 12px; align-items: baseline; cursor: pointer;
  list-style: none; padding: 4px 0; min-height: 44px;
}
.itday summary::-webkit-details-marker { display: none; }
.daynum {
  background: var(--amber); color: var(--on-accent); border-radius: 2px;
  font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; padding: 7px 9px; white-space: nowrap;
}
.editedby { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--dim); margin-top: 6px; }

/* ---- docs ---- */
.doc {
  display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--line); text-decoration: none; color: var(--ink);
}
.doc:first-child { border-top: none; }
/* emoji read as monochrome stamps so the one accent stays the only colour */
.docicon { font-size: 26px; width: 44px; text-align: center; filter: grayscale(1) contrast(1.15); }

/* ---- expenses ---- */
.exp { padding: 12px 0; border-top: 1px solid var(--line); }
.exp:first-child { border-top: none; }
.amount { font-family: var(--cond); font-weight: 800; font-size: 20px; letter-spacing: .02em; }
.owes { font-size: 17px; padding: 8px 0; }
.owes b { color: var(--amber-ink); }

/* ---- login ---- */
.login { display: flex; flex-direction: column; justify-content: center; min-height: 70vh; text-align: center; }
.login input {
  text-align: center; font-family: var(--cond); font-size: 24px;
  letter-spacing: .22em; font-weight: 800; text-transform: uppercase;
}
.errmsg { color: var(--red); font-weight: 700; min-height: 24px; margin-top: 10px; }

/* ---- more ---- */
.contact { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.contact:first-child { border-top: none; }
.contact a { color: var(--blue); text-decoration: none; font-weight: 800; }

/* ---- toast: reads as a rubber stamp ---- */
.toast {
  position: fixed; bottom: 92px; left: 50%; transform: translateX(-50%);
  background: var(--ink); border: 1.5px solid var(--ink); color: var(--paper);
  font-family: var(--cond); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 12px 20px; border-radius: 2px; z-index: 50;
  box-shadow: 3px 3px 0 -1px var(--amber);
}

a { color: var(--blue); }
.spacer { height: 20px; }

/* ================================================================
   NIGHT MODE — same field-brand language, printed on black instead
   of paper. Follows the phone's system setting.
   ================================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    /* ground */
    --paper:  #15130f;
    --card:   #1e1b16;
    --card2:  #2a251d;
    --well:   #100e0b;

    /* ink */
    --ink:    #f2ece0;
    --dim:    #9a9082;
    --line:   #3d372d;
    --line2:  #57503f;

    /* one accent (unchanged — orange is the constant) */
    --amber:  #ff5512;
    --amber-ink: #ff9257;      /* orange light enough to read as text on black */

    /* status inks, lifted for contrast on black */
    --green:  #57c98a;
    --red:    #ff7a70;
    --blue:   #6ba9f0;
    --violet: #b39ae8;
  }

  /* grain reads as light print dust on a dark ground, not shadow */
  body::before { mix-blend-mode: screen; opacity: .07; }
  body::after {
    background-image:
      linear-gradient(180deg, transparent 0 38%, rgba(255,255,255,.035) 38.1%, transparent 38.45%),
      linear-gradient(180deg, transparent 0 74%, rgba(255,255,255,.028) 74.1%, transparent 74.4%),
      linear-gradient(90deg,  transparent 0 61%, rgba(255,255,255,.03) 61.1%, transparent 61.35%);
  }

  #topbar { background: rgba(21,19,15,.94); }

  .pill.Have    { background: #16301f; color: var(--green);     border-color: #2e6f47; }
  .pill.Tobuy   { background: #3a2110; color: var(--amber-ink); border-color: #7a4318; }
  .pill.Ordered { background: #12263d; color: var(--blue);      border-color: #2b527f; }
  .pill.Packed  { background: #251b3d; color: var(--violet);    border-color: #4b3a7a; }

  button.danger { background: #3a1d1a; color: var(--red); border-color: var(--red); }

  /* the hero poster is printed on light stock — keep it from glowing */
  .hero img { filter: brightness(.88) contrast(1.04); }

  /* monochrome stamps need lifting once the ground goes dark */
  .docicon { filter: grayscale(1) contrast(1.05) brightness(1.4); }
}