/* Filter bars, the email search, and the provisioning checklists. */

/* Inline, wrapping, label above control, submit at the end. */
.console-filters, .console-search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--console-space-3) 14px;
  margin: 0 0 18px;
  padding: 14px var(--console-space-4);
  background: var(--console-surface);
  border: 1px solid var(--console-rule-2);
  border-radius: var(--console-radius);
}

/* The views emit label + control as siblings, so the pairing is done by the
   label's own box rather than by a wrapper per field. */
.console-filters label, .console-search label {
  align-self: flex-end;
  font-size: var(--console-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--console-ink-3);
  margin-right: calc(-1 * 14px + var(--console-space-1));
  padding-bottom: 22px;
}
.console-filters label + select,
.console-filters label + input,
.console-search label + input { margin-left: 0; }

/* Nine columns of filter never become nine columns of chrome: the controls sit
   on one wrapping line and each is only as wide as its values. */
.console-filters select, .console-search input[type="search"] { min-width: 13rem; }
.console-filters input[type="search"] { min-width: 15rem; }
.console-filters input[type="date"] { min-width: 9rem; }

/* A checkbox filter reads as a sentence, so its label goes beside it. */
.console-filters input[type="checkbox"] {
  align-self: center;
  margin: 0 0 0 var(--console-space-2);
}
.console-filters input[type="checkbox"] + label {
  align-self: center;
  padding-bottom: 0;
  margin-right: 0;
  font-size: var(--console-text-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--console-ink-2);
}

.console-filters input[type="submit"], .console-search input[type="submit"] { align-self: flex-end; font-weight: 600; }

/* ============================================================
   The provisioning checklists. The hints ARE the checklist, so
   they get measure and a clear step down from label to control
   to prose — the field is not the interesting part, the
   sentence under it is.
   ============================================================ */
.console-form {
  max-width: 760px;
  margin-top: 18px;
  padding: 4px var(--console-space-5) 20px;
  background: var(--console-surface);
  border: 1px solid var(--console-rule-2);
  border-radius: var(--console-radius);
}
.console-form fieldset { border: 0; border-top: 1px solid var(--console-rule-2); margin: 0; padding: 20px 0 4px; }
.console-form fieldset:first-of-type { border-top: 0; }
/* The two halves of a Relay's request, one shown at a time — #72. A fieldset so
   the hidden half is disabled and never submitted, without a fieldset's rule. */
.console-form fieldset.console-request-half { border: 0; padding: 0; }
.console-form fieldset.console-request-half[hidden] { display: none; }
.console-form legend {
  font-size: var(--console-text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--console-ink);
  padding: 0 10px 0 0;
}

.console-form .console-field { margin: 0 0 22px; }
.console-form .console-field:last-of-type { margin-bottom: 20px; }
.console-form label { display: block; font-weight: 600; margin-bottom: 5px; }
.console-form input[type="text"], .console-form textarea, .console-form select { min-width: 0; width: 100%; max-width: 26rem; }
.console-form input[type="text"].console-narrow { max-width: 8rem; }

/* Minutes, hours, days, seconds — four intervals five orders of magnitude apart. A
   short field says the value is a number and not a sentence. */
.console-form #intake_dedup_window,
.console-form #intake_session_window,
.console-form #intake_acceptance_window,
.console-form #intake_evaluation_budget { max-width: 8rem; }

.console-form .console-checkbox label { display: inline; font-weight: 600; }
.console-form .console-checkbox input[type="checkbox"] { margin-right: var(--console-space-2); }
.console-form .console-checkbox .console-hint { margin-left: 26px; }

.console-hint {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--console-ink-3);
  max-width: 66ch;
}
.console-note { color: var(--console-ink-3); font-size: 12.5px; max-width: 78ch; }
.console-hint code, .console-note code { font-size: 11.5px; }

/* An error beside the field it names — and never the only signal, since the
   summary at the top names it too. */
.console-error {
  display: block;
  margin-top: var(--console-space-2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--console-person-ink);
}
.console-errors {
  margin: 0 0 18px;
  padding: 12px 14px 12px 32px;
  list-style: disc;
  background: var(--console-person-bg);
  border: 1px solid #e8c9bd;
  border-radius: var(--console-radius);
  color: var(--console-person-ink);
  font-size: var(--console-text-sm);
  max-width: 760px;
}

.console-form .console-submit { margin-top: var(--console-space-2); font-weight: 600; }

/* An immutable value shown where its field would be. */
.console-form code.console-slug, .console-form code.console-source {
  display: inline-block;
  padding: 5px var(--console-space-2);
  font-size: var(--console-text-sm);
}

/* ============================================================
   A Relay's conditions builder — #114. Everything below is drawn
   by the condition-builder and condition-hints controllers; the
   JSON mode is #112's editor, with the hints beside it.
   ============================================================ */
