/* Field Notes — styled on the Joelle LB "Forest & Stone" design system (v15).

   Two deliberate departures from the website, both for field legibility:

   1. Numeric and data readouts (hex codes, ΔE values, coordinates, counts) use
      the system sans stack. The design system already reserves sans for
      numerals; here that rule earns its keep twice over, because tabular data
      in a low-contrast serif is hard to read outdoors.
   2. Cormorant Garamond runs small and light by design. Body text sits at 17px
      rather than 16px, and UI labels use weight 500, so the app stays readable
      at arm's length in bright sun.

   A "field mode" toggle drops the paper grain and raises contrast further for
   direct sunlight. */

/* ---------- fonts ---------- */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../vendor/fonts/CormorantGaramond-var.woff2') format('woff2-variations'),
       url('../vendor/fonts/CormorantGaramond-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../vendor/fonts/CormorantGaramond-Italic-var.woff2') format('woff2-variations'),
       url('../vendor/fonts/CormorantGaramond-Italic-var.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'IM Fell English';
  src: url('../vendor/fonts/IMFellEnglish-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IM Fell English SC';
  src: url('../vendor/fonts/IMFellEnglishSC-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */

:root {
  /* Forest & Stone — the six approved colours */
  --midnight-grove: #282C1F;
  --forest-asana:   #515649;
  --sage-breath:    #8D9285;
  --river-pebble:   #C0B4AB;
  --driftwood-sand: #D7CABE;
  --linen-breath:   #EAE3DA;

  /* surfaces — page is white, matching the live site */
  --surface-page: #FFFFFF;
  --surface-card: #F5F1EA;
  --surface-warm: #EAE3DA;
  --surface-sunk: #D7CABE;
  --surface-ink:  #282C1F;

  /* text */
  --text-strong: #282C1F;
  --text-body:   #34382B;
  --text-muted:  #696D60;
  --text-on-ink: #FFFFFF;
  --text-accent: #4F5647;

  /* accents */
  --accent:       #4F5647;
  --accent-hover: #282C1F;
  --accent-soft:  rgba(79, 86, 71, 0.14);
  --accent-warm:  #EAE3DA;

  /* lines */
  --border-hairline: rgba(40, 44, 31, 0.12);
  --border-soft:     rgba(40, 44, 31, 0.08);
  --border-strong:   #A89E90;
  --rule:            rgba(81, 86, 73, 0.40);

  /* status — kept within the family, warm earth rather than alarm red */
  --danger:      #7E3B2B;
  --danger-soft: rgba(126, 59, 43, 0.10);
  --danger-line: rgba(126, 59, 43, 0.32);
  --caution:     #8A6A2F;
  --caution-soft: rgba(138, 106, 47, 0.12);

  /* type */
  --font-display: 'IM Fell English', Georgia, 'Times New Roman', serif;
  --font-sc:      'IM Fell English SC', 'IM Fell English', Georgia, serif;
  --font-body:    'Cormorant Garamond', Georgia, serif;
  --font-numeric: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  /* radii — hand-cut, not digital */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius: var(--radius-sm);

  /* spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 16px;
  --space-4: 24px; --space-5: 32px; --space-6: 48px;

  /* shadows */
  --shadow-whisper:  0px 1px 1px rgba(42, 37, 34, 0.04);
  --shadow-floating: 0px 2px 2px rgba(42, 37, 34, 0.02), 0px 8px 16px -4px rgba(42, 37, 34, 0.06);

  /* motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 0.2s;
  --dur-slow: 0.3s;

  /* layout */
  --tap: 48px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --topbar-h: 54px;
  --tabbar-h: 62px;

  /* One scale for the whole app. Leaflet uses 400–1000 internally, but #map
     isolates those, so nothing here has to out-number them. Anything that
     floats over content must sit above --z-chrome. */
  --z-map-ui: 5;
  --z-chrome: 60;
  --z-flag: 70;
  --z-boot: 900;
  --z-sheet: 1200;
  --z-toast: 1400;
  --z-lightbox: 1500;

  --grain: url('../vendor/texture/paper-grain.png?v=2');
  /* The live site runs a plain white page, so grain stays on the warm card
     surfaces only — paper mats on a white wall, rather than tinting everything.
     The tile is normalised to a near-white mean so multiplying it textures the
     surface instead of greying it. */
  --grain-opacity: 0.7;
}

/* Theme defaults to light, matching the website. The user can choose Dark or
   Match iOS in Settings; when they pick Match iOS, app.js resolves the media
   query and stamps data-theme itself, so this stylesheet only ever sees an
   explicit light or dark. */
:root[data-theme="dark"] {
  --surface-page: #1C2018;
  --surface-card: #252A20;
  --surface-warm: #2E3428;
  --surface-sunk: #171A13;
  --surface-ink:  #EEE6DB;

  --text-strong: #EEE6DB;
  --text-body:   #D4CDC3;
  --text-muted:  #909A97;
  --text-on-ink: #1C2018;
  --text-accent: #A9B29D;

  --accent:       #8D9285;
  --accent-hover: #C4CAB8;
  --accent-soft:  rgba(141, 146, 133, 0.28);
  --accent-warm:  #3A4030;

  --border-hairline: rgba(234, 227, 218, 0.14);
  --border-soft:     rgba(234, 227, 218, 0.08);
  --border-strong:   #5C6353;
  --rule:            rgba(169, 178, 157, 0.35);

  --danger:      #C88A72;
  --danger-soft: rgba(200, 138, 114, 0.14);
  --danger-line: rgba(200, 138, 114, 0.35);
  --caution:     #C7A166;
  --caution-soft: rgba(199, 161, 102, 0.14);

  --grain-opacity: 0.35;
}

/* Field mode: bright sunlight, gloves, arm's length. */
:root[data-field="on"] {
  --grain-opacity: 0;
  --text-body: #282C1F;
  --text-muted: #45493D;
  --border-hairline: rgba(40, 44, 31, 0.24);
  --surface-card: #FFFFFF;
  --border-strong: #8A8377;
}
:root[data-theme="dark"][data-field="on"] {
  --text-body: #F4EFE7;
  --text-muted: #B9C0B2;
  --border-hairline: rgba(234, 227, 218, 0.3);
  --surface-card: #2C3226;
}

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

/* Class rules below set `display` explicitly, which would otherwise beat the
   `hidden` attribute's UA `display: none`. Anything with [hidden] stays hidden. */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0; height: 100%;
  overscroll-behavior-y: none;
}

body {
  font-family: var(--font-body);
  font-size: 18px;   /* the site runs ~19.8px; a shade tighter reads better on a phone */
  line-height: 1.55;
  font-weight: var(--weight-regular);
  background: var(--surface-page);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

/* Paper grain lives on the warm card surfaces, not the page — the page stays
   white like the website. Never over artwork or photographs. */

svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- type ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  color: var(--text-strong);
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h1 { font-size: 30px; }
h2 { font-size: 24px; letter-spacing: 0.01em; }
h3 { font-size: 19px; letter-spacing: 0; }

p { margin: 0 0 0.7em; }
p:last-child { margin-bottom: 0; }
em, i { font-style: italic; }

/* Data readouts: sans, tabular, unambiguous. */
.mono, .num {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-size: 0.86em;
  letter-spacing: 0;
}

.sub { color: var(--text-body); font-size: 15.5px; }
.hint {
  color: var(--text-muted);
  font-size: 13.5px;
  font-family: var(--font-numeric);
  line-height: 1.45;
}
.hint.serif { font-family: var(--font-body); font-size: 15px; }

/* Small-caps eyebrow — the house section label. */
.section-label {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--space-4) 0 var(--space-2);
}
.section-label:first-child { margin-top: var(--space-2); }

/* ---------- boot ---------- */

.boot {
  position: fixed; inset: 0; z-index: var(--z-boot);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; background: var(--surface-page); color: var(--text-muted);
}
.boot p {
  font-family: var(--font-display);
  letter-spacing: 0.16em; text-transform: uppercase; font-size: 13px;
}
.boot-mark {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border-strong); border-top-color: var(--accent);
  animation: spin 1.1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.boot.gone { opacity: 0; pointer-events: none; transition: opacity var(--dur-slow); }

/* ---------- top bar ---------- */

.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-chrome);
  height: calc(var(--topbar-h) + var(--safe-t));
  padding: var(--safe-t) 6px 0;
  display: flex; align-items: center; gap: 2px;
  background: color-mix(in srgb, var(--surface-page) 90%, transparent);
  backdrop-filter: saturate(1.3) blur(12px);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--border-hairline);
}
.topbar-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: var(--weight-regular);
  letter-spacing: 0.06em;
  color: var(--text-strong);
  flex: 1; padding-left: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar-back, .icon-btn {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 0; background: transparent; color: var(--text-strong);
  border-radius: var(--radius-sm); cursor: pointer;
}
.topbar-back svg, .icon-btn svg { width: 21px; height: 21px; }
.topbar-back:active, .icon-btn:active { background: var(--surface-warm); }
.topbar-actions { display: flex; align-items: center; gap: 0; }
.icon-btn.on { color: var(--text-on-ink); background: var(--accent); }

