/* English Oak Financial fee calculator. Tokens follow the approved design spec; brand values are the site's own. */
:root{
  --brand-green:#033c1c;--brand-green-dark:#043519;--brand-orange:#fc4f01;--brand-orange-button:#c93d00;--brand-orange-button-hover:#a83200;--brand-amber:#a86100;
  --surface:#fff;--surface-page:#fafbf9;--surface-soft:#f3f7f3;--surface-selected:#edf5ee;--surface-error:#fff4f2;--surface-staff:#eef2ef;
  --text-primary:#2e2e2e;--text-muted:#6b6b6b;--text-brand:#033c1c;--text-inverse:#fff;--text-inverse-muted:#dfebe1;
  --border:#dce5de;--border-strong:#6f8a77;--border-selected:#033c1c;--border-error:#a3291c;--text-error:#a3291c;--focus-ring:#c93d00;
  --font-display:"Gentium Book Plus",Georgia,serif;--font-body:"Montserrat",Arial,sans-serif;--font-ui:"Manrope",Arial,sans-serif;
  --text-xs:.75rem;--text-sm:.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.375rem;--text-2xl:1.75rem;--text-3xl:2.25rem;--text-4xl:3rem;
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-pill:999px;
  --shadow-sm:0 1px 3px rgb(3 60 28/5%);--shadow-md:0 8px 24px rgb(3 60 28/7%);--shadow-sticky:0 -4px 20px rgb(0 0 0/10%);
  --container-max:1280px;--control-h:48px;--duration:150ms;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--text-base)/1.55 var(--font-body);-webkit-text-size-adjust:100%}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.15;margin:0;color:var(--text-brand)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--brand-orange-button)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px;border-radius:4px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;background:#fff;padding:10px 14px;border-radius:6px;z-index:100;font-family:var(--font-ui);font-weight:700}
.skip:focus{top:12px}
.num,.price{font-family:var(--font-ui);font-variant-numeric:tabular-nums}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 32px}

