/* Quotient Minimizer.
   Layout follows the three-card mock: write C, read what the compiler made,
   copy what QM made of it.  The palette stays dark — assembly is the one thing
   a visitor is here to read, and this is the contrast that suits it. */

:root {
  --bg: #17171b;
  --card: #1e1e24;
  --frame: #16161a;
  --chrome: #26262b;
  --edge: #33333c;
  --edge-soft: #2b2b33;

  --ink: #e8e8ee;
  --ink-2: #b8b8c6;
  --muted: #8b8b9c;
  --line-no: #63637a;

  --accent: #2563ff;
  --accent-hi: #1d54e6;
  --ok: #3fb950;
  --warn: #d29922;
  --bad: #f85149;

  /* syntax */
  --kw: #7aa2f7;
  --type: #4ec9b0;
  --num: #e2857b;
  --str: #ce9178;
  --com: #6a9955;
  --fn: #dcdcaa;
  --pp: #c586c0;
  --operand: #7fb2f0;
  --addr: #5f5f74;
  --label: #dcdcaa;

  --radius: 10px;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
          Arial, "Noto Sans", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Scrollbars are chrome, not content. Everything still scrolls — by wheel, by
   touch, by keyboard — it just does not draw a bar over the code. */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; }

html, body { height: 100%; }

body {
  margin: 0;
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------------------------------------------------------------- topbar */

.topbar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: 25px 24px;
  background: var(--card);
  border-bottom: 1px solid var(--edge);
}

.brand { display: flex; align-items: center; gap: 14px; }
.logo { width: 40px; height: 40px; color: var(--accent); stroke-width: 3; }
.brand-text h1 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.brand-text p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }

