@import url('./landing.css');
@import url('./funnel-hero.css');

/* The free tools and door pages (October 2026, logs/funnels-20261015/). The home page's bands,
   type and gold; each tool sits in the same frosted panel as the home page's quick check. */
.tool-panel { width:min(100%,760px); margin:0 auto; padding:22px; border-radius:24px; background:linear-gradient(180deg,#121317cc,#0a0b0de0); backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%); box-shadow:inset 0 0 0 1px #ffffff1c; text-align:left; }
.tool-panel h2 { margin:0; font-size:20px; font-weight:680; letter-spacing:-.015em; }
.tool-panel p { color:var(--snow-2); font-size:14px; line-height:1.5; }
.tool-panel progress { width:100%; height:4px; accent-color:var(--accent); }
.tool-panel input[type="range"] { display:block; width:100%; height:44px; margin:0; accent-color:var(--accent); }
.tool-status { margin:0; max-width:40em; color:var(--snow-2); font-size:14px; overflow-wrap:anywhere; text-wrap:pretty; }
.tool-status:empty { display:none; }
.tool-status.error { color:#ff9f8f; }
@media (max-width:700px) { .tool-panel { padding:18px 16px; border-radius:22px; } }
@media (prefers-reduced-transparency:reduce) { .tool-panel { background:#0e0f12; backdrop-filter:none; -webkit-backdrop-filter:none; } }

/* The drop zone: the home page's drop box, one button for the whole box, but it takes a
   file only when it lands on the box itself (funnel-file.js pickFile), never the window. */
.tool-drop { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:10px 20px; width:min(100%,700px); min-height:44px; margin-inline:auto; padding:20px 22px; border:1px dashed #ffffff40; border-radius:24px; background:#0b0c0fa8; backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%); box-shadow:0 30px 80px -44px #000; color:var(--snow); text-align:left; cursor:pointer; transition-property:border-color,background-color,transform; transition-duration:.2s; transition-timing-function:ease-out; }
.tool-drop:hover,.tool-drop.is-dragover { border-color:#d8b46aa8; background:#13141899; }
.tool-drop:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.tool-drop:active { transform:scale(.995); }
.tool-drop[aria-disabled="true"] { cursor:wait; }
.tool-drop:hover .choose-file { background:var(--accent-hover); }
.tool-drop:active .choose-file { background:var(--accent-press); }
.tool-panel .tool-drop { width:100%; }

/* Buttons in a row that wraps on a phone. The one gold .pill is the action; any other
   button or link sitting directly in the row is a quiet outlined chip, so the pill stays
   the bright one; a .tool-tabs or .try-switch placed in the row keeps its own look. */
.tool-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; margin-top:16px; }
.tool-row > button:not(.pill),.tool-row > a:not(.pill):not(.more-link) { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 18px; border:1px solid #ffffff24; border-radius:22px; background:transparent; color:var(--snow-2); font:500 15px var(--sans); text-decoration:none; cursor:pointer; transition:color .2s,border-color .2s,background-color .2s; }
.tool-row > button:not(.pill):hover:not(:disabled),.tool-row > a:not(.pill):not(.more-link):hover { color:var(--snow); border-color:#ffffff47; }
.tool-row > button:disabled,.tool-row .pill:disabled { opacity:.5; cursor:wait; }
.tool-row label { display:inline-flex; align-items:center; gap:8px; min-height:44px; color:var(--snow-2); font-size:14px; }
.tool-row select { min-height:44px; padding:0 12px; border:1px solid #ffffff24; border-radius:12px; background:#0b0c0f; color:var(--snow); font:500 15px var(--sans); }

/* What a tool found or made, under its controls. */
.tool-result { margin-top:18px; padding-top:16px; border-top:1px solid #ffffff14; }
.tool-result h3 { margin:0 0 6px; color:var(--snow); font-size:17px; font-weight:650; letter-spacing:-.01em; }

/* A level bar. The page sets --level from 0 to 1 (element.style.setProperty) and gives the
   element role="meter" with its aria values; .is-hot shows a level at the ceiling. */
.tool-meter { --level:0; position:relative; height:10px; border-radius:5px; background:#ffffff14; overflow:hidden; }
.tool-meter::before { content:''; position:absolute; inset:0; transform-origin:left center; transform:scaleX(var(--level)); background:var(--snow-2); }
.tool-meter.is-hot::before { background:#ff9f8f; }

/* A verdict table: each target, the file's number and the verdict in words. It wraps
   rather than scrolling sideways on a 320 pixel screen. */
.tool-table { width:100%; margin-top:8px; border-collapse:collapse; font-size:14px; font-variant-numeric:tabular-nums; }
.tool-table th,.tool-table td { padding:11px 10px 11px 0; border-top:1px solid #ffffff14; text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.tool-table th { color:var(--snow); font-weight:600; }
.tool-table td { color:var(--snow-2); }
.tool-table thead th { padding-top:0; border-top:0; color:var(--snow-3); font-size:13px; font-weight:500; }

/* Pass, near and fail are said in words; the dot only repeats them. Gold stays for what to press. */
.tool-verdict { white-space:nowrap; font-weight:600; }
.tool-verdict::before { content:''; display:inline-block; width:8px; height:8px; margin:0 7px 1px 0; border:1.5px solid currentColor; border-radius:50%; }
.tool-verdict.pass { color:var(--snow); }
.tool-verdict.pass::before { background:currentColor; }
.tool-verdict.near { color:var(--snow-2); }
.tool-verdict.fail { color:#ff9f8f; }
.tool-verdict.fail::before { background:currentColor; }

/* Numbered guide steps (the voicemail page): the number in a ring, the words beside it. */
.tool-steps { margin:0; padding:0; list-style:none; counter-reset:step; }
.tool-steps > li { counter-increment:step; display:grid; grid-template-columns:36px minmax(0,1fr); gap:4px 16px; padding:20px 0; border-top:1px solid var(--hair); }
.tool-steps > li::before { content:counter(step); grid-row:span 2; display:grid; place-items:center; width:32px; height:32px; border:1px solid currentColor; border-radius:50%; font-size:15px; font-weight:600; }
.tool-steps > li > * { grid-column:2; }
.tool-steps h3 { margin:0; font-size:19px; font-weight:650; letter-spacing:-.01em; }
.tool-steps p { margin:0; font-size:16px; line-height:1.55; }
.band-mist .tool-steps p,.band-paper .tool-steps p { color:var(--coal-2); }
.band-dark .tool-steps > li { border-top-color:var(--hair-dark); }
.band-dark .tool-steps p { color:var(--snow-2); }

/* A switch of two or three options (MP3 or WAV, and the like): the home page's
   Original/Repaired switch (.try-switch), with aria-pressed buttons. */
.tool-tabs { display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; border-radius:22px; background:#ffffff14; }
.tool-tabs button { min-height:44px; padding:0 16px; border:0; border-radius:22px; background:transparent; color:var(--snow-2); font:600 15px var(--sans); cursor:pointer; }
.tool-tabs button[aria-pressed="true"] { background:var(--snow); color:var(--coal); }
.tool-tabs button:hover:not([aria-pressed="true"]) { color:var(--snow); }
.band-mist .tool-tabs,.band-paper .tool-tabs { background:var(--hair); }
.band-mist .tool-tabs button,.band-paper .tool-tabs button { color:var(--coal-2); }
.band-mist .tool-tabs button[aria-pressed="true"],.band-paper .tool-tabs button[aria-pressed="true"] { background:var(--coal); color:var(--paper); }

/* Related tools: one link a row, with a line saying what each does. */
.tool-links { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:0 32px; margin:0; padding:0; list-style:none; }
.tool-links li { padding:6px 0 14px; border-top:1px solid var(--hair); }
.tool-links a { display:inline-flex; align-items:center; min-height:44px; font-size:18px; font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px; }
.tool-links a:hover { text-decoration-thickness:2px; }
.tool-links p { margin:0; font-size:15px; line-height:1.5; }
.band-mist .tool-links a,.band-paper .tool-links a { color:var(--coal); }
.band-mist .tool-links p,.band-paper .tool-links p { color:var(--coal-2); }
.band-dark .tool-links li { border-top-color:var(--hair-dark); }
.band-dark .tool-links a { color:var(--snow); }
.band-dark .tool-links p { color:var(--snow-2); }

/* Small print: how a number was measured, what a format is. Never under 12 pixels. */
.tool-note { margin:10px 0 0; font-size:13px; line-height:1.5; text-wrap:pretty; }
.band-dark .tool-note,.tool-panel .tool-note { color:var(--snow-3); }
.band-mist .tool-note,.band-paper .tool-note { color:var(--coal-2); }

/* A spectrogram or waveform canvas. It must have a height before drawing: the spectrum
   drawing sizes itself from it (station-spectrum.js). */
.tool-canvas { display:block; width:100%; height:220px; margin-top:14px; border-radius:14px; background:var(--night); }

/* The house bar and footer, held to the funnel floors (BUILD-SPEC rule 7) as film.css holds
   its page: brand.css draws "Alpha" at 11 pixels and the footer trademark smaller, and
   "Terms" alone is narrower than 44 pixels. */
.brand-alpha { font-size:12px; }
.footer-brand .trademark { font-size:12px; }
.footer-links a { min-width:44px; }

@media (max-width:700px) {
  .tool-drop { grid-template-columns:minmax(0,1fr); padding:18px 16px; border-radius:22px; }
  .tool-drop .drop-art { display:none; }
  .tool-drop .choose-file { width:100%; }
  .tool-canvas { height:160px; }
}
@media (max-width:480px) {
  .tool-tabs { display:grid; width:100%; }
  .tool-row > .pill { width:100%; }
}
@media (prefers-reduced-transparency:reduce) { .tool-drop { background:#0e0f12; backdrop-filter:none; -webkit-backdrop-filter:none; } }
@media (forced-colors:active) { .tool-meter::before { background:Highlight; forced-color-adjust:none; } }