/* ==========================================================================
   patterns.css — PM Countdown price-structure teaching diagrams
   Pairs with patterns.py (SVG + CAPTION).

   Every colour in the SVG markup comes from a custom property with a
   currentColor-ish fallback, so a page that forgets to load this file still
   renders something legible. Themes covered:
     :root                 light site
     [data-theme="dark"]   dark site
     .dk                   the desks' dark surface (works inside either theme)

   --------------------------------------------------------------------------
   CONTRAST (WCAG 2.1) — measured from the rendered DOM in headless Chromium,
   not estimated. Text needs 4.5:1, non-text marks 3:1. Everything clears both.

   LIGHT        text on --pt-card #ffffff / marks on --pt-fig #f6f8fd
     card title    #0a1226  18.63   card body   #42506a   8.12   dt #5b6882  5.60
     mark label    #1d4ed8   6.31   guide label #545f78   6.02
     ghost label   #616c85   4.95   disclaimer  #42506a   7.43  (page #f2f5fb)
     up candle     #0a7a49   5.08   down candle #c8283a   5.17
     guide line    #6b7891   4.19   ghost line / volume bars #7f8ca6  3.19

   DARK         text on --pt-card #101a2e / marks on --pt-fig #0b1322
     card title    #eaf0ff  15.22   card body   #aab8d4   8.70   dt #97a5c2  7.01
     mark label    #8ab0ff   8.61   guide label #a7b4d0   8.92
     ghost label   #8b98b6   6.43   disclaimer  #aab8d4   9.77  (page #070c1a)
     up candle     #2fd98f  10.12   down candle #ff6b78   6.75
     guide line    #7d8cad   5.51   ghost line / volume bars #6f7d9c  4.50

   DESK (.dk)   text on --pt-card #0f1a2b / marks on --pt-fig #0a1220
     card title    #eaf0ff  15.30   card body   #aab8d4   8.74   dt #97a5c2  7.05
     mark label    #8ab0ff   8.69   guide label #a7b4d0   9.00
     ghost label   #8b98b6   6.48   disclaimer  #aab8d4   9.61  (desk bg #070f1c)
     up candle     #1fd286   9.48   down candle #ff5c61   6.21
     guide line    #7d8cad   5.56   ghost line / volume bars #6f7d9c  4.54

   Colour never carries meaning alone: direction is also body shape (up candles
   are hollow, down candles are filled) and every key event has a short text
   label plus an arrow or dot inside the SVG.
   ========================================================================== */

:root {
  --pt-card:       #ffffff;
  --pt-fig:        #f6f8fd;
  --pt-border:     #e1e7f2;
  --pt-ink:        #0a1226;
  --pt-ink-2:      #42506a;
  --pt-ink-3:      #5b6882;

  --pt-up:         #0a7a49;  /* hollow body  */
  --pt-up-fill:    #f6f8fd;  /* = --pt-fig   */
  --pt-down:       #c8283a;  /* filled body  */

  --pt-line:       #6b7891;  /* dashed structure guide */
  --pt-line-ink:   #545f78;  /* its text label         */
  --pt-mark:       #1d4ed8;  /* confirming dot / arrow */
  --pt-mark-ink:   #1d4ed8;
  --pt-ghost:      #7f8ca6;  /* "if it fails" path     */
  --pt-ghost-ink:  #616c85;
  --pt-vol:        #7f8ca6;
  --pt-axis:       #cfd8e8;

  --pt-radius:     14px;
  --pt-gap:        18px;
}

[data-theme="dark"] {
  --pt-card:       #101a2e;
  --pt-fig:        #0b1322;
  --pt-border:     #24334f;
  --pt-ink:        #eaf0ff;
  --pt-ink-2:      #aab8d4;
  --pt-ink-3:      #97a5c2;

  --pt-up:         #2fd98f;
  --pt-up-fill:    #0b1322;
  --pt-down:       #ff6b78;

  --pt-line:       #7d8cad;
  --pt-line-ink:   #a7b4d0;
  --pt-mark:       #8ab0ff;
  --pt-mark-ink:   #8ab0ff;
  --pt-ghost:      #6f7d9c;
  --pt-ghost-ink:  #8b98b6;
  --pt-vol:        #6f7d9c;
  --pt-axis:       #2a3a5c;
}

/* The desks' dark surface. Scoped so it wins inside a light-theme page too. */
.dk,
[data-theme="light"] .dk {
  --pt-card:       #0f1a2b;
  --pt-fig:        #0a1220;
  --pt-border:     #21304b;
  --pt-ink:        #eaf0ff;
  --pt-ink-2:      #aab8d4;
  --pt-ink-3:      #97a5c2;

  --pt-up:         #1fd286;
  --pt-up-fill:    #0a1220;
  --pt-down:       #ff5c61;

  --pt-line:       #7d8cad;
  --pt-line-ink:   #a7b4d0;
  --pt-mark:       #8ab0ff;
  --pt-mark-ink:   #8ab0ff;
  --pt-ghost:      #6f7d9c;
  --pt-ghost-ink:  #8b98b6;
  --pt-vol:        #6f7d9c;
  --pt-axis:       #22314e;
}

