/* The simple interface (decision 310): a dark admin panel. Tokens live in theme.css (linked first); this sheet is the
   only rule sheet besides it. Flat panels with a header strip, one table density (36 px rows), game icons at 45 px or
   30 px inside a 1 px frame, the accent for focus / links / the open entry, the brand for the one primary action.
   Green / amber / red only as dots, chips and borders. */
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--fg);font:var(--fs-3)/1.45 var(--font)}
td,.num,.fact>b{font-variant-numeric:tabular-nums}
a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}
small{color:var(--fg-2);font-size:var(--fs-1)}small.block{display:block}b{font-weight:600}
h1{font-size:var(--fs-5);line-height:1.3;margin:0;font-weight:600}h2{font-size:var(--fs-4);margin:0;font-weight:600}
h3{font-size:var(--fs-1);margin:0 0 4px;color:var(--fg-2);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.dim{color:var(--fg-2)}.grow{flex:1}[hidden]{display:none!important}
.svg{display:inline-flex;flex:none;vertical-align:-3px}
*{scrollbar-width:thin;scrollbar-color:var(--line-strong) var(--bg)}
::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:6px}::-webkit-scrollbar-track{background:var(--bg)}

/* inputs, buttons, focus */
input,select,button,textarea{font:inherit;color:inherit}
input:where(:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file])),select{height:32px;padding:0 8px;background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--r);min-width:0}
textarea{display:block;width:100%;background:var(--bg);color:var(--fg);border:1px solid var(--line-strong);border-radius:var(--r);padding:8px;min-height:64px;resize:vertical}
input[type=checkbox],input[type=radio]{accent-color:var(--accent)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}
:where(a,button,summary,[tabindex],.i):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#main:focus,#main:focus-visible{outline:0}
button{cursor:pointer}button:disabled{cursor:not-allowed}
.btn{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r);color:var(--fg);white-space:nowrap}
.btn:hover:not(:disabled){border-color:var(--fg-3);background:var(--hover);text-decoration:none}
.btn:disabled{color:var(--fg-3)}
.btn.sm{height:28px;padding:0 8px;font-size:var(--fs-1)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand);font-weight:600}
.btn.primary:hover:not(:disabled){background:var(--brand);border-color:var(--accent)}
.btn.primary:disabled{background:var(--surface-2);border-color:var(--line-strong);color:var(--fg-3)}
.btn.on{border-color:var(--accent);color:var(--accent)}
button.link{background:none;border:0;padding:0 2px;color:var(--accent)}
#progress{position:fixed;inset:0 0 auto 0;height:2px;background:var(--accent);opacity:0;z-index:130}
body.busy #progress{opacity:1}

/* shell and menu */
.shell{display:grid;grid-template-columns:var(--menu) minmax(0,1fr);height:100vh;min-height:0}
.menu{position:relative;height:100vh;min-height:0;background:var(--menu-bg);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:24px 12px 12px}
.brand{position:relative;display:flex;align-items:center;gap:8px;padding:0;margin:0 8px 24px;color:var(--fg)}.brand:hover{text-decoration:none}
.brand .brand-horizontal{width:174px;height:64px;object-fit:contain}.brand .brand-icon{display:none;width:48px;height:48px;object-fit:contain}.brand>small{display:none}
.menu-toggle{margin:0 0 8px 8px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface-2);color:var(--fg);width:32px;height:32px}
.msearch{display:flex;align-items:center;gap:8px;margin:0 0 8px;padding:0 8px;height:32px;background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--r);color:var(--fg-2)}
.msearch:focus-within{border-color:var(--accent);outline:2px solid var(--accent);outline-offset:2px}
.msearch input,.msearch input:focus{background:none;border:0;width:100%;height:30px;outline:0;padding:0}
#nav{overflow:auto;min-height:0;padding-bottom:8px}
.grp{display:flex;align-items:center;gap:8px;width:100%;height:32px;margin:8px 0 4px;padding:0 12px;background:none;border:0;border-radius:var(--r);color:var(--fg-3);font-size:var(--fs-1);letter-spacing:.08em;text-transform:uppercase;text-align:left}
.grp:hover{background:var(--hover)}
.grp em{margin-left:auto;font-style:normal;font-size:var(--fs-1);background:var(--surface-2);border-radius:9px;padding:0 8px;line-height:18px;color:var(--fg-2);letter-spacing:0}
.grp.open .svg{transform:rotate(90deg)}
.msub{display:grid;padding:0;gap:1px}
.msub a{display:flex;align-items:center;gap:8px;min-height:36px;padding:8px 12px;line-height:18px;font-size:var(--fs-2);color:var(--fg-2);border-left:3px solid transparent;border-radius:3px}
.msub a:hover{background:var(--hover);color:var(--fg);text-decoration:none}
.msub a.on{border-left-color:var(--brand);background:var(--surface-2);color:var(--fg)}
.msub svg{width:16px;height:16px;flex:none}
.migration-heading{font-size:var(--fs-1);letter-spacing:.5px;padding:12px 12px 4px;color:var(--fg-2)}
.menu-narrow{--menu:64px}
.menu-narrow .menu{padding:16px 8px 8px}
.menu-narrow .brand-horizontal,.menu-narrow .brand>small,.menu-narrow .msearch,.menu-narrow .grp,.menu-narrow #nav .msub span,.menu-narrow .status{display:none}
.menu-narrow .brand{margin:0 0 16px;justify-content:center}.menu-narrow .brand .brand-icon{display:block}
.menu-narrow .menu-toggle{margin:0 auto 8px}
.menu-narrow #nav .msub{display:block}.menu-narrow #nav .msub a{justify-content:center;padding:10px 0}
.status{margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--line);display:grid;gap:8px;font-size:var(--fs-1)}
.status .st small{display:none}.status .who{line-height:1.8}
#world{display:grid;gap:8px}
.st{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:600;white-space:nowrap}
.st i{width:8px;height:8px;border-radius:50%;background:var(--fg-3)}
.st small{flex-basis:100%;font-weight:400;padding-left:16px;white-space:normal}
.st.ok i{background:var(--ok)}.st.bad i{background:var(--bad)}.st.off,.st.wait,.st.dim{color:var(--fg-2);font-weight:400}
.last:empty{display:none}.last{color:var(--fg-2)}
.who{color:var(--fg-2)}

/* the workspace */
.workspace{min-width:0;min-height:0;display:flex;flex-direction:column}
.workspace>header{height:56px;min-height:56px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);font-size:var(--fs-1);letter-spacing:.6px;color:var(--fg-2)}
.workspace>header>span:first-child{display:flex;align-items:center}
.workspace>header b{color:var(--fg);font-weight:400;font-size:var(--fs-2);letter-spacing:0}
.head-tools{display:flex;align-items:center;gap:12px}
.hsearch{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 10px;border:1px solid var(--line-strong);border-radius:var(--r);color:var(--fg-2);text-decoration:none;letter-spacing:0;font-size:var(--fs-2)}
.hsearch:hover{color:var(--fg);background:var(--hover)}
.hsearch kbd{font:inherit;font-size:var(--fs-1);padding:0 5px;border:1px solid var(--line);border-radius:3px;color:var(--fg-3)}
.help-list{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--fg-2);line-height:1.5}
.workspace>header .review{padding:4px 8px;border:1px solid var(--line-strong);border-radius:var(--r);color:var(--accent);letter-spacing:0}
main{min-width:0;outline:0;overflow:auto;height:100%}
#main{flex:1;height:auto;min-height:0;padding:0}
.view{padding:24px 24px 96px;display:flex;flex-direction:column;gap:var(--gap);min-width:0;min-height:100%}
.view.framed{padding:0;gap:0;height:100%}
.stack{display:grid;gap:var(--gap)}

