/* Pillars — Jennifer's NBU messaging framework, as a brand book.
 *
 * v3 — 24 sep 2026. "no me gusta the colored lines you put on the side and on the top of
 * these containers, it looks very AI generated". NO ACCENT STRIPE ON ANY EDGE of this page —
 * not on a tile, not on the opener, not beside a message. Colour lives in two places only:
 * the small icon tiles, and the data (a to-do count, a concept tag).
 *
 * References he picked on CollectUI:
 *   6278e540-187a-49e5-bb09-9327b058a9c3 (@akhakim_) — white card sitting in a grey tray,
 *     the tray showing below it as a footer band; colour only inside the chart.
 *   e2e88b65-acc6-4a95-871a-07b54d447718 (@alyx_so) — colour only in the data line and its
 *     pill; the card itself is neutral.
 *   5c7d8fb8-fec0-4476-8005-253577fb83a2 — "Bills & Payments" / "Savings Goals": a recessed
 *     TRAY carries a title + subtitle + a white button, and holds white cards; stat cards open
 *     with a bordered icon tile, a label, then a big number.
 * Implemented with the app's tokens: tray = --bb-canvas, cards = --bb-surface, Outfit +
 * var(--bb-mono). No palette imported.
 */

.pl-page { padding-bottom: 48px; }

/* One hue per chapter — used ONLY inside icon tiles and data tags. */
.pl-hue-accent { --pl-h: var(--bb-accent); --pl-ht: var(--bb-accent-tint); }
.pl-hue-violet { --pl-h: var(--bb-violet); --pl-ht: var(--bb-violet-tint); }
.pl-hue-cyan   { --pl-h: var(--bb-cyan);   --pl-ht: var(--bb-cyan-tint); }
.pl-hue-orange { --pl-h: var(--bb-orange); --pl-ht: var(--bb-orange-tint); }
.pl-hue-green  { --pl-h: var(--bb-green);  --pl-ht: var(--bb-green-tint); }
.pl-hue-gold   { --pl-h: var(--bb-gold);   --pl-ht: var(--bb-gold-tint); }

.pl-lbl {
  display: block;
  font-size: 11px; font-weight: 500; color: var(--bb-ink-3); margin-bottom: 5px;
}

/* ------------------------------------------------------------ primitives */

/* The icon tile: a small bordered white square, the one place a chapter's colour shows. */
.pl-ico {
  flex: none;
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--bb-surface);
  box-shadow: 0 0 0 1px var(--bb-line), 0 1px 2px rgba(13, 42, 94, .06);
  font-family: var(--bb-display); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  color: var(--pl-h, var(--bb-ink));
}
.pl-ico-lg { width: 48px; height: 48px; border-radius: 12px; font-size: 19px; }

/* ------------------------------------------------------------------ header */

.pl-top {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px;
}
.pl-top h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.015em; color: var(--bb-ink); }

/* The header facts. These were borrowing `.cx-chip` from compliance.css — a cross-page
   dependency that renders as run-together plain text the moment that file is not applied,
   which is how the header looked in his report. Pillars owns its own now. */
.pl-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 8px;
  border: 1px solid var(--bb-line); background: var(--bb-surface);
  font-size: 11.5px; color: var(--bb-ink-2); text-decoration: none;
  white-space: nowrap;
}
.pl-chip b { font-family: var(--bb-mono); font-weight: 600; color: var(--bb-ink); font-variant-numeric: tabular-nums; }
a.pl-chip:hover { border-color: var(--bb-line-strong); color: var(--bb-ink); }
.pl-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; }
.pl-chip.is-good { border-color: color-mix(in srgb, var(--bb-green) 35%, var(--bb-line)); background: var(--bb-green-tint); color: var(--bb-green); }
.pl-chip.is-bad  { border-color: color-mix(in srgb, var(--bb-red) 45%, var(--bb-line)); background: var(--bb-red-tint); color: var(--bb-red); }

