/* Homepage layout. Shared controls/tokens live in image-ui-clean.css;
   responsive rules live only in homepage-ui.css. */
:root{--home-control-border:#6b7280;--home-selected-bg:#eff6ff}
.image-tool-site .home-core.hero{max-width:1160px;padding:24px 20px}
.image-tool-site .home-core.hero h1{margin:0 0 12px}
.image-tool-site .home-core-tool{max-width:1040px;margin:auto}
.image-tool-site .home-core :is(select,input[type=number],input[type=text]){border-color:var(--home-control-border)}
.image-tool-site .home-core .home-input{cursor:pointer;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.image-tool-site .home-core .home-input.dragging{outline:3px dashed var(--accent);outline-offset:4px}
.image-tool-site .home-core .home-input-label{display:block;position:static;margin:0;width:100%;text-align:left;padding:12px 16px;font-size:14px;font-weight:600}
.image-tool-site .home-core .home-input-label small{display:block;font-size:14px;font-weight:400;color:var(--sub)}
.image-tool-site .home-core .home-source-badge{position:static;display:inline-block;margin:8px 12px;font-size:12px;color:var(--sub);pointer-events:none}

/* Each figure owns its label, metadata and complete image at every width. */
.image-tool-site .home-core .comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;height:auto;aspect-ratio:auto!important;background:var(--line);background-image:none;overflow:hidden}
.image-tool-site .home-core .home-preview{margin:0;min-width:0;background:var(--bg)}
.image-tool-site .home-core .home-preview-caption{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;min-height:48px;padding:8px 12px;font-size:14px;line-height:1.5}
.image-tool-site .home-core .home-preview-caption strong{font-weight:600}
.image-tool-site .home-core .home-preview-caption span{color:var(--sub);font-variant-numeric:tabular-nums}
.image-tool-site .home-core .home-preview-image{position:relative;inset:auto;width:100%;aspect-ratio:16/9;min-width:0;overflow:hidden;background:var(--soft);background-image:none;clip-path:none}
.image-tool-site .home-core .home-preview-image :is(img,canvas){position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.image-tool-site .home-core #homeCompareOriginal{display:none}
.image-tool-site .home-core .original-held .processed{visibility:visible}
.image-tool-site .home-core .original-held .processed :is(canvas,#homeStaticResult){visibility:hidden}
.image-tool-site .home-core .original-held #homeCompareOriginal{display:block}

.image-tool-site .home-core .home-file-note{margin:8px 0 0;text-align:left;color:var(--sub);font-size:14px}
.image-tool-site .home-core .home-trust{margin:4px 0 16px;text-align:left;color:var(--sub);font-size:14px}
.image-tool-site .home-core .editor-actions{display:block;margin:16px 0 0}
.image-tool-site .home-core .home-look-heading{margin:16px 0 8px}
.image-tool-site .home-core :is(.home-look-heading,.home-adjust-heading) h2{font-size:16px!important;margin:0}
.image-tool-site .home-core :is(.home-look-heading p,.home-quick-adjustments>p){margin:4px 0;color:var(--sub);font-size:14px}
.image-tool-site .home-core .preset-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.image-tool-site .home-core .preset-list button{white-space:normal;min-width:0;border:1px solid var(--line);padding:8px;background:var(--soft);color:var(--ink);font-size:14px;line-height:1.3}
.image-tool-site .home-core .preset-list img{display:block;margin:auto;width:64px;height:64px;object-fit:contain;border-radius:8px;background:var(--soft)}
.image-tool-site .home-core .preset-list span{display:block;padding-top:8px}
.image-tool-site .home-core .home-quick-adjustments{margin:16px 0 24px}
.image-tool-site .home-core .home-adjust-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.image-tool-site .home-core #keepSizeButton{border:1px solid var(--line);background:var(--bg);padding:8px 12px;color:var(--ink);font-size:14px;min-height:44px}
.image-tool-site .home-core #keepSizeButton:hover{border-color:var(--accent)}
.image-tool-site .home-core :is(.home-quick-adjustments,.home-advanced) .adjustments{grid-template-columns:repeat(2,minmax(0,1fr));margin:8px 0;padding:16px;gap:16px}

/* One export summary; progress and errors stay in the status region below it. */
.image-tool-site .home-core .home-save-slot{display:block}
.image-tool-site .home-core .home-save{display:grid;grid-template-columns:minmax(100px,140px) minmax(180px,240px);justify-content:center;align-items:end;gap:8px 16px;padding:8px 0}
.image-tool-site .home-core .format-label{display:block;font-size:14px;text-align:left}
.image-tool-site .home-core .home-save select{display:block;width:100%;margin:4px 0 0;padding:8px 12px;min-height:44px;background:var(--bg);color:var(--ink);font-size:16px}
.image-tool-site .home-core .download{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:44px;grid-column:2}
.image-tool-site .home-core .home-download-size{grid-column:1/-1;margin:0;text-align:center;color:var(--sub);font-size:14px;font-variant-numeric:tabular-nums}
.image-tool-site .home-core .status-line{justify-content:center;min-height:40px;margin:0;padding:8px 0;font-size:14px}
.image-tool-site .home-core .home-secondary{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 20px}
.image-tool-site .home-core .home-secondary button{min-height:44px;border:0;padding:8px 0;background:none;color:var(--ink);font-size:14px;text-decoration:underline;text-underline-offset:4px}
.image-tool-site .home-core #holdButton{touch-action:none;user-select:none}
.image-tool-site .home-core .home-advanced{margin-top:8px}
.image-tool-site .home-core .home-advanced summary{text-align:center}
.image-tool-site .home-core .inspector{scroll-margin-top:80px}

.home-results{text-align:center}
.home-results>p{color:var(--sub)}
.home-result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}
.home-result-grid figure{margin:0;min-width:0;text-align:left}
.home-result-grid img{width:100%;height:auto;border-radius:12px;object-fit:contain}
.home-result-grid figcaption{font-size:18px;font-weight:600;margin:16px 0 4px}
.home-result-grid button{background:none;border:0;padding:8px 0;min-height:44px}
.directory-grid article>h3{margin:16px 0 12px}
.home-hub-link{text-align:center;margin-top:32px}
.home-effect-copy{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.home-effect-copy h2{margin:0 0 20px}
.home-effect-copy p{color:var(--sub);max-width:65ch}
.home-scene-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:32px}
.home-scene-grid p{font-size:14px;color:var(--sub)}

/* Keep the first action close to the preview; detailed adjustments remain available. */
.image-tool-site .home-core .home-quick-adjustments{margin:8px 0;border-top:1px solid var(--line)}
.image-tool-site .home-core .home-quick-adjustments>summary{text-align:center}
.image-tool-site .home-core .home-adjust-heading{justify-content:flex-end}
@media(min-width:861px){
 .image-tool-site .home-core .home-preview-image{aspect-ratio:auto;height:220px}
 .image-tool-site .home-core .home-source-badge{margin:4px 12px}
 .image-tool-site .home-core .home-trust{margin-bottom:8px}
 .image-tool-site .home-core .editor-actions{margin-top:8px}
 .image-tool-site .home-core .home-look-heading{margin-top:8px}
}

@media(min-width:861px){
 .image-tool-site .home-core .home-input{position:relative}
 .image-tool-site .home-core .home-input-label{padding-right:120px}
 .image-tool-site .home-core .home-source-badge{position:absolute;right:8px;top:8px;margin:0}
 .image-tool-site .home-core .home-look-heading{display:flex;align-items:baseline;gap:16px;text-align:left}
 .image-tool-site .home-core .home-look-heading p{margin:0}
}

/* Presets support the preview; the solid primary action remains Download. */
.image-tool-site .home-core .preset-list button[aria-pressed=true]{background:var(--home-selected-bg)!important;border-color:var(--accent)!important;color:var(--ink)!important}
.image-tool-site .home-core .preset-list button:hover{border-color:var(--accent)}
.image-tool-site .home-core .home-upload-notes{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;margin:8px 0 12px;text-align:left}
.image-tool-site .home-core .home-upload-notes>p{margin:0}
.image-tool-site .home-core .home-look-heading{margin:0 0 8px}
/* Keep routine success available to screen readers without repeating the save summary. */
.image-tool-site .home-core .status-line:has([data-routine=true]){min-height:0;height:0;margin:0;padding:0}
.image-tool-site .home-core #statusText[data-routine=true]{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Homepage explanatory copy and preset comparison, below the working editor. */
.image-tool-site .home-editorial{max-width:74ch;margin-inline:auto;line-height:1.7}
.image-tool-site .home-editorial h2{font-size:24px;line-height:1.3;margin:0 0 20px}
.image-tool-site .home-editorial p{margin:0 0 16px}
.image-tool-site .home-editorial ul{padding-left:24px;margin:0 0 20px}
.image-tool-site .home-editorial li{margin-bottom:8px}
.image-tool-site .home-table-scroll{max-width:100%;overflow-x:auto;margin-top:24px;border:1px solid var(--line);border-radius:8px}
.image-tool-site .home-table-scroll:focus-visible{outline:2px solid #2563eb;outline-offset:4px}
.image-tool-site .home-table-scroll table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.6;text-align:left}
.image-tool-site .home-table-scroll caption{text-align:left;padding:12px 16px;font-weight:600;background:var(--soft)}
.image-tool-site .home-table-scroll th,.image-tool-site .home-table-scroll td{padding:12px 16px;vertical-align:top;border-top:1px solid var(--line);min-width:120px;overflow-wrap:break-word}
.image-tool-site .home-table-scroll th{background:var(--soft);font-weight:600}