/* ============================================================================
   Favicon Generator — 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/pink, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #ef61cc  6.53:1 on --bg   6.02:1 on --surface   6.76:1 on --bg-sunk
     light #960873  7.81:1 on --bg   8.14:1 on --surface   7.15:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root { --accent: #ef61cc; --accent-dim: rgba(239, 97, 204, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #960873; --accent-dim: rgba(150, 8, 115, 0.10); }
}

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

/* ============================================================================
   The instrument bay — matches the recessed-console pattern other tools use:
   a --bg-sunk console holding --surface modules (drop zone, size cards).
   ========================================================================= */

.tool {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 1.5rem);
  margin-bottom: 2.5rem;
}

.tool > h2 {
  margin: 0 0 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------------------------------------------------------- drop zone --- */

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
  background: var(--surface);
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 6vw, 3rem) 1.25rem;
  cursor: pointer;
  transition: border-color 0.12s ease, background-color 0.12s ease;
}
.dropzone:hover,
.dropzone:focus-visible { border-color: var(--accent); }
.dropzone.is-dragover {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.dropzone .drop-icon { color: var(--accent); margin-bottom: 0.25rem; }
.dropzone .drop-label {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text);
}
.dropzone .drop-hint {
  margin: 0;
  max-width: 42ch;
  font-size: 0.875rem;
  color: var(--text-dim);
}

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

/* ------------------------------------------------------------ sizes grid -- */

.sizes-panel { margin-top: 1.5rem; }

.sizes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
  gap: 0.85rem;
}

.size-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.9rem 0.75rem;
  text-align: center;
}

.size-canvas-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4.5rem;
  /* a checkerboard so a transparent source shows its alpha honestly */
  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: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
  border-radius: var(--radius-sm);
}

.size-canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  image-rendering: pixelated;
}
/* the 512px preview is large enough that pixelation reads as a rendering
   glitch rather than a helpful "this is exact pixels" cue */
.size-card:last-child .size-canvas { image-rendering: auto; }

.size-label {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
}
.size-use {
  font-size: 0.75rem;
  color: var(--text-dim);
  min-height: 2.2em;
}

.size-download { width: 100%; margin-top: 0.15rem; }

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}

.note {
  font-size: 0.875rem;
  color: var(--text-dim);
  margin-top: 0.6rem;
}

/* -------------------------------------------------------------- snippet -- */

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

.snippet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.snippet {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.6;
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
}

.copy-status {
  min-height: 1.3em;
  margin: 0.4rem 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--accent);
}

.offscreen-copy { position: fixed; left: -9999px; top: -9999px; }

/* ============================================================================
   Article furniture
   ========================================================================= */

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

.callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.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;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
  text-decoration: none;
}
.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;
  color: var(--err);
  font-size: 0.9375rem;
}