/* oaneo calculators (loaded on /tools/{slug} only). Tokens come from site.css. */
.calc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);margin-top:var(--s6);border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--sheet);box-shadow:var(--shadow-sheet)}
.calc-form{padding:clamp(20px,2.8vw,34px);border-right:1px solid var(--rule);display:grid;gap:18px;align-content:start;min-width:0}
.calc-out{padding:clamp(20px,2.8vw,34px);display:flex;flex-direction:column;gap:var(--s5);min-width:0;scroll-margin-top:88px}
.calc-out:focus{outline:0}
.calc-h{font:500 var(--f13)/1.4 var(--mono);letter-spacing:.07em;color:var(--ink-3)}
.calc-out.is-stale .hero-out,.calc-out.is-stale .metrics,.calc-out.is-stale table,.calc-out.is-stale .rail{opacity:.4}
.stale-msg{font-size:var(--f14);line-height:1.6;color:var(--seal-ink);padding:10px 14px;border:1px dashed var(--seal);border-radius:var(--r-sm)}
.stale-msg[hidden]{display:none}

/* fields */
.field{display:grid;gap:8px;min-width:0}
.field label,.flbl{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:var(--f15);font-weight:600;line-height:1.4}
.field label small,.flbl small,details.adv summary small{font-weight:400;font-size:var(--f13);color:var(--ink-3);text-align:right}
.inp{position:relative}
.inp input,.inp select{width:100%;height:50px;padding:0 64px 0 14px;border:1px solid var(--rule-2);border-radius:var(--r-sm);background:var(--paper);font:500 var(--f17)/1 var(--mono);font-variant-numeric:tabular-nums;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.inp select{padding-right:36px;font:500 var(--f15)/1 var(--sans);appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px;background-repeat:no-repeat}
.inp input[type=date]{padding-right:14px}
.inp input[readonly]{background:var(--paper-2);color:var(--ink-2)}
.inp input:hover,.inp select:hover{border-color:var(--ink-3)}
.inp input:focus,.inp select:focus,.trades input:focus,.trades select:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 4px var(--seal-wash)}
.inp input[aria-invalid=true],.trades input[aria-invalid=true]{border-color:var(--seal);border-style:dashed;box-shadow:0 0 0 3px var(--seal-wash)}
.inp .u{position:absolute;right:14px;top:50%;transform:translateY(-50%);font:500 var(--f13)/1 var(--mono);color:var(--ink-3);pointer-events:none}
.fmsg{font-size:var(--f14);line-height:1.5;color:var(--seal-ink)}
.fmsg:empty{display:none}
.fmsg::before{content:"! ";font-weight:700}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.status{font-size:var(--f14);line-height:1.65;color:var(--ink-2)}
.status:empty{display:none}
.swap-mark{justify-self:center;font:500 var(--f19)/1 var(--mono);color:var(--ink-3);margin:-6px 0}

/* segmented radios */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:4px;margin:0;border-radius:999px;background:var(--paper-2);border:1px solid var(--rule);min-width:0}
.seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg label{text-align:center;padding:9px 6px;border-radius:999px;font-weight:600;font-size:var(--f15);line-height:1.3;cursor:pointer;color:var(--ink-2);transition:background var(--t-fast),color var(--t-fast)}
.seg label:hover{color:var(--ink)}
.seg input:checked+label{background:var(--ink);color:var(--paper)}
.seg input:checked+label::before{content:"● ";font-size:.7em;vertical-align:.15em}
.seg input:focus-visible+label{outline:2px solid var(--seal);outline-offset:2px}

/* leverage */
.lev{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:14px;align-items:center}
.lev .inp input{padding-right:30px}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;margin:0}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--ink) var(--p,8%),var(--rule-2) var(--p,8%));border-radius:2px}
input[type=range]::-moz-range-track{height:2px;background:var(--rule-2)}
input[type=range]::-moz-range-progress{height:2px;background:var(--ink)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;border-radius:50%;background:var(--sheet);border:2px solid var(--ink)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--sheet);border:2px solid var(--ink)}
.ticks{display:flex;flex-wrap:wrap;gap:6px}
.ticks button{min-height:32px;padding:0 11px;border:1px solid var(--rule-2);border-radius:999px;background:transparent;font:500 var(--f13)/1 var(--mono);color:var(--ink-2);cursor:pointer}
.ticks button:hover{border-color:var(--seal);color:var(--seal-ink)}
.ticks button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}

