/* render.tnsn.ch. Baut auf ui.css von tnsn auf (Farben, Schriften, Knöpfe, Formulare)
   und legt nur das Eigene nach: Knoten, Verbindungen, Zeitleiste, Ausgabe, Tabellen. */

@font-face{
  font-family:"Hook Text";   /* die Schrift, in der das Tool den Hook ins Video setzt */
  src:url("font.php?f=bold") format("opentype");   /* nur für Angemeldete, siehe font.php */
  font-weight:700; font-display:block;
}

.page{ max-width:1600px; margin:0 auto; }
.page-header{ flex-wrap:wrap; gap:16px 32px; }

/* ── Anmeldung ──────────────────────────────────────────────────────────── */

.gate{ min-height:80vh; display:grid; place-content:center; gap:28px; padding:24px; }
.gate h1{ font-size:clamp(2.4rem,7vw,4rem); }
.gate-form{ display:grid; gap:16px; width:min(320px,86vw); }

/* ── Kopf: Zustand des Render-Macs ──────────────────────────────────────── */

.machine{ display:flex; align-items:center; gap:14px 22px; flex-wrap:wrap; }
.machine-state{ font-size:.9rem; color:var(--dim); max-width:34em; }
.machine-state.busy{ color:var(--fg); }
.machine .check{ font-size:.9rem; }

.tabs .tab{ text-transform:none; }
.tabs .tab-own{ color:var(--dim); }
.tabs .tab-own.active{ color:var(--fg); }
.notice{ margin:-8px 0 20px; color:var(--err); }
.test-copy{ margin:0 0 18px; padding:10px 14px; border:1px solid var(--err); color:var(--err); font-size:.9rem; }

/* ── Die Fläche ──────────────────────────────────────────────────────────── */

.graph{ position:relative; display:grid;
  grid-template-columns:300px minmax(560px,1fr) minmax(300px,420px);
  column-gap:64px; row-gap:18px; align-items:start;
  overflow-x:auto; padding:4px 4px 48px; }

.wires{ position:absolute; left:0; top:0; pointer-events:none; overflow:visible; }
.wires path{ fill:none; stroke:var(--line); stroke-width:1; }
.wires path.soft{ stroke:var(--line-soft); }

.sources{ grid-column:1; grid-row:1 / span var(--rows,2); display:grid; gap:18px; position:sticky; top:12px; }
.lane-head{ grid-column:2; grid-row:1; display:flex; align-items:center; justify-content:space-between; height:39px; }
.lane-head h2, .node-head h2{ font-family:var(--mono); font-size:.72rem; font-weight:400;
  letter-spacing:.16em; text-transform:lowercase; color:var(--dim); }

/* ── Knoten ──────────────────────────────────────────────────────────────── */

.node{ position:relative; background:var(--bg); border:1px solid var(--line); min-width:0; }
.node-head{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:38px; padding:0 14px; border-bottom:1px solid var(--line-soft); }
.node-meta{ font-size:.8rem; color:var(--faint); font-variant-numeric:tabular-nums; }
.node-hint{ padding:10px 14px 12px; font-size:.78rem; color:var(--faint); line-height:1.4; }

.port{ position:absolute; top:15px; width:7px; height:7px; background:var(--bg); border:1px solid var(--fg); }
.port-in{ left:-4px; }
.port-out{ right:-4px; }
.port-image{ top:auto; }

.files{ list-style:none; max-height:60vh; overflow-y:auto; }
.file{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:12px;
  padding:9px 14px; border-bottom:1px solid var(--line-soft); font-size:.86rem; line-height:1.3;
  overflow-wrap:anywhere; }
.thumb{ display:block; width:27px; aspect-ratio:1; background:
  repeating-conic-gradient(var(--line-soft) 0 25%, transparent 0 50%) 0 0 / 9px 9px; }

