/* shared/style.css -- one stylesheet for every tool site.
   System fonts only (no font download, no FOUT, no layout shift). Ad slots
   reserve their height from day one so switching ads on later moves nothing. */
:root {
  --bg: #fafaf9; --fg: #1c1917; --muted: #57534e; --line: #e7e5e4;
  --card: #ffffff; --accent: #1d4ed8; --accent-fg: #ffffff; --ok: #15803d; --warn: #b45309; --bad: #b91c1c;
  --radius: 10px; --maxw: 860px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #0c0a09; --fg: #f5f5f4; --muted: #a8a29e; --line: #292524; --card: #1c1917; --accent: #60a5fa; --accent-fg: #0c0a09; --ok: #4ade80; --warn: #fbbf24; --bad: #f87171; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--accent); }
h1, h2, h3 { line-height: 1.2; margin: 1.4em 0 .5em; }
h1 { font-size: 2rem; margin-top: .6em; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.1rem; }
p, li { max-width: 70ch; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95em; }
table { border-collapse: collapse; width: 100%; max-width: 100%; display: block; overflow-x: auto; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { font-weight: 600; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1rem; }
header.site { border-bottom: 1px solid var(--line); background: var(--card); }
header.site .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; min-height: 56px; }
header.site .brand { font-weight: 700; text-decoration: none; color: var(--fg); font-size: 1.1rem; }
header.site nav a { text-decoration: none; color: var(--muted); font-size: .95rem; padding: .25rem 0; }
header.site nav a[aria-current="page"] { color: var(--fg); border-bottom: 2px solid var(--accent); }
header.site nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
main { padding-bottom: 3rem; }
.lead { color: var(--muted); font-size: 1.05rem; max-width: 70ch; }
footer.site { border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; padding: 1.5rem 0 2.5rem; }
footer.site a { color: var(--muted); }
footer.site nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-bottom: .75rem; }

/* ----- the tool card: visible on load, usable before JS ----- */
.tool { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin: 1rem 0 1.5rem; }
.tool fieldset { border: 0; padding: 0; margin: 0 0 .75rem; min-width: 0; }
.tool legend { font-weight: 600; padding: 0; margin-bottom: .4rem; }
.tool label { display: block; font-size: .9rem; color: var(--muted); margin-bottom: .15rem; }
.tool input[type=number], .tool input[type=text], .tool select {
  width: 100%; font: inherit; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px;
  background: var(--bg); color: var(--fg); min-height: 42px; }
.tool input:focus, .tool select:focus, .tool button:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.row { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); align-items: end; margin-bottom: .5rem; }
.row.course { grid-template-columns: minmax(140px, 2fr) minmax(90px, 1fr) minmax(90px, 1fr) minmax(110px, 1fr) 44px; }
.row.assign { grid-template-columns: minmax(140px, 2fr) minmax(90px, 1fr) minmax(90px, 1fr) minmax(90px, 1fr) 44px; }
.row.category { grid-template-columns: minmax(140px, 2fr) minmax(90px, 1fr) minmax(90px, 1fr) 44px; }
@media (max-width: 560px) {
  .row.course, .row.assign, .row.category { grid-template-columns: 1fr 1fr; }
  .row .remove { grid-column: 2; justify-self: end; }
}
.tool button { font: inherit; font-weight: 600; padding: .55rem .9rem; border-radius: 6px; border: 1px solid var(--line);
  background: var(--card); color: var(--fg); cursor: pointer; min-height: 42px; }
.tool button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.tool button.remove { padding: 0; width: 42px; }
.tool .actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .25rem 0 .75rem; }
.tool .opts { display: flex; gap: 1rem; flex-wrap: wrap; align-items: end; margin: .5rem 0 .75rem; }
.tool .opts label { margin: 0; }
.tool .opts > div { min-width: 140px; flex: 1; }

/* result: fixed minimum height so the number appearing never shifts the page */
.result { min-height: 92px; border-top: 1px solid var(--line); padding-top: .75rem; display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: baseline; }
.result .big { font-size: 2.4rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.result .letter { font-size: 1.6rem; font-weight: 700; }
.result .note { color: var(--muted); font-size: .95rem; flex-basis: 100%; min-height: 1.5em; margin: 0; }
.result .ok { color: var(--ok); } .result .warn { color: var(--warn); } .result .bad { color: var(--bad); }
.pair { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pair .big { font-size: 2rem; }
.pair .cap { color: var(--muted); font-size: .9rem; }

/* ----- ad slots: reserved now, filled later. CLS stays at zero. ----- */
.ad { display: block; width: 100%; margin: 1.25rem 0; border-radius: 6px; }
.ad.top { min-height: 100px; }
.ad.mid { min-height: 250px; }
@media (min-width: 728px) { .ad.top { min-height: 90px; } }
.ad:empty { background: transparent; }

.faq details { border-bottom: 1px solid var(--line); padding: .6rem 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { margin: .5rem 0 0; }
.chart { columns: 2; column-gap: 2rem; }
@media (min-width: 640px) { .chart { columns: 3; } }
.chart table { display: table; width: auto; break-inside: avoid; }
.print-only { display: none; }
@media print {
  header.site, footer.site, .ad, .no-print, .content, .faq { display: none !important; }
  .tool { border: 0; padding: 0; }
  .print-only { display: block; }
  body { font-size: 12pt; }
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ----- one-question-at-a-time tools ----- */
.wizard .how { margin: 0 0 .75rem; color: var(--muted); font-size: .95rem; }
.wizard .steps { list-style: none; margin: 0; padding: 0; }
.wizard .step { padding: .75rem 0; border-top: 1px solid var(--line); }
.wizard .step:first-child { border-top: 0; padding-top: 0; }
.wizard .q label { display: block; font-size: 1.1rem; font-weight: 600; color: var(--fg); margin-bottom: .5rem; }
.wizard .n { display: inline-block; width: 1.6em; height: 1.6em; line-height: 1.6em; text-align: center; border-radius: 50%;
  background: var(--accent); color: var(--accent-fg); font-size: .85rem; margin-right: .4rem; vertical-align: 2px; }
.wizard .field { display: flex; align-items: center; gap: .5rem; max-width: 420px; }
.wizard .field input { max-width: 180px; }
.wizard .field .next { white-space: nowrap; }
.wizard .field input { font-size: 1.3rem; }
.wizard .unit { color: var(--muted); font-weight: 600; }
.wizard .hint { margin: .4rem 0 0; color: var(--muted); font-size: .9rem; }
.wizard .a { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.wizard .a .label { color: var(--muted); }
.wizard .a .value { font-size: 1.05rem; }
.wizard .a .change { padding: .2rem .6rem; min-height: 32px; font-size: .9rem; font-weight: 500; }
.wizard .result { margin-top: .75rem; }
.wizard .lead-in { flex-basis: 100%; color: var(--muted); margin-bottom: -.5rem; }

.tool.equal-mode .wcol { opacity: .45; }

/* ----- wavelength site extras ----- */
.tool .hint { color: var(--muted); font-size: .9rem; margin: 0 0 .5rem; }
.result table.lengths { display: table; width: auto; flex-basis: 100%; }
.result table.lengths th { color: var(--muted); font-weight: 500; }
.result table.lengths td { font-weight: 700; font-variant-numeric: tabular-nums; }