/* Design tokens and component styles, ported from design/Sales Tax Map.html.
   Colors, typography, spacing and motion are final per design/README.md. */

:root {
  --bg: oklch(0.985 0.004 80);
  --panel: oklch(0.995 0.002 80);
  --ink: oklch(0.22 0.01 60);
  --ink2: oklch(0.45 0.01 60);
  --ink3: oklch(0.62 0.01 60);
  --line: oklch(0.9 0.006 70);
  --line2: oklch(0.84 0.008 70);
  --accent: oklch(0.55 0.14 30);
  --accent-ink: oklch(0.42 0.13 30);
  --accent-soft: oklch(0.95 0.03 30);
  --muted-land: oklch(0.93 0.004 80);
  --muted-stroke: oklch(0.86 0.005 80);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}

/* The header takes its own height and main gets the rest, so the map pane
   ends at the bottom of the viewport however many lines the header wraps to;
   it is the design's 53px only while the title fits on one line. */
body { display: flex; flex-direction: column; }

a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

.mono {
  font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

/* Header */

header {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
header h1 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
header .sub { color: var(--ink2); font-weight: 400; margin-left: 10px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--ink2);
  letter-spacing: .02em;
}
.badge i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
/* Layout */

main {
  display: grid;
  grid-template-columns: 400px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}

aside {
  border-right: 1px solid var(--line);
  background: var(--panel);
  overflow: auto;
  display: flex;
  flex-direction: column;
}

.map-wrap { position: relative; overflow: hidden; }

svg { display: block; width: 100%; height: 100%; cursor: grab; }
svg:active { cursor: grabbing; }

/* State chips */

.states-bar {
  position: absolute;
  left: 20px;
  top: 18px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.chip {
  padding: 6px 12px;
  border: 1px solid var(--line2);
  background: var(--panel);
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ink2);
  transition: all .15s;
}
.chip:hover { border-color: var(--ink3); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }

/* The state picker: a <select> dressed as a chip, since one chip per covered
   state (51 of them) would wrap over a third of the map. Its native arrow is
   replaced by a chevron that follows the chip's text color. */
select.chip {
  appearance: none;
  font-family: inherit;
  line-height: normal;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23736f6b' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
/* .chip.on's `background` shorthand resets repeat and position, so restate them. */
select.chip.on {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
select.chip option { color: var(--ink); background: var(--panel); }

/* Legend */

.legend {
  visibility: hidden;
  position: absolute;
  right: 20px;
  bottom: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 220px;
}
.legend .t { font-size: 11px; color: var(--ink2); letter-spacing: .04em; text-transform: uppercase; }
.legend .ramp { height: 8px; border-radius: 4px; }
.legend .ends { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink2); }

/* Tooltip */

.tip {
  position: absolute;
  pointer-events: none;
  background: var(--ink);
  color: #fff;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.3;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 12px));
  white-space: nowrap;
  transition: opacity .1s;
}
.tip b { display: block; font-weight: 500; }
.tip span { opacity: .75; }

/* Map geometry */

/* Strokes are in screen pixels whatever the zoom (vector-effect), so a deep
   zoom into a small state does not turn the borders into bands. */
.county { stroke: #fff; stroke-width: .35; vector-effect: non-scaling-stroke; transition: fill .15s; }
.county.covered { cursor: pointer; }
.county.covered:hover { stroke: var(--ink); stroke-width: 1.2; }
.county.sel { stroke: var(--ink); stroke-width: 1.6; }
.state-line { fill: none; stroke: oklch(0.62 0.01 60); stroke-width: .7; vector-effect: non-scaling-stroke; pointer-events: none; }

/* Panel: empty state */

.empty { padding: 44px 32px; color: var(--ink2); }
.empty h2 {
  font-size: 22px;
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1.2;
}
.empty p { margin: 0 0 14px; max-width: 300px; }
.empty ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.empty li {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding: 8px 0;
  font-size: 13px;
}
.empty li .mono { color: var(--ink3); }

/* Panel: selected county */

.card { padding: 28px 32px; display: flex; flex-direction: column; gap: 26px; }

.where .st {
  font-size: 12px;
  color: var(--ink2);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.where h2 { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; }

.total { display: flex; align-items: baseline; gap: 10px; }
.total .n { font-size: 64px; font-weight: 400; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.total .pct { font-size: 24px; color: var(--ink2); }
.total-l {
  font-size: 12px;
  color: var(--ink2);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}
.total-note { font-size: 12.5px; color: var(--ink2); margin-top: 8px; }

.rows { display: flex; flex-direction: column; }
.row {
  display: grid;
  grid-template-columns: 90px 1fr 64px;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.row:last-child { border-bottom: 1px solid var(--line); }
.row .l { font-size: 13px; }
.row .bar { height: 6px; background: var(--line); border-radius: 3px; overflow: hidden; }
.row .bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.row .v { text-align: right; font-size: 13px; }
.row.zero .v, .row.zero .l { color: var(--ink3); }

.sec-t {
  font-size: 12px;
  color: var(--ink2);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}

.nb { display: flex; flex-direction: column; }
.nb button {
  all: unset;
  display: grid;
  grid-template-columns: 1fr 60px 56px;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
  font-size: 13px;
}
.nb button:last-child { border-bottom: 1px solid var(--line); }
.nb button:hover .nm { color: var(--accent-ink); }
.nb .r { text-align: right; }
.nb .d { text-align: right; font-size: 12px; }
.nb .d.up { color: var(--accent-ink); }
.nb .d.dn { color: oklch(0.5 0.1 150); }
.nb .d.eq { color: var(--ink3); }
.nb .none {
  color: var(--ink3);
  padding: 8px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.meta {
  margin-top: auto;
  padding: 18px 32px 22px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.meta b { font-weight: 500; color: var(--ink); }

/* Loading and error overlays */

.loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink2);
  font-size: 13px;
  background: var(--bg);
}
.loading[hidden] { display: none; }
.loading .msg { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.loading .retry {
  padding: 6px 12px;
  border: 1px solid var(--line2);
  background: var(--panel);
  border-radius: 6px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ink2);
  transition: all .15s;
}
.loading .retry:hover { border-color: var(--ink3); color: var(--ink); }