/* ==========================================================================
   Financial Claims Helpline — "Ledger & Vault" design system
   --------------------------------------------------------------------------
   Loaded last in every <helmet>, so it refines the per-page inline styles
   rather than replacing them. Inline styles still win on individual
   properties; this layer owns everything the markup does not set:
   texture, depth, focus, rhythm, motion and typographic detail.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Ink — the near-black the brand sits on */
  --fchl-ink-900: #060F14;
  --fchl-ink-800: #0A161C;
  --fchl-ink-700: #101D23;
  --fchl-ink-600: #26353C;
  --fchl-ink-400: #5B6B73;
  --fchl-ink-300: #8A979D;

  /* Navy — the working colour: links, primary actions, structure */
  --fchl-navy-900: #0A2547;
  --fchl-navy-800: #0E3260;
  --fchl-navy-600: #14457E;
  --fchl-navy-400: #3A6BA5;
  --fchl-navy-100: rgba(20, 69, 126, .08);

  /* Gold — the accent. Used sparingly, always as emphasis */
  --fchl-gold-600: #9A6A22;
  --fchl-gold-500: #D9A93F;
  --fchl-gold-400: #F2C75B;
  --fchl-gold-200: #FFEBB0;
  --fchl-gold-050: rgba(242, 199, 91, .12);

  /* Paper — warm, slightly aged stock */
  --fchl-paper-000: #FFFFFF;
  --fchl-paper-100: #FBFAF7;
  --fchl-paper-200: #F7F5F0;
  --fchl-paper-300: #EFEBE3;
  --fchl-paper-400: #E3DED4;

  /* Signal */
  --fchl-mint: #6FCB9F;
  --fchl-rust: #C4573B;

  /* Type */
  --fchl-display: 'Archivo Narrow', 'Archivo', system-ui, sans-serif;
  --fchl-sans: 'Archivo', system-ui, sans-serif;
  --fchl-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* Elevation — warm-tinted, layered, never a flat grey blur */
  --fchl-lift-1: 0 1px 2px rgba(10, 22, 28, .05), 0 2px 6px -2px rgba(10, 22, 28, .07);
  --fchl-lift-2: 0 2px 4px rgba(10, 22, 28, .05), 0 10px 24px -12px rgba(10, 22, 28, .18);
  --fchl-lift-3: 0 4px 8px rgba(10, 22, 28, .06), 0 24px 48px -24px rgba(10, 22, 28, .30);
  --fchl-lift-4: 0 8px 16px rgba(10, 22, 28, .07), 0 48px 88px -40px rgba(10, 22, 28, .42);

  /* Motion — one family of curves, used everywhere */
  --fchl-ease: cubic-bezier(.22, 1, .36, 1);
  --fchl-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --fchl-fast: .18s;
  --fchl-mid: .34s;
  --fchl-slow: .68s;

  /* Rhythm */
  --fchl-gutter: clamp(20px, 4vw, 28px);
  --fchl-measure: 66ch;
}

/* --------------------------------------------------------------------------
   2. Typographic foundation
   Variable-font axes the original markup never switched on: optical sizing
   on the serif, and proper figure sets per context.
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-optical-sizing: auto;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Serif body copy reads as set text, not as a web default. */
[style*="Source Serif"] {
  font-optical-sizing: auto;
  font-feature-settings: "liga" 1, "kern" 1, "onum" 0;
  letter-spacing: .002em;
}

/* Archivo Narrow is set uppercase almost everywhere in this site. Uppercase
   at display size needs less tracking than the markup asks for, and small
   uppercase needs more — the markup can't tell the difference, so correct it
   optically here. */
h1[style*="Archivo Narrow"],
h2[style*="Archivo Narrow"] {
  font-variant-numeric: lining-nums;
  -webkit-hyphens: none;
  hyphens: none;
}