/* header */
.site-head{background:var(--brand-green);color:var(--text-inverse)}
.site-head .wrap{display:flex;flex-wrap:wrap;gap:var(--space-6) var(--space-12);align-items:center;justify-content:space-between;padding-top:var(--space-8);padding-bottom:var(--space-10)}
.brand{display:flex;flex-direction:column;gap:var(--space-2);align-items:flex-start}
.brand img{height:76px;width:auto;display:block}
.brand small{font-family:var(--font-ui);letter-spacing:.04em;color:var(--text-inverse-muted);font-size:var(--text-sm)}
.head-copy{flex:1 1 380px;max-width:640px}
.head-copy h1{color:#fff;font-size:clamp(1.9rem,6.5vw,3rem)}
.head-copy p{margin:var(--space-3) 0 0;color:var(--text-inverse-muted);font-size:var(--text-lg)}
.head-links{display:flex;gap:var(--space-4);align-items:center;font-family:var(--font-ui);font-size:var(--text-sm);margin-top:var(--space-4)}
.head-links a{color:#fff}
.staff-badge{font-family:var(--font-ui);font-weight:800;font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;background:#fff;color:var(--brand-green);padding:4px 10px;border-radius:var(--radius-pill)}

/* stage nav */
.stages{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--border)}
.stages ol{list-style:none;display:flex;margin:0 auto;padding:0 32px;max-width:var(--container-max)}
.stages li{flex:1}
.stages a{display:flex;align-items:center;gap:var(--space-3);min-height:64px;padding:0 var(--space-4);text-decoration:none;color:var(--text-muted);font-family:var(--font-ui);font-weight:700;border-bottom:3px solid transparent}
.stages .n{width:28px;height:28px;border-radius:50%;border:2px solid var(--border-strong);display:grid;place-items:center;font-size:var(--text-sm);flex:none}
.stages .lbl{display:block;font-size:var(--text-xs);font-weight:500;letter-spacing:.02em}
.stages a[aria-current=step]{color:var(--text-brand);border-bottom-color:var(--brand-green)}
.stages a[aria-current=step] .n{background:var(--brand-green);border-color:var(--brand-green);color:#fff}
.stages a.done .n{background:var(--surface-selected);border-color:var(--brand-green);color:var(--brand-green)}
@media (max-width:640px){.stages ol{padding:0 8px}.stages a{padding:0 6px;gap:6px;min-height:56px;font-size:.78rem}.stages .n{width:24px;height:24px;font-size:.75rem}.stages .lbl{display:none}}

/* layout */
main{padding:var(--space-12) 0 var(--space-16)}
.grid{display:grid;grid-template-columns:minmax(0,65fr) minmax(0,35fr);gap:var(--space-8);align-items:start}
.col{display:flex;flex-direction:column;gap:var(--space-12);min-width:0}
.section>h2{font-size:var(--text-3xl)}
.section>.lede{margin:var(--space-2) 0 var(--space-6);color:var(--text-muted)}
.stack{display:flex;flex-direction:column;gap:var(--space-4)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.card.is-on{border-color:var(--border-selected);box-shadow:inset 0 0 0 1px var(--border-selected),var(--shadow-sm)}

/* tier cards */
.tier-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-4) var(--space-5);align-items:center;padding:var(--space-6) 28px}
.check{position:relative;width:28px;height:28px;flex:none;display:block}
.check input{position:absolute;inset:-8px;width:44px;height:44px;margin:0;opacity:0;cursor:pointer;z-index:1}
.check .box{position:absolute;inset:0;border:2px solid var(--border-strong);border-radius:7px;background:#fff;display:grid;place-items:center;transition:background var(--duration)}
.check .box svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.check input:checked+.box{background:var(--brand-green);border-color:var(--brand-green)}
.check input:checked+.box svg{opacity:1}
.check input:focus-visible+.box{outline:3px solid var(--focus-ring);outline-offset:3px}
.check input:disabled+.box{opacity:.45}
.eyebrow{font-family:var(--font-ui);font-weight:800;font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--brand-amber)}
.tier-title h3{font-size:var(--text-2xl);margin:2px 0 4px}
.tier-title p{margin:0;color:var(--text-muted);font-size:var(--text-sm)}
.tier-price{text-align:right;font-family:var(--font-ui)}
.tier-price .big{display:block;font-size:var(--text-2xl);font-weight:800;color:var(--text-brand)}
.tier-price .per{font-size:var(--text-xs);color:var(--text-muted)}
.tier-foot{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-6);align-items:center;justify-content:space-between;padding:0 28px var(--space-5);font-family:var(--font-ui);font-size:var(--text-sm);color:var(--text-muted)}
.tier-foot strong{color:var(--text-brand)}
.toggle{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-4);background:#fff;border:1.5px solid var(--border-strong);border-radius:var(--radius-md);font-family:var(--font-ui);font-weight:700;color:var(--text-brand)}
.toggle:hover{background:var(--surface-soft)}
.toggle svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;transition:transform var(--duration)}
.toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.tier-body{border-top:1px solid var(--border);padding:var(--space-6) 28px var(--space-6)}
.tier-body[hidden],.gbody[hidden]{display:none}
.incl{background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-5) var(--space-6);margin-bottom:var(--space-6)}
.incl h4,.grp h4{font-family:var(--font-ui);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--brand-green);font-weight:800}
.incl .note{margin:var(--space-2) 0 0;font-size:var(--text-sm);color:var(--text-muted)}
.incl ul{list-style:none;margin:var(--space-4) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3) var(--space-6)}
.incl li{position:relative;padding-left:28px;font-size:var(--text-sm)}
.incl li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23033c1c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:760px){.incl ul{grid-template-columns:1fr}}
.grp{margin-top:var(--space-6)}
.grp h4{padding-bottom:var(--space-2);border-bottom:2px solid var(--brand-green);margin-bottom:var(--space-1)}
.staffbox{background:var(--surface-staff);border:1px dashed var(--border-strong);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5);margin-top:var(--space-6)}
.staffbox .sbh{font-family:var(--font-ui);font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--brand-green);font-weight:800}
.staffbox p{margin:var(--space-1) 0 var(--space-3);font-size:var(--text-sm);color:var(--text-muted)}

