/* ══════════════════════════════════════════
   CMS — /crew/cms

   Skallet er en APP, ikke en side i crew-panelet: egen topbar, ingen
   crew-topbar over. Grunnen staar i beslutningen — en side i panelskallet
   har tilbake-knappen som eneste utgang, og da blir hvert bytte mellom
   nyheter og forsiden en tur innom hub-en. Det var nettopp turene som skulle
   bort.

   Ikonskinna navigerer INNE i appen, mellom flater i samme domene. Den er
   ikke sidebaren som ble fjernet i /admin — se docs/design/paneler.md.

   Klasseprefikset er `.cms-`. Appen laaner .btn, .form-control, .list-item
   og .badge fra resten av designsystemet der de passer, men trenger sitt
   eget skall fordi ingenting annet i appen er tre kolonner mot en
   fullskjermsflate.
   ══════════════════════════════════════════ */

/* Fullskjerm uten sentrering og padding — samme gruppe som kassa og
   innsjekk. Glemmes denne, faar appen #app-fullscreen sin sentrering og
   ser ut som et smalt kort midt paa skjermen. */
body.fullscreen-page #app-fullscreen:has(.cms-app) {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
}
body.fullscreen-page #app-fullscreen:has(.cms-app) #app-content-full {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.cms-app {
    --cms-chrome: #11161d;
    --cms-chrome-2: #151b23;
    --cms-rail: 52px;
    --cms-panel: 300px;
    --cms-doc-side: 300px;

    height: 100vh;
    display: grid;
    grid-template-rows: 52px 1fr;
    overflow: hidden;
    color: var(--vl-text);
}

/* ── Topbar ────────────────────────────────────────────────── */

.cms-top {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0 0.8rem;
    background: var(--cms-chrome);
    border-bottom: 1px solid var(--vl-glass-border);
    min-width: 0;
}

.cms-exit {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    /* Brukes både som <a> (appens topbar) og <button> (dokumentets). En klasse
       som skal kle begge må nullstille BEGGE nettleserstilene: knappens ramme
       og grå flate, og lenkas understrek. Glemmer man den ene, ser den ene
       varianten riktig ut og den andre ikke — og det var understreken som ble
       stående under tilbakepila. Samme fallgruve som `.md-rail-new` i
       components.css. */
    border: none;
    background: none;
    padding: 0;
    text-decoration: none;
    border-radius: var(--vl-radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vl-text-muted);
    font-size: 0.9rem;
    transition: all 0.15s;
}
.cms-exit:hover { background: var(--vl-glass); color: var(--vl-text); }

.cms-ctx {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.55rem;
    border: none;
    background: none;
    border-radius: var(--vl-radius-xs);
    color: var(--vl-text);
    font-size: 0.88rem;
    font-weight: 600;
    min-width: 0;
    transition: background 0.15s;
}
.cms-ctx-kind {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vl-text-muted);
    padding: 0.1rem 0.4rem;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}
.cms-ctx-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cms-top-mid {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
.cms-saved {
    font-size: 0.76rem;
    color: var(--vl-text-muted);
    white-space: nowrap;
}
.cms-saved--dirty { color: #f0c07a; }
.cms-saved--error { color: #f0a48f; }

.cms-tool {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: none;
    background: none;
    border-radius: 6px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vl-text-muted);
    transition: all 0.14s;
}
.cms-tool:hover { background: var(--vl-glass); color: var(--vl-text); }
.cms-tool.active { background: rgba(0, 206, 201, 0.14); color: var(--vl-accent); }

.cms-top-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.cms-tool-group {
    display: flex;
    align-items: center;
    gap: 0.1rem;
    padding: 0 0.35rem;
    border-left: 1px solid var(--vl-glass-border);
    height: 22px;
    flex-shrink: 0;
}

/* ── Kropp ─────────────────────────────────────────────────── */

.cms-body {
    display: grid;
    /* `auto` er draghåndtaket mellom lista og scenen. */
    grid-template-columns: var(--cms-rail) var(--cms-panel) auto 1fr;
    min-height: 0;
    min-width: 0;
}

/* ── Ikonskinne ────────────────────────────────────────────── */

.cms-rail {
    background: var(--cms-chrome);
    border-right: 1px solid var(--vl-glass-border);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.6rem 0;
}

.cms-rail-btn {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border: none;
    background: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vl-text-muted);
    font-size: 1rem;
    transition: all 0.15s;
}
.cms-rail-btn:hover { background: var(--vl-glass); color: var(--vl-text); }
.cms-rail-btn.active { background: rgba(0, 206, 201, 0.14); color: var(--vl-accent); }

/* Etiketten er et pseudo-element og ikke title=": nettleserens egen
   forsinkelse paa ett sekund gjor en ikonskinne ubrukelig for den som ennaa
   ikke har laert ikonene. */
.cms-rail-btn::after {
    content: attr(data-tip);
    position: absolute;
    left: 44px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    padding: 0.25rem 0.55rem;
    border-radius: 6px;
    white-space: nowrap;
    background: #000;
    color: var(--vl-text);
    font-size: 0.72rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s;
}
.cms-rail-btn:hover::after { opacity: 0.92; }

.cms-rail-sep {
    width: 22px;
    height: 1px;
    background: var(--vl-glass-border);
    margin: 0.45rem 0;
    flex-shrink: 0;
}

/* ── Panel ─────────────────────────────────────────────────── */

.cms-panel {
    background: var(--cms-chrome-2);
    border-right: 1px solid var(--vl-glass-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.cms-panel-top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 0.9rem 0.7rem;
    flex-shrink: 0;
}
.cms-panel-top h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    flex: 1;
    letter-spacing: -0.01em;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cms-panel-back,
.cms-panel-act {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border: none;
    background: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vl-text-muted);
    font-size: 0.8rem;
    transition: all 0.14s;
}
.cms-panel-back:hover,
.cms-panel-act:hover { background: var(--vl-glass); color: var(--vl-text); }

.cms-panel-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 0 0.7rem 1.2rem;
    min-height: 0;
}
.cms-panel-scroll::-webkit-scrollbar { width: 8px; }
.cms-panel-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 99px;
}

