/* =====================================================================================================================
   Forms area CSS (forms agent) — loaded by inc/forms.php only on pages that hold a Formidable form block.
   1. Form-page layout and aside panel (data-forms="…" hooks from .build/content/forms/_parts.js).
   2. Bridge between Formidable 6.35 markup and DESIGN §8.17 (dds.css §23 holds the base form skin).
   Colours come only from tone variables (DESIGN §4.7); forms sit on paper.
   ===================================================================================================================== */

/* ---------- 1. Layout: form column (max 720px) + aside ---------- */
[data-forms="layout"]{ display:grid; grid-template-columns:minmax(0, 720px) minmax(0, 1fr); gap:56px clamp(48px, 6vw, 96px); align-items:start; }
[data-forms="main"] > [data-forms="title"]{ margin:0 0 28px; font-size:clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
[data-forms="aside"]{ position:sticky; top:120px; display:grid; gap:16px; align-content:start; }
.admin-bar [data-forms="aside"]{ top:152px; }
/* 901–1024 (Polish R2): form and aside stay side by side (a narrower, still sticky aside), like the two-column heroes
   above them (D13); they stack at ≤900. */
@media (max-width:1024px){
  [data-forms="layout"]{ grid-template-columns:minmax(0,1fr) 300px; column-gap:40px; }
  [data-forms="block"]{ padding:20px; gap:14px; }
  [data-forms="block"] .dds-icon-tile{ display:none; } /* the 300 px column keeps a readable measure (as on phones) */
}
@media (max-width:900px){
  [data-forms="layout"]{ grid-template-columns:minmax(0,1fr); }
  [data-forms="aside"]{ position:static; max-width:720px; }
  [data-forms="block"]{ padding:22px 24px; gap:16px; }
  [data-forms="block"] .dds-icon-tile{ display:grid; }
}

/* Aside panel: one bordered paper box, blocks separated by hairlines (DESIGN §8.12 personal aside, extended). */
[data-forms="panel"]{ background:var(--surface); border:1px solid var(--line); }
[data-forms="block"]{ display:flex; align-items:flex-start; gap:16px; padding:22px 24px; font-size:.9375rem; line-height:1.55; color:var(--fg-2); }
[data-forms="block"] + [data-forms="block"]{ border-top:1px solid var(--line); }
[data-forms="block"] .dds-icon-tile{ width:44px; height:44px; }
[data-forms="block"] .dds-icon-tile svg{ width:22px; height:22px; }
[data-forms="block-body"]{ display:grid; gap:10px; min-width:0; flex:1; }
[data-forms="block-body"] .dds-aside__title{ margin:2px 0 0; }
[data-forms="block-body"] a:not(.dds-btn){ font-weight:600; overflow-wrap:anywhere; }
[data-forms="block-body"] .dds-btns{ margin-top:4px; }
[data-forms="block-body"] .dds-checks{ display:grid; gap:8px; margin:0; font-size:.9375rem; }
[data-forms="next"]{ display:grid; gap:10px; margin:0; padding:0; list-style:none; counter-reset:dds-next; }
[data-forms="next"] > li{ position:relative; padding-left:38px; counter-increment:dds-next; color:var(--fg-2); }
[data-forms="next"] > li::before{ content:counter(dds-next, decimal-leading-zero); position:absolute; left:0; top:.2em; font:500 .75rem/1.4 var(--f-mono); letter-spacing:.12em; color:var(--eyebrow); }
[data-forms="social"]{ display:flex; flex-wrap:wrap; gap:8px; padding:16px 24px; border-top:1px solid var(--line); }
[data-forms="social-link"]{ display:inline-grid; place-items:center; width:44px; height:44px; border:1px solid var(--line); color:var(--fg); }
[data-forms="social-link"]:hover{ border-color:var(--fg); color:var(--link); }
[data-forms="social-link"] svg{ width:22px; height:22px; }
[data-forms="links-label"]{ margin-top:8px; }
[data-forms="aside"] .dds-links{ margin:0; }
@media (max-width:767px){
  [data-forms="block"]{ padding:18px; gap:14px; }
  [data-forms="block"] .dds-icon-tile{ display:none; } /* as DESIGN does for rows and the route card on phones */
}

/* ---------- 2. Formidable → DESIGN §8.17 bridge (dds.css §23 is the base skin) ---------- */
.dds-form{ --f-gap:22px; }
.dds-form .frm_forms.with_frm_style{ margin:0; }
.dds-form .frm_forms.with_frm_style .frm_form_fields > fieldset{ padding:0; }
.dds-form .frm_forms.with_frm_style .frm_fields_container{ row-gap:0; }
.dds-form .frm_forms.with_frm_style .frm_form_field{ margin-bottom:var(--f-gap); }

/* Step opener (HTML field): mono step label + step heading (an H2 set at H3 size) + optional intro. */
.dds-form .frm_forms.with_frm_style .dds-frm-step{ margin-bottom:26px; }
.dds-form .dds-form-step{ margin-bottom:10px; }
.dds-form .dds-form-title{ margin:0; font-size:1.625rem; line-height:1.15; letter-spacing:-.008em; }
.dds-form .dds-form-intro{ margin:10px 0 0; max-width:40em; font-size:.9375rem; line-height:1.5; color:var(--fg-2); }
.dds-form .dds-form-subtitle{ margin:0; font-size:1.375rem; line-height:1.3; }
/* The step heading takes focus after a page turn (inc/forms.php) so screen readers announce the step; it isn't a
   control, so it shows no focus ring. */
.dds-form .dds-form-title:focus{ outline:none; }
@media (max-width:767px){ .dds-form .dds-form-title{ font-size:1.5rem; } .dds-form .dds-form-subtitle{ font-size:1.25rem; } }

/* Help text that sits between a group label and its option cards (desc_top). */
.dds-form .frm_forms.with_frm_style .frm_primary_label + .frm_description{ margin:-2px 0 10px; }

/* Labels: Formidable's flex/col classes can't shrink the label; keep it a block above the field. */
.dds-form .frm_forms.with_frm_style .frm_top_container .frm_primary_label{ width:auto; max-width:none; float:none; }
.dds-form .frm_forms.with_frm_style .frm_none_container > .frm_primary_label{ display:none; }

/* Option cards: one column for single checkboxes (consents, acknowledgements), three for Yes / No / Not sure. */
.dds-form .frm_forms.with_frm_style .dds-frm-single .frm_opt_container{ grid-template-columns:minmax(0,1fr); }
.dds-form .frm_forms.with_frm_style .dds-frm-3col .frm_opt_container{ grid-template-columns:repeat(3, minmax(0,1fr)); }
/* A label is block (not flex) so a link inside the text (consent → Privacy policy) stays inline; the control is
   positioned in the card's left padding. */
.dds-form .frm_forms.with_frm_style :is(.frm_radio, .frm_checkbox) label{ position:relative; display:block; padding:14px 14px 14px 46px; text-wrap:pretty; }
.dds-form .frm_forms.with_frm_style :is(.frm_radio, .frm_checkbox) label > input{ position:absolute; left:14px; top:15px; margin:0; }
.dds-form .frm_forms.with_frm_style .dds-frm-single :is(.frm_radio, .frm_checkbox) label{ font-size:.9375rem; line-height:1.5; }
.dds-form .frm_forms.with_frm_style :is(.frm_radio, .frm_checkbox) label a{ font-weight:600; }
/* Formidable draws its own boxes for radios/checkboxes; keep the native control (accent-color = Ink). */
.dds-form .frm_forms.with_frm_style :is(.frm_radio, .frm_checkbox) input:is([type=radio], [type=checkbox]){ appearance:auto; -webkit-appearance:auto; width:20px !important; min-width:20px !important; height:20px !important; min-height:0; padding:0; border:0; background:none; box-shadow:none; } /* Formidable forces 16px with !important; DESIGN §8.17 asks for 20px */
.dds-form .frm_forms.with_frm_style :is(.frm_radio, .frm_checkbox) input:is([type=radio], [type=checkbox])::before{ content:none; display:none; }
.dds-form .frm_forms.with_frm_style :is(.frm_radio, .frm_checkbox) input:focus{ outline:none; }

/* Sections on step 4 (one per chosen service): H3 with an ink rule above. */
.dds-form .frm_forms.with_frm_style .frm_section_heading{ margin:6px 0 var(--f-gap); padding:0; }
.dds-form .frm_forms.with_frm_style .frm_section_heading > h3[class*="frm_pos_"]{ margin:0 0 20px; padding:20px 0 0; border:0; border-top:1px solid var(--rule); background:none; font:500 1.375rem/1.3 var(--f-head); color:var(--fg); }
.dds-form .frm_forms.with_frm_style .frm_section_heading .frm_form_field:last-child{ margin-bottom:8px; }
.dds-form .frm_forms.with_frm_style .dds-frm-general{ padding-top:22px; border-top:1px solid var(--rule); }
.dds-form .frm_forms.with_frm_style .dds-frm-section-intro{ margin-top:12px; padding-top:22px; border-top:1px solid var(--rule); }

/* Notices inside a form (HTML fields). */
.dds-form .frm_forms.with_frm_style .frm_html_container .dds-notice{ margin:0; }
.dds-form .frm_forms.with_frm_style .frm_html_container .dds-notice a{ color:var(--contrast); font-weight:600; }

/* Rootline as waypoints (DESIGN §8.17): one column per step, no wrapping (Formidable would fold steps into "···"
   when a step wraps), Formidable's own connector lines and min-widths off, titles left-aligned under the dots. */
.dds-form .frm_forms.with_frm_style .frm_rootline_group{ text-align:left; width:auto; padding:0; border:0; background:transparent; }
.dds-form .frm_forms.with_frm_style .frm_rootline_3{ --steps:3; } .dds-form .frm_forms.with_frm_style .frm_rootline_4{ --steps:4; }
.dds-form .frm_forms.with_frm_style .frm_rootline_5{ --steps:5; } .dds-form .frm_forms.with_frm_style .frm_rootline_6{ --steps:6; }
.dds-form .frm_forms.with_frm_style .frm_rootline > .frm_rootline_single{ min-width:0; }
.dds-form .frm_forms.with_frm_style .frm_rootline.frm_show_lines > .frm_rootline_single::after{ content:none; }
.dds-form .frm_forms.with_frm_style .frm_rootline .frm_rootline_title{ padding:0; text-align:left; text-wrap:balance; }
.dds-form .frm_forms.with_frm_style .frm_rootline .frm_rootline_single input{ display:block; flex:none; }
.dds-form .frm_forms.with_frm_style .frm_rootline .frm_rootline_single input.frm_page_back:is(:hover, :focus-visible){ background:var(--contrast); }
.dds-form .frm_forms.with_frm_style .frm_rootline .frm_rootline_single input:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; }
.dds-form .frm_forms.with_frm_style .frm_rootline_show_hidden_steps_btn{ display:none !important; }
/* Formidable paints the focused group white (var(--bg-color-active)) with a glow; on Paper that read as a glitch.
   Focus after a page turn now goes to the step heading (inc/forms.php); the group keeps a ring only for keyboard focus. */
