/* R2-07: canonical KeyProof palette.  This is the single source of truth
   for shared color / radius / shadow / typography tokens.  Load it on
   every page BEFORE any inline <style> block so per-page overrides still
   win — but drift now has a canonical anchor to compare against.

   Naming conventions:
   - --kp-*         Shared shell tokens used by pm-shell.js + PM pages.
   - --ink, --paper, --evergreen, --clay, --tan, --hairline
                    Legacy short names used by the tenant/report pages
                    (walkthrough.html, share.html, my-walkthrough.html,
                    w.html, my.html).  Aliases below keep both worlds
                    working during the R3-04 viewer consolidation.

   Palette rationale — the whole thing is a two-hue system: evergreen
   (trust / verified) + clay (attention / damage).  Everything else is
   neutral cream/ink.  Contrast: --ink-mute meets AA 4.5:1 on paper. */

:root {
  /* ── Ink ── */
  --kp-ink:        #221F1A;
  --kp-ink-soft:  #5F564C;
  --kp-ink-mute:  #6E6A62;  /* was 9C9286 — bumped for AA 4.5:1 */
  --ink:          #221F1A;
  --ink-soft:    #5F564C;
  --ink-mute:    #6E6A62;

  /* ── Paper / surface ── */
  --kp-paper:      #EFEAE1;
  --kp-paper-dp:   #E9E3DA;
  --kp-surface:    #FBF9F4;
  --kp-cream:      #FBF7EE;
  --kp-band:       #EBE3D3;
  --paper:        #EFEAE1;
  --paper-dp:    #E9E3DA;
  --surface:     #FBF9F4;
  --band:        #EBE3D3;

  /* ── Evergreen (brand / verified) ── */
  --kp-evergreen:       #2F6B4E;
  --kp-evergreen-dp:    #275B43;
  --kp-evergreen-mint:  #7FB89A;
  --kp-evergreen-pale:  #E5F0E9;
  --evergreen:          #2F6B4E;
  --evergreen-dp:      #275B43;
  --evergreen-mint:    #7FB89A;
  --evergreen-pale:    #E5F0E9;

  /* ── Accents ── */
  --kp-clay:      #B5462F;      /* damage / warning */
  --kp-clay-pale: #F7E3DE;
  --kp-tan:       #C2871F;      /* audit / caution   */
  --kp-sky:       #2E5590;      /* multi-unit tag    */
  --kp-sky-pale:  #E4EAF4;
  --clay:        #B5462F;
  --clay-pale:  #F7E3DE;
  --tan:         #C2871F;
  --sky:         #2E5590;
  --sky-pale:   #E4EAF4;

  /* ── Lines ── */
  --kp-line:         rgba(34,31,26,0.10);
  --kp-line-strong:  rgba(34,31,26,0.18);
  --kp-line-soft:    rgba(34,31,26,0.06);
  --hairline:        rgba(34,31,26,0.10);
  --hairline-strong: rgba(34,31,26,0.18);
  --hairline-soft:   rgba(34,31,26,0.06);

  /* ── Aliases used only by pm-shell.js injected styles ── */
  --kp-sub:  #5F564C;
  --kp-mute: #6E6A62;

  /* ── Radii / shadow ── */
  --kp-radius-sm: 8px;
  --kp-radius-md: 12px;
  --kp-radius-lg: 16px;
  --kp-shadow-md: 0 8px 20px rgba(34,31,26,0.08);

  /* ── Shell chrome ── Sidebar width used by both `.nav` in kp-wireframe.css
     and `.pm-sidebar` in pm-shell.js. Single source of truth.
     Turn 8 · 8a locks this at 196px. */
  --kp-sidebar-w: 196px;

  /* ── Typography ── */
  --kp-font-serif: "Instrument Serif", Georgia, serif;
  --kp-font-signature: "Instrument Serif", "Snell Roundhand", "Zapfino", Georgia, serif;
}

/* ─────────────────────────────────────────────────────────────────
   R2-11: responsive breakpoints.  These target class names shared
   across pages so the same rule fixes every stat strip / media grid
   without touching individual page CSS blocks.
   ───────────────────────────────────────────────────────────────── */

/* Small phones: stat strips collapse from 4-across to 2×2, so long
   numbers don't clip.  Applies to .stats-card, .stat-strip, and the
   .prop-stats row on the properties list.  Also caps letter-spacing
   on eyebrow labels so uppercase KEYPROOF WALKTHROUGH REPORT still
   fits in ~340px viewports. */
@media (max-width: 480px) {
  .stats-card,
  .stat-strip,
  .prop-stats-quad,
  [data-kp-stat-strip] {
    grid-template-columns: 1fr 1fr !important;
    row-gap: 12px;
  }
  .eyebrow,
  .kp-eyebrow,
  [data-kp-eyebrow] {
    letter-spacing: 1.2px !important;
  }
  h1, h2 { letter-spacing: -0.4px !important; }
}

/* Tighter — flip the media grid to a single column so long captions
   don't get squeezed to two-word lines beside a thumbnail.  Also lets
   damage flags read at full width. */
@media (max-width: 420px) {
  .photo-grid,
  .media-grid,
  .kp-media-grid,
  [data-kp-media-grid] {
    grid-template-columns: 1fr !important;
  }
  .capture-actions {
    grid-template-columns: 1fr !important;
  }
}

/* Nav labels stay legible at every width — pm-shell.js sometimes hides
   labels below a tight width, but the audit called out that the icons
   alone are ambiguous.  Force the label back in. */
@media (max-width: 900px) {
  .pm-nav .pm-nav-label,
  [data-kp-nav-label] {
    display: inline !important;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Group-by accordions (walkthroughs / invites property groups).
   Native <details> ships a tiny disclosure triangle that's easy to
   miss on a busy list.  Hide it and add a clear +/− tile in the
   summary that flips on toggle.
   ───────────────────────────────────────────────────────────────── */
details.kp-group > summary {
  list-style: none;   /* Firefox / Chrome */
  position: relative;
  padding-left: 40px !important;
  user-select: none;
}
details.kp-group > summary::-webkit-details-marker,
details.kp-group > summary::marker {
  display: none;      /* Safari */
  content: "";
}
details.kp-group > summary::before {
  content: "+";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--kp-evergreen-pale, #E5F0E9);
  color: var(--kp-evergreen-dp, #275B43);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition: background 120ms, color 120ms, transform 120ms;
}
details.kp-group[open] > summary::before {
  content: "\2212";   /* U+2212 minus sign — reads cleaner than ASCII "-" */
  background: var(--kp-evergreen, #2F6B4E);
  color: white;
}
details.kp-group > summary:hover::before {
  background: var(--kp-evergreen, #2F6B4E);
  color: white;
}