/* Buttons, fields and messages. Values come from tokens.css only. */

/* ── buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 33px;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.mb3 .btn { border: 1px solid var(--rule); background: var(--card); color: var(--text); padding: 0 12px; }
.btn:hover:not(:disabled) { background: var(--sunk); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.mb3 .btn--primary, .btn--primary { background: var(--green); border-color: var(--green); color: var(--on-accent); }
.mb3 .btn--primary:hover:not(:disabled), .btn--primary:hover:not(:disabled) { background: var(--green-d); border-color: var(--green-d); }
.mb3 .btn--navy, .btn--navy { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.mb3 .btn--navy:hover:not(:disabled), .btn--navy:hover:not(:disabled) { background: var(--navy-2); }
.mb3 .btn--ghost, .btn--ghost { border-color: transparent; background: transparent; }
.mb3 .btn--ghost:hover:not(:disabled), .btn--ghost:hover:not(:disabled) { background: var(--sunk); }
.mb3 .btn--danger, .btn--danger { color: var(--risk-h); border-color: var(--danger-line); background: var(--danger-wash); }
.mb3 .btn--danger:hover:not(:disabled), .btn--danger:hover:not(:disabled) { background: var(--risk-h-b); }
.mb3 .btn--sm, .btn--sm { height: 27px; padding: 0 9px; font-size: 12px; border-radius: 5px; }
.btn--block { width: 100%; }

/* The big button on the sign-in screens. */
.auth-card .btn--block { height: 46px; margin-top: 5px; border: 0; border-radius: 5px; font-size: 16px; font-weight: 800; }

.link-button { border: 0; background: none; color: var(--blue); font: inherit; font-weight: 700; cursor: pointer; padding: 0; text-decoration: none; }
.link-button:hover { text-decoration: underline; }

/* ── fields in the app ── */
.fld {
  height: 33px;
  min-width: 0;
  padding: 0 10px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--card);
  color: var(--text);
  font-size: 13px;
}
.fld--full { width: 100%; }
textarea.fld { height: auto; width: 100%; padding: 9px 10px; resize: vertical; line-height: 1.5; }
.fld[aria-invalid="true"] { border-color: var(--risk-h); }
.sbox { position: relative; display: flex; align-items: center; }
.sbox .icon { position: absolute; left: 9px; color: var(--faint); pointer-events: none; }
.sbox input { width: 100%; padding-left: 31px; }

.lbl { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 600; color: var(--body); }

/* A field with its own suggestion list, inside the dialog (components/combobox.js). */
.cbx { position: relative; }
.cbx__input { padding-right: 30px; }
.cbx__caret { position: absolute; top: 0; right: 10px; display: flex; align-items: center; height: 33px; color: var(--faint); pointer-events: none; }
.cbx__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  max-height: 252px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  list-style: none;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--card);
  box-shadow: var(--shadow-lift);
}
.cbx__list[hidden] { display: none; }
.cbx__option { display: flex; flex-direction: column; gap: 1px; padding: 7px 10px; border-radius: 5px; cursor: pointer; }
.cbx__option.is-active { background: var(--sunk); }
.cbx__name { font-size: 13px; color: var(--text); }
.cbx__name strong { font-weight: 700; color: var(--navy); }
.cbx__detail { font-size: 11px; color: var(--muted); }
.cbx__note { padding: 7px 10px; font-size: 11.5px; color: var(--muted); }
.cbx__option + .cbx__note { margin-top: 3px; border-top: 1px solid var(--rule); }
.grp { margin-bottom: 14px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.err { margin-top: 4px; font-size: 11px; font-weight: 500; color: var(--risk-h); }
.hint { margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--muted); }
input[type="range"].fld--full { padding: 0; height: auto; margin-top: 8px; border: 0; accent-color: var(--navy); }

/* A row of choices, one or several on. The editor dialog sits outside the app frame, so it is named as well. */
.seg { display: flex; flex-wrap: wrap; gap: 5px; }
.mb3 .seg button, .modal-editor .seg button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--body);
  background: var(--card);
}
.mb3 .seg button:hover:not(:disabled), .modal-editor .seg button:hover:not(:disabled) { border-color: var(--faint); }
.mb3 .seg button[aria-pressed="true"], .modal-editor .seg button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--on-navy); }
.mb3 .seg button:disabled { opacity: .4; cursor: not-allowed; }
/* A colour dot on a pressed (navy) choice gets a faint ring, so a dark colour such as Unanswered still shows. */
.seg button[aria-pressed="true"] .dot { box-shadow: 0 0 0 1px color-mix(in srgb, var(--on-navy) 60%, transparent); }

/* ── labelled fields built by components/forms.js (sign-in screens and dialogs) ── */
.field { margin-bottom: 15px; }
.field label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 700; color: var(--body); }
.field input, .field textarea {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--card);
  color: var(--text);
  font: inherit;
}
.field textarea { height: auto; padding: 11px 13px; line-height: 1.5; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { outline: 2px solid var(--blue); outline-offset: 0; border-color: transparent; }
.field__hint { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.field select { width: 100%; height: 46px; padding: 0 11px; border: 1px solid var(--rule); border-radius: 5px; background: var(--card); color: var(--text); font: inherit; }

.check { display: inline-flex; align-items: center; gap: 8px; min-height: 33px; font-size: 13px; color: var(--text); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--navy); }

/* ── messages ── */
.alert { margin-bottom: 15px; padding: 11px 13px; border: 1px solid; border-radius: 5px; font-size: 12.5px; line-height: 1.5; }
.alert--error { color: var(--risk-h); background: var(--risk-h-b); border-color: var(--danger-line); }
.alert--success { color: var(--stable); background: var(--stable-b); border-color: var(--good-line); }
.alert--info { color: var(--cold); background: var(--cold-b); border-color: var(--line); }
/* A form's restored draft: the sentence, and "Start again" at its end. */
.draft-note { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

@media (max-width: 1000px) {
  .row2, .row3 { grid-template-columns: 1fr; }
}

/* The Export button and its list of formats (components/export-menu.js), on Targets, Journey and the Activity log. */
.export-menu { position: relative; }
.export-menu--end { margin-left: auto; }
.export-menu__list { top: 40px; right: 0; width: 230px; }