/* ── Variabler ─────────────────────────────────────────────────────────────── */

:root {
  --blå:         #005B9A;   /* Riksdagsblå */
  --blå-ljus:    #E8F1F8;
  --text:        #1A1A1A;
  --text-mjuk:   #555;
  --kant:        #D8D8D8;
  --yta:         #F5F7FA;
  --vit:         #FFFFFF;
  --ja:          #2A7A1E;   /* Röst Ja */
  --nej:         #C0392B;   /* Röst Nej */
  --avstar:      #7F8C8D;   /* Avstår */
  --franvaro:    #BDC3C7;   /* Frånvarande */
  --radbredd:    860px;
  --radium:      6px;
}

/* ── Reset & bas ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--yta);
}

a { color: var(--blå); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: "SF Mono", Consolas, monospace;
  font-size: 0.85em;
  background: var(--yta);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

/* ── Layout ────────────────────────────────────────────────────────────────── */

.container {
  max-width: var(--radbredd);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ── Header ────────────────────────────────────────────────────────────────── */

header {
  background: var(--blå);
  color: var(--vit);
  padding: 0.75rem 0;
}

header .container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logotyp {
  color: var(--vit);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.logotyp:hover { text-decoration: underline; color: var(--vit); }

.riksmote-bricka {
  font-size: 0.8rem;
  background: rgba(255,255,255,0.18);
  padding: 0.2em 0.65em;
  border-radius: 20px;
}

.header-nav {
  margin-left: auto;
  display: flex;
  gap: 1.25rem;
}

.om-lank {
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
  text-decoration: none;
}
.om-lank:hover { color: #fff; text-decoration: underline; }

/* ── Footer ────────────────────────────────────────────────────────────────── */

footer {
  margin-top: 3rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--kant);
  font-size: 0.85rem;
  color: var(--text-mjuk);
}

/* ── Ingress / förstasida ──────────────────────────────────────────────────── */

.intro {
  margin: 2rem 0 2.5rem;
}

.intro h1 {
  font-size: 1.7rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  color: var(--blå);
}

.ingress {
  font-size: 1rem;
  color: var(--text-mjuk);
  margin-bottom: 0.5rem;
  max-width: 640px;
}

.statistik-rad {
  display: flex;
  gap: 2rem;
  margin: 1.5rem 0 0;
}

.statistik-siffra {
  display: flex;
  flex-direction: column;
}

.statistik-siffra strong {
  font-size: 2rem;
  font-weight: 700;
  color: var(--blå);
  line-height: 1;
}

.statistik-siffra span {
  font-size: 0.8rem;
  color: var(--text-mjuk);
  margin-top: 0.2rem;
}

/* ── Utskott-gruppering ────────────────────────────────────────────────────── */

.sektionsrubrik {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--kant);
}

.utskott-grupp {
  margin-bottom: 2rem;
}

.utskott-rubrik {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mjuk);
  margin: 1.5rem 0 0.5rem;
}

/* ── Betänkande-lista (förstasida) ─────────────────────────────────────────── */

.betankande-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.betankande-kort {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--vit);
  border: 1px solid var(--kant);
  border-radius: var(--radium);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.betankande-kort:hover {
  border-color: var(--blå);
  box-shadow: 0 2px 8px rgba(0,91,154,0.12);
  text-decoration: none;
  color: var(--text);
}

.beteckning {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--blå);
  font-variant-numeric: tabular-nums;
}

.titel {
  font-size: 0.95rem;
  line-height: 1.4;
}

.antal-voteringar {
  font-size: 0.8rem;
  color: var(--text-mjuk);
  white-space: nowrap;
}

.antal-voteringar.acklamation {
  color: var(--avstar);
  font-style: italic;
}

/* ── Utskottslista (förstasida) ────────────────────────────────────────────── */

.utskott-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 2rem;
}

