/* ==========================================================================
   Kuwait Mirror — the one stylesheet of the one site, kuwaitmirror.com: the
   company's pages and its client pages, KMI (/intelligence/) and its public sections —
   Source Log and the Register. The owner, 2026-10-02: one
   style — KMI's — for all of them; the only difference between products is
   the colour of their buttons, set once per product on <body data-product>
   (--brand / --brand-dim / --brand-ink, below). Links, text, panels, tables
   and forms are the same everywhere. Never add a second stylesheet: a new
   component belongs here, used by every product that needs it.
   (It was KMI's terminal.css; editorial.css, company.css, training.css,
   fonts.css and the Dossier's own stylesheet were folded in or retired.)
   ========================================================================== */

:root {
  /* Kuwait Mirror brand palette (kuwaitmirror.com --ink/--paper scheme) */
  --bg: #eeedeb;
  --bg-raised: #f6f8f9;
  --bg-inset: #e2e0dd;
  --border: rgba(52, 65, 75, 0.14);
  --border-bright: rgba(52, 65, 75, 0.26);
  --text: #34414b;
  --text-dim: #546878;
  --text-faint: #778fa1;
  --accent: #34414b;
  --accent-dim: #232c33;
  --warn: #546878;
  --danger: #ce1126;
  --info: #34414b;
  --good: #00732f;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
    Menlo, Consolas, monospace;
  /* Buttons — the one thing that differs between products. */
  --brand: #34414b;
  --brand-dim: #232c33;
  --brand-ink: #f6f8f9;
}

/* Buttons take the site's own slate (--brand above, the Sign In button's
   colour) everywhere — the Register alone has its own, burgundy (the owner,
   2026-10-03). data-product sits on the Register's own content. */
[data-product="register"] { --brand: #7C1F2C; --brand-dim: #5C1620; --brand-ink: #F8F0EA; }

* {
  box-sizing: border-box;
}

/* Every page keeps the stylesheet's own sizes on a phone: iOS Safari otherwise
   enlarges the text of any block it judges too wide to read — a long entry
   summary on Source Log (fixed for the Dossier 2026-09-30, lost when the sites
   moved to this one stylesheet; restored 2026-10-03). Guarded by OneStyleTests. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ---- Shell layout ---- */

.kmi-header {
  background: var(--bg-raised);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.kmi-header-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 10px 24px;
  min-height: 52px;
}

.kmi-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text);
}

.kmi-logo {
  height: 26px;
  width: auto;
  display: block;
}

.kmi-brand-kicker {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.kmi-disclaimer-bar {
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11px;
  padding: 7px 24px;
  text-align: center;
}

.kmi-disclaimer-bar a {
  color: var(--text);
  text-decoration: underline;
}


.kmi-header-login {
  display: flex;
  gap: 0;
  flex-shrink: 0;
}

.kmi-header-login input {
  width: 220px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: var(--bg-inset);
  border: 1px solid var(--border-bright);
  border-right: none;
  border-radius: 2px 0 0 2px;
  padding: 6px 10px;
}

.kmi-header-login input:focus {
  outline: none;
  border-color: var(--accent);
}

.kmi-header-login button {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--brand);
  color: var(--brand-ink);
  border: 1px solid var(--brand);
  border-radius: 0 2px 2px 0;
  padding: 0 14px;
  cursor: pointer;
}

.kmi-header-login-error {
  padding: 6px 24px;
  font-size: 11px;
  color: var(--danger);
  text-align: right;
  border-top: 1px solid var(--border);
}

.kmi-session {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.kmi-session-credits {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 2px;
  padding: 3px 7px;
  white-space: nowrap;
}

.kmi-session-credits-low {
  color: var(--danger);
  border-color: var(--danger);
}

/* A link and a <button> (Logout) the same size: a button does not inherit
   the page's line height, so it is set here, with the box model. */
/* A small tag inside a header button — "Open-Access" beside Source Log (the owner, 2026-10-04). */
.kmi-session-tag {
  margin-left: 7px;
  padding: 0 4px;
  border: 1px solid var(--good);
  border-radius: 2px;
  color: var(--good);
  font-size: 8px;
  letter-spacing: 0.08em;
  vertical-align: 1px;
}

.kmi-session-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.5;
  box-sizing: border-box;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: none;
  color: var(--text-dim);
  border: 1px solid var(--border-bright);
  border-radius: 2px;
  padding: 5px 9px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.kmi-session-btn:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

.kmi-session-btn-danger:hover {
  color: var(--danger);
  border-color: var(--danger);
}

.kmi-messages {
  max-width: 1180px;
  margin: 12px auto 0;
  padding: 0 24px;
}

.kmi-message {
  font-size: 12px;
  padding: 8px 14px;
  border: 1px solid var(--border-bright);
  border-radius: 2px;
  margin-bottom: 8px;
  background: var(--bg-raised);
}

.kmi-message-warning { border-color: var(--danger); color: var(--danger); }
.kmi-message-info { border-color: var(--text-dim); color: var(--text-dim); }
/* Real production incident, 2026-09-23 (see apps.register.views.
   ApplicationPublicFormView's own docstring): Django's default tag for
   messages.error() is literally "error" (class kmi-message-error), but
   no rule for that exact class existed here at all — every validation
   error on apps.kmi.dashboard.views.IntakePublicFormView/
   PEPCertificationFormView rendered as a plain, uncoloured box,
   effectively invisible next to a genuine mistake's real cost (a lost
   submission). Filled, not just a coloured border, so it is impossible
   to miss. */
.kmi-message-error { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 600; }

.kmi-secret-reveal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
  vertical-align: middle;
}

