/* Help Center (TAN3-816). The screens are MudBlazor components; this file only covers what Mud
   has no component for: the floating panel position, hint markers, the hint arrow, the tour
   spotlight, stored rich content and the element picker. Colours come from the Mud palette. */

.hc-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Floating panel: 74px from the top, 20px from the right, 420×660 (full screen on phones). */
.hc-panel{position:fixed;z-index:1350;top:74px;right:20px;width:min(420px,calc(100vw - 32px));height:min(660px,calc(100vh - 100px));display:flex}
.hc-panel > .mud-paper, .hc-panel .hc-panel__paper{display:flex;flex-direction:column;width:100%;height:100%;overflow:hidden;border-radius:16px}
.hc-panel__head{background:var(--mud-palette-primary);color:var(--mud-palette-primary-text)}
.hc-panel__head .mud-icon-button{color:inherit}
.hc-panel__body{flex:1;overflow-y:auto;overscroll-behavior:contain}
.hc-panel__body:focus{outline:none}
.hc-panel__tabs{display:flex;border-top:1px solid var(--mud-palette-lines-default);background:var(--mud-palette-background-gray)}
.hc-panel__tabs .mud-button-root{flex:1;min-height:60px;border-radius:0;text-transform:none}
.hc-panel__tabs .hc-tab--on{box-shadow:inset 0 3px 0 var(--mud-palette-primary)}
@media (max-width:520px){.hc-panel{inset:0;width:100%;height:100%}.hc-panel .hc-panel__paper{border-radius:0}}
body.hc-capturing .hc-panel, body.hc-capturing .hc-panel-overlay{visibility:hidden}

/* Search sticks to the top of the Home tab while the lists scroll. */
.hc-sticky{position:sticky;top:0;z-index:2;background:var(--mud-palette-surface)}

/* News banner (mock-up art: gradient, two soft circles, the tag in capitals). */
.hc-banner{position:relative;overflow:hidden;height:110px;color:#fff}
.hc-banner--lg{height:160px;border-radius:10px}
.hc-banner::before{content:"";position:absolute;width:140px;height:140px;border-radius:50%;background:rgba(255,255,255,.14);top:-48px;right:-24px}
.hc-banner::after{content:"";position:absolute;width:104px;height:104px;border-radius:50%;background:rgba(255,255,255,.10);bottom:-60px;left:30px}
.hc-banner span{position:absolute;left:18px;top:38%;font-weight:800;letter-spacing:2px;text-transform:uppercase;font-size:1.1rem}
.hc-banner i{position:absolute;left:18px;top:62%;width:90px;height:5px;border-radius:4px;background:rgba(255,255,255,.6)}
.hc-unread-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--mud-palette-error);margin-inline-end:6px}

/* Stored rich content (sanitized server side). */
.hc-content{line-height:1.6}
.hc-content h4{font-size:1.03rem;margin:22px 0 6px}
.hc-content ul,.hc-content ol{margin:0 0 14px;padding-inline-start:22px}
.hc-content li{margin-bottom:6px}
.hc-content a{color:var(--mud-palette-primary)}
.hc-content figure{margin:16px 0}
.hc-content figure img{max-width:100%;border:1px solid var(--mud-palette-lines-default);border-radius:10px}
.hc-content figcaption{font-size:.82rem;color:var(--mud-palette-text-secondary);margin-top:6px}
.hc-content .callout{border-inline-start:4px solid var(--mud-palette-primary);background:color-mix(in srgb,var(--mud-palette-primary) 12%,var(--mud-palette-surface));padding:12px 14px;border-radius:0 10px 10px 0;margin:14px 0;font-size:.92rem}
.hc-content .callout.warn{border-color:var(--mud-palette-warning);background:color-mix(in srgb,var(--mud-palette-warning) 14%,var(--mud-palette-surface))}
.hc-content .tag-missing{background:color-mix(in srgb,var(--mud-palette-warning) 18%,var(--mud-palette-surface));padding:1px 6px;border-radius:5px;font-weight:700}
.hc-content figure.embed{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px dashed var(--mud-palette-lines-inputs);border-radius:10px;padding:10px 12px}
.hc-content figure.embed .badge{font-size:.72rem;font-weight:800;padding:3px 8px;border-radius:6px;background:var(--mud-palette-primary);color:var(--mud-palette-primary-text)}

