/* ===========================================================================
   Wyatt Custom — reusable UI for "pattern" tool pages (calculators, sizing
   guides, etc. under /patterns/*). Loaded alongside assets/css/style.css;
   relies on its :root palette/tokens. Meant for pieces future pattern pages
   can reuse as-is (card shell, fieldsets/toggle buttons, fields, diagram +
   lightbox). Content genuinely specific to one page — e.g. the journal
   cover's spine-holes table — stays in that page's own stylesheet instead.
   =========================================================================== */

/* ============================================================
   Calculator card
   ============================================================ */

.pattern-card * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.pattern-card {
  font-family: var(--sans);
  color: var(--muted);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 880px;
  margin: 0 auto;
}

.pattern-body {
  padding: 1.75rem;
}


/* ============================================================
   Lead heading
   ============================================================ */

.pattern-lead {
  margin-bottom: 1.1rem;
}

.pattern-lead-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--leather-dark);
  line-height: 1.3;
  margin-bottom: 4px;
}

.pattern-lead-text {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
}

.pattern-lead-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.pattern-lead-content {
  flex: 1 1 auto;
}

.pattern-lead-illustration-group {
  flex: 0 0 220px;
  width: 220px;
}

.pattern-lead-illustration-heading {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--leather-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  text-align: center;
  margin-bottom: 4px;
}

.pattern-lead-illustration {
  width: 100%;
  height: auto;
  display: block;
}

.pattern-lead-illustration-book {
  fill: var(--cream);
  stroke: var(--leather-dark);
  stroke-width: 2;
}

.pattern-lead-illustration-spine {
  fill: var(--leather);
}

.pattern-lead-illustration-wrap {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-dasharray: 4 3;
}

.pattern-lead-illustration-tick {
  stroke: var(--accent);
  stroke-width: 1.5;
}

.pattern-lead-illustration-pages {
  stroke: var(--muted);
  stroke-width: 1.25;
}

.pattern-lead-illustration-arrow {
  stroke: var(--accent);
  stroke-width: 1.5;
}

.pattern-lead-illustration-arrowfill {
  fill: var(--accent);
}

.pattern-lead-illustration-label {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  fill: var(--leather-dark);
  text-anchor: middle;
}

@media (max-width: 560px) {
  .pattern-lead-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .pattern-lead-illustration-group {
    align-self: center;
    max-width: 220px;
    width: 100%;
  }
}


/* ============================================================
   Controls: Units / Style toggle groups + preset/input row
   ============================================================ */

.pattern-controls-row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin-bottom: 10px;
}

.pattern-controls-row--inputs {
  align-items: flex-start;
  margin-top: 4px;
  margin-bottom: 1.1rem;
}

.pattern-fieldset {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border: none;
  margin: 0;
  padding: 0;
}

.pattern-fieldset[hidden] {
  display: none;
}

.pattern-legend {
  display: contents;
  font-size: 13px;
  color: var(--leather-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

/* Keeps the legend readable to screen readers while removing it from
   sighted layout entirely — overrides display:contents above, since that
   would otherwise leave the text visible inline instead of hidden. */
.pattern-legend.pattern-visually-hidden {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.pattern-button-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pattern-toggle-button {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 5px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}

.pattern-toggle-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.pattern-toggle-button.is-active {
  background: var(--leather);
  border-color: var(--leather);
  color: var(--white);
}


/* ============================================================
   Style options (e.g. "Cover Style") — a wider toggle button
   plus a one-line caption, so the choice is explained visibly
   instead of only via a hover title. (A per-style photo/image
   may go here later, once real sample photos are available.)
   ============================================================ */

.pattern-fieldset--style {
  width: 100%;
  align-items: flex-start;
}

.pattern-style-options {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  width: 100%;
}

.pattern-style-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  flex: 1 1 150px;
}

.pattern-style-option .pattern-toggle-button {
  width: 100%;
  text-align: center;
}

.pattern-style-caption {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}


/* ============================================================
   Preset + width/height inputs
   ============================================================ */

.pattern-preset {
  flex: 1 1 150px;
  min-width: 130px;
}

.pattern-select-compact {
  width: 100%;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--leather-dark);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 0.65rem;
  cursor: pointer;
}

.pattern-field {
  flex: 1 1 160px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  transition: border-color 0.12s;
}

.pattern-field:focus-within {
  border-color: var(--accent);
}

.pattern-field.has-error {
  border-color: var(--error);
  background: var(--error-bg);
}

.pattern-label {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--leather-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
}

.pattern-input {
  width: 100%;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--leather-dark);
  outline: none;
  -moz-appearance: textfield;
}

.pattern-input::-webkit-outer-spin-button,
.pattern-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.pattern-input::placeholder {
  color: #c9bdae;
  font-weight: 400;
}

.pattern-error-message {
  font-size: 13px;
  color: var(--error);
  margin-top: 3px;
  display: none;
}

.pattern-field.has-error .pattern-error-message {
  display: block;
}


/* ============================================================
   Divider
   ============================================================ */

.pattern-divider {
  border: none;
  border-top: 1px solid var(--line);
  margin: 0 0 1.1rem;
}


/* ============================================================
   Diagram (always visible, centerpiece of the card)
   ============================================================ */

.pattern-diagram {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.75rem;
  /* Bleeds past .pattern-body's side padding so the diagram uses the
     full card width instead of being inset twice (body padding + its own). */
  margin: 0 -1.75rem 0.7rem;
  cursor: zoom-in;
}

.pattern-diagram svg {
  display: block;
  width: 100%;
}


/* ============================================================
   Diagram lightbox (click the diagram for a larger preview).
   The overlay/close-button chrome is the shared .lightbox/.lightbox__close
   component from assets/css/style.css (see includes/modals.php) — the
   markup carries both classes and only the panel below is pattern-specific,
   since this lightbox shows an SVG diagram rather than a photo.
   ============================================================ */

.pattern-lightbox-panel {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 1.5rem;
  width: min(1300px, 95vw);
  max-height: 92vh;
  overflow: auto;
  cursor: default;
}

.pattern-lightbox-panel svg {
  display: block;
  width: 100%;
}

.pattern-diagram-caption-label {
  display: block;
  text-align: center;
  margin-bottom: 4px;
}

.pattern-diagram-caption {
  text-align: center;
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--leather-dark);
  margin-bottom: 1.1rem;
}

.pattern-diagram-caption-x {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  margin: 0 0.3em;
}


/* ============================================================
   Build-details row (Panels / Holes — only the section matching
   the current Book Style is rendered; the other is `hidden`)
   ============================================================ */

.pattern-details-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-bottom: 1.1rem;
}

.pattern-detail--inline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
}

/* Wins over the display:flex above (attribute selector adds specificity)
   so the `hidden` attribute set in JS actually hides this element. */
.pattern-detail--inline[hidden] {
  display: none;
}

.pattern-detail-label {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--leather-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  flex-shrink: 0;
  margin-bottom: 4px;
}

.pattern-detail--inline .pattern-detail-label {
  margin-bottom: 0;
}

.pattern-detail-value {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 500;
  color: var(--leather-dark);
}


/* ============================================================
   Note / reset
   ============================================================ */

.pattern-note {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.pattern-reset-row {
  text-align: center;
}

.pattern-reset-button {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 8px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.12s;
}

.pattern-reset-button:hover {
  border-color: var(--leather);
  color: var(--leather-dark);
}


/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 480px) {
  .pattern-controls-row--inputs {
    flex-direction: column;
  }

  .pattern-field,
  .pattern-preset {
    flex-basis: auto;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
}