/* AI-selvportrett — Arkiv og Scene (Lialina-inspirert)
   Minimal, svart/hvitt, 1px rammer. Ingen moderne ornament.
*/
* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  color: #fff;
  /* Fixed cinematic viewport: no page-level scrolling */
  overflow: hidden;
}
a { color: #fff; text-decoration: underline; }
a:focus { outline: 1px dotted #fff; outline-offset: 2px; }

#controls {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 36px;
  border-bottom: 1px solid #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px;
  background: #000;
  z-index: 10;
}
#controls .title { font-size: 12px; letter-spacing: .2px; }
#controls .actions a { font-size: 12px; }

#archive {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  min-height: 40px;
  border-top: 1px solid #fff;
  background: #000;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px;
  padding: 6px 8px;
  z-index: 9;
}
#archive .label {
  font-size: 10px;
  line-height: 1;
  opacity: .9;
  padding-top: 3px;
}
#archive .entries {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: thin;
}
#archive .entries a {
  font-size: 11px;
  white-space: nowrap;
  border: 1px solid #fff;
  padding: 2px 4px;
  text-decoration: none;
}
#archive .entries a:hover { background: #111; }

#scene {
  position: fixed;
  top: 36px; /* under header */
  bottom: 40px; /* over arkiv */
  left: 0; right: 0;
  padding: 6px;
  /* Fixed cinematic viewport: keep scene in one visual room */
  overflow: hidden;

  /* GRID STAGE: Use the whole viewport as a living grid.
     - All panels become grid items (flattened by JS after each split)
     - repeat(auto-fit, minmax(...)) spreads items evenly and fills width
     - dense packing ensures gradual, spatial expansion across the scene */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-rows: minmax(160px, 1fr);
  grid-auto-flow: dense;
  gap: 0; /* 1px panel borders act as the visual separators */
}

/* Panel og splitting */
.panel, .split {
  width: 100%;
  height: 100%;
}

.panel {
  border: 1px solid #fff;
  padding: 8px;
  position: relative;
  overflow: auto;

  /* Allow grid tracks to size freely without being pushed by content */
  min-width: 0;
  min-height: 0;
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 0; /* rammene står for separasjon */
}

/* Subtle organic variation hooks for the global grid mode:
   JS may add these to let some cells breathe without breaking balance. */
.panel.span2x { grid-column: span 2; }
.panel.span2y { grid-row: span 2; }

/* Tekst rytme */
.panel p {
  margin: 0 0 8px 0;
  font-size: 13px;
  line-height: 1.35;
}
.panel img, .panel video, .panel figure {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 8px 0;
  image-rendering: pixelated; /* lavoppløselig følelse */
}

/* Inline ramme (ramme-i-rammen) */
.inline-frame {
  position: absolute;
  top: 8px; right: 8px;
  max-width: min(60%, 340px);
  border: 1px solid #fff;
  padding: 6px;
  background: #000;
  z-index: 2;
}
.inline-frame .close {
  position: absolute;
  top: -1px; right: -1px;
  transform: translateY(-100%);
  font-size: 11px;
  border: 1px solid #fff;
  padding: 1px 4px;
  line-height: 1.1;
  background: #000;
  text-decoration: none;
}

/* Erosjon (eldre paneler) */
.panel.aged {
  filter: grayscale(1) contrast(.85) brightness(.95);
}
.panel.aged img {
  filter: grayscale(1) contrast(.9) brightness(.95);
}

/* Stillhet (frosne paneler) — ro i rasteret uten nye interaksjoner
   - JS setter data-lock="1" og klasse .frozen
   - Vi demper kontrast/lys og skrur av pekehendelser for å markere stillhet
   - Fortellingen bruker dette som “pust” i den romlige dramaturgien */
.panel.frozen {
  filter: grayscale(1) contrast(.75) brightness(.90);
  pointer-events: none; /* ingen nye klikk/lenker */
  cursor: default;
}
.panel.frozen::after {
  content: 'still';
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-size: 10px;
  opacity: .55;
}

/* Glemsel/overlagring (fade out av tekst) — dramaturgisk oppløsning
   - .fadeout: glir mot 0 i opacity over 1s (JS legger til/trekker fra klassen)
   - .void: tom, stille rute som blir stående som romlig minne */
.panel.fadeout { 
  opacity: 0; 
  transition: opacity 1s ease; 
}
.panel.void {
  /* behold svart; rammen forteller at noe var her */
  background: #000;
}

/* Affiche (sammendrag) */
.panel.affiche {
  border-style: dashed;
}
.panel.affiche h2 {
  font-size: 12px;
  margin: 0 0 6px 0;
  font-weight: normal;
}
.panel.affiche .lines {
  font-size: 12px;
  line-height: 1.3;
  white-space: pre-wrap;
}

/* Scrollbar aesthetics (minimal, monochrome) */
.panel,
#archive .entries,
.inline-frame {
  scrollbar-gutter: stable;
}

/* Firefox */
.panel,
#archive .entries,
.inline-frame {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.28) transparent;
}

/* WebKit (Chrome/Safari/Edge) */
.panel::-webkit-scrollbar,
#archive .entries::-webkit-scrollbar,
.inline-frame::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
.panel::-webkit-scrollbar-track,
#archive .entries::-webkit-scrollbar-track,
.inline-frame::-webkit-scrollbar-track {
  background: transparent;
}
.panel::-webkit-scrollbar-thumb,
#archive .entries::-webkit-scrollbar-thumb,
.inline-frame::-webkit-scrollbar-thumb {
  background-color: rgba(255,255,255,.28);
  border-radius: 6px;
}
.panel::-webkit-scrollbar-thumb:hover,
#archive .entries::-webkit-scrollbar-thumb:hover,
.inline-frame::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255,255,255,.45);
}

/* Små skjermer */
@media (max-width: 720px) {
  #controls { height: 34px; }
  #scene { top: 34px; }
  .split { grid-template-columns: 1fr; grid-auto-rows: auto; }
}