/* =========================================
   LOCAL RESOURCE PAGE STYLES: Downloadable Quiz Generator
   (Identifying Diatonic Chords)
   Builds on top of ../../shared/global.css
   ========================================= */

/* ─── Page title ─── */
.resourceMainTitle {
  text-align: center;
  font-size: calc(20px * var(--font-scale));
  font-weight: 900;
  color: var(--text-main);
  margin: 0;
  padding: 0 12px;
  line-height: 1.3;
}

/* ─── Navigation panel ───
   Same shape & padding as the game pages' controlsPanel / actionsGrid
   (see games/higherOrLower/higherlowerstyle.css). */
.controlsPanel {
  background: var(--bg-surface);
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
  padding: 10px 10px;
  padding-bottom: 14px;
  box-shadow: var(--shadow-soft);
}
body.light-theme .controlsPanel { border-color: rgba(0, 0, 0, 0.06); }

.actionsGrid { display: flex; gap: 6px; width: 100%; }
.resourceNavGrid { margin-bottom: 0; }
.actionsGrid .flex-text-btn {
  flex: 1;
  padding: 0 4px;
  font-size: calc(14px * var(--font-scale));
  white-space: nowrap;
}

.secondary-btn {
  background: var(--bg-elevated);
  color: var(--text-main);
  border: 2px solid var(--bg-elevated);
  box-shadow: 0 4px 0 var(--bg-elevated);
  font-size: calc(14px * var(--font-scale));
}
.secondary-btn:active:not(:disabled) {
  box-shadow: 0 0px 0 var(--bg-elevated);
  transform: translateY(4px);
}

.mini-btn {
  min-height: calc(34px * var(--control-scale));
  height: auto;
  font-size: calc(12px * var(--font-scale));
  border-radius: var(--radius-sm);
  padding: 0 12px;
}

.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }

/* ─── Intro text ─── */
.resourceIntro p {
  text-align: center;
  font-size: calc(15px * var(--font-scale));
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 0 4px;
  margin: 0 0 8px;
}
.resourceIntro p:last-child { margin-bottom: 0; }

/* ─── Options panel ─── */
.genOptions { display: flex; flex-direction: column; gap: 18px; }

.optGroup { display: flex; flex-direction: column; gap: 10px; }

.optGroupLabel {
  font-size: calc(13px * var(--font-scale));
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.optHint {
  font-size: calc(12px * var(--font-scale));
  font-weight: 600;
  color: var(--text-muted);
  opacity: 0.85;
  line-height: 1.4;
}
.optHint.optWarn { color: var(--danger); opacity: 1; font-weight: 800; }

.toggleRow { display: flex; flex-wrap: wrap; gap: 8px; }

.toggle-btn {
  flex: 1 1 auto;
  min-width: 116px;
  min-height: calc(44px * var(--control-scale));
  height: auto;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--bg-elevated);
  background: var(--bg-elevated);
  color: var(--text-main);
  box-shadow: 0 4px 0 var(--bg-elevated);
  font-family: var(--font-main);
  font-size: calc(14px * var(--font-scale));
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
  transition: transform 0.1s, box-shadow 0.1s, background-color 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.toggle-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--bg-elevated); }
.toggle-btn.selected {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent-shadow);
  box-shadow: 0 4px 0 var(--accent-shadow);
}
.toggle-btn.selected:active { box-shadow: 0 1px 0 var(--accent-shadow); }

.keysRow .toggle-btn {
  flex: 0 1 auto;
  min-width: 60px;
  padding: 6px 8px;
  font-size: calc(13px * var(--font-scale));
}

.keySelectActions { display: flex; gap: 8px; }
.keySelectActions .btn { flex: 1; }

