/* DTM theory widgets. Follows the WESTCAMP-ONLINE design system (off-white + studio amber).
   The mini-daw and piano-roll canvases stay dark on purpose — like a hardware
   mixer's screen, a dark "studio view" inside a light control panel reads as
   intentional rather than as a leftover, and it matches real DAW software. */

:root {
  --wc-bg: #f7f5f1;
  --wc-bg-raise: #eeece4;
  --wc-bg-card: #ffffff;
  --wc-border: #ddd9cf;
  --wc-text: #2a2924;
  --wc-text-sub: #78766b;
  --wc-accent: #b45309;
  --wc-accent-bright: #d97706;
  --wc-accent-text: #fffaf0;
}

.dtm-lesson {
  color: var(--wc-text);
  font-family: "Noto Sans JP", system-ui, sans-serif;
  line-height: 1.85;
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 16px 96px;
}

.dtm-lesson-head h1 {
  font-size: clamp(1.4rem, 4vw, 2rem);
  line-height: 1.4;
  margin: 8px 0 12px;
}

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

.dtm-chip {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border: 1px solid var(--wc-border);
  border-radius: 999px;
  color: var(--wc-text-sub);
}
.dtm-chip.is-free { border-color: var(--wc-accent); color: var(--wc-accent); }

.dtm-goal {
  color: var(--wc-text-sub);
  font-size: 0.92rem;
  border-left: 2px solid var(--wc-accent);
  padding-left: 12px;
  margin: 0 0 8px;
}

.dtm-section {
  margin: 40px 0;
  padding-top: 20px;
  border-top: 1px solid var(--wc-border);
}
.dtm-section h2 { font-size: 1.15rem; margin: 6px 0 12px; }

.dtm-section-label {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wc-accent);
}

.dtm-body p { margin: 0 0 1em; }
.dtm-body ul, .dtm-body ol { margin: 0 0 1em; padding-left: 1.4em; }
.dtm-body li { margin-bottom: 0.35em; }
.dtm-body strong { color: var(--wc-accent-bright); font-weight: 700; }
.dtm-body code {
  background: var(--wc-bg-raise);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.9em;
}

/* Tables carry the comparisons that make a lesson land — role splits, BPM
   ranges. They must stay readable on a phone, so they scroll inside themselves
   rather than pushing the article sideways. */
