/* ============================================================
   system.css — Systems / PIB tier theme
   ============================================================
   Spec: claude-code-prompt-systems-pib §F. Tier 5.

   Visual identity:
   - Primary color: slate-blue #3D5A80 (operational-privacy
     register; sits apart from gold/green/teal/burgundy).
   - Header layout: small logo strip + title with "Personal
     Information Bank" type label below, paralleling form.css.
   - Body is markdown prose; same body typography rules as the
     other markdown tiers apply via the shared base.css.

   Used by class="system" documents (SYS-NNN, Tier 5).
   ============================================================ */

:root {
  /* Legacy slate token names — remapped to the indigo palette (6-5-2026 spec §6).
     Kept under their old names so the small set of rules below (.gov-header.system,
     .system-meta-table, .badge-nda) continues to render without a rename sweep. New
     rules use the --sys family directly. */
  --system-accent-primary: #423D8F;
  --system-accent-bright:  #5A53BC;
  --system-accent-light:   #ECEBF8;
  --system-accent-dark:    #2D2A66;

  /* Indigo Systems accent (6-5-2026 spec §6). Intentional non-uniformity: the
     read-only risk render keeps the IM-012A #2B579A blue — a deliberate visual
     island, not a token to "unify" later. */
  --sys: #423D8F;
  --sys-bright: #5A53BC;
  --sys-bg: #ECEBF8;
  --sys-line: rgba(66, 61, 143, 0.22);

  /* Classification vocabulary — shared with systems-register.css. */
  --cls-public: #2F6315;
  --cls-internal: #B8870E;
  --cls-restricted: #8A2A2A;
  --cls-confidential: #6B1414;
}

/* ---------- Chip vocabulary ---------- */
/* Wrapped in :where(.reader-main) so the skill chrome's rules (loaded via the per-
   class theme files for rendered chunks) keep their cascade priority. Per memory
   feedback_use_where_for_portal_body_rules. */
