:root {
    --ops-navy: #082b54;
    --ops-blue: #0b5cab;
    --ops-gold: #e4aa18;
    --ops-white: #fff;
    --ops-muted: #d2e5fa;
    --ops-heading: #1e3a5f;
    --ops-ink: #0f172a;
    --ops-action: #0b5cab;
    --ops-border: #cbd5e1;
    --ops-rule: #e2e8f0;
    --ops-control-border: #7a8b9e;
    --ops-soft-surface: #f5f8fc;
    --ops-control-surface: #f8fafc;
    --ops-pale-blue: #e9f3fd;
    --ops-muted-text: #526985;
    --ops-subtle-text: #64748b;
    --ops-field-text: #334155;
    --ops-icon-muted: #365578;
    --ops-focus-color: var(--ops-action);
    --ops-focus-width: 0.1875rem;
    --ops-focus-offset: 0.125rem;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body.ops-shell-body {
    margin: 0;
    min-height: 100vh;
    color: #102451;
    background: #dfe6ee;
    font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* Plain links inherit the shell text colour. Anchors styled as buttons are
   excluded so each button variant keeps its own colour. */
.ops-shell-body a:not(.ops-button-primary, .ops-button-secondary, .ops-button-danger, .ops-page-header-action, .ops-meets-action) { color: inherit; }
.ops-skip-link {
    position: fixed;
    z-index: 100;
    top: -5rem;
    left: 1rem;
    padding: .65rem .9rem;
    border-radius: .5rem;
    color: #0b5cab;
    background: #fff;
    font-weight: 700;
}
.ops-skip-link:focus { top: 1rem; }
.ops-sidebar {
    position: fixed;
    z-index: 51;
    inset: 0 auto 0 0;
    display: flex;
    flex-direction: column;
    width: 260px;
    height: 100dvh;
    padding: .7rem .8rem .8rem;
    overflow-y: auto;
    isolation: isolate;
    color: var(--ops-white);
    background: var(--ops-navy);
    box-shadow: 4px 0 18px rgb(8 43 84 / 10%);
}
.ops-sidebar::before {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0;
    left: 0;
    height: 155px;
    background: repeating-radial-gradient(ellipse at 0 100%, transparent 0 26px, rgb(255 255 255 / 12%) 27px 28px, transparent 29px 47px);
    content: "";
    opacity: .45;
    pointer-events: none;
}
.ops-sidebar::after {
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 46px;
    width: 82px;
    height: 118px;
    background: url("../brand/sidebar-corner-accent.png") right bottom / contain no-repeat;
    content: "";
    opacity: .42;
    pointer-events: none;
}
.ops-sidebar-head { position: relative; display: flex; align-items: center; min-height: 91px; padding: .35rem; }
.ops-brand { display: flex; align-items: center; gap: .65rem; color: #fff; text-decoration: none; }
.ops-brand img { display: block; width: 52px; height: 52px; object-fit: contain; }
.ops-brand span { display: grid; gap: .1rem; min-width: 0; }
.ops-brand strong { color: #fff; font-size: 1.5rem; font-weight: 900; letter-spacing: -.055em; line-height: 1; }
.ops-brand small { max-width: 145px; color: #d7e6f6; font-size: .65rem; font-weight: 700; line-height: 1.25; }
.ops-menu-button {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 0;
    border-radius: .55rem;
    color: #fff;
    background: transparent;
    cursor: pointer;
}
.ops-menu-button:hover { background: rgb(255 255 255 / 12%); }
.ops-menu-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.ops-sidebar-close { display: none; margin-left: auto; }
.ops-region-badge {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: .6rem;
    margin: .55rem .35rem .2rem;
    padding: .6rem 0;
    border-top: 1px solid rgb(255 255 255 / 18%);
    border-bottom: 1px solid rgb(255 255 255 / 18%);
}
.ops-region-badge img { display: block; width: 42px; height: 42px; object-fit: contain; }
.ops-region-badge span { display: grid; gap: .08rem; min-width: 0; }
.ops-region-badge strong { color: #fff; font-size: .78rem; line-height: 1.25; }
.ops-region-badge small { color: var(--ops-muted); font-size: .67rem; font-weight: 700; letter-spacing: .04em; overflow-wrap: anywhere; }
.ops-sidebar-caption { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .55rem .35rem 1rem; padding-bottom: .7rem; border-bottom: 1px solid rgb(255 255 255 / 18%); color: var(--ops-muted); font-size: .68rem; }
.ops-sidebar-caption span { display: flex; gap: 3px; }
.ops-sidebar-caption i { width: 9px; height: 6px; background: #0b5cab; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ops-sidebar-caption i:nth-child(2) { background: var(--ops-gold); }
.ops-sidebar-caption i:nth-child(3) { background: #11885e; }
.ops-nav { display: grid; gap: 1.05rem; }
.ops-nav-group { display: grid; gap: .22rem; }
.ops-nav-label { margin: 0 0 .12rem .65rem; color: var(--ops-muted); font-size: .68rem; font-weight: 800; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }
.ops-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: .65rem;
    min-height: 42px;
    padding: .45rem .65rem;
    border: 0;
    border-radius: .5rem;
    color: #fff;
    background: transparent;
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
}
.ops-nav-item > svg { flex: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ops-nav-item:hover:not(.is-placeholder), .ops-nav-item:focus-visible { color: #fff; background: rgb(255 255 255 / 12%); }
.ops-nav-item.is-active { color: #fff; background: var(--ops-blue); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 15%); font-weight: 800; }
.ops-nav-item.is-active::before { position: absolute; top: 9px; bottom: 9px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--ops-gold); content: ""; }
.ops-nav-item.is-placeholder { color: var(--ops-muted); cursor: default; }
.ops-sidebar-bottom { display: grid; gap: .22rem; margin-top: auto; padding-top: 1.1rem; }
.ops-sidebar-bottom::before { height: 1px; margin-bottom: .35rem; background: rgb(255 255 255 / 20%); content: ""; }
.ops-sidebar-bottom form { margin: 0; }
.ops-workspace { min-height: 100vh; margin-left: 260px; }
.ops-main { min-height: 100vh; padding: 1.5rem; }
/* Sidebar sits on navy, where the blue ring measures only 2.11:1; use the
   light ring so the indicator clears 3:1 on this dark surface. */
.ops-sidebar :focus-visible, .ops-menu-button:focus-visible {
    outline: var(--ops-focus-width) solid var(--ops-white);
    outline-offset: var(--ops-focus-offset);
    box-shadow: 0 0 0 0.125rem var(--ops-ink);
}

@media (max-width: 980px) {
    .ops-sidebar { visibility: hidden; width: min(84vw, 310px); transform: translateX(-105%); transition: transform .18s ease, visibility .18s ease; }
    .ops-sidebar.is-open { visibility: visible; transform: translateX(0); }
    .ops-sidebar-head { min-height: 72px; }
    .ops-sidebar-close { display: grid; }
    .ops-shell-backdrop:not([hidden]) { position: fixed; z-index: 50; inset: 0; display: block; background: rgb(8 24 46 / 48%); }
    .ops-workspace { margin-left: 0; }
    .ops-main { min-height: calc(100vh - 56px); padding: 1rem; }
    body.ops-sidebar-open { overflow: hidden; }
}

@media (prefers-reduced-motion: reduce) { .ops-sidebar { transition: none; } }