/* Image Editor (tools/media/image-editor.html). Tools on the left, the picture in the middle with the strip of open
   images and the status line under it, details on the right; stacked on a phone. Both side panes fold away
   (DevToolsUI.sidebar), and the toolbar can sit in the header or down either side (Settings, Layout). */
main.ie{overflow:hidden}

.ie-shell{--ie-side:244px;--ie-details:290px;flex:1 1 auto;min-height:0;display:grid;grid-template-columns:var(--ie-side) minmax(0,1fr) var(--ie-details)}
html.sidebars-live .ie-shell{transition:grid-template-columns .3s cubic-bezier(.2,.7,.3,1)}
.ie-shell:has(.ie-side[data-collapsed="true"]){--ie-side:0px}
.ie-shell:has(.ie-details[data-collapsed="true"]){--ie-details:0px}

/* ---- Tools */
.ie-side{display:flex;flex-direction:column;min-height:0;min-width:0;overflow:auto;border-right:1px solid var(--border);background:var(--bg-elev)}
.ie-side[data-collapsed="true"]{border-right-width:0}
.ie-ops{display:flex;flex-direction:column;gap:2px;padding:8px}
.ie-op{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid transparent;border-radius:var(--radius);
  background:transparent;color:var(--text-dim);cursor:pointer;text-align:left;font-size:.8125rem;white-space:nowrap}
.ie-op:hover{background:var(--bg-elev-2);color:var(--text)}
.ie-op[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:650}
.ie-op svg{width:17px;height:17px;flex:0 0 auto}

.ie-panel{display:flex;flex-direction:column;gap:11px;padding:12px;border-top:1px solid var(--border)}
.ie-in{animation:pop-in var(--dur-2) var(--ease)}
.ie-panel h3{margin:0;font:700 .75rem var(--sans);color:var(--text-dim)}
.ie-panel h3.sub{margin-top:6px}
.ie-panel p.help{margin:0;font-size:.75rem;line-height:1.45;color:var(--text-dim)}
.ie-panel p.help:empty{display:none}
.ie-panel p.help.warn{color:var(--danger);animation:pop-in var(--dur-2) var(--ease)}
.ie-field{display:flex;flex-direction:column;gap:5px;font-size:.75rem;color:var(--text-dim)}
.ie-field input.control,.ie-field select{width:100%;min-width:0}
.ie-field select:disabled,.ie-range input:disabled{opacity:.45}
.ie-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:end}
.ie-pair .lk{align-self:center;padding-bottom:6px;color:var(--text-dim);font-size:.875rem}
.ie-chips{display:flex;flex-wrap:wrap;gap:5px}
.ie-chips button{min-height:26px;padding:3px 8px;font-size:.75rem}
.ie-chips button[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:var(--bg-elev)}
.ie-range{display:flex;align-items:center;gap:9px}
.ie-range input[type=range]{flex:1;min-width:0;accent-color:var(--accent)}
.ie-range output{min-width:48px;font:.75rem var(--mono);text-align:right;color:var(--text)}
.ie-actions{display:flex;flex-wrap:wrap;gap:6px}
.ie-actions .btn{flex:1 1 auto}
.ie-actions input[type=color]{flex:0 0 52px;height:32px;padding:2px}
.ie-picked{display:flex;align-items:center;gap:8px;font:.75rem var(--mono);color:var(--text-dim);overflow-wrap:anywhere}
.ie-picked.big .ie-swatch{width:44px;height:44px}
.ie-picked.big>span:last-child{display:flex;flex-direction:column;gap:2px}
.ie-picked strong{font-size:.9375rem;color:var(--text)}
.ie-swatch{flex:0 0 auto;width:26px;height:26px;border:1px solid var(--border-strong);border-radius:var(--radius);
  background-image:none;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .2)}
.ie-recents{display:flex;flex-wrap:wrap;gap:5px}
.ie-recents:empty::before{content:"Picked colours collect here.";font-size:.75rem;color:var(--text-dim)}
.ie-recent{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 8px 2px 3px;font:.75rem var(--mono);animation:pop-in var(--dur-2) var(--ease)}
.ie-recent .ie-swatch{width:20px;height:20px}
.control[aria-invalid="true"]{border-color:var(--danger)}
/* The main action stays at the foot of the panel, however long the panel is. */
.ie-bar{position:sticky;bottom:0;z-index:2;margin:6px -12px -12px;padding:10px 12px;background:var(--bg-elev);border-top:1px solid var(--border)}
.ie-bar .btn{width:100%}

