/**
 * brand-report.css — the brand report page. A thin layer on app.css: every
 * token, colour and curve is app.css's. Prints cleanly (Save as PDF).
 */

body.report { padding-bottom: calc(var(--s8) + 76px + env(safe-area-inset-bottom)); }  /* clear the tab bar */

.rpt { max-width: 980px; margin: 0 auto; padding: var(--s5) var(--s5) 0; }
@media (max-width: 480px) { .rpt { padding: var(--s4) var(--s4) 0; } }

.small { font-size: 13px; color: var(--ink-3); }
.body.small { font-size: 14px; }

/* ---------------- cover ---------------- */

.cover {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s6); align-items: center;
  padding: var(--s6) 0 var(--s6);
}
@media (max-width: 640px) { .cover { grid-template-columns: 1fr; gap: var(--s5); } }
.cover-logo {
  width: 148px; height: 148px; border-radius: var(--r-lg);
  background: var(--bg-raised) center / 76% no-repeat;
  border: 1px solid var(--line-soft); box-shadow: var(--shadow);
}
.cover-txt > * + * { margin-top: var(--s3); }
.cover-line { font-size: clamp(17px, 2.6vw, 21px); color: var(--brand); font-weight: 500; letter-spacing: .02em; margin: var(--s3) 0 0; }
:root[data-theme="dark"] .cover-line { color: var(--ink); }
.cover-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-size: 14px; color: var(--ink-3); margin: var(--s4) 0 0; }
.cover-meta a { color: var(--ink-2); text-underline-offset: 3px; }
.cover-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-3); }

/* ---------------- contents ---------------- */

.toc {
  display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4);
  padding: var(--s3) 0 var(--s5); border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.toc a { color: var(--ink-2); text-decoration: none; padding: var(--s1) 0; border-bottom: 1px solid transparent; }
.toc a:hover { color: var(--ink); border-bottom-color: var(--ink-3); }

/* ---------------- sections ---------------- */

.sec { padding: var(--s7) 0 var(--s6); border-bottom: 1px solid var(--line-soft); scroll-margin-top: 80px; }
.sec > * + * { margin-top: var(--s4); }
.sec-head { display: flex; align-items: baseline; gap: var(--s4); margin-bottom: var(--s5); }
.sec-head .num { font-size: 12px; letter-spacing: .12em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sec-head h2 { font-size: clamp(24px, 4vw, 32px); font-weight: 300; letter-spacing: -.02em; }
.sub { margin-top: var(--s6) !important; }
.sub > * + * { margin-top: var(--s3); }

.tag {
  display: inline-block; font-size: 13.5px; padding: var(--s1) var(--s3); margin: 0 var(--s2) var(--s2) 0;
  border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-2);
}

/* ---------------- logo ---------------- */

.logo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 560px) { .logo-pair { grid-template-columns: 1fr; } }
.logo-tile { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-soft); }
.logo-tile.light { background: #FFFFFF; }
.logo-tile .img {
  aspect-ratio: 16 / 10; background: center / 55% no-repeat;
  display: grid; place-items: center; color: var(--ink-3); font-size: 14px;
}
.logo-tile figcaption { padding: var(--s2) var(--s4); font-size: 12.5px; color: #8B867D; background: rgba(0,0,0,.03); }
.logo-tile.dark figcaption { color: rgba(255,255,255,.7); background: rgba(0,0,0,.2); }

.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s3); }
.logo-opt { margin: 0; background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; }
.logo-opt .img { aspect-ratio: 4 / 3; background: #FFFFFF center / 60% no-repeat; border-bottom: 1px solid var(--line-soft); }
.logo-opt figcaption { padding: var(--s3); display: grid; gap: var(--s2); font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.btn.sm { min-height: 38px; padding: var(--s2) var(--s3); font-size: 13.5px; width: 100%; }

/* ---------------- colours ---------------- */

.roles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--s4); }
.role {
  all: unset; box-sizing: border-box; cursor: pointer; display: grid;
  background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: var(--r-lg); overflow: hidden;
  transition: transform var(--t1) var(--ease), box-shadow var(--t1) var(--ease);
}
.role:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.role:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.role .swatchbig { position: relative; aspect-ratio: 16 / 9; display: flex; align-items: flex-end; padding: var(--s4); }
.role .swatchbig b { font-size: 34px; font-weight: 400; line-height: 1; }
.role .copied { position: absolute; top: var(--s3); right: var(--s3); font-style: normal; font-size: 12px; opacity: 0; transition: opacity var(--t1) var(--ease); }
.role.is-copied .copied { opacity: 1; }
.role-txt { display: grid; gap: 3px; padding: var(--s4); font-size: 14px; }
.role-txt b { font-weight: 500; }
.role-txt .hex { font-size: 18px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.chipset { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pchip {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s2);
  padding: var(--s1) var(--s3) var(--s1) var(--s1); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums;
}
.pchip i { width: 26px; height: 26px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.pchip.used { border-color: var(--ink-3); color: var(--ink); }
.pchip.is-copied span::after { content: " · copied"; color: var(--ink-3); }
.pchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------- fonts ---------------- */

.fonts { display: grid; gap: var(--s4); }
.font { background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--s5); }
.font-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s4); }
.font-head b { font-weight: 500; font-size: 16px; }
.font-head span { font-size: 13px; color: var(--ink-3); }
.spec { display: grid; grid-template-columns: auto 1fr; gap: var(--s5); align-items: center; margin-top: var(--s4); color: var(--ink); }
.spec .aa { font-size: 72px; line-height: 1; }
.spec-lines { display: grid; gap: var(--s2); min-width: 0; }
.spec-big { font-size: clamp(20px, 3vw, 28px); line-height: 1.2; }
.spec-small { font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; line-height: 1.5; }
@media (max-width: 520px) { .spec { grid-template-columns: 1fr; gap: var(--s3); } .spec .aa { font-size: 56px; } }

