/* =============================================================================
   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; }

/* The action. Deliberately the pane's existing button language -- no gradient, no sparkle, no
   separate "AI" treatment. pulm.ai is a capability inside CLEAR, not a different product. */
.pv-synth__go,
.pv-synth__again {
  display: inline-block;
  margin-top: 8px;
  padding: 7px 12px;
  min-height: 32px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink, #1d2933);
  background: var(--surface, #fff);
  border: 1px solid var(--pv-ai-line);
  border-radius: var(--r-md, 6px);
  cursor: pointer;
  max-width: 100%;
}
.pv-synth__go:hover,
.pv-synth__again:hover { background: var(--pv-ai-bg); }
.pv-synth__go:focus-visible,
.pv-synth__again:focus-visible { outline: 2px solid var(--pv-der); outline-offset: 2px; }
.pv-synth__go[disabled],
.pv-synth__again[disabled] { opacity: .55; cursor: default; }
.pv-synth__again {
  margin-top: 10px;
  font-weight: 500;
  color: var(--muted, #5b6b7a);
}

/* The busy line. Status is carried by TEXT, never by colour or motion alone -- the panel is
   required not to animate under reduced motion, and a reader who cannot see a spinner must still
   be told what is happening. */
.pv-synth__busy {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink, #1d2933);
  min-width: 0;
  max-width: 100%;
}
.pv-synth__busy::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 7px;
  vertical-align: baseline;
  border-radius: 50%;
  background: var(--pv-der);
  animation: pv-synth-pulse 1.4s ease-in-out infinite;
}

@keyframes pv-synth-pulse { 0%, 100% { opacity: .30; } 50% { opacity: 1; } }

/* FCLEAR-APP-0008 / Part H. The attribution beside the block title. Subordinate on purpose: the
   heading is what this IS ("Environmental Assessment") and pulm.ai is who produced it, so the
   reader is not invited to treat the pane as something to talk to. Uses the block header's
   existing token set -- no new colours, no new type scale. */
.pv-blk__by {
  min-width: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--faint, #8598a6);
}

/* FCLEAR-APP-0008 / Part F. The freshness line. Above the assessment rather than below it,
   because it qualifies everything that follows: in a persistent pane the assessment sits beside a
   place and is read as current for it, so when its evidence was read has to arrive first. Same
   type scale and tokens as the disclosure; status is carried by TEXT, never colour alone. */
.pv-synth__fresh {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted, #5b6b7a);
}
.pv-synth__fresh:empty { display: none; }

/* The rendered synthesis. Editorial, not a data table: readable measure, real paragraphs, and
   headings that are semantic rather than merely bold. */
.pv-synth__body { min-width: 0; max-width: 100%; }
.pv-synth__body h4 {
  margin: 12px 0 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink, #1d2933);
  letter-spacing: .01em;
}
.pv-synth__body h4:first-child { margin-top: 0; }
.pv-synth__body p {
  margin: 0 0 6px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink, #1d2933);
  overflow-wrap: anywhere;
}
.pv-synth__body ul { margin: 0 0 6px; padding-left: 16px; }
.pv-synth__body li {
  margin: 0 0 3px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink, #1d2933);
  overflow-wrap: anywhere;
}
.pv-synth__body > :last-child { margin-bottom: 0; }

/* The disclosure. Compact, one line, never a wall of disclaimer. */
.pv-synth__disc {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--pv-ai-line);
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted, #5b6b7a);
}

/* -----------------------------------------------------------------------------
   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);
}

/* -----------------------------------------------------------------------------
   Citation entries (FCLEAR-APP-0003)

   The governed literature set, rendered inside the peer-reviewed context block.
   Deliberately the SAME neutral slate as the block it sits in and deliberately
   NOT a data treatment: no evidence-class colour, no number, no chart. A reader
   scanning the panel must be able to see at a glance that these are a different
   kind of thing from a measurement, and must never read one as a finding about
   this place.

   Every element is constrained to the pane's width: titles are long and
   journal names are longer, so wrapping is forced at every level rather than
   left to the default, which is what would otherwise scroll the pane
   horizontally at 375 px.
   -------------------------------------------------------------------------- */
.pv-cite {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  min-width: 0;
}
.pv-cite__i {
  min-width: 0;
  max-width: 100%;
  padding: 9px 0;
  border-top: 1px solid var(--pv-lit-line, #d8dfe5);
}
.pv-cite__i:first-child { border-top: 0; padding-top: 2px; }
.pv-cite__t {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink, #16242f);
  /* A single unbroken token in a title must break rather than widen the pane. */
  overflow-wrap: anywhere;
}
.pv-cite__m {
  margin: 3px 0 0;
  font-size: 11.5px;
  color: var(--muted, #5b6b78);
  overflow-wrap: anywhere;
}
.pv-cite__g {
  margin: 5px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
.pv-cite__tag {
  display: inline-block;
  max-width: 100%;
  padding: 1px 6px;
  border: 1px solid var(--pv-lit-line, #d8dfe5);
  border-radius: 999px;
  background: var(--pv-lit-bg, #f3f5f7);
  color: var(--pv-lit-ink, #3E4C59);
  font-size: 10.5px;
  line-height: 1.5;
  white-space: nowrap;
}
.pv-cite__l {
  margin: 5px 0 0;
  font-size: 11.5px;
  color: var(--muted, #5b6b78);
  overflow-wrap: anywhere;
}
.pv-cite__a {
  color: var(--pv-lit-ink, #3E4C59);
  text-decoration: underline;
  /* WCAG 2.2 SC 2.5.8 asks for a 24x24 CSS-pixel target. At 11.5px/normal the text box alone
     measures 21px, so the padding and the floor below are what carry it over -- measured in a
     real browser at 375, 390 and 430 px, not assumed. */
  display: inline-block;
  padding: 6px 0;
  min-height: 24px;
  overflow-wrap: anywhere;
}
.pv-cite__a:hover,
.pv-cite__a:focus-visible { color: var(--ink, #16242f); }

/* -----------------------------------------------------------------------------
   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; }
  /* The busy dot is a decorative reinforcement of copy that already says what is happening, so
     it simply stops. Naming it explicitly rather than relying on the blanket rule below, because
     ::before is a separate box and this is a requirement, not a preference. */
  .pv-synth__busy::before { animation: none !important; opacity: .8 !important; }
  /* 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;
  }
}