/*
 * BetTrading.net help guide — single shared stylesheet.
 *
 * Colour is always a role-named token (docs/Theme-System.md). Token names and values mirror
 * web/src/index.css exactly: dark is the default (the site's canonical palette) and light
 * overrides it under html[data-theme="light"], set before first paint by help.js.
 */

:root {
  --font-heading: "Space Grotesk", sans-serif;
  --font-sans: "Manrope", sans-serif;

  --color-page: #080b12;
  --color-section-alt: #0b0f17;
  --color-surface: #10151f;
  --color-surface-raised: #161c29;

  --color-border-default: #1b2130;
  --color-border-strong: #232b3b;
  --color-rule: #080b12;

  --color-text-primary: #f5f7fa;
  --color-text-secondary: #c7ccd6;
  --color-text-muted: #8a93a6;
  --color-text-dim: #5b6577;
  --color-text-faint: #3a4459;

  --color-accent: #1a8cff;
  --color-accent-dark: #0067c0;
  --color-on-accent: #080b12;

  --color-success: #6ccb8f;
  --color-success-bg: rgb(108 203 143 / 0.12);
  --color-warning: #ffb020;
  --color-warning-bg: rgb(255 176 32 / 0.12);
  --color-danger: #ff6b6b;
  --color-danger-bg: rgb(255 107 107 / 0.12);
}

html[data-theme="light"] {
  --color-page: #f2f1ee;
  --color-section-alt: #f7f6f4;
  --color-surface: #fdfdfd;
  --color-surface-raised: #ffffff;

  --color-border-default: #e5e3e0;
  --color-border-strong: #c8c6c4;
  --color-rule: #e5e3e0;

  --color-text-primary: #1b1b1b;
  --color-text-secondary: #5c5c5c;
  --color-text-muted: #6b6b6b;
  --color-text-dim: #828282;
  --color-text-faint: #a19f9d;

  --color-accent: #0067c0;
  --color-accent-dark: #004c8c;
  --color-on-accent: #ffffff;

  --color-success: #0e7a33;
  --color-success-bg: rgb(14 122 51 / 0.10);
  --color-warning: #9a5b0a;
  --color-warning-bg: rgb(154 91 10 / 0.12);
  --color-danger: #c42b1c;
  --color-danger-bg: rgb(196 43 28 / 0.10);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Skip link ---------- */

/*
 * WCAG 2.4.1 Bypass Blocks (Level A). Every page repeats the wordmark and the breadcrumb before
 * <main>, so a keyboard-only reader would otherwise tab through them on all 32 pages. Off-screen
 * until focused rather than display:none, because a hidden element is not focusable and the link
 * would never be reachable.
 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
  border-radius: 0 0 8px 0;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* ---------- Header ---------- */

.help-header {
  border-bottom: 1px solid var(--color-border-default);
  background: var(--color-section-alt);
}

.help-header__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0.9rem 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.help-wordmark {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text-primary);
  text-decoration: none;
  letter-spacing: 0.01em;
}

.help-wordmark span { color: var(--color-accent); }

.help-header__tag {
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

/* Site navigation (public exchange guides only — help pages stay chrome-free for embedding) */
.site-nav {
  margin-left: auto;
  display: flex;
  gap: 1rem;
  font-size: 0.88rem;
}

.site-nav a { text-decoration: none; color: var(--color-text-secondary); }
.site-nav a:hover { color: var(--color-accent); }
.site-nav a[aria-current="true"] { color: var(--color-text-primary); font-weight: 700; }

/* ---------- Breadcrumb ---------- */

.help-breadcrumb {
  max-width: 860px;
  margin: 0 auto;
  padding: 0.9rem 1.25rem 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.help-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.help-breadcrumb li + li::before {
  content: "›";
  margin-right: 0.35rem;
  color: var(--color-text-dim);
}

/* ---------- Main content ---------- */

main {
  max-width: 860px;
  margin: 0 auto;
  padding: 1rem 1.25rem 3rem;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  line-height: 1.25;
  color: var(--color-text-primary);
}

h1 { font-size: 1.9rem; margin: 0.8rem 0 0.4rem; }
h2 { font-size: 1.35rem; margin-top: 2.2rem; }
h3 { font-size: 1.1rem; margin-top: 1.6rem; }

p, li { color: var(--color-text-secondary); }

/*
 * The glossary on terminology.html. The terms used to be <h3> elements nested inside <dt>, which
 * the HTML content model forbids — <dt> may not contain heading content — and which produced a
 * document outline of 29 h3s hanging off nothing. The term is now the <dt> itself, carrying the
 * fragment id that the rest of the guide links to (e.g. terminology.html#primary), so these rules
 * carry the weight the h3 used to.
 */
dl dt {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text-primary);
  margin-top: 1.6rem;
  scroll-margin-top: 1rem;
}

a { color: var(--color-accent); }
a:hover { color: var(--color-accent-dark); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.lede {
  font-size: 1.05rem;
  color: var(--color-text-secondary);
}

hr {
  border: none;
  border-top: 1px solid var(--color-border-default);
  margin: 2rem 0;
}

code {
  background: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  font-size: 0.9em;
  color: var(--color-text-primary);
}

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; }

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
  font-size: 0.92rem;
}

