/* site.css — TidyImage design system.
   Paper-and-ink personality, tool-first layout, light + dark themes.
   Theme resolution: prefers-color-scheme by default; an explicit
   html[data-theme] (set pre-paint by /js/theme.js) always wins. */

/* ------------------------------------------------------------- tokens -- */

:root {
  --bg: #f4f0e8;
  --surface: #fbf8f1;
  --surface-2: #ece7db;
  --ink: #24231f;
  --muted: #6d675b;
  --line: #d9d2c2;
  --line-strong: #24231f;
  --accent: #c7472d;
  --accent-ink: #fff8f0;
  --ok: #35683a;
  --warn: #8a6a1f;
  --shadow: #24231f;
  --radius: 2px;
  --shadow-offset: 6px;
  --measure: 62ch;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #181611;
    --surface: #211e17;
    --surface-2: #2a261d;
    --ink: #ece7da;
    --muted: #a49d8c;
    --line: #3a3529;
    --line-strong: #ece7da;
    --accent: #e2573a;
    --accent-ink: #1c130f;
    --ok: #7fb886;
    --warn: #d0aa4d;
    --shadow: #0c0b08;
  }
}
:root[data-theme="dark"] {
  --bg: #181611;
  --surface: #211e17;
  --surface-2: #2a261d;
  --ink: #ece7da;
  --muted: #a49d8c;
  --line: #3a3529;
  --line-strong: #ece7da;
  --accent: #e2573a;
  --accent-ink: #1c130f;
  --ok: #7fb886;
  --warn: #d0aa4d;
  --shadow: #0c0b08;
}

/* -------------------------------------------------------------- reset -- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  background: var(--bg);
  color: var(--ink);
}
img { max-width: 100%; display: block; }
h1, h2, h3, figure, dl, dd, p { margin: 0; }
a { color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }
button { font: inherit; cursor: pointer; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ------------------------------------------------------------- header -- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 1060px;
  margin: 0 auto;
  padding: 18px 20px 10px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand .mark {
  width: 22px;
  height: 22px;
  background: var(--accent);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 3px 3px 0 var(--shadow);
}
.site-header nav {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 14px;
  font-weight: 600;
}
.site-header nav a { text-decoration: none; }
.site-header nav a:hover { text-decoration: underline; }

#theme-toggle {
  width: 34px;
  height: 34px;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .08s ease, box-shadow .08s ease;
}
#theme-toggle:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }
#theme-toggle span::before { content: "☾"; font-size: 16px; line-height: 1; }
:root[data-theme="dark"] #theme-toggle span::before { content: "☀"; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #theme-toggle span::before { content: "☀"; }
}

/* --------------------------------------------------------------- hero -- */

main { max-width: 1060px; margin: 0 auto; padding: 0 20px 56px; }

.hero { padding: 22px 0 18px; }
.hero.compact { padding: 30px 0 8px; }
.eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero h1 {
  font-size: clamp(26px, 4.2vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 800;
  max-width: 24ch;
}
.hero .intro {
  margin-top: 10px;
  max-width: var(--measure);
  color: var(--muted);
  font-size: 17px;
}

/* --------------------------------------------------------- tool panel -- */

.tool-panel {
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--shadow);
  padding: 18px;
  margin: 8px 0 40px;
}
.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.panel-head h2 { font-size: 18px; letter-spacing: -0.02em; }
.privacy-pill {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 36px 20px;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.dropzone:hover, .dropzone.dragover { background: var(--bg); border-color: var(--accent); }
.dropzone.dragover { border-style: solid; }
.dropzone strong { font-size: 19px; letter-spacing: -0.02em; }
.dropzone p { color: var(--muted); font-size: 14px; max-width: 46ch; }
.dz-mark {
  font-size: 22px;
  line-height: 1;
  color: var(--accent);
  transform: translateY(-2px);
}
.dropzone.busy { pointer-events: none; opacity: .65; }

/* controls */

.controls { margin-top: 14px; display: grid; gap: 10px; }
.targets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0;
}
.targets legend {
  padding: 0;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.chip {
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  padding: 6px 12px;
  box-shadow: 3px 3px 0 var(--shadow);
  transition: transform .08s ease, box-shadow .08s ease;
}
.chip:hover { border-color: var(--accent); }
.chip:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.custom-kb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
}
.custom-kb input {
  width: 122px;
  padding: 6px 8px;
  font: inherit;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
}
.custom-kb input:focus { border-color: var(--accent); outline: none; }

