/* Source-Pop-Layer — pop.css
 * Modal, hover-peek, chip, and pill styles for the canonical evidence-pop layer.
 * Every color reads a Litbox module CSS variable with a standalone fallback, so
 * the layer inherits the host module's theme and still works on a bare page.
 * Dark parity via [data-theme="dark"]. See README.md for the contract. */

/* ---------- chips + pills ---------- */

.case-link, .cite-pop {
  position: relative; display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  border: 1px solid var(--line-strong, #c9cdd4); background: var(--paper, #fff);
  color: var(--ink, #17202b); border-radius: 999px; padding: 5px 10px;
  font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; min-height: 30px;
}
.case-link:hover, .cite-pop:hover {
  border-color: var(--acc, #1f7a5c); background: var(--acc-soft, #e9f5f0); color: var(--acc-deep, #14563f);
}
.case-link em, .cite-pop em { font-style: italic; white-space: normal; line-height: 1.2; }

.spop-pill, .case-link .chev::after, .cite-pop .chev::after {
  display: inline-block; font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-style: normal; font-size: 8.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #fff; background: var(--navy, #14213d);
  border-radius: 999px; padding: 2px 6px; white-space: nowrap;
}
.case-link .chev::after, .cite-pop .chev::after { content: "POP UP"; }

.verify-chip {
  display: inline-block; font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 8.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  border-radius: 4px; padding: 3px 8px; border: 1px dashed var(--brand, #b8860b);
  color: var(--amber-deep, #8a5a00); background: var(--amber-soft, #fdf3dd); cursor: pointer;
}
.verify-chip, .verify-chip[hidden] { display: none !important; }
.verify-chip.verified {
  border-style: solid; border-color: var(--acc, #1f7a5c);
  color: var(--acc-deep, #14563f); background: var(--acc-soft, #e9f5f0);
}

.copyable, [data-copy] { cursor: pointer; }

/* ---------- modal ---------- */

.spop-modal {
  display: none; position: fixed; inset: 0; z-index: 1400; background: rgba(10, 14, 22, .66);
  backdrop-filter: blur(5px) saturate(.85); -webkit-backdrop-filter: blur(5px) saturate(.85);
}
.spop-modal.open {
  display: flex; align-items: center; justify-content: center;
  padding: 3vh 3vw; animation: spopFade .16s ease both;
}
@keyframes spopFade { from { opacity: 0; } to { opacity: 1; } }
.spop-modal.open .spop-box { animation: spopRise .24s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes spopRise {
  from { opacity: 0; transform: translateY(14px) scale(.975); }
  to { opacity: 1; transform: none; }
}
.spop-box {
  background: var(--paper, #fff); border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-lg, 0 24px 64px rgba(6, 10, 18, .35));
  width: min(1100px, 96vw); max-height: 93vh; display: flex; flex-direction: column; overflow: hidden;
}
.spop-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--line, #dde1e7);
}
.spop-title {
  flex: 1; min-width: 0; font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 11.5px; color: var(--muted, #6a7382);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.spop-head .verify-chip { margin-top: 0; }
.spop-btn {
  font-size: 12px; font-weight: 700; border: 1px solid var(--line-strong, #c9cdd4);
  background: var(--gray-soft, #f2f4f7); color: var(--ink-soft, #3d4654);
  border-radius: var(--radius-sm, 6px); padding: 4px 10px; cursor: pointer;
  text-decoration: none; white-space: nowrap; font-family: inherit;
}
.spop-btn:hover { border-color: var(--acc, #1f7a5c); color: var(--acc-deep, #14563f); }
.spop-body {
  overflow: auto; padding: 14px; background: var(--line-soft, #eceef2);
  overscroll-behavior: contain;
}
.spop-body.spop-body--pdf {
  width: 100%; height: min(82vh, 850px); min-height: min(520px, 58vh); overflow: hidden; padding: 0;
  display: flex; flex-direction: column;
}
.spop-pdf {
  display: block; flex: 1 1 0%; min-height: 0; width: 100%; height: 100%; border: 0; background: #e7e6e2;
}
.spop-pdf-fallback { display: block; height: 100%; overflow: auto; padding: 12px; }
.spop-pdf-hint {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  margin: 0; padding: 7px 12px; border-top: 1px solid var(--line, #dde1e7);
  background: var(--paper, #fff); font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 11px; line-height: 1.45; color: var(--ink-soft, #3d4654);
}
.spop-pdf-hint__cap { color: var(--muted, #6a7382); }
.spop-shot-layout { max-width: 1260px; margin: 0 auto; }
.spop-shot-layout.has-analysis {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  align-items: start; gap: 14px;
}
.spop-shot-stage { min-width: 0; }
.spop-fig { position: relative; margin: 0 auto 14px; max-width: 900px; }
.spop-fig:last-child { margin-bottom: 0; }
.spop-body img {
  display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 190px); margin: 0 auto; object-fit: contain;
  border: 1px solid var(--line-strong, #c9cdd4); border-radius: var(--radius-sm, 6px);
  box-shadow: var(--shadow, 0 2px 10px rgba(6, 10, 18, .12)); background: #fff;
}
.spop-fig figcaption {
  max-width: 900px; margin: 8px auto 0; text-align: left;
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 11.5px; line-height: 1.55; color: var(--ink-soft, #3d4654);
}
.spop-hl-box {
  position: absolute; pointer-events: none; border: 2px solid rgba(214, 158, 0, .9);
  background: rgba(255, 214, 0, .26); border-radius: 2px;
}
.spop-fallback { text-align: center; padding: 32px 16px; color: var(--ink-soft, #3d4654); }

/* analysis panel (debate-margin treatment; renders only when manifest has it) */
.spop-analysis {
  max-width: 900px; margin: 0 auto 14px; padding: 13px 15px;
  border: 1px solid var(--line, #dde1e7); border-left: 4px solid var(--acc, #1f7a5c);
  border-radius: var(--radius, 10px); background: var(--paper, #fff);
}
.spop-shot-layout.has-analysis .spop-analysis {
  position: sticky; top: 0; width: 100%; max-width: none; margin: 0;
  max-height: calc(93vh - 86px); overflow: auto;
}
.spop-issues { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.spop-issues span {
  font-family: var(--font-mono, ui-monospace, Consolas, monospace); font-size: 9px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--acc-deep, #14563f);
  background: var(--acc-soft, #e9f5f0); border: 1px solid var(--acc, #1f7a5c);
  border-radius: 999px; padding: 2px 8px;
}
.spop-take { margin: 0; color: var(--ink, #17202b); font-size: 14px; line-height: 1.5; }
.spop-debate-list { display: grid; gap: 8px; margin: 0 0 12px; }
.spop-debate-tag {
  padding: 10px 11px; border-left: 4px solid var(--blue, #397ca2);
  border-radius: 7px; background: var(--paper, #fff);
}
.spop-debate-tag strong, .spop-debate-tag span { display: block; }
.spop-debate-tag strong {
  font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.spop-debate-tag span { margin-top: 3px; color: var(--ink-soft, #3d4654); font-size: 12px; line-height: 1.4; }
.spop-debate-tag blockquote {
  margin: 8px 0 0; padding: 8px 9px; border: 1px solid var(--line, #dde1e7);
  border-radius: 5px; background: var(--line-soft, #f2f4f7);
  color: var(--ink, #17202b); font-family: var(--serif, Georgia, serif);
  font-size: 12px; line-height: 1.4;
}
.spop-debate-tag.support { border-left-color: var(--brand, #c49b16); background: var(--amber-soft, #fff9df); }
.spop-debate-tag.limit { border-left-color: var(--danger, #bb5147); background: var(--danger-soft, #fff0ed); }
.spop-debate-tag.issue { border-left-color: var(--blue, #397ca2); background: var(--blue-soft, #eef7fc); }
.spop-watch { margin: 8px 0 0; color: var(--ink-soft, #3d4654); font-size: 12.8px; line-height: 1.45; }
.spop-more { margin-top: 9px; border-top: 1px dashed var(--line, #dde1e7); padding-top: 7px; }
.spop-more summary {
  cursor: pointer; font-family: var(--font-mono, ui-monospace, Consolas, monospace);
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--blue, #1f5a8a);
}
.spop-more p { margin: 7px 0 0; color: var(--ink-soft, #3d4654); font-size: 12.8px; line-height: 1.45; }

/* ---------- hover-peek ---------- */

#spopPeek {
  position: fixed; z-index: 1500; pointer-events: none; opacity: 0;
  transform: translateY(8px) scale(.97);
  transition: opacity .16s ease, transform .2s cubic-bezier(.16, 1, .3, 1);
  width: 264px; border-radius: 8px; overflow: hidden; background: var(--paper, #fff);
  box-shadow: 0 18px 48px rgba(6, 10, 18, .4), 0 2px 8px rgba(6, 10, 18, .22);
  border: 1px solid var(--line-strong, #c9cdd4);
}
#spopPeek.show { opacity: 1; transform: none; }
#spopPeek img { display: block; width: 100%; height: 300px; object-fit: cover; object-position: top; background: #fff; }
.spop-peek-cap {
  font-family: var(--font-mono, ui-monospace, Consolas, monospace); font-size: 9.5px;
  color: #e8eaee; background: var(--navy, #14213d); padding: 4px 9px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- dark parity ---------- */

[data-theme="dark"] .spop-box,
[data-theme="dark"] .spop-analysis { background: var(--paper, #1b212b); }
[data-theme="dark"] .spop-debate-tag { color: var(--ink, #e6eaf0); }
[data-theme="dark"] .spop-debate-tag span { color: var(--ink-soft, #c3cad4); }
[data-theme="dark"] .spop-debate-tag blockquote { background: var(--line-soft, #10151d); color: var(--ink, #e6eaf0); }
[data-theme="dark"] .spop-body { background: var(--line-soft, #10151d); }
[data-theme="dark"] .spop-btn { background: var(--gray-soft, #232b37); color: var(--ink-soft, #c3cad4); }
[data-theme="dark"] .spop-title { color: var(--muted, #8b94a3); }
[data-theme="dark"] .case-link, [data-theme="dark"] .cite-pop {
  background: var(--paper, #1b212b); color: var(--ink, #e6eaf0);
  border-color: var(--line-strong, #39424f);
}
[data-theme="dark"] #spopPeek { background: var(--paper, #1b212b); border-color: var(--line-strong, #39424f); }

/* ---------- motion, touch, print, mobile ---------- */

@media (prefers-reduced-motion: reduce) {
  .spop-modal.open, .spop-modal.open .spop-box { animation: none; }
  #spopPeek { transition: none; }
}
@media (hover: none), (prefers-reduced-motion: reduce) { #spopPeek { display: none !important; } }

@media print {
  #spopPeek, .spop-modal, .verify-chip { display: none !important; }
  .case-link .chev::after, .cite-pop .chev::after, .spop-pill { content: ""; display: none; }
}

@media (max-width: 850px) {
  .spop-shot-layout.has-analysis { grid-template-columns: 1fr; }
  .spop-shot-layout.has-analysis .spop-analysis {
    position: static; max-height: none; margin: 0 0 12px;
  }
}

@media (max-width: 620px) {
  .spop-head { position: relative; z-index: 1; flex: 0 0 auto; flex-wrap: wrap; align-content: start; gap: 7px; padding: max(9px, env(safe-area-inset-top)) 9px 9px; background: var(--paper, #fff); }
  .spop-title { flex-basis: 100%; }
  .spop-modal.open { align-items: stretch; justify-content: stretch; padding: 0; }
  .spop-box { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
  .spop-btn { flex: 1 1 calc(50% - 4px); display: inline-flex; min-height: 44px; align-items: center; justify-content: center; padding: 7px 8px; text-align: center; }
  .spop-btn[hidden] { display: none !important; }
  .spop-body { flex: 1 1 auto; min-height: 0; padding: 9px 9px max(12px, env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; }
  .spop-body.spop-body--pdf { height: auto; min-height: 0; padding: 0; }
  .spop-body img { width: 100%; max-width: 100%; max-height: none; }
  .spop-fig figcaption { font-size: 10.5px; }
  .case-link, .cite-pop { min-height: 44px; }
}