.kmi-secret-value {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 3px 8px;
  min-width: 340px;
  max-width: 100%;
  background: var(--bg-inset);
  border: 1px solid var(--border-bright);
  border-radius: 2px;
  color: var(--text);
}

.kmi-secret-value-sm { min-width: 150px; }

/* The "…" suffix on a truncated identifier (see the API Keys table) is
   deliberately NOT part of the <input>'s value — Copy must only ever
   copy the real identifier, never a trailing ellipsis character — but
   it still needs to look visually attached to the box, not floating
   outside it. kmi-secret-value-group joins an <input> and a following
   <span> into one seamless-looking box (input keeps its left border/
   radius, drops its right ones; the span is the mirror image), so the
   two elements read as one control despite being visually merged and
   functionally separate for copying purposes. */
.kmi-secret-value-group {
  display: inline-flex;
  align-items: stretch;
  vertical-align: middle;
}

/* A private link to copy, as wide as its panel allows (_copy_value.html). */
.kmi-copy-row { display: flex; width: 100%; max-width: 720px; }
.kmi-copy-row .kmi-secret-value { flex: 1; min-width: 0; }

.kmi-secret-value-joined {
  border-right: none;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.kmi-secret-value-ellipsis {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 3px 8px 3px 0;
  background: var(--bg-inset);
  border: 1px solid var(--border-bright);
  border-left: none;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  color: var(--text);
}

.kmi-secret-value-revoked {
  text-decoration: line-through;
  color: var(--danger);
  border-color: var(--danger);
  opacity: 0.75;
}

.kmi-copy-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 3px 10px;
  background: var(--brand);
  color: var(--brand-ink);
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

.kmi-copy-btn:hover { background: var(--brand-dim); }

.kmi-main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px;
}

/* Every page's outermost blocks (.kmi-panel, .kmi-record, .kmi-section, …)
   carry their own margin-bottom for spacing *between* stacked elements —
   correct there, but on the true last element it stacks on top of
   .kmi-main's own bottom padding, making the gap before the footer bigger
   than the gap below the header for no reason. Zeroing it here keeps
   top/bottom page padding equal on every page from one place, instead of
   every template having to remember to override it on its own last block. */
.kmi-main > *:last-child {
  margin-bottom: 0;
}

.kmi-pagehead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.kmi-pagehead h1 {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
}

.kmi-pagehead .meta {
  color: var(--text-faint);
  font-size: 11px;
}

.kmi-crumb {
  color: var(--text-faint);
  font-size: 11px;
  letter-spacing: 0.02em;
}

.kmi-crumb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.kmi-actions-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.kmi-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.kmi-subtabs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
}

.kmi-subtabs-row .kmi-subtabs {
  margin-bottom: 0;
}

/* The right-hand side of the row: the screening tools, then the page's
   own action (Download CSV). */
.kmi-subtabs-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.kmi-subtabs a {
  color: var(--text-dim);
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.kmi-subtabs a:hover,
.kmi-subtabs a.active {
  color: var(--accent);
  background: var(--bg-inset);
  border-color: var(--accent);
  text-decoration: none;
}

.kmi-crossmatch {
  font-size: 12px;
  color: var(--text-dim);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 8px 12px;
  margin-bottom: 18px;
}

.kmi-crossmatch a {
  color: var(--accent);
}

.kmi-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11px;
  color: var(--text-dim);
}

.kmi-activity-list li {
  padding: 2px 0;
}

/* ---- Source Log System Overview ---- */

.kmi-overview-grid {
  display: flex;
  justify-content: center;
  background: var(--bg-raised);
  padding: 20px 16px;
}

.kmi-overview-card {
  text-align: center;
  min-width: 220px;
  max-width: 480px;
}

/* Why the assessment stands where it does (Source Log's overall
   indicator, CountryIndicatorConfig.rationale). */
.kmi-overview-rationale {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
}

.kmi-overview-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
  margin-bottom: 8px;
}

.kmi-overview-trend {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-dim);
}

/* ---- Filter bar ---- */

.kmi-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.kmi-filterfield {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  max-width: 100%;
}