/* ---------- view ---------- */

.view {
  position: absolute;
  top: calc(var(--topbar-h) + var(--safe-t));
  bottom: calc(var(--tabbar-h) + var(--safe-b));
  left: 0; right: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.view.flush { overflow: hidden; }
.pad { padding: var(--space-3) var(--space-3) calc(var(--space-5) + var(--safe-b)); }

/* ---------- tab bar ---------- */

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-chrome);
  height: calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--surface-page) 94%, transparent);
  backdrop-filter: saturate(1.3) blur(12px);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  border-top: 1px solid var(--border-hairline);
}
.tab {
  border: 0; background: transparent; cursor: pointer; padding: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
}
.tab svg { width: 22px; height: 22px; }
.tab.active { color: var(--text-strong); }
.tab:active { opacity: .5; }
.tab-capture { position: relative; }
.capture-ring {
  width: 50px; height: 50px; border-radius: 50%;
  background: var(--midnight-grove); color: var(--linen-breath);
  display: grid; place-items: center; margin-top: -12px;
  border: 1px solid var(--midnight-grove);
  transition: background var(--dur-fast) var(--ease);
}
:root[data-theme="dark"] .capture-ring {
  background: var(--linen-breath); color: var(--midnight-grove); border-color: var(--linen-breath);
}
.capture-ring svg { width: 24px; height: 24px; }
.tab-capture.active .capture-ring { background: var(--forest-asana); border-color: var(--forest-asana); color: var(--linen-breath); }

