/* THE PATTERN ATLAS (owner, Oct 6: "/patterns is still lacking ... the visual hub of the Patterns section"): /patterns
   (web/templates/patterns.html) and the parts every /pattern/<slug> shares with it (web/templates/_atlas.html), in the
   look of /sources' board and the model map (hud.css): a dark board, HUD labels in mono caps, signals as light.
     .pa-hud    the hero's counters            .pa      the atlas: kinds x 1/7/30 days against ordinary days
     .pa-now    happening now and coming up    .pa-fans what the price did after each kind (one fan each, one scale)
     .pa-kd     kind by kind: one expandable row per kind, its words and its patterns
     .pa-vs     a pattern page's strip of its kind's cells; .pa-lat its neighbours one condition away; .pa-ip in play
   Green and red only for a clear edge up or down (or a move up or down); grey for no clear edge; orange only for a
   sideways move. Every text >= 11.5px (the phone floor, tests/test_ux_viz10.py) and small labels spaced <= .12em. Motion
   only under prefers-reduced-motion: no-preference, and only once patterns2.js has marked the page (html.pa-js) and the
   part has scrolled into view (.pa-in): without a script every cell is simply there. */

.pa [hidden], .pa-nilk[hidden], .pa-now [hidden], .pa-fans [hidden], .pa-kl[hidden], .pa-kf[hidden], .pa-kd[hidden], .pa-ctl[hidden] { display: none !important; }
.pa-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pa .ccbdg, .pa-now .ccbdg, .pa-fans .ccbdg, .pa-kd .ccbdg, .pa-vs .ccbdg { padding: 2px 7px; gap: 4px; border-radius: 6px; }
.pa .ccbdg b, .pa-now .ccbdg b, .pa-fans .ccbdg b, .pa-kd .ccbdg b, .pa-vs .ccbdg b { font-size: 11.5px; letter-spacing: .08em; }
.pa-led { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 8px var(--blue); }

/* ---------------------------------------------------------------- the hero's counters (the home funnel's HUD line) */
.pa-hud { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 14px 0 0; padding: 7px 14px; border-radius: 999px; width: fit-content;
  max-width: 100%; border: 1px solid rgba(79,140,255,.3); background: rgba(79,140,255,.06);
  box-shadow: inset 0 0 22px rgba(79,140,255,.07), 0 0 26px rgba(79,140,255,.06); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink2); }
.pa-hud > span { display: inline-block; white-space: nowrap; }
.pa-hud > span + span::before { content: "·"; margin: 0 9px; color: var(--ink4); }
.pa-hud b { color: var(--ink); font-weight: 700; }
.pa-hud-k { color: var(--blue); }
.pa-hud-k .pa-led { margin: 0 9px 1px 0; vertical-align: middle; }
.pa-hud-c b { color: var(--blue); }
.pa-lead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 12px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--ink2); }
.pa-lead > .mono { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); margin-right: 2px; }
.pa-ld1 { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line2);
  background: rgba(12,15,20,.8); color: var(--ink); text-decoration: none; font-size: 13px; }
.pa-ld1 small { font-size: 11.5px; color: var(--ink3); }
.pa-ld1.pa-up { border-color: var(--mint-dim); }
.pa-ld1.pa-up b { color: var(--mint); }
.pa-ld1.pa-down { border-color: var(--red-dim); }
.pa-ld1.pa-down b { color: var(--red); }
.pa-ld1:hover { border-color: var(--blue); }

