@layer reset, tokens, base, layout, components, states, responsive, print;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, ul, ol, dl, dd, blockquote, figure { margin: 0; }
  ul, ol { padding: 0; }
  button, input, select { font: inherit; }
  img, svg { display: block; max-width: 100%; }
}

@layer tokens {
  :root {
    color-scheme: dark;
    --pl-bg: #070a0f;
    --pl-bg-soft: #0b1119;
    --pl-surface: #101821;
    --pl-surface-2: #15212c;
    --pl-surface-3: #1c2a36;
    --pl-ink: #f5efe4;
    --pl-muted: #b8c5cf;
    --pl-faint: #8da0ae;
    --pl-line: #344b5d;
    --pl-line-strong: #4d687c;
    --pl-accent: #79e0cf;
    --pl-accent-deep: #174b47;
    --pl-gold: #efc778;
    --pl-good: #87dda3;
    --pl-warn: #f0c778;
    --pl-bad: #ff958e;
    --pl-disputed: #b5a7ff;
    --pl-contained: #dd9cf5;
    --pl-shadow: 0 24px 76px rgb(0 0 0 / .35);
    --pl-radius: 1rem;
    --pl-radius-small: .72rem;
    --pl-serif: Georgia, "Times New Roman", serif;
    --pl-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --pl-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  }
}

@layer base {
  body.pl-page {
    min-width: 280px;
    background:
      radial-gradient(circle at 12% 6%, rgb(26 111 107 / .20), transparent 33rem),
      radial-gradient(circle at 88% 18%, rgb(112 67 145 / .13), transparent 31rem),
      var(--pl-bg);
    color: var(--pl-ink);
    font: 400 1rem/1.68 var(--pl-sans);
    text-rendering: optimizeLegibility;
  }
  a { color: var(--pl-accent); text-underline-offset: .19em; }
  a:hover { text-decoration-thickness: .15em; }
  h1, h2, h3 { font-family: var(--pl-serif); letter-spacing: -.025em; }
  h1 { font-size: clamp(3rem, 7.5vw, 6.9rem); line-height: .9; }
  h2 { font-size: clamp(2rem, 4.2vw, 3.75rem); line-height: 1.02; }
  h3 { font-size: 1.3rem; line-height: 1.2; }
  p + p { margin-top: .8rem; }
  code, .pl-hash, .pl-code, .pl-selector-id { font-family: var(--pl-mono); }
  :focus-visible { outline: 3px solid var(--pl-gold); outline-offset: 3px; }
}

@layer layout {
  .pl-shell { width: min(1240px, calc(100% - 2rem)); margin-inline: auto; }
  .pl-site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 30;
    border-bottom: 1px solid rgb(121 224 207 / .22);
    background: rgb(7 10 15 / .92);
    backdrop-filter: blur(18px);
  }
  .pl-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 76px;
  }
  .pl-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .18rem; }
  .pl-main { padding: 0 0 5rem; }
  .pl-hero { padding: clamp(3.3rem, 8vw, 7.1rem) 0 3.2rem; }
  .pl-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .78fr);
    gap: 2rem;
    align-items: end;
  }
  .pl-journey {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .42rem;
    margin-top: 2rem;
  }
  .pl-question-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
  .pl-selector-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
  .pl-layout { display: grid; grid-template-columns: 258px minmax(0, 1fr); gap: 2rem; align-items: start; }
  .pl-rail { position: sticky; top: 96px; }
  .pl-content { min-width: 0; }
  .pl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .pl-position-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
  .pl-support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .pl-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
  .pl-section { scroll-margin-top: 102px; margin: 0 0 4.25rem; }
  .pl-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(260px, .78fr);
    gap: 1.35rem;
    align-items: end;
    margin-bottom: 1.25rem;
  }
  .pl-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: .7rem;
    align-items: end;
    margin-bottom: 1.15rem;
  }
  .pl-evidence-list, .pl-obligation-list, .pl-timeline { display: grid; gap: .78rem; }
  .pl-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .58rem; }
  .pl-footer { border-top: 1px solid var(--pl-line); padding: 2rem 0; }
  .pl-footer-inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
}