/* ---------- cards ---------- */

.card {
  position: relative;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}
/* The cotton-paper grain, held to the card surface. */
.card::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  background-size: 384px 384px;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
  border-radius: inherit;
  pointer-events: none;
}
:root[data-theme="dark"] .card::before { mix-blend-mode: soft-light; }
.card > * { position: relative; }
.card.tap { cursor: pointer; transition: border-color var(--dur-fast) var(--ease); }
.card.tap:active { border-color: var(--border-strong); background: var(--surface-warm); }
.card-row { display: flex; align-items: center; gap: 12px; }
.card-row .grow { flex: 1; min-width: 0; }
.card h3 { margin-bottom: 2px; }

.empty { text-align: center; padding: var(--space-6) var(--space-4); color: var(--text-muted); }
.empty svg { width: 36px; height: 36px; color: var(--border-strong); margin-bottom: 14px; stroke-width: 1.2; }
.empty h3 { margin-bottom: 6px; }
.empty p { font-size: 15.5px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 14px 22px;
  font-family: var(--font-display);
  font-size: 14px; line-height: 1;
  letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent; color: var(--text-strong);
  cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.btn svg { width: 17px; height: 17px; stroke-width: 1.6; }
.btn:active { transform: scale(.99); }

/* Solid buttons invert — the house behaviour. */
.btn.primary {
  background: var(--text-strong);
  border-color: var(--text-strong);
  color: var(--text-on-ink);
}
.btn.primary:hover, .btn.primary:active {
  background: transparent;
  color: var(--accent-hover);
  border-color: var(--accent-hover);
}
.btn.wide { width: 100%; }
.btn.danger { color: var(--danger); border-color: var(--danger-line); }
.btn.small {
  min-height: 36px; padding: 9px 14px;
  font-size: 12px; letter-spacing: 0.1em;
}
.btn.small svg { width: 14px; height: 14px; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn-row { display: flex; gap: var(--space-2); }
.btn-row .btn { flex: 1; }
/* In a group, only the first stays filled. */
.btn-row .btn.primary + .btn.primary { background: transparent; color: var(--text-strong); border-color: var(--border-strong); }

/* ---------- tags & chips ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-hairline);
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
  background: transparent; color: var(--text-muted);
}
.pill-ink     { border-color: var(--rule); color: var(--text-accent); background: var(--accent-soft); }
.pill-dye     { border-color: var(--rule); color: var(--text-accent); }
.pill-pigment { border-color: rgba(138,106,47,.4); color: var(--caution); background: var(--caution-soft); }
.pill-mineral { border-color: var(--border-strong); color: var(--text-muted); background: var(--surface-sunk); }
.pill-warn    { border-color: var(--danger-line); color: var(--danger); background: var(--danger-soft); }
.pill-flat    { background: var(--surface-warm); color: var(--text-muted); }
.pills { display: flex; flex-wrap: wrap; gap: 5px; }

.chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; padding: 9px 15px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent; color: var(--text-body);
  font-family: var(--font-display);
  font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.chip.on { background: var(--text-strong); border-color: var(--text-strong); color: var(--text-on-ink); }

/* ---------- forms ---------- */

.field { margin-bottom: var(--space-3); }
.field > label, .field-label {
  display: block;
  font-family: var(--font-display);
  font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 7px;
}
.field .hint { margin-top: 5px; }

input[type=text], input[type=number], input[type=date], input[type=search],
input[type=password], textarea, select {
  width: 100%; min-height: var(--tap);
  padding: 12px 13px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-page);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: 17px;  /* >=16px keeps iOS from zooming on focus */
  appearance: none;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: .75; }
textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23696D60' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 17px;
  padding-right: 38px;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
input[type=range] { width: 100%; appearance: none; background: transparent; height: 34px; }
input[type=range]::-webkit-slider-runnable-track {
  height: 1px; background: var(--border-strong);
}
input[type=range]::-webkit-slider-thumb {
  appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--text-strong); border: 3px solid var(--surface-page);
  margin-top: -11px;
}
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }

