/* Frontier Data Supply. Tokens first, then the site.
   Design system of record: Tools/open-design/design-systems/frontier-data-supply/
   Palette is closed. brand-lint fails on any hex outside this block. */

:root {
  --fds-carbon:#0B0D0E; --fds-graphite:#171B1D; --fds-rule-dark:#2A3033;
  --fds-bone:#F2EEE7; --fds-paper:#FFFFFF; --fds-rule-light:#D7D2C8;
  --fds-ash:#8A9297; --fds-slate:#565E63;
  --fds-copper:#E09A55; --fds-copper-deep:#A2551C;
  --fds-jade:#4FA791; --fds-jade-deep:#21705E; --fds-steel:#6E8FA8;

  --fds-bg:var(--fds-bone); --fds-bg-card:var(--fds-paper);
  --fds-bg-dark:var(--fds-carbon); --fds-bg-dark-raised:var(--fds-graphite);
  --fds-text:var(--fds-carbon); --fds-text-secondary:var(--fds-slate);
  --fds-text-on-dark:var(--fds-bone); --fds-text-secondary-on-dark:var(--fds-ash);
  --fds-link:var(--fds-copper-deep); --fds-link-on-dark:var(--fds-copper);
  --fds-accent:var(--fds-copper-deep); --fds-accent-on-dark:var(--fds-copper);
  --fds-hairline:var(--fds-rule-light); --fds-hairline-on-dark:var(--fds-rule-dark);
  --fds-redaction:var(--fds-carbon); --fds-redaction-on-dark:var(--fds-bone);

  --fds-font-display:"Instrument Serif",Georgia,"Times New Roman",serif;
  --fds-font-text:"Geist","Segoe UI",Helvetica,Arial,sans-serif;
  --fds-font-mono:"Geist Mono",Consolas,"Courier New",monospace;

  --fds-size-xs:12px; --fds-size-sm:14px; --fds-size-md:16px; --fds-size-lg:18px;
  --fds-size-xl:22px; --fds-size-2xl:28px; --fds-size-3xl:36px;
  --fds-size-4xl:48px; --fds-size-5xl:64px;

  --fds-space-1:4px; --fds-space-2:8px; --fds-space-3:12px; --fds-space-4:16px;
  --fds-space-5:24px; --fds-space-6:32px; --fds-space-7:48px; --fds-space-8:64px;
  --fds-space-9:96px; --fds-space-10:128px;

  --fds-radius-sm:2px; --fds-radius:4px; --fds-radius-lg:6px;
  --fds-content-max:1200px; --fds-measure:68ch; --fds-measure-tight:62ch;
  --fds-ease:cubic-bezier(.22,.61,.36,1);
  --fds-dur-fast:140ms; --fds-dur:240ms; --fds-dur-slow:420ms;
  --fds-nav-h:64px;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--fds-nav-h) + 16px)}
body{margin:0;background:var(--fds-bg);color:var(--fds-text);
  font-family:var(--fds-font-text);font-size:var(--fds-size-lg);line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--fds-link)}
:focus-visible{outline:2px solid var(--fds-accent);outline-offset:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--fds-carbon);color:var(--fds-bone);
  padding:var(--fds-space-3) var(--fds-space-4);z-index:100}
.skip:focus{left:0}

h1,h2,h3{margin:0 0 var(--fds-space-4)}
h1,h2{font-family:var(--fds-font-display);font-weight:400;letter-spacing:-.015em;line-height:1.04}
h1{font-size:clamp(38px,6.2vw,var(--fds-size-5xl))}
h2{font-size:clamp(28px,4vw,var(--fds-size-3xl))}
h3{font-size:var(--fds-size-lg);font-weight:600;line-height:1.3}
p{margin:0 0 var(--fds-space-4);max-width:var(--fds-measure)}
.lede{font-size:clamp(18px,2.2vw,var(--fds-size-xl));color:var(--fds-text-secondary);max-width:var(--fds-measure-tight)}
.eyebrow{font-family:var(--fds-font-mono);font-size:var(--fds-size-xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--fds-text-secondary);margin:0 0 var(--fds-space-4)}
.note{font-size:var(--fds-size-sm);color:var(--fds-text-secondary)}
.num,.mono{font-family:var(--fds-font-mono);font-variant-numeric:tabular-nums}

