/*
 * theme.css — Policy Bridge's design-system values.
 *
 * Navy ink on paper-grey, exact tables, quiet confidence — a tool trusted
 * with somebody else's insurance record. Corporate mood: small corners, one
 * quiet shadow, a neutral grotesque (IBM Plex) at medium weights.
 */

:root {
  --canvas: #f1f2ef;
  --surface: #f9f9f8;
  --surface-2: #e7e9e4;
  --border: #dcdedb;
  --border-strong: #b7bcb6;
  --ink: #14213d;
  --muted: #5b636f;
  --accent: #24467a;
  --accent-hover: #1c3760;
  --accent-ink: #ffffff;
  --accent-text: #24467a;
  --accent-strong: #24467a;
  --accent-soft: #e3e9f2;
  --accent-border: #b9c6da;
  --success: #1c7a4d;
  --success-ink: #ffffff;
  --success-soft: #dcece2;
  --success-strong: #146239;
  --warning: #a15c07;
  --warning-ink: #ffffff;
  --warning-soft: #f3e6d3;
  --warning-strong: #8a4c05;
  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #f6dedc;
  --danger-strong: #96201a;
  --chart-1: #24467a;
  --chart-2: #1c7a83;
  --chart-3: #a15c07;
  --chart-4: #6b3f79;
  --chart-5: #3f7a4a;
  --chart-6: #5b636f;

  --font-display: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --display-weight: 700;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.04em;

  --radius-btn: 6px;
  --radius-card: 8px;
  --radius-input: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: 0 1px 2px color-mix(in srgb, var(--ink) 9%, transparent), 0 1px 1px color-mix(in srgb, var(--ink) 5%, transparent);
  --shadow-raised: 0 8px 20px color-mix(in srgb, var(--ink) 16%, transparent);
  --shadow-btn: none;
  --card-pad: 1.5rem;
  --caps: none;
  --caps-tracking: 0;
  --btn-weight: 600;
  --measure: 68ch;

  --x-band-bg: #0f1a2e;
  --x-band-ink: #eef1f8;
  --x-band-muted: #93a2c0;
  --x-band-border: #24314f;
  --x-band-accent: #6f96c9;
}

html[data-theme="dark"] {
  --canvas: #0d1526;
  --surface: #141d33;
  --surface-2: #1b2540;
  --border: #29365a;
  --border-strong: #3c4c78;
  --ink: #eef1f8;
  --muted: #9fabc7;
  --accent: #5b86c4;
  --accent-hover: #6f97d1;
  --accent-ink: #0d1526;
  --accent-text: #9dc0f0;
  --accent-strong: #9dc0f0;
  --accent-soft: #1e2c4c;
  --accent-border: #3c4c78;
  --success: #2fa568;
  --success-ink: #06150d;
  --success-soft: #123322;
  --success-strong: #7ad9a4;
  --warning: #d98a2b;
  --warning-ink: #1f1206;
  --warning-soft: #3a2a12;
  --warning-strong: #f0b774;
  --danger: #e2564b;
  --danger-ink: #200705;
  --danger-soft: #3a1917;
  --danger-strong: #f4938a;
  --chart-1: #6f96c9;
  --chart-2: #56b8ba;
  --chart-3: #d98a2b;
  --chart-4: #b088c4;
  --chart-5: #6bb37d;
  --chart-6: #9fabc7;

  --shadow-card: 0 1px 2px color-mix(in srgb, #000000 40%, transparent), 0 1px 1px color-mix(in srgb, #000000 30%, transparent);
  --shadow-raised: 0 12px 28px color-mix(in srgb, #000000 55%, transparent);

  --x-band-bg: #070c18;
  --x-band-ink: #eef1f8;
  --x-band-muted: #8b9ac0;
  --x-band-border: #212d4a;
  --x-band-accent: #7fa4d6;
}

/*
 * app.css — Policy Bridge's own screen: the document frame the PDF sits in,
 * the one-time scan sweep across it, and the dark sync-log band. Everything
 * else is primitives and utilities. Tokens only.
 */

/* ---- The document frame ---------------------------------------------- */
.doc-frame {
  position: relative;
  /* Portrait suits sitting beside the table on a wide screen; stacked above
     it on a phone or tablet, that ratio turns into a wall of near-empty
     space, so it stays shorter until there is a second column to sit in. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-2);
  border: var(--border-w, 1px) solid var(--border);
  border-radius: var(--radius-card);
}
@media (min-width: 1024px) {
  .doc-frame {
    aspect-ratio: 3 / 4;
  }
}
.doc-frame-embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* A representative page, drawn from tokens, for a seeded document that has
   no real file on disk yet. */
.doc-mock {
  display: flex;
  height: 100%;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1.75rem;
}
.doc-mock-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}
.doc-mock-crest {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
.doc-mock-line {
  height: 0.55rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--border-strong) 55%, transparent);
}
.doc-mock-table {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: var(--border-w, 1px) dashed var(--border);
}

/* ---- The scan sweep — the app's one entrance ---------------------------
   Rests fully visible (opacity 0 on the bar itself, not the document), and
   public/app.js adds .is-scanning once, when the workspace enters view. */
.scan-sweep-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent) 45%, var(--accent-strong) 55%, transparent);
  box-shadow: 0 0 14px 2px color-mix(in srgb, var(--accent) 55%, transparent);
}
.is-scanning .scan-sweep-bar {
  opacity: 1;
  animation: pb-scan-move 1.6s cubic-bezier(0.4, 0, 0.2, 1) 1 both;
}
@keyframes pb-scan-move {
  from { top: 0; }
  to { top: 100%; }
}

/* A row flashes once as the sweep "passes" it, then settles back to rest. */
[data-field-row].field-lit {
  animation: pb-field-flash 550ms ease-out both;
}
@keyframes pb-field-flash {
  0% { background-color: color-mix(in srgb, var(--accent) 24%, transparent); }
  100% { background-color: transparent; }
}

html.reduced-motion .scan-sweep-bar,
html.reduced-motion [data-field-row].field-lit {
  animation: none !important;
  opacity: 0 !important;
}

/* ---- Sync log — the dark band, deliberately outside either mode's ground,
   so it reads the same confirmation strip in light or dark theme. -------- */
.sync-band {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: var(--x-band-bg);
  color: var(--x-band-ink);
  border-radius: var(--radius-card);
  border: 1px solid var(--x-band-border);
}
.sync-band-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--x-band-border);
}
.sync-band-sub {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--x-band-muted);
}
.sync-band-empty {
  padding: 1.5rem 0;
  font-size: 0.875rem;
  color: var(--x-band-muted);
}
.sync-band-muted { color: var(--x-band-muted); }
.sync-band-list { display: flex; flex-direction: column; }
.sync-band-list > li {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--x-band-border);
}
.sync-band-list > li:last-child { border-bottom: 0; }
.sync-band-dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  background: var(--x-band-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--x-band-accent) 22%, transparent);
}
.sync-band-tag {
  flex-shrink: 0;
  background: color-mix(in srgb, var(--x-band-accent) 20%, transparent);
  color: var(--x-band-accent);
}