/* ═══════════════════════════════════════════════════════════════
   brand-packet.css — Brand System Documentation Page
   Styles UNIQUE to src/components/index.njk that are NOT in
   components.css, dataviz.css, or other shared CSS.
   Dependencies: brand-tokens.css, colors.css, components.css
   Used by: src/components/index.njk only
   ═══════════════════════════════════════════════════════════════ */

/* Nav, sections, reveal, hero, footer, accessibility, and dropdown
   are provided by components.css (loaded via base.njk). */

img,svg{max-width:100%;display:block}

/* ══ TYPOGRAPHY SPECIMENS ══ */
.type-spec{margin-bottom:var(--space-2xl);padding-bottom:var(--space-2xl);
  border-bottom:1px solid var(--color-border)}
.type-spec:last-child{border-bottom:none}
.type-label{font-family:var(--font-meta);font-size:var(--text-micro);color:var(--teal-500);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;margin-bottom:var(--space-xs)}
.type-note{font-family:var(--font-meta);font-size:var(--text-small);color:var(--color-text-muted);margin-top:var(--space-xs)}
.font-tbl-wrap{overflow-x:auto;margin-top:var(--space-xl);-webkit-overflow-scrolling:touch}
.font-tbl{width:100%;border-collapse:collapse;min-width:500px}
.font-tbl th{font-family:var(--font-meta);font-size:var(--text-micro);color:var(--color-text-muted);
  text-transform:uppercase;letter-spacing:var(--tracking-caps);text-align:left;
  padding:var(--space-xs) var(--space-sm);border-bottom:1px solid var(--color-border-strong);white-space:nowrap}
.font-tbl td{padding:var(--space-sm) var(--space-sm);border-bottom:1px solid var(--color-border);
  font-size:var(--text-meta);white-space:nowrap}
.font-tbl .fn{font-family:var(--font-meta);font-weight:var(--weight-medium)}
.font-tbl .lic{font-family:var(--font-meta);font-size:var(--text-small);color:var(--teal-600)}

/* ══ COLOR RAMPS ══ */
.ramp-wrap{margin-bottom:var(--space-2xl)}
.ramp-lbl{font-family:var(--font-meta);font-size:var(--text-micro);color:var(--color-text-muted);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;margin-bottom:var(--space-xs)}
.ramp{display:flex;height:64px;border-radius:var(--radius-md);overflow:hidden}
.ramp-s{flex:1;display:flex;align-items:flex-end;justify-content:center;
  padding:0 2px 6px;font-family:var(--font-meta);font-size:9px;cursor:pointer;position:relative;
  transition:flex var(--duration-med) var(--ease-out);overflow:hidden;text-align:center;line-height:1.2}
.ramp-s:hover{flex:2}
.ramp-s.lt{color:var(--color-text-secondary)}.ramp-s.dk{color:var(--viz-text-secondary)}
.ramp-s .copied{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:9px;font-weight:700;letter-spacing:0.05em;color:#fff;background:var(--color-overlay-dark);
  padding:3px 8px;border-radius:3px;pointer-events:none;white-space:nowrap;
  animation:copiedPop 900ms var(--ease-out) forwards}
@keyframes copiedPop{0%{opacity:0;transform:translate(-50%,-50%) scale(0.8)}
  15%{opacity:1;transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%)}}
@media(max-width:520px){.ramp{height:52px}.ramp-s{font-size:7px;padding-bottom:4px}}

/* Color format tabs */
.fmt-tabs{display:flex;gap:2px;margin-bottom:var(--space-md)}
.fmt-tab{font-family:var(--font-meta);font-size:var(--text-micro);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;padding:var(--space-xs) var(--space-md);
  background:var(--color-bg-muted);color:var(--color-text-muted);border:none;cursor:pointer;
  border-radius:var(--radius-sm);transition:all var(--duration-fast)}
.fmt-tab.on{background:var(--teal-400);color:#fff}

/* A11y cards */
.a11y-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--space-md);margin-top:var(--space-lg)}
.a11y-card{padding:var(--space-lg);border-radius:var(--radius-md);
  display:flex;flex-direction:column;gap:4px}

/* ══ SPACING DEMO ══ */
.space-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:var(--space-md);margin-bottom:var(--space-2xl)}
.space-item{display:flex;flex-direction:column;align-items:center;gap:4px;justify-content:flex-end;min-height:120px}
.space-box{background:var(--teal-100);border:1px solid var(--teal-300);border-radius:var(--radius-sm);
  transition:background var(--duration-fast)}
.space-item:hover .space-box{background:var(--teal-200)}
.space-val{font-family:var(--font-meta);font-size:var(--text-micro);color:var(--color-text-muted)}
.space-tok{font-family:var(--font-meta);font-size:9px;color:var(--teal-600)}

/* ══ LAYOUT DIAGRAMS ══ */
.layout-dia{border-radius:var(--radius-lg);padding:var(--space-lg);margin-bottom:var(--space-xl)}
.layout-box{border:1px solid var(--dark-border);border-radius:var(--radius-sm);padding:var(--space-lg)}
.layout-2col{display:flex;gap:5.7%;margin-top:var(--space-md)}
.layout-left{width:24.3%;min-height:72px;background:var(--purple-overlay-15);
  border:1px dashed var(--purple-400);border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-meta);font-size:var(--text-micro);color:var(--purple-300)}
.layout-right{width:70%;min-height:72px;background:var(--teal-overlay-10);
  border:1px dashed var(--teal-400);border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-meta);font-size:var(--text-micro);color:var(--teal-400)}
