/* calc-ui.css: the My character tab (calc-ui.js). Three fluid columns: character | gear and buffs | combat simulator.
 * Uses the site's CSS variables (index.html :root); every rule is scoped to #tab-calc. The saved-builds bar (.bb) is shared with the Skill simulator and styled in index.html. */
#tab-calc{--cx-gbg:#2a2716;--cx-gline:#6a5a2a;--cx-row:#222b39;--cx-row2:#1f2836;padding:12px 14px 60px}
#tab-calc .cx{max-width:1560px;margin:0 auto}
#tab-calc .cx-dim{color:var(--muted)}
#tab-calc .cx-gold{color:var(--gold)}
#tab-calc .cx-pad{padding:8px 0}
#tab-calc .cx-mt{margin-top:10px}

/* toolbar */
#tab-calc .cx-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
#tab-calc .cx-top .bb-wrap{flex:0 1 700px}
#tab-calc .cx-top .bb select{flex:0 1 200px}
#tab-calc .cx-barr{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
#tab-calc .cx-hint{margin-left:auto;font-size:12px;color:var(--muted)}
#tab-calc .cx-msg2{font-size:13px;color:var(--muted)}
#tab-calc .bb .btn{height:34px}
#tab-calc #cx-linkin{width:100%;margin-bottom:8px}

/* buttons, pills, controls */
#tab-calc .cx-b{height:34px;padding:0 14px;border-radius:6px;border:1px solid var(--line2);background:var(--panel2);color:var(--text);cursor:pointer;white-space:nowrap}
#tab-calc .cx-b:hover{border-color:var(--gold)}
#tab-calc .cx-b.sm{height:28px;padding:0 10px;font-size:13px}
#tab-calc .cx-b.ghost{background:transparent;color:var(--muted)}
#tab-calc .cx-b:disabled,#tab-calc .cx-pill:disabled,#tab-calc .cx-sm:disabled,#tab-calc .cx-ib:disabled{opacity:.35;cursor:default}
#tab-calc .cx-pill{height:32px;padding:0 12px;border-radius:16px;border:1px solid var(--line2);background:var(--bg);color:var(--text);font-size:13px;cursor:pointer;white-space:nowrap}
#tab-calc .cx-pill:hover:not(:disabled){border-color:var(--gold)}
#tab-calc .cx-pill.on{border-color:var(--gold);background:var(--cx-gbg);color:var(--gold)}
#tab-calc .cx-pill.sm{height:26px;padding:0 10px;font-size:12px;color:var(--muted);background:transparent}
#tab-calc .cx-pill.sm.on{color:var(--gold);background:var(--cx-gbg)}
#tab-calc .cx-n{display:inline-block;min-width:16px;margin-left:4px;padding:0 4px;border-radius:8px;background:var(--line2);color:var(--text);font-size:11px;line-height:16px;text-align:center}
#tab-calc .cx-pill.on .cx-n{background:var(--gold);color:#1a1a1a}
#tab-calc .cx-sm{background:var(--panel2);border:1px solid var(--line2);border-radius:6px;width:30px;height:30px;padding:0;cursor:pointer;font-size:15px;line-height:1;color:var(--text)}
#tab-calc .cx-sm:hover:not(:disabled){border-color:var(--gold)}
#tab-calc .cx-link{background:none;border:0;padding:0;color:var(--blue);cursor:pointer;font-size:12px}
#tab-calc .cx-link:hover{text-decoration:underline}
#tab-calc .cx-chk{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
#tab-calc input:not([type=checkbox]):not([type=radio]),#tab-calc select{background:var(--bg);border:1px solid var(--line2);border-radius:6px;padding:4px 6px;height:34px;min-width:0;max-width:100%;color:var(--text)}
#tab-calc input:focus,#tab-calc select:focus,#tab-calc button:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
#tab-calc input[type=number]{width:64px}
#tab-calc .ff{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted);min-width:0}
#tab-calc .ff input[type=number],#tab-calc .ff select{width:100%}
#tab-calc .cx-g3{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
#tab-calc .cx-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:8px}
#tab-calc .cx-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;align-items:end;margin:10px 0 4px}

