/* SPDX-License-Identifier: GPL-3.0-or-later */
/* The Parseh guide -- the chrome round every page: the bar, the sidebar, the
   search, the contents, the code blocks.  The page's text itself is drawn
   by the studio's own stylesheet (site/_parseh/studio.css, app.css confined
   to the article by the engine), so a box or an exercise looks here exactly
   as it does in the studio.

   THE PALETTE IS THE TOOLBOX'S, VERBATIM.  The tokens below are copied from
   lib/parseh.css -- the three text levels (--ink, --dim, --faint), the three
   surfaces (--bg, --card, --boxbg / --hl), the Viva Magenta accent -- in its
   three themes, light, dark and sepia, switched by the same data-theme on
   <html> and the same `parseh_theme` choice (assets/guide.js).  A guide
   copied out of Parseh keeps them; inside Parseh, tests/test_html_guide.py
   holds the two files to the same values. */

/* ---------------- tokens (from lib/parseh.css) ---------------- */
:root{
  --bg:#f3eff1;
  --card:#ffffff;
  --ink:#241e21;
  --dim:#635358;
  --faint:#a2949a;
  --rule:#e3d9dd;
  --accent:#be3455;
  --accentlt:#ce5b78;
  --accent-fg:#ffffff;
  --hl:#f7dde5;
  --boxbg:#faf4f6;
  --danger:#9b3327; --ok:#2e7d4f; --warn:#a8760a;
  --danger-fg:#ffffff;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]):not([data-theme=sepia]){
    --bg:#171214; --card:#211a1d; --ink:#e6dade; --dim:#ac9ba1; --faint:#6e6065;
    --rule:#382c31; --accent:#ee8aa3; --accentlt:#d97c93; --accent-fg:#171214;
    --hl:#3d222a; --boxbg:#2a2024;
    --danger:#e79b84; --ok:#6fbf8b; --warn:#dda653;
    --danger-fg:#171214;
  }
}
:root[data-theme=dark]{
  --bg:#171214; --card:#211a1d; --ink:#e6dade; --dim:#ac9ba1; --faint:#6e6065;
  --rule:#382c31; --accent:#ee8aa3; --accentlt:#d97c93; --accent-fg:#171214;
  --hl:#3d222a; --boxbg:#2a2024;
  --danger:#e79b84; --ok:#6fbf8b; --warn:#dda653;
  --danger-fg:#171214;
}
:root[data-theme=sepia]{
  --bg:#ece5d4;
  --card:#f8f3e6;
  --ink:#3c3425;
  --dim:#6f6653;
  --faint:#9d9078;
  --rule:#d8cfba;
  --hl:#efd6d0;
  --boxbg:#efe7d1;
}

/* ---------------- the guide's own tokens ---------------- */
/* Code is coloured with the studio's five mark colours (app.css --fac-*),
   lifted for the dark theme exactly as the studio lifts them. */
:root{
  --g-top:48px;
  --g-side:17.5rem;
  --g-mono:ui-monospace,"SF Mono","Cascadia Mono","DejaVu Sans Mono",Menlo,Consolas,monospace;
  --g-serif:"TeX Gyre Pagella","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --g-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --g-crimson:#8E2B34; --g-indigo:#2F3E8F; --g-teal:#13605C; --g-violet:#5C2E7E; --g-amber:#8A5A0B;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]):not([data-theme=sepia]){
    --g-crimson:#E4808A; --g-indigo:#93A6EE; --g-teal:#5FC0B8; --g-violet:#C193E4; --g-amber:#DDA653;
  }
}
:root[data-theme=dark]{
  --g-crimson:#E4808A; --g-indigo:#93A6EE; --g-teal:#5FC0B8; --g-violet:#C193E4; --g-amber:#DDA653;
}

/* the brand glyph and the front page's serif, from the compiled site's
   fonts when there are any (the front page is styled before a compile too,
   with the fallbacks) */
@font-face{font-family:'Noto Nastaliq Urdu';
  src:url(../site/_parseh/fonts/NotoNastaliqUrdu.woff2) format('woff2');font-display:swap}
