/* THE RESEARCH NOTES (/research and its posts: web/research.py, templates/research.html and research_post.html), in the
   HUD look of /sources' board and the home funnel (hud.css, pipeline.css): dark wells with a soft blue light, hairline
   cards, mono caps labels, a blue LED on what is live. Blue is what held (the PROVEN colour); green and red only a price
   that moved up or down, orange sideways. Each chart comes as a wide and a narrow drawing (web/research.py charts) and
   one of them shows, so the words on a chart stay legible on a phone. Tokens from site.css :root; no text on a phone
   under 11.5px, small labels spaced at most .12em. */

/* ---------------------------------------------------------------- the header and its HUD line */
.rs-hero .rs-dek p { margin: 0 0 8px; }
.rs-hero .rs-dek p:last-child { margin-bottom: 0; }
.rs-hud { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; width: fit-content; max-width: 100%; margin: 16px 0 0;
  padding: 7px 14px; border-radius: 999px; 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); }
.rs-hud > * + *::before { content: "·"; margin: 0 9px; color: var(--ink4); }
.rs-hud b { color: var(--ink); font-weight: 700; }
.rs-hud-k { display: inline-flex; align-items: center; color: var(--blue); }
.rs-rss { color: var(--ink2); text-decoration: none; }
.rs-rss:hover { color: var(--blue); }
.rs-led { display: inline-block; flex: none; width: 7px; height: 7px; margin-right: 9px; border-radius: 50%; background: var(--blue);
  box-shadow: 0 0 8px var(--blue); }
@media (prefers-reduced-motion: no-preference) { .rs-led { animation: blink 1.6s steps(2, start) infinite; } }
.rs-meta { margin: 12px 0 0; font-size: 12px; color: var(--ink3); }
/* a date inside a line keeps the line's own size (site.css sets every time element in 12.5px mono) */
.rs-hero time, .rs-card time, .rs-revs time, .rs-post .mv-n time, .rs-post .content p time { font-size: inherit; }
.rs-share { display: flex; margin: 12px 0 0; }

