/*
 * Conducting Compliance — application shell.
 *
 * Design intent:
 * - recognisably Conducting at the perimeter;
 * - light, quiet workspace for prolonged use;
 * - brand green is identity, not compliance status;
 * - print output is neutral and economical.
 */

:root {
    --cc-brand-green: #36a91f;

    --cc-shell-dark: #29302e;
    --cc-shell-mid: #3b4441;
    --cc-shell-text: #f7f9f8;
    --cc-shell-muted: #d1d8d5;

    --cc-page-bg: #f3f5f3;
    --cc-surface: #ffffff;

    --cc-text: #1c2925;
    --cc-muted: #5c6b66;
    --cc-border: #d6ddda;

    --cc-action: #354c43;
    --cc-action-hover: #293d35;

    /*
     * Deliberately not green:
     * keyboard focus must not be confused with
     * branding or a positive compliance state.
     */
    --cc-focus: #7048c8;

    --cc-radius: 10px;

    --cc-shadow-soft:
        0 3px 18px rgba(23,38,32,.045);
}


/* =========================================================
   Working canvas
   ========================================================= */

html {
    background: var(--cc-page-bg);
}

body {
    margin: 0;
    background: var(--cc-page-bg);
    color: var(--cc-text);
    line-height: 1.45;
}

main {
    position: relative;
}


/* =========================================================
   Conducting application shell
   ========================================================= */

.cc-shell-header {
    position: relative;
    background: var(--cc-shell-dark);
    color: var(--cc-shell-text);
    box-shadow:
        0 3px 18px rgba(18,27,23,.10);
}

.cc-shell-header::after {
    content: "";
    display: block;
    height: 3px;
    background: var(--cc-brand-green);
}

.cc-shell-header__main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.25rem .9rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}


/* =========================================================
   Brand lockup
   ========================================================= */

.cc-brand-lockup {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;

    min-width: 0;

    color: var(--cc-shell-text);
    text-decoration: none;
}

.cc-brand-mark {
    display: block;

    width: 174px;
    height: 27px;

    background: rgba(255,255,255,.88);

    -webkit-mask:
        url('/images/conducting-logo-source.png')
        left center / contain
        no-repeat;

    mask:
        url('/images/conducting-logo-source.png')
        left center / contain
        no-repeat;
}

.cc-product-name {
    padding-left: 1px;

    color: #ffffff;

    font-size: .91rem;
    font-weight: 650;
    letter-spacing: .018em;
    line-height: 1.2;
}

.cc-brand-lockup:hover .cc-brand-mark {
    background: #ffffff;
}


/* =========================================================
   Header context / user actions
   ========================================================= */

.cc-shell-header__meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
}

.cc-shell-context {
    color: var(--cc-shell-muted);
    font-size: .86rem;
}

.cc-environment {
    padding: .28rem .5rem;

    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;

    color: #edf3f0;

    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.cc-shell-signout-form {
    margin: 0;
}

.cc-shell-signout {
    padding: .45rem .7rem !important;

    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 6px !important;

    background: transparent !important;
    color: #ffffff !important;

    font: inherit;
    font-size: .82rem;

    cursor: pointer;
}

.cc-shell-signout:hover {
    background: rgba(255,255,255,.09) !important;
}


/* =========================================================
   Transition band: dark Conducting frame -> light workspace
   ========================================================= */

.cc-shell-nav-band {
    background: var(--cc-shell-mid);
}

.cc-shell-nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: .52rem 1.25rem;

    display: flex;
    align-items: center;
    gap: .25rem;
    flex-wrap: wrap;
}

.cc-shell-nav a {
    display: inline-block;

    padding: .48rem .7rem;

    border-radius: 6px;

    color: #eef3f1;
    text-decoration: none;

    font-size: .84rem;
    font-weight: 600;
}

.cc-shell-nav a:hover {
    background: rgba(255,255,255,.08);
}

.cc-shell-nav a[aria-current="page"] {
    background: rgba(255,255,255,.12);
    color: #ffffff;
}


/* =========================================================
   Surfaces
   ========================================================= */

.panel,
section.panel {
    background: var(--cc-surface);
    border-color: var(--cc-border);
    box-shadow: var(--cc-shadow-soft);
}


/* =========================================================
   Text
   ========================================================= */

h1,
h2,
h3 {
    color: var(--cc-text);
}

