/* /start — ekran startowy (ETAP 9): daily (po lewej, ~40%) + fabuła (po prawej, ~60%)
   naraz, pasek skrótów pod spodem. Płynne @container progi w em (ten sam wzorzec co
   css/story.css #hub-layout/.registry-layout) — nie breakpointy pod urządzenia. */

/* Nazwane kontenery TUTAJ, na rodzicu — nie na .start-windows/.start-shortcuts
   samych (ETAP 9, znaleziony błąd): element nie może być query-kontenerem dla
   ZAPYTANIA O SIEBIE SAMEGO (spec CSS Containment — to kołowe, po prostu nigdy
   nie dopasowuje), więc "@container start-windows (...) { .start-windows {...} }"
   nigdy się nie uruchamiało — stąd okna nigdy nie szły w rząd, mimo że WEWNĘTRZNY
   podział schemat/aside (zależny od tego samego kontenera, ale na INNYM elemencie)
   działał poprawnie. Jeden element może być kontenerem pod kilkoma nazwami naraz. */
.start-app { max-width:min(96vw,84rem); container: start-windows start-shortcuts / inline-size; }

.start-prompt-row {
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-2);
  font-family:var(--mono); font-size:var(--font-sm); color:var(--muted);
  margin-bottom:var(--space-4); padding-bottom:var(--space-2); border-bottom:1px solid var(--border);
}
.start-prompt-line { color:var(--text); }
.start-cursor { color:var(--accent); animation:start-blink 1.1s steps(1) infinite; }
@keyframes start-blink { 50% { opacity:0; } }
@media (prefers-reduced-motion: reduce) { .start-cursor { animation:none; } }

.start-windows { display:flex; flex-direction:column; gap:var(--space-4); margin-bottom:var(--space-4); }
/* min-height TUTAJ, nie tylko na .term-body niżej: .term-win (tables.css) ma
   overflow:hidden, a .start-win jest flex-itemem .start-windows — z overflow
   innym niż visible automatyczny minimalny rozmiar flex-itema liczy się jako 0
   (spec CSS Flexbox, "automatic minimum size"), więc min-height na WNUKU
   (.term-body) nie przeszkadza temu konkretnemu elementowi zjechać do 0 i
   przyciąć całą zawartość przez overflow:hidden. Jawny min-height i flex-shrink:0
   TUTAJ, na samym flex-itemie, całkiem omijają to automatyczne liczenie. */
.start-win { display:flex; flex-direction:column; min-height:21rem; flex-shrink:0; }
/* overflow:visible (nadpisuje overflow-x:auto z tables.css, które per spec CSS
   Box ustawia też overflow-y na auto, skoro tylko X było "visible") — okno ma
   ROSNĄĆ do wysokości treści, nie przewijać się w sobie (brief: "bez
   przewijania", oryginalny układ to pełna wysokość okna, bez scrolla). */
.start-win .term-body { flex:1 1 auto; display:flex; flex-direction:column; gap:var(--space-2); min-height:20rem; overflow:visible; }
/* Okno fabuły: wyraźna zielona ramka (brief) — na każdej szerokości, nie tylko szerokiej. */
.start-win-story { border:2px solid var(--accent); }

.start-error { font-family:var(--mono); font-size:var(--font-sm); color:var(--wrong-t); margin-bottom:var(--space-2); }
.start-error-detail { font-family:var(--mono); font-size:var(--font-xs); color:var(--muted); margin-bottom:var(--space-3); word-break:break-word; }

/* Szeroki kontener: fabuła wyraźnie większa (60%) obok daily (40%), zgodnie z briefem. */
@container start-windows (min-width: 64em) {
  .start-windows { flex-direction:row; align-items:flex-start; }
  .start-win-daily { flex:2 1 0; min-width:0; }
  .start-win-story { flex:3 1 0; min-width:0; }
}

