/* =========================================================
 * Discussion Forge shared stylesheet
 *
 * This file owns:
 * - Application layout
 * - Shared controls and interface styling
 * - Card dimensions and structural layout
 * - Preview interaction
 * - Print geometry and behavior
 *
 * Theme packages own:
 * - Theme colors
 * - Card-back backgrounds
 * - Theme typography
 * - Decorative artwork
 * - Category banner colors
 * ========================================================= */

/* =========================================================
 * Design tokens
 * ========================================================= */

:root {
  --paper: #f3efe5;
  --ink: #22251f;
  --panel: #fffdf8;
  --border: #b7b09f;
  --accent: #365f43;
}

/* =========================================================
 * Global document styles
 * ========================================================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  background: var(--paper);
  color: var(--ink);
}

.site-header,
main {
  width: min(1100px, calc(100% - 2rem));
  margin-inline: auto;
}

.site-header {
  padding: 2rem 0 1rem;
}

.eyebrow {
  margin: 0;

  color: #596154;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1 {
  margin: 0.2rem 0;
}

/* =========================================================
 * JavaScript-disabled message
 * ========================================================= */

.noscript-message {
  margin: 0 0 1rem;
  padding: 0.9rem 1rem;

  background: #fff8dc;
  border: 1px solid #d4c48e;
  border-radius: 10px;

  font-weight: 600;
}

/* =========================================================
 * Deck-builder controls
 * ========================================================= */

.controls {
  padding: 1.25rem;

  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
}

.control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 1rem;
}

.builder-panel {
  min-width: 0;
  padding: 1rem;

  border: 1px solid var(--border);
  border-radius: 10px;
}

.builder-panel h3 {
  margin: 0 0 1rem;
}

.builder-heading-row {
  display: grid;
  grid-template-columns: max-content minmax(24rem, 1fr) max-content;
  align-items: center;
  gap: 1rem;

  margin-bottom: 1rem;
}

.builder-heading-row h2 {
  margin: 0;
}

.builder-selection-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: 1.5rem;

  padding: 0.7rem 1rem;

  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.builder-selection-summary div {
  display: grid;
  gap: 0.15rem;
  min-width: 7rem;
}

.builder-summary-label {
  font-size: 0.78rem;
}

.builder-selection-summary strong {
  font-size: 1.1rem;
}

.builder-selection-summary.builder-summary-shortage {
  background: #fff4ce;
  border-color: #d39b2a;
}

.builder-summary-warning {
  color: #8a4b08;
  font-weight: 800;
}

.content-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;

  margin-top: 1rem;
}

.scrollable-options {
  max-height: 15rem;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.advanced-settings {
  margin-top: 1rem;

  border: 1px solid var(--border);
  border-radius: 10px;
}

.advanced-settings summary {
  padding: 0.8rem 1rem;

  font-weight: 700;
  cursor: pointer;
}

.advanced-settings-content {
  padding: 0 1rem 1rem;
}

.advanced-settings-content p {
  margin: 0;
}

fieldset {
  padding: 0.8rem;

  border: 1px solid var(--border);
  border-radius: 10px;
}

legend {
  font-weight: 700;
}

.option-list,
.stack {
  display: grid;
  gap: 0.6rem;
}

.option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

input,
select,
button {
  font: inherit;
}

input[type="text"],
input[type="number"],
select {
  width: 100%;
  padding: 0.65rem;

  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.seed-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem;
}

button {
  padding: 0.65rem 0.9rem;

  background: white;
  border: 1px solid #777;
  border-radius: 8px;

  cursor: pointer;
}

button.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;

  margin-top: 1rem;
}

.print-settings {
  margin: 0.75rem 0 0;

  font-size: 0.85rem;
  line-height: 1.5;
}

.print-settings strong {
  font-weight: 800;
}

.status {
  min-height: 1.2em;
}

.builder-status {
  margin: 0;
  padding: 0.7rem 1rem;

  background: #eef5ef;
  border: 1px solid #a9c2ad;
  border-radius: 8px;

  color: #294632;
  font-size: 0.9rem;
  font-weight: 700;
}

.builder-status-warning {
  background: #fff3cd;
  border-color: #d9a62e;

  color: #5f4300;
}

.builder-status-error {
  background: #f8d7da;
  border-color: #c86b73;

  color: #721c24;
}

.builder-status:empty {
  visibility: hidden;
}

/* =========================================================
 * Output containers
 * ========================================================= */

.output {
  margin: 1rem auto 3rem;
}

/*
 * Screen preview is visible during ordinary use.
 * Dedicated print output remains hidden until printing.
 */
.preview-output {
  display: block;
}

.print-output {
  display: none;
}

/* =========================================================
 * Preview status panel
 * ========================================================= */

.preview-status {
  width: min(100%, 10.9in);
  margin: 0 auto 0.35in;
  padding: 1rem 1.1rem;

  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.preview-status-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  padding-bottom: 0.75rem;

  border-bottom: 1px solid var(--border);
}

