/* ═══════════════════════════════════════════════════════════════════════════
   PATTERN GUIDE

   Its own stylesheet rather than another block in styles.css: it is loaded by
   one page, and styles.css is already 7,000 lines that every page pays for.

   The diagram colours are tokens so the schematics follow the theme. They are
   read inside the SVG as var(--gd-*) with literal fallbacks, so a diagram still
   draws correctly if this file has not arrived.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --gd-line:  #0d8fae;   /* the price line */
  --gd-guide: #94a3b8;   /* necklines, boundaries, levels */
  --gd-dot:   #0b2545;   /* labelled turning points */
  --gd-text:  #475569;
}
:root:not([data-theme="light"]) {
  @media (prefers-color-scheme: dark) {
    --gd-line:  #4ec6e2;
    --gd-guide: #64748b;
    --gd-dot:   #dbeafe;
    --gd-text:  #94a3b8;
  }
}
html[data-theme="dark"] {
  --gd-line:  #4ec6e2;
  --gd-guide: #64748b;
  --gd-dot:   #dbeafe;
  --gd-text:  #94a3b8;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.gd-hero { margin-bottom: 18px; }
.gd-hero h1 { margin: 0 0 10px; font: 800 clamp(23px, 3.3vw, 31px)/1.2 var(--font-display); }
.gd-hero p { margin: 0 0 8px; color: var(--text-2); font-size: 14px; line-height: 1.7; max-width: 78ch; }
.gd-caveat {
  padding: 11px 14px; border-radius: var(--radius-lg);
  border: 1px solid rgba(245,158,11,.28); background: rgba(245,158,11,.07);
  font-size: 13px !important;
}

/* ── Search, sticky above the list ──────────────────────────────────────── */
.gd-search {
  position: sticky; top: 0; z-index: 5;
  display: flex; gap: 10px; align-items: center;
  padding: 12px 0 14px; background: var(--bg);
}
.gd-search input {
  flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 10px 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); font-size: 15px; font-weight: 600;
}
.gd-search input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.gd-count { color: var(--text-3); font-size: 12px; font-weight: 700; white-space: nowrap; }

.gd-jump { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 22px; }
.gd-jump a {
  padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2);
  font-size: 12px; font-weight: 700; text-decoration: none;
}
.gd-jump a:hover { border-color: var(--accent); color: var(--accent); }

/* ── Groups ─────────────────────────────────────────────────────────────── */
.gd-group { margin-bottom: 34px; }
.gd-group[hidden] { display: none; }
.gd-group-head {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 14px; padding-bottom: 9px; border-bottom: 1px solid var(--border);
  font: 800 12px var(--font-display); letter-spacing: .07em; text-transform: uppercase;
  color: var(--accent);
}
.gd-group-head span {
  padding: 2px 8px; border-radius: 999px; background: var(--surface-strong);
  color: var(--text-3); font-size: 11px; letter-spacing: 0;
}
.gd-sub-head { margin: 22px 0 10px; font: 800 13px var(--font-display); color: var(--text); }
.gd-note { margin: 0 0 16px; color: var(--text-2); font-size: 13px; line-height: 1.65; max-width: 80ch; }

/* ── One pattern ────────────────────────────────────────────────────────── */
.gd-card {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 20px;
  align-items: start; margin-bottom: 14px; padding: 18px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card);
  scroll-margin-top: 84px;
}
.gd-card[hidden] { display: none; }
.gd-fig {
  border: 1px solid var(--border); border-radius: 14px;
  background: var(--surface-soft); padding: 6px; min-width: 0;
}
.gd-svg { display: block; width: 100%; height: auto; }

.gd-body { min-width: 0; }
.gd-body h3 {
  margin: 0 0 7px; font: 800 17px var(--font-display); color: var(--text);
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.gd-sub {
  font: 700 11px var(--font-body); letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3);
}
.gd-summary { margin: 0 0 12px; color: var(--text); font-size: 13.8px; line-height: 1.65; font-weight: 600; }

.gd-dl { margin: 0; display: grid; gap: 9px; }
.gd-dl dt {
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-3);
}
.gd-dl dd { margin: 2px 0 0; color: var(--text-2); font-size: 13.2px; line-height: 1.65; }

/* ── The scanner's own tolerances ───────────────────────────────────────── */
.gd-bands {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(13,157,198,.26); background: rgba(13,157,198,.06);
}
.gd-bands-head {
  font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 7px;
}
.gd-bands table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.gd-bands th {
  text-align: left; font-weight: 600; color: var(--text-2); padding: 3px 0; width: 56%;
}
.gd-bands td {
  text-align: right; font-weight: 800; color: var(--text);
  font-variant-numeric: tabular-nums; padding: 3px 0;
}
.gd-bands-note { margin: 7px 0 0; color: var(--text-3); font-size: 11.5px; line-height: 1.55; }

/* ── Candlestick table ──────────────────────────────────────────────────── */
.gd-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; }
.gd-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 13px; }
.gd-table th, .gd-table td { padding: 10px 13px; text-align: left; border-bottom: 1px solid var(--border); }
.gd-table thead th {
  background: var(--surface-strong); color: var(--text-2);
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
}
.gd-table tbody tr:last-child td { border-bottom: 0; }
.gd-table tr[hidden] { display: none; }
.gd-t-name { font-weight: 800; color: var(--text); white-space: nowrap; }
.gd-t-rate { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gd-t-what { color: var(--text-2); line-height: 1.55; min-width: 280px; }
.gd-dir {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; text-transform: capitalize;
}
.gd-dir.bullish { background: rgba(11,122,85,.13); color: var(--success-ink); }
.gd-dir.bearish { background: rgba(211,39,72,.13); color: var(--danger-ink); }
.gd-dir.neutral { background: var(--surface-strong); color: var(--text-3); }

.gd-empty { padding: 40px 20px; text-align: center; color: var(--text-2); font-size: 14px; }

@media (max-width: 760px) {
  .gd-card { grid-template-columns: 1fr; gap: 14px; padding: 14px; }
  .gd-search { flex-wrap: wrap; }
  .gd-count { width: 100%; }
}