/*
 * Knowledge Hub: role parts (task list, metrics, reading list, quote, role card, hero aside).
 * Loaded on every Knowledge Hub view, because any page type can call these parts.
 * Corners use --hp-radius-md only; never pill shapes.
 */

/* ---------- Your week ---------- */
.hp-kb-tasks__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-kb-task {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 18px;
    padding: 22px 24px;
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-radius-md);
    background: var(--hp-white);
}

.hp-kb-task__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgb(255 82 71 / .35);
    border-radius: 6px;
    font-family: var(--hp-font-display);
    font-size: var(--bd-small-size);
    color: var(--hp-coral);
}

.hp-kb-task__title {
    margin: 0 0 6px;
    font-family: var(--hp-font-display);
    font-size: var(--bd-card-dense-size);
    font-weight: var(--bd-heading-weight);
    line-height: var(--bd-card-lh);
    color: var(--hp-ink);
}

.hp-kb-task__text {
    max-width: 64ch;
    margin: 0;
    font-size: var(--bd-body-size);
    line-height: 1.6;
    color: var(--hp-ink-muted);
}

/* ---------- What you report upward ---------- */
.hp-kb-metrics__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
}

.hp-kb-metric {
    padding: 22px;
    border: 1px solid var(--hp-line);
    border-top: 3px solid var(--hp-coral);
    border-radius: var(--hp-radius-md);
    background: var(--hp-white);
}

.hp-kb-metric__name {
    margin: 0 0 8px;
    font-family: var(--hp-font-display);
    font-size: var(--bd-body-size);
    line-height: 1.3;
    color: var(--hp-ink);
    font-weight: var(--bd-heading-weight);
}

.hp-kb-metric__text {
    margin: 0;
    font-size: var(--bd-body-size);
    line-height: 1.6;
    color: var(--hp-ink-muted);
}

/* ---------- Reading list ---------- */
.hp-kb-reading__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hp-line);
}

.hp-kb-reading__item {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: baseline;
    padding: 16px 4px;
    border-bottom: 1px solid var(--hp-line);
    text-decoration: none;
    color: var(--hp-ink);
}

.hp-kb-reading__kicker {
    font-family: var(--bd-font-mono);
    font-size: var(--bd-eyebrow-size);
    letter-spacing: var(--bd-eyebrow-track);
    text-transform: uppercase;
    color: var(--hp-ink-soft);
    font-weight: var(--bd-eyebrow-weight);
}

.hp-kb-reading__title {
    font-size: var(--bd-body-size);
    font-weight: var(--bd-heading-weight);
    line-height: 1.4;
    transition: color .15s ease;
}

.hp-kb-reading__arrow {
    transition: color .15s ease, transform .15s ease;
}

.hp-kb-reading__item:hover .hp-kb-reading__title,
.hp-kb-reading__item:hover .hp-kb-reading__arrow,
.hp-kb-reading__item:focus-visible .hp-kb-reading__title,
.hp-kb-reading__item:focus-visible .hp-kb-reading__arrow {
    color: var(--hp-coral);
}

.hp-kb-reading__item:hover .hp-kb-reading__arrow {
    transform: translateX(3px);
}

/* ---------- Quote ---------- */
.hp-kb-quote {
    margin: 0;
    padding: 28px;
    border-left: 3px solid var(--hp-coral);
    border-radius: var(--hp-radius-md);
    background: var(--hp-navy-900);
    color: var(--hp-on-dark);
}

.hp-kb-quote__text {
    margin: 0;
    font-size: var(--bd-lead-size);
    line-height: 1.5;
}

.hp-kb-quote__by {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 16px;
    font-size: var(--bd-small-size);
    color: var(--hp-on-dark-muted);
}

.hp-kb-quote__name {
    font-weight: 600;
    color: var(--hp-white);
}

/* ---------- Role card ---------- */
.hp-kb-rolecard {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px;
    transition: border-color .15s ease;
}

.hp-kb-rolecard:hover,
.hp-kb-rolecard:focus-within {
    border-color: var(--hp-ink);
}

