/* Image Compressor — darkroom amber theme
   Visual system: dark matte-instrument panels, amber safelight accents,
   exposure-dial quality slider, before/after darkroom panels.
*/

/* ── Custom tokens ───────────────────────────────────────────────────────── */
.image-compressor-page {
  --ic-amber:        #f59e0b;
  --ic-amber-hover:  #d97706;
  --ic-amber-faint:  rgba(245, 158, 11, 0.08);
  --ic-amber-border: rgba(245, 158, 11, 0.35);
  --ic-amber-glow:   rgba(245, 158, 11, 0.15);

  --ic-bg:      #0d1117;
  --ic-surf:    #161b22;
  --ic-surf-2:  #1c2128;
  --ic-surf-3:  #21262d;

  --ic-text:       #e6edf3;
  --ic-text-muted: #8b949e;
  --ic-text-faint: #6e7681;
  --ic-border:     #30363d;

  --ic-frame-width: 960px;
}

/* ── Frame override ──────────────────────────────────────────────────────── */
.image-compressor-page .tool-frame {
  max-width: var(--ic-frame-width);
}

.image-compressor-page .tool-header-block {
  max-width: 600px;
}

.image-compressor-page .page-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  line-height: 1;
}

.image-compressor-page .page-subtitle {
  max-width: 44ch;
  color: var(--color-text-muted);
}

/* ── Privacy badge ───────────────────────────────────────────────────────── */
.ic-privacy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 4px 10px 4px 8px;
  border-radius: 100px;
  border: 1px solid var(--ic-amber-border);
  background: var(--ic-amber-faint);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ic-amber);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ic-privacy-badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* ── Tool shell ──────────────────────────────────────────────────────────── */
.image-compressor-page .tool-shell {
  background: var(--ic-bg);
  border: 1px solid var(--ic-border);
  border-radius: 16px;
  padding: 24px;
}

.image-compressor-page .tool-ui {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Drop zone ───────────────────────────────────────────────────────────── */
.ic-dropzone {
  position: relative;
  min-height: 140px;
  border: 1.5px dashed var(--ic-amber-border);
  border-radius: 12px;
  background-color: var(--ic-surf);
  background-image: radial-gradient(circle, rgba(245, 158, 11, 0.06) 1px, transparent 1px);
  background-size: 20px 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: border-color 0.15s, background-color 0.15s;
  outline: none;
}

.ic-dropzone:hover,
.ic-dropzone:focus-visible {
  border-color: var(--ic-amber);
  background-color: var(--ic-surf-2);
}

.ic-dropzone.is-dragover {
  border-color: var(--ic-amber);
  background-color: var(--ic-surf-2);
  box-shadow: 0 0 0 3px var(--ic-amber-glow);
}

.ic-dropzone:focus-visible {
  box-shadow: 0 0 0 3px var(--ic-amber-glow);
}

.ic-dropzone input[type="file"] {
  display: none;
}

.ic-dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  pointer-events: none;
}

.ic-dropzone-icon {
  width: 36px;
  height: 36px;
  color: var(--ic-amber);
  opacity: 0.7;
}

.ic-dropzone-prompt {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ic-text-muted);
}

.ic-dropzone-sub {
  font-size: var(--text-xs);
  color: var(--ic-text-faint);
}

.ic-dropzone-link {
  color: var(--ic-amber);
  font-weight: 500;
}

.ic-dropzone-error {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(242, 138, 155, 0.12);
  border: 1px solid rgba(242, 138, 155, 0.3);
  color: #f28a9b;
  font-size: var(--text-xs);
  font-weight: 500;
  margin: 0;
}

/* ── Controls row ────────────────────────────────────────────────────────── */
.ic-controls {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.ic-ctrl-label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ic-text-muted);
}

/* Format chips */
.ic-format-group { flex-shrink: 0; }

.ic-chips {
  display: flex;
  gap: 6px;
}

