/* ============================================================================
   H.A.R.D. — HAAS theme + service-specific 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 / DWP header/footer,
     2. the EN/CY language toggle styling,
     3. service-specific surfaces with no GOV.UK equivalent (phone/SMS mock,
        upload dropzone, audit chain, portal chrome).

   GDS Transport is proprietary and the vendored CSS points at absolute
   /assets/fonts paths. We pin the GOV.UK system font stack so no font fetch is
   ever triggered — the same self-hosted-system-font decision the 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 code {
  font-family:
    ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important;
}

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

/* ── 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. */

/* ── 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;
}
/* Wider page container for the internal portal. The staff screens are
   table-heavy (distribution, audit, SMS log, reporting) and the GOV.UK default
   960px cap forces premature horizontal scrolling. We raise the cap only on the
   portal — public/claimant GOV.UK pages have no .haas-portal scope, so they keep
   the standard 960px reading width. GOV.UK Frontend already switches the
   container's left/right margins to auto at the desktop breakpoint, so the wider
   content stays centred; we only lift the max-width. */
.haas-portal .govuk-width-container {
  max-width: 1300px;
}
.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;
}
/* Larger upload area — the prominent action on the Upload screen. */
.haas-dropzone--lg {
  min-height: 220px;
  padding: 3.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
.haas-dropzone--lg .haas-dropzone__icon {
  font-size: 3rem;
}
.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;
  flex-wrap: wrap;
  gap: 0.35rem 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 1 8rem;
  min-width: 0;
  /* Truncate a long filename to one line (full name in the title tooltip) so a
     long status badge can never squeeze it down to one character per line. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.haas-file__name small {
  display: block;
  font-weight: 400;
  color: var(--haas-mid);
}
.haas-file__size {
  flex: 0 0 auto;
  color: var(--haas-mid);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.haas-file__remove {
  flex: 0 0 auto;
  background: none;
  border: 0;
  margin: 0;
  padding: 0;
  color: #d4351c;
  font-size: 1rem;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
}
.haas-file__remove:hover {
  text-decoration: none;
}
.haas-file__remove:focus {
  outline: 3px solid transparent;
  color: #0b0c0c;
  background-color: #fd0;
  box-shadow:
    0 -2px #fd0,
    0 4px #0b0c0c;
  text-decoration: none;
}

/* ── Resumable-upload per-file status (progress + interim verdict) ───────── */
.haas-file__status {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--haas-mid);
  font-variant-numeric: tabular-nums;
}
.haas-file__status--ok {
  color: #00703c;
  font-weight: 600;
}
.haas-file__status--err {
  color: #d4351c;
  font-weight: 600;
}
.haas-file__bar {
  flex: 0 0 5rem;
  height: 6px;
  border-radius: 3px;
  background: var(--govuk-grey-2);
  overflow: hidden;
}
.haas-file__bar-fill {
  display: block;
  height: 100%;
  background: var(--haas-teal, #007e8a);
  transition: width 0.2s ease;
}

/* ── §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);
}

/* ── 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;
  /* Pure-CSS scroll-shadow cue: a soft fade at whichever edge still has content
     off-screen, so a wide table reads as "more this way →" instead of looking
     truncated. The white "cover" gradients use background-attachment:local so they
     travel with the scrolled content and only uncover the fixed edge shadows when
     there is somewhere to scroll. Needs no JS and stays correct for tables that
     are injected after load. */
  background:
    linear-gradient(to right, #fff 28%, rgba(255, 255, 255, 0)) 0 0,
    linear-gradient(to left, #fff 28%, rgba(255, 255, 255, 0)) 100% 0,
    radial-gradient(
        farthest-side at 0 50%,
        rgba(11, 12, 12, 0.16),
        rgba(11, 12, 12, 0)
      )
      0 0,
    radial-gradient(
        farthest-side at 100% 50%,
        rgba(11, 12, 12, 0.16),
        rgba(11, 12, 12, 0)
      )
      100% 0;
  background-repeat: no-repeat;
  background-color: #fff;
  background-size:
    36px 100%,
    36px 100%,
    16px 100%,
    16px 100%;
  background-attachment: local, local, scroll, scroll;
}
.haas-table-scroll > .govuk-table {
  margin-bottom: 0;
}
/* Only a region that actually overflows is made focusable (app.js adds tabindex
   conditionally). Give that focusable region the GOV.UK keyboard-focus treatment
   so arrow-key scrolling is discoverable. */
.haas-table-scroll--scrollable:focus-visible {
  outline: 3px solid #ffdd00;
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px #0b0c0c;
}
/* Sticky header row for long tables. A horizontal scroller is also a vertical
   scroll container (CSS couples overflow-x/y), so a plain sticky thead has nothing
   to stick to until the wrapper itself scrolls vertically. app.js adds --sticky to
   tables tall enough to benefit; capping the height here makes the box scroll its
   rows under a header that stays put. Headers need an opaque background so rows
   don't show through, and a hairline + soft shadow to read as "above" the rows. */
.haas-table-scroll--sticky {
  max-height: 640px;
}
.haas-table-scroll--sticky .govuk-table__head .govuk-table__header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  box-shadow:
    inset 0 -1px 0 #b1b4b6,
    0 2px 3px rgba(11, 12, 12, 0.1);
}

/* ── Request detail: separate the recordings (files) block from the audit
   timeline ───────────────────────────────────────────────────────────────────
   A long detail page reads as one undifferentiated stream otherwise. A hairline
   rule + generous top gap turns "files" and "timeline" into two distinct sections
   so the eye can find each. Scoped to the heading that opens the timeline. */
.haas-detail-divider {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--govuk-border-colour, #cecece);
}

/* ── SMS-log status filter chips ─────────────────────────────────────────── */
.haas-filter-bar {
  margin-bottom: 20px;
}
.haas-filter-chip {
  margin-bottom: 5px;
}
.haas-filter-chip--on {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--haas-teal, #007e8a);
}

/* ── Shared list filter (date presets + custom range + client search) ──────── */
.haas-listfilter {
  margin-bottom: 20px;
}
.haas-listfilter .haas-filter-bar {
  margin-bottom: 10px;
}
.haas-filter-custom {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  align-items: flex-end;
}
.haas-filter-custom .govuk-form-group,
.haas-filter-search.govuk-form-group {
  margin-bottom: 10px;
}
.haas-filter-search {
  max-width: 20em;
}
.haas-listfilter-details {
  margin-bottom: 5px;
}
.haas-listfilter-details .govuk-details__text .haas-filter-bar {
  margin-top: 0;
}
.haas-listfilter-details .govuk-details__text > *:last-child {
  margin-bottom: 0;
}
.haas-filter-extra-label {
  margin-top: 0;
  margin-bottom: 5px;
}
.haas-filter-caption {
  margin-bottom: 0;
}

/* ── Shared list pager (govuk-pagination + per-page length select) ─────────── */
.haas-pager {
  margin-top: 15px;
}
.haas-pager__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px 20px;
}
.haas-pager__size {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.haas-pager__size .govuk-label {
  margin-bottom: 0;
  white-space: nowrap;
}
.haas-pager__size .govuk-select {
  width: auto;
}
.haas-pager__summary {
  margin-bottom: 10px;
}
.haas-pager .govuk-pagination {
  margin-bottom: 0;
}

/* ── List tools (Export CSV / PDF / Print) ─────────────────────────────────── */
.haas-list-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}
.haas-list-tools .govuk-button {
  margin-bottom: 0;
}