/* Videos: Schalter aktiv, Name mit Stand, Sterne */
.file.video{ grid-template-columns:auto 1fr auto; gap:10px; padding:8px 12px; }
.file.video .check{ padding:0; }
.file.held .video-name > span:first-child{ color:var(--dim); }
.video-name{ display:grid; gap:2px; min-width:0; }
.video-name > span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.video-stand{ font-size:.74rem; color:var(--faint); font-variant-numeric:tabular-nums; }
.stars{ display:flex; }
.stars button{ padding:0 1px; font-size:.9rem; line-height:1; color:var(--line); transition:color .15s var(--ease); }
.stars button.on{ color:var(--fg); }
.stars button:hover{ color:var(--dim); }

/* ── Hook ────────────────────────────────────────────────────────────────── */

.hook{ grid-column:2; }
.hook.draft{ border-style:dashed; }
.hook-state{ font-size:.8rem; color:var(--dim); font-variant-numeric:tabular-nums; text-align:right; }
.hook-state.error{ color:var(--err); }

.hook-body{ display:grid; grid-template-columns:1fr auto; gap:22px; padding:16px 14px 6px; }
.hook-fields{ display:grid; gap:14px; align-content:start; min-width:0; }
.hook-fields textarea{ resize:none; min-height:3.2em; line-height:1.35; }
.hook-row{ display:flex; align-items:flex-end; gap:18px; }
.hook-row .field{ flex:1 1 0; min-width:0; }
.hook-row .check{ padding-bottom:.45em; white-space:nowrap; }

.frame{ position:relative; width:150px; aspect-ratio:9/16; overflow:hidden;
  background:var(--panel); border:1px solid var(--line-soft); }