.utskott-bar {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1rem;
  background: var(--vit);
  border: 1px solid var(--kant);
  border-radius: var(--radium);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.utskott-bar:hover {
  border-color: var(--blå);
  box-shadow: 0 2px 8px rgba(0, 91, 154, 0.12);
  text-decoration: none;
  color: var(--text);
}

.utskott-namn {
  font-size: 0.95rem;
  font-weight: 500;
}

.utskott-tal {
  display: flex;
  gap: 1.25rem;
  font-size: 0.78rem;
  color: var(--text-mjuk);
}

/* ── Ingen-votering-info ───────────────────────────────────────────────────── */

.ingen-votering-info {
  background: var(--blå-ljus);
  border: 1px solid #c0d8ed;
  border-radius: var(--radium);
  padding: 0.85rem 1.1rem;
  font-size: 0.9rem;
  color: #1a3d5c;
  margin-bottom: 1.5rem;
}

/* ── Brödsmula-nav ─────────────────────────────────────────────────────────── */

.brodsmulenav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.5rem 0 1rem;
  font-size: 0.85rem;
  color: var(--text-mjuk);
}

.brodsmulenav a { color: var(--blå); }
.brodsmulesep { opacity: 0.4; }

/* ── Betänkande-huvud ──────────────────────────────────────────────────────── */

.betankande-huvud {
  margin-bottom: 2rem;
}

.beteckning-stor {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--vit);
  background: var(--blå);
  padding: 0.2em 0.65em;
  border-radius: 20px;
  margin-bottom: 0.6rem;
}

.betankande-huvud h1 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  line-height: 1.3;
}

.meta-rad {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  font-size: 0.85rem;
  color: var(--text-mjuk);
  align-items: center;
}

.meta-rad a { color: var(--blå); }

/* ── Votering-lista (i betänkandevy) ───────────────────────────────────────── */

.votering-lista {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.votering-kort {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--vit);
  border: 1px solid var(--kant);
  border-radius: var(--radium);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.votering-kort:hover {
  border-color: var(--blå);
  box-shadow: 0 2px 8px rgba(0,91,154,0.12);
}

.punkt-etikett {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blå);
  white-space: nowrap;
  min-width: 64px;
}

.datum-liten {
  font-size: 0.8rem;
  color: var(--text-mjuk);
  white-space: nowrap;
}

.chip-rad {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-left: auto;
}

/* ── Chips för röstsammanfattning ──────────────────────────────────────────── */

.chip {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  padding: 0.15em 0.5em;
  border-radius: 20px;
  font-weight: 600;
}

