/* Converter File.
   The token block below is the same one the other nine tools use, so the
   family stays one family in both light and dark. Everything after the rule
   marked "converter" is this tool's own two-column compare. */

:root {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --line: #e3e5e9;
  --line-strong: #d0d4da;
  --text: #16181d;
  --muted: #6b7280;
  --accent: #2f7d4f;
  --accent-soft: #e7f3ec;
  --danger: #d4383d;
  --warn: #a35b06;
  --warn-soft: #fdf3e3;
  --warn-line: #e8c98e;
  --grid: #e8eaee;
  --shadow: 0 1px 2px rgba(16, 18, 21, .06), 0 8px 24px rgba(16, 18, 21, .06);
  --radius: 10px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16181c;
    --surface: #1e2126;
    --surface-2: #23262c;
    --line: #2e323a;
    --line-strong: #3a3f48;
    --text: #e8eaed;
    --muted: #9aa1ad;
    --accent: #4ade80;
    --accent-soft: #1c2f24;
    --danger: #f87171;
    --warn: #f0b45e;
    --warn-soft: #2c2415;
    --warn-line: #5c4a22;
    --grid: #262a31;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#app { display: flex; flex-direction: column; min-height: 100vh; }

button { font-family: inherit; }

.primary {
  border: 0; background: var(--accent); color: #fff;
  font: 600 13px/1 inherit; padding: 11px 18px; border-radius: 8px; cursor: pointer;
}
@media (prefers-color-scheme: dark) { .primary { color: #0b1410; } }
.primary:hover:not(:disabled) { filter: brightness(1.06); }
.primary:disabled { opacity: .4; cursor: default; }
.primary.wide { width: 100%; padding: 13px 18px; font-size: 14px; }

.ghost {
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font: 600 13px/1 inherit; padding: 9px 14px; border-radius: 8px; cursor: pointer;
}
.ghost:hover { background: var(--surface-2); }
.ghost.small { padding: 7px 11px; font-size: 12px; }

code {
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 4px;
}

/* ---------- top bar ---------- */

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.logo { color: var(--accent); font-size: 18px; }
.app-title { margin: 0; font-size: 16px; font-weight: 600; }
.status { color: var(--accent); font-size: 12px; white-space: nowrap; }

/* The sentence that separates this tool from Template Adjuster. It is never
   collapsed and never behind a toggle - to a stranger the two tools look the
   same, and the difference is the whole point of each. */
.differ {
  margin: 0; padding: 10px 16px; font-size: 13px; line-height: 1.5;
  background: var(--accent-soft); color: var(--text);
  border-bottom: 1px solid var(--line);
}
.differ a { color: var(--accent); font-weight: 600; text-decoration: none; }
.differ a:hover { text-decoration: underline; }

.banner {
  margin: 12px 16px 0; padding: 11px 13px; border-radius: var(--radius);
  background: var(--warn-soft); border: 1px solid var(--warn-line);
  color: var(--warn); font-size: 13px;
}
.banner[hidden] { display: none; }

/* ---------- converter: the two columns ---------- */

/* minmax(0, 1fr) and not 1fr. A bare 1fr is minmax(auto, 1fr), so a column
   whose text has a wide minimum - the Illustrator paragraph, on the right -
   grows past its share and squeezes the other one. The two previews have to be
   the same width on screen, because that is what makes one shared span mean one
   shared scale. */
.layout {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 16px; align-items: start; padding: 16px; flex: 1;
}
.layout[hidden] { display: none; }

.col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.arrow {
  align-self: center; color: var(--muted); font-size: 26px; line-height: 1;
  padding-top: 120px;
}

.pane {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.pane[hidden] { display: none; }
.pane-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 9px 12px; font-size: 12px; border-bottom: 1px solid var(--line);
}
.pane-title { color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.pane-size { color: var(--text); font-variant-numeric: tabular-nums; }
.pane .preview {
  width: 100%; height: 300px; display: block;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 20px 20px,
    var(--surface-2);
}
.pane-note {
  margin: 0; padding: 8px 12px; font-size: 11.5px; color: var(--muted);
  border-top: 1px solid var(--line); background: var(--surface-2);
}
.pane-note[hidden] { display: none; }

.art { fill: none; stroke: #64707e; }
.art-box { fill: none; stroke: #b6bec9; stroke-dasharray: 2 2; opacity: .6; }
.pane-empty-text { fill: var(--muted); font-family: inherit; }

.col-body { display: flex; flex-direction: column; gap: 10px; }

/* ---------- file information ---------- */

.file-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.file-name {
  font-size: 13px; font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.block-title {
  margin: 4px 0 0; font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}

.info {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0;
  padding: 12px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); font-size: 13px;
}
.info dt { color: var(--muted); }
.info dd { margin: 0; min-width: 0; }
.dim { font-variant-numeric: tabular-nums; font-weight: 600; }
.dim-none { color: var(--warn); font-weight: 600; }

.chip {
  display: inline-block; font-size: 11px; line-height: 1.3;
  padding: 2px 7px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
}
.chip-warn { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }

.why { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.notice {
  margin: 0; font-size: 12.5px; color: var(--warn); line-height: 1.5;
  background: var(--warn-soft); border: 1px solid var(--warn-line);
  border-radius: var(--radius); padding: 9px 11px;
}
.fineprint { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.55; }

/* ---------- the unit question ---------- */

.ask {
  background: var(--warn-soft); border: 1px solid var(--warn-line);
  border-radius: var(--radius); padding: 14px; display: flex;
  flex-direction: column; gap: 8px;
}
.ask h3 { margin: 0; font-size: 14px; color: var(--warn); }
.ask p { margin: 0; font-size: 13px; line-height: 1.5; }
.ask .ask-q { font-weight: 600; }
.ask-blocking { min-height: 300px; justify-content: center; }

.unit-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.unit-btn {
  border: 1px solid var(--warn-line); background: var(--surface); color: var(--text);
  font: 600 12.5px/1 inherit; padding: 9px 12px; border-radius: 8px; cursor: pointer;
}
.unit-btn:hover { background: var(--surface-2); }
.unit-btn.is-on { background: var(--warn); border-color: var(--warn); color: #fff; }
@media (prefers-color-scheme: dark) { .unit-btn.is-on { color: #1a1305; } }

/* ---------- convert controls ---------- */

.target-row { display: flex; flex-wrap: wrap; gap: 8px; }
.target-btn {
  flex: 1 1 auto; min-width: 76px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font: 600 13px/1 inherit; padding: 11px 14px; border-radius: 8px; cursor: pointer;
}
.target-btn:hover { background: var(--surface-2); }
.target-btn.is-on { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (prefers-color-scheme: dark) { .target-btn.is-on { color: #0b1410; } }

.convert-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.ok {
  margin: 0; font-size: 13px; color: var(--accent); font-weight: 600; line-height: 1.5;
}

.warn-box {
  background: var(--warn-soft); border: 1px solid var(--warn-line);
  border-radius: var(--radius); padding: 11px 13px; color: var(--warn);
}
.warn-box h4 { margin: 0 0 6px; font-size: 12.5px; }
.warn-box ul { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; }

.quiet-warn { font-size: 12.5px; color: var(--muted); }
.quiet-warn summary { cursor: pointer; }
.quiet-warn ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.55; }

/* ---------- empty state and drop target ---------- */

.empty-state {
  flex: 1; display: grid; align-content: center; justify-items: center;
  gap: 12px; text-align: center; padding: 40px 24px;
}
.empty-state[hidden] { display: none; }
.empty-state h2 { margin: 0; font-size: 20px; }
.empty-state p { margin: 0; max-width: 46ch; color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.empty-actions { margin-top: 4px; }

.drop-veil {
  position: fixed; inset: 12px; z-index: 5; display: grid; place-items: center;
  border: 2px dashed var(--accent); border-radius: 14px; background: var(--accent-soft);
  color: var(--accent); font-size: 15px; font-weight: 600; pointer-events: none;
}
.drop-veil[hidden] { display: none; }

/* ---------- phone ---------- */

@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  /* One column, so the arrow points the way the eye now travels. */
  .arrow { padding-top: 0; justify-self: center; transform: rotate(90deg); }
  .pane .preview { height: 230px; }
  .ask-blocking { min-height: 0; }
  .topbar { padding: 9px 12px; }
  .differ { padding: 9px 12px; font-size: 12.5px; }
  .target-btn { min-width: 0; }
}