.muted,
small {
    color: var(--cc-muted);
}


/* =========================================================
   Controls
   ========================================================= */

button,
.btn {
    transition:
        background-color .12s ease,
        border-color .12s ease,
        box-shadow .12s ease;
}

button:not(.secondary):not(.danger):not(.cc-shell-signout),
.btn:not(.secondary):not(.danger) {
    background: var(--cc-action);
}

button:not(.secondary):not(.danger):not(.cc-shell-signout):hover,
.btn:not(.secondary):not(.danger):hover {
    background: var(--cc-action-hover);
}

input,
select,
textarea {
    border-color: #aab8b3;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--cc-focus);
    outline-offset: 3px;
}

:focus:not(:focus-visible) {
    outline: none;
}


/* =========================================================
   Links
   ========================================================= */

main a {
    color: #24584a;

    text-decoration-thickness: .08em;
    text-underline-offset: .14em;
}


/* =========================================================
   Tables
   ========================================================= */

table th {
    color: #182722;
}

table td,
table th {
    border-color: var(--cc-border);
}


/*
 * Existing green/amber/red status presentation remains
 * semantic. Conducting brand green is never applied to
 * generic status badges here.
 */

.badge,
.status {
    border: 1px solid rgba(23,45,36,.06);
}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 760px) {
    .cc-shell-header__main {
        align-items: flex-start;
        gap: 1rem;
    }

    .cc-brand-mark {
        width: 145px;
        height: 23px;
    }

    .cc-product-name {
        font-size: .84rem;
    }

    .cc-shell-header__meta {
        gap: .45rem;
    }

    .cc-shell-context {
        display: none;
    }
}

@media (max-width: 540px) {
    .cc-shell-header__main {
        padding: .85rem 1rem .75rem;
    }

    .cc-shell-nav {
        padding: .42rem .75rem;
        gap: .15rem;
    }

    .cc-shell-nav a {
        padding: .5rem .55rem;
        font-size: .8rem;
    }

    .cc-environment {
        display: none;
    }
}


/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* =========================================================
   PRINT / PDF
   Application chrome disappears completely.
   Output remains useful in greyscale and economical with ink.
   ========================================================= */

@media print {
    @page {
        size: A4;
        margin: 12mm;
    }

    html,
    body {
        background: #ffffff !important;
        color: #000000 !important;
    }

    body {
        font-size: 10pt;
        line-height: 1.35;
    }

    .cc-shell-header,
    body > header,
    nav,
    form,
    button,
    .btn,
    .no-print {
        display: none !important;
    }

    main {
        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .panel,
    section.panel {
        background: #ffffff !important;
        color: #000000 !important;

        box-shadow: none !important;

        border-color: #bcbcbc !important;
    }

    h1,
    h2,
    h3,
    p,
    td,
    th,
    small,
    .muted {
        color: #000000 !important;
    }

    a,
    main a {
        color: #000000 !important;
        text-decoration: none !important;
    }

    table {
        width: 100% !important;
        border-collapse: collapse !important;
    }

    thead {
        display: table-header-group;
    }

    tfoot {
        display: table-footer-group;
    }

    tr,
    img {
        break-inside: avoid;
    }

    th,
    td {
        border-color: #bcbcbc !important;
    }

    .badge,
    .status {
        background: transparent !important;
        color: #000000 !important;
        border: 1px solid #777777 !important;
    }
}


/* Build 03H.3J-B3C — public-site continuity */

/*
 * This layer deliberately overrides the earlier B3 shell experiment.
 * The public Conducting site remains the visual parent; the application
 * becomes a lighter operational extension of it.
 */

:root {
    --cc-brand-green: #78b040;
    --cc-brand-orange: #f88028;

    --cc-shell-black: #181a19;
    --cc-shell-green-black: #202722;
    --cc-shell-edge: #29332c;

    --cc-page-bg: #f4f5f1;
    --cc-surface: #ffffff;

    --cc-text: #202925;
    --cc-muted: #626d67;
    --cc-border: #d8ddd9;

    --cc-action: #344a40;
    --cc-action-hover: #263a31;
}


/* ---------------------------------------------------------
   One continuous Conducting masthead
   --------------------------------------------------------- */

.cc-shell-header {
    position: relative;

    background:
        radial-gradient(
            circle at 82% 5%,
            rgba(120,176,64,.10) 0,
            rgba(120,176,64,.035) 22%,
            transparent 43%
        ),
        linear-gradient(
            112deg,
            var(--cc-shell-black) 0%,
            #1c211e 48%,
            var(--cc-shell-green-black) 76%,
            var(--cc-shell-edge) 100%
        );

    color: #f5f6f3;

    box-shadow:
        0 1px 0 rgba(255,255,255,.035),
        0 10px 30px rgba(22,30,26,.08);
}


/*
 * Replace previous full green underline with a quieter brand
 * signature: mostly green with a short orange finish.
 */
.cc-shell-header::after {
    content: "";

    display: block;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--cc-brand-green) 0%,
            var(--cc-brand-green) 82%,
            var(--cc-brand-orange) 82%,
            var(--cc-brand-orange) 100%
        );

    opacity: .78;
}


