/* PBS Tools - one stylesheet for every page. Restyled 16 Sep 2026 to JP's approved design (T-A):
   Figtree everywhere and no fixed-width face anywhere; sentence-case headings with normal tracking; warm
   paper; white cards instead of rules; 56px fields, 50px buttons; two columns (form left, dark
   docket right) that fall to one column under 860px with the docket first; and ONE hi-viz headline
   figure at the top of the docket that nothing else competes with. */
:root{
  color-scheme:light;
  --paper:#f4f2ee; --sheet:#ffffff; --ink:#141a19; --ink-2:#3d4744; --ink-3:#566560;
  --rule:#dcd8d1; --rule-2:#ebe8e2; --hiviz:#e8890c; --hiviz-ink:#8a4c00; --spec:#17475c; --step:#1f5d77;
  --warn:#a8480a; --warn-bg:#fdf2e4; --field:#ffffff; --field-edge:#dcd8d1;
  --docket:#17475c; --docket-2:#1d5470; --docket-ink:#f2f6f8; --docket-ink-2:#c9dbe4; --docket-ink-3:#9bb8c7; --docket-rule:rgba(255,255,255,.12);
  --card-shadow:0 1px 2px rgba(31,37,35,.04),0 6px 20px rgba(31,37,35,.05);
  --navy:#071e3d; --gold:#c9a24a;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#101413; --sheet:#171d1c; --ink:#e8eeeb; --ink-2:#b4c0bb; --ink-3:#8a9893;
    --rule:#2c3634; --rule-2:#222a29; --hiviz:#f7a825; --hiviz-ink:#f7c06a; --spec:#6fb3ce; --step:#6fb3ce;
    --warn:#f0a054; --warn-bg:#2a1e10; --field:#0d1211; --field-edge:#33403c;
    --docket:#0f2a38; --docket-2:#143546; --card-shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --paper:#101413; --sheet:#171d1c; --ink:#e8eeeb; --ink-2:#b4c0bb; --ink-3:#8a9893;
  --rule:#2c3634; --rule-2:#222a29; --hiviz:#f7a825; --hiviz-ink:#f7c06a; --spec:#6fb3ce; --step:#6fb3ce;
  --warn:#f0a054; --warn-bg:#2a1e10; --field:#0d1211; --field-edge:#33403c;
  --docket:#0f2a38; --docket-2:#143546; --card-shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.5;font-variant-numeric:tabular-nums}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}
code{font-family:inherit;font-weight:600;background:var(--rule-2);padding:1px 6px;border-radius:6px}
h1,h2,h3{font-weight:700;letter-spacing:0;text-transform:none;text-wrap:balance;margin:0}
a{color:var(--step)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--hiviz);outline-offset:2px}
.skip{position:absolute;left:-999px;top:8px;background:var(--sheet);color:var(--ink);padding:8px 12px;border-radius:10px;z-index:9}
.skip:focus{left:8px}

