/* ---------------------------------------------------------------------------
   forms.css — the configure screen: fields, chip input, seller combobox,
   quota meters, read-only environment state, preflight panel, confirm modal.
   Owned by A7. tokens.css / base.css / layout.css / buttons.css are frozen.
   ---------------------------------------------------------------------------
   Rules this file keeps, deliberately:
     - a label is ALWAYS visible. A placeholder is a hint, never the label,
       because it disappears exactly when the operator is typing into a field
       whose purpose they are trying to recall.
     - helper text sits under every field and error text sits next to the field
       it belongs to. A summary at the top tells you something is wrong, not
       which control to go and fix.
     - every control is at least 44px tall, on every pointer type.
     - colour is never the only signal: every state card, notice and meter
       carries a text label too.
--------------------------------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: var(--s-4); }

/* ---- cards ---------------------------------------------------------------- */
.form-card { overflow: visible; }
.form-card__head {
  padding: var(--s-4) var(--s-4) var(--s-3);
  border-bottom: 1px solid var(--c-border);
}
.form-card__title { font-size: var(--t-lg); }
.form-card__sub { margin: var(--s-1) 0 0; color: var(--c-fg-muted); font-size: var(--t-md); }
.form-card__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-4); }

.form__grid { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 700px) {
  .form__grid { grid-template-columns: 1fr 1fr; }
}

/* ---- field ---------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.field__label {
  font-size: var(--t-md); font-weight: var(--fw-semi); color: var(--c-fg);
  line-height: var(--lh-tight);
}
.field__help { margin: 0; font-size: var(--t-sm); color: var(--c-fg-muted); line-height: var(--lh-body); }
.field__error { margin: 0; font-size: var(--t-sm); font-weight: var(--fw-medium); color: var(--c-danger-ink); }
.field__error:empty { display: none; }

.input {
  width: 100%; min-height: 44px;
  padding: var(--s-2) var(--s-3);
  background: var(--c-surface); color: var(--c-fg);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  font-size: var(--t-md);
  transition: border-color var(--m-fast) var(--m-ease), box-shadow var(--m-fast) var(--m-ease);
}
.input::placeholder { color: var(--c-fg-faint); }
.input:hover:not(:disabled) { border-color: var(--c-primary); }
/* A focus state that survives on a white card: a ring AND a border colour
   change, not a 1px tint that disappears on a bright monitor. */
.input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.input:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }

.input--num { max-width: 160px; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.select {
  appearance: none;
  padding-right: var(--s-6);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - var(--s-4)) 50%, calc(100% - var(--s-3)) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.field--invalid .input,
.field--invalid .chip-input,
.field--invalid .combo__input { border-color: var(--c-danger); }
.field--invalid .input:focus,
.field--invalid .combo__input:focus { box-shadow: 0 0 0 3px var(--c-danger-soft); }

/* ---- chip input (keywords) ------------------------------------------------ */
.chip-input {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: var(--s-1) var(--s-2);
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  cursor: text;
  transition: border-color var(--m-fast) var(--m-ease), box-shadow var(--m-fast) var(--m-ease);
}
.chip-input:hover { border-color: var(--c-primary); }
.chip-input:focus-within { border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft); }
.chip-input__tokens { display: contents; }
.chip-input__field {
  flex: 1 1 140px; min-width: 120px; width: auto;
  min-height: 36px; padding: var(--s-1);
  border: 0; box-shadow: none; background: transparent;
}
.chip-input__field:hover, .chip-input__field:focus { border: 0; box-shadow: none; }

.chip-token {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-1) var(--s-1) var(--s-3);
  background: var(--c-primary-soft); color: var(--c-primary);
  border-radius: var(--r-pill);
  font-size: var(--t-md); font-weight: var(--fw-medium);
  max-width: 100%;
}
.chip-token__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-token__x {
  display: inline-grid; place-items: center; position: relative;
  width: 24px; height: 24px; padding: 0; flex: none;
  border: 0; border-radius: 50%;
  background: transparent; color: inherit;
}
.chip-token__x svg { width: 11px; height: 11px; }
.chip-token__x:hover { background: var(--c-primary); color: var(--c-on-primary); }
/* Keeps the visual size at 24px and the touch target at 44px. */
.chip-token__x::after { content: ''; position: absolute; inset: -10px; }

/* ---- combobox (seller picker) --------------------------------------------- */
.combo { position: relative; }
.combo__list {
  position: absolute; z-index: var(--z-sticky);
  top: calc(100% + var(--s-1)); left: 0; right: 0;
  max-height: 320px; overflow-y: auto;
  margin: 0; padding: var(--s-1); list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  box-shadow: var(--sh-3);
}
.combo__list[hidden] { display: none; }
.combo__empty { padding: var(--s-3); color: var(--c-fg-muted); font-size: var(--t-md); }