/* login: one centred card, the logo above the form */
.login{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:radial-gradient(900px 500px at 50% 0%,#1d1418 0%,var(--bg) 65%)}
.login-shell{width:min(360px,100%);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 64px rgba(0,0,0,.55)}
.login-brand{display:block;width:150px;height:auto;margin:0 auto 6px;object-fit:contain}
.login-card{display:grid;gap:14px;padding:32px 28px 28px}
.login-note{margin:0;padding:10px 12px;border-left:3px solid var(--accent);background:var(--surface-2);border-radius:var(--r);font-size:var(--fs-2);color:var(--fg)}
.login-field{display:grid;gap:6px}.login-field>span:first-child{font-size:var(--fs-2);color:var(--fg-2);font-weight:500}
.login-field input{height:40px;font-size:var(--fs-3);padding:0 12px;width:100%;box-sizing:border-box}
.login-pass{position:relative;display:block}.login-pass input{padding-right:76px}
.login-show{position:absolute;right:4px;top:4px;height:32px;padding:0 10px;border:0;border-radius:var(--r);background:transparent;color:var(--fg-2);font-size:var(--fs-1);cursor:pointer}.login-show:hover{background:var(--hover);color:var(--fg)}
.login-caps{margin:-8px 0 0;font-size:var(--fs-1);color:var(--warn)}
.login-error{margin:0;min-height:0;font-size:var(--fs-2);color:var(--bad)}.login-error:empty{display:none}
.login-error:not(:empty){padding:10px 12px;border-left:3px solid var(--bad);background:rgba(224,108,108,.08);border-radius:var(--r)}
.login-submit{height:42px;font-size:var(--fs-3);font-weight:600;justify-content:center;width:100%}
@media (max-width:420px){.login-card{padding:24px 18px}}

/* the header band */
.band{display:flex;align-items:flex-start;flex-wrap:wrap;gap:16px;padding:0 0 12px;margin:0}
.band>.portrait{display:none}
.band h1{font-size:var(--fs-5);line-height:1.3;font-weight:600}
.band p{font-size:var(--fs-2);margin:4px 0 0;max-width:800px}.band p:empty{display:none}
.portrait{width:64px;height:64px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);color:var(--fg-2);flex:none}
.bt{min-width:0}.bt p{margin:4px 0 0;color:var(--fg-2)}
.facts{margin-left:auto;display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.fact{min-width:86px;padding:6px 12px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);display:grid}
.fact>span{font-size:var(--fs-1);color:var(--fg-2);white-space:nowrap}.fact>b{font-size:var(--fs-5)}
.band .facts{gap:24px;margin-left:auto}
.band .fact{min-width:70px;padding:0;background:transparent;border:0;display:flex;flex-direction:column-reverse}
.band .fact>b{font-size:var(--fs-5);font-weight:600}.band .fact>span{font-size:var(--fs-1);color:var(--fg-2)}

/* sections */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.ph{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 16px;background:transparent;border-bottom:1px solid var(--line);border-radius:var(--r) var(--r) 0 0}
.ph>div{flex:1;min-width:0}
.ph h2{display:flex;gap:8px;align-items:center;font-size:var(--fs-4);margin:0;cursor:help}
.help{margin:2px 0 0;color:var(--fg-2);font-size:var(--fs-1)}
.pb{padding:16px}
.cntb{color:var(--fg-2)}
.two{display:grid;grid-template-columns:400px 1fr;gap:var(--gap);align-items:start}.two>div{display:grid;gap:var(--gap);min-width:0}
.two.even{grid-template-columns:1fr 1fr}
.emptybox{display:grid;justify-items:start;gap:8px;padding:16px;border:1px dashed var(--line-strong);border-radius:var(--r)}.emptybox span{color:var(--fg-2)}
.toolbar{display:flex;align-items:center;gap:12px;margin:8px 0;flex-wrap:wrap}
.badline{color:var(--fg);margin:4px 0;padding-left:8px;border-left:2px solid var(--bad)}.badline:empty{display:none}
.warnline{color:var(--fg);margin:0;padding:8px 12px;border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:var(--r);background:var(--surface)}
.hint{color:var(--fg-2);font-size:var(--fs-1);margin:8px 0 0}
details.detail{margin:8px 0 0;font-size:var(--fs-1);color:var(--fg-2)}details.detail summary{cursor:pointer}details.detail ul{margin:4px 0 0;padding-left:16px}
.tabset,.tabpane,.panel,.panelbody{min-width:0;max-width:100%}

/* tabs */
.tabs{display:flex;gap:24px;padding:0 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs button{padding:12px 0;font-size:var(--fs-2);color:var(--fg-2);background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button:hover{color:var(--fg)}
.tabs button.on{color:var(--fg);border-bottom-color:var(--accent);font-weight:600}
.count,.tabs em,.ptabs em{font-style:normal;font-weight:400;font-size:var(--fs-1);color:var(--fg-2);margin-left:8px}
.tabset{display:grid;gap:var(--gap)}
.panel .tabset{gap:12px}
.ptabs{display:flex;gap:8px;margin-bottom:8px;flex-wrap:wrap}

/* tables: one density */
.tablebox{min-width:0;max-width:100%;overflow-x:auto}
.filter{width:300px;max-width:100%;margin:0 0 8px}
table.grid,.grid{width:100%;border-collapse:collapse;font-size:var(--fs-2)}
.grid th{position:sticky;top:0;z-index:2;text-align:left;font-weight:600;font-size:var(--fs-1);color:var(--fg-2);padding:6px 12px;height:var(--row);background:var(--surface-2);border-bottom:1px solid var(--line-strong);box-shadow:inset 0 -1px 0 var(--line-strong);white-space:nowrap}
.grid th.sortable{cursor:pointer}.grid th.asc::after{content:" ↑";color:var(--accent)}.grid th.desc::after{content:" ↓";color:var(--accent)}
.grid td{padding:6px 12px;height:var(--row);border-bottom:1px solid var(--line);vertical-align:middle;overflow-wrap:anywhere}
.grid td:has(>.icon,>.item>.icon,>.mob>.icon,>.cellv .icon){padding-top:2px;padding-bottom:2px}
.grid tbody tr:last-child>td{border-bottom:0}
.grid tbody tr:hover>td{background:var(--hover)}
.grid tbody tr.selectable{cursor:pointer}
.grid tbody tr.selected>td{background:var(--surface-2)}.grid tbody tr.selected>td:first-child{box-shadow:inset 3px 0 var(--brand)}
.grid .num,.grid td.num{text-align:right;white-space:nowrap}td.num .cellv{justify-content:flex-end}
.grid .n{width:54px;color:var(--fg-2);text-align:center}
.grid tr.changed>td{background:var(--changed)}.grid tr.changed>td:first-child{box-shadow:inset 2px 0 var(--warn)}
.grid tr.off{opacity:.55}.grid td.none{color:var(--fg-2)}
.grid td.acts{text-align:right;white-space:nowrap}.acts .btn{margin-left:8px}
.grid tr.sub>td{background:var(--bg);height:auto;padding:12px 12px 12px 76px}.grid tr.sub:hover>td{background:var(--bg)}
.grid tr:has(>td details[open])>td{vertical-align:top}
table.diff td.before{color:var(--fg-2);text-decoration:line-through}table.diff td.after{color:var(--fg);font-weight:600}
.col{display:block;font-size:var(--fs-1);color:var(--fg-2)}
.grid .svg{vertical-align:middle}
.grid .item,.grid .mob{display:inline-flex;align-items:center;gap:8px;min-width:0;flex-wrap:nowrap}
.grid .item-text{display:flex;flex-direction:column;min-width:0;line-height:16px}
.grid .item small{display:block;font-size:var(--fs-1);line-height:16px}
.grid .item b,.grid .mob b{display:inline;max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid .mob small{font-size:var(--fs-1);color:var(--fg-2)}
.value-table{width:100%;border-collapse:collapse;font-size:var(--fs-2)}.value-table td{padding:6px 12px;border-bottom:1px solid var(--line);height:var(--row)}.value-table tr:last-child td{border-bottom:0}.value-table td:first-child{width:58%;color:var(--fg-2)}.value-table td:last-child{text-align:right}.value-table .editable{min-width:65px;text-align:right}.value-table td b{font-weight:500}
.value-table select{max-width:100%;font-size:var(--fs-1)}
.table-tools{display:flex;align-items:center;gap:12px;margin:0 0 8px}
.column-picker{position:relative;font-size:var(--fs-1)}.column-picker summary{cursor:pointer;padding:0 12px;line-height:30px;border:1px solid var(--line-strong);border-radius:var(--r)}
.column-options{position:absolute;right:0;top:100%;z-index:30;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);min-width:210px;box-shadow:var(--shadow);padding:12px;display:grid;gap:8px}.column-options label{display:flex;align-items:center;gap:8px}.column-options input{width:16px;height:16px}
.table-count{display:block;text-align:right;padding:8px 0}
.data-table>.table-tools select{font-size:var(--fs-1)}
.data-table .tablebox{max-height:calc(100vh - 280px);overflow:auto;position:relative}
.data-table .grid{min-width:650px;width:100%}.data-table .grid td:first-child{min-width:160px}.data-table .grid td:not(:first-child){white-space:nowrap}
.data-table .paging{position:sticky;bottom:0;background:var(--surface);padding:8px}
.paging{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:12px;border-top:1px solid var(--line);font-size:var(--fs-1);flex-wrap:wrap}.paging>span:first-child{margin-right:auto}.page-number{width:56px}
.filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}.filter-chip{border:1px solid var(--line-strong);background:var(--surface-2);color:var(--fg);padding:4px 8px;border-radius:var(--r);font-size:var(--fs-1);cursor:pointer}
.filter-message{font-size:var(--fs-2);color:var(--fg-2)}

/* game icons: 45 px images at 1:1 (47 px frame) or 2/3 (30 px image, 32 px frame) */
.icon{--icon:var(--icon-sm);position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--icon);height:var(--icon);min-width:var(--icon);max-width:var(--icon);flex:0 0 var(--icon);padding:0;border:1px solid var(--line-strong);border-radius:3px;overflow:hidden;background:var(--bg);color:var(--fg-2);vertical-align:middle}
.icon.big,.icon.lg,.icon.xl,.icon.inv,.shop-slot .icon,.drop-cell .icon,.paper-card>.icon{--icon:var(--icon-md)}
.icon.chip{--icon:var(--icon-sm)}
.icon img{display:block;width:100%;height:100%;object-fit:contain;margin:0;image-rendering:auto}
.icon.none::before{content:'—';color:var(--fg-3);font-size:var(--fs-1)}.icon.none img{display:none}
.icon[data-item-type='1']{border-bottom-color:var(--grade-1);box-shadow:0 1px 0 var(--grade-1)}.icon[data-item-type='2']{border-bottom-color:var(--grade-2);box-shadow:0 1px 0 var(--grade-2)}.icon[data-item-type='3']{border-bottom-color:var(--grade-3);box-shadow:0 1px 0 var(--grade-3)}.icon[data-item-type='4']{border-bottom-color:var(--grade-4);box-shadow:0 1px 0 var(--grade-4)}.icon[data-item-type='5']{border-bottom-color:var(--grade-5);box-shadow:0 1px 0 var(--grade-5)}
.icon-plus,.icon-count{position:absolute;padding:0 2px;background:rgba(11,11,14,.8);color:var(--fg);font-style:normal;font-size:11px;line-height:12px;pointer-events:none}.icon-plus{top:0;right:0}.icon-count{bottom:0;right:0}

/* items, monsters */
.item,.it{display:inline-flex;align-items:center;gap:8px;vertical-align:middle;color:var(--fg);min-width:0;max-width:100%}
.item-text,.it>span:last-child{display:grid;line-height:1.25;min-width:0}
.item-text b,.mob b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.item:hover,a.mob:hover{text-decoration:none}a.item:hover b,a.mob:hover b{color:var(--accent)}
.mob{display:inline-grid;line-height:1.25;color:var(--fg);min-width:0}
.item.unknown b{color:var(--bad)}
.icons{display:inline-flex;gap:4px;flex-wrap:wrap}
.tw{display:inline-block;width:22px;background:none;border:0;padding:0;color:var(--accent);vertical-align:middle;font-size:var(--fs-2)}
.g1{color:var(--grade-1)}.g2{color:var(--grade-2)}.g4{color:var(--grade-4)}.g5{color:var(--grade-5)}
.search{width:100%}.search.big{font-size:var(--fs-4);height:40px;padding:0 12px}
.hitgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:4px 16px}
.hitgrid>*{padding:6px 8px;border-radius:var(--r)}.hitgrid>a:hover,.sel{background:var(--hover)}
.sel{outline:1px solid var(--accent)}
.results{display:grid;gap:var(--gap)}
.box-symbol{display:inline-flex;align-items:center;gap:8px;color:var(--accent)}.box-symbol small{display:block;font-size:var(--fs-1);color:var(--fg)}
.badge-type{display:inline-flex;padding:2px 6px;border:1px solid var(--line-strong);border-radius:var(--r);color:var(--fg);white-space:nowrap}
.ellip{display:inline-block;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}

