/* 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; }