/* ── Reporting toolbar: period selector + export tools on one baseline row ──── */
.haas-rep-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 20px;
  margin-bottom: 15px;
}
.haas-rep-toolbar .haas-rep-period {
  margin-bottom: 0;
}
.haas-rep-toolbar .haas-list-tools {
  margin-bottom: 0;
}

/* ── Print / Save-as-PDF: strip the page chrome, leave the heading + table ──── */
/* Zero the page margin so the browser has no margin box to draw its own header
   (page URL) / footer (date-time, page numbers) into — then restore readable
   spacing with interior padding on the content container below. */
@page {
  margin: 0;
}
@media print {
  .govuk-width-container {
    max-width: none;
    padding: 14mm 12mm;
  }
  .dwp-header,
  .dwp-footer,
  #portal-nav,
  .govuk-skip-link,
  .haas-listfilter,
  .haas-filter-bar,
  .haas-pager,
  .haas-list-tools,
  .haas-rep-period,
  #verifyBtn {
    display: none !important;
  }
  .haas-portal {
    background: #fff !important;
  }
  .haas-table-scroll {
    overflow: visible !important;
  }
  /* Don't let GOV.UK append link hrefs after every "View"/link in print. */
  .govuk-link::after {
    content: "" !important;
  }
}

/* ── 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;
}

/* utility */
.haas-flex {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}
.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-gate-note {
  margin: 0;
  align-self: center;
}
.haas-tag--xs {
  font-size: 0.65rem;
}
/* Result-count tag (e.g. "Showing 500 of 500"): a count is longer than the
   short status label govuk-tag is designed for (max-width 160px), so it would
   wrap to two lines. Lift the cap and keep it on one line. Qualified with the
   base class so it outranks `.govuk-tag` in the cascade. */
.govuk-tag.haas-tag--count {
  max-width: none;
  white-space: nowrap;
}
[hidden] {
  display: none !important;
}