/* EB Garamond — serif (löpande text) */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/eb-garamond-400.woff2) format('woff2'),
       url(/assets/fonts/eb-garamond-400.woff)  format('woff');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/eb-garamond-400i.woff2) format('woff2'),
       url(/assets/fonts/eb-garamond-400i.woff)  format('woff');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/eb-garamond-500.woff2) format('woff2'),
       url(/assets/fonts/eb-garamond-500.woff)  format('woff');
}
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/eb-garamond-600.woff2) format('woff2'),
       url(/assets/fonts/eb-garamond-600.woff)  format('woff');
}

/* Inter — sans-serif (rubriker, nav, knappar) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/inter-400.woff2) format('woff2'),
       url(/assets/fonts/inter-400.woff)  format('woff');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/inter-500.woff2) format('woff2'),
       url(/assets/fonts/inter-500.woff)  format('woff');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/inter-600.woff2) format('woff2'),
       url(/assets/fonts/inter-600.woff)  format('woff');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/inter-700.woff2) format('woff2'),
       url(/assets/fonts/inter-700.woff)  format('woff');
}

:root {
  --bg:           #FAFAF7;
  --bg-soft:      #F2F1EC;
  --surface:      #FFFFFF;
  --ink:          #1F1F1F;
  --ink-soft:     #4A4A4A;
  --ink-muted:    #6B6B6B;
  --rule:         #E3E1DA;
  --accent:       #2A4365;
  --accent-soft:  #486493;
  --mark-blue:    #2A4365;
  --mark-red:     #9B2C2C;
  --serif:        "EB Garamond", "Iowan Old Style", "Charter", Georgia, serif;
  --sans:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius:       4px;
  --measure:      68ch;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Navbaren är sticky — scroll-padding gör att ankar-hopp alltid landar
     strax under den, inte bakom. Mäts frikostigt så att brand med sub-text ryms. */
  scroll-padding-top: 5rem;
  /* Reservera plats för scrollbaren så att layouten inte hoppar några px
     mellan korta sidor (utan scroll) och långa sidor (med scroll). */
  scrollbar-gutter: stable;
}

body {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand, .sidebar-heading, .sidebar-link, .btn {
  font-family: var(--sans);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem); font-weight: 600; line-height: 1.2; margin: 0 0 1.25rem; }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 1.85rem); font-weight: 600; line-height: 1.25; margin: 2.4rem 0 0.9rem; }
h3 { font-size: 1.25rem; font-weight: 600; margin: 1.8rem 0 0.6rem; }
h4 { font-size: 1.075rem; font-weight: 600; margin: 1.4rem 0 0.4rem; }

p  { margin: 0 0 1.1rem; max-width: var(--measure); }
main ul, main ol { max-width: var(--measure); }

a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover, a:focus-visible { color: var(--accent-soft); }

/* -- Skip link -- */
.skip-link {
  position: absolute; left: .5rem; top: .5rem; z-index: 2000;
  background: var(--ink); color: #fff; padding: .45rem .8rem; border-radius: var(--radius);
}

/* -- Navbar -- */
.bg-site-nav { background: var(--surface) !important; }
.navbar .navbar-brand { font-weight: 600; color: var(--ink); }
.navbar .nav-link { color: var(--ink-soft); font-weight: 500; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--accent); }
.navbar .nav-link.active { position: relative; }
.brand-mark {
  width: 44px; height: 44px; flex-shrink: 0; display: inline-block;
  color: var(--accent);
}
.brand-mark-frame { stroke-width: 1.4; }
.brand-mark-flourish { stroke-width: 0.9; opacity: 0.55; }
.brand-mark-letter {
  font-family: var(--serif); font-style: italic; font-weight: 600;
  font-size: 34px; text-anchor: middle; fill: currentColor;
}
.brand-text { line-height: 1.1; }
.brand-title { font-weight: 600; display: block; }
.brand-sub { font-size: .82rem; color: var(--ink-muted); display: block; font-weight: 400; }

/* -- Navbar-sök -- */
.navbar-search {
  position: relative;
  flex: 1 1 360px;
  max-width: 420px;
  min-width: 220px;
  margin-left: 1.25rem;
  margin-right: .5rem;
}
.navbar-search-form {
  position: relative;
  display: flex;
  align-items: center;
}
.navbar-search-icon {
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-muted);
  pointer-events: none;
  display: inline-flex;
}
.navbar-search-input {
  width: 100%;
  font-family: var(--sans);
  font-size: .92rem;
  line-height: 1.4;
  padding: .42rem 2.2rem .42rem 2.1rem;
  background: var(--bg-soft);
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 999px;
  outline: none;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.navbar-search-input::placeholder { color: var(--ink-muted); }
.navbar-search-input:hover { background: #ECEAE2; }
.navbar-search-input:focus {
  background: var(--surface);
  border-color: var(--accent-soft);
  box-shadow: 0 0 0 3px rgba(72, 100, 147, 0.15);
}
.navbar-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.navbar-search-kbd {
  position: absolute;
  right: .55rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--sans);
  font-size: .7rem;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1px 6px;
  line-height: 1.3;
  pointer-events: none;
}
.navbar-search.is-open .navbar-search-kbd,
.navbar-search-input:focus ~ .navbar-search-kbd { display: none; }

.navbar-search-dropdown {
  position: absolute;
  top: calc(100% + .4rem);
  left: 0;
  right: 0;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(31, 31, 31, .12), 0 2px 6px rgba(31, 31, 31, .06);
  padding: .35rem 0;
  z-index: 1080;
}
.navbar-search-group-label {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: .55rem .9rem .25rem;
}
.navbar-search-group-label:first-child { padding-top: .25rem; }
.navbar-search-result {
  display: block;
  padding: .5rem .9rem;
  text-decoration: none;
  color: var(--ink);
  border-left: 2px solid transparent;
  line-height: 1.4;
}
.navbar-search-result:hover,
.navbar-search-result:focus,
.navbar-search-result.is-active {
  background: var(--bg-soft);
  border-left-color: var(--accent);
  color: var(--ink);
  text-decoration: none;
}
.navbar-search-result-title {
  display: block;
  font-family: var(--sans);
  font-weight: 600;
  font-size: .94rem;
  color: var(--ink);
}
.navbar-search-result-snippet {
  display: block;
  font-size: .82rem;
  color: var(--ink-muted);
  margin-top: .15rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.navbar-search-dropdown mark {
  background: rgba(155, 44, 44, .12);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}
.navbar-search-empty {
  padding: .9rem 1rem;
  font-size: .9rem;
  color: var(--ink-muted);
  font-family: var(--sans);
}
.navbar-search-confirm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  padding: .55rem .9rem;
  background: var(--bg-soft);
  border-left: 2px solid var(--accent);
  font-family: var(--sans);
  font-size: .88rem;
  color: var(--ink);
}
.navbar-search-confirm-q {
  flex: 1 1 100%;
  margin-bottom: .15rem;
}
.navbar-search-confirm-addr {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: .82rem;
  background: rgba(0, 0, 0, .04);
  padding: 0 .3rem;
  border-radius: 3px;
}
.navbar-search-confirm-btn {
  appearance: none;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font: inherit;
  padding: .2rem .7rem;
  border-radius: 3px;
  cursor: pointer;
  white-space: nowrap;
}
.navbar-search-confirm-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}
.navbar-search-confirm-btn:disabled {
  opacity: .7;
  cursor: default;
}
.navbar-search-confirm-btn--ghost {
  border-color: var(--ink-muted);
  color: var(--ink-muted);
}
.navbar-search-confirm-btn--ghost:hover {
  background: var(--ink-muted);
  color: #fff;
}

@media (max-width: 991.98px) {
  .navbar-search {
    order: 3;
    flex: 1 1 100%;
    max-width: none;
    margin: .6rem 0 0;
  }
  .navbar-search-kbd { display: none; }
}

