/* Showcase pages only. Do not style body, a, .wrap, or .masthead:
   those belong to the platform shell, and a module rule would fight them. */

.showcase {
  --sc-ink: #26251f;
  --sc-green: #15532f;
  --sc-gold: #c8a53a;
  --sc-cream: #f6f1e2;
  --sc-line: #e4dcc4;
  color: var(--sc-ink);
  max-width: 46rem;
}

.showcase h1 { font-size: 1.6rem; margin: 0 0 0.4rem; }
.showcase h2 { font-size: 1.15rem; margin: 1.4rem 0 0.4rem; }

.showcase .sc-note {
  background: var(--sc-cream);
  border-left: 4px solid var(--sc-gold);
  padding: 0.5rem 0.8rem;
  margin: 0.6rem 0 1rem;
}

.showcase form { margin: 0.6rem 0 1rem; }
.showcase label { display: block; font-weight: 600; margin: 0.7rem 0 0.2rem; }
.showcase input[type="text"],
.showcase input[type="email"],
.showcase input[type="number"],
.showcase input[type="file"],
.showcase textarea,
.showcase select {
  width: 100%;
  max-width: 40rem;
  box-sizing: border-box;
  font: inherit;
  padding: 0.35rem 0.45rem;
}
.showcase textarea { min-height: 6rem; }
.showcase .sc-check { font-weight: 400; }
.showcase .sc-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.showcase table { border-collapse: collapse; width: 100%; }
.showcase th, .showcase td { border-bottom: 1px solid var(--sc-line); text-align: left; padding: 0.35rem 0.4rem; vertical-align: top; }
.showcase .sc-muted { color: #5c584c; font-size: 0.92rem; }
.showcase .sc-edition { border-top: 1px solid var(--sc-line); padding: 0.8rem 0; }
.showcase .sc-edition h3 { margin: 0 0 0.2rem; font-size: 1.15rem; }
/* The newest edition is read on the page in the browser's PDF viewer (10 Oct 2026). */
.showcase .sc-viewer { margin: 0.6rem 0; border: 1px solid var(--sc-line); border-radius: 4px; background: #f4f1ea; }
.showcase .sc-viewer iframe { display: block; width: 100%; height: 78vh; min-height: 420px; border: 0; }
@media (max-width: 700px) { .showcase .sc-viewer iframe { height: 60vh; } }
.showcase button, .showcase .sc-button {
  background: var(--sc-green);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 0.4rem 0.8rem;
  font: inherit;
  cursor: pointer;
}
.showcase button.sc-quiet { background: transparent; color: var(--sc-green); border: 1px solid var(--sc-green); }
.showcase .sc-row { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.showcase .sc-row > div { flex: 1 1 14rem; }
.showcase.sc-wide { max-width: 72rem; }
.showcase .sc-pair { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.showcase .sc-pair > div { flex: 1 1 16rem; min-width: 0; }
.showcase .sc-stage { position: relative; display: inline-block; max-width: 100%; }
.showcase .sc-stage img { display: block; max-width: 100%; height: auto; }
.showcase .sc-box {
  position: absolute;
  border: 2px solid var(--sc-green);
  box-sizing: border-box;
  cursor: move;
}
.showcase .sc-frame {
  position: absolute;
  border: 1px dashed var(--sc-gold);
  box-sizing: border-box;
  pointer-events: none;
}
.showcase .sc-handle {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: var(--sc-green);
  cursor: nwse-resize;
}
.showcase .sc-bookframe {
  width: 16rem;
  max-width: 100%;
  background: #e7e1d2;
  overflow: hidden;
}
.showcase .sc-bookframe img { width: 100%; height: 100%; object-fit: contain; display: block; }
.showcase del,
.showcase .sc-del { background: #f6d0d0; text-decoration: line-through; }
.showcase ins,
.showcase .sc-ins { background: #d3efd4; text-decoration: none; }
.showcase .sc-diff { line-height: 1.5; }
.showcase .sc-suggestion { border-top: 1px solid var(--sc-line); padding-top: 0.6rem; margin-top: 0.8rem; }
@media (max-width: 640px) {
  .showcase { max-width: none; }
  .showcase.sc-wide { max-width: none; }
  .showcase table { font-size: 0.92rem; }
  .showcase .sc-bookframe { width: 100%; }
}