/* DubiLook website v3 — the guides family (group guide, its language picker, post guide, post builder) on top of the
   design's pages.css. Nothing here changes the look of the design's blocks; it covers what the live pages carry that
   the static design did not: the rulebook section (A4) inside a .gstep card, the invite-link card's numbered list,
   the language row, the picker's four cards, and the builder embedded inside the post guide's .prose article. */

/* ---------- Group guide ---------- */
.langs{display:flex;flex-wrap:wrap;gap:6px;margin-top:18px}
.langs a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px #e4e2f1;color:var(--ink);text-decoration:none;font:600 14px/1 var(--f-body)}
.langs a[aria-current="page"]{background:var(--ink);color:#fff;box-shadow:none}
.gstep .small{color:var(--muted)}
.gstep.rulebox h3{margin:0;font:700 clamp(20px,2.4vw,24px)/1.25 var(--f-body);letter-spacing:-.02em}
.gstep.rulebox ul{margin:0;padding-inline-start:20px;display:grid;gap:6px}
.gstep.rulebox li{color:var(--muted)}
.gstep.rulebox a{color:var(--purple);font-weight:600}
.gstep.rulebox code{font:500 .95em/1 ui-monospace,Menlo,Consolas,monospace}
.glist{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:14px}
.glist li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start}
.glist .k{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mist);font:700 14px/1 var(--f-body);color:var(--ink)}
.glist li>div{display:grid;gap:10px;justify-items:start}
.glist p{margin:0;color:var(--ink)}
.glist em{color:var(--muted);font-style:normal;font-size:14px}
.glist .note{display:flex;gap:8px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:#fff7e8;color:#7a4c00;font-size:14.5px;line-height:1.5}
.glist .note .ic{flex:none;width:18px;height:18px;margin-top:3px}
.glist .row{justify-self:stretch}
.gfoot{display:grid;gap:4px;padding:4px 8px 0}
.gfoot p{margin:0;color:var(--muted)}
[lang="fa"] .phead h1,[lang="ar"] .phead h1,[lang="fa"] .gstep h2,[lang="ar"] .gstep h2{letter-spacing:0;line-height:1.3}
[lang="fa"] .gstep .n,[lang="ar"] .gstep .n{padding-inline-end:0;padding-inline-start:.08em}

/* ---------- Language picker ---------- */
.langcards{padding-top:4px}
.langcards .gcard p{font:400 15px/1 var(--f-mark);letter-spacing:.08em}
@media (min-width:700px){.gcards.langcards{grid-template-columns:repeat(2,1fr)}}

/* ---------- The builder inside the post guide's article ---------- */
.prose a.btn{color:#fff;font-weight:700}
.prose a.btn.ghost{color:var(--ink)}
.prose .pbuild{grid-template-columns:1fr;gap:16px;padding-bottom:0;margin:4px 0 18px}
.prose .pbout{position:static}
.prose .pbform .field>span{font-size:14.5px;line-height:1.3}
.prose .pbform .field small{font-size:13px;line-height:1.5}
.pbafter p a{color:#fff;font-weight:600}