.kmi-filterfield label {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.kmi-searchgroup {
  display: flex;
  gap: 6px;
}

.kmi-searchgroup select {
  min-width: 0;
  width: auto;
}

.kmi-filterbar input,
.kmi-filterbar select {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: var(--bg-inset);
  border: 1px solid var(--border-bright);
  border-radius: 2px;
  padding: 6px 8px;
  min-width: 140px;
  max-width: 100%;
}

.kmi-filterbar input:focus,
.kmi-filterbar select:focus {
  outline: none;
  border-color: var(--accent);
}

.kmi-filterfield-actions {
  flex-direction: row;
  gap: 8px;
}

/* A filter bar whose search is its only real tool: the field fills the row. */
.kmi-filterfield-grow { flex: 1; }
.kmi-filterfield-grow input { width: 100%; }

.kmi-btn,
.kmi-filterbar button {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--brand);
  color: var(--brand-ink);
  border: 1px solid var(--brand);
  border-radius: 2px;
  padding: 7px 14px;
  cursor: pointer;
}

.kmi-btn:hover,
.kmi-filterbar button:hover {
  background: var(--brand-dim);
  border-color: var(--brand-dim);
}

.kmi-btn:disabled,
.kmi-filterbar button:disabled {
  background: none;
  color: var(--text-faint);
  border-color: var(--border);
  cursor: not-allowed;
}

.kmi-filterfield-actions a {
  font-size: 11px;
  color: var(--text-dim);
  align-self: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Same look as .kmi-filterbar's own input/select styling, but usable
   standalone (full-width, not a fixed min-width flex chip) — for a form
   field laid out in its own <label> block rather than inside a filter
   bar, e.g. the public intake form's per-subject fields. */
.kmi-field-input {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: var(--bg-inset);
  border: 1px solid var(--border-bright);
  border-radius: 2px;
  padding: 6px 8px;
  width: 100%;
  box-sizing: border-box;
}

.kmi-field-input:focus {
  outline: none;
  border-color: var(--accent);
}

/* ---- Panels / module sections ---- */

.kmi-panel {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  margin-bottom: 24px;
  overflow-x: auto;
}

.kmi-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.kmi-panel-head a {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
}

.kmi-collapsible > summary.kmi-panel-head {
  cursor: pointer;
  list-style: none;
}

.kmi-collapsible > summary.kmi-panel-head::-webkit-details-marker {
  display: none;
}

.kmi-collapsible > summary.kmi-panel-head::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s ease;
}

.kmi-collapsible[open] > summary.kmi-panel-head::before {
  transform: rotate(90deg);
}

/* ---- Restricted-record lock icon ---- */

.kmi-lock {
  vertical-align: -2px;
  display: inline-block;
}

.kmi-lock-closed {
  color: #b91c1c;
}

.kmi-lock-open {
  color: var(--text-faint);
}

.kmi-pin {
  vertical-align: -2px;
  display: inline-block;
  color: var(--accent);
}

/* ---- Overview stat boxes ---- */

.kmi-stats {
  display: flex;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  margin-bottom: 24px;
}

.kmi-stat {
  flex: 1;
  background: var(--bg-raised);
  padding: 16px;
  text-align: center;
}

.kmi-stat .kmi-stat-num {
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
}

.kmi-stat .kmi-stat-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: 6px;
}

@media (max-width: 640px) {
  .kmi-stats {
    flex-wrap: wrap;
  }
  .kmi-stat {
    flex-basis: 100%;
  }
}

/* ---- Tables ---- */

table.kmi-table {
  width: 100%;
  border-collapse: collapse;
}

table.kmi-table th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 500;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-inset);
}

table.kmi-table td {
  padding: 9px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  overflow-wrap: anywhere;
}

/* A second, quieter line in a table cell: a source's own wording under its
   English translation (adverse media), a court under a jurisdiction, a
   summary under an offence (criminal proceedings, restrictions). */
.kmi-original-text,
.kmi-cell-note {
  margin-top: 3px;
  font-size: 12px;
  color: var(--text-dim);
}

/* Amounts align right; a total row stands out (an invoice). */
table.kmi-table .num { text-align: right; white-space: nowrap; }
table.kmi-table tr.is-total td { font-weight: 600; border-top: 1px solid var(--border-bright); }

table.kmi-table tr:last-child td {
  border-bottom: none;
}

table.kmi-table tr:hover td {
  background: var(--bg-inset);
}

/* A table in groups (the Register's instruct pages: kinds of work): each
   group opens with a heading row in the column-header style, and the
   action sits right, on one line. */
table.kmi-table tr.kmi-table-group th { color: var(--text); border-top: 1px solid var(--border); }
table.kmi-table tbody:first-child tr.kmi-table-group th { border-top: none; }
table.kmi-table td.kmi-table-action { width: 1%; white-space: nowrap; text-align: right; vertical-align: middle; }

.kmi-ref {
  color: var(--text-faint);
  font-size: 11px;
}

.kmi-empty {
  padding: 24px 16px;
  color: var(--text-faint);
  font-size: 12px;
}

/* Under a search that found nothing: an empty result is not a clearance. */
.kmi-empty-note {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
}