/* -- Navbar-favoriter (stjärn-dropdown) -- */
.navbar-favoriter > .nav-link.dropdown-toggle {
  position: relative;
  background: transparent;
  border: 0;
  padding-left: .55rem;
  padding-right: .85rem;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  color: var(--ink);
}
.navbar-favoriter > .nav-link.dropdown-toggle::after {
  display: none;
}
.navbar-favoriter > .nav-link.dropdown-toggle:hover .navbar-favoriter-icon,
.navbar-favoriter.show > .nav-link.dropdown-toggle .navbar-favoriter-icon {
  color: #b08900;
}
.navbar-favoriter-icon {
  font-size: 1.15rem;
  line-height: 1;
  color: var(--ink-muted);
  transition: color .12s;
}
.navbar-favoriter-badge {
  font-size: .68rem;
  font-weight: 600;
  padding: .15em .45em;
}
.navbar-favoriter-menu {
  min-width: 280px;
  max-width: 360px;
  max-height: min(70vh, 520px);
  overflow-y: auto;
  padding: .5rem 0;
}
.navbar-favoriter-item {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: .35rem 1rem;
  white-space: normal;
}
.navbar-favoriter-scope {
  flex: 0 0 auto;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  min-width: 3.5em;
}
.navbar-favoriter-title {
  flex: 1 1 auto;
  font-size: .88rem;
  line-height: 1.3;
}

/* -- Sidebar -- */
.site-main-wrap { padding: 0; flex: 1 0 auto; }
.site-sidebar {
  background: transparent;
  padding: 2rem 1rem 2rem 0;
}
.site-sidebar-sticky {
  position: sticky; top: 5.5rem;
  border-right: 1px solid var(--rule);
  padding-right: 1.25rem;
}
.sidebar-heading {
  font-size: .7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin: 0 0 .75rem;
}
.sidebar-list {
  list-style: none; padding: 0; margin: 0;
}
.sidebar-list li { margin: 0; }
.sidebar-link {
  display: block;
  padding: .45rem .8rem;
  margin: 2px 0;
  border-radius: var(--radius);
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: background .15s, color .15s;
}
.sidebar-link:hover { background: var(--bg-soft); color: var(--ink); }
.sidebar-link.is-active {
  background: var(--bg-soft);
  color: var(--accent);
  border-left-color: var(--accent);
}

/* Offcanvas */
.offcanvas { background: var(--bg); }
.offcanvas-header { border-bottom: 1px solid var(--rule); }

/* Primärnav (Stilistik / Grammatik) — visas bara i mobilens offcanvas.
   Lite kraftigare typografi så att huvudnivån syns ovanför sektionsmenyn. */
.sidebar-list--primary { margin-bottom: .25rem; }
.sidebar-list--primary .sidebar-link {
  font-size: 1.05rem;
  font-weight: 600;
  padding: .65rem .8rem;
}
.sidebar-divider {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: .75rem 0;
  opacity: 1;
}

/* -- Main -- */
.site-main-inner {
  padding: 2.25rem 1.25rem 3rem;
  max-width: 900px;
}
@media (min-width: 992px) {
  .site-main-inner { padding: 2.5rem 2.5rem 4rem; }
}

/* No-sidebar mode (auth-sidor under /konto/): centrera inner-blocket */
.site-main-no-sidebar .site-main-inner {
  margin-left: auto;
  margin-right: auto;
}

.lead {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.section-eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  color: var(--ink-muted);
  margin-bottom: .5rem;
  font-weight: 600;
}

/* Color-coded content markings (from original) */
.mark-bla {
  color: #1E3A8A;
  font-weight: 600;
  background: rgba(30, 58, 138, 0.08);
  padding: 0 .15em;
  border-radius: 2px;
}
.mark-rod {
  color: var(--mark-red);
  font-weight: 600;
  background: rgba(155, 44, 44, 0.08);
  padding: 0 .15em;
  border-radius: 2px;
}

/* Citat / exempel */
.exempel {
  position: relative;
  padding: 1rem 1.1rem 1rem 1.25rem;
  margin: 0 0 1.25rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}
.exempel p:last-child { margin-bottom: 0; }
.exempel-kalla {
  display: block;
  margin-top: .5rem;
  font-family: var(--sans);
  font-size: .83rem;
  color: var(--ink-muted);
  font-style: italic;
}

/* Definition box */
.definition {
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1rem 1.15rem;
  margin: 0 0 1.5rem;
  max-width: var(--measure);
}
.definition h3 { margin-top: 0; }
.definition p { margin: 0 0 .7rem; }
.definition p:last-child { margin-bottom: 0; }
.definition-extra {
  color: var(--ink-soft);
  font-size: .96rem;
}
/* Sektions-övergripande färgförklaring (en gång överst på sidan) */
.section-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem .8rem;
  padding: .7rem 1rem;
  margin: 0 0 2rem;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  max-width: var(--measure);
  font-family: var(--sans);
  font-size: .88rem;
  color: var(--ink-soft);
}
.section-legend-label {
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .7rem;
  font-weight: 700;
  color: var(--ink-muted);
}
.section-legend-text { line-height: 1.5; }

/* Diskret färgkods-legend som ligger precis ovanför exemplen */
.exempel-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  margin: 1rem 0 .75rem;
  background: transparent;
  border-left: 2px solid var(--rule);
  font-family: var(--sans);
  font-size: .83rem;
  color: var(--ink-muted);
  max-width: var(--measure);
}
.exempel-legend-label {
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .14em;
}

/* Subrubrik mellan "Exempel i definitionen" och "Fler exempel" */
.stildrag-subhead {
  font-family: var(--sans);
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .14em;
  color: var(--ink-muted);
  font-weight: 600;
  margin: 1.4rem 0 .6rem;
}

/* Stildrag-grupp (def + exempel) */
.stildrag {
  padding-top: 1.5rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--rule);
}
.stildrag:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.stildrag-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem;
  margin-bottom: .75rem;
}
.stildrag-head h2 { margin: 0; }
.stildrag-count {
  font-family: var(--sans);
  font-size: .78rem;
  color: var(--ink-muted);
}

/* "Öva"-knapp bredvid stildragsrubrik */
.stildrag-ova {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .65rem;
  font-family: var(--sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--accent);
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 9999px;
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.stildrag-ova:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.stildrag-ova::before {
  content: "→";
  font-size: .9rem;
}
.stildrag-ova-n {
  background: rgba(0,0,0,.08);
  padding: 0 .4em;
  border-radius: 9999px;
  font-size: .72rem;
  line-height: 1.2;
}
.stildrag-ova:hover .stildrag-ova-n {
  background: rgba(255,255,255,.22);
}

/* Table of contents */
.toc {
  padding: 1rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  margin: 0 0 2rem;
  max-width: var(--measure);
}
.toc h2 { margin-top: 0; font-size: 1rem; }
.toc ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 1.5rem; }
.toc li { padding: .15rem 0; break-inside: avoid; }
.toc a { text-decoration: none; }
@media (max-width: 575px) { .toc ul { columns: 1; } }

/* Cards (for essays/authors list) */
.card-entry {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  transition: border-color .15s, transform .15s;
  height: 100%;
  display: block;
  text-decoration: none;
  color: inherit;
}
.card-entry:hover { border-color: var(--accent); color: var(--ink); }
.card-entry h3 { margin: 0 0 .25rem; font-size: 1.1rem; }
.card-entry .meta { font-family: var(--sans); font-size: .85rem; color: var(--ink-muted); }
.card-entry .excerpt { margin-top: .6rem; font-size: .95rem; color: var(--ink-soft); }

/* Enkel bildgalleri-grid med PhotoSwipe-lightbox */
.bildgalleri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: .75rem;
  margin: 1.25rem 0 2rem;
}
.bildgalleri-item {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  text-decoration: none;
}
.bildgalleri-item:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
.bildgalleri-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.bildgalleri-item:hover img { transform: scale(1.04); }
.bildgalleri-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .4rem .6rem;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
  color: #fff;
  font-family: var(--sans);
  font-size: .78rem;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .2s, transform .2s;
}
.bildgalleri-item:hover .bildgalleri-caption {
  opacity: 1;
  transform: translateY(0);
}

/* Gamla galleri-sal (behålls i fall nån annan sida använder) */
.galleri-sal {
  margin: 3rem -1.25rem 2rem;
  padding: 3rem 1.25rem 2rem;
  background:
    radial-gradient(ellipse at top, #2a2a2a 0%, #141414 50%, #0a0a0a 100%);
  color: #F4F0E6;
  border-top: 1px solid #1f1f1f;
  border-bottom: 1px solid #1f1f1f;
  border-radius: var(--radius);
}
@media (min-width: 992px) {
  .galleri-sal { margin: 3rem -2.5rem 2rem; padding: 3.5rem 2.5rem 2.5rem; }
}
.galleri-sal-inner { max-width: 1100px; margin: 0 auto; }

.galleri-head { text-align: center; margin-bottom: 2rem; }
.galleri-eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .24em;
  font-size: .7rem;
  color: #C8A96A;
  margin: 0 0 .5rem;
  font-weight: 600;
}
.galleri-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  color: #F4F0E6;
  margin: 0 0 .5rem;
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem);
}
.galleri-sub {
  font-family: var(--serif);
  font-size: 1rem;
  color: rgba(244,240,230,.72);
  max-width: 52ch;
  margin: 0 auto;
}