/* Numerals in stat blocks must never jitter as they animate or update. */
[style*="font-variant-numeric"],
[style*="tabular-nums"] {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Headline and paragraph wrapping — avoids orphans the markup can't predict */
h1, h2, h3 { text-wrap: balance; }
p, li, blockquote { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   3. Atmosphere — paper grain and vignette
   A fixed, non-interactive pair of overlays. This is what stops the large
   flat fills reading as flat fills.
   -------------------------------------------------------------------------- */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483000;
}

/* Fine grain — fractal noise, tuned low enough to feel like stock, not static.
   `overlay` is deliberate: it darkens the paper pages and lightens the ink
   ones from the same single layer, so both surfaces get real tooth. */
body::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .055;
  mix-blend-mode: overlay;
}

/* Warm vignette — pulls the eye to the centre column */
body::after {
  background:
    radial-gradient(140% 100% at 50% -10%, transparent 52%, rgba(10, 22, 28, .05) 100%),
    radial-gradient(120% 90% at 50% 110%, transparent 58%, rgba(10, 22, 28, .045) 100%);
}

@media print {
  body::before,
  body::after { display: none; }
}

/* --------------------------------------------------------------------------
   4. Surface texture
   Large dark panels get an engraved hairline grid; large paper panels get a
   faint ledger rule. Both are drawn behind content, both are decorative.
   -------------------------------------------------------------------------- */
section[style*="rgb(10, 22, 28)"],
div[style*="background: rgb(10, 22, 28)"] {
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, .022) 0 1px,
      transparent 1px 4px
    );
  background-blend-mode: overlay;
}

/* Inner-page heroes are a single left column on a wide dark band, which
   leaves the right two-thirds empty. Give that field structure: engraved
   concentric arcs rising out of the corner, and a horizon hairline. Purely
   decorative, drawn behind the content, and skipped on the homepage (whose
   hero draws its own trail). */
