/* Dynamic platform additions for Plain Sight */

:root {
  --m-map: 480ms;
}

/* Markercluster: clustered ↔ individual transitions (override plugin default 0.3s; STU-12) */
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
  -webkit-transition: -webkit-transform var(--m-map) ease-out, opacity var(--m-map) ease-in;
  -moz-transition: -moz-transform var(--m-map) ease-out, opacity var(--m-map) ease-in;
  -o-transition: -o-transform var(--m-map) ease-out, opacity var(--m-map) ease-in;
  transition: transform var(--m-map) ease-out, opacity var(--m-map) ease-in;
}

.leaflet-cluster-spider-leg {
  -webkit-transition: -webkit-stroke-dashoffset var(--m-map) ease-out, -webkit-stroke-opacity var(--m-map) ease-in;
  -moz-transition: -moz-stroke-dashoffset var(--m-map) ease-out, -moz-stroke-opacity var(--m-map) ease-in;
  -o-transition: -o-stroke-dashoffset var(--m-map) ease-out, -o-stroke-opacity var(--m-map) ease-in;
  transition: stroke-dashoffset var(--m-map) ease-out, stroke-opacity var(--m-map) ease-in;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --m-map: 0ms;
  }
}

/* ── Search row ────────────────────────────────────────────────────────── */
.search-row { display: flex; gap: 0.4rem; margin-top: 0.6rem; }
.search-row input[type="text"] {
  flex: 1; min-width: 0;
  font-family: 'IM Fell English', Georgia, serif;
  background: #f6f3ec; border: 1px solid #0e0e0c; padding: 0.45rem 0.6rem;
  color: #0e0e0c; font-size: 0.95rem; border-radius: 2px;
}
/* Placeholder ~4.5:1 on #f6f3ec for WCAG AA (helper/caption tone) */
.search-row input[type="text"]::placeholder { color: #6d5542; font-style: italic; }
.search-row .cartouche-btn { white-space: nowrap; padding: 0.45rem 0.6rem; }

.active-filter-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.filter-chip {
  background: #0e0e0c; color: #f6f3ec; padding: 0.18rem 0.55rem;
  border-radius: 12px; font-size: 0.82rem; cursor: pointer;
  display: inline-flex; gap: 0.3rem; align-items: center;
}
.filter-chip .x { font-weight: bold; opacity: 0.8; }
.filter-chip:hover { background: #7a4a30; }

/* ── Tag cloud ─────────────────────────────────────────────────────────── */
.tag-cloud-wrap { margin-top: 0.7rem; }
.tag-cloud-label {
  font-size: 0.8rem; color: #5a5851; font-style: italic; margin-bottom: 0.25rem;
}
.tag-cloud { display: flex; flex-wrap: wrap; gap: 0.35rem 0.55rem; line-height: 1.6; }
.tag-cloud-item {
  color: #0e0e0c; text-decoration: none;
  font-family: 'IM Fell English', Georgia, serif;
  border-bottom: 1px dotted #0e0e0c; padding: 0 0.1rem;
}
.tag-cloud-item:hover { color: #b03020; border-bottom-color: #b03020; }
.tag-count { font-size: 0.7em; color: var(--ps-ink-muted); }

.submit-photo-btn { margin-top: 0.8rem; width: 100%; }

/* ── Photo cluster icons ──────────────────────────────────────────────── */
.photo-cluster-inner {
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(245, 237, 218, 0.92);
  border: 2.5px solid #0e0e0c;
  display: flex; align-items: center; justify-content: center;
  font-family: 'IM Fell English', Georgia, serif;
  color: #0e0e0c; font-weight: bold;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.photo-cluster-inner span { font-size: 1rem; }

/* ── Photo panel additions ────────────────────────────────────────────── */
.panel-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.6rem 0; }
.panel-tag {
  background: #f6f3ec; border: 1px solid #0e0e0c; color: #0e0e0c;
  padding: 0.18rem 0.55rem; border-radius: 12px; font-size: 0.82rem; text-decoration: none;
}
.panel-tag:hover { background: #0e0e0c; color: #f6f3ec; }

.panel-contributor { font-size: 0.85rem; color: #5a5851; font-style: italic; margin: 0.2rem 0 0.6rem; }
.panel-contributor a {
  color: #1a6090;
  font-weight: 500;
  font-style: normal;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.panel-contributor a:hover { color: #0e0e0c; }
.panel-contributor a:focus-visible { outline: 2px solid #0e0e0c; outline-offset: 2px; }

.panel-share {
  display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0;
  padding: 0.5rem 0; border-top: 1px dashed #c0a070; border-bottom: 1px dashed #c0a070;
}
.share-btn {
  font-family: 'IM Fell English', Georgia, serif;
  background: #f6f3ec; border: 1px solid #0e0e0c; color: #0e0e0c;
  padding: 0.3rem 0.6rem; font-size: 0.85rem; cursor: pointer;
  text-decoration: none; display: inline-block;
}
.share-btn:hover { background: #0e0e0c; color: #f6f3ec; }

/* ── Comments ─────────────────────────────────────────────────────────── */
.panel-comments { margin-top: 1rem; }
.comments-heading { font-family: 'IM Fell English', Georgia, serif; font-size: 1.1rem; margin: 0 0 0.5rem; color: #0e0e0c; }
.comments-empty, .comments-loading { color: #5a5851; font-style: italic; font-size: 0.9rem; }
.comments-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1rem; }
.comment-item {
  background: rgba(245, 237, 218, 0.5);
  border-left: 3px solid #c0a070;
  padding: 0.5rem 0.7rem;
}
.comment-item.featured { border-left-color: #b03020; background: rgba(245, 237, 218, 0.85); }
.comment-name { font-weight: 600; color: #0e0e0c; font-size: 0.9rem; margin-bottom: 0.2rem; }
.featured-flag { color: #b03020; }
.comment-body { color: #0e0e0c; font-size: 0.9rem; line-height: 1.4; }

.comment-form { display: flex; flex-direction: column; gap: 0.4rem; }
.comment-form input, .comment-form textarea {
  font-family: 'IM Fell English', Georgia, serif;
  background: #f6f3ec; border: 1px solid #0e0e0c; padding: 0.4rem 0.5rem;
  color: #0e0e0c; font-size: 0.9rem; border-radius: 2px;
}
.comment-hint { font-size: 0.8rem; color: #5a5851; font-style: italic; margin: 0; }
.comment-status { font-size: 0.85rem; color: #0e0e0c; min-height: 1.2rem; margin: 0.3rem 0 0; }

/* ── Related grid ─────────────────────────────────────────────────────── */
.panel-related { margin-top: 1rem; }
.related-section { margin-bottom: 0.8rem; }
.related-heading { font-family: 'IM Fell English', Georgia, serif; font-size: 0.95rem; margin: 0.4rem 0 0.3rem; color: #5a5851; }
.related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3rem; }
.related-thumb {
  display: block; aspect-ratio: 1; overflow: hidden;
  border: 1px solid #0e0e0c; border-radius: 2px;
  position: relative; background: var(--ps-paper-soft);
}
.related-thumb .blurhash-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
}
/* Never crop — see §1 Principle 2 */
.related-thumb picture {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.related-thumb picture img {
  position: relative;
  width: 100%; height: 100%; object-fit: contain;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.2s;
}
.related-thumb picture img.is-loaded { opacity: 1; }
.related-thumb:hover picture img.is-loaded { transform: scale(1.05); }

/* ── Progressive panel image (blurhash) ───────────────────────────────── */
.panel-image-stack {
  position: relative;
  display: block;
  width: 100%;
  max-height: 280px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ps-paper-soft);
  border: 2px solid #0e0e0c;
}
.panel-image-stack .blurhash-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
  z-index: 0;
}

.panel-image-stack--crossfade .panel-photo-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--m-base, 200ms) ease;
  pointer-events: none;
}

.panel-image-stack--crossfade .panel-photo-layer.is-visible {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
}

/* Never crop — see §1 Principle 2 */
.panel-image-wrap .panel-image-stack .panel-photo-picture {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
}
.panel-image-wrap .panel-image-stack .panel-photo-picture img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
}
.panel-image-wrap .panel-image-stack .panel-photo-picture img.is-loaded { opacity: 1; }
.panel-image-wrap .panel-image-stack .panel-photo-layer.is-visible .panel-photo-picture img.is-loaded:hover { opacity: 0.9; }

/* ── Tag input chip widget for upload wizard ──────────────────────────── */
.tag-input-wrap {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  background: #f6f3ec; border: 1px solid #0e0e0c; padding: 0.35rem; border-radius: 2px;
  align-items: center;
}
.tag-input-chip {
  background: #0e0e0c; color: #f6f3ec; padding: 0.15rem 0.5rem;
  border-radius: 12px; font-size: 0.85rem; display: inline-flex; gap: 0.3rem;
}
.tag-input-chip .x { cursor: pointer; opacity: 0.85; }
.tag-input-wrap input {
  flex: 1; min-width: 100px; border: none; background: transparent;
  font-family: 'IM Fell English', Georgia, serif; color: #0e0e0c;
  font-size: 0.95rem; outline: none;
}

/* ── Admin user label ─────────────────────────────────────────────────── */
.admin-user-label {
  font-size: 0.82rem; color: #5a5851; font-style: italic;
  margin-bottom: 0.4rem;
}

/* ── Curator dashboard tabs ───────────────────────────────────────────── */
.cp-tabs {
  display: flex; gap: 0; border-bottom: 1px solid #0e0e0c;
  margin-bottom: 0.8rem;
}
.cp-tab {
  flex: 1; padding: 0.5rem 0.4rem;
  background: rgba(245, 237, 218, 0.4); border: none;
  border-right: 1px solid #0e0e0c;
  font-family: 'IM Fell English', Georgia, serif;
  color: #0e0e0c; cursor: pointer; font-size: 0.9rem;
}
.cp-tab:last-child { border-right: none; }
.cp-tab.active { background: #0e0e0c; color: #f6f3ec; }
.cp-tab .badge {
  display: inline-block; min-width: 1.2rem; padding: 0 0.3rem;
  background: #b03020; color: #fff; border-radius: 8px; font-size: 0.75rem; margin-left: 0.25rem;
}

.cp-section { padding: 0.5rem 0; }
.cp-section h3 { font-family: 'IM Fell English', Georgia, serif; margin: 0 0 0.5rem; }

.review-card {
  background: rgba(245, 237, 218, 0.6); border: 1px solid #c0a070;
  padding: 0.6rem; margin-bottom: 0.7rem; border-radius: 2px;
}
.review-card h4 { margin: 0 0 0.3rem; }
.review-card .meta { font-size: 0.82rem; color: #5a5851; margin-bottom: 0.4rem; font-style: italic; }
.review-card .body { font-size: 0.9rem; margin-bottom: 0.5rem; }
.review-card .actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
/* Never crop — see §1 Principle 2 */
.review-card picture { max-width: 100%; display: block; margin-bottom: 0.4rem; border: 1px solid #0e0e0c; background: var(--ps-paper-soft); }
.review-card picture img { max-width: 100%; max-height: 220px; object-fit: contain; display: block; }

.bulk-upload-zone {
  border: 2px dashed #0e0e0c; padding: 1.4rem; text-align: center;
  background: rgba(245, 237, 218, 0.3); border-radius: 4px; margin-bottom: 0.8rem;
  cursor: pointer; color: #5a5851;
}
.bulk-upload-zone.drag { background: rgba(245, 237, 218, 0.7); }
.bulk-upload-progress {
  display: flex; flex-direction: column; gap: 0.3rem; max-height: 240px; overflow-y: auto;
}
.bulk-row {
  display: flex; gap: 0.5rem; align-items: center;
  padding: 0.3rem 0.5rem; background: rgba(245, 237, 218, 0.5);
  font-size: 0.85rem;
}
.bulk-row.ok { background: rgba(42, 122, 69, 0.18); }
.bulk-row.err { background: rgba(176, 48, 32, 0.15); color: #b03020; }
.bulk-row .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-row .status { font-size: 0.75rem; color: #5a5851; }

.audit-table {
  width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.audit-table th, .audit-table td {
  text-align: left; padding: 0.3rem 0.4rem;
  border-bottom: 1px solid rgba(90, 56, 32, 0.2);
}
.audit-table th { color: #5a5851; font-weight: normal; font-style: italic; }

.user-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.5rem; background: rgba(245, 237, 218, 0.5);
  margin-bottom: 0.4rem;
}
.user-row .uname { flex: 1; }
.user-row .role-pill {
  padding: 0.1rem 0.4rem; border: 1px solid #0e0e0c;
  font-size: 0.75rem; border-radius: 8px;
}

.ai-suggest-btn {
  background: #1a6090; color: #f6f3ec; border: none;
  padding: 0.4rem 0.7rem; font-family: 'IM Fell English', Georgia, serif;
  cursor: pointer; font-size: 0.9rem; border-radius: 2px; margin-bottom: 0.5rem;
}
.ai-suggest-btn:hover:not(:disabled) { background: #2a7ab0; }
.ai-suggest-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ai-suggest-status { font-size: 0.85rem; color: #5a5851; font-style: italic; margin: 0 0 0.5rem; }

@media (max-width: 600px) {
  .related-grid { grid-template-columns: repeat(3, 1fr); }
}

/* STU-18 — prefers-reduced-transparency (rgba surfaces → opaque tokens) */
@media (prefers-reduced-transparency: reduce) {
  .photo-cluster-inner {
    background: var(--ps-paper-soft);
    box-shadow: 0 2px 6px var(--ps-ink);
  }

  .comment-item {
    background: var(--ps-paper-2);
  }

  .comment-item.featured {
    background: var(--ps-paper);
  }

  .submission-dialog {
    background: var(--ps-ink);
  }

  .cp-tab {
    background: var(--ps-paper-2);
  }

  .cp-tab.active {
    background: var(--ps-ink);
    color: var(--ps-paper-soft);
  }

  .review-card {
    background: var(--ps-paper-2);
  }

  .bulk-upload-zone {
    background: var(--ps-paper-2);
  }

  .bulk-upload-zone.drag {
    background: var(--ps-paper);
  }

  .bulk-row {
    background: var(--ps-paper-2);
  }

  .bulk-row.ok {
    background: #dcefe0;
    color: var(--ps-ink);
  }

  .bulk-row.err {
    background: #f5deda;
    color: #b03020;
  }

  .audit-table th,
  .audit-table td {
    border-bottom-color: var(--ps-rule);
  }

  .user-row {
    background: var(--ps-paper-2);
  }
}

/* STU-54 / STU-106 — nav sheet above fixed timeline strip */
@media (max-width: 719px) {
  body.ps-nav-sheet-full .timeline-strip {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  body.ps-nav-sheet-collapsed .map-pane {
    padding-bottom: calc(88px + 64px + env(safe-area-inset-bottom, 0px));
  }

  body.ps-nav-sheet-half .map-pane {
    padding-bottom: calc(50dvh + 64px + env(safe-area-inset-bottom, 0px));
  }

  body.ps-nav-sheet-full .map-pane {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

/* STU-18 — forced-colors (curator / dynamic surfaces) */
@media (forced-colors: active) {
  .filter-chip {
    border: 1px solid CanvasText;
  }

  .panel-tag,
  .share-btn,
  .cp-tab {
    border: 2px solid CanvasText !important;
  }

  .cp-tab.active {
    border: 2px solid CanvasText !important;
  }

  .submission-close:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

  .photo-cluster-inner {
    border-color: CanvasText;
  }
}