.cms-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0.9rem 0.7rem;
    padding: 0.42rem 0.6rem;
    border-radius: var(--vl-radius-xs);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--vl-glass-border);
    flex-shrink: 0;
}
.cms-search i { font-size: 0.75rem; color: var(--vl-text-muted); }
.cms-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    color: var(--vl-text);
    font-size: 0.82rem;
}
.cms-search input::placeholder { color: #5f6b76; }

.cms-group {
    margin: 0.9rem 0 0.35rem;
    padding: 0 0.35rem;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--vl-text-muted);
    opacity: 0.8;
}
.cms-group:first-child { margin-top: 0.2rem; }

/* ── Panelrad ──────────────────────────────────────────────── */

.cms-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem;
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    background: none;
    border-radius: var(--vl-radius-xs);
    color: var(--vl-text);
    font-size: 0.83rem;
    transition: all 0.13s;
}
.cms-row:hover { background: var(--vl-glass); color: var(--vl-text); }
.cms-row.active {
    background: rgba(0, 206, 201, 0.1);
    border-color: rgba(0, 206, 201, 0.3);
    color: #b5eeec;
}
.cms-row--off { opacity: 0.45; }

.cms-row-grip {
    color: var(--vl-text-muted);
    opacity: 0.3;
    font-size: 0.72rem;
    cursor: grab;
    flex-shrink: 0;
    width: 10px;
    text-align: center;
}
.cms-row--locked .cms-row-grip { opacity: 0.1; cursor: default; }
.cms-row-grip:active { cursor: grabbing; }

.cms-row-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    background: color-mix(in srgb, var(--tint, #8b949e) 16%, transparent);
    color: var(--tint, #8b949e);
}

.cms-row-body { flex: 1; min-width: 0; display: block; }
.cms-row-name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
}
.cms-row-sub {
    display: block;
    font-size: 0.7rem;
    color: var(--vl-text-muted);
    margin-top: 0.08rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cms-row-eye {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    border: none;
    background: none;
    border-radius: 5px;
    font-size: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vl-text-muted);
    opacity: 0.55;
    transition: all 0.14s;
}
.cms-row-eye:hover { background: rgba(255, 255, 255, 0.07); opacity: 1; }
.cms-row--off .cms-row-eye { opacity: 0.9; color: #e17055; }

.cms-row-go {
    font-size: 0.7rem;
    color: var(--vl-text-muted);
    opacity: 0.5;
    flex-shrink: 0;
}

/* Statusprikk — publisert/utkast. Bevisst liten: den skal leses som en
   egenskap ved raden, ikke som et varsel. */
.cms-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #00b894;
}
.cms-dot--draft { background: #7d8894; }

.cms-tag {
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.08rem 0.35rem;
    border-radius: 4px;
    flex-shrink: 0;
    background: rgba(108, 92, 231, 0.2);
    color: #b6aaff;
}
.cms-tag--muted { background: rgba(255, 255, 255, 0.06); color: var(--vl-text-muted); }
.cms-tag--warn { background: rgba(225, 112, 85, 0.18); color: #f0a48f; }

.cms-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.5rem;
    border: 1px dashed var(--vl-glass-border);
    background: none;
    border-radius: var(--vl-radius-xs);
    color: var(--vl-text-muted);
    font-size: 0.79rem;
    transition: all 0.14s;
}
.cms-add:hover {
    border-color: rgba(0, 206, 201, 0.4);
    color: var(--vl-accent);
    background: rgba(0, 206, 201, 0.05);
}

/* «Dette redigeres et annet sted» — med veien dit.
   Ser ut som en knapp fordi den skal trykkes, men er dus fordi den fører BORT
   fra det man holder på med. Se `utenfor()` i editors.js. */
.cms-elsewhere {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.9rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--vl-glass-border);
    border-radius: 7px;
    background: none;
    color: var(--vl-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.14s;
}
.cms-elsewhere:hover {
    background: var(--vl-glass);
    border-color: rgba(0, 206, 201, 0.35);
    color: var(--vl-accent);
}
.cms-elsewhere i { font-size: 0.72rem; opacity: 0.8; }

.cms-hint {
    font-size: 0.7rem;
    color: var(--vl-text-muted);
    line-height: 1.5;
    padding: 0.6rem 0.35rem 0;
}

.cms-empty {
    padding: 1.5rem 0.6rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--vl-text-muted);
    line-height: 1.6;
}

/* ── Media-rutenett ────────────────────────────────────────── */

.cms-media-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    padding-top: 0.2rem;
}
.cms-media-item {
    border-radius: var(--vl-radius-xs);
    overflow: hidden;
    border: 1px solid var(--vl-glass-border);
    background: rgba(255, 255, 255, 0.03);
    padding: 0;
    transition: all 0.14s;
}
.cms-media-item:hover { border-color: rgba(0, 206, 201, 0.45); }
.cms-media-item.active { border-color: var(--vl-accent); }
.cms-media-thumb {
    height: 64px;
    background-size: cover;
    background-position: center;
    background-color: rgba(255, 255, 255, 0.04);
}
.cms-media-name {
    padding: 0.3rem 0.4rem;
    font-size: 0.66rem;
    color: var(--vl-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

/* ── Feltgrupper i panelet ─────────────────────────────────── */

.cms-field { margin-bottom: 0.85rem; }
.cms-field:last-child { margin-bottom: 0; }
.cms-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--vl-text-muted);
    margin-bottom: 0.3rem;
}
.cms-input {
    width: 100%;
    padding: 0.45rem 0.6rem;
    font-size: 0.82rem;
    background: rgba(255, 255, 255, 0.04);
    color: var(--vl-text);
    border: 1px solid var(--vl-glass-border);
    border-radius: 6px;
}
.cms-input:focus {
    outline: none;
    border-color: rgba(0, 206, 201, 0.5);
    background: rgba(255, 255, 255, 0.06);
}
.cms-input::placeholder { color: #5f6b76; }
textarea.cms-input { resize: vertical; min-height: 66px; line-height: 1.5; }
select.cms-input option { background: var(--vl-bg-card-solid); }

.cms-pair {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 0.4rem;
}

.cms-switch-line {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.8rem;
    margin-bottom: 0.9rem;
}
.cms-switch-line span { flex: 1; }

.cms-switch {
    position: relative;
    width: 34px;
    height: 19px;
    flex-shrink: 0;
    border: 1px solid var(--vl-glass-border);
    background: rgba(255, 255, 255, 0.11);
    border-radius: 99px;
    padding: 0;
    transition: background 0.16s;
}
.cms-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #8b949e;
    transition: transform 0.16s, background 0.16s;
}
.cms-switch.on {
    background: rgba(0, 184, 148, 0.35);
    border-color: rgba(0, 184, 148, 0.5);
}
.cms-switch.on::after { transform: translateX(15px); background: #00b894; }
.cms-switch:disabled { opacity: 0.4; cursor: not-allowed; }

.cms-panel-foot {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 0.9rem;
    border-top: 1px solid var(--vl-glass-border);
    background: rgba(255, 255, 255, 0.02);
    flex-shrink: 0;
}
.cms-panel-foot .btn { flex: 1; }

/* ── Scenen ────────────────────────────────────────────────── */

.cms-stage {
    background: #070a10;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

/* Forhaandsvisning: ekte forside i en iframe. En tegnet etterligning ville
   blitt feil i det noen endrer designet, og da er den verre enn ingen. */
.cms-preview {
    flex: 1;
    min-height: 0;
    display: flex;
    justify-content: center;
    padding: 1.1rem;
    overflow: auto;
}
.cms-preview-frame {
    width: 100%;
    max-width: 100%;
    height: 100%;
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius-sm);
    background: var(--vl-bg-dark);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    transition: max-width 0.2s ease;
}
.cms-preview--mobile .cms-preview-frame { max-width: 420px; }

/* Forhaandsvisning og editor er sosken som veksler med `hidden`. Begge setter
   `display` selv, saa nettleserens egen [hidden]-regel taper — den maa
   gjentas med hoyere spesifisitet. */
.cms-preview[hidden],
.cms-editor[hidden] { display: none; }

.cms-preview-empty {
    align-self: center;
    margin: auto;
    text-align: center;
    color: var(--vl-text-muted);
    font-size: 0.86rem;
    line-height: 1.7;
    max-width: 320px;
}

/* Editorflate i scenen — artikler, sider, sponsorer, innstillinger. */
.cms-editor {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 1.6rem 1.8rem 3rem;
}
.cms-editor-inner { max-width: 1100px; margin: 0 auto; }
.cms-editor-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.4rem;
    flex-wrap: wrap;
}
.cms-editor-head h1 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    flex: 1;
    min-width: 0;
}
.cms-editor-sub {
    font-size: 0.85rem;
    color: var(--vl-text-muted);
    line-height: 1.6;
    margin: -0.9rem 0 1.4rem;
    max-width: 640px;
}

