/* =============================================================================
   noise.css — the noise machine's own sheet (labs 555)

   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.
   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 nz-. site.css owns the short names: `.band` is
   a page SECTION on this site, so the ten frequency bands here are .nz-band.

   Phones first. Under 760px the ten bands are ten rows, each a full-width
   slider 44px tall; from 760px they stand up as ten faders. They are the same
   <input type="range"> either way — the upright ones are turned a quarter
   turn, which every browser draws and drags correctly.
   ========================================================================== */

/* ------------------------------------------------------- play and the volume */
.nz-top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .9rem 1.4rem;
    align-items: center;
}
.nz-play {
    min-width: 8.2rem; min-height: 3.25rem;
    font-size: 1rem; letter-spacing: .03em;
    padding: .85rem 1.5rem;
}
.nz-play__i { flex: 0 0 auto; }
.nz-play__i--stop,
.nz-play.is-on .nz-play__i--go { display: none; }
.nz-play.is-on .nz-play__i--stop { display: block; }
/* Pressed, it is the accent: the one control on the desk that says "sounding".
   By id, so that it also outranks dark.css's `html[data-dark] .btn`, which
   loads after this sheet. */
#nz-play.is-on, #nz-play.is-on:hover { background: var(--accent-fill); color: var(--on-accent); }
.nz-play:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.nz-vol { min-width: 0; }
.nz-vol .lbl { margin-bottom: 0; }
.nz-vol__row { display: grid; grid-template-columns: minmax(0, 1fr) 3.1rem; align-items: center; gap: .6rem; }
.nz-num {
    font-size: .86rem; font-weight: 600; color: var(--ink);
    font-variant-numeric: tabular-nums; text-align: right;
}
@media (max-width: 26rem) {
    .nz-top { grid-template-columns: minmax(0, 1fr); }
    .nz-play { width: 100%; }
}

/* The state line: one box, one sentence, never empty. */
.nz-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);
    min-height: calc(1.55em + 1.4rem + 2px);
}
.nz-state--live { border-left-color: var(--free); }
.nz-state--wait { border-left-color: var(--unsure); }
.nz-state--warn { border-left-color: var(--unsure); color: var(--ink); }
.nz-state--err  { border-left-color: var(--taken); color: var(--ink); }

/* ------------------------------------------------------------ the spectrum */
.nz-spec {
    display: block; width: 100%; height: 104px;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--paper);
}

/* --------------------------------------------------------------- the pills */
.nz-seg .seg__b {
    min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    font-size: .82rem;
}
.nz-seg .seg__b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 555 fix (REVIEW-555 L1). In the dark edition a pressed pill UNDER THE POINTER was white on white: its label was
   gone from the press until the pointer left. dark.css's `html[data-dark] .seg__b:hover` (0,3,1) gives the hover's
   ink and outranks site.css's pressed rule (0,2,0), which had given the pressed ground. Pressed wins here (0,4,1),
   wherever this sheet loads. Paper never had it: there the pressed rule is the later of two equals. */
html[data-dark] .seg__b[aria-pressed="true"]:hover { color: var(--paper); }
.nz-dice { border-style: dashed; }
.nz-sm { min-height: 44px; padding-inline: 1rem; font-size: .78rem; }
.nz-line { min-height: 1.5em; }

/* -------------------------------------------------------------- the sliders
   One look for every range on the page. The input itself is 44px tall, so the
   whole strip is the target and not just the knob. The selectors say `input`
   on purpose: site.css sizes input[type="range"] at 22px, and a bare class
   loses to that. */
input.nz-range {
    -webkit-appearance: none; appearance: none;
    display: block; width: 100%; height: 44px; margin: 0; padding: 0;
    background: transparent; cursor: pointer;
    touch-action: pan-y;
    --nz-fill: 0%;
}
input.nz-range:focus { outline: none; }
input.nz-range:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-radius: 8px; }
input.nz-range::-webkit-slider-runnable-track {
    height: 6px; border-radius: 3px;
    background: linear-gradient(to right, var(--accent) var(--nz-fill), var(--line) var(--nz-fill));
}
input.nz-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
input.nz-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
input.nz-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
    background: var(--paper); border: 2px solid var(--ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
input.nz-range::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--paper); border: 2px solid var(--ink);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
/* A band slider is centred on zero, so its track is plain with a notch at the
   middle and no fill: "how far from flat", not "how much". */
input.nz-range--eq::-webkit-slider-runnable-track {
    background:
        linear-gradient(var(--ink-55), var(--ink-55)) center / 2px 100% no-repeat,
        var(--line);
}
input.nz-range--eq::-moz-range-progress { background: var(--line); }

