/* /Components/Layout/SupportLayout.razor.rz.scp.css */
/* As on sarx.link: keep the h1 focus for screen readers, lose the ring on a heading. */
[b-0usvuby0yy] h1:focus,
[b-0usvuby0yy] h1:focus-visible {
    outline: none;
}
/* /Components/Pages/Contact.razor.rz.scp.css */
/* sarx.link's contact page layout: the reason on the left, the form on the right, one column on a phone. */
.sp-contact[b-g32njcv2on] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: var(--sp-8);
    align-items: start;
    padding: var(--sp-8) 0 var(--sp-9);
}

.sp-contact__lead[b-g32njcv2on] {
    display: grid;
    gap: var(--sp-4);
    align-content: start;
    position: sticky;
    top: 88px;
}

.sp-contact__lead h1[b-g32njcv2on] {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.sp-contact__lead .sx-hero__rule[b-g32njcv2on],
.sp-contact__lead .sx-hero__lede[b-g32njcv2on] {
    margin: 0;
}

.sp-contact__note[b-g32njcv2on] {
    margin: 0;
    max-width: 40ch;
    font-size: var(--text-sm);
    color: var(--fg-muted);
}

@media (max-width: 800px) {
    .sp-contact[b-g32njcv2on] {
        grid-template-columns: 1fr;
        gap: var(--sp-6);
        padding-top: var(--sp-6);
    }

    .sp-contact__lead[b-g32njcv2on] { position: static; }
}
/* /Components/Pages/FaqIndex.razor.rz.scp.css */
.sp-index[b-mrarxqxjyq] {
    display: grid;
    gap: var(--sp-4);
}

.sp-index h1[b-mrarxqxjyq],
.sp-index .sx-hero__rule[b-mrarxqxjyq],
.sp-index .sx-hero__lede[b-mrarxqxjyq] {
    margin: 0;
}

.sp-index__topics[b-mrarxqxjyq] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--sp-7) var(--sp-6);
    padding: var(--sp-8) 0 0;
}

.sp-index__topic h2[b-mrarxqxjyq] {
    font-size: var(--text-lg);
    margin: 0 0 var(--sp-3);
    padding-bottom: var(--sp-3);
    border-bottom: 1px solid var(--line-strong);
}

.sp-index__topic h2 a[b-mrarxqxjyq] {
    color: var(--fg-strong);
}

.sp-index__topic ul[b-mrarxqxjyq] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--sp-2);
}

.sp-index__topic li a[b-mrarxqxjyq] {
    color: var(--fg);
}

.sp-index__topic li a:hover[b-mrarxqxjyq] {
    color: var(--fg-strong);
}
/* /Components/Pages/Home.razor.rz.scp.css */
.sp-hero[b-hwa7ilxefz] {
    display: grid;
    gap: var(--sp-5);
}

.sp-hero h1[b-hwa7ilxefz] {
    margin: 0;
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.sp-hero .sx-hero__rule[b-hwa7ilxefz],
.sp-hero .sx-hero__lede[b-hwa7ilxefz] {
    margin: 0;
}

.sp-topics[b-hwa7ilxefz] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--sp-4);
}

.sp-topic[b-hwa7ilxefz] {
    display: grid;
    gap: var(--sp-3);
    align-content: start;
}

.sp-topic h3[b-hwa7ilxefz] {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-lg);
}

.sp-topic h3 a[b-hwa7ilxefz] {
    color: var(--fg-strong);
}

.sp-topic__summary[b-hwa7ilxefz] {
    margin: 0;
    color: var(--fg-muted);
    font-size: var(--text-sm);
}

.sp-topic__list[b-hwa7ilxefz] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--sp-2);
    font-size: var(--text-sm);
}

.sp-topic__list a[b-hwa7ilxefz] {
    color: var(--fg);
}

.sp-topic__list a:hover[b-hwa7ilxefz] {
    color: var(--fg-strong);
}

