.field-description { display: block; color: var(--muted, #526477); font-weight: 400; line-height: 1.5; overflow-wrap: anywhere; }
.help-article { max-width: 78ch; line-height: 1.65; overflow-wrap: anywhere; }
.help-article h1 { font-size: 1.6rem; }
.help-article h2 { font-size: 1.15rem; margin-top: 1.5rem; }
.help-article li { margin-bottom: .6rem; }
.help-content nav { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin-block: 1.5rem; }
.help-panel { position: fixed; right: 0; top: 0; bottom: 0; width: min(440px, 100vw); z-index: 50; background: var(--panel); color: var(--text); border-left: 1px solid var(--line); box-shadow: -8px 0 24px #142d2920; padding: 1.2rem; overflow-y: auto; }
.help-panel[hidden] { display: none; }
.help-panel header { display: flex; align-items: center; justify-content: space-between; position: sticky; top: -1.2rem; background: var(--panel); z-index: 1; padding-block: .8rem; }
.help-panel h2 { font-size: 1.25rem; margin: 0; }
.public-help { padding: 1.5rem; max-width: 1000px; margin: auto; }
.public-help > nav { display: flex; gap: 1.5rem; }
.topology-tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin-block: 1rem; }
.topology-tools label { display: grid; gap: .3rem; min-width: 120px; flex: 1; }
.topology-tools input, .topology-tools select { width: 100%; min-width: 0; }
.topology-tools button { min-width: 44px; min-height: 44px; }
.topology-zones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid #b8c8c2; }
.topology-zones span { padding: .7rem; border-right: 1px solid #b8c8c2; font-weight: 600; overflow-wrap: anywhere; }
.topology-graph { height: 480px; width: 100%; border-bottom: 1px solid #b8c8c2; background: #fbfcfd; }
.topology-lower { display: grid; grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr); gap: 1.5rem; margin-top: 1rem; }
.topology-list section { border-bottom: 1px solid #b8c8c2; padding-block: .5rem; }
.topology-site-group { border-left: 3px solid #855b99; padding: .6rem; margin-block: .7rem; }
.topology-site-group > button { margin-bottom: .6rem; white-space: normal; text-align: left; }
.topology-list h3, .topology-details h3 { font-size: 1.05rem; }
.topology-list button[aria-pressed="true"] { outline: 3px solid #a53667; outline-offset: 2px; }
.topology-list p { font-size: .88rem; line-height: 1.5; overflow-wrap: anywhere; }
.topology-details { min-width: 0; overflow-wrap: anywhere; }
.topology-details dt { font-weight: 600; margin-top: .6rem; }
.topology-details dd { margin: .1rem 0; }
.topology-details a { display: block; margin-block: .8rem; }
#topologyError, #topologyIssues { color: #8a263c; }
.help-content a, .topology-details a, .source-lifecycle a, .public-help > nav a { color: #087f6b; }
.source-lifecycle { border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 1.5rem; }
.source-lifecycle section { border-bottom: 1px solid var(--line); padding-block: 1rem; overflow-wrap: anywhere; }
.source-lifecycle section button { margin: .3rem .5rem .3rem 0; }
.source-lifecycle textarea { width: 100%; min-width: 0; padding: .6rem; font-family: ui-monospace, monospace; }
.source-lifecycle small { overflow-wrap: anywhere; line-height: 1.5; }
.topbar { position: sticky; top: 0; z-index: 10; }
@media (prefers-color-scheme: dark) {
  .help-content a, .topology-details a, .source-lifecycle a, .public-help > nav a { color: #6fdbc2; }
  #topologyError, #topologyIssues { color: #ff9eae; }
}
:focus-visible { outline: 3px solid #a53667; outline-offset: 3px; }
@media (min-width: 1100px) { body.help-open .main { padding-right: 470px; } }
@media (max-width: 700px) {
  .topbar { position: static; }
  .help-panel { width: 100%; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .help-open { overflow: hidden; }
  .topology-lower { grid-template-columns: minmax(0, 1fr); }
  .topology-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topology-graph { height: 370px; }
  .topology-tools label { min-width: min(140px, 100%); }
}