/* These styles are generated from project.scss. */

/* ── STICKY FOOTER ───────────────────────────────────────────────────────── */

body:not(.task-page) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body:not(.task-page) > footer {
  margin-top: auto;
}

/* ── ALTERNATING SECTION BACKGROUND ─────────────────────────────────────── */

.section-alt {
  background-color: #eef2f7;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .section-alt {
    background-color: #1b2030;
  }
}

html[data-theme="dark"] .section-alt {
  background-color: #1b2030;
}

/* ── MEMBER HOME ACTION CARDS ────────────────────────────────────────────── */

.member-action-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  padding: 2.5rem 1.5rem;
  border: 2px solid var(--bulma-link);
  border-radius: .75rem;
  background: var(--bulma-scheme-main);
  color: var(--bulma-link);
  text-decoration: none;
  text-align: center;
  transition: background .15s, color .15s, transform .1s, box-shadow .15s;
  height: 100%;
  min-height: 11rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

.member-action-card:hover,
.member-action-card:focus-visible {
  background: var(--bulma-link);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
}

.member-action-icon {
  line-height: 1;
}

.member-action-label {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.member-action-sub {
  font-size: .875rem;
  opacity: .8;
}

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

/*
 * Accessibility widget styles.
 */
.a11y-panel {
  position: fixed;
  top: 3.75rem;
  right: 1.5rem;
  z-index: 1001;
  width: 20rem;
  max-width: calc(100vw - 2rem);
  background: var(--bulma-scheme-main);
  border: 1px solid var(--bulma-border);
  border-radius: .5rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 1.25rem;
  display: none;
  color: var(--bulma-text);
}

.a11y-panel.is-open {
  display: block;
}

.a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5rem;
}

.a11y-panel-title {
  font-weight: 700;
  font-size: 1rem;
}

.a11y-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--bulma-text);
  padding: .25rem;
  border-radius: .25rem;
}

.a11y-close:hover,
.a11y-close:focus-visible {
  background: var(--bulma-scheme-main-bis);
  outline: 2px solid var(--bulma-link);
}

.a11y-description {
  font-size: .8125rem;
  color: var(--bulma-text-weak);
  margin-bottom: 1rem;
}

.a11y-group {
  margin-bottom: 1rem;
}

.a11y-group-label {
  font-size: .8125rem;
  font-weight: 600;
  margin-bottom: .4rem;
  display: block;
}

.a11y-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.a11y-pills input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.a11y-pills label {
  display: inline-block;
  padding: .3rem .75rem;
  border: 1.5px solid var(--bulma-border);
  border-radius: 2rem;
  font-size: .8125rem;
  cursor: pointer;
  background: var(--bulma-scheme-main);
  color: var(--bulma-text);
  transition: border-color .12s, background .12s;
}

.a11y-pills input[type="radio"]:checked + label {
  border-color: var(--bulma-link);
  background: var(--bulma-link-light);
  color: var(--bulma-link-dark);
  font-weight: 600;
}

.a11y-pills label:hover {
  border-color: var(--bulma-border-hover);
}

.a11y-pills input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--bulma-link);
  outline-offset: 2px;
}

.a11y-reset {
  width: 100%;
  margin-top: .25rem;
}

/* ── PLUNGE FORM RADIO CARDS ─────────────────────────────────────────────── */

.plunge-radio-group {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.plunge-radio-group input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.plunge-radio-group label {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .5rem .6rem;
  border: 1.5px solid var(--bulma-border);
  border-radius: .5rem;
  cursor: pointer;
  text-align: center;
  transition: border-color .12s, background .12s;
  min-width: 3.5rem;
  background: var(--bulma-scheme-main);
  color: var(--bulma-text);
}

.plunge-radio-group label .radio-main {
  font-weight: 600;
  font-size: .875rem;
  line-height: 1.2;
}

.plunge-radio-group label .radio-sub {
  font-size: .7rem;
  color: var(--bulma-text-weak);
  margin-top: .2rem;
  line-height: 1.2;
}

.plunge-radio-group input[type="radio"]:checked + label {
  border-color: var(--bulma-link);
  background: var(--bulma-link-light);
  color: var(--bulma-link-dark);
}

.plunge-radio-group input[type="radio"]:checked + label .radio-sub {
  color: var(--bulma-link);
}

.plunge-radio-group label:hover {
  border-color: var(--bulma-border-hover);
}

.plunge-radio-group input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--bulma-link);
  outline-offset: 2px;
}