.console-condition-builder-live { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--console-space-2); }
.console-condition-builder-live > * { grid-column: 1 / -1; }
.console-condition-builder-live [hidden] { display: none; }
.console-condition-builder-json { grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem); column-gap: var(--console-space-4); align-items: start; }
/* Border-box, so the editor's gutter padding stays inside its column; the
   editor lays its layer out from the textarea's outer size either way. */
.console-condition-builder-json textarea { box-sizing: border-box; }
.console-condition-builder-json > .console-json-editor { grid-column: 1; }
.console-condition-builder-json > .console-condition-hints { grid-column: 2; }
.console-condition-check-json { order: 1; }

.console-condition-modes { display: inline-flex; justify-self: start; border: 1px solid var(--console-rule-3); border-radius: var(--console-radius-sm); overflow: hidden; }
.console-condition-modes button { border: 0; border-radius: 0; padding: 3px 12px; font-size: var(--console-text-xs); background: var(--console-surface); color: var(--console-ink-2); }
.console-condition-modes button + button { border-left: 1px solid var(--console-rule-3); }
.console-condition-modes button[aria-pressed="true"] { background: var(--console-ink); color: var(--console-page); font-weight: 600; }
.console-condition-modes button[aria-disabled="true"] { color: var(--console-ink-4); cursor: not-allowed; }

.console-condition-lock, .console-condition-check, .console-condition-row-check { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--console-person-ink); }
.console-condition-check:empty { display: none; }
.console-condition-missing {
  margin: 0;
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--console-batch-ink);
  background: var(--console-batch-bg);
  border-left: 3px solid var(--console-batch-edge);
  border-radius: var(--console-radius-sm);
}

.console-condition-pane { display: grid; gap: var(--console-space-2); }
.console-condition-rows { list-style: none; margin: 0; padding: 0; counter-reset: condition; }
.console-condition-row {
  display: grid;
  grid-template-columns: minmax(9rem, 1.1fr) minmax(8rem, 1fr) minmax(10rem, 1.6fr) auto;
  gap: var(--console-space-2);
  align-items: start;
  padding: 10px;
  background: var(--console-surface);
  border: 1px solid var(--console-rule-2);
  border-radius: var(--console-radius);
}
.console-condition-row + .console-condition-row { margin-top: 22px; position: relative; }
.console-condition-row + .console-condition-row::before {
  content: "AND";
  position: absolute;
  top: -19px;
  left: 12px;
  font-size: var(--console-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--console-ink-4);
}
.console-condition-row-marked { border-color: var(--console-batch-edge); background: var(--console-batch-bg); }
.console-condition-row-refused { border-color: var(--console-person-edge); background: var(--console-person-bg); }
.console-form .console-condition-row select, .console-form .console-condition-row input[type="text"] { max-width: none; }
.console-condition-row .console-condition-extras, .console-condition-row .console-condition-row-check { grid-column: 1 / -1; margin: 0; }
.console-condition-extras { font-size: 12.5px; color: var(--console-batch-ink); }
.console-condition-settles { display: block; margin-top: 3px; font-size: 11.5px; color: var(--console-ink-3); }
.console-condition-settles.console-condition-waits { color: var(--console-batch-ink); }
.console-condition-settles code { font-size: 11px; }
.console-condition-none { display: block; padding-top: 5px; font-size: 12.5px; color: var(--console-ink-4); }
.console-condition-remove { padding: 4px 8px; font-size: var(--console-text-xs); }

.console-condition-many { display: grid; gap: 6px; }
.console-condition-source { display: inline-flex; justify-self: start; }
.console-condition-source button { padding: 1px 8px; font-size: 11.5px; border-radius: 0; }
.console-condition-source button:first-child { border-radius: var(--console-radius-sm) 0 0 var(--console-radius-sm); }
.console-condition-source button:last-child { border-radius: 0 var(--console-radius-sm) var(--console-radius-sm) 0; margin-left: -1px; }
.console-condition-source button[aria-pressed="true"] { background: var(--console-sunken); color: var(--console-link); font-weight: 600; }
.console-condition-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--console-space-1);
  align-items: center;
  padding: 3px;
  border: 1px solid var(--console-rule-3);
  border-radius: var(--console-radius-sm);
  background: var(--console-surface);
}
.console-form .console-condition-chips input[type="text"] { flex: 1; min-width: 7rem; width: auto; border: 0; padding: 3px; }
.console-condition-chip { display: inline-flex; align-items: center; gap: 2px; padding: 0 2px 0 6px; background: var(--console-sunken); border: 1px solid var(--console-rule-2); border-radius: 3px; }
.console-condition-chip code { font-size: 12px; background: none; }
.console-condition-chip button { border: 0; background: none; padding: 0 4px; line-height: 1.2; color: var(--console-ink-3); }
.console-condition-choices { display: flex; gap: var(--console-space-3); padding-top: 5px; }
.console-form .console-condition-choices label { display: inline; font-weight: 400; margin: 0; }
/* An Intake by name — #246. An Account may keep more Intakes than fit on one
   line, so the choices stack; a flagged id keeps its mark beside it. */
