/* Styles for the generator TOOL's own pages (index.html, generator/index.html,
   generator/templates.html) — not one of the manual's own pages, so this
   doesn't use the theme variable contract (themes/theme-schema.md); it has
   its own small, fixed palette instead. */

:root {
  --gen-primary: #2b6cb0;
  --gen-border: #dfe3e8;
  --gen-bg: #f7f8fa;
  --gen-text: #1a202c;
  --gen-header-h: auto;
}

* {
  box-sizing: border-box;
  min-width: 0; /* grid/flex items default to a content-based minimum size,
    which is exactly what was pushing the color swatches (and everything
    after them) past the right edge on narrower windows instead of letting
    the columns actually shrink; this one reset avoids re-litigating it
    field by field. */
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  font-family: system-ui, sans-serif;
  color: var(--gen-text);
  background: var(--gen-bg);
  display: flex;
  flex-direction: column;
  /* Desktop: the PAGE itself never scrolls — only .generator-controls and
     .generator-preview do, independently. A page-level scrollbar stacked on
     top of two already-scrollable panels was the reported "double scroll"
     problem. Relaxed back to a normal scrolling page below 960px (see
     media query at the bottom): once the two panels stack instead of
     sitting side by side, there's no shared viewport budget to fight over,
     and forcing every stacked section into its own fixed-height scroll box
     on a small screen is worse than one natural page scroll. */
  overflow: hidden;
}

.generator-header {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 2rem 1rem;
}

.generator-header-text h1 {
  margin: 0 0 0.4rem;
  font-size: 1.5rem;
}

.generator-header-text p {
  margin: 0;
  max-width: 60ch;
  color: #4a5568;
}

.generator-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.generator-lang-picker select {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--gen-border);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

/* The secondary path — browsing the templates that already ship — gets a
   corner call-to-action instead of equal billing with the custom-manual
   form: enough to notice, not enough to compete with it. Opens
   templates.html in a new tab, so this form's own state is never at risk. */
.generator-templates-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border: 1px solid var(--gen-border);
  border-radius: 999px;
  background: #fff;
  color: var(--gen-primary);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.generator-templates-cta:hover {
  border-color: var(--gen-primary);
  background: #eef4fb;
}

.generator-body {
  flex: 1 1 auto;
  min-height: 0; /* lets the grid actually shrink to the remaining space
    instead of growing to its children's natural height and reintroducing
    the page-level scrollbar this whole layout exists to avoid */
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 1.5rem;
  padding: 0 2rem 1.5rem;
  overflow: hidden;
}

.generator-controls {
  background: #fff;
  border: 1px solid var(--gen-border);
  border-radius: 8px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  overflow-y: auto;
}

.generator-hint {
  margin: -0.5rem 0 0;
  font-size: 0.85rem;
  color: #4a5568;
}

.generator-contrast-warning {
  margin: 0.25rem 0 0;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-size: 0.85rem;
  background: #fdf3e7;
  color: #7c4a03;
  border: 1px solid #f0d9b5;
}

.generator-save-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.75rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--gen-border);
}

.generator-save-button,
.generator-reset-button {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: 4px;
  cursor: pointer;
}

.generator-save-button {
  border: none;
  background: var(--gen-primary);
  color: #fff;
}

.generator-save-button:hover {
  opacity: 0.9;
}

.generator-reset-button {
  border: 1px solid var(--gen-border);
  background: #fff;
  color: #4a5568;
}

.generator-reset-button:hover {
  border-color: #c53030;
  color: #c53030;
}

.generator-save-status {
  flex: 1 1 auto;
  font-size: 0.8rem;
  color: #4a5568;
  min-height: 1.2em;
}

.generator-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.generator-fieldset legend {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #4a5568;
  padding: 0;
  margin-bottom: 0.25rem;
}

.generator-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
}

.generator-field span {
  font-weight: 600;
}