th, td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-rule);
  vertical-align: top;
}

th {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border-strong);
}

/* ---------- Tier badges (Pro always documented first) ---------- */

.tier {
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--color-surface);
  padding: 0.9rem 1.1rem;
  margin: 0.9rem 0;
}

.tier__badge {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 0.15rem 0.65rem;
  margin-bottom: 0.4rem;
}

.tier--pro .tier__badge {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.tier--basic .tier__badge {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.tier p:last-child { margin-bottom: 0; }

/* ---------- Step-by-step ---------- */

ol.steps {
  counter-reset: step;
  list-style: none;
  padding-left: 0;
}

ol.steps > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.6rem;
  margin: 0.9rem 0;
}

ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-primary);
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Screenshots ---------- */

/*
 * These rules are for real captured images. The placeholder styling that used to live here
 * (`.screenshot__frame`, a dashed box reading "Screenshot to follow") was removed on 2026-08-14
 * along with the 43 placeholder blocks in the pages — an empty labelled rectangle is worse than
 * no figure at all on a page a prospect reads before paying. Each insertion point survives as an
 * HTML comment carrying its `ss-NNN` id; the capture recipes are in
 * docs/help/Screenshot-Manifest.md. web/src/test/helpScreenshots.test.ts fails the build if a
 * visible placeholder comes back.
 */
figure.screenshot {
  margin: 1.1rem 0;
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  background: var(--color-surface);
  padding: 1rem;
}

figure.screenshot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

figure.screenshot figcaption {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ---------- Callouts ---------- */

.tip, .note, .warning {
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  margin: 1rem 0;
  border: 1px solid var(--color-border-default);
}

.tip { background: var(--color-success-bg); }
.note { background: var(--color-surface); }
.warning { background: var(--color-warning-bg); }

.tip > strong:first-child,
.note > strong:first-child,
.warning > strong:first-child {
  font-family: var(--font-heading);
  display: block;
  margin-bottom: 0.25rem;
  color: var(--color-text-primary);
}

/* ---------- Topic cards on the index ---------- */

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.9rem;
  padding: 0;
  list-style: none;
}

.topic-grid a {
  display: block;
  border: 1px solid var(--color-border-default);
  border-radius: 10px;
  background: var(--color-surface);
  padding: 0.9rem 1.1rem;
  text-decoration: none;
  height: 100%;
}

.topic-grid a:hover { border-color: var(--color-accent); }

.topic-grid strong {
  display: block;
  font-family: var(--font-heading);
  color: var(--color-text-primary);
  margin-bottom: 0.2rem;
}

.topic-grid span {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ---------- Related topics / prev-next / footer ---------- */

.related {
  margin-top: 2.5rem;
  border-top: 1px solid var(--color-border-default);
  padding-top: 1.2rem;
}

.related h2 { margin-top: 0; font-size: 1.05rem; }

.related ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.related li a {
  display: inline-block;
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  padding: 0.25rem 0.85rem;
  font-size: 0.88rem;
  text-decoration: none;
  background: var(--color-surface);
}

.pagenav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.8rem;
  font-size: 0.92rem;
}

.pagenav a {
  text-decoration: none;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  background: var(--color-surface);
  max-width: 48%;
}

.pagenav a:hover { border-color: var(--color-accent); }

.pagenav .pagenav__label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.pagenav .pagenav__spacer { flex: 1; }

.help-footer {
  border-top: 1px solid var(--color-border-default);
  background: var(--color-section-alt);
}

.help-footer__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 1.1rem 1.25rem 1.6rem;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.help-footer__inner p { color: var(--color-text-muted); margin: 0.3rem 0; }

/* ---------- Application home (/app/index.html) ---------- */

