/* ==========================================================
   Who Keeps the Coast?
   Companion site stylesheet. Light mode only. A working tool:
   one chart block per page, labels and numbers, little prose.
   Colors are the paper's figure palette (navy, deep pink, deep
   green, grays), so the site and the manuscript read as one
   system. Serif for the title and the large numbers, sans for
   everything a reader operates.
   ========================================================== */

:root {
  --navy: #16385c;
  --pink: #a8325e;
  --green: #2f6b4f;
  --gray: #8c8c8c;
  --ink: #12161b;
  --body: #2a2f36;
  --muted: #68707b;
  --rule: #d7dbe0;
  --rule-soft: #e8ebee;
  --paper: #ffffff;
  --wash: #f4f5f6;
  --wash-2: #eaecee;
  --nodata: #e3e3e0;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
    Georgia, serif;
  --sans: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
  --mono: Consolas, "SFMono-Regular", Menlo, monospace;

  --w-wide: 76rem;
  --gutter: 1.5rem;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.2;
  margin: 0 0 .5em;
  font-weight: 600;
}

a { color: var(--navy); }

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 99;
  background: var(--paper); padding: .5rem .8rem;
}

button:focus-visible, a:focus-visible, select:focus, input:focus {
  outline: 2px solid var(--pink);
  outline-offset: 2px;
}

/* ------------------------------------------------ masthead */

.masthead { border-top: 4px solid var(--navy); }
.masthead-inner {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 1.1rem var(--gutter) .55rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .15rem 1.4rem;
}
.homelink {
  font-family: var(--serif);
  font-size: 1.55rem;
  line-height: 1.15;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -.005em;
  white-space: nowrap;
}
.homelink:hover { color: var(--navy); }
.crumb {
  flex: 1 1 18rem;
  min-width: 0;
  font-size: .92rem;
  color: var(--muted);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------ tab bar */

.sitenav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.sitenav-inner {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  overflow-x: auto;
}
.sitenav ul {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.sitenav a {
  display: block;
  font-size: .86rem;
  color: var(--muted);
  text-decoration: none;
  padding: .7rem 0 .6rem;
  border-bottom: 2px solid transparent;
}
.sitenav a:hover { color: var(--ink); }
.sitenav a.active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--navy);
}
/* working pages: shown only when the site runs on this machine, set
   apart at the right with a dashed rule under the name */
.sitenav li.local-only { display: none; }
html.local .sitenav li.local-only { display: block; }
html.local .sitenav li.local-only:not(.local-only ~ .local-only) { margin-left: auto; }
.sitenav li.local-only a { border-bottom-style: dashed; border-bottom-color: var(--rule); }
.sitenav li.local-only a.active { border-bottom-color: var(--pink); }
.sitenav li.local-only a::after {
  content: "local";
  font-size: .68rem;
  font-weight: 400;
  color: var(--pink);
  margin-left: .4rem;
}

/* ------------------------------------------------ page */

main { display: block; }

.section {
  max-width: var(--w-wide);
  margin: 0 auto;
  padding: 1.1rem var(--gutter) 3rem;
}

.note {
  font-size: .78rem;
  color: var(--muted);
  margin: 1.6rem 0 0;
  max-width: 62rem;
}

.chart-block { margin: 0; }

/* a line that says what a working page is */
.flag {
  display: flex;
  gap: .7rem;
  align-items: baseline;
  font-size: .84rem;
  color: var(--body);
  border-left: 3px solid var(--pink);
  background: var(--wash);
  padding: .5rem .8rem;
  margin: 0 0 1rem;
}
.flag b { color: var(--pink); font-weight: 600; white-space: nowrap; }

/* ------------------------------------------------ plain-language reading */

.explain {
  background: var(--wash);
  border-left: 3px solid var(--green);
  padding: .75rem 1rem .7rem;
  margin: 0 0 1.1rem;
}
.explain-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .7rem 1.8rem;
}
.explain h5 {
  font-size: .76rem;
  font-weight: 600;
  color: var(--green);
  margin: 0 0 .2rem;
}
.explain p {
  font-size: .9rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
  max-width: 34rem;
}
.explain.compact { padding: .55rem .9rem; margin: 0 0 .9rem; }
.explain.compact p { font-size: .86rem; }
.explain .terms { margin-top: .65rem; border-top: 1px solid var(--rule); padding-top: .5rem; }
.explain .terms summary { cursor: pointer; font-size: .8rem; color: var(--body); }
.explain .terms dl {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
  gap: .3rem 1.2rem;
  margin: .6rem 0 0;
  font-size: .84rem;
}
.explain .terms dt { color: var(--ink); font-weight: 600; }
.explain .terms dd { margin: 0; color: var(--body); max-width: 46rem; }
@media (max-width: 900px) {
  .explain-cols { grid-template-columns: 1fr; }
  .explain .terms dl { grid-template-columns: 1fr; gap: .1rem; }
  .explain .terms dd { margin-bottom: .45rem; }
}