.dds-form .frm_forms.with_frm_style .frm_rootline_group:focus{ background:transparent; box-shadow:none; border-color:transparent; }
.dds-form .frm_forms.with_frm_style .frm_rootline_group:focus:not(:focus-visible){ outline:none; }
.dds-form .frm_forms.with_frm_style .frm_rootline_group:focus-visible{ outline:2px solid var(--accent-2); outline-offset:6px; }
/* Five titles don't fit a phone: only the current step's title shows, under its dot (no wrapping). Steps in the
   second half hang it leftwards from the dot's right edge, so it can't run past the form edge (checked at 320).
   Polish R3: the same at 901–1024, where the form shares the row with the 300 px aside (P2-09) and five titles
   crowded to 0–4 px apart and wrapped; the "Step N / 5 · Title" line above the fields names the step in full. */
@media (max-width:767px), (min-width:901px) and (max-width:1024px){
  .dds-form .frm_forms.with_frm_style .frm_rootline_5 .frm_rootline_title, .dds-form .frm_forms.with_frm_style .frm_rootline_6 .frm_rootline_title{ display:none; }
  .dds-form .frm_forms.with_frm_style :is(.frm_rootline_5, .frm_rootline_6){ padding-bottom:28px; }
  .dds-form .frm_forms.with_frm_style :is(.frm_rootline_5, .frm_rootline_6) > .frm_current_page .frm_rootline_title{ display:block; position:absolute; top:36px; left:0; white-space:nowrap; }
  .dds-form .frm_forms.with_frm_style :is(.frm_rootline_5, .frm_rootline_6) > .frm_current_page:nth-child(n+4) .frm_rootline_title{ left:auto; right:calc(100% - 24px); text-align:right; }
}
@media (max-width:767px){
  /* Option cards are one column on phones (DESIGN §8.17), Yes / No / Not sure included. */
  .dds-form .frm_forms.with_frm_style .dds-frm-3col .frm_opt_container{ grid-template-columns:minmax(0,1fr); }
}

