/* Delprovstraning — egen CSS sa att vyn kan byggas utan att krocka i bas.css.
   Mobil-forst. Enbart variablerna fran bas.css: --bg --yta --ram --text
   --dampad --accent --accent-svag --ratt --fel --radie. Ljust/morkt lage
   foljer automatiskt av variablerna. */

/* ---------- oversikt ---------- */

.drill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.drill-chip {
  display: grid;
  gap: 2px;
  min-width: 72px;
  padding: 8px 10px;
  text-align: center;
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
}
.drill-chip-kod { font-weight: 600; font-size: .85rem; }
.drill-chip-varde { font-variant-numeric: tabular-nums; }
.drill-chip-not { font-size: .72rem; }
.drill-chip.svag {
  border-color: var(--fel);
  background: color-mix(in srgb, var(--fel) 7%, var(--yta));
}
.drill-chip.svag .drill-chip-not { color: var(--fel); font-weight: 600; }

.drill-lista { display: grid; gap: 8px; }
.drill-val {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
  cursor: pointer;
}
.drill-val:hover { border-color: var(--accent); }
.drill-val-kod { font-weight: 600; min-width: 2.8em; }
.drill-val-info { flex: 1; min-width: 0; font-size: .85rem; }
.drill-val-tr { font-variant-numeric: tabular-nums; color: var(--dampad); }
.drill-val.svag { border-color: var(--fel); }
.drill-val.svag .drill-val-tr { color: var(--fel); font-weight: 600; }

.drill-tomt code {
  display: inline-block;
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
  overflow-wrap: anywhere;
}

/* ---------- startpanel ---------- */

/* Erbjudandet att fortsatta en pabörjad omgang. Accentkanten till vanster
   ar hela poängen: kortet ska läsas fore tidvalet under, eftersom valet
   "fortsatt eller borja om" avgor vad tidvalet ens betyder. */
.drill-aterupptag {
  margin: 0 0 16px;
  padding: 12px 14px;
  background: var(--yta);
  border: 1px solid var(--ram);
  border-left: 3px solid var(--accent);
  border-radius: var(--radie);
}
.drill-aterupptag h2 { margin: 0 0 4px; font-size: 1rem; }
.drill-aterupptag p { margin: 0; }
.drill-aterupptag .drill-startknappar { margin: 12px 0 0; }

.drill-tidval {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 12px 14px;
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
}
.drill-tidval legend { font-weight: 600; padding: 0 4px; }
.drill-tidalternativ {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.drill-tidalternativ input { accent-color: var(--accent); }
.drill-startknappar { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }

/* ---------- historik ---------- */

.drill-tabellskal { overflow-x: auto; }
.drill-tabell {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}
.drill-tabell th {
  text-align: left;
  font-weight: 600;
  color: var(--dampad);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.drill-tabell th,
.drill-tabell td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--ram); }
.drill-tabell td:nth-child(3),
.drill-tabell td:nth-child(4) { font-variant-numeric: tabular-nums; }

/* ---------- sjalva passet ---------- */

.drill-topp {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--ram);
  margin-bottom: 12px;
}
.drill-topp-text { flex: 1; min-width: 0; display: grid; }
.drill-topp-text strong,
.drill-topp-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drill-topp-hoger { display: flex; align-items: center; gap: 10px; flex: none; }
.drill-timer { font-variant-numeric: tabular-nums; font-size: 1.1rem; font-weight: 600; }
.drill-timer.varning { color: var(--fel); }

.drill-yta { display: grid; gap: 14px; align-items: start; }
@media (min-width: 900px) {
  .drill-yta { grid-template-columns: minmax(0, 1fr) 340px; }
}

.drill-hint {
  margin: 0 0 8px;
  padding: 8px 10px;
  font-size: .85rem;
  background: var(--accent-svag);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
}
.drill-sidnav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.drill-sidnav .dampad { flex: 1; text-align: center; font-size: .85rem; }
.drill-sidbild {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--ram);
  border-radius: var(--radie);
}

.drill-blankett {
  padding: 12px 14px;
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
}
.drill-blankett h2 { margin-top: 0; }

.drill-rad {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-top: 1px solid var(--ram);
}
.drill-rad:first-child { border-top: none; }
.drill-rad-nr {
  width: 2.2em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--dampad);
}
.drill-rad-alt { display: flex; gap: 6px; margin-left: auto; }
.drill-alt {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ram);
  background: var(--yta);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.drill-alt[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

/* ---------- rattning ---------- */

.drill-facithuvud,
.drill-facitrad {
  display: grid;
  grid-template-columns: 2.6em 1fr 1fr 4.5em;
  gap: 8px;
  align-items: center;
  padding: 5px 0;
}
.drill-facitrad { border-top: 1px solid var(--ram); }
.drill-facithuvud span:first-child,
.drill-facitrad .drill-rad-nr { text-align: right; }
.drill-facit-svar,
.drill-facit-ratt { font-variant-numeric: tabular-nums; }
.drill-facitrad.ratt .drill-facit-utfall { color: var(--ratt); font-weight: 600; }
.drill-facitrad.fel .drill-facit-utfall { color: var(--fel); font-weight: 600; }
.drill-facitrad.fel { background: color-mix(in srgb, var(--fel) 6%, transparent); }

/* ---------- kontrast ----------
   bas.css satter vit text pa .knapp.primar; mot den ljusa accenten i morkt
   lage faller kontrasten under WCAG. --bg ger morkt-pa-ljust i morkt lage
   och ljust-pa-morkt i ljust lage — godkant i bada. Galler bara drillvyn. */
.drillvy .knapp.primar { color: var(--bg); }