.sp-topic__all[b-hwa7ilxefz] {
    font-size: var(--text-sm);
}

.sp-popular[b-hwa7ilxefz] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0 var(--sp-6);
}

.sp-popular li[b-hwa7ilxefz] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    border-top: 1px solid var(--line);
}

.sp-popular a[b-hwa7ilxefz] {
    color: var(--fg-strong);
}

.sp-popular__topic[b-hwa7ilxefz] {
    flex: none;
    font-size: var(--text-xs);
    color: var(--fg-muted);
}

@media (max-width: 480px) {
    .sp-popular[b-hwa7ilxefz] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Search.razor.rz.scp.css */
.sp-results__head[b-zg0wl26eum] {
    display: grid;
    gap: var(--sp-4);
    padding: var(--sp-7) 0 var(--sp-5);
}

.sp-results__head h1[b-zg0wl26eum] {
    margin: 0;
}

.sp-results__count[b-zg0wl26eum],
.sp-results__none[b-zg0wl26eum] {
    color: var(--fg-muted);
}

.sp-results[b-zg0wl26eum] {
    margin: 0;
    padding: 0;
    list-style: none;
    max-width: 48rem;
}

.sp-results li[b-zg0wl26eum] {
    display: grid;
    gap: var(--sp-1);
    padding: var(--sp-4) 0;
    border-top: 1px solid var(--line);
}

.sp-results__q[b-zg0wl26eum] {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--fg-strong);
}

.sp-results__topic[b-zg0wl26eum] {
    font-size: var(--text-xs);
    color: var(--fg-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.sp-results__excerpt[b-zg0wl26eum] {
    margin: 0;
    color: var(--fg);
    font-size: var(--text-sm);
}
/* /Components/Pages/Topic.razor.rz.scp.css */
.sp-topic-page[b-fnyo650vx4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--sp-8);
    align-items: start;
    padding-bottom: var(--sp-4);
}

.sp-topic-page__head[b-fnyo650vx4] {
    padding: var(--sp-6) 0 var(--sp-5);
}

.sp-topic-page__head h1[b-fnyo650vx4] {
    margin: 0 0 var(--sp-3);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
}

.sp-topic-page__head .sx-hero__lede[b-fnyo650vx4] {
    margin: 0;
}

.sp-topic-page__aside[b-fnyo650vx4] {
    position: sticky;
    top: 88px;
    padding-top: var(--sp-7);
    display: grid;
    gap: var(--sp-3);
}

.sp-topic-page__aside h2[b-fnyo650vx4] {
    margin: var(--sp-3) 0 0;
}

.sp-toc[b-fnyo650vx4] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--sp-2);
    font-size: var(--text-sm);
}

.sp-toc a[b-fnyo650vx4] {
    color: var(--fg-muted);
}

.sp-toc a:hover[b-fnyo650vx4] {
    color: var(--fg-strong);
}

@media (max-width: 900px) {
    .sp-topic-page[b-fnyo650vx4] { grid-template-columns: 1fr; gap: 0; }
    .sp-topic-page__aside[b-fnyo650vx4] { position: static; padding-top: 0; }
}

.sp-crumbs[b-fnyo650vx4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding-top: var(--sp-5);
    font-size: var(--text-sm);
    color: var(--fg-muted);
}

.sp-crumbs a[b-fnyo650vx4] {
    color: var(--fg-muted);
}

.sp-crumbs a:hover[b-fnyo650vx4] {
    color: var(--fg-strong);
}

.sp-crumbs [aria-current][b-fnyo650vx4] {
    color: var(--fg);
}
/* /Components/Shared/EmergencyNote.razor.rz.scp.css */
.sp-emergency[b-vjd7ogbglz] {
    margin: 0;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--accent);
    border-left-width: 3px;
    border-radius: var(--r-2);
    background: var(--accent-soft);
    color: var(--fg-strong);
    font-size: var(--text-sm);
    max-width: 40rem;
}