/* Buttons: Back + Next/Send row; the arrow-less labels come from the form. */
.dds-form .frm_forms.with_frm_style .frm_submit{ margin-top:30px; }
.dds-form .frm_forms.with_frm_style .frm_fields_container > .frm_form_field:has(> .frm_submit){ margin-bottom:0; }
.dds-form .frm_forms.with_frm_style .frm_submit :is(button, input)[type=submit]{ min-width:180px; }
.dds-form .frm_forms.with_frm_style .frm_submit .frm_prev_page{ min-width:0; }
/* Phones: the primary action first, Back under it (DESIGN §8.17). Formidable's own
   `.frm_submit.frm_flex button.frm_button_submit ~ .frm_prev_page{order:-1}` loads after dds.css with the same
   specificity as dds.css's order:2, so it won; this selector is more specific. */
@media (max-width:767px){
  .dds-form .frm_forms.with_frm_style .frm_submit.frm_flex :is(button, input).frm_prev_page{ order:2; }
}

/* Success message (on-submit action HTML). */
.dds-form .frm_forms.with_frm_style .frm_message{ padding:24px 26px; }
.dds-form .frm_forms.with_frm_style .frm_message > * + *{ margin-top:10px; }
.dds-form .frm_forms.with_frm_style .frm_message a{ color:var(--contrast); font-weight:600; }
.dds-form .frm_forms.with_frm_style .frm_message .dds-form-done{ margin:0 0 4px; font-size:1.5rem; line-height:1.2; }
.dds-form .frm_forms.with_frm_style .frm_message .dds-form-links{ font-size:.9375rem; }