/* ---- Badges ---- */

.badge {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 2px;
  border: 1px solid currentColor;
  margin: 2px 4px 2px 0;
  /* overflow-wrap is an inherited property, so table.kmi-table td's own
     overflow-wrap:anywhere (needed for long free-text cells like a URL or
     description) cascades into every badge too — inside a narrow table
     column that shrinks an inline-block badge down tight, "anywhere"
     breaks a long choice-field label (e.g. a CaseType like "Press / Media
     Freedom Violation") mid-word, one character per line, instead of at
     its own word spaces. Reset to normal word-wrapping here specifically,
     independent of whatever the surrounding cell needs. */
  overflow-wrap: normal;
}

.badge-accent { color: var(--accent); }
.badge-warn { color: var(--warn); }
.badge-danger { color: var(--danger); }
.badge-info { color: var(--info); }
.badge-dim { color: var(--text-dim); }
.badge-good { color: var(--good); }

/* ---- Detail record layout ---- */

.kmi-record {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  overflow-x: auto;
  margin-bottom: 24px;
}

.kmi-record-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.kmi-record-head h1 {
  font-size: 18px;
  margin: 0 0 6px;
  color: var(--text);
}

.kmi-record-head-photo {
  display: flex;
  align-items: center;
  gap: 16px;
}

.kmi-photo {
  width: 64px;
  height: 64px;
  border-radius: 3px;
  border: 1px solid var(--border-bright);
  object-fit: cover;
  flex-shrink: 0;
}

/* A member without a photo: the same square, the first letter of their name. */
.kmi-photo-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-inset);
  color: var(--text-dim);
  font-size: 26px;
  font-weight: 600;
}

.kmi-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-inset);
  color: var(--text-faint);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
}

code {
  font-family: var(--font-mono);
  background: var(--bg-inset);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 0.95em;
}

.kmi-fields {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 0;
}

.kmi-fields dt {
  padding: 10px 20px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
  background: var(--bg-inset);
}

.kmi-fields dd {
  margin: 0;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

/* ---- Read more / read less (apps.core.templatetags.text_extras) ---- */

.kmi-readmore {
  max-height: 6.4em; /* ~4 lines at line-height:1.6 */
  overflow: hidden;
  position: relative;
  line-height: 1.6;
}

.kmi-readmore:not(.expanded):not(.kmi-readmore-noclamp)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.6em;
  background: linear-gradient(to bottom, transparent, var(--bg-raised));
}

.kmi-readmore.expanded {
  max-height: none;
}

.kmi-readmore-toggle {
  margin-top: 8px;
}

/* .kmi-session-btn's own `display: inline-block` is an author rule, so
   it beats the browser's built-in `[hidden] { display: none }` UA rule
   outright regardless of selector specificity (author origin always
   wins over user-agent origin in the cascade) — read-more.js setting
   .hidden = true on a short, non-overflowing block's toggle button did
   nothing without this override, confirmed directly: the attribute was
   present in the DOM but the button still rendered. Scoped to the class
   itself (not just .kmi-readmore-toggle, the first button this hit) so
   any other .kmi-session-btn toggled via .hidden — e.g. intake-form.js's
   "+ Add Another Subject" button — is covered by the same fix instead of
   needing its own one-off rule discovered the same way. */
.kmi-session-btn[hidden] {
  display: none;
}

/* ---- Pagination ---- */

.kmi-pagination {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
}

/* ---- Footer ---- */

.kmi-footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 24px 40px;
  color: var(--text-faint);
  font-size: 11px;
  text-align: center;
  border-top: 1px solid var(--border);
}

/* The legal documents, in the one footer (templates/site/_footer.html). */
.kmi-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 18px;
  margin: 12px 0;
}

.kmi-footer-links a {
  color: var(--text-dim);
}

/* A heading that is a link to itself (the terms: #Register-3). */
a.kmi-anchor {
  color: inherit;
  text-decoration: none;
}

a.kmi-anchor:hover {
  text-decoration: underline;
}

/* A link to a heading (/terms#Register-3) lands it below the sticky header;
   static/js/site.js sets the exact height — these are its fallbacks. */
html { scroll-padding-top: 72px; }

@media (max-width: 720px) {
  html { scroll-padding-top: 176px; }
}

/* ---- Landing page ---- */

.kmi-cta {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--brand);
  color: var(--brand-ink);
  border: 1px solid var(--brand);
  border-radius: 3px;
  padding: 14px 32px;
  text-decoration: none;
}

.kmi-cta:hover {
  background: var(--brand-dim);
  border-color: var(--brand-dim);
  text-decoration: none;
}

/* A section spans the page's own width — every box on every page starts and
   ends at the same two edges, .kmi-main's (the owner, 2026-10-03). It once
   added its own width and side padding, so a section's boxes sat 24px inside
   everything else's. Guarded by OneStyleTests. */
.kmi-section {
  margin: 0 0 48px;
}

