:root {
    /* Opt every element (incl. native form controls and scrollbars) into
       light/dark theming so the browser renders them correctly in dark mode. */
    color-scheme: light dark;

    /* Single source of truth for the core surface palette. Component-specific
       colors still live in their own rules; these drive the base surfaces and
       are overridden as a group in the prefers-color-scheme: dark block below. */
    --color-page-background: white;
    --color-page-foreground: black;
    --color-pane-border: #aaa;
    --color-repo-tint: #eef4fb;

    /* Selection / focus highlight; identical in light and dark, so it is not
       overridden in the dark block below. */
    --color-selection: #3399ff;
}

html {
    display: flex;
    background-color: var(--color-page-background);

    /* Disable mobile browser font-boosting. It inflates text per-block by width,
       so the wide #code pre would grow more than the narrow #ln pre and the line
       numbers would drift out of alignment with their code lines down the page. */
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;

    /* Suppress the default grey tap-flash on touch; the :active states on
       interactive elements already provide press feedback. */
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: "Segoe UI", system-ui, Tahoma, Helvetica, Arial, sans-serif;
    cursor: text;
    margin: 0px;
    padding: 0px;
    flex: 1;
    background-color: var(--color-page-background);
    color: var(--color-page-foreground);
}

.body, p, ul, ol, h1, h2, h3 {
    margin: 20px;
}

/* Top-level layout for index.html (replaces the legacy <frameset>). The three
   panes are named iframes (h/n/s) so all existing top.h/top.n/top.s frame
   coordination in scripts.js keeps working unchanged. */