.galleri-carousel {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 auto 1.5rem;
}
.galleri-carousel .carousel-inner { min-height: 520px; }
.galleri-carousel .carousel-item {
  transition: transform 0.9s ease-in-out, opacity 0.9s ease-in-out;
}
.galleri-carousel .carousel-fade .carousel-item { transition: opacity 0.9s ease-in-out; }

.carousel-zoom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: none; border: 0; padding: 0;
  cursor: zoom-in;
}

.artwork-frame {
  margin: 0;
  background: #F4F0E6;
  padding: 24px;
  box-shadow:
    0 4px 8px rgba(0,0,0,0.25),
    0 24px 60px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(0,0,0,0.08);
  border-radius: 2px;
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  transition: transform .4s ease, box-shadow .4s ease;
}
.artwork-frame::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(200,169,106,0.25);
  border-radius: 2px;
  pointer-events: none;
}
.carousel-zoom:hover .artwork-frame {
  transform: translateY(-2px);
  box-shadow:
    0 6px 14px rgba(0,0,0,0.3),
    0 32px 80px rgba(0,0,0,0.6),
    inset 0 0 0 1px rgba(0,0,0,0.08);
}
.artwork-matte {
  background: #FAF7EF;
  padding: 14px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.artwork-matte img {
  display: block;
  max-width: 100%;
  max-height: 440px;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.artwork-plaque {
  margin-top: 18px;
  padding: .75rem 1rem;
  background: linear-gradient(180deg, #1a1a1a 0%, #0f0f0f 100%);
  color: #F4F0E6;
  border: 1px solid #C8A96A;
  border-radius: 2px;
  text-align: center;
  font-family: var(--sans);
  max-width: 340px;
  margin-left: auto;
  margin-right: auto;
}
.plaque-name {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: #F4F0E6;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.plaque-meta {
  display: block;
  margin-top: .1rem;
  font-size: .72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C8A96A;
}

.galleri-carousel .carousel-control-prev,
.galleri-carousel .carousel-control-next {
  width: 6%;
  opacity: 0.55;
  transition: opacity .2s;
}
.galleri-carousel .carousel-control-prev:hover,
.galleri-carousel .carousel-control-next:hover { opacity: 1; }
.galleri-carousel .carousel-control-icon {
  display: inline-flex; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(200,169,106,.35);
  border-radius: 50%;
  color: #F4F0E6;
  font-size: 1.4rem;
  line-height: 1;
  backdrop-filter: blur(4px);
}
.galleri-carousel .carousel-control-prev-icon,
.galleri-carousel .carousel-control-next-icon { display: none; }

.carousel-counter {
  position: absolute; top: 1rem; right: 1rem;
  font-family: var(--sans);
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #C8A96A;
  background: rgba(0,0,0,.45);
  padding: .3rem .7rem;
  border: 1px solid rgba(200,169,106,.3);
  border-radius: 9999px;
  backdrop-filter: blur(4px);
}

.galleri-thumbs {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: .5rem .25rem 1rem;
  scrollbar-width: thin;
  scrollbar-color: #C8A96A transparent;
  justify-content: center;
  flex-wrap: wrap;
}
.galleri-thumbs .thumb {
  position: relative;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
  width: 72px; height: 72px;
  border-radius: 2px;
  overflow: hidden;
  transition: opacity .2s, transform .2s;
  opacity: 0.55;
}
.galleri-thumbs .thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s;
}
.galleri-thumbs .thumb:hover { opacity: 1; transform: translateY(-2px); }
.galleri-thumbs .thumb.is-active {
  opacity: 1;
  outline: 1px solid #C8A96A;
  outline-offset: 2px;
}
.galleri-thumbs .thumb-label {
  position: absolute; inset: auto 0 0 0;
  font-family: var(--sans);
  font-size: .65rem;
  letter-spacing: .04em;
  text-align: center;
  padding: .2rem;
  background: linear-gradient(to top, rgba(0,0,0,.85), transparent);
  color: #F4F0E6;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.galleri-thumbs .thumb:hover .thumb-label,
.galleri-thumbs .thumb.is-active .thumb-label { opacity: 1; }

@media (max-width: 767px) {
  .artwork-frame { padding: 14px; }
  .artwork-matte { padding: 8px; }
  .artwork-matte img { max-height: 340px; }
  .galleri-carousel .carousel-inner { min-height: 420px; }
}

/* Gallery (grid, kvar som fallback) */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
.gallery-item {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  display: block;
  transition: border-color .15s, transform .15s;
}
.gallery-item:hover { border-color: var(--accent); }
.gallery-item img { width: 100%; height: 180px; object-fit: cover; display: block; }
.gallery-item figcaption {
  padding: .5rem .7rem;
  font-family: var(--sans);
  font-size: .83rem;
  color: var(--ink-muted);
}

.modal-body img { width: 100%; height: auto; }

/* Footer */
.site-footer {
  background: var(--bg-soft);
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
}
.site-footer a { color: var(--ink-soft); text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }

/* Arbetsgång steps */
.step-list { list-style: none; padding: 0; counter-reset: step; }
.step-list > li {
  counter-increment: step;
  padding: 1.25rem 0 1.25rem 3.5rem;
  position: relative;
  border-top: 1px solid var(--rule);
}
.step-list > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 1.1rem;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 600;
}
.step-list > li:first-child { border-top: 0; padding-top: 0; }
.step-list > li:first-child::before { top: -.2rem; }
.step-list h2 { margin-top: 0; }
.step-list .step-links {
  font-family: var(--sans);
  font-size: .88rem;
  margin-top: .9rem;
  color: var(--ink-muted);
  max-width: none;
}
.step-list .step-links-label {
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--ink-muted);
  margin-right: .4rem;
}
.step-list .step-links a { margin-right: 1rem; }

.toc ol { list-style: decimal; padding-left: 1.4rem; margin: 0; }
.toc ol li { padding: .2rem 0; break-inside: avoid; }
.toc-summary { color: var(--ink-muted); font-size: .92rem; }

/* Exercise trigger */
.ovning-item {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rule);
}
.ovning-item p { margin: 0; max-width: none; }
.ovning-trigger {
  background: none; border: 0; padding: 0; margin: 0;
  color: var(--mark-blue);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  cursor: pointer;
  font: inherit;
  display: inline;
  text-align: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}
.ovning-trigger:hover { color: var(--accent-soft); }
.ovning-trigger[aria-expanded="true"] { color: var(--mark-red); }

.ovning-facit {
  margin-top: .8rem;
  padding: .8rem 1rem;
  background: var(--bg-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: .93rem;
  animation: ovning-facit-in .2s ease-out;
}
.ovning-facit strong { color: var(--accent); }
.ovning-facit p { margin-bottom: 0; max-width: none; }
@keyframes ovning-facit-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Tydligare aktivt tillstånd på trigger */
.ovning-trigger {
  transition: color .15s, background .15s;
}
.ovning-trigger:hover { background: rgba(42, 67, 101, .06); border-radius: 2px; }

.ovning-popover-wrap {
  position: relative;
  display: inline;
}
.ovning-facit-inline {
  position: absolute;
  top: calc(100% + .4rem);
  left: 0;
  z-index: 20;
  width: max-content;
  max-width: min(320px, calc(100vw - 2rem));
  animation: ovning-facit-in .15s ease-out;
}
.ovning-facit-inline[hidden] { display: none; }
.ovning-facit-inline.flip-right { left: auto; right: 0; }
.ovning-facit-inline::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 12px;
  width: 9px;
  height: 9px;
  background: var(--bg-soft);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
  transform: rotate(45deg);
}
.ovning-facit-inline.flip-right::before { left: auto; right: 12px; }
.ovning-facit-chip {
  display: block;
  padding: .55rem .75rem;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
  font-family: var(--sans);
  font-size: .85rem;
  line-height: 1.35;
  color: var(--accent);
  white-space: normal;
}
.ovning-facit-chip .muted { color: var(--ink-muted); font-weight: 400; }
.ovning-facit-chip .def {
  display: block;
  margin-top: .3rem;
  padding-top: .3rem;
  border-top: 1px solid var(--rule);
  font-weight: 400;
  color: var(--ink-soft);
  white-space: normal;
  font-size: .8rem;
  font-style: italic;
}

