.centros-help {
  max-width:78rem;
}

.centros-help-profile-picker {
  display:flex;
  align-items:center;
  gap:.75rem;
  margin:0 0 1.25rem;
}

.centros-help-profile-picker[hidden],
.centros-help-selected[hidden] {
  display:none;
}

.centros-help-profile-picker label {
  color:var(--centros-text-soft);
  font-size:.88rem;
  font-weight:600;
}

.centros-help-profile-picker select {
  min-height:44px;
  min-width:min(100%,18rem);
  padding:.55rem 2.25rem .55rem .75rem;
  border:1px solid var(--centros-border);
  border-radius:.55rem;
  background:var(--centros-surface);
  color:var(--centros-text);
  font:inherit;
}

.centros-help-profile-picker select:focus-visible {
  outline:3px solid var(--centros-focus);
  outline-offset:2px;
}

.centros-help-path {
  max-width:none;
  padding-block:0 2rem;
  margin:0 0 2rem;
  border-bottom:1px solid var(--centros-border);
}

.centros-help-path:last-child {
  margin-bottom:0;
  border-bottom:0;
}

.centros-help-path>h2 {
  margin:0 0 1rem;
  color:var(--centros-text);
  font-size:1.15rem;
}

.centros-help-layout {
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(17rem,1fr);
  align-items:start;
  gap:1rem;
  margin:0 0 1.25rem;
}

.centros-help-video {
  min-width:0;
  margin:0;
}

.centros-help-video video {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  background:var(--centros-surface-soft);
  border:1px solid var(--centros-border);
  border-radius:.75rem;
}

.centros-help-video video:focus-visible {
  outline:3px solid var(--centros-focus);
  outline-offset:3px;
}

.centros-help-video figcaption {
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:.35rem .75rem;
  margin-top:.5rem;
  color:var(--centros-text-soft);
  font-size:.8rem;
}

.centros-help-video figcaption p {
  margin:0;
}

.centros-help-video figcaption strong {
  color:var(--centros-text);
  font-variant-numeric:tabular-nums;
}

.centros-help-video figcaption a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
}

.centros-help-chapters {
  min-width:0;
  margin:0;
  padding:.85rem;
  border:1px solid var(--centros-border);
  border-radius:.75rem;
  background:var(--centros-surface-soft);
}

.centros-help-chapters h3 {
  margin:0 0 .4rem;
  color:var(--centros-text);
  font-size:.9rem;
}

.centros-help-chapters ol {
  display:grid;
  gap:.15rem;
  max-height:29rem;
  overflow:auto;
  margin:0;
  padding:0;
  list-style:none;
}

.centros-help-chapters a {
  display:flex;
  align-items:baseline;
  gap:.6rem;
  min-height:40px;
  padding:.55rem .6rem;
  border-radius:.45rem;
  color:var(--centros-text);
  text-decoration:none;
}

.centros-help-chapters a:hover,
.centros-help-chapters a[aria-current="location"] {
  background:var(--centros-surface);
  color:var(--centros-blue);
}

.centros-help-chapters a:focus-visible,
.centros-help-written>summary:focus-visible,
.centros-help-supervision summary:focus-visible,
.centros-help-common>summary:focus-visible {
  outline:3px solid var(--centros-focus);
  outline-offset:2px;
}

.centros-help-chapters time {
  flex:none;
  color:var(--centros-blue);
  font-variant-numeric:tabular-nums;
}

.centros-help-chapters a>span {
  font-size:.88rem;
  font-weight:550;
}

.centros-help-written>summary,
.centros-help-supervision summary,
.centros-help-common>summary {
  min-height:44px;
  padding:.65rem 0;
  color:var(--centros-blue);
  font-size:.9rem;
  font-weight:550;
}

.centros-help-written .centros-steps {
  margin-top:.5rem;
}

.centros-help-written>p {
  max-width:66rem;
}

.centros-help-supervision {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(15rem,.6fr);
  gap:.5rem 1.5rem;
  align-items:start;
  margin:0 0 1rem;
  padding:.75rem 1rem;
  border-left:3px solid var(--centros-blue);
  background:var(--centros-surface-soft);
}

.centros-help-supervision h3 {
  margin:0 0 .25rem;
  font-size:.95rem;
}

.centros-help-supervision p {
  margin:.25rem 0;
  color:var(--centros-text-soft);
  font-size:.88rem;
}

.centros-help-supervision-steps {
  display:grid;
  gap:.35rem;
  margin:.25rem 0;
  padding-left:1.25rem;
  font-size:.85rem;
}

.centros-help-selected {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.5rem 1rem;
  max-width:78rem;
  margin:0 0 1.25rem;
  padding:.5rem .75rem;
  border-left:3px solid var(--centros-blue);
  background:var(--centros-surface-soft);
  color:var(--centros-text-soft);
  font-size:.85rem;
}

.centros-help-selected strong {
  color:var(--centros-text);
}

.centros-help-selected>a {
  display:inline-flex;
  align-items:center;
  flex:none;
  min-height:40px;
  color:var(--centros-blue);
  font-weight:600;
}

.centros-help-nojs {
  margin:.5rem 0;
  color:var(--centros-text-soft);
  font-size:.84rem;
}

.centros-help-common {
  max-width:78rem;
  margin-top:1.25rem;
  border-top:1px solid var(--centros-border);
}

.centros-help-common ul {
  display:grid;
  gap:.35rem;
  max-width:70rem;
  padding-left:1.25rem;
  color:var(--centros-text-soft);
  font-size:.88rem;
}

@media (max-width:800px) {
  .centros-help-layout {
    grid-template-columns:minmax(0,1fr);
    gap:.75rem;
  }

  .centros-help-chapters ol {
    max-height:min(52vh,24rem);
  }

  .centros-help-supervision {
    grid-template-columns:minmax(0,1fr);
  }
}

@media (max-width:600px) {
  .centros-help-profile-picker {
    align-items:stretch;
    flex-direction:column;
    gap:.25rem;
  }

  .centros-help-profile-picker select {
    width:100%;
  }

  .centros-help-selected {
    align-items:flex-start;
    flex-direction:column;
    gap:0;
  }

  .centros-help-selected>a {
    min-height:36px;
  }
}

@media print {
  .centros-help-profile-picker,
  .centros-help-video {
    display:none;
  }
}

/* The shared context bar can keep its compact Help action. */
.centros-contextbar__help {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:44px;
  padding:.45rem .7rem;
  border:1px solid var(--centros-border);
  border-radius:.6rem;
  background:var(--centros-surface);
  color:var(--centros-text);
  font-size:.78rem;
  font-weight:600;
  text-decoration:none;
}

.centros-contextbar__help:hover {
  background:var(--centros-blue-soft);
  color:var(--centros-blue);
}

.centros-contextbar__tools {
  position:relative;
}

.centros-contextbar__tools .centros-activity {
  position:static;
}

.centros-contextbar__help .centros-icon {
  width:1rem;
  height:1rem;
  flex:none;
  color:var(--centros-blue);
}