/* TapDrillSize design: "calm and clear" (brandbook.md, version 6). Cool steel ground, graphite ink, white panels, yellow only on the answer numeral and drill tags. */
@font-face{font-family:'Big Shoulders Display';font-style:normal;font-weight:700 900;font-display:swap;src:url(/fonts/big-shoulders-display-latin.woff2) format('woff2')}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/public-sans-latin.woff2) format('woff2')}
:root{color-scheme:light;--ground:#e3e7ea;--ink:#14181c;--ink-2:#454e56;--line:#bcc4ca;--paper:#fff;--soft:#eef1f3;--yellow:#f2c300;--pale:#fff4bf;--r-s:4px;--r-m:8px;--r-l:16px;
--display:'Big Shoulders Display',Impact,'Arial Narrow',sans-serif;--body:'Public Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--mono:ui-monospace,Consolas,'SF Mono',monospace;--ease:cubic-bezier(.2,0,0,1)}
*{box-sizing:border-box}
html{-webkit-tap-highlight-color:rgba(20,24,28,.12);scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--ink);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.wrap{max-width:74rem;margin:0 auto;padding-left:max(1.25rem,env(safe-area-inset-left));padding-right:max(1.25rem,env(safe-area-inset-right))}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6rem 1rem;z-index:10}
.skip:focus{left:0}
h1,h2,h3{text-wrap:balance}

/* header */
.site-header{border-bottom:3px solid var(--ink)}
.site-header .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding-top:1rem;padding-bottom:1rem}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:800 1.7rem/1 var(--display)}
.brand svg{flex:none}
.site-header nav{display:flex;flex-wrap:wrap;gap:.1rem 1.25rem;font-weight:600;font-size:.97rem}
.site-header nav a{text-decoration:none;padding:.4rem .1rem;border-bottom:3px solid transparent;transition:border-color 120ms var(--ease)}
.site-header nav a[aria-current]{border-color:var(--ink)}
main{padding-top:1.5rem;padding-bottom:3rem}
h1{font:900 clamp(2.4rem,5vw,3.6rem)/.98 var(--display);margin:.25rem 0 1rem;letter-spacing:.005em}
h2{font:900 clamp(1.8rem,3vw,2.3rem)/1.05 var(--display);margin:2.5rem 0 .75rem}
main>h2,main>section>h2,.faq-wrap h2{padding-top:.7rem;border-top:3px solid var(--ink)}
h3{font:800 1.4rem/1.15 var(--display);margin:0 0 .3rem}
main p,main li{max-width:46rem}
.crumbs{font-size:.85rem;color:var(--ink-2);margin-bottom:.5rem}
.crumbs a{color:var(--ink-2)}

/* answer box, notes */
.answer{font-size:1.125rem;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r-m);padding:.9rem 1.1rem;max-width:46rem}
.note,.sources{font-size:.88rem;color:var(--ink-2)}
small{color:var(--ink-2)}
.sources{border-top:1px solid var(--line);padding-top:1rem;margin-top:2rem}

