.catalog-intro,
.pricing-note,
.standards-alert {
  background: #111720;
  border-block: 1px solid #2b3543;
}

/* Governance, retention and verification */
.audit-filter .button,
.audit-filter button {
  background: #17497d;
  border-color: #4ea1ff;
  color: #fff;
}

.governance-stack {
  display: grid;
  gap: 22px;
}

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

.governance-form .wide-field,
.governance-form button,
.governance-form .check-row {
  grid-column: 1 / -1;
}

.check-row {
  align-items: center;
  display: flex !important;
  flex-direction: row !important;
  gap: 10px;
}

.check-row input {
  width: auto !important;
}

.config-list {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.config-list > div {
  align-items: center;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
}

.config-list span {
  color: var(--muted);
  font-size: 13px;
}

.text-button,
.danger-link {
  background: transparent;
  border: 0;
  color: #78baff;
  cursor: pointer;
}

.danger-link {
  color: #ff8f8f;
}

.governance-audit-table .audit-head,
.governance-audit-table .audit-row {
  grid-template-columns: 1fr 1.1fr 1.2fr 1.8fr 1.1fr;
}

.verify-panel {
  margin: 0 auto;
  max-width: 900px;
}

.verify-form {
  display: flex;
  gap: 12px;
}

.verify-form input {
  flex: 1;
}

.verification-result {
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-top: 22px;
  padding: 24px;
}

.verification-result.valid {
  border-color: rgba(114, 244, 93, 0.5);
}

.verification-result > span {
  color: var(--green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

@media (max-width: 760px) {
  .governance-form {
    grid-template-columns: 1fr;
  }

  .verify-form,
  .config-list > div {
    align-items: stretch;
    flex-direction: column;
  }
}

/* v7 production administration, security and notification surfaces */
button.button {
  color: #fff;
  cursor: pointer;
  font: inherit;
}

button.button.primary,
.portal-panel button.button.primary {
  background: #17497d;
  border-color: #4ea1ff;
  color: #fff;
}

button.button.secondary,
.portal-panel button.button.secondary {
  background: #151c26;
  border-color: #3b485b;
  color: #f5f7fb;
}

button.button:disabled {
  cursor: not-allowed;
  opacity: .48;
}

.security-panel,
.brand-preview,
.subscription-card {
  display: grid;
  gap: 18px;
}

.security-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.security-status > div,
.subscription-card {
  background: #0f151e;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
}

.security-status small,
.security-status strong,
.subscription-card small,
.subscription-card strong,
.subscription-card span,
.history-row small {
  display: block;
}

.security-status small,
.subscription-card small {
  color: #75b9ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}

.security-status strong,
.subscription-card strong {
  margin-top: 7px;
}

.brand-preview {
  border-top: 3px solid var(--tenant-accent, #72f45d);
}

.brand-preview img {
  max-height: 64px;
  max-width: 240px;
  object-fit: contain;
  object-position: left center;
}

.course-admin-heading {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.good { color: #72f45d; }
.bad { color: #ff8f8f; }

.admin-form select,
.admin-form input,
.admin-form textarea {
  background: #0e141d;
  border: 1px solid #354356;
  border-radius: 10px;
  color: #fff;
  min-height: 46px;
  padding: 11px 13px;
  width: 100%;
}

@media (max-width: 760px) {
  .security-status { grid-template-columns: 1fr; }
  .course-admin-heading { align-items: flex-start; flex-direction: column; }
}
.catalog-intro > .shell {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.catalog-intro > .shell > div {
  padding: 22px 28px;
  border-right: 1px solid #2b3543;
}
.catalog-intro b,
.catalog-intro span {
  display: block;
}
.catalog-intro b {
  font-size: 15px;
}
.catalog-intro span {
  font-size: 11px;
  color: #8290a2;
  margin-top: 5px;
}
.catalog-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 35px;
}
.catalog-toolbar h2 {
  font-size: 44px;
  letter-spacing: -0.04em;
  margin: 10px 0 0;
}
.catalog-search {
  display: flex;
  gap: 10px;
}
.catalog-search input,
.catalog-search select {
  background: #111720;
  border: 1px solid #354356;
  color: #fff;
  padding: 13px 14px;
  border-radius: 12px;
  min-width: 220px;
}
.catalog-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.catalog-card {
  display: flex;
  flex-direction: column;
  min-height: 380px;
  padding: 24px;
  background: #141922;
  border: 1px solid #313947;
  border-radius: 18px;
}
.catalog-card[hidden] {
  display: none;
}
.catalog-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.catalog-card h3 {
  font-size: 21px;
  line-height: 1.25;
  margin: 24px 0 12px;
}
.catalog-card > p {
  color: #909dad;
  font-size: 13px;
  line-height: 1.7;
}
.course-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 22px 0;
}
.course-facts span {
  font-size: 9px;
  font-weight: 700;
  border: 1px solid #344154;
  background: #111720;
  color: #9eacbd;
  padding: 6px 8px;
  border-radius: 999px;
}
.catalog-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #2b3542;
  padding-top: 18px;
  margin-top: auto;
  font-size: 11px;
}
.catalog-card-foot span {
  color: #7f8c9e;
}
.catalog-card-foot a,
.standards-grid a {
  color: #7dbdff;
  font-weight: 700;
}
.course-hero {
  padding: 78px 0;
  background: #10151d;
  border-bottom: 1px solid #2b3543;
}
.course-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 80px;
  align-items: center;
}
.course-hero h1 {
  font-size: clamp(48px, 5vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  margin: 24px 0;
}
.course-hero p {
  font-size: 18px;
  color: #a9b5c5;
  line-height: 1.65;
}
.course-summary {
  background: #141b25;
  border: 1px solid #354256;
  border-radius: 20px;
  padding: 24px;
}
.course-summary > div {
  padding: 15px 0;
  border-bottom: 1px solid #2f3947;
}
.course-summary small,
.course-summary b {
  display: block;
}
.course-summary small {
  font-size: 9px;
  color: #748397;
  letter-spacing: 0.12em;
}
.course-summary b {
  font-size: 13px;
  margin-top: 6px;
}
.course-detail {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 75px;
  align-items: start;
}
.course-detail h2 {
  font-size: 43px;
  letter-spacing: -0.04em;
}
.course-detail h3 {
  font-size: 22px;
  margin-top: 45px;
}
.outcome-list {
  display: grid;
  gap: 13px;
  padding: 0;
  list-style: none;
}
.outcome-list li {
  position: relative;
  padding: 15px 17px 15px 45px;
  background: #141a23;
  border: 1px solid #313b49;
  border-radius: 12px;
}
.outcome-list li:before {
  content: "✓";
  position: absolute;
  left: 17px;
  color: #79ed63;
  font-weight: 800;
}
.module-list {
  border: 1px solid #313b49;
  border-radius: 16px;
  overflow: hidden;
}
.module-list > div {
  display: flex;
  gap: 18px;
  padding: 17px 20px;
  border-bottom: 1px solid #313b49;
}
.module-list > div:last-child {
  border: 0;
}
.module-list span {
  font-family: Consolas, monospace;
  color: #79ed63;
}
.evidence-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.evidence-grid > div,
.regulatory-note {
  background: #141a23;
  border: 1px solid #313b49;
  border-radius: 14px;
  padding: 20px;
}
.evidence-grid small {
  color: #79ed63;
  font-size: 9px;
  letter-spacing: 0.12em;
}
.evidence-grid p,
.regulatory-note p {
  color: #96a3b4;
  line-height: 1.65;
}
.course-detail > aside {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 115px;
}
.regulatory-note {
  border-left: 3px solid #79ed63;
}
.regulatory-note a {
  color: #75b9ff;
  font-weight: 700;
  font-size: 12px;
}
.pricing-note > .shell,
.standards-alert > .shell {
  display: flex;
  gap: 18px;
  padding-block: 17px;
}
.pricing-note b,
.standards-alert b {
  color: #79ed63;
}
.pricing-note span,
.standards-alert span {
  color: #a6b1c1;
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.price-card {
  display: flex;
  flex-direction: column;
  padding: 27px;
  background: #141922;
  border: 1px solid #313947;
  border-radius: 19px;
}
.price-card.featured {
  border-color: #4c94dc;
  background: linear-gradient(145deg, #13243a, #141922);
}
.price-card h3 {
  font-size: 25px;
  margin: 20px 0 8px;
}
.price {
  margin: 12px 0 18px;
}
.price b,
.price span {
  display: block;
}
.price b {
  font-size: 28px;
}
.price span {
  color: #7f8c9e;
  font-size: 11px;
  margin-top: 4px;
}
.price-card > p {
  color: #96a3b4;
  line-height: 1.65;
}
.price-card ul {
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 20px 0 28px;
}
.price-card li:before {
  content: "✓";
  color: #79ed63;
  margin-right: 9px;
}
.price-card .button {
  margin-top: auto;
}
.login-page {
  min-height: calc(100vh - 1px);
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 70% 10%, #17314e 0, transparent 35%), #0d0f13;
  padding: 50px;
}
.login-shell {
  width: min(480px, 100%);
}
.login-shell > .brand {
  display: block;
  text-align: center;
  margin-bottom: 30px;
}
.login-card {
  background: #121923;
  border: 1px solid #354256;
  border-radius: 22px;
  padding: 34px;
}
.login-card h1 {
  font-size: 43px;
  margin: 18px 0 8px;
}
.login-card > p {
  color: #96a3b4;
  line-height: 1.6;
}
.login-card label {
  display: block;
  font-size: 11px;
  color: #9da9b8;
  margin: 15px 0;
}
.login-card input[type="email"],
.login-card input[type="password"] {
  display: block;
  width: 100%;
  background: #0d1117;
  color: #fff;
  border: 1px solid #354256;
  border-radius: 11px;
  padding: 14px;
  margin-top: 7px;
}
.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.login-options label {
  margin: 0;
}
.login-options a {
  font-size: 11px;
  color: #7dbdff;
}
.login-card form > .button {
  width: 100%;
  margin: 20px 0;
}
.portal-notice {
  border-left: 3px solid #79ed63;
  background: #151d20;
  padding: 15px;
  margin: 8px 0 17px;
}
.portal-notice b,
.portal-notice span {
  display: block;
}
.portal-notice span {
  font-size: 11px;
  color: #8f9cad;
  line-height: 1.5;
  margin-top: 5px;
}
.login-card > .button {
  width: 100%;
}
.login-foot {
  text-align: center;
  color: #687587;
  font-size: 10px;
  margin-top: 20px;
}
.contact-points {
  display: grid;
  gap: 10px;
  margin: 28px 0;
}
.contact-points > div {
  padding: 15px 17px;
  border: 1px solid #313b49;
  border-radius: 12px;
  background: #141922;
}
.contact-points b,
.contact-points span {
  display: block;
}
.contact-points span {
  font-size: 11px;
  color: #8997a9;
  margin-top: 4px;
}
.honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-form label {
  margin-top: 13px;
}
.contact-form .form-row label {
  margin-bottom: 4px;
}
.form-hint,
.response-note {
  font-size: 10px;
  color: #7d8999;
}
.response-note {
  margin-left: 14px;
}
.form-alert {
  background: #2b2115;
  border: 1px solid #6b542f;
  padding: 13px;
  margin-bottom: 14px;
}
.form-alert b,
.form-alert span {
  display: block;
}
.form-alert span {
  font-size: 11px;
  margin-top: 4px;
}
.success-message p {
  color: #aab8aa;
}
.standards-stack {
  display: grid;
  gap: 9px;
}
.standards-stack > div {
  display: grid;
  grid-template-columns: 35px 1fr;
  column-gap: 13px;
  padding: 16px;
  border: 1px solid #313b49;
  background: #141922;
  border-radius: 12px;
}
.standards-stack span {
  grid-row: 1/3;
  color: #79ed63;
  font: 700 11px Consolas;
}
.standards-stack p {
  margin: 5px 0 0;
  color: #8d9aac;
  font-size: 12px;
}
.standards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
.standards-grid .info-card {
  display: flex;
  flex-direction: column;
}
.standards-grid a {
  margin-top: auto;
  padding-top: 20px;
}
.roadmap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.roadmap > div {
  background: #141922;
  border: 1px solid #313b49;
  border-radius: 15px;
  padding: 20px;
}
.roadmap b {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #4f8fcf;
  border-radius: 50%;
  color: #79ed63;
}
.roadmap h3 {
  font-size: 15px;
  margin: 17px 0 8px;
}
.roadmap p {
  color: #8d9aac;
  font-size: 11px;
  line-height: 1.6;
}
.coverage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.coverage-card {
  background: #141922;
  border: 1px solid #313b49;
  border-radius: 16px;
  padding: 22px;
}
.coverage-card.live {
  border-color: #4e8f6a;
}
.coverage-card > span {
  color: #59a9ff;
  font: 700 11px Consolas;
}
.coverage-card h3 {
  font-size: 20px;
  margin: 18px 0 9px;
}
.coverage-card p {
  color: #919eae;
  font-size: 12px;
  line-height: 1.65;
  min-height: 60px;
}
.coverage-card > b {
  color: #79ed63;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.geo-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.geo-feature h2 {
  font-size: 48px;
  letter-spacing: -0.045em;
  margin: 15px 0;
}
.geo-feature p {
  color: #99a6b6;
  line-height: 1.7;
}
.geo-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.geo-list span {
  padding: 13px 15px;
  border: 1px solid #354256;
  border-radius: 999px;
  background: #141922;
  color: #9aa8b8;
  font-size: 12px;
}
.geo-list span.active {
  border-color: #4b8c62;
  color: #d7ffd1;
}
.brand-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.brand-dark,
.brand-light {
  padding: 65px;
  border-radius: 18px;
  border: 1px solid #313b49;
}
.brand-dark {
  background: #0d0f13;
}
.brand-light {
  background: #f4f6fa;
  color: #0d0f13;
}
.brand-dark > span,
.brand-light > span {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -3px;
}
.brand-dark b {
  color: #79ed63;
}
.brand-light b {
  color: #3f9e2e;
}
.brand-dark small,
.brand-light small {
  display: block;
  letter-spacing: 0.24em;
  font-size: 9px;
  margin-top: 8px;
  color: #7f8a9c;
}
.brand-downloads {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 20px;
}
.brand-downloads a {
  padding: 18px;
  border: 1px solid #313b49;
  border-radius: 13px;
  background: #141922;
}
.brand-downloads b,
.brand-downloads span {
  display: block;
}
.brand-downloads span {
  color: #8290a2;
  font-size: 10px;
  margin-top: 6px;
}
.swatches {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.swatches > div {
  display: grid;
  grid-template-columns: 45px 1fr;
  column-gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #313b49;
  border-radius: 12px;
}
.swatches i {
  grid-row: 1/3;
  width: 45px;
  height: 45px;
  border: 1px solid #4a5360;
  border-radius: 10px;
}
.swatches span {
  font-size: 10px;
  color: #8491a2;
}
@media (max-width: 1050px) {
  .catalog-cards,
  .pricing-grid,
  .standards-grid,
  .coverage-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .course-hero-grid,
  .course-detail,
  .geo-feature {
    grid-template-columns: 1fr;
  }
  .course-detail > aside {
    position: static;
  }
  .roadmap {
    grid-template-columns: repeat(3, 1fr);
  }
  .brand-downloads {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 760px) {
  .catalog-intro > .shell {
    grid-template-columns: 1fr 1fr;
  }
  .catalog-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
  .catalog-search {
    flex-direction: column;
  }
  .catalog-search input,
  .catalog-search select {
    min-width: 0;
    width: 100%;
  }
  .catalog-cards,
  .pricing-grid,
  .standards-grid,
  .coverage-grid {
    grid-template-columns: 1fr;
  }
  .course-hero {
    padding-block: 55px;
  }
  .course-hero h1 {
    font-size: 48px;
  }
  .course-detail {
    gap: 40px;
  }
  .evidence-grid {
    grid-template-columns: 1fr;
  }
  .pricing-note > .shell,
  .standards-alert > .shell {
    flex-direction: column;
    gap: 6px;
  }
  .roadmap {
    grid-template-columns: 1fr;
  }
  .brand-showcase {
    grid-template-columns: 1fr;
  }
  .brand-dark,
  .brand-light {
    padding: 40px 25px;
  }
  .brand-downloads {
    grid-template-columns: 1fr;
  }
  .swatches {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   AUTHENTICATED PORTAL, MANAGEMENT, ADMIN AND AUDIT WORKSPACE
   ========================================================== */

.portal-hero {
  padding: 62px 0 38px;
  background:
    radial-gradient(
      circle at 85% 10%,
      rgba(64, 143, 214, 0.12),
      transparent 30%
    ),
    linear-gradient(180deg, #101721, #0d1117);
  border-bottom: 1px solid #293442;
}

.portal-hero-title {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
  margin: 18px 0 32px;
}

.portal-hero-title h1 {
  margin: 0 0 12px;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -0.05em;
}

.portal-hero-title p {
  margin: 0;
  color: #9eacbd;
  font-size: 16px;
}

.role-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.role-strip b,
.role-strip span,
.cycle-pill,
.role-pill {
  padding: 8px 11px;
  border: 1px solid #35475b;
  border-radius: 999px;
  background: #151e29;
  color: #9fb0c3;
  font-size: 10px;
  font-weight: 800;
}

.role-strip b,
.cycle-pill {
  border-color: #39764a;
  color: #8df17a;
}

.learner-dashboard {
  display: grid;
  grid-template-columns: 1.05fr 1.4fr;
  gap: 14px;
}

.annual-progress-card,
.learner-metrics,
.manager-dashboard,
.portal-panel,
.audit-summary {
  border: 1px solid #334154;
  border-radius: 18px;
  background: #141b25;
}

.annual-progress-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  padding: 27px;
}

.annual-progress-card small,
.learner-metrics small,
.manager-metrics small,
.audit-summary small {
  display: block;
  color: #7caee0;
  font:
    800 9px Consolas,
    monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.annual-progress-card strong {
  display: block;
  margin-top: 12px;
  font-size: 35px;
}

.annual-progress-card strong span {
  color: #8594a7;
  font-size: 13px;
  font-weight: 500;
}

.annual-progress-card p {
  margin: 8px 0 0;
  color: #748498;
  font-size: 10px;
}

.progress-ring {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: conic-gradient(#79ed63 calc(var(--progress, 0) * 1%), #293647 0);
}

.progress-ring::after {
  position: absolute;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: #141b25;
  content: "";
}

.progress-ring span {
  position: relative;
  z-index: 1;
  color: #dce9f7;
  font-weight: 900;
}

.learner-metrics,
.manager-metrics,
.audit-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
}

.learner-metrics > div,
.manager-metrics > div,
.audit-summary > div {
  min-width: 0;
  padding: 24px;
  border-left: 1px solid #2f3a49;
}

.learner-metrics > div:first-child,
.manager-metrics > div:first-child,
.audit-summary > div:first-child {
  border-left: 0;
}

.learner-metrics b,
.manager-metrics b,
.audit-summary b {
  display: block;
  margin: 13px 0 6px;
  color: #f3f6fa;
  font-size: 29px;
}

.learner-metrics span,
.manager-metrics span,
.audit-summary span {
  display: block;
  color: #7f8da0;
  font-size: 10px;
  line-height: 1.45;
}

.portal-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(310px, 0.75fr);
  gap: 18px;
  align-items: start;
}

.portal-panel {
  padding: 26px;
}

.portal-panel h2 {
  margin: 11px 0 22px;
  font-size: 27px;
  letter-spacing: -0.035em;
}

.portal-panel > p,
.empty-state {
  color: #8e9cad;
  line-height: 1.65;
}

.learning-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto auto;
  gap: 15px;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid #2c3745;
}

.learning-row:first-of-type {
  border-top: 0;
}

.learning-row > div > small,
.learning-row > div > b,
.learning-row > div > span,
.certificate-row b,
.certificate-row small,
.record-row b,
.record-row small,
.history-row strong,
.history-row small,
.audit-row strong,
.audit-row small {
  display: block;
}

.learning-row > div > small {
  color: #75b7f8;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
}

.learning-row > div > b {
  margin: 6px 0 9px;
  font-size: 14px;
}

.learning-row > div > span {
  margin-top: 6px;
  color: #78889b;
  font-size: 9px;
}

.inline-progress {
  height: 4px;
  overflow: hidden;
  border-radius: 8px;
  background: #2b3747;
}

.inline-progress i {
  display: block;
  height: 100%;
  background: #79ed63;
}

.status-pill {
  padding: 7px 9px;
  border: 1px solid #3b495c;
  border-radius: 999px;
  color: #a8b5c5;
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.status-pill.completed,
.status-pill.active {
  border-color: #3c7545;
  color: #8df17a;
}

.status-pill.overdue,
.status-pill.inactive {
  border-color: #794747;
  color: #ef9999;
}

.status-pill.in-progress {
  border-color: #3d6790;
  color: #80beff;
}

.certificate-panel .button {
  width: 100%;
  margin-top: 20px;
}

.certificate-row,
.record-row,
.user-row,
.tenant-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 15px 0;
  border-top: 1px solid #2c3745;
}

.certificate-row small,
.record-row small,
.user-row small,
.tenant-row small {
  margin-top: 5px;
  color: #78889b;
  font-size: 10px;
}

.certificate-row a {
  color: #7fbdff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

/* Learner history */

.learning-history {
  margin-top: 55px;
}

.learning-history-heading,
.audit-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 30px;
  margin-bottom: 22px;
}

.learning-history-heading h2,
.audit-section-heading h2 {
  margin: 11px 0 8px;
  font-size: 32px;
}

.learning-history-heading p {
  max-width: 780px;
  margin: 0;
  color: #8d9bad;
  line-height: 1.6;
}

.history-count,
.audit-section-heading > span {
  padding: 8px 11px;
  border: 1px solid #35475b;
  border-radius: 999px;
  color: #8ebce9;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.history-years {
  display: grid;
  gap: 17px;
}

.history-year {
  overflow: hidden;
  border: 1px solid #334154;
  border-radius: 17px;
  background: #131a23;
}

.history-year > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding: 20px 23px;
  border-bottom: 1px solid #2d3948;
  background: #172231;
}

.history-year > header b {
  display: block;
  font-size: 27px;
}

.history-year > header span,
.history-year > header strong {
  display: block;
  color: #8392a5;
  font-size: 10px;
}

.history-table-wrap,
.audit-table-wrap {
  overflow-x: auto;
}

.history-table,
.audit-table {
  min-width: 880px;
}

.history-head,
.history-row {
  display: grid;
  grid-template-columns: minmax(330px, 2fr) 120px 70px 70px 80px minmax(
      150px,
      1fr
    );
  gap: 14px;
  align-items: center;
  padding: 14px 22px;
}

.history-head,
.audit-head {
  color: #769dc5;
  font:
    800 9px Consolas,
    monospace;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.history-row {
  border-top: 1px solid #293443;
  color: #aeb9c7;
  font-size: 11px;
}

.history-row:first-of-type {
  border-top: 0;
}

.history-row strong {
  color: #edf2f8;
  font-size: 12px;
}

.history-row small {
  margin-top: 5px;
  color: #718195;
}

.history-row a,
.audit-row a {
  color: #7fbdff;
  font-weight: 800;
}

.history-row em,
.audit-row em {
  color: #728094;
  font-size: 10px;
}

/* Manager and administrator workspaces */

.manager-dashboard-section,
.audit-workspace {
  max-width: 1380px;
}

.manager-dashboard {
  padding: 28px;
  margin-bottom: 20px;
}

.manager-dashboard-head,
.dashboard-actions,
.audit-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.manager-dashboard-head small {
  color: #7cbcff;
  font:
    800 9px Consolas,
    monospace;
  letter-spacing: 0.1em;
}

.manager-dashboard-head h2 {
  margin: 9px 0 0;
  font-size: 31px;
}

.dashboard-actions {
  justify-content: flex-start;
  margin: 24px 0;
}

.manager-metrics {
  margin: 20px 0;
}

.discipline-bars {
  display: grid;
  gap: 12px;
  margin-top: 25px;
}

.discipline-bars > div {
  display: grid;
  grid-template-columns: minmax(180px, 0.6fr) 1fr 45px;
  gap: 16px;
  align-items: center;
  color: #a9b4c2;
  font-size: 11px;
}

.discipline-bars i {
  height: 6px;
  overflow: hidden;
  border-radius: 8px;
  background: #2b3747;
}

.discipline-bars i b {
  display: block;
  height: 100%;
  background: #79ed63;
}

.admin-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1.25fr);
  gap: 18px;
  align-items: start;
}

.admin-grid .wide {
  min-width: 0;
}

.admin-form {
  display: grid;
  gap: 14px;
}

.admin-form label {
  color: #93a1b3;
  font-size: 11px;
  font-weight: 700;
}

.admin-form input,
.admin-form select {
  display: block;
  width: 100%;
  margin-top: 7px;
  padding: 12px 13px;
  border: 1px solid #374354;
  border-radius: 9px;
  background: #0e131a;
  color: #fff;
}

.admin-form label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
  gap: 9px;
}

.admin-form input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  max-width: 850px;
  margin: 28px 0;
  overflow: hidden;
  border: 1px solid #344153;
  border-radius: 15px;
  background: #141b25;
}

.metric-row > div {
  padding: 20px;
  border-left: 1px solid #2f3a49;
}

.metric-row > div:first-child {
  border-left: 0;
}

.metric-row b,
.metric-row span {
  display: block;
}

.metric-row b {
  font-size: 27px;
}

.metric-row span {
  margin-top: 6px;
  color: #7f8da0;
  font-size: 10px;
}

/* Audit and reporting */

.audit-hero {
  background: radial-gradient(
    circle at 85% 20%,
    rgba(121, 237, 99, 0.07),
    transparent 30%
  );
}

.audit-toolbar {
  align-items: end;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid #334154;
  border-radius: 15px;
  background: #131a23;
}

.audit-filter,
.audit-actions {
  display: flex;
  align-items: end;
  gap: 10px;
}

.audit-filter label {
  color: #8796a9;
  font-size: 10px;
  font-weight: 800;
}

.audit-filter select {
  display: block;
  min-width: 150px;
  margin-top: 6px;
  padding: 11px 13px;
  border: 1px solid #37475a;
  border-radius: 9px;
  background: #0e131a;
  color: #fff;
}

.audit-summary {
  margin-bottom: 18px;
}

.audit-summary b {
  font-size: 24px;
}

.audit-section {
  margin-top: 18px;
}

.audit-section-heading {
  align-items: center;
  padding-bottom: 19px;
  border-bottom: 1px solid #2e3948;
}

.audit-table .audit-head,
.audit-table .audit-row {
  display: grid;
  gap: 14px;
  align-items: center;
  padding: 14px 8px;
}

.completion-audit-table .audit-head,
.completion-audit-table .audit-row {
  grid-template-columns:
    minmax(190px, 1fr) minmax(300px, 1.7fr)
    105px 60px 60px 70px minmax(145px, 0.8fr);
}

.activity-audit-table .audit-head,
.activity-audit-table .audit-row {
  grid-template-columns:
    minmax(190px, 1fr) minmax(300px, 1.7fr)
    135px 70px 60px 160px;
}

.audit-row {
  border-top: 1px solid #293443;
  color: #aeb9c7;
  font-size: 11px;
}

.audit-row strong {
  color: #edf2f8;
}

.audit-row small {
  margin-top: 5px;
  color: #718195;
}

.audit-row code {
  padding: 5px 7px;
  border: 1px solid #34506b;
  border-radius: 6px;
  color: #80bdff;
  background: #111b26;
  font-size: 9px;
}

@media (max-width: 1050px) {
  .learner-dashboard,
  .portal-grid,
  .admin-grid {
    grid-template-columns: 1fr;
  }

  .learner-metrics,
  .manager-metrics,
  .audit-summary {
    grid-template-columns: repeat(2, 1fr);
  }

  .learner-metrics > div:nth-child(3),
  .manager-metrics > div:nth-child(3),
  .audit-summary > div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid #2f3a49;
  }

  .learner-metrics > div:nth-child(4),
  .manager-metrics > div:nth-child(4),
  .audit-summary > div:nth-child(4) {
    border-top: 1px solid #2f3a49;
  }

  .audit-toolbar,
  .audit-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  .portal-hero-title,
  .learning-history-heading,
  .history-year > header,
  .manager-dashboard-head,
  .dashboard-actions,
  .audit-section-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .role-strip {
    justify-content: flex-start;
  }

  .annual-progress-card {
    align-items: flex-start;
  }

  .learning-row {
    grid-template-columns: 46px 1fr;
  }

  .learning-row > .status-pill,
  .learning-row > .button {
    grid-column: 2;
    justify-self: start;
  }

  .learner-metrics,
  .manager-metrics,
  .audit-summary,
  .metric-row {
    grid-template-columns: 1fr;
  }

  .learner-metrics > div,
  .manager-metrics > div,
  .audit-summary > div,
  .metric-row > div {
    border-top: 1px solid #2f3a49;
    border-left: 0;
  }

  .learner-metrics > div:first-child,
  .manager-metrics > div:first-child,
  .audit-summary > div:first-child,
  .metric-row > div:first-child {
    border-top: 0;
  }

  .discipline-bars > div {
    grid-template-columns: 1fr 45px;
  }

  .discipline-bars i {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .audit-filter,
  .audit-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .audit-filter .button,
  .audit-actions .button {
    width: 100%;
  }
}

/* Regulatory learning guide */
.guide-hero {
  padding: 92px 0 78px;
  background:
    radial-gradient(circle at 72% 30%, #162b42 0, transparent 32%), #0d0f13;
  border-bottom: 1px solid #293443;
}
.guide-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 90px;
  align-items: center;
}
.guide-hero h1 {
  font-size: clamp(52px, 6vw, 88px);
  line-height: 0.94;
  letter-spacing: -0.06em;
  margin: 24px 0;
}
.guide-hero p {
  font-size: 19px;
  line-height: 1.65;
  color: #a9b5c5;
  max-width: 760px;
}
.guide-principle {
  padding: 28px;
  background: #121a25;
  border: 1px solid #3b4b5e;
  border-radius: 20px;
  box-shadow: 0 20px 70px #0007;
}
.guide-principle > span {
  font: 700 10px Consolas;
  color: #72b8ff;
  letter-spacing: 0.14em;
}
.guide-principle h2 {
  font-size: 38px;
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 18px 0;
}
.guide-principle p {
  font-size: 13px;
}
.guide-principle > div {
  border-top: 1px solid #2f3b4a;
  padding: 14px 0;
  font-size: 12px;
}
.guide-principle > div b {
  color: #79ed63;
  margin-right: 13px;
}
.guide-notice {
  background: #121820;
  border-bottom: 1px solid #2a3543;
}
.guide-notice > .shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 35px;
  padding-block: 19px;
}
.guide-notice b {
  color: #79ed63;
}
.guide-notice span {
  font-size: 12px;
  line-height: 1.55;
  color: #a6b1c1;
}
.guide-table-wrap {
  border: 1px solid #313b49;
  border-radius: 18px;
  overflow: auto;
}
.guide-table {
  width: 100%;
  border-collapse: collapse;
  background: #121820;
  font-size: 12px;
}
.guide-table th {
  text-align: left;
  padding: 14px 18px;
  background: #19212c;
  color: #7cbcff;
  font: 700 10px Consolas;
  letter-spacing: 0.09em;
}
.guide-table td {
  padding: 16px 18px;
  border-top: 1px solid #293443;
  color: #9daabc;
}
.guide-table td:first-child a {
  color: #fff;
  font-weight: 800;
}
.guide-table b {
  color: #e8eef6;
}
.jurisdictions {
  display: grid;
  gap: 18px;
}
.jurisdiction {
  scroll-margin-top: 95px;
  background: #111720;
  border: 1px solid #303b49;
  border-radius: 20px;
  padding: 30px;
}
.jurisdiction > header {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  align-items: center;
  padding-bottom: 28px;
  border-bottom: 1px solid #303b49;
}
.jurisdiction-identity {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}
.jurisdiction > header .jurisdiction-code {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border: 1px solid #4a91d9;
  border-radius: 18px;
  background: linear-gradient(145deg, #173555, #111a25);
  color: #79ed63;
  font:
    800 24px Consolas,
    monospace;
  letter-spacing: -0.03em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}
.jurisdiction-identity small {
  display: block;
  color: #6faee9;
  font:
    700 9px Consolas,
    monospace;
  letter-spacing: 0.15em;
}
.jurisdiction-identity h2 {
  margin: 5px 0 4px;
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1;
  letter-spacing: -0.045em;
}
.jurisdiction-identity p {
  margin: 0;
  color: #9eacbd;
  font-size: 15px;
  line-height: 1.5;
}
.jurisdiction > header em {
  padding: 6px 9px;
  border: 1px solid #3a7042;
  border-radius: 999px;
  color: #8df17a;
  font: normal 700 9px Consolas;
  text-transform: uppercase;
  white-space: nowrap;
}
.jurisdiction-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr 0.9fr;
  gap: 28px;
  padding: 26px 0;
}
.jurisdiction-grid h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #eaf1fa;
  margin: 0 0 12px;
}
.jurisdiction-grid p {
  font-size: 12px;
  line-height: 1.7;
  color: #9ba8b8;
}
.jurisdiction-grid strong {
  color: #fff;
}
.jurisdiction-grid aside {
  padding: 20px;
  background: #151f22;
  border: 1px solid #31583a;
  border-left: 3px solid #79ed63;
  border-radius: 13px;
}
.official-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border-top: 1px solid #303b49;
  padding-top: 20px;
}
.official-links > b {
  font: 700 9px Consolas;
  letter-spacing: 0.12em;
  color: #758397;
  margin-right: 8px;
}
.official-links a {
  padding: 8px 10px;
  border: 1px solid #354256;
  border-radius: 8px;
  color: #81beff;
  font-size: 10px;
  font-weight: 700;
}
.official-links a:hover {
  border-color: #61a8ef;
  background: #162234;
}
.global-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 42px;
}
.global-grid article,
.evidence-process article {
  padding: 22px;
  background: #141922;
  border: 1px solid #313b49;
  border-radius: 15px;
}
.global-grid h3 {
  font-size: 16px;
}
.global-grid p,
.evidence-process p {
  color: #8f9cad;
  font-size: 11px;
  line-height: 1.6;
}
.evidence-process {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.evidence-process b {
  font: 700 11px Consolas;
  color: #79ed63;
}
.evidence-process h3 {
  font-size: 16px;
  margin: 22px 0 9px;
}
.guide-cta {
  margin-top: 55px;
  padding: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
  background: linear-gradient(135deg, #14243a, #111720);
  border: 1px solid #396da2;
  border-radius: 20px;
}
.guide-cta h2 {
  font-size: 35px;
  margin: 12px 0;
}
.guide-cta p {
  color: #9daabb;
  max-width: 740px;
}
.guide-cta .button {
  white-space: nowrap;
}
@media (max-width: 1050px) {
  .guide-hero-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .jurisdiction-grid {
    grid-template-columns: 1fr 1fr;
  }
  .jurisdiction-grid aside {
    grid-column: 1/-1;
  }
  .global-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .evidence-process {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 760px) {
  .guide-hero {
    padding-block: 58px;
  }
  .guide-hero h1 {
    font-size: 47px;
  }
  .guide-notice > .shell {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .jurisdiction {
    padding: 21px;
  }
  .jurisdiction > header {
    flex-direction: column;
  }
  .jurisdiction-identity {
    align-items: flex-start;
    gap: 14px;
  }
  .jurisdiction > header .jurisdiction-code {
    width: 58px;
    height: 58px;
    border-radius: 13px;
    font-size: 17px;
  }
  .jurisdiction-identity h2 {
    margin-top: 4px;
    font-size: 30px;
  }
  .jurisdiction-identity p {
    font-size: 12px;
  }
  .jurisdiction-grid {
    grid-template-columns: 1fr;
  }
  .jurisdiction-grid aside {
    grid-column: auto;
  }
  .official-links {
    align-items: stretch;
    flex-direction: column;
  }
  .official-links a {
    display: block;
  }
  .global-grid,
  .evidence-process {
    grid-template-columns: 1fr;
  }
  .guide-cta {
    align-items: flex-start;
    flex-direction: column;
  }
  .guide-cta .button {
    width: 100%;
  }
}

/* Final audit-toolbar override: keep text legible across shared button states. */
.audit-filter button.button {
  background: #17497d;
  border-color: #4ea1ff;
  color: #fff;
}

/* Platform tenant registry */
.tenant-registry-heading,
.tenant-card-header,
.tenant-actions,
.tenant-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.tenant-registry-heading {
  margin-bottom: 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid #2c3745;
}

.tenant-registry-heading h2 {
  margin: 7px 0 0;
}

.registry-count {
  color: #83bfff;
  font-size: 11px;
  font-weight: 800;
}

.tenant-list {
  display: grid;
  gap: 16px;
}

.tenant-card {
  padding: 22px;
  border: 1px solid #2c3b4f;
  border-radius: 15px;
  background: #101722;
}

.tenant-card h3 {
  margin: 0 0 5px;
  font-size: 20px;
}

.tenant-card-header p,
.tenant-meta {
  margin: 0;
  color: #8194aa;
  font-size: 11px;
}

.tenant-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0;
}

.tenant-facts div {
  padding: 13px;
  border: 1px solid #29384b;
  border-radius: 10px;
  background: #0c121b;
}

.tenant-facts small {
  display: block;
  margin-bottom: 6px;
  color: #6eaef2;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.tenant-facts strong {
  font-size: 13px;
}

.tenant-meta {
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-bottom: 18px;
}

.tenant-meta b {
  margin-right: 5px;
  color: #dce7f4;
}

.tenant-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
  padding-top: 18px;
  border-top: 1px solid #273548;
}

.tenant-actions form {
  margin: 0;
}

.tenant-reset-form {
  display: flex;
  gap: 8px;
  flex: 1 1 410px;
}

.tenant-reset-form input {
  min-width: 210px;
  flex: 1;
}

.button.compact {
  min-height: 42px;
  padding: 10px 15px;
  white-space: nowrap;
}

.button.danger {
  border-color: #7d3f48;
  background: #2b151a;
  color: #ff9ca6;
}

.archive-action {
  margin-left: auto !important;
}

.form-divider {
  height: 1px;
  margin: 8px 0;
  background: #2c3745;
}

.admin-form .colour-field input[type="color"] {
  width: 100%;
  height: 48px;
  padding: 6px;
}

@media (max-width: 900px) {
  .tenant-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tenant-reset-form {
    flex-basis: 100%;
  }

  .archive-action {
    margin-left: 0 !important;
  }
}

@media (max-width: 560px) {
  .tenant-registry-heading,
  .tenant-card-header,
  .tenant-meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .tenant-facts {
    grid-template-columns: 1fr;
  }

  .tenant-reset-form {
    display: grid;
  }
}