/* Grammatik: kurerad flödestext */
.grammatik-content { max-width: 880px; }
.gh-intro { margin-bottom: 1.5rem; }
.gh-intro .lead { margin-bottom: 0; }
.gh-intro .gh-note { margin-top: .4rem; }
@media (min-width: 768px) {
  .gh-intro--with-note {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 1.5rem;
    align-items: start;
  }
  .gh-intro--with-note .gh-note { margin-top: 0; }
}
.gh-note-dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .15rem .6rem;
}
.gh-note-dl dt {
  font-weight: 600;
  margin: 0;
}
.gh-note-dl dd { margin: 0; }
.gh-section { margin-bottom: 1.4rem; }
.gh-section + .gh-section { margin-top: .3rem; }
.gh-section-heading {
  margin-top: 1.6rem;
  margin-bottom: .7rem;
}
.gh-section-heading:first-child { margin-top: 0; }
h2.gh-section-heading { margin-top: 2.2rem; }
h3.gh-section-heading { margin-top: 1.4rem; }
.gh-section-main > :last-child { margin-bottom: 0; }
.gh-section-side { display: contents; }
@media (min-width: 768px) {
  .gh-section--with-notes .gh-section-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 1.5rem;
    align-items: start;
  }
  .gh-section--with-notes .gh-section-side {
    display: flex;
    flex-direction: column;
    gap: .6rem;
  }
}
.gh-hl {
  color: #B91C1C;
  font-weight: 600;
  background: linear-gradient(transparent 60%, rgba(185, 28, 28, .1) 60%);
  padding: 0 .1em;
}
.gh-list {
  list-style: disc;
  padding-left: 1.4rem;
  margin: .4rem 0 1rem;
  max-width: var(--measure);
}
.gh-list li { padding: .12rem 0; }
.gh-dl {
  margin: .4rem 0 1.2rem;
  display: block;
}
.gh-dl-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1rem;
  padding: .2rem 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}
@media (min-width: 640px) {
  .gh-dl-row { grid-template-columns: minmax(220px, 34%) 1fr; }
}
.gh-dl-row dt {
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.gh-dl-row dd { margin: 0; color: var(--ink-soft); }
.gh-table-wrap { overflow-x: auto; margin: .5rem 0 1.2rem; page-break-inside: avoid; }
.gh-table {
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: .95rem;
}
.gh-table th,
.gh-table td {
  text-align: left;
  padding: .3rem 1.2rem .3rem 0;
  vertical-align: top;
}
.gh-table th {
  color: var(--ink-muted);
  font-weight: 600;
  padding-bottom: .5rem;
}
.gh-table thead tr {
  border-bottom: 1px solid var(--rule);
}
.gh-table--prose { font-family: var(--serif); font-size: 1rem; }
.gh-table--prose th { font-family: var(--sans); }
.gh-note {
  margin: .3rem 0 .7rem;
  padding: .65rem .85rem;
  background: #FFFBEA;
  border: 1px solid #E8D99F;
  border-left: 3px solid #D4A547;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: .85rem;
  line-height: 1.5;
  color: #463A1E;
  page-break-inside: avoid;
}
.gh-note p { margin: 0; max-width: none; }
.gh-note p + p { margin-top: .35rem; }
.gh-note-title {
  font-weight: 700;
  text-transform: uppercase;
  font-size: .68rem;
  letter-spacing: .14em;
  color: #9A7A2A;
  margin-bottom: .25rem !important;
}
.gh-note .gh-hl { background: rgba(185, 28, 28, .12); }
.gh-example {
  margin: .3rem 0 1rem;
  padding: .5rem .8rem;
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 2px;
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--ink-soft);
}

/* Grammatik-quiz: modern kortbaserad engine */
.qz-container {
  max-width: 640px;
  margin: 1.5rem 0;
}
.qz-progress {
  height: 4px;
  background: var(--bg-soft);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: .5rem;
}
.qz-progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), #4A7BB3);
  transition: width .3s ease;
}
.qz-meta {
  display: flex; justify-content: space-between;
  font-family: var(--sans);
  font-size: .8rem;
  color: var(--ink-muted);
  margin-bottom: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.qz-score { font-weight: 600; color: var(--accent); }

.qz-stage { min-height: 360px; }

.qz-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 2rem 1.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
  animation: qz-card-in .3s ease;
}
@keyframes qz-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.qz-sats {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.55;
  text-align: center;
  padding: 1.25rem 0;
  margin: 0 0 1.25rem;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
}
.qz-mark {
  background: rgba(200, 169, 106, .35);
  padding: 0 .2em;
  border-radius: 2px;
  color: inherit;
  font-weight: 500;
}
.qz-mark--red {
  background: transparent;
  color: #c8102e;
  padding: 0;
  font-weight: 600;
}

.qz-word {
  background: none;
  border: 1px dashed transparent;
  padding: .1em .15em;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 3px;
  transition: background .15s, border-color .15s, transform .1s;
}
.qz-word:hover {
  background: var(--bg-soft);
  border-color: var(--accent);
}
.qz-word.is-ok {
  background: #D7F0DC;
  border-color: #76B98A;
  color: #1F6B34;
}
.qz-word.is-bad {
  background: #FADADA;
  border-color: #E09A9A;
  animation: quiz-shake .3s linear;
}

.qz-prompt {
  font-family: var(--sans);
  font-size: 1rem;
  text-align: center;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
}

.qz-options {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem;
  margin: 0 0 1rem;
}
.qz-option {
  font-family: var(--sans);
  font-size: .95rem;
  padding: .5rem 1rem;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 9999px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s, color .15s;
  color: var(--ink);
}
.qz-option:hover {
  background: var(--surface);
  border-color: var(--accent);
}
.qz-option.is-selected {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.qz-option:active { transform: scale(0.97); }

.qz-text-wrap {
  display: flex; gap: .5rem; max-width: 440px; margin: 0 auto;
}
.qz-text-input { font-family: var(--sans); }

.qz-submit-wrap { text-align: center; margin-top: .5rem; }

.qz-feedback {
  margin-top: 1rem;
  padding: .8rem 1rem;
  border-radius: 6px;
  font-family: var(--sans);
  font-size: .95rem;
  text-align: center;
  animation: qz-card-in .25s ease;
}
.qz-feedback.is-ok {
  background: #E7F6EB;
  border: 1px solid #A8D4B4;
  color: #1F6B34;
}
.qz-feedback.is-bad {
  background: #FCE7E7;
  border: 1px solid #E5B8B8;
  color: #842029;
}

.qz-summary { text-align: center; }
.qz-summary h2 { margin-top: 0; font-size: 1.5rem; }
.qz-big-score {
  font-family: var(--sans);
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent);
  margin: 1rem 0;
  line-height: 1;
}
.qz-big-score .pct {
  display: block;
  font-size: 1rem;
  color: var(--ink-muted);
  font-weight: 500;
  letter-spacing: .14em;
  margin-top: .5rem;
  text-transform: uppercase;
}
.qz-summary-actions {
  display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap;
  margin-top: 1.5rem;
}

/* Grammatik-quiz: tabell-layout (alla meningar på en sida) */
.qz-tabell {
  margin: 1.5rem 0;
}
.qz-tabell .qz-meta {
  align-items: center;
  margin-bottom: .75rem;
}
.qz-tabell .qz-score {
  font-family: var(--sans);
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-muted);
}
.qz-reset {
  font-family: var(--sans);
  font-size: .82rem;
  padding: .35rem .75rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--ink-soft);
}
.qz-reset:hover { background: var(--bg-soft); }

.qz-tabell-section + .qz-tabell-section {
  margin-top: 2rem;
}
.qz-tabell-section__title {
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 .25rem;
  color: var(--ink);
}
.qz-tabell-section__ingress {
  font-family: var(--sans);
  font-size: .92rem;
  color: var(--ink-soft);
  margin: 0 0 .75rem;
}