.dtm-body table.dtm-table {
  display: block;
  overflow-x: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.2em;
  font-size: 0.88rem;
}
.dtm-body .dtm-table th,
.dtm-body .dtm-table td {
  border: 1px solid var(--wc-border);
  padding: 7px 11px;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.dtm-body .dtm-table th {
  background: var(--wc-bg-raise);
  color: var(--wc-text-sub);
  font-weight: 500;
  font-size: 0.82rem;
}
.dtm-body .dtm-table td:last-child { white-space: normal; }

.dtm-body h3 { font-size: 1rem; margin: 1.6em 0 0.6em; }
.dtm-body h4 { font-size: 0.94rem; margin: 1.4em 0 0.5em; color: var(--wc-text-sub); }

/* ---------- shared widget chrome ---------- */

.dtm-widget {
  background: var(--wc-bg-card);
  border: 1px solid var(--wc-border);
  border-radius: 10px;
  padding: 16px;
  margin: 16px 0;
}

.dtm-hint { color: var(--wc-text-sub); font-size: 0.82rem; margin: 10px 0 0; }

.dtm-transport {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.dtm-play {
  background: var(--wc-accent);
  color: var(--wc-accent-text);
  border: none;
  border-radius: 6px;
  padding: 9px 20px;
  font-weight: 700;
  min-width: 88px;
  font-size: 0.9rem;
}
.dtm-play.is-playing { background: var(--wc-accent-bright); }

.dtm-secondary {
  background: transparent;
  color: var(--wc-text-sub);
  border: 1px solid var(--wc-border);
  border-radius: 6px;
  padding: 8px 14px;
  font-size: 0.82rem;
}
.dtm-secondary:hover { color: var(--wc-text); border-color: var(--wc-accent); }

/* ---------- ab-compare ---------- */

.dtm-ab-variants {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.dtm-variant {
  flex: 1 1 160px;
  background: var(--wc-bg-raise);
  color: var(--wc-text-sub);
  border: 1px solid var(--wc-border);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 0.9rem;
  text-align: left;
  transition: border-color 0.12s, color 0.12s;
}
.dtm-variant:hover { color: var(--wc-text); }
.dtm-variant.is-active {
  border-color: var(--wc-accent);
  color: var(--wc-accent-bright);
  background: rgba(180, 83, 9, 0.08);
}

.dtm-playbar-wrap { flex: 1 1 200px; min-width: 140px; }
.dtm-playbar {
  height: 6px;
  background: var(--wc-bg-raise);
  border-radius: 3px;
  overflow: hidden;
}
.dtm-playbar-fill {
  height: 100%;
  background: var(--wc-accent);
  transform-origin: left center;
  transform: scaleX(0);
}
.dtm-playbar-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 0.66rem;
  color: var(--wc-text-sub);
  margin-top: 3px;
}

/* ---------- chord-pad ---------- */

.dtm-pads {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
}

.dtm-pad {
  background: var(--wc-bg-raise);
  border: 1px solid var(--wc-border);
  border-radius: 8px;
  padding: 14px 6px;
  color: var(--wc-text);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 74px;
  touch-action: manipulation;
}
.dtm-pad.is-hit { background: var(--wc-accent); color: var(--wc-accent-text); border-color: var(--wc-accent); }
.dtm-pad-degree { font-size: 0.98rem; color: var(--wc-accent); font-weight: 700; }
.dtm-pad.is-hit .dtm-pad-degree { color: var(--wc-accent-text); }
.dtm-pad-symbol { font-size: 0.8rem; color: var(--wc-text-sub); }
.dtm-pad.is-hit .dtm-pad-symbol { color: var(--wc-accent-text); }
.dtm-pad-alt { font-size: 0.68rem; color: var(--wc-text-sub); min-height: 1em; }
.dtm-chord-pad .dtm-secondary { margin-top: 12px; }

/* ---------- keyboard ---------- */

.dtm-keyboard-scroll { overflow-x: auto; }
.dtm-keyboard-svg { width: 100%; min-width: 320px; height: 132px; display: block; }
.dtm-key { fill: #d8d8de; stroke: #0a0a0c; stroke-width: 1; cursor: pointer; }
.dtm-key.is-black { fill: #1a1a20; }
.dtm-key.hl-soft { fill: #efe0c0; }
.dtm-key.is-black.hl-soft { fill: #4a3d22; }
.dtm-key.hl-strong { fill: var(--wc-accent); }
.dtm-key.is-black.hl-strong { fill: #8a6522; }
.dtm-key.hl-outline { stroke: var(--wc-accent); stroke-width: 2; }
.dtm-key.hl-warn { fill: #c98a84; }
.dtm-key.is-hit { fill: var(--wc-accent-bright); }
.dtm-key-label { font-size: 9px; text-anchor: middle; fill: #2a2a31; pointer-events: none; }
.dtm-key-label.is-black { fill: #9aa0a8; }

.dtm-legend { display: flex; gap: 14px; margin-top: 10px; font-size: 0.76rem; color: var(--wc-text-sub); }
.dtm-legend-item::before {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 5px;
  border-radius: 2px;
  vertical-align: -1px;
  background: #d8d8de;
}
.dtm-legend-item.hl-soft::before { background: #efe0c0; }
.dtm-legend-item.hl-strong::before { background: var(--wc-accent); }
.dtm-legend-item.hl-warn::before { background: #c98a84; }

/* ---------- piano-roll ---------- */

.dtm-pr-stage { display: block; }

.dtm-pr-rulerrow { display: flex; align-items: stretch; }
.dtm-pr-rulercorner { flex: 0 0 auto; background: #131316; border-right: 1px solid var(--wc-border); }
.dtm-pr-rulerscroll { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.dtm-pr-ruler { display: block; }

.dtm-pr-vwrap { overflow-y: auto; overflow-x: hidden; }
.dtm-pr-row { display: flex; align-items: flex-start; }
.dtm-pr-keys { flex: 0 0 auto; border-right: 1px solid var(--wc-border); }

/* The grid's own horizontal bar is hidden; the velocity lane below carries the
   visible one and both are kept in sync. Two bars for one timeline reads as a bug. */
.dtm-pr-scroll { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.dtm-pr-scroll::-webkit-scrollbar { height: 0; }
.dtm-pr-grid { display: block; touch-action: none; cursor: crosshair; }

.dtm-pr-velrow { position: relative; display: flex; align-items: flex-start; border-top: 1px solid var(--wc-border); }
.dtm-pr-velhandle {
  position: absolute;
  top: -4px; left: 0; right: 0; height: 8px;
  cursor: ns-resize;
  z-index: 2;
}
.dtm-pr-velhandle:hover { background: rgba(217, 164, 65, 0.25); }
.dtm-pr-velkeys { flex: 0 0 auto; border-right: 1px solid var(--wc-border); }
.dtm-pr-velscroll { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; }
.dtm-pr-vel { display: block; touch-action: none; cursor: ns-resize; }

.dtm-pr-zoom { display: inline-flex; gap: 3px; margin-left: auto; }
.dtm-pr-zoombtn {
  font: 0.7rem/1 system-ui, sans-serif;
  background: transparent;
  color: var(--wc-text-sub);
  border: 1px solid var(--wc-border);
  border-radius: 3px;
  padding: 6px 7px;
  min-width: 30px;
}
.dtm-pr-zoombtn:hover { color: var(--wc-text); border-color: var(--wc-accent); }
.dtm-piano-roll .dtm-transport { margin-top: 12px; }
.dtm-vel-wrap {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; color: var(--wc-text-sub);
}
.dtm-vel-slider { width: 120px; }

/* ---------- パソコン向けの案内 ---------- */

.dtm-pc-notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--wc-accent);
  background: rgba(180, 83, 9, 0.08);
  color: var(--wc-text);
  font-size: 0.84rem;
  line-height: 1.7;
}

.dtm-pc-only { text-align: center; padding: 28px 18px; }
.dtm-pc-only-title {
  margin: 0 0 8px;
  color: var(--wc-accent-bright);
  font-weight: 700;
  font-size: 0.98rem;
}
.dtm-pc-only-body {
  margin: 0;
  color: var(--wc-text-sub);
  font-size: 0.86rem;
  line-height: 1.8;
}

/* ---------- step-sequencer ---------- */

/* Cells are discrete targets, so this stays usable with a finger — unlike the
   piano roll, which needs precision the touch screen cannot give. */
.dtm-ss-scroll { overflow-x: auto; }
.dtm-ss-grid { display: inline-block; min-width: 100%; }

.dtm-ss-row, .dtm-ss-ruler { display: flex; align-items: center; gap: 8px; }
.dtm-ss-row { margin-bottom: 4px; }
.dtm-ss-row.is-muted { opacity: 0.4; }

.dtm-ss-label {
  flex: 0 0 auto;
  width: 116px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--wc-text-sub);
}
.dtm-ss-name { flex: 1 1 auto; white-space: nowrap; }
.dtm-ss-num {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.68rem;
  color: #9b9686;
}
.dtm-ss-mute {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border: 1px solid var(--wc-border);
  border-radius: 4px;
  background: transparent;
  color: var(--wc-text-sub);
  font-size: 0.66rem;
  line-height: 1;
  padding: 0;
}
.dtm-ss-mute.is-off { background: #b45a52; border-color: #b45a52; color: #fff; }

.dtm-ss-cells { display: flex; gap: 3px; flex: 1 1 auto; }

.dtm-ss-cell {
  flex: 1 1 0;
  min-width: 26px;
  height: 34px;
  border: 1px solid var(--wc-border);
  border-radius: 4px;
  background: var(--wc-bg-raise);
  padding: 0;
  touch-action: manipulation;
  transition: background 0.08s;
}
.dtm-ss-cell.is-beat { background: #e5e1d5; }
.dtm-ss-cell.is-bar { border-left-color: #a8a196; }
.dtm-ss-cell.is-marked { box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.5); }
.dtm-ss-cell:hover { border-color: var(--wc-accent); }
.dtm-ss-cell.is-on { background: var(--wc-accent); border-color: var(--wc-accent); }
.dtm-ss-cell.is-playing { outline: 2px solid var(--wc-accent-bright); outline-offset: -2px; }

.dtm-ss-ruler { margin-bottom: 6px; }
.dtm-ss-tick {
  flex: 1 1 0;
  min-width: 26px;
  text-align: center;
  font-size: 0.68rem;
  color: #6d727a;
  font-family: ui-monospace, Menlo, monospace;
}
.dtm-ss-tick.is-beat { color: var(--wc-text-sub); }
.dtm-ss-tick.is-playing { color: var(--wc-accent-bright); }

.dtm-step-sequencer .dtm-transport { margin-top: 12px; }
.dtm-ss-tempo-wrap {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; color: var(--wc-text-sub);
}
.dtm-ss-tempo { width: 120px; }
.dtm-ss-tempo-value {
  font-family: ui-monospace, Menlo, monospace;
  color: var(--wc-text);
  min-width: 2.4em;
  text-align: right;
}

@media (max-width: 560px) {
  .dtm-ss-label { width: 84px; font-size: 0.72rem; }
  .dtm-ss-cell { min-width: 30px; height: 38px; }
  .dtm-ss-tick { min-width: 30px; }
}

/* ---------- quiz ---------- */

.dtm-quiz-prompt { margin: 0 0 12px; font-size: 0.96rem; }
.dtm-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.dtm-choice {
  background: var(--wc-bg-raise);
  border: 1px solid var(--wc-border);
  border-radius: 8px;
  color: var(--wc-text);
  padding: 12px 22px;
  font-size: 0.95rem;
  min-width: 64px;
}
.dtm-choice:hover:not(:disabled) { border-color: var(--wc-accent); }
.dtm-choice.is-correct { border-color: #58a066; background: rgba(88, 160, 102, 0.14); }
.dtm-choice.is-wrong { border-color: #b45a52; background: rgba(180, 90, 82, 0.14); }
.dtm-choice:disabled { cursor: default; }
.dtm-quiz-feedback {
  margin: 12px 0 0;
  font-size: 0.86rem;
  color: var(--wc-text-sub);
  display: none;
}
.dtm-quiz-feedback.is-shown { display: block; }

/* ---------- gate / export / placeholder ---------- */

.dtm-gate {
  background: var(--wc-bg-card);
  border: 1px solid var(--wc-accent);
  border-radius: 10px;
  padding: 18px;
  text-align: center;
  margin: 20px 0;
}
.dtm-gate-btn {
  background: var(--wc-accent);
  color: var(--wc-accent-text);
  border: none;
  border-radius: 6px;
  padding: 12px 26px;
  font-weight: 700;
  font-size: 0.95rem;
}

.dtm-export-wrap { margin: 40px 0 0; text-align: center; }
.dtm-export {
  background: transparent;
  border: 1px solid var(--wc-accent);
  color: var(--wc-accent);
  border-radius: 6px;
  padding: 12px 28px;
  font-size: 0.9rem;
  font-weight: 700;
}
.dtm-export:hover { background: var(--wc-accent); color: var(--wc-accent-text); }

.dtm-deepdive {
  margin-top: 28px;
  padding: 14px 16px;
  border: 1px dashed var(--wc-border);
  border-radius: 8px;
  font-size: 0.86rem;
}
.dtm-deepdive-label { color: var(--wc-accent); margin-right: 10px; }
.dtm-deepdive a { color: var(--wc-text); }

.dtm-placeholder {
  color: var(--wc-text-sub);
  font-size: 0.85rem;
  text-align: center;
  border-style: dashed;
}

@media (max-width: 560px) {
  .dtm-lesson { padding: 16px 12px 80px; }
  .dtm-widget { padding: 12px; }
  .dtm-variant { flex-basis: 100%; }
}