/* ── Responsivt ────────────────────────────────────────────── */

/* Under 992px er det ikke plass til skinne + panel + scene. Scenen viker:
   panelet er der arbeidet gjores, forhaandsvisningen er der for aa se
   resultatet — og den kan aapnes i ny fane med «Se paa nett». */
@media (max-width: 991.98px) {
    /* Under 992px er det ikke plass til aa dra i noe — kolonnene stables. */
    .cms-app { --cms-panel: 1fr; }
    .cms-body { grid-template-columns: var(--cms-rail) 1fr; }
    .cms-grip { display: none; }
    .cms-stage { display: none; }
    .cms-app.cms-app--stage .cms-panel { display: none; }
    .cms-app.cms-app--stage .cms-stage { display: flex; }
    .cms-editor { padding: 1.1rem 1rem 3rem; }
}

/* ── Dra og slipp ──────────────────────────────────────────── */

/* Handtaket er hele greie-ikonet, ikke raden: drar du fra teksten mister du
   muligheten til aa markere den. */
.cms-drag-handle { cursor: grab; }
.cms-drag-handle:active { cursor: grabbing; }

/* Raden som dras dempes framfor aa forsvinne — du skal fortsatt se HVA du
   flytter mens du leter etter plassen. */
.cms-dragging { opacity: 0.4; }

/* ── Bildevisning i scenen ─────────────────────────────────── */

.cms-media-full {
    display: block;
    max-width: 100%;
    max-height: 60vh;
    border-radius: var(--vl-radius-sm);
    border: 1px solid var(--vl-glass-border);
    background: rgba(255, 255, 255, 0.03);
}

/* ══════════════════════════════════════════
   DOKUMENTEDITOR — artikler og sider

   Teksten ligger på et ark, ikke i en boks. Innholdsfeltet er `.cms-content`,
   altså NØYAKTIG stilarket den publiserte artikkelen bruker — inline-editoren
   i `rich-text.js` legger ingen egen ramme rundt. Det du ser mens du skriver
   er det som kommer ut.

   Dokumentet ligger i SCENEN, med skinne og panel stående — så du bytter
   artikkel med ett klikk i lista. Editorens gamle kortstabel til høyre
   (Publisering, Metadata, Forsidebilde, Slett) er borte; feltene ligger i ett
   panel, og teksten har resten.
   ══════════════════════════════════════════ */