/* Schemat/cytat/log/karta "następnie" — ukryte na wąskim kontenerze (telefon, poniżej
   tego progu wszystko ma zmieścić się na jednym ekranie bez przewijania), pokazywane
   od momentu, gdy jest miejsce na czytelny graf (ten sam próg co hub, css/story.css). */
.start-story-extra { display:none; }
@container start-windows (min-width: 36em) {
  .start-story-extra { display:flex; flex-direction:column; gap:var(--space-3); }
}

/* Telefon kontra reszta: krótkie podsumowanie (pasek opanowania, linie "ranking"/
   "wyniki"/"wiadomości") zamiast pełnych list, żeby obie karty zmieściły się na
   jednym ekranie bez przewijania (patrz brief, "WĄSKI (telefon)"). */
.start-full-only { display:none; }
@container start-windows (min-width: 36em) {
  .start-full-only { display:block; }
  .start-compact-only { display:none; }
}
@container start-windows (min-width: 64em) {
  .start-story-extra { flex-direction:row; flex-wrap:wrap; align-items:flex-start; }
  .start-story-left { flex:1 1 16rem; min-width:14rem; }
  .start-story-aside { flex:1 1 14rem; min-width:12rem; }
}

/* Kolumna lewa (schemat + log) i prawa (cytat/misja/następnie/ostatnio) — na wąskim
   kontenerze (36-64em) obie po prostu stoją jedna pod drugą w normalnym block flow
   (.start-story-extra jest wtedy column), dopiero od 64em stają obok siebie. */
.start-story-left { display:flex; flex-direction:column; gap:var(--space-3); }
.start-story-aside { display:flex; flex-direction:column; }

/* Nagłówek okna fabuły: "FABUŁA · AKT N" + chipy aktów w jednym rzędzie (ten sam
   wzorzec co "DAILY · data" w oknie daily) — zawija się na wąskim kontenerze. */
.start-fabula-header { display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:space-between; align-items:center; }

.start-act-chips { display:flex; gap:var(--space-2); flex-wrap:wrap; }
.start-mission-name { font-family:var(--mono); font-size:var(--font-sm); font-weight:700; color:var(--text); margin-bottom:var(--space-1); }
.start-act-chip { font-family:var(--mono); font-size:var(--font-xs); font-weight:700; padding:2px 7px; border-radius:3px; border:1px solid var(--border); }
.start-act-chip.done { color:var(--correct-t); border-color:var(--correct-t); }
.start-act-chip.current { color:var(--warn-t); border-color:var(--warn-t); border-style:dashed; }
.start-act-chip.locked { color:var(--muted); opacity:0.7; }

.start-act-title { font-family:var(--mono); font-size:var(--font-md); font-weight:700; color:var(--text); margin-bottom:var(--space-2); }

.start-schematic-canvas { position:relative; width:100%; aspect-ratio:16/9; min-height:9rem; }
.start-schematic-svg { position:absolute; inset:0; width:100%; height:100%; }
.start-schematic-edge { stroke:var(--border); stroke-width:1.5; }
.start-schematic-nodes { position:absolute; inset:0; }
.start-schematic-node {
  position:absolute; transform:translate(-50%,-50%); white-space:nowrap; text-decoration:none;
  font-family:var(--mono); font-size:var(--font-xs); font-weight:700; padding:3px 7px; border-radius:999px;
  border:1px solid var(--border); background:var(--bg3); color:var(--muted); -webkit-tap-highlight-color:transparent;
}
.start-schematic-node.done { border-color:var(--correct-t); color:var(--correct-t); }
.start-schematic-node.current { border-color:var(--correct-t); border-style:dashed; color:var(--text); }
.start-schematic-node.new { border-color:var(--warn-t); border-style:dashed; color:var(--warn-t); }
.start-schematic-node.locked { color:var(--muted); opacity:0.6; }

.start-log { display:flex; flex-direction:column; gap:3px; }
.start-log-row { font-family:var(--mono); font-size:var(--font-xs); color:var(--muted); }
.start-log-row.muted { opacity:0.7; }

