/* Fixamgo Images. Layout only: the card, the heading and the button
   styles come from shared/tools.css, the same as every other tool
   page, so this file holds what is particular to picking pictures and
   choosing a format. */

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

.im-drop {
  align-items: center;
  background: var(--pf-surface);
  border: 2px dashed var(--pf-line);
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 28px 16px;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.im-drop:hover,
.im-drop.is-over {
  background: var(--pf-tint);
  border-color: var(--pf-primary);
}

.im-drop [data-lucide] {
  color: var(--pf-primary);
  height: 28px;
  width: 28px;
}

.im-drop-main {
  color: var(--pf-ink);
  font-size: 1rem;
  font-weight: 600;
}

.im-drop-sub {
  color: var(--pf-muted);
  font-size: 0.85rem;
}

/* ---- What was chosen ---------------------------------------------------- */

.im-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.im-item {
  align-items: center;
  border-bottom: 1px solid var(--pf-line);
  display: flex;
  gap: 10px;
  padding: 8px 2px;
}

.im-item:last-child {
  border-bottom: 0;
}

/* The name takes the row and truncates; the size never does. "How big
   is it" is the question this list exists to answer, so it is the one
   thing that must not be the bit that gets cut off. */
.im-item-name {
  color: var(--pf-ink);
  flex: 1;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.im-item-size {
  color: var(--pf-muted);
  flex: 0 0 auto;
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.im-item-drop {
  background: none;
  border: 0;
  color: var(--pf-muted);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: 2px 6px;
}

.im-item-drop:hover {
  color: var(--pf-danger, #e11d48);
}

.im-empty {
  color: var(--pf-muted);
  font-size: 0.88rem;
  margin: 10px 0 0;
}

/* ---- The format ---------------------------------------------------------- */

.im-targets {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.im-target {
  background: var(--pf-surface);
  border: 1px solid var(--pf-line);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 60px;
  padding: 10px 12px;
  text-align: left;
}

.im-target b {
  color: var(--pf-ink);
  font-size: 0.95rem;
}

.im-target small {
  color: var(--pf-muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.im-target.is-on {
  background: var(--pf-tint);
  border-color: var(--pf-primary);
}

.im-target.is-on b {
  color: var(--pf-primary);
}

.im-note {
  color: var(--pf-muted);
  font-size: 0.84rem;
  margin: 10px 0 0;
}

/* ---- Going, and what came back ------------------------------------------ */

.im-go {
  margin-top: 16px;
  width: 100%;
}

.im-go:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.im-result {
  color: var(--pf-ink);
  font-size: 0.92rem;
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}

/* The line the product is named after. Quiet: a signature under the
   work, not a second headline. */
.im-tagline {
  color: var(--pf-muted);
  font-size: 0.85rem;
  font-style: italic;
  margin-top: 28px;
  text-align: center;
}

/* ---- The folder door ---------------------------------------------------- */

.im-folder {
  align-items: center;
  color: var(--pf-primary);
  cursor: pointer;
  display: flex;
  font-size: 0.9rem;
  gap: 8px;
  justify-content: center;
  padding: 10px 0 0;
}

.im-folder [data-lucide] {
  height: 16px;
  width: 16px;
}

/* ---- The dials ---------------------------------------------------------- */

/* Each group gets a heading, because three unlabelled rows of pills is
   a puzzle rather than a choice. */
.im-dial {
  color: var(--pf-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  margin: 18px 0 8px;
  text-transform: uppercase;
}

.im-dial:first-of-type {
  margin-top: 4px;
}

/* ---- What came back ----------------------------------------------------- */

/* The picture itself. Bounded, because a 4000px photo would otherwise
   push the download button off the screen it is meant to be under. */
.im-preview {
  background: var(--pf-surface-alt, var(--pf-surface));
  border: 1px solid var(--pf-line);
  border-radius: 10px;
  display: block;
  margin: 0 0 12px;
  max-height: 340px;
  max-width: 100%;
  object-fit: contain;
}

.im-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* The position in the batch. A list of forty filenames is unreadable
   without one, and "which of these is page three" is the question
   somebody asks of a picture-to-PDF run. */
.im-item-n {
  align-items: center;
  background: var(--pf-tint);
  border-radius: 999px;
  color: var(--pf-primary);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  height: 20px;
  justify-content: center;
  width: 20px;
}

/* The one-line explanation under a dial heading. */
.im-dial-note {
  color: var(--pf-muted);
  font-size: 0.82rem;
  line-height: 1.4;
  margin: -4px 0 10px;
}