/* poslovnitok.rs — strana „Obuka“ (obuka.html)
   Oslanja se na css/site.css (tokeni, meni, footer, .eyebrow/.h2/.lead, .fade, .ill). */

.course{
  --hdr:65px;                      /* visina sticky menija + donja linija */
  --toc-w:300px;
  display:grid;
  grid-template-columns:var(--toc-w) minmax(0,1fr);
  align-items:start;
  transition:grid-template-columns .5s var(--ease);
}
.course.collapsed{ grid-template-columns:56px minmax(0,1fr); }

/* ---------- Sadržaj obuke (leva traka) ---------- */
.toc{
  position:sticky; top:var(--hdr);
  height:calc(100vh - var(--hdr)); height:calc(100dvh - var(--hdr));
  overflow:hidden auto; overscroll-behavior:contain;
  border-right:1px solid var(--line); background:var(--paper);
  display:flex; flex-direction:column;
}
.toc-head{
  display:flex; align-items:center; gap:.8rem;
  padding:1rem 1.1rem .9rem 1rem; border-bottom:1px solid var(--line);
  min-height:64px;
}
.toc-toggle{
  flex:none; width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:12px; background:transparent; color:var(--ink);
  cursor:pointer; transition:border-color .25s var(--ease), color .25s var(--ease);
}
.toc-toggle:hover{ border-color:var(--coral); color:var(--coral); }
.toc-toggle svg{ transition:transform .5s var(--ease); }
.collapsed .toc-toggle svg{ transform:rotate(180deg); }
.toc-title{
  font-family:var(--mono); font-variant-ligatures:none; font-size:.72rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); white-space:nowrap;
}
.toc-body{ padding:.9rem 0 1.4rem; transition:opacity .3s var(--ease); }
.toc-rail{
  display:none; writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--mono); font-variant-ligatures:none; font-size:.68rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ink-soft); margin:1.2rem auto 0; white-space:nowrap;
}
.collapsed .toc-body{ opacity:0; visibility:hidden; height:0; overflow:hidden; padding:0; }
.collapsed .toc-title{ display:none; }
.collapsed .toc-head{ padding-inline:9px; justify-content:center; }
.collapsed .toc-rail{ display:block; }

.toc-intro{
  display:block; margin:0 1.1rem .9rem; padding:.8rem .9rem; border-radius:12px;
  text-decoration:none; color:var(--ink);
}
.toc-intro .t{ display:block; font-weight:700; letter-spacing:-.01em; }
.toc-intro .m{
  display:block; font-family:var(--mono); font-variant-ligatures:none; font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); margin-top:.2rem;
}
a.toc-intro:hover .t{ color:var(--coral); }
.toc-intro.is-current{ background:var(--paper-2); }
.toc-intro.is-current .t{ color:var(--coral); }

.toc-list{ list-style:none; margin:0; padding:0; }
.toc-item{
  position:relative;
  display:grid; grid-template-columns:2.2rem minmax(0,1fr) auto; align-items:baseline; gap:.3rem .5rem;
  padding:.62rem 1.1rem .62rem 1.5rem; text-decoration:none; color:var(--ink);
  transition:color .25s var(--ease), background-color .25s var(--ease);
}
.toc-item .n{
  font-family:var(--mono); font-variant-ligatures:none; font-size:.78rem; letter-spacing:.1em; color:var(--ink-soft);
}
.toc-item .name{ font-size:.98rem; line-height:1.3; }
.toc-item .dur{
  font-family:var(--mono); font-variant-ligatures:none; font-size:.68rem; letter-spacing:.08em;
  color:var(--ink-soft); white-space:nowrap;
}
a.toc-item:hover .name{ color:var(--coral); }
.toc-item.is-current{ background:var(--paper-2); }
.toc-item.is-current::before{
  content:""; position:absolute; left:0; top:.45rem; bottom:.45rem; width:2px; border-radius:1px; background:var(--coral);
}
.toc-item.is-current .n,
.toc-item.is-current .name{ color:var(--coral); }
.toc-item.is-current .name{ font-weight:600; }
.toc-total{
  margin:1.1rem 1.5rem 0; padding-top:1rem; border-top:1px solid var(--line);
  font-family:var(--mono); font-variant-ligatures:none; font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft);
}

