/* Ideal points app. The tokens, the header and the footer are the ones of legislab.org
   (assets/site.css there): light paper with a hint of green, near-black green ink, yerba
   green as the main color and ochre for underlines. The app pages are always light, whatever
   the system setting (only the landing page of the site has a dark variant), and the figure
   itself is always white. Archivo for titles and controls, Faustina for text. */

@font-face {
  font-family: "Archivo";
  src: url("https://www.legislab.org/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Faustina";
  src: url("https://www.legislab.org/assets/fonts/faustina-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 800; font-style: normal; font-display: swap;
}

:root {
  /* the light palette of site.css */
  --papel: #f5f7f4;
  --tinta: #17201b;
  --gris: #58635c;
  --linea: #d7ded9;
  --yerba: #2d5c44;
  --ocre: #c4891e;
  --sobre-yerba: #f5f7f4;
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --texto: "Faustina", Georgia, "Times New Roman", serif;
  --ancho: 72rem;
  --canal: clamp(1rem, 4vw, 2.5rem);
  /* app only */
  --superficie: #ffffff;
  --suave: #ebf0ec;
  --radio: 3px;
  color-scheme: light;
}

/* ---- base (from site.css) ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  background: var(--papel); color: var(--tinta);
  font-family: var(--texto); font-size: 1.05rem; line-height: 1.5; font-optical-sizing: auto;
}
main { flex: 1; }
svg { max-width: 100%; }
p { margin: 0; }
a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--ocre); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
a:hover { color: var(--yerba); }
:focus-visible { outline: 3px solid var(--yerba); outline-offset: 3px; border-radius: 2px; }
.saltar { position: absolute; left: -999rem; top: 0.75rem; background: var(--papel); padding: 0.5rem 1rem; font-family: var(--display); z-index: 10; }
.saltar:focus { left: 1rem; }
.envoltura { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--canal); }

/* ---- header (from site.css) ---- */
.cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem 2rem; padding-block: 1.5rem; }
.redes { display: flex; align-items: center; gap: 1.1rem; align-self: center; }
.redes a { display: inline-flex; color: var(--tinta); padding: 0.25rem; margin: -0.25rem; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; }
.redes a:hover { color: var(--yerba); border-bottom-color: var(--ocre); }
.redes svg { width: 1.2rem; height: 1.2rem; fill: currentColor; display: block; }
.nav { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; font-family: var(--display); font-size: 0.98rem; font-weight: 500; }
.nav a { text-decoration: none; padding-block: 0.25rem; }
.nav a:hover { text-decoration: underline; text-decoration-color: var(--ocre); }

/* ---- footer (from site.css) ---- */
.pie { border-top: 1px solid var(--linea); padding-block: 1.5rem 2rem; font-family: var(--display); font-size: 0.98rem; }
.pie-grid { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1.25rem 3rem; }
.pie a { text-decoration: none; }
.pie a:hover { text-decoration: underline; text-decoration-color: var(--ocre); }
.derechos { color: var(--gris); font-size: 0.9rem; }

/* ---- the app ---- */
.app { padding-block: 0.5rem 2.5rem; }
.app-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
h1 { font-family: var(--display); font-stretch: 112%; font-weight: 700; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 0.35rem; }
.subtitle { margin: 0; color: var(--gris); font-size: 1.05rem; }

.lang { display: inline-flex; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; flex: none; font-family: var(--display); }
.lang button { border: 0; background: var(--superficie); color: var(--gris); padding: 5px 10px; font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.lang button + button { border-left: 1px solid var(--linea); }
.lang button.is-active { background: var(--yerba); color: var(--sobre-yerba); }

/* one row of filters above the chart */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 0 12px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); margin-bottom: 8px; font-family: var(--display); font-size: .95rem; }
.seg { display: inline-flex; border: 1px solid var(--linea); border-radius: var(--radio); padding: 0; margin: 0; overflow: hidden; background: var(--superficie); }
.seg label { position: relative; padding: 6px 12px; cursor: pointer; color: var(--gris); user-select: none; font-weight: 500; }
.seg label + label { border-left: 1px solid var(--linea); }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg label:has(input:checked) { background: var(--yerba); color: var(--sobre-yerba); }
.seg label:has(input:focus-visible) { outline: 3px solid var(--yerba); outline-offset: -3px; }

