/* =====================================================================
   SHARED SITE STYLES
   Tokens, surfaces, controls, and a few motifs used site-wide.

   Direction (Expo-inspired): graphite and white neutrals, hairline structure
   instead of heavy boxes, the SolarGlyph blue kept as the signature accent
   (primary actions, links, active states, brand band), and one warm "solar"
   amber reserved for things that are waiting on you (approvals).
   The theme follows the system unless the person picked light or dark.
===================================================================== */

/* ---------- Tokens ---------- */
:root {
    color-scheme: light;
    --sg-bg: #F4F6F8;
    --sg-bg-soft: #ECEFF2;
    --sg-panel: #FFFFFF;
    --sg-panel-2: #F3F5F7;
    --sg-hover: rgba(17, 24, 28, .05);
    --sg-field: #FFFFFF;
    --sg-line: rgba(17, 24, 28, .10);
    --sg-line-strong: rgba(17, 24, 28, .20);
    --sg-text: #11181C;
    --sg-text-2: #44505A;
    --sg-text-3: #5B6770;
    --sg-accent: #0B66AA;
    --sg-accent-hover: #08558F;
    --sg-on-accent: #FFFFFF;
    --sg-accent-soft: rgba(13, 111, 184, .10);
    --sg-brand-deep: #07304B;
    --sg-solar: #8F5A00;
    --sg-solar-soft: rgba(217, 142, 18, .14);
    --sg-ok: #087A55;
    --sg-ok-text: #05583D;
    --sg-bad: #C23B3B;
    --sg-nav-bg: rgba(244, 246, 248, .86);
    --sg-veil-top: rgba(244, 246, 248, .86);
    --sg-veil-bottom: rgba(244, 246, 248, .97);
    --sg-shadow: 0 24px 60px -28px rgba(17, 24, 28, .30);
    --sg-radius-sm: 6px;
    --sg-radius: 10px;
    --sg-radius-lg: 14px;
    --sg-font-display: Inter, ui-sans-serif, system-ui, sans-serif;
}

.dark {
    color-scheme: dark;
    --sg-bg: #141719;
    --sg-bg-soft: #101315;
    --sg-panel: #1B1F22;
    --sg-panel-2: #22272B;
    --sg-hover: rgba(255, 255, 255, .06);
    --sg-field: rgba(0, 0, 0, .26);
    --sg-line: rgba(255, 255, 255, .09);
    --sg-line-strong: rgba(255, 255, 255, .18);
    --sg-text: #ECEEF0;
    --sg-text-2: #B1B8BF;
    --sg-text-3: #8B949C;
    --sg-accent: #4DA9EE;
    --sg-accent-hover: #6DBBF6;
    --sg-on-accent: #04202F;
    --sg-accent-soft: rgba(77, 169, 238, .14);
    --sg-brand-deep: #0A2F4A;
    --sg-solar: #F6BE55;
    --sg-solar-soft: rgba(246, 190, 85, .14);
    --sg-ok: #4FD6A2;
    --sg-ok-text: #4FD6A2;
    --sg-bad: #FF8484;
    --sg-nav-bg: rgba(20, 23, 25, .84);
    --sg-veil-top: rgba(20, 23, 25, .78);
    --sg-veil-bottom: rgba(20, 23, 25, .96);
    --sg-shadow: 0 28px 70px -30px rgba(0, 0, 0, .75);
}

/* ---------- Base ---------- */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--sg-bg);
    font-family: Inter, ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: var(--sg-accent);
    color: var(--sg-on-accent);
}

:focus-visible {
    outline: 2px solid var(--sg-accent);
    outline-offset: 2px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: none;
}

h1, h2, h3, .font-display {
    font-family: var(--sg-font-display);
    font-optical-sizing: auto;
    letter-spacing: -.025em;
}

code, kbd, pre, samp {
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--sg-line-strong) transparent;
}

/* ---------- Page backdrops ---------- */
/* Marketing pages: the campus photo, pushed far back under an ink veil. */
.sg-photo {
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: var(--photo);
    background-position: center;
    background-size: cover;
    opacity: .55;
}

.sg-veil {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, var(--sg-veil-top) 0%, var(--sg-veil-bottom) 70%);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

