:root {
  --color-bg: #f2f2f2;
  --color-surface: #ffffff;
  --color-border: #e2e0e2;
  --color-text: #282f4b;
  --color-muted: #6b7085;
  --color-primary: #990858;
  --color-primary-hover: #7a0647;
  --color-teal: #26afb5;
  --color-amber: #ffb536;
  --color-navy: #282f4b;
  --color-error: #b3261e;
  --color-success: #1b7d80;
  --color-header-bg: var(--color-surface);
  --color-header-border: rgba(40, 47, 75, 0.14);
  --color-header-border-width: 1px;
  /* Separate from --color-primary so an entity theme (see branding.js)
     can give the claim-hub band its own colour without also recolouring
     every button/link — defaults to matching primary, which is exactly
     the existing look for the UK theme. */
  --color-hero: var(--color-primary);
  --color-hero-hover: var(--color-primary-hover);
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Not centered — on a short page (e.g. a one-field wizard step),
     justify-content: center would treat header+content+footer as one
     block and centre all three together, leaving equal grey gaps above
     the header and below the footer instead of pinning them to the
     viewport edges. Header sits naturally at the top; the footer's own
     margin-top: auto (below) pushes it to the bottom instead. */
  justify-content: flex-start;
  /* No top padding — .brand-header is always body's first child (or
     second, when test-mode.js prepends its banner ahead of it) and sits
     flush against the true top of the page on its own. A top padding
     here would leave a gap above whichever of those two is first. */
  padding: 0 24px 24px;
  font-weight: 400;
}

/* Site header — full-width bar (matches the new marketing site's fixed
   nav: white, left-aligned logo, subtle navy-tinted border, no shadow).
   The bar itself is a centered, content-width box (::before paints the
   full-bleed background via the standard "break out of a centered
   container" trick — 100vw + negative margin — so the background reaches
   the true viewport edges without needing an HTML wrapper on every page,
   while the logo/tagline line up with the page content below rather than
   sitting pinned to the far-left viewport edge). */
.brand-header {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  max-width: 1100px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 0;
  margin: 0 auto 32px;
}

.brand-header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: var(--color-header-bg);
  border-bottom: var(--color-header-border-width) solid var(--color-header-border);
  z-index: -1;
}

.brand-header img.logo {
  height: 76px;
  width: auto;
}

.brand-header .tagline {
  /* Hidden for now (feedback 26 Aug) — kept in the markup rather than
     removed from every page, so it's a one-line revert if it comes back. */
  display: none;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 40px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 4px 16px rgba(40, 47, 75, 0.08);
}

.card h1 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 0 6px;
}

.card p.subtitle {
  color: var(--color-muted);
  margin: 0 0 24px;
  font-size: 0.95rem;
  line-height: 1.5;
}

label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-navy);
  margin-bottom: 6px;
}

input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  margin-bottom: 16px;
  background: var(--color-bg);
  color: var(--color-text);
}

input:focus {
  outline: 2px solid var(--color-teal);
  outline-offset: 1px;
  background: var(--color-surface);
}

textarea, select {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  margin-bottom: 16px;
  background: var(--color-bg);
  color: var(--color-text);
  resize: vertical;
}

textarea:focus, select:focus {
  outline: 2px solid var(--color-teal);
  outline-offset: 1px;
  background: var(--color-surface);
}

.field-hint {
  display: block;
  font-size: 0.82rem;
  color: var(--color-muted);
  margin: -12px 0 16px;
  font-weight: 400;
}

.radio-group {
  display: flex;
  gap: 20px;
  margin-bottom: 16px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  color: var(--color-text);
}

.radio-option input[type="radio"] {
  width: auto;
  margin: 0;
}

.form-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.form-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.form-section h3 {
  font-size: 0.95rem;
  color: var(--color-navy);
  margin: 0 0 14px;
}

.autocomplete-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(40, 47, 75, 0.1);
}

.autocomplete-result {
  padding: 10px 14px;
  cursor: pointer;
  font-size: 0.92rem;
}

.autocomplete-result:hover,
.autocomplete-result.active {
  background: var(--color-bg);
}

.autocomplete-result .result-category {
  display: block;
  font-size: 0.78rem;
  color: var(--color-muted);
}

