/* =============================================================================
   pulm.ai & Evidence — the merged inspector surface
   FCLEAR-APP-0002B, lane D. Design authority: PULMAI-EVIDENCE.md §3–§6 and
   components/pulmai-evidence.css from the rev2 design package.

   Replaces the former Nearby / Details / Evidence tabs with one panel of three
   regions: envelope · pulm.ai synthesis · peer-reviewed context.

   Namespacing: the panel's own structure uses the design package's `pv-` names
   so the component stays recognisable against its source. Rows that already had
   a governed treatment in CLEAR (chips, source rows, evidence rows, meta lists)
   keep their existing `clear-` classes from clear_map.css — the merged surface
   must not fork the visual language of a provenance chip.

   THE min-width:0 TRAP. Every block, group and row below carries `min-width: 0`
   and `max-width: 100%`. A flex/grid item's automatic minimum size is its
   content, so one long identifier, one wide table or one un-wrapped monospace
   string silently pushes the analytical pane wider than its flex-basis, the map
   collapses, and `body` gains a horizontal scrollbar. Verified with no
   horizontal scroll on `body` at pane widths 360 / 468 / 720 / 1032 px.

   Tokens are the ones clear_map.css already defines (--line, --surface, --ink,
   --muted, --faint, --m, --r-md, …). Fallbacks are inlined at each `var()` so
   the panel also renders standalone, and so this file never redefines a host
   token out from under the rest of the application.
   ========================================================================== */

:root {
  /* Evidence-class ink for the CLEAR-DERIVED posture, and the two block
     identities the merged panel introduces. These names exist nowhere else in
     CLEAR, so they are defined here rather than in the shared stylesheet. */
  --pv-der: #5E7387;
  --pv-lit-ink: #3E4C59;
  --pv-lit-bg: #f3f5f7;
  --pv-lit-line: #d8dfe5;
  --pv-ai-line: #c9dbe6;
  --pv-ai-bg: #f6fafc;
}

/* -----------------------------------------------------------------------------
   The tab label and the pulm.ai mark

   The mark is DECORATIVE. It carries alt="" and aria-hidden, so the tab's
   accessible name is the text alone. It is never a status indicator: it does not
   change with state, it does not loop, and it does not respond to hover. The
   animated asset is a 24-frame GIF authored to stop after three plays; stopping
   is a property of the file, not of a script, so nothing can restart it.
   -------------------------------------------------------------------------- */
.clear-pane-tab-pulmai {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.clear-pane-tab-label { min-width: 0; }
.clear-pulmai-mark {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: block;
}
.clear-pulmai-mark.is-still { display: none; }

/* -----------------------------------------------------------------------------
   Shared block frame
   -------------------------------------------------------------------------- */
#clear-panel-pulmai {
  min-width: 0;
  max-width: 100%;
  /* The panel is its own size container. The analysis pane can be 360px wide
     inside a 1600px window, so every responsive decision below is taken against
     the PANE's inline size, never the viewport's — a viewport media query would
     get this exactly backwards. */
  container-type: inline-size;
  container-name: pvpanel;
}

