/*!
 * zipfile-archive.css — flaten for «Del opp ZIP» og «Slå sammen ZIP».
 * Laget av ebizapple.no for zipfile.no.
 *
 * Denne fila lastes med wp_enqueue_style og gaar ALDRI gjennom Oxygens
 * CSS-importoer. @container, color-mix() og :has() er derfor fritt
 * tilgjengelig her, i motsetning til i designsystemet (se skillen § 5).
 */

.zt-verktoy:has([data-zipfile-tool='split']),
[data-zipfile-tool='split'],
[data-zipfile-tool='merge'] {
  container-type: inline-size;
}

/* --- skjult skal vaere skjult -------------------------------------------
 * [hidden] er en brukeragentregel og taper mot enhver forfatterregel som
 * setter display. Blokkene under er flex/grid, saa uten denne linjen ville
 * hele den trinnvise flyten staa aapen fra foerste sekund (skillen § 30). */
[data-zipfile-tool='split'] [hidden],
[data-zipfile-tool='merge'] [hidden] {
  display: none !important;
}

.zt-slippsone.er-over {
  border-color: var(--brand, #2563eb);
  background: color-mix(in srgb, var(--brand, #2563eb) 6%, var(--surface, #fff));
}

/* --- lista over arkiver -------------------------------------------------- */

.zt-ark-boks,
.zt-ark-innst {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.zt-ark-tittel {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink, #122033);
}

.zt-ark-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.zt-ark-rad {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px solid var(--line, #dce3ed);
  border-radius: var(--radius-sm, 12px);
  background: var(--surface, #fff);
}

.zt-ark-navn {
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
  color: var(--ink, #122033);
}

.zt-ark-meta {
  flex: 0 1 auto;
  font-size: 0.875rem;
  color: var(--ink-soft, #4a5a70);
  font-variant-numeric: tabular-nums;
}

/* Knappen i en rad skal ikke strekke seg over hele bredden naar raden brekker. */
.zt-ark-rad .zt-knapp,
.zt-ark-rad .zt-lenkeknapp {
  flex: 0 0 auto;
}

/* --- anslag og merknader ------------------------------------------------- */

.zt-ark-anslag {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  color: var(--ink-soft, #4a5a70);
  line-height: 1.55;
}

.zt-ark-merknad {
  margin: 12px 0 0;
  padding: 12px 16px;
  border-left: 3px solid var(--line, #dce3ed);
  background: var(--bg, #f7f9fc);
  border-radius: 0 var(--radius-sm, 12px) var(--radius-sm, 12px) 0;
  font-size: 0.9375rem;
  color: var(--ink-soft, #4a5a70);
  line-height: 1.55;
}

.zt-ark-eget {
  max-width: 12rem;
}

/* --- handlinger og varsler ----------------------------------------------
 * Definert her, ikke arvet fra zipfile-extract.css: modulene skal kunne
 * lastes hver for seg (briefen § 3). */

.zt-handlinger {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.zt-varsler {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.zt-fremdrift {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* --- resultat ------------------------------------------------------------ */

.zt-resultat {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 22px;
  border: 1px solid var(--line, #dce3ed);
  border-radius: var(--radius, 20px);
  background: var(--privacy-soft, #e7f6ef);
}

.zt-resultat.er-feil {
  background: var(--bg, #f7f9fc);
  border-color: color-mix(in srgb, #c0392b 35%, var(--line, #dce3ed));
}

.zt-resultat .zt-ark-rad {
  background: var(--surface, #fff);
}

/* --- smal spalte ---------------------------------------------------------
 * @container, ikke @media: verktoeyet skal oppfoere seg riktig ogsaa i en
 * smal sidekolonne, ikke bare paa en smal skjerm. */

@container (max-width: 30rem) {
  .zt-ark-rad {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .zt-ark-rad .zt-knapp,
  .zt-ark-rad .zt-lenkeknapp {
    align-self: stretch;
  }

  .zt-handlinger .zt-knapp {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zt-slippsone,
  .zt-ark-rad {
    transition: none;
  }
}