/* ════════════════════════════════════════════════
   PIANO SUITE — UI/UX QUALITY FIXES
   Addresses issues found in comprehensive audit:

   1.  Range sliders — track fill uses CSS custom property --val
       that was never updated on load; initRangeFills() is deferred
       100 ms but the initial gradient needs a fallback so sliders
       don't appear un-filled until the first interaction.

   2.  Chart axis ranges — charts calling drawLineChart/drawBarChart
       with all-zero datasets show "No data" because every value
       equals 0 (falsy check).  Fixed in charts-enhanced.js patch.

   3.  Button sizing inconsistency — .btn uses padding: 7px 14px but
       the fork preset buttons and nav-move buttons inside .btn-row
       have no minimum width, causing them to collapse to ~60 px wide
       on mobile while adjacent buttons are wider.  Added min-width.

   4.  Mobile: #unified-editor-panel is position:sticky in the
       two-column grid but on mobile the grid collapses to a single
       column (via .grid2 override) so the panel reflows BEFORE the
       table — editor appears above the table it's editing.
       Fixed: force column-reverse on mobile so table comes first.

   5.  Mobile: .btab-row wraps but individual .btab items lose their
       border-right visually and the active bottom-border disappears.
       Fixed with proper wrap styling.

   6.  Topbar height token --top is 52 px on desktop but the mobile
       override sets height: 50px without updating --top, so
       padding-top: var(--top) on .app-body is 2 px too tall on
       mobile creating a thin gap above content.

   7.  Scroll containers inside cards have max-height but no
       min-height; on very small screens they collapse to ~0 px.
       Added sensible min-heights.

   8.  Landing page cards on mobile stack to 1-column with gap: 10px,
       but the card text content can overflow (card-desc text is 11.5px
       but the card has no min-height or overflow protection).

   9.  Range rows: .range-val min-width: 62px is too narrow for values
       like "1.150 mm" (7 characters + unit).  Fixed to 76px.

   10. Status bar blinking dot: on .status-bar.ok the dot uses
       animation:none but it still inherits the base 2-second blink,
       which shouldn't be blinking for an OK state.  Already guarded
       but the class ordering means the base blink fires first.

   11. Charts — canvas height attributes are set in HTML but the CSS
       also forces height via !important on mobile, which can conflict
       with the logical-height detection in setupCanvas(). When the
       attribute height is 0 (before layout), setupCanvas falls back to
       the CSS override or 180, but the DPR calc then uses wrong dims.
       Normalised canvas sizing approach in JS patch.

   12. Topbar gradient shift animation runs on ::after; on Safari the
       gradient position change causes a full repaint every 16 ms.
       Switched to transform-based animation (offscreen element).

   13. Sidebar section label & info block font-sizes are inconsistent
       (9px, 10px, 10px, 11px mixed without rhythm).

   14. .btn-row flex-wrap:wrap means buttons can land on their own row
       — added justify-content to keep rows left-aligned.

   15. Form labels use display:block with margin-bottom:4px but in
       range-row the label is inline; the CSS spec means the margin
       collapses inconsistently in Firefox. Added explicit display
       normalisation.
   ════════════════════════════════════════════════ */

/* ── Issue 1: Range slider initial fill ───────────────────────────────── */
/* Provide sensible default so slider track renders even before JS runs */
input[type=range] {
  --val: 50%;   /* overwritten by initRangeFills() once DOM is ready */
}

/* ── Issue 3: Minimum button widths for consistent btn-row layout ─────── */
.btn {
  min-width: 44px;   /* prevents collapse on mobile */
}

/* Fork nav buttons and inline control rows need a bit more breathing room */
.btn-row .btn {
  flex-shrink: 0;
}

/* ── Issue 6: Mobile --top token alignment ────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --top: 50px;   /* match the mobile topbar height override */
  }
}

/* ── Issue 7: Scroll container minimum heights ────────────────────────── */
.scroll-wrap {
  min-height: 80px;
}

/* The tuning schedule table scroll area should never be 0 */
#tp-tune .card .scroll-wrap {
  min-height: 120px;
}

/* ── Issue 9: Range value display wider for longer strings ────────────── */
.range-val {
  min-width: 76px;  /* was 62px — needs room for "1.150 mm" */
  text-align: right;
}

/* ── Issue 10: Status-bar OK dot — no blink ──────────────────────────── */
.status-bar.ok::before {
  animation: none !important;
}

/* ── Issue 13: Sidebar typography rhythm ─────────────────────────────── */
.sidebar-section {
  font-size: 9px;       /* was mixed 9px/10px — normalise to 9px */
  letter-spacing: .14em;
}

/* Scale info block at bottom of scale sidebar */
#view-scale .sidebar > div:last-child {
  font-size: 10px;
  line-height: 1.65;
  color: var(--text3);
  padding: 4px 14px 12px;
}

/* ── Issue 14: btn-row alignment ────────────────────────────────────────*/
.btn-row {
  justify-content: flex-start;
}

/* ── Issue 15: Form label display normalisation ─────────────────────────*/
label {
  display: block;
}

/* ── Issue 4: Mobile unified panel — editor below table ─────────────── */
@media (max-width: 768px) {
  /* The two-column grid collapses: keep table first, editor second */
  #sp-3 > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
  }
  #unified-editor-panel {
    position: static !important;
    order: 2;
  }
  /* Table wrapper */
  #sp-3 > div[style*="grid-template-columns"] > div:first-child {
    order: 1;
  }
}