/* columns and cards */
#tab-calc .cx-cols{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px}
#tab-calc .cx-c1,#tab-calc .cx-c2,#tab-calc .cx-c3{min-width:0;display:flex;flex-direction:column;gap:14px}
#tab-calc .cx-c1{flex:1 1 320px;max-width:380px}
#tab-calc .cx-c2{flex:2 1 460px}
#tab-calc .cx-c3{flex:2 1 440px}
#tab-calc .cx-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;min-width:0}
#tab-calc .cx-ch{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:10px}
#tab-calc .cx-ch .cx-dim:last-child:not(h3){margin-left:auto;font-size:12px}
#tab-calc .cx-card h3{margin:0;font-size:12px;letter-spacing:.7px;text-transform:uppercase;color:var(--gold);font-weight:600}
#tab-calc .cx-cb{min-width:0}
#tab-calc .cx-h5{margin:12px 0 6px;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--gold)}
#tab-calc .cx-prob{background:#3a1f1c;border:1px solid #7a3a2e;color:#f0b3ab;border-radius:6px;padding:6px 10px;margin-bottom:8px;font-size:13px}
#tab-calc .cx-err{color:var(--red)}
#tab-calc .cx-prob.cx-err{color:#f0b3ab}
#tab-calc #cx-notes .cx-b{margin-top:6px}
#tab-calc .cx-b.on{border-color:var(--gold);color:var(--gold)}

/* import from rocalc: the bookmarklet panel and the "imported" notice */
#tab-calc .cx-rc{margin-bottom:12px;max-width:720px}
#tab-calc .cx-rcsteps{margin:0 0 10px;padding-left:22px;display:flex;flex-direction:column;gap:8px;font-size:14px}
#tab-calc .cx-rcbtn{display:inline-block;margin-left:4px;padding:6px 14px;border-radius:6px;border:1px dashed var(--gold);background:var(--cx-gbg);color:var(--gold);font-weight:600;text-decoration:none;cursor:grab;user-select:none}
#tab-calc .cx-rcbtn:hover{border-style:solid}
#tab-calc .cx-rcnote{font-size:12px;line-height:1.5}
#tab-calc .cx-rcpaste{margin:0 0 12px}
#tab-calc .cx-rcpaste label{display:block;margin-bottom:6px;font-size:14px}
#tab-calc .cx-rcrow{display:flex;gap:8px;align-items:stretch;margin-bottom:6px}
#tab-calc .cx-rcin{flex:1 1 auto;min-width:0}
#tab-calc .cx-rcerr{color:#f0b3ab;font-size:13px}
#tab-calc .cx-rcerr:not(:empty){background:#3a1f1c;border:1px solid #7a3a2e;border-radius:6px;padding:6px 10px;margin-bottom:6px}
#tab-calc .cx-imp{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px 12px;background:var(--cx-gbg);border-color:var(--cx-gline);color:var(--text)}
#tab-calc .cx-imp>div,#tab-calc .cx-imp>details{flex:1 1 320px;min-width:0}
#tab-calc .cx-imp summary{cursor:pointer;color:var(--muted);margin-top:4px}
#tab-calc .cx-imp details div{color:var(--muted);margin-top:2px}

/* character */
#tab-calc .cx-pts{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;font-size:13px}
#tab-calc .cx-pts .cx-dim:first-child{font-size:12px}
#tab-calc .cx-stats{display:flex;flex-direction:column;gap:5px}
#tab-calc .cx-st{display:grid;grid-template-columns:42px 30px 54px 30px minmax(0,1fr);align-items:center;gap:5px}
#tab-calc .cx-st b{font-size:13px;color:var(--gold)}
#tab-calc .cx-st input{width:100%!important;height:30px;text-align:center;font-variant-numeric:tabular-nums}
#tab-calc .cx-tot{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}