/* Dokumentet ligger i SCENEN, med skinne og panel stående. Første utgave
   skjulte dem og tok hele flata; det så ryddig ut og gikk tvers imot
   hensikten — uten lista må man ut og inn igjen for hvert bytte av artikkel.
   Se beslutning 185.

   Handlingene (publiser, lagre) legges i appens topbar gjennom luka
   `[data-actions]`, så det finnes én topbar og ett sted å lete etter «lagre». */

.cms-doc-host { flex: 1; min-height: 0; display: flex; }
.cms-doc-host[hidden] { display: none; }

.cms-doc {
    flex: 1;
    min-width: 0;
    display: flex;
    background: var(--vl-bg-dark);
}

/* ── Statusmerket i topbaren ───────────────────────────────────── */

.cms-doc-status {
    padding: 0.22rem 0.6rem;
    border-radius: 99px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.06);
    color: var(--vl-text-muted);
    border: 1px solid var(--vl-glass-border);
}
.cms-doc-status.is-published {
    background: rgba(0, 184, 148, 0.14);
    color: #6ee7c8;
    border-color: rgba(0, 184, 148, 0.35);
}

/* ── Ark og sidepanel ──────────────────────────────────────────── */

.cms-doc-body {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto var(--cms-doc-side);
    min-height: 0;
    min-width: 0;
}
.cms-doc--nosettings .cms-doc-body { grid-template-columns: 1fr; }
.cms-doc--nosettings .cms-doc-side,
.cms-doc--nosettings [data-grip-side] { display: none; }

.cms-doc-scroll {
    overflow-y: auto;
    min-height: 0;
    padding: 2.4rem 2rem 8rem;
}
.cms-doc-scroll::-webkit-scrollbar { width: 10px; }
.cms-doc-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 99px;
}

/* Arket har ingen bakgrunn, ramme eller skygge. Et «papir» med kant ville
   vært nok en boks — det er selve linjelengden som gjør flata til et ark. */
.cms-sheet {
    max-width: 720px;
    margin: 0 auto;
}

.cms-doc-title {
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    margin: 0 0 1.4rem;
    outline: none;
    color: var(--vl-text);
}

/* Tomt felt uten hint ser ut som noe som ikke virker. Samme mønster som
   resten av contenteditable-feltene — se docs/design/interaksjon.md. */
.cms-doc-title:empty::before,
.cms-rt:empty::before {
    content: attr(data-placeholder);
    color: var(--vl-text-muted);
    opacity: 0.45;
    pointer-events: none;
}

.cms-rt {
    outline: none;
    min-height: 40vh;
}
/* TinyMCE setter sin egen fokusramme på inline-elementet. Den tegner nettopp
   den boksen vi ble kvitt. */
.cms-rt.mce-edit-focus,
.cms-rt:focus,
.cms-rt:focus-visible { outline: none; }

.cms-doc-side {
    background: var(--cms-chrome-2);
    border-left: 1px solid var(--vl-glass-border);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cms-doc-error { margin: 2rem; }

/* ── «/»-menyen ────────────────────────────────────────────────── */

.cms-slash {
    position: fixed;
    z-index: 1400;
    width: 268px;
    max-height: 320px;
    overflow-y: auto;
    padding: 0.35rem;
    border-radius: var(--vl-radius-sm);
    background: var(--cms-chrome-2);
    border: 1px solid var(--vl-glass-border);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}
.cms-slash::-webkit-scrollbar { width: 8px; }
.cms-slash::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 99px;
}

.cms-slash-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.45rem 0.5rem;
    border: none;
    background: none;
    border-radius: var(--vl-radius-xs);
    color: var(--vl-text);
    text-align: left;
    font-size: 0.85rem;
}
.cms-slash-item:hover,
.cms-slash-item.active { background: rgba(0, 206, 201, 0.12); }

.cms-slash-icon {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.06);
    color: var(--vl-text-muted);
}
.cms-slash-item.active .cms-slash-icon { color: var(--vl-accent); }

.cms-slash-body { flex: 1; min-width: 0; display: block; }
.cms-slash-label { display: block; font-weight: 500; }
.cms-slash-hint {
    display: block;
    font-size: 0.7rem;
    color: var(--vl-text-muted);
    margin-top: 0.05rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Smal skjerm ───────────────────────────────────────────────── */

@media (max-width: 991.98px) {
    .cms-doc-body { grid-template-columns: 1fr; }
    .cms-doc [data-grip-side] { display: none; }
    .cms-doc-side {
        border-left: none;
        border-top: 1px solid var(--vl-glass-border);
        max-height: 45vh;
    }
    .cms-doc-scroll { padding: 1.6rem 1rem 4rem; }
    .cms-doc-title { font-size: 1.6rem; }
}

/* ── Knapper i appens krom ─────────────────────────────────────
   Bootstrap-knappene er bygget for skjemaer og innholdsflater: høy, luftig,
   med gradient på den primære. Ved siden av `.cms-tool` og `.cms-rail-btn`
   — 30 og 36px, flate og dempede — ble de klumper i topbaren.

   `.cms-btn` er samme knapp i appens målestokk. Den gjelder KROMMET:
   topbaren og panelfoten. Skjemaer inne i scenen bruker fortsatt
   designsystemets vanlige knapper, for der er de innhold, ikke verktøy. */

.cms-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    height: 28px;
    padding: 0 0.65rem;
    border: 1px solid var(--vl-glass-border);
    background: none;
    border-radius: 6px;
    color: var(--vl-text-muted);
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    transition: all 0.14s;
}
.cms-btn:hover {
    background: var(--vl-glass);
    color: var(--vl-text);
    border-color: rgba(255, 255, 255, 0.16);
}
.cms-btn i { font-size: 0.72rem; }

/* Flat, ikke gradient. Gradienten trekker blikket til seg hele tiden, og
   «lagre» er en knapp man bruker ofte og bør slutte å legge merke til. */