.optGroupSplit {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.optGroupSplit select {
  width: auto;
  min-width: 120px;
  height: calc(44px * var(--control-scale));
  background: var(--bg-base);
  border: 2px solid var(--bg-elevated);
  color: var(--text-main);
  border-radius: var(--radius-sm);
  padding: 0 14px;
  font-family: var(--font-main);
  font-size: calc(15px * var(--font-scale));
  font-weight: 700;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}
.optGroupSplit select:focus { border-color: var(--accent); }

.genActionRow { margin-top: 4px; }

/* ─── Preview modal ───
   Renders an exact, unscaled-by-reflow replica of the downloadable sheet:
   each .printPage keeps its native 794px layout (so text wraps, grid
   columns and keyboard SVGs are pixel-identical to the PDF/PNG export)
   and is visually resized purely via CSS transform:scale, never by
   shrinking its box width. That avoids the "squeezed" reflow that a
   width:100% trick would cause. Default scale fits the modal's width;
   the user can zoom further and pan/scroll within the stage. */

.modal.previewModalRoot { padding: 8px; }

.previewModalCard {
  width: 100%;
  max-width: none;
  height: calc(100vh - 16px);
  max-height: calc(100vh - 16px);
  padding: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.previewModalHeader {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
body.light-theme .previewModalHeader { border-bottom-color: rgba(0, 0, 0, 0.08); }

.previewModalTitle {
  font-size: calc(16px * var(--font-scale));
  font-weight: 900;
  color: var(--text-main);
  margin-right: auto;
  white-space: nowrap;
}

.previewMeta {
  font-size: calc(12px * var(--font-scale));
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.previewZoomGroup { display: flex; align-items: center; gap: 4px; }
.previewZoomGroup .btn {
  min-width: calc(36px * var(--control-scale));
  height: calc(36px * var(--control-scale));
  padding: 0 10px;
  font-size: calc(15px * var(--font-scale));
  font-weight: 900;
}
.previewZoomLabel {
  font-size: calc(12px * var(--font-scale));
  font-weight: 800;
  color: var(--text-muted);
  min-width: 44px;
  text-align: center;
}

.previewModalScroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: var(--bg-base);
  padding: 22px;
}

.previewModalInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: max-content;
  min-width: 100%;
}

.previewPageCard { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.previewPageStage { position: relative; }
.previewPageStage .printPage {
  transform-origin: top left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  position: absolute;
  top: 0;
  left: 0;
}

.previewPageLabel {
  font-size: calc(12px * var(--font-scale));
  font-weight: 800;
  color: var(--text-muted);
  text-align: center;
}

/* ─── Save-format modal extras ─── */
.saveFormatRow { display: flex; gap: 10px; }
.saveFormatRow .btn { flex: 1; }

/* =========================================
   PRINTABLE A4 SHEET
   These rules render the literal task-sheet markup. They intentionally do
   NOT scale with --font-scale (the site's on-screen accessibility setting):
   a generated PDF/PNG must look identical no matter what viewing size the
   person who *made* it happened to have selected. Print size is controlled
   purely by the "Standard / Large Print" toggle, via fixed px values and
   the .sheetList.singleCol modifier.
   ========================================= */

#printHost { position: fixed; left: -10000px; top: 0; overflow: visible; }

.printPage {
  width: 794px;
  min-height: 1123px;
  margin: 0 auto;
  /* Side padding is kept to a minimal safe-print margin so the title image,
     Name/Date line, and hint text can use almost the full page width. The
     question section restores its previous (wider) inset itself, via its
     own padding below, so it isn't dictated by this narrower safe margin. */
  padding: 24px 16px 36px;
  background: #fff;
  color: #111;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing: border-box;
  position: relative;
}

.sheetTitleImage { display: block; width: min(100%); height: auto; margin: 0 auto 18px; }

.sheetNameDate { font-size: 14px; font-weight: 800; text-align: center; margin: 8px 0 8px; }
.sheetHint { font-size: 12px; font-weight: 800; text-align: center; margin: -4px 0 18px; opacity: 0.85; }
.printPage.large .sheetNameDate { font-size: 20px; }
.printPage.large .sheetHint { font-size: 20px; }

.sheetList {
  margin: 0;
  padding: 0 14px;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px;
  row-gap: 12px;
  box-sizing: border-box;
}
.sheetList.singleCol { grid-template-columns: 1fr; row-gap: 20px; }

.sheetQ { border: 1px solid rgba(0, 0, 0, .15); border-radius: 12px; padding: 8px 10px; break-inside: avoid; min-width: 0; max-width: 100%; overflow: hidden; }
.sheetList.singleCol .sheetQ { padding: 14px 18px; }

.sheetQName { font-weight: 900; font-size: 12px; line-height: 1.2; margin: 0 0 6px; }
.sheetList.singleCol .sheetQName { font-size: 24px; margin-bottom: 12px; }

.sheetAnswerLine {
  border: none;
  border-radius: 10px;
  padding: 8px 8px 6px;
  font-weight: 900;
  font-size: 12px;
  line-height: 1.1;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin: 0 0 6px;
  min-height: 30px;
}
.sheetList.singleCol .sheetAnswerLine { font-size: 20px; min-height: 46px; padding: 10px 14px; margin-bottom: 14px; max-width: 100%; box-sizing: border-box; overflow: hidden; }

.sheetAnswerLine .answerLabel {
  white-space: nowrap;
  flex: 0 0 auto;
}

.sheetAnswerLine .dots {
  margin-left: auto;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  text-align: right;
  letter-spacing: .4px;
  opacity: .6;
  overflow: hidden;
  white-space: nowrap;
}

.sheetKbd { border: 1px solid rgba(0, 0, 0, .18); border-radius: 12px; padding: 6px; background: #fff; box-sizing: border-box; overflow: hidden; max-width: 100%; }
.sheetList.singleCol .sheetKbd { padding: 10px; }
.sheetKbd .mount { width: 100%; max-width: 100%; }
.sheetKbd .mount svg { width: 100%; max-width: 100%; height: auto; display: block; }
/* The <svg> itself is left at width:100% (same rule the standard keyboard
   already uses, which exports fine) — instead its plain <div class="mount">
   wrapper is narrowed. Resizing a normal div is a well-supported, ordinary
   html2canvas operation, unlike resizing the inline SVG directly, which is
   what was getting clipped during PDF/PNG export. */
.sheetList.singleCol .sheetKbd .mount {
  width: 82%;
  margin: 0 auto;
}

.sheetFooter {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  opacity: 0.7;
}

@media (max-width: 720px) {
  .optGroupSplit { flex-direction: column; align-items: stretch; }
  .optGroupSplit select { width: 100%; }
}