.trichord-app{
  --bg:#0d0d0f;--bg2:#121216;--bg3:#1a1a20;
  --border:#2a2a2e;--border2:#3a3a3e;
  --text:#e8e4d9;--text2:#9a9690;--text3:#5a5650;
  --gold:#c8a96e;--gold-bg:#201c10;
  --green:#4a9e6a;--green-bg:#0e1a14;
  --red:#9e4a4a;--red-bg:#1a0e0e;
  --amber:#c8883a;--amber-bg:#1e1408;
  --chrom:#d4c898;--step:#98c4d4;--triad:#a8d4b8;
  --r:12px;--rs:8px;--sh:0 2px 16px rgba(0,0,0,.45);
}
.trichord-app.light{
  --bg:#f4f2ed;--bg2:#ffffff;--bg3:#ece9e2;
  --border:#d4d0c8;--border2:#bcb8b0;
  --text:#1a1814;--text2:#5a5650;--text3:#9a9690;
  --gold:#9a7830;--gold-bg:#fdf8ee;
  --green:#2a7a48;--green-bg:#eef8f2;
  --red:#8a2a2a;--red-bg:#fdf0f0;
  --amber:#9a5818;--amber-bg:#fdf4ea;
  --sh:0 2px 12px rgba(0,0,0,.1);
}
.trichord-app *, .trichord-app *::before, .trichord-app *::after {box-sizing:border-box;margin:0;padding:0}
.trichord-app {-webkit-text-size-adjust:100%}
.trichord-app {font-family:Georgia,serif;background:var(--bg);color:var(--text);transition:background .2s,color .2s;border-radius:var(--r);box-shadow:var(--sh);margin:0 auto 2.5rem;max-width:760px}
/* Defensive button reset -- WordPress themes commonly set their own button
   color/background/white-space defaults with enough specificity to leak
   through. These properties are reset !important specifically because we
   are countering an unknown, unpredictable parent theme stylesheet, not
   fighting our own rules. */
.trichord-app button {
  all: unset;
  box-sizing: border-box;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  white-space: normal !important;
  text-align: left;
}
.trichord-app .app {display:flex;flex-direction:column}

/* Header */
.trichord-app .hdr {display:flex;align-items:center;justify-content:space-between;padding:.8rem 1.1rem;border-bottom:1px solid var(--border);gap:.6rem;flex-shrink:0}
.trichord-app .hdr-title {flex:1;min-width:0}
.trichord-app .hdr-title .eyebrow {font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--text3);font-weight:400;font-family:'Courier New',monospace}
.trichord-app .hdr-title .app-title {font-size:clamp(14px,4vw,18px);font-weight:400;color:var(--text);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trichord-app .hdr-actions {display:flex;gap:.4rem;flex-shrink:0}
.trichord-app .icon-btn {width:33px;height:33px;border-radius:50%;border:1px solid var(--border2);color:var(--text2);display:flex;align-items:center;justify-content:center;font-size:14px;transition:all .15s;background:var(--bg2)}
.trichord-app .icon-btn:hover {border-color:var(--gold);color:var(--gold)}

/* Tabs */
.trichord-app .tabs {display:flex;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none;flex-shrink:0}
.trichord-app .tabs::-webkit-scrollbar {display:none}
.trichord-app .tab {padding:.55rem .95rem;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);border-bottom:2px solid transparent;white-space:nowrap;font-family:'Courier New',monospace;transition:all .15s;flex-shrink:0}
.trichord-app .tab:hover {color:var(--text2)}
.trichord-app .tab.on {color:var(--gold);border-bottom-color:var(--gold)}

/* Panels */
.trichord-app .panel {display:flex;flex-direction:column}
.trichord-app .panel.hidden {display:none}
.trichord-app .inner {padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.9rem;max-width:680px;margin:0 auto;width:100%;flex:1}

/* Section label */
.trichord-app .slbl {font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);font-family:'Courier New',monospace;margin-bottom:.3rem}

/* Settings bar */
.trichord-app .settings-bar {background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:.65rem .85rem;display:flex;flex-direction:column;gap:.55rem}
.trichord-app .settings-row {display:flex;gap:.3rem;align-items:center;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.trichord-app .settings-row::-webkit-scrollbar {display:none}
.trichord-app .settings-label {font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);font-family:'Courier New',monospace;min-width:40px;flex-shrink:0}