.claim-row {
  display: block;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-bg);
  text-decoration: none;
  color: inherit;
}

.claim-row:last-child {
  border-bottom: none;
}

.claim-row:hover {
  background: var(--color-bg);
  margin: 0 -12px;
  padding: 14px 12px;
  border-radius: 8px;
}

.claim-row-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.claim-condition {
  font-weight: 700;
  color: var(--color-navy);
}

.claim-meta {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-top: 2px;
}

.status-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.status-awaiting_information { background: #fdf1de; color: #a15c00; }
.status-under_assessment { background: #e4f0fb; color: #1a4d8f; }
.status-approved { background: #e4f5f5; color: var(--color-success); }
.status-declined { background: #fbeceb; color: var(--color-error); }
.status-closed { background: var(--color-bg); color: var(--color-muted); }

.queue-table-wrap {
  overflow-x: auto;
}

.queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.queue-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-muted);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.queue-table td {
  padding: 12px;
  border-bottom: 1px solid var(--color-bg);
  color: var(--color-text);
  white-space: nowrap;
}

.queue-table tr:last-child td {
  border-bottom: none;
}

.queue-row-clickable {
  cursor: pointer;
}

.queue-row-clickable:hover {
  background: var(--color-bg);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

.modal-card {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 24px;
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
}

.document-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-bg);
}

.document-row:last-child {
  border-bottom: none;
}

.autocomplete-empty {
  padding: 10px 14px;
  font-size: 0.88rem;
  color: var(--color-muted);
}

button {
  width: 100%;
  padding: 14px;
  background: var(--color-primary);
  color: white;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

button:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

button:disabled {
  background: var(--color-border);
  border-color: var(--color-border);
  color: var(--color-muted);
  cursor: not-allowed;
}

.message {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.5;
  display: none;
}

.message.visible {
  display: block;
}

.message.success {
  background: #e4f5f5;
  color: var(--color-success);
}

.message.error {
  background: #fbeceb;
  color: var(--color-error);
}

.footer-link {
  margin-top: 22px;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-muted);
}

.footer-link a {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
}

.footer-link a:hover {
  text-decoration: underline;
}

.dashboard-shell {
  width: 100%;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Side-by-side pair (e.g. Your details / Your cover) — wraps to stacked
   on narrow viewports rather than forcing two columns at any width. */
.dashboard-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.dashboard-row .dashboard-card {
  flex: 1 1 320px;
}

.dashboard-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.dashboard-header-row h1 {
  margin: 0;
  font-size: 1.3rem;
  color: var(--color-navy);
}

.btn-auto {
  width: auto;
  padding: 11px 24px;
}

.btn-secondary {
  width: auto;
  padding: 11px 24px;
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-primary);
  color: white;
}

.dashboard-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 4px 16px rgba(40, 47, 75, 0.08);
}

.dashboard-card h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 0 18px;
}

/* flex-wrap, not a stretching grid — a wide card with only 3-4 items would
   otherwise stretch each into a full grid column, dragging values like
   Renewal Date out towards the header button rather than sitting compact
   and left-aligned (feedback 26 Aug). */
.info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 40px;
}

.info-item {
  flex: 0 0 auto;
  min-width: 140px;
}

/* "Your details" on the member dashboard: two even columns so the labels and
   values line up row to row (the flex version above lets each item take its
   own width, which staggered them), with the address across the full width. */
.info-grid.info-grid-aligned {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
}

.info-grid-aligned .info-item {
  min-width: 0;
}

.info-grid-aligned .info-value {
  overflow-wrap: anywhere;
}

.info-grid-aligned .info-item-wide {
  grid-column: 1 / -1;
}

.info-label {
  font-size: 0.78rem;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 3px;
}

.info-value {
  font-size: 1rem;
  color: var(--color-text);
  font-weight: 600;
}

.cover-summary {
  display: flex;
  flex-direction: column;
}

.cover-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary);
}

.cover-limit {
  color: var(--color-muted);
  font-size: 0.9rem;
  margin-top: 2px;
}

