/* Explainer panels shown atop the domain-listing changelists (see templates/admin/_explainer.html,
   included via each ModelAdmin's `list_before_template`). Structure + the full-width guarantee live
   here so per-page copy can't reintroduce the recurring early-wrap bug, and the teal accents track
   Unfold's `primary` ramp via CSS vars (base.py COLORS) so a re-tint never strands a hardcoded hex. */

/* Full-width guarantee — neutralise any max-width Unfold injects or a dev pastes into a panel. */
.lex-panel :is(p, li, h2, h3, div, aside, details, summary, table) { max-width: none; }

/* "Each row is…" bullet lists (the admin base CSS resets list-style). */
.lex-panel ul { list-style: disc; padding-left: 1.2rem; }
.lex-panel li { margin-top: .25rem; }

/* Teal accent that follows the theme (light: primary-700 #0b6e64, dark: primary-300 #54d6c6). */
.lex-accent { color: var(--color-primary-700); }
.dark .lex-accent { color: var(--color-primary-300); }

/* Links inside a panel — teal + underlined, theme-tracking (e.g. cross-links to another changelist). */
.lex-panel a { color: var(--color-primary-700); text-decoration: underline; }
.dark .lex-panel a { color: var(--color-primary-300); }

/* Inline code chip, e.g. gdelt:timeline:… */
.lex-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em;
  padding: 1px 6px; border-radius: 4px; white-space: nowrap;
  color: var(--color-primary-700);
  background: color-mix(in srgb, var(--color-primary-700) 12%, transparent);
}
.dark .lex-code { color: var(--color-primary-300); background: color-mix(in srgb, var(--color-primary-300) 15%, transparent); }

/* Boundary callout — the ONE "must-not-misread" fact per page. Teal bar + faint wash tie it to the
   accent and read consistently in light and dark (replaces bg-base-100, which barely reads in light). */
.lex-callout { border-left: 3px solid var(--color-primary-700); background: color-mix(in srgb, var(--color-primary-700) 6%, transparent); }
.dark .lex-callout { border-left-color: var(--color-primary-300); background: color-mix(in srgb, var(--color-primary-300) 8%, transparent); }

/* Editable / read-only pill beside the heading. Text colour comes from a class in the template
   (.lex-accent for Editable, a subtle-font token for Read-only); the fill is a faint tint of that
   colour via currentColor, so it themes for free. */