/* ---------- layout ---------- */
.wrap{max-width:var(--fds-content-max);margin:0 auto;padding:0 var(--fds-space-5)}
section{padding:var(--fds-space-9) 0}
section.tight{padding:var(--fds-space-8) 0}
.on-dark{background:var(--fds-bg-dark);color:var(--fds-text-on-dark)}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--fds-text-on-dark)}
.on-dark .lede,.on-dark .note,.on-dark .eyebrow{color:var(--fds-text-secondary-on-dark)}
.on-dark a{color:var(--fds-link-on-dark)}
.rule{border:0;border-top:1px solid var(--fds-hairline);margin:var(--fds-space-7) 0}
.on-dark .rule{border-top-color:var(--fds-hairline-on-dark)}

/* ---------- nav ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--fds-copper);z-index:60;
  transition:width 90ms linear}
.nav{position:sticky;top:0;z-index:50;background:var(--fds-bg-dark);
  border-bottom:1px solid var(--fds-hairline-on-dark);
  transition:transform var(--fds-dur) var(--fds-ease)}
.nav.is-hidden{transform:translateY(-100%)}
.nav-inner{display:flex;align-items:center;gap:var(--fds-space-5);
  height:var(--fds-nav-h);max-width:var(--fds-content-max);margin:0 auto;padding:0 var(--fds-space-5)}
.nav-links{display:flex;gap:var(--fds-space-5);list-style:none;margin:0 0 0 auto;padding:0;font-size:var(--fds-size-sm)}
.nav-links a{color:var(--fds-text-on-dark);text-decoration:none}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--fds-copper)}
.nav-cta{display:flex;align-items:center;gap:var(--fds-space-4)}
.nav-quiet{font-size:var(--fds-size-sm);color:var(--fds-text-secondary-on-dark);text-decoration:none;white-space:nowrap}
.nav-quiet:hover{color:var(--fds-copper)}
.nav-toggle{display:none;background:none;border:1px solid var(--fds-rule-dark);color:var(--fds-bone);
  border-radius:var(--fds-radius);padding:6px 10px;font-family:var(--fds-font-mono);font-size:var(--fds-size-xs);cursor:pointer}

/* ---------- buttons ---------- */
.btn{display:inline-block;font-family:var(--fds-font-mono);font-size:var(--fds-size-sm);
  letter-spacing:.03em;text-transform:uppercase;text-decoration:none;cursor:pointer;
  padding:12px 22px;border-radius:var(--fds-radius);border:1px solid transparent;
  transition:background var(--fds-dur) var(--fds-ease),color var(--fds-dur) var(--fds-ease),border-color var(--fds-dur) var(--fds-ease)}
.btn-primary{background:var(--fds-carbon);color:var(--fds-bone)}
.btn-primary:hover{background:var(--fds-copper-deep)}
.on-dark .btn-primary{background:var(--fds-bone);color:var(--fds-carbon)}
.on-dark .btn-primary:hover{background:var(--fds-copper);color:var(--fds-carbon)}
.btn-ghost{border-color:var(--fds-hairline);color:var(--fds-text);background:none}
.btn-ghost:hover{border-color:var(--fds-copper-deep);color:var(--fds-copper-deep)}
.on-dark .btn-ghost{border-color:var(--fds-hairline-on-dark);color:var(--fds-text-on-dark)}
.on-dark .btn-ghost:hover{border-color:var(--fds-copper);color:var(--fds-copper)}
.btn-row{display:flex;gap:var(--fds-space-4);flex-wrap:wrap;margin-top:var(--fds-space-6)}

/* ---------- hero ---------- */
.hero{padding:var(--fds-space-9) 0 var(--fds-space-8)}
.hero h1{max-width:15ch}
.hero .claim{font-family:var(--fds-font-mono);font-size:var(--fds-size-sm);color:var(--fds-copper);
  margin-top:var(--fds-space-6);letter-spacing:.02em}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:var(--fds-space-5);margin-top:var(--fds-space-8)}
