/* Review zakladatele 2026-10-03 (REVIEW-3, REVIEW-15, REVIEW-17, REVIEW-18):
   - hlavička dílu v jednom kompaktním bloku a akce v jedné nízké liště, ať je obsah na první obrazovce;
   - na velkém monitoru (27") širší obal a hustší sazba, ať se vejde víc informací bez rolování.
   Jen obrazovka, tisk řídí slozka.css. Načítá se po ostatních stylech složky (_zaklad_slozky.html). */

@media screen {
  /* ---------- hlavička dílu (dil.html, mimo CV studio) ---------- */
  main.app .dil-hlava {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline;
    column-gap: var(--m-4); row-gap: 0; margin: 0 0 var(--m-3);
  }
  main.app .dil-hlava .dil-nav { grid-column: 1 / -1; margin: 0; min-height: 0; }
  /* S11 (QA-01abe85): cíle 44 px i na počítači (WCAG 2.5.8, brána týmu). Kompaktnost drží menší písmo a mezery, ne výška. */
  main.app .dil-hlava .dil-nav a { min-height: 2.75rem; }
  main.app .dil-hlava h1 {
    grid-column: 1 / -1; margin: 0 0 var(--m-1);
    font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2.125rem);
  }
  main.app .dil-hlava .dil-uvod { grid-column: 1 / -1; margin: 0; font-size: var(--velikost-m); max-width: 60rem; }

  /* ---------- lišta akcí dílu: jeden nízký řádek, menší tlačítka, oddělená linkou od obsahu ---------- */
  main.app .dil-lista {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--m-2);
    margin: var(--m-3) 0 var(--m-3); padding: 0 0 var(--m-3); border-bottom: 1px solid var(--linka);
  }
  main.app .dil-lista .editor-lista { gap: var(--m-2) var(--m-3); }
  main.app .dil-lista > .sl-tlacitko, main.app .dil-lista .sl-stahnout > .sl-tlacitko {
    min-height: 2.75rem; padding: 0.25rem 0.85rem; font-size: var(--velikost-s);
  }
  main.app .dil-lista .editor-lista + .sl-tlacitko,
  main.app .dil-lista .editor-lista + [hidden] + .sl-tlacitko { margin-left: auto; }

  /* filtr otázek: REVIEW-16 ho kreslí jako textový přepínač vedle nadpisu seznamu (dily-otazky.css) */

  /* sbalený úvod („Jak na odpovědi“, „Kdy a jak se ptát“) těsně pod hlavičkou */
  main.app .sl-dil > .sl-rady-uvod:first-child { margin-top: 0; }
  main.app .sl-rady-uvod .sl-uvod { font-size: var(--velikost-m); }

  /* karty otázek: zavřené na jeden nízký řádek */
  main.app .sl-otazka > summary { padding: 0.5rem 0; }
  main.app .sl-otazka { margin-bottom: var(--m-2); }

}

/* ---------- velký monitor: širší obal a hustší sazba ---------- */
@media screen and (min-width: 90rem) {
  main.app .app__obal--siroky { max-width: 80rem; }
  /* hlavička a patička webu lícují se širším obsahem složky */
  body:has(main.app .app__obal--siroky) .hlavicka > .obal,
  body:has(main.app .app__obal--siroky) .paticka > .obal { max-width: 80rem; }
  main.app .sl-stranka { line-height: 1.55; }
  main.app .sl-stranka[data-stranka="dil"] .sl-oddil { margin: var(--m-5) 0; }
  main.app .sl-stranka[data-stranka="dil"] h2 { margin-top: var(--m-5); }
  /* díl bez panelu chatu: text by byl moc široký na čtení, karty se proto řadí do sloupců (kde to díl umí)
     a odstavce mají rozumnou délku řádku */
  main.app .sl-stranka[data-stranka="dil"] .dil-pracoviste:not(.dil-pracoviste--chat) .sl-dil p { max-width: 82ch; }
}
@media screen and (min-width: 110rem) {
  main.app .app__obal--siroky,
  body:has(main.app .app__obal--siroky) .hlavicka > .obal,
  body:has(main.app .app__obal--siroky) .paticka > .obal { max-width: 90rem; }
}

