/* Shared platform layout contract. See RWD_FORM_LAYOUT.md. Loaded last. */
:root {
  --field-height: 2.75rem;
  --field-label-gap: .5rem;
  --field-row-gap: 1.25rem;
  --field-column-gap: 1.5rem;
}
main, section, aside, form, fieldset { min-width: 0; }
fieldset { max-width: 100%; }
:is(.lead-row,.icon-grid,.contact-page,.qms-outro,.next-links,.media-layout,
    .visual-layout,.portal-layout,.project-shell,.project-file-layout,.project-files,
    .reports-grid,.form-grid,.project-form-row,.media-time) > * { min-width: 0; }
:is(.portal,.project-workspace,.media-editor,.visual-inspector,.notice-detail) {
  overflow-wrap: anywhere;
}
/* Consistent sizing for static and dynamically inserted form controls. */
:root body main :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea) {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: var(--field-height);
  margin: 0;
  padding: .625rem .75rem;
  font: inherit;
  font-size: 1rem;
  line-height: 1.5;
}
:root body main textarea { min-height: 8rem; resize: vertical; }
:root body main input[type=file] { overflow: hidden; }
:root body main input::file-selector-button { max-width: 100%; white-space: normal; }
/* Label above control, even in editors and toolbars; equal columns share edges. */
:root body main label:has(> :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea)):not(.honeypot) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: stretch;
  gap: var(--field-label-gap);
  min-width: 0;
  margin: 0 0 var(--field-row-gap);
  font-size: .875rem;
  line-height: 1.5;
  text-align: start;
}
:root body main label:has(> :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea)) > :is(input,select,textarea) {
  margin-block-start: auto;
}
:root body main label[for] { display: block; margin-block-end: var(--field-label-gap); font-size: .875rem; }
:root body main :is(.form-grid,.project-form-row,.media-time) {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: var(--field-row-gap) var(--field-column-gap);
  align-items: stretch;
}
:root body main :is(.form-grid,.project-form-row,.media-time,.compact-form) > label {
  margin-block: 0;
}
:root body main .compact-form { gap: var(--field-row-gap); }
/* Choice controls retain a compact, aligned column beside their text. */
:root body main label:has(> :is(input[type=checkbox],input[type=radio])) {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: .625rem;
  min-width: 0;
  margin-block: .75rem;
  font-size: .875rem;
  line-height: 1.5;
}
:root body main :is(input[type=checkbox],input[type=radio]) {
  flex: 0 0 1.125rem;
  width: 1.125rem;
  height: 1.125rem;
  min-height: 0;
  padding: 0;
  margin: .125rem 0 0;
}
:root body main :is(.check-grid,.menu-placements) {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(min(100%,12rem),1fr));
  gap: .75rem 1.5rem;
}
:root body main :is(.check-grid,.menu-placements) label { margin: 0; }
:root body main :is(.visual-toolbar,.translation-tools,.viewer-tools,.media-actions,.form-actions) {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
}
:root body main :is(.visual-toolbar,.translation-tools) > label { flex: 1 1 12rem; margin: 0; }
:root body main :is(.viewer-tools) > select { width: auto; flex: 1 1 10rem; }
:root body main :is(.media-actions,.form-actions,.viewer-tools) > button { margin: 0; }
:root body main button { min-height: 2.75rem; max-width: 100%; white-space: normal; }
:root body main :is(.tree-row,.option-line) { flex-wrap: wrap; }
:root body main :is(.tree-row,.option-line) input { flex: 1 1 12rem; min-width: 0; }
:root body main :is(.block-controls,.rich-toolbar,.block-toolbar) { display: flex; flex-wrap: wrap; gap: .5rem; }
:is(.project-card,.project-summary,.project-file,.quote-card,.media-entry,.translation-source,.report-row) { overflow-wrap: anywhere; }
.project-summary::after { content: ''; display: block; clear: both; }
:root body main .project-files { grid-template-columns: repeat(2,minmax(0,1fr)); }
:root body main .project-list { min-width: 0; }
:root body main .report-row { flex-wrap: wrap; gap: .5rem 1rem; }
:root body main .report-row strong { white-space: normal; }
/* Wide technical previews scroll locally, without widening the page. */
.document-preview,.project-tabs,.drawing-area { max-width: 100%; min-width: 0; }
.commerce-topbar { flex-wrap: wrap; }
.commerce-topbar > div { min-width: 0; overflow-wrap: anywhere; }
.commerce-topbar > div:last-child { flex-wrap: wrap; }
@media (max-width: 1000px) {
  :root body.commerce-admin main :is(.form-grid,.project-form-row,.media-time) { grid-template-columns: minmax(0,1fr); }
  :root body.commerce-admin main :is(.media-layout,.visual-layout,.project-shell) { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 760px) {
  :root body main :is(.form-grid,.project-form-row,.media-time,.project-files) { grid-template-columns: minmax(0,1fr); }
  :root body main .project-list { grid-template-columns: minmax(0,1fr); }
  :root body main .project-heading { flex-wrap: wrap; align-items: flex-start; }
  :root body main :is(.visual-toolbar,.translation-tools) > label { flex-basis: 100%; width: 100%; }
  :root body main :is(.inquiry-form,.compact-form) { padding: 1.25rem 1rem; }
  .footer-main,.footnote { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  /* Flowing header avoids overlapping content when account text wraps. */
  .commerce-topbar { position: relative; left: auto; margin-left: 64px; padding: .75rem; gap: .75rem; }
  .commerce-topbar .commerce-breadcrumb { max-width: 100%; font-size: .875rem; }
  :root body.commerce-admin > main { padding-top: 1.5rem; }
  :root body main :is(.tree-row,.option-line) input { flex-basis: 100%; }
  :root body main :is(.media-actions,.form-actions) { align-items: stretch; }
  :root body main :is(.media-actions,.form-actions) > :is(button,a) { width: 100%; text-align: center; }
  :root body main .project-thumbnail { float: none; margin: 0 0 1rem; max-width: 100%; }
}
/* Honor explicit hidden states, including conditional fields and the honeypot. */
[hidden] { display: none !important; }
/* Required markers belong to the label line, never a separate flex row. */
:root body main label > .field-label { display: block; color: inherit; }
:root body main .field-label > span { display: inline; color: var(--purple); }

/* Shared field tokens also cover dynamically inserted controls. */
:root{--field-height:var(--design-fieldHeight,2.75rem);--field-label-gap:var(--design-fieldLabelGap,.5rem);--field-row-gap:var(--design-formRowGap,1.25rem);--field-column-gap:var(--design-formColumnGap,1.5rem)}
:root body main :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]),select,textarea){border:var(--design-fieldBorderWidth,.0625rem) var(--design-fieldBorderStyle,solid) var(--design-fieldBorder,#817b87);border-radius:var(--design-fieldRadius,0);padding:var(--design-fieldPaddingY,.625rem) var(--design-fieldPaddingX,.75rem);font-size:var(--design-fieldFontSize,1rem);background:var(--design-fieldBg,#fff);color:var(--design-fieldText,#171719)}
:root body main textarea{min-height:var(--design-textareaHeight,8rem)}
:root body:not(.admin-theme) main label{color:var(--design-labelColor,#29242e);font-size:var(--design-labelFontSize,.875rem)}
:root body main :is(input,select,textarea):focus-visible{outline:2px solid var(--design-fieldFocus,#6d3f91);outline-offset:2px}
:root body main :is(input,textarea)::placeholder{color:var(--design-fieldPlaceholder,#666);opacity:1}
:root body.admin-theme main :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=color]),select,textarea){background:var(--design-adminFieldBg,#fff);color:var(--design-adminFieldText,#303030);border-color:var(--design-adminBorder,#aaa)}
:root body.admin-theme main :is(input,textarea)::placeholder{color:var(--design-adminPlaceholder,#666)}
:root body.admin-theme main :is(input,select,textarea):focus-visible{outline-color:var(--design-adminFocus,#6d3f91)}
:root body.admin-theme main label{color:var(--design-adminPanelText,#303030);font-size:var(--design-labelFontSize,.875rem)}