@font-face{font-family:"TeX Gyre Pagella";font-weight:400;font-style:normal;font-display:swap;
  src:local("TeX Gyre Pagella"),url(../site/_parseh/fonts/texgyrepagella-regular.otf) format("opentype")}
@font-face{font-family:"TeX Gyre Pagella";font-weight:700;font-style:normal;font-display:swap;
  src:local("TeX Gyre Pagella Bold"),url(../site/_parseh/fonts/texgyrepagella-bold.otf) format("opentype")}
@font-face{font-family:"TeX Gyre Pagella";font-weight:400;font-style:italic;font-display:swap;
  src:local("TeX Gyre Pagella Italic"),url(../site/_parseh/fonts/texgyrepagella-italic.otf) format("opentype")}

/* ---------------- the page ---------------- */
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--g-top) + 12px)}
body.guide{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 var(--g-sans);-webkit-text-size-adjust:100%}
body.guide [hidden]{display:none!important}
.g-skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--card);color:var(--accent);padding:8px 12px}
.g-skip:focus{left:8px;top:8px}

/* ---------------- the bar ---------------- */
.g-top{position:sticky;top:0;z-index:40;height:var(--g-top);display:flex;align-items:center;gap:10px;
  padding:0 12px;background:var(--card);border-bottom:1px solid var(--rule)}
.g-top button,.g-top .g-hub{font:inherit;font-size:13px;padding:5px 10px;
  border:1px solid var(--rule);background:var(--bg);color:var(--ink);border-radius:6px;
  cursor:pointer;white-space:nowrap;text-decoration:none;line-height:1.3}
.g-top button:hover,.g-top .g-hub:hover{border-color:var(--accentlt);color:var(--accent)}
.g-top .g-menu{font-size:16px;padding:3px 9px}
.g-brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  color:var(--ink)!important;font-weight:600;font-size:15px;white-space:nowrap}
.g-brand:hover{color:var(--accent)!important}
.g-glyph{font-family:'Noto Nastaliq Urdu',Vazirmatn,serif;font-size:16px;line-height:1;width:28px;height:28px;
  border-radius:50%;background:var(--accent);color:var(--accent-fg);display:inline-flex;
  align-items:center;justify-content:center;padding-bottom:6px;flex:none}
