/* finder.css — the Raga Finder, on top of the shared Carnatic sheet and the
 * Swara Trainer's (the microphone, its meter and readout, and the reading
 * panels come from those two). What is added here is the part only this tool
 * has: the picture of what was heard, and the answer.
 */

.toggle.off{ opacity:.45; cursor:not-allowed; }
.readout.solo{ grid-template-columns:auto; }
.readout.solo .hz{ grid-column:1; text-align:right; }

/* ---------------------------------------------- what was heard, by swara */
.heardwrap{ position:relative; margin-top:12px; border:1px solid #0b0d12; border-radius:12px; overflow:hidden; background:#14171d;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03); }
.heardwrap .lab{ position:absolute; top:7px; left:10px; font-size:10px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--pdim); pointer-events:none; }
#profile{ display:block; width:100%; height:150px; }
.heardwrap .hint{ padding:0 22px; }
.places{ display:grid; grid-template-columns:repeat(12,1fr); border-top:1px solid var(--pedge); background:rgba(0,0,0,.25); }
.pl{ text-align:center; padding:6px 0 5px; min-width:0; border-top:3px solid transparent; margin-top:-1px; transition:background .1s ease; }
.pl b{ display:block; font-size:14px; font-weight:800; color:var(--pdim); line-height:1.15; }
.pl b sub{ font-size:9.5px; font-weight:800; vertical-align:baseline; }
.pl small{ display:block; font-size:9.5px; font-weight:700; color:var(--pdim); min-height:12px; font-variant-numeric:tabular-nums; }
.pl.heard b{ color:var(--ptext); }
.pl.in{ border-top-color:var(--teal); } .pl.in.heard b{ color:var(--teal); }
.pl.in:not(.heard){ border-top-style:dashed; border-top-color:rgba(79,209,197,.5); }
.pl.stray{ border-top-color:var(--rose); } .pl.stray b, .pl.stray small{ color:var(--rose); }
.pl.fixed.in{ border-top-color:var(--gold); } .pl.fixed.in.heard b{ color:var(--gold); }
.pl.lit{ background:rgba(224,178,90,.3); }

/* ------------------------------------------------------------ the answer */
.verdict{ margin-top:13px; border:1px solid var(--pedge); border-radius:12px; background:rgba(0,0,0,.24); padding:14px 14px 13px; text-align:center; }
.vk{ font-size:10.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--pdim); }
.verdict[data-v="strong"] .vk{ color:var(--teal); } .verdict[data-v="likely"] .vk{ color:var(--gold); } .verdict[data-v="unsure"] .vk{ color:var(--rose); }
.vhead{ display:flex; align-items:baseline; justify-content:center; gap:10px; flex-wrap:wrap; margin:3px 0 2px; }
.vn{ font-family:"Fraunces",Georgia,serif; font-weight:900; font-size:32px; line-height:1.1; letter-spacing:-.01em; color:#fff; }
.vpct{ font-size:12px; font-weight:800; color:var(--pdim); font-variant-numeric:tabular-nums; }
.verdict[data-v="strong"] .vpct{ color:var(--teal); }
.vmeta{ font-size:12.5px; color:var(--pdim); min-height:17px; }
.vaka{ font-size:12.5px; font-weight:700; color:var(--gold); margin-top:2px; }
.vlines{ display:flex; flex-direction:column; gap:6px; margin:11px auto 10px; width:max-content; max-width:100%; }
.vline{ display:flex; align-items:center; gap:8px; }
.vline > i{ font-style:normal; font-size:9.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--pdim); width:38px; text-align:right; flex:none; }
.vline > div{ display:flex; flex-wrap:wrap; gap:4px; }
.vline span{ min-width:30px; padding:5px 6px 4px; border-radius:8px; background:var(--pnl3); border:1px solid var(--pedge); color:var(--ptext);
  font-size:14px; font-weight:800; line-height:1.15; text-align:center; transition:background .06s ease; }