/* ---------------------------------------------------------------- the atlas board */
.pa { position: relative; margin: 10px 0 26px; padding: 18px 18px 12px; border: 1px solid var(--line2); border-radius: 16px;
  background: radial-gradient(ellipse at 30% 0%, rgba(79,140,255,.08), rgba(79,140,255,0) 55%), linear-gradient(180deg, #0C0F14, #08090C); }
.pa-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 26px; margin: 0 0 10px; }
.pa-hl { min-width: 0; flex: 1 1 420px; }
.pa-k { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink3); }
.pa-t { margin: 4px 0 6px; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.pa-how { margin: 0; max-width: 78ch; font-size: 13.5px; line-height: 1.5; color: var(--ink2); }
.pa-key { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 5px 18px; font-size: 11.5px; color: var(--ink3); }
.pa-key li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.pa-sw { display: inline-block; flex: none; width: 14px; height: 10px; border-radius: 3px; border: 1px solid #2A313C; background: #0E1217; }
.pa-sw-up { border-color: var(--mint-dim); background: rgba(56,242,164,.35); }
.pa-sw-down { border-color: var(--red-dim); background: rgba(255,77,94,.35); }
.pa-sw-none { background: rgba(174,181,193,.25); }
.pa-sw-thin { border-style: dashed; background: repeating-linear-gradient(135deg, rgba(255,255,255,.12) 0 2px, transparent 2px 4px); }
.pa-sw-bar { width: 22px; height: 4px; border: 0; border-radius: 2px; background: linear-gradient(90deg, transparent 20%, rgba(174,181,193,.5) 20% 80%, transparent 80%); position: relative; }
.pa-sw-bar::after { content: ""; position: absolute; left: 50%; top: -3px; width: 1px; height: 10px; background: rgba(255,255,255,.35); }

/* the controls (patterns2.js shows them): search, then the kind, horizon and evidence chips */
.pa-ctl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 14px; padding: 12px; border: 1px solid #1E242E; border-radius: 12px; background: rgba(5,6,8,.55); }
.pa-find { position: relative; }
.pa-find input { width: 100%; box-sizing: border-box; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line2); background: #07090C; color: var(--ink);
  font: 14px var(--sans); outline: none; }
.pa-find input:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(79,140,255,.18); }
.pa-fl { display: flex; flex-wrap: wrap; gap: 8px 14px; min-width: 0; }
.pa-find, .pa-chips { min-width: 0; }
.pa-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 2px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(5,6,8,.7); }
.pa-chips button { font: inherit; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); background: none; border: 0;
  border-radius: 10px; padding: 6px 10px; cursor: pointer; white-space: nowrap; }
.pa-chips button:hover { color: var(--ink); }
.pa-chips button[aria-pressed="true"] { color: var(--ink); background: var(--blue-dim); box-shadow: 0 0 14px rgba(79,140,255,.3); }
.pa-chips button[disabled] { opacity: .4; cursor: default; }
.pa-chips button i { font-style: normal; margin-left: 6px; color: var(--ink3); }
.pa-st { margin: 0; font-size: 11.5px; color: var(--ink3); }
.pa-st:empty { display: none; }
.pa-res { position: absolute; z-index: 6; left: 0; right: 0; top: calc(100% + 6px); max-height: 380px; overflow-y: auto; padding: 6px; border-radius: 12px;
  border: 1px solid var(--line2); background: rgba(9,11,15,.98); box-shadow: 0 18px 40px rgba(0,0,0,.55); }
.pa-res a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 8px 10px; border-radius: 8px;
  color: var(--ink); text-decoration: none; font-size: 13.5px; line-height: 1.35; }
.pa-res a:hover, .pa-res a:focus { background: rgba(79,140,255,.1); outline: none; }
.pa-res a span:last-child { font-family: var(--mono); font-size: 12px; color: var(--ink3); white-space: nowrap; }
.pa-res p { margin: 6px 10px; font-size: 12px; color: var(--ink3); }

/* the families: panels flowing in two columns on a wide screen */
.pa-grid { columns: 2 380px; column-gap: 14px; }
.pa-fam { break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 14px; padding: 10px 12px 8px; border: 1px solid #1E242E; border-radius: 12px;
  background: rgba(12,15,20,.85); }