.pv-blk {
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line, #dce4ea);
  border-radius: var(--r-md, 9px);
  background: var(--surface, #fff);
  box-shadow: var(--sh-1, 0 1px 2px rgba(16, 32, 48, .07));
  margin-bottom: 10px;
}
.pv-blk:last-child { margin-bottom: 0; }
.pv-blk__h {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line, #dce4ea);
  flex-wrap: wrap;
}
.pv-blk__t {
  min-width: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--ink, #16242f);
}
.pv-blk__x {
  margin-left: auto;
  min-width: 0;
  font-size: 10.5px;
  color: var(--faint, #8598a6);
  font-family: var(--m, ui-monospace, monospace);
  overflow-wrap: anywhere;
}
.pv-blk__x:empty { display: none; }
.pv-blk__b { padding: 10px 12px; min-width: 0; }
/* The neutral "nothing selected" copy clearShellResetPanels() writes into the
   envelope host is a bare paragraph; give it the block's own padding. */
[data-clear-pulmai-envelope] > .clear-pane-note { margin: 0; padding: 10px 12px; }

.pv-tag {
  display: inline-block;
  font-size: 9.5px;
  line-height: 1.6;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  white-space: nowrap;
}
.pv-tag--der {
  background: color-mix(in srgb, var(--pv-der) 12%, transparent);
  color: var(--pv-der);
  border: 1px dashed color-mix(in srgb, var(--pv-der) 45%, transparent);
}
.pv-tag--lit {
  background: var(--pv-lit-bg);
  color: var(--pv-lit-ink);
  border: 1px solid var(--pv-lit-line);
}

.pv-micro {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted, #5e7387);
  min-width: 0;
  overflow-wrap: anywhere;
}
.pv-micro:first-child { margin-top: 0; }
.pv-caveat {
  margin: 9px 0 0;
  padding-top: 8px;
  border-top: 1px dotted var(--line-strong, #c4d0da);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--muted, #5e7387);
}
/* The voice of an unavailable region: a plain statement in body type. Never a
   dash, never a spinner, never a placeholder, never an apology. */
.pv-unavail {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink, #16242f);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* -----------------------------------------------------------------------------
   Block 1 — the envelope

   Two columns where the pane is wide enough for two, one where it is not — and
   never three, however wide the pane gets. Two columns is the design; more would
   turn a record into a spreadsheet. The 1px grid gap over a line-coloured
   background draws the rules, so either column count stays clean.
   -------------------------------------------------------------------------- */
.pv-env__g {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  min-width: 0;
  max-width: 100%;
  background: var(--line, #dce4ea);
  border-top: 1px solid var(--line, #dce4ea);
  border-bottom: 1px solid var(--line, #dce4ea);
}
.pv-env__f {
  min-width: 0;
  padding: 7px 12px;
  background: var(--surface, #fff);
}
/* An odd number of fields must not leave a half-empty cell reading as a missing
   value. The last one spans instead. */
.pv-env__f:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pv-env__f .k {
  display: block;
  font-size: 9.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--faint, #8598a6);
}
.pv-env__f .v {
  display: block;
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink, #16242f);
  overflow-wrap: anywhere;
}
.pv-env__f .v.mono {
  font-family: var(--m, ui-monospace, monospace);
  font-size: 11px;
}
/* One column once a pane column would be too narrow to read a registry ID in.
   The query is measured on the PANEL, which is the pane less the pane body's
   padding — a 360px pane gives a 313px panel and folds to one column; a 468px
   pane gives 420px and keeps two. The viewport query below is the fallback for
   engines without container queries; it only ever fires on a phone, where pane
   width and viewport width agree anyway. */
@container pvpanel (max-width: 380px) {
  .pv-env__g { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .pv-env__g { grid-template-columns: minmax(0, 1fr); }
}

/* The canonical nearest eligible source. One row: class chip · site · id ·
   distance, then its caveat. It DISPLAYS the governed selection; it never
   makes one. */
.pv-srcrow {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
  padding: 8px 0 0;
}
.pv-srcrow__n {
  min-width: 0;
  flex: 1 1 auto;
  font-size: 12px;
  color: var(--ink, #16242f);
  overflow-wrap: anywhere;
}
.pv-srcrow__n code {
  font-family: var(--m, ui-monospace, monospace);
  font-size: 10.5px;
  color: var(--muted, #5e7387);
}
.pv-srcrow__d {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--m, ui-monospace, monospace);
  font-size: 10.5px;
  color: var(--muted, #5e7387);
}

/* -----------------------------------------------------------------------------
   Disclosures

   Collapsed by default at EVERY breakpoint. Open state is remembered per
   session, never per place — see clearPulmaiBindFolds() in clear_map.js.
   -------------------------------------------------------------------------- */
.pv-fold {
  border-top: 1px solid var(--line, #dce4ea);
  min-width: 0;
  max-width: 100%;
}
.pv-fold > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-ink, #1C465F);
}
.pv-fold > summary::-webkit-details-marker { display: none; }
.pv-fold > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 4px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform .15s ease;
}
.pv-fold[open] > summary::before { transform: rotate(90deg); }
.pv-fold > summary:focus-visible { outline: 2px solid var(--focus, #1C465F); outline-offset: -2px; }
.pv-fold > summary .cnt {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--m, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 400;
  color: var(--faint, #8598a6);
}
.pv-fold__b {
  padding: 2px 12px 12px;
  min-width: 0;
  max-width: 100%;
}

/* A labelled group inside a disclosure. Replaces the card-in-a-card the three
   separate tabs used to render; the strings are unchanged. */
.pv-grp {
  min-width: 0;
  max-width: 100%;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line, #dce4ea);
}
.pv-grp:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pv-grp__h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  margin-bottom: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--ink, #16242f);
}
.pv-grp__x {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 10.5px;
  font-weight: 400;
  color: var(--faint, #8598a6);
}
/* The reused governed rows must not overflow their new, narrower host. */
.pv-fold__b .clear-source-list,
.pv-fold__b .clear-evidence-row,
.pv-fold__b .clear-meta-list,
.pv-fold__b .clear-meta-list div { min-width: 0; max-width: 100%; }
.pv-fold__b .clear-pane-note:first-child { margin-top: 0; }

/* -----------------------------------------------------------------------------
   Block 2 — pulm.ai synthesis

   Shipped in its unavailable state. There is no synthesis capability in this
   release: no model call, no template library, no validator, no prompt-only
   substitute, and therefore no generated prose anywhere in the build.
   -------------------------------------------------------------------------- */
.pv-synth { border-color: var(--pv-ai-line); }
.pv-synth .pv-blk__h {
  background: var(--pv-ai-bg);
  border-bottom-color: var(--pv-ai-line);
}
.pv-synth__mk { margin-right: 0; }

/* -----------------------------------------------------------------------------
   Block 3 — peer-reviewed context

   Also shipped unavailable: no corpus is connected. The visual language is
   deliberately NOT a data treatment — neutral slate, no evidence-class colour,
   no chart, no number — so a reader scanning the panel can see at a glance that
   this block is a different kind of thing, and never mistakes it for a finding
   about this place.
   -------------------------------------------------------------------------- */
.pv-lit { border-color: var(--pv-lit-line); }
.pv-lit .pv-blk__h {
  background: var(--pv-lit-bg);
  border-bottom-color: var(--pv-lit-line);
}

/* -----------------------------------------------------------------------------
   Reduced motion

   The tab mark becomes a still PNG and NOTHING on the panel animates — not the
   disclosure markers, not a transition, not a hover. This is a requirement, not
   a preference; do not remove it.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .clear-pulmai-mark.is-anim { display: none; }
  .clear-pulmai-mark.is-still { display: block; }
  /* Pseudo-elements are separate boxes and do NOT inherit a transition reset
     from their originating element -- the disclosure marker's rotation lives on
     ::before, so it has to be named explicitly or it keeps animating. */
  #clear-panel-pulmai,
  #clear-panel-pulmai *,
  #clear-panel-pulmai *::before,
  #clear-panel-pulmai *::after,
  .clear-pane-tab-pulmai,
  .clear-pane-tab-pulmai *,
  .clear-pane-tab-pulmai::before,
  .clear-pane-tab-pulmai::after,
  .clear-pane-tab-pulmai *::before,
  .clear-pane-tab-pulmai *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}