section[id="main"][style*="rgb(10, 22, 28)"]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-radial-gradient(
      circle at 92% 132%,
      transparent 0 86px,
      rgba(242, 199, 91, .17) 86px 87.2px
    );
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, transparent 34%, #000 74%),
    linear-gradient(to bottom, transparent 0, #000 42%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, transparent 34%, #000 74%),
    linear-gradient(to bottom, transparent 0, #000 42%);
  mask-composite: intersect;
}
section[id="main"][style*="rgb(10, 22, 28)"]:has(.hero-trail)::after { display: none; }

/* --------------------------------------------------------------------------
   5. Focus — a two-ring system, legible on paper and on ink
   -------------------------------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fchl-navy-600);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(20, 69, 126, .16);
  border-radius: 2px;
}

/* Inside dark panels the navy ring disappears — switch to gold. */
[style*="rgb(10, 22, 28)"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
[style*="rgb(6, 15, 20)"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline-color: var(--fchl-gold-400);
  box-shadow: 0 0 0 5px rgba(242, 199, 91, .22);
}

/* Never show the ring for pointer users who merely clicked. */
:where(a, button):focus:not(:focus-visible) { outline: none; }

/* --------------------------------------------------------------------------
   6. Selection, caret, scrollbar — the small surfaces most sites forget
   -------------------------------------------------------------------------- */
::selection {
  background: rgba(242, 199, 91, .45);
  color: var(--fchl-ink-800);
  text-shadow: none;
}

input, textarea, select { caret-color: var(--fchl-navy-600); }
[style*="rgb(10, 22, 28)"] input,
[style*="rgb(10, 22, 28)"] textarea { caret-color: var(--fchl-gold-400); }

* { scrollbar-width: thin; scrollbar-color: rgba(20, 69, 126, .34) transparent; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(20, 69, 126, .30);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(20, 69, 126, .55); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* --------------------------------------------------------------------------
   7. Motion library
   Shared keyframes. Page markup references these by name; keeping them in one
   place means every page animates on the same curve and the same clock.
   -------------------------------------------------------------------------- */
@keyframes fchlPulse  { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
@keyframes fchlUp     { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes fchlRise   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fchlPop    { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fchlSheen  { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
@keyframes fchlTrace  { to { stroke-dashoffset: 0; } }
@keyframes fchlDot    { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes fchlFade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fchlDrift  { 0% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-14px,0); } 100% { transform: translate3d(0,0,0); } }
@keyframes fchlScan   { 0% { transform: translateY(-100%); } 100% { transform: translateY(400%); } }
@keyframes fchlGlow   { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }

/* --------------------------------------------------------------------------
   8. Interaction physics
   Anything the markup marked as interactive but left without a transition
   gets the house curve, so nothing on the site snaps.
   -------------------------------------------------------------------------- */
a, button, summary, [role="button"], label[for] {
  -webkit-tap-highlight-color: rgba(20, 69, 126, .12);
}

a[style*="background: rgb(20, 69, 126)"],
a[style*="background: rgb(242, 199, 91)"],
button[style*="background: rgb(20, 69, 126)"],
button[style*="background: rgb(242, 199, 91)"] {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* A single light sweep across primary actions on hover. Purely additive:
   it is drawn in a pseudo-element, so no inline property is contested. */
a[style*="background: rgb(20, 69, 126)"]::after,
button[style*="background: rgb(20, 69, 126)"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .20) 48%, transparent 66%);
  background-size: 260% 100%;
  background-position: 130% 0;
  transition: background-position .62s var(--fchl-ease);
  pointer-events: none;
}
a[style*="background: rgb(20, 69, 126)"]:hover::after,
button[style*="background: rgb(20, 69, 126)"]:hover::after { background-position: -30% 0; }

/* Prose links get a real underline that grows from the leading edge. */
p a:not([style*="background"]),
li a:not([style*="background"]) {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size var(--fchl-mid) var(--fchl-ease), color var(--fchl-fast) ease;
  padding-bottom: 1px;
}
p a:not([style*="background"]):hover,
li a:not([style*="background"]):hover { background-size: 100% 1px; }

/* --------------------------------------------------------------------------
   9. Form surfaces
   -------------------------------------------------------------------------- */
input, select, textarea, button { font: inherit; color: inherit; }

input::placeholder,
textarea::placeholder {
  color: var(--fchl-ink-300);
  opacity: 1;
}
[style*="rgb(10, 22, 28)"] input::placeholder,
[style*="rgb(10, 22, 28)"] textarea::placeholder { color: rgba(255, 255, 255, .42); }

textarea { resize: vertical; }

/* Kill the browser's yellow autofill wash — it destroys the palette. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--fchl-ink-700);
  -webkit-box-shadow: 0 0 0 1000px var(--fchl-paper-100) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* Number inputs: no spinners, they break the tabular alignment. */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --------------------------------------------------------------------------
   10. Media
   -------------------------------------------------------------------------- */
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
svg { flex: none; }

/* --------------------------------------------------------------------------
   11. Component classes
   Used by the rewritten shared chrome (SiteHeader / SiteFooter). Everything
   here is opt-in by class, so it cannot disturb existing pages.
   -------------------------------------------------------------------------- */

/* Eyebrow: small uppercase label with a leading rule */
.fchl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fchl-display);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.fchl-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  opacity: .55;
  flex: none;
}

/* Hairline rule with a gold tick at the start — the site's structural motif */
.fchl-rule {
  position: relative;
  height: 1px;
  background: currentColor;
  opacity: .16;
}
.fchl-rule::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 46px;
  height: 3px;
  background: var(--fchl-gold-400);
  opacity: 1;
}

/* Nav link: underline wipes in from the left, gold, on the baseline */
.fchl-nav-link {
  position: relative;
  display: inline-block;
  transition: color var(--fchl-fast) ease;
}
.fchl-nav-link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 4px;
  height: 2px;
  background: var(--fchl-gold-400);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--fchl-mid) var(--fchl-ease);
}
.fchl-nav-link:hover::after,
.fchl-nav-link:focus-visible::after { transform: scaleX(1); }
.fchl-nav-link[data-active="true"]::after { transform: scaleX(1); }

/* Card lift */
.fchl-card {
  transition:
    transform var(--fchl-mid) var(--fchl-ease),
    box-shadow var(--fchl-mid) var(--fchl-ease),
    border-color var(--fchl-mid) var(--fchl-ease);
  will-change: transform;
}
.fchl-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--fchl-lift-3) !important;
}