/* Intensity radio cards are wider to fit the description */
.plunge-radio-group.is-intensity label {
  min-width: 5rem;
  max-width: 6rem;
  padding: .6rem .5rem;
}

.plunge-radio-group.is-intensity label .radio-main {
  font-size: 1.1rem;
}

/*
 * Custom components adjustments for dark mode.
 */
.a11y-panel .a11y-pills input[type="radio"]:checked + label {
  background: var(--bulma-link-light);
  color: var(--bulma-link-dark);
}

.plunge-radio-group input[type="radio"]:checked + label {
  background: var(--bulma-link-light);
  color: var(--bulma-link-dark);
}

/* ── TOAST NOTIFICATIONS ─────────────────────────────────────────────────── */

.toast-container {
  position: fixed;
  top: 4.5rem;
  right: 1.25rem;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  width: 22rem;
  max-width: calc(100vw - 2.5rem);
  pointer-events: none;
}

.toast-container .notification {
  pointer-events: all;
  opacity: 1;
  transform: translateX(0);
  transition: opacity .35s ease, transform .35s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}

.toast-container .notification.is-hiding {
  opacity: 0;
  transform: translateX(2rem);
}

/* ── DARK MODE OVERRIDES ─────────────────────────────────────────────────── */
/*
 * Since the bulmaswatch theme (based on Bulma 0.8) uses static colors,
 * we override them when data-theme="dark" is active.
 */

html[data-theme="dark"] {
  background-color: #1a1a1a;
  color: #f5f5f5;
  --bulma-scheme-main: #1a1a1a;
  --bulma-scheme-main-bis: #262626;
  --bulma-scheme-main-ter: #2d2d2d;
  --bulma-scheme-invert: #ffffff;
  --bulma-text: #f5f5f5;
  --bulma-text-strong: #ffffff;
  --bulma-text-weak: #b5b5b5;
  --bulma-border: #363636;
  --bulma-border-hover: #4a4a4a;
  --bulma-border-weak: #2d2d2d;
  --bulma-background: #121212;
  --bulma-link: #1abc9c;
  --bulma-link-hover: #17a085;
  --bulma-link-light: #122d28;
  --bulma-link-dark: #70d8c1;
}

html[data-theme="dark"] body {
  background-color: #1a1a1a;
  color: #f5f5f5;
}

html[data-theme="dark"] .box,
html[data-theme="dark"] .card,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .navbar,
html[data-theme="dark"] .modal-card-body,
html[data-theme="dark"] .modal-card-foot,
html[data-theme="dark"] .modal-card-head {
  background-color: #262626;
  color: #f5f5f5;
}

html[data-theme="dark"] .title,
html[data-theme="dark"] .subtitle,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] strong {
  color: #ffffff;
}

html[data-theme="dark"] .input,
html[data-theme="dark"] .textarea,
html[data-theme="dark"] .select select {
  background-color: #2d2d2d;
  border-color: #363636;
  color: #f5f5f5;
}

html[data-theme="dark"] .input::placeholder,
html[data-theme="dark"] .textarea::placeholder {
  color: #7a7a7a;
}

html[data-theme="dark"] .button.is-light {
  background-color: #363636;
  color: #f5f5f5;
}

html[data-theme="dark"] .table {
  background-color: #262626;
  color: #f5f5f5;
}

html[data-theme="dark"] .table thead td,
html[data-theme="dark"] .table thead th {
  color: #ffffff;
}

html[data-theme="dark"] .notification:not(.is-info):not(.is-success):not(.is-warning):not(.is-danger) {
  background-color: #262626;
  color: #f5f5f5;
}

html[data-theme="dark"] .hr,
html[data-theme="dark"] hr {
  background-color: #363636;
}

/* Form elements */
html[data-theme="dark"] .label {
  color: #e8e8e8;
}

html[data-theme="dark"] .help {
  color: #b5b5b5;
}

html[data-theme="dark"] .help.is-danger {
  color: #ff6b6b;
}

html[data-theme="dark"] .select {
  background-color: #2d2d2d;
}