.qz-tabell-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--sans);
  font-size: .9rem;
  background: var(--surface);
  border: 1px solid var(--rule);
}
.qz-tabell-grid thead th {
  position: sticky;
  top: 4rem;
  z-index: 2;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: .82rem;
  text-align: left;
  padding: .5rem .6rem;
  border-bottom: 2px solid var(--rule);
  vertical-align: bottom;
  line-height: 1.2;
}
.qz-tabell-grid thead th small {
  display: block;
  font-weight: 400;
  font-size: .72rem;
  opacity: .85;
  margin-top: .15rem;
  letter-spacing: .01em;
}
.qz-tabell-grid td.qz-td-na {
  color: var(--ink-muted);
  text-align: center;
  font-style: italic;
}
.qz-tabell-grid td.qz-td-given input[type="text"] {
  color: var(--ink-muted);
  cursor: default;
}
.qz-tabell-grid td.qz-td-given input[type="text"]:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--rule);
}
.qz-tabell-grid th.qz-th-sats { width: 36%; }
.qz-tabell-grid th.qz-th-svar { width: 16%; }
.qz-tabell-grid tbody tr:hover,
.qz-tabell-grid tbody tr:focus-within { background: rgba(74, 123, 179, 0.15); }
.qz-tabell-grid td {
  padding: .35rem .6rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.qz-tabell-grid td.qz-td-sats {
  color: var(--ink);
  font-family: var(--serif, var(--sans));
  line-height: 1.9;
  padding-top: .45rem;
  padding-bottom: .45rem;
}
.qz-tabell-grid td.qz-td-svar {
  padding: .2rem .35rem;
  position: relative;
}
.qz-tabell-grid input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  padding: .35rem .5rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: transparent;
  font: inherit;
  color: var(--ink);
}
.qz-tabell-grid input[type="text"]:focus,
.qz-tabell-grid select.qz-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(74, 123, 179, 0.2);
}
.qz-tabell-grid select.qz-select {
  width: 100%;
  box-sizing: border-box;
  padding: .35rem .5rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: transparent;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.qz-tabell-grid .qz-pick-display {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: .35rem .5rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: transparent;
  font: inherit;
  color: var(--ink-muted);
  min-height: calc(1em + .7rem + 2px);
}
.qz-tabell-grid td.qz-td-svar.is-ok .qz-pick-display {
  background: #E7F6EB;
  border-color: #1F6B34;
  color: #1F6B34;
  font-weight: 600;
  padding-right: 2rem;
}
.qz-tabell-grid td.qz-td-svar.is-ok input,
.qz-tabell-grid td.qz-td-svar.is-ok select.qz-select {
  background: #E7F6EB;
  border-color: #1F6B34;
  color: #1F6B34;
  font-weight: 600;
  padding-right: 2rem;
  cursor: default;
  opacity: 1;
}
.qz-tabell-grid td.qz-td-svar.is-ok::after {
  content: 'R';
  position: absolute;
  top: 50%;
  right: .65rem;
  transform: translateY(-50%);
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: #1F6B34;
  color: #fff;
  font-weight: 700;
  font-size: .78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

@media (max-width: 720px) {
  .qz-tabell-grid {
    display: block;
    table-layout: auto;
    border: none;
    background: transparent;
  }
  .qz-tabell-grid thead { display: none; }
  .qz-tabell-grid tbody { display: block; }
  .qz-tabell-grid tbody tr,
  .qz-tabell-grid tbody tr:nth-child(even) {
    display: block;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    margin-bottom: .75rem;
    padding: .75rem 1rem;
  }
  .qz-tabell-grid tbody tr:hover { background: var(--surface); }
  .qz-tabell-grid td {
    display: block;
    border-bottom: none;
    padding: .25rem 0;
  }
  .qz-tabell-grid td.qz-td-sats {
    font-weight: 600;
    font-size: 1rem;
    border-bottom: 1px solid var(--rule);
    padding-bottom: .5rem;
    margin-bottom: .5rem;
  }
  .qz-tabell-grid td.qz-td-svar {
    display: grid;
    grid-template-columns: minmax(7.5rem, 40%) 1fr;
    gap: .5rem;
    align-items: center;
    padding: .3rem 0;
  }
  .qz-tabell-grid td.qz-td-svar::before {
    content: attr(data-label);
    font-size: .82rem;
    color: var(--ink-muted);
    font-weight: 500;
  }
  .qz-tabell-grid td.qz-td-svar.is-ok::after {
    right: .65rem;
  }
}

.qz-fotnot {
  margin: 1rem 0 0;
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--ink-muted);
  font-style: italic;
  text-align: right;
}

/* ----------------------------------------------------------------------------
   1A 'tema-tempus': gula textfält + två röda översiktspaneler under tabellen.
   ---------------------------------------------------------------------------- */
.qz-tabell-grid.qz-tabell-tema-tempus td.qz-td-yellow input[type="text"] {
  background: #FFF8B8;
  border-color: #C9B100;
}
.qz-tabell-grid.qz-tabell-tema-tempus td.qz-td-yellow input[type="text"]:focus {
  background: #FFFCDB;
  border-color: #8A7A00;
}
.qz-tabell-grid.qz-tabell-tema-tempus td.qz-td-pad {
  background: transparent;
}
.qz-tabell-grid.qz-tabell-tema-tempus td.qz-td-pad::after { content: none; }

.qz-tema-panels {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.25rem;
  margin: 1.25rem 0 .5rem;
}
.qz-panel {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: .75rem .9rem 1rem;
  background: var(--surface);
}
.qz-panel__title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: .9rem;
  color: var(--ink);
  margin-bottom: .55rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--rule);
}
.qz-panel__grid {
  display: grid;
  gap: .35rem;
}
.qz-panel__cell {
  background: #F7C3D4;
  border-radius: 4px;
  min-height: 1.7rem;
  padding: .25rem .55rem;
  font-family: var(--sans);
  font-size: .9rem;
  color: #6E1F38;
  display: flex;
  align-items: center;
  transition: background .25s, color .25s;
}
.qz-panel__cell.qz-panel__cell--filled {
  background: #FBE3EB;
  color: #1F6B34;
  font-weight: 600;
}
@media (max-width: 720px) {
  .qz-tema-panels { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------------------
   2B 'tempus-pick': röda klickbara verbformer + popup med tempus-alternativ.
   ---------------------------------------------------------------------------- */
.qz-tabell-grid.qz-tabell-tempus-pick td.qz-td-sats--tempus {
  line-height: 1.85;
  font-size: 1rem;
}
.qz-tempus-target {
  appearance: none;
  background: #FBE3EB;
  border: 1px dashed #C53D5C;
  color: #B82547;
  font: inherit;
  font-weight: 600;
  padding: .1rem .45rem;
  margin: 0 .1rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.qz-tempus-target:hover { background: #F7C3D4; }
.qz-tempus-target.is-ok {
  background: #E7F6EB;
  border: 1px solid #1F6B34;
  border-style: solid;
  color: #1F6B34;
  cursor: default;
}
.qz-tempus-target.is-wrong {
  background: #FBE0DA;
  border-color: #B73A1F;
  color: #B73A1F;
}
.qz-tabell-grid td.qz-td-tempus-result {
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--ink-muted);
  text-align: center;
  white-space: nowrap;
}
.qz-tabell-grid td.qz-td-tempus-result.is-ok {
  color: #1F6B34;
  font-weight: 600;
}

.qz-tempus-popup {
  position: absolute;
  display: none;
  z-index: 1000;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: 0 6px 24px rgba(0,0,0,0.18);
  padding: .35rem;
  min-width: 11rem;
  font-family: var(--sans);
}
.qz-tempus-popup.is-open { display: flex; flex-direction: column; gap: .15rem; }
.qz-tempus-popup__option {
  appearance: none;
  background: transparent;
  border: 0;
  padding: .4rem .7rem;
  text-align: left;
  font: inherit;
  font-size: .9rem;
  color: var(--ink);
  cursor: pointer;
  border-radius: 4px;
}
.qz-tempus-popup__option:hover { background: var(--bg-soft); }

/* Find-multi-läge: lägesväljare + klickbara meningsord i tabellrad */
.qz-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--rule);
  border-radius: 9999px;
  background: var(--surface);
  overflow: hidden;
  font-family: var(--sans);
}
.qz-mode-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: .35rem .85rem;
  font: inherit;
  font-size: .82rem;
  font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .15s, color .15s;
  letter-spacing: 0;
  text-transform: none;
}
.qz-mode-toggle button + button {
  border-left: 1px solid var(--rule);
}
.qz-mode-toggle button:hover {
  background: var(--bg-soft);
}
.qz-mode-toggle button.is-active {
  background: var(--accent);
  color: #fff;
}

.qz-tabell-grid td.qz-td-sats .qz-word {
  font-family: inherit;
  font-size: inherit;
  padding: .1em 0;
}
.qz-tabell-grid td.qz-td-sats:not(.qz-td-sats--clickable) .qz-word {
  cursor: text;
  pointer-events: none;
  background: transparent;
  border-color: transparent;
  color: inherit;
}
.qz-tabell-grid td.qz-td-sats--clickable .qz-word.is-claimed {
  background: #D7F0DC;
  border-color: #76B98A;
  color: #1F6B34;
  text-decoration: line-through;
  cursor: default;
}

