/* The market-perception study pages and the research index: charts drawn as HTML rows
   from checked-in results, tables, and the series colours. Builds on ../style.css. */
main.study.market { max-width: 860px; }
.market .lede { font-size: var(--t-title); color: var(--muted); line-height: 1.5; }
.market .synthetic { display: inline-block; margin: 0 0 1.25rem; padding: .25rem .6rem; border: 1px solid var(--line);
  border-radius: 999px; font-size: var(--t-small); color: var(--muted); }
.market h3 { font-size: 1rem; font-weight: 600; margin: 2rem 0 .5rem; color: var(--ink); }
.market figure { margin: 2rem 0; }
.market figure > figcaption { margin-top: .75rem; color: var(--muted); line-height: 1.55; }
.market .dv-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 2rem 0;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.market .dv-counts > div { background: var(--bg); padding: 1rem 1.1rem; }
.market .dv-counts b { display: block; font-size: 1.6rem; letter-spacing: -.03em; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; }
.market .dv-counts span { font-size: var(--t-small); color: var(--muted); line-height: 1.4; display: block; margin-top: .2rem; }
.market blockquote { margin: 1rem 0; padding: .2rem 0 .2rem 1rem; border-left: 2px solid var(--line); color: var(--ink-2); }
.market blockquote p { margin: .3rem 0; }
.market .cite { font-size: var(--t-small); color: var(--faint); }
.market ul.plain { padding-left: 1.1rem; }

/* Series colours: identity, never rank. Validated categorical slots 1-3 (blue, orange,
   aqua) plus a neutral grey for the control. */
.market, .research-index {
  --s-control: #6b6964; --s-1: #2a78d6; --s-2: #eb6834; --s-3: #1baf7a; --s-bad: #b3261e;
}
:root[data-theme="dark"] .market, :root[data-theme="dark"] .research-index {
  --s-control: #a3a19b; --s-1: #3987e5; --s-2: #d95926; --s-3: #199e70; --s-bad: #e66767;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .market { --s-control: #a3a19b; --s-1: #3987e5; --s-2: #d95926; --s-3: #199e70; }
}

/* Dot-and-interval rows. */
.dots { --label: 13rem; --val: 9.5rem; margin: 1rem 0 .5rem; font-size: var(--t-small); }
.dots-axis, .dots-row { display: grid; grid-template-columns: var(--label) 1fr var(--val); align-items: center; gap: .75rem; }
.dots-axis { height: 1.4rem; color: var(--faint); }
.dots-axis .dv-track { position: relative; height: 100%; }
.dots-axis i { position: absolute; top: 0; transform: translateX(-50%); font-style: normal; }
.dots-axis b { font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dots-row { min-height: 1.9rem; }
.dots-row .dv-label { color: var(--ink-2); line-height: 1.3; }
.dots-row.sub .dv-label { padding-left: 1rem; color: var(--muted); }
.dots-row .dv-val { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.dots-row .dv-track { position: relative; height: 1.9rem; }
.dots-row .dv-track i { position: absolute; display: block; }
.dots-row .dv-grid { top: 0; bottom: 0; width: 1px; background: var(--line); opacity: .6; }
.dots-row .dv-zero { top: 0; bottom: 0; width: 1px; background: var(--muted); }
.dots-row .dv-ci { top: calc(50% - 1px); height: 2px; border-radius: 1px; background: var(--s-control); }
.dots-row .dv-dot, .dv-legend .dv-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--s-control);
  box-shadow: 0 0 0 2px var(--bg); }
.dots-row .dv-dot { top: calc(50% - 5px); margin-left: -5px; }
.dots-head { margin: .9rem 0 .2rem; font-weight: 600; color: var(--ink); font-size: var(--t-small); }
.dv-dot.s1, .dv-ci.s1 { background: var(--s-1); }
.dv-dot.s2, .dv-ci.s2 { background: var(--s-2); }
.dv-dot.s3, .dv-ci.s3 { background: var(--s-3); }
.dv-dot.bad, .dv-ci.bad { background: var(--s-bad); }
.dv-dot.dv-hollow { background: var(--bg) !important; border: 2px solid var(--s-control); box-sizing: border-box; }
.dv-dot.dv-hollow.s1 { border-color: var(--s-1); } .dv-dot.dv-hollow.s2 { border-color: var(--s-2); } .dv-dot.dv-hollow.s3 { border-color: var(--s-3); }
.dv-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: var(--t-small); color: var(--muted); margin: .5rem 0; }
.dv-legend span { display: inline-flex; align-items: center; gap: .45rem; }
.dv-legend .dv-dot { display: inline-block; position: static; }
@media (max-width: 640px) {
  .dots { --val: 0; }
  .dots-axis { grid-template-columns: 0 1fr 0; gap: 0; }
  .dots-row { grid-template-columns: 1fr auto; grid-template-areas: "label val" "track track"; gap: 0 .5rem; padding: .2rem 0; }
  .dots-row .dv-label { grid-area: label; }
  .dots-row .dv-val { grid-area: val; }
  .dots-row .dv-track { grid-area: track; height: 1.4rem; }
}

/* Tables. */
.table-view { margin: .5rem 0 0; font-size: var(--t-small); }
.table-view summary { cursor: pointer; color: var(--muted); }
.table-scroll { overflow-x: auto; margin-top: .5rem; }
.market table { border-collapse: collapse; width: 100%; font-size: var(--t-small); font-variant-numeric: tabular-nums; }
.market th, .market td { text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.market th { color: var(--muted); font-weight: 500; }
.market td:not(:first-child), .market th:not(:first-child) { text-align: right; }
.market table.left td, .market table.left th { text-align: left; }

/* The research index. */
.research-index .cards { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; margin: 1.5rem 0 2.5rem; }
.research-index .cards a { display: block; background: var(--bg); padding: 1.2rem 1.3rem; text-decoration: none; }
.research-index .cards a:hover { background: var(--surface); }
.research-index .cards b { display: block; color: var(--ink); font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; }
.research-index .cards span { display: block; color: var(--muted); font-size: var(--t-small); line-height: 1.5; margin-top: .3rem; }
.research-index .cards em { font-style: normal; color: var(--faint); font-size: var(--t-small); display: block; margin-top: .45rem; }
.dots-row .dv-seg { top: 20%; bottom: 20%; background: var(--s-control); box-shadow: inset -2px 0 0 var(--bg); }
.dots-row .dv-seg.s1 { background: var(--s-1); } .dots-row .dv-seg.s2 { background: var(--s-2); }
.dots-row .dv-seg.muted { background: var(--surface-2); }
.dv-legend .dv-dot.muted { background: var(--surface-2); }