/* ---- Picture */
.ie-stage{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--bg)}
.ie-wrap{position:relative;flex:1 1 auto;min-height:0;overflow:auto;display:grid;place-items:safe center;padding:20px}
.ie-frame{position:relative;line-height:0;box-shadow:0 0 0 1px var(--border-strong);animation:fade-in var(--dur-2) var(--ease);
  background-color:#fff;
  background-image:linear-gradient(45deg,#e6e6e8 25%,transparent 25%),linear-gradient(-45deg,#e6e6e8 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#e6e6e8 75%),linear-gradient(-45deg,transparent 75%,#e6e6e8 75%);
  background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}
[data-theme="dark"] .ie-frame{background-color:#2a2a2e;
  background-image:linear-gradient(45deg,#1e1e21 25%,transparent 25%),linear-gradient(-45deg,#1e1e21 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#1e1e21 75%),linear-gradient(-45deg,transparent 75%,#1e1e21 75%)}
.ie-frame.plain,[data-theme="dark"] .ie-frame.plain{background:var(--bg-elev-2)}
.ie-frame[hidden]{display:none}
#ie-view,#ie-before{display:block}
#ie-before{position:absolute;left:0;top:0}
#ie-picture img{display:block;width:100%;height:100%}
.ie-frame.sharp :is(canvas,img){image-rendering:pixelated}
#ie-overlay{position:absolute;inset:0;z-index:2;touch-action:none}

/* Comparing: the original under the left of the line, the edit to the right. */
.ie-divider{position:absolute;top:0;bottom:0;z-index:1;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgb(0 0 0 / .45);pointer-events:none;animation:fade-in var(--dur-2) var(--ease)}
.ie-divider::after{content:"";position:absolute;top:50%;left:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px rgb(0 0 0 / .45),0 2px 6px rgb(0 0 0 / .3)}
.ie-divider:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ie-divider[hidden]{display:none}

.ie-sel{position:absolute;border:1px solid #fff;outline:1px solid rgba(0,0,0,.6);box-shadow:0 0 0 9999px rgba(0,0,0,.42);pointer-events:none}
.ie-sel i{position:absolute;width:9px;height:9px;margin:-5px 0 0 -5px;background:#fff;border:1px solid rgba(0,0,0,.75)}
.ie-sel .nw{left:0;top:0}.ie-sel .n{left:50%;top:0}.ie-sel .ne{left:100%;top:0}
.ie-sel .w{left:0;top:50%}.ie-sel .e{left:100%;top:50%}
.ie-sel .sw{left:0;top:100%}.ie-sel .s{left:50%;top:100%}.ie-sel .se{left:100%;top:100%}
.ie-sel-label{position:absolute;left:0;top:-22px;padding:2px 6px;border-radius:var(--radius);background:var(--text);color:var(--bg-elev);font:12px var(--mono);white-space:nowrap}
.ie-sel-label.inside{top:4px;left:4px}

/* The card is centred by its auto margins, not by align-items: a card taller than the space (a phone) then starts
   at the top and scrolls, instead of spilling upwards over the bar above it. */
.ie-drop{position:absolute;inset:0;z-index:3;display:flex;padding:20px;background:var(--bg);overflow:auto}
.ie-drop[hidden]{display:none}
.ie-drop-card{margin:auto;width:min(600px,100%);padding:28px;border:2px dashed var(--border-strong);border-radius:var(--radius);background:var(--bg-elev);text-align:center}
.ie-drop-card.over,.ie-stage.over .ie-wrap{border-color:var(--accent);background:var(--accent-soft)}
.ie-drop-card h2{margin:0 0 8px;font-size:1.25rem;letter-spacing:-.02em}
.ie-drop-card p{margin:0 0 16px;color:var(--text-dim);font-size:.875rem;line-height:1.5}
.ie-formats{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:16px}
.ie-formats span{padding:2px 9px;border:1px solid var(--border);border-radius:999px;font:.75rem var(--mono);color:var(--text-dim)}

.ie-strip{flex:0 0 auto;display:flex;gap:6px;overflow-x:auto;padding:6px 8px;border-top:1px solid var(--border);background:var(--bg-elev);scrollbar-width:thin}
.ie-strip[hidden]{display:none}
/* Each of these appears only once there is something to show, and eases in when it does. */
.ie-strip,.ie-quality,#ie-pages-box,#ie-size:not(:empty){animation:fade-in var(--dur-2) var(--ease)}
.ie-thumb{position:relative;flex:0 0 112px;display:block;padding:4px;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);cursor:pointer;text-align:left;color:var(--text);animation:pop-in var(--dur-2) var(--ease)}
.ie-thumb[aria-current="true"]{border-color:var(--accent);background:var(--accent-soft)}
.ie-thumb canvas{display:block;width:100%;height:56px;object-fit:contain}
.ie-thumb span{display:block;margin-top:3px;font:.75rem var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-dim)}
.ie-thumb.edited::after{content:"";position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg);animation:fade-in var(--dur-2) var(--ease)}

.ie-status{flex:0 0 auto;display:flex;gap:4px 16px;align-items:center;min-width:0;padding:5px 12px;border-top:1px solid var(--border);background:var(--bg-elev);font:.75rem var(--mono);color:var(--text-dim)}
#ie-info{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#ie-message{flex:1 1 auto;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#ie-message.warn{color:var(--warning);white-space:normal}

/* ---- Details */
.ie-details{min-width:0;min-height:0;overflow:auto;border-left:1px solid var(--border);background:var(--bg-elev)}
.ie-details[data-collapsed="true"]{border-left-width:0}
.ie-details h3{margin:0;padding:12px 14px 6px;font:650 .8125rem var(--sans);color:var(--text-dim)}
.ie-view-opts{display:flex;flex-direction:column;gap:8px;padding:0 14px 6px}
#ie-about{animation:fade-in var(--dur-2) var(--ease)}
.ie-facts{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;padding:0 14px 8px;font-size:.8125rem}
.ie-facts dt{color:var(--text-dim)}
.ie-facts dd{margin:0;text-align:right;font:600 .75rem var(--mono);overflow-wrap:anywhere}
.ie-note{margin:0;padding:0 14px 8px;font-size:.75rem;color:var(--text-dim);line-height:1.4}
.ie-meta{width:100%;border-collapse:collapse;font-size:.75rem}
.ie-meta td{padding:3px 14px;border-top:1px solid var(--border);vertical-align:top;overflow-wrap:anywhere}
/* Labels are words, so they wrap between words; only a value (a long hash) may break anywhere. */
.ie-meta td:first-child{color:var(--text-dim);width:40%;overflow-wrap:break-word;hyphens:auto}
.ie-meta tr.gps td{color:var(--warning)}
/* Each source of fields (EXIF, GPS, ICC profile ...) opens with its name. */
.ie-meta .ie-meta-source th{padding:10px 14px 3px;text-align:left;font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim)}

/* ---- Saving, in the toolbar */
.ie-export{gap:6px}
.ie-quality{display:flex;align-items:center;gap:6px}
.ie-quality[hidden]{display:none}
.ie-quality input{width:84px;accent-color:var(--accent)}
.ie-quality output,.ie-size{font:.75rem var(--mono);color:var(--text-dim);white-space:nowrap}
.ie-size{min-width:58px;text-align:right}

/* In a side toolbar the undo and redo buttons carry their names like the other buttons, and the size reads on its own line. */
@media(min-width:900px){
  :root[data-toolbar] body>.toolbar .editor-history{display:flex;width:100%}
  :root[data-toolbar] body>.toolbar .editor-history-btn{flex:1;width:auto;height:auto;min-height:30px;gap:6px;justify-content:flex-start;padding:0 8px;font-size:.8125rem}
  :root[data-toolbar] body>.toolbar .ie-quality{flex-wrap:wrap;padding:0 4px}
  :root[data-toolbar] body>.toolbar .ie-quality input{flex:1 1 auto;width:auto;min-width:0}
  :root[data-toolbar] body>.toolbar .ie-size{min-width:0;padding:2px 4px;text-align:left}
}

@media(max-width:820px){
  main.ie{overflow-y:auto}
  html.sidebars-live .ie-side,html.sidebars-live .ie-details{transition:max-height .3s cubic-bezier(.2,.7,.3,1),opacity .2s ease,visibility 0s}
  /* The page scrolls: the tools, then the picture, then the details, each at its own height. */
  .ie-shell{flex:0 0 auto;min-height:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(320px,62vh) auto}
  .ie-side{max-height:44vh;border-right:0;border-bottom:1px solid var(--border)}
  .ie-side[data-collapsed="true"],.ie-details[data-collapsed="true"]{max-height:0;border-width:0}
  .ie-ops{flex-direction:row;flex:0 0 auto;overflow-x:auto;padding:6px 8px;scrollbar-width:thin}
  .ie-op{flex:0 0 auto}
  .ie-details{border-left:0;border-top:1px solid var(--border);max-height:none}
  .ie-wrap{padding:12px}
  .ie-status{flex-wrap:wrap}
  #ie-message{text-align:left}
}

@media print{
  .topbar,.toolbar,.ie-side,.ie-details,.ie-strip,.ie-status,.ie-drop{display:none !important}
}