/* Shared by both .ha article routes and the .rh browser reader. */
.support-depth { margin:28px 0; color:var(--text); }
.support-depth h2 { margin:0 0 16px !important; font-size:18px !important; line-height:28px !important; }
.support-checklist { padding:20px 24px; border:1px solid var(--border); border-radius:12px; background:var(--surface-canvas); }
.support-checklist ul { margin:0; padding-left:20px; }
.support-checklist li { margin:9px 0; color:var(--text-secondary); line-height:1.65; }
.support-faq details { border-bottom:1px solid var(--border); }
.support-faq summary, .rh-unavailable > summary { padding:16px 4px; min-height:48px; font-weight:600; line-height:1.6; cursor:pointer; color:var(--text); }
.support-faq details p { padding:0 4px 18px; margin:0 !important; color:var(--text-secondary); line-height:1.75; }
.support-faq summary:focus-visible, .rh-unavailable > summary:focus-visible { outline:2px solid var(--ai); outline-offset:3px; border-radius:4px; }
.rh-unavailable { margin:24px 0; padding:4px 16px; border:1px solid var(--border); border-radius:10px; background:var(--surface-canvas); }
.rh-unavailable .rh-rows { margin-bottom:12px; }
.rsm-recording { border-bottom:1px solid var(--border); padding:0 20px 16px; }
.rsm-recording > summary, .rsm-transcript > summary { padding:16px 0; min-height:48px; cursor:pointer; font-weight:600; }
.rsm-recording:not([open]) { padding-bottom:0; }
.rsm-recording-title { margin:0 0 12px !important; font-weight:600; }
.rsm-recording-play { margin-bottom:12px; min-width:118px; }
.rsm-video { display:block; width:100%; max-height:480px; background:#15151e; border-radius:8px; }
.rsm-recording-note, .rsm-recording-state { margin:12px 0 !important; font-size:12px; line-height:20px; color:var(--text-secondary); }
.rsm-transcript ol { padding-left:22px; margin:0 0 16px; }
.rsm-transcript li { margin:8px 0; line-height:1.7; }
.rsm-recording summary:focus-visible { outline:2px solid var(--ai); outline-offset:3px; }
.rsm { margin:28px 0; min-width:0; border:1px solid var(--border); border-radius:14px; background:var(--surface); color:var(--text); overflow:hidden; }
.rsm *, .rsm-dialog * { box-sizing:border-box; }
.rsm [hidden], .rsm-dialog [hidden] { display:none !important; }
.rsm-header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:7px 18px; padding:19px 21px; border-bottom:1px solid var(--border); background:var(--surface-canvas); }
.rsm .rsm-header .rsm-title { margin:0 !important; color:var(--text); font:600 17px/26px "Open Sans",Arial,sans-serif; }
.rsm .rsm-header .rsm-demo-label { margin:0 !important; color:var(--text-muted); font-size:12px; line-height:19px !important; }
.rsm .rsm-scope { margin:0 !important; padding:10px 21px; border-bottom:1px solid var(--border); font-size:12px; color:var(--text-muted); }
.rsm-layout { display:grid; min-width:0; }
.rsm-gallery { padding:18px; min-width:0; }
.rsm-figure { margin:0; }
.rsm-stage { display:grid; place-items:center; min-height:150px; overflow:hidden; border:1px solid var(--border); border-radius:9px; background:var(--surface-canvas); }
.rsm-preview { position:relative; display:block; width:100%; min-width:0; padding:0; background:var(--surface-canvas); border:0; cursor:zoom-in; color:var(--text); text-align:center; line-height:0; }
.rsm-canvas { position:relative; display:block; width:100%; max-width:100%; vertical-align:middle; line-height:0; }
.rsm-canvas > img { display:block; width:100%; height:auto; max-width:100%; }
.rsm-enlarge { position:absolute; right:8px; bottom:8px; border:1px solid var(--border-strong); border-radius:6px; padding:5px 9px; color:var(--text); background:var(--surface); font:600 11px/18px "Open Sans",Arial,sans-serif; }
.rsm-caption { display:block; padding-top:11px; color:var(--text); font:400 12px/19px "Open Sans",Arial,sans-serif; }
.rsm-frame-title, .rsm-frame-caption { display:block; }
.rsm-frame-title { font-weight:600; }
.rsm-frame-caption { margin-top:4px; color:var(--text-muted); }
.rsm .rsm-loading, .rsm .rsm-image-fallback { margin:0 !important; padding:25px 20px; color:var(--text-muted); text-align:center; font-size:13px; line-height:21px !important; }
.rsm-fallback { text-align:center; padding-bottom:20px; }
.rsm .rsm-marker-list { margin:10px 0 0 !important; padding:0 !important; list-style:none; color:var(--text-muted); }
.rsm .rsm-marker-list li { margin:3px 0 !important; padding:0; font-size:12px; line-height:19px !important; }
.rsm-hotspot { position:absolute; border:2px solid var(--ai); border-radius:4px; pointer-events:none; }
.rsm-hotspot-number { position:absolute; top:-10px; left:-10px; display:grid; place-items:center; min-width:21px; height:21px; border:1px solid var(--ai); border-radius:50%; background:var(--surface); color:var(--ai); font:700 11px/16px "Open Sans",Arial,sans-serif; }
.rsm-thumbnails { display:flex; gap:8px; overflow-x:auto; padding:12px 2px 3px; }
.rsm-button { display:inline-flex; align-items:center; justify-content:center; min-height:42px; min-width:48px; gap:7px; padding:9px 13px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); color:var(--text); font:600 13px/20px "Open Sans",Arial,sans-serif; text-align:center; cursor:pointer; }
.rsm-button:hover:not(:disabled) { background:var(--surface-canvas); border-color:var(--ai); }
.rsm-button:disabled { cursor:default; color:var(--text-muted); opacity:.55; }
.rsm-button-action { background:var(--btn-action-bg); color:var(--btn-action-fg); border-color:transparent; }
.rsm-button-action:hover:not(:disabled) { background:var(--btn-action-hover); border-color:transparent; }
.rsm-play { min-width:158px; }
.rsm .rsm-playback-status { margin:10px 0 0 !important; font:600 12px/20px "Open Sans",Arial,sans-serif; color:var(--text); }
.rsm :is(button,a), .rsm-dialog button { -webkit-tap-highlight-color:transparent; }
.rsm :is(button,a,summary):focus-visible, .rsm-dialog :is(button,[tabindex]):focus-visible { outline:2px solid var(--btn-action-ring); outline-offset:3px; }
.rsm-preview:focus-visible { outline-offset:-3px !important; }
.rsm-thumbnail { display:flex; position:relative; flex:0 0 73px; width:73px; height:51px; padding:3px; min-width:0; border:2px solid var(--border); overflow:hidden; background:var(--surface-canvas); }
.rsm-thumbnail > img { display:block; width:100%; height:100%; object-fit:contain; }
.rsm-thumbnail > span { position:absolute; bottom:2px; right:3px; display:grid; place-items:center; width:18px; height:18px; border-radius:4px; background:var(--surface); color:var(--text); font-size:10px; line-height:14px; }
.rsm-thumbnail[aria-pressed="true"] { border-color:var(--ai); }
.rsm-guided { border-top:1px solid var(--border); }
.rsm-guided-summary { display:flex; align-items:center; gap:12px; min-height:54px; padding:15px 21px; color:var(--text); background:var(--surface-canvas); font:600 14px/22px "Open Sans",Arial,sans-serif; cursor:pointer; list-style:none; }
.rsm-guided-summary::-webkit-details-marker { display:none; }
.rsm-guided-count { margin-left:auto; color:var(--text-muted); font-size:12px; font-weight:400; white-space:nowrap; }
.rsm-guided-summary i { font-size:10px; color:var(--text-muted); }
.rsm-guided[open] > summary i { transform:rotate(180deg); }
.rsm-walkthrough { min-width:0; padding:21px; border-top:1px solid var(--border); background:var(--surface-canvas); }
.rsm-walk-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.rsm .rsm-walk-label { margin:0 !important; color:var(--text-muted); font-size:12px; font-weight:600; line-height:20px; }
.rsm-step-count { white-space:nowrap; font-size:12px; color:var(--text-muted); }
.rsm-progress { appearance:none; display:block; width:100%; height:4px; border:0; overflow:hidden; margin:13px 0 18px; border-radius:4px; color:var(--ai); background:var(--border); }
.rsm-progress::-webkit-progress-bar { background:var(--border); border-radius:4px; }
.rsm-progress::-webkit-progress-value { background:var(--ai); border-radius:4px; }
.rsm-progress::-moz-progress-bar { background:var(--ai); border-radius:4px; }
.rsm .rsm-step-title { margin:0 0 9px !important; color:var(--text); font:600 15px/23px "Open Sans",Arial,sans-serif; }
.rsm .rsm-step-copy { margin:0 0 13px !important; color:var(--text-secondary); font-size:14px; line-height:23px !important; overflow-wrap:anywhere; }
.rsm .rsm-step-tip { margin:0 0 15px !important; padding:10px 12px; border-left:2px solid var(--ai); color:var(--text-muted); font-size:12px; line-height:20px !important; overflow-wrap:anywhere; }
.rsm-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:18px; }
.rsm-controls .rsm-button-action { margin-left:auto; }
.rsm .rsm-navigation-note { margin:10px 0 0 !important; color:var(--text-muted); font-size:11px; line-height:18px !important; }
.rsm-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.rsm-dialog { width:min(1180px,calc(100vw - 36px)); max-width:none; max-height:calc(100dvh - 36px); margin:auto; padding:0; overflow:auto; border:1px solid var(--border-strong); border-radius:14px; background:var(--surface); color:var(--text); font:400 14px/22px "Open Sans",Arial,sans-serif; }
.rsm-dialog::backdrop { background:var(--surface-scrim); }
.rsm-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:15px 18px; border-bottom:1px solid var(--border); }
.rsm-dialog .rsm-dialog-title { margin:0; font:600 17px/25px "Open Sans",Arial,sans-serif; overflow-wrap:anywhere; }
.rsm-dialog-tools { display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; padding:11px 18px; background:var(--surface-canvas); border-bottom:1px solid var(--border); }
.rsm-zoom-label { min-width:47px; text-align:center; color:var(--text-muted); font-size:12px; }
.rsm-dialog-viewport { overflow:auto; max-height:calc(100dvh - 265px); min-height:140px; background:var(--surface-canvas); overscroll-behavior:contain; }
.rsm-dialog-canvas { position:relative; margin-inline:auto; line-height:0; }
.rsm-dialog-canvas > img { display:block; width:100%; height:auto; max-width:none; }
.rsm-dialog-note, .rsm-dialog-caption { margin:0; padding:11px 18px; color:var(--text-muted); font-size:12px; line-height:19px; }
.rsm-dialog-caption { padding-top:0; }
.rsm-dialog .rsm-image-fallback { padding:24px; margin:0; color:var(--text-muted); }
@media(max-width:600px) {
  .rsm { margin-block:22px; }
  .rsm-header { padding:16px; }
  .rsm-gallery, .rsm-walkthrough { padding:15px; }
  .rsm-guided-summary { padding-inline:15px; }
  .rsm-button { min-height:44px; }
  .rsm-controls { display:grid; grid-template-columns:48px minmax(0,1fr)48px; }
  .rsm-controls .rsm-button { min-width:0; padding-inline:5px; margin:0; }
  .rsm-dialog { width:calc(100vw - 16px); max-height:calc(100dvh - 16px); border-radius:10px; }
  .rsm-dialog-header { padding:12px; gap:12px; }
  .rsm-dialog .rsm-dialog-title { font-size:15px; line-height:22px; }
  .rsm-dialog-tools { padding:9px; gap:5px; }
  .rsm-dialog-tools .rsm-button { padding-inline:9px; font-size:12px; }
  .rsm-dialog-viewport { max-height:calc(100dvh - 255px); }
}
@media(prefers-reduced-motion:reduce) {
  .rsm *, .rsm-dialog * { scroll-behavior:auto !important; transition:none !important; animation:none !important; }
}
@media print { .rsm, .rsm-dialog { display:none !important; } }