/* Save status, the library dialogs, the talent calculator and the route's talent panel.
   Same system as app.css: panes float (--float), lists and groups sit in wells (--inset), the accent is mostly lines. */

/* ---------- save status (route editor and calculator) ---------- */
.savestat{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--faint);white-space:nowrap}
.savestat:empty{display:none}
.savestat[data-st="dirty"],.savestat[data-st="saving"]{color:var(--muted)}
.savestat[data-st="failed"],.savestat[data-st="conflict"],.savestat[data-st="unavailable"]{color:var(--danger);font-weight:600;white-space:normal}
.savestat[data-st="stale"]{color:var(--faction-hi);font-weight:600}
.savestat button{padding:2px 8px;font-size:12.5px}
.ubanner{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:10px 16px 0;padding:9px 14px;background:var(--faction-soft);border:1px solid var(--faction);border-radius:5px;box-shadow:var(--float-sm);font-size:13.5px}
.ubanner[hidden]{display:none}
.ubanner .bbtns{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}

/* ---------- unresolved steps in the route list ---------- */
.ri.unres{opacity:.85}
.ri.unres .qname{font-style:italic;color:var(--muted)}
.ri.unres .chk{width:15px}
.detail pre.orig{margin:0;padding:8px 10px;max-height:220px;overflow:auto;background:var(--well);border:1px solid var(--edge);border-radius:4px;box-shadow:var(--inset);font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}

