/* ce.mfg.factory-lookup — one column, phone first, no framework, no CDN.
 * Every colour and size below is a token from tokens.css, which is the same
 * file the ce-net.com corporate site uses (copied in, not linked).
 * tokens.css has no dark theme, so the dark values are defined here.
 */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper:   oklch(17% 0.014 250);
    --color-paper-2: oklch(21% 0.016 250);
    --color-paper-3: oklch(26% 0.018 250);
    --color-rule:    oklch(33% 0.018 250);
    --color-rule-2:  oklch(42% 0.020 250);
    --color-neutral: oklch(68% 0.016 250);
    --color-muted:   oklch(76% 0.018 250);
    --color-ink:     oklch(95% 0.008 250);
    --color-ink-2:   oklch(88% 0.010 250);
    --color-accent:  oklch(78% 0.140 262);
    --color-accent-2: oklch(86% 0.110 262);
    --color-accent-soft: oklch(28% 0.055 262);
    --color-focus:   oklch(78% 0.140 262);
  }
}
:root[data-theme="dark"] {
  --color-paper:   oklch(17% 0.014 250);
  --color-paper-2: oklch(21% 0.016 250);
  --color-paper-3: oklch(26% 0.018 250);
  --color-rule:    oklch(33% 0.018 250);
  --color-rule-2:  oklch(42% 0.020 250);
  --color-neutral: oklch(68% 0.016 250);
  --color-muted:   oklch(76% 0.018 250);
  --color-ink:     oklch(95% 0.008 250);
  --color-ink-2:   oklch(88% 0.010 250);
  --color-accent:  oklch(78% 0.140 262);
  --color-accent-2: oklch(86% 0.110 262);
  --color-accent-soft: oklch(28% 0.055 262);
  --color-focus:   oklch(78% 0.140 262);
}

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

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

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

/* 16px gutters on a phone: --gutter is clamp(1rem, 4vw, 3rem), 1rem at 375px */
.wrap {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

img, table, pre { max-width: 100%; }

a { color: var(--color-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: var(--rule-slab) solid var(--color-focus);
  outline-offset: 2px;
}

/* ---- top bar ---- */
.topbar {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm);
  border-bottom: var(--rule-hair) solid var(--color-rule);
  padding-block: var(--space-sm);
}
.topbar .mark {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-muted);
}
.topbar a { font-size: var(--text-sm); }

/* ---- sections ---- */
section { padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
section:last-of-type { border-bottom: 0; }
h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl); line-height: var(--lh-tight);
  letter-spacing: -0.02em; margin: var(--space-lg) 0 var(--space-md);
  overflow-wrap: break-word;
}
h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg); line-height: var(--lh-snug);
  margin: 0 0 var(--space-md); letter-spacing: -0.01em;
}
h3 { font-size: var(--text-base); margin: 0 0 var(--space-2xs); }
p  { margin: 0 0 var(--space-md); max-width: var(--measure); }
.lede { font-size: var(--text-md); color: var(--color-ink-2); }
.small { font-size: var(--text-sm); color: var(--color-muted); }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted);
  margin: 0 0 var(--space-xs);
}

/* ---- badges ---- */
ul.badges { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-xs); padding: 0; margin: 0 0 var(--space-lg); }
ul.badges li {
  font-size: var(--text-sm); color: var(--color-ink-2);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  padding: var(--space-3xs) var(--space-xs);
}

/* ---- the form ---- */
form.lookup { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0 0 var(--space-sm); }
form.lookup label { flex: 1 1 100%; font-size: var(--text-sm); color: var(--color-muted); }
form.lookup input[type="text"] {
  flex: 1 1 14rem; min-width: 0;
  font: inherit; color: var(--color-ink);
  background: var(--color-paper-2);
  border: var(--rule-hair) solid var(--color-rule-2);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
}
form.lookup button {
  flex: 0 1 auto; font: inherit; font-weight: 600; cursor: pointer;
  color: var(--color-paper); background: var(--color-accent);
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md);
}
:root[data-theme="dark"] form.lookup button,
form.lookup button { color: var(--color-paper); }
.form-out {
  border-left: var(--rule-slab) solid var(--color-accent);
  background: var(--color-accent-soft);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  color: var(--color-ink);
}
.form-out code { font-family: var(--font-mono); word-break: break-all; }