.cc-shell-header__main {
    min-height: 78px;

    padding-top: 1.05rem;
    padding-bottom: .7rem;

    align-items: center;
}


/* ---------------------------------------------------------
   Genuine Conducting lockup
   --------------------------------------------------------- */

.cc-brand-lockup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: .12rem;

    text-decoration: none;
}

.cc-brand-logo {
    display: block;

    width: 174px;
    height: auto;

    opacity: .82;

    /*
     * The real logo already contains the Conducting grey/green
     * relationship. Do not recolour it.
     */
}

.cc-brand-lockup:hover .cc-brand-logo {
    opacity: .95;
}

.cc-product-name {
    position: relative;

    color: var(--cc-brand-green);

    font-size: 1rem;
    font-weight: 720;
    letter-spacing: .012em;

    line-height: 1.2;
}

.cc-product-name::after {
    content: "";

    display: inline-block;

    width: 5px;
    height: 5px;

    margin-left: .42rem;
    margin-bottom: .1rem;

    border-radius: 50%;

    background: var(--cc-brand-orange);
}


/* ---------------------------------------------------------
   Utility information
   --------------------------------------------------------- */

.cc-shell-header__meta {
    color: #d7ddd8;
}

.cc-shell-context {
    color: #bfc8c2;
}

.cc-environment {
    color: #e9eee9;

    background: rgba(255,255,255,.025);
    border-color: rgba(255,255,255,.16);
}

.cc-shell-signout {
    border-color: rgba(255,255,255,.19) !important;
}

.cc-shell-signout:hover {
    background: rgba(255,255,255,.07) !important;
}


/* ---------------------------------------------------------
   Navigation now belongs to the same masthead.
   No separate floating dark box.
   --------------------------------------------------------- */

.cc-shell-nav-band {
    display: contents;
}

.cc-shell-nav {
    max-width: 1200px;

    margin: 0 auto;

    padding:
        .15rem 1.25rem
        .72rem;

    border-top:
        1px solid rgba(255,255,255,.065);

    background: transparent;

    gap: 1.15rem;
}

.cc-shell-nav a {
    position: relative;

    padding: .52rem 0 .38rem;

    border-radius: 0;

    color: #d6dcd8;

    font-weight: 580;
    letter-spacing: .005em;
}

.cc-shell-nav a:hover {
    background: transparent;
    color: #ffffff;
}

.cc-shell-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 100%;
    bottom: .05rem;

    height: 2px;

    background: var(--cc-brand-green);

    transition: right .14s ease;
}

.cc-shell-nav a:hover::after {
    right: 0;
}

.cc-shell-nav a[aria-current="page"] {
    background: transparent;
    color: #ffffff;
}

.cc-shell-nav a[aria-current="page"]::after {
    right: 0;
}


/* ---------------------------------------------------------
   Transition into the working canvas
   --------------------------------------------------------- */

body {
    background:
        linear-gradient(
            180deg,
            #edf0eb 0,
            var(--cc-page-bg) 95px,
            var(--cc-page-bg) 100%
        );

    color: var(--cc-text);
}


/* ---------------------------------------------------------
   Control Centre:
   remove the old blue/teal landing-page hero entirely.
   It becomes a sober application introduction.
   --------------------------------------------------------- */

.cc-hero {
    position: relative;

    margin:
        1.8rem 0
        1.65rem;

    padding:
        .3rem 0
        1.35rem;

    border: 0;
    border-bottom:
        1px solid var(--cc-border);

    border-radius: 0;

    background: transparent;

    color: var(--cc-text);

    box-shadow: none;
}

