}


/* ============================================================
   Operation sidebar — core mod_menu, Menu Class Suffix
   " operation-sidebar" (Cassiopeia applies it to the <ul>).
   Icons are CSS masks keyed off each item's Link CSS Style
   (menu-anchor_css = "opsnav-ico opsnav-ico--*").
   ============================================================ */
ul.operation-sidebar {
    list-style: none;
    margin: 0;
    padding: 1.1rem 0.85rem 1.4rem;
    background: linear-gradient(180deg, #1f2a47 0%, #161f38 100%);
    border-radius: 14px;
    color: #aeb9d0;
}
ul.operation-sidebar::before {
    content: "Operation";
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b7895;
    font-weight: 700;
    padding: 0 0.75rem 0.6rem;
}
ul.operation-sidebar > li { margin: 0.15rem 0; }
ul.operation-sidebar > li > a {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    color: #b8c2d8;
    text-decoration: none;
    font-size: 0.97rem;
    font-weight: 500;
    transition: background .15s, color .15s;
}
ul.operation-sidebar > li > a:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
ul.operation-sidebar > li.current > a,
ul.operation-sidebar > li.active > a {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

/* Icons via CSS mask on the anchor's Link CSS Style class */
ul.operation-sidebar a[class*="opsnav-ico--"]::before {
    content: "";
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-right: 0.85rem;
    background-color: currentColor;
    opacity: 0.8;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
ul.operation-sidebar li.current a[class*="opsnav-ico--"]::before,
ul.operation-sidebar li.active a[class*="opsnav-ico--"]::before { background-color: #36c6b2; opacity: 1; }

ul.operation-sidebar a.opsnav-ico--grid::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='3' y='3' width='7' height='7' rx='1'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1'/%3E%3C/svg%3E"); }
ul.operation-sidebar a.opsnav-ico--cubes::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9'/%3E%3C/svg%3E"); }
ul.operation-sidebar a.opsnav-ico--workflow::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='7' height='6' rx='1.5'/%3E%3Crect x='13.5' y='14' width='7' height='6' rx='1.5'/%3E%3Cpath d='M10.5 7h3.5a3 3 0 013 3v4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='7' height='6' rx='1.5'/%3E%3Crect x='13.5' y='14' width='7' height='6' rx='1.5'/%3E%3Cpath d='M10.5 7h3.5a3 3 0 013 3v4'/%3E%3C/svg%3E"); }
ul.operation-sidebar a.opsnav-ico--bolt::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13 10V3L4 14h7v7l9-11h-7z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M13 10V3L4 14h7v7l9-11h-7z'/%3E%3C/svg%3E"); }
ul.operation-sidebar a.opsnav-ico--warning::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v3.8m0 3.7h.01M10.3 3.9 1.8 18a1.5 1.5 0 0 0 1.3 2.25h17.8A1.5 1.5 0 0 0 22.2 18L13.7 3.9a1.5 1.5 0 0 0-2.6 0z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 9v3.8m0 3.7h.01M10.3 3.9 1.8 18a1.5 1.5 0 0 0 1.3 2.25h17.8A1.5 1.5 0 0 0 22.2 18L13.7 3.9a1.5 1.5 0 0 0-2.6 0z'/%3E%3C/svg%3E"); }
ul.operation-sidebar a.opsnav-ico--chart::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 13.5h4V21H3zM10 7.5h4V21h-4zM17 3.75h4V21h-4z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 13.5h4V21H3zM10 7.5h4V21h-4zM17 3.75h4V21h-4z'/%3E%3C/svg%3E"); }

/* Constraints badge (dynamic: real published-article count, via mod_menu override) */
ul.operation-sidebar a.opsnav-has-badge::after {
    content: attr(data-opsbadge);
    margin-left: auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e8632a;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 999px;
}

/* Keep the operation sidebar in view while the page scrolls */
ul.operation-sidebar {
    position: sticky;
    top: 1rem;
    align-self: flex-start;
}


/* === two-brand theme tokens: consume the active template style's CSS vars === */
.container-header .brand-logo { background-color: var(--btnbg, #c34032); }
.container-header .mod-menu .nav-link:hover,
.container-header .mod-menu .nav-link:focus,
.container-header .mod-menu .active > .nav-link { color: var(--link-hover-color, #c34032); }

ul.operation-sidebar {
    background: linear-gradient(180deg, var(--sidebarbg, #1f2a47) 0%,
        color-mix(in srgb, var(--sidebarbg, #1f2a47) 62%, #000) 100%);
}
ul.operation-sidebar li.current a[class*="opsnav-ico--"]::before,
ul.operation-sidebar li.active a[class*="opsnav-ico--"]::before { background-color: var(--sidebaractive, #36c6b2); }
ul.operation-sidebar a.opsnav-has-badge::after { background: var(--badgecolor, #e8632a); }


/* brandbox override: logo box color is independent of buttons; header menu follows header text color */
.container-header .brand-logo { background-color: var(--brandbox, var(--btnbg, #c34032)); }
.container-header .mod-menu .nav-link,
.container-header .mod-menu a { color: var(--headercolor, #212529); }

/* ---- System Profile: documentation/support URL fields as buttons ---- */
.fields-container .field-entry.wfg-sysbtn { display: inline-block; margin: .4rem .5rem .1rem 0; }
.fields-container .field-entry.wfg-sysbtn .field-label { display: none; }
.fields-container .field-entry.wfg-sysbtn .field-value a {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .45rem 1rem; border-radius: 8px; line-height: 1;
    font-weight: 600; font-size: .9rem; text-decoration: none;
    background: #004a59; color: #fff; border: 1px solid #004a59;
}
.fields-container .field-entry.wfg-sysbtn .field-value a:hover { background: #00363f; border-color: #00363f; color:#fff; }
/* URL field emits a generic "Visit Website"; replace with distinct button labels */
.fields-container .field-entry.documentation-url.wfg-sysbtn .field-value a,
.fields-container .field-entry.support-url.wfg-sysbtn .field-value a { font-size: 0; }
.fields-container .field-entry.documentation-url.wfg-sysbtn .field-value a::before { content: "Documentation"; font-size: .9rem; }
.fields-container .field-entry.support-url.wfg-sysbtn .field-value a::before { content: "Support"; font-size: .9rem; }
/* Support as an outline variant to differentiate from Documentation */
.fields-container .field-entry.support-url.wfg-sysbtn .field-value a { background: #fff; color: #004a59; }
.fields-container .field-entry.support-url.wfg-sysbtn .field-value a:hover { background: #eef5f6; color: #004a59; }

/* Insights icon (light bulb) */
ul.operation-sidebar a.opsnav-ico--bulb::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); }

/* === Constraint tracking fields: progress meter + urgency/importance badges === */
.cc-progress { display: inline-flex; align-items: center; gap: .5rem; vertical-align: middle; }
.cc-progress-track { display: inline-block; width: 160px; height: 10px; background: #e6e6e6; border-radius: 6px; overflow: hidden; }
.cc-progress-fill { display: block; height: 100%; background: #2bb7b2; border-radius: 6px; }
.cc-progress-num { font-size: .85rem; font-weight: 600; color: #555; }
.cc-badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .02em; }
.cc-badge--urgency-low { background: #e8f5e9; color: #2e7d32; }
.cc-badge--urgency-medium { background: #fff6df; color: #a67c00; }
.cc-badge--urgency-high { background: #fdecea; color: #c0392b; }

/* ------------------------------------------------------------------
   People icon. UWP's "People" menu item references opsnav-ico--users
   but no rule was ever written for it, so that item renders without an
   icon there. Added here so the Sash sidebar is complete.
   ------------------------------------------------------------------ */
ul.operation-sidebar a.opsnav-ico--users::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }

/* ==========================================================================
   Category "ccitems" layout — ported from uwp.gystiq.com 2026-08-18.
   Layout and structural cues are borrowed as-is; the palette is GYSTiq's
   (navy #303751 / teal #2bb7b2), not UWP's. Status badges keep conventional
   semantic hues (green / amber / red) because those carry meaning rather than
   brand, and recolouring them to brand tones would make a critical item and a
   healthy one look alike.
   ========================================================================== */

/* Progress meter (Constraints) */
.cc-progress { display: inline-flex; align-items: center; gap: .5rem; vertical-align: middle; }
.cc-progress-track { display: inline-block; width: 160px; height: 10px; background: #e6e6e6; border-radius: 6px; overflow: hidden; }
.cc-progress-fill { display: block; height: 100%; background: #2bb7b2; border-radius: 6px; }
.cc-progress-num { font-size: .85rem; font-weight: 600; color: #555; }

/* Urgency / importance badges */
.cc-badge { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .02em; }
.cc-badge--urgency-low { background: #e8f5e9; color: #2e7d32; }
.cc-badge--urgency-medium { background: #fff6df; color: #a67c00; }
.cc-badge--urgency-high { background: #fdecea; color: #c0392b; }
.cc-badge--urgency-critical { background: #c0392b; color: #fff; }
.cc-badge--importance-low { background: #eef2f7; color: #5b6b7c; }
.cc-badge--importance-medium { background: #e6f6f5; color: #1b8a86; }
.cc-badge--importance-high { background: #dff1f0; color: #16706d; }
.cc-badge--importance-critical { background: #303751; color: #fff; }

/* Row internals */
.cc-list-empty { color: #8a8a8a; padding: 1rem; }
.cc-row-title { font-weight: 600; color: #303751; text-decoration: none; }
.cc-row-title:hover { text-decoration: underline; }
.cc-row-desc { display: block; font-size: .82rem; color: #8a8a8a; margin-top: .15rem; }
.cc-tag { font-size: .72rem; color: #5b6b7c; background: #eef2f7; padding: .12rem .5rem; border-radius: 6px; white-space: nowrap; }
.cc-sbadge, .cc-cbadge, .cc-abadge { font-size: .72rem; font-weight: 700; padding: .12rem .55rem; border-radius: 999px; white-space: nowrap; }
.cc-sbadge--active { background: #e8f5e9; color: #2e7d32; }
.cc-sbadge--gap { background: #fdecea; color: #c0392b; }
.cc-sbadge--legacy { background: #fff6df; color: #a67c00; }
.cc-sbadge--planned { background: #e6f6f5; color: #1b8a86; }
.cc-sbadge--retired { background: #ededed; color: #777; }
.cc-cbadge--critical { background: #fdecea; color: #c0392b; }
.cc-cbadge--important { background: #fff6df; color: #a67c00; }
.cc-cbadge--optional { background: #eef2f7; color: #5b6b7c; }
.cc-abadge--available { background: #e8f5e9; color: #2e7d32; }
.cc-abadge--partial { background: #fff6df; color: #a67c00; }
.cc-abadge--unavailable { background: #fdecea; color: #c0392b; }

/* ccitems category TABLE: flexible name column, fixed-width meta columns so the
   badges and meters line up down the page. */
.cc-table { width: 100%; border-collapse: collapse; }
.cc-table thead th { text-align: left; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: #8a8a8a; font-weight: 700; padding: .55rem 1rem; border-bottom: 2px solid #ececec; white-space: nowrap; }
.cc-table tbody td { padding: .7rem 1rem; border-bottom: 1px solid #f1f1f1; vertical-align: middle; }
.cc-table tbody tr:last-child td { border-bottom: 0; }
.cc-table tbody tr:hover td { background: #fafbfc; }
.cc-th-name, .cc-td-name { width: auto; }
.cc-th-meta, .cc-td-meta { width: 128px; }
.cc-th-source, .cc-td-source { width: 190px; }
.cc-th-progress, .cc-td-progress { width: 190px; }
.cc-td-meta, .cc-td-progress { white-space: nowrap; }
.cc-td-progress .cc-progress-track { width: 120px; }
.cc-list-pagination { margin-top: 1rem; }

/* Narrow screens: the fixed meta columns would squeeze the title to nothing, so
   drop the table to stacked rows and hide the header. */
@media (max-width: 720px) {
    .cc-table thead { display: none; }
    .cc-table, .cc-table tbody, .cc-table tr, .cc-table td { display: block; width: 100%; }
    .cc-table tbody tr { border-bottom: 1px solid #ececec; padding: .5rem 0; }
    .cc-table tbody td { border-bottom: 0; padding: .2rem 1rem; width: auto !important; }
    .cc-td-progress .cc-progress-track { width: 100%; max-width: 220px; }
}

/* === Single article (Command Center reference card) === */
.cc-article { max-width: 46rem; }
.cc-article__head { border-bottom: 2px solid #ececec; padding-bottom: 1rem; margin-bottom: 1.5rem; }
.cc-article__cat { margin: 0 0 .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .09em;
                   text-transform: uppercase; color: #2bb7b2; }
.cc-article__title { margin: 0; font-size: 1.9rem; line-height: 1.2; font-weight: 700;
                     letter-spacing: -.01em; color: #303751; }
.cc-article__meta { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: .9rem; }
.cc-meta-item { display: inline-flex; align-items: center; gap: .4rem; }
.cc-meta-k { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9aa3ad; }
.cc-article__body { font-size: 1rem; line-height: 1.65; color: #2b3140; }
.cc-article__body p { margin: 0 0 1rem; }
.cc-article__body h2, .cc-article__body h3 { color: #303751; margin: 1.6rem 0 .6rem; }
.cc-article__body ul, .cc-article__body ol { margin: 0 0 1rem 1.25rem; }
.cc-article__body li { margin-bottom: .35rem; }
.cc-article__body strong { color: #1c2333; }
.cc-article__body code { background: #eef2f7; padding: .1rem .35rem; border-radius: 4px; font-size: .9em; }
.cc-article__body table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; }
.cc-article__body th { text-align: left; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
                       color: #8a8a8a; padding: .5rem .75rem; border-bottom: 2px solid #ececec; }
.cc-article__body td { padding: .5rem .75rem; border-bottom: 1px solid #f1f1f1; }
.cc-article__body em { color: #6b7280; }
.cc-article__back { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid #ececec; }
.cc-article__back a { color: #303751; font-weight: 600; text-decoration: none; }
.cc-article__back a:hover { text-decoration: underline; }

/* Blueprint sidebar icon (Feather "map"), same masked-SVG convention as the rest. */
ul.operation-sidebar a.opsnav-ico--map::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6v16l7-4 8 4 7-4V2l-7 4-8-4-7 4z'/%3E%3Cpath d='M8 2v16'/%3E%3Cpath d='M16 6v16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6v16l7-4 8 4 7-4V2l-7 4-8-4-7 4z'/%3E%3Cpath d='M8 2v16'/%3E%3Cpath d='M16 6v16'/%3E%3C/svg%3E"); }

/* === Header brand: Sash logo on a light plate ===
   The logo is dark lettering plus a crimson sash on transparency, and
   Cassiopeia's header band is #112855 navy, so the mark would be invisible
   sitting directly on it. Same problem UWP solved with a coloured .brand-logo
   block; here the plate is white because our logo is dark rather than light.

   Cassiopeia nests <div.navbar-brand> > <a.brand-logo> > <img>, so the plate
   goes on the ANCHOR only. Styling both would draw a box inside a box.

   Expected result: one white rounded card top-left of the navy header holding
   the logo at 44px tall. No layout shift elsewhere: the plate is inline-flex
   inside the existing anchor, so it occupies the space the logo already used. */
.container-header .navbar-brand {
    background: none;
    padding: 0;
    box-shadow: none;
}

.container-header a.brand-logo {
    background: #ffffff;
    padding: 10px 18px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    line-height: 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

.container-header a.brand-logo img {
    display: block;
    height: 44px;
    width: auto;
    max-width: none;
}

.container-header .site-description {
    background: none;
    color: rgba(255, 255, 255, .75);
    font-size: .8rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-left: 1rem;
}

@media (max-width: 600px) {
    .container-header a.brand-logo img { height: 34px; }
    .container-header a.brand-logo { padding: 8px 12px; }
    .container-header .site-description { display: none; }
}