/* ---------------------------------------------------------------------------
   Illustrations for the two explanatory help pages.

   Kept out of shield.css on purpose: that file is the brand skin - tokens,
   cards, tables, badges - and four hundred lines of diagram scaffolding would
   bury it. The tokens themselves still come from there, so this file inherits
   the palette rather than restating it.

   Isolation is by the hv- prefix rather than by a scoping ancestor: nothing else
   in the application uses it, so nothing can collide. The colour and type
   tokens, though, are declared on .shield-page - which is why both pages carry
   .shield-page and .help-visual on the same element. Drop .shield-page and
   these rules resolve their tokens to nothing.

   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 - the motion adds emphasis to a picture that is
   already complete.
   --------------------------------------------------------------------------- */

.help-visual {
    /* Three colours only: the office is the brand indigo, the field is green, the customer is amber.
       The green and the amber are darker than they look like they should be, because they carry 10px
       uppercase captions on their own soft backgrounds - at the obvious brightness those land at 3.8:1
       and small text needs 4.5. */
    --hv-office: #2D2BAB;
    --hv-field: #136743;
    --hv-client: #804B00;
    --hv-office-soft: #EEEEFA;
    --hv-field-soft: #E7F5EE;
    --hv-client-soft: #FBF1E1;

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

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

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

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

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

.hv-figure-note {
    font-size: 13px;
    line-height: 1.5;
    color: var(--shield-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(--shield-line);
    background: var(--shield-surface-alt);
    font-size: 13px;
    color: var(--shield-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-office { background: var(--hv-office); }
.hv-swatch-field { background: var(--hv-field); }
.hv-swatch-client { background: var(--hv-client); }

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

.hv-box-office { fill: var(--hv-office-soft); stroke: var(--hv-office); }
.hv-box-field { fill: var(--hv-field-soft); stroke: var(--hv-field); }
.hv-box-client { fill: var(--hv-client-soft); stroke: var(--hv-client); }
.hv-box-plain { fill: var(--shield-surface); stroke: var(--shield-line-strong); }

.hv-box-office,
.hv-box-field,
.hv-box-client,
.hv-box-plain {
    stroke-width: 1.5;
}

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

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

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

.hv-cap-office { fill: var(--hv-office); }
.hv-cap-field { fill: var(--hv-field); }
.hv-cap-client { fill: var(--hv-client); }

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

.hv-flow-office { stroke: var(--hv-office); }
.hv-flow-field { stroke: var(--hv-field); }

.hv-zone {
    fill: var(--shield-surface-sunk);
    stroke: var(--shield-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-office { stroke: var(--hv-office); }
.hv-dash-field { stroke: var(--hv-field); }
.hv-dash-client { stroke: var(--hv-client); }

/* 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-field);
}

.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(--shield-line);
    text-align: left;
    vertical-align: top;
}

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

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

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

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

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

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

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

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

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

.hv-section p {
    margin: 0 0 14px;
    max-width: 78ch;
    line-height: 1.65;
    color: var(--shield-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(--shield-ink-muted);
    max-width: 76ch;
}

.hv-note {
    margin: 0 0 18px;
    padding: 13px 17px;
    border-left: 3px solid var(--shield-indigo);
    border-radius: 0 var(--shield-radius-control) var(--shield-radius-control) 0;
    background: var(--shield-indigo-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(--shield-line);
    border-radius: var(--shield-radius-control);
    background: var(--shield-surface);
}

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

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

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

@media (prefers-reduced-motion: reduce) {
    .help-visual .hv-dash,
    .help-visual .hv-pulse,
    .help-visual .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. */
    .help-visual .hv-pulse {
        opacity: .75;
    }
}

/* --- the drawn handset -------------------------------------------------
   Used by the mobile app page. The device is a fixed 300 x 620 drawing that
   scales down inside its grid cell, so the type sizes here are chosen against
   that box rather than against the page. */

.hv-phones {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 22px;
    padding: 20px 18px;
}

.hv-phone-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hv-phone {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto;
}

.hv-phone-caption {
    text-align: center;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--hv-ink-sub);
}

.hv-phone-caption b {
    display: block;
    font-family: var(--shield-font);
    font-weight: 600;
    font-size: 13.5px;
    color: var(--shield-ink);
}

.hv-phone-body {
    fill: var(--shield-surface-sunk);
    stroke: var(--shield-line-strong);
    stroke-width: 2;
}

.hv-phone-screen {
    fill: var(--shield-surface);
    stroke: var(--shield-line);
    stroke-width: 1;
}

.hv-phone-status {
    font-family: var(--shield-font-figures);
    font-size: 11px;
    font-weight: 700;
    fill: var(--shield-ink);
}

.hv-phone-battery { fill: none; stroke: var(--hv-ink-sub); stroke-width: 1; }
.hv-phone-charge { fill: var(--hv-field); }

.hv-phone-back { fill: none; stroke: var(--hv-office); stroke-width: 2; stroke-linecap: round; }

.hv-phone-title {
    font-family: var(--shield-font);
    font-size: 15px;
    font-weight: 700;
    fill: var(--shield-ink);
}

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

.hv-phone-rule { stroke: var(--shield-line); stroke-width: 1; }

.hv-phone-tab-on { fill: var(--hv-office); }
.hv-phone-tab-off { fill: var(--shield-line-strong); }

.hv-phone-tablabel,
.hv-phone-tablabel-on {
    font-family: var(--shield-font);
    font-size: 9.5px;
}

.hv-phone-tablabel { fill: var(--hv-ink-sub); }
.hv-phone-tablabel-on { fill: var(--hv-office); font-weight: 600; }

/* --- pieces a screen is built from --- */

.hv-ui-card {
    fill: var(--shield-surface);
    stroke: var(--shield-line);
    stroke-width: 1;
}

.hv-ui-card-accent {
    fill: var(--hv-field-soft);
    stroke: var(--hv-field);
    stroke-width: 1.5;
}

.hv-ui-card-warn {
    fill: var(--hv-client-soft);
    stroke: var(--hv-client);
    stroke-width: 1.5;
}

.hv-ui-btn {
    fill: var(--hv-office);
    stroke: none;
}

.hv-ui-btn-good { fill: var(--hv-field); }
.hv-ui-btn-danger { fill: #A32020; }

.hv-ui-btn-outline {
    fill: none;
    stroke: var(--hv-office);
    stroke-width: 1.5;
}

.hv-ui-btntext {
    font-family: var(--shield-font);
    font-size: 11.5px;
    font-weight: 600;
    fill: #FFFFFF;
}

.hv-ui-btntext-outline {
    font-family: var(--shield-font);
    font-size: 11.5px;
    font-weight: 600;
    fill: var(--hv-office);
}

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

.hv-ui-text {
    font-family: var(--shield-font);
    font-size: 10px;
    fill: var(--hv-ink-sub);
}

.hv-ui-figure {
    font-family: var(--shield-font-figures);
    font-size: 19px;
    font-weight: 700;
    fill: var(--shield-ink);
}

.hv-ui-cap {
    font-family: var(--shield-font-figures);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .07em;
    fill: var(--hv-ink-sub);
}

.hv-ui-pill-good { fill: var(--hv-field); }
.hv-ui-pill-warn { fill: var(--hv-client); }
.hv-ui-pilltext {
    font-family: var(--shield-font-figures);
    font-size: 8px;
    font-weight: 700;
    fill: #FFFFFF;
}

.hv-ui-field {
    fill: var(--shield-surface-sunk);
    stroke: var(--shield-line-strong);
    stroke-width: 1;
}

/* --- the figure a role 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;
}