/* ------------------------------------------------------------------ grid */

.pt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: var(--pt-gap, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pt-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--pt-card, #fff);
  border: 1px solid var(--pt-border, #e1e7f2);
  border-radius: var(--pt-radius, 14px);
  padding: 14px 16px 16px;
  min-width: 0;
  font-family: var(--sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

/* ------------------------------------------------------------------ figure */

.pt-fig {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--pt-fig, #f6f8fd);
  border: 1px solid var(--pt-border, #e1e7f2);
}

.pt-svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 180;
}

/* ------------------------------------------------------------------ svg parts */

.pt-bg   { fill: var(--pt-fig, #f6f8fd); }

/* Candles: one path for each direction. Wick and body share the subpath set,
   so the wick inherits the stroke and the degenerate line fills to nothing. */
.pt-c {
  stroke-width: 1.15;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}
.pt-c--up { stroke: var(--pt-up, currentColor);   fill: var(--pt-up-fill, transparent); }
.pt-c--dn { stroke: var(--pt-down, currentColor); fill: var(--pt-down, currentColor); }

.pt-guide {
  stroke: var(--pt-line, currentColor);
  stroke-width: 1.3;
  stroke-dasharray: 5 4;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.pt-ghost {
  stroke: var(--pt-ghost, currentColor);
  stroke-width: 1.6;
  stroke-dasharray: 2 3.5;
  stroke-linecap: round;
  fill: none;
  opacity: .85;
  vector-effect: non-scaling-stroke;
}

.pt-dot {
  fill: var(--pt-mark, currentColor);
  stroke: var(--pt-fig, #fff);
  stroke-width: 1.4;
}

.pt-arrow { fill: var(--pt-mark, currentColor); }

.pt-lead {
  stroke: var(--pt-mark, currentColor);
  stroke-width: 1;
  stroke-dasharray: 2 2.5;
  fill: none;
  opacity: .7;
  vector-effect: non-scaling-stroke;
}

.pt-vol   { fill: var(--pt-vol, currentColor); }
.pt-axis  { stroke: var(--pt-axis, currentColor); stroke-width: 1; fill: none; }
.pt-brace { stroke: var(--pt-line, currentColor); stroke-width: 1.2; fill: none; }

.pt-l {
  font-family: var(--sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1px;
  fill: var(--pt-ink-2, currentColor);
  paint-order: stroke fill;
  stroke: var(--pt-fig, #fff);
  stroke-width: 2.6px;
  stroke-linejoin: round;
}
.pt-l--mark  { fill: var(--pt-mark-ink, currentColor); }
.pt-l--guide { fill: var(--pt-line-ink, currentColor); font-weight: 600; font-size: 9.5px; }
.pt-l--ghost { fill: var(--pt-ghost-ink, currentColor); font-weight: 600; font-size: 9.5px; }

/* ------------------------------------------------------------------ caption */

.pt-cap { display: flex; flex-direction: column; gap: 8px; }

.pt-cap h3,
.pt-cap .pt-title {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--pt-ink, currentColor);
}

.pt-cap dl { margin: 0; display: grid; gap: 7px; }
.pt-cap dt {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--pt-ink-3, currentColor);
}
.pt-cap dd {
  margin: 2px 0 0;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--pt-ink-2, currentColor);
  text-wrap: pretty;
}

.pt-note {
  margin: 16px 0 0;
  font-size: .8125rem;
  line-height: 1.5;
  font-weight: 600;
  color: var(--pt-ink-2, currentColor);
  font-family: var(--sans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
}

/* ------------------------------------------------------------------ breakpoints */

/* 1512 / 1280: a 1200px wrap gives three columns at ~388px and ~388px.
   Nothing to change — auto-fill handles it. Tighten the gap a little below
   1280 so three columns still breathe. */
@media (max-width: 1279px) {
  .pt-grid { --pt-gap: 14px; }
}

/* Tablet: two columns. */
@media (max-width: 900px) {
  .pt-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* 390px phone: one column, edge-to-edge card, slightly larger SVG labels
   because the figure is only ~330px wide there. */
@media (max-width: 599px) {
  .pt-grid { grid-template-columns: 1fr; --pt-gap: 12px; }
  .pt-card { padding: 12px 12px 14px; border-radius: 12px; }
  .pt-cap h3, .pt-cap .pt-title { font-size: 1rem; }
  .pt-cap dd { font-size: .8438rem; }
  .pt-l { font-size: 10.5px; }
  .pt-l--guide, .pt-l--ghost { font-size: 10px; }
}

@media (forced-colors: active) {
  .pt-c, .pt-guide, .pt-ghost, .pt-axis, .pt-brace, .pt-lead { stroke: CanvasText; }
  .pt-c--up { fill: Canvas; }
  .pt-c--dn, .pt-dot, .pt-arrow, .pt-vol { fill: CanvasText; }
  .pt-l { fill: CanvasText; stroke: Canvas; }
}