/* ============================================================
   SkinSignal / the trade board, signed out
   js/forum.js (enterPublic, renderPublicBoard) and forum.html's
   [data-tbp] blocks. Every rule is scoped to body.tb--public or the
   .tbp classes only the signed out view draws, so the signed in board
   is exactly as css/forum.css draws it.

   The layout: the hero across the top, the board on the left with the
   sign in panel and the notice beside it, how it works across the foot.
   The notice sits before the board in the page, as it always has; the
   grid only places it beside the board on a wide screen.

   Restrained: dark instrument panels, blue for the way in and the
   steps, gold for the title's last word, the "Your turn" panel and the
   notice. No values anywhere: a tile is a picture.
   ============================================================ */

/* The public blocks carry `hidden` until js/forum.js raises them; their
   own display rules must never outrank it, or the signed in board would
   draw them too. */
[data-tbp][hidden] { display: none !important; }

.tb--public .tb-head,
.tb--public #compose { display: none; }

.tb--public .tb-wrap {
  max-width: 1320px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(290px, 330px);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "hero   hero"
    "board  signin"
    "board  notice"
    "how    how";
  column-gap: clamp(16px, 1.6vw, 24px);
  row-gap: 16px;
}
.tb--public .tb-wrap > * + * { margin-top: 0; }
.tb--public .tbp-hero { grid-area: hero; }
.tb--public .tb-notice-wrap { grid-area: notice; align-self: start; }
.tb--public .tbp-signin { grid-area: signin; }
.tb--public #board { grid-area: board; align-self: start; min-width: 0; }
.tb--public .tbp-how { grid-area: how; }