.indexBody {
    height: 100vh;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.headerFrame {
    flex: none;
    width: 100%;
    height: 58px;
    border: 0;
}

.paneContainer {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

.navFrame {
    flex: none;
    width: 504px;
    min-width: 200px;
    height: 100%;
    border: 0;
}

.contentFrame {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
}

/* Draggable divider between the side-by-side panes (desktop only -- hidden in
   the single-pane mobile layout below). Doubles as the visual border the
   navFrame used to own. initPaneResizer() in scripts.js sets navFrame's width
   from a drag here. */
.paneResizer {
    flex: none;
    width: 6px;
    height: 100%;
    background: var(--color-pane-border);
    cursor: col-resize;
}

.paneResizer:hover,
body.resizingPanes .paneResizer {
    background: var(--color-selection);
}

/* While dragging, the cursor passes over the iframes; disabling their pointer
   events keeps mousemove flowing to the top document driving the resize. */
body.resizingPanes iframe {
    pointer-events: none;
}

/* On narrow screens show one pane at a time instead of a 504px nav pane
   crowding the content. The header toggle button (and the search / result-click
   flows in scripts.js) flip the body's showNav class to pick which pane is
   visible; the content/document pane is shown by default. */
/* The single-pane mobile layout applies both to narrow (portrait) screens and to
   short landscape screens on touch devices -- a phone in landscape is wide enough to
   miss the width breakpoint but too short for a comfortable side-by-side split, so it
   gets the same one-pane-at-a-time treatment as portrait. These pane rules live in the
   top document, which sees the real device viewport; the matching pane toggle lives in
   the header iframe and is revealed via a JS-set .landscapePhone class instead (see the
   .headerBody.landscapePhone rule below and updateLandscapePhonePane in scripts.js). */
@media only screen and (max-width: 700px),
       only screen and (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
    .paneContainer {
        flex-direction: column;
    }

    .navFrame,
    .contentFrame {
        flex: 1 1 auto;
        width: 100%;
        height: auto;
        border: 0;
    }

    .navFrame {
        display: none;
    }

    /* The splitter only makes sense in the side-by-side layout. */
    .paneResizer {
        display: none;
    }

    body.showNav .navFrame {
        display: block;
    }

    body.showNav .contentFrame {
        display: none;
    }

    /* Let long result rows and reference snippets wrap instead of forcing the
       full-width nav pane to scroll sideways to read them. Tree nodes (folder /
       type / file names) stay nowrap since they are short. */
    .rL, a.rL, .referenceLine,
    .resultItem,
    .reference, .referenceDisabled {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

h1 {
    font-family: 'Segoe UI Light', 'Segoe UI', system-ui, Tahoma, Helvetica, Arial, sans-serif;
    font-weight: 100;
    background-color: #0099ce;
    color: white;
    padding: 16px;
}

pre {
    font-family: Consolas, ui-monospace, SFMono-Regular, Menlo, 'Courier New', 'Andale Mono', 'Lucida Console', monospace;
    font-size: 12pt;
    line-height: 125%;
    tab-size: 4;
}

    pre a:focus {
        color: inherit;
        background-color: lime;
    }

    pre b {
        font-weight: normal;
        color: blue;
    }

a:link {
    text-decoration: none;
    color: inherit;
}

a:visited {
    color: inherit;
}

a:hover {
    color: inherit;
    text-decoration: underline;
}

a:active {
    color: inherit;
}

a img {
    border: none;
}

div div a:hover, body a:hover {
    text-decoration: none;
}

table.ex {
    margin: 32px;
    border-spacing: 0px;
    border-style: solid;
    border-color: lightgray;
    border-left-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 0px;
    border-right-width: 0px;
}

thead th.ex {
    background-color: #007ba6;
    color: white;
    border-style: solid;
    border-color: #0099ce;
}

tr .ex {
    vertical-align: top;
    border-style: solid;
    border-color: lightgray;
    padding: 8px;
    border-left-width: 0px;
    border-top-width: 0px;
    border-bottom-width: 1px;
    border-right-width: 1px;
}

.note {
    margin: 8px;
    padding: 8px;
    background-color: lightyellow;
    border-color: khaki;
}

.rG, .resultGroup {
    margin-right: 0px;
    margin-left: 8px;
    margin-bottom: 16px;
}

.partialTypeHeader {
    font-size: larger;
    font-weight: bold;
    margin-left: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
}

.linkIcon {
    vertical-align: middle;
    margin-right: 12px;
    list-style-type: disc;
    list-style-position: outside;
}

.resultGroupHeader {
    cursor: pointer;
    padding: 6px 6px 6px 28px;
    margin-top: 16px;
    background-color: #e7f5ff;
    display: block;
}

.resultGroupHeader::before {
    content: url(content/icons/minus.png);
    float: left;
    margin-left: -18px;
    margin-top: 1px;
}

.resultGroupHeader.collapsed::before {
    content: url(content/icons/plus.png);
}

.resultGroupHeader:hover, .resultGroupHeader:active {
    background-color: #d4edff;
}

.resultGroupAssemblyName {
    font-size: larger;
    font-weight: bold;
}

.rA {
    font-size: larger;
    font-weight: bold;
    background-color: #e7f5ff;
    padding: 6px 6px 6px 28px;
    cursor: pointer;
}

.rA::before {
    content: url(content/icons/minus.png);
    float: left;
    margin-left: -18px;
    margin-top: -2px;
}

.rA.collapsed::before {
    content: url(content/icons/plus.png);
}

.rA:hover, .rA:active {
    background-color: #d4edff;
}

.resultGroupProjectPath {
    font-size: smaller;
    color: silver;
}

.rF, .resultGroupFileGroup {
    margin-top: 8px;
}

.rL, a.rL, .referenceLine {
    font-family: Consolas, ui-monospace, SFMono-Regular, Menlo, 'Courier New', 'Andale Mono', 'Lucida Console', monospace;
    font-size: small;
    white-space: nowrap;
    display: block;
}

    .rL:hover, .referenceLine:hover, .rL:active, .referenceLine:active {
        background-color: #eeeeee;
    }

.rx, .referenceLineText {
    margin-left: 12px;
}

a b {
    font-weight: normal;
    margin-right: 12px;
    color: #247b95;
}

a i {
    background-color: yellow;
    font-style: normal;
}

.l {
    margin-right: 12px;
}

.rO, .referenceOccurrence {
    background-color: yellow;
}

.rN, .resultGroupFileName {
    background-color: #f6f6f6;
    color: gray;
    padding: 4px 4px 4px 30px;
    background-attachment: local;
    background-repeat: no-repeat;
    background-position: 8px 8px;
    background-origin: border-box;
}

.resultItem {
    padding: 8px 0px 8px 24px;
    text-decoration: none;
    white-space: nowrap;
    border-left-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-left-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-left-style: solid;
    border-top-style: solid;
    border-bottom-style: solid;
}

    .resultItem:hover, .resultItem:active {
        background-color: #f6f6f6;
    }

.projectExplorerBody, .namespaceExplorerBody, .solutionExplorerBody {
    cursor: default;
    /*font-size: 12px;*/
}

.reference {
    cursor: pointer;
    display: block;
    margin-left: 21px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 31px;
    white-space: nowrap;
    background-image: url('content/icons/192.png');
    background-attachment: local;
    background-repeat: no-repeat;
    background-position: 10px 6px;
    background-origin: border-box;
}

.referenceDisabled {
    display: block;
    margin-left: 21px;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 31px;
    white-space: nowrap;
    background-image: url('content/icons/192.png');
    background-attachment: local;
    background-repeat: no-repeat;
    background-position: 10px 6px;
    background-origin: border-box;
    color: lightgray;
}

.folder {
    margin-left: 21px;
}

.folderTitle {
    white-space: nowrap;
    padding-top: 1px;
    padding-bottom: 1px;
}

/* Repo/Solution grouping nodes only appear in the Solution Explorer tree when a merged site spans
   more than one repo (or, within a repo, more than one solution) -- see Program.IndexSolutionsAsync
   and SolutionFinalizer.WriteFolder. They get a bolder, tinted treatment so the repo/solution
   boundaries are visually obvious at a glance, distinct from plain physical folders. */
.repoTitle {
    font-weight: bold;
    background-color: var(--color-repo-tint);
    border-left: 3px solid #4a90d9;
    padding-left: 4px;
    margin-left: -4px;
}

.solutionTitle {
    font-weight: bold;
    font-style: italic;
}

.typeTitle {
    white-space: nowrap;
    padding-top: 1px;
    padding-bottom: 1px;
    margin-left: 30px;
}

.typeDeclarationNodeImage, .tDNI {
    margin-top: 3px;
    padding-right: 8px;
    vertical-align: top;
}

.typeDeclarationNode, .tDN {
    cursor: pointer;
    white-space: nowrap;
    display: inline;
    padding-left: 0px;
    padding-top: 1px;
    padding-bottom: 1px;
}

    .typeDeclarationNode:focus, .tDN:focus {
        background-color: var(--color-selection);
        color: white;
    }

.projectCS {
    white-space: nowrap;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 32px;
    background-image: url('content/icons/196.png');
    background-attachment: local;
    background-repeat: no-repeat;
    background-position: 6px 6px;
}

.projectVB {
    white-space: nowrap;
    padding-top: 1px;
    padding-bottom: 1px;
    padding-left: 32px;
    background-image: url('content/icons/195.png');
    background-attachment: local;
    background-repeat: no-repeat;
    background-position: 6px 6px;
}

.cs {
    cursor: pointer;
    white-space: nowrap;
    display: block;
    padding-left: 32px;
    margin-left: 21px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-image: url('content/icons/csharp.png');
    background-attachment: local;
    background-repeat: no-repeat;
    background-position: 10px 6px;
    background-origin: border-box;
}

    .cs:focus {
        background-color: var(--color-selection);
        color: white;
    }

.vb {
    cursor: pointer;
    white-space: nowrap;
    display: block;
    padding-left: 32px;
    margin-left: 21px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-image: url('content/icons/vb.png');
    background-attachment: local;
    background-repeat: no-repeat;
    background-position: 10px 6px;
    background-origin: border-box;
}

    .vb:focus {
        background-color: var(--color-selection);
        color: white;
    }

.csproj {
    cursor: pointer;
    white-space: nowrap;
    display: block;
    padding-left: 32px;
    margin-left: 21px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-image: url('content/icons/196.png');
    background-attachment: local;
    background-repeat: no-repeat;
    background-position: 10px 6px;
    background-origin: border-box;
}

    .csproj:focus {
        background-color: var(--color-selection);
        color: white;
    }

.vbproj {
    cursor: pointer;
    white-space: nowrap;
    display: block;
    padding-left: 32px;
    margin-left: 21px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-image: url('content/icons/195.png');
    background-attachment: local;
    background-repeat: no-repeat;
    background-position: 10px 6px;
    background-origin: border-box;
}

    .vbproj:focus {
        background-color: var(--color-selection);
        color: white;
    }

.xaml {
    cursor: pointer;
    white-space: nowrap;
    display: block;
    padding-left: 32px;
    margin-left: 21px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-image: url('content/icons/xaml.png');
    background-attachment: local;
    background-repeat: no-repeat;
    background-position: 10px 6px;
    background-origin: border-box;
}

    .xaml:focus {
        background-color: var(--color-selection);
        color: white;
    }

.xml {
    cursor: pointer;
    white-space: nowrap;
    display: block;
    padding-left: 32px;
    margin-left: 21px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-image: url('content/icons/xml.png');
    background-attachment: local;
    background-repeat: no-repeat;
    background-position: 10px 6px;
    background-origin: border-box;
}

    .xml:focus {
        background-color: var(--color-selection);
        color: white;
    }

.resx {
    cursor: pointer;
    white-space: nowrap;
    display: block;
    padding-left: 32px;
    margin-left: 21px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-image: url('content/icons/resx.png');
    background-attachment: local;
    background-repeat: no-repeat;
    background-position: 10px 6px;
    background-origin: border-box;
}

    .resx:focus {
        background-color: var(--color-selection);
        color: white;
    }

.ts {
    cursor: pointer;
    white-space: nowrap;
    display: block;
    padding-left: 32px;
    margin-left: 21px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-image: url('content/icons/typescript.png');
    background-attachment: local;
    background-repeat: no-repeat;
    background-position: 10px 6px;
    background-origin: border-box;
}

    .ts:focus {
        background-color: var(--color-selection);
        color: white;
    }

.selectedFilename {
    background-color: var(--color-selection);
    color: white;
}

    .selectedFilename:link, .selectedFilename:visited, .selectedFilename:hover, .selectedFilename:active {
        color: white;
    }

.currentResult {
    border-left-color: lightgray;
    border-top-color: lightgray;
    border-bottom-color: lightgray;
    border-left-style: solid;
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-width: 1px;
    border-top-width: 1px;
    border-bottom-width: 1px;
    background-color: #eeeeee;
}

    .currentResult:hover {
        background-color: #eeeeee;
    }

.resultLine {
}

.resultKind {
    display: inline;
    color: blue;
    margin-left: 5px;
    margin-right: 5px;
}

.resultName {
    display: inline;
    margin-left: 0px;
}

.resultDescription {
    font-size: smaller;
    color: silver;
    text-decoration: none;
}

.rH {
    margin-right: 0px;
    padding: 8px;
    background-color: #68217A;
    color: white;
}

.cB {
}

.cz {
    margin-bottom: 66px;
}

.tb {
    display: flex;
    align-items: flex-start;
    /* Grow to the code's width so the page itself (not a nested region) owns
       horizontal scrolling. This keeps the browser's own horizontal scrollbar
       at the viewport bottom where it's always reachable, instead of at the
       bottom of the (tall) code where you'd have to scroll all the way down. */
    width: max-content;
    min-width: 100%;
}

/* Keep the line-number (and glyph) gutter frozen on the left while long code
   lines scroll horizontally, and scrolling vertically with the code. `.tb` is
   the sticky element's containing block and is wider than the viewport, while
   the page (body) is the scrollport -- no ancestor sets `overflow`, which is
   what silently breaks sticky. The opaque background and `z-index` mask the
   code as it scrolls underneath. */
.gutter {
    position: sticky;
    left: 0;
    z-index: 2;
    flex: none;
    display: flex;
    align-items: flex-start;
    background-color: var(--color-page-background);
}

.codeScroll {
    flex: none;
}

#ln, #glyph {
    flex: none;
    margin-left: 16px;
    margin-right: 24px;
    margin-top: 0;
    color: #247b95;
    text-align: right;
}

#code {
    flex: none;
    margin: 0;
    text-align: left;
}

.dH {
    position: fixed;
    width: 100%;
    bottom: 0;
    background-color: aliceblue;
    padding: 8px;
    /* Pad past the iOS home-indicator / browser chrome safe area so the last
       wrapped line isn't clipped at the very bottom of the viewport. */
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
    color: gray;
    /* Grow with the content instead of a hard 50px. On mobile the File/Project
       paths wrap to extra lines; a fixed height pinned to `bottom: 0` pushed the
       overflow below the viewport and cut it off. */
    box-sizing: border-box;
    min-height: 50px;
    /* Long unbroken paths/URLs (no spaces) otherwise set the table cell's
       min-content width, pushing the `width: 100%` table wider than the viewport
       so the text runs off the edge. Allow such tokens to break and wrap. */
    overflow-wrap: anywhere;
    opacity: 0.85;
    /* Keep the footer above the code/gutter. The gutter and the
       `-webkit-overflow-scrolling: touch` code scroller are composited on iOS,
       and without an explicit stacking context Safari paints the line numbers
       over the fixed footer as they scroll past it. Promoting `.dH` to its own
       layer with a `z-index` forces the footer to stay on top. */
    z-index: 100;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.headerBody {
    background-color: #68217A;
    margin: 0px;
    padding: 0px;
    border-width: 0px;
}

#dotnetLogo {
    margin-top: 10px;
    margin-bottom: 6px;
    margin-left: 10px;
    margin-right: 0px;
    padding: 0px;
    border-width: 0px;
    vertical-align: top;
    display: inline-block;
}

#dotnetLogo.brandingHidden {
    display: none;
}

#search-box {
    font-size: 16pt;
    width: 405px;
    border-color: lightgray;
    border-width: 1px;
    border-style: solid;
    background-image: url('content/icons/searchmagnifyingglass.png');
    background-repeat: no-repeat;
    background-position: 8px 10px;
    padding-left: 32px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-right: 5px;
    margin-left: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 0px;
    vertical-align: top;
    /*border-style: none;
    background-color: transparent;
    width: 100%;*/
}