.lex-badge {
  display: inline-flex; align-items: center; font-size: .6875rem; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; padding: 2px 8px; border-radius: 9999px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

/* --- Licence reference disclosure (admin/_licence_reference.html) -----------------------------------
   A native <details> rendered as a self-contained NEUTRAL card (base tint, not teal, so it never
   competes with the teal .lex-callout). The summary is an unmistakably clickable header — a rotating
   leading chevron, a hover fill, a pointer cursor and a focus ring. Unfold globally sets
   `summary{display:list-item}` and only de-triangles its own `fieldset details>summary`, so we strip
   the marker ourselves. Layout/borders/chevron use base + primary CSS vars; text colours come from
   utility classes in the partial. */
.lex-details {
  /* Break out of the panel's icon gutter so the button spans the full panel content width, aligned with
     the icon — not the icon-indented body text. The panel is `flex: [24px icon][gap-3 .75rem][.grow]`. */
  margin-top: 1rem; margin-left: calc(-24px - 0.75rem); border-radius: 10px; overflow: hidden;
  /* White (not warm base-100) lifts the card off the warm panel and gives the teal room to read;
     cool border + faint cool shadow separate it without the beige-on-beige wash. */
  background: #fff;
  border: 1px solid color-mix(in srgb, var(--color-base-700) 20%, #fff);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--color-base-950) 9%, transparent);
}
.dark .lex-details { background: var(--color-base-800); border-color: var(--color-base-700); box-shadow: none; }

/* The bar spans full width (via .lex-details' negative margin), but its content is padded back in by the
   icon+gap so the summary and body align with the panel's other body text (the intro/callout). */
.lex-summary {
  display: flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none;
  padding: .8rem 1rem .8rem calc(24px + 0.75rem); font-weight: 600; user-select: none;
}
.lex-summary::-webkit-details-marker { display: none; }
/* Pink highlight on the clickable header — on hover, and it stays pink while the section is open
   (pink #ff2d8e is the Lumen interactive/wayfinding accent). */
.lex-summary:hover,
.lex-details[open] .lex-summary { background: color-mix(in srgb, #ff2d8e 14%, transparent); }
.dark .lex-summary:hover,
.dark .lex-details[open] .lex-summary { background: color-mix(in srgb, #ff2d8e 24%, transparent); }
/* Pink focus ring — the Lumen chrome/wayfinding accent (matches lumen-admin.css's global rule, which
   only covers input/select/button, not <summary>). Pink #ff2d8e reads in both themes. */
.lex-summary:focus-visible { outline: 2px solid #ff2d8e; outline-offset: -2px; }
.lex-summary::before {
  content: "chevron_right"; font-family: "Material Symbols Outlined"; font-size: 22px; line-height: 1;
  flex: none; color: var(--color-primary-700);
}
.dark .lex-summary::before { color: var(--color-primary-300); }
.lex-details[open] .lex-summary::before { transform: rotate(90deg); }
@media (prefers-reduced-motion: no-preference) {
  .lex-summary, .lex-summary::before { transition: background .12s ease, transform .15s ease; }
}

.lex-details-body { padding: .9rem 1rem 1.1rem calc(24px + 0.75rem); border-top: 1px solid color-mix(in srgb, var(--color-base-700) 14%, transparent); }
.dark .lex-details-body { border-top-color: var(--color-base-700); }
.lex-frame { margin-bottom: 1rem; }

/* Group captions: colour-coded flush-left labels (Lumen teal = may store the body — the legally
   sensitive set; warm-neutral = excerpt-only). Flush-left (no inset band) so every left edge —
   framing line, caption, header, rows — lines up on one rail. */
.lex-tcap {
  caption-side: top; text-align: left; padding: .1rem 0 .45rem;
  text-transform: uppercase; letter-spacing: .05em; font-size: .6875rem; font-weight: 700;
}
.lex-tcap--store { color: var(--color-primary-700); }
.dark .lex-tcap--store { color: var(--color-primary-300); }
.lex-tcap--excerpt { color: var(--color-base-700); }
.dark .lex-tcap--excerpt { color: var(--color-base-300); }

/* Line-table (horizontal 1px separators, no zebra): header rule a step stronger than the rows. */
/* No `width: 100%` here: under global `box-sizing: border-box`, combining it with the store group's
   negative margins + horizontal padding over-constrains the width and shrinks the store table (pulling
   its right edge in, so its columns stop lining up with the excerpt group). A block div fills width anyway. */
.lex-table-wrap { overflow-x: auto; }
.lex-table-wrap + .lex-table-wrap { margin-top: 1.1rem; }
/* Faint teal wash on the "may store body" group — a tidy rounded panel that frames the table with a
   small, symmetric margin, so its columns stay on the same rail (and aligned with) the excerpt group. */
.lex-table-wrap--store {
  background: color-mix(in srgb, var(--color-primary-500) 5%, transparent);
  margin: 0 -.75rem; padding: .5rem .75rem; border-radius: 6px;
}
.dark .lex-table-wrap--store { background: color-mix(in srgb, var(--color-primary-300) 7%, transparent); }
.lex-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .875rem; line-height: 1.45; }
.lex-table th:nth-child(1), .lex-table td:nth-child(1) { width: 17%; }
.lex-table th:nth-child(3), .lex-table td:nth-child(3) { width: 27%; }
.lex-table th[scope="col"] {
  text-align: left; font-weight: 600; padding: 2px 18px 8px 0; vertical-align: bottom;
  border-bottom: 1px solid color-mix(in srgb, var(--color-base-700) 28%, transparent);
}
.dark .lex-table th[scope="col"] { border-bottom-color: var(--color-base-600); }
.lex-table td, .lex-table th[scope="row"] {
  padding: 10px 18px 10px 0; vertical-align: top; text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--color-base-700) 13%, transparent);
}
.dark .lex-table td, .dark .lex-table th[scope="row"] { border-bottom-color: var(--color-base-700); }
.lex-table tr:last-child > * { border-bottom: 0; }
.lex-lic { font-weight: 600; }
/* Teal licence names in the "may store the body" group reinforce the colour-coding. */
.lex-table--store .lex-lic { color: var(--color-primary-700); }
.dark .lex-table--store .lex-lic { color: var(--color-primary-300); }
.lex-usedby-roadmap { font-style: italic; }
.lex-caveat { display: block; margin-top: 5px; font-size: .95em; }
.lex-caveat-ic { font-size: 14px; vertical-align: -2px; margin-right: 4px; color: var(--color-primary-700); }
.dark .lex-caveat-ic { color: var(--color-primary-300); }