/* ===========================================================================
   GENI CreditRead AI - design system
   ---------------------------------------------------------------------------
   Structure, spacing, elevation and component shapes are adapted from the BRIX
   Templates dashboard + chart kits (Figma Community, Freebie Licence). Colour
   is NOT: both kits are indigo/purple and have been fully replaced by the
   CreditRead brand blues sampled from the product logo. The original kit files
   live in /design and never ship - the licence permits adapting the design,
   not redistributing the source.

   Every screen reads from this file. Changing the brand is an edit here, not a
   sweep through components.
   =========================================================================== */

:root{
  /* -- brand, sampled from the logo ------------------------------------- */
  --brand-900:#071A46; --brand-800:#102A72; --brand-700:#0D55C7;
  --brand-600:#1570EF; --brand-500:#2E90FA; --brand-400:#19B7E8;
  --brand-300:#6FD4F2; --brand-200:#B9E2FF; --brand-100:#EAF2FE; --brand-50:#F2F7FE;
  --accent:#18BCEB;

  /* -- neutrals: near-neutral greys, biased a few degrees toward the blue - */
  --g900:#0B1C3D; --g800:#182A4D; --g700:#344054; --g600:#475467;
  --g500:#667085; --g400:#98A2B3; --g300:#D0D5DD; --g200:#EAECF0;
  --g100:#F2F4F7; --g50:#F9FAFB;
  --page:#F8F9FC; --card:#FFFFFF; --rail:#FFFFFF;

  /* -- semantic: separate from the accent, never used as decoration ------ */
  --ok:#12B76A;  --ok-bg:#ECFDF3;  --ok-bd:#A6F4C5;  --ok-tx:#027A48;
  --wa:#F79009;  --wa-bg:#FFFAEB;  --wa-bd:#FEDF89;  --wa-tx:#B54708;
  --er:#F04438;  --er-bg:#FEF3F2;  --er-bd:#FECDCA;  --er-tx:#B42318;
  --un:#9E77ED;  --un-bg:#F4EBFF;  --un-bd:#D6BBFB;  --un-tx:#6941C6;
  --nu-bg:#F2F4F7; --nu-tx:#475467;

  /* -- score bands (gauge) ---------------------------------------------- */
  --band-poor:#FB6D7E; --band-fair:#FBA9B6; --band-good:#FBE04D; --band-exc:#6FDD8B;

  /* -- payment / DPD ramp ------------------------------------------------
     Ramped by LIGHTNESS, not hue: on-time is lightest, written-off darkest,
     descending monotonically. Roughly 1 in 12 men cannot separate red from
     green, and they are a large share of the people who read credit reports.
     In greyscale, or to a fully colour-blind reader, the grid still reads.
     Hue is the second signal, never the only one. ------------------------ */
  --d0:#D1FADF; --d1:#FEF0C7; --d2:#FEDF89; --d3:#FDB022;
  --d4:#F04438; --d5:#B42318; --d6:#912018; --d7:#7A271A;
  --dn:#EAECF0;   /* not reported */
  --dx:#F7F9FC;   /* account not open */
  --du:#EBE4FF;   /* code not recognised */

  /* -- categorical series: adjacent entries differ in lightness AND hue -- */
  --s1:#1570EF; --s2:#18BCEB; --s3:#9E77ED; --s4:#F79009;
  --s5:#12B76A; --s6:#EE46BC; --s7:#102A72; --s8:#6FD4F2;

  /* -- elevation, radius, motion ---------------------------------------- */
  --sh-xs:0 1px 2px rgba(16,24,40,.05);
  --sh:0 1px 3px rgba(16,24,40,.05),0 1px 2px rgba(16,24,40,.04);
  --sh-md:0 4px 14px rgba(16,24,40,.07);
  --sh-lg:0 18px 44px rgba(16,24,40,.12);
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;
  --ease:cubic-bezier(.22,.7,.3,1);
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --g900:#F0F4FA; --g800:#DCE4F1; --g700:#CBD5E6; --g600:#A8B5CC;
    --g500:#8895AE; --g400:#6E7D99; --g300:#3A465F; --g200:#26324A;
    --g100:#1C2739; --g50:#161F2E;
    --page:#0A1120; --card:#111C30; --rail:#0D1627;
    --brand-100:#152A4A; --brand-200:#1B3A6B; --brand-50:#111F38;
    --ok-bg:#0B2B1D; --ok-bd:#18543A; --ok-tx:#6CE9A6;
    --wa-bg:#2B2110; --wa-bd:#6A5216; --wa-tx:#FDB022;
    --er-bg:#31130F; --er-bd:#7A2B22; --er-tx:#FDA29B;
    --un-bg:#241C42; --un-bd:#4A357F; --un-tx:#C3A6F7;
    --nu-bg:#1C2739; --nu-tx:#A8B5CC;
    --dn:#26324A; --dx:#18223A; --du:#2C2450;
    --sh-xs:0 1px 2px rgba(0,0,0,.4);
    --sh:0 1px 3px rgba(0,0,0,.45); --sh-md:0 4px 14px rgba(0,0,0,.5);
    --sh-lg:0 18px 44px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --g900:#F0F4FA; --g800:#DCE4F1; --g700:#CBD5E6; --g600:#A8B5CC;
  --g500:#8895AE; --g400:#6E7D99; --g300:#3A465F; --g200:#26324A;
  --g100:#1C2739; --g50:#161F2E;
  --page:#0A1120; --card:#111C30; --rail:#0D1627;
  --brand-100:#152A4A; --brand-200:#1B3A6B; --brand-50:#111F38;
  --ok-bg:#0B2B1D; --ok-bd:#18543A; --ok-tx:#6CE9A6;
  --wa-bg:#2B2110; --wa-bd:#6A5216; --wa-tx:#FDB022;
  --er-bg:#31130F; --er-bd:#7A2B22; --er-tx:#FDA29B;
  --un-bg:#241C42; --un-bd:#4A357F; --un-tx:#C3A6F7;
  --nu-bg:#1C2739; --nu-tx:#A8B5CC;
  --dn:#26324A; --dx:#18223A; --du:#2C2450;
  --sh-xs:0 1px 2px rgba(0,0,0,.4);
  --sh:0 1px 3px rgba(0,0,0,.45); --sh-md:0 4px 14px rgba(0,0,0,.5);
  --sh-lg:0 18px 44px rgba(0,0,0,.6);
}

