/* Styles for the free browser tools (website/tools/*.html).
 *
 * The page shell (reset, type defaults, sticky header, nav, CTA) comes from
 * website/page.css, linked ahead of this file on each tool page. Only rules
 * these three pages actually need live here.
 */

/* The `hidden` attribute is only a UA rule setting display:none, so any class
   here that sets its own display silently outranks it. That is how the
   "Download all clean copies" button stayed on screen while the code that
   owns it believed it was hidden: .btn-row sets display:flex. Pin it once for
   every element on these pages rather than remembering it per component. */
[hidden] { display: none !important; }

footer {
  border-top: 1px solid var(--line);
  margin-top: 64px; padding: 28px 0;
  color: var(--muted); font-size: 14px;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }

/* ------------------------------------------------------------- tool layout */
.tool-hero { padding: 44px 0 8px; }
.tool-hero h1 {
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px;
}
.tool-hero p.lede { font-size: 18px; color: var(--muted); margin: 0 0 4px; max-width: 640px; }

/* The privacy line is the reason to use our tool instead of one that uploads
   your photo, so it gets a green marker rather than being buried in the lede. */
.privacy-note {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 18px 0 0; padding: 10px 14px;
  background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 8px;
  color: #166534; font-size: 14px; font-weight: 500;
}
.privacy-note svg { flex: none; }

