/* ==========================================================================
   NEVER FOUND — free web tools (/tools)

   Loaded after the site stylesheet, so every token, the nav, the footer, the
   fog and the reveals come from there. This file adds only what a tool page
   has and a product page does not: the tool itself, drawn as one of the
   plug-ins (their dark enclosure, the display, the pad), and the few sections
   around it.

   Served from /tools, not /assets: _headers caches /assets/css and
   /assets/js for a year, and a tool will change more often than a product
   page. Pages revalidates everything else on each load, so no hashed names.
   ========================================================================== */

/* ── The page head: centred, the tool right under it ─────────────────────── */
.tool-hero { padding-block: calc(var(--s12) + var(--s6)) var(--s8); text-align: center; }
.tool-hero .wrap { display: grid; justify-items: center; gap: var(--s5); }
.tool-hero .facts { margin: 0 auto; }
.tool-hero .facts li + li::before { content: "\00b7"; margin-right: var(--s3); color: var(--text-3); }
.tool-h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: .98; letter-spacing: -.045em; color: var(--ink); text-wrap: balance; }
.tool-hero .hero__line { max-width: 34ch; text-wrap: balance; }

/* ── The unit: the plug-in's enclosure ───────────────────────────────────── */
.tool { padding-bottom: var(--s11); }
.unit {
  --u-accent: rgb(var(--plug-accent-rgb));
  --u-dim: rgba(255, 255, 255, .44);
  --u-text: rgba(255, 255, 255, .84);
  --u-line: rgba(255, 255, 255, .08);
  position: relative; isolation: isolate; max-width: 640px; margin-inline: auto;
  padding: var(--s6) var(--s8) var(--s5); border-radius: var(--r3);
  background: radial-gradient(120% 90% at 50% 0%, #2B2433 0%, #1A181E 55%, #141317 100%);
  box-shadow: var(--sh3), inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(255, 255, 255, .04);
  color: var(--u-text);
}
.unit__brand { text-align: center; font-family: var(--font-mono); font-size: 13px; letter-spacing: .32em;
  text-transform: uppercase; color: rgba(255, 255, 255, .56); padding-bottom: var(--s5); }

/* The display: the dark glass everything is read from. */
.unit__display { position: relative; overflow: hidden; border-radius: var(--r2);
  background: linear-gradient(180deg, #0E0D11, #0B0B0E); border: 1px solid rgba(255, 255, 255, .05);
  box-shadow: inset 0 2px 14px rgba(0, 0, 0, .6); }

/* Text tabs across the top of the display, the plug-in's SINGLE LINE / FULL
   STACK row: a violet underline marks the chosen one. */
.utabs { display: flex; justify-content: center; gap: var(--s8); margin: 0 auto; padding: var(--s4) var(--s5) 0;
  border-bottom: 1px solid var(--u-line); width: min(100%, 520px); }
.utab { position: relative; padding: var(--s2) var(--s1) var(--s3); font-family: var(--font-mono); font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--u-dim); transition: color var(--t1); }
.utab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px;
  background: var(--u-accent); transform: scaleX(0); transition: transform var(--t-hover); }
.utab:hover { color: var(--u-text); }
.utab[aria-selected="true"] { color: #fff; }
.utab[aria-selected="true"]::after { transform: scaleX(1); }
.utab:focus-visible { outline: 2px solid var(--u-accent); outline-offset: 2px; border-radius: 4px; }

/* The display's foot: what was heard on the left, the tempo on the right. */
.unit__read { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s5);
  padding: var(--s3) var(--s5); border-top: 1px solid var(--u-line);
  font-family: var(--font-mono); font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--u-dim); }
.unit__read b { font-weight: 500; color: var(--u-text); }
.unit__dot { display: inline-block; width: 8px; height: 8px; margin-left: var(--s2); border-radius: 50%;
  background: rgba(255, 255, 255, .22); vertical-align: 1px; }
.unit__dot.is-on { background: var(--u-accent); box-shadow: 0 0 10px rgb(var(--plug-accent-rgb) / .8); }

/* Under the display: the pad, centred, as on the plug-in. */
.unit__bar { display: grid; justify-items: center; gap: var(--s4); padding-top: var(--s7); }

/* The pad: the plug-in's big square button, for the one main action. */
.pad { display: grid; place-items: center; width: 148px; height: 148px; padding: var(--s4); text-align: center;
  border-radius: 24px; line-height: 1.15; background: linear-gradient(180deg, #2A2433, #1D1A23);
  border: 2px solid rgb(var(--plug-accent-rgb) / .55);
  box-shadow: 0 0 0 6px rgba(0, 0, 0, .35), 0 14px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08);
  font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: .04em; color: #C9B4F4;
  transition: transform var(--t1), border-color var(--t-hover), color var(--t-hover); }
.pad:hover { border-color: rgb(var(--plug-accent-rgb) / .9); color: #E4D8FB; }
.pad:active { transform: translateY(1px) scale(.99); }
.pad[aria-pressed="true"] { border-color: #EA50CC; color: #F6C9EC; }
.pad:disabled { opacity: .45; cursor: not-allowed; }
.pad:focus-visible { outline: 2px solid var(--u-accent); outline-offset: 4px; }
/* The N under the pad, the plug-ins' mark. */
.unit__mark { padding-top: var(--s4); text-align: center; font-family: var(--font-display); font-weight: 700;
  font-size: 30px; line-height: 1; color: rgba(214, 204, 238, .5); }

/* Secondary controls: small dark pills. */
.ubtn { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: var(--s2) var(--s5);
  border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .04);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--u-text);
  transition: background var(--t1), border-color var(--t1), color var(--t1); }
