/* 20260906-food-production-model-1: icon-free, neutral-grey Food Production. */
/* This layer owns every HTML surface from its first paint. The earlier
   pulse-free script's #292e31 inline palette is additionally rejected by the
   Food-only style-instance guard; other tabs keep their existing behavior. */
@layer astroloop-food-model-surfaces {
    html body .fp-console, html body .fp-console * {
        --fp-surface: transparent;
        background-color: var(--fp-surface) !important;
        background-image: none !important;
        border-color: #505050 !important;
        outline-color: #ddd !important;
        box-shadow: none !important;
        transition: none !important;
        animation: none !important;
        accent-color: #aaa !important;
        scrollbar-color: #777 #282828 !important;
    }
    html body .fp-console::before, html body .fp-console::after,
    html body .fp-console *::before, html body .fp-console *::after {
        background: transparent !important;
        border-color: #505050 !important;
        outline-color: #ddd !important;
        box-shadow: none !important;
        animation: none !important;
        transition: none !important;
    }
    html body .fp-console { --fp-surface: #202020; }
    html body .fp-console .fp-panel { --fp-surface: #262626; }
    html body .fp-console :is(.fp-panel-header, .fp-dialog-header) { --fp-surface: #303030; }
    html body .fp-console :is(.fp-mission-strip, .fp-kpi) { --fp-surface: #252525; }
    html body .fp-console :is(button, .fp-button, input, select, option) { --fp-surface: #353535; }
    html body .fp-console button.fp-kpi { --fp-surface: #252525; }
    html body .fp-console button.fp-link { --fp-surface: transparent; }
    html body .fp-console :is(button, .fp-button):hover { --fp-surface: #444; }
    html body .fp-console button.fp-link:hover { --fp-surface: transparent; }
    html body .fp-console .fp-table th { --fp-surface: #353535; }
    html body .fp-console .fp-table tbody tr:nth-child(even) { --fp-surface: #2b2b2b; }
    html body .fp-console .fp-table tbody tr:hover { --fp-surface: #333; }
    html body .fp-console :is(.fp-dialog, .fp-model-banner) { --fp-surface: #292929; }
    html body .fp-console .fp-dialog::backdrop { background: #000a !important; }
    html body .fp-console .fp-bar { --fp-surface: #1f1f1f; }
    html body .fp-console .fp-bar > span { --fp-surface: #aaa; }
    html body .fp-console select::picker(select) { background: #292929 !important; border-color: #777 !important; }
    html body .fp-console select option:is(:checked, :hover, :focus) { --fp-surface: #555; }
    html body .fp-console :focus-visible { outline: 2px solid #ddd !important; outline-offset: 2px !important; }
    html body .fp-console :is(button, input, select, option, .fp-button) { color: #eee !important; }
}
.fp-model-banner { padding: 8px 10px; border: 1px solid #777; border-left: 3px solid #bbb; margin: 0 0 8px; color: #e0e0e0; font-size: 11px; }
.fp-estimate-label { font-size: 10px; color: #d1d1d1; margin-bottom: 5px; }
.fp-console {
    --fp-bg: #202020;
    --fp-panel: #262626;
    --fp-head: #303030;
    --fp-border: #4d4d4d;
    --fp-text: #ededed;
    --fp-muted: #bcbcbc;
    --fp-good: #91c878;
    --fp-watch: #e2bf65;
    --fp-alert: #e58a82;
    box-sizing: border-box;
    width: 100%; min-width: 0; min-height: 100%;
    padding: 12px;
    background: var(--fp-bg); color: var(--fp-text);
    font: 12px/1.4 Roboto, Arial, sans-serif;
    overflow-x: hidden;
    scrollbar-color: #777 #282828;
    container-name: food-console;
    container-type: inline-size;
}
.fp-console *, .fp-console *::before, .fp-console *::after { box-sizing: border-box; }
.fp-console h1, .fp-console h2, .fp-console h3, .fp-console p { margin: 0; }
.fp-console h1 { font-size: 24px; line-height: 1.2; font-weight: 500; }
.fp-console h2 { font-size: 11px; line-height: 1.3; font-weight: 600; text-transform: uppercase; }
.fp-console h3 { font-size: 13px; font-weight: 500; }
.fp-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 1px 3px 10px; }
.fp-header p { color: var(--fp-muted); margin-top: 5px; font-size: 12px; }
.fp-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.fp-console button, .fp-console select, .fp-console input, .fp-console a.fp-button {
    font: inherit; color: var(--fp-text);
    border: 1px solid #707070; border-radius: 3px;
    background: #353535; padding: 5px 9px; min-height: 29px; max-width: 100%;
    text-decoration: none;
}
.fp-console button, .fp-console a.fp-button { cursor: pointer; }
.fp-console button:hover, .fp-console a.fp-button:hover { background: #444; border-color: #999; }
.fp-console button:disabled { cursor: default; opacity: .6; }
.fp-console input[type="search"]::-webkit-search-decoration,
.fp-console input[type="search"]::-webkit-search-cancel-button,
.fp-console input[type="search"]::-webkit-search-results-button,
.fp-console input[type="search"]::-webkit-search-results-decoration { appearance: none; display: none; }
.fp-console :focus-visible { outline: 2px solid #ddd; outline-offset: 2px; }
.fp-console button.fp-link { min-height: 0; padding: 0; border: 0; background: transparent; text-align: left; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.fp-console button.fp-link:hover { color: #fff; }
.fp-status-line { padding: 5px 3px 8px; font-size: 10px; color: var(--fp-muted); }
.fp-status-line:empty { display: none; }
.fp-mission-strip { display: grid; grid-template-columns: minmax(180px, 1.7fr) repeat(4, minmax(74px, .8fr)) minmax(140px, 1.2fr) minmax(155px, 1.2fr) minmax(95px, .8fr); border: 1px solid var(--fp-border); border-radius: 3px; margin-bottom: 9px; background: #252525; }
.fp-context-cell { padding: 7px 9px; min-width: 0; border-right: 1px solid #444; }
.fp-context-cell:last-child { border-right: 0; }
.fp-context-cell > span { display: block; font-size: 9px; text-transform: uppercase; color: var(--fp-muted); }
.fp-context-cell strong { display: block; font-size: 11px; font-weight: 500; overflow-wrap: anywhere; }
.fp-panel { min-width: 0; background: var(--fp-panel); border: 1px solid var(--fp-border); border-radius: 3px; overflow: hidden; scroll-margin-top: 12px; }
.fp-panel-header { display: flex; justify-content: space-between; align-items: center; gap: 9px; min-height: 28px; padding: 6px 9px; border-bottom: 1px solid #484848; background: var(--fp-head); }
.fp-panel-header > span, .fp-panel-header > small { font-size: 9px; color: var(--fp-muted); }
.fp-panel-header button { font-size: 10px; }
.fp-panel-body { padding: 8px 9px; }
.fp-overview { margin-bottom: 9px; }
.fp-kpi-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; margin-bottom: 9px; border: 1px solid var(--fp-border); border-radius: 3px; overflow: hidden; }
.fp-overview .fp-kpi-grid { border: 0; margin: 0; border-radius: 0; }
.fp-console button.fp-kpi { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; min-height: 87px; padding: 9px 10px; text-align: left; border: 0; border-right: 1px solid #484848; border-radius: 0; background: #252525; }
.fp-console button.fp-kpi:last-child { border-right: 0; }
.fp-console button.fp-kpi:hover { background: #333; }
.fp-kpi-label { font-size: 9px; text-transform: uppercase; color: var(--fp-muted); }
.fp-kpi-value { font-size: 23px; font-weight: 500; line-height: 1.15; overflow-wrap: anywhere; }
.fp-kpi-value[data-empty="true"], .fp-kpi-value.fp-missing { font-size: 14px; font-weight: 400; line-height: 1.8; color: #c5c5c5; }
.fp-kpi-note { font-size: 10px; color: var(--fp-muted); }
.fp-kpi-value[data-empty="true"] + .fp-kpi-note { display: none; }
.fp-grid { display: grid; gap: 9px; margin-bottom: 9px; align-items: start; }
.fp-grid-top, .fp-grid-middle { grid-template-columns: 1.12fr 1.03fr .95fr; }
.fp-grid-lower { grid-template-columns: 1.08fr 1.04fr 1.08fr .85fr; }
.fp-health-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 9px; margin-bottom: 9px; align-items: start; }
.fp-table-wrap { width: 100%; overflow-x: auto; scrollbar-color: #777 #282828; }
.fp-console .fp-table { width: 100%; border-collapse: collapse; table-layout: auto; font-size: 10px; color: var(--fp-text); background: transparent; }
.fp-console .fp-table th { text-align: left; font-weight: 500; font-size: 9px; text-transform: uppercase; background: #353535; color: #d4d4d4; }
.fp-console .fp-table th, .fp-console .fp-table td { padding: 5px 8px; line-height: 1.35; border-right: 1px solid #424242; border-bottom: 1px solid #424242; vertical-align: top; white-space: normal; overflow-wrap: break-word; word-break: normal; }
.fp-console .fp-table th:last-child, .fp-console .fp-table td:last-child { border-right: 0; }
.fp-console .fp-table tbody tr:last-child td { border-bottom: 0; }
.fp-console .fp-table tbody tr:nth-child(even) { background: #2b2b2b; }
.fp-console .fp-table tbody tr[data-action]:hover { background: #383838; }
.fp-console .fp-table td small { display: block; font-size: 9px; color: var(--fp-muted); margin-top: 2px; }
.fp-number { text-align: right; font-variant-numeric: tabular-nums; }
.fp-status[data-status="nominal"], .fp-status[data-status="good"], .fp-status[data-status="running"], .fp-status[data-status="ready"] { color: var(--fp-good); }
.fp-status[data-status="warning"], .fp-status[data-status="watch"], .fp-status[data-status="caution"], .fp-status[data-status="paused"] { color: var(--fp-watch); }
.fp-status[data-status="critical"], .fp-status[data-status="fault"], .fp-status[data-status="error"] { color: var(--fp-alert); }
.fp-status[data-status="unknown"], .fp-status[data-status="not-reported"] { color: #c3c3c3; }
.fp-empty { padding: 12px 10px; color: #bdbdbd; font-size: 11px; line-height: 1.6; }
.fp-note { color: var(--fp-muted); font-size: 9px; line-height: 1.45; margin-top: 5px; }
.fp-panel > .fp-note { padding: 0 9px 8px; }
.fp-metric-list { display: grid; gap: 5px; }
.fp-metric-row { display: grid; grid-template-columns: minmax(96px, 1.25fr) minmax(54px, .7fr) minmax(60px, 1fr); gap: 7px; align-items: center; min-height: 23px; font-size: 10px; }
.fp-metric-label { min-width: 0; }
.fp-metric-value { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fp-metric-source, .fp-metric-range { font-size: 9px; color: var(--fp-muted); }
.fp-metric-row .fp-note { grid-column: 1 / -1; margin-top: -3px; }
.fp-metrics { margin: 0; display: grid; gap: 0; }
.fp-metric { display: grid; grid-template-columns: minmax(110px, 1.15fr) minmax(75px, 1fr); align-items: start; gap: 4px 9px; padding: 5px 0; border-bottom: 1px solid #3b3b3b; font-size: 10px; }
.fp-metric:last-child { border-bottom: 0; }
.fp-metric dt { color: #dedede; }
.fp-metric dd { margin: 0; min-width: 0; font-variant-numeric: tabular-nums; }
.fp-metric dd.fp-note { grid-column: 1 / -1; margin: -2px 0 0; font-size: 9px; }
.fp-metric[data-kind="not-reported"] dd.fp-note { display: none; }
.fp-metric[data-kind="not-reported"] { min-height: 25px; }
.fp-metric dd small { display: block; font-size: 9px; color: var(--fp-muted); line-height: 1.35; }
.fp-toolbar { display: flex; flex-wrap: wrap; gap: 7px; align-items: end; padding: 6px 9px; }
.fp-toolbar label { display: flex; flex-direction: column; gap: 3px; font-size: 10px; color: var(--fp-muted); min-width: 0; }
.fp-trend-chart { display: block; width: 100%; height: 180px; }
.fp-trend-chart text { fill: #ccc; font: 10px Roboto, Arial, sans-serif; }
.fp-trend-summary { display: flex; flex-wrap: wrap; gap: 5px 10px; font-size: 9px; color: var(--fp-muted); padding: 4px 9px; }
.fp-trend-legend { display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 9px; }
.fp-trend-legend button { font-size: 10px; }
.fp-source-summary { padding: 6px 9px; font-size: 10px; color: var(--fp-muted); }
.fp-dialog-body { padding: 12px; }
.fp-dialog-body .fp-details { padding: 0; }
.fp-bar { height: 10px; width: 100%; min-width: 35px; border: 1px solid #525252; background: #1f1f1f; }
.fp-bar > span { display: block; height: 100%; max-width: 100%; background: #93bb85; }
.fp-bar[data-kind="design"] > span, .fp-bar[data-kind="calculated"] > span { background: #b5b5b5; }
.fp-bar[data-empty="true"] { border-style: dashed; background: transparent; }
.fp-bar[data-empty="true"] > span { width: 0 !important; }
.fp-chart-wrap { min-width: 0; width: 100%; padding: 4px 0; }
.fp-trend { display: block; width: 100%; height: 180px; overflow: visible; }
.fp-trend-chart .fp-trend { height: 100%; }
.fp-trend text { fill: #ccc; font: 10px Roboto, Arial, sans-serif; }
.fp-trend .fp-axis, .fp-trend .fp-gridline { stroke: #505050; stroke-width: 1; }
.fp-trend .fp-trend-line { fill: none; stroke-width: 2; }
.fp-chart-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 11px; font-size: 10px; color: #ddd; }
.fp-chart-legend button { font-size: 10px; }
.fp-footer { display: grid; grid-template-columns: 1fr; gap: 9px; }
.fp-footer .fp-actions { padding: 8px 9px; }
.fp-footer .fp-note { padding: 0 9px 8px; }
.fp-provenance { display: grid; grid-template-columns: max-content 1fr; gap: 4px 10px; font-size: 10px; }
.fp-provenance dt { color: var(--fp-muted); }
.fp-provenance dd { margin: 0; overflow-wrap: anywhere; }
.fp-console .fp-dialog { padding: 0; border: 1px solid #777; border-radius: 4px; width: min(610px, calc(100vw - 30px)); max-height: calc(100vh - 40px); background: #292929; color: var(--fp-text); box-shadow: 0 10px 35px #0008; overflow: auto; }
.fp-dialog::backdrop { background: rgba(0, 0, 0, .65); }
.fp-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-bottom: 1px solid #555; background: #333; }
.fp-dialog-header h2 { text-transform: none; font-size: 15px; }
.fp-details { display: grid; gap: 9px; padding: 14px; margin: 0; font-size: 12px; }
.fp-details > div { display: grid; grid-template-columns: minmax(110px, .6fr) minmax(0, 1.4fr); gap: 9px 14px; }
.fp-details dt { color: #bbb; }
.fp-details dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fp-dialog .fp-empty { padding: 14px; }

/* Direct important controls paint prevents the old shared navy/focus styles
   from flashing before the already-installed global neutralizer runs. */
@layer astroloop-food-console-controls {
    html body .fp-console :is(button, select, input, .fp-button) {
        border-color: #747474 !important;
        box-shadow: none !important;
        outline-color: #ddd !important;
        transition: none !important;
    }
    html body .fp-console select, html body .fp-console input {
        background: #292929 !important;
        color: #eee !important;
        accent-color: #aaa !important;
        color-scheme: dark;
    }
    html body .fp-console select { appearance: none !important; }
    html body .fp-console :is(button, select, input, .fp-button):focus-visible {
        outline: 2px solid #ddd !important;
        outline-offset: 2px !important;
    }
    html body .fp-console select option { background: #292929 !important; color: #eee !important; }
    html body .fp-console select option:is(:checked, :hover, :focus) { background: #555 !important; color: #fff !important; }
    @supports (appearance: base-select) {
        html body .fp-console select, html body .fp-console select::picker(select) { appearance: base-select !important; }
        html body .fp-console select::picker(select) { background: #292929 !important; color: #eee !important; border: 1px solid #777 !important; box-shadow: 0 4px 12px #0006 !important; max-height: 60vh; overflow-y: auto; }
        html body .fp-console select::picker-icon, html body .fp-console select option::checkmark { display: none; }
    }
}

@media (max-width: 1350px) {
    .fp-console { padding: 9px; }
    .fp-mission-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .fp-context-cell:nth-child(4) { border-right: 0; }
    .fp-context-cell:nth-child(-n+4) { border-bottom: 1px solid #444; }
    .fp-kpi-value { font-size: 21px; }
    .fp-grid-lower { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fp-metric-row { grid-template-columns: minmax(80px, 1.2fr) minmax(45px, .8fr) minmax(45px, .9fr); gap: 5px; }
}
@media (max-width: 1000px) {
    .fp-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .fp-console button.fp-kpi:nth-child(4) { border-right: 0; }
    .fp-console button.fp-kpi:nth-child(-n+4) { border-bottom: 1px solid #484848; }
    .fp-grid-top, .fp-grid-middle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fp-grid-top > :last-child, .fp-grid-middle > :last-child { grid-column: 1 / -1; }
    .fp-footer { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .fp-header { flex-direction: column; }
    .fp-header h1 { font-size: 22px; }
    .fp-grid-top, .fp-grid-middle, .fp-grid-lower, .fp-health-grid { grid-template-columns: 1fr; }
    .fp-mission-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fp-context-cell:nth-child(even) { border-right: 0; }
    .fp-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fp-console button.fp-kpi { min-height: 77px; border-bottom: 1px solid #484848; }
    .fp-metric-row { grid-template-columns: minmax(100px, 1.2fr) minmax(60px, .8fr) minmax(60px, 1fr); }
}

/* Open MCT's Browse and Inspect panes change the available page width without
   changing the browser viewport. Reflow against the actual content pane too. */
@container food-console (max-width: 1200px) {
    .fp-mission-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .fp-context-cell:nth-child(4) { border-right: 0; }
    .fp-context-cell:nth-child(-n+4) { border-bottom: 1px solid #444; }
    .fp-grid-lower { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container food-console (max-width: 960px) {
    .fp-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .fp-console button.fp-kpi:nth-child(4) { border-right: 0; }
    .fp-console button.fp-kpi:nth-child(-n+4) { border-bottom: 1px solid #484848; }
    .fp-grid-top, .fp-grid-middle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fp-grid-top > :last-child, .fp-grid-middle > :last-child { grid-column: 1 / -1; }
}
@container food-console (max-width: 620px) {
    .fp-header { flex-direction: column; }
    .fp-grid-top, .fp-grid-middle, .fp-grid-lower, .fp-health-grid { grid-template-columns: minmax(0, 1fr); }
    .fp-mission-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fp-context-cell:nth-child(even) { border-right: 0; }
    .fp-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fp-console button.fp-kpi { min-height: 77px; border-bottom: 1px solid #484848; }
}