.kmi-section-head {
  text-align: center;
  margin-bottom: 24px;
}

.kmi-section-head h1,
.kmi-section-head h2 {
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin: 0 0 6px;
}

.kmi-section-head p {
  color: var(--text-dim);
  font-size: 12px;
  margin: 0;
}

/* Pricing */

.kmi-pricing-product {
  margin-bottom: 32px;
}

.kmi-pricing-product h3 {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 16px;
}




.kmi-card .price {
  font-size: 22px;
  font-weight: 600;
  color: var(--accent);
}

.kmi-card .price small {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 400;
}


.kmi-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 11px;
  color: var(--text-dim);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.kmi-card ul li::before {
  content: "— ";
  color: var(--text-faint);
}

.kmi-subscribe-row {
  text-align: center;
  margin-top: 28px;
}

/* FAQ */

.kmi-faq {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
}

.kmi-faq-item {
  border-bottom: 1px solid var(--border);
}

.kmi-faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 4px;
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kmi-faq-item summary::-webkit-details-marker {
  display: none;
}

.kmi-faq-item summary::after {
  content: "+";
  color: var(--text-faint);
  font-size: 16px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.kmi-faq-item[open] summary::after {
  transform: rotate(45deg);
}

.kmi-faq-item p {
  margin: 0;
  padding: 0 4px 18px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-dim);
}

.kmi-faq-item p + ul {
  list-style: none;
  margin: -8px 0 0;
  padding: 0 4px 18px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-dim);
}

.kmi-faq-item ul li::before {
  content: "— ";
  color: var(--text-faint);
}

/* ---- Small screens ---- */

@media (max-width: 720px) {
  .kmi-header-top {
    flex-direction: column;
    align-items: stretch;
  }

  .kmi-brand {
    align-items: center;
  }

  .kmi-header-login {
    max-width: none;
    width: 100%;
  }

  .kmi-header-login input {
    flex: 1;
    width: auto;
  }

  .kmi-session {
    justify-content: center;
  }

  .kmi-header-login-error {
    text-align: center;
  }

  .kmi-fields {
    grid-template-columns: 1fr;
  }

  .kmi-fields dt {
    border-bottom: none;
    padding-bottom: 2px;
  }

  /* A wide table (many columns, long cell content) doesn't actually
     become usable by scrolling sideways inside .kmi-panel on a phone —
     you'd see one sliver of one column at a time. Instead, collapse each
     row into a stack of labelled fields; base.html mirrors each column's
     header onto the matching cell as data-label for this to read from. */
  table.kmi-table thead {
    display: none;
  }

  table.kmi-table,
  table.kmi-table tbody,
  table.kmi-table tr,
  table.kmi-table td {
    display: block;
    width: 100%;
  }

  table.kmi-table tr {
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
  }

  table.kmi-table tr:last-child {
    border-bottom: none;
  }

  table.kmi-table td {
    border-bottom: none;
    padding: 4px 16px;
  }

  table.kmi-table td:empty {
    display: none;
  }

  table.kmi-table tr.kmi-table-group th {
    display: block;
  }

  table.kmi-table td.kmi-table-action {
    width: 100%;
    text-align: left;
  }

  table.kmi-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 2px;
  }
}

/* The reason for a screening (subjects/_search_reason_field.html) — on the
   Bulk Screening form and an intake's Review Decision. */
.kmi-reason-field {
  margin: 12px 0;
  max-width: 420px;
}

/* The reason for a search, asked when it is run (_search_reason_dialog.html,
   static/js/search-reason.js). */
.kmi-dialog {
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--border-bright);
  border-radius: 2px;
  padding: 20px 22px;
  width: min(440px, calc(100vw - 32px));
  box-sizing: border-box;
}

.kmi-dialog::backdrop { background: rgba(35, 44, 51, 0.45); }

/* A dialog holding a whole form (the company's "Send a Proposal"). */
.kmi-dialog-wide {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.kmi-dialog-close {
  float: right;
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
}

.kmi-dialog h2 {
  font-size: 15px;
  margin: 0 0 6px;
}

.kmi-dialog .meta { margin: 0 0 14px; }

.kmi-dialog-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}

.kmi-dialog-choices label {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 13px;
  cursor: pointer;
}

.kmi-dialog-choices input { margin-top: 2px; accent-color: var(--accent); }

.kmi-dialog-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ---- Leadership Map (templates/subjects/leadership.html) ---- */

.kmi-leadership-note {
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 20px;
  max-width: 880px;
}

.kmi-leadership-section {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 28px 0 10px;
}

.kmi-leadership-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  margin-bottom: 8px;
}

.kmi-institution {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 12px 14px;
  min-width: 0;
}

.kmi-institution.is-suspended {
  border-style: dashed;
}

.kmi-institution-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.kmi-institution-name {
  font-weight: 600;
  font-size: 13px;
}

.kmi-institution-name-ar {
  font-size: 13px;
  color: var(--text-dim);
}