/* the (i) and the floating box */
.i{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;line-height:1;flex:0 0 16px;margin:0!important;border:1px solid var(--line-strong);border-radius:50%;font-size:var(--fs-1);font-style:italic;color:var(--fg-2);vertical-align:middle;position:relative;top:-1px;font-weight:400;cursor:help;user-select:none}
.i:hover{color:var(--accent);border-color:var(--accent)}
.lbl{display:inline-flex;align-items:center;gap:6px;line-height:1.45;white-space:nowrap;cursor:help}
.pop{position:fixed;z-index:120;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r);padding:8px 12px;max-width:min(360px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow:auto;white-space:normal;overflow-wrap:anywhere;font-size:var(--fs-1);box-shadow:var(--shadow)}
.pop.bare{padding:0;border:0;background:none;box-shadow:none}.pop.bare>.gtip{box-shadow:var(--shadow)}
.pop .dim{opacity:1}
.tip p{margin:0 0 4px}.tip p.dim{margin:0}
.rule-note{margin:4px 0 0;color:var(--fg-2);font-size:var(--fs-1);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:640px}.rule-note:hover{cursor:help}

/* the item card (the game's tooltip colours) and values edited in place */
.tooltip,.gtip{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px}
.gtip{width:350px;max-width:calc(100vw - 20px);max-height:calc(100vh - 20px);overflow:auto;border-color:var(--line-strong)}
.game-tooltip-preview{max-width:400px}
.th,.gtip-head{display:flex;gap:12px;align-items:center;margin-bottom:8px}.th>div,.gtip-head>div{display:grid;min-width:0}
.gname{font-size:var(--fs-4)}.gtip .gname{font-weight:700}
.gtip .gname.t0,.gname.g0{color:var(--grade-0)}.gtip .gname.t1,.gname.g1{color:var(--grade-1)}.gtip .gname.t2,.gname.g2{color:var(--grade-2)}.gtip .gname.t3,.gname.g3{color:var(--grade-3)}.gtip .gname.t4,.gname.g4{color:var(--grade-4)}.gtip .gname.t5,.gname.g5{color:var(--grade-5)}
.gkind,.gid{color:var(--fg-2);font-size:var(--fs-1)}
.tsec,.gsec{border-top:1px solid var(--line);padding:8px 0 4px;font-size:var(--fs-2)}.gtip .gsec{border-top-color:var(--line-strong);padding:8px 0}
.tl,.gline{display:flex;justify-content:space-between;align-items:center;gap:12px;line-height:1.7}.tl>span:first-child,.gline>span:first-child{color:var(--fg-2)}
.gtip .gline{color:#fff}.gtip .gline.gbonus{color:var(--grade-3)}
.gdesc{color:var(--fg-2);margin:0}.gtip .gdesc{padding:4px 0}.gbad{color:var(--bad);margin:0 0 4px}.gtip .gbad{color:#ff3c3c}
/* H34: the game's own tooltip (item-tip.js; the colours of src/Client/WarFare/ItemTooltipRules.h), in the game's dark box in either theme */
.gtip.itip{background:rgba(11,10,9,.94);border:1px solid #A08848;color:#E4E4E4;font-size:var(--fs-2);line-height:1.45;padding:8px 10px}
.itip .gid{color:#BDBDBD}.itip .gtip-head{align-items:flex-start;margin-bottom:4px}
.it-head-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:var(--fs-1)}
.it-badge{border:1px solid currentColor;border-radius:3px;padding:0 4px;font-size:var(--fs-1)}
.it-group{border-top:1px solid #4A3F26;padding:5px 0}
.it-row{display:grid;grid-template-columns:max-content 1fr;gap:10px;align-items:baseline}
.it-dur{display:flex;gap:4px;align-items:center;font-size:var(--fs-1)}
.it-bar{flex:1;min-width:48px;height:4px;background:#2A2620;margin-left:8px}.it-bar i{display:block;height:4px;background:#34C27E}.it-bar i.broken{background:#E83030}
.it-centre{text-align:center}
.it-diamond{display:inline-block;width:6px;height:6px;transform:rotate(45deg);background:currentColor;margin-right:6px;vertical-align:middle}
.it-remark{border-top:1px solid #4A3F26;padding:5px 0;color:#E6DCBE}.it-remark-head{color:#FFC857;font-weight:700}
.it-general{color:#FFFFFF}.it-magic{color:#8080FF}.it-rare{color:#FFFF00}.it-craft{color:#80FF00}.it-unique{color:#DCC77C}.it-upgrade{color:#C87CC7}.it-rebirth{color:#FF83A6}.it-rebirth-unique{color:#FFAD4D}
.it-kind{color:#BDBDBD}.it-value-name{color:#E4E4E4}.it-value{color:#FFFFFF}.it-weapon-def{color:#C9D3DD}.it-met{color:#FFFFFF}.it-unmet{color:#E83030}.it-dim{color:#B4B4B4}
.it-flame{color:#FF9A3C}.it-glacier{color:#52D4F5}.it-lightning{color:#FFF380}.it-poison{color:#22B88A}.it-magic-resist{color:#FF94E6}.it-curse{color:#8F6BFF}.it-hp-absorb{color:#FF5C7A}.it-mp{color:#C29BFF}.it-bonus{color:#8BE04C}
dialog.dialog>div.pop{display:block;padding:8px 12px}dialog.dialog>div.pop.bare{padding:0}
.kvgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:0 24px}
.val{background:none;border:0;border-bottom:1px dashed var(--line-strong);border-radius:0;padding:0 2px;font-weight:600;cursor:text;min-width:26px;text-align:right}
.val:hover{border-bottom-color:var(--accent)}
.val s{color:var(--fg-2);font-weight:400;margin-left:8px}
.val-input{width:110px;text-align:right}
.grid .val-input,select.cellsel{height:28px;padding:0 6px}
.gname .val,.gdesc .val{text-align:left;font-weight:inherit;white-space:normal}.gname .val-input,.gdesc .val-input{width:100%;text-align:left}
.fact .val{font-size:var(--fs-4);text-align:left}.fact .val-input{width:86px;text-align:left}
.named small{font-weight:400}
.edit{display:inline-flex;align-items:baseline;font-weight:600}.edit .val{min-width:0;padding:0 1px}
.rowstate{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}.rowstate small{flex-basis:100%}
/* a changed value: the changed tint plus a 2 px amber bar on the left */
.val.changed,.mem.changed,.drop-cell.changed,.shop-slot.changed,.ladder-rate.changed{background:var(--changed);box-shadow:inset 2px 0 var(--warn)}
.val.changed{color:var(--fg);border:0;border-radius:0 var(--r) var(--r) 0;padding:1px 8px}.edit .val.changed{padding:1px 8px;margin-left:2px}
.mem.changed,.drop-cell.changed{border-color:var(--line-strong)}
.rate-cell.changed{background:var(--changed);border-left:2px solid var(--warn);padding-left:6px}

/* the shared choice, a group's members */
.choice{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}.ct{grid-column:1/-1;color:var(--fg-2)}
.opt{display:flex;gap:12px;align-items:flex-start;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);cursor:pointer}
.opt.on{border-color:var(--accent)}.opt span{display:grid}.opt input{margin-top:3px}
.subhead{color:var(--fg-2);font-size:var(--fs-1);margin-bottom:8px}
.members{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:8px}
.mem{display:flex;align-items:center;gap:8px;padding:4px 8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);min-width:0}
.mem .item{flex:1}.mp{color:var(--fg-2);white-space:nowrap}
.rowbtns{display:inline-flex;gap:8px;align-items:center}
.more{display:inline-block;margin:8px 16px 0 0}

/* the action bar (fixed to the bottom of the workspace) */
.barslot{position:sticky;bottom:0;margin:auto calc(var(--pad) * -1) 0;z-index:15}
.actionbar{position:fixed;left:var(--menu);right:0;bottom:0;z-index:20;min-height:64px;margin:0;display:flex;align-items:center;gap:12px;padding:12px 24px;background:var(--surface);border:0;border-top:1px solid var(--line-strong);border-radius:0}
.actionbar.idle{border-top-color:var(--line)}.actionbar>div{display:grid;min-width:0}.actionbar small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:760px}
.actionbar .abtxt{min-width:0}.actionbar .abtxt small{font-size:var(--fs-1)}.actionbar .btn.primary{margin-left:auto}

/* the detail drawer lies over the list; the list keeps its width */
.detail-drawer{position:fixed;z-index:90;right:0;top:0;bottom:0;width:clamp(420px,36vw,560px);background:var(--bg);border-left:1px solid var(--line-strong);box-shadow:var(--shadow);display:flex;flex-direction:column}
.drawer-header{display:flex;justify-content:space-between;gap:8px;padding:12px;border-bottom:1px solid var(--line-strong);flex:none}
.view.drawer-view{padding:16px;overflow:auto;min-height:0;flex:1}
.drawer-view .band{flex-wrap:wrap}.drawer-view .facts{margin:0}.drawer-view .data-groups,.drawer-view .item-layout,.drawer-view .drop-explorer{grid-template-columns:1fr}.drawer-view .gtip{width:100%}

/* the character window */
.pgrid{display:grid;grid-template-columns:auto 1fr 330px;gap:var(--gap);align-items:start}.pmid,.pright{display:grid;gap:var(--gap);min-width:0}
.equip{display:grid;gap:8px;justify-content:center}.er{display:flex;gap:8px}
.bag{display:grid;grid-template-columns:repeat(7,var(--slot));gap:8px}.store{display:grid;grid-template-columns:repeat(8,var(--slot));gap:8px}
.slot{width:var(--slot);height:var(--slot);position:relative;display:grid;place-items:center;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:0}
.slot:hover:not(:disabled){border-color:var(--fg-3)}.slot.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}.slot.pending{border-color:var(--warn);background:var(--changed)}
.slot.empty>span{font-size:var(--fs-1);color:var(--fg-2);text-align:center;line-height:1.15;padding:2px}.slot.gap{visibility:hidden}
.cnt,.plus,.held{position:absolute;font-style:normal;font-size:11px;line-height:1;padding:2px 3px;background:rgba(0,0,0,.85);border-radius:2px;color:var(--fg)}
.cnt{right:2px;bottom:5px}.plus{left:2px;top:2px;color:var(--accent)}.held{right:2px;top:2px;color:var(--bad)}
.dur{position:absolute;left:3px;right:3px;bottom:2px;height:3px;background:rgba(0,0,0,.55);text-decoration:none}.dur u{display:block;height:100%;background:var(--ok)}.dur.low u{background:var(--bad)}
.todo{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:4px}
.todo li{display:flex;justify-content:space-between;gap:8px;padding:8px 12px;background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--warn);border-radius:var(--r)}
.trayb{display:flex;gap:8px;flex-wrap:wrap}
.selit{display:flex;gap:12px;align-items:center;margin-bottom:8px}.selit>div{display:grid;min-width:0}
form.inline{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}form.inline .field{margin:0;width:230px}form.inline .btn{margin-top:22px}

/* sent changes, messages, dialogs */
.jobs{position:fixed;right:16px;bottom:72px;display:grid;gap:8px;z-index:20;justify-items:end}
.job{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line-strong);border-left:3px solid var(--accent);border-radius:var(--r);padding:8px 12px;max-width:560px;font-size:var(--fs-1)}
.job.ok{border-left-color:var(--ok)}.job.bad{border-left-color:var(--bad)}
.job-state{font-weight:700;white-space:nowrap;color:var(--fg)}
.job-text{color:var(--fg-2)}
.toasts{position:fixed;right:16px;top:16px;display:grid;gap:8px;z-index:110;max-width:440px}
.toast{background:var(--surface);border:1px solid var(--line-strong);border-left:3px solid var(--accent);border-radius:var(--r);padding:8px 12px;box-shadow:var(--shadow)}.toast.bad{border-left-color:var(--bad)}
dialog.dialog{background:var(--surface);color:var(--fg);border:1px solid var(--line-strong);border-radius:var(--r);padding:0;width:min(720px,94vw);max-height:88vh;overflow:auto;box-shadow:var(--shadow)}
dialog.dialog::backdrop{background:rgba(0,0,0,.7)}
dialog.dialog>form,dialog.dialog>div{padding:16px;display:grid;gap:12px}
dialog.dialog h2{font-size:var(--fs-4)}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:8px}
.how{color:var(--fg-2);margin:0;padding:8px 12px;background:var(--surface-2);border-radius:var(--r);font-size:var(--fs-1)}
.aff{margin:0;color:var(--fg-2)}
.steps{margin:0;padding-left:20px;color:var(--fg-2)}
.picker .hits{display:grid;max-height:54vh;overflow:auto}
.hit{display:block;width:100%;text-align:left;background:none;border:0;border-radius:var(--r);padding:4px 8px}.hit:hover{background:var(--hover)}
label.field{display:grid;gap:4px;font-size:var(--fs-1)}label.field .lbl{color:var(--fg-2)}label.field input,label.field select{font-size:var(--fs-3)}

/* an older screen inside the shell */
.oldbar{display:flex;align-items:center;gap:12px;padding:8px var(--pad);background:var(--surface);border-bottom:1px solid var(--line);font-size:var(--fs-1);color:var(--fg-2)}.oldbar b{color:var(--fg);font-size:var(--fs-3)}

/* the table screens' cells */
.cellv{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}.cellv .item,.cellv .mob{padding:0}.cellv .st{font-size:var(--fs-1);font-weight:500}
select.cellsel{max-width:210px;font-size:var(--fs-3)}
.val.flag{font-weight:600}.fixed{font-weight:600;color:var(--fg-2);cursor:help}
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 16px}
label.check{display:flex;align-items:center;gap:8px;cursor:pointer}label.check input{width:16px;height:16px}
.tl select{height:28px;padding:0 6px;max-width:230px}
section.fam .ph h2{font-family:var(--mono);font-size:var(--fs-3)}

