/* =========================================================
   Zeal Portal — Form
   Section → header (title + completion chip) → why-we-ask →
   body → rows → inputs. Shared across Profile (warm Tier 2.5),
   Company Info edit (Tier 2), future surfaces (expenses,
   timesheets, RAMS etc.).

   Voice rules for .form-section__why lines:
     - One short sentence explaining why the section exists.
     - Italics reserved for concessions / human asides:
       "we pay within 14 days" is first person, not italic;
       "we've needed it twice in three years" is italic.
     - No "Welcome to…" or generic filler.
   ========================================================= */

/* =========================================================
   Form root + tab strip
   ========================================================= */

.form {
  display: grid;
  gap: var(--s-6, 32px);
}

.form-tabs {
  display: flex;
  gap: var(--s-1, 4px);
  align-items: center;
  border-bottom: 1px solid var(--rule-2, rgba(0, 0, 0, 0.14));
  margin-bottom: var(--s-5, 24px);
}
.form-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2, 8px);
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-family: var(--font-std);
  font-size: var(--t-small, 13px);
  font-weight: var(--w-medium, 500);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-std),
    border-color var(--dur-fast) var(--ease-std);
}
.form-tab:hover { color: var(--ink, #000); }
.form-tab.is-active {
  color: var(--ink, #000);
  border-bottom-color: var(--accent, #FF5800);
}
.form-tab .chip { margin-left: 2px; }

/* =========================================================
   Section
   ========================================================= */

.form-section {
  padding: var(--s-5, 24px) 0;
  border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.08));
}
.form-section:first-child {
  padding-top: 0;
  border-top: 0;
}

.form-section__header {
  display: flex;
  align-items: baseline;
  gap: var(--s-3, 12px);
  margin-bottom: var(--s-2, 8px);
}
.form-section__title {
  font-family: var(--font-ex);
  font-weight: var(--w-bold);
  font-size: var(--t-h5, 21px);
  letter-spacing: var(--track-sub, -0.03em);
  line-height: var(--lh-snug, 1.15);
  margin: 0;
  text-transform: lowercase;
}

/* Short explanation of why the section exists. One line, plain text
   with optional <em> for italic asides. Appears under the title. */
.form-section__why {
  font-family: var(--font-std);
  font-size: var(--t-small, 13px);
  line-height: var(--lh-relaxed, 1.4);
  color: var(--ink-2, rgba(0, 0, 0, 0.72));
  margin: 0 0 var(--s-4, 16px) 0;
  max-width: 52ch;
}
.form-section__why em {
  font-style: italic;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}

.form-section__body {
  display: grid;
  gap: var(--s-4, 16px);
}

/* =========================================================
   Row + label + hint + error
   ========================================================= */

.form-row {
  display: grid;
  gap: var(--s-1, 4px);
}
.form-row--inline {
  grid-template-columns: 200px 1fr;
  gap: var(--s-4, 16px);
  align-items: baseline;
}
.form-row__label {
  font-family: var(--font-std);
  font-size: var(--t-small, 13px);
  font-weight: var(--w-medium, 500);
  color: var(--ink-2, rgba(0, 0, 0, 0.72));
}
.form-row__label .req {
  color: var(--accent, #FF5800);
  font-weight: var(--w-bold);
  padding-left: 2px;
}
.form-row__hint {
  font-family: var(--font-std);
  font-size: var(--t-micro, 11px);
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  letter-spacing: 0.02em;
  margin-top: 2px;
}
.form-row__error {
  font-family: var(--font-std);
  font-size: var(--t-micro, 11px);
  color: var(--red-status, #C62828);
  letter-spacing: 0.02em;
  margin-top: 2px;
}

/* =========================================================
   Inputs
   ========================================================= */

.input,
.select,
.textarea {
  display: block;
  width: 100%;
  background: var(--paper, #fff);
  color: var(--ink, #000);
  border: 1px solid var(--rule-2, rgba(0, 0, 0, 0.14));
  border-radius: var(--r-1, 2px);
  padding: 7px 12px;
  font-family: var(--font-std);
  font-size: var(--t-form, 12px);
  line-height: 1.3;
  letter-spacing: var(--track-body, -0.005em);
  transition: border-color var(--dur-fast) var(--ease-std);
  -webkit-appearance: none;
  appearance: none;
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: 2px solid var(--accent, #FF5800);
  outline-offset: 1px;
  border-color: var(--accent, #FF5800);
}
.input:disabled,
.select:disabled,
.textarea:disabled {
  background: var(--paper-2, #f4eee8);
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  cursor: not-allowed;
}
.input.is-invalid,
.select.is-invalid,
.textarea.is-invalid {
  border-color: var(--red-status, #C62828);
}
.textarea {
  min-height: 5em;
  resize: vertical;
}
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 7px;
  padding-right: 32px;
}

/* =========================================================
   Leading-icon input wrapper
   Wraps a plain .input so an SVG can sit inside the field.
   Used for search inputs across User Admin (list, audit),
   Studio Manager toolbar, Labels editor filter.

   Markup:
     <span class="input--with-icon">
       <svg class="input__icon">…</svg>
       <input class="input" type="search" placeholder="search…" />
     </span>
   ========================================================= */

.input--with-icon {
  position: relative;
  display: inline-block;
  width: 100%;
}
.input--with-icon .input {
  padding-left: 36px;
}
.input__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  pointer-events: none;
  flex: 0 0 auto;
}

/* =========================================================
   Checkbox + radio (native with custom framing)
   ========================================================= */

.checkbox,
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2, 8px);
  cursor: pointer;
  font-family: var(--font-std);
  font-size: var(--t-body, 16px);
}
.checkbox input,
.radio input {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid var(--rule-3, rgba(0, 0, 0, 0.22));
  background: var(--paper, #fff);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-std),
    border-color var(--dur-fast) var(--ease-std);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.checkbox input { border-radius: var(--r-1, 2px); }
.radio input    { border-radius: 50%; }

.checkbox input:checked,
.radio input:checked {
  background: var(--accent, #FF5800);
  border-color: var(--accent, #FF5800);
}
.checkbox input:checked::after {
  content: '';
  width: 8px;
  height: 5px;
  border-left: 1.5px solid var(--paper, #fff);
  border-bottom: 1.5px solid var(--paper, #fff);
  transform: translateY(-1px) rotate(-45deg);
}
.radio input:checked::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--paper, #fff);
}
.checkbox input:focus-visible,
.radio input:focus-visible {
  outline: 2px solid var(--accent, #FF5800);
  outline-offset: 2px;
}

/* =========================================================
   Pill toggle (warm-register radio alternative)
   Usage: <div class="pill-toggle" role="radiogroup">
            <button class="is-active">yes</button>
            <button>no</button>
            <button>maybe</button>
          </div>
   ========================================================= */

.pill-toggle {
  display: inline-flex;
  border: 1px solid var(--rule-2, rgba(0, 0, 0, 0.14));
  border-radius: var(--r-pill);
  padding: 2px;
  gap: 0;
}
.pill-toggle button {
  background: transparent;
  border: 0;
  padding: 6px 14px;
  font-family: var(--font-std);
  font-size: var(--t-small, 13px);
  color: var(--ink-2, rgba(0, 0, 0, 0.72));
  border-radius: var(--r-pill);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-std),
    color var(--dur-fast) var(--ease-std);
}
.pill-toggle button:hover { color: var(--ink, #000); }
.pill-toggle button.is-active {
  background: var(--ink, #000);
  color: var(--paper, #fff);
}