.pa-fh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 6px; }
.pa-fh h3 { margin: 0; font-size: 13.5px; font-weight: 700; letter-spacing: .02em; color: var(--ink); }
.pa-fc { font-size: 11.5px; color: var(--blue); }
.pa-colh, .pa-r { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 84px); gap: 6px; align-items: center; }
.pa-colh { margin: 0 0 4px; font-size: 11.5px; color: var(--ink3); text-align: center; }
.pa-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.pa-r { padding: 3px 0; border-radius: 9px; scroll-margin-top: 120px; }
.pa-r:target { box-shadow: 0 0 0 1px var(--blue), 0 0 22px rgba(79,140,255,.25); }
.pa-kn { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; }
.pa-kn a, .pa-nm { min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.pa-kn a { text-decoration-color: rgba(255,255,255,.18); }
.pa-kn a:hover { color: var(--blue); }
.pa-kn small { flex-basis: 100%; font-size: 11.5px; color: var(--ink3); }
.pa-pv { color: var(--blue); }
.pa-s-empty .pa-kn a, .pa-s-empty .pa-nm { color: var(--ink3); font-weight: 500; }

/* a cell: the edge, its 95% range as a bar on the shared scale, the range in numbers */
.pa-c { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 3px; min-height: 50px;
  padding: 5px 4px; border-radius: 8px; border: 1px solid #1F2630; background: #0D1116; text-align: center; cursor: default; transition: opacity .25s ease; }
.pa-c b { font-family: var(--mono); font-size: 15.5px; font-weight: 700; line-height: 1.1; color: var(--ink2); }
.pa-c small { font-family: var(--mono); font-size: 11.5px; line-height: 1.1; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-bar { position: relative; display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.05); }
.pa-bar::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(255,255,255,.28); }
.pa-bar i { position: absolute; top: 0; bottom: 0; left: var(--l); width: var(--w); border-radius: 3px; background: rgba(174,181,193,.32); }
.pa-bar s { position: absolute; top: -2px; left: var(--d); width: 2px; height: 10px; margin-left: -1px; border-radius: 1px; background: var(--ink2); }
.pa-up { border-color: var(--mint-dim); background: rgba(56,242,164,.07); box-shadow: inset 0 0 18px rgba(56,242,164,.07); }
.pa-up b { color: var(--mint); }
.pa-up .pa-bar i { background: rgba(56,242,164,.5); }
.pa-up .pa-bar s { background: var(--mint); box-shadow: 0 0 6px var(--mint); }
.pa-down { border-color: var(--red-dim); background: rgba(255,77,94,.07); box-shadow: inset 0 0 18px rgba(255,77,94,.07); }
.pa-down b { color: var(--red); }
.pa-down .pa-bar i { background: rgba(255,77,94,.5); }
.pa-down .pa-bar s { background: var(--red); box-shadow: 0 0 6px var(--red); }
.pa-thin { border-style: dashed; border-color: #2A313C; background: repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 4px, transparent 4px 8px), #0B0E12; }
.pa-thin b, .pa-na b { font-size: 13px; font-weight: 600; color: var(--ink3); }
.pa-na { border-style: dashed; border-color: #1C222B; background: transparent; }
.pa-span { grid-column: 2 / -1; min-height: 38px; }
/* one horizon picked: the other two step back */
[data-pa-h="1"] .pa-c:not([data-h="1"]), [data-pa-h="7"] .pa-c:not([data-h="7"]), [data-pa-h="30"] .pa-c:not([data-h="30"]),
[data-pa-h="1"] .pa-lx:not([data-h="1"]), [data-pa-h="7"] .pa-lx:not([data-h="7"]), [data-pa-h="30"] .pa-lx:not([data-h="30"]) { opacity: .32; }
[data-pa-h="1"] .pa-colh [data-h="1"], [data-pa-h="7"] .pa-colh [data-h="7"], [data-pa-h="30"] .pa-colh [data-h="30"] { color: var(--ink); }
.pa-span[data-h] { opacity: 1 !important; }
.pa-none { margin: 4px 0 12px; font-size: 12.5px; color: var(--ink3); }
.pa-nil { margin: 8px 0 2px; padding-top: 8px; border-top: 1px dashed #1E242E; font-size: 12.5px; line-height: 1.6; color: var(--ink3); }
.pa-nil > .mono { font-size: 11.5px; margin-right: 4px; }
.pa-fh + .pa-nil { margin-top: 0; padding-top: 0; border-top: 0; }
.pa-nilk { color: var(--ink2); }
.pa-nilk + .pa-nilk::before { content: "·"; margin: 0 7px; color: var(--ink4); }
.pa-nums { margin: 2px 0 8px; }
.pa-nums summary { cursor: pointer; font-size: 12px; color: var(--ink3); padding: 6px 0; }
.pa-nums summary:hover { color: var(--ink); }
.pa-tb { font-size: 13px; }
.pa-tb td { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; }
.pa-tb td:first-child { font-family: var(--sans); font-size: 13px; white-space: normal; }
.pa .src { margin: 6px 0 0; }

/* ---------------------------------------------------------------- happening now and coming up */
.pa-now { margin: 0 0 34px; }
.pa-nh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 20px; margin: 0 0 10px; }
.pa-nh h2 { margin: 0; font-size: 21px; }
.pa-nh p { margin: 0; max-width: 72ch; font-size: 13.5px; line-height: 1.45; color: var(--ink3); }
.pa-lane { margin: 0 0 12px; min-width: 0; }
.pa-lk { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 6px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.pa-lk a { color: var(--ink2); text-transform: none; letter-spacing: 0; }
.pa-lane[data-lane="live"] .pa-lk { color: var(--gold); }
.pa-lane[data-lane="live"] .pa-led { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.pa-cards { list-style: none; margin: 0; padding: 2px 2px 10px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(236px, 264px); gap: 10px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; }
.pa-e { scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 11px; border-radius: 12px;
  border: 1px solid var(--line2); background: linear-gradient(180deg, #111419, #0B0D11); }
.pa-e-live { border-color: rgba(255,215,94,.32); box-shadow: inset 0 0 22px rgba(255,215,94,.04); }
.pa-eh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: 11.5px; color: var(--ink3); }
.pa-eh time { margin-left: auto; font-size: 11.5px; }
.pa-ago { display: inline-flex; align-items: center; gap: 6px; color: var(--gold); }
.pa-ago .pa-led { width: 6px; height: 6px; background: var(--gold); box-shadow: 0 0 7px var(--gold); }
.pa-eh .chip { font-size: 11.5px; }
.pa-ec { display: flex; align-items: center; gap: 7px; margin: 0; min-width: 0; font-size: 14px; }
.pa-ec a { color: var(--ink); text-decoration: none; }
.pa-ec a:hover b { color: var(--blue); }
.pa-en { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--ink3); }
.pa-ea { display: grid; gap: 5px; margin-top: auto; padding-top: 7px; border-top: 1px dashed var(--line2); color: var(--ink2); text-decoration: none; }
.pa-ea:hover .pa-ep { color: var(--ink); }
.pa-ld { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.pa-lx { display: inline-flex; align-items: baseline; gap: 4px; transition: opacity .25s ease; }
.pa-lx small { font-size: 11.5px; color: var(--ink3); }
.pa-lx b { font-size: 16px; font-weight: 700; }
.pa-lw { flex-basis: 100%; font-size: 11.5px; color: var(--ink3); }
.pa-ep { display: grid; gap: 2px; font-size: 12.5px; line-height: 1.4; color: var(--ink2); }
.pa-epn { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }   /* the name may clip, never its count */
.pa-ep .mono { font-size: 11.5px; color: var(--ink3); }

/* ---------------------------------------------------------------- the fans: one small multiple per kind, one scale */
.pa-fans { margin: 0 0 34px; }
.pa-fg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 10px; }
.pa-ft { min-width: 0; display: flex; flex-direction: column; gap: 5px; padding: 10px 11px 10px; border-radius: 12px; border: 1px solid var(--line2);
  background: linear-gradient(180deg, #101318, #0B0D11); }
.pa-fth { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 11.5px; color: var(--ink3); min-width: 0; }
.pa-fth .ccbdg { min-width: 0; max-width: 100%; overflow: hidden; }
.pa-fth .ccbdg b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-ft h3 { margin: 0; font-size: 13.5px; line-height: 1.3; font-weight: 600; }
.pa-ft h3 a { color: var(--ink); text-decoration-color: rgba(255,255,255,.18); }
.pa-ft h3 a:hover { color: var(--blue); }
.pa-ftv { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--ink2); }
.pa-ftv b { font-size: 15px; }
.pa-ftv span { display: block; font-size: 11.5px; color: var(--ink3); }
.pa-fkey { border-style: dashed; background: transparent; }
.pa-fkl { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 3px; font-size: 11.5px; color: var(--ink3); }
.pa-fkl li { display: flex; align-items: center; gap: 7px; }
.pa-fkl i { display: inline-block; flex: none; width: 14px; height: 8px; border-radius: 2px; }
.pa-fk1 { background: rgba(143,166,191,.2); }
.pa-fk2 { background: rgba(143,166,191,.45); }
.pa-fk3 { height: 2px !important; background: var(--ink2); }
svg.pa-fan { display: block; width: 100%; height: auto; overflow: visible; outline: none; margin: 2px 0; }
svg.pa-fan:focus-visible { box-shadow: 0 0 0 2px var(--blue); border-radius: 6px; }
.pa-fan .fg { fill: none; stroke: rgba(255,255,255,.07); stroke-width: 1; }
.pa-fan .f0 { stroke: rgba(255,255,255,.3); stroke-width: 1; }
.pa-fan .fb { fill: rgba(143,166,191,.12); }
.pa-fan .fm50 { fill: rgba(143,166,191,.26); }
.pa-fan .fl { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pa-fan circle { stroke: #0B0D11; stroke-width: 1.5; }
.pa-fan .fc { fill: var(--ink3); }
.pa-fan .fz { fill: transparent; }
.pa-fan .fz.mk-on { fill: rgba(255,255,255,.05); }

/* ---------------------------------------------------------------- kind by kind: one expandable row per kind */
.pa-kf { margin: 18px 0 6px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.pa-kl { display: grid; gap: 6px; }
.pa-kd { border: 1px solid var(--line2); border-radius: 10px; background: linear-gradient(180deg, #101318, #0B0D11); scroll-margin-top: 120px; }
.pa-kd[open] { border-color: #2E3746; }
.pa-kd summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 9px 12px; cursor: pointer; list-style: none; }
.pa-kd summary::-webkit-details-marker { display: none; }
.pa-kd summary::after { content: "+"; margin-left: auto; font-family: var(--mono); font-size: 15px; color: var(--ink3); }
.pa-kd[open] summary::after { content: "\2212"; }
.pa-kdn { font-size: 14px; font-weight: 600; color: var(--ink); }
.pa-kdx { font-size: 11.5px; color: var(--ink3); }
.pa-kds { font-family: var(--mono); font-size: 11.5px; padding: 1px 7px; border-radius: 6px; border: 1px solid; }
.pa-kds.pa-up { color: var(--mint); border-color: var(--mint-dim); background: rgba(56,242,164,.07); }
.pa-kds.pa-down { color: var(--red); border-color: var(--red-dim); background: rgba(255,77,94,.07); }
.pa-kb { padding: 0 12px 12px; display: grid; gap: 8px; }
.pa-ks { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink2); }
.pa-kq { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink3); }
.pa-pl { list-style: none; margin: 4px 0 0; padding: 0; }
.pa-pl li { display: grid; grid-template-columns: minmax(0, 1fr) 44px 46px 46px; align-items: baseline; gap: 2px 8px; padding: 6px 0; border-top: 1px dashed #1E242E;
  font-size: 13px; line-height: 1.35; }
.pa-pl li > span { font-family: var(--mono); font-size: 12.5px; text-align: right; color: var(--ink2); }
.pa-pl li.pa-plh { border-top: 0; padding: 2px 0 4px; }
.pa-pl li.pa-plh > span { font-size: 11.5px; color: var(--ink3); }
.pa-pl li.pa-plh > span:first-child { text-align: left; }
.pa-pl em { grid-column: 1 / -1; font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--red); }
.pa-pl a { color: var(--ink); }
.pa-more { margin: 6px 0 0; font-size: 12px; color: var(--ink3); }

/* ---------------------------------------------------------------- a pattern page: its kind against ordinary days */
.pa-vs { margin: 16px 0 6px; padding: 12px 14px; border: 1px solid var(--line2); border-radius: 12px;
  background: radial-gradient(ellipse at 15% 0%, rgba(79,140,255,.07), rgba(79,140,255,0) 60%), linear-gradient(180deg, #0C0F14, #08090C); }
.pa-vs-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.pa-vs-h a { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--ink2); }
.pa-vs-r { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 520px; }
.pa-vs-r > div { display: grid; gap: 4px; }
.pa-vs-r > div > span { font-size: 11.5px; color: var(--ink3); text-align: center; }
.pa-vs p.pa-vs-s { margin: 8px 0 0; max-width: 90ch; font-size: 13px; line-height: 1.5; color: var(--ink2); }

/* in play: cases of this pattern whose 30 days are still running */
.pa-lk-live { color: var(--gold); }
.pa-lk-live .pa-led { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.pa-ip { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.pa-ip li { display: grid; gap: 3px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(255,215,94,.3); background: linear-gradient(180deg, #121310, #0C0D0B);
  font-size: 13px; color: var(--ink2); }
.pa-ip .pa-ago { font-size: 11.5px; }
.pa-ip b { color: var(--ink); }

/* similar patterns, one condition away: a small lattice */
.pa-lat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); gap: 12px 26px; align-items: center; margin: 12px 0 16px; }
.pa-lc { display: grid; gap: 6px; min-width: 0; position: relative; }
.pa-lc > p { margin: 0 0 2px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); }
.pa-ln { display: grid; gap: 2px; padding: 8px 11px; border-radius: 10px; border: 1px solid var(--line2); background: #0E1217; color: var(--ink); text-decoration: none;
  font-size: 13px; line-height: 1.35; position: relative; }
a.pa-ln:hover { border-color: rgba(79,140,255,.5); box-shadow: 0 0 16px rgba(79,140,255,.12); }
.pa-ln small { font-family: var(--mono); font-size: 11.5px; color: var(--ink3); }
.pa-me .pa-ln { border-color: var(--blue); background: #0E1626; box-shadow: 0 0 22px rgba(79,140,255,.18); }
.pa-lc.pa-up-l .pa-ln::after, .pa-lc.pa-dn-l .pa-ln::before { content: ""; position: absolute; top: 50%; width: 26px; height: 1px; background: linear-gradient(90deg, rgba(79,140,255,.6), rgba(79,140,255,.15)); }
.pa-lc.pa-up-l .pa-ln::after { left: 100%; }
.pa-lc.pa-dn-l .pa-ln::before { right: 100%; background: linear-gradient(90deg, rgba(79,140,255,.15), rgba(79,140,255,.6)); }
.pa-lc .pa-lmore { font-size: 12px; color: var(--ink3); }

/* ---------------------------------------------------------------- motion (once patterns2.js marks the page) */
@media (prefers-reduced-motion: no-preference) {
  .pa-led { animation: pa-blink 1.6s ease-in-out infinite; }
  .pa-js .pa:not(.pa-in) .pa-c, .pa-js .pa-vs:not(.pa-in) .pa-c { opacity: 0; }
  .pa-js .pa-in .pa-c { animation: pa-lit .5s cubic-bezier(.2,.75,.25,1) backwards; animation-delay: calc(var(--i, 0) * 34ms + var(--hd, 0ms)); }
  .pa-js .pa-c[data-h="7"] { --hd: 110ms; }
  .pa-js .pa-c[data-h="30"] { --hd: 220ms; }
  .pa-js .pa-in .pa-bar i { animation: pa-grow .7s cubic-bezier(.2,.75,.25,1) backwards; animation-delay: calc(var(--i, 0) * 34ms + var(--hd, 0ms) + .15s); }
  .pa-js .pa-in .pa-bar s { animation: pa-dot .8s cubic-bezier(.2,.75,.25,1) backwards; animation-delay: calc(var(--i, 0) * 34ms + var(--hd, 0ms) + .15s); }
  .pa-js .pa-in .pa-up, .pa-js .pa-in .pa-down { animation: pa-lit .5s cubic-bezier(.2,.75,.25,1) backwards, pa-glow 3.4s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 34ms + var(--hd, 0ms)), 1.6s; }
  .pa-js .pa-ft[data-k]:not(.pa-in) .fl { stroke-dasharray: 100; stroke-dashoffset: 100; }
  .pa-js .pa-ft[data-k]:not(.pa-in) .fb, .pa-js .pa-ft[data-k]:not(.pa-in) .fm50, .pa-js .pa-ft[data-k]:not(.pa-in) circle { opacity: 0; }
  .pa-js .pa-ft[data-k].pa-in .fl { stroke-dasharray: 100; animation: pa-draw 1.1s ease-out .15s backwards; }
  .pa-js .pa-ft[data-k].pa-in .fb, .pa-js .pa-ft[data-k].pa-in .fm50 { animation: pa-fade .9s ease-out .3s backwards; }
  .pa-js .pa-ft[data-k].pa-in circle { animation: pa-fade .4s ease-out 1.1s backwards; }
  .pa-js .pa-e { animation: pa-lit .45s cubic-bezier(.2,.75,.25,1) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
}
@keyframes pa-blink { 50% { opacity: .35; } }
@keyframes pa-lit { from { opacity: 0; transform: translateY(4px) scale(.97); } }
@keyframes pa-grow { from { transform: scaleX(0); } }
@keyframes pa-dot { from { left: 50%; opacity: 0; } to { left: var(--d); } }
@keyframes pa-draw { from { stroke-dashoffset: 100; } }
@keyframes pa-fade { from { opacity: 0; } }
@keyframes pa-glow { 50% { box-shadow: inset 0 0 22px rgba(255,255,255,.06), 0 0 14px rgba(79,140,255,.18); } }

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 859px) {
  .pa-lat { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .pa-lc.pa-up-l .pa-ln::after, .pa-lc.pa-dn-l .pa-ln::before { display: none; }
}
@media (max-width: 600px) {
  .pa { padding: 14px 10px 10px; border-radius: 14px; }
  .pa-t { font-size: 19px; }
  .pa-how { font-size: 13px; }
  .pa-key { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 10px; }
  .pa-key li { white-space: normal; align-items: flex-start; }
  .pa-key .pa-sw { margin-top: 3px; }
  .pa-hud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 8px 10px; width: auto; border-radius: 12px; padding: 9px 12px 10px;
    letter-spacing: .05em; }
  .pa-hud > span { white-space: normal; line-height: 1.25; }
  .pa-hud > span + span::before { content: none; }
  .pa-hud-k { grid-column: 1 / -1; }
  .pa-hud > span:not(.pa-hud-k) b { display: block; font-size: 15px; }
  .pa-ctl { padding: 10px 8px; gap: 8px; }
  .pa-fl { flex-direction: column; gap: 6px; }
  .pa-chips { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
  .pa-chips::-webkit-scrollbar { display: none; }
  .pa-chips button { flex: none; padding: 7px 10px; }
  .pa-fam { padding: 9px 8px 6px; }
  .pa-colh, .pa-r { grid-template-columns: minmax(0, 1fr) repeat(3, 54px); gap: 4px; }
  .pa-c { padding: 5px 4px; min-height: 40px; gap: 4px; }
  .pa-c b { font-size: 14.5px; }
  .pa-c small { display: none; }
  .pa-span small { display: block; }
  .pa-kn { gap: 1px 6px; }
  .pa-kn .ccbdg { display: none; }
  .pa-kn a, .pa-nm { flex-basis: 100%; font-size: 13px; }
  .pa-cards { grid-auto-columns: minmax(228px, 78vw); }
  .pa-fg { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(176px, 62%); overflow-x: auto;
    overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 8px; }
  .pa-ft { scroll-snap-align: start; }
  .pa-vs .pa-c small { display: block; }
  .pa-ip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(220px, 78%); overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; padding-bottom: 6px; }
  .pa-ip li { scroll-snap-align: start; }
  .pa-kd summary { padding: 8px 10px; gap: 3px 8px; }
  .pa-kb { padding: 0 10px 10px; }
  .pa-pl li { grid-template-columns: minmax(0, 1fr) 36px 42px 42px; gap: 2px 6px; }
}