/* Account and content surfaces share one quiet edge treatment. The radius is
   deliberately small so the ledger-like visual language stays intact. */
.fchl-surface {
  border-radius: 3px;
  background-clip: padding-box;
  box-shadow: var(--fchl-lift-1) !important;
  overflow: hidden;
}
.fchl-surface--raised { box-shadow: var(--fchl-lift-3) !important; }

/* Empty collections should read as intentional states, not unfinished cards. */
.fchl-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 30px 22px;
  text-align: center;
  color: var(--fchl-ink-400);
}
.fchl-empty-state--compact { min-height: 158px; padding: 24px 18px; }
.fchl-empty-state__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  color: var(--fchl-navy-600);
  border: 1px solid rgba(20, 69, 126, .20);
  background: linear-gradient(145deg, rgba(20, 69, 126, .08), rgba(242, 199, 91, .08));
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .72);
}
.fchl-empty-state strong {
  color: var(--fchl-ink-700);
  font-family: var(--fchl-display);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}
.fchl-empty-state > span:last-child {
  max-width: 36ch;
  font-size: 13px;
  line-height: 1.55;
}

/* Form controls and disabled actions get the same final-state details across
   public forms, the client portal, and modal workflows. */
:where(input, select, textarea) {
  border-radius: 2px;
  transition:
    border-color var(--fchl-fast) ease,
    background-color var(--fchl-fast) ease,
    box-shadow var(--fchl-fast) ease;
}
:where(input, select, textarea):hover:not(:disabled):not(:focus) {
  border-color: rgba(20, 69, 126, .34) !important;
}
:where(button, input, select, textarea):disabled {
  cursor: not-allowed !important;
  opacity: .56;
}

/* Scroll-reveal contract used by the shared reveal observer */
[data-fchl-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--fchl-slow) var(--fchl-ease),
    transform var(--fchl-slow) var(--fchl-ease);
}
[data-fchl-reveal="in"] {
  opacity: 1;
  transform: none;
}

/* Screen-reader-only, for the skip link and icon-only controls */
.fchl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — appears only on keyboard focus */
.fchl-skip {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -140%);
  z-index: 2147483100;
  padding: 12px 22px;
  background: var(--fchl-navy-600);
  color: #fff;
  font-family: var(--fchl-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  box-shadow: var(--fchl-lift-3);
  transition: transform var(--fchl-mid) var(--fchl-ease);
}
.fchl-skip:focus { transform: translate(-50%, 0); color: #fff; }

/* --------------------------------------------------------------------------
   12. Responsive corrections
   The layouts are inline and mostly fluid; these fix the places where a
   fixed inline value is too generous on a small screen.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  /* 1300px is the public shell, 1340px the client-portal shell — both hard-code
     a 28px inline gutter that is too generous below a phablet. */
  [style*="max-width: 1300px"],
  [style*="max-width: 1340px"] {
    padding-left: var(--fchl-gutter) !important;
    padding-right: var(--fchl-gutter) !important;
  }
  h1[style*="Archivo Narrow"] { letter-spacing: -.01em; }
}

/* Sidebar-plus-main grids in the markup are written as
   `repeat(auto-fit, minmax(…) minmax(…))`. A repeat(auto-fit, …) takes a
   single track size, so that two-track form never collapses — it resolves to
   two fixed columns and pushes the page sideways on a phone. Match the
   two-adjacent-minmax signature and stack it. */
@media (max-width: 760px) {
  [style*="px) minmax(min(100%,"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 460px) {
  body { font-size: 15.5px; }
}

/* --------------------------------------------------------------------------
   13. Accessibility and output
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-fchl-reveal] { opacity: 1; transform: none; }
}

@media (prefers-contrast: more) {
  :root { --fchl-navy-600: #0A2547; }
  [style*="rgba(255, 255, 255, 0.6"] { color: rgba(255, 255, 255, .86) !important; }
}

@media print {
  html, body { background: #fff !important; }
  nav, .fchl-skip, [data-fchl-noprint] { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
  * { box-shadow: none !important; }
}