/* تطبيق المطالبات المالية - app styles, matching the main Al Mosandah application (docs/THEME.md).
   Strict CSP: no inline styles anywhere; pages add their own static CSS files. Mobile first. */

/* ---------------------------------------------------------------------------------------
   Fonts (self-hosted): Cairo for Arabic and the UI, Plus Jakarta Sans for Latin headings.
   --------------------------------------------------------------------------------------- */
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("../vendor/fonts/cairo-arabic-wght-normal.4d90a59cb181.woff2") format("woff2-variations");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("../vendor/fonts/cairo-latin-wght-normal.3c9597566d23.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("../vendor/fonts/plus-jakarta-sans-latin-wght-normal.7660bd9909fb.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------------------------------------------------------------------------------------
   Design tokens (docs/THEME.md) and Bootstrap variables
   --------------------------------------------------------------------------------------- */
:root {
  --primary-navy: #0a1128;
  --secondary-navy: #1c2541;
  --accent-gold: #f59e0b;
  --accent-glow: rgba(245, 158, 11, 0.2);
  --bg-body: #f8fafc;
  --text-dark: #0f172a;
  --text-muted: #64748b;
  --border-light: #e2e8f0;
  --radius-xl: 18px;
  --radius-lg: 12px;
  --touch-target: 44px;

  --app-orange: #f18332;
  --app-danger: #b02a37;

  --bs-body-font-family: "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;
  --bs-body-bg: var(--bg-body);
  --bs-body-color: var(--text-dark);
  --bs-secondary-color: var(--text-muted);
  --bs-border-color: var(--border-light);
  /* Text blue: Bootstrap's #0d6efd has only 4.3:1 on the page background (#f8fafc); #0a58ca has 6.2:1
     (WCAG AA). Links, breadcrumbs, pagination and .btn-link follow these; the btn-primary fill stays #0d6efd. */
  --bs-link-color: #0a58ca;
  --bs-link-color-rgb: 10, 88, 202;
  --bs-link-hover-color: #084298;
  --bs-link-hover-color-rgb: 8, 66, 152;
}

/* The sticky header (about 70 px high on phones, 125 px on its two rows from 992 px) never covers what a focus move,
   an anchor (#installments-panel) or scrollIntoView brings into view - e.g. a Refresh result. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
@media (min-width: 992px) { html { scroll-padding-top: 8.5rem; } }
body {
  font-family: "Cairo", "Segoe UI", Tahoma, system-ui, sans-serif;
  background: var(--bg-body);
  color: var(--text-dark);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-feature-settings: "tnum" 1;
}
html[lang="en"] :is(h1, h2, h3, .h1, .h2, .h3, .brand-product) { font-family: "Plus Jakarta Sans", "Cairo", system-ui, sans-serif; }

.skip-link { position: absolute; inset-inline-start: 1rem; top: .5rem; z-index: 2000; background: #fff; color: var(--text-dark); padding: .5rem 1rem; border-radius: 6px; box-shadow: 0 4px 12px rgba(15, 23, 42, .2); }

/* Container: wide, centred, side gutter (16 px on phones). */
.wide-container { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 576px) { .wide-container { padding-inline: 1.5rem; } }

/* ---------------------------------------------------------------------------------------
   Main area, cards, forms
   --------------------------------------------------------------------------------------- */
.main-wrapper { flex: 1 0 auto; padding: 24px 0; overflow-wrap: break-word; }
@media (min-width: 768px) { .main-wrapper { padding: 40px 0; } }
.main-wrapper:focus { outline: none; }

.flash-stack .alert { box-shadow: 0 2px 6px rgba(15, 23, 42, .05); overflow-wrap: anywhere; }

.card { --bs-card-bg: #fff; --bs-card-border-color: var(--border-light); }
.card.shadow { box-shadow: 0 8px 16px rgba(0, 0, 0, .15) !important; }
.card-header-subtitle, .card-header.bg-primary p { color: rgba(255, 255, 255, 0.88); }
.card-header.bg-primary .h3, .card-header.bg-primary h1, .card-header.bg-primary h2, .card-header.bg-primary h3 { font-weight: 800; }
.panel-title { font-size: .8rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--text-muted); }
[dir="rtl"] .panel-title { letter-spacing: 0; text-transform: none; }

.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: #86b7fe; box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .2);
}
.form-control, .form-select { background-color: #fff; }
/* A chosen option longer than its (closed) select ends with "…" instead of being cut mid-letter. */
.form-select { text-overflow: ellipsis; }
/* E-mail / password inputs are LTR; their Arabic placeholder still reads from the right. */
[dir="rtl"] input[dir="ltr"]::placeholder { text-align: right; }
.form-label { font-weight: 600; }
/* Required field (core/forms/field.html); the input's `required` is what assistive technology reads. */
.required-mark { margin-inline-start: .15rem; color: var(--app-danger); }
.btn-outline-primary { --bs-btn-color: #0a58ca; }  /* text on the page background: AA contrast (see --bs-link-color) */
.alert-light.border { border-color: var(--border-light) !important; }

/* Numbers that must never wrap or flip: national IDs, case numbers, amounts. */
.nid, .num, .money, .case-number { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }
.nid { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; letter-spacing: .02em; }

/* Sign-in and account pages (allauth): a centred card with a blue header. */
.auth-page .main-wrapper { padding-top: 32px; }
.auth-card { overflow: hidden; }
.auth-logo { width: 72px; height: 72px; border-radius: 50%; background: #fff; padding: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
.auth-card .card-header .h3 { margin-bottom: .25rem; }
.auth-note { font-size: .92rem; }
.auth-secondary-action { text-align: center; margin-top: 1rem; }
.mfa-qr { max-width: 220px; width: 100%; height: auto; background: #fff; padding: 8px; border: 1px solid var(--border-light); border-radius: var(--radius-lg); }
.recovery-codes { columns: 2; column-gap: 1.5rem; list-style: none; padding: 0; margin: 0; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 1.05rem; }
.recovery-codes li { padding: 2px 0; direction: ltr; text-align: start; }
.mfa-status { display: flex; align-items: flex-start; gap: 12px; }
.mfa-status > i { font-size: 1.4rem; margin-top: 2px; }
.mfa-status .fa-circle-check { color: #198754; }
.mfa-status .fa-circle-xmark { color: var(--text-muted); }

/* Error pages */
.error-code { font-size: 3rem; font-weight: 800; color: var(--secondary-navy); line-height: 1; margin-bottom: .75rem; }

/* ---------------------------------------------------------------------------------------
   Footer: compact, navy
   --------------------------------------------------------------------------------------- */
.site-footer { background: var(--primary-navy); color: #94a3b8; padding: 18px 0; font-size: .88rem; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 20px; }
.footer-org { display: inline-flex; align-items: center; gap: 8px; color: #cbd5e1; font-weight: 700; }
.footer-org i { color: var(--accent-gold); }
.site-footer a { color: #cbd5e1; }
.site-footer a:hover, .site-footer a:focus { color: var(--accent-gold); }
@media (max-width: 575.98px) { .footer-row { flex-direction: column; align-items: flex-start; } }

/* ---------------------------------------------------------------------------------------
   Shared building blocks for the feature pages
   --------------------------------------------------------------------------------------- */
.stat-tile { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1rem 1.25rem; height: 100%; }
.stat-tile .stat-label { color: var(--text-muted); font-size: .875rem; }
.stat-tile .stat-value { font-size: 1.75rem; font-weight: 800; line-height: 1.2; }
.stat-tile .stat-sub { color: var(--text-muted); font-size: .8rem; }
.progress-thin { height: .5rem; }

.table-app { --bs-table-bg: #fff; margin-bottom: 0; }
.table-app thead th { background: #eef2f7; color: var(--secondary-navy); font-weight: 700; font-size: .85rem; white-space: nowrap; }
/* Headers stay in view inside a scrolling box only: in the page itself top: 0 would put them under the sticky header. */
.table-scroll .table-app thead th { position: sticky; top: 0; z-index: 1; }
/* Bootstrap's .visually-hidden leaves a <caption> in the table's flow (1 px, at the bottom): inside a scrolling box
   it overflowed by a pixel and drew a useless vertical scrollbar. At the top, the overflow is not scrollable. */
caption.visually-hidden { caption-side: top; }
.table-app td { vertical-align: middle; }
.table-app tbody tr.row-link { cursor: pointer; }
/* Row hover: one pale amber, painted as the cells' background. Bootstrap's .table-hover lays a grey box-shadow over
   the cells instead: it greyed the amber, and skipped every cell with a box-shadow of its own (the red attention
   bars, the pinned columns), so hovered rows looked two-toned. */
.table-app, .rp-table { --bs-table-hover-bg: transparent; }
.table-hover:is(.table-app, .rp-table) > tbody > tr:hover > * { background-color: #fffbeb; }
.table-app tbody tr.row-link:hover td, .table-app tbody tr.row-link:focus td { background: #fffbeb; }
/* Wide data: scroll inside the container, never the page. */
/* position: relative - visually hidden texts (position: absolute) stay inside the scroller (never widen the page). */
.table-scroll { position: relative; overflow: auto; max-height: 70vh; border: 1px solid var(--border-light); border-radius: var(--radius-lg); background: #fff; -webkit-overflow-scrolling: touch; }
.table-sticky-first :is(th, td):first-child { position: sticky; inset-inline-start: 0; background: #fff; z-index: 2; box-shadow: inset -1px 0 0 var(--border-light); }
.table-sticky-first thead th:first-child { background: #eef2f7; z-index: 3; }
/* Wide lists on tablets and small laptops, where the table scrolls sideways in its box: the row's buttons
   (.col-actions, header included) stay pinned at the row's end, over the columns that scroll under them, with a
   soft shadow on that edge (--pin-edge: its side, mirrored in RTL). The cells keep their own background (white,
   the header grey, the hover amber). Where scroll timelines exist, the shadow shows only while columns are under
   the buttons: not when the table fits, and fading out over the last 1.5rem of the scroll. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .table-pin-actions .col-actions {
    --pin-edge: -6px;
    position: sticky; inset-inline-end: 0; z-index: 1;
    box-shadow: var(--pin-edge) 0 6px -6px rgba(15, 23, 42, .35), inset calc(var(--pin-edge) / -6) 0 0 var(--border-light);
  }
  [dir="rtl"] .table-pin-actions .col-actions { --pin-edge: 6px; }
  @supports (animation-timeline: scroll()) {
    .table-pin-actions .col-actions {
      box-shadow: inset calc(var(--pin-edge) / -6) 0 0 var(--border-light), var(--pin-edge) 0 6px -6px transparent;
      animation: pin-actions-shadow linear both; animation-timeline: scroll(nearest inline);
      animation-range: calc(100% - 1.5rem) 100%;
    }
  }
}
@keyframes pin-actions-shadow {
  from { box-shadow: inset calc(var(--pin-edge) / -6) 0 0 var(--border-light), var(--pin-edge) 0 6px -6px rgba(15, 23, 42, .35); }
  to { box-shadow: inset calc(var(--pin-edge) / -6) 0 0 var(--border-light), var(--pin-edge) 0 6px -6px transparent; }
}

/* Phones: <table class="table table-stack"> with <td data-label="…"> becomes one card per row. */
@media (max-width: 767.98px) {
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-lg); margin-bottom: 12px; padding: 8px 12px; box-shadow: 0 2px 6px rgba(15, 23, 42, .04); }
  .table-stack td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 6px 0; text-align: end; overflow-wrap: anywhere; }
  .table-stack td[data-label]::before { content: attr(data-label); font-weight: 700; color: var(--text-muted); text-align: start; flex-shrink: 0; max-width: 45%; }
  /* A card has no row hover (a tap leaves it "hovered" on touch screens): no tinted bands inside the white card. */
  .table-stack.table-app tbody tr:hover > td { background-color: transparent; }
}

.money { font-variant-numeric: tabular-nums; }
/* Each date stays on one line with its calendar suffix (&nbsp;); the two calendars may wrap
   between them (a half-width field on a phone is narrower than the pair). */
.dual-date .date-greg, .dual-date .date-hijri { white-space: nowrap; }
.dual-date .date-alt { color: var(--text-muted); font-size: .85em; }
.cal-suffix[title] { text-decoration: none; cursor: help; }
.date-preview-error { color: var(--app-danger); }
.field-label { color: var(--text-muted); font-size: .82rem; margin-bottom: .1rem; }
.field-value { font-weight: 600; min-height: 1.5rem; overflow-wrap: anywhere; }
.field-value:empty::after { content: "—"; color: var(--text-muted); font-weight: 400; }
.pre-wrap { white-space: pre-wrap; }

.filter-bar { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 1rem; }

.timeline { list-style: none; padding: 0; margin: 0; }
.timeline-item { border-inline-start: 3px solid var(--border-light); padding: .25rem 0 1rem 0; padding-inline-start: 1rem; position: relative; }
.timeline-item::before { content: ""; position: absolute; inset-inline-start: -7px; top: .55rem; width: 11px; height: 11px; border-radius: 50%; background: var(--accent-gold); }
.timeline-meta { font-size: .8rem; color: var(--text-muted); }

.diff-old { color: #a61b1b; text-decoration: line-through; }
.diff-new { color: #146c2e; }

.empty-state { background: #fff; border: 1px dashed var(--border-light); border-radius: var(--radius-lg); }

/* ---------------------------------------------------------------------------------------
   Long free text (no length limit): growing textareas, "Show more" on read pages
   --------------------------------------------------------------------------------------- */
/* Textareas grow with their text (field-sizing; app.js does it where that is not supported) up to a cap,
   then scroll; resizable by hand. */
textarea.form-control {
  field-sizing: content; min-height: 7.5rem; min-height: 5lh; max-height: 75vh; max-height: min(30lh, 75vh);
  resize: vertical; overflow-y: auto; unicode-bidi: plaintext;
}
/* <div class="long-text" data-long-text dir="auto">: line breaks kept, long words wrap. app.js clamps it to six
   lines and adds a "Show more" button when it is longer; without JavaScript the whole text shows. */
.long-text { white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; text-align: start; }
.long-text.is-clamped {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden;
}
.long-text-toggle { min-height: var(--touch-target); font-weight: 600; text-decoration: underline; }
.long-text-toggle:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; border-radius: 4px; }
/* Long old / new values in the change history: blocks marked by a side rule (the arrow and "changed to" still
   say which is which) instead of a hard-to-read strike-through over many lines. */
.long-text.diff-old { text-decoration: none; border-inline-start: 3px solid #a61b1b; padding-inline-start: .5rem; margin-block: .25rem; }
.long-text.diff-new { border-inline-start: 3px solid #146c2e; padding-inline-start: .5rem; margin-block: .25rem; }

/* ---------------------------------------------------------------------------------------
   One claim: its section navigation, "What is next", followers
   --------------------------------------------------------------------------------------- */
/* Links to the claim's pages (not ARIA tabs). Phones: scrolls sideways inside itself, never the page. */
/* position: relative - the visually hidden count units (position: absolute) stay inside the scroller:
   otherwise they escape its clipping and widen the page on phones. */
.claim-nav { position: relative; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; border-bottom: 1px solid var(--border-light); }
/* Strips that scroll sideways (the claim's sections; the dashboard's tabs and the statistics section links,
   reports.css): a soft shadow at each edge that has more links behind it - phones and touch tablets hide the
   scrollbar, and a link cut at the edge looked like the last one. The covers scroll with the links (local) and hide
   the shadow (fixed to the box) at the end the strip is scrolled to, and both shadows when everything fits. The pair
   is symmetric, so RTL and LTR alike. --scroll-hint-bg: the colour behind the strip. */
.claim-nav, .rp-tabs, .rp-toc {
  background:
    linear-gradient(to right, var(--scroll-hint-bg, var(--bg-body)) 40%, transparent) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--scroll-hint-bg, var(--bg-body)) 40%, transparent) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, .28), transparent) left center / 1rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, .28), transparent) right center / 1rem 100% no-repeat scroll,
    var(--scroll-hint-bg, var(--bg-body));
}
/* .nav-underline takes its gap from --bs-nav-underline-gap (1rem): the links are padded already. */
.claim-nav .nav { --bs-nav-underline-gap: .25rem; flex-wrap: nowrap; }
.claim-nav .nav-link {
  display: inline-flex; align-items: center; gap: .45rem; min-height: var(--touch-target); white-space: nowrap;
  padding-inline: .75rem; color: var(--text-muted); font-weight: 600;
}
.claim-nav .nav-link:hover { color: var(--text-dark); }
.claim-nav .nav-link.active { color: var(--secondary-navy); font-weight: 800; }
.claim-nav .nav-link:focus-visible { outline: 2px solid #0d6efd; outline-offset: -2px; border-radius: 6px; }
.claim-nav-count { background: #eef2f7; color: var(--secondary-navy); font-weight: 700; }
.claim-nav .nav-link.active .claim-nav-count { background: var(--secondary-navy); color: #fff; }
.casefile-header .claim-meta { font-size: .95rem; }

/* Radio groups ({% form_field %} of a RadioSelect): a fieldset without a box, one 44 px row per choice;
   side by side where they fit, one per line on phones. */
.choice-group { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
.choice-group legend { float: none; width: auto; }
.choice-options { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.choice-option { display: flex; align-items: center; gap: .5rem; min-height: var(--touch-target); margin: 0; padding-inline-start: 0; }
.choice-option .form-check-input { float: none; margin: 0; flex-shrink: 0; width: 1.25em; height: 1.25em; }
.choice-option .form-check-label { cursor: pointer; display: inline-flex; align-items: center; min-height: var(--touch-target); }
@media (max-width: 575.98px) { .choice-options { flex-direction: column; } }

/* "What is next" on the claim page (hearing and disclosure blocks from their apps). */
.upcoming-card .card-header { background: #fffbeb; border-bottom-color: #fde68a; }
.upcoming-card .card-header i { color: #b45309; }
.upcoming-body > * + * { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border-light); }
/* Agenda rows (hearings/_agenda_item.html, px-0) sit on their white list: no tinted box (Bootstrap's list-group
   background is the page's #f8fafc) whose edges the icon and title would touch. */
.agenda-item { --bs-list-group-bg: transparent; }

/* Followers of a claim */
.follower-list { display: grid; gap: .75rem; }
.follower-item { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.follower-name { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.follower-email { font-size: .85rem; overflow-wrap: anywhere; }
/* A wrapping badge needs a line height of its own: Bootstrap's 1 lets the Arabic lines run into each other. */
.follower-warning { white-space: normal; text-align: start; line-height: 1.5; margin-top: .2rem; }
@media (max-width: 575.98px) {
  .follower-remove, .follower-remove .btn { width: 100%; }
}

/* Accent helpers for tiles, badges and bars */
.accent-navy { --accent: var(--secondary-navy); }
.accent-teal { --accent: #0dcaf0; }
.accent-orange { --accent: var(--app-orange); }
.accent-lime { --accent: #9aa51c; }
.accent-amber { --accent: var(--accent-gold); }
.stat-tile[class*="accent-"] { border-top: 4px solid var(--accent); }
.btn-accent { --bs-btn-bg: var(--accent-gold); --bs-btn-border-color: var(--accent-gold); --bs-btn-color: #000;
  --bs-btn-hover-bg: #d97706; --bs-btn-hover-border-color: #d97706; --bs-btn-hover-color: #000;
  --bs-btn-active-bg: #b45309; --bs-btn-active-border-color: #b45309; --bs-btn-active-color: #fff; font-weight: 700; }

/* "A new version of the app is available" (base.html #update-template, shown by app.js): a white notice with a
   gold edge beside the error toasts; it stays until closed or used. */
.app-update-toast { --bs-toast-bg: #fff; --bs-toast-color: var(--text-dark); border-inline-start: 4px solid var(--accent-gold); box-shadow: 0 8px 24px rgba(15, 23, 42, .18); }

/* HTMX indicators (HTMX's own inline indicator styles are disabled for CSP). */
.htmx-indicator { opacity: 0; visibility: hidden; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; visibility: visible; }
[data-swap-focus]:focus { outline: none; }
[data-swap-focus]:focus-visible { outline: 2px solid #0d6efd; outline-offset: 4px; border-radius: .25rem; }
.htmx-request.htmx-busy { opacity: .6; pointer-events: none; }

/* ---------------------------------------------------------------------------------------
   Phones and touch screens: 44 px touch targets, long text wraps inside its box
   --------------------------------------------------------------------------------------- */
@media (max-width: 991.98px), (pointer: coarse) {
  .btn, .btn-sm, .form-control, .form-select, .page-link, .list-group-item-action, .dropdown-item { min-height: var(--touch-target); }
  /* inline-flex drops the space between an icon and its label: the gap puts it back. */
  .btn, .btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
  .form-check-input { width: 1.25em; height: 1.25em; }
  /* border-box: 44 px in all (Bootstrap's content-box added its padding: 76 x 84 px in an alert, hanging over the
     text below); in a one-line alert (58 px) the X is centred. */
  .btn-close { box-sizing: border-box; min-width: var(--touch-target); min-height: var(--touch-target); }
  .alert-dismissible .btn-close { top: .4375rem; }
  /* 44 px breadcrumb links; the separator and the current page stay centred beside them. */
  .breadcrumb-item { display: flex; align-items: center; }
  .breadcrumb-item a { display: inline-flex; align-items: center; min-height: var(--touch-target); }
  /* Links inside running text that are the only way to an action: the claim link of a per-claim page's
     header, the links of alerts ("Record the outcome of hearing 2"). */
  .casefile-header .claim-meta a, .alert-link { display: inline-flex; align-items: center; min-height: var(--touch-target); }
}
@media (max-width: 575.98px) {
  /* A pager that wraps onto two rows: separate buttons with a gap (the joined group broke into rows glued together,
     with rounded corners mid-row). */
  .pagination { gap: .25rem; }
  .pagination .page-item .page-link { margin-inline-start: 0; border-radius: var(--bs-pagination-border-radius); }
  .form-actions .btn, .auth-card .btn-lg { width: 100%; }
  .modal-dialog { margin: .5rem; }
}
.modal-body, .dropdown-menu, .alert, .toast-body { overflow-wrap: anywhere; }

@media print {
  .site-header, .site-footer, .filter-bar, .btn, form, .skip-link, .long-text-toggle { display: none !important; }
  body { background: #fff; }
  .main-wrapper { padding: 0; }
  /* Printed pages show long text in full. */
  .long-text.is-clamped { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
}