/* Embedded directly into the page's "note" strip (results.html's "N results found:" bar, or
   SolutionExplorer.html's static "Solution Explorer" label) via embedRepoFilterInNote() in
   scripts.js, so it reads as a filter on that content rather than a separate control elsewhere
   on the page. Only applied once scripts.js actually moves a select in, so a plain .note (no
   filter, or a single-repo/untagged site) is completely unaffected. */
.note.hasFilter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

/* The repo filter dropdown itself. Hidden by default; scripts.js only shows it once the site has
   more than one distinct repo tag to offer. */
#repo-filter {
    font-size: 11pt;
    border-color: lightgray;
    border-width: 1px;
    border-style: solid;
    padding: 3px 20px 3px 6px;
    max-width: 200px;
    flex: none;
    background-color: white;
    /* Matches the note's own ~28px content-box height (13pt/125% line-height text plus 8px
       top/bottom padding, minus the border this control adds) so it sits comfortably inline
       with the result count text rather than visibly stretching the note. */
    box-sizing: border-box;
    height: 28px;
    /* The browser's native dropdown arrow ignores padding-right -- it's drawn flush against the
       border regardless -- so appearance:none replaces it with a plain SVG chevron we can
       actually position with background-position, leaving the padding above to reserve text
       space in front of it. */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M0 0 L5 6 L10 0 Z' fill='gray'/></svg>");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 10px 6px;
}

