/* =============================================================================
   styles.css — the fretboard's own sheet

   Tokens only, no literal colours: site.css defines them and dark.css redefines
   them, so one file serves both editions. Class names are prefixed `fb__`,
   `tface__` and so on rather than taken from the short generic pool — `.band`,
   `.card`, `.row` and friends already belong to site.css, and a collision there
   silently re-lays-out the whole page.
   ========================================================================== */

/* ------------------------------------------------------------- the controls */
.ctrls {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: .7rem 1rem;
    margin: 0 0 1rem;
}
.ctrls--tight { margin: .9rem 0 0; align-items: center; }
.ctrl { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.ctrl .lbl {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; opacity: .6;
}
.ctrl .lbl b { font-variant-numeric: tabular-nums; opacity: .9; }
.ctrl select, .ctrl input[type=range] { min-width: 9rem; }
.chk { display: flex; align-items: center; gap: .4rem; font-size: .84rem; }

/* ------------------------------------------------------------ the fretboard */
.fb {
    position: relative;
    display: flex; flex-direction: column;
    gap: 0;
    padding: 1.1rem 1.4rem 1.6rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--tint);
    overflow-x: auto;
    overflow-y: hidden;
    /* A neck narrower than this stops being readable before it stops fitting,
       so it scrolls inside its own box rather than widening the document —
       one unwrappable row widens every fixed element on the page with it. */
    min-height: 8rem;
}
.fb.is-left { transform: scaleX(-1); }
.fb.is-left .fb__dot, .fb.is-left .fb__nums span { transform: translate(-50%, -50%) scaleX(-1); }
.fb.is-left .fb__nums span { transform: translateX(-50%) scaleX(-1); }

.fb__lanes { position: absolute; inset: 1.1rem 1.4rem 1.6rem; pointer-events: none; }
.fb__fret {
    position: absolute; top: 0; bottom: 0; width: 1px;
    background: var(--line);
}
.fb__fret--nut { width: 3px; background: var(--ink); opacity: .5; }
.fb__inlay {
    position: absolute; top: 50%; width: 7px; height: 7px; margin-left: -3.5px;
    border-radius: 50%; background: var(--ink); opacity: .13; transform: translateY(-50%);
}
.fb__inlay--a { top: 28%; }
.fb__inlay--b { top: 72%; }

.fb__string {
    position: relative;
    height: 2.15rem;
    display: flex; align-items: center;
    min-width: 34rem;
}
/* the string itself */
.fb__string::before {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: var(--gauge, 1px);
    background: var(--ink); opacity: .28; transform: translateY(-50%);
}

.fb__dot {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 1.62rem; height: 1.62rem;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    color: inherit;
    font: inherit; font-size: .62rem; font-weight: 600; letter-spacing: -.01em;
    cursor: pointer; padding: 0;
    transition: transform .1s var(--ease), background .12s var(--ease);
}
.fb__dot:hover { background: var(--line); }
.fb__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fb__dot.is-on {
    background: var(--paper);
    border-color: var(--line);
    color: var(--ink);
}
.fb__dot.is-root {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
}
.fb__dot--open.is-on { border-style: dashed; }
.fb__dot.is-hit { animation: fbhit .34s var(--ease); }
@keyframes fbhit {
    0%   { transform: translate(-50%, -50%) scale(1.32); }
    100% { transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) { .fb__dot.is-hit { animation: none; } }

.fb__nums {
    position: relative; height: 1rem; min-width: 34rem; margin-top: .3rem;
}
.fb__nums span {
    position: absolute; transform: translateX(-50%);
    font-size: .64rem; opacity: .5; font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- the readout */
.readout {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1.2rem;
    margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--line);
}
.readout__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; min-width: 0; }
.readout__main b { font-size: 1.12rem; }
.readout__main span { font-size: .86rem; opacity: .78; }
.readout__main i { font-style: normal; opacity: .55; font-size: .74rem; }
.readout__main .sep { margin: 0 .38rem; opacity: .35; }
.readout__meta {
    display: flex; flex-wrap: wrap; gap: .2rem 1rem;
    font-size: .74rem; opacity: .58;
}

/* ----------------------------------------------------------------- the tuner */
.tface { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.tface__dial {
    position: relative; flex: 1 1 16rem; min-width: 12rem; height: 4.2rem;
    border: 1px solid var(--line); border-radius: 10px; background: var(--tint);
    overflow: hidden;
}
.tface__zero {
    position: absolute; left: 50%; top: .5rem; bottom: .5rem; width: 2px;
    margin-left: -1px; background: var(--ink); opacity: .35;
}
.tface__mark {
    position: absolute; top: 50%; transform: translateY(-50%);
    font-size: .95rem; opacity: .4;
}
.tface__mark--l { left: .7rem; }
.tface__mark--r { right: .7rem; }
.tface__needle {
    position: absolute; top: .35rem; bottom: .35rem; width: 4px; border-radius: 2px;
    left: 50%;
    /* --at runs -1 … +1 and is set from cents; the 42% keeps the needle inside
       the dial at full deflection instead of half-off its own edge. */
    transform: translateX(calc(-50% + var(--at, 0) * 42%));
    background: var(--ink); opacity: .5;
    transition: transform .07s linear, background .15s var(--ease);
}
.tface.is-live .tface__needle { opacity: 1; }
.tface.is-good .tface__needle { background: var(--accent); }
.tface.is-flat .tface__needle, .tface.is-sharp .tface__needle { background: var(--ink); }
.tface__read { flex: 0 0 auto; display: flex; flex-direction: column; gap: .1rem; min-width: 8rem; }
.tface__read b { font-size: 2rem; line-height: 1; letter-spacing: -.02em; }
.tface.is-good .tface__read b { color: var(--accent); }
.tface__read span { font-size: .84rem; font-variant-numeric: tabular-nums; opacity: .75; }
.tface__read i { font-style: normal; font-size: .72rem; opacity: .5; font-variant-numeric: tabular-nums; }

.err {
    margin: .8rem 0 0; padding: .7rem .85rem; font-size: .84rem;
    border: 1px solid var(--line); border-left: 3px solid var(--accent);
    border-radius: 8px; background: var(--tint);
}

@media (max-width: 40rem) {
    .fb { padding: .9rem .9rem 1.4rem; }
    .fb__lanes { inset: .9rem .9rem 1.4rem; }
    .ctrl select, .ctrl input[type=range] { min-width: 7.5rem; }
    /* 16px on any control a finger uses, or iOS Safari zooms the page on focus
       and carries the fixed chrome off-screen with it. */
    .ctrl select { font-size: 16px; }
}