/* DrMover Enterprise AI — shared responsive layout safety, DME-STAGE1-RWD-01.
   Loaded by TanStack root and standalone /vision.html.
   Complements existing Tailwind / marketing styles; does NOT suppress page overflow.
   No data, authorization, business logic, or locale dictionaries are changed.
*/

/* All page shells and semantic containers may shrink inside narrow viewports. */
:where(html, body, main, section, article, aside, nav, header, footer, form, fieldset, [role="region"], [role="tabpanel"], [role="dialog"]) {
  min-inline-size: 0;
}

/* CSS Grid's implicit auto minimum otherwise lets wide children resize the page. */
:where(.grid) > * {
  min-inline-size: 0;
}

/* Fixed native media dimensions must never force horizontal viewport scrolling. */
:where(img, video, iframe, canvas) {
  max-inline-size: 100%;
}
:where(input, select, textarea) {
  max-inline-size: 100%;
}

/* Long labels and unspaced translations should break inside a card, not widen it.
   This intentionally does not affect table cells or identifiers. */
:where(main, section, article, aside) :where(h1, h2, h3, h4, p, label) {
  overflow-wrap: anywhere;
}

/* Tables retain their actual column width and scroll inside an explicit region. */
:where(.dme-responsive-table, [role="region"][aria-label="Audited fields table"]) {
  max-inline-size: 100%;
  min-inline-size: 0;
  overscroll-behavior-inline: contain;
}

/* Mixed LTR identifiers remain readable inside Hebrew/Arabic pages once lang/dir
   are actually set by the separately controlled i18n integration. */
:where([dir="rtl"]) :where(input[type="email"], input[type="tel"], input[type="url"], input[type="number"]) {
  direction: ltr;
  unicode-bidi: isolate;
}

/* No body {overflow-x:hidden}, transforms, forced viewport widths, or global
   white-space:nowrap: those could mask clipped controls or inaccessible tables. */

/* DME-STAGE1-QA-A11Y-02 — focused, scoped additions based on real Lovable QA. */
@media(max-width:480px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .steps>.step{min-inline-size:0;max-inline-size:100%;overflow-wrap:anywhere;}
  .steps>.step :is(h2,h3,p,span,small,li){min-inline-size:0;overflow-wrap:anywhere;}
}
/* Narrow phones: confirmed 320px E2E overflow in Vision's 2-column steps
   and connector flex caption; keep the fix scoped to the standalone page. */
@media(max-width:359px){
  .steps{grid-template-columns:minmax(0,1fr);}
  .step:after{display:none;}
  .connector-copy{flex-wrap:wrap;}
}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid #38bdf8;
  outline-offset:2px;
}
/* No global overflow-x:hidden, no fixed widths, no clipped keyboard controls. */