/* Unicode Rendering Support Study: charts, figures and the device test. Loaded only by /research/unicode-rendering-support-study/.
   Colours come from the site tokens so light, dark and print follow the theme. Every mark is also labelled with its number. */
.study-figure { margin: 1.75rem 0; padding: 1rem 1rem 0.75rem; border: 1px solid var(--border-light); border-radius: var(--radius); background: var(--bg-white); }
.study-figure figcaption { font-size: 0.95rem; line-height: 1.5; margin-bottom: 0.75rem; }
.study-figure .table-note { margin: 0.5rem 0 0; }
.study-figure img { display: block; max-width: 100%; height: auto; border-radius: 4px; background: #fff; }
.ch-wrap { width: 100%; overflow-x: auto; }
.ch { display: block; width: 100%; min-width: 34rem; height: auto; }
.ch-grid { stroke: var(--border-light); stroke-width: 1; }
.ch-ref { stroke: var(--text-secondary); stroke-width: 1.5; stroke-dasharray: 4 3; }
.ch-mark { stroke: var(--text-muted); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.7; }
.ch-line { stroke: var(--accent-purple); stroke-width: 2; stroke-linejoin: round; }
.ch-tick { fill: var(--text-secondary); font-size: 11px; }
.ch-label { fill: var(--text-primary); font-size: 12.5px; }
.ch-val { fill: var(--text-primary); font-size: 11.5px; }
.ch-ci { stroke: var(--text-primary); stroke-width: 1.4; opacity: 0.75; }
.ch-link { stroke: var(--text-muted); stroke-width: 1.5; }
.ch-bar.ch-s0 { fill: var(--text-muted); }
.ch-bar.ch-s1 { fill: var(--accent-blue); }
.ch-bar.ch-s2 { fill: var(--accent-purple); }
.ch-dot { fill: var(--accent-purple); stroke: var(--bg-white); stroke-width: 2; }
.ch-dot.ch-ring { fill: var(--bg-white); stroke: var(--text-secondary); stroke-width: 2; }
.ch-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0 0 0.5rem; padding: 0; font-size: 0.85rem; color: var(--text-secondary); }
.ch-key { -webkit-print-color-adjust: exact; print-color-adjust: exact; display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; margin-right: 0.4rem; vertical-align: -0.1rem; }
.ch-key.ch-s0 { background: var(--text-muted); }
.ch-key.ch-s1 { background: var(--accent-blue); }
.ch-key.ch-s2 { background: var(--accent-purple); }
.ch-key.ch-dotkey { background: var(--accent-purple); border-radius: 50%; }
.ch-key.ch-ringkey { background: var(--bg-white); border: 2px solid var(--text-secondary); border-radius: 50%; width: 0.75rem; height: 0.75rem; }
.ch-mobile-note { display: none; margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--text-secondary); }
.figure-data { margin-top: 0.75rem; font-size: 0.9rem; }
.figure-data summary { cursor: pointer; font-weight: 600; padding: 0.25rem 0; }
.figure-data .data-table-wrap { margin-top: 0.5rem; }
.dt-glyph { font-size: 1.6rem; line-height: 1.2; white-space: nowrap; }
.dt-probe { font-weight: 600; white-space: nowrap; }
.dt-probe.is-missing { color: var(--ts-risk); }
.dt-choice { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.dt-choice label { white-space: nowrap; cursor: pointer; }
.dt-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0 0.5rem; }
.dt-actions button { cursor: pointer; }
#dt-text { width: 100%; min-height: 12rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; }
@media (max-width: 600px) {
  .study-figure { padding: 0.75rem 0.6rem 0.5rem; }
  .ch-wrap, .ch-legend { display: none; }
  .ch-mobile-note { display: block; }
}
@media print {
  .ch-mobile-note { display: none !important; }
  .ch { min-width: 0; }
  .ch-wrap { overflow: visible; }
  .study-figure { break-inside: avoid; }
  .dt-actions { display: none; }
}