/* Dark tokens on body[data-theme="dark"], set by the Fluent UI theme script, override the light tokens on :root. */

@font-face {
    font-family: Inter;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/jetbrains-mono/JetBrainsMono-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/jetbrains-mono/JetBrainsMono-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/jetbrains-mono/JetBrainsMono-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/jetbrains-mono/JetBrainsMono-Bold.woff2") format("woff2");
}

:root {
    --m365-primary: #0284a8;
    --m365-primary-dark: #026f8f;
    --m365-primary-light: #7fd0e6;
    --m365-primary-tint: color-mix(in srgb, #0284a8 14%, #fff);
    --m365-primary-text: #026f8f;
    --m365-primary-fill: #026f8f;
    --m365-primary-line: color-mix(in srgb, #0284a8 45%, #fff);
    --m365-accent: #0284a8;
    --m365-brand-a: #0284a8;
    --m365-brand-b: #068a5c;
    --m365-gradient: linear-gradient(135deg, #026f8f, #05714b);
    --m365-btn-bg: linear-gradient(90deg, #026f8f, #05714b);
    --m365-btn-fg: #ffffff;
    --m365-btn-glow: 0 1px 2px rgba(8, 12, 34, 0.12);
    --m365-btn-line: rgba(8, 12, 34, 0.3);
    --m365-seg-on: color-mix(in srgb, #0284a8 16%, #fff);

    --m365-surface: #ffffff;
    --m365-surface-alt: #e8edf8;
    --m365-background: #f0f4ff;
    --m365-card: rgba(255, 255, 255, 0.82);
    --m365-card-border: rgba(0, 0, 0, 0.08);
    --m365-chrome: rgba(255, 255, 255, 0.8);
    --m365-grid: rgba(8, 12, 34, 0.028);
    --m365-shade: linear-gradient(to top right, rgba(8, 12, 34, 0.05) 0%, transparent 45%, rgba(2, 132, 168, 0.09) 100%);
    --m365-text: #080c22;
    --m365-text-muted: #445070;
    --m365-text-soft: #2b3553;
    --m365-border: rgba(0, 0, 0, 0.08);
    --m365-control-border: rgba(8, 12, 34, 0.52);
    --m365-placeholder: #5f6a85;
    --m365-shadow: 0 1px 3px rgba(8, 12, 34, 0.06), 0 1px 2px rgba(8, 12, 34, 0.04);
    --m365-shadow-lg: 0 10px 28px rgba(8, 12, 34, 0.1), 0 2px 6px rgba(8, 12, 34, 0.05);

    --m365-header-height: 56px;
    --m365-nav-width: 236px;
    --m365-rail-width: 66px;
    --m365-nav-bg: #e8edf8;
    --m365-nav-glass: rgba(232, 237, 248, 0.92);
    --m365-nav-text: #1e2848;
    --m365-nav-label: #445070;
    --m365-nav-strong: #080c22;
    --m365-nav-rule: rgba(0, 0, 0, 0.08);
    --m365-nav-track: rgba(0, 0, 0, 0.08);
    --m365-nav-sel: rgba(0, 0, 0, 0.06);
    --m365-nav-sel-border: rgba(0, 0, 0, 0.2);

    --m365-success: #068a5c;
    --m365-success-tint: color-mix(in srgb, #068a5c 14%, #fff);
    --m365-success-text: #05714b;
    --m365-success-ink: #05774f;
    --m365-success-line: color-mix(in srgb, #068a5c 45%, #fff);
    --m365-success-fill: #05714b;
    --m365-warning: #f59e0b;
    --m365-warning-tint: color-mix(in srgb, #f59e0b 18%, #fff);
    --m365-warning-text: #a14a08;
    --m365-danger: #ef4444;
    --m365-danger-tint: color-mix(in srgb, #ef4444 14%, #fff);
    --m365-danger-text: #b91c1c;
    --m365-danger-line: color-mix(in srgb, #ef4444 50%, #fff);
    --m365-danger-border: rgba(239, 68, 68, 0.35);
    --m365-danger-fill: #b91c1c;
    --m365-danger-fill-dark: #991b1b;
    --m365-info: #2563eb;
    --m365-info-tint: color-mix(in srgb, #2563eb 13%, #fff);
    --m365-info-text: #1d4ed8;
    --m365-info-line: color-mix(in srgb, #2563eb 45%, #fff);
    --m365-excluded: #5d6280;
    --m365-excluded-tint: color-mix(in srgb, #5d6280 13%, #fff);
    --m365-excluded-text: #445070;
    --m365-viewer-tint: color-mix(in srgb, #5d6280 24%, #fff);
    --m365-pill-muted: #e8edf8;
    --m365-chip-line: rgba(8, 12, 34, 0.3);

    --m365-group-bg: #f5f7fc;
    --m365-group-head: #e8edf8;
    --m365-group-line: rgba(8, 12, 34, 0.14);
    --m365-row: #ffffff;
    --m365-row-line: rgba(8, 12, 34, 0.18);

    --m365-sans: Inter, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    --m365-mono: "JetBrains Mono", Consolas, "Cascadia Mono", monospace;
}

body[data-theme="dark"] {
    --m365-primary: #00d4ff;
    --m365-primary-dark: #6fe6ff;
    --m365-primary-light: #0d47a1;
    --m365-primary-tint: color-mix(in srgb, #00d4ff 12%, #11173a);
    --m365-primary-text: #00d4ff;
    --m365-primary-fill: #026f8f;
    --m365-primary-line: var(--m365-border);
    --m365-accent: #00d4ff;
    --m365-brand-a: #00d4ff;
    --m365-brand-b: #0d47a1;
    --m365-gradient: linear-gradient(135deg, #026f8f, #0d47a1);
    --m365-btn-bg: linear-gradient(90deg, #00d4ff, #00ffa3);
    --m365-btn-fg: #0a0e27;
    --m365-btn-glow: 0 0 18px rgba(0, 212, 255, 0.28);
    --m365-btn-line: rgba(255, 255, 255, 0.28);
    --m365-seg-on: color-mix(in srgb, #00d4ff 20%, #11173a);

    --m365-surface: #11173a;
    --m365-surface-alt: #10163a;
    --m365-background: #0a0e27;
    --m365-card: rgba(21, 27, 64, 0.8);
    --m365-card-border: rgba(255, 255, 255, 0.1);
    --m365-chrome: rgba(13, 18, 48, 0.82);
    --m365-grid: rgba(255, 255, 255, 0.022);
    --m365-shade: linear-gradient(to top right, rgba(3, 5, 18, 0.55) 0%, transparent 48%, rgba(0, 212, 255, 0.08) 100%);
    --m365-text: #f3f5fa;
    --m365-text-muted: #9aa1b8;
    --m365-text-soft: #c9cedc;
    --m365-border: rgba(255, 255, 255, 0.16);
    --m365-control-border: rgba(255, 255, 255, 0.38);
    --m365-placeholder: #8a91a8;
    --m365-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
    --m365-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);

    --m365-nav-bg: #0d1230;
    --m365-nav-glass: rgba(13, 18, 48, 0.9);
    --m365-nav-text: #9aa1b8;
    --m365-nav-label: #7e86a6;
    --m365-nav-strong: #f3f5fa;
    --m365-nav-rule: rgba(255, 255, 255, 0.09);
    --m365-nav-track: rgba(255, 255, 255, 0.12);
    --m365-nav-sel: rgba(255, 255, 255, 0.075);
    --m365-nav-sel-border: rgba(255, 255, 255, 0.16);

    --m365-success: #00ffa3;
    --m365-success-tint: color-mix(in srgb, #00ffa3 12%, #11173a);
    --m365-success-text: #00ffa3;
    --m365-success-ink: #3ddc97;
    --m365-success-line: rgba(61, 220, 151, 0.35);
    --m365-success-fill: #05714b;
    --m365-warning: #f59e0b;
    --m365-warning-tint: color-mix(in srgb, #f59e0b 14%, #11173a);
    --m365-warning-text: #fbbf24;
    --m365-danger: #ef4444;
    --m365-danger-tint: color-mix(in srgb, #ef4444 14%, #11173a);
    --m365-danger-text: #f87171;
    --m365-danger-line: rgba(248, 113, 113, 0.35);
    --m365-danger-border: rgba(248, 113, 113, 0.35);
    --m365-danger-fill: #b91c1c;
    --m365-danger-fill-dark: #991b1b;
    --m365-info: #3b82f6;
    --m365-info-tint: color-mix(in srgb, #3b82f6 14%, #11173a);
    --m365-info-text: #7aa7ff;
    --m365-info-line: var(--m365-border);
    --m365-excluded: #767b96;
    --m365-excluded-tint: color-mix(in srgb, #5d6280 16%, #11173a);
    --m365-excluded-text: #9aa1b8;
    --m365-viewer-tint: color-mix(in srgb, #5d6280 34%, #11173a);
    --m365-pill-muted: color-mix(in srgb, #9aa1b8 20%, #11173a);
    --m365-chip-line: rgba(243, 245, 250, 0.22);

    --m365-group-bg: #121940;
    --m365-group-head: #0d1230;
    --m365-group-line: rgba(255, 255, 255, 0.12);
    --m365-row: #1a2253;
    --m365-row-line: rgba(255, 255, 255, 0.14);
    color-scheme: dark;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: var(--m365-sans);
    color: var(--m365-text);
}

body {
    --t-title: 22px;
    --t-section: 18px;
    --t-body: 14px;
    --t-secondary: 12.5px;
    --t-button: 12px;
    --t-caption: 11px;
    --t-eyebrow: 12px;
    --t-label: 10px;

    background:
        var(--m365-shade),
        linear-gradient(var(--m365-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--m365-grid) 1px, transparent 1px),
        var(--m365-background);
    background-size: auto, 40px 40px, 40px 40px, auto;
    background-attachment: fixed;
    font-size: var(--t-body);
    accent-color: var(--m365-primary-fill);
    transition: background-color 0.2s ease, color 0.2s ease;
}

a {
    color: var(--m365-primary-text);
}

a:hover {
    color: var(--m365-primary-dark);
}

a:not([class]):hover {
    text-decoration: underline;
}

[data-logo="dark"] {
    display: none;
}

body[data-theme="dark"] [data-logo="dark"] {
    display: block;
}

body[data-theme="dark"] [data-logo="light"] {
    display: none;
}

p {
    font-family: inherit;
}

h1 {
    line-height: 40px;
}

h2 {
    line-height: 36px;
}

h3 {
    line-height: 32px;
}

button {
    border-radius: 0;
}

/* Selects: the native chrome (OS arrow, square corners, mismatched font) is replaced with the
   platform's own field styling, so a filter chip and a text input read as the same control.
   The right-hand padding leaves room for the chevron drawn as a background image. */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--m365-text);
    background-color: var(--m365-surface);
    border: 1px solid var(--m365-control-border);
    border-radius: 6px;
    min-height: 34px;
    padding: 0 30px 0 10px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%2357627a' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

select:hover {
    border-color: var(--m365-primary);
}

select:focus-visible {
    outline: 2px solid var(--m365-primary);
    outline-offset: 1px;
    border-color: var(--m365-primary);
}

select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

::placeholder {
    color: var(--m365-placeholder);
    font-family: var(--m365-sans);
    opacity: 1;
}

/* Only colours are honoured cross-browser on the popup list, so set them explicitly rather than
   inheriting the OS default white-on-white in dark mode. */
select option {
    background: var(--m365-surface);
    color: var(--m365-text);
    font-weight: 500;
}

body[data-theme="dark"] select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%2393a0b8' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
}