/* ──────────────────────────────────────────────────────────────────────────
   broker.css - the TradeSmart promo cards: the simulator's side panel, the
   game's results screen, and the wide banner on the calculators and the game
   lobby.

   Built to TradeSmart's brand rather than ours: their navy, their amber, a
   rule across the top that is the four bars of their logo in order, and the
   lean of those bars in the background. A partner card wearing the host's
   colours reads as a house feature, and none of these is one. Looking like
   their advertising is the honest presentation of what it is.

   Brand values are sampled from the logo artwork, not guessed: wordmark
   #1D1E30, bars #F0B769 / #E42D5B / #06B991 / #339AFF.

   These two cards previously carried their whole appearance in inline style
   attributes, which is why they drifted from each other and from the three
   cards in blog.css and journal.css. Inline styles also cannot express the
   motif (it needs a pseudo-element) or a hover state without an onmouseover
   handler, which is why those existed. They are gone.

   Contrast against the #232D45 ground, checked rather than eyeballed:
   white 13.7:1, amber 7.6:1, the tick 5.5:1, muted text at 62% 6.2:1.
   ────────────────────────────────────────────────────────────────────────── */

.tsb {
  position: relative; overflow: hidden;
  background: #232D45;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(20,27,45,.26);
  color: #fff;
}
/* The four bars of the logo, in their order. */
.tsb::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg,#F0B769 0%,#E42D5B 33%,#06B991 66%,#339AFF 100%);
}
/* Generic geometry at 4% white, set to the lean of those bars. Not the mark. */
.tsb::after {
  content: ''; position: absolute; inset: -25%; pointer-events: none;
  background: repeating-linear-gradient(155deg,
    rgba(255,255,255,.045) 0 24px, rgba(255,255,255,0) 24px 68px);
}
.tsb > * { position: relative; z-index: 1; }

.tsb-dismiss {
  position: absolute; top: 5px; right: 6px; z-index: 3;
  background: none; border: 0; cursor: pointer; line-height: 1;
  padding: 3px 5px; border-radius: 5px;
  color: rgba(255,255,255,.45); font-size: 13px;
  transition: color .15s ease, background .15s ease;
}
.tsb-dismiss:hover { color: #fff; background: rgba(255,255,255,.1); }
.tsb-dismiss:focus-visible { outline: 2px solid #F0B769; outline-offset: 1px; }

.tsb-eyebrow { font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #F0B769; }
.tsb-title   { font-size: 13px; font-weight: 800; color: #fff; line-height: 1.3; margin-top: 3px; }
.tsb-meta    { font-size: 10.5px; color: rgba(255,255,255,.78); line-height: 1.5; margin-top: 4px; }
.tsb-disc    { font-size: 9px; color: rgba(255,255,255,.55); line-height: 1.45; margin-top: 5px; }

.tsb-logo {
  flex-shrink: 0; display: block; line-height: 0;
}
.tsb-logo img { display: block; height: 26px; width: auto; }

.tsb-cta {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  background: var(--orange); color: #fff; text-decoration: none;
  font-size: 11.5px; font-weight: 800; white-space: nowrap;
  padding: 10px 16px; border-radius: 9px;
  box-shadow: 0 3px 12px rgba(255,92,26,.34);
  transition: background .15s ease, transform .12s ease;
}
.tsb-cta:hover { background: #ff6f36; transform: translateY(-1px); color: #fff; }
.tsb-cta:focus-visible { outline: 3px solid #F0B769; outline-offset: 3px; }

.tsb-link {
  font-size: 9.5px; font-weight: 700; color: #F0B769; text-decoration: none; white-space: nowrap;
}
.tsb-link:hover { text-decoration: underline; color: #F0B769; }

/* ── The simulator card: a narrow column beside the positions panel ─────── */
.tsb-compact { display: flex; align-items: center; gap: 12px; padding: 13px 15px; }
.tsb-compact .tsb-body { flex: 1; min-width: 0; padding-right: 10px; }
/* The mark sits above the eyebrow rather than beside it. This column is narrow
   enough that a logo and a label on one row would leave neither room to be
   read, and the lockup is the thing worth giving a clear line to. */
.tsb-compact .tsb-logo { margin-bottom: 7px; }
.tsb-compact .tsb-logo img { height: 22px; }

/* ── The game card: results screen, alternate rounds, accuracy from 40% ── */
/* game.js reveals this by setting display:flex straight on the element, so the
   card has to lay out correctly as a flex container as well as a block one.
   Declaring the column direction here means it does, and game.js needs no
   change to a line that is about when to show the card, not how it looks. */
.tsb-wide { max-width: 420px; width: 100%; margin: 20px auto 4px; padding: 14px 15px; flex-direction: column; }
.tsb-wide .tsb-row { display: flex; align-items: center; gap: 12px; }
.tsb-wide .tsb-body { flex: 1; min-width: 0; padding-right: 14px; }
.tsb-wide .tsb-actions { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.tsb-wide .tsb-disc { text-align: center; margin-top: 9px; }

/* ── The wide banner: calculators and the game lobby ───────────────────── */
.tsb-banner {
  max-width: 820px; margin: 22px auto; padding: 16px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; border-radius: 14px;
}
.tsb-banner .tsb-logo { align-self: center; }
.tsb-banner .tsb-body { flex: 1; min-width: 220px; }
.tsb-banner .tsb-title { font-size: 15px; }
.tsb-banner .tsb-disc { max-width: 470px; }
.tsb-banner .tsb-cta { font-size: 14px; padding: 12px 22px; border-radius: 11px; }

@media (max-width: 420px) {
  .tsb-wide .tsb-row { flex-wrap: wrap; }
  .tsb-wide .tsb-actions { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
}

@media (prefers-reduced-motion: reduce) {
  .tsb-cta, .tsb-dismiss { transition: none; }
  .tsb-cta:hover { transform: none; }
}