/* Shared by the census and the tools that read it. Tokens come from
   /assets/product.css; nothing here defines a colour of its own. */
.wrap{max-width:62rem;margin:0 auto;padding:0 1.4rem}
.head{padding:3.4rem 0 1.6rem}
.head h1{font-family:var(--display);font-weight:660;font-size:clamp(2rem,4.4vw,3.2rem);
  line-height:1.02;letter-spacing:-.032em;margin:.6rem 0 1rem}
.head h1 em{font-style:normal;color:var(--green)}
.head .sub{font-size:1.08rem;color:var(--txt2);max-width:42rem;margin:0}
.kicker{font-family:var(--mono,ui-monospace,monospace);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--txt3)}
.kicker a{color:inherit}
.tool{border:1px solid var(--line2);border-radius:var(--r-s,14px);background:var(--card);
  box-shadow:var(--shadow);padding:1.6rem 1.6rem 1.4rem;margin:1.2rem 0 2.4rem}
.field{display:flex;gap:.9rem;align-items:flex-end;flex-wrap:wrap}
.field label,.field .who{display:block;font-size:.86rem;color:var(--txt2);margin-bottom:.42rem}
.field input,.field select{font:inherit;padding:.55rem .7rem;border:1px solid var(--line2);
  border-radius:10px;background:var(--bg);color:var(--txt)}
.field input[type=number],.field input[type=date]{font-size:1.35rem;font-weight:600;width:9rem}
.field input[type=text]{font-size:1rem;width:min(34rem,100%)}
.verdict{margin:1.5rem 0 .3rem;font-size:1.22rem;line-height:1.45;font-weight:520}
.verdict b{color:var(--green);font-weight:700}
.verdict .warn{color:var(--amber-big)}
.verdict .muted{color:var(--txt2);font-weight:400;font-size:.95rem;display:block;margin-top:.5rem}
.bars{margin:1.5rem 0 .4rem;border-top:1px solid var(--line);padding-top:1.1rem}
.bar{display:grid;grid-template-columns:10.5rem 1fr 5.5rem;gap:.8rem;align-items:center;
  margin:.5rem 0;font-size:.9rem}
.bar .t{color:var(--txt2)}
.bar .track{background:var(--bg2);border-radius:999px;height:1.5rem;position:relative;overflow:hidden}
.bar .fill{height:100%;background:var(--green);border-radius:999px;transition:width .35s cubic-bezier(.2,.7,.3,1)}
.bar.you .fill{background:var(--amber-big)}
.bar .n{text-align:right;font-weight:640;font-variant-numeric:tabular-nums}
.bar .sub{font-size:.76rem;color:var(--txt3)}
@media (max-width:560px){.bar{grid-template-columns:7rem 1fr 4rem}}
.method{border-top:1px solid var(--line);margin-top:2rem;padding-top:1.4rem;
  font-size:.95rem;color:var(--txt2);line-height:1.62}
.method h2{font-size:1.02rem;font-weight:660;color:var(--txt);margin:1.7rem 0 .55rem}
.method h2:first-child{margin-top:0}
.method p b{color:var(--txt)}
.method code{font-family:ui-monospace,monospace;font-size:.86em;background:var(--bg2);
  padding:.1em .38em;border-radius:5px}
.method table{border-collapse:collapse;width:100%;margin:.7rem 0 1rem;font-size:.9rem}
.method th,.method td{text-align:left;padding:.42rem .7rem .42rem 0;border-bottom:1px solid var(--line);
  vertical-align:top}
.method th{font-weight:640;color:var(--txt)}
.method td.n,.method th.n{text-align:right;font-variant-numeric:tabular-nums;padding-right:0;padding-left:.9rem;white-space:nowrap}
.method td .sub{font-style:normal;font-size:.78rem;color:var(--txt3);margin-top:.15rem}
.method .tbl{overflow-x:auto}
.method details{margin:.5rem 0 1rem}
.method summary{cursor:pointer;color:var(--txt);font-weight:600}
.method .line{font-style:italic;color:var(--txt)}
.dist{margin:.8rem 0 1rem}
.dist .row{display:grid;grid-template-columns:7rem 1fr 6.5rem;gap:.8rem;align-items:center;margin:.35rem 0;font-size:.88rem}
.dist .track{background:var(--bg2);border-radius:6px;height:1.1rem;overflow:hidden}
.dist .fill{height:100%;background:var(--green)}
.dist .n{text-align:right;font-variant-numeric:tabular-nums}
.note{color:var(--txt3);font-size:.86rem;margin-top:1.6rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.next{margin:2.2rem 0 0;padding:1.2rem 1.4rem;border:1px solid var(--line2);border-radius:var(--r-s,14px);background:var(--panel,var(--card))}
.next h3{margin:0 0 .4rem;font-size:1rem}
.next a{color:var(--green);font-weight:600}
footer.small{display:block;margin:3rem 0 4rem;font-size:.84rem;color:var(--txt3);line-height:1.7}
footer.small .links{margin-bottom:.5rem}
footer.small a{color:var(--txt2)}

/* Said to a screen reader, not shown. A results table needs a caption
   and a caption on the page would repeat the heading above it. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