@media (max-width: 720px) {
  .qz-tabell .qz-meta {
    flex-wrap: wrap;
    gap: .5rem;
  }
  .qz-mode-toggle {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
  }
}

/* Legacy quiz (förra iterationen) — behåll inte */
.quiz { margin-top: 1rem; }
.quiz-toolbar {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: .75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  position: sticky; top: 4.5rem; z-index: 5;
}
.quiz-score {
  margin-left: auto;
  font-family: var(--sans);
  font-size: .88rem;
  color: var(--ink-muted);
  font-weight: 600;
}
.quiz-legend {
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--ink-muted);
  margin: .75rem 0 1rem;
}
.quiz-chip {
  display: inline-block;
  padding: 0 .35rem;
  border-radius: 3px;
  font-weight: 500;
}
.quiz-chip--ok  { background: #D7F0DC; color: #1F6B34; }
.quiz-chip--bad { background: #FADADA; color: #842029; }

.quiz-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: .92rem;
  overflow: hidden;
}
.quiz-table thead th {
  background: var(--bg-soft);
  text-align: left;
  padding: .55rem .75rem;
  font-size: .75rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--rule);
  font-weight: 600;
}
.quiz-table td {
  padding: .45rem .55rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.quiz-table tr:last-child td { border-bottom: 0; }
.quiz-table .quiz-num {
  width: 2.5rem;
  text-align: right;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.quiz-table .quiz-sats {
  width: 36%;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1rem;
}
.quiz-input {
  width: 100%;
  min-width: 6rem;
  padding: .3rem .5rem !important;
  font-family: var(--sans) !important;
  font-size: .9rem !important;
  transition: background .15s, border-color .15s;
}
.quiz-input.is-ok {
  background: #E7F6EB !important;
  border-color: #76B98A !important;
  color: #1F6B34 !important;
  font-weight: 500;
}
.quiz-input.is-bad {
  background: #FCE7E7 !important;
  border-color: #E09A9A !important;
  animation: quiz-shake .25s linear;
}
.quiz-input.is-revealed {
  background: #FFF8E5 !important;
  border-color: #D4A547 !important;
  color: #6B5112 !important;
}
@keyframes quiz-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
}

@media (max-width: 767px) {
  .quiz-table { display: block; }
  .quiz-table thead { display: none; }
  .quiz-table tbody, .quiz-table tr, .quiz-table td { display: block; width: 100%; }
  .quiz-table tr {
    padding: .75rem;
    border-bottom: 1px solid var(--rule);
  }
  .quiz-table tr:last-child { border-bottom: 0; }
  .quiz-table td {
    padding: .25rem 0;
    border: 0;
  }
  .quiz-table .quiz-num {
    text-align: left;
    font-weight: 600;
    color: var(--accent);
  }
  .quiz-table .quiz-sats { padding-top: .5rem; font-style: italic; }
}

.grammatik-nav {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
}
.grammatik-nav a { text-decoration: none; font-weight: 500; }
.grammatik-nav .next { margin-left: auto; }

.ovning-filters {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: 1rem; background: var(--surface);
  border: 1px solid var(--rule); border-radius: var(--radius);
  margin-bottom: 1.5rem;
}

/* Essay / text-content */
.uppsats-body p,
.inledning-body p,
.facit-body p { text-indent: 0; }

/* Inledningar — verk-rubrik med underrubrik, samt not */
.inledning-verk-head { margin-bottom: 1rem; }
.inledning-verk-head h3 {
  margin: 0;
  font-size: 1.2rem;
  font-family: var(--sans);
  font-weight: 600;
}
.inledning-underrubrik {
  margin: .15rem 0 0;
  font-family: var(--sans);
  font-size: .85rem;
  color: var(--ink-muted);
  letter-spacing: .02em;
}
.inledning-not {
  margin: .75rem 0 0;
  padding: .6rem .85rem;
  background: var(--bg-soft);
  border-left: 2px solid var(--rule);
  font-family: var(--sans);
  font-size: .82rem;
  color: var(--ink-muted);
  border-radius: 2px;
  max-width: var(--measure);
}
.inledning-not a { color: var(--accent); }

.forfattare-sektion {
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
}
.forfattare-sektion:first-of-type { border-top: 0; padding-top: 0; }
.forfattare-sektion > h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-style: italic;
  font-size: 1.6rem;
  color: var(--accent);
  margin: 0 0 1.5rem;
}

.uppsats-header { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--rule); }
.uppsats-header h1 { margin-bottom: .25rem; }
.uppsats-header .meta { font-family: var(--sans); color: var(--ink-muted); font-size: .92rem; }
.uppsats-analys-link {
  font-family: var(--sans);
  font-size: .9rem;
  margin-top: .6rem;
  margin-bottom: 0;
}
.uppsats-analys-link a {
  display: inline-block;
  padding: .35rem .7rem;
  background: var(--bg-soft);
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--accent);
  text-decoration: none;
}
.uppsats-analys-link a:hover { background: var(--surface); }

.back-link {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--sans); font-size: .9rem;
  text-decoration: none;
  margin-bottom: 1.25rem;
}

/* Hero on index */
.hero {
  padding: 1rem 0 2rem;
  max-width: var(--measure);
}
.hero h1 { margin-top: .5rem; }
.hero .lead { margin-bottom: 1.5rem; }

/* Landningssida — neutralt val mellan stilistik och grammatik */
.hero--landing {
  text-align: center;
  max-width: none;
  padding: 2.5rem 0 1.5rem;
}
.hero--landing h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.hero--landing .lead {
  color: var(--ink-soft);
  margin-left: auto;
  margin-right: auto;
}

.track-choice {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin: 0 0 3rem;
}
@media (min-width: 768px) {
  .track-choice { grid-template-columns: 1fr 1fr; }
}
.track-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.track-card:hover,
.track-card:focus-visible {
  border-color: var(--accent);
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(42, 67, 101, 0.08);
}
.track-card h2 {
  margin: 0 0 .5rem;
  font-size: 1.6rem;
  color: var(--accent);
}
.track-card p {
  margin: 0 0 1.25rem;
  color: var(--ink-soft);
  flex-grow: 1;
}
.track-card-cta {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--accent);
}

.popular { margin-top: 1rem; }
.popular h2 {
  font-size: 1.25rem;
  color: var(--ink-muted);
  font-family: var(--sans);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 1rem;
}

/* -- Konto-CTA på startsidan -- */

.cta-register {
  margin: 2rem 0 1rem;
  padding: 1.75rem 1.75rem 1.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.cta-register h2 {
  margin: .15rem 0 .5rem;
  font-size: 1.5rem;
  color: var(--accent);
}
.cta-register-lead {
  color: var(--ink-soft);
  max-width: var(--measure);
  margin: 0 0 1.5rem;
}
.cta-register-features { margin-bottom: 1.5rem; }
.cta-register-features h3 {
  font-size: 1rem;
  margin: 0 0 .25rem;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
}
.cta-register-features p {
  margin: 0;
  font-size: .95rem;
  color: var(--ink-soft);
}
.cta-register-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  margin: 0;
}
.cta-register-secondary {
  font-size: .9rem;
  color: var(--ink-muted);
}

/* -- Konto-CTA-banner på övningssidor -- */

.cta-register-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  padding: .75rem 1rem;
  margin: 0 0 1.5rem;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: .95rem;
}
.cta-register-banner-text {
  flex: 1 1 22rem;
  color: var(--ink-soft);
}
.cta-register-banner-text strong { color: var(--ink); }
.cta-register-banner-links {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.cta-register-banner-secondary {
  font-size: .9rem;
  color: var(--ink-muted);
}

/* -- Kontaktsidan -- */

.kontakt-ingress {
  font-size: 1.1rem;
  color: var(--ink-soft);
  max-width: var(--measure);
  margin-bottom: 1.75rem;
}

.kontakt-mailrad {
  font-size: 1.1rem;
  max-width: var(--measure);
  margin-bottom: .3rem;
}

.kontakt-adress-sign {
  margin: .6rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  color: var(--mark-red);
  text-align: right;
  font-size: 1rem;
  transform: rotate(-2deg);
  transform-origin: right center;
}

.kontakt-om {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  max-width: var(--measure);
}
.kontakt-om p:last-child { margin-bottom: 0; }
.kontakt-om em { font-style: italic; color: var(--ink); }

/* Grammatik: topbar med back-link + print-knapp */
.grammatik-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.grammatik-topbar .back-link { margin-bottom: 0; }
.grammatik-topbar-actions { display: inline-flex; gap: .5rem; align-items: center; }
.pdf-btn {
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 600;
  padding: .55rem .95rem;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  color: #fff !important;
  text-decoration: none !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  line-height: 1;
  transition: background .15s, border-color .15s, transform .1s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.pdf-btn:hover,
.pdf-btn:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
  color: #fff;
  text-decoration: none;
}
.pdf-btn:active { transform: translateY(1px); }
.pdf-btn-icon { flex-shrink: 0; }
.pdf-btn-label { letter-spacing: .02em; }

/* ============================================================
   Repetition-worksheet (rep 1/2/3)
   ============================================================ */
.rep-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin: 1rem 0 1.5rem;
  padding: .75rem 1rem; background: #f5f3ec;
  border: 1px solid #e3dfd2; border-radius: var(--radius);
  font-family: var(--sans); font-size: .95rem;
}
.rep-progress { font-weight: 600; color: var(--ink); }
.rep-progress > span { color: var(--accent); }

