/* justtheunits.com — printed reference card, not a SaaS landing page. */

:root{
  --paper:#f5f2ea; --sunk:#eae4d6; --ink:#16150f; --ink2:#57533f;
  --rule:#cbc3ae; --rule2:#a89f86;
  --ok:#0d5c3c; --okbg:#e2eee6;
  --warn:#a1291b; --warnbg:#f6e5df;
  --mark:#f3e79a;
  --measure:34rem;
}
@media (prefers-color-scheme:dark){
  :root:not([data-t="light"]){
    --paper:#191712; --sunk:#221f18; --ink:#e9e3d2; --ink2:#9c9581;
    --rule:#3b362b; --rule2:#544d3e;
    --ok:#57c08c; --okbg:#16281f;
    --warn:#e4796a; --warnbg:#2c1a16;
    --mark:#4a3f14;
  }
}
:root[data-t="dark"]{
  --paper:#191712; --sunk:#221f18; --ink:#e9e3d2; --ink2:#9c9581;
  --rule:#3b362b; --rule2:#544d3e;
  --ok:#57c08c; --okbg:#16281f;
  --warn:#e4796a; --warnbg:#2c1a16;
  --mark:#4a3f14;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.5 "Public Sans","Helvetica Neue",Arial,sans-serif;
  padding:0 1.15rem 5rem;
}
.mono,input,select,td.n,.big,.tick{font-family:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;font-variant-numeric:tabular-nums}
.w{max-width:46rem;margin:0 auto}
.t{max-width:var(--measure)}

/* ---- masthead: a stamp, not a nav bar ---- */
header{border-bottom:2px solid var(--ink);margin:0 auto 1.6rem;padding:1.1rem 0 .5rem;max-width:46rem;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.1rem}
header a.brand{
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.94rem;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
header nav{display:flex;gap:1.1rem;flex-wrap:wrap;font-size:.86rem;margin-left:auto}
header nav a{color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--rule)}
header nav a:hover,header nav a[aria-current]{color:var(--ink);border-color:var(--ink)}

h1{font-size:1.72rem;line-height:1.16;font-weight:800;letter-spacing:-.017em;margin:.2rem 0 .55rem;max-width:20ch}
h2{font-size:1.06rem;font-weight:800;letter-spacing:.01em;margin:2.4rem 0 .6rem;
   padding-top:.5rem;border-top:1px solid var(--rule)}
h3{font-size:.97rem;font-weight:700;margin:1.5rem 0 .35rem}
p{margin:0 0 .85rem;max-width:var(--measure)}
a{color:var(--ink);text-underline-offset:2px;text-decoration-thickness:1px}
.lede{color:var(--ink2);font-size:1.02rem;margin-bottom:1.5rem}
small,.sm{font-size:.83rem;color:var(--ink2)}

/* ---- the tool ---- */
.tool{border:2px solid var(--ink);background:var(--sunk);padding:1rem 1rem .9rem;margin:0 0 1.5rem}
.toolhead{font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:.85rem;display:flex;justify-content:space-between;gap:1rem}
.row{display:flex;flex-wrap:wrap;gap:.85rem;margin-bottom:.7rem}
.f{flex:1 1 8.5rem;min-width:7.5rem}
.f label{display:block;font-size:.76rem;font-weight:700;letter-spacing:.03em;margin-bottom:.22rem;color:var(--ink2)}
.f .u{font-weight:400;letter-spacing:0}
input,select{
  width:100%;padding:.44rem .5rem;font-size:1rem;background:var(--paper);color:var(--ink);
  border:1px solid var(--rule2);border-radius:0;
}
input:focus,select:focus{outline:2px solid var(--ink);outline-offset:-1px}
input[type=number]{-moz-appearance:textfield}

/* ---- the answer ---- */
.ans{border-top:2px solid var(--ink);margin-top:1rem;padding-top:.8rem}
.big{font-size:clamp(2.6rem,11vw,3.9rem);line-height:1;font-weight:500;color:var(--ok);letter-spacing:-.03em}
.big s{text-decoration:none;font-size:.34em;letter-spacing:.04em;font-weight:400;color:var(--ink2);margin-left:.45em}
.sub{font-size:.95rem;margin-top:.45rem;color:var(--ink)}
.aux{font-size:.83rem;color:var(--ink2);margin-top:.3rem}
.aux b{font-weight:500;color:var(--ink)}

/* ---- syringe ---- */
.syr{margin:1rem 0 .2rem;overflow-x:auto}
.syr svg{display:block;min-width:20rem;width:100%;height:auto}

/* ---- notices ---- */
.note{border-left:3px solid var(--rule2);padding:.5rem 0 .5rem .8rem;margin:1.1rem 0;font-size:.92rem;color:var(--ink2);max-width:var(--measure)}
.flag{border:1px solid var(--warn);background:var(--warnbg);color:var(--warn);
  padding:.55rem .7rem;margin:.8rem 0 0;font-size:.9rem;font-weight:500;max-width:var(--measure)}
.flag b{font-weight:800}
.flag[hidden]{display:none}

/* ---- presets: little tabs, hand-cut ---- */
.pre{display:flex;flex-wrap:wrap;gap:.3rem;margin:.1rem 0 1.1rem}
.pre span{font-size:.78rem;color:var(--ink2);align-self:center;margin-right:.25rem}
.pre button{
  font:inherit;font-size:.8rem;padding:.2rem .5rem;cursor:pointer;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule2);border-radius:0;
  font-family:"DM Mono",monospace;
}
.pre button:hover{background:var(--mark);border-color:var(--ink)}

/* ---- tables that look like tables ---- */
table{border-collapse:collapse;width:100%;margin:.6rem 0 1.2rem;font-size:.92rem}
caption{text-align:left;font-size:.8rem;color:var(--ink2);padding-bottom:.35rem}
th{text-align:left;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
   border-bottom:1.5px solid var(--ink);padding:.3rem .55rem .3rem 0;font-weight:700;white-space:nowrap}
td{border-bottom:1px solid var(--rule);padding:.36rem .55rem .36rem 0;vertical-align:top}
td.n,th.n{text-align:right;padding-right:.9rem;white-space:nowrap}
tr:hover td{background:var(--sunk)}
.wide{overflow-x:auto;margin-bottom:1.2rem}
.wide table{margin-bottom:0}

ul,ol{max-width:var(--measure);padding-left:1.1rem;margin:0 0 .9rem}
li{margin-bottom:.32rem}

hr{border:0;border-top:1px solid var(--rule);margin:2rem 0}

/* ---- footer: show the seams ---- */
footer{max-width:46rem;margin:3.5rem auto 0;padding-top:.9rem;border-top:2px solid var(--ink);
  font-size:.82rem;color:var(--ink2);line-height:1.55}
footer p{max-width:var(--measure)}
footer a{color:var(--ink2)}
.stamp{font-family:"DM Mono",monospace;font-size:.74rem;letter-spacing:.02em;
  border:1px solid var(--rule2);display:inline-block;padding:.15rem .4rem;margin-bottom:.8rem;color:var(--ink2)}

@media (max-width:34rem){
  body{font-size:16px;padding:0 .9rem 4rem}
  h1{font-size:1.5rem}
  .f{flex:1 1 100%}
  .row{gap:.6rem}
}