.start-mission-progress { margin-bottom:var(--space-2); }
.start-next-card { font-family:var(--mono); font-size:var(--font-xs); color:var(--muted); border:1px dashed var(--border); border-radius:var(--radius); padding:var(--space-2); margin-bottom:var(--space-2); }

.start-section-title { font-family:var(--mono); font-size:var(--font-xs); font-weight:700; color:var(--muted); margin:var(--space-2) 0 var(--space-1); }
.start-recent { display:flex; flex-direction:column; }
.start-row-plain { font-family:var(--mono); font-size:var(--font-xs); color:var(--text); }
.start-row-plain.muted { color:var(--muted); }

.start-story-actions { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-2); }
.start-continue-btn { flex:1 1 14rem; }
.start-finished-summary { font-family:var(--mono); font-size:var(--font-xs); color:var(--muted); width:100%; }

/* ── Daily ── */
.start-daily-meta { display:flex; flex-wrap:wrap; gap:var(--space-2); justify-content:space-between; }
.start-daily-head { font-weight:700; color:var(--text); }
.start-daily-desc { font-family:var(--mono); font-size:var(--font-xs); color:var(--muted); line-height:1.5; }
.start-daily-desc.muted { opacity:0.8; }
.start-daily-cta { align-self:flex-start; background:var(--warn-t); border-color:var(--warn-t); color:#1a1608; min-width:10rem; font-weight:700; }
@media (hover:hover) { .start-daily-cta:hover { background:var(--warn-t); filter:brightness(1.1); } }
.start-daily-result { font-family:var(--mono); font-size:var(--font-sm); color:var(--text); }

.start-streak { display:flex; flex-direction:column; gap:var(--space-1); }
.start-pips { display:flex; gap:4px; }
.start-pip {
  width:1.6rem; height:1.6rem; border-radius:3px; border:1px solid var(--border); background:var(--bg3);
  display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:11px; color:var(--muted);
}
.start-pip.filled { border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--bg3)); }

.start-row { display:flex; justify-content:space-between; gap:var(--space-2); font-family:var(--mono); font-size:var(--font-xs); color:var(--text); padding:3px 0; border-bottom:1px solid var(--border); }
.start-row:last-child { border-bottom:none; }
.start-row.me { color:var(--accent); font-weight:700; }
.start-empty { font-family:var(--mono); font-size:var(--font-xs); color:var(--muted); padding:4px 0; }

/* ── Pasek skrótów (3 kolumny) ── */
.start-shortcuts { display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-4); }
.start-shortcut {
  font-family:var(--mono); font-size:var(--font-xs); color:var(--text); background:var(--bg2);
  border:1px solid var(--border); border-radius:var(--radius); padding:var(--space-2) var(--space-3);
}
.start-shortcut b { color:var(--accent); }
@container start-shortcuts (min-width: 40em) {
  .start-shortcuts { flex-direction:row; }
  .start-shortcut { flex:1 1 0; }
}

/* ── Nawigacja dolna (telefon) — ten sam próg co kolaps topbar-nav w css/index.css,
   żeby nie dublować logiki pod inny, nowy wymiar. ── */
.start-bottom-nav { display:none; }
@media (max-width:640px) {
  .start-bottom-nav {
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:30;
    background:var(--bg2); border-top:1px solid var(--border);
    padding:var(--space-1) var(--space-2) calc(var(--space-1) + var(--safe-bottom));
    gap:var(--space-1);
  }
  .start-bottom-nav a {
    flex:1 1 0; display:flex; align-items:center; justify-content:center; min-height:var(--tap);
    font-family:var(--mono); font-size:var(--font-xs); font-weight:700; color:var(--muted); text-decoration:none; border-radius:var(--radius);
  }
  .start-bottom-nav a.active { color:var(--accent); background:var(--bg3); }
  .start-app { padding-bottom:calc(var(--safe-bottom) + 3.5rem); }
}