/* ==========================================================================
   SENNEN INTELLIGENCE — NIGHT PASSAGE BRAND SYSTEM v2.0
   Drop-in stylesheet. Load AFTER fonts, BEFORE (or instead of) legacy styles.
   Retired: Midnight Navy #0D182A, Intelligence Gold #C9A55A — nowhere, in no quantity.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@300;400;500&display=swap');

:root {
  /* Core */
  --ink: #0C1517;          /* Deep Water — primary dark ground */
  --fog: #EEF2F1;          /* Sea Fog — primary light ground / text on ink */
  --beam: #0FC98C;         /* Beam — accent, ONE element per surface */
  --beam-deep: #0B8F76;    /* Beam on light grounds (text-safe) */

  /* Support */
  --haze: #7E8F8C;         /* secondary text on ink */
  --basalt: #4A5654;       /* secondary text on fog */
  --grid-dark: rgba(238,242,241,0.07);    /* borders on ink */
  --grid-light: #D9E1DF;   /* borders on fog */
  --surface-raised: #111D1F; /* cards / inputs on ink */
  --surf-1: #111D1F;
  --surf-2: #162022;
  --border-mid: rgba(238,242,241,0.12);
  --border-beam: rgba(15,201,140,0.25);

  /* Signals — product UI only */
  --clear: #0FC98C;        --clear-deep: #0B8F76;
  --review: #E8B341;       --review-deep: #8F6A14;
  --restricted: #F2655A;   --restricted-deep: #B23A30;

  /* Type */
  --font-display: 'Space Grotesk', sans-serif;        /* marketing headlines + reports only */
  --font-ui: 'Space Grotesk', system-ui, sans-serif;  /* everything else */
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* HS codes, regs, timestamps */

  --radius: 6px;
  --radius-pill: 99px;

  /* Motion — "motion is evidence of work, never decoration" */
  --motion-fast:120ms;        /* micro feedback: hover, focus, press */
  --motion-base:200ms;        /* standard state change: accordion, toggle, chip */
  --motion-deliberate:320ms;  /* findings appearing: banners, cards */
  --motion-reveal:480ms;      /* hard ceiling — nothing takes longer, anywhere */
  --ease-standard:cubic-bezier(0.2, 0, 0, 1);  /* default: fast start, firm settle */
  --ease-enter:cubic-bezier(0, 0, 0.2, 1);     /* elements arriving */
  --ease-exit:cubic-bezier(0.4, 0, 1, 1);      /* elements leaving — leave faster than you arrive */
  --motion-rise:6px;          /* max travel distance for ANY entrance — never slide across the screen */
  --stagger:60ms;              /* sequence interval when findings are read out */
  --cursor-cadence:1.1s;       /* the examiner's cursor blink */
}

/* ---------- Base ---------- */
html { -webkit-font-smoothing: antialiased; }
body {
  background: var(--ink);
  color: var(--fog);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
}
::selection { background: var(--beam); color: var(--ink); }

/* Light surfaces (reports, dense reading) */
.surface-light { background: var(--fog); color: var(--ink); }
.surface-light .text-secondary { color: var(--basalt); }

.text-secondary { color: var(--haze); }

/* ---------- Headings ---------- */
/* Serif = marketing headlines and report titles ONLY. Product UI stays Inter. */
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  text-transform: none; /* never all-caps headlines */
}
h1 { font-size: clamp(30px, 5vw, 46px); }
h2 { font-size: clamp(22px, 3.4vw, 30px); }
h3, h4, h5, h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: -0.005em;
}
h3 { font-size: 19px; }

/* ---------- Mono data: HS codes, regulation refs, timestamps ---------- */
code, .hs-code, .reg-ref, .mono, .timestamp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--haze);
}
.surface-light .eyebrow { color: var(--basalt); }

/* ---------- Links ---------- */
a { color: var(--beam); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.surface-light a { color: var(--beam-deep); }

/* ---------- Buttons ---------- */
.btn, button.primary, .btn-primary {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 15px;
  border-radius: var(--radius);
  padding: 11px 22px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity .15s ease;
}
.btn-primary { background: var(--beam); color: var(--ink); }
.btn-primary:hover { opacity: .9; }
.btn-secondary {
  background: transparent;
  color: var(--fog);
  border-color: var(--grid-dark);
}
.btn-secondary:hover { border-color: var(--haze); }
.surface-light .btn-secondary { color: var(--ink); border-color: var(--grid-light); }
/* Rule: btn-primary is a Beam element — max one visible per view. */

/* ---------- Inputs ---------- */
input[type="text"], input[type="password"], input[type="email"], textarea, select {
  background: var(--surface-raised);
  border: 1px solid var(--grid-dark);
  border-radius: var(--radius);
  color: var(--fog);
  font-family: var(--font-ui);
  font-size: 15px;
  padding: 11px 14px;
  width: 100%;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--beam);
}
::placeholder { color: var(--haze); }
.surface-light input, .surface-light textarea, .surface-light select {
  background: #fff; border-color: var(--grid-light); color: var(--ink);
}