/* add-on rows: fixed columns so ticking never moves anything */
.row{display:grid;grid-template-columns:minmax(0,1fr) 140px 168px;gap:var(--space-2) var(--space-4);align-items:center;min-height:64px;padding:var(--space-3) 14px;border-bottom:1px solid var(--border);border-radius:var(--radius-sm)}
.row.wide{grid-template-columns:minmax(0,1fr) 240px 168px}
.row:last-child{border-bottom:0}
.row.is-on{background:var(--surface-selected)}
.row .lbl{display:flex;gap:var(--space-3);align-items:flex-start;min-width:0}
.row .lbl .check{margin-top:2px}
.row .lbl label,.row .lbl .t{font-weight:500;cursor:pointer}
.row .help{display:block;font-size:var(--text-sm);color:var(--text-muted);font-weight:400}
.row .ctl{display:flex;align-items:center;justify-content:flex-end;gap:var(--space-2);min-width:0}
.row .price{text-align:right;font-weight:700;color:var(--text-muted);white-space:nowrap}
.row.is-on .price{color:var(--text-brand)}
.stepper{display:inline-flex;align-items:center;height:var(--control-h);border:1.5px solid var(--border-strong);border-radius:var(--radius-md);background:#fff;overflow:hidden}
.stepper button{width:44px;height:100%;border:0;background:var(--surface-soft);font-size:var(--text-lg);font-family:var(--font-ui);font-weight:800;color:var(--text-brand)}
.stepper button:disabled{opacity:.4;cursor:not-allowed}
.stepper input{width:52px;height:100%;border:0;text-align:center;font-family:var(--font-ui);font-weight:700;font-variant-numeric:tabular-nums;-moz-appearance:textfield;background:#fff}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
.stepper:has(input:disabled){opacity:.5}
.unit{font-size:var(--text-xs);color:var(--text-muted);font-family:var(--font-ui)}
/* the price column needs 161px for the longest price ($250 / month behind); stack the row before the label gets squeezed */
@media (max-width:720px){
  .row,.row.wide{grid-template-columns:minmax(0,1fr) auto}
  .row .lbl{grid-column:1/-1}
  .row .ctl{justify-content:flex-start}
  .row.noctl{grid-template-columns:minmax(0,1fr) auto}
  .row.noctl .lbl{grid-column:auto}
  .row.noctl .ctl{display:none}
}

/* form controls */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field>.legend{font-family:var(--font-ui);font-weight:700;font-size:var(--text-sm);color:var(--text-primary)}
.opt{font-weight:400;color:var(--text-muted)}
.input,select.input,textarea.input{width:100%;height:var(--control-h);padding:0 var(--space-4);background:#fff;border:1.5px solid var(--border-strong);border-radius:var(--radius-md);font-size:var(--text-base);appearance:none;-webkit-appearance:none}
select.input{padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23033c1c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 12px center/18px no-repeat}
.input:hover{border-color:var(--brand-green)}
.input[aria-invalid=true]{border-color:var(--border-error);background-color:var(--surface-error)}
.input:disabled{background:var(--surface-soft);opacity:.7}
.err{color:var(--text-error);font-size:var(--text-sm);font-weight:500;min-height:0}
.err:empty{display:none}
.radios{display:flex;gap:var(--space-3);flex-wrap:wrap}
.radio{position:relative;display:inline-flex}
.radio input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.radio span{display:inline-flex;align-items:center;min-height:var(--control-h);padding:0 var(--space-5);border:1.5px solid var(--border-strong);border-radius:var(--radius-md);background:#fff;font-family:var(--font-ui);font-weight:700}
.radio input:checked+span{background:var(--surface-selected);border-color:var(--brand-green);color:var(--brand-green);box-shadow:inset 0 0 0 1px var(--brand-green)}
.radio input:focus-visible+span{outline:3px solid var(--focus-ring);outline-offset:3px}
fieldset{border:0;margin:0;padding:0;min-width:0}

/* adjustments + details groups */
.pad{padding:var(--space-6) 28px}
.gcard{padding:0;overflow:hidden}
.ghead{display:flex;width:100%;align-items:center;gap:var(--space-4);text-align:left;background:#fff;border:0;padding:var(--space-5) 28px;min-height:76px}
.ghead:hover{background:var(--surface-soft)}
.ghead .gn{font-family:var(--font-ui);font-weight:800;color:var(--brand-amber);letter-spacing:.1em;font-size:var(--text-sm)}
.ghead .gt{flex:1;min-width:0}
.ghead .gt strong{display:block;font-family:var(--font-display);font-size:var(--text-xl);color:var(--text-brand)}
.ghead .gt span{font-size:var(--text-sm);color:var(--text-muted)}
.gstat{font-family:var(--font-ui);font-size:var(--text-sm);font-weight:700;color:var(--text-muted);white-space:nowrap;display:flex;align-items:center;gap:6px}
.gstat.ok{color:var(--brand-green)}
.gstat svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:3}
.ghead .chev{width:18px;height:18px;stroke:var(--brand-green);fill:none;stroke-width:2.5;transition:transform var(--duration);flex:none}
.ghead[aria-expanded=true] .chev{transform:rotate(180deg)}
.gbody{border-top:1px solid var(--border);padding:var(--space-6) 28px var(--space-8);display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5) var(--space-6)}
.gbody .full{grid-column:1/-1}
@media (max-width:760px){.gbody{grid-template-columns:1fr}.ghead{padding:var(--space-4) var(--space-5)}.gbody,.pad,.tier-body,.tier-foot{padding-left:var(--space-5);padding-right:var(--space-5)}.tier-head{padding:var(--space-5)}.tier-head{grid-template-columns:auto minmax(0,1fr)}.tier-price{grid-column:2;text-align:left}}

/* quote panel */
.quote{position:sticky;top:88px;padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5);max-height:calc(100vh - 112px);overflow:auto}
.quote .kicker{font-family:var(--font-ui);font-weight:800;font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--brand-amber)}
.q-total{background:var(--brand-green);color:#fff;border-radius:var(--radius-md);padding:var(--space-5)}
.q-total .k{font-family:var(--font-ui);font-size:var(--text-sm);color:var(--text-inverse-muted)}
.q-total .v{display:block;font-family:var(--font-ui);font-weight:800;font-size:var(--text-4xl);line-height:1.1;font-variant-numeric:tabular-nums}
.q-total .a{font-size:var(--text-sm);color:var(--text-inverse-muted)}
.q-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.q-pair div{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4)}
.q-pair .k{display:block;font-size:var(--text-xs);color:var(--text-muted);font-family:var(--font-ui)}
.q-pair .v{font-family:var(--font-ui);font-weight:800;font-size:var(--text-xl);font-variant-numeric:tabular-nums;color:var(--text-brand)}
.q-empty{color:var(--text-muted);font-size:var(--text-sm);margin:0}
.q-lines{display:flex;flex-direction:column;gap:2px;font-size:var(--text-sm);font-family:var(--font-ui)}
.q-lines .h{font-weight:800;margin-top:var(--space-3);display:flex;justify-content:space-between;color:var(--text-brand)}
.q-lines .l{display:flex;justify-content:space-between;gap:var(--space-3);color:var(--text-muted);padding-left:var(--space-3)}
.q-lines .l span:last-child,.q-lines .h span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.q-lines .l span:first-child{min-width:0}
.q-lines .s{display:flex;justify-content:space-between;border-top:1px dashed var(--border-strong);padding-top:4px;margin-top:2px;font-weight:700}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:52px;padding:0 var(--space-8);border-radius:var(--radius-md);border:1.5px solid var(--brand-green);background:#fff;color:var(--brand-green);font-family:var(--font-ui);font-weight:800;font-size:var(--text-base);text-decoration:none}
.btn:hover{background:var(--surface-soft)}
.btn.primary{background:var(--brand-orange-button);border-color:var(--brand-orange-button);color:#fff}
.btn.primary:hover{background:var(--brand-orange-button-hover);border-color:var(--brand-orange-button-hover)}
.btn:disabled{opacity:.6;cursor:progress}
.btn.small{min-height:44px;padding:0 var(--space-4);font-size:var(--text-sm)}
.btn.text{border:0;background:none;text-decoration:underline;min-height:44px;padding:0 var(--space-2)}
.spin{width:18px;height:18px;border:3px solid rgb(255 255 255/40%);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* review + status */
.review-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
.review .who{display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding-top:var(--space-4);font-size:var(--text-sm)}
.send-row{display:flex;flex-direction:column;gap:var(--space-3);align-items:flex-start}
.send-note{margin:0;color:var(--text-muted);font-size:var(--text-sm)}
.status{border-radius:var(--radius-md);padding:var(--space-5);border:1.5px solid var(--border-strong);background:#fff}
.status h3{font-size:var(--text-xl)}
.status p{margin:var(--space-2) 0 0}
.status .acts{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:var(--space-4);align-items:center}
.status.ok{border-color:var(--brand-green);background:var(--surface-selected)}
.status.bad{border-color:var(--border-error);background:var(--surface-error)}
.status.warn{border-color:var(--brand-amber);background:#fff8ec}
.errsum{border:1.5px solid var(--border-error);background:var(--surface-error);border-radius:var(--radius-md);padding:var(--space-4) var(--space-5)}
.errsum h3{font-size:var(--text-lg);color:var(--text-error)}
.errsum ul{margin:var(--space-2) 0 0;padding-left:var(--space-5)}
.errsum[hidden],.status[hidden]{display:none}
.ref{font-family:var(--font-ui);font-size:var(--text-xs);color:var(--text-muted)}

/* price settings */
.settings{border-top:4px solid var(--brand-green);padding-top:var(--space-10);margin-top:var(--space-8)}
.tbl-wrap{overflow:auto;max-height:70vh;border:1px solid var(--border);border-radius:var(--radius-md);background:#fff}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--text-sm)}
thead th{position:sticky;top:0;background:var(--surface-soft);text-align:left;padding:var(--space-3);font-family:var(--font-ui);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--border-strong)}
th.r,td.r{text-align:right}
td{padding:6px var(--space-3);border-bottom:1px solid var(--border)}
td.grp{background:var(--surface-staff);font-family:var(--font-ui);font-weight:800;color:var(--brand-green)}
td input{width:110px;height:40px;text-align:right;padding:0 10px;border:1.5px solid var(--border-strong);border-radius:var(--radius-sm);font-family:var(--font-ui);font-variant-numeric:tabular-nums}

/* footer */
.site-foot{border-top:1px solid var(--border);background:#fff}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-8);align-items:center;justify-content:space-between;padding-top:var(--space-6);padding-bottom:var(--space-6);font-family:var(--font-ui);font-size:var(--text-sm)}
.site-foot img{height:44px;width:auto}
.site-foot nav{display:flex;gap:var(--space-5);flex-wrap:wrap}

/* mobile total bar + drawer */
.bar{display:none}
@media (max-width:1023px){
  .wrap{padding:0 20px}
  .grid{grid-template-columns:minmax(0,1fr)}
  .quote.aside{display:none}
  main{padding-bottom:calc(var(--space-16) + 90px)}
  .bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;min-height:80px;align-items:center;justify-content:space-between;gap:var(--space-3);background:var(--brand-green);color:#fff;box-shadow:var(--shadow-sticky);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
  .bar .k{font-family:var(--font-ui);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-inverse-muted)}
  .bar .v{display:block;font-family:var(--font-ui);font-weight:800;font-size:var(--text-2xl);font-variant-numeric:tabular-nums;line-height:1.1}
  .bar .btn{background:#fff;min-height:48px;padding:0 var(--space-5)}
  .site-head .wrap{padding-top:var(--space-6);padding-bottom:var(--space-6)}
  .brand img{height:60px}
}
.drawer-back{position:fixed;inset:0;background:rgb(0 0 0/45%);z-index:40}
.drawer{position:fixed;left:0;right:0;bottom:0;z-index:41;max-height:88vh;background:#fff;border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:var(--shadow-sticky);display:flex;flex-direction:column}
.drawer[hidden],.drawer-back[hidden]{display:none}
.drawer .dhead{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border)}
.drawer .dhead h2{font-size:var(--text-xl)}
.drawer .scroll{overflow:auto;padding:var(--space-5)}
@media (min-width:1024px){.drawer,.drawer-back{display:none!important}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
@media print{.stages,.bar,.drawer,.site-foot{display:none}}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.q-est{margin:0;font-size:var(--text-sm);color:var(--text-muted)}
.req{color:var(--text-error);font-weight:700}

/* task tracker */
.tt-bar{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin:var(--space-6) 0 var(--space-4)}
.tt-tabs{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.tt-tab{min-height:44px;padding:0 var(--space-4);border-radius:var(--radius-pill);border:1.5px solid var(--border-strong);background:#fff;font-family:var(--font-ui);font-weight:700;color:var(--text-brand)}
.tt-tab[aria-pressed=true]{background:var(--brand-green);border-color:var(--brand-green);color:#fff}
.tt-tab .n{display:inline-block;min-width:1.6em;margin-left:6px;padding:0 6px;border-radius:var(--radius-pill);background:var(--surface-selected);color:var(--brand-green);font-size:var(--text-sm)}
.tt-tab[aria-pressed=true] .n{background:#fff}
.tt-tab .n.bad{background:#fbeeee;color:var(--text-error)}
.tt-filters{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-left:auto}
.tt-filters .field{min-width:180px}
.tt-panels{display:grid;gap:var(--space-3);margin-bottom:var(--space-6)}
.tt-panels details{background:#fff;border:1px solid var(--border);border-radius:var(--radius-md)}
.tt-panels summary{padding:var(--space-4) var(--space-5);min-height:44px;cursor:pointer;font-family:var(--font-ui);font-weight:700;color:var(--text-brand)}
.tt-panels .pbody{padding:0 var(--space-5) var(--space-5);display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--space-4);align-items:end}
.tt-group h2{font-size:var(--text-xl);margin:var(--space-6) 0 var(--space-3)}
.tasklist{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:var(--radius-md);background:#fff}
.tasklist li{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(130px,.7fr) minmax(0,1fr) auto;gap:var(--space-3) var(--space-4);align-items:center;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border)}
.tasklist li:last-child{border-bottom:0}
.tasklist .t strong{display:block;font-family:var(--font-ui)}
.tasklist .t span{color:var(--text-muted);font-size:var(--text-sm)}
.tasklist .due{font-family:var(--font-ui);font-variant-numeric:tabular-nums}
.tasklist .due small{display:block;color:var(--text-muted)}
.tasklist .late .due small{color:var(--text-error);font-weight:700}
.tasklist li.late{background:#fffafa}
.tasklist .acts{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:flex-end}
.tasklist select.input{height:44px}
.tt-empty{padding:var(--space-8);text-align:center;color:var(--text-muted);background:#fff;border:1px dashed var(--border-strong);border-radius:var(--radius-md)}
dialog.tt{border:0;border-radius:var(--radius-lg);padding:var(--space-6);max-width:560px;width:calc(100% - 32px);box-shadow:var(--shadow-md)}
dialog.tt::backdrop{background:rgb(0 0 0/45%)}
dialog.tt h2{font-size:var(--text-xl);margin-bottom:var(--space-3)}
dialog.tt .grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);margin:var(--space-4) 0}
dialog.tt .acts{display:flex;gap:var(--space-3);justify-content:flex-end;flex-wrap:wrap;margin-top:var(--space-5)}
dialog.tt table{width:100%}
.tt-msg{margin:var(--space-3) 0;min-height:1.4em;font-size:var(--text-sm)}
@media (max-width:760px){.tasklist li{grid-template-columns:1fr;gap:var(--space-2)}.tasklist .acts{justify-content:flex-start}.tt-filters{margin-left:0;width:100%}dialog.tt .grid2{grid-template-columns:1fr}}
.copyopt{display:flex;align-items:center;gap:var(--space-3);min-height:44px;font-family:var(--font-ui);font-weight:700}
.copyopt label{cursor:pointer}
.libgrp{border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);margin:0 0 var(--space-3);display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-2) var(--space-5)}
.libgrp legend{font-family:var(--font-ui);font-weight:800;font-size:var(--text-sm);color:var(--brand-green);padding:0 var(--space-2)}
.libmod{display:flex;gap:var(--space-2);align-items:flex-start;min-height:44px;padding:var(--space-2) 0;font-size:var(--text-sm);cursor:pointer}
.libmod input{width:20px;height:20px;margin-top:2px;accent-color:var(--brand-green);flex:none}