/* 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; }
header.site nav .menu { position: relative; }
header.site nav .menu > summary { cursor: pointer; color: var(--muted); font-size: .95rem; padding: .25rem 0; list-style: none; user-select: none; }
header.site nav .menu > summary::-webkit-details-marker { display: none; }
header.site nav .menu > summary::after { content: " \25be"; font-size: .7em; vertical-align: .15em; }
header.site nav .menu[open] > summary::after { content: " \25b4"; }
header.site nav .menu > summary:hover { color: var(--fg); }
header.site nav .menu > summary[aria-current] { color: var(--fg); border-bottom: 2px solid var(--accent); }
header.site nav .menu > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
header.site nav .menu > div { position: absolute; top: calc(100% + .35rem); left: -.75rem; z-index: 30; display: flex; flex-direction: column; gap: .15rem; min-width: 13rem; padding: .5rem .75rem; background: var(--card); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .14); }
header.site nav .menu > div a { padding: .3rem 0; white-space: nowrap; }
header.site nav .menu > div a:hover { color: var(--fg); }
@media (max-width: 560px) {
  header.site nav .menu > div { position: static; min-width: 0; margin: .35rem 0 .25rem; padding: .25rem 0 .25rem .75rem; border: 0; border-left: 2px solid var(--line); border-radius: 0; box-shadow: none; background: none; }
  header.site nav .menu > div a { white-space: normal; }
}
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; }

/* ----- running tools: timer, stopwatch, pomodoro, countdown ----- */
.tool.timer { text-align: center; }
.tool.timer .clock { font-size: clamp(3.5rem, 18vw, 8rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; min-height: 1em; margin: .5rem 0 .25rem; }
.tool.timer .clock small { font-size: .4em; font-weight: 500; color: var(--muted); }
.tool.timer .clock.done { color: var(--bad); }
.tool.timer .bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; margin: .5rem auto 1rem; max-width: 520px; }
.tool.timer .fill { height: 100%; width: 0; background: var(--accent); transition: width .25s linear; }
.tool.timer .controls { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.tool.timer .big-btn { min-width: 110px; min-height: 52px; font-size: 1.1rem; }
.tool.timer .big-btn[aria-label] { min-width: 52px; }
.tool.timer .setrow { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; text-align: left; max-width: 640px; margin: 0 auto .75rem; }
.tool.timer .setrow > div { display: flex; flex-direction: column; justify-content: flex-end; }
.tool.timer .presets { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; margin-bottom: .75rem; }
.tool.timer .preset { padding: .35rem .7rem; min-height: 36px; font-weight: 500; font-size: .9rem; }
.tool.timer .note { text-align: center; color: var(--muted); font-size: .95rem; min-height: 1.5em; margin: 0 auto; }
.tool.timer .phase { color: var(--muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .85rem; }
.tool.timer:fullscreen { display: flex; flex-direction: column; justify-content: center; border: 0; border-radius: 0; background: var(--bg); }
.tool.timer:fullscreen .clock { font-size: clamp(6rem, 28vw, 22rem); }
.tool.timer:fullscreen .setrow, .tool.timer:fullscreen .presets, .tool.timer:fullscreen .laps { display: none; }
table.laps, table.facts { display: table; width: auto; margin: .5rem auto 0; }
table.laps td, table.laps th { font-variant-numeric: tabular-nums; }
table.facts th { color: var(--muted); font-weight: 500; }
.result table.facts { flex-basis: 100%; margin: 0; }
.big.small { font-size: 1.5rem; }
.cd { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; max-width: 640px; margin: .5rem auto 1rem; }
.cd div { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: .75rem .25rem; }
.cd .n { display: block; font-size: clamp(1.8rem, 7vw, 3rem); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cd .u { display: block; color: var(--muted); font-size: .85rem; }
.tool textarea { width: 100%; font: inherit; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); }
.row.trow { grid-template-columns: 1fr 44px; max-width: 360px; }
table.world { display: table; width: 100%; table-layout: fixed; }
table.world td.t { width: 52%; } table.world td.o { width: 20%; }
table.world td { white-space: normal; }
.result.tz { min-height: 168px; align-content: start; }
.result.tz .outwrap { flex-basis: 100%; min-height: 2.6em; }
.result.tz .big { font-size: 1.7rem; line-height: 1.25; }
.result.tz .letter { font-size: 1.1rem; min-height: 1.5em; flex-basis: 100%; }

/* ----- bookmark line under a tool ----- */
.bookmark { margin: -.75rem 0 1rem; text-align: center; color: var(--muted); font-size: .9rem; min-height: 1.6em; }
.bookmark button { font: inherit; font-size: .9rem; color: var(--accent); background: none; border: 0; padding: .2rem .3rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.bookmark button:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-radius: 4px; }

/* ----- clockincalc extras ----- */
table.tc { display: table; width: 100%; margin: .25rem 0 .75rem; }
table.tc th[scope=row] { color: var(--muted); font-weight: 500; white-space: nowrap; }
table.tc td { padding: .25rem .3rem; white-space: normal; }
table.tc input { min-height: 40px; padding: .4rem .5rem; min-width: 5.5em; }
table.tc td.hrs { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 7em; }
@media (max-width: 560px) {
  table.tc, table.tc tbody { display: block; } table.tc thead { display: none; }
  table.tc tr.day { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .35rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
  table.tc th[scope=row] { grid-column: 1 / -1; color: var(--fg); font-weight: 600; padding: 0; }
  table.tc td { border: 0; padding: 0; }
  table.tc td[data-col]::before { content: attr(data-col); display: block; font-size: .75rem; color: var(--muted); margin-bottom: .15rem; }
  table.tc td.hrs { grid-column: 1 / -1; display: flex; gap: .5rem; align-items: baseline; } table.tc td.hrs::before { margin: 0; }
  table.tc input { min-width: 0; width: 100%; }
}
.tool details.more { margin: .25rem 0 .75rem; } .tool details.more summary { cursor: pointer; color: var(--accent); font-weight: 600; } .tool details.more .row { margin-top: .6rem; }
.result .lead-in { color: var(--muted); font-size: .95rem; }
@media print { .tool.print-card { border: 0; } }

/* ----- unscramblist ----- */
.tool .rack .biglabel { font-size: 1.05rem; font-weight: 600; color: var(--fg); }
.tool .rack .field { display: flex; gap: .5rem; max-width: 560px; }
.tool .rack .field input { font-size: 1.4rem; letter-spacing: .12em; text-transform: lowercase; }
.tool .rack .field button { white-space: nowrap; }
.tool label.inline { display: inline-flex; gap: .4rem; align-items: center; color: var(--fg); font-size: .95rem; }
.result.words { display: block; min-height: 120px; }
.wordlist .wgroup h3 { margin: 1rem 0 .4rem; font-size: 1rem; } .wordlist .count { color: var(--muted); font-weight: 400; }
.wordlist ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.wordlist li { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: .3rem .55rem; font-size: 1rem; display: inline-flex; gap: .45rem; align-items: baseline; }
.wordlist li.blank .w { text-decoration: underline dotted; }
.wordlist .pts { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.tool.wordle .grid { display: grid; gap: .35rem; justify-content: center; margin: .5rem 0 .75rem; }
.tool.wordle .wrow { display: flex; gap: .35rem; }
.tool.wordle .cell { width: 54px; height: 54px; text-align: center; font-size: 1.5rem; font-weight: 700; text-transform: uppercase; padding: 0; border: 2px solid var(--line); background: var(--card); color: var(--fg); cursor: pointer; caret-color: transparent; }
.tool.wordle .cell:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
.tool.wordle .gcell[data-state=grey]:not(:placeholder-shown) { background: #787c7e; border-color: #787c7e; color: #fff; }
.tool.wordle .cells { display: flex; gap: .35rem; margin-bottom: .25rem; } .tool.wordle fieldset { margin-bottom: .75rem; } .tool.wordle legend { font-weight: 600; margin-bottom: .35rem; }
.tool.wordle .cell.green:not(:placeholder-shown) { background: #6aaa64; border-color: #6aaa64; color: #fff; } .tool.wordle .cell.yellow:not(:placeholder-shown) { background: #c9b458; border-color: #c9b458; color: #fff; }
.tool.wordle .cell.green, .tool.wordle .cell.yellow { border-style: dashed; } .tool.wordle .cell.green:not(:placeholder-shown), .tool.wordle .cell.yellow:not(:placeholder-shown) { border-style: solid; }
.tool.wordle #greys { max-width: 300px; letter-spacing: .15em; }
.tool.wordle .gcell[data-state=yellow] { background: #c9b458; border-color: #c9b458; color: #fff; }
.tool.wordle .gcell[data-state=green] { background: #6aaa64; border-color: #6aaa64; color: #fff; }
.tool.wordle .actions { justify-content: center; }
@media (max-width: 360px) { .tool.wordle .cell { width: 46px; height: 46px; } }

/* ----- snowdaycast ----- */
.result.snowres { display: block; min-height: 260px; }
.snowres .gauge { text-align: center; padding: .5rem 0 0; } .snowres .pct { font-size: clamp(3.5rem, 16vw, 6rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; min-height: 1em; }
.snowres .pctlabel { color: var(--muted); font-size: .95rem; } .snowres .verdict { text-align: center; font-size: 1.3rem; font-weight: 700; min-height: 1.6em; margin: .25rem 0 .5rem; }
.snowres .note { text-align: center; }
.snowres dl.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .5rem; margin: 1rem 0; } .snowres dl.facts div { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: .5rem .6rem; }
.snowres dt { color: var(--muted); font-size: .8rem; } .snowres dd { margin: 0; font-weight: 700; font-size: 1.05rem; }
.snowres .reasons { margin: .5rem 0; padding-left: 1.2rem; } .snowres .reasons li { margin: .25rem 0; }
.snowres .periods { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .5rem; margin: .75rem 0; } .snowres .period { border-top: 2px solid var(--line); padding-top: .4rem; font-size: .9rem; } .snowres .period strong { display: block; }
.snowres .src { color: var(--muted); font-size: .85rem; }

header.site .langs { display: flex; gap: .4rem; margin-left: auto; order: 3; } header.site .langs a { font-size: .8rem; font-weight: 600; color: var(--muted); text-decoration: none; padding: .15rem .4rem; border: 1px solid var(--line); border-radius: 4px; } header.site .langs a[aria-current] { color: var(--fg); border-color: var(--fg); }

/* ---- breathing pacer (breathingfrequency.com) ---- */
.tool.breath .steps { padding-left: 1.2rem; } .tool.breath .steps li { margin: .35rem 0; }
.pacerbox { text-align: center; margin: .5rem 0 1rem; }
.bstage { position: relative; width: min(70vw, 300px); height: min(70vw, 300px); margin: 0 auto; }
.bring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--line); }
.bcircle { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 55%, var(--card)), var(--accent)); transform: scale(0.55); will-change: transform; transition: none; opacity: .9; }
.paused .bcircle { opacity: .5; }
.btext { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--accent-fg); text-shadow: 0 1px 2px rgba(0,0,0,.25); pointer-events: none; }
.bphase { font-size: 1.35rem; font-weight: 600; letter-spacing: .02em; } .bcount { font-size: 2.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; min-height: 2.8rem; }
.blive { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bclock { color: var(--muted); font-variant-numeric: tabular-nums; margin: .5rem 0 0; min-height: 1.3rem; }
.tool.breath .stepno { margin: .25rem 0 .5rem; }
.ratings { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.ratings .rate { display: flex; gap: .4rem; align-items: center; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); font-size: .95rem; cursor: pointer; }
.ratings .rate span { font-weight: 700; }
.ratings .rate:has(input:checked) { border-color: var(--accent); outline: 2px solid var(--accent); }
.verdict { font-size: 1.1rem; }
.tool.breath a.button { display: inline-block; text-decoration: none; font-weight: 600; padding: .55rem .9rem; border-radius: 6px; }
.tool.breath a.button.primary { background: var(--accent); color: var(--accent-fg); }
.ad.rest { min-height: 0; margin: .5rem 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .bcircle { transform: scale(0.8) !important; } }
/* books and straps cards */
.book, .strap { display: grid; grid-template-columns: 120px 1fr; gap: 1rem; align-items: start; margin: 1.25rem 0; }
.book .cover, .strap .strapcard { margin: 0; }
.book .cover img { width: 120px; height: auto; border-radius: 4px; border: 1px solid var(--line); display: block; }
.cover.placeholder, .strapcard { width: 120px; min-height: 160px; border-radius: 6px; border: 1px solid var(--line); background: var(--card); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: .6rem; box-sizing: border-box; color: var(--muted); font-size: .85rem; }
.strapcard .brand { font-weight: 700; color: var(--fg); font-size: 1rem; } .strapcard .model { margin-top: .3rem; }
.bookbody h2, .strapbody h2 { margin-top: 0; }
@media (max-width: 480px) { .book, .strap { grid-template-columns: 90px 1fr; } .book .cover img, .cover.placeholder, .strapcard { width: 90px; min-height: 120px; } }
.strapcard.photo { border: 1px solid var(--line); background: #fff; padding: .4rem; display: flex; align-items: center; justify-content: center; }
.strapcard.photo img, .book .cover img { max-width: 100%; height: auto; }
.cover .placeholder { display: flex; align-items: center; justify-content: center; text-align: center; width: 120px; min-height: 160px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--muted); font-size: .85rem; padding: .6rem; box-sizing: border-box; }
.strapcard figcaption { font-size: .7rem; color: var(--muted); text-align: center; margin-top: .25rem; }

/* ---- mapa del colegio electoral (encuestometro.com) ---- */
.tool .marcador { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.tool .lado { display: flex; flex-direction: column; } .tool .lado.r { text-align: right; }
.tool .cifra { font-size: 2.4rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.tool .lado.d .cifra { color: #1d4ed8; } .tool .lado.r .cifra { color: #b91c1c; }
.tool .quien, .tool .meta, .tool .sinasignar { font-size: .8rem; color: var(--muted); }
.tool .medio { text-align: center; display: flex; flex-direction: column; }
.tool .barra { position: relative; display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line); }
.tool .barraD { background: #1d4ed8; } .tool .barraR { background: #b91c1c; margin-left: auto; }
.tool .mitad { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; background: var(--fg); opacity: .55; }
.tool .aviso { margin: .5rem 0 .75rem; min-height: 2.4em; }
.rejilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; margin: .5rem 0; }
.rejilla.libre { display: flex; flex-wrap: wrap; gap: 3px; }
/* Two things made the twelve columns wider than a phone, so the browser zoomed the page out
   and clipped the east coast: .tool button's 42px min-height, and aspect-ratio 1, which turns
   the cell's content height into a minimum WIDTH. Below 560px the cells stop being square and
   the text shrinks, which is what lets a 12-column cartogram fit a 360px screen. */
.casilla { aspect-ratio: 1; min-width: 0; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 4px; background: var(--card); color: var(--fg); cursor: pointer; font: inherit; line-height: 1.05; }
/* .tool button also sets padding .55rem .9rem and min-height 42px, both of which beat
   .casilla on specificity and both of which blow the 12-column grid apart on a phone. */
.tool .casilla { padding: 0; min-height: 0; min-width: 0; }
/* on a narrow screen give the map the tool's side padding back, so the cells are as big as they can be */
@media (max-width: 560px) {
  .tool.mapa .rejilla:not(.libre), .tool.senado .rejilla:not(.libre) { margin-left: -.85rem; margin-right: -.85rem; gap: 2px; }
  .tool .rejilla:not(.libre) .casilla { aspect-ratio: auto; height: 2.6rem; }
  .rejilla:not(.libre) .casilla .sigla { font-size: .62rem; }
  .rejilla:not(.libre) .casilla .ev { font-size: .55rem; }
}
.rejilla.libre .casilla { width: 46px; aspect-ratio: auto; height: 46px; }
.casilla .sigla { font-size: clamp(.55rem, 1.9vw, .8rem); font-weight: 700; }
.casilla .ev { font-size: clamp(.5rem, 1.6vw, .7rem); color: var(--muted); font-variant-numeric: tabular-nums; }
.casilla[data-v="d"] { background: #1d4ed8; border-color: #1d4ed8; color: #fff; } .casilla[data-v="d"] .ev { color: #dbeafe; }
.casilla[data-v="r"] { background: #b91c1c; border-color: #b91c1c; color: #fff; } .casilla[data-v="r"] .ev { color: #fee2e2; }
.casilla:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.tool.mapa .distritos { margin: .5rem 0; } .tool.mapa .distritos legend { font-size: .85rem; color: var(--muted); font-weight: 400; }
.caminos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 1rem 0 .5rem; }
.caminos h3 { font-size: .95rem; margin: 0 0 .35rem; } .caminos ul { margin: 0; padding-left: 1.1rem; font-size: .92rem; }
.caminos .ev { color: var(--muted); font-variant-numeric: tabular-nums; }
.compartir input { font-size: .85rem; }
/* índice de países y fichas (encuestometro) */
.paises { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 1rem 0 1.5rem; }
.pais { border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; background: var(--card); }
.pais h2 { margin: 0 0 .4rem; font-size: 1.15rem; } .pais ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .95rem; }
.rejilla.estatica .casilla { cursor: default; }
.rejilla.estatica { max-width: 620px; }
.leyenda, .pie { font-size: .85rem; color: var(--muted); }
.punto { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; vertical-align: baseline; }
.hemiciclofig { margin: .5rem 0 1rem; } .hemiciclofig svg { width: 100%; height: auto; max-width: 620px; display: block; }
.hemiciclofig figcaption { font-size: .85rem; color: var(--muted); margin-top: .3rem; }
.punto.dem { background: #1d4ed8; } .punto.rep { background: #b91c1c; }
.casilla.inactiva { opacity: .32; cursor: default; }
.tool.senado .rejilla { max-width: 620px; }
.tool.camara .deslizador { width: 100%; } .tool.camara input[type=range] { width: 100%; accent-color: var(--accent); min-height: 42px; }
.tool.camara .hemiciclofig { margin: .25rem 0 .5rem; }
.leyendahemi { list-style: none; display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin: .4rem 0 .2rem; padding: 0; font-size: .85rem; }
.leyendahemi li { display: flex; align-items: center; gap: .35rem; } .leyendahemi strong { font-variant-numeric: tabular-nums; }
.cambios { margin: .3rem 0 .8rem; padding-left: 1.1rem; font-size: .92rem; } .cambios .ev { color: var(--muted); }
footer.site .family { font-size: .85rem; margin: .4rem 0 .6rem; }
/* tabla de distritos cruzados (encuestometro) */
.tablacruce { overflow-x: auto; margin: .5rem 0 1rem; }
.tablacruce table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.tablacruce caption { caption-side: top; text-align: left; color: var(--muted); font-size: .85rem; padding-bottom: .4rem; }
.tablacruce th, .tablacruce td { padding: .4rem .5rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.tablacruce thead th { font-size: .8rem; color: var(--muted); font-weight: 600; }
.tablacruce tbody th { font-variant-numeric: tabular-nums; font-weight: 700; }
.tablacruce td.p-d { color: #1d4ed8; font-weight: 600; } .tablacruce td.p-r { color: #b91c1c; font-weight: 600; }
.tool.cruce .marcador .quien { font-size: .8rem; }

/* <site>/extra.css */
/* axisplot extra.css -- appended to shared/style.css by the builder.
   Rules live here rather than in style attributes because the site's CSP
   forbids inline style, which is also what keeps the exported SVG clean. */

/* a chart needs more width than a page of prose; the 70ch cap on paragraphs
   in the shared stylesheet keeps the copy readable at this width */
:root { --maxw: 1080px; }

.tool.plot { display: block; }
/* On a phone the chart must come before the read-out, or you scroll past a
   screenful of text to reach the thing you came for. Named areas give that
   order without moving the markup. */
.plot .io { display: grid; gap: 1.25rem; align-items: start;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  grid-template-areas: "in out" "read out"; }
.plot .io > .in { grid-area: in; }
.plot .io > .out { grid-area: out; }
.plot .io > .read { grid-area: read; }
@media (max-width: 860px) {
  .plot .io { grid-template-columns: minmax(0, 1fr); grid-template-areas: "in" "out" "read"; gap: 1rem; }
}

/* ----- the input side ----- */
.plot .tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin-bottom: .75rem; }
.plot .tabs button { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: .45rem .7rem; font: inherit; font-size: .95rem; color: var(--muted); cursor: pointer; min-height: 0; }
.plot .tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.plot label { display: block; font-size: .9rem; color: var(--muted); margin: .6rem 0 .2rem; }
.plot textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .9rem; line-height: 1.45; padding: .5rem .6rem; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--card); color: var(--fg); resize: vertical; white-space: pre; }
.plot input[type="file"] { font-size: .9rem; max-width: 100%; }
.plot .actions-in { display: flex; gap: .5rem; flex-wrap: wrap; margin: .75rem 0 0; }
.plot .hint { font-size: .85rem; color: var(--muted); margin: .4rem 0 0; max-width: none; }

/* ----- the chart ----- */
/* white background on purpose, in dark mode too: this is the image you are
   about to paste into a document, and it should look the same there */
.plot .figure { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem;
  overflow-x: auto; min-height: 240px; display: flex; align-items: center; justify-content: center; }
.plot .figure svg { max-width: 100%; height: auto; display: block; }
.plot .out .actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .75rem 0 0; }

/* ----- options ----- */
.plot .opts { margin-top: 1.25rem; }
/* each label and its control are one grid cell, so they can never drift into
   different columns; and [hidden] has to win over the layout display */
.plot .opts .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .5rem .9rem; }
.plot .opts .field { display: flex; flex-direction: column; min-width: 0; }
.plot .opts .field label { margin: 0 0 .15rem; }
.plot .opts [hidden] { display: none; }
.plot .opts select, .plot .opts input[type="text"] { width: 100%; }
.plot .opts .checks { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin-top: .9rem; }
.plot .opts .ck { display: inline-flex; align-items: center; gap: .35rem; margin: 0; color: var(--fg); font-size: .92rem; }
.plot .opts .ck input { margin: 0; }

/* ----- what we read ----- */
.plot .read { font-size: .9rem; }
.plot .read .rh { font-size: 1rem; margin: .9rem 0 .35rem; }
.plot .read p, .plot .read li { max-width: none; font-size: .9rem; }
.plot .read ul.cols { margin: .3rem 0; padding-left: 1.1rem; }
.plot .read ul.cols li { margin: .1rem 0; }
.plot .read .warn { color: var(--warn); }
.plot .read .flip { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.plot .read .flip label { margin: 0; }
.plot .read .flip select { width: auto; }
/* display:table drops the shared stylesheet's overflow containment, so these
   cells have to be allowed to wrap or the page scrolls sideways on a phone */
.plot .read table.facts { display: table; width: auto; max-width: 100%; }
.plot .read table.facts th, .plot .read table.facts td { white-space: normal; }
/* the five-number summary is eight columns wide; let it scroll rather than
   crushing the numbers into two characters each on a phone */
.plot .read table.facts.five { display: block; overflow-x: auto; max-width: 100%; }
.plot .read table.facts.five th, .plot .read table.facts.five td { white-space: nowrap; }
.plot .read table.facts.five thead th { color: var(--muted); font-weight: 600; }
.plot .read table.facts th { font-weight: 400; color: var(--muted); padding-left: 0; }
.plot .read table.facts td { font-variant-numeric: tabular-nums; }

/* ----- the editable grid ----- */
.plot .gridwrap { overflow: auto; max-height: 26rem; border: 1px solid var(--line); border-radius: var(--radius); }
.plot table.grid { display: table; width: auto; min-width: 100%; }
.plot table.grid th, .plot table.grid td { padding: 0; border: 1px solid var(--line); }
.plot table.grid tbody th { padding: 0 .4rem; color: var(--muted); font-weight: 400; font-size: .8rem; text-align: right; background: var(--bg); }
.plot table.grid input { border: 0; background: none; color: var(--fg); font: inherit; font-size: .85rem;
  padding: .3rem .4rem; width: 8.5rem; min-width: 0; }
.plot table.grid thead input { font-weight: 600; }
.plot table.grid input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.plot .gridbtns { display: flex; gap: .5rem; margin-top: .5rem; }

/* ----- the figures behind the chart ----- */
.plot .figures { margin-top: 1.5rem; }
.plot details.figs summary { cursor: pointer; font-size: .95rem; color: var(--muted); }
.plot details.figs table { margin-top: .6rem; font-size: .9rem; }
.plot details.figs td { font-variant-numeric: tabular-nums; }

/* ----- the CSV template ----- */
.plot details.tmpl { margin-top: .9rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.plot details.tmpl summary { cursor: pointer; font-size: .9rem; color: var(--accent); }
.plot details.tmpl ol.steps { margin: .6rem 0 0; padding-left: 1.1rem; font-size: .85rem; color: var(--muted); }
.plot details.tmpl ol.steps li { margin: .3rem 0; max-width: none; }
.plot details.tmpl ol.steps strong { color: var(--fg); font-weight: 600; }