/* ===========================  base  ====================================== */
*{box-sizing:border-box}
/* A class that sets display beats the UA's [hidden] rule, so elements toggled
   with el.hidden stay visible. Make the attribute win. */
[hidden]{display:none!important}
html,body{height:100%}
/* The assistant drawer lives off-canvas at translateX(100%) and still counts
   toward scrollable overflow, so the page would scroll sideways to reach empty
   space. Clipping on the root is the fix; sticky still resolves against it.
   This is a backstop for off-canvas chrome, never a licence for a section to
   overflow - sections are tested separately for that. */
html{overflow-x:hidden}
body{margin:0;background:var(--page);color:var(--g900);font-size:14px;line-height:1.5;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.02em}
button,input,select{font-family:inherit}
.num{font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--g300);border-radius:99px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--g400);background-clip:content-box}

/* ===========================  shell  ==================================== */
.shell{display:flex;min-height:100%;max-width:100%}
.rail{width:248px;flex:0 0 248px;background:var(--rail);border-right:1px solid var(--g200);
  display:flex;flex-direction:column;padding:20px 16px;gap:20px;position:sticky;top:0;
  height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:0 6px}
/* The wordmark is CreditRead AI, in the three colours of the logo file:
   "Credit" near-black, "Read" brand blue, "AI" the lighter cyan accent. The
   gap before AI is a margin, not a space character, so the name can never
   break across two lines in a narrow rail. */
.brand b{font-size:16.5px;font-weight:800;letter-spacing:-.03em;color:var(--g900);
  white-space:nowrap}
.brand b i{font-style:normal;color:var(--brand-600)}
.brand b u{text-decoration:none;color:var(--s2);margin-left:.3em}
.navgrp{display:flex;flex-direction:column;gap:2px}
.navlbl{color:var(--g400);font-size:10px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;padding:6px 10px 6px}
.ni{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-sm);
  border:0;background:none;color:var(--g600);font-size:13.5px;font-weight:500;
  cursor:pointer;width:100%;text-align:left;transition:background .15s var(--ease),
  color .15s var(--ease)}
