/* ============================================================
   ledger.css -- BLACK LEDGER (GHOST OS native app)
   ------------------------------------------------------------
   Own file, lg-* prefix, theme vars only -- so the book re-themes
   with the OS like every other native app. Never append this to
   desktop.css.

   READABILITY IS A FEATURE HERE, NOT POLISH. This app is read, not
   glanced at: the player is comparing rows against each other on a
   five-minute clock he paid REP for. Nothing is below 13px, faces
   and amounts are 15px, and no text sits on a dim colour. If
   something needs to be de-emphasised it gets less weight or more
   space, never lower contrast.
   ============================================================ */

.lg-wrap {
  padding: 4px 2px 18px;
}

.lg-panel {
  font-family: var(--font-mono, monospace);
}

.lg-load,
.lg-empty {
  padding: 22px 6px;
  color: var(--fg-dim);
  font-size: 13px;
}

.lg-msg {
  min-height: 18px;
  font-size: 13px;
  padding: 4px 2px;
  color: var(--fg-dim);
}
.lg-msg.is-ok  { color: var(--cyan); }
.lg-msg.is-bad { color: var(--red); }

/* ---- window bar ------------------------------------------- */

.lg-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.lg-bar-k {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--fg-dim);
}

/* The clock is the one number that is always changing, so it gets
   tabular figures -- without them the whole bar jitters sideways
   every second as digit widths change. */
.lg-bar-v {
  font-size: 19px;
  font-weight: bold;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
  margin-right: auto;
}

/* ---- teaser ----------------------------------------------- */

.lg-teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 8px 0 12px;
}

.lg-teaser-box {
  padding: 12px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  text-align: center;
}

.lg-teaser-k {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--fg-dim);
  margin-bottom: 6px;
}

.lg-teaser-v {
  font-size: 17px;
  font-weight: bold;
  color: var(--amber);
  word-break: break-all;
}

/* ---- gate screens ----------------------------------------- */

.lg-gate {
  padding: 14px 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.lg-gate p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--fg);
  margin: 0 0 12px;
}

.lg-gate-lead {
  color: var(--cyan) !important;
  font-weight: bold;
}

.lg-gate-note {
  color: var(--fg-dim) !important;
}

/* ---- buttons ----------------------------------------------- */

.lg-btn {
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  padding: 10px 14px;
  background: transparent;
  color: var(--cyan);
  border: 1px solid var(--cyan);
  border-radius: 4px;
  cursor: pointer;
}
.lg-btn:active { background: rgba(77, 226, 255, 0.16); }

.lg-btn-sm  { font-size: 13px; padding: 7px 11px; }
.lg-btn-big { display: block; width: 100%; margin-top: 6px; font-size: 15px; }

.lg-btn-alt {
  color: var(--magenta);
  border-color: var(--magenta);
}
.lg-btn-alt:active { background: rgba(255, 92, 214, 0.16); }

/* Armed = the confirm tap. Filled, not just recoloured: a trace
   costs 2500 REP or 5 NLC and the difference between "ready" and
   "about to spend" must be obvious at a glance, not a hue shift. */
.lg-btn.is-armed {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--bg);
  font-weight: bold;
}

/* ---- tabs -------------------------------------------------- */

.lg-tabs {
  display: flex;
  gap: 6px;
  margin: 10px 0 8px;
}

.lg-tab {
  flex: 1;
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  padding: 9px 4px;
  background: transparent;
  color: var(--fg-dim);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}

.lg-tab.is-on {
  color: var(--cyan);
  border-color: var(--cyan);
  background: var(--bg-soft);
}

/* ---- search ------------------------------------------------ */

.lg-search { margin-bottom: 10px; }

.lg-search-row {
  display: flex;
  gap: 6px;
}

.lg-in {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono, monospace);
  font-size: 14px;
  padding: 9px 10px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.lg-in:focus { outline: none; border-color: var(--cyan); }

.lg-search-note {
  font-size: 12px;
  color: var(--fg-dim);
  padding: 8px 2px 0;
  line-height: 1.5;
}

/* ---- rows -------------------------------------------------- */

.lg-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lg-row {
  padding: 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
}

/* Duel rows carry a left edge rather than a different background --
   the distinction should be findable when scanning without making
   half the list look like a different app. */
.lg-row-duel_stake { border-left: 3px solid var(--amber); }
.lg-row-duel_win   { border-left: 3px solid var(--green); }

.lg-row-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lg-row-bot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}

/* A face is the primary object in this app: it is what you read,
   compare and eventually buy. It is a button, and it looks like
   one -- underlined so it never reads as plain text. */
.lg-face {
  font-family: var(--font-mono, monospace);
  font-size: 15px;
  font-weight: bold;
  padding: 2px 0;
  background: none;
  border: none;
  color: var(--cyan);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  word-break: break-all;
  text-align: left;
}
.lg-face:active { color: var(--fg); }

.lg-arrow  { color: var(--fg-dim); font-size: 14px; }
.lg-handle { color: var(--amber); font-size: 15px; font-weight: bold; word-break: break-all; }

.lg-amt {
  font-size: 15px;
  font-weight: bold;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.lg-ts {
  font-size: 13px;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lg-more {
  padding: 12px 0 4px;
  text-align: center;
}

/* ---- face detail ------------------------------------------- */

.lg-facehead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 10px;
}

.lg-facename {
  font-size: 17px;
  font-weight: bold;
  color: var(--cyan);
  word-break: break-all;
}

.lg-shape {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.lg-shape-box {
  padding: 11px 10px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.lg-shape-k {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--fg-dim);
  margin-bottom: 5px;
}

.lg-shape-v {
  font-size: 16px;
  font-weight: bold;
  color: var(--fg);
}

.lg-shape-n {
  font-size: 13px;
  color: var(--fg-dim);
  margin-top: 4px;
  line-height: 1.45;
}

/* ---- trace ------------------------------------------------- */

.lg-trace {
  padding: 12px;
  margin-bottom: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.lg-trace-title {
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--amber);
  margin-bottom: 8px;
}

.lg-trace-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-dim);
  margin: 0 0 12px;
}

.lg-trace .lg-btn {
  display: block;
  width: 100%;
  margin-bottom: 8px;
}
.lg-trace .lg-btn:last-child { margin-bottom: 0; }

.lg-traced {
  padding: 12px;
  margin-bottom: 12px;
  background: var(--bg-soft);
  border: 1px solid var(--amber);
  border-radius: 4px;
}

.lg-traced-k {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--fg-dim);
  margin-bottom: 6px;
}

.lg-traced-v {
  font-size: 19px;
  font-weight: bold;
  color: var(--amber);
  word-break: break-all;
}

.lg-traced-n {
  font-size: 13px;
  color: var(--fg-dim);
  margin-top: 5px;
}

/* Narrow phones: the two-up grids stack rather than squeezing the
   numbers into two columns too thin to read. */
@media (max-width: 380px) {
  .lg-teaser,
  .lg-shape { grid-template-columns: 1fr; }
}