/* Instruments sit on the same page grid as the rest of the site.
   The Finder keeps a reading measure. The Converter uses the full desk. */

.tool-quiz{max-width:40rem}
.tool-lead{margin-bottom:16px;max-width:40rem}

.tool-desk{display:grid;gap:16px}
@media (min-width:1100px){
  .tool-desk.split{
    grid-template-columns:minmax(22rem,5fr) minmax(28rem,7fr);
    align-items:start;
  }
  .tool-desk.split .card{margin:16px 0 0}
  .tool-desk.split #input textarea{min-height:22rem}
}

.tool-main .card{
  background:var(--card);
  border:1px solid var(--rule);
  padding:16px 16px 20px;
  margin:16px 0;
}
.tool-main .card h2{margin-bottom:8px}

.tool-main .qnum{
  font-family:"EB Garamond",sans-serif;
  letter-spacing:.12em;text-transform:uppercase;
  font-size:13px;color:var(--oxide);font-weight:700;
}
.tool-main .qtext{
  font-family:"EB Garamond",Georgia,serif;
  font-size:22px;line-height:30px;font-weight:600;
  margin:8px 0 16px;
}
.tool-main .answers{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(7.4rem,1fr));
  gap:8px;
}
.tool-main button{
  cursor:pointer;
  font-family:"EB Garamond",sans-serif;
  font-size:14px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  border:2px solid var(--ink);
  background:var(--chalk);
  color:var(--ink);
  padding:10px 12px;
}
.tool-main button:hover{border-color:var(--oxide);color:var(--oxide)}
.tool-main button.primary{background:var(--oxide);border-color:var(--oxide);color:var(--chalk)}
.tool-main button.primary:hover{background:var(--ink);border-color:var(--ink);color:var(--chalk)}

.tool-main .dots{display:flex;flex-wrap:wrap;gap:4px;margin-top:16px}
.tool-main .dot{width:8px;height:8px;background:var(--rule)}
.tool-main .dot.done{background:var(--oxide)}
.tool-main .musing{color:var(--muted);margin-top:12px;min-height:22px;font-size:16px}

.tool-main .reveal h2{color:var(--oxide);font-size:28px;line-height:32px}
.tool-main .reveal .confidence{color:var(--muted);font-size:14px;margin-bottom:12px}
.tool-main .reveal .why{
  border-left:6px solid var(--oxide);
  background:var(--chalk);
  padding:12px 14px;
  margin:16px 0;
}
.tool-main .solution{
  border:1px solid var(--rule);
  padding:14px;
  margin-top:12px;
  background:var(--chalk);
}
.tool-main .solution .tag{
  display:inline-block;
  font-family:"EB Garamond",sans-serif;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--chalk);background:var(--steel);
  padding:2px 8px;margin-bottom:6px;
}
.tool-main .runnerup{color:var(--muted);margin-top:16px}
.tool-main .actions{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}

.tool-main .gate{
  border:1px solid var(--rule);
  padding:16px;
  margin-top:16px;
  background:var(--chalk);
}
.tool-main .gate .gsub{color:var(--muted);margin-bottom:12px}
.tool-main .gate .fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:8px}
.tool-main .gate input,
.tool-main textarea,
.tool-main select,
.tool-main input[type=file]{
  font:inherit;
  background:var(--paper-2);
  color:var(--ink);
  border:1px solid var(--rule);
  padding:8px 10px;
  width:100%;
}
.tool-main textarea{
  min-height:11rem;
  font-family:"EB Garamond",ui-monospace,monospace;
  font-size:14px;
  margin:8px 0;
}
.tool-main .privacy{font-size:14px;color:var(--muted);margin-top:12px}
.tool-main .hidden{display:none}
.tool-main .trap{position:absolute;left:-5000px;width:1px;height:1px;overflow:hidden}
.tool-main .gerr{color:var(--oxide);margin-top:8px;min-height:16px}
.tool-main .gnote{color:var(--faint);font-size:14px;margin-top:8px}

.tool-main table{width:100%;border-collapse:collapse;margin:16px 0;font-size:16px}
.tool-main th,.tool-main td{border:1px solid var(--rule);padding:8px;text-align:left;vertical-align:top}
.tool-main th{
  background:var(--steel);color:var(--chalk);
  font-family:"EB Garamond",sans-serif;
  letter-spacing:.08em;text-transform:uppercase;font-size:13px;
}
.tool-main td.num{text-align:right;font-family:"EB Garamond",monospace}
.tool-main select{width:auto}

.tool-main .metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:16px 0}
@media (max-width:800px){.tool-main .metrics{grid-template-columns:1fr}}
.tool-main .metric{
  position:relative;
  border:1px solid var(--rule);
  background:var(--chalk);
  padding:16px 36px 16px 16px;
}
.tool-main .metric .label{
  font-family:"EB Garamond", Garamond, serif;
  letter-spacing:.06em;text-transform:uppercase;
  font-size:14px;color:var(--oxide);font-weight:600;
}
.tool-main .metric .formula{text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted)}
.tool-main .metric .value{
  font-family:"EB Garamond", Garamond, serif;
  font-size:32px;line-height:36px;font-weight:600;
  margin:8px 0 8px;
}
.tool-main .metric .note{font-size:15px;line-height:22px;color:var(--muted)}
.tool-main #core .metric{border-color:var(--oxide);border-width:2px}
.tool-main .info{
  position:absolute;top:10px;right:10px;
  width:20px;height:20px;padding:0;
  border:1px solid var(--rule);
  border-radius:50%;
  background:var(--card);
  color:var(--ink);
  font-family:"EB Garamond", Garamond, serif;
  font-size:13px;font-style:italic;font-weight:600;
  letter-spacing:0;text-transform:none;
  line-height:18px;
}
.tool-main .info:hover,.tool-main .info:focus{border-color:var(--oxide);color:var(--oxide)}
.tool-main .tip{
  display:none;
  position:absolute;
  top:36px;right:8px;
  width:min(17rem,72vw);
  background:var(--ink);
  color:var(--chalk);
  padding:10px 12px;
  font-size:15px;line-height:22px;
  z-index:6;
}
.tool-main .info:hover + .tip,
.tool-main .info:focus + .tip,
.tool-main .info:focus-visible + .tip,
.tool-main .metric.is-open .tip{display:block}
@media (hover:none){
  .tool-main .info:hover + .tip{display:none}
  .tool-main .metric.is-open .tip{display:block}
}
.tool-main .verdict{
  border-left:6px solid var(--oxide);
  background:var(--chalk);
  padding:12px 14px;
  margin:16px 0;
}
.tool-main .warn{color:var(--oxide)}
#report{display:none}

@media print{
  @page{margin:14mm}
  body,.mast,.site-foot,.skip,body::before{ }
  .mast,.site-foot,.skip,.tool-main button,.tool-main .privacy,input[type=file]{display:none !important}
  body{background:#fff;color:#111}
  #report{display:block;font-size:10.5pt;line-height:1.45}
}