/* ==========================================================================
   Financial Claims Helpline — mobile layer
   --------------------------------------------------------------------------
   Loaded AFTER assets/fchl.css on every page, so it is the last word on a
   small screen. Every rule sits inside a width, height or pointer query, so
   nothing here reaches a full-size desktop window — the one exception is the
   sticky-rail cap in §5b, which is a short-viewport correction and says so.

   Two things shape how this file is written.

   1. The site is built from inline styles, which beat a normal stylesheet on
      any property they set. So the corrections carry !important, and they are
      selected by matching the inline value itself.

   2. The dc runtime hands the style attribute to React as an object, and the
      browser writes it back out normalised: a space after every colon, hex
      colours re-spelled as rgb(), bare lengths given units, `.24em` given a
      leading zero. The selectors below therefore match the *serialised*
      spelling — `background: rgb(20, 69, 126)`, not `background:#14457E` —
      which is the same convention assets/fchl.css already uses. Where it cost
      nothing, the authored spelling is listed too, so the rule also holds if a
      page is ever rendered without the runtime.

   Contents
     0.  Tokens and the docked-bar contract
     1.  Page frame: no sideways scroll, real viewport height, safe areas
     2.  Rhythm: gutters, panel padding
     3.  Type: a floor under the small labels
     4.  Touch: 44px targets, press feedback, no phantom hover
     5.  Layout: the grids that never collapsed
     6.  Forms: 16px fields, real tap heights, stacked actions
     7.  Overlays: centred dialogs become bottom sheets
     8.  Docked things: launcher, dock, toast
     9.  Scrollers: swipe rails with an edge fade
     10. Performance: the decorative layers a phone should not paint
     11. Landscape, and the 320-360px band
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* PortalNav raises this to its real tab-bar height on the pages that dock
     one. Everywhere else it stays 0 and the arithmetic below still holds. */
  --fchl-tab-h: 0px;

  --fchl-safe-b: env(safe-area-inset-bottom, 0px);
  --fchl-safe-t: env(safe-area-inset-top, 0px);
  --fchl-safe-l: env(safe-area-inset-left, 0px);
  --fchl-safe-r: env(safe-area-inset-right, 0px);

  /* Where a floating control has to sit to clear both the tab bar and the
     home indicator. Docked UI uses this, never a raw bottom value. */
  --fchl-dock-b: calc(var(--fchl-tab-h) + var(--fchl-safe-b) + 16px);
}

html[data-pn-tabbar="on"] { --fchl-tab-h: var(--pn-tab-h, 64px); }


/* --------------------------------------------------------------------------
   1. Page frame
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* One pixel of overhang anywhere turns the page into a horizontal scroller
     and every fixed element then drifts as you swipe. Clip rather than
     hidden, so position:sticky keeps working inside. */
  html, body { max-width: 100%; overflow-x: clip; }

  /* 100vh on a phone is the height with the browser chrome retracted, so a
     full-height shell is always taller than the screen and its last 60-90px
     live under the address bar. dvh is the height you can actually see. */
  [style*="min-height: 100vh"],
  [style*="min-height:100vh"] { min-height: 100dvh !important; }
  [style*="height: 100vh"],
  [style*="height:100vh"] { height: 100dvh !important; }

  /* Notch and rounded-corner clearance for anything pinned to an edge. */
  body { padding-left: var(--fchl-safe-l); padding-right: var(--fchl-safe-r); }

  /* An in-page anchor must clear the sticky chrome, or the heading it was
     aimed at lands behind the header. */
  [id] { scroll-margin-top: calc(var(--pn-h, 76px) + 14px); }

  /* Case references, file names and email addresses are the usual source of
     the overhang above. */
  h1, h2, h3, h4, p, li, td, th, dd, dt, blockquote { overflow-wrap: break-word; }

  pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  iframe, video, canvas { max-width: 100%; }
}


/* --------------------------------------------------------------------------
   2. Rhythm
   The two shells hard-code a 28px gutter and the panels inside them hard-code
   22-30px of padding. On a 360px screen that is a sixth of the width spent on
   margin before a word is set.
   -------------------------------------------------------------------------- */