html[data-theme="dark"] .select::after {
  border-color: #b5b5b5;
}

html[data-theme="dark"] .checkbox,
html[data-theme="dark"] .radio {
  color: #e8e8e8;
}

html[data-theme="dark"] .checkbox input,
html[data-theme="dark"] .radio input {
  accent-color: #1abc9c;
}

html[data-theme="dark"] .field-body .field .control input,
html[data-theme="dark"] .field-body .field .control select {
  background-color: #2d2d2d;
  border-color: #363636;
  color: #f5f5f5;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    background-color: #1a1a1a;
    color: #f5f5f5;
    --bulma-scheme-main: #1a1a1a;
    --bulma-scheme-main-bis: #262626;
    --bulma-scheme-main-ter: #2d2d2d;
    --bulma-scheme-invert: #ffffff;
    --bulma-text: #f5f5f5;
    --bulma-text-strong: #ffffff;
    --bulma-text-weak: #b5b5b5;
    --bulma-border: #363636;
    --bulma-border-hover: #4a4a4a;
    --bulma-border-weak: #2d2d2d;
    --bulma-background: #121212;
    --bulma-link: #1abc9c;
    --bulma-link-hover: #17a085;
    --bulma-link-light: #122d28;
    --bulma-link-dark: #70d8c1;
  }

  html:not([data-theme="light"]) body {
    background-color: #1a1a1a;
    color: #f5f5f5;
  }

  html:not([data-theme="light"]) .box,
  html:not([data-theme="light"]) .card,
  html:not([data-theme="light"]) .footer,
  html:not([data-theme="light"]) .navbar,
  html:not([data-theme="light"]) .modal-card-body,
  html:not([data-theme="light"]) .modal-card-foot,
  html:not([data-theme="light"]) .modal-card-head {
    background-color: #262626;
    color: #f5f5f5;
  }

  html:not([data-theme="light"]) .title,
  html:not([data-theme="light"]) .subtitle,
  html:not([data-theme="light"]) h1,
  html:not([data-theme="light"]) h2,
  html:not([data-theme="light"]) h3,
  html:not([data-theme="light"]) h4,
  html:not([data-theme="light"]) h5,
  html:not([data-theme="light"]) h6,
  html:not([data-theme="light"]) strong {
    color: #ffffff;
  }

  html:not([data-theme="light"]) .input,
  html:not([data-theme="light"]) .textarea,
  html:not([data-theme="light"]) .select select {
    background-color: #2d2d2d;
    border-color: #363636;
    color: #f5f5f5;
  }

  html:not([data-theme="light"]) .input::placeholder,
  html:not([data-theme="light"]) .textarea::placeholder {
    color: #7a7a7a;
  }

  html:not([data-theme="light"]) .button.is-light {
    background-color: #363636;
    color: #f5f5f5;
  }

  html:not([data-theme="light"]) .table {
    background-color: #262626;
    color: #f5f5f5;
  }

  html:not([data-theme="light"]) .table thead td,
  html:not([data-theme="light"]) .table thead th {
    color: #ffffff;
  }

  html:not([data-theme="light"]) .notification:not(.is-info):not(.is-success):not(.is-warning):not(.is-danger) {
    background-color: #262626;
    color: #f5f5f5;
  }

  html:not([data-theme="light"]) .hr,
  html:not([data-theme="light"]) hr {
    background-color: #363636;
  }

  /* Form elements */
  html:not([data-theme="light"]) .label {
    color: #e8e8e8;
  }

  html:not([data-theme="light"]) .help {
    color: #b5b5b5;
  }

  html:not([data-theme="light"]) .help.is-danger {
    color: #ff6b6b;
  }

  html:not([data-theme="light"]) .select {
    background-color: #2d2d2d;
  }

  html:not([data-theme="light"]) .select::after {
    border-color: #b5b5b5;
  }

  html:not([data-theme="light"]) .checkbox,
  html:not([data-theme="light"]) .radio {
    color: #e8e8e8;
  }

  html:not([data-theme="light"]) .checkbox input,
  html:not([data-theme="light"]) .radio input {
    accent-color: #1abc9c;
  }

  html:not([data-theme="light"]) .field-body .field .control input,
  html:not([data-theme="light"]) .field-body .field .control select {
    background-color: #2d2d2d;
    border-color: #363636;
    color: #f5f5f5;
  }
}

