/* DayZ Player DB Viewer: midnight transit diagram world.
   Tokens are the whole palette: one enamel ground, porcelain ink, four line inks as state. */
:root{
  --enamel:#0F1E3D;        /* page ground */
  --enamel-2:#132547;      /* raised panel (slightly lighter enamel) */
  --enamel-3:#162A52;      /* selected row / active tint */
  --rule:#2A3B63;          /* hairline rules */
  --porcelain:#F4F1EA;     /* ink */
  --porcelain-2:#9FB0D6;   /* secondary ink, tinted from the ground hue */
  --scarlet:#E03A2F;       /* line ink: dead, destructive */
  --scarlet-text:#F2574B;  /* scarlet as text (4.9:1 on enamel) */
  --scarlet-fill:#C9302A;  /* scarlet as button fill (white 5.3:1) */
  --cobalt:#2F6BE0;        /* line ink: links, actions */
  --cobalt-text:#6B9BFF;   /* cobalt as text (6.1:1) */
  --amber:#F0A824;         /* line ink: selected, expiry */
  --green:#2FA86B;         /* line ink: alive */
  --font-label:"Oswald",system-ui,sans-serif;
  --font-body:"Fira Sans",system-ui,sans-serif;
  --radius:4px;
  --gutter:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{background:var(--enamel);color-scheme:dark;scrollbar-color:var(--porcelain-2) var(--enamel)}
body{margin:0;background:var(--enamel);color:var(--porcelain);font:16px/1.5 var(--font-body);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;caret-color:var(--amber)}
::selection{background:var(--amber);color:var(--enamel)}
a{color:var(--cobalt-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
a:hover{color:var(--porcelain)}
:focus-visible{outline:2px solid var(--porcelain);outline-offset:3px}
button,input,select{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--font-label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin:0}
.label{font:500 12px/1.2 var(--font-label);letter-spacing:.12em;text-transform:uppercase;color:var(--porcelain-2)}
.muted{color:var(--porcelain-2)}
.num{font-variant-numeric:tabular-nums}
.sample{font:500 11px/1 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--porcelain-2);vertical-align:middle}

/* ---------- header: the name and the four line inks ---------- */
.hdr{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding:14px var(--gutter);border-bottom:2px solid var(--porcelain)}
.brand{display:flex;align-items:center;gap:18px;color:var(--porcelain);text-decoration:none}
.brand{flex-wrap:wrap;min-width:0}
.brand h1{font-size:22px;line-height:1.2}
.lines{display:flex;gap:6px}
.lines i{display:block;width:36px;height:6px;border-radius:3px}
.lines .s{background:var(--scarlet)}.lines .c{background:var(--cobalt)}.lines .a{background:var(--amber)}.lines .g{background:var(--green)}
.hdr nav{display:flex;align-items:center;gap:20px;font-size:15px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:2px solid var(--porcelain);border-radius:var(--radius);background:transparent;color:var(--porcelain);font:500 14px/1 var(--font-label);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:background .15s ease-out,color .15s ease-out,border-color .15s ease-out}
.btn:hover{background:var(--porcelain);color:var(--enamel)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.btn.scarlet{background:var(--scarlet-fill);border-color:var(--scarlet-fill);color:#fff}
.btn.scarlet:hover{background:#fff;color:var(--scarlet-fill)}
.btn.cobalt{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.btn.cobalt:hover{background:#fff;color:var(--cobalt)}
.btn.amber{background:var(--amber);border-color:var(--amber);color:var(--enamel)}
.btn.amber:hover{background:#fff}
.btn.busy{position:relative;color:transparent}
.btn.busy::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border:2px solid currentColor;border-color:var(--porcelain) var(--porcelain) transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- private-page bar ---------- */
.private{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;padding:12px var(--gutter);border-bottom:1px solid var(--rule)}
.private .left{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;min-width:0;max-width:100%}
.private .expiry{color:var(--amber)}
.expiry-bar{display:inline-block;width:120px;height:3px;background:var(--rule);vertical-align:middle;margin-left:10px;overflow:hidden}
.expiry-bar i{display:block;height:100%;background:var(--amber)}
.private .actions{display:flex;gap:10px;flex-wrap:wrap}
.linkbox{font:14px/1.4 ui-monospace,Consolas,monospace;padding:8px 12px;border-radius:var(--radius);color:var(--porcelain);overflow-wrap:anywhere;word-break:break-all;max-width:100%;background:var(--enamel-2)}

/* ---------- layout ---------- */
.wrap{padding:24px var(--gutter) 48px;max-width:1440px;margin:0 auto}
.summary{display:flex;flex-wrap:wrap;gap:12px 32px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.summary b{display:block;font:500 22px/1.1 var(--font-label);letter-spacing:.04em}
.summary b.alive{color:var(--green)}.summary b.dead{color:var(--scarlet-text)}
.board{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:36px;margin-top:22px;align-items:start}
.section-title{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;margin:0 0 10px}
.sample{white-space:nowrap}
.section-title h2{font-size:22px;line-height:1.2}

/* ---------- players table as a route line ---------- */
.route{width:100%;border-collapse:collapse}
.route th{text-align:left;padding:8px 12px;font:500 12px/1.2 var(--font-label);letter-spacing:.12em;text-transform:uppercase;color:var(--porcelain-2);border-bottom:1px solid var(--rule);white-space:nowrap}
.route td{padding:0 12px;border-bottom:1px solid var(--rule);height:56px;vertical-align:middle}
.route th.r,.route td.r{text-align:right}
.route tbody tr{cursor:pointer;transition:background .15s ease-out}
.route tbody tr:hover{background:var(--enamel-2)}
.route tbody tr[aria-selected=true]{background:var(--enamel-3)}
.route tbody tr:focus-visible{outline:2px solid var(--porcelain);outline-offset:-2px}
.route td.station{position:relative;padding-left:32px;white-space:nowrap}
.station::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:3px;background:var(--porcelain);opacity:.9}
.route tbody tr:first-child .station::before{top:50%}
.route tbody tr:last-child .station::before{bottom:50%}
.tick{position:absolute;left:2px;top:50%;width:15px;height:15px;margin-top:-7.5px;border-radius:50%;background:var(--porcelain);border:3px solid var(--green);box-shadow:0 0 0 2px var(--enamel)}
.tick.dead{border-color:var(--scarlet)}
tr[aria-selected=true] .tick{border-color:var(--amber);transform:scale(1.2)}
.name{font-weight:600}
.sub{display:block;font-size:13px;color:var(--porcelain-2);font-weight:400}
.grid{font:500 17px/1.3 var(--font-label);letter-spacing:.08em}
.state{font:500 13px/1.3 var(--font-label);letter-spacing:.1em;text-transform:uppercase}
.state.alive{color:var(--green)}.state.dead{color:var(--scarlet-text)}
.health{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end;white-space:nowrap}
.health i{display:block;flex:0 0 56px;width:56px;height:6px;border-radius:3px;background:var(--rule);overflow:hidden}
.health i b{display:block;height:100%;background:var(--green)}
.health.low i b{background:var(--amber)}.health.zero i b{background:var(--scarlet)}
.route .totals td{height:40px;font:500 12px/1.2 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--porcelain-2);border-bottom:2px solid var(--porcelain)}
.tablewrap{overflow-x:auto}

/* ---------- station card ---------- */
.card{border:2px solid var(--porcelain);border-radius:6px;padding:18px 20px;position:sticky;top:16px}
.card header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px}
.card h2{font-size:28px;line-height:1.2;overflow-wrap:anywhere}
.card .uid{font:13px/1.4 ui-monospace,Consolas,monospace;color:var(--porcelain-2);overflow-wrap:anywhere}
.kv{margin:14px 0 0;display:grid;grid-template-columns:1fr auto;gap:0 16px}
.kv div{display:contents}
.kv dt{padding:9px 0;border-bottom:1px solid var(--rule);color:var(--porcelain-2)}
.kv dd{margin:0;padding:9px 0;border-bottom:1px solid var(--rule);text-align:right;font:500 17px/1.4 var(--font-label);letter-spacing:.04em;white-space:nowrap}
.kv dd.alive{color:var(--green)}.kv dd.dead{color:var(--scarlet-text)}
.card .foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.card.swap{animation:reroute .2s ease-out}
@keyframes reroute{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}

/* ---------- inventory as branch lines ---------- */
.inventory{margin-top:40px}
.tree,.tree ul{list-style:none;margin:0;padding:0}
.tree>li{position:relative;padding-left:28px;margin-bottom:10px}
.tree>li::before{content:"";position:absolute;left:8px;top:14px;bottom:-10px;width:3px;background:var(--porcelain);opacity:.9}
.tree>li:last-child::before{bottom:auto;height:14px}
.item{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:10px 14px 10px 0;border-bottom:1px solid var(--rule);position:relative}
.tree>li>.item::before{content:"";position:absolute;left:-26px;top:50%;width:15px;height:15px;margin-top:-7.5px;border-radius:50%;background:var(--porcelain);border:3px solid var(--cobalt);box-shadow:0 0 0 2px var(--enamel)}
.slot{font:500 12px/1 var(--font-label);letter-spacing:.1em;text-transform:uppercase;color:var(--enamel);background:var(--porcelain);padding:5px 8px;border-radius:var(--radius);min-width:58px;text-align:center}
.slot.cargo{background:var(--cobalt);color:#fff}
.item .meta{font-size:13px;color:var(--porcelain-2);text-align:right}
/* cargo branch: a cobalt line with its own station ticks, leaving the parent's porcelain line */
.tree ul{position:relative;margin:6px 0 0 36px;padding-left:22px}
.tree ul::before{content:"";position:absolute;left:0;top:-8px;bottom:14px;width:3px;background:var(--cobalt)}
.tree ul::after{content:"";position:absolute;left:-27px;top:-8px;width:30px;height:3px;background:var(--cobalt)}
.tree ul li{margin-top:6px;position:relative}
.tree ul .item{padding-left:0}
.tree ul .item::before{content:"";position:absolute;left:-27px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--porcelain);border:3px solid var(--cobalt);box-shadow:0 0 0 2px var(--enamel)}
details.raw{margin-top:8px;font-size:13px;color:var(--porcelain-2)}
details.raw summary{cursor:pointer;color:var(--porcelain)}
details.raw code{display:block;margin-top:6px;font:13px/1.6 ui-monospace,Consolas,monospace;overflow-wrap:anywhere}

/* ---------- names note: how to map a UID to a player name from the server log ---------- */
.names{margin-top:40px;max-width:76ch}
.names p{margin:8px 0 0;color:var(--porcelain-2)}
.names code{display:block;margin-top:10px;padding:10px 12px;background:var(--enamel-2);border-radius:var(--radius);font:13px/1.6 ui-monospace,Consolas,monospace;overflow-wrap:anywhere;color:var(--porcelain)}
.names code b{color:var(--amber);font-weight:400}

/* ---------- upload page ---------- */
.hero{max-width:720px;margin:48px auto 0}
.hero h1{font-size:40px;line-height:1.05}
.hero p.lead{font-size:19px;line-height:1.5;margin:14px 0 0;max-width:62ch}
.drop{margin-top:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:200px;padding:28px;border:2px dashed var(--porcelain-2);border-radius:6px;text-align:center;cursor:pointer;transition:border-color .15s ease-out,background .15s ease-out}
.drop:hover,.drop.over{border-color:var(--amber);background:var(--enamel-2)}
.drop .big{font:500 20px/1.2 var(--font-label);letter-spacing:.04em;text-transform:uppercase}
input[type=file].visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.keep{margin-top:32px;border-top:2px solid var(--porcelain);display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.keep div{padding:16px 16px 16px 0;border-right:1px solid var(--rule);margin-right:16px}
.keep div:last-child{border:0;margin:0}
.keep h2{font-size:14px;color:var(--amber);margin-bottom:6px}
.keep p{margin:0;font-size:15px;color:var(--porcelain-2)}
.error{margin-top:16px;padding:12px 14px;border:2px solid var(--scarlet);border-radius:var(--radius);color:var(--porcelain)}
.error b{color:var(--scarlet-text)}
footer.site{margin-top:48px;padding:16px var(--gutter);border-top:1px solid var(--rule);font-size:13px;color:var(--porcelain-2);display:flex;flex-wrap:wrap;gap:8px 24px}

/* ---------- phone ---------- */
@media (max-width:960px){
  .board{grid-template-columns:1fr}
  .card{position:static}
  .route thead{display:none}
  .route,.route tbody{display:block}
  .route tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 12px;padding:12px 8px 12px 0;height:auto;border-bottom:1px solid var(--rule)}
  .route td{display:block;height:auto;padding:0;border:0}
  .route td.station{grid-column:1/-1;padding-left:36px;min-height:44px;display:flex;align-items:center;white-space:normal}
  .route td.station::before{left:12px}
  .route td:not(.station){padding-left:36px}
  .tick{left:6px}
  .route tbody tr:first-child .station::before{top:0}
  .route tbody tr:last-child .station::before{bottom:0}
  .route td.r{text-align:left}
  .health{justify-content:flex-start}
  .health i{flex-basis:40px;width:40px}
  .route td[data-label]::before{content:attr(data-label);display:block;font:500 11px/1.2 var(--font-label);letter-spacing:.12em;text-transform:uppercase;color:var(--porcelain-2)}
  .route .totals{display:none}
  .summary{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
  .summary>div:first-child{grid-column:1/-1}
  .item{grid-template-columns:auto 1fr;gap:6px 12px}
  .item .meta{grid-column:1/-1;text-align:left}
  .keep{grid-template-columns:1fr}
  .keep div{border-right:0;border-bottom:1px solid var(--rule);margin:0}
  .hero h1{font-size:30px}
}
@media (prefers-reduced-motion:reduce){
  .card.swap,.btn.busy::after{animation:none}
  .route tbody tr,.btn,.drop{transition:none}
}

/* ---------- app additions (not in the design mock) ---------- */
.route td.station a{color:inherit;text-decoration:none}
.route td.station a:hover{text-decoration:underline}
.state.wiped,.state.unreadable{color:var(--porcelain-2)}
.health.unknown i b{background:var(--rule)}
.card .error{margin-top:14px}
.empty{padding:32px 0;color:var(--porcelain-2)}