/* OBS Lower Thirds — control dock. Dark, compact, flat CSS (older CEF-safe). */

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

:root {
  --bg: #17181b;
  --panel: #1f2126;
  --panel2: #26282e;
  --line: #34363d;
  --text: #d8dade;
  --dim: #8b8f98;
  --blue: #4a7de0;
  --red: #c9403c;
  --green: #3d9950;
  --amber: #e0a63c;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 "Segoe UI", system-ui, sans-serif;
}
body { padding-bottom: 24px; }

button {
  font: inherit;
  color: var(--text);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
}
button:hover { border-color: #4a4d55; background: #2c2e35; }
button:active { transform: translateY(1px); }

input, select, textarea {
  font: inherit;
  color: var(--text);
  background: #131417;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  width: 100%;
  min-width: 0;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); }
input[type="checkbox"] { width: auto; accent-color: var(--blue); }
input[type="range"] { padding: 0; accent-color: var(--blue); background: transparent; border: none; }
input[type="color"] {
  padding: 2px; height: 28px; width: 44px; flex: 0 0 44px; cursor: pointer;
  background: #131417;
}

/* ------------------------------------------------------------ cockpit */

/* The cockpit is an ordinary part of the page again — it scrolls away with
   everything else, as it did before. Pinning it needed position:fixed or
   sticky, and both fought the browser embedded in OBS. The preview is small
   by default and the operator sizes it, which is a better answer to "I want
   to see it while I work" than taking the space away from them. */
#cockpit { background: var(--bg); }

/* a red rail down the edge of the whole dock whenever something is on air */
body.onair::before {
  content: "";
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--red);
  z-index: 60;
  pointer-events: none;
}

/* ------------------------------------------------------------- banner */

#offline-banner {
  display: none;
  background: var(--red);
  color: #fff;
  text-align: center;
  padding: 6px;
  font-weight: 600;
}
body.offline #offline-banner { display: block; }

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

#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
}
#topbar .title { font-size: 13px; letter-spacing: 2px; color: var(--dim); white-space: nowrap; }
#topbar .title b { color: var(--text); }
#mode-toggle {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 9px;
  border-radius: 20px;
  color: var(--blue);
  border-color: #33507f;
}
body.mode-simple #mode-toggle { color: var(--amber); border-color: #6a5426; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--panel2);
  border: 1px solid var(--line);
  color: var(--dim);
  white-space: nowrap;
}
.pill.ok { color: #7fd08c; border-color: #2f5a38; }
.pill.warn { color: #eec06a; border-color: #6a5426; }
.pill.err { color: #ee7a76; border-color: #6a2e2c; }
.pill.onair { color: #fff; background: var(--red); border-color: var(--red); }

/* heading over the quick-launch grid (ADVANCED only — see #simple-presets).
   No rule of its own: it is the first thing in the panel, so a top border
   would draw a second line right under the section's own summary. */
.quick-head {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--dim);
}

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

/* the artwork readout under an image element */
.shape-fit { margin: 2px 0 8px 0; display: flex; flex-direction: column; gap: 5px; }

/* the extra-logos list on an image element */
.logo-wrap { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 6px 0; }
.logo-row { display: flex; gap: 4px; align-items: center; }
.logo-row input { flex: 1; min-width: 0; }
.logo-add { display: flex; gap: 6px; flex-wrap: wrap; }

/* ------------------------------------------------------------ preview */

#preview-wrap { padding: 0 20px 0 10px; }
/* the sizer owns the width so the handles can live just outside the picture */
#preview-sizer {
  position: relative;
  /* --preview-w is a percentage of the dock width, set by dragging the edge
     and remembered per machine; the preview starts small on purpose */
  width: var(--preview-w, 58%);
  min-width: 120px;
}
#preview-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #101114;
}
body.dirty #preview-box { border-color: var(--amber); }
#preview-frame {
  width: 1920px;
  height: 1080px;
  border: 0;
  transform-origin: 0 0;
  pointer-events: none;
}
/* transparent hit areas over each bar, so clicking the picture opens that
   element's controls. The iframe itself stays pointer-events:none. */
#preview-hit { position: absolute; inset: 0; }
#preview-hit .hit {
  position: absolute;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
}
#preview-hit .hit:hover { border-color: rgba(122, 170, 255, 0.9); background: rgba(74, 125, 224, 0.14); }
#preview-hit .hit.sel { border-color: var(--blue); background: rgba(74, 125, 224, 0.1); }