.cc-hero__eyebrow {
    color: #66716b;

    font-size: .74rem;
    letter-spacing: .07em;
}

.cc-status-dot {
    background: var(--cc-brand-green);
}

.cc-hero h1 {
    margin:
        .65rem 0
        .25rem;

    color: var(--cc-text);

    font-size:
        clamp(1.85rem,3vw,2.45rem);

    letter-spacing: -.035em;
}

.cc-hero__body p {
    color: var(--cc-muted);
}

.cc-hero__metrics {
    gap: .65rem;
}

.cc-hero__metrics > div {
    min-width: 120px;

    padding: .72rem .9rem;

    background: #ffffff;

    border:
        1px solid var(--cc-border);

    border-radius: 9px;

    box-shadow:
        0 2px 10px rgba(25,38,31,.035);
}

.cc-hero__metrics strong {
    color: var(--cc-text);
}

.cc-hero__metrics span {
    color: var(--cc-muted);
}

.cc-dev-note {
    margin-top: 1rem;
    padding-top: .75rem;

    border-top:
        1px solid #e0e4e0;

    color: #69756e;
}


/* ---------------------------------------------------------
   Navigation cards become quieter too.
   --------------------------------------------------------- */

.cc-nav-tile {
    border-color: var(--cc-border);

    box-shadow:
        0 2px 8px rgba(26,40,32,.025);
}

.cc-nav-tile:hover {
    transform: translateY(-1px);

    border-color: #acb8b0;

    box-shadow:
        0 7px 18px rgba(26,40,32,.065);
}


/* ---------------------------------------------------------
   Links and controls:
   functional colour stays distinct from brand/status green.
   --------------------------------------------------------- */

main a {
    color: #345e4c;
}

button:not(.secondary):not(.danger):not(.cc-shell-signout),
.btn:not(.secondary):not(.danger) {
    background: var(--cc-action);
}

button:not(.secondary):not(.danger):not(.cc-shell-signout):hover,
.btn:not(.secondary):not(.danger):hover {
    background: var(--cc-action-hover);
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 760px) {
    .cc-shell-header__main {
        min-height: auto;

        align-items: flex-start;
    }

    .cc-brand-logo {
        width: 150px;
    }

    .cc-product-name {
        font-size: .91rem;
    }

    .cc-shell-nav {
        gap: .8rem;
    }
}

@media (max-width: 540px) {
    .cc-brand-logo {
        width: 138px;
    }

    .cc-shell-nav {
        gap: .65rem;
    }

    .cc-shell-nav a {
        font-size: .79rem;
    }
}


/* Build 03H.3J-B3D — soften workspace and strengthen product identity */

/*
 * Parent brand:
 * retain the genuine Conducting wordmark and strapline,
 * but visually crop the green earth symbol so it does not
 * compete with the Conducting Compliance product identity.
 */

.cc-brand-logo {
    width: 174px;

    clip-path: inset(0 0 0 14.5%);
    margin-left: -25px;

    opacity: .78;
}

.cc-brand-lockup:hover .cc-brand-logo {
    opacity: .9;
}


/*
 * Product identity:
 * colour deliberately unchanged from B3C.
 */

.cc-product-name {
    margin-top: .05rem;

    color: var(--cc-brand-green);

    font-size: 1.12rem;
    font-weight: 780;
    letter-spacing: .006em;
}

/* Remove the experimental orange punctuation mark. */
.cc-product-name::after {
    display: none;
}


/* ---------------------------------------------------------
   Dark-to-light transition

   The workspace now inherits a faint green-grey cast from
   the masthead rather than jumping immediately to flat grey.
   --------------------------------------------------------- */

body {
    background:
        radial-gradient(
            circle at 12% 0%,
            rgba(120,176,64,.065) 0,
            rgba(120,176,64,.025) 22%,
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #e8eee6 0px,
            #edf2ea 150px,
            #f1f4ef 330px,
            #f5f6f2 650px,
            #f5f6f2 100%
        );
}


/* The introductory area should sit in the canvas, not on it. */

.cc-hero {
    background: transparent;
}


/* Metrics participate in the same softened palette. */

.cc-hero__metrics > div {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.95),
            rgba(247,250,245,.92)
        );

    border-color: #d2dad3;

    box-shadow:
        0 4px 14px rgba(31,48,39,.035);
}