/* Traka „Sadržaj“ i pozadina panela — samo na uskom ekranu */
.toc-bar,.toc-backdrop{ display:none; }

/* ---------- Prikaz lekcije ---------- */
.lesson-area{ min-width:0; padding:clamp(2.5rem,7vh,4.5rem) 6vw clamp(4rem,10vh,6rem); }
.lesson{ max-width:54rem; }
.lesson[hidden]{ display:none; }
.lesson h1:focus{ outline:none; }
.lesson .h2{ max-width:22ch; }
.lesson .headline{ font-size:clamp(2.3rem,4.6vw,4.1rem); line-height:1.02; max-width:19ch; }
/* krajevi koral podvlake doterani za slova „k“ i „o“ */
.lesson .headline .coral{ --ul-l:.052em; --ul-r:0em; }
.lesson .lead{ max-width:56ch; }
.lesson .lead + .lead{ margin-top:1rem; }
.lesson .actions{ margin-top:2.4rem; }

.brief{
  position:relative; margin:2.4rem 0 2.6rem; padding:1.6rem 1.6rem 1.45rem;
  background:var(--paper-2); border:1px solid var(--line); border-radius:16px; max-width:64ch;
}
.brief::before{
  content:"Ukratko"; position:absolute; top:-.62rem; left:1.5rem;
  background:var(--paper); padding:0 .55rem;
  font-family:var(--mono); font-variant-ligatures:none; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft); line-height:1.2rem;
}
.brief[data-label]::before{ content:attr(data-label); }   /* ista kutija, druga oznaka */
.brief p{ margin:0; font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.55; }

.lesson .ill{ margin:2.4rem 0; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--paper); }

.lesson-body > p,.lesson-body > ul,.lesson-body > ol,.lesson-body > h2{ max-width:64ch; }
.lesson-body h2{
  --hfs:clamp(1.25rem,1.9vw,1.55rem);
  font-size:var(--hfs); font-weight:700; letter-spacing:-.015em; line-height:1.2;
  margin:2.6rem 0 .75rem;
}
.lesson-body > h2:first-child{ margin-top:0; }
.lesson-body p,.lesson-body li{ font-size:1.06rem; line-height:1.68; }
.lesson-body p{ margin:0 0 1rem; }
.lesson-body ul,.lesson-body ol{ margin:0 0 1.1rem; padding-left:1.4rem; }
.lesson-body li{ margin:.25rem 0; padding-left:.3rem; }
.lesson-body ul li::marker{ color:var(--coral); }
.lesson-body ol li::marker{ font-family:var(--mono); color:var(--coral); font-size:.9rem; }

/* Numerisani podnaslovi: broj mono u koralu, ispred naslova */
.lesson-body h2:has(> .num){ display:flex; align-items:baseline; gap:.6em; }  /* razmak broj–naslov; razmak iz HTML-a se ovde ne sabira */
/* Broj: isti font, veličina, razmak slova i težina kao broj lekcije u sadržaju (.toc-item .n); boja koral.
   Optičko poravnanje: sredina cifara (visina .742 mono fonta) na sredini visine malih slova naslova (.534). */
.lesson-body h2 .num{
  flex:none; position:relative;
  font-family:var(--mono); font-variant-ligatures:none; font-size:.78rem; letter-spacing:.1em; font-weight:400;
  color:var(--coral);
  top:calc(.371 * .78rem - .267 * var(--hfs));
}

/* Niz posla: istaknut red, mono, koral strelice */
.lesson-body .flow{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .7rem;
  margin:1.1rem 0 1.4rem; padding:1rem 1.2rem; max-width:none;
  border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.5);
  font-family:var(--mono); font-variant-ligatures:none; font-size:.98rem; letter-spacing:.02em; color:var(--ink);
}
.lesson-body .flow .arr{ color:var(--coral); font-weight:600; }

/* Lista definicija: pojam bold, objašnjenje obično */
.defs{ margin:1.4rem 0 1.6rem; max-width:64ch; }
.defs > div{ padding:.75rem 0 .75rem 1rem; border-left:2px solid var(--line); margin-bottom:.4rem; font-size:1.06rem; line-height:1.68; }
.defs dt{ display:inline; font-weight:700; color:var(--ink); }
.defs dd{ display:inline; margin:0; color:var(--ink); }