/* ── CONTRAST OVERRIDES ───────────────────────────────────────────────────── */

html[data-a11y-contrast="high"] {
  --bulma-text-l: 10%;
  --bulma-text-strong-l: 5%;
  --bulma-text-title-l: 0%;
  --bulma-text-weak-l: 30%;
  --bulma-border-l: 50%;
  --bulma-border-weak-l: 65%;
  --bulma-background-l: 100%;
}

html[data-a11y-contrast="low"] {
  --bulma-text-l: 40%;
  --bulma-text-strong-l: 35%;
  --bulma-text-title-l: 28%;
  --bulma-text-weak-l: 55%;
  --bulma-border-l: 78%;
  --bulma-border-weak-l: 88%;
}

/* ── TEXT SIZE OVERRIDES ──────────────────────────────────────────────────── */

html[data-a11y-text="large"] {
  font-size: 112.5%;
}

html[data-a11y-text="extra-large"] {
  font-size: 125%;
}

/* ── MOTION OVERRIDE ──────────────────────────────────────────────────────── */

html[data-a11y-motion="reduced"] *,
html[data-a11y-motion="reduced"] *::before,
html[data-a11y-motion="reduced"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

/* ── HTMX swap fade ──────────────────────────────────────────────────────── */
#log-plunge-box-body {
  transition: opacity 100ms ease;
}
#log-plunge-box-body.htmx-swapping {
  opacity: 0;
}

/* ── TASK FULL-SCREEN PAGE ───────────────────────────────────────────────── */

body.task-page > footer,
body.task-page .a11y-panel,
body.task-page #toastContainer {
  display: none !important;
}

body.task-page {
  overflow-x: hidden;
}

.task-fullscreen-wrapper {
  min-height: calc(100vh - 3.25rem); /* subtract standard Bulma navbar height */
  display: flex;
  flex-direction: column;
}

.task-footer-bar {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.6rem 1rem;
  border-top: 1px solid var(--bulma-border);
  background: var(--bulma-scheme-main-bis);
  flex-shrink: 0;
}

.task-fullscreen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--bulma-border);
  background: var(--bulma-scheme-main-bis);
  flex-shrink: 0;
}

.task-fullscreen-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--bulma-text);
}

.task-fullscreen-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  overflow-y: auto;
}

.task-practice-banner {
  background: #fffbeb;
  border-bottom: 2px solid #f59e0b;
  color: #92400e;
  padding: .6rem 1rem;
  font-size: .95rem;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

html[data-theme="dark"] .task-practice-banner {
  background: #2d2006;
  border-color: #d97706;
  color: #fcd34d;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .task-practice-banner {
    background: #2d2006;
    border-color: #d97706;
    color: #fcd34d;
  }
}

/* ── TASK HUB ────────────────────────────────────────────────────────────── */

.task-hub-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.task-hub-card {
  border: 1.5px solid var(--bulma-border);
  border-radius: .6rem;
  background: var(--bulma-scheme-main);
  overflow: hidden;
  transition: border-color .15s;
}

.task-hub-card.is-next {
  border-color: var(--bulma-link);
}

.task-hub-card.is-done {
  border-color: var(--bulma-success);
  opacity: .85;
}

.task-hub-card.is-skipped {
  opacity: .55;
}

.task-hub-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  flex-wrap: wrap;
}

.task-hub-card-meta {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
}

.task-hub-card-label {
  font-weight: 600;
  font-size: .95rem;
  color: var(--bulma-text-strong);
}

.task-hub-card-duration {
  font-size: .75rem;
  color: var(--bulma-text-weak);
}

.task-hub-card-badges {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}

.task-hub-instructions {
  padding: .6rem 1rem .9rem;
  border-top: 1px solid var(--bulma-border);
  background: var(--bulma-scheme-main-bis);
  font-size: .875rem;
  color: var(--bulma-text);
}

/* ── TASK PROGRESS STRIP ─────────────────────────────────────────────────── */

.task-progress-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .75rem 1rem;
  background: var(--bulma-scheme-main-bis);
  border-bottom: 1px solid var(--bulma-border);
  margin-bottom: 1.25rem;
}