/* ---------------------------------------------------------
   Control Centre tiles

   Still predominantly white, but no longer visually detached
   from the green-grey workspace.
   --------------------------------------------------------- */

.cc-nav-tile {
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.97) 0%,
            rgba(247,250,246,.94) 100%
        );

    border-color: #d0d9d1;

    box-shadow:
        0 4px 16px rgba(31,48,39,.038);
}

.cc-nav-tile:hover {
    border-color: rgba(120,176,64,.48);

    box-shadow:
        0 8px 22px rgba(31,48,39,.07);

    transform: translateY(-1px);
}


/*
 * A tiny amount of colour continuity around the icon blocks,
 * without converting the cards into coloured status objects.
 */

.cc-icon {
    box-shadow:
        inset 0 0 0 1px rgba(32,50,40,.025);
}


/* ---------------------------------------------------------
   Mobile adjustments
   --------------------------------------------------------- */

@media (max-width: 760px) {
    .cc-brand-logo {
        width: 150px;
        margin-left: -22px;
    }

    .cc-product-name {
        font-size: 1rem;
    }
}

@media (max-width: 540px) {
    .cc-brand-logo {
        width: 138px;
        margin-left: -20px;
    }

    .cc-product-name {
        font-size: .96rem;
    }
}


/* Print remains deliberately neutral. */

@media print {
    body {
        background: #ffffff !important;
    }

    .cc-nav-tile,
    .cc-hero__metrics > div {
        background: #ffffff !important;
        box-shadow: none !important;
    }
}


/* Build 03H.3J-B3E — Brumsputtel identity */

/* ---------------------------------------------------------
   Product identity
   --------------------------------------------------------- */

.cc-brand-lockup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .13rem;
    min-width: 185px;
    text-decoration: none;
}

.cc-brand-logo {
    display: none !important;
}

.cc-product-name {
    margin: 0;
    color: var(--cc-brand-green);
    font-size: 1.48rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.01em;
}

.cc-product-name::after {
    display: none !important;
}

.cc-product-byline {
    color: rgba(223, 229, 225, .66);
    font-size: .72rem;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: .025em;
}

.cc-brand-lockup:hover .cc-product-name {
    color: var(--cc-brand-green);
}


/* ---------------------------------------------------------
   Workspace

   Slightly deeper than B3D while remaining a light working
   environment. The green-grey now follows naturally from
   the masthead.
   --------------------------------------------------------- */

body {
    background:
        radial-gradient(
            circle at 13% 0%,
            rgba(120, 176, 64, .085) 0,
            rgba(120, 176, 64, .035) 24%,
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #e1e9df 0px,
            #e6ece4 180px,
            #ebf0e9 430px,
            #f0f3ee 760px,
            #f3f5f0 100%
        );
}


/* ---------------------------------------------------------
   Dashboard cards

   Deeper sage surface so the cards belong to the Conducting
   palette rather than floating as generic white UI panels.
   --------------------------------------------------------- */

.cc-nav-tile {
    background:
        linear-gradient(
            145deg,
            rgba(225, 233, 225, .98) 0%,
            rgba(235, 240, 234, .97) 100%
        );

    border-color: #c9d3ca;

    box-shadow:
        0 4px 16px rgba(31, 48, 39, .045);
}

.cc-nav-tile:hover {
    background:
        linear-gradient(
            145deg,
            rgba(229, 237, 228, 1) 0%,
            rgba(240, 244, 238, 1) 100%
        );

    border-color: rgba(120, 176, 64, .62);

    box-shadow:
        0 8px 22px rgba(31, 48, 39, .075);

    transform: translateY(-1px);
}


/* Top-right dashboard figures get the same family treatment,
   but remain slightly lighter than the navigation cards. */

.cc-hero__metrics > div {
    background:
        linear-gradient(
            145deg,
            rgba(239, 243, 237, .98),
            rgba(247, 249, 245, .98)
        );

    border-color: #cdd6ce;
}


/* ---------------------------------------------------------
   Responsive product identity
   --------------------------------------------------------- */

@media (max-width: 760px) {
    .cc-brand-lockup {
        min-width: 155px;
    }

    .cc-product-name {
        font-size: 1.28rem;
    }

    .cc-product-byline {
        font-size: .68rem;
    }
}


/* ---------------------------------------------------------
   Print remains deliberately boring and professional.
   Brumsputtel is application branding, not coloured print UI.
   --------------------------------------------------------- */