.hp-kb-rolecard__audience {
    font-family: var(--bd-font-mono);
    font-size: var(--bd-eyebrow-size);
    letter-spacing: var(--bd-eyebrow-track);
    text-transform: uppercase;
    color: var(--hp-coral);
    font-weight: var(--bd-eyebrow-weight);
}

.hp-kb-rolecard__title {
    font-family: var(--hp-font-display);
    font-size: var(--bd-card-size);
    font-weight: var(--bd-heading-weight);
    line-height: var(--bd-card-lh);
    color: var(--hp-ink);
    letter-spacing: var(--bd-card-track);
}

.hp-kb-rolecard__link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.hp-kb-rolecard .hp-kb-rolecard__link:focus-visible {
    outline: 0;
}

.hp-kb-rolecard__link:focus-visible::after {
    outline: 2px solid var(--hp-coral);
    outline-offset: 2px;
}

.hp-kb-rolecard__summary {
    font-size: var(--bd-body-size);
    line-height: 1.6;
    color: var(--hp-ink-muted);
}

.hp-kb-rolecard__jobs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--hp-line);
    list-style: none;
    font-size: var(--bd-small-size);
    line-height: 1.45;
    color: var(--hp-ink);
}

.hp-kb-rolecard__jobs li {
    position: relative;
    padding-left: 18px;
}

.hp-kb-rolecard__jobs li::before {
    content: '';
    position: absolute;
    top: .5em;
    left: 0;
    width: 6px;
    height: 6px;
    background: var(--hp-coral);
}

.hp-kb-rolecard__cta {
    margin-top: auto;
    padding-top: 8px;
    font-weight: 600;
    color: var(--hp-ink);
}

.hp-kb-rolecard:hover .hp-kb-rolecard__cta {
    color: var(--hp-coral);
}

/* Directory with few cards: keep them from stretching into wide empty tiles. */
.hp-kb-rolegrid {
    align-items: stretch;
}

.hp-kb-rolefoot {
    padding-block: 0 88px;
}

/* ---------- Hero aside ---------- */
.hp-kb-roleaside {
    padding: 24px;
    border: 1px solid rgb(255 255 255 / .12);
    border-radius: var(--hp-radius-md);
    background: rgb(255 255 255 / .04);
}

.hp-kb-roleaside__label {
    margin: 0 0 8px;
    font-family: var(--bd-font-mono);
    font-size: var(--bd-eyebrow-size);
    letter-spacing: var(--bd-eyebrow-track);
    text-transform: uppercase;
    color: var(--hp-coral);
    font-weight: var(--bd-eyebrow-weight);
}

.hp-kb-roleaside ol {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: roleaside;
}

.hp-kb-roleaside li {
    counter-increment: roleaside;
    border-top: 1px solid rgb(255 255 255 / .1);
}

.hp-kb-roleaside li:first-child {
    border-top: 0;
}

.hp-kb-roleaside a {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    padding: 12px 0;
    font-size: var(--bd-body-size);
    line-height: 1.45;
    text-decoration: none;
    color: var(--hp-on-dark-muted);
    transition: color .15s ease;
}

.hp-kb-roleaside a::before {
    content: counter(roleaside, decimal-leading-zero);
    font-family: var(--hp-font-mono);
    font-size: var(--bd-small-size);
    padding-top: 2px;
    color: var(--hp-on-dark-faint);
}

.hp-kb-roleaside a:hover,
.hp-kb-roleaside a:focus-visible {
    color: var(--hp-white);
}

.hp-kb-roleaside__foot {
    margin: 8px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgb(255 255 255 / .1);
    font-size: var(--bd-small-size);
    color: var(--hp-on-dark-soft);
}

/* ---------- Fallback rows (when the shared lists are not available) ---------- */
.hp-kb-rolelist {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hp-kb-rolelist__item {
    padding: 20px 22px;
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-radius-md);
    background: var(--hp-white);
}

.hp-kb-rolelist__name {
    font-size: var(--bd-body-size);
    font-weight: var(--bd-heading-weight);
    text-decoration: none;
    color: var(--hp-ink);
}

a.hp-kb-rolelist__name:hover {
    color: var(--hp-coral);
}

.hp-kb-rolelist__text {
    max-width: 64ch;
    margin: 6px 0 0;
    font-size: var(--bd-body-size);
    line-height: 1.6;
    color: var(--hp-ink-muted);
}

