/* ==========================================================================
   HGF Enkät — komponenter för Bopols partienkät
   Bygger på tokens.css. Inga hårdkodade färger utom partifärgerna, som är
   partiernas egna identitetsfärger och därför inte hör hemma i HGF-paletten.
   ========================================================================== */

/* ---- Partifärger (identitet, ej värdering) ------------------------------- */
.hgf-enkat {
  --parti-C:  #009933;
  --parti-L:  #006AB3;
  --parti-KD: #000077;
  --parti-M:  #52BDEC;
  --parti-SD: #DDDD00;
  --parti-MP: #83CF39;
  --parti-S:  #E8112D;
  --parti-V:  #DA291C;
}

/* ---- Partibricka -------------------------------------------------------- */
/* Partinamnet är ALLTID riktig text. Färgchippet är dekor ovanpå, aldrig
   ensam bärare av informationen. En logotyp kan senare läggas in i .hgf-parti__chip
   utan att något annat behöver ändras. */
.hgf-parti {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  color: var(--color-ink);
}
.hgf-parti__chip {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-sm);
  background: var(--chip, var(--hgf-grey-50));
  color: #fff;
  font-size: var(--fs-sm);
  letter-spacing: 0.01em;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
/* SD:s och MP:s gula respektive ljusgröna kräver mörk text för kontrast */
.hgf-parti--SD .hgf-parti__chip,
.hgf-parti--MP .hgf-parti__chip,
.hgf-parti--M  .hgf-parti__chip { color: var(--hgf-black); }

.hgf-parti--C  { --chip: var(--parti-C);  }
.hgf-parti--L  { --chip: var(--parti-L);  }
.hgf-parti--KD { --chip: var(--parti-KD); }
.hgf-parti--M  { --chip: var(--parti-M);  }
.hgf-parti--SD { --chip: var(--parti-SD); }
.hgf-parti--MP { --chip: var(--parti-MP); }
.hgf-parti--S  { --chip: var(--parti-S);  }
.hgf-parti--V  { --chip: var(--parti-V);  }

.hgf-parti__namn { font-size: var(--fs-sm); }
.hgf-parti__kort { display: none; }

/* ---- Svarschip ---------------------------------------------------------- */
/* MEDVETET NEUTRALT. Ja är inte grönt och nej är inte rött: rapporten
   redovisar partiernas ståndpunkter, den betygsätter dem inte. Kodningen är
   fylld / kontur / dämpad, inte bra / dåligt. Färgen bär aldrig informationen
   ensam, texten står alltid i chippet. */
