/* =======styles/tuner.css======== */

/* ======== بخش: ریشه و متغیرهای تیونر ======== */
.tuner {
  --t-gap: 12px;
  --t-pad: 14px;
  --t-radius: 16px;
  --t-shadow: var(--shadow, 0 10px 26px rgba(30,25,15,.08));
  --t-ink: var(--clr, var(--ink, #222));
  --t-bg: var(--paper, #fff);
  --t-muted: var(--muted, #f3f3f3);
  --t-accent: var(--accent, #00a693);
  --t-warn: #ff9a00;
  --t-err: #d93025;
  --t-good: #20a35a;
  --t-grid: minmax(260px, 1fr) minmax(300px, 1.2fr);
  color: var(--t-ink);
}
.tuner .panel__title,
.tuner .panel__subtitle { margin: 0 0 12px 0; }






/* ======== بخش: تولبار بالا ======== */
.tuner__toolbar {
  display: flex;
  flex-direction: column;
  gap: var(--t-gap);
  background: var(--t-bg);
  border: 1px solid color-mix(in oklab, var(--t-ink) 15%, transparent);
  border-radius: var(--t-radius);
  padding: var(--t-pad);
  box-shadow: var(--t-shadow);
  margin-bottom: 18px;
}
.tuner__toolbar .row { display: flex; gap: var(--t-gap); align-items: center; }
.tuner__toolbar .wrap { flex-wrap: wrap; }
.tuner__toolbar .spacer { flex: 1; }
.tuner__toolbar .split { display: inline-flex; gap: 8px; align-items: center; }
.tuner__toolbar .lbl { font-size: .9rem; opacity: .8; white-space: nowrap; }
.tuner__toolbar .calc__select,
.tuner__toolbar .calc__input,
.tuner__toolbar input[type="number"] {
  height: 36px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--t-ink) 15%, transparent);
  background: var(--t-muted);
  padding: 0 10px;
}
.tuner__toolbar input[type="range"] { width: 160px; accent-color: var(--t-accent); }
.tuner__toolbar output { min-width: 56px; text-align: end; font-variant-numeric: tabular-nums; }
.tuner__toolbar .btns { display: inline-flex; gap: 4px; }
.tuner__toolbar .chip { height: 36px; }
.tuner__toolbar .chip--primary {
  background: var(--t-accent);
  color: #fff;
  border-color: var(--t-accent);
}
#tuneStopBtn[hidden] { display: none !important; }






/* ======== بخش: تب‌های داخلی تیونر ======== */
.tuner__modes {
  display: flex;
  gap: 8px;
  margin: 0 0 10px 0;
}
.tuner__modes .tab {
  border: 1px solid color-mix(in oklab, var(--t-ink) 15%, transparent);
  background: var(--t-bg);
  color: var(--t-ink);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.tuner__modes .tab.is-active {
  background: color-mix(in oklab, var(--t-accent) 12%, var(--t-bg));
  border-color: color-mix(in oklab, var(--t-accent) 40%, transparent);
  color: color-mix(in oklab, var(--t-ink) 100%, #000);
}
.tuner__panels { display: block; }
.tpanel { display: none; }
.tpanel.is-active { display: block; }






/* ======== بخش: گرید نمایش کروماتیک ======== */
.grid2 {
  display: grid;
  gap: 16px;
  grid-template-columns: var(--t-grid);
  align-items: stretch;
}
.readouts {
  display: grid;
  gap: 12px;
  grid-auto-rows: min-content;
  background: var(--t-bg);
  border-radius: var(--t-radius);
  border: 1px solid color-mix(in oklab, var(--t-ink) 15%, transparent);
  padding: 16px;
  box-shadow: var(--t-shadow);
}
.noteBig {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Vazirmatn", sans-serif;
  font-weight: 800;
  font-size: clamp(42px, 6.5vw, 72px);
  line-height: 1;
  letter-spacing: -.02em;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.noteBig #noteOct { font-weight: 600; font-size: .5em; opacity: .8; }
.hz, .cents { font-variant-numeric: tabular-nums; font-weight: 600; }
.hz { font-size: 1.2rem; opacity: .9; }
.cents { font-size: 1.1rem; }
.status { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.led {
  --led-bg: color-mix(in oklab, var(--t-good) 16%, var(--t-bg));
  --led-dot: var(--t-good);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 999px; font-size: .85rem;
  background: var(--led-bg);
  border: 1px solid color-mix(in oklab, var(--led-dot) 40%, transparent);
}
.led::before {
  content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%;
  background: var(--led-dot);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--led-dot) 25%, transparent);
}
.led--warn { --led-bg: color-mix(in oklab, var(--t-warn) 16%, var(--t-bg)); --led-dot: var(--t-warn); }
.led--err  { --led-bg: color-mix(in oklab, var(--t-err) 15%, var(--t-bg));  --led-dot: var(--t-err); }






/* ======== بخش: ویژوال‌ها (استروب/نیدل/ویو/اسپکتروم) ======== */
.visuals {
  display: grid;
  gap: 12px;
}
.visuals canvas {
  width: 100%;
  background: var(--t-bg);
  border-radius: var(--t-radius);
  border: 1px solid color-mix(in oklab, var(--t-ink) 15%, transparent);
  box-shadow: var(--t-shadow);
}
.strobe { aspect-ratio: 10 / 3; }
.needle { aspect-ratio: 4 / 3; }
.wave   { aspect-ratio: 5 / 2; }
.fft    { aspect-ratio: 5 / 2; }






/* ======== بخش: گزینه‌های دقت/الگوریتم ======== */
.tune-opts {
  margin-top: 12px;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  background: var(--t-bg);
  border: 1px solid color-mix(in oklab, var(--t-ink) 15%, transparent);
  border-radius: var(--t-radius);
  padding: 12px;
  box-shadow: var(--t-shadow);
}
.tune-opts .split { display: inline-flex; gap: 8px; align-items: center; }
#avgRange { width: 160px; accent-color: var(--t-accent); }
#avgOut { min-width: 50px; text-align: end; font-variant-numeric: tabular-nums; }






/* ======== بخش: سازها و سیم‌ها ======== */
#tp-instrument .strings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
#tp-instrument .string {
  display: grid;
  grid-template-columns: 1fr auto 12px;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--t-bg);
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--t-ink) 15%, transparent);
  text-align: start;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
#tp-instrument .string:hover { transform: translateY(-1px); border-color: color-mix(in oklab, var(--t-accent) 40%, transparent); }
#tp-instrument .string:active { transform: translateY(0); }
#tp-instrument .string .nm { font-weight: 700; letter-spacing: .02em; }
#tp-instrument .string .hz { font-variant-numeric: tabular-nums; opacity: .8; }
#tp-instrument .string .led {
  justify-self: end;
  inline-size: 12px; block-size: 12px; padding: 0; border-radius: 50%;
  border-width: 0; background: color-mix(in oklab, var(--t-ink) 20%, transparent);
}
#tp-instrument .string[data-state="in"]  .led { background: var(--t-good); }
#tp-instrument .string[data-state="low"] .led { background: var(--t-warn); }
#tp-instrument .string[data-state="high"].led,
#tp-instrument .string[data-state="high"] .led { background: var(--t-err); }






/* ======== بخش: پنل انتونیشن ======== */
#tp-intonation .grid2 { grid-template-columns: minmax(260px, .9fr) 1.3fr; }
.inton-readouts, .harm-ctrls {
  background: var(--t-bg);
  border-radius: var(--t-radius);
  border: 1px solid color-mix(in oklab, var(--t-ink) 15%, transparent);
  padding: 12px;
  box-shadow: var(--t-shadow);
}
.inton-readouts .stats { margin-top: 8px; display: grid; gap: 6px; }
#intonCanvas { width: 100%; aspect-ratio: 16/9; background: var(--t-bg); border-radius: var(--t-radius); border: 1px solid color-mix(in oklab, var(--t-ink) 15%, transparent); box-shadow: var(--t-shadow); }






/* ======== بخش: پنل هارمونیک ======== */
.harm-ctrls .row { display: flex; gap: 8px; align-items: center; }
.harm-list { margin-top: 10px; display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.harm-list .hist__row,
.harm-list .hrow {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  background: var(--t-muted);
  border-radius: 10px;
  padding: 6px 8px;
  font-variant-numeric: tabular-nums;
}
#harmCanvas { width: 100%; aspect-ratio: 16/9; background: var(--t-bg); border-radius: var(--t-radius); border: 1px solid color-mix(in oklab, var(--t-ink) 15%, transparent); box-shadow: var(--t-shadow); }






/* ======== بخش: تاریخچه ======== */
.tuner__history {
  margin-top: 16px;
  background: var(--t-bg);
  border-radius: var(--t-radius);
  border: 1px solid color-mix(in oklab, var(--t-ink) 15%, transparent);
  padding: 12px;
  box-shadow: var(--t-shadow);
}
.tuner__history .row { display: flex; gap: 10px; align-items: center; }
.hist__list {
  margin-top: 10px;
  display: grid;
  gap: 6px;
  max-height: 240px;
  overflow: auto;
}
.hist__row {
  display: grid;
  grid-template-columns: 70px 60px 60px 1fr;
  gap: 8px;
  align-items: center;
  background: var(--t-muted);
  border-radius: 10px;
  padding: 6px 10px;
  font-variant-numeric: tabular-nums;
}
.hist__row .t { opacity: .75; }
.hist__row .n { font-weight: 700; }
.hist__row .c { text-align: end; }
.hist__row .f { text-align: end; opacity: .9; }






/* ======== بخش: دیالوگ انتخاب ورودی ======== */
.dlg {
  border: none;
  border-radius: 14px;
  padding: 0;
  width: min(640px, 92vw);
  background: var(--t-bg);
  color: var(--t-ink);
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
}
.dlg::backdrop { background: color-mix(in oklab, var(--t-ink) 60%, transparent); backdrop-filter: blur(2px); }
.dlg__body { padding: 16px; display: grid; gap: 12px; }
.dlg__list { display: grid; gap: 8px; max-height: 280px; overflow: auto; }
.dev {
  display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--t-ink) 15%, transparent);
  background: var(--t-muted);
}
.dev input { margin-inline-end: 6px; }
.dev__name { font-weight: 600; }
.dev__id { opacity: .6; font-size: .85rem; user-select: all; }
.dlg__menu { display: flex; gap: 8px; justify-content: end; }






