/* Layout: a sidebar of tabs (a sticky tab bar on narrow screens) next to one column of cards. Tokens first, then the shell,
   controls, cards, tables, and the per-table rules the scripts rely on. */
:root{
  --bg:#f5f5f7; --surface:#ffffff; --raised:#fafafc; --field:#ffffff; --fg:#14121c; --muted:#6c6a7a; --line:#e8e7ee; --line-strong:#d6d4df; --grid:#f1f0f5;
  --accent:#6a55f5; --accent-2:#e2457f; --accent-fg:#ffffff; --accent-soft:rgba(106,85,245,.10); --good:#15803d; --warn:#b45309; --bad:#dc2626;
  --brand:linear-gradient(135deg,var(--accent),var(--accent-2));
  /* buttons keep the deep gradient in both themes so white text stays readable */
  --brand-btn:linear-gradient(135deg,#6a55f5,#d63b76);
  --glow-a:rgba(106,85,245,.10); --glow-b:rgba(226,69,127,.07);
  --shadow:0 1px 2px rgba(20,18,40,.04),0 6px 18px -10px rgba(20,18,40,.12); --shadow-pop:0 14px 40px -6px rgba(20,18,40,.22);
  /* the sidebar follows the theme: white in light, ink in dark */
  --side-bg:#ffffff; --side-fg:#3b3949; --side-muted:#8a8898; --side-strong:#14121c; --side-line:rgba(20,18,40,.08); --side-line-strong:rgba(20,18,40,.16);
  --side-hover:rgba(20,18,40,.045); --side-on:rgba(106,85,245,.10); --side-on-ic:#6a55f5; --side-field:rgba(20,18,40,.03);
  --display:"Bricolage Grotesque","Inter",system-ui,sans-serif; --body:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",ui-monospace,monospace;
  --r:10px; --side:220px;
  --ew-bg:#fbfcfe; --ew-head:linear-gradient(#ffffff,#e3e8f1); --ew-tabbar:#e8ecf3; --ew-line:#c5ccdb; --ew-slot:#e6ebf5; --ew-slot-hover:#d5def0; --ew-slot-empty:#eef1f7; --ew-floor:rgba(30,40,70,.16);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d0c12; --surface:#15141c; --raised:#1a1922; --field:#111017; --fg:#ecebf3; --muted:#8e8ba0; --line:#25232f; --line-strong:#34313f; --grid:#1d1c26;
  --accent:#9f90ff; --accent-2:#ff6fa5; --accent-fg:#0d0c12; --accent-soft:rgba(159,144,255,.14); --good:#4ade80; --warn:#fbbf24; --bad:#f87171;
  --glow-a:rgba(159,144,255,.10); --glow-b:rgba(255,111,165,.06);
  --side-bg:#09080d; --side-fg:#d9d7e4; --side-muted:#7d7a8f; --side-strong:#ffffff; --side-line:rgba(255,255,255,.06); --side-line-strong:rgba(255,255,255,.14);
  --side-hover:rgba(255,255,255,.06); --side-on:rgba(143,128,255,.16); --side-on-ic:#b9adff; --side-field:rgba(255,255,255,.04);
  --ew-bg:#14131c; --ew-head:linear-gradient(#24232f,#1a1924); --ew-tabbar:#191822; --ew-line:#302e3c; --ew-slot:#222030; --ew-slot-hover:#2c2a3c; --ew-slot-empty:#1b1a25; --ew-floor:rgba(0,0,0,.45);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset; --shadow-pop:0 14px 40px rgba(0,0,0,.55); color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0d0c12; --surface:#15141c; --raised:#1a1922; --field:#111017; --fg:#ecebf3; --muted:#8e8ba0; --line:#25232f; --line-strong:#34313f; --grid:#1d1c26;
  --accent:#9f90ff; --accent-2:#ff6fa5; --accent-fg:#0d0c12; --accent-soft:rgba(159,144,255,.14); --good:#4ade80; --warn:#fbbf24; --bad:#f87171;
  --glow-a:rgba(159,144,255,.10); --glow-b:rgba(255,111,165,.06);
  --side-bg:#09080d; --side-fg:#d9d7e4; --side-muted:#7d7a8f; --side-strong:#ffffff; --side-line:rgba(255,255,255,.06); --side-line-strong:rgba(255,255,255,.14);
  --side-hover:rgba(255,255,255,.06); --side-on:rgba(143,128,255,.16); --side-on-ic:#b9adff; --side-field:rgba(255,255,255,.04);
  --ew-bg:#14131c; --ew-head:linear-gradient(#24232f,#1a1924); --ew-tabbar:#191822; --ew-line:#302e3c; --ew-slot:#222030; --ew-slot-hover:#2c2a3c; --ew-slot-empty:#1b1a25; --ew-floor:rgba(0,0,0,.45);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset; --shadow-pop:0 14px 40px rgba(0,0,0,.55); color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:14px;line-height:1.5;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}

/* ---- shell: sidebar + main column ---- */
.app{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh;
  background:linear-gradient(90deg,var(--side-bg) var(--side),transparent var(--side)),
    radial-gradient(900px 420px at 85% -120px,var(--glow-a),transparent 70%),radial-gradient(700px 360px at 30% -160px,var(--glow-b),transparent 70%)}
.side{position:sticky;top:0;z-index:7;height:100vh;display:flex;flex-direction:column;gap:6px;padding:20px 12px 14px;background:var(--side-bg);color:var(--side-fg);box-shadow:inset -1px 0 0 var(--side-line);overflow-y:auto;scrollbar-width:none}
.brand{display:flex;align-items:center;gap:11px;padding:0 8px 12px}
.logo{flex:none;width:40px;height:38px;margin:-2px -1px -2px -3px;filter:drop-shadow(0 4px 10px rgba(226,69,127,.3))}
.brandTxt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brandTxt b{font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:-.02em;color:var(--side-strong)}
.brandTxt span{font-size:11px;color:var(--side-muted);letter-spacing:.02em}
.tabs{display:flex;flex-direction:column;gap:2px}
.tabs .navGrp{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--side-muted);padding:16px 12px 6px;opacity:1;justify-content:space-between;border-radius:9px}
.tabs .navGrp:hover{color:var(--side-fg);background:none}
/* a sidebar group's heading folds its tabs away (saved per device); the open tab stays showing */
.navChev{width:13px;height:13px;transition:transform .15s}
.tabs button{position:relative;display:flex;align-items:center;gap:11px;width:100%;border:0;background:none;border-radius:9px;padding:8px 12px;color:var(--side-fg);opacity:.78;font-weight:500;text-align:left;white-space:nowrap;transition:background .15s,opacity .15s,color .15s}
.tabs button:hover{opacity:1;background:var(--side-hover)}
.tabs button[aria-selected="true"]{opacity:1;color:var(--side-strong);background:var(--side-on);font-weight:600}
.tabs button[aria-selected="true"]::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--brand)}
.tabs button[aria-selected="true"] .ic{color:var(--side-on-ic)}
.ic{flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* ---- the main nav's levels (js/start.js setupNav): groups (.navSec: a heading and its tabs), the open tab's sections (.navSubs) ---- */
.navSec{display:flex;flex-direction:column}
.navItems{display:flex;flex-direction:column;gap:2px}
.navChev{transition:transform .15s}
.navSubs{display:flex;flex-direction:column;gap:1px;margin:2px 0 6px 23px;padding-left:10px;border-left:1px solid var(--side-line)}
.navSubs a{display:block;padding:4px 10px;border-radius:7px;color:var(--side-muted);font-size:12.5px;font-weight:500;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.navSubs a:hover{color:var(--side-fg);background:var(--side-hover)}
.navSubs a[aria-current]{color:var(--side-on-ic);background:var(--side-on)}
@media (min-width:1024px){
  /* a desktop window: the sidebar. The open tab's group is listed with its sections; another group folds to its heading, which
     unfolds it in place (.exp; .shut folds the open tab's group) */
  :root:not(.compact) .navSec:not(:has([aria-selected="true"])):not(.exp)>.navItems,:root:not(.compact) .navSec.shut>.navItems{display:none}
  :root:not(.compact) .navSec:not(:has([aria-selected="true"])):not(.exp)>.navGrp .navChev,:root:not(.compact) .navSec.shut>.navGrp .navChev{transform:rotate(-90deg)}
  /* the sections are in the sidebar, so not again beside or above the cards */
  :root:not(.compact) .wrap.hasPageNav{display:flex}
  :root:not(.compact) #pageNav,:root:not(.compact) .secNav[aria-label="Character sections"]{display:none}
}
/* a narrower window or a phone: Home and a menu for each group along the top */
@media (max-width:1023px){
  .navSec{display:block}
  .tabs .navSec>.navGrp{display:flex;font-size:inherit;font-weight:500;letter-spacing:0;text-transform:none;justify-content:flex-start;gap:4px;padding:7px 8px 7px 12px;color:var(--muted)}
  .tabs .navSec>.navGrp:hover,.tabs .navSec.open>.navGrp{color:var(--fg);background:var(--grid)}
  .tabs .navSec:has([aria-selected="true"])>.navGrp{color:var(--accent);background:var(--accent-soft)}
  .navSec.open>.navGrp .navChev{transform:rotate(180deg)}
  .navSec>.navItems{display:none;position:fixed;z-index:40;min-width:220px;max-width:calc(100vw - 16px);padding:6px;border-radius:12px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-pop)}
  .navSec.open>.navItems{display:flex}
  .tabs .navItems button{width:100%;justify-content:flex-start}
  .navItems .ic{display:inline-block!important}
  .tabs .navGrp .navChev{display:inline-block!important}
  .navSubs{display:none}
}
.sideFoot{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:1px solid var(--side-line)}
.iconBtn{display:flex;align-items:center;gap:11px;border:0;background:none;padding:7px 12px;border-radius:9px;color:var(--side-muted);font-weight:500;font-size:13px;text-align:left}
.iconBtn:hover{color:var(--side-fg);background:var(--side-hover);border:0}
/* Settings (sidebar foot): a menu that opens upward, with the hints, theme and full width switches */
.setMenu{width:100%}
.setMenu>.menuBtn{width:100%;padding:7px 12px;font-weight:500;letter-spacing:0}
.setMenu>.menuBtn[aria-expanded="true"]{color:var(--side-fg);background:var(--side-hover)}
.setMenu .menuList:not([hidden]){top:auto;bottom:calc(100% + 6px);left:0;right:auto;min-width:13em}
.setMenu .menuList button{display:flex;align-items:center;gap:10px}
.setMenu .menuList [aria-pressed="true"] .ic{color:var(--accent)}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 36px 72px;display:flex;flex-direction:column;gap:20px;min-width:0}
/* the session you're on, pinned over every tab */
.main{min-width:0}
/* the top bar: your EXP rate and the Log EXP box, on the right */
.ctxIn{max-width:1180px;margin:0 auto;padding:12px 36px;display:flex;align-items:center;justify-content:flex-end;gap:6px 10px;flex-wrap:wrap}
:root.wide .ctxIn{max-width:none}
/* the top bar shows only with something in it: your EXP %/hr line or the paused note */
.ctxBar:not(:has(#ctxRate:not([hidden]),#pauseNote:not([hidden]))){display:none}
.ctxBar{position:sticky;top:0;z-index:6;font-size:13px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.ctxBar b{font-weight:600}
#pauseNote{flex-basis:100%;color:var(--warn);font-weight:600;font-size:12.5px}
.pageHead{display:flex;flex-direction:column;gap:6px;padding:26px 0 6px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent;width:fit-content}
.pageHead h1{font-size:2.35rem;font-weight:800;letter-spacing:-.035em;line-height:1.05}
.pageHead p{margin:4px 0 0;max-width:62ch;color:var(--muted);font-size:14.5px;text-wrap:pretty}
/* Full width (Settings menu): drop the 1180px cap on wide screens */
:root.wide .wrap{max-width:none}
@media (max-width:1480px){#wideBtn{display:none}}
/* compact sidebar (sidebar button): icons only, labels kept for screen readers and shown as tooltips */
#sideBtn[aria-pressed="true"] .ic{transform:scaleX(-1)}
@media (min-width:1024px){
  :root.compact{--side:64px}
  .compact .side{padding-inline:10px;align-items:center}
  .compact .brand{padding:2px 0 10px}
  .compact .brandTxt,.compact .tabs button span,.compact .iconBtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .compact .tabs{width:100%}
  .compact .tabs .navGrp{font-size:0;padding:0;margin:8px 10px;height:1px;width:auto;background:var(--side-line);pointer-events:none}
  .compact .navGrp>*{display:none}
  .compact .tabs button,.compact .iconBtn{justify-content:center;padding:10px 0;width:100%}
  .compact .sideFoot{width:100%}
  /* fixed: the sidebar scrolls (overflow), which would clip a menu beside it. .side's z-index keeps it over the sticky cards */
  .compact .setMenu .menuList:not([hidden]){position:fixed;top:auto;bottom:14px;left:calc(var(--side) + 8px)}
}
@media (max-width:1023px){
  .app{grid-template-columns:minmax(0,1fr) auto;min-height:0;background:none}
  .side{display:contents}
  .brand{grid-column:1;grid-row:1;padding:12px 16px 8px}
  .brandTxt b{color:var(--fg)}.brandTxt span{color:var(--muted)}
  .sideFoot .iconBtn{color:var(--muted)}
  .sideFoot{grid-column:2;grid-row:1;flex-direction:row;align-items:center;margin:0;padding:8px 12px 4px;border:0}
  .sideFoot .iconBtn span{display:none}
  .setMenu{width:auto}.setMenu .menuList:not([hidden]){top:calc(100% + 6px);bottom:auto;left:auto;right:0}
  #sideBtn{display:none}
  .tabs{grid-column:1/-1;position:sticky;top:0;z-index:5;flex-direction:row;gap:4px;overflow-x:auto;scrollbar-width:none;padding:8px 16px;background:var(--bg);border-bottom:1px solid var(--line)}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{width:auto;flex:none;padding:7px 12px;gap:7px;color:var(--muted);opacity:1}
  .tabs button:hover{color:var(--fg);background:var(--grid)}
  .tabs button[aria-selected="true"]{color:var(--accent);background:var(--accent-soft)}
  .tabs button[aria-selected="true"]::before{display:none}
  .tabs button[aria-selected="true"] .ic{color:var(--accent)}
  .app{background:radial-gradient(700px 300px at 80% -100px,var(--glow-a),transparent 70%)}
  .ctxBar{position:static;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0}
  .ctxIn{padding:10px 16px 0}
  .pageHead{padding-top:14px}.pageHead h1{font-size:1.85rem}
  .main{grid-column:1/-1}
  .wrap{padding:0 16px 48px;gap:16px}
}
@media (max-width:520px){.tabs .ic{display:none}}

/* ---- type ---- */
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:1.55rem;font-weight:700;letter-spacing:-.025em;line-height:1.25}
h2{font-size:1.08rem;font-weight:700;letter-spacing:-.02em}
h3{font-size:.95rem;font-weight:700;margin-top:8px}
.muted{color:var(--muted)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.note{font-size:12.5px;color:var(--muted)}
.note b{color:var(--fg);font-weight:600}
a{color:var(--accent);text-underline-offset:2px}
.ext{font-size:12.5px;text-decoration:none;margin-left:4px;font-weight:500}
.good{color:var(--good)}.bad{color:var(--bad)}.warnc{color:var(--warn)}
.example{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--warn)}

/* ---- rows and helpers ---- */
.bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bar .grow{flex:1 1 160px;min-width:0}
.fill{flex:1;min-width:0}
.full{flex-basis:100%}
.mt{margin-top:6px}
.w-2xs{width:50px}.w-xs{width:60px}.w-sm{width:70px}.w-md{width:82px}.w-lg{width:96px}.w-xl{width:132px}.w-btn{min-width:6.5em}.w-2xl{width:150px}.w-3xl{width:180px}
.grow200{flex:1;min-width:200px}.pbName{min-width:250px}.colList{flex-wrap:wrap;gap:4px 14px;margin-top:6px}
.pickLbl{flex:none;width:4.5em}
/* account and session pickers stay on one line with their buttons, down to phone width */
.bar .pickLbl~.grow{flex-basis:0}

/* ---- controls ---- */
input,select,button,textarea{font:inherit;color:var(--fg)}
input,select{background:var(--field);border:1px solid var(--line-strong);border-radius:8px;padding:6px 10px;min-width:0;font-size:13.5px;line-height:1.45;transition:border-color .12s,box-shadow .12s}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.75}
input:hover:not(:disabled),select:hover:not(:disabled),textarea:hover{border-color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
select{appearance:none;-webkit-appearance:none;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238c94a4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;cursor:pointer}
input[type=checkbox],input[type=radio]{width:15px;height:15px;margin:0;padding:0;flex:none;accent-color:var(--accent);cursor:pointer;box-shadow:none}
input:disabled,select:disabled{opacity:.7;background-color:var(--bg);cursor:not-allowed}
button:focus-visible,summary:focus-visible,h2[role=button]:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
button{background:var(--surface);border:1px solid var(--line-strong);border-radius:8px;padding:6px 13px;cursor:pointer;font-weight:550;font-size:13.5px;line-height:1.45;transition:background .12s,border-color .12s,color .12s}
button:hover{background:var(--grid);border-color:var(--muted)}
button:disabled{opacity:.55;cursor:default}
button.primary{background:var(--brand-btn);border-color:transparent;color:#fff;box-shadow:0 6px 16px -6px color-mix(in srgb,var(--accent) 70%,transparent),inset 0 1px 0 rgba(255,255,255,.18)}
button.primary:hover{filter:brightness(1.07) saturate(1.05);background:var(--brand-btn);border-color:transparent}
button.primary:active{transform:translateY(1px)}
button.danger{color:var(--bad)}
button.danger:hover{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 8%,transparent)}
button.small{padding:3px 9px;font-size:12.5px;border-radius:7px}
label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:500;color:var(--muted);min-width:0}
/* tick boxes and inline fields: label and control on one line */
label.bar{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:6px;font-weight:400}
.check-top{flex-direction:row;gap:8px;align-items:flex-start}
.check-top input{margin-top:2px}
textarea,.mono-area{font-family:var(--mono);font-size:12.5px;background:var(--field);color:var(--fg);border:1px solid var(--line-strong);border-radius:8px;padding:8px 10px;resize:vertical;width:100%}
details>summary{cursor:pointer}
details.note>summary{color:var(--fg);font-weight:500;width:fit-content}
details.note>summary::marker{color:var(--muted)}
/* account and session ⋯ menus: the secondary account and session actions open in a small list under the button */
.menu{position:relative;flex:none}
.editBtn{flex:none;-webkit-tap-highlight-color:transparent;padding:6px 11px}
/* New account / New session: a + button beside the picker */
.addBtn{flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 9px;font-weight:600;white-space:nowrap}
.addBtn .ic{width:15px;height:15px;stroke-width:2.2}
@media (max-width:520px){.addBtn{padding:6px 9px}.addBtn span{display:none}}
.menuBtn{-webkit-tap-highlight-color:transparent;padding:6px 12px;font-weight:700;letter-spacing:.05em}
.menuBtn[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.menuList:not([hidden]){position:absolute;right:0;top:calc(100% + 6px);z-index:20;display:flex;flex-direction:column;min-width:11em;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-pop)}
.menuList button{border:0;border-radius:6px;background:none;text-align:left;padding:7px 10px;white-space:nowrap;font-weight:500}
.menuList button:hover:not(:disabled),.menuList button:focus-visible{background:var(--grid)}
.menuList button:disabled{color:var(--muted);opacity:.6}
/* segmented switch */
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:9px;background:var(--grid);border:1px solid var(--line)}
.seg button{border:0;border-radius:7px;padding:5px 12px;background:none;color:var(--muted);font-weight:550}
.seg button:hover{color:var(--fg);background:none}
.seg button[aria-checked="true"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 2px rgba(16,24,40,.12)}

/* ---- cards ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:flex;flex-direction:column;gap:14px;min-width:0;box-shadow:var(--shadow)}
.cardHead{margin:-18px -20px 0;padding:16px 20px 14px;border-bottom:1px solid var(--line)}
.cardHead .note{font-size:12px}
/* collapsible cards: click the heading; everything but the heading row hides */
.card h2[aria-expanded]{cursor:pointer;user-select:none;display:flex;align-items:center;gap:8px}
.card h2[aria-expanded]::before{content:"";flex:none;width:7px;height:7px;margin:0 3px 2px 2px;border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.card h2[aria-expanded="false"]::before{transform:rotate(-45deg);margin-bottom:0}
.card.collapsed{align-self:start;padding-bottom:0}
.card.collapsed>.cardHead{border-bottom-color:transparent}
.card.collapsed>:not(.cardHead){display:none}
/* panels inside a card (Equipment stats, Attack details…): a tinted box whose summary folds it */
details.sub{background:var(--raised);border-radius:12px;padding:0 16px 16px;gap:10px;box-shadow:none}
details.sub:not([open]){padding-bottom:0}
details.sub>summary{list-style:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;padding:13px 0 3px;margin:0}
details.sub:not([open])>summary{padding-bottom:13px}
details.sub>summary::-webkit-details-marker{display:none}
details.sub>summary::before{content:"";align-self:center;width:6px;height:6px;margin-right:2px;border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
details.sub:not([open])>summary::before{transform:rotate(-45deg)}
details.sub>summary>b{font-weight:650}
details.sub details.sub{background:var(--surface)}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.row2>.card{align-self:start}
@media (max-width:760px){.row2{grid-template-columns:1fr}}
.build{display:flex;flex-direction:column;gap:10px}
.eqlist{display:flex;flex-direction:column;gap:6px}

/* ---- form grids ---- */
.form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;align-items:end}
.form.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.form.c5{grid-template-columns:repeat(5,minmax(0,1fr))}
.form.c6{grid-template-columns:repeat(6,minmax(0,1fr))}
.form.c7{grid-template-columns:repeat(7,minmax(0,1fr))}
/* Job & level: the Job and Attack pickers get room for their names (they read "Novic…" and "Basic a…") */
#basicsPanel>.form.c7{grid-template-columns:minmax(0,1.4fr) minmax(0,1.9fr) repeat(5,minmax(0,1fr))}
.form.c211{grid-template-columns:2fr 1fr 1fr}
.form.cfill{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.span-all{grid-column:1/-1}.span3{grid-column:span 3;align-self:end}.span-rest{grid-column:2/-1;align-self:center}
#bonusRow{grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
@media (max-width:900px){#basicsPanel>.form.c7,.form.c6,.form.c7{grid-template-columns:repeat(3,minmax(0,1fr))}.form.c5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){#basicsPanel>.form.c7,.form.c4,.form.c5,.form.c6,.form.c7,.form.c211{grid-template-columns:repeat(2,minmax(0,1fr))}#bonusRow{grid-template-columns:1fr}
  .form.c211>:first-child,.span3,.span-rest{grid-column:1/-1}}

/* ---- stat tiles ---- */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.calc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.tile{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px 18px 16px;min-width:0;box-shadow:var(--shadow);transition:transform .18s,box-shadow .18s}
.tiles .tile:hover{transform:translateY(-1px);box-shadow:var(--shadow),0 10px 24px -14px rgba(20,18,40,.25)}
.calc .tile{background:var(--raised);box-shadow:none}
/* the tiles that matter now get a gradient edge and a soft wash */
.tile.now{border-color:transparent;background:linear-gradient(160deg,var(--accent-soft),transparent 60%) padding-box,linear-gradient(var(--surface),var(--surface)) padding-box,var(--brand) border-box}
.tile .k{font-size:10.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.tile .v{font-family:var(--display);font-size:1.85rem;font-weight:700;letter-spacing:-.03em;line-height:1.2;margin-top:6px;font-variant-numeric:tabular-nums;white-space:pre-line}
.tile .v.mono{font-family:var(--mono);letter-spacing:-.03em}
.tile .s{font-size:12px;color:var(--muted);margin-top:3px}
.calc .v{font-size:1.25rem}
@media (max-width:680px){.calc,.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tile .v{font-size:1.3rem}.tile{padding:12px 14px}}

/* ---- charts ---- */
.chart{width:100%;height:auto;display:block}
.chart text{fill:var(--muted);font-family:var(--mono);font-size:11px}
/* no entries: one line of hint, sized for the chart's width */
.chart.empty text{font-family:var(--body);font-size:13px}
@media (max-width:700px){.chart.empty text{font-size:26px}}
.chartWrap{position:relative;display:flex;flex-direction:column;gap:12px}
.tip{position:absolute;z-index:2;pointer-events:none;transform:translate(-50%,calc(-100% - 12px));background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:12px;line-height:1.45;white-space:nowrap;box-shadow:var(--shadow-pop)}
.tip b{font-family:var(--display);font-weight:600}

/* ---- tables ---- */
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.scroll.tall{max-height:70vh;overflow:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
th{font-weight:650;color:var(--muted);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;user-select:none;background:var(--raised)}
th:hover{color:var(--fg)}
th.on{color:var(--accent)}
tbody tr:last-child td{border-bottom:0}
td{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:12.5px}
td.name{font-family:var(--body);font-size:13px}
td.muted{color:var(--muted)}
tbody tr{cursor:pointer}
tbody tr:hover td{background:var(--grid)}
tr.sel td,tr.sel:hover td{background:var(--accent-soft)}
/* long monster list: scroll inside the card with the header and filters pinned */
.scroll.tall thead{position:sticky;top:0;z-index:1;background:var(--raised)}
.filters td{padding:5px 4px;border-bottom:1px solid var(--line);background:var(--raised)}
.filters input,.filters select{width:100%;min-width:56px;padding:3px 7px;font-size:12px;font-family:var(--mono);border-radius:6px}
.filters select{padding-right:22px;background-position:right 7px center}
.filters td:first-child input{min-width:90px}
tr.filters:hover td{background:var(--raised)}
.pill{display:inline-block;font-size:11px;font-weight:500;padding:1px 8px;border-radius:99px;border:1px solid var(--line-strong);color:var(--muted);font-family:var(--body)}
.pill.up{color:var(--good);border-color:color-mix(in srgb,var(--good) 50%,transparent);background:color-mix(in srgb,var(--good) 8%,transparent)}
.fchip{margin:4px 0}.fchip b{font-weight:600}
.pill.down{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 50%,transparent);background:color-mix(in srgb,var(--warn) 8%,transparent)}
.el{display:inline-block;font-family:var(--body);font-size:11.5px;font-weight:500;padding:1px 8px;border-radius:99px;background:var(--grid);color:var(--fg)}
.el.Fire{background:rgba(226,92,58,.18)}.el.Water{background:rgba(56,132,226,.18)}.el.Wind{background:rgba(70,180,120,.2)}.el.Earth{background:rgba(160,120,60,.22)}.el.Undead,.el.Shadow{background:rgba(120,90,160,.2)}.el.Ghost{background:rgba(150,150,170,.22)}.el.Poison{background:rgba(150,80,170,.2)}.el.Holy{background:rgba(220,190,60,.24)}
.map{display:inline-flex;gap:4px;align-items:baseline;font-family:var(--mono);font-size:12px;padding:2px 8px;border-radius:6px;border:1px solid var(--line-strong);background:var(--surface);cursor:pointer}
.map:hover{border-color:var(--accent)}
.map b{font-weight:500;color:var(--fg)}.map span{color:var(--muted)}
.map.off{opacity:.45;text-decoration:line-through}
.maps{display:flex;flex-wrap:wrap;gap:6px}
td .map{cursor:default}

/* ---- per-table rules ---- */
#bestTable td b{font-weight:600}
#bestTable td.mainmobs{white-space:normal;min-width:170px;line-height:1.35}
#bestTable td{vertical-align:top}
#huntTable td{vertical-align:top}
/* Compare sessions: long session names and monster lists wrap instead of widening the table */
#cmpTable th:nth-child(3),#cmpTable td:nth-child(1),#cmpTable td:nth-child(3){white-space:normal;text-align:left;min-width:120px;max-width:180px;line-height:1.35}
#cmpTable td:nth-child(1){max-width:150px}#cmpTable .filters input{min-width:40px}
#huntTable td.mainmobs{white-space:normal;min-width:200px;line-height:1.35;text-align:left}
#itemTable td.name{text-align:left}
#huntTable a.hpick{text-decoration:none;color:var(--fg)}
#huntTable .hpick.off{color:var(--muted);text-decoration:line-through}
#huntTable .drop.off a{color:var(--muted)}
#goalTable tbody tr{cursor:default}
/* entries table: pauses are rows of their own; ✎ edits a row in place */
#logTable tr.pauseRow td{color:var(--warn);font-size:12.5px;white-space:normal}
#logTable tbody tr[data-t]{cursor:default}
#logTable td.acts{white-space:nowrap;text-align:right}
#logTable tr.editRow td{vertical-align:middle}
#logTable tr.editRow input{padding:3px 6px;font-size:13px}
#logTable tr.editRow input[type="number"]{width:5.5em}
#logTable tr.editRow input[data-f="lv"],#logTable tr.editRow input[data-f="jlv"]{width:4em}
#logMsg{color:var(--bad)}
#logMsg:empty{display:none}
#chart .pauseMark{cursor:pointer}
#chart text.deathMark{font-size:13px;fill:var(--bad)}
/* build simulator gear grid */
#roadmapTable th,#roadmapTable td{text-align:left;vertical-align:top}
#roadmapTable th{cursor:default}
#roadmapTable td:nth-child(4){white-space:normal;min-width:240px}
#roadmapTable .maps{min-width:180px;max-width:320px}
#roadmapTable tbody tr.muted td{color:var(--muted)}
/* Memorials tab: tables read left to right, reward lists stack in their cell */
#memTable th,#memTable td,#expTable th,#expTable td,#jelloTable th,#jelloTable td,#memNpcTable th,#memNpcTable td{text-align:left;vertical-align:top;cursor:default}
#memTable td:nth-child(4),#memTable td:nth-child(5){white-space:normal;min-width:200px}
#memTable tbody tr,#expTable tbody tr,#jelloTable tbody tr,#enchTable tbody tr,#memNpcTable tbody tr{cursor:default}
#memNpcTable td:nth-child(3){white-space:normal;min-width:220px}
#jelloCraft{flex-wrap:wrap}
#enchSpirits div{margin-top:2px}
/* Stellar tab: tables read left to right, lists stack in their cell */
#starTable th,#starTable td,#starRulesTable th,#starRulesTable td,#starNpcTable th,#starNpcTable td{text-align:left;vertical-align:top;cursor:default}
#starTable tbody tr,#starRulesTable tbody tr,#starNpcTable tbody tr{cursor:default}
#starNpcTable td:nth-child(3){white-space:normal;min-width:220px}
#starTable td div{margin:2px 0}
#starTable td:nth-child(5){white-space:normal;min-width:260px}
.navi{user-select:all}
#gearTable td,#specialTable td{vertical-align:middle;font-family:var(--body)}
#gearTable th,#specialTable th{text-align:left}
#gearTable td:first-child,#specialTable td:first-child{color:var(--muted);font-size:12px}
#gearTable input,#specialTable input:not([type=checkbox]){padding:4px 8px;font-size:13px;width:100%}
#gearTable .item,#specialTable .item{min-width:220px}
#gearTable .ref{width:64px}
#specialTable .itemBox>select{flex:1;width:240px;padding:4px 26px 4px 8px;font-size:13px}
#specialTable .ownOn{display:flex;align-items:center;gap:8px;white-space:nowrap}
#specialTable .ownOn>label{display:flex;flex-direction:row;align-items:center;gap:6px}
#gearTable .opts,#specialTable .opts{display:flex;flex-direction:column;gap:4px;min-width:250px}
#gearTable .opt,#specialTable .opt{display:flex;gap:6px}
#gearTable .opt select,#specialTable .opt select{flex:1;min-width:0;padding:4px 26px 4px 6px;font-size:13px}
#gearTable .opt input,#specialTable .opt input{width:72px;flex:none}
/* a Job Essence's effect wraps to the width of its list instead of stretching the table */
#gearTable .essFx{white-space:normal;width:0;min-width:100%;text-align:left}
#enchTable td.name,#enchFxHead{text-align:left}
#enchTable .enchFx{white-space:normal;min-width:320px}
#gearTable .cards{display:flex;gap:6px;min-width:180px}
#gearTable .cards input{min-width:140px}
#gearTable tbody tr,#gearTable tbody tr:hover td,#specialTable tbody tr,#specialTable tbody tr:hover td{cursor:default;background:none}
#buildPanel.altedit :is(#gearTable,#specialTable){background:var(--accent-soft)}
/* card tick boxes: one card per line, its numbers only while ticked */
.cdList{display:flex;flex-direction:column;gap:6px;margin:4px 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.cdHead{margin-bottom:2px}
.cdItem{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding-left:4px}
.cdItem>label{min-width:150px}
.cdOpts{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.eqrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.eqrow select,.eqrow input{padding:4px 8px;font-size:13px}
.eqrow select{padding-right:26px}
.eqrow input[type=number]{width:72px}
/* consumables: one row per stat, + and +% */
table.cstats{width:auto}
table.cstats th{cursor:default}
table.cstats td{padding:3px 8px}
table.cstats input{width:72px;padding:4px 8px;font-size:13px}
table.cstats tbody tr,table.cmptab tbody tr{cursor:default}
/* skill tree: one grid per job tier, 7 columns like the game window */
.trees{display:flex;flex-wrap:wrap;gap:16px}
.tree{flex:1 1 100%;min-width:0;display:flex;flex-direction:column;gap:6px}
.skgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
/* like the game's skill window: name, then icon, then level, centred; names get two lines (the tooltip has them whole) */
.sk{border:1px solid var(--line);border-radius:8px;padding:5px 4px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:3px;min-width:0;text-align:center;background:var(--surface)}
.sk:not(.on)>.ico{opacity:.55}
.sk.empty{border:0;background:none}
.sk.on{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:var(--accent-soft)}
.sk.pas .nm{font-style:italic}
/* quest skills (no skill points): a small tag in the corner */
.sk.quest,.sk:has(>.qtag){position:relative}
.sk .qtag{position:absolute;top:-6px;right:3px;font-size:9px;line-height:1;padding:2px 4px;border-radius:4px;background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.sk .nm{order:-1;width:100%;height:2.5em;display:flex;align-items:center;justify-content:center;overflow:hidden;border:0;background:none;padding:0;font-size:11px;font-weight:500;line-height:1.25;text-align:center;overflow-wrap:break-word;hyphens:auto;min-width:0;color:var(--fg)}
.sk .lv{display:flex;align-items:center;justify-content:center;gap:2px;font-size:11px}
.sk .lv button{border:0;background:none;padding:0 4px;color:var(--muted)}
.sk .lv button:hover{color:var(--accent)}
/* skills the job change gives: the name reads as usual, and there's no − / + */
.sk .nm:disabled{opacity:1}
.sk .lv button:disabled{visibility:hidden}
#skillCard,#skpCard{position:relative}
.sktip{position:absolute;z-index:3;pointer-events:none;width:max-content;max-width:min(360px,calc(100% - 16px));background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.45;box-shadow:var(--shadow-pop);display:flex;flex-direction:column;gap:4px}
.sktip[hidden]{display:none}
.sktip b{font-family:var(--display);font-weight:600}
.sktip p{margin:0}
@media (max-width:680px){.skgrid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.sk.empty{display:none}}
/* EXP & formulas tab: reference tables, rows aren't clickable */
#refBaseTable tbody tr,#refJobTable tbody tr,#refFormulas tbody tr,#refElemTable tbody tr,#refSizeTable tbody tr,#refPartyTable tbody tr{cursor:default}
#refFormulas td.f{white-space:normal;text-align:left;font-size:12.5px;min-width:260px}
#refFormulas th:nth-child(2){text-align:left}
/* with the other gear set's column, the two value columns wrap so the table fits */
#refFormulas.withalt td:nth-child(n+3){white-space:normal;min-width:90px;max-width:200px}#refFormulas.withalt td.f{min-width:200px}
#refFormulas .fn{font-family:var(--body);font-size:12px;color:var(--muted);margin-top:2px}
#refFormulas tr.grp td,#gearCmpTable tr.grp td{font-family:var(--display);font-weight:650;color:var(--muted);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding-top:16px;text-align:left;background:none}
#refElemTable td,#refSizeTable td{text-align:center}#refElemTable th,#refSizeTable th{text-align:center}
#refElemTable th:first-child,#refSizeTable th:first-child,#refElemTable td:first-child,#refSizeTable td:first-child{text-align:left}
[data-tab="ref"] .row2>*{min-width:0}
table.convtab{width:auto}
table.convtab th,table.convtab td{text-align:center;padding:4px 8px}
table.convtab td.name{text-align:left}
#recTable tbody tr{cursor:default}
#recTable input{padding:3px 6px;font-size:13px}
#recTable td.nowrap{white-space:nowrap}
table.cmptab th{cursor:default}
table.cmptab td{padding:5px 10px;vertical-align:top}
table.cmptab td .d{font-size:11.5px}table.cmptab td.best{font-weight:700}
table.formulas td.chg{background:var(--accent-soft)}

/* a short message at the bottom of the screen ("Updated from another tab") */
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);max-width:calc(100% - 32px);background:var(--fg);color:var(--surface);padding:9px 16px;border-radius:10px;box-shadow:var(--shadow-pop);z-index:50;font-size:13.5px;font-weight:500}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* switching tabs: the new tab's cards rise in */
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.wrap>[data-tab]:not([hidden]){animation:rise .32s cubic-bezier(.2,.7,.2,1) backwards}
.wrap>[data-tab]:not([hidden])~[data-tab]:not([hidden]){animation-delay:.04s}
.pageHead>*{animation:rise .3s cubic-bezier(.2,.7,.2,1) backwards}
@media (prefers-reduced-motion:reduce){.wrap>[data-tab],.pageHead>*{animation:none!important}}
/* Where to farm while it's worked out again just after its tab opens (farmLater in start.js) */
.stale>*{opacity:.5;pointer-events:none;transition:opacity .15s}
::selection{background:color-mix(in srgb,var(--accent) 28%,transparent)}

/* ---- Character tab: section links and your numbers beside the cards (pinned bar and bottom dock on narrower screens) ---- */
.charLayout{display:grid;grid-template-columns:minmax(0,1fr) 224px;gap:20px;align-items:start}
.charMain{display:flex;flex-direction:column;gap:20px;min-width:0}
.charAside{position:sticky;top:64px;display:flex;flex-direction:column;gap:14px;min-width:0}
.secNav,.sumCard{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:10px}
.secNav{display:flex;flex-direction:column;gap:1px}
.secHead{font-size:10.5px;font-weight:650;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:4px 10px 6px}
.secNav a{position:relative;display:block;padding:6px 10px;border-radius:8px;color:var(--muted);text-decoration:none;font-weight:500;font-size:13px;transition:background .12s,color .12s}
.secNav a:hover{color:var(--fg);background:var(--grid)}
.secNav a[aria-current]{color:var(--accent);background:var(--accent-soft);font-weight:600}
.sumCard .calc{grid-template-columns:1fr;gap:8px}
.sumCard .tile{padding:10px 12px;border-radius:11px}
.sumCard .tile .v{font-size:1.2rem;margin-top:3px}
.sumCard .tile .s{font-size:11.5px}
/* what you farm for (kill time, EXP, zeny) first, then the attack's own numbers under a line */
.sumCard .tile.out{border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.sumCard .tile.out+.tile.det{margin-top:6px}
.charMain :is(#charCard,#buildPanel,#statPanel,#eqPanel,#atkPanel,#cardRow,#sagePanel,#weightPanel,#skillCard,#recCard,#gearCmpCard,#backupCard){scroll-margin-top:72px}
/* every other tab's section links (js/start.js pageNav): a column beside the cards on wide screens */
.pageNav[hidden]{display:none}
.hasPageNav>[data-tab],.hasPageNav .card{scroll-margin-top:72px}
@media (min-width:1360px){
  .wrap.hasPageNav{display:grid;grid-template-columns:minmax(0,1fr) 224px;column-gap:20px;row-gap:20px;align-content:start}
  .wrap.hasPageNav>*{grid-column:1}
  .wrap.hasPageNav>.pageNav{grid-column:2;position:sticky;top:64px;align-self:start}
}
@media (max-width:1359px){
  .charLayout{display:flex;flex-direction:column;align-items:stretch;gap:16px}
  .charAside{display:contents}
  .secNav{order:-1;position:sticky;top:52px;z-index:4;flex-direction:row;gap:2px;overflow-x:auto;scrollbar-width:none;padding:5px;border-radius:12px;
    background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .secNav::-webkit-scrollbar{display:none}
  .secNav .secHead{display:none}
  .secNav a{flex:none;white-space:nowrap;padding:5px 11px}
  .sumCard{order:2;position:sticky;bottom:12px;z-index:4;padding:6px;border-radius:14px;box-shadow:var(--shadow-pop);
    background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .sumCard .secHead,.sumCard .tile .s{display:none}
  /* the dock shows only the outcome; a message (no monster yet) spans it with its line showing */
  .sumCard .tile.det{display:none}
  .sumCard .tile.wide{grid-column:1/-1}.sumCard .tile.wide .s{display:block;font-size:12px}
  .sumCard .calc{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .sumCard .tile{padding:7px 10px}
  .sumCard .tile .v{font-size:1rem}
  .charMain :is(#charCard,#buildPanel,#statPanel,#eqPanel,#atkPanel,#cardRow,#sagePanel,#weightPanel,#skillCard,#recCard,#gearCmpCard,#backupCard){scroll-margin-top:108px}
  .pageNav{order:0}
  .hasPageNav>[data-tab],.hasPageNav .card{scroll-margin-top:108px}
}
@media (max-width:1023px){.secNav{top:56px}}
@media (max-width:680px){.sumCard .tile .k{font-size:9.5px;letter-spacing:.05em}.sumCard .tile .v{font-size:.92rem}}

/* ---- quick log: a box on the right of the top bar; on phones a sheet that the + button slides up ---- */
.quickLog{display:flex;align-items:center;gap:6px;margin-left:auto;flex:none}
.qlLbl{font-size:12px;font-weight:600;color:var(--muted)}
.quickLog input{width:150px;padding:4px 10px;font-family:var(--mono);font-size:12.5px;border-radius:7px}
.quickLog.bad input{border-color:var(--bad);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 15%,transparent)}
.qlKey{font-family:var(--mono);font-size:11px;padding:1px 6px;border:1px solid var(--line-strong);border-bottom-width:2px;border-radius:5px;color:var(--muted);background:var(--surface)}
.qlHelp{display:none}
.quickLog:focus-within .qlKey{display:none}
/* the + button, bottom right on any tab (or L), opens Log EXP: a sheet from the bottom on a phone, a pop-up above the button on a desktop */
@media all{
  .quickLog{position:fixed;left:0;right:0;bottom:0;z-index:40;margin:0;flex-wrap:wrap;gap:10px;padding:18px 16px calc(18px + env(safe-area-inset-bottom));
    background:var(--surface);border-radius:20px 20px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.18);transform:translateY(110%);visibility:hidden;transition:transform .25s cubic-bezier(.2,.7,.2,1),visibility .25s}
  body:has(.app.qlOpen) .quickLog{transform:none;visibility:visible}
  .app::after{content:"";position:fixed;inset:0;z-index:35;background:rgba(10,8,20,.45);opacity:0;pointer-events:none;transition:opacity .25s}
  .app.qlOpen::after{opacity:1}
  .qlLbl{flex-basis:100%;font-family:var(--display);font-size:1.1rem;font-weight:700;color:var(--fg)}
  .quickLog input{flex:1;width:auto;padding:10px 12px;font-size:16px}
  .quickLog button{padding:10px 18px;font-size:15px}
  .qlKey{display:none}
  .qlHelp{display:block;flex-basis:100%;font-size:12.5px;color:var(--muted)}
  .fab{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:30;display:grid;place-items:center;width:54px;height:54px;padding:0;border:0;border-radius:50%;
    background:var(--brand-btn);color:#fff;box-shadow:0 10px 24px -6px color-mix(in srgb,var(--accent) 60%,transparent)}
  .fab{transition:transform .22s cubic-bezier(.2,.7,.2,1),opacity .22s}
  .scrollDown .fab{transform:translateY(calc(100% + 40px));opacity:0;pointer-events:none}
  .fab .ic{width:24px;height:24px;stroke-width:2.2}
  .fab:hover{background:var(--brand-btn);filter:brightness(1.07)}
  body:has(.app.qlOpen) .fab{opacity:0;pointer-events:none}
  /* clear of the Character tab's bottom dock (narrower than 1360px) */
  body:has(.charLayout:not([hidden])) .fab{bottom:calc(92px + env(safe-area-inset-bottom))}
}
@media (min-width:1360px){body:has(.charLayout:not([hidden])) .fab{bottom:calc(18px + env(safe-area-inset-bottom))}}
@media (min-width:1024px){
  .quickLog{left:auto;right:18px;bottom:84px;width:min(400px,calc(100vw - 36px));border-radius:16px;padding:16px;box-shadow:var(--shadow-pop);transform:translateY(12px);opacity:0;transition:transform .2s,opacity .2s,visibility .2s}
  body:has(.app.qlOpen) .quickLog{opacity:1}
  .app::after{background:rgba(10,8,20,.18)}
  .quickLog input{font-size:14px;padding:8px 12px}
  .quickLog button{padding:8px 16px;font-size:14px}
}

/* ---- get started ---- */
.startCard{position:relative;overflow:hidden;border-radius:18px;padding:18px 20px;border:1px solid transparent;
  background:radial-gradient(500px 160px at 100% 0,var(--glow-b),transparent 70%) padding-box,linear-gradient(var(--surface),var(--surface)) padding-box,var(--brand) border-box;box-shadow:var(--shadow)}
.startHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.startHead h2{font-size:1.25rem;margin-top:4px}
.iconX{border:0;background:none;font-size:20px;line-height:1;padding:4px 8px;color:var(--muted)}
.iconX:hover{background:var(--grid);color:var(--fg);border:0}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.steps li{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:14px;background:var(--raised);border:1px solid var(--line)}
.stepN{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-family:var(--display);font-weight:700;font-size:14px;color:var(--accent);background:var(--accent-soft)}
.stepTxt{display:flex;flex-direction:column;gap:3px;flex:1}
.stepTxt b{font-weight:650}
.stepTxt span{font-size:12.5px;color:var(--muted)}
.steps li button{align-self:flex-start}
.steps li.done{opacity:.7}
.steps li.done .stepN{background:var(--brand-btn);color:transparent;position:relative}
.steps li.done .stepN::after{content:"";position:absolute;width:10px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translateY(-1px) rotate(-45deg)}
.steps li.done .stepTxt b{text-decoration:line-through;text-decoration-color:var(--muted)}
.steps li.done button{display:none}
.tiles.noData{display:none!important}
.startCard.offTab{display:none}

/* ---- Home tab ---- */
/* centred, like a search page: the update line, the title, the search bar and the button under it */
.homeHero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:12px;padding:34px 0 10px;
  /* the first screen, with the hero in its middle; What's new and the rest scroll up under it */
  min-height:calc(100svh - 60px)}
@media (max-width:1023px){.homeHero{min-height:calc(100svh - 160px)}}
.homeHero h1{font-size:2.7rem;font-weight:800;letter-spacing:-.04em;line-height:1.02;max-width:24ch;text-wrap:balance}
.homeHero .homeActs{justify-content:center}
.homeHero p{margin:0;max-width:80ch;color:var(--muted);font-size:15px;line-height:1.6;text-wrap:pretty}
.homeHero kbd{font-family:var(--mono);font-size:11px;padding:0 5px;margin-left:4px;border-radius:5px;border:1px solid currentColor;opacity:.6}
.homeActs{margin-top:4px}
.homeActs button{padding:8px 16px}
.homeNewsHead .homeNext{margin-top:8px}
.homeNext{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:5px 12px;border-radius:999px;font-size:12.5px;text-decoration:none;color:var(--fg);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);transition:border-color .12s}
.homeNext:hover{border-color:var(--accent)}
.homeNext b{color:var(--accent);font-weight:650}
.homeNext span{color:var(--muted)}
.homeNext:empty{display:none}
.tiles.homeTiles{grid-template-columns:repeat(4,minmax(0,1fr))}
button.tile{display:block;width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
button.tile:hover{border-color:var(--accent)}
.homeTools{display:flex;flex-direction:column;gap:18px}
.toolGrp{display:flex;flex-direction:column;gap:8px}
.toolGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
/* Home's search bar: a click or a key in it opens the search (Ctrl+K) with what's typed */
.homeSearchBar{display:flex;flex-direction:row;align-items:center;gap:10px;font-weight:400;font-size:inherit;color:inherit;letter-spacing:0;text-transform:none;width:min(100%,600px);margin:8px 0 2px;text-align:left;padding:12px 18px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);box-shadow:var(--shadow);cursor:text}
.homeSearchBar:hover,.homeSearchBar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.homeSearchBar .ic{flex:none;width:20px;height:20px;color:var(--muted)}
.homeSearchBar input{flex:1;min-width:0;border:0;background:none;padding:0;font-size:15.5px;box-shadow:none;outline:0}
.homeSearchBar input:focus{box-shadow:none}
.homeSearchBar kbd{font-family:var(--mono);font-size:11px;padding:1px 7px;border:1px solid var(--line-strong);border-radius:5px;color:var(--muted)}
.tool{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:var(--raised);border:1px solid var(--line);text-align:left;font-weight:400;color:inherit}
.tool:hover{border-color:var(--accent);background:var(--accent-soft)}
.toolIc{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent)}
.toolIc .ic{width:18px;height:18px}
.toolTxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.toolTxt b{font-family:var(--display);font-weight:650;font-size:14.5px;letter-spacing:-.01em}
.toolTxt span{font-size:12.5px;color:var(--muted);line-height:1.45}
@media (max-width:900px){.tiles.homeTiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.homeHero{padding-top:20px}.homeHero h1{font-size:2rem}}
@media (max-width:760px){.startCard{padding:14px}.startHead{margin-bottom:10px}.startHead h2{font-size:1.05rem}
  .steps{grid-template-columns:1fr;gap:8px}.steps li{flex-direction:row;align-items:center;padding:10px 12px}
  .steps li.done .stepTxt span{display:none}.stepN{flex:none}}

/* hints off (sidebar button): the help text under the cards goes */
.nohints .hint{display:none!important}
/* the page description under each tab's heading is a hint too */
.nohints #heroDesc{display:none}
#hintBtn[aria-pressed="false"]{opacity:.7}

/* ---- wide tables: the first column (rank and map in the hunters) stays put when you scroll sideways; column views beside the picker ---- */
.scroll :is(th,td):first-child{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:inset -1px 0 0 var(--line)}
.scroll thead :is(th,td):first-child,.scroll .filters td:first-child{background:var(--raised)}
.scroll.tall thead :is(th,td):first-child{z-index:2}
.scroll tbody tr:hover td:first-child{background:var(--grid)}
.scroll tr.sel td:first-child{background:linear-gradient(var(--accent-soft),var(--accent-soft)),var(--surface)}
:is(#bestTable,#huntTable) :is(th,td):first-child{width:46px;min-width:46px;max-width:46px;box-shadow:none}
:is(#bestTable,#huntTable) :is(th,td):nth-child(2){position:sticky;left:46px;z-index:1;background:var(--surface);box-shadow:inset -1px 0 0 var(--line)}
:is(#bestTable,#huntTable) thead :is(th,td):nth-child(2){background:var(--raised)}
:is(#bestTable,#huntTable) tbody tr:hover td:nth-child(2){background:var(--grid)}
:is(#bestTable,#huntTable) tr.sel td:nth-child(2){background:linear-gradient(var(--accent-soft),var(--accent-soft)),var(--surface)}
#gearTable :is(th,td):first-child,#specialTable :is(th,td):first-child{position:static;box-shadow:none}
.colBar{gap:8px 10px}
.colBar .seg button{padding:3px 11px;font-size:12.5px}
.colBar details[open]{flex-basis:100%}
:is(#bestTable,#huntTable) :is(th,td):nth-child(2){text-align:left}

/* ---- phones: Compare sessions as stacked cards (name, then job / monster / when, then the numbers with their labels) ---- */
@media (max-width:600px){
  #cmpTable,#cmpTable thead,#cmpTable tbody{display:block}
  #cmpTable thead tr:first-child{display:none}
  #cmpTable .filters{display:flex;gap:6px;padding:8px}
  #cmpTable .filters td{display:none;padding:0;border:0;background:none;position:static;box-shadow:none}
  #cmpTable .filters td:nth-child(1),#cmpTable .filters td:nth-child(3){display:block;flex:1}
  #cmpTable tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 12px;padding:12px 14px;border-bottom:1px solid var(--line)}
  #cmpTable tbody tr:last-child{border-bottom:0}
  #cmpTable tbody td{display:block;padding:0;border:0;text-align:left;white-space:normal;min-width:0;max-width:none;position:static;box-shadow:none;background:none!important}
  #cmpTable tbody td[colspan]{grid-column:1/-1;font-family:var(--body)!important;font-weight:400!important;font-size:13px!important}
  #cmpTable tbody td:nth-child(1){grid-column:1/-1;font-family:var(--display);font-weight:700;font-size:15px}
  #cmpTable tbody td:nth-child(3){grid-column:span 2}
  #cmpTable tbody td:nth-child(n+2)::before{display:block;font-family:var(--body);font-size:10px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
  #cmpTable tbody td:nth-child(2)::before{content:"Job"}#cmpTable tbody td:nth-child(3)::before{content:"Monster"}#cmpTable tbody td:nth-child(4)::before{content:"When"}
  #cmpTable tbody td:nth-child(5)::before{content:"Length"}#cmpTable tbody td:nth-child(6)::before{content:"%/hr"}#cmpTable tbody td:nth-child(7)::before{content:"EXP/min"}
  #cmpTable tbody td:nth-child(8)::before{content:"Kills/hr"}#cmpTable tbody td:nth-child(9)::before{content:"Sec/kill"}#cmpTable tbody td:nth-child(10)::before{content:"Deaths"}
  #cmpTable tbody tr.sel{background:var(--accent-soft)}
}

/* ---- top bar trend ---- */
.ctxRate{display:inline-flex;align-items:center;gap:6px;flex:none;padding:2px 10px 2px 6px;border-radius:99px;background:var(--surface);border:1px solid var(--line)}
.spark{width:72px;height:22px;display:block}
.ctxRate b{font-family:var(--mono);font-size:12px;font-weight:600}
#chartTip b,#goalTip b{font-family:var(--body);font-weight:650}
@media (max-width:1023px){.ctxRate{order:3}}

/* ---- no character yet: the Monsters & maps tables show the game's numbers only, not the ones worked out for a character ---- */
#mobTable.noChar :is(th,td):is(:nth-child(n+9):nth-child(-n+15),:nth-child(17)),
#mapTable.noChar :is(th,td):is(:nth-child(6),:nth-child(9),:nth-child(10),:nth-child(12)){display:none}
.noCharNote{padding:12px 14px;border:1px dashed var(--line-strong);border-radius:12px}
#farmNoChar{display:none}
#farmCard.noChar #farmNoChar{display:block}
#farmCard.noChar>:not(.bar:first-child):not(#farmNoChar){display:none}
#farmCard.noChar>.bar:first-child>.note{display:none}
#mapTable.noChar :is([data-sessmob],[data-skip]){display:none}
/* max base level: no quick Log EXP */
.maxLv :is(#quickLog,#qlFab){display:none!important}

/* ---- search: a button at the top of the sidebar and a dialog over the page ---- */
.searchBtn{display:flex;align-items:center;gap:10px;margin:0 0 6px;padding:8px 10px 8px 12px;border-radius:10px;border:1px solid var(--side-line);background:var(--side-field);color:var(--side-muted);font-weight:500;text-align:left}
.searchBtn span{flex:1}
.searchBtn:hover{background:var(--side-hover);border-color:var(--side-line-strong);color:var(--side-fg)}
.searchBtn kbd,.jump kbd{font-family:var(--mono);font-size:11px;padding:0 6px;border-radius:5px;border:1px solid currentColor;opacity:.7}
.compact .searchBtn{justify-content:center;padding:10px 0;width:100%}
.compact .searchBtn span,.compact .searchBtn kbd{display:none}
.jump{width:min(620px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 80px));margin:12vh auto auto;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--fg);box-shadow:var(--shadow-pop);overflow:hidden}
.jump[open]{display:flex;flex-direction:column}
.jump::backdrop{background:rgba(10,8,20,.45);backdrop-filter:blur(3px)}
.jumpBox{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);color:var(--muted)}
.jumpBox input{flex:1;border:0;background:none;padding:2px 0;font-size:16px;box-shadow:none}
.jumpBox input:focus{box-shadow:none}
.jumpList{overflow:auto;padding:6px;display:flex;flex-direction:column;gap:1px}
.jr{display:grid;grid-template-columns:72px minmax(0,auto) minmax(0,1fr);align-items:center;gap:10px;border:0;border-radius:9px;padding:8px 10px;background:none;text-align:left;font-weight:500}
.jr:hover{background:none;border:0}
.jr[aria-selected="true"]{background:var(--accent-soft)}
.jk{font-size:10px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.jr[aria-selected="true"] .jk{color:var(--accent)}
.jn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jm{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jEmpty{padding:24px;text-align:center;color:var(--muted)}
.jumpFoot{display:flex;gap:16px;padding:9px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--muted);background:var(--raised)}
.jumpFoot kbd{margin-right:3px}
@media (max-width:1023px){
  .app{grid-template-columns:minmax(0,1fr) auto auto}
  .searchBtn{grid-column:2;grid-row:1;align-self:center;margin:8px 0 4px;padding:7px 10px;border-color:var(--line);background:var(--surface);color:var(--muted)}
  .searchBtn span,.searchBtn kbd{display:none}
  .sideFoot{grid-column:3}
  .jumpFoot span:last-child{display:none}
  .jump{margin-top:8vh}
  .jr{grid-template-columns:60px minmax(0,1fr);row-gap:1px}.jm{grid-column:2}
}
/* a narrower window with room for it: the brand, the group menus, search and settings in one row that stays at the top as you scroll.
   A phone keeps two, the menus under the rest (the menus' row stays at the top) */
@media (min-width:840px) and (max-width:1023px){
  .app{grid-template-columns:minmax(0,1fr)}
  .side{grid-column:1;grid-row:1;display:flex;flex-direction:row;align-items:center;gap:8px;position:sticky;top:0;z-index:7;height:auto;
    padding:8px 16px;overflow:visible;background:var(--bg);color:var(--fg);box-shadow:inset 0 -1px 0 var(--line)}
  .brand{order:1;padding:0 8px 0 0}
  .tabs{order:2;flex:1;min-width:0;position:static;border:0;background:none;padding:0 4px}
  .searchBtn{order:3;margin:0}
  .sideFoot{order:4;margin:0;padding:0}
  .main{grid-column:1}
}

/* ---- Where to farm: the best spots (by EXP and by zeny, side by side), then one ranking ---- */
.spots{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.spots.one{grid-template-columns:1fr}
.spotCol{display:flex;flex-direction:column;gap:6px;min-width:0}
.spot{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--raised)}
.spot.on{border-color:var(--accent);background:var(--accent-soft)}
.spotN{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:12px;font-weight:700;background:var(--accent-soft);color:var(--accent)}
.spotTxt{flex:1;min-width:0}
.spotV{font-size:13px}
.farmBtn{white-space:nowrap}
.spot .farmBtn,.spot .pill{flex:none}
@media (max-width:700px){.spots{grid-template-columns:1fr}}

/* ---- Log EXP card: the everyday fields up top, the rest folded ---- */
details.more{border-top:1px dashed var(--line);padding-top:10px}
details.more>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:13px;font-weight:600;color:var(--fg);list-style:none}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"";align-self:center;width:6px;height:6px;margin-right:2px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(-45deg);transition:transform .15s}
details.more[open]>summary::before{transform:rotate(45deg)}
details.more>summary .note{font-weight:400}
details.more[open]>:not(summary){margin-top:10px}
details.more>.form{display:grid}
#pasteMore{display:flex;flex-direction:column;gap:8px}
#pasteMore[open]>label{margin-top:10px}
#pasteMore>button{align-self:flex-start}

/* ---- Equipment and Cards tabs: effects wrap in a wide left-aligned column; the Equip dialog lists each gear set's places ---- */
.dbTable :is(th,td).l{text-align:left}
.dbTable td.fx{white-space:normal;text-align:left;min-width:220px;max-width:360px;line-height:1.45}
.dbTable td.kind{white-space:normal;min-width:110px;max-width:160px}
.dbTable td.jobs{white-space:normal;min-width:100px;max-width:150px;font-size:12px;color:var(--muted)}
.dbTable td:first-child{white-space:normal;min-width:230px;max-width:280px}
.dbTable td:first-child .pill{margin-left:2px}
.dbF label{min-width:0}
.eqDlg[open]{display:flex;flex-direction:column}
.eqDlgHead{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}
.eqDlgHead>div{flex:1}
.eqDlgHead b{font-family:var(--display);font-size:16px}
.eqDlgBody{overflow:auto;padding:12px 16px 16px;display:flex;flex-direction:column;gap:10px}
.eqPicks{display:flex;flex-direction:column;gap:10px}
.eqSet{display:flex;flex-direction:column;gap:4px}
.eqSet>b{font-size:11px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.eqPick{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;text-align:left;font-weight:500;padding:8px 12px}
.eqPick .to{color:var(--accent);font-weight:600}
/* item icons, card pictures and monster pictures: one cell of a sprite sheet (data/icons.js) */
.ico{display:inline-block;flex:none;background-repeat:no-repeat;vertical-align:middle}
.ico-gear{width:24px;height:24px;background-image:var(--ico-gear)}
.ico-item{width:24px;height:24px;background-image:var(--ico-item)}
.ico-skill{width:24px;height:24px;background-image:var(--ico-skill)}
/* an icon in a line of text: it doesn't make the line taller */
.ico.il{margin:-5px 5px -4px 0}
.ico-card,.ico-cardDb{width:36px;height:48px;background-image:var(--ico-card);border-radius:3px}
.ico-cardDb{background-image:var(--ico-cardDb)}
.ico-gearDb,.ico-itemDb{width:24px;height:24px}.ico-gearDb{background-image:var(--ico-gearDb)}.ico-itemDb{background-image:var(--ico-itemDb)}
.ico-mob,.ico-mobDb{width:48px;height:48px;background-image:var(--ico-mob)}
.ico-mobDb{background-image:var(--ico-mobDb)}
.ico.none{background:none}
.dbName{display:flex;align-items:center;gap:8px}
.eqDlgHead :is(.ico-card,.ico-cardDb){margin-top:-2px}
.eqPick :is(.ico-gear,.ico-gearDb){margin:-4px 6px -4px 0}
/* the Character tab's gear table: the item's icon beside its box, a small picture beside each card box */
#gearTable .itemBox,#gearTable .cardBox,#specialTable .itemBox{display:flex;align-items:center;gap:6px}
#specialTable .itemBox input{flex:1}
#gearTable .cardBox{flex:1;min-width:0}
/* Build from gear: the equipment window, drawn like the game's Equipped Items; the job's look is a body and a head in one canvas
   (data/sprites.js), drawn from the feet and scaled up by --ew-z with square pixels */
.equipWin{--ew-z:2;max-width:560px;margin:10px 0;border:1px solid var(--ew-line);border-radius:7px;background:var(--ew-bg);box-shadow:var(--shadow);font-size:12px;line-height:1.25;overflow:hidden}
.ewHead{display:flex;align-items:center;gap:8px;padding:4px 10px;background:var(--ew-head);border-bottom:1px solid var(--ew-line);font-weight:600}
.ewSet{margin-left:auto;font-weight:500;font-size:11px;color:var(--muted)}
.ewTabs{display:flex;background:var(--ew-tabbar);border-bottom:1px solid var(--ew-line)}
.ewTabs button{flex:1 1 0;min-width:0;border:0;border-right:1px solid var(--ew-line);border-radius:0;background:none;padding:4px 6px;font-size:12px;font-weight:500;color:var(--muted)}
.ewTabs button:last-child{border-right:0}
.ewTabs button[aria-selected="true"]{background:var(--ew-bg);color:var(--fg);font-weight:600}
.ewBody{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;padding:8px}
.ewCol{display:flex;flex-direction:column;gap:5px}
.ewSlot{display:flex;align-items:center;gap:6px;min-height:36px;padding:3px 7px;border:0;border-radius:9px;background:var(--ew-slot);color:var(--fg);font-size:12px;font-weight:500;line-height:1.2;text-align:left;cursor:pointer}
.ewSlot.r{flex-direction:row-reverse;text-align:right}
.ewSlot:hover{background:var(--ew-slot-hover);border:0}
.ewSlot.empty{background:var(--ew-slot-empty)}
.ewSlot.none{cursor:default}
.ewSlot .ico.none{width:24px;height:24px}
.ewName{flex:1;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.ewChar{display:flex;flex-direction:column;align-items:center;width:calc(52px*var(--ew-z))}
.ewStage{position:relative;flex:1;width:100%;min-height:calc(100px*var(--ew-z))}
.ewStage::before{content:"";position:absolute;left:50%;bottom:calc(8px*var(--ew-z));width:calc(26px*var(--ew-z));height:calc(7px*var(--ew-z));transform:translateX(-50%);border-radius:50%;background:var(--ew-floor)}
.ewFeet{position:absolute;left:50%;bottom:calc(12px*var(--ew-z));width:0;height:0;transform:scale(var(--ew-z));transform-origin:0 0}
.ewFeet canvas{position:absolute;image-rendering:pixelated}
.ewLook{display:flex;align-items:center;gap:3px;margin-top:4px;font-size:11px;color:var(--muted);white-space:nowrap}
.ewLook button{min-height:0;padding:1px 6px;font-size:11px;line-height:1.4}
.ewLook .ewTrans[aria-pressed="true"]{color:var(--accent);background:var(--accent-soft);border-color:var(--accent)}
.ewSwatch{display:inline-block;width:9px;height:9px;margin-right:3px;border:1px solid var(--ew-line);border-radius:2px;vertical-align:-1px}
.ewAmmo{grid-column:1/-1;display:flex;justify-content:center}
.ewAmmo .ewSlot{width:min(100%,260px)}
@media (max-width:520px){.equipWin{--ew-z:1.5}.ewBody{padding:6px;gap:4px}.ewSlot{padding:3px 5px;gap:4px;font-size:11px}.ewLook button{padding:1px 4px}.ewHairW{display:none}}
/* the class picker (the Skill tree's Job): a button with the job's look, client icon and name that opens every job's as a grid. The
   looks are the equipment window's (.ewStage / .ewFeet). A look reaches 91px above its feet (long hair) and 14px below (feet,
   shadow), so each stage leaves that much room, scaled, above and below where the feet stand */
.ico-job{width:26px;height:26px;background-image:var(--ico-job)}
.classPick{position:relative;--ew-z:1}
.cpBtn{display:flex;align-items:center;gap:8px;padding:0 12px 0 0;overflow:hidden;text-align:left}
.cpBtn .ewStage{flex:none;width:68px;height:78px;min-height:0;overflow:hidden}
.cpBtn .ewStage::before{bottom:6px}.cpBtn .ewFeet{bottom:10px;transform:scale(.7)}
.cpName{display:flex;flex-direction:column;line-height:1.2}
.cpLbl{font-size:11px;font-weight:500;color:var(--muted)}
.cpChev{width:16px;height:16px;margin-left:2px;color:var(--muted);transition:transform .15s}
.cpBtn[aria-expanded="true"] .cpChev{transform:rotate(180deg)}
.cpPop{position:absolute;z-index:5;top:calc(100% + 6px);left:0;padding:4px 10px 10px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-pop)}
.cpGrp{margin:8px 2px 6px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cpGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:6px}
.cpOpt{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px 6px;border-color:var(--line);background:var(--raised);font-size:12px;font-weight:550;line-height:1.2}
.cpOpt .ewStage{flex:none;height:108px;min-height:0;overflow:hidden}.cpOpt .ewFeet{bottom:15px}.cpOpt .ewStage::before{bottom:11px}
.cpPair::before{width:56px}
.cpOpt>.ico{position:absolute;top:4px;left:4px}
.cpOpt[aria-selected="true"]{border-color:var(--accent);background:var(--accent-soft)}
/* the Stylist (Simulators): the preview has room for its biggest costume (152px above the feet, 28px below, 76px either side), 1.5x;
   the look large beside the job picker, then grids of clothes colours (whole looks) and hair styles and
   colours (heads at twice their size) */
.styTop{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;margin:6px 0 4px}
.styPreviewCol{display:flex;flex-direction:column;gap:6px}
.styAnimCtl{gap:4px}.styAnimCtl .styDir{min-width:2.2em;text-align:center}
.styAnim{display:block;width:270px;height:300px;image-rendering:pixelated}
.styPreview{--ew-z:1.5;width:272px;height:302px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:var(--raised)}
.styPreview .ewStage{display:block;height:100%;min-height:0}.styPreview .ewFeet{bottom:43px}.styPreview .ewStage::before{bottom:37px}
.styCtl{display:flex;flex-direction:column;gap:8px;min-width:0;flex:1 1 240px}
.styOpts button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.styFold{margin-top:12px}
.styGrid{display:grid;gap:6px}
.styLooks{grid-template-columns:repeat(auto-fill,minmax(64px,1fr))}
.styHeads{grid-template-columns:repeat(auto-fill,minmax(68px,1fr))}
.styOpt{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding:4px 2px;border-color:var(--line);background:var(--raised);font-size:11px;font-weight:550;--ew-z:1}
.styOpt[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.styOpt .ewStage{flex:none;height:108px;min-height:0;overflow:hidden}.styOpt .ewFeet{bottom:15px}.styOpt .ewStage::before{bottom:11px}
.styHeads .styOpt{min-height:76px}
.styOpt .lookHead{image-rendering:pixelated}
.styslot{display:inline-flex;gap:2px}.styslot .covered{text-decoration:line-through}
.styKind{display:flex;flex-wrap:wrap;align-items:center;gap:6px;width:100%}.styKind>b{min-width:72px;font-size:12px;color:var(--muted)}
.styCosQ{width:min(320px,100%);margin:8px 0 6px}
.styCosList{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px;max-height:340px;overflow:auto;padding:2px}
.styCos{display:flex;align-items:center;gap:8px;padding:4px 8px;border-color:var(--line);background:var(--raised);font-size:12px;font-weight:500;text-align:left;line-height:1.25}
.styCos[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
/* Build from gear: the status window, drawn like the game's: base stat with − / +, what job and gear add, the next point's cost */
.statWin{max-width:560px;margin:10px 0;border:1px solid var(--ew-line);border-radius:7px;background:var(--ew-bg);box-shadow:var(--shadow);font-size:12.5px;overflow:hidden}
.swBody{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;padding:8px 10px}
.swStats{display:grid;grid-template-columns:auto auto auto auto;align-items:center;gap:3px 8px}
.swK{font-weight:600}
.swIn{display:flex;align-items:center;gap:2px}
.swIn button{min-height:0;width:22px;height:22px;padding:0;border-radius:5px;font-size:13px;line-height:1}
.swIn input{width:46px;height:24px;padding:1px 4px;text-align:center;-moz-appearance:textfield}
.swIn input::-webkit-inner-spin-button,.swIn input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.swAdd{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.swCost{min-width:22px;padding:1px 5px;border-radius:5px;background:var(--ew-slot);text-align:center;font-variant-numeric:tabular-nums}
.swDer{display:grid;grid-template-columns:auto 1fr auto 1fr;align-content:start;gap:5px 8px;margin:0;padding-left:16px;border-left:1px solid var(--ew-line)}
.swDer dt{font-weight:600}
.swDer dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.swFoot{display:flex;align-items:baseline;gap:8px;padding:5px 10px;border-top:1px solid var(--ew-line);background:var(--ew-tabbar)}
.swFoot b{font-variant-numeric:tabular-nums}
@media (max-width:560px){.swBody{grid-template-columns:minmax(0,1fr)}.swDer{padding:8px 0 0;border-left:0;border-top:1px solid var(--ew-line)}}
/* Equipment and Cards tabs: where to get it, MVPs marked */
.dbTable td.from{white-space:normal;min-width:150px;max-width:210px;font-size:12.5px;line-height:1.5}
.pill.mvp{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 50%,transparent);background:color-mix(in srgb,var(--warn) 8%,transparent)}
.dbTable details.desc{margin-top:4px;color:var(--muted);font-size:12px}
.dbTable details.desc summary{cursor:pointer;color:var(--accent);font-size:11.5px;width:max-content}
/* Item info: an item's other sources (monsters the farm tables don't have, quests) across the tile row */
.calc .tile.wide{grid-column:1/-1}
.mapPics{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;margin:8px 0 12px}
.mapPic{display:block;width:min(100%,320px)}
.mapPic[hidden],.worldMap[hidden]{display:none}
#mapDun{margin:0 0 12px}
#mapDun:empty{display:none}
#mapDun h3{margin:0;font-size:1rem}
/* the world map takes the width the map's picture (about a quarter of the card beside it) leaves; on a phone the picture goes under it */
.mapPics>.worldMore{flex:1 1 400px;min-width:0;max-width:900px;border-top:0;padding-top:0}
.mapPics>.naviPic{flex:0 0 auto;width:clamp(180px,26%,300px)}
@media (max-width:600px){.mapPics>.naviPic{width:min(100%,320px)}}
.mapTop{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.mapTop>#mapTiles{flex:1 1 360px;min-width:0}
.mapTop>.mapPic,.mapTop>.naviPic{flex:none;width:min(100%,280px)}
/* the Navigation (js/navi.js): markers over a map's picture, the way there, the NPC list */
.naviPic{position:relative;width:min(100%,320px)}
.naviPic[hidden]{display:none}
.naviPic>.mapPic{width:100%}
.naviMarks{position:absolute;inset:0;pointer-events:none}
.naviMark{position:absolute;width:9px;height:9px;min-width:0;padding:0;margin:0;border-radius:50%;transform:translate(-50%,-50%);border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.45);pointer-events:auto;background:#8e8ba0}
.naviMark.warp{width:11px;height:11px;border-radius:2px;background:#ff3b30}
.naviMark.warp.minor{width:7px;height:7px;border-width:1px;opacity:.6}
button.naviMark.warp{cursor:pointer}
button.naviMark.warp:hover{transform:translate(-50%,-50%) scale(1.4)}
.naviMark.npc.k,.naviDot.npc.k{background:#0a84ff}
.naviMark.npc.s,.naviDot.npc.s{background:#30d158}
.naviMark.npc.w,.naviDot.npc.w{background:#ffd60a}
.naviDot{display:inline-block;width:8px;height:8px;margin-right:5px;border-radius:50%;background:#8e8ba0;vertical-align:baseline}
.naviDot.warp{border-radius:2px;background:#ff3b30}
.naviRoute{margin-top:8px}
.naviSteps{display:flex;flex-wrap:wrap;gap:4px 6px;list-style:none;margin:4px 0 0;padding:0}
.naviSteps>li:not(:last-child)::after{content:"→";margin-left:6px;color:var(--muted)}
.naviList{list-style:none;margin:6px 0 0;padding:0;columns:2 220px;column-gap:16px}
.naviList>li{break-inside:avoid;margin:2px 0}
.wmWorlds{margin-bottom:6px}
.wmWorlds [aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.wmPic{position:relative;container-type:inline-size}
.wmPic>img{display:block;width:100%;height:auto;border-radius:8px}
.wmBoxes{position:absolute;inset:0}
.wmLines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.wmLines line{stroke:rgba(20,12,8,.75);stroke-width:1.5px}
.wmLines line.on{stroke:#ff3b30;stroke-width:2px}
.wmLines line.closed{stroke-dasharray:3 3}
.wmDot{position:absolute;z-index:1;padding:0;min-width:0;border:1px solid #fff;border-radius:50%;background:rgba(20,12,8,.75);cursor:pointer;box-shadow:none}
.wmDot:hover,.wmDot.on{background:#ff3b30}
.wmDot.closed{border-style:dashed}
.wmBox{position:absolute;padding:0;min-width:0;border:1px solid rgba(255,255,255,.35);border-radius:2px;background:transparent;cursor:pointer;box-shadow:none}
.wmBox:hover{border-color:#fff;background:rgba(255,255,255,.2)}
.wmBox.closed{border-style:dashed;border-color:rgba(0,0,0,.35)}
.wmBox.town{border-color:rgba(255,214,10,.75)}
.wmBox.on.closed{border-style:dashed}
#infoDlg .worldMap{margin:8px 0}
#infoDlg .worldMap button:disabled{opacity:1;pointer-events:none}
.wmBox.on{border:2px solid #ff3b30;background:rgba(255,59,48,.3);box-shadow:0 0 0 2px rgba(255,255,255,.8)}
.wmFloors{position:absolute;z-index:3;width:max-content;max-width:100%;margin:3px 0;padding:3px 0;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);box-shadow:0 6px 18px rgba(0,0,0,.35)}
.wmFloors[hidden]{display:none}
.wmFloorsHead{padding:2px 10px 4px;border-bottom:1px solid var(--line);margin-bottom:2px;font-size:12px;font-weight:600}
.wmFloors button{display:flex;justify-content:space-between;gap:14px;width:100%;min-width:0;padding:3px 10px;border:0;border-radius:0;background:none;box-shadow:none;color:var(--fg);font-size:12px;font-weight:400;line-height:1.3;text-align:left;cursor:pointer}
.wmFloors button:hover,.wmFloors button:focus-visible{background:var(--accent-soft)}
.wmFloors button.on{font-weight:600;color:var(--accent)}
.wmFloors button .note{flex:none;margin:0;font-size:11px}
.wmFloors button[data-wmall]{border-bottom:1px solid var(--line);margin-bottom:2px}
@container (max-width:560px){.wmFloors{left:0!important;right:0!important;width:auto}}
.wmBox.dun{z-index:1;display:flex;align-items:center;justify-content:center}
.wmBox.dun span{display:none}
@container (min-width:561px){
  .wmBox.dun,.wmBox.dun:hover,.wmBox.dun.on{border:0;background:none;box-shadow:none}
  .wmBox.dun span{display:block;flex:none;width:max-content;min-width:min-content;max-width:6.4cqw;padding:0 2px;border:1px solid rgba(255,255,255,.4);border-radius:2px;background:rgba(20,12,8,.82);color:#fff;font-size:clamp(8px,1cqw,13px);font-weight:600;line-height:1.05;text-align:center;text-wrap:balance}
  .wmBox.dun:hover span{border-color:#fff;background:rgba(70,50,40,.95)}
  .wmBox.dun.on span{border-color:#fff;background:#c2281f}
  .wmBox.dun.town span{border-color:rgba(255,214,10,.75)}
  .wmBox.dun.closed span{border-style:dashed}
}
.mapPic img{display:block;width:100%;height:auto;border-radius:8px;background:var(--raised)}
.tile .s.from{line-height:1.7}
/* the details popup (js/info.js): a monster, item, gear or card */
.infoDlg{width:min(720px,calc(100vw - 32px));max-height:min(760px,calc(100vh - 48px));margin-top:6vh}
.infoDlg .calc{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.infoDlg .tile{padding:10px 12px;border-radius:11px}
.infoDlg .tile .v{font-size:1.15rem}
.infoSec h3{margin:4px 0 6px;font-size:11px;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
details.infoSec>summary{list-style:none;display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none}
details.infoSec>summary::-webkit-details-marker{display:none}
details.infoSec>summary::before{content:"";width:6px;height:6px;margin:0 2px 2px 1px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
details.infoSec:not([open])>summary::before{transform:rotate(-45deg)}
details.infoSec:not([open])>summary h3{margin-bottom:4px}
details.infoSec>summary:hover h3{color:var(--fg)}
.mobChip{display:flex;align-items:center;gap:2px;margin:1px 0;white-space:nowrap}
.infoList{display:flex;flex-direction:column;gap:3px;font-size:13px;line-height:1.5}
.infoFrom{font-size:13px;line-height:1.75}
.infoText{font-size:13px;line-height:1.5;color:var(--muted);white-space:pre-line}
.infoActs{padding:10px 16px;border-top:1px solid var(--line);background:var(--raised);flex-wrap:wrap}
/* the bottom bar's Players pay box, at its right end */
.infoActs .infoPay{margin-left:auto;display:flex;flex-direction:row;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap}
#infoBack{margin-top:-1px}
.infoShare{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;font-size:12.5px;border-radius:7px;border:1px solid var(--line);color:inherit;text-decoration:none;white-space:nowrap}
.infoShare:hover{border-color:var(--accent);color:var(--accent)}
.infoShare .ic{width:14px;height:14px}
@media (max-width:680px){.infoDlg .calc{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Recipes tab: the category buttons wrap on a phone; each material on its own line */
#recipeCats{flex-wrap:wrap}
#recipeCats .note{margin-left:2px}
.dbTable td.mats{white-space:normal;min-width:200px;line-height:1.9}
.dbTable td.mats .mat{display:block;white-space:nowrap}
/* the details popup: the recipes that use an item, each made item's line and its other materials wrapping */
.usedTable td.name{text-align:left;white-space:normal}
.usedTable td.mats{line-height:1.9}.usedTable th:last-child{text-align:left}
.usedTable td.mats .mat{display:block;white-space:nowrap}
#cookTable :is(th,td).sel{background:var(--accent-soft)}
/* the What's new tab: the update's heading, its floors (one row per monster, bars on one scale), bosses' cards, gear and events */
.homeNewsCard{border-color:transparent;background:linear-gradient(160deg,var(--accent-soft),transparent 50%) padding-box,linear-gradient(var(--surface),var(--surface)) padding-box,var(--brand) border-box}
.homeNewsHead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px}
.homeNewsHead h2{margin:6px 0;font-family:var(--display);font-size:1.9rem;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.homeNewsHead p{margin:0;max-width:75ch;color:var(--muted);line-height:1.6;text-wrap:pretty}
.homeNewsCard .toolGrid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.homeNewsCard .toolIc{font-family:var(--display);font-size:15px;font-weight:800}
.homeNewsCard .toolTxt .pill{width:fit-content;margin-top:4px;font-size:11px}
.homeNewsCard .toolTxt .pill.up{color:var(--good)}
#newsMain .card,.newsSec{scroll-margin-top:72px}
@media (max-width:1359px){#newsMain .card,.newsSec{scroll-margin-top:108px}}
/* the tab's sections: a heading over each part of the update (Clock Tower, an event), its cards under it */
.newsSec{display:flex;flex-direction:column;gap:20px}
.newsSecHead{padding:14px 2px 0;border-top:2px solid var(--line)}
.newsSecHead h2{font-family:var(--display);font-size:1.5rem;font-weight:800;letter-spacing:-.025em;line-height:1.1;cursor:pointer;user-select:none;display:flex;align-items:center;gap:10px;width:fit-content}
.newsSecHead h2::before{content:"";flex:none;width:9px;height:9px;margin:0 2px 4px 2px;border-right:2.2px solid var(--muted);border-bottom:2.2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.newsSecHead h2[aria-expanded="false"]::before{transform:rotate(-45deg);margin-bottom:0}
.newsSec.collapsed>:not(.newsSecHead){display:none}
.newsSecHead p{margin:6px 0 0;max-width:80ch;color:var(--muted);font-size:14px;line-height:1.55;text-wrap:pretty}
.newsNav a.newsNavSec{color:var(--fg);font-weight:600;flex:1;min-width:0}
.newsNavGrp{display:flex;flex-direction:column}
.newsNavGrp+.newsNavGrp{margin-top:4px}
.newsNavRow{display:flex;align-items:center;gap:2px}
.newsNavGrp.cur .newsNavSec{color:var(--accent)}
.newsNavTog{flex:none;width:26px;height:26px;padding:0;border:0;border-radius:7px;background:none;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.newsNavTog::before{content:"";width:6px;height:6px;margin-left:-2px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.newsNavTog[aria-expanded="true"]::before{transform:rotate(45deg);margin:-3px 0 0}
.newsNavTog:hover{background:var(--grid);color:var(--fg)}
.newsNavSubs{display:none;flex-direction:column;gap:1px}
.newsNavGrp.show .newsNavSubs{display:flex}
.newsNav a.newsNavSub{padding:4px 10px 4px 20px;font-size:12.5px}
/* the dropdown a section's toggle opens on narrower screens */
.newsNavDrop{position:fixed;z-index:40;display:flex;flex-direction:column;gap:1px;min-width:210px;max-width:calc(100vw - 16px);max-height:60vh;overflow:auto;padding:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop)}
.newsNavDrop[hidden]{display:none}
.newsNavDrop a{display:block;padding:7px 10px;border-radius:8px;color:var(--fg);text-decoration:none;font-size:13px;white-space:nowrap}
.newsNavDrop a:hover{background:var(--grid)}
.newsNavDrop a[aria-current]{color:var(--accent);background:var(--accent-soft);font-weight:600}
/* as a row of links (narrower screens): the sections, a divider between them; their cards are in the dropdown */
@media (max-width:1359px){.newsNavGrp{flex:none;flex-direction:row}
  .newsNavGrp+.newsNavGrp{margin:0 0 0 4px;padding-left:4px;border-left:1px solid var(--line)}
  .newsNavGrp.show .newsNavSubs{display:none}
  .newsNavTog{width:22px;height:22px}
  .newsNavTog::before{transform:rotate(45deg);margin:-3px 0 0}
  .newsNavTog[aria-expanded="true"]::before{transform:rotate(-135deg);margin:3px 0 0}}
@media (max-width:760px){.newsSec{gap:16px}}
.newsHeadCard{display:flex;flex-direction:column;gap:8px}
.newsHeadCard h2{font-family:var(--display);font-size:1.9rem;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.newsHeadCard p{margin:0;max-width:75ch;color:var(--muted);line-height:1.6;text-wrap:pretty}
.newsTower{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.newsFloor{display:grid;grid-template-columns:56px minmax(0,1fr);border-top:1px solid var(--line)}
.newsFloor:first-child{border-top:0}
.newsTag{padding:12px 0 0 14px;font-weight:600;color:var(--accent)}
.newsFloor.under .newsTag{color:var(--accent-2)}
.newsRows{display:flex;flex-direction:column;gap:4px;padding:10px 14px 12px 0;min-width:0}
.newsMap{font-weight:600;color:var(--fg);text-decoration:none;margin-bottom:2px;width:fit-content}
.newsMap:hover{color:var(--accent)}
.newsMap .mono{font-size:11.5px;font-weight:400;color:var(--muted);margin-left:4px}
.newsMob{display:grid;grid-template-columns:auto minmax(0,10rem) 3.4rem minmax(0,1fr) 2.4rem;align-items:center;gap:0 8px;font-size:13px}
.newsMob>a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.newsMob>.mono{text-align:right}
.newsBar{height:7px;border-radius:4px;background:var(--grid);overflow:hidden}
.newsBar i{display:block;height:100%;border-radius:4px;background:var(--accent)}
.newsFloor.under .newsBar i{background:var(--accent-2)}
.newsBosses{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.newsBoss{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 50%,transparent);background:color-mix(in srgb,var(--warn) 8%,transparent);font-weight:600}
.newsBoss .mono{font-weight:400;opacity:.85}
a.newsBoss{display:inline-flex;align-items:center;gap:2px;text-decoration:none}a.newsBoss[data-info]:hover{border-color:var(--warn)}
.newsGround{display:flex;align-items:baseline;gap:10px;padding:8px 14px;background:var(--raised);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.newsGround a{font-weight:600}
.newsGround span{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.newsList{display:flex;flex-direction:column}
.newsItem{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-top:1px solid var(--line)}
.newsItem:first-child{border-top:0;padding-top:4px}
.newsItem>span{font-size:13px;color:var(--muted);line-height:1.5}
.newsIntro{margin:0 0 4px;max-width:80ch;font-size:13px;line-height:1.55}
.newsCollab{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:6px 28px}
.newsGrp{display:flex;flex-direction:column;min-width:0}
.newsGrp .secHead{padding:10px 0 2px}
@media (max-width:600px){.newsMob{grid-template-columns:auto minmax(0,1fr) 2.4rem;gap:2px 8px}.newsMob>.note{display:none}.newsMob>.ico{grid-row:1 / 3}
  .newsMob>a{grid-column:2;grid-row:1}.newsMob>.mono{grid-column:3;grid-row:1}.newsBar{grid-column:2 / -1;grid-row:2}
  .newsFloor{grid-template-columns:44px minmax(0,1fr)}.newsTag{padding-left:10px}.newsHeadCard h2{font-size:1.5rem}}

/* Market: category buttons and one row per price, in the in-game market's categories */
#mktSrv button{white-space:nowrap;padding:5px 10px}#mktSrv .note{font-size:11.5px;margin-left:2px}
.mktCats{display:flex;flex-wrap:wrap;gap:6px}
.mktCat{border:1px solid var(--line-strong);background:var(--surface);color:var(--fg);border-radius:99px;padding:4px 12px;font-size:13px;font-weight:500}
.mktCat span{color:var(--muted);font-family:var(--mono);font-size:11.5px;margin-left:3px;font-variant-numeric:tabular-nums}
.mktCat:hover{background:var(--grid)}
.mktCat[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.mktCat[aria-pressed="true"] span{color:inherit;opacity:.8}
.mktList{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mktRow{display:grid;grid-template-columns:32px minmax(0,1fr) 170px 74px auto;align-items:center;gap:12px;padding:9px 12px;border-top:1px solid var(--line)}
.mktRow:first-child{border-top:0}
.mktRow:hover{background:var(--raised)}
.mktIc{display:flex;align-items:center;justify-content:center;min-height:28px}
.mktName{min-width:0}
.mktName a{font-weight:600;font-size:14px;color:var(--fg);text-decoration:none}
.mktName a:hover{color:var(--accent);text-decoration:underline}
.mktName .note a{font-weight:500;font-size:12px;color:var(--accent)}
.mktName .note{font-size:12px;margin-top:1px}
.mktPrice{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:5px}
.mktPrice input{width:100%;text-align:right;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.mktPrice .mktZ{color:var(--muted);font-size:13px}
.mktPrice .note{grid-column:1;text-align:right;font-size:11.5px;line-height:1.3}
.mktMove{text-align:right}.mktMove .pill{font-family:var(--mono);font-variant-numeric:tabular-nums}
.mktRow button.ghost{border-color:transparent;background:none;color:var(--muted)}.mktRow button.ghost:hover{color:var(--bad);background:var(--grid)}
.mktEmpty{padding:18px 14px}
@media (max-width:720px){
  .mktRow{grid-template-columns:28px minmax(0,1fr) auto;row-gap:6px;gap:8px 10px}
  .mktPrice{grid-column:2/3}.mktMove{grid-column:3;grid-row:2}.mktRow button.ghost{grid-column:3;grid-row:1}
}
.mktItem{border-top:1px solid var(--line)}.mktItem:first-child{border-top:0}
.mktItem .mktRow{border-top:0}
.mktPrice.off input{opacity:.45}
.mktFit{color:var(--accent);font-weight:600}
.mktVars{padding:0 12px 10px 56px;display:grid;gap:6px}
.mktVar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px 8px;border:1px dashed var(--line-strong);border-radius:8px;background:var(--raised)}
.mktVar.hit{border-style:solid;border-color:var(--accent);background:var(--accent-soft)}
.mktVar select[data-vr]{width:auto}
.mktVar .mktPrice{display:inline-grid;width:170px;margin-left:auto}
.mktOpts{display:flex;flex-wrap:wrap;gap:6px}
.mktOpt{display:inline-flex;align-items:center;gap:4px}
.mktOpt select{max-width:220px}.mktOpt input{width:72px;text-align:right}
.mktOptBar{align-items:center}.mktOptBar>.note{font-weight:550}
.mktPick{position:relative}
.mktSug{position:absolute;top:100%;left:0;right:0;z-index:30;margin-top:4px;max-height:360px;overflow:auto;background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 10px 30px rgba(16,24,40,.18);padding:4px}
.mktSugRow{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;color:var(--fg);text-align:left;padding:5px 8px;border-radius:7px;font-weight:500;font-size:13.5px}
.mktSugRow .mktIc{width:28px;flex:none}.mktSugRow .note{font-size:12px;white-space:nowrap}
.mktSugRow:hover,.mktSugRow.on{background:var(--accent-soft)}
@media (max-width:720px){.mktVars{padding-left:12px}.mktVar .mktPrice{width:auto;flex:1 1 100%;margin-left:0}.mktSugRow .note{display:none}
  .mktOpts,#mktOptF{width:100%;min-width:0}.mktOpt{display:flex;width:100%;min-width:0}.mktOpt select{flex:1 1 auto;min-width:0;max-width:none}.mktOpt input{flex:none;width:64px}
  .mktVar{min-width:0}.mktVar .mktAgo{margin-left:auto}}

/* shared prices and cloud backup (js/shared.js) */
.discordBtn{background:#5865f2;border-color:#5865f2;color:#fff;font-weight:600}.discordBtn:hover{background:#4752c4;border-color:#4752c4;color:#fff}
.mktShare{padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--raised)}
.mktShare .bar{align-items:center}
.mktShared{color:var(--accent)}
.mktSharedP b{font-size:15px;text-align:right}.mktSharedP{justify-items:end}
.mktVar.shared{border-style:dotted;background:none}.mktVar.shared .mktPrice{text-align:right}
.cloudBar{align-items:center}
.mktSell{display:inline-flex;flex-direction:row;align-items:center;gap:3px;font-size:12px;color:var(--fg);white-space:nowrap;vertical-align:middle}.mktSell input{margin:0;width:13px;height:13px;flex:none}
.mktSellers{font-weight:600}
.mktSellerList{margin:0 12px 10px 56px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--raised);display:grid;gap:6px}
.mktSeller{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}.mktSeller .mono{margin-left:auto}
.discordLink{color:#5865f2;font-weight:600;font-size:12.5px}
@media (max-width:720px){.mktSellerList{margin-left:12px}}
.mktSlots{display:flex;flex-wrap:wrap;gap:6px}.mktSlots select{max-width:190px}
.mktCopyBar{align-items:center;padding:8px 10px;border:1px dashed var(--line-strong);border-radius:8px;background:var(--raised)}.mktCopyBar>.note{flex:1 1 100%}
@media (max-width:720px){.mktSlots,.mktSlots select{width:100%;max-width:none}}
/* the cloud sync's choice when both sides changed (js/shared.js) */
.syncAsk{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:60;width:min(560px,calc(100% - 32px));background:var(--surface);color:var(--fg);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 12px 40px rgba(16,24,40,.25);padding:14px 16px;display:grid;gap:10px}
.syncSides{display:grid;grid-template-columns:1fr 1fr;gap:10px}.syncSides>div{display:grid;gap:2px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--raised);font-size:13px}
@media (max-width:520px){.syncSides{grid-template-columns:1fr}}
/* + Add item: the Market's popup (index.html #addDlg). Its suggestions sit in the flow, so the popup's scroll never cuts them off */
.mktDlg{width:min(640px,calc(100vw - 32px));max-height:min(720px,calc(100vh - 48px));margin-top:8vh}
.mktDlg .mktPick{position:static}.mktDlg .mktSug{position:static;margin-top:6px;box-shadow:none;max-height:260px}
.mktDlg .mktSell{align-self:flex-end;margin-bottom:9px}
.mktSugMore{padding:6px 8px}.mktDlg .mktSug{max-height:320px}
/* a copy's slot buttons and their picker (the card, stone or egg with its icon; js/render.js copyFields) */
.slotBtn{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:3px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--fg);font-weight:500;max-width:240px}
.slotBtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.slotBtn.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.slotPick{flex:1 1 100%;display:grid;gap:6px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.slotList{display:grid;gap:1px;max-height:240px;overflow:auto}
.slotOpt{display:flex;align-items:center;gap:8px;border:0;background:none;color:var(--fg);text-align:left;padding:4px 8px;border-radius:6px;font-weight:500}.slotOpt:hover{background:var(--accent-soft)}
.slotMore{padding:4px 8px}
.addPicked{align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--raised)}.addPicked .mktIc{min-height:32px}
.mktItemChip{align-items:center;gap:8px;width:fit-content;padding:4px 6px 4px 10px;border:1px solid var(--accent);border-radius:99px;background:var(--accent-soft)}.mktItemChip .mktIc{min-height:24px}
#mktSug{min-width:min(380px,calc(100vw - 48px))}#mktSug .mktSugRow .note{white-space:nowrap}
.mktPanes{margin-bottom:-4px}.mktPanes .seg button{padding:7px 18px;font-size:14px}
.mktPanes .seg button[aria-selected="true"]{background:var(--surface);color:var(--fg);box-shadow:0 1px 2px rgba(16,24,40,.12)}
.mktCatBar{align-items:flex-start}.mktFavOnly{white-space:nowrap}.mktFav{border:0;background:none;padding:0 2px;font-size:18px;line-height:1;color:var(--muted);cursor:pointer;align-self:center}.mktFav:hover{color:var(--fg)}.mktFav.on{color:#e0a800}
.mktRowF{grid-template-columns:20px 32px minmax(0,1fr) 170px 74px}
@media (max-width:720px){.mktRowF{grid-template-columns:20px 28px minmax(0,1fr) auto}.mktRowF .mktPrice{grid-column:3/4}.mktRowF .mktMove{grid-column:4;grid-row:2}}
/* Affixes tab: one block per item that adds affixes, its gear beside what it rolls */
.affItem{padding:14px 0;border-top:1px solid var(--line)}.affItem:first-child{border-top:0}
.affItem h3{margin:0}
.affCols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;margin-top:10px}
.affHead{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.affGear{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.affTable td:first-child{font-weight:500}
@media (max-width:720px){.affCols{grid-template-columns:minmax(0,1fr)}}
/* the details popup's Made from: each way's materials as a small table */
.matTable{margin-top:4px}.matTable th{cursor:default}.matTable td.name a{white-space:normal}
.affTable .wayRow td{background:var(--raised);white-space:normal;font-family:var(--body);font-size:12.5px}
.affTable .wayRow td{font-weight:600}
.matTable td.boxOne{vertical-align:middle;text-align:center;white-space:normal;font-family:var(--body);font-weight:600;color:var(--accent);border-left:1px solid var(--line);min-width:96px}
.affGearLong{max-height:420px;overflow:auto;padding-right:6px}
.affDetails{margin-top:4px}.affDetails summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--accent);padding:2px 0}.affDetails .scroll{margin-top:6px}
#affixGear .scroll{max-height:420px;overflow:auto}
/* Item info: the item picked in the list, under it */