/* STEP 13 — Measured Context Performance section.
   Narrowly scoped cf-context-* rules. Uses the theme's existing CSS custom
   properties (--color-border, --color-lighter-gray, --color-secondary-text,
   --color-primary-text) and the .cf-evidence badge vocabulary so the section
   matches the existing ComputeFit card language. No global table/card rules. */

.cf-context-root{grid-column:1/-1;margin-top:4px}
.cf-context{border-top:1px solid var(--color-border);margin-top:18px;padding-top:14px}
.cf-context__heading{margin:0 0 4px;font-size:1.7rem;letter-spacing:-.02em;color:var(--color-primary-text)}
.cf-context__scope{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 6px}
.cf-context__scope strong{font-size:1.15rem;color:var(--color-primary-text)}
.cf-context__scope-detail{color:var(--color-secondary-text);font-size:1.05rem}
.cf-context__note{margin:0 0 12px;color:var(--color-secondary-text);font-size:1.05rem}
.cf-context-artifact{margin-top:12px;padding:14px 16px;border:1px solid var(--color-border);border-radius:8px;background:var(--color-lighter-gray)}
.cf-context-artifact__title{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 8px}
.cf-context-artifact__ud{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;color:var(--color-primary-text)}
.cf-context-artifact__meta{color:var(--color-secondary-text);font-size:1.15rem}
.cf-context-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cf-context-table{width:100%;min-width:0;border-collapse:collapse;font-size:1.15rem}
.cf-context-table th{text-align:left;font-size:1.0rem;text-transform:uppercase;letter-spacing:.04em;color:var(--color-secondary-text);font-weight:700;padding:6px 10px 6px 0;border-bottom:1px solid var(--color-border);white-space:nowrap}
.cf-context-table td{padding:8px 10px 8px 0;border-bottom:1px solid var(--color-border);color:var(--color-primary-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.cf-context-table tr:last-child td{border-bottom:0}
.cf-context-table td:first-child{color:var(--color-secondary-text);font-weight:700}
.cf-context-table td[data-cf-tps]{font-weight:700}
.cf-context-evidence{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:10px 0 0}
.cf-context-evidence .cf-evidence{display:inline-block;padding:4px 9px;border-radius:999px;font-size:1.0rem;font-weight:700;background:#eaf7f1;color:#116a45}
.cf-context-identity{color:var(--color-secondary-text);font-size:1.0rem}

/* Gemma TESTED UI (candidate layer) — selector row + container.
   Reuses .cf-checker__field (flex column label+select) inside a wrapping
   flex row. Desktop: two fields side by side; mobile: stacked, no overflow. */
.cf-gemma-measured-root{grid-column:1/-1;margin-top:4px}
.cf-gemma-selectors{display:flex;flex-wrap:wrap;gap:10px 16px;margin:4px 0 12px;align-items:flex-end}
.cf-gemma-selectors .cf-checker__field{flex:1 1 180px;min-width:0;max-width:100%}
.cf-gemma-selectors select{width:100%;min-width:0}

/* Responsive: at 480px and below, restack the table rows (Option B).
   Each row becomes a small stacked block: context label, then speed,
   then peak · headroom on one line. No horizontal page overflow. */
@media (max-width:480px){
    .cf-context-table thead{display:none}
    .cf-context-table,.cf-context-table tbody,.cf-context-table tr,.cf-context-table td{display:block;width:100%}
    .cf-context-table tr{padding:8px 0;border-bottom:1px solid var(--color-border)}
    .cf-context-table tr:last-child{border-bottom:0}
    .cf-context-table td{border:0;padding:1px 0;white-space:normal}
    .cf-context-table td[data-cf-ctx]{font-size:1.25rem;font-weight:700;color:var(--color-primary-text)}
    .cf-context-table td[data-cf-tps]{font-weight:700}
    .cf-context-table td[data-cf-peak],.cf-context-table td[data-cf-headroom]{color:var(--color-secondary-text)}
    .cf-context-table td[data-cf-peak]::before{content:"Peak ";color:var(--color-secondary-text);font-weight:400}
    .cf-context-table td[data-cf-headroom]::before{content:"Headroom ";color:var(--color-secondary-text);font-weight:400}
    .cf-context-root,.cf-context,.cf-context *{min-width:0;max-width:100%;overflow-wrap:anywhere}
    .cf-gemma-measured-root,.cf-gemma-selectors,.cf-gemma-selectors .cf-checker__field{min-width:0;max-width:100%}
    .cf-gemma-selectors .cf-checker__field{flex-basis:100%}
}