/* ==========================================================================
   VerifyPro — design tokens (light + dark)
   Shared by index.html and the app shell. Load this BEFORE app.css.

   Dark is a SELECTED palette, not an inversion. Both modes were run through
   the dataviz six-checks validator:
     light marks #199C6B/#EBA400/#5F6B85/#96150C — all-pairs CVD dE 12.0 PASS
     dark  marks #60BA8D/#EABF3A/#768096/#DB5436 — all-pairs CVD dE 11.6 PASS
   Deliberate, documented deviations in BOTH modes:
     - chroma floor on the Unknown slate: Unknown must read neutral. This is a
       status palette, not a categorical one.
     - dark lightness band: green/amber sit above the 0.67 ceiling because
       contrast against a dark surface requires it. Contrast won.
   Every verdict always carries its WORD — colour is never the only signal.
   Do not hand-tune these values; re-run the validator instead.
   ========================================================================== */

:root{
  --paper:#EAEAE4;
  --card:#FBFAF7;
  --rail:#16181C;
  --rail-2:#22252B;
  --rail-ink:#D9DBDF;
  --rail-ink-2:#C3C7CD;
  --rail-mute:#767C86;
  --rail-rule:#2B2F36;
  --rail-track:#2B2F36;

  --ink:#16181C;
  --ink-2:#4A4F57;
  --ink-3:#8A8F97;
  --rule:#D3D1C8;
  --rule-2:#C2BFB4;

  --air-red:#C8102E;
  --air-blue:#14346B;

  --m-ok:#199C6B;   --m-warn:#EBA400;  --m-unk:#5F6B85;  --m-bad:#96150C;
  --t-ok:#0E6647;   --t-warn:#7A5200;  --t-unk:#414B60;  --t-bad:#8A1309;

  --w-ok:rgba(25,156,107,.09);
  --w-warn:rgba(235,164,0,.12);
  --w-unk:rgba(95,107,133,.09);
  --w-bad:rgba(150,21,12,.08);

  --band:#14346B;
  --band-ink:#FFFFFF;
  --band-mute:#A9BBDA;

  --btn-ink:#FBFAF7;
  --row-hover:rgba(20,52,107,.035);
  --shadow:0 18px 40px -28px rgba(20,22,26,.4);

  --f-disp:'Archivo',system-ui,sans-serif;
  --f-stamp:'Big Shoulders Display','Archivo',sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --rail-w:238px;
}

/* system preference — only when the user hasn't chosen light explicitly */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#16181C;
    --card:#1E2127;
    --rail:#101216;
    --rail-2:#22252B;
    --rail-ink:#D9DBDF;
    --rail-ink-2:#C3C7CD;
    --rail-mute:#868C96;
    --rail-rule:#2B2F36;
    --rail-track:#2B2F36;

    --ink:#E9E9E4;
    --ink-2:#B4B8C0;
    --ink-3:#868C96;
    --rule:#2B2F36;
    --rule-2:#3A3F48;

    --air-red:#F04A63;
    --air-blue:#6D9BE0;

    --m-ok:#60BA8D;   --m-warn:#EABF3A;  --m-unk:#768096;  --m-bad:#DB5436;
    --t-ok:#7FD0A5;   --t-warn:#F0CD63;  --t-unk:#A3ACBE;  --t-bad:#F0846A;

    --w-ok:rgba(96,186,141,.13);
    --w-warn:rgba(234,191,58,.13);
    --w-unk:rgba(118,128,150,.15);
    --w-bad:rgba(219,84,54,.13);

    --band:#152A4D;
    --band-ink:#FFFFFF;
    --band-mute:#9FB2D2;

    --btn-ink:#16181C;
    --row-hover:rgba(109,155,224,.07);
    --shadow:0 18px 40px -28px rgba(0,0,0,.75);
  }
}