.console-condition-intakes { flex-direction: column; gap: 3px; }
.console-condition-intake .console-target-gone { margin: 4px 0 0; }
.console-condition-intakes code { font-size: 12px; overflow-wrap: anywhere; }

.console-condition-add { justify-self: start; font-size: var(--console-text-sm); }
.console-condition-summary { margin: 0; padding: 8px 10px; font-size: var(--console-text-sm); color: var(--console-ink-2); background: var(--console-sunken); border-radius: var(--console-radius-sm); max-width: 66ch; }
.console-condition-summary code { font-size: 12px; }

.console-condition-hints { max-height: 22rem; overflow: auto; padding: 6px; font-size: 12.5px; background: var(--console-sunken); border: 1px solid var(--console-rule-2); border-radius: var(--console-radius); }
.console-condition-hints-heading { margin: 0 0 4px; padding: 2px 4px 6px; color: var(--console-ink-3); border-bottom: 1px solid var(--console-rule-2); }
.console-condition-hints-section { margin: 8px 4px 2px; font-size: var(--console-label); font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--console-ink-4); }
.console-condition-suggestion {
  display: flex;
  justify-content: space-between;
  gap: var(--console-space-2);
  width: 100%;
  padding: 3px 6px;
  text-align: left;
  font-size: 12.5px;
  border: 0;
  border-radius: var(--console-radius-sm);
  background: none;
}
.console-condition-suggestion:hover, .console-condition-suggestion:focus-visible { background: var(--console-surface); }
.console-condition-suggestion span { color: var(--console-ink-3); font-size: 11.5px; text-align: right; }
.console-condition-suggestion:disabled { opacity: 0.55; cursor: not-allowed; }
.console-condition-hint { margin: 0; padding: 2px 6px; color: var(--console-ink-3); }

@media (max-width: 1023px) {
  .console-filters label, .console-search label { padding-bottom: 20px; }
}

/* ============================================================
   A PHONE GETS ONE COLUMN AND NOTHING WIDER THAN ITSELF — #347.
   The forms are not redesigned for a thumb; they are only kept
   from breaking. Every label sits over its control, every
   control is as wide as the screen and never wider, and a long
   token wraps instead of pushing the page sideways.
   ============================================================ */
@media (max-width: 759px) {
  /* No control wider than its column. Weightless, so a screen's narrower cap
     still holds; the filter bars' floors (13rem, 15rem, 18rem…), which sized a
     control on one wrapping line and at phone width only overflow, are undone
     by name below and in console-5-screens.css. */
  :where(input, select, textarea) { max-width: 100%; min-width: 0; }

  /* ⚠️ 16PX OR SAFARI ZOOMS THE PAGE ON FOCUS, and does not zoom back. Every
     smaller size this file and the screens set on a control — JSON at 12px, a
     password at 12px, a filter at 13px — would trigger it, so this one property
     is `!important` here and nowhere else. The JSON editor reads the
     textarea's computed size for its layer, so the two still line up. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  select,
  textarea { font-size: 16px !important; }

  /* The filter bar: the views emit label + control as siblings, so each takes
     the whole line and the pairing reads top to bottom. A checkbox and its
     label stay one sentence on one line. */
  .console-filters, .console-search { padding: var(--console-space-3); }
  .console-filters label:not(input[type="checkbox"] + label),
  .console-search label {
    flex: 1 1 100%;
    margin-right: 0;
    padding-bottom: 0;
  }
  .console-filters select,
  .console-filters input[type="search"],
  .console-filters input[type="text"],
  .console-filters input[type="date"],
  .console-search input[type="search"] {
    flex: 1 1 100%;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
  }
  .console-filters input[type="submit"], .console-search input[type="submit"] { flex: 1 1 100%; }

  .console-form { padding: 4px var(--console-space-4) 16px; }
  .console-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
  .console-form select,
  .console-form textarea { box-sizing: border-box; }
  .console-form .console-checkbox .console-hint { margin-left: 0; }

  .console-condition-choices { flex-wrap: wrap; }
  .console-condition-builder-json { grid-template-columns: minmax(0, 1fr); }
  .console-condition-builder-json > .console-json-editor, .console-condition-builder-json > .console-condition-hints { grid-column: 1; }
  .console-condition-row { grid-template-columns: minmax(0, 1fr) auto; }
  .console-condition-row > .console-condition-operator, .console-condition-row > .console-condition-value { grid-column: 1 / -1; }
  .console-condition-row > .console-condition-remove { grid-column: 2; grid-row: 1; }
}