/* Watchman Component Library v2. White + gold rebrand 10 Aug 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.10; }

/* 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);
  box-shadow: var(--shadow-card);
}
.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(--gold-deep); }

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

/* Hero card: dark-luxe 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;
  box-shadow: var(--shadow-elevated);
}
.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); background-size: 220% 100%;
  color: var(--gold-ink); animation: wm-shimmer var(--shimmer-speed) linear infinite; }   /* 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(184, 157, 85, 0.10); border: 1px solid rgba(184, 157, 85, 0.28);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-deep);
}
.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, box-shadow 0.2s; }
.wm-btn:active { transform: scale(0.98); }
.wm-btn--primary { background: var(--green); color: #FAF8F3; }
.wm-btn--primary:hover { box-shadow: var(--shadow-card); }
.wm-btn--gold { background: var(--gold-gradient); background-size: 220% 100%; color: var(--gold-ink);
  animation: wm-shimmer var(--shimmer-speed) linear infinite; }        /* ARM ZONE, CONTINUE LESSON */
.wm-btn--gold:hover { box-shadow: var(--shadow-gold); }
.wm-btn--ghost { background: transparent; border: 1px solid var(--hairline); color: var(--ink-60); }
.wm-btn--ghost:hover { background: var(--panel); }
.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(--win); 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(26, 23, 18, 0.22) 0 4px, transparent 4px 8px); }
.wm-mfe-take { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--gold-deep); }
.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(255, 255, 255, 0.94); 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(--gold-deep); }
.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(184, 157, 85, 0.09); border-radius: var(--radius-inner); padding: var(--space-3); font-size: 12px; line-height: 1.6; color: var(--ink-60); }

/* ── Gold sheen (the shine + shimmer) ── */
@keyframes wm-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.wm-shimmer-text {
  background: var(--gold-sheen); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: wm-shimmer var(--shimmer-speed) linear infinite;
}

/* ── Hover instruction tooltips (desktop hover only) ── */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--ink); color: #FFFFFF; font-family: var(--font-body); font-weight: 500;
  font-size: 11px; letter-spacing: 0; text-transform: none; line-height: 1.4; text-align: center;
  padding: 8px 11px; border-radius: 9px; width: max-content; max-width: 230px; white-space: normal;
  box-shadow: var(--shadow-elevated); z-index: 200; pointer-events: none;
  opacity: 0; transition: opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out);
}
[data-tip]::before {
  content: ""; position: absolute; bottom: calc(100% + 3px); left: 50%; transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent; border-top-color: var(--ink); z-index: 200; pointer-events: none;
  opacity: 0; transition: opacity 0.16s var(--ease-out), transform 0.16s var(--ease-out);
}
@media (hover: hover) {
  [data-tip]:hover::after, [data-tip]:focus-visible::after,
  [data-tip]:hover::before, [data-tip]:focus-visible::before { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .wm-shimmer-text, .wm-btn--gold, .wm-badge--grade-a { animation: none; }
}