/* Converter pages — the public file-conversion tools.
   Rides site.css entirely for tokens, buttons, type and the nav/footer; this
   file only carries the widget those pages add (dropzone, stitch stage, stats).
   Every colour here is a token, so both tones work without a second ruleset. */

.conv-hero { padding: 96px 0 34px; }
.conv-hero__h1 { font-size: clamp(38px, 6vw, 68px); margin: 14px 0 18px; }
.conv-band { padding: 0 0 20px; }

/* ------------------------------------------------------------------ dropzone */
.conv {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
}
.conv__drop {
  padding: 58px 28px; text-align: center; cursor: pointer;
  border-bottom: 1px dashed transparent;
  transition: background var(--t-fast) var(--ease);
}
.conv__drop:hover, .conv__drop:focus-visible { background: var(--surface-2); outline: none; }
.conv__drop.is-over { background: var(--surface-2); box-shadow: inset 0 0 0 2px var(--accent); }
.conv__dropart { color: var(--fg-3); margin-bottom: 12px; }
.conv__dropmain { font-size: 17.5px; font-weight: 600; letter-spacing: -.02em; }
.conv__dropmain b { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.conv__dropsub { margin-top: 7px; font-size: 13.5px; color: var(--fg-3); }

.conv-opts {
  display: flex; flex-wrap: wrap; gap: 26px; align-items: center;
  padding: 16px 24px; border-top: 1px solid var(--line);
  font-size: 14px; color: var(--fg-2);
}
.conv-opts label { display: inline-flex; align-items: center; gap: 9px; }
.conv-opts input {
  width: 78px; height: 36px; padding: 0 10px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--bg); color: var(--fg); font: inherit;
}
.conv-opts__unit { color: var(--fg-3); }

.conv__err {
  padding: 14px 24px; border-top: 1px solid var(--line);
  color: var(--t-crimson); font-size: 14.5px;
}

/* --------------------------------------------------------------------- output */
.conv-out {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
}
.conv-out__stage {
  position: relative; background: var(--render-bg);
  display: flex; align-items: center; justify-content: center; min-height: 380px;
}
.conv-out__stage canvas { display: block; width: 100%; height: auto; }
.conv-out__busy {
  position: absolute; inset: 0; display: flex; gap: 12px;
  align-items: center; justify-content: center;
  background: rgba(11, 10, 13, .55); color: #FBF8F2;
  font-size: 14.5px; letter-spacing: -.01em;
}

.conv-out__side {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 22px; padding: 24px; border-left: 1px solid var(--line);
}
/* site.css lays .spec out in three columns for a full-width band; in a 320px
   sidebar that squeezes the values and wraps the labels mid-phrase. Two columns
   with the size on its own row reads properly at this width. */
.conv-out__spec { grid-template-columns: 1fr 1fr; max-width: none; }
.conv-out__spec > div:nth-child(3) { grid-column: 1 / -1; }

.conv-out__acts { display: grid; gap: 10px; }
/* .btn is nowrap and fixed-height, which is right for a row of buttons and
   wrong for a full-width one carrying a sentence: "Create a free account to
   download" simply ran out past the panel. Let these wrap and grow instead. */
.conv-out__acts .btn {
  white-space: normal; height: auto; min-height: 46px;
  padding-top: 11px; padding-bottom: 11px; text-align: center; line-height: 1.3;
}

/* .tlink is written for anchors, so on a <button> the user-agent chrome (grey
   fill, border, its own font) survives and it reads as a default form button. */
.conv-again { margin-top: 18px; text-align: center; }
.conv-again .tlink {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--fg-2); font-size: 14px;
}
.conv-again .tlink:hover { color: var(--fg); }

/* -------------------------------------------------------------------- prose */
/* A plain section head. These pages are utilities, not the editorial landing
   page, so they get a heading that sits comfortably in a narrow measure. */
.conv-sec__label { color: var(--fg-3); margin-top: 14px; }
.conv-sec__h2 {
  margin-top: 10px; max-width: 20ch;
  font-size: clamp(27px, 3.4vw, 39px); font-weight: 680;
  letter-spacing: -.03em; line-height: 1.1;
}

.conv-prose { margin-top: 30px; }
.conv-prose p { margin-bottom: 17px; max-width: 68ch; }

.conv-rel { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.conv-rel__item {
  padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px;
  font-size: 13.5px; color: var(--fg-2); text-decoration: none;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.conv-rel__item:hover { border-color: var(--line-2); color: var(--fg); }

@media (max-width: 860px) {
  .conv-out { grid-template-columns: 1fr; }
  .conv-out__side { border-left: 0; border-top: 1px solid var(--line); }
  .conv__drop { padding: 44px 20px; }
}