.cover-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.cover-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-navy);
  background: var(--color-grey, #f2f2f2);
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.btn-link {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--color-primary);
  padding: 11px 24px;
  border-radius: 4px;
  font-size: 0.92rem;
  white-space: nowrap;
}

.btn-link:hover {
  background: var(--color-primary);
  color: white;
}

.back-link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
}

.back-link:hover {
  text-decoration: underline;
}

.benefit-category {
  margin-top: 22px;
}

.benefit-category:first-child {
  margin-top: 0;
}

.benefit-category h3 {
  font-size: 0.95rem;
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 8px;
  margin: 0 0 10px;
}

.benefit-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-bg);
  font-size: 0.92rem;
}

.benefit-row:last-child {
  border-bottom: none;
}

.benefit-name {
  display: block;
  color: var(--color-text);
  font-weight: 600;
}

.benefit-notes {
  display: block;
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: 2px;
  font-weight: 400;
  line-height: 1.4;
}

.benefit-value {
  color: var(--color-navy);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Step wizard — progress indicator + step sections, e.g. the reimbursement
   claim flow. Steps are plain divs toggled via inline display, not routed
   pages, so back/continue never lose in-progress data. */
.wizard-progress {
  margin-bottom: 22px;
}

.wizard-step-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.wizard-progress-track {
  height: 6px;
  background: var(--color-bg);
  border-radius: 999px;
  overflow: hidden;
}

.wizard-progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
  transition: width 0.2s ease;
}

.wizard-step h1 {
  margin: 0 0 4px;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-navy);
}

/* Selectable option tiles — e.g. choosing what a claim is for. */
.tile-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.tile-group-heading {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 18px 0 8px;
}

.tile-group-heading:first-child {
  margin-top: 0;
}

.option-tile {
  display: block;
  width: 100%;
  text-align: left;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--color-surface);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.option-tile:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(40, 47, 75, 0.1);
}

.option-tile.selected {
  border-color: var(--color-primary);
  background: #fdf1f7;
}

.option-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #fdf1f7;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.option-tile-icon svg {
  width: 18px;
  height: 18px;
}

.option-tile-name {
  display: block;
  font-weight: 700;
  color: var(--color-navy);
  font-size: 0.95rem;
}

.option-tile-meta {
  display: block;
  font-size: 0.8rem;
  color: var(--color-muted);
  margin-top: 3px;
}

.tile-group-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tile-group-heading-icon {
  display: flex;
  color: var(--color-primary);
}

.tile-group-heading-icon svg {
  width: 15px;
  height: 15px;
}

/* Info callout — eligibility/coverage explanations next to a selection,
   same intent as the "Before you continue…" box on the public site. */
.info-callout {
  background: #fdf1de;
  border: 1px solid #f3d9a4;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.85rem;
  color: #7a4a00;
  line-height: 1.45;
  margin-bottom: 16px;
}

.info-callout strong {
  display: block;
  margin-bottom: 4px;
  color: #7a4a00;
}

/* Marks a form label as mandatory — a CSS-generated asterisk so it survives
   JS that rewrites a label's text (per-benefit label overrides). */
label.required-label::after {
  content: " *";
  color: var(--color-primary);
}

.info-callout .callout-list {
  margin: 4px 0 0;
  padding-left: 18px;
}

.info-callout .callout-list li {
  margin-bottom: 4px;
}

.info-callout .callout-list li:last-child {
  margin-bottom: 0;
}

.button-row {
  display: flex;
  gap: 10px;
}

.button-row button {
  width: auto;
  flex: 1;
}

/* Site footer — company/regulatory details, added to every page. Same
   navy band + full-bleed background as the marketing site's footer
   (rgb(40,47,75), confirmed via computed style), slimmer in content (no
   sitemap/nav) since this app is the logged-in area, not the public site. */
.site-footer {
  position: relative;
  width: 100%;
  max-width: 1100px;
  box-sizing: border-box;
  /* margin-top: auto is what actually pins this to the bottom on a short
     page — it consumes all remaining space in body's flex column above
     the footer, same trick as a standard "sticky footer" layout. */
  margin: auto auto -24px;
  padding: 28px 32px 24px;
  text-align: center;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  background: var(--color-navy);
  z-index: -1;
}

.site-footer-address {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 10px;
}

