/*
  Printable Paper. Loaded after the PDF tools' stylesheet (../pdf_tools/app.css),
  whose cards, steps, segmented switch and checkbox rows these pages share.
  Plain CSS, not built by Tailwind; colours come from the site's theme tokens,
  except the sheet itself, which stays white like paper in dark mode too.
*/

.paper-app {
  --pdft-line: var(--color-base-300);
  --pdft-accent: var(--color-primary);
}
.paper-app [hidden] { display: none !important; }
.paper-loading { padding: 3rem 1rem; text-align: center; color: var(--muted); }

.paper { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); align-items: start; }
/* On phones the page and its download button come first; the settings follow. */
@media (max-width: 59.99rem) { .paper-view { order: -1; } }
@media (min-width: 60rem) {
  .paper { grid-template-columns: minmax(19rem, 23rem) minmax(0, 1fr); }
  .paper-view { position: sticky; top: 5.5rem; }
}

.paper-panel {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--pdft-line);
  border-radius: 0.875rem;
  background: var(--color-base-100);
}
@media (min-width: 40rem) { .paper-panel { padding: 1.25rem; } }

.paper-form { display: flex; flex-direction: column; gap: 1.1rem; }
.paper-head { display: flex; align-items: center; gap: 0.6rem; }
.paper-title { font-size: 1.0625rem; font-weight: 650; }
.paper-reset { margin-left: auto; }

.paper-section { display: flex; flex-direction: column; gap: 0.85rem; min-width: 0; margin: 0; padding: 1rem 0 0; border: 0; border-top: 1px solid var(--pdft-line); }
.paper-section-title { float: left; width: 100%; padding: 0; font-size: 0.9375rem; font-weight: 650; }
.paper-section-title + * { clear: both; }

.paper-field { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.paper-label { font-size: 0.875rem; font-weight: 600; }
.paper-check { align-items: center; font-size: 0.875rem; }
.paper-check input { margin-top: 0; }
.paper-number { width: 6rem; }
.paper-seg span { display: flex; align-items: center; justify-content: center; gap: 0.35rem; padding-inline: 0.6rem; }
.paper-swatches { flex-wrap: nowrap; }
.paper-swatches label { flex: 1 1 0; }
.paper-swatches span { padding-block: 0.45rem; }
.paper-swatch {
  flex: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--color-base-content) 25%, transparent);
}

/* ---- Preview ---- */

.paper-view { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.paper-stage {
  display: flex;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.25rem);
  border-radius: 0.875rem;
  background: color-mix(in oklab, var(--color-base-content) 7%, var(--color-base-200));
}
/* app.js sets the width and aspect ratio for the chosen paper size. */
.paper-sheet {
  width: 100%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.08), 0 10px 28px rgb(0 0 0 / 0.14);
}
.paper-sheet svg { display: block; width: 100%; height: 100%; }
.paper-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.paper-download { min-width: 11rem; }
.paper-info { font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.paper-tip { font-size: 0.8125rem; color: var(--muted); }
.paper-error { font-size: 0.875rem; color: var(--color-error); }