/* catalog screens */
.data-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.breadcrumbs{display:flex;gap:12px;align-items:center;margin:0 0 12px;color:var(--fg-2);font-size:var(--fs-2)}
.catalog-filters{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:8px}.catalog-filters label{display:grid;gap:4px;font-size:var(--fs-1)}.catalog-filters .search{min-width:250px;max-width:420px;flex:1}.catalog-filters input[type=number]{width:90px}
.remote-count{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0;color:var(--fg-2)}.remote-pager{display:flex;gap:8px;align-items:center}.remote-pager input{width:70px}
.short-hint{color:var(--fg-2);font-size:var(--fs-2);margin:4px 0 12px}.link-set{display:flex;gap:12px;flex-wrap:wrap}
.item-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:16px}.item-layout>.panel,.item-layout>div{min-width:0}.item-layout .data-groups{grid-template-columns:repeat(2,minmax(0,1fr))}.item-layout .pb .pb{padding:0}
.overview-counts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:20px}.overview-count{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);padding:16px;background:var(--surface);border-radius:var(--r)}.overview-count b{font-size:var(--fs-5);font-variant-numeric:tabular-nums}.overview-count:hover{border-color:var(--accent)}

/* shops and NPC services */
.shop-showcase{display:grid;grid-template-columns:repeat(6,minmax(110px,1fr));gap:8px}
.shop-slot{position:relative;min-height:96px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);padding:8px;display:flex;flex-direction:column;gap:4px;justify-content:center}
.shop-slot>small{position:absolute;top:3px;right:5px;font-size:var(--fs-1)}
.shop-slot .item{flex-direction:row;align-items:center;gap:6px;max-width:100%}.shop-slot .item>span{min-width:0}
.shop-slot .item b{max-width:95px;text-align:left;font-size:var(--fs-1);white-space:normal;max-height:34px;line-height:1.35;overflow:hidden;text-overflow:ellipsis}.shop-slot .item small{display:none}
.shop-price{text-align:center;font-size:var(--fs-2);color:var(--accent)}
.shop-actions{display:flex;justify-content:center;gap:4px}.shop-actions .btn{padding:0 4px;font-size:var(--fs-1)}
.npc-service-flags{display:flex;gap:8px;flex-wrap:wrap}.npc-service-flags label{display:flex;align-items:center;gap:4px}.npc-service-flags input{width:16px;height:16px}
.service-options{display:flex;gap:8px 12px;flex-wrap:wrap;max-width:450px}.service-options label{display:inline-flex;align-items:center;gap:4px}.service-options input{width:16px;height:16px}
.npc-service-screen .service-options{gap:2px 8px}.npc-service-screen .service-options label.opt{padding:2px 4px;min-height:24px;font-size:var(--fs-1);gap:4px;line-height:1.25;background:transparent;border:0;margin:0}.npc-service-screen .cellv>.ref{display:inline;margin-left:6px}.npc-service-screen .grid .val{max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trade-options{display:flex;gap:4px 12px;justify-content:flex-end;flex-wrap:wrap}.trade-options label{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-1)}.trade-options input,.value-table input[type=checkbox]{width:16px;height:16px}

