/*
    The site theme (D47's "a token theme comes later" — now). Where structure.css holds only the
    structural rules no component provides and never a colour, size or spacing for taste, this file
    is the opposite: the design-token values and theme rules that give the site its own look on top
    of Fluent UI's defaults. It loads after default-fuib.css (App.razor), so it is the last word.

    Fluent v5 has no FluentDesignTheme component, and IThemeService is JS interop that needs an
    interactive circuit — which the public pages, static SSR (D47), never open (the dashboard has
    one, D62, but a theme has to look the same on both). So the theme cannot be set the Mercury way
    (ThemeController in OnAfterRenderAsync). Instead the design tokens are overridden here as CSS
    variables, which works everywhere with no circuit and no JS.

    The token values are generated by Fluent's own JS at runtime and set on the document, so an
    override of one wins only with !important; without it Fluent's injected value is the later,
    equal-specificity declaration and takes precedence. The token names are Fluent's own (read out of
    the shipped lib.module.js); only the handful below are changed.
*/

:root {
    /*
        ================================================================================
        ACCENT — the brand colour. Change these to recolour the whole site: the header
        bar, primary buttons, links, selected rows, checkboxes, focus strokes. A deep teal
        (white-on-accent contrast ~5.9:1, AA); hover and pressed are the same hue stepped
        darker, and the subtle stroke is a light tint of it.
        ================================================================================
    */
    --site-accent: #0E6E7A;
    --site-accent-hover: #0B5E68;
    --site-accent-pressed: #094E57;
    --site-accent-stroke-subtle: #A7D9DF;   /* light accent for focus rings / thin strokes */

    /* Map Fluent's brand tokens onto the accent. The header bar and primary buttons read
       --colorBrandBackground; content links read --colorBrandForegroundLink; form controls
       (checkbox, radio, switch) read the compound-brand set. */
    --colorBrandBackground: var(--site-accent) !important;
    --colorBrandBackgroundHover: var(--site-accent-hover) !important;
    --colorBrandBackgroundPressed: var(--site-accent-pressed) !important;
    --colorBrandBackgroundSelected: var(--site-accent-hover) !important;

    --colorBrandForeground1: var(--site-accent) !important;
    --colorBrandForeground2: var(--site-accent-hover) !important;

    --colorBrandForegroundLink: var(--site-accent) !important;
    --colorBrandForegroundLinkHover: var(--site-accent-hover) !important;
    --colorBrandForegroundLinkPressed: var(--site-accent-pressed) !important;
    --colorBrandForegroundLinkSelected: var(--site-accent-hover) !important;

    --colorCompoundBrandBackground: var(--site-accent) !important;
    --colorCompoundBrandBackgroundHover: var(--site-accent-hover) !important;
    --colorCompoundBrandBackgroundPressed: var(--site-accent-pressed) !important;
    --colorCompoundBrandForeground1: var(--site-accent) !important;
    --colorCompoundBrandForeground1Hover: var(--site-accent-hover) !important;
    --colorCompoundBrandForeground1Pressed: var(--site-accent-pressed) !important;
    --colorCompoundBrandStroke: var(--site-accent) !important;
    --colorCompoundBrandStrokeHover: var(--site-accent-hover) !important;

    --colorBrandStroke1: var(--site-accent) !important;
    --colorBrandStroke2: var(--site-accent-stroke-subtle) !important;

    /*
        Typography. Fluent's default base stack leads with "Segoe UI", which only Windows has; off
        Windows it falls back unpredictably. These are explicit cross-platform stacks so the site
        reads the same everywhere: a system sans for prose and UI, a developer monospace for code.
    */
    --fontFamilyBase: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    --fontFamilyMonospace: ui-monospace, "Cascadia Code", "Cascadia Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;

    /*
        Corner radius. Fluent's scale is tight (Medium 4px, Large 6px, XLarge 8px); softened a step
        so cards, buttons and inputs read a little friendlier without rounding into novelty.
    */
    --borderRadiusMedium: 6px !important;
    --borderRadiusLarge: 8px !important;
    --borderRadiusXLarge: 12px !important;
}

