/* ============================================================================
   H.A.R.D. — hi-fi prototype · HAAS theme + prototype-only components
   ----------------------------------------------------------------------------
   THEMING ONLY. This sheet layers on top of the vendored GOV.UK Frontend
   (assets/govuk/govuk-frontend.min.css). It NEVER forks a GOV.UK component:
   buttons, inputs, error-summary, tags, tables, panel, notification banner,
   summary-list etc. all come from GOV.UK Frontend and keep their accessible
   focus/contrast behaviour. We only add:
     1. the HAAS brand skin on the GOV.UK header/footer,
     2. the cross-cutting DEMO banner + EN/CY toggle + variant tag,
     3. prototype-only surfaces with no GOV.UK equivalent (phone/SMS mock,
        time-warp dock, upload dropzone, lifecycle timeline, portal chrome).

   GDS Transport is proprietary and the vendored CSS points at absolute
   /assets/fonts paths that do not resolve when the prototype is opened
   straight from index.html (file://). We therefore pin the GOV.UK system
   font stack so the prototype is fully offline-capable with no font fetch —
   the same decision the accepted static demo made. (See README.)
   ========================================================================== */

:root {
  --haas-teal: #007e8a; /* HAAS accent, applied over the GOV.UK shell   */
  --haas-teal-dark: #00585f;
  --govuk-black: #0b0c0c;
  --govuk-blue: #1d70b8;
  --govuk-red: #d4351c;
  --govuk-green: #00703c;
  --govuk-grey-2: #b1b4b6;
  --govuk-grey-3: #f3f2f1;
  --haas-mid: #505a5f;
}

/* Pin the GOV.UK system font stack so the proprietary GDS Transport webfont is
   NEVER requested. The vendored GOV.UK CSS points its @font-face at absolute
   /assets/fonts paths that do not resolve when the prototype is opened straight
   from index.html (file://) or served from a sub-path — every page would 404 on
   four font files. Forcing every element in the GOV.UK template to the system
   stack means no element ever computes "GDS Transport", so the @font-face never
   triggers a fetch: no network request, no 404, identical behaviour on file://
   and over HTTP. GDS Transport is proprietary, so this is the same
   self-hosted-system-font decision the accepted static demo made (see README). */
.govuk-template__body,
.govuk-template__body * {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
}
/* …but keep monospace where we deliberately use it (codes, NINOs, hash chain). */
.govuk-template__body .haas-mono,
.govuk-template__body .haas-chain,
.govuk-template__body .haas-senderid,
.govuk-template__body .haas-dock__clock,
.govuk-template__body code {
  font-family:
    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important;
}

.govuk-template {
  background: var(--govuk-grey-3);
}
.govuk-template__body {
  margin: 0;
}