/* Keep the note strips -- the repo filter dropdown, "N results found:", "Generated in X ms",
   and the "Try also browsing" footer link -- pinned and visible, and scroll only the result
   list/tree between them. Without this a single long result line widens the page and pushes the
   dropdown off-screen, forcing a horizontal scroll just to reach the filter. Applies to the two
   nav-frame pages that carry the filter: results.html and SolutionExplorer.html. */
body.resultsBody,
body.solutionExplorerBody {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* results.html: #symbols holds the (sticky) note strips and the scrolling result groups. The
   footer "solution explorer" link is a sibling below it and stays put on its own. */
body.resultsBody #symbols {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

body.resultsBody #symbols > .note:first-child {
    position: sticky;
    top: 0;
    z-index: 2;
}

body.resultsBody #symbols > .note:last-child {
    position: sticky;
    bottom: 0;
    z-index: 2;
}

body.resultsBody > .note {
    flex: none;
}

/* Each result group spans the full pane width (no side margins) so its header tint reads as a
   full-width band, and the group's own vertical rhythm is preserved by the bottom margin only. */
body.resultsBody .resultGroup {
    margin-left: 0;
    margin-right: 0;
}

/* A long result line scrolls within the group's collapsible body -- not the whole group -- so the
   header above it (which is a sibling of this scroller) stays full-width and can stick on scroll
   instead of sliding sideways with the content. The small indent keeps items inset under the icon. */
body.resultsBody .resultGroup > div {
    overflow-x: auto;
    padding-left: 8px;
}

/* Project/assembly group headers float at the top of the scroll area while their items scroll past,
   so the group a result belongs to stays labeled. They stick just below the pinned "N results"
   note; --groupHeaderTop is that note's measured height (set in embedRepoFilterInNote). */
body.resultsBody .resultGroupHeader {
    position: sticky;
    top: var(--groupHeaderTop, 0px);
    z-index: 1;
}

