/* Help & Resources, scoped under .page-help.
   Colour tokens (--surface, --line, --accent…) inherit from .shell on the layout. Scoped like the other
   page kits so the class names can't collide with the Bootstrap globals still linked in App; everything
   bespoke to this page is additionally hp- prefixed for the same reason.

   The page is four bands of reading matter, so it borrows rather than invents: .panel + .section-head
   from site/layout.css, the accent section icon and the card hover hairline from
   site/pages/contact.css, and the same 1px-gap-over-a-hairline divider trick that page's roster uses.
   Nothing here is data, so nothing here shimmers: the content is in the component (see Help.razor.cs),
   which means it is present at first paint. */

.page-help { display: flex; flex-direction: column; gap: 34px; }

/* Prose inside the bands. Set once here rather than per band: every paragraph on this page is body
   copy at the same size, and the only thing that changes between bands is what surrounds it. */
.page-help p { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--muted); }
.page-help p + p { margin-top: 10px; }
.page-help b { font-weight: 600; color: var(--text); }
.page-help a { color: var(--accent-2); text-decoration: none; }
.page-help a:hover { text-decoration: underline; }

/* Section head: 16px accent icon + the 40px gradient rule, the same construction as Contact us. Kept
   scoped here rather than promoted, because both of those page kits scope their own copy. */
.page-help .section-head h2 { display: inline-flex; align-items: center; gap: 8px; }
.page-help .sec-ic { display: inline-flex; flex: none; color: var(--accent); }
.page-help .sec-ic svg { width: 16px; height: 16px; }

/* ════════════════════════════════════════════════════════════════
   Tab strip. Same underline control as the Vulnerabilities page's
   .vl-tabs, so a page-level tab looks the same wherever the portal
   has one; scoped copy rather than a shared rule because that page
   scopes its own.
   ════════════════════════════════════════════════════════════════ */

.page-help .hp-tabs {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line);
}

.page-help .hp-tabs button {
    padding: 9px 15px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--muted);
    font: 600 13px var(--font-body);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.page-help .hp-tabs button:hover { color: var(--text); }
.page-help .hp-tabs button.is-active { color: var(--text); border-bottom-color: var(--accent); }

/* ════════════════════════════════════════════════════════════════
   Band 1: the portal, one card per page the reader has.
   ════════════════════════════════════════════════════════════════ */

.page-help .hp-areas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
    gap: 16px;
}

/* Whole card is the link, so the hover language is the card's: the accent hairline fades in along the
   top edge and the surface lifts, exactly as the ticket routes on Contact us do. */
.page-help .hp-area {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 18px 20px 20px;
    min-width: 0;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.page-help .hp-area::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    opacity: 0;
    transition: opacity .22s ease;
    pointer-events: none;
}
.page-help .hp-area:hover {
    border-color: var(--hair);
    background: var(--surface-2);
    box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.75);
    text-decoration: none;
}
.page-help .hp-area:hover::before { opacity: 0.9; }

.page-help .hp-area-head { display: flex; align-items: center; gap: 12px; min-width: 0; }

/* Bordered icon puck, the portal's standard 32px one. */
.page-help .hp-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--accent);
}
.page-help .hp-ic svg { width: 16px; height: 16px; }
.page-help .hp-area:hover .hp-ic { border-color: var(--accent-line); }

/* The card's own title is the page's name, so it takes the plain ink a heading takes (§14): the
   accent on this card belongs to the icon and the hover rule. */
.page-help .hp-area-title {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text);
    min-width: 0;
}
.page-help .hp-area-body { font-size: 13px; line-height: 1.55; color: var(--muted); }

/* ════════════════════════════════════════════════════════════════
   Band 2: the investigation. One panel with internal dividers
   rather than five cards: it is a sequence, and five boxes read as
   five unrelated things.
   ════════════════════════════════════════════════════════════════ */

.page-help .hp-phases { display: flex; flex-direction: column; }

.page-help .hp-phase {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 18px 22px;
    min-width: 0;
}
.page-help .hp-phase + .hp-phase { border-top: 1px solid var(--line-soft); }

/* The step number is the only figure on the page, so it gets the portal's figure treatment at chip
   size: tabular, accent-tinted, in its own bordered square. */
.page-help .hp-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    margin-top: 1px;
    border: 1px solid var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent-2);
    font: 700 13px var(--font-display);
    font-variant-numeric: tabular-nums;
}