/* skills */
#tab-calc .cx-srcrow{display:flex;gap:8px;align-items:flex-end;margin-bottom:8px}
#tab-calc .cx-srcrow .ff{flex:1 1 auto}
#tab-calc .cx-ask{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 10px;margin-bottom:8px;background:var(--panel2);border:1px solid var(--line2);border-radius:6px;font-size:13px}
#tab-calc .cx-ask span{flex:1 1 200px}
#tab-calc #cx-skmsg{min-height:0;margin-bottom:6px}
#tab-calc #cx-skmsg:empty{display:none}
#tab-calc .cx-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
#tab-calc .cx-sklist{display:flex;flex-direction:column;max-height:420px;overflow-y:auto}
#tab-calc .cx-sk{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:4px 0;border-bottom:1px solid var(--cx-row)}
#tab-calc .cx-sk .nm{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
#tab-calc .cx-sk.on .nm{color:var(--text)}
#tab-calc .cx-sk .ctl{display:flex;align-items:center;gap:3px}
#tab-calc .cx-sk input{width:44px!important;height:28px;text-align:center;font-variant-numeric:tabular-nums}
#tab-calc .cx-sk .cx-sm{width:26px;height:28px}
#tab-calc .cx-skfoot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:8px}
#tab-calc .cx-skfoot .cx-chk{margin-left:auto}
#tab-calc .cx-gr{margin:0 0 6px;font-size:12px}

/* status */
#tab-calc .cx-sg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
#tab-calc .cx-kv{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:5px 0;border-bottom:1px solid var(--cx-row);font-size:13px;min-width:0}
#tab-calc .cx-kv>span{color:var(--muted);flex:0 0 auto}
#tab-calc .cx-kv>b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;min-width:0}
#tab-calc .cx-wline{margin-top:10px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:12px}
#tab-calc .cx-notes{margin-top:8px;font-size:12px}

/* equipment */
#tab-calc .cx-presets{margin-left:auto}
#tab-calc .cx-ph{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
#tab-calc .cx-ph>span{white-space:nowrap}
#tab-calc .cx-ph select{height:32px;max-width:260px}
#tab-calc .cx-eq{display:grid;grid-template-columns:112px minmax(0,1fr) 62px;align-items:start;gap:10px;padding:7px 0;border-bottom:1px solid var(--cx-row)}
#tab-calc .cx-slab{font-size:12px;color:var(--muted);padding-top:6px}
#tab-calc .cx-emid{min-width:0;display:flex;flex-direction:column;gap:5px}
#tab-calc .cx-note{font-size:13px;color:var(--muted);padding-top:5px}
#tab-calc .cx-itline{display:flex;align-items:center;gap:8px;min-width:0}
#tab-calc .cx-ib{all:unset;box-sizing:border-box;cursor:pointer;font-size:14px;color:var(--muted);min-width:0;max-width:100%;padding:4px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tab-calc .cx-ib.set{font-weight:600;color:var(--text)}
#tab-calc .cx-ib:hover:not(:disabled){text-decoration:underline}
#tab-calc .cx-ib:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:3px}
#tab-calc .cx-ib.big{height:38px;padding:0 12px;border:1px solid var(--line2);border-radius:6px;background:var(--bg);font-size:14px;display:flex;align-items:center;gap:8px;flex:1 1 auto;color:var(--text)}
#tab-calc .cx-ib.big:hover:not(:disabled){text-decoration:none;border-color:var(--gold)}
#tab-calc .cx-info{font-size:11px;color:var(--muted);flex:0 0 auto}
#tab-calc .cx-x{background:none;border:0;padding:0 4px;color:var(--muted);cursor:pointer;font-size:12px;line-height:1;flex:0 0 auto}
#tab-calc .cx-x:hover{color:var(--red)}
#tab-calc .cx-chips{display:flex;flex-wrap:wrap;gap:5px}
#tab-calc .cx-cc{display:inline-flex;align-items:center;height:26px;border-radius:13px;border:1px solid var(--cx-gline);background:#1f2533;padding-right:4px}
#tab-calc .cx-chip{height:26px;padding:0 10px;border-radius:13px;border:1px solid var(--cx-gline);background:#1f2533;color:var(--text);font-size:12px;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#tab-calc .cx-cc .cx-chip{border:0;background:none}
#tab-calc .cx-chip.dash{border:1px dashed var(--line2);background:transparent;color:var(--muted)}
#tab-calc .cx-chip:hover{border-color:var(--gold)}
#tab-calc .cx-forge{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px}
#tab-calc .cx-forge select{height:28px;font-size:12px}
#tab-calc .cx-fx>summary{cursor:pointer;font-size:11px;color:var(--muted);list-style:none;display:flex;align-items:baseline;gap:4px;min-width:0}
#tab-calc .cx-fx>summary::-webkit-details-marker{display:none}
#tab-calc .cx-fx>summary::before{content:'';flex:0 0 auto}
#tab-calc .cx-fxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#tab-calc .cx-fx[open]>summary .cx-fxt{white-space:normal}
#tab-calc .cx-src{font-size:10px;padding:2px 6px;margin-right:4px;flex:0 0 auto;color:#fff}
#tab-calc .cx-src-ep8{background:#2b5a33}
#tab-calc .cx-src-rathena{background:#4a5c8a}
#tab-calc .cx-src-combo{background:#6a4a8a}
#tab-calc .cx-repb{font-size:12px;padding:6px 0 2px 8px}
#tab-calc .cx-rit{margin-bottom:6px}
#tab-calc .cx-ref{justify-self:end}
#tab-calc .cx-refsel{width:62px;height:28px;padding:0 4px;text-align:center;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
#tab-calc #cx-eqmsg{font-size:12px}
#tab-calc #cx-eqmsg:empty{display:none}

