/* ---------------------------------------------------------------------------
   Diagrams for the help: the figure a guide opens with (GuideFigure) and the
   interactive flow (HelpFlowMap).

   Isolation is by the hv- prefix: nothing else in the application uses it, so
   nothing can collide. The colours are tokens declared below on :root from the
   portal kit (--app-*, portal.css) with neutral fallbacks, so the accent is the
   organization's primary colour and the diagrams need no wrapping class.

   Motion here is explanatory, never decorative. Three kinds only: flow along a
   line says which way data travels, a pulse marks what is happening right now,
   and a stage lighting up in sequence says what order things happen in. Every
   one is switched off under prefers-reduced-motion, and each diagram still
   reads correctly without it.
   --------------------------------------------------------------------------- */

:root {
    /* Three tones: the accent is the organization's primary colour, good is green, warn is amber.
       Green and amber are darkened because they carry 10px uppercase captions on their own soft
       backgrounds, where small text needs 4.5:1. */
    --hv-accent: var(--app-accent, var(--mud-palette-primary));
    --hv-accent-soft: var(--app-accent-soft, color-mix(in srgb, var(--mud-palette-primary) 10%, #fff));
    --hv-good: color-mix(in srgb, var(--app-good, #1B7F4B) 80%, #000);
    --hv-good-soft: var(--app-good-soft, #E8F6EE);
    --hv-warn: color-mix(in srgb, var(--app-warn, #B26A00) 72%, #000);
    --hv-warn-soft: var(--app-warn-soft, #FFF4E0);

    /* Neutral greys and shape, from the portal kit. */
    --hv-ink: var(--app-ink, #292929);
    --hv-ink-muted: var(--app-ink-muted, #787878);
    --hv-ink-faint: var(--app-ink-faint, #A7A7A7);
    --hv-surface: var(--app-surface, #FFFFFF);
    --hv-surface-alt: var(--app-surface-alt, #F8F8F8);
    --hv-surface-sunk: var(--app-surface-sunk, #F3F3F3);
    --hv-line: var(--app-line, #E4E4E4);
    --hv-line-strong: var(--app-line-strong, #D9D9D9);
    --hv-radius-card: var(--app-radius-card, 14px);
    --hv-radius-control: var(--app-radius-control, 8px);
    --hv-font: var(--app-font, var(--mud-typography-default-family, system-ui, sans-serif));
    --hv-font-figures: var(--app-font-figures, var(--hv-font));

    /* Diagram type is smaller and denser than body copy, so it does not use the muted ink:
       #787878 is 4.4:1 on white, under the bar for text this size. */
    --hv-ink-sub: #67676A;
}

/* --- figure frames ------------------------------------------------------ */

.hv-figure {
    margin: 0 0 28px;
    border: 1px solid var(--hv-line);
    border-radius: var(--hv-radius-card);
    background: var(--hv-surface);
    overflow: hidden;
}

.hv-figure-head {
    padding: 14px 18px 12px;
    border-bottom: 1px solid var(--hv-line);
    background: var(--hv-surface-alt);
}

.hv-figure-title {
    font-family: var(--hv-font);
    font-weight: 600;
    font-size: 15px;
    color: var(--hv-ink);
}

.hv-figure-note {
    font-size: 13px;
    line-height: 1.5;
    color: var(--hv-ink-muted);
    margin: 2px 0 0;
    max-width: 82ch;
}

.hv-figure-body {
    padding: 18px;
    overflow-x: auto;
}

.hv-figure-body svg {
    display: block;
    width: 100%;
    height: auto;
    /* The drawings are laid out at a fixed size and scale down to the column.
       A floor keeps the type from collapsing on a narrow window; below it the
       body scrolls instead. */
    min-width: 620px;
}

/* --- legend ------------------------------------------------------------- */

.hv-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    padding: 12px 18px;
    border-top: 1px solid var(--hv-line);
    background: var(--hv-surface-alt);
    font-size: 13px;
    color: var(--hv-ink-muted);
}

.hv-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.hv-legend i {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.hv-swatch-accent { background: var(--hv-accent); }
.hv-swatch-good { background: var(--hv-good); }
.hv-swatch-warn { background: var(--hv-warn); }

/* --- drawing primitives ------------------------------------------------- */

.hv-box-accent { fill: var(--hv-accent-soft); stroke: var(--hv-accent); }
.hv-box-good { fill: var(--hv-good-soft); stroke: var(--hv-good); }
.hv-box-warn { fill: var(--hv-warn-soft); stroke: var(--hv-warn); }
.hv-box-plain { fill: var(--hv-surface); stroke: var(--hv-line-strong); }

.hv-box-accent,
.hv-box-good,
.hv-box-warn,
.hv-box-plain {
    stroke-width: 1.5;
}

.hv-label {
    font-family: var(--hv-font);
    font-size: 13px;
    font-weight: 600;
    fill: var(--hv-ink);
}

.hv-sub {
    font-family: var(--hv-font);
    font-size: 11.5px;
    fill: var(--hv-ink-sub);
}

.hv-cap {
    font-family: var(--hv-font-figures);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.hv-cap-accent { fill: var(--hv-accent); }
.hv-cap-good { fill: var(--hv-good); }
.hv-cap-warn { fill: var(--hv-warn); }

.hv-flow {
    fill: none;
    stroke: var(--hv-line-strong);
    stroke-width: 1.5;
}

.hv-flow-accent { stroke: var(--hv-accent); }
.hv-flow-good { stroke: var(--hv-good); }

.hv-zone {
    fill: var(--hv-surface-sunk);
    stroke: var(--hv-line);
    stroke-width: 1;
    stroke-dasharray: 5 4;
}

/* --- motion: flow along a line ----------------------------------------
   A dashed overlay whose offset animates, which reads as movement along the
   line and says which way the data goes. Deliberately not offset-path with a
   travelling dot: that needs Safari 16, and where it is unsupported the dots
   do not fail invisibly, they pile up in the corner of the drawing. A dash
   offset is as old as CSS animation and degrades to a plain dashed line. */

.hv-dash {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 7 11;
    animation: hv-dashflow 1.15s linear infinite;
}

.hv-dash-accent { stroke: var(--hv-accent); }
.hv-dash-good { stroke: var(--hv-good); }
.hv-dash-warn { stroke: var(--hv-warn); }

/* Reverse the direction by counting the offset the other way. */
.hv-dash-back { animation-name: hv-dashflow-back; }

@keyframes hv-dashflow {
    to { stroke-dashoffset: -18; }
}

@keyframes hv-dashflow-back {
    to { stroke-dashoffset: 18; }
}

/* --- motion: something happening right now ----------------------------- */

.hv-pulse,
.hv-pulse-core {
    fill: var(--hv-good);
}

.hv-pulse {
    animation: hv-pulse 2.2s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

@keyframes hv-pulse {
    0%, 100% { opacity: .28; transform: scale(1); }
    50%      { opacity: .9;  transform: scale(1.55); }
}

/* --- motion: a stage lighting up in sequence --------------------------- */

.hv-stage {
    animation: hv-stage 9s ease-in-out infinite;
}

.hv-stage-1 { animation-delay: 0s; }
.hv-stage-2 { animation-delay: 1.2s; }
.hv-stage-3 { animation-delay: 2.4s; }
.hv-stage-4 { animation-delay: 3.6s; }
.hv-stage-5 { animation-delay: 4.8s; }
.hv-stage-6 { animation-delay: 6s; }
.hv-stage-7 { animation-delay: 7.2s; }

/* Each stage holds its highlight for about a second of the nine, so the eye is
   led along the sequence once per cycle rather than everything shimmering. */
@keyframes hv-stage {
    0%        { stroke-width: 1.5; }
    2%, 10%   { stroke-width: 3.2; }
    14%, 100% { stroke-width: 1.5; }
}

/* --- role matrix -------------------------------------------------------- */

.hv-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.hv-matrix th,
.hv-matrix td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--hv-line);
    text-align: left;
    vertical-align: top;
}

.hv-matrix thead th {
    font-family: var(--hv-font-figures);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--hv-ink-muted);
    background: var(--hv-surface-alt);
    white-space: nowrap;
}

.hv-matrix tbody th {
    font-weight: 600;
    color: var(--hv-ink);
    white-space: nowrap;
}

.hv-matrix td { color: var(--hv-ink-muted); }
.hv-matrix tr:last-child th,
.hv-matrix tr:last-child td { border-bottom: 0; }

.hv-yes { color: var(--hv-good); font-weight: 600; }
.hv-no { color: var(--hv-ink-faint); }

/* --- prose helpers ------------------------------------------------------ */

.hv-section {
    margin: 44px 0 0;
    padding-top: 26px;
    border-top: 1px solid var(--hv-line);
}

.hv-section:first-of-type {
    margin-top: 24px;
    padding-top: 0;
    border-top: 0;
}

.hv-section h2 {
    font-family: var(--hv-font);
    font-weight: 700;
    font-size: 22px;
    line-height: 1.25;
    margin: 0 0 10px;
    color: var(--hv-ink);
}

.hv-section h3 {
    font-family: var(--hv-font);
    font-weight: 600;
    font-size: 16px;
    margin: 26px 0 8px;
    color: var(--hv-ink);
}

.hv-section p {
    margin: 0 0 14px;
    max-width: 78ch;
    line-height: 1.65;
    color: var(--hv-ink);
}

.hv-section ul {
    margin: 0 0 16px;
    padding-left: 22px;
    max-width: 78ch;
    line-height: 1.6;
}

.hv-section li { margin-bottom: 7px; }

.hv-lead {
    font-size: 16px;
    color: var(--hv-ink-muted);
    max-width: 76ch;
}

.hv-note {
    margin: 0 0 18px;
    padding: 13px 17px;
    border-left: 3px solid var(--hv-accent);
    border-radius: 0 var(--hv-radius-control) var(--hv-radius-control) 0;
    background: var(--hv-accent-soft);
    max-width: 78ch;
}

.hv-note > :last-child { margin-bottom: 0; }

/* --- the two-column word list used for naming ------------------------- */

.hv-terms {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
    margin: 0 0 18px;
}

.hv-term {
    padding: 14px 16px;
    border: 1px solid var(--hv-line);
    border-radius: var(--hv-radius-control);
    background: var(--hv-surface);
}

.hv-term-name {
    font-family: var(--hv-font);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--hv-ink);
    margin-bottom: 3px;
}

.hv-term-body {
    font-size: 13px;
    line-height: 1.55;
    color: var(--hv-ink-muted);
}

/* --- honour a stated preference for less movement --------------------- */

@media (prefers-reduced-motion: reduce) {
    .hv-dash,
    .hv-pulse,
    .hv-stage {
        animation: none;
    }

    /* Each of the three degrades to something that still carries its meaning:
       a dashed line, a visible dot, a normal stroke. Nothing disappears. */
    .hv-pulse {
        opacity: .75;
    }
}

/* --- the figure a guide opens with ------------------------------------- */

.hv-bullet { fill: var(--hv-ink-sub); }

.guide-figure {
    margin-bottom: 26px;
}

/* Strips and columns are laid out on a fixed canvas and scale to the column.
   Below this the figure body scrolls rather than shrinking the type further. */
.guide-figure .hv-figure-body svg {
    min-width: 680px;
}

/* --- illustrated pages inside the help reader ---------------------------
   A page of hv-sections in the same grid as a guide (help.css .help-doc) takes
   the guide's size rather than the page's larger default, and a figure never
   grows past the column: its type stays at the size it was drawn at. */

.help-doc-main .hv-section {
    font-size: 15px;
}

.help-doc-main .hv-section:first-of-type {
    margin-top: 0;
}

.help-doc-main .hv-section h2 {
    font-size: 20px;
}

.help-doc-main .hv-section p,
.help-doc-main .hv-section ul {
    max-width: 100ch;
}

.help-doc-main .hv-figure-body svg {
    max-width: 900px;
    margin: 0 auto;
}

.hv-terms-table td { color: var(--hv-ink); }
.hv-terms-table tbody th { width: 150px; }

/* --- the interactive flow map --------------------------------------------
   Columns are the parts of the flow (who does it, or what it is), rows are the order things happen
   in. The picked box is filled, the boxes it is joined to keep their colour
   and the rest fade, so the eye follows the picked step's arrows. The panel
   beside it says what the step is. */

.hv-flowmap {
    margin: 0 0 24px;
    border: 1px solid var(--hv-line);
    border-radius: var(--hv-radius-card);
    background: var(--hv-surface);
}

.hv-flowmap-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 8px 12px 8px 18px;
    border-bottom: 1px solid var(--hv-line);
    background: var(--hv-surface-alt);
    border-radius: var(--hv-radius-card) var(--hv-radius-card) 0 0;
}

.hv-flowmap-title {
    flex: 1 1 220px;
    font-weight: 600;
    font-size: 15px;
    color: var(--hv-ink);
}

.hv-flowmap-actions {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
}

.hv-flowmap-grid {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(300px, 1fr);
    align-items: start;
}

@media (max-width: 1250px) {
    .hv-flowmap-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hv-flowmap-panel {
        border-left: 0 !important;
        border-top: 1px solid var(--hv-line);
    }
}

.hv-flowmap-canvas {
    padding: 14px;
    overflow-x: auto;
}

.hv-flowmap-canvas svg {
    display: block;
    height: auto;
    min-width: 420px;
}

.hv-lane { stroke: none; }
.hv-lane-accent { fill: var(--hv-accent-soft); opacity: .45; }
.hv-lane-good { fill: var(--hv-good-soft); opacity: .55; }
.hv-lane-warn { fill: var(--hv-warn-soft); opacity: .6; }
.hv-lane-plain { fill: var(--hv-surface-sunk); opacity: .7; }

.hv-node { cursor: pointer; outline: none; }

.hv-node-box {
    fill: var(--hv-surface);
    stroke-width: 1.5;
    transition: fill .15s, stroke-width .15s;
}

.hv-node-accent .hv-node-box { stroke: var(--hv-accent); }
.hv-node-good .hv-node-box { stroke: var(--hv-good); }
.hv-node-warn .hv-node-box { stroke: var(--hv-warn); }
.hv-node-plain .hv-node-box { stroke: var(--hv-line-strong); }

.hv-node-dot { stroke: none; }
.hv-node-accent .hv-node-dot { fill: var(--hv-accent); }
.hv-node-good .hv-node-dot { fill: var(--hv-good); }
.hv-node-warn .hv-node-dot { fill: var(--hv-warn); }
.hv-node-plain .hv-node-dot { fill: var(--hv-ink-sub); }

.hv-node-num {
    font-family: var(--hv-font-figures);
    font-size: 10.5px;
    font-weight: 700;
    fill: #fff;
    pointer-events: none;
}

.hv-node-title {
    font-family: var(--hv-font);
    font-size: 12.5px;
    font-weight: 600;
    fill: var(--hv-ink);
    pointer-events: none;
}

.hv-node:hover .hv-node-box,
.hv-node:focus-visible .hv-node-box { stroke-width: 2.5; }

.hv-node.is-selected .hv-node-box { stroke-width: 3; }
.hv-node-accent.is-selected .hv-node-box { fill: var(--hv-accent-soft); }
.hv-node-good.is-selected .hv-node-box { fill: var(--hv-good-soft); }
.hv-node-warn.is-selected .hv-node-box { fill: var(--hv-warn-soft); }
.hv-node-plain.is-selected .hv-node-box { fill: var(--hv-surface-sunk); }

.hv-node.is-dim { opacity: .45; }
.hv-node.is-dim:hover { opacity: 1; }

.hv-edge {
    fill: none;
    stroke: var(--hv-line-strong);
    stroke-width: 1.3;
}

.hv-edge.is-active {
    stroke: var(--hv-ink-muted);
    stroke-width: 1.8;
}

.hv-arrowhead { fill: var(--hv-ink-muted); }

.hv-edge-label {
    font-family: var(--hv-font);
    font-size: 11px;
    font-weight: 600;
    fill: var(--hv-ink);
    paint-order: stroke;
    stroke: var(--hv-surface);
    stroke-width: 4px;
    stroke-linejoin: round;
}

.hv-flowmap-panel {
    padding: 14px 18px 16px;
    border-left: 1px solid var(--hv-line);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--hv-ink);
    min-height: 100%;
}

.hv-flowmap-panel p { margin: 0 0 10px; }

.hv-flowmap-panel ul {
    margin: 0 0 10px;
    padding-left: 18px;
}

.hv-flowmap-panel li { margin-bottom: 3px; }

.hv-flowmap-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.hv-flowmap-lane {
    font-family: var(--hv-font-figures);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 999px;
}

.hv-tone-accent { color: var(--hv-accent); background: var(--hv-accent-soft); }
.hv-tone-good { color: var(--hv-good); background: var(--hv-good-soft); }
.hv-tone-warn { color: var(--hv-warn); background: var(--hv-warn-soft); }
.hv-tone-plain { color: var(--hv-ink-sub); background: var(--hv-surface-sunk); }

.hv-flowmap-count {
    font-size: 12px;
    color: var(--hv-ink-muted);
    white-space: nowrap;
}

.hv-flowmap-head {
    font-family: var(--hv-font);
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 2px;
}

.hv-flowmap-summary {
    color: var(--hv-ink-muted);
}

.hv-flowmap-label {
    font-family: var(--hv-font-figures);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--hv-ink-muted);
    margin: 10px 0 3px;
}

.hv-flowmap-watch {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 10px 0;
    padding: 8px 10px;
    border-radius: var(--hv-radius-control);
    background: var(--hv-warn-soft);
    color: var(--hv-ink);
}

.hv-flowmap-watch .mud-icon-root {
    color: var(--hv-warn);
    flex: 0 0 auto;
    margin-top: 2px;
}

.hv-flowmap-screens {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .hv-node-box { transition: none; }
}

.hv-flowmap-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0 14px;
}

.hv-flowmap-link {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 6px;
    width: 100%;
    padding: 4px 6px;
    margin: 0 0 2px -6px;
    border: 0;
    border-radius: 5px;
    background: none;
    font: inherit;
    font-size: 13px;
    text-align: left;
    color: var(--hv-ink);
    cursor: pointer;
}

.hv-flowmap-link:hover,
.hv-flowmap-link:focus-visible {
    background: var(--hv-surface-sunk);
    outline: none;
}

.hv-flowmap-link .mud-icon-root {
    color: var(--hv-ink-muted);
    font-size: 16px;
    margin-top: 2px;
}

.hv-flowmap-link b { font-weight: 600; }

/* A drawing scales down with the column it is in; only on a phone does it keep a readable size and scroll. */
.hv-figure-body > svg {
    min-width: 0 !important;
    width: 100%;
    height: auto;
}

@media (max-width: 599.98px) {
    .hv-figure-body {
        overflow-x: auto;
    }

    .hv-figure-body > svg {
        min-width: 520px !important;
    }
}

/* Except the figure a guide opens with: drawn on a 960-wide canvas with 10px labels, it came out at some 6px in a
   narrow column. It keeps a readable size and its body scrolls instead. */
.guide-figure .hv-figure-body > svg {
    min-width: 860px !important;
}