/* Crafting page (crafting/), 2026-10-04. Loaded only by that page, after aion.css and hub.css: it reuses their tokens and the
   builder's .bld-ctl / .chip / .step / .bld-src blocks, and keeps everything of its own under #crafting or a cft- name so
   nothing here can leak into the other pages. Grade colours are text colours, so each theme gets a readable set. */
#crafting{--cg-rare:#2c7d36; --cg-legend:#1f5fc4; --cg-unique:#8a5f00; --cg-epic:#b8431a; --cg-bar-rare:#6fcf6f; --cg-bar-legend:#6fa8ff; --cg-bar-unique:#e0b040; --cg-bar-epic:#ff8a5b}
:root[data-theme="asmodian"] #crafting{--cg-rare:#9fe49f; --cg-legend:#a9c9ff; --cg-unique:#ffe29a; --cg-epic:#ffb08f; --cg-bar-unique:#ffd36f}
@media (prefers-color-scheme: dark){ :root:not([data-theme="elyos"]) #crafting{--cg-rare:#9fe49f; --cg-legend:#a9c9ff; --cg-unique:#ffe29a; --cg-epic:#ffb08f; --cg-bar-unique:#ffd36f} }

#crafting .lnk{border:0; background:none; padding:0; font:inherit; font-size:inherit; color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px; cursor:pointer}
#crafting .lnk:hover{color:var(--ink)}
#crafting img,#crafting .noi{flex:none; border-radius:8px; border:1px solid var(--card-b); background:#1a1230}
#crafting .noi{display:inline-block}
#crafting .cg-rare{--g:var(--cg-rare); --gb:var(--cg-bar-rare)} #crafting .cg-legend{--g:var(--cg-legend); --gb:var(--cg-bar-legend)}
#crafting .cg-unique{--g:var(--cg-unique); --gb:var(--cg-bar-unique)} #crafting .cg-epic{--g:var(--cg-epic); --gb:var(--cg-bar-epic)}

/* ---------- filters ---------- */
#cft-ctl{margin-top:0}
#cft-ctl input[type=search]{flex:1; min-width:160px; font:15px "IBM Plex Sans",system-ui,sans-serif; padding:9px 12px; border-radius:10px; border:1px solid var(--rule-2); background:var(--gh-fill); color:var(--ink)}
#cft-ctl input[type=search]:focus-visible,#crafting select:focus-visible,#crafting .step input:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
#cft-profs,#cft-tabs{margin-top:12px}
#cft-tabs .chip{min-height:32px; font-size:13px}
#crafting .chip i{font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:11px; opacity:.7; margin-left:3px}
#cft-uses{margin-top:12px; padding:10px 14px; border-radius:10px; border:1px solid var(--accent); background:var(--soft); font-size:14.5px; color:var(--ink-2)}
#cft-uses b{color:var(--ink); font-weight:600}
#cft-uses[hidden],#cft-tabs[hidden]{display:none}

/* ---------- list + recipe ---------- */
.cft-layout{display:grid; grid-template-columns:minmax(0,370px) minmax(0,1fr); gap:24px; align-items:start; margin-top:18px}
.cft-list{position:sticky; top:92px; max-height:calc(100vh - 116px); overflow:auto; padding-right:6px; display:flex; flex-direction:column; gap:5px; scrollbar-width:thin}
.cft-gh{position:sticky; top:0; z-index:1; margin:0; padding:8px 2px 5px; background:var(--bg); font:500 10.5px "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.cft-row{display:grid; grid-template-columns:36px minmax(0,1fr) auto; gap:10px; align-items:center; text-align:left; padding:7px 10px; border-radius:10px; border:1px solid var(--rule); border-left:3px solid var(--gb,var(--rule-2));
  background:var(--bg-2); color:var(--ink-2); font:inherit; cursor:pointer}
.cft-row:hover{border-color:var(--accent); border-left-color:var(--gb,var(--accent))}
.cft-row[aria-pressed="true"]{border-color:var(--accent); border-left-color:var(--gb,var(--accent)); box-shadow:0 0 0 1px var(--accent)}
.cft-row b{display:block; font-family:"Marcellus",serif; font-weight:400; font-size:15.5px; line-height:1.15; color:var(--g,var(--ink))}
.cft-row b i{font:500 11px "IBM Plex Mono",monospace; color:var(--ink-3); margin-left:2px}
.cft-row small{display:block; font-size:12px; color:var(--ink-3); line-height:1.35; margin-top:2px}
.cft-row .pc{font:500 11px "IBM Plex Mono",monospace; color:var(--ink-3); padding:2px 6px; border-radius:999px; border:1px solid var(--rule-2)}

.cft-detail{padding:20px 22px 22px; border-radius:14px; background:var(--card); border:1px solid var(--card-b); box-shadow:var(--shadow); min-height:260px; scroll-margin-top:96px}
.cft-detail .hd{display:grid; grid-template-columns:56px minmax(0,1fr); gap:14px; align-items:center}
.cft-detail .hd img{border-radius:12px}
.cft-detail .k{font:500 10.5px "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.cft-detail h2{font-size:clamp(24px,2.6vw,32px); line-height:1.08; margin-top:3px; color:var(--g,var(--ink))}
.cft-detail .cm{font-size:13.5px; color:var(--ink-3); margin-top:4px}
.cft-detail .desc{font-size:14.5px; color:var(--ink-2); margin:12px 0 0; line-height:1.5}
.cft-detail .proc{font-size:14px; color:var(--ink-2); margin:10px 0 0; padding:9px 12px; border-radius:10px; background:var(--soft); border:1px solid var(--rule)}
.cft-detail h3{font-size:20px; line-height:1.1; margin:22px 0 8px}
.cft-detail h4{margin:12px 0 5px; font:500 10.5px "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)}
.cft-detail .fine{margin-top:10px}
.cft-gear{margin-top:14px; padding:12px 14px; border-radius:12px; background:var(--bg-2); border:1px solid var(--rule)}
.cft-gear p{margin:4px 0 0; font-size:14px; color:var(--ink-2)}
.cft-gear .gst{display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:6px; font-size:13.5px; color:var(--ink-2)}
.cft-gear .gst b{color:var(--ink); font-weight:600}
.cft-gear .s{font-size:12.5px; color:var(--ink-3); margin-top:6px}
.cft-gear .s a{color:var(--accent-ink); text-decoration:underline}
.cft-detail .qty{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px dashed var(--rule)}
.cft-detail .qty label{font-family:"Marcellus",serif; font-size:18px; color:var(--ink)}
.cft-detail .qty .s{font-size:13.5px; color:var(--ink-3)}
#crafting .step button{width:36px; height:36px}
#crafting .step input{width:62px; font-size:15px}
.cft-detail .avg{display:flex; align-items:flex-start; gap:8px; margin-top:12px; font-size:14px; color:var(--ink-2); cursor:pointer}
.cft-detail .avg input{margin-top:3px; accent-color:var(--accent)}

.cft-tree,.cft-tree ul,.cft-raw,.cft-steps{list-style:none; margin:0; padding:0}
.cft-tree ul{margin-left:13px; padding-left:14px; border-left:1px solid var(--rule-2)}
.cft-tree .n,.cft-raw li{display:grid; grid-template-columns:28px minmax(0,1fr); gap:8px; align-items:center; padding:5px 0; font-size:14.5px; color:var(--ink-2); min-height:38px}
.cft-tree .tx,.cft-raw .tx{display:flex; align-items:baseline; gap:1px 8px; flex-wrap:wrap}      /* the icon keeps its column: a long name wraps beside it, not under it */
.cft-tree .nm,.cft-raw .nm{color:var(--g,var(--ink)); font-weight:500}
.cft-tree .q,.cft-raw .q{font:600 13.5px "IBM Plex Mono",monospace; color:var(--ink)}
.cft-tree .tg,.cft-raw .tg{font-size:12.5px; color:var(--ink-3)}
.cft-tree .lnk,.cft-raw .lnk{font-size:12.5px}
.cft-tree .k-proc .tg{color:var(--hot)}
.cft-raw li{border-top:1px solid var(--rule)}
.cft-raw li:first-child{border-top:0}
.cft-detail .kinah{margin:14px 0 0; padding:10px 12px; border-radius:10px; background:var(--bg-2); border:1px solid var(--rule); font-size:14.5px; color:var(--ink-2)}
.cft-detail .kinah b{color:var(--ink); font-weight:600}
.cft-detail .kinah span{display:block; font-size:12.5px; color:var(--ink-3); margin-top:3px}
.cft-steps{counter-reset:s}
.cft-steps li{counter-increment:s; position:relative; padding:5px 0 5px 30px; font-size:14.5px; color:var(--ink-2)}
.cft-steps li::before{content:counter(s); position:absolute; left:0; top:6px; width:21px; height:21px; border-radius:50%; border:1px solid var(--rule-2); font:500 11px/20px "IBM Plex Mono",monospace; text-align:center; color:var(--ink-3)}
.cft-steps b{color:var(--ink); font-weight:600}
.cft-steps span{font-size:12.5px; color:var(--ink-3)}
.cft-detail .acts{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:18px}
.cft-detail .acts .fine{margin:0}

/* ---------- gathering + how it works ---------- */
.cft-gather{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px}
.cft-gather .gn{padding:12px 14px; border-radius:12px; background:var(--card); border:1px solid var(--card-b)}
.cft-gather .k{font:500 10.5px "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.cft-gather .gi{display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:4px 0; border:0; background:none; font:inherit; font-size:14.5px; color:var(--g,var(--ink)); cursor:pointer}
.cft-gather .gi:hover span{text-decoration:underline}
.cft-gather .gi[disabled]{cursor:default; opacity:.6}
.cft-gather .gi[disabled]:hover span{text-decoration:none}
.cft-gather .gi small{display:block; font-size:12px; color:var(--ink-3)}
.cft-how{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.cft-how .box h3{font-size:21px}
.cft-how .box p{font-size:15px}

@media (max-width: 900px){
  .cft-layout{grid-template-columns:minmax(0,1fr)}
  .cft-list{position:static; max-height:56vh; border:1px solid var(--rule); border-radius:12px; padding:0 8px 8px}
  .cft-how{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 600px){
  .cft-detail{padding:16px 14px 18px}
  .cft-tree ul{margin-left:6px; padding-left:10px}
}