/* =========================================================
     v_article3.html — sticky sisukord
     Päis, jalus ja teemalüliti on v1-st. Siit allpool on ainult
     selle variandi artikliosa.
     ========================================================= */

  main{padding:54px 0 0}
  h1{font-size:clamp(34px,5.4vw,62px);line-height:1.04;letter-spacing:-2.2px;margin:0}
  .a-kicker{
    margin:0 0 16px;color:var(--green);font-size:11.5px;font-weight:800;
    letter-spacing:1.6px;text-transform:uppercase;
  }
  .a-dek{margin:22px 0 0;font-size:clamp(17px,2.1vw,22px);line-height:1.5;color:var(--muted);font-weight:500}
  .a-meta{
    display:flex;flex-wrap:wrap;gap:8px 18px;margin:26px 0 0;
    color:var(--soft);font-size:13px;
  }
  .a-meta strong{color:var(--muted);font-weight:650}
  .a-author{color:inherit;text-decoration:none}
  .a-author:hover{text-decoration:underline;text-underline-offset:3px}
  .a-back{
    display:inline-flex;align-items:center;gap:8px;
    color:var(--green);font-size:13.5px;font-weight:650;
    transition:color .25s ease;padding:5px;margin:-5px;
  }
  .a-back:hover{color:var(--green-hi)}
  .a-nav{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
  .a-nav .a-back{margin:0;padding:5px 0}
  .a-nav-separator{color:var(--soft);font-size:13.5px}
  .a-body p{
    margin:0;font-size:clamp(16.5px,1.55vw,18.5px);line-height:1.78;color:var(--text);
  }
  .a-end{
    margin:44px 0 72px;padding:30px;border:1px solid var(--line);border-radius:18px;
    background:var(--panel-2);text-align:center;
    transition:background-color .4s ease,border-color .4s ease;
  }
  .a-end p{margin:0 0 16px;font-size:17px;font-weight:700;line-height:1.5}
  /* artikli sisu ilmub kerimisel, sama käekiri mis v1 kaartidel */
  .a-body > *{animation:ilmu linear both;animation-timeline:view();animation-range:entry 0% cover 26%}
  @media (prefers-reduced-motion:reduce){.a-body > *{animation:none;opacity:1;translate:none}}
  @media (max-width:520px){
    main{padding-top:34px}
    .a-end{padding:24px 20px;margin-bottom:52px}
  }

  /* Loend on laiem kui varem — peatükinimed murduvad tunduvalt hiljem. */
  /* Laius kahaneb alles siis, kui ekraan seda päriselt nõuab: 1150 px-st
     ülespoole on loend täies 268 px laiuses. */
  .cols{display:grid;grid-template-columns:minmax(0,1fr) clamp(212px,23.3vw,268px);gap:clamp(26px,3.6vw,52px);align-items:start}
  /* Sisukord istub artikli algusest 19 px madalamal — pool sellest, mis
     esimene katse (38 px) andis. Nihe on kahes kohas: margin annab selle
     enne kleepumist, top hoiab sama vahe ka siis, kui plokk on juba
     päise all kinni. */
  .toc{position:sticky;top:117px;margin-top:19px;grid-column:2;grid-row:1}
  /* Sõna SISUKORD algab täpselt sealt, kust peatükinimed: sama 30 px taane,
     mis jätab numbrite tulba sellest vasakule. */
  .toc h2{
    margin:0 0 15px;padding-left:30px;
    font-size:15.75px;letter-spacing:1.8px;text-transform:uppercase;
    color:var(--soft);font-weight:700;
  }
  .toc ol{margin:0;padding:0;list-style:none;counter-reset:tk}
  .toc li{margin-bottom:9px}
  /* Kõik read on ühtviisi rasvased. Nii ei muutu aktiivseks minnes kirjakaal
     ega rea laius — muutub ainult värvi intensiivsus. */
  .toc a{
    display:block;font-size:13px;line-height:1.4;color:var(--soft);font-weight:700;
    padding-left:30px;position:relative;transition:color .25s ease;
  }
  /* Number on oma kastis paremale joondatud: 10 ja 11 lõpevad samas kohas,
     ehkki 1 on kitsam kui 0. 2 px allapoole, et number istuks pealkirja
     esimese rea optilisel joonel. */
  .toc a::before{
    counter-increment:tk;content:counter(tk);
    position:absolute;left:0;top:5px;width:19px;text-align:right;
    font-size:11px;font-weight:700;color:var(--green);opacity:.6;
    transition:opacity .25s ease;
  }
  /* Hall triip numbri ja teksti VAHEL: see märgib kerides ära rea, mida
     loed. Numbrikast lõpeb 19 px, tekst algab 30 px — triip istub selle
     11 px laia vahe keskel (19 + 5,5 − 1 = 23,5 px), on täpselt rea kõrgune
     ja kasvab keskelt välja. Värv tuleb --soft muutujast, seega öösel
     pöördub ta ise heledaks. */
  .toc a::after{
    content:"";position:absolute;left:23.5px;top:-4px;bottom:-4px;width:2px;border-radius:2px;
    pointer-events:none;   /* võib ulatuda naabri kohale — ei tohi tema klikki ära süüa */
    background:var(--soft);
    opacity:0;transform:scaleY(.3);transform-origin:center;
    transition:opacity .25s ease,transform .25s ease;
  }
  .toc a:hover{color:var(--text)}
  /* Loetav peatükk: hallist põhivärvi (päeval must, öösel hele) ja triip ette. */
  .toc a.on{color:var(--text)}
  .toc a.on::before{opacity:1}
  .toc a.on::after{opacity:.45;transform:scaleY(1)}   /* 0,9 → pool sellest */
  @media (prefers-reduced-motion:reduce){.toc a::after{transition:opacity .25s ease;transform:none}}
  /* Laias vaates on pealkirja endine 55,8 px lagi 30% väiksem ehk 39,06 px.
     38 px alampiir hoiab ülemineku narrow-vaatesse sujuva; väiksema ekraani
     senised media-reeglid jäävad muutmata. */
  .a-head{margin-bottom:18px}
  h1{
    white-space:normal;text-wrap:balance;letter-spacing:-.045em;
    font-size:min(39.06px,max(38px,calc((100vw - 48px) * .03318)));
  }
  /* Pikemad artiklipealkirjad vajavad kitsas vaates mitut rida. Üherealine
     valem sobib töölauale, kuid mobiilis tekitaks see horisontaalse kerimise. */
  @media (max-width:700px){
    .a-head h1{white-space:normal;font-size:clamp(30px,8vw,38px);line-height:1.06}
  }
  @media (max-width:420px){.a-head h1{font-size:clamp(28px,8vw,32px)}}
  /* Alampealkiri võib pika loo puhul murduda, et leht ei läheks
     vaateaknast laiemaks. Kirjasuurus jääb pealkirjaga samasse rütmi. */
  .a-head .a-meta{max-width:none}
  .a-head .a-dek{
    max-width:none;white-space:normal;text-wrap:balance;
    font-size:min(22px,calc((100vw - 48px) * .02555));
  }
  /* Alla 640 px kasutab alampealkiri kindlat loetavat kirjasuurust. */
  @media (max-width:640px){
    .a-head .a-dek{white-space:normal;font-size:17px}
  }
  .shell{max-width:760px;grid-column:1;grid-row:1}
  /* =========================================================
     TIHE LADU. Kogu artikliosa tühjus on poole väiksem kui varem ja kiri
     20% väiksem. Reavahe puhul on poolitatud lisaruum ridade vahel, mitte
     rea enda kõrgus: 1,78 → 1 + 0,78/2 = 1,39.
     Päiseplokk (tagasilink, pealkiri, alampealkiri) jääb puutumata — see
     on eraldi paika timmitud.
     ========================================================= */
  /* Peatükkide vahel ei ole halli joont — plokid eristuvad ainult õhu abil.
     Vahe on kahes jaos 20% + 20% väiksem kui varem: 15 → 12 → 9,6 px
     üleval ja all, plokkide vaheks kokku 19,2 px. */
  .a-body section{padding:9.6px 0}
  .a-body section:first-child{padding-top:1.9px}
  /* Peatükipealkirjad 20% suuremad; nende alune vahe 20% väiksem (8 → 6,4 px). */
  .a-body h2{
    margin:0 0 6.4px;font-size:clamp(15.36px,1.7664vw,19.2px);line-height:1.2;
    letter-spacing:-.48px;font-weight:750;
  }
  .a-body .manifest-group-title{
    margin:30px 0 13px;font-size:clamp(24px,3vw,31px);line-height:1.1;
    letter-spacing:-.8px;font-weight:850;color:var(--text);text-wrap:balance;
  }
  .a-body .manifest-chapter-title{
    margin:0 0 7px;font-size:clamp(18px,2.15vw,22px);line-height:1.18;
    letter-spacing:-.45px;font-weight:800;color:var(--text);
  }
  .manifest-chapter-number{color:var(--green);font-weight:850}
  .a-body .manifest-narrative-title{
    margin:0 0 6.4px;font-size:clamp(15.36px,1.7664vw,19.2px);line-height:1.2;
    letter-spacing:-.48px;font-weight:800;color:var(--text);
  }
  .a-body > .manifest-group-title:first-of-type{margin-top:25px}
  .manifest-chapter{padding-top:7px}
  /* Reavahe veel 30% avaramaks: lisaruum ridade vahel 0,507 → 0,659,
     seega line-height 1,659. Lõikude vahe jääb 13 px.
     Tekst on ka õrnalt heledam — 20% muted-tooni poole, mitte täies
     põhivärvis. Vanem brauser, mis color-mix'i ei tunne, saab endise värvi. */
  .a-body p{
    font-size:clamp(14.2px,calc(1.24vw + 1px),15.8px);line-height:1.659;
    color:var(--text);
    color:color-mix(in srgb,var(--text) 80%,var(--muted));
  }
  .a-body p + p{margin-top:13px}
  .article-quote{
    position:relative;margin:15px 0 18px;padding:19px 39px 19px 45px;
    border:0;border-left:3px solid color-mix(in srgb,var(--green) 72%,var(--line));
    border-radius:0 8px 8px 0;background:color-mix(in srgb,var(--green) 5%,var(--panel-2));
  }
  .article-quote::before,.article-quote::after{
    position:absolute;color:var(--green);opacity:.5;
    font:700 43px/1 Georgia,"Times New Roman",serif;pointer-events:none;
  }
  html[lang="et"] .article-quote::before{content:"„"}
  html[lang="et"] .article-quote::after{content:"“"}
  html[lang="en"] .article-quote::before{content:"“"}
  html[lang="en"] .article-quote::after{content:"”"}
  .article-quote::before{left:13px;top:-5px}
  .article-quote::after{right:13px;bottom:-15px}
  .a-body .article-quote p{
    margin:0;font-style:italic;font-size:clamp(14px,calc(1.18vw + 1px),15.4px);
    line-height:1.48;color:color-mix(in srgb,var(--text) 88%,var(--muted));
  }
  .a-body .article-cta{margin-top:14px}
  .article-cta a{
    color:var(--green);font-weight:800;text-decoration:underline;
    text-decoration-color:color-mix(in srgb,var(--green) 35%,transparent);
    text-underline-offset:4px;transition:color .2s ease,text-decoration-color .2s ease;
  }
  .article-cta a:hover{color:var(--green-hi);text-decoration-color:currentColor}
  .a-end{margin:22px 0 36px;padding:15px}
  .a-end p{margin:0 0 8px;font-size:15px;line-height:1.35}
  .a-body code{padding:.1em .34em;border-radius:5px;background:rgba(20,123,78,.10);color:var(--green);font-size:.85em}
  html[data-theme="dark"] .a-body code{background:rgba(63,190,134,.14)}
  .prompt-block{
    margin:17px 0 19px;border:1px solid color-mix(in srgb,var(--green) 32%,var(--line));
    border-radius:14px;overflow:hidden;background:var(--panel-2);
    box-shadow:0 10px 28px rgba(10,54,36,.06);
  }
  .prompt-head{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:9px 11px 9px 15px;border-bottom:1px solid var(--line);
    background:color-mix(in srgb,var(--green) 7%,var(--panel-2));
  }
  .prompt-label{font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--green)}
  .prompt-copy{
    min-height:34px;padding:6px 11px;border:1px solid color-mix(in srgb,var(--green) 42%,var(--line));
    border-radius:9px;background:var(--panel-2);color:var(--green);font:inherit;font-size:12px;font-weight:750;
    cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease;
  }
  .prompt-copy:hover{border-color:var(--green);background:color-mix(in srgb,var(--green) 9%,var(--panel-2))}
  .prompt-copy:focus-visible{outline:3px solid color-mix(in srgb,var(--green) 35%,transparent);outline-offset:2px}
  .prompt-copy.is-copied{background:var(--green);border-color:var(--green);color:#fff}
  .prompt-copy:disabled{cursor:wait}
  .prompt-block pre{margin:0;padding:17px 18px 19px;overflow:auto}
  .a-body .prompt-block code{
    display:block;padding:0;border-radius:0;background:transparent;color:var(--text);
    font:500 12.8px/1.62 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
    white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2;
  }
  html[data-theme="dark"] .prompt-block{box-shadow:none}
  html[data-theme="dark"] .a-body .prompt-block code{background:transparent;color:var(--text)}
  @media (max-width:520px){
    .article-quote{margin:14px -4px 17px;padding:17px 31px 17px 39px}
    .article-quote::before{left:10px}
    .article-quote::after{right:10px}
    .prompt-block{margin:15px -4px 17px}
    .prompt-head{padding-left:13px}
    .prompt-block pre{padding:15px 14px 17px}
    .a-body .prompt-block code{font-size:12px;line-height:1.58}
  }
  /* Kuupäevarida on siit variandist väljas — sama võrra on ka õhku vähem.
     Ülal enne "Tagasi avalehele" on ruumi poole vähem kui mujal (54 → 27 px). */
  main{padding-top:27px}
  .shell > .a-back,.cols .a-back{margin-bottom:0}
  /* Pealkiri 9,5 px allapoole — pool 0,5 cm nihkest, ülejäänu tagasi üles.
     Ümbrus ei liigu: h1 saab 9,5 px ülevalt juurde ja alampealkiri võtab
     sama palju maha, seega "Tagasi avalehele" ja alampealkiri jäävad paigale. */
  .a-head h1{margin-top:9.5px}
  .a-head .a-dek{margin-top:5.9px}   /* endine 15,4 px − 9,5 px */
  .a-head .a-meta{margin-top:13px}    /* 26 px − 50% */
  html{scroll-behavior:smooth}
  .a-body section{scroll-margin-top:96px}
  /* Kitsamal töölaual loobub sisukord numbrite 30 px taandest ja saab
     palju kitsamaks minna. Nii püsib lugemisriba alles kuni 700 px-ni. */
  @media (max-width:900px) and (min-width:701px){
    .cols{grid-template-columns:minmax(0,1fr) minmax(132px,24vw);gap:clamp(14px,2.5vw,24px)}
    /* Kitsas vaates kaob numbrite tulp, aga triip jääb rea algusesse.
       5 px taane jätab 2 px laia triibu ja sõna vahele 3 px õhku. */
    .toc h2,.toc a{padding-left:5px}
    .toc a::before{display:none}
    .toc a::after{left:0}
  }
  @media (max-width:700px){
    .cols{grid-template-columns:1fr}
    .toc{display:none}
  }
  @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}


  /* --- taustakatse: ruum plaadi jaoks, ilma et miski nihkuks --- */
  .toc a{padding-top:3px;padding-bottom:3px;margin-top:-3px;margin-bottom:-3px;border-radius:7px;
    transition:color .25s ease,background-color .25s ease,box-shadow .25s ease}

  /* 6 — HÄÄBUV GRADIENT
     Taust on vasakul tugev ja kaob paremal ära — rõhk on rea alguses,
     seal kus on number ja triip. */
  .toc a.on{background:linear-gradient(90deg,rgba(20,123,78,.10),rgba(20,123,78,0) 82%)}
  html[data-theme="dark"] .toc a.on{background:linear-gradient(90deg,rgba(63,190,134,.12),rgba(63,190,134,0) 82%)}

  .toc--structured ol{counter-reset:none}
  .toc--structured a::before{display:none}
  .toc--structured .toc-group{
    margin:15px 0 7px;padding:0;font-size:10.5px;line-height:1.32;
    letter-spacing:.55px;text-transform:uppercase;color:var(--green);font-weight:800;
  }
  .toc--structured .toc-group:first-of-type{margin-top:13px}
  .toc--structured a{padding-left:30px}
  .toc--structured .toc-number{
    position:absolute;left:0;top:4px;width:20px;text-align:right;
    color:var(--green);font-size:11px;font-weight:800;opacity:.72;
  }
  @media (max-width:900px) and (min-width:701px){
    .toc--structured a{padding-left:24px}
    .toc--structured .toc-number{width:16px}
    .toc--structured .toc-group{font-size:9.5px;letter-spacing:.35px}
  }
  @media (max-width:520px){
    .a-body .manifest-group-title{margin-top:25px;font-size:clamp(22px,7vw,27px)}
    .a-body .manifest-chapter-title{font-size:clamp(18px,5.6vw,21px)}
  }