/* drops */
.drop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.drop-cell{position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-height:105px;min-width:0;padding:12px 6px;border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface-2);color:var(--fg)}
.drop-cell:hover{background:var(--hover)}.drop-cell .cell-number{position:absolute;left:6px;top:3px;font-size:var(--fs-1)}
.cell-name{font-size:var(--fs-1);text-align:center;max-width:100%;overflow-wrap:anywhere}.cell-share{font-size:var(--fs-1)}.empty-icon{font-size:32px;color:var(--fg-3);height:47px;line-height:47px}
.group-summary{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px;font-size:var(--fs-1);color:var(--fg-2)}
.assignment-tray{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.inactive{color:var(--fg-2)}.inactive .drop-rate{border-style:dashed}
.drop-explorer{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(0,1.6fr);gap:24px;align-items:start}.drop-explorer>div{min-width:0}.drop-explorer .view{padding:0;min-height:0}
.drop-explorer .band{margin-top:0}.drop-explorer .band .facts{display:none}.drop-explorer .facts{gap:12px}.drop-explorer .ph p{display:none}
.drop-rate{width:96px}
.drop-labels{display:grid;grid-template-columns:1fr 1.5fr;gap:12px;margin:12px 0}.drop-labels textarea{min-height:36px;height:36px;resize:vertical}
.drop-box-preview{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.drop-box-preview details[open]{width:100%}.drop-box-preview summary{font-size:var(--fs-1);color:var(--fg-2)}
.drop-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.38fr);gap:12px;align-items:start}.drop-detail-layout .grid .btn.sm{padding:0 6px;font-size:var(--fs-1)}.drop-detail-layout .grid .item b{max-width:250px}.drop-detail-layout .group-summary{margin-top:8px;font-size:var(--fs-2)}.drop-detail-layout .group-summary>*{margin-right:16px}.drop-detail-layout .assignment-tray{margin-top:8px}.drop-detail-layout .grid .mob small{display:none}
.drop-detail-layout>.panel:last-child .grid th{white-space:normal}.drop-detail-layout>.panel:last-child .grid th,.drop-detail-layout>.panel:last-child .grid td{padding-left:6px;padding-right:6px}.drop-detail-layout>.panel:last-child .grid .mob b{white-space:normal;max-width:100%;overflow-wrap:anywhere}
.family-ladders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}.family-ladders .grid .item b{max-width:210px}