/* explicit choice always wins, in both directions */
:root[data-theme="dark"]{
  --paper:#16181C;
  --card:#1E2127;
  --rail:#101216;
  --rail-2:#22252B;
  --rail-ink:#D9DBDF;
  --rail-ink-2:#C3C7CD;
  --rail-mute:#868C96;
  --rail-rule:#2B2F36;
  --rail-track:#2B2F36;

  --ink:#E9E9E4;
  --ink-2:#B4B8C0;
  --ink-3:#868C96;
  --rule:#2B2F36;
  --rule-2:#3A3F48;

  --air-red:#F04A63;
  --air-blue:#6D9BE0;

  --m-ok:#60BA8D;   --m-warn:#EABF3A;  --m-unk:#768096;  --m-bad:#DB5436;
  --t-ok:#7FD0A5;   --t-warn:#F0CD63;  --t-unk:#A3ACBE;  --t-bad:#F0846A;

  --w-ok:rgba(96,186,141,.13);
  --w-warn:rgba(234,191,58,.13);
  --w-unk:rgba(118,128,150,.15);
  --w-bad:rgba(219,84,54,.13);

  --band:#152A4D;
  --band-ink:#FFFFFF;
  --band-mute:#9FB2D2;

  --btn-ink:#16181C;
  --row-hover:rgba(109,155,224,.07);
  --shadow:0 18px 40px -28px rgba(0,0,0,.75);
}

/* ── theme toggle ────────────────────────────────────────────────────── */
.theme-toggle{
  display:inline-flex;align-items:center;gap:0;
  border:1.5px solid var(--rule-2);background:var(--card);
  border-radius:2px;padding:2px;cursor:pointer;
}
.theme-toggle button{
  font-family:var(--f-stamp);font-weight:700;font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;padding:5px 9px;border:0;background:transparent;
  color:var(--ink-3);cursor:pointer;border-radius:1px;line-height:1.4;transition:.13s;
}
.theme-toggle button:hover{color:var(--ink)}
.theme-toggle button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.theme-toggle button:focus-visible{outline:2px solid var(--air-blue);outline-offset:2px}

