/* Cabal EP8 Tools: the shared design of every page (sidebar layout, dense striped tables, follows system light / dark).
   Each page adds its own rules in assets/css/<page>.css, loaded after this file. */
:root{--bg:#f3f4f6;--side:#111827;--side-tx:#cbd5e1;--side-mu:#64748b;--side-on:#1f2937;--card:#fff;--tx:#111827;--mu:#6b7280;--bd:#e5e7eb;--ac:#0d9488;--ac-tx:#fff;--zebra:#f9fafb;--hl:#ecfdf5;--chip:#f1f5f9;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b0f14;--side:#05080c;--side-on:#111827;--card:#121821;--tx:#e5e7eb;--mu:#94a3b8;--bd:#1f2937;--ac:#2dd4bf;--ac-tx:#04201c;--zebra:#0f151d;--hl:#0f2a27;--chip:#1a2230;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0b0f14;--side:#05080c;--side-on:#111827;--card:#121821;--tx:#e5e7eb;--mu:#94a3b8;--bd:#1f2937;--ac:#2dd4bf;--ac-tx:#04201c;--zebra:#0f151d;--hl:#0f2a27;--chip:#1a2230;color-scheme:dark}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--tx);font:13px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}

/* layout: the dark sidebar and the content */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
aside{background:var(--side);color:var(--side-tx);padding:20px 14px;display:flex;flex-direction:column;gap:22px;position:sticky;top:0;height:100vh;z-index:6;overflow-y:auto}
.content{padding:22px 28px 40px;min-width:0}

/* brand: the site's mark, the site name and the page name */
.brand{display:flex;align-items:center;gap:10px;padding:0 8px;color:inherit;text-decoration:none}
.logo{width:30px;height:30px;border-radius:7px;background:var(--ac);color:var(--ac-tx);display:grid;place-items:center;flex:none}
.logo svg{width:18px;height:18px}
.brand .site{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--side-mu);line-height:1.3}
h1{font-size:15px;margin:0;font-weight:700;color:var(--side-h,#fff);letter-spacing:.01em;line-height:1.3}

/* sidebar menus: the Tools links (class "tool") and a page's own views (class "tab") */
.tabs{display:flex;flex-direction:column;gap:2px}
.tabs .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--side-mu);padding:0 10px 6px}
.tab,.tool{display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;border-radius:6px;background:none;color:var(--side-tx);font:inherit;font-size:13px;font-weight:500;cursor:pointer;text-align:left;text-decoration:none}
.tab svg,.tool svg{width:16px;height:16px;flex:none;opacity:.7}
.tab:hover,.tool:hover{background:var(--side-on)}
.tab.on,.tool.on{background:var(--side-on);color:var(--side-h,#fff);box-shadow:inset 3px 0 0 var(--ac)}.tab.on svg,.tool.on svg{opacity:1;color:var(--ac)}.tool.on{cursor:default}
.tab:focus-visible,.tool:focus-visible,.brand:focus-visible{outline:2px solid var(--ac);outline-offset:-2px}
/* the site menu (user, 2026-11-12): Drop Finder / Skill Library / Calculators; only the open section shows its sub menus */
.sec{display:flex;flex-direction:column;gap:2px}
.sec>.tool{font-weight:600}.sec>.tool.on{cursor:pointer}
.sec>.tool .chev{margin-left:auto;font-size:10px;opacity:.6}
.subs{display:flex;flex-direction:column;gap:1px;margin:2px 0 8px 14px;padding-left:8px;border-left:1px solid var(--bd)}
.subs .tab{padding:7px 10px;font-size:12.5px}
/* the calculators' header line: your character, its main stats, a link to My Character */
.hdr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:0 0 12px;padding:9px 14px;border:1px solid var(--bd);background:rgba(34,211,238,.04);font-size:12.5px;color:var(--mu)}
.hdr b,.hdr i{color:var(--tx);font-weight:600;font-style:normal}.hdr .hd-cls{color:var(--ac);font-weight:600}
#stats{margin-top:auto;font-size:11px;line-height:1.7;color:var(--side-mu);padding:0 10px;white-space:pre-line;cursor:help}
kbd{font:inherit;font-size:10px;border:1px solid var(--side-mu);border-radius:3px;padding:0 4px}
.howto{font-size:12px;line-height:1.5;color:var(--side-tx);padding:0 10px}.howto summary{cursor:pointer;list-style:none;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--side-mu)}.howto summary::-webkit-details-marker{display:none}.howto summary::before{content:'\25B8  '}.howto[open] summary::before{content:'\25BE  '}.howto summary:hover{color:var(--side-tx)}.howto ol{margin:8px 0 0;padding-left:16px}.howto li{margin-bottom:6px}.howto b{color:var(--ac);font-weight:600}

