/* Morpheus AI — Dark Matrix Theme */

/* ── Design tokens ──────────────────────────────────────────────────── */
:root {
  --m-green: #00ff88;
  --m-green-glow: rgba(0, 255, 136, 0.4);
  --m-bg: #0a0a1a;
  --m-panel: #111128;
  --m-text: #e0e0e0;
  --m-text-2: #a6b2c0;
  --m-text-3: #8090a8;   /* K-127: 5.9:1 on --m-bg, 5.0:1 on --m-input-bg (was #6e7f92, 4.1:1) */
  --m-border: rgba(0, 255, 136, 0.2);
  --m-border-hover: rgba(0, 255, 136, 0.5);
  --m-border-subtle: rgba(0, 255, 136, 0.15);
  --m-input-bg: #1a1a3a;
  --m-input-border: #5b6b8c;   /* K-127: 3.67:1 on --m-bg (was #333355, 1.63:1) */
  --m-bg-2: #15152f;    /* K-127: a raised dark surface (used by my_memory.html, status_friendly.html) */
  --m-text-1: #e0e0e0;  /* K-127: the same as --m-text (used by status_friendly.html) */
  --m-focus: #00ff88;
  /* K-127 motion tokens: short feedback, one ease-out curve */
  --m-dur-fast: 120ms;
  --m-dur: 200ms;
  --m-ease: cubic-bezier(0.2, 0, 0, 1);   /* K-127: focus ring, 14.6:1 on --m-bg, 13.2:1 on --m-panel */
}