.generator-field-label {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* Native title-attribute tooltip: hover/focus shows which page elements a
   given color actually applies to (Primary → links/buttons/accents,
   Secondary → borders, ...) — the whole point being a color's effect isn't
   obvious from its swatch alone. Focusable (tabindex) so the hint is
   reachable by keyboard too, not just a mouse hover. */
.generator-hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--gen-border);
  color: #4a5568;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: help;
}

.generator-hint-icon:hover,
.generator-hint-icon:focus-visible {
  background: var(--gen-primary);
  color: #fff;
  outline: none;
}

.generator-field input[type="text"],
.generator-field select,
.generator-field input[type="file"] {
  font: inherit;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--gen-border);
  border-radius: 4px;
  background: #fff;
}

/* Custom-font upload inputs start hidden (js/generator/ui.js toggles this
   off only once "Upload your own font…" is actually selected). */
.generator-field input[type="file"][hidden] {
  display: none;
}

/* Color swatches: a wrapping grid, not one full-width row each — this is
   what was overflowing the panel (and getting visually cut off at the
   viewport edge) on narrower windows, since a `justify-content:
   space-between` row has no way to shrink below its content's width. */
.generator-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(85px, 1fr));
  gap: 0.75rem 0.6rem;
}

/* Label above the swatch, not beside it — a row layout truncated longer
   labels ("Secondary", "Background") once the grid cell got narrow enough
   to matter, which is exactly the width this grid needs to keep shrinking
   to on smaller screens. */
.generator-field-color input[type="color"] {
  width: 100%;
  height: 2.2rem;
  padding: 0;
  border: 1px solid var(--gen-border);
  border-radius: 4px;
  background: none;
  cursor: pointer;
}

.generator-advanced {
  margin-top: 0.25rem;
}

.generator-advanced summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gen-primary);
}

.generator-advanced .generator-hint {
  margin: 0.5rem 0;
}

.generator-color-grid-advanced {
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Each advanced row: an "auto" checkbox (follow the base palette) plus its
   own swatch, disabled until auto is unchecked — the swatch still shows the
   seeded color even while inert, so turning auto off doesn't jump to a
   surprising value. */
.generator-advanced-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  grid-column: span 1;
}

.generator-advanced-row .generator-field-label {
  flex: 1 1 auto;
  font-size: 0.85rem;
}

.generator-advanced-row input[type="checkbox"] {
  flex: 0 0 auto;
}

.generator-advanced-row input[type="color"] {
  flex: 0 0 auto;
  width: 2.2rem;
  height: 1.8rem;
  padding: 0;
  border: 1px solid var(--gen-border);
  border-radius: 4px;
  background: none;
  cursor: pointer;
}

.generator-advanced-row input[type="color"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.generator-radio-group,
.generator-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.generator-radio-group label,
.generator-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.generator-download-button {
  font: inherit;
  font-weight: 700;
  padding: 0.65rem 1rem;
  border: none;
  border-radius: 4px;
  background: var(--gen-primary);
  color: #fff;
  cursor: pointer;
}

.generator-download-button:hover {
  opacity: 0.9;
}

.generator-download-button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.generator-status {
  margin: 0;
  font-size: 0.85rem;
  color: #4a5568;
  min-height: 1.2em;
}

.generator-preview {
  background: #fff;
  border: 1px solid var(--gen-border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.generator-preview-label {
  flex: 0 0 auto;
  padding: 0.5rem 0.9rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #4a5568;
  border-bottom: 1px solid var(--gen-border);
}

#preview-frame {
  flex: 1 1 auto;
  min-height: 0;
  border: none;
  width: 100%;
}

@media (max-width: 960px) {
  body {
    height: auto;
    overflow: visible;
  }
  .generator-body {
    display: block;
    height: auto;
    overflow: visible;
    padding: 0 1.5rem 1.5rem;
  }
  .generator-controls {
    height: auto;
    max-height: none;
    overflow-y: visible;
    margin-bottom: 1.5rem;
  }
  .generator-preview {
    height: 70vh;
  }
}

@media (max-width: 640px) {
  .generator-header {
    padding: 1.25rem 1rem 0.75rem;
  }
  .generator-body {
    padding: 0 1rem 1.5rem;
  }
  .generator-color-grid {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  }
}

/* ---------- templates.html ---------- */
.templates-page-body {
  padding: 0;
}

.templates-page-header {
  flex: 0 0 auto;
  padding: 1.25rem 2rem 1rem;
  border-bottom: 1px solid var(--gen-border);
  background: #fff;
}

.templates-page-back {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  color: var(--gen-primary);
  text-decoration: none;
}

.templates-page-back:hover {
  text-decoration: underline;
}

.templates-page-header h1 {
  margin: 0 0 0.35rem;
  font-size: 1.3rem;
}

.templates-page-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.75rem;
}

.templates-page-controls .generator-field {
  width: 200px;
}

.templates-page-iframe {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border: none;
}

@media (max-width: 640px) {
  .templates-page-header {
    padding: 1rem;
  }
}

/* ---------- first-visit "use a bigger screen" modal (generator/index.html
   only) ---------- */
.generator-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}