.page-help .hp-phase-text { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.page-help .hp-phase-title { font-size: 14px; font-weight: 600; color: var(--text); }
.page-help .hp-phase-body { max-width: 88ch; }

/* ── The two diagrams ─────────────────────────────────────────────
   Both are drawn in the portal's own ink rather than pasted in as
   images from the SOC deck: they scale with the column, their text
   is selectable and searchable, and they follow the theme, which a
   flat PNG of white boxes on navy would not.
   ──────────────────────────────────────────────────────────────── */

.page-help .hp-figure {
    display: flex;
    justify-content: center;
    padding: 24px 22px;
}

/* Sized by its own viewBox up to a ceiling, so it never grows to fill a 2100px column (§28) and
   never needs its own scroller (§26): the whole point of the SVG is that it fits. */
.page-help .hp-cascade { width: 100%; max-width: 560px; height: auto; }

.page-help .hp-cascade .hp-box {
    fill: var(--surface-2);
    stroke: var(--line);
    stroke-width: 1;
}
.page-help .hp-cascade .hp-box-label {
    fill: var(--text);
    font: 600 12.5px var(--font-body);
}

/* Forward flow reads first, so it takes the accent and the solid stroke; the loop back is the same
   arrow at a whisper. */
.page-help .hp-cascade .hp-flow {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.4;
    marker-end: url(#hp-tip);
}
.page-help .hp-cascade .hp-back {
    fill: none;
    stroke: var(--muted);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.75;
    marker-end: url(#hp-tip);
}
/* One marker serves both lines, so its head takes the colour of whichever it is ending. */
.page-help .hp-cascade .hp-tip { fill: context-stroke; stroke: none; }

@supports not (fill: context-stroke) {
    /* Safari before 17 has no context-stroke: give the head the accent rather than nothing, which
       would drop the arrowheads off the forward flow entirely. */
    .page-help .hp-cascade .hp-tip { fill: var(--accent); }
}

/* ── MITRE strip: one column per stage, so the chevron, the band and
   its tactics line up by construction. ──────────────────────────── */

.page-help .hp-mitre {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    padding: 0;
    background: var(--line-soft);
}

.page-help .hp-stage {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 18px 20px;
    min-width: 0;
    background: var(--surface);
}

/* The chevron: clipped both ends, so four of them read as one strip pointing right. Later stages are
   tinted down the accent so the strip carries direction as well as shape. */
.page-help .hp-stage .hp-chev {
    display: flex;
    align-items: center;
    padding: 8px 14px 8px 22px;
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%);
    background: var(--accent);
    color: #04201D;
    font: 700 12.5px var(--font-body);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.page-help .hp-stage:nth-child(2) .hp-chev { background: color-mix(in srgb, var(--accent) 78%, var(--surface-2)); }
.page-help .hp-stage:nth-child(3) .hp-chev { background: color-mix(in srgb, var(--accent) 56%, var(--surface-2)); }
.page-help .hp-stage:nth-child(4) .hp-chev { background: color-mix(in srgb, var(--accent) 34%, var(--surface-2)); }
/* Ink on the two palest chevrons: dark-on-pale-accent stops reading well below about half tint. */
.page-help .hp-stage:nth-child(3) .hp-chev,
.page-help .hp-stage:nth-child(4) .hp-chev { color: var(--text); }

.page-help .hp-stage .hp-band {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

.page-help .hp-tactics {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.page-help .hp-tactics li {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--text);
}

/* ── The two prose blocks under the diagrams ─────────────────────── */

.page-help .hp-prose { max-width: none; }

/* Block list, not a flex column: a flex container turns its <li>s into flex items, which drops the
   marker, and a bulleted list with no bullets is what that costs. */
.page-help .hp-list { margin: 12px 0 14px; padding-left: 18px; }
.page-help .hp-list li { font-size: 13.5px; line-height: 1.5; color: var(--text); }
.page-help .hp-list li + li { margin-top: 7px; }

/* ════════════════════════════════════════════════════════════════
   Band 3: the questions. Native <details>, so the browser opens
   them: no circuit round trip per click, and a browser find hits
   the answers whether they are open or not.
   ════════════════════════════════════════════════════════════════ */

.page-help .hp-faq { display: flex; flex-direction: column; }

.page-help .hp-q + .hp-q { border-top: 1px solid var(--line-soft); }

.page-help .hp-q > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 22px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    list-style: none;                 /* Firefox's marker */
    transition: background .16s ease, color .16s ease;
}
.page-help .hp-q > summary::-webkit-details-marker { display: none; }
.page-help .hp-q > summary:hover { background: var(--surface-2); color: var(--accent-2); }
.page-help .hp-q > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Chevron drawn in CSS rather than an inline SVG per question: it is the same mark twelve times and
   it has to rotate with the element's own [open] state, which a Blazor-rendered icon cannot do
   without a round trip. Sits at the end of the row, so the question text keeps the left edge. */
.page-help .hp-q > summary::after {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    opacity: 0.55;
    transition: transform .2s ease, opacity .2s ease;
}
.page-help .hp-q[open] > summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
    opacity: 0.9;
}
.page-help .hp-q[open] > summary { color: var(--text); }

/* Answers indent to the question's text, not the panel edge, so an open answer reads as belonging to
   the question above it. 78ch keeps a line short enough to track back to its start on a wide monitor
   (the column itself goes to --content-max, §28). */
.page-help .hp-a {
    padding: 0 22px 18px 22px;
    max-width: 78ch;
}

@media (prefers-reduced-motion: reduce) {
    .page-help .hp-q > summary::after { transition: none; }
}

/* ════════════════════════════════════════════════════════════════
   Band 4: the glossary. One list down the panel, term against
   meaning, with the same hairline between entries the phases and
   the questions use: two columns of tiled cells read as a table of
   boxes, and a glossary is a list you run your eye down.
   ════════════════════════════════════════════════════════════════ */

.page-help .hp-terms {
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* The term keeps its own column so every meaning starts on the same left edge; a zero floor rather
   than a pixel one (§26), so a long term wraps inside its track instead of pushing the meaning out
   of the clipping panel. */
.page-help .hp-term {
    display: grid;
    grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
    gap: 4px 20px;
    padding: 13px 22px;
    min-width: 0;
}
.page-help .hp-term + .hp-term { border-top: 1px solid var(--line-soft); }

.page-help .hp-term dt {
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.55;
    color: var(--text);
}
.page-help .hp-term dd {
    margin: 0;
    min-width: 0;
    max-width: 78ch;
    font-size: 13px;
    line-height: 1.55;
    color: var(--muted);
}

/* ════════════════════════════════════════════════════════════════
   The way out. One band, so the page ends on a route to a human
   rather than on the last definition.
   ════════════════════════════════════════════════════════════════ */

.page-help .hp-out {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px 24px;
}

.page-help .hp-out-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.page-help .hp-out-title { font-size: 15px; font-weight: 600; color: var(--text); }
.page-help .hp-out-text p { max-width: 62ch; }

.page-help .hp-out-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Links, not buttons: they navigate. hp- prefixed to stay clear of Bootstrap's .btn-primary. */
.page-help .hp-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: 600 13px var(--font-body);
    text-decoration: none;
    transition: border-color .18s ease, background .18s ease, filter .18s ease, transform .18s ease;
}
.page-help .hp-btn:hover {
    border-color: var(--accent-line);
    background: var(--surface-2);
    transform: translateY(-1px);
    text-decoration: none;
}
.page-help .hp-btn.is-primary {
    border-color: var(--accent);
    background: var(--accent);
    color: #04201D;
}
.page-help .hp-btn.is-primary:hover { background: var(--accent); filter: brightness(1.08); }

/* ════════════════════════════════════════════════════════════════
   Responsive. Bootstrap 5.3 breakpoints (see site/variables.css).
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 992px) {
    /* Two stages per row rather than four: below this the chevron has no room for its own label, and a
       clipped stage name is the one thing on the strip that has to be readable. */
    .page-help .hp-mitre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 576px) {
    .page-help .hp-areas { grid-template-columns: 1fr; }
    /* Meaning under its term rather than beside it: below this the term column leaves the definition
       too little to wrap in. */
    .page-help .hp-term { grid-template-columns: 1fr; padding: 13px 16px; }
    .page-help .hp-mitre { grid-template-columns: 1fr; }
    .page-help .hp-figure { padding: 18px 14px; }
    .page-help .hp-phase { padding: 16px 16px; }
    .page-help .hp-q > summary { padding: 14px 16px; }
    .page-help .hp-a { padding: 0 16px 16px; }
    .page-help .hp-out { align-items: flex-start; flex-direction: column; }
}