.door{border:1px solid var(--fds-hairline-on-dark);border-radius:var(--fds-radius);padding:var(--fds-space-5)}
.door p{font-size:var(--fds-size-md);color:var(--fds-text-secondary-on-dark);margin-bottom:var(--fds-space-5)}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--fds-hairline);border-radius:var(--fds-radius);background:var(--fds-bg-card)}
table{width:100%;border-collapse:collapse;font-size:var(--fds-size-sm);font-variant-numeric:tabular-nums}
caption{text-align:left;font-family:var(--fds-font-mono);font-size:var(--fds-size-xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--fds-text-secondary);padding-bottom:var(--fds-space-3)}
th{text-align:left;font-family:var(--fds-font-mono);font-weight:500;font-size:var(--fds-size-xs);
  letter-spacing:.09em;text-transform:uppercase;color:var(--fds-text-secondary);
  background:var(--fds-bone);padding:var(--fds-space-3);border-bottom:1px solid var(--fds-hairline);white-space:nowrap}
td{padding:var(--fds-space-3);border-bottom:1px solid var(--fds-hairline);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even) td{background:rgba(215,210,200,.28)}
tr.is-highlighted td:first-child{border-left:3px solid var(--fds-copper-deep);padding-left:calc(var(--fds-space-3) - 3px)}

/* ---------- chips ---------- */
.chip{display:inline-block;font-family:var(--fds-font-mono);font-size:var(--fds-size-xs);
  letter-spacing:.09em;text-transform:uppercase;padding:3px 8px;border-radius:var(--fds-radius-sm);
  border:1px solid currentColor;white-space:nowrap}
.chip-cleared{color:var(--fds-jade-deep)}
.chip-gated{color:var(--fds-copper-deep)}
.on-dark .chip-cleared{color:var(--fds-jade)}
.on-dark .chip-gated{color:var(--fds-copper)}

/* ---------- the de-identification diff (tier-1 mechanic) ---------- */
.diff{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--fds-space-5);align-items:center;margin-top:var(--fds-space-6)}
.rec{background:var(--fds-bg-card);border:1px solid var(--fds-hairline);border-radius:var(--fds-radius);
  padding:var(--fds-space-5);font-family:var(--fds-font-mono);font-size:var(--fds-size-sm)}
.on-dark .rec{background:var(--fds-bg-dark-raised);border-color:var(--fds-hairline-on-dark)}
.rec .line{padding:5px 0;display:flex;gap:var(--fds-space-3);align-items:baseline;flex-wrap:wrap}
.rec .k{color:var(--fds-text-secondary);min-width:11ch}
.on-dark .rec .k{color:var(--fds-text-secondary-on-dark)}
.rec .cap{font-family:var(--fds-font-mono);font-size:var(--fds-size-xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--fds-text-secondary);border-bottom:1px solid var(--fds-hairline);
  padding-bottom:var(--fds-space-3);margin-bottom:var(--fds-space-3)}
.on-dark .rec .cap{color:var(--fds-text-secondary-on-dark);border-bottom-color:var(--fds-hairline-on-dark)}
.redact{display:inline-block;position:relative;color:transparent;border-radius:1px;
  -webkit-user-select:none;user-select:none;padding:0 2px}
.redact::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;
  background:var(--fds-redaction);border-radius:1px;transform-origin:left center}
.on-dark .redact::after{background:var(--fds-redaction-on-dark)}
.diff-arrow{font-family:var(--fds-font-mono);color:var(--fds-accent);font-size:var(--fds-size-xl);text-align:center}
.on-dark .diff-arrow{color:var(--fds-accent-on-dark)}

/* Progressive enhancement. The DEFAULT above is the redacted state, so with JS
   blocked, an observer that never fires, or a screenshot taken mid-transition,
   the licensed record is still redacted. The animation can only ever sweep
   TOWARD redaction, never away from it. The colour change is delayed by the
   sweep duration so the value is covered before it disappears. */