.preview-status-heading h2 {
  margin: 0.1rem 0 0;

  font-size: 1.2rem;
}

.preview-status-eyebrow {
  margin: 0;

  color: #596154;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.preview-status-count {
  flex: none;

  padding: 0.35rem 0.65rem;

  background: var(--accent);
  color: white;
  border-radius: 999px;

  font-size: 0.82rem;
  font-weight: 700;
}

.preview-status-details {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;

  margin: 0;
  padding-top: 0.8rem;
}

.preview-status-details div {
  min-width: 0;
}

.preview-status-details dt {
  margin-bottom: 0.15rem;

  color: #596154;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.preview-status-details dd {
  margin: 0;

  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.preview-status-details code {
  font-size: 0.82rem;
}

/*
 * Brief guidance for the interactive card preview.
 * This is rendered only in Poker Cards mode.
 */
.preview-status-tip {
  margin: 0.8rem 0 0;
  padding-top: 0.75rem;

  color: #596154;
  border-top: 1px solid var(--border);

  font-size: 0.85rem;
  font-style: italic;
}

/* =========================================================
 * Shared card grid and card geometry
 * ========================================================= */

/*
 * Standard display and print layout:
 * three columns of 2.4-inch cards.
 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 2.4in);
  justify-content: center;
  gap: 0.12in;
}

/*
 * Preserve physical card positions on partial duplex sheets.
 *
 * These placeholders are used only by the print renderer so
 * mirrored card backs remain aligned with their corresponding
 * fronts.
 */
.print-card-placeholder {
  width: 2.4in;
  height: 3.35in;
}

/*
 * Shared physical card dimensions.
 *
 * Theme packages may change visual presentation but should
 * not change these dimensions without a deliberate format
 * change for the entire application.
 */
.play-card {
  position: relative;

  width: 2.4in;
  height: 3.4in;

  background: white;
  border: 1px dashed #777;

  overflow: hidden;
  break-inside: avoid;
}

/*
 * Optional hole-punch safe area.
 *
 * Shared CSS owns its position, diameter, and shape.
 * Theme CSS may override the border color so the guide
 * remains visible against a themed card back.
 */
.punch-safe {
  position: absolute;
  top: 0.16in;
  left: 0.16in;
  z-index: 3;

  width: 0.42in;
  height: 0.42in;

  border: 1px dashed rgb(0 0 0 / 28%);
  border-radius: 50%;
}

/* =========================================================
 * Shared card-front layout
 * ========================================================= */

/*
 * Category banner across the top of a card front.
 *
 * Theme CSS supplies the category-specific background color.
 */
.card-band {
  display: flex;
  align-items: center;
  gap: 0.12in;

  height: 0.58in;
  padding: 0.12in 0.14in 0.08in;

  color: white;
  font-size: 0.78rem;
  font-weight: 700;

  /*
   * Generic Discussion Forge category texture.
   *
   * Themes may override this background image for specialized
   * category treatments.
   */
  background-image:
    radial-gradient(
      circle,
      rgb(255 255 255 / 12%) 0,
      rgb(255 255 255 / 12%) 2px,
      transparent 2px
    ),
    radial-gradient(
      circle,
      rgb(255 255 255 / 9%) 0,
      rgb(255 255 255 / 9%) 2px,
      transparent 2px
    );

  background-size: 14px 14px;

  background-position:
    0 0,
    7px 7px;
}

.category-icon {
  display: inline-grid;
  place-items: center;
  flex: none;

  width: 0.34in;
  height: 0.34in;

  font-size: 1.7rem;
  line-height: 1;
}

.category-name {
  flex: 1;

  font-size: 0.82rem;
}

/*
 * Main content area of the card front.
 */
.card-body {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 2.45in;
  padding: 0.2in;

  text-align: center;
}

.card-icon {
  display: inline-grid;
  place-items: center;

  width: 0.86in;
  height: 0.86in;
  margin-bottom: 0.18in;

  font-size: 2.6rem;
  line-height: 1;
}

/*
 * SVG category images fill the icon wrapper supplied by
 * .category-icon, .card-icon, or .list-category-icon.
 */
.category-svg-icon {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}

.card-prompt {
  margin: 0;

  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.card-instruction {
  margin-top: 0.12in;

  font-size: 0.76rem;
  font-weight: 400;
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 0.37in;
  padding: 0 0.14in;

  border-top: 1px solid #ddd;

  font-size: 0.62rem;
  font-weight: 600;
}

/* =========================================================
 * Shared card-back layout
 * ========================================================= */

/*
 * Theme CSS owns the card-back background and text colors.
 * Shared CSS owns the semantic content arrangement.
 */
.card-back {
  color: white;
}

.card-back-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  height: 100%;
  padding: 0.28in;

  text-align: center;
}

/*
 * Theme-owned decorative card-back SVG.
 */
.card-back-main-graphic {
  display: grid;
  place-items: center;

  width: 1.72in;
  height: 1.72in;
  margin-bottom: 0.14in;
}

.card-back-main-graphic-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}