/* File upload (Dropzone): the message box is the full-width dashed drop area on white; text ≥ 14px. */
.dds-form .frm_forms.with_frm_style .frm_dropzone, .dds-form .frm_forms.with_frm_style .frm_dropzone.dz-clickable{ max-width:none; width:100%; min-height:0; margin:0; padding:0; border:0; background:none; box-shadow:none; }
.dds-form .frm_forms.with_frm_style .frm_dropzone .dz-message{ margin:0; padding:22px 20px; border:1.5px dashed var(--contrast-3); border-radius:2px; background:var(--white); color:var(--contrast); text-align:center; }
.dds-form .frm_forms.with_frm_style .frm_dropzone:is(:hover, .dz-drag-hover) .dz-message, .dds-form .frm_forms.with_frm_style .frm_dropzone:has(button:focus-visible) .dz-message{ border-color:var(--contrast); }
.dds-form .frm_forms.with_frm_style .frm_blank_field .frm_dropzone .dz-message{ border-color:var(--error); }
.dds-form .frm_forms.with_frm_style .frm_dropzone .frmsvg{ color:var(--forest); }
.dds-form .frm_forms.with_frm_style .frm_dropzone .frm_upload_text button{ margin:0; padding:2px 0; background:none; border:0; color:var(--contrast); font:600 1rem/1.4 var(--f-body); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; cursor:pointer; }
.dds-form .frm_forms.with_frm_style .frm_dropzone .frm_upload_text button:focus-visible{ outline:2px solid var(--accent-2); outline-offset:3px; }
/* Formidable's "Maximum file size: 10MB" line repeats the field's help text ("Up to 3 files: JPG, PNG or PDF, 10 MB each."). */
.dds-form .frm_forms.with_frm_style .frm_dropzone .frm_small_text{ display:none; }
.dds-form .frm_forms.with_frm_style .frm_dropzone .dz-preview{ text-align:left; }
.dds-form .frm_forms.with_frm_style .frm_dropzone .dz-preview :is(.dz-details, .dz-filename, .dz-size){ font-size:.875rem; color:var(--contrast); }
.dds-form .frm_forms.with_frm_style .frm_dropzone .dz-error-message{ color:var(--error); font-size:.875rem; }