.cms-btn--primary {
    background: var(--vl-primary);
    border-color: var(--vl-primary);
    color: #fff;
}
.cms-btn--primary:hover {
    background: var(--vl-primary-hover);
    border-color: var(--vl-primary-hover);
    color: #fff;
}
.cms-btn--primary:disabled { opacity: 0.55; }

.cms-btn--danger {
    color: #e07070;
    border-color: rgba(224, 112, 112, 0.35);
}
.cms-btn--danger:hover {
    background: rgba(224, 112, 112, 0.1);
    color: #f0a48f;
    border-color: rgba(224, 112, 112, 0.5);
}

.cms-panel-foot .cms-btn { flex: 1; justify-content: center; }

/* ══════════════════════════════════════════
   BLOKKEDITOREN — Editor.js på arket

   Editor.js har sitt eget lyse standardutseende og sin egen kolonnebredde.
   Her legges det om til appens: mørkt, vår typografi, og arkets bredde.

   Verdiene speiler `content.css` bevisst. Editor.js rendrer ikke `<p>` for
   avsnitt (den bruker `.ce-paragraph`), så `.cms-content p` treffer ikke —
   reglene må gjentas. Endrer du typografien i content.css, endre her også.
   ══════════════════════════════════════════ */

.cms-blocks .codex-editor { color: var(--vl-text); }

/* Arket bestemmer bredden, ikke editoren. Standard er 650px sentrert, som
   ville gitt en kolonne inne i kolonnen vår. */
.cms-blocks .ce-block__content,
.cms-blocks .ce-toolbar__content { max-width: none; }

.cms-blocks .codex-editor__redactor { padding-bottom: 12rem; }

/* ── Blokkene, som publisert ───────────────────────────────── */

.cms-blocks .ce-block { line-height: 1.7; font-size: 0.95rem; }

.cms-blocks .ce-paragraph {
    margin: 0 0 1em;
    line-height: 1.7;
}

.cms-blocks h2.ce-header {
    font-size: 1.35rem;
    margin: 1.8em 0 0.5em;
    font-weight: 700;
    color: var(--vl-text);
}
.cms-blocks h3.ce-header {
    font-size: 1.15rem;
    margin: 1.5em 0 0.5em;
    font-weight: 600;
    color: var(--vl-text);
}
.cms-blocks .ce-block:first-child h2.ce-header,
.cms-blocks .ce-block:first-child h3.ce-header { margin-top: 0; }

.cms-blocks .cdx-list {
    margin: 0 0 1em;
    padding-left: 1.5em;
}
.cms-blocks .cdx-list__item { padding: 0.1em 0; line-height: 1.7; }

.cms-blocks .cdx-quote,
.cms-blocks .cdx-quote__text {
    border-left: 3px solid var(--vl-primary);
    padding-left: 1em;
    font-style: italic;
    color: var(--vl-text-muted);
}
.cms-blocks .cdx-quote__caption {
    font-style: normal;
    font-size: 0.85rem;
    color: var(--vl-text-muted);
    padding-left: 1em;
}

.cms-blocks a { color: var(--vl-primary); text-decoration: underline; }
.cms-blocks a:hover { color: var(--vl-accent); }

.cms-blocks .ce-code__textarea,
.cms-blocks .cdx-input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius-xs);
    color: var(--vl-text);
    font-size: 0.88rem;
}
.cms-blocks .ce-code__textarea {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    min-height: 120px;
}

.cms-blocks .ce-delimiter::before {
    content: "";
    display: block;
    height: 1px;
    background: var(--vl-glass-border);
    margin: 1.6em 0;
}
.cms-blocks .ce-delimiter { line-height: 0; }

.cms-blocks .tc-wrap {
    --color-border: var(--vl-glass-border);
    --color-background: rgba(255, 255, 255, 0.03);
    color: var(--vl-text);
}
.cms-blocks .tc-cell { border-color: var(--vl-glass-border); }

/* Rå HTML: markup vi ikke har en blokktype for. Merket, så det er tydelig at
   den ikke oppfører seg som resten. */
.cms-blocks .ce-rawtool__textarea {
    background: rgba(225, 112, 85, 0.06);
    border: 1px solid rgba(225, 112, 85, 0.25);
    border-radius: var(--vl-radius-xs);
    color: var(--vl-text);
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.8rem;
}

/* ── Editorens eget krom ───────────────────────────────────── */