/* ---------- REVIEW-1: rozbor shody ve složce (slozka/_rozbor_shody.html), slovník jako P05 ---------- */
.shoda { margin: 0 0 var(--m-5); scroll-margin-top: var(--m-5); }
.shoda:focus { outline: none; }
.app .shoda__hlava h2 { margin: 0 0 var(--m-1); }
.app .shoda__hlava p { margin: 0 0 var(--m-4); }
.shoda__souhrn { display: grid; gap: var(--m-4); align-items: center; }
.app .shoda__cisla { display: flex; align-items: baseline; gap: 0.4rem; margin: 0; font-family: var(--pismo-nadpis); line-height: 1; }
.shoda__pred { font-size: 1.75rem; color: var(--tlumeny); font-weight: 600; }
.shoda__sipka { font-size: 1.5rem; color: var(--tlumeny); }
.shoda__po { font-size: var(--n-velikost-cislo, 3rem); font-weight: 700; color: var(--produkt-text); letter-spacing: -0.02em; }
.shoda__cisla small { font-size: var(--velikost-s); color: var(--tlumeny); font-family: var(--pismo-text); }
.app .shoda__skore p.sl-drobne { margin: var(--m-1) 0 0; }
.shoda__pruhy { display: grid; gap: var(--m-2); min-width: 0; }
.shoda__radek { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 3rem; align-items: center; gap: var(--m-3); }
.shoda__popis { font-size: var(--velikost-s); color: var(--tlumeny); }
.shoda__radek--po .shoda__popis { color: var(--text); font-weight: 600; }
.shoda__pocet { font-size: var(--velikost-s); font-variant-numeric: tabular-nums; text-align: right; color: var(--tlumeny); }
.shoda-pruh { display: block; width: 100%; height: 0.75rem; border-radius: 6px; overflow: hidden; }
.shoda__radek:not(.shoda__radek--po) .shoda-pruh { height: 0.5rem; opacity: 0.75; }
.shoda-pruh__sedi { fill: var(--n-jasne); }
.shoda-pruh__napul { fill: var(--n-napul); }
.shoda-pruh__nevidime { fill: var(--kostra); }
.app .shoda__pruhy .legenda { margin-top: var(--m-1); font-size: var(--velikost-s); }
.app .shoda__fakta { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--m-2); font-size: var(--velikost-s); }
.app .shoda__fakta li { padding-left: 0.9rem; border-left: 3px solid var(--produkt-plocha); }
.app .shoda__rozbor { margin-top: var(--m-4); }
.app .shoda__rozbor > summary, .app .shoda__jak > summary { font-weight: 700; }
.app .shoda__seznam { list-style: none; margin: 0; padding: 0; }
.app .shoda-pol .par__poz { margin: 0; }
.app .shoda-pol .par__doklad p { margin: 0; }
.stitek--zlepseno { background: var(--uspech-plocha); color: var(--n-jasne); margin-left: 0.3rem; font-size: 0.75rem; padding: 0.05rem 0.5rem; }
/* S11: odkaz „Rozbor shody“ je samostatný cíl 44 px (v hlavičce složky, v kartě Moje přípravy i ve studiu) */
.shoda-odkaz { display: inline-flex; align-items: center; min-height: 2.75rem; margin-left: var(--m-2); font-weight: 600; white-space: nowrap; }
.app .sl-hlavicka__skore { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--m-2); }
.app .sl-hlavicka__skore .shoda-odkaz { margin-left: 0; }
@media (min-width: 64rem) {
  .shoda__souhrn { grid-template-columns: auto minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--m-6); }
  .app .shoda-pol { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--m-4); }
}
@media print {
  /* N6 (QA-01abe85): rozbor je delší než strana, `break-inside: avoid-page` ho přesouvalo celý na 2. stranu a 1. zůstala jen
     s nadpisem. Smí se lámat, nedělí se jen souhrn a jednotlivé požadavky. */
  .shoda { break-inside: auto; }
  .shoda__hlava, .shoda__souhrn, .shoda-pol { break-inside: avoid; }
  .shoda__rozbor > summary, .shoda__jak { display: none; }
  /* N6: patička dílu („Vytvořila umělá inteligence…“) se drží s posledním odstavcem, ať nezůstane sama na poslední straně */
  .sl-pata-dilu { break-before: avoid; break-inside: avoid; margin-top: 1rem; }
  /* N6: seznam dílů složky v tisku (číslo, název a stav vedle sebe). Starší pravidla v slozka.css čekají název a stav přímo
     v mřížce odkazu, nový řádek je má v `.sl-dily__text`, takže se v tisku lámaly do úzkých sloupců. */
  .sl-dily__radek { display: block; min-height: 0; padding: 0; }
  .sl-dily__odkaz { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; grid-template-areas: none; gap: 0 0.5rem; align-items: center; }
  .sl-dily__cislo, .sl-dily__nazev, .sl-dily__stav { grid-area: auto; }
  .sl-dily__text { display: grid; gap: 0.1rem; min-width: 0; }
  .sl-dily__radek { break-inside: avoid; }
}