.generator-modal[hidden] {
  display: none;
}

.generator-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 32, 44, 0.5);
}

.generator-modal-panel {
  position: relative;
  z-index: 1;
  max-width: 360px;
  margin: 1rem;
  padding: 1.5rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.generator-modal-panel h2 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
}

.generator-modal-panel p {
  margin: 0 0 1rem;
  font-size: 0.9rem;
  color: #4a5568;
}

.generator-modal-panel button {
  font: inherit;
  font-weight: 700;
  padding: 0.55rem 1.1rem;
  border: none;
  border-radius: 4px;
  background: var(--gen-primary);
  color: #fff;
  cursor: pointer;
}

/* ---------- index.html (landing page) ---------- */
.landing-body {
  overflow: auto; /* undo the generator page's own single-scroll containment
    — the landing page is a normal, short page with nothing to independently
    scroll */
}

.landing-topbar {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  padding: 1.25rem 1.5rem 0;
}

.landing-main {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1.5rem 1.5rem 3rem;
  text-align: center;
}

.landing-subtitle {
  margin: 0;
  max-width: 46ch;
  color: #4a5568;
  font-size: 1.05rem;
}

.landing-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  width: 100%;
  max-width: 960px;
}

.landing-panel {
  display: flex;
  border: 1px solid var(--gen-border);
  border-radius: 12px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.landing-panel-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 2rem 1.75rem;
}

.landing-panel h2 {
  margin: 0;
  font-size: 1.3rem;
}

.landing-panel p {
  margin: 0;
  color: #4a5568;
  font-size: 0.95rem;
}

.landing-panel-cta {
  margin-top: 0.25rem;
  font-weight: 700;
  color: var(--gen-primary);
}

@media (hover: hover) {
  .landing-panel:hover {
    border-color: var(--gen-primary);
    box-shadow: 0 4px 16px rgba(43, 108, 176, 0.12);
    transform: translateY(-2px);
  }
}

.landing-panel:focus-visible {
  outline: 2px solid var(--gen-primary);
  outline-offset: 2px;
}

.landing-demo-link {
  font-size: 0.9rem;
  color: var(--gen-primary);
}

@media (prefers-reduced-motion: reduce) {
  .landing-panel {
    transition: none;
  }
}

@media (max-width: 760px) {
  .landing-panels {
    grid-template-columns: 1fr;
  }
}

/* ---------- site-credit footer (index.html, generator/index.html,
   generator/templates.html only — never a generated manual, see
   partials/footer.html for that one) ---------- */
.site-credit {
  flex: 0 0 auto;
  padding: 0.75rem 1.5rem;
  font-size: 0.8rem;
  color: #4a5568;
  text-align: center;
}

.site-credit a {
  color: var(--gen-primary);
}