.cms-blocks .ce-toolbar__plus,
.cms-blocks .ce-toolbar__settings-btn {
    color: var(--vl-text-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
}
.cms-blocks .ce-toolbar__plus:hover,
.cms-blocks .ce-toolbar__settings-btn:hover {
    background: var(--vl-glass);
    color: var(--vl-text);
    border-color: var(--vl-glass-border);
}

.cms-blocks .ce-inline-toolbar {
    background: var(--cms-chrome-2);
    border: 1px solid var(--vl-glass-border);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    color: var(--vl-text);
}
.cms-blocks .ce-inline-tool { color: var(--vl-text); }
.cms-blocks .ce-inline-tool:hover { background: var(--vl-glass); }

.cms-blocks .ce-block--selected .ce-block__content {
    background: rgba(0, 206, 201, 0.08);
    border-radius: var(--vl-radius-xs);
}

.cms-blocks .ce-stub {
    background: rgba(225, 112, 85, 0.08);
    border: 1px solid rgba(225, 112, 85, 0.25);
    border-radius: var(--vl-radius-xs);
    color: var(--vl-text-muted);
}

/* ── Våre egne blokker ─────────────────────────────────────── */

/* ── Bildeblokka ──
   Oppsettet vises i ARKET, ikke bare på den publiserte sida. Klassene speiler
   `.fig--*` i `content.css`; ser man ikke forskjellen der man redigerer, må
   man publisere for å sjekke. */

.cms-block-image { position: relative; margin: 0.6em 0; }
.cms-block-image.is-medium { max-width: 60%; margin-inline: auto; }
.cms-block-image.is-left,
.cms-block-image.is-right { max-width: 42%; }
.cms-block-image.is-left { float: left; margin: 0.3em 1.5em 0.8em 0; }
.cms-block-image.is-right { float: right; margin: 0.3em 0 0.8em 1.5em; }

/* Editor.js gir hver blokk sin egen rad. En float som ikke lukkes ville
   ligget over blokka under mens man redigerer. */
.cms-blocks .ce-block::after { content: ""; display: table; clear: both; }

.cms-block-image img {
    display: block;
    max-width: 100%;
    border-radius: var(--vl-radius);
}
.cms-block-image .cms-block-caption {
    margin-top: 0.5em;
    font-size: 0.85rem;
    color: var(--vl-text-muted);
    outline: none;
}
.cms-block-image .cms-block-caption:empty::before {
    content: attr(data-placeholder);
    opacity: 0.45;
}
.cms-block-change {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.6rem;
    border: none;
    border-radius: 99px;
    background: rgba(10, 14, 23, 0.82);
    color: var(--vl-text);
    font-size: 0.72rem;
    opacity: 0;
    transition: opacity 0.15s;
}
.cms-block-image:hover .cms-block-change { opacity: 1; }

/* ── Innbyggingsblokka ──
   Kort, ikke levende ramme: se toppen av `EmbedTool` i `block-editor.js`. */

.cms-block-embed { position: relative; margin: 0.6em 0; }

.cms-block-embed .cms-input { width: 100%; }
.cms-block-embed .cms-input.is-invalid { border-color: #e17055; }

.cms-block-embed-hint {
    margin: 0.45rem 0 0;
    font-size: 0.78rem;
    color: var(--vl-text-muted);
    line-height: 1.5;
}

.cms-block-embed-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem;
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius-sm);
    background: rgba(255, 255, 255, 0.03);
}

.cms-block-embed-thumb {
    width: 116px;
    height: 66px;
    flex-shrink: 0;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.05);
    display: grid;
    place-items: center;
}
.cms-block-embed-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cms-block-embed-mark { font-size: 1.6rem; }

