/* cqtc_hysteresis page: figures and tables. Layered on ../site.css (its tokens and
   module-page classes). Series colors: the reference categorical slots 1 and 2, checked with
   the palette checker on the dark (#111721) and light (#FFFFFF) surfaces; grid, axis and
   reference lines use the site tokens. Dark is the default, as on the rest of the site. */
:root { --c-s1: #3987e5; --c-s2: #d95926; --c-ind: #a3a29b; --c-grid: var(--line); --c-axis: var(--line-2); --c-ref: var(--faint); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --c-s1: #2a78d6; --c-s2: #eb6834; --c-ind: #6b6a65; } }
:root[data-theme="light"] { --c-s1: #2a78d6; --c-s2: #eb6834; --c-ind: #6b6a65; }
.toc { columns: 2 16em; margin: 18px 0 0; padding-left: 1.3em; font-size: 15px; }
.toc li { margin: 0 0 4px; }
.eq { font-family: var(--mono); font-size: .95rem; background: var(--surface-2); padding: 8px 12px; border-radius: 6px; overflow-x: auto; }
.facts li { margin: 0 0 8px; }
.refs { padding-left: 1.2em; }
.refs li { margin: 0 0 8px; overflow-wrap: anywhere; }
blockquote.sap { margin: 12px 0; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 4px; }
blockquote.sap p { margin: 0; }

/* charts */
svg.chart { display: block; width: 100%; height: auto; }
svg.chart .gr { stroke: var(--c-grid); stroke-width: 1; }
svg.chart .ax { stroke: var(--c-axis); stroke-width: 1; }
svg.chart .ref { stroke: var(--c-ref); stroke-width: 1; stroke-dasharray: 4 3; }
svg.chart .tx { fill: var(--muted); font: 13px var(--sans); }
svg.chart .tt { fill: var(--text); font: 600 13px var(--sans); }
svg.chart .s1 { stroke: var(--c-s1); }
svg.chart .s2 { stroke: var(--c-s2); }
svg.chart .f1 { fill: var(--c-s1); }
svg.chart .f2 { fill: var(--c-s2); }
svg.chart .ring { stroke: var(--surface); stroke-width: 2; }
svg.chart .ind { stroke: var(--c-ind); }
svg.chart circle { cursor: default; }
figure { margin: 16px 0; }
figure.f1 { max-width: 640px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 10px 4px; }
figcaption { color: var(--muted); font-size: .9rem; margin-top: 6px; }
.loops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 860px; margin: 12px 0 0; }
.loops figure { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 8px 6px; min-width: 0; }
@media (max-width: 600px) { .loops { grid-template-columns: minmax(0, 1fr); } }
.legend-inline { font-size: .9rem; color: var(--muted); }
.legend-inline .key { display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin: 0 6px 0 0; }
.legend-inline .key.k1 { background: var(--c-s1); }
.legend-inline .key.k2 { background: var(--c-s2); margin-left: 14px; }
.legend-inline .key.k1d { background: repeating-linear-gradient(90deg, var(--c-s1) 0 6px, transparent 6px 10px); margin-left: 14px; }

/* tables */
.tblwrap { overflow-x: auto; margin: 12px 0 18px; }
table.oc { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); font-size: .9rem; }
table.oc caption { text-align: left; color: var(--muted); font-size: .88rem; padding: 0 0 8px; caption-side: top; }
table.oc th, table.oc td { text-align: left; vertical-align: top; padding: 6px 10px; border-bottom: 1px solid var(--line); }
table.oc thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: var(--surface-2); }
table.oc td.num, table.oc th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.oc tr.grp th { background: var(--surface-2); font-weight: 700; font-size: .88rem; color: var(--text); }
table.oc.ex td.num, table.oc.ex th.num { white-space: normal; }
@media (max-width: 600px) {
  table.oc { font-size: .84rem; }
  table.oc th, table.oc td { padding: 5px 6px; }
}
/* narrow screens: the example and diurnal tables become labeled blocks */
@media (max-width: 600px) {
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack caption { display: block; }
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  table.stack tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
  table.stack td, table.stack td.num { border: 0; padding: 2px 10px; text-align: left; white-space: normal; }
  table.stack td::before { content: attr(data-label); display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
}