.selectivity-language {
.flex-auto-swap, .flex-auto-readout, .flex-auto-example {
  width: 100%;
  font-family: var(--font-sans);
}
.flex-auto-swap { display: flex; justify-content: center; }
.flex-auto-swap svg, .flex-auto-readout svg {
  overflow: visible;
  font-family: var(--font-sans);
}

.fa-ex-head { font-size: var(--fs-figure); margin-bottom: 8px; }
.fa-ex-head b { font-size: var(--fs-title); }
.fa-ex-note { color: var(--text-light); font-size: var(--fs-small); }
.flex-auto-example { max-width: 1020px;
  margin-left: auto; margin-right: auto; }
.fa-ex-cols { display: grid; grid-template-columns: 1fr;
  gap: 28px 18px; align-items: stretch; }
@container (min-width: 768px) { .fa-ex-cols { grid-template-columns: repeat(4, 1fr); } }
.fa-ex-col { display: flex; flex-direction: column; }
@container (min-width: 768px) { .fa-ex-col.fa-ex-auto { padding-left: 22px;
  border-left: 1.5px dashed var(--tick-line); } }

/* 3-panel summary charts: stack on mobile, side-by-side on desktop */
.flex-auto-3panel { display: grid; grid-template-columns: 1fr;
  gap: 24px; align-items: start; }
@container (min-width: 768px) { .flex-auto-3panel { grid-template-columns: repeat(3, 1fr); } }

/* Polished layout for the flexible-vs-automatic comparison panels */
.flex-auto-polished {
  font-family: var(--font-sans); }
.flex-auto-polished .fig-title { margin-bottom: 6px;
  padding-bottom: 3px; border-bottom: 1px solid var(--tick-line); }
.flex-auto-polished .row3 { display: grid; grid-template-columns: 1fr;
  gap: 26px 12px; margin: 0 0 18px; }
@container (min-width: 768px) { .flex-auto-polished .row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.flex-auto-polished .row3.titles { margin-bottom: 4px; }
/* extends shared .prompt-block — label-size to fit 3 columns */
.flex-auto-polished .prompt { font-size: var(--fs-label); font-style: normal; }
.flex-auto-polished .prompt .ramp { border-radius: 2px; }
.flex-auto-polished .legend { font-size: var(--fs-label);
  color: var(--text-light); margin: 5px 2px 2px; line-height: 1.3; }
.flex-auto-polished .cnt { font-size: var(--fs-label);
  color: var(--text-light); margin: 4px 2px 0; }
.flex-auto-polished .swp { font-size: var(--fs-small);
  margin: 6px 2px 0; }
.flex-auto-polished .swp .row-lr { font-size: var(--fs-label);
  color: var(--text-light); line-height: 1.5; }
.flex-auto-polished .swp .row-mid { line-height: 1.5;
  margin: 1px 0; }
.flex-auto-polished .swp .lab { font-size: var(--fs-label);
  color: var(--text-light); display: inline-block; width: 72px; }
.flex-auto-polished .swp .vd { font-size: var(--fs-label);
  color: var(--text-light); margin-left: 1.5em; }
.flex-auto-polished .swp .vd-line { font-size: var(--fs-label);
  color: var(--text-light); margin: 1px 0; }
.flex-auto-polished .swp .out {
  font-family: var(--font-mono); }
.flex-auto-polished .sep { font-size: var(--fs-small);
  color: var(--text-light); border-top: 1px solid var(--tick-line);
  padding: 10px 0 8px; margin: 4px 0 0; }
.flex-auto-polished .inlay { font-size: var(--fs-label);
  color: var(--tick); background: #fff; border: 1px solid var(--brand-manilla);
  border-radius: 4px; padding: 6px 9px; margin-top: 2.2em;
  line-height: 1.5; text-align: center; }
.flex-auto-polished .row3 > div { display: flex;
  flex-direction: column; }
.flex-auto-polished .anom { text-decoration: underline;
  text-decoration-color: var(--tol-red);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px; }
.flex-auto-polished .legend-sq { vertical-align: -1px; margin-right: 4px; }
.fa-ex-col h4.mlabel { margin: 0 0 6px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
/* extends shared .prompt-block — label-size, tighter for 4-col layout */
.fa-ex-prompt { font-size: var(--fs-label); line-height: 1.35; padding: 6px 8px; font-style: normal; }
.fa-pre { color: var(--text-light); }
.fa-swp { }
.fa-anom { text-decoration: underline;
  text-decoration-color: var(--tol-red);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px; }
.fa-ws { }
.fa-lens-hit { border-radius: 2px; }
.fa-ex-legend { font-size: var(--fs-label); color: var(--text-light);
  margin-left: 14px; font-weight: normal; }
.fa-ex-legend .fa-sw { display: inline-block; width: 10px;
  height: 10px; background: var(--tol-orange); opacity: .5;
  border-radius: 2px; vertical-align: -1px;
  margin-right: 4px; }
.fa-ex-legend .fa-anom { padding: 0 3px; }
.fa-ex-outs { margin-top: 6px; }
.fa-ex-out { font-family: var(--font-mono);
  font-size: var(--fs-label); padding: 3px 0;
  display: flex; gap: 6px; align-items: baseline; }
.fa-ex-out > span:last-child { white-space: pre-wrap;
  word-break: break-word; flex: 1; min-width: 0; }
.fa-ex-out + .fa-ex-out { border-top: 1px solid var(--rule); }
.fa-alpha { flex: 0 0 30px; color: var(--text-light);
  font-weight: 600; }
.fa-ex-verdict { margin-top: auto; padding-top: 8px;
  font-size: var(--fs-small); color: var(--gray-600); font-style: italic;
  white-space: nowrap; }
.fa-ex-gloss { margin-top: 8px; font-size: var(--fs-label);
  color: var(--text-light); font-style: italic; }
}