/* ---------------------------------------------------------------- the bank */
.nz-bank__head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .35rem; }
.nz-bank__head .lbl { margin: 0; }
.nz-bank { display: grid; grid-template-columns: minmax(0, 1fr); }
.nz-band {
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr) 3.9rem;
    align-items: center; gap: .5rem;
}
.nz-band__hz {
    font-size: .74rem; font-weight: 700; color: var(--ink-77);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nz-band__v {
    font-size: .78rem; font-weight: 600; color: var(--ink);
    font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.nz-band__slot { min-width: 0; height: 44px; }

@media (min-width: 760px) {
    .nz-bank {
        grid-template-columns: repeat(10, minmax(0, 1fr));
        gap: .25rem;
        padding: .9rem .4rem .7rem;
        border: 1px solid var(--line); border-radius: 12px;
        background: var(--paper);
    }
    .nz-band { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: .35rem; }
    .nz-band__v { order: 1; text-align: center; }
    .nz-band__slot { order: 2; position: relative; width: 44px; height: 190px; }
    /* The zero line: where a fader sits when its band is left alone. */
    .nz-band__slot::before {
        content: ''; position: absolute; left: 4px; right: 4px; top: 50%;
        height: 1px; background: var(--ink-55); opacity: .45;
    }
    .nz-band__hz { order: 3; }
    .nz-band__slot input.nz-range {
        position: absolute; left: 50%; top: 50%;
        width: 190px; height: 44px;
        transform: translate(-50%, -50%) rotate(-90deg);
        touch-action: none;
    }
}

/* ------------------------------------------------ the timer and the drift */
.nz-foot {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: 1.1rem 1.6rem;
}

/* -------------------------------------------------------------- the layers */
.nz-rows { display: grid; gap: .15rem; }
.nz-row {
    display: grid;
    grid-template-columns: minmax(8.5rem, 15rem) minmax(0, 1fr) 2.4rem;
    align-items: center; gap: .3rem .9rem;
    padding: .25rem 0;
    border-top: 1px solid var(--line-soft);
}
.nz-row:first-child { border-top: 0; }
.nz-row__n { display: flex; flex-direction: column; gap: .05rem; min-width: 0; cursor: pointer; }
.nz-row__n b { font-size: .95rem; font-weight: 600; color: var(--ink); }
.nz-row__n span { font-size: .74rem; color: var(--ink-55); line-height: 1.35; }
@media (max-width: 38rem) {
    .nz-row { grid-template-columns: minmax(0, 1fr) 2.4rem; padding: .55rem 0 .15rem; }
    .nz-row__n { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: .55rem; flex-wrap: wrap; }
}

.nz-share { display: grid; gap: .35rem; padding-top: .9rem; border-top: 1px solid var(--line); }
.nz-now { margin: 0 0 .5rem; font-size: .9rem; color: var(--ink-77); min-height: 1.5em; }
.nz-now b { color: var(--ink); font-weight: 600; }
.nz-share .lbl { margin-bottom: .1rem; }
.nz-share__row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: stretch; }
/* 16px, or iOS zooms the page when the field takes the focus. */
.nz-link {
    flex: 1 1 14rem; min-width: 0; min-height: 44px;
    font-size: 16px; font-weight: 400;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-overflow: ellipsis;
}

/* -------------------------------------------------------------- the method */
/* The house .d3 carries no margin of its own; in a long method section each
   sub-heading needs air above it and a little below. */
#method .d3 { margin: 2.6rem 0 .9rem; }
#method .d2 + .d3 { margin-top: 1.6rem; }
#method .hint { max-width: 62rem; }
.nz-tablewrap { overflow-x: auto; margin: 1.4rem 0 .2rem; }
.nz-table { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.5; }
.nz-table th, .nz-table td {
    text-align: left; vertical-align: top;
    padding: .7rem .9rem .7rem 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink-77);
}
.nz-table thead th {
    font-size: .625rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--ink-55); border-bottom-color: var(--ink-55);
}
.nz-table tbody th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.nz-table td:nth-child(2) { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 34rem) {
    .nz-table, .nz-table tbody, .nz-table tr, .nz-table th, .nz-table td { display: block; }
    .nz-table thead { position: absolute; left: -9999px; }
    .nz-table tr { padding: .7rem 0; border-bottom: 1px solid var(--line); }
    .nz-table th, .nz-table td { border: 0; padding: .1rem 0; }
}

.nz-dl { display: grid; gap: 0; margin: 1.2rem 0 1.4rem; max-width: 62rem; }
.nz-dl > div {
    display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .2rem 1.2rem;
    padding: .8rem 0; border-top: 1px solid var(--line);
}
.nz-dl > div:last-child { border-bottom: 1px solid var(--line); }
.nz-dl dt { font-weight: 600; color: var(--ink); }
.nz-dl dd { margin: 0; color: var(--ink-77); font-size: .95rem; line-height: 1.6; }
@media (max-width: 34rem) { .nz-dl > div { grid-template-columns: minmax(0, 1fr); } }

.lede code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .86em; padding: .05em .35em; border-radius: 4px;
    border: 1px solid var(--line); color: var(--ink-77);
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    .nz-play, .nz-seg .seg__b { transition: none; }
}