/* Property skin and editorial composition. Core UI remains the component owner. */
:root {
  --ui-color-accent: #5b21b6;
  --ui-color-accent-ink: #ffffff;
  --ui-color-accent-tint: #f5f3ff;
  --ui-color-focus: #6d28d9;
  --ui-container: 72rem;
  --scanner-warning-bg: #fffbeb;
  --scanner-warning-border: #b45309;
  --scanner-evidence-bg: #111827;
  --scanner-evidence-ink: #f9fafb;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ui-color-accent: #c4b5fd;
    --ui-color-accent-ink: #2e1065;
    --ui-color-accent-tint: #2e2550;
    --ui-color-focus: #c4b5fd;
    --scanner-warning-bg: #3a2b12;
    --scanner-warning-border: #fbbf24;
    --scanner-evidence-bg: #080d18;
    --scanner-evidence-ink: #f9fafb;
  }
}

:root[data-theme="dark"] {
  --ui-color-accent: #c4b5fd;
  --ui-color-accent-ink: #2e1065;
  --ui-color-accent-tint: #2e2550;
  --ui-color-focus: #c4b5fd;
  --scanner-warning-bg: #3a2b12;
  --scanner-warning-border: #fbbf24;
  --scanner-evidence-bg: #080d18;
  --scanner-evidence-ink: #f9fafb;
}

.site-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-4);
  flex-wrap: wrap;
  min-width: 0;
}

.site-brand__name {
  color: var(--ui-color-ink);
  font-size: var(--ui-text-lg);
  font-weight: 780;
  letter-spacing: -0.015em;
  text-decoration: none;
}

.site-brand__promise {
  color: var(--ui-color-muted);
  font-size: var(--ui-text-sm);
  margin: 0;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2) var(--ui-space-4);
  flex-wrap: wrap;
  padding-block: var(--ui-space-3);
}

.site-nav a,
.site-footer a,
.site-prose a:not(.ui-btn) {
  color: var(--ui-color-accent);
  text-underline-offset: 0.18em;
}

.site-nav a[aria-current="page"] {
  color: var(--ui-color-ink);
  font-weight: 700;
  text-decoration-thickness: 0.16em;
}

.site-hero {
  display: grid;
  gap: var(--ui-space-5);
  padding-block: var(--ui-space-5) var(--ui-space-7);
}

.site-hero__lede {
  font-size: var(--ui-text-xl);
  line-height: 1.45;
  max-width: 49rem;
  margin: 0;
}

.site-kicker {
  color: var(--ui-color-accent);
  font-size: var(--ui-text-sm);
  font-weight: 760;
  letter-spacing: 0.065em;
  margin: 0;
  text-transform: uppercase;
}

.site-scope,
.site-warning {
  border: 1px solid var(--ui-color-border-strong);
  border-inline-start: 0.35rem solid var(--ui-color-accent);
  border-radius: var(--ui-radius-md);
  padding: var(--ui-space-4) var(--ui-space-5);
}

.site-scope {
  background: var(--ui-color-accent-tint);
}

.site-warning {
  background: var(--scanner-warning-bg);
  border-inline-start-color: var(--scanner-warning-border);
}

.site-scope > :first-child,
.site-warning > :first-child,
.site-prose > :first-child,
.site-section > :first-child {
  margin-top: 0;
}

.site-scope > :last-child,
.site-warning > :last-child,
.site-prose > :last-child,
.site-section > :last-child {
  margin-bottom: 0;
}

.site-grid {
  display: grid;
  gap: var(--ui-space-5);
}