:where(.reader-main) .chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 8.5pt;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: "Inter", sans-serif;
  text-decoration: none;
}
:where(.reader-main) .chip-approved { background: rgba(47, 99, 21, 0.12); color: var(--cls-public); }
:where(.reader-main) .chip-conditional { background: rgba(184, 135, 14, 0.12); color: var(--cls-internal); }
:where(.reader-main) .chip-neutral { background: rgba(0, 0, 0, 0.08); color: #555; }
:where(.reader-main) .chip-declined { background: rgba(138, 42, 42, 0.12); color: var(--cls-restricted); }
:where(.reader-main) .chip-sys { background: var(--sys-bg); color: var(--sys); }
:where(.reader-main) .chip-paper { background: rgba(0, 0, 0, 0.05); color: #555; }
:where(.reader-main) .chip-residency-alberta { background: rgba(47, 99, 21, 0.12); color: var(--cls-public); }
:where(.reader-main) .chip-residency-canada { background: rgba(21, 97, 110, 0.12); color: #15616E; }
:where(.reader-main) .chip-residency-mixed { background: rgba(184, 135, 14, 0.12); color: var(--cls-internal); }
:where(.reader-main) .chip-residency-outside { background: rgba(138, 42, 42, 0.12); color: var(--cls-restricted); }
:where(.reader-main) .chip-status-published { background: rgba(47, 99, 21, 0.12); color: var(--cls-public); }
:where(.reader-main) .chip-status-draft { background: rgba(0, 0, 0, 0.08); color: #555; }
:where(.reader-main) .chip-pib-yes { background: var(--sys-bg); color: var(--sys); }
:where(.reader-main) .chip-pib-no { background: rgba(0, 0, 0, 0.05); color: #555; }
:where(.reader-main) .chip-public { background: rgba(47, 99, 21, 0.12); color: var(--cls-public); }
:where(.reader-main) .chip-internal { background: rgba(184, 135, 14, 0.12); color: var(--cls-internal); }
:where(.reader-main) .chip-restricted { background: rgba(138, 42, 42, 0.12); color: var(--cls-restricted); }
:where(.reader-main) .chip-confidential { background: rgba(107, 20, 20, 0.12); color: var(--cls-confidential); }

:where(.reader-main) .sysreg-notice-btn {
  display: inline-block;
  font-family: "Inter", sans-serif;
  font-size: 9.5pt;
  font-weight: 600;
  color: white;
  background: var(--sys);
  border-radius: 6px;
  padding: 6px 14px;
  text-decoration: none;
}
:where(.reader-main) .sysreg-notice-btn:hover { background: var(--sys-bright); }

/* ---------- Header band ------------------------------------ */
.gov-header.system {
  padding-bottom: 8px;
  border-bottom: 2px solid var(--system-accent-primary);
  margin-bottom: 10px;
}

.system-logo-strip {
  margin-bottom: 8px;
}

.system-logo-strip img {
  height: 56px;
  width: auto;
  display: block;
}

.system-meta-block { width: 100%; }

.system-title {
  font-size: 14pt;
  font-weight: 600;
  color: #1F1F1F;
  line-height: 1.15;
  margin: 0;
}

.system-type {
  font-family: Calibri, sans-serif;
  font-style: italic;
  color: var(--system-accent-primary);
  font-size: 9pt;
  margin: 0;
  line-height: 1.2;
}

.system-dates {
  font-size: 9pt;
  color: #444;
  margin-top: 4px;
}

/* ---------- s.58 metadata table ---------------------------- */
.system-meta-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 16px 0;
  font-size: 10pt;
}

.system-meta-table th,
.system-meta-table td {
  text-align: left;
  vertical-align: top;
  padding: 6px 10px;
  border-bottom: 1px solid #ECECEC;
  line-height: 1.45;
}

.system-meta-table th {
  width: 24%;
  font-weight: 600;
  color: var(--system-accent-dark);
  background: var(--system-accent-light);
}

.system-meta-table code {
  font-family: Consolas, monospace;
  font-size: 9pt;
  background: #F4F6F8;
  padding: 1px 5px;
  border-radius: 3px;
}

/* ---------- PIA + risk artifact blocks --------------------- */
/* Side-by-side affordances that always render (per plan: anonymous users see them and
   the auth gate handles access; missing siblings show "pending publish" instead). */
.system-pia-block,
.system-risk-block {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-left: 3px solid var(--system-accent-primary);
  background: var(--system-accent-light);
  border-radius: 6px;
  margin: 8px 0;
}

.system-artifact-label {
  font-family: Calibri, sans-serif;
  font-size: 9pt;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--system-accent-dark);
  min-width: 240px;
}

.system-artifact-pending {
  font-size: 10pt;
  color: #6B5A1A;
  font-style: italic;
}

.system-pia-block .btn,
.system-risk-block .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  font-size: 10pt;
  font-weight: 600;
  text-decoration: none;
  border: none;
  background: var(--system-accent-primary);
  color: white;
}

.system-pia-block .btn:hover,
.system-risk-block .btn:hover {
  background: var(--system-accent-dark);
}

.badge-nda {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 8.5pt;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: #FBE9E7;
  color: #8A2A2A;
  border: 1px solid rgba(138,42,42,0.3);
}

/* ---------- Three-lens-register detail page (M6) ----------- */
/* Indigo accent (6-5-2026 spec §6); M7 will rationalize the slate tokens above to
   point at --sys. Risk render keeps its IM-012A #2B579A blue — that's a deliberate
   visual island, not a token to unify. */
:where(.reader-main) .sysdetail-header { margin-bottom: 16px; }
:where(.reader-main) .sysdetail-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: 10pt;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sys, #423D8F);
  margin-bottom: 4px;
}
:where(.reader-main) .sysdetail-title {
  font-family: "Source Serif 4", "Source Serif Pro", serif;
  font-size: 24pt;
  line-height: 1.15;
  color: #1F1F1F;
  margin: 0 0 12px 0;
}
:where(.reader-main) .sysdetail-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

:where(.reader-main) .sysdetail-section {
  margin: 28px 0;
  padding: 18px 22px;
  background: #FAFAFB;
  border-left: 3px solid var(--sys, #423D8F);
  border-radius: 4px;
}
:where(.reader-main) .sysdetail-internal-locked {
  background: #F4F4F6;
  border-left-color: #999;
}
:where(.reader-main) .sysdetail-section-title {
  font-family: "Inter", sans-serif;
  font-size: 11pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sys, #423D8F);
  margin: 0 0 8px 0;
}
:where(.reader-main) .sysdetail-section-blurb {
  font-family: "Inter", sans-serif;
  font-size: 9.5pt;
  color: #666;
  margin: 0 0 12px 0;
}
:where(.reader-main) .sysdetail-fields {
  margin: 0;
  font-family: "Source Serif 4", "Source Serif Pro", serif;
  font-size: 11pt;
  line-height: 1.55;
}
:where(.reader-main) .sysdetail-fields dt {
  margin-top: 12px;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
:where(.reader-main) .sysdetail-fields dt:first-of-type { margin-top: 0; }
:where(.reader-main) .sysdetail-fields dd {
  margin: 4px 0 0 0;
  color: #1F1F1F;
}
:where(.reader-main) .sysdetail-field-label {
  font-family: "Inter", sans-serif;
  font-size: 9.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sys, #423D8F);
}
:where(.reader-main) .sysdetail-s57-tag {
  font-family: "JetBrains Mono", monospace;
  font-size: 8.5pt;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--sys-bg, #ECEBF8);
  color: var(--sys, #423D8F);
  border: 1px solid var(--sys-line, rgba(66,61,143,0.22));
}
:where(.reader-main) .sysdetail-list { margin: 4px 0 0 18px; padding: 0; }
:where(.reader-main) .sysdetail-list li { margin: 2px 0; }

:where(.reader-main) .sysdetail-cloud-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-family: "Inter", sans-serif;
}
:where(.reader-main) .sysdetail-cloud-since { color: #666; font-size: 10pt; }
:where(.reader-main) .sysdetail-cloud-basis {
  font-family: "Inter", sans-serif;
  font-size: 9.5pt;
  color: #666;
  padding: 10px 12px;
  background: var(--sys-bg, #ECEBF8);
  border-radius: 4px;
  margin: 10px 0;
}
:where(.reader-main) .sysdetail-subsection-title {
  font-family: "Inter", sans-serif;
  font-size: 9.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sys, #423D8F);
  margin: 12px 0 4px 0;
}
:where(.reader-main) .sysdetail-obligations p {
  margin: 0 0 8px 0;
  font-family: "Source Serif 4", "Source Serif Pro", serif;
  font-size: 11pt;
}
:where(.reader-main) .sysdetail-notice { margin-top: 12px; }

:where(.reader-main) .sysdetail-companion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #ECECEC;
  font-family: "Inter", sans-serif;
}
:where(.reader-main) .sysdetail-companion:last-child { border-bottom: none; }
:where(.reader-main) .sysdetail-companion-label {
  font-size: 9.5pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--sys, #423D8F);
  min-width: 200px;
}
:where(.reader-main) .sysdetail-companion-na {
  font-style: italic;
  color: #888;
  font-size: 10pt;
}
:where(.reader-main) .sysdetail-lock { margin-right: 6px; }