.ni:hover{background:var(--g50);color:var(--g900)}
.ni[aria-current="page"]{background:var(--brand-100);color:var(--brand-600);font-weight:600}
.ni svg{flex:0 0 18px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ni .ct{margin-left:auto;font-size:11px;font-weight:600;color:var(--g400);
  background:var(--g100);border-radius:var(--r-pill);padding:1px 7px}
.ni[aria-current="page"] .ct{background:var(--card);color:var(--brand-600)}
.sep{height:1px;background:var(--g200);margin:4px}
.rail .cta{margin-top:auto;background:var(--brand-700);color:#fff;border:0;
  border-radius:var(--r-sm);padding:11px;font-size:13.5px;font-weight:600;cursor:pointer}
.rail .cta:hover{background:var(--brand-600)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--card);border-bottom:1px solid var(--g200);padding:12px 24px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:sticky;
  top:0;z-index:20}
.crumb{font-size:14px;font-weight:600;color:var(--g700);white-space:nowrap}
.search{display:flex;align-items:center;gap:9px;border:1px solid var(--g300);
  border-radius:var(--r-pill);padding:8px 16px;background:var(--card);
  min-width:180px;flex:0 1 320px}
.search input{border:0;outline:0;background:none;font-size:13px;color:var(--g900);width:100%}
.search input::placeholder{color:var(--g400)}
/* wraps and shrinks: on a phone the chips otherwise sat in one unbreakable
   row and pushed the page wider than the screen */
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;justify-content:flex-end;min-width:0}
.chip{display:flex;gap:7px;border:1px solid var(--g300);border-radius:var(--r-pill);
  padding:6px 13px;font-size:12.5px;color:var(--g600);white-space:nowrap}
.chip b{color:var(--g900);font-weight:600}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--brand-100);
  color:var(--brand-600);font-weight:700;font-size:12.5px;display:grid;place-items:center}

/* Bottom padding clears the fixed assistant launcher, so the last card is
   never permanently half-covered by it. */
.page{padding:24px 24px 104px;display:flex;flex-direction:column;gap:18px;
  max-width:1560px;width:100%}
