@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

/* ════════════════════════════════════════════════════════════════════════
   Paranormal Investigation Bureau — admin + frontend styles (v3.0)
   Occult palette: deep purples, candlelight ambers, aged parchment.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --pinv-bg:        #0e0a1a;
  --pinv-surface:   #1a1525;
  --pinv-surface-2: #221b30;
  --pinv-border:    #3a2f45;
  --pinv-border-2:  #5a4a36;
  --pinv-text:      #e0d5c0;
  --pinv-subtle:    #8a7c6e;
  --pinv-primary:   #6c3483;
  --pinv-primary-2: #8e44ad;
  --pinv-accent:    #c8a96a;
  --pinv-warn:      #d68a30;
  --pinv-danger:    #7a0d0d;
  --pinv-success:   #1d6f42;
}

.pinv-wrap *, .pinv-fe-shell * { box-sizing: border-box; }

.pinv-wrap,
.pinv-fe-shell {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* Anchor the base size. Without this the app inherits whatever the host sets
     — 13px in WP admin, but often 18–20px in a front-end theme — so the same
     screen read one size in admin and oversized on the public page. Everything
     that needs to be bigger (headings, stat numbers) sets its own size. */
  font-size: 13px;
  line-height: 1.55;
  color: var(--pinv-text);
  background: var(--pinv-bg);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(108, 52, 131, 0.08), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(200, 169, 106, 0.05), transparent 50%);
  padding: 16px 24px 60px;
  margin-right: 20px;
}
.pinv-wrap h1, .pinv-wrap h2, .pinv-wrap h3,
.pinv-fe-shell h1, .pinv-fe-shell h2, .pinv-fe-shell h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--pinv-text);
  letter-spacing: 0.01em;
  font-weight: 600;
}
.pinv-wrap a, .pinv-fe-shell a { color: var(--pinv-accent); }
.pinv-wrap a:hover, .pinv-fe-shell a:hover { color: #f3ead7; }

/* ── Header ─────────────────────────────────────────────────────────── */
.pinv-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0 18px; border-bottom: 1px solid var(--pinv-border);
  margin-bottom: 18px;
}
.pinv-header-title { display: flex; align-items: center; gap: 12px; }
.pinv-header-title h1 { margin: 0; font-size: 28px; }
.pinv-header-actions { display: flex; gap: 8px; }

.pinv-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--pinv-primary), var(--pinv-primary-2));
  color: #f3ead7;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  box-shadow: 0 0 12px rgba(108, 52, 131, 0.4);
}

/* ── Buttons ────────────────────────────────────────────────────────── */
.pinv-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--pinv-surface-2);
  color: var(--pinv-text);
  border: 1px solid var(--pinv-border-2);
  padding: 7px 14px;
  border-radius: 3px;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}
.pinv-btn:hover { background: var(--pinv-surface); border-color: var(--pinv-accent); color: var(--pinv-text); }
.pinv-btn.primary {
  background: linear-gradient(135deg, var(--pinv-primary), var(--pinv-primary-2));
  border-color: var(--pinv-primary-2); color: #f3ead7;
  box-shadow: 0 0 8px rgba(108, 52, 131, 0.3);
}
.pinv-btn.primary:hover { box-shadow: 0 0 14px rgba(108, 52, 131, 0.5); }
.pinv-btn.danger {
  background: var(--pinv-danger); border-color: #5a0808; color: #f3ead7;
}
.pinv-btn.danger:hover { background: #9c1010; }
.pinv-btn.ghost { background: transparent; }

/* ── Filter bar ─────────────────────────────────────────────────────── */
.pinv-filter-bar {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 12px; background: var(--pinv-surface); border: 1px solid var(--pinv-border);
  border-radius: 4px; margin-bottom: 18px;
}
.pinv-filter-bar input[type="search"], .pinv-filter-bar input[type="text"], .pinv-filter-bar select {
  background: var(--pinv-bg); color: var(--pinv-text);
  border: 1px solid var(--pinv-border-2); padding: 6px 10px; border-radius: 3px;
  font-family: inherit; font-size: 13px; min-width: 180px;
}
.pinv-filter-bar input[type="search"] { flex: 1; min-width: 240px; }

/* ── Cards (universal) ──────────────────────────────────────────────── */
.pinv-card {
  background: var(--pinv-surface);
  border: 1px solid var(--pinv-border);
  border-radius: 4px;
  padding: 16px;
  transition: border-color 0.15s ease;
  display: block;
  text-decoration: none;
  color: var(--pinv-text);
  /* Anchor the base text size so descendants without their own font-size rule
   * (bare <p>, .pinv-subtle, <li>, etc.) don't pick up the theme's larger
   * body text. h2/h3 and explicit utility classes override below. */
  font-size: 13px;
  line-height: 1.5;
}
.pinv-card:hover { border-color: var(--pinv-accent); }
.pinv-card h2, .pinv-card h3 { margin: 0 0 6px; font-size: 18px; }
.pinv-card p { margin: 4px 0; }
.pinv-card ul, .pinv-card ol { margin: 4px 0 0; padding-left: 18px; font-size: 13px; }
.pinv-card li { margin: 2px 0; }
.pinv-card-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.pinv-meta { font-size: 12px; color: var(--pinv-subtle); margin-bottom: 6px; }
/* A card is a preview of a record, not a copy of it. Clamping here rather
   than at each call site is what keeps every card grid in the app consistent:
   one long note can no longer stretch its tile out of line with its row. */
.pinv-summary {
  font-size: 13px; color: var(--pinv-text); line-height: 1.5;
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden; overflow-wrap: anywhere;
  margin: 4px 0;
}
.pinv-summary:empty { display: none; }
/* Line clamps. A card in a grid should be a fixed-size preview of a record,
   not a variable-height copy of it — one long note otherwise stretches its
   card and leaves a ragged row beside it. The full text is still in the DOM
   (searchable, selectable) and on the record's own page. */
.pinv-clamp-1, .pinv-clamp-2, .pinv-clamp-3, .pinv-summary-2 {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.pinv-clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.pinv-clamp-2, .pinv-summary-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.pinv-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.pinv-subtle { color: var(--pinv-subtle); }
.pinv-empty { color: var(--pinv-subtle); font-style: italic; padding: 24px; text-align: center; }
.pinv-loading { color: var(--pinv-accent); padding: 20px; text-align: center; font-style: italic; }
.pinv-loading::before { content: '◐ '; animation: pinv-spin 1.4s linear infinite; display: inline-block; }
@keyframes pinv-spin { to { transform: rotate(360deg); } }

/* ── Case card (specialized) ────────────────────────────────────────── */
.pinv-case-card {
  border-top: 4px solid var(--pinv-primary);
  position: relative;
}
.pinv-case-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pinv-case-card-foot { display: flex; justify-content: space-between; margin-top: 10px; }
.pinv-case-card h3 { font-size: 17px; }

/* ── Pills ──────────────────────────────────────────────────────────── */
.pinv-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #f3ead7;
  background: var(--pinv-subtle);
  text-transform: uppercase;
}

/* ── Case detail header ────────────────────────────────────────────── */
.pinv-case-header {
  padding: 16px 20px;
  background: linear-gradient(180deg, var(--pinv-surface-2), var(--pinv-surface));
  border: 1px solid var(--pinv-border);
  border-radius: 6px;
  margin-bottom: 16px;
  display: flex; justify-content: space-between; align-items: flex-start;
}
.pinv-case-meta h1 { margin: 4px 0 6px; font-size: 32px; }
.pinv-case-subline { color: var(--pinv-subtle); font-size: 13px; }
.pinv-case-actions { display: flex; flex-wrap: wrap; gap: 6px; max-width: 50%; }
.pinv-back-link { font-size: 12px; }

/* ── Case detail tabs ──────────────────────────────────────────────── */
.pinv-case-tabs {
  display: flex; flex-wrap: wrap; gap: 2px;
  border-bottom: 2px solid var(--pinv-border-2);
  margin-bottom: 18px;
  padding: 0 4px;
}
.pinv-case-tabs button {
  background: transparent; color: var(--pinv-subtle);
  border: none; padding: 10px 14px; cursor: pointer;
  font-family: inherit; font-size: 13px;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.pinv-case-tabs button:hover { color: var(--pinv-text); }
.pinv-case-tabs button.active {
  color: var(--pinv-accent);
  border-bottom-color: var(--pinv-accent);
}
.pinv-tab-body { min-height: 200px; }

/* ── Overview grid (case detail Overview tab) ──────────────────────── */
.pinv-overview-grid {
  display: grid; gap: 18px;
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 900px) { .pinv-overview-grid { grid-template-columns: 1fr; } }
.pinv-overview-main, .pinv-overview-side { display: flex; flex-direction: column; gap: 14px; }
.pinv-overview-side .pinv-card { padding: 12px 14px; }
.pinv-narrative p { margin: 0 0 10px; line-height: 1.6; }
.pinv-confidence-badge {
  display: inline-block; margin-left: 8px;
  padding: 3px 10px; border-radius: 3px; font-size: 12px; color: #f3ead7;
}

.pinv-dl {
  display: flex; justify-content: space-between;
  padding: 4px 0; border-bottom: 1px dotted var(--pinv-border);
  font-size: 13px;
}
.pinv-dl:last-child { border-bottom: none; }
.pinv-dl dt { color: var(--pinv-subtle); margin: 0; }
.pinv-dl dd { color: var(--pinv-text); margin: 0; font-weight: 500; }

.pinv-tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pinv-tag {
  display: inline-block; padding: 3px 9px; border-radius: 3px;
  font-size: 11px; color: #f3ead7; font-weight: 500;
}

/* ── Stat grid (dashboard) ─────────────────────────────────────────── */
.pinv-stat-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.pinv-stat-card {
  background: var(--pinv-surface);
  border: 1px solid var(--pinv-border);
  border-left: 4px solid var(--pinv-subtle);
  border-radius: 4px;
  padding: 14px;
  text-align: center;
}
.pinv-stat-icon { font-size: 28px; line-height: 1; }
.pinv-stat-num { font-size: 32px; font-weight: 700; font-family: 'Cormorant Garamond', serif; color: var(--pinv-accent); }
.pinv-stat-label { font-size: 12px; color: var(--pinv-subtle); text-transform: uppercase; letter-spacing: 0.04em; }
.pinv-dashboard-section { margin-bottom: 28px; }
.pinv-dashboard-section h2 { margin: 0 0 12px; }

/* ── Forms / modals ────────────────────────────────────────────────── */
.pinv-modal {
  position: fixed; inset: 0;
  background: rgba(14, 10, 26, 0.85);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100000;
  padding: 30px 20px;
  overflow-y: auto;
}
.pinv-modal-card {
  background: var(--pinv-surface);
  border: 1px solid var(--pinv-border-2);
  border-radius: 6px;
  max-width: 800px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 30px rgba(108, 52, 131, 0.2);
}
.pinv-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--pinv-border);
}
.pinv-modal-head h2 {
  margin: 0;
  font-size: 22px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  color: var(--pinv-text);
}
.pinv-modal-close {
  background: transparent; border: none; color: var(--pinv-subtle); font-size: 22px;
  cursor: pointer; padding: 0 6px;
}
.pinv-modal-close:hover { color: var(--pinv-text); }
.pinv-modal-body { padding: 18px; color: var(--pinv-text); }
/* Textareas stay freely resizable — that's a useful affordance — but they
   can't be dragged wider than the dialog, which previously pushed the grip
   out over the backdrop where the release read as "dismiss". */
