/* An article's own styles (views/guides.js articleHTML): linked in the head of article pages by the worker, loaded by
   guides.js on in-app navigation and by the editor preview. The prose (.guide-body) stays in app.css: other pages use it. */
.guide-top{display:flex;align-items:flex-start;gap:12px;margin:0 0 12px}
.guide-tags{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;flex:1;min-width:0;align-self:center}
.guide-tag{font:600 12px var(--f-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--spruce);text-decoration:none}
.guide-tag:hover{text-decoration:underline}
.guide-share{flex:none;width:44px;height:44px;color:var(--ink);background:var(--surface);border:1px solid var(--line);cursor:pointer}
.guide-share:hover{border-color:var(--ink)}
.guide-meta{font-size:14px;color:var(--muted);margin:12px 0 0}
.guide-meta a{color:inherit;text-decoration:underline;text-underline-offset:3px}.guide-meta a:hover{color:var(--ink)}
.guide-cover{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:var(--r);background:var(--sunk);margin:0 0 26px}
.guide-note{margin-top:22px}
/* Author box (views/guides.js articleHTML): who signs, the bio, the editorial policy link. */
.guide-author{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;margin:26px 0 0;display:grid;gap:6px;min-width:0;overflow-wrap:anywhere}
.guide-author p{margin:0;font-size:15px;line-height:1.5}
.guide-author .guide-author-h{font:600 12px var(--f-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.guide-author .guide-author-n{font:700 17px/1.3 var(--f-display)}
.guide-author a{color:var(--spruce);text-underline-offset:3px}
.guide-lang{margin:22px 0 0;font-weight:600}
.guide-lang a{color:var(--spruce)}
.guide-toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;margin:0 0 26px;font-size:15px}
.guide-toc-h{font-weight:700;margin:0 0 6px}
.guide-toc ol{margin:0;padding-left:1.4em;display:grid;gap:4px}
.guide-toc a{color:var(--spruce);text-underline-offset:3px}

/* Phone and tablet: one column, the side column after the comments. Wide screens (owner 2026-11-04, like the big
   news sites): the header and the cover span the page, the text and the side column start together below the cover. */
.guide-cols{display:grid;gap:8px;min-width:0}
.guide-main{min-width:0}
.guide-side{display:grid;gap:28px;align-content:start;align-self:start;min-width:0}
.guide-side .nl{margin-top:0}
.guide-side>[data-nl]:empty{display:none}
.guide-more h2{font-size:18px;margin:0 0 12px}
.guide-mini{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.guide-mini li{display:grid;gap:2px}
.guide-mini a{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;align-items:start;color:inherit;text-decoration:none;font:700 15px/1.3 var(--f-display);font-stretch:108%}
.guide-mini a:hover span{text-decoration:underline}
.guide-mini img{width:120px;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:var(--r-sm);background:var(--sunk)}
.guide-mini time{padding-left:132px;color:var(--muted)}
.guide-mini a:not(:has(img)){grid-template-columns:minmax(0,1fr)}
.guide-mini li:not(:has(img)) time{padding-left:0}
@media (max-width:420px){.guide-mini a{grid-template-columns:96px minmax(0,1fr)}.guide-mini img{width:96px}.guide-mini time{padding-left:108px}}
.guide-like{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:26px 0 0;padding:14px 0;border-block:1px solid var(--line)}
.guide-like p{margin:0;font-weight:600}
.guide-like[hidden]{display:none}
@media (min-width:1100px){
  .guide-wrap .guide{max-width:1116px}
  .guide-title{max-width:920px}
  .guide-cols{grid-template-columns:minmax(0,760px) 300px;gap:56px;justify-content:space-between}
  .guide-side{position:sticky;top:136px}
}
@media (min-width:1100px) and (max-height:860px){.guide-side{position:static}}
/* "Just listed" in the side column (views/guides.js listingsHTML): the 3 newest listings of the article's game. */
.guide-listings h2{font-size:18px;margin:0 0 12px}
.guide-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.guide-list a{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;align-items:center;min-height:78px;color:inherit;text-decoration:none}
.guide-list a:hover .gl-n{text-decoration:underline}
.guide-list img,.gl-ph{width:56px;height:78px;object-fit:contain;border-radius:4px;background:var(--sunk)}
.gl-t{display:grid;gap:2px;min-width:0}
.gl-n{font:700 15px/1.3 var(--f-display);font-stretch:108%;overflow-wrap:anywhere}
.gl-no{font-weight:500;color:var(--muted)}
.gl-s{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.gl-p{font-weight:700;font-variant-numeric:tabular-nums}
.gl-all{margin:10px 0 0}
.gl-all .a44{display:inline-flex;align-items:center;min-height:44px}