/* -------------------------------------------------------------- the deck */

/* THE WIDGET — CollectUI 6278e540 (@akhakim_), measured off the source video (800×600):
   a light-grey SHELL (radius ~12, a white top highlight + hairline + soft drop) whose lower
   band IS the footer ("View full report  →"), and a white CARD inset ~4px inside it (radius
   ~9, its own hairline + a 1px shadow). Card = glyph + name · big number + delta pill · grey
   label · a corner chart over a soft wash (mint when fine, pink when not). Entrance: cards
   fade/scale in with a stagger and the chart draws, ~830ms, then holds still. */
.pl-rail {
  display: grid; grid-template-columns: repeat(var(--n-tiles, 6), minmax(0, 1fr)); gap: 12px;
  margin-bottom: 18px;
}
/* `button.pl-w`, not `.pl-w`: index.html's inline <style> styles EVERY button —
   `display:inline-flex; align-items:center; background:navy; color:#fff` and
   `button:hover { background: navy }` (0,1,1) — which out-ranked a bare class (0,1,0). On the
   live page that painted a hovered/selected tile navy, shrank the card and centered the
   footer, while the harness (link sheets only) rendered it clean. Every property that rule
   sets is set back here, in every state. */
button.pl-w, button.pl-w:hover, button.pl-w:active, button.pl-w:focus {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 4px; width: 100%; min-width: 0; overflow: visible;
  text-align: left; cursor: pointer;
  font: inherit; color: var(--bb-ink);
  border: 0; border-radius: 15px;
  background: var(--pl-shell);
  transform: none;
}
button.pl-w {
  box-shadow:
    inset 0 1px 0 var(--pl-hl, rgba(255, 255, 255, .9)),
    0 0 0 1px var(--pl-shell-line),
    0 1px 2px rgba(13, 42, 94, .05),
    0 6px 14px -8px rgba(13, 42, 94, .12);
  transition: box-shadow .22s ease, transform .22s ease;
}
button.pl-w, button.pl-w * { white-space: normal; }
button.pl-w:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 var(--pl-hl, rgba(255,255,255,.9)), 0 0 0 1px var(--pl-shell-line), 0 2px 4px rgba(13,42,94,.06), 0 14px 26px -12px rgba(13,42,94,.2);
}
button.pl-w:focus-visible { outline: 2px solid var(--bb-accent); outline-offset: 3px; }

.pl-w-in {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
  min-height: 118px; padding: 14px 15px 15px;
  border-radius: 11px;
  background: var(--bb-surface);
  box-shadow: 0 0 0 1px var(--pl-card-line), 0 1px 2px rgba(13, 42, 94, .06);
  transition: background .3s ease;
}
/* The numeral is the tile's one ornament: large, light, tabular — a book's chapter number. */
.pl-w-n {
  font-family: var(--bb-display); font-size: 32px; font-weight: 400; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--bb-ink-3) 55%, transparent);
  transition: color .3s ease;
}
.pl-w-t {
  font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: .005em;
  color: var(--bb-ink); overflow-wrap: anywhere;
}
.pl-w-f {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 11px 7px;
  font-size: 11.5px; color: var(--bb-ink-3);
}
.pl-w-f > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap !important; }
.pl-w-f svg { flex: none; color: var(--bb-ink-3); transition: transform .22s ease, color .22s ease; }
button.pl-w:hover .pl-w-f svg { transform: translateX(2px); color: var(--bb-ink); }
button.pl-w:hover .pl-w-n { color: var(--bb-ink-3); }

/* Selected: the chapter's hue arrives as LIGHT, not as a line — a soft glow in the card's
   corner and the numeral in full colour. The shell takes a firm ink ring. */