.combo__opt {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  cursor: pointer;
  min-height: 44px; justify-content: center;
}
.combo__opt--active { background: var(--c-primary-soft); }
.combo__opt[aria-selected="true"] { box-shadow: inset 0 0 0 1px var(--c-primary); }

/* A user we hold no delegation for is SHOWN, greyed, with the reason. Hiding
   them makes a search for a name you know exists look broken. */
.combo__opt--blocked { cursor: not-allowed; opacity: .72; }
.combo__opt--blocked .combo__opt-name { color: var(--c-fg-muted); }
.combo__opt--blocked.combo__opt--active { background: var(--c-idle-soft); }

/* Delegated, but something about THIS country or quota stops it. Still
   selectable, because the reason is the most useful thing on this screen and
   greying the row out would hide it. */
.combo__opt--caution { box-shadow: inset 2px 0 0 var(--c-warn); }

/* What the Agri4All directory could not do, said out loud inside the list.
   Silence here reads as "your search is broken". */
.combo__notice {
  padding: var(--s-2) var(--s-3);
  margin-top: var(--s-1);
  border-top: 1px solid var(--c-border);
  font-size: var(--t-sm); color: var(--c-fg-muted); line-height: var(--lh-body);
}

.combo__opt-head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.combo__opt-name { font-weight: var(--fw-semi); font-size: var(--t-md); }
.combo__opt-id { font-size: var(--t-xs); color: var(--c-fg-faint); }
.combo__opt-meters { display: flex; gap: var(--s-4); flex-wrap: wrap; }

/* ---- quota meter ---------------------------------------------------------- */
/* Compact on purpose: it sits inside a dropdown row and has to read at a
   glance without becoming a chart. The number is always there, the bar
   supports it. A delegation is 2 products and 1 country, so "1/2" is the
   whole story and the bar just makes "full" visible from across the desk. */
.meter { display: inline-flex; flex-direction: column; gap: 2px; min-width: 92px; }
.meter__text { display: inline-flex; align-items: baseline; gap: var(--s-1); }
.meter__name { font-size: var(--t-xs); color: var(--c-fg-muted); text-transform: uppercase; letter-spacing: .05em; }
.meter__value { font-family: var(--f-mono); font-size: var(--t-xs); font-variant-numeric: tabular-nums; color: var(--c-fg); }
.meter__track {
  display: block; height: 4px; width: 100%; min-width: 56px;
  background: var(--c-idle-soft); border-radius: var(--r-pill); overflow: hidden;
}
.meter__fill {
  display: block; height: 100%; background: var(--c-ok);
  border-radius: var(--r-pill);
  transition: width var(--m-base) var(--m-ease);
}
.meter--empty .meter__fill { background: var(--c-danger); }
.meter--empty .meter__value { color: var(--c-danger-ink); font-weight: var(--fw-semi); }

/* ---- chosen seller -------------------------------------------------------- */
.seller-picked {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-3);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
}
.seller-picked__head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.seller-picked__name { font-weight: var(--fw-semi); font-size: var(--t-md); }
.seller-picked__clear { margin-left: auto; }
.seller-picked__meters { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.seller-picked__meters .meter { min-width: 120px; }
.seller-picked__known { margin: 0; font-size: var(--t-sm); }

.seller-skeleton { display: flex; flex-direction: column; gap: var(--s-2); }
.sk--row { height: 44px; }

/* ---- notice --------------------------------------------------------------- */
.notice {
  display: flex; gap: var(--s-3); align-items: flex-start;
  padding: var(--s-3);
  border: 1px solid var(--c-border); border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.notice__icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.notice__body { min-width: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.notice__title { margin: 0; font-weight: var(--fw-semi); font-size: var(--t-md); line-height: var(--lh-tight); }
.notice__detail { margin: 0; font-size: var(--t-sm); color: var(--c-fg-muted); }
.notice__action { align-self: flex-start; margin-top: var(--s-1); }

.notice--block { background: var(--c-danger-soft); border-color: var(--c-danger); color: var(--c-danger-ink); }
.notice--block .notice__detail { color: var(--c-danger-ink); }
.notice--warn { background: var(--c-warn-soft); border-color: var(--c-warn); color: var(--c-warn-ink); }
.notice--warn .notice__detail { color: var(--c-warn-ink); }
.notice--info { background: var(--c-info-soft); border-color: var(--c-info); color: var(--c-info-ink); }
.notice--info .notice__detail { color: var(--c-info-ink); }

/* ---- checkbox ------------------------------------------------------------- */
.check {
  display: flex; align-items: flex-start; gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  min-height: 44px;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface);
  cursor: pointer;
}
.check:hover { border-color: var(--c-primary); }
.check__box { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--c-primary); flex: none; }
.check__text { font-size: var(--t-md); line-height: var(--lh-body); }

/* ---- read-only environment state ------------------------------------------ */
/* EMAIL_MODE and LIVE_POST are environment variables, not per-run choices.
   These read as status, never as a control, so nobody tries to click one off. */
.state-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-3); }
@media (min-width: 700px) { .state-grid { grid-template-columns: 1fr 1fr; } }