/* The monospace face has no Arabic letters; the browser's fallback spaces
   them apart. Arabic marked lang="ar" uses the system's Arabic face. */
:lang(ar) {
  font-family: system-ui, "Geeza Pro", "Segoe UI", Tahoma, sans-serif;
  letter-spacing: 0;
}

.kmi-institution-status {
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 8px 0 0;
}

.kmi-institution .kmi-empty {
  padding: 10px 0 0;
}

.kmi-holders {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kmi-holder {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.kmi-holders .kmi-holder:last-child {
  border-bottom: none;
}

.kmi-holder-name {
  font-weight: 600;
  display: block;
}

.kmi-holder-title {
  display: block;
  font-size: 12px;
  margin-top: 2px;
}

.kmi-holder-title a {
  color: var(--text);
}

.kmi-holder .kmi-cell-note,
.kmi-links-table .kmi-cell-note {
  display: block;
}

.kmi-holder-links {
  margin-top: 6px;
  font: inherit;
  font-size: 11px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--bg-inset);
  border: 1px solid var(--accent);
  border-radius: 3px;
  padding: 2px 8px;
  cursor: pointer;
}

.kmi-network-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}

.kmi-network {
  max-width: 100%;
  height: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  flex: 0 0 auto;
}

.kmi-network-edge {
  stroke: var(--text-faint);
  stroke-width: 1.5;
}

.kmi-network-edge-spouse {
  stroke-dasharray: 5 3;
}

.kmi-network-edge-other {
  stroke-dasharray: 2 3;
}

.kmi-network-node rect {
  fill: var(--bg-raised);
  stroke: var(--border-bright);
}

.kmi-network-node.is-holder rect {
  fill: var(--accent);
  stroke: var(--accent);
}

.kmi-network-node text {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--text);
}

.kmi-network-node.is-holder text {
  fill: #fff;
}

.kmi-network-node text.kmi-network-sub {
  font-size: 9px;
  fill: var(--text-dim);
}

.kmi-network-node.is-holder text.kmi-network-sub {
  fill: rgba(255, 255, 255, 0.78);
}

.kmi-network-node:hover rect,
.kmi-network-node.is-selected rect {
  stroke: var(--danger);
  stroke-width: 2;
}

/* A person selected: everything else fades back. */
.kmi-leadership-focused .kmi-holder:not(.is-shown),
.kmi-leadership-focused .kmi-network-node:not(.is-shown),
.kmi-leadership-focused .kmi-links-table tr[data-people]:not(.is-shown) {
  opacity: 0.25;
}

.kmi-leadership-focused .kmi-links-table tr[data-people]:not(.is-shown) {
  display: none;
}

.kmi-holder.is-selected {
  outline: 2px solid var(--danger);
  outline-offset: 2px;
}

/* ---- Delegation Tracker (templates/subjects/delegation_list.html) ---- */

.kmi-country-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
}

.kmi-country-counts a {
  font-size: 12px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 3px 8px;
}

.kmi-country-counts a.active,
.kmi-country-counts a:hover {
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}


/* ==========================================================================
   Shared components — every product (2026-10-02). Each replaces what the
   Register, Training and the company site had in their own stylesheets, and
   the inline style="" attributes pages carried; a page uses these, never a
   style attribute.
   ========================================================================== */

/* ---- Text ---- */

.kmi-kicker {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 0 0 8px;
}

.kmi-lede {
  color: var(--text-dim);
  font-size: 12px;
  line-height: 1.6;
  max-width: 760px;
  margin: 0 0 20px;
}

.kmi-note {
  color: var(--text-faint);
  font-size: 11px;
  line-height: 1.5;
}

.kmi-prose p,
.kmi-prose ul,
.kmi-prose ol {
  margin: 0 0 12px;
  line-height: 1.65;
}

.kmi-prose ul,
.kmi-prose ol {
  padding-left: 18px;
}

.kmi-prose li + li {
  margin-top: 4px;
}

.kmi-prose h2,
.kmi-prose h3 {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 20px 0 8px;
}

.kmi-prose > :first-child { margin-top: 0; }
.kmi-prose > :last-child { margin-bottom: 0; }

.kmi-price-was {
  color: var(--text-faint);
  text-decoration: line-through;
}

.kmi-brand-text {
  color: var(--brand);
}

/* A short value that must stay on one line (a date in a table column). */
.kmi-nowrap { white-space: nowrap; }

/* ---- Landing statement (a product's front page) ---- */

.kmi-section-head .kmi-kicker { margin-bottom: 10px; }

/* A box that follows a section's cards, edge to edge with them (the home page's newsletter). */
.kmi-section-follow { margin: 16px 0 0; }

.kmi-section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

/* ---- Panels ---- */

.kmi-panel-body {
  padding: 16px 20px;
}

.kmi-panel-body > :first-child { margin-top: 0; }
.kmi-panel-body > :last-child { margin-bottom: 0; }

