/* App shell (phase 1): the five-item navigation, the phone tab bar, the home start strip, the library hub and «من».
   One <nav class="app-nav"> sits in the header on wide screens and is fixed to the bottom edge on phones (it must not sit
   inside an element with backdrop-filter, which would make it the containing block of the fixed bar; the header below
   therefore drops the blur). --tabbar-space is the height other pages (the atlas canvas) must leave free at the bottom. */
:root{--tabbar-h:60px;--tabbar-space:0px}
body{min-height:100vh;min-height:100dvh}

.header{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0a0a0bf2}
.header-inner{gap:20px}
.header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.header-actions .button{min-height:44px}

.app-nav{display:flex;align-items:center;gap:4px;margin-inline:auto}
.app-nav-link{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:12px;color:var(--muted);font-size:.95rem;font-weight:600;line-height:1.3;white-space:nowrap;transition:background .2s,color .2s}
.app-nav-link:hover{background:#ffffff0f;color:var(--ink)}
.app-nav-link[aria-current="page"]{background:var(--orange-tint);color:var(--ink);box-shadow:inset 0 0 0 1px var(--orange-line)}
.app-nav-link[aria-current="page"] .app-nav-icon{color:var(--orange)}
.app-nav-icon{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Phones and small tablets: the same five items as a bottom tab bar. */
@media(max-width:899px){
 :root{--tabbar-space:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px))}
 html{scroll-padding-top:84px;scroll-padding-bottom:var(--tabbar-space)}
 body.has-tabbar{padding-bottom:var(--tabbar-space)}
 .header-inner{min-height:64px;padding-block:8px;flex-wrap:nowrap;gap:10px}
 .brand small{display:none}
 .brand-symbol{width:40px;height:40px;border-radius:12px}
 .brand strong{font-size:.95rem}
 .header-actions .button{font-size:.82rem;padding:8px 14px}
 .hide-narrow{display:none}
 .app-nav{position:fixed;inset-inline:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:0;padding:0 env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:#0c0c0e;border-top:1px solid var(--line-2);box-shadow:0 -10px 30px -12px #000}
 .app-nav-link{flex-direction:column;justify-content:center;gap:3px;min-height:var(--tabbar-h);padding:7px 2px;border-radius:0;font-size:.8rem;text-align:center;box-shadow:none!important;background:none}
 .app-nav-link:hover{background:none}
 .app-nav-link[aria-current="page"]{background:linear-gradient(#ff6b1a1f,#ff6b1a05);color:var(--ink);box-shadow:inset 0 2px 0 var(--orange)!important}
 .app-nav-link:focus-visible{outline-offset:-4px}
 .footer{margin-bottom:0}
}
@media(max-width:360px){.app-nav-link{font-size:.74rem}.brand strong{font-size:.85rem;letter-spacing:1px}}
@media print{.app-nav{display:none}body.has-tabbar{padding-bottom:0}}

/* Home: start strip with the «ادامه بده» / «از اینجا شروع کن» card and the title search. */
.shell-strip{position:relative;z-index:2;padding:18px 0 4px;background:linear-gradient(#0a0a0b,#0a0a0b00)}
.shell-strip-inner{max-width:1400px;margin:auto;padding:0 48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:18px;align-items:start}
.continue-card{display:flex;flex-direction:column;gap:2px;min-height:44px;padding:14px 18px;background:var(--raise);border:1px solid var(--orange-line);border-radius:16px;transition:border-color .2s,transform .2s}
.continue-card:hover{border-color:var(--orange);transform:translateY(-2px)}
.continue-kicker{font-size:.78rem;font-weight:700;color:var(--orange-ink)}
.continue-card strong{color:var(--ink);line-height:1.7}
.continue-card small{color:var(--muted);font-size:.82rem;line-height:1.7}
.search-box{min-width:0}
.search-row{display:flex;gap:8px}
.search-row input{flex:1;min-width:0;min-height:48px;padding:10px 16px;background:var(--field);color:var(--ink);border:1px solid var(--line-2);border-radius:14px}
.search-row input::placeholder{color:var(--dim)}
.search-row .button{min-height:48px;padding:10px 20px;border-radius:14px}
.search-note{margin:6px 4px 0}
.search-results{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.search-results[hidden]{display:none}
.search-results a{display:flex;flex-direction:column;gap:4px;min-height:44px;padding:10px 14px;background:var(--raise);border:1px solid var(--line);border-radius:12px;color:var(--soft);transition:border-color .18s,background .18s}
.search-results a:hover{border-color:var(--orange-line);color:var(--ink)}
.search-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 12px;width:100%}
.search-type{flex:none;min-width:4.6em;font-size:.74rem;font-weight:700;color:var(--orange-ink)}
.search-title{min-width:0;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.search-meta{margin-inline-start:auto;font-size:.76rem;color:var(--muted);background:#ffffff0a;padding:2px 8px;border-radius:999px;border:1px solid var(--line)}
.search-snippet{margin:2px 0 0;font-size:.84rem;line-height:1.75;color:var(--muted);overflow-wrap:anywhere}

/* Library hub and «من». */
.shelf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-top:28px}
.shelf-card{display:flex;flex-direction:column;gap:6px;padding:22px;background:var(--raise);border:1px solid var(--line-2);border-radius:var(--radius);transition:border-color .2s,transform .2s}
.shelf-card:hover{border-color:var(--orange-line);transform:translateY(-3px)}
.shelf-card h3{margin:0}
.shelf-card p{margin:0;font-size:.92rem}
.shelf-kicker{font-size:.76rem;font-weight:700;color:var(--orange-ink)}
.shelf-meta{margin-top:auto;padding-top:10px}
.search-found{padding-top:28px}
.me-progress{width:100%;height:10px;margin:6px 0 12px;accent-color:var(--orange)}
.install-steps{display:grid;gap:10px;padding-inline-start:20px;color:var(--soft)}
.install-steps[hidden],.me-install [hidden]{display:none}

@media(max-width:899px){
 .shell-strip-inner{grid-template-columns:1fr;padding:0 20px;gap:12px}
 .shell-strip{padding-top:12px}
 .shelf-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.continue-card,.shelf-card{transition:none}.continue-card:hover,.shelf-card:hover{transform:none}}