/* tables */
.table-wrap{overflow-x:auto;margin:.9rem 0;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r-m)}
table{border-collapse:collapse;width:100%;font-size:.95rem;font-variant-numeric:tabular-nums}
th,td{padding:.55rem .75rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{background:var(--ink);color:#fff;font-weight:700;font-size:.88rem}
tbody tr:last-child td{border-bottom:0}
tr.hl td{background:var(--pale);font-weight:700}

/* faq, lists */
.faq{margin:1.1rem 0}
.faq p{margin:.15rem 0}
.related{padding-left:1.2rem}
ul.plain{margin:.5rem 0;padding-left:1.2rem}
ul.plain li{margin:.3rem 0}
input[type=search]{font:inherit;padding:.5rem .7rem;border:2px solid var(--ink);border-radius:var(--r-s);background:#fff;color:var(--ink);width:min(100%,18rem)}
input::placeholder{color:var(--ink-2)}
button{font:700 1rem var(--body);padding:.6rem 1.1rem;border:2px solid var(--ink);background:var(--ink);color:#fff;border-radius:var(--r-s);cursor:pointer;touch-action:manipulation;min-height:2.75rem;transition:transform 120ms var(--ease)}
button:active{transform:translateY(1px)}

/* on-this-page chips, facts, steps */
.toc{display:flex;flex-wrap:wrap;gap:.4rem .5rem;align-items:center;margin:1rem 0;font-size:.92rem}
.toc span{color:var(--ink-2);margin-right:.25rem}
.toc a{text-decoration:none;border:2px solid var(--ink);border-radius:var(--r-s);padding:.2rem .65rem;background:var(--paper);font-weight:600;transition:background-color 120ms var(--ease),color 120ms var(--ease)}
dl.facts{margin:.75rem 0;display:grid;gap:0;border:2px solid var(--ink);border-radius:var(--r-m);background:var(--paper);overflow:hidden}
dl.facts div{display:grid;grid-template-columns:6rem 1fr;gap:.75rem;align-items:baseline;padding:.65rem .9rem;border-bottom:1px solid var(--line)}
dl.facts div:last-child{border-bottom:0}
dl.facts dt{font:800 1.35rem/1 var(--display)}
dl.facts dd{margin:0}
ol.steps{list-style:none;counter-reset:s;padding:0;margin:.75rem 0;display:grid;gap:.5rem}
ol.steps li{counter-increment:s;position:relative;padding:.7rem .9rem .7rem 3.4rem;background:var(--paper);border:2px solid var(--ink);border-radius:var(--r-m);max-width:46rem}
ol.steps li::before{content:counter(s);position:absolute;left:.9rem;top:.7rem;width:1.7rem;height:1.7rem;aspect-ratio:1;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;display:grid;place-items:center;font-size:.95rem;line-height:1}

/* calculator */
.calc{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-l);padding:1.4rem;display:grid;gap:1.35rem;margin:1rem 0;max-width:40rem}
.step{display:grid;gap:.55rem;min-width:0}
.step-title{display:flex;align-items:center;gap:.6rem;font:800 1.35rem/1.1 var(--display)}
.n{flex:none;align-self:center;display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;min-width:1.7rem;aspect-ratio:1;border-radius:50%;line-height:1;background:var(--ink);color:#fff;font:700 .95rem var(--body)}
.calc input[type=search],.calc input[type=number],.calc select{width:100%;font:600 1.1rem var(--body);padding:.7rem .8rem;border:2px solid var(--ink);border-radius:var(--r-s);background:#fff;color:var(--ink)}
.calc input[type=search]{font:800 2rem/1.1 var(--display);padding:.55rem .8rem}
.try{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem;color:var(--ink-2);font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.calc .chip{font:700 1rem var(--body);background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:var(--r-s);padding:.4rem .75rem;min-height:2.75rem;transition:background-color 120ms var(--ease),color 120ms var(--ease),transform 120ms var(--ease)}
.seg{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}
.seg .step-title{grid-column:1/-1;margin-bottom:.15rem;align-self:start}
.seg label{display:flex;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label>span{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.1rem;min-height:4.75rem;padding:.5rem .7rem;border:2px solid var(--ink);border-radius:var(--r-s);line-height:1.2;transition:background-color 120ms var(--ease),color 120ms var(--ease)}
.seg b{font-weight:800}
.seg small{font-size:.82rem;color:var(--ink-2)}
.seg input:checked+span{background:var(--ink);color:#fff}
.seg input:checked+span small{color:#d5dadf}
.seg input:focus-visible+span{outline:3px solid var(--ink);outline-offset:3px}
.hint{grid-column:1/-1;margin:0;font-size:.9rem;color:var(--ink-2)}
.result{min-height:9.5rem}
.result .answer{margin:0;padding:1.1rem 1.2rem;background:var(--ink);color:#e9edf0;border:0;border-radius:var(--r-m);font-size:1.02rem;max-width:none}
.result .answer strong{display:block;font:900 clamp(3.75rem,9vw,5.75rem)/.95 var(--display);color:var(--yellow);margin:.1rem 0 .25rem}
@keyframes swap{from{opacity:.3;transform:translateY(8px)}to{opacity:1;transform:none}}
.result .answer strong.fresh{animation:swap 160ms var(--ease)}
.result p{margin:.7rem 0 0}
.result .alt{color:var(--ink-2);font-size:.95rem}
.result a{font-weight:700}
.have{display:grid;gap:.4rem;border-top:2px solid var(--line);padding-top:1rem}
.have .step-title{font-size:1.15rem}
.more{border-top:2px solid var(--line);padding-top:.9rem}
.more summary{cursor:pointer;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.more[open] summary{margin-bottom:.9rem}
.custom{display:grid;gap:.8rem;border:2px dashed var(--ink);border-radius:var(--r-m);padding:.9rem;margin:0}
.custom legend{font-weight:700;padding:0 .3rem}
.calc-label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.3rem}
.custom label{display:block}

/* home */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:2.5rem;padding:1.5rem 0 2.5rem;align-items:start}
.hero h1{font-size:clamp(3rem,6.5vw,5.25rem);line-height:.92;margin:0 0 1rem}
.lede{font-size:1.2rem;max-width:30ch;margin:0 0 1.5rem;color:var(--ink-2)}
.how{border-top:3px solid var(--ink);padding-top:.9rem;max-width:34ch;font-size:.98rem;color:var(--ink-2)}
.how b{display:block;color:var(--ink);font:800 1.5rem/1.1 var(--display);margin-bottom:.15rem}
.hero .calc{margin:0;max-width:none}
.index{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r-l);padding:1.5rem 1.5rem 1.75rem;margin:1rem 0}
.index h2{border:0;padding:0;margin:0 0 .3rem}
.index .lead{margin:0 0 1rem;color:var(--ink-2)}
.cols{display:grid;grid-template-columns:1fr 1.7fr 1.3fr;gap:2.5rem}
.col h3{display:flex;justify-content:space-between;align-items:baseline;font:800 1.5rem/1 var(--display);margin:0;padding-bottom:.5rem;border-bottom:3px solid var(--ink)}
.col h3 small{font:600 .85rem var(--body)}
.cap{display:flex;justify-content:space-between;font-size:.82rem;color:var(--ink-2);padding:.4rem 1.6rem .3rem 0;border-bottom:1px solid var(--line)}
.col ul{list-style:none;margin:0;padding:0;max-width:none}
.col.wide ul{columns:2;column-gap:2rem}
.col li{break-inside:avoid;border-bottom:1px solid var(--line);max-width:none}
.col li[hidden],.col[hidden]{display:none}
.col a{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;min-height:2.75rem;text-decoration:none;transition:background-color 120ms var(--ease),padding 120ms var(--ease)}
.col a b{font:800 1.3rem/1 var(--display);flex:1;white-space:nowrap}
.tag{font:700 .85rem var(--mono);background:var(--yellow);padding:.12rem .4rem;border-radius:var(--r-s);white-space:nowrap}
.col a .go{color:var(--ink-2);flex:none;transition:transform 120ms var(--ease),color 120ms var(--ease)}
.guide-row{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:.5rem 2.5rem;border-top:3px solid var(--ink);padding:1.25rem 0 1rem}
.guide-row h2{border:0;padding:0;margin:0;font-size:clamp(1.6rem,2.6vw,2rem)}
.guide-row p,.guide-row li{color:var(--ink-2)}
.guide-row p,.guide-row ul{margin:0 0 .8rem}
.guide-row a{color:var(--ink);font-weight:600}

/* embed */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.embed{background:var(--ground)}
.embed-main{padding:12px}
.embed .calc{margin:0;max-width:none;padding:.9rem;gap:.9rem;border-width:2px}
.embed .step-title{font-size:1.2rem}
.embed .calc input[type=search]{font-size:1.6rem;padding:.4rem .7rem}
.embed .result{min-height:0}
.embed .result .answer{padding:.8rem 1rem}
.embed .result .answer strong{font-size:clamp(3rem,10vw,4rem)}
.embed .seg label>span{min-height:3.75rem}
.embed .hint{display:none}
.embed .have{padding-top:.7rem}
.embed-credit{margin:.6rem 0 0;font-size:.85rem;color:var(--ink-2)}
.picker{border:2px solid var(--ink);border-radius:var(--r-m);background:var(--paper);padding:.5rem 1rem 1rem;display:grid;gap:.4rem;max-width:46rem}
.picker legend{font-weight:700;padding:0 .4rem}
.picker label{display:flex;gap:.6rem;align-items:center;min-height:2.75rem;cursor:pointer}
.picker input{width:1.1rem;height:1.1rem;accent-color:var(--ink)}
.code{width:100%;max-width:46rem;font:.85rem/1.5 var(--mono);padding:.8rem;border:2px solid var(--ink);border-radius:var(--r-m);background:var(--paper);color:var(--ink);resize:vertical}
.preview{max-width:660px}
.embed-frame{width:100%;max-width:640px;height:840px;border:2px solid var(--line);border-radius:var(--r-m);background:var(--ground)}
.print-only,.print-brand{display:none}
/* contact popup */
.contact-dialog{border:3px solid var(--ink);border-radius:var(--r-l);padding:1.4rem;width:min(32rem,calc(100vw - 2rem));max-height:calc(100vh - 2rem);overflow:auto;background:var(--paper);color:var(--ink);animation:pop 160ms var(--ease)}
.contact-dialog::backdrop{background:rgba(20,24,28,.6)}
.contact-dialog h2{margin:0 0 .4rem}
.contact-dialog form{display:grid;gap:.9rem;margin:.9rem 0}
.contact-dialog label{display:block}
.contact-dialog select,.contact-dialog textarea,.contact-dialog input[type=email]{width:100%;font:600 1.05rem var(--body);padding:.6rem .75rem;border:2px solid var(--ink);border-radius:var(--r-s);background:#fff;color:var(--ink)}
.contact-dialog textarea{resize:vertical;font-weight:500}
.contact-actions{display:flex;flex-wrap:wrap;gap:.6rem}
.ghost{background:#fff;color:var(--ink)}
.hp{position:absolute;left:-999px;width:1px;height:1px;overflow:hidden}
#contact-status{margin:0;font-weight:600;min-height:1.5rem}
@keyframes pop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* footer */
.site-footer{background:var(--ink);color:#e9edf0;padding:2rem 0;font-size:.92rem}
.site-footer a{color:#e9edf0}
.footer-cols{display:grid;grid-template-columns:repeat(3,minmax(0,12rem));gap:1.5rem 3rem}
.footer-h{font:800 1.2rem/1 var(--display);color:var(--yellow);margin:0 0 .6rem}
.footer-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.footer-cols a{display:inline-block;padding:.2rem 0}
.footer-note{color:#c3cad0;margin:1.5rem 0 0;padding-top:1rem;border-top:1px solid #3a434b;max-width:46rem}
.site-footer :focus-visible{outline-color:#fff}

@media (hover:hover){
  .site-header nav a:hover{border-color:var(--ink)}
  .toc a:hover,.calc .chip:hover{background:var(--ink);color:#fff}
  .col a:hover{background:var(--soft);padding-left:.5rem}
  .col a:hover .go{transform:translateX(3px);color:var(--ink)}
  .site-footer a:hover{color:var(--yellow)}
}
@media (max-width:900px){
  .hero,.guide-row{grid-template-columns:minmax(0,1fr)}
  .hero{padding-top:.5rem}
  .cols{grid-template-columns:minmax(0,1fr);gap:2rem}
  .col.wide ul{columns:1}
}
@media (max-width:36rem){
  .site-header .wrap{padding-top:.6rem;padding-bottom:.4rem}
  .site-header nav{gap:0 .9rem;font-size:.9rem}
  .site-header nav a{padding:.25rem 0}
  .calc{padding:1rem}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .seg label>span{min-height:4.25rem;padding:.45rem .5rem}
  dl.facts div{grid-template-columns:1fr;gap:.1rem}
  .calc input[type=search]{font-size:1.6rem}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}.contact-dialog{animation:none}.result .answer strong.fresh{animation:none}html{scroll-behavior:auto}}

/* print: charts on paper, no chrome */
@page chart{size:landscape;margin:12mm}
@media print{
  body{background:#fff;font-size:11pt}
  .site-header,.site-footer,input,label,.calc,.toc,.noprint,button{display:none}
  body.chart{page:chart}
  .skip{display:none}
  .print-brand{display:flex;align-items:center;gap:.5rem;border-bottom:2px solid #000;padding-bottom:.35rem;margin-bottom:.6rem}
  .print-brand b{font:800 18pt/1 var(--display)}
  .print-brand span{margin-left:auto;font-size:10pt}
  th{background:#ddd;color:#000}
  .table-wrap{border:1px solid #000}
  th,td{padding:.2rem .4rem}
  .cols{grid-template-columns:repeat(3,1fr)}
  .print-only{display:block;font-size:9pt}
  body.chart-lean main>:not(h1):not(.answer):not(.table-wrap):not(.print-only):not(.sources){display:none}
  body.chart-lean .sources{border:0;margin-top:.4rem}
  body.chart-lean table{font-size:8pt}
  body.chart-lean th,body.chart-lean td{white-space:nowrap;padding:.06rem .35rem}
  body.chart-lean h1{font-size:20pt;margin:0 0 .3rem}
  body.chart-lean .answer{font-size:9pt;padding:.3rem .5rem;margin-bottom:.4rem}
}