/* ============================================================================
   TONIC COMPONENTS  (shared)  —  load AFTER tonic-tokens.css
   ----------------------------------------------------------------------------
   IMPORTANT: this file is deliberately CLASS-SCOPED. It contains NO global
   resets and NO bare-element rules (no body/h1/a selectors), so linking it into
   an existing page cannot restyle that page's headings, links, or layout. It
   only affects elements that opt in by using these class names. Every colour
   references a token, so components re-theme automatically per data-module.

   New components Tonic did not previously have:
     .ds-btn / .ds-seg / .ds-eg / .ds-input / .ds-secband / .ds-tile / .ds-chip
   (Prefixed "ds-" to guarantee no collision with any existing Tonic class.)
   ========================================================================== */

/* ---- Display heading helper (opt-in; does NOT touch bare h1/h2) ---------- */
.ds-display {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.0rem, 6vw, 3.1rem); line-height: 1.08;
  letter-spacing: -0.01em; color: var(--ink); margin: 6px 0 14px;
}
.ds-h2 {
  font-family: var(--font-ui); font-weight: 800;
  font-size: clamp(1.45rem, 4vw, 2.0rem); line-height: 1.16;
  letter-spacing: -0.01em; color: var(--ink); margin: 6px 0 12px;
}

/* ---- Card (opt-in container) -------------------------------------------- */
.ds-card {
  background: var(--panel); border: 1.5px solid var(--line);
  border-radius: var(--radius-card); padding: 18px 16px 14px;
  margin-bottom: 18px; box-shadow: var(--shadow-card);
}

/* ---- Example / callout box (themed, left accent bar) -------------------- */
.ds-eg {
  background: var(--primary-soft);
  border-left: 3px solid var(--primary);
  border-radius: 0 8px 8px 0; padding: 9px 13px; margin: 8px 0;
}
.ds-eg .ds-lead { display:block; font-weight:700; color: var(--primary-text); font-size:0.92rem; }
.ds-eg .ds-sub  { display:block; font-size:0.81rem; color: var(--ink-mute); margin-top:2px; }

/* ---- Inline highlight chip --------------------------------------------- */
.ds-chip {
  display:inline-block; background: var(--m-mark); color: var(--m-deep);
  font-weight:700; font-size:0.85em; padding:1px 8px; border-radius:6px;
}

/* ---- Numbered section band --------------------------------------------- */
.ds-secband { display:flex; align-items:center; gap:11px; margin:26px 0 14px; }
.ds-secnum {
  flex:none; width:30px; height:30px; border-radius:50%;
  background: var(--primary); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:0.9rem;
}
.ds-sectitle { font-weight:800; font-size:1.05rem; color: var(--ink); }
.ds-secsub   { font-size:0.8rem; color: var(--ink-mute); }

/* ---- Buttons ------------------------------------------------------------ */
.ds-btn {
  font-family: var(--font-ui); font-weight:800; font-size:0.9rem;
  border:0; border-radius: var(--radius-pill); padding:10px 18px;
  background: var(--primary); color:#fff; cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, filter 120ms ease;
}
.ds-btn:active { transform: scale(0.97); }
.ds-btn:hover  { filter: brightness(1.05); }
.ds-btn.ds-ghost { background:none; border:1.5px solid var(--line-2); color: var(--ink-soft); }

