/*
 * Shared content partials — design-system re-skin (COD-308, batch 2).
 * ============================================================================
 * Styles for the content partials in core/templates/includes/ that ANY app can
 * render, and several do:
 *   _evidence_gallery.html   evaluations (×2), compliance
 *   _evidence_modals.html    evaluations (×2), compliance
 *   scenario_gherkin.html    evaluations, compliance (×3), regulations
 *   scenario_text.html       evaluations (×3), regulations
 *
 * Loaded globally from base.html rather than per-template, and unscoped, for
 * three reasons:
 *
 *  1. Eight templates across three apps render these. A per-template <link> is a
 *     bookkeeping burden whose failure mode is silent — a screen renders the
 *     partial unstyled and nothing errors. Batches 4 and 5 will add more callers.
 *  2. _evidence_modals.html appends its lightboxes at the END of the page body,
 *     OUTSIDE the screen's own view wrapper, so a `.evaluations-view .ev-modal-*`
 *     selector would never match anyway.
 *  3. These are app-level composition, not design-system primitives, so they do
 *     not belong in design-system-components.css — whose header explicitly scopes
 *     it to the shared visual vocabulary.
 *
 * Everything here reads a design token; no raw hex/px except the two code-surface
 * inks, which are the literals the handoff's own .code-block hard-codes.
 */

/* ── Evidence gallery (shared include, also used by compliance) ──────────── */
.ev-evidence-group + .ev-evidence-group { margin-top: var(--sp-5); }
.ev-evidence-group__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: var(--sp-3);
}
.ev-evidence-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--sp-3);
}
.ev-evidence-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border-solid);
  border-radius: var(--r-md);
  overflow: hidden;
}
.ev-evidence-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  flex-direction: column;
  height: 8rem;
  background: var(--gray-bg);
  color: var(--text-sub);
  border-bottom: 1px solid var(--border-solid);
}
.ev-evidence-card__media--clickable { cursor: pointer; }
.ev-evidence-card__media--dark { background: var(--chrome); color: var(--white); }
.ev-evidence-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ev-evidence-card__body { padding: var(--sp-3); }
.ev-evidence-card__text {
  margin: 0;
  font-size: var(--fs-meta);
  color: var(--dark);
  line-height: var(--lh-snug);
}
.ev-evidence-card__meta {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  margin-top: var(--sp-2);
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.ev-evidence-card__meta .ds-icon { margin-top: 0.1rem; flex-shrink: 0; }
.ev-evidence-card__meta--given .ds-icon { color: var(--blue); }
.ev-evidence-card__meta--when .ds-icon { color: var(--amber); }
.ev-evidence-card__meta--then .ds-icon { color: var(--teal); }

/* ── Evidence lightbox (shared include, also used by compliance) ─────────────
 * Unscoped for the same reason as the gallery above: _evidence_modals.html is
 * appended at the end of a page body, outside .evaluations-view, and compliance
 * renders it too.
 */
/* The body owns its own scrolling. Bootstrap's `modal-dialog-scrollable` styles
   `.modal-content` / `.modal-body`, and those classes are gone now that the surface
   is .ds-modal / .ds-modal__body — so relying on it would silently do nothing and a
   tall screenshot would run off the bottom of the viewport with the footer (and its
   Close button) unreachable. Not depending on the plugin's internals is also just
   sturdier: this survives a Bootstrap upgrade renaming them. */
.ev-modal-body {
  display: block;
  max-height: calc(100vh - 12rem);
  overflow-y: auto;
}
.ev-modal-img { display: block; width: 100%; height: auto; border-radius: var(--r-md); }
.ev-modal-video { display: block; width: 100%; border-radius: var(--r-md); }
.ev-modal-log {
  margin: 0;
  padding: var(--sp-5);
  max-height: 30rem;
  overflow: auto;
  background: #1e2130;
  color: #e6e8f0;
  border-radius: var(--r-md);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  line-height: var(--lh-base);
  white-space: pre-wrap;
}
.ev-modal-foot { justify-content: space-between; align-items: center; }
.ev-modal-foot__right { display: flex; align-items: center; gap: var(--sp-4); }
.ev-modal-captured { font-size: var(--fs-meta); color: var(--text-muted); }

/* ── Gherkin scenario (scenario_gherkin.html) ────────────────────────────────
 * Given / When / Then as three tinted blocks. The tints are the same three roles
 * used everywhere else for these steps — blue for context, amber for the action,
 * teal for the expectation — so a step reads the same on a regulation article, an
 * obligation and an evaluation.
 */
/* Top margin on every block, not just between siblings: this partial is dropped
   after arbitrary host content (a description paragraph, a panel head), and the
   host cannot know it needs to leave room. */
.sc-gherkin { margin-top: var(--sp-4); }
.sc-gherkin__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--sp-2);
}
.sc-gherkin__body {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: var(--fs-body);
  color: var(--dark);
  line-height: var(--lh-base);
}
.sc-gherkin__list { list-style: none; margin: 0; padding: 0; }
.sc-gherkin__list > li + li { margin-top: var(--sp-2); }
.sc-gherkin__list > li,
.sc-gherkin__single { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0; }
.sc-gherkin__list .ds-icon,
.sc-gherkin__single .ds-icon { margin-top: 0.2rem; flex-shrink: 0; }

.sc-gherkin--given .sc-gherkin__label { color: var(--blue); }
.sc-gherkin--given .sc-gherkin__body { background: var(--blue-pale); border-color: var(--blue-light); }
.sc-gherkin--given .ds-icon { color: var(--blue); }
.sc-gherkin--when .sc-gherkin__label { color: var(--amber-text); }
.sc-gherkin--when .sc-gherkin__body { background: var(--amber-bg); border-color: var(--amber-border); }
.sc-gherkin--when .ds-icon { color: var(--amber); }
.sc-gherkin--then .sc-gherkin__label { color: var(--teal); }
.sc-gherkin--then .sc-gherkin__body { background: var(--teal-bg); border-color: rgba(13, 122, 112, 0.28); }
.sc-gherkin--then .ds-icon { color: var(--teal); }

/* ── Scenario summary disclosure (scenario_text.html) ─────────────────────────
 * Inline, because it is rendered mid-sentence inside table cells and headings —
 * a block-level <details> there would break the line it sits on.
 */
.sc-text { display: inline; }
.sc-text__summary { cursor: pointer; }
.sc-text__full {
  margin-top: var(--sp-2);
  font-size: var(--fs-meta);
  color: var(--text-muted);
  line-height: var(--lh-base);
  white-space: pre-line;
}