/* ============================================================================
   EXIF Viewer — 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 — yellow-green, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #e4ef61  15.1:1 on --bg   14.0:1 on --surface   15.7:1 on --bg-sunk
     light #696f25  5.2:1 on --bg    5.4:1 on --surface    4.7:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #e4ef61; --accent-dim: rgba(228, 239, 97, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #696f25; --accent-dim: rgba(105, 111, 37, 0.10); }
}

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

.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;
}

/* ============================================================================
   Drop zone + file row (shared shape with image-compressor/image-resizer)
   ========================================================================= */

.drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  padding: clamp(1.5rem, 5vw, 2.5rem) 1.25rem;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg-sunk);
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.drop-zone:hover,
.drop-zone:focus-visible { border-color: var(--accent); }
.drop-zone.is-drag {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.drop-icon { color: var(--text-faint); fill: currentColor; opacity: 0.85; }
.drop-icon circle,
.drop-icon path,
.drop-icon rect { fill: currentColor; }
.drop-icon rect:first-child { fill: none; stroke: currentColor; stroke-width: 1.6; }

.drop-text { margin: 0; font-size: 0.9375rem; color: var(--text-dim); }
.drop-hint { margin: 0; font-size: 0.8125rem; color: var(--text-faint); }

.file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  margin-top: 1.1rem;
}
.readout-sm {
  font-family: var(--mono);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
}
.file-name {
  font-size: 0.8125rem;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.err {
  display: block;
  min-height: 0;
  margin: 0.6rem 0 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--err);
}
.err:empty { margin: 0; }

/* ============================================================================
   Metadata report
   ========================================================================= */

.report {
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}

.report-note {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* The privacy callout — deliberately the loudest thing on the page when GPS
   turns up, since that is the whole reason this tool exists. */
.gps-alert {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-bottom: 1.25rem;
  padding: 0.9rem 1.1rem;
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  border-radius: var(--radius);
}
.gps-alert-text { flex: 1 1 16rem; min-width: 0; }
.gps-alert-text p { margin: 0.3rem 0 0; font-size: 0.875rem; color: var(--text-dim); }
.gps-coords {
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--text);
  overflow-wrap: anywhere;
}

.gps-clear {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.gps-clear p { margin: 0; font-size: 0.875rem; color: var(--text-dim); }

.meta-table-wrap { margin-top: 0.25rem; }
.meta-table-wrap table { font-size: 0.9375rem; }
.meta-table-wrap th[scope="row"] {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-dim);
  white-space: nowrap;
  padding-right: 1.25rem;
}
.meta-table-wrap td { font-family: var(--mono); }

.before-after {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}

/* ============================================================================
   Clean / re-encode controls + canvas preview
   ========================================================================= */

.controls {
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}

.fields {
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  align-items: end;
}

.canvas-wrap {
  margin-top: 1.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}

.canvas-frame {
  display: flex;
  justify-content: center;
  padding: 1rem;
  background: var(--bg-sunk);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  overflow: auto;
}

#preview-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  background-image:
    linear-gradient(45deg, var(--surface-2) 25%, transparent 25%),
    linear-gradient(-45deg, var(--surface-2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--surface-2) 75%),
    linear-gradient(-45deg, transparent 75%, var(--surface-2) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
}

.result-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.1rem;
}
.result-row .btn { margin-left: auto; }

.verify-note { margin-top: 1rem; }

/* ============================================================================
   Article furniture — shared shapes reused across this tool's own sections
   ========================================================================= */

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

.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;
  margin-top: 1.1rem;
  color: var(--err);
  font-size: 0.9375rem;
}

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