/* What floats over the app: the Settings window, popovers, toasts, the login. */
/* ---- a window over the app (Settings): dims the app; its title, a close button, its groups ------------------ */
.modal-back {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--black-50);
  animation: fade var(--t-state) ease-out;
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
.modal {
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  max-height: min(860px, calc(100vh - 48px));
  background: var(--pane);
  border: 1px solid var(--pop-border);
  border-radius: 12px;
  box-shadow: var(--shadow-float);
  outline: none;
  animation: pop var(--t-state) ease-out;
}
.modal-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 14px 22px;
  border-bottom: 1px solid var(--edge);
}
.modal-title {
  font-size: var(--fs-title);
  font-weight: var(--fw-title);
}
.modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 22px;
}
/* a group, wide: its title (and Reset) at the left of its rows, so the rows get the window's width */
.wide-group {
  display: grid;
  grid-template-columns: 150px 1fr;
  column-gap: 18px;
  align-items: start;
}
.wg-title {
  padding-top: 10px;
  color: var(--label);
  font-weight: var(--fw-title);
}
/* its sliders on one line: label, track, value (the tracks line up: the labels and values have fixed widths) */
.wide-group .row.slider:not(.steps) {
  display: grid;
  grid-template-columns: 180px 1fr 56px;
  column-gap: 14px;
  align-items: center;
  padding-top: 6px;
  padding-bottom: 6px;
}
.wide-group .row.slider:not(.steps) > .row-line {
  display: contents;
}
.wide-group .row.slider:not(.steps) .row-label {
  grid-column: 1;
  grid-row: 1;
}
.wide-group .row.slider:not(.steps) .slider-track {
  grid-column: 2;
  grid-row: 1;
}
.wide-group .row.slider:not(.steps) .row-value {
  grid-column: 3;
  grid-row: 1;
  max-width: none;
}
/* a key: its provider (and what it is used for) at the left, the field filling the rest of the row */
/* a key: masked like a password without being one (settings.js: MASKED_TEXT) */
.secret {
  -webkit-text-security: disc;
}
.row.field-row.key-row {
  padding: 0 0 0 12px;
  gap: 14px;
  cursor: text;
}
.key-row .row-label {
  flex: none;
  width: 168px;
}
.wg-note {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  color: var(--dim);
}
.modal-sep {
  flex: none;
  height: 1px;
  margin: 4px -22px;
  background: var(--edge);
} /* edge to edge, as the panel's */
.modal-section {
  margin: 0;
  font-size: var(--fs-title);
  font-weight: var(--fw-title);
}
.modal-foot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 22px;
  border-top: 1px solid var(--edge);
}
.row-sub {
  display: block;
  margin-top: 2px;
  color: var(--dim);
} /* a row's label's second line: what it is for */
.row.toggle:has(.row-sub) {
  padding-top: 8px;
  padding-bottom: 8px;
}
.choice-row {
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  cursor: pointer;
}
/* the whole row opens its choice: the button's press area covers the row; the row shows the hover */
.choice-row .picker.compact {
  position: static;
}
.choice-row .picker.compact::before {
  content: "";
  position: absolute;
  inset: 0;
}
.choice-row .picker.compact:is(:hover, .is-hover):not(:disabled),
.choice-row .picker.compact.open {
  background: none;
}
/* the row is the control: keyboard focus outlines the row (inside the box, as a choice's row does), not the name and
   arrows within it, which would read as a second control in the row */
.choice-row .picker.compact:is(:focus-visible, .is-focus) {
  outline: none;
}
.choice-row:has(.picker.compact:is(:focus-visible, .is-focus)) {
  outline: 2px solid var(--accent-hover);
  outline-offset: -2px;
}
/* a row that is pressed as a whole (a switch's, a choice's): the row tints, as a list's rows do */
label.row:is(:hover, .is-hover):not(:has(input:disabled)),
.choice-row:is(:hover, .is-hover),
.choice-row:has(.picker.compact.open) {
  background: var(--row-hover);
}