.kmi-panel-body + .kmi-panel-body {
  border-top: 1px solid var(--border);
}

.kmi-panel-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border);
}

.kmi-panel-danger { border-color: var(--danger); }
.kmi-panel-danger > .kmi-panel-head { color: var(--danger); }

/* ---- Cards (KMI's pricing tiers, a product's ways in) ---- */

.kmi-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.kmi-card {
  border: 1px solid var(--border-bright);
  background: var(--bg-raised);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kmi-card h3,
.kmi-card h4 {
  font-size: 13px;
  color: var(--text);
  margin: 0;
}

.kmi-card p {
  font-size: 12px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.55;
}

.kmi-card.is-featured { border-color: var(--brand); }

/* A card's few facts (a programme's duration, language, fee). */
.kmi-card dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: 11px;
}

.kmi-card dt {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.kmi-card dd { margin: 0; color: var(--text); }

.kmi-card > .kmi-btn,
.kmi-card > .kmi-btn-secondary {
  align-self: flex-start;
  margin-top: auto;
}

/* ---- Buttons ---- */

.kmi-btn {
  display: inline-block;
  text-decoration: none;
}

.kmi-btn:hover { text-decoration: none; }

.kmi-btn-secondary {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: none;
  color: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 2px;
  padding: 7px 14px;
  cursor: pointer;
  text-decoration: none;
}

.kmi-btn-secondary:hover {
  background: var(--brand);
  color: var(--brand-ink);
  text-decoration: none;
}

.kmi-btn-link {
  font-family: var(--font-mono);
  font-size: 11px;
  background: none;
  border: none;
  padding: 0;
  color: var(--text-dim);
  text-decoration: underline;
  cursor: pointer;
}

/* The header's own call to action ("The Register →", "Urgent Call →"). */
.kmi-session-btn-primary {
  background: var(--brand);
  color: var(--brand-ink);
  border-color: var(--brand);
}

.kmi-session-btn-primary:hover {
  background: var(--brand-dim);
  border-color: var(--brand-dim);
  color: var(--brand-ink);
}

.kmi-session-btn.is-current {
  color: var(--text);
  border-color: var(--text-dim);
}

/* ---- Forms ---- */

.kmi-form {
  display: grid;
  gap: 16px;
}

.kmi-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.kmi-form-field {
  display: block;
  min-width: 0;
}

.kmi-form-field.is-full { grid-column: 1 / -1; }

.kmi-form-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 5px;
}

.kmi-form-required { color: var(--danger); }

.kmi-form-field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.kmi-form-field select,
.kmi-form-field textarea {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text);
  background: var(--bg-inset);
  border: 1px solid var(--border-bright);
  border-radius: 2px;
  padding: 7px 9px;
  width: 100%;
  box-sizing: border-box;
}

.kmi-form-field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

.kmi-form-field input:focus,
.kmi-form-field select:focus,
.kmi-form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.kmi-form-field.has-error input,
.kmi-form-field.has-error select,
.kmi-form-field.has-error textarea {
  border-color: var(--danger);
}

.kmi-form-help {
  display: block;
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 5px;
  line-height: 1.5;
}

.kmi-form-error {
  display: block;
  font-size: 11px;
  color: var(--danger);
  margin-top: 5px;
}

.kmi-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.kmi-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
}

.kmi-check input { margin-top: 3px; accent-color: var(--brand); flex-shrink: 0; }

.kmi-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px 16px;
}

.kmi-input-group {
  display: flex;
  align-items: stretch;
}

.kmi-input-group > span {
  display: flex;
  align-items: center;
  padding: 0 9px;
  font-size: 12px;
  color: var(--text-dim);
  background: var(--bg-raised);
  border: 1px solid var(--border-bright);
}

.kmi-input-group > span:first-child { border-right: none; }
.kmi-input-group > span:last-child { border-left: none; }

/* A row a visitor can repeat ("+ Add another"): its fields side by side,
   wrapping on a narrow screen, then its Remove button. */
.kmi-repeat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.kmi-repeat-row > .kmi-form-field { flex: 1 1 160px; }
.kmi-repeat-row + .kmi-btn-secondary,
.kmi-repeat-row + .kmi-repeat-row + .kmi-btn-secondary { margin-top: 12px; }

/* A heading inside a panel's form, above a group of fields. */
.kmi-form-section {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin: 22px 0 8px;
}

.kmi-form-section + .kmi-form-help { margin: -4px 0 10px; }
.kmi-form-help + .kmi-check-grid,
.kmi-form-section + .kmi-check-grid { margin-top: 4px; }
.kmi-check-grid + .kmi-form-field,
.kmi-check + .kmi-check { margin-top: 8px; }

/* Numbered questions, each a fieldset of choices (the Register's
   pre-application questionnaire). */
.kmi-questions {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 16px;
}

.kmi-questions fieldset { border: 0; margin: 0; padding: 0; }
.kmi-questions legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.kmi-questions .kmi-check + .kmi-check { margin-top: 6px; }

