/* =========================================================================
   ordbank.css — sidstilar för ordbanken (dist/site/ordbank.html)
   Bygger vidare på temavariablerna i web.css (skandinaviskt minimalt:
   --bg/--surface/--ink/--ink-soft/--accent/--line m.fl., ljust + mörkt läge).
   Innehåll: "Öva ord"-kortet (kurs-pills + sökbar textdropdown + Starta +
   nedladdning), uppslagsdelen (nivåsektioner med kärnord/överkurs),
   övningsläget (3D-vändbara flashcards i helskärm) samt utskriftsvyn.
   ========================================================================= */

/* ---- Diskret GERS-rad under inledningen ---- */
.ob-gers { font-size: 0.8rem; color: var(--ink-soft); margin: -0.4rem 0 1.8rem; }

/* ---- GERS-chip (A1, A2 …) — används i nivårubriker och kurs-pills ---- */
.ob-chip {
  display: inline-block;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--accent-dk);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.05rem 0.55rem;
  background: var(--bg);
  white-space: nowrap;
}

/* =========================================================================
   "Öva ord" — det primära kortet (byggs av ordbank.js i #ob-tools)
   ========================================================================= */
.ob-build {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg);
  box-shadow: var(--shadow-card);
  padding: 1.5rem 1.6rem 1.4rem;
  margin: 0 0 2.6rem;
}
.tp-body h2.ob-h {     /* slå .tp-body h2-marginalen i web.css */
  font-size: 1.35rem; font-weight: 700; letter-spacing: -0.015em;
  margin: 0 0 1rem; padding: 0; border: none; color: var(--ink);
}

.ob-f { margin: 0 0 1.1rem; }
.ob-flabel {
  display: block; font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft);
  margin-bottom: 0.45rem;
}

/* Pill-formade radioknappar för kursvalet */
.ob-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ob-pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 0.3rem 0.9rem;
  font-size: 0.88rem; cursor: pointer;
  background: var(--surface); color: var(--ink);
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.ob-pill:hover { border-color: var(--accent); color: var(--accent-dk); }
.ob-pill input { accent-color: var(--accent); margin: 0; flex: none; }
.ob-pill:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; }
.ob-pill:has(input:checked) .ob-chip {
  background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55);
}

/* Sökbar dropdown för texterna ("Alla texter" = tomt fält) */
.ob-combo { position: relative; max-width: 26rem; }
.ob-combo-in { font-size: 0.92rem; padding: 0.5rem 0.85rem; background: var(--surface); }
.ob-combo-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); box-shadow: var(--shadow-card);
  max-height: 13rem; overflow-y: auto; padding: 0.25rem;
}
.ob-combo-opt {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: 0.88rem; line-height: 1.4;
  background: none; border: none; border-radius: var(--r-sm);
  padding: 0.38rem 0.6rem; cursor: pointer; color: var(--ink);
}
.ob-combo-opt:hover, .ob-combo-opt:focus-visible { background: var(--bg); color: var(--accent-dk); }
.ob-combo-opt[data-p="-1"] { font-weight: 600; }

/* Starta + antalsrad */
.ob-start { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.1rem; margin: 1.4rem 0 0; }
.ob-btn {
  font: inherit; font-size: 0.85rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--accent-dk);
  padding: 0.45rem 1rem;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ob-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.ob-btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.ob-btn-primary:hover { background: var(--accent-dk); border-color: var(--accent-dk); }
.ob-btn-start { font-size: 1.02rem; padding: 0.75rem 2.4rem; }
.ob-btn-sm { font-size: 0.78rem; padding: 0.3rem 0.85rem; }
.ob-meta { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }

/* Nedladdning — sekundär, hopfälld */
.ob-dl { margin-top: 1.3rem; border-top: 1px solid var(--line); padding-top: 0.85rem; font-size: 0.85rem; }
.ob-dl > summary {
  cursor: pointer; color: var(--accent-dk); width: max-content;
  list-style: none;
}
.ob-dl > summary::-webkit-details-marker { display: none; }
.ob-dl > summary::after { content: " ▾"; font-size: 0.7em; color: var(--ink-soft); }
.ob-dl[open] > summary::after { content: " ▴"; }
.ob-dl > summary:hover { color: var(--accent); }
.ob-dl-extra {
  display: flex; align-items: center; gap: 0.45rem;
  margin: 0.75rem 0 0.6rem; color: var(--ink-soft); cursor: pointer;
}
.ob-dl-extra input { accent-color: var(--accent); margin: 0; }
.ob-dl-btns { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* =========================================================================
   Uppslagsdelen — sök + hopfällbara nivåsektioner
   ========================================================================= */
.tp-body h2.ob-h2 {
  font-size: 1.25rem; font-weight: 700; letter-spacing: -0.015em;
  margin: 0 0 0.2rem; padding: 0; border: none; color: var(--ink);
}
.ob-lookup .search-bar { margin: 0.9rem 0 1.1rem; }

details.ob-level {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg);
  margin: 0 0 0.8rem;
}
details.ob-level > summary {
  list-style: none; cursor: pointer;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--r);
}
details.ob-level > summary::-webkit-details-marker { display: none; }
details.ob-level > summary:hover { background: color-mix(in srgb, var(--accent) 6%, var(--bg)); }
details.ob-level > summary::before {        /* liten pil som vrider sig */
  content: ""; flex: none; width: 0.42rem; height: 0.42rem;
  border-right: 1.5px solid var(--ink-soft); border-bottom: 1.5px solid var(--ink-soft);
  transform: rotate(-45deg); transition: transform .15s ease;
  margin-right: 0.1rem;
}
details.ob-level[open] > summary::before { transform: rotate(45deg); }
.ob-sum-name { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.ob-sum-count { margin-left: auto; font-size: 0.85rem; color: var(--ink-soft); }
details.ob-level .ob-tbwrap { padding: 0 1.1rem 1rem; }
details.ob-level .ob-table { margin-top: 0.25rem; background: transparent; }

/* Överkursorden — inre hopfälld sektion med nedtonad stil */
details.ob-extra {
  margin: 1.1rem 0 0.25rem;
  border: 1px dashed var(--line); border-radius: var(--r-sm);
}
details.ob-extra > summary {
  list-style: none; cursor: pointer;
  font-size: 0.85rem; color: var(--ink-soft);
  padding: 0.55rem 0.9rem;
}
details.ob-extra > summary::-webkit-details-marker { display: none; }
details.ob-extra > summary::after { content: " ▾"; font-size: 0.75em; }
details.ob-extra[open] > summary::after { content: " ▴"; }
details.ob-extra > summary:hover { color: var(--accent-dk); }
details.ob-extra .ob-table { margin: 0; padding: 0; }
details.ob-extra .ob-tbwrap, details.ob-extra table { background: transparent; }
details.ob-extra table { margin: 0 0 0.4rem; }
details.ob-extra td, details.ob-extra th { padding-left: 0.9rem; }
.ob-row-extra td { color: var(--ink-soft); }
.ob-row-extra td:first-child { font-weight: 500; }

/* =========================================================================
   Övningsläget — vändbara flashcards i helskärm (byggs av ordbank.js)
   ========================================================================= */
body.ob-ova-open { overflow: hidden; }
.ob-ova {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg); color: var(--ink);
  display: flex; flex-direction: column; align-items: center;
  padding: 1rem 1.25rem 2rem;
  overflow-y: auto;
}
.ob-ova[hidden] { display: none; }