/* Clearance for the docked tab bar is put on the body once, rather than on
   each page shell. Every portal page then keeps its last row scrollable above
   the bar whatever its own padding happens to be. */
html[data-pn-tabbar="on"] body {
  padding-bottom: calc(var(--pn-tab-h, 64px) + var(--fchl-safe-b));
}

@media (max-width: 640px) {
  /* Every centred shell on the site, at every width it is written at. */
  [style*="max-width: 1000px"][style*="margin: 0px auto"],
  [style*="max-width: 1080px"][style*="margin: 0px auto"],
  [style*="max-width: 1100px"][style*="margin: 0px auto"],
  [style*="max-width: 1120px"][style*="margin: 0px auto"],
  [style*="max-width: 1180px"][style*="margin: 0px auto"],
  [style*="max-width: 1280px"][style*="margin: 0px auto"],
  [style*="max-width: 1300px"], [style*="max-width:1300px"],
  [style*="max-width: 1340px"], [style*="max-width:1340px"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Panels. These are single-value shorthands, so replacing them is lossless. */
  [style*="padding: 30px"] { padding: 18px !important; }
  [style*="padding: 28px"] { padding: 18px !important; }
  [style*="padding: 26px"] { padding: 17px !important; }
  [style*="padding: 24px"] { padding: 16px !important; }
  [style*="padding: 22px"] { padding: 16px !important; }

  /* Multi-value paddings that are generous on the sides. */
  [style*="padding: 30px 28px 32px"] { padding: 20px 16px 22px !important; }
  [style*="padding: 26px 28px 30px"] { padding: 18px 16px 20px !important; }
  [style*="padding: 24px 22px 22px"] { padding: 17px 16px 16px !important; }
  [style*="padding: 24px 22px"]      { padding: 17px 16px !important; }
  [style*="padding: 20px 22px"]      { padding: 16px !important; }
  [style*="padding: 20px 24px"]      { padding: 16px !important; }
  [style*="padding: 36px 22px"]      { padding: 24px 16px !important; }

  /* The portal page shells: keep the top air, drop the sides. Last, because a
     shell written as `30px 28px 90px` also matches the single-value
     `padding: 30px` rule above and must out-order it. */
  [style*="padding: 30px 28px 90px"], [style*="padding:30px 28px 90px"],
  [style*="padding: 32px 28px 90px"], [style*="padding:32px 28px 90px"],
  [style*="padding: 34px 28px 90px"], [style*="padding:34px 28px 90px"] {
    padding: 18px 16px 40px !important;
  }
}


/* --------------------------------------------------------------------------
   3. Type
   The design leans on 10-12.5px uppercase labels, which is a desktop reading
   distance. Lift the floor a point at a time so the hierarchy survives.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  [style*="font-size: 10px"],
  [style*="font-size: 10.5px"] { font-size: 11.5px !important; }
  [style*="font-size: 11px"],
  [style*="font-size: 11.5px"] { font-size: 12.5px !important; }
  [style*="font-size: 12px"],
  [style*="font-size: 12.5px"] { font-size: 13px !important; }

  /* Tracked uppercase at those sizes eats width the screen does not have. */
  [style*="letter-spacing: 0.24em"] { letter-spacing: .15em !important; }
  [style*="letter-spacing: 0.22em"] { letter-spacing: .14em !important; }
  [style*="letter-spacing: 0.2em"]  { letter-spacing: .13em !important; }

  /* Serif body copy is set for a wide column. */
  [style*="Source Serif"] { line-height: 1.68 !important; }

  /* Balancing a headline reads as ragged once it is three words per line. */
  h1, h2, h3 { text-wrap: pretty; }
}


