/* ============================================================================
   Image Resizer — 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 — magenta-violet, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #cc61ef  5.87:1 on --bg   5.42:1 on --surface   6.08:1 on --bg-sunk
     light #730896  9.13:1 on --bg   9.53:1 on --surface   8.37:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #cc61ef; --accent-dim: rgba(204, 97, 239, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #730896; --accent-dim: rgba(115, 8, 150, 0.10); }
}

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

/* base has no visually-hidden helper; the file-input and table captions need one */
.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
   ========================================================================= */

.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
   ========================================================================= */

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

/* ============================================================================
   Controls
   ========================================================================= */

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

/* the lock button sits in its own "field" slot so it lines up with the two
   number inputs on either side at desktop widths */
.lock-chip {
  width: 100%;
  justify-content: center;
  gap: 0.4rem;
}
.lock-icon { font-size: 0.85rem; }

.percent-field { margin-top: 1.1rem; }
.percent-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.percent-row input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  accent-color: var(--accent);
}
.percent-num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--text-dim);
}
.percent-num input[type="number"] {
  width: 4.5rem;
  text-align: right;
}

.note {
  margin-top: 1.1rem;
}

/* ============================================================================
   Canvas preview
   ========================================================================= */

.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);
  /* long/tall images still need to scroll rather than blow out the layout */
  overflow: auto;
}

#preview-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  /* a checkerboard so a transparent PNG/WebP resize is visibly transparent,
     not indistinguishable from an opaque white background */
  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; }

/* ============================================================================
   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; }