@media print {
    body {
        background: #fff !important;
    }

    .cc-nav-tile,
    .cc-hero__metrics > div {
        background: #fff !important;
        box-shadow: none !important;
    }
}


/* Build 03H.3J-B3F — dark workspace / light working surfaces */

/* Brand punctuation */
.cc-product-name::after {
    content: ".";
    display: inline !important;
    margin-left: .08em;
    color: var(--cc-brand-orange);
    font-weight: 800;
}


/* ---------------------------------------------------------
   Workspace

   Carry the masthead into the application body with a deep,
   restrained green-charcoal surface.
   --------------------------------------------------------- */

body {
    background:
        radial-gradient(
            circle at 16% 0%,
            rgba(120, 176, 64, .10) 0,
            rgba(120, 176, 64, .025) 24%,
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #253029 0px,
            #29342d 260px,
            #2d3831 620px,
            #303b34 100%
        );

    color: #edf2ee;
}


/* ---------------------------------------------------------
   Main headings / supporting copy on dark workspace
   --------------------------------------------------------- */

.cc-hero h1,
.cc-section-heading,
.cc-section-heading h2,
main h1,
main h2 {
    color: #f4f7f4;
}

.cc-hero p,
.cc-section-heading span,
.cc-hero__eyebrow,
.cc-environment-note {
    color: #c7d0ca;
}

.cc-hero__eyebrow::before {
    background: var(--cc-brand-green);
}


/* Divider lines need to remain visible, but restrained. */
.cc-hero,
.cc-environment-note,
.cc-section-heading {
    border-color: rgba(232, 239, 234, .14);
}


/* ---------------------------------------------------------
   Dashboard tiles

   Light working surfaces against the dark workspace.
   --------------------------------------------------------- */

.cc-nav-tile {
    background:
        linear-gradient(
            145deg,
            #f3f6f1 0%,
            #e9efe8 100%
        );

    border-color: rgba(255, 255, 255, .18);

    box-shadow:
        0 10px 24px rgba(8, 15, 11, .14);

    color: #203028;
}

.cc-nav-tile h3,
.cc-nav-tile strong,
.cc-nav-tile a {
    color: #173043;
}

.cc-nav-tile p,
.cc-nav-tile .muted,
.cc-nav-tile small {
    color: #627069;
}

.cc-nav-tile:hover {
    background:
        linear-gradient(
            145deg,
            #f7f9f5 0%,
            #eef3ec 100%
        );

    border-color: rgba(120, 176, 64, .72);

    box-shadow:
        0 14px 28px rgba(8, 15, 11, .19);

    transform: translateY(-1px);
}


/* ---------------------------------------------------------
   Top-right metrics

   Keep BOTH metric boxes inside the same visual treatment.
   --------------------------------------------------------- */

.cc-hero__metrics {
    align-self: center;
}

.cc-hero__metrics > div {
    background:
        linear-gradient(
            145deg,
            #f5f7f3 0%,
            #eaf0e9 100%
        );

    color: #1e2d26;

    border-color: rgba(255, 255, 255, .20);

    box-shadow:
        0 8px 18px rgba(8, 15, 11, .13);
}

.cc-hero__metrics strong {
    color: #17241e;
}

.cc-hero__metrics span,
.cc-hero__metrics small {
    color: #67736d;
}


/* ---------------------------------------------------------
   General panels used elsewhere in the management area

   Keep forms/tables/content readable if they appear on the
   dark workspace.
   --------------------------------------------------------- */

main .panel,
main table,
main form:not(.cc-signout-form) {
    color: #203028;
}


/* ---------------------------------------------------------
   Print remains completely neutral.
   --------------------------------------------------------- */

@media print {
    body {
        background: #fff !important;
        color: #000 !important;
    }

    .cc-nav-tile,
    .cc-hero__metrics > div {
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        border-color: #bbb !important;
    }

    .cc-nav-tile h3,
    .cc-nav-tile p,
    .cc-hero__metrics strong,
    .cc-hero__metrics span {
        color: #000 !important;
    }
}


/* Build 03H.3J-B3I — final structural visual cleanup */


/* ---------------------------------------------------------
   Brumsputtel punctuation

   Real text punctuation. No pseudo-element remnants.
   --------------------------------------------------------- */

.cc-product-name::after {
    content: none !important;
    display: none !important;
}

