/* Shared help surfaces; no animations or automatic playback. */
.cl-help-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: inherit;
    font-size: .85rem;
    font-weight: 650;
    cursor: pointer;
    padding: .65rem .85rem;
    min-height: 44px;
    border: 1px solid var(--ax-border, #afc5ba);
    border-radius: 6px;
    background: var(--ax-panel, #edf6f0);
    color: var(--ax-text, #193c31);
}
.cl-help-icon { flex: 0 0 18px; width: 18px; height: 18px; }
.cl-help-button > span { min-width: 0; }
.cl-help-button:hover { background: var(--ax-surface-hover, #d9ebdf); }
.cl-help-button:focus-visible,
.cl-help-dialog :focus-visible {
    outline: 3px solid var(--ax-focus, #bd791a);
    outline-offset: 3px;
}
.cl-help-dialog {
    box-sizing: border-box;
    width: min(780px, calc(100% - 24px));
    max-height: calc(100dvh - 32px);
    overflow: auto;
    padding: clamp(16px, 3vw, 28px);
    border: 1px solid var(--ax-border, #afc5ba);
    border-radius: 14px;
    background: var(--ax-panel, #f7faf6);
    color: var(--ax-text, #19302e);
    font: 16px/1.6 Inter, ui-sans-serif, system-ui, sans-serif;
    box-shadow: 0 24px 90px color-mix(in srgb, var(--ax-text, #101c21) 40%, transparent);
}
.cl-help-dialog::backdrop { background: color-mix(in srgb, var(--ax-text, #101c21) 75%, transparent); }
.cl-help-head { display: flex; align-items: flex-start; gap: 16px; justify-content: space-between; }
.cl-help-dialog h2 { font-size: clamp(22px, 3vw, 30px); line-height: 1.2; letter-spacing: -.5px; margin: 0; }
.cl-help-dialog h3 { font-size: 19px; margin: 22px 0 10px; }
.cl-help-close { flex-shrink: 0; min-height: 44px; padding: 8px 14px; border: 1px solid var(--ax-border, #afc5ba); border-radius: 6px; background: var(--ax-panel, #f7faf6); color: inherit; font: inherit; cursor: pointer; }
.cl-help-intro { font-size: 14px; margin: 10px 0 16px; }
.cl-help-dialog video { display: block; width: 100%; aspect-ratio: 64 / 45; background: var(--ax-media-background, #101c21); border-radius: 6px; margin: 0 0 12px; }
.cl-help-dialog a { color: var(--ax-link, #245840); text-underline-offset: 3px; overflow-wrap: anywhere; }
.cl-help-status { padding: 12px; background: var(--ax-warning-background, #fff0d4); border-radius: 6px; }
.cl-help-steps { padding-left: 24px; margin: 0; }
.cl-help-steps li { padding-left: 4px; margin-bottom: 10px; }
.ax-cutlist .cl-help-guide { padding: 12px 16px; border-left: 3px solid var(--ax-accent, #65967a); background: var(--cl-panel); color: var(--cl-text); line-height: 1.6; }
.cl-help-gallery { padding: 0 0 64px; }
.cl-help-gallery h2 { margin-bottom: 14px; }
.cl-help-gallery-intro { color: var(--ax-muted, #bbcacd); line-height: 1.7; margin-bottom: 26px; max-width: 660px; }
.cl-help-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cl-help-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--ax-border, #41545a); border-radius: 10px; background: var(--ax-panel, #17292f); }
.cl-help-card img { display: block; width: 100%; height: auto; aspect-ratio: 64 / 45; object-fit: contain; background: var(--ax-media-background, #223b40); }
.cl-help-card-body { padding: 20px; display: flex; flex: 1; flex-direction: column; align-items: flex-start; }
.cl-help-card h3 { font-size: 20px; margin: 0 0 10px; }
.cl-help-card p { font-size: 14px; line-height: 1.65; margin: 0 0 18px; color: var(--ax-muted, #bbcacd); }
.cl-help-card .cl-help-button { margin-top: auto; }
.cl-help-card small { display: block; margin-top: 12px; color: var(--ax-muted, #bbcacd); }
@media (max-width: 800px) { .cl-help-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cl-help-cards { grid-template-columns: 1fr; } .cl-help-gallery { padding-bottom: 42px; } }

.ax-cutlist .cl-help-button { min-height: 44px; white-space: normal; border-color: var(--cl-accent); }