/* ------------------------------------------------ controls */

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.4rem;
  align-items: flex-end;
  margin: 0 0 .9rem;
}
.control { display: flex; flex-direction: column; gap: .28rem; }
.control > label,
.control > .label {
  font-size: .74rem;
  color: var(--muted);
}
.control.grow { flex: 1 1 14rem; }

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.seg button {
  font-family: var(--sans);
  font-size: .8rem;
  border: 0;
  border-right: 1px solid var(--rule);
  background: var(--paper);
  color: var(--body);
  padding: .34rem .7rem;
  cursor: pointer;
  line-height: 1.25;
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--wash); }
.seg button[aria-pressed="true"] {
  background: var(--navy);
  color: #fff;
}
.seg.storms button[aria-pressed="true"] {
  background: var(--paper);
  color: var(--ink);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--sw, var(--navy));
}

.chips { display: flex; flex-wrap: wrap; gap: .3rem; max-width: 52rem; }
.chip {
  font-family: var(--sans);
  font-size: .78rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--body);
  border-radius: 4px;
  padding: .22rem .6rem;
  cursor: pointer;
  line-height: 1.4;
}
.chip:hover { background: var(--wash); }
.chip[aria-pressed="true"] {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.chip.focal { border-style: dashed; }

select, input[type="search"], input[type="number"] {
  font-family: var(--sans);
  font-size: .84rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: .32rem .5rem;
  max-width: 100%;
}
input[type="range"] { width: 100%; min-width: 11rem; accent-color: var(--navy); }

.check {
  font-size: .82rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
}

.readout { font-size: .8rem; color: var(--muted); }
.readout strong { color: var(--ink); font-weight: 600; }

.btn-quiet {
  font-family: var(--sans);
  font-size: .78rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--body);
  border-radius: 4px;
  padding: .3rem .7rem;
  cursor: pointer;
}
.btn-quiet:hover { background: var(--wash); }

/* ------------------------------------------------ figures */

.figure { width: 100%; }
.figure svg { display: block; width: 100%; height: auto; overflow: hidden; }
.figure text { font-family: var(--sans); fill: var(--ink); }
.figure canvas { display: block; }

.caption {
  font-size: .82rem;
  color: var(--muted);
  margin: .8rem 0 0;
  max-width: 58rem;
}
.caption b { color: var(--ink); font-weight: 600; }

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.1rem;
  font-size: .78rem;
  color: var(--body);
  margin: .6rem 0 0;
}
.legend .item { display: inline-flex; align-items: center; gap: .38rem; }
.legend .swatch { width: 1.1rem; height: 3px; display: inline-block; }
.legend .dot { width: .62rem; height: .62rem; border-radius: 50%; display: inline-block; }
.legend .sq { width: .62rem; height: .62rem; display: inline-block; }
.legend .open { background: #fff !important; border: 1.5px solid currentColor; }
.legend .ring {
  width: .62rem; height: .62rem; border-radius: 50%; display: inline-block;
  border: 1.5px solid var(--ink); background: transparent;
}

/* figure beside its reading: the figure takes the room, the side
   column carries the number being read and its table */
.panelgrid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(17rem, 1fr);
  gap: 2rem;
  align-items: start;
}
.panelgrid.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

.sidecard {
  border-left: 2px solid var(--navy);
  padding: .1rem 0 .1rem 1.1rem;
}
.sidecard h4 {
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 .5rem;
}
.sidecard p { font-size: .84rem; margin: 0 0 .6rem; }
.sidecard .big, .bignum {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 4.2vw, 3.3rem);
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums lining-nums;
}
.sidecard .big small, .bignum small { font-size: .42em; color: var(--muted); letter-spacing: 0; }
.sidecard .verdict { font-size: .92rem; font-weight: 600; color: var(--ink); }
.sidecard dl { margin: 0; font-size: .82rem; }
.sidecard dt { color: var(--muted); }
.sidecard dd { margin: 0 0 .5rem; color: var(--ink); font-variant-numeric: tabular-nums; }

/* the number a tour step is reading, above the side table */
.reading { min-height: 6.2rem; margin: 0 0 .9rem; }
.reading .what { font-size: .86rem; color: var(--body); margin: .35rem 0 0; max-width: 24rem; }

