/* Code Image Generator */

.ci-shell {
  display: grid; gap: 22px;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
}
@media (max-width: 980px) { .ci-shell { grid-template-columns: minmax(0, 1fr); } }

/* ── stage ────────────────────────────────────────────────────────────────── */
/* A checkerboard, because "no backdrop" is a real option here and the only honest way to
   show transparency is to show what is behind it. The canvas is centred and allowed to
   overflow horizontally into its own scroller rather than being scaled down — a code image
   shown at 60% is a code image you cannot judge. */
.ci-stage {
  /* `margin:auto` on the child, NOT justify-content:center. Centring an overflowing flex
     item with justify-content clips it at BOTH ends and makes the start unreachable — you
     can scroll right but never back past the left edge, so a wide image loses its line
     numbers and first characters with no way to see them. */
  /* `safe center` keeps a too-tall image reachable; the plain value first is the fallback
     for browsers that drop the whole declaration rather than the keyword. */
  display: flex; align-items: center; align-items: safe center;
  padding: 20px; border-radius: var(--radius); overflow: auto;
  max-height: 62vh;
  background:
    linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.03) 75%),
    linear-gradient(45deg, rgba(255,255,255,.03) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.03) 75%),
    var(--bg-soft);
  background-size: 22px 22px, 22px 22px, auto;
  background-position: 0 0, 11px 11px, 0 0;
  border: 1px solid var(--line);
}
#ciCanvas { display: block; flex: 0 0 auto; margin: auto; border-radius: 6px; }

.ci-stage-bar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 12px;
}
.ci-spacer { flex: 1 1 auto; }
.ci-meta { font-size: .8rem; color: var(--muted-2); font-variant-numeric: tabular-nums; }

.ci-codelabel {
  display: block; margin: 18px 0 7px;
  font-size: .82rem; font-weight: 600; color: var(--muted);
}
.ci-code {
  width: 100%; min-height: 200px; resize: vertical;
  padding: 14px 16px;
  font: 400 .86rem/1.65 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--text); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  tab-size: 4;
}
.ci-code:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }

/* ── panel ────────────────────────────────────────────────────────────────── */
.ci-panel { display: flex; flex-direction: column; gap: 18px; }
.ci-block {
  padding: 16px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.ci-block h3 {
  margin: 0 0 13px; font-size: .78rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted-2);
}
.ci-field { display: flex; flex-direction: column; gap: 6px; position: relative; margin-bottom: 13px; }
.ci-field:last-child { margin-bottom: 0; }
.ci-field label { font-size: .82rem; font-weight: 600; color: var(--muted); }
.ci-field label small { font-weight: 500; opacity: .7; margin-left: 5px; }
.ci-input {
  width: 100%; padding: 9px 11px; min-height: 38px;
  font: inherit; font-size: .88rem; color: var(--text);
  background: var(--card-2); border: 1px solid var(--line); border-radius: 10px;
}
.ci-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
select.ci-input { cursor: pointer; }
.ci-hint { margin: 2px 0 0; font-size: .74rem; line-height: 1.5; color: var(--muted-2); }

/* Ranges need their own groove drawn: stripping the input's background is necessary or the
   field chrome boxes the slider in, and accent-color styles the thumb and the fill but never
   the track. */
input[type="range"].ci-input {
  -webkit-appearance: none; appearance: none;
  padding: 0; min-height: 22px; border: 0; background: none;
  accent-color: var(--accent); cursor: pointer;
}
input[type="range"].ci-input::-webkit-slider-runnable-track {
  height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .16);
}
input[type="range"].ci-input::-moz-range-track {
  height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .16);
}
input[type="range"].ci-input::-moz-range-progress {
  height: 5px; border-radius: 999px; background: var(--accent);
}
input[type="range"].ci-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; margin-top: -5px;
  border-radius: 50%; background: var(--accent);
  border: 2px solid var(--card-2); box-shadow: 0 1px 4px rgba(0,0,0,.5);
}
input[type="range"].ci-input::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--card-2);
}
.ci-range .ci-out {
  position: absolute; top: 0; right: 0;
  font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text);
}

.ci-check {
  display: flex; align-items: center; gap: 9px; margin-top: 11px;
  font-size: .84rem; color: var(--muted); cursor: pointer;
}
.ci-check input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }

/* ── theme picker ─────────────────────────────────────────────────────────── */
/* Each swatch is the theme's own background carrying three of its own token colours. The
   decision being made is entirely about colour, so the control has to be made of it. */
.ci-themes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ci-theme {
  position: relative; display: flex; align-items: center; gap: 5px;
  padding: 10px 10px 9px; cursor: pointer; font: inherit;
  border: 2px solid transparent; border-radius: 11px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform .12s var(--ease-out), border-color .15s var(--ease-out);
}
.ci-theme:hover { transform: translateY(-2px); }
.ci-theme.is-on { border-color: var(--accent); }
.ci-theme i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.ci-theme span {
  margin-left: auto; font-size: .7rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ci-swatches {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 7px; margin-bottom: 12px;
}
.ci-swatch {
  height: 36px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  transition: transform .12s var(--ease-out), border-color .15s var(--ease-out);
}
.ci-swatch:hover { transform: translateY(-2px); }
.ci-swatch.is-on { border-color: var(--text); }

/* ── status ───────────────────────────────────────────────────────────────── */
.ci-status {
  margin: 12px 0 0; padding: 11px 14px;
  font-size: .86rem; line-height: 1.55; color: var(--muted);
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.ci-status.is-ok { color: #7ee2a8; border-color: color-mix(in srgb, #5cd98a 38%, transparent); }
.ci-status.is-error { color: #ff9eb0; border-color: color-mix(in srgb, #ff6b8a 38%, transparent); }

/* The whole page takes a dropped source file, so the target must be the whole page. */
body.ci-dropping::after {
  content: "Drop a source file";
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  font-size: 1.15rem; font-weight: 700; color: var(--text);
  background: rgba(11, 14, 28, .8);
  outline: 3px dashed var(--accent); outline-offset: -20px;
  pointer-events: none;
}

.btn-block { width: 100%; justify-content: center; }
.ci-block .btn + .btn { margin-top: 10px; }

@media (pointer: coarse) { .ci-theme, .ci-swatch { min-height: 44px; } }
@media (max-width: 640px) {
  .ci-stage { padding: 12px; max-height: 46vh; }
  .ci-themes { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ci-theme, .ci-swatch { transition: none; }
}