/*
 * Application-owned title text.
 *
 * Theme CSS may control its font, decorative elements,
 * colors, and detailed spacing.
 */
.card-back-title {
  margin: 0;

  font-size: 1.25rem;
  line-height: 1.05;
  letter-spacing: 0.05em;
}

/*
 * Standalone divider between the title and tagline.
 *
 * Themes decide whether it is visible and how it looks.
 * A zero-height unstyled element does not affect the default
 * text-only fallback.
 */
.card-back-divider {
  flex: none;
}

/*
 * Application-owned tagline.
 *
 * The spans support either a one-line or two-line visual
 * treatment depending on theme styling and application text.
 */
.card-back-tagline {
  display: grid;
  gap: 0.04in;

  margin: 0.12in 0;
}

.card-back-tagline span {
  display: block;
}

/*
 * Application-owned brand line.
 */
.card-back-brand {
  margin: 0.12in 0 0;
}

/* =========================================================
 * Quick List output
 * ========================================================= */

.quick-list {
  width: min(850px, 100%);
  margin-inline: auto;

  background: white;
  border: 1px solid var(--border);
}

.list-item {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.8rem;

  padding: 0.7rem 0.9rem;

  border-bottom: 1px solid #ddd;

  break-inside: avoid;
}

.list-meta {
  font-size: 0.78rem;
  font-weight: 700;
}

.list-category-icon {
  display: inline-block;

  width: 1em;
  height: 1em;

  font-size: 1em;
  line-height: 1;
  vertical-align: -0.12em;
}

.list-prompt {
  margin: 0;
}

/* =========================================================
 * Interactive screen preview
 * ========================================================= */

.preview-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 2.4in);
  justify-content: center;
  gap: 0.35in;
}

.preview-card {
  width: 2.4in;
  height: 3.4in;

  perspective: 1000px;
  cursor: pointer;

  filter: drop-shadow(0 4px 7px rgb(0 0 0 / 18%));

  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}

.preview-card:hover,
.preview-card:focus-visible {
  transform: translateY(-4px);

  filter: drop-shadow(0 9px 12px rgb(0 0 0 / 25%));
}

.preview-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

.preview-card-inner {
  position: relative;

  width: 100%;
  height: 100%;

  transform-style: preserve-3d;
  transition: transform 0.45s ease;
}

.preview-card.is-flipped .preview-card-inner {
  transform: rotateY(180deg);
}

.preview-card-side {
  position: absolute;
  inset: 0;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.preview-card-back {
  transform: rotateY(180deg);
}

/*
 * Screen preview cards should look like finished cards,
 * not manufacturing templates.
 */
.preview-card .play-card {
  position: absolute;
  inset: 0;

  border: none;
  border-radius: 14px;

  overflow: hidden;
}

/* =========================================================
 * Responsive / mobile layout
 * ========================================================= */

@media (max-width: 900px) {
  .control-grid,
  .content-option-grid,
  .builder-selection-summary {
    grid-template-columns: 1fr;
  }
  .builder-heading-row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

@media (max-width: 800px) {
  .preview-status-details {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 500px) {
  .card-grid {
    grid-template-columns: 2.4in;
  }
}

@media (max-width: 480px) {
  .preview-status-heading {
    align-items: flex-start;
  }

  .preview-status-details {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
 * Printing
 * ========================================================= */
@page {
  size: Letter portrait;
  margin: 0.22in;
}

@media print {
  /*
   * Show only the dedicated print renderer.
   */
  .preview-output,
  .preview-status {
    display: none !important;
  }

  .print-output {
    display: block !important;
  }

  /*
   * Remove the application's screen presentation.
   */
  body {
    background: white;
  }

  .site-header,
  .controls,
  .noscript-message {
    display: none !important;
  }

  main,
  .output {
    width: auto;
    margin: 0;
  }

  /*
   * Six cards per page:
   * three columns by two rows.
   */
  .card-grid {
    grid-template-columns: repeat(3, 2.4in);
    gap: 0.12in;
  }

  .play-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /*
   * Each front page is followed immediately by its
   * corresponding back page.
   */
  .print-page {
    width: 100%;

    break-after: page;
    page-break-after: always;
  }

  .print-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }

  /*
   * Quick List output prints without the screen-only
   * surrounding border.
   */
  .quick-list {
    border: none;
  }

  /*
   * The card back contains the only hole-punch guide.
   */
  .punch-safe-back {
    left: 0.16in;
    right: auto;
  }

  /*
   * Printed card fronts remain free of trim outlines.
   */
  .card-front {
    border-color: transparent;
  }
}