/* Date picker (jQuery UI, appended to <body>, so outside .dds-form): palette tones, 14px+ text. */
#ui-datepicker-div.frm-datepicker{ padding:10px; background:var(--white); border:1px solid var(--contrast-3); border-radius:2px; box-shadow:8px 8px 0 rgba(19,36,29,.10); font-family:var(--f-body); }
#ui-datepicker-div.frm-datepicker .ui-datepicker-header{ margin:-10px -10px 8px; padding:10px 40px; background:var(--canopy); border:0; border-radius:0; color:var(--base-3); }
#ui-datepicker-div.frm-datepicker .ui-datepicker-title select{ padding:4px 6px; background:var(--white); border:1px solid var(--contrast-3); border-radius:2px; color:var(--contrast); font:400 .875rem/1.3 var(--f-body); }
#ui-datepicker-div.frm-datepicker :is(.ui-datepicker-prev, .ui-datepicker-next){ top:50%; transform:translateY(-50%); color:var(--base-3); cursor:pointer; }
#ui-datepicker-div.frm-datepicker th{ font:500 .75rem/1.4 var(--f-mono); letter-spacing:.06em; color:var(--contrast-2); }
#ui-datepicker-div.frm-datepicker td a, #ui-datepicker-div.frm-datepicker td span{ background:var(--white); border:1px solid transparent; border-radius:2px; color:var(--contrast); font-size:.875rem; text-align:center; }
#ui-datepicker-div.frm-datepicker td a:hover{ border-color:var(--contrast); background:var(--base-3); }
#ui-datepicker-div.frm-datepicker td .ui-state-highlight{ border-color:var(--contrast-3); }
#ui-datepicker-div.frm-datepicker td .ui-state-active, #ui-datepicker-div.frm-datepicker .ui-datepicker-current-day a{ background:var(--contrast); border-color:var(--contrast); color:var(--base-3); }
#ui-datepicker-div.frm-datepicker .ui-state-disabled span{ color:var(--contrast-3); opacity:.6; }

/* Surveys add-on — NPS (0–10): white keys with a Muted edge; checked = Ink fill with Paper text; keyboard focus =
   the Signal Deep ring (Formidable fills on focus too, which looked like a selection). */
