/* Innovationstyper. Lægger sig oven på assets/site.css og sporets
 * innovation.css, som har kalibreringen og reglens boks.
 *
 * Valgene står som selve matricen - to gange to med akserne skrevet på -
 * og ikke som fire knapper på række. Så er det ruden, man vælger, og man kan
 * se, hvilken akse man har ramt ved siden af. */

.hc-tabel {
  width: 100%;
  max-width: 640px;
  margin-top: 12px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--step--1);
}

/* Aksernes navne er lange ord i fastbredde. På en telefon skal de kunne
 * deles, ellers skubber tabellen siden ud til siden. */
.hc-tabel th, .hc-tabel td { overflow-wrap: anywhere; hyphens: auto; }

@media (max-width: 560px) {
  .hc-tabel th, .hc-tabel td { padding: 6px; }
  .hc-tabel thead th, .hc-tabel tbody th { letter-spacing: 0; font-size: 10px; }
  .hc-tabel tbody td { font-size: var(--step--1); }
}

.hc-tabel th,
.hc-tabel td {
  padding: 8px 10px;
  text-align: left;
  border: 1px solid var(--line-strong);
}

.hc-tabel thead th,
.hc-tabel tbody th {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: var(--paper-sunk);
}

.hc-tabel thead td { border: 0; }
.hc-tabel tbody td { font-size: var(--step-0); font-weight: 650; }

/* ── Matricen som valg ───────────────────────────────────────────────── */

.hc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px 8px;
  max-width: 560px;
  margin-top: 20px;
}

.hc-top,
.hc-side {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hc-top { grid-row: 1; text-align: center; }
.hc-top:nth-child(1) { grid-column: 2; }
.hc-top:nth-child(2) { grid-column: 3; }

.hc-side {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: center;
}

.hc-side.is-anden { grid-row: 3; }

.hc .skala {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
  margin-top: 0;
}

.hc .skala-btn { min-height: 76px; }

/* ── Jeres eget ─────────────────────────────────────────────────────── */

.eget-ruder {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  max-width: 520px;
  margin-top: 16px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}

.rude-btn {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 12px 8px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 0;
  cursor: pointer;
}

.rude-btn:hover { background: var(--paper-sunk); }
.rude-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.rude-btn.is-valgt { color: var(--on-accent); background: var(--accent); }
.rude-navn { font-weight: 650; }
.rude-akse { font-size: 10.5px; letter-spacing: .04em; opacity: .8; }

.eget-felt { max-width: 640px; margin-top: 16px; }

.eget-felt textarea {
  padding: 10px 13px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--edge);
  border-radius: var(--r-control);
  resize: vertical;
}

.eget-status { font-size: 12px; color: var(--ink-faint); align-self: center; }

.eget-historik {
  display: grid;
  gap: 10px;
  max-width: 640px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.eget-historik:empty { display: none; }

.eget-svar {
  padding: 10px 14px;
  background: var(--paper-sunk);
  border-left: 4px solid var(--ink);
}

.eget-dato { font-size: 11.5px; color: var(--ink-faint); }
.eget-rude { margin-top: 2px; font-weight: 700; }
.eget-hvorfor { margin-top: 4px; font-size: var(--step--1); color: var(--ink-soft); }

.note {
  max-width: var(--measure);
  margin-top: 22px;
  font-size: 13px;
  color: var(--ink-faint);
}