/* Rep 1 — sektioner */
.rep-sektion { margin: 2rem 0; }
.rep-sektion-titel {
  font-family: var(--sans); font-size: 1.15rem; font-weight: 700;
  color: var(--accent); margin: 0 0 .6rem; padding-bottom: .3rem;
  border-bottom: 2px solid var(--accent);
}
.rep-table { width: 100%; border-collapse: collapse; }
.rep-table tr { border-bottom: 1px solid #e8e3d4; }
.rep-table tr:last-child { border-bottom: none; }
.rep-table td { padding: .65rem .5rem; vertical-align: top; }
.rep-fraga { width: 55%; font-family: var(--serif); font-size: 1rem; }
.rep-svar-cell { width: 45%; }
.rep-reveal-btn {
  background: transparent; border: 1px solid var(--accent); color: var(--accent);
  padding: .25rem .7rem; border-radius: 4px; cursor: pointer;
  font-family: var(--sans); font-size: .85rem; font-weight: 600;
  transition: background .12s, color .12s;
}
.rep-reveal-btn:hover, .rep-reveal-btn:focus-visible {
  background: var(--accent); color: #fff;
}
.rep-svar { margin-top: .5rem; }
.rep-svar-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; gap: .35rem;
}
.rep-svar-list li {
  background: #fffbe9; border: 1px solid #e8d99a; padding: .2rem .55rem;
  border-radius: 4px; font-family: var(--sans); font-size: .9rem;
  font-weight: 500;
}
.is-revealed .rep-fraga { color: var(--ink-muted); }