.tbp-gold { color: #e4ae39; }
.tbp-eyebrow {
  margin: 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #e4ae39;
}
.tbp-eyebrow--blue { color: #8fb6ff; }

/* ---------- The hero ---------- */
.tbp-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  margin-bottom: clamp(8px, 1.4vw, 20px);
}
.tbp-title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 800;
  font-size: clamp(36px, 3.9vw, 60px);
  line-height: 0.98;
  letter-spacing: -0.012em;
  color: #f4f1ea;
}
.tbp-title > span { display: block; }
.tbp-lede { max-width: 560px; margin: 16px 0 0; font-family: var(--font-body); font-size: clamp(15.5px, 1.05vw, 18px); line-height: 1.6; color: #b4bac5; }
.tbp-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 18px;
  margin: clamp(22px, 2.2vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}
.tbp-steps li { display: flex; gap: 10px; align-items: flex-start; font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: #8a919e; }
.tbp-steps svg { flex: none; width: 24px; height: 24px; fill: none; stroke: #6aa0ff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: #6aa0ff; }
.tbp-steps b {
  display: block;
  margin-bottom: 3px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8fb6ff;
}
.tbp-steps b span { margin-right: 7px; color: #6f7785; }

/* HAVE, then WANT: two real renders, fading into the page. */
.tbp-art {
  position: relative;
  min-height: clamp(240px, 22vw, 320px);
  background: radial-gradient(50% 55% at 55% 50%, rgba(61, 127, 255, 0.1), rgba(61, 127, 255, 0) 72%),
              radial-gradient(30% 40% at 80% 40%, rgba(228, 174, 57, 0.06), rgba(228, 174, 57, 0) 72%);
}
.tbp-art__item { position: absolute; display: block; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, 0.75)); }
.tbp-art__img { display: block; width: 100%; height: auto; object-fit: contain; }
.tbp-art__img.is-empty { display: none; }
.tbp-art__item--have { width: 62%; left: 0; top: 22%; rotate: -8deg; }
.tbp-art__item--want { width: 44%; right: 2%; top: 4%; rotate: 10deg; }
.tbp-art__tag {
  position: absolute;
  z-index: 1;
  padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(9, 13, 20, 0.85);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #c9d2e3;
}
.tbp-art__tag--have { left: 12%; top: 10%; }
.tbp-art__tag--want { right: 8%; bottom: 14%; color: #f1cf7a; border-color: rgba(228, 174, 57, 0.35); }

/* ---------- The board ---------- */
.tb--public #board {
  padding: 18px clamp(14px, 1.4vw, 20px) 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005)), #090d14;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
.tbp-board__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 0 4px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.tbp-board__title { margin: 0 4px 0 0; font-family: var(--font-display); font-stretch: 100%; font-weight: 800; font-size: clamp(20px, 1.5vw, 24px); color: #f4f1ea; }
.tbp-chip {
  padding: 3px 9px;
  border: 1px solid rgba(61, 127, 255, 0.35);
  border-radius: 999px;
  background: rgba(61, 127, 255, 0.08);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9fc0ff;
}
.tbp-chip--example { border-color: rgba(228, 174, 57, 0.45); background: rgba(228, 174, 57, 0.08); color: #f1cf7a; }
.tbp-board__order { margin-left: auto; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: 0.08em; color: #7f8794; }
.tbp-board__quiet { margin: 12px 4px 4px; font-family: var(--font-body); font-size: 13.5px; line-height: 1.5; color: #8a919e; }
.tb--public #board .tb-skel { margin-top: 4px; }
.tb--public #board .tb-skel span { height: 82px; }

.tbp-rows { display: grid; gap: 8px; margin-top: 10px; }
.tbp-row {
  display: grid;
  grid-template-columns: minmax(170px, 1.05fr) minmax(0, 1.2fr) 22px minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.015);
  transition: background-color var(--hover-dur, 200ms) ease, border-color var(--hover-dur, 200ms) ease;
}
.tbp-row:hover { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); }
.tbp-row__who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tbp-row__avatar, .tbp-row__mono { flex: none; width: 36px; height: 36px; border-radius: 50%; }
.tbp-row__avatar { object-fit: cover; background: #141a24; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); }
.tbp-row__avatar.is-empty { display: block; }
.tbp-row__mono { display: grid; place-items: center; background: #141a24; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #8a919e; }
.tbp-row__emblem { flex: none; width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6)); }
.tbp-row__emblem.is-empty { display: none; }
.tbp-row__id { display: grid; justify-items: start; gap: 3px; min-width: 0; }
.tbp-row__name { max-width: 100%; overflow: hidden; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: #f4f1ea; text-overflow: ellipsis; white-space: nowrap; }
.tbp-row__rank {
  padding: 1px 7px;
  border: 1px solid rgba(228, 174, 57, 0.4);
  border-radius: 999px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f1cf7a;
  white-space: nowrap;
}
.tbp-row__when { font-family: var(--font-body); font-size: 12px; color: #7f8794; }
.tbp-row__when--example { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #c9a24e; }
.tbp-row__side { min-width: 0; }
.tbp-row__label { margin: 0 0 6px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #6aa0ff; }
.tbp-row__side--want .tbp-row__label { color: #c9a24e; }
.tbp-row__text { margin: 0; font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: #b4bac5; overflow-wrap: anywhere; }
.tbp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 72px)); gap: 6px; }
.tbp-tile {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 2px solid var(--rarity, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  background: radial-gradient(70% 70% at 50% 45%, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0)), #0b1018;
  box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.5);
}
.tbp-tile__img { display: block; width: 88%; height: 88%; object-fit: contain; transition: filter var(--hover-dur, 200ms) ease; }
.tbp-row:hover .tbp-tile__img { filter: brightness(1.1); }
.tbp-tile__img.is-empty { visibility: hidden; }
.tbp-tile--more { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: #8a919e; }
.tbp-row__arrow {
  width: 22px;
  height: 22px;
  background: linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat;
  color: #8a919e;
  position: relative;
}
.tbp-row__arrow::after { content: ''; position: absolute; right: 4px; top: 7px; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; rotate: 45deg; }
.tbp-row__btn {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(76, 141, 255, 0.55);
  border-radius: 9px;
  background: rgba(10, 18, 34, 0.6);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: #f4f6fa;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color var(--hover-dur, 200ms) ease, background-color var(--hover-dur, 200ms) ease, translate var(--hover-dur, 200ms) var(--ease);
}
.tbp-row__btn:hover { border-color: rgba(118, 166, 255, 0.9); background: rgba(18, 32, 60, 0.75); translate: 0 -1px; }
.tbp-row__btn:focus-visible { outline: 2px solid rgba(118, 166, 255, 0.85); outline-offset: 2px; }
.tbp-row__detail { grid-column: 1 / -1; }
.tbp-row__detail .post { margin-top: 6px; }

.tbp-error { margin-top: 12px; padding: 22px; text-align: center; }
.tbp-error .post__btn { margin-top: 12px; }

/* ---------- The way in ---------- */
.tbp-signin {
  position: relative;
  padding: clamp(20px, 1.8vw, 26px);
  border: 1px solid rgba(228, 174, 57, 0.3);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.005)), #0b1018;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 230, 170, 0.06);
}
.tbp-signin__title { margin: 10px 0 0; font-family: var(--font-display); font-stretch: 100%; font-weight: 800; font-size: clamp(26px, 2vw, 32px); line-height: 1.04; color: #f4f1ea; }
.tbp-signin__title > span { display: block; }
.tbp-signin__line { margin: 12px 0 18px; font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: #b4bac5; }
.tbp-signin__cta { width: 100%; justify-content: center; }
.tbp-ticks { display: grid; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; font-family: var(--font-body); font-size: 13px; color: #b4bac5; }
.tbp-ticks li { display: flex; align-items: flex-start; gap: 8px; }
.tbp-ticks svg { flex: none; width: 16px; height: 16px; margin-top: 1px; fill: none; stroke: #4c8dff; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- The notice, as the gold "Not a marketplace" panel ---------- */
/* The one rule here that is not scoped to the signed out view: the notice
   gained a second paragraph (the no-cut line) for everybody, and in
   css/forum.css's two-column grid a third child would fall into the icon's
   column. Every line of the notice belongs in the text column. */
.notice > p { grid-column: 2; }
.notice::before { grid-row: span 3; }
.notice__kicker { display: none; }
.tb--public .notice { padding: 18px 20px; border-radius: 16px; background: rgba(228, 174, 57, 0.05); border-color: rgba(228, 174, 57, 0.28); }
.tb--public .notice__kicker {
  display: block;
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 800;
  font-size: 17px;
  color: #f1c65a;
}
.tb--public .notice::before { grid-row: span 4; }
.tb--public .notice__body { font-size: 13px; }

/* ---------- How it works ---------- */
.tbp-how {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 3vw, 48px);
  padding: 20px clamp(18px, 2vw, 28px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.005)), #090d14;
}
.tbp-how__title { margin: 0; font-family: var(--font-display); font-stretch: 100%; font-weight: 800; font-size: clamp(20px, 1.6vw, 26px); color: #f4f1ea; white-space: nowrap; }
.tbp-how__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 24px; margin: 0; padding: 0; list-style: none; }
.tbp-how__steps li { display: flex; gap: 12px; align-items: flex-start; font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: #8a919e; }
.tbp-how__steps b { display: block; margin-bottom: 2px; font-size: 14px; color: #f4f1ea; }
.tbp-how__n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid rgba(76, 141, 255, 0.55); border-radius: 50%; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px; color: #9fc0ff; box-shadow: 0 0 14px -6px rgba(61, 127, 255, 0.8); }

/* ============================================================
   NARROWER
   ============================================================ */
@media (max-width: 1100px) {
  .tbp-row { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr) auto; }
  .tbp-row__who { grid-column: 1 / -1; }
}

/* Tablet and phone: one column. The notice stays above the board. */
@media (max-width: 900px) {
  .tb--public .tb-wrap {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "hero" "notice" "board" "signin" "how";
  }
  .tbp-hero { grid-template-columns: minmax(0, 1fr); }
  .tbp-art { min-height: 0; aspect-ratio: 16 / 9; max-width: 520px; width: 100%; margin: 0 auto; }
  .tbp-how { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .tbp-steps { grid-template-columns: minmax(0, 1fr); }
  .tbp-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tbp-row__arrow { display: none; }
  .tbp-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tbp-row__act .tbp-row__btn { width: 100%; justify-content: center; }
  .tbp-how__steps { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .tbp-row, .tbp-row__btn, .tbp-tile__img { transition: none; }
  .tbp-row__btn:hover { translate: none; }
  .tb--public #board .tb-skel span { animation: none; }
}