.state-card {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-3);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-surface-2);
}
.state-card--ok { border-color: var(--c-ok); background: var(--c-ok-soft); }
.state-card--danger { border-color: var(--c-danger); background: var(--c-danger-soft); }
.state-card__head { display: flex; align-items: center; gap: var(--s-2); }
.state-card__label { font-weight: var(--fw-semi); font-size: var(--t-md); }
.state-card--ok .state-card__label { color: var(--c-ok-ink); }
.state-card--danger .state-card__label { color: var(--c-danger-ink); }
.state-card__detail { margin: 0; font-size: var(--t-sm); line-height: var(--lh-body); }
.state-card--ok .state-card__detail { color: var(--c-ok-ink); }
.state-card--danger .state-card__detail { color: var(--c-danger-ink); }
.state-card__env { margin: 0; font-size: var(--t-xs); letter-spacing: .04em; color: var(--c-fg-faint); }
.state-card--ok .state-card__env,
.state-card--danger .state-card__env { opacity: .75; color: inherit; }

/* ---- actions + preflight -------------------------------------------------- */
.form__actions { display: flex; flex-direction: column; gap: var(--s-4); }
.form__actions-row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.form__actions-note { margin: 0; font-size: var(--t-sm); max-width: 42ch; }
.preflight-slot:empty { display: none; }
.preflight-slot { display: flex; flex-direction: column; gap: var(--s-3); }

.preflight {
  border: 1px solid var(--c-border); border-radius: var(--r-lg);
  background: var(--c-surface);
  overflow: hidden;
}
.preflight--blocked { border-color: var(--c-danger); }
.preflight--ok { border-color: var(--c-ok); }
.preflight__head {
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-2);
}
.preflight__title { font-size: var(--t-md); }
.preflight__head .chip { margin-left: auto; }
.preflight__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.preflight__row { display: flex; gap: var(--s-3); align-items: flex-start; }
.preflight__row .chip { margin-top: 2px; flex: none; }
.preflight__msg { min-width: 0; }
.preflight__msg-title { margin: 0; font-size: var(--t-md); font-weight: var(--fw-medium); }
.preflight__msg-detail { margin: var(--s-1) 0 0; font-size: var(--t-sm); }
.preflight__clean { margin: 0; font-size: var(--t-md); }
.preflight__quota {
  display: flex; align-items: flex-end; gap: var(--s-5); flex-wrap: wrap;
  padding-top: var(--s-3); border-top: 1px dashed var(--c-border);
}
.preflight__quota-label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; }
.preflight__quota .meter { min-width: 120px; }

/* ---- confirmation modal ---------------------------------------------------- */
body.modal-open { overflow: hidden; }

.confirm { display: flex; flex-direction: column; gap: var(--s-4); }
.confirm__title { font-size: var(--t-xl); }
.confirm__lede { margin: 0; color: var(--c-fg-muted); font-size: var(--t-md); }

.confirm__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.confirm__fact {
  display: grid; grid-template-columns: 1fr; gap: var(--s-1);
  padding: var(--s-3);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
}
@media (min-width: 640px) {
  .confirm__fact { grid-template-columns: 150px minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
}
.confirm__fact-term { font-weight: var(--fw-semi); font-size: var(--t-md); }
.confirm__fact-detail { font-size: var(--t-md); color: var(--c-fg-muted); line-height: var(--lh-body); }

.confirm__warnings { display: flex; flex-direction: column; gap: var(--s-2); }

.confirm__armed-note {
  margin: 0; padding: var(--s-2) var(--s-3);
  background: var(--c-danger-soft); color: var(--c-danger-ink);
  border-radius: var(--r-md);
  font-weight: var(--fw-semi); font-size: var(--t-md);
}
.confirm__armed-note[hidden] { display: none; }

.confirm__actions { display: flex; gap: var(--s-3); justify-content: flex-end; flex-wrap: wrap; }
.confirm__error { margin: 0; color: var(--c-danger-ink); font-size: var(--t-md); font-weight: var(--fw-medium); }
.confirm__error:empty { display: none; }

@media (max-width: 520px) {
  .confirm__actions { flex-direction: column-reverse; }
  .confirm__actions .btn { width: 100%; }
}

/* Resolving the chosen seller against the chosen country is a live round trip
   to Agri4All, so it says so rather than leaving the verdict looking final. */
.seller-picked__checking {
  display: flex; align-items: center; gap: var(--s-2);
  margin: 0; font-size: var(--t-sm);
}