/* Tool page only (loaded by web/convert/index.html after the shared stylesheets). */
/* ---- image-optimizer: tool page ---- */
.tool .section__head { margin-bottom: var(--space-7); }
.notice { max-width: var(--copy-max); margin: 0 auto var(--space-6); padding: var(--space-4); border-radius: var(--radius-m); background: var(--surface-tint); color: var(--text); }
.drop { display: grid; gap: var(--space-5); max-width: 980px; margin-inline: auto; }
.drop__zone { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-8) var(--space-5); border: 2px dashed var(--stroke-strong, var(--stroke)); border-radius: var(--radius-l); background: var(--surface-raised); color: var(--text); cursor: pointer; text-align: center; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.drop__zone:hover, .drop__zone.is-over { border-color: var(--accent); background: var(--surface-tint); }
.drop__zone:focus-within { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
.drop__zone svg { color: var(--accent-text); }
.drop__title { font: var(--type-h3); color: var(--text-emphasis); }
.drop__hint { font: var(--type-body-sm); color: var(--text-muted); }
.drop__options { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.field { display: grid; gap: var(--space-1); font: var(--type-body-sm); color: var(--text); }
.field > span { color: var(--text-muted); }
.field--inline { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-3); }
.field--check { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-2); }
.field--check input { width: 18px; height: 18px; accent-color: var(--accent); }
.field input[type="range"] { width: 100%; accent-color: var(--accent); min-height: 24px; }
.input { min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-s); border: 1px solid var(--stroke); background: var(--surface-canvas); color: var(--text-emphasis); font: var(--type-control); }
.input:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 1px; }
.drop__advanced { grid-column: 1 / -1; }
.drop__advanced summary { cursor: pointer; font: var(--type-control); color: var(--accent-text); padding: var(--space-2) 0; }
.knobs { display: grid; gap: var(--space-3) var(--space-5); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); padding-top: var(--space-3); }
.knobs__note { font: var(--type-caption); color: var(--text-muted); margin: var(--space-2) 0 0; }
.result { margin-top: var(--space-8); display: grid; gap: var(--space-5); }
.result__title { font: var(--type-h2); margin: 0; color: var(--text-emphasis); }
.result__status { margin: 0; font: var(--type-body-sm); color: var(--text-muted); min-height: 1.4em; }
.result__verdict { margin: 0; font: var(--type-lede); color: var(--text); }
.result__verdict .muted { color: var(--text-muted); font: var(--type-body-sm); }
.compare { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.compare__pane { margin: 0; display: grid; gap: var(--space-2); }
.compare__pane figcaption { font: var(--type-caption); color: var(--text-muted); }
.compare__frame { aspect-ratio: 1; overflow: auto; border-radius: var(--radius-m); background: var(--surface-media); box-shadow: inset 0 0 0 1px var(--stroke); display: grid; place-items: center; }
.compare__frame img { max-width: 100%; max-height: 100%; transform-origin: center; image-rendering: auto; }
.compare.is-checker .compare__frame { background-color: var(--surface-canvas); background-image: linear-gradient(45deg, var(--surface-tint) 25%, transparent 25%, transparent 75%, var(--surface-tint) 75%), linear-gradient(45deg, var(--surface-tint) 25%, transparent 25%, transparent 75%, var(--surface-tint) 75%); background-size: 24px 24px; background-position: 0 0, 12px 12px; }
.compare__controls { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.results { width: 100%; border-collapse: collapse; font: var(--type-body-sm); color: var(--text); }
.results th, .results td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--stroke); }
.results thead th { font: var(--type-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.results tbody th { font-weight: 500; color: var(--text-emphasis); }
.results .is-best th, .results .is-best td { background: var(--surface-tint); }
.markup { display: grid; gap: var(--space-3); }
.markup__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.markup__head h3 { margin: 0; font: var(--type-h3); color: var(--text-emphasis); }
.markup pre { margin: 0; white-space: pre-wrap; word-break: break-all; max-height: 320px; overflow: auto; }
.markup__note { margin: 0; font: var(--type-caption); color: var(--text-muted); }

.favicons { display: grid; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--stroke); }
.favicons__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font: var(--type-body-sm); color: var(--text); }
.favicons__list .muted { color: var(--text-muted); }
.favicons pre { margin: 0; white-space: pre-wrap; word-break: break-all; }

.result[hidden] { display: none; }

.results .is-original th, .results .is-original td { color: var(--text-muted); }
.verdict__outcome { display: block; margin-top: var(--space-2); font: var(--type-body); color: var(--text-emphasis); }

/* ---- audit page (AD_010) ---- */
.audit-form { gap: var(--space-3); }
.audit-form__row { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.audit-form__row .input { flex: 1 1 320px; min-height: var(--control-h); }
.audit-summary .card { gap: var(--space-1); }
.audit-big { font: var(--type-h2); }
.audit-table th[scope="row"] { display: flex; gap: var(--space-3); align-items: center; min-width: 220px; word-break: break-all; }
.audit-thumb { width: 64px; height: 48px; object-fit: contain; flex: none; border-radius: var(--radius-s); background: var(--surface-media); box-shadow: inset 0 0 0 1px var(--stroke); }
.audit-table .muted, .audit-notes { color: var(--text-muted); font: var(--type-caption); }
.audit-flags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.audit-flags li { padding: 0 var(--space-2); border-radius: var(--radius-s); background: var(--surface-tint); font: var(--type-caption); white-space: nowrap; }
.audit-flags abbr { text-decoration: underline dotted; cursor: help; }
.audit-detail td { padding: var(--space-4) var(--space-3) var(--space-6); }
.audit-detail[hidden] { display: none; }
.audit-notes { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); }
.audit-since:empty { display: none; }
.audit-table th[scope="row"] abbr { text-decoration: underline dotted; cursor: help; }
.markup__note a, .audit-notes a, .notice a { text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }