/* Tool pages: the maps (map.js) and the craft calculator (craft.js). Colours come from app.css. */

/* ---------------------------------------------------------------- maps */
.mx{margin:1rem 0 1.6rem}
.mx-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 8px}
.mx-seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.mx-seg button{height:32px;padding:0 12px;border:0;background:var(--card);color:var(--tx2);font:inherit;font-size:.9rem;cursor:pointer}
.mx-seg button+button{border-left:1px solid var(--line)}
.mx-seg button:hover{color:#fff}
.mx-seg button[aria-pressed=true]{background:var(--ac-bg);color:#fff}
.mx-lv{display:inline-flex;align-items:center;gap:6px;font-size:.9rem;color:var(--mu)}
.mx-lv i{font-style:normal}
.mx-bar input{height:34px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r);background:var(--in);color:var(--hi);font:inherit;font-size:.9rem;-webkit-appearance:none;appearance:none}
.mx-bar input:focus{outline:none;border-color:var(--ac)}
.mx-bar input::placeholder{color:var(--mu)}
.mx-lv input{width:54px;padding:0 4px;text-align:center;-moz-appearance:textfield}
.mx-lv input::-webkit-outer-spin-button,.mx-lv input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.mx-q,.mx-iq{width:190px}
.mx-item{position:relative}
.mx-sg{position:absolute;z-index:30;top:calc(100% + 4px);left:0;min-width:270px;max-width:86vw;padding:4px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 14px 34px rgba(0,0,0,.6)}
.mx-sg button{display:flex;align-items:center;gap:8px;width:100%;padding:6px 8px;border:0;border-radius:3px;background:none;color:var(--tx2);font:inherit;font-size:.9rem;text-align:left;cursor:pointer}
.mx-sg button:hover{background:var(--card2);color:#fff}
.mx-sg p{margin:0;padding:6px 8px;color:var(--mu);font-size:.88rem}
.mx-reset{height:34px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);background:none;color:var(--tx2);font:inherit;font-size:.9rem;cursor:pointer}
.mx-reset:hover{border-color:var(--ac);color:#fff}
.mx-body{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:10px}
.mx-map{position:relative;height:min(74vh,780px);min-height:420px;border-radius:var(--r);overflow:hidden;background:#0d1418;isolation:isolate}
.mx-map canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
.mx-map canvas:active{cursor:grabbing}
.mx-msg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:8px 14px;border-radius:var(--r);background:rgba(20,18,16,.85);color:var(--tx2)}
.mx-ctl{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;gap:4px}
.mx-ctl button{width:34px;height:34px;border:1px solid var(--line2);border-radius:var(--r);background:rgba(28,26,24,.92);color:#fff;font:inherit;font-size:1.1rem;line-height:1;cursor:pointer}
.mx-ctl button:hover{border-color:var(--ac);color:var(--ac)}
.mx-pop{position:absolute;z-index:5;width:292px;max-width:calc(100% - 16px);max-height:calc(100% - 16px);overflow:auto;padding:11px 12px 10px;border:1px solid var(--line2);border-radius:6px;background:rgba(28,26,24,.97);box-shadow:0 14px 34px rgba(0,0,0,.65);font-size:.9rem;line-height:1.4}
.mx-pop p{margin:0 0 5px}
.mx-x{position:absolute;right:4px;top:2px;width:28px;height:28px;border:0;background:none;color:var(--mu);font-size:1.25rem;line-height:1;cursor:pointer}
.mx-x:hover{color:#fff}
.mx-nm{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding-right:22px;font-size:1rem;font-weight:600}
.mx-nm i,.mx-list i{flex:none;min-width:26px;padding:1px 4px;border-radius:3px;color:#111;font-style:normal;font-weight:700;font-size:.74rem;line-height:1.5;text-align:center}
.mx-nm small{flex-basis:100%;font-size:.8rem;font-weight:400;color:var(--mu)}
.mx-fx{color:var(--tx2)}
.mx-act{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0 2px!important}
.mx-act span{color:var(--mu)}
.mx-act button{padding:3px 9px;border:1px solid var(--line2);border-radius:var(--r);background:var(--card2);color:#fff;font:inherit;font-size:.84rem;cursor:pointer}
.mx-act button:hover{border-color:var(--ac)}
.mx-dh{margin:9px 0 3px!important;font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mu)}
.mx-dl{list-style:none;margin:0;padding:0}
.mx-dl li{display:flex;align-items:center;gap:8px;padding:2px 0}
.mx-dl a{display:flex;align-items:center;gap:7px;flex:1;min-width:0}
.mx-dl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-dl i{font-style:normal;color:var(--tx2);font-variant-numeric:tabular-nums}
.mx-side{display:flex;flex-direction:column;height:min(74vh,780px);min-height:0;border-radius:var(--r);background:var(--card)}
.mx-cnt{margin:0;padding:9px 12px 7px;font-size:.84rem;color:var(--mu)}
.mx-list{flex:1;margin:0;padding:0 4px 4px;list-style:none;overflow:auto;scrollbar-width:thin}
.mx-list button{display:flex;align-items:center;gap:8px;width:100%;padding:4px 7px;border:0;border-radius:3px;background:none;color:var(--tx2);font:inherit;font-size:.88rem;text-align:left;cursor:pointer}
.mx-list button:hover{background:var(--card2);color:#fff}
.mx-list i.b{box-shadow:0 0 0 1px #111,0 0 0 2px #fde047}
.mx-list span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mx-list small{color:var(--mu);font-size:.78rem;white-space:nowrap}
.mx-list.mx-in{padding:0;max-height:320px}
.mx-more{padding:6px 8px;color:var(--mu);font-size:.84rem}
.mx-legend{display:flex;flex-wrap:wrap;gap:5px 14px;list-style:none;margin:8px 0 0;padding:0;font-size:.84rem;color:var(--mu)}
.mx-legend li{display:inline-flex;align-items:center;gap:5px}
.mx-legend li[data-b]{cursor:pointer;color:var(--tx2)}
.mx-legend li[data-b]:hover{color:#fff}
.mx-legend i{width:12px;height:12px;border-radius:50%}
.mx-full{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;margin:0;padding:10px;background:var(--bg)}
.mx-full .mx-body{flex:1;min-height:0}
.mx-full .mx-map,.mx-full .mx-side{height:100%;max-height:none}
html.mx-lock{overflow:hidden}
@media (max-width:900px){
  .mx-body{grid-template-columns:1fr}
  .mx-map{height:64vh;min-height:340px}
  .mx-side{height:auto;max-height:280px}
  .mx-q,.mx-iq{width:100%}
  .mx-bar>.mx-q,.mx-item{flex:1 1 150px}
  .mx-full .mx-body{display:flex;flex-direction:column}
  .mx-full .mx-map{flex:1;height:auto;min-height:0}
  .mx-full .mx-side{flex:none;height:150px}
}

/* ---------------------------------------------------------------- tool cards on the hub */
.cards.tools a{display:grid;gap:6px;height:100%;color:var(--tx)}
.cards.tools a:hover{text-decoration:none}
.cards.tools>li{padding:0}
.cards.tools>li>a{padding:14px 16px}
.cards.tools>li:hover{background:var(--card2)}
.cards.tools b{font-size:1.1rem;color:var(--ac)}
.cards.tools i{font-style:normal;font-size:.9rem;color:var(--ac)}

/* ---------------------------------------------------------------- craft calculator */
.cx{margin:1rem 0 1.6rem}
.cx-msg{padding:14px;border-radius:var(--r);background:var(--card);color:var(--tx2)}
.cx-add{display:flex;flex-wrap:wrap;gap:8px}
.cx-find{position:relative;flex:1 1 280px;max-width:460px}
.cx-find input{width:100%;height:38px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--in);color:var(--hi);font:inherit;-webkit-appearance:none;appearance:none}
.cx-find input:focus{outline:none;border-color:var(--ac)}
.cx-sg{position:absolute;z-index:30;top:calc(100% + 4px);left:0;right:0;padding:4px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:0 14px 34px rgba(0,0,0,.6)}
.cx-sg p{margin:0;padding:6px 8px;color:var(--mu)}
.cx-sg button,.cx-items button{display:flex;align-items:center;gap:8px;width:100%;padding:5px 8px;border:0;border-radius:3px;background:none;color:var(--tx2);font:inherit;font-size:.92rem;text-align:left;cursor:pointer}
.cx-sg button:hover,.cx-items button:hover{background:var(--card2);color:#fff}
.cx-sg span,.cx-items span:not(.g){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cx-catbtn{height:38px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--tx2);font:inherit;cursor:pointer}
.cx-catbtn::after{content:" ▾"}
.cx-catbtn[aria-expanded=true]{border-color:var(--ac);color:#fff}
.cx-cat{margin:8px 0 0;padding:10px;border-radius:var(--r);background:var(--card)}
.cx-tabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px}
.cx-tabs button{padding:5px 12px;border:0;border-radius:var(--r);background:var(--sheet);color:var(--tx2);font:inherit;font-size:.9rem;cursor:pointer}
.cx-tabs.sm button{padding:2px 9px;font-size:.8rem;font-weight:700}
.cx-tabs button:hover{color:#fff}
.cx-tabs button[aria-pressed=true]{background:var(--ac-bg);color:#fff}
.cx-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:0 8px;max-height:300px;margin:0;padding:0;list-style:none;overflow:auto;scrollbar-width:thin}
.cx h3{margin:1.5rem 0 .6rem}
.cx-tl{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.cx-tl li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r);background:var(--card)}
.cx-tn{flex:1;min-width:0}
.cx-tn small{display:block;color:var(--mu);font-size:.82rem}
.cx-tn select{max-width:100%;padding:1px 4px;border:1px solid var(--line);border-radius:3px;background:var(--in);color:var(--tx2);font:inherit;font-size:.82rem}
.cx input[type=number]{width:84px;height:32px;padding:0 6px;border:1px solid var(--line);border-radius:var(--r);background:var(--in);color:var(--hi);font:inherit;font-size:.92rem;text-align:right}
.cx input[type=number]:focus{outline:none;border-color:var(--ac)}
.cx-tl button{width:30px;height:30px;border:0;border-radius:var(--r);background:none;color:var(--mu);font-size:1.3rem;line-height:1;cursor:pointer}
.cx-tl button:hover{background:var(--card2);color:#fff}
.cx-facts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:14px 0 0;color:var(--tx2)}
.cx-facts button{padding:4px 11px;border:1px solid var(--line);border-radius:var(--r);background:none;color:var(--tx2);font:inherit;font-size:.86rem;cursor:pointer}
.cx-facts button:hover{border-color:var(--ac);color:#fff}
.cx-t td{padding-top:4px;padding-bottom:4px}
.cx-t tr.ok td{opacity:.55}
.cx-t tr.ok td b{color:var(--ok);opacity:1}
.cx-done{margin:.6rem 0 0;color:var(--ok)}
.cx-tree ul{margin:0;padding:0 0 0 22px;list-style:none;border-left:1px solid var(--line)}
.cx-tree>details{margin:0 0 6px;padding:6px 10px;border-radius:var(--r);background:var(--card)}
.cx-tree summary,.cx-tree li>div{display:flex;align-items:center;gap:8px;padding:3px 0}
.cx-tree summary{cursor:pointer}
.cx-tree li>div{padding-left:15px}
.cx-tree span{flex:1;min-width:0}
.cx-tree b{font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .cx-items{grid-template-columns:1fr}
  .cx input[type=number]{width:70px}
}


/* ---------------------------------------------------------------- stat calculator (the form comes from tools/build_calc.py) */
.calc{margin:1rem 0 1.6rem;font-size:.9rem}
.calc .row{display:flex;flex-wrap:wrap;gap:0 12px}
.calc .col-md-12{flex:1 1 100%;min-width:0}
.calc .col-md-6{flex:1 1 calc(50% - 6px);min-width:260px}
.calc .col-md-4{flex:1 1 calc(33.333% - 8px);min-width:230px}
.calc .hidden{display:none}
.calc .clearfix{clear:both}
.calc table{width:100%;margin:0 0 10px;border-collapse:collapse;background:var(--card)}
.calc td,.calc th{padding:4px 7px;border:1px solid var(--line);vertical-align:middle}
.calc td[id]{color:var(--hi);font-weight:600;font-variant-numeric:tabular-nums}
.calc select,.calc .form-control{display:inline-block;max-width:100%;height:28px;margin:1px 0;padding:0 4px;border:1px solid var(--line);border-radius:3px;background:var(--in);color:var(--hi);font:inherit;font-size:.86rem}
.calc select:focus{outline:none;border-color:var(--ac)}
.calc select:disabled{opacity:.45}
.calc input[type=checkbox],.calc input[type=radio]{accent-color:var(--ac);vertical-align:-2px}
.calc fieldset{min-width:0;margin:0 0 6px;padding:0;border:0}
.calc legend{padding:0;margin:14px 0 8px;font-size:1.12rem;font-weight:500;color:var(--hi)}
.calc h3{margin:.4rem 0 .6rem}
.calc br{line-height:.4}
.calc .calctab{position:sticky;top:0;z-index:20;flex:1 1 100%;margin:0 -20px 10px;padding:8px 20px 2px;background:var(--sheet);box-shadow:0 8px 14px -10px rgba(0,0,0,.9)}
.calc .calctabinner{display:flex;flex-wrap:wrap;gap:0 12px}
.calc .calctab table{margin-bottom:6px}
.calc .calctab .col-md-12:first-child{margin:0 0 5px!important;font-size:.72rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mu)}
.calc .statmenu td{padding:3px 7px}
.calc #contnt>fieldset>table,.calc #contnt table{table-layout:auto}
.calc .tw2{overflow-x:auto}
@media (max-width:760px){
  .calc .calctab{position:static;margin:0 0 10px;padding:0;box-shadow:none}
  .calc #contnt{overflow-x:auto}
  .calc select,.calc .form-control{max-width:210px}
}
.calc .col-md-4{display:inline-block;width:calc(33.333% - 9px);min-width:230px;margin-right:8px;vertical-align:top}
.calc .col-md-4:last-of-type{margin-right:0}
.calc #contnt select{min-width:132px}
.calc #contnt select[id$="ENCHANT"],.calc #contnt select[id$="GRADE"]{min-width:64px}
@media (max-width:760px){.calc .col-md-4{display:block;width:100%;margin-right:0}}