/* ======== بخش: پیام خطا ======== */
#tuneError {
  margin-top: 12px;
  background: color-mix(in oklab, var(--t-err) 6%, var(--t-bg));
  border: 1px solid color-mix(in oklab, var(--t-err) 40%, transparent);
  color: color-mix(in oklab, var(--t-err) 80%, var(--t-ink));
  border-radius: 12px;
  padding: 10px 12px;
}






/* ======== بخش: دسترس‌پذیری و حالت‌ها ======== */
@media (max-width: 960px) {
  .grid2 { grid-template-columns: 1fr; }
  #tp-intonation .grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hist__row { grid-template-columns: 56px 56px 56px 1fr; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tuner__modes .tab,
  #tp-instrument .string { transition: none !important; }
}

/* فوکوس دیداری کوتاه */
.tuner :is(button, .chip, .tab, select, input):focus-visible {
  outline: 2px solid color-mix(in oklab, var(--t-accent) 60%, #000);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--t-accent) 25%, transparent);
}






/* ======== بخش: کلاس‌های کمکی ======== */
.chip {
  appearance: none;
  background: var(--t-muted);
  color: var(--t-ink);
  border: 1px solid color-mix(in oklab, var(--t-ink) 15%, transparent);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.chip:hover { transform: translateY(-1px); border-color: color-mix(in oklab, var(--t-accent) 40%, transparent); }
.chip:active { transform: translateY(0); }
.icon-btn {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--t-ink) 15%, transparent);
  background: var(--t-muted); cursor: pointer;
}
.row { display: flex; align-items: center; }
.gap { gap: 10px; }
.split .calc__select { min-width: 120px; }