.control-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dims { font-size: 14px; color: var(--muted); }
.dims summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  border-bottom: 1.5px dashed var(--line);
  display: inline-block;
}
.dims summary::-webkit-details-marker { display: none; }
.dims[open] summary { border-color: var(--accent); color: var(--ink); }
.dims label { display: inline-flex; align-items: center; gap: 6px; margin: 8px 14px 0 0; }
.dims input {
  width: 92px;
  padding: 5px 8px;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
}

button.ghost, .png-choice .keep-png {
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  padding: 6px 12px;
}
button.ghost:hover { border-color: var(--accent); color: var(--accent); }

/* crop editor */

.crop-editor { margin-top: 14px; }
.crop-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  background: repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 0 0 / 18px 18px;
  touch-action: none;
  user-select: none;
}
.crop-stage img { max-height: 420px; pointer-events: none; }
.crop-box {
  position: absolute;
  border: 2px solid var(--accent);
  box-shadow: 0 0 0 9999px color-mix(in srgb, var(--shadow) 55%, transparent);
  cursor: move;
}
.crop-box .h {
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border: 2px solid var(--accent-ink);
  border-radius: 50%;
}
.h-nw { top: -8px; left: -8px; cursor: nwse-resize; }
.h-n  { top: -8px; left: calc(50% - 7px); cursor: ns-resize; }
.h-ne { top: -8px; right: -8px; cursor: nesw-resize; }
.h-w  { top: calc(50% - 7px); left: -8px; cursor: ew-resize; }
.h-e  { top: calc(50% - 7px); right: -8px; cursor: ew-resize; }
.h-sw { bottom: -8px; left: -8px; cursor: nesw-resize; }
.h-s  { bottom: -8px; left: calc(50% - 7px); cursor: ns-resize; }
.h-se { bottom: -8px; right: -8px; cursor: nwse-resize; }
.crop-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.crop-controls select, .crop-custom input {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 8px;
}
.crop-custom { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.crop-custom input { width: 84px; }
#crop-apply, .png-choice .to-jpg, .batch-actions button, .guide-cta .button {
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 14px;
  padding: 7px 14px;
  box-shadow: 3px 3px 0 var(--shadow);
  transition: transform .08s ease, box-shadow .08s ease;
  text-decoration: none;
  display: inline-block;
}
#crop-apply:active, .png-choice .to-jpg:active, .batch-actions button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--shadow);
}

/* results */

.results { margin-top: 16px; display: grid; gap: 14px; }
.result-card {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  padding: 14px;
}
.preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.preview-grid figcaption {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fmt-badge {
  display: none;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--accent-ink);
  background: var(--accent);
  border-radius: var(--radius);
  padding: 1px 6px;
}
.fmt-badge.show { display: inline-block; }
.preview-grid img {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: repeating-conic-gradient(var(--surface-2) 0% 25%, var(--surface) 0% 50%) 0 0 / 14px 14px;
}
.preview-grid dl {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.preview-grid dt { display: none; }
.preview-grid dd { font-weight: 700; }
.d-orig-size, .d-orig-dims { color: var(--muted); font-weight: 600; }

.card-note { margin-top: 10px; font-size: 14px; color: var(--muted); }
.png-choice { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.meta-report { margin-top: 12px; font-size: 14px; }
.meta-report summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--warn);
}
.meta-list { margin: 8px 0 0; padding-left: 20px; }
.meta-list li.sensitive { color: var(--accent); font-weight: 700; }
.meta-after { margin-top: 8px; color: var(--ok); font-weight: 600; }