button.pl-w.is-on {
  box-shadow: inset 0 1px 0 var(--pl-hl, rgba(255,255,255,.9)), 0 0 0 1.5px var(--bb-ink), 0 12px 26px -12px rgba(13,42,94,.28);
}
button.pl-w.is-on .pl-w-in {
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--pl-h) 16%, transparent) 0%, transparent 60%),
    var(--bb-surface);
}
button.pl-w.is-on .pl-w-n { color: var(--pl-h); }
button.pl-w.is-on .pl-w-f { color: var(--bb-ink-2); }

/* Entrance — first paint only (`S.intro`), never on a click. */
@media (prefers-reduced-motion: no-preference) {
  .pl-intro button.pl-w { animation: pl-w-in .52s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--k, 0) * 55ms); }
}
@keyframes pl-w-in { from { opacity: 0; transform: translateY(6px) scale(.975); } to { opacity: 1; transform: none; } }

/* The shell tokens. Neutral grey like the reference, warmed one step toward the app page. */
.pl-page {
  --pl-shell: #EAE8E2; --pl-shell-line: #DCD9D1; --pl-card-line: #E4E1DA;
}
html[data-bb-theme="dark"] .pl-page {
  --pl-shell: #0F1828; --pl-shell-line: #22304A; --pl-card-line: #1F2B3F;
}
html[data-bb-theme="dark"] .pl-w, html[data-bb-theme="dark"] .pl-shell { --pl-hl: rgba(255,255,255,.04); }

/* ------------------------------------------------------------- the shell */

/* The open pillar is the same widget at full size: shell → white card (header + matrix) →
   footer band (the reviewer's signals). */
.pl-shell {
  display: flex; flex-direction: column; padding: 5px;
  border-radius: 18px; background: var(--pl-shell);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px var(--pl-shell-line), 0 1px 2px rgba(13,42,94,.05), 0 10px 24px -12px rgba(13,42,94,.12);
}
html[data-bb-theme="dark"] .pl-shell, html[data-bb-theme="dark"] .pl-w { box-shadow: 0 0 0 1px var(--pl-shell-line), 0 6px 16px -8px rgba(0,0,0,.5); }
html[data-bb-theme="dark"] .pl-w.is-on { box-shadow: 0 0 0 1.5px var(--bb-ink), 0 6px 16px -8px rgba(0,0,0,.5); }
.pl-shell-in {
  overflow: hidden; border-radius: 13px; background: var(--bb-surface);
  box-shadow: 0 0 0 1px var(--pl-card-line), 0 1px 2px rgba(13,42,94,.06);
}
.pl-shell-f { padding: 12px 14px 9px; }

/* --------------------------------------------------------------- the opener */

.pl-body { display: flex; flex-direction: column; }

.pl-head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: start;
  padding: 18px 18px 16px;
}
.pl-head-main { min-width: 0; }
.pl-head-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.pl-head h2 {
  margin: 0; font-size: 24px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.02em; color: var(--bb-ink);
  overflow-wrap: anywhere;  /* no text-transform: the workbook's casing is the name ("NUC is NOW NB") */
}
.pl-was {
  font-size: 11px; color: var(--bb-ink-3);
  padding: 2px 8px; border-radius: 6px; background: var(--bb-surface); border: 1px solid var(--bb-line);
}
/* The perception objective is the pillar's one sentence, and it is the sentence the model
   is asked to judge against — so it is the one piece of prose on this page that earns its
   place. It is quoted material, not copy written for the UI. */
.pl-obj { max-width: 780px; font-size: 14px; line-height: 1.5; color: var(--bb-ink-2); }
.pl-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.pl-tags span {
  padding: 3px 9px; border-radius: 6px;
  background: var(--bb-surface); border: 1px solid var(--bb-line);
  font-family: var(--bb-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  color: var(--bb-ink-2); font-variant-numeric: tabular-nums;
}
.pl-head-side { display: flex; align-items: center; }

/* Market switch — a white segmented control on the tray (the reference's "View all"). */
.pl-seg {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px;
  background: var(--bb-surface); box-shadow: var(--bb-sh-card);
}
button.pl-seg-b, button.pl-seg-b:hover, button.pl-seg-b:active {
  display: inline-flex; align-items: center; transform: none;
  padding: 6px 13px; min-height: 0; border: 0; border-radius: 7px; background: transparent;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--bb-ink-3);
  cursor: pointer; transition: background .15s ease, color .15s ease;
}
button.pl-seg-b:hover { color: var(--bb-ink); }
button.pl-seg-b.is-on, button.pl-seg-b.is-on:hover { background: var(--bb-canvas); color: var(--bb-ink); }

