/* patterns.css — /patterns section.
   Layers on static/market/market.css: every colour, radius and shadow here
   comes from the ff-* tokens defined there, so the section stays in step with
   the rest of the market pages instead of drifting its own palette. */

/* ── Breadcrumbs ───────────────────────────────────────────────── */
.pt-crumbs {
  font-size: .82rem;
  color: var(--ff-text-soft);
  margin: 0 2px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.pt-crumbs a { color: var(--ff-accent); text-decoration: none; }
.pt-crumbs a:hover { text-decoration: underline; }
.pt-crumbs span { color: var(--ff-text-faint); }

/* ── Formation directory ───────────────────────────────────────── */
.pt-group { margin-bottom: 18px; }
.pt-group-title {
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ff-text-soft);
  margin: 0 2px 8px;
  font-weight: 600;
}
.pt-cards {
  display: grid;
  /* auto-fit: a family of three patterns fills its row instead of leaving two slots empty
     beside it (TEXT_CARD_WIDTH.md, 11 Nov 2026) */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}
.pt-card {
  display: block;
  position: relative;
  padding: 12px 14px 12px 16px;
  background: var(--ff-card);
  border: 1px solid var(--ff-border);
  border-left: 4px solid var(--ff-neutral);
  border-radius: var(--ff-radius-sm);
  box-shadow: var(--ff-shadow);
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, transform .15s;
}
.pt-card:hover { box-shadow: var(--ff-shadow-hover); transform: translateY(-1px); }
.pt-card.pt-bullish { border-left-color: var(--ff-success); }
.pt-card.pt-bearish { border-left-color: var(--ff-danger); }
.pt-card.pt-neutral { border-left-color: var(--ff-neutral); }

/* The count is the reason to click, so it leads. */
.pt-card-n {
  position: absolute;
  top: 10px; right: 12px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ff-text);
  line-height: 1;
}
.pt-card-name {
  display: block;
  font-weight: 600;
  font-size: .93rem;
  padding-right: 34px;
  margin-bottom: 4px;
}
.pt-card-sum {
  display: block;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--ff-text-soft);
}

/* ── Bias chips in the hero ────────────────────────────────────── */
.ff-hero-chip.pt-bias-bullish { background: var(--ff-success-soft); color: var(--ff-success-deep); }
.ff-hero-chip.pt-bias-bearish { background: var(--ff-danger-soft); color: var(--ff-danger-deep); }
.ff-hero-chip.pt-bias-neutral { background: var(--ff-neutral-soft); color: var(--ff-neutral-deep); }

/* ── Long-form copy ────────────────────────────────────────────── */
.pt-prose { line-height: 1.65; font-size: .92rem; }
.pt-prose p { margin: 0 0 12px; }
.pt-prose p:last-child { margin-bottom: 0; }
.pt-prose h3 {
  font-size: .88rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ff-text-soft);
  margin: 16px 0 6px;
}

/* Trigger / target / invalidation, side by side on desktop. */
.pt-rules {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 14px 0;
}
.pt-rule .ff-card-body { font-size: .88rem; line-height: 1.6; }
.pt-rule .ff-card-header h2 { font-size: .95rem; }

/* ── Chart ─────────────────────────────────────────────────────── */
/* The PNG is a wide landscape image. At full container width on a 1440px
   laptop that is ~1400x610, which together with the header, hero and fact
   grid pushed the bottom of the chart below the fold — you had to scroll to
   see the axis. Capping the height at a fraction of the VIEWPORT (not a fixed
   pixel value) keeps the whole chart on screen on any display; object-fit
   keeps it undistorted, and the white letterbox is invisible against the
   card. */
/* Height is capped by limiting WIDTH, not with max-height + object-fit. Both
   render the picture at the same size, but max-height leaves the <img> box
   full-width with the image letterboxed inside it; capping the width lets the
   element shrink to the picture and centre. --pt-aspect must match the
   figsize in patterns.py (16 x 6.5). */
.pt-chart {
  --pt-aspect: 2.4615;
  --pt-max-h: 62vh;
  display: block;
  width: 100%;
  max-width: calc(var(--pt-max-h) * var(--pt-aspect));
  height: auto;
  margin: 0 auto;
  background: #fff;
  border-top: 1px solid var(--ff-border-soft);
  border-bottom: 1px solid var(--ff-border-soft);
}

/* A short viewport has no room to spare; a tall one can afford more chart. */
@media (max-height: 700px) { .pt-chart { --pt-max-h: 56vh; } }
@media (min-height: 1100px) { .pt-chart { --pt-max-h: 70vh; } }
/* On a phone the chart is the whole point of the page and nothing else is
   competing for vertical space, so let it run at its natural aspect. */
@media (max-width: 768px) {
  .pt-chart { max-width: 100%; }
}