/* upgrade screens */
.upgrade-workbench{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start}
.paper-browser{position:sticky;top:0;border-right:1px solid var(--line-strong);padding-right:16px}.paper-browser>input{width:100%}
.class-chips{display:flex;flex-wrap:wrap;gap:4px;padding:12px 0}.class-chips button{border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface);padding:4px 8px;font-size:var(--fs-1);cursor:pointer}.class-chips button[aria-pressed=true]{border-color:var(--accent);background:var(--hover)}
.paper-list{max-height:calc(100vh - 280px);overflow:auto;padding-right:4px}.paper-group{padding:12px 0 4px;border-bottom:1px solid var(--line)}
.paper-card{display:flex;align-items:center;gap:8px;border:0;border-left:3px solid transparent;border-radius:var(--r);background:transparent;width:100%;padding:8px;text-align:left;cursor:pointer}
.paper-card.selected{background:var(--hover);border-left-color:var(--brand)}.paper-card:hover{background:var(--surface)}.paper-card>span:not(.icon){min-width:0}
.paper-card b{display:block;font-size:var(--fs-2);line-height:1.35}.paper-card small{display:block;font-size:var(--fs-1);line-height:1.4;margin-top:4px;color:var(--fg-2)}
.paper-heading{display:flex;align-items:center;gap:12px;margin-bottom:12px}.paper-heading h2{font-size:var(--fs-5)}.paper-heading p{margin:4px 0;color:var(--fg-2)}
.upgrade-stage{min-width:0}.upgrade-stage .ph{margin-bottom:12px}.upgrade-stage .pb{padding:0 16px 16px}.upgrade-stage .table-toolstrip{margin:0;padding:4px 0 8px}
.upgrade-tabs{display:flex;gap:16px;border-bottom:1px solid var(--line-strong);margin-bottom:12px;overflow-x:auto}.upgrade-tabs button{border:0;border-bottom:2px solid transparent;background:transparent;padding:8px 2px;cursor:pointer;white-space:nowrap}.upgrade-tabs button.on{border-bottom-color:var(--accent);color:var(--fg)}
.rate-cell{padding:3px 0}
.rate-value{border:0;background:transparent;display:block;text-align:left;padding:4px;width:100%;cursor:pointer;font-size:var(--fs-3)}.rate-value b{display:block;font-size:var(--fs-4)}.rate-value small{display:block;font-size:var(--fs-1);color:var(--fg-2);line-height:1.6}.rate-value:hover:not(:disabled){background:var(--hover)}.rate-value:disabled{color:var(--fg);cursor:not-allowed}
.trina-label{font-size:var(--fs-1);border-top:1px solid var(--line);padding-top:6px;margin-top:4px;color:var(--accent)}
.class-transition{border:0;background:none;color:var(--accent);font-size:var(--fs-1);max-width:130px;white-space:normal;padding:6px;cursor:pointer}
.override-mark{color:var(--accent);font-size:var(--fs-1)}
.upgrade-editor{position:fixed;right:0;top:0;bottom:0;width:min(420px,90vw);z-index:100;border-left:1px solid var(--line-strong);background:var(--surface);padding:24px;overflow:auto;box-shadow:var(--shadow)}.upgrade-editor label{display:grid;gap:4px;margin:16px 0}.upgrade-editor label small{font-size:var(--fs-1)}
.rate-neighbor{border-top:1px solid var(--line);padding:8px 0;font-size:var(--fs-1)}.rate-neighbor small{display:block}.fail-rule{font-size:var(--fs-1);color:var(--fg-2)}
.ladder-rate{border:0;background:transparent;text-align:left;color:var(--fg);font-size:var(--fs-3);padding:4px 8px;cursor:pointer;white-space:nowrap}.ladder-rate:hover{background:var(--hover)}
.ladder-panel .ph{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 16px;min-height:40px;margin-bottom:0}.ladder-panel .ph .table-tools{margin:0;padding:0}.ladder-panel .ph .btn,.ladder-panel .ph select{height:28px;min-height:28px;padding:0 8px;font-size:var(--fs-1)}
.ladder-panel .pb{margin-top:0;padding-top:12px}.ladder-panel .grid td small{font-size:var(--fs-1)}.ladder-panel .table-tools{padding:4px 0 8px}
.upgrade-page>.band{margin:12px 0;min-height:0;gap:12px}.upgrade-page>.band .bt{display:flex;align-items:baseline;gap:12px}.upgrade-page>.band h1{line-height:24px;margin:0}.upgrade-page>.band .bt p{margin:0;font-size:var(--fs-1)}
/* the upgrade matrix (one table per item class) */
.upgrade-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}.upgrade-pair>.panel:only-child{grid-column:1/-1}
.matrix-scroll{overflow:auto;max-width:100%;padding-bottom:4px}
.upgrade-grid{border-collapse:collapse;width:100%;font-size:var(--fs-2)}
.upgrade-grid th,.upgrade-grid td{border:1px solid var(--line);padding:8px 6px;vertical-align:middle;min-width:132px}
.upgrade-grid th{background:var(--surface-2);text-align:left;font-weight:600}
.upgrade-grid thead th{position:sticky;top:0;z-index:3}
.upgrade-grid th:first-child{position:sticky;left:0;z-index:2;min-width:90px}
.upgrade-grid small{display:block;color:var(--fg-2);font-size:var(--fs-1);white-space:nowrap}
.upgrade-grid .matrix-value{display:block;border:0;background:transparent;color:inherit;text-align:left;padding:4px 0;cursor:pointer;width:100%;font-size:var(--fs-3);line-height:1.6}.upgrade-grid .matrix-value b{font-weight:600}
.upgrade-grid .matrix-value:hover{color:var(--accent)}
.upgrade-grid td>input{float:right}
.upgrade-grid .matrix-unavailable{color:var(--fg-3);background:var(--bg);text-align:center}
.upgrade-grid .inherited .matrix-value{color:var(--fg-3)}
.upgrade-grid .changed{background:var(--changed);box-shadow:inset 2px 0 var(--warn)}
.trina-rate{border:0;border-top:1px solid var(--line);background:none;color:var(--accent);font-size:var(--fs-1);text-align:left;padding:6px 0 0;margin-top:3px;cursor:pointer;width:100%}.trina-rate:hover{color:var(--fg)}
.upgrade-example{display:flex;align-items:center;gap:16px;padding:16px 0}.upgrade-example .item{max-width:300px}.upgrade-example small{color:var(--fg-2)}.upgrade-example .item small{display:none}