.ic-chip {
  min-height: 0;
  padding: 5px 14px;
  border-radius: 100px;
  border: 1px solid var(--ic-border);
  background: var(--ic-surf-2);
  color: var(--ic-text-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  line-height: 1.5;
}

.ic-chip:hover {
  border-color: var(--ic-amber-border);
  color: var(--ic-text);
}

.ic-chip.is-active {
  border-color: var(--ic-amber);
  background: var(--ic-amber-faint);
  color: var(--ic-amber);
}

.ic-chip:focus-visible {
  outline: 2px solid var(--ic-amber);
  outline-offset: 2px;
}

/* Quality slider group */
.ic-quality-group {
  flex: 1;
  min-width: 200px;
  transition: opacity 0.2s;
}

.ic-quality-group[data-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

.ic-quality-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ic-quality-val {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ic-amber);
  min-width: 28px;
  text-align: right;
}

/* Slider styling — exposure dial look */
.ic-slider-wrap {
  position: relative;
  padding-bottom: 20px;
}

.ic-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--ic-border);
  outline: none;
  cursor: pointer;
}

/* Track fill via JS custom property */
.ic-slider {
  background: linear-gradient(
    to right,
    var(--ic-amber) 0%,
    var(--ic-amber) var(--ic-progress, 78.72%),
    var(--ic-border) var(--ic-progress, 78.72%),
    var(--ic-border) 100%
  );
}

.ic-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ic-amber);
  border: 2px solid var(--ic-bg);
  box-shadow: 0 0 0 1.5px var(--ic-amber-hover), 0 2px 6px rgba(0,0,0,0.4);
  cursor: pointer;
  transition: background 0.12s, box-shadow 0.12s;
}

.ic-slider:hover::-webkit-slider-thumb,
.ic-slider:focus::-webkit-slider-thumb {
  background: var(--ic-amber-hover);
  box-shadow: 0 0 0 3px var(--ic-amber-glow), 0 2px 6px rgba(0,0,0,0.4);
}

.ic-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ic-amber);
  border: 2px solid var(--ic-bg);
  box-shadow: 0 0 0 1.5px var(--ic-amber-hover);
  cursor: pointer;
}

.ic-slider:focus-visible {
  outline: none;
}

.ic-slider:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px var(--ic-amber-glow), 0 2px 6px rgba(0,0,0,0.4);
}

/* Tick marks */
.ic-ticks {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.ic-tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--ic-text-faint);
  font-variant-numeric: tabular-nums;
}

/* Position ticks at their slider values (min=1, max=95, range=94) */
.ic-tick[data-v="25"] { left: calc(24 / 94 * 100%); }
.ic-tick[data-v="50"] { left: calc(49 / 94 * 100%); }
.ic-tick[data-v="75"] { left: calc(74 / 94 * 100%); }

.ic-quality-hint {
  margin: 4px 0 0;
  font-size: var(--text-xs);
  color: var(--ic-text-faint);
}

/* ── Before / After panels ───────────────────────────────────────────────── */
.ic-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.ic-panel {
  border-radius: 10px;
  border: 1px solid var(--ic-border);
  background: var(--ic-surf);
  overflow: hidden;
}

/* Amber top glow on both panels */
.ic-panel::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(to right, transparent, var(--ic-amber-border), transparent);
}

.ic-panel--after::before {
  background: linear-gradient(to right, transparent, var(--ic-amber), transparent);
}

.ic-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid var(--ic-border);
}

.ic-panel-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ic-text-faint);
}

.ic-panel--after .ic-panel-label {
  color: var(--ic-amber);
}

.ic-panel-size {
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--ic-text-muted);
  font-variant-numeric: tabular-nums;
}

.ic-panel-body {
  position: relative;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ic-surf-2);
}

.ic-panel-img {
  max-width: 100%;
  max-height: 280px;
  object-fit: contain;
  display: block;
}

.ic-panel-img[hidden] { display: none; }

.ic-panel-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--ic-text-faint);
}

.ic-panel-ph svg {
  width: 32px;
  height: 32px;
  opacity: 0.4;
}

