/* The hidden operator layer — ticket 11.
 *
 * Deliberately nothing like Messenger: mono type, hard edges, a colour the app
 * never uses. If any of this ever reaches a frame it should be instantly
 * obvious to everyone on the floor that the prop is in the wrong state, rather
 * than reading as a slightly odd Messenger screen that nobody catches until the
 * rushes. It is display:none at rest, so nothing here can paint during a take.
 *
 * Everything is inside .stage and therefore clipped to 375x647 (decision 66).
 */

.op {
  position: absolute;
  inset: 0;
  z-index: 200;
  display: none;
  background: #101418;
  color: #e6edf3;
  font: 500 12px/16px ui-monospace, "SF Mono", Menlo, monospace;
  -webkit-user-select: none;
  user-select: none;
}
.op.is-open {
  display: block;
}

.op-pane {
  display: none;
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 0 24px;
}
.op-pane.is-on {
  display: block;
}

/* ------------------------------------------------------------------ chrome */

.op-bar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  /* Clear of the real iOS status bar, which is still drawn over us (decision 19). */
  padding: 30px 10px 10px;
  background: #0b0e11;
  border-bottom: 1px solid #263038;
}
.op-title {
  font: 700 13px/16px ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.12em;
  color: #7ee2a8;
}
.op-h {
  padding: 14px 10px 6px;
  font: 700 10px/13px ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.14em;
  color: #7d8b96;
}

.op-block {
  padding: 0 10px;
}
.op-stat {
  padding: 2px 0;
}
.op-dim {
  color: #7d8b96;
  padding: 2px 10px;
}
.op-block .op-dim,
.op-next .op-dim {
  padding-left: 0;
  padding-right: 0;
}
.op-bad {
  color: #ff6b6b;
  font-weight: 700;
}

/* ------------------------------------------------------------------ buttons */

/* 44 tall throughout: the operator is tapping these in the dark, fast, between
 * takes, and a missed tap costs the floor more than the pixels cost us. */
.op-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid #33414c;
  border-radius: 6px;
  background: #1a2129;
  color: #e6edf3;
  font: 700 12px/16px ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.06em;
  text-align: center;
}
.op-btn:active {
  background: #263140;
}
.op-btn--close {
  min-height: 34px;
  padding: 0 14px;
}
.op-btn--wide {
  margin-top: 10px;
}
.op-btn--go {
  background: #1d4f33;
  border-color: #2f7a4f;
}
.op-btn--bad {
  background: #4d1d1d;
  border-color: #7a2f2f;
}
.op-btns {
  display: flex;
  gap: 8px;
  padding: 10px 0 0;
}
.op-btns .op-btn {
  flex: 1;
}
.op-pane--log .op-btns,
.op-pane--paste .op-btns {
  padding: 10px;
}

/* --------------------------------------------------------------- next beat */

.op-next {
  margin: 0 10px;
  padding: 10px;
  border: 1px solid #33414c;
  border-radius: 8px;
  background: #161d24;
}
.op-next-name {
  font: 700 15px/20px ui-monospace, "SF Mono", Menlo, monospace;
}
.op-next-how {
  color: #9fb0bd;
  padding-top: 2px;
}
.op-next-line {
  color: #64737f;
  padding-top: 2px;
}

/* A cue beat is the only thing in the scene that waits on a person. It gets a
 * colour nothing else uses, because the operator glancing at this screen has to
 * know at once that the next beat is theirs and nothing will fire it for them
 * (decisions 118, 119). */
.op-next.is-cue {
  border-color: #ffb020;
  background: #2a2110;
}
.op-next.is-cue .op-next-name,
.op-next.is-cue .op-next-how {
  color: #ffc85c;
}

/* ------------------------------------------------------- scenes and entries */

.op-list {
  padding: 0 10px;
}
.op-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 6px 10px;
  margin-bottom: 6px;
  border: 1px solid #33414c;
  border-radius: 6px;
  background: #161d24;
}
.op-row:active {
  background: #263140;
}
.op-row.is-armed {
  border-color: #7ee2a8;
  background: #14261d;
}
.op-row-label {
  flex: 1;
}
/* Entry points are indented under the scene they resume — the operator is
 * picking a place inside a scene, not another scene (model §5). */
.op-row-label.is-entry {
  padding-left: 12px;
  color: #9fb0bd;
}
.op-row-clock {
  color: #ffc85c;
  font-weight: 700;
}

/* ------------------------------------------------------------- text fields */

/* The one place in this app where iOS selection and the callout menu are ALLOWED
 * — the whole point of the pane is a long-press Paste, which app.css's global
 * suppression would otherwise kill. */
.op-text {
  display: block;
  width: calc(100% - 20px);
  height: 220px;
  margin: 10px;
  padding: 8px;
  border: 1px solid #33414c;
  border-radius: 6px;
  background: #0b0e11;
  color: #e6edf3;
  font: 400 11px/15px ui-monospace, "SF Mono", Menlo, monospace;
  resize: none;
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
.op-text--edit {
  height: 200px;
}

.op-err {
  display: none;
  margin: 0 10px;
  padding: 8px 10px;
  border: 1px solid #7a2f2f;
  border-radius: 6px;
  background: #2a1414;
  color: #ff9a9a;
  white-space: pre-wrap;
}
.op-err.is-on {
  display: block;
}

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

.op-toast {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 14px;
  z-index: 4;
  padding: 12px;
  border-radius: 8px;
  background: #1d4f33;
  color: #d6ffe6;
  text-align: center;
  opacity: 0;
  transition: opacity 140ms linear;
  pointer-events: none;
}
.op-toast.is-on {
  opacity: 1;
}

/* -------------------------------------------------------------- fail loud */

/* Model §2: never a blank thread, never a half-loaded one. Above the operator
 * panel, because a parse error can happen while the panel is open — that is
 * exactly when it happens, five seconds after a paste. */
.op-fatal {
  position: absolute;
  inset: 0;
  z-index: 300;
  overflow-y: auto;
  padding: 40px 16px 24px;
  background: #000;
  color: #fff;
  font: 500 13px/19px ui-monospace, "SF Mono", Menlo, monospace;
}
.op-fatal b {
  display: block;
  font: 700 16px/22px ui-monospace, "SF Mono", Menlo, monospace;
  color: #ff6b6b;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}
.op-fatal-text {
  padding: 8px 10px;
  margin-bottom: 12px;
  border-left: 3px solid #ff6b6b;
  background: #1a0e0e;
  white-space: pre-wrap;
  word-break: break-word;
}
.op-fatal-msg {
  color: #ffb8b8;
  margin-bottom: 8px;
  white-space: pre-wrap;
}
.op-fatal .op-btns {
  flex-direction: column;
  padding-top: 16px;
}