/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 */
/* Hallmark · macrostructure: Workbench · tone: technical · anchor hue: warm-red
 * audience: ผู้เริ่มต้นติดตาม Forex · use: member dashboard · theme: custom #b6291a
 * nav: N1b · footer: Ft2 · enrichment: CSS product UI · contrast: pass (40–41)
 * honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: pass (49)
 * mobile: pass (34, 49, 50–57) · icons: pass (30) · slop: pass (42–45)
 */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+Thai:wght@400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap");
@import url("/tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  min-width: 20rem;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
.skip-link { position: fixed; inset-block-start: var(--space-sm); inset-inline-start: var(--space-sm); z-index: 600; transform: translateY(-200%); background: var(--color-ink); color: var(--color-paper); padding: var(--space-sm) var(--space-md); }
.skip-link:focus { transform: none; }
.shell { width: min(100%, var(--page-max)); margin-inline: auto; padding-inline: var(--page-gutter); }

.nav { border-block-end: var(--rule-hairline); background: var(--color-paper); position: sticky; inset-block-start: 0; z-index: 200; }
.nav__inner { min-height: 4.5rem; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-md); }
.wordmark { font-family: var(--font-wordmark); font-weight: 700; letter-spacing: -0.035em; font-size: var(--text-md); white-space: nowrap; }
.wordmark__mark { color: var(--color-accent); }
.nav__center { display: none; align-items: center; gap: var(--space-xs); }
.nav__right { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-xs); }
.nav__link { min-height: 2.75rem; display: inline-flex; align-items: center; padding-inline: var(--space-sm); color: var(--color-ink-2); white-space: nowrap; }
.nav__right > .nav__link { display: none; }
.nav__link[aria-current="page"] { color: var(--color-accent); font-weight: 600; }

.button { min-height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); border: 1px solid var(--color-ink); border-radius: var(--radius-sm); padding-inline: var(--space-md); background: transparent; color: var(--color-ink); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.button--accent { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
.button--quiet { border-color: transparent; }
.button:focus-visible, .nav__link:focus-visible, .wordmark:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.button:active { transform: translateY(1px); }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.button[data-state="loading"] { cursor: wait; }
.button[data-state="success"]::before { content: "✓"; }
.button[data-state="error"]::before { content: "!"; }

.hero { display: grid; gap: var(--space-2xl); padding-block: var(--space-2xl) var(--space-3xl); align-items: center; }
.hero__copy { min-width: 0; max-width: 39rem; }
.hero h1 { font-family: var(--font-display); font-size: var(--text-display); line-height: 1.04; letter-spacing: -0.045em; margin: 0; overflow-wrap: anywhere; font-style: normal; }
.hero h1 span { color: var(--color-accent); }
.hero__lede { max-width: 56ch; color: var(--color-muted); font-size: var(--text-md); margin-block: var(--space-lg); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero__actions .button { max-width: 100%; }
.disclaimer { margin-block-start: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); max-width: 62ch; }

.terminal-card { background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-lg); padding: var(--space-lg); min-width: 0; }
.terminal-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); border-block-end: 1px solid var(--color-ink-2); padding-block-end: var(--space-md); }
.terminal-card__head strong { font-family: var(--font-display); }
.status { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-paper); font-size: var(--text-sm); white-space: nowrap; }
.status::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-accent); }
.quote-grid { display: grid; gap: var(--space-md); margin-block-start: var(--space-lg); }
.quote { border-block-end: 1px solid var(--color-ink-2); padding-block-end: var(--space-md); }
.quote:last-child { border: 0; padding: 0; }
.quote__pair { display: flex; justify-content: space-between; gap: var(--space-lg); color: var(--color-paper); }
.quote__pair strong, .quote__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.quote__meta { display: flex; justify-content: space-between; gap: var(--space-sm); color: var(--color-rule-strong); font-size: var(--text-sm); }
.market-note { background: var(--color-accent-soft); color: var(--color-ink); border-block-start: var(--rule-hairline); padding: var(--space-md); margin-block-start: var(--space-lg); font-size: var(--text-sm); }