/* ---------------------------------------------------------------- dropzone */
.dropzone {
  margin: 24px 0 0; padding: 44px 24px;
  border: 2px dashed var(--line); border-radius: 12px;
  background: #fff; text-align: center; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.dropzone:hover, .dropzone:focus-visible { border-color: var(--teal); outline: none; }
.dropzone.dragging { border-color: var(--teal); background: #F0F9FB; }
.dropzone strong { display: block; font-size: 18px; margin-bottom: 6px; }
.dropzone span { color: var(--muted); font-size: 14px; }
.dropzone input[type=file] { display: none; }

.error {
  margin: 16px 0 0; padding: 12px 14px;
  background: #FEF2F2; border: 1px solid #FECACA; border-radius: 8px;
  color: #991B1B; font-size: 14px;
}

/* ----------------------------------------------------------------- results */
.result { margin: 28px 0 0; }
.result[hidden] { display: none; }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 22px 24px; margin: 0 0 18px;
}
.card h2 { margin: 0 0 14px; font-size: 20px; letter-spacing: -0.01em; }

.preview {
  display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
}
.preview img {
  max-width: 260px; max-height: 260px; border-radius: 8px;
  border: 1px solid var(--line); display: block;
}

/* Summary rows: label left, value right, one per line. A table would fight
   the wrapping on a phone for no gain. */
.rows { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; }
.rows dt { color: var(--muted); font-size: 14px; }
.rows dd { margin: 0; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }

/* The full tag dump. Wide, so it scrolls inside its own box rather than
   making the page scroll sideways on a phone. */
.tag-table-wrap { overflow-x: auto; margin-top: 8px; }
table.tags { border-collapse: collapse; width: 100%; font-size: 14px; }
table.tags th, table.tags td {
  text-align: left; padding: 7px 12px; border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.tags th { color: var(--muted); font-weight: 600; white-space: nowrap; width: 1%; }
table.tags td { overflow-wrap: anywhere; }
details.all-tags summary {
  cursor: pointer; font-weight: 600; color: var(--teal); padding: 4px 0;
}

.btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
button.action {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  padding: 9px 16px; border-radius: 6px;
  background: #fff; color: var(--teal); border: 1px solid var(--teal);
}
button.action:hover { background: #F0F9FB; }

/* --------------------------------------------------------------- findings */
/* The remover's "here is what is in your file" list. Location and anything
   naming a person get the amber marker: those are the ones people are
   surprised by. */
ul.findings { list-style: none; margin: 0; padding: 0; }
ul.findings li {
  display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 15px;
}
ul.findings li:last-child { border-bottom: none; }
ul.findings .what { color: var(--muted); min-width: 180px; }
ul.findings .detail { font-weight: 500; overflow-wrap: anywhere; }
ul.findings li.serious .detail { color: #B45309; }

.file-list { list-style: none; margin: 0; padding: 0; }
.file-list li {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.file-list li:last-child { border-bottom: none; }
.file-list .name { font-weight: 600; overflow-wrap: anywhere; }
.file-list .meta { color: var(--muted); font-size: 14px; }
.file-list .spacer { flex: 1; }

/* ------------------------------------------------------------- tool cards */
.tool-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px; margin: 28px 0 0;
}
.tool-card {
  display: block; background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 24px; color: inherit;
}
.tool-card:hover { border-color: var(--teal); text-decoration: none; }
.tool-card h2 { margin: 0 0 8px; font-size: 20px; color: var(--navy); }
.tool-card p { margin: 0; color: var(--muted); font-size: 15px; }

/* --------------------------------------------------------------- the pitch */
/* The app is what these pages are for, so the closing block is styled to be
   read, not skipped. Navy on the off-white page, matching the site's dark
   sections. */
.pitch {
  background: var(--navy-deep); color: #fff; border-radius: 12px;
  padding: 32px 34px; margin: 40px 0 0;
}
.pitch h2 { margin: 0 0 10px; font-size: clamp(20px, 2.6vw, 26px); letter-spacing: -0.01em; }
.pitch p { margin: 0 0 18px; color: #CBD5E1; max-width: 620px; }
.pitch .cta { background: var(--amber); border-color: var(--amber); color: var(--navy-deep); }
.pitch .cta:hover { background: #FFBC5C; }
.pitch .fine { font-size: 14px; color: #94A3B8; margin: 14px 0 0; }

@media (max-width: 700px) {
  /* The logo is NOT resized here. site.css already steps it down at 1080,
     700 and 480 with `div.brand img`, which is both more specific and loaded
     later, so a rule here would never win. It was in this file and had no
     effect. */
  .tool-hero { padding: 28px 0 4px; }
  ul.findings li { flex-direction: column; gap: 2px; }
  ul.findings .what { min-width: 0; }
  .pitch { padding: 24px; }
}

/* ------------------------------------------------------------- switcher */
/* The row that lets a visitor move between the tools. Without it the only way
   off a tool page was the browser back button, and most people just leave
   instead. Sits above the hero on every tool page, single-sourced from
   site_chrome.render_tool_switcher(). */
.tool-switcher {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 20px 0 0; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
.tool-switcher a,
.tool-switcher .current {
  padding: 8px 14px; border-radius: 7px;
  font-size: 14px; font-weight: 600; line-height: 1;
}
.tool-switcher a { color: var(--teal); }
.tool-switcher a:hover { background: #F0F9FB; text-decoration: none; }
/* The current tool is not a link to itself: it reads as the selected tab. */
.tool-switcher .current { background: var(--navy); color: #fff; }

/* ---------------------------------------------------------------- fields */
.fields {
  display: grid; grid-template-columns: max-content 1fr;
  gap: 12px 18px; align-items: center; margin: 0 0 6px;
}
.fields label { color: var(--muted); font-size: 14px; }
.fields input {
  font: inherit; font-size: 15px; width: 100%;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px;
  background: #fff; color: var(--navy);
}
.fields input:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(36, 123, 142, 0.12);
}
.saved-note {
  margin: 14px 0 0; padding: 10px 14px;
  background: #F0FDF4; border: 1px solid #BBF7D0; border-radius: 8px;
  color: #166534; font-size: 14px; font-weight: 500;
}

@media (max-width: 700px) {
  /* Stacked, or the label column squeezes every input to nothing. */
  .fields { grid-template-columns: 1fr; gap: 6px 0; align-items: stretch; }
  .fields label { margin-top: 10px; }
}

/* ------------------------------------------------------------ quality row */
.quality-row {
  display: flex; align-items: center; gap: 14px;
  margin: 18px 0 0; padding: 12px 16px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
}
.quality-row label { color: var(--muted); font-size: 14px; }
.quality-row input[type=range] { flex: 1; max-width: 320px; accent-color: var(--teal); }
.quality-row span { font-weight: 600; font-size: 14px; min-width: 44px; }

@media (max-width: 700px) {
  .quality-row { flex-wrap: wrap; }
}

/* -------------------------------------------------------------- size row */
.size-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.size-row input[type=number] {
  font: inherit; font-size: 15px; width: 110px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px;
  background: #fff; color: var(--navy);
}
.size-row input[type=number]:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(36, 123, 142, 0.12);
}
button.preset {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 12px; border-radius: 6px;
  background: #fff; color: var(--teal); border: 1px solid var(--line);
}
button.preset:hover { border-color: var(--teal); background: #F0F9FB; }
button.action[disabled] { opacity: .5; cursor: default; }
button.action[disabled]:hover { background: #fff; }

/* ------------------------------------------------------------- presets */
.preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.preset-row .preset {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 14px; line-height: 1.25;
}
.preset-detail { font-size: 12px; font-weight: 400; color: var(--muted); }
/* The chosen limit, marked the same way the current tool is in the switcher. */
.preset-row .preset.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.preset-row .preset.on .preset-detail { color: #CBD5E1; }
.preset-note:empty { display: none; }
.quality-row input[type=range][disabled] { opacity: .5; }