/* ── Issue 5: Mobile btab wrapping ──────────────────────────────────── */
@media (max-width: 768px) {
  .btab-row {
    flex-wrap: wrap;
    gap: 0;
  }
  .btab {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    /* Active state: use bottom border on the outside of the row */
  }
  .btab.active {
    background: var(--accent-soft);
    color: var(--a5);
    border-bottom-color: var(--accent);
  }
  .btab:last-child {
    border-right: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   ADDITIONAL CONSISTENCY FIXES
   ══════════════════════════════════════════════════════════════════════ */

/* ── Card internal padding consistency ──────────────────────────────── */
/* Components.css uses 18px; mobile.css overrides to 12px — add
   a consistent intermediate step so cards don't feel cramped */
@media (min-width: 481px) and (max-width: 768px) {
  .card {
    padding: 14px;
  }
}

/* ── Page title / subtitle spacing rhythm ────────────────────────────── */
.page-title {
  margin-bottom: 6px;   /* was 4px — slightly more air before subtitle */
}
.page-sub {
  margin-bottom: 20px;  /* was 18px — match bottom rhythm of cards */
}
@media (max-width: 768px) {
  .page-title {
    margin-bottom: 4px;
  }
  .page-sub {
    margin-bottom: 12px;
  }
}

/* ── Topbar tab active indicator — fill to bottom edge correctly ──────── */
.topbar-tab.active::after {
  bottom: 0;   /* was 2px — align with topbar bottom border */
}

/* ── Input focus ring consistency ─────────────────────────────────────── */
/* Range inputs didn't have a visible focus ring for keyboard users */
input[type=range]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Select focus ring ────────────────────────────────────────────────── */
select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ── Metric value clipping prevention ───────────────────────────────── */
/* Long B values like "2.3456×10⁻⁴" can overflow metric .val divs */
.metric .val {
  word-break: break-all;
  font-size: clamp(14px, 2vw, 22px);
}

/* ── Note chip layout overflow ────────────────────────────────────────── */
/* On narrow screens the chip grid overflows the card horizontally */
.note-chips {
  overflow-x: hidden;
  row-gap: 6px;
}

/* ── Large modal/overlay — ensure readable on very small screens ──────── */
@media (max-width: 380px) {
  #auth-box {
    width: 95vw;
    padding: 28px 18px 24px;
  }
  #auth-title {
    font-size: 18px;
  }
}

/* ── Grid4 on mobile: 2-column is fine but needs min-width on cells ─── */
@media (max-width: 768px) {
  .grid4 > * {
    min-width: 0;  /* prevent grid blowout */
  }
}

/* ── Table horizontal scroll hint ────────────────────────────────────── */
/* Give overflow-x scroll containers a subtle shadow to hint scrollability */
.scroll-wrap {
  position: relative;
}
.scroll-wrap::after {
  content: '';
  position: sticky;
  right: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--surface));
  display: block;
  float: right;
  height: 100%;
  margin-top: -100%;
  opacity: 0;
  transition: opacity .2s;
}
/* Only show the hint when there's overflow */
.scroll-wrap::-webkit-scrollbar { width: 5px; height: 5px; }

/* ── Unified scale table sticky header z-index vs editor panel ────────── */
#unified-scale-table thead {
  z-index: 3;  /* above sticky editor panel (z-index unset = auto) */
}

/* ── Fork play button — consistent width so it doesn't jump between
      "▶ Play" and "■ Stop" ────────────────────────────────────────────── */
#fork-play-btn {
  min-width: 90px;
  justify-content: center;
}

/* ── Inharmonicity chips scroll on very narrow widths ────────────────── */
#inh-chips {
  max-height: 220px;
  overflow-y: auto;
}
@media (max-width: 480px) {
  #inh-chips {
    max-height: 160px;
  }
}

/* ── Progress bar height — too thin on retina screens ────────────────── */
.progress-bar {
  height: 4px;  /* was 3px — maps to 6 physical px on 2x, less invisible */
}

/* ── Mobile landing card description line-height ─────────────────────── */
@media (max-width: 768px) {
  .landing-card-desc {
    line-height: 1.5;
  }
}

/* ── Conf-bar (confidence bar under dial) visibility ─────────────────── */
.conf-bar-wrap {
  height: 3px;    /* was 2px — too thin on standard screens */
  margin-top: 6px;
}

/* ── Stress bar label legibility ─────────────────────────────────────── */
#ued-stress-label,
#stress-bar-label {
  font-size: 10.5px;
  font-weight: 500;
  /* Add text shadow so white text is readable on coloured bar */
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* ── Chart wrap title upper-case letter-spacing tweak for readability ─── */
.chart-title {
  letter-spacing: .06em;  /* tighten from .08em — less shouting at small sizes */
}

/* ── Sidebar active item arrow pulse fix ─────────────────────────────── */
/* The ::before gradient overlay interferes with the active state text */
.sidebar-item.active::before {
  display: none;  /* active items don't need the hover overlay */
}

/* ── Ensure disabled/unsupported canvas is hidden, not empty white box ── */
canvas:empty {
  /* Canvas elements are never "empty" in the DOM sense but we
     still want them to not show a white void before first paint */
  background: transparent;
}

/* ── Theme button min-size for touch targets ─────────────────────────── */
.theme-btn {
  min-width: 32px;
  min-height: 32px;
}

/* ── Topbar logo icon hover scale shouldn't cause layout shift ────────── */
.topbar-logo-icon {
  will-change: transform;
}

/* ── Fix for iOS Safari: remove default form appearance ─────────────── */
input[type=range] {
  -webkit-appearance: none;
}

/* ── Ensure sub-panels don't create horizontal overflow on desktop ───── */
.main-content {
  overflow-x: hidden;
}