.g-where{color:var(--faint);font-size:13px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-where .g-sep{margin:0 6px}
.g-where .g-title{color:var(--dim)}
.g-sp{flex:1}

/* ---------------- the layout ---------------- */
.g-layout{display:grid;grid-template-columns:var(--g-side) minmax(0,1fr);min-height:calc(100vh - var(--g-top))}
html[data-side=closed] .g-layout{grid-template-columns:minmax(0,1fr)}
html[data-side=closed] .g-side{display:none}
.g-side{position:sticky;top:var(--g-top);align-self:start;height:calc(100vh - var(--g-top));
  overflow:auto;overscroll-behavior:contain;background:var(--card);border-right:1px solid var(--rule);
  padding:12px 10px 40px;font-size:14px}
.g-backdrop{display:none}

/* the tree of pages */
.g-tree{list-style:none;margin:0;padding:0}
.g-tree .g-tree{padding-left:12px;margin-left:8px;border-left:1px solid var(--rule)}
.g-top-tree{margin-bottom:6px}
.g-side .g-link,.g-sec-t{display:block;padding:4px 8px;border-radius:6px;color:var(--ink)!important;
  text-decoration:none;line-height:1.35}
.g-side .g-link:hover{background:var(--bg);color:var(--accent)!important}
.g-side .g-link.g-here{background:var(--hl);color:var(--accent)!important;font-weight:600}
.g-sec>details>summary{list-style:none;display:flex;align-items:center;cursor:pointer;border-radius:6px}
.g-sec>details>summary::-webkit-details-marker{display:none}
.g-sec>details>summary::before{content:"▸";flex:none;width:14px;color:var(--faint);font-size:11px;
  transition:transform .15s;display:inline-block;text-align:center}
.g-sec>details[open]>summary::before{transform:rotate(90deg)}
.g-sec>details>summary>.g-link,.g-sec>details>summary>.g-sec-t{flex:1;font-weight:600}
.g-sec-t{color:var(--dim)!important}
.g-nav-empty{color:var(--dim);font-size:13px;padding:8px;line-height:1.45}

/* the search */
.g-search{position:relative;margin:0 0 12px}
.g-search input{width:100%;font:inherit;font-size:14px;padding:7px 10px;border:1px solid var(--rule);
  border-radius:8px;background:var(--bg);color:var(--ink)}
.g-search input:focus{outline:2px solid color-mix(in srgb,var(--accent) 45%,transparent);outline-offset:1px}
.g-results{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:var(--card);
  border:1px solid var(--rule);border-radius:8px;box-shadow:0 8px 26px rgba(0,0,0,.14);
  max-height:60vh;overflow:auto;padding:4px}
.g-results a{display:block;padding:7px 9px;border-radius:6px;text-decoration:none;color:var(--ink)!important}
.g-results a:hover,.g-results a.on{background:var(--hl)}
.g-results .g-r-t{font-weight:600;color:var(--accent)}
.g-results .g-r-s{display:block;color:var(--faint);font-size:12px}
.g-results .g-r-x{display:block;color:var(--dim);font-size:12.5px;margin-top:2px}
.g-results mark{background:var(--hl);color:inherit;border-radius:2px}
.g-results .g-r-none{padding:8px;color:var(--dim);font-size:13px}

/* ---------------- the main column ---------------- */
/* overflow-x:clip: a footnote's hover cloud waits, unseen, beside the text it
   belongs to, and must not widen the page into a sideways scroll on a phone
   (clip, not hidden: nothing here becomes a scroller, the contents stay sticky) */
.g-main{min-width:0;padding:0 18px 40px;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;
  overflow-x:clip}
.g-article{min-width:0}
.g-article .sheet{--sheet-width:840px;margin:1.4rem auto 1.6rem}
.g-article .sheet>:first-child{margin-top:0}
.g-foot{max-width:840px;margin:0 auto;color:var(--faint);font-size:12px;text-align:center;padding:10px 0 0}
.g-foot code{font-family:var(--g-mono);font-size:11.5px}
/* the author's two links (lib/author.py), on the line under the foot's first:
   --dim and not --faint, so that a link is readable at AA, and padded so that
   a finger can hit one on a phone */
.g-foot a{color:var(--dim);display:inline-block;padding:6px 8px}
.g-foot a:hover,.g-foot a:focus-visible{color:var(--accent)}

/* the contents of the page: a card above the text, or a column beside it */
.g-toc{max-width:840px;width:100%;margin:1.2rem auto 0;background:var(--card);border:1px solid var(--rule);
  border-radius:10px;padding:8px 14px;font-size:14px}
.g-toc summary{cursor:pointer;color:var(--dim);font-weight:600;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.g-toc ul{list-style:none;margin:6px 0 2px;padding:0}
.g-toc li a{display:block;padding:2px 0;color:var(--ink)!important;text-decoration:none}
.g-toc li a:hover,.g-toc li a.on{color:var(--accent)!important}
.g-toc .g-toc-3 a{padding-left:14px;color:var(--dim)!important;font-size:13px}
@media (min-width:1280px){
  .g-main{grid-template-columns:minmax(0,1fr) 15rem;column-gap:18px}
  .g-toc{grid-column:2;grid-row:1 / span 3;position:sticky;top:calc(var(--g-top) + 20px);
    align-self:start;margin-top:1.4rem;max-height:calc(100vh - var(--g-top) - 40px);overflow:auto}
  .g-toc summary{pointer-events:none;list-style:none}
  .g-toc summary::-webkit-details-marker{display:none}
  .g-article,.g-pager,.g-foot{grid-column:1}
}

/* the layer the studio's cloud is put in (guide.js bindCloud): a line of no
   height along the top of the page, so that the cloud's own coordinates are
   the document's and its width is measured against the window's, inside
   .pz, which is where the studio's rules for it are written; the layer
   itself paints nothing and is never a target */
.g-cloud-layer{position:absolute;top:0;left:0;right:0;height:0;min-height:0;margin:0;padding:0;
  background:none;pointer-events:none}
.g-cloud-layer .fapal{pointer-events:auto}
@media print{.g-cloud-layer{display:none}}

/* the way on */
.g-pager{max-width:840px;width:100%;margin:0 auto;display:flex;gap:12px}
.g-pager a{flex:1;display:block;padding:10px 14px;background:var(--card);border:1px solid var(--rule);
  border-radius:10px;text-decoration:none;color:var(--accent);font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis}
.g-pager a:hover{border-color:var(--accentlt)}
.g-pager a span{display:block;font-size:12px;color:var(--faint);font-weight:400}
.g-pager .g-next{text-align:right}

/* ---------------- inside the sheet: what the studio has no rule for ---------------- */
.g-article .sheet h1.g-h1,.g-article .sheet .g-h4,.g-article .sheet .g-h5,.g-article .sheet .g-h6{
  font-family:"TeX Gyre Heros","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;line-height:1.25}
.g-article .sheet h1.g-h1{font-size:1.6em;color:var(--accent);margin:1.4em 0 .5em}
.g-article .sheet .g-h4{font-size:1.04em;margin:1.3em 0 .4em;color:var(--ink)}
.g-article .sheet .g-h5{font-size:.96em;margin:1.2em 0 .35em;color:var(--dim)}
.g-article .sheet .g-h6{font-size:.9em;margin:1.1em 0 .3em;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.g-anchor{margin-left:.35em;font-size:.8em;color:var(--faint)!important;text-decoration:none;opacity:0;transition:opacity .15s}
:is(h1,h2,h3,h4,h5,h6):hover>.g-anchor,.g-anchor:focus{opacity:1}
@media (hover:none){.g-anchor{opacity:.5}}
.g-article .sheet hr{border:0;border-top:1px solid var(--rule);margin:1.8em 0}
.g-article .sheet img{max-width:100%;height:auto}
.g-article .sheet img.g-img{vertical-align:middle;cursor:zoom-in}
.g-article .sheet figure.img img,.g-article .sheet .g-figure img{cursor:zoom-in}
.g-article .sheet del{color:var(--dim)}
.g-article .sheet ol ol,.g-article .sheet ul ol,.g-article .sheet ol ul{margin:.15em 0}
.g-article .sheet li>p{margin:.3em 0}
.g-article .sheet li.g-task{list-style:none;margin-left:-1.35em}
.g-article .sheet li.g-task>input{margin:0 .45em 0 0;vertical-align:-1px;accent-color:var(--accent)}
.g-article .sheet dl.g-dl dd+dd{margin-top:.25em}
.g-figure{margin:1.3em 0;text-align:center}
.g-figure figcaption{font-size:.88em;color:var(--dim);margin-top:.45em}
.g-figure figcaption h4{margin:0;font-size:1em;color:var(--ink)}
.g-figure figcaption p{margin:.2em 0 0}
.g-details{margin:1em 0;border:1px solid var(--rule);border-radius:8px;background:var(--card);padding:.35em .9em}
.g-details>summary{cursor:pointer;font-weight:700;color:var(--accent);padding:.25em 0}
.g-details[open]>summary{margin-bottom:.4em;border-bottom:1px solid var(--rule)}
.g-embed{position:relative;aspect-ratio:16/9;margin:1.3em 0}
.g-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:6px}
/* a YouTube video on a page opened from the disk, where its player says
   only "Error 153": out of sight at once, then a card in its place that
   opens it on YouTube, and a line saying where it plays (guide.js videos()) */
:root[data-guide-disk] iframe[src*="youtube"]{visibility:hidden}
.g-yt{position:relative;display:flex;align-items:flex-end;width:100%;height:100%;overflow:hidden;
  background:#171214;color:#fff!important;text-decoration:none!important;container-type:inline-size}
.g-article .sheet figure.video .g-yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  cursor:pointer}
.g-yt-play{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;
  border-radius:14px;background:rgba(23,18,20,.8);box-shadow:0 0 0 1px rgba(255,255,255,.28);
  transition:background .15s}
.g-yt-play::after{content:"";position:absolute;left:26px;top:13px;border-style:solid;
  border-width:11px 0 11px 19px;border-color:transparent transparent transparent #fff}
.g-yt:hover .g-yt-play,.g-yt:focus-visible .g-yt-play{background:#e62117}
.g-yt:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.g-yt-say{position:relative;margin:10px;padding:4px 10px;border-radius:6px;background:rgba(0,0,0,.72);
  font:600 14px/1.35 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  max-width:calc(100% - 20px)}
/* the label is never cut: cut, it lost the start time on a phone, where a
   video 70% wide is a card of 150-230px.  What it has room for is the
   card's width, not the window's -- a narrow video on a desktop is as
   narrow -- so a narrow card sets it smaller, and a narrower one says only
   "YouTube, 0:30 ↗", with the play mark lifted clear of it; a tiny one
   (a video 40% wide on a phone) drops the mark, which has no room left.
   A browser without container queries wraps the words instead. */
@container (max-width:300px){.g-yt-say{margin:7px;padding:3px 8px;font-size:12px;max-width:calc(100% - 14px)}
  .g-yt-play{transform:scale(.8)}}
@container (max-width:250px){.g-yt-long{display:none}
  .g-yt-play{top:calc(50% - 14px)}}
@container (max-width:140px){.g-yt-play{display:none}
  .g-yt-say{margin:4px;padding:2px 6px;font-size:11px;max-width:calc(100% - 8px)}}
.g-article .sheet .g-yt-note{margin:.3em 0 0;font-size:.78em;line-height:1.45;color:var(--dim)}
.g-social{margin:1em 0}
.g-qr{margin:1.3em 0;display:flex;flex-direction:column;align-items:flex-start;gap:.4em}
.g-qr svg{max-width:100%;height:auto;border-radius:4px}
.g-qr figcaption{font-size:.85em;color:var(--dim);word-break:break-all}
.g-error{margin:1em 0;padding:.7em 1em;border-left:4px solid var(--danger);
  background:color-mix(in srgb,var(--danger) 10%,var(--card));color:var(--ink);border-radius:4px;font-size:.92em}
.g-error code{font-family:var(--g-mono);font-size:.9em}
.g-children ul{list-style:none;padding:0;margin:1.6em 0 0;border-top:1px solid var(--rule)}
.g-children li{padding:.55em 0;border-bottom:1px solid var(--rule)}
.g-children .g-child-t{font-weight:700}
.g-children .g-child-d{display:block;color:var(--dim);font-size:.9em}

/* ---------------- code ---------------- */
.g-code{margin:1.2em 0;border:1px solid var(--rule);border-radius:8px;background:var(--boxbg);
  overflow:hidden;font-size:14px;line-height:1.5;text-align:left;direction:ltr;unicode-bidi:isolate}
.g-code-bar{display:flex;align-items:center;gap:8px;padding:3px 6px 3px 12px;
  border-bottom:1px solid var(--rule);background:color-mix(in srgb,var(--rule) 45%,var(--boxbg))}
.g-code-lang{font:600 11px/1.6 var(--g-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);flex:1}
/* .g-code .g-copy, not .g-copy: the studio's sheet sets every button in the
   article to the text's font, and one class would lose to that */
.g-code .g-copy{font:12px/1.2 var(--g-sans);padding:4px 10px;border:1px solid var(--rule);border-radius:6px;
  background:var(--card);color:var(--ink);cursor:pointer}
.g-code .g-copy:hover{border-color:var(--accentlt);color:var(--accent)}
.g-code .g-copy.done{background:var(--ok);border-color:var(--ok);color:#fff}
.g-code .g-copy.failed{background:var(--danger);border-color:var(--danger);color:var(--danger-fg)}
.g-pre{margin:0;padding:10px 0;overflow-x:auto;tab-size:4;-moz-tab-size:4}
.g-article .sheet .g-pre code,.g-pre code{display:block;min-width:max-content;font-family:var(--g-mono);
  font-size:13.5px;background:none;padding:0;border-radius:0;color:var(--ink);white-space:pre}
.g-line{display:block;padding:0 14px;min-height:1.5em}
.g-line.g-hl{background:color-mix(in srgb,var(--accent) 14%,transparent);box-shadow:inset 3px 0 var(--accent)}
.g-ln{display:inline-block;min-width:2.6em;margin-right:12px;padding-right:10px;text-align:right;
  color:var(--faint);border-right:1px solid var(--rule);user-select:none;-webkit-user-select:none}
.t-kw{color:var(--accent);font-weight:600}
.t-str{color:var(--g-teal)}
.t-com{color:var(--faint);font-style:italic}
.t-num,.t-lit{color:var(--g-amber)}
.t-fn{color:var(--g-indigo)}
.t-tag{color:var(--g-crimson)}
.t-attr{color:var(--g-violet)}
.t-var{color:var(--g-indigo)}
.t-op{color:var(--dim)}
.t-head{color:var(--accent);font-weight:700}
.t-mark{color:var(--g-crimson);font-weight:600}
.t-meta{color:var(--g-violet)}
.t-link{color:var(--g-indigo)}
.t-em{font-style:italic}
.t-strong{font-weight:700}

/* a parseh-example: the source above, what the studio draws from it below */
.g-example{margin:1.3em 0;border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--card)}
.g-example>.g-code{margin:0;border:0;border-radius:0;border-bottom:1px solid var(--rule)}
.g-example-out{padding:.6em 1.1em 1em;position:relative}
.g-example-label{font:600 11px/1.6 var(--g-sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--faint);margin-bottom:.35em}
.g-example-out>.titleblock{margin-bottom:1.1em}
.g-example-out .footnotes{font-size:.9em}

/* a LaTeX drawing is black on nothing (lib/latexdraw.py): on the dark sheet it
   would vanish, so it is turned to the sheet's own ink; the hue turn keeps a
   coloured drawing's colours where they were */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]):not([data-theme=sepia]) .g-article figure.latex img,
  :root:not([data-theme=light]):not([data-theme=sepia]) .g-article img.latex-inline{
    filter:invert(.9) hue-rotate(180deg)}
}
:root[data-theme=dark] .g-article figure.latex img,
:root[data-theme=dark] .g-article img.latex-inline{filter:invert(.9) hue-rotate(180deg)}

/* ---------------- a picture, large ---------------- */
.g-lightbox{position:fixed;inset:0;z-index:90;background:rgba(10,6,8,.86);display:flex;
  align-items:center;justify-content:center;padding:24px;cursor:zoom-out}
.g-lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;
  box-shadow:0 10px 40px rgba(0,0,0,.5);background:#fff}
.g-lightbox button{position:absolute;top:12px;right:12px;font:inherit;font-size:14px;padding:6px 12px;
  border-radius:6px;border:1px solid rgba(255,255,255,.4);background:rgba(0,0,0,.4);color:#fff;cursor:pointer}

/* ---------------- the front page ---------------- */
.g-sheet{font-family:var(--g-serif);font-size:17px;line-height:1.5;color:var(--ink);background:var(--card);
  max-width:840px;margin:1.4rem auto 1.6rem;padding:clamp(1.4rem,4vw,3rem) clamp(1.1rem,5vw,3.4rem);
  border-radius:3px;box-shadow:0 1px 3px rgba(0,0,0,.14),0 10px 34px rgba(0,0,0,.10)}
.g-sheet h1,.g-sheet h2{font-family:"TeX Gyre Heros","Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--accent)}
.g-sheet h2{font-size:1.3em;margin:1.6em 0 .5em}
.g-hero{text-align:center;margin-bottom:1.6em}
/* Nastaliq hangs its dots far below the line (the registry gives it a line
   height of 2.6 where it sets whole lines): the room below the word keeps
   the three dots of its پ off the heading under it */
.g-hero .g-hero-fa{font-family:'Noto Nastaliq Urdu',Vazirmatn,serif;font-size:46px;line-height:1.5;
  padding-bottom:.5em;color:var(--accent);display:block}
.g-hero h1{margin:.1em 0 .2em;font-size:2em}
.g-hero p{color:var(--dim);margin:0 auto;max-width:34em}
.g-doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:1em 0 0;padding:0;list-style:none}
.g-doors li{background:var(--boxbg);border:1px solid var(--rule);border-radius:10px;padding:.7em .9em}
.g-doors b{display:block;color:var(--accent);font-family:"TeX Gyre Heros","Helvetica Neue",Helvetica,Arial,sans-serif}
.g-doors span{font-size:.92em;color:var(--dim)}
.g-contents{margin:.4em 0 0;padding-left:1.2em}
.g-contents li{margin:.25em 0}
.g-contents .g-contents{margin:.2em 0}
.g-notice{margin:1.2em 0;padding:.8em 1em;border-radius:8px;border:1px solid var(--rule);
  border-left:4px solid var(--warn);background:color-mix(in srgb,var(--warn) 9%,var(--card));
  font-family:var(--g-sans);font-size:14.5px;line-height:1.5}
.g-notice.g-ok{border-left-color:var(--ok);background:color-mix(in srgb,var(--ok) 9%,var(--card))}
.g-notice.g-bad{border-left-color:var(--danger);background:color-mix(in srgb,var(--danger) 9%,var(--card))}
.g-notice p{margin:0 0 .5em}
.g-notice p:last-child{margin-bottom:0}
.g-notice button{font:inherit;font-size:14px;padding:6px 14px;border-radius:6px;border:1px solid var(--accent);
  background:var(--accent);color:var(--accent-fg);cursor:pointer}
.g-notice button:disabled{opacity:.6;cursor:progress}
.g-notice pre{max-height:14em;overflow:auto;font:12px/1.4 var(--g-mono);background:var(--boxbg);
  border:1px solid var(--rule);border-radius:6px;padding:8px;white-space:pre-wrap;margin:.6em 0 0}

/* ---------------- phones and narrow windows: the sidebar is a drawer ---------------- */
@media (max-width:900px){
  .g-layout,html[data-side=closed] .g-layout{grid-template-columns:minmax(0,1fr)}
  /* stretch, not the desktop's start: a fixed box aligned to the start of
     its inset box would shrink to its content instead of reaching the bottom.
     Over Parseh's "Working…" pill (lib/activity.js, z-index 55) when it is
     open, as every panel somebody opens is: the pill covers no list. */
  .g-side,html[data-side=closed] .g-side{display:block;position:fixed;top:var(--g-top);left:0;bottom:0;
    height:auto;align-self:stretch;width:min(86vw,var(--g-side));z-index:61;transform:translateX(-102%);
    transition:transform .2s ease;box-shadow:none}
  html.g-drawer .g-side{transform:none;box-shadow:0 0 40px rgba(0,0,0,.25)}
  html.g-drawer .g-backdrop{display:block;position:fixed;inset:var(--g-top) 0 0 0;z-index:60;
    background:rgba(0,0,0,.32)}
  html.g-drawer body{overflow:hidden}
  .g-where .g-crumbs,.g-where .g-sep{display:none}
  .g-name{display:none}
}
@media (max-width:560px){
  .g-top{gap:6px;padding:0 8px}
  .g-main{padding:0 8px 28px}
  .g-article .sheet{margin:.8rem auto 1.2rem}
  .g-sheet{margin:.8rem auto 1.2rem}
  .g-doors{grid-template-columns:minmax(0,1fr)}
  .g-pager{flex-direction:column}
  .g-pager .g-next{text-align:left}
  .g-code{font-size:13px}
}

/* ---------------- print ---------------- */
@media print{
  .g-top,.g-side,.g-backdrop,.g-pager,.g-toc,.g-copy,.g-anchor,.g-search,.g-notice{display:none!important}
  .g-layout{display:block}
  body.guide{background:#fff}
  .g-code{break-inside:avoid}
}