/* Editor chrome. Deliberately NOT the VCR OSD look - this is a tool you'll
   spend hours in, and a monospace display face at form-field sizes is a
   readability tax with no payoff. */

@font-face {
  font-family: "VCR OSD Mono";
  src: url("/static/fonts/vcr-osd-mono.woff2") format("woff2");
  font-display: swap;
}

:root {
  --bg:      #14171d;
  --panel:   #1c2029;
  --panel-2: #232833;
  --line:    #313847;
  --ink:     #e4e6ea;
  --dim:     #8d94a3;
  --accent:  #4d82f3;
  --good:    #43a860;
  --warn:    #d99a2b;
  --bad:     #d4574a;

  --blue:   #3468DE;
  --orange: #E07A1B;
  --green:  #2FA047;
  --yellow: #CBB018;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------------- header ---------------- */

header {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 16px;
  height: 52px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex: none;
}

h1 {
  font: 19px/1 "VCR OSD Mono", monospace;
  letter-spacing: 1px;
  display: flex;
  align-items: baseline;
  gap: 9px;
}
h1 span {
  font: 11px/1 system-ui, sans-serif;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--dim);
}

nav { display: flex; gap: 2px; }
nav button {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--dim);
  padding: 7px 13px;
  font: inherit;
  cursor: pointer;
}
nav button:hover { color: var(--ink); }
nav button.on { color: var(--ink); border-bottom-color: var(--accent); }

header .right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

#dirty { font-size: 12px; color: var(--warn); min-width: 96px; text-align: right; }
#dirty.saved { color: var(--dim); }

/* ---------------- buttons + fields ---------------- */