/* ---- Segmented control (slim 2–4 way pill) ----------------------------- */
.ds-seg {
  display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr;
  align-items:stretch; background: rgba(20,24,43,0.07);
  border-radius: var(--radius-pill); padding:3px;
}
.ds-seg-btn {
  width:100%; text-align:center; white-space:nowrap;
  font-family: var(--font-ui); font-weight:800; font-size:0.8rem;
  border:0; background:none; color: var(--ink-mute);
  padding:7px 12px; border-radius: var(--radius-pill); cursor:pointer;
  transition: color 120ms;
}
.ds-seg-btn.ds-active { background:#fff; color: var(--ink); box-shadow:0 1px 4px rgba(20,24,43,0.14); }

/* ---- Text input --------------------------------------------------------- */
.ds-input {
  width:100%; box-sizing:border-box; background: var(--bg);
  border:1.5px solid var(--line); border-radius: var(--radius-input);
  padding:9px 12px; font-family: var(--font-ui); font-size:0.95rem;
  color: var(--ink); outline:none; transition: border-color 120ms;
}
.ds-input:focus { border-color: var(--primary); }

/* ---- Module tile (gradient grid card) ---------------------------------- */
.ds-tile {
  display:flex; align-items:center; gap:11px;
  min-height:72px; padding:14px 14px; border-radius: var(--radius-card);
  color:#fff; text-decoration:none; overflow:hidden;
  background: linear-gradient(135deg, var(--m-bold), var(--m-grad, var(--m-base)));
  box-shadow: var(--shadow-card);
  transition: transform 120ms ease, box-shadow 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.ds-tile:active { transform: scale(0.98); }
.ds-tile:hover  { box-shadow: 0 8px 22px rgba(20,24,43,0.16); }
.ds-tile-icon {
  flex:none; width:42px; height:42px; border-radius:12px;
  background: rgba(255,255,255,0.22);
  display:flex; align-items:center; justify-content:center; font-size:21px;
}
.ds-tile-name { font-family: var(--font-ui); font-weight:800; font-size:15px; line-height:1.15; }
.ds-tile-sub  { font-size:12px; font-weight:600; opacity:.9; margin-top:1px; }
.ds-tile-badge {
  margin-left:auto; font-size:10px; font-weight:800; opacity:.95;
  background: rgba(255,255,255,.2); padding:2px 8px; border-radius:6px; white-space:nowrap;
}

/* ---- Feedback pills (fixed semantic colours) --------------------------- */
.ds-fb-good { background: var(--good-bg); color: var(--good-ink); border-radius:8px; padding:8px 12px; font-weight:700; font-size:0.85rem; }
.ds-fb-bad  { background: var(--bad-bg);  color: var(--bad-ink);  border-radius:8px; padding:8px 12px; font-weight:700; font-size:0.85rem; }

/* ---- Tip / note (fixed amber) ------------------------------------------ */
.ds-tip {
  background: var(--tip-bg); color: var(--tip-ink); border:1px solid var(--tip-border);
  border-radius:10px; padding:10px 13px; margin:10px 0; font-size:0.86rem; line-height:1.55;
}

/* ============================================================================
   WIDGET FULLSCREEN MODAL — pairs with tonic-widget-fullscreen.js
   ========================================================================== */
/* "View larger" button on each interactive widget */
.wfs-btn{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:12px; font-family:var(--font-ui); font-weight:800; font-size:0.78rem;
  color:var(--primary-text); background:var(--m-tint);
  border:1.5px solid var(--m-mark); border-radius:999px; padding:7px 14px; cursor:pointer;
  -webkit-tap-highlight-color:transparent; transition:filter 120ms;
}
.wfs-btn:hover{ filter:brightness(0.97); }
.wfs-btn:active{ transform:scale(0.97); }

/* lock background scroll while modal open */
html.wfs-lock, html.wfs-lock body{ overflow:hidden; }

/* dim backdrop */
.wfs-overlay{ position:fixed; inset:0; z-index:9998; background:rgba(12,14,28,0.66);
  display:none; padding:0; }
.wfs-overlay.open{ display:flex; align-items:stretch; justify-content:center; }

/* the modal sheet — fills the screen with a clear bar at the top */
.wfs-sheet{
  position:relative; width:100%; max-width:900px; height:100%;
  background:var(--bg); display:flex; flex-direction:column;
  box-shadow:var(--shadow-pop);
}
@media (min-width:560px){
  .wfs-overlay.open{ align-items:center; }
  .wfs-sheet{ height:auto; max-height:92vh; border-radius:18px; overflow:hidden; }
}

/* top bar with obvious Close (and optional Rotate) */
.wfs-bar{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; padding-top:max(10px, env(safe-area-inset-top));
  background:var(--panel); border-bottom:1px solid var(--line);
}
.wfs-x{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-ui); font-weight:800; font-size:0.9rem; color:var(--ink);
  background:none; border:1.5px solid var(--line-2); border-radius:999px;
  padding:8px 16px; cursor:pointer;
}
.wfs-x:hover{ background:var(--bg); }
.wfs-rotate{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-ui); font-weight:800; font-size:0.82rem; color:var(--primary-text);
  background:var(--m-tint); border:1.5px solid var(--m-mark); border-radius:999px;
  padding:8px 14px; cursor:pointer;
}
.wfs-rotate:hover{ filter:brightness(0.97); }

/* scroll region holding the widget */
.wfs-scroll{ flex:1; overflow:auto; -webkit-overflow-scrolling:touch;
  display:flex; align-items:center; justify-content:center; }
.wfs-inner{ width:100%; max-width:none; padding:0; box-sizing:border-box;
  transform-origin:center center; }

/* widget inside the modal: shed its card chrome, breathe, hide its own button */
.wfs-inner .exw, .wfs-inner.wfs-host > *{ margin:0; }
.wfs-inner .wfs-btn{ display:none; }
.wfs-inner > [data-wfs]{ border:none; box-shadow:none; background:none; padding:0; max-width:none; margin:0; }
.wfs-inner > [data-wfs] > h2{ font-size:1.3rem; }

/* Rotation + scaling are applied inline by tonic-widget-fullscreen.js (fitContent),
   so the widget always fills the available modal space with no empty margin. */

/* ── TTS pattern arrows over scale-note chips (minor scales / modes) ── */
.tts-arc{ display:flex; align-items:flex-start; gap:0; flex-wrap:nowrap; overflow-x:auto; margin:6px 0 2px; padding-bottom:2px; }
.tts-arc .a-note{ flex:0 0 auto; min-width:34px; text-align:center; font-weight:800; font-size:0.9rem; color:var(--primary-text); background:var(--m-tint); border:1.5px solid var(--m-mark); border-radius:9px; padding:5px 0; }
.tts-arc .a-gap{ position:relative; flex:0 0 auto; width:30px; height:34px; }
.tts-arc .a-gap svg{ position:absolute; top:0; left:0; width:30px; height:22px; overflow:visible; }
.tts-arc .a-lbl{ position:absolute; top:17px; left:0; right:0; text-align:center; font-weight:800; font-size:0.72rem; }
.tts-arc .a-lbl.T{ color:#2E7D32; }
.tts-arc .a-lbl.S{ color:#C62828; }
.tts-arc .a-lbl.A{ color:#8B5E00; }