.cms-block-embed-meta { min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.cms-block-embed-meta strong {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.86rem;
    color: var(--vl-text);
}
.cms-block-embed-meta code {
    font-size: 0.72rem;
    color: var(--vl-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cms-block-embed-meta span { font-size: 0.74rem; color: var(--vl-text-muted); }

/* Utsnittet kan endres uten aa hente en ny lenke — koordinatene ligger i
   blokka, og serveren regner ut boksen. */
.cms-block-embed-zoom {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.2rem;
    font-size: 0.74rem;
    color: var(--vl-text-muted);
}
.cms-block-embed-zoom select {
    height: 26px;
    padding: 0 0.4rem;
    font-size: 0.76rem;
    width: auto;
}

.cms-block-embed .cms-block-caption {
    margin-top: 0.5em;
    font-size: 0.85rem;
    color: var(--vl-text-muted);
    outline: none;
}
.cms-block-embed .cms-block-caption:empty::before {
    content: attr(data-placeholder);
    opacity: 0.45;
}
.cms-block-embed:hover .cms-block-change { opacity: 1; }

.cms-block-pick {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 2rem;
    border: 1px dashed var(--vl-glass-border);
    background: none;
    border-radius: var(--vl-radius-sm);
    color: var(--vl-text-muted);
    font-size: 0.86rem;
    transition: all 0.15s;
}
.cms-block-pick:hover {
    border-color: rgba(0, 206, 201, 0.4);
    color: var(--vl-accent);
    background: rgba(0, 206, 201, 0.05);
}

.cms-block-poll {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    border: 1px dashed rgba(232, 67, 147, 0.35);
    border-radius: var(--vl-radius-sm);
    background: rgba(232, 67, 147, 0.06);
    font-size: 0.86rem;
}
.cms-block-poll > i { color: #e84393; }
.cms-block-poll select { flex: 1; }

/* ── Draghåndtak mellom kolonnene ──────────────────────────────
   Et eget element mellom to kolonner, ikke en kant på den ene: en kant må
   treffes på to piksler, et håndtak på seks får man tak i. Selve streken er
   like tynn som før — det er treffområdet som er bredere. */

.cms-grip {
    width: 6px;
    cursor: col-resize;
    background: transparent;
    border: none;
    padding: 0;
    position: relative;
    flex-shrink: 0;
}
.cms-grip::before {
    content: "";
    position: absolute;
    inset: 0 2px;
    background: var(--vl-glass-border);
    transition: background 0.15s;
}
.cms-grip:hover::before,
.cms-grip:focus-visible::before { background: rgba(0, 206, 201, 0.55); }
.cms-grip:focus-visible { outline: none; }

/* Mens man drar: ingen tekstmarkering, og col-resize over hele skjermen —
   ellers bytter markøren så snart musa forlater det smale håndtaket. */
body.cms-resizing { cursor: col-resize; user-select: none; }
body.cms-resizing iframe { pointer-events: none; }

/* ══════════════════════════════════════════
   Blokkmenyen

   Den SYNLIGE flata er `.ce-popover__container`. `.ce-popover` er bare en
   posisjoneringsramme; styler man den, blir den mørk mens den hvite boksen
   står uendret oppå. Det er den fella som gjorde menyen lys første gang.

   Menyen er det man møter hver gang man setter inn noe, så den er verdt å
   gjøre ordentlig: ikonet i en tonet firkant som i resten av appen, tydelig
   markert rad, og et søkefelt som ser ut som våre andre søkefelt.
   ══════════════════════════════════════════ */

.cms-blocks .ce-popover__container {
    background: var(--cms-chrome-2);
    border: 1px solid var(--vl-glass-border);
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
    color: var(--vl-text);
    padding: 6px;
    min-width: 260px;
}

.cms-blocks .ce-popover__items { padding: 0; }

.cms-blocks .ce-popover-item {
    padding: 6px;
    border-radius: 8px;
    gap: 0.65rem;
}

.cms-blocks .ce-popover-item__title {
    color: var(--vl-text);
    font-size: 0.86rem;
    font-weight: 600;
}
.cms-blocks .ce-popover-item__secondary-title {
    color: var(--vl-text-muted);
    font-size: 0.72rem;
}

/* Ikonet: tonet firkant, som `.stat-card i` og `.hub-tile i` ellers i appen. */
.cms-blocks .ce-popover-item__icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--vl-glass-border);
    color: var(--vl-text-muted);
    box-shadow: none;
    display: grid;
    place-items: center;
    font-size: 0.82rem;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.cms-blocks .ce-popover-item__icon svg { width: 15px; height: 15px; }

.cms-blocks .ce-popover-item:hover:not(.ce-popover-item--no-hover),
.cms-blocks .ce-popover-item--focused:not(.ce-popover-item--no-focus) {
    background: rgba(0, 206, 201, 0.1) !important;
}
.cms-blocks .ce-popover-item:hover .ce-popover-item__icon,
.cms-blocks .ce-popover-item--focused .ce-popover-item__icon {
    background: rgba(0, 206, 201, 0.16);
    border-color: rgba(0, 206, 201, 0.35);
    color: var(--vl-accent);
}

.cms-blocks .ce-popover-item--active { background: rgba(0, 206, 201, 0.16); }
.cms-blocks .ce-popover-item--confirmation { background: rgba(225, 112, 85, 0.16); }
.cms-blocks .ce-popover-item--confirmation .ce-popover-item__icon {
    background: rgba(225, 112, 85, 0.18);
    border-color: rgba(225, 112, 85, 0.4);
    color: #e17055;
}

.cms-blocks .ce-popover-item-separator__line {
    background: var(--vl-glass-border);
    margin: 4px 6px;
}

/* Søkefeltet skal kjennes igjen fra søkefeltene i panelene. */
.cms-blocks .ce-popover__search,
.cms-blocks .cdx-search-field {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--vl-glass-border);
    border-radius: 8px;
    color: var(--vl-text);
    margin-bottom: 6px;
    padding: 2px 8px;
}
.cms-blocks .cdx-search-field__input {
    color: var(--vl-text);
    font-size: 0.85rem;
    padding: 5px 0;
}
.cms-blocks .cdx-search-field__input::placeholder { color: #5f6b76; }
.cms-blocks .cdx-search-field__icon svg { color: var(--vl-text-muted); width: 14px; height: 14px; }

.cms-blocks .ce-popover__nothing-found-message {
    color: var(--vl-text-muted);
    font-size: 0.84rem;
    padding: 0.7rem 0.4rem;
}

/* Den flytende linja over et utvalg bruker samme popover-struktur, men skal
   være tett — der er ikonene knapper, ikke rader i en liste. */
.cms-blocks .ce-popover--inline .ce-popover__container {
    background: var(--cms-chrome-2);
    border-color: var(--vl-glass-border);
    min-width: 0;
}
.cms-blocks .ce-inline-toolbar .ce-popover__container { padding: 4px; }

/* ── Repeater: lister man kan legge til og fjerne i ────────────
   Kortene under «Om LAN-et» og tallene i stripa. Alternativet var ett
   tekstfelt med JSON i — som ville krevd at redaktøren skriver syntaks, og
   at én glemt komma tømmer seksjonen. */

.cms-repeat { display: flex; flex-direction: column; gap: 0.5rem; }

.cms-repeat-row {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 0.5rem;
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius-xs);
    background: rgba(255, 255, 255, 0.02);
}
.cms-repeat-grip {
    color: var(--vl-text-muted);
    opacity: 0.3;
    font-size: 0.7rem;
    margin-top: 0.5rem;
    flex-shrink: 0;
}
.cms-repeat-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}
.cms-repeat-fields .cms-input { flex: 1 1 100%; min-width: 0; }

.cms-repeat-del {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 0.35rem;
    border: none;
    background: none;
    border-radius: 5px;
    font-size: 0.72rem;
    color: var(--vl-text-muted);
    opacity: 0.5;
    transition: all 0.14s;
}
.cms-repeat-del:hover { opacity: 1; color: #e07070; background: rgba(224, 112, 112, 0.1); }

/* ══════════════════════════════════════════════════════════════════════
   Galleri-editoren — scenen i CMS-et
   ══════════════════════════════════════════════════════════════════════

   Rutenettet som VISES kommer fra `.gallery-*` i components.css. Det som
   ligger her er redigeringen: dropzone, kø, forsidemerke og feltene rundt.
   Skillet er med vilje — endrer noen rutestørrelsen på nettstedet, skal
   forhåndsvisningen følge med av seg selv. */

/* Miniatyr i stedet for ikon i en panelrad. En liste over album der alle
   radene har samme ikon sier ingenting om hva som ligger i hvilket. */
.cms-row-icon--img {
    background-size: cover;
    background-position: center;
    background-color: var(--vl-bg-elevated);
}

.gal-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.gal-bar-spacer { flex: 1; }

.gal-count { margin: 0; white-space: nowrap; }

/* Synlighet som tre knapper og ikke et nedtrekk: valget er det viktigste på
   flaten, og et nedtrekk skjuler to av tre alternativer bak et klikk. */
.gal-vis {
    display: inline-flex;
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius-sm);
    overflow: hidden;
}

.gal-vis-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    background: none;
    border: none;
    border-right: 1px solid var(--vl-glass-border);
    color: var(--vl-text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.gal-vis-btn:last-child { border-right: none; }
.gal-vis-btn:hover { background: var(--vl-glass); color: var(--vl-text); }

.gal-vis-btn.active {
    background: color-mix(in srgb, var(--vl-primary) 20%, transparent);
    color: var(--vl-text);
}

.gal-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.gal-field-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.gal-field-row .gal-field { flex: 1 1 200px; }

.gal-field { display: block; }

.gal-field > span {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    color: var(--vl-text-muted);
}

.gal-field input,
.gal-field textarea {
    width: 100%;
    padding: 0.4rem 0.6rem;
    background: var(--vl-glass);
    border: 1px solid var(--vl-glass-border);
    border-radius: var(--vl-radius-sm);
    color: var(--vl-text);
    font-size: 0.85rem;
    resize: vertical;
}

.gal-field input:focus,
.gal-field textarea:focus {
    outline: none;
    border-color: var(--vl-primary);
}

.gal-field-note {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.72rem;
    color: var(--vl-text-muted);
}

/* Dropområdet ligger RUNDT rutenettet, ikke over det. Med 40 bilder i albumet
   er en stripe i toppen noe man må sikte på for å legge til det 41.

   I hvile er den usynlig — en stiplet ramme rundt hele albumet hele tiden ville
   vært et kart over noe man sjelden gjør. Rammen kommer først når en fil
   faktisk henger over flata. */
.gal-drop-area {
    position: relative;
    border: 1px dashed transparent;
    border-radius: var(--vl-radius);
    padding: 0.5rem;
    margin: 0 -0.5rem;
    transition: border-color 0.15s, background 0.15s;
}

.gal-drop-area--over {
    border-color: var(--vl-primary);
    background: color-mix(in srgb, var(--vl-primary) 8%, transparent);
}

/* Teksten vises bare når albumet er tomt. Med bilder i er rutenettet selv
   målet, og en instruksjon under 40 ruter er en instruksjon ingen leser. */
.gal-drop-hint { display: none; }

.gal-drop-area--empty {
    border-color: var(--vl-glass-border);
    padding: 2.5rem 1rem;
}

.gal-drop-area--empty .gal-drop-hint {
    display: block;
    text-align: center;
}

.gal-drop-hint i {
    font-size: 2.5rem;
    color: var(--vl-primary);
    margin-bottom: 0.75rem;
    display: block;
}

.gal-drop-hint p { margin-bottom: 0.5rem; }

.gal-drop-hint small {
    color: var(--vl-text-muted);
    font-size: 0.8rem;
}

/* «velg filer» midt i setningen. En knapp og ikke en lenke — den navigerer
   ikke noe sted, den åpner en filvelger. */
.gal-drop-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--vl-primary);
    text-decoration: underline;
    cursor: pointer;
}