/* Advanced panel slide */
.tuner__adv {
  overflow: hidden;
  transition: max-height 220ms ease, opacity 220ms ease, margin-top 180ms ease;
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: .75rem;
  max-height: 1200px;
}
.tuner__adv[hidden] {
  display: grid !important;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
}

/* Inside layout */
.tuner__adv-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
}

.tuner__adv-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-inline: 12px;
}

.tuner__adv-caret {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: color-mix(in oklab, var(--t-muted) 80%, transparent);
  color: color-mix(in oklab, var(--t-ink) 80%, #000);
  transition: transform 200ms ease;
}

.tuner__adv-caret svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

#advToggle[aria-expanded="true"] .tuner__adv-caret {
  transform: rotate(180deg);
}

.tuner__adv-card {
  background: var(--t-bg);
  border-radius: var(--t-radius);
  border: 1px solid color-mix(in oklab, var(--t-ink) 15%, transparent);
  box-shadow: var(--t-shadow);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.tuner__adv-title {
  margin: 0;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 8px;
  color: color-mix(in oklab, var(--t-ink) 90%, #000);
}

.tuner__adv-fields {
  display: grid;
  gap: 10px;
}

.tuner__adv .split {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: color-mix(in oklab, var(--t-bg) 80%, var(--t-muted));
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--t-ink) 12%, transparent);
  min-height: auto;
  height: 100%;
}

