/* InclusiveEQ UX behaviour tokens and the styles for InclusiveEQ.Ux components.

   Tokens cover behaviour, not brand: the focus ring, the danger colours, the minimum target size and the
   type floor. Every rule is scoped to an ieq- class, so linking this file changes nothing else on a page.

   The theme default is always light. Dark applies only when the app sets data-theme="dark" on the root;
   this file never follows the operating system colour scheme. */

:root {
  --ieq-focus-ring-color: #1d4ed8;
  --ieq-focus-ring-width: 3px;
  --ieq-focus-ring-offset: 2px;
  --ieq-danger: #b42318;
  --ieq-danger-text: #ffffff;
  --ieq-danger-surface: #fef3f2;
  --ieq-danger-border: #b42318;
  --ieq-text: #101828;
  --ieq-text-muted: #475467;
  --ieq-surface: #ffffff;
  --ieq-border: #667085;
  --ieq-target-min: 24px;
  --ieq-type-floor: 0.875rem;
  --ieq-radius: 8px;
  --ieq-ok: #067647;
  --ieq-working: #1d4ed8;
  --ieq-retrying: #93370d;
  --ieq-needs-you: #b42318;
  --ieq-headline-icon-ink: #ffffff;
  --ieq-skeleton: #e4e7ec;
  --ieq-skeleton-shine: #f2f4f7;
}

:root[data-theme="dark"] {
  --ieq-focus-ring-color: #93c5fd;
  --ieq-danger: #fda29b;
  --ieq-danger-text: #1a0503;
  --ieq-danger-surface: #2a0f0c;
  --ieq-danger-border: #fda29b;
  --ieq-text: #f2f4f7;
  --ieq-text-muted: #cbd2dc;
  --ieq-surface: #101828;
  --ieq-border: #98a2b3;
  --ieq-ok: #75e0a7;
  --ieq-working: #93c5fd;
  --ieq-retrying: #fec84b;
  --ieq-needs-you: #fda29b;
  --ieq-headline-icon-ink: #101828;
  --ieq-skeleton: #344054;
  --ieq-skeleton-shine: #475467;
}

/* Focus: always visible, at least 3:1 against the surface, never removed. */
.ieq-ux :focus-visible,
.ieq-failure :focus-visible,
.ieq-error-help :focus-visible,
.ieq-panel :focus-visible,
.ieq-headline :focus-visible,
.ieq-retry :focus-visible,
.ieq-confirm :focus-visible,
.ieq-field :focus-visible,
.ieq-error-summary:focus,
.ieq-error-summary :focus-visible,
.ieq-sus :focus-visible,
.ieq-toggletip :focus-visible,
.ieq-check-answers :focus-visible,
.ieq-button:focus-visible {
  outline: var(--ieq-focus-ring-width) solid var(--ieq-focus-ring-color);
  outline-offset: var(--ieq-focus-ring-offset);
}

/* Targets: at least 24 by 24 CSS pixels. */
.ieq-button,
.ieq-failure__code,
.ieq-failure__actions a,
.ieq-toggletip__button,
.ieq-sus__option input,
.ieq-field__input {
  min-width: var(--ieq-target-min);
  min-height: var(--ieq-target-min);
}

.ieq-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid var(--ieq-border);
  border-radius: var(--ieq-radius);
  background: var(--ieq-surface);
  color: var(--ieq-text);
  font: inherit;
  font-size: max(var(--ieq-type-floor), 1em);
  text-decoration: none;
  cursor: pointer;
}

.ieq-button--quiet {
  border-color: transparent;
  text-decoration: underline;
}

.ieq-button--danger {
  border-color: var(--ieq-danger-border);
  background: var(--ieq-danger);
  color: var(--ieq-danger-text);
}

/* FailureNotice. Meaning is carried by the heading and the words, never by colour alone. */
.ieq-failure {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--ieq-danger-border);
  border-left-width: 4px;
  border-radius: var(--ieq-radius);
  background: var(--ieq-danger-surface);
  color: var(--ieq-text);
  font-size: max(var(--ieq-type-floor), 1em);
}