/* buffs and items */
#tab-calc .cx-bbody{min-width:0}
#tab-calc .cx-chips2{display:flex;flex-wrap:wrap;gap:8px}
#tab-calc .cx-chip2{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 4px 0 0;border-radius:8px;border:1px solid var(--line2);background:#1a2230;max-width:100%}
#tab-calc .cx-chip2.on{border-color:var(--gold);background:var(--cx-gbg)}
#tab-calc .cx-cbt{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 6px 0 12px;background:none;border:0;color:var(--text);font-size:13px;cursor:pointer;border-radius:8px}
#tab-calc .cx-cbt .lv{font-size:11px;font-weight:700;color:var(--muted)}
#tab-calc .cx-chip2.on .cx-cbt .lv{color:var(--gold)}
#tab-calc .cx-chip2.sel{padding:0 6px 0 12px;gap:8px;font-size:13px}
#tab-calc .cx-chip2.sel select,#tab-calc .cx-chip2 select{height:28px;font-size:12px}
#tab-calc .cx-step{display:inline-flex;gap:2px}
#tab-calc .cx-step button{width:24px;height:24px;padding:0;border-radius:5px;border:1px solid var(--line2);background:var(--bg);color:var(--text);cursor:pointer;line-height:1}
#tab-calc .cx-step button:hover{border-color:var(--gold)}
#tab-calc .cx-hintl{margin:10px 0 6px;font-size:12px;color:var(--muted)}
#tab-calc .cx-hintl:first-child{margin-top:0}
#tab-calc .cx-songc{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin-bottom:12px}

/* combat simulator */
#tab-calc .cx-erow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 10px;margin-top:2px}
#tab-calc .cx-ewrap{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:3px;font-size:11px}
#tab-calc .cx-ebtns{display:flex;gap:6px;align-items:center}
#tab-calc .cx-erow>.cx-pill{height:38px}
#tab-calc .cx-erow>.cx-chk{height:38px}
#tab-calc .cx-eblock{margin-top:12px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px}
#tab-calc .cx-eh{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px}
#tab-calc .cx-en{font-size:16px;font-weight:700;color:var(--text);margin-right:6px}
#tab-calc .cx-eh .badge{font-size:11px;padding:4px 8px}
#tab-calc .cx-eg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:14px}
#tab-calc .cx-eg .cx-kv{font-size:12px;padding:4px 0;border-bottom-color:var(--cx-row2)}
#tab-calc .cx-spw{margin-top:8px;font-size:12px;line-height:1.7}
#tab-calc .cx-dd{border:1px solid var(--gold);border-radius:8px;background:var(--bg);margin:4px 0 6px;overflow:hidden}
#tab-calc .cx-ddh{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;padding:6px;border-bottom:1px solid var(--line)}
#tab-calc .cx-ddh input[type=search]{flex:1 1 160px;width:auto}
#tab-calc .cx-ddl{max-height:320px;overflow-y:auto}
#tab-calc .cx-opt{padding:6px 10px;border-bottom:1px solid var(--line);cursor:pointer;font-size:14px}
#tab-calc .cx-opt.act,#tab-calc .cx-opt:hover{background:var(--panel2)}
#tab-calc .cx-opt.off{opacity:.55}
#tab-calc .cx-why{background:#5a2a24;color:#fff}
#tab-calc .cx-more{padding:6px 10px;font-size:12px}
#tab-calc .cx-metric{float:right;font-size:12px;color:var(--gold)}

