/* ---------- Light mode (Rohan, 2 Oct 2026: "we need to add a light mode") ----------
   theme.js puts data-theme="light" on <html> when this device has chosen
   Light (or Automatic, and the phone or computer is in light mode); dark stays
   the app's own look and is not touched by anything in this file. The wall
   keeps the design's cream (the :root tokens in styles.css); here the charcoal
   tiles turn to warm paper with dark text, and every hover wash, hairline and
   shadow that was written for a dark surface gets its light twin. The printed
   quote and confirmation pages keep their own paper colours in both looks. */

html[data-theme="light"] { color-scheme: light; }

[data-theme="light"] {
  --tile: #FBF8F3;
  --band-text: #23241F;
  --band-text2: #5A5247;
  --tile-face: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,0) 55%), var(--tile);
  --tile-edge: 1px solid rgba(74,52,38,.10);
  --tile-shadow: inset 0 1px 0 rgba(255,255,255,.9), -24px 40px 60px -28px rgba(74,52,38,.34), -8px 14px 22px -10px rgba(74,52,38,.2), -1px 2px 3px rgba(74,52,38,.12);
  --row-shadow: inset 0 1px 0 rgba(255,255,255,.9), -10px 16px 24px -16px rgba(74,52,38,.3), -1px 2px 3px rgba(74,52,38,.12);
  --row-shadow-up: inset 0 1px 0 rgba(255,255,255,.9), -16px 26px 34px -16px rgba(74,52,38,.36), -2px 3px 5px rgba(74,52,38,.16);
  --hair: rgba(74,52,38,.12);
  --quiet-line: rgba(74,52,38,.26);
  --rim: #E6DDD0;
  --well-shadow: inset 0 1px 2px rgba(74,52,38,.18);
  --fog-a: rgba(255,255,255,.5);
  --glass: rgba(246,241,234,.84);
  --float-bg: rgba(252,249,244,.97);
  --lift: -36px 60px 80px -30px rgba(74,52,38,.45), -12px 22px 30px -14px rgba(74,52,38,.28), -1px 2px 4px rgba(74,52,38,.15);
  --drop: -6px 14px 24px -12px rgba(74,52,38,.35);
  /* the light twins of the white washes the dark look uses */
  --wash-1: rgba(74,52,38,.04);
  --wash-2: rgba(74,52,38,.065);
  --wash-3: rgba(74,52,38,.1);
  --acc-text: #684710; /* gold words, deep enough to read on paper */
}