.ieq-failure__mark {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ieq-danger);
  color: var(--ieq-danger-text);
  font-weight: 700;
}

.ieq-failure__body { display: grid; justify-items: start; gap: 6px; min-width: 0; }
.ieq-failure__title { margin: 0; font-size: 1.0625rem; line-height: 1.3; }
.ieq-failure__message { margin: 0; }
.ieq-failure__guidance, .cmd-failure__guidance { margin: 0; }
.ieq-failure__code { color: var(--ieq-text); font-family: ui-monospace, monospace; font-size: var(--ieq-type-floor); }
.ieq-failure__reference { margin: 0; color: var(--ieq-text-muted); font-size: var(--ieq-type-floor); }
.ieq-failure__reference code { overflow-wrap: anywhere; }
.ieq-failure__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ErrorHelp. */
.ieq-error-help { display: grid; gap: 8px; max-width: 65ch; color: var(--ieq-text); }
.ieq-error-help__code { margin: 0; color: var(--ieq-text-muted); font-size: var(--ieq-type-floor); }
.ieq-error-help__title { margin: 0; }
.ieq-error-help__subhead { margin: 8px 0 0; font-size: 1rem; }
.ieq-error-help__cause,
.ieq-error-help__action { margin: 0; }

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

/* Visually hidden, still read by screen readers. */
.ieq-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* StatusHeadline. Each state has its own icon shape as well as words. */
.ieq-headline { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ieq-text); font-weight: 600; }
.ieq-headline__icon { flex: none; }
.ieq-headline--ok .ieq-headline__icon { color: var(--ieq-ok); }
.ieq-headline--working .ieq-headline__icon { color: var(--ieq-working); }
.ieq-headline--retrying .ieq-headline__icon { color: var(--ieq-retrying); }
.ieq-headline--needs-you .ieq-headline__icon { color: var(--ieq-needs-you); }
.ieq-headline__code { color: inherit; }
.ieq-headline__since { color: var(--ieq-text-muted); font-weight: 400; font-size: max(var(--ieq-type-floor), 0.9em); }

/* RetryBanner. */
.ieq-retry { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--ieq-border); border-radius: var(--ieq-radius); color: var(--ieq-text); }
.ieq-retry__icon { flex: none; color: var(--ieq-retrying); }
.ieq-retry__text { margin: 0; flex: 1 1 16rem; }
.ieq-retry__code { color: inherit; }

/* StatusPanel. */
.ieq-panel { display: grid; gap: 12px; color: var(--ieq-text); }
.ieq-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ieq-panel__title { margin: 0; }
.ieq-panel__empty,
.ieq-panel__fact,
.ieq-panel__action { margin: 0; }
.ieq-panel__asof { margin: 0; color: var(--ieq-text-muted); font-size: var(--ieq-type-floor); }

/* Skeleton: reserved space, no layout shift. The shimmer stops for people who ask for less motion. */
.ieq-skeleton { display: grid; gap: 8px; align-content: start; }
.ieq-skeleton__lines { display: grid; gap: 8px; }
.ieq-skeleton__line { display: block; height: 1em; border-radius: 4px; background: linear-gradient(90deg, var(--ieq-skeleton), var(--ieq-skeleton-shine), var(--ieq-skeleton)); background-size: 200% 100%; animation: ieq-shimmer 1.6s ease-in-out infinite; }
.ieq-skeleton__line:last-child { width: 60%; }
@keyframes ieq-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .ieq-skeleton__line { animation: none; } }
.ieq-slow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ieq-text); }

/* ProgressStatus. */
.ieq-progress { display: grid; gap: 4px; color: var(--ieq-text); }
.ieq-progress__bar { width: 100%; height: 8px; }