.diff.is-live .redact{color:inherit}
.diff.is-live .redact::after{transform:scaleX(0);transition:transform var(--fds-dur-slow) var(--fds-ease)}
.diff.is-live.is-applied .redact{color:transparent;transition:color 0ms linear var(--fds-dur-slow)}
.diff.is-live.is-applied .redact::after{transform:scaleX(1)}
.diff.is-live .reveal{opacity:0;transform:translateY(4px);
  transition:opacity var(--fds-dur-slow) var(--fds-ease),transform var(--fds-dur-slow) var(--fds-ease)}
.diff.is-live.is-applied .reveal{opacity:1;transform:none}
.diff-steps{display:none;gap:var(--fds-space-2);margin-top:var(--fds-space-4)}
.diff-steps button{font-family:var(--fds-font-mono);font-size:var(--fds-size-xs);letter-spacing:.06em;
  text-transform:uppercase;padding:7px 12px;border:1px solid var(--fds-hairline);background:none;
  color:var(--fds-text-secondary);border-radius:var(--fds-radius);cursor:pointer}
.diff-steps button[aria-pressed="true"]{border-color:var(--fds-copper-deep);color:var(--fds-copper-deep)}

/* ---------- chain of custody ---------- */
.chain{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--fds-hairline-on-dark);
  border-radius:var(--fds-radius);overflow:hidden;margin-top:var(--fds-space-6)}
.step{padding:var(--fds-space-4);border-right:1px solid var(--fds-hairline-on-dark)}
.step:last-child{border-right:0}
.step .n{font-family:var(--fds-font-mono);font-size:var(--fds-size-xs);color:var(--fds-copper)}
.step .t{font-weight:600;font-size:var(--fds-size-md);margin:var(--fds-space-2) 0 var(--fds-space-1)}
.step .h{font-family:var(--fds-font-mono);font-size:var(--fds-size-xs);color:var(--fds-text-secondary-on-dark)}

/* ---------- cards, tiles, grids ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--fds-space-5)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--fds-space-5)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--fds-space-5)}
.card{background:var(--fds-bg-card);border:1px solid var(--fds-hairline);border-radius:var(--fds-radius);padding:var(--fds-space-5)}
.on-dark .card{background:var(--fds-bg-dark-raised);border-color:var(--fds-hairline-on-dark)}
.card p{font-size:var(--fds-size-md);margin-bottom:0}
.card dl{margin:var(--fds-space-4) 0 0;font-family:var(--fds-font-mono);font-size:var(--fds-size-xs);overflow:hidden}
.card dt{color:var(--fds-text-secondary);float:left;clear:left;width:10em}
.card dd{margin:0 0 var(--fds-space-2) 0}
.tile{border-top:2px solid var(--fds-accent);padding-top:var(--fds-space-3)}
.tile .v{font-family:var(--fds-font-mono);font-size:var(--fds-size-3xl);font-variant-numeric:tabular-nums;line-height:1.1}
.tile .k{font-family:var(--fds-font-mono);font-size:var(--fds-size-xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--fds-text-secondary)}
.on-dark .tile{border-top-color:var(--fds-accent-on-dark)}
.on-dark .tile .k{color:var(--fds-text-secondary-on-dark)}
.feature{border-top:1px solid var(--fds-hairline);padding-top:var(--fds-space-4)}
.on-dark .feature{border-top-color:var(--fds-hairline-on-dark)}
.feature h3{font-size:var(--fds-size-md)}
.feature p{font-size:var(--fds-size-md);color:var(--fds-text-secondary);margin-bottom:0}
.on-dark .feature p{color:var(--fds-text-secondary-on-dark)}

/* ---------- prose blocks ---------- */
.prose h2{margin-top:var(--fds-space-8)}
.prose h3{margin-top:var(--fds-space-6)}
.prose ul,.prose ol{max-width:var(--fds-measure);padding-left:1.25em}
.prose li{margin-bottom:var(--fds-space-2)}
.anchor-block{scroll-margin-top:calc(var(--fds-nav-h) + 24px);border-top:1px solid var(--fds-hairline);
  padding-top:var(--fds-space-5);margin-top:var(--fds-space-7)}
/* Source paths are long unbroken tokens and will blow out a 390px viewport
   if they are allowed to set the minimum width. They must be able to break. */
