/* mesoarbitrage.com: "Fansite Portal" (docs/spec.md section 7). A 2008 MMO fansite on purpose: 11px Verdana, a navy
   banner with a gold Georgia logo, a grey nav bar, orange box headers, bordered striped tables.
   Light only, every colour set here. One main column, max 960px; the live view is designed at 600px. */
:root {
  --navy: #1b2a44; --navy-hi: #2c4470; --navy-lo: #14203a;
  --gold: #ffcf3a; --gold-shadow: #7a3c00; --amber: #f2a81d;
  --orange-hi: #f7a33c; --orange-lo: #e07b10; --orange-line: #b85c00;
  --link: #1b3f80; --link-hover: #b85c00;
  --ink: #222; --muted: #777; --faint: #999;
  --line: #9fb2cc; --cell: #d4dde9; --stripe: #f2f6fb; --th-hi: #e9eff7; --th-lo: #cfdbea;
  --deal: #e6f9d8; --flip: #1f7a00; --vendor: #0050a8; --unsure: #b06d00;
  --note: #ffffcc; --note-line: #cccc66; --rec: #d10000;
  --page: #fff; --outside: #3a4a5e;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--outside); }
body { margin: 0; padding: 0 0 24px; background: var(--outside) linear-gradient(180deg, #24344d, #3a4a5e 320px) no-repeat; font: 11px/1.5 Verdana, Tahoma, Geneva, sans-serif; color: var(--ink); }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
img { max-width: 100%; }
h1, h2, h3 { text-wrap: balance; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted { color: var(--muted); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
[hidden] { display: none !important; }

#page { max-width: 960px; margin: 0 auto; background: var(--page); border: 1px solid #0d1626; border-top: 0; box-shadow: 0 0 18px rgba(0, 0, 0, .45); }

/* banner */
#banner { display: flex; align-items: center; gap: 14px; padding: 18px 18px 14px; background: var(--navy) linear-gradient(180deg, var(--navy-hi), var(--navy-lo)); border-bottom: 3px solid var(--amber); }
#banner a { text-decoration: none; }
.mark { flex: none; display: block; }
.mark, .mark img { width: 48px; height: 48px; image-rendering: pixelated; }
.mark img { display: block; }
.logo { display: block; font: bold italic 30px/1 Georgia, "Times New Roman", serif; color: var(--gold); text-shadow: 2px 2px 0 var(--gold-shadow), 0 0 12px rgba(255, 190, 40, .4); }
.logo small { display: block; margin-top: 6px; font: 11px Verdana, Tahoma, sans-serif; color: #b9c7de; text-shadow: none; }

/* nav */
#nav { display: flex; flex-wrap: wrap; padding: 5px 8px; background: linear-gradient(#f4f4f4, #d6d6d6); border-bottom: 1px solid #a0a0a0; }
#nav a { padding: 0 9px; font-weight: bold; text-decoration: none; border-right: 1px solid #a0a0a0; }
#nav a:last-child { border-right: 0; }
#nav a.on { color: var(--link-hover); text-decoration: underline; }

#main { padding: 12px; }

/* boxes */
.box { border: 1px solid var(--line); background: var(--page); margin: 0 0 12px; }
.box > h2, .box > h3 { margin: 0; padding: 4px 8px; font: bold 11px Verdana, Tahoma, sans-serif; color: #fff; background: linear-gradient(var(--orange-hi), var(--orange-lo)); border-bottom: 1px solid var(--orange-line); text-shadow: 0 -1px 0 rgba(120, 50, 0, .45); }
.box > h2 .r, .box > h3 .r { float: right; font-weight: normal; }
.in { padding: 8px 10px; }
.in > :first-child { margin-top: 0; }
.in > :last-child { margin-bottom: 0; }
h1 { font: bold 17px Georgia, "Times New Roman", serif; color: var(--link); margin: 0 0 6px; }
.new { color: var(--rec); font-weight: bold; font-size: 9px; vertical-align: super; }
p { margin: 0 0 8px; }

/* buttons and inputs: bevelled, as browsers drew them */
.btn { display: inline-block; padding: 6px 16px; font: bold 13px Verdana, Tahoma, sans-serif; color: #fff; text-decoration: none; cursor: pointer;
  background: linear-gradient(#5fa531, #3d7c18); border: 2px outset #7cc24a; text-shadow: 0 -1px 0 #2b5a0f; }
.btn:hover { color: #fff; background: linear-gradient(#6cb83a, #458a1c); }
.btn:active { border-style: inset; }
.btn.small { padding: 2px 9px; font-size: 11px; }
.btn.grey { background: linear-gradient(#f7f7f7, #d4d4d4); color: var(--ink); border-color: #e8e8e8; text-shadow: none; }
.btn.red { background: linear-gradient(#e2504a, #a51d18); border-color: #f07a75; text-shadow: 0 -1px 0 #6a0f0c; }
.btn[disabled] { opacity: .5; cursor: default; }
input[type=text], input[type=search], select { font: 11px Verdana, Tahoma, sans-serif; border: 1px solid #7f9db9; padding: 2px 3px; background: #fff; color: var(--ink); }

/* tables */
.scroll { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; }
table.grid th { background: linear-gradient(var(--th-hi), var(--th-lo)); color: var(--link); text-align: left; padding: 3px 6px; border: 1px solid var(--line); font-size: 10px; white-space: nowrap; }
table.grid th.sort { cursor: pointer; }
table.grid th.sort:hover { color: var(--link-hover); }
table.grid td { padding: 3px 6px; border: 1px solid var(--cell); vertical-align: middle; }
table.grid tr:nth-child(even) td { background: var(--stripe); }
table.grid tr.deal td { background: var(--deal); }
table.grid tr.stale td, table.grid tr.stale a { color: var(--faint); }
table.grid .r { text-align: right; }
table.grid .ic { width: 38px; padding: 2px; text-align: center; }
img.icon { width: 32px; height: 32px; object-fit: scale-down; image-rendering: pixelated; vertical-align: middle; }
.sub { font-size: 9px; color: var(--muted); }
.empty td { color: var(--muted); text-align: center; padding: 10px; }

/* verdict chips */
.chip { font-weight: bold; color: #888; white-space: nowrap; }
.chip.flip { color: var(--flip); }
.chip.vendor { color: var(--vendor); }
.chip.unsure { color: var(--unsure); }
.chip.over { color: var(--rec); }
.sub.older, .older { color: var(--unsure); }
/* deal size, by the min profit steps: under 10k plain, 10k bold and bigger, 100k a green badge, 1m gold */
.chip.t1 { font-weight: normal; }
.chip.t2 { font-size: 12px; }
.chip.t3, .chip.t4 { display: inline-block; padding: 1px 6px; font-size: 12px; border: 1px solid; }
.chip.flip.t3 { background: linear-gradient(#3f9a1a, #1f7a00); border-color: #145200; color: #fff; text-shadow: 0 -1px 0 #145200; }
.chip.vendor.t3 { background: linear-gradient(#2a72c4, #0050a8); border-color: #003a7a; color: #fff; text-shadow: 0 -1px 0 #003a7a; }
.chip.t4 { background: linear-gradient(#fff0a0, #f2c020); border-color: #b38b00; color: #5a3a00; font-size: 13px; box-shadow: 0 0 6px rgba(242, 168, 29, .7); }
.chip.t4::before { color: #b85c00; }
.chip.flip::before, .chip.vendor::before { content: "\2605 "; color: var(--amber); }
.profit { color: var(--flip); font-weight: bold; }

/* notes */
.note { background: var(--note); border: 1px solid var(--note-line); padding: 5px 8px; margin: 0 0 10px; }
.warn { color: var(--rec); font-weight: bold; }

/* landing */
.pitch { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.pitch .lead { font-size: 12px; }
.start { margin: 10px 0 6px; }
/* the main action looks like an application's button of the time, not an ad's green download button */
button.share { display: inline-flex; align-items: center; gap: 10px; padding: 11px 26px 11px 18px; font: bold 17px Verdana, Tahoma, sans-serif;
  color: var(--link); cursor: pointer; border: 1px solid #7f9db9; border-radius: 3px; background: linear-gradient(#ffffff, #e3ebf5 55%, #d2deec);
  box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, .15); }
button.share:hover { border-color: var(--orange-lo); background: linear-gradient(#fffaf0, #fdebc8 55%, #f9dca6); color: var(--link-hover); }
button.share:active { background: linear-gradient(#d2deec, #e3ebf5); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2); }
button.share svg { flex: none; width: 28px; height: 22px; }
.video { aspect-ratio: 1920 / 952; background: #000; border: 1px solid #000; outline: 1px solid var(--line); outline-offset: 2px; }
.video video { display: block; width: 100%; height: 100%; }
/* the pitch's right side: web/img/buy-low-sell-high.svg (the game's meso sprites inside) */
.motto img { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
ol.steps { margin: 4px 0; padding-left: 20px; }
ol.steps li { margin: 3px 0; }

/* footer */
#foot { padding: 10px; border-top: 1px solid #ccc; background: #f3f3f3; text-align: center; color: var(--muted); font-size: 10px; }
.counter { margin: 4px 0; }
.counter span { font: bold 11px "Courier New", monospace; background: #000; color: #3f3; padding: 1px 4px; letter-spacing: 2px; }

/* the scanner window (/?scan): only the Share screen box until the live view takes over */
body.popup #nav, body.popup #foot, body.popup #demoBox, body.popup #lastBox, body.popup .pitch .lead, body.popup .motto { display: none; }

/* ---- live view: takes over the whole window while scanning ---- */
#live { display: none; }
body.scanning { background: var(--page); padding: 0; }
body.scanning #page { max-width: none; border: 0; box-shadow: none; }
body.scanning #banner, body.scanning #nav, body.scanning #main, body.scanning #foot { display: none; }
.lv-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; background: linear-gradient(180deg, var(--navy-hi), var(--navy-lo)); border-bottom: 3px solid var(--amber); }
.lv-top .logo { font-size: 18px; }
.lv-top .mark { width: 32px; height: 32px; }
.lv-brand { display: flex; align-items: center; gap: 8px; }
#lvStatus { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 5px 10px; background: var(--note); border-bottom: 1px solid var(--note-line); }
#lvStatus .rec { color: var(--rec); font-weight: bold; animation: blink 1.4s steps(1) infinite; }
#lvStatus .ok { color: var(--flip); font-weight: bold; }
#lvStatus .ctl { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@keyframes blink { 50% { opacity: .25; } }
#lvAlert { padding: 6px 10px; background: #fff0f0; border-bottom: 1px solid #e3a5a5; }
#lvAlert:empty { display: none; }
/* the open shop and the session's deals share the window below the bars half and half, each scrolling on its own,
   so neither jumps in size as shops open and close */
body.scanning #live { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
body.scanning { overflow: hidden; }
.lv-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 10px; }
.lv-body .box { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.lv-body .scroll { flex: 1; min-height: 0; overflow: auto; }
.lv-body thead th { position: sticky; top: 0; z-index: 1; }
table.grid tr.sold td { color: #b5b5b5; opacity: .5; }
table.grid tr.sold img.icon { opacity: .35; filter: grayscale(1); }
#lvShop td.item { min-width: 0; }
.lv-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 6px 10px; border-top: 1px solid #ccc; background: #f3f3f3; color: #555; font-size: 10px; }
.sub button.upd, .sub.older button.upd { margin: 0; padding: 0; border: 0; background: none; color: var(--link); font: inherit; cursor: pointer; text-decoration: underline; }
.sub button.upd:hover, .sub.older button.upd:hover { color: var(--link-hover); }
#estModal { width: min(280px, calc(100% - 32px)); }
#estModal .est-item { display: flex; align-items: center; gap: 6px; font-weight: bold; margin: 0 0 4px; }
#estModal .est-item span { min-width: 0; }
#estModal label { display: block; font-weight: bold; color: var(--link); margin: 8px 0 2px; }
#estModal input[type=text] { width: 100%; }
#estNow:empty, #estMsg:empty { display: none; }
.lv-foot b { color: var(--flip); }
.flash td { animation: flash 1.2s ease-out; }
a.why { display: inline-block; width: 14px; height: 14px; line-height: 12px; text-align: center; border: 1px solid #7f9db9; border-radius: 50%;
  background: linear-gradient(#fff, #e3ebf5); font-weight: bold; font-size: 9px; text-decoration: none; vertical-align: 1px; margin-left: 2px; }
dialog.box { width: min(440px, calc(100% - 32px)); padding: 0; margin: auto; box-shadow: 0 4px 24px rgba(0, 0, 0, .45); }
dialog.box::backdrop { background: rgba(10, 18, 34, .6); }
dialog.box h3 { display: flex; justify-content: space-between; align-items: center; }
dialog.box .x { border: 0; background: none; color: #fff; font: bold 16px/1 Verdana, sans-serif; cursor: pointer; padding: 0 2px; }
@keyframes flash { from { background: #fff36b; } }

/* inventory valuer */
#invDrop { border: 2px dashed var(--line); background: var(--stripe); padding: 18px 10px; text-align: center; }
#invDrop.over { border-color: var(--orange-lo); background: #fff6e0; }
img.seen { height: 32px; border: 1px solid #ccc; vertical-align: middle; image-rendering: pixelated; }
.totals { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; }
.totals div { border: 1px solid var(--line); background: linear-gradient(#fff, var(--stripe)); padding: 6px 14px; text-align: center; }
.totals b { display: block; font: bold 18px Georgia, serif; color: var(--orange-line); }
tr.tab td { background: linear-gradient(var(--th-hi), var(--th-lo)) !important; font-weight: bold; color: var(--link); }
.hint { font-size: 9px; font-weight: bold; color: var(--vendor); }

/* price index */
.filters { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0 0 8px; }
.filters label { font-weight: bold; color: var(--link); }
#cats { display: flex; flex-wrap: wrap; gap: 2px 0; margin: 0 0 8px; padding: 0; list-style: none; }
#cats a { padding: 0 7px; border-right: 1px solid #ccc; text-decoration: none; }
#cats li:last-child a { border-right: 0; }
#cats a.on { color: var(--link-hover); font-weight: bold; text-decoration: underline; }
#cats span { color: var(--faint); font-weight: normal; }
.pager { margin: 8px 0 0; text-align: center; }

/* item pages */
.crumbs { margin: 0 0 8px; color: var(--muted); }
.head { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; }
.head img.icon { width: auto; height: auto; zoom: 2; }
.stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.stats div { border: 1px solid var(--line); background: linear-gradient(#fff, var(--stripe)); padding: 5px 12px; text-align: center; min-width: 90px; }
.stats b { display: block; font: bold 16px Georgia, serif; color: var(--orange-line); }
.stats span { font-size: 9px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
svg.hist { display: block; width: 100%; height: auto; }
.hist-key { font-size: 10px; color: var(--muted); margin: 4px 0 0; }
.hist-key i { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; margin: 0 3px 0 10px; }

@media (max-width: 700px) {
  .pitch { grid-template-columns: minmax(0, 1fr); }
  #banner { padding: 12px 10px 10px; }
  .logo { font-size: 24px; }
  .mark, .mark img { width: 32px; height: 32px; }
  #main { padding: 8px; }
  .hide-narrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
#invDrop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
#invDrop label { cursor: pointer; }