/* Topprad: räknare · "Visa först" · Stäng */
.ob-ova-top {
  width: 100%; max-width: 34rem;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.8rem;
  font-size: 0.88rem; color: var(--ink-soft);
}
.ob-ova-count { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ob-ova-close { justify-self: end; }
@media (max-width: 30rem) {
  .ob-ova-top { grid-template-columns: 1fr auto; }
  .ob-seg { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}

/* Segmenterad kontroll: Visa först Ord | Förklaring */
.ob-seg { display: flex; align-items: center; gap: 0.5rem; }
.ob-seg-label { font-size: 0.75rem; color: var(--ink-soft); white-space: nowrap; }
.ob-seg-btn {
  font: inherit; font-size: 0.78rem; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  padding: 0.24rem 0.8rem;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ob-seg-btn[data-side="ord"] { border-radius: 999px 0 0 999px; }
.ob-seg-btn[data-side="forklaring"] { border-radius: 0 999px 999px 0; margin-left: -1px; }
.ob-seg-btn:hover { color: var(--accent-dk); border-color: var(--accent); position: relative; }
.ob-seg-btn[aria-pressed="true"] {
  background: var(--accent); border-color: var(--accent); color: #fff;
}

/* Tunn framstegslinje */
.ob-ova-progress {
  width: 100%; max-width: 34rem; height: 4px;
  border-radius: 999px; background: var(--line);
  margin: 0.9rem 0 1.4rem; overflow: hidden;
}
.ob-ova-bar {
  height: 100%; width: 0; border-radius: inherit;
  background: var(--accent);
  transition: width .3s cubic-bezier(.3,.7,.3,1);
}
.ob-ova-note { font-size: 0.82rem; color: var(--ink-soft); margin: 0 0 0.8rem; text-align: center; }

/* Scenen ger perspektiv åt 3D-vändningen */
.ob-stage { width: 100%; max-width: 34rem; perspective: 1400px; }

/* Kortet: yttre elementet glider in/ut, inre elementet vänds i 3D */
.ob-card {
  position: relative; width: 100%;
  height: clamp(14rem, 42vh, 18rem);
  cursor: pointer;
  transition: transform .3s cubic-bezier(.3,.7,.3,1), opacity .3s ease;
}
.ob-card[hidden] { display: none; }
.ob-card-inner {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.25,.8,.3,1.05);
}
.ob-card.ob-flipped .ob-card-inner { transform: rotateY(180deg); }
.ob-card.ob-snap, .ob-card.ob-snap .ob-card-inner { transition: none; }

.ob-face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 0.8rem;
  padding: 2rem 1.75rem;
  transition: background-color .3s ease, border-color .3s ease;
}
.ob-face-back { transform: rotateY(180deg); }

/* Typografi: ordet stort, förklaringen något mindre — på båda sidor */
.ob-face-text {
  font-size: 2.05rem; font-weight: 700; letter-spacing: -0.02em;
  line-height: 1.25; margin: 0; overflow-wrap: anywhere;
}
.ob-face.ob-is-expl .ob-face-text {
  font-size: 1.25rem; font-weight: 500; letter-spacing: -0.005em;
  color: var(--ink); max-width: 28rem;
}
.ob-back-mini { font-size: 0.85rem; color: var(--ink-soft); margin: 0; overflow-wrap: anywhere; }

/* Lucka i förklaringen ("Hon ___ i Stockholm.") — diskret understruken
   lucka med fast bredd i nedtonad accentfärg, i stället för tre streck */
.ob-lucka {
  display: inline-block; width: 2.6em; height: 0.9em;
  vertical-align: baseline;
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 1px;
  margin: 0 0.08em;
}

/* Ledtrådsrad överst på framsidan när förklaringen visas först */
.ob-front-lead {
  position: absolute; top: 1rem; left: 0; right: 0;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft); margin: 0;
}
.ob-front-lead[hidden] { display: none; }
.ob-face-hint {
  position: absolute; bottom: 0.9rem; left: 0; right: 0;
  font-size: 0.72rem; color: var(--ink-soft); margin: 0;
}

/* Bedömt kort glider ut: ✓ åt höger med grön ton, ↻ åt vänster */
.ob-card.ob-leave-yes { transform: translateX(58%) rotate(3deg); opacity: 0; pointer-events: none; }
.ob-card.ob-leave-no  { transform: translateX(-58%) rotate(-3deg); opacity: 0; pointer-events: none; }
.ob-card.ob-leave-yes .ob-face {
  background: var(--quiz-ratt-bg); border-color: var(--quiz-ratt-ln);
}
/* Nästa kort glider in från höger (klassen tas bort direkt → animerar till 0) */
.ob-card.ob-enter { transition: none; transform: translateX(14%); opacity: 0; }

/* Knappar: Vänd före vändningen — Kunde/Övar mer efter */
.ob-ova-btns {
  width: 100%; max-width: 34rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem;
  margin-top: 1.5rem;
}
.ob-ova-btns .ob-btn {           /* stora, touchvänliga knappar */
  font-size: 1.02rem; padding: 0.85rem 1.6rem; min-width: 10rem;
}
.ob-grade.ob-yes {
  background: var(--quiz-ratt-bg); border-color: var(--quiz-ratt-ln);
  color: var(--quiz-ratt); font-weight: 600;
}
.ob-grade.ob-yes:hover { background: var(--quiz-ratt-ln); color: var(--quiz-ratt); }
.ob-grade.ob-no { color: var(--ink); }
.ob-grade.ob-no:hover { background: var(--bg); border-color: var(--ink-soft); color: var(--ink); }

.ob-ova-hint { font-size: 0.75rem; color: var(--ink-soft); margin-top: 1.3rem; }

/* Slutvyn — enkel: Klart! + två knappar */
.ob-done { text-align: center; padding: 2.6rem 1rem; }
.ob-done[hidden] { display: none; }
.ob-done-big { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 0.25rem; }
.ob-done-sub { font-size: 1.05rem; color: var(--ink-soft); margin: 0 0 1.7rem; }
.ob-done-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }
.ob-done-btns .ob-btn { font-size: 1.02rem; padding: 0.8rem 1.5rem; min-width: 10rem; }

@media (max-width: 40rem) {
  .ob-ova-hint { display: none; }          /* tangentbordstips göms på mobil */
  .ob-face-text { font-size: 1.6rem; }
  .ob-face.ob-is-expl .ob-face-text { font-size: 1.1rem; }
}

/* Mindre rörelse: ingen 3D-vändning eller glid — mjuk crossfade i stället */
@media (prefers-reduced-motion: reduce) {
  .ob-card, .ob-card-inner, .ob-ova-bar { transition: none !important; }
  .ob-card-inner { transform-style: flat; }
  .ob-card.ob-flipped .ob-card-inner { transform: none; }
  .ob-face {
    -webkit-backface-visibility: visible; backface-visibility: visible;
    transition: opacity .25s ease;
  }
  .ob-face-back { transform: none; opacity: 0; pointer-events: none; }
  .ob-card.ob-flipped .ob-face-front { opacity: 0; pointer-events: none; }
  .ob-card.ob-flipped .ob-face-back { opacity: 1; pointer-events: auto; }
  .ob-card.ob-leave-yes, .ob-card.ob-leave-no {
    transform: none; opacity: 0; transition: opacity .25s ease !important;
  }
  .ob-card.ob-enter { transform: none; }
}

/* ---- "Skriv ut": ren utskriftsvy av urvalet ----
   ordbank.js fyller #ob-printview och sätter body.ob-print-mode innan
   window.print(); allt annat på sidan göms under utskriften. */
#ob-printview { display: none; }
@media print {
  body.ob-print-mode .text-package,
  body.ob-print-mode .ob-ova { display: none !important; }
  body.ob-print-mode #ob-printview { display: block; }
  #ob-printview h1 { font-size: 1.4rem; margin: 0 0 0.2rem; }
  #ob-printview p { font-size: 0.8rem; color: #333; margin: 0 0 1rem; }
  #ob-printview table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
  #ob-printview th, #ob-printview td {
    text-align: left; padding: 0.35rem 0.5rem;
    border-bottom: 1px solid #ddd; vertical-align: top;
  }
  #ob-printview th {
    font-size: 0.7rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
  }
  #ob-printview tr { break-inside: avoid; }
}