Template:PAI Article/styles.css

/* * Physical AI Identity — Article TemplateStyles v3 * MediaWiki 1.46.2 / TemplateStyles (sanitized-css) * Replaces Template:PAI Article/styles.css * Deliberately scoped to PAI components; no global paragraph hiding. */

/* 1. Shared component foundations */
.pai-infobox,
.pai-navbox {
  box-sizing: border-box;
  max-width: 100%;
  border: 1px solid rgba(128, 128, 128, 0.42);
  border-collapse: collapse;
  background-color: var(--background-color-neutral-subtle, #f8f9fa);
  color: var(--color-base, #202122);
  font-size: 0.91em;
  line-height: 1.5;
}
.pai-infobox th,
.pai-infobox td,
.pai-navbox th,
.pai-navbox td {
  box-sizing: border-box;
  vertical-align: top;
  overflow-wrap: break-word;
}
.pai-infobox a,
.pai-navbox a,
.pai-notice a,
.pai-note a {
  overflow-wrap: anywhere;
}

/* 2. Desktop infobox — floats beside the introduction */
.pai-infobox {
  float: right;
  clear: right;
  width: 21em;
  max-width: 100%;
  margin: 0 0 1.15em 1.25em;
  padding: 0;
  table-layout: auto;
}
.pai-infobox th,
.pai-infobox td {
  border: 1px solid rgba(128, 128, 128, 0.25);
  padding: 0.45em 0.65em;
}
.pai-infobox tr > th:not(.pai-infobox-heading):not(.pai-infobox-section),
.pai-infobox .pai-infobox-label {
  width: 37%;
  background-color: rgba(100, 110, 125, 0.11);
  text-align: left;
  font-weight: 600;
}
.pai-infobox tr > td,
.pai-infobox .pai-infobox-value {
  overflow-wrap: anywhere;
}
.pai-infobox .pai-infobox-heading {
  width: auto;
  border-top: 3px solid #36c;
  background-color: rgba(51, 102, 204, 0.13);
  color: var(--color-base, #202122);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.15em;
  line-height: 1.35;
  text-align: center;
  padding: 0.65em 0.7em;
}
.pai-infobox .pai-infobox-subtitle {
  width: auto;
  background-color: var(--background-color-base, #fff);
  color: var(--color-subtle, #54595d);
  text-align: center;
  font-size: 0.94em;
  font-weight: 400;
  padding: 0.45em 0.65em;
}
.pai-infobox .pai-infobox-section {
  width: auto;
  background-color: rgba(100, 110, 125, 0.18);
  text-align: center;
  font-weight: 700;
}
.pai-infobox .pai-infobox-image,
.pai-infobox .pai-infobox-caption {
  background-color: var(--background-color-base, #fff);
  text-align: center;
}
.pai-infobox .pai-infobox-image {
  padding: 0.65em;
}
.pai-infobox .pai-infobox-image img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
.pai-infobox .pai-infobox-caption {
  color: var(--color-subtle, #54595d);
  font-size: 0.9em;
  line-height: 1.45;
}

/* 3. Bottom-of-article navbox */
.pai-navbox {
  clear: both;
  width: 100%;
  margin: 1.2em 0 0.8em;
  padding: 0;
  table-layout: auto;
}
.pai-navbox th,
.pai-navbox td {
  border: 1px solid rgba(128, 128, 128, 0.25);
  padding: 0.5em 0.75em;
}
.pai-navbox .pai-navbox-title,
.pai-navbox tr:first-child > th {
  border-top: 3px solid #36c;
  background-color: rgba(51, 102, 204, 0.13);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.06em;
  font-weight: 700;
  text-align: center;
  padding: 0.6em 0.7em;
}
.pai-navbox .pai-navbox-label,
.pai-navbox tr:not(:first-child) > th {
  width: 22%;
  background-color: rgba(100, 110, 125, 0.11);
  font-weight: 600;
  text-align: left;
}
.pai-navbox td {
  line-height: 1.65;
}

/* 4. Notices and hatnotes */
.pai-notice,
.pai-note {
  box-sizing: border-box;
  max-width: 100%;
  color: var(--color-base, #202122);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.pai-notice {
  display: block;
  margin: 0.85em 0;
  padding: 0.65em 0.85em;
  border: 1px solid rgba(128, 128, 128, 0.4);
  border-left: 4px solid #72777d;
  background-color: rgba(100, 110, 125, 0.07);
}
.pai-notice-title {
  display: block;
  margin-bottom: 0.2em;
  font-weight: 700;
}
.pai-note {
  display: block;
  margin: 0.8em 0;
  padding: 0.65em 0.85em;
  border: 1px solid rgba(51, 102, 204, 0.35);
  border-left: 3px solid #36c;
  background-color: rgba(51, 102, 204, 0.07);
}
.pai-notice-info {
  border-left-color: #36c;
  background-color: rgba(51, 102, 204, 0.07);
}
.pai-notice-success {
  border-left-color: #14866d;
  background-color: rgba(20, 134, 109, 0.08);
}
.pai-notice-warning {
  border-left-color: #b47a00;
  background-color: rgba(216, 150, 0, 0.09);
}
.pai-notice-error {
  border-left-color: #c33;
  background-color: rgba(204, 51, 51, 0.07);
}
.pai-hatnote {
  display: block;
  margin: 0 0 0.75em;
  padding-left: 1.3em;
  color: var(--color-subtle, #54595d);
  font-size: 0.92em;
  font-style: italic;
  line-height: 1.5;
}

/* 5. Consistent content inside PAI tables */
.pai-infobox p,
.pai-navbox p {
  margin: 0.2em 0;
}
.pai-infobox ul,
.pai-navbox ul {
  margin: 0.25em 0;
  padding-left: 1.4em;
}
.pai-infobox li,
.pai-navbox li {
  margin: 0.15em 0;
}

/* 6. Responsive layout: avoid narrow text beside a large infobox */
@media screen and (max-width: 860px) {
  .pai-infobox {
    float: none;
    clear: both;
    width: 100%;
    max-width: 100%;
    margin: 0.25em 0 1em;
  }
  .pai-navbox,
  .pai-navbox tbody,
  .pai-navbox tr,
  .pai-navbox th,
  .pai-navbox td {
    display: block;
    box-sizing: border-box;
    width: 100%;
  }
  .pai-navbox tr {
    margin: 0;
  }
  .pai-navbox .pai-navbox-label,
  .pai-navbox tr:not(:first-child) > th {
    width: 100%;
    background-color: rgba(100, 110, 125, 0.17);
  }
  .pai-navbox td {
    padding: 0.55em 0.7em;
  }
}
@media screen and (max-width: 420px) {
  .pai-infobox,
  .pai-navbox {
    font-size: 0.9em;
  }
  .pai-infobox th,
  .pai-infobox td {
    padding: 0.42em 0.52em;
  }
  .pai-infobox tr > th:not(.pai-infobox-heading):not(.pai-infobox-section) {
    width: 40%;
  }
  .pai-notice,
  .pai-note {
    padding: 0.6em 0.7em;
  }
  .pai-hatnote {
    padding-left: 0.75em;
  }
}

/* 7. Print: preserve useful infobox information */
@media print {
  .pai-infobox {
    float: right;
    width: 19em;
    margin: 0 0 0.8em 1em;
    break-inside: avoid;
  }
  .pai-navbox {
    display: none;
  }
  .pai-notice,
  .pai-note {
    break-inside: avoid;
  }
}