/* Shared document page layout. Centers inside .platform-content (after the 40px brand rail). */
@media (max-width: 767px) {
  :root {
    --platform-page-gutter: 20px;
  }
}

@media (max-width: 479px) {
  :root {
    --platform-page-gutter: 16px;
  }
}

.platform-page {
  --platform-page-max: var(--platform-page-max-standard, 1040px);
  box-sizing: border-box;
  width: 100%;
  max-width: min(100%, calc(var(--platform-page-max) + 2 * var(--platform-page-gutter, 32px)));
  margin-inline: auto;
  padding-inline: var(--platform-page-gutter, 32px);
  padding-top: 0;
  padding-bottom: var(--platform-page-pad-bottom, 64px);
  min-width: 0;
}

.platform-page--narrow {
  --platform-page-max: var(--platform-page-max-narrow, 720px);
}

.platform-page--standard {
  --platform-page-max: var(--platform-page-max-standard, 1040px);
}

.platform-page--wide {
  --platform-page-max: var(--platform-page-max-wide, 1080px);
}

.platform-page .module-bar,
.platform-page .page {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.platform-page .module-bar,
.platform-page.dash .dash-intro,
.platform-content .app-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: 0;
  padding-top: var(--platform-header-title-top, 8px);
  padding-bottom: 0;
  padding-left: var(--platform-header-title-x);
  padding-right: var(--platform-page-gutter, 32px);
  min-height: calc(var(--platform-header-title-top, 8px) + var(--platform-header-min-height, 40px));
}

.platform-page .module-bar .platform-module-name,
.platform-page.dash .dash-intro .platform-module-name,
.platform-content .app-header .platform-module-name {
  margin: 0;
  height: var(--platform-header-min-height, 40px);
  line-height: var(--platform-header-min-height, 40px);
  display: flex;
  align-items: center;
}

.platform-page.dash .dash-intro {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.platform-page .page {
  padding-top: var(--platform-page-gap, 18px);
  padding-bottom: 0;
}

.platform-page .intro {
  margin-bottom: var(--platform-page-gap, 18px);
}

/* Form controls stay transparent. Focus is the underline, not a filled box or ink outline. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]),
select,
textarea {
  outline: none;
  background-color: transparent;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]):focus,
select:focus,
textarea:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="hidden"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: none;
  background-color: transparent;
}

.platform-page.dash {
  padding-top: 0;
  padding-bottom: 6rem;
}

@media (max-width: 640px) {
  .platform-page.dash {
    padding-bottom: 4rem;
  }
}

@media print {
  .platform-page {
    max-width: none;
    margin: 0;
    padding: 0;
  }
}