.task-step {
  flex: 1 1 auto;
  min-width: 8rem;
  padding: .5rem .75rem;
  border: 1.5px solid var(--bulma-border);
  border-radius: .5rem;
  background: var(--bulma-scheme-main);
  color: var(--bulma-text-weak);
  display: flex;
  flex-direction: column;
  gap: .15rem;
  position: relative;
}

.task-step-label {
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;
}

.task-step-duration {
  font-size: .7rem;
  color: var(--bulma-text-weak);
}

.task-step-badge {
  position: absolute;
  top: .35rem;
  right: .5rem;
  font-size: .85rem;
  font-weight: 700;
}

.task-step.is-current {
  border-color: var(--bulma-link);
  background: var(--bulma-link-light);
  color: var(--bulma-link-dark);
}

.task-step.is-current .task-step-label {
  color: var(--bulma-link-dark);
}

.task-step.is-done {
  border-color: var(--bulma-success);
  background: var(--bulma-success-light);
  color: var(--bulma-success-dark);
  opacity: .85;
}

.task-step.is-done .task-step-label {
  color: var(--bulma-success-dark);
}

.task-step.is-done .task-step-badge {
  color: var(--bulma-success);
}

.task-step.is-skipped {
  opacity: .55;
}

.task-step.is-skipped .task-step-badge {
  color: var(--bulma-text-weak);
}

/* ── TASK INTERSTITIAL OVERLAY ───────────────────────────────────────────── */

.task-interstitial {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.task-interstitial[hidden] {
  display: none;
}

.task-interstitial-box {
  background: var(--bulma-scheme-main);
  border-radius: .75rem;
  padding: 2.5rem 2rem;
  text-align: center;
  max-width: 26rem;
  width: calc(100vw - 3rem);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
}

/* ── Plunge modal — full-height to prevent flash on HTMX load ────────────── */
#plunge-modal .modal-card {
  height: calc(100vh - 40px);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}
#plunge-modal .modal-card-body {
  flex: 1 1 auto;
  overflow-y: auto;
}

/* ── CAPACITOR SHELL ─────────────────────────────────────────────────────── */

/* Hide web nav/footer on all pages inside Capacitor */
html.cap-mode nav.navbar,
html.cap-mode .footer { display: none !important; }

/* Push section content below the fixed native header */
html.cap-mode .section {
  padding-top: calc(48px + env(safe-area-inset-top, 0px) + 1.5rem) !important;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)) !important;
}

/* Smooth page transitions via HTMX boost + View Transitions API */
html.cap-mode::view-transition-old(root) {
  animation: 120ms ease-in cap-vt-out;
}
html.cap-mode::view-transition-new(root) {
  animation: 200ms ease-out cap-vt-in;
}
@keyframes cap-vt-out {
  to { opacity: 0; }
}
@keyframes cap-vt-in {
  from { opacity: 0; }
}

/* Native teal header bar — injected on all base.html pages inside Capacitor */
.cap-native-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: #1a9e7a;
  display: flex;
  align-items: flex-end;
  padding-top: env(safe-area-inset-top, 0px);
  height: calc(48px + env(safe-area-inset-top, 0px));
}

