/* Bear Coins: the launch form, what can go wrong, the three wallet steps, the directory, and the landing teaser.
   Built from the shop's own pieces (cards, fields, the tape picker, facts); only what they lack is here. */

.bc-off { border-left: 6px solid var(--sticker); }
.bc-top { align-items: start; }
.bc-side { display: grid; gap: 20px; }

/* The stock picker sits on its own little shelf inside the card. */
.bc-card .bc-pick { margin-top: 2px; padding: 16px 8px 0; background: var(--carpet); border-radius: 8px 8px 0 0; }
.bc-card .bc-pick .pk { max-width: 64px; height: 112px; }
.bc-card .bc-pick .pk:nth-child(3n+2) { height: 106px; }
.bc-card .bc-pick .pk:nth-child(4n+3) { height: 116px; }
.bc-card .bc-pick .pk:nth-child(5n+4) { height: 110px; }
.bc-card .bc-pick .pk-label { height: 74px; }
.bc-card .bc-pick .pk-label b { font-size: 19px; }
.bc-card .bc-pick .pk-label small { display: none; }
.bc-card .bc-pick .pk-dot { font-size: 9px; min-width: 0; width: calc(100% + 6px); padding: 1px 0; }
.bc-card .bc-pick .pk[aria-checked="true"] { transform: translateY(-12px); }