/* Workspace pages: solid ink with one faint glow, so text stays the focus. */
.sg-ground {
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(900px 480px at 8% -10%, rgba(77, 169, 238, .10), transparent 70%),
        var(--sg-bg);
}


html:not(.dark) .sg-ground {
    background:
        radial-gradient(900px 480px at 8% -10%, rgba(13, 111, 184, .08), transparent 70%),
        var(--sg-bg);
}

/* ---------- Navigation ---------- */
.glass-nav {
    background-color: var(--sg-nav-bg);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    backdrop-filter: saturate(160%) blur(16px);
    border-bottom: 1px solid var(--sg-line);
}

.sg-brand {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    color: var(--sg-text);
}

.sg-brand-mark {
    display: block;
    height: 26px;
    width: auto;
    object-fit: contain;
}

.sg-wordmark {
    font-family: var(--sg-font-display);
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -.02em;
    line-height: 1;
    color: var(--sg-text);
}

.sg-wordmark small {
    margin-left: .4rem;
    font-family: Inter, sans-serif;
    font-size: .78rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--sg-text-3);
}

.sg-navlink {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 56px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sg-text-2);
    transition: color .15s ease;
}

.sg-navlink:hover { color: var(--sg-text); }

.sg-navlink[aria-current="page"] { color: var(--sg-text); }

.sg-navlink[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--sg-accent);
}

.sg-icon-btn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--sg-radius-sm);
    color: var(--sg-text-2);
    transition: background-color .15s ease, color .15s ease;
}

.sg-icon-btn:hover {
    background: var(--sg-hover);
    color: var(--sg-text);
}

.sg-menu {
    border: 1px solid var(--sg-line-strong);
    border-radius: 16px;
    background: var(--sg-panel);
    box-shadow: var(--sg-shadow);
}

details[open] > .sg-menu {
    transform-origin: top right;
    animation: sg-menu-in .18s cubic-bezier(.2, .8, .2, 1) both;
}