.section { padding-block: var(--space-3xl); }
.section--surface { background: var(--color-surface); color: var(--color-ink); border-block: var(--rule-hairline); }
.section__head { display: grid; gap: var(--space-md); margin-block-end: var(--space-xl); }
.section__head h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, var(--text-2xl)); line-height: 1.15; letter-spacing: -0.035em; margin: 0; max-width: 18ch; min-width: 0; font-style: normal; overflow-wrap: anywhere; }
.section__head p { color: var(--color-muted); margin: 0; max-width: 56ch; }
.spec-list { border-block-start: var(--rule-hairline); }
.spec-row { display: grid; gap: var(--space-xs); padding-block: var(--space-lg); border-block-end: var(--rule-hairline); }
.spec-row__name { font-family: var(--font-display); font-weight: 600; }
.spec-row__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.spec-row__note { color: var(--color-muted); }

.auth-layout { min-height: calc(100dvh - 4.5rem); display: grid; align-items: center; padding-block: var(--space-2xl); }
.auth-card { width: min(100%, 31rem); margin-inline: auto; }
.auth-card h1 { font-family: var(--font-display); font-size: var(--text-2xl); letter-spacing: -0.04em; line-height: 1.1; margin-block: 0 var(--space-sm); font-style: normal; }
.auth-card__intro { color: var(--color-muted); margin-block: 0 var(--space-xl); }
.form { display: grid; gap: var(--space-lg); }
.field { display: grid; gap: var(--space-xs); }
.field label { font-weight: 600; }
.field input { width: 100%; min-height: 3rem; border: 1px solid var(--color-rule-strong); border-radius: var(--radius-sm); outline: 2px solid transparent; outline-offset: 1px; background: var(--color-surface); color: var(--color-ink); padding-inline: var(--space-md); transition: background-color var(--dur-short) var(--ease-out); }
.field input:focus-visible { outline-color: var(--color-focus); border-color: var(--color-ink-2); }
.field input:disabled { opacity: 0.55; cursor: not-allowed; }
.field input[aria-invalid="true"] { border-color: var(--color-error); }
.field__help { min-height: 1.4em; color: var(--color-muted); font-size: var(--text-sm); }
.form-error { border-inline-start: 3px solid var(--color-error); background: var(--color-accent-soft); color: var(--color-ink); padding: var(--space-sm) var(--space-md); margin-block-end: var(--space-lg); }
.form .button { min-height: 3rem; }
.auth-switch { margin-block-start: var(--space-xl); color: var(--color-muted); }
.text-link { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }
.text-link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.dashboard { padding-block: var(--space-2xl) var(--space-4xl); }
.dashboard__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-lg); margin-block-end: var(--space-2xl); }
.dashboard__head h1 { font-family: var(--font-display); font-size: var(--text-2xl); margin: 0; letter-spacing: -0.04em; font-style: normal; }
.dashboard__head p { margin: var(--space-xs) 0 0; color: var(--color-muted); }
.dashboard-grid { display: grid; gap: var(--space-lg); }
.panel { border: var(--rule-hairline); background: var(--color-surface); padding: var(--space-lg); border-radius: var(--radius-md); }
.panel--wide { min-width: 0; }
.panel h2 { font-family: var(--font-display); font-size: var(--text-md); margin: 0 0 var(--space-lg); font-style: normal; }
.watchlist { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.watchlist th, .watchlist td { padding-block: var(--space-sm); text-align: start; border-block-end: var(--rule-hairline); }
.watchlist th { color: var(--color-muted); font-size: var(--text-sm); font-weight: 500; }
.watchlist td:not(:first-child), .watchlist th:not(:first-child) { text-align: end; font-family: var(--font-mono); }
.badge { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-accent); font-weight: 600; }
.badge::before { content: "•"; }
.empty-state { display: grid; gap: var(--space-sm); align-content: start; }
.empty-state p { color: var(--color-muted); margin: 0; }
.foot { border-block-start: var(--rule-hairline); padding-block: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.foot__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-lg); }

@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--color-ink); color: var(--color-paper); }
  .button--accent:hover { background: var(--color-accent-hover); color: var(--color-accent-ink); }
  .nav__link:hover, .text-link:hover { color: var(--color-accent); }
  .field input:hover { background: var(--color-paper-2); }
}
@media (min-width: 40rem) {
  .nav__right > .nav__link { display: inline-flex; }
  .spec-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1.5fr); align-items: baseline; }
  .section__head { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: end; }
  .dashboard-grid { grid-template-columns: minmax(0, 1.5fr) minmax(16rem, 0.7fr); }
  .panel--wide { grid-row: span 2; }
}
@media (min-width: 60rem) {
  .nav__inner { grid-template-columns: 1fr auto 1fr; }
  .nav__center { display: flex; justify-self: center; }
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); min-height: 43rem; }
}
@media (pointer: coarse) { .button, .nav__link { min-height: 3rem; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 150ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; }
}