/* An odd last threat card fills the row, so three threats leave no empty half. */
.hp-kb-role .hp-kb-threats__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* ---------- Anchors ---------- */
.hp-kb-role .hp-kb-anchor,
.hp-kb-role .hp-kb-block {
    scroll-margin-top: 124px;
}

@media (max-width: 1100px) {
    .hp-kb-rolecard {
        padding: 24px;
    }

    /* Two columns: an odd last card fills the row instead of leaving an empty half. */
    .hp-kb-rolegrid > .hp-kb-rolecard:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .hp-kb-task {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 18px;
    }

    .hp-kb-metrics__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hp-kb-reading__item {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 4px 12px;
    }

    .hp-kb-reading__kicker {
        grid-column: 1 / -1;
    }

    .hp-kb-quote {
        padding: 22px;
    }

    .hp-kb-quote__text {
        font-size: var(--bd-lead-size);
    }

    .hp-kb-rolefoot {
        padding-block: 0 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-kb-rolecard,
    .hp-kb-reading__title,
    .hp-kb-reading__arrow,
    .hp-kb-roleaside a {
        transition: none;
    }
}

/* =====================================================================
 * Role page: own layout (single-bd_role.php)
 * Bands alternate: dark, paper, dark, paper, white, dark, paper, white, dark.
 * Corners 8px (controls) and 12px (cards); no pills; no motion beyond hover.
 * ===================================================================== */
.hp-role-band {
    padding-block: clamp(64px, 8vw, 112px);
}

.hp-role-band.hp-role-faq,
.hp-role-band.hp-role-rules {
    background: var(--hp-white);
    color: var(--hp-ink);
}

.hp-role-head {
    max-width: 62ch;
    margin-bottom: clamp(28px, 4vw, 48px);
}

.hp-role-head .hp-h2 {
    margin-top: 12px;
}

.hp-role-head .hp-lead {
    margin-top: 14px;
}

.hp-role-faq .hp-lead,
.hp-role-gets .hp-lead {
    color: var(--hp-ink-muted);
}

.hp-role-sub {
    margin: 0 0 16px;
    font-family: var(--hp-font-display);
    font-size: var(--bd-card-dense-size);
    font-weight: var(--bd-heading-weight);
    line-height: var(--bd-card-lh);
    color: var(--hp-ink);
}

.hp-role-sub--spaced {
    margin-top: clamp(32px, 4vw, 48px);
}

.hp-role-note {
    margin: -6px 0 14px;
    color: var(--hp-ink-muted);
}

/* Two columns: sticky lead on the left, list on the right. */
.hp-role-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}

.hp-role-split__lead {
    position: sticky;
    top: calc(var(--bd4-top, 0px) + 112px);
}

.hp-role-split__lead .hp-role-head {
    margin-bottom: 0;
}

/* In short */
.hp-role-def {
    margin-top: 14px;
    font-family: var(--hp-font-display);
    font-size: var(--bd-h3-size);
    font-weight: var(--bd-heading-weight);
    line-height: 1.35;
    color: var(--hp-ink);
    text-wrap: pretty;
}

.hp-role-quote {
    margin: 28px 0 0;
    padding-left: 18px;
    border-left: 3px solid var(--hp-coral);
}

.hp-role-quote blockquote {
    margin: 0 0 8px;
    color: var(--hp-ink);
}

.hp-role-quote figcaption {
    font-size: var(--bd-small-size);
    color: var(--hp-ink-muted);
}

/* Week steps */
.hp-role-steps {
    display: flex;
    flex-direction: column;
    margin: 0;
    border-top: 1px solid var(--hp-line-strong);
}

.hp-role-step {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px;
    padding: 22px 0;
    border-bottom: 1px solid var(--hp-line-strong);
}

.hp-role-step__num {
    font-family: var(--hp-font-mono);
    font-size: var(--bd-small-size);
    color: var(--hp-coral);
    padding-top: 4px;
}

.hp-role-step__title {
    margin: 0 0 6px;
    font-family: var(--hp-font-display);
    font-size: var(--bd-card-dense-size);
    font-weight: var(--bd-heading-weight);
    line-height: var(--bd-card-lh);
    color: var(--hp-ink);
}

