/* Лише для сторінки «Документи перевізників» (pages/dokumenty.html); спільне — у site.css */

/* ---------- Як роздрукувати документи ----------
   .hs — намальований екран: сторінка сайту → Google Диск → вікно друку. Курсор по черзі підлітає
   до цілі кроку (.hs-t[data-t=N]) і клацає. Для читачів екрана він прихований — ті самі кроки
   текстом у .howto-steps. Логіка — скрипт унизу pages/dokumenty.html.

   Усе всередині екрана — в em, а 1em = ширина екрана / 48, тож картинка масштабується цілком,
   як скриншот. На вузькому екрані (телефон) полотно 36em: частина колонок ховається, а під час
   кліку камера збільшує місце дії. Координати курсора JS бере з розмітки — руками їх ніде не
   прописано, тож розмітку всередині сцен можна міняти вільно. */

.howto-lead{margin:0 0 16px;color:var(--muted)}
.howto-stage{position:relative}
.hs{container-type:inline-size;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff;
    box-shadow:0 14px 34px rgba(10,37,64,.1);cursor:default;-webkit-user-select:none;user-select:none}
.hs-bar,.hs-view{font-size:var(--hs-em,calc(100cqw / 48))}  /* --hs-em ставить JS, якщо браузер не знає cqw */
.hs svg{display:block}