.controls { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

.control { display: inline-flex; align-items: center; gap: 9px; }
.control > span { font-size: 12.5px; color: var(--muted); white-space: nowrap; }

select, input[type="text"] {
  appearance: none; -webkit-appearance: none;
  padding: 7px 30px 7px 11px;
  border: 1px solid var(--edge); border-radius: 8px;
  background: var(--chrome)
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' fill='none' stroke='%238b8b9c' stroke-width='1.4'/></svg>")
    no-repeat right 10px center;
  background-size: 11px 11px;
  color: var(--ink); font: inherit; font-size: 13px; cursor: pointer;
}
input[type="text"] { background-image: none; padding-right: 11px; cursor: text;
                     font-family: var(--mono); font-size: 12.5px; }
select:focus, input:focus { outline: 2px solid rgba(37, 99, 255, .45); }
input:disabled { opacity: .45; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px; border-radius: 8px;
  border: 0; background: none; color: var(--muted); cursor: pointer;
}
.icon-btn:hover { background: var(--chrome); color: var(--ink); }

.link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid transparent; border-radius: 7px;
  background: none; color: var(--ink-2);
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.link:hover { background: var(--chrome); color: var(--ink); }
.link.copy { border-color: var(--edge); background: var(--chrome); }
.link.copy:hover { border-color: var(--accent); }
.link svg { width: 14px; height: 14px; }

/* ----------------------------------------------------------------- board */

.board {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 0.92fr 1fr 1fr;
  gap: 24px;
  padding: 20px 24px 24px;
  align-items: stretch;
  min-height: 0;
}

/* Below the three-column width the page scrolls instead of being squeezed.
   As a flex child with min-height 0, the board was shrinking under its own
   content, which left every grid row shorter than the card inside it — that is
   what made the cards overlap on a phone. */
@media (max-width: 1180px) {
  html, body { height: auto; min-height: 100%; }
  body { overflow: auto; }
  .board {
    flex: 0 0 auto;
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .framed { flex: 0 0 auto; height: 400px; }
}

@media (max-width: 820px) {
  .topbar { padding: 12px 14px; gap: 10px; }
  .brand { gap: 11px; }
  .logo { width: 32px; height: 32px; }
  .brand-text h1 { font-size: 16px; }
  .brand-text p { font-size: 12px; }

  .controls { width: 100%; gap: 10px 12px; }
  .control { flex: 1 1 160px; min-width: 0; }
  .control > span { font-size: 12px; }
  .control select { flex: 1 1 auto; min-width: 0; width: 100%; }

  .board { grid-template-columns: 1fr; gap: 12px; padding: 12px 14px 16px; }
  .card { padding: 14px; border-radius: 10px; }
  .card-head { margin-bottom: 2px; }
  .card-head h2 { font-size: 15px; }
  .card-sub { margin: 6px 0 10px; font-size: 12px; }
  #card-write .card-head { margin-bottom: 10px; }
  .framed { height: 264px; }
  .gutter { flex-basis: 34px; padding-top: 11px; }
  .highlight, #source, .listing pre { padding-top: 11px; }
  .card-foot { margin-top: 10px; padding-top: 9px; min-height: 32px; }
  .compile { margin-top: 10px; padding: 11px 16px; font-size: 14px; }
  .pagefoot { padding: 12px 14px 18px; font-size: 12px; }
}

/* On a phone the control labels cost a whole row and say nothing the value
   does not: "x86-64 (baseline)", "Clang (WASM)", "-O2" name themselves. */
@media (max-width: 560px) {
  .control > span { position: absolute; width: 1px; height: 1px;
                    overflow: hidden; clip-path: inset(50%); }
  .controls { gap: 8px; }
  .control { flex: 1 1 44%; }
  .control select { width: 100%; font-size: 12.5px; padding: 7px 26px 7px 10px; }
  .brand-text h1 { font-size: 15.5px; }
  .brand-text p { font-size: 11.5px; }
}

.card {
  display: flex; flex-direction: column;
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 12px;
  padding: 22px;
  min-width: 0; min-height: 0;
  /* A card must never paint outside itself, whatever the row height. */
  overflow: hidden;
}

.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 4px;
}
.card-head h2 {
  margin: 0; font-size: 17px; font-weight: 600;
  display: inline-flex; align-items: baseline; gap: 8px;
}
.step { color: var(--muted); font-weight: 500; }
.dim { color: var(--muted); font-weight: 400; }

.card-sub {
  margin: 8px 0 16px;
  font-size: 12.5px; color: var(--muted); font-family: var(--mono);
}
#card-write .card-head { margin-bottom: 18px; }

.framed {
  border: 1px solid var(--edge-soft);
  border-radius: var(--radius);
  background: var(--frame);
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 180px;
}

/* ---------------------------------------------------------------- editor */

.editor { display: flex; }

.gutter {
  flex: 0 0 42px;
  padding: 14px 10px 14px 0;
  text-align: right; white-space: pre;
  color: var(--line-no);
  font: 12.5px/21px var(--mono);
  user-select: none; overflow: hidden;
}

.code-area { position: relative; flex: 1 1 auto; min-width: 0; }

.highlight, #source {
  margin: 0; padding: 14px 14px 14px 0;
  font: 12.5px/21px var(--mono);
  white-space: pre; border: 0; tab-size: 4;
  width: 100%; height: 100%; overflow: auto;
}
.highlight { position: absolute; inset: 0; color: var(--ink); }
#source {
  position: relative; background: transparent;
  color: transparent; caret-color: var(--ink); resize: none; outline: none;
}
#source::selection { background: #2d4f86; }

/* --------------------------------------------------------------- listing */

.listing { padding: 0; }
.listing pre {
  margin: 0; padding: 14px;
  height: 100%; overflow: auto;
  font: 12.5px/21px var(--mono);
  white-space: pre; color: var(--ink);
}
.listing .row + .row { margin-top: 0; }

.row { display: block; }
.addr { color: var(--addr); display: inline-block; width: 6ch; }
.mn { color: var(--ink); display: inline-block; min-width: 9ch; }
.ops { color: var(--operand); }
.lbl { color: var(--label); }

.hint { color: var(--muted); font-family: var(--sans); }
.hint b { color: var(--ink-2); }