.hp-role-step__text {
    max-width: 62ch;
    color: var(--hp-ink-muted);
    line-height: 1.6;
}

/* Grid of cards: 12 columns so any count fills its rows. */
.hp-role-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
}

.hp-role-grid > * {
    grid-column: span 4;
}

.hp-role-grid[data-n="1"] > * { grid-column: span 12; }
.hp-role-grid[data-n="2"] > *,
.hp-role-grid[data-n="4"] > * { grid-column: span 6; }
.hp-role-grid[data-n="5"] > :nth-child(n+4) { grid-column: span 6; }
.hp-role-grid[data-n="7"] > :nth-child(n+4) { grid-column: span 3; }
.hp-role-grid[data-n="8"] > :nth-child(n+7) { grid-column: span 6; }
.hp-role-grid[data-n="10"] > :nth-child(n+7) { grid-column: span 3; }
.hp-role-grid[data-n="11"] > :nth-child(n+10) { grid-column: span 6; }

/* Pressures (dark) */
.hp-role-pressure,
.hp-role-threat {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 28px;
    border: 1px solid rgb(255 255 255 / .12);
    border-radius: var(--hp-radius-md);
    background: var(--hp-navy-700);
}

.hp-role-pressure__num {
    font-family: var(--hp-font-mono);
    font-size: var(--bd-small-size);
    color: var(--hp-coral);
}

.hp-role-pressure__title,
.hp-role-threat__title {
    margin: 0;
    font-family: var(--hp-font-display);
    font-size: var(--bd-card-size);
    font-weight: var(--bd-heading-weight);
    line-height: var(--bd-card-lh);
    color: var(--hp-white);
    text-wrap: balance;
}

.hp-role-pressure__text,
.hp-role-threat__text {
    color: var(--hp-on-dark-muted);
    line-height: 1.6;
}

.hp-role-pressure__links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgb(255 255 255 / .1);
    font-size: var(--bd-small-size);
}

.hp-role-pressure__label {
    display: inline-block;
    min-width: 44px;
    font-family: var(--hp-font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hp-on-dark-faint);
}

.hp-role-pressure__module {
    font-weight: 600;
    color: var(--hp-white);
}

.hp-role-pressure__more {
    color: var(--hp-on-dark-soft);
}

.hp-role-pressure__module:hover,
.hp-role-pressure__more:hover,
.hp-role-threat__link:hover {
    color: var(--hp-coral);
}

/* What you get */
.hp-role-gets__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.hp-role-get {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 18px;
    padding: 22px 24px;
    border: 1px solid var(--hp-line);
    border-radius: var(--hp-radius-md);
    background: var(--hp-white);
}

.hp-role-get__kind {
    padding-top: 3px;
    font-family: var(--hp-font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hp-coral);
}

.hp-role-get__title {
    margin: 0 0 4px;
    font-family: var(--hp-font-display);
    font-size: var(--bd-card-dense-size);
    font-weight: var(--bd-heading-weight);
    line-height: var(--bd-card-lh);
    color: var(--hp-ink);
}

.hp-role-get__text {
    color: var(--hp-ink-muted);
    line-height: 1.6;
}

.hp-role-metrics {
    margin: 0;
    border-top: 1px solid var(--hp-line-strong);
}

.hp-role-metrics__row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid var(--hp-line-strong);
}

.hp-role-metrics dt {
    font-weight: 600;
    color: var(--hp-ink);
}

.hp-role-metrics dd {
    margin: 0;
    color: var(--hp-ink-muted);
}

/* Questions */
.hp-role-faq__list {
    border-top: 1px solid var(--hp-line-strong);
}

.hp-role-faq__item {
    border-bottom: 1px solid var(--hp-line-strong);
}

.hp-role-faq__q {
    position: relative;
    padding: 20px 40px 20px 0;
    font-family: var(--hp-font-display);
    font-size: var(--bd-card-dense-size);
    font-weight: var(--bd-heading-weight);
    line-height: var(--bd-card-lh);
    color: var(--hp-ink);
    cursor: pointer;
    list-style: none;
}