.field textarea {
  width: 100%; font: inherit; font-size: 17px; line-height: 1.4; padding: 10px 13px; color: var(--ink); resize: vertical; min-height: 84px;
  background: #fff; border: 2px solid var(--ink); border-radius: 8px;
}
.field input:disabled, .field textarea:disabled { background: #efebde; color: #55557a; }
.bc-ticker { text-transform: uppercase; }
.bc-two { margin-top: 0; gap: 12px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }

/* The picture: a square thumbnail beside the upload button or the link. */
.bc-pic { display: flex; gap: 12px; align-items: center; }
.bc-pic-in { flex: 1; min-width: 0; display: grid; gap: 8px; }
.bc-thumb, .bc-logo {
  flex: none; display: grid; place-items: center; overflow: hidden; background: var(--tape); color: var(--sticker);
  border: 2px solid var(--ink);
}
.bc-thumb { width: 64px; height: 64px; border-radius: 10px; }
.bc-thumb img, .bc-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-mono { font-weight: 900; font-stretch: 125%; font-size: 20px; letter-spacing: -.02em; }
.card .btn.bc-file { margin-top: 0; justify-self: start; position: relative; overflow: hidden; cursor: pointer; }
.bc-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bc-file:focus-within { outline: 3px solid var(--mint); outline-offset: 3px; }
.bc-links summary .soft { font-weight: 400; font-size: 14px; margin-left: 6px; }
.bc-card .check { align-items: flex-start; }
.bc-card .check input { flex: none; margin-top: 3px; }

/* The three wallet steps. */
.bc-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.bc-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: #fff; border: 2px solid #e3ddc9; }
.bc-steps li > i {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900;
  background: #e3ddc9; color: var(--ink);
}
.bc-steps li div { display: grid; gap: 1px; min-width: 0; }
.bc-steps li b { font-size: 16px; }
.bc-steps li span { font-size: 14px; color: #55557a; }
.bc-steps li small { font-size: 13.5px; font-weight: 700; }
.bc-steps li small:empty { display: none; }
.bc-steps li[data-state="now"] { border-color: var(--ink); box-shadow: 0 0 0 3px var(--sticker); }
.bc-steps li[data-state="now"] > i { background: var(--sticker); animation: bc-pulse 1.2s ease-in-out infinite; }
.bc-steps li[data-state="done"] > i { background: var(--mint); }
.bc-steps li[data-state="done"] > i::before { content: "\2713"; }
.bc-steps li[data-state="done"] > i { font-size: 0; }
.bc-steps li[data-state="done"] > i::before { font-size: 16px; }
@keyframes bc-pulse { 50% { transform: scale(1.12); } }

/* What can go wrong. */
.bc-risk { border-left: 10px solid var(--neon); }
.bc-risks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bc-risks li { font-size: 15.5px; line-height: 1.45; padding-bottom: 10px; border-bottom: 1px dashed #b9b4a2; }
.bc-risks li:last-child { border-bottom: 0; padding-bottom: 0; }
.bc-risks b { display: block; font-size: 17px; }

/* The directory. */
.bc-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 46px; }
.bc-head h2 { font-size: clamp(28px, 4vw, 40px); }
.bc-head .hand { font-size: 24px; color: var(--sticker); }
.bc-head + .soft { margin-top: 6px; }
.bc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; margin-top: 20px; }
.bc-list .empty { color: var(--soft); }
.bc-coin { background: var(--label); color: var(--ink); border-radius: 10px; padding: 18px 20px 16px; display: flex; flex-direction: column; }
.bc-coin header { display: flex; gap: 12px; align-items: center; }
.bc-logo { width: 52px; height: 52px; border-radius: 50%; }
.bc-logo .bc-mono { font-size: 17px; }
.bc-who { display: grid; min-width: 0; flex: 1; }
.bc-who b { font-size: 19px; font-stretch: 112%; font-weight: 900; line-height: 1.1; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bc-who span { font-size: 14px; font-weight: 700; color: #55557a; }
.bc-stock {
  flex: none; align-self: flex-start; padding: 4px 9px; border-radius: 4px; background: var(--ink); color: var(--sticker);
  font-size: 13px; font-weight: 800; white-space: nowrap; transform: rotate(3deg);
}
.bc-coin .facts { margin-top: 10px; }
.bc-coin .facts li { padding: 7px 0; font-size: 15px; }
.bc-coin .facts b.up { color: #087a5b; }
.bc-coin .facts b.down { color: #b3124f; }
.bc-warn { margin-top: 10px; padding: 8px 10px; font-size: 14px; font-weight: 600; background: #ffe0ee; border-left: 5px solid var(--neon); border-radius: 0 6px 6px 0; }
.bc-go { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 12px; }
.bc-go a {
  font-size: 14px; font-weight: 800; color: var(--ink); text-decoration: none; padding: 5px 11px; border-radius: 99px;
  box-shadow: inset 0 0 0 2px var(--ink);
}
.bc-go a:hover { background: rgba(22, 22, 43, .07); }

/* The landing teaser. */
.bc-tease { margin: 56px 0 72px; }
.bc-tease a {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; text-decoration: none;
  color: var(--ink); background: var(--label); border-radius: 12px; padding: 22px 26px; border-left: 12px solid var(--neon);
}
.bc-tease a:hover .btn { background: #ffe366; }
.bc-tease svg { width: 92px; height: 92px; display: block; }
.bc-tease h2 { font-size: clamp(28px, 4vw, 42px); }
.bc-tease p { margin-top: 6px; max-width: 46em; }
.bc-tease p.hand { font-size: 21px; color: #b3124f; margin-top: 2px; }
.bc-tease small { display: block; margin-top: 8px; font-size: 14px; color: #55557a; }
.bc-tease .btn { pointer-events: none; white-space: nowrap; }
.bc-tease .sticker { position: absolute; top: -18px; right: 22px; width: 64px; height: 64px; font-size: 15px; transform: rotate(-8deg); }

@media (max-width: 860px) {
  .bc-tease a { grid-template-columns: auto minmax(0, 1fr); }
  .bc-tease .btn { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 620px) {
  .bc-card { padding: 22px 16px; }
  .bc-card .bc-pick { gap: 3px; padding: 14px 4px 0; }
  .bc-card .bc-pick .pk { height: 100px; padding: 5px 2px 0; }
  .bc-card .bc-pick .pk:nth-child(3n+2) { height: 96px; }
  .bc-card .bc-pick .pk:nth-child(4n+3) { height: 104px; }
  .bc-card .bc-pick .pk:nth-child(5n+4) { height: 98px; }
  .bc-card .bc-pick .pk-label { height: 66px; }
  .bc-card .bc-pick .pk-label b { font-size: 15px; }
  .bc-card .bc-pick .pk-dot { display: none; }
  .bc-list { grid-template-columns: minmax(0, 1fr); }
  .bc-tease a { grid-template-columns: minmax(0, 1fr); padding: 22px 18px 20px; gap: 12px; }
  .bc-tease svg { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .bc-steps li[data-state="now"] > i { animation: none; }
}