/* Link-target page bodies (TODO 00001.5.24.a): the policy pages (.p-system-doc), Support (.p-system-support) and the
   AI assistant page (.p-system-assistant). Built from the guide only, in the About and Contact shape: the lead on the
   2px navy margin rule, then sections as hairline rows (heading 4 columns left, text 8 right from 992; stacked under).
   Support adds two help cards (the AI card is an AI surface: ai-surface ground, 1px ai edge, AI button); the assistant
   page adds the AI button and the example questions on the ai rule. Every rule is scoped under the three roots, since
   pattern CSS loads on every page. No motion (D9). */
:is(.p-system-doc, .p-system-support, .p-system-assistant) {
  box-sizing: border-box; background: var(--wp--preset--color--white);
  padding: var(--wp--preset--spacing--100) var(--wp--custom--gutter--desktop) var(--wp--custom--section--desktop);
}
:is(.p-system-doc, .p-system-support, .p-system-assistant) *,
:is(.p-system-doc, .p-system-support, .p-system-assistant) *::before,
:is(.p-system-doc, .p-system-support, .p-system-assistant) *::after { box-sizing: border-box; }
:is(.p-system-doc, .p-system-support, .p-system-assistant) .p-system-doc__inner { max-width: var(--wp--custom--layout--wide); margin-inline: auto; }

/* Intro: notice (policy pages), then the lead on the margin rule. */
:is(.p-system-doc, .p-system-support, .p-system-assistant) .p-system-doc__intro {
  display: flex; flex-direction: column; gap: var(--wp--preset--spacing--70); max-width: 48rem;
}
.p-system-doc .p-system-doc__notice { font-size: var(--wp--preset--font-size--small); line-height: 1.6; }
.p-system-doc .p-system-doc__notice > .p-icon { margin-top: 1px; }
:is(.p-system-doc, .p-system-support, .p-system-assistant) .p-system-doc__lead {
  margin: 0; padding-left: var(--wp--preset--spacing--60); border-left: 2px solid var(--wp--preset--color--navy);
  color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--body-l); line-height: 1.6;
}

/* Rows: 1px line hairlines, heading left, text right. */
:is(.p-system-doc, .p-system-support, .p-system-assistant) .p-system-doc__rows {
  margin-top: var(--wp--preset--spacing--100); border-top: 1px solid var(--wp--preset--color--line);
}
:is(.p-system-doc, .p-system-support, .p-system-assistant) .p-system-doc__row {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--wp--preset--spacing--100);
  padding: var(--wp--preset--spacing--70) 0; border-bottom: 1px solid var(--wp--preset--color--line);
}
:is(.p-system-doc, .p-system-support, .p-system-assistant) .p-system-doc__heading {
  margin: 0; color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--h-4);
  font-weight: var(--wp--custom--font-weight--h-4); line-height: 1.35;
}
:is(.p-system-doc, .p-system-support, .p-system-assistant) .p-system-doc__body {
  display: flex; flex-direction: column; gap: var(--wp--preset--spacing--50); max-width: 42rem;
}
:is(.p-system-doc, .p-system-support, .p-system-assistant) .p-system-doc__body p {
  margin: 0; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--body); line-height: 1.6;
}
:is(.p-system-doc, .p-system-support, .p-system-assistant) .p-system-doc__body a {
  color: var(--wp--preset--color--navy); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
:is(.p-system-doc, .p-system-support, .p-system-assistant) .p-system-doc__body a:focus-visible {
  outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--orange); outline-offset: var(--wp--custom--focus--offset);
}
.p-system-doc .p-system-doc__list { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); margin: 0; padding: 0; list-style: none; }
.p-system-doc .p-system-doc__list li {
  position: relative; padding-left: var(--wp--preset--spacing--60);
  color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--body); line-height: 1.6;
}
.p-system-doc .p-system-doc__list li::before {
  content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 2px; background: var(--wp--preset--color--navy);
}

/* AI button (guide section 8): ai fill, white label, sparkles 16px before it, navy ring, fill darkens 8 percent. */
:is(.p-system-support, .p-system-assistant) .p-btn--ai { background: var(--wp--preset--color--ai); color: var(--wp--preset--color--white); }
:is(.p-system-support, .p-system-assistant) .p-btn--ai:focus-visible { outline-color: var(--wp--preset--color--navy); }
:is(.p-system-support, .p-system-assistant) .p-btn .p-icon { flex: none; }

