/* Technologies home and serials styles; shared Index, logo and theme controls use navigation.css and site-index.css. */
:root {
  --oddsprig-paper:#152227; --oddsprig-panel:#1b2b30; --oddsprig-ink:#edf2e9;
  --oddsprig-muted:#b3c4bd; --oddsprig-line:#3d5556; --oddsprig-accent:#c8e6a0;
  --oddsprig-button-ink:#152227; --oddsprig-focus:#e5ce8e; --oddsprig-error:#ffc4b9;
  color-scheme:dark; font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--oddsprig-paper); color:var(--oddsprig-ink);
}
:root[data-oddsprig-theme="light"] {
  --oddsprig-paper:#eeece4; --oddsprig-panel:#f4f0e6; --oddsprig-ink:#20383e;
  --oddsprig-muted:#4e655f; --oddsprig-line:#a1b3af; --oddsprig-accent:#355c28;
  --oddsprig-button-ink:#f4f0e6; --oddsprig-focus:#426a33; --oddsprig-error:#982f21;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--oddsprig-paper); color:var(--oddsprig-ink); font-size:16px; line-height:1.6; }
h1,h2,h3,p,figure { margin:0; }
h1,h2,h3 { font-family:Georgia,"Times New Roman",serif; font-weight:400; line-height:1.07; }
h1 { font-size:clamp(3.3rem,6.7vw,6.2rem); letter-spacing:-.055em; }
h2 { font-size:clamp(2rem,3.2vw,3.1rem); letter-spacing:-.04em; }
a { color:var(--oddsprig-accent); text-underline-offset:5px; }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:3px solid var(--oddsprig-focus); outline-offset:4px; }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.5; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip-link { position:absolute; top:-100px; left:16px; z-index:2000; padding:10px 16px; background:var(--oddsprig-accent); color:var(--oddsprig-button-ink); }
.skip-link:focus { top:8px; }
body.oddsprig-shared-shell { --oddsprig-content-width:1240px; }
.oddsprig-nav-header { background:var(--oddsprig-paper); border-color:var(--oddsprig-line); }
.oddsprig-brand { color:var(--oddsprig-ink); }
.oddsprig-main-nav > a { color:var(--oddsprig-muted); }
.oddsprig-main-nav > a:hover,.oddsprig-main-nav > a[aria-current="page"] { color:var(--oddsprig-accent); border-bottom-color:var(--oddsprig-accent); }
.site-index { position:relative; }
main { padding-bottom:64px; }
.eyebrow { font:500 11px/1.5 ui-monospace,Consolas,monospace; letter-spacing:.12em; text-transform:uppercase; color:var(--oddsprig-muted); }
.eyebrow span { margin-left:12px; opacity:.7; }
.home-hero { display:grid; grid-template-columns:1.15fr 1fr; gap:8%; align-items:center; padding-block:78px 65px; }
.hero-copy h1 { margin-top:24px; }
.lead { max-width:35ch; margin-top:26px; font-size:19px; line-height:1.55; color:var(--oddsprig-muted); }
.page-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px; margin-top:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:26px; min-height:48px; padding:12px 20px; border:1px solid var(--oddsprig-accent); border-radius:3px; background:var(--oddsprig-accent); color:var(--oddsprig-button-ink); font-size:14px; font-weight:650; line-height:1.5; text-decoration:none; }
.button.secondary { background:var(--oddsprig-panel); color:var(--oddsprig-ink); border-color:var(--oddsprig-line); }
.hero-note { max-width:47ch; margin-top:24px; font-size:12px; line-height:1.65; color:var(--oddsprig-muted); }
.tools-copy > p { max-width:48ch; color:var(--oddsprig-muted); }
.tool-list { margin:18px 0 0; padding-left:20px; color:var(--oddsprig-muted); font-size:15px; line-height:1.55; }
.tool-list li + li { margin-top:10px; }
.related-tools { display:flex; flex-wrap:wrap; gap:2px 24px; margin-top:18px; }
.related-tools a { display:inline-flex; align-items:center; min-height:44px; font-size:12px; color:var(--oddsprig-muted); }
.site-footer { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px 24px; padding-block:24px; border-top:1px solid var(--oddsprig-line); color:var(--oddsprig-muted); font-size:12px; }
.site-footer a { color:inherit; padding-block:10px; }
.tool-intro { padding-block:48px 30px; }
.tool-intro h1 { margin-top:16px; font-size:clamp(2.7rem,5vw,4.5rem); }
.tool-intro .lead { max-width:60ch; margin-top:18px; font-size:16px; }
.generator-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:28px; align-items:start; }
.generator-panel,.preview-panel { min-width:0; padding:28px; background:var(--oddsprig-panel); border:1px solid var(--oddsprig-line); border-radius:4px; }
.panel-title { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:24px; }
.panel-title h2 { font:400 1.6rem/1.2 Georgia,serif; letter-spacing:-.025em; }
.panel-title span { font:11px/1.5 ui-monospace,Consolas,monospace; color:var(--oddsprig-muted); }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.field { display:flex; flex-direction:column; min-width:0; gap:6px; font-size:13px; font-weight:600; }
.field input,.field select { width:100%; min-width:0; height:44px; padding:9px 12px; border:1px solid var(--oddsprig-line); border-radius:3px; background:var(--oddsprig-paper); color:var(--oddsprig-ink); font-size:15px; font-weight:400; }
.field small,.field-note { color:var(--oddsprig-muted); font-size:12px; font-weight:400; line-height:1.5; }
.field-note { margin-top:18px; }
.generator-panel .button { margin-top:24px; }
.status { min-height:1.6em; margin-top:18px; font-size:13px; color:var(--oddsprig-muted); overflow-wrap:anywhere; }
.status[data-error="true"] { color:var(--oddsprig-error); }
.code-sample { --oddsprig-original-ink:#000; --oddsprig-original-surface:#fff; padding:20px; background:#fff; color:#000; border-radius:2px; text-align:center; }
.code-sample svg { display:block; width:100%; height:62px; }
.code-sample code { display:block; margin-top:10px; font:13px/1.5 ui-monospace,Consolas,monospace; overflow-wrap:anywhere; }
.preview-table { width:100%; border-collapse:collapse; margin-block:20px; font-size:12px; text-align:left; }
.preview-table th,.preview-table td { padding:8px 0; border-bottom:1px solid var(--oddsprig-line); }
.preview-table th { font-weight:500; color:var(--oddsprig-muted); }
.preview-table td:nth-child(2) { font-family:ui-monospace,Consolas,monospace; overflow-wrap:anywhere; }
.preview-table th:first-child,.preview-table td:first-child { width:40px; }
.preview-table th:last-child,.preview-table td:last-child { width:52px; text-align:right; }
.preview-summary { margin-bottom:20px; }
.export-actions { display:flex; flex-wrap:wrap; gap:10px; }
.sheet-options { display:flex; flex-wrap:wrap; align-items:end; gap:12px; margin-top:24px; padding-top:24px; border-top:1px solid var(--oddsprig-line); }
.sheet-options .field { flex:1 1 135px; }
.sheet-help { margin-top:16px; color:var(--oddsprig-muted); font-size:12px; }
.labels-section { padding-top:36px; }
.labels-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:24px; }
.labels-heading h2 { font-size:2rem; }
.label-sheet { --oddsprig-original-ink:#000; --oddsprig-original-surface:#fff; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(8,minmax(0,1fr)); width:100%; max-width:760px; aspect-ratio:190/276; margin:0 auto 28px; padding:0; border:1px solid #ccc; background:#fff; color:#000; }
.label-sheet[data-paper="letter"] { aspect-ratio:195.9/258.4; }
.label-sheet[data-columns="1"] { grid-template-columns:minmax(0,1fr); }
.serial-label { display:flex; flex-direction:column; justify-content:center; align-items:center; min-width:0; padding:4%; border:1px dashed #bbb; background:#fff; color:#000; break-inside:avoid; }
.serial-label svg { display:block; width:100%; height:clamp(25px,4vw,55px); }
.serial-label code { display:block; max-width:100%; margin-top:7px; font:clamp(7px,1.5vw,12px)/1.25 ui-monospace,Consolas,monospace; overflow-wrap:anywhere; text-align:center; }
.empty-copy { color:var(--oddsprig-muted); font-size:14px; }
@media (max-width:800px) {
  .home-hero { gap:4%; padding-block:50px; }
  h1 { font-size:clamp(3rem,6.5vw,4.7rem); }
  .generator-layout { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:650px) {
  .home-hero { grid-template-columns:minmax(0,1fr); padding-block:46px 32px; gap:30px; }
  h1 { font-size:clamp(3rem,12.8vw,4.7rem); }
  .lead { font-size:17px; margin-top:22px; }
  .hero-copy h1 { margin-top:20px; }
  .hero-note { max-width:43ch; }
  .site-footer { font-size:11px; }
  main { padding-bottom:36px; }
  .tool-intro { padding-block:36px 24px; }
  .generator-panel,.preview-panel { padding:20px; }
  .field-grid { gap:16px 12px; }
  .label-sheet { margin-bottom:16px; }
}
@page a4 { size:A4 portrait; margin:10mm; }
@page letter { size:letter portrait; margin:10mm; }
@media print {
  html,body { margin:0 !important; padding:0 !important; background:#fff !important; color:#000 !important; }
  body > :not(main),main > :not(.labels-section),.labels-heading,.sheet-help { display:none !important; }
  main,.labels-section,.sheets { display:block !important; width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; }
  .label-sheet { page:a4; width:190mm !important; height:276mm !important; max-width:none; aspect-ratio:auto; margin:0 !important; border:0; break-after:page; break-inside:avoid; }
  .label-sheet[data-paper="letter"] { page:letter; width:195.9mm !important; height:258.4mm !important; }
  .label-sheet:last-child { break-after:auto; }
  .serial-label { padding:4mm; border:.15mm dashed #bbb; }
  .serial-label svg { width:100%; height:14mm; }
  .serial-label code { font-size:9pt; line-height:1.25; margin-top:2mm; }
}