button {
  background: var(--panel-2);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 6px 13px;
  border-radius: 3px;
  font: inherit;
  cursor: pointer;
}
button:hover { border-color: #4a5468; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover { filter: brightness(1.12); }
button.danger { color: var(--bad); border-color: #4a3230; }
button.danger:hover { background: var(--bad); color: #fff; border-color: var(--bad); }
button:disabled { opacity: .45; cursor: default; }

input[type=text], input[type=search], input[type=number], textarea, select {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 7px 9px;
  border-radius: 3px;
  font: inherit;
  width: 100%;
}
textarea { resize: vertical; line-height: 1.45; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.hint { color: var(--dim); font-size: 12px; font-style: normal; }
.pad { padding: 0 0 14px; }
.hidden { display: none !important; }
.linkish { color: var(--accent); cursor: pointer; text-decoration: underline; }

/* ---------------- layout ---------------- */

.tab { display: none; flex: 1; min-height: 0; }
.tab.on { display: flex; }

aside {
  width: 330px;
  flex: none;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
}
.side-top { display: flex; gap: 7px; padding: 11px; border-bottom: 1px solid var(--line); }

#qlist { list-style: none; overflow-y: auto; flex: 1; }
#qlist li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border-bottom: 1px solid #232833;
  cursor: pointer;
  font-size: 13px;
}
#qlist li:hover { background: var(--panel-2); }
#qlist li.on { background: #2a3550; }
#qlist .n { color: var(--dim); font-size: 11px; min-width: 25px; }
#qlist .t {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#qlist .t.blank { color: var(--dim); font-style: italic; }
#qlist .chip { width: 11px; height: 11px; border-radius: 2px; flex: none; }
#qlist .bad { color: var(--bad); font-weight: 700; }

#qstats {
  padding: 9px 11px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--dim);
  line-height: 1.7;
}
#qstats b { color: var(--ink); font-weight: 600; }
#qstats .lop { color: var(--warn); }

section { flex: 1; overflow-y: auto; padding: 22px 26px; min-height: 0; }
section.wide { width: 100%; }
section.narrow > * { max-width: 720px; }

.empty { color: var(--dim); padding-top: 56px; text-align: center; }
.empty p:first-child { color: var(--ink); margin-bottom: 5px; }

/* ---------------- question form ---------------- */

#qform { max-width: 720px; display: flex; flex-direction: column; gap: 17px; }
#qform .row { display: flex; align-items: center; gap: 13px; }
#qform .row > span { width: 74px; flex: none; color: var(--dim); font-size: 12px; }
#qform .row input, #qform .row select { flex: 1; }
#qform .block > span { display: block; margin-bottom: 6px; color: var(--dim); font-size: 12px; }
.counter { display: block; text-align: right; font-size: 11px; color: var(--dim); margin-top: 3px; }
.counter.over { color: var(--warn); }

.ans { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.ans .swatch {
  width: 62px;
  flex: none;
  font-size: 10px;
  letter-spacing: .6px;
  text-transform: uppercase;
  text-align: center;
  padding: 5px 0;
  border-radius: 3px;
  color: #10131a;
  font-weight: 700;
}
.ans .swatch.blue   { background: var(--blue);   color: #eef2ff; }
.ans .swatch.green  { background: var(--green);  color: #eefaf1; }
.ans .swatch.orange { background: var(--orange); }
.ans .swatch.yellow { background: var(--yellow); }
.ans input[type=text] { flex: 1; }
.ans .mark {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--dim);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.ans input[type=radio] { accent-color: var(--good); width: 15px; height: 15px; }
.ans.correct input[type=text] { border-color: var(--good); }
.ans.correct .mark { color: var(--good); }

#qimagePreview img { max-width: 240px; border: 1px solid var(--line); border-radius: 3px; }
.actions { display: flex; gap: 9px; padding-top: 6px; border-top: 1px solid var(--line); }
.actions button:last-child { margin-left: auto; }

/* ---------------- media ---------------- */

#drop {
  border: 2px dashed var(--line);
  border-radius: 5px;
  padding: 26px;
  text-align: center;
  margin-bottom: 16px;
}
#drop.over { border-color: var(--accent); background: #1b2436; }
#drop p + p { margin-top: 6px; }

#mediaStats { font-size: 12px; color: var(--dim); margin-bottom: 13px; }
#mediaStats .warn { color: var(--warn); }

#mediaGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 13px;
}
.mcard { background: var(--panel); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.mcard .thumb {
  height: 122px;
  background: #0c0e12;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.mcard .thumb img, .mcard .thumb video { width: 100%; height: 100%; object-fit: cover; }
.mcard .meta { padding: 8px 9px; font-size: 12px; }
.mcard .nm {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 3px;
}
.mcard .sz { color: var(--dim); font-size: 11px; }
.mcard .sz.warn { color: var(--warn); }
.mcard .bar { display: flex; gap: 4px; padding: 0 9px 9px; }
.mcard .bar button { padding: 3px 8px; font-size: 12px; line-height: 1.3; }
.mcard .bar .del { margin-left: auto; }
.mcard .tag {
  position: relative;
  float: right;
  font-size: 10px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ---------------- sounds ---------------- */

.slot {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.slot .nm { width: 96px; flex: none; font-weight: 600; }
.slot .what { flex: 1; color: var(--dim); font-size: 12px; }
.slot .what.has { color: var(--ink); }

/* ---------------- settings ---------------- */

#cfgForm { display: flex; flex-direction: column; gap: 13px; }
.cfg { display: flex; align-items: center; gap: 14px; }
.cfg label { width: 210px; flex: none; font-size: 13px; }
.cfg .note { color: var(--dim); font-size: 12px; flex: 1; }
.cfg input[type=number], .cfg input[type=text] { width: 116px; flex: none; }
.cfg input[type=range] { width: 190px; flex: none; accent-color: var(--accent); }
.cfg output { font-variant-numeric: tabular-nums; color: var(--dim); width: 42px; }
.cfg input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); }

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

#toast {
  position: fixed;
  right: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  z-index: 50;
}
#toast div {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--good);
  padding: 9px 15px;
  border-radius: 3px;
  font-size: 13px;
  box-shadow: 0 6px 20px #0008;
}
#toast div.bad { border-left-color: var(--bad); }

/* ---------------- streak rewards ---------------- */

#rwDrop {
  border: 2px dashed var(--line);
  border-radius: 5px;
  padding: 18px;
  text-align: center;
  margin: 16px 0;
}
#rwDrop.over { border-color: var(--accent); background: #1b2436; }
#rwDrop p + p { margin-top: 5px; }

.rw-split { display: flex; gap: 20px; align-items: flex-start; }
#rwStage { width: 340px; flex: none; position: sticky; top: 0; }

.reward-preview {
  position: relative;
  height: 300px;
  background: #0b0d12;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 7px;
  font-family: "VCR OSD Mono", monospace;
  text-transform: uppercase;
}
.rw-idle {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  font: 12px system-ui, sans-serif;
  text-transform: none;
}
.reward-preview .reward.on ~ .rw-idle { display: none; }

#rwTiers { flex: 1; display: flex; flex-direction: column; gap: 9px; min-width: 0; }

.tier {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--tint, var(--line));
  border-radius: 4px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 9px 12px;
  align-items: center;
}
.tier .lvl {
  grid-row: span 3;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.tier .lvl input {
  width: 62px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  padding: 5px 4px;
}
.tier .lvl em {
  font-size: 10px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-style: normal;
}
.tier .pick { display: flex; align-items: center; gap: 7px; min-width: 0; }
.tier .pick > span { font-size: 11px; color: var(--dim); width: 40px; flex: none; }
.tier .pick select { flex: 1; min-width: 0; }
.tier .pick button { padding: 4px 9px; font-size: 12px; }
.tier .thumb {
  width: 30px; height: 30px; flex: none;
  object-fit: contain;
  background: #0b0d12;
  border: 1px solid var(--line);
  border-radius: 3px;
  image-rendering: pixelated;
}
.tier .txt { width: 100%; }

/* ---------------- crop modal ---------------- */

.modal {
  position: fixed;
  inset: 0;
  background: #000b;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.modal.on { display: flex; }

.sheet {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  width: min(760px, 94vw);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px #000a;
}
.sheet-head, .sheet-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}
.sheet-head { border-bottom: 1px solid var(--line); }
.sheet-foot { border-top: 1px solid var(--line); }
.sheet-head .hint { flex: 1; }
button.ghost { background: none; border-color: transparent; color: var(--dim); }
button.ghost:hover { color: var(--ink); border-color: var(--line); }
#cropClose { font-size: 19px; line-height: 1; padding: 2px 9px; }

.crop-body { padding: 16px; overflow-y: auto; }

.crop-frame {
  width: 100%;
  max-width: 640px;
  margin: 0 auto 14px;
  background:
    repeating-conic-gradient(#1a1d24 0% 25%, #14171d 0% 50%) 50% / 22px 22px;
  border: 1px solid var(--line);
  line-height: 0;
}
#cropCanvas {
  width: 100%;
  height: auto;
  display: block;
  cursor: grab;
  touch-action: none;
}
#cropCanvas.grabbing { cursor: grabbing; }

.crop-controls { display: flex; align-items: center; gap: 12px; }
.crop-controls label { font-size: 12px; color: var(--dim); }
.crop-controls input[type=range] { flex: 1; accent-color: var(--accent); }
#cropNote { margin-top: 9px; }

.counter.warn { color: var(--warn); }

/* ---------------- touch / narrow layout ----------------

   Driven by a .touch class that editor.js puts on <html>, NOT by a width media
   query. The first attempt used max-width:1024px, which never fired on the
   device it was written for: iPad in landscape is 1080-1366 CSS pixels, so it
   kept the fixed-height desktop shell and the sidebar bottom stayed
   unreachable.

   The desktop layout is a 100vh flex shell with its own inner scroll panes.
   iOS mishandles nested scrollers inside that, so here we collapse to exactly
   ONE scroll container - the document - and let everything sit in page flow.
   Less elegant with 200 questions, but guaranteed to work; the filter box is
   how you navigate at that point.

   There's a Layout toggle in the header if the detection gets it wrong. */

html.touch, html.touch body {
  height: auto;
  min-height: 100dvh;
  overflow: visible;
}

html.touch header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: auto;
  flex-wrap: wrap;
  padding: 8px 12px;
  gap: 8px 14px;
}
html.touch header .right { width: 100%; justify-content: flex-end; }
html.touch nav { flex-wrap: wrap; }