/* --------------------------------------------------------------------------
   4. Touch
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  /* Icon-only controls are drawn as 28-40px squares. Under 44px is a
     mis-tap. Only interactive elements are lifted, so the identically sized
     decorative tiles sitting next to them keep the size they were drawn at. */
  a[style*="width: 40px"], button[style*="width: 40px"],
  a[style*="width: 38px"], button[style*="width: 38px"],
  a[style*="width: 36px"], button[style*="width: 36px"],
  a[style*="width: 34px"], button[style*="width: 34px"],
  a[style*="width: 32px"], button[style*="width: 32px"],
  a[style*="width: 30px"], button[style*="width: 30px"],
  a[style*="width: 28px"], button[style*="width: 28px"] {
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* Kill the 300ms wait and the double-tap-to-zoom gesture on controls. */
  a, button, [role="button"], summary, label[for], input, select, textarea {
    touch-action: manipulation;
  }

  input[type="checkbox"], input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    flex: none;
  }

  /* Hover never fires on touch — it only sticks after a tap, leaving the
     element looking permanently pressed. Drop the movement, keep the colour. */
  .fchl-card:hover { transform: none; }
  .hd-cta:hover { transform: none; box-shadow: 0 10px 24px -12px rgba(20, 69, 126, .85); }

  /* Give the finger something back instead. */
  button:active, [role="button"]:active,
  a[style*="background: rgb(20, 69, 126)"]:active,
  a[style*="background: rgb(10, 22, 28)"]:active,
  a[style*="background: rgb(242, 199, 91)"]:active {
    transform: scale(.985);
    transition-duration: .06s;
  }

  a, button, summary, label[for], [role="button"] {
    -webkit-tap-highlight-color: rgba(20, 69, 126, .10);
  }
}