/* the airmail chevron reads in both modes */
.airmail{
  height:7px;width:100%;
  background:repeating-linear-gradient(-45deg,var(--air-red) 0 11px,transparent 11px 22px),
             repeating-linear-gradient(-45deg,transparent 0 11px,var(--air-blue) 11px 22px);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* VerifyPro mark — a perforated stamp with an envelope knocked out of it.
   Applied as a CSS mask so it inherits currentColor and works on the
   light paper, the dark rail and the auth plate without three copies. */
.mark-badge,.rail-badge,.plate-badge{
  border:0!important;border-radius:0!important;background:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cdefs%3E%3Cmask%20id%3D%22p%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2240%22%20height%3D%2240%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20fill%3D%22%23fff%22%2F%3E%3Cg%20fill%3D%22%23000%22%3E%3Ccircle%20cx%3D%222.00%22%20cy%3D%222.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%222.00%22%20cy%3D%2238.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%222.00%22%20cy%3D%222.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2238.00%22%20cy%3D%222.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%227.14%22%20cy%3D%222.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%227.14%22%20cy%3D%2238.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%222.00%22%20cy%3D%227.14%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2238.00%22%20cy%3D%227.14%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2212.29%22%20cy%3D%222.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2212.29%22%20cy%3D%2238.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%222.00%22%20cy%3D%2212.29%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2238.00%22%20cy%3D%2212.29%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2217.43%22%20cy%3D%222.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2217.43%22%20cy%3D%2238.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%222.00%22%20cy%3D%2217.43%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2238.00%22%20cy%3D%2217.43%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2222.57%22%20cy%3D%222.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2222.57%22%20cy%3D%2238.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%222.00%22%20cy%3D%2222.57%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2238.00%22%20cy%3D%2222.57%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2227.71%22%20cy%3D%222.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2227.71%22%20cy%3D%2238.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%222.00%22%20cy%3D%2227.71%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2238.00%22%20cy%3D%2227.71%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2232.86%22%20cy%3D%222.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2232.86%22%20cy%3D%2238.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%222.00%22%20cy%3D%2232.86%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2238.00%22%20cy%3D%2232.86%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2238.00%22%20cy%3D%222.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2238.00%22%20cy%3D%2238.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%222.00%22%20cy%3D%2238.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2238.00%22%20cy%3D%2238.00%22%20r%3D%221.9%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%229.5%22%20y%3D%2213.5%22%20width%3D%2221%22%20height%3D%2214%22%20rx%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M11%2015.2%20L20%2022.4%20L29%2015.2%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.6%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M11%2026%20L16.5%2021.2%20M29%2026%20L23.5%2021.2%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2236%22%20height%3D%2236%22%20mask%3D%22url%28%23p%29%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2040%2040%22%3E%3Cdefs%3E%3Cmask%20id%3D%22p%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2240%22%20height%3D%2240%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20fill%3D%22%23fff%22%2F%3E%3Cg%20fill%3D%22%23000%22%3E%3Ccircle%20cx%3D%222.00%22%20cy%3D%222.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%222.00%22%20cy%3D%2238.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%222.00%22%20cy%3D%222.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2238.00%22%20cy%3D%222.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%227.14%22%20cy%3D%222.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%227.14%22%20cy%3D%2238.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%222.00%22%20cy%3D%227.14%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2238.00%22%20cy%3D%227.14%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2212.29%22%20cy%3D%222.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2212.29%22%20cy%3D%2238.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%222.00%22%20cy%3D%2212.29%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2238.00%22%20cy%3D%2212.29%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2217.43%22%20cy%3D%222.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2217.43%22%20cy%3D%2238.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%222.00%22%20cy%3D%2217.43%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2238.00%22%20cy%3D%2217.43%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2222.57%22%20cy%3D%222.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2222.57%22%20cy%3D%2238.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%222.00%22%20cy%3D%2222.57%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2238.00%22%20cy%3D%2222.57%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2227.71%22%20cy%3D%222.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2227.71%22%20cy%3D%2238.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%222.00%22%20cy%3D%2227.71%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2238.00%22%20cy%3D%2227.71%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2232.86%22%20cy%3D%222.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2232.86%22%20cy%3D%2238.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%222.00%22%20cy%3D%2232.86%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2238.00%22%20cy%3D%2232.86%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2238.00%22%20cy%3D%222.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2238.00%22%20cy%3D%2238.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%222.00%22%20cy%3D%2238.00%22%20r%3D%221.9%22%2F%3E%3Ccircle%20cx%3D%2238.00%22%20cy%3D%2238.00%22%20r%3D%221.9%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%229.5%22%20y%3D%2213.5%22%20width%3D%2221%22%20height%3D%2214%22%20rx%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M11%2015.2%20L20%2022.4%20L29%2015.2%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222.6%22%20stroke-linejoin%3D%22round%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M11%2026%20L16.5%2021.2%20M29%2026%20L23.5%2021.2%22%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fmask%3E%3C%2Fdefs%3E%3Crect%20x%3D%222%22%20y%3D%222%22%20width%3D%2236%22%20height%3D%2236%22%20mask%3D%22url%28%23p%29%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
  background-color:currentColor;
  font-size:0;color:inherit;flex:0 0 auto;
}

/* ── brand lockup ─────────────────────────────────────────────────────────
   Replaces the drawn stamp mark. The wordmark is part of the artwork, so the
   live text beside it is hidden. Light and dark variants are separate files
   because the dark one is silver — a CSS filter cannot fake that.
   The rail and the auth plate are dark in BOTH themes, so they always take
   the dark lockup.                                                        */
.mark-badge,.rail-badge,.plate-badge{
  -webkit-mask:none !important; mask:none !important;
  background-color:transparent !important;
  border:0 !important; border-radius:0 !important;
  /* !important because landing.css / app.css / auth.css each set the old
     34px square badge and all of them load after this file.
     The lockup is ~3:1, so height drives legibility — at 36px the "LLC" line
     was unreadable. 46px in the nav, more in the rail where there is room. */
  width:141px !important; height:46px !important; flex:0 0 141px !important;
  background-image:url("/assets/brand/logo-480.png");
  background-repeat:no-repeat; background-position:left center; background-size:contain;
  /* the app/admin/auth markup still has the literal text "VP" inside this
     span, and app.css re-sets font-size after this file — so it was printing
     on top of the logo. Collapse it for good. */
  font-size:0 !important; line-height:0 !important; color:transparent !important;
  text-indent:-9999px; overflow:hidden;
}
.mark-name,.rail-name,.plate-name{display:none !important}
.mark,.rail-mark,.plate-mark{gap:0 !important}

/* the rail and plate are dark whatever the theme is doing, and both have
   more horizontal room than the nav */
.rail-badge,.plate-badge{
  background-image:url("/assets/brand/logo-dark-480.png");
  width:168px !important; height:55px !important; flex:0 0 168px !important;
}
.rail-mark{padding:20px 18px 22px !important}

:root[data-theme="dark"] .mark-badge{background-image:url("/assets/brand/logo-dark-480.png")}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .mark-badge{background-image:url("/assets/brand/logo-dark-480.png")}
}

@media(max-width:520px){
  .mark-badge{width:122px !important; height:40px !important; flex:0 0 122px !important}
}