.pinv-field textarea { resize: both; max-width: 100%; min-width: 100%; }
.pinv-modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px; border-top: 1px solid var(--pinv-border);
}
/* Modals are appended directly to body, outside .pinv-wrap, so explicitly set
 * the typography / color tokens they need. */
.pinv-modal-card { font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; color: var(--pinv-text); }
.pinv-modal-card * { box-sizing: border-box; }

.pinv-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pinv-form-section {
  grid-column: 1 / -1;
  font-family: 'Cormorant Garamond', serif; font-size: 18px;
  color: var(--pinv-accent);
  margin: 8px 0 0; padding-bottom: 4px;
  border-bottom: 1px dotted var(--pinv-border-2);
}
.pinv-field { display: flex; flex-direction: column; gap: 5px; }
.pinv-field.full { grid-column: 1 / -1; }
.pinv-field label { font-size: 12px; color: var(--pinv-subtle); text-transform: uppercase; letter-spacing: 0.04em; }
.pinv-field .req { color: var(--pinv-danger); }
.pinv-field input, .pinv-field textarea, .pinv-field select {
  background: var(--pinv-bg);
  color: var(--pinv-text);
  border: 1px solid var(--pinv-border-2);
  padding: 7px 10px; border-radius: 3px;
  font-family: inherit; font-size: 13px;
}
.pinv-field input[type="checkbox"] { width: auto; margin-right: 6px; }

/* Checkbox fields: render the box and its label on one row with normal-case
 * sentence text. The whole .pinv-field cell no longer dwarfs the tiny checkbox. */
.pinv-field:has(> input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
}
.pinv-field:has(> input[type="checkbox"]) input[type="checkbox"] {
  order: -1;
  margin: 0;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--pinv-primary);
}
.pinv-field:has(> input[type="checkbox"]) label {
  margin: 0;
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
  color: var(--pinv-text);
  cursor: pointer;
  line-height: 1.3;
}
.pinv-field input:focus, .pinv-field textarea:focus, .pinv-field select:focus {
  outline: none; border-color: var(--pinv-accent); box-shadow: 0 0 6px rgba(200, 169, 106, 0.3);
}
.pinv-multi { display: flex; flex-wrap: wrap; gap: 6px; }
.pinv-multi-item {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px;
  background: var(--pinv-bg);
  border: 1px solid var(--pinv-border-2);
  border-radius: 3px;
  font-size: 12px;
}
.pinv-hint { font-size: 11px; color: var(--pinv-subtle); margin: 0; }
.pinv-phenom-subform { grid-column: 1 / -1; padding: 12px; background: var(--pinv-surface-2); border-radius: 4px; }

/* ── Toast ─────────────────────────────────────────────────────────── */
.pinv-toast {
  position: fixed; bottom: 30px; right: 30px;
  background: var(--pinv-surface-2);
  border: 1px solid var(--pinv-accent);
  border-radius: 4px;
  padding: 12px 18px;
  color: var(--pinv-text);
  font-size: 13px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.5), 0 0 12px rgba(200, 169, 106, 0.2);
  transform: translateY(60px); opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 100001;
}
.pinv-toast.show { transform: translateY(0); opacity: 1; }
.pinv-toast.error { border-color: var(--pinv-danger); }
.pinv-toast.success { border-color: var(--pinv-success); }

/* ── Timeline ──────────────────────────────────────────────────────── */
.pinv-timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--pinv-border-2); padding-left: 22px; }
.pinv-timeline-item { position: relative; margin-bottom: 14px; }
.pinv-timeline-item::before {
  content: '✦'; color: var(--pinv-accent); position: absolute; left: -32px; top: 0;
  font-size: 12px; line-height: 1.4;
}
.pinv-timeline-item { font-size: 13px; }
.pinv-timeline-time { font-size: 11px; color: var(--pinv-subtle); margin-bottom: 3px; }
/* The activity title is a button, so it inherits the UA's form-control font
   unless told otherwise — spell out the size instead of letting it float. */
