/* ==========================================================================
   StudentHPC — Style guide page only.
   Not shipped to visitors; this styles the reference page itself.
   ========================================================================== */
.sg-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-12); align-items: start; }
.sg-nav { position: sticky; top: calc(var(--topbar-h) + var(--sp-6)); }
.sg-nav__title { font-size: var(--fs-3xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-muted); margin-bottom: var(--sp-3); }
.sg-nav__list { display: flex; flex-direction: column; border-left: 1px solid var(--border-base); }
.sg-nav__list a { padding: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--text-secondary); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; }
.sg-nav__list a:hover { color: var(--text); }
.sg-nav__list a[aria-current='true'] { color: var(--text-brand); font-weight: var(--fw-semibold); border-left-color: var(--border-brand); }

.sg-section { padding-top: var(--sp-10); scroll-margin-top: calc(var(--topbar-h) + var(--sp-6)); }
.sg-section + .sg-section { border-top: 1px solid var(--border-hair); margin-top: var(--sp-12); }
.sg-section__title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--ls-display); }
.sg-section__note { font-size: var(--fs-base); color: var(--text-secondary); line-height: var(--lh-relaxed); max-width: 68ch; margin-top: var(--sp-3); }

.sg-block { margin-top: var(--sp-8); }
.sg-label { font-size: var(--fs-3xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-muted); margin-bottom: var(--sp-4); }

/* Colour swatches */
.sg-ramp { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: var(--sp-2); }
.sg-chip { border: 1px solid var(--border-base); border-radius: var(--r-2); overflow: hidden; }
.sg-chip__well { height: 62px; }
.sg-chip__meta { padding: var(--sp-2) var(--sp-3); background: var(--surface); border-top: 1px solid var(--border-hair); }
.sg-chip__name { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); }
.sg-chip__hex { font-family: var(--font-mono); font-size: 0.625rem; color: var(--text-muted); text-transform: uppercase; }

/* Type scale */
.sg-type__row { display: grid; grid-template-columns: 132px 1fr; gap: var(--sp-6); align-items: baseline; padding: var(--sp-4) 0; border-bottom: 1px solid var(--border-hair); }
.sg-type__meta { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-muted); }
.sg-type__sample { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Spacing */
.sg-space__row { display: grid; grid-template-columns: 92px 64px 1fr; gap: var(--sp-4); align-items: center; padding: var(--sp-2) 0; }
.sg-space__bar { height: 14px; background: var(--pine-300); border-radius: var(--r-1); }

.sg-demo { padding: var(--sp-6); border: 1px dashed var(--border-base); border-radius: var(--r-2); background: var(--surface-inset); }
.sg-demo + .sg-demo { margin-top: var(--sp-4); }
.sg-demo--white { background: var(--surface); }

.sg-do-dont { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
.sg-rule { border: 1px solid var(--border-base); border-left: 3px solid var(--status-ok-dot); border-radius: var(--r-1); padding: var(--sp-4) var(--sp-5); background: var(--surface); }
.sg-rule--dont { border-left-color: var(--status-err-dot); }
.sg-rule__head { font-size: var(--fs-2xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--status-ok-fg); margin-bottom: var(--sp-2); }
.sg-rule--dont .sg-rule__head { color: var(--status-err-fg); }
.sg-rule__body { font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-relaxed); }
.sg-rule__body + .sg-rule__body { margin-top: var(--sp-2); }

@media (max-width: 900px) {
  .sg-layout { grid-template-columns: minmax(0, 1fr); }
  .sg-nav { position: static; }
  .sg-do-dont { grid-template-columns: minmax(0, 1fr); }
  .sg-type__row { grid-template-columns: 96px 1fr; gap: var(--sp-3); }
}