@keyframes sg-menu-in {
    from { opacity: 0; transform: translateY(-4px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.copilot-brand-name {
    color: var(--sg-text);
    font-family: var(--sg-font-display);
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -.02em;
}

.copilot-brand-name > span {
    color: var(--sg-text-3);
    font-weight: 500;
}

/* ---------- Surfaces ---------- */
/* .glass-card is kept as the legacy name; it is now a flat, hairline panel. */
.glass-card,
.sg-panel {
    background: var(--sg-panel);
    border: 1px solid var(--sg-line);
    border-radius: var(--sg-radius);
    box-shadow: none;
}

.sg-rule { border-color: var(--sg-line); }

.sg-divide > * + * { border-top: 1px solid var(--sg-line); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--sg-line-strong);
    border-radius: var(--sg-radius-sm);
    background: transparent;
    color: var(--sg-text);
    font-size: 13px;
    font-weight: 550;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn:hover { background: var(--sg-hover); border-color: var(--sg-text-3); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary {
    background: var(--sg-accent);
    border-color: var(--sg-accent);
    color: var(--sg-on-accent);
}

.btn-primary:hover {
    background: var(--sg-accent-hover);
    border-color: var(--sg-accent-hover);
}

.btn-lg { height: 46px; padding: 0 20px; font-size: 14px; }
.btn-sm { height: 30px; padding: 0 10px; font-size: 12px; }

/* Pill variant: softer, rounder calls to action */
.btn-pill {
    border-radius: 999px;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
}
.btn-pill.btn-lg { padding: 0 26px; }
.btn-pill.btn-sm { padding: 0 14px; }
.btn-pill:hover { transform: translateY(-1px); }
.btn-pill.btn-primary {
    border-color: color-mix(in srgb, #fff 18%, var(--sg-accent));
    box-shadow: 0 14px 30px -16px var(--sg-accent), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-pill.btn-primary:hover { box-shadow: 0 18px 34px -14px var(--sg-accent), inset 0 1px 0 rgba(255, 255, 255, .28); }

.btn-danger {
    border-color: color-mix(in srgb, var(--sg-bad) 45%, transparent);
    color: var(--sg-bad);
}

.btn-danger:hover {
    background: color-mix(in srgb, var(--sg-bad) 12%, transparent);
    border-color: var(--sg-bad);
}

.btn-danger-solid {
    background: #B83232;
    border-color: #B83232;
    color: #fff;
}

.btn-danger-solid:hover { background: #CF3E3E; border-color: #CF3E3E; }

/* Text-style link used inside prose and panels. */
.sg-link {
    color: var(--sg-accent);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--sg-accent) 40%, transparent);
    text-underline-offset: 3px;
    transition: text-decoration-color .15s ease;
}

.sg-link:hover { text-decoration-color: var(--sg-accent); }

/* ---------- Form controls ---------- */
.field,
.agent-input {
    width: 100%;
    border: 1px solid var(--sg-line-strong);
    border-radius: var(--sg-radius-sm);
    background: var(--sg-field);
    color: var(--sg-text);
    font-size: 13px;
    line-height: 1.4;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.field { height: 40px; padding: 0 12px; }
textarea.field { height: auto; padding: 10px 12px; }

.field::placeholder,
.agent-input::placeholder { color: var(--sg-text-3); }

.field:focus,
.agent-input:focus {
    outline: none;
    border-color: var(--sg-accent);
    box-shadow: 0 0 0 3px var(--sg-accent-soft);
}

.field:disabled,
.agent-input:disabled { opacity: .5; }

.field option,
.agent-input option {
    background: var(--sg-panel);
    color: var(--sg-text);
}

.field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 550;
    color: var(--sg-text);
}

.field-hint {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--sg-text-3);
}

/* ---------- Small parts ---------- */
.tag {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--sg-line-strong);
    border-radius: 999px;
    color: var(--sg-text-2);
    font-size: 11px;
    font-weight: 550;
    white-space: nowrap;
}

.tag-solar {
    border-color: color-mix(in srgb, var(--sg-solar) 40%, transparent);
    background: var(--sg-solar-soft);
    color: var(--sg-solar);
}

.tag-ok {
    border-color: color-mix(in srgb, var(--sg-ok) 40%, transparent);
    background: color-mix(in srgb, var(--sg-ok) 12%, transparent);
    color: var(--sg-ok-text, var(--sg-ok));
}

.tag-accent {
    border-color: color-mix(in srgb, var(--sg-accent) 40%, transparent);
    background: var(--sg-accent-soft);
    color: var(--sg-accent);
}

.sg-icon-tile {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid var(--sg-line);
    border-radius: var(--sg-radius-sm);
    background: var(--sg-panel-2);
    color: var(--sg-accent);
}

/* ---------- Review ticket (signature motif) ----------
   A change that is waiting on you carries a solar-amber edge. When it is
   approved the edge turns green. Used in the hero preview and in the
   commit-review dialog. */
.ticket {
    position: relative;
    border: 1px solid var(--sg-line-strong);
    border-radius: var(--sg-radius);
    background: var(--sg-panel);
    overflow: hidden;
}

.ticket::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--sg-solar);
    transition: background-color .4s ease;
}

.ticket[data-state="approved"]::before { background: var(--sg-ok); }

/* ---------- Motion ---------- */
/* Content is visible by default; reveal is kept only as a legacy hook. */
.reveal,
.reveal.active { opacity: 1; transform: none; }

/* One staged entrance, used by page heroes. */
.sg-rise {
    animation: sgRise .7s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes sgRise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .sg-rise { animation: none; }
}

/* ---------- Legacy hooks kept for existing pages ---------- */
.ambient-glow {
    position: absolute;
    width: 760px;
    height: 760px;
    background: radial-gradient(circle, rgba(77, 169, 238, .12) 0%, rgba(0, 0, 0, 0) 62%);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    filter: blur(60px);
}

.magnetic-wrapper {
    display: inline-block;
    perspective: 1000px;
}

.auth-page .turnstile-challenge {
    max-height: 120px;
    overflow: hidden;
    opacity: 1;
    transform: scale(1);
    transform-origin: top center;
    transition: max-height 0.4s cubic-bezier(.2, .8, .2, 1), opacity 0.25s ease, transform 0.35s cubic-bezier(.2, .8, .2, 1), margin 0.35s ease;
}

.auth-page .turnstile-challenge.is-verified {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    transform: translateY(-4px) scale(0.97);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .auth-page .turnstile-challenge { transition: none; }
    details[open] > .sg-menu { animation: none; }
}


/* Page-to-page navigation: a short cross-fade instead of a flash (supported browsers only;
   others navigate normally). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: sgPageOut .16s ease-in both; }
::view-transition-new(root) { animation: sgPageIn .24s ease-out both; }
@keyframes sgPageOut { to { opacity: 0; } }
@keyframes sgPageIn { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
}


/* Profile photo: a round picture, or the person's initials. */
.sg-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 2rem; height: 2rem; overflow: hidden; border-radius: 50%;
    background: var(--sg-accent-soft); color: var(--sg-accent); border: 1px solid var(--sg-line-strong); font-weight: 600; font-size: .72rem; letter-spacing: .02em; }