@layer components {
  .pl-skip {
    position: fixed;
    left: -9999px;
    top: 1rem;
    z-index: 100;
    border-radius: .55rem;
    background: #fff;
    color: #000;
    padding: .75rem 1rem;
  }
  .pl-skip:focus, .pl-skip:focus-visible { left: 1rem; }
  .pl-brand { color: var(--pl-ink); text-decoration: none; font-weight: 850; letter-spacing: .02em; }
  .pl-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: .45rem .68rem;
    border-radius: .55rem;
    color: var(--pl-muted);
    text-decoration: none;
  }
  .pl-nav a:hover, .pl-nav a[aria-current="page"] { background: var(--pl-surface-2); color: var(--pl-ink); }
  .pl-reduced-mode { display: none; }
  .pl-kicker, .pl-label {
    color: var(--pl-accent);
    font-size: .73rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  .pl-lede { max-width: 73ch; color: var(--pl-muted); font-size: clamp(1.04rem, 1.7vw, 1.18rem); }
  .pl-boundary {
    margin-top: 1.35rem;
    padding: 1.12rem 1.2rem;
    border-left: 4px solid var(--pl-gold);
    border-radius: 0 .82rem .82rem 0;
    background: rgb(239 199 120 / .08);
    max-width: 79ch;
  }
  .pl-hero-panel, .pl-card, .pl-overview, .pl-controls, .pl-rail, .pl-details, .pl-selector, .pl-question, .pl-contest {
    border: 1px solid var(--pl-line);
    border-radius: var(--pl-radius);
    background: linear-gradient(145deg, rgb(21 33 44 / .95), rgb(10 16 23 / .97));
    box-shadow: var(--pl-shadow);
  }
  .pl-hero-panel, .pl-card, .pl-overview, .pl-controls, .pl-rail, .pl-contest { padding: 1.15rem; }
  .pl-hero-panel { border-color: rgb(121 224 207 / .34); }
  .pl-hero-panel h2 { font-size: clamp(1.65rem, 2.5vw, 2.45rem); max-width: 16ch; }
  .pl-question { min-height: 118px; padding: 1rem; box-shadow: none; }
  .pl-question strong { display: block; margin-bottom: .35rem; color: var(--pl-accent); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }
  .pl-question span { display: block; line-height: 1.42; }
  .pl-journey span {
    display: grid;
    place-items: center;
    min-height: 58px;
    padding: .62rem .45rem;
    border: 1px solid var(--pl-line);
    border-radius: .65rem;
    background: var(--pl-surface);
    text-align: center;
    font-size: .73rem;
    line-height: 1.25;
  }
  .pl-journey span:last-child { border-color: var(--pl-accent); color: var(--pl-accent); box-shadow: inset 0 0 0 1px rgb(121 224 207 / .18); }
  .pl-field { min-width: 0; }
  .pl-field label { display: block; margin-bottom: .26rem; color: var(--pl-muted); font-size: .82rem; font-weight: 750; }
  .pl-field select, .pl-field input, .pl-button {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--pl-line-strong);
    border-radius: .66rem;
    background: var(--pl-bg-soft);
    color: var(--pl-ink);
    padding: .65rem .75rem;
  }
  .pl-button {
    width: auto;
    cursor: pointer;
    border-color: var(--pl-accent);
    background: var(--pl-accent);
    color: #03130f;
    font-weight: 850;
  }
  .pl-button:hover { filter: brightness(1.08); }
  .pl-selector {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .8rem;
    align-items: center;
    padding: 1rem;
    color: var(--pl-ink);
    text-decoration: none;
    box-shadow: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  }
  .pl-selector:hover, .pl-selector[aria-current="true"] { border-color: var(--pl-accent); transform: translateY(-1px); }
  .pl-selector[aria-current="true"] { box-shadow: 0 0 0 2px rgb(121 224 207 / .18); }
  .pl-selector-index { color: var(--pl-gold); font: 700 1.8rem/1 var(--pl-serif); }
  .pl-selector-id { color: var(--pl-faint); font-size: .76rem; overflow-wrap: anywhere; }
  .pl-selector-meta { color: var(--pl-muted); font-size: .82rem; }
  .pl-status {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .25rem .56rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.25;
  }
  .pl-rail strong { display: block; margin-bottom: .72rem; }
  .pl-rail a { display: block; min-height: 40px; padding: .46rem .52rem; border-radius: .46rem; color: var(--pl-muted); text-decoration: none; }
  .pl-rail a:hover { background: var(--pl-surface-2); color: var(--pl-ink); }
  .pl-overview-top, .pl-evidence-top { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
  .pl-summary { max-width: 78ch; margin: .8rem 0 1rem; color: var(--pl-muted); }
  .pl-fact { padding: .76rem; border: 1px solid var(--pl-line); border-radius: .72rem; background: rgb(7 10 15 / .48); min-width: 0; overflow-wrap: anywhere; }
  .pl-fact span { display: block; color: var(--pl-muted); font-size: .71rem; letter-spacing: .08em; text-transform: uppercase; }
  .pl-role-card { margin-top: 1rem; padding: 1rem; border: 1px solid rgb(121 224 207 / .36); border-radius: .82rem; background: rgb(121 224 207 / .06); }
  .pl-pills { display: flex; flex-wrap: wrap; gap: .46rem; margin-top: .66rem; }
  .pl-pill { display: inline-flex; padding: .31rem .57rem; border-radius: 999px; background: #243746; color: #dbeaf0; font-size: .75rem; line-height: 1.35; }
  .pl-section-intro { color: var(--pl-muted); max-width: 64ch; }
  .pl-section-head h2 { max-width: 20ch; }
  .pl-overview h2 { max-width: 23ch; }
  .pl-card p + ul, .pl-card h3 + p, .pl-card strong + p, .pl-card strong + div { margin-top: .56rem; }
  .pl-list { padding-left: 1.15rem; }
  .pl-list li + li { margin-top: .43rem; }
  .pl-check-list { list-style: none; display: grid; gap: .48rem; }
  .pl-check-list li { padding: .62rem .68rem; border: 1px solid var(--pl-line); border-radius: .58rem; background: rgb(7 10 15 / .42); }
  .pl-evidence, .pl-obligation, .pl-state, .pl-position {
    padding: 1rem;
    border: 1px solid var(--pl-line);
    border-radius: .82rem;
    background: rgb(7 10 15 / .52);
  }
  .pl-position { border-left: 4px solid var(--pl-accent); }
  .pl-position:nth-child(2) { border-left-color: var(--pl-disputed); }
  .pl-position:nth-child(3) { border-left-color: var(--pl-gold); }
  .pl-evidence-top { align-items: center; }
  .pl-hash { overflow-wrap: anywhere; color: #ced8df; font-size: .77rem; }
  .pl-obligation { border-color: rgb(240 199 120 / .52); }
  .pl-state { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: .8rem; align-items: start; }
  .pl-state-index { color: var(--pl-gold); font: 700 1.48rem/1 var(--pl-serif); }
  .pl-comparison-table { width: 100%; border-collapse: collapse; }
  .pl-comparison-table th, .pl-comparison-table td { padding: .76rem; border: 1px solid var(--pl-line); text-align: left; vertical-align: top; }
  .pl-table-wrap { overflow: auto; max-width: 100%; }
  .pl-details { margin-top: 1rem; overflow: hidden; box-shadow: none; }
  .pl-details summary { cursor: pointer; min-height: 48px; padding: 1rem; font-weight: 850; }
  .pl-details > div { padding: 0 1rem 1rem; }
  .pl-code { max-height: 34rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; padding: 1rem; border: 1px solid var(--pl-line); border-radius: .72rem; background: #040609; color: #dce5ea; }
  .pl-endpoint { display: block; padding: .52rem 0; overflow-wrap: anywhere; }
  .pl-compare label { display: flex; align-items: flex-start; gap: .62rem; min-height: 48px; padding: .68rem; border: 1px solid var(--pl-line); border-radius: .66rem; }
  .pl-compare input[type="checkbox"] { width: 1.1rem; height: 1.1rem; margin-top: .2rem; flex: none; }
  .pl-copy { min-height: 44px; margin-top: .62rem; padding: .53rem .72rem; border: 1px solid var(--pl-line-strong); border-radius: .56rem; background: var(--pl-bg-soft); color: var(--pl-ink); cursor: pointer; }
  .pl-live { margin-top: .68rem; color: var(--pl-muted); }
  .pl-none { padding: 1rem; border: 1px dashed var(--pl-good); border-radius: .82rem; }
  .pl-stack { margin-top: 1rem; }
  .pl-contest { border-color: var(--pl-accent); background: rgb(121 224 207 / .06); }
  .pl-contest .pl-support-grid { margin-top: 1rem; }
  .pl-support-grid > div { padding: 1rem; border: 1px solid var(--pl-line); border-radius: .72rem; background: rgb(7 10 15 / .38); }
}

@layer states {
  .pl-status--good { color: var(--pl-good); }
  .pl-status--limited, .pl-status--partial, .pl-status--incomplete, .pl-status--mandate { color: var(--pl-warn); }
  .pl-status--disputed { color: var(--pl-disputed); }
  .pl-status--contained, .pl-status--capture, .pl-status--retaliation { color: var(--pl-contained); }
  .pl-status--failed, .pl-status--breached { color: var(--pl-bad); }
  .pl-card--good { border-color: rgb(135 221 163 / .5); }
  .pl-card--warn { border-color: rgb(240 199 120 / .58); }
  .pl-card--bad { border-color: rgb(255 149 142 / .66); }
  .pl-card--contained { border-color: rgb(221 156 245 / .58); }
  [data-state="failed"], [data-state="breached"], [data-state="retaliation_detected"] { border-color: var(--pl-bad); }
  [data-state="pending"], [data-state="partial"], [data-state="unobserved"] { border-color: var(--pl-warn); }
  [data-state="passed"], [data-state="complete"] { border-color: var(--pl-good); }
}

@layer responsive {
  @media (max-width: 1110px) {
    .pl-journey { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .pl-question-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-position-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-controls .pl-button { align-self: end; }
    .pl-layout { grid-template-columns: 1fr; }
    .pl-rail { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
    .pl-rail strong { grid-column: 1 / -1; }
    .pl-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 760px) {
    .pl-shell { width: min(100% - 1rem, 1240px); }
    .pl-site-header { position: static; }
    .pl-header-inner { align-items: flex-start; padding: .72rem 0; }
    .pl-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
    .pl-nav a { padding: .55rem; }
    .pl-hero { padding-top: 2.6rem; }
    .pl-hero-grid, .pl-selector-grid, .pl-grid, .pl-position-grid, .pl-section-head, .pl-support-grid, .pl-question-grid, .pl-controls, .pl-compare { grid-template-columns: 1fr; }
    .pl-journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-facts { grid-template-columns: 1fr; }
    .pl-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pl-selector { grid-template-columns: auto minmax(0, 1fr); }
    .pl-selector .pl-status { grid-column: 2; justify-self: start; }
    .pl-overview-top { display: block; }
    .pl-overview-top .pl-status { margin-top: .75rem; }
    .pl-button { width: 100%; }
    .pl-section { margin-bottom: 3.25rem; }
  }
  @media (max-width: 380px) {
    .pl-nav, .pl-journey, .pl-rail { grid-template-columns: 1fr; }
    h1 { font-size: 2.72rem; }
    .pl-selector { grid-template-columns: 1fr; }
    .pl-selector .pl-status { grid-column: 1; }
    .pl-card, .pl-overview, .pl-controls, .pl-rail, .pl-contest { padding: .9rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  }
  @media (forced-colors: active) {
    .pl-status, .pl-card, .pl-selector, .pl-overview, .pl-controls, .pl-rail, .pl-details, .pl-question, .pl-contest, .pl-position, .pl-evidence, .pl-obligation, .pl-state {
      forced-color-adjust: auto;
      border: 1px solid CanvasText;
      background: Canvas;
      color: CanvasText;
    }
    .pl-status { border-width: 2px; }
  }
}

@layer print {
  @media print {
    body.pl-page { background: #fff; color: #000; font-size: 10pt; }
    .pl-site-header, .pl-controls, .pl-selector-grid, .pl-rail, .pl-footer, .pl-copy, .pl-compare, .pl-reduced-mode { display: none !important; }
    .pl-shell { width: 100%; }
    .pl-main, .pl-hero { padding: 0; }
    .pl-hero-grid, .pl-layout, .pl-grid, .pl-position-grid, .pl-section-head, .pl-support-grid, .pl-facts { display: block; }
    .pl-card, .pl-overview, .pl-details, .pl-evidence, .pl-obligation, .pl-state, .pl-position, .pl-contest {
      box-shadow: none;
      background: #fff;
      color: #000;
      border: 1px solid #444;
      break-inside: avoid;
      margin: .55rem 0;
    }
    .pl-details > div, .pl-details[open] > div { display: block; }
    .pl-status { color: #000; }
    .pl-code { max-height: none; background: #fff; color: #000; }
    .pl-section { margin-bottom: 1.5rem; }
    a { color: #000; text-decoration: none; }
  }
}

/* Unlayered delivery-resilience rules intentionally supersede the inline critical fallback. */
.pl-reduced-mode { display: none; }
.pl-skip:focus, .pl-skip:focus-visible { outline: 3px solid #efc778; outline-offset: 3px; }