/* ── DEMO banner — required on every page (PROMPT §3 / CLAUDE.md) ─────────── */
.haas-demo-banner {
  margin: 0;
  background: var(--govuk-red);
  color: #fff;
  text-align: center;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  padding: 0.5rem 1rem;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ── Claimant journey: genuine GOV.UK Design System chrome ───────────────────
   The claimant pages use the unmodified GOV.UK header (Tudor-crown logotype),
   service navigation, phase banner and footer straight from GOV.UK Frontend —
   no HAAS skin, because this is a public-facing official GOV.UK service. HAAS
   identity is carried by the service name and footer text only, so there is
   nothing to override for the header/footer here. */

/* footer variant + translation tags (shared: claimant GOV.UK + portal DWP) */
.haas-variant-tag {
  display: inline-block;
  font-size: 0.8rem;
  color: var(--haas-mid);
}
.haas-variant-tag strong {
  color: var(--govuk-black);
}
.haas-translation-note {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8rem;
  color: var(--haas-mid);
}

/* unverified-translation banner (spec §8.7) — uses GOV.UK warning colours */
.haas-unverified {
  border-left: 5px solid var(--haas-teal);
  background: #e8f4f5;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.9375rem;
}
.haas-unverified b {
  display: block;
}

/* ── DEMO time-warp dock (claimant journey) ──────────────────────────────── */
.haas-dock {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  width: 18rem;
  max-width: calc(100vw - 2rem);
  background: var(--govuk-black);
  color: #fff;
  border: 2px solid var(--haas-teal);
  border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.haas-dock__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: transparent;
  color: #fff;
  border: 0;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  font-size: 0.9rem;
  text-align: left;
}
.haas-dock__clock {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-weight: 700;
  background: var(--haas-teal);
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
}
.haas-dock__label {
  font-weight: 700;
}
.haas-dock__body {
  display: none;
  padding: 0 0.8rem 0.8rem;
}
.haas-dock--open .haas-dock__body {
  display: block;
}
.haas-dock__hint {
  font-size: 0.78rem;
  color: #c7d0d2;
  margin: 0 0 0.5rem;
}
.haas-dock__btns {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.haas-dock .govuk-button {
  margin-bottom: 0;
  font-size: 0.85rem;
}
.haas-dock__check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  margin: 0.6rem 0;
}
.haas-dock__reset {
  width: 100%;
}

/* ── Claimant: phone / SMS-inbox mock (no GOV.UK equivalent) ──────────────── */
.haas-phone {
  max-width: 22rem;
  margin: 1rem 0 1.5rem;
  border: 10px solid var(--govuk-black);
  border-radius: 1.6rem;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16);
}
.haas-phone__bar {
  background: var(--govuk-black);
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
  padding: 0.35rem;
}
.haas-phone__sender {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--govuk-grey-2);
}
.haas-phone__avatar {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--haas-teal);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 0.8rem;
}
.haas-phone__who {
  font-weight: 700;
}
.haas-phone__who small {
  display: block;
  font-weight: 400;
  color: var(--haas-mid);
}
.haas-sms {
  margin: 1rem;
  background: var(--govuk-grey-3);
  border-radius: 1rem 1rem 1rem 0.25rem;
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  line-height: 1.45;
}
.haas-sms + .haas-sms {
  margin-top: 0;
}
.haas-sms a {
  word-break: break-all;
}
.haas-sms__meta {
  display: block;
  margin-top: 0.5rem;
  color: var(--haas-mid);
  font-size: 0.78rem;
}
.haas-sms__tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--haas-teal-dark);
  margin-bottom: 0.25rem;
}
.haas-senderid {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* download progress (forced download, demo only) */
.haas-progress {
  height: 1.5rem;
  background: var(--govuk-grey-3);
  border: 1px solid var(--govuk-grey-2);
  margin: 1rem 0;
}
.haas-progress__bar {
  height: 100%;
  width: 0;
  background: var(--govuk-green);
  transition: width 0.18s linear;
}

/* ── Portal (AP / DWP): DWP Design System internal-service chrome ─────────────
   The portal uses the DWP internal-service header/footer and DWP horizontal
   navigation from assets/dwp/dwp-frontend.css. Per the DWP "remove GOV.UK
   branding" guidance the internal service uses Arial (never GDS Transport) and
   must look distinct from public GOV.UK. We only add the signed-in user/role/lot
   context strip that sits above the DWP navigation. */
.haas-portal {
  /* DWP Design System brand colour = purple. GOV.UK Frontend sets
     --govuk-brand-colour:#1d70b8 (blue) at :root; the DWP components
     (key-details-bar, timeline, horizontal-nav "current" underline) read it via
     var(--govuk-brand-colour). Re-pointing it here scopes DWP purple to the
     portal while the public GOV.UK claimant pages keep the GOV.UK blue brand. */
  --govuk-brand-colour: #54319f;
}
.haas-portal,
.haas-portal * {
  font-family: Arial, sans-serif !important;
}
.haas-portal .haas-mono,
.haas-portal .haas-chain,
.haas-portal .haas-senderid,
.haas-portal code {
  font-family:
    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important;
}
.haas-portal-context {
  background: #fff;
  border-bottom: 1px solid var(--govuk-grey-2);
}
.haas-portal-context__inner {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 0.5rem 0;
}
.haas-portal-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--haas-mid);
}
.haas-portal-user__avatar {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--haas-teal);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 700;
}
.haas-lotpill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--govuk-black);
  color: #fff;
  padding: 0.05rem 0.45rem;
  border-radius: 3px;
}

/* page header within portal */
.haas-pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.haas-crumb {
  font-size: 0.9rem;
  color: var(--haas-mid);
  margin: 0 0 0.5rem;
}

/* stat / KPI tiles (built from plain markup; GOV.UK has no stat component) */
.haas-tiles {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin-bottom: 1.5rem;
  padding: 0;
  list-style: none;
}
.haas-tile {
  background: #fff;
  border: 1px solid var(--govuk-grey-2);
  border-left: 4px solid var(--haas-teal);
  border-radius: 4px;
  padding: 1rem 1.1rem;
}
.haas-tile__n {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--govuk-black);
}
.haas-tile__l {
  font-size: 0.85rem;
  color: var(--haas-mid);
  margin-top: 0.35rem;
}

