.criteria-lab { --cl-orange: #c74b29; --cl-blue: #365fa9; padding: 26px; border: 1px solid var(--line, #c9c9bd); border-radius: 24px; background: linear-gradient(130deg, #fffdf7, #eee9de); box-shadow: 0 16px 40px #15252008; }
.criteria-lab .cl-heading { display: flex; align-items: end; justify-content: space-between; gap: 25px; margin-bottom: 24px; }
.criteria-lab .cl-heading h3 { margin: 5px 0 0; font-size: clamp(24px, 3vw, 36px); line-height: 1.15; letter-spacing: -.035em; }
.criteria-lab .cl-heading > p { max-width: 370px; margin: 0; color: var(--ink-soft, #52615c); line-height: 1.6; }
.criteria-lab .cl-controls { display: grid; grid-template-columns: 1.3fr 1fr 1fr .85fr; gap: 18px; padding: 17px 19px; margin-bottom: 22px; border: 1px solid #b7b9a975; border-radius: 16px; background: #ffffff70; }
.criteria-lab .cl-controls label { display: block; min-width: 0; font-size: 12px; font-weight: 650; color: var(--ink, #152520); }
.criteria-lab .cl-controls output { float: right; color: var(--cl-orange); font-variant-numeric: tabular-nums; }
.criteria-lab .cl-controls input { display: block; width: 100%; margin: 13px 0 7px; accent-color: var(--cl-orange); }
.criteria-lab .cl-controls input:disabled { opacity: .3; cursor: not-allowed; }
.criteria-lab .cl-controls small { display: block; color: var(--ink-soft, #52615c); font-size: 12px; line-height: 1.5; font-weight: 450; }
.criteria-lab .cl-controls select { width: 100%; min-height: 39px; margin-top: 8px; padding: 6px 9px; border: 1px solid var(--line, #c9c9bd); border-radius: 9px; background: #fffcf4; font-size: 12px; }
.criteria-lab .cl-scale-comparison { margin: 0 0 23px; padding: 17px; border: 1px solid #b7895b70; border-radius: 18px; background: linear-gradient(115deg, #f8eadbba, #fffdf2a0); box-shadow: inset 0 1px 0 #fffdf3; }
.criteria-lab .cl-scale-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.criteria-lab .cl-scale-heading h4 { margin: 0; font-size: 17px; letter-spacing: -.015em; }
.criteria-lab .cl-scale-heading > span { color: #6d6858; font-size: 12px; }
.criteria-lab .cl-scale-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.criteria-lab .cl-scale-card { display: grid; grid-template-columns: minmax(85px, 34%) minmax(0, 1fr); align-items: center; gap: 15px; padding: 12px; border: 1px solid #b4b8a952; border-radius: 13px; background: #ffffff8f; }
.criteria-lab .cl-scale-small { border-color: #bd95626b; background: #fff8e5a3; }
.criteria-lab .cl-scale-card svg { display: block; width: 100%; height: auto; border-radius: 10px; background: #142a23; }
.criteria-lab .cl-scale-path { fill: #fbac7120; stroke: #ffc299; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.criteria-lab .cl-scale-guide { fill: none; stroke: #a0cbb64a; stroke-width: .65; stroke-dasharray: 3 4; }
.criteria-lab .cl-scale-label { margin: 0 0 9px; color: #354b3e; font-size: 13px; font-weight: 650; }
.criteria-lab .cl-scale-card dl { display: grid; gap: 7px; margin: 0; }
.criteria-lab .cl-scale-card dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.criteria-lab .cl-scale-card dt { color: #586758; font-size: 12px; }
.criteria-lab .cl-scale-card dd { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 600; font-variant-numeric: tabular-nums; }
.criteria-lab .cl-baseline-value { color: #ae512b; }
.criteria-lab .cl-scale-card .cl-baseline-value dt { color: #916144; }
.criteria-lab .cl-scale-verdict { margin: 12px 0 5px; font-size: 14px; line-height: 1.5; color: #4a503d; font-weight: 550; }
.criteria-lab .cl-scale-caveat { margin: 0; font-size: 12px; line-height: 1.6; color: #6f7060; }
.criteria-lab .cl-main-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(250px, 1fr); gap: 25px; align-items: start; }
.criteria-lab .cl-figure { margin: 0; min-width: 0; overflow: hidden; border: 1px solid #132d2440; border-radius: 19px; background: #10231e; box-shadow: inset 0 1px 0 #ffffff15, 0 8px 22px #20372713; }
.criteria-lab .cl-figure svg { display: block; width: 100%; height: auto; }
.criteria-lab .cl-grid { stroke: #85ac9220; stroke-width: .65; }
.criteria-lab .cl-axes { stroke: #aac5b442; stroke-width: 1; }
.criteria-lab .cl-input { fill: #f0643c10; stroke: #ff9976; stroke-width: 3; stroke-linejoin: round; filter: drop-shadow(0 0 5px #ff805942); }
.criteria-lab .cl-scored { fill: none; stroke: #91b7ff; stroke-width: 1.3; stroke-linecap: round; }
.criteria-lab .cl-fit { fill: none; stroke: #85e0c3; stroke-width: 1; stroke-dasharray: 5 6; opacity: .8; }
.criteria-lab .cl-stage-label { fill: #a5bcb2; font: 10px ui-monospace, monospace; letter-spacing: .06em; }
.criteria-lab .cl-stage-right { text-anchor: end; }
.criteria-lab figcaption { display: flex; flex-wrap: wrap; gap: 10px 17px; padding: 14px 17px; color: #dcebe4; border-top: 1px solid #acc4b528; font-size: 13px; }
.criteria-lab figcaption small { display: block; width: 100%; color: #a9bdb3; line-height: 1.55; }
.criteria-lab .cl-key::before { content: ''; display: inline-block; width: 14px; height: 2px; margin-right: 6px; vertical-align: middle; background: currentColor; }
.criteria-lab .cl-orange { color: #ed9779; }
.criteria-lab .cl-blue { color: #93b5ee; }
.criteria-lab .cl-mint { color: #85d5b9; }
.criteria-lab .cl-insight { margin: 0 0 14px; min-height: 44px; font-size: 14px; line-height: 1.55; }
.criteria-lab .cl-score-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.criteria-lab .cl-score-pair > div { padding: 13px; border: 1px solid #9cbdb367; border-radius: 14px; background: #e6f0e985; }
.criteria-lab .cl-score-pair .cl-baseline { background: #f7e3d682; border-color: #ca947650; }
.criteria-lab .cl-score-pair span { display: block; color: #52615c; font-size: 13px; }
.criteria-lab .cl-score-pair strong { display: block; margin: 5px 0 3px; font-size: clamp(26px, 2.7vw, 35px); font-weight: 550; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.criteria-lab .cl-score-pair small { display: block; font-size: 12px; color: #52615c; line-height: 1.5; }
.criteria-lab .cl-compactness { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; font-size: 12px; border-bottom: 1px solid #bac1b968; }
.criteria-lab .cl-compactness output { font-family: ui-monospace, monospace; }
.criteria-lab .cl-policy-bars { display: grid; gap: 11px; margin: 17px 0 11px; }
.criteria-lab .cl-policy-row { display: grid; grid-template-columns: 130px minmax(40px, 1fr) 38px; gap: 9px; align-items: center; font-size: 13px; }
.criteria-lab .cl-policy-row.is-current > span { color: var(--cl-orange); }
.criteria-lab .cl-policy-row output { text-align: right; font-variant-numeric: tabular-nums; }
.criteria-lab .cl-policy-track { height: 7px; overflow: hidden; border-radius: 20px; background: #cbd1c784; }
.criteria-lab .cl-policy-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #52796b, #8abda6); transition: width 160ms ease; }
.criteria-lab .cl-policy-row:nth-child(2) i { background: linear-gradient(90deg, #b46a47, #e4a27a); }
.criteria-lab .cl-policy-row:nth-child(3) i { background: linear-gradient(90deg, #577096, #95aecf); }
.criteria-lab .cl-policy-note { margin: 0 0 12px; font-size: 12px; line-height: 1.6; color: var(--ink-soft, #52615c); }
.criteria-lab .cl-evidence { margin: 0; padding: 9px 11px; border: 1px solid #aabfac6b; border-radius: 9px; color: #416650; background: #e1eadb73; font-size: 13px; line-height: 1.5; }
.criteria-lab .cl-evidence.is-small { color: #8c5830; border-color: #c6a77874; background: #f4e8c673; }
.criteria-lab .cl-challenge { display: grid; gap: 6px; margin-top: 10px; padding: 10px 11px; border: 1px solid #beb7a97a; border-radius: 9px; background: #ffffff52; font-size: 13px; }
.criteria-lab .cl-challenge label { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.criteria-lab .cl-challenge input { accent-color: var(--cl-orange); }
.criteria-lab .cl-challenge output { font-weight: 650; color: #477059; }
.criteria-lab .cl-challenge output.is-ineligible { color: #a75a32; }
.criteria-lab .cl-challenge small { color: #677066; font-size: 12px; line-height: 1.5; }
.criteria-lab .cl-invalid { margin: 8px 0 0; color: #a34730; font-size: 13px; line-height: 1.55; }
.criteria-lab .cl-invalid:empty { display: none; }
.criteria-lab details { font-size: 12px; line-height: 1.65; }
.criteria-lab summary { cursor: pointer; color: #52615c; }
.criteria-lab details p { margin: 10px 0 0; }
.criteria-lab .cl-baseline-note { margin: 16px 0 0; padding: 11px 14px; border-left: 2px solid #cc937270; background: #ffffff42; border-radius: 0 10px 10px 0; }
.criteria-lab .cl-suite-heading { display: flex; align-items: baseline; gap: 20px; margin: 23px 0 11px; }
.criteria-lab .cl-suite-heading h4 { flex-shrink: 0; margin: 0; font-size: 16px; }
.criteria-lab .cl-suite-heading p { margin: 0; color: #657166; font-size: 13px; line-height: 1.5; }
.criteria-lab .cl-suite-scroll { overflow-x: auto; border: 1px solid #b5bcad65; border-radius: 14px; }
.criteria-lab .cl-suite { width: 100%; min-width: 580px; border-collapse: collapse; background: #fffdf754; font-size: 12px; }
.criteria-lab .cl-suite th, .criteria-lab .cl-suite td { padding: 7px 12px; border: 0; border-bottom: 1px solid #b5bcad40; text-align: right; }
.criteria-lab .cl-suite thead th { color: #637065; padding-top: 12px; padding-bottom: 12px; font-size: 13px; font-weight: 500; }
.criteria-lab .cl-suite th:first-child { text-align: left; }
.criteria-lab .cl-suite tbody tr:last-child > * { border-bottom: 0; }
.criteria-lab .cl-suite td { font-variant-numeric: tabular-nums; }
.criteria-lab .cl-suite button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0; border: 0; border-radius: 8px; background: transparent; text-align: left; color: inherit; font-size: 12px; font-weight: 500; cursor: pointer; transition: color 160ms ease; }
.criteria-lab .cl-suite button:hover { color: var(--cl-orange); }
.criteria-lab .cl-suite button small { display: block; max-width: 275px; margin-top: 3px; color: #687265; font-size: 12px; line-height: 1.5; font-weight: 400; }
.criteria-lab .cl-suite svg { flex: 0 0 55px; width: 55px; height: 42px; border-radius: 9px; background: #152c24; }
.criteria-lab .cl-suite path { fill: #f0b38a0a; stroke: #f1b48e; stroke-width: 1.25; }
.criteria-lab .cl-derivative-heading { margin: 27px 0 15px; padding-top: 21px; border-top: 1px solid var(--line, #c9c9bd); }
.criteria-lab .cl-derivative-heading h4 { margin: 5px 0 0; font-size: 22px; letter-spacing: -.025em; }
.criteria-lab .cl-light-figure { background: #faf9f1; border-color: #b5b9a969; box-shadow: 0 5px 15px #20372706; }
.criteria-lab .cl-light-figure figcaption { color: #43574d; border-color: #b5b9a940; }
.criteria-lab .cl-light-figure figcaption small { color: #657067; }
.criteria-lab .cl-light-figure .cl-orange { color: var(--cl-orange); }
.criteria-lab .cl-light-figure .cl-blue { color: var(--cl-blue); }
.criteria-lab .cl-gridline { fill: none; stroke: #a5b5a735; stroke-width: 1; }
.criteria-lab .cl-tick, .criteria-lab .cl-plot-label { fill: #5b6b61; font: 10px ui-monospace, monospace; }
.criteria-lab .cl-plot-label { font-size: 10px; }
.criteria-lab .cl-radial-line { fill: none; stroke: var(--cl-blue); stroke-width: 2; stroke-dasharray: 5 4; }
.criteria-lab .cl-curvature-line { fill: none; stroke: var(--cl-orange); stroke-width: 2.5; }
.criteria-lab .cl-marker-line { fill: none; stroke: #cb75516b; stroke-dasharray: 2 5; }
.criteria-lab .cl-marker { fill: #fff1d8; stroke: var(--cl-orange); stroke-width: 2; }
.criteria-lab .cl-derivative-notes { font-size: 12px; line-height: 1.6; }
.criteria-lab .cl-derivative-notes > p { margin: 0 0 11px; color: var(--ink-soft, #52615c); }
.criteria-lab .cl-formula { padding: 8px 10px; background: #e0e8db73; border-radius: 8px; font: 13px/1.6 ui-serif, Georgia, serif; overflow-wrap: anywhere; }
.criteria-lab .cl-derivative-notes dl { display: grid; gap: 0; margin: 9px 0 14px; }
.criteria-lab .cl-derivative-notes dl > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #bdc3b652; }
.criteria-lab .cl-derivative-notes dt { font-size: 13px; }
.criteria-lab .cl-derivative-notes dd { margin: 0; font: 12px ui-monospace, monospace; text-align: right; }
.criteria-lab .cl-sources { margin: 22px 0 0; padding-top: 15px; border-top: 1px solid var(--line, #c9c9bd); font-size: 12px; line-height: 1.7; color: #687168; }
.criteria-lab .cl-sources a { color: #4d705d; text-underline-offset: 3px; }
@media (max-width: 1100px) {
  .criteria-lab .cl-controls { grid-template-columns: 1fr 1fr; }
  .criteria-lab .cl-heading { display: block; }
  .criteria-lab .cl-heading > p { max-width: none; margin-top: 13px; }
}
@media (max-width: 760px) {
  .criteria-lab { padding: 17px; }
  .criteria-lab .cl-main-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .criteria-lab .cl-controls { gap: 14px; padding: 13px; }
  .criteria-lab .cl-scale-heading { display: block; }
  .criteria-lab .cl-scale-heading > span { display: block; margin-top: 6px; }
  .criteria-lab .cl-scale-cards { grid-template-columns: minmax(0, 1fr); }
  .criteria-lab .cl-scale-card { grid-template-columns: 100px minmax(0, 1fr); }
  .criteria-lab .cl-suite-heading { display: block; }
  .criteria-lab .cl-suite-heading p { margin-top: 7px; }
  .criteria-lab .cl-policy-row { grid-template-columns: 118px minmax(40px, 1fr) 36px; }
}
.criteria-lab, .criteria-lab .cl-figure { transition: border-color 500ms ease, box-shadow 500ms ease; }
.criteria-lab:hover, .criteria-lab:focus-within { border-color: #a69578; box-shadow: 0 18px 46px #77644815, inset 0 1px 0 #ffffffc9; }
.criteria-lab .cl-figure:hover, .criteria-lab .cl-figure:focus-within { border-color: #baae89; box-shadow: inset 0 1px 0 #fff1ce50, 0 8px 25px #ac8d3c28; }
@media (prefers-reduced-motion: reduce) { .criteria-lab, .criteria-lab .cl-figure, .criteria-lab .cl-policy-track i { transition: none; } }