.frame-image, .frame-text{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
.frame-image{ width:74%; padding:10% 0; border:1px solid var(--line); text-align:center;
  font-size:.58rem; color:var(--dim); overflow-wrap:anywhere; }
.frame-text{ width:84%; text-align:center; white-space:pre; font-family:"Hook Text",var(--sans);
  font-weight:700; line-height:1.15; color:#fff; }
.frame-note{ margin-top:6px; width:150px; font-size:.72rem; color:var(--faint); line-height:1.35; }
.frame-note.error{ color:var(--err); }

.timeline{ padding:10px 14px 14px; }
.lane{ display:grid; grid-template-columns:3.2em 1fr 6.6em; align-items:center; gap:12px; height:30px; }
.lane-name{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; color:var(--dim); }
.lane-time{ font-size:.82rem; color:var(--dim); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.lane.off .lane-name, .lane.off .lane-time{ color:var(--faint); }
.track{ position:relative; height:14px; touch-action:none;
  background:linear-gradient(var(--line-soft),var(--line-soft)) 0 50% / 100% 1px no-repeat; }
.bar{ position:absolute; top:2px; bottom:2px; background:var(--fg); }
.lane[data-kind="image"] .bar{ background:
  repeating-linear-gradient(135deg, var(--fg) 0 1px, transparent 1px 5px); outline:1px solid var(--fg); outline-offset:-1px; }
.handle{ position:absolute; top:-4px; bottom:-4px; width:9px; margin-left:-4px; padding:0;
  background:var(--fg); border:1px solid var(--fg); cursor:ew-resize; touch-action:none; }
.handle.auto{ background:var(--bg); }
.scale{ display:grid; grid-template-columns:3.2em 1fr 6.6em; gap:12px; align-items:start; margin-top:2px; }
.scale label{ margin:0; padding-top:4px; }
.length{ display:flex; align-items:baseline; justify-content:flex-end; gap:.4em; font-size:.82rem; color:var(--dim); }
.length input{ width:2.6em; padding:.1em 0; font-size:.86rem; text-align:right; font-variant-numeric:tabular-nums; }
.scale-ticks{ position:relative; height:16px;
  background:repeating-linear-gradient(90deg, var(--line-soft) 0 1px, transparent 1px var(--tick)) 0 0 / 100% 5px no-repeat; }
.scale-ticks span{ position:absolute; top:7px; font-size:.7rem; color:var(--faint); font-variant-numeric:tabular-nums; }
.scale-ticks span + span{ right:0; }
.playhead{ position:absolute; top:-68px; bottom:11px; width:1px; background:var(--dim); pointer-events:none; }

.hook-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; border-top:1px solid var(--line-soft); }
.hook-foot .check{ padding:0; font-size:.86rem; }

/* ── Ausgabe ─────────────────────────────────────────────────────────────── */

.out-head{ grid-column:3; grid-row:1; }
.out-cols, .out-row{ display:grid; grid-template-columns:repeat(var(--videos),minmax(0,1fr)); gap:8px; }
.out-cols{ list-style:none; padding:10px 8px; }
.out-cols li{ font-size:.76rem; line-height:1.3; color:var(--dim); overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.out-row{ grid-column:3; position:relative; padding:0 8px; }
.out-row .port{ left:5px; }
.cell{ display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start;
  height:62px; padding:8px 9px; border:1px solid var(--line); font-variant-numeric:tabular-nums;
  transition:border-color .2s var(--ease), color .2s var(--ease); }
.cell-code{ font-size:.95rem; font-variation-settings:"wght" 620; }
.cell-note{ font-size:.72rem; color:var(--dim); }
.cell.open{ border-style:dashed; border-color:var(--line-soft); color:var(--faint); }
.cell.open .cell-note{ color:var(--faint); }
.cell.error{ border-color:var(--err); color:var(--err); }
.cell.error .cell-note{ color:var(--err); }
button.cell:hover{ border-color:var(--fg); }

/* ── Motive und Artists ──────────────────────────────────────────────────── */

.sheet-view .lane-head{ height:auto; margin-bottom:8px; }
.sheet-view .hint{ margin-bottom:18px; max-width:56em; }
.table-wrap{ overflow-x:auto; border-top:1px solid var(--line); }
.grid{ border-collapse:collapse; min-width:100%; font-size:.86rem; }
.grid th{ text-align:left; font-family:var(--mono); font-size:.68rem; font-weight:400; letter-spacing:.12em;
  text-transform:lowercase; color:var(--dim); padding:10px 8px; border-bottom:1px solid var(--line); white-space:nowrap; }
.grid td{ padding:4px 8px; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.grid td input, .grid td select, .grid td textarea{ width:100%; min-width:6em; font-size:.86rem; padding:.35em 0; }
.grid td textarea{ min-width:16em; resize:vertical; }
.grid .col-name input{ min-width:14em; }
.grid .col-titel input{ min-width:12em; }
.grid .col-hintergrund input, .grid .col-ordner input{ min-width:13em; }
.grid .col-ab-sekunde input, .grid .col-l-nge input{ min-width:3.5em; width:4em; }
.grid td.mono{ font-family:var(--mono); font-size:.76rem; color:var(--dim); padding-top:12px; }
.grid td.status{ color:var(--dim); font-size:.8rem; padding-top:12px; min-width:16em; }
.grid td.status.error{ color:var(--err); }
.grid tr.draft td{ background:var(--panel); }
.grid .check{ padding:8px 0 0; }

/* ── Ansicht eines fertigen Videos ───────────────────────────────────────── */

.modal.viewer{ width:min(640px,100%); }
.viewer-frames{ display:flex; align-items:flex-end; gap:24px; margin-bottom:20px; }
.viewer-frames figure{ display:grid; gap:8px; }
.viewer-frames .frame{ width:auto; height:300px; }
.viewer-frames figcaption{ font-size:.78rem; color:var(--dim); overflow-wrap:anywhere; max-width:240px; }
.viewer-facts{ display:grid; grid-template-columns:auto 1fr; gap:6px 18px; font-size:.86rem; }
.viewer-facts dt{ color:var(--dim); }

@media (max-width:1180px){
  .graph{ grid-template-columns:260px 560px 340px; column-gap:52px; }
}
@media (max-width:720px){
  .page{ padding:0 16px; }
  .machine-state{ max-width:none; }
}