.dds-form .frm_forms.with_frm_style .frm_nps__buttons{ justify-content:flex-start; }
.dds-form .frm_forms.with_frm_style .frm_nps__button{ height:48px; border:1.5px solid var(--contrast-3); border-radius:2px; background:var(--white); color:var(--contrast); font:600 1rem/1 var(--f-body); }
.dds-form .frm_forms.with_frm_style .frm_nps__button:hover{ border-color:var(--contrast); box-shadow:none; }
.dds-form .frm_forms.with_frm_style .frm_nps__buttons input[type=radio]:focus + .frm_nps__button{ background:var(--white); color:var(--contrast); border-color:var(--contrast); box-shadow:none; }
.dds-form .frm_forms.with_frm_style .frm_nps__buttons input[type=radio]:focus-visible + .frm_nps__button{ outline:2px solid var(--accent-2); outline-offset:3px; }
.dds-form .frm_forms.with_frm_style .frm_nps__buttons input[type=radio]:checked + .frm_nps__button{ background:var(--contrast); border-color:var(--contrast); color:var(--base-3); }
.dds-form .frm_forms.with_frm_style .frm_nps__statements{ margin:8px 0 0; font-size:.875rem; color:var(--contrast-3); }
.dds-form .frm_forms.with_frm_style .frm_blank_field .frm_nps__button{ border-color:var(--error); }

/* Likert grid (desktop): no card boxes per cell, a 44px target; the chosen cell shows the selected-card state. */
.dds-form .frm_forms.with_frm_style .frm_likert > .form-field:not(:first-child){ border-top-color:var(--line); }
.dds-form .frm_forms.with_frm_style .frm_likert > .form-field{ padding-block:8px; }
.dds-form .frm_forms.with_frm_style .frm_likert__heading{ background:none; font:500 .75rem/1.3 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--contrast-2); }
.dds-form .frm_forms.with_frm_style .frm_likert > .form-field > .frm_primary_label{ margin:0; font-size:.9375rem; line-height:1.35; }
.dds-form .frm_forms.with_frm_style .frm_likert > .form-field .frm_opt_container{ gap:8px; }
.dds-form .frm_forms.with_frm_style .frm_likert:not(.frm_likert--mobile) > .form-field :is(.frm_radio, .frm_checkbox) label{ min-height:44px; padding:0; border:1.5px solid transparent; background:transparent; box-shadow:none; }
.dds-form .frm_forms.with_frm_style .frm_likert:not(.frm_likert--mobile) > .form-field :is(.frm_radio, .frm_checkbox) label:hover{ border-color:var(--contrast-3); background:var(--white); }
.dds-form .frm_forms.with_frm_style .frm_likert:not(.frm_likert--mobile) > .form-field :is(.frm_radio, .frm_checkbox) label:has(input:checked){ border-color:var(--contrast); background:var(--accent-3); }
.dds-form .frm_forms.with_frm_style .frm_likert:not(.frm_likert--mobile) > .form-field :is(.frm_radio, .frm_checkbox) label > input{ top:50%; left:50%; transform:translate(-50%, -50%); }

/* Likert on phones (the Surveys add-on adds .frm_likert--mobile when the grid doesn't fit or the screen is under 601
   px). Each row = its label + a segmented 1–5 scale of square keys styled like the NPS keys (48 px, Ink fill when
   chosen) + a small full-width "Doesn’t apply" toggle under it. The scale's end labels ("1 – Poor" / "5 – Excellent")
   show once, under the first row's keys; their text comes from the field's own column labels (inc/forms.php sets
   --dds-likert-low / --dds-likert-high) and is hidden from screen readers, which already hear each key as "1 Poor" …
   The native radios stay (Tab into a row, arrow keys to choose); the visible number is a CSS counter. */
