/* ============================================================================
   Image Compressor — tool layer over base.css
   base.css supplies reset, type, forms, buttons, chips, badges, panels, tables,
   header, footer, focus rings. This file adds the accent and only what is
   unique to this tool.

   Accent — indigo-violet, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #8a78e2  5.28:1 on --bg   4.87:1 on --surface   5.47:1 on --bg-sunk
     light #200896  13.10:1 on --bg   13.67:1 on --surface   12.01:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #8a78e2; --accent-dim: rgba(138, 120, 226, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #200896; --accent-dim: rgba(32, 8, 150, 0.10); }
}

.brand svg .mark-bg { fill: var(--accent); }
.brand svg .mark-fg { fill: var(--on-accent); }
.brand svg .mark-fg-stroke { stroke: var(--on-accent); }

/* base has no visually-hidden helper; the live-status region needs one */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================================
   The tool
   ========================================================================= */

.tool {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 1.5rem);
  margin-bottom: 2.5rem;
}

.tool > h2 {
  margin: 0 0 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* -------------------------------------------------------------- dropzone -- */

.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  text-align: center;
  background: var(--surface);
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 5vw, 2.75rem) 1.25rem;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.dropzone:hover { border-color: var(--accent); }
/* The file input inside is visually-hidden (clipped, not display:none, so it
   stays keyboard-reachable) — its own focus ring is therefore invisible.
   :focus-within promotes the ring to the label that wraps it instead. */
.dropzone:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.dropzone.is-dragover {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.dz-icon { color: var(--accent); margin-bottom: 0.15rem; }
.dz-text { margin: 0; font-size: 1rem; font-weight: 600; }
.dz-link { color: var(--accent); text-decoration: underline; text-underline-offset: 0.15em; }
.dz-hint { margin: 0; font-size: 0.8125rem; color: var(--text-dim); }

/* ------------------------------------------------------------- controls -- */

.controls {
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  margin-top: 1.35rem;
}

.field .field-hint {
  margin-top: 0.3rem;
  font-size: 0.78125rem;
  color: var(--text-dim);
}

.qrow { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.qrow output {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
}

input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  background: transparent;
  height: 1.75rem;
  padding: 0;
}

.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }

/* ----------------------------------------------------------------- queue -- */

.queue {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.queue:empty { margin-top: 0; }

.item {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: 0.9rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.9rem;
}
@media (max-width: 34rem) {
  .item { grid-template-columns: 3.5rem 1fr; }
  .item-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

.item-thumb {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--bg-sunk);
  object-fit: cover;
  display: block;
}
@media (max-width: 34rem) { .item-thumb { width: 3.5rem; height: 3.5rem; } }

.item-meta { min-width: 0; }
.item-name {
  font-weight: 600;
  font-size: 0.9375rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-dims {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 0.15rem;
}
.item-sizes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.item-sizes .arrow { color: var(--text-faint); }
.item-sizes .new-size { font-weight: 600; }
.item-status {
  margin-top: 0.35rem;
  font-size: 0.78125rem;
  color: var(--text-dim);
}
.item-status.is-error { color: var(--err); }

.item-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  justify-content: flex-end;
}
.item-remove {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0;
}
.item-remove:hover { color: var(--err); border-color: var(--err); }

/* ============================================================================
   Article furniture
   ========================================================================= */

.section { max-width: 74ch; }
.section table { max-width: none; }

.tag-pass { color: var(--ok);  font-weight: 600; }
.tag-fail { color: var(--err); font-weight: 600; }

.callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pagelinks a {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
}
.pagelinks a:hover { border-color: var(--accent); }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span { display: block; color: var(--text-dim); font-size: 0.875rem; }

.noscript {
  background: var(--err-bg);
  border: 1px solid var(--err);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  color: var(--err);
  font-size: 0.9375rem;
}

td .mono, th .mono { white-space: nowrap; }