/* SolutionExplorer.html: the header note and footer link stay put; the tree scrolls between. */
body.solutionExplorerBody > .note {
    flex: none;
}

body.solutionExplorerBody #rootFolder {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* Repo (and, on multi-solution sites, solution) grouping headers stay visible while the tree is
   scrolled. Sticky top floats the header down as its subtree scrolls past so the current repo stays
   labeled. The band must read full-width at every nesting depth like the outermost repo, so
   normalizeGroupingBands (scripts.js) pulls each header's box to the pane's left edge and restores the
   depth indent as padding (leaving just the text/arrow offset); min-width:100vw then spans the header
   across the pane -- sticky left:0 keeps it there when a long path scrolls the tree sideways. The
   opaque background (repoTitle already tints; solutionTitle gets one) stops scrolled rows from showing
   through the pinned header. */
body.solutionExplorerBody .repoTitle,
body.solutionExplorerBody .solutionTitle {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
    min-width: 100vw;
    width: max-content;
    box-sizing: border-box;
}

body.solutionExplorerBody .solutionTitle {
    background-color: var(--color-page-background);
}
/* Hides a Solution Explorer project subtree that doesn't match the selected repo filter (see
   filterSolutionExplorerByRepo in scripts.js). A class rather than inline display is used so this
   doesn't fight with the folder expand/collapse logic, which also toggles display on the same
   [data-assembly] elements. */
.repoHidden {
    display: none !important;
}

/* Hides a repo grouping header once that repo is the one selected in the filter dropdown (see
   filterSolutionExplorerByRepo in scripts.js) -- its folder is forced open at the same time, so
   the tree reads the same as an ungrouped/single-repo site instead of showing an always-selected
   wrapper around everything the user already scoped to. */
.repoUnwrapped {
    display: none !important;
}

#logoText {
    background-image: url(content/icons/microsoftlogo.png);
    background-repeat: no-repeat;
    background-position: 0px 22px;
    background-clip: border-box;
    color: white;
    font-size: 20px;
    margin-left: 16px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding-top: 14px;
    padding-bottom: 2px;
    padding-left: 95px;
    padding-right: 0px;
    vertical-align: top;
    display: inline-block;
}

/* Keep the "Source Browser" text/home-link itself when branding is off -- just drop the
   Microsoft logo image and the left padding reserved for it. */
#logoText.brandingHidden {
    background-image: none;
    padding-left: 0px;
}

#currentVersion {
    color: #e0e0e0;
    margin-top: 19px;
    margin-left: 15px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding: 0px;
    vertical-align: top;
    display: inline-block;
}

#headerMenu {
    float: right;
    top: 0px;
    right: 10px;
    padding: 18px;
}

/*
 * Config selector (#104). Mounted INSIDE each content page itself, directly
 * under that page's "dH" file-header block, as part of the code view --
 * rather than as a persistent row spanning the whole index.html page above
 * both panes -- see scripts.js's sbMountConfigSelectorIntoContentPage. It's
 * mounted only when the CURRENTLY-DISPLAYED content page has anything to
 * select between at all: a site can have 2+ registered configs overall yet
 * still have plenty of pages that are entirely shared (no [data-configs]
 * anywhere on them), so nothing is mounted there -- the overwhelming
 * majority of pages even on a config-aware site -- and a 0/1-config site
 * never mounts anything at all.
 */
.configSelectorPanel {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    box-sizing: border-box;
    padding: 6px 12px;
    background-color: var(--color-page-background);
    border-bottom: 1px solid var(--color-pane-border);
    font-size: 12px;
}

.configSelectorToggle {
    flex: none;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-page-foreground);
    cursor: pointer;
    font-size: 12px;
    line-height: 18px;
}

/* A plain CSS-triangle chevron -- no icon asset needed. Points down when
   expanded ("click to collapse"), rotates to point right when collapsed
   ("click to expand"). */
.configSelectorToggle::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform 0.15s ease-in-out;
}

.configSelectorPanelCollapsed .configSelectorToggle::before {
    transform: rotate(-90deg);
}

.configSelectorBody {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    min-width: 0;
}

.configAxisGroup {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.configSelectorLabel {
    margin-right: 2px;
    font-weight: 600;
    color: var(--color-page-foreground);
    opacity: 0.75;
}

/* Pill-style toggle for one axis value (e.g. "windows" within the "os"
   axis). Active (selected/included) pills are filled; inactive ones are
   outlined only, matching the approved option-a-refined-v2 mockup. */
.configSelectorPill {
    display: inline-block;
    border: 1px solid var(--color-pane-border);
    border-radius: 999px;
    padding: 2px 10px;
    margin: 0;
    background: transparent;
    color: var(--color-page-foreground);
    font-size: 12px;
    line-height: 16px;
    cursor: pointer;
}

.configSelectorPillActive {
    background-color: #68217A;
    border-color: #68217A;
    color: white;
}

/* Compact per-axis summary chip shown while the panel is collapsed, e.g.
   "os: windows" or "arch: all" when that axis has no active restriction. */
.configAxisSummaryPill {
    display: inline-block;
    border-radius: 999px;
    padding: 2px 10px;
    background-color: var(--color-pane-border);
    color: var(--color-page-foreground);
    font-size: 11px;
    line-height: 16px;
    opacity: 0.85;
}

/* Applied/removed at runtime by sbApplyConfigFilter (scripts.js) to elements
   carrying data-configs that don't overlap the current selection. */
.configFilteredOut {
    color: lightgray;
    opacity: 0.5;
}

/* Switcher banner injected at the top of a file whose rendered content genuinely differs by
   config (ConfigFileDeduper's "shared-render-divergent" bucket); each link is its own
   data-configs-tagged span so the selector greys out configs the reader hasn't selected.
   Hidden entirely -- the mounted .configSelectorPanel above is now the single control for
   picking a config, and clicking a pill there already auto-navigates to the matching variant
   (sbTryAutoNavigateToVariant). The markup stays in the page (not removed at generation time)
   purely as data: that auto-navigate lookup still queries .configFileVariantLink[data-configs]
   to find each variant's URL. */
.configFileVariantBanner {
    display: none;
}

/* Narrow-screen single-pane toggle; only shown at the <=700px breakpoint. */
#paneToggle {
    display: none;
}

