/* Trait Planner app — sits inside the Syndicate site shell */
.pl-nav{position:sticky;top:calc(66px + env(safe-area-inset-top, 0px));z-index:40;background:color-mix(in srgb,var(--bg) 92%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.pl-nav .wrap{display:flex;align-items:center;gap:4px;min-height:54px;overflow-x:auto}
.pl-nav button{display:flex;align-items:center;gap:8px;padding:8px 12px;font-family:var(--f-display);font-weight:600;font-size:16px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent}
.pl-nav button svg{width:19px;height:19px}
.pl-nav button[aria-current="page"]{color:var(--fg);border-bottom-color:var(--red)}
.pl-nav .pl-mode{margin-left:auto;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--muted);border:1px solid var(--line);padding:6px 10px;display:flex;align-items:center;gap:8px;text-transform:uppercase}
.pl-nav .pl-mode i{width:8px;height:8px;border-radius:50%;background:var(--mc,var(--sv))}
.pl-bar{display:none}
.planner{padding-block:26px 60px}
.pview{display:flex;flex-direction:column;gap:18px;min-width:0}
.pview-head{display:flex;flex-direction:column;gap:8px}
.pview-head h2{font-size:clamp(30px,4.4vw,46px)}
.pnote{font-size:13.5px;color:var(--dim)}

.seg-row{display:flex;flex-wrap:wrap;gap:10px}
.seg{display:flex;border:1px solid var(--line);background:var(--panel)}
.seg button{display:flex;flex-direction:column;justify-content:center;gap:1px;padding:10px 18px;min-height:56px;min-width:0;color:var(--muted);border-right:1px solid var(--line)}
.seg button:last-child{border-right:0}
.seg button b{font-family:var(--f-display);font-weight:700;font-size:22px;letter-spacing:.08em;text-transform:uppercase;line-height:1}
.seg button span{font-size:12.5px}
.seg button[aria-checked="true"]{color:var(--fg);background:var(--cell);box-shadow:inset 0 -3px 0 var(--mc,var(--red))}
.seg.big{flex:1 1 340px}
.seg.big button{flex:1}
.seg.small button b{font-size:18px}

.plan-sum{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
.plan-sum h3{font-size:24px}
.plan-sum .trees{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;color:var(--muted)}
.plan-sum .trees i{font-style:normal;color:var(--t)}
.plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tree-card{border:1px solid color-mix(in srgb,var(--t) 35%,var(--line));background:linear-gradient(to top,color-mix(in srgb,var(--t) 9%,transparent),transparent 70%),var(--panel);display:flex;flex-direction:column;min-width:0}
.tc-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid color-mix(in srgb,var(--t) 25%,var(--line));flex-wrap:wrap}
.tc-head b{font-family:var(--f-display);font-weight:700;font-size:24px;letter-spacing:.12em;text-transform:uppercase;color:var(--t);line-height:1}
.tc-head span{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.mrow{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;width:100%}
.mrow:last-child{border-bottom:0}
.mrow:hover{background:color-mix(in srgb,var(--t) 6%,transparent)}
.mhex{position:relative;width:48px;height:42px;clip-path:var(--hexclip);background:var(--t);display:grid;place-items:center}
.mhex::before{content:"";position:absolute;inset:2px;clip-path:var(--hexclip);background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--t) 55%,#0b0c0b),color-mix(in srgb,var(--t) 20%,#0b0c0b))}
.mhex span{position:relative;font-family:var(--f-display);font-weight:700;font-size:17px;color:#fff7e2;letter-spacing:.03em}
.mtext{display:flex;flex-direction:column;gap:2px;min-width:0}
.mtext .r{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
.mtext .n{font-family:var(--f-display);font-weight:600;font-size:19px;letter-spacing:.04em;text-transform:uppercase;line-height:1.1}
.mtext .w{font-size:14px;color:var(--muted);line-height:1.4}
.mtext .alt{font-size:13px;color:var(--dim)}
.mtext .alt b{color:var(--muted);font-weight:600}
.pcard{border:1px solid var(--line);background:var(--panel);padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.pcard h4,.plabel{font-family:var(--f-mono);font-weight:400;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.steps li{display:grid;grid-template-columns:86px 1fr;gap:12px;align-items:baseline;padding-left:10px;border-left:3px solid var(--t)}
.steps .pts{font-family:var(--f-mono);font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.steps .what b{font-family:var(--f-display);font-weight:600;font-size:17px;letter-spacing:.03em}
.steps .what span{color:var(--muted);font-size:14px}
.chains{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.chain{border:1px solid var(--line);border-top:2px solid var(--stack);background:var(--panel);padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.chain h4{font-family:var(--f-display);font-weight:700;font-size:19px;letter-spacing:.05em;text-transform:uppercase}
.chain p{font-size:14px;color:var(--muted)}
.ranked{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px}
.ranked li{min-width:0}
.rk{width:100%;display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);background:var(--cell);text-align:left}
.rk:hover{border-color:var(--muted)}
.rk .n0{font-family:var(--f-mono);font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.rk .nm{font-family:var(--f-display);font-weight:600;font-size:17px;letter-spacing:.03em;text-transform:uppercase;line-height:1.1;min-width:0}
.rk .nm small,.cand .c-n small{display:block;font-family:var(--f-body);font-weight:400;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--muted);line-height:1.3;margin-top:2px}

.tier{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border:1px solid currentColor;white-space:nowrap}
.t-s{color:var(--good)}.t-a{color:var(--sc)}.t-b{color:var(--fg)}.t-c{color:var(--muted)}.t-d{color:var(--dim)}
.flag{font-family:var(--f-mono);font-style:normal;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:1px 5px;border:1px solid currentColor;white-space:nowrap}
.fl-stealth{color:var(--stealth)}.fl-stack{color:var(--stack)}

.tree-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);background:var(--panel)}
.tree-tabs button{min-height:52px;padding:8px 4px;font-family:var(--f-display);font-weight:700;font-size:17px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border-right:1px solid var(--line);text-align:center}
.tree-tabs button:last-child{border-right:0}
.tree-tabs button[aria-pressed="true"]{color:var(--t);background:var(--cell);box-shadow:inset 0 -3px 0 var(--t)}
.tree-tabs small{display:block;font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.06em;color:var(--dim)}
.pk-plan{font-size:14.5px;color:var(--muted);border-left:3px solid var(--t);padding:6px 0 6px 12px}
.pk-plan b{color:var(--fg);font-weight:600}
.result{border:1px solid color-mix(in srgb,var(--good) 45%,var(--line));background:linear-gradient(to bottom,color-mix(in srgb,var(--good) 8%,transparent),transparent 60%),var(--panel);padding:16px;display:flex;flex-direction:column;gap:12px}
.result .take{font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;color:var(--good);text-transform:uppercase}
.result .who{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.result .who b{font-family:var(--f-display);font-weight:700;font-size:32px;letter-spacing:.05em;text-transform:uppercase;line-height:1}
.reasons{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;font-size:14.5px}
.reasons li{padding-left:14px;position:relative}
.reasons li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;background:var(--good)}
.reasons li.bad::before{background:var(--red)}
.reasons li.plus::before{background:var(--stack)}
.others{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.other{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px}
.other .o-n{font-family:var(--f-display);font-weight:600;font-size:17px;letter-spacing:.03em;text-transform:uppercase}
.other .o-w{font-size:13px;color:var(--muted);flex-basis:100%}
.linkbtn{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:6px 0}
.cand-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:4px}
.cands{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:6px}
.cand{width:100%;min-height:52px;display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);background:var(--panel);text-align:left}
.cand:hover{border-color:var(--muted)}
.cand .box{width:20px;height:20px;border:1.5px solid var(--dim);display:grid;place-items:center}
.cand[aria-pressed="true"]{border-color:var(--good);background:color-mix(in srgb,var(--good) 8%,var(--panel))}
.cand[aria-pressed="true"] .box{border-color:var(--good);background:var(--good)}
.cand[aria-pressed="true"] .box::after{content:"";width:9px;height:5px;border-left:2px solid #0e100e;border-bottom:2px solid #0e100e;transform:rotate(-45deg) translate(1px,-1px)}
.cand .c-n{font-family:var(--f-display);font-weight:600;font-size:16.5px;letter-spacing:.03em;text-transform:uppercase;line-height:1.1;min-width:0}
.cand.have{opacity:.5}
details.more summary{cursor:pointer;font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:12px 0;list-style:none}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"+ "}
details.more[open] summary::before{content:"\2212  "}

.op-top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.fld{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1 1 200px}
.fld label{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.fld input,.fld select{min-height:46px;padding:8px 12px;border:1px solid var(--line);background:var(--cell);font-size:16px;width:100%}
.op-total .big{font-family:var(--f-display);font-weight:700;font-size:42px;line-height:1;font-variant-numeric:tabular-nums}
.op-total .big span{font-size:20px;color:var(--muted)}
.pbar{display:grid;grid-template-columns:repeat(18,1fr);gap:3px}
.pbar i{height:10px;background:var(--line)}
.op-trees{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.op-tree{border:1px solid color-mix(in srgb,var(--t) 35%,var(--line));background:var(--panel);display:flex;flex-direction:column;min-width:0}
.tbar{display:grid;grid-template-columns:repeat(9,1fr);gap:3px;padding:0 14px 10px}
.tbar i{height:6px;background:var(--line)}
.tbar i.on{background:var(--t)}
.op-sec{padding:10px 14px;display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line)}
.majpick{display:grid;grid-template-columns:28px 1fr 1fr;gap:6px;align-items:stretch}
.majpick .rr{font-family:var(--f-mono);font-size:11px;color:var(--dim);align-self:center}
.majpick button{min-height:42px;padding:6px 8px;border:1px solid var(--line);background:var(--cell);font-family:var(--f-display);font-weight:600;font-size:14px;letter-spacing:.03em;text-transform:uppercase;line-height:1.1;text-align:center;color:var(--muted)}
.majpick button[aria-pressed="true"]{color:#fff7e2;border-color:var(--t);background:color-mix(in srgb,var(--t) 35%,var(--cell))}
.minlist{display:flex;flex-wrap:wrap;gap:6px}
.minlist .chip .x{width:22px;height:22px;display:grid;place-items:center;color:var(--muted);font-family:var(--f-mono)}
.confirm{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--red) 50%,var(--line))}

.ptabs{display:none;gap:4px;border-bottom:1px solid var(--line)}
.ptabs button{flex:1;min-width:0;min-height:44px;font-family:var(--f-display);font-weight:600;font-size:14.5px;letter-spacing:.02em;text-transform:uppercase;padding:8px 2px;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.ptabs button[aria-selected="true"]{color:var(--t);border-bottom-color:var(--t)}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.lg-hex{width:18px;height:16px;clip-path:var(--hexclip);background:var(--sc)}
.lg-hex.small{width:14px;height:12px;background:transparent;border:2px solid var(--sc)}
.lg-q{width:16px;height:16px;display:grid;place-items:center;border:1px solid var(--dim);font-family:var(--f-mono);font-size:11px;color:var(--dim)}
.board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.85fr);gap:12px}
.tree{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-width:0;border:1px solid color-mix(in srgb,var(--t) 20%,var(--line));border-radius:24px 24px 4px 4px;background:linear-gradient(to top,color-mix(in srgb,var(--t) 9%,transparent),transparent 72%),var(--panel);padding:16px 6px 0;transition:opacity .2s}
.tree.in-build{border-color:color-mix(in srgb,var(--t) 60%,var(--line));background:linear-gradient(to top,color-mix(in srgb,var(--t) 20%,transparent),color-mix(in srgb,var(--t) 5%,transparent) 80%),var(--panel)}
.tree.out-build{opacity:.45}
.rows{position:relative;display:flex;flex-direction:column;gap:6px;padding-bottom:14px}
.rows::before{content:"";position:absolute;left:50%;top:30px;bottom:30px;width:2px;transform:translateX(-50%);background:var(--line)}
.tree.in-build .rows::before{background:var(--t);box-shadow:0 0 10px color-mix(in srgb,var(--t) 60%,transparent)}
.trow{position:relative;display:flex;justify-content:center}
.trow.major-row{padding-block:8px}
.rn{position:absolute;left:6px;top:50%;transform:translateY(-50%);font-family:var(--f-mono);font-size:11px;color:var(--dim);z-index:2;pointer-events:none}
.major-row .rn{top:36px}
.nodes{position:relative;z-index:1;display:flex;justify-content:center;align-items:flex-start}
.major-row .nodes{gap:24px}
.minor-row .nodes{gap:14px}
.node{display:flex;flex-direction:column;align-items:center;gap:6px;transition:opacity .2s}
.hx{display:block;transition:filter .2s}
/* Trait frames: Warfighter hex, Scout circle, Survivalist square, like the game. --t is the tree colour. */
.fr{position:relative;display:grid;place-items:center;width:40px;height:40px;background:color-mix(in srgb,var(--t) 42%,var(--line));flex:none}
.fr::before{content:"";position:absolute;inset:2px;background:var(--cell)}
.fr-hex,.fr-hex::before{clip-path:var(--hexclip)}
.fr-hex{width:44px;height:38px}
.fr-circle,.fr-circle::before{border-radius:50%}
.fr-square,.fr-square::before{border-radius:3px}
.fr .g{position:relative;z-index:1;width:72%;height:72%;object-fit:contain;opacity:.85;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}
.fr .hxl{position:relative;z-index:1;font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:.04em;color:color-mix(in srgb,var(--t) 70%,var(--fg))}
.fr.sm{width:30px;height:30px}
.fr.sm.fr-hex{width:32px;height:28px}
.fr.sm .hxl{font-size:12px}
.fr.lg{width:54px;height:54px}
.fr.lg.fr-hex{width:58px;height:50px}
.fr.empty .hxl{color:var(--dim)}
.node.major .fr{width:60px;height:60px}
.node.major .fr-hex{width:66px;height:58px}
.node.major .fr .hxl{font-size:21px}
.node.minor .fr .hxl{font-family:var(--f-mono);font-weight:400;font-size:15px;color:var(--dim)}
.node.hidden .fr{background:var(--line)}
.node.hidden .fr .hxl{color:var(--dim)}
.node.open .fr{background:color-mix(in srgb,var(--t) 55%,var(--line))}
.node.open .fr .hxl{color:var(--t);font-size:20px}
.node.opt .fr .g{opacity:.75}
.nm2{font-family:var(--f-display);font-weight:600;font-size:13.5px;line-height:1.1;letter-spacing:.04em;text-transform:uppercase;text-align:center;width:96px;text-wrap:balance}
.node.minor .nm2{width:84px;font-size:11px;color:var(--muted)}
.node.minor.picked .nm2{color:var(--fg)}
.minor-row .nodes{gap:8px;align-items:flex-start}
.trow.hidden-row{opacity:.55}
.flags{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}
.node:hover .fr,.node.sel .fr{background:var(--fg)}
.node.picked .hx{filter:drop-shadow(0 0 9px color-mix(in srgb,var(--t) 75%,transparent))}
.node.picked .fr{background:var(--t)}
.node.picked .fr::before{background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--t) 70%,#0b0c0b),color-mix(in srgb,var(--t) 28%,#0b0c0b))}
.node.picked .fr .g{opacity:1}
.node.picked .hxl{color:#fff7e2}
.node.passed{opacity:.35}
.tfoot{border-top:1px solid color-mix(in srgb,var(--t) 25%,var(--line));padding:10px 6px 12px;text-align:center;display:flex;flex-direction:column;gap:2px}
.tname{font-family:var(--f-display);font-weight:700;font-size:23px;letter-spacing:.12em;text-transform:uppercase;color:var(--t);line-height:1}
.tsub{font-size:13px;color:var(--muted)}
.pr-body{display:flex;flex-direction:column;gap:14px;padding:4px 6px 16px}
.slots{display:flex;justify-content:center;gap:12px}
.shield{position:relative;display:grid;place-items:center;width:48px;height:56px;clip-path:var(--shieldclip);background:color-mix(in srgb,var(--pr) 45%,var(--line))}
.shield::before{content:"";position:absolute;inset:2px;clip-path:var(--shieldclip);background:var(--cell)}
.shield .hxl{font-size:18px;color:var(--pr);margin-top:-8px}
.shield .g{position:relative;z-index:1;width:60%;margin-top:-6px}
.node.prest .nm2{width:60px;font-size:12px}
.pr-note{font-size:13.5px;color:var(--muted);text-align:center}
.pro-group{display:flex;flex-direction:column;gap:6px}
.pg-name{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--t)}
.pro-group .chip{font-size:13px;padding:4px 8px;min-height:30px}

.db{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:8px}
.db li{min-width:0}
.db-item{width:100%;height:100%;display:flex;flex-direction:column;gap:5px;padding:10px 12px;border:1px solid var(--line);border-left:3px solid var(--t,var(--dim));background:var(--panel);text-align:left}
.db-item:hover{border-color:var(--muted);border-left-color:var(--t,var(--dim))}
.db-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.db-name{font-family:var(--f-display);font-weight:600;font-size:17px;letter-spacing:.04em;text-transform:uppercase;line-height:1.15}
.db-kind{font-family:var(--f-mono);font-size:10.5px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.db-fx{font-size:14px;color:var(--muted);line-height:1.4}
.db-tags{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.cnt{font-family:var(--f-mono);font-size:12px;color:var(--dim);align-self:center}

.sheet{position:fixed;right:max(24px, env(safe-area-inset-right, 0px));bottom:calc(24px + env(safe-area-inset-bottom, 0px));width:min(440px, calc(100vw - 48px));max-height:min(78vh,640px);overflow:auto;z-index:65;background:color-mix(in srgb,var(--panel) 97%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--line-2);border-left:3px solid var(--t,var(--red));padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.7);display:flex;flex-direction:column;gap:10px}
.sh-x{position:absolute;top:10px;right:10px;width:40px;height:40px;display:grid;place-items:center;font-family:var(--f-mono);font-size:20px;color:var(--muted);border:1px solid var(--line)}
.sh-meta{padding-right:46px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--t,var(--muted))}
.sh-name{padding-right:46px;font-family:var(--f-display);font-weight:700;font-size:26px;letter-spacing:.06em;text-transform:uppercase;line-height:1.05;margin:0}
.sh-fx{font-style:italic;font-size:16px}
.sh-body{display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.sh-pro{border-left:2px solid var(--pr);padding-left:10px}
.sh-pro b{font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--pr);margin-right:6px}
.sh-note{color:var(--muted)}
.ratings{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--f-mono);font-size:12px;color:var(--muted);align-items:center}

@media (max-width:960px){
  .pl-nav{display:none}
  .pl-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;background:color-mix(in srgb,var(--panel) 96%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom, 0px);padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
  .pl-bar button{flex:1;min-width:0;min-height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--dim);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
  .pl-bar button svg{width:22px;height:22px}
  .pl-bar button[aria-current="page"]{color:var(--red-ink);box-shadow:inset 0 2px 0 var(--red)}
  body.has-plbar{padding-bottom:calc(70px + env(safe-area-inset-bottom, 0px))}
  .plan-grid,.chains,.ranked,.op-trees{grid-template-columns:minmax(0,1fr)}
  .ptabs{display:flex}
  .board{grid-template-columns:minmax(0,1fr)}
  .tree{display:none}
  .tree.on{display:flex}
  .tree.out-build{opacity:1}
  .node.major .fr{width:70px;height:70px}
  .node.major .fr-hex{width:76px;height:66px}
  .node.minor .fr{width:46px;height:46px}
  .node.minor .fr-hex{width:50px;height:44px}
  .nm2{width:116px;font-size:15px}
  .major-row .nodes{gap:36px}
  .sheet{left:var(--gutter-l);right:var(--gutter-r);width:auto;bottom:calc(72px + env(safe-area-inset-bottom, 0px));max-height:min(70vh,600px)}
  body.has-plbar .toast{bottom:calc(80px + env(safe-area-inset-bottom, 0px))}
}
@media (max-width:420px){
  .seg button{padding:8px 10px}
  .steps li{grid-template-columns:70px 1fr}
  .major-row .nodes{gap:22px}
  .nm2{width:104px}
}

/* ---------- My Build (operator tracker) ---------- */
.apply-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;border:1px solid color-mix(in srgb,var(--red) 45%,var(--line));background:linear-gradient(110deg,color-mix(in srgb,var(--red) 14%,var(--panel)),var(--panel) 70%);padding:14px 16px}
.apply-bar > div{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 260px}
.apply-bar span{font-size:14px;color:var(--muted)}
.dogtag{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);gap:14px;border:1px solid var(--line);background:var(--panel);padding:14px 16px}
.dogtag > div{display:flex;flex-direction:column;gap:4px;min-width:0}
.dt-rank b,.dt-plan b{font-family:var(--f-display);font-weight:700;font-size:28px;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.dt-rank b{color:var(--red-ink)}
.dt-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.dt-legend span{display:inline-flex;align-items:center;gap:6px}
.dt-legend i{width:9px;height:9px;background:var(--t)}
.next-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;border-left:3px solid var(--t,var(--red));background:var(--panel);border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 14px;font-size:15px}
.next-bar > span:nth-child(2){flex:1 1 240px}
.node.planned .fr{background:repeating-linear-gradient(45deg,var(--t) 0 4px,transparent 4px 8px)}
.node.planned .hxl{color:var(--t)}
.flag.fl-plan{color:var(--t);border-style:dashed}
.node.next .fr{background:var(--t);animation:pulse 1.6s ease-in-out infinite}
.node.next .fr .g{opacity:1}
.node.next .hxl{color:var(--t)}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.6)}}
.trow.is-next::after{content:"";position:absolute;inset:2px 4px;border:1px dashed color-mix(in srgb,var(--t) 55%,transparent);pointer-events:none}
.minor-row{flex-direction:column;align-items:center}
.row-name{position:relative;z-index:1;margin-top:3px;font-family:var(--f-display);font-weight:600;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--fg);background:var(--panel);padding:0 6px}
.row-name.next-lbl{color:var(--t);font-family:var(--f-mono);font-weight:400;font-size:10.5px;letter-spacing:.1em}
.prest-count{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stepper{display:inline-flex;align-items:stretch;border:1px solid var(--line);background:var(--cell)}
.stepper button{width:40px;min-height:40px;display:grid;place-items:center;font-family:var(--f-mono);font-size:18px;color:var(--fg)}
.stepper button:hover{background:var(--line)}
.stepper b,.stepper input{min-width:44px;display:grid;place-items:center;font-family:var(--f-display);font-weight:700;font-size:20px;text-align:center;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);background:transparent;padding:0 6px}
.stepper input{width:64px;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper.sm button{width:32px;min-height:32px;font-size:16px}
.stepper.sm input,.stepper.sm b{width:50px;min-width:40px;font-size:16px}
.choose-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:46vh;overflow:auto}
.choose{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border:1px solid var(--line);background:var(--cell);text-align:left}
.choose:hover{border-color:var(--muted)}
.choose.cur{border-color:var(--t,var(--red));background:color-mix(in srgb,var(--t,var(--red)) 12%,var(--cell))}
.choose:disabled{opacity:.45;cursor:not-allowed}
.choose b{font-family:var(--f-display);font-weight:600;font-size:16px;letter-spacing:.03em;text-transform:uppercase}
.choose small{display:block;font-size:12.5px;color:var(--muted);line-height:1.3}
.shared{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--sc);background:color-mix(in srgb,var(--sc) 10%,var(--panel));padding:12px 16px}
.shared > div:first-child{display:flex;flex-direction:column;gap:2px}
.shared b{font-family:var(--f-display);font-weight:700;font-size:24px;text-transform:uppercase;letter-spacing:.05em}
.chip.got{border-color:var(--good);color:var(--good)}
.btn:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:960px){
  .dogtag{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Row sheet: enter what a row shows, then pick ---------- */
.slots-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.slot{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;border:1px dashed var(--line-2);background:var(--cell);font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);text-align:center;position:relative;min-height:74px;justify-content:center}
.slot.on{border-style:solid;border-color:var(--t);color:var(--fg)}
.slot i{position:absolute;top:2px;right:6px;font-style:normal;font-family:var(--f-mono);color:var(--dim)}
.slot .fr{--t:var(--t)}
.pool{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:38vh;overflow:auto;border-top:1px solid var(--line);padding-top:6px}
.pool-it{width:100%;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:6px 8px;border:1px solid var(--line);background:var(--cell);text-align:left}
.pool-it:hover{border-color:var(--muted)}
.pool-it.on{border-color:var(--good);background:color-mix(in srgb,var(--good) 10%,var(--cell))}
.pool-it.held{opacity:.5}
.pool-it .pn{font-family:var(--f-display);font-weight:600;font-size:15px;letter-spacing:.03em;text-transform:uppercase;line-height:1.1;min-width:0}
.pool-it .pn small{display:block;font-family:var(--f-body);font-weight:400;font-size:12px;letter-spacing:0;text-transform:none;color:var(--muted);line-height:1.3;margin-top:2px}
.custom-add{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:8px}
.custom-add .btn-row{flex-wrap:nowrap}
.custom-add input{flex:1;min-width:0}
.opt-card{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);background:var(--cell);padding:12px}
.opt-card.best{border-color:color-mix(in srgb,var(--good) 55%,var(--line));background:linear-gradient(to bottom,color-mix(in srgb,var(--good) 9%,transparent),transparent 60%),var(--cell)}
.opt-card.cur{border-color:var(--t)}
.oc-head{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.oc-head .fr{width:44px;height:44px}
.oc-head .fr-hex{width:48px;height:42px}
.oc-head > div{display:flex;flex-direction:column;gap:1px;min-width:0}
.oc-head .take{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;color:var(--good);text-transform:uppercase}
.opt-card.cur .take{color:var(--t)}
.oc-head b{font-family:var(--f-display);font-weight:700;font-size:21px;letter-spacing:.04em;text-transform:uppercase;line-height:1}
.oc-fx{font-style:italic;font-size:13.5px;color:var(--muted)}
.opt-card .reasons{font-size:13.5px}
.opt-card .btn{align-self:flex-start}
/* ---------- Plan extras ---------- */
.rules{border:1px solid var(--line);border-left:3px solid var(--sc);background:var(--panel);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.rules ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:14.5px}
.ex-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ex-card{gap:10px}
.ex-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.ex-head > div{display:flex;flex-direction:column;gap:2px}
.ex-head b{font-family:var(--f-display);font-weight:700;font-size:24px;letter-spacing:.05em;text-transform:uppercase;line-height:1}
.ex-pts{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.ex-pts i{font-style:normal;color:var(--t)}
.ex-tree{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--line);padding-top:8px}
.tchip{display:inline-flex;align-items:center;gap:6px;padding-left:4px}
.tchip .fr{width:26px;height:26px}
.tchip .fr-hex{width:28px;height:24px}
.tchip.maj{border-color:var(--t)}
.rk .fr{margin-right:4px}
.rk{grid-template-columns:22px auto 1fr auto}
.mrow{grid-template-columns:auto 1fr}
.fl-unk{color:var(--muted);border-style:dashed}
.db-top .fr{flex:none}
.db-top{justify-content:flex-start}
.db-top .db-kind{margin-left:auto}
@media (max-width:960px){
  .ex-grid{grid-template-columns:minmax(0,1fr)}
  .slots-row{grid-template-columns:repeat(3,minmax(0,1fr))}
}