/*
 * Variant C: Signal HUD.
 * Industrial instrument panel: warm paper surfaces, a black control strip, acid-lime signal fills
 * with safety-orange focus, square geometry with bracket corners, Chakra Petch + IBM Plex.
 */

body.theme-hud {
    --bg: #f1f0eb;
    --surface: #fbfaf7;
    --panel-bg: #fbfaf7;
    --ink: #111111;
    --ink-2: #55534d;
    --ink-3: #96938a;
    --line: #d6d3c9;
    --line-soft: #e6e3da;
    --link: #1a4dff;
    --focus: #ff4f1f;
    --focus-ring: 0 0 0 3px rgba(255, 79, 31, 0.16);

    --accent-2: #ff4f1f;
    --accent-2-ink: #ffffff;
    --accent-2-strong: #d93b0b;

    --header-bg: #111111;
    --header-ink: #f1f0eb;
    --header-line: #111111;
    --header-shadow: inset 0 -3px 0 #c8f031;
    --header-cta-bg: #c8f031;
    --header-cta-bg-hover: #dbff4d;
    --header-cta-ink: #111111;
    --header-cta-line: #c8f031;

    --font-ui: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
    --font-display: 'Chakra Petch', 'IBM Plex Sans', system-ui, sans-serif;
    --font-label: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    --font-num: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    --num-size: 12.5px;
    --display-weight: 600;
    --display-tracking: 0;
    --logo-tracking: 0.08em;
    --logo-case: uppercase;
    --logo-mark: #ffffff url('/images/logo.png') center / 26px 26px no-repeat;
    --logo-clip: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    --logo-radius: 0;

    --radius: 2px;
    --radius-sm: 2px;
    --cut-sm: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
    --cut-lg: none;

    --nav-bg: #e9e7e0;
    --nav-ink: #2a2925;
    --nav-ink-muted: #8a877d;
    --nav-hover: #dedbd1;
    --nav-active-ink: #111111;
    --nav-active-bg: #c8f031;
    --nav-active-bar: #111111;
    --glow-accent: none;
    --glow-soft: none;

    --chip-ink: #111111;
    --chip-bg: #c8f031;
    --chip-line: #111111;

    --field-bg: #ffffff;
    --field-line: #c9c6bb;
    --field-line-hover: #111111;

    --tab-active-ink: #c8f031;
    --tab-active-bg: #111111;
    --tab-active-line: #111111;

    --btn-bg: #fbfaf7;
    --btn-ink: #111111;
    --btn-line: #111111;
    --btn-line-hover: #111111;
    --btn-bg-hover: #ffffff;

    --primary: #c8f031;
    --primary-hover: #dbff4d;
    --primary-ink: #111111;
    --primary-line: #111111;
    --primary-shadow: 3px 3px 0 #111111;

    --secondary: #111111;
    --secondary-hover: #2a2925;
    --secondary-ink: #f1f0eb;
    --secondary-line: #111111;

    --pos: #11823b;
    --neg: #d92d20;
    --star: #ff9d00;

    --th-bg: #111111;
    --row-hover: #f4fbd8;
    --roi-cell: rgba(200, 240, 49, 0.18);

    --overlay: rgba(17, 17, 17, 0.4);
    --shadow-sm: none;
    --shadow: 4px 4px 0 rgba(17, 17, 17, 0.08);
    --shadow-lg: 8px 8px 0 rgba(17, 17, 17, 0.9);

    /* bracket corners on the search panel */
    --panel-deco:
        linear-gradient(#111, #111) top left / 14px 2px no-repeat,
        linear-gradient(#111, #111) top left / 2px 14px no-repeat,
        linear-gradient(#111, #111) bottom right / 14px 2px no-repeat,
        linear-gradient(#111, #111) bottom right / 2px 14px no-repeat;

    background-color: var(--bg);
    background-image: radial-gradient(rgba(17, 17, 17, 0.07) 1px, transparent 1px);
    background-size: 18px 18px;
    background-attachment: fixed;
}

/* the site's chart icon on a white tile, lime underline like the header's */
body.theme-hud .site-header-logo:before {
    width: 32px;
    height: 32px;
    box-shadow: inset 0 -3px 0 #c8f031;
}

body.theme-hud .site-nav-left a.active:before {
    display: none;
}

body.theme-hud .site-nav-left li > div > a,
body.theme-hud .site-nav-left li.child > a {
    font-weight: 500;
}

body.theme-hud .site-nav-left a.active {
    box-shadow: inset 3px 0 0 #111;
}

body.theme-hud .row h2.col-header {
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

body.theme-hud .row h2.col-header:before {
    content: '//';
    color: #ff4f1f;
    font-family: var(--font-label);
    font-size: 0.6em;
    font-weight: 600;
    vertical-align: 0.3em;
    margin-right: 10px;
}

body.theme-hud .grid.grid-open th,
body.theme-hud .grid thead th {
    color: #d8d6cf;
    border-bottom-color: #111;
}

body.theme-hud .grid.grid-sortable thead th[data-sort].sorting-desc,
body.theme-hud .grid.grid-sortable thead th[data-sort].sorting-asc,
body.theme-hud .grid.grid-sortable thead th[data-sort].sorting-desc:after,
body.theme-hud .grid.grid-sortable thead th[data-sort].sorting-asc:after {
    color: #c8f031;
}

body.theme-hud .grid.grid-sortable thead th[data-sort]:after {
    color: #6b6960;
}

body.theme-hud .grid-wrap,
body.theme-hud .grid-container {
    border-color: #111;
}

body.theme-hud .grid.grid-open tbody tr:hover {
    box-shadow: inset 3px 0 0 #111;
}

body.theme-hud .btn-green:hover {
    box-shadow: 1px 1px 0 #111;
    transform: translate(2px, 2px);
}

body.theme-hud .search-type-active a {
    box-shadow: none;
}

body.theme-hud .modal {
    border: 2px solid #111;
}

body.theme-hud .modal-header {
    box-shadow: inset 0 3px 0 #c8f031;
}