.site-grid--cards {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.site-section {
  margin-block: var(--ui-space-7);
}

.site-section + .site-section {
  border-top: 1px solid var(--ui-color-border);
  padding-top: var(--ui-space-7);
}

.site-prose {
  max-width: 50rem;
}

.site-prose p,
.site-prose li,
.site-section p,
.site-section li {
  max-width: 72ch;
}

.site-table-wrap {
  margin-block: var(--ui-space-5);
  overflow-x: auto;
}

.site-table {
  border-collapse: collapse;
  min-width: 44rem;
  width: 100%;
}

.site-table th,
.site-table td {
  border-bottom: 1px solid var(--ui-color-border);
  padding: var(--ui-space-3);
  text-align: start;
  vertical-align: top;
}

.site-table th {
  background: var(--ui-color-surface-sunken);
  font-weight: 750;
}

.site-example {
  background: var(--scanner-evidence-bg);
  border: 1px solid var(--ui-color-border-strong);
  border-radius: var(--ui-radius-md);
  color: var(--scanner-evidence-ink);
  direction: ltr;
  font-family: var(--ui-font-mono);
  line-height: 1.65;
  overflow-wrap: anywhere;
  padding: var(--ui-space-4);
  unicode-bidi: isolate;
}

.site-flow {
  counter-reset: scanner-flow;
  display: grid;
  gap: var(--ui-space-3);
  list-style: none;
  padding: 0;
}

.site-flow > li {
  align-items: start;
  counter-increment: scanner-flow;
  display: grid;
  gap: var(--ui-space-3);
  grid-template-columns: 2rem 1fr;
}

.site-flow > li::before {
  align-items: center;
  background: var(--ui-color-accent-tint);
  border: 1px solid var(--ui-color-border-strong);
  border-radius: 999px;
  color: var(--ui-color-accent);
  content: counter(scanner-flow);
  display: inline-flex;
  font-size: var(--ui-text-sm);
  font-weight: 750;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.site-actions {
  display: flex;
  gap: var(--ui-space-3);
  flex-wrap: wrap;
  margin-block: var(--ui-space-5);
}

.site-source-list,
.site-meta {
  font-size: var(--ui-text-sm);
}

.site-footer {
  display: grid;
  gap: var(--ui-space-3);
}

.site-footer__links {
  display: flex;
  gap: var(--ui-space-2) var(--ui-space-4);
  flex-wrap: wrap;
}

.site-footer p {
  margin: 0;
}

.site-workbench-intro {
  max-width: 54rem;
  margin-bottom: var(--ui-space-6);
}

.site-workbench-boundary {
  margin-bottom: var(--ui-space-5);
}

.site-export-warning {
  font-size: var(--ui-text-sm);
  margin-block: var(--ui-space-4);
}

/* Core buttons declare display, so preserve the HTML hidden contract inside the workbench. */
.ui-utility-workbench [hidden] {
  display: none !important;
}

.site-steps > li {
  margin-block: var(--ui-space-3);
  padding-inline-start: var(--ui-space-2);
}

@media (max-width: 40rem) {
  .site-hero__lede {
    font-size: var(--ui-text-lg);
  }

  .site-nav {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (forced-colors: active) {
  .site-scope,
  .site-warning,
  .site-example,
  .site-table th,
  .site-table td,
  .site-flow > li::before {
    border-color: CanvasText;
  }
}

/* ── LANDING SURFACE ────────────────────────────────────────────────────
   The comp's shape, built on Core UI's tokens rather than beside them: a
   dark masthead, one accent, and cards that carry their own icon. Nothing
   here changes the workbench, which keeps its own no-egress surface. */

:root {
  --site-ink-deep: #0f1024;
  --site-surface: #f7f7fb;
  --site-card: #ffffff;
  --site-line: #e6e6f0;
  --site-accent: #5b3df5;
  --site-accent-soft: #ede9fe;
  --site-danger-soft: #fee2e2;
  --site-danger-ink: #b91c1c;
  --site-warn-soft: #fef3c7;
  --site-warn-ink: #92400e;
  --site-ok-soft: #dcfce7;
  --site-ok-ink: #166534;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --site-surface: #0b0b14;
    --site-card: #14142a;
    --site-line: #26264a;
    --site-accent: #a78bfa;
    --site-accent-soft: #241f45;
    --site-danger-soft: #3a1a1a;
    --site-danger-ink: #fca5a5;
    --site-warn-soft: #3a2b12;
    --site-warn-ink: #fcd34d;
    --site-ok-soft: #10281a;
    --site-ok-ink: #86efac;
  }
}

:root[data-theme="dark"] {
  --site-surface: #0b0b14;
  --site-card: #14142a;
  --site-line: #26264a;
  --site-accent: #a78bfa;
  --site-accent-soft: #241f45;
  --site-danger-soft: #3a1a1a;
  --site-danger-ink: #fca5a5;
  --site-warn-soft: #3a2b12;
  --site-warn-ink: #fcd34d;
  --site-ok-soft: #10281a;
  --site-ok-ink: #86efac;
}

/* The masthead is dark in both schemes: it is the product's one fixed
   surface, and a nav that inverts with the theme reads as a different
   site rather than the same one at night. */
.ui-header {
  background: var(--site-ink-deep);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.ui-header .site-brand__name,
.ui-header .site-brand__promise {
  color: #ffffff;
}

.ui-header .site-brand__promise {
  color: rgba(255, 255, 255, 0.62);
}

.site-brand__lockup {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-3);
  min-width: 0;
}

/* A flex item's default min-width is its content, so the brand text pushed
   the masthead wider than a 320px viewport at 200% zoom. */
.site-brand__lockup > div {
  min-width: 0;
}

.site-brand__mark {
  color: var(--site-accent);
  flex: none;
  height: 2.25rem;
  width: 2.25rem;
}

.site-badge {
  background: var(--site-accent);
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-left: var(--ui-space-2);
  padding: 0.125rem 0.5rem;
  text-transform: uppercase;
  vertical-align: middle;
}

.site-kicker--pill {
  align-items: center;
  background: var(--site-accent-soft);
  border-radius: 999px;
  color: var(--site-accent);
  display: inline-flex;
  font-size: var(--ui-text-sm);
  font-weight: 650;
  gap: var(--ui-space-2);
  letter-spacing: 0.02em;
  padding: 0.375rem 0.875rem;
}

.site-hero__title {
  font-size: clamp(2.25rem, 5.5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: var(--ui-space-4) 0;
}

.site-hero__title em {
  color: var(--site-accent);
  font-style: normal;
}

.site-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-5);
  list-style: none;
  margin: var(--ui-space-5) 0 0;
  padding: 0;
}

.site-trust li {
  align-items: center;
  color: var(--ui-color-muted);
  display: flex;
  font-size: var(--ui-text-sm);
  font-weight: 600;
  gap: var(--ui-space-2);
}

.site-trust svg {
  color: var(--site-accent);
  flex: none;
  height: 1.125rem;
  width: 1.125rem;
}

/* Feature and detection cards. The icon tile is decorative and is hidden
   from assistive technology; the heading carries the meaning. */
.site-feature-grid {
  display: grid;
  gap: var(--ui-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  margin-top: var(--ui-space-5);
}

.site-feature {
  background: var(--site-card);
  border: 1px solid var(--site-line);
  border-radius: 0.875rem;
  padding: var(--ui-space-5);
}

.site-feature h3 {
  font-size: var(--ui-text-base);
  margin: var(--ui-space-3) 0 var(--ui-space-2);
}

.site-feature p {
  color: var(--ui-color-muted);
  font-size: var(--ui-text-sm);
  margin: 0;
}

.site-tile {
  align-items: center;
  border-radius: 0.625rem;
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  width: 2.5rem;
}

.site-tile svg { height: 1.25rem; width: 1.25rem; }
.site-tile--accent { background: var(--site-accent-soft); color: var(--site-accent); }
.site-tile--danger { background: var(--site-danger-soft); color: var(--site-danger-ink); }
.site-tile--warn { background: var(--site-warn-soft); color: var(--site-warn-ink); }
.site-tile--ok { background: var(--site-ok-soft); color: var(--site-ok-ink); }

.site-example-chip {
  background: var(--site-accent-soft);
  border-radius: 0.375rem;
  color: var(--site-accent);
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  margin-top: var(--ui-space-3);
  padding: 0.25rem 0.5rem;
}

.site-cta-panel {
  align-items: center;
  background: var(--site-card);
  border: 1px solid var(--site-line);
  border-radius: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-4);
  justify-content: space-between;
  margin-top: var(--ui-space-6);
  padding: var(--ui-space-5);
}

.site-cta-panel h2 {
  font-size: var(--ui-text-lg);
  margin: 0 0 var(--ui-space-2);
}

.site-cta-panel p {
  color: var(--ui-color-muted);
  margin: 0;
  max-width: 46ch;
}

/* The masthead and the nav are siblings in the base layout, so the bar is
   made continuous here rather than by forking the layout: the nav paints
   its own full-bleed band behind a width-constrained row. */
.ui-page {
  background: var(--site-surface);
  /* The nav's bleed is painted by a spread shadow, which would otherwise
     extend the scrollable area. `clip` rather than `hidden`: it contains
     the decoration without turning the body into a scroll container. */
  overflow-x: clip;
}

/* The band is a REAL background on the nav, bled sideways by a shadow that
   is clipped to the viewport. A ::before was tried first and is wrong: the
   element itself then has no background, so white link text sits on the
   light page surface anywhere the pseudo-element does not paint — forced
   colours, print, or any engine that drops it — and a contrast sweep
   measuring the true backdrop reads 1.07:1, which is what it really is. */
nav.ui-container {
  background: var(--site-ink-deep);
  box-shadow: 0 0 0 100vmax var(--site-ink-deep);
  clip-path: inset(0 -100vmax);
}

.ui-header + nav.ui-container .site-nav a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
}

.ui-header + nav.ui-container .site-nav a:hover,
.ui-header + nav.ui-container .site-nav a:focus-visible {
  color: #ffffff;
}

.ui-header + nav.ui-container .site-nav a[aria-current="page"] {
  color: #ffffff;
  text-decoration: underline;
  text-decoration-color: var(--site-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.6rem;
}

/* An inline-flex pill inside a stretching flex column still fills the
   row; this keeps it the width of its own words. */
.site-kicker--pill {
  align-self: flex-start;
  width: fit-content;
}

.site-hero {
  display: flex;
  flex-direction: column;
}

.site-hero__lede {
  max-width: 54ch;
}

/* ── THE WORKBENCH, TWO PANELS ──────────────────────────────────────────
   Input on the left, results on the right, as the comps show. The runtime
   finds its controls by data-utility-role rather than by position, so the
   slot can be restructured freely — but the tab ORDER is a contract the
   keyboard test drives, so nothing here is display:none and the source,
   file and run controls stay reachable in that order. */
.scan-privacy-strip {
  align-items: center;
  background: var(--site-card);
  border: 1px solid var(--site-line);
  border-radius: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-3);
  margin-bottom: var(--ui-space-5);
  padding: var(--ui-space-3) var(--ui-space-4);
}

.scan-privacy-strip svg {
  color: var(--site-accent);
  flex: none;
  height: 1.25rem;
  width: 1.25rem;
}

.scan-privacy-strip p {
  color: var(--ui-color-muted);
  flex: 1 1 min(24rem, 100%);
  font-size: var(--ui-text-sm);
  margin: 0;
}

.scan-privacy-strip strong { color: var(--ui-color-ink); }
.scan-privacy-strip a { font-size: var(--ui-text-sm); font-weight: 600; }

.scan-grid {
  align-items: start;
  display: grid;
  gap: var(--ui-space-5);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}

@media (max-width: 60rem) {
  .scan-grid { grid-template-columns: minmax(0, 1fr); }
}

.scan-panel {
  background: var(--site-card);
  border: 1px solid var(--site-line);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-4);
  padding: var(--ui-space-5);
}