#downloadButton {
    text-align: center;
    background-color: #68217A;
    color: white;
    font-size: 16pt;
    padding: 40px;
    margin: 60px;
}

#feedbackButtonLink {
    color: white;
    margin: 8px;
}

    #feedbackButtonLink:hover {
        text-decoration: underline;
    }

#downloadButtonLink {
    color: white;
    margin: 8px;
}

    #downloadButtonLink:hover {
        text-decoration: underline;
    }

#licenseButtonLink {
    color: white;
    margin: 8px;
}

    #licenseButtonLink:hover {
        text-decoration: underline;
    }

#helpButtonLink {
    color: white;
    margin: 8px;
}

    #helpButtonLink:hover {
        text-decoration: underline;
    }

.result {
    margin: 16px;
    padding: 4px;
    background-color: lightgoldenrodyellow;
}

.r, .rd {
    cursor: pointer;
}

.r {
    border-width: 1px;
    border-color: ivory;
    border-style: solid;
}

.unknownClassification {
    color: hotpink;
}

.k, a.k {
    color: blue;
}

    a.k, a.k:hover {
        text-decoration: underline;
    }

.t, a.t,
.l, .lineNumber {
    color: #247b95;
}

.c {
    color: #008000;
}

.x, .e {
    color: #808080;
}

.s {
    color: #a31515;
}

.xd {
    color: blue;
}

.xn {
    color: #A31515;
}

.xan {
    color: red;
}

.xav {
    color: blue;
}

.xer {
    color: red;
}

.xcs {
    color: #808080;
}

.xpi {
    color: #808080;
}

.xld {
    color: #6464B9;
}

.xln {
    color: #844646;
}

.xlan {
    color: #B96464;
}

.xlav {
    color: #6464B9;
}

.xlaq {
    color: #555555;
}

.xler {
    color: #B96464;
}

.xlcs {
    color: #C0C0C0;
}

.xlpi {
    color: #C0C0C0;
}

.xlee {
    color: #B96464;
    background-color: #FFFEBF;
}

a.s, a.s:hover {
    color: #a31515;
    text-decoration: underline;
}

p a, p a:link, p a:hover, p a:focus, p a:active,
ul a, ul a:link, ul a:hover, ul a:focus, ul a:active,
ol a, ol a:link, ol a:hover, ol a:focus, ol a:active,
.blueLink, .blueLink:link, .blueLink:hover, .blueLink:focus, .blueLink:active {
    text-decoration: underline;
    color: blue;
}

    p a:visited,
    ul a:visited,
    .blueLink:visited {
        color: blue;
    }

.partialTypeLink {
    color: blue;
    padding-top: 8px;
    padding-bottom: 8px;
    margin-left: 32px;
    text-decoration: none;
}

    .partialTypeLink:hover {
        background-color: #eeeeee;
        text-decoration: none;
    }

.documentOutlineButton {
    position: fixed;
    right: 0;
    top: 0;
    margin: 0px;
    padding: 8px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    background-color: #ffffff;
    opacity: 0.9;
}

    .documentOutlineButton:hover, .documentOutlineButton:active {
        border-color: #eeccc0;
        background-color: #fff5ec;
    }

.projectExplorerButton {
    position: fixed;
    right: 0;
    top: 50px;
    margin: 0px;
    padding: 8px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    background-color: #ffffff;
    opacity: 0.9;
}

    .projectExplorerButton:hover, .projectExplorerButton:active {
        border-color: #90e6d4;
        background-color: #dcfff8;
    }

.namespaceExplorerButton {
    position: fixed;
    right: 0;
    top: 100px;
    margin: 0px;
    padding: 8px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    background-color: #ffffff;
    opacity: 0.9;
}

    .namespaceExplorerButton:hover, .namespaceExplorerButton:active {
        border-color: #e0e0e0;
        background-color: #f0f0f0;
    }

/* Promote the fixed toolbar buttons to their own compositing layer so iOS
   Safari keeps them steady instead of repainting (jittering) them while the
   code window scrolls. */
.documentOutlineButton,
.projectExplorerButton,
.namespaceExplorerButton {
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Touch pointers: the stacked explorer buttons render at 48px (32px icon +
   8px padding), a fine tap size, but the 50px offsets leave only a 2px gap
   between adjacent targets. Space them out so neighboring buttons don't abut
   and cause mis-taps. Left as-is for mouse pointers. */
@media (pointer: coarse) {
    .projectExplorerButton {
        top: 56px;
    }

    .namespaceExplorerButton {
        top: 112px;
    }
}

.documentOutlineDiv:hover, .documentOutlineDiv:active {
    background-color: #f6f6f6;
}

#root {
    padding: 16px;
}