.site-footer-legal {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  line-height: 1.6;
}

/* Claim hub — the primary post-login call to action (dashboard), styled
   as a prominent branded band so claiming reads as the main purpose of
   the page rather than one of several equal-weight utility links. */
.claim-hub {
  background: linear-gradient(135deg, var(--color-hero) 0%, var(--color-hero-hover) 100%);
  border-radius: 16px;
  padding: 30px 32px 32px;
  box-shadow: 0 4px 16px rgba(40, 47, 75, 0.12);
}

.claim-hub h2 {
  color: white;
  margin: 0 0 4px;
  font-size: 1.25rem;
}

.claim-hub-subtitle {
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 22px;
  font-size: 0.92rem;
  line-height: 1.5;
}

.claim-hub-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}

.claim-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--color-surface);
  border-radius: 12px;
  padding: 20px 44px 20px 20px;
  text-decoration: none;
  position: relative;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.claim-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.claim-tile-icon {
  width: 30px;
  height: 30px;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.claim-tile-icon svg {
  width: 100%;
  height: 100%;
}

.claim-tile-name {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-navy);
}

.claim-tile-desc {
  font-size: 0.85rem;
  color: var(--color-muted);
  line-height: 1.45;
}

.claim-tile-arrow {
  position: absolute;
  top: 20px;
  right: 18px;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.15rem;
}

/* Wide banner — e.g. the out-of-hours emergency contact prompt on the
   dashboard. Deliberately lower-key than the claim-hub band (an amber
   accent, not a filled colour block) so it reads as important but
   secondary to the main claim actions above it. */
.wide-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-amber);
  border-radius: 12px;
  padding: 18px 22px;
  text-decoration: none;
}

.wide-banner-icon {
  color: var(--color-amber);
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.wide-banner-icon svg {
  width: 100%;
  height: 100%;
}

.wide-banner-text {
  flex: 1;
}

.wide-banner-text strong {
  display: block;
  color: var(--color-navy);
  font-size: 1rem;
}

.wide-banner-text span {
  display: block;
  color: var(--color-muted);
  font-size: 0.85rem;
  margin-top: 2px;
}

.wide-banner-arrow {
  color: var(--color-primary);
  font-weight: 700;
  font-size: 1.15rem;
  flex-shrink: 0;
}

/* Staff member search: result action buttons and portal-account line sit in
   tidy rows (12 Oct 2026) rather than ad-hoc inline spacing. */
.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.result-actions .btn-link,
.result-account .btn-link {
  padding: 8px 16px;
  font-size: 0.85rem;
}

.result-account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--color-bg);
  font-size: 0.85rem;
  color: var(--color-muted);
}

.result-account:empty {
  display: none;
}

.result-note {
  margin-top: 8px;
  font-weight: 700;
}

.result-note:empty {
  display: none;
}

/* Marks a dependant (Partner / Child) clearly in staff search results. */
.relationship-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: #eceef3;
  color: var(--color-navy);
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: middle;
}

/* Staff dashboard header: on a narrow screen the title stays on top and the
   buttons wrap onto following lines instead of squeezing and cutting off
   "Log out". Wide screens are unchanged. */
.staff-header {
  flex-wrap: wrap;
  gap: 12px 16px;
}

.staff-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
}

/* Phone-size fixes (16 Oct 2026, from the phone readability check). */

/* Long one-word benefit names (e.g. "Chiropractic/osteopathy/…") used to push
   the whole page wider than the phone: let the name column shrink and break. */
.benefit-row > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}


/* Detail items (emergency contact, staff screens) may now shrink to the card
   instead of spilling out of it. */
.info-item {
  flex: 0 1 auto;
  max-width: 100%;
}

