/* ===========================================================
   Trading Simulator — test UI styles

   This page deliberately uses its own dark "terminal" look and
   does NOT load the main site's style.css, so the two can't
   fight each other. If you later want it to match the rest of
   kodygrilz.com, this is the only file you need to change.
   =========================================================== */

/* --- Design tokens -------------------------------------------------
   Custom properties (the --name ones) are variables. Define a color
   once here, use it everywhere below with var(--name). Change it in
   one place and the whole page follows. */
:root {
  --bg: #0f1419;
  --panel: #171d26;
  --border: #263041;
  --text: #e6edf3;
  --muted: #8b98a9;
  --accent: #4c8dff;
  --up: #26c281;
  --down: #f6465d;
  --radius: 10px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* border-box makes padding count *inside* an element's width, which
   is what you almost always want. Applying it to everything (*) is
   a standard first line of any stylesheet. */
* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 24px 20px 48px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  max-width: 1000px;
  margin-inline: auto;   /* centers the page horizontally */
}

/* --- Header --------------------------------------------------------- */
.topbar {
  display: flex;              /* lay children out in a row */
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
}

.topbar h1 {
  font-size: 1.25rem;
  margin: 0;
  letter-spacing: -0.01em;
}

.badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 999px;       /* a huge radius makes a pill shape */
}

.badge-mock  { background: #3a2d12; color: #f0b429; }
.badge-live  { background: #10331f; color: var(--up); }
.badge-error { background: #3d1620; color: var(--down); }

/* Which exchange answered, shown next to the badge. */
.source {
  font-size: 0.75rem;
  color: var(--muted);
  font-family: var(--mono);
}

/* Problem banner. The [hidden] attribute in the HTML normally hides an
   element, but our display:flex below would override it — so restore it
   explicitly. This is a classic CSS gotcha. */
.alert {
  display: flex;
  gap: 8px;
  background: #2a1d10;
  border: 1px solid #6b4a15;
  color: #f0b429;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.83rem;
  margin-bottom: 18px;
}

.alert[hidden] { display: none; }

/* Pushes whatever follows it to the far right of a flex row. */
.spacer { flex: 1; }

.stamp { font-family: var(--mono); font-size: 0.72rem; }

.disclaimer {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 12px 0 22px;
}

/* --- Stat tiles ----------------------------------------------------- */
/* CSS Grid: auto-fit + minmax means "fit as many columns as you can,
   each at least 160px wide". On a phone that's one column; on a
   laptop it's four. No media queries needed. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;   /* stack label above value */
  gap: 4px;
}

.tile-label {
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tile-value {
  font-family: var(--mono);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;  /* digits keep equal width so
                                          numbers don't jitter as they
                                          update */
}

/* JavaScript adds these classes to color gains and losses. */
.pos { color: var(--up); }
.neg { color: var(--down); }

/* --- Controls ------------------------------------------------------- */
.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  margin-bottom: 18px;
}

.btn {
  font: inherit;
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}

.btn:hover { border-color: var(--accent); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}

.btn-primary.running { background: #b4541f; border-color: #b4541f; }

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.field input,
.field select {
  font: inherit;
  font-family: var(--mono);
  text-transform: none;
  letter-spacing: normal;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
}

/* --- Panels --------------------------------------------------------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.panel h2 {
  font-size: 0.95rem;
  margin: 0 0 12px;
}

.panel-head {
  display: flex;
  justify-content: space-between;  /* push the two children apart */
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.panel-head h2 { margin: 0; }

.muted { color: var(--muted); font-weight: 400; }

.price-block { display: flex; align-items: baseline; gap: 10px; }

.price {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}

.change { font-family: var(--mono); font-size: 0.9rem; }

/* --- Chart ---------------------------------------------------------- */
.chart {
  width: 100%;
  height: 180px;
  display: block;
}

/* vector-effect keeps the stroke 2px on screen even though the SVG is
   stretched horizontally to fill the panel. Without it the line would
   look squashed and uneven. fill:none stops the browser from filling
   the area under the line. */
.line {
  fill: none;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.line-price { stroke: var(--accent); }
.line-fast  { stroke: #f0b429; stroke-width: 1.5; opacity: 0.9; }
.line-slow  { stroke: #7a5cff; stroke-width: 1.5; opacity: 0.75; }

.legend {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--muted);
  margin: 10px 0 0;
}

.key {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  margin-left: 10px;
}

.key-price { background: var(--accent); margin-left: 0; }
.key-fast  { background: #f0b429; }
.key-slow  { background: #7a5cff; }

/* --- Two column layout ---------------------------------------------- */
.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.two-col .panel { margin-bottom: 0; }

/* --- Tables --------------------------------------------------------- */
.table {
  width: 100%;
  border-collapse: collapse;   /* removes the default gaps between cells */
  font-size: 0.88rem;
}

.table th,
.table td {
  text-align: left;
  padding: 7px 4px;
  border-bottom: 1px solid var(--border);
}

.table th { color: var(--muted); font-weight: 500; }

.table td {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.table-log thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; }

.table-log tbody { font-size: 0.82rem; }

.side-buy  { color: var(--up); font-weight: 600; }
.side-sell { color: var(--down); font-weight: 600; }

.empty td {
  color: var(--muted);
  font-family: var(--font);
  text-align: center;
  padding: 18px 4px;
}

/* The log can get long — cap its height and let it scroll on its own
   rather than stretching the whole page. */
.table-log { display: block; max-height: 260px; overflow-y: auto; }

/* --- Footer --------------------------------------------------------- */
.foot {
  margin-top: 28px;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.foot a { color: var(--muted); }
.foot a:hover { color: var(--accent); }

.foot-note { color: var(--muted); font-size: 0.75rem; max-width: 46ch; }