/* ConfirmAction. Danger controls sit apart from safe ones. */
.ieq-confirm { display: grid; justify-items: start; gap: 8px; }
.ieq-confirm__panel { display: grid; gap: 8px; padding: 12px 16px; border: 1px solid var(--ieq-danger-border); border-left-width: 4px; border-radius: var(--ieq-radius); background: var(--ieq-danger-surface); color: var(--ieq-text); }
.ieq-confirm__question { margin: 0; font-weight: 600; }
.ieq-confirm__consequence { margin: 0; }
.ieq-confirm__actions { display: flex; flex-wrap: wrap; gap: 24px; }
.ieq-confirm__done { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.ieq-confirm__disclosure > summary { list-style: none; }
.ieq-confirm__disclosure > summary::-webkit-details-marker { display: none; }

/* FormField and ErrorSummary, after GOV.UK. Errors are marked by words and a border, never colour alone. */
.ieq-field { display: grid; gap: 4px; justify-items: start; color: var(--ieq-text); }
.ieq-field__label { font-weight: 600; }
.ieq-field__optional { font-weight: 400; }
.ieq-field__hint,
.ieq-field__count { margin: 0; color: var(--ieq-text-muted); font-size: max(var(--ieq-type-floor), 0.95em); }
.ieq-field__error { margin: 0; color: var(--ieq-danger); font-weight: 600; }
.ieq-field__count--over { color: var(--ieq-danger); font-weight: 600; }
.ieq-field__input { width: 100%; max-width: 40rem; padding: 6px 8px; border: 2px solid var(--ieq-border); border-radius: 4px; background: var(--ieq-surface); color: var(--ieq-text); font: inherit; font-size: max(var(--ieq-type-floor), 1em); }
.ieq-field--error { padding-left: 12px; border-left: 4px solid var(--ieq-danger-border); }
.ieq-field--error .ieq-field__input { border-color: var(--ieq-danger-border); }
.ieq-error-summary { display: grid; gap: 8px; padding: 16px; border: 4px solid var(--ieq-danger-border); border-radius: var(--ieq-radius); color: var(--ieq-text); }
.ieq-error-summary__title { margin: 0; font-size: 1.125rem; }
.ieq-error-summary__list { margin: 0; padding-left: 1.25rem; }
.ieq-error-summary__list a { color: var(--ieq-danger); font-weight: 600; }

/* SusPrompt: a collapsed disclosure, never a dialog. */
.ieq-sus { color: var(--ieq-text); }
.ieq-sus__summary { cursor: pointer; font-weight: 600; min-height: var(--ieq-target-min); }
.ieq-sus__form { display: grid; gap: 12px; }
.ieq-sus__item { margin: 0; padding: 8px 0; border: 0; border-top: 1px solid var(--ieq-border); }
.ieq-sus__item--error { padding-left: 12px; border-left: 4px solid var(--ieq-danger-border); }
.ieq-sus__statement { font-weight: 600; }
.ieq-sus__scale { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.ieq-sus__option { display: inline-flex; align-items: center; gap: 4px; }
.ieq-sus__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ieq-sus__thanks { margin: 0; }

/* Toggletip. */
.ieq-toggletip { display: inline-block; position: relative; }
.ieq-toggletip__button { display: inline-grid; place-items: center; list-style: none; cursor: pointer; color: var(--ieq-text); }
.ieq-toggletip__button::-webkit-details-marker { display: none; }
.ieq-toggletip__content { display: block; max-width: 20rem; margin-top: 4px; padding: 8px 12px; border: 1px solid var(--ieq-border); border-radius: var(--ieq-radius); background: var(--ieq-surface); color: var(--ieq-text); }

/* CheckAnswers. */
.ieq-check-answers { display: grid; gap: 0; margin: 0; color: var(--ieq-text); }
.ieq-check-answers__row { display: grid; grid-template-columns: minmax(8rem, 1fr) minmax(0, 2fr) auto; gap: 8px 16px; padding: 8px 0; border-bottom: 1px solid var(--ieq-border); }
.ieq-check-answers__key { font-weight: 600; }
.ieq-check-answers__value,
.ieq-check-answers__change { margin: 0; }
@media (max-width: 40rem) { .ieq-check-answers__row { grid-template-columns: minmax(0, 1fr); } }