@media (max-width: 520px) {
  /* Benefit values (e.g. "Full refund (max 42 days)") may wrap on a phone
     instead of forcing the whole page wider. */
  .benefit-row > .benefit-value {
    flex: 0 1 auto;
    max-width: 45%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Back + primary button stacked full width, primary on top, so a long label
     like "Proceed with … claim →" isn't squeezed into a narrow column. */
  .button-row {
    flex-direction: column-reverse;
  }

  .button-row button {
    width: 100%;
    flex: 0 0 auto;
  }

  /* Comfortable tap sizes for the small stand-alone links. */
  .back-link {
    display: inline-block;
    padding: 14px 0;
  }

  .footer-link a {
    display: inline-block;
    padding: 12px 6px;
  }

  .info-value a {
    display: inline-block;
    padding: 10px 0;
  }
}

/* File upload result banner — see js/upload-status.js */
.upload-status {
  display: block;
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
  word-break: break-word;
}

.upload-status-uploading {
  background: #fff3d6;
  color: #7a5200;
}

.upload-status-ok {
  background: #e4f5f5;
  color: var(--color-success);
  border-left: 4px solid var(--color-success);
}

.upload-status-error {
  background: #fbeceb;
  color: var(--color-error);
  border-left: 4px solid var(--color-error);
}

/* Submission details window — see js/staff-submissions.js */
.modal-card-wide {
  max-width: 680px;
}

.details-section {
  margin-top: 18px;
}

.details-section h3 {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.details-row {
  display: grid;
  grid-template-columns: minmax(130px, 38%) minmax(0, 1fr);
  gap: 4px 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--color-bg);
  font-size: 0.92rem;
}

.details-row:last-child {
  border-bottom: none;
}

.details-label {
  color: var(--color-muted);
}

.details-value {
  color: var(--color-text);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

@media (max-width: 520px) {
  .details-row {
    grid-template-columns: 1fr;
  }
}

/* Attached files with a Remove link — see js/upload-status.js */
.upload-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  font-weight: 600;
  word-break: break-word;
}

.upload-remove {
  flex: none;
  width: auto;
  margin: 0;
  padding: 4px 12px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.upload-remove:hover {
  background: rgba(0, 0, 0, 0.06);
}

/* "Automatically passed to Clapa" — loud on purpose, see js/staff-submissions.js */
.clapa-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 14px 0 4px;
  padding: 16px 18px;
  border-radius: 10px;
  background: var(--color-success);
  color: #ffffff;
}

.clapa-banner-icon {
  flex: none;
  font-size: 1.6rem;
  line-height: 1;
  font-weight: 700;
}

.clapa-banner-title {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.clapa-banner-detail {
  margin-top: 4px;
  font-size: 0.92rem;
  line-height: 1.45;
}

.clapa-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-success);
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Submissions table: wraps instead of scrolling sideways — see js/staff-submissions.js */
.submissions-table td,
.submissions-table th {
  white-space: normal;
  vertical-align: top;
}

.submissions-table td {
  overflow-wrap: break-word;
}

/* Minimum widths so words are not chopped on a narrow screen. */
.submissions-table th:nth-child(1) { min-width: 105px; }
.submissions-table th:nth-child(2) { min-width: 120px; }
.submissions-table th:nth-child(3) { min-width: 140px; }
.submissions-table th:nth-child(4) { min-width: 140px; }
.submissions-table th:nth-child(5) { min-width: 100px; }
.submissions-table th:nth-child(6) { min-width: 70px; }

.submissions-table .cell-sub {
  margin-top: 2px;
  font-size: 0.82rem;
  color: var(--color-muted);
}

.submissions-table .clapa-badge {
  white-space: normal;
}

/* Small polish (20 Oct 2026): example text in the bank fields is not capitalised, and the attached-file box has room below it. */
[id$="bank-international"] input::placeholder {
  text-transform: none;
}

.upload-status {
  margin-bottom: 14px;
}

/* Phone tidy-ups (21 Oct 2026): bigger thumb targets for Remove and the "change" link. */
.upload-remove {
  min-height: 38px;
  padding-left: 16px;
  padding-right: 16px;
}

#condition-selected a,
#condition-selected a:visited {
  display: inline-block;
  padding: 10px 6px;
  margin: -6px 0;
}

/* Refused file type — see js/upload-types.js */
.upload-type-error {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: #fbeceb;
  color: var(--color-error);
  border-left: 4px solid var(--color-error);
  border-radius: 4px;
  font-size: 0.95rem;
}

/* Currency named on an amount box when the policy isn't in pounds — see js/currency.js */
.currency-note {
  font-weight: 400;
  color: var(--color-text-muted, #6b7085);
}