.sg-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sg-avatar-sm { width: 1.7rem; height: 1.7rem; font-size: .62rem; }
.sg-avatar-md { width: 2.2rem; height: 2.2rem; font-size: .75rem; }
.sg-avatar-xl { width: 4rem; height: 4rem; font-size: 1.2rem; }


/* Company logos (Discord, GitHub) are loaded from /Images/Icons and painted with the current text
   colour, so one single-colour file works in both the dark and light theme.
   Files expected: Images/Icons/Discord.png and Images/Icons/GitHub.png (a single-colour logo on a
   transparent background; the shape is used, so any one colour works). Names are case-sensitive. */
.sg-brand-icon {
    display: inline-block; flex: 0 0 auto; width: 1.25rem; height: 1.25rem; vertical-align: middle;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}
.sg-brand-icon-discord { --icon: url('/Images/Icons/Discord.png'); }
.sg-brand-icon-github { --icon: url('/Images/Icons/GitHub.png'); }
.sg-brand-icon-sm { width: 1rem; height: 1rem; }


/* =====================================================================
   REDESIGN COMPONENTS (Expo-inspired)
   Built once here; pages just use the classes.
===================================================================== */

/* Brand band: the signature blue surface. Use for one hero or call-to-action block per page,
   so blue stays a deliberate highlight in both light and dark themes. */
/* .sg-stage is the same blue surface without any text colours: use it behind a panel or
   screenshot that keeps its own colours. .sg-band also recolours the text placed on it. */
.sg-band,
.sg-stage {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--sg-radius-lg);
    background:
        radial-gradient(70% 120% at 100% 0%, rgba(77, 169, 238, .55), transparent 60%),
        linear-gradient(135deg, var(--sg-brand-deep) 0%, #0D5A93 100%);
}
.sg-band { color: #F3F8FC; }
.sg-band h1, .sg-band h2, .sg-band h3 { color: #fff; }
.sg-band p { color: rgba(243, 248, 252, .82); }
.sg-band .btn { border-color: rgba(255, 255, 255, .35); color: #fff; }
.sg-band .btn:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); }
.sg-band .btn-primary { background: #fff; border-color: #fff; color: var(--sg-brand-deep); }
.sg-band .btn-primary:hover { background: #E3EEF7; border-color: #E3EEF7; }

/* Terminal snippet with a copy button: <div class="sg-snippet"><code>...</code><button data-copy>…</button></div> */
.sg-snippet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .6rem .55rem 1rem;
    border: 1px solid var(--sg-line-strong);
    border-radius: var(--sg-radius);
    background: var(--sg-field);
    font-size: .85rem;
}
.sg-snippet code { overflow-x: auto; white-space: nowrap; color: var(--sg-text); }
.sg-snippet code::before { content: "$ "; color: var(--sg-accent); }
.sg-snippet-copy {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--sg-line-strong);
    border-radius: var(--sg-radius-sm);
    color: var(--sg-text-2);
    font-size: 12px;
    font-weight: 550;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.sg-snippet-copy:hover { background: var(--sg-hover); color: var(--sg-text); }
.sg-snippet-copy[data-copied="true"] { color: var(--sg-ok); border-color: var(--sg-ok); }

/* Status pill (footer, sidebar): a dot and a short label that links to /status. */
.sg-status-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 28px;
    padding: 0 .75rem;
    border: 1px solid var(--sg-line-strong);
    border-radius: 999px;
    color: var(--sg-text-2);
    font-size: 12px;
    font-weight: 550;
    transition: background-color .15s ease, color .15s ease;
}
.sg-status-pill:hover { background: var(--sg-hover); color: var(--sg-text); }
.sg-status-pill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sg-text-3);
}
.sg-status-pill[data-state="operational"]::before { background: var(--sg-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sg-ok) 22%, transparent); }
.sg-status-pill[data-state="degraded"]::before { background: var(--sg-solar); box-shadow: 0 0 0 3px var(--sg-solar-soft); }
.sg-status-pill[data-state="outage"]::before { background: var(--sg-bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sg-bad) 22%, transparent); }