/* Chips */
.trichord-app .chip {padding:.24rem .55rem;font-size:11px;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--border2);border-radius:20px;color:var(--text3);font-family:'Courier New',monospace;transition:all .15s;background:var(--bg);white-space:nowrap;flex-shrink:0}
.trichord-app .chip:hover {border-color:var(--text2);color:var(--text2)}
.trichord-app .chip.fc.on {border-color:var(--chrom);color:var(--chrom);background:#1e1c10}
.trichord-app .chip.fs.on {border-color:var(--step);color:var(--step);background:#0e1820}
.trichord-app .chip.ft.on {border-color:var(--triad);color:var(--triad);background:#0e1814}
.trichord-app .chip.pm.on {border-color:#8a7a9e;color:#c8b8e8;background:#1c1820}
.trichord-app .chip.md.on {border-color:var(--amber);color:#e8c8a8;background:var(--amber-bg)}
.trichord-app .chip.rt.on {border-color:#7a9e8a;color:#a8d4b8;background:#0e1a14}
.trichord-app.light .chip.rt.on {background:#eef8f2;color:var(--green);border-color:var(--green)}
.trichord-app.light .chip.fc.on {background:#fdf9e8}
.trichord-app.light .chip.fs.on {background:#eef6fa}
.trichord-app.light .chip.ft.on {background:#eef8f2}
.trichord-app.light .chip.pm.on {background:#f0eef8;color:#5a4a7e;border-color:#8a7aae}
.trichord-app.light .chip.md.on {background:var(--amber-bg);color:var(--amber)}

/* Mode note */
.trichord-app .mode-note {font-size:11px;color:var(--amber);font-family:'Courier New',monospace;padding:.3rem .5rem;border-radius:6px;background:var(--amber-bg);border:1px solid var(--amber);line-height:1.5}
.trichord-app.light .mode-note {color:var(--amber)}

/* Question zone */
.trichord-app .qzone {background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:1.3rem 1.1rem;display:flex;flex-direction:column;align-items:center;gap:.75rem;box-shadow:var(--sh)}
.trichord-app .qprompt {font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3);font-family:'Courier New',monospace;text-align:center}
.trichord-app .play-btn {width:66px;height:66px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold);font-size:24px;display:flex;align-items:center;justify-content:center;transition:all .15s;background:var(--bg3);flex-shrink:0}
.trichord-app .play-btn:hover, .trichord-app .play-btn.on {background:var(--gold);color:var(--bg)}
.trichord-app .play-btn:active {transform:scale(.94)}

/* Pips */
.trichord-app .pips {display:flex;gap:7px}
.trichord-app .pip {width:10px;height:10px;border-radius:50%;border:1.5px solid var(--border2);background:transparent;transition:all .2s}
.trichord-app .pip.wrong {background:var(--red);border-color:var(--red)}
.trichord-app .pip.reveal {background:var(--amber);border-color:var(--amber)}

/* Answer grid */
.trichord-app .agrid {display:grid;gap:.45rem;grid-template-columns:repeat(auto-fill,minmax(138px,1fr))}
@media(max-width:380px){.trichord-app .agrid{grid-template-columns:repeat(2,1fr)}}
.trichord-app .acard {background:var(--bg2);border:1px solid var(--border);border-radius:var(--rs);padding:.7rem .85rem;text-align:left;transition:border-color .12s,background .12s;cursor:pointer;width:100%;white-space:normal;overflow-wrap:break-word}
.trichord-app .acard:hover:not(.disabled):not(.correct):not(.wrong-pick):not(.reveal) {border-color:var(--text2);background:var(--bg3)}
.trichord-app .acard.disabled {cursor:default;opacity:.4;pointer-events:none}
.trichord-app .acard.correct {border-color:var(--green);background:var(--green-bg);cursor:default;pointer-events:none}
.trichord-app .acard.wrong-pick {border-color:var(--red);background:var(--red-bg);cursor:default;pointer-events:none}
.trichord-app .acard.reveal {border-color:var(--amber);background:var(--amber-bg);cursor:default;pointer-events:none}
.trichord-app .acard .apf {font-size:14px;font-family:'Courier New',monospace;font-weight:bold;white-space:normal}
.trichord-app .acard .afor {font-size:10px;color:var(--text3);letter-spacing:.07em;text-transform:uppercase;margin-top:2px;white-space:normal}
.trichord-app .acard .anm {font-size:11px;color:var(--text2);margin-top:3px;font-family:'Courier New',monospace;line-height:1.3;white-space:normal}

/* Feedback */
.trichord-app .fb {border-radius:var(--rs);padding:.8rem .95rem;font-size:13px;line-height:1.65;border:1px solid transparent}
.trichord-app .fb.correct {background:var(--green-bg);border-color:var(--green);color:#8ad4a8}
.trichord-app .fb.wrong {background:var(--red-bg);border-color:var(--red);color:#d49898}
.trichord-app .fb.revealed {background:var(--amber-bg);border-color:var(--amber);color:#e8c898}
.trichord-app.light .fb.correct {color:var(--green)}
.trichord-app.light .fb.wrong {color:var(--red)}
.trichord-app.light .fb.revealed {color:var(--amber)}
.trichord-app .hidden {display:none}

/* Buttons */
.trichord-app .action-row {display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.trichord-app .btn {padding:.58rem 1.25rem;border-radius:var(--rs);font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-family:'Courier New',monospace;border:1px solid var(--border2);color:var(--text2);background:var(--bg2);transition:all .15s}
.trichord-app .btn:hover {border-color:var(--text2);color:var(--text)}
.trichord-app .btn.primary {border-color:var(--gold);color:var(--gold);background:var(--gold-bg)}
.trichord-app .btn.primary:hover {background:var(--gold);color:var(--bg)}

/* Score bar */
.trichord-app .sbar {display:flex;border-top:1px solid var(--border);font-family:'Courier New',monospace;font-size:10px;color:var(--text3);flex-shrink:0}
.trichord-app .sbar-item {flex:1;padding:.55rem .3rem;text-align:center;border-right:1px solid var(--border);letter-spacing:.05em}
.trichord-app .sbar-item:last-child {border-right:none}
.trichord-app .sbar-item span {display:block;font-size:18px;color:var(--gold);margin-bottom:1px}

/* ── Assessment ── */
.trichord-app .assess-btn {display:block;width:100%;padding:.55rem;border-radius:var(--rs);font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-family:'Courier New',monospace;border:1px solid var(--border2);color:var(--text2);background:var(--bg2);transition:all .15s;text-align:center}
.trichord-app .assess-btn:hover {border-color:var(--gold);color:var(--gold)}
.trichord-app .assess-btn.ready {border-color:var(--gold);color:var(--gold);background:var(--gold-bg)}
.trichord-app .assess-panel {background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:1rem;display:flex;flex-direction:column;gap:.75rem}
.trichord-app .assess-panel .assess-heading {font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-family:'Courier New',monospace;font-weight:400}
.trichord-app .assess-overall {font-family:'Courier New',monospace;font-size:13px;color:var(--text);padding:.5rem .6rem;background:var(--bg3);border-radius:var(--rs)}
.trichord-app .assess-overall span {color:var(--gold);font-size:18px;margin-right:.4rem}
.trichord-app .assess-list {display:flex;flex-direction:column;gap:.4rem}
.trichord-app .assess-row {display:flex;align-items:center;gap:.5rem;font-family:'Courier New',monospace;font-size:11px}
.trichord-app .assess-forte {min-width:38px;color:var(--text3);font-size:10px}
.trichord-app .assess-pf {min-width:72px;color:var(--text)}
.trichord-app .assess-bar-wrap {flex:1;height:8px;background:var(--bg3);border-radius:4px;overflow:hidden}
.trichord-app .assess-bar {height:100%;border-radius:4px;transition:width .4s}
.trichord-app .assess-pct {min-width:32px;text-align:right;color:var(--text2);font-size:10px}
.trichord-app .assess-n {min-width:28px;text-align:right;color:var(--text3);font-size:10px}
.trichord-app .assess-tag {font-size:9px;padding:1px 5px;border-radius:8px;letter-spacing:.06em;text-transform:uppercase}
.trichord-app .assess-tag.weak {background:var(--red-bg);color:var(--red);border:1px solid var(--red)}
.trichord-app .assess-tag.ok {background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber)}
.trichord-app .assess-tag.good {background:var(--green-bg);color:var(--green);border:1px solid var(--green)}
.trichord-app .assess-actions {display:flex;gap:.5rem;flex-wrap:wrap}
.trichord-app .assess-rec {font-family:'Courier New',monospace;font-size:11px;color:var(--text2);line-height:1.7;padding:.5rem .6rem;background:var(--bg3);border-radius:var(--rs)}
.trichord-app .assess-rec b {color:var(--text)}

/* Browse */
.trichord-app .tgrid {display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:.45rem}
.trichord-app .tpill {background:var(--bg2);border:1px solid var(--border);border-radius:var(--rs);padding:.7rem .85rem;cursor:pointer;transition:all .15s;width:100%;text-align:left}
.trichord-app .tpill:hover {border-color:var(--text2)}
.trichord-app .tpill.on {border-color:var(--gold);background:var(--gold-bg)}
.trichord-app .tpill .tpf {font-family:'Courier New',monospace;font-size:13px;font-weight:bold}
.trichord-app .tpill .tfor {font-size:10px;color:var(--text3);font-family:'Courier New',monospace}
.trichord-app .tpill .tnm {font-size:10px;color:var(--text2);margin-top:3px;letter-spacing:.03em}
.trichord-app .chip-row {display:flex;gap:.35rem;flex-wrap:wrap;align-items:center}
.trichord-app .detail-box {background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:.9rem 1rem;font-family:'Courier New',monospace;font-size:12px;color:var(--text2);line-height:2}
.trichord-app .detail-box b {color:var(--gold)}
.trichord-app .info-box {background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:1rem 1.1rem;font-family:'Courier New',monospace;font-size:12px;color:var(--text2);line-height:2.1}