/* Rep 2 — källtext + ordtabell */
.rep-context {
  position: sticky; top: 5.5rem; z-index: 5;
  background: #fff; border-left: 4px solid var(--accent);
  padding: 1rem 1.25rem; margin: 1.5rem 0;
  font-family: var(--serif); font-size: 1.05rem;
  box-shadow: 0 4px 8px -4px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
}
.rep-context-label {
  font-family: var(--sans); font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--accent); margin: 0 0 .35rem;
}
.rep-context-text { margin: 0; line-height: 1.6; font-style: italic; }
.rep-context-source {
  margin: .6rem 0 0; font-family: var(--sans); font-size: .85rem;
  color: var(--ink-muted); text-align: right;
}
.rep-table--words { margin-top: 1rem; }
.rep-table--words th {
  font-family: var(--sans); font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted);
  text-align: left; padding: .5rem; border-bottom: 1px solid var(--ink-soft);
}
.rep-col-nr { width: 3rem; }
.rep-col-ord { width: 10rem; }
.rep-nr { color: var(--ink-muted); font-family: var(--sans); font-size: .85rem; font-variant-numeric: tabular-nums; }
.rep-ord { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; }
.rep-ord-stor { font-family: var(--serif); font-weight: 700; font-size: 1.25rem; color: var(--accent); }
.rep-options { display: flex; flex-wrap: wrap; gap: .35rem; }
.rep-opt {
  background: #fff; border: 1px solid #cfc8b4; color: var(--ink);
  padding: .25rem .65rem; border-radius: 999px; cursor: pointer;
  font-family: var(--sans); font-size: .85rem; line-height: 1.2;
  transition: background .1s, border-color .1s, color .1s;
}
.rep-opt:hover:not(:disabled) { background: #f5f3ec; border-color: var(--accent); }
.rep-opt.is-correct {
  background: #d6f1d6 !important; border-color: #5cb55c !important; color: #1a4d1a !important;
  font-weight: 600;
}
.rep-opt.is-wrong {
  background: #fce4e4 !important; border-color: #d77b7b !important; color: #6b1a1a !important;
  text-decoration: line-through;
}
.rep-opt:disabled { cursor: not-allowed; opacity: .8; }
.rep-feedback {
  margin-top: .4rem; font-family: var(--sans); font-size: .85rem;
  color: var(--accent); font-weight: 600;
}
.is-locked .rep-opt:not(.is-correct):not(.is-wrong) { opacity: .35; pointer-events: none; }

/* Rep 3 — ordkort med kategorigrupper */
.rep-row3 {
  background: #fff; border: 1px solid #e3dfd2; border-radius: var(--radius);
  padding: 1rem 1.25rem; margin: 0 0 1rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.rep-row3.is-complete { border-color: #5cb55c; background: #f4fbf4; }
.rep-row3.is-revealed { border-color: var(--accent); background: #f8f7f1; }
.rep-row3-header {
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; margin-bottom: .8rem;
  padding-bottom: .6rem; border-bottom: 1px solid #ede9da;
}
.rep-row3-header .rep-nr {
  font-size: 1.1rem; font-weight: 700; color: var(--accent);
}
.rep-counter {
  margin-left: auto; font-family: var(--sans); font-size: .9rem;
  font-weight: 600; color: var(--ink);
  background: #fffbe9; padding: .25rem .65rem; border-radius: 999px;
  border: 1px solid #e8d99a;
  font-variant-numeric: tabular-nums;
}
.rep-counter [data-rep-current] { color: var(--accent); }
.rep-row3.is-complete .rep-counter { background: #d6f1d6; border-color: #5cb55c; color: #1a4d1a; }
.rep-row3-body { display: flex; flex-direction: column; gap: .6rem; }
.rep-kategori-grupp { }
.rep-kategori-grupp.is-revealed-grupp { animation: rep-fall-fram .35s ease both; }
@keyframes rep-fall-fram {
  from { opacity: 0; transform: translateY(-.4rem); }
  to   { opacity: 1; transform: translateY(0); }
}
.rep-kategori-titel {
  font-family: var(--sans); font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-muted); margin: 0 0 .3rem;
}

/* Mobil: tighter layout */
@media (max-width: 600px) {
  .rep-fraga, .rep-svar-cell { width: auto; }
  .rep-table tr { display: block; padding: .6rem 0; }
  .rep-table td { display: block; padding: .25rem 0; }
}

/* ========================================================================
   Mobilanpassning — systematisk genomgång (320–768 px)
   ======================================================================== */

/* Större tap-targets i mobilens offcanvas-meny */
@media (max-width: 991.98px) {
  .sidebar-link {
    padding: .65rem .85rem;
    font-size: 1rem;
  }
}

/* Telefoner */
@media (max-width: 575.98px) {
  /* Innehållskolumnen — tighter padding */
  .site-main-inner { padding: 1.5rem 1rem 2rem; }

  /* Brand: dölj sub-text "och grammatik" så bara "Stilistik" syns */
  .brand-sub { display: none; }

  /* Lead-stycke lite mindre */
  .lead { font-size: 1.075rem; }

  /* Citat och definitioner: tighter padding */
  .exempel,
  .definition { padding: .85rem .95rem; }

  /* Step-list: minska vänsterindrag och cirkelstorlek */
  .step-list > li {
    padding: 1rem 0 1rem 2.75rem;
  }
  .step-list > li::before {
    width: 2rem; height: 2rem;
    top: .85rem;
    font-size: .9rem;
  }
  .step-list > li:first-child::before { top: -.15rem; }

  /* Quiz-kort */
  .qz-card { padding: 1.25rem 1rem; }
  .qz-sats { font-size: 1.15rem; padding: .85rem 0; }
  .qz-meta {
    flex-wrap: wrap;
    gap: .35rem;
    font-size: .72rem;
  }
  .qz-stage { min-height: 280px; }

  /* Repetitionskort: släpp ord-kolumnens fasta bredd, tighter padding */
  .rep-col-ord { width: auto; }
  .rep-row3 { padding: .75rem .85rem; }

  /* Övningssidans filterrad: select går full bredd, knappar fyller raden */
  .ovning-filters > label.ms-auto {
    margin-left: 0 !important;
    width: 100%;
  }
  .ovning-filters .form-select {
    min-width: 0 !important;
    width: 100%;
    flex: 1 1 auto;
  }
}

/* Print-fotnot — syns bara i print */
.print-footer { display: none; }

/* Print */
@media print {
  @page { size: A4; margin: 18mm 16mm 22mm; }
  .navbar, .site-sidebar, .site-footer, .offcanvas,
  .grammatik-topbar, .grammatik-nav, .back-link, .pdf-btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .site-main-inner { padding: 0; max-width: 100%; }
  .grammatik-content { max-width: 100%; }
  h1, h2, h3 { page-break-after: avoid; }
  .gh-table-wrap, .gh-note, .gh-example, .gh-dl-row { page-break-inside: avoid; }
  .gh-note {
    float: none; width: auto; margin: .6rem 0;
    background: #FFFBEA !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  a { color: inherit; text-decoration: none; }
  .print-footer {
    display: block;
    position: fixed;
    bottom: 6mm;
    left: 0; right: 0;
    text-align: center;
    font-family: var(--sans);
    font-size: 9pt;
    color: #666;
    border-top: 1px solid #ccc;
    padding-top: 3mm;
  }
}

/* ---------- Klar/favorit-markeringsknappar ---------- */
.ovning-marks {
  display: flex;
  gap: .5rem;
  margin-top: .65rem;
}
.ovning-mark-btn {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  background: transparent;
  border: 1px solid #d8d4c9;
  color: #6b6b6b;
  font-size: .82rem;
  line-height: 1;
  padding: .32rem .7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.ovning-mark-btn:hover {
  border-color: #2A4365;
  color: #2A4365;
}
.ovning-mark-btn.is-on {
  background: #2A4365;
  border-color: #2A4365;
  color: #fff;
}
.ovning-mark-btn[data-kind="favorit"].is-on {
  background: #b08900;
  border-color: #b08900;
}
.ovning-mark-btn--inline {
  border: none;
  font-size: 1em;
  padding: .15em .35em;
  vertical-align: middle;
  color: #b9b3a4;
}
.ovning-mark-btn--inline:hover { color: #b08900; background: transparent; }
.ovning-mark-btn--inline.is-on { background: transparent; color: #b08900; }
.ovning-mark-btn--inline[data-kind="favorit"].is-on {
  background: transparent;
  border-color: transparent;
  color: #b08900;
}
.ovning-mark-btn-demo {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  background: transparent;
  border: 1px solid #d8d4c9;
  color: #6b6b6b;
  font-size: .82rem;
  line-height: 1;
  padding: .28rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: baseline;
}

/* ---------- Kopierings- och utskriftsfriktion ---------- */
main#innehall {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

main#innehall input,
main#innehall textarea,
main#innehall select,
main#innehall [contenteditable="true"] {
  -webkit-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

@media print {
  body:not(.page-konto) > *,
  body:not(.page-konto) main#innehall {
    display: none !important;
  }
  body:not(.page-konto)::before {
    content: "Innehållet finns på azon.se";
    display: block;
    font: 1rem/1.5 sans-serif;
    padding: 2rem;
  }
}

/* ---------- Mitt konto ---------- */
.konto-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--surface, #faf8f3);
  border: 1px solid var(--rule, #e6e1d4);
  border-radius: var(--radius, 6px);
  padding: 1.25rem 1.4rem;
}
.konto-card-eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .68rem;
  color: var(--ink-muted, #7a7666);
  font-weight: 600;
  margin-bottom: .35rem;
}
.konto-card-headline {
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1.25;
  margin-bottom: .15rem;
}
.konto-card-headline a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.konto-card-headline a:hover { color: #2A4365; border-bottom-color: #2A4365; }

.konto-card-resume { background: #f4efe2; border-color: #e0d8c2; }

.konto-progress-ring {
  --pct: 0;
  --size: 6.25rem;
  --thick: 9px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  flex-shrink: 0;
  background:
    conic-gradient(#2A4365 calc(var(--pct) * 1%), #e6e1d4 0);
  display: grid;
  place-items: center;
  position: relative;
}
.konto-progress-ring-inner {
  width: calc(var(--size) - var(--thick) * 2);
  height: calc(var(--size) - var(--thick) * 2);
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1.05;
}
.konto-progress-ring-num {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 600;
  color: #2A4365;
}
.konto-progress-ring-label {
  font-size: .7rem;
  color: var(--ink-muted, #7a7666);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.konto-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.konto-filter-chip {
  background: transparent;
  border: 1px solid #d8d4c9;
  color: #4a4636;
  font-size: .85rem;
  line-height: 1;
  padding: .42rem .85rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  transition: background .12s, border-color .12s, color .12s;
}
.konto-filter-chip:hover { border-color: #2A4365; color: #2A4365; }
.konto-filter-chip.is-active {
  background: #2A4365;
  border-color: #2A4365;
  color: #fff;
}
.konto-filter-chip-count {
  font-size: .72rem;
  background: rgba(0,0,0,.08);
  padding: .12em .55em;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.konto-filter-chip.is-active .konto-filter-chip-count {
  background: rgba(255,255,255,.22);
}

.konto-status {
  display: inline-block;
  width: 1.2em;
  text-align: center;
  font-weight: 700;
}
.konto-status-done     { color: #2f7a3a; }
.konto-status-progress { color: #b08900; }
.konto-status-empty    { color: #b9b3a4; font-weight: 400; }

.konto-bar {
  margin-top: .35rem;
  height: 4px;
  background: #ece8db;
  border-radius: 2px;
  overflow: hidden;
  max-width: 18rem;
}
.konto-bar-fill         { height: 100%; }
.konto-bar-fill-done    { background: #2f7a3a; }
.konto-bar-fill-progress{ background: #b08900; }

.konto-cards { margin: 0; padding: 0; }
.konto-quiz-card {
  border: 1px solid var(--rule, #e6e1d4);
  border-radius: var(--radius, 6px);
  padding: .8rem 1rem;
  margin-bottom: .65rem;
  background: #fff;
}
.konto-quiz-card-head {
  display: flex;
  align-items: baseline;
  gap: .55em;
}
.konto-quiz-card-title {
  flex: 1;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.konto-quiz-card-title:hover { border-bottom-color: currentColor; }
.konto-quiz-card-pct {
  font-variant-numeric: tabular-nums;
  font-size: .9rem;
  color: var(--ink-muted, #7a7666);
}
.konto-quiz-card-meta { margin-top: .35rem; }

.konto-mark-list li {
  padding: .25rem 0;
  border-bottom: 1px solid #efebe0;
}
.konto-mark-list li:last-child { border-bottom: none; }
.konto-mark-scope {
  display: inline-block;
  min-width: 4.5em;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-muted, #7a7666);
  margin-right: .55em;
}

.konto-tabs .nav-link {
  color: var(--ink-soft, #4a4636);
  border-radius: 0;
  border: none;
  border-bottom: 2px solid transparent;
  padding: .55rem 1rem;
}
.konto-tabs .nav-link.active {
  color: #2A4365;
  background: transparent;
  border-bottom-color: #2A4365;
  font-weight: 600;
}

.konto-advanced summary {
  cursor: pointer;
  display: inline-block;
  padding: .25rem 0;
}
.konto-advanced summary:hover { color: #2A4365; }

@media (max-width: 575.98px) {
  .konto-card { padding: 1rem; gap: 1rem; }
  .konto-progress-ring { --size: 5rem; --thick: 7px; }
  .konto-progress-ring-num { font-size: 1.15rem; }
  .konto-card-headline { font-size: 1.15rem; }
}

@media print {
  body.page-konto .navbar,
  body.page-konto .site-sidebar,
  body.page-konto .site-footer,
  body.page-konto .offcanvas,
  body.page-konto .konto-tabs,
  body.page-konto .konto-filter-chips { display: none !important; }
  body.page-konto .tab-pane { display: block !important; opacity: 1 !important; }
  body.page-konto .konto-card { background: transparent !important; border-color: #ccc !important; }
  body.page-konto .konto-progress-ring {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body.page-konto .konto-quiz-card { page-break-inside: avoid; }
  body.page-konto .d-md-none { display: none !important; }
  body.page-konto .d-none.d-md-table { display: table !important; }
}