/* ===== FONTS ===== */
@font-face{
  font-family:"MusAnalysis";
  src:url("https://linoguerreiro.com/wp-content/uploads/2026/03/MusAnalysis.otf") format("opentype");
  font-display:swap;
}

/* ===== BASE ===== */
:root{
  --font-base:"MusAnalysis";

  --bg:#ffffff; --text:#111314; --muted:#6e7379; --border:#e6e9ec;
  --accent:#F5C84C; --accent-2:#12B3B6; --ring:#FFF8E6;
  --radius:12px; --shadow:0 4px 12px rgba(0,0,0,.06);
  --content-max:1600px; --gap:18px;

  --ui-left-scale:1.25;
}

/* ===== RESET ===== */
*{ box-sizing:border-box; }

/* 🔥 fonte única global */
html,body,button,input,select,textarea{
  font-family:var(--font-base) !important;
}

/* ===== LAYOUT ===== */
body{
  margin:0;
  color:var(--text);
  background:var(--bg);
  font-size:15px;
  line-height:normal;
}

.app{
  width:100%;
  max-width:var(--content-max);
  margin-inline:auto;
  padding:16px;
  display:grid;
  gap:var(--gap);
  grid-template-columns: repeat(2, minmax(0,1fr));
}

.card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.panel{
  padding:16px;
  display:grid;
  gap:12px;
}

.top-controls{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}

/* Escala esquerda */
.card.left{
  font-size:calc(15px * var(--ui-left-scale));
}

/* ===== BOTÕES ===== */
.chip,.small-toggle,.img-toggle{
  border:2px solid var(--border);
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  padding:10px 14px;
  min-height:40px;
  font-weight:800;
  letter-spacing:.2px;
}

.card.left .chip,
.card.left .small-toggle{
  font-size:calc(15px * var(--ui-left-scale));
  padding:calc(10px * var(--ui-left-scale)) calc(14px * var(--ui-left-scale));
  min-height:calc(40px * var(--ui-left-scale));
}

.card.left .chip.small{
  font-size:calc(12px * var(--ui-left-scale));
  padding:calc(8px * var(--ui-left-scale)) calc(12px * var(--ui-left-scale));
  min-height:calc(36px * var(--ui-left-scale));
}

.card.left .small-toggle.play{
  padding:calc(10px * var(--ui-left-scale)) calc(16px * var(--ui-left-scale));
}

.chip.is-on{
  background:#FFFDF4;
  border-color:var(--accent);
  box-shadow:0 4px 12px rgba(245,200,76,.28);
  color:#6b4f00;
}

.small-toggle.play{
  min-width:auto;
  border-color:var(--accent);
}

/* ===== ACC TOGGLE CLARO ===== */
#accPrefToggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-weight:900;
  letter-spacing:.5px;
}

/* estado sharp */
#accPrefToggle[data-pref="sharp"]{
  background:#eef7ff;
  border-color:#4da3ff;
  color:#0b3c66;
}

/* estado flat */
#accPrefToggle[data-pref="flat"]{
  background:#fff6da;
  border-color:var(--accent);
  color:#6b4f00;
}

/* ===== KEYS ===== */
.keys-block{ display:grid; gap:8px; }

.keys-title{
  font-size:calc(14px * var(--ui-left-scale));
  color:var(--muted);
  font-weight:700;
  margin-bottom:4px;
}

.keys-line,.row{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:6px;
}

#romanRow .chip{ flex:0 0 auto; }

/* ===== TAG ===== */
.tag{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:color-mix(in srgb,var(--accent-2) 9%, #fff);
  border:2px solid var(--accent-2);
  color:#0b3c35;
  border-radius:999px;
  padding:10px 14px;
  font-weight:900;
  font-size:16px;
}

.card.left .tag{
  font-size:calc(16px * var(--ui-left-scale));
}

/* ===== STAFF ===== */
.staff-wrap{ padding:8px 10px; }
#staffChord{ width:100%; }

#staffChord canvas{
  display:block;
  width:100%;
  height:auto;
  margin-inline:auto;
}

/* ===== ANALYSIS ===== */
.accordes-block{
  display:grid;
  gap:12px;
  padding:14px;
  margin:0 10px 12px;
}

/* cards */
.accordes-block .line{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  padding:12px 16px;
  border-radius:12px;

  background:linear-gradient(180deg,#ffffff,#f8fafc);
  border:1px solid var(--border);

  transition:.2s ease;
}

/* hover equilibrado */
.accordes-block .line:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  border-color:color-mix(in srgb, var(--accent) 50%, var(--border));
}