/* small data tables */
.dtable {
  width: 100%;
  border-collapse: collapse;
  font-size: .8rem;
  margin-top: .6rem;
}
.dtable th, .dtable td {
  text-align: right;
  padding: .3rem .5rem;
  border-bottom: 1px solid var(--rule-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.dtable th:first-child, .dtable td:first-child { text-align: left; white-space: normal; padding-left: 0; }
.dtable thead th { color: var(--muted); font-weight: 400; border-bottom: 1px solid var(--rule); }
.dtable tbody tr:last-child td { border-bottom: none; }
.dtable tbody tr.pick { cursor: pointer; }
.dtable tbody tr.pick:hover td { background: var(--wash); }
.dtable.text th, .dtable.text td { text-align: left; white-space: normal; vertical-align: top; }

h3.rule {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.25rem;
  margin: 2.4rem 0 .9rem;
  padding-top: .9rem;
  border-top: 1px solid var(--rule);
}
h3.rule small { font-family: var(--sans); font-size: .8rem; color: var(--muted); margin-left: .6rem; }

/* ------------------------------------------------ tooltip */

.tooltip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transition: opacity .09s ease-out;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: .45rem .6rem;
  font-size: .8rem;
  color: var(--body);
  max-width: 18rem;
  line-height: 1.4;
}
.tooltip.on { opacity: 1; }
.tooltip .t-title { font-weight: 600; color: var(--ink); margin-bottom: .2rem; }
.tooltip .t-row {
  display: flex;
  justify-content: space-between;
  gap: 1.1rem;
  font-variant-numeric: tabular-nums;
}
.tooltip .t-row span:last-child { color: var(--ink); font-weight: 600; }
.tooltip .t-note { color: var(--muted); margin-top: .3rem; }

/* ------------------------------------------------ loading and errors */

.loading {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  min-height: 24rem;
  justify-content: center;
  align-items: center;
  font-size: .86rem;
  color: var(--muted);
}
.loading-bar {
  display: block;
  width: 9rem;
  height: 2px;
  background: var(--wash-2);
  overflow: hidden;
  position: relative;
}
.loading-bar::after {
  content: "";
  position: absolute;
  left: -40%;
  width: 40%;
  height: 100%;
  background: var(--navy);
  animation: slide 1.1s ease-in-out infinite;
}
@keyframes slide { to { left: 100%; } }

.errorbox {
  font-size: .88rem;
  color: var(--pink);
  border: 1px solid var(--pink);
  padding: 1rem 1.1rem;
}
.errorbox code {
  font-family: var(--mono);
  color: var(--ink);
  background: var(--wash);
  padding: .1em .35em;
}

/* ------------------------------------------------ tour control */

.tour {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .95rem;
  color: var(--ink);
  margin: 0 0 .8rem;
  min-height: 2rem;
}
.tour-cap {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--serif);
  font-size: 1.08rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tour-btn {
  position: relative;
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  color: var(--navy);
  background: var(--paper);
  border: 1px solid var(--navy);
  border-radius: 999px;
  padding: .26rem .95rem;
  min-width: 4.6rem;
  cursor: pointer;
  overflow: hidden;
  line-height: 1.4;
}
.tour-btn:hover { background: var(--wash); }
.tour-bar {
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--navy);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.tour.on .tour-bar { background: var(--pink); }

/* the figure element the tour is pointing at */
.dim { opacity: .18; transition: opacity .35s ease; }
.lit { opacity: 1; transition: opacity .35s ease; }
.figure path, .figure circle, .figure rect, .figure g, .figure text { transition: opacity .35s ease; }
.figure .cell text { pointer-events: none; }

/* ------------------------------------------------ storm maps */

.eye-spin { animation: eyespin 1.6s linear infinite; transform-origin: 0 0; }
@keyframes eyespin { to { transform: rotate(-360deg); } }
.county { transition: fill .45s ease; }
.county-circle { transition: opacity .45s ease; }

/* ------------------------------------------------ responsive */

@media (max-width: 900px) {
  .panelgrid, .panelgrid.even { grid-template-columns: 1fr; }
  .reading { min-height: 0; }
}
@media (max-width: 640px) {
  :root { --gutter: 1rem; }
  .homelink { font-size: 1.3rem; }
  .crumb { white-space: normal; }
  .sitenav ul { gap: 1.1rem; }
  .tour-cap { white-space: normal; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .loading-bar::after { animation: none; left: 0; width: 100%; opacity: .4; }
  .eye-spin { animation: none; }
  .county, .county-circle, .dim, .lit { transition: none; }
}

@media print {
  .sitenav, .tooltip, .tour-btn { display: none; }
  .chart-block { break-inside: avoid; }
}