.vline span sub{ font-size:9.5px; vertical-align:baseline; }
.vline span.lit{ background:var(--gold); border-color:var(--gold); color:#241a06; }
.vacts{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:10px; }
.vlinks{ font-size:12.5px; color:var(--pdim); }
.vlinks a{ color:var(--teal); font-weight:700; text-decoration:none; } .vlinks a:hover{ text-decoration:underline; }
.vwhy{ font-size:13.5px; color:var(--ptext); max-width:640px; margin:0 auto; line-height:1.5; }
.verdict[data-v="none"] .vwhy, .verdict[data-v="more"] .vwhy{ color:var(--pdim); }
.vsame{ font-size:12.5px; color:var(--gold); max-width:640px; margin:9px auto 0; line-height:1.45; text-align:left;
  background:rgba(224,178,90,.09); border:1px solid rgba(224,178,90,.3); border-radius:9px; padding:8px 10px; }

.others{ margin-top:11px; }
.others .lab{ font-size:10.5px; font-weight:800; letter-spacing:.11em; text-transform:uppercase; color:var(--pdim); text-align:center; margin-bottom:7px; }
.orow{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1.3fr) 90px 38px; align-items:center; gap:10px; width:100%; font:inherit; text-align:left; cursor:pointer;
  padding:8px 11px; margin-bottom:5px; border-radius:10px; background:var(--pnl3); border:1px solid var(--pedge); color:var(--ptext); }
.orow:hover{ background:var(--pedge); }
.orow.on{ border-color:var(--gold); background:rgba(224,178,90,.12); }
.on-n{ font-size:14px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.on-n i{ font-style:normal; font-size:11px; font-weight:700; color:var(--pdim); }
.on-w{ font-size:12px; color:var(--pdim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.on-b{ height:6px; border-radius:3px; background:rgba(0,0,0,.45); overflow:hidden; }
.on-b i{ display:block; height:100%; background:var(--teal); border-radius:3px; }
.on-p{ font-size:12px; font-weight:800; text-align:right; font-variant-numeric:tabular-nums; color:var(--pdim); }

.saline{ font-size:12.5px; color:var(--pdim); text-align:center; margin-top:10px; line-height:1.6; min-height:20px; }
.saline b{ color:var(--gold); }
.salt{ font:inherit; font-size:12px; font-weight:700; cursor:pointer; padding:2px 8px; border-radius:999px; background:var(--pnl3); border:1px solid var(--pedge); color:var(--ptext); }
.salt:hover{ border-color:var(--gold); color:var(--gold); }

.foot{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; margin-top:12px; }
.stage .file{ background:var(--pnl3); border:1px solid var(--pedge); color:var(--ptext); padding:9px 15px; font-size:13.5px; font-weight:800; }

/* ---------------------------------------------------------- page text */
table.ragas{ width:100%; border-collapse:collapse; margin:8px 0 12px; font-size:13.5px; }
table.ragas th{ text-align:left; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--branddeep); padding:6px 8px; border-bottom:1.5px solid var(--line); }
table.ragas td{ padding:6px 8px; border-bottom:1px solid var(--line); color:var(--inksoft); vertical-align:top; }
table.ragas td:first-child{ font-weight:800; color:var(--ink); }
table.ragas td:nth-child(2), table.ragas td:nth-child(3){ font-variant-numeric:tabular-nums; white-space:nowrap; }
.tablewrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
details.all > summary{ color:var(--brand); }

@media (max-width:720px){
  .listen{ flex-wrap:nowrap; gap:11px; }
  .readout.solo{ flex:none; grid-template-columns:auto; }
  .readout.solo .now{ min-width:58px; font-size:32px; text-align:right; }
  .readout.solo .hz{ display:none; }
}
@media (max-width:620px){
  #profile{ height:124px; }
  .pl b{ font-size:12px; } .pl b sub{ font-size:8.5px; } .pl small{ font-size:8.5px; }
  .vn{ font-size:26px; }
  .vline > i{ display:none; }
  .vline span{ min-width:26px; padding:4px 4px 3px; font-size:13px; }
  .orow{ grid-template-columns:minmax(0,1fr) 54px 34px; }
  .on-w{ grid-column:1 / -1; grid-row:2; white-space:normal; }
  table.ragas td:nth-child(2), table.ragas td:nth-child(3){ white-space:normal; }
}
@media (prefers-reduced-motion:reduce){ .pl, .vline span{ transition:none; } }