/* linha lateral com presença mas mais suave */
.accordes-block .line::before{
  content:"";
  position:absolute;
  left:0;
  top:18%;
  height:64%;
  width:5px;
  border-radius:4px;
  background:linear-gradient(
    180deg,
    color-mix(in srgb, var(--accent) 80%, #fff),
    color-mix(in srgb, var(--accent-2) 80%, #fff)
  );
  opacity:.8;
}

/* labels (MAIORES) */
.accordes-block .lbl{
  font-size:20px;
  opacity:0.75;
  font-weight:700;
  letter-spacing:.4px;
}

/* valores */
.accordes-block span{
  font-size:32px;
  font-weight:900;
  letter-spacing:0.8px;

  color:#111314;
  transition:.2s ease;

  font-variant-numeric: lining-nums;
}

/* hover com cor mais controlada */
.accordes-block .line:hover span{
  color:color-mix(in srgb, var(--accent) 75%, #222);
  text-shadow:0 2px 4px rgba(0,0,0,.08);
}

/* micro detalhe: linha ativa */
.accordes-block .line:active{
  transform:scale(0.99);
}

/* ===== TOGGLE ===== */
#langToggle.img-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:4px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:9999px;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:.18s ease;
}

#langToggle.img-toggle:hover{
  background:color-mix(in srgb, #fff 88%, var(--accent) 12%);
}

#langToggle.img-toggle:active{
  transform:translateY(1px);
}

#langToggle.img-toggle:focus-visible{
  box-shadow:0 0 0 3px var(--ring);
}

/* ===== PILLS ===== */
.lang-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.9em;
  height:2.25em;
  padding:0 .9em;
  border:1.5px solid var(--accent);
  border-radius:9999px;
  background: radial-gradient(120% 140% at 50% 0%, #fff 0%, #fff7d9 85%, #fff3c1 100%);
  color:#5a4300;
  font-weight:700;
  font-size:13.5px;
  box-shadow:0 10px 22px rgba(245,200,76,.18);
}

.card.left .lang-pill{
  min-width:calc(2.9em * var(--ui-left-scale));
  height:calc(2.25em * var(--ui-left-scale));
  font-size:calc(13.5px * var(--ui-left-scale));
}

.lang-pill.is-pt{
  border-color:var(--accent-2);
  background:#eaffff;
  color:#0b3c35;
}

.lang-pill.is-en{
  border-color:var(--accent);
  background:#fff6da;
  color:#6b4f00;
}

/* ===== SVG ===== */
.img-toggle svg{
  display:block;
  height:2.25em;
}

.card.left .img-toggle svg{
  height:calc(2.25em * var(--ui-left-scale));
}

/* ===== INVERSÕES ===== */
#invRow{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:8px;
}

.inv-placeholder{
  visibility:hidden;
}

#minorTypeRow{
  display:none;
}

#minorTypeRow.is-visible{
  display:flex;
}

/* ===== FEEDBACK ===== */
.blink-once{ animation:blink-once .6s ease; }

@keyframes blink-once{
  40%{ box-shadow:0 0 0 6px rgba(245,200,76,.35); }
}

/* ===== DARK ===== */
.dark #langToggle.img-toggle{
  background:#0f1113;
  border-color:#2a2f36;
}

.dark .lang-pill{
  background:#111418;
  color:#f3f4f6;
}

/* ===== FULL WIDTH ===== */
.app-outer{
  width:100vw;
  margin-left:calc(50% - 50vw);
}


/* ============================================================
   MOBILE — OVERRIDE TOTAL (SEM MEXER NA BASE)
============================================================ */

@media (max-width:900px){
  .app{
    grid-template-columns:1fr;
    max-width:100%;
    padding:12px;
  }

  .card.left{
    font-size:12px;
  }

  .keys-line,
  .row{
    display:flex !important;
    flex-wrap:wrap !important;
    overflow-x:visible !important;
    gap:6px;
  }

#minorTypeRow{
  display:none !important;
}

#minorTypeRow.is-visible{
  display:flex !important;
}

  .keys-line .chip,
  .row .chip,
  #romanRow .chip{
    flex:0 1 auto !important;
    max-width:100%;
  }

  .app,
  .panel,
  .card{
    max-width:100%;
    overflow:hidden;
  }

  .chord-symbol,
  .roman,
  .british,
  .tag,
  .output,
  .note-line{
    max-width:100%;
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .output-line{
    display:flex;
    flex-wrap:wrap !important;
    gap:6px;
  }

  .output-line span{
    max-width:100%;
  }

.output,
.tag,
.chord-symbol,
.roman,
.british,
.note-line{
  font-size:clamp(11px, 3vw, 14px);
  line-height:1.2;
  letter-spacing:0.2px;
}

.accordes-block span{
  font-size:19px !important;
}

.accordes-block .lbl{
  font-size:13px !important;
}

@media (max-width:480px){

  .output,
  .tag,
  .chord-symbol,
  .roman,
  .british,
  .note-line{
    font-size:10.5px;
  }

  .accordes-block span{
    font-size:16px !important;
  }

}