/*
    Page background. The content area is transparent, so this shows behind the page; a cool off-white
    (not the stark white Fluent's --colorNeutralBackground1 gives) lets the white cards, which keep
    Background1 and their shadow, lift off it. Loaded after default-fuib's own `body` rule, so it
    wins; marked important to also beat any inline value Fluent sets on the document.
*/
body {
    background-color: #F4F6F7 !important;
}

/*
    Content width. The reading column is structure.css's .public-page max-width: 48rem. The header's
    "Centered | Wide" control picks the wide state, which drops that cap entirely so the content runs
    the full browser width (bar the page's own side gutter). The choice is a cookie: the server renders
    it as the attribute on <html> on every request (App.razor, ContentWidth) and js/display.js sets both
    when it changes, so it needs no circuit and holds on every page. The selector carries the
    attribute so it beats structure.css's plain .public-page by specificity.
*/
html[data-content-width="wide"] .public-page {
    max-width: none;
}

/*
    The home page (D58): articles lead the main column, a compact Lab rail sits beside them, and below
    them on a phone. Two columns within whatever width .public-page has — the reading column by
    default, the full width when the visitor toggles wide. The rail is a fixed width pinned to the
    right edge and the articles take all the rest, so the rail looks the same at any window size
    instead of growing with it (a fr/% split would). minmax(0, 1fr) lets a long article title or
    code block wrap instead of pushing the column wider.
*/
.home-two-col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: 1.75rem;
    align-items: start;
}

.home-main,
.home-aside {
    min-width: 0;
}

@media (max-width: 40rem) {
    .home-two-col {
        grid-template-columns: 1fr;
    }
}

/*
    The segmented control (Taylan.Shared Components/SegmentedControl.razor): joined buttons in a thin
    outline, the selected one filled. The segments take their text colour from wherever the control sits,
    so on the brand header they are on-brand and on a page they are the normal foreground; the selected
    segment is Fluent's Default button, a light fill, and so takes the normal foreground on that fill.
*/
.segmented {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
    border-radius: var(--borderRadiusLarge);
}

.segmented .segment {
    color: inherit;
}

.segmented .segment[aria-pressed="true"] {
    color: var(--colorNeutralForeground1);
}

/*
    The sidebar fill. Every nav item paints itself with --nav-bg-color (Background4 by default, a step
    darker than the sidebar cell behind it), so the items read as a darker block that ends where the list
    does, with the paler cell showing below it. Transparent items let the cell's own fill run the full
    height of the window. (A hover or selected item keeps its own, separate colour.)
*/
.fluent-nav {
    --nav-bg-color: transparent;
}

/*
    The selected nav item: a background tint, never a bar on one side. Fluent marks the active item with
    a 4px brand bar drawn by an ::after on .active (bundle.scp.css, 5.0.1); this site shows a selected or
    active state with a tint instead, so the bar is removed and the item takes the neutral "selected"
    background. Covers the sidebar, the hamburger drawer and the public drawer, which all use FluentNav.
    !important because Fluent's rule has the same specificity and its bundle (in Taylan.Host.styles.css)
    loads after this file, so it would otherwise win.
*/
.fluent-nav :is(.fluent-navitem, .fluent-navsubitem, .fluent-navcategoryitem).active::after {
    content: none !important;
}

.fluent-nav :is(.fluent-navitem, .fluent-navsubitem, .fluent-navcategoryitem).active {
    background-color: var(--colorNeutralBackground1Selected);
}

/*
    Headings a touch tighter — an editorial feel on the long display sizes without changing Fluent's
    type ramp. Scoped to page content so the lab pages' own styles are untouched.
*/
.public-page :is(h1, h2, h3),
.dashboard-main :is(h1, h2, h3) {
    letter-spacing: -0.01em;
}

/*
    The brand header bar. Fluent's header area uses the brand background, on which a FluentLink's
    default link colour all but vanishes; its own controls use the on-brand neutral foreground
    instead. The links that sit directly on the bar carry class="on-brand" (PublicLayout and
    DashboardLayout) and get that colour here — one place to change it (Q380), in place of the
    inline style each link used to repeat. Only elements that opt in with the class are affected, so
    the hamburger drawer's links, which sit on a normal panel, keep the ordinary link colour.
*/
.on-brand {
    color: var(--colorNeutralForegroundOnBrand);
}