/* provläge — två egna skrollytor sa att provsidan aldrig lamnar skarmen.
   Routern satter body[data-vy], och ytan heter #app. Matchar selektorerna
   inte skrollar hela sidan i stallet, och timern hamnar utanfor skarmen
   mitt i ett tidsatt pass. */
body[data-vy="prov"] {
  overflow: hidden;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}
body[data-vy="prov"] #huvudnav { flex: none; }
body[data-vy="prov"] #app {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

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

.provyta {
  flex: 1; min-height: 0;
  display: grid; grid-template-rows: 46dvh minmax(0, 1fr);
}
.sidyta { overflow: auto; padding: 10px 12px; -webkit-overflow-scrolling: touch; }
.sidnav {
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
  flex-wrap: nowrap;
  position: sticky; top: 0; z-index: 2;
  background: var(--bg); padding-bottom: 6px;
}
.sidnav .knapp { white-space: nowrap; padding-left: 12px; padding-right: 12px; }
/* Pa smal skarm racker pilarna — annars radbryter raden i tre nivaer och
   ater upp halva provsidan. */
@media (max-width: 520px) {
  .sidnav .knapptext { display: none; }
  .sidnav .sidknapp { padding-left: 14px; padding-right: 14px; font-size: 1.05rem; }
  .sidnav .dampad { font-size: .8rem; }
}
.sidnav .dampad { flex: 1; text-align: center; font-size: .85rem; }
#provsida {
  width: 100%; height: auto; display: block;
  background: #fff; border: 1px solid var(--ram); border-radius: var(--radie);
}
.blankett {
  overflow: auto; background: var(--yta);
  border: 1px solid var(--ram); border-width: 1px 0 0;
  border-radius: 0; padding: 12px 14px 40px;
}
.blankett h2 { margin-top: 0; }

@media (min-width: 900px) {
  .provyta { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) 340px; }
  .blankett { border-width: 0 0 0 1px; }
  .sidyta { padding: 16px; }
}

.rad {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; border-top: 1px solid var(--ram);
}
.rad:first-child { border-top: none; }
.rad-nr { width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; color: var(--dampad); }
.rad-alt { display: flex; gap: 6px; margin-left: auto; }
.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;
}
.alt[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.delprovrubrik {
  margin: 14px 0 4px; font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dampad);
}


.blankettverktyg { display: flex; gap: 8px; margin: 8px 0 4px; }
.liten-knapp { padding: 5px 10px; font-size: .85rem; }
.flagga {
  border: none; background: none; cursor: pointer; padding: 2px 4px;
  color: var(--dampad); font-size: .95rem; line-height: 1;
}
.flagga[aria-pressed="true"] { color: var(--fel); }
.rad.flaggad { background: color-mix(in srgb, var(--fel) 7%, transparent); }
.rad.flaggad .rad-nr { color: var(--fel); }

.zoomknappar { display: flex; align-items: center; gap: 4px; flex: none; }
.zoomknappar .liten-knapp { padding-left: 10px; padding-right: 10px; }
#zoom-etikett { min-width: 3.4em; text-align: center; white-space: nowrap; }
.zoomknappar .knapp { min-width: 34px; }
.sidyta { overscroll-behavior: contain; }

/* Granskningsdialogen ags av ../js/granskning.js och anvands av BADE
   #/prov och #/provpass. Reglerna star kvar har for att de skrevs har och
   for att all css laddas globalt — men de ar inte provlagets egna langre,
   sa rora inte klassnamnen utan att titta i granskning.js forst. */
.granskning {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, .45); padding: 0;
}
@media (min-width: 700px) { .granskning { align-items: center; padding: 24px; } }
.granskningskort {
  background: var(--yta); border: 1px solid var(--ram);
  border-radius: var(--radie) var(--radie) 0 0;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom));
  width: 100%; max-width: 520px; max-height: 85dvh; overflow-y: auto;
}
@media (min-width: 700px) { .granskningskort { border-radius: var(--radie); } }
.granskningskort h2 { margin-top: 0; }
.granskningsgrupp h3 { font-size: .8rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--dampad); margin: 16px 0 8px; }
.nummerknappar { display: flex; flex-wrap: wrap; gap: 6px; }
.nummerknapp {
  min-width: 38px; padding: 7px 0; font: inherit; cursor: pointer;
  border: 1px solid var(--ram); background: var(--yta); color: var(--text);
  border-radius: 8px; font-variant-numeric: tabular-nums;
}
.nummerknapp.obesvarad { border-color: var(--dampad); }
.nummerknapp.flaggad-knapp { border-color: var(--fel); color: var(--fel); }
.granskningskort .knapprad { display: flex; gap: 8px; margin-top: 22px; }
.granskningskort .knapprad .knapp { flex: 1; }
.rad.markerad { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
/* Tidsvarningen i dialogen visas bara nar tiden ar knapp och nagot ar
   obesvarat — se granskning.js. Marginalen halls har sa att den inte
   klistrar ihop med nummerknapparna under. */
#granskning-bradskar { margin: 12px 0 0; }