/*
 * A guide (M978, M979): its contents beside the text (a faint dot for each
 * part, the one being read lit with a line that fills as it is read), the
 * phone's bar that opens them, the steps' square numbers, a link beside each
 * heading, Download the guide, and the copy block any post may hold. Every
 * colour is the site's tokens, so dark mode and another accent follow.
 */
.gd-svg{width:16px;height:16px;flex:none}
.gd-logo{width:16px;height:16px;flex:none}

/* The reading column in the middle of the page, as a plain post's is, the contents in the room to its right (M978). */
@media (min-width:1200px){
  .tpl-cols--right:has(> .gd-aside){max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,var(--text-w, 760px)) minmax(0,1fr);gap:48px}
  .tpl-cols--right:has(> .gd-aside) > .tpl-main{grid-column:2;grid-row:1}
  .tpl-cols--right:has(> .gd-aside) > .gd-aside{grid-column:3;grid-row:1;width:min(100%,260px)}
}
@media (min-width:901px) and (max-width:1199px){
  .tpl-cols--right:has(> .gd-aside){grid-template-columns:minmax(0,1fr) 240px}
}
/* The side, kept in view, the ad space after it. */
.tpl-side.gd-aside{position:sticky;top:calc(var(--th-bar-h, 64px) + 24px);align-self:start;display:flex;flex-direction:column;gap:22px;padding-top:40px}
main:has(.po-trail) .tpl-side.gd-aside{padding-top:10px}
.gd-side__h{display:flex;align-items:center;gap:8px;margin:0 0 14px;color:var(--muted);font:500 14px var(--font-body);letter-spacing:0}
.gd-list{list-style:none;margin:0;padding:0 4px 0 0}
.gd-side .gd-list{max-height:calc(100vh - var(--th-bar-h, 64px) - 300px);min-height:120px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.gd-side .gd-list.is-long{-webkit-mask:linear-gradient(transparent,#000 28px,#000 calc(100% - 40px),transparent);mask:linear-gradient(transparent,#000 28px,#000 calc(100% - 40px),transparent)}
.gd-list a{position:relative;display:block;padding:9px 0 9px 22px;color:var(--muted);font:500 14.5px/1.35 var(--font-body);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gd-list a::before{content:"";position:absolute;left:4px;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;background:color-mix(in oklab,var(--muted) 32%,transparent)}
.gd-list a:hover{color:var(--ink)}
.gd-list a.is-on{color:var(--ink);font-weight:600}
.gd-list a.is-on::before{left:3px;top:6px;width:6px;height:calc(100% - 12px);margin:0;border-radius:6px;background:linear-gradient(var(--ink) 0 var(--f, 0%),color-mix(in oklab,var(--muted) 30%,transparent) var(--f, 0%))}
.gd-side--still .gd-list a.is-on::before{left:4px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--ink)}
.gd-list a.is-read{color:color-mix(in oklab,var(--ink) 70%,var(--muted))}
.gd-acts{display:grid;gap:8px;margin-top:18px}
.gd-all{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:8px;background:var(--card, var(--bg));color:var(--ink);font:600 13.5px var(--font-body);text-decoration:none;cursor:pointer}
.gd-all span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1439px){.gd-side .gd-dl em{display:none}}
.gd-all:hover{border-color:color-mix(in oklab,var(--ink) 35%,var(--border))}
.gd-all em{margin-left:auto;padding:1px 6px;border-radius:5px;background:var(--surface, var(--bg));color:var(--muted);font:700 11px var(--font-body);font-style:normal}
.gd-dl[aria-expanded="true"]{border-color:var(--blue);box-shadow:0 0 0 2px color-mix(in oklab,var(--blue) 20%,transparent)}
.gd-dc{padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--card, var(--bg));box-shadow:0 1px 3px rgba(0,0,0,.12)}
.gd-dc__t{display:block;font:700 15.5px var(--font-body);color:var(--ink)}
.gd-dc p{margin:6px 0 12px;color:var(--muted);font:400 13.5px/1.5 var(--font-body)}
.gd-dc__lvl{display:flex;align-items:center;gap:8px;margin:0 0 4px;color:var(--ink);font:500 13.5px var(--font-body)}
.gd-dc__lvl span{padding:2px 8px;border-radius:999px;background:color-mix(in oklab,var(--gold) 26%,transparent);color:var(--ink);font:700 12px var(--font-body)}
.gd-dc__go{display:flex;justify-content:center;width:100%;margin-top:8px;text-decoration:none}
.gd-dc p.gd-dc__s{margin:12px 0 0;text-align:center;font-size:13px}
.gd-dc__s a{color:var(--blue);font-weight:600}

/* On a phone, or when the guide puts them above the text: a bar that opens the list. */
.gd-barwrap{margin:0 0 22px}
.gd-pbar{border:1px solid var(--border);border-radius:10px;background:var(--card, var(--bg))}
.gd-pbar summary{display:flex;align-items:center;gap:10px;padding:11px 14px;color:var(--ink);font:600 14px var(--font-body);list-style:none;cursor:pointer}
.gd-pbar summary::-webkit-details-marker{display:none}
.gd-pbar summary em{margin-left:auto;color:var(--muted);font-style:normal;font-weight:500}
.gd-pbar[open] summary .gd-svg:last-child{transform:rotate(180deg)}
.gd-pbar .gd-list{padding:0 10px 6px;border-top:1px solid var(--border);margin-top:0}
.gd-pbar .gd-list a{white-space:normal}
.gd-pbar > .gd-all,.gd-pbar > .gd-dc{margin:0 10px 10px;width:calc(100% - 20px)}
.gd-barwrap--phone{display:none}
@media (max-width:900px){
  .gd-barwrap--phone{display:block;position:sticky;top:calc(var(--th-bar-h, 64px) + 8px);z-index:20}
  .tpl-side.gd-aside{display:none}
}

/* The steps' numbers and a link beside each heading. */
.gd-post .at-text h2,.gd-post .at-text h3{position:relative;scroll-margin-top:calc(var(--th-bar-h, 64px) + 24px)}
.gd-n{display:inline-grid;place-items:center;min-width:34px;height:34px;margin-right:12px;padding:0 6px;border-radius:9px;background:var(--blue);color:var(--on-blue, #fff);font:800 17px var(--font-body);vertical-align:3px}
.gd-hl{display:inline-flex;margin-left:10px;color:var(--muted);vertical-align:middle;opacity:0;transition:opacity .15s}
.at-text h2:hover .gd-hl,.at-text h3:hover .gd-hl,.gd-hl:focus-visible{opacity:1}
.gd-hl.is-done{opacity:1;color:var(--ok, #1a9e5b)}
@media (hover:none){.gd-hl{opacity:.7}}

/* A copy block: its label, its words with the blanks marked, Show all past its fold, Share and Copy. */
.gd-blk{position:relative;margin:18px 0 26px;border:1px solid var(--border);border-radius:12px;background:var(--surface, var(--bg));scroll-margin-top:calc(var(--th-bar-h, 64px) + 24px)}
.gd-blk:target{box-shadow:0 0 0 2px color-mix(in oklab,var(--blue) 40%,transparent)}
.gd-blk__h{display:flex;align-items:center;gap:8px;margin:0;padding:10px 14px;border-bottom:1px solid var(--border);color:var(--muted);font:700 12.5px var(--font-body);letter-spacing:.06em;text-transform:uppercase}
.gd-blk__h span{color:var(--ink)}
.gd-blk__h em{font-style:normal}
.at-text .gd-blk__t{margin:0;padding:16px 18px;border-radius:0;background:none;color:var(--ink);font:400 15.5px/1.65 var(--font-body);white-space:pre-wrap;overflow-wrap:anywhere;overflow:visible}
.gd-blk--code .gd-blk__t{font:400 14px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre;overflow-x:auto;overflow-wrap:normal}
.gd-blk__t mark{padding:0 3px;border-radius:4px;background:color-mix(in oklab,var(--gold) 30%,transparent);color:inherit}
.gd-blk.is-folded .gd-blk__t{max-height:calc(var(--gd-fold, 8) * 1.65em + 32px);overflow:hidden;-webkit-mask:linear-gradient(#000 60%,transparent);mask:linear-gradient(#000 60%,transparent)}
.gd-blk__f{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--border)}
.gd-more{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--muted);font:600 13.5px var(--font-body);cursor:pointer}
.gd-more[aria-expanded="true"] .gd-svg{transform:rotate(180deg)}
.gd-said{display:inline-flex;align-items:center;gap:7px;margin-right:auto;color:var(--ok, #1a9e5b);font:600 13.5px var(--font-body)}
.gd-more + .gd-said{margin-right:0}
.gd-blk__f > .gd-more{margin-right:auto}
.gd-btn{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:1px solid var(--border);border-radius:8px;background:var(--card, var(--bg));color:var(--ink);font:600 14px var(--font-body);text-decoration:none;cursor:pointer}
.gd-btn--go{border-color:transparent;background:var(--blue);color:var(--on-blue, #fff)}
.gd-btn--go:hover{background:color-mix(in oklab,var(--blue) 88%,#000)}
.gd-btn--ok,.gd-btn--ok:hover{border-color:transparent;background:var(--ok, #1a9e5b);color:#fff}
.gd-btn--sq{width:36px;padding:0;justify-content:center}
.gd-btn[aria-expanded="true"]{border-color:var(--blue)}
.gd-menu{position:absolute;right:14px;bottom:56px;z-index:5;width:260px;padding:6px;border:1px solid var(--border);border-radius:10px;background:var(--card, var(--bg));box-shadow:0 1px 3px rgba(0,0,0,.12)}
.gd-menu a,.gd-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:7px;background:none;color:var(--ink);font:500 14px var(--font-body);text-align:left;text-decoration:none;cursor:pointer}
.gd-menu a:hover,.gd-menu button:hover,.gd-menu :focus-visible{background:color-mix(in oklab,var(--blue) 9%,transparent);outline:0}
.gd-menu .gd-sep{display:block;border-top:1px solid var(--border);margin:6px 4px}
.gd-menu small{display:block;padding:6px 10px 2px;color:var(--muted);font:600 11.5px var(--font-body);letter-spacing:.08em;text-transform:uppercase}
@media (max-width:699px){
  .gd-btn span.w{display:none}
  .at-text .gd-blk__t{font-size:15px;padding:14px 16px}
  .gd-menu{left:10px;right:10px;width:auto}
}
@media (prefers-reduced-motion:no-preference){html:has(.gd-post){scroll-behavior:smooth}}
@media print{.tpl-side.gd-aside,.gd-barwrap,.gd-blk__f,.gd-menu,.gd-hl{display:none}}