/* ==========================================================================
   Gladeland design system
   Extracted from enchant_tracker/index.html and generalized.

   Rule: "measured pixel". Press Start 2P is for titles, section labels, stat
   numbers, progress bars and primary buttons ONLY. Body copy, tables, logs and
   the RCON console use a system sans-serif or mono — a backup table set in a
   pixel font is unreadable.
   ========================================================================== */

@font-face {
  font-family: 'PressStart';
  src: url('/fonts/press-start-2p.woff2') format('woff2');
  font-display: swap;
}

:root {
  /* surfaces */
  --bg:          #1d1d21;
  --bg-checker:  #1a1a1e;
  --panel:       #313233;
  --panel-light: #5a5b5c;   /* bevel highlight — top/left */
  --panel-dark:  #17181a;   /* bevel shadow   — bottom/right */
  --slot:        #262629;   /* inset surface: cards, inputs, chips */
  --void:        #0a0a0a;   /* deepest inset: input wells, xp track */

  /* ink */
  --text:  #e8e8e8;
  --muted: #adadad;
  --faint: #6b6b6b;

  /* brand — light through the canopy. Titles, primary actions, the logo.
     Warm on purpose: it has to stay distinct from the three semantic greens. */
  --sun:       #ff9d4d;
  --sun-deep:  #5c2a00;   /* text-shadow companion for --sun on dark */

  /* semantic accents — each means one thing, and only that thing */
  --green:   #55ff55;   /* online, success */
  --xp:      #80ff20;   /* progress */
  --emerald: #17dd62;   /* currency, good deal */
  --purple:  #c07af5;   /* enchantment — reserved for Enchant Hunt, not brand */
  --gold:    #ffcc33;   /* rare, warning */
  --red:     #ff5555;   /* offline, danger */
  --info:    #5cc8ff;   /* neutral highlight */

  /* type */
  --pix:  'PressStart', monospace;
  --sans: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* metrics */
  --sidebar-w: 224px;
  --bevel: 3px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  background-image: repeating-conic-gradient(var(--bg-checker) 0% 25%, var(--bg) 0% 50%);
  background-size: 32px 32px;
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

/* Links do not announce themselves with a colour. The default pair is a bright
   blue and, once visited, a dull purple — two loud and unrelated colours on a
   palette that already means something with every hue it uses. And the things
   linked here are server names in a list of servers: nothing about them needs
   explaining.

   What is left is a faint underline drawn from the text's own colour, so the
   affordance survives for anyone scanning for something to click. */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* Stated rather than left to the cascade. A visited link is the one state an
   author forgets, and the browser's answer for it is a dull purple that belongs
   to no palette. Declared before :hover, which shares its specificity and has
   to win. */
a:visited {
  color: inherit;
}

a:hover, a:visited:hover {
  color: var(--sun);
  text-decoration-color: var(--sun);
}

/* Keyboard focus has to be visible on its own, not inherited from hover. */
a:focus-visible {
  outline: 2px solid var(--sun);
  outline-offset: 2px;
}

/* A link that is already a surface — a button, a card, the wordmark — carries
   its own affordance and does not need underlining as well. */
a.btn, a.panel, a.card, a.pix-title {
  text-decoration: none;
}

a.panel:hover, a.card:hover {
  color: inherit;
  border-color: var(--sun) var(--sun-deep) var(--sun-deep) var(--sun);
}

/* --------------------------------------------------------------------------
   Bevel panel — the core primitive. Minecraft inventory look: light edge top
   and left, dark edge bottom and right. Never round the corners.
   -------------------------------------------------------------------------- */

.panel {
  background: var(--panel);
  border: var(--bevel) solid;
  border-color: var(--panel-light) var(--panel-dark) var(--panel-dark) var(--panel-light);
  padding: 14px;
}

/* Inset variant — pressed into the surface rather than raised out of it.
   Use for cards inside a panel, inputs, chips, log wells. */
.panel--inset {
  background: var(--slot);
  border-color: var(--panel-dark) var(--panel-light) var(--panel-light) var(--panel-dark);
}

.panel--danger {
  background: #2e1717;
  border-color: #6b3030 #170808 #170808 #6b3030;
  color: #ffb3b3;
}

.panel--success {
  background: #17301b;
  border-color: #0d1f10 #3fae53 #3fae53 #0d1f10;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.pix        { font-family: var(--pix); letter-spacing: 1px; }
.pix-title  { font-family: var(--pix); font-size: clamp(15px, 3.5vw, 24px); color: var(--sun); text-shadow: 3px 3px 0 var(--sun-deep); letter-spacing: 1px; }
.pix-label  { font-family: var(--pix); font-size: 10px;  color: var(--muted); letter-spacing: 1px; }
.pix-stat   { font-family: var(--pix); font-size: 15px; color: var(--text); }
.pix-h2     { font-family: var(--pix); font-size: 12px; letter-spacing: 1px; }

/* Body copy is deliberately NOT pixel. */
.prose { font-size: 15px; line-height: 1.7; color: var(--text); }
.prose--muted { color: var(--muted); font-size: 14px; }

/* Data surfaces stay mono, never pixel. */
.data, table, .log { font-family: var(--mono); font-size: 13.5px; }

/* --------------------------------------------------------------------------
   XP bar — doubles as any progress indicator (disk quota, backup, boot)
   -------------------------------------------------------------------------- */

.xpbar {
  height: 14px;
  background: var(--void);
  border: 2px solid;
  border-color: var(--panel-dark) var(--panel-light) var(--panel-light) var(--panel-dark);
  position: relative;
  overflow: hidden;
}
.xpfill {
  height: 100%;
  width: 0%;
  background: linear-gradient(180deg, #a8ff3f 0%, var(--xp) 45%, #52c60d 100%);
  transition: width .4s steps(8);
  box-shadow: 0 0 8px #80ff2088;
}
/* Segment ticks, so it reads as a game bar rather than a CSS progress element. */
.xpbar::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 9px, #00000033 9px 11px);
  pointer-events: none;
}
.xpfill--warn   { background: linear-gradient(180deg, #ffe07a 0%, var(--gold) 45%, #c69200 100%); box-shadow: 0 0 8px #ffcc3388; }
.xpfill--danger { background: linear-gradient(180deg, #ff9b9b 0%, var(--red)  45%, #c22 100%);    box-shadow: 0 0 8px #ff555588; }

/* --------------------------------------------------------------------------
   Buttons — beveled, and they physically depress on click
   -------------------------------------------------------------------------- */

.btn {
  font-family: var(--pix);
  font-size: 10px;
  letter-spacing: 1px;
  padding: 11px 14px;
  background: var(--slot);
  color: var(--text);
  border: 2px solid;
  border-color: var(--panel-light) var(--panel-dark) var(--panel-dark) var(--panel-light);
  cursor: pointer;
  user-select: none;
}
.btn:hover  { background: #33343a; }
.btn:active { border-color: var(--panel-dark) var(--panel-light) var(--panel-light) var(--panel-dark); transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }

.btn--primary { background: #3a2415; color: var(--sun); border-color: var(--sun) #7a4415 #7a4415 var(--sun); }
.btn--go      { background: #1e3a1e; color: var(--green);  border-color: var(--green) #1a5c1a #1a5c1a var(--green); }
.btn--danger  { background: #3a1c1c; color: var(--red);    border-color: var(--red) #6b2a2a #6b2a2a var(--red); }

/* --------------------------------------------------------------------------
   Chips / filters / tabs
   -------------------------------------------------------------------------- */

.chip {
  font-family: var(--pix);
  font-size: 9px;
  padding: 9px 12px;
  background: var(--slot);
  color: var(--muted);
  border: 2px solid;
  border-color: var(--panel-dark) var(--panel-light) var(--panel-light) var(--panel-dark);
  cursor: pointer;
  user-select: none;
}
.chip.is-active { background: #1e3a1e; color: var(--green); border-color: var(--green) #1a5c1a #1a5c1a var(--green); }

/* --------------------------------------------------------------------------
   Inputs
   -------------------------------------------------------------------------- */

.field {
  background: var(--void);
  border: 2px solid;
  border-color: var(--panel-dark) var(--panel-light) var(--panel-light) var(--panel-dark);
  color: var(--text);
  font-family: var(--mono);
  font-size: 13px;
  padding: 10px;
  width: 100%;
}
.field:focus { outline: 1px solid var(--sun); }
.field--num  { width: 52px; font-family: var(--pix); font-size: 10px; text-align: center; color: var(--emerald); }

/* --------------------------------------------------------------------------
   Status dot
   -------------------------------------------------------------------------- */

.dot { display: inline-block; width: 8px; height: 8px; image-rendering: pixelated; margin-right: 6px; }
.dot--on   { background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot--off  { background: var(--red); }
.dot--busy { background: var(--gold); animation: dot-pulse 1s steps(2) infinite; }
@keyframes dot-pulse { 50% { opacity: .25; } }

/* --------------------------------------------------------------------------
   Item card — grid tile (enchant books, worlds, backups, plans)
   -------------------------------------------------------------------------- */

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }

.card {
  position: relative;
  background: var(--slot);
  border: var(--bevel) solid;
  border-color: var(--panel-dark) var(--panel-light) var(--panel-light) var(--panel-dark);
  padding: 10px;
  overflow: hidden;
  transition: transform .08s;
}
.card--clickable { cursor: pointer; }
.card--clickable:hover { transform: translateY(-2px); }

/* Enchanted-item glint on hover. Purely decorative. */
.card--clickable:hover::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, #c07af522 45%, #ffffff2e 50%, #c07af522 55%, transparent 70%);
  animation: glint 1.2s linear infinite;
  pointer-events: none;
}
@keyframes glint { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.card.is-found { background: #17301b; border-color: #0d1f10 #3fae53 #3fae53 #0d1f10; }
.card.is-found .card__name { color: #7ce88f; }
.card.is-found:hover::after { display: none; }

.card__name { font-family: var(--pix); font-size: 10px; line-height: 1.5; color: var(--purple); }
.card__sub  { color: var(--muted); font-size: 11px; margin-top: 3px; }
.card__badge { position: absolute; top: 4px; right: 6px; font-family: var(--pix); font-size: 13px; color: var(--green); text-shadow: 2px 2px 0 #103a10; }

/* --------------------------------------------------------------------------
   Emerald icon — inline pixel SVG, never a raster asset from the game.
   Redrawn by hand so nothing ships Mojang artwork.
   -------------------------------------------------------------------------- */

.em { width: 13px; height: 13px; image-rendering: pixelated; flex-shrink: 0; vertical-align: -2px; }

.price      { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 12.5px; }
.price--ok  { color: var(--emerald); font-weight: 700; }
.price--mid { color: var(--gold); }
.price--bad { color: var(--red); }

/* --------------------------------------------------------------------------
   Collapsible section
   -------------------------------------------------------------------------- */

.section > summary {
  font-family: var(--pix);
  font-size: 11px;
  padding: 10px 4px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.section > summary::-webkit-details-marker { display: none; }
.section > summary::before { content: '▸ '; }
.section[open] > summary::before { content: '▾ '; }
.section > summary .count { color: var(--muted); font-size: 9px; margin-left: 8px; }

/* --------------------------------------------------------------------------
   Log / console well — mono, scrollable, never pixel
   -------------------------------------------------------------------------- */

.log {
  background: var(--void);
  border: 2px solid;
  border-color: var(--panel-dark) var(--panel-light) var(--panel-light) var(--panel-dark);
  padding: 10px;
  max-height: 460px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
}

/* Tables scroll inside their own container so the page never scrolls sideways. */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { font-family: var(--pix); font-size: 10px; color: var(--muted); text-align: left; padding: 8px; letter-spacing: 1px; }
td { padding: 8px; border-top: 1px solid #ffffff12; }

/* --------------------------------------------------------------------------
   Layout helpers
   -------------------------------------------------------------------------- */

.wrap  { max-width: 1100px; margin: 0 auto; padding: 16px; }
.stack > * + * { margin-top: 14px; }
.row   { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cols  { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.center { text-align: center; }

/* Respect users who ask for less motion — the glint and pulse are decorative. */
@media (prefers-reduced-motion: reduce) {
  .card--clickable:hover::after { animation: none; }
  .dot--busy { animation: none; }
  .xpfill { transition: none; }
}