/* Appearance overrides are supplied by the screen editor. */
body {
  background-color: var(--editor-desk, var(--desk));
  font-size: calc(16px * var(--editor-text-scale, 1));
}

.ledger {
  --ink: var(--editor-paper-ink, #332f24);
  --ink-muted: var(--editor-paper-ink, #5c5743);
  background-color: var(--editor-paper, var(--paper));
}

.station-strip {
  background: var(--editor-metal, var(--olive-light));
  color: var(--editor-metal-ink, #25271d);
}

.control-bar { background-color: var(--editor-metal, var(--olive)); }
.cycle-note { color: var(--editor-metal-ink, #1f2118); }

#startButton {
  --button-face: var(--editor-start, #52643b);
  --button-hover: var(--editor-start-hover, var(--editor-start, #5e7046));
  color: var(--editor-start-ink, #fff3d3);
}

#stopButton:not(:disabled), #confirmAccept {
  --button-face: var(--editor-stop, #864236);
  --button-hover: var(--editor-stop-hover, var(--editor-stop, #985044));
  color: var(--editor-stop-ink, #fff3d3);
}

.intro-row h1 { color: var(--editor-desk-ink, var(--text)); }
.intro-row .eyebrow { color: var(--editor-desk-ink, #c6bf9f); }
footer { color: var(--editor-desk-ink, #bfb697); }
.money-value small { color: var(--editor-paper-ink, #63533f); }
.form-code { color: var(--editor-paper-ink, #605641); }

h1 { font-size: calc(32px * var(--editor-text-scale, 1)); }
.section-label { font-size: calc(18px * var(--editor-text-scale, 1)); }
.station-name { font-size: calc(16px * var(--editor-text-scale, 1)); }
.button { font-size: calc(15px * var(--editor-text-scale, 1)); }
.inventory-hud, .money-cell > p,
.phase-tag, .cycle-note, .activity-strip {
  font-size: calc(14px * var(--editor-text-scale, 1));
}

.phase-hint, .scene-caption, .money-detail,
.session-stats, .text-button { font-size: calc(13px * var(--editor-text-scale, 1)); }

body[data-editor-timer-side="left"] .timer-overlay {
  left: clamp(6px, 2vw, 26px);
  right: auto;
}

body[data-editor-timer-side="right"] .timer-overlay {
  left: auto;
  right: clamp(6px, 2vw, 26px);
}

.activity-strip[hidden], #screenEditor[hidden], #screenEditor [hidden], .edit-target[hidden] {
  display: none !important;
}

[data-edit-text].edit-deleted { display: none !important; }

body.is-editing [data-edit-text].edit-deleted {
  display: inline-block !important;
  padding: 2px 5px;
  border: 1px dashed #a96e56;
  background: #49352a;
  color: #f2c9ad;
  font: 13px/1.4 var(--jp);
}

[data-edit-text] {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.intro-row > div:first-child, .primary-controls,
.inventory-hud, .scene-caption { min-width: 0; }
.primary-controls { max-inline-size: 100%; }
.inventory-hud { max-inline-size: 100%; }
.activity-title[data-edit-text] { max-inline-size: 45%; white-space: pre-wrap; }

#editScreenButton {
  min-height: 38px;
  padding-inline: 9px;
  color: #f4edc5;
  white-space: nowrap;
  border: 1px solid #a89b70;
  background: #484e35;
  box-shadow: inset 0 2px #ffffff18, 2px 2px #1b1b14;
}

#editScreenButton:hover, #editScreenButton[aria-expanded="true"],
#editScreenButton[aria-pressed="true"] {
  color: #29291b;
  background: #d1c68d;
}

body.is-editing [data-edit-text] {
  cursor: text;
  outline: 1px dashed #f5d771;
  outline-offset: 2px;
  pointer-events: auto;
}

body.is-editing [data-editor-region] { cursor: pointer; }
body.is-editing .timer-overlay[data-editor-region] { pointer-events: auto; }

body.is-editing [data-edit-text]:hover,
body.is-editing [data-edit-text]:focus-visible,
body.is-editing [data-editor-region]:hover,
body.is-editing .edit-selected {
  outline: 2px solid #f2cf57;
  outline-offset: 3px;
}

body.is-editing .ledger [data-edit-text] {
  outline-color: #89522d;
}

button.edit-target {
  color: #211d0f;
  background: #f2d277;
  border: 1px solid #44361a;
  min-width: 24px;
  min-height: 24px;
  padding: 1px 5px;
  font-size: 13px;
}

.screen-editor {
  --editor-panel: #292a20;
  --editor-trim: #7d7654;
  --editor-panel-text: #f1e9ca;
  --editor-panel-muted: #c9c19d;
  --editor-focus: #eed77a;
  position: fixed;
  inset: 12px 12px 12px auto;
  z-index: 110;
  display: flex;
  flex-direction: column;
  width: min(324px, calc(100vw - 24px));
  min-width: 0;
  overflow: hidden;
  border: 3px double var(--editor-trim);
  color: var(--editor-panel-text);
  background: var(--editor-panel);
  box-shadow: 5px 6px #1c1a15cc, 0 0 0 1px #17150d;
  font: 15px/1.45 var(--jp);
  color-scheme: dark;
}

.screen-editor form {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.screen-editor :focus-visible {
  outline: 2px solid var(--editor-focus);
  outline-offset: 2px;
  scroll-margin-block: 8px;
}

.editor-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-height: 49px;
  padding: 8px 10px;
  border-bottom: 3px double #4c4c3c;
  background: #555941;
}

.editor-heading h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 400;
}

.editor-tabs, .editor-tab-list {
  display: flex;
  gap: 3px;
  padding: 6px 8px;
  border-bottom: 1px solid #5b593f;
  background: #35362a;
}

.screen-editor button {
  border: 1px solid #777251;
  background: #454736;
  color: #f7edc7;
  box-shadow: inset 0 1px #ffffff17, inset 0 -2px #17191150;
  min-height: 33px;
  padding: 3px 8px;
  font-size: 14px;
  line-height: 1.2;
}

.screen-editor button:hover:not(:disabled) { background: #595d43; }
.screen-editor button:disabled { color: #b0a78a; background: #36382c; }

.screen-editor .editor-delete {
  justify-self: start;
  border-color: #a4725a;
  background: #784637;
  color: #fff0d4;
}

.screen-editor .editor-delete:hover { background: #925340; }

.editor-tabs button, .editor-tab-list button { flex: 1; }
.screen-editor .editor-tabs button[aria-pressed="true"],
.screen-editor .editor-tabs button[aria-selected="true"],
.screen-editor .editor-tab-list button[aria-pressed="true"],
.screen-editor .editor-tab-list button[aria-selected="true"] {
  border-color: #a0925f;
  background: #d7cca1;
  color: #28251a;
}

.editor-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 9px 11px 13px;
  scrollbar-color: #787759 #323227;
  overscroll-behavior: contain;
}

.editor-section { display: grid; gap: 11px; }
.editor-section + .editor-section { margin-top: 10px; }
.editor-section h3, .editor-section p { margin: 0; }
.editor-section h3 { font-size: 15px; font-weight: 400; }

.editor-preview-note, .editor-status, .editor-hint {
  color: var(--editor-panel-muted);
  font-size: 13px;
}

.editor-preview-note {
  padding: 2px 5px;
  border: 1px solid #aaa26f;
  background: #333426;
  white-space: nowrap;
}

.editor-hint { line-height: 1.55; }

.editor-field {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  font-size: 14px;
}

.editor-field small { color: var(--editor-panel-muted); font-size: 12px; }
#editorScaleValue { float: right; color: #ead77c; font-variant-numeric: tabular-nums; }

.screen-editor :is(input[type="text"], input[type="number"], textarea, select) {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  border: 1px solid #888064;
  border-radius: 0;
  background: #e9dfb9;
  color: #272619;
  box-shadow: inset 1px 1px #645c4560;
  padding: 5px 7px;
  font: 15px/1.45 var(--jp);
  color-scheme: light;
}

.screen-editor textarea { min-height: 80px; max-height: 38vh; resize: vertical; }
.screen-editor :is(input[type="range"], input[type="checkbox"]) { accent-color: #ddc86c; }
.screen-editor input[type="range"] { width: 100%; margin: 2px 0; }
.screen-editor input[type="checkbox"] { width: 18px; height: 18px; margin: 0; }
.editor-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
}

.editor-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.editor-grid .editor-field { padding: 5px 7px; border: 1px solid #5d5b42; background: #323326; }

.screen-editor input[type="color"] {
  width: 100%;
  min-height: 35px;
  padding: 2px 3px;
  border: 1px solid #797257;
  border-radius: 0;
  background: #4b4b38;
  cursor: pointer;
}

.screen-editor input[type="color"]::-webkit-color-swatch { border: 1px solid #222015; }

.editor-status {
  min-height: 1.4em;
  margin: 0;
  overflow-wrap: anywhere;
}

.editor-status[data-error="true"] { color: #ffd0b6; }
.screen-editor > .editor-status, .screen-editor form > .editor-status { padding-inline: 10px; }

.editor-actions {
  display: grid;
  gap: 5px;
  padding: 7px 8px 8px;
  border-top: 3px double var(--editor-trim);
  background: #393a2e;
}

.editor-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.editor-actions .button-primary:not(:disabled), .editor-actions button[type="submit"]:not(:disabled) {
  border-color: #94935f;
  background: #5d6d42;
  color: #fff5cf;
}

.editor-actions .button-primary:hover:not(:disabled),
.editor-actions button[type="submit"]:hover:not(:disabled) { background: #6d7d4e; }
.editor-action-row .editor-reset { margin-inline-start: auto; }

@media (min-width: 980px) {
  body.is-editing { padding-inline-end: 342px; }
  body.is-editing .control-bar { flex-wrap: wrap; gap: 9px; }
  body.is-editing .control-bar .button-primary { min-width: 0; }
  body.is-editing .sound-button { order: 1; margin-left: auto; }
  body.is-editing .cycle-note { order: 2; width: 100%; margin: 0; text-align: left; }
  body.is-editing .timer-overlay { left: auto; right: clamp(6px, 2vw, 16px); max-width: 58%; }
  body.is-editing .timer { font-size: clamp(26px, 3.4vw, 44px); }
  body.is-editing[data-editor-timer-side="left"] .timer-overlay { left: clamp(6px, 2vw, 26px); right: auto; }
}

@media (max-width: 979px) {
  html:has(body.is-editing) { scroll-padding-block-end: calc(48dvh + 12px); }

  .screen-editor {
    inset: auto 6px 6px;
    width: auto;
    max-height: 48dvh;
  }

  .editor-heading { min-height: 38px; padding: 4px 8px; }
  .editor-heading h2 { font-size: 17px; }
  .editor-tabs, .editor-tab-list { padding-block: 4px; }
  .editor-actions { padding: 5px 8px; }
  body.is-editing::after { content: ''; display: block; height: 48dvh; }
}

@media (max-width: 470px) {
  .app-header .preview-label { display: none; }
  #editScreenButton { padding-inline: 5px; font-size: 12px; }
  #editScreenButton svg { display: none; }
  h1 { font-size: calc(27px * var(--editor-text-scale, 1)); }
  .phase-tag { font-size: calc(12px * var(--editor-text-scale, 1)); }
  .phase-hint { font-size: calc(10px * var(--editor-text-scale, 1)); }
  .scene-caption { font-size: calc(12px * var(--editor-text-scale, 1)); }
  .control-bar .button { font-size: calc(14px * var(--editor-text-scale, 1)); }
}