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

   Tokens only. Every colour here is a var() that assets/css/site.css defines
   and assets/css/dark.css redefines, so this one file serves both editions and
   there is nothing to keep in step. A literal colour in this file is a bug in
   the dark edition that the paper edition cannot show you.

   Class names are all prefixed tn-. A property stylesheet shares a namespace
   with site.css, and site.css owns the short names: `.band` is a page SECTION
   on this site, not a frequency band, and defining it here would silently
   re-lay-out every section of the page in both editions.
   ========================================================================== */

/* ------------------------------------------------------------- the arm row */
.tn-arm {
    display: flex; flex-wrap: wrap; align-items: center; gap: .7rem;
}
.tn-arm .btn { font-size: .92rem; padding: .85rem 1.4rem; letter-spacing: .04em; }

/* The state line. One box, one sentence, and a colour that says how bad it is.
   It is never empty: a tuner with the microphone closed still has something
   true to say about why. */
.tn-state {
    margin: 0;
    font-size: .86rem; line-height: 1.55;
    color: var(--ink-77);
    padding: .7rem .9rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: 9px;
    background: var(--tint);
}
.tn-state--live { border-left-color: var(--free); }
.tn-state--wait { border-left-color: var(--unsure); }
.tn-state--warn { border-left-color: var(--unsure); color: var(--ink); }
.tn-state--err  { border-left-color: var(--taken); color: var(--ink); }
.tn-state[hidden] { display: none; }

/* ---------------------------------------------------------------- the face */
.tn-face {
    display: block; width: 100%;
    /* Capped and centred. The dial's radius is bounded by its height, so on a
       wide desktop panel an uncapped canvas is a small dial floating in the
       middle of a very long white box. */
    max-width: 30rem;
    margin-inline: auto;
    height: clamp(180px, 34vw, 260px);
    /* The canvas is a drawing, not a control: nothing in it is clickable and
       the readouts below carry every figure it shows. */
    touch-action: manipulation;
}

.tn-gate {
    min-height: 1.2em;   /* so the panel does not jump as the line comes and goes */
    text-align: center;
    margin: .1rem 0 0;
}

/* ------------------------------------------------------------ the readouts */
.tn-read {
    display: grid;
    gap: .5rem;
    justify-items: center;
    text-align: center;
    transition: opacity .18s var(--ease);
}
.tn-read.is-held { opacity: .55; }

.tn-big {
    display: flex; align-items: baseline; gap: .1rem;
    line-height: 1;
}
.tn-big b {
    font-size: clamp(3rem, 13vw, 5rem);
    font-weight: 200; letter-spacing: -.04em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.tn-big span {
    font-size: clamp(1.1rem, 4vw, 1.7rem);
    font-weight: 400; color: var(--ink-55);
    font-variant-numeric: tabular-nums;
}

.tn-verdict {
    margin: 0;
    font-size: .72rem; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-55);
    min-height: 1.2em;
}
.tn-verdict--good  { color: var(--free); }
.tn-verdict--flat,
.tn-verdict--sharp { color: var(--accent); }

/* The four figures, as a definition list because that is what they are. */
.tn-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
    gap: .55rem;
    margin: .5rem 0 0;
    width: 100%;
}
.tn-facts > div {
    display: flex; flex-direction: column; gap: .1rem;
    padding: .6rem .7rem;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--paper);
    min-width: 0;
}
.tn-facts dt {
    font-size: .6rem; font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-55);
}
.tn-facts dd {
    margin: 0;
    font-size: 1.02rem; font-weight: 600; color: var(--ink);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- the strings */
.tn-strings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(6.2rem, 100%), 1fr));
    gap: .45rem;
}
.tn-str {
    font: inherit;
    display: flex; flex-direction: column; align-items: center; gap: .12rem;
    padding: .7rem .5rem;
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--paper);
    color: var(--ink-77);
    cursor: pointer;
    text-align: center;
    transition: border-color .18s var(--ease), background .18s var(--ease),
                color .18s var(--ease);
}
.tn-str:hover { border-color: var(--ink); color: var(--ink); }
.tn-str:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tn-str__n  { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.tn-str__hz { font-size: .68rem; color: var(--ink-55); font-variant-numeric: tabular-nums; }
.tn-str__dev {
    font-size: .72rem; font-weight: 700; min-height: 1.1em;
    font-variant-numeric: tabular-nums; color: var(--accent);
}
/* The string the tuner is hearing. */
.tn-str.is-near { border-color: var(--accent); background: var(--tint); }
.tn-str.is-near .tn-str__n { color: var(--accent); }
.tn-str.is-good { border-color: var(--free); }
.tn-str.is-good .tn-str__n,
.tn-str.is-good .tn-str__dev { color: var(--free); }
/* The chip whose reference tone is sounding. */
.tn-str[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); }
.tn-str[aria-pressed="true"] .tn-str__n,
.tn-str[aria-pressed="true"] .tn-str__hz,
.tn-str[aria-pressed="true"] .tn-str__dev { color: var(--paper); }

/* ---------------------------------------------------------- the calibration */
.tn-cal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .6rem 1rem;
    align-items: end;
}
.tn-cal__slider { min-width: 0; }
.tn-cal__acts { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.tn-cal__say {
    font-size: 1.35rem; font-weight: 600; color: var(--ink);
    font-variant-numeric: tabular-nums;
}
@media (max-width: 34rem) {
    .tn-cal { grid-template-columns: minmax(0, 1fr); }
}

/* The select and the number box are house .field controls, so both editions
   are already answered by site.css and dark.css and there is nothing here to
   keep in step. The one thing added is the SIZE.

   16px on every control a finger touches. Below that iOS Safari zooms the page
   on focus and carries the fixed header off-screen with it — and the rem here
   is 16px, not the body's 17px, so site.css's .95rem is 15.2px and would
   trigger it on every one of these. */
.tn-num, .tn-sel { font-size: 16px; max-width: 100%; }
.tn-num { width: 6.5rem; }
.tn-sel { width: 100%; }

/* --------------------------------------------------------------- the manual */
.tn-rate {
    text-align: center;
    font-variant-numeric: tabular-nums;
    min-height: 1.2em;
}