/* The road sign pages (scripts/build-road-signs.mjs), on top of guides.css: the same nav, footer, buttons and brand
   tokens. The values below are docs/DESIGN.md tokens: surface, outline-variant, on-surface-variant, rounded-md and
   rounded-lg, label-md and body-sm, the sign-folder tints, and § Sign chart's 72% art share, 12px gap and 20px row gap. */
:root{
  --surface:#FFFFFF; --outline-variant:#EDE7D6; --on-surface-variant:#6B6357;
  --rounded-md:14px; --rounded-lg:20px; --sign-art:72%; --sign-gap:12px; --sign-row-gap:20px;
  --folder-red-back:#E9A6AF; --folder-red-front:#F6CDD2;
  --folder-blue-back:#9FB9E4; --folder-blue-front:#CBDAF2;
  --folder-amber-back:#F2CD5C; --folder-amber-front:#FFE594;
  --folder-yellow-back:#F3B81B; --folder-yellow-front:#FFD65A;
  --folder-green-back:#86BCA5; --folder-green-front:#BCDCCD;
  --label-md:600 14px/1.3 var(--body); --body-sm:400 13px/1.45 var(--body);
}

/* The chart: square surface tiles with a hairline, the cut-out filling 72%, the name under each (§ Sign chart). */
.rs-chart{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:var(--sign-row-gap) var(--sign-gap)}
.rs-sign{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.rs-tile{width:100%;aspect-ratio:1;border-radius:var(--rounded-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--outline-variant);display:grid;place-items:center}
.rs-tile img{width:var(--sign-art);height:var(--sign-art);object-fit:contain}
.rs-sign figcaption{display:flex;flex-direction:column;gap:2px;font:var(--label-md);color:var(--ink)}
.rs-code{font:var(--body-sm);color:var(--on-surface-variant)}
.rs-note{margin:32px 0 0;font-size:15px;line-height:1.6;color:var(--muted)}
.rs-dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.rs-dot-red{background:var(--folder-red-back)}.rs-dot-blue{background:var(--folder-blue-back)}.rs-dot-amber{background:var(--folder-amber-back)}
.rs-dot-yellow{background:var(--folder-yellow-back)}.rs-dot-green{background:var(--folder-green-back)}

/* Sample questions */
.rs-questions{padding-top:clamp(48px,6vw,72px);display:flex;flex-direction:column;gap:20px}
.rs-questions h2,.rs-groups h2,.rs-family h2{font-weight:800;font-size:clamp(30px,4.5vw,40px);line-height:1.05}
.rs-questions .g-lede{max-width:620px}
.rs-q-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:12px}
.rs-q{display:flex;flex-direction:column;border-radius:var(--rounded-lg);background:var(--surface);box-shadow:inset 0 0 0 1px var(--outline-variant);overflow:hidden}
.rs-q > img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--yellow-soft)}
.rs-q-text{padding:20px;display:flex;flex-direction:column;gap:12px}
.rs-eyebrow{font:700 12px/1.3 var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--on-surface-variant)}
.rs-q h3{font-weight:700;font-size:22px;line-height:1.25}
.rs-options{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:6px;font-size:16px;line-height:1.5}
.rs-answer summary{padding:16px 20px;font-size:15px}
.rs-answer p{padding:0 20px 16px;margin:0;font-size:15px;line-height:1.55}
.rs-tino{display:flex;gap:12px;align-items:flex-start;color:var(--muted)}
.rs-tino img{flex:none;border-radius:50%;background:var(--yellow)}
.g-btn-ghost{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}.g-btn-ghost:hover{color:var(--green)}

/* Every group, as chips under each family */
.rs-groups{padding-top:clamp(48px,6vw,72px);padding-bottom:16px;display:flex;flex-direction:column;gap:16px}
.rs-family-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.rs-family-row strong{flex:0 0 120px;font:var(--label-md);color:var(--on-surface-variant)}
.rs-family-row .g-chip{text-decoration:none}
.rs-family-row .g-chip[aria-current="page"]{background:var(--ink);color:#FFFFFF}

/* The hub: a folder per group in its tint, with three of its signs peeking out (§ Sign folder, flattened for the web) */
.g-hub-head .g-row{justify-content:center}
.rs-family{padding-top:clamp(40px,5vw,64px)}
.rs-family .g-lede{margin-top:10px;max-width:640px}
.rs-folders{margin-top:28px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px}
.rs-folder{display:flex;flex-direction:column;border-radius:var(--rounded-lg);overflow:hidden;text-decoration:none;color:var(--ink)}
.rs-folder:hover{color:var(--ink)}
.rs-folder-signs{display:flex;justify-content:center;align-items:flex-end;gap:8px;padding:28px 20px 0;min-height:132px}
.rs-folder-signs img{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(0,0,0,.14))}
.rs-folder-signs img:nth-child(1){transform:rotate(-8deg) translateY(6px)}
.rs-folder-signs img:nth-child(3){transform:rotate(8deg) translateY(6px)}
.rs-folder-text{display:flex;flex-direction:column;gap:4px;padding:18px 20px 22px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--outline-variant);border-radius:0 0 var(--rounded-lg) var(--rounded-lg);flex:1}
.rs-folder-text strong{font:700 22px/1.2 var(--display);letter-spacing:-0.01em}
.rs-folder-text span{font:var(--body-sm);color:var(--on-surface-variant)}
.rs-folder-text small{margin-top:6px;font-size:14px;line-height:1.5;color:var(--muted)}
.rs-folder-red{background:var(--folder-red-front)}.rs-folder-blue{background:var(--folder-blue-front)}.rs-folder-amber{background:var(--folder-amber-front)}
.rs-folder-yellow{background:var(--folder-yellow-front)}.rs-folder-green{background:var(--folder-green-front)}
.rs-family:last-of-type{padding-bottom:16px}

@media (max-width: 760px){
  .rs-chart{grid-template-columns:repeat(3,1fr)}
  .rs-sign figcaption{font-size:13px}
  .rs-family-row strong{flex-basis:100%}
}
@media (prefers-reduced-motion: no-preference){
  .rs-folder-signs img{transition:transform .35s ease}
  .rs-folder:hover .rs-folder-signs img{transform:translateY(-6px)}
}