/* forstora.css: stil för fönstret som förstorar en bild (forstora.js).
 * UPPDATERING 2026-11-12: första versionen. Version 1.14.
 * Gult används inte här: det är reserverat för inmatningsfält.
 */
a.forstorbar { display: block; cursor: zoom-in; }
a.forstorbar:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.forstora-lank { font-size: 0.92rem; }

dialog.forstora {
  position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: none;
  background: #0f1715; color: #eef4f1;
}
dialog.forstora:not([open]) { display: none; }
dialog.forstora[open] { display: flex; flex-direction: column; }
dialog.forstora::backdrop { background: rgba(0, 0, 0, 0.8); }
.forstora-rad { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid #2c3a36; }
.forstora-titel { margin: 0; font-weight: 700; font-size: 1rem; }
.forstora-knappar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.forstora-knappar button, .forstora-knappar a {
  font: inherit; font-size: 0.9rem; color: #eef4f1; background: transparent; border: 1px solid #5c7a70; border-radius: 999px;
  padding: 0.3rem 0.75rem; cursor: pointer; text-decoration: none;
}
.forstora-knappar button:hover, .forstora-knappar a:hover { background: #1f2d29; }
.forstora-knappar button:focus-visible, .forstora-knappar a:focus-visible { outline: 3px solid #7ff0e0; outline-offset: 2px; }
.forstora-zoom { min-width: 3.6em; text-align: center; font-variant-numeric: tabular-nums; font-size: 0.9rem; }
.forstora-yta { flex: 1; overflow: auto; scrollbar-gutter: stable; padding: 1rem; text-align: center; }
.forstora-yta:focus-visible { outline: 3px solid #7ff0e0; outline-offset: -3px; }
.forstora-bild { display: inline-block; max-width: none; background: #fff; cursor: zoom-in; }
@media print { dialog.forstora { display: none !important; } }