/* ── Base ────────────────────────────────────────────────────────── */
body {
  background: var(--m-bg);
  color: var(--m-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

a { color: var(--m-green); }
a:hover { color: #33ffaa; }

/* ── Focus states (accessibility) ───────────────────────────────── */
/* K-127: a 2 px solid ring with 3:1 contrast or more on every target (was a 25 % glow, 1.84:1). Bootstrap's own
   focus glows are replaced, so one ring style shows everywhere. */
:focus-visible {
  outline: 2px solid var(--m-focus);
  outline-offset: 2px;
}
a:focus-visible,
.btn:focus-visible,
.btn-check:focus-visible + .btn,
.nav-link:focus-visible,
.page-link:focus-visible,
.accordion-button:focus-visible,
.btn-close:focus-visible,
.navbar-toggler:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--m-focus);
  outline-offset: 2px;
  box-shadow: none;
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  outline: 2px solid var(--m-focus);
  outline-offset: 1px;
  box-shadow: none;
}
.navbar-toggler:focus { box-shadow: none; }

/* ── Navbar ──────────────────────────────────────────────────────── */
.navbar {
  background: var(--m-panel) !important;
  border-bottom: 1px solid var(--m-border);
}

.navbar-brand {
  color: var(--m-green) !important;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 1.25rem;
}

.navbar .nav-link {
  color: #b0b0c0 !important;
}
.navbar .nav-link:hover {
  color: var(--m-green) !important;
}
/* K-127: the current page's link (aria-current="page") */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  color: var(--m-text) !important;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--m-green);
}
/* the menu button on a dark bar */
.navbar-toggler {
  border-color: var(--m-border-hover);
  padding: 0.375rem 0.625rem;
}
/* the landing nav sticks to the top; focused content scrolls clear of it */
.m-landing-nav { z-index: 1020; }
html:has(.m-landing-nav) { scroll-padding-top: 5rem; }
/* the folded menu: 8 px between links, a divider above it */
@media (max-width: 991.98px) {
  .navbar-collapse .navbar-nav { gap: 0.5rem; padding: 0.5rem 0; border-top: 1px solid var(--m-border-subtle); margin-top: 0.5rem; }
  .navbar-collapse .nav-item .btn { width: 100%; }
}
.lang-switch {
  font-size: 0.85rem;
  opacity: 0.7;
}
.lang-switch:hover {
  opacity: 1;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn-morpheus {
  background: var(--m-green);
  color: var(--m-bg);
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.5rem;
  transition: box-shadow var(--m-dur) var(--m-ease), transform var(--m-dur-fast) var(--m-ease);
}
.btn-morpheus:hover {
  background: var(--m-green);
  color: var(--m-bg);
  box-shadow: 0 0 20px var(--m-green-glow);
  transform: translateY(-1px);
}

.btn-morpheus-outline {
  border: 1px solid var(--m-green);
  color: var(--m-green);
  background: transparent;
  border-radius: 8px;
  padding: 0.6rem 1.5rem;
  font-weight: 600;
  transition: background var(--m-dur) var(--m-ease);
}
.btn-morpheus-outline:hover {
  background: rgba(0, 255, 136, 0.1);
  color: var(--m-green);
}

.btn-morpheus-ghost {
  color: var(--m-text-2);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 0.6rem 1.5rem;
  font-weight: 600;
  transition: border-color var(--m-dur) var(--m-ease), color var(--m-dur) var(--m-ease), background var(--m-dur) var(--m-ease);
}
.btn-morpheus-ghost:hover {
  border-color: rgba(0, 255, 136, 0.35);
  color: var(--m-green);
  background: rgba(0, 255, 136, 0.06);
}

/* ── Landing Page ────────────────────────────────────────────────── */
.landing-page {
  background: var(--m-bg);
  color: var(--m-text);
}

/* ── Hero ────────────────────────────────────────────────────────── */
.hero-section {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(135deg, #0a0a1a 0%, #0d1a2a 50%, #0a0a1a 100%);
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 50% 50%, rgba(0, 255, 136, 0.05) 0%, transparent 70%);
  pointer-events: none;
}

.hero-eyebrow {
  color: var(--m-green);
  font-weight: 700;
  letter-spacing: 3px;
  font-size: 1rem;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.hero-title {
  font-size: 3rem;
  font-weight: 800;
  color: var(--m-text);
  letter-spacing: 1px;
  margin-bottom: 1rem;
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}

.hero-subtitle {
  font-size: 1.15rem;
  color: var(--m-text-2);
  max-width: 62ch;
  margin: 0 auto 1.5rem;
  line-height: 1.6;
}

.hero-badges {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.hero-badge {
  display: inline-block;
  background: rgba(0, 255, 136, 0.08);
  border: 1px solid var(--m-border);
  border-radius: 20px;
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
  color: var(--m-green);
  font-weight: 500;
  letter-spacing: 0.5px;
}

.hero-ctas {
  margin-bottom: 2rem;
}

.hero-acronym {
  font-size: 0.8rem;
  color: var(--m-text-3);
  font-style: italic;
}

@media (max-width: 768px) {
  .hero-section { min-height: 70vh; padding: 5rem 1rem; }
  .hero-title { font-size: 2.2rem; letter-spacing: 0.5px; }
  .hero-subtitle { font-size: 1.05rem; }
  .hero-ctas .btn { display: block; width: 100%; margin-bottom: 0.5rem; }
  .hero-ctas .ms-2 { margin-left: 0 !important; }
}

/* ── Cards ───────────────────────────────────────────────────────── */
.feature-card {
  background: var(--m-panel);
  border: 1px solid var(--m-border);
  border-radius: 12px;
  padding: 2rem;
  transition: border-color var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.feature-card:hover {
  border-color: var(--m-border-hover);
  transform: translateY(-2px);
}

.feature-card h2,
.feature-card h4 {
  color: var(--m-green);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.dark-card {
  background: var(--m-panel);
  border: 1px solid var(--m-border-subtle);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* ── Landing lists (replace inline styles) ──────────────────────── */
.landing-list {
  color: var(--m-text-2);
  padding-left: 1.2rem;
  margin-bottom: 0;
}
.landing-list li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

/* ── Trust cards ─────────────────────────────────────────────────── */
.trust-card {
  background: var(--m-panel);
  border: 1px solid var(--m-border);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: border-color var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.trust-card:hover {
  border-color: var(--m-border-hover);
  transform: translateY(-2px);
}
.trust-card h3,
.trust-card h5 {
  color: var(--m-green);
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.trust-card p {
  color: var(--m-text-2);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0;
}
.trust-icon {
  font-size: 2rem;
  color: var(--m-green);
  margin-bottom: 0.75rem;
}

/* ── Stats Bar ───────────────────────────────────────────────────── */
.stat-number {
  color: var(--m-green);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
}

.stat-label {
  color: var(--m-text-2);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 0.25rem;
}

.stats-bar {
  background: #0d0d1f;
  border-top: 1px solid var(--m-border-subtle);
  border-bottom: 1px solid var(--m-border-subtle);
  padding: 3rem 0;
}

.stats-caption {
  color: var(--m-text-3);
  font-size: 0.8rem;
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 0;
}

/* ── Section styling ─────────────────────────────────────────────── */
.landing-section {
  padding: 5rem 0;
}

.section-title {
  color: var(--m-green);
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 1rem;
}

.section-subtitle {
  color: var(--m-text-2);
  font-size: 1.1rem;
  margin-bottom: 3rem;
  max-width: 62ch;
}

/* ── Step indicators ─────────────────────────────────────────────── */
.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 255, 136, 0.15);
  color: var(--m-green);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.step-heading {
  color: var(--m-text);
  font-weight: 600;
}

.step-desc {
  color: var(--m-text-2);
  font-size: 0.95rem;
  line-height: 1.5;
}

.step-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(0, 255, 136, 0.1);
  color: var(--m-green);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 0.25rem;
}

/* ── Architecture toggle ────────────────────────────────────────── */
.arch-toggle-hint {
  color: var(--m-text-3);
  font-size: 0.8rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

/* ── Domain grid ─────────────────────────────────────────────────── */
.domain-group {
  margin-bottom: 1.5rem;
}

.domain-cat-label {
  color: var(--m-text-2);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.domain-badge {
  display: inline-block;
  background: rgba(0, 255, 136, 0.04);
  border: 1px solid var(--m-border);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  margin: 0.25rem;
  font-size: 0.9rem;
  color: #b0b0c0;
  line-height: 1.2;
  transition: border-color var(--m-dur) var(--m-ease), color var(--m-dur) var(--m-ease);
}
.domain-badge:hover {
  border-color: rgba(0, 255, 136, 0.45);
  color: var(--m-text);
}

/* ── Verification badges ─────────────────────────────────────────── */
.verification-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
}
.verification-badge.pass { background: rgba(0, 255, 136, 0.2); color: var(--m-green); }
.verification-badge.fail { background: rgba(255, 68, 68, 0.2); color: #ff4444; }

/* ── CTA section ─────────────────────────────────────────────────── */
.cta-section {
  background: linear-gradient(135deg, #0d1a2a 0%, #0a0a1a 100%);
  padding: 5rem 0;
  text-align: center;
}
.cta-heading {
  color: var(--m-text);
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 1rem;
}
.cta-text {
  color: var(--m-text-2);
  margin-bottom: 2rem;
}
.cta-buttons {
  display: inline-flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Footer ──────────────────────────────────────────────────────── */
.landing-footer {
  background: #0d0d1f;
  border-top: 1px solid var(--m-border-subtle);
  padding: 2rem 0;
  color: var(--m-text-3);
  font-size: 0.9rem;
}
.footer-brand {
  color: var(--m-green);
  font-weight: 700;
  letter-spacing: 2px;
}

/* ── Architecture image ──────────────────────────────────────────── */
.arch-image {
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid var(--m-border);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

/* ── Auth form overrides ─────────────────────────────────────────── */
.auth-dark .card {
  background: var(--m-panel);
  border: 1px solid var(--m-border);
}
.auth-dark .form-control {
  background: var(--m-input-bg);
  border-color: var(--m-input-border);
  color: var(--m-text);
}
.auth-dark .form-control:focus {
  border-color: var(--m-green);
  outline: 2px solid var(--m-focus);
  outline-offset: 1px;
  box-shadow: none;
  background: var(--m-input-bg);
  color: var(--m-text);
}
.auth-dark .form-label { color: #b0b0c0; }
.auth-dark .form-text { color: var(--m-text-3); }

/* ── Dashboard overrides (scoped via .app-dark wrapper) ───────────── */
.app-dark .card {
  background: var(--m-panel);
  border-color: var(--m-border-subtle);
  color: var(--m-text);
}
.app-dark .form-control,
.app-dark .form-select {
  background: var(--m-input-bg);
  border-color: var(--m-input-border);
  color: var(--m-text);
}
.app-dark .form-control:focus,
.app-dark .form-select:focus {
  border-color: var(--m-green);
  outline: 2px solid var(--m-focus);
  outline-offset: 1px;
  box-shadow: none;
  background: var(--m-input-bg);
  color: var(--m-text);
}
.app-dark .table { color: var(--m-text); }
.app-dark .table thead th { border-color: var(--m-input-border); color: var(--m-text-2); }
.app-dark .table td { border-color: #222244; }

/* Backwards-compat: keep .container scoping until all templates use .app-dark */
.container .card {
  background: var(--m-panel);
  border-color: var(--m-border-subtle);
  color: var(--m-text);
}
.container .form-control,
.container .form-select {
  background: var(--m-input-bg);
  border-color: var(--m-input-border);
  color: var(--m-text);
}
.container .form-control:focus,
.container .form-select:focus {
  border-color: var(--m-green);
  outline: 2px solid var(--m-focus);
  outline-offset: 1px;
  box-shadow: none;
  background: var(--m-input-bg);
  color: var(--m-text);
}
.container .table { color: var(--m-text); }
.container .table thead th { border-color: var(--m-input-border); color: var(--m-text-2); }
.container .table td { border-color: #222244; }

/* ── Status page overrides ─────────────────────────────────────────── */

/* Card headers — muted, not saturated */
.app-dark .card-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Softer badge colors for dark theme */
.app-dark .badge.bg-success { background: rgba(0, 255, 136, 0.18) !important; color: #66ffbb !important; }
.app-dark .badge.bg-danger  { background: rgba(255, 80, 80, 0.18) !important; color: #ff8888 !important; }
.app-dark .badge.bg-warning { background: rgba(255, 193, 7, 0.18) !important; color: #ffd866 !important; }
.app-dark .badge.bg-info    { background: rgba(80, 180, 255, 0.18) !important; color: #7cc4ff !important; }
.app-dark .badge.bg-secondary { background: rgba(160, 170, 190, 0.12) !important; color: var(--m-text-2) !important; }

/* Nav tabs — blend with dark theme */
.app-dark .nav-tabs { border-color: var(--m-border-subtle); }
.app-dark .nav-tabs .nav-link {
  color: var(--m-text-2);
  border: 1px solid transparent;
  border-radius: 8px 8px 0 0;
  padding: 0.5rem 1.25rem;
  font-weight: 500;
  transition: color var(--m-dur-fast) var(--m-ease), background var(--m-dur-fast) var(--m-ease);
}
.app-dark .nav-tabs .nav-link:hover {
  color: var(--m-text);
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
}
.app-dark .nav-tabs .nav-link.active {
  color: var(--m-green);
  background: var(--m-panel);
  border-color: var(--m-border-subtle) var(--m-border-subtle) var(--m-panel);
}

/* Progress bars — green glow */
.app-dark .progress {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
}
.app-dark .progress-bar {
  background: var(--m-green);
  box-shadow: 0 0 8px rgba(0, 255, 136, 0.2);
}

/* Accordion for per-party drill-down */
.app-dark .accordion-button {
  background: rgba(255, 255, 255, 0.03);
  color: var(--m-text);
  border: none;
  box-shadow: none;
}
.app-dark .accordion-button::after {
  filter: invert(0.7);
}
.app-dark .accordion-button:not(.collapsed) {
  background: rgba(111, 66, 193, 0.08);
  color: var(--m-text);
  box-shadow: none;
}
.app-dark .accordion-item {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.06);
}

/* Alert overrides for dark theme */
.app-dark .alert-info {
  background: rgba(80, 180, 255, 0.08);
  border-color: rgba(80, 180, 255, 0.15);
  color: var(--m-text);
}
.app-dark .alert-warning {
  background: rgba(255, 193, 7, 0.08);
  border-color: rgba(255, 193, 7, 0.15);
  color: var(--m-text);
}
.app-dark .alert-danger {
  background: rgba(255, 80, 80, 0.08);
  border-color: rgba(255, 80, 80, 0.15);
  color: var(--m-text);
}
.app-dark .alert-secondary {
  background: rgba(160, 170, 190, 0.06);
  border-color: rgba(160, 170, 190, 0.1);
  color: var(--m-text-2);
}

/* Exec step cards */
.app-dark .exec-step-card {
  border-color: rgba(255, 255, 255, 0.06) !important;
  transition: border-color var(--m-dur-fast) var(--m-ease);
}
.app-dark .exec-step-card:hover {
  border-color: rgba(0, 255, 136, 0.15) !important;
}

/* Phase headers */
.app-dark .phase-header {
  color: var(--m-text-3);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 0.5rem 0 0.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  margin-top: 0.5rem;
}

/* J1d.2 — muted text inside dark cards: Bootstrap's .text-muted is a dark grey meant for light backgrounds and
   was unreadable on --m-panel (constraint card explanations, step table). */
/* only on dark surfaces: light badges, light cards and alerts keep Bootstrap's grey (UX review P1-1) */
.container > .text-muted,
.container .card:not(.bg-light) .card-body .text-muted:not(.badge),
.container details.card .text-muted:not(.badge) { color: var(--m-text-2) !important; }
.container .alert .text-muted { color: var(--m-text-2) !important; }
.container .card-header.bg-light, .container .card-header.bg-light strong { color: var(--m-text); }   /* "What you asked" */
/* the step table sits on the dark card (UX review P0-2): transparent cells, light text, dark-safe verdict colours */
#verified-plan-view { --bs-table-bg: transparent; --bs-table-color: var(--m-text); --bs-table-border-color: #2a2a4a; }
#verified-plan-view td, #verified-plan-view th { color: var(--m-text); background: transparent; }
#verified-plan-view .text-success { color: #66ffbb !important; }
#verified-plan-view .text-danger { color: #ff8888 !important; }
#verified-plan-view .text-warning { color: #ffd166 !important; }
#verified-plan-view .text-secondary, #verified-plan-view .text-muted { color: var(--m-text-2) !important; }
/* evidence tiers (UX review P0-5) */
#requirements .badge { font-size: 0.8rem; font-weight: 600; }
.m-tier-checked { background: #146c43; color: #fff; }
.m-tier-reviewed { background: transparent; color: var(--m-text); border: 1px solid var(--m-text-2); }
.m-tier-stated { background: transparent; color: var(--m-text-2); border: 1px dashed var(--m-text-3); }
/* J1d.3 (UX review): Chinese verdict words in the step table never squeeze to one character per line */
#verified-plan-view.m-cn-table td:not(:nth-child(2)) { min-width: 4.5em; white-space: nowrap; }

/* ── K-127 (UI UX Pro Max): accessibility layer ─────────────────────── */
/* Skip link: the first target on every page. It waits above the top edge and slides in while it has keyboard focus. */
.m-skip-link {
  position: absolute;
  top: -5rem;
  left: 0.5rem;
  z-index: 1080;
  min-height: 44px;
  padding: 0.6rem 1rem;
  background: var(--m-panel);
  color: var(--m-green);
  border: 2px solid var(--m-green);
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
/* The demo page's h1 is the answer banner's headline: it keeps the look of the bold line it was. */
.m-banner-title { display: inline; font-size: 1em; font-weight: 700; line-height: inherit; margin: 0; color: inherit; }
.m-skip-link:focus, .m-skip-link:focus-visible { top: 0.5rem; color: var(--m-green); }
/* <main> takes focus from the skip link (tabindex="-1"); it needs no ring of its own. */
main[tabindex="-1"]:focus { outline: none; }

/* Touch targets: 44 px minimum height for controls on phones and small tablets (< 768 px), and 8 px or more between
   neighbouring targets. Padding grows so the text stays centred; min-height catches buttons with a smaller font. */
@media (max-width: 767.98px) {
  .btn { --bs-btn-padding-y: 0.5625rem; min-height: 44px; }
  .btn-sm, .btn-group-sm > .btn { --bs-btn-padding-y: 0.65rem; }
  .nav-link { min-height: 44px; padding-top: 0.625rem; padding-bottom: 0.625rem; }
  .pagination { --bs-pagination-padding-y: 0.5625rem; }
  .page-link { min-height: 44px; min-width: 44px; text-align: center; }
  .pagination { gap: 0.5rem; }
  .pagination .page-link { margin-left: 0; border-radius: var(--bs-pagination-border-radius); }
  .form-control, .form-select, .form-control-sm, .form-select-sm { min-height: 44px; }
  input.form-control, .form-select { padding-top: 0.5625rem; padding-bottom: 0.5625rem; }
  .navbar-toggler { min-height: 44px; min-width: 44px; }
  .navbar-brand { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .btn-close { min-width: 44px; min-height: 44px; }
  summary { min-height: 44px; padding-top: 0.625rem; padding-bottom: 0.625rem; }
  summary.d-inline { display: inline-block !important; }
  .form-check { min-height: 44px; padding-top: 0.625rem; padding-left: 2.25rem; }
  .form-check .form-check-input { width: 1.5rem; height: 1.5rem; margin-top: 0; margin-left: -2.25rem; }
  .form-check.form-switch { padding-left: 3.5rem; }
  .form-check.form-switch .form-check-input { width: 2.75rem; margin-left: -3.5rem; }
  .form-check-inline { margin-right: 1rem; }
  /* a link that stands alone (not inside a sentence) */
  .m-tap { display: inline-block; min-height: 44px; padding-top: 0.625rem; padding-bottom: 0.625rem; }
  /* 8 px between neighbouring targets */
  .gap-1 { gap: 0.5rem !important; }
  .btn.ms-1 { margin-left: 0.5rem !important; }
  .btn.me-1 { margin-right: 0.5rem !important; }
  .btn.mb-1 { margin-bottom: 0.5rem !important; }
  summary.d-inline { margin-top: 0.25rem; margin-bottom: 0.25rem; }
  details { margin-bottom: 0.5rem; }
  .nav-tabs, .nav-pills { gap: 0.5rem; }
}

/* ── K-127: Bootstrap's dark color mode mapped to the Morpheus tokens ── */
/* Contrast on --m-bg / --m-panel: text 11.9:1, secondary text 9.1:1 / 8.6:1, links 14.6:1, code 9.4:1. */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--m-bg);
  --bs-body-bg-rgb: 10, 10, 26;
  --bs-body-color: var(--m-text);
  --bs-body-color-rgb: 224, 224, 224;
  --bs-emphasis-color: #f2f2f2;
  --bs-emphasis-color-rgb: 242, 242, 242;
  --bs-secondary-color: var(--m-text-2);
  --bs-secondary-color-rgb: 166, 178, 192;
  --bs-tertiary-color: var(--m-text-2);
  --bs-secondary-bg: var(--m-input-bg);
  --bs-tertiary-bg: #15152f;
  --bs-border-color: #3a3a5c;
  --bs-border-color-translucent: rgba(166, 178, 192, 0.2);
  --bs-link-color: var(--m-green);
  --bs-link-color-rgb: 0, 255, 136;
  --bs-link-hover-color: #33ffaa;
  --bs-link-hover-color-rgb: 51, 255, 170;
  --bs-code-color: #ff8fc8;
  --bs-heading-color: inherit;
}
/* placeholders: 7.8:1 on a field (were Bootstrap's light-theme grey, 1.06:1) */
.form-control::placeholder, .form-select::placeholder,
[data-bs-theme="dark"] ::placeholder { color: var(--m-text-2); opacity: 1; }
.form-check-input { border-color: var(--m-input-border); }
/* text colours that Bootstrap does not adapt to the dark mode (#6c757d 3.95:1, #0d6efd 4.11:1, #198754 4.08:1,
   #dc3545 4.09:1 on a panel) */
[data-bs-theme="dark"] .text-secondary { color: var(--m-text-2) !important; }
[data-bs-theme="dark"] .text-primary { color: #7cc4ff !important; }
[data-bs-theme="dark"] .text-success { color: #66ffbb !important; }
[data-bs-theme="dark"] .text-danger { color: #ff8888 !important; }
[data-bs-theme="dark"] .btn-link { --bs-btn-color: #7cc4ff; --bs-btn-hover-color: #a8d8ff; --bs-btn-active-color: #a8d8ff; }
/* outline buttons in dark-safe tones (text 6.9:1 or more) */
[data-bs-theme="dark"] .btn-outline-secondary {
  --bs-btn-color: var(--m-text-2); --bs-btn-border-color: var(--m-input-border);
  --bs-btn-hover-color: var(--m-text); --bs-btn-hover-bg: rgba(166, 178, 192, 0.12); --bs-btn-hover-border-color: var(--m-text-2);
  --bs-btn-active-color: var(--m-text); --bs-btn-active-bg: rgba(166, 178, 192, 0.2); --bs-btn-active-border-color: var(--m-text-2);
  --bs-btn-disabled-color: var(--m-text-3); --bs-btn-disabled-border-color: #3a3a5c;
}
[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #7cc4ff; --bs-btn-border-color: #4f8fd6;
  --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: rgba(124, 196, 255, 0.16); --bs-btn-hover-border-color: #7cc4ff;
  --bs-btn-active-color: #ffffff; --bs-btn-active-bg: rgba(124, 196, 255, 0.24); --bs-btn-active-border-color: #7cc4ff;
  --bs-btn-disabled-color: #5f8fbf; --bs-btn-disabled-border-color: #35557a;
}
[data-bs-theme="dark"] .btn-outline-success {
  --bs-btn-color: #66ffbb; --bs-btn-border-color: #2fbf71;
  --bs-btn-hover-color: #0a0a1a; --bs-btn-hover-bg: #66ffbb; --bs-btn-hover-border-color: #66ffbb;
  --bs-btn-active-color: #0a0a1a; --bs-btn-active-bg: #66ffbb; --bs-btn-active-border-color: #66ffbb;
}
[data-bs-theme="dark"] .btn-outline-danger {
  --bs-btn-color: #ff8888; --bs-btn-border-color: #d9534f;
  --bs-btn-hover-color: #0a0a1a; --bs-btn-hover-bg: #ff8888; --bs-btn-hover-border-color: #ff8888;
  --bs-btn-active-color: #0a0a1a; --bs-btn-active-bg: #ff8888; --bs-btn-active-border-color: #ff8888;
}
/* tables: no white table on the dark page; cells take the surface they sit on */
[data-bs-theme="dark"] .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--m-text);
  --bs-table-border-color: #2a2a4a;
  --bs-table-striped-bg: rgba(255, 255, 255, 0.03);
  --bs-table-hover-bg: rgba(0, 255, 136, 0.05);
  --bs-table-hover-color: var(--m-text);
}
[data-bs-theme="dark"] .table-light {
  --bs-table-bg: #1c1c3a; --bs-table-color: var(--m-text); --bs-table-border-color: #2a2a4a;
  --bs-table-striped-bg: #1c1c3a; --bs-table-hover-bg: #22224a; --bs-table-active-bg: #22224a;
  color: var(--m-text);
}
/* light islands (bg-light headers and chips) become a raised dark surface; their text turns light */
[data-bs-theme="dark"] .bg-light { background-color: #1c1c3a !important; }
[data-bs-theme="dark"] .bg-light.text-dark,
[data-bs-theme="dark"] .bg-light .text-dark { color: var(--m-text) !important; }
[data-bs-theme="dark"] .badge.bg-light { border-color: var(--m-input-border) !important; }

/* ── K-127: reduced motion ── a visitor who asks the system for less motion gets no transitions, no animations and
   no hover lift; the spinners stop turning (their text still says what is happening). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn-morpheus:hover, .feature-card:hover, .trust-card:hover, .domain-card:hover { transform: none; }
}

/* ── K-127: the site's icon family (web/templates/_icons.html) ── */
.m-icon {
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.m-mark-yes { color: #66ffbb; }
.m-mark-no { color: var(--m-text-3); }
.m-mark-part { color: #ffd166; }

/* ── K-127: a readable measure ── text blocks in the page body stop at about 70 characters per line (tables, code
   and the hero keep their own widths) */
main p, main li, main .form-text { max-width: 70ch; }
main .text-center > p, main p.text-center, main p.mx-auto { margin-left: auto; margin-right: auto; }
main td p, main td li, main th p { max-width: none; }

/* ── K-152: phones read body text at 16 px ── below 768 px, Bootstrap's small text (.small, <small>, helper text)
   keeps the size of the text around it instead of 87.5 %; badges and small buttons keep their own sizes. */
@media (max-width: 767.98px) {
  .small, small, .form-text { font-size: 1em; }
}

/* ── K-152: a form error sits under its field (web/static/field_errors.js, or rendered by the server) ── */
.m-field-error {
  margin-top: 0.35rem;
  color: #ff8888;                 /* 6.5:1 on --m-panel, 7.3:1 on --m-bg */
  font-weight: 600;
  line-height: 1.4;
}
[aria-invalid="true"].form-control, [aria-invalid="true"].form-select { border-color: #ff8888; }
[aria-invalid="true"].form-control:focus, [aria-invalid="true"].form-select:focus {
  border-color: #ff8888; box-shadow: 0 0 0 0.25rem rgba(255, 136, 136, 0.25);
}