/* Bento tiles: flat, hairline, with room for a visual. */
.sg-bento { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); border: 1px solid var(--sg-line); border-radius: var(--sg-radius-lg); background: var(--sg-line); overflow: hidden; }
.sg-tile { padding: 1.6rem; background: var(--sg-panel); }
.sg-tile h3 { font-size: 1.05rem; font-weight: 650; }
.sg-tile p { margin-top: .5rem; font-size: .9rem; line-height: 1.6; color: var(--sg-text-2); }

/* Numbered flow (the "5 steps" pattern): <ol class="sg-steps"><li><b>Title</b><span>Detail</span></li></ol> */
.sg-steps { counter-reset: sgstep; display: grid; gap: 0; }
.sg-steps > li {
    counter-increment: sgstep;
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: .2rem 1rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--sg-line);
}
.sg-steps > li::before {
    content: counter(sgstep);
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--sg-accent-soft);
    color: var(--sg-accent);
    font-size: .85rem;
    font-weight: 650;
}
.sg-steps > li b { font-weight: 600; color: var(--sg-text); }
.sg-steps > li span { font-size: .9rem; color: var(--sg-text-2); line-height: 1.55; }

/* FAQ accordion on <details> */
.sg-faq details { border-top: 1px solid var(--sg-line); }
.sg-faq details:last-child { border-bottom: 1px solid var(--sg-line); }
.sg-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; cursor: pointer; font-weight: 600; list-style: none; }
.sg-faq summary::-webkit-details-marker { display: none; }
.sg-faq summary::after { content: "+"; color: var(--sg-accent); font-size: 1.2rem; line-height: 1; transition: transform .2s ease; }
.sg-faq details[open] summary::after { transform: rotate(45deg); }
.sg-faq details > :not(summary) { padding-bottom: 1rem; color: var(--sg-text-2); font-size: .92rem; line-height: 1.65; }

/* Anchor chips (sticky section shortcuts) */
.sg-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.sg-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 .85rem; border: 1px solid var(--sg-line-strong); border-radius: 999px; color: var(--sg-text-2); font-size: 12.5px; font-weight: 550; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.sg-chip:hover { background: var(--sg-hover); color: var(--sg-text); }
.sg-chip[aria-current="true"], .sg-chip.is-active { border-color: var(--sg-accent); background: var(--sg-accent-soft); color: var(--sg-accent); }

/* Run status chips (used by the Agent timeline and the Activity page) */
.sg-run { display: inline-flex; align-items: center; gap: .4rem; height: 22px; padding: 0 .6rem; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--sg-panel-2); color: var(--sg-text-2); border: 1px solid var(--sg-line); }
.sg-run::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sg-run[data-state="running"] { color: var(--sg-accent); background: var(--sg-accent-soft); border-color: color-mix(in srgb, var(--sg-accent) 35%, transparent); }
.sg-run[data-state="review"] { color: var(--sg-solar); background: var(--sg-solar-soft); border-color: color-mix(in srgb, var(--sg-solar) 35%, transparent); }
.sg-run[data-state="done"] { color: var(--sg-ok); background: color-mix(in srgb, var(--sg-ok) 12%, transparent); border-color: color-mix(in srgb, var(--sg-ok) 35%, transparent); }
.sg-run[data-state="failed"] { color: var(--sg-bad); background: color-mix(in srgb, var(--sg-bad) 12%, transparent); border-color: color-mix(in srgb, var(--sg-bad) 35%, transparent); }

/* Footer layout */
.sg-footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .sg-footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }


/* ---------- Setup wizard (Getting Started) ---------- */
.sg-wizard-top { display: grid; gap: .75rem; margin-bottom: 1.75rem; }
.sg-wizard-count { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sg-text-3); }
.sg-wizard-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; height: 4px; }
.sg-wizard-bar i { border-radius: 999px; background: var(--sg-line-strong); transition: background-color .3s ease; }
.sg-wizard-bar i[data-on="true"] { background: var(--sg-accent); }

.sg-wizard-grid { display: grid; gap: 1.5rem; }
@media (min-width: 820px) { .sg-wizard-grid { grid-template-columns: 290px minmax(0, 1fr); gap: 2.5rem; align-items: start; } }

.sg-wizard-nav { display: grid; gap: .25rem; }
.sg-wizard-nav button {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    padding: .7rem .8rem;
    border: 1px solid transparent;
    border-radius: var(--sg-radius);
    background: transparent;
    color: var(--sg-text);
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.sg-wizard-nav button:hover { background: var(--sg-hover); }
.sg-wizard-nav button[aria-current="step"] { border-color: var(--sg-accent); background: var(--sg-accent-soft); }
.sg-wizard-dot {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 1px solid var(--sg-line-strong);
    border-radius: 50%;
    font-size: 12.5px;
    font-weight: 650;
    color: var(--sg-text-2);
}
.sg-wizard-nav button[aria-current="step"] .sg-wizard-dot { border-color: var(--sg-accent); color: var(--sg-accent); }
.sg-wizard-nav button[data-state="done"] .sg-wizard-dot { border-color: var(--sg-ok); background: color-mix(in srgb, var(--sg-ok) 14%, transparent); color: var(--sg-ok); }
.sg-wizard-label { display: grid; gap: 1px; min-width: 0; }
.sg-wizard-label b { font-size: 13.5px; font-weight: 600; }
.sg-wizard-label small { font-size: 12px; color: var(--sg-text-3); }

.sg-wizard-panels { padding: 1.75rem; border: 1px solid var(--sg-line); border-radius: var(--sg-radius-lg); background: var(--sg-panel); }
.sg-wizard-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sg-wizard-panel h2 { margin-top: 1.25rem; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.sg-wizard-panel > p { margin-top: .75rem; max-width: 34rem; font-size: .95rem; line-height: 1.65; color: var(--sg-text-2); }
.sg-wizard-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.sg-wizard-complete { margin-top: 1.25rem; padding: 1.25rem 1.4rem; }
.sg-wizard-complete[hidden] { display: none; }
.sg-wizard-complete h3 { font-size: 1.1rem; font-weight: 650; }
.sg-wizard-complete p { margin-top: .3rem; font-size: .9rem; }
.sg-wizard-foot { display: flex; justify-content: space-between; gap: .75rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--sg-line); }
.sg-wizard-foot .btn[hidden] { display: none; }
.sg-wizard:not(.is-ready) .sg-wizard-foot { display: none; }
.sg-wizard-panel[hidden] { display: none; }

/* Link tiles in a bento grid */
a.sg-tile { display: block; transition: background-color .15s ease; }
a.sg-tile:hover { background: var(--sg-panel-2); }

/* Fixed-column bento: 1 column on phones, 2 on tablets, 3 on desktop (use with 6 or 9 tiles). */
.sg-bento-3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .sg-bento-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sg-bento-3 { grid-template-columns: repeat(3, 1fr); } }


/* ---------- Tabs: a row of links that read as one area (Usage and Analytics) ---------- */
.sg-tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--sg-line); }
.sg-tabs a {
    position: relative;
    padding: .65rem 0;
    color: var(--sg-text-2);
    font-size: 14px;
    font-weight: 550;
    transition: color .15s ease;
}
.sg-tabs a:hover { color: var(--sg-text); }
.sg-tabs a[aria-current="page"] { color: var(--sg-text); }
.sg-tabs a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--sg-accent);
}