.layout-3col{display:flex;gap:var(--space-md);margin-top:var(--space-md)}
.layout-card{flex:1;aspect-ratio:1.3;background:var(--teal-overlay-06);
  border:1px dashed var(--teal-overlay-30);border-radius:var(--radius-sm);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-meta);font-size:var(--text-micro);color:var(--teal-400);opacity:0.7}
@media(max-width:768px){
  .layout-2col{flex-direction:column}
  .layout-left,.layout-right{width:100%}
}

/* ══ COMPONENT DEMOS ══ */
.comp-show{margin-bottom:var(--space-3xl);transition:background var(--duration-fast) var(--ease-out);
  border-radius:var(--radius-md);padding:var(--space-md);margin:calc(-1 * var(--space-md))}
.comp-show:hover{background:var(--color-hover-subtle)}
.comp-lbl{font-family:var(--font-meta);font-size:var(--text-micro);color:var(--teal-500);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;margin-bottom:var(--space-md)}

/* ══ VIZ BOXES (component page specific) ══ */
.viz-box{background:var(--dark-bg);border-radius:var(--radius-lg);padding:var(--space-xl);position:relative;
  margin-bottom:var(--space-xl);overflow:hidden;overflow-x:auto;-webkit-overflow-scrolling:touch}
.viz-title{font-family:var(--font-body);font-size:var(--text-body);font-weight:var(--weight-semi);
  color:var(--viz-text-primary);margin-bottom:4px}
.viz-sub{font-family:var(--font-meta);font-size:var(--text-small);
  color:var(--viz-text-muted);margin-bottom:var(--space-lg)}
.viz-box svg{display:block;width:100%;height:auto;max-width:100%}
@media(max-width:520px){.viz-box{padding:var(--space-md)}.viz-title{font-size:var(--text-meta)}.viz-sub{font-size:9px}}
.viz-leg{display:flex;gap:var(--space-md);margin-top:var(--space-md);flex-wrap:wrap}
.viz-leg-item{display:flex;align-items:center;gap:4px}
.viz-leg-dot{width:8px;height:8px;border-radius:50%}
.viz-leg-lbl{font-family:var(--font-meta);font-size:var(--text-small);color:var(--viz-text-secondary)}

/* Spec table */
.spec-tbl{width:100%;border-collapse:collapse;margin:var(--space-lg) 0}
.spec-tbl th{font-family:var(--font-meta);font-size:var(--text-micro);
  color:var(--viz-text-muted);text-transform:uppercase;letter-spacing:var(--tracking-caps);
  text-align:left;padding:var(--space-xs) var(--space-md);border-bottom:1px solid var(--dark-border)}
.spec-tbl td{padding:var(--space-xs) var(--space-md);
  border-bottom:1px solid var(--viz-grid);
  font-family:var(--font-meta);font-size:var(--text-small);color:var(--viz-text-secondary)}
.spec-tbl .sp{color:var(--teal-300)}.spec-tbl .sv{color:var(--viz-text-primary);font-weight:var(--weight-medium)}

/* ══ CODE BLOCKS ══ */
.code-wrap{margin:var(--space-lg) 0;position:relative}
.code-tabs{display:flex;gap:2px}
.code-tab{font-family:var(--font-meta);font-size:var(--text-micro);letter-spacing:var(--tracking-caps);
  text-transform:uppercase;padding:var(--space-xs) var(--space-md);
  background:var(--dark-surface);color:var(--viz-text-muted);border:none;cursor:pointer;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;transition:all var(--duration-fast)}
.code-tab.on{background:#2a2a2a;color:var(--teal-400)}
.code-pane{background:#2a2a2a;padding:var(--space-lg);border-radius:0 var(--radius-sm) var(--radius-sm) var(--radius-sm);
  overflow-x:auto;display:none}
.code-pane.on{display:block}
.code-pane pre{font-family:var(--font-meta);font-size:var(--text-small);line-height:1.7;
  color:var(--viz-text-secondary);white-space:pre;margin:0}
.code-pane .kw{color:var(--purple-300)}.code-pane .str{color:var(--teal-300)}
.code-pane .num{color:var(--cat-peach)}.code-pane .cm{color:var(--viz-text-faint)}
.code-pane .fn{color:var(--cat-gold)}
.code-cp{position:absolute;top:var(--space-xs);right:var(--space-xs);font-family:var(--font-meta);
  font-size:var(--text-micro);color:var(--viz-text-muted);background:var(--viz-grid);
  border:1px solid var(--viz-stroke);padding:2px 8px;border-radius:var(--radius-sm);
  cursor:pointer;transition:all var(--duration-fast);z-index:2}
.code-cp:hover{background:var(--viz-stroke);color:var(--teal-400)}

/* ══ MAP BASEMAP DEMOS ══ */
.map-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-md);margin:var(--space-lg) 0}
.map-card{aspect-ratio:1.4;border-radius:var(--radius-md);display:flex;align-items:flex-end;
  padding:var(--space-md);position:relative;overflow:hidden}
.map-name{font-family:var(--font-meta);font-size:var(--text-small);color:var(--viz-text-primary);z-index:1}

/* ══ DARK MODE TABLE FIX ══ */
.theme-dark table,.theme-dark th,.theme-dark td{color:inherit;border-color:var(--color-border)}
.theme-dark .font-tbl th{color:var(--color-text-muted)}
.theme-dark .font-tbl td{color:var(--color-text-secondary)}
.theme-dark .font-tbl .lic{color:var(--teal-300)}

/* ══ DONUT SIZING ══ */
#dDonut{max-width:300px;margin:0 auto;position:relative}