.card-actions { margin-top: 12px; }
.card-actions .download {
  display: inline-block;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 15px;
  padding: 8px 18px;
  text-decoration: none;
  box-shadow: 3px 3px 0 var(--shadow);
  transition: transform .08s ease, box-shadow .08s ease;
}
.card-actions .download:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow); }

/* batch mode: compact cards */
.results.batch .result-card { padding: 10px 14px; }
.results.batch .preview-grid { grid-template-columns: 72px 72px 1fr; align-items: center; }
.results.batch .preview-grid img { max-height: 72px; }
.results.batch .preview-grid figcaption { margin-bottom: 2px; }
.results.batch .card-actions { margin-top: 8px; }
.results.batch .meta-report { display: none; }

.batch-actions { margin-top: 14px; }

.status {
  margin: 14px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.status.ok { color: var(--ok); }
.status.warn { color: var(--warn); }

/* --------------------------------------------------------- content ---- */

.copy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 40px 0;
}
.copy-grid article {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px;
}
.copy-grid h2 { font-size: 16px; letter-spacing: -0.01em; margin-bottom: 8px; }
.copy-grid p { font-size: 14px; color: var(--muted); }

.how-it-works { margin: 40px 0; }
.how-it-works h2, .faq h2, .related-tools h2, .tool-list h2 {
  font-size: 20px;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.how-it-works ol {
  margin: 0;
  padding-left: 22px;
  max-width: var(--measure);
  display: grid;
  gap: 10px;
}
.how-it-works li { padding-left: 4px; }
.how-it-works li::marker { font-weight: 800; color: var(--accent); }

.faq { margin: 40px 0; max-width: var(--measure); }
.faq details {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.faq summary { cursor: pointer; font-weight: 700; }
.faq details[open] summary { color: var(--accent); }
.faq details p { margin-top: 8px; color: var(--muted); font-size: 15px; }

.related-tools, .tool-list { margin: 40px 0; }
.related-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.related-grid a {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
}
.related-grid a:hover { border-color: var(--accent); color: var(--accent); }

.guide-copy { max-width: var(--measure); display: grid; gap: 22px; margin: 10px 0 8px; }
.guide-copy h2 { font-size: 19px; letter-spacing: -0.02em; margin-bottom: 6px; }
.guide-copy p { color: var(--muted); }
.guide-cta { margin: 26px 0 8px; }

.legal-copy { max-width: var(--measure); }
.legal-copy h2 { font-size: 18px; margin: 24px 0 6px; }
.legal-copy p { color: var(--muted); }

/* ------------------------------------------------------------- footer -- */

footer {
  border-top: 2px solid var(--line);
  margin-top: 20px;
  padding: 24px 20px 40px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}
footer p { max-width: none; }
.footer-links { margin-top: 8px; }
.footer-links a { color: var(--muted); }

/* --------------------------------------------------------- responsive -- */

@media (max-width: 760px) {
  .hero { padding-top: 14px; }
  .hero h1 { font-size: clamp(24px, 7vw, 32px); }
  .hero .intro { font-size: 15px; }
  .tool-panel { padding: 14px; margin-left: -6px; margin-right: -6px; }
  .dropzone { padding: 26px 14px; }
  .preview-grid { grid-template-columns: 1fr; }
  .results.batch .preview-grid { grid-template-columns: 60px 60px 1fr; }
  .copy-grid { grid-template-columns: 1fr; }
  .site-header { padding: 14px 16px 8px; flex-wrap: wrap; }
  .site-header nav { gap: 12px; font-size: 13px; }
  #theme-toggle { width: 30px; height: 30px; }
  main { padding: 0 16px 40px; }
}