.sp-emergency strong[b-vjd7ogbglz] {
    color: var(--accent-text);
}
/* /Components/Shared/QuestionList.razor.rz.scp.css */
.sp-qa[b-3crancrq7r] {
    display: grid;
}

.sp-qa__item[b-3crancrq7r] {
    padding: var(--sp-5) 0;
    border-top: 1px solid var(--line);
    /* Clear of the theme's sticky bar (72px) when a link lands on #question. */
    scroll-margin-top: 88px;
}

.sp-qa__item:target[b-3crancrq7r] {
    border-top-color: var(--accent);
}

.sp-qa__q[b-3crancrq7r] {
    margin: 0 0 var(--sp-3);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-lg);
    line-height: 1.25;
}

.sp-qa__q a[b-3crancrq7r] {
    color: var(--fg-strong);
}

.sp-qa__q a:hover[b-3crancrq7r] {
    color: var(--accent-text);
    text-decoration: none;
}

.sp-qa__a[b-3crancrq7r] {
    max-width: 68ch;
    color: var(--fg);
}

.sp-qa__a[b-3crancrq7r]  p,
.sp-qa__a[b-3crancrq7r]  ul,
.sp-qa__a[b-3crancrq7r]  ol {
    margin: 0 0 var(--sp-3);
}

.sp-qa__a[b-3crancrq7r]  :last-child {
    margin-bottom: 0;
}

.sp-qa__a[b-3crancrq7r]  li + li {
    margin-top: var(--sp-1);
}

.sp-qa__a[b-3crancrq7r]  ul,
.sp-qa__a[b-3crancrq7r]  ol {
    padding-left: var(--sp-5);
}
/* /Components/Shared/SearchBox.razor.rz.scp.css */
.sp-search[b-dsa2xuqxnl] {
    display: grid;
    gap: var(--sp-2);
    max-width: 40rem;
}

.sp-search__row[b-dsa2xuqxnl] {
    display: flex;
    gap: var(--sp-2);
}

.sp-search__input[b-dsa2xuqxnl] {
    flex: 1;
    min-width: 0;
    padding-left: 34px;
}

@media (max-width: 480px) {
    .sp-search__row[b-dsa2xuqxnl] { flex-direction: column; }
}
/* /Components/Shared/StillStuck.razor.rz.scp.css */
.sp-stuck[b-2g25kqmocp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4) var(--sp-6);
    margin: var(--sp-8) 0;
}

.sp-stuck h2[b-2g25kqmocp] {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--text-xl);
    margin: 0 0 var(--sp-1);
}

.sp-stuck p[b-2g25kqmocp] {
    margin: 0;
    color: var(--fg-muted);
}
/* /Components/Shared/SupportBar.razor.rz.scp.css */
/* The mark and the section, as one target padded to 44px — see Sarx.Web's AppBar.razor.css. */
.sp-bar__home[b-ldkhm04dbf] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-3);
    min-height: 44px;
    padding: var(--sp-3) var(--sp-2);
    margin-left: calc(-1 * var(--sp-2));
    text-decoration: none;
}

.sp-bar__section[b-ldkhm04dbf] {
    font-size: var(--text-sm);
    color: var(--fg-muted);
    padding-left: var(--sp-3);
    border-left: 1px solid var(--line-strong);
}

.sp-bar__home:hover[b-ldkhm04dbf]  .sx-wordmark,
.sp-bar__home:focus-visible[b-ldkhm04dbf]  .sx-wordmark {
    color: var(--accent-text);
}

.sp-bar__home:hover .sp-bar__section[b-ldkhm04dbf] {
    color: var(--fg-strong);
}
/* /Components/Shared/SupportFooter.razor.rz.scp.css */
/*
  sarx.link's footer styles, copied from Sarx.Web's SiteFooter.razor.css so the two footers match:
  the mark and its suffix as one lockup on a tighter gap, aligned on the baseline.
*/
.sx-footer__brand[b-n893v9cwse] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-2);
}

