/* ===========================================================================
   Brand — the /brand guidelines page and the Brand assets admin.
   Tokens from flayr.css only. Swatch colours come from inline SVG fills in
   the markup (CSP allows SVG presentation attributes), never from here.
   ======================================================================== */

.bg-hero { padding: clamp(56px, 9vw, 110px) 0 clamp(40px, 6vw, 72px); }
.bg-hero .lead { max-width: 760px; margin: 18px auto 0; color: var(--muted); }
.bg-hero .media img { width: 100%; }
body section[id], #top { scroll-margin-top: 112px; }

.bg-measure { max-width: 760px; }
.bg-figure { margin: 0; }
.bg-figure figcaption { font-size: var(--fs-sm); color: var(--muted); margin-top: 10px; }
.bg-figure figcaption strong { color: var(--ink); }
.bg-dont figcaption { display: flex; align-items: center; gap: 8px; }
.bg-clearspace { width: 100%; height: auto; }

/* ------------------------------------------------------------ swatches -- */
.bg-swatch { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.bg-chip { width: 100%; height: 132px; }
.bg-swatch-body { padding: 16px 18px 18px; }
.bg-swatch-body h4 { font-size: var(--fs-body); margin: 0 0 4px; }
.bg-swatch-body p { margin: 0 0 12px; min-height: 3em; }
.bg-values { display: flex; flex-direction: column; gap: 2px; }
.bg-values button, .bg-inline-copy {
  display: flex; align-items: baseline; gap: 10px; width: 100%; border: 0; background: transparent; padding: 5px 8px; margin: 0 -8px;
  border-radius: var(--r-xs); font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink); text-align: left; cursor: copy; transition: background .15s;
}
.bg-values button span { font-family: var(--font); font-size: var(--fs-2xs); color: var(--faint); width: 52px; flex: none; }
.bg-values button:hover, .bg-inline-copy:hover { background: var(--surface-2); }
.bg-inline-copy { display: inline; width: auto; margin: 0; padding: 2px 6px; }

.bg-proportion { width: 100%; height: 56px; border-radius: var(--r); overflow: hidden; display: block; }

.bg-contrast { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; }
.bg-contrast svg { width: 100%; height: auto; display: block; }
.bg-contrast-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; font-size: var(--fs-sm); }
.bg-contrast-body strong { color: var(--ink); font-weight: 600; }
.bg-contrast-body .num { font-size: var(--fs-4); font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }

.bg-table-wrap { background: var(--surface); border-radius: var(--r-lg); padding: 6px 8px; overflow-x: auto; }
.section-white .bg-table-wrap { background: var(--bg); }
.bg-dot { width: 22px; height: 22px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px var(--hairline); }

.bg-token { display: flex; gap: 12px; align-items: center; text-align: left; border: 0; background: var(--surface); border-radius: var(--r); padding: 10px; cursor: copy; transition: transform .2s var(--ease); }
.bg-token:hover { transform: translateY(-2px); }
.bg-token-chip { width: 48px; height: 48px; border-radius: var(--r-sm); flex: none; box-shadow: 0 0 0 1px var(--hairline); }
.bg-token-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bg-token-body code { background: none; padding: 0; font-size: var(--fs-2xs); color: var(--muted); }
.bg-token-body strong { color: var(--ink); font-size: var(--fs-sm); }

/* -------------------------------------------------------------- type ---- */
.bg-specimen { font-size: clamp(140px, 22vw, 260px); font-weight: 600; line-height: .9; letter-spacing: -0.06em; color: var(--ink); background: var(--bg); border-radius: var(--r-xl); display: grid; place-items: center; aspect-ratio: 4 / 3; }
.bg-alphabet { font-size: var(--fs-3); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); overflow-wrap: anywhere; }
.bg-weights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; margin-top: 24px; }
.bg-weights > div { display: flex; flex-direction: column; }
.bg-weights > div > span:first-child { font-size: var(--fs-3); color: var(--ink); letter-spacing: -0.02em; }
.fw-300 { font-weight: 300; } .fw-400 { font-weight: 400; } .fw-500 { font-weight: 500; } .fw-600 { font-weight: 600; } .fw-650 { font-weight: 650; } .fw-700 { font-weight: 700; }
.bg-scale { background: var(--bg); border-radius: var(--r-xl); padding: 8px clamp(16px, 3vw, 32px); }
.bg-scale-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: baseline; padding: 20px 0; }
.bg-scale-row + .bg-scale-row { box-shadow: inset 0 1px 0 var(--hairline); }
.bg-scale-meta { display: flex; flex-direction: column; font-size: var(--fs-xs); color: var(--muted); }
.bg-scale-meta strong { color: var(--ink); font-size: var(--fs-sm); }
.bg-scale-demo { color: var(--ink); overflow-wrap: anywhere; margin: 0; }
@media (max-width: 760px) { .bg-scale-row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.bg-list { margin: 0; padding-left: 1.1em; font-size: var(--fs-sm); color: var(--text); }
.bg-list li { margin: .4em 0; }

.bg-voice td:first-child { color: var(--ink); font-weight: 500; }
.bg-voice td:last-child { color: var(--faint); text-decoration: line-through; text-decoration-color: var(--danger); }

/* --------------------------------------------------------- downloads ---- */
.bg-pack { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; background: var(--navy); color: rgba(255, 255, 255, .78); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 40px); }
.bg-pack h3 { color: #fff; }
.bg-pack .muted { color: rgba(255, 255, 255, .7); }
.bg-pack .btn-primary { --btn-bg: var(--teal); --btn-fg: var(--ink); --btn-bg-hover: var(--mint); }
.bg-download { background: var(--surface); border-radius: var(--r-xl); overflow: hidden; display: flex; flex-direction: column; }
.bg-download-preview { aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--surface-2); padding: 28px; }
.bg-download-preview.is-dark { background: var(--navy); }
.bg-download-preview img { max-height: 100%; width: auto; max-width: 80%; }
.bg-download-palette { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; padding: 0; }
.bg-pal-chip { width: 100%; height: 100%; }
.bg-download-body { padding: 18px 20px 22px; }
.bg-download-body .btn { margin-bottom: 4px; }
.bg-files > li { padding: 12px 10px; }
.bg-file-thumb { width: 56px; flex: none; border-radius: var(--r-sm); }
.bg-file-icon { width: 56px; height: 56px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--surface-2); color: var(--muted); }

/* ------------------------------------------------------------- admin ---- */
.brand-signoff { list-style: none; margin: 0; padding: 0; }
.brand-signoff li { display: flex; gap: 12px; padding: 12px 0; align-items: flex-start; }
.brand-signoff li + li { box-shadow: inset 0 1px 0 var(--hairline); }
.brand-signoff li.is-done .brand-signoff-text { opacity: .55; }
.brand-signoff strong { display: block; color: var(--ink); font-size: var(--fs-sm); }
.brand-signoff p { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--muted); }
.brand-asset-thumb { width: 64px; height: 64px; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); flex: none; }
.brand-asset-thumb img { width: 100%; height: 100%; object-fit: cover; }
.brand-asset-thumb + .grow + .stack .flip, .icon.flip { transform: rotate(180deg); }
/* A white or near-white swatch would vanish on a white card; set it on a fill instead. */
.bg-swatch.is-light { background: var(--surface-2); }
.bg-swatch.is-light .bg-chip { padding: 0; }
.subnav-links .btn { opacity: 1; font-size: var(--fs-2xs); color: #fff; }