/* gem-download-form.css — page-side styling for slotted controls in
   extended (no-download) forms. Pair with the form bundle:

     <link rel="stylesheet" href="…/assets-f/css/2c313a20aafff3.css">
     <script type="module" src="…/assets-f/js/a6cfb4f0b81a0f.js"></script>

   The form component owns the card chrome via shadow DOM. This file owns
   the integrator's slotted controls because shadow CSS can't reach
   descendants of slotted elements (e.g. an <input> inside a <label>).

   v1 download forms (no slotted content) don't need this file; existing
   embeds are unaffected. */

/* Slotted label wrapping an input/select/textarea. Default is column
   ("Field name" above input), which is right for text/email/select/url/
   textarea but wrong for inline checkboxes/radios where the control
   should sit alongside its text. The :has() override below catches
   labels that wrap a checkbox or radio and flips them to row layout. */
gem-download-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-weight: 700; font-size: 16px; color: #0b3a49;
}
gem-download-form label:has(input[type="checkbox"]),
gem-download-form label:has(input[type="radio"]) {
  flex-direction: row; align-items: center; gap: 10px;
  font-weight: 400;
}

/* All text-like inputs by default. Default-type <input> (no type attribute)
   is matched too; checkbox/radio are excluded so they keep native rendering.
   box-sizing: border-box is critical — without it, width:100% + padding adds
   up to MORE than the parent, causing overflow when fields sit inside a
   constrained grid (e.g. a 2-col row). The form's :host sets it for shadow
   descendants but not for slotted light-DOM children. */
gem-download-form input:not([type="checkbox"]):not([type="radio"]),
gem-download-form select,
gem-download-form textarea {
  box-sizing: border-box;
  font: inherit; color: #0b3a49; background: #fff;
  border: 1.5px solid #0f4a5c; border-radius: 10px;
  padding: 14px 16px; width: 100%;
  /* Pin line-height for <input>/<textarea>; <select> ignores line-height
     so its computed height comes from font + browser default. To keep
     them aligned in side-by-side grids, ALSO pin min-height to the
     hand-computed total (padding 14*2 + border 1.5*2 + line content 22). */
  line-height: 1.4;
  min-height: 53px;
}
gem-download-form textarea { min-height: 120px; resize: vertical; }

/* Help-text below a field. Use <small> inside the slotted <label>. */
gem-download-form small {
  font-weight: 400; font-size: 13px; color: #6c8089;
}

/* Fieldset groups — composite name, dataset radios, consent matrix. */
gem-download-form fieldset {
  border: 1.5px solid #d4cdb8; border-radius: 10px;
  padding: 14px 16px; margin: 0;
}
gem-download-form fieldset legend {
  padding: 0 8px; font-weight: 700; color: #0b3a49;
}

/* Optional layout helpers. Add the class on the <fieldset>:
     class="grid"      → 2-column grid of compact items (radios, checkboxes)
     class="composite" → 2-column grid of equal-width labeled fields */
gem-download-form fieldset.grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px;
}
gem-download-form fieldset.grid label {
  flex-direction: row; align-items: center; gap: 8px;
  font-weight: 400; font-size: 14px;
}
gem-download-form fieldset.composite {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}

/* Drupal's .embed-width-large wrapper paints its own background, which
   double-stacks under the form's card chrome and breaks the visual.
   Drop the wrapper background when it's hosting a form. */
.embed-width-large:has(gem-download-form) { background-color: transparent; }

/* Integrator-supplied checkbox styled to match the builtins (license, optin,
   remember-me). Pair with slot="extras" to position below the builtins:

     <label slot="extras" class="gem-check">
       <input type="checkbox" name="ownership_supplement" />
       <span>Would you like a supplemental file with detailed information…?</span>
     </label>

   Lives in this file (not the shadow CSS) because ::slotted() can't reach
   the <input> inside a slotted <label>; the input has to be styled from
   light-DOM CSS. The cream box / checkmark colors mirror the shadow's
   .check rules at the top of gem-download-form.js. */