.opt-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; }
.opt {
  min-height: 46px; padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: transparent; color: var(--text-body);
  font-family: var(--font-body); font-size: 15px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-align: center;
  transition: background var(--dur-fast) var(--ease);
}
.opt.on { background: var(--text-strong); border-color: var(--text-strong); color: var(--text-on-ink); }

.switch-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; min-height: var(--tap); padding: 8px 0;
}
.switch-row + .switch-row { border-top: 1px solid var(--border-hairline); }
.switch {
  flex: none; width: 50px; height: 28px; border-radius: 14px;
  background: transparent; border: 1px solid var(--border-strong);
  cursor: pointer; position: relative;
  transition: background var(--dur-fast) var(--ease);
}
.switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--border-strong);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.switch.on { background: var(--text-strong); border-color: var(--text-strong); }
.switch.on::after { transform: translateX(22px); background: var(--text-on-ink); }

/* ---------- map ---------- */

/* Two Leaflet quirks handled here:

   1. It writes `position: relative` inline on its container, which beats any
      stylesheet rule — so the size must come from explicit width/height rather
      than from `inset`, or the map collapses to zero height.
   2. Its internal panes carry z-index 400–1000. Without a stacking context on
      the container those compete with the whole page, and the map paints over
      sheets and dialogs. `z-index: 0` traps them inside the map where they
      belong. */
#map {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  isolation: isolate;
  background: var(--surface-sunk);
}
.leaflet-container { font-family: var(--font-numeric); background: var(--surface-sunk); }
.leaflet-control-attribution {
  font-size: 9.5px; background: color-mix(in srgb, var(--surface-page) 82%, transparent) !important;
  color: var(--text-muted);
}
.leaflet-control-attribution a { color: var(--text-accent); }
.map-fabs {
  position: absolute; right: 12px; bottom: 16px; z-index: var(--z-map-ui);
  display: flex; flex-direction: column; gap: 8px;
}
.fab {
  width: 46px; height: 46px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface-page); color: var(--text-strong);
  display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow-whisper);
}
.fab svg { width: 20px; height: 20px; }
.fab:active, .fab.on { background: var(--text-strong); color: var(--text-on-ink); border-color: var(--text-strong); }
.map-note {
  position: absolute; left: 12px; right: 68px; bottom: 16px; z-index: var(--z-map-ui);
  background: var(--surface-page); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 14px; color: var(--text-body);
  box-shadow: var(--shadow-whisper);
}
.pin-dot {
  width: 100%; height: 100%; border-radius: 50% 50% 50% 1px;
  transform: rotate(45deg); border: 1.5px solid var(--linen-breath);
  box-shadow: 0 1px 3px rgba(40,44,31,.4);
}

