/* Essay-specific experiments. Typography and colors inherit the site's theme. */
.clio-lab, .clio-map, .clio-bridge {
  --lab-blue: #245a75;
  --lab-green: #35624b;
  --lab-ochre: #80551b;
  margin: 2rem 0 2.5rem;
  color: var(--site-ink);
  font-family: var(--font-ui);
}
.quarto-dark .clio-lab, .quarto-dark .clio-map, .quarto-dark .clio-bridge {
  --lab-blue: #91c4df;
  --lab-green: #a0c7a6;
  --lab-ochre: #e0bc7b;
}
.clio-lab [hidden] { display: none !important; }
.clio-map { padding: 1.3rem 0 0; border-block: 1px solid var(--site-rule); }
.map-eyebrow, .lab-number { color: var(--site-accent); font-size: .65rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 500; }
.map-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; padding: .5rem 0 1.1rem; }
.map-stage { display: flex; flex-direction: column; min-width: 0; position: relative; }
.map-stage:not(:last-child)::after { content: '→'; position: absolute; right: -.85rem; top: 2rem; color: var(--site-muted); }
.map-number { font-size: .68rem; color: var(--site-muted); margin-bottom: .35rem; }
.map-stage strong { font-size: .77rem; font-weight: 500; }
.map-stage > span:last-of-type { font-size: .62rem; color: var(--site-muted); line-height: 1.6; min-height: 2.2rem; margin-top: .3rem; }
.map-marks { height: 65px; margin-top: .7rem; display: flex; align-content: flex-start; flex-wrap: wrap; gap: 5px; }
.map-marks i { display: block; background: var(--site-accent); }
.marks-raw i { width: 17px; height: 24px; border-radius: 1px; opacity: .7; }
.marks-raw i:nth-child(3n) { height: 18px; background: var(--lab-blue); }
.marks-facets i { height: 5px; width: 75%; }
.marks-facets i:nth-child(2n) { width: 55%; background: var(--lab-blue); }
.marks-groups i { width: 31px; height: 31px; border-radius: 50%; }
.marks-groups i:nth-child(2) { width: 24px; height: 24px; background: var(--lab-blue); }
.marks-groups i:nth-child(3) { width: 17px; height: 17px; background: var(--lab-ochre); }
.marks-release { flex-direction: column; flex-wrap: nowrap; }
.marks-release i { width: 88%; height: 10px; }
.marks-release i:nth-child(2) { width: 60%; background: var(--lab-blue); }
.marks-release i:nth-child(3) { width: 30%; background: transparent; border: 1px dashed var(--site-muted); }
.clio-map figcaption, .clio-bridge figcaption, .clio-lab figcaption { font-size: .68rem; line-height: 1.7; padding: .9rem 0; color: var(--site-muted); }
.clio-lab { padding: 1.25rem; background: var(--site-surface); border: 1px solid var(--site-rule); border-top: 3px solid var(--site-accent); border-radius: 2px; font-size: .8rem; line-height: 1.65; }
.clio-lab .lab-heading h3 { margin: .5rem 0 .55rem; font-size: 1.5rem; line-height: 1.2; letter-spacing: -.025em; }
.lab-heading > p { font-size: .72rem; color: var(--site-muted); margin-bottom: 1.3rem; }
.clio-lab fieldset { min-width: 0; }
.clio-lab legend { float: none; width: auto; margin: 0 0 .55rem; font-size: .7rem; color: var(--site-muted); }
.segmented { display: flex; flex-wrap: wrap; gap: .4rem; border: 0; padding: 0; margin: 1.2rem 0; }
.segmented label { position: relative; flex: 1; cursor: pointer; min-width: 100px; }
.segmented input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.segmented label span { display: flex; justify-content: center; align-items: center; min-height: 44px; padding: .5rem .7rem; font-size: .73rem; border: 1px solid var(--site-rule); border-radius: 3px; text-align: center; color: var(--site-ink); background: var(--site-paper); }
.segmented input:checked + span { border-color: var(--site-accent); color: var(--site-accent); box-shadow: inset 0 -2px 0 var(--site-accent); font-weight: 500; }
.segmented input:focus-visible + span { outline: 2px solid var(--site-focus); outline-offset: 3px; }
.clio-lab .facet-question { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.45; margin: 1.4rem 0 1rem; }
.facet-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.facet-group { border-top: 2px solid var(--site-accent); padding-top: .55rem; }
.facet-group.group-1 { border-color: var(--lab-blue); }
.facet-group.group-2 { border-color: var(--lab-ochre); }
.facet-group.group-3 { border-color: var(--lab-green); }
.clio-lab .facet-group h4 { font: 500 .72rem/1.5 var(--font-ui); margin: 0 0 .55rem; display: flex; justify-content: space-between; gap: .5rem; }
.group-count { color: var(--site-muted); font-variant-numeric: tabular-nums; }
.conversation-buttons { display: flex; gap: .3rem; flex-wrap: wrap; }
.clio-lab button { font: inherit; color: var(--site-ink); cursor: pointer; background: var(--site-paper); border: 1px solid var(--site-rule); border-radius: 3px; }
.clio-lab .conversation-token { width: 44px; height: 44px; padding: 0; font-size: .72rem; font-variant-numeric: tabular-nums; }
.clio-lab button:hover { border-color: var(--site-accent); }
.conversation-token[aria-pressed="true"] { border-color: var(--site-accent); background: var(--site-accent); color: var(--site-surface); font-weight: 600; }
.facet-note { font-size: .72rem; color: var(--site-muted); margin: 1.1rem 0; }
.facet-transcript { border-block: 1px solid var(--site-rule); padding: 1rem 0 .3rem; }
.clio-lab .facet-transcript h4 { font: 500 .7rem/1.5 var(--font-ui); margin: 0 0 .9rem; color: var(--site-accent); }
.transcript-lines { display: grid; grid-template-columns: 65px minmax(0, 1fr); gap: .6rem .65rem; margin-bottom: 1rem; }
.transcript-lines dt { font-size: .63rem; font-weight: 500; color: var(--site-muted); padding-top: .15rem; }
.transcript-lines dd { font-family: var(--font-body); font-size: .94rem; line-height: 1.55; margin: 0; }
.transcript-lines dd.quiet { color: var(--site-muted); font-style: italic; }
.chosen-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: .45rem .8rem; margin-bottom: .4rem; }
.chosen-label span { font-size: .62rem; color: var(--site-muted); }
.chosen-label strong { font-size: .75rem; font-weight: 500; }
.facet-basis { font-size: .7rem; color: var(--site-muted); line-height: 1.7; }
.outcome-reading { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; margin-top: 1.2rem; }
.outcome-reading > div { display: flex; flex-direction: column; }
.outcome-reading strong { font: 500 1.5rem/1.4 var(--font-display); color: var(--site-accent); }
.outcome-reading span { font-size: .65rem; color: var(--site-muted); }
.outcome-reading p { grid-column: 1 / -1; font-size: .72rem; margin: .2rem 0 0; }
.lab-details { margin-top: 1.1rem; font-size: .69rem; }
.lab-details summary { cursor: pointer; color: var(--site-accent); min-height: 44px; padding-block: .6rem; }
.lab-details p { margin: .7rem 0; }
.clio-lab figcaption { border-top: 1px solid var(--site-rule); margin-top: .7rem; padding-bottom: 0; }
.floor-note { font-size: .72rem; line-height: 1.7; color: var(--site-muted); }
.volume-control { border-top: 1px solid var(--site-rule); padding-top: 1rem; margin: 1rem 0; }
.volume-control label { display: flex; justify-content: space-between; font-size: .75rem; }
.volume-control output { color: var(--site-accent); font-weight: 600; }
.volume-control input { width: 100%; min-height: 44px; accent-color: var(--site-accent); cursor: pointer; }
.volume-control p { font-size: .65rem; color: var(--site-muted); margin: 0; }
.gate-table-wrap { overflow-x: auto; margin: 1.1rem 0; }
.clio-lab .gate-table { width: 100%; min-width: 470px; border-collapse: collapse; font-size: .67rem; line-height: 1.55; }
.gate-table caption { caption-side: top; font-size: .63rem; color: var(--site-muted); padding: 0 0 .55rem; }
.gate-table th, .gate-table td { padding: .7rem .45rem; border-bottom: 1px solid var(--site-rule); vertical-align: top; }
.gate-table th { font-weight: 500; }
.gate-table th:first-child { padding-left: 0; width: 27%; }
.gate-table thead th { color: var(--site-muted); font-size: .6rem; }
.gate-table .numeric { font-variant-numeric: tabular-nums; text-align: right; }
.gate-reason strong { font-size: .65rem; font-weight: 500; display: block; }
.gate-reason span { display: block; font-size: .61rem; color: var(--site-muted); margin-top: .25rem; }
.gate-pass .gate-reason strong { color: var(--lab-green); }
.gate-hold .gate-reason strong { color: var(--site-accent); }
.released-view { border: 1px solid var(--site-rule); padding: 1rem; margin-top: 1.3rem; background: var(--site-paper); }
.released-heading { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.clio-lab .released-heading h4 { font: 500 1rem/1.4 var(--font-display); margin: 0; }
.release-count { font-size: .63rem; color: var(--site-muted); }
.release-output { list-style: none; padding: 0; margin: .8rem 0 0; }
.release-output li { display: grid; grid-template-columns: 1fr auto; gap: .25rem .6rem; padding: .5rem 0; border-top: 1px solid var(--site-rule); }
.release-output strong { font-size: .68rem; font-weight: 500; }
.release-output span { font-size: .62rem; font-variant-numeric: tabular-nums; color: var(--site-muted); }
.release-output p { grid-column: 1 / -1; font-family: var(--font-body); font-size: .85rem; line-height: 1.55; margin: .3rem 0 0; }
.clio-lab .lab-reset { min-height: 44px; padding: .45rem .8rem; font-size: .66rem; margin-top: 1rem; }
.lab-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.clio-bridge { border-block: 1px solid var(--site-rule); padding: 1.2rem 0 0; }
.bridge-readings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-top: 1rem; }
.bridge-readings > div { display: flex; flex-direction: column; padding: .6rem; }
.bridge-readings span { font-size: .67rem; line-height: 1.6; color: var(--site-muted); }
.bridge-readings strong { font: 500 2.4rem/1.4 var(--font-display); }
.bridge-readings .bridge-added { background: var(--site-surface); outline: 1px solid var(--site-rule); color: var(--site-accent); }
.bridge-readings small { font-size: .58rem; }
.bridge-comparisons { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; margin-top: 1.3rem; }
.bridge-comparisons p { display: flex; flex-direction: column; margin: 0; }
.bridge-comparisons strong { font: 500 1.2rem/1.5 var(--font-display); }
.bridge-comparisons span { font-size: .65rem; color: var(--site-muted); }
@media (max-width: 540px) {
  .clio-lab { padding: .85rem; margin-block: 1.5rem 2rem; }
  .clio-lab .lab-heading h3 { font-size: 1.35rem; }
  .map-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.6rem; }
  .map-stage:nth-child(2)::after { content: ''; }
  .map-marks { height: 42px; }
  .map-stage > span:last-of-type { min-height: 0; }
  .marks-raw i { width: 12px; height: 16px; }
  .marks-raw i:nth-child(3n) { height: 12px; }
  .segmented { gap: .3rem; }
  .segmented label { min-width: 70px; }
  .segmented label span { font-size: .63rem; padding-inline: .35rem; }
  .facet-groups { gap: .9rem .6rem; }
  .clio-lab .facet-group h4 { font-size: .65rem; }
  .transcript-lines { grid-template-columns: 1fr; gap: .2rem; }
  .transcript-lines dd { margin-bottom: .65rem; }
  .outcome-reading strong { font-size: 1.25rem; }
  .released-view { padding: .75rem; }
  .release-output li { grid-template-columns: 1fr; }
  .clio-lab .gate-table { min-width: 0; display: block; }
  .gate-table caption { display: block; text-align: left; }
  .gate-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .gate-table tbody { display: block; }
  .gate-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; column-gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--site-rule); }
  .gate-table tbody th, .gate-table tbody td { display: block; padding: 0; border: 0; }
  .gate-table tbody th:first-child { width: auto; align-self: center; }
  .gate-table .numeric::before { content: attr(data-label); display: block; font-size: .54rem; color: var(--site-muted); margin-bottom: .15rem; }
  .gate-table .gate-reason { grid-column: 1 / -1; padding-top: .4rem; }
  .gate-table .gate-reason span { margin-top: .1rem; }
  .bridge-readings { gap: .25rem; }
  .bridge-readings > div { padding: .4rem; }
  .bridge-readings span { font-size: .6rem; }
  .bridge-readings strong { font-size: 1.8rem; }
  .bridge-readings small { font-size: .53rem; }
}
@media print {
  .clio-lab .lab-controls, .clio-lab .facet-workspace, .clio-lab .gate-interactive, .clio-lab .lab-loading { display: none !important; }
  .clio-lab details > * { display: block !important; }
  .clio-lab { background: transparent; border: 1px solid #777; }
}