.cap-native-header-side {
  width: 56px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cap-native-header-title {
  flex: 1;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  text-align: center;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0 0.25rem;
}

.cap-native-back {
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.cap-native-back:active { background: rgba(255, 255, 255, 0.2); }


/* Cancel the bulmaswatch/Bulma negative margin that collapses .title + .subtitle
   into an overlap. The title's own margin-bottom (Bulma default 1.5rem, or an
   explicit mb-* utility) is sufficient — no negative pull needed. */
.title + .subtitle,
.title:not(.is-spaced) + .subtitle,
.subtitle:not(.is-spaced) + .title {
  margin-top: 0;
}

/* Strips bulmaswatch decorative background/padding from .title elements.
   Does NOT touch margin — spacing is handled by Bulma utilities (mb-*). */
.title.is-clear {
  background: none !important;
  padding: 0 !important;
}

/* ── TASK UI THEMING ─────────────────────────────────────────────────────── */

/* Stimulus area for PVT, SART, Flanker.
   Uses the site's background in light mode; goes dark in dark mode. */
.task-stimulus-area {
  background: var(--bulma-scheme-main, #fff);
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--bulma-border, #dbdbdb);
}

html[data-theme="dark"] .task-stimulus-area {
  background: #121212;
  border-color: #363636;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .task-stimulus-area {
    background: #121212;
    border-color: #363636;
  }
}

html[data-a11y-contrast="high"] .task-stimulus-area {
  border-width: 2px;
}

/* Stimulus text — white on dark, site text colour on light */
.task-stimulus-text {
  color: var(--bulma-text-strong, #363636);
}

html[data-theme="dark"] .task-stimulus-text {
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .task-stimulus-text {
    color: #fff;
  }
}

html[data-a11y-contrast="high"] .task-stimulus-text {
  color: var(--bulma-text-strong, #000);
}

html[data-theme="dark"][data-a11y-contrast="high"] .task-stimulus-text {
  color: #fff;
}

/* "Click or press Space to start" overlay — PVT, SART, Flanker */
.task-start-overlay {
  color: var(--bulma-text, #363636);
  text-align: center;
}

html[data-theme="dark"] .task-start-overlay {
  color: #fff;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .task-start-overlay {
    color: #fff;
  }
}

html[data-a11y-contrast="high"] .task-start-overlay {
  font-weight: 700;
}

/* "Click or press Space to start" overlay — light container (Digit Symbol) */
.task-start-overlay-light {
  background: rgba(255, 255, 255, 0.95);
  color: #333;
}

html[data-theme="dark"] .task-start-overlay-light {
  background: rgba(26, 26, 26, 0.95);
  color: #f5f5f5;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .task-start-overlay-light {
    background: rgba(26, 26, 26, 0.95);
    color: #f5f5f5;
  }
}

html[data-a11y-contrast="high"] .task-start-overlay-light {
  background: rgba(255, 255, 255, 1);
  color: #000;
}

html[data-theme="dark"][data-a11y-contrast="high"] .task-start-overlay-light {
  background: rgba(0, 0, 0, 1);
  color: #fff;
}

/* Flanker response buttons */
.flanker-btn {
  background: #222;
  color: #fff;
  border-color: #ccc;
}

html[data-theme="light"] .flanker-btn {
  background: #333;
  border-color: #999;
}

html[data-a11y-contrast="high"] .flanker-btn {
  border-color: #fff;
  border-width: 3px;
}

html[data-a11y-contrast="low"] .flanker-btn {
  border-color: #555;
}

/* Digit Symbol — key table cells */
.digit-symbol-key-cell {
  background: #f5f5f5;
  border-color: #ccc;
}

html[data-theme="dark"] .digit-symbol-key-cell {
  background: #2d2d2d;
  border-color: #363636;
  color: #f5f5f5;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .digit-symbol-key-cell {
    background: #2d2d2d;
    border-color: #363636;
    color: #f5f5f5;
  }
}

html[data-a11y-contrast="high"] .digit-symbol-key-cell {
  border-color: #555;
  border-width: 2px;
}

html[data-theme="dark"][data-a11y-contrast="high"] .digit-symbol-key-cell {
  border-color: #aaa;
  border-width: 2px;
}

/* Digit Symbol — digit label inside key cell */
.digit-symbol-key-digit {
  color: #888;
}

html[data-theme="dark"] .digit-symbol-key-digit {
  color: #b5b5b5;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .digit-symbol-key-digit {
    color: #b5b5b5;
  }
}

html[data-a11y-contrast="high"] .digit-symbol-key-digit {
  color: #444;
}

html[data-theme="dark"][data-a11y-contrast="high"] .digit-symbol-key-digit {
  color: #ccc;
}

/* Digit Symbol — option buttons */
.digit-symbol-option-btn {
  background: #fff;
  border-color: #ccc;
  color: #000;
}

html[data-theme="dark"] .digit-symbol-option-btn {
  background: #2d2d2d;
  border-color: #363636;
  color: #f5f5f5;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .digit-symbol-option-btn {
    background: #2d2d2d;
    border-color: #363636;
    color: #f5f5f5;
  }
}

html[data-a11y-contrast="high"] .digit-symbol-option-btn {
  border-color: #555;
  border-width: 3px;
}

html[data-theme="dark"][data-a11y-contrast="high"] .digit-symbol-option-btn {
  border-color: #aaa;
  border-width: 3px;
}