gem-download-form label.gem-check {
  display: flex;
  flex-direction: row;        /* override the column default for slotted labels */
  align-items: flex-start;
  gap: 14px;
  background: #ebe6d6;        /* matches shadow --gem-chip */
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  user-select: none;
  font-weight: 400;
  font-size: 16px;
  color: #0b3a49;
}
/* Bold the label text to match the builtins' .check span rule. */
gem-download-form label.gem-check span { font-weight: 700; color: #0b3a49; }
gem-download-form label.gem-check input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; margin: 1px 0 0;
  border: 1.5px solid #0f4a5c;
  border-radius: 4px;
  background: #fff;
  flex-shrink: 0;
  cursor: pointer;
  display: grid; place-content: center;
  transition: background .15s, border-color .15s;
}
gem-download-form label.gem-check input[type="checkbox"]:checked {
  background: #0b3a49;        /* var(--gem-ink-strong) */
  border-color: #0b3a49;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-position: center;
  background-size: 14px;
  background-repeat: no-repeat;
}

/* ─── Section / card / callout / pill primitives ─────────────────────────
   For richer forms (Subscribe, multi-section intake) where the integrator
   needs sub-headers, info callouts, bordered sub-cards inside the form,
   and small "Recommended"-style badges. All scoped under gem-download-form
   so they never leak to non-form descendants of the host page. */

gem-download-form .section-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: #6c8089;
  margin: 24px 0 12px;
}

gem-download-form .callout {
  background: #ebe6d6; border-radius: 10px;
  padding: 14px 18px; font-size: 15px; color: #0f4a5c; line-height: 1.5;
  margin-bottom: 20px;
}
gem-download-form .callout strong { color: #0b3a49; }

gem-download-form .form-card {
  background: #fff;
  border: 1.5px solid #d4cdb8; border-radius: 10px;
  padding: 22px 24px; margin-bottom: 16px;
  position: relative;
}
gem-download-form .form-card.recommended { border-color: #0f4a5c; }
gem-download-form .form-card h3 {
  margin: 0 0 6px; font-size: 18px; font-weight: 700; color: #0b3a49;
}
gem-download-form .form-card p {
  margin: 0 0 12px; font-size: 14px; color: #0f4a5c; line-height: 1.5;
}
gem-download-form .form-card label.opt {
  font-weight: 600; font-size: 15px; color: #0b3a49;
}

/* "Recommended" / "New" / "Beta" style badge inside a form-card. */
gem-download-form .pill {
  display: inline-block; background: #ebe6d6; color: #0b3a49;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 999px;
  margin-bottom: 10px;
}

/* 2-up grid of form-cards (e.g. "CoalWire | Inside Gas"). */
gem-download-form .cards-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
gem-download-form .cards-2 .form-card { margin: 0; }

/* 2-col row of paired fields (First/Last, Org/Country). */
gem-download-form .row-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 14px;
}
/* Full-width labeled field, sized to match siblings in row-2. */
gem-download-form label.full-width {
  display: block; margin-bottom: 14px;
}

/* Custom-marker disclosure. Integrator wraps optional / advanced content
   in <details><summary>…</summary>…</details>. */
gem-download-form details > summary {
  cursor: pointer; font-weight: 700; color: #0b3a49; font-size: 15px;
  padding: 6px 0; list-style: none;
}
gem-download-form details > summary::-webkit-details-marker { display: none; }
gem-download-form details > summary::after { content: ' ▸'; color: #6c8089; }
gem-download-form details[open] > summary::after { content: ' ▾'; }

/* 2-column grid of categorized checkbox groups (e.g. trackers grouped by
   program area inside a <details> on the Subscribe form). */
gem-download-form .tracker-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px;
  padding: 16px 0 4px;
}
gem-download-form .tracker-grid .category h4 {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: #6c8089;
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid #d4cdb8;
}
gem-download-form .tracker-grid .category label {
  font-weight: 400; font-size: 14px; color: #0b3a49;
  padding: 4px 0;
}