/* A spam trap no person sees (apps.core.captcha.honeypot_filled). */
.kmi-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Lists ---- */

.kmi-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kmi-list > li {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
}

.kmi-list > li:last-child { border-bottom: none; }

.kmi-list-title {
  font-weight: 600;
  color: var(--text);
}

/* A process shown as steps, the ones done marked. */
.kmi-steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.kmi-steps li {
  counter-increment: step;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-top: 2px solid var(--border-bright);
  padding-top: 8px;
}

.kmi-steps li::before {
  content: counter(step) ". ";
}

.kmi-steps li.is-done {
  color: var(--text);
  border-top-color: var(--brand);
}

/* ---- Documents (terms to sign, proposals) ----
   The body of a document as engagements/_document_segments.html renders it —
   the same segments as its archived PDF: headings numbered here (never typed),
   lists by kind. In a scrolling box on the signing page; .kmi-document-full
   lets it run its whole length (a proposal). */

.kmi-document {
  counter-reset: section;
  padding: 16px 20px;
  max-height: 420px;
  overflow-y: auto;
  line-height: 1.7;
  font-size: 12px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
}

.kmi-document-full { max-height: none; }

.kmi-document h2 {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  margin: 20px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.kmi-document h2:first-child { margin-top: 0; }
.kmi-document h2::before { counter-increment: section; content: counter(section) ". "; }
.kmi-document p { margin: 0 0 10px; }
.kmi-document ol,
.kmi-document ul { margin: 0 0 12px; padding-left: 1.4em; }
.kmi-document ol { list-style-type: decimal; }
.kmi-document ol[data-kind="lower-alpha"] { list-style-type: lower-alpha; }
.kmi-document ul { list-style-type: disc; }
.kmi-document li { margin-bottom: 4px; }

/* ---- Signature ---- */

.kmi-signature {
  display: inline-block;
  border: 1px solid var(--border-bright);
  background: #fff;
}

.kmi-signature canvas {
  display: block;
  touch-action: none;
  cursor: crosshair;
  max-width: 100%;
}

/* ---- The company site's notice above everything ---- */

.kmi-disclaimer-tag {
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
  margin-right: 8px;
}

@media (max-width: 720px) {
  .kmi-form-grid { grid-template-columns: minmax(0, 1fr); }
  .kmi-panel-body { padding: 14px 16px; }
}


/* ==========================================================================
   KMI's own pieces that its pages styled inline until 2026-10-02 — moved
   here so no template carries a style attribute (OneStyleTests).
   ========================================================================== */

.kmi-panel-body p { margin: 0 0 10px; }
.kmi-panel-body ul,
.kmi-panel-body ol { margin: 0 0 10px; padding-left: 20px; }
.kmi-panel-body > :last-child { margin-bottom: 0; }

.kmi-panel-warn { border-color: var(--warn); }
.kmi-panel-warn > .kmi-panel-head { color: var(--warn); }

/* Notices at the top of a file, one after another. */
.kmi-notices { display: grid; gap: 12px; margin-bottom: 24px; }
.kmi-notices > .kmi-panel { margin: 0; }

/* A sub-heading inside a panel, below its rows. */
.kmi-panel-head.is-sub { border-top: 1px solid var(--border); }

.kmi-inline-form { display: inline; }

.kmi-code {
  display: block;
  padding: 8px;
  background: var(--bg-inset);
  margin-bottom: 10px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12px;
}

.kmi-btn-sm { font-size: 10.5px; padding: 5px 10px; }

.kmi-empty-danger { color: var(--danger); }

table.kmi-table tr.is-unread td { font-weight: 600; }

.kmi-subscribe-row p { margin: 12px 0 0; }

/* ---- Shared links: watermark and no printing (_watermark.html,
   _print_disabled.html) ----
   Two watermark layers, deliberately redundant: browsers drop background
   images when printing, never text, so the repeated text grid is the one
   that survives a print or a "Print to PDF"; the background (its image,
   generated per link, passed as --kmi-watermark-image) tiles more densely
   on screen. */

.kmi-watermark-bg {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background-image: var(--kmi-watermark-image);
  background-repeat: repeat;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.kmi-watermark-grid {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(6, 1fr);
  overflow: hidden;
}

.kmi-watermark-grid span {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(-28deg);
  font-family: monospace;
  font-size: 13px;
  color: rgba(120, 120, 120, 0.4);
  white-space: nowrap;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.kmi-print-disabled-notice { display: none; }

@media print {
  .kmi-watermark-grid span { color: rgba(90, 90, 90, 0.55); }

  /* A shared file is not printed: only its notice shows. */
  body:has(.kmi-print-disabled-notice) * { visibility: hidden !important; }
  .kmi-print-disabled-notice {
    display: block;
    visibility: visible !important;
    position: fixed;
    top: 45%;
    left: 0;
    right: 0;
    text-align: center;
    font-family: sans-serif;
    font-size: 20px;
  }
}