/* ==========================================================================
   p-brand.css — page styles for brand.html ONLY.
   Prefix: .br-, every selector scoped to body[data-page="brand"].
   The press surface: the mark, the wordmark, the name, the palette and the
   type, stated as shipped. Token-fed like every section builder; the
   deliberate exceptions are documentary literals — the swatch that shows the
   mark's own #2337E0 dot (the mark carries the paper system's ink wherever
   it goes) and the terminal-scoped phosphor glows (p-museum precedent).
   Green budget: exactly one swatch — the specimen that DOCUMENTS the
   verified state color is the one place --pass may appear off-state.
   ========================================================================== */

/* --------------------------------------------------------------------------
   specimen plates: the mounted-print device from the museum — a card ground,
   a hairline, the exhibit centered on it
   -------------------------------------------------------------------------- */
[data-page="brand"] .br-plate{
  display:flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);
  padding:2.6rem 1.6rem;min-height:220px;
}
html[data-theme="terminal"] [data-page="brand"] .br-plate{
  box-shadow:inset 0 0 48px rgba(43,255,111,.05);
}
[data-page="brand"] .br-plate img{display:block;height:auto;}
[data-page="brand"] .br-mark-img{width:min(228px,56%);border:1px solid var(--hair);}

/* the wordmark exhibit renders LIVE, with the header's own recipe: prose
   face (Space Grotesk on this theme), 600, uppercase, letter-spacing 0,
   ink text, the period in the mark's green (--pq-green, the token
   hdr-event.css section 7.3 paints the header period from; display-P3 on
   wide-gamut screens). Not an image — the stylesheet is the asset. */
[data-page="brand"] .br-wm{
  font-family:var(--prose);font-weight:600;line-height:1;
  letter-spacing:0;text-transform:uppercase;
  font-size:clamp(2.7rem,7.2vw,4.6rem);
  color:var(--ink);white-space:nowrap;
}
[data-page="brand"] .br-wm .dot{color:var(--pq-green,var(--signal));}

/* the specimen caption under a plate */
[data-page="brand"] .br-cap{
  margin:.85rem 0 0;font-family:var(--mono);font-size:.75rem;line-height:1.7;
  color:var(--muted);max-width:66ch;
}

/* --------------------------------------------------------------------------
   the asset shelf beside each specimen: facts, then files
   -------------------------------------------------------------------------- */
[data-page="brand"] .br-side{min-width:0;}
[data-page="brand"] .br-side > p{max-width:52ch;}
[data-page="brand"] .br-files{
  list-style:none;margin:1.5rem 0 0;padding:0;
  border-top:1px solid var(--hair);
}
[data-page="brand"] .br-files li{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .8rem;
  padding:.6rem 0 .65rem;border-bottom:1px solid var(--hair);
}
[data-page="brand"] .br-files a{
  font-family:var(--mono);font-size:.8rem;letter-spacing:.01em;
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--hair-strong);padding-bottom:1px;
  overflow-wrap:anywhere;min-width:0;
}
[data-page="brand"] .br-files a:hover{color:var(--signal);border-bottom-color:var(--signal);}
[data-page="brand"] .br-files .br-f-kind{
  margin-left:auto;font-family:var(--mono);font-size:.75rem;
  letter-spacing:.04em;color:var(--muted);
}

/* --------------------------------------------------------------------------
   the name: rows chassis carries it; the one extra device is a quoted form
   -------------------------------------------------------------------------- */
[data-page="brand"] .br-form{color:var(--ink);font-weight:500;}

/* --------------------------------------------------------------------------
   boilerplate wells: the approved sentence, one click to take all of it
   -------------------------------------------------------------------------- */
[data-page="brand"] .br-quote{
  margin:0;max-width:72ch;
  background:var(--card);border:1px solid var(--hair);border-radius:var(--radius);
  padding:1.15rem 1.3rem 1.2rem;
}
html[data-theme="terminal"] [data-page="brand"] .br-quote{
  box-shadow:inset 0 0 32px rgba(43,255,111,.04);
}
[data-page="brand"] .br-quote p{
  margin:0;font-size:1.05rem;line-height:1.6;color:var(--ink);
  user-select:all;-webkit-user-select:all;
}
[data-page="brand"] .br-quote + .br-quote{margin-top:1rem;}
[data-page="brand"] .br-quote .br-q-l{
  display:block;margin:0 0 .5rem;
  font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
  user-select:none;-webkit-user-select:none;
}