.cc-product-stop {
    display: inline;
    margin-left: .015em;

    color: var(--cc-brand-orange);

    font: inherit;
    font-weight: inherit;
    line-height: inherit;

    background: none;
    border: 0;
    border-radius: 0;
    width: auto;
    height: auto;
}


/* ---------------------------------------------------------
   Workspace

   Only fractionally lighter than the version we liked.
   Keep the rich green-charcoal character.
   --------------------------------------------------------- */

html {
    min-height: 100%;
    background: #334037;
}

body {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 16% 0%,
            rgba(120,176,64,.09) 0,
            rgba(120,176,64,.022) 24%,
            transparent 42%
        ),
        linear-gradient(
            180deg,
            #29362e 0%,
            #2d3931 35%,
            #303d34 68%,
            #334037 100%
        );
}


/* ---------------------------------------------------------
   Control-centre divider

   Replace the existing line. Do NOT add another one.
   --------------------------------------------------------- */

.cc-hero {
    border-bottom-color: rgba(248,128,40,.72) !important;
}

.cc-hero::after {
    content: none !important;
    display: none !important;
}


/* ---------------------------------------------------------
   Footer

   Logged-in application identity already lives in the header.
   --------------------------------------------------------- */

.cc-shell-footer,
body > footer,
footer {
    display: none !important;
}


/* Ensure removal of the footer never exposes a white canvas. */
body > main {
    min-height: calc(100vh - 92px);
}


/* Print remains neutral. */
@media print {
    html,
    body {
        min-height: auto !important;
        background: #fff !important;
    }

    body > main {
        min-height: auto !important;
    }

    .cc-hero {
        border-bottom-color: #aaa !important;
    }

    .cc-product-stop {
        color: #000 !important;
    }
}


/* Build 03H.3J-B3J — increase workspace gradient depth */

body {
    background:
        radial-gradient(
            circle at 16% 0%,
            rgba(120,176,64,.09) 0,
            rgba(120,176,64,.025) 24%,
            transparent 43%
        ),
        linear-gradient(
            180deg,
            #29362e 0%,
            #2f3d34 28%,
            #36453b 58%,
            #3d4c42 100%
        );
}

html {
    background: #3d4c42;
}

@media print {
    html,
    body {
        background: #fff !important;
    }
}


/* Build 03K-A — workflow UX */

/* Informational evidence-vault banner, not a warning state. */
.vault-banner {
    margin: 1rem 0 1.25rem;
    padding: .8rem 1rem;

    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.11);
    border-left: 3px solid var(--cc-brand-green);
    border-radius: 6px;

    color: #dce6df;
}

.vault-banner strong {
    color: #f3f6f3;
}


/* Related form actions should read as one decision. */
.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: center;
    margin-top: 1rem;
}


/* Make anchored workflow sections land with breathing room. */
#record-calibration {
    scroll-margin-top: 7rem;
}


/* Build 03K-C — panel contrast cleanup */

/* Headings on light working surfaces must use dark text. */
.panel h1,
.panel h2,
.panel h3,
.panel h4,
.cc-nav-tile h1,
.cc-nav-tile h2,
.cc-nav-tile h3 {
    color: #173043 !important;
}


/* Success confirmation on the dark application shell. */
.notice {
    background: #d8f1df !important;
    border: 1px solid #b7d9c1;
    border-left: 3px solid var(--cc-brand-green);
    border-radius: 6px;

    color: #20382b !important;
}

.notice strong,
.notice a {
    color: #173428 !important;
}


/* Muted text inside light panels needs its own darker value. */
.panel .muted,
.panel small {
    color: #66736d;
}


/* Build 03K-D — shared Brumsputtel management shell */

.page-context-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem;

    margin: .9rem 0 1.25rem;

    color: #c4cec8;
    font-size: .9rem;
}

.page-context-nav a {
    color: #dce7df;
    text-decoration-color: rgba(120,176,64,.65);
    text-underline-offset: .18em;
}

.page-context-nav a:hover {
    color: #fff;
    text-decoration-color: var(--cc-brand-green);
}


/* Standalone unauthenticated product mark. */
.login-product {
    margin-bottom: .15rem;

    color: var(--cc-brand-green) !important;
    font-weight: 800;
    letter-spacing: -.015em;
}

.login-product span {
    color: var(--cc-brand-orange);
}

