/**
 * Image Dimensions Calculator — tool styles
 *
 * Layout, the preview stage and the comparison list. Inputs, buttons, cards,
 * fieldsets and stat tiles all come from frikwork; nothing here restyles a
 * frikwork component, and every colour is a --fw-* token so both themes work.
 */

.imgdim-layout {
  display: grid;
  grid-template-columns: minmax(320px, 420px) 1fr;
  gap: var(--fw-space-lg);
  align-items: start;
}

.imgdim-results {
  display: flex;
  flex-direction: column;
  gap: var(--fw-space-lg);
}

/* --- Inputs ---------------------------------------------------------------- */

.imgdim-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fw-space-md);
}

/* .fw-field carries a bottom margin for stacked forms; side by side it just
   adds a gap the grid already provides. */
.imgdim-pair .fw-field { margin-bottom: 0; }

.imgdim-pair .fw-input {
  min-width: 0;
  font-family: var(--fw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-weight: 600;
}

/* --- Presets --------------------------------------------------------------- */

.imgdim-presets__title {
  display: block;
  margin-bottom: var(--fw-space-sm);
}

.imgdim-presets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--fw-space-sm);
}

.imgdim-preset {
  white-space: nowrap;
  overflow: hidden;
}

/* --- Preview stage --------------------------------------------------------- */

.imgdim-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22rem;
  padding: var(--fw-space-lg);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-lg);
  background: var(--fw-bg-2);
}

.imgdim-stage__fit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.imgdim-box {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Last-resort clamps. The script fits the box to the container, but an
     extreme ratio can still be pushed past it by the minimum-size rule. */
  max-width: 100%;
  max-height: 19rem;
  border: 2px solid var(--fw-brand);
  border-radius: var(--fw-radius-md);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--fw-brand) 18%, transparent) 0%,
    color-mix(in srgb, var(--fw-brand) 4%, transparent) 100%
  );
  box-shadow: 0 0 20px color-mix(in srgb, var(--fw-brand) 25%, transparent);
  transition: width var(--fw-dur, 0.2s) ease, height var(--fw-dur, 0.2s) ease;
}

.imgdim-box__label {
  padding: var(--fw-space-md);
  text-align: center;
}

.imgdim-box__dims {
  font-family: var(--fw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: clamp(0.95rem, 2.2vw, 1.4rem);
  font-weight: 700;
  color: var(--fw-brand-text);
}

.imgdim-box__ratio {
  margin-top: 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--fw-text-2);
}

/* --- Original vs new ------------------------------------------------------- */

.imgdim-compare {
  margin: var(--fw-space-lg) 0 0;
  padding: 0 var(--fw-space-md);
  border: 1px solid var(--fw-border);
  border-radius: var(--fw-radius-md);
  background: var(--fw-bg-2);
}

.imgdim-compare__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fw-space-md);
  padding: var(--fw-space-sm) 0;
  border-bottom: 1px solid var(--fw-border);
}

.imgdim-compare__row:last-child { border-bottom: none; }

.imgdim-compare dt {
  font-weight: 600;
  color: var(--fw-text-muted);
}

.imgdim-compare dd {
  margin: 0;
  font-family: var(--fw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 1.05rem;
  font-weight: 600;
}

.imgdim-compare__new { color: var(--fw-brand-text); }

/* --- Stat tiles ------------------------------------------------------------ */

.imgdim-facts .app-stat { padding: var(--fw-space-md); }
.imgdim-facts .app-stat__value {
  font-size: 1.15rem;
  font-family: var(--fw-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.imgdim-tips .app-panel__body {
  padding-top: var(--fw-space-md);
  padding-bottom: var(--fw-space-md);
}

/* --- Change pulse ---------------------------------------------------------- */

@keyframes imgdim-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

.imgdim-pulse { animation: imgdim-pulse 0.3s ease; }

@media (prefers-reduced-motion: reduce) {
  .imgdim-pulse { animation: none; }
  .imgdim-box { transition: none; }
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 1000px) {
  .imgdim-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .imgdim-stage { min-height: 16rem; padding: var(--fw-space-md); }
  .imgdim-presets { grid-template-columns: 1fr; }
  .imgdim-compare dd { font-size: 0.95rem; }
}