.pinv-timeline-body .pinv-title-inline { font-size: 13px; }
.pinv-timeline-body p { margin: 3px 0; line-height: 1.5; font-size: 13px; }
.pinv-timeline-body .pinv-subtle { font-size: 12px; }
.pinv-timeline-body .pinv-actions .pinv-btn { padding: 2px 8px; font-size: 11px; }

/* ── Search results ────────────────────────────────────────────────── */
.pinv-search-group { margin-bottom: 18px; }
.pinv-search-group h3 { color: var(--pinv-accent); text-transform: uppercase; font-size: 13px; letter-spacing: 0.06em; }
.pinv-search-row {
  display: block; padding: 8px 12px; margin-bottom: 4px;
  background: var(--pinv-surface); border: 1px solid var(--pinv-border);
  border-radius: 3px; text-decoration: none; color: var(--pinv-text);
}
.pinv-search-row:hover { border-color: var(--pinv-accent); }

/* ── Settings / vocab editor ───────────────────────────────────────── */
.pinv-settings-section { margin-bottom: 28px; padding: 18px; background: var(--pinv-surface); border: 1px solid var(--pinv-border); border-radius: 4px; }
.pinv-settings-section h2 { margin-top: 0; color: var(--pinv-accent); }
.pinv-vocab-block {
  background: var(--pinv-surface-2);
  border: 1px solid var(--pinv-border);
  border-radius: 3px;
  padding: 10px 14px;
  margin-bottom: 10px;
}
.pinv-vocab-block summary {
  cursor: pointer;
  font-weight: 600;
  padding: 4px 0;
  color: var(--pinv-text);
  user-select: none;
}
.pinv-vocab-block[open] summary { margin-bottom: 10px; border-bottom: 1px dotted var(--pinv-border); padding-bottom: 8px; }
.pinv-vocab-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  font-size: 13px;
}
.pinv-vocab-table th, .pinv-vocab-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--pinv-border);
  background: transparent;
  color: var(--pinv-text);
  vertical-align: middle;
}
.pinv-vocab-table th {
  color: var(--pinv-accent);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.pinv-vocab-table input[type="text"],
.pinv-vocab-table input[type="color"],
.pinv-vocab-table select {
  background: var(--pinv-bg);
  color: var(--pinv-text);
  border: 1px solid var(--pinv-border-2);
  padding: 5px 8px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 13px;
}
.pinv-vocab-table input[type="color"] { padding: 1px; height: 30px; width: 50px; cursor: pointer; }
.pinv-pin-preview {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: #f3ead7;
  font-size: 14px;
  border: 1px solid rgba(243, 234, 215, 0.2);
}

/* ── Import/Export table ───────────────────────────────────────────── */
.pinv-iox-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--pinv-bg);
  color: var(--pinv-text);
}
.pinv-iox-table th, .pinv-iox-table td {
  padding: 8px 10px; text-align: left;
  border-bottom: 1px solid var(--pinv-border);
  color: var(--pinv-text);
  background: transparent;
}
.pinv-iox-table th {
  background: var(--pinv-surface-2);
  color: var(--pinv-accent);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pinv-iox-table tbody tr:nth-child(2n) td { background: rgba(108, 52, 131, 0.08); }
.pinv-iox-table tbody tr:hover td { background: rgba(200, 169, 106, 0.06); }

/* ── Actions row ───────────────────────────────────────────────────── */
.pinv-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.pinv-actions .pinv-btn { padding: 4px 10px; font-size: 12px; }

/* ── Frontend shortcode shell ──────────────────────────────────────── */
/* Centered inside whatever container the host theme provides, capped at
 * 1400px. (Matches CaseHound's pattern — robust across themes, doesn't
 * depend on the parent being centered in the viewport.) */
.pinv-fe-shell {
  margin: 18px auto;
  max-width: 1400px;
  width: auto;
  min-height: 80vh;
  border: 1px solid var(--pinv-border-2);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.pinv-fe-shell .pinv-fe-main { padding: 16px; }
.pinv-fe-header {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(180deg, var(--pinv-surface-2), var(--pinv-surface));
  border-bottom: 1px solid var(--pinv-border);
}
.pinv-fe-brand { display: flex; align-items: center; gap: 10px; }
.pinv-fe-brand strong { font-family: 'Cormorant Garamond', serif; font-size: 18px; }
.pinv-fe-nav { display: flex; flex-wrap: wrap; gap: 4px; }
.pinv-fe-nav a {
  color: var(--pinv-subtle); text-decoration: none;
  padding: 4px 10px; border-radius: 3px; font-size: 12px;
}
.pinv-fe-nav a:hover { background: rgba(243,234,215,0.05); color: var(--pinv-text); }
.pinv-fe-nav a.active { color: var(--pinv-accent); background: rgba(200, 169, 106, 0.08); }
.pinv-fe-user { display: flex; align-items: center; gap: 8px; color: var(--pinv-subtle); font-size: 12px; }
.pinv-fe-main { padding: 16px; }
.pinv-fe-gate { padding: 60px 30px; text-align: center; }

/* ── Print ─────────────────────────────────────────────────────────── */
/* ── Formatted-text (transcript) field + display ─────────────────────────── */
.pinv-richtext {
  min-height: 160px; max-height: 420px; overflow-y: auto;
  padding: 10px 12px;
  background: var(--pinv-bg);
  border: 1px solid var(--pinv-border); border-radius: 4px;
  color: var(--pinv-text); font-size: 13px; line-height: 1.55;
  white-space: normal;
}
.pinv-richtext:focus { outline: 2px solid var(--pinv-accent); outline-offset: -1px; }
/* Placeholder for an empty contenteditable — :empty alone misses the stray
   <br> browsers leave behind, so the JS clears truly-empty content to ''. */
.pinv-richtext:empty::before {
  content: attr(data-placeholder);
  color: var(--pinv-subtle); pointer-events: none;
}
.pinv-richtext p { margin: 0 0 8px; }
.pinv-richtext ul, .pinv-richtext ol { margin: 4px 0 8px 20px; padding: 0; }
.pinv-richtext blockquote {
  margin: 4px 0 8px; padding-left: 10px;
  border-left: 2px solid var(--pinv-border-2); color: var(--pinv-subtle);
}
/* Transcripts pasted as a timestamp / speaker / line grid keep their table. */
.pinv-richtext table, .pinv-transcript table { border-collapse: collapse; width: 100%; margin: 4px 0 8px; }
.pinv-richtext td, .pinv-richtext th,
.pinv-transcript td, .pinv-transcript th {
  border: 1px solid var(--pinv-border); padding: 4px 6px;
  text-align: left; vertical-align: top;
}

/* Read-only transcript on the evidence card. */
.pinv-transcript-wrap { margin: 6px 0; }
.pinv-transcript-wrap > summary {
  cursor: pointer; font-size: 12px; color: var(--pinv-accent);
  padding: 4px 0; user-select: none;
}
.pinv-transcript {
  max-height: 320px; overflow-y: auto;
  margin-top: 6px; padding: 8px 10px;
  background: var(--pinv-bg);
  border-left: 2px solid var(--pinv-accent);
  font-size: 12px; line-height: 1.6;
}
.pinv-transcript p { margin: 0 0 6px; }
.pinv-transcript ul, .pinv-transcript ol { margin: 4px 0 6px 18px; padding: 0; }

/* ── Import / Export screens ─────────────────────────────────────────────── */
.pinv-iox-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 8px 0 16px; padding: 10px 12px;
  background: var(--pinv-surface); border: 1px solid var(--pinv-border); border-radius: 5px;
}
.pinv-iox-form label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--pinv-subtle); }
.pinv-iox-form select, .pinv-iox-form input[type="file"] {
  background: var(--pinv-bg); color: var(--pinv-text);
  border: 1px solid var(--pinv-border-2); border-radius: 3px; padding: 5px 8px; font-size: 13px;
}
.pinv-iox-inline { display: flex; align-items: center; gap: 4px; }
.pinv-iox-inline input[type="file"] { max-width: 190px; font-size: 11px; }
.pinv-iox-inline select { font-size: 11px; padding: 3px 5px; }
.pinv-iox-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.pinv-iox-table th, .pinv-iox-table td {
  border: 1px solid var(--pinv-border); padding: 6px 8px; text-align: left; vertical-align: middle;
}
.pinv-iox-table th { background: var(--pinv-surface-2); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.pinv-iox-table code { font-size: 11px; }

/* ── Clickable record titles + read-only record view ─────────────────────
   The title is a real <button> so it's keyboard reachable and announced as an
   action, then styled back down to look like the heading it replaced. */
.pinv-view-title { margin: 0; }
.pinv-title-btn {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
}
.pinv-view-title .pinv-title-btn { font-family: 'Cormorant Garamond', Georgia, serif; font-size: inherit; }
.pinv-title-btn:hover { color: var(--pinv-accent); text-decoration: underline; text-underline-offset: 3px; }
.pinv-title-btn:focus-visible { outline: 2px solid var(--pinv-accent); outline-offset: 2px; border-radius: 2px; }
.pinv-title-inline { font-weight: 700; }

/* Inline record view — full page width, so a record reads like a report
   rather than being squeezed into a dialog. */
.pinv-view-bar { display: flex; gap: 8px; margin-bottom: 10px; }
.pinv-view-heading {
  margin: 0 0 4px; font-size: 26px;
  font-family: 'Cormorant Garamond', Georgia, serif; color: var(--pinv-text);
}
.pinv-view {
  font-size: 14px; line-height: 1.65;
  max-width: 900px;   /* a readable measure, not the whole 4K monitor */
}
.pinv-view .pinv-view-kv { grid-template-columns: minmax(140px, 240px) 1fr; }
.pinv-view-sub { color: var(--pinv-subtle); font-size: 12px; margin: 0 0 14px; }
.pinv-view-kv {
  display: grid; grid-template-columns: minmax(120px, 210px) 1fr;
  gap: 4px 16px; margin: 0 0 16px;
}
.pinv-view-kv dt { color: var(--pinv-subtle); font-size: 12px; }
.pinv-view-kv dd { margin: 0; }
.pinv-view-h {
  margin: 16px 0 6px; padding-bottom: 3px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--pinv-accent); border-bottom: 1px solid var(--pinv-border);
}
/* Plain-text blocks keep their line breaks; rich blocks arrive as sanitized
   markup (note bodies, transcripts) and bring their own structure. */