/* --------------------------------------------------------------------------
   the palette: swatch specimens. Chips paint from the live tokens wherever a
   live token exists, so the page cannot disagree with the stylesheet it
   documents; the hex text beside each is the published value.
   -------------------------------------------------------------------------- */
[data-page="brand"] .br-pal{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:10px;overflow:hidden;
}
[data-page="brand"] .br-sw{background:var(--card);padding:1.15rem 1.2rem 1.25rem;min-width:0;}
[data-page="brand"] .br-sw i{
  display:block;height:52px;margin:0 0 .95rem;
  border:1px solid var(--hair-strong);border-radius:2px;
}
[data-page="brand"] .br-sw-ground i{background:var(--paper);}
[data-page="brand"] .br-sw-ink i{background:var(--ink);}
[data-page="brand"] .br-sw-light i{background:var(--signal);}
[data-page="brand"] .br-sw-pass i{background:var(--pass);}   /* the specimen documenting verified state */
[data-page="brand"] .br-sw-fail i{background:var(--fail);}
[data-page="brand"] .br-sw-dot i{background:var(--pq-green,#2BFF6F);}  /* the mark's dot: the wordmark period's own token */
[data-page="brand"] .br-sw-name{
  display:block;font-family:var(--mono);font-size:.78rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink);
}
[data-page="brand"] .br-sw-hex{
  display:block;margin:.25rem 0 .45rem;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;color:var(--muted);
  user-select:all;-webkit-user-select:all;width:fit-content;
}
[data-page="brand"] .br-sw-role{
  display:block;font-family:var(--prose);font-size:.9rem;line-height:1.5;color:var(--ink-60);
  text-wrap:pretty;
}

/* --------------------------------------------------------------------------
   type specimens: each face introduces itself in its own voice
   -------------------------------------------------------------------------- */
[data-page="brand"] .br-type{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:10px;overflow:hidden;}
[data-page="brand"] .br-face{background:var(--card);padding:1.5rem 1.4rem 1.5rem;min-width:0;}
[data-page="brand"] .br-face-line{display:block;font-size:1.7rem;line-height:1.25;letter-spacing:0;color:var(--ink);margin:0 0 .8rem;overflow-wrap:anywhere;}
[data-page="brand"] .br-face-g .br-face-line{font-family:var(--prose);font-weight:600;}
[data-page="brand"] .br-face-m .br-face-line{font-family:var(--mono);font-weight:500;font-size:1.35rem;}
[data-page="brand"] .br-face p{margin:0;font-size:.95rem;line-height:1.55;color:var(--ink-60);max-width:44ch;}

/* --------------------------------------------------------------------------
   do / don't: two hairline lists, no state hues — a usage rule is not a
   verdict, so the markers stay typographic
   -------------------------------------------------------------------------- */
[data-page="brand"] .br-rules h3{
  margin:0 0 .4rem;font-family:var(--mono);font-size:.78rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
[data-page="brand"] .br-rules ul{list-style:none;margin:0;padding:0;}
[data-page="brand"] .br-rules li{
  padding:.85rem 0 .9rem;border-bottom:1px solid var(--hair);
  font-size:1rem;line-height:1.55;color:var(--ink-60);max-width:52ch;
}
[data-page="brand"] .br-rules li b{color:var(--ink);font-weight:600;}

/* --------------------------------------------------------------------------
   the share card: shown unfiltered (the .frame chassis would phosphor-tint
   it; a brand asset must render as shipped)
   -------------------------------------------------------------------------- */
[data-page="brand"] .br-card{max-width:600px;}
[data-page="brand"] .br-card img{
  display:block;width:100%;height:auto;
  border:1px solid var(--hair-strong);background:var(--card);
}
[data-page="brand"] .br-card-url{
  margin:.7rem 0 0;font-family:var(--mono);font-size:.78rem;line-height:1.6;
  color:var(--ink);overflow-wrap:anywhere;
  user-select:all;-webkit-user-select:all;width:fit-content;
}

@media (max-width:900px){
  [data-page="brand"] .br-pal{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  [data-page="brand"] .br-pal,[data-page="brand"] .br-type{grid-template-columns:1fr;}
  [data-page="brand"] .br-plate{min-height:170px;padding:2rem 1.1rem;}
  [data-page="brand"] .br-files .br-f-kind{margin-left:0;flex-basis:100%;}
}