/* Shared Junk Drawer tool workbench layer */

.image-converter-page,
.image-compressor-page {
  --tool-bg: #f4f1e7;
  --tool-panel: #fffdf5;
  --tool-ink: #17130f;
  --tool-muted: #6d665b;
  --tool-line: #bfb5a1;
  --tool-soft: #eee8d8;
  --tool-blue: #c49b16;
  --tool-blue-dark: #9d790c;
  --tool-danger: #b7352a;
  --tool-success: #407a4d;
  --tool-warning: #a36f12;
  background:
    linear-gradient(90deg, rgb(23 19 15 / 0.025) 1px, transparent 1px),
    linear-gradient(0deg, rgb(23 19 15 / 0.02) 1px, transparent 1px),
    var(--tool-bg);
  background-size: 24px 24px;
}

.converter-content,
.compressor-content {
  padding: clamp(16px, 3vw, 30px) clamp(12px, 3vw, 30px) 40px clamp(16px, 3vw, 30px);
  align-items: center;
}

.converter-shell,
.compressor-shell {
  position: relative;
  max-height: none;
  min-height: min(640px, calc(100dvh - 44px));
  overflow: visible;
  border-color: var(--tool-line);
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgb(23 19 15 / 0.018) 1px, transparent 1px),
    linear-gradient(0deg, rgb(23 19 15 / 0.014) 1px, transparent 1px),
    var(--tool-panel);
  background-size: 18px 18px;
  box-shadow: 0 16px 34px rgb(23 19 15 / 0.14);
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
}

.converter-shell::before,
.compressor-shell::before {
  position: absolute;
  top: 13px;
  right: 16px;
  z-index: 2;
  color: rgb(23 19 15 / 0.32);
  font-family: "Courier New", Courier, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  content: "Local Tool / Browser Only";
}

.converter-media,
.compressor-media {
  border-right: 1px solid var(--tool-line);
  background: #191611;
}

.converter-media__image,
.compressor-media__image {
  opacity: 0.48;
  filter: sepia(0.18) contrast(1.1) saturate(0.92);
}

.converter-media__caption,
.compressor-media__caption {
  padding: 24px;
  background:
    linear-gradient(to top, rgb(19 16 12 / 0.94), rgb(19 16 12 / 0.36) 58%, transparent),
    linear-gradient(90deg, rgb(244 199 70 / 0.18), transparent 48%);
}

.converter-media__caption h2,
.compressor-media__caption h2 {
  color: #fff7d8;
  font-family: "Courier New", Courier, monospace;
  font-size: 20px;
  text-transform: uppercase;
}

.converter-media__caption p,
.compressor-media__caption p {
  color: #e6ddc7;
}

.converter-workspace,
.compressor-workspace {
  padding: clamp(18px, 2.6vw, 30px);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}

.compressor-workspace {
  padding-block: clamp(16px, 2.1vw, 24px);
}

.compressor-header {
  margin-bottom: 10px;
}

.image-compressor-page .tool-privacy-note {
  margin-bottom: 12px;
  padding-block: 8px;
}

.converter-header,
.compressor-header {
  margin-bottom: 16px;
}

.converter-header h1,
.compressor-header h1 {
  max-width: 680px;
  color: var(--tool-ink);
  font-size: clamp(30px, 4vw, 44px);
  letter-spacing: 0;
}

.converter-header p,
.compressor-header p {
  max-width: 58ch;
  color: var(--tool-muted);
  font-family: "Courier New", Courier, monospace;
  font-size: 14px;
  font-weight: 700;
}

.tool-switcher {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin-bottom: 16px;
  border: 1px solid var(--tool-line);
  background: #f8f2df;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.48);
}