/* ---------- Cards / panels (incl. Risk Summary card) ---------- */
.card, .panel, .risk-summary {
  background: var(--surface-raised);
  border: 1px solid var(--grid-dark);
  border-radius: var(--radius);
  padding: 20px;
}
.surface-light .card, .card--light {
  background: #fff; border-color: var(--grid-light); color: var(--ink);
}

/* ---------- Accordions (regulatory trigger analysis) ---------- */
.accordion { border: 1px solid var(--grid-dark); border-radius: var(--radius); overflow: hidden; }
.accordion + .accordion { margin-top: 10px; }
.accordion-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 16px; cursor: pointer;
  font-weight: 500; background: var(--surface-raised);
}
.accordion-body { padding: 14px 16px; border-top: 1px solid var(--grid-dark); color: var(--haze); }
.accordion-body strong { color: var(--fog); }

/* ---------- Signal chips: matchConfidence + outcomes ---------- */
.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid currentColor;
  background: transparent;
}
/* On dark grounds */
.chip--clear,      .chip--high   { color: var(--clear); }
.chip--review,     .chip--medium { color: var(--review); }
.chip--restricted, .chip--low    { color: var(--restricted); }
/* On light grounds — deep values for WCAG AA */
.surface-light .chip--clear,      .surface-light .chip--high   { color: var(--clear-deep); }
.surface-light .chip--review,     .surface-light .chip--medium { color: var(--review-deep); }
.surface-light .chip--restricted, .surface-light .chip--low    { color: var(--restricted-deep); }
/* Note: LOW confidence is informational, not danger — if LOW should read neutral,
   use .chip--neutral instead of .chip--low */
.chip--neutral { color: var(--haze); border-color: var(--grid-dark); }

/* Outcome banner (binary outcome model) */
.outcome {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid;
}
.outcome--clear      { color: var(--clear); border-color: var(--clear); }
.outcome--review     { color: var(--review); border-color: var(--review); }
.outcome--restricted { color: var(--restricted); border-color: var(--restricted); }

/* ---------- Tables (results, reports) ---------- */
table { width: 100%; border-collapse: collapse; }
th {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--haze);
  text-align: left; padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--grid-dark);
}
td { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--grid-dark); }
.surface-light th { color: var(--basalt); border-color: var(--ink); }
.surface-light td { border-color: var(--grid-light); }

/* ---------- Loading counter ---------- */
.loading-counter {
  font-family: var(--font-mono);
  color: var(--haze);
  font-variant-numeric: tabular-nums;
}
.loading-counter .elapsed { color: var(--beam); }

/* ---------- Header / nav lockup ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--grid-dark);
}
.lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.lockup:hover { text-decoration: none; }
.lockup img, .lockup svg { height: 30px; width: auto; display: block; }
.lockup .wordmark {
  font-family: var(--font-ui); font-weight: 600;
  font-size: 21px; letter-spacing: -0.02em; color: var(--fog);
}
.surface-light .lockup .wordmark { color: var(--ink); }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--grid-dark);
  padding: 24px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--haze);
}

/* ---------- Motion: the examiner's cursor (the ONLY continuous/infinite
   animation permitted anywhere in the product — runs only while .is-working
   is present on an ancestor; never persists after work completes) ---------- */
@keyframes sennen-blink { 0%,54% { opacity: 1; } 55%,100% { opacity: 0; } }
.is-working .mark-point { animation: sennen-blink var(--cursor-cadence) steps(1) infinite; }

/* ---------- Motion: determination reveal (top-down, once, staggered) ----------
   Consumers set each .reveal-item's transition-delay via JS (index * --stagger)
   to support a variable number of items, then toggle .revealed on the container
   on the next animation frame to trigger the entrance. */
.reveal-item { opacity: 0; transform: translateY(var(--motion-rise)); }
.revealed .reveal-item {
  opacity: 1;
  transform: none;
  transition: opacity var(--motion-deliberate) var(--ease-enter),
              transform var(--motion-deliberate) var(--ease-enter);
}

/* ---------- Motion: accessibility ----------
   Scoped to the specific selectors above only — never global/universal —
   because login.html also loads this stylesheet and must be unaffected. */
@media (prefers-reduced-motion: reduce) {
  .is-working .mark-point { animation: none; opacity: 1; }
  .reveal-item { transition: none; }
}

/* ---------- Discipline (do not override) ----------
   - No gradients, glows, or box-shadow "lift" on dark surfaces.
   - Beam appears ONCE per view: the mark's point OR the primary action, not both fighting.
   - Long-form reading goes on .surface-light, never on ink.
   - No exclamation marks in any UI string.
--------------------------------------------------- */