/* =====================================================================
   CRISP PASS (2026-08-19) — a shock-clean visual system on the SAME form.
   Structure, fields, and flow are untouched. Foundation:
     • Open Props (vendored) — cool neutral scale + design tokens
     • Lucide icons (vendored, inlined) — replacing emoji glyphs
   Loaded AFTER the form's inline styles, so it refines them by re-mapping
   the very tokens every component already reads (--ink/--hair/--accent…).
   No markup restructured, no build step.
   ===================================================================== */
:root{
  /* neutrals — Open Props cool grays, deliberately chosen over flat #111/#eee */
  --ink:        var(--gray-9);            /* #212529 — crisp near-black */
  --label:      var(--gray-6);            /* #868e96 */
  --hair:       var(--gray-3);            /* #dee2e6 — hair-thin precise line */
  --hair-2:     var(--gray-4);            /* #ced4da */
  --surface:    var(--gray-0);            /* #f8f9fa — faint cool field fill */
  --bg:         #fff;
  --chip-on:    var(--gray-9);
  --chip-on-fg: #fff;

  /* brand accent kept EXACT (#2563eb); tints + focus ring derived from it */
  --accent:     #2563eb;
  --accent-bg:  color-mix(in srgb, #2563eb 8%, #fff);
  --ring:       color-mix(in srgb, #2563eb 28%, transparent);
  --pin-on-bg:  var(--yellow-1);          /* #fff3bf */
  --pin-on-fg:  var(--yellow-8);          /* #f08c00 */

  /* radii + elevation — tuned iOS scale */
  --r-input: 11px;
  --sh-1: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.08);
  --sh-2: 0 2px 6px rgba(16,24,40,.08), 0 6px 18px rgba(16,24,40,.10);
}

/* ---- typography: tighter, more intentional ---- */
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
      letter-spacing:-.006em; color:var(--ink); }
.title-row h1{ font-size:19px; font-weight:800; letter-spacing:-.03em; }
.section-label, .policy-label{ font-size:10.5px; letter-spacing:.11em; color:var(--label); font-weight:600; }
.counter{ font-weight:600; color:var(--label); }

/* ---- header / footer: crisp line + faint lift ---- */
header{ border-bottom:1px solid var(--hair); box-shadow:var(--sh-1); }
footer{ border-top:1px solid var(--hair); box-shadow:0 -2px 12px rgba(16,24,40,.05); }

/* ---- pills: precise, with an accent focus ring ---- */
.pill{ border:1px solid var(--hair); box-shadow:var(--sh-1); background:#fff; }
.pill:focus-within{ border-color:var(--accent); background:var(--accent-bg); box-shadow:0 0 0 4px var(--ring); }
.pill .key{ font-size:9.5px; letter-spacing:.09em; color:var(--label); font-weight:600; }
.pill .v{ color:var(--ink); letter-spacing:-.01em; }

/* ---- inline Lucide glyphs on the side buttons (pin / auto-increment) ---- */
.side .ico{ width:14px; height:14px; display:block; }
.pill .side{ opacity:.42; color:var(--label); }
.pill .side.on{ opacity:1; }
#auto-toggle.on{ color:var(--accent); }
.pill .side.pin.on{ background:var(--pin-on-bg); color:var(--pin-on-fg); }

/* ---- photo slots: crisp empty state, rich filled ---- */
.slots{ gap:7px; }
.slot{ border:1.5px dashed var(--hair-2); border-radius:13px; background:var(--surface); color:var(--label); }
.slot .ico-cam{ width:20px; height:20px; opacity:.72; }
.slot .lab{ font-size:9px; letter-spacing:.03em; color:var(--label); }
.slot .n{ color:var(--label); }
.slot.filled{ border:1px solid var(--hair); box-shadow:var(--sh-1); }
.slot .rm{ background:rgba(17,24,39,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.slot .rm .ico{ width:13px; height:13px; }

/* ---- condition chips: crisp, filled-selected ---- */
.chip{ border:1px solid var(--hair); border-radius:12px; box-shadow:var(--sh-1); font-weight:500; color:var(--ink); }
.chip.on{ background:var(--chip-on); color:#fff; border-color:var(--chip-on); box-shadow:var(--sh-2); }

/* ---- dims + textareas: refined fields + focus ring ---- */
.dim{ border:1px solid var(--hair); border-radius:var(--r-input); background:var(--surface); }
.dim:focus-within{ border-color:var(--accent); background:#fff; box-shadow:0 0 0 4px var(--ring); }
.dim .key{ color:var(--label); }
/* weight: present but secondary — measured only on shippable categories, so it
   reads quieter than L/W/H until touched (owner: "there, but rarely used"). */
.dim-opt{ opacity:.6; }
.dim-opt:focus-within{ opacity:1; }
textarea{ border:1px solid var(--hair); border-radius:var(--r-input); background:var(--surface); }
textarea:focus{ border-color:var(--accent); background:#fff; box-shadow:0 0 0 4px var(--ring); }

/* ---- footer controls + Save ---- */
.foot-row select{ border:1px solid var(--hair); border-radius:var(--r-input); box-shadow:var(--sh-1); color:var(--ink); }
.save{ border-radius:13px; font-weight:600; letter-spacing:-.01em; box-shadow:var(--sh-2); }
.save:disabled{ background:var(--gray-4); color:#fff; box-shadow:none; }
.draft{ color:var(--label); }

/* ---- floating fabs: crisp elevation ---- */
#talk-fab{ box-shadow:var(--sh-2); font-weight:600; }

/* ---- toast + accessible focus ---- */
.toast{ border-radius:12px; box-shadow:var(--sh-2); font-weight:500; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }

/* ============================================================================
   BOTTOM CLUSTER — organize Condition / Item facts / Maker & style (2026-08-19)
   Same fields, same logic. Just clear grouping: unified headers with dividers,
   condition detail nested under the grade, a smooth See-Notes reveal, and the
   rare "No dims" waive quieted from a black bar to a secondary toggle.
   ============================================================================ */
/* the injected "Photographer notes" label matches the other group headers */
#photog-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.11em;
  color:var(--label); font-weight:600; margin:0 0 10px; }
/* Item facts + Maker & style read as their own blocks beneath Condition */
.policy-label, #photog-label{ margin-top:20px; padding-top:16px; border-top:1px solid var(--hair); }

/* condition detail (quick phrases + notes) belongs to the grade above it */
#cond-notes:not([hidden]){ border-left:3px solid var(--hair-2); }
.policy-phrases:not([hidden]){ border-left:3px solid var(--hair-2); padding-left:11px; margin-left:1px; }
#cond-notes:not([hidden]){ animation:reveal .24s var(--ease-out) both; }
.policy-phrases:not([hidden]){ animation:reveal .22s var(--ease-out) both; }
@keyframes reveal{ from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce){ #cond-notes,.policy-phrases{ animation:none !important } }