/* ---- popover, toast ------------------------------------------------------------------------- */
.popover {
  position: fixed;
  z-index: 60;
  width: max-content;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--pop);
  border: 1px solid var(--pop-border);
  border-radius: 10px;
  box-shadow: var(--shadow-float);
  animation: pop var(--t-state) ease-out;
}
.popover.from-top {
  transform-origin: var(--arrow-x) 0;
}
.popover.from-bottom {
  transform-origin: var(--arrow-x) 100%;
}
@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
}
.popover p {
  font-size: var(--fs-text);
  font-weight: var(--fw-text);
  line-height: 1.45;
}
.popover .buttons .btn {
  min-width: 90px;
}
.popover-arrow {
  position: absolute;
  left: calc(var(--arrow-x) - 7px);
  width: 14px;
  height: 14px;
  background: var(--pop);
  border: 1px solid var(--pop-border);
  transform: rotate(45deg);
}
.from-top .popover-arrow {
  top: -8px;
  border-right: 0;
  border-bottom: 0;
}
.from-bottom .popover-arrow {
  bottom: -8px;
  border-left: 0;
  border-top: 0;
}

/* an edit's region: one row, its size (or what is edited without one) and its buttons */
.row.area-row {
  gap: 6px;
  padding-right: 8px;
}
.area-row .area-size {
  max-width: none;
}
.area-row .placeholder {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.area-row .btn.small {
  height: 24px;
  padding: 0 9px;
}
.area-row .btn.small.square {
  width: 24px;
  padding: 0;
}
/* the prompt, in place: grows with its text (PromptField: up to 260 px, then scrolls) */
.prompt-wrap {
  position: relative;
}
.prompt-busy {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--dim);
  font-weight: var(--fw-text);
  pointer-events: none;
} /* faint, centered: the field waits */
.prompt-field {
  display: block;
  width: 100%;
  min-height: 60px;
  resize: none;
  overflow-y: auto;
  font-size: var(--fs-text);
  line-height: 1.5;
  padding: 8px 12px;
}
/* a text field that is a row of its group (the row is its box; focused, the group shows it): e.g. the seed */
.row.field-row {
  padding: 0;
}
:is(input[type="text"], input[type="password"]).row-field {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  outline: none;
}
.rows:has(.row-field:is(:focus, .is-focus):not(:read-only)) {
  border-color: var(--accent-hover);
}
input[type="text"].row-field:read-only {
  opacity: 0.4;
  cursor: default;
} /* not typed into (the seed while Randomize is on): the disabled look */
.seed {
  font-variant-numeric: tabular-nums;
}

.toast {
  position: fixed;
  top: 54px;
  left: 50%;
  z-index: 70;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 14px;
  background: var(--pop);
  border: 1px solid var(--pop-border);
  border-radius: 10px;
  box-shadow: var(--shadow-float);
}
.toast.error span {
  color: var(--error);
}

/* ---- empty window, login ------------------------------------------------------------------------------ */
.login {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 16px;
}
.login form {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  background: var(--pane);
  border: 1px solid var(--login-border);
  border-radius: 12px;
}
.login label {
  color: var(--label);
  font-weight: var(--fw-text);
}
.login input {
  height: 34px;
}
.login button {
  height: 34px;
  margin-top: 6px;
  border: 0;
  border-radius: var(--r);
  background: var(--accent);
  color: var(--white);
  font-weight: var(--fw-button);
  cursor: pointer;
}
.login button:disabled {
  opacity: 0.5;
}
.crash {
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 900px) {
  .app {
    flex-direction: column-reverse;
  }
  .left {
    width: 100%;
    height: 50vh;
    border-right: 0;
    border-top: 1px solid var(--edge);
  }
  .stage {
    min-height: 50vh;
  }
}
/* a status word in a line of text */
.status {
  font-weight: var(--fw-text);
}
.status.done {
  color: var(--ok);
}
.status.flagged {
  color: var(--warn);
}
.status.error {
  color: var(--error);
}
.status.running,
.status.queued,
.status.blending {
  color: var(--running-text);
}
.status.pending {
  color: var(--label);
}