.anchor-block .src{font-family:var(--fds-font-mono);font-size:var(--fds-size-xs);color:var(--fds-text-secondary);
  display:block;margin-top:var(--fds-space-3);overflow-wrap:anywhere;word-break:break-word}
.toc{list-style:none;margin:var(--fds-space-5) 0 0;padding:0;columns:2;column-gap:var(--fds-space-6)}
.toc li{break-inside:avoid;padding:var(--fds-space-2) 0;border-bottom:1px solid var(--fds-hairline)}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline}

/* ---------- forms ---------- */
.lanes{display:flex;gap:var(--fds-space-2);margin-bottom:var(--fds-space-6);flex-wrap:wrap}
.lane-tab{font-family:var(--fds-font-mono);font-size:var(--fds-size-xs);letter-spacing:.06em;text-transform:uppercase;
  padding:9px 14px;border:1px solid var(--fds-hairline);background:none;color:var(--fds-text-secondary);
  border-radius:var(--fds-radius);cursor:pointer}
.lane-tab[aria-selected="true"]{border-color:var(--fds-copper-deep);color:var(--fds-copper-deep);background:var(--fds-bg-card)}
form{max-width:560px}
.field{margin-bottom:var(--fds-space-4)}
label{display:block;font-family:var(--fds-font-mono);font-size:var(--fds-size-xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--fds-text-secondary);margin-bottom:var(--fds-space-2)}
input,select,textarea{width:100%;font-family:var(--fds-font-text);font-size:var(--fds-size-md);
  padding:10px 12px;border:1px solid var(--fds-rule-light);border-radius:var(--fds-radius);
  background:var(--fds-bg-card);color:var(--fds-text)}
textarea{resize:vertical}
.consent{display:flex;gap:var(--fds-space-3);align-items:flex-start}
.consent input{width:auto;margin-top:5px;flex:none}
.consent label{text-transform:none;letter-spacing:0;font-family:var(--fds-font-text);
  font-size:var(--fds-size-sm);color:var(--fds-text);margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin-top:var(--fds-space-4);font-size:var(--fds-size-sm)}
.form-status.ok{color:var(--fds-jade-deep)}
.form-status.err{color:var(--fds-copper-deep)}

/* ---------- footer ---------- */
.foot{background:var(--fds-bg-dark);color:var(--fds-text-on-dark);padding:var(--fds-space-8) 0 var(--fds-space-6)}
.foot .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--fds-space-6)}
.foot a{color:var(--fds-text-on-dark);text-decoration:none;font-size:var(--fds-size-sm);display:block;padding:4px 0}
.foot a:hover{color:var(--fds-copper)}
.foot .col-h{font-family:var(--fds-font-mono);font-size:var(--fds-size-xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--fds-text-secondary-on-dark);margin-bottom:var(--fds-space-3)}
.entity{font-family:var(--fds-font-mono);font-size:var(--fds-size-xs);color:var(--fds-text-secondary-on-dark);
  margin-top:var(--fds-space-7);border-top:1px solid var(--fds-hairline-on-dark);padding-top:var(--fds-space-5)}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .chain{grid-template-columns:repeat(2,1fr)}
  .step{border-bottom:1px solid var(--fds-hairline-on-dark)}
  .step:nth-child(2n){border-right:0}
}
@media (max-width:720px){
  section{padding:var(--fds-space-8) 0}
  .nav-links{display:none;position:absolute;top:var(--fds-nav-h);left:0;right:0;
    flex-direction:column;gap:0;background:var(--fds-bg-dark);
    border-bottom:1px solid var(--fds-hairline-on-dark);padding:var(--fds-space-4) var(--fds-space-5)}
  .nav-links.is-open{display:flex}
  .nav-links a{display:block;padding:var(--fds-space-3) 0}
  .nav-toggle{display:block;margin-left:auto}
  .nav-quiet{display:none}
  .doors,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .chain{grid-template-columns:1fr}
  .step{border-right:0}
  .diff{grid-template-columns:1fr}
  .diff-arrow{transform:rotate(90deg)}
  .diff-steps{display:flex}
  .toc{columns:1}
  .foot .cols{grid-template-columns:1fr}
  .card dt{float:none;width:auto}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .nav{transition:none}
}