/* content parts */
h2{font-size:18px;margin:0 0 2px;font-weight:700;color:var(--tx)}
.sub{color:var(--mu);font-size:12px}
.bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;margin:0 0 12px;color:var(--mu);font-size:12px}
.bar label{display:flex;gap:6px;align-items:center;cursor:pointer}
.bar.me{background:var(--card);border:1px solid var(--bd);border-radius:8px;padding:10px 14px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
/* Your stats summary line (Skill Finder, Damage Calculator): the stats from My Stats and an Edit stats link */
.sum-i{white-space:nowrap}.sum-i i{font-style:normal;font-weight:600;color:var(--tx);font-variant-numeric:tabular-nums}
.sum-none{color:var(--mu)}.bar .sum-edit,.hdr .sum-edit{margin-left:auto;padding:4px 12px;border:1px solid var(--bd);border-radius:6px;color:var(--ac);font-size:12px;text-decoration:none;white-space:nowrap}
select{padding:6px 8px;border:1px solid var(--bd);border-radius:6px;background:var(--card);color:var(--tx);font:inherit;font-size:12px}
input[type=checkbox]{accent-color:var(--ac)}
input:focus,select:focus{outline:2px solid var(--ac);outline-offset:-1px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:8px;overflow-x:auto;box-shadow:0 1px 2px rgba(0,0,0,.04)}
table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:6px 12px;white-space:nowrap}
th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mu);font-weight:600;background:var(--card);border-bottom:1px solid var(--bd);user-select:none}
th[data-sort]{cursor:pointer}th[data-sort]:hover{color:var(--ac)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
td.n b{font-weight:700;color:var(--ac)}
.tag{font-size:11px;padding:1px 7px;border-radius:999px;background:var(--chip);color:var(--mu);font-weight:500}
.rid{color:var(--mu);font-size:11px;font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap}
.empty{padding:28px;text-align:center;color:var(--mu)}
.note{color:var(--mu);font-size:11px;margin-top:16px}
.load{background:var(--card);border:1px dashed var(--bd);border-radius:8px;padding:26px;text-align:center;margin-bottom:16px;color:var(--mu)}
.load b,.load code{color:var(--tx)}

/* the in-game style skill tooltip (assets/js/tooltip.js): the Skill Library and the Skill Ranking's hover (user, 2026-11-13) */
.tip{flex:none;width:270px;background:#15181c;color:#d6d9dd;border:1px solid #5b6068;border-radius:3px;padding:10px 12px;font-size:12.5px;line-height:1.4;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.tip-name{color:#5ee08a;text-align:center;font-weight:600}.tip-lv{color:#5ee08a;text-align:center;margin-bottom:8px}
.tip-desc{color:#b9bec5;padding:8px 0;border-top:1px solid #3a3f46}
.tip-sec{padding:8px 0;border-top:1px solid #3a3f46}.tip-me{color:#fff;font-weight:600}
.tip table.tip-hit{width:100%;font-size:11px;border-collapse:collapse}.tip-hit td{padding:1px 2px;border:0;background:none!important;text-align:right;color:#d6d9dd}.tip-hit td:first-child{text-align:left;color:#9aa0a8}.tip-req{color:#f0a232}
.tip-nav{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #3a3f46;padding-top:8px;color:#9aa0a8;font-size:11px}
.tip-nav button{background:#2a2f36;color:#d6d9dd;border:1px solid #5b6068;border-radius:3px;padding:2px 10px;cursor:pointer;font:inherit}.tip-nav button:disabled{opacity:.35;cursor:default}
.tip table.tip-kv{width:100%;border-collapse:collapse;font-size:12.5px}.tip-kv td{padding:2px 0;border:0;border-bottom:1px solid #262a30;background:none!important;color:#d6d9dd;vertical-align:top;white-space:normal}.tip-kv td:first-child{color:#9aa0a8;padding-right:10px;white-space:nowrap}.tip-kv td:last-child{text-align:right;font-weight:600}.tip-kv tr:last-child td{border-bottom:0}.tip-me .tip-kv td:last-child{color:#fff}.tip-kv .sub{font-weight:400;color:#9aa0a8;font-size:11px}
/* the game's skill icon at the top left of a tooltip, level with the green name (user, 2026-11-12); the name stays centred */
.tip-head{display:grid;grid-template-columns:38px 1fr 38px;align-items:center;gap:6px;margin-bottom:8px}.tip-titles{min-width:0}.tip-head .tip-lv{margin-bottom:0}
.tip-icon{display:block;width:38px;height:38px;border:1px solid #5b6068;border-radius:2px;image-rendering:auto}
.tip-part{color:#5ee08a;font-weight:600;margin-bottom:2px}#hover-tip{position:fixed;z-index:60;pointer-events:none}#hover-tip tr{background:none!important}#hover-tip .tip{box-shadow:0 8px 28px rgba(0,0,0,.6)}

/* footer at the bottom of every page */
.site-foot{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:space-between;border-top:1px solid var(--bd);margin-top:28px;padding-top:12px;color:var(--mu);font-size:11px}
.site-foot b{color:var(--tx);font-weight:600}

/* phones and narrow windows: the sidebar becomes a row at the top */
@media (max-width:760px){
  .shell{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  aside{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;align-content:flex-start;gap:10px;padding:10px 12px}
  .tabs{flex-direction:row;flex-wrap:wrap}.tabs .lbl{display:none}
  .sec{flex-direction:row;flex-wrap:wrap;align-items:center}.subs{flex-direction:row;flex-wrap:wrap;margin:0 0 0 4px;padding-left:6px}.sec>.tool .chev{display:none}
  .tab,.tool{padding:7px 10px}
  #stats{display:none}
  .content{padding:14px 16px 32px}
}

/* big screens (user, 2026-11-08: "perfect in 1080p, bigger text for 1440p"): the whole page is enlarged, so a 1440p
   screen shows the same layout as 1080p, just larger. --z = the zoom, so full-height parts still fit the window */
@media (min-width:2200px){:root{--z:1.25}}
@media (min-width:2450px){:root{--z:1.3333}}
@media (min-width:2200px){
  html{zoom:var(--z)}
  .shell{min-height:calc(100vh / var(--z))}
  aside{height:calc(100vh / var(--z))}
}