/* ═══════════════════════════════════════════════════════════════════════════
   کارت‌های ایده‌پردازی — the deck's own visual language.

   A BRAINSTORM CARD IS A CARD, AND IT WAS BEING RENDERED AS A DOCUMENT. The
   fifty-one of them went through the same template as the 49 Design Thinking
   tools: «چرا این ابزار» over a one-line mechanism, «اجرا / گام ۱» over what
   is a three-line prompt, and the card's question — the entire artefact —
   reduced to a grey pill in the meta row. Amin, 2026-09-24: «it is so in bad
   quality … we want an attractive ui customized for this braistorming
   technique».

   THE COLOURS ARE THE SOURCE'S, NOT A PALETTE SOMEBODY LIKED. They were read
   out of the PDF's own content stream (`rg` and `k` operators on the card
   pages) rather than sampled by eye, which is why Market is a deep forest and
   not a friendly green. build_cards.py carries them through as `fill`, with
   `on_fill` measured against each one — the deck's Customer red takes 4.05:1
   with white and 4.64:1 with the brand Ground, so two of the four faces carry
   DARK ink and that is measured rather than a style choice.

   EVERY CLASS IS `bc-` PREFIXED. `.row`, `.card` and `.line` are all generic
   names already taken elsewhere in this project, and a page-local `.row`
   silently laid out as somebody else's grid cost an hour on 2026-09-23.
   ═══════════════════════════════════════════════════════════════════════════ */

.bc-wrap{--bc-fill:#E83C4D; --bc-on:#141110; --bc-ink:#E52438}

/* ── the card face ──────────────────────────────────────────────────────────
   The hero IS the artefact. On the printed deck the whole page is one solid
   colour with the question set across it, so that is what this is: not a
   banner above an article, but the card itself, at a size somebody could read
   across a table. */
.bc-face{
  position:relative; background:var(--bc-fill); color:var(--bc-on);
  border-radius:20px; padding:clamp(22px,4vw,40px);
  min-block-size:clamp(260px,38vw,360px);
  display:grid; grid-template-rows:auto 1fr auto; gap:var(--y-4);
  margin-block:var(--y-5) var(--y-6);
  /* No shadow. The brand book forbids one on the mark and a coloured slab on
     a near-black ground needs none — it already separates by twenty stops. */
  overflow:hidden;
}
/* The deck prints a faint oversized «?» behind the question. Drawn rather than
   imported: it is a glyph, not artwork, so it costs nothing and cannot be the
   wrong file. */
.bc-face::after{
  content:"؟"; position:absolute; inset-block-start:-.18em; inset-inline-start:-.04em;
  font-family:var(--y-display); font-size:clamp(200px,34vw,340px); line-height:1;
  opacity:.09; pointer-events:none; user-select:none;
}
.bc-fhead{display:flex; align-items:center; gap:var(--y-3); flex-wrap:wrap;
  position:relative; z-index:1; font-size:13.5px}
.bc-fam{display:inline-flex; align-items:center; gap:7px; font-weight:700;
  background:color-mix(in srgb, var(--bc-on) 14%, transparent);
  border-radius:999px; padding:5px 13px}
.bc-no{opacity:.75; font-variant-numeric:tabular-nums}

/* THE QUESTION, and it is set in the display face because on the card it is
   the only thing there. Lalezar is forbidden under 28px by the type scale, so
   the clamp FLOOR is 28 — the value a 390px phone actually gets, which is the
   half that auditing at 1180 hides. */
/* THE COLOUR IS DECLARED, NOT INHERITED, and that is not belt-and-braces.
   site.css carries `h1,h2,h3{color:var(--navy)}`, which on the dark surface
   resolves to near-white and beats inheritance from .bc-face — so the ink
   measured for each family (the whole reason two of the four faces are dark)
   never applied, and the question rendered near-white on the deck's pink at
   2.3:1. Nothing raises; it simply looked like a design choice. */
.bc-face .bc-q, .bc-face h1{color:var(--bc-on)}
.bc-q{position:relative; z-index:1; margin:0; align-self:center;
  font-family:var(--y-display); font-weight:400;
  font-size:clamp(28px,5.2vw,46px); line-height:1.4; text-wrap:balance;
  max-inline-size:20ch}
.bc-ffoot{display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--y-4); position:relative; z-index:1}
/* THE ENGLISH QUESTION IS AN LTR ISLAND. Its trailing «?» is a bidi neutral
   that takes the paragraph direction, so on an rtl page it painted as
   «?What if you could…» on all fifty-one pages before <bdi> went on it. */