/* Support: two help cards, then Common questions. */
.p-system-support .p-system-support__cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--70);
  margin: var(--wp--preset--spacing--100) 0 0; padding: 0; list-style: none;
}
.p-system-support .p-system-support__card {
  display: flex; flex-direction: column; gap: var(--wp--preset--spacing--50); padding: var(--wp--preset--spacing--80);
  background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--line); border-radius: var(--wp--custom--radius--default);
}
.p-system-support .p-system-support__card--ai { background: var(--wp--preset--color--ai-surface); border-color: var(--wp--preset--color--ai); }
.p-system-support .p-system-support__name {
  display: flex; align-items: center; gap: var(--wp--preset--spacing--40); margin: 0;
  color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--h-3); font-weight: var(--wp--custom--font-weight--h-3); line-height: 1.25;
}
.p-system-support .p-system-support__name .p-icon { flex: none; color: var(--wp--preset--color--navy); }
.p-system-support .p-system-support__card--ai .p-system-support__name .p-icon { color: var(--wp--preset--color--ai); }
.p-system-support .p-system-support__text { margin: 0; max-width: 36rem; color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--body); line-height: 1.6; }
.p-system-support .p-system-support__action { margin: auto 0 0; padding-top: var(--wp--preset--spacing--40); }
.p-system-support .p-system-support__title {
  margin: var(--wp--custom--section--desktop) 0 0; color: var(--wp--preset--color--navy); font-size: var(--wp--preset--font-size--h-2);
  font-weight: var(--wp--custom--font-weight--h-2); letter-spacing: var(--wp--custom--letter-spacing--h-2); line-height: 1.15;
}
.p-system-support .p-system-support__title + .p-system-doc__rows { margin-top: var(--wp--preset--spacing--80); }

/* AI assistant: the AI button under the lead; example questions on the 2px ai rule (text only). */
.p-system-assistant .p-system-assistant__action { margin: 0; }
.p-system-assistant .p-system-assistant__examples { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); margin: 0; padding: 0; list-style: none; }
.p-system-assistant .p-system-assistant__examples li {
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
  background: var(--wp--preset--color--ai-surface); border-left: 2px solid var(--wp--preset--color--ai); border-radius: 0 var(--wp--custom--radius--default) var(--wp--custom--radius--default) 0;
  color: var(--wp--preset--color--ink); font-size: var(--wp--preset--font-size--body); line-height: 1.6;
}

@media (hover: hover) and (pointer: fine) {
  :is(.p-system-support, .p-system-assistant) .p-btn--ai:hover { box-shadow: inset 0 0 0 100vmax var(--wp--custom--alpha--overlay-navy); }
  :is(.p-system-doc, .p-system-support, .p-system-assistant) .p-system-doc__body a:hover { text-decoration-thickness: 2px; }
}
@media (max-width: 991.98px) {
  :is(.p-system-doc, .p-system-support, .p-system-assistant) {
    padding: var(--wp--preset--spacing--90) var(--wp--custom--gutter--tablet) var(--wp--custom--section--tablet);
  }
  :is(.p-system-doc, .p-system-support, .p-system-assistant) .p-system-doc__rows { margin-top: var(--wp--preset--spacing--90); }
  :is(.p-system-doc, .p-system-support, .p-system-assistant) .p-system-doc__row {
    grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--60) 0;
  }
  .p-system-support .p-system-support__cards { grid-template-columns: minmax(0, 1fr); margin-top: var(--wp--preset--spacing--90); }
  .p-system-support .p-system-support__title { margin-top: var(--wp--custom--section--tablet); }
}
@media (max-width: 599.98px) {
  :is(.p-system-doc, .p-system-support, .p-system-assistant) {
    padding: var(--wp--preset--spacing--80) var(--wp--custom--gutter--phone) var(--wp--custom--section--phone);
  }
  :is(.p-system-doc, .p-system-support, .p-system-assistant) .p-system-doc__lead { padding-left: var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--body); }
  .p-system-support .p-system-support__card { padding: var(--wp--preset--spacing--60); }
  .p-system-support .p-system-support__name { font-size: var(--wp--preset--font-size--h-4); }
  .p-system-support .p-system-support__title { margin-top: var(--wp--custom--section--phone); font-size: var(--wp--preset--font-size--h-3); }
  :is(.p-system-support, .p-system-assistant) .p-btn { width: 100%; }
}