/* your attack, enemy attacks you */
#tab-calc .cx-lvsel{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;font-size:12px}
#tab-calc .cx-lvsel select{height:30px}
#tab-calc .cx-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
#tab-calc .cx-tiles.four{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:0}
#tab-calc .cx-tile{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px;text-align:center;min-width:0}
#tab-calc .cx-tile>div{font-size:11px;color:var(--muted)}
#tab-calc .cx-tile>b{display:block;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#tab-calc .cx-tile.avg{background:var(--cx-gbg);border-color:var(--gold)}
#tab-calc .cx-tile.avg>b{font-size:26px;font-weight:800;color:var(--gold)}
#tab-calc .cx-tile.sm{padding:8px}
#tab-calc .cx-tile.sm>b{font-size:18px}
#tab-calc .cx-sbnote{margin-top:10px;background:var(--cx-gbg);border:1px solid var(--cx-gline);border-radius:8px;padding:8px 10px;font-size:12px}
#tab-calc .cx-sbnote b{color:var(--gold)}
#tab-calc .cx-bdd{margin-top:10px}
#tab-calc .cx-bdd>summary{cursor:pointer;font-size:12px;color:var(--muted)}
#tab-calc .cx-bdl{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:4px 16px;margin-top:6px}
#tab-calc .cx-bdl>div{display:flex;flex-direction:column;font-size:12px}
#tab-calc .cx-bdl b{font-weight:400}
#tab-calc .cx-bdx{margin-top:6px;font-size:12px}
#tab-calc .cx-line1{margin-top:8px;font-size:12px}
#tab-calc .cx-att{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px}
#tab-calc .cx-att input{width:60px;height:30px}
#tab-calc .cx-tiles.five{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:0}
#tab-calc .cx-tile small{display:block;font-size:11px;color:var(--muted);font-weight:400}
#tab-calc .cx-selrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-bottom:10px}
#tab-calc .cx-selrow .cx-lvsel{margin-bottom:0;min-width:0;max-width:100%}
#tab-calc .cx-selrow select{max-width:100%;min-width:0}
#tab-calc .cx-hits{gap:6px}
#tab-calc .cx-hin{width:58px;height:30px}
#tab-calc .cx-hits.sm{margin:0 0 0 8px;font-size:11px}
#tab-calc .cx-hits.sm .cx-hin{width:50px;height:24px}
#tab-calc .cx-pers{margin-top:10px;background:var(--cx-gbg);border:1px solid var(--cx-gline);border-radius:8px;padding:8px 10px;text-align:center}
#tab-calc .cx-pers>b{display:block;font-size:22px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
#tab-calc .cx-pers .cx-dim{font-size:12px}
#tab-calc .cx-est{font-style:italic}

