/* /widgets (src/pages/widgets.js): the builders in the minerprices shell. Options on the left, the live widget with its
   embed code on the right; one column on phones. */
.wb { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 18px; align-items: start; margin: 14px 0 26px; }
.wb + .wb { padding-top: 22px; border-top: 1px solid hsl(var(--border)); }
.wb-in { position: sticky; top: 90px; padding: 16px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); }
.wb-in h3 { margin: 0 0 12px; font-size: 16px; font-weight: 800; }
.wb-in .form { gap: 12px; }
.wb-coins { display: flex; flex-wrap: wrap; gap: 6px 12px; border: 1px solid hsl(var(--border)); border-radius: 4px; padding: 8px 10px; margin: 0; max-height: 150px; overflow: auto; }
.wb-coins legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.wb-coins .check { font-size: 13px; font-weight: 500; }
.wb-out { display: grid; gap: 10px; min-width: 0; }
/* the preview sits on a checked "your page" backdrop, so the widget's own edges and brand bar show */
.wb-prev { padding: 14px; border-radius: var(--radius); border: 1px dashed hsl(var(--field-border));
  background: repeating-linear-gradient(45deg, hsl(var(--muted)) 0 10px, hsl(var(--background)) 10px 20px); }
.wb-prev iframe { display: block; width: 100%; border: 0; border-radius: 6px; background: hsl(var(--card)); box-shadow: 0 10px 30px -16px rgba(16,20,29,.45); }
.wb-code { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.wb-code textarea { font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 10px; border: 1px solid hsl(var(--field-border)); border-radius: 4px; background: var(--ink); color: var(--ink-text); resize: vertical; }
.wb-out .btn { justify-self: start; }
@media (max-width: 900px) { .wb { grid-template-columns: minmax(0, 1fr); } .wb-in { position: static; } .wb-prev { padding: 8px; } }

/* how to add it */
.wb-steps { list-style: none; padding: 0; margin: 14px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.wb-steps li { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid hsl(var(--border)); border-radius: var(--radius); background: hsl(var(--card)); font-size: 14px; }
.wb-steps b { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 4px; background: var(--brand); color: var(--on-brand); font-weight: 800; }
.wb-tips { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; color: hsl(var(--muted-foreground)); }
.wb-where { margin: 0; display: grid; gap: 8px; }
.wb-where > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid hsl(var(--border)); }
.wb-where dt { font-weight: 800; }
.wb-where dd { margin: 0; font-size: 14px; }
@media (max-width: 600px) { .wb-where > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.wb-ref-h { margin: 18px 0 6px; font-size: 13px; }
.wb-ref-h code, .wb-ref code { font: 12.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.wb-ref td { padding: 8px 10px; vertical-align: top; font-size: 13.5px; }
.wb-ref td:first-child { white-space: nowrap; font-weight: 600; }