/* ==========================================================================
   ORGANISK (21. oktober 2026)

   Lista over Reels og redigeringen av én. Tokens fra lodd-tokens.css. Videoen
   vises i 9:16, som den blir på Instagram, så en firkantet video ser ut som
   den kommer til å se ut: med felt over og under.
   ========================================================================== */

#skjerm-organisk .org-side { display: flex; flex-direction: column; gap: var(--s-6); max-width: 1040px; }
#skjerm-organisk .org-hode { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5); }
#skjerm-organisk .org-hode h1 { margin: 0; overflow-wrap: anywhere; }
#skjerm-organisk .org-under,
#skjerm-organisk .org-hint,
#skjerm-organisk .org-tom { margin: 0; color: var(--ink-3); font-size: var(--t-3); line-height: var(--t-3-h); max-width: 64ch; }
#skjerm-organisk .org-feil { margin: 0; color: var(--rod); font-size: var(--t-3); line-height: var(--t-3-h); }
#skjerm-organisk .org-banner {
  margin: 0;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-3);
  background: var(--amber-svak);
  color: var(--ink);
  font-size: var(--t-3);
  line-height: var(--t-3-h);
}
#skjerm-organisk .org-tilbake { align-self: flex-start; color: var(--brand-tekst); font-size: var(--t-3); line-height: var(--t-3-h); text-decoration: none; min-height: var(--finger); display: inline-flex; align-items: center; }

#skjerm-organisk .org-gruppe h2 { display: flex; align-items: baseline; gap: var(--s-3); margin: 0 0 var(--s-3); font-size: var(--t-4); line-height: var(--t-4-h); font-weight: 500; }
#skjerm-organisk .org-tall { color: var(--ink-3); font-size: var(--t-2); }
#skjerm-organisk .org-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-3); background: var(--flate); }
#skjerm-organisk .org-liste li { border-bottom: 1px solid var(--line); }
#skjerm-organisk .org-liste li:last-child { border-bottom: 0; }
#skjerm-organisk .org-rad {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "tittel hoyre" "under hoyre";
  gap: var(--s-1) var(--s-5);
  padding: var(--s-4) var(--s-5);
  min-height: var(--finger);
  color: inherit;
  text-decoration: none;
  transition: background-color var(--tid-2) var(--kurve);
}
@media (hover: hover) and (pointer: fine) {
  #skjerm-organisk .org-rad:hover { background: var(--flate-2); }
}
#skjerm-organisk .org-rad-tittel { grid-area: tittel; color: var(--ink); font-size: var(--t-4); line-height: var(--t-4-h); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#skjerm-organisk .org-rad-under { grid-area: under; color: var(--ink-3); font-size: var(--t-3); line-height: var(--t-3-h); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#skjerm-organisk .org-rad-hoyre { grid-area: hoyre; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: var(--s-2); }
#skjerm-organisk .org-tid { color: var(--ink-3); font-size: var(--t-2); line-height: var(--t-2-h); }
#skjerm-organisk .org-format {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--s-3);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--t-1);
  line-height: var(--t-1-h);
  background: var(--flate-3);
  color: var(--ink-3);
}
#skjerm-organisk .org-format.ok { background: var(--gronn-svak); color: var(--gronn); }
#skjerm-organisk .org-format.ikke { background: var(--amber-svak); color: var(--amber); }

/* Redigeringen: videoen til venstre i 9:16, feltene til høyre. */
#skjerm-organisk .org-rediger { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: var(--s-7); align-items: start; }
#skjerm-organisk .org-videokolonne { display: flex; flex-direction: column; gap: var(--s-4); position: sticky; top: var(--s-5); }
#skjerm-organisk .org-video {
  aspect-ratio: 9 / 16;
  width: 100%;
  border-radius: var(--r-3);
  background: var(--skjerm);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#skjerm-organisk .org-video video { width: 100%; height: 100%; object-fit: contain; background: var(--skjerm); }
#skjerm-organisk .org-video.tom span { color: var(--ink-3); font-size: var(--t-3); }
#skjerm-organisk .org-formattekst { margin: 0; font-size: var(--t-3); line-height: var(--t-3-h); color: var(--ink-3); }
#skjerm-organisk .org-formattekst.ok { color: var(--gronn); }
#skjerm-organisk .org-formattekst.ikke { color: var(--amber); }
#skjerm-organisk .org-last { align-self: flex-start; cursor: pointer; }
#skjerm-organisk .org-framdrift { height: var(--strek-tynn); border-radius: var(--r-1); background: var(--line-2); overflow: hidden; }
#skjerm-organisk .org-framdrift[hidden] { display: none; }
#skjerm-organisk .org-framdrift span { display: block; height: 100%; background: var(--brand-tekst); transform: scaleX(0); transform-origin: left; transition: transform var(--tid-2) linear; }

#skjerm-organisk .org-felter { display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
#skjerm-organisk .org-felt { display: flex; flex-direction: column; gap: var(--s-2); }
#skjerm-organisk .org-felt > span { display: flex; justify-content: space-between; gap: var(--s-3); color: var(--ink-2); font-size: var(--t-3); line-height: var(--t-3-h); font-weight: 500; }
#skjerm-organisk .org-felt em { font-style: normal; font-weight: 400; color: var(--ink-3); font-size: var(--t-2); }
#skjerm-organisk .org-felt input,
#skjerm-organisk .org-felt select,
#skjerm-organisk .org-felt textarea { width: 100%; min-height: var(--finger); }
#skjerm-organisk .org-felt textarea { resize: vertical; line-height: var(--t-4-h); }
#skjerm-organisk .org-to { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
#skjerm-organisk .org-ai { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); }
#skjerm-organisk .org-ai .org-felt { flex: 1; min-width: 220px; }

#skjerm-organisk .org-forslag { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-4); }
#skjerm-organisk .org-forslagkort {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: var(--flate);
}
#skjerm-organisk .org-forslag-hook { margin: 0; color: var(--ink); font-size: var(--t-4); line-height: var(--t-4-h); font-weight: 500; }
#skjerm-organisk .org-forslag-tekst { margin: 0; color: var(--ink-2); font-size: var(--t-3); line-height: var(--t-3-h); }
#skjerm-organisk .org-forslag-tagger { margin: 0; color: var(--brand-tekst); font-size: var(--t-2); line-height: var(--t-2-h); }
#skjerm-organisk .org-forslagkort .knapp { align-self: flex-start; margin-top: auto; }

#skjerm-organisk .org-knapper { display: flex; flex-wrap: wrap; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--line); }

@media (max-width: 799px) {
  #skjerm-organisk .org-rediger { grid-template-columns: 1fr; }
  #skjerm-organisk .org-videokolonne { position: static; max-width: 320px; }
  #skjerm-organisk .org-to { grid-template-columns: 1fr; }
}