.chip.ja        { background: #E8F5E9; color: var(--ja);       border: 1px solid #A5D6A7; }
.chip.nej       { background: #FFEBEE; color: var(--nej);      border: 1px solid #EF9A9A; }
.chip.avstar    { background: #ECEFF1; color: var(--avstar);   border: 1px solid #CFD8DC; }
.chip.franvaro  { background: #F5F5F5; color: #9E9E9E;         border: 1px solid #E0E0E0; }

/* ── Votering-huvud ────────────────────────────────────────────────────────── */

.votering-huvud {
  margin-bottom: 1.5rem;
}

.votering-huvud h1 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.forklaring {
  font-size: 0.85rem;
  color: var(--text-mjuk);
  margin-top: 0.75rem;
  max-width: 560px;
}

/* ── Röst-tabell ───────────────────────────────────────────────────────────── */

.roster-tabell {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.roster-tabell th,
.roster-tabell td {
  padding: 0.5rem 0.65rem;
  text-align: right;
  border-bottom: 1px solid var(--kant);
}

.roster-tabell th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mjuk);
  background: var(--yta);
}

.roster-tabell th.parti-kol,
.roster-tabell td.parti-cell { text-align: left; }

.roster-tabell th.visuell-kol,
.roster-tabell td.visuell { width: 120px; }

.roster-tabell th.ja  { color: var(--ja);     }
.roster-tabell th.nej { color: var(--nej);    }

.roster-tabell td.antal { font-variant-numeric: tabular-nums; }

.roster-tabell td.ja   { color: var(--ja);      font-weight: 500; }
.roster-tabell td.nej  { color: var(--nej);     font-weight: 500; }
.roster-tabell td.avstar   { color: var(--avstar); }
.roster-tabell td.franvaro { color: #aaa; }

.roster-tabell td.ja.noll,
.roster-tabell td.nej.noll,
.roster-tabell td.avstar.noll,
.roster-tabell td.franvaro.noll { color: #ccc; font-weight: 400; }

.roster-tabell tfoot tr {
  border-top: 2px solid var(--kant);
  font-weight: 600;
  background: var(--yta);
}

/* ── Parti-cell i tabellen ─────────────────────────────────────────────────── */

.parti-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.parti-farg {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Officiella partiفärger */
.parti-V  { background: #AF0000; }
.parti-S  { background: #E8112D; }
.parti-MP { background: #53A045; }
.parti-C  { background: #009933; }
.parti-L  { background: #006AB3; }
.parti-KD { background: #231977; }
.parti-M  { background: #1B3F7D; }
.parti-SD { background: #DDDD00; border: 1px solid #ccc; }

.parti-kod  { font-weight: 700; font-size: 0.85rem; min-width: 28px; }
.parti-namn { color: var(--text-mjuk); font-size: 0.8rem; }

/* ── Ja/Nej-stapel ─────────────────────────────────────────────────────────── */

.ja-nej-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: #EEE;
  min-width: 80px;
}

.bar-ja  { background: var(--ja);  }
.bar-nej { background: var(--nej); }
.bar-tom { color: var(--kant); font-size: 0.8rem; }

/* ── Termförklaringar ──────────────────────────────────────────────────────── */

.term-forklaring {
  color: var(--text-mjuk);
  font-style: italic;
  font-size: 0.93em;
}

/* ── Om sidan ───────────────────────────────────────────────────────────────── */

.om-sida h1 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--blå);
  margin: 2rem 0 1rem;
}

.om-sida p {
  max-width: 640px;
  margin-bottom: 1rem;
  line-height: 1.7;
}

.om-sida h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--kant);
}

.ordlista {
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ordlista div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 0.5rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--kant);
}

.ordlista dt {
  font-weight: 600;
  font-size: 0.9rem;
}

.ordlista dd {
  font-size: 0.9rem;
  color: var(--text-mjuk);
  line-height: 1.5;
}

/* ── Beslutsstatus ─────────────────────────────────────────────────────────── */

.beslutsstatus {
  font-size: 0.85rem;
  color: var(--text-mjuk);
  background: var(--yta);
  border: 1px solid var(--kant);
  border-radius: var(--radium);
  padding: 0.6rem 1rem;
  margin-bottom: 1.5rem;
}

/* ── Riksdagens sammanfattning ─────────────────────────────────────────────── */

.riksdagens-sammanfattning {
  background: var(--vit);
  border: 1px solid var(--kant);
  border-radius: var(--radium);
  padding: 1.25rem;
  margin-bottom: 2rem;
}

.sammanfattning-rubrik {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-mjuk);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  border: none;
  padding: 0;
}

.kallank {
  font-size: 0.8rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--blå);
}

.sammanfattning-html {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text);
}

.sammanfattning-html p { margin-bottom: 0.65rem; }
.sammanfattning-html p:last-child { margin-bottom: 0; }
.sammanfattning-html a { color: var(--blå); }

/* ── Votering-detalj ───────────────────────────────────────────────────────── */

.votering-detalj {
  background: var(--vit);
  border: 1px solid var(--kant);
  border-radius: var(--radium);
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.detalj-rubrik {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: var(--text);
}

.detalj-forslag {
  font-size: 0.85rem;
  color: var(--text-mjuk);
  line-height: 1.65;
  margin-bottom: 0.85rem;
}

.detalj-forslag a { color: var(--blå); }

.votering-mot {
  font-size: 0.85rem;
  background: var(--yta);
  border-radius: var(--radium);
  padding: 0.5rem 0.75rem;
  color: var(--text);
}

/* ── Processdiagram ────────────────────────────────────────────────────────── */

.process-diagram {
  margin-top: 1.75rem;
  max-width: 640px;
}

/* ── Källnot ────────────────────────────────────────────────────────────────── */

.kallnot {
  font-size: 0.75rem;
  color: var(--text-mjuk);
  margin-top: 0.75rem;
}

/* ── Laddning / fel ────────────────────────────────────────────────────────── */

.laddar, .fel {
  padding: 2rem 0;
  color: var(--text-mjuk);
}

.fel { color: var(--nej); }

.fel pre {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: var(--yta);
  border-radius: var(--radium);
  font-size: 0.85rem;
}

/* ── Responsiv ─────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  .betankande-kort {
    grid-template-columns: 50px 1fr;
  }
  .antal-voteringar { grid-column: 2; }

  .votering-kort { flex-wrap: wrap; }
  .chip-rad { margin-left: 0; }

  .parti-namn { display: none; }

  .roster-tabell th.visuell-kol,
  .roster-tabell td.visuell { display: none; }

  .statistik-rad { gap: 1rem; }
}