.sx-footer__sep[b-n893v9cwse] {
    color: var(--fg-muted);
}

.sx-footer__brand a[b-n893v9cwse] {
    color: var(--fg);
}

.sx-footer__brand a:hover[b-n893v9cwse] {
    color: var(--fg-strong);
    text-decoration: none;
}

/* The wordmark is the way home here too. It keeps the theme's muted footer colour until hovered;
   ::deep because it is another component's root. The mark is 46 by 20 pixels, which a finger
   misses, so the anchor is padded to a 44-pixel touch target and pulled back by the same amount,
   so the hit area grows and the footer does not. */
.sx-footer__home[b-n893v9cwse] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--sp-2);
    margin: -12px 0 -12px calc(-1 * var(--sp-2));
    text-decoration: none;
}

.sx-footer__home:hover[b-n893v9cwse]  .sx-wordmark,
.sx-footer__home:focus-visible[b-n893v9cwse]  .sx-wordmark {
    color: var(--fg-strong);
}
/* /Components/Shared/SupportForm.razor.rz.scp.css */
.sp-form[b-gi2mws7v6f] {
    display: grid;
    gap: var(--sp-4);
    max-width: 42rem;
}

/* The theme's .sx-fields is a div group; as a fieldset it needs the browser's frame taken off. */
.sp-form[b-gi2mws7v6f]  fieldset.sx-fields,
.sp-form fieldset[b-gi2mws7v6f] {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.sp-form fieldset + fieldset[b-gi2mws7v6f] {
    margin-top: var(--sp-3);
    padding-top: var(--sp-5);
    border-top: 1px solid var(--line);
}

.sp-form legend[b-gi2mws7v6f] {
    padding: 0;
    margin-bottom: var(--sp-4);
}

.sp-form__optional[b-gi2mws7v6f] {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--fg-muted);
    font-size: var(--text-xs);
    margin-left: var(--sp-1);
}

.sp-form__actions[b-gi2mws7v6f] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3) var(--sp-4);
    margin-top: var(--sp-2);
}

.sp-form__done[b-gi2mws7v6f] {
    max-width: 42rem;
    display: grid;
    gap: var(--sp-3);
}

.sp-form__done h2[b-gi2mws7v6f],
.sp-form__done p[b-gi2mws7v6f] {
    margin: 0;
}

.sp-form__ref code[b-gi2mws7v6f] {
    font-size: 1em;
    color: var(--fg-strong);
    letter-spacing: .04em;
}
/* /Components/Shared/ThemeToggle.razor.rz.scp.css */
/*
  The button borrows .sx-btn--ghost and .sx-btn--icon from the theme, so it sizes and hovers like
  every other icon control. Only the glyph swap is local.

  Everything here keys off <html> rather than off the button's own attributes, and that is the
  whole point. Blazor's enhanced navigation patches the page from the server's HTML, so any
  attribute a script writes on an element inside <body> is reverted the first time the visitor
  follows a link. The root element is not part of that patch, so a class and a data-theme on it
  are the only state that survives a click-through.
*/

/*
  No JavaScript, no button: it would do nothing. .sx-js is set by theme.js in <head>, before the
  first paint, so the button does not flash in and out on a normal load.
*/
.sx-theme-toggle[b-ibp7qyzff6] {
    display: none;
}

html.sx-js .sx-theme-toggle[b-ibp7qyzff6] {
    display: inline-flex;
}

.sx-theme-toggle__icon[b-ibp7qyzff6] {
    display: none;
    line-height: 0;
}

.sx-theme-toggle svg[b-ibp7qyzff6] {
    width: 18px;
    height: 18px;
}

/* Show the mode you are switching to, which is the opposite of the one you are in. Read from the
   root, so it is right in the very first byte the server sends and stays right afterwards. */
[data-theme="dark"] .sx-theme-toggle__icon--sun[b-ibp7qyzff6],
[data-theme="light"] .sx-theme-toggle__icon--moon[b-ibp7qyzff6] {
    display: block;
}