.dds-form .frm_forms.with_frm_style .frm_likert--mobile > .form-field{ padding:0; border:0; }
.dds-form .frm_forms.with_frm_style .frm_likert--mobile > .form-field > .frm_primary_label{ margin:24px 0 10px; font-size:.9375rem; line-height:1.35; }
.dds-form .frm_forms.with_frm_style .frm_likert--mobile > .frm_likert__heading + .form-field > .frm_primary_label{ margin-top:14px; }
.dds-form .frm_forms.with_frm_style .frm_likert--mobile .frm_opt_container{ display:grid; grid-template-columns:repeat(5, 48px); gap:6px; padding:0; counter-reset:dds-likert; }
.dds-form .frm_forms.with_frm_style .frm_likert--mobile .frm_radio:not(:has(input[value="0"])){ counter-increment:dds-likert; }
.dds-form .frm_forms.with_frm_style .frm_likert--mobile .frm_radio:not(:has(input[value="0"])) label{ display:block; width:48px; height:48px; min-height:0; padding:0; overflow:hidden; text-indent:-9999px; border:1.5px solid var(--contrast-3); border-radius:2px; background:var(--white); box-shadow:none; color:var(--contrast); cursor:pointer; }
.dds-form .frm_forms.with_frm_style .frm_likert--mobile .frm_radio:not(:has(input[value="0"])) label::before{ content:counter(dds-likert); position:absolute; inset:0; display:grid; place-items:center; text-indent:0; font:600 1rem/1 var(--f-body); }
.dds-form .frm_forms.with_frm_style .frm_likert--mobile .frm_radio:not(:has(input[value="0"])) label > input{ position:absolute; inset:0; top:0; left:0; width:100% !important; min-width:0 !important; height:100% !important; margin:0; opacity:0; cursor:pointer; }
.dds-form .frm_forms.with_frm_style .frm_likert--mobile .frm_radio:not(:has(input[value="0"])) label:hover{ border-color:var(--contrast); background:var(--white); }
.dds-form .frm_forms.with_frm_style .frm_likert--mobile .frm_radio:not(:has(input[value="0"])) label:has(input:checked){ border-color:var(--contrast); background:var(--contrast); box-shadow:none; color:var(--base-3); }
.dds-form .frm_forms.with_frm_style .frm_likert--mobile .frm_radio:has(input[value="0"]){ grid-column:1 / -1; }
.dds-form .frm_forms.with_frm_style .frm_likert--mobile .frm_radio:has(input[value="0"]) label{ display:flex; align-items:center; gap:10px; min-height:44px; padding:0; border:0; background:none; box-shadow:none; font-size:.875rem; line-height:1.3; color:var(--fg-2); }
.dds-form .frm_forms.with_frm_style .frm_likert--mobile .frm_radio:has(input[value="0"]) label > input{ position:static; flex:none; }
.dds-form .frm_forms.with_frm_style .frm_likert--mobile .frm_radio:has(input[value="0"]) label:has(input:checked){ background:none; box-shadow:none; color:var(--contrast); font-weight:600; }
/* End labels, first row only: row 2 of its grid; "Doesn’t apply" moves to row 3. */
.dds-form .frm_forms.with_frm_style .frm_likert--mobile > .frm_likert__heading + .form-field .frm_opt_container::before,
.dds-form .frm_forms.with_frm_style .frm_likert--mobile > .frm_likert__heading + .form-field .frm_opt_container::after{ grid-row:2; font-size:.875rem; line-height:1.3; color:var(--contrast-3); white-space:nowrap; }
.dds-form .frm_forms.with_frm_style .frm_likert--mobile > .frm_likert__heading + .form-field .frm_opt_container::before{ content:var(--dds-likert-low, "") / ""; grid-column:1 / span 2; justify-self:start; }
.dds-form .frm_forms.with_frm_style .frm_likert--mobile > .frm_likert__heading + .form-field .frm_opt_container::after{ content:var(--dds-likert-high, "") / ""; grid-column:4 / span 2; justify-self:end; }
.dds-form .frm_forms.with_frm_style .frm_likert--mobile > .frm_likert__heading + .form-field .frm_radio:has(input[value="0"]){ grid-row:3; }

/* Error state (DESIGN §8.17): 2px Error border on fields and on the option cards of a required group. */
.dds-form .frm_forms.with_frm_style .frm_blank_field :is(input[type=text], input[type=email], input[type=tel], input[type=url], input[type=number], select, textarea){ border-width:2px; border-color:var(--error); }
.dds-form .frm_forms.with_frm_style .frm_blank_field :is(.frm_radio, .frm_checkbox) label{ border-color:var(--error); }