.pinv-view-text { white-space: pre-wrap; }
.pinv-view-rich p { margin: 0 0 8px; }
.pinv-view-rich ul, .pinv-view-rich ol { margin: 4px 0 8px 20px; padding: 0; }
.pinv-view-rich blockquote {
  margin: 4px 0 8px; padding-left: 10px;
  border-left: 2px solid var(--pinv-border-2); color: var(--pinv-subtle);
}
.pinv-view-rich pre {
  background: var(--pinv-bg); padding: 8px 10px; overflow-x: auto;
  border: 1px solid var(--pinv-border); font-size: 12px;
}
.pinv-view-rich table { border-collapse: collapse; width: 100%; margin: 4px 0 8px; }
.pinv-view-rich td, .pinv-view-rich th { border: 1px solid var(--pinv-border); padding: 4px 6px; text-align: left; vertical-align: top; }

@media (max-width: 620px) {
  .pinv-view-kv { grid-template-columns: 1fr; gap: 0 0; }
  .pinv-view-kv dd { margin: 0 0 8px; }
}

/* ── Date fields: visible native calendar picker ─────────────────────────
   These are ordinary native date inputs, so typing a date by hand works
   exactly as it always has. The only problem on this palette was visibility:
   with the default light color-scheme the picker indicator is a dark glyph on
   a near-black field, so it looked like there was no calendar at all.
   color-scheme:dark fixes both the indicator and the popup panel itself. */
.pinv-field input[type="date"],
.pinv-field input[type="datetime-local"],
.pinv-field input[type="time"],
.pinv-field input[type="month"],
.pinv-field input[type="week"] {
  color-scheme: dark;
}
.pinv-field input[type="date"]::-webkit-calendar-picker-indicator,
.pinv-field input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.pinv-field input[type="time"]::-webkit-calendar-picker-indicator,
.pinv-field input[type="month"]::-webkit-calendar-picker-indicator,
.pinv-field input[type="week"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .75;
  filter: invert(1) sepia(1) saturate(0.4) hue-rotate(5deg);
}
.pinv-field input[type="date"]::-webkit-calendar-picker-indicator:hover,
.pinv-field input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.pinv-field input[type="time"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
/* The explicit calendar button sits beside the field, not over it, so it can
   never intercept a click meant for the text. */
.pinv-datewrap { display: flex; align-items: stretch; gap: 6px; width: 100%; }
.pinv-datewrap input { flex: 1; min-width: 0; }
.pinv-date-btn {
  flex: 0 0 auto; width: 34px;
  background: var(--pinv-surface-2); color: var(--pinv-text);
  border: 1px solid var(--pinv-border-2); border-radius: 3px;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.pinv-date-btn:hover { background: var(--pinv-surface); border-color: var(--pinv-accent); }

/* ── Rich-text toolbar (notes) ───────────────────────────────────────────── */
.pinv-rt-wrap { border: 1px solid var(--pinv-border); border-radius: 4px; overflow: hidden; }
.pinv-rt-wrap .pinv-richtext { border: 0; border-radius: 0; min-height: 260px; }
.pinv-rt-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 4px 6px; background: var(--pinv-surface-2);
  border-bottom: 1px solid var(--pinv-border);
  position: sticky; top: 0; z-index: 1;
}
.pinv-rt-btn {
  min-width: 28px; height: 26px; padding: 0 6px;
  background: transparent; color: var(--pinv-text);
  border: 1px solid transparent; border-radius: 3px;
  font-size: 13px; line-height: 1; cursor: pointer;
}
.pinv-rt-btn:hover { background: var(--pinv-surface); border-color: var(--pinv-border); }
.pinv-rt-btn:active { background: var(--pinv-primary); }
.pinv-rt-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--pinv-border); }

/* ── Notes (scratchpad) ──────────────────────────────────────────────────── */
.pinv-note-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px; align-items: start;
}
.pinv-note-card.pinned { border-color: var(--pinv-accent); }
.pinv-note-head { display: flex; align-items: flex-start; gap: 8px; }
.pinv-note-head h3 { margin: 0; flex: 1; }
/* A card is a preview of the note, not a window onto it: clip to a few lines
   and fade the cut, rather than putting a scrollbar inside a grid tile. The
   whole note is one click away in the read-only view. */
.pinv-note-body {
  --pinv-note-lines: 6;
  position: relative;
  max-height: calc(1.55em * var(--pinv-note-lines));
  overflow: hidden;
  margin: 8px 0; padding-right: 4px;
  font-size: 13px; line-height: 1.55;
  /* Pasted notes carry long URLs, wide tables and code — none of which may
     push the card sideways. */
  overflow-wrap: anywhere;
}
/* Only shown when the note actually overflows (set from JS after layout), so
   a two-line note isn't fading into nothing. */