#preview-tag {
  position: absolute;
  top: 6px; right: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: #9ad29a;
  background: rgba(10, 12, 10, 0.6);
  border: 1px solid rgba(80, 140, 80, 0.55);
  border-radius: 4px;
  padding: 3px 6px;
}
body.dirty #preview-tag { color: var(--amber); border-color: rgba(224, 166, 60, 0.6); }

#preview-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 0 2px 0;
  flex-wrap: wrap;
}
/* grab the right edge or the bottom-right corner of the preview to size it */
#preview-edge {
  position: absolute;
  top: 0; bottom: 0; right: -12px;
  width: 12px;
  cursor: ew-resize;
  z-index: 6;
  touch-action: none;
}
#preview-edge:hover, body.preview-resizing #preview-edge {
  background: linear-gradient(to right, transparent, rgba(74, 125, 224, 0.55));
}
#preview-corner {
  position: absolute;
  right: -12px; bottom: 0;
  width: 12px; height: 22px;
  cursor: nwse-resize;
  z-index: 7;
  touch-action: none;
  background:
    linear-gradient(135deg, transparent 54%, var(--dim) 54%, var(--dim) 64%, transparent 64%),
    linear-gradient(135deg, transparent 74%, var(--dim) 74%, var(--dim) 84%, transparent 84%);
}
#preview-corner:hover, body.preview-resizing #preview-corner {
  background:
    linear-gradient(135deg, transparent 54%, var(--blue) 54%, var(--blue) 64%, transparent 64%),
    linear-gradient(135deg, transparent 74%, var(--blue) 74%, var(--blue) 84%, transparent 84%);
}
/* while dragging, nothing else should take the pointer or select text */
body.preview-resizing { user-select: none; }
body.preview-resizing #preview-hit { pointer-events: none; }
.pv-label { font-size: 10px; color: var(--dim); letter-spacing: 1px; }
.pv-bg { padding: 2px 7px; font-size: 12px; }
.pv-bg.active { border-color: var(--blue); color: var(--blue); }
#preview-tools .spacer { flex: 1; }
#btn-preview-anim { font-size: 11px; padding: 3px 8px; color: var(--dim); }

/* ------------------------------------------------------------ actions */

#actions {
  display: flex;
  gap: 8px;
  padding: 8px 10px 0 10px;
}
#actions button {
  flex: 1;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1.5px;
  padding: 12px 4px;
  border-radius: 8px;
}
#btn-show { background: #234a2c; border-color: #2f6039; flex: 2; }
#btn-show:hover { background: #2a5834; }
#btn-hide { background: #3a3b41; }
/* edits are not on air until SHOW is pressed, so SHOW is what lights up */
body.dirty #btn-show {
  background: var(--green);
  border-color: #56c46e;
  box-shadow: 0 0 0 1px rgba(86, 196, 110, 0.35), 0 0 14px rgba(86, 196, 110, 0.4);
}

#actions-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px 10px 10px;
}
#dirty-note {
  font-size: 11px;
  color: var(--amber);
  flex: 1;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body:not(.dirty) #dirty-note { visibility: hidden; }
#btn-revert {
  font-size: 11px;
  color: var(--dim);
  background: transparent;
  border-color: transparent;
  padding: 3px 6px;
  visibility: hidden;
}
body.dirty #btn-revert { visibility: visible; }
#btn-revert:hover { color: var(--text); border-color: var(--line); }
#anim-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--dim);
  cursor: pointer;
  user-select: none;
}
body.anim-off #anim-chip { color: var(--amber); }

/* ----------------------------------------------------------- sections */

#sections { padding: 0 10px; }
details.sec {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--panel);
  overflow: hidden;
}
details.sec > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--dim);
  user-select: none;
}
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary::before { content: "▸ "; color: var(--dim); }
details.sec[open] > summary::before { content: "▾ "; }
details.sec[open] > summary { color: var(--text); border-bottom: 1px solid var(--line); }
.sec-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }

.row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
}
.row > label.lbl {
  flex: 0 0 118px;
  font-size: 12px;
  color: var(--dim);
  line-height: 1.25;
}
.row .ctl { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.row .val {
  flex: 0 0 44px;
  text-align: right;
  font-size: 11px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.row.hidden-row { display: none; }
.subhead {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #6d7078;
  margin-top: 6px;
  border-top: 1px dashed #2c2e34;
  padding-top: 8px;
}
.subhead:first-child { margin-top: 0; border-top: none; padding-top: 0; }

/* image pickers (logo, bar backgrounds) */
.pick-thumb {
  width: 40px; height: 28px;
  object-fit: contain;
  background: repeating-conic-gradient(#3c3c40 0% 25%, #2a2a2e 0% 50%) 0 0 / 12px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  flex: 0 0 40px;
}

/* presets */
.preset-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.preset-load {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preset-mini { flex: 0 0 auto; padding: 5px 8px; color: var(--dim); }
.preset-mini:hover { color: var(--text); }
.preset-save-row { display: flex; gap: 6px; }
.link-btn {
  background: none; border: none;
  color: var(--dim);
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
  padding: 2px 0;
  width: fit-content;
}
.link-btn:hover { color: var(--text); background: none; border: none; }

/* settings extras */
.kv {
  font-size: 11px;
  color: var(--dim);
  background: #131417;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kv code {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Consolas, monospace;
  font-size: 11px;
  color: #a8c7f0;
}
.kv button { padding: 2px 7px; font-size: 10px; flex: 0 0 auto; }
.hint { font-size: 11px; color: var(--dim); line-height: 1.5; }
.hint b { color: var(--text); }

#foot { padding: 8px 12px; font-size: 10px; color: #55585f; text-align: center; }

/* ----------------------------------------------------- element cards */

.row-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #6d7078;
  margin: 8px 0 2px 0;
}
.row-head:first-child { margin-top: 0; }

details.el-card {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel2);
  margin-bottom: 5px;
  overflow: hidden;
}
details.el-card[open] { border-color: #454852; }
.el-grip {
  flex: 0 0 auto;
  width: 14px;
  text-align: center;
  color: #5d616b;
  cursor: grab;
  font-size: 13px;
  line-height: 1;
  user-select: none;
  touch-action: none;
}
.el-grip:hover { color: var(--text); }
.el-card.dragging {
  opacity: 0.55;
  border-color: var(--blue);
}
/* carried off the list: releasing here abandons the move (so does Escape) */
.el-card.drag-void {
  opacity: 0.3;
  border-color: var(--dim);
  border-style: dashed;
}
/* where the card will land */
.drop-line {
  height: 0;
  border-top: 2px solid var(--blue);
  margin: -1px 0;
  border-radius: 2px;
}
.row-head.drop-target { color: var(--blue); }

.el-head {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  user-select: none;
}
.el-head::-webkit-details-marker { display: none; }
.el-en { flex: 0 0 auto; }
.el-name {
  flex: 1;
  font-size: 12px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-kind, .el-pos {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--dim);
  background: #131417;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 4px;
}
.el-body {
  padding: 8px 10px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-top: 1px solid var(--line);
}

.el-move { display: flex; flex-wrap: wrap; gap: 4px; }
.el-move .mini {
  padding: 3px 8px;
  font-size: 11px;
  color: var(--dim);
}
.el-move .mini:hover { color: var(--text); }
.el-move .mini.wide { padding: 3px 9px; }
.el-move .mini.danger:hover { color: #ee7a76; border-color: #6a2e2c; }

.el-add { display: flex; gap: 6px; margin-top: 8px; }
.el-add button { flex: 1; font-size: 12px; padding: 7px; }

/* tabs inside an element card: one group of properties at a time, so a card
   is a couple of hundred pixels instead of taller than the whole dock */
.el-tabs {
  display: flex;
  gap: 3px;
  margin: 2px 0 4px 0;
  flex-wrap: wrap;
}
.el-tab {
  flex: 1;
  min-width: 52px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 5px 4px;
  color: var(--dim);
  background: #131417;
}
.el-tab.on { color: var(--text); background: #2f3742; border-color: #45505f; }
.el-pane { display: none; flex-direction: column; gap: 7px; }
.el-pane.on { display: flex; }

.el-card.sel { border-color: var(--blue); }
.el-card.sel > .el-head { background: #223052; }

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

.grad-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 7px;
  background: #131417;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.grad-strip {
  position: relative;
  height: 26px;
  border-radius: 4px;
  border: 1px solid var(--line);
  cursor: copy;
}
.grad-handles { position: absolute; inset: 0; }
.grad-handle {
  position: absolute;
  top: -3px;
  width: 12px;
  height: 32px;
  margin-left: -6px;
  border: 2px solid #fff;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #000;
  cursor: grab;
}
.grad-handle:active { cursor: grabbing; }
.grad-stop-list { display: flex; flex-direction: column; gap: 4px; }
.grad-stop-row { display: flex; align-items: center; gap: 5px; }
.grad-stop-row input[type="color"] { flex: 0 0 34px; width: 34px; height: 24px; }
.grad-stop-row input[type="range"] { flex: 1; min-width: 0; }

/* ---------------------------------------------------------- snippets */

.snip-wrap { margin-top: -2px; }
.snip-list { display: flex; flex-wrap: wrap; gap: 4px; }
.snip-group { display: inline-flex; }
button.snip {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 20px;
  background: #24304a;
  border-color: #35507f;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
button.snip:hover { background: #2b3a5c; }
.snip-group button.snip { border-top-right-radius: 0; border-bottom-right-radius: 0; }
button.snip-x {
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 20px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: none;
  color: var(--dim);
}
button.snip-x:hover { color: #ee7a76; }
button.snip-save { background: transparent; border-style: dashed; color: var(--dim); }
button.snip-save:hover { color: var(--text); }

.preset-io-row { display: flex; gap: 6px; margin: 8px 0 4px 0; }
.preset-io-note { font-size: 11px; color: var(--dim); margin: 0 0 6px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.preset-io-note code { font-size: 11px; color: var(--text); word-break: break-all; }

.simple-block {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  margin-bottom: 7px;
  background: var(--panel2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.simple-block .row > label.lbl { flex: 0 0 86px; }

/* the field's name above it, an amber dot while the row differs from air */
.simple-head { display: flex; align-items: center; gap: 6px; min-height: 14px; }
.simple-name {
  flex: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: var(--dim);
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.simple-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); display: none; flex: none; }
.simple-dot.on { display: inline-block; }

/* a field that grows with its text */
textarea.simple-text {
  width: 100%;
  height: auto;
  min-height: 34px;
  padding: 6px 8px;
  font-size: 15px;
  line-height: 1.35;
  resize: none;
  overflow: hidden;
  unicode-bidi: plaintext;
}

/* saved texts as rows: full width, the loaded one marked, delete at the end */
.snip-lines { margin-top: 0; }
.snip-col { display: flex; flex-direction: column; gap: 3px; }
.snip-row { display: flex; align-items: stretch; min-width: 0; }
button.snip-line {
  flex: 1;
  min-width: 0;
  text-align: start;
  font-size: 12px;
  padding: 5px 8px 5px 10px;
  border-radius: 5px 0 0 5px;
  background: #1c1e23;
  border: 1px solid var(--line);
  border-right: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  unicode-bidi: plaintext;
}
button.snip-line-x {
  flex: none;
  font-size: 10px;
  padding: 0 8px;
  border-radius: 0 5px 5px 0;
  border: 1px solid var(--line);
  background: #1c1e23;
  color: var(--dim);
}
button.snip-line:hover, button.snip-line-x:hover { background: #24262c; }
button.snip-line-x:hover { color: #ee7a76; }
.snip-row.cued > button { border-color: var(--green); }
.snip-row.cued > button.snip-line { box-shadow: inset 3px 0 0 var(--green); }
button.snip-line.snip-save {
  border-radius: 5px;
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--dim);
}
button.snip-line.snip-save:hover { color: var(--text); background: transparent; }

/* ------------------------------------------------------- simple mode */

/* SIMPLE keeps the preview, SHOW/HIDE and the text boxes — nothing else.
   Every control that can load or edit a preset is hidden, because one tap
   replaces the whole pending look. Presets are handled in ADVANCED. */
body.mode-simple #sec-elements,
body.mode-simple #sec-layout,
body.mode-simple #sec-type,
body.mode-simple #sec-edges,
body.mode-simple #sec-anim,
body.mode-simple #sec-obs,
body.mode-simple #sec-presets,
body.mode-simple #simple-presets { display: none; }
body.mode-simple #sec-simple > summary { display: none; }
body:not(.mode-simple) #simple-edit { display: none; }

#quick-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.quick-preset {
  padding: 12px 8px;
  font-weight: 700;
  font-size: 12px;
  border-radius: 8px;
  background: #24304a;
  border-color: #35507f;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quick-preset:hover { background: #2b3a5c; }
#quick-empty { grid-column: 1 / -1; }

/* --------------------------------------------------------- font tools */

#font-tools { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.upfont-row { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.upfont-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.upfont-row button { padding: 3px 8px; font-size: 11px; flex: 0 0 auto; }