.gal-drop-link:hover { color: var(--vl-primary-hover); }

/* Mens en fil henger over albumet skal rutene ikke ta imot pekeren — ellers
   kan slippet lande på en enkelt rute i stedet for på området. */
.gal-drop-area--over .gal-item { pointer-events: none; }

/* Køen. Hver fil får sin egen rad, og en rad som feilet blir STÅENDE — en
   toast som forsvinner etter fire sekunder er feil sted for «disse tre filene
   kom ikke med», for man trenger å lese navnene. */
.gal-queue {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-bottom: 1.25rem;
    font-size: 0.8rem;
}

.gal-q {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.3rem 0.6rem;
    background: var(--vl-glass);
    border-radius: var(--vl-radius-xs);
}

.gal-q-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--vl-text-muted);
}

.gal-q-state {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--vl-text-muted);
    text-align: right;
}

.gal-q-state--ok { color: #00b894; }
.gal-q-state--error { color: #e17055; }

.gal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.6rem;
}

.gal-item {
    margin: 0;
    border-radius: var(--vl-radius-sm);
    background: var(--vl-glass);
    border: 1px solid transparent;
    overflow: hidden;
    cursor: grab;
}

.gal-item--cover { border-color: var(--vl-primary); }

.gal-item--dragging { opacity: 0.4; }

.gal-thumb {
    position: relative;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    background-color: var(--vl-bg-elevated);
    cursor: zoom-in;
}

.gal-thumb--blank { background: repeating-linear-gradient(45deg, var(--vl-bg-elevated), var(--vl-bg-elevated) 8px, var(--vl-bg-tertiary) 8px, var(--vl-bg-tertiary) 16px); }

.gal-badge {
    position: absolute;
    top: 5px;
    left: 5px;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--vl-primary);
    color: #fff;
    font-size: 0.65rem;
}

.gal-item figcaption {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.3rem 0.3rem;
}

.gal-caption {
    flex: 1;
    min-width: 0;
    padding: 0.15rem 0.25rem;
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    color: var(--vl-text);
    font-size: 0.75rem;
}

.gal-caption::placeholder { color: var(--vl-text-muted); opacity: 0.6; }

.gal-caption:focus {
    outline: none;
    border-bottom-color: var(--vl-primary);
}

.gal-item-acts {
    display: flex;
    gap: 0.1rem;
    flex-shrink: 0;
}

.gal-act {
    padding: 0.2rem 0.3rem;
    background: none;
    border: none;
    color: var(--vl-text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: var(--vl-radius-xs);
}

.gal-act:hover { background: var(--vl-glass); color: var(--vl-text); }
.gal-act--danger:hover { color: #e17055; }

.gal-hint,
.gal-blank { margin-top: 0.75rem; }

/* Sletting av hele albumet står nederst, med luft over. Det er den ene
   ugjenkallelige handlingen på flaten, og den skal ikke ligge ved siden av
   noe man gjør ofte. */
.gal-danger {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--vl-glass-border);
}

/* Merknaden under galleri-velgeren i blokkeditoren: «dette er et utkast —
   leserne ser det ikke ennå». */
.cms-block-note {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.75rem;
    color: #e6a23c;
}

@media (max-width: 575.98px) {
    .gal-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
}