/* disclosures and sub-groups */
fieldset.sub,details.adv{border:1px dashed var(--rule-2);border-radius:var(--r-sm);padding:12px 14px;margin:0;min-width:0}
fieldset.sub{display:grid;gap:12px}
fieldset.sub legend{font-size:var(--f15);font-weight:600;padding:0 6px}
details.adv summary{display:flex;justify-content:space-between;align-items:baseline;gap:12px;cursor:pointer;font-weight:600;font-size:var(--f15);list-style:none}
details.adv summary::-webkit-details-marker{display:none}
details.adv summary::before{content:"+";font:500 var(--f17)/1 var(--mono);color:var(--ink-3);margin-right:-4px}
details.adv[open] summary::before{content:"−"}
details.adv summary>small{margin-left:auto}
.adv-in{display:grid;gap:14px;margin-top:14px}
.linkbtn{justify-self:start;border:0;background:none;padding:4px 0;font-size:var(--f14);color:var(--ink-2);text-decoration:underline;text-underline-offset:.25em;cursor:pointer}
.linkbtn:hover{color:var(--seal-ink)}
.form-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;padding-top:12px;border-top:1px solid var(--rule);font-size:var(--f13);color:var(--ink-3)}

/* repeatable rows */
.trades{font-size:var(--f14)}
.trades th{text-align:left;font-weight:500;font-size:var(--f13);color:var(--ink-3);padding:0 4px 6px}
.trades td{padding:3px 4px 3px 0}
.trades td.n{font:500 var(--f13) var(--mono);color:var(--ink-3);width:2em;text-align:center}
.trades input,.trades select{width:100%;height:42px;padding:0 10px;border:1px solid var(--rule-2);border-radius:var(--r-sm);background:var(--paper);font:500 var(--f15)/1 var(--mono)}
.trades select{font-family:var(--sans)}
.trades td:last-child{width:40px}
.del{width:34px;height:34px;border:1px solid var(--rule-2);border-radius:50%;background:none;color:var(--ink-2);font-size:18px;line-height:1;cursor:pointer}
.del:hover{border-color:var(--seal);color:var(--seal-ink)}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.addbtn{min-height:36px;padding:0 14px;border:1px dashed var(--rule-2);border-radius:999px;background:none;font-size:var(--f14);font-weight:600;color:var(--ink-2);cursor:pointer}
.addbtn:hover{border-style:solid;border-color:var(--ink);color:var(--ink)}

