/*
 * BlurChart — every screen (docs/SITE.md, docs/BRAND.md).
 *
 * Dark whatever the system says: a trading screen is read for hours and its
 * colours (green up, red down) are chosen against a dark ground. Scoped under
 * .ch-app so nothing here reaches BlurPager's own admin panel.
 *
 * BlurPager's baseline (public/styles.css) paints every `button` with
 * `color: #fff` and a radius, and pads `main`; each override below states
 * background, colour, border and radius together (BlurPager D143, D147).
 */

:root {
  --ch-bg: #0b0e13;
  --ch-panel: #121720;
  --ch-raise: #18202b;
  --ch-line: #232c38;
  --ch-ink: #e6eaf0;
  --ch-muted: #8b95a5;
  --ch-teal: #00c6cf;
  --ch-up: #22c38e;
  --ch-down: #f0516a;
  --ch-event: #ff3344;
  --ch-grid: #1a212c;
  --ch-radius: 10px;
}

html:has(.ch-app), body:has(.ch-app) { background: var(--ch-bg); color-scheme: dark; }

.ch-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ch-bg);
  color: var(--ch-ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.ch-app a { color: var(--ch-teal); }
.ch-muted { color: var(--ch-muted); }

/* --- the brand ---------------------------------------------------------- */

.ch-brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; color: var(--ch-ink); font-size: 1.1rem; letter-spacing: 0.01em; }
.ch-app a.ch-brand { color: var(--ch-ink); }
.ch-brand b { color: var(--ch-teal); font-weight: 700; }
.ch-mark { width: 1.6rem; height: 1.6rem; border-radius: 5px; flex: none; }

/* --- the bar ------------------------------------------------------------ */

.ch-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.6rem 1.25rem;
  background: var(--ch-panel);
  border-bottom: 1px solid var(--ch-line);
}
.ch-nav { display: flex; gap: 0.25rem; flex: 1; }
.ch-nav a { color: var(--ch-muted); text-decoration: none; padding: 0.3rem 0.7rem; border-radius: 6px; }
.ch-app .ch-nav a.ch-on { color: var(--ch-ink); background: var(--ch-raise); }
.ch-who { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; }
.ch-inline { display: inline; margin: 0; }

/* --- controls ----------------------------------------------------------- */

.ch-button {
  background: var(--ch-teal);
  color: #04262a;
  border: 0;
  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.ch-button:hover { filter: brightness(1.08); }
.ch-button:disabled { background: var(--ch-raise); color: var(--ch-muted); cursor: default; }
.ch-quiet {
  background: transparent;
  color: var(--ch-muted);
  border: 1px solid var(--ch-line);
  border-radius: 6px;
  padding: 0.25rem 0.7rem;
  font: inherit;
  cursor: pointer;
}
.ch-quiet:hover { color: var(--ch-ink); border-color: var(--ch-muted); }

/* --- sign-in ------------------------------------------------------------ */

.ch-center { align-items: center; justify-content: center; padding: 1.5rem; }
.ch-card {
  background: var(--ch-panel);
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius);
  padding: 1.75rem;
}
.ch-login { width: 100%; max-width: 22rem; display: grid; gap: 1.25rem; }
.ch-login .ch-brand { font-size: 1.35rem; justify-content: center; }
.ch-login .ch-mark { width: 2.2rem; height: 2.2rem; }
.ch-login p { margin: 0; text-align: center; font-size: 0.85rem; }
.ch-form { display: grid; gap: 0.9rem; }
.ch-form label { display: grid; gap: 0.3rem; font-size: 0.85rem; color: var(--ch-muted); }
.ch-form input[type="email"], .ch-form input[type="password"], .ch-form input[type="text"] {
  background: var(--ch-bg);
  color: var(--ch-ink);
  border: 1px solid var(--ch-line);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font: inherit;
}
.ch-form input:focus { outline: 2px solid var(--ch-teal); outline-offset: 0; border-color: transparent; }
/* What BlurPager's admin-form.js paints: .field-error under an input,
   .form-message.error at the top of the form. */
.ch-form .field-error, .ch-form .form-message.error { color: var(--ch-down); font-size: 0.85rem; margin: 0; }
.ch-form .has-error { border-color: var(--ch-down); }

/* --- the workspace ------------------------------------------------------ */

.ch-app main.ch-main { flex: 1; padding: 0; display: flex; min-height: 0; }
.ch-desk { flex: 1; display: grid; grid-template-columns: 19rem 1fr; min-height: 0; }
.ch-side {
  background: var(--ch-panel);
  border-right: 1px solid var(--ch-line);
  padding: 1.1rem 1.1rem;
}
.ch-side h2 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ch-muted); margin: 0 0 0.5rem; }
.ch-side p { margin: 0 0 1.25rem; font-size: 0.9rem; }
.ch-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.75rem; font-size: 0.85rem; }
.ch-facts dt { color: var(--ch-muted); }
.ch-facts dd { margin: 0; }

