/* ============================================================================
   BEYOND CARE — THEME READABILITY LAYER
   Loads immediately after premium.css on every page.

   premium.css hardcodes `color:#fff` wherever something sits on the accent or
   on the dark navigation chrome, which is correct for a dark red and a near
   black but breaks the moment an admin picks a pale accent or a light sidebar.
   Each rule below restates one of those declarations against a derived
   foreground token instead.

   Every token falls back to the value premium.css already uses, so on a site
   with no saved theme this file changes nothing at all.
   ========================================================================== */

/* ── Text and glyphs sitting on the accent ──────────────────────────────── */
:is(.btn-auth,.btn-start,.btn-admin-primary,.btn-resume,.managed-button,.service-primary,
    .btn-submit,.btn-send-results,.btn-next,.btn-ejs-save,.button.primary,.certificate-action,
    .search button,.bulk-footer .btn-admin-primary){
  color:var(--bc-on-accent,#fff)!important;
}

.nav-item.active .nav-label{color:var(--bc-on-accent,#fff)!important;}
.nav-item.active .nav-num{
  background:var(--bc-on-accent-fill,rgba(255,255,255,.22))!important;
  color:var(--bc-on-accent,#fff)!important;
}

.user-avatar{color:var(--bc-on-accent,#fff)!important;}

.bulk-step-button.active .num,
.bulk-parent-card.selected .bulk-parent-check,
.bc-language-option[aria-current="true"] .bc-language-code,
.account-language-panel .bc-language-option[aria-current="true"] .bc-language-code,
.bc-copy-toolbar button.active{
  color:var(--bc-on-accent,#fff)!important;
}
.bc-language-check{color:var(--bc-on-accent,#fff);}

/* premium.css sets `:is(p,li){color:var(--bc-ink-2)}` globally, and an
   inherited value always loses to a rule matching the element directly — so
   the banner's own `color:white` never reaches its heading, which renders dark
   on the accent at any palette including the default red. `.pullquote p` in
   premium.css is the same fix for the same cause. Scoped to the copy block so
   it can never reach the button label, which is deliberately inverted below. */
.resume-banner>div :is(p,li,span,strong){color:var(--bc-on-accent,#fff)!important;}

/* The one inverted control: the resume button on the accent banner. Its fill
   is whatever reads on the accent, and its label returns to the accent. */
.resume-banner .btn-resume{
  background:var(--bc-on-accent,#fff)!important;
  color:var(--bc-red)!important;
}
@media(hover:hover){
  .resume-banner .btn-resume:hover{
    background:var(--bc-on-accent,#fff)!important;
    color:var(--bc-red-deep)!important;
  }
}

/* ── Text sitting on the navigation chrome ──────────────────────────────── */
.journey-brand,
.journey-brand strong,
.journey-link.active{
  color:var(--bc-on-chrome,#fff)!important;
}
@media(hover:hover){
  .journey-link:hover{color:var(--bc-on-chrome,#fff)!important;}
}

.sidebar :focus-visible,
.topbar :focus-visible,
.journey-nav :focus-visible{
  outline-color:var(--bc-on-chrome,#fff)!important;
}

.bc-copy-toolbar button{color:var(--bc-on-chrome,#fff)!important;}

/* The language picker's label colour is still the cream literal platform.html
   set for the old near-black nav: premium.css restyles the pill but never
   restates its `color`, and `.bc-language-trigger` inherits. Cream on a light
   chrome means the language name is simply not there. Scoped to the nav bars,
   because the copies on sign-in and My Account sit on a card and premium.css
   already gives those ink. */
:is(.journey-nav,.topbar) .language-control{
  color:var(--bc-on-chrome,#F5F0E8)!important;
}

/* ── Text sitting on the semantic green ─────────────────────────────────── */
.module-gate-step.done .module-gate-step-num{color:var(--bc-on-green,#fff)!important;}

/* ── Admin colour editor ────────────────────────────────────────────────── */
.theme-editor-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;
  margin-bottom:22px;
}
.theme-seed{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border:1px solid var(--bc-line-2);
  border-radius:var(--bc-r-md);
  background:var(--bc-surface);
}
/* premium.css styles every input that is not a checkbox, radio or range with
   an !important 46px min-height, 12px padding and a surface fill. On a colour
   swatch that hides most of the colour it is supposed to be showing, so both
   controls here restate those properties. */
.theme-seed input[type="color"]{
  flex:0 0 auto;
  width:46px!important;
  height:46px!important;
  min-height:46px!important;
  padding:3px!important;
  border:1px solid var(--bc-line-2)!important;
  border-radius:var(--bc-r-sm)!important;
  background:var(--bc-surface-2)!important;
  cursor:pointer;
}
.theme-seed input[type="color"]::-webkit-color-swatch-wrapper{padding:0;}
.theme-seed input[type="color"]::-webkit-color-swatch{
  border:none;
  border-radius:calc(var(--bc-r-sm) - 4px);
}
.theme-seed input[type="color"]::-moz-color-swatch{
  border:none;
  border-radius:calc(var(--bc-r-sm) - 4px);
}
.theme-seed-copy{min-width:0;}
.theme-seed-copy strong{display:block;font-size:13.5px;margin-bottom:2px;}
.theme-seed-copy small{display:block;color:var(--bc-ink-4);font-size:11.5px;line-height:1.35;}
.theme-seed-copy input[type="text"]{
  margin-top:7px;
  width:100%;
  max-width:124px;
  min-height:32px!important;
  padding:5px 9px!important;
  font-family:var(--bc-mono)!important;
  font-size:12px;
  text-transform:uppercase;
  border:1px solid var(--bc-line-2)!important;
  border-radius:var(--bc-r-xs)!important;
  background:var(--bc-surface-2)!important;
  color:var(--bc-ink)!important;
}

.theme-presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.theme-preset{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 13px 6px 8px;
  border:1px solid var(--bc-line-2);
  border-radius:var(--bc-pill);
  background:var(--bc-surface);
  color:var(--bc-ink-2);
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
}
.theme-preset:hover{border-color:var(--bc-line-3);}
.theme-preset-swatches{display:flex;}
.theme-preset-swatches span{
  width:14px;
  height:14px;
  border-radius:50%;
  border:1.5px solid var(--bc-surface);
  margin-right:-5px;
}

.theme-checks{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:8px;
  margin:4px 0 20px;
}
.theme-check{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 12px;
  border-radius:var(--bc-r-sm);
  font-size:12.5px;
  background:var(--bc-surface-2);
  border:1px solid var(--bc-line);
}
.theme-check span{color:var(--bc-ink-3);}
.theme-check strong{font-variant-numeric:tabular-nums;white-space:nowrap;}
.theme-check.pass strong{color:var(--bc-green);}
.theme-check.warn{background:var(--bc-amber-tint);border-color:transparent;}
.theme-check.warn strong{color:var(--bc-amber);}
.theme-check.fail{background:var(--red-light);border-color:transparent;}
.theme-check.fail strong{color:var(--red);}

.theme-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.theme-actions .theme-actions-note{
  flex:1 1 220px;
  min-width:180px;
  color:var(--bc-ink-4);
  font-size:12px;
  line-height:1.4;
}

.theme-sample{
  border:1px solid var(--bc-line-2);
  border-radius:var(--bc-r-md);
  overflow:hidden;
  margin-bottom:20px;
}
.theme-sample-bar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 15px;
  background:var(--bc-graphite);
  color:var(--bc-on-chrome,#fff);
  font-size:12.5px;
  font-weight:600;
}
.theme-sample-bar em{
  font-style:normal;
  margin-left:auto;
  font-weight:500;
  color:var(--bc-on-dark-3);
}
.theme-sample-body{padding:17px 15px;background:var(--bc-canvas);}
.theme-sample-card{
  background:var(--bc-surface);
  border:1px solid var(--bc-line);
  border-radius:var(--bc-r-sm);
  padding:15px;
  box-shadow:var(--bc-e1);
}
.theme-sample-card h4{margin:0 0 5px;font-size:15px;color:var(--bc-ink);}
.theme-sample-card p{margin:0 0 13px;font-size:13px;color:var(--bc-ink-3);}
.theme-sample-row{display:flex;flex-wrap:wrap;gap:9px;align-items:center;}
.theme-sample-btn{
  border:0;
  border-radius:var(--bc-pill);
  padding:9px 18px;
  font-size:13px;
  font-weight:600;
  background:var(--bc-red);
  color:var(--bc-on-accent,#fff);
}
.theme-sample-link{color:var(--bc-red);font-size:13px;font-weight:600;}
.theme-sample-pill{
  padding:5px 11px;
  border-radius:var(--bc-pill);
  font-size:11.5px;
  font-weight:700;
  background:var(--bc-green-tint);
  color:var(--bc-green);
}