.haven-planner{--bg:#181b23; --panel:#20242f; --sunk:#1b1f29; --line:#363c4e; --fg:#ebe5d4; --muted:#a3a8b6;
  --gold:#e3a83e; --gold-soft:#3a3020; --good:#7fcf8a; --warn:#f0b35a; --warn-soft:#3b2e18; --bad:#ef8a7e;
  --r-common:#b3a690; --r-rare:#6cc066; --r-special:#6aa4f0; --r-unique:#f0914a;
  --e-fire:#f07a50; --e-frost:#7cc0ea; --e-lightning:#f0d050; --e-poison:#8ad060; --e-soul:#9aa8f0; --e-blast:#e3a83e; --display:var(--wp--preset--font-family--pixelify-sans,"Pixelify Sans","Trebuchet MS",sans-serif); --body:var(--wp--preset--font-family--rubik,Rubik,system-ui,sans-serif); --mono:var(--wp--preset--font-family--fira-code,ui-monospace,Menlo,Consolas,monospace); color-scheme:dark}
/* Layout: three working columns on wide screens (item browser | build board | results), two at mid widths
   (results drop under the board), and a tabbed single column on phones with a pinned result strip.
   Palette and type follow the Haven site (slate + gold, pixel display face). Rarity and element hues
   follow the game's own colour coding. */
.haven-planner *{box-sizing:border-box}
.haven-planner{background:var(--bg);color:var(--fg);font:15px/1.45 var(--body);margin:0}
.haven-planner .wrap{max-width:1560px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:22px 48px;display:grid;gap:16px}
.haven-planner h1{font:700 clamp(28px,4.4vw,40px)/1.05 var(--display);margin:0;text-wrap:balance}
.haven-planner h1 span{color:var(--gold)}
.haven-planner h2{font:500 18px/1.2 var(--display);margin:0;text-wrap:balance}
.haven-planner h3{font:700 11px/1.2 var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0}
.haven-planner .lede{max-width:78ch;color:var(--muted);margin:6px 0 0}
.haven-planner .top{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:end;justify-content:space-between}
.haven-planner .toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.haven-planner label.f{display:grid;gap:3px;font-size:12px;color:var(--muted);min-width:0}
.haven-planner label.f .t{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em}
.haven-planner input[type=number],.haven-planner input[type=text],.haven-planner input[type=search],.haven-planner select,.haven-planner textarea{font:14px var(--body);padding:6px 8px;background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:2px;width:100%;min-width:0}
.haven-planner input[type=number]{font-family:var(--mono);font-variant-numeric:tabular-nums}
.haven-planner textarea{font:12px var(--mono);resize:vertical}
.haven-planner :focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.haven-planner .btn{font:700 13px var(--body);padding:7px 11px;background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:2px;cursor:pointer;white-space:nowrap}
.haven-planner .btn:hover{border-color:var(--gold)}
.haven-planner .btn.pri{background:var(--gold);border-color:var(--gold);color:var(--panel)}
.haven-planner .btn.sm{font-size:12px;padding:4px 8px}
.haven-planner .btn.on{border-color:var(--gold);background:var(--gold-soft)}
.haven-planner .x{border:0;background:none;color:var(--muted);cursor:pointer;font:700 16px var(--body);padding:2px 6px;line-height:1}
.haven-planner .x:hover{color:var(--bad)}
.haven-planner .notice{background:var(--warn-soft);border-left:3px solid var(--warn);padding:8px 12px;font-size:13px;max-width:110ch}
/* main grid */
.haven-planner .main{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr) minmax(0,380px);gap:16px;align-items:start}
@media (max-width:1240px){.haven-planner .main{grid-template-columns:minmax(0,320px) minmax(0,1fr)}
.haven-planner .col-res{grid-column:2}}
@media (max-width:860px){.haven-planner .main{grid-template-columns:minmax(0,1fr)}
.haven-planner .col-res{grid-column:auto}}
.haven-planner .col{display:grid;gap:12px;min-width:0}
.haven-planner .box{background:var(--panel);border:1px solid var(--line);padding:12px 14px;display:grid;gap:10px;min-width:0}
.haven-planner .tabs{display:none}
@media (max-width:860px){.haven-planner .tabs{display:flex;gap:6px;position:sticky;top:env(safe-area-inset-top,0px);z-index:4;background:var(--bg);padding-block:6px}
.haven-planner .tabs .btn{flex:1}
.haven-planner .main[data-tab="items"] .col-build,.haven-planner .main[data-tab="items"] .col-res{display:none}
.haven-planner .main[data-tab="build"] .col-items,.haven-planner .main[data-tab="build"] .col-res{display:none}
.haven-planner .main[data-tab="res"] .col-items,.haven-planner .main[data-tab="res"] .col-build{display:none}
.haven-planner .wrap{padding-bottom:84px}}
/* item browser */
.haven-planner .col-items .box{position:sticky;top:12px;max-height:calc(100vh - 24px);grid-template-rows:auto auto 1fr}
@media (max-width:860px){.haven-planner .col-items .box{position:static;max-height:none}}
.haven-planner .chips{display:flex;flex-wrap:wrap;gap:5px}
.haven-planner .chip{font:700 11.5px var(--body);padding:3px 8px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--fg);cursor:pointer}
.haven-planner .chip[aria-pressed="true"]{background:var(--fg);color:var(--panel);border-color:var(--fg)}
.haven-planner .filters{display:grid;gap:8px}
.haven-planner .list{overflow:auto;display:grid;gap:6px;align-content:start;min-height:0;padding-right:2px}
.haven-planner .count{font-size:12px;color:var(--muted)}
.haven-planner .card{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:4px 10px;align-items:start;border:1px solid var(--line);padding:8px;background:var(--panel)}
.haven-planner .card:hover{border-color:var(--gold)}
.haven-planner .card .nm{font-weight:700;font-size:14px;line-height:1.2;overflow-wrap:anywhere}
.haven-planner .card .meta{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.haven-planner .card .fx{grid-column:2/4;font-size:12.5px}
.haven-planner .card details{grid-column:1/-1;font-size:12.5px}
.haven-planner .card summary{cursor:pointer;color:var(--muted)}
.haven-planner .pool{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;margin-top:4px;font-size:12px}
.haven-planner .pool span:nth-child(even){font-family:var(--mono);color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.haven-planner .tile{width:40px;height:40px;border:2px solid var(--rc,var(--r-common));display:grid;place-items:center;background:var(--sunk);position:relative}
.haven-planner .tile svg{width:24px;height:24px;color:var(--rc,var(--r-common))}
.haven-planner .ico{display:block;width:36px;height:36px;background-repeat:no-repeat;image-rendering:auto}
.haven-planner .fxi{display:inline-block;width:20px;height:20px;vertical-align:-5px;margin-right:5px;background-repeat:no-repeat;flex:none}
.haven-planner .ench{display:grid;gap:5px;border-top:1px dashed var(--line);padding-top:7px}
.haven-planner .ench .row{grid-template-columns:minmax(0,1fr) 70px}
.haven-planner .etext{font-size:12px;color:var(--muted)}
.haven-planner .tag{font:700 10px var(--body);text-transform:uppercase;letter-spacing:.06em;padding:1px 5px;border-radius:2px;white-space:nowrap}
.haven-planner .tag.calc{background:var(--gold-soft);color:var(--gold)}
.haven-planner .tag.test{background:var(--sunk);color:var(--muted);border:1px solid var(--line)}
.haven-planner .tnote{display:block;font-size:11.5px;color:var(--good)}
/* hover box, styled like the game's item tooltip: rarity-coloured header band, then sections */
.haven-planner .tip{position:fixed;z-index:20;width:min(340px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--rc,var(--r-common));box-shadow:0 10px 30px rgb(0 0 0/.25);pointer-events:none;font-size:12.5px;display:grid}
.haven-planner .tip>div{padding:9px 12px;display:grid;gap:5px}
.haven-planner .tip>div+div{border-top:1px solid var(--line)}
.haven-planner .tip .th{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;align-items:center;background:var(--sunk)}
.haven-planner .tip .ti{width:56px;height:56px;background-repeat:no-repeat}
.haven-planner .tip .tn{font:700 17px/1.1 var(--display)}
.haven-planner .tip .tr{font:700 10px var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--rc,var(--r-common))}
.haven-planner .tip .flav{color:var(--muted);font-style:italic}
.haven-planner .tip .kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px}
.haven-planner .tip .kv span:nth-child(odd){color:var(--muted)}
.haven-planner .tip .kv span:nth-child(even){font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.haven-planner .tip h4{margin:0;font:700 10px var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.haven-planner .tip .fl{display:flex;flex-wrap:wrap;gap:3px 10px}
.haven-planner .tile i{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border:2px solid var(--panel)}
.haven-planner .arch{font:700 10px var(--body);letter-spacing:.04em;text-transform:uppercase;padding:1px 5px;border:1px solid var(--line);border-radius:2px;color:var(--fg)}
.haven-planner .el{font:700 10px var(--body);text-transform:uppercase;letter-spacing:.04em}
.haven-planner .ufx{color:var(--r-unique);font-weight:700}
/* build board */
.haven-planner .slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:8px}
.haven-planner .slot{border:1px solid var(--line);background:var(--panel);padding:10px;display:grid;gap:7px;min-width:0;align-content:start}
.haven-planner .slot.empty{background:var(--sunk);border-style:dashed}
.haven-planner .slot .hd{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:10px;align-items:center}
.haven-planner .slot .sl{font:700 10px var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.haven-planner .slot .nm{font-weight:700;font-size:14px;line-height:1.2;overflow-wrap:anywhere}
.haven-planner .row{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:6px}
.haven-planner .row2{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:12.5px}
.haven-planner .row2 select{width:auto}
.haven-planner .fixed{font-size:12.5px;background:var(--sunk);padding:5px 8px;border-left:3px solid var(--r-unique)}
.haven-planner .fixed.ench{border-left-color:var(--muted)}
.haven-planner .chk{display:flex;gap:6px;align-items:flex-start;font-size:13px;cursor:pointer}
.haven-planner .chk input{margin-top:3px;accent-color:var(--gold)}
.haven-planner .chk small{display:block;color:var(--muted);font-size:11.5px}
.haven-planner .grp{display:grid;gap:8px}
/* results */
.haven-planner .col-res .box.sticky{position:sticky;top:12px}
@media (max-width:1240px){.haven-planner .col-res .box.sticky{position:static}}
.haven-planner .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.haven-planner .stat{border:1px solid var(--line);padding:7px 9px;display:grid;gap:1px;min-width:0}
.haven-planner .stat b{font:600 clamp(17px,2vw,22px)/1.15 var(--mono);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.haven-planner .stat span{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.haven-planner .stat small{font-size:11.5px;color:var(--muted)}
.haven-planner .stat.hl{border-color:var(--gold)}
.haven-planner .stat.hl b{color:var(--gold)}
.haven-planner table{border-collapse:collapse;width:100%;font-size:13px}
.haven-planner th,.haven-planner td{padding:4px 5px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.haven-planner th{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.haven-planner td.n{font-family:var(--mono);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.haven-planner td small{color:var(--muted);font-size:11.5px}
.haven-planner .bar{height:7px;background:var(--gold);border-radius:1px;min-width:1px}
.haven-planner tr.off td{color:var(--muted)}
.haven-planner .tw{overflow-x:auto}
.haven-planner .grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px 12px}
.haven-planner .flag{color:var(--warn);font-weight:700}
.haven-planner .up{color:var(--good);font-weight:700}
.haven-planner .down{color:var(--bad);font-weight:700}
.haven-planner .note{font-size:12px;color:var(--muted);margin:0}
.haven-planner .warn{background:var(--warn-soft);padding:6px 9px;font-size:12.5px}
.haven-planner .mini{display:none}
@media (max-width:860px){.haven-planner .mini{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:5;justify-content:space-between;gap:10px;align-items:baseline;background:var(--panel);border-top:2px solid var(--gold);padding:8px max(16px,env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));font-size:12px;color:var(--muted)}
.haven-planner .mini b{font:600 17px var(--mono);color:var(--gold)}}
.haven-planner footer{font-size:12.5px;color:var(--muted);display:grid;gap:4px;max-width:120ch}
.haven-planner footer a{color:var(--gold)}
@media (prefers-reduced-motion:reduce){.haven-planner *{transition:none!important}}
/* WordPress page fit */
.haven-planner{background:var(--bg);color:var(--fg);font-size:15px;line-height:1.45}
.haven-planner .wrap{padding-block:8px 48px}
.haven-planner h2{font-family:var(--display)}
.haven-planner .acct{display:grid;gap:10px}
.haven-planner .acct .lnk{word-break:break-all;font:12px var(--mono);background:var(--sunk);padding:6px 8px;border:1px solid var(--line)}
.haven-planner .acct a{color:var(--gold)}
.haven-planner .shared{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;background:var(--panel);border:1px solid var(--gold);border-left-width:4px;padding:10px 14px}
.haven-planner .shared b{color:var(--gold)}
.haven-planner .shared[hidden]{display:none}
.haven-planner .mybuilds{display:grid;gap:4px;max-height:260px;overflow:auto}
.haven-planner .mybuilds button.mb{display:flex;justify-content:space-between;gap:8px;width:100%;text-align:left;font:13px var(--body);padding:6px 8px;background:var(--sunk);color:var(--fg);border:1px solid var(--line);border-radius:2px;cursor:pointer}
.haven-planner .mybuilds button.mb[aria-current="true"]{border-color:var(--gold)}
.haven-planner .mybuilds small{color:var(--muted);white-space:nowrap}
body:has(.haven-planner) .wp-block-post-title{max-width:var(--wp--style--global--wide-size,1340px)}
/* The results panel used to pin in place and cover the boxes below it while scrolling. */
.haven-planner .col-res .box.sticky{position:static}

/* ---------- 2.2.1: page fit, larger type, build bar ---------- */
.haven-planner{font-size:16px}
.haven-planner .wrap{max-width:none;padding-left:0;padding-right:0;padding-top:4px}
.haven-planner h2{font-size:21px}
.haven-planner .btn{font-size:14px;padding:8px 13px}
.haven-planner .btn.sm{font-size:13px;padding:5px 9px}
.haven-planner a.btn{text-decoration:none;display:inline-block}
.haven-planner label.f{font-size:13px}
.haven-planner label.f .t{font-size:11.5px}
.haven-planner input[type=number],.haven-planner input[type=text],.haven-planner input[type=search],.haven-planner select{font-size:15px;padding:7px 9px}
.haven-planner .note,.haven-planner .count{font-size:13.5px}
.haven-planner .notice{font-size:14.5px;max-width:none}
.haven-planner .chip{font-size:12.5px;padding:4px 10px}
.haven-planner .card .nm,.haven-planner .slot .nm{font-size:15.5px}
.haven-planner .card .meta,.haven-planner .card .fx,.haven-planner .card details{font-size:13.5px}
.haven-planner .etext,.haven-planner .fixed,.haven-planner .row2,.haven-planner .pool{font-size:13.5px}
.haven-planner .chk{font-size:14px}.haven-planner .chk small{font-size:12.5px}
.haven-planner table{font-size:14px}.haven-planner td small{font-size:12.5px}
.haven-planner .tip{font-size:13.5px}
.haven-planner .nm a{color:inherit;text-decoration:none}
.haven-planner .nm a:hover,.haven-planner .nm a:focus-visible{text-decoration:underline;color:var(--gold)}
.haven-planner footer{font-size:13.5px;background:var(--panel);border:1px solid var(--line);padding:14px 16px;max-width:none}
/* build bar */
.haven-planner .buildbar{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 24px;align-items:end;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--gold);padding:14px 16px}
.haven-planner .bb-acct{display:grid;gap:8px;min-width:0}
.haven-planner .bb-row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:end}
.haven-planner .bb-name{flex:1 1 220px;max-width:340px}
.haven-planner .bb-mine{flex:1 1 220px;max-width:340px}
.haven-planner .bb-act{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.haven-planner .bb-title{display:grid;gap:2px}
.haven-planner .bb-title .t{font-size:11.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.haven-planner .bb-title b{font:500 20px/1.2 var(--display);color:var(--gold)}
.haven-planner .bb-sub{margin:0}
.haven-planner .bb-sub a{color:var(--gold)}
.haven-planner .bb-sub .lnk{font:12.5px var(--mono);word-break:break-all}
.haven-planner .bb-tools{display:flex;flex-wrap:wrap;gap:6px;align-items:end}
.haven-planner .bb-tools label.f{width:100px}
.haven-planner .bb-msg{grid-column:1/-1;margin:0;min-height:1.2em;font-size:13.5px;color:var(--good)}
.haven-planner .bb-msg:empty{display:none}
.haven-planner .codebox summary{cursor:pointer;list-style:none}
.haven-planner .codebox summary::-webkit-details-marker{display:none}
.haven-planner .codebox summary h2{display:inline}
.haven-planner .codebox summary::after{content:" ▸";color:var(--muted)}
.haven-planner .codebox[open] summary::after{content:" ▾"}
@media (max-width:860px){.haven-planner .buildbar{grid-template-columns:minmax(0,1fr)}.haven-planner .bb-name,.haven-planner .bb-mine{max-width:none}}