/* ---------------------------------------------------------------- the index: sections and post cards */
.rs-sec { margin: 38px 0 0; }
.rs-sh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 12px; }
.rs-sh h2 { margin: 0; font-size: 21px; letter-spacing: -.01em; }
.rs-sh p { margin: 0; font-size: 12px; letter-spacing: .04em; color: var(--ink3); }
.rs-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px; }
.rs-card { position: relative; display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 14px 16px 13px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.07); border-top: 2px solid var(--blue-dim); color: var(--ink); text-decoration: none;
  background: linear-gradient(180deg, #111419 0%, #0B0D11 100%); transition: border-color .2s ease, transform .2s ease, box-shadow .3s ease; }
.rs-card:hover { border-color: rgba(79,140,255,.45); box-shadow: 0 0 24px rgba(79,140,255,.1); }
.rs-card.rs-live { border-top-color: var(--blue); background: radial-gradient(ellipse at 15% 0%, rgba(79,140,255,.09), rgba(79,140,255,0) 60%), linear-gradient(180deg, #111419 0%, #0B0D11 100%); }
.rs-study { border-top-color: var(--indigo-dim); }
.rs-wide-card { max-width: 720px; }
@media (prefers-reduced-motion: no-preference) { .rs-card:hover { transform: translateY(-1px); } }
.rs-ck { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 11.5px; letter-spacing: .06em; color: var(--ink3); }
.rs-chip { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line2);
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.rs-chip.on { color: var(--blue); border-color: rgba(79,140,255,.45); background: rgba(79,140,255,.07); }
.rs-chip .rs-led { width: 6px; height: 6px; margin-right: 7px; }
.rs-ct { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; }
.rs-cl { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink2); }
.rs-cn { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 2px 0 0; font-size: 12px; color: var(--ink3); }
.rs-cn b { color: var(--ink); font-size: 14px; font-weight: 700; }
.rs-acc { color: var(--blue); }
.rs-cn b.rs-acc, .rs-tbl small.rs-acc { color: var(--blue); }
.rs-cd { margin: auto 0 0; padding-top: 6px; border-top: 1px dashed #262D38; font-size: 11.5px; color: var(--ink3); }
.rs-how { max-width: 860px; }
.rs-how .prose p { color: var(--ink2); }

/* ---------------------------------------------------------------- a post: its charts in a lit well */
.rs-fig { margin: 4px 0 10px; padding: 14px 14px 10px; border: 1px solid var(--line2); border-radius: 16px;
  background: radial-gradient(ellipse at 50% 60%, rgba(79,140,255,.07), rgba(79,140,255,0) 62%), linear-gradient(180deg, #0C0F14, #08090C); }
.rs-svg { display: block; width: 100%; height: auto; overflow: visible; margin: 0 auto; }
.rs-svg.rs-wide { max-width: 900px; }
.rs-svg.rs-narrow { display: none; max-width: 440px; }
@media (max-width: 640px) {
  .rs-svg.rs-wide { display: none; }
  .rs-svg.rs-narrow { display: block; }
  .rs-fig { padding: 12px 8px 8px; }
}
.rs-svg:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 8px; }
.rs-svg text { font-family: var(--mono); }
.rs-t, .rs-ax { font-size: 12px; fill: var(--ink3); }
.rs-v { font-size: 12px; font-weight: 600; fill: var(--ink); }
.rs-held { font-size: 13px; font-weight: 700; fill: var(--blue); }
.rs-dim { font-size: 12px; fill: var(--ink3); }
.rs-ph { font-size: 12px; letter-spacing: .08em; fill: var(--ink2); }
.rs-rl { font-family: var(--sans) !important; font-size: 13px; fill: var(--ink2); }
.rs-base { stroke: var(--line2); stroke-width: 1; }
.rs-bar { fill: rgba(79,140,255,.32); stroke: rgba(79,140,255,.85); stroke-width: 1; }
.rs-bar.rs-now { fill: var(--blue); stroke: var(--blue); filter: drop-shadow(0 0 7px rgba(79,140,255,.55)); }
.rs-fut { fill: none; stroke: var(--line2); stroke-dasharray: 3 4; }
.rs-norun { stroke: var(--ink4); stroke-width: 2; }
.rs-mv.rs-good { fill: var(--good); }
.rs-mv.rs-bad { fill: var(--bad); }
.rs-mv.rs-flat { fill: var(--amber); }
.rs-mv.rs-faint { opacity: .35; }
.rs-med { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.rs-cut { stroke: var(--blue); stroke-dasharray: 4 4; }
.rs-cut2 { stroke: var(--steel); stroke-dasharray: 4 4; }
.rs-link { stroke: var(--line2); stroke-width: 2; }
.rs-dot { fill: var(--blue); stroke: #0B0D11; stroke-width: 2; }
.rs-dia { fill: var(--steel); stroke: #0B0D11; stroke-width: 2; }
.rs-svg [data-tt] { cursor: help; }
.rs-svg .mk-on.rs-bar, .rs-svg .mk-on.rs-mv { filter: brightness(1.35); }

/* the chart's key, under it, in plain words */
.rs-key { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 12px; font-size: 12px; color: var(--ink3); }
.rs-key span { display: inline-flex; align-items: center; gap: 7px; }
.rs-k-bar { display: inline-block; width: 12px; height: 10px; border-radius: 2px; background: rgba(79,140,255,.45); border: 1px solid var(--blue); }
.rs-k-bar.rs-k-mv { background: var(--good); border-color: var(--good); box-shadow: 6px 0 0 var(--bad); margin-right: 6px; }
.rs-k-med { display: inline-block; width: 14px; height: 2px; background: var(--ink); }

/* tables, lists, the revisions */
.rs-tbl td small, .rs-tbl th small { font-size: 11.5px; }
.rs-tbl tbody th { font-weight: 600; white-space: nowrap; }
table.stats.rs-miss-tbl td:first-child { min-width: 260px; line-height: 1.45; white-space: normal; }   /* over site.css's nowrap */
table.stats.rs-miss-tbl td.n { white-space: nowrap; }
.rs-cal td { line-height: 1.35; }
.rs-note { font-size: 12.5px; color: var(--ink3); }
.rs-stop { color: var(--ink3); border-color: var(--line2); }
.rs-gone { color: var(--amber); }
.rs-rules { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 10px; }
.rs-rules.rs-ol { list-style: decimal inside; }
.rs-rules li { padding: 10px 14px; border: 1px solid rgba(255,255,255,.07); border-left: 2px solid var(--line2); border-radius: 10px; background: #0E1217; }
.rs-ol li::marker { color: var(--ink3); font-family: var(--mono); font-size: 12px; }
.rs-ol li .rs-rw { display: inline; }
.rs-rw { margin: 0 0 4px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.rs-rn { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink3); }
.rs-counts { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 6px 0 12px; padding: 0; font-size: 12px; color: var(--ink2); }
.rs-counts li { padding: 3px 10px; border: 1px solid var(--line2); border-radius: 999px; background: rgba(255,255,255,.02); }
.rs-counts b { color: var(--blue); }
.rs-revs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 0; font-size: 12.5px; }
.rs-revs li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 4px 14px; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--ink2); }
.rs-revs time { color: var(--ink3); }
.rs-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 6px 0 12px; }

@media (max-width: 600px) {
  .rs-hud { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; border-radius: 12px; padding: 9px 12px 10px; letter-spacing: .05em; }
  .rs-hud > * + *::before { content: none; }
  .rs-hud-k { grid-column: 1 / -1; }
  .rs-ct { font-size: 16px; }
  .rs-sh h2 { font-size: 19px; }
  .rs-revs li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .rs-two { grid-template-columns: minmax(0, 1fr); }
  table.stats.rs-miss-tbl td:first-child { min-width: 200px; }
  .rs-key, .rs-rn, .rs-note { font-size: 12px; }
}
.rs-zero { margin: 6px 0 12px; padding: 10px 14px; border: 1px dashed var(--line2); border-radius: 8px; font-size: 12.5px; color: var(--ink2); }
.rs-weeks { margin: 12px 0 0; font-size: 12px; line-height: 1.9; color: var(--ink3); }
.rs-weeks b { color: var(--ink); }
.rs-k-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.rs-k-dia { display: inline-block; width: 8px; height: 8px; background: var(--steel); transform: rotate(45deg); }
.rs-k-cut { display: inline-block; width: 0; height: 12px; border-left: 1px dashed var(--blue); }