/* estate masthead - shared with every PBS host */
.pbs-mast{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--navy);color:#f3ead4;padding:10px 16px;flex-wrap:wrap}
.pbs-mast-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#f3ead4}
.pbs-mast-emblem{width:34px;height:34px;border-radius:50%;object-fit:cover;background:transparent}
.pbs-mast-name{font-family:"Cinzel",Georgia,"Times New Roman",serif;font-weight:600;letter-spacing:.04em;font-size:16px;color:#f3ead4}
.pbs-mast-back{color:var(--gold);text-decoration:none;font-size:13px}
.pbs-mast-back:hover{text-decoration:underline}
.pbs-mast-foot{background:var(--navy);color:#8ea3c0;text-align:center;padding:14px 16px;font-size:12.5px}
.pbs-mast-foot a{color:#c9d6e6}

.wrap{max-width:1180px;margin:0 auto;padding-inline:16px}
@media (min-width:600px){.wrap{padding-inline:24px}}

/* site header: name, one line, search */
.top{padding:22px 0 6px;display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center}
.top .name{font-size:15px;font-weight:600;color:var(--ink-2);text-decoration:none}
.top .name:hover{color:var(--ink)}
.top .line{margin:0;color:var(--ink-3);font-size:14px;flex:1 1 260px}
.top .line b{color:var(--ink-2);font-weight:600}
.search{flex:0 1 300px;min-width:200px}
input[type=search]{width:100%;height:50px;padding:0 16px;border:1.5px solid var(--field-edge);background:var(--field);color:var(--ink);
  font:inherit;font-size:15px;border-radius:14px}

/* tool picker (left column, above the h1) */
.picker{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 18px}
.picker label{font-size:13px;color:var(--ink-3);font-weight:600}
.picker select{height:50px;min-width:240px;flex:1 1 240px;padding:0 14px;border:1.5px solid var(--field-edge);background:var(--field);color:var(--ink);
  font:inherit;font-size:15px;border-radius:14px}
.picker details{flex:1 1 100%}
.picker summary{cursor:pointer;font-size:13px;color:var(--step);font-weight:600;list-style:none;display:inline-block;padding:6px 0}
.picker summary::-webkit-details-marker{display:none}
.picker summary::after{content:" \25BE"}
.picker details[open] summary::after{content:" \25B4"}
nav.register{background:var(--sheet);border-radius:20px;box-shadow:var(--card-shadow);padding:6px 0;margin-top:8px;columns:2;column-gap:0}
@media (max-width:600px){nav.register{columns:1}}
.reg-head{display:none}
.grp{font-size:12px;font-weight:700;color:var(--hiviz-ink);padding:12px 16px 4px;break-inside:avoid}
.reg-item{display:flex;justify-content:space-between;gap:8px;width:100%;text-align:left;background:none;border:0;
  padding:8px 16px;color:var(--ink-2);font:inherit;font-size:15px;text-decoration:none;border-left:3px solid transparent;break-inside:avoid}
.reg-item:hover{background:var(--rule-2);color:var(--ink)}
.reg-item[aria-current="true"]{background:var(--rule-2);color:var(--ink);border-left-color:var(--hiviz);font-weight:600}
.reg-item span{font-size:12px;color:var(--ink-3);align-self:center;text-align:right}
.mob-nav{display:contents}

.eyebrow{font-size:13px;font-weight:600;color:var(--ink-3);margin:0 0 6px}
h1.q{font-size:34px;line-height:1.15;letter-spacing:-.01em;margin:0 0 10px}
.blurb{margin:0 0 20px;color:var(--ink-2);max-width:62ch;font-size:16.5px}

/* the two columns */
.cols{display:grid;grid-template-columns:1.05fr 1fr;gap:22px;align-items:start;margin-top:8px}
@media (max-width:860px){.cols{grid-template-columns:1fr}.docket{order:-1}}
main{min-width:0}

/* the card with two numbered steps */
.card{background:var(--sheet);border-radius:20px;box-shadow:var(--card-shadow);padding:22px 22px 18px}
.step{position:relative;padding-left:44px}
.step+.step{margin-top:22px;padding-top:22px;border-top:1px solid var(--rule-2)}
.step .n{position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--step);color:#fff;
  font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.step h2{font-size:18px;font-weight:700;margin:2px 0 4px}
.step .lead{margin:0 0 14px;color:var(--ink-3);font-size:14px}
.step .lead .i{margin-left:4px}
details.rates>summary{cursor:pointer;font-weight:600;color:var(--step);list-style:none;font-size:15px;padding:4px 0}
details.rates>summary::-webkit-details-marker{display:none}
details.rates>summary::after{content:" \25BE";color:var(--ink-3)}
details.rates[open]>summary::after{content:" \25B4"}
.pane-note{margin:8px 0 12px;font-size:14px;color:var(--ink-3);max-width:60ch}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 16px}
@media (max-width:520px){.fields{grid-template-columns:1fr}}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f.wide{grid-column:1/-1}
.f label{font-size:15px;color:var(--ink);font-weight:600;display:flex;gap:6px;align-items:baseline}
.f label .txt{min-width:0}
.f .in{display:flex;align-items:stretch;height:56px;border:1.5px solid var(--field-edge);background:var(--field);border-radius:14px;overflow:hidden}
.f .in:focus-within{border-color:var(--step);box-shadow:0 0 0 3px rgba(31,93,119,.15)}
.f input,.f>.in>select{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);padding:0 16px;
  font:inherit;font-size:17px;font-weight:500;font-variant-numeric:tabular-nums;height:100%}
.f input:focus,.f>.in>select:focus{outline:none}
.f .u{font-size:14px;color:var(--ink-3);align-self:center;padding:0 14px;border-left:1px solid var(--rule-2);white-space:nowrap;height:100%;display:flex;align-items:center}
select.uom{border:0;border-left:1px solid var(--rule-2);background:var(--rule-2);color:var(--ink-2);font:inherit;font-size:14px;
  padding:0 10px;cursor:pointer;flex:0 0 auto;max-width:46%}
.f .hint{font-size:13px;color:var(--ink-3);line-height:1.4}
.f.warn>.in{border-color:var(--warn)}
.warnmsg{font-size:13px;line-height:1.35;color:var(--warn);font-weight:600}
.f input[aria-invalid="true"]{color:var(--warn)}

/* the (i) button and its note */
.i{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:0 0 18px;
  border:1.5px solid var(--field-edge);background:transparent;color:var(--ink-3);border-radius:50%;
  font:inherit;font-size:11px;font-weight:700;line-height:1;cursor:pointer;padding:0;vertical-align:baseline;position:relative;top:1px}
.i:hover,.i[aria-expanded="true"]{background:var(--hiviz);border-color:var(--hiviz);color:#221302}
.help{margin:2px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-2);background:var(--rule-2);
  border-left:3px solid var(--hiviz);padding:8px 12px;border-radius:0 10px 10px 0}

/* units bar */
.unitbar{margin:0 0 14px}
.unitbar-in{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;background:var(--sheet);border-radius:16px;box-shadow:var(--card-shadow);padding:10px 14px}
.unitbar .ttl{font-size:13px;font-weight:600;color:var(--ink-3)}
.uom-g{display:flex;align-items:center;gap:6px}
.uom-g label{font-size:13px;color:var(--ink-3)}
.uom-g select{font:inherit;font-size:14px;height:36px;padding:0 8px;border:1.5px solid var(--field-edge);background:var(--field);color:var(--ink);border-radius:10px}
.imp{margin-left:auto}
@media (max-width:860px){.imp{margin-left:0}}

/* the docket */
.docket{background:var(--docket);color:var(--docket-ink);border-radius:22px;box-shadow:var(--card-shadow);padding:18px 18px 16px;position:sticky;top:16px}
@media (max-width:860px){.docket{position:static}}
.docket h2{font-size:13px;font-weight:600;color:var(--docket-ink-3);margin:0 0 12px;display:flex;gap:8px;align-items:center}
.docket .i{border-color:var(--docket-rule);color:var(--docket-ink-3)}
.docket .help{background:var(--docket-2);color:var(--docket-ink-2);border-left-color:var(--hiviz)}
.headline{background:var(--hiviz);color:#221302;border-radius:16px;padding:14px 18px;margin:0 0 12px;display:flex;flex-direction:column;gap:2px}
.headline .hl-lab{font-size:14px;font-weight:600;opacity:.85}
.headline .hl-val{font-size:38px;line-height:1.1;font-weight:700;letter-spacing:-.01em}
.headline .hl-val em{font-style:normal;font-size:18px;font-weight:600;margin-left:8px;opacity:.85}
.res{padding:0}
.res-sec{padding:12px 4px 4px;font-size:12.5px;font-weight:700;color:var(--docket-ink-3)}
.row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 12px;padding:8px 4px;border-bottom:1px solid var(--docket-rule)}
.row:last-child{border-bottom:0}
.row .lab{font-size:15px;color:var(--docket-ink-2)}
.row .val{font-variant-numeric:tabular-nums;font-size:16px;font-weight:600;text-align:right;white-space:nowrap;color:var(--docket-ink)}
.row .val em{font-style:normal;font-size:12.5px;font-weight:500;color:var(--docket-ink-3);margin-left:5px}
.row .why{grid-column:1/-1;font-size:12.5px;color:var(--docket-ink-3);line-height:1.4}
.row.key{background:var(--docket-2);border-radius:10px;padding-inline:10px;margin-inline:-6px}
.row.key .val{font-size:19px;color:#fff}
.row.key .lab{color:#fff;font-weight:600}
.row.flag{background:var(--warn-bg);border-radius:10px;padding-inline:10px;margin-inline:-6px}
.row.flag .lab,.row.flag .why,.row.flag .val{color:var(--warn)}
.tools{display:flex;gap:10px;flex-wrap:wrap;padding:16px 0 0}
.btn{font:inherit;font-size:15px;font-weight:600;height:50px;padding:0 18px;border:1.5px solid var(--docket-rule);
  background:transparent;color:var(--docket-ink);border-radius:14px;cursor:pointer}
.btn:hover{border-color:var(--hiviz);color:#fff}
.btn.primary{background:#fff;border-color:#fff;color:var(--docket)}
.btn.primary:hover{background:var(--hiviz);border-color:var(--hiviz);color:#221302}

/* compliance pane (HAV, risk, accreditation) - same card language */
#compliancePane{background:var(--sheet);border-radius:20px;box-shadow:var(--card-shadow);padding:22px;margin-top:8px}
#compliancePane .cdisc{font-size:14px;color:#5a4a12;background:#fbf6e6;border:1px solid #d8cfa6;border-radius:12px;padding:12px 14px;margin:0 0 18px}
#compliancePane .csub{color:var(--ink-2);margin:0 0 12px}
#compliancePane .crow{display:grid;gap:12px;margin-bottom:12px}
#compliancePane .crow-2{grid-template-columns:1fr 1fr}
#compliancePane .crow-3{grid-template-columns:2fr 1fr 1fr}
@media (max-width:520px){#compliancePane .crow-2,#compliancePane .crow-3{grid-template-columns:1fr}}
#compliancePane label{display:block;font-size:14px;color:var(--ink-2);font-weight:600;margin-bottom:6px}
#compliancePane input,#compliancePane select{width:100%;box-sizing:border-box;height:56px;padding:0 14px;border:1.5px solid var(--field-edge);border-radius:14px;font:inherit;font-size:16px;background:var(--field);color:var(--ink)}
#compliancePane .cbtns{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 4px}
#compliancePane .cbtn{height:50px;padding:0 18px;border:1.5px solid var(--step);border-radius:14px;background:var(--step);color:#fff;cursor:pointer;font:inherit;font-weight:600}
#compliancePane .cbtn.ghost{background:transparent;color:var(--step)}
#compliancePane .cresult{margin-top:16px;padding:16px;border-radius:14px;background:var(--docket);color:var(--docket-ink)}
#compliancePane .cbig{font-size:26px;font-weight:700;margin-bottom:6px}
#compliancePane .cnote{font-size:13px;color:var(--docket-ink-3);margin-top:8px}
#compliancePane .cresult ul{margin:8px 0;padding-left:18px}#compliancePane .cresult li{margin:4px 0}
#compliancePane .ctable{border-collapse:collapse;margin-top:12px;width:100%;max-width:520px}
#compliancePane .ctable th,#compliancePane .ctable td{border:1px solid var(--rule);padding:8px 10px;text-align:center;font-size:14px}
#compliancePane .cfs{border:1.5px solid var(--rule);border-radius:14px;padding:12px 14px;margin:0 0 12px}
#compliancePane .cfs legend{font-size:14px;color:var(--ink-2);font-weight:600;padding:0 6px}
#compliancePane .cchecks{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
#compliancePane .cchecks label{display:flex;gap:8px;align-items:center;margin:0;font-weight:500}
#compliancePane .cchecks input{width:auto;height:auto}
#compliancePane .ctag{display:inline-block;font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;color:#fff}
#compliancePane .ctag.legal{background:#c0392b}
#compliancePane .ctag.rec{background:#b9770e}
#compliancePane .ch3{margin:14px 0 4px;font-size:16px}

/* the prose below the calculator: how it works, worked example, questions, siblings, product */
.prose{max-width:76ch;margin-top:34px}
.prose h2{font-size:22px;margin:30px 0 10px}
.prose h3{font-size:17px;margin:18px 0 6px}
.prose p,.prose li{color:var(--ink-2)}
.prose ul{padding-left:20px}
.prose li{margin:6px 0}
.rates{width:100%;border-collapse:collapse;font-size:15px;margin:6px 0 4px}
.rates th,.rates td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--rule-2);vertical-align:top}
.rates th{color:var(--ink-3);font-weight:600;font-size:13px}
.rates td.v{white-space:nowrap;font-weight:600;color:var(--ink)}
.rates td.n{color:var(--ink-3);font-size:14px}
.example{background:var(--sheet);border-radius:20px;box-shadow:var(--card-shadow);padding:18px 22px}
.example p{margin:0 0 8px}
.example ul{margin:6px 0 0}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;font-weight:600;padding:12px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ink-3);font-weight:400}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin:0 0 14px}
.siblings{display:flex;flex-wrap:wrap;gap:10px;padding:0;margin:8px 0 0;list-style:none}
.siblings a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:var(--sheet);border-radius:14px;box-shadow:var(--card-shadow);text-decoration:none;color:var(--ink);font-weight:600;font-size:15px}
.siblings a:hover{color:var(--step)}
.product{margin-top:22px;padding:16px 20px;border-left:3px solid var(--hiviz);background:var(--sheet);border-radius:0 16px 16px 0}
.product p{margin:0;color:var(--ink-2)}
.foot{margin-top:34px;padding-top:16px;border-top:1px solid var(--rule);font-size:14px;color:var(--ink-3);max-width:78ch}
.foot strong{color:var(--ink-2)}
.pagefoot{margin:26px 0 40px;font-size:13.5px;color:var(--ink-3);display:flex;flex-wrap:wrap;gap:8px 18px}

/* the directory (home page) */
.hero{padding:34px 0 10px;max-width:70ch}
.hero h1{font-size:38px;line-height:1.1;letter-spacing:-.01em;margin:0 0 12px}
.hero p{font-size:17px;color:var(--ink-2);margin:0 0 18px}
.dir-grp{margin-top:30px}
.dir-grp h2{font-size:14px;font-weight:700;color:var(--hiviz-ink);margin:0 0 12px}
.dir{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;list-style:none;padding:0;margin:0}
.dir li{background:var(--sheet);border-radius:20px;box-shadow:var(--card-shadow)}
.dir a{display:block;padding:18px 20px 16px;text-decoration:none;color:var(--ink);height:100%;border-radius:20px}
.dir a:hover{box-shadow:inset 0 0 0 2px var(--hiviz)}
.dir .t{font-size:17px;font-weight:700;display:block;margin-bottom:4px}
.dir .qq{font-size:14.5px;color:var(--ink-2);display:block}
.dir .tag{font-size:12.5px;color:var(--ink-3);display:block;margin-top:8px}
.dir li[hidden]{display:none}
.empty{color:var(--ink-3);margin:20px 0}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media print{
  .pbs-mast,.pbs-mast-foot,.top,.picker,.unitbar,.tools,.prose,.pagefoot,nav.register{display:none!important}
  .cols{grid-template-columns:1fr}.docket{background:#fff;color:#000;box-shadow:none;border:1px solid #999}
  .row .lab,.row .val,.row .why,.res-sec{color:#000}.headline{background:#eee;color:#000}
}