.scan-panel__title {
  font-size: var(--ui-text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}

.scan-panel__trust {
  border-top: 1px solid var(--site-line);
  color: var(--ui-color-muted);
  font-size: var(--ui-text-sm);
  margin: 0;
  padding-top: var(--ui-space-3);
}

.scan-lookfor h3 {
  font-size: var(--ui-text-base);
  margin: 0 0 var(--ui-space-3);
}

.scan-lookfor ul {
  display: grid;
  gap: var(--ui-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.scan-lookfor li {
  color: var(--ui-color-muted);
  font-size: var(--ui-text-sm);
}

.scan-lookfor strong {
  color: var(--ui-color-ink);
  display: block;
  margin: var(--ui-space-2) 0 0.125rem;
}

.scan-lookfor .site-tile { height: 2rem; width: 2rem; }
.scan-lookfor .site-tile svg { height: 1rem; width: 1rem; }

/* On the workbench the panels are the page, so the intro is a caption
   rather than a landing hero. */
.site-workbench-intro {
  margin-bottom: var(--ui-space-4);
}

.site-workbench-intro .ui-h1 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin: var(--ui-space-2) 0;
}

.site-workbench-intro .site-hero__lede {
  font-size: var(--ui-text-base);
  margin: 0;
}

/* The empty state lives in CSS because the result section is genuinely
   empty until a scan renders into it: no script has to remember to clear
   a placeholder, and it cannot survive a result by accident. */
.ui-utility-result:empty {
  border: 1px dashed var(--site-line);
  border-radius: 0.875rem;
  display: block;
  padding: var(--ui-space-7) var(--ui-space-5);
  text-align: center;
}

.ui-utility-result:empty::before {
  color: var(--ui-color-muted);
  content: "No scan results yet — paste text or choose a file, then run the scan.";
  display: block;
  font-size: var(--ui-text-sm);
  margin: 0 auto;
  max-width: 32ch;
}

.site-workbench-intro .site-kicker { margin-bottom: 0; }
.site-workbench-intro + .ui-utility-workbench,
.ui-utility-workbench { margin-top: var(--ui-space-4); }
.site-hero.site-workbench-intro { gap: var(--ui-space-2); }

/* The hero is two columns above 60rem, as the comps show: the promise on
   the left, a decorative scanned document on the right. */
.site-hero-split {
  align-items: center;
  display: grid;
  gap: var(--ui-space-6);
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
}

@media (max-width: 60rem) {
  .site-hero-split { grid-template-columns: minmax(0, 1fr); }
  .site-hero-art { display: none; }
}

.site-hero-art {
  position: relative;
  padding: var(--ui-space-6) 0;
}

.site-hero-art__doc {
  background: var(--site-card);
  border: 1px solid var(--site-line);
  border-radius: 0.875rem;
  box-shadow: 0 18px 40px -24px rgba(15, 16, 36, 0.45);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-left: auto;
  padding: var(--ui-space-5);
  width: min(100%, 22rem);
}

.site-hero-art__dots { display: flex; gap: 0.375rem; margin-bottom: var(--ui-space-2); }
.site-hero-art__dots i { background: var(--site-line); border-radius: 999px; height: 0.5rem; width: 0.5rem; }

.site-hero-art__line {
  background: var(--site-line);
  border-radius: 999px;
  height: 0.5rem;
}

.site-hero-art__line--short { width: 62%; }

.site-hero-art__chip {
  background: var(--site-card);
  border: 1px solid var(--site-line);
  border-radius: 999px;
  box-shadow: 0 10px 24px -16px rgba(15, 16, 36, 0.5);
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0;
  padding: 0.4375rem 0.875rem;
  position: absolute;
  white-space: nowrap;
}

.site-hero-art__chip--danger { color: var(--site-danger-ink); left: 0; top: 12%; }
.site-hero-art__chip--warn { color: var(--site-warn-ink); left: 6%; top: 44%; }
.site-hero-art__chip--accent { color: var(--site-accent); left: 0; top: 74%; }

.site-brand__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-3);
  min-width: 0;
}

