/* ==========================================================================
   70 · Style guide — فقط برای صفحهٔ /design-system/
   ========================================================================== */
.sg { padding-bottom: var(--sp-8); }
.sg-nav { position: sticky; top: var(--header-h); z-index: var(--z-dropdown); display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-8); padding: var(--sp-3) 0; background: var(--c-surface); border-bottom: 1px solid var(--c-line); }
.sg-nav a { padding: var(--sp-1) var(--sp-4); border-radius: var(--r-full); background: var(--c-surface-soft); color: var(--c-ink-900); font-size: var(--fs-sm); }
.sg-nav a:hover { background: var(--c-primary-600); color: var(--c-white); }
.sg-sec { margin-bottom: var(--sp-12); }
.sg-sec h2 { padding-bottom: var(--sp-2); border-bottom: 2px solid var(--c-primary-100); }
.sg-sec h3 { margin: var(--sp-6) 0 var(--sp-3); font-size: var(--fs-base); }
.sg code, .sg small code { direction: ltr; unicode-bidi: embed; padding: 0 var(--sp-1); border-radius: var(--sp-1); background: var(--c-surface-soft); color: var(--c-primary-700); font-size: var(--fs-xs); }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--sp-3); }
.sg-swatch { display: grid; gap: var(--sp-1); padding: var(--sp-2); border: 1px solid var(--c-line); border-radius: var(--r-md); font-size: var(--fs-xs); }
.sg-swatch span { height: 3.5rem; border: 1px solid rgba(0, 0, 0, .06); border-radius: var(--r-sm); }
.sg-swatch small { color: var(--c-ink-500); direction: ltr; text-align: end; }
.sg-table { display: grid; border: 1px solid var(--c-line); border-radius: var(--r-md); overflow: hidden; }
.sg-row { display: grid; grid-template-columns: 11rem 14rem 1fr; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--c-line); }
.sg-row:last-child { border-bottom: 0; }
.sg-use { color: var(--c-ink-500); font-size: var(--fs-xs); }
.sg-sample { color: var(--c-ink-900); font-weight: var(--fw-extrabold); line-height: var(--lh-tight); }
.sg-bar { height: var(--sp-3); border-radius: var(--sp-1); background: var(--c-primary-500); }
.sg-weights { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-4); color: var(--c-ink-900); }
.sg-shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--sp-4); }
.sg-shape { display: grid; gap: var(--sp-1); place-content: center; min-height: 6rem; padding: var(--sp-3); border: 1px solid var(--c-line); background: var(--c-primary-50); text-align: center; }
.sg-shape--shadow { border: 0; background: var(--c-white); }
.sg-shape small { color: var(--c-ink-500); font-size: var(--fs-xs); }
.sg-dark { display: inline-flex; padding: var(--sp-2); border-radius: var(--r-md); background: var(--c-ink-800); }
.sg-form { max-width: 40rem; }
.sg-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: var(--sp-2); }
.sg-icon { display: grid; justify-items: center; gap: var(--sp-1); padding: var(--sp-4) var(--sp-2); border: 1px solid var(--c-line); border-radius: var(--r-md); color: var(--c-primary-600); }
.sg-icon svg { width: var(--icon-lg); height: var(--icon-lg); }
.sg-icon small { color: var(--c-ink-500); font-size: var(--fs-2xs); direction: ltr; }
.sg-rules { display: grid; gap: var(--sp-3); padding-inline-start: var(--sp-5); line-height: var(--lh-loose); }
@media (max-width: 960px) { .sg-row { grid-template-columns: 1fr; gap: var(--sp-1); } .sg-nav { top: 3.625rem; } }