/* ---------- REVIEW-2: Moje přípravy – další firma výrazně, odstoupení nenápadně ---------- */
.pripravy-hlava { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--m-3) var(--m-5); }
.app .pripravy-hlava h1 { margin-bottom: var(--m-2); }
.app .pripravy-hlava__akce { margin: 0; }
.app .sl-karta__rozbor { margin: var(--m-2) 0 0; font-size: var(--velikost-s); font-weight: 600; }
.app .sl-karta__rozbor a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.app .odstoupeni-karta--jemne, .app .odstoupeni-slozka { margin: var(--m-3) 0 0; }
/* doklady ke stažení v kartě přípravy: seznam odkazů, cíl ≥ 44 px, podtržení jako u ostatních odkazů v textu */
.app .sl-doklady { list-style: none; margin: var(--m-2) 0 0; padding: 0; font-size: var(--velikost-s); }
.app .sl-doklady a { display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: underline; text-underline-offset: 0.15em; }
.app .sl-doklady__cislo { color: inherit; white-space: nowrap; }
.app .sl-doklady-ceka { margin: var(--m-2) 0 0; }
/* posudek Vítka 2026-10-04 RO3: stejné písmo jako text karty, zřetelný odkaz (podtržený, barva odkazu, kontrast ≥ 4,5:1),
   ne šedý vzhled vypnutého prvku; na dotyku cíl ≥ 44 px, viditelný fokus z výchozích stylů odkazu */
main.app .sl-stranka a.odstoupeni-odkaz:not(.tlacitko):not(.sl-tlacitko):not(.sl-karta__odkaz):not(.sl-dily__odkaz):not(.dil-dalsi) { font-size: inherit; font-weight: 400; text-decoration: underline; text-underline-offset: 0.15em; }
@media (pointer: coarse) { .app .odstoupeni-odkaz { display: inline-block; padding-block: 0.7rem; } }

/* REVIEW-1: odkaz na rozbor shody z levého panelu CV studia */
.cvs-skore__rozbor { display: inline-block; margin-top: 0.25rem; font-weight: 600; }

/* REVIEW-21: menu Stáhnout v liště dílu se otevírá k pravému okraji tlačítka (lišta končí u okraje papíru) */
main.app .dil-lista .sl-stahnout .cvs-menu { left: auto; right: 0; }

/* PN-026: nadpis skupiny „Co jsme v inzerátu nenašli“ v seznamu otázek, které položíte vy */
main.app .sl-otazky--vase > .sl-otazky__skupina { list-style: none; margin: var(--m-5) 0 var(--m-2); }
main.app .sl-otazky--vase > .sl-otazky__skupina h2 { margin: 0 0 var(--m-1); }
main.app .sl-otazky--vase > .sl-otazky__skupina p { margin: 0; color: var(--tlumeny); }

/* D18 etapa C: stav hlášení v Moje hlášení slovy i barvou (nikdy jen barvou) */
.app .sl-stav { display: inline-block; padding: 0.1rem 0.7rem; border-radius: 99px; border: 1px solid var(--sl-linka); font-size: var(--velikost-s); font-weight: 600; }
.app .sl-stav--vyreseno { background: var(--sl-uspech-podklad); border-color: var(--sl-uspech-linka); }
.app .sl-stav--ceka_na_vas { background: var(--sl-doplnte-podklad); color: var(--sl-doplnte-text); border-color: var(--sl-doplnte-text); }
.app .sl-hlaseni { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--m-2); }
.app .sl-hlaseni__odkaz { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; min-height: 2.75rem; }
.app .sl-prubeh { margin: 0; padding-left: 1.2rem; }

/* D18 etapa D1: past na roboty mimo obrazovku (ne display:none, ať ji roboti vidí), chyby formuláře textem i ohraničením */
.app .sl-past { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.app .sl-chyby { border: 2px solid var(--sl-chyba); border-radius: 8px; padding: var(--m-2) var(--m-3, 1rem); margin-bottom: var(--m-3, 1rem); }
.app .sl-chyba { color: var(--sl-chyba); font-weight: 600; }
.app .sl-formular select, .app .sl-formular input[type="email"], .app .sl-formular textarea { max-width: 100%; width: 100%; box-sizing: border-box; font: inherit; }