.site-theme-toggle {
  align-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: var(--ui-text-sm);
  font-weight: 600;
  gap: var(--ui-space-2);
  padding: 0.4375rem 0.875rem;
}

.site-theme-toggle:hover { background: rgba(255, 255, 255, 0.1); }
.site-theme-toggle svg { height: 1rem; width: 1rem; }

/* Tabs, samples and tiles. The markup is the property's; the behaviour is
   the engine's, so nothing here binds an event. */
.scan-tabs {
  border-bottom: 1px solid var(--site-line);
  display: flex;
  gap: var(--ui-space-4);
}

.scan-tabs [role="tab"] {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ui-color-muted);
  cursor: pointer;
  font: inherit;
  font-weight: 650;
  margin-bottom: -1px;
  padding: 0 0 var(--ui-space-3);
}

.scan-tabs [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--site-accent);
  color: var(--site-accent);
}

.scan-tabpanel { display: flex; flex-direction: column; gap: var(--ui-space-4); }

.scan-samples { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }

.scan-samples__label {
  color: var(--ui-color-muted);
  flex: 1 0 100%;
  font-size: var(--ui-text-sm);
  font-weight: 600;
  margin: 0;
}

.scan-sample {
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  border-radius: 999px;
  color: var(--ui-color-ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.3125rem 0.75rem;
}

.scan-sample:hover { border-color: var(--site-accent); color: var(--site-accent); }

.scan-tiles {
  display: grid;
  gap: var(--ui-space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.scan-tiles li {
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: var(--ui-space-3);
}

.scan-tiles__label {
  color: var(--ui-color-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.scan-tiles strong { font-size: var(--ui-text-lg); font-weight: 750; }
.scan-tiles .site-tile { height: 1.75rem; margin-bottom: var(--ui-space-2); width: 1.75rem; }
.scan-tiles .site-tile svg { height: 0.875rem; width: 0.875rem; }

.site-detect-grid {
  display: grid;
  gap: var(--ui-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  margin-top: var(--ui-space-4);
}

.site-detect-grid .site-feature h3 { margin-top: 0; }