/* Shared look for the tool pages.
   One file so detect, compress and match can't drift apart the way the
   headers did. */

:root{--acid:#2563EB;--moss:#1D4ED8;--ink:#0B0D10;--bone:#F8FAFC;
      --line:rgba(15,23,42,.12);--warn:#1E40AF;--bad:#1E3A8A}
*{box-sizing:border-box;margin:0;padding:0}
body{background:#FFFFFF;color:var(--ink);font-family:Archivo,system-ui,sans-serif;
     font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
     position:relative}
a{color:var(--acid)}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--acid);outline-offset:3px}
.hide{display:none !important}

.wrap{max-width:860px;margin:0 auto;padding:44px 24px 110px;position:relative;z-index:2}
.kick{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.13em;
      color:var(--acid)}
h1{margin-top:12px;font-weight:900;text-transform:uppercase;
   font-size:clamp(30px,6vw,50px);line-height:.92;letter-spacing:-.04em}
.sub{margin-top:16px;opacity:.72;max-width:58ch}

/* drop zone */
.drop{display:block;margin-top:32px;position:relative;
      border:1.5px dashed rgba(15,23,42,.22);
      background:rgba(248,250,252,.72);padding:48px 24px;text-align:center;cursor:pointer;
      transition:border-color .2s,background .2s,box-shadow .2s;z-index:1}
.drop:hover,.drop.over{border-color:var(--acid);background:#EFF6FF;
                       box-shadow:0 0 0 4px rgba(37,99,235,.08)}
.drop.set{border-style:solid;border-color:var(--acid)}
.drop b{display:block;font-size:19px;font-weight:800}
.drop span{display:block;margin-top:7px;font-size:14px;opacity:.5}
.drop input{position:absolute;inset:0;opacity:0;cursor:pointer}

.two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:32px;
     position:relative;z-index:1}
@media (max-width:640px){ .two{grid-template-columns:1fr} }
.two .drop{margin-top:0;padding:34px 18px}
.two .lbl{font-size:11.5px;font-weight:700;text-transform:uppercase;
          letter-spacing:.1em;opacity:.5;margin-bottom:9px}

/* options */
.seg{margin-top:22px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
     gap:1px;background:var(--line);position:relative;z-index:1}
@media (max-width:520px){ .seg{grid-auto-flow:row} }
.seg button{background:#F8FAFC;border:0;color:var(--ink);font:inherit;font-size:15px;
            padding:14px 10px;cursor:pointer;transition:background .15s,color .15s}
.seg button:hover{background:#EFF6FF;color:var(--acid)}
.seg button[aria-pressed="true"]{background:var(--acid);color:#FFFFFF;font-weight:800}
.seg button small{display:block;font-size:11.5px;opacity:.62;font-weight:400;margin-top:2px}
.seg button[aria-pressed="true"] small{opacity:.7}

.go{display:block;margin-top:24px;width:100%;padding:17px;background:var(--acid);
    color:#FFFFFF;border:2px solid var(--acid);font:inherit;font-size:16px;
    font-weight:900;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;
    position:relative;z-index:1}
.go:hover:not([disabled]){background:transparent;color:var(--acid)}
.go[disabled]{cursor:not-allowed;background:#E2E8F0;border-color:#E2E8F0;
              color:rgba(15,23,42,.4)}
.go[disabled]:hover{background:#E2E8F0;color:rgba(15,23,42,.4)}

.msg{margin-top:20px;padding:15px 17px;border-left:3px solid var(--acid);
     background:#EFF6FF;font-size:15px}
.msg.bad{border-left-color:var(--bad);background:#F1F5F9}

/* results */
.res{margin-top:34px;border-top:1px solid var(--line);padding-top:30px;
      position:relative;z-index:1}
.big{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.big .n{font-size:clamp(46px,10vw,78px);font-weight:900;letter-spacing:-.05em;
        line-height:1;color:var(--acid)}
.big .n.warn{color:var(--warn)} .big .n.bad{color:var(--bad)}
.big .of{font-size:16px;opacity:.55}
.verdict{margin-top:10px;font-size:19px;font-weight:800;letter-spacing:-.02em}

.rows{margin-top:26px;display:grid;gap:2px;background:var(--line);
      border:1px solid var(--line);position:relative;z-index:1}
.row{background:#F8FAFC;padding:15px 18px;display:flex;gap:16px;align-items:baseline}
.row .k{font-size:13px;opacity:.5;min-width:132px}
.row .v{font-weight:600;word-break:break-word}
.row .why{font-size:13px;opacity:.5;margin-top:3px}

.flag{margin-top:18px;padding:17px 19px;border:1px solid var(--line);background:#F8FAFC;
      border-left:3px solid var(--warn);position:relative;z-index:1}
.flag.ok{border-left-color:var(--acid)}
.flag b{display:block;font-size:16px}
.flag p{margin-top:6px;font-size:14px;opacity:.7}

.meter{margin-top:20px;height:10px;background:rgba(15,23,42,.08);overflow:hidden}
.meter i{display:block;height:100%;background:var(--acid);transition:width .6s ease}
.scale{margin-top:8px;display:flex;justify-content:space-between;font-size:12px;opacity:.45}

.dl{display:inline-block;margin-top:22px;background:var(--acid);color:#FFFFFF;
    text-decoration:none;padding:15px 28px;font-weight:900;text-transform:uppercase;
    border:2px solid var(--acid)}
.dl:hover{background:transparent;color:var(--acid)}

.note{margin-top:30px;font-size:13.5px;opacity:.5;max-width:62ch;line-height:1.6}

.spin{display:inline-block;width:15px;height:15px;border:2px solid rgba(255,255,255,.35);
      border-top-color:#FFFFFF;border-radius:50%;animation:sp .8s linear infinite;
      vertical-align:-2px;margin-right:8px}
@keyframes sp{to{transform:rotate(360deg)}}


/* The tool pages are for doing a job. The drifting marks stay well back so
   nothing competes with a result you're trying to read. */
.vfield{opacity:.35}
.wrap{position:relative;z-index:2}