/* ---------------- voice ---------------- */

.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s4); }
.card { background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--s4) var(--s5); }
.card-v { margin-top: var(--s3); font-size: 15px; line-height: 1.55; }
.card-v p { margin: 0; color: var(--ink); }

.doc { background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: 0 var(--s5); }
.doc summary { cursor: pointer; padding: var(--s4) 0; font-weight: 500; list-style: none; display: flex; justify-content: space-between; }
.doc summary::after { content: "+"; color: var(--ink-3); font-weight: 400; }
.doc[open] summary::after { content: "–"; }
.doc summary::-webkit-details-marker { display: none; }
.doc .md { padding-bottom: var(--s5); }

.md { font-size: 15px; line-height: 1.62; color: var(--ink-2); }
.md h3 { font-size: 15px; font-weight: 500; color: var(--ink); margin: var(--s5) 0 var(--s2); }
.md h3:first-child { margin-top: 0; }
.md p { margin: 0 0 var(--s3); }
.md ul, .md ol { margin: 0 0 var(--s3); padding-left: 1.3em; }
.md li + li { margin-top: var(--s1); }
.md b { color: var(--ink); font-weight: 500; }
.md blockquote { margin: var(--s3) 0; padding-left: var(--s4); border-left: 2px solid var(--line); color: var(--ink-3); }
.md.small { font-size: 14px; margin-top: var(--s5); }
.md.small > .eyebrow { margin-bottom: var(--s2); }

/* The pillars read as cards: one per pillar, the story formats full width. */
.pillars { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s4); }
.pillars > p:first-child { grid-column: 1 / -1; font-size: 16px; color: var(--ink); margin: 0; }
.pcard { background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--s4) var(--s5); }
.pcard.wide { grid-column: 1 / -1; }
.pcard p:last-child, .pcard ul:last-child { margin-bottom: 0; }

/* ---------------- offer / details ---------------- */

.offer { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s3); }
.item {
  display: flex; justify-content: space-between; gap: var(--s3);
  background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: var(--r); padding: var(--s4);
}
.item b { font-weight: 500; }
.item p { margin: var(--s1) 0 0; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.item .price { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }

.rowsx { background: var(--bg-raised); border: 1px solid var(--line-soft); border-radius: var(--r-lg); padding: var(--s2) var(--s5); }
.rowsx:empty { display: none; }
.r { display: grid; grid-template-columns: 180px 1fr; gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--line-soft); font-size: 15px; }
.r:first-child { border-top: 0; }
.r .k { color: var(--ink-3); font-size: 14px; }
.r .v { color: var(--ink); overflow-wrap: anywhere; line-height: 1.6; }
.r .v a { color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 560px) { .r { grid-template-columns: 1fr; gap: var(--s1); } }

/* ---------------- pictures ---------------- */

.pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); }
.pic { display: block; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--bg-sunken); }
.pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t2) var(--ease); }
.pic:hover img { transform: scale(1.04); }

/* ---------------- end ---------------- */

.end { display: flex; flex-wrap: wrap; gap: var(--s3); padding: var(--s7) 0 0; }
.end .btn { width: auto; }
a.btn { text-decoration: none; }

/* ---------------- print: Save as PDF ---------------- */

@media print {
  :root { --bg: #fff; --bg-raised: #fff; --ink: #111; --ink-2: #333; --ink-3: #666; --line: #ccc; --line-soft: #ddd; }
  body.report { background: #fff; padding: 0; }
  .grain, .top-actions, .toc, .end, .note, .logo-opt .btn, .tabs { display: none !important; }
  header.top { position: static; backdrop-filter: none; background: none; }
  .sec { break-inside: avoid-page; padding: var(--s5) 0; }
  .role, .font, .card, .item, .logo-tile, .pic { break-inside: avoid; box-shadow: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pics { grid-template-columns: repeat(6, 1fr); }
}