/* Vaš zadatak: izdvojen blok sa numerisanim koracima (stil .steps iz DESIGN-SYSTEM.md) */
.task{
  margin:3rem 0 0; padding:1.7rem 1.7rem 1.5rem; max-width:64ch;
  border:1px solid var(--line); border-top:3px solid var(--coral); border-radius:18px;
  background:rgba(255,255,255,.5);
}
.lesson-body .task h2{ margin:0 0 1.1rem; }
.task-steps{ list-style:none; margin:0; padding:0; display:grid; gap:.95rem; }
.lesson-body .task-steps li{ display:grid; grid-template-columns:2.2rem minmax(0,1fr); align-items:baseline; margin:0; padding:0; }
.task-steps .n{ font-family:var(--mono); font-variant-ligatures:none; color:var(--coral); font-size:.95rem; letter-spacing:.06em; }
.task-steps .t{ font-size:clamp(1.05rem,1.55vw,1.2rem); font-weight:600; line-height:1.45; letter-spacing:-.005em; }
.task .result{ margin:1.4rem 0 0; padding-top:1.1rem; border-top:1px solid var(--line); color:var(--ink-soft); }
.task .result strong{ color:var(--ink); }

/* Tabela: prevlači se unutar svog okvira, strana ostaje bez horizontalnog skrola */
.table-wrap{
  margin:1rem 0 1.4rem; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:16px; background:rgba(255,255,255,.5);
}
.table-wrap:focus-visible{ outline:2px solid var(--coral); outline-offset:2px; }
.table-wrap table{ border-collapse:collapse; width:100%; min-width:760px; font-size:.95rem; }
.table-wrap th,.table-wrap td{ text-align:left; vertical-align:top; padding:.85rem 1rem; border-bottom:1px solid var(--line); line-height:1.45; }
.table-wrap tr:last-child td{ border-bottom:0; }
.table-wrap th{
  font-family:var(--mono); font-variant-ligatures:none; font-weight:500; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-soft); white-space:nowrap; background:var(--paper-2);
}
.table-wrap td:first-child{ font-weight:600; white-space:nowrap; }
.table-wrap td{ color:var(--ink); }

/* Dno lekcije: N od 11 + Prethodna / Sledeća */
.lesson-nav{ margin-top:3.6rem; padding-top:1.6rem; border-top:1px solid var(--line); max-width:54rem; }
.lesson-nav .count{
  font-family:var(--mono); font-variant-ligatures:none; font-size:.72rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-soft); margin-bottom:1rem;
}
.lesson-nav .pair{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.nav-card{
  display:flex; flex-direction:column; gap:.3rem; padding:1rem 1.2rem; min-height:76px; justify-content:center;
  border:1px solid rgba(11,11,15,.16); border-radius:14px; text-decoration:none; color:var(--ink);
  transition:border-color .3s var(--ease), color .3s var(--ease);
}
.nav-card .k{
  font-family:var(--mono); font-variant-ligatures:none; font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-soft);
}
.nav-card .v{ font-weight:600; }
.nav-card.next{ text-align:right; align-items:flex-end; }
a.nav-card:hover{ border-color:var(--coral); }
a.nav-card:hover .v{ color:var(--coral); }
.nav-card.placeholder{ visibility:hidden; }
.nav-card:focus-visible,.toc-item:focus-visible,.toc-intro:focus-visible,.toc-toggle:focus-visible,.toc-open:focus-visible{
  outline:2px solid var(--coral); outline-offset:2px;
}

