/* יומן עבודות – המדריך (on top of style.css) */

.guide section{padding:0}
.narrow{max-width:900px}

/* hero */
.g-hero{padding:44px 0 26px}
.g-hero h1{font-size:clamp(36px,6vw,62px);font-weight:900;letter-spacing:-.02em;margin-bottom:14px}
.g-hero h1 em{font-style:normal;color:var(--rust)}
.g-hero .lead{margin-bottom:10px}
.g-ver{font-size:15px;color:var(--ink-3)}

/* table of contents */
.toc{padding:10px 0 34px}
.toc-t{font-size:24px;margin-bottom:14px}
.toc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.toc-list a,.toc-list .soon{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:var(--white);border:1.5px solid var(--line);color:var(--ink);text-decoration:none;font-weight:700;font-size:17px;line-height:1.35}
.toc-list a:hover{border-color:var(--orange)}
.toc-list .n{flex:none;width:34px;height:34px;border-radius:11px;background:var(--orange);color:var(--white);font-weight:900;display:flex;align-items:center;justify-content:center;font-size:16px}
.toc-list li.soon{opacity:.55}
.toc-list li.soon .n{background:var(--ink-3)}
.toc-list li.soon .t::after{content:" · בקרוב";font-weight:500;color:var(--ink-3);font-size:14px}

/* a chapter */
.ch{padding:38px 0 30px;border-top:1px solid var(--line);scroll-margin-top:86px}
#toc{scroll-margin-top:72px}
.ch:nth-of-type(even){background:var(--white)}
.ch-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:24px}
.ch-n{flex:none;width:52px;height:52px;border-radius:16px;background:var(--orange);color:var(--white);font-weight:900;font-size:26px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 18px rgba(185,83,10,.25)}
.ch-head h2{font-size:clamp(26px,4vw,36px);margin-bottom:6px}
.ch-lead{color:var(--ink-2)}

/* the steps */
.g-steps{list-style:none;margin:0;padding:0;counter-reset:st;display:flex;flex-direction:column;gap:18px}
.g-step{counter-increment:st;display:grid;grid-template-columns:1fr auto;gap:22px;align-items:start;padding:20px;border-radius:var(--radius);background:var(--cream);border:1.5px solid var(--line)}
.ch:nth-of-type(odd) .g-step{background:var(--white)}
.st-txt h3{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:900;margin-bottom:8px}
.st-txt h3::before{content:counter(st);flex:none;width:30px;height:30px;border-radius:50%;background:var(--sand);border:2px solid var(--orange);color:var(--rust);font-size:15px;font-weight:900;display:flex;align-items:center;justify-content:center}
.st-txt p{margin:0 0 8px;color:var(--ink-2)}
.st-txt p:last-child{margin-bottom:0}
.st-txt ul{margin:0 0 10px;padding-inline-start:20px;color:var(--ink-2)}
.st-txt li{margin-bottom:6px}
.st-txt b{color:var(--ink)}
.mut{color:var(--ink-3)!important;font-size:16px}
.g-link{font-weight:700}

/* the screenshots, in a phone frame */
.st-shot{margin:0;display:flex;gap:10px}
.st-shot img{width:220px;height:auto;border-radius:24px;border:7px solid #1c1714;box-shadow:0 12px 26px rgba(60,20,0,.18);background:#fff}
.g-step:not(:has(.st-shot)){grid-template-columns:1fr}

/* tip / warning boxes */
.box{margin-top:18px;padding:16px 18px;border-radius:16px;border-inline-start:5px solid var(--orange);background:var(--sand)}
.box>b{display:block;margin-bottom:4px;font-size:18px}
.box p{margin:0;color:var(--ink-2)}
.box.warn{border-color:#b42318;background:#fdf0ee}

/* nested steps (the subscription) */
.st-txt ol.sub-steps{margin:0 0 10px;padding-inline-start:22px;color:var(--ink-2)}
.st-txt ol.sub-steps li{margin-bottom:6px}

/* the folders tree */
.tree{background:var(--white);border:1.5px solid var(--line);border-radius:var(--radius);padding:16px 18px}
.ch:nth-of-type(even) .tree{background:var(--cream)}
.tree ul{list-style:none;margin:0;padding:0}
.tree ul ul{margin-top:10px;padding-inline-start:16px;border-inline-start:2px solid var(--line);display:flex;flex-direction:column;gap:10px}
.tree ul ul li{position:relative;padding-inline-start:14px}
.tree ul ul li::before{content:"";position:absolute;inset-inline-start:-16px;top:15px;width:24px;border-top:2px solid var(--line)}
.tree .fd{display:inline-block;font-weight:800;color:var(--ink);background:var(--sand);border-radius:9px;padding:3px 10px}
.tree .fd::before{content:"";display:inline-block;width:15px;height:11px;margin-inline-end:7px;border-radius:2px 2px 3px 3px;background:var(--orange);vertical-align:-1px}
.tree .fn{display:block;margin-top:3px;color:var(--ink-2);font-size:16px}

/* questions */
.g-faq{display:flex;flex-direction:column;gap:10px}
.g-faq details{background:var(--cream);border:1.5px solid var(--line);border-radius:16px;padding:0 18px}
.ch:nth-of-type(odd) .g-faq details{background:var(--white)}
.g-faq summary{cursor:pointer;list-style:none;padding:15px 0;font-weight:800;font-size:18px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.g-faq summary::-webkit-details-marker{display:none}
.g-faq summary::after{content:"+";flex:none;font-size:24px;font-weight:700;color:var(--orange);line-height:1}
.g-faq details[open] summary::after{content:"−"}
.g-faq details p{margin:0 0 16px;color:var(--ink-2)}
.g-faq details[open]{border-color:var(--orange)}

/* back to the contents (phones) */
.g-totop{position:fixed;inset-inline-start:14px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:25;padding:10px 16px;border-radius:999px;background:var(--ink);color:var(--white);font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 8px 20px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:opacity .2s}
.g-totop.show{opacity:1;pointer-events:auto}

@media (max-width:900px){
  .guide .sticky{display:none}
}
@media (max-width:720px){
  .toc-list{grid-template-columns:1fr}
  .g-step{grid-template-columns:1fr;padding:16px}
  .st-shot{justify-content:center}
  .st-shot img{width:min(230px,70vw)}
  .st-shot.duo img{width:calc(50% - 5px);max-width:210px;border-width:5px;border-radius:18px}
  .ch-n{width:44px;height:44px;font-size:22px;border-radius:13px}
  .tree{padding:14px 12px}
  .g-faq summary{font-size:17px}
}
@media (prefers-reduced-motion:reduce){.g-totop{transition:none}}