.bc-en{font-size:13px; opacity:.8; font-family:var(--y-sans)}
/* The brand mark sits on the card the way it sits on the printed one: bottom
   corner, on a light plate, because a logo drawn for white paper cannot be
   trusted on four different grounds — least of all the deep green. */
.bc-mark{background:#FFFFFF; border-radius:12px; padding:9px 13px;
  display:flex; align-items:center; flex:0 0 auto}
.bc-mark img{display:block; block-size:auto; inline-size:auto;
  max-block-size:30px; max-inline-size:120px}

/* ── the body ───────────────────────────────────────────────────────────── */
.bc-body{display:grid; gap:var(--y-6); max-inline-size:none}
/* A SECTION HEADING IS A LABEL, NOT A TWIN OF THE SENTENCE UNDER IT. At 17px
   with a coloured bar on its start edge, the heading and the mechanism it
   introduces were the same object drawn twice — «heading and sub heading are
   not differentiable visually». So the label is small, quiet and lettered
   loosely, and the thing it names is the big text. The bar stays: it is what
   marks a section, and it is now the only one on the screen. */
.bc-sec > h2{font-size:12.5px; font-weight:700; color:var(--y-muted);
  letter-spacing:.02em; margin:0 0 var(--y-3);
  display:flex; align-items:center; gap:9px}
.bc-sec > h2::before{content:""; inline-size:3px; block-size:1.1em; border-radius:2px;
  background:var(--bc-ink); flex:0 0 auto}
/* The clinical heading carries a title, not a label — it names the example. */
.bc-clin > h2{font-size:16.5px; color:var(--y-text); letter-spacing:0}
.bc-sec p{margin:0 0 var(--y-3); line-height:var(--y-lh-body)}

/* The mechanism is one sentence and it is the card's thesis, so it is the
   largest text in the body. It carried a bar of its own, which is what made it
   read as a second heading; the label above it has the bar now. */
.bc-mech{font-size:clamp(18px,2.4vw,22px); line-height:1.7; margin:0;
  color:var(--y-text)}

/* THE THREE STEPS ARE A ROW OF THREE, not a numbered list stacked down the
   page. They are parallel moves in one exercise, and a vertical list of three
   reads as a sequence with a beginning that matters more than its end. */
.bc-steps{display:grid; gap:var(--y-3); grid-template-columns:repeat(3,minmax(0,1fr));
  list-style:none; padding:0; margin:0; counter-reset:bcs}
@media (max-width:760px){.bc-steps{grid-template-columns:1fr}}
.bc-steps li{background:var(--y-raise); border:1px solid var(--y-rule);
  border-radius:14px; padding:var(--y-4); counter-increment:bcs;
  display:grid; gap:9px; align-content:start; font-size:14.5px; line-height:1.8}
.bc-steps li::before{content:counter(bcs, persian);
  inline-size:28px; block-size:28px; border-radius:9px;
  background:var(--bc-fill); color:var(--bc-on);
  display:grid; place-items:center; font-weight:700; font-size:14px}

.bc-out{background:var(--y-raise); border:1px solid var(--y-rule);
  border-radius:14px; padding:var(--y-4) var(--y-5)}
.bc-out b{display:block; font-size:13px; color:var(--y-muted); margin-block-end:5px}

/* ── the example on the card, and the clinical one ──────────────────────────
   TWO EXAMPLES, AND THEY MUST NOT LOOK ALIKE. One is what the source reports
   a company did; the other is a hypothetical the centre wrote. A reader who
   takes the second for the first has been told a clinical idea is a reported
   result, which is the one misreading of this page that could reach a
   patient — so they get different grounds, different edges, and the caveat
   comes FIRST rather than as a footnote. */
.bc-ex{background:var(--y-raise); border:1px solid var(--y-rule);
  border-radius:16px; padding:var(--y-5); display:grid; gap:var(--y-4)}