/* all attacks */
#tab-calc .cx-tw{overflow-x:auto}
#tab-calc table{width:100%;min-width:420px;border-collapse:collapse;font-size:13px}
#tab-calc th{position:static;cursor:default;white-space:nowrap;text-align:right;color:var(--muted);font-size:12px;font-weight:600;padding:5px 6px}
#tab-calc th:first-child,#tab-calc td:first-child{text-align:left}
#tab-calc td{padding:6px;text-align:right;border-top:1px solid var(--cx-row);font-variant-numeric:tabular-nums}
#tab-calc tr.cx-r{cursor:pointer}
#tab-calc tr.cx-r:hover,#tab-calc tr.cx-r.sel{background:var(--panel2)}
#tab-calc .cx-best .cx-dps{color:var(--gold);font-weight:700}
#tab-calc table.cx-ia{min-width:0}
#tab-calc .cx-ia td{vertical-align:top}
#tab-calc .cx-ia td:first-child{white-space:normal;overflow-wrap:anywhere}
#tab-calc .cx-ia .cx-sub{display:block;margin-top:2px;color:var(--muted);font-size:11px;font-weight:400;white-space:normal}
#tab-calc .cx-ia td.cx-eff{text-align:left;color:var(--muted);font-size:12px;white-space:normal}
#tab-calc .cx-ia tr.cx-r:not([data-incrow]){cursor:default}
#tab-calc .cx-ia tr.cx-r:not([data-incrow]):hover{background:none}
#tab-calc .cx-star{background:none;border:0;padding:0 6px 0 0;cursor:pointer;color:var(--muted);font-size:15px;line-height:1}
#tab-calc .cx-star.on,#tab-calc .cx-star:hover{color:var(--gold)}
#tab-calc .cx-foot{font-size:12px;margin-top:8px}
#tab-calc .cx-tsum{margin-top:8px;font-size:13px}

/* pet row, extra bonuses */
#tab-calc .cx-egg{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#tab-calc .cx-manbox>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
#tab-calc .cx-manbox>summary::-webkit-details-marker{display:none}
#tab-calc .cx-manbox>summary::after{content:'+';margin-left:auto;color:var(--muted);font-size:16px;line-height:1}
#tab-calc .cx-manbox[open]>summary::after{content:'\2212'}
#tab-calc .cx-manbox[open]>summary{margin-bottom:10px}
#tab-calc .cx-man-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
#tab-calc .cx-man-add{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
#tab-calc .cx-man-add select{height:30px;font-size:12px;flex:1 1 130px}
#tab-calc .cx-man-add input[type=number]{width:72px;height:30px}

/* rules */
#tab-calc .cx-rulesbox>summary{cursor:pointer;list-style:none}
#tab-calc .cx-rulesbox>summary::-webkit-details-marker{display:none}
#tab-calc .cx-rules{padding-top:6px}
#tab-calc .cx-rules ul{margin:0;padding-left:20px;line-height:1.55;font-size:13px}

/* narrow screens */
@media (max-width:719px){
  #tab-calc{padding:10px 10px 60px}
  #tab-calc .cx-hint{margin-left:0;flex:1 1 100%}
  #tab-calc .cx-card{padding:12px}
  #tab-calc .cx-eq{grid-template-columns:78px minmax(0,1fr) 58px;gap:6px}
  #tab-calc .cx-eg{grid-template-columns:repeat(2,minmax(0,1fr))}
  #tab-calc .cx-tiles.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  #tab-calc .cx-tiles.five{grid-template-columns:repeat(3,minmax(0,1fr))}
  #tab-calc .cx-sg{column-gap:12px}
  #tab-calc .cx-presets{margin-left:0;flex:1 1 100%}
  #tab-calc .cx-ph{width:100%}
  #tab-calc .cx-ph select{flex:1 1 auto;max-width:none}
  #tab-calc .cx-tile>b{font-size:19px}
  #tab-calc .cx-tile.avg>b{font-size:22px}
  #tab-calc .cx-sklist{max-height:360px}
  /* the site turns tables into cards on phones; the attacks table stays a table */
  #tab-calc thead{display:table-header-group}
  #tab-calc tbody tr{display:table-row;padding:0;border-bottom:0}
  #tab-calc tbody td{display:table-cell;padding:6px;border-bottom:0;font-size:inherit}
  #tab-calc tbody td:first-child{display:table-cell;font-size:inherit;padding-bottom:6px}
  #tab-calc tbody td:empty{display:table-cell}
}