/* Video: 16:9 click-to-load player. */
.hc-video{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#000}
.hc-video iframe,.hc-video .hc-video__facade{position:absolute;inset:0;width:100%;height:100%;border:0}
.hc-video .hc-video__facade{cursor:pointer;padding:0;background:linear-gradient(135deg,#243240,#0b5cab);display:grid;place-items:center;color:#fff}
.hc-video .hc-video__play{width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.72);border:2px solid #fff;display:grid;place-items:center}
.hc-video .hc-video__cap{position:absolute;inset-inline:0;bottom:0;padding:8px 10px;font-size:.8rem;font-weight:600;text-align:start;background:linear-gradient(transparent,rgba(0,0,0,.85))}
.hc-video .hc-video__facade:focus-visible{outline:3px solid #fff;outline-offset:-5px}

/* Hint markers. */
.hc-beacon{position:fixed;z-index:1301;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--mud-palette-primary);color:var(--mud-palette-primary-text);font:800 .8rem/1 inherit;box-shadow:0 2px 8px rgba(0,0,0,.28)}
.hc-beacon::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--mud-palette-primary);opacity:.75;animation:hc-pulse 2.2s ease-out infinite}
.hc-beacon[aria-expanded="true"]::after{animation:none;opacity:0}
.hc-beacon--dot{width:18px;height:18px}
.hc-beacon--pill{width:auto;height:30px;border-radius:999px;padding:0 12px;grid-auto-flow:column;gap:6px}
.hc-beacon--pill::after{border-radius:999px}
.hc-beacon:focus-visible{outline:3px solid var(--mud-palette-primary);outline-offset:4px}
@keyframes hc-pulse{0%{transform:scale(.65);opacity:.85}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}

/* Hint pop-up and its arrow. */
.hc-hint-pop{position:fixed;z-index:1318;width:min(360px,calc(100vw - 24px))}
.hc-hint-pop .hc-hint-pop__body{max-height:56vh;overflow-y:auto}
.hc-hint-arrow{position:fixed;z-index:1319;width:14px;height:14px;transform:rotate(45deg);background:var(--mud-palette-surface);
  border-left:1px solid var(--mud-palette-lines-default);border-top:1px solid var(--mud-palette-lines-default)}
.hc-hint-arrow--down{border:0;border-right:1px solid var(--mud-palette-lines-default);border-bottom:1px solid var(--mud-palette-lines-default)}

/* Tour spotlight. */
.hc-tour{position:fixed;inset:0;z-index:1355}
.hc-tour--no-target{background:rgba(10,22,35,.45)}
.hc-tour__hole{position:fixed;border-radius:12px;pointer-events:none;box-shadow:0 0 0 9999px rgba(10,22,35,.45),0 0 0 3px rgba(255,255,255,.9);transition:all .3s cubic-bezier(.3,.9,.3,1)}
.hc-tour__card{position:fixed;width:min(340px,calc(100vw - 28px));transition:top .3s ease,left .3s ease}
.hc-dots{display:flex;gap:5px;margin-inline-end:auto}
.hc-dots i{width:7px;height:7px;border-radius:50%;background:var(--mud-palette-lines-inputs)}
.hc-dots i.on{width:18px;border-radius:99px;background:var(--mud-palette-primary)}


/* Element picker (runs in its own tab). */
.hc-pickbar{position:fixed;top:0;left:0;right:0;z-index:1600}
.hc-pick-outline{outline:3px dashed var(--mud-palette-primary)!important;outline-offset:2px!important}
body.hc-picking *{cursor:crosshair!important}

/* Screenshot/recording thumbnail in the Feedback tab. */
.hc-thumb{width:52px;height:34px;flex:none;border-radius:6px;object-fit:cover;border:1px solid var(--mud-palette-lines-default);background:var(--mud-palette-background-gray);display:grid;place-items:center}
.hc-rec-dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--mud-palette-error);animation:hc-blink 1.2s infinite}
@keyframes hc-blink{50%{opacity:.25}}

/* Chat bubbles. */
.hc-chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.hc-msg{max-width:82%;white-space:pre-line;overflow-wrap:anywhere}
.hc-msg--me{align-self:flex-end;background:var(--mud-palette-primary)!important;color:var(--mud-palette-primary-text)!important;border-bottom-right-radius:4px!important}
.hc-msg--them{align-self:flex-start;border-top-left-radius:4px!important}

@media (prefers-reduced-motion:reduce){
  .hc-beacon::after,.hc-rec-dot{animation:none}
  .hc-tour__hole,.hc-tour__card{transition:none}
}
@media (forced-colors:active){
  .hc-beacon,.hc-tour__hole{outline:2px solid Highlight}
}

/* News card: the whole card is one button. */
.hc-card-btn{display:block;width:100%;padding:0;border:0;background:none;text-align:start;color:inherit;font:inherit;cursor:pointer}
.hc-card-btn:focus-visible{outline:3px solid var(--mud-palette-primary);outline-offset:-3px}