.tabChannel {
    margin: 0px;
    padding: 0px;
    background-color: #68217A;
}

.activeTab {
    background-color: white;
    padding-left: 16px;
    padding-top: 6px;
    padding-right: 16px;
    padding-bottom: 6px;
    display: inline-block;
}

.inactiveTab {
    background-color: #68217A;
    color: white;
    padding-left: 16px;
    padding-top: 6px;
    padding-right: 16px;
    padding-bottom: 6px;
    display: inline-block;
}

    .inactiveTab:link, .inactiveTab:visited, .inactiveTab:hover, .inactiveTab:active {
        color: white;
    }

.imagePlusMinus {
    vertical-align: top;
    margin-left: 8px;
    margin-top: 6px;
    margin-right: 14px;
    margin-bottom: -1px;
}

.imageFolder {
    margin-left: 0px;
    margin-top: 5px;
    margin-right: 6px;
    margin-bottom: -2px;
}

#sourcesList {
    margin: 32px;
}

    #sourcesList li {
        background-color: steelblue;
        color: white;
        padding: 5px 10px 5px 10px;
        margin: 4px;
        display: inline-block;
        list-style-type: none;
        font-weight: 100;
    }

.externalIndexLinks {
    margin: 32px;
}

    .externalIndexLinks li {
        background-color: purple;
        color: white;
        padding: 10px 20px;
        margin: 4px;
        display: inline-block;
        list-style-type: none;
    }

        .externalIndexLinks li a {
            color: white;
        }

.msbuildlink {
}

    .msbuildlink:hover {
        background-color: whitesmoke;
    }

.projectInfo {
    color: #747474;
}

/* Header layout is defined for the full-width case above; these breakpoints
   progressively hide the non-essential header chrome as the viewport narrows.
   Layered max-width queries stack, so e.g. below 462px all three apply. */
@media only screen and (max-width: 1280px) {
    #dotnetLogo {
        display: none;
    }

    #currentVersion {
        display: none;
    }
}

@media only screen and (max-width: 869px) {
    #logoText {
        display: none;
    }
}

@media only screen and (max-width: 700px) {
    /* Keep Help reachable on mobile -- it holds the only link to the overview/help page.
       Drop the desktop float and sit it after the pane toggle as a flex sibling that
       doesn't grow, so the search box still takes the remaining width. */
    #headerMenu {
        float: none;
        flex: none;
        padding: 0;
    }

    /* Size Help like the pane toggle so the two read as one consistent pair, rather than
       Help's default 16px next to the toggle's 14px. */
    #helpButtonLink {
        display: inline-block;
        margin: 0;
        padding: 18px 8px;
        font-size: 14px;
        line-height: 20px;
    }

    /* The search box + pane toggle share this line -- lay them out as flex siblings and
       let the browser reserve exact space for each. The toggle label ("Results"/"Code")
       varies in width, so the old absolute toggle plus a fixed padding-right reservation
       overlapped the search box in portrait; flex avoids the magic number entirely. */
    #searchBoxAndImages {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        padding-left: 8px;
    }

    #search-box {
        box-sizing: border-box;
        /* Zero flex-basis (not `auto`) so the box grows from 0 rather than from
           its base `width: 405px`. iOS Safari uses an input's intrinsic size as
           the `auto` basis and won't shrink it even with `min-width: 0`, which
           pushed the pane toggle off screen in portrait. */
        flex: 1 1 0;
        width: 0;
        min-width: 0;
        margin: 10px 0;
    }

    /* Keep the control from stretching to its widest option's text on a narrow phone. */
    #repo-filter {
        max-width: 120px;
        font-size: 9pt;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    #paneToggle {
        display: inline-block;
        flex: none;
        margin: 0;
        padding: 18px 14px;
        color: white;
        font-size: 14px;
        line-height: 20px;
        white-space: nowrap;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
    }

    /* Fewer axis groups fit per row on narrow screens -- let each axis group
       (and, within it, each pill) wrap onto its own line instead of clipping
       or horizontally scrolling. */
    .configSelectorPanel {
        font-size: 11px;
        padding: 6px 8px;
    }
}

/* Landscape phones keep the desktop-width header layout (they are wide enough), but
   they use the single-pane body layout (see the landscape term on the pane breakpoint
   near the top), so they still need the pane toggle. The toggle lives in the fixed
   58px-tall header iframe, whose own viewport is always short + landscape and so can't
   tell a landscape phone from a portrait tablet via a CSS media query; scripts.js sets
   .landscapePhone on the header body from a device-level matchMedia instead. */
.headerBody.landscapePhone #paneToggle {
    display: inline-block;
    vertical-align: middle;
    padding: 18px 14px;
    color: white;
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