.ubtn:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .22); color: #fff; }
.ubtn:disabled { opacity: .4; cursor: not-allowed; }
.ubtn:focus-visible { outline: 2px solid var(--u-accent); outline-offset: 2px; }
.ubtn svg { width: 16px; height: 16px; }
.ubtn--accent { border-color: rgb(var(--plug-accent-rgb) / .6); background: rgb(var(--plug-accent-rgb) / .16); color: #fff; }
.ubtn--accent:hover { background: rgb(var(--plug-accent-rgb) / .28); border-color: rgb(var(--plug-accent-rgb) / .9); }

/* Small labelled fields inside the unit (a tempo, a reference pitch). */
.ufield { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-mono); font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--u-dim); }
.ufield input, .ufield select { width: 5.5em; height: 36px; padding: 0 var(--s3); border-radius: var(--r1);
  border: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .35); color: #fff;
  font-family: var(--font-mono); font-size: 14px; letter-spacing: 0; text-transform: none; color-scheme: dark; }
.ufield select { width: auto; min-width: 5.5em; }
.ufield input:focus-visible, .ufield select:focus-visible { outline: 2px solid var(--u-accent); outline-offset: 1px; }

/* A message in the display when there is nothing to show, or a reason. */
.unit__empty { display: grid; place-items: center; align-content: center; gap: var(--s3); min-height: 100%;
  padding: var(--s8) var(--s6); text-align: center; font-family: var(--font-mono); font-size: 15px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--u-dim); }
.unit__empty b { font-weight: 500; color: var(--u-text); }
.unit__empty small { font-family: var(--font-text); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--u-dim); }

/* A file dragged over the unit. */
.unit.is-drag .unit__display { box-shadow: inset 0 0 0 2px rgb(var(--plug-accent-rgb) / .7), inset 0 2px 14px rgba(0, 0, 0, .6); }

/* The fine print under the unit: what the tool keeps (nothing). */
.unit__fine { max-width: 960px; margin: var(--s4) auto 0; text-align: center; font-size: 13px; color: var(--text-3); }
.unit__fine a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ── Around the tool ─────────────────────────────────────────────────────── */
.tsec { padding-bottom: var(--sec); }
.tcard { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s9) var(--s10);
  padding: var(--s10); border-radius: var(--r3); }
.tcard__head { display: grid; align-content: start; gap: var(--s4); }

/* Three steps, numbered because they are a sequence. */
.tsteps { display: grid; gap: var(--s5); counter-reset: step; }
.tsteps li { position: relative; padding-left: var(--s10); font-size: 16px; line-height: 1.6; color: var(--text-2); counter-increment: step; }
.tsteps li::before { content: counter(step); position: absolute; left: 0; top: -2px; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%; background: var(--accent-wash); color: var(--accent);
  font-family: var(--font-display); font-weight: 700; font-size: 15px; }
.tsteps b { font-weight: 600; color: var(--ink); }

/* Plain facts, label and value. */
.tfacts { display: grid; gap: 0; }
.tfacts div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--s5); padding-block: var(--s4);
  border-bottom: 1px solid var(--line); font-size: 15px; }
.tfacts div:first-child { border-top: 1px solid var(--line); }
.tfacts dt { color: var(--text-3); }
.tfacts dd { color: var(--ink); }

/* The plug-in the tool comes from: one dark card, one button. */
.tplug { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s6) var(--s9);
  padding: var(--s9) var(--s10); border-radius: var(--r3);
  background: radial-gradient(130% 120% at 85% 0%, #2A1E44 0%, #0F0F12 62%); color: rgba(255, 255, 255, .72);
  box-shadow: var(--sh2); }
.tplug .kicker { color: color-mix(in srgb, rgb(var(--plug-accent-rgb)) 88%, #fff); }
.tplug__h { margin-top: var(--s3); font-family: var(--font-display); font-weight: 700; font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.05; letter-spacing: -.03em; color: #fff; }
.tplug__h span { color: rgb(var(--plug-accent-rgb)); }
.tplug p:not(.kicker) { margin-top: var(--s3); max-width: 52ch; font-size: 16px; }
.tplug .btn--primary { box-shadow: 0 8px 26px rgb(var(--plug-accent-rgb) / .35), inset 0 1px 0 rgba(255, 255, 255, .2); }

  border: 1px solid rgba(255, 255, 255, .8); box-shadow: var(--sh1);
  transition: transform var(--t-hover), box-shadow var(--t-hover), background var(--t-hover); }
  border: 1px dashed var(--line-2); box-shadow: none; font-size: 14px; color: var(--text-3); }

@media (max-width: 940px) {
  .tcard { grid-template-columns: 1fr; gap: var(--s7); padding: var(--s8) var(--s6); }
  .tplug { grid-template-columns: 1fr; padding: var(--s8) var(--s6); }

}
@media (max-width: 760px) {
  .tool-hero { padding-top: calc(var(--s11) + var(--s6)); }
  .unit { padding: var(--s4) var(--s3) var(--s5); border-radius: var(--r2); }
  .unit__brand { font-size: 11px; padding-bottom: var(--s3); }
  .utabs { gap: var(--s5); }
  .utab { font-size: 13px; }
  .unit__read { font-size: 12px; padding: var(--s3); }
  .pad { width: 124px; height: 124px; font-size: 19px; border-radius: 20px; }
  .tfacts div { grid-template-columns: 1fr; gap: var(--s1); }
}
@media (prefers-reduced-motion: reduce) {
  .utab::after, .pad { transition: none; }
}