/* Provväljaren */

.prov-head .lead { margin-bottom: var(--s-4); }
.term-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.summary { margin: 0; color: var(--muted); }

/* Terminsväljare */
.dd { position: relative; z-index: 20; }
.dd-btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 40px; padding: var(--s-1) var(--s-3);
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm);
  font-weight: 600;
}
.dd-btn:hover { border-color: var(--primary); }
.dd-label { color: var(--muted); font-weight: 400; }
.dd-btn svg { transition: transform 0.15s; }
.dd.open .dd-btn svg { transform: rotate(180deg); }
.dd-menu {
  position: absolute; left: 0; top: calc(100% + 6px);
  min-width: 260px; max-height: 340px; overflow: auto;
  margin: 0; padding: var(--s-1); list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  opacity: 0; transform: translateY(-4px); visibility: hidden; pointer-events: none;
  transition: opacity 0.12s, transform 0.12s, visibility 0.12s;
}
.dd.open .dd-menu { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.dd-menu .grp { padding: var(--s-2) var(--s-3) var(--s-1); font-size: var(--step--1); color: var(--muted); }
.dd-menu a { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); color: var(--text); text-decoration: none; }
.dd-menu a small { color: var(--muted); }
.dd-menu a:hover, .dd-menu a:focus-visible { background: var(--surface-2); box-shadow: none; }
.dd-menu a[aria-current="true"] { background: var(--primary-soft); color: var(--primary); font-weight: 600; }

/* Filter */
.controls { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: space-between; margin: 0 0 var(--s-4); }
.search input { min-width: 240px; }

/* Kort per provpass – färgen är samma som provhäftets omslag */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-4); }
.card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
a.card:hover { border-color: var(--primary); box-shadow: var(--shadow-1); }
.card .top {
  position: relative;
  padding: var(--s-4) var(--s-5) var(--s-5);
  background: var(--tint);
  color: #1d1a26;
}
:root[data-theme="dark"] .card .top { background: color-mix(in srgb, var(--tint) 22%, var(--surface)); color: var(--text); }
.card .num { font-size: var(--step--1); font-weight: 600; opacity: 0.8; }
.card h2 { margin: 2px 0 0; font-size: var(--step-2); }
.badge {
  position: absolute; right: var(--s-4); top: var(--s-4);
  padding: 2px var(--s-3); border-radius: var(--r-pill);
  background: var(--surface); color: var(--text);
  font-size: var(--step--1); font-weight: 600;
}
.badge.live { background: var(--highlight); color: var(--on-highlight); }
.badge.done { background: var(--ok-soft); color: var(--ok); }
.card .body { padding: var(--s-4) var(--s-5) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.desc { margin: 0; color: var(--muted); }
.desc.warn { color: var(--warn); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.card .chip { font-size: 0.8rem; }
.prog { height: 6px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.prog > div { height: 100%; background: var(--primary); }
.meta { font-size: var(--step--1); color: var(--muted); min-height: 1.4em; }
.cta { margin-top: auto; font-weight: 700; color: var(--primary); }
a.card:hover .cta { text-decoration: underline; text-underline-offset: 0.18em; }
.card.off { opacity: 0.75; }
.card.off .top { background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 10px, var(--bg) 10px, var(--bg) 20px); color: var(--muted); }
.card.off .cta { color: var(--muted); }

.foot { margin-top: var(--s-6); color: var(--muted); font-size: var(--step--1); }

@media (max-width: 560px) {
  .search, .search input { width: 100%; min-width: 0; }
  .grid { grid-template-columns: 1fr; }
}

/* Starta om alla provpass */
.reset-all {
  margin-top: var(--s-6);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s-3) var(--s-5);
  align-items: center;
}
.reset-all h2 { font-size: var(--step-1); margin-bottom: var(--s-1); }
.reset-all p { margin: 0; color: var(--muted); max-width: 60ch; }
.reset-confirm { grid-column: 1 / -1; padding: var(--s-3) var(--s-4); background: var(--warn-soft); border-radius: var(--r-sm); }
.reset-confirm p { color: var(--text); margin-bottom: var(--s-3); }
@media (max-width: 640px) { .reset-all { grid-template-columns: 1fr; } }

.card--skeleton .top { background: var(--surface-2); }
.card--skeleton .skeleton--title { width: 70%; }