.ch-board { padding: 1rem; display: grid; min-height: calc(100vh - 3.4rem); }
.ch-pane {
  background: var(--ch-panel);
  border: 1px solid var(--ch-line);
  border-radius: var(--ch-radius);
  position: relative;
  overflow: hidden;
}
.ch-empty {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 2rem;
  border-style: dashed;
}
.ch-empty h1 { font-size: 1.6rem; margin: 0 0 0.4rem; color: var(--ch-ink); }
.ch-empty > p { margin: 0 0 1.5rem; color: var(--ch-muted); }
.ch-ghost { width: min(26rem, 80%); color: var(--ch-teal); opacity: 0.35; margin-bottom: 1.5rem; }
.ch-next { text-align: left; margin: 0; padding-left: 1.25rem; display: grid; gap: 0.5rem; max-width: 34rem; color: var(--ch-muted); }
.ch-next b { color: var(--ch-ink); font-weight: 600; }

/* --- the workspace's charts --------------------------------------------- */

.ch-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.25rem; }
.ch-list a { display: block; padding: 0.35rem 0.6rem; border-radius: 6px; text-decoration: none; color: var(--ch-ink); }
.ch-app .ch-list a { color: var(--ch-ink); }
.ch-list a:hover { background: var(--ch-raise); }
.ch-cards { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); align-content: start; gap: 1rem; min-height: 0; }
.ch-app a.ch-card-link {
  display: grid;
  gap: 0.4rem;
  padding: 1.1rem 1.2rem;
  text-decoration: none;
  color: var(--ch-ink);
  transition: border-color 0.15s;
}
.ch-card-link:hover { border-color: var(--ch-teal); }
.ch-card-name { font-size: 1.25rem; font-weight: 650; }
.ch-tag-red { justify-self: start; font-size: 0.75rem; color: var(--ch-event); border: 1px solid var(--ch-event); border-radius: 999px; padding: 0.05rem 0.55rem; }

/* --- one chart ------------------------------------------------------------ */

.ch-chart { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: calc(100vh - 3.4rem); }
.ch-chart-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.9rem;
  padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--ch-line);
  background: var(--ch-panel);
}
.ch-chart-bar h1 { font-size: 1.15rem; margin: 0; color: var(--ch-ink); }
.ch-app a.ch-back { color: var(--ch-muted); text-decoration: none; font-size: 1.1rem; padding: 0 0.2rem; }
.ch-price { font-variant-numeric: tabular-nums; font-weight: 600; }
.ch-change { font-variant-numeric: tabular-nums; font-size: 0.9rem; color: var(--ch-up); }
.ch-change[data-dir="down"] { color: var(--ch-down); }
.ch-grow { flex: 1; }
.ch-seg { display: inline-flex; border: 1px solid var(--ch-line); border-radius: 8px; overflow: hidden; }
.ch-seg button, .ch-chip {
  background: transparent;
  color: var(--ch-muted);
  border: 0;
  border-radius: 0;
  padding: 0.3rem 0.65rem;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}
.ch-seg button + button { border-left: 1px solid var(--ch-line); }
.ch-seg button[aria-pressed="true"] { background: var(--ch-raise); color: var(--ch-ink); }
.ch-chip { border: 1px solid var(--ch-line); border-radius: 999px; }
.ch-chip[aria-pressed="true"] { color: var(--ch-ink); border-color: var(--ch-muted); background: var(--ch-raise); }
.ch-chip-red[aria-pressed="true"] { color: #fff; border-color: var(--ch-event); background: var(--ch-event); }
.ch-live { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--ch-muted); }
.ch-live[data-state="on"] { background: var(--ch-up); box-shadow: 0 0 0 3px rgba(34, 195, 142, 0.18); }
.ch-live[data-state="off"] { background: var(--ch-down); }

.ch-plot { position: relative; flex: 1; min-height: 22rem; background: var(--ch-panel); }
.ch-plot canvas { position: absolute; inset: 0; display: block; touch-action: none; cursor: crosshair; outline: none; }
.ch-legend {
  position: absolute; left: 0.75rem; top: 0.5rem; pointer-events: none;
  font-size: 0.8rem; font-variant-numeric: tabular-nums; color: var(--ch-muted); white-space: pre;
  overflow: hidden; max-width: calc(100% - 7rem);
}
.ch-tip {
  position: absolute; pointer-events: none; z-index: 2; max-width: 22rem;
  display: grid; gap: 0.2rem; padding: 0.55rem 0.7rem;
  background: #1b0d11; border: 1px solid var(--ch-event); border-radius: 8px;
  font-size: 0.82rem; color: var(--ch-ink); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.ch-tip span { color: var(--ch-muted); }
.ch-note { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; color: var(--ch-muted); pointer-events: none; }
.ch-chart-foot { padding: 0.45rem 1rem; font-size: 0.78rem; color: var(--ch-muted); border-top: 1px solid var(--ch-line); }
.ch-red { color: var(--ch-event); }

@media (max-width: 720px) {
  .ch-chart-bar { padding: 0.5rem 0.75rem; }
  .ch-legend { font-size: 0.72rem; white-space: normal; }
  .ch-plot { min-height: 60vh; }
  .ch-desk { grid-template-columns: 1fr; }
  .ch-side { border-right: 0; border-bottom: 1px solid var(--ch-line); }
  .ch-board { min-height: 60vh; }
  .ch-who .ch-muted { display: none; }
  .ch-bar { gap: 0.75rem; }
}