/* A chip row that scrolls sideways and stays under the header (Settings on small screens) */
.sg-chips-scroll {
    position: sticky;
    top: 56px;
    z-index: 20;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -1rem 1rem;
    padding: .6rem 1rem;
    border-bottom: 1px solid var(--sg-line);
    background: var(--sg-nav-bg);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    scrollbar-width: none;
    transition: top .3s;
}
html.sg-nav-hidden .sg-chips-scroll { top: 0; }
.sg-chips-scroll::-webkit-scrollbar { display: none; }
.sg-chips-scroll .sg-chip { flex: 0 0 auto; white-space: nowrap; }


/* Tailwind's gray-500 is too faint for small text in either theme, so it follows the contrast-checked token. */
html .text-gray-500 { color: var(--sg-text-3); }

/* Light theme only: Tailwind's 400-weight status colours are too pale on white, so they use the
   deeper shades. (The dark theme keeps the originals, which pass on dark surfaces.) */
html:not(.dark) .text-red-400,
html:not(.dark) .text-red-300 { color: #B91C1C; }
html:not(.dark) .text-green-400 { color: #047857; }
html:not(.dark) .text-gray-400 { color: var(--sg-text-3); }


/* Skip link: invisible until a keyboard user tabs to it */
.sg-skip {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 100;
    padding: .6rem 1rem;
    border-radius: var(--sg-radius);
    background: var(--sg-accent);
    color: var(--sg-on-accent);
    font-size: 14px;
    font-weight: 600;
}
.sg-skip:focus { top: .75rem; }
main:focus { outline: none; }

/* The redesign components stand still for people who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
    .sg-chips-scroll, .sg-chip, .sg-snippet-copy, .sg-status-pill, .sg-wizard-bar i, .sg-wizard-nav button,
    .sg-faq summary::after, a.sg-tile, .sg-tabs a { transition: none; }
}


/* ---------- Code colours (see shared/code-highlight.js) ---------- */
:root {
    --tok-comment: #6a737d; --tok-string: #0b7a3b; --tok-number: #b35900; --tok-keyword: #8250df; --tok-function: #0550ae;
    --tok-type: #953800; --tok-builtin: #0a7e8c; --tok-property: #cf222e; --tok-tag: #116329; --tok-attr: #953800;
    --tok-operator: #6e7781; --tok-meta: #8250df; --tok-add: rgba(46, 160, 67, .18); --tok-del: rgba(248, 81, 73, .16);
}
.dark, .code-block, .repository-code-editor {
    --tok-comment: #7d8799; --tok-string: #98c379; --tok-number: #d19a66; --tok-keyword: #c678dd; --tok-function: #61afef;
    --tok-type: #e5c07b; --tok-builtin: #56b6c2; --tok-property: #e06c75; --tok-tag: #e06c75; --tok-attr: #d19a66;
    --tok-operator: #56b6c2; --tok-meta: #c678dd; --tok-add: rgba(152, 195, 121, .16); --tok-del: rgba(224, 108, 117, .16);
}
.tok-c { color: var(--tok-comment); font-style: italic; }
.tok-s { color: var(--tok-string); }
.tok-n { color: var(--tok-number); }
.tok-k { color: var(--tok-keyword); }
.tok-f { color: var(--tok-function); }
.tok-t { color: var(--tok-type); }
.tok-b { color: var(--tok-builtin); }
.tok-v { color: var(--tok-property); }
.tok-tag { color: var(--tok-tag); }
.tok-a { color: var(--tok-attr); }
.tok-o { color: var(--tok-operator); }
.tok-m { color: var(--tok-meta); }
.tok-add { color: var(--tok-string); background: var(--tok-add); display: inline-block; min-width: 100%; }
.tok-del { color: var(--tok-property); background: var(--tok-del); display: inline-block; min-width: 100%; }
code.inline-code { color: var(--tok-builtin); }

/* The Copilot logos are white artwork: darkened on light backgrounds. */
.sg-logo-full { display: block; height: 30px; width: auto; }
.sg-logo-mark { display: block; height: 26px; width: auto; }
html:not(.dark) .sg-logo-full, html:not(.dark) .sg-logo-mark { filter: brightness(0) opacity(.82); }

/* The little dot on the "What's new" link when there is a release you have not read yet. */
a[href="/whatsnew"][data-new="true"]::after { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-left: .35rem; border-radius: 999px; background: var(--sg-accent, #4b9cff); vertical-align: middle; }