/* V1 editorial system — bespoke pieces for the readability tool.
   Structural chrome lives in v1-tools.css; legibilidad-espanol.js injects
   article.readability-metric into [data-metrics] (a .tool-summary),
   .density-row into [data-density-strip], and finding-meta/li items into
   [data-dense]/[data-longest] (both .tool-findings lists). */
html.v1 [data-summary] p.readability-summary__eyebrow{margin:0 0 .5rem;font:600 .7rem/1.4 var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted)}
html.v1 [data-summary] h2{font:400 var(--text-2xl)/1.15 var(--font-display);margin:0 0 .6rem}
html.v1 [data-summary] p:last-child{margin:0 0 1.75rem;max-width:64ch;font:400 .98rem/1.6 var(--font-reading);color:var(--color-muted)}

html.v1 .readability-metric{border-left:2px solid transparent}
html.v1 .readability-metric--main{border-left-color:var(--color-accent-strong)}
html.v1 .readability-metric__name{margin:0;font:600 .7rem/1.4 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted)}
html.v1 .readability-metric__score{margin:.35rem 0 .2rem;font:400 clamp(1.6rem,3vw,2.1rem)/1 var(--font-display);color:var(--color-text);font-variant-numeric:tabular-nums}
html.v1 .readability-metric__label{margin:0 0 .3rem;font:600 .78rem/1.4 var(--font-ui);color:var(--color-text)}
html.v1 .readability-metric__note{margin:0;font:400 .82rem/1.5 var(--font-ui);color:var(--color-muted)}

html.v1 .density-strip{display:grid;gap:.5rem;max-width:52rem}
html.v1 .density-row{display:grid;grid-template-columns:6.5rem minmax(0,1fr) 3rem;gap:.85rem;align-items:center;font:400 .85rem/1.4 var(--font-ui)}
html.v1 .density-row__label{color:var(--color-muted)}
html.v1 .density-row__track{display:block;height:8px;background:var(--surface-quiet)}
html.v1 .density-row__bar{display:block;width:var(--density);height:100%;background:var(--color-accent-strong)}
html.v1 .density-row__value{text-align:right;font-variant-numeric:tabular-nums;color:var(--color-text)}

html.v1 .finding-meta{margin:0 0 .3rem;font:600 .78rem/1.4 var(--font-ui);color:var(--color-text)}
html.v1 .readability-empty-note{font:400 .95rem/1.5 var(--font-ui);color:var(--color-muted)}

@media(max-width:600px){
  html.v1 .density-row{grid-template-columns:4.5rem minmax(0,1fr) 2.5rem;gap:.5rem;font-size:.78rem}
}