/* --------------------------------------------------------------- the matrix */

.pl-grid {
  /* `minmax(0, 1fr)`, NOT a 280px floor. A floor does not stop a track from growing past
     its share: a track can never be narrower than its content's min-content width, so one
     unbreakable token — a hashtag like #TuPuenteAlExito… — pushes the track out and the
     text PAINTS over the next column. Measured: content overflowing its box by 170px at a
     382px column, which is the collision he photographed. A 0 floor plus the wrapping
     below makes it unrepresentable rather than unlikely. */
  /* The market track COUNT is the number of markets shown, passed as --n; the first track
     is the audience label. Rows are audiences, so the PR and FL copy for one audience share
     a line — the old column-per-market stack let a long insight push every row below it out
     of line with its twin. */
  display: grid;
  grid-template-columns: minmax(150px, 200px) repeat(var(--n, 2), minmax(0, 1fr));
  border-top: 1px solid var(--bb-line);
}
.pl-col-h {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 18px 10px; background: var(--bb-inset);
  font-size: 11.5px; font-weight: 600; color: var(--bb-ink-3);
}
.pl-mk { font-family: var(--bb-mono); font-weight: 700; letter-spacing: .06em; color: var(--bb-ink); font-variant-numeric: tabular-nums; }
.pl-lang {
  display: inline-flex; align-items: center;
  padding: 1px 5px; border-radius: 4px;
  font-family: var(--bb-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  background: var(--bb-canvas); color: var(--bb-ink-2); font-variant-numeric: tabular-nums;
}

.pl-cell-who {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 18px;
  border-top: 1px solid var(--bb-line);
}
.pl-who-i {
  flex: none; font-family: var(--bb-mono); font-size: 10.5px; font-weight: 700;
  color: var(--bb-ink-3); padding-top: 2px; font-variant-numeric: tabular-nums;
}
.pl-who-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pl-who-t > span, .pl-who-t {
  font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--bb-ink);
}
.pl-who-t small {
  display: inline-flex; align-self: flex-start; margin-top: 4px;
  padding: 1px 6px; border-radius: 5px; background: var(--bb-canvas);
  font-family: var(--bb-mono); font-size: 10px; font-weight: 600; line-height: 1.5; color: var(--bb-ink-2); font-variant-numeric: tabular-nums;
}

.pl-cell {
  padding: 18px 20px 19px;
  border-top: 1px solid var(--bb-line);
  border-left: 1px solid var(--bb-line);
}
.pl-cell-mk { display: none; }
/* These hold copy written by marketers: hashtags, URLs and run-on brand tokens with no
   space to break at. `anywhere` is the only value that breaks INSIDE such a token AND lets
   it shrink the min-content width, which is what keeps the track honest. */
