/*
 * The Lab: one thing per page, on a plain stage.
 *
 * Lab pages reuse the storefront's look (shop.css) so they read like real shop screens,
 * and add only layout. Class names stay bland on purpose: the markup must not say what a
 * thing is (build.mjs checks). Rules marked "the pattern" break guidance deliberately.
 */

/* The ribbon is always there, but smaller, so the page under test has the room. */
html[data-lab] .hf-ribbon { padding-top: 3px; padding-bottom: 3px; font-size: 12px; }
html[data-lab] .hf-ribbon .hf-toggle,
html[data-lab] .hf-ribbon a { min-height: 26px; font-size: 12px; }

.lb { min-height: calc(100vh - var(--hf-ribbon-h, 44px) - 36px); padding: 32px 20px 96px; }
.lb main { max-width: 720px; margin: 0 auto; }
.lb h1 { margin: 0 0 6px; font: 800 32px/1.12 var(--sans); }
.lb-sub { margin: 0 0 22px !important; color: var(--ink-2); }

.lb-box {
  margin: 0 0 20px; padding: 24px 26px;
  border-radius: var(--r); background: var(--card);
  box-shadow: 0 0 0 1px var(--line), 0 12px 30px rgba(27, 23, 18, .08);
}
.lb-box h2 { margin: 0 0 8px; font: 800 22px/1.2 var(--sans); }
.lb-box > :last-child { margin-bottom: 0; }

.lb-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px;
  margin: 0 0 20px; padding: 18px 26px;
  border-radius: var(--r); background: var(--sand);
  box-shadow: 0 0 0 1px var(--line);
}
.lb-strip h2 { margin: 0; font: 800 20px/1.2 var(--sans); }
.lb-strip p { margin: 0; }

.lb fieldset { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.lb legend { margin: 0 0 4px; padding: 0; font-weight: 800; }
.lb-opt { display: flex; align-items: flex-start; gap: 10px; margin: 0 !important; padding: 8px 0; }
.lb-opt input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--cta); }
.lb-opt label { flex: 1; cursor: pointer; }

.lb-act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 14px 0 0 !important; }
.lb-stack { display: grid; gap: 8px; margin-top: 16px; }

/* The pattern: the way out is small, pale, and worded to sting. */
.lb-way {
  appearance: none; -webkit-appearance: none; margin: 0; padding: 0; border: 0; background: none;
  color: #a39b90; font: 400 12px/1.3 var(--sans); text-decoration: underline; text-underline-offset: 2px;
  cursor: pointer;
}

/* The pattern: the terms are there, at 9 pixels. */
.lb-fine-a { margin: 12px 0 0 !important; color: var(--ink-2); font-size: 9px; line-height: 1.3; }
/* The pattern: the terms are a readable size, in grey that is about 2 to 1 on white. */
.lb-fine-b { margin: 6px 0 0 !important; color: #b5b5b5; font-size: 15px; line-height: 1.4; }
/* Their fair twins: the same words, where and how you can read them. */
.lb-terms { margin: 0 0 12px !important; color: var(--ink); font-size: 17px; line-height: 1.5; }

.lb .rows { max-height: none; }
.lb .chips { margin-bottom: 14px; }
.lb .pill { margin-top: 2px !important; }
.lb .price { margin-bottom: 10px !important; }
.lb .done { margin: 0; }

@media (max-width: 520px) {
  .lb { padding: 20px 14px 72px; }
  .lb-box { padding: 20px 18px; }
  .lb h1 { font-size: 27px; }
}