/* --------------------------------------------------------------------------
   5. Layout
   The auto-fit grids in this codebase already collapse on their own. These
   are the ones that cannot: fixed column counts, and the two-track sidebar
   form that repeat(auto-fit, …) silently freezes at two columns.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  [style*="grid-template-columns: repeat(3,"],
  [style*="grid-template-columns: repeat(2,"],
  [style*="grid-template-columns: repeat(6,"],
  [style*="grid-template-columns: minmax(240px,"],
  [style*="grid-template-columns: minmax(240px"],
  [style*="grid-template-columns: minmax(0px, 2.1fr)"],
  [style*="grid-template-columns:repeat(3,"],
  [style*="grid-template-columns:repeat(2,"],
  [style*="grid-template-columns:repeat(6,"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* `repeat(auto-fit, A B)` is not a collapsing grid — auto-fit takes one
     track size, so the two-minmax form resolves to two fixed columns and
     pushes the page sideways. Match that signature and stack it. */
  [style*="px), minmax(min(100%,"],
  [style*="px) minmax(min(100%,"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Rails of small tiles: two across reads better than three squeezed. */
  [style*="minmax(min(100%, 150px)"],
  [style*="minmax(min(100%, 148px)"],
  [style*="minmax(150px,"], [style*="minmax(155px,"], [style*="minmax(105px,"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 480px) {
  /* Once a tile carries a number and a label, even two across is too many. */
  [style*="minmax(min(100%, 150px)"],
  [style*="minmax(min(100%, 148px)"],
  [style*="minmax(150px,"], [style*="minmax(155px,"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Gaps scale with the space they are dividing. */
  [style*="gap: 26px"], [style*="gap: 24px"] { gap: 16px !important; }
  [style*="gap: 20px"] { gap: 14px !important; }
}


/* --------------------------------------------------------------------------
   5b. Sticky rails
   services.html and about.html put a sticky picker in the first grid track.
   Two things went wrong with it.

   The `top` was a hard-coded guess at the header height — 104px and 110px
   against a bar that measures 146px on a desktop and 109px on a phone — so it
   pinned *underneath* the header on the wide end. That is fixed at source:
   both now read the height SiteHeader publishes as --hd-h.

   The second fault is here. Once the grid collapses, the rail is no longer a
   rail: it is a full-width block, 575px of an 844px screen, and sticky made
   it a lid that covered the article the whole way down the scroll. A sidebar
   that is no longer beside anything must not be pinned to anything.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .fchl-sticky-rail { position: static !important; }
}

/* Even beside its content, a rail taller than the space under the header
   cannot be fully reached while it is pinned — the last items sit below the
   fold with nothing to scroll them into view. Cap it and let it scroll
   inside itself. Short laptop windows hit this as readily as phones do. */
@media (min-width: 901px) {
  .fchl-sticky-rail {
    max-height: calc(100dvh - var(--hd-h, 128px) - 28px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
}


/* --------------------------------------------------------------------------
   6. Forms
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* Below 16px, iOS Safari zooms the page on focus and never zooms back.
     This one line is the most common reason a mobile form feels broken. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea { font-size: 16px !important; }

  /* Resetting appearance on a checkbox or a radio erases the control itself,
     so the reset is for text-like fields only. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  textarea { -webkit-appearance: none; appearance: none; }

  input:not([type="checkbox"]):not([type="radio"]),
  select, textarea { border-radius: 4px; }

  /* A field a thumb can land on without aiming. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select { min-height: 48px; }
  textarea { min-height: 104px; }

  /* Resetting appearance takes the native chevron with it. */
  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235B6B73' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px !important;
  }
}

@media (max-width: 560px) {
  /* A phone is one column. A row of actions that squeezes to fit is just a
     row of smaller targets, so let each action take the full width. */
  [style*="display: flex"][style*="flex-wrap: wrap"] > a[style*="padding: 11px 18px"],
  [style*="display: flex"][style*="flex-wrap: wrap"] > button[style*="padding: 11px 18px"],
  [style*="display: flex"][style*="flex-wrap: wrap"] > a[style*="padding: 13px 20px"],
  [style*="display: flex"][style*="flex-wrap: wrap"] > button[style*="padding: 13px 20px"],
  [style*="display: flex"][style*="flex-wrap: wrap"] > a[style*="padding: 14px 20px"],
  [style*="display: flex"][style*="flex-wrap: wrap"] > button[style*="padding: 14px 20px"],
  [style*="display: flex"][style*="flex-wrap: wrap"] > a[style*="padding: 15px 22px"],
  [style*="display: flex"][style*="flex-wrap: wrap"] > button[style*="padding: 15px 22px"] {
    flex: 1 1 100% !important;
    justify-content: center !important;
  }

  /* The submit button on every portal form. */
  button[style*="background: rgb(20, 69, 126)"][style*="justify-content: center"] {
    width: 100%;
    min-height: 52px;
  }
}


/* --------------------------------------------------------------------------
   7. Overlays
   A centred dialog on a phone is a small box floating in a large dark field
   with its actions stranded mid-screen, out of thumb reach. Every
   full-viewport overlay becomes a bottom sheet.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  [style*="position: fixed"][style*="inset: 0"][style*="place-items: center"],
  [style*="position: fixed"][style*="inset: 0"][style*="align-items: center"] {
    align-items: flex-end !important;
    place-items: end stretch !important;
    padding: 0 !important;
  }

  [style*="position: fixed"][style*="inset: 0"][style*="place-items: center"] > *,
  [style*="position: fixed"][style*="inset: 0"][style*="align-items: center"] > * {
    width: 100% !important;
    max-width: none !important;
    max-height: 88dvh !important;
    margin: 0 !important;
    border-radius: 14px 14px 0 0 !important;
    padding-bottom: calc(18px + var(--fchl-safe-b)) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: fchlSheetUp .26s cubic-bezier(.22, 1, .36, 1) both !important;
  }

  /* The grab handle that tells a thumb this can be pushed back down. */
  [style*="position: fixed"][style*="inset: 0"][style*="place-items: center"] > *::before,
  [style*="position: fixed"][style*="inset: 0"][style*="align-items: center"] > *::before {
    content: "";
    display: block;
    flex: none;
    width: 38px;
    height: 4px;
    margin: 2px auto 12px;
    border-radius: 99px;
    background: rgba(10, 22, 28, .18);
  }
}

@keyframes fchlSheetUp {
  from { transform: translateY(16%); opacity: .4; }
  to   { transform: none; opacity: 1; }
}


/* --------------------------------------------------------------------------
   8. Docked things
   The launcher, the message dock and the admin toast are pinned with raw
   bottom values, so on the portal they sat under the tab bar and on an
   iPhone they sat under the home indicator. Re-pin them all to one variable.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .cw { bottom: var(--fchl-dock-b) !important; }
  /* vh again: on a phone the panel was sized against the retracted-chrome
     height, so its composer sat below the fold as soon as the bar came back. */
  .cw-panel { max-height: min(600px, 72dvh) !important; }
}

/* The public header's menu is a full-screen panel, but the launcher is pinned
   above it and stayed clickable over the navigation. Anything docked hides
   while that panel is open. */