/* narrower windows */
@media (max-width:1400px){.family-ladders{grid-template-columns:1fr}}
@media (max-width:1250px){.two,.two.even{grid-template-columns:1fr}.pgrid{grid-template-columns:auto 1fr}.pright{grid-column:1/-1}.choice{grid-template-columns:1fr}}
@media (max-width:1199px){.detail-drawer{width:100%}}
@media (max-width:1100px){
  .view{padding:24px 16px 96px}.band .facts{margin-left:0}
  .data-groups,.drop-explorer,.item-layout,.drop-detail-layout{grid-template-columns:1fr}.item-layout .data-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
  .shop-showcase{grid-template-columns:repeat(4,minmax(90px,1fr))}.grid .item b{max-width:180px}
  .upgrade-workbench{grid-template-columns:235px minmax(0,1fr)}
}
@media (max-width:1000px){.upgrade-pair{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.status{display:none}.facts{margin-left:0;justify-content:flex-start}.pgrid{grid-template-columns:1fr}}
@media (max-width:800px){.overview-counts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:750px){.upgrade-workbench{grid-template-columns:1fr}.paper-browser{position:static;border-right:0}.paper-list{max-height:230px}.upgrade-tabs{gap:12px}}
@media (max-width:700px){
  .shell{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .menu{height:auto;max-height:34vh;padding:12px;border-right:0;border-bottom:1px solid var(--line)}
  .brand{display:none}.msearch{margin-bottom:4px}#nav{max-height:26vh}.grp{margin-top:4px;min-height:36px}
  .msub{grid-template-columns:repeat(2,minmax(0,1fr))}.msub a{font-size:var(--fs-1)}
  .workspace>header{padding:0 16px;height:48px;min-height:48px}
  .view{padding:16px 16px 112px}.facts{gap:12px}
  .ph,.pb{padding:12px}.tabs{padding:0;gap:16px}
  .actionbar{left:0;padding:12px 16px;flex-wrap:wrap}.actionbar .abtxt{flex-basis:100%}
  .drop-grid{grid-template-columns:repeat(auto-fill,minmax(85px,1fr))}
  .shop-showcase{grid-template-columns:repeat(3,minmax(75px,1fr))}.catalog-filters .search{min-width:100%}.remote-count{align-items:flex-start;flex-direction:column}
  .item-layout .data-groups,.drop-labels{grid-template-columns:1fr}
}
/* the shell classes ui.js / app.js emit (UX wave 1): icon sizes, page header row, publish pill, pending bar */
.icon.icon-sm{--icon:var(--icon-sm)}.icon.icon-md{--icon:var(--icon-md)}
.lbl{text-decoration:underline dotted var(--line-strong);text-underline-offset:3px}
.band{align-items:center;min-height:56px}.band .bt{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:2px}
.band .bt h1{margin:0}.band .bt nav.breadcrumbs{font-size:var(--fs-1);color:var(--fg-2)}
.id-chip{font:var(--fs-2)/1 ui-monospace,Consolas,monospace;color:var(--fg-2);background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:3px 6px}
.band-note{flex-basis:100%;font-size:var(--fs-2);color:var(--fg-2);margin:0}
.band .fact{flex-direction:column}.fact-label{font-size:var(--fs-1);color:var(--fg-2);white-space:nowrap}.fact-value{font-size:var(--fs-3);font-weight:600;color:var(--fg)}
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:12px;font-size:var(--fs-1);border:1px solid var(--line-strong);background:var(--surface-2);color:var(--fg)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--fg-3)}.pill.ok::before{background:var(--ok)}.pill.bad::before{background:var(--bad)}.pill.bad{border-color:var(--bad)}
.apply-bar.sticky{box-shadow:0 -6px 16px rgba(0,0,0,.35)}.apply-bar .apply-text{font-weight:600}.apply-bar .apply-names{color:var(--fg-2);font-size:var(--fs-1)}
/* Boss'lar: a boss's points on its zone's square (boss-screen.js) */
.boss-map-box{display:flex;flex-direction:column;gap:4px;margin-top:8px}.boss-map{width:280px;height:280px;max-width:100%}
.boss-map-zone{fill:var(--surface-2);stroke:var(--line-strong)}.boss-map-area{fill:none;stroke:var(--fg-3);stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
.boss-map-point{fill:rgba(217,164,65,.25);stroke:var(--warn);vector-effect:non-scaling-stroke}.boss-map-point.exact{fill:var(--warn)}.boss-map-label{fill:var(--fg)}
.boss-map-alive{fill:var(--ok);stroke:var(--fg);vector-effect:non-scaling-stroke}
.boss-time{white-space:nowrap}tr.removed td{opacity:.5;text-decoration:line-through}
/* the item note box (item-note.js): the client's tooltip note (ItemTooltipRules.h COLOR_NOTE_*, COLOR_BONUS, COLOR_UNMET).
   Decision 444 f / v: one heading over the note, Turkish then English in a smaller font; the two language colours are the
   server's rule (SKILL_RULE item.note_tr_rgb / item.note_en_rgb), set inline from the box's colour fields, never here. */
.item-note{display:grid;gap:8px}.note-scopes,.note-tools,.note-langs,.note-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.note-text{min-height:220px;font-family:var(--mono);font-size:var(--fs-2)}.note-meta{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.note-status{margin:0}.okline{color:var(--ok)}.note-scope{margin:0}
.note-tip{background:#0d0c0a;border:1px solid var(--line-strong);border-radius:var(--r);padding:8px 12px;text-align:center;font-size:var(--fs-2);max-width:350px}
.note-title{color:#E4E4E4;font-weight:700;margin:0 0 3px}
.note-line{color:#E6DCBE;min-height:1.2em;font-size:var(--fs-1);line-height:1.35}.note-line.head{font-weight:700}.note-line.common.head{color:#FFC857}
.note-green{color:#8BE04C}.note-red{color:#E83030}.note-dim{color:#B4B4B4}.note-line.own{font-size:var(--fs-2)}.note-split{border:0;border-top:1px solid #4A3F26;margin:6px 0}.note-badge{display:block;width:max-content;margin:5px auto 2px;padding:0 5px;border:1px solid #E6DCBE;color:#E6DCBE;font-size:var(--fs-1);line-height:1.3}.note-none{color:var(--fg-3);margin:0}
.note-colors{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}.note-color{display:inline-flex;gap:6px;align-items:center}
.note-color input[type=color]{width:38px;height:26px;padding:0;border:1px solid var(--line-strong);border-radius:var(--r);background:none;cursor:pointer}
.note-color code{font-size:var(--fs-1)}
/* Klan sembolleri: the symbol at its own pixels drawn larger without smoothing, on a checkerboard so its transparency shows */
.clan-symbol{display:inline-block;width:64px;height:64px;vertical-align:middle;border:1px solid var(--line);border-radius:4px;background:repeating-conic-gradient(var(--fg-3) 0% 25%,var(--fg-2) 0% 50%) 0 0/16px 16px}
.clan-symbol img{display:block;width:100%;height:100%;image-rendering:pixelated}.clan-symbol.big{width:128px;height:128px}
.clan-symbol-ask{display:flex;gap:16px;align-items:flex-start;margin:8px 0 12px}
/* ---- G15 (hotfix 1, owner 2026-10-20): the editor's design system, wave 2 --------------------------------------------
   One page structure everywhere: the workspace header says where you are (area › page); the page header is an icon
   tile, the title, one line of what the page is and its numbers on the right as small stat cards; then a toolbar
   (search, filters, the page's own buttons), then sections. Tables: readable headers that may wrap, a name over one
   muted line in the first column, numbers right-aligned, one pager. Nothing here changes what a screen can do. */

/* where you are: "Canavar & Drop › Canavarlar" */
.workspace>header{letter-spacing:0;font-size:var(--fs-2)}
.workspace>header #crumb{display:flex;align-items:center;gap:8px;font-weight:400}
.crumb-area{color:var(--fg-2)}.crumb-sep{color:var(--fg-3)}.crumb-page{color:var(--fg);font-weight:600}

/* the page header */
.view{gap:var(--space-4)}
.band{gap:14px;padding:0 0 16px;margin:0 0 4px;border-bottom:1px solid var(--line);align-items:center}
.band>.portrait,.band>.svg{display:grid;place-items:center;width:var(--tile);height:var(--tile);flex:none;border-radius:var(--r-lg);background:var(--surface-2);border:1px solid var(--line-strong);color:var(--accent)}
.band>.portrait svg,.band>.svg svg{width:22px;height:22px}
.band>.icon.xl,.band>.icon.md{--icon:var(--tile);border-radius:var(--r-lg)}
.band .bt{row-gap:4px}
.band h1,.band .bt h1{font-size:var(--fs-title);line-height:1.25;letter-spacing:-.01em}
.band-note{max-width:920px;line-height:1.5;color:var(--fg-2)}
.band .facts{gap:8px;align-self:center}
.band .fact{min-width:84px;padding:6px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);flex-direction:column;gap:2px}
.band .fact-label,.band .fact>span{font-size:var(--fs-1);color:var(--fg-2)}
.band .fact-value,.band .fact>b{font-size:var(--fs-4);font-weight:600;line-height:1.2}
.id-chip{border-radius:var(--r)}

/* the toolbar of a list: search first, then labelled filters, the page's buttons at the end */
.catalog-filters{gap:12px;align-items:flex-end;padding:12px;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.catalog-filters label{color:var(--fg-2)}
.catalog-filters label>select,.catalog-filters label>input{color:var(--fg)}
.filter-chips:empty{display:none}
.toolbar{margin:0}
.toolbar>.dim{font-size:var(--fs-2)}

/* tables: headers that read (they may wrap to two lines), a little more air, one pager */
.grid th{white-space:normal;line-height:1.25;vertical-align:bottom;padding:8px 12px;min-width:56px;letter-spacing:.01em}
.grid th .lbl{text-decoration:none;white-space:normal}
.grid td{padding:7px 12px;height:var(--row)}
.grid tbody tr.selectable:hover>td{background:var(--hover)}
.grid .item b,.grid .mob b{max-width:320px}
.grid .item-text small{color:var(--fg-2)}
.grid .mob.item{display:inline-flex}
.cell2{display:grid;gap:1px;line-height:1.3;min-width:0}.cell2>b{font-weight:600}.cell2>small{color:var(--fg-2)}
.badge-type{padding:1px 8px;border:0;border-radius:10px;background:var(--surface-2);color:var(--fg-2);font-size:var(--fs-1);line-height:1.6}
.data-table:has(.paging) .table-count,.remote-list .table-count{display:none}
.table-count{color:var(--fg-3);font-size:var(--fs-1)}
.remote-count{margin:0;padding:10px 12px;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);background:var(--surface);font-size:var(--fs-1)}
.remote-list .data-table .tablebox{border:1px solid var(--line);border-radius:var(--r-lg) var(--r-lg) 0 0}
.remote-list .data-table{margin-top:0}
.paging{color:var(--fg-2)}
.grid .st{flex-wrap:nowrap}
.restart-mark{display:inline-block;margin-left:4px;color:var(--warn);font-size:var(--fs-2);line-height:1;font-weight:700;cursor:help}
/* a list's cells wrap inside the page instead of pushing the table past its panel; numbers and row buttons stay on one line */
.data-table .grid td:not(:first-child){white-space:normal}.data-table .grid td.num,.data-table .grid td.acts{white-space:nowrap}
.data-table .grid{min-width:0}
.cell2{max-width:360px}
.legend{margin:8px 0 0;font-size:var(--fs-1);color:var(--fg-2)}.legend .restart-mark{margin:0 4px 0 0}

/* values edited in place: a quiet dashed line, stronger on the row under the pointer */
.val{border-bottom-color:var(--line-strong)}
.grid .val{border-bottom-color:rgba(80,71,61,.55)}
.grid tr:hover .val{border-bottom-color:var(--fg-3)}

/* sections */
.panel{border-radius:var(--r-lg)}
.ph{padding:12px 16px;border-radius:var(--r-lg) var(--r-lg) 0 0}
.ph h2{font-size:var(--fs-3);letter-spacing:.01em}
.help{font-size:var(--fs-2);margin-top:2px}
.emptybox{border-radius:var(--r-lg)}

/* the overview's cards */
.overview-count{border-radius:var(--r-lg)}.overview-count b{font-size:var(--fs-title)}
.overview-count:hover{text-decoration:none;background:var(--surface-2)}

/* the menu: the open page reads at once */
.msub a.on{color:var(--fg);font-weight:600}
.grp{color:var(--fg-3);font-weight:600}

/* a detail page's way back sits above its title, small: "Yetenekler ›" */
.band .bt nav.breadcrumbs{order:-1;flex-basis:100%;margin:0;gap:6px;font-size:var(--fs-1)}
.band .bt nav.breadcrumbs::after{content:'›';color:var(--fg-3)}
/* a coded value's meaning, muted, before the number: "Kendisi  1" */
.decode{color:var(--fg-2);font-size:var(--fs-1);font-weight:400;margin-right:10px}

/* a player's bag and warehouse fit their panel at 1440 px (they ran past its edge) */
@media (min-width:1251px){.pgrid{grid-template-columns:auto minmax(0,1fr) 300px}.pmid{--slot:50px}.pmid .store{--slot:46px}}

/* phone width: the page header stacks, the stat cards wrap under the title */
.band .bt{flex:1 1 240px}
.cell2>b,.grid .item-text>b{overflow-wrap:normal}
.pill{white-space:nowrap}
@media (max-width:700px){.band{align-items:flex-start;--tile:36px}.band .facts{margin-left:0;width:100%}.catalog-filters{padding:8px}.crumb-area,.crumb-sep{display:none}.band .bt{flex-basis:0}}

/* ---- G15b (hotfix 1, owner 2026-10-20: "every page of the editor"): wave 3 -------------------------------------------
   The same page header on every page, words that are not cut in the middle, columns that sit where their header is,
   a phone menu that opens on demand. Nothing here changes what a screen can do. */

/* the page header: the one line of what the page is always sits under the title (it ran beside the title on pages
   without stat cards and under it on pages with them) */
.band-note,.band .bt>.band-note{max-width:none;flex:0 0 100%}
.upgrade-page>.band{margin:0 0 4px;min-height:56px}.upgrade-page>.band .bt{flex-wrap:wrap;gap:4px 12px}.upgrade-page>.band .bt p.band-note{font-size:var(--fs-2)}

/* tables: a word is broken only when it alone is wider than its column ("Middl / e", "karus_0730.sm / d" were broken
   because a column could shrink below its longest word) */
.grid td{overflow-wrap:break-word}
/* a value edited in place reads from where its column starts (a button centred its text: names sat in the middle) */
.grid td:not(.num) .val:not(.num){text-align:left}
/* number columns take the width of their numbers; the room left goes to the columns with words */
.grid th.num,.grid td.num{width:1%}
.data-table .grid td.num:first-child{min-width:0}
.grid td.acts{width:1%;white-space:nowrap}
/* the count beside a family name of Oyun kuralları (an item's stack count style made it float at the screen's corner) */
.fam-toggle .cnt{position:static;padding:0;background:none;font-size:inherit;line-height:inherit;border-radius:0}
/* a closed state has its grey dot like the green / red ones */
.st.off i{background:var(--fg-3)}
.st.warn{color:var(--warn)}.st.warn i{background:var(--warn)}
/* a lone button on a page is as wide as its words (İlişkili olaylar →, Özel oran → ran across the whole page) */
.view>a.btn,.view>button.btn{align-self:flex-start}
.hitgrid>.emptybox{grid-column:1/-1}
/* a label beside its box (Dönüş bölgesi) and a name beside its button (Model #11100 · Model seç) keep a gap */
.pb>.lbl+select,.pb>.lbl+input{margin-left:8px}
.item b+.btn{margin-left:8px}

/* Upgrade: a scroll's whole name in the left list (it was cut: "Upgrade Scroll (Hig…"), the quality chips wrap
   (the last was cut: "Tak") */
body .upgrade-page .up-v3 .class-chips{flex-wrap:wrap;overflow:visible}
body .upgrade-page .up-v3 .paper-card .up-name{white-space:normal;overflow:visible;line-height:1.3}
body .upgrade-page .up-v3 .paper-card{height:auto;padding-top:4px;padding-bottom:4px}
@media (min-width:751px){body .upgrade-page .upgrade-workbench.up-v3{grid-template-columns:280px minmax(0,1fr)}}

/* a drop list / box page: the users panel goes under the rows below 1500 px (beside them the row buttons and the
   users' last column were cut at the panel's edge) */
@media (max-width:1500px){.drop-detail-layout{grid-template-columns:minmax(0,1fr)}}
/* the overview's cards: a long number stays inside its card on a phone */
@media (max-width:480px){.overview-count b{font-size:var(--fs-4)}}

/* phone width: the menu is one row (☰ and the page); it opens over the page on demand */
@media (max-width:700px){
  body:not(.menu-open) .menu{max-height:none;padding:8px 16px}
  body:not(.menu-open) .menu>.msearch,body:not(.menu-open) .menu>#nav{display:none}
  body.menu-open .menu{max-height:70vh}body.menu-open #nav{max-height:58vh}
  .menu-toggle{margin:0}
  /* a list scrolls sideways with one-line rows instead of rows a hand tall */
  .data-table .grid td:not(:first-child){white-space:nowrap}
  body .rules-grid td.rule-key code{white-space:normal;overflow-wrap:anywhere;overflow:visible}
}

/* ---- G15c (hotfix 1, owner 2026-10-20) --------------------------------------------------------------------------------
   The item types of the Unique notice as a row of chips (eight rows a hand tall before); a table of a few small numbers
   (the boss points) as wide as its numbers, not spread over the page. */
.notice-types{display:flex;flex-wrap:wrap;gap:8px}
.notice-types .opt{align-items:center;padding:6px 12px}
.narrow-table{max-width:100%}
.narrow-table .data-table,.narrow-table .tablebox{display:inline-block;max-width:100%;vertical-align:top}
.narrow-table .grid{width:auto;min-width:0}
.narrow-table .data-table .grid td:first-child{min-width:0}
.narrow-table .grid th,.narrow-table .grid td{padding-left:16px;padding-right:16px}
.narrow-table .value-table{width:auto;min-width:260px}
/* the Unique notice's show filter is one segmented control (as Geçmiş's), a row's three choices keep a gap */
.notice-modes{display:inline-flex;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 8px}
.notice-modes .btn{border:0;border-radius:0;margin:0}
.notice-modes .btn+.btn{border-left:1px solid var(--line)}
.notice-modes .btn.on{background:var(--surface-2);color:var(--fg);box-shadow:inset 0 -2px var(--accent)}
.notice-choices{display:inline-flex;gap:4px;flex-wrap:nowrap}
/* the drop lists: the search panel above the table, the table scrolling sideways inside the page on a phone */
.drop-explorer{display:flex;flex-direction:column;gap:12px;min-width:0}
.drop-explorer>*{min-width:0}
/* hotfix 1 G15e (U2): the overview's frequent jobs, one row that wraps */
.quick-jobs{display:flex;flex-wrap:wrap;gap:8px}.quick-job{display:inline-flex;align-items:center;gap:6px}
/* hotfix 1 G15e (U9): the class choice shows its whole name ("Blade Master · Warrior Master (206)"), not cut at 230 px */
.tl select.class-select{max-width:none;min-width:0;flex:0 1 auto}
/* hotfix 1 G15e (U10): the item's "Nerede var" tabs on one line (Oyuncularda / Tüm alanlar fell to a second one at 1440 px); a narrow screen scrolls them */
.where-tabs .tabs{gap:9px;padding:0 2px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}.where-tabs .tabs button{white-space:nowrap;flex:0 0 auto;font-size:var(--fs-1);padding:10px 0}.where-tabs .tabs .count{margin-left:3px}
/* hotfix 1 G15e: the player page's history item lines, tight under their row */
.hist-items{margin:0;padding:0 0 0 18px;font-size:var(--fs-1)}.hist-items li{line-height:1.6}.qcounter{white-space:nowrap}