html.touch .tab { min-height: 0; }
html.touch .tab.on { flex-direction: column; }

html.touch aside {
  width: auto;
  border-right: 0;
  border-bottom: 1px solid var(--line);
}

/* stats first, so the count and answer ratio need no scrolling at all -
   that was the actual complaint */
html.touch #qstats {
  order: -1;
  border-top: 0;
  border-bottom: 1px solid var(--line);
}

/* no inner scroller: the whole list flows and the page scrolls */
html.touch #qlist {
  max-height: none;
  overflow: visible;
  flex: none;
}

html.touch section { overflow: visible; padding: 16px; }
html.touch #qform { max-width: none; }

html.touch .rw-split { flex-direction: column; }
html.touch #rwStage { width: 100%; position: static; }
html.touch .reward-preview { height: 250px; }

html.touch .tier { grid-template-columns: 64px 1fr; }
html.touch .tier .pick { flex-wrap: wrap; }

html.touch .cfg { flex-wrap: wrap; }
html.touch .cfg label { width: 100%; }
html.touch .cfg .note { flex-basis: 100%; }

html.touch .sheet { max-height: none; }
html.touch .crop-body { overflow: visible; }

/* iOS zooms the page when a field under 16px takes focus */
html.touch input[type=text],
html.touch input[type=search],
html.touch input[type=number],
html.touch textarea,
html.touch select { font-size: 16px; }