.tool-switcher a {
  display: inline-flex;
  min-height: 36px;
  padding: 8px 14px;
  align-items: center;
  justify-content: center;
  color: var(--tool-muted);
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

.tool-switcher a + a {
  border-left: 1px solid var(--tool-line);
}

.tool-switcher a[aria-current="page"] {
  color: var(--tool-ink);
  background: #f0c84a;
}

.tool-privacy-note {
  display: grid;
  margin: 0 0 16px;
  padding: 10px 12px;
  border: 1px dashed var(--tool-line);
  color: #413a30;
  background: rgb(240 200 74 / 0.15);
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.upload-zone {
  padding: clamp(16px, 2.4vw, 24px);
  border-color: var(--tool-line);
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgb(23 19 15 / 0.018) 1px, transparent 1px),
    #fffdf7;
  background-size: 18px 18px;
}

.upload-zone:hover,
.drag-active {
  border-color: var(--tool-blue);
  background:
    linear-gradient(90deg, rgb(196 155 22 / 0.05) 1px, transparent 1px),
    #fff8df;
}

.upload-zone__icon {
  color: var(--tool-ink);
  background: #f0c84a;
  box-shadow: 0 0 0 6px rgb(240 200 74 / 0.18);
}

.upload-zone p:first-of-type {
  color: var(--tool-ink);
  font-family: "Courier New", Courier, monospace;
  text-transform: uppercase;
}

.upload-zone p:last-of-type {
  color: var(--tool-muted);
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
}

.status-area {
  min-height: 82px;
  margin: 12px 0 14px;
}

.status-placeholder {
  min-height: 76px;
  color: rgb(109 102 91 / 0.6);
  font-family: "Courier New", Courier, monospace;
  font-weight: 700;
}

.converter-footer,
.compressor-footer {
  padding-top: 14px;
  border-top-color: var(--tool-line);
  background: transparent;
}

.converter-controls,
.compressor-controls {
  gap: 12px;
}

.converter-control label,
.converter-quality-label,
.compressor-control label,
.compressor-quality-label {
  color: #4b4439;
  font-family: "Courier New", Courier, monospace;
  letter-spacing: 0.04em;
}

select {
  border-color: var(--tool-line);
  border-radius: 4px;
  color: var(--tool-ink);
  background: #fffdf7;
}

input[type="range"] {
  accent-color: #c49b16;
}

.converter-button,
.compressor-button {
  border-radius: 4px;
  font-family: "Courier New", Courier, monospace;
  font-size: 13px;
  text-transform: uppercase;
}

.converter-button--primary,
.compressor-button--primary {
  color: #17130f;
  background: #f0c84a;
  box-shadow: 0 10px 18px rgb(196 155 22 / 0.2);
}

.converter-button--primary:hover,
.compressor-button--primary:hover {
  color: #17130f;
  background: #dcaf28;
}

.converter-button--secondary,
.compressor-button--secondary {
  color: #4b4439;
}

.file-row {
  border-color: #ded4c0;
  border-radius: 4px;
  background: #fffdf7;
  box-shadow: 0 4px 10px rgb(23 19 15 / 0.05);
}

.file-row__name {
  color: var(--tool-ink);
}

.file-row__meta,
.text-slate-400 {
  color: var(--tool-muted);
}

.file-row__remove {
  border-radius: 4px;
}

@media (max-width: 1023px) {
  .converter-content,
  .compressor-content {
    padding: 14px 8px 40px;
  }

  .converter-shell,
  .compressor-shell {
    grid-template-columns: 1fr;
  }

  .converter-shell::before,
  .compressor-shell::before {
    display: none;
  }

  .tool-privacy-note {
    display: block;
  }
}

@media (max-width: 620px) {
  .converter-shell,
  .compressor-shell {
    min-height: auto;
    border: 1px solid #ded4c0;
    border-radius: 0;
  }

  .converter-workspace,
  .compressor-workspace {
    padding: 18px 14px;
  }

  .converter-header,
  .compressor-header {
    margin-bottom: 12px;
  }

  .tool-privacy-note {
    margin-bottom: 10px;
    padding: 8px 10px;
    font-size: 11px;
  }

  .tool-switcher {
    width: 100%;
  }

  .tool-switcher a {
    flex: 1;
    padding-inline: 8px;
  }

  .status-area {
    min-height: 58px;
    margin: 10px 0 12px;
  }

  .status-placeholder {
    min-height: 52px;
    font-size: 13px;
  }

  .status-placeholder svg {
    display: none;
  }

  .upload-zone {
    padding: 12px;
  }

  .converter-controls,
  .converter-actions,
  .compressor-controls,
  .compressor-actions-row {
    gap: 10px;
  }

  .converter-control,
  .compressor-control {
    min-width: 0;
    flex: 0 1 auto;
  }

  .converter-button,
  .compressor-button {
    width: 100%;
  }

  .compressor-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compressor-controls .compressor-control:first-child {
    grid-column: 1 / -1;
  }

  .compressor-actions-row {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    align-items: stretch;
  }
}