.bc-exmarks{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.bc-exmarks .bc-mark{padding:7px 11px}
.bc-exmarks .bc-mark img{max-block-size:24px; max-inline-size:96px}

.bc-clin{border:1px solid color-mix(in srgb, var(--bc-fill) 40%, var(--y-rule));
  border-radius:16px; padding:var(--y-5); display:grid; gap:var(--y-4);
  background:color-mix(in srgb, var(--bc-fill) 7%, var(--y-raise))}
.bc-clin > h2{margin-block-start:0}
/* `.bc-caveat` was here — a dashed plate holding three sentences of
   disclaimer at the top of every clinical example. The one fact that had to
   survive is that the example is hypothetical, and «فرضی» in the heading
   carries it. */
.bc-att{display:grid; gap:4px}
.bc-att > b{font-size:12.5px; color:var(--y-muted)}
.bc-att p, .bc-att ul{margin:0; line-height:var(--y-lh-body); font-size:14.5px}
.bc-att ul{padding-inline-start:1.2em}

/* ── where to use it ─────────────────────────────────────────────────────── */
.bc-use{display:flex; gap:var(--y-3); flex-wrap:wrap}
.bc-use a{display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:var(--y-raise); border:1px solid var(--y-control);
  border-radius:11px; padding:11px 16px; color:var(--y-text); font-size:14.5px}
.bc-use a:hover{background:var(--y-panel)}

.bc-src{font-size:12.5px; color:var(--y-muted); line-height:1.9}

/* ── the deck wall (the library index, cards collection) ───────────────────
   FIFTY-ONE CARDS WERE FIFTY-ONE TEXT ROWS, which is the same category error
   the entry page had, one level up: a deck is chosen by SCANNING FACES, not by
   reading a list of titles with «باز کردن کارت» on the end of each. The row
   layout is right for the 49 methods and the 15 barriers — you pick those by
   what they do — and wrong for a prompt you pick because its question catches
   you.

   The tile IS the card, at a size where the question is still the thing you
   read: the family's own colour, the question, the mark. Nothing else. The
   title, the duration and the «open» affordance all came off, because on a
   deck the question is the title and every card opens. */
.bc-deck{display:grid; gap:var(--y-4);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); margin-block-start:var(--y-4)}
.bc-tile{position:relative; display:flex; flex-direction:column; gap:var(--y-3);
  background:var(--bc-fill); color:var(--bc-on); text-decoration:none;
  border-radius:16px; padding:var(--y-4) var(--y-4) var(--y-3);
  min-block-size:190px; overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease}
.bc-tile:hover, .bc-tile:focus-visible{transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(0,0,0,.35)}
.bc-tile::after{content:"؟"; position:absolute; inset-block-end:-.34em; inset-inline-start:-.02em;
  font-family:var(--y-display); font-size:150px; line-height:1; opacity:.1;
  pointer-events:none; user-select:none}
.bc-tile .t-fam{font-size:11.5px; font-weight:700; opacity:.85; position:relative; z-index:1}
/* The question is the tile's whole content, so it takes the space and the
   display face — floored at 17px, which is the SANS floor: Lalezar is
   forbidden under 28 by the type scale and a 51-tile wall cannot give each
   one 28px, so the wall is set in the body face on purpose. */
.bc-tile .t-q{font-size:17px; line-height:1.65; font-weight:700; margin:0;
  position:relative; z-index:1; flex:1}
.bc-tile .t-mark{align-self:flex-start; background:#FFFFFF; border-radius:9px;
  padding:5px 9px; position:relative; z-index:1}
.bc-tile .t-mark img{display:block; max-block-size:20px; max-inline-size:78px;
  inline-size:auto; block-size:auto}
/* A GROUP HEADING STILL SEPARATES THE FOUR FAMILIES, because the deck is
   grouped in the source too — but it carries the family's TEXT ink, not its
   fill: the deck sets Customer and Regulation to one hue and separates them by
   lightness, which works on a full card face and turns two headings into the
   same red. */
.bc-dhdr{grid-column:1/-1; display:flex; align-items:baseline; gap:10px;
  margin-block:var(--y-4) 0; font-size:15px}
.bc-dhdr b{color:var(--bc-ink)}
.bc-dhdr span{color:var(--y-muted); font-size:12.5px}