/*
 * Variation A of the approved design, "dashboard": a scannable tile grid rather than a page of
 * prose. Laid out for the ~700px WebView column the desktop application gives it, not a browser
 * window — so `main` drops the guides' 860px measure and the type scale is a step smaller
 * throughout.
 *
 * Every state below renders correctly with JavaScript off and with no session. app-home.js only
 * ever *narrows* what is shown (fills in the greeting, reveals the plan pill, hides the upsell for
 * a reader who already has Pro); the file on disk is the anonymous state, which Feature_036 R7.7
 * makes a normal outcome rather than an error path.
 */
main.app-home {
  max-width: 700px;
  padding: 1.25rem;
}

.app-home__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}

.app-home__wordmark {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text-primary);
}

.app-home__wordmark span { color: var(--color-accent); }

.app-home__plan {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-default);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* The greeting is the page's one <h1>; the design gives it the weight of a status line, not a
   banner headline, so the heading level and the type scale deliberately disagree. */
.app-home__greeting {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 0 1rem;
}

.app-home__greeting-main { color: var(--color-text-secondary); font-weight: 600; }

/* ---------- Pro upsell (copy only — never a call to action) ---------- */

/*
 * No button, no link, by decision: docs/App-Web-Content-Plan.md "Decisions" §1. The panel has no
 * address bar to come back from, so persuasion happens here and upgrading happens on the trader's
 * own initiative elsewhere. The block is sized to read as finished without a control — do not add
 * one, and do not leave space implying one is missing.
 */
.app-home__upsell {
  background: linear-gradient(160deg, var(--color-surface-raised), var(--color-surface));
  border: 1px solid var(--color-accent);
  border-radius: 14px;
  padding: 1.125rem;
  margin-bottom: 1rem;
}

.app-home__eyebrow {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 0 0 0.375rem;
}

.app-home__upsell h2 {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}

.app-home__upsell p {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0 0 0.625rem;
}

.app-home__upsell p:last-child {
  font-size: 0.75rem;
  color: var(--color-text-dim);
  margin-bottom: 0;
}

/* ---------- Section headings ---------- */

.app-home__section-label {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin: 0 0 0.5rem;
}

/* ---------- Entry tiles ---------- */

.app-home__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 0 0 1.125rem;
  padding: 0;
  list-style: none;
}

.app-home__tiles a {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  padding: 0.75rem 0.625rem;
  text-align: center;
  text-decoration: none;
  height: 100%;
}

.app-home__tiles a:hover { border-color: var(--color-accent); }

.app-home__tiles strong {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 0.125rem;
}

.app-home__tiles span {
  font-size: 0.65625rem;
  color: var(--color-text-dim);
}

/* ---------- Feature highlight cards ---------- */

.app-home__features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.625rem;
  margin: 0 0 1.125rem;
  padding: 0;
  list-style: none;
}

.app-home__features li {
  background: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  padding: 0.875rem;
}

.app-home__feature-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.app-home__feature-head h3 {
  font-family: var(--font-sans);
  font-size: 0.84375rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.app-home__pro {
  flex-shrink: 0;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 0.125rem 0.375rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.app-home__features p {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0 0 0.5rem;
}

.app-home__features a {
  font-size: 0.71875rem;
  font-weight: 700;
  text-decoration: none;
}

/* ---------- What's new ---------- */

.app-home__news {
  background: var(--color-surface);
  border: 1px solid var(--color-border-default);
  border-radius: 12px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}

.app-home__news li {
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid var(--color-rule);
}

.app-home__news li:last-child { border-bottom: none; }

.app-home__news p {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/*
 * A section that has no content yet says so, in its own voice, rather than showing an invented
 * entry. Kept after /app/strategies was filled in and /app/news got its first entry, because the
 * next empty section will want it and inventing content to avoid an empty state is the failure
 * mode this exists to prevent.
 */
.app-home__placeholder {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ---------- News entries (/app/news) ---------- */

.news-entry {
  border-top: 1px solid var(--color-rule);
  padding-top: 1.25rem;
  margin-top: 1.25rem;
}

.news-entry:first-of-type {
  border-top: none;
  padding-top: 0;
}

.news-entry h2 { margin-top: 0; }

/*
 * The date leads the entry, so it is styled as a label rather than as prose — and it is a <time>
 * with a machine-readable datetime, because "19 August 2026" is the only part of a release note a
 * reader scans for.
 */
.news-entry__date {
  display: block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.375rem;
}

@media (max-width: 560px) {
  h1 { font-size: 1.55rem; }
  .pagenav { flex-direction: column; }
  .pagenav a { max-width: none; }
  .app-home__tiles,
  .app-home__features { grid-template-columns: 1fr; }
}