/* contractual-KPI marker + reporting legend (catalogue ● rows) */
.haas-kpi-dot {
  color: var(--haas-teal);
}
.haas-legend {
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  background: var(--govuk-grey-4, #f3f2f1);
  border-radius: 4px;
  font-size: 0.9rem;
}
.haas-legend > div {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.haas-legend > div:last-child {
  margin-bottom: 0;
}
.haas-legend dt {
  flex: 0 0 4.5rem;
  font-weight: 700;
}
.haas-legend dd {
  margin: 0;
  color: var(--haas-mid);
}

/* reporting metric rows: value + the "what / source" helper lines */
.haas-metric-val {
  font-weight: 700;
  white-space: nowrap;
}
.haas-metric-w,
.haas-metric-src {
  display: block;
  font-size: 0.8rem;
  color: var(--haas-mid);
  margin-top: 0.15rem;
  font-weight: 400;
}
.haas-metric-src {
  margin-top: 0.05rem;
}

/* generic card surface for grouping (e.g. dropzone, panels) */
.haas-card {
  background: #fff;
  border: 1px solid var(--govuk-grey-2);
  border-radius: 4px;
  padding: 1.25rem 1.35rem;
  margin-bottom: 1.5rem;
}
.haas-card > :last-child {
  margin-bottom: 0;
}

/* ── SMS template catalogue (spec §3.3 / §8.6) ───────────────────────────── */
.haas-tpl-meta {
  margin-bottom: 1rem;
}
.haas-tpl-locale {
  margin-top: 1rem;
}
.haas-tpl-locale + .haas-tpl-locale {
  border-top: 1px solid var(--govuk-grey-2);
  padding-top: 0.5rem;
}
.haas-sms-body {
  background: var(--govuk-grey-3, #f3f2f1);
  border-left: 4px solid var(--haas-teal, #28a197);
  padding: 0.75rem 1rem;
  white-space: pre-wrap;
  margin-bottom: 0;
}
.haas-token {
  display: inline-block;
  background: #e8f4f5;
  border: 1px solid var(--haas-teal, #28a197);
  border-radius: 3px;
  padding: 0 0.3rem;
  font-size: 0.85rem;
}

/* ── Confirmation dialog (native <dialog>) ───────────────────────────────── */
.haas-dialog {
  max-width: 32rem;
  width: calc(100% - 2rem);
  border: 1px solid var(--govuk-grey-1, #b1b4b6);
  border-top: 6px solid var(--haas-purple, #54319f);
  border-radius: 4px;
  padding: 1.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.haas-dialog::backdrop {
  background: rgba(11, 12, 12, 0.6);
}
.haas-dialog > :last-child {
  margin-bottom: 0;
}

/* ── Per-row action buttons (RBAC roster) ────────────────────────────────── */
.haas-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.haas-row-actions .govuk-button {
  margin-bottom: 0;
}

/* ── Upload dropzone + per-file rows (spec §3.2a / §3.5) ──────────────────── */
.haas-dropzone {
  border: 3px dashed var(--govuk-grey-2);
  border-radius: 6px;
  background: var(--govuk-grey-3);
  padding: 2rem 1.5rem;
  text-align: center;
  cursor: pointer;
}
.haas-dropzone--over {
  border-color: var(--haas-teal);
  background: #e8f4f5;
}
.haas-dropzone__icon {
  font-size: 2rem;
  line-height: 1;
}
.haas-filelist {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}
.haas-file {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--govuk-grey-2);
  border-radius: 4px;
  margin-bottom: 0.5rem;
  background: #fff;
}
.haas-file__name {
  font-weight: 600;
  flex: 1;
}
.haas-file__name small {
  display: block;
  font-weight: 400;
  color: var(--haas-mid);
}

/* ── §3.5 validation pipeline steps ──────────────────────────────────────── */
.haas-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}
.haas-step {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--govuk-grey-2);
  border-radius: 4px;
  margin-bottom: 0.5rem;
  background: #fff;
}
.haas-step__icon {
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 700;
  flex: none;
  background: var(--govuk-grey-3);
  color: var(--haas-mid);
}
.haas-step--run .haas-step__icon {
  background: #d2e2f0;
  color: var(--govuk-blue);
}
.haas-step--ok .haas-step__icon {
  background: #cce2d8;
  color: var(--govuk-green);
}
.haas-step--err .haas-step__icon {
  background: #f6d7d2;
  color: var(--govuk-red);
}
.haas-step__t {
  font-weight: 600;
}
.haas-step__s {
  font-size: 0.85rem;
  color: var(--haas-mid);
}

/* ── Lifecycle timeline + time-warp (spec §3.2) ──────────────────────────── */
.haas-track {
  position: relative;
  height: 6px;
  background: var(--govuk-grey-2);
  border-radius: 3px;
  margin: 3rem 0 2.5rem;
}
.haas-track__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--haas-teal);
  border-radius: 3px;
  width: 0;
  transition: width 0.2s;
}
.haas-track__now {
  position: absolute;
  top: -7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--haas-teal);
  transform: translateX(-9px);
  transition: left 0.2s;
}
.haas-marker {
  position: absolute;
  top: -2.3rem;
  transform: translateX(-50%);
  text-align: center;
  font-size: 0.7rem;
  color: var(--haas-mid);
  width: 5rem;
}
.haas-marker::after {
  content: "";
  position: absolute;
  bottom: -0.6rem;
  left: 50%;
  width: 2px;
  height: 0.5rem;
  background: var(--govuk-grey-2);
  transform: translateX(-50%);
}
.haas-marker--fired {
  color: var(--govuk-black);
  font-weight: 700;
}
.haas-marker--fired::after {
  background: var(--haas-teal);
}

/* ── Wide-table scroll wrapper ───────────────────────────────────────────────
   Some portal tables (audit log: 7 columns incl. the hash chain; the RBAC
   roster: 7 columns) are wider than the content column. Rather than fork the
   GOV.UK table or shrink content, wrap them so the table scrolls horizontally
   inside its column instead of overflowing the page (the GOV.UK guidance for
   tables too wide for their container). */
.haas-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.haas-table-scroll > .govuk-table {
  margin-bottom: 0;
}

/* ── Audit / SIEM helpers (table comes from GOV.UK) ──────────────────────── */
.haas-chain {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.8rem;
  white-space: nowrap;
}
.haas-chain__arrow {
  color: var(--haas-mid);
  padding: 0 0.25rem;
}
.haas-tier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--govuk-grey-2);
  border-radius: 4px;
  margin-bottom: 0.5rem;
}
.haas-mono {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ── Hub (index) cards ───────────────────────────────────────────────────── */
.haas-hub-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  padding: 0;
  list-style: none;
}
.haas-hub-card {
  background: #fff;
  border: 1px solid var(--govuk-grey-2);
  border-top: 4px solid var(--haas-teal);
  border-radius: 4px;
  padding: 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
}
.haas-hub-card h3 {
  margin-top: 0;
}
.haas-hub-card .govuk-body {
  flex: 1;
}
.haas-hub-card__links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