.hgf-svar {
  display: inline-block;
  padding: 0.3em 0.75em;
  border-radius: var(--radius-pill);
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  white-space: nowrap;
  border: 2px solid transparent;
}
/* Instämmande: fylld */
.hgf-svar--ja,
.hgf-svar--bra,
.hgf-svar--for-liten {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
/* Avvisande: kontur */
.hgf-svar--nej,
.hgf-svar--daligt,
.hgf-svar--for-stor {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
/* Mellanläge: gul ton */
.hgf-svar--kanske,
.hgf-svar--tveksam,
.hgf-svar--lagom {
  background: var(--hgf-yellow);
  color: var(--hgf-black);
}
/* Inget besked: dämpad */
.hgf-svar--ingen-asikt,
.hgf-svar--vet-ej,
.hgf-svar--ej-svar {
  background: var(--hgf-grey-15);
  color: var(--hgf-grey-70);
}
/* Partiet svarade med egna ord i stället: pekare, inte värde */
.hgf-svar--eget {
  background: var(--color-surface-red);
  color: var(--color-cta);
  border-color: var(--color-cta);
  text-decoration: none;
}
.hgf-svar--eget:hover,
.hgf-svar--eget:focus { background: var(--color-cta); color: #fff; }
/* Otolkbar cell — se korrekturlistan */
.hgf-svar--oklar {
  background: repeating-linear-gradient(45deg, var(--hgf-grey-15), var(--hgf-grey-15) 4px, #fff 4px, #fff 8px);
  color: var(--hgf-grey-70);
  border-color: var(--hgf-grey-50);
  border-style: dashed;
}

/* ---- Svarstabell -------------------------------------------------------- */
.hgf-enkat__fraga {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  margin: 0 0 var(--space-2);
}
.hgf-enkat__skala {
  font-size: var(--fs-sm);
  color: var(--color-ink-muted);
  margin: 0 0 var(--space-4);
}
.hgf-enkat__scroll { overflow-x: auto; }

table.hgf-tabell {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: var(--hgf-white);
}
table.hgf-tabell th,
table.hgf-tabell td {
  padding: var(--space-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}
table.hgf-tabell thead th {
  font-family: var(--font-heading);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-on-primary);
  background: var(--color-primary);
  vertical-align: bottom;
  border-bottom: 0;
}
table.hgf-tabell thead th:first-child { width: 12.5rem; }
table.hgf-tabell tbody tr:nth-child(even) { background: var(--color-surface); }
table.hgf-tabell tbody tr:hover { background: var(--color-surface-blue); }
table.hgf-tabell td.hgf-tabell__parti { white-space: nowrap; }
table.hgf-tabell td.hgf-fritext { white-space: normal; font-family: var(--font-body); line-height: var(--lh-body); }

/* Mobil: tabellen blir ett kort per parti. En åttaradig sexkolumnsmatris är
   oläslig på telefon, och horisontell scroll döljer vem raden gäller. */
@media (max-width: 780px) {
  /* Kortläget behöver ingen horisontell scroll. Ligger wrappern kvar som
     overflow:auto får korten bredd av sitt min-content och chippen hamnar
     utanför skärmkanten. */
  .hgf-enkat__scroll { overflow-x: visible; }
  /* Dölj kolumnrubrikerna för seende utan att ta dem ur tillgänglighetsträdet.
     INTE left:-9999px — det ligger kvar i layouten och drar ut hela sidan på
     bredden så fort wrappern inte längre klipper. clip-path tar ingen plats. */
  table.hgf-tabell thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  table.hgf-tabell,
  table.hgf-tabell tbody,
  table.hgf-tabell tr,
  table.hgf-tabell td { display: block; width: 100%; }
  table.hgf-tabell tr {
    margin: 0 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--hgf-white);
  }
  table.hgf-tabell tbody tr:nth-child(even) { background: var(--hgf-white); }
  table.hgf-tabell td.hgf-tabell__parti {
    background: var(--color-surface-blue);
    border-bottom: 1px solid var(--color-border);
  }
  table.hgf-tabell td:not(.hgf-tabell__parti) {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }
  table.hgf-tabell td:not(.hgf-tabell__parti)::before {
    content: attr(data-fraga);
    font-family: var(--font-heading);
    font-weight: var(--fw-bold);
    font-size: var(--fs-xs);
    color: var(--color-ink-muted);
    text-align: left;
    /* min-width:0 krävs för att etiketten ska få radbryta i stället för att
       tvinga ut cellen på bredden. */
    flex: 1 1 8rem;
    min-width: 0;
  }
  /* Fritextceller: etiketten på egen rad ovanför texten. */
  table.hgf-tabell td.hgf-fritext { display: block; }
  table.hgf-tabell td.hgf-fritext::before { display: block; margin-bottom: var(--space-2); }
  table.hgf-tabell tr td:last-child { border-bottom: 0; }
}

/* ---- Teckenförklaring --------------------------------------------------- */
.hgf-teckenforklaring {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  align-items: center;
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  font-size: var(--fs-xs);
  color: var(--color-ink-muted);
}

/* ---- Partikommentar ----------------------------------------------------- */
.hgf-kommentar {
  margin: var(--space-4) 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface);
  border-left: 4px solid var(--chip, var(--color-primary));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.hgf-kommentar > .hgf-parti { margin-bottom: var(--space-2); }
.hgf-kommentar p {
  margin: 0;
  font-family: var(--font-body);
  line-height: var(--lh-body);
}
.hgf-kommentar--C  { --chip: var(--parti-C);  }
.hgf-kommentar--L  { --chip: var(--parti-L);  }
.hgf-kommentar--KD { --chip: var(--parti-KD); }
.hgf-kommentar--M  { --chip: var(--parti-M);  }
.hgf-kommentar--SD { --chip: var(--parti-SD); }
.hgf-kommentar--MP { --chip: var(--parti-MP); }
.hgf-kommentar--S  { --chip: var(--parti-S);  }
.hgf-kommentar--V  { --chip: var(--parti-V);  }

/* ---- Redaktionell not / faktaruta --------------------------------------- */
.hgf-not {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--color-cta);
  background: var(--color-surface-red);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}
.hgf-not strong { color: var(--color-cta); }

/* ---- Datakvalitetsflagga (endast i prototypen) -------------------------- */
.hgf-flagga {
  margin: var(--space-2) 0 var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--hgf-warning);
  border-radius: var(--radius-md);
  background: #fff;
  font-size: var(--fs-xs);
  color: var(--hgf-warning);
}