/* Free tools: hub + calculator pages */

.rate-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.rate-chips li{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:rgba(255,255,255,.02)}
.rate-chips b{color:var(--accent-hi);font-weight:500}
.rate-chips .ic{width:14px;height:14px;color:var(--accent-hi)}

.tool-hero{padding-bottom:clamp(36px,5vw,56px)}
.tool-sec{padding:clamp(36px,5vw,64px) 0 0}
.tool-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,3vw,40px);align-items:start}
.tool-disclaimer{margin-top:26px}

/* ---- form card ---- */
.tool-card{border:1px solid var(--line);border-radius:26px;padding:clamp(20px,3vw,34px);background:linear-gradient(170deg,var(--surface),var(--ink-2));display:flex;flex-direction:column;gap:18px;min-width:0}
[data-show-for]{display:flex;flex-direction:column;gap:18px}
.tf-h{font-family:var(--display);font-weight:500;font-size:17px;letter-spacing:-.01em;margin-top:8px;padding-top:18px;border-top:1px solid var(--line)}
.tf-h em,.tf-l em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-left:8px}
.tf-row{display:flex;flex-wrap:wrap;gap:18px 30px}
.tf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tf{display:flex;flex-direction:column;gap:7px;min-width:0}
.tf-l{font-size:13px;color:var(--muted)}
.tool-card input[type=text],.tool-card input[type=date],.tool-card select{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--stone);font-size:15px;font-family:var(--body);outline:none;transition:.3s var(--ease);min-width:0}
.tool-card select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238B9BB0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.tool-card select option{background:#11161d;color:#F0F4F6}
.tool-card input:focus,.tool-card select:focus{border-color:var(--accent);background:rgba(0,102,255,.08);box-shadow:0 0 0 3px rgba(0,102,255,.18)}
.tool-card input::placeholder{color:var(--dim)}
.tool-card input[type=date]{color-scheme:dark}
.tf-help{font-size:13px;color:var(--muted);line-height:1.5;margin-top:-6px}
.tf-help a{color:var(--accent-hi);text-decoration:underline;text-underline-offset:3px}
.tf-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#C9D3D6;cursor:pointer;line-height:1.45}
.tf-check input{margin-top:3px;accent-color:var(--accent);width:16px;height:16px;flex:none}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:3px;background:rgba(255,255,255,.03);flex-wrap:wrap}
.seg label{cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;padding:8px 16px;border-radius:999px;font-size:13.5px;color:var(--muted);transition:.3s var(--ease)}
.seg input:checked+span{background:linear-gradient(135deg,var(--accent),#0052cc);color:#fff}
.seg input:focus-visible+span{outline:2px solid var(--accent-hi);outline-offset:2px}
[hidden]{display:none!important}

/* repeatable rows */
.trow{display:grid;gap:8px;align-items:center;margin-bottom:8px}
.trow.cols-2{grid-template-columns:1fr 1fr 34px}
.trow.cols-3{grid-template-columns:1fr 1fr 1fr 34px}
.trow.cols-4{grid-template-columns:.7fr 1fr 1fr 1fr 34px}
.trow.cols-5{grid-template-columns:.7fr 1fr 1fr 1fr 1.1fr 34px}
.trow.thead span{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-bottom:-2px}
.trow input{padding:11px 10px!important;text-align:left}
.trow .rm{width:34px;height:34px;border-radius:9px;color:var(--dim);font-size:20px;line-height:1;transition:.3s}
.trow .rm:hover{background:rgba(251,113,133,.12);color:var(--rose)}
.add{align-self:flex-start;font-family:var(--display);font-weight:500;font-size:14px;color:var(--accent-hi);padding:8px 2px;transition:opacity .3s}
.add:hover{opacity:.75}
.conv{margin-top:-4px}
.conv-out{font-size:13.5px;color:var(--muted);line-height:1.6;border:1px dashed rgba(0,210,255,.3);border-radius:12px;padding:12px 14px}
.conv-out b{color:var(--stone);font-weight:500}

/* ---- result panel ---- */
.tool-out{position:sticky;top:96px;border:1px solid rgba(0,102,255,.4);border-radius:26px;padding:clamp(20px,3vw,32px);background:radial-gradient(110% 90% at 100% 0%,rgba(0,102,255,.16),transparent 60%),var(--ink-2);min-width:0}
.out-head{padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:6px}
.out-k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-hi)}
.out-v{display:block;font-family:var(--display);font-weight:400;font-size:clamp(34px,4.6vw,54px);letter-spacing:-.04em;line-height:1.1;margin:8px 0 4px;background:linear-gradient(160deg,var(--stone),var(--accent-hi));-webkit-background-clip:text;background-clip:text;color:transparent;word-break:break-word}
.out-sub{display:block;font-size:13.5px;color:var(--muted);line-height:1.45}
.out-tbl>div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:14.5px}
.out-tbl dt{color:var(--muted);min-width:0}
.out-tbl dt small{display:block;font-size:11.5px;color:var(--dim);line-height:1.35;margin-top:1px}
.out-tbl dd{font-family:var(--mono);font-size:14px;color:var(--stone);text-align:right;flex:none;max-width:60%}
.out-tbl dd .sub{display:block;font-size:11px;color:var(--dim)}
.out-tbl dd b{font-weight:500;font-size:15px}
.out-tbl .strong dt{color:var(--stone);font-weight:500}
.out-tbl .strong dd{color:var(--accent-hi);font-weight:500}
.out-tbl .dim dt,.out-tbl .dim dd{color:var(--dim)}
.out-tbl .share{font-family:var(--mono);font-size:10.5px;color:var(--dim);margin-left:10px}
.out-msg{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:14px}
.out-msg.warn{color:var(--amber);border:1px solid rgba(255,176,32,.35);background:rgba(255,176,32,.07);border-radius:10px;padding:10px 12px}
.out-msg.src{color:var(--dim);font-family:var(--mono);font-size:10.5px;letter-spacing:.03em}
.out-empty{color:var(--muted);font-size:15px;padding:30px 4px;text-align:center}
.fills{margin-top:16px}
.fill-row{display:grid;grid-template-columns:1fr 1.1fr 56px;gap:12px;align-items:center;font-size:13.5px;color:var(--muted);padding:7px 0}
.fill-row b{font-family:var(--mono);font-weight:500;font-size:12.5px;color:var(--stone);text-align:right}
.bar{display:block;height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--accent),var(--accent-hi));transition:width .5s var(--ease)}
.out-actions{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.out-actions button{font-family:var(--display);font-weight:500;font-size:13.5px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;color:var(--muted);transition:.3s}
.out-actions button:hover{border-color:var(--accent);color:var(--accent-hi)}

/* ---- explanatory content ---- */
.formula{counter-reset:f;display:flex;flex-direction:column;gap:10px;margin-top:22px}
.formula li{counter-increment:f;display:flex;gap:14px;align-items:baseline;font-family:var(--mono);font-size:13px;color:#C9D3D6;line-height:1.55;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:#0a0f16}
.formula li::before{content:counter(f);font-size:10.5px;color:var(--accent);flex:none}
.example{margin-top:22px;border:1px solid rgba(0,229,153,.3);background:rgba(0,229,153,.06);border-radius:14px;padding:16px 18px}
.example b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--emerald);margin-bottom:6px;font-weight:500}
.example p{color:#C9D3D6;font-size:14.5px;line-height:1.6}
.tool-how h2{font-size:clamp(26px,3vw,38px);font-weight:400}

/* ---- Incoterms explorer ---- */
.v-S{--vc:var(--accent-hi)}.v-B{--vc:var(--amber)}.v-V{--vc:var(--lilac)}.v-N{--vc:var(--dim)}
.inc{display:flex;flex-direction:column;gap:22px}
.inc-bar{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:flex-end;justify-content:space-between}
.inc-picks{display:flex;flex-wrap:wrap;gap:16px 34px}
.inc-gl{display:block;margin-bottom:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.inc-chips{display:flex;flex-wrap:wrap;gap:8px}
.inc-chip{min-width:64px;padding:11px 14px;border-radius:12px;border:1px solid var(--line);background:var(--ink-2);color:var(--muted);font-family:var(--mono);font-size:14px;letter-spacing:.06em;cursor:pointer;transition:border-color .25s,background .25s,color .25s,box-shadow .25s}
.inc-chip b{font-weight:500}
.inc-chip:hover{border-color:var(--accent);color:var(--stone)}
.inc-chip:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px}
.inc-chip.is-a{background:rgba(0,210,255,.12);border-color:var(--accent-hi);color:#fff;box-shadow:0 0 22px -6px rgba(0,210,255,.6)}
.inc-chip.is-b{background:rgba(167,139,250,.14);border-color:var(--lilac);color:#fff;box-shadow:0 0 22px -6px rgba(167,139,250,.6)}
.inc-actions{display:flex;flex-wrap:wrap;gap:8px}
.inc-actions button{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--muted);font-size:13px;cursor:pointer;transition:border-color .25s,color .25s}
.inc-actions button:hover{border-color:var(--accent);color:var(--stone)}
.inc-actions .inc-cmp[aria-pressed=true]{border-color:var(--lilac);color:var(--lilac);background:rgba(167,139,250,.1)}
.inc-hint{margin-top:-6px;font-size:14px;color:var(--muted)}
.inc-cards,.inc-journeys{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.inc-cards.two,.inc-journeys.two{grid-template-columns:1fr 1fr}
.inc-card{border:1px solid var(--line);border-radius:22px;padding:clamp(18px,2.4vw,28px);background:linear-gradient(170deg,var(--surface),var(--ink-2));animation:incIn .35s ease}
.inc-card.slot-a{border-color:rgba(0,210,255,.4)}.inc-card.slot-b{border-color:rgba(167,139,250,.45)}
.inc-card header{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.inc-code{font-family:var(--display);font-size:36px;font-weight:500;letter-spacing:-.03em;color:var(--accent-hi)}
.slot-b .inc-code{color:var(--lilac)}
.inc-name{font-family:var(--display);font-size:18px;line-height:1.25}
.inc-name small{display:block;margin-top:3px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.inc-card>p{font-size:15px;line-height:1.6;color:#C9D3D6}
.inc-card dl{margin:16px 0 18px;display:grid;gap:10px}
.inc-card dl>div{padding:11px 14px;border-radius:12px;background:#0a0f16;border:1px solid var(--line)}
.inc-card dt{margin-bottom:3px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.inc-card dd{margin:0;font-size:14px;line-height:1.55;color:var(--stone)}
.inc-card .warn{border-color:rgba(255,176,32,.3);background:rgba(255,176,32,.05)}
.inc-card .warn dt{color:var(--amber)}
.inc-bar2{display:flex;gap:2px;height:8px;border-radius:6px;overflow:hidden}
.inc-bar2 i{display:block;min-width:0;background:var(--vc)}
.inc-tl{display:flex;justify-content:space-between;gap:10px;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.inc-tl span{color:var(--vc)}.inc-tl b{font-weight:500}

.jr{border:1px solid var(--line);border-radius:22px;padding:clamp(16px,2.2vw,24px);background:var(--ink-2);animation:incIn .35s ease}
.jr header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:14px}
.jr header b{font-family:var(--display);font-size:18px;font-weight:500}
.jr header span{font-size:14px;color:var(--muted)}
.jr.slot-a header b{color:var(--accent-hi)}.jr.slot-b header b{color:var(--lilac)}
.jr-wrap{position:relative;padding-top:30px}
.jr-legs{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.jr-legs li{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:68px;padding:12px 8px 11px;text-align:center;border-radius:10px;background:color-mix(in srgb,var(--vc) 15%,transparent);border:1px solid color-mix(in srgb,var(--vc) 50%,transparent)}
.jr-legs .jl{font-size:11.5px;line-height:1.3;color:var(--muted)}
.jr-legs b{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--vc)}
.jr-flag{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;z-index:2}
.jr-flag.l{transform:none;align-items:flex-start}.jr-flag.r{transform:translateX(-100%);align-items:flex-end}
.jr-flag span{padding:3px 8px;border-radius:6px;background:var(--accent);font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#fff;white-space:nowrap}
.jr-flag i{display:block;width:2px;height:12px;background:var(--accent)}
.jr-flag.l i{margin-left:12px}.jr-flag.r i{margin-right:12px}
.jr.slot-b .jr-flag span,.jr.slot-b .jr-flag i{background:var(--lilac)}
.jr-pts{position:relative;height:30px;margin-top:8px}
.jr-pts span{position:absolute;top:0;transform:translateX(-50%);font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--dim);white-space:nowrap}
.jr-pts span.l{transform:none}.jr-pts span.r{transform:translateX(-100%)}
.jr-risk{display:none;margin-top:12px;font-size:13px;line-height:1.5;color:var(--muted)}
.jr-risk b{color:var(--stone);font-weight:500}
.jr-badges{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.jr-badges li{display:flex;flex-direction:column;gap:2px;padding:9px 14px;border-radius:12px;background:color-mix(in srgb,var(--vc) 10%,transparent);border:1px solid color-mix(in srgb,var(--vc) 40%,transparent)}
.jr-badges small{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.jr-badges b{font-size:13.5px;font-weight:500;color:var(--vc)}

.inc-diff{grid-column:1/-1;border:1px solid rgba(167,139,250,.35);border-radius:22px;padding:clamp(16px,2.2vw,24px);background:rgba(167,139,250,.05)}
.inc-diff h3{margin-bottom:8px;font-size:18px;font-weight:500}
.inc-diff li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 14px;padding:11px 0;border-top:1px solid var(--line);font-size:14px}
.inc-diff .pair{display:flex;flex:none;gap:8px}
.inc-diff em{padding:5px 11px;border-radius:999px;font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--vc);background:color-mix(in srgb,var(--vc) 10%,transparent);border:1px solid color-mix(in srgb,var(--vc) 55%,transparent)}
.inc-diff em small{margin-right:6px;opacity:.65}
.inc-same{grid-column:1/-1;padding:14px 18px;border-radius:14px;border:1px solid var(--line);color:var(--muted);font-size:14px;line-height:1.55}

.inc-tablehead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 20px;margin-top:14px}
.inc-tablehead h2{font-size:clamp(24px,3vw,34px);font-weight:400}
.inc-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--mono);font-size:11px;color:var(--muted)}
.inc-legend li{display:flex;align-items:center;gap:7px}
.inc-legend i{display:block;width:10px;height:10px;border-radius:3px;background:var(--vc)}
.inc-tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:var(--ink-2)}
.inc-tablewrap:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px}
.inc-table{width:100%;min-width:1000px;border-collapse:separate;border-spacing:0;font-size:13px}
.inc-table th,.inc-table td{padding:11px 8px;text-align:center;border-bottom:1px solid rgba(255,255,255,.06);transition:opacity .25s,background .25s}
.inc-table tbody tr:last-child th,.inc-table tbody tr:last-child td{border-bottom:0}
.inc-table th[scope=row]{position:sticky;left:0;z-index:1;min-width:220px;max-width:260px;padding-left:16px;text-align:left;font-weight:400;line-height:1.4;color:var(--stone);background:var(--ink-2);border-right:1px solid var(--line)}
.inc-table thead th{padding-top:14px;padding-bottom:12px;font-family:var(--mono)}
.inc-table thead th:first-child{text-align:left;padding-left:16px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:400;position:sticky;left:0;z-index:2;background:var(--ink-2);border-right:1px solid var(--line)}
.inc-table thead b{display:block;font-size:14px;font-weight:500;color:var(--stone)}
.inc-table thead small{display:block;margin-top:2px;font-size:9.5px;font-weight:400;line-height:1.25;letter-spacing:0;color:var(--dim)}
.inc-table td span{display:inline-block;padding:4px 9px;border-radius:999px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;white-space:nowrap;color:var(--vc);background:color-mix(in srgb,var(--vc) 12%,transparent);border:1px solid color-mix(in srgb,var(--vc) 38%,transparent)}
.inc-table tfoot th,.inc-table tfoot td{border-bottom:0;border-top:1px solid var(--line);background:rgba(255,255,255,.02);font-family:var(--mono);font-size:11.5px}
.inc-table tfoot th[scope=row]{background:var(--ink-2);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.inc-tally b{font-weight:500;color:var(--vc)}
.inc-table .col-dim{opacity:.5}
.inc-table .col-a{background:rgba(0,210,255,.07)}
.inc-table .col-b{background:rgba(167,139,250,.08)}
.inc-table thead .col-a b{color:var(--accent-hi)}.inc-table thead .col-b b{color:var(--lilac)}
.inc-foot{font-size:12.5px;line-height:1.55;color:var(--dim)}
@keyframes incIn{from{opacity:0;transform:translateY(6px)}}
@media (max-width:900px){
  .inc-cards.two,.inc-journeys.two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .jr-legs{grid-template-columns:minmax(0,1fr)}
  .jr-legs li{flex-direction:row;justify-content:space-between;align-items:center;min-height:0;padding:10px 14px;text-align:left}
  .jr-wrap{padding-top:0}
  .jr-flag,.jr-pts{display:none}
  .jr-risk{display:block}
  .inc-code{font-size:30px}
}
@media (prefers-reduced-motion:reduce){.inc-card,.jr{animation:none}}
@media print{
  .inc-picks,.inc-actions,.inc-hint,.inc-foot{display:none}
  .inc-table{min-width:0;font-size:10px}.inc-tablewrap{overflow:visible}
  .inc-table th[scope=row]{position:static;min-width:0}
}

/* ---- VIN, container number and pallet-fit tools ---- */
.tool-card textarea{width:100%;min-height:132px;resize:vertical;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:var(--stone);font-family:var(--mono);font-size:14px;line-height:1.6;letter-spacing:.04em;outline:none;transition:border-color .3s,background .3s,box-shadow .3s}
.tool-card textarea:focus{border-color:var(--accent);background:rgba(0,102,255,.08);box-shadow:0 0 0 3px rgba(0,102,255,.18)}
.tool-card textarea::placeholder{color:var(--dim)}
.vin-input,.tool-card input[name=sizeType]{font-family:var(--mono)!important;letter-spacing:.1em;text-transform:uppercase}
.tool-card input[name=vin]::placeholder,.tool-card input[name=sizeType]::placeholder{letter-spacing:.1em}
.out-sec{margin:22px 0 4px;padding-top:18px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-hi)}
.out-btn{margin-top:10px;padding:11px 18px;border-radius:999px;border:1px solid rgba(0,210,255,.45);background:rgba(0,210,255,.08);color:var(--accent-hi);font-family:var(--display);font-weight:500;font-size:14px;cursor:pointer;transition:background .25s,border-color .25s}
.out-btn:hover{background:rgba(0,210,255,.16);border-color:var(--accent-hi)}
.out-btn:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px}
.cid-list>div{align-items:flex-start}
.cid-list dt{font-family:var(--mono);font-size:13.5px;letter-spacing:.06em;color:var(--stone)}
.cid-list dd{max-width:62%}
.cid-list dd b{display:inline-block;padding:3px 10px;border-radius:999px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;border:1px solid}
.cid-ok{color:var(--emerald);border-color:rgba(0,229,153,.4)!important;background:rgba(0,229,153,.08)}
.cid-bad{color:var(--amber);border-color:rgba(255,176,32,.45)!important;background:rgba(255,176,32,.08)}
.cid-calc{color:var(--accent-hi);border-color:rgba(0,210,255,.4)!important;background:rgba(0,210,255,.08)}
.pf-plan{display:block;width:100%;height:auto;margin-top:10px;border-radius:14px;background:#0a0f16;border:1px solid var(--line)}
.pf-box{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.28);stroke-width:14}
.pf-pal{fill:rgba(0,210,255,.2);stroke:var(--accent-hi);stroke-width:8}
.pf-door{stroke:var(--amber);stroke-width:22;stroke-linecap:round}
.pf-lbl{fill:var(--dim);font-family:var(--mono);font-size:92px;letter-spacing:.3em}

/* reference tables */
.ref-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:20px;background:var(--ink-2)}
.ref-wrap.narrow{max-width:760px}
.ref-wrap:focus-visible{outline:2px solid var(--accent-hi);outline-offset:2px}
.ref-table{width:100%;min-width:860px;border-collapse:collapse;font-size:13.5px}
.ref-wrap.narrow .ref-table{min-width:520px}
.ref-table th,.ref-table td{padding:13px 14px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.06)}
.ref-table thead th{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);background:rgba(255,255,255,.02)}
.ref-table tbody tr:last-child th,.ref-table tbody tr:last-child td{border-bottom:0}
.ref-table tbody th{font-family:var(--display);font-weight:500;font-size:14.5px;color:var(--stone);white-space:nowrap}
.ref-table td{color:#C9D3D6;font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.ref-table small{display:block;margin-top:2px;font-family:var(--body);font-size:11.5px;color:var(--dim);white-space:normal}
.ref-note{margin-top:14px;font-size:12.5px;line-height:1.55;color:var(--dim)}
.ref-h{margin:34px 0 14px;font-size:20px;font-weight:500}

@media (max-width:1080px){
  .tool-layout{grid-template-columns:minmax(0,1fr)}
  .tool-out{position:static}
}
@media (max-width:560px){
  .tf-grid{grid-template-columns:minmax(0,1fr)}
  .trow.cols-5{grid-template-columns:.7fr 1fr 1fr 1fr 34px}
  .trow.cols-5 input[data-k=weight]{grid-column:1/-1;grid-row:2}
  .trow.cols-5 .rm{grid-row:1;grid-column:5}
  .trow.cols-5.thead span:nth-child(5){display:none}
  .out-tbl dd{max-width:55%}
}

/* ---- print: a clean, ink-friendly copy of the inputs and result ---- */
@media print{
  body{background:#fff!important;color:#000!important}
  .site-header,.mobile,.site-footer,.grain,.spot,#prog,.orb,.crumbs,.tool-lead,.tool-disclaimer .notice+*,.band,.sec,.sec-tight,.out-actions,.skip,.add,.rm,.rate-chips li .ic{display:none!important}
  .tool-sec,.tool-hero{display:block!important;padding:0!important}
  .tool-hero .wrap,.tool-sec .wrap{max-width:none;padding:0 12mm}
  .page-hero{border:0;padding:12mm 0 4mm!important}
  .page-hero h1,.page-hero .lede{color:#000!important;-webkit-text-fill-color:#000}
  .tool-layout{display:block}
  .tool-card,.tool-out{background:#fff!important;border:1px solid #999!important;box-shadow:none!important;color:#000!important;position:static;margin-bottom:8mm;break-inside:avoid}
  .tool-card input,.tool-card select{border:0!important;border-bottom:1px solid #999!important;background:#fff!important;color:#000!important;border-radius:0!important}
  .out-v{-webkit-text-fill-color:#000!important;color:#000!important;background:none!important}
  .out-k,.out-sub,.out-tbl dt,.out-tbl dd,.out-msg,.tf-l,.tf-h,.tf-help{color:#000!important}
  .rate-chips li{border:0;padding:0;color:#000}
  .tool-disclaimer .notice{display:flex!important;border:1px solid #999;background:#fff;color:#000}
}
/* phones and touch screens: tool buttons get a 44px hit area; the small label above a worked example stays legible */
@media (pointer:coarse),(max-width:640px){
  .add{min-height:44px;display:inline-flex;align-items:center}
  .out-actions button,.out-btn{min-height:44px}
  /* the remove-row button keeps its 34px grid cell; an invisible ring extends the touch area to 44px */
  .rm{position:relative}
  .rm::after{content:"";position:absolute;inset:-5px}
}
@media (max-width:640px){.example b{font-size:11.5px}}