@media (max-width: 1120px) {
  body:has(.hd-root[data-open="true"]) .cw { display: none !important; }
}

@media (max-width: 640px) {
  /* Dashboard's message dock: a 372px panel on a 390px screen is a full-width
     panel with a 9px margin pretending otherwise. Make it a real sheet. */
  div[style*="position: fixed"][style*="left: 22px"][style*="bottom: 22px"] {
    left: 10px !important;
    right: 10px !important;
    bottom: var(--fchl-dock-b) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(72dvh, calc(100dvh - var(--pn-h, 76px) - var(--fchl-dock-b) - 16px)) !important;
  }

  /* Its launcher is the opposite case: a full-width bar for one short label
     is a wall across the page. Keep it compact and move it to the right
     gutter, where the site's other launcher already lives and where nothing
     is competing for the space. */
  button[style*="position: fixed"][style*="left: 22px"][style*="bottom: 22px"] {
    left: auto !important;
    right: 14px !important;
    bottom: var(--fchl-dock-b) !important;
    padding: 13px 16px !important;
    font-size: 14px;
    box-shadow: 0 14px 30px -12px rgba(10, 22, 28, .65) !important;
  }

  /* Admin's centred toast. */
  [style*="position: fixed"][style*="left: 50%"][style*="bottom: 24px"] {
    left: 12px !important;
    right: 12px !important;
    bottom: var(--fchl-dock-b) !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
    text-align: center;
  }
}


/* --------------------------------------------------------------------------
   9. Scrollers
   Content that genuinely cannot stack — CSV previews, the admin ledger,
   filter rails — should swipe cleanly and say so at its edge.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  [style*="overflow-x: auto"], [style*="overflow-x:auto"],
  .vw-scroll, .ac-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* A cut-off column should read as "there is more", not as a fault. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }

  table { font-size: 13px; }
  table th, table td { padding: 9px 11px !important; }

  /* An 11px scrollbar track is a fifth of the height of a small card. */
  ::-webkit-scrollbar { width: 4px; height: 4px; }
  ::-webkit-scrollbar-thumb {
    border: 0;
    border-radius: 99px;
    background: rgba(20, 69, 126, .35);
  }
}


/* --------------------------------------------------------------------------
   10. Performance
   The grain, the vignette and the backdrop blurs are fixed, full-viewport
   layers that are recomposited on every scroll frame. On a phone they are the
   difference between a smooth scroll and a visibly torn one, and none of them
   are legible at this size anyway.
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
  body::before, body::after { display: none !important; }

  [style*="backdrop-filter"] {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* Those bars were translucent because they were blurred. Without the blur
     they have to be opaque, or the page scrolls visibly through them. */
  .hd-bar { background: #FBFAF7 !important; }
  .pn-bar { background: #fff !important; }

  /* The engraved arc field behind the inner-page heroes. */
  section[id="main"][style*="rgb(10, 22, 28)"]::after { display: none !important; }
}

/* Scroll-reveal is a desktop pleasure. On a short viewport it mostly reads as
   content arriving late. */
@media (max-width: 640px) {
  [data-fchl-reveal] { opacity: 1 !important; transform: none !important; }
}


/* --------------------------------------------------------------------------
   11. Landscape, and the small end
   -------------------------------------------------------------------------- */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  /* A phone on its side has about 330px of height. Sticky chrome cannot have
     a third of it. */
  .pn-root, .hd-root { position: static !important; }
  .pn-tabbar { position: static !important; }
  html[data-pn-tabbar="on"] { --fchl-tab-h: 0px; }
}

@media (max-width: 360px) {
  /* iPhone SE, older Androids, and any phone with the system font scaled up. */
  [style*="max-width: 1300px"], [style*="max-width: 1340px"] {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }
  h1 { letter-spacing: -.015em !important; }
}


/* --------------------------------------------------------------------------
   12. Print — a phone's "share as PDF" path
   -------------------------------------------------------------------------- */
@media print {
  .pn-tabbar, .cw, [data-fchl-noprint] { display: none !important; }
}


/* --------------------------------------------------------------------------
   13. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [style*="position: fixed"][style*="inset: 0"] > * { animation: none !important; }
}