/* Shadow Run Scorecard: shared styles. Light and dark color tokens; no external fonts. */

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #eef1f5;
  --fg: #16202b;
  --muted: #5a6573;
  --border: #dbe0e7;
  --accent: #1f5bd8;
  --accent-fg: #ffffff;
  --header-bg: #ffffff;
  --result-bg: #eaf1ff;
  --result-border: #c4d6fb;
  --ready-bg: #e2f4e9;
  --ready-fg: #17663a;
  --config-bg: #fdf0d9;
  --config-fg: #85570a;
  --keep-bg: #fbe7e7;
  --keep-fg: #9e2b2b;
  --dispute-bg: #efe8fb;
  --dispute-fg: #5b3aa0;
  --code-bg: #f1f3f6;
  --selected: #f2f6ff;
  --flash: #fff4c2;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f141a;
    --surface: #161d25;
    --surface-2: #1d2630;
    --fg: #e6ebf1;
    --muted: #9aa6b4;
    --border: #2a3542;
    --accent: #7aa7ff;
    --accent-fg: #0f141a;
    --header-bg: #131a21;
    --result-bg: #172338;
    --result-border: #2b4470;
    --ready-bg: #143322;
    --ready-fg: #7fdca3;
    --config-bg: #3a2c10;
    --config-fg: #f3c56b;
    --keep-bg: #3b1a1c;
    --keep-fg: #f19a9a;
    --dispute-bg: #2a2140;
    --dispute-fg: #c6b2f5;
    --code-bg: #1b232d;
    --selected: #18243a;
    --flash: #3d3713;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.wrap {
  max-width: 980px;
  margin: 0 auto;
  padding-inline: 16px;
}

a { color: var(--accent); }

h1, h2, h3 { line-height: 1.25; margin: 0; }
h1 { font-size: 1.9rem; letter-spacing: -0.01em; margin-top: 0.5rem; }
h2 { font-size: 1.15rem; margin-bottom: 0.5rem; }
h3 { font-size: 1rem; }

main > section { margin-block: 2rem; }

.site-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border);
  padding-block: 1.25rem 1.5rem;
}

.topline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
}

.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--border);
}

.navlink { font-weight: 600; text-decoration: none; }
.navlink:hover { text-decoration: underline; }

.lede { color: var(--muted); max-width: 70ch; margin: 0.5rem 0 1rem; }

.result {
  margin: 0;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  background: var(--result-bg);
  border: 1px solid var(--result-border);
  font-size: 1.08rem;
  font-weight: 600;
}

.hint { color: var(--muted); margin: 0 0 0.75rem; }
.muted { color: var(--muted); font-weight: 400; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}

/* ---- controls */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  align-items: center;
  margin-block: 1.25rem 0;
}
.control { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.control select {
  font: inherit;
  padding: 0.35rem 0.5rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--fg);
}
.toggle input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }

/* ---- tables */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; vertical-align: top; padding: 0.6rem 0.65rem; }
thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}
tbody td { border-bottom: 1px solid var(--border); }
td.num { white-space: nowrap; }
td .sub { display: block; color: var(--muted); font-size: 0.82rem; }
td.reason { min-width: 0; overflow-wrap: anywhere; }

.shippers, .feedback {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.shippers tbody tr { cursor: pointer; }
.shippers tbody tr:hover { background: var(--selected); }
.shippers tbody tr.is-selected { background: var(--selected); box-shadow: inset 3px 0 0 var(--accent); }

.linklike {
  font: inherit;
  font-weight: 700;
  color: var(--accent);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}
.linklike:hover { text-decoration: underline; }

button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pill {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 650;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.pill.ready { background: var(--ready-bg); color: var(--ready-fg); }
.pill.config { background: var(--config-bg); color: var(--config-fg); }
.pill.keep { background: var(--keep-bg); color: var(--keep-fg); }

.chip {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.12rem 0.5rem;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--border);
}
.chip.fixable { background: var(--config-bg); color: var(--config-fg); border-color: transparent; }
.chip.dispute { background: var(--dispute-bg); color: var(--dispute-fg); border-color: transparent; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: var(--code-bg);
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
  overflow-wrap: anywhere;
}

/* ---- drill-down */
.drilldown { margin-top: 1rem; }
.dd-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.4rem; }
.btn-quiet {
  font: inherit;
  font-size: 0.9rem;
  background: var(--surface-2);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.3rem 0.7rem;
  cursor: pointer;
}

.load {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  margin-top: 0.8rem;
  background: var(--surface);
  scroll-margin-top: 1rem;
}
.load h3 { margin-bottom: 0.4rem; }
.load.flash { background: var(--flash); transition: background 1.5s ease; }
.cmp thead th { padding-top: 0.3rem; }
.cmp td, .cmp th { padding: 0.45rem 0.5rem; }

.source { margin-top: 0.6rem; }
.source-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.2rem; }
.source pre {
  margin: 0;
  padding: 0.6rem 0.7rem;
  background: var(--code-bg);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.person .flag { margin: 0.2rem 0 0.5rem; }
.pair { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: 0; }
.pair dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.pair dd { margin: 0; }

/* ---- rules, assumptions, questions */
.rules, .questions, .assumptions ul { padding-left: 1.3rem; margin: 0; }
.rules li, .questions li, .assumptions li { margin-bottom: 0.45rem; max-width: 75ch; }
.assumptions .table-scroll { margin-top: 1rem; overflow-x: auto; }
.types th, .types td { border-bottom: 1px solid var(--border); font-size: 0.9rem; }
.types td:last-child { white-space: nowrap; }

.closing p { font-size: 1.1rem; font-weight: 600; margin: 0; }

/* ---- copy box */
.copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-bottom: 0.75rem; }
.copy-row .hint { margin: 0; }
.btn {
  font: inherit;
  font-weight: 600;
  background: var(--accent);
  color: var(--accent-fg);
  border: 0;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--code-bg);
  color: var(--fg);
  resize: vertical;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.site-footer {
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.9rem;
  padding-block: 1.25rem 2rem;
  margin-top: 2.5rem;
}

/* ---- narrow screens: tables become stacked cards, so the page never scrolls sideways */
@media (max-width: 720px) {
  h1 { font-size: 1.55rem; }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  table.stack tr { border-bottom: 1px solid var(--border); padding: 0.5rem 0; }
  table.stack tbody td { border: 0; padding: 0.25rem 0.75rem; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; justify-items: start; }
  table.stack tbody td::before {
    content: attr(data-label);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    padding-top: 0.15rem;
  }
  table.stack td .sub { display: inline; margin-left: 0.4rem; }
  .cmp tbody td { padding-inline: 0; }
  .cmp tr:last-child { border-bottom: 0; }
}