/* Watchman Component Library v1. Locked 31 Jul 2026. Requires tokens.css. */

/* ── Base ── */
.wm-screen { background: var(--paper); color: var(--ink); font-family: var(--font-body); }
.wm-hairline { height: 1px; background: var(--ink); opacity: 0.12; }

/* Microlabel: the universal small label. Mono, uppercase, wide tracking. */
.wm-microlabel {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-45);
}

/* Screen title: display serif with a microlabel above */
.wm-title { font-family: var(--font-display); font-size: var(--text-title); letter-spacing: -0.02em; color: var(--ink); }

/* ── Cards ── */
.wm-card {
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--space-4);
}
.wm-card--signal { border-left: 3px solid var(--gold); }     /* signal grade zone */
.wm-card--zone { border-left: 3px solid var(--green-mid); }  /* zone grade */
.wm-card--danger { border-color: rgba(185, 28, 28, 0.35); }
.wm-card--ai { border-left: 3px solid var(--green-mid); }

/* Inset panel (inputs, stat tiles, quotes) */
.wm-panel { background: var(--panel); border-radius: var(--radius-inner); padding: var(--space-3); }

/* Hero card: dark green with gold accents (grade result, fib verdict, learn progress) */
.wm-hero {
  background: var(--green-gradient);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  color: #FAF8F3;
}
.wm-hero .wm-microlabel { color: rgba(250, 248, 243, 0.5); }
.wm-hero-serif { font-family: var(--font-display); font-style: italic; font-size: var(--text-card-title); color: #FAF8F3; }
.wm-hero-number { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600; color: var(--gold); }

/* ── Badges and chips ── */
.wm-badge { font-family: var(--font-mono); font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.wm-badge--grade-a { background: var(--gold-gradient); color: var(--gold-ink); }       /* SIGNAL 5/5 */
.wm-badge--grade-b { background: var(--panel); color: var(--green); }                  /* ZONE 3-4/5 */
.wm-badge--win { background: var(--win-soft); color: var(--win); }
.wm-badge--loss { background: var(--loss-soft); color: var(--loss); }
.wm-chip { font-family: var(--font-mono); font-size: 9px; padding: 2px 6px; border-radius: var(--radius-pill); background: var(--panel); color: var(--ink-60); }
.wm-chip--plan { background: var(--win-soft); color: var(--win); }

/* Status pill with live pulse dot (session badge) */
.wm-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: rgba(10, 61, 46, 0.08); border: 1px solid rgba(10, 61, 46, 0.15);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--green);
}
.wm-pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--win); animation: wm-pulse 2s infinite; }
@keyframes wm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── Buttons ── */
.wm-btn { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  border-radius: var(--radius-inner); padding: 10px 16px; border: none; cursor: pointer; transition: transform 0.15s var(--ease-out), opacity 0.2s; }
.wm-btn:active { transform: scale(0.98); }
.wm-btn--primary { background: var(--green); color: #FAF8F3; }
.wm-btn--gold { background: var(--gold); color: var(--gold-ink); }        /* ARM ZONE, CONTINUE LESSON */
.wm-btn--ghost { background: transparent; border: 1px solid var(--hairline); color: var(--ink-60); }
.wm-btn--danger-ghost { background: transparent; border: 1px solid rgba(185, 28, 28, 0.4); color: var(--loss); } /* OVERRIDE */
.wm-btn--block { width: 100%; }

/* Direction toggle */
.wm-dir { border-radius: var(--radius-inner); padding: 10px 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.15em; text-align: center; }
.wm-dir--active-buy { background: var(--green); color: #FAF8F3; font-weight: 600; }
.wm-dir--active-sell { background: var(--loss); color: #FAF8F3; font-weight: 600; }
.wm-dir--idle { background: var(--panel); color: var(--ink-45); }

/* ── Live states (the interactive layer Daniel specified) ── */

/* Flash: proximity alerts, arrival timer in red phase */
@keyframes wm-flashred { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.wm-flash { animation: wm-flashred var(--flash-speed) infinite; }

/* Red folder banner: whole-card pulse, the loudest element in the app */
@keyframes wm-newspulse { 0%, 100% { background: var(--loss); } 50% { background: var(--loss-flash-dark); } }
.wm-newsbanner {
  border-radius: var(--radius-card); padding: var(--space-4);
  border: 1px solid var(--loss-flash-dark); color: #FAF8F3;
  animation: wm-newspulse var(--pulse-speed) infinite;
}

/* Arrival timer states: red counting to 20m, green after */
.wm-timer--wait { background: var(--loss-soft); color: var(--loss); }   /* + .wm-flash on the number */
.wm-timer--go { background: var(--win-soft); color: var(--win); }        /* label: Begin trading */

/* Lockout state: applied to the app shell during news windows */
.wm-lockout { filter: grayscale(0.6); pointer-events: none; }
.wm-lockout-banner { pointer-events: auto; }  /* the banner and its override stay interactive */

/* ── Data displays ── */

/* Stat tile row */
.wm-stat { text-align: center; }
.wm-stat-value { font-family: var(--font-mono); font-size: 1.25rem; font-weight: 600; color: var(--ink); }
.wm-stat-value--good { color: var(--win); }

/* MFE bar: dotted track = how far it ran, solid = what you took */
.wm-mfe-track { height: 6px; border-radius: 3px; background: var(--panel); position: relative; overflow: hidden; }
.wm-mfe-run { position: absolute; inset: 0 auto 0 0; border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(10, 61, 46, 0.25) 0 4px, transparent 4px 8px); }
.wm-mfe-take { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--green); }
.wm-mfe-take--loss { background: var(--loss); }

/* Progress bar (learn paths, fib verdict) */
.wm-progress { height: 6px; border-radius: var(--radius-pill); background: rgba(250, 248, 243, 0.15); overflow: hidden; }
.wm-progress-fill { height: 100%; border-radius: var(--radius-pill); background: var(--gold); }

/* Price and SL line on zone cards */
.wm-price { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--ink); }
.wm-sl-line { font-family: var(--font-mono); font-size: 10px; color: var(--loss); }

/* ── Checklist rows (Gate, Zones) ── */
.wm-check { display: flex; align-items: center; justify-content: space-between; }
.wm-check-pending { background: #FBF6E9; border: 1px dashed var(--gold-deep); border-radius: var(--radius-inner); padding: var(--space-3); }

/* Warning card (override moment) */
.wm-warning { background: var(--loss-soft); border: 1px solid rgba(185, 28, 28, 0.3); border-radius: var(--radius-card); padding: var(--space-4); }
.wm-warning-title { font-size: 13px; font-weight: 700; color: var(--loss); }

/* ── Navigation ── */
.wm-bottomnav { border-top: 1px solid var(--hairline); background: rgba(250, 248, 243, 0.96); backdrop-filter: blur(8px); display: flex; }
.wm-navitem { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; padding: 10px 0 14px;
  font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-35); }
.wm-navitem--active { color: var(--green); }
.wm-navitem--active .wm-navdot { background: var(--gold); }
.wm-navdot { width: 4px; height: 4px; border-radius: 50%; background: transparent; }

/* ── AI chat (Ask Watchman) ── */
.wm-chat-q { background: var(--panel); border-radius: var(--radius-inner); padding: var(--space-3); font-size: 12px; color: var(--ink-60); }
.wm-chat-a { background: rgba(10, 61, 46, 0.06); border-radius: var(--radius-inner); padding: var(--space-3); font-size: 12px; line-height: 1.6; color: rgba(21, 32, 27, 0.8); }