/* The public sandbox, on top of brand.css and site.css. */

body { background: var(--gp-bg); font-family: "Inter", "Hind Siliguri", system-ui, sans-serif; }
.demo { padding-top: 48px; padding-bottom: 72px; }
.intro { max-width: 640px; }
.intro h1 { font: 700 34px/1.25 "Hind Siliguri", var(--gp-font); letter-spacing: -.01em; margin: 14px 0 10px; color: var(--gp-navy); }
.intro p { color: var(--gp-slate); margin: 0; font-size: 16px; }

.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 24px; align-items: start; margin-top: 32px; }
@media (max-width: 860px) { .demo-grid { grid-template-columns: 1fr; } .intro h1 { font-size: 27px; } }

.box { padding: 24px; box-shadow: var(--gp-shadow); }
.box h2 { font: 600 18px var(--gp-font); margin: 0 0 16px; color: var(--gp-navy); }
.box h3 { font: 600 16px var(--gp-font); margin: 18px 0 4px; color: var(--gp-navy); }
.products { display: grid; border: 1px solid var(--gp-border); border-radius: var(--gp-r); overflow: hidden; margin-bottom: 16px; }
.product { display: flex; align-items: center; gap: 12px; padding: 14px; border: 0; border-top: 1px solid var(--gp-border); background: #fff; cursor: pointer;
  font: 500 15px var(--gp-font); color: var(--gp-navy); text-align: left; min-height: 56px; }
.product:first-child { border-top: 0; }
.product:hover { background: #fafbfc; }
.product b { flex: 1; font-weight: 500; }
.product .radio { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--gp-border-strong); flex: none; display: grid; place-items: center; }
.product.on { background: #fbfbff; box-shadow: inset 3px 0 0 var(--gp-indigo); }
.product.on .radio { border-color: var(--gp-indigo); }
.product.on .radio::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gp-indigo); }
.price { font: 600 16px var(--gp-font); display: flex; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price input { width: 86px; min-height: 34px; border: 1px solid var(--gp-border); border-radius: var(--gp-r-sm); padding: 4px 8px; font: 600 15px var(--gp-font); text-align: right; color: var(--gp-navy); }
.price input:focus { outline: none; border-color: var(--gp-indigo); box-shadow: var(--gp-focus); }
.err { color: var(--gp-bad); margin: 0 0 10px; }
.fine { font-size: 13px; color: var(--gp-muted); text-align: center; margin: 12px 0 0; }
.fine.left { text-align: left; margin-top: 0; }

.state { text-align: center; }
.state .icon { width: 56px; height: 56px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; font-weight: 700; }
.state .ok { background: var(--gp-ok-bg); color: var(--gp-ok); }
.state .warn { background: var(--gp-warn-bg); color: var(--gp-warn); }
.state h2 { margin: 4px 0; }
.state p { color: var(--gp-slate); margin: 0; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--gp-navy); color: #d6e2ee; border-radius: var(--gp-r); padding: 14px; font: 12.5px/1.6 var(--gp-mono); margin: 10px 0 16px; }

.how-side { padding: 4px 4px 0; }
.how-side h2 { font: 600 18px var(--gp-font); margin: 0 0 16px; color: var(--gp-navy); }
.how-side ol { margin: 0 0 20px; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 14px; }
.how-side li { counter-increment: s; position: relative; padding-left: 38px; display: grid; gap: 2px; }
.how-side li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 50%; background: var(--gp-indigo-50); color: var(--gp-indigo);
  font: 700 12px/26px var(--gp-font); text-align: center; }
.how-side b { font-weight: 600; color: var(--gp-navy); }
.how-side span { color: var(--gp-slate); font-size: 14.5px; }