[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(74,52,38,.22); background-clip: padding-box; }
[data-theme="light"] select option { background: #FBF8F3; color: #23241F; }

/* hover and pressed washes */
[data-theme="light"] .tab:hover,
[data-theme="light"] .btn:hover,
[data-theme="light"] .log-kind:hover,
[data-theme="light"] .qty button:hover,
[data-theme="light"] .dict-btn:hover,
[data-theme="light"] .pw-toggle:hover,
[data-theme="light"] .hrow-link:hover,
[data-theme="light"] .pipe-row:hover,
[data-theme="light"] .trip:hover,
[data-theme="light"] .act:hover,
[data-theme="light"] .due:hover,
[data-theme="light"] .cal-line:hover,
[data-theme="light"] .fu-dots:hover,
[data-theme="light"] .fu-dots[aria-expanded="true"],
[data-theme="light"] .topbar-show:hover,
[data-theme="light"] .fu-statuschip:hover,
[data-theme="light"] .mnav-a:active,
[data-theme="light"] .mnav-panel a:active { background: var(--wash-2); }

/* quiet fills and lines */
[data-theme="light"] .badge,
[data-theme="light"] .badge.draft { background: var(--wash-2); }
[data-theme="light"] .lines-table .sec td,
[data-theme="light"] .fu-head,
[data-theme="light"] .cal-we { background: var(--wash-1); }
[data-theme="light"] .pipe-track,
[data-theme="light"] .year-bar,
[data-theme="light"] .who-none,
[data-theme="light"] .fu-statuschip-n { background: var(--wash-3); }
[data-theme="light"] .card:has(.badge)::before { background: rgba(74,52,38,.18); }
[data-theme="light"] .log-kind[aria-pressed="true"],
[data-theme="light"] .fu-statuschip.on { border-color: rgba(74,52,38,.14); }
[data-theme="light"] .net-banner { border-bottom-color: rgba(74,52,38,.12); }
[data-theme="light"] .pick-extra input,
[data-theme="light"] .pick-extra select { background: rgba(255,255,255,.65); }
[data-theme="light"] .fu-cell textarea:focus-visible { background: rgba(255,255,255,.8); }
[data-theme="light"] .fu-actions-head { background: color-mix(in srgb, var(--tile) 95%, #4A3426); }
[data-theme="light"] .fu-date-none { color: rgba(74,52,38,.42); }
[data-theme="light"] .fu-date-quick,
[data-theme="light"] .fu-same-btn { text-decoration-color: rgba(74,52,38,.3); }

/* loading placeholders */
[data-theme="light"] .ph-bar { background: linear-gradient(90deg, rgba(74,52,38,.06) 0%, rgba(74,52,38,.12) 50%, rgba(74,52,38,.06) 100%) 0 0/200% 100%; }
[data-theme="light"] .map.is-loading { background: linear-gradient(90deg, rgba(74,52,38,.03) 0%, rgba(74,52,38,.08) 50%, rgba(74,52,38,.03) 100%) 0 0/200% 100%, color-mix(in srgb, var(--rim) 70%, var(--tile)); }

/* raised panels that carry their own edges */
[data-theme="light"] .total-bar {
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0) 70%), var(--tile);
  border-color: rgba(74,52,38,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--lift);
}
[data-theme="light"] .home-portal {
  border-color: rgba(74,52,38,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), var(--lift);
}
[data-theme="light"] .figcard {
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,0) 70%), var(--tile);
  border-color: rgba(74,52,38,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), -16px 26px 36px -18px rgba(74,52,38,.34), -2px 3px 6px rgba(74,52,38,.14);
}
[data-theme="light"] .q-preview-wrap,
[data-theme="light"] .qd-preview {
  background: rgba(74,52,38,.08);
  box-shadow: inset 0 1px 3px rgba(74,52,38,.16);
}

/* the Home map */
[data-theme="light"] .map { box-shadow: 0 0 0 4px var(--rim), 0 0 0 5px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 0 12px rgba(74,52,38,.08); }
[data-theme="light"] .map::after { box-shadow: inset -20px -26px 48px rgba(74,52,38,.16), inset 10px 12px 30px rgba(255,255,255,.3); }
[data-theme="light"] .m-land { stroke: rgba(74,52,38,.24); }

/* calendar: a camp's colour used as text gets deeper, to read on paper */
[data-theme="light"] .cal-quote { color: color-mix(in srgb, var(--tone) 48%, #1E1F1C); }
[data-theme="light"] .cal-today { color: #FFFFFF; background: #7E5816; }

/* ---------- Settings > Appearance: Dark / Light / Automatic (theme.js) ---------- */
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--well); box-shadow: var(--well-shadow); }
.seg button {
  min-height: 36px; padding: 0 16px; border: 1px solid transparent; border-radius: 999px;
  background: none; color: var(--band-text2); font: 500 13.5px/1 var(--font); cursor: pointer;
  transition: background var(--t), color var(--t);
}
.seg button[aria-pressed="true"] { background: var(--tile-face); border-color: var(--hair); color: var(--band-text); font-weight: 600; box-shadow: var(--row-shadow); }
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.set-look { grid-column: 9 / span 4; }
@media (max-width: 1000px) { .set-look { grid-column: 1 / -1; } }
@media (max-width: 760px) { .seg button { min-height: 42px; font-size: 15px; } }