.login-byline {
    margin-top: 0;
    margin-bottom: 1.5rem;

    color: #68746e;
    font-size: .78rem;
}


/*
 * Several legacy page templates still contain their own header rules.
 * Once the shared shell is present, do not let generic `header`
 * selectors override the Brumsputtel masthead colours/layout.
 */
.cc-shell-header {
    color: #fff;
}

.cc-shell-header a {
    color: inherit;
}


@media print {
    .page-context-nav {
        display: none !important;
    }
}


/* Build 03K-E — legacy status surface contrast */

/* Legacy pilot/information banner */
.warn {
    background: rgba(248, 128, 40, .10) !important;
    border: 1px solid rgba(248, 128, 40, .28);
    border-left: 3px solid var(--cc-brand-orange);
    border-radius: 6px;

    color: #f1f3ef !important;
}

.warn strong,
.warn a {
    color: #fff !important;
}


/* Legacy success surface */
.ok {
    background: #d8f1df !important;
    border-left: 3px solid var(--cc-brand-green);
    border-radius: 6px;

    color: #20382b !important;
}


/* Legacy error surface */
.err {
    background: #f8dddd !important;
    border-left: 3px solid #a53d35;
    border-radius: 6px;

    color: #65231f !important;
}


/* Build 03K-F — hub shell consistency */

/*
 * Hub breadcrumbs are navigation, not action buttons.
 * Keep them understated beneath the global masthead.
 */
.hub-back-link {
    display: inline-block !important;

    width: auto !important;
    min-width: 0 !important;

    margin: 0 0 1.25rem !important;
    padding: 0 !important;

    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    color: #dce7df !important;

    font: inherit !important;
    font-weight: 500 !important;

    text-decoration: underline !important;
    text-decoration-color: rgba(120,176,64,.65) !important;
    text-underline-offset: .18em !important;
}

.hub-back-link:hover {
    color: #fff !important;
    text-decoration-color: var(--cc-brand-green) !important;
}

@media print {
    .hub-back-link {
        display: none !important;
    }
}


/* Build 03K-G — canonical hub/task shell */

/*
 * The signature rule is a real shared-shell element rather than
 * relying on page-specific pseudo elements.
 */
.cc-shell-header {
    position: relative;
}

.cc-shell-header::after {
    content: none !important;
    display: none !important;
}

.cc-shell-signature {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--cc-brand-green) 0%,
            var(--cc-brand-green) 92%,
            var(--cc-brand-orange) 92%,
            var(--cc-brand-orange) 100%
        );

    opacity: .9;
}


/* Reusable hub choices */
.hub-card-grid {
    display: grid;
    grid-template-columns:
        repeat(auto-fit, minmax(250px, 1fr));

    gap: 1rem;
    margin: 1.2rem 0 1.5rem;
}

.hub-card {
    display: flex;
    flex-direction: column;
    gap: .7rem;

    min-height: 145px;
    padding: 1.25rem;

    background:
        linear-gradient(
            145deg,
            #f4f7f2 0%,
            #eaf0e9 100%
        );

    border: 1px solid rgba(255,255,255,.2);
    border-radius: 12px;

    box-shadow:
        0 8px 18px rgba(8,15,11,.10);

    color: #173043 !important;
    text-decoration: none !important;
}

.hub-card strong {
    color: #173043;
    font-size: 1.05rem;
}

.hub-card span {
    color: #617069;
    line-height: 1.45;
}

.hub-card:hover {
    border-color: rgba(120,176,64,.70);

    background:
        linear-gradient(
            145deg,
            #f8faf6 0%,
            #eef3ec 100%
        );

    transform: translateY(-1px);
}


/* Old People & access status surfaces */
.warn {
    background: rgba(248,128,40,.10) !important;
    border: 1px solid rgba(248,128,40,.28);
    border-left: 3px solid var(--cc-brand-orange);

    border-radius: 6px;

    color: #f1f3ef !important;
}

.warn strong,
.warn a {
    color: #fff !important;
}

.ok {
    background: #d8f1df !important;
    border-left: 3px solid var(--cc-brand-green);

    color: #20382b !important;
}

.err {
    background: #f8dddd !important;
    border-left: 3px solid #a53d35;

    color: #65231f !important;
}


@media print {
    .cc-shell-signature,
    .hub-card-grid,
    .hub-back-link {
        display: none !important;
    }
}