/* ---------- camera ---------- */

.cam { position: absolute; inset: 0; background: #000; overflow: hidden; }
.cam video, .cam canvas.preview {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.cam-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  padding: 16px 20px calc(18px + var(--safe-b));
  background: linear-gradient(transparent, rgba(28,32,24,.7));
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.cam-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  padding: 12px 16px; display: flex; gap: 8px; align-items: center;
  background: linear-gradient(rgba(28,32,24,.55), transparent);
  color: var(--linen-breath);
  font-family: var(--font-numeric); font-size: 12px; letter-spacing: .04em;
}
.shutter {
  width: 68px; height: 68px; border-radius: 50%;
  border: 2px solid rgba(234,227,218,.9); background: rgba(234,227,218,.22);
  cursor: pointer; flex: none;
}
.shutter:active { transform: scale(.93); }
.cam-side {
  width: 48px; height: 48px; border-radius: var(--radius-sm);
  border: 1px solid rgba(234,227,218,.35); background: rgba(28,32,24,.45);
  color: var(--linen-breath);
  display: grid; place-items: center; cursor: pointer;
}
.cam-side svg { width: 21px; height: 21px; }
.cam-side.thumb { overflow: hidden; padding: 0; }
.cam-side.thumb img { width: 100%; height: 100%; object-fit: cover; }
.cam-msg {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: var(--linen-breath); padding: 36px; text-align: center; z-index: 4;
}
.cam-grid {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .3;
  background:
    linear-gradient(to right, transparent 33.2%, #EAE3DA 33.2%, #EAE3DA 33.4%, transparent 33.4%, transparent 66.5%, #EAE3DA 66.5%, #EAE3DA 66.7%, transparent 66.7%),
    linear-gradient(to bottom, transparent 33.2%, #EAE3DA 33.2%, #EAE3DA 33.4%, transparent 33.4%, transparent 66.5%, #EAE3DA 66.5%, #EAE3DA 66.7%, transparent 66.7%);
}

/* ---------- photos ---------- */

.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 5px; }
.photo-cell {
  position: relative; aspect-ratio: 1; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--surface-sunk); cursor: pointer;
  border: 1px solid var(--border-hairline);
}
.photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-cell .stamp {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 10px 5px 3px;
  font-family: var(--font-numeric); font-size: 10px; color: #EAE3DA;
  background: linear-gradient(transparent, rgba(28,32,24,.75));
}
.photo-add {
  aspect-ratio: 1; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted);
  display: grid; place-items: center; cursor: pointer;
}
.photo-add svg { width: 20px; height: 20px; }

.lightbox {
  position: fixed; inset: 0; z-index: var(--z-lightbox); background: #14170F;
  display: flex; flex-direction: column;
}
.lightbox img { flex: 1; width: 100%; object-fit: contain; min-height: 0; }
.lightbox-bar {
  padding: 12px 16px calc(14px + var(--safe-b));
  display: flex; align-items: center; gap: 10px;
  color: var(--linen-breath); font-size: 14px;
  background: rgba(28,32,24,.7);
}
.lightbox-bar .grow { flex: 1; }

/* ---------- swatches ---------- */

.swatch-strip { display: flex; gap: 6px; align-items: flex-end; }
.swatch-col { flex: 1; min-width: 0; text-align: center; }
.swatch {
  height: 54px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-hairline);
  background-size: cover; background-position: center;
}
.swatch.lg { height: 76px; }
.swatch-col .hint { margin-top: 5px; font-size: 11.5px; }
.swatch-dot {
  width: 34px; height: 34px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-hairline); flex: none;
}

/* ---------- timeline ---------- */