.tok-type { color: var(--type); }
.tok-kw { color: var(--kw); }
.tok-num { color: var(--num); }
.tok-str { color: var(--str); }
.tok-com { color: var(--com); }
.tok-fn { color: var(--fn); }
.tok-pp { color: var(--pp); }
.tok-dir { color: var(--pp); }
.tok-reg { color: var(--operand); }
.tok-label { color: var(--label); }

/* -------------------------------------------------------------- card foot */

.card-foot {
  display: flex; align-items: center; gap: 10px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--edge-soft);
  font-size: 12.5px; color: var(--muted);
  min-height: 42px;
}
.card-foot .right { margin-left: auto; }
.card-foot select { padding: 5px 26px 5px 9px; font-size: 12px; }

.check { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.check input {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; margin: 0;
  border: 1px solid var(--edge); border-radius: 4px;
  background: var(--chrome); cursor: pointer; flex: 0 0 auto;
}
.check input:checked {
  background: var(--accent) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.5l3 3 5-6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat;
  border-color: var(--accent);
}

.compile {
  margin-top: 16px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 13px 16px;
  border: 0; border-radius: var(--radius);
  background: var(--accent); color: #fff;
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.compile:hover { background: var(--accent-hi); }
.compile:disabled { opacity: .5; cursor: progress; }
.compile .play { fill: currentColor; stroke: none; width: 15px; height: 15px; }

/* -------------------------------------------------------------- pagefoot */

.pagefoot {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 26px 24px 32px;
  border-top: 1px solid var(--edge-soft);
  font-size: 12.5px; color: var(--muted);
}
.pagefoot .right { margin-left: auto; }

/* ----------------------------------------------------------- toast / dlg */

.toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%);
  background: var(--chrome); color: var(--ink);
  border: 1px solid var(--edge);
  padding: 10px 16px; border-radius: 999px; font-size: 13px; z-index: 40;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  max-width: min(760px, 88vw);
}
.toast.err { border-color: var(--bad); color: #ffb4ae; border-radius: 10px; }

.dlg {
  border: 1px solid var(--edge); border-radius: 12px;
  padding: 0; width: min(780px, 92vw); max-height: 84vh;
  background: var(--card); color: var(--ink);
  box-shadow: 0 26px 74px rgba(0, 0, 0, .62);
}
.dlg::backdrop { background: rgba(0, 0, 0, .58); }
.dlg-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--edge);
}
.dlg-head h3 { margin: 0; font-size: 14.5px; font-weight: 600; }
.dlg-body { padding: 16px; overflow: auto; max-height: 70vh; }
.dlg-body pre {
  margin: 0 0 12px; padding: 11px;
  font: 12px/1.65 var(--mono); white-space: pre-wrap; word-break: break-word;
  background: var(--frame); border: 1px solid var(--edge-soft); border-radius: 8px;
}
.dlg-body h4 { margin: 18px 0 8px; font-size: 12.5px; color: var(--ink-2); }
.dlg-body table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dlg-body th, .dlg-body td {
  text-align: left; padding: 7px 8px; vertical-align: top;
  border-bottom: 1px solid var(--edge-soft);
}
.dlg-body th { color: var(--muted); font-weight: 500; width: 34%; }
.dlg-body td { font-family: var(--mono); }
.dlg-body .ex {
  display: block; width: 100%; text-align: left; margin-bottom: 7px;
  padding: 9px 11px; border: 1px solid var(--edge); border-radius: 8px;
  background: var(--chrome); color: var(--ink);
  font: inherit; font-size: 13px; cursor: pointer;
}
.dlg-body .ex:hover { border-color: var(--accent); }
.dlg-body .ex span { color: var(--muted); font-size: 12px; }

.field {
  display: grid; grid-template-columns: 140px 1fr;
  gap: 12px; align-items: center; margin-bottom: 12px;
}
.field label { font-size: 12.5px; color: var(--ink-2); }
.field select, .field input { width: 100%; }
.note { margin: 14px 0 0; font-size: 12px; color: var(--muted); line-height: 1.6; }

@media (prefers-reduced-motion: no-preference) {
  .compile, .link, .icon-btn, select { transition: background .12s ease, border-color .12s ease, color .12s ease; }
}