/* ── Per-stock fact grid ───────────────────────────────────────── */
.pt-detail { margin-bottom: 16px; overflow: hidden; }
.pt-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--ff-border-soft);
}
.pt-fact { background: var(--ff-card); padding: 10px 14px; }
.pt-fact .l {
  display: block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ff-text-faint);
  margin-bottom: 3px;
}
.pt-fact .v { display: block; font-size: .92rem; font-weight: 600; }
.pt-fact .v a { color: var(--ff-accent); text-decoration: none; }
.pt-fact .v a:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .pt-cards { grid-template-columns: 1fr; }
  .pt-card-n { font-size: 1rem; }
  .pt-facts { grid-template-columns: 1fr 1fr; }
}

/* ── Find your stock ───────────────────────────────────────────── */
.pt-search {
  background: var(--ff-card);
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow);
  padding: 14px 16px 12px;
  margin: 0 0 18px;
}
.pt-search-label {
  display: block;
  font-weight: 700;
  font-size: .95rem;
  color: var(--ff-primary);
  margin-bottom: 8px;
}
.pt-search-field { position: relative; }
.pt-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  font-size: 1rem;
  font-family: var(--ff-font);
  color: var(--ff-text);
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-sm);
}
.pt-search-input:focus {
  outline: none;
  border-color: var(--ff-accent);
  box-shadow: 0 0 0 3px var(--ff-accent-soft);
}
.pt-search-hint { margin: 7px 2px 0; font-size: .78rem; color: var(--ff-text-soft); }
.pt-search-compact { padding: 12px 14px 10px; }
.pt-search-compact .pt-search-hint { display: none; }

.pt-ac {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 60;
  background: #fff;
  border: 1px solid var(--ff-border);
  border-radius: var(--ff-radius-sm);
  box-shadow: var(--ff-shadow-hover);
  max-height: 380px;
  overflow: auto;
}
.pt-ac[hidden] { display: none; }
.pt-ac-item {
  display: block;
  padding: 9px 12px;
  color: var(--ff-text);
  text-decoration: none;
  border-bottom: 1px solid var(--ff-border-soft);
}
.pt-ac-item:last-child { border-bottom: 0; }
.pt-ac-item:hover, .pt-ac-item.sel { background: var(--ff-accent-soft); }
.pt-ac-top { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.pt-ac-top .sym { font-weight: 700; color: var(--ff-primary); flex: none; }
.pt-ac-top .nm {
  font-size: .84rem;
  color: var(--ff-text-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pt-ac-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 5px; }
.pt-ac-tag {
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.pt-ac-tag.bull { background: var(--ff-success-soft); color: var(--ff-success-deep); }
.pt-ac-tag.bear { background: var(--ff-danger-soft); color: var(--ff-danger-deep); }
.pt-ac-tag.neu, .pt-ac-tag.none { background: var(--ff-neutral-soft); color: var(--ff-neutral-deep); }
.pt-ac-more { font-size: .74rem; color: var(--ff-accent); }
.pt-ac-empty { padding: 12px; font-size: .85rem; color: var(--ff-text-soft); }
.pt-ac-empty a { color: var(--ff-accent); font-weight: 600; text-decoration: none; }

/* "No pattern on X today" — where /patterns/stock/<SYM> lands when there is none. */
.pt-missing { margin-bottom: 18px; }
.pt-missing .ff-chips { margin-top: 10px; }

@media (max-width: 640px) {
  .pt-search { padding: 12px; }
  .pt-ac-tag { white-space: normal; }
}

/* Chart books page (/patterns/books): one row per book. The cards on the hub and
   the other pages come from _chart_books.html, which carries its own cb-* styles. */
.pt-books { display: flex; flex-direction: column; gap: 12px; margin: 0 0 18px; }
.pt-bookrow {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  background: var(--ff-card); border: 1px solid #cfe3fb;
  border-left: 4px solid var(--ff-accent); border-radius: var(--ff-radius);
  box-shadow: var(--ff-shadow); color: var(--ff-text);
}
.pt-bookrow-off { border-left-color: var(--ff-border, #e2e8f0); opacity: 0.8; }
.pt-bookrow-title { margin: 0; font-size: 16px; font-weight: 700; color: var(--ff-primary); }
.pt-bookrow-blurb { margin: 0; font-size: 14px; color: var(--ff-text); line-height: 1.5; }
.pt-book-icon { font-size: 28px; line-height: 1; flex: none; }
.pt-book-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.pt-book-meta { color: var(--ff-text-soft); font-size: 13px; }
.pt-book-cta {
  flex: none; padding: 8px 14px; border-radius: var(--ff-radius-sm);
  background: var(--ff-accent); color: #fff; font-weight: 600; font-size: 14px;
  white-space: nowrap; text-decoration: none;
}
.pt-book-cta:hover { box-shadow: var(--ff-shadow-hover); }
@media (max-width: 600px) {
  .pt-bookrow { flex-wrap: wrap; }
  .pt-book-cta { width: 100%; text-align: center; }
}