.tl { position: relative; padding-left: 22px; }
.tl::before {
  content: ''; position: absolute; left: 4px; top: 10px; bottom: 10px;
  width: 1px; background: var(--rule);
}
.tl-item { position: relative; margin-bottom: 12px; }
.tl-item::before {
  content: ''; position: absolute; left: -21px; top: 18px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--surface-page); border: 1px solid var(--accent);
}

/* ---------- sheet ---------- */

.sheet-host { position: fixed; inset: 0; z-index: var(--z-sheet); }
.sheet-scrim {
  position: absolute; inset: 0; background: rgba(28, 32, 24, .5);
  animation: fade var(--dur-fast);
}
@keyframes fade { from { opacity: 0; } }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 92%; display: flex; flex-direction: column;
  background: var(--surface-page);
  border-top: 1px solid var(--border-strong);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  animation: rise var(--dur-slow) var(--ease);
}
@keyframes rise { from { transform: translateY(100%); } }
.sheet-head {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 8px 12px 16px; position: relative; flex: none;
  border-bottom: 1px solid var(--border-hairline);
}
.sheet-head h2 { flex: 1; font-size: 20px; }
.sheet-grip {
  position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 2px; background: var(--border-strong);
}
.sheet-close {
  width: 34px; height: 34px; flex: none;
  border: 1px solid var(--border-hairline); border-radius: var(--radius-sm);
  background: transparent; color: var(--text-muted);
  display: grid; place-items: center; cursor: pointer;
}
.sheet-close svg { width: 16px; height: 16px; }
.sheet-body {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: var(--space-3) var(--space-3) calc(var(--space-5) + var(--safe-b));
}

/* ---------- toast ---------- */

.toast-host {
  position: fixed; left: 12px; right: 12px;
  bottom: calc(var(--tabbar-h) + var(--safe-b) + 12px);
  z-index: var(--z-toast); display: flex; flex-direction: column; gap: 7px;
  pointer-events: none;
}
.toast {
  background: var(--midnight-grove); color: var(--linen-breath);
  padding: 13px 16px; border-radius: var(--radius-sm);
  font-size: 15.5px; animation: rise var(--dur-fast);
  box-shadow: var(--shadow-floating);
}
.toast.warn { background: var(--danger); color: #F6EDE9; }

/* ---------- offline flag ---------- */

.offline-flag {
  position: fixed; z-index: var(--z-flag);
  top: calc(var(--topbar-h) + var(--safe-t)); left: 0; right: 0;
  background: var(--caution-soft); color: var(--caution);
  padding: 6px 14px;
  font-family: var(--font-display);
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  display: flex; align-items: center; gap: 7px;
  border-bottom: 1px solid rgba(138,106,47,.28);
}
.offline-flag svg { width: 14px; height: 14px; flex: none; }

/* ---------- misc ---------- */

.bar { height: 3px; background: var(--surface-sunk); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); transition: width var(--dur-slow) var(--ease); }

.warn-box {
  background: var(--danger-soft); border: 1px solid var(--danger-line);
  border-radius: var(--radius-sm); padding: 13px 14px;
  font-size: 15.5px; color: var(--danger);
  display: flex; gap: 10px; align-items: flex-start;
  margin-bottom: var(--space-2);
}
.warn-box svg { width: 18px; height: 18px; flex: none; margin-top: 3px; }
.warn-box b {
  display: block; margin-bottom: 2px;
  font-family: var(--font-display); font-weight: var(--weight-regular);
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 12.5px;
}

.note-box {
  background: var(--surface-warm);
  border-left: 1px solid var(--rule);
  border-radius: 0;
  padding: 12px 14px; font-size: 15.5px; color: var(--text-body);
  margin-bottom: var(--space-2);
}

/* The house "ink rule" divider — a hand-drawn line, slightly off true. */
.divider {
  height: 1px; background: var(--rule); margin: var(--space-4) 0;
  transform: rotate(-0.25deg);
  opacity: .7;
}

.split { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stack > * + * { margin-top: var(--space-2); }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Reference photo credits — small, unobtrusive, always present. */
.credit {
  font-family: var(--font-numeric);
  font-size: 10.5px; color: var(--text-muted);
  margin-top: 4px; line-height: 1.35;
}