/* Expression of Interest — reader display options (inc/eoi_style_picker.php).
 * The picker sets data-eoi-* attributes on <html>; everything here keys off
 * those. Loads after eoi_start.css / dashboard.css so it can override them.
 *   data-eoi-theme  : dark (default) | light | contrast
 *   data-eoi-size   : normal (default) | large | xl
 *   data-eoi-font   : default | easy
 *   data-eoi-motion : on (default) | off
 */

/* ---------- Picker button + panel ----------
 * Reads the page's dark tokens where they exist (eoi_start / threshold /
 * hub) and falls back to the same navy palette on the light site.css pages,
 * so the widget looks the same everywhere. */
.eoi-access{
  --ea-fg:var(--cream,#F6F1E8); --ea-fg-dim:var(--cream-dim,#E7E1D4); --ea-muted:var(--fog,#B4C2CE);
  --ea-bg:var(--navy-3,#16242f); --ea-bg-2:var(--navy-2,#223c52); --ea-line:var(--hair-2,rgba(255,255,255,.2)); --ea-hair:var(--hair,rgba(255,255,255,.1));
  --ea-accent:var(--sage,#83C097); --ea-accent-soft:var(--sage-soft,#a0d2b1); --ea-on-accent:var(--navy-3,#16242f);
  position:fixed; right:18px; bottom:18px; z-index:200; font-family:var(--font,var(--font-sans,'Inter',system-ui,sans-serif)); line-height:1.4;
}
.eoi-access__btn{
  display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:13px; font-weight:600; letter-spacing:.02em;
  color:var(--ea-fg); background:var(--ea-bg); border:1px solid var(--ea-line); border-radius:999px; padding:10px 16px 10px 12px;
  cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.35); transition:background .2s, border-color .2s;
}
.eoi-access__btn:hover{border-color:var(--ea-accent);}
/* A clear focus ring on every control in the widget (a border colour alone is too easy to miss). */
.eoi-access__btn:focus-visible, .eoi-access__close:focus-visible, .eoi-access__opt:focus-visible, .eoi-access__reset:focus-visible{outline:3px solid var(--ea-accent); outline-offset:2px;}
/* Room at the end of the page so the floating button never sits over the last controls. */
body:has(.eoi-access){padding-bottom:76px;}
.eoi-access__btn .bi{font-size:17px; color:var(--ea-accent);}
.eoi-access__panel{
  position:absolute; right:0; bottom:calc(100% + 10px); width:min(320px, calc(100vw - 36px));
  background:var(--ea-bg-2); color:var(--ea-fg); border:1px solid var(--ea-line); border-radius:16px; padding:16px 16px 12px;
  box-shadow:0 24px 60px rgba(0,0,0,.45); display:none; text-align:left;
}
.eoi-access.is-open .eoi-access__panel{display:block;}
.eoi-access__head{display:flex; justify-content:space-between; align-items:center; margin:0 0 12px;}
.eoi-access__head strong{font-size:14px; font-weight:600; color:var(--ea-fg);}
.eoi-access__close{background:none; border:0; color:var(--ea-muted); font-size:20px; line-height:1; cursor:pointer; padding:2px 4px; border-radius:6px;}
.eoi-access__close:hover, .eoi-access__close:focus-visible{color:var(--ea-fg);}
.eoi-access fieldset{border:0; margin:0 0 12px; padding:0; min-width:0;}
.eoi-access legend{font-size:10.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--ea-muted); margin-bottom:6px; padding:0; font-family:inherit;}
.eoi-access__opts{display:flex; gap:6px; flex-wrap:wrap;}
.eoi-access__opt{
  flex:1 1 auto; font:inherit; font-size:13px; font-weight:600; color:var(--ea-fg-dim); background:rgba(22,36,47,.42);
  border:1px solid var(--ea-line); border-radius:999px; padding:8px 12px; cursor:pointer; white-space:nowrap; transition:background .15s, border-color .15s, color .15s;
}
.eoi-access__opt:hover, .eoi-access__opt:focus-visible{border-color:var(--ea-accent); color:var(--ea-fg);}
.eoi-access__opt[aria-pressed="true"]{background:var(--ea-accent); border-color:var(--ea-accent); color:var(--ea-on-accent);}
.eoi-access__opt .bi{margin-right:4px;}
.eoi-access__foot{display:flex; justify-content:space-between; align-items:center; gap:10px; border-top:1px solid var(--ea-hair); padding-top:10px; font-size:12px; color:var(--ea-muted);}
.eoi-access__reset{background:none; border:0; padding:0; font:inherit; font-size:12px; font-weight:600; color:var(--ea-accent-soft); text-decoration:underline; text-underline-offset:3px; cursor:pointer;}
@media print{ .eoi-access{display:none;} }

/* ---------- Text size (scales the whole page, like browser zoom) ---------- */
html[data-eoi-size="large"] body{zoom:1.15;}
html[data-eoi-size="xl"] body{zoom:1.3;}

/* ---------- Easy-read font: plain sans, no serif headings, roomier text ---------- */
html[data-eoi-font="easy"]{
  --font:Verdana,Tahoma,"Trebuchet MS",Arial,sans-serif;
  --serif:Verdana,Tahoma,"Trebuchet MS",Arial,sans-serif;
}
html[data-eoi-font="easy"] body{line-height:1.7; letter-spacing:.01em; word-spacing:.06em;}
html[data-eoi-font="easy"] h1.p2-title, html[data-eoi-font="easy"] h2.p2-title, html[data-eoi-font="easy"] .p2-card h2{font-weight:600; letter-spacing:0; line-height:1.2;}
html[data-eoi-font="easy"] h1.p2-title, html[data-eoi-font="easy"] h2.p2-title, html[data-eoi-font="easy"] .db-hero h1.p2-title{font-size:clamp(28px,3.6vw,42px);}
html[data-eoi-font="easy"] .p2-card h2{font-size:24px;}
html[data-eoi-font="easy"] h1.p2-title em, html[data-eoi-font="easy"] h2.p2-title em, html[data-eoi-font="easy"] .p2-card h2 em,
html[data-eoi-font="easy"] .login-title em, html[data-eoi-font="easy"] .statement em, html[data-eoi-font="easy"] .hub-hero-greeting em{font-style:normal; font-family:inherit;}
html[data-eoi-font="easy"] .login-title, html[data-eoi-font="easy"] .statement{font-weight:600; letter-spacing:0;}
html[data-eoi-font="easy"] .p2-eyebrow, html[data-eoi-font="easy"] .p2-label, html[data-eoi-font="easy"] .db-fields .f-label, html[data-eoi-font="easy"] .p2-pill, html[data-eoi-font="easy"] .p2-foot{letter-spacing:.08em; font-size:12px;}
html[data-eoi-font="easy"] .p2-btn{letter-spacing:.08em; font-size:12.5px;}
html[data-eoi-font="easy"] .p2-btn:hover{letter-spacing:.08em;}

/* ---------- Motion off: no reveal animation, no hover slides ---------- */
html[data-eoi-motion="off"] .p2-reveal{animation:none !important; opacity:1 !important; transform:none !important;}
html[data-eoi-motion="off"] *, html[data-eoi-motion="off"] *::before, html[data-eoi-motion="off"] *::after{transition:none !important; animation-duration:0s !important;}
html[data-eoi-motion="off"] .reveal-orb, html[data-eoi-motion="off"] .reveal-1, html[data-eoi-motion="off"] .reveal-2, html[data-eoi-motion="off"] .reveal-3{animation:none !important; opacity:1 !important; transform:none !important;}
html[data-eoi-motion="off"] .p2-list li:hover{transform:none;}
html[data-eoi-motion="off"] .p2-btn:hover .arr{transform:none;}

/* ---------- Light theme: cream page, navy text ---------- */
html[data-eoi-theme="light"]{
  --cream:#16242f; --cream-dim:#2b445e;
  --fog:#4b5d6e; --fog-2:#56697a;   /* 4.5:1 or better on the cream page */
  --sage:#2f7a4e; --sage-soft:#276a43; --blue:#1f6aa5;   /* -soft is text, also on the pale green pill */
  --hair:rgba(22,36,47,.12); --hair-2:rgba(22,36,47,.28); --field-line:rgba(22,36,47,.55);
  --red:#b42318; --navy-3:#ffffff; --navy-2:#ffffff;
  --eoi-panel:#ffffff;
}
html[data-eoi-theme="light"] body{background:#f6f1e8; color:var(--cream);}
html[data-eoi-theme="light"] body::before{display:none;}

/* ---------- High contrast: black page, white text, yellow accents ---------- */
html[data-eoi-theme="contrast"]{
  --cream:#ffffff; --cream-dim:#ffffff;
  --fog:#ffffff; --fog-2:#e6e6e6;
  --sage:#ffd60a; --sage-soft:#ffd60a; --blue:#8ecbff;
  --hair:rgba(255,255,255,.5); --hair-2:#ffffff; --field-line:#ffffff;
  --red:#ff9b9b; --navy-3:#000000; --navy-2:#000000;
  --eoi-panel:#000000;
}
html[data-eoi-theme="contrast"] body{background:#000; color:#fff;}
html[data-eoi-theme="contrast"] body::before{display:none;}
html[data-eoi-theme="contrast"] .p2-btn, html[data-eoi-theme="contrast"] .p2-input, html[data-eoi-theme="contrast"] .db-fields .f-input,
html[data-eoi-theme="contrast"] .db-fields .f-check, html[data-eoi-theme="contrast"] .p2-card, html[data-eoi-theme="contrast"] .p2-alert{border-width:2px;}
html[data-eoi-theme="contrast"] .p2-btn:hover, html[data-eoi-theme="contrast"] .p2-btn-solid:hover{background:#ffd60a; border-color:#ffd60a; color:#000;}
html[data-eoi-theme="contrast"] a{text-decoration:underline;}
html[data-eoi-theme="contrast"] :focus-visible{outline:3px solid #ffd60a !important; outline-offset:2px;}
html[data-eoi-theme="contrast"] .db-fields .f-drop-input:focus ~ .f-drop-zone{outline:3px solid #ffd60a; outline-offset:2px;}
html[data-eoi-theme="contrast"] .p2-input:focus, html[data-eoi-theme="contrast"] .db-fields .f-input:focus{box-shadow:0 0 0 3px #ffd60a;}
html[data-eoi-theme="contrast"] .db-fields .f-highlight{background:#000; border-color:#ffd60a; border-left-width:4px;}
html[data-eoi-theme="contrast"] .db-fields .f-highlight .f-label, html[data-eoi-theme="contrast"] .db-fields .f-highlight .f-label .bi{color:#ffd60a;}
html[data-eoi-theme="contrast"] .p2-alert-error{color:#ffb3b3; border-color:#ff9b9b;}

/* ---------- Shared overrides for both non-default themes ---------- */
html[data-eoi-theme="light"] .p2-card, html[data-eoi-theme="contrast"] .p2-card,
html[data-eoi-theme="light"] .p2-alert, html[data-eoi-theme="contrast"] .p2-alert,
html[data-eoi-theme="light"] .p2-main .alert, html[data-eoi-theme="contrast"] .p2-main .alert,
html[data-eoi-theme="light"] .p2-input, html[data-eoi-theme="contrast"] .p2-input,
html[data-eoi-theme="light"] .db-fields .f-input, html[data-eoi-theme="contrast"] .db-fields .f-input,
html[data-eoi-theme="light"] .db-fields .f-check, html[data-eoi-theme="contrast"] .db-fields .f-check,
html[data-eoi-theme="light"] .db-fields .f-drop-zone, html[data-eoi-theme="contrast"] .db-fields .f-drop-zone,
html[data-eoi-theme="light"] .db-fields .ksb-row, html[data-eoi-theme="contrast"] .db-fields .ksb-row,
html[data-eoi-theme="light"] .db-fields .date-combo--native .date-combo__picker, html[data-eoi-theme="contrast"] .db-fields .date-combo--native .date-combo__picker,
html[data-eoi-theme="light"] .db-contact-way, html[data-eoi-theme="contrast"] .db-contact-way,
html[data-eoi-theme="light"] .db-privacy, html[data-eoi-theme="contrast"] .db-privacy,
html[data-eoi-theme="light"] .db-resume input, html[data-eoi-theme="contrast"] .db-resume input,
html[data-eoi-theme="light"] .db-steps .dot, html[data-eoi-theme="contrast"] .db-steps .dot,
html[data-eoi-theme="light"] .eoi-access__panel, html[data-eoi-theme="contrast"] .eoi-access__panel,
html[data-eoi-theme="light"] .eoi-access__btn, html[data-eoi-theme="contrast"] .eoi-access__btn,
html[data-eoi-theme="light"] .eoi-access__opt, html[data-eoi-theme="contrast"] .eoi-access__opt{
  background:var(--eoi-panel); backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none;
}
html[data-eoi-theme="light"] .p2-card{box-shadow:0 18px 50px rgba(22,36,47,.12);}
html[data-eoi-theme="light"] .p2-alert-preview, html[data-eoi-theme="contrast"] .p2-alert-preview{background:var(--eoi-panel);}
html[data-eoi-theme="light"] .db-steps .is-active .dot, html[data-eoi-theme="contrast"] .db-steps .is-active .dot{background:var(--sage); color:var(--navy-3);}
html[data-eoi-theme="light"] .eoi-access__opt[aria-pressed="true"], html[data-eoi-theme="contrast"] .eoi-access__opt[aria-pressed="true"]{background:var(--sage); color:var(--navy-3);}
html[data-eoi-theme="light"] .db-fields select.f-input option, html[data-eoi-theme="contrast"] .db-fields select.f-input option{background:var(--eoi-panel); color:var(--cream);}
html[data-eoi-theme="light"] .db-fields select.f-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M3 6l5 5 5-5' stroke='%2316242f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px 16px;}
html[data-eoi-theme="contrast"] .db-fields select.f-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M3 6l5 5 5-5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px 16px;}
html[data-eoi-theme="light"] .db-fields .f-highlight{background:#fff7e0; border-color:#e5c15a; color:var(--cream);}
html[data-eoi-theme="light"] .db-fields .f-highlight .f-label{color:#7a5a00;}
html[data-eoi-theme="light"] .db-fields .f-highlight .f-label .bi{color:#b8860b;}
html[data-eoi-theme="light"] .p2-alert-error{color:#8f1d1d; border-color:#e2a3a3; background:#fff3f3;}
html[data-eoi-theme="light"] .db-fields .ksb-opts label:has(input:checked), html[data-eoi-theme="contrast"] .db-fields .ksb-opts label:has(input:checked){background:var(--sage); color:var(--navy-3); border-color:var(--sage);}
html[data-eoi-theme="light"] .db-fields .f-check input, html[data-eoi-theme="contrast"] .db-fields .f-check input{accent-color:var(--sage);}

/* Logos are drawn for the navy ground: sit them on a navy tile */
html[data-eoi-theme="light"] .p2-brand img, html[data-eoi-theme="contrast"] .p2-brand img{background:#29445F; padding:10px 18px; border-radius:14px;}
html[data-eoi-theme="contrast"] .p2-brand img{outline:2px solid #fff;}

/* =========================================================================
   Threshold + sign-in pages (css/threshold.css: index, login, forgot, reset)
   ========================================================================= */
html[data-eoi-theme="light"] body.login-body, html[data-eoi-theme="light"] body{color:var(--cream);}
html[data-eoi-theme="light"] .grain, html[data-eoi-theme="contrast"] .grain,
html[data-eoi-theme="light"] .vignette, html[data-eoi-theme="contrast"] .vignette{display:none;}
html[data-eoi-theme="light"] .login-card, html[data-eoi-theme="contrast"] .login-card,
html[data-eoi-theme="light"] .login-input, html[data-eoi-theme="contrast"] .login-input,
html[data-eoi-theme="light"] .login-static, html[data-eoi-theme="contrast"] .login-static,
html[data-eoi-theme="light"] .login-intro, html[data-eoi-theme="contrast"] .login-intro{background:var(--eoi-panel); backdrop-filter:none; -webkit-backdrop-filter:none;}
html[data-eoi-theme="light"] .login-card{box-shadow:0 18px 50px rgba(22,36,47,.12);}
html[data-eoi-theme="light"] .login-input:focus, html[data-eoi-theme="contrast"] .login-input:focus{background:var(--eoi-panel);}
html[data-eoi-theme="light"] .login-input::placeholder, html[data-eoi-theme="contrast"] .login-input::placeholder{color:var(--fog-2);}
html[data-eoi-theme="light"] .login-sub b, html[data-eoi-theme="light"] .statement, html[data-eoi-theme="light"] .login-title{color:var(--cream);}
html[data-eoi-theme="light"] .login-err{color:var(--red);}
html[data-eoi-theme="light"] .alert--success{background:#eef8f1; border-color:#9fd1b1; color:#1d5a35;}
html[data-eoi-theme="light"] .alert--warning{background:#fff7e0; border-color:#e5c15a; color:#7a5a00;}
html[data-eoi-theme="light"] .login-alert--error, html[data-eoi-theme="light"] .alert--error{background:#fff3f3; border-color:#e2a3a3; color:#8f1d1d;}
html[data-eoi-theme="contrast"] .alert--success, html[data-eoi-theme="contrast"] .alert--warning, html[data-eoi-theme="contrast"] .alert--error, html[data-eoi-theme="contrast"] .login-alert{background:#000; border:2px solid #fff; color:#fff;}
html[data-eoi-theme="contrast"] .login-err{color:#ffb3b3;}
html[data-eoi-theme="contrast"] .login-card, html[data-eoi-theme="contrast"] .login-input, html[data-eoi-theme="contrast"] .enter-btn{border-width:2px;}
html[data-eoi-theme="light"] .enter-btn:hover, html[data-eoi-theme="light"] .enter-btn:focus-visible{color:#fff;}
html[data-eoi-theme="contrast"] .enter-btn:hover, html[data-eoi-theme="contrast"] .enter-btn:focus-visible{background:#ffd60a; border-color:#ffd60a; color:#000;}
/* The threshold orb and its particle canvas are drawn for the navy ground; give them a navy disc */
html[data-eoi-theme="light"] .orb-stage, html[data-eoi-theme="contrast"] .orb-stage{background:radial-gradient(circle closest-side, #29445F 0%, #223c52 72%, transparent 73%);}
html[data-eoi-theme="light"] .login-mark, html[data-eoi-theme="contrast"] .login-mark{background:#29445F; padding:8px; border-radius:12px; box-sizing:content-box;}

/* =========================================================================
   Learner hub pages (css/hub.css: dashboard, my answers, part 2, contact,
   change password)
   ========================================================================= */
html[data-eoi-theme="light"] .hub-hero, html[data-eoi-theme="contrast"] .hub-hero,
html[data-eoi-theme="light"] .hub-hero-date, html[data-eoi-theme="contrast"] .hub-hero-date{background:var(--eoi-panel); border:1px solid var(--hair-2); color:var(--cream);}
html[data-eoi-theme="light"] .hub-notice, html[data-eoi-theme="contrast"] .hub-notice,
html[data-eoi-theme="light"] .hub-stat, html[data-eoi-theme="contrast"] .hub-stat,
html[data-eoi-theme="light"] a.hub-stat:hover, html[data-eoi-theme="contrast"] a.hub-stat:hover,
html[data-eoi-theme="light"] .hub-action, html[data-eoi-theme="contrast"] .hub-action,
html[data-eoi-theme="light"] .hub-account-menu, html[data-eoi-theme="contrast"] .hub-account-menu,
html[data-eoi-theme="light"] .hc-nav, html[data-eoi-theme="contrast"] .hc-nav,
html[data-eoi-theme="light"] .hc-nav:disabled:hover, html[data-eoi-theme="contrast"] .hc-nav:disabled:hover{background:var(--eoi-panel); color:var(--cream); border-color:var(--hair-2);}
html[data-eoi-theme="light"] .hub-notice--good{border-color:#2f7a4e;}
html[data-eoi-theme="light"] .hub-notice--warn{border-color:#b8860b;}
html[data-eoi-theme="light"] .hub-notice--bad{border-color:#b42318;}
html[data-eoi-theme="light"] .hub-account-menu a:hover, html[data-eoi-theme="contrast"] .hub-account-menu a:hover{background:var(--sage); color:var(--navy-3);}
html[data-eoi-theme="light"] .hub-account .chev, html[data-eoi-theme="contrast"] .hub-account .chev{color:var(--fog);}
html[data-eoi-theme="light"] .hc-nav:hover, html[data-eoi-theme="contrast"] .hc-nav:hover,
html[data-eoi-theme="light"] .hub-action:hover, html[data-eoi-theme="contrast"] .hub-action:hover{background:var(--sage); color:var(--navy-3); border-color:var(--sage);}
html[data-eoi-theme="light"] .hc-dots .dot, html[data-eoi-theme="contrast"] .hc-dots .dot{background:var(--hair-2);}
html[data-eoi-theme="light"] .hc-dots .dot.on, html[data-eoi-theme="contrast"] .hc-dots .dot.on{background:var(--sage);}
/* Carousel cards keep their dark artwork (their text is cream on it) but get a clear edge and their own dark tokens */
html[data-eoi-theme="light"] .hc-card, html[data-eoi-theme="contrast"] .hc-card{border:2px solid var(--hair-2);}
html[data-eoi-theme="light"] .hc-card{--cream:#F6F1E8; --cream-dim:#E7E1D4; --fog:#B4C2CE; --hair-2:rgba(255,255,255,.2); --sage:#83C097; --navy-3:#16242f; --navy:#29445F;}
html[data-eoi-theme="contrast"] .hc-card{--cream:#fff; --cream-dim:#fff; --fog:#fff; --hair-2:#fff; --sage:#ffd60a; --navy-3:#000; --navy:#000;}
/* Off-centre cards fade to 72% on the navy ground, which reads as grey on a light one: keep them solid and just scale */
html[data-eoi-theme="light"] .hc-card, html[data-eoi-theme="contrast"] .hc-card{opacity:1; filter:none; box-shadow:0 18px 40px -24px rgba(22,36,47,.45);}
html[data-eoi-theme="light"] .hc-slide:not(.is-active) .hc-card, html[data-eoi-theme="contrast"] .hc-slide:not(.is-active) .hc-card{opacity:.92;}
/* Status tags sit on the card artwork, so they stay dark with light text */
html[data-eoi-theme="light"] .hc-tag, html[data-eoi-theme="contrast"] .hc-tag{background:rgba(8,16,26,.6); color:#F6F1E8; border-color:rgba(255,255,255,.4);}
html[data-eoi-theme="light"] .hc-tag.done, html[data-eoi-theme="contrast"] .hc-tag.done{background:var(--sage); color:var(--navy-3); border-color:var(--sage);}
html[data-eoi-theme="light"] .hub-logo-link img, html[data-eoi-theme="contrast"] .hub-logo-link img{background:#29445F; padding:8px 14px; border-radius:12px;}

/* =========================================================================
   Light enrolment pages (css/site.css: my_eoi.php, contact.php). Already light, so
   the Light option changes nothing there; High contrast and Easy read apply.
   ========================================================================= */
html[data-eoi-font="easy"]{--font-sans:Verdana,Tahoma,"Trebuchet MS",Arial,sans-serif;}
html[data-eoi-theme="contrast"]{--navy:#ffd60a; --navy-dark:#ffd60a; --navy-deep:#000; --green:#ffd60a; --green-dark:#ffd60a; --text:#fff; --text-muted:#fff; --line:#fff; --bg:#000; --white:#000; --ok:#ffd60a; --green-gradient:#ffd60a; --green-gradient-hover:#fff;}
html[data-eoi-theme="contrast"] .hdr, html[data-eoi-theme="contrast"] .hero, html[data-eoi-theme="contrast"] .ftr{background:#000; color:#fff; border-bottom:2px solid #fff;}
html[data-eoi-theme="contrast"] .ftr{border-top:2px solid #fff; border-bottom:0;}
html[data-eoi-theme="contrast"] .card, html[data-eoi-theme="contrast"] .f-input, html[data-eoi-theme="contrast"] .f-check, html[data-eoi-theme="contrast"] .f-choice,
html[data-eoi-theme="contrast"] .progress li, html[data-eoi-theme="contrast"] .step__dot, html[data-eoi-theme="contrast"] .modal,
html[data-eoi-theme="contrast"] .btn--ghost, html[data-eoi-theme="contrast"] .btn--danger{background:#000; color:#fff; border:2px solid #fff; box-shadow:none;}
html[data-eoi-theme="contrast"] .card__title, html[data-eoi-theme="contrast"] h1, html[data-eoi-theme="contrast"] h2, html[data-eoi-theme="contrast"] h3,
html[data-eoi-theme="contrast"] .f-label, html[data-eoi-theme="contrast"] .intro, html[data-eoi-theme="contrast"] .thanks p, html[data-eoi-theme="contrast"] .modal__body, html[data-eoi-theme="contrast"] .summary th{color:#fff;}
html[data-eoi-theme="contrast"] .card__title .bi, html[data-eoi-theme="contrast"] .f-label .req{color:#ffd60a;}
html[data-eoi-theme="contrast"] .btn--green, html[data-eoi-theme="contrast"] .btn--navy, html[data-eoi-theme="contrast"] .step.is-active .step__dot,
html[data-eoi-theme="contrast"] .step.is-done .step__dot, html[data-eoi-theme="contrast"] .progress li.is-next .progress__icon{background:#ffd60a; color:#000; border-color:#ffd60a;}
html[data-eoi-theme="contrast"] .f-highlight, html[data-eoi-theme="contrast"] .f-check.is-error, html[data-eoi-theme="contrast"] .f-choice.is-error{background:#000; border-color:#ffd60a;}
html[data-eoi-theme="contrast"] .f-highlight .f-label, html[data-eoi-theme="contrast"] .f-highlight .f-label .bi{color:#ffd60a;}
html[data-eoi-theme="contrast"] .alert--error, html[data-eoi-theme="contrast"] .alert--danger, html[data-eoi-theme="contrast"] .alert--success,
html[data-eoi-theme="contrast"] .alert--info, html[data-eoi-theme="contrast"] .alert--warning{background:#000; border:2px solid #fff; color:#fff;}
html[data-eoi-theme="contrast"] .f-input:focus{border-color:#ffd60a; box-shadow:0 0 0 3px #ffd60a;}
html[data-eoi-theme="contrast"] .f-check input, html[data-eoi-theme="contrast"] .f-choice-opts input{accent-color:#ffd60a;}
html[data-eoi-theme="contrast"] .hdr .hub-account-menu{background:#000; border:2px solid #fff;}
html[data-eoi-theme="contrast"] .ftr__logo, html[data-eoi-theme="contrast"] .hero__logo, html[data-eoi-theme="contrast"] .hdr__brand img{background:#29445F; border-radius:10px; padding:6px;}