.pinv-note-body.is-clipped::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30px;
  background: linear-gradient(to bottom, transparent, var(--pinv-surface));
  pointer-events: none;
}
.pinv-note-body img { max-width: 100%; height: auto; }
.pinv-note-body table { table-layout: fixed; }
.pinv-note-clipped-note { font-size: 11px; color: var(--pinv-subtle); margin: 0 0 6px; }
.pinv-note-body p { margin: 0 0 8px; }
.pinv-note-body h2 { font-size: 15px; margin: 8px 0 4px; }
.pinv-note-body h3 { font-size: 14px; margin: 8px 0 4px; }
.pinv-note-body ul, .pinv-note-body ol { margin: 4px 0 8px 20px; padding: 0; }
.pinv-note-body blockquote {
  margin: 4px 0 8px; padding-left: 10px;
  border-left: 2px solid var(--pinv-border-2); color: var(--pinv-subtle);
}
.pinv-note-body pre {
  background: var(--pinv-bg); padding: 8px 10px;
  border: 1px solid var(--pinv-border); font-size: 12px;
  white-space: pre-wrap; word-break: break-word; overflow-x: hidden;
}
.pinv-note-body code { background: var(--pinv-bg); padding: 1px 4px; border-radius: 3px; font-size: 12px; }
.pinv-note-body hr { border: 0; border-top: 1px solid var(--pinv-border); margin: 10px 0; }
.pinv-note-body table { border-collapse: collapse; width: 100%; margin: 4px 0 8px; }
.pinv-note-body td, .pinv-note-body th { border: 1px solid var(--pinv-border); padding: 4px 6px; text-align: left; }

/* ── Subscriptions: pricing page + settings editor ───────────────────────── */
.pinv-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 16px 0; }
.pinv-plan {
  background: var(--pinv-surface); border: 1px solid var(--pinv-border);
  border-radius: 6px; padding: 16px; display: flex; flex-direction: column;
}
.pinv-plan.current { border-color: var(--pinv-accent); box-shadow: 0 0 0 1px var(--pinv-accent); }
.pinv-plan h3 { margin: 0 0 6px; }
.pinv-plan-price strong { font-size: 26px; }
.pinv-plan-price span { color: var(--pinv-subtle); font-size: 12px; }
.pinv-plan-tagline { color: var(--pinv-subtle); font-size: 12px; min-height: 32px; }
.pinv-plan-features { list-style: none; padding: 0; margin: 8px 0 14px; font-size: 13px; }
.pinv-plan-features li { padding: 3px 0; border-bottom: 1px solid var(--pinv-border); }
.pinv-plan-cta { margin-top: auto; }
.pinv-subscribe-msg { padding: 10px 12px; border-radius: 4px; margin-bottom: 14px; border: 1px solid var(--pinv-border); }
.pinv-subscribe-msg.success { border-color: var(--pinv-success); }
.pinv-subscribe-msg.error   { border-color: var(--pinv-danger); }

.pinv-kv-form { border-collapse: collapse; margin: 8px 0; }
.pinv-kv-form th { text-align: left; vertical-align: top; padding: 4px 12px 4px 0; color: var(--pinv-subtle); font-weight: 600; white-space: nowrap; }
.pinv-kv-form td { padding: 4px 0; }
.pinv-tier-edit { border: 1px solid var(--pinv-border); border-radius: 5px; padding: 8px 12px; margin: 10px 0; }
.pinv-tier-edit legend { color: var(--pinv-accent); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }

/* ── Partial-date field ──────────────────────────────────────────────────
   A text box, because it is the only control that will take "1941". The echo
   line under it shows what the entry was understood as, so the user can see
   that a bare year was accepted as a year rather than silently rounded. */
/* The masked native input leads; the precision picker sits after it, sized to
   its content so the date field still reads as the primary control. */
.pinv-partialdate { display: flex; align-items: stretch; gap: 6px; width: 100%; }
.pinv-partialdate-slot { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; }
.pinv-partialdate-slot > * { flex: 1 1 auto; min-width: 0; }
/* The clock is optional and secondary — narrower than the date beside it. */
.pinv-partialdate-time { width: 100%; }
.pinv-partialdate-slot > .pinv-datewrap:last-child:not(:only-child) { flex: 0 1 190px; }
.pinv-partialdate-input { width: 100%; font-variant-numeric: tabular-nums; }
.pinv-partialdate-input.bad { border-color: var(--pinv-danger) !important; }
.pinv-partialdate-mode { flex: 0 0 auto; width: auto; min-width: 0 !important; }
@media (max-width: 620px) {
  .pinv-partialdate { flex-direction: column; }
  .pinv-partialdate-mode { width: 100%; }
}

/* Notes lead a record view, above the field table. */
.pinv-view-intro { margin: 0 0 16px; }
.pinv-view-intro .pinv-view-h { margin-top: 0; }
.pinv-view-intro .pinv-view-text,
.pinv-view-intro .pinv-view-rich {
  padding: 8px 12px; border-left: 2px solid var(--pinv-accent);
  background: var(--pinv-surface); border-radius: 0 3px 3px 0;
}

/* ── Cases list: pinning and manual arrangement ──────────────────────────
   The card is a link, so its two controls sit above it and swallow the click
   themselves rather than letting it fall through to the navigation. */
.pinv-case-card { position: relative; }
.pinv-case-pin {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  font-size: 14px; line-height: 1; opacity: .45;
}
.pinv-case-pin:hover { opacity: 1; transform: scale(1.15); }
.pinv-case-pin.on { opacity: 1; }
.pinv-case-card .pinv-drag-handle { top: 6px; right: 30px; }
/* A pinned case is marked on the card itself, so its position at the top of a
   title-sorted list doesn't read as a bug. */
.pinv-case-pinned {
  border-color: var(--pinv-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pinv-accent) 45%, transparent);
}

/* Insertion marker while dragging a card in the grid. */
.pinv-grid-drop {
  align-self: stretch; width: 4px; min-height: 60px; border-radius: 2px;
  background: var(--pinv-accent); pointer-events: none;
}
.pinv-cases-grid.pinv-is-dragging .pinv-case-card * { pointer-events: none; }

/* ── Photo galleries ─────────────────────────────────────────────────────
   A gallery is a grid of fixed-size plates so a row of photos reads as a
   contact sheet rather than a ragged column. */