/* results */
.hero-out{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s4)}
.hero-out>div{min-width:0}
.hl{font-size:var(--f15);font-weight:600;display:flex;align-items:center;gap:8px}
.hl i{width:10px;height:10px;border-radius:50%;background:var(--seal);flex:none}
.hl--sl i{border-radius:2px;background:var(--ink)}
.big{margin-top:8px;font:600 clamp(38px,5vw,64px)/1.05 var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.big output{font:inherit}
.big small{font-size:max(12px,.26em);letter-spacing:.04em;color:var(--ink-3);margin-left:8px}
.big--s{font-size:clamp(30px,3.6vw,46px)}
.two-big{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.two-big .s{font:500 var(--f15)/1.4 var(--mono);color:var(--ink-2);margin-top:4px}
.dist{text-align:right}
.dist .v{font:600 26px/1.1 var(--mono);color:var(--seal-ink);letter-spacing:-.02em}
.dist .s{font-size:var(--f13);color:var(--ink-3);margin-top:6px;max-width:16em;margin-left:auto}
.used{font-size:var(--f14);line-height:1.6;color:var(--ink-2)}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.metrics>div{padding:14px 14px 4px 0;border-bottom:1px solid var(--rule);min-width:0}
.metrics>div:nth-child(3n+2),.metrics>div:nth-child(3n){padding-left:14px;border-left:1px solid var(--rule)}
.metrics>div.wide{grid-column:1/-1;padding-left:0;border-left:0}
.metrics dt{font-size:var(--f13);line-height:1.45;color:var(--ink-3)}
.metrics dd{margin:4px 0 10px;font:600 var(--f19)/1.35 var(--mono);letter-spacing:-.01em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.metrics dd small{font:500 var(--f12) var(--mono);color:var(--ink-3)}
.metrics dd small.w{font-family:var(--sans);font-size:var(--f13);color:var(--ink-2);white-space:nowrap}
.warn{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;font-size:var(--f14);line-height:1.75;color:var(--ink-2);padding:14px 16px;border-radius:var(--r-sm);background:var(--paper-2)}
.warn svg{width:18px;height:18px;color:var(--lim);margin-top:3px}
.warn.hot{background:var(--no-wash);color:var(--ink)}
.warn.hot svg{color:var(--no)}
.warn.hot p::before{content:"注意：";font-weight:700}
.res-note{font-size:var(--f14);line-height:1.75;color:var(--ink-2)}
.res-note:not(:empty){padding:12px 16px;border-radius:var(--r-sm);background:var(--paper-2)}

/* tables inside the result */
.cmp,.steps,.qt{font-size:var(--f14);font-variant-numeric:tabular-nums}
.cmp caption,.steps caption,.qt caption{caption-side:top;text-align:left;font:500 var(--f13)/1.4 var(--mono);color:var(--ink-3);padding-bottom:8px}
.cmp th,.cmp td,.steps th,.steps td,.qt th,.qt td{padding:9px 8px;border-bottom:1px solid var(--rule);text-align:right;white-space:nowrap}
.cmp th:first-child,.steps th:first-child,.qt th:first-child{text-align:left;padding-left:0;white-space:normal}
.cmp thead th,.steps thead th,.qt thead th{font-weight:500;font-size:var(--f13);color:var(--ink-3);border-bottom:1px solid var(--ink)}
.cmp td,.steps td,.qt td{font-family:var(--mono)}
.cmp tbody th,.steps tbody th,.qt tbody th{font-weight:600}

/* liquidation gauge */
.rail{height:172px;margin-top:-6px;overflow:hidden}
.rail svg{display:block;width:100%;height:172px}
.rail .track{stroke:var(--ink);stroke-width:1}
.rail .danger{fill:url(#hatch)}
.rail .hz{fill:var(--no-wash)}
.rail .hl{stroke:var(--no);stroke-width:1.2;opacity:.55}
.rail .lead{stroke:var(--rule-2);stroke-dasharray:2 2}
.rail .lab{font:600 12px var(--mono);fill:var(--ink)}
.rail .lab-liq{fill:var(--seal-ink)}
.rail .mk-liq{stroke:var(--seal);stroke-width:2.4;stroke-linecap:round}
.rail .mk-ent{fill:var(--ink)}
.rail .mk-o{fill:var(--sheet);stroke:var(--ink);stroke-width:2}
.rail .br{fill:none;stroke:var(--ink-3);stroke-width:1}
.rail .chip-bg{fill:var(--sheet);stroke:var(--rule-2)}
.rail .chip-t{font:600 12px var(--mono);fill:var(--ink)}
.rail .axis{stroke:var(--rule-2)}
.rail .tick{stroke:var(--rule-2)}
.rail .ax{font:500 12px var(--mono);fill:var(--ink-3)}

/* ahr999 scale and charts */
.scale{position:relative;height:30px;border-top:6px solid transparent;background:linear-gradient(to right,var(--ok-wash) 0 32%,var(--lim-wash) 32% 58%,var(--paper-2) 58% 100%) top/100% 6px no-repeat}
.scale span{position:absolute;left:calc(var(--a)*100%);top:8px;transform:translateX(-50%);font:500 var(--f12)/1 var(--mono);color:var(--ink-3)}
.scale span:first-child{transform:none}.scale span:nth-child(4){transform:translateX(-100%)}
.scale i{position:absolute;top:-10px;width:2px;height:14px;margin-left:-1px;background:var(--seal)}
.chart-box{padding:12px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--paper)}
.chart-box canvas{display:block;width:100%;height:220px}

/* converter quote table */
.qt td:nth-child(2),.qt td:nth-child(3){min-width:7em}

/* sticky mobile result dock */
.dock{display:none}
@media (max-width:960px){
  .dock{position:fixed;z-index:30;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-md);background:var(--ink);color:var(--paper);text-decoration:none;box-shadow:var(--shadow-lift)}
  .dock[hidden]{display:none}
  .dock:hover{color:var(--paper)}
  .dock-l{font-size:var(--f13);opacity:.8}
  .dock-v{font:600 var(--f17)/1.2 var(--mono);margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dock-go{font-size:var(--f13);white-space:nowrap;padding-left:10px;border-left:1px solid color-mix(in oklab,var(--paper) 30%,transparent)}
}

/* worked example (範例) */
.tool-disc{margin-top:var(--s4)}
.ex{margin-top:clamp(40px,5vw,64px);padding:clamp(20px,3vw,32px);border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--sheet)}
.ex h2{font-size:var(--fxl);margin-top:var(--s3)}
.ex-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);margin-top:var(--s5);align-items:start}
.ex-t{font-size:var(--f15)}
.ex-t caption{caption-side:top;text-align:left;font:500 var(--f13)/1.4 var(--mono);color:var(--ink-3);padding-bottom:6px;border-bottom:1px solid var(--ink)}
.ex-t th,.ex-t td{padding:10px 0;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.55}
.ex-t th{text-align:left;font-weight:500;color:var(--ink-2);padding-right:14px;width:42%}
.ex-t td{font-family:var(--mono);font-weight:600;overflow-wrap:anywhere}
.ex-note{margin-top:var(--s4);font-size:var(--f14);line-height:1.8;color:var(--ink-2)}
.big-f{margin-top:var(--s4);font-size:var(--f15)}
.tbl-scroll{overflow-x:auto}
.ex .tbl-scroll{margin-top:var(--s5)}

/* leverage quick reference (sidebar) */
.levref table{margin-top:10px;font:500 var(--f13)/1 var(--mono);font-variant-numeric:tabular-nums}
.levref th,.levref td{padding:8px 0 8px 6px;text-align:right;border-bottom:1px solid var(--rule);white-space:nowrap}
.levref th:first-child{text-align:left;padding-left:0}
.levref thead th{font:500 var(--f12)/1.3 var(--sans);color:var(--ink-3);border-bottom:1px solid var(--ink)}
.levref tbody th{font-weight:600}
.levref tr.on{background:var(--seal-wash)}
.levref tr.on th{color:var(--seal-ink)}
.levref tr.on th::before{content:"▸ "}
.levref-sub{font-size:var(--f13);color:var(--ink-2)}
.levref-foot{margin-top:10px;padding-top:10px;border-top:1px dashed var(--rule-2);font-size:var(--f12);line-height:1.7;color:var(--ink-3)}
.tool-doc .side{display:grid;gap:var(--s4);align-content:start}

@media (max-width:960px){
  .calc{grid-template-columns:minmax(0,1fr)}
  .calc-form{border-right:0;border-bottom:1px solid var(--rule)}
  .tool-doc .side{position:static}
}
@media (max-width:640px){
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .metrics>div:nth-child(3n+2),.metrics>div:nth-child(3n){padding-left:0;border-left:0}
  .metrics>div:nth-child(even){padding-left:12px;border-left:1px solid var(--rule)}
  .ex-grid,.two-big{grid-template-columns:minmax(0,1fr)}
  .two{gap:10px}
  .dist{text-align:left}.dist .s{margin-left:0}
  .lev{grid-template-columns:minmax(0,1fr) 92px}
  .seg label{font-size:var(--f14);padding:9px 4px}
}
@media (prefers-reduced-motion:reduce){.seg label,.inp input,.ticks button{transition:none}}