/* ---------- Uski ekran: sadržaj je skupljen, otvara se kao panel preko strane ---------- */
@media (max-width:999px){
  .course,.course.collapsed{ grid-template-columns:minmax(0,1fr); }
  .toc{
    position:fixed; z-index:70; left:0; top:0; bottom:0; height:auto;
    width:min(86vw,340px); transform:translateX(-102%);
    transition:transform .45s var(--ease), visibility 0s linear .45s; visibility:hidden;
    box-shadow:none;
  }
  .course.panel-open .toc{ transform:none; visibility:visible; transition:transform .45s var(--ease); }
  /* panel je uvek raširen; strelica pokazuje „zatvori“ */
  .course .toc-body{ opacity:1; visibility:visible; height:auto; padding:.9rem 0 1.4rem; }
  .course .toc-title{ display:block; }
  .course .toc-rail{ display:none; }
  .course .toc-head{ padding-inline:1rem 1.1rem; justify-content:flex-start; }
  .course .toc-toggle svg{ transform:none; }

  .toc-backdrop{
    display:block; position:fixed; inset:0; z-index:65; background:rgba(11,11,15,.34);
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility 0s linear .35s;
  }
  .course.panel-open .toc-backdrop{ opacity:1; visibility:visible; transition:opacity .35s var(--ease); }

  .toc-bar{
    display:flex; align-items:center; gap:.8rem; grid-row:1;
    position:sticky; top:var(--hdr); z-index:40;
    padding:.6rem 6vw; background:rgba(251,250,248,.9);
    -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .toc-open{
    display:inline-flex; align-items:center; gap:.55rem; flex:none;
    font:inherit; font-family:var(--mono); font-variant-ligatures:none; font-size:.7rem; letter-spacing:.18em;
    text-transform:uppercase; color:var(--ink);
    background:transparent; border:1px solid var(--line); border-radius:12px; padding:.55rem .8rem; cursor:pointer;
  }
  .toc-bar .where{
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:.88rem; color:var(--ink-soft);
  }
  .lesson-area{ grid-row:2; }
}
@media (max-width:600px){
  .course{ --hdr:59px; }
  .toc-bar{ padding-inline:16px; }
  .lesson-area{ padding-inline:16px; }
  .lesson-nav .pair{ grid-template-columns:minmax(0,1fr); }
  .nav-card.next{ text-align:left; align-items:flex-start; }
  .nav-card.placeholder{ display:none; }
  .task{ padding:1.4rem 1.2rem 1.3rem; }
  .brief{ padding:1.4rem 1.2rem 1.25rem; }
}

@media (prefers-reduced-motion:reduce){
  .course,.toc,.toc-body,.toc-toggle svg,.toc-backdrop,.nav-card,.toc-item{ transition:none!important; }
}

/* Link na primer (PDF) u bloku „Vaš zadatak“: sekundarno (obrubljeno) dugme sa sajta + ikonica dokumenta */
.task .btn-doc{ margin-top:1.2rem; gap:.55rem; }
.task .btn-doc svg{ flex:none; }
/* Više linkova na primere: jedan pored drugog, na telefonu jedan ispod drugog */
.task .doc-links{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin-top:1.2rem; }
.task .doc-links .btn-doc{ margin-top:0; justify-content:flex-start; text-align:left; }
@media (max-width:600px){
  .task .doc-links{ grid-template-columns:minmax(0,1fr); justify-items:start; }
}

/* Okvir „Ovde se većina zaglavi“: koral-soft podloga, tanka koral linija levo, plutajuća mono oznaka */
.stuck{
  position:relative; margin:2.6rem 0 0; padding:1.6rem 1.6rem 1.5rem; max-width:64ch;
  background:var(--coral-soft); border-left:2px solid var(--coral); border-radius:16px;
}
.stuck::before{
  content:"Ovde se većina zaglavi"; position:absolute; top:-.62rem; left:1.5rem;
  background:var(--paper); padding:0 .55rem;
  font-family:var(--mono); font-variant-ligatures:none; font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--coral); line-height:1.2rem;
}
.lesson-body .stuck p{ margin:0 0 1.2rem; }
.stuck .btn{ margin:0; }
.stuck[data-label]::before{ content:attr(data-label); }   /* isti okvir, druga oznaka (npr. „Sledeći korak“) */

/* Tabela procesa (lekcija 5): istaknuto čekanje */
.table-wrap table.proc{ min-width:860px; }
.table-wrap table.proc td:first-child{ font-family:var(--mono); font-variant-ligatures:none; font-weight:400; color:var(--ink-soft); width:3.2rem; }
.table-wrap td.hot{ background:var(--coral-soft); }

@media (max-width:600px){
  .stuck{ padding:1.4rem 1.2rem 1.3rem; }
}

/* Lekcija 11: umesto „Sledeća“ koral dugme „Šta posle →“ */
.lesson-nav .nav-cta{ justify-self:end; align-self:center; }
@media (max-width:600px){ .lesson-nav .nav-cta{ justify-self:start; } }

/* Šira tabela (lekcija 8: 7 kolona) */
.table-wrap table.wide{ min-width:860px; }
.table-wrap table.wrap-first td:first-child{ white-space:normal; min-width:13rem; }