/* ---- the live table ---- */
.count {
  font-family: var(--font-display); font-size: var(--text-2xl);
  line-height: var(--lh-tight); margin: 0;
}
.count .unit { font-size: var(--text-base); color: var(--color-muted); font-family: var(--font-body); }
.empty-state {
  font-size: var(--text-md); color: var(--color-ink);
  border: var(--rule-hair) dashed var(--color-rule-2);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin: var(--space-md) 0;
}
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
th, td { text-align: left; padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; }
th { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }

/* ---- steps ---- */
ol.steps { list-style: none; padding: 0; margin: 0; counter-reset: none; }
ol.steps li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--space-sm); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
ol.steps li:first-child { border-top: 0; }
ol.steps .n { font-family: var(--font-mono); color: var(--color-accent); font-size: var(--text-sm); padding-top: 0.15rem; }
ol.steps p { margin: 0; color: var(--color-ink-2); }

/* ---- lists ---- */
ul.plain { list-style: none; padding: 0; margin: 0 0 var(--space-md); }
ul.plain li { padding-block: var(--space-2xs); padding-left: var(--space-md); position: relative; color: var(--color-ink-2); }
ul.plain li::before { content: "·"; position: absolute; left: var(--space-2xs); color: var(--color-accent); }

/* ---- faq ---- */
.faq details { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-sm); }
.faq details:first-of-type { border-top: 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: var(--space-xs) 0 0; color: var(--color-ink-2); }

/* ---- records: field tables on factory and prefill pages ---- */
dl.fields { margin: 0; }
dl.fields > div { padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }
dl.fields dt { font-family: var(--font-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); }
dl.fields dd { margin: var(--space-2xs) 0 0; overflow-wrap: anywhere; }
.tag {
  display: inline-block; font-size: var(--text-xs); font-family: var(--font-mono);
  border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-sm);
  padding: 0 var(--space-2xs); color: var(--color-muted); margin-left: var(--space-2xs);
}
.tag.pending { color: var(--color-accent-2); border-color: var(--color-accent); background: var(--color-accent-soft); }
.tag.missing { color: var(--color-muted); }
:root[data-theme="dark"] .tag.pending, .tag.pending { }
blockquote.src { margin: var(--space-2xs) 0 0; padding-left: var(--space-sm); border-left: var(--rule-hair) solid var(--color-rule-2); color: var(--color-muted); font-size: var(--text-sm); }

.banner {
  border: var(--rule-slab) solid var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-ink);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin: var(--space-md) 0;
}

/* ---- endpoints ---- */
ul.endpoints { list-style: none; padding: 0; margin: 0; font-family: var(--font-mono); font-size: var(--text-sm); }
ul.endpoints li { padding-block: var(--space-2xs); overflow-wrap: anywhere; }

footer { padding-block: var(--space-xl); color: var(--color-muted); font-size: var(--text-sm); }
footer p { max-width: var(--measure); }

@media (min-width: 40rem) {
  .wrap { padding-inline: var(--gutter); }
  ol.steps li { grid-template-columns: 3rem 1fr; }
}

/* per-item evidence: one quote per category, never one quote for a list */
ul.evidence { list-style: none; margin: var(--space-xs) 0 0; padding: 0; }
ul.evidence > li {
  margin: 0 0 var(--space-sm);
  padding-left: var(--space-sm);
  border-left: var(--rule-slab) solid var(--color-rule);
}
ul.evidence > li > b { font-weight: 600; font-size: var(--text-sm); }
ul.evidence blockquote.src { margin: var(--space-2xs) 0; }
ul.evidence a.small {
  font-size: var(--text-xs); color: var(--color-neutral);
  word-break: break-all; display: inline-block;
}