.hp-role-faq__q::-webkit-details-marker {
    display: none;
}

.hp-role-faq__q::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: var(--hp-coral);
}

.hp-role-faq__item[open] > .hp-role-faq__q::after {
    content: "\2212";
}

.hp-role-faq__q:focus-visible {
    outline: 2px solid var(--hp-coral);
    outline-offset: 2px;
}

.hp-role-faq__a {
    max-width: 66ch;
    padding: 0 0 22px;
    color: var(--hp-ink-muted);
    line-height: 1.65;
}

.hp-role-faq__a p + p {
    margin-top: 10px;
}

/* Threats (dark) */
.hp-role-threat__kind {
    font-family: var(--hp-font-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hp-on-dark-faint);
}

.hp-role-threat__link {
    margin-top: auto;
    padding-top: 8px;
    font-weight: 600;
    color: var(--hp-white);
}

/* Related */
.hp-role-related__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 5vw, 72px);
}

.hp-role-related__cols--one {
    grid-template-columns: minmax(0, 1fr);
}

.hp-role-links {
    margin: 0;
    border-top: 1px solid var(--hp-line-strong);
}

.hp-role-links li {
    border-bottom: 1px solid var(--hp-line-strong);
}

.hp-role-links a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 0;
}

.hp-role-links__name {
    font-weight: 600;
    color: var(--hp-ink);
}

.hp-role-links__text {
    color: var(--hp-ink-muted);
    font-size: var(--bd-small-size);
    line-height: 1.55;
}

.hp-role-links a:hover .hp-role-links__name,
.hp-role-more:hover {
    color: var(--hp-coral);
}

.hp-role-more {
    display: inline-block;
    margin-top: 16px;
    font-weight: 600;
    color: var(--hp-ink);
}

.hp-role-reading {
    columns: 2;
    column-gap: clamp(28px, 5vw, 72px);
    margin: 0;
    border-top: 1px solid var(--hp-line-strong);
}

.hp-role-reading li {
    break-inside: avoid;
    border-bottom: 1px solid var(--hp-line-strong);
}

.hp-role-reading a {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 0;
    font-weight: 600;
    color: var(--hp-ink);
}

.hp-role-reading a:hover {
    color: var(--hp-coral);
}

.hp-role-reading__kind {
    font-family: var(--hp-font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hp-ink-soft);
}

/* Closing call to action (dark) */
.hp-role-close__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
}

.hp-role-close__inner > div:first-child {
    flex: 1 1 420px;
    max-width: 62ch;
}

.hp-role-close .hp-h2 {
    margin-top: 12px;
}

.hp-role-close .hp-lead {
    margin-top: 14px;
}

.hp-role-close__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

@media (max-width: 1100px) {
    .hp-role-split {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .hp-role-split__lead {
        position: static;
    }

    .hp-role-grid > *,
    .hp-role-grid[data-n] > :nth-child(n) {
        grid-column: span 6;
    }

    .hp-role-grid > :last-child:nth-child(odd) {
        grid-column: span 12;
    }
}

@media (max-width: 720px) {
    .hp-role-grid > *,
    .hp-role-grid[data-n] > :nth-child(n),
    .hp-role-grid > :last-child:nth-child(odd) {
        grid-column: span 12;
    }

    .hp-role-related__cols {
        grid-template-columns: minmax(0, 1fr);
    }

    .hp-role-reading {
        columns: 1;
    }

    .hp-role-get {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .hp-role-metrics__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .hp-role-pressure,
    .hp-role-threat {
        padding: 22px;
    }

    .hp-role-close__actions .hp-btn {
        width: 100%;
    }

    .hp-role-step {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 12px;
    }
}

/* Rules and sources sit on the same left edge as the other bands. */
.hp-role-rules .hp-container.hp-kb-content {
    max-width: var(--hp-max-outer);
    margin-inline: auto;
}

.hp-role-rules .hp-kb-block {
    max-width: 880px;
    margin-inline: 0;
}

/* Drawn role cover in the "In short" column: light band, so the dark cover gets a soft edge */
.hp-kb-article-cover.hp-role-cover { justify-self: stretch; max-width: 520px; margin: 0 0 24px; border-color: var(--hp-line); }