/* вікно браузера */
.hs-bar{display:flex;align-items:center;gap:.45em;height:2.3em;padding:0 .9em;background:#edf1f6;border-bottom:1px solid var(--line)}
.hs-bar>i{flex:none;width:.62em;height:.62em;border-radius:50%;background:#cdd6e1}
.hs-url{position:relative;flex:1;min-width:0;height:1.6em;margin-left:.7em;padding:0 .9em 0 2.1em;border-radius:.8em;background:#fff;
        color:#8795a8;font-size:.86em;line-height:1.6em;white-space:nowrap;overflow:hidden}
.hs-url svg{position:absolute;left:.8em;top:.42em;width:.76em;height:.76em;fill:#8795a8}
.hs-url b{color:var(--ink);font-weight:600}
.hs-url-2,.howto:not([data-step="1"]) .hs-url-1{display:none}
.howto:not([data-step="1"]) .hs-url-2{display:inline}

/* полотно й сцени */
.hs-view{position:relative;height:27.7em;overflow:hidden;background:#fff}
.hs-canvas{position:absolute;inset:0;transition:transform .8s cubic-bezier(.4,0,.2,1)}
.hs-scene{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s linear .35s}
.howto[data-step="1"] .hs-site,
.howto[data-step="2"] .hs-folders,
.howto:not([data-step="1"]):not([data-step="2"]) .hs-files,
.howto[data-step="4"] .hs-viewer,.howto[data-step="5"] .hs-viewer,.howto[data-step="6"] .hs-viewer,
.howto[data-step="5"]:not(.is-printed) .hs-print{opacity:1;visibility:visible;transition:opacity .35s}

/* курсор */
.hs-cursor{position:absolute;z-index:9;left:74%;top:84%;width:1.25em;height:1.72em;pointer-events:none;
           transition:left 1.1s cubic-bezier(.5,0,.2,1),top 1.1s cubic-bezier(.5,0,.2,1)}
.hs-cursor.no-anim{transition:none}
.hs-cursor svg{position:relative;width:100%;height:100%;filter:drop-shadow(0 .12em .2em rgba(0,0,0,.35))}
.hs-ripple{position:absolute;left:-1.3em;top:-1.3em;width:2.6em;height:2.6em;border-radius:50%;background:rgba(255,176,32,.6);opacity:0}
.hs-cursor.is-tap .hs-ripple:first-child,.hs-cursor.is-dbl .hs-ripple{animation:hs-tap .5s ease-out both}
.hs-cursor.is-dbl .hs-ripple+.hs-ripple{animation-delay:.2s}
@keyframes hs-tap{from{opacity:.95;transform:scale(.2)}to{opacity:0;transform:scale(1.15)}}

/* ціль кроку: пульсує, поки до неї летить курсор */
.hs-t{position:relative}
.hs-t.is-hint{animation:hs-ring 1.1s ease-out infinite}
@keyframes hs-ring{from{box-shadow:0 0 0 0 rgba(255,176,32,.8)}to{box-shadow:0 0 0 .75em rgba(255,176,32,0)}}
.hs-tip{position:absolute;left:50%;top:calc(100% + .5em);width:4.4em;margin-left:-2.2em;padding:.35em 0;border-radius:.35em;
        background:#e3e3e3;color:#1f1f1f;font-size:.7em;font-style:normal;line-height:1.2;text-align:center;opacity:0;transition:opacity .15s}
.is-hover>.hs-tip{opacity:1}

/* 1. сторінка сайту */
.hs-site{background:var(--bg);font-family:Manrope,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.hs-s-top{display:flex;align-items:center;gap:1.3em;height:3.1em;padding:0 1.5em;background:#fff;border-bottom:1px solid var(--line)}
.hs-s-top img{display:block;width:auto;height:1.6em}
.hs-s-nav{display:flex;gap:.9em}
.hs-s-nav i{width:3.4em;height:.45em;border-radius:.3em;background:#dfe6ee}
.hs-s-book{margin-left:auto;padding:.5em .95em;border-radius:.55em;background:var(--brand);color:#fff;font-size:.72em;font-weight:700}
.hs-s-hero{height:6.3em;padding:1.1em 1.5em 0;color:#fff;
           background:radial-gradient(22em 9em at 90% 0,rgba(43,134,224,.5),transparent 60%),linear-gradient(135deg,var(--navy),#0b3f7a 60%,var(--brand))}
.hs-s-hero small{display:block;margin-bottom:.4em;font-size:.68em;color:#c9d6e6}
.hs-s-hero b{display:block;font-size:1.95em;line-height:1.1;letter-spacing:-.03em}
.hs-s-body{display:grid;grid-template-columns:minmax(0,1fr) 11.5em;gap:1em;padding:1.2em 1.5em}
.hs-s-card{padding:1.1em;border:1px solid var(--line);border-radius:.8em;background:#fff}
.hs-s-card+.hs-s-card{margin-top:.8em}
.hs-s-btn{display:inline-block;padding:.75em 1.2em;border-radius:.65em;background:var(--brand);color:#fff;font-size:.92em;font-weight:700;
          white-space:nowrap;transition:background .2s,transform .12s}
.hs-s-btn.is-hover{background:var(--brand-600)}
.hs-s-btn.is-click{transform:scale(.95)}
.hs-s-text i{display:block;height:.45em;margin:.55em 0;border-radius:.3em;background:#e6ecf2}
.hs-s-text i:nth-child(3n+2){width:88%}
.hs-s-text i:nth-child(3n){width:62%}
.hs-s-cta{padding:1em;border-radius:.8em;background:linear-gradient(135deg,var(--navy),var(--brand));color:#fff}
.hs-s-cta b{display:block;font-size:.85em}
.hs-s-cta i{display:block;width:80%;height:.4em;margin:.65em 0;border-radius:.3em;background:rgba(255,255,255,.25)}
.hs-s-cta span{display:block;padding:.55em;border-radius:.55em;background:var(--accent);color:#2b1d00;font-size:.7em;font-weight:700;text-align:center}

/* 2–3. Google Диск: папки перевізників і файли в папці */
.hs-drive{background:#f8fafd;color:#1f1f1f;font-family:"Google Sans",Roboto,Arial,sans-serif}
.hs-d-top{display:flex;align-items:center;gap:.5em;height:3.5em;padding:0 1.1em 0 1.3em}
.hs-d-logo{flex:none;width:1.75em;height:1.7em}
.hs-d-name{font-size:1.3em;color:#444746}
.hs-d-apps{flex:none;width:1.2em;height:1.2em;margin-left:auto;fill:#444746}
.hs-d-login{margin-left:.9em;padding:.55em 1.3em;border-radius:1.4em;background:#0b57d0;color:#fff;font-size:.8em;font-weight:500}
.hs-d-panel{position:absolute;left:.9em;right:.9em;top:3.5em;bottom:0;padding:.3em 1em 0;border-radius:1em 1em 0 0;background:#fff}
.hs-d-toggle{display:flex;justify-content:flex-end;padding:.3em 0}
.hs-d-toggle i{width:2.3em;height:1.45em;border:1px solid #747775;background:#fff}
.hs-d-toggle i:first-child{border-radius:.8em 0 0 .8em;border-right:0;background:#c2e7ff}
.hs-d-toggle i:last-child{border-radius:0 .8em .8em 0}
.hs-d-row{position:relative;display:flex;align-items:center;gap:1em;height:2.6em;padding:0 .7em;border-bottom:1px solid #e1e3e1;
          font-size:.85em;white-space:nowrap;transition:background .15s}
.hs-d-head{font-weight:500}
.hs-d-head .hs-d-n{gap:0}
.hs-d-head i{display:inline-grid;place-items:center;width:1.55em;height:1.55em;margin-left:.35em;border-radius:50%;background:#c2e7ff;color:#001d35;font-style:normal}
.hs-d-n{flex:1;min-width:0;display:flex;align-items:center;gap:1em;overflow:hidden}
.hs-d-n svg{flex:none;width:1.45em;height:1.45em;fill:#444746}
.hs-d-c{flex:none;width:11em;color:#444746}
.hs-d-c.d{width:8.3em}
.hs-d-c.s{width:5.8em}
.hs-d-row.is-hover{background:#f0f4f9}
.hs-d-row.is-click{background:#c2e7ff}

/* 4 і 6. Перегляд файлу поверх папки */
.hs-viewer{background:rgba(19,19,20,.97);color:#e3e3e3;font-family:"Google Sans",Roboto,Arial,sans-serif}
.hs-v-head{display:flex;align-items:center;gap:.8em;height:3.3em;padding:0 1em}
.hs-v-head svg{flex:none;width:1.3em;height:1.3em;fill:currentColor}
.hs-v-name{flex:1;min-width:0;line-height:1.25}
.hs-v-name b{display:block;overflow:hidden;color:#fff;font-size:.95em;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.hs-v-name small{display:block;color:#c7c7c7;font-size:.7em;word-spacing:.8em}
.hs-v-name .f2,.howto.is-next .hs-v-name .f1{display:none}
.howto.is-next .hs-v-name .f2{display:block}
.hs-v-tools{position:absolute;left:.9em;top:3.5em;display:flex;align-items:center;gap:.15em;padding:.2em .45em;border-radius:1.6em;background:#282a2c}
.hs-v-b{display:grid;place-items:center;width:2.1em;height:2.1em;border-radius:50%;transition:background .15s}
.hs-v-b svg{width:1.2em;height:1.2em;fill:#e3e3e3}
.hs-v-b.is-hover{background:rgba(255,255,255,.14)}
.hs-v-b.is-click{background:rgba(255,255,255,.28)}
.hs-v-sep{width:1px;height:1.2em;margin:0 .3em;background:#5f6368}
.hs-v-stage{position:absolute;left:0;right:0;top:6.3em;bottom:1em}
.hs-v-arr{position:absolute;top:50%;width:2.5em;height:2.5em;margin-top:-.5em;display:grid;place-items:center;border:1px solid #5f6368;border-radius:50%;
          background:#282a2c;transition:background .15s}
.hs-v-arr svg{width:1.4em;height:1.4em;fill:#e3e3e3}
.hs-v-prev{left:.9em}
.hs-v-next{right:.9em}
.hs-v-arr.is-hover{background:#3c4043}
.hs-v-arr.is-click{background:#5f6368}
.hs-toast{position:absolute;left:50%;bottom:1.9em;width:12.4em;margin-left:-6.2em;padding:.7em 0;border-radius:2em;background:var(--green);color:#fff;
          font:700 .85em/1 Manrope,system-ui,sans-serif;text-align:center;box-shadow:0 .4em 1.2em rgba(0,0,0,.35);
          opacity:0;transform:translateY(.8em);transition:opacity .3s,transform .3s}
.howto.is-printed .hs-toast{opacity:1;transform:none}
.howto.is-next .hs-toast{opacity:0}

/* скан документа: намальований бланк, розмір задає font-size */
.hs-doc{position:absolute;top:0;left:50%;width:14.4em;height:20.4em;margin-left:-7.2em;padding:1.35em 1.25em;background:#fff;
        box-shadow:0 .3em 1em rgba(0,0,0,.4);transition:opacity .4s,transform .4s}
.hs-doc:before{content:"";position:absolute;top:.45em;right:.45em;bottom:.45em;left:.45em;border:.22em solid #ddd5f0;border-radius:.2em}
.hs-doc-arms{display:block;width:1.3em;height:1.6em;margin:0 auto .5em;border-radius:.2em .2em .7em .7em;background:linear-gradient(#2f6fd6 50%,#f5c400 50%)}
.hs-doc-h{display:block;margin-bottom:.55em;color:#3b3f5c;font:700 .95em/1 Arial,sans-serif;letter-spacing:.16em;text-align:center}
.hs-doc i{display:block;height:.34em;margin:.52em 0;border-radius:.2em;background:#dcdfe8}
.hs-doc i.m{width:78%}
.hs-doc i.s{width:52%}
.hs-doc i.c{margin-left:auto;margin-right:auto}
.hs-doc-stamp{position:absolute;right:1.6em;bottom:1.7em;width:3.3em;height:3.3em;border:.2em solid rgba(47,111,214,.55);border-radius:50%;
              box-shadow:inset 0 0 0 .35em #fff,inset 0 0 0 .5em rgba(47,111,214,.35)}
.hs-doc-sign{position:absolute;left:1.6em;bottom:2.6em;width:4.5em;height:1.2em;border-bottom:.15em solid #3b3f5c;border-radius:0 0 50% 30%}
.hs-v-stage .p2{opacity:0;transform:translateX(3em)}
.howto.is-next .hs-v-stage .p1{opacity:0;transform:translateX(-3em)}
.howto.is-next .hs-v-stage .p2{opacity:1;transform:none}

/* 5. Вікно друку браузера */
.hs-print{display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.5);color:#202124;font-family:Roboto,Arial,sans-serif}
.hs-p{display:flex;width:40em;height:23.5em;overflow:hidden;border-radius:.6em;background:#fff;box-shadow:0 1em 3em rgba(0,0,0,.45)}
.hs-p-prev{position:relative;flex:1;background:#e8eaed}
.hs-p-prev .hs-doc{top:1.4em;font-size:.9em}
.hs-p-side{display:flex;flex-direction:column;width:15.5em;padding:1.1em 1.2em}
.hs-p-h{font-size:1.25em;font-weight:400}
.hs-p-sub{margin:.2em 0 .8em;color:#5f6368;font-size:.72em}
.hs-p-row{display:flex;align-items:center;justify-content:space-between;gap:.6em;padding:.4em 0;font-size:.78em}
.hs-p-row i{min-width:8em;padding:.35em .6em;border:1px solid #dadce0;border-radius:.3em;color:#3c4043;font-style:normal}
.hs-p-btns{display:flex;justify-content:flex-end;gap:.5em;margin-top:auto}
.hs-p-go,.hs-p-no{padding:.55em 1.1em;border-radius:1.5em;font-size:.8em;font-weight:500}
.hs-p-go{background:#1a73e8;color:#fff;transition:background .15s,transform .12s}
.hs-p-go.is-hover{background:#1765cc}
.hs-p-go.is-click{transform:scale(.94)}
.hs-p-no{border:1px solid #dadce0;color:#1a73e8}

/* вузький екран: полотно 36em, камера збільшує місце кліку */
@container (max-width:520px){
  .hs-bar,.hs-view{font-size:var(--hs-em,calc(100cqw / 36))}
  .hs-view{height:24.7em}
  .hs-canvas.is-zoom{transform:scale(1.4)}
  .hs-s-nav,.hs-s-aside{display:none}
  .hs-s-body{grid-template-columns:minmax(0,1fr)}
  .hs-d-c{display:none}
  .hs-d-c.d{display:block}
  .hs-v-stage .hs-doc{font-size:.84em}
  .hs-p{width:33em;height:21em}
  .hs-p-prev .hs-doc{font-size:.76em}
  .hs-p-row.color{display:none}
}

/* список кроків: він же керування — клік показує крок */
.howto-steps{display:grid;gap:8px;margin:18px 0 0;padding:0;list-style:none}
@media (min-width:640px){.howto-steps{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;column-gap:12px}}
.howto-steps button{position:relative;display:flex;gap:12px;width:100%;height:100%;padding:12px 14px;overflow:hidden;border:1px solid transparent;
                    border-radius:12px;background:none;color:var(--muted);font:inherit;font-size:15px;line-height:1.45;text-align:left;cursor:pointer;
                    transition:background .2s,border-color .2s}
.howto-steps button:hover{background:#f7fafd}
.howto-steps button:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.howto-steps b{display:block;color:var(--ink)}
.howto-n{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#eef2f6;color:var(--navy);font-size:14px;font-weight:800;
         transition:background .2s,color .2s}
.howto-steps [aria-current]{border-color:#d3e3f4;background:#eef5fc}
.howto-steps [aria-current]:hover{background:#eef5fc}
.howto-steps [aria-current] .howto-n{background:var(--brand);color:#fff}
/* смужка часу до наступного кроку; --dur ставить JS */
.howto-steps [aria-current]:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--brand);transform:scaleX(0);transform-origin:0 50%}
.howto.is-playing .howto-steps [aria-current]:after{animation:howto-bar var(--dur,3s) linear forwards}
@keyframes howto-bar{to{transform:scaleX(1)}}

.howto-play{position:absolute;left:10px;bottom:10px;z-index:2;display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;
            background:rgba(10,37,64,.7);color:#fff;cursor:pointer;transition:background .2s}
.howto-play[hidden]{display:none}
.howto-play:hover{background:var(--navy)}
.howto-play:focus-visible{outline:3px solid #ffd37a;outline-offset:2px}
.howto-play svg{width:16px;height:16px;fill:currentColor}
.howto-play .i-play,.howto:not(.is-playing) .howto-play .i-pause{display:none}
.howto:not(.is-playing) .howto-play .i-play{display:block}
@media (max-width:560px){.howto-play{left:6px;bottom:6px;width:30px;height:30px}.howto-play svg{width:14px;height:14px}}

@media (prefers-reduced-motion:reduce){
  .hs-cursor,.hs-canvas,.hs-scene,.hs-doc,.hs-toast{transition:none}
  .hs-canvas.is-zoom{transform:none}
  .hs-t.is-hint,.hs-ripple{animation:none}
}