.pl-cell, .pl-msg, .pl-ins, .pl-cell-who { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.pl-msg { font-size: 15.5px; font-weight: 600; line-height: 1.38; color: var(--bb-ink); letter-spacing: -.005em; }
.pl-ins { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--bb-ink-2); }
/* Insight paragraphs as the sheet writes them (Pillar 2 · PR · HS is six). */
.pl-ins p { margin: 0; }
.pl-ins p + p { margin-top: 7px; }
.pl-ads { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 12px; }
.pl-ads .pl-lbl { width: 100%; margin-bottom: 0; }
.pl-ads span:not(.pl-lbl) {
  padding: 3px 9px; border-radius: 7px;
  background: var(--pl-ht, var(--bb-accent-tint));
  font-size: 11.5px; font-weight: 600; color: var(--pl-h, var(--bb-ink));
}
.pl-ads.is-media span:not(.pl-lbl),
.pl-ads.is-notes span:not(.pl-lbl) {
  background: var(--bb-canvas); font-weight: 500; color: var(--bb-ink-2);
}
.pl-ads span.is-todo:not(.pl-lbl) {
  background: var(--bb-orange-tint); color: var(--bb-orange);
  font-family: var(--bb-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums;
}
.pl-cell.is-empty { display: flex; align-items: center; }
.pl-dash { font-family: var(--bb-mono); color: var(--bb-ink-3); font-variant-numeric: tabular-nums; }

/* A merged cell names the audiences it covers — the span shows it, this says it. */
.pl-span {
  display: inline-flex; margin-bottom: 10px;
  padding: 2px 8px; border-radius: 6px; background: var(--bb-canvas);
  font-family: var(--bb-mono); font-size: 10px; font-weight: 600; letter-spacing: .03em; line-height: 1.6;
  color: var(--bb-ink-2); font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------ footnotes + reviewer signals */

.pl-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--bb-line); }
.pl-foot .pl-lbl { margin: 0 4px 0 0; }
.pl-foot-i { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.pl-foot-i b { font-weight: 600; color: var(--bb-ink); }

.pl-sigs { display: flex; flex-direction: column; gap: 7px; }
.pl-sigs-t { font-size: 12px; font-weight: 600; color: var(--bb-ink-2); margin-bottom: 2px; }
.pl-sig-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.pl-sig-row .pl-lang { margin-right: 4px; }
.pl-sig {
  padding: 3px 8px; border-radius: 6px; background: var(--bb-surface); box-shadow: 0 0 0 1px var(--pl-card-line);
  font-family: var(--bb-mono); font-size: 11px; color: var(--bb-ink-2); font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------- continuity */

.pl-concepts { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); border-top: 1px solid var(--bb-line); }
.pl-concept + .pl-concept { border-left: 1px solid var(--bb-line); }
.pl-concept-h { display: flex; align-items: center; gap: 8px; padding: 14px 20px 0; font-size: 11.5px; }
.pl-concept-v {
  padding: 14px 20px 26px;
  font-size: 44px; font-weight: 700; line-height: 1; letter-spacing: -.03em;
  color: var(--bb-ink); overflow-wrap: anywhere;
}
.pl-note, button.pl-note:hover, button.pl-note:active {
  display: flex; align-items: center; gap: 10px; width: 100%; transform: none; border-radius: 0 0 13px 13px;
  border: 0; background: transparent; text-align: left;
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--bb-ink-2);
  cursor: pointer; white-space: normal;
}
.pl-note-go { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--bb-ink-3); }
.pl-note svg { transition: transform .2s ease; }
.pl-note:hover svg { transform: translateX(2px); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1280px) {
  .pl-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .pl-head { grid-template-columns: auto minmax(0, 1fr); }
  .pl-head-side { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .pl-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-head h2 { font-size: 20px; }
  /* Side by side stops being readable before it stops fitting: two narrow columns of body
     copy are two ribbons. Below this the matrix stacks — the audience becomes a band and
     each cell names its own market, whatever --n says. */
  .pl-grid { grid-template-columns: 1fr; }
  /* The desktop placement is inline (row + column + span on every item); dropping it lets
     the row-major DOM stack in reading order. */
  .pl-grid > * { grid-row: auto !important; grid-column: auto !important; }
  .pl-col-h { display: none; }
  .pl-grid > .pl-cell-who { background: var(--bb-inset); }
  .pl-cell { border-left: 0; }
  .pl-cell-mk { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 10.5px; }
  .pl-concepts { grid-template-columns: 1fr; }
  .pl-concept + .pl-concept { border-left: 0; border-top: 1px solid var(--bb-line); }
  .pl-concept-v { font-size: 34px; }
}