/* ==========================================================================
   KUBERA — gold & jewellery business
   --------------------------------------------------------------------------
   Named for the treasurer of the gods. The theme is a jeweller's room rather
   than a dashboard: warm near-black instead of blue-black, gold instead of
   cyan, and a serif for every figure — because in this trade the numbers are
   the product, and a serif numeral reads as a ledger entry rather than a
   metric. Nothing here is a hue rotation of the base theme; the temperature
   of the whole app is different.
   ========================================================================== */

:root {
  --bg:          #070604;
  --surface:     #100D08;
  --panel:       rgba(255, 232, 186, 0.04);
  --panel-2:     rgba(255, 232, 186, 0.075);
  --line:        rgba(231, 192, 105, 0.13);
  --line-2:      rgba(231, 192, 105, 0.26);

  --ink:         #F8F1E2;
  --mist:        #BCA98A;
  --dim:         #8B7A5E;

  --accent:      #E7C069;          /* 22K gold */
  --accent-2:    #C08A3E;          /* deeper, for gradients */
  --accent-soft: rgba(231, 192, 105, 0.14);
  --accent-ink:  #1A1206;

  --pos:         #7FD69B;
  --neg:         #E8836F;

  --font:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head:   "Fraunces", Georgia, serif;
  --font-num:    "Fraunces", Georgia, serif;
}

/* A gold leaf sheen across the top of the app. */
.app::before {
  opacity: 0.5;
  background:
    radial-gradient(60% 45% at 15% -5%, rgba(231, 192, 105, 0.22), transparent 62%),
    radial-gradient(50% 40% at 88% 0%, rgba(192, 138, 62, 0.20), transparent 60%),
    radial-gradient(80% 50% at 50% 108%, rgba(120, 78, 26, 0.22), transparent 66%);
}

.product { letter-spacing: 0.01em; font-weight: 600; }

/* Figures get the serif and a touch of gold. */
.kpi-val { color: var(--accent); font-weight: 600; }

/* ---- Live rate ticker ----------------------------------------------------
   The one thing a gold trader looks at before anything else, so it sits at
   the very top of the stage and is the loudest element in the app. */
.rate-strip {
  display: flex;
  align-items: center;
  gap: 1.6em;
  padding: 0.9em 1.25em;
  border-radius: var(--radius);
  background:
    linear-gradient(100deg, rgba(231, 192, 105, 0.14), rgba(231, 192, 105, 0.03) 55%),
    rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line-2);
  flex: none;
}
.rate-main { display: flex; align-items: baseline; gap: 0.6em; }
.rate-label {
  font-size: 0.72em; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
}
.rate-val {
  font-family: var(--font-num);
  font-size: 2em; font-weight: 600; color: var(--accent);
  letter-spacing: -0.02em;
}
.rate-unit { font-size: 0.8em; color: var(--mist); }
.rate-delta { font-size: 0.85em; color: var(--pos); font-weight: 600; }
.rate-sep { width: 1px; align-self: stretch; background: var(--line); }
.rate-alt { display: flex; flex-direction: column; gap: 0.15em; }
.rate-alt b { font-family: var(--font-num); font-size: 1.1em; font-weight: 600; }
.rate-alt span { font-size: 0.72em; color: var(--dim); }
.rate-spark { flex: 1; height: 2.6em; min-width: 6em; }

/* ---- Purity ring --------------------------------------------------------- */
.purity { display: flex; align-items: center; gap: 1.4em; flex: 1; }
.purity-ring { position: relative; width: 8.5em; height: 8.5em; flex: none; }
.purity-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.purity-ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.purity-center {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
}
.purity-center b { font-family: var(--font-num); font-size: 1.7em; color: var(--accent); font-weight: 600; }
.purity-center span { font-size: 0.7em; color: var(--dim); letter-spacing: 0.1em; text-transform: uppercase; }
.purity-key { display: flex; flex-direction: column; gap: 0.7em; flex: 1; }
.purity-key div { display: flex; align-items: center; gap: 0.6em; font-size: 0.88em; }
.purity-key i { width: 0.7em; height: 0.7em; border-radius: 0.2em; flex: none; }
.purity-key b { margin-left: auto; font-family: var(--font-num); font-weight: 600; }

/* ---- Karigar (artisan) job rows ------------------------------------------ */
.job { grid-template-columns: 1.6fr 1fr 0.9em 5.5em 5em; }
.job-stone {
  width: 0.55em; height: 0.55em; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0.6em var(--accent);
}
.job-stone.wait { background: var(--dim); box-shadow: none; }
.job-stone.late { background: var(--neg); box-shadow: 0 0 0.6em var(--neg); }

/* ---- Stock table --------------------------------------------------------- */
.stock { grid-template-columns: 2fr 4.5em 6em 6em 5em; }

/* ---- Mobile --------------------------------------------------------------- */
@media (max-width: 820px) {
  /* The rate strip's stat blocks wrap onto their own lines instead of being
     crushed; the vertical dividers stop making sense once it wraps, and the
     spark chart gets a full-width row of its own underneath. */
  .rate-strip { flex-wrap: wrap; row-gap: 0.9em; }
  .rate-sep { display: none; }
  .rate-spark { flex-basis: 100%; height: 3em; }

  /* Ring above, the purity breakdown below, both centered. */
  .purity { flex-direction: column; gap: 1.2em; }
  .purity-key { width: 100%; }
}