/* Timeline marker positions (distribution.html). The left offset is derived from
   data-h over the 192h track (h / 192 * 100%), expressed here so the markup carries
   no inline style="" — the shipped strict CSP sets style-src 'self' with no
   'unsafe-inline', which would otherwise blank these positions. */
.haas-marker[data-h="0"] {
  left: 0%;
}
.haas-marker[data-h="72"] {
  left: 37.5%;
}
.haas-marker[data-h="96"] {
  left: 50%;
}
.haas-marker[data-h="120"] {
  left: 62.5%;
}
.haas-marker[data-h="144"] {
  left: 75%;
}
.haas-marker[data-h="168"] {
  left: 87.5%;
}

/* utility */
.haas-flex {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
/* Single-line gap override for the "mark downloaded" inline checkbox label. */
.haas-flex--tight {
  gap: 0.4rem;
}
.haas-muted {
  color: var(--haas-mid);
}

/* Small spacing + sizing utilities replacing former inline style="" attributes
   (CSP style-src 'self'; no 'unsafe-inline'). */
.haas-mt-1 {
  margin-top: 1rem;
}
.haas-mt-075 {
  margin-top: 0.75rem;
}
.haas-dropzone__hint {
  margin: 0.5rem 0 0;
}
.haas-range {
  flex: 1;
  min-width: 16rem;
}
.haas-gate-note {
  margin: 0;
  align-self: center;
}
.haas-tag--xs {
  font-size: 0.65rem;
}
[hidden] {
  display: none !important;
}

@media (max-width: 40rem) {
  .haas-dock {
    left: 1rem;
    right: 1rem;
    width: auto;
  }
}