/* app_24_guides (inbox 0432): the code tag, the rail group rows, the /guides/ cards, the frame every
   guide wears (the tab strip, chips, copy, the picture zoom) and the gate. On every page from shell.head: the rail
   is on every page and the head is never swapped. Brand tokens only; a guide's own look is its
   folder's guide.css, loaded on its pages alone. Every class carries the gd- prefix. */

/* ---------- the code tag: dark gray, the rail rows wear it ---------- */
.gd-mtag{flex:none;display:inline-block;padding:3px 6px;border-radius:5px;background:var(--s3);border:1px solid var(--hl2);
  font:600 10px/1 var(--fm);letter-spacing:.06em;color:var(--faint)}
.gd-draft{opacity:.5}

/* ---------- the rail group: the label is the shell's .sb-grp, a row is a guide ---------- */
.gd-rrow{display:flex;align-items:center;gap:9px;height:27px;padding:0 8px 0 13px;margin:0 8px 0 22px;border-radius:7px;
  color:var(--dim);font:500 12px/1 var(--fd);min-width:0;text-decoration:none}
.gd-rrow:hover{background:var(--s2);color:var(--ink)}
/* the guide open in the window, the way the Home card wears act: gray ground, ink text, no accent bar (0432) */
.gd-rrow.act{background:var(--s2);color:var(--ink)}
.gd-rrow .gd-mtag{padding:2px 5px;font-size:9px}
.gd-rlab{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gd-locked{color:var(--faint)}
.gd-lock{flex:none;width:9px;height:8px;border:1.5px solid var(--faint);border-radius:2px;position:relative;
  box-sizing:border-box;margin:3px 1px 0 0}
.gd-lock::before{content:"";position:absolute;left:1px;right:1px;top:-5px;height:4px;
  border:1.5px solid var(--faint);border-bottom:0;border-radius:3px 3px 0 0}

/* ---------- /guides/: one card per guide ---------- */
.gd-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:var(--gap);margin-top:34px}
.gd-card{display:flex;flex-direction:column;gap:10px;padding:22px;border:1px solid var(--hl2);border-radius:var(--rc);
  background:var(--s1);color:var(--dim);text-decoration:none;min-width:0;transition:border-color .15s}
.gd-card:hover,.gd-card:focus-visible{border-color:var(--hl3);color:var(--ink);outline:none}
.gd-card-top{display:flex;align-items:center;gap:8px}
.gd-card-t{font:700 1.2rem/1.25 var(--fd);color:var(--ink)}
.gd-card-b{font:400 .95rem/1.55 var(--fd)}
.gd-mode,.gd-added{font:500 9.5px/1 var(--fm);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--faint)}
.gd-added{margin-left:auto;color:var(--acc)}
.gd-code{flex:none;display:inline-block;padding:4px 7px;border-radius:6px;background:var(--s3);border:1px solid var(--hl2);
  font:600 11px/1 var(--fm);letter-spacing:.06em;color:var(--faint)}
.gd-none{color:var(--faint)}

/* ---------- the frame: the guide window is the container, so its breakpoints are container queries ---------- */
.gd{container-type:inline-size;min-width:0}
/* the strip never scrolls sideways from 900px up: it tightens under 1140px and wraps as the last resort (0432) */
.gd-strip{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:0 clamp(16px,3cqw,40px);
  background:var(--canvas);border-bottom:1px solid var(--hl1);overflow-x:auto;scrollbar-width:none}
.gd-strip .gd-code{margin-right:10px}
/* the shell's tabs bar (shell.css .tabs a): no box, faint text, dim under the pointer, ink when open, and the open
   tab's flat accent line on the strip's bottom hairline, inset 10px (Erik round 3, 0432: never a pill or a glow) */
.gd-tab{flex:none;position:relative;padding:15px 11px;color:var(--faint);font:500 13.5px/1 var(--fd);text-decoration:none;white-space:nowrap}
.gd-tab:hover{color:var(--dim)}
.gd-tab:focus-visible{outline:none;color:var(--ink);background:rgb(from var(--ink) r g b / .07)}
.gd-tab.gd-on{color:var(--ink)}
.gd-tab.gd-on::before{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;background:var(--acc)}
/* specs.py `sep`: a hairline bar before the extra tabs */
.gd-sep{flex:none;align-self:stretch;width:1px;margin:12px 8px;background:var(--hl2)}
.gd-page[hidden]{display:none}
/* the one gutter of every guide page, the strip's own, so a page's left edge sits under the strip's */
.gd-page{padding:0 clamp(16px,3cqw,40px)}

/* chip groups: .gd-chips[data-group] > .gd-chip[data-tab] opens .gd-panel[data-group][data-tab] */
/* P36's chips, the look every guide shares */
.gd-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 14px}
.gd-chip{padding:9px 16px;background:var(--s1);border:1px solid var(--hl1);border-radius:var(--rb);cursor:pointer;
  font:600 12.5px/1 var(--fd);color:var(--faint);transition:border-color .15s,color .15s,background .15s}
.gd-chip:hover{color:var(--dim2);border-color:var(--hl2)}
.gd-chip.on{color:var(--ink);background:var(--s3);border-color:var(--hl3)}
.gd-panel{display:none}
.gd-panel.on{display:block}

/* copy buttons and the picture zoom */
.gd-copy{cursor:pointer}
/* above any guide's own copy look and its hover (.gd[data-guide] .gd-copy:hover), so Copied always shows */
.gd[data-guide] .gd-copy.gd-copied,.gd[data-guide] .gd-copy.gd-copied:hover{color:var(--green);
  border-color:rgb(from var(--green) r g b / .5)}
img.gd-zoom{cursor:zoom-in}
.gd-lb{max-width:none;max-height:none;width:100vw;height:100vh;margin:0;padding:24px;border:0;box-sizing:border-box;
  display:grid;place-items:center;background:rgb(from var(--canvas) r g b / .92);cursor:zoom-out}
.gd-lb:not([open]){display:none}
.gd-lb::backdrop{background:transparent}
.gd-lb img{max-width:100%;max-height:100%;border-radius:var(--rc);box-shadow:0 18px 44px rgb(from var(--canvas) r g b / .6)}

/* ---------- the gate: the StarterKit's grid (app_resources' rs-kit, 0603), what is inside as ticks under the head
   beside the picture, then the card (Erik 2026-09-30, 0369). The card is the guide form's (app_optin). ---------- */
.gd-gate .wrap.rs-kit{grid-template-areas:"pill pill" "h1 img" "sub img" "pts img" "card card"}
.gd-gate .rs-kit-list{grid-area:pts;grid-template-columns:minmax(0,1fr);margin-top:20px}
.gd-gate .rs-kit-img > .gd-code{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.gd-door{text-align:center}
.gd-door-in{display:inline-block;margin-top:16px;color:var(--dim);font:500 .85rem/1 var(--fd)}
.gd-door-in:hover{color:var(--ink)}
@container page (max-width:620px){
  .gd-gate .wrap.rs-kit{grid-template-areas:"pill" "h1" "sub" "pts" "img" "card"}
}

/* a full strip needs about 1140px: under it the items tighten */
@container (max-width:1140px){
  .gd-strip{gap:0}
  .gd-tab{padding:15px 7px}
  .gd-tab.gd-on::before{left:6px;right:6px}
}
/* a phone-sized guide scrolls the strip in one row */
@container (max-width:900px){
  .gd-strip{flex-wrap:nowrap}
}