.stanza-head { margin-bottom: 1.2rem; }
.stanza-nav { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.stanza-nav h1 { margin: 0; font-size: 1.6rem; }
.stanza-nav .spacer { flex: 1; }
.jump {
  width: 4.2ch; font: inherit; font-weight: 700; color: var(--accent);
  background: transparent; border: 0; border-bottom: 1px dashed var(--border); text-align: center;
  -moz-appearance: textfield;
}
.jump::-webkit-inner-spin-button { display: none; }

.picker-wrap { margin-top: 1rem; }
.layer-picker { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.presets { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.8rem; }
.lang-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; }
.lang-group { border: 1px solid var(--border); border-radius: 8px; margin: 0; padding: 0.4rem 0.8rem 0.6rem; }
.lang-group legend { font-weight: 700; padding: 0 0.3rem; }
.layer-option { display: flex; gap: 0.45rem; align-items: baseline; font-size: 0.92rem; cursor: pointer; padding: 0.1rem 0; }
.layer-option input { accent-color: var(--accent); }
.soon { font-size: 0.72rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0 0.45em; }
.show-missing { margin-top: 0.8rem; color: var(--muted); }

/* Lagren läggs i kolumner på breda skärmar och staplas på smala. */
.layers { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 1rem; align-items: start; }
.layer {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 0.9rem 1.1rem 0.8rem; min-width: 0;
}
.layer-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.layer-head h2 { font-size: 0.92rem; font-weight: 700; color: var(--muted); margin: 0; flex: 1 1 auto; letter-spacing: 0.01em; }
.layer .text { white-space: pre-line; font-size: 1.12rem; line-height: 1.7; overflow-wrap: anywhere; }
.layer .text.medieval { font-family: var(--font-medieval); font-size: 1.22rem; }
.layer .text.runic { font-family: var(--font-runic); font-size: 1.45rem; line-height: 1.8; letter-spacing: 0.04em; }
.layer-note .text { font-size: 0.95rem; line-height: 1.55; }
.layer-source { margin-top: 0.7rem; padding-top: 0.5rem; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--muted); }
.layer-source a { color: var(--muted); }
.layer-missing { background: transparent; box-shadow: none; border-style: dashed; }
.layer-missing p { margin: 0; font-size: 0.9rem; }
.empty { color: var(--muted); }

/* Manuskriptbilden får dubbel bredd när det finns plats. */
.layer-image { grid-row: span 3; }
@media (min-width: 760px) { .layer-image { grid-column: span 2; } }
.ms-viewer { display: grid; gap: 0.5rem; }
.ms-stage {
  position: relative; overflow: hidden; border-radius: 6px; background: var(--surface-2);
  /* På smala skärmar ungefär bladets höjd vid full bredd, så att bilden inte omges av tomrum. */
  height: min(70vh, 720px, calc((100vw - 4rem) * 1.4)); touch-action: none; cursor: grab;
}
.ms-stage:active { cursor: grabbing; }
.ms-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transform-origin: 0 0; user-select: none; -webkit-user-drag: none;
}
.ms-controls { display: flex; gap: 0.4rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.ms-tabs { display: flex; gap: 0.3rem; margin-right: auto; }
.ms-tabs button { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 0.15em 0.8em; cursor: pointer; font-size: 0.85rem; }
.ms-tabs button[aria-pressed='true'] { background: var(--accent); color: var(--surface); border-color: var(--accent); }

/* Ord för ord (interlineärt) */
.interlinear { display: grid; gap: 0.7rem; }
.il-line { display: flex; flex-wrap: wrap; gap: 0.25rem 0.55rem; }
.il-word {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  padding: 0.1rem 0.3rem; border-radius: 6px; color: inherit; text-decoration: none; line-height: 1.25;
}
.il-word:hover, .il-word.hl { background: var(--accent-soft); }
.il-src { font-size: 1.08rem; }
.il-gloss { font-size: 0.85rem; color: var(--muted); }
.il-word.hl .il-gloss { color: var(--text); }
.layer-explain .text { font-size: 1rem; line-height: 1.6; }
i.exp { color: var(--muted); }

/* Ord som kan pekas på, och tooltip */
.w { border-radius: 3px; cursor: help; }
.w:hover, .w.hl { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); }
.word-tip {
  position: absolute; z-index: 20; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; padding: 0.7rem 0.9rem;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.25); font-size: 0.9rem; line-height: 1.4;
  max-height: min(70vh, 34rem); overflow-y: auto; overscroll-behavior: contain;
}
.tip-head { font-size: 1.15rem; margin-bottom: 0.15rem; }
.tip-lemma { color: var(--muted); font-size: 1rem; }
.tip-pos { color: var(--accent); font-size: 0.85rem; }
.tip-morph { margin: 0.25rem 0 0.5rem; }
.tip-gloss { display: grid; grid-template-columns: auto 1fr; gap: 0.1rem 0.7rem; margin: 0 0 0.5rem; }
.tip-gloss dt { color: var(--muted); }
.tip-gloss dd { margin: 0; }
.tip-forms { border-top: 1px solid var(--border); padding-top: 0.4rem; margin-bottom: 0.4rem; }
.tip-forms ul { margin: 0.2rem 0 0; padding-left: 1rem; max-height: 9.5rem; overflow: auto; }
.tip-forms li.current { font-weight: 700; }
.tip-link { font-size: 0.85rem; }