.pinv-gallery {
  display: grid; gap: 10px; margin: 4px 0 14px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.pinv-gallery-item {
  margin: 0; display: flex; flex-direction: column; gap: 4px;
  background: var(--pinv-surface); border: 1px solid var(--pinv-border);
  border-radius: 4px; padding: 6px;
}
.pinv-gallery-item.is-cover { border-color: var(--pinv-accent); }
.pinv-gallery-thumb {
  display: block; padding: 0; border: 0; background: var(--pinv-bg);
  border-radius: 3px; overflow: hidden; cursor: zoom-in; line-height: 0;
}
.pinv-gallery-thumb img { width: 100%; height: 116px; object-fit: cover; display: block; }
.pinv-gallery-thumb:hover img { filter: brightness(1.12); }
.pinv-gallery-thumb:focus-visible { outline: 2px solid var(--pinv-accent); outline-offset: 2px; }
.pinv-gallery-item figcaption { display: flex; flex-direction: column; gap: 2px; }
.pinv-gallery-name { font-size: 12px; color: var(--pinv-text); }
.pinv-gallery-desc { font-size: 11px; color: var(--pinv-subtle); }
.pinv-gallery-meta { font-size: 10px; color: var(--pinv-subtle); }
.pinv-gallery-actions { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pinv-gallery-actions .pinv-btn { padding: 2px 6px; font-size: 11px; }

/* Cover thumbnail on a list card. */
.pinv-card-cover { position: relative; margin: -14px -14px 8px; line-height: 0; }
.pinv-card-cover img {
  width: 100%; height: 132px; object-fit: cover; display: block;
  border-radius: 4px 4px 0 0;
}
.pinv-card-cover-count {
  position: absolute; right: 6px; bottom: 6px;
  background: rgba(14, 10, 26, .82); color: var(--pinv-text);
  border-radius: 10px; padding: 1px 8px; font-size: 11px; line-height: 1.6;
}

/* Upload / manage panel inside an edit form. */
.pinv-media-manager { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; }
.pinv-media-drop {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 2px dashed var(--pinv-border-2); border-radius: 4px;
  background: var(--pinv-surface);
}
.pinv-media-drop.over { border-color: var(--pinv-accent); background: color-mix(in srgb, var(--pinv-accent) 12%, var(--pinv-surface)); }
.pinv-media-status { margin: 0; font-size: 12px; }

/* ── Lightbox: the magnifier ─────────────────────────────────────────────
   Zoom is a transform on an image already loaded at full resolution, so
   magnifying costs nothing and stays sharp to the file's real pixels. */
.pinv-lightbox {
  position: fixed; inset: 0; z-index: 100010;
  display: flex; flex-direction: column;
  background: rgba(8, 5, 16, .95);
}
.pinv-lb-bar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--pinv-border); color: var(--pinv-text); font-size: 12px;
  /* Solid, so the controls sit on their own ground rather than on whatever
     the page happens to have behind the backdrop. */
  background: var(--pinv-bg);
}
.pinv-lb-spacer { flex: 1; }
.pinv-lb-counter, .pinv-lb-zoom { color: var(--pinv-subtle); min-width: 52px; text-align: center; }
.pinv-lb-btn {
  min-width: 30px; height: 28px; padding: 0 9px; cursor: pointer;
  background: var(--pinv-surface-2); color: var(--pinv-text);
  border: 1px solid var(--pinv-border-2); border-radius: 3px;
  font-size: 14px; line-height: 1; text-align: center; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.pinv-lb-btn:hover { border-color: var(--pinv-accent); color: #f3ead7; }
.pinv-lb-close { font-size: 20px; }
.pinv-lb-stage {
  flex: 1; min-height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pinv-lb-img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  transform-origin: center center; user-select: none; -webkit-user-drag: none;
  transition: transform .08s linear;
}
.pinv-lb-stage.zoomed .pinv-lb-img { transition: none; max-width: none; max-height: none; }
.pinv-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 44px; height: 66px; cursor: pointer;
  background: rgba(26, 21, 37, .8); color: var(--pinv-text);
  border: 1px solid var(--pinv-border-2); font-size: 26px; line-height: 1;
}
.pinv-lb-nav:hover { border-color: var(--pinv-accent); }
.pinv-lb-nav.prev { left: 10px; border-radius: 0 4px 4px 0; }
.pinv-lb-nav.next { right: 10px; border-radius: 4px 0 0 4px; }
.pinv-lb-info {
  padding: 10px 16px 16px; color: var(--pinv-text);
  border-top: 1px solid var(--pinv-border); max-height: 26vh; overflow: auto;
  background: var(--pinv-bg);
}
.pinv-lb-caption { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 17px; }
.pinv-lb-meta { color: var(--pinv-subtle); font-size: 11px; margin-top: 2px; }
.pinv-lb-desc { font-size: 13px; margin-top: 6px; line-height: 1.55; }

@media print { .pinv-lightbox { display: none !important; } }

/* ── Annotations: a reading layer over a record's text ───────────────────
   Applied over the text, never into it — the stored field stays plain. */
.pinv-annotatable { cursor: text; }
.pinv-annot-highlight {
  background: color-mix(in srgb, var(--pinv-annot-color, #c8a96a) 32%, transparent);
  border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--pinv-annot-color, #c8a96a) 45%, transparent);
}
.pinv-annot-bold      { font-weight: 800; color: #f3ead7; }
.pinv-annot-underline { text-decoration: underline; text-underline-offset: 3px; }
.pinv-annot-strike    { text-decoration: line-through; }
.pinv-annot-underline.pinv-annot-strike { text-decoration: underline line-through; }
.pinv-annot-commented { border-bottom: 2px dotted var(--pinv-accent); }
.pinv-annot-marker {
  background: none; border: 0; padding: 0 2px; cursor: pointer;
  font-size: 10px; line-height: 1; vertical-align: super;
}
.pinv-annot-marker:hover { filter: brightness(1.4); }

/* Comments listed under the block they annotate. */
.pinv-annot-notes { list-style: none; margin: 6px 0 14px; padding: 0; }
.pinv-annot-notes li {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
  padding: 5px 8px; margin: 0 0 4px;
  background: var(--pinv-surface); border-left: 2px solid var(--pinv-accent);
  border-radius: 0 3px 3px 0; font-size: 12px;
}
.pinv-annot-notes li.flash { background: color-mix(in srgb, var(--pinv-accent) 22%, var(--pinv-surface)); }
.pinv-annot-quote   { color: var(--pinv-subtle); font-style: italic; }
.pinv-annot-comment { color: var(--pinv-text); }
.pinv-annot-author  { color: var(--pinv-subtle); font-size: 11px; }
.pinv-annot-del {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: var(--pinv-subtle); font-size: 15px; line-height: 1; padding: 0 2px;
}
.pinv-annot-del:hover { color: #e0736b; }

/* The floating toolbar raised by a selection. */
.pinv-annot-toolbar {
  position: absolute; z-index: 100000;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  padding: 6px; max-width: 340px;
  background: var(--pinv-surface-2); border: 1px solid var(--pinv-border-2);
  border-radius: 5px; box-shadow: 0 6px 22px rgba(0, 0, 0, .55);
}
.pinv-annot-swatches { display: flex; gap: 3px; }
.pinv-annot-swatch {
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .35); padding: 0;
}
.pinv-annot-swatch:hover { transform: scale(1.15); }
.pinv-annot-btn {
  min-width: 26px; height: 24px; padding: 0 6px; cursor: pointer;
  background: var(--pinv-surface); color: var(--pinv-text);
  border: 1px solid var(--pinv-border); border-radius: 3px;
  font-size: 12px; line-height: 1;
}
.pinv-annot-btn:hover { border-color: var(--pinv-accent); color: #f3ead7; }
.pinv-annot-sep { width: 1px; align-self: stretch; background: var(--pinv-border); margin: 0 2px; }
.pinv-annot-commentbox { flex: 1 0 100%; display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.pinv-annot-commentinput {
  width: 100%; background: var(--pinv-bg); color: var(--pinv-text);
  border: 1px solid var(--pinv-border-2); border-radius: 3px;
  padding: 6px 8px; font-family: inherit; font-size: 12px; resize: vertical;
}
.pinv-annot-commentactions { display: flex; gap: 6px; justify-content: flex-end; }

/* Annotations are a reading aid, not part of the record — the printed report
   shows the text itself. */
@media print { .pinv-annot-marker, .pinv-annot-toolbar, .pinv-annot-del { display: none !important; } }

/* ── Map layer switcher ──────────────────────────────────────────────────
   Leaflet's control ships white-on-white; restyled to match the app so it
   doesn't read as a foreign element sitting on the map. */
.leaflet-control-layers {
  background: var(--pinv-surface-2) !important;
  color: var(--pinv-text);
  border: 1px solid var(--pinv-border-2) !important;
  border-radius: 4px !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .5) !important;
}
.leaflet-control-layers-toggle {
  background-color: var(--pinv-surface-2);
  border-radius: 4px;
}
.leaflet-control-layers-expanded { padding: 8px 10px !important; font-size: 12px; }
.leaflet-control-layers-list label { display: block; margin: 3px 0; cursor: pointer; }
.leaflet-control-layers-list input { margin-right: 6px; }
.leaflet-control-layers-selector + span { color: var(--pinv-text); }
/* Attribution is required by the tile providers — keep it legible. */
.leaflet-control-attribution {
  background: rgba(14, 10, 26, .78) !important;
  color: var(--pinv-subtle) !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a { color: var(--pinv-accent) !important; }

/* ── Inline editing form ─────────────────────────────────────────────────
   A long form rendered into the page rather than a dialog, so it scrolls with
   the page instead of inside its own box. The action bar sticks to the bottom
   of the viewport so Save stays reachable from anywhere in the form. */
.pinv-inline-form { max-width: 1100px; }
.pinv-inline-form .pinv-form { margin-bottom: 0; }
.pinv-inline-form-actions {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
  margin-top: 10px; padding: 12px 4px;
  background: var(--pinv-bg);
  border-top: 1px solid var(--pinv-border);
}
@media (max-width: 620px) {
  .pinv-inline-form-actions { flex-wrap: wrap; justify-content: stretch; }
  .pinv-inline-form-actions .pinv-btn { flex: 1 1 auto; }
}

/* ── Key/value repeater (object characteristics) ─────────────────────────
   Name and value side by side, with a delete on each row. Kept compact so a
   long list of characteristics still reads as one field, not a second form. */
.pinv-kv { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.pinv-kv-rows { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.pinv-kv-row { display: flex; gap: 6px; width: 100%; }
.pinv-kv-row .pinv-kv-name  { flex: 0 1 34%; min-width: 0; }
.pinv-kv-row .pinv-kv-value { flex: 1 1 auto; min-width: 0; }
.pinv-kv-del { flex: 0 0 auto; width: 30px; padding: 0; line-height: 1; font-size: 16px; }
.pinv-kv-empty { margin: 0; font-size: 12px; }

/* Read-only rendering of the same list, on cards. */
.pinv-kv-list { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; }
.pinv-kv-list li {
  margin: 2px 0; color: var(--pinv-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pinv-kv-key {
  display: inline-block; min-width: 96px; margin-right: 8px;
  color: var(--pinv-subtle); text-transform: uppercase;
  letter-spacing: .04em; font-size: 10px;
}

/* ── Nestable, arrangeable lists (sighting events + timeline log) ────────
   Indent is driven off --pinv-depth so a sub-entry shifts and narrows by the
   same amount, keeping the left rail aligned at every depth. */
.pinv-nestable [data-row-id] { position: relative; }
.pinv-nested { margin-left: calc(var(--pinv-depth, 0) * 26px); }
.pinv-event-list { display: flex; flex-direction: column; gap: 12px; }
.pinv-event-list .pinv-event-card.pinv-nested,
.pinv-timeline-item.pinv-nested {
  border-left: 3px solid var(--pinv-accent);
  padding-left: 10px;
}
.pinv-timeline-item.pinv-nested .pinv-timeline-time { font-size: 11px; }

/* Grab handle — the only draggable part of a row, so text stays selectable. */
.pinv-drag-handle {
  position: absolute; top: 6px; right: 8px; z-index: 2;
  padding: 0 4px; font-size: 14px; line-height: 1;
  color: var(--pinv-subtle); cursor: grab; user-select: none;
}
.pinv-drag-handle:hover  { color: var(--pinv-text); }
.pinv-drag-handle:active { cursor: grabbing; }
.pinv-dragging { opacity: .55; }
/* Mid-drag every row is a drop target — stop their contents swallowing
   dragover so the insertion point always resolves to a row. */
.pinv-is-dragging [data-row-id] * { pointer-events: none; }
/* The row about to become the parent. Understated: the placeholder carries
   the message, this only anchors which row it refers to. */
.pinv-drop-parent { background: color-mix(in srgb, var(--pinv-accent) 14%, transparent); }

/* Drop placeholders — two shapes for two outcomes, in the flow where the row
   will land so content opens up and it reads as snapping into a slot. */
.pinv-drop-ghost { pointer-events: none; margin: 6px 0; list-style: none; }
.pinv-drop-ghost-move {
  height: 6px; background: var(--pinv-accent);
  margin-left: calc(var(--pinv-depth, 0) * 26px);
}
.pinv-drop-ghost-child {
  display: flex; align-items: center; min-height: 30px; padding: 10px;
  margin-left: calc(var(--pinv-depth, 0) * 26px);
  border: 2px dashed var(--pinv-accent);
  background: color-mix(in srgb, var(--pinv-accent) 12%, transparent);
  font-size: 11px; color: var(--pinv-accent);
}

/* Hand-placed position marker. */
.pinv-seq-pill {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  background: var(--pinv-accent); color: var(--pinv-bg);
  border-radius: 3px; font-size: 10px;
}

/* Day / "no timestamp" dividers in the timeline log. */
.pinv-tl-divider {
  list-style: none; margin: 16px 0 10px -22px; padding: 3px 10px;
  width: fit-content; background: var(--pinv-surface-2);
  border: 1px solid var(--pinv-border); border-radius: 3px;
  font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--pinv-subtle);
}
.pinv-tl-divider.pinv-tl-undated { border-style: dashed; }

/* A case you've had open on this machine — subtle marker so the
   "Recently worked on" sort is visibly doing something. */
.pinv-case-card.pinv-case-recent { box-shadow: inset 0 0 0 1px var(--pinv-border-2); }

/* ── Sticky tabs + view preferences ──────────────────────────────────────
   Ported from CaseHound. Pin the case-detail tab strip flush below whatever
   is fixed at the top (WP admin bar normally; nothing in fullscreen). The top
   inset comes from JS via --pinv-sticky-top because the bar's height varies
   (32/46px) and drops to 0 in fullscreen. position:sticky !important defeats
   stray theme rules on the strip's position. */
.pinv-case-detail.pinv-sticky-tabs #pinv-case-tabs {
  position: sticky !important;
  top: var(--pinv-sticky-top, 32px);
  z-index: 50;
  background: var(--pinv-bg);
  margin-top: 0;
  box-shadow: 0 8px 10px -10px rgba(0,0,0,.6);   /* hint it floats over scrolled content */
}
/* Leave room under the admin bar so scrollIntoView lands flush, not behind it. */
#pinv-case-tabs { scroll-margin-top: var(--pinv-sticky-top, 32px); }

/* Collapsible header — shrink to a one-line bar (title + actions). */
.pinv-header-chevron { min-width: 28px; padding: 4px 8px !important; }
.pinv-case-header.pinv-header-collapsed { padding: 8px 16px; }
.pinv-case-header.pinv-header-collapsed .pinv-back-link,
.pinv-case-header.pinv-header-collapsed .pinv-case-subline { display: none; }
.pinv-case-header.pinv-header-collapsed .pinv-case-meta h1 { font-size: 18px; margin: 0; }

/* Floating "jump to tabs" workspace pill. */
#pinv-workspace-pill {
  position: fixed; bottom: 32px; right: 24px; z-index: 99990;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--pinv-border-2); border-radius: 50%;
  background: var(--pinv-primary); color: var(--pinv-text);
  font-size: 20px; line-height: 1; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
}
#pinv-workspace-pill:hover { background: var(--pinv-primary-2); }

/* ⚙ View preferences popover. */
.pinv-view-prefs-pop {
  position: absolute; z-index: 100001;
  background: var(--pinv-surface);
  border: 1px solid var(--pinv-border);
  box-shadow: 0 8px 22px rgba(0,0,0,.5); border-radius: 6px;
  min-width: 300px; max-width: 340px; padding: 6px 0; font-size: 13px;
  color: var(--pinv-text);
}
.pinv-view-prefs-head {
  padding: 6px 12px 8px; border-bottom: 1px solid var(--pinv-border);
  font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--pinv-subtle);
}
.pinv-view-pref-row { display: flex; gap: 8px; align-items: flex-start; padding: 8px 12px; cursor: pointer; }
.pinv-view-pref-row:hover { background: var(--pinv-surface-2); }
.pinv-view-pref-row input { margin-top: 2px; }
.pinv-view-pref-label { font-weight: 600; color: var(--pinv-text); }

/* ── Fullscreen-app mode ────────────────────────────────────────────────
   Ported from CaseHound. Two copies of one toggle:
     - .pinv-fs-app-floating : fixed top-right of viewport, always visible
       (the "topmost" toggle, on every admin + frontend page).
     - .pinv-fs-app-inline   : injected into .pinv-fe-user on the frontend
       so it sits with the other top-menu controls.

   Active state turns the app's outer wrapper (.pinv-wrap in admin,
   .pinv-fe-shell on frontend) into a fixed full-viewport overlay so the
   surrounding WP / theme chrome can't bleed through. JS is in admin.js. */
.pinv-fs-app-btn {
  background: var(--pinv-surface-2);
  border: 1px solid var(--pinv-border);
  border-radius: 4px; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--pinv-text);
  padding: 4px 10px;
}
.pinv-fs-app-btn:hover { background: var(--pinv-surface); border-color: var(--pinv-border-2); }
.pinv-fs-app-btn[aria-pressed="true"] { border-color: var(--pinv-accent); }

/* Floating copy — pinned to the top-right of the viewport. Sits below the WP
   admin bar in normal mode; slides up when fullscreen hides the bar. */
.pinv-fs-app-floating {
  position: fixed;
  top: 40px; right: 12px;
  z-index: 100001;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
body.pinv-fullscreen-app .pinv-fs-app-floating { top: 12px; }

/* Inline copy in the frontend top menu. */
.pinv-fs-app-inline { margin-right: 6px; }

/* Hide WP admin chrome when fullscreen is on. */
body.pinv-fullscreen-app #wpadminbar,
body.pinv-fullscreen-app #adminmenumain,
body.pinv-fullscreen-app #adminmenuback,
body.pinv-fullscreen-app #wpfooter { display: none !important; }
body.pinv-fullscreen-app.wp-toolbar { padding-top: 0 !important; }
html.wp-toolbar:has(body.pinv-fullscreen-app) { padding-top: 0 !important; }
body.pinv-fullscreen-app #wpcontent { margin-left: 0 !important; padding-left: 0 !important; }
body.pinv-fullscreen-app #wpbody,
body.pinv-fullscreen-app #wpbody-content { padding: 0 !important; margin: 0 !important; }
/* The admin wrap carries a right margin for the WP menu — drop it fullscreen. */
body.pinv-fullscreen-app .wrap.pinv-wrap { margin-right: 0 !important; }

@media print {
  .pinv-case-tabs, .pinv-header-actions, .pinv-case-actions, .pinv-fs-app-btn, .pinv-modal, .pinv-toast { display: none !important; }
  .pinv-wrap { background: white; color: black; }
  .pinv-card, .pinv-case-header { border-color: #999; background: white; color: black; }
}


/* ── Plans page (shared layout across Geek Slop apps) ──────────────────── */
.pinv-help { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--pinv-surface-2); border: 1px solid var(--pinv-border-2); color: var(--pinv-subtle); font-size: 10px; font-weight: 700; line-height: 1; cursor: help; position: relative; vertical-align: middle; margin-left: 2px; font-style: normal; }
.pinv-help:hover, .pinv-help:focus { border-color: var(--pinv-accent); color: var(--pinv-accent); outline: none; }
.pinv-help::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: max-content; max-width: 280px; background: #1b1b1b; color: #fff; padding: 8px 10px; border-radius: 6px; font-size: 12px; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal; box-shadow: 0 6px 20px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 1000; }
.pinv-help::before { content: ''; position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1b1b1b; opacity: 0; transition: opacity .12s; }
.pinv-help:hover::after, .pinv-help:focus::after, .pinv-help:hover::before, .pinv-help:focus::before { opacity: 1; }
.pinv-subscribe .pinv-header { align-items: center; }
.pinv-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 14px 0 26px; align-items: stretch; }
.pinv-plan { position: relative; background: var(--pinv-surface); border: 1px solid var(--pinv-border); border-radius: 10px; padding: 20px 18px; display: flex; flex-direction: column; gap: 8px; color: var(--pinv-text); }
.pinv-plan.featured { border-color: var(--pinv-accent); box-shadow: 0 8px 28px rgba(0,0,0,.18); }
.pinv-plan.current { border-color: var(--pinv-primary-2); }
.pinv-plan-flag { position: absolute; top: -10px; left: 16px; background: var(--pinv-accent); color: #1b1b1b; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.pinv-plan h3 { margin: 0; font-size: 20px; }
.pinv-plan-tagline { margin: 0; color: var(--pinv-subtle); min-height: 34px; }
.pinv-plan-price strong { font-size: 30px; }
.pinv-plan-price span { color: var(--pinv-subtle); }
.pinv-plan-features { list-style: none; padding: 0; margin: 6px 0 10px; font-size: 12px; flex: 1; }
.pinv-plan-features li { padding: 4px 0; border-bottom: 1px dashed var(--pinv-border); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pinv-plan-features li .pinv-help { margin-left: auto; }
.pinv-plan-features li.no { color: var(--pinv-subtle); opacity: .7; }
.pinv-plan-features li.yes::before { content: '✓'; color: var(--pinv-success); font-weight: 700; }
.pinv-plan-features li.no::before { content: '—'; }
.pinv-plan-current { text-align: center; color: var(--pinv-primary-2); font-weight: 600; padding: 7px; }
.pinv-plan form { margin: 0; }
.pinv-plan .pinv-btn { width: 100%; justify-content: center; }
.pinv-compare-wrap { overflow-x: auto; margin-bottom: 26px; }
.pinv-compare { width: 100%; border-collapse: collapse; background: var(--pinv-surface); border: 1px solid var(--pinv-border); border-radius: 8px; overflow: hidden; }
.pinv-compare th, .pinv-compare td { padding: 8px 10px; border-bottom: 1px solid var(--pinv-border); text-align: left; font-size: 13px; }
.pinv-compare th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--pinv-subtle); background: var(--pinv-surface-2); }
.pinv-compare th:not(:first-child), .pinv-compare td:not(:first-child) { text-align: center; }
.pinv-compare td.yes { color: var(--pinv-success); font-weight: 600; }
.pinv-compare td.no { color: var(--pinv-subtle); opacity: .7; }
.pinv-faq details { background: var(--pinv-surface); border: 1px solid var(--pinv-border); border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; color: var(--pinv-text); }
.pinv-faq summary { cursor: pointer; font-weight: 600; }
.pinv-faq p { margin: 8px 0 0; color: var(--pinv-subtle); }
.pinv-fe-brand { text-decoration: none !important; }
body.pinv-standalone { background: var(--pinv-bg, #0e0a1a); color: var(--pinv-text, #e0d5c0); min-height: 100vh; }
body.pinv-standalone .pinv-fe-shell { min-height: 100vh; border-radius: 0; margin: 0; }

.pinv-plan-always { margin: -10px 0 18px; color: var(--pinv-subtle); font-size: 13px; }

/* ── Gates, trials, upgrade nudges ─────────────────────────────────────── */
.pinv-plan.highlight { outline: 3px solid var(--pinv-accent); outline-offset: 2px; }
.pinv-plan-trial { position: absolute; top: -10px; right: 16px; background: var(--pinv-success); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.pinv-nav-lock { font-size: 10px; opacity: .8; margin-left: 2px; }
.pinv-locked { max-width: 560px; margin: 40px auto; text-align: center; background: var(--pinv-surface); border: 1px dashed var(--pinv-border-2); border-radius: 12px; padding: 36px 28px; }
.pinv-locked-icon { font-size: 40px; margin-bottom: 8px; }
.pinv-locked h2 { font-size: 20px; margin: 0 0 8px; }
.pinv-locked p { color: var(--pinv-subtle); }
.pinv-upgrade-wrap { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.pinv-upgrade { background: var(--pinv-surface); color: var(--pinv-text); border-radius: 12px; max-width: 460px; width: 100%; padding: 26px 24px; box-shadow: 0 20px 60px rgba(0,0,0,.4); text-align: center; font-size: 14px; font-family: inherit; }
.pinv-upgrade h3 { margin: 0 0 8px; font-size: 20px; }
.pinv-upgrade p { margin: 0 0 16px; color: var(--pinv-subtle); }
.pinv-upgrade .pinv-btn { margin: 0 4px; }
.pinv-matrix th:first-child { text-align: left; white-space: nowrap; }
.pinv-matrix td, .pinv-matrix th:not(:first-child) { text-align: center; }