/* ---------- library and import dialogs ---------- */
.libdlg{width:min(760px,94vw);max-height:88vh;display:flex;flex-direction:column;padding:0}
.libdlg[open]{display:flex}
.libdlg form{display:flex;flex-direction:column;min-height:0}
.libhead{display:flex;align-items:center;gap:10px;padding:14px 18px 10px;border-bottom:3px solid var(--faction);box-shadow:0 12px 8px -8px #000;position:relative;z-index:1}
.libhead h2{margin:0}
.libx{margin-left:auto;width:32px;height:32px;padding:0;font-size:20px;line-height:1}
.libbody{padding:12px 18px 16px;overflow:auto;min-height:0}
.libtools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-bottom:8px}
.libtools .seg{display:inline-flex;border:1px solid var(--ctl);border-radius:4px;overflow:hidden}
.libtools .seg button{border:0;border-radius:0;padding:4px 10px}
.libtools .seg button+button{border-left:1px solid var(--ctl)}
.libtools .seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--faction-hi)}
.libextra{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.libnote{font-size:12.5px;color:var(--muted)}
.libdlg .saved{max-height:none;background:var(--well);border:1px solid var(--edge);border-radius:4px;box-shadow:var(--inset);padding:6px}
.libdlg .saved li{flex-wrap:wrap}
.libacts{display:flex;flex-wrap:wrap;gap:4px}
.libacts button{padding:3px 9px;font-size:12.5px}
.libfoot{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.libfoot .del,.libacts .del{color:var(--danger)}
.b-soft{background:var(--well);color:var(--muted);border:1px solid var(--rim)}
.impdlg .sel select,.tsettings select,.tsettings input{font:600 14px "Source Sans 3",sans-serif;padding:5px 8px;border:1px solid var(--ctl);border-radius:4px;background:var(--well)}
.impdlg .sel{display:block;margin-bottom:12px}
.savesbtn{padding:7px 12px;font-weight:600;font-size:14px}
.savesbtn[hidden]{display:none}
.savesbtn .count{color:var(--faint);margin-left:4px}
.tconfirm ul{margin:0 0 12px;padding-left:20px;font-size:13.5px}

/* ---------- talent icons ---------- */
.ticon{position:relative;display:inline-grid;place-items:center;width:36px;height:36px;flex:none;border-radius:4px;background:var(--well);border:1px solid var(--edge);overflow:hidden;vertical-align:middle}
.ticon::before{content:attr(data-initial);font:700 15px "Alegreya SC",Georgia,serif;color:var(--muted)}
.ticon img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ticon img.broken{display:none}
.ticon.sm{width:22px;height:22px;border-radius:3px}
.ticon.sm::before{font-size:11px}

/* ---------- calculator ---------- */
.talview .tbar{margin-bottom:0}
.tsettings{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:10px 16px 0;padding:8px 14px;background:var(--surface);border:1px solid var(--rim);border-radius:5px;box-shadow:var(--float-sm);font-size:13.5px}
.tsettings label{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.tsettings input[type="number"]{width:64px}
.tsettings .tdata{margin-left:auto;font-size:12px;color:var(--faint)}
/* Keep desktop trees at most 360px wide: three trees + two 12px gaps = 1104px.
   The full layout adds a 360px sidebar, a 14px gap and 32px horizontal padding. */
.tlayout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:14px;padding:14px 16px 16px;align-items:start;width:100%;max-width:1510px;margin-inline:auto}
/* Retain the tree cap when the sidebar stacks below the calculator. */
.ttrees{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;max-width:1104px;justify-self:center}
.ttabs{display:none}
.tree{background:var(--surface);border:1px solid var(--rim);border-radius:5px;box-shadow:var(--float);padding:10px 10px 12px;display:grid;gap:8px;align-content:start;min-width:0}
.tree h2{margin:0;padding:0 2px 6px;border-bottom:3px solid var(--cc,var(--faction));box-shadow:0 10px 8px -8px #000;font:800 19px "Alegreya SC",Georgia,serif;display:flex;align-items:baseline;gap:8px;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.tree h2 .tpts{margin-left:auto;font:700 15px "Source Sans 3",sans-serif;color:var(--faction-hi);font-variant-numeric:tabular-nums}
.tgrid{position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(var(--rows),auto);gap:10px 6px;padding:10px 6px;background:linear-gradient(rgba(16,19,24,.5),rgba(16,19,24,.72)),var(--tbg,none) center/cover no-repeat,var(--well);border:1px solid var(--edge);border-radius:4px;box-shadow:var(--inset);justify-items:center}
.tarrows{position:absolute;inset:10px 6px;width:calc(100% - 12px);height:calc(100% - 20px);pointer-events:none;overflow:visible}
.tarrows path{fill:none;stroke:#4a5563;stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round}
.tarrows path.met{stroke:var(--faction)}
.tal{position:relative;width:48px;height:48px;padding:0;border:2px solid #3d4652;border-radius:6px;background:#11141a;box-shadow:0 2px 4px rgba(0,0,0,.6);z-index:1}
.tal .ticon{width:100%;height:100%;border:0;border-radius:4px}
.tal.locked .ticon{filter:grayscale(1) brightness(.55)}
.tal.open{border-color:#78a35a}
.tal.has{border-color:#e0b43e}
.tal.max{border-color:#f4d266;box-shadow:0 0 0 1px #000,0 0 8px rgba(244,210,102,.45)}
.tal.sel{outline:3px solid var(--faction-hi);outline-offset:2px}
.tal:hover:not(.sel){border-color:var(--faction-hi)}
.trank{position:absolute;right:-7px;bottom:-7px;min-width:28px;padding:1px 4px;border:1px solid #000;border-radius:3px;background:#0b0d10;font:700 11.5px/1.25 "Source Sans 3",sans-serif;color:#78a35a;font-variant-numeric:tabular-nums}
.tal.locked .trank{color:var(--faint)}
.tal.has .trank{color:#f4d266}
.treset{justify-self:end;padding:2px 9px;font-size:12px}
.tside{display:grid;gap:12px;position:sticky;top:12px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;scrollbar-gutter:stable}
.tdetail,.torder{background:var(--raised);border:1px solid var(--rim);border-radius:5px;box-shadow:var(--float-sm);padding:12px 14px;display:grid;gap:6px;align-content:start}
.tdetail h2,.torder h2{display:flex;align-items:center;gap:8px;margin:0;font:800 18px "Alegreya SC",Georgia,serif;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.tdetail p{margin:0;font-size:13.5px;line-height:1.45}
.tdetail .lab,.torder .lab,.tpanel .lab{font:700 14.5px "Alegreya SC",Georgia,serif;color:var(--faction-hi)}
.treq{margin:0;padding-left:18px;font-size:13px}
.treq .ok{color:#9ccc7a}.treq .no{color:var(--danger)}
.twhy{color:var(--danger);font-weight:600}
/* Talent previews stay beside their icon on desktop and within the viewport on touch screens. */
.ttip{position:fixed;z-index:1000;width:min(340px,calc(100vw - 24px));box-sizing:border-box;padding:14px 16px;background:var(--raised);color:var(--ink);border:1px solid var(--faction-hi);border-radius:6px;box-shadow:0 8px 28px #000b;overflow:hidden;pointer-events:none;user-select:none;overflow-wrap:anywhere;font-size:13.5px;line-height:1.45}
.ttip[hidden]{display:none}
.ttip h2{display:flex;align-items:center;gap:8px;margin:0 0 8px;font:800 18px "Alegreya SC",Georgia,serif}
.ttip h2 .muted{white-space:nowrap;margin-left:auto;font:600 13px "Source Sans 3",sans-serif}
.ttip p{margin:6px 0}
.ttip .lab{margin-top:10px;font-weight:700;color:var(--faction-hi)}
.ttip .ttip-help{margin:12px 0 0;padding-top:8px;border-top:1px solid var(--rim);font-size:12px;color:var(--muted)}
.tdbtns,.tpbtns{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.tdiag{margin:0;padding-left:18px;font-size:13px}
.tdiag .error{color:var(--danger)}.tdiag .warning{color:#e0b43e}
.ostate{margin:0;font-weight:700}
.ostate.bad{color:var(--danger)}
.olist{list-style:none;margin:0;padding:4px;background:var(--well);border:1px solid var(--edge);border-radius:4px;box-shadow:var(--inset);display:grid;gap:1px;max-height:52vh;overflow:auto}
.olist:empty{display:none}
.ostep{display:grid;grid-template-columns:24px 40px 22px minmax(0,1fr) auto;align-items:center;gap:6px;padding:3px 4px;border-radius:3px;font-size:13px}
.ostep .on{color:var(--faint);text-align:right;font-variant-numeric:tabular-nums}
.ostep .olv{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}
.ostep .oname{min-width:0;overflow-wrap:anywhere}
.ostep.cont .ticon,.ostep.cont .oname{opacity:.72}
.ostep .owhy{display:block;font-size:12px;color:var(--danger)}
.ostep.bad{background:color-mix(in srgb,var(--danger) 14%,transparent)}
.ostep.blocked{opacity:.55}
.ostep.excess .olv{color:#e0b43e}
.ostep.done .oname{color:var(--faint);text-decoration:line-through}
.oops{display:flex;gap:2px}
.oops button{width:26px;height:24px;padding:0;font-size:13px}
.orem{display:flex;flex-wrap:wrap;gap:4px}
.orem button{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 4px;font-size:12.5px}
.olist.compact{max-height:none}
.olist.compact .ostep{grid-template-columns:24px 40px 22px minmax(0,1fr)}

/* class picker */
.tpick{width:calc(100% - 32px);max-width:1100px;margin:18px auto 8px;padding:28px clamp(16px,4vw,44px) 36px;background:var(--surface);border:1px solid var(--rim);border-radius:5px;box-shadow:var(--float)}
.tclasses{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0}
.tclasses .cls{text-decoration:none;color:var(--ink)}
.tpick .tdata{font-size:12.5px;color:var(--faint)}

/* ---------- the route's talent panel ---------- */
.tbtn .tnext{font-weight:400;color:var(--muted)}
.tbtn.has{border-color:var(--faction)}
.tbtn[aria-expanded="true"]{background:var(--accent-soft);border-color:var(--faction);color:var(--faction-hi)}
.tfab{display:none}
.tpanel{position:fixed;z-index:35;top:calc(var(--panel-top,120px));right:16px;width:340px;max-height:calc(100vh - var(--panel-top,120px) - 16px);max-height:calc(100dvh - var(--panel-top,120px) - 16px);display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rim);border-radius:5px;box-shadow:var(--float),0 18px 40px rgba(0,0,0,.55)}
.tpanel[hidden]{display:none}
.tpanel:focus{outline:none}
.tphead{display:flex;align-items:center;gap:8px;padding:10px 12px 8px 14px;border-bottom:3px solid var(--faction);box-shadow:0 12px 8px -8px #000;position:relative;z-index:1}
.tphead h2{margin:0;font:800 19px "Alegreya SC",Georgia,serif;text-shadow:0 2px 0 rgba(0,0,0,.45)}
.tpx{margin-left:auto;width:32px;height:32px;padding:0;font-size:20px;line-height:1}
.tpbody{padding:10px 14px 14px;overflow:auto;display:grid;gap:8px;align-content:start;font-size:13.5px}
.tpbody p{margin:0}
.tpname{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.tprec input{width:56px;padding:4px 6px;border:1px solid var(--ctl);border-radius:4px;background:var(--well)}
.tpnext{padding:9px 10px;background:var(--well);border:1px solid var(--edge);border-radius:4px;box-shadow:var(--inset);display:grid;gap:6px}
.tpnextrow{display:flex;align-items:center;gap:9px}
.tprank{font-size:12.5px;color:var(--muted)}
.tprec{padding:8px 10px;border:1px solid var(--danger);border-radius:4px;background:color-mix(in srgb,var(--danger) 10%,var(--surface));display:grid;gap:6px}
.tpall summary,.tpmore summary{cursor:pointer;font-weight:600;color:var(--muted)}
.tpall[open] summary,.tpmore[open] summary{color:var(--ink);margin-bottom:6px}
.tpmore .del{color:var(--danger)}

@media (prefers-reduced-motion:no-preference){
  .tpanel:not([hidden]){animation:tpin .16s ease-out}
  @keyframes tpin{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
}

@media (max-width:1180px){
  .tlayout{grid-template-columns:minmax(0,1fr)}
  .tside{position:static;max-height:none;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}
@media (max-width:980px){
  .ubanner,.tsettings{margin:8px 8px 0}
  .tlayout{padding:10px 8px 16px}
  /* one tree at a time, picked with tabs on a lit rule */
  .ttrees{display:block}
  .ttabs{display:flex;gap:4px;padding:0 4px;border-bottom:3px solid var(--faction);box-shadow:0 12px 8px -8px #000;margin-bottom:10px}
  .ttabs button{border:2px solid var(--rim);border-bottom:0;border-radius:5px 5px 0 0;background:var(--surface);padding:8px 12px 6px;font-weight:700;color:var(--muted);min-height:40px}
  .ttabs button[aria-selected="true"]{color:var(--faction-hi);border-color:var(--faction);background:linear-gradient(var(--faction-soft),var(--surface))}
  .tree{display:none;max-width:420px;margin:0 auto}
  .tree.on{display:grid}
  .tree h2{display:none}
  .tal{width:52px;height:52px}
  /* the route panel becomes a bottom sheet above the List/Map/Details switch */
  .tpanel{left:0;right:0;top:auto;bottom:calc(var(--mswitch-h,62px));width:auto;max-height:min(70vh,calc(100vh - var(--mswitch-h,62px) - 40px));max-height:min(70dvh,calc(100dvh - var(--mswitch-h,62px) - 40px));border-radius:8px 8px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom)}
  .tpx{width:44px;height:44px}
  .tpbtns button{min-height:40px}
  /* in Map and Details the list's toolbar is hidden: a small opener sits above the switch instead */
  .qlview[data-mview="map"] .tfab,.qlview[data-mview="details"] .tfab{display:block;position:fixed;z-index:31;right:10px;bottom:calc(var(--mswitch-h,62px) + 10px + env(safe-area-inset-bottom));padding:8px 14px;background:var(--surface);border-color:var(--faction);box-shadow:var(--float-sm)}
  html.tsheet-open .tfab{display:none!important}
  .libdlg{width:100vw;max-width:100vw;max-height:92vh;margin:auto 0 0;border-radius:8px 8px 0 0}
}
@media (max-width:980px) and (prefers-reduced-motion:no-preference){
  .tpanel:not([hidden]){animation:tpup .18s ease-out}
  @keyframes tpup{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
}
@media (max-height:500px) and (orientation:landscape){
  .tpanel{max-height:calc(100vh - var(--mswitch-h,62px) - 8px);max-height:calc(100dvh - var(--mswitch-h,62px) - 8px)}
}

/* ---------- the next-talent strip above the route list ---------- */
/* in the list's header (above the scrolling list, sticky on phones), so it stays in view; one line */
.tstrip{display:flex;align-items:center;gap:8px;margin:8px 10px 0;padding:5px 6px 5px 8px;background:var(--well);border:1px solid var(--edge);border-radius:4px;box-shadow:var(--inset);font-size:13.5px;white-space:nowrap}
.tstrip[hidden],.sidehead:not([data-tab="route"]) .tstrip{display:none}
.tstrip .tsname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tstrip .lab{font:700 14px "Alegreya SC",Georgia,serif;color:var(--faction-hi);margin-right:4px}
.tstrip button{flex:none;padding:3px 10px;font-size:13px}
.tstrip .tsarrow{padding:1px 9px;font-size:18px;line-height:1.2}
@media (max-width:980px){.tstrip{margin:8px 10px 6px}}

/* ---------- section headings the list owns: rename, remove ---------- */
.rlist .secdiv{display:flex;align-items:stretch}
.rlist .secdiv .secbtn{flex:1;min-width:0}
.secops{display:flex;gap:2px;align-items:center;padding:0 6px;border-bottom:1px solid var(--edge);background:linear-gradient(#2a3039,#232830)}
.secops button{width:28px;height:26px;padding:0;border-color:transparent;background:none;color:var(--faint);font-size:14px}
.secops button:hover,.secops button:focus-visible{border-color:var(--ctl);color:var(--ink)}
.secops button[data-secop="remove"]:hover{color:var(--danger)}
@media (hover:hover){.rlist .secdiv:not(:hover):not(:focus-within) .secops button{opacity:0}}
.secedit{flex:1;min-width:0;margin:4px 6px;padding:5px 8px;border:1px solid var(--faction);border-radius:4px;background:var(--well);font:700 14.5px "Alegreya SC",Georgia,serif;color:var(--ink)}
@media (max-width:980px){
  .secops{margin:10px 0 8px;border:1px solid var(--edge);border-left:0;border-radius:0 4px 4px 0}
  .rlist .secdiv .secbtn{border-radius:4px 0 0 4px}
  .secops button{width:36px;height:36px}
}