.tuner__adv .lbl {
  display: block;
  opacity: .85;
  font-weight: 700;
  line-height: 1.4;
  white-space: normal;
}

.tuner__adv .split__controls {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
}

.tuner__adv .split__controls--buttons {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  align-items: center;
}

.tuner__adv select,
.tuner__adv input[type="number"] {
  flex: 1 1 160px;
  min-width: 0;
  width: 100%;
  height: 38px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--t-ink) 15%, transparent);
  background: var(--t-bg);
  padding: 0 10px;
}

.tuner__adv .split--switch .split__controls,
.tuner__adv .split__controls--switch {
  justify-content: center;
  align-items: center;
}

.tuner__adv .switch input[type="checkbox"] {
  inline-size: 52px;
  block-size: 30px;
}

.tuner__adv .switch input[type="checkbox"]::after {
  inline-size: 22px;
  block-size: 22px;
  left: 4px;
}

.tuner__adv .switch input[type="checkbox"]:checked::after {
  left: calc(100% - 4px - 22px);
}

.tuner__adv .split__controls .icon-btn { width: 38px; height: 38px; }

.tuner__adv .split--action .split__controls { justify-content: flex-start; }

/* Toolbar small tweaks */
.tuner__toolbar .split { display: inline-flex; align-items: center; gap: .5rem; }

@media (max-width: 900px) {
  .grid2 { grid-template-columns: 1fr; }
  .tuner__toolbar .row { flex-wrap: wrap; }
  .tuner__toolbar .split { flex: 1 1 240px; min-width: min(320px, 100%); }
  .tuner__adv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tuner__adv .split { padding: 10px; }
}

@media (min-width: 901px) and (max-width: 1280px) {
  .tuner__adv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* === Koron/Sori icon inline just like sharp/flat === */
.noteBig {
  font-family: "Noto Music", "Inter", "Vazirmatn", sans-serif;
}
.noteBig .accIcon {
  display: inline-block;
  line-height: 1;
}
.noteBig .accIcon svg {
  height: 1em;          /* هم‌قد گلیف فونت (♯/♭) */
  width: auto;          /* نسبت تصویر حفظ شود */
  vertical-align: -0.08em; /* ریزتنظیم خط مبنا تا هم‌تراز گلیف باشد */
}
/* کمی فاصلهٔ دوطرف مثل فاصلهٔ گلیف‌ها */
.noteBig #noteName + .accIcon { margin-left: 0.06em; }
.noteBig .accIcon + #noteOct   { margin-left: 0.02em; }



#tp-chromatic .readouts {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#tp-chromatic .noteBig {
  font-weight: 800;
  line-height: 1;
  /* اندازهٔ منعطف بین موبایل و دسکتاپ */
  font-size: clamp(28px, 6vw, 56px);
  letter-spacing: .5px;
}

#tp-chromatic .tuner__gauge { width: min(640px, 96%); }

#tp-chromatic #tunerSvg {
  width: 100%;
  height: auto;
  display: block;
}

#tp-chromatic .hz,
#tp-chromatic .cents {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.tuner__gauge{display:grid;place-items:center;margin-block:8px 16px;width:100%;overflow:hidden}
.tuner__gauge svg{max-width:600px;width:100%;max-width:100%;height:auto}







/* سایز کلی (ترجیحی) */
#noteAccIcon { font-size: 0.8em; }

/* یا مستقیماً خود svg */
#noteAccIcon svg { width: 0.8em; height: 0.8em; }

/* برای هم‌خطی بهتر با حروف نت */
#noteAccIcon { vertical-align: -0.1em; line-height: 1; }


/* تیونر هم فاصله داشته باشد */
#panel-tuner{
  padding-bottom: max(var(--bottom-bar-h), env(safe-area-inset-bottom));
}