.tip-base { border-top: 1px solid var(--border); padding-top: 0.35rem; margin-bottom: 0.4rem; }

.layer .text.ipa { font-family: 'Noto Serif', 'Segoe UI', sans-serif; font-size: 1.02rem; line-height: 1.8; }

/* Versmått */
.meter { display: grid; gap: 0.15rem; }
.meter-line { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.6rem; align-items: baseline; font-size: 1.12rem; }
.meter-line.unit-start { margin-top: 0.55rem; }
.meter-kind { font-size: 0.72rem; color: var(--muted); text-align: right; }
.stave { color: var(--accent); }
/* Bokmärke och anteckning */
.bookmark { font-size: 1.05rem; line-height: 1; padding: 0.4em 0.5em; }
.bookmark[aria-pressed='true'] { color: #d4a017; border-color: #d4a017; }
.note-box { margin-top: 0.8rem; }
.note-box label { display: grid; gap: 0.3rem; }
.note-box textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 0.6rem; font: inherit; }

.tip-entity { border-top: 1px solid var(--border); padding-top: 0.35rem; margin-bottom: 0.4rem; font-size: 0.85rem; }

.ms-canvas { position: absolute; transform-origin: 0 0; }
.ms-canvas img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.ms-mark {
  position: absolute; border: 2px solid var(--accent); border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); pointer-events: none;
}

/* Karaokeläge: ordet som läses upp just nu */
.w.speaking, .il-word.speaking { background: var(--mark); color: var(--text); border-radius: 3px; }

.tip-zoega { border-top: 1px solid var(--border); padding-top: 0.35rem; margin-bottom: 0.4rem; font-size: 0.82rem; }

/* Rad för rad: versrad, etymologisk översättning och förklaring */
.line-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.line-item { border-left: 2px solid var(--border); padding-left: 0.7rem; }
.line-src { font-size: 1.15rem; }
.line-ety { font-weight: 600; margin-top: 0.15rem; }
.line-exp { color: var(--muted); font-size: 0.92rem; margin-top: 0.2rem; }

/* Sammansatta ord och äldre släktord */
.compound { margin: 1rem 0; }
.compound-parts li { margin: 0.5rem 0; }
.compound-cognate { margin-top: 0.15rem; }
.compound-list { margin: 0.75rem 0 0.25rem; font-size: 0.9em; }
.compound-list ul { margin: 0.25rem 0 0; padding-left: 1.2rem; }
.hist-cognate { font-style: italic; }