html.touch button, html.touch .linkish { min-height: 36px; }

#layoutBtn { font-size: 11px; padding: 4px 9px; }

/* keep the desktop panes scrollable on any touch device that slips through */
#qlist, section, .crop-body { -webkit-overflow-scrolling: touch; }

/* ---------------- high score admin ---------------- */

.block-head {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--dim);
  font-weight: 600;
  margin: 26px 0 10px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

#scoreRows { list-style: none; margin-bottom: 14px; max-width: 420px; }
#scoreRows li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  margin-bottom: 5px;
  background: var(--panel);
  font-size: 13px;
}
#scoreRows .rk { color: var(--dim); width: 2.2em; font-size: 12px; }
#scoreRows .nm { font-family: "VCR OSD Mono", monospace; letter-spacing: 3px; font-size: 16px; }
#scoreRows .sc { margin-left: auto; font-variant-numeric: tabular-nums; }
#scoreRows button { padding: 2px 8px; font-size: 12px; line-height: 1.3; }
#scoreRows .none { color: var(--dim); justify-content: center; font-style: italic; }

.score-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------------- collapsible question list (touch only) ----------------
   In the touch layout the list sits in page flow above the edit form, so with
   200 questions you scrolled forever to reach the fields. Collapse it by
   default and fold it away as soon as a question is picked. */

.list-toggle { display: none; }

html.touch .list-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  padding: 11px 12px;
  font-size: 13px;
  color: var(--ink);
  background: var(--panel-2);
}
html.touch .list-toggle .chev { color: var(--dim); font-size: 11px; }
html.touch aside.collapsed #qlist { display: none; }

/* ---------------- reward art pool ---------------- */

#rwPool {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 10px;
  margin-bottom: 22px;
}
.pool {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px;
  text-align: center;
  position: relative;
}
.pool img {
  width: 100%;
  height: 62px;
  object-fit: contain;
  image-rendering: pixelated;
  background: #0b0d12;
  border-radius: 3px;
}
.pool .nm {
  font-size: 11px;
  color: var(--dim);
  margin: 5px 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pool .mark { font-size: 11px; justify-content: center; }
.pool.off { border-color: var(--warn); }
.pool.off img { opacity: 0.4; }
.pool.off .nm::after { content: " - standalone"; color: var(--warn); }
.pool [data-del] {
  position: absolute;
  top: 3px;
  right: 3px;
  padding: 1px 7px;
  font-size: 13px;
  line-height: 1.2;
}