/* /bpm-finder/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts). */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}
.bf-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;opacity:0}
.bf-head .sub{margin-bottom:1rem}
@media(max-width:520px){.bf-head h1{margin-bottom:0.25rem}.bf-head .sub{font-size:0.9375rem;margin-bottom:0.75rem}}
@media(min-width:920px){.bf-duo{grid-template-columns:minmax(0,1.35fr) minmax(20rem,.75fr)}}

.bf-stage,.bf-card{padding:1rem;display:grid;gap:0.875rem;align-content:start}
.bf-side{display:grid;gap:1.375rem;align-content:start}
@media(max-width:520px){.bf-stage,.bf-card{padding:0.75rem;gap:0.75rem}}
.bf-stage .k,.bf-card .k{font-family:var(--mono);font-size:0.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.bf-h{margin:0;font-size:1.0625rem;font-weight:650;letter-spacing:-.01em}
.bf-help{margin:0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.bf-dim{font-size:0.8125rem;color:var(--muted);font-family:var(--mono)}
#status:empty{display:none}
.bf-stage .chip:focus-visible,.bf-card .chip:focus-visible,.bf-drop:focus-within,.bf-wave:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* drop zone (same component as the other polyatic file tools) */
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;text-align:center;min-height:9rem;padding:1.25rem;border:2px dashed var(--line-2);border-radius:0.875rem;background:var(--surface-2);cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.drag{border-color:var(--accent);background:var(--accent-soft)}
.drop b{font-size:1.0625rem}
.drop small{color:var(--muted);max-width:44ch;line-height:1.5}
.bf-drop-icon{width:3.25rem;height:2.25rem;border-bottom:2px solid var(--ink);background:linear-gradient(90deg,transparent 0 10%,var(--ink) 10% 16%,transparent 16% 30%,var(--signal) 30% 36%,transparent 36% 50%,var(--ink) 50% 56%,transparent 56% 70%,var(--signal) 70% 76%,transparent 76%) bottom/100% 100% no-repeat;clip-path:polygon(0 60%,10% 30%,20% 70%,30% 0,40% 55%,50% 25%,60% 65%,70% 5%,80% 50%,90% 35%,100% 60%,100% 100%,0 100%)}
.has-file .drop{min-height:0;padding:0.625rem 1rem;flex-direction:row;gap:0.75rem}
.has-file .drop small{display:none}
.has-file .bf-drop-icon{width:2rem;height:1.5rem}
@media (prefers-reduced-motion:reduce){.drop{transition:none}}

.bf-preview{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:0.5rem}
.bf-preview li{padding:0.625rem 0.75rem;border:1px solid var(--line);border-radius:0.625rem;background:var(--surface);font-size:0.875rem;line-height:1.45;color:var(--ink-2)}
.bf-preview li b{display:block;color:var(--ink);font-family:var(--mono);font-size:0.75rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:0.125rem}
.has-file .bf-preview{display:none}
@media(max-width:520px){.bf-preview{display:none}}
.bf-file{margin:0;display:flex;flex-wrap:wrap;gap:0.25rem 0.5rem;align-items:baseline;overflow-wrap:anywhere}
.bf-result{display:grid;gap:1rem}
.bf-result[hidden]{display:none}
.bf-nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.75rem}
.bf-num{display:grid;gap:0.25rem;align-content:start;padding:0.75rem 0.875rem;background:var(--surface-2);border:1px solid var(--line);border-radius:0.625rem;box-shadow:inset 0.1875rem 0 0 var(--signal)}
.bf-big{font-family:var(--mono);font-size:1.75rem;font-weight:650;line-height:1.15;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
@media(max-width:400px){.bf-big{font-size:1.375rem}}
.bf-conf{font-family:var(--mono);font-size:0.75rem;font-weight:600;color:var(--ink-2)}
.bf-conf.low{color:var(--warn)}
.bf-conf.high{color:var(--ok)}

.bf-wavebox,.bf-otbox{display:grid;gap:0.5rem}
.bf-wavehead{display:flex;justify-content:space-between;align-items:baseline;gap:0.5rem;flex-wrap:wrap}
.bf-wave{display:block;width:100%;height:120px;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface-2);cursor:crosshair;touch-action:none}
.bf-playrow,.bf-taprow{display:flex;flex-wrap:wrap;gap:0.5rem 0.625rem;align-items:center}
.bf-playrow .btn{min-width:9rem}
#play[aria-pressed=true],#mic[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.bf-switch{display:inline-flex;align-items:center;gap:0.375rem;font-weight:600;font-size:0.875rem;cursor:pointer}
.bf-switch input{width:1.125rem;height:1.125rem;accent-color:var(--accent);margin:0}

.bf-ot{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.375rem}
.bf-ot li{display:grid;gap:0.125rem;padding:0.375rem 0.5rem;min-width:4.5rem;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface);font-family:var(--mono);font-size:0.75rem;color:var(--muted)}
.bf-ot li b{font-size:0.9375rem;color:var(--ink);font-variant-numeric:tabular-nums}
.bf-ot li.off b{color:var(--accent)}
.bf-ot li.low{border-style:dashed}

.bf-tap{min-width:7rem;height:3.5rem;font-size:1.125rem;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.bf-tap.hit{background:var(--signal);color:var(--signal-ink)}
.bf-tapout{display:grid;gap:0.125rem;flex:1;min-width:6rem}
.bf-micout{margin:0;font-family:var(--mono);font-size:0.9375rem;font-weight:600;color:var(--ink)}
.bf-micout:empty{display:none}

.bf-tablewrap{overflow-x:auto;max-width:100%}
.bf-table{display:table;width:100%;max-width:none;margin:0;font-size:0.8125rem}
.bf-table th,.bf-table td{text-align:left;padding:0.375rem 0.5rem;border-bottom:1px solid var(--line);vertical-align:top}
.bf-table th{font-family:var(--mono);font-size:0.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.bf-table td{font-variant-numeric:tabular-nums}
.bf-table td:first-child{overflow-wrap:anywhere;min-width:7rem}
.bf-table tr.cur td{background:var(--accent-soft)}
.bf-table .bf-empty td{color:var(--muted)}
.bf-table button.bf-name{all:unset;cursor:pointer;color:var(--accent);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
.bf-table button.bf-name:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bf-table .bad{color:var(--bad)}