.period { display: inline-flex; align-items: center; gap: 4px; }
.period select { font: inherit; padding: 5px 8px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); color: var(--tinta); min-width: 150px; }
.step { font: inherit; font-size: 1.1rem; line-height: 1; width: 30px; height: 32px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); color: var(--gris); cursor: pointer; }
.step:hover { color: var(--yerba); border-color: var(--yerba); }
.step:disabled { opacity: .35; cursor: default; }

.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--gris); }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--yerba); }

/* bill search */
.controls-search { border-top: 0; padding-top: 0; margin-top: -2px; }
.search { position: relative; flex: 1 1 320px; max-width: 760px; }
.search input { width: 100%; font: inherit; padding: 7px 10px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); color: var(--tinta); }
.search input::placeholder { color: var(--gris); }
#bill-results { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); max-height: 360px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none; background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
#bill-results li { padding: 6px 10px; cursor: pointer; display: grid; grid-template-columns: 84px 1fr auto; gap: 2px 10px; align-items: baseline; font-size: .85rem; }
#bill-results li + li { border-top: 1px solid var(--linea); }
#bill-results li:hover, #bill-results li[aria-selected="true"] { background: var(--suave); }
#bill-results .r-date { color: var(--gris); font-variant-numeric: tabular-nums; white-space: nowrap; }
#bill-results .r-title { color: var(--tinta); font-family: var(--texto); font-size: .95rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
#bill-results .r-count { color: var(--gris); white-space: nowrap; font-variant-numeric: tabular-nums; }
#bill-results .r-note { grid-column: 1 / -1; color: var(--gris); cursor: default; }
#bill-results .r-note:hover { background: transparent; }

.bill-info[hidden] { display: none; }
.bill-info { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; padding: 10px 12px; margin: 0 0 8px; background: var(--suave); border: 1px solid var(--linea); border-radius: var(--radio); }
.bill-text { min-width: 0; }
.bill-title { margin: 0 0 3px; font-weight: 600; font-size: .98rem; line-height: 1.35; }
.bill-meta { margin: 0 0 6px; color: var(--gris); font-family: var(--display); font-size: .85rem; }
.bill-symbols { margin: 0; color: var(--gris); font-family: var(--display); font-size: .8rem; display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; }
.bill-symbols .sym { display: inline-block; font-weight: 700; color: var(--tinta); line-height: 1; margin-left: 8px; }
.bill-symbols .sym:first-child { margin-left: 0; }
.bill-symbols .sym-line { width: 18px; height: 0; border-top: 1.5px solid var(--tinta); position: relative; top: 1px; }
.bill-clear { flex: none; font-family: var(--display); font-size: .85rem; font-weight: 600; padding: 5px 10px; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); color: var(--gris); cursor: pointer; }
.bill-clear:hover { color: var(--yerba); border-color: var(--yerba); }

.plot-wrap { width: 100%; }
/* the figure is white, like a figure on the page */
#plot { width: 100%; height: 66vh; min-height: 420px; max-height: 760px; background: #ffffff; border: 1px solid var(--linea); border-radius: var(--radio); }

/* party key with full names */
.key { margin-top: 6px; font-family: var(--display); }
.key-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); margin: 0 0 6px; font-weight: 600; }
.key-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.key-list li { display: inline-flex; align-items: baseline; gap: 7px; font-size: .9rem; color: var(--gris); }
.key-list .swatch { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); position: relative; top: 1px; }
.key-list .code { font-weight: 650; color: var(--tinta); }
.key-list .count { color: var(--gris); font-size: .8rem; }
.hint { color: var(--gris); font-size: .85rem; margin: 10px 0 0; }

.table-wrap { margin-top: 18px; border-top: 1px solid var(--linea); padding-top: 10px; font-family: var(--display); }
.table-wrap summary { cursor: pointer; color: var(--gris); font-size: .9rem; }
.table-scroll { overflow-x: auto; margin-top: 8px; }
table { border-collapse: collapse; width: 100%; font-size: .85rem; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 5px 8px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
th { color: var(--gris); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
td.num, th.num { text-align: right; }
td .swatch { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15); }

.notes { margin-top: 18px; color: var(--gris); font-size: .9rem; max-width: 60em; }
.notes .updated { color: var(--tinta); font-family: var(--display); font-size: .9rem; margin-bottom: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

@media (max-width: 640px) {
  #plot { height: 70vh; min-height: 380px; }
  .period select { min-width: 0; flex: 1; }
  .period { width: 100%; }
  #bill-results li { grid-template-columns: 1fr auto; }
  #bill-results .r-date { grid-column: 1 / -1; }
}