/* Morse Code Maker — light, system-font, GeneratePress-friendly.
 * No external fonts or images. Colours are scoped under .mcm-tool
 * so theme styles do not leak in (and these do not leak out). */

.mcm-tool {
  --mcm-ink: #1a202c;
  --mcm-muted: #4a5568;
  --mcm-border: #e2e8f0;
  --mcm-bg: #ffffff;
  --mcm-soft: #f7fafc;
  --mcm-accent: #1a5276;
  --mcm-accent-soft: #ebf4fb;
  --mcm-lamp: #f6ad55;
  --mcm-good: #276749;
  --mcm-bad: #9b2c2c;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--mcm-ink);
  background: var(--mcm-bg);
  border: 1px solid var(--mcm-border);
  border-radius: 16px;
  padding: 24px;
  margin: 24px 0;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  line-height: 1.6;
  box-sizing: border-box;
  /* The tool must never be wider than its theme container, otherwise
   * the page itself gets a horizontal scrollbar (the bug reported
   * with the reference chart). */
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
}
.mcm-tool *, .mcm-tool *::before, .mcm-tool *::after { box-sizing: border-box; }
.mcm-tool .mcm-title { font-size: 1.75rem; line-height: 1.25; margin: 0 0 8px; color: var(--mcm-ink); }
.mcm-tool .mcm-h3 { font-size: 1.25rem; line-height: 1.3; margin: 32px 0 8px; color: var(--mcm-ink); }
.mcm-tool .mcm-h4 { font-size: 1rem; margin: 20px 0 8px; color: var(--mcm-ink); }
.mcm-tool .mcm-intro, .mcm-tool p { margin: 0 0 12px; }
.mcm-tool .mcm-hint { color: var(--mcm-muted); font-size: 0.9rem; }

/* Tabs */
.mcm-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.mcm-tab {
  border: 1px solid var(--mcm-border); background: var(--mcm-soft);
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
  font-size: 0.95rem; font-weight: 600; color: var(--mcm-ink);
}
.mcm-tab.is-active { background: var(--mcm-accent); border-color: var(--mcm-accent); color: #fff; }
.mcm-tab:focus-visible, .mcm-btn:focus-visible, .mcm-textarea:focus-visible,
.mcm-search:focus-visible, .mcm-slider input:focus-visible { outline: 3px solid #90cdf4; outline-offset: 2px; }

/* Inputs and outputs */
.mcm-label { display: block; font-weight: 600; margin: 16px 0 6px; }
.mcm-textarea, .mcm-search {
  width: 100%; padding: 12px 14px; border: 1px solid var(--mcm-border);
  border-radius: 12px; font-size: 1rem; line-height: 1.5; background: #fff; color: var(--mcm-ink);
}
.mcm-textarea--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.05em; }
.mcm-output {
  min-height: 72px; padding: 14px; border: 1px solid var(--mcm-border); border-radius: 12px;
  background: var(--mcm-soft); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.05rem; word-break: break-all; white-space: pre-wrap;
}
.mcm-group { padding: 1px 3px; border-radius: 4px; }
.mcm-group.is-playing { background: #fbd38d; }
.mcm-group--word { color: var(--mcm-accent); font-weight: 700; }

/* Buttons */
.mcm-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.mcm-btn {
  border: 1px solid var(--mcm-border); background: #fff; color: var(--mcm-ink);
  padding: 10px 16px; border-radius: 10px; cursor: pointer; font-size: 0.95rem; font-weight: 600;
}
.mcm-btn--primary { background: var(--mcm-accent); border-color: var(--mcm-accent); color: #fff; }
.mcm-btn--ghost { background: transparent; }
.mcm-btn--correct { background: #c6f6d5; border-color: var(--mcm-good); color: var(--mcm-good); }
.mcm-btn--wrong { background: #fed7d7; border-color: var(--mcm-bad); color: var(--mcm-bad); }
.mcm-status { color: var(--mcm-muted); font-size: 0.9rem; min-height: 1.4em; }

/* Sliders */
.mcm-sliders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
.mcm-slider { min-width: 0; }
.mcm-slider input { width: 100%; accent-color: var(--mcm-accent); }

/* Lamp */
.mcm-lamp-wrap { display: flex; align-items: center; gap: 16px; margin: 16px 0; }
.mcm-lamp {
  width: 72px; height: 72px; border-radius: 50%; background: #e2e8f0;
  border: 2px solid var(--mcm-border); transition: background 0.05s, box-shadow 0.05s;
  flex-shrink: 0;
}
.mcm-lamp.is-on { background: var(--mcm-lamp); box-shadow: 0 0 32px 8px rgba(246, 173, 85, 0.7); border-color: #ed8936; }
.mcm-lamp-label { font-family: ui-monospace, monospace; font-size: 1.25rem; }
.mcm-sos-code { font-family: ui-monospace, monospace; font-size: 2rem; font-weight: 700; letter-spacing: 0.15em; text-align: center; margin: 16px 0; }

/* Chart — responsive by construction, not by breakpoint alone.
 * Old code used repeat(3, 1fr). A 1fr track's automatic minimum is
 * its content's min-content size, and each row held a letter + a
 * Morse code + three unshrinkable buttons (~200px). On any content
 * column narrower than ~600px (sidebar layout, tablet, phone) the
 * grid therefore refused to shrink and overflowed the page.
 * minmax(0, 1fr) + auto-fit lets columns drop (3 -> 2 -> 1) as the
 * container narrows, and min-width: 0 + flex-wrap lets a single
 * card shrink instead of pushing the grid out. */
.mcm-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 8px; width: 100%; }
.mcm-chart-row {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 8px 10px;
  border: 1px solid var(--mcm-border); border-radius: 10px; background: var(--mcm-soft);
  min-width: 0;
}
.mcm-chart-char { font-weight: 700; min-width: 1.5em; text-align: center; flex-shrink: 0; }
.mcm-chart-code { font-family: ui-monospace, monospace; flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.mcm-chart-copy { border: 1px solid var(--mcm-border); background: #fff; border-radius: 8px; padding: 4px 10px; cursor: pointer; font-size: 0.85rem; flex-shrink: 0; white-space: nowrap; }
.mcm-quiz-code { font-family: ui-monospace, monospace; font-size: 2rem; font-weight: 700; letter-spacing: 0.2em; text-align: center; margin: 20px 0; }
.mcm-score { font-weight: 700; }
.mcm-faq-item { border-top: 1px solid var(--mcm-border); padding-top: 4px; }

/* Reduced motion: keep the lamp (it IS the signal) but drop transitions. */
@media (prefers-reduced-motion: reduce) {
  .mcm-lamp { transition: none; }
}

/* Mobile-first responsive */
@media (max-width: 640px) {
  .mcm-tool { padding: 16px; border-radius: 12px; }
  .mcm-tool .mcm-title { font-size: 1.4rem; }
  .mcm-sliders { grid-template-columns: minmax(0, 1fr); }
  /* Do NOT force 2 columns here (the old rule): on a 360px phone two
   * ~200px cards overflow again. auto-fit already drops to 1 column
   * when the container is too narrow for two. */
  .mcm-chart-grid { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
  .mcm-sos-code, .mcm-quiz-code { font-size: 1.5rem; }
  .mcm-lamp { width: 56px; height: 56px; }
}
@media (max-width: 400px) {
  /* One column, compact buttons: nothing may force horizontal scroll. */
  .mcm-chart-grid { grid-template-columns: minmax(0, 1fr); }
  .mcm-chart-copy { padding: 4px 7px; font-size: 0.8rem; }
}