@media (prefers-color-scheme: dark) {
    /* Flip the shared palette; the base surfaces (html/body/panes) pick these
       up automatically through the custom properties declared in :root. */
    :root {
        --color-page-background: black;
        --color-repo-tint: #1c2b3d;
        --color-page-foreground: #aaa;
        --color-pane-border: #333;
    }

    /* Default text color for elements that don't inherit it (notably native
       form controls like the search box); component-specific colors are set by
       their own rules below. Backgrounds don't need a universal reset -- every
       themed background is a class/id rule that outranks the page default, so a
       light background never bleeds onto the dark page. */
    * {
        color: var(--color-page-foreground);
    }

    .imagePlusMinus, .resultGroupHeader::before, .rA::before {
        filter: invert(1);
    }

    h1 {
        background: linear-gradient(to right, #789 0%,#012 80%,#000 100%);
        /*color: white;*/
    }

    pre a:focus {
        color: inherit;
        background-color: #255;
    }

    pre b {
        color: #569CD6;
    }

    a:link {
        color: inherit;
    }

    a:visited {
        color: inherit;
    }

    a:hover {
        color: inherit;
    }

    a:active {
        color: inherit;
    }

    table.ex {
        border-color: #333;
    }

    thead td.ex {
        background: linear-gradient(to right, #444 0%,#111 100%);
    }

    tr td.ex {
        border-color: #333;
    }

    .note {
        background-color: #443;
        border-color: #665;
    }

    .repoTitle {
        border-left-color: #4a90d9;
    }

    .resultGroupHeader {
        background-color: #333;
    }

        .resultGroupHeader:hover, .resultGroupHeader:active {
            background-color: #555;
        }

    .rA {
        background-color: #123;
    }

        .rA:hover, .rA:active {
            background-color: #123;
        }

    .rL:hover, .referenceLine:hover, .rL:active, .referenceLine:active {
        background-color: #333;
    }

    a i {
        background-color: #553;
    }

    .rO, .referenceOccurrence {
        background-color: #aa0;
    }

    .rN, .resultGroupFileName {
        background-color: #222;
        color: gray;
    }

    .resultItem {
        border-left-color: transparent;
        border-top-color: transparent;
        border-bottom-color: transparent;
    }

        .resultItem:hover, .resultItem:active {
            background-color: #222;
        }

    .referenceDisabled {
        color: lightgray;
    }

    .currentResult {
        border-left-color: lightgray;
        border-top-color: lightgray;
        border-bottom-color: lightgray;
        background-color: #222;
    }

        .currentResult:hover {
            background-color: #222;
        }

    .resultKind {
        color: #569CD6;
    }

    .resultDescription {
        color: #555;
    }

    .rH {
        background-color: #39487D;
        color: white;
    }

    .dH {
        background: linear-gradient(to right, #232 0%,#000 100%);
        color: gray;
        opacity: 0.85;
    }

    .headerBody {
        background: linear-gradient(to right, #789 0%,#012 80%,#000 100%);
    }

    #search-box,
    #repo-filter {
        background-color: black;
        border-color: #555;
    }

    .r {
        border-color: transparent;
    }

    .unknownClassification {
        color: hotpink;
    }

    .k, a.k {
        color: #569CD6;
    }

    .t, a.t,
    .l, .lineNumber {
        color: #4EC9B0;
    }

    .c {
        color: #57A64A;
    }

    .x, .e {
        color: #808080;
    }

    .s {
        color: #8C6A5C;
    }

    .xd {
        color: #808080;
    }

    .xn {
        color: #569CD6;
    }

    .xan {
        color: #92CAF4;
    }

    .xav {
        color: #C8C8C8;
    }

    .xer {
        color: red;
    }

    .xcs {
        color: #808080;
    }

    .xpi {
        color: #808080;
    }

    .xld {
        color: #6464B9;
    }

    .xln {
        color: #844646;
    }

    .xlan {
        color: #B96464;
    }

    .xlav {
        color: #6464B9;
    }

    .xlaq {
        color: #555555;
    }

    .xler {
        color: #B96464;
    }

    .xlcs {
        color: #C0C0C0;
    }

    .xlpi {
        color: #C0C0C0;
    }

    a.s, a.s:hover {
        color: #8C6A5C;
    }

    p a, p a:link, p a:hover, p a:focus, p a:active,
    ul a, ul a:link, ul a:hover, ul a:focus, ul a:active,
    ol a, ol a:link, ol a:hover, ol a:focus, ol a:active,
    .blueLink, .blueLink:link, .blueLink:hover, .blueLink:focus, .blueLink:active {
        color: deepskyblue;
    }

        p a:visited,
        ul a:visited,
        .blueLink:visited {
            color: deepskyblue;
        }

    .partialTypeLink {
        color: deepskyblue;
    }

        .partialTypeLink:hover {
            background-color: #333;
        }

    .documentOutlineButton {
        border-color: transparent;
        background-color: #000;
        opacity: 0.9;
    }

        .documentOutlineButton:hover, .documentOutlineButton:active {
            border-color: #eeccc0;
            background-color: #000;
        }

    .projectExplorerButton {
        border-color: transparent;
        background-color: #000;
        opacity: 0.9;
    }

        .projectExplorerButton:hover, .projectExplorerButton:active {
            border-color: #90e6d4;
            background-color: #000;
        }

    .namespaceExplorerButton {
        border-color: transparent;
        background-color: #000;
        opacity: 0.9;
    }

        .namespaceExplorerButton:hover, .namespaceExplorerButton:active {
            border-color: #e0e0e0;
            background-color: #000;
        }

    .documentOutlineDiv:hover, .documentOutlineDiv:active {
        background-color: #345;
    }

    .tabChannel {
        background-color: #102;
    }

    .activeTab {
        background-color: #203;
        color: white;
    }

    .inactiveTab {
        background-color: #100020;
        color: #777;
    }

        .inactiveTab:link, .inactiveTab:visited, .inactiveTab:hover, .inactiveTab:active {
            color: #777;
        }

    .msbuildlink {
    }

        .msbuildlink:hover {
            background-color: #222;
        }

    .projectInfo {
        color: #555;
    }
}