/* SANDBOX — component CSS. Header chrome from /tech/_kit/tech-kit.css. */

.sb-app { margin: 1.6rem 0 2.4rem; }

.sb-prompt {
  font-family: var(--mono, ui-monospace, "JetBrains Mono", Consolas, monospace);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-muted, #7a7a88); margin: 0 0 .75rem;
}

.sb-choice {
  display: block; width: 100%; text-align: left;
  background: var(--surface, #16161a);
  border: 1px solid var(--border, #2a2a33);
  border-left: 3px solid var(--border, #2a2a33);
  border-radius: 0 5px 5px 0;
  padding: .75rem .95rem; margin: 0 0 .5rem;
  cursor: pointer; color: inherit; font: inherit;
  transition: border-color .12s, background .12s;
}
.sb-choice:hover {
  border-left-color: var(--accent, #CC0000);
  background: #1c1c22;
}
.sb-choice-name {
  display: block; font-family: Inter, system-ui, sans-serif;
  font-weight: 700; font-size: .98rem; color: var(--text-bright, #e8e8f0);
}
.sb-choice-blurb {
  display: block; font-size: .84rem; line-height: 1.5;
  color: var(--text-muted, #7a7a88); margin-top: .18rem;
}

.sb-reshuffle {
  background: none; border: none; cursor: pointer;
  font-family: var(--mono, ui-monospace, "JetBrains Mono", Consolas, monospace);
  font-size: .72rem; letter-spacing: .1em;
  color: var(--text-muted, #7a7a88); padding: .5rem 0; margin-top: .3rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.sb-reshuffle:hover { color: var(--accent, #CC0000); }

.sb-card {
  border: 1px solid var(--border, #2a2a33);
  border-left: 3px solid var(--accent, #CC0000);
  background: var(--surface, #16161a);
  border-radius: 0 5px 5px 0;
  padding: .85rem 1rem; margin: 0 0 .7rem;
}
.sb-card-top { display: flex; align-items: baseline; gap: .6rem; }
.sb-n {
  font-family: var(--mono, ui-monospace, "JetBrains Mono", Consolas, monospace);
  font-size: .7rem; color: var(--accent, #CC0000); font-weight: 700;
}
.sb-installed {
  font-family: var(--mono, ui-monospace, "JetBrains Mono", Consolas, monospace);
  font-size: .68rem; letter-spacing: .14em;
  color: var(--text-muted, #7a7a88);
}
.sb-beat { margin: .5rem 0 .1rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.sb-beat-label { font-size: .84rem; color: var(--text-muted, #7a7a88); }
.sb-beat-name {
  font-family: Inter, system-ui, sans-serif; font-weight: 800;
  font-size: 1.05rem; color: var(--text-bright, #e8e8f0);
}
.sb-how { margin: .45rem 0 0; font-size: .88rem; line-height: 1.55; }
.sb-sting {
  margin: .55rem 0 0; font-size: .92rem; line-height: 1.5;
  color: var(--text-bright, #e8e8f0); font-weight: 600;
}
.sb-receipt {
  margin: .6rem 0 0; font-size: .74rem; line-height: 1.5;
  color: var(--text-muted, #7a7a88);
  font-family: var(--mono, ui-monospace, "JetBrains Mono", Consolas, monospace);
}
.sb-receipt-tag {
  color: var(--accent, #CC0000); font-weight: 700; letter-spacing: .12em;
}

.sb-end {
  border: 1px solid var(--accent, #CC0000);
  background: var(--surface, #16161a);
  border-radius: 6px; padding: 1.2rem 1.15rem; margin-top: .6rem;
}
.sb-end-title {
  font-family: Inter, system-ui, sans-serif; font-weight: 800;
  font-size: clamp(1.3rem, 3.4vw, 1.75rem); line-height: 1.15;
  color: var(--text-bright, #e8e8f0); margin: 0 0 .7rem;
}
.sb-end-body { margin: 0 0 .8rem; font-size: .92rem; line-height: 1.65; }
.sb-end-cta { margin: 0 0 .4rem; font-size: .92rem; line-height: 1.6; }
.sb-end-cta a { color: var(--accent, #CC0000); }

.sb-foot {
  margin: 1.5rem 0 0; font-size: .8rem; line-height: 1.6;
  color: var(--text-muted, #7a7a88);
  border-top: 1px solid var(--border, #2a2a33); padding-top: .9rem;
}