/* Baumlinks Brick Data — design system
   Palette (matches existing Baumlinks card templates):
   navy #1B2B48, accent blue #2ea3f2, dark #1a1a2e, muted #6b7280 */

.brx-full { width: 100% !important; float: none !important; }
.brx-full::after { display: none; }
.brx-content { font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif; }
.brx-content * { box-sizing: border-box; }

/* Answer-first box */
.brx-answer {
  font-size: 19px; line-height: 1.6; font-weight: 600; color: #1a1a2e;
  background: #f0f7ff; border-left: 5px solid #2ea3f2; border-radius: 0 10px 10px 0;
  padding: 18px 22px; margin: 6px 0 26px;
}
.brx-answer a { color: #1B2B48; }

/* Section headers */
.brx-h2wrap { display: flex; align-items: center; gap: 10px; margin: 38px 0 16px; }
.brx-h2bar { width: 5px; height: 30px; background: linear-gradient(180deg, #1B2B48, #2ea3f2); border-radius: 3px; flex-shrink: 0; }
.brx-h2 { margin: 0 !important; padding: 0 !important; font-size: 24px !important; font-weight: 800 !important; color: #1B2B48 !important; letter-spacing: -0.3px !important; line-height: 1.3 !important; }

/* Badges */
.brx-badge { display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 12px; font-weight: 800; letter-spacing: 0.3px; line-height: 1.5; white-space: nowrap; }
.brx-badge--retired { background: #fce4ec; color: #b71c1c; border: 1px solid rgba(183,28,28,0.12); }
.brx-badge--last-call { background: #fff3e0; color: #b53d00; border: 1px solid rgba(230,81,0,0.2); }
.brx-badge--on-notice { background: #fffde7; color: #9a6700; border: 1px solid rgba(154,103,0,0.18); }
.brx-badge--safe { background: #e8f5e9; color: #2e7d32; border: 1px solid rgba(46,125,50,0.12); }
.brx-badge--fig-rarity { background: #ede7f6; color: #4527a0; border: 1px solid rgba(69,39,160,0.15); }

/* Minifig rarity cards: portrait-ish fig photos + host-set line. */
.brx-card--fig .brx-fig-img { width: 110px; height: 140px; }

/* No photo exists anywhere: show a little CSS brick + a wink instead of a
   broken image. On a rarity page, being unphotographed is a flex. */
.brx-fig-noimg {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: #f4f7fb;
  border-right: 1px solid #e5e9f0;
}
.brx-noimg-brick {
  position: relative;
  width: 46px;
  height: 24px;
  background: #ffd500;
  border-radius: 3px;
  box-shadow: inset -3px -4px 0 rgba(0, 0, 0, 0.12);
  margin-top: 10px;
}
.brx-noimg-brick::before,
.brx-noimg-brick::after {
  content: "";
  position: absolute;
  top: -8px;
  width: 14px;
  height: 8px;
  background: #ffd500;
  border-radius: 3px 3px 0 0;
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.1);
}
.brx-noimg-brick::before { left: 6px; }
.brx-noimg-brick::after { right: 6px; }
.brx-noimg-text {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #5b6779;
  text-align: center;
  line-height: 1.45;
}

/* Table thumbnails: small fig photo beside the name. */
.brx-figcell { display: flex; align-items: center; gap: 11px; }
.brx-fig-thumb {
  width: 44px;
  height: 54px;
  object-fit: contain;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid #e2e7ee;
  border-radius: 8px;
  padding: 2px;
  box-sizing: border-box;
}
.brx-thumb-noimg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f4f7fb;
}
.brx-noimg-brick--xs { transform: scale(0.55); margin-top: 0; }
.brx-figcell-name { min-width: 0; }
.brx-set-thumb { width: 58px; height: 44px; }
.brx-fig-host { margin: 4px 0 10px; font-size: 14px; color: #4b5563; }
.brx-fig-host a { font-weight: 700; }
.brx-method-list { margin: 0 0 18px; padding-left: 22px; }
.brx-method-list li { margin-bottom: 10px; }
@media (max-width: 640px) {
  .brx-card--fig .brx-fig-img { width: 100%; height: 170px; }
  /* Image area becomes a full-width band above the body: the side border
     would float mid-card, so swap it for a bottom rule. */
  .brx-fig-noimg { border-right: none; border-bottom: 1px solid #e5e9f0; }
}

/* Heat chip */
.brx-heat { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.brx-heat--inferno { background: linear-gradient(90deg, #b71c1c, #e65100); color: #fff; }
.brx-heat--hot { background: #ffe0b2; color: #b53d00; }
.brx-heat--warm { background: #fff3e0; color: #9a6700; }
.brx-heat--mild { background: #f1f5f9; color: #4b5563; }

/* Ranked card stack */
.brx-stack { display: flex; flex-direction: column; gap: 14px; margin: 22px 0; }
.brx-card {
  display: flex; align-items: stretch; gap: 0; border: 1.5px solid #d1d5db; border-radius: 12px;
  overflow: hidden; background: #fff; position: relative;
  box-shadow: 0 2px 8px rgba(27,43,72,0.06), 0 1px 3px rgba(0,0,0,0.04); transition: all 0.25s ease;
}
.brx-card:hover { border-color: #2ea3f2; box-shadow: 0 8px 24px rgba(27,43,72,0.15); transform: translateY(-2px); }
.brx-rank {
  flex-shrink: 0; width: 52px; display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #1B2B48, #2ea3f2);
}
.brx-card-img { width: 128px; height: 128px; object-fit: contain; align-self: center; flex-shrink: 0; padding: 8px; background: #fff; }
.brx-img-missing { background: #f1f5f9; }
.brx-card-body { padding: 14px 20px; flex: 1; min-width: 0; }
.brx-card-top { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; justify-content: space-between; }
.brx-card-name { font-weight: 800; font-size: 17px; color: #1B2B48; line-height: 1.3; }
.brx-card-name a { color: #1B2B48; text-decoration: underline; text-decoration-color: #2ea3f2; }
.brx-setnum { font-size: 13px; color: #6b7280; font-weight: 600; }
.brx-card-badges { display: flex; gap: 6px; align-items: center; }
.brx-card-stats { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 10px; }
.brx-stat { min-width: 72px; }
.brx-stat-label { font-size: 10px; font-weight: 700; color: #4b5563; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 2px; }
.brx-stat-value { font-size: 16px; font-weight: 700; color: #1a1a2e; line-height: 1.3; }

/* Stat tiles: key figures in tinted boxes */
.brx-tile { padding: 8px 14px; border-radius: 9px; min-width: 84px; border: 1px solid #e2e8f0; background: #f8fafc; }
.brx-tile--primary { background: linear-gradient(135deg, #eaf5ff, #dbeeff); border: 1.5px solid #2ea3f2; }
.brx-tile--primary .brx-stat-value { font-size: 22px; font-weight: 800; color: #1B2B48; }
.brx-tile--primary .brx-stat-label { color: #155e8f; }
.brx-tile--c0 { background: #f0fdf4; border-color: #bfe8cc; }
.brx-tile--c0 .brx-stat-value { color: #166534; }
.brx-tile--c1 { background: #fffbeb; border-color: #f0e1ab; }
.brx-tile--c1 .brx-stat-value { color: #92400e; }
.brx-tile--c2 { background: #faf5ff; border-color: #e3d3f2; }
.brx-tile--c2 .brx-stat-value { color: #6b21a8; }
.brx-tile--c3 { background: #fef2f2; border-color: #f4cccc; }
.brx-tile--c3 .brx-stat-value { color: #991b1b; }
.brx-tile--c4 { background: #f0f9ff; border-color: #c3e3f7; }
.brx-tile--c4 .brx-stat-value { color: #075985; }
.brx-tile--hero { background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.18); border-radius: 9px; padding: 8px 12px; }

/* Bar charts */
.brx-bars { border: 1.5px solid #d1d5db; border-radius: 12px; padding: 18px 20px; margin: 22px 0; background: #fff; }
.brx-bars-head { font-weight: 800; color: #1B2B48; font-size: 15px; margin-bottom: 12px; }
.brx-bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.brx-bar-label { flex: 0 0 220px; font-size: 13.5px; font-weight: 600; color: #374151; text-align: right; line-height: 1.25; }
.brx-bar-label a { color: #1B2B48; text-decoration: underline; text-decoration-color: #2ea3f2; }
.brx-bar-label .brx-setnum { display: none; }
.brx-bar-track { flex: 1; background: #f1f5f9; border-radius: 6px; height: 24px; overflow: hidden; }
/* Gradient right ends darkened so the white value text passes WCAG AA (4.5:1). */
.brx-bar-fill { height: 100%; background: linear-gradient(90deg, #1B2B48, #1d6fa8); border-radius: 6px; display: flex; align-items: center; justify-content: flex-end; min-width: 56px; }
.brx-bar-fill--top { background: linear-gradient(90deg, #b71c1c, #cc4a00); }
.brx-bar-fill span { color: #fff; font-size: 11.5px; font-weight: 800; padding: 0 9px; white-space: nowrap; }
.brx-bars-note { font-size: 12px; color: #6b7280; margin-top: 10px; }

/* SVG line chart container */
.brx-chart { border: 1.5px solid #d1d5db; border-radius: 12px; padding: 18px 20px 12px; margin: 22px 0; background: #fff; }

/* Heat gauge (set pages) */
.brx-gauge { border: 1.5px solid #d1d5db; border-radius: 12px; padding: 16px 20px; margin: 22px 0 14px; background: #fff; }
.brx-gauge-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.brx-gauge-num { font-size: 26px; font-weight: 800; color: #b53d00; }
.brx-gauge-num em { font-size: 13px; font-style: normal; color: #6b7280; font-weight: 600; }
.brx-gauge-track { height: 14px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.brx-gauge-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2ea3f2, #ff9900 70%, #b71c1c); }

/* Ranking cross-link chips (set pages) */
.brx-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 24px; }
.brx-chip { display: inline-block; background: #f0f7ff; border: 1.5px solid #bfdcf7; color: #1B2B48 !important; font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 999px; text-decoration: none !important; }
.brx-chip:hover { border-color: #2ea3f2; background: #e3f1fd; }
.brx-card-blurb { margin-top: 10px; font-size: 15px; line-height: 1.65; color: #374151; border-top: 1px dashed #e5e7eb; padding-top: 10px; }

/* Tables */
.brx-tablewrap { overflow-x: auto; margin: 20px 0; border: 1.5px solid #d1d5db; border-radius: 10px; }
.brx-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 !important; }
.brx-table caption { text-align: left; font-weight: 700; padding: 10px 14px; color: #1B2B48; }
/* !important beats Divi's `.entry-content tr th { color:#555 }` which otherwise
   renders header text at ~1.9:1 contrast on the navy background. */
.brx-tablewrap .brx-table thead th { background: #1B2B48 !important; color: #fff !important; text-align: left; padding: 10px 14px !important; font-size: 12px; text-transform: uppercase; letter-spacing: 0.8px; white-space: nowrap; }
.brx-table td { padding: 9px 14px; border-top: 1px solid #e5e7eb; color: #1a1a2e; }
.brx-table tbody tr:nth-child(even) { background: #f8fafc; }
.brx-table td a { color: #1B2B48; font-weight: 700; text-decoration: underline; text-decoration-color: #2ea3f2; }

/* Hero trading card */
.brx-hero {
  display: flex; flex-wrap: wrap; border: 2px solid #1B2B48; border-radius: 16px; overflow: hidden;
  margin: 10px 0 30px; background: #fff; box-shadow: 0 10px 30px rgba(27,43,72,0.18);
}
.brx-hero-img { flex: 1 1 300px; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(circle at 50% 40%, #ffffff 55%, #eef4fb 100%); }
.brx-hero-render { max-width: 100%; max-height: 340px; object-fit: contain; }
.brx-hero-panel { flex: 1 1 320px; background: linear-gradient(160deg, #1B2B48 0%, #223a63 70%, #1B2B48 100%); color: #fff; padding: 26px 28px; }
.brx-hero-badges { display: flex; gap: 8px; margin-bottom: 12px; }
.brx-hero-name { font-size: 28px; font-weight: 800; letter-spacing: -0.4px; line-height: 1.15; }
.brx-hero-num { font-size: 13px; color: #9db4d8; margin-top: 6px; font-weight: 600; }
.brx-hero-tagline { font-size: 15px; color: #cfe0f5; margin-top: 12px; font-style: italic; line-height: 1.5; }
.brx-hero-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 14px 18px; margin-top: 20px; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 18px; }
.brx-hero-stats .brx-stat-label { color: #9db4d8; }
.brx-hero-stats .brx-stat-value { color: #fff; font-size: 17px; }

/* Countdown */
.brx-countdown {
  display: flex; align-items: center; gap: 18px; background: #fff3e0; border: 1.5px solid rgba(230,81,0,0.25);
  border-radius: 12px; padding: 16px 22px; margin: 22px 0;
}
.brx-countdown-num { font-size: 44px; font-weight: 800; color: #e65100; line-height: 1; min-width: 90px; text-align: center; }
.brx-countdown-label { font-size: 15px; font-weight: 700; color: #7c2d12; line-height: 1.4; }
.brx-countdown-label span { font-weight: 500; color: #9a3412; font-size: 13px; }

/* Buy block */
.brx-buy { background: #f8fafc; border: 1.5px solid #d1d5db; border-radius: 12px; padding: 20px 24px; margin: 26px 0; text-align: center; }
.brx-buy-head { font-weight: 800; color: #1B2B48; font-size: 17px; margin-bottom: 12px; }
.brx-buy-btn {
  display: inline-block; background: #ff9900; color: #1a1a2e !important; font-weight: 800; font-size: 16px;
  padding: 12px 28px; border-radius: 8px; text-decoration: none !important; box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.brx-buy-btn:hover { background: #ffb84d; }
.brx-disclosure { font-size: 12px; color: #6b7280; margin-top: 10px; }

/* FAQ */
.brx-faq { margin: 14px 0 8px; }
.brx-faq-item { border: 1.5px solid #d1d5db; border-radius: 10px; margin-bottom: 10px; background: #fff; }
.brx-faq-item summary { cursor: pointer; font-weight: 700; color: #1B2B48; padding: 14px 18px; font-size: 16px; }
.brx-faq-item[open] { border-color: #2ea3f2; }
.brx-faq-a { padding: 0 18px 14px; font-size: 15px; line-height: 1.65; color: #374151; }

/* Credits, disclosures, related */
.brx-credits { margin-top: 34px; padding-top: 14px; border-top: 1px solid #e5e7eb; font-size: 12.5px; color: #6b7280; line-height: 1.6; }
.brx-credits p { margin: 0 0 6px !important; }
.brx-credits a { color: #4b5563; }
.brx-nfa { font-size: 13px; color: #6b7280; font-style: italic; background: #f8fafc; border-radius: 8px; padding: 12px 16px; margin: 22px 0; }
.brx-related { background: #f0f7ff; border-radius: 12px; padding: 18px 22px; margin: 26px 0; }
.brx-related-head { font-weight: 800; color: #1B2B48; margin-bottom: 8px; font-size: 16px; }
.brx-related ul { margin: 0 !important; padding-left: 20px !important; }
.brx-related li { margin-bottom: 5px; font-size: 15px; }
.brx-related a { color: #1B2B48; font-weight: 600; }

/* Formula box (Heat Index) */
.brx-formula { background: #1B2B48; color: #dbe7f6; border-radius: 12px; padding: 20px 24px; margin: 20px 0; font-size: 15px; line-height: 1.7; }
.brx-formula code { background: rgba(255,255,255,0.12); color: #fff; padding: 2px 8px; border-radius: 5px; font-size: 14px; }

/* Tier legend on tracker */
.brx-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin: 22px 0; }
.brx-tier-box { border-radius: 12px; padding: 16px 18px; border: 1.5px solid #d1d5db; background: #fff; }
.brx-tier-box .brx-badge { margin-bottom: 8px; }
.brx-tier-box p { margin: 8px 0 0 !important; font-size: 14px; color: #374151; line-height: 1.55; }
.brx-tier-count { font-size: 30px; font-weight: 800; color: #1B2B48; }

/* Embedded set card in blog posts (shortcode) */
.brx-embed { margin: 26px 0; }
.brx-embed .brx-rank { display: none; }

/* Visible keyboard focus */
.brx-content a:focus-visible, .brx-chip:focus-visible, .brx-buy-btn:focus-visible, .brx-faq-item summary:focus-visible { outline: 3px solid #1d6fa8 !important; outline-offset: 2px; border-radius: 4px; }

@media (max-width: 640px) {
  .brx-card { flex-wrap: wrap; }
  .brx-rank { width: 100%; height: 34px; font-size: 16px; }
  .brx-card-img { width: 100%; height: 150px; }
  .brx-hero-name { font-size: 23px; }
  .brx-answer { font-size: 17px; }
  .brx-countdown-num { font-size: 34px; min-width: 70px; }
  .brx-tile--primary .brx-stat-value { font-size: 19px; }

  /* Bar charts: label above its bar instead of squeezed beside it. */
  .brx-bar-row { display: block; margin-bottom: 14px; }
  .brx-bar-label { flex: none; width: 100%; text-align: left; font-size: 13px; margin-bottom: 4px; }
  .brx-bar-label .brx-setnum { display: inline; color: #6b7280; font-weight: 500; }
}

/* Phones: tables re-flow into stacked set cards — a five-column grid can't
   survive a 390px viewport. Each row becomes a card: navy header band with
   the set name (echoing the desktop thead), then the remaining columns as a
   compact two-up grid of mini stat tiles (label over value, via data-label). */
@media (max-width: 700px) {
  .brx-tablewrap { border: none; overflow: visible; }
  .brx-table, .brx-table tbody { display: block; width: 100%; }
  .brx-table thead { display: none; }
  .brx-table caption {
    display: block;
    padding: 10px 14px;
    background: #f0f7ff;
    border: 1.5px solid #bfdcf7;
    border-radius: 12px;
    margin-bottom: 12px;
    font-size: 14.5px;
  }
  .brx-table tbody tr {
    display: flex;
    flex-wrap: wrap;
    background: #fff !important;
    border: 1.5px solid #d1d5db;
    border-radius: 14px;
    margin-bottom: 14px;
    padding: 0 0 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.07);
  }
  .brx-table td {
    display: block;
    flex: 1 0 50%;
    max-width: 50%;
    box-sizing: border-box;
    padding: 9px 16px 5px;
    border-top: none;
    text-align: left;
    font-size: 15.5px;
    font-weight: 700;
    color: #1B2B48;
  }
  .brx-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #6b7280;
    margin-bottom: 2px;
  }
  /* Set/Minifigure cell = card header: full-width navy band, white name. */
  .brx-table td[data-label="Set"],
  .brx-table td[data-label="Minifigure"] {
    flex: 1 0 100%;
    max-width: 100%;
    background: #1B2B48;
    padding: 12px 16px;
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 1.35;
    /* !important: Divi's .entry-content td rules can outrank us on some
       templates, turning plain (unlinked) set names navy-on-navy. */
    color: #fff !important;
  }
  .brx-table td[data-label="Set"] .brx-figcell-name,
  .brx-table td[data-label="Minifigure"] .brx-figcell-name { color: #fff; }
  .brx-table td[data-label="Set"]::before,
  .brx-table td[data-label="Minifigure"]::before { display: none; }
  .brx-table td[data-label="Set"] a,
  .brx-table td[data-label="Minifigure"] a {
    color: #fff !important;
    text-decoration: none !important;
  }
  .brx-table td[data-label="Set"] .brx-setnum,
  .brx-table td[data-label="Minifigure"] .brx-setnum { color: #9fb1c9; font-weight: 600; }
  /* Long host-set names get the full card width. */
  .brx-table td[data-label="Rarest Host Set"] { flex: 1 0 100%; max-width: 100%; }
  /* Thumbnail rides inside the navy band as a white chip. */
  .brx-table td[data-label="Minifigure"] .brx-figcell,
  .brx-table td[data-label="Set"] .brx-figcell { gap: 12px; }
  .brx-table td[data-label="Minifigure"] .brx-fig-thumb { width: 48px; height: 58px; border: none; }
  .brx-table td[data-label="Set"] .brx-set-thumb { width: 62px; height: 46px; border: none; }
  /* Rank rides inside the header as a yellow chip line. */
  .brx-table td[data-label="Rank"] {
    flex: 1 0 100%;
    max-width: 100%;
    background: #1B2B48;
    color: #ffd500;
    padding: 10px 16px 0;
    margin-bottom: -7px;
    font-size: 13px;
  }
  .brx-table td[data-label="Rank"]::before {
    display: inline;
    color: #9fb1c9;
    margin-right: 6px;
  }
}