.phead{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.phead h1{font-size:23px;font-weight:700}
.phead p{margin:4px 0 0;color:var(--g500);font-size:13.5px}

/* ===========================  controls  ================================= */
.btn{border:1px solid var(--g300);background:var(--card);color:var(--g700);
  border-radius:var(--r-sm);padding:9px 15px;font-size:13.5px;font-weight:600;
  cursor:pointer;transition:border-color .15s var(--ease),color .15s var(--ease)}
.btn:hover{border-color:var(--brand-600);color:var(--brand-600)}
.btn.pri{background:var(--brand-700);border-color:var(--brand-700);color:#fff}
.btn.pri:hover{background:var(--brand-600);border-color:var(--brand-600)}
.btn.sm{padding:7px 12px;font-size:12.5px}
.drop{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--g300);
  border-radius:var(--r-pill);padding:7px 14px;font-size:12.5px;color:var(--g600);
  background:var(--card);cursor:pointer;white-space:nowrap}
.drop:hover{border-color:var(--brand-600);color:var(--brand-600)}
.seg{display:inline-flex;background:var(--g100);border-radius:var(--r-pill);padding:3px}
.seg button{border:0;background:none;color:var(--g600);font-size:12.5px;font-weight:600;
  padding:6px 15px;border-radius:var(--r-pill);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--brand-700);color:#fff}
.pills{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.pill{border:0;background:none;color:var(--g600);font-size:13px;font-weight:500;
  padding:7px 18px;border-radius:var(--r-pill);cursor:pointer}
.pill:hover{background:var(--g50)}
.pill[aria-pressed="true"]{background:var(--brand-700);color:#fff;font-weight:600}

/* ===========================  card  ===================================== */
.card{background:var(--card);border:1px solid var(--g200);border-radius:var(--r-lg);
  box-shadow:var(--sh);padding:22px 24px;min-width:0}
.card-hd{display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;flex-wrap:wrap}
.eyebrow{color:var(--g500);font-size:13px;display:block;margin-bottom:1px}
.card h2{font-size:18px;font-weight:700}
.card h3{font-size:15px;font-weight:700}
.rule{height:1px;background:var(--g200);margin:16px 0 20px}
.rule.tight{margin:14px 0}
.sub{color:var(--g500);font-size:12.5px;margin:3px 0 0}
.klegend{display:flex;gap:16px;flex-wrap:wrap}
.kl{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--g600)}
.kl i{width:9px;height:9px;border-radius:50%;flex:0 0 9px}

/* stat tiles - icon left, per the dashboard kit */
.tiles{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.tile{background:var(--card);border:1px solid var(--g200);border-radius:var(--r-lg);
  box-shadow:var(--sh);padding:18px;display:flex;gap:14px;align-items:center;min-width:0}
.tile .ic{width:44px;height:44px;border-radius:var(--r);background:var(--brand-100);
  display:grid;place-items:center;flex:0 0 44px}
.tile .ic svg{stroke:var(--brand-600);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.tile .lbl{color:var(--g500);font-size:13px;display:block}
.tile .vrow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:2px}
.tile .v{font-size:22px;font-weight:700;letter-spacing:-.025em}
.tile .dl{font-size:12px;font-weight:600}
.up{color:var(--ok-tx)} .down{color:var(--er-tx)} .flat{color:var(--g500)}

/* ===========================  badges  =================================== */
.badge{display:inline-block;border-radius:var(--r-pill);padding:3px 10px;
  font-size:11.5px;font-weight:600;white-space:nowrap}
.b-ok{background:var(--ok-bg);color:var(--ok-tx)}
.b-wa{background:var(--wa-bg);color:var(--wa-tx)}
.b-er{background:var(--er-bg);color:var(--er-tx)}
.b-un{background:var(--un-bg);color:var(--un-tx)}
.b-nu{background:var(--nu-bg);color:var(--nu-tx)}

/* ===========================  table  ==================================== */
.tbl-wrap{overflow-x:auto;margin:0 -24px}
.tbl{width:100%;border-collapse:collapse;min-width:680px}
.tbl th{background:var(--g50);font-size:10.5px;font-weight:600;color:var(--g500);
  letter-spacing:.05em;text-transform:uppercase;text-align:left;padding:11px 24px;
  border-top:1px solid var(--g200);border-bottom:1px solid var(--g200);white-space:nowrap}
.tbl td{padding:13px 24px;border-bottom:1px solid var(--g100);font-size:13px;color:var(--g600)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:var(--g50)}
.tbl td b{color:var(--g900);font-weight:600;display:block}
.tbl td small{color:var(--g500);font-size:11.5px}
.tbl .r{text-align:right;white-space:nowrap}

/* ===========================  lists  ==================================== */
.flags{display:flex;flex-direction:column;margin:0 -24px -22px}
.flag{display:flex;gap:13px;padding:14px 24px;border-top:1px solid var(--g100);
  align-items:flex-start}
.flag .dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px;margin-top:6px}
.flag b{display:block;font-size:13px;font-weight:600;color:var(--g900)}
.flag span{display:block;font-size:12px;color:var(--g500);margin-top:2px}
.lv-critical{background:var(--er)} .lv-warning{background:var(--wa)}
.lv-good{background:var(--ok)}     .lv-unknown{background:var(--un)}

/* horizontal meter rows (utilisation, distribution) */
.meters{display:flex;flex-direction:column;gap:16px}
.meter .top{display:flex;justify-content:space-between;gap:12px;font-size:13px;
  margin-bottom:7px}
.meter .top b{font-weight:600;color:var(--g900);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.meter .top span{color:var(--g600);font-weight:600;white-space:nowrap}
.meter .track{height:9px;border-radius:var(--r-pill);background:var(--g100);overflow:hidden}
.meter .fill{height:100%;border-radius:var(--r-pill);background:var(--brand-600)}

/* segmented pill bar */
.segbar{display:flex;gap:6px;height:30px}
.segbar>div{border-radius:var(--r-sm);min-width:14px}
.seglabs{display:flex;gap:28px;flex-wrap:wrap;margin-top:20px}
.seglab .t{font-size:13px;color:var(--g500);display:block;margin-bottom:5px}
.seglab .v{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;
  color:var(--g900)}
.seglab .v i{width:18px;height:18px;border-radius:50%;flex:0 0 18px}

/* ==========================  live chart shell  ==========================
   Every chart with points is wrapped in .chart so it has something to
   position a tooltip against and something for a ResizeObserver to measure.
   The wrapper must not add height of its own, or the observer would see its
   own redraw as a size change.                                            */
/* Draw-in, for the product page only. The stroke carries pathLength="1", so
   one dash spans the whole path whatever its real length and the offset can
   run 1 -> 0 without measuring the geometry. The area rises a little as it
   fades up, which reads as the line pulling it into place rather than two
   separate things fading. Honoured only when the reader has not asked the
   system for less motion. */
@keyframes ch-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes ch-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ch-fade{from{opacity:0}to{opacity:1}}

/* Two selectors doing two jobs. [data-animate] HIDES the parts, from the
   moment they render; .ch-animate MOVES them, and is added only when the
   chart is first seen. Splitting them is what lets a chart below the fold
   wait: with the hiding and the moving on one class, adding that class late
   would make a fully drawn chart blink out and redraw itself. Both come off
   together when the entrance is done, which is why a redraw after it renders
   instantly instead of hiding. */
[data-animate="1"] .ch-line{stroke-dasharray:1;stroke-dashoffset:1}
[data-animate="1"] .ch-area{opacity:0;transform-origin:bottom}
[data-animate="1"] svg > line,[data-animate="1"] svg > text,
[data-animate="1"] svg > circle,
[data-animate="1"] svg > g:not(.chart-hits):not(.chart-focus){opacity:0}

.ch-animate .ch-line{animation:ch-draw 1.5s cubic-bezier(.4,0,.2,1) .15s forwards}
.ch-animate .ch-area{animation:ch-rise .9s cubic-bezier(.4,0,.2,1) .85s forwards}
/* Gridlines, ticks and the endpoint ring arrive after the line that explains
   them, so the eye follows the line first. */
.ch-animate svg > line,.ch-animate svg > text,.ch-animate svg > circle,
.ch-animate svg > g:not(.chart-hits):not(.chart-focus){
  animation:ch-fade .6s ease-out 1.25s forwards}

/* A reader who asked for less motion never gets data-animate left on them -
   mountCharts strips it instead of animating - but if script never runs, this
   keeps the chart from staying invisible. */
@media (prefers-reduced-motion:reduce){
  [data-animate="1"] .ch-line,[data-animate="1"] .ch-area,
  [data-animate="1"] svg > line,[data-animate="1"] svg > text,
  [data-animate="1"] svg > circle,
  [data-animate="1"] svg > g:not(.chart-hits):not(.chart-focus){
    animation:none;opacity:1;stroke-dashoffset:0;transform:none}
}

.chart{position:relative;width:100%;line-height:0}
.chart svg{touch-action:pan-y}
.chart-hits rect{cursor:crosshair}

.chart-tip{position:absolute;z-index:3;pointer-events:none;line-height:1.35;
  transform:translate(-50%,calc(-100% - 14px));
  background:var(--g900);color:#fff;border-radius:var(--r-sm);
  padding:8px 11px;font-size:12px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(16,24,40,.22)}
.chart-tip[hidden]{display:none}
.chart-tip .tip-k{display:block;font-size:10.5px;letter-spacing:.04em;
  text-transform:uppercase;opacity:.65;margin-bottom:3px}
.chart-tip .tip-v{display:block;font-size:15px;font-weight:700}
.chart-tip .tip-r{display:flex;align-items:center;gap:7px;margin-top:3px}
.chart-tip .tip-r i{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.chart-tip .tip-r b{margin-left:auto;padding-left:14px;font-weight:700}

/* The tooltip is the only way to read an exact figure, so it has to survive
   a device with no pointer. On touch it is anchored to the top of the card
   instead of chasing a finger that is covering the point it describes. */
@media (hover:none){
  .chart-tip{left:50%!important;top:0!important;
    transform:translateX(-50%);white-space:normal;max-width:88%}
}

/* ============================== dashboard ===============================
   The score sits beside its scale rather than above it, so the band a file
   falls in is read off the same line as the dial rather than remembered.  */
.dash-score{display:grid;gap:28px;align-items:center;
  grid-template-columns:minmax(220px,300px) minmax(220px,1fr)}
.dash-score .dial{max-width:300px;width:100%}
.sc-row{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-sm);
  font-size:13px;color:var(--g600)}
.sc-row i{width:11px;height:11px;border-radius:3px;flex:0 0 11px}
.sc-row .nm{font-weight:600;color:var(--g800)}
.sc-row .rg{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--g500)}
/* The band this file is in is marked, not just coloured - colour alone is the
   one cue a colour-blind reader does not get. */
.sc-row.on{background:var(--g50);color:var(--g900)}
.sc-row.on .nm{font-weight:700}
.sc-row.on .rg{color:var(--g700);font-weight:600}

.dash-facts{display:grid;gap:18px 26px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.dash-fact{display:flex;gap:13px;align-items:flex-start;min-width:0}
.dash-fact .ic{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;
  border-radius:11px;background:var(--g50);color:var(--brand-700)}
.dash-fact .t{display:block;font-size:11.5px;color:var(--g500);margin-bottom:3px}
.dash-fact b{display:block;font-size:15px;font-weight:700;color:var(--g900);
  overflow-wrap:anywhere}
.dash-fact .n{display:block;font-size:12px;color:var(--g500);margin-top:2px}

.dash-guide{display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.dash-link{display:flex;align-items:center;gap:14px;padding:14px 16px;
  border:1px solid var(--g200);border-radius:var(--r-md);background:var(--card);
  text-decoration:none;color:inherit;
  transition:border-color .15s,background .15s}
.dash-link:hover{border-color:var(--brand-400);background:var(--g50)}
.dash-link b{font-size:13.5px;font-weight:700;color:var(--g900);flex:0 0 auto;
  min-width:126px}
.dash-link span{font-size:12.5px;color:var(--g600);line-height:1.5}
.dash-link svg{margin-left:auto;flex:0 0 16px;color:var(--g400)}
.dash-link:hover svg{color:var(--brand-700)}
@media (max-width:620px){
  .dash-score{grid-template-columns:1fr}
  .dash-link{flex-wrap:wrap}
  .dash-link b{min-width:0;flex:1 0 100%}
  .dash-link svg{display:none}
}

/* =====================  months-by-product bands  ========================
   One proportional band per product: the shape of a payment record read at a
   glance, before any dates. Two columns on a wide screen, one on a phone.   */
.mp-bands{display:grid;gap:26px 34px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.mp-band-hd{display:flex;align-items:center;gap:10px;margin-bottom:11px;
  flex-wrap:wrap}
.mp-band-hd b{font-size:14.5px;font-weight:700;color:var(--g900)}
/* Inside a band the count labels sit closer than the standalone pattern, so a
   two-up grid does not force a line break between a colour and its number. */
.mp-band .seglabs{gap:18px;margin-top:14px}
.mp-band .seglab .v{font-size:15px}

/* ===========================  payment grid  ============================= */
.grid-wrap{overflow-x:auto}
.pgrid{border-collapse:separate;border-spacing:0;width:100%;min-width:660px}
.pgrid th{font-size:10.5px;font-weight:600;color:var(--g500);letter-spacing:.05em;
  text-transform:uppercase;text-align:left;padding:0 0 10px}
.pgrid td{padding:0;border-top:1px solid var(--g100)}
.pgrid tr:first-child td{border-top:0}
.pgrid .acct{padding:7px 16px 7px 0;white-space:nowrap}
.pgrid .acct b{display:block;font-size:13px;font-weight:600;color:var(--g900);
  max-width:210px;overflow:hidden;text-overflow:ellipsis}
.pgrid .acct span{font-size:11.5px;color:var(--g500)}
.cells{display:flex;gap:2px;padding:7px 0}
.cell{width:13px;height:20px;border-radius:3px;flex:0 0 13px}
.st-on_time{background:var(--d0)}       .st-dpd_30{background:var(--d1)}
.st-dpd_60{background:var(--d2)}        .st-dpd_90{background:var(--d3)}
.st-dpd_120{background:var(--d4)}       .st-dpd_150{background:var(--d5)}
.st-dpd_180{background:var(--d6)}       .st-written_off{background:var(--d7)}
.st-not_reported{background:var(--dn)}  .st-not_open{background:var(--dx)}
.st-unknown_code{background:var(--du);box-shadow:inset 0 0 0 1px rgba(105,65,198,.35)}
.axis{display:flex;justify-content:space-between;padding-top:10px;font-size:11px;
  color:var(--g500)}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;padding-top:16px;margin-top:14px;
  border-top:1px solid var(--g200)}
.lg{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--g600)}
.lg i{width:12px;height:12px;border-radius:3px;display:block}

/* ===========================  layout rows  ============================== */
.row{display:grid;gap:18px;min-width:0}
.row>*{min-width:0}          /* load-bearing: lets grid children shrink */
.r-1-1{grid-template-columns:1fr 1fr}
.r-2-1{grid-template-columns:1.7fr 1fr}
.r-1-2{grid-template-columns:1fr 1.7fr}
.r-3-1{grid-template-columns:2.4fr 1fr}
.r-fix-1{grid-template-columns:400px 1fr}
.r-1-fix{grid-template-columns:1fr 360px}
.r-donut{grid-template-columns:190px 1fr;gap:20px;align-items:center}

/* ===========================  empty / unknown  ========================== */
.unknown-note{padding:12px 14px;background:var(--un-bg);border:1px solid var(--un-bd);
  border-radius:var(--r);font-size:12px;color:var(--un-tx)}
.unknown-note b{display:block;margin-bottom:2px}
.note{padding:14px 18px;border:1px dashed var(--g300);border-radius:var(--r);
  color:var(--g600);font-size:12px;background:var(--card)}
.note b{color:var(--g900)}
.empty{padding:34px 20px;text-align:center;color:var(--g500);font-size:13px}

/* ===========================  responsive  =============================== */
@media (max-width:1240px){
  .r-1-1,.r-2-1,.r-1-2,.r-3-1,.r-fix-1,.r-1-fix,.r-donut{grid-template-columns:1fr}
  .r-donut{justify-items:center}
}
/* The menu button and the drawer's close button exist only while the rail is a
   drawer. Above that width the rail is part of the page and neither has
   anything to do, so both are removed rather than hidden behind the layout. */
.navtoggle,.navclose{display:none}

@media (max-width:860px){
  .shell{flex-direction:column}

  /* The rail becomes a drawer over the page, NOT a horizontal scrolling strip.
     The strip fitted fourteen items into one line only by dropping the group
     headings and the counts, and left most of the menu past the right edge
     where a reader had to swipe blind to find it. As a drawer the menu keeps
     its full structure - three groups, their headings, the badges - and the
     reader sees all of it at once. */
  .rail{position:fixed;top:0;left:0;bottom:0;z-index:60;
    width:min(86vw,300px);max-width:none;min-width:0;flex:none;
    flex-direction:column;align-items:stretch;gap:20px;padding:18px 14px;
    height:100dvh;overflow-y:auto;overscroll-behavior:contain;
    border-right:1px solid var(--g200);border-bottom:0;
    transform:translateX(-102%);transition:transform .26s cubic-bezier(.4,0,.2,1);
    box-shadow:none;visibility:hidden}
  .rail.open{transform:none;visibility:visible;box-shadow:0 18px 50px rgba(16,24,40,.28)}
  .rail .navgrp{flex-direction:column;gap:2px;flex:0 0 auto}
  .rail .navlbl{display:block}
  .rail .cta{display:block;margin-top:auto}
  .ni{white-space:normal;padding:11px 12px;font-size:14.5px}
  .ni .ct{display:inline-flex}

  /* The brand row doubles as the drawer's header, so the close control sits
     with it rather than floating over the first menu item. */
  .rail .brand{flex:0 0 auto;padding:2px 4px 0;justify-content:flex-start}
  .navclose{display:grid;place-items:center;margin-left:auto;width:34px;height:34px;
    border:0;border-radius:50%;background:var(--g50);color:var(--g600);cursor:pointer}
  .navclose:hover{background:var(--g100);color:var(--g900)}

  .navtoggle{display:grid;place-items:center;width:38px;height:38px;flex:0 0 38px;
    border:1px solid var(--g200);border-radius:var(--r-sm);background:var(--card);
    color:var(--g700);cursor:pointer}
  .navtoggle:hover{background:var(--g50);color:var(--g900)}

  .scrim{position:fixed;inset:0;z-index:55;background:rgba(16,24,40,.44);
    backdrop-filter:blur(1.5px);animation:scrim-in .2s ease-out}
  .scrim[hidden]{display:none}
  @keyframes scrim-in{from{opacity:0}to{opacity:1}}

  /* A drawer over a page that still scrolls moves the content out from under
     the reader while they are choosing where to go. */
  body.nav-open{overflow:hidden}

  .page{padding:18px 16px 40px}
  .topbar{padding:10px 14px;position:sticky;gap:12px}
  .card{padding:20px 16px}
  .tbl-wrap,.flags{margin-left:-16px;margin-right:-16px}
  .tbl th,.tbl td,.flag{padding-left:16px;padding-right:16px}
  .seglabs{gap:18px}
}

@media (max-width:860px) and (prefers-reduced-motion:reduce){
  .rail{transition:none}
  .scrim{animation:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ===========================  print  ====================================
   "Export PDF" is the browser's own print-to-PDF, so this stylesheet IS the
   export format. Three things matter: drop the chrome, force the light palette
   (a dark-theme print wastes a cartridge and reads badly), and let the wide
   grids print in full rather than clipping at the edge of a scroll container
   the reader cannot scroll on paper.
   ======================================================================== */
@media print{
  /* Screen themes are irrelevant on paper; pin the light tokens. */
  :root,:root[data-theme="dark"]{
    --g900:#0B1C3D; --g800:#182A4D; --g700:#344054; --g600:#475467;
    --g500:#667085; --g400:#98A2B3; --g300:#D0D5DD; --g200:#EAECF0;
    --g100:#F2F4F7; --g50:#FAFBFC; --page:#FFFFFF; --card:#FFFFFF; --rail:#FFFFFF;
    --sh:none; --sh-xs:none; --sh-md:none; --sh-lg:none;
  }
  html{overflow-x:visible}
  body{background:#fff;font-size:10.5pt}

  /* chrome and anything that cannot be acted on from paper */
  .rail,.topbar,.ask-fab,.ask-panel,.ask-scrim,.btn,.drop,.seg,.pills,
  .search,.phead>div:last-child,.sr{display:none!important}

  .page{padding:0;max-width:none;gap:14px}
  .shell{display:block}
  .main{display:block}

  /* cards become plain blocks that do not straddle a page break */
  .card,.tile{border:1px solid var(--g200);border-radius:8px;box-shadow:none;
    break-inside:avoid;page-break-inside:avoid;padding:14px 16px}
  .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
  .row,.r-1-1,.r-2-1,.r-1-2,.r-3-1,.r-fix-1,.r-1-fix,.r-donut{
    display:block!important}
  .row>*{margin-bottom:14px}

  h1{font-size:18pt} .card h2{font-size:13pt}
  .eyebrow,.sub{color:#555}

  /* the wide ones: print everything, at a size that fits the sheet */
  .grid-wrap,.tbl-wrap,.chartbox{overflow:visible!important;margin:0}
  .pgrid{min-width:0;width:100%}
  .cell{width:7px;height:12px;border-radius:1.5px;flex-basis:7px}
  .pgrid .acct b{max-width:150px}
  .tbl{min-width:0;font-size:9pt}
  .tbl th,.tbl td{padding:6px 8px}
  .tbl thead{display:table-header-group}   /* repeat headers across pages */
  .tbl tr{break-inside:avoid;page-break-inside:avoid}

  /* the DPD ramp must survive a mono printer - it already ramps by lightness,
     so force backgrounds through rather than letting the browser strip them */
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}

  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#666}
  @page{margin:14mm 12mm}
}