.ic-panel-ph span {
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ic-panel-ph[hidden] { display: none; }

/* Savings pill — film canister label in corner */
.ic-savings-pill {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(245, 158, 11, 0.15);
  border: 1px solid var(--ic-amber-border);
  font-size: 11px;
  font-weight: 700;
  color: var(--ic-amber);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.ic-savings-pill[hidden] { display: none; }

/* ── Readout strip ───────────────────────────────────────────────────────── */
.ic-readout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--ic-surf);
  border: 1px solid var(--ic-border);
  border-radius: 10px;
}

.ic-readout-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.ic-readout-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* --ic-text-faint (#6e7681) is ~3.6:1 on the dark deck — fails WCAG AA for
     this 10px label. Use --ic-text-muted (#8b949e, ~5.6:1) so the ORIGINAL /
     COMPRESSED / SAVED captions are legible. */
  color: var(--ic-text-muted);
}

.ic-readout-val {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ic-text);
  font-variant-numeric: tabular-nums;
}

.ic-readout-saved {
  color: var(--ic-amber);
}

.ic-readout-arrow {
  color: var(--ic-text-faint);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.ic-readout-sep {
  width: 1px;
  height: 28px;
  background: var(--ic-border);
  flex-shrink: 0;
}

/* ── Actions ─────────────────────────────────────────────────────────────── */
.ic-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* Download CTA — amber primary */
.image-compressor-page .ic-btn-download {
  min-height: 44px;
  background: var(--ic-amber);
  color: #0d1117;
  border-color: var(--ic-amber);
  font-weight: 700;
}

.image-compressor-page .ic-btn-download:hover:not(:disabled) {
  background: var(--ic-amber-hover);
  border-color: var(--ic-amber-hover);
}

.image-compressor-page .ic-btn-download:focus-visible {
  outline: 2px solid var(--ic-amber);
  outline-offset: 3px;
}

.image-compressor-page .ic-btn-download:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Secondary buttons — no forced min-height */
.image-compressor-page .ic-btn-example,
.image-compressor-page .ic-btn-reset {
  min-height: 0;
  padding: 8px 16px;
  border: 1px solid var(--ic-border);
  background: var(--ic-surf-2);
  color: var(--ic-text-muted);
  font-size: var(--text-sm);
}

.image-compressor-page .ic-btn-example:hover,
.image-compressor-page .ic-btn-reset:hover {
  border-color: var(--ic-amber-border);
  color: var(--ic-text);
}

.image-compressor-page .ic-btn-example:focus-visible,
.image-compressor-page .ic-btn-reset:focus-visible {
  outline: 2px solid var(--ic-amber);
  outline-offset: 2px;
}

/* ── Alpha hint ──────────────────────────────────────────────────────────── */
.ic-alpha-hint {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--ic-text-faint);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ic-alpha-hint[hidden] { display: none; }

.ic-alpha-hint::before {
  content: '⚠';
  font-size: 12px;
  color: var(--color-warning);
}

/* ── Mobile layout ───────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  .image-compressor-page .tool-shell {
    padding: 16px;
  }

  .image-compressor-page .tool-ui {
    gap: 16px;
  }

  /* Stack panels; compressed panel on top */
  .ic-panels {
    grid-template-columns: 1fr;
  }

  .ic-panel--after {
    order: -1;
  }

  /* Controls stack */
  .ic-controls {
    flex-direction: column;
    gap: 16px;
  }

  .ic-quality-group {
    width: 100%;
  }

  /* Full-width Download and readout */
  .ic-actions {
    flex-direction: column;
  }

  .ic-actions .ic-btn-download {
    width: 100%;
    justify-content: center;
  }

  .ic-actions .ic-btn-example,
  .ic-actions .ic-btn-reset {
    flex: 1;
    min-height: 44px;
  }

  /* Touch tap targets: chips need the full 44px tap area on mobile */
  .ic-chip {
    min-height: 44px;
    padding: 10px 16px;
  }

  .ic-readout {
    gap: 6px;
    padding: 10px 12px;
  }

  .ic-readout-val {
    font-size: var(--text-xs);
  }
}

@media (max-width: 400px) {
  .ic-chips { flex-wrap: wrap; }

  .ic-readout-sep { display: none; }
}

/* ── Tablet ──────────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .image-compressor-page .tool-header-block {
    max-width: none;
  }

  .image-compressor-page .page-title {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
  }
}