/* The item and monster databases and the economy log: only the few pieces app.css has no token for, built from its
   tokens. The quality colours are the game's (White, Green, Blue, Purple, Orange, Red), darkened to read on white. */

:root{
  --q1:#6b6a8a; --q1-bg:#eeeef5;
  --q2:var(--green-ink); --q2-bg:var(--green-bg);
  --q3:var(--blue-ink); --q3-bg:var(--blue-bg);
  --q4:#7337b8; --q4-bg:#f1e9fb;
  --q5:#a55400; --q5-bg:#fff0d4;
  --q6:var(--red-ink); --q6-bg:var(--red-bg);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --q1:#b3b1d3; --q1-bg:rgba(236,235,255,.08); --q4:#c9a2ff; --q4-bg:rgba(170,110,255,.16); --q5:#ffb366; --q5-bg:rgba(255,150,50,.15);
} }
:root[data-theme="dark"]{
  --q1:#b3b1d3; --q1-bg:rgba(236,235,255,.08); --q4:#c9a2ff; --q4-bg:rgba(170,110,255,.16); --q5:#ffb366; --q5-bg:rgba(255,150,50,.15);
}

/* pictures from the operator's own client (/img/), and the placeholder without one: the name's initial on a tint */
.glyph{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:var(--r1);flex:none;
  background:var(--grey-bg);color:var(--muted);font:700 var(--t-xs)/1 var(--body);text-transform:uppercase}
.glyph.lg{width:40px;height:40px;border-radius:var(--r2);font-size:var(--t-lg)}
.glyph.xl{width:56px;height:56px;border-radius:var(--r2);font-size:var(--t-xl)}
.glyph.xxl{width:128px;height:128px;border-radius:var(--r3);font-size:48px}
.thumb{display:inline-block;width:28px;height:28px;margin:-2px 0;flex:none;object-fit:contain;border-radius:var(--r1)}
.thumb.lg{width:40px;height:40px}
.thumb.xl{width:56px;height:56px;margin:0;border-radius:var(--r2)}
.thumb.xxl{width:128px;height:128px;margin:0;border-radius:var(--r3)}
.thumb.cls{width:22px;height:22px;margin:0}
.glyph.cls{width:22px;height:22px;border-radius:50%}
.thumb.map{width:28px;height:28px;background:var(--surface-sub)}
.thumb.fill{width:100%;height:100%;margin:0;border-radius:0}
.glyph.fill{width:56px;height:56px}
.picture{display:block;max-width:100%;height:auto;margin:0 auto;border-radius:var(--r2)}
.portrait{display:flex;justify-content:center;padding-bottom:var(--s3);margin-bottom:var(--s3);border-bottom:1px solid var(--line-soft)}
.variants{display:block;font-size:var(--t-xs);color:var(--muted);overflow-wrap:anywhere}

.named{display:inline-flex;align-items:center;gap:var(--s2);min-width:0;max-width:100%;font-weight:700}
.named.plain{font-weight:inherit}
.variants-chip{margin-left:var(--s2);vertical-align:middle;font-size:11px}
.named span{overflow:hidden;text-overflow:ellipsis}
a.named:hover span{text-decoration:underline}
.q1{color:var(--q1)} .glyph.q1{background:var(--q1-bg)}
.q2{color:var(--q2)} .glyph.q2{background:var(--q2-bg)}
.q3{color:var(--q3)} .glyph.q3{background:var(--q3-bg)}
.q4{color:var(--q4)} .glyph.q4{background:var(--q4-bg)}
.q5{color:var(--q5)} .glyph.q5{background:var(--q5-bg)}
.q6{color:var(--q6)} .glyph.q6{background:var(--q6-bg)}
.chip.q1{background:var(--q1-bg);color:var(--q1)} .chip.q2{background:var(--q2-bg);color:var(--q2)}
.chip.q3{background:var(--q3-bg);color:var(--q3)} .chip.q4{background:var(--q4-bg);color:var(--q4)}
.chip.q5{background:var(--q5-bg);color:var(--q5)} .chip.q6{background:var(--q6-bg);color:var(--q6)}

/* monster ranks */
.glyph.mvp,.chip.mvp{background:var(--amber-bg);color:var(--amber-ink)}
.glyph.boss,.chip.boss{background:var(--red-bg);color:var(--red-ink)}
.glyph.mini,.chip.mini{background:var(--blue-bg);color:var(--blue-ink)}

/* the filter row of a list page */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);width:100%;padding:var(--s1) 0}
.filters .input{height:32px;font-size:var(--t-sm)}
.filters select.input{width:auto;min-width:136px}
.filters .lv{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--t-sm);color:var(--muted)}
.filters .lv .input{width:72px;padding:0 var(--s2)}
.filters input[type="date"].input{width:auto}
.filters .search{flex:1 1 220px}
.filters > input.input{width:auto;flex:1 1 150px;min-width:0}
.kpis+.card{margin-top:var(--gutter)}

/* the map tiles */
.map-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:var(--s3);margin:0;padding:0;list-style:none}
.map-tile{display:flex;flex-direction:column;gap:var(--s1);height:100%;padding:var(--s2);border:1px solid var(--line-soft);border-radius:var(--r2);
  color:inherit;text-decoration:none}
.map-tile:hover,.map-tile:focus-visible{border-color:var(--line);background:var(--hover)}
.map-tile b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-art{display:grid;place-items:center;aspect-ratio:1;border-radius:var(--r1);background:var(--surface-sub);overflow:hidden}
.picture.map{background:var(--surface-sub);padding:var(--s2)}

/* a character's mailbox */
.mail-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2)}
.mail-head .m{display:flex;gap:var(--s1)}
.mail-meta{margin:var(--s1) 0 var(--s3);font-size:var(--t-sm);color:var(--muted)}
.mail-items{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);margin:var(--s3) 0 0;padding:0;list-style:none}
.mail-items li{display:inline-flex;align-items:center;gap:var(--s2);min-width:0;max-width:100%}
.card-foot.plain{margin-top:var(--gutter);border:0;background:none}

/* ledger deltas */
.pos{color:var(--green-ink)} .neg{color:var(--red-ink)}
.sub{display:block;font-size:var(--t-xs);color:var(--muted);font-weight:500}
.desc{white-space:pre-line;color:var(--ink-2);max-width:72ch}

@media (max-width:600px){
  .map-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
  .filters .search{flex-basis:100%;min-width:0}
  .filters select.input{flex:1 1 40%;min-width:0}
  .filters .lv{flex:1 1 100%}
  .filters .lv .input{flex:1}
  .filters .btn{flex:1}
}