:root { --navy-0: #0F1628; --navy-1: #1B2540; --panel: #1B2540; --panel-2: #243150; --ink: #FFFFFF; --muted: #848B9B; --line: #2A3550; --amber: #C6AF5C; --gold: #C6AF5C; --green: #3FA34D; --red: #C0473A; color-scheme: dark; } * { box-sizing: border-box; } html, body { max-width: 100%; overflow-x: hidden; } body { /* Fill the viewport and let MAIN scroll, so the header and footer stay static and the scrollbar sits above the footer (the footer never scrolls away). */ margin: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: var(--navy-0); color: var(--ink); font-family: 'Helvetica Neue', Arial, sans-serif; } a { color: var(--gold); } /* ---- Header ---- */ .brandwrap { display: flex; align-items: center; gap: .85rem; min-width: 0; } /* Tagline fills the leftover of the logo cell and centers in it, sitting between the wordmark and the centered classification pill. */ .brand-tag { flex: 1; text-align: center; color: var(--muted); font-size: .8rem; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1100px) { .brand-tag { display: none; } } header.appbar { flex: 0 0 auto; /* static at the top; main scrolls below it */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: .5rem 1.25rem; background: linear-gradient(180deg, var(--navy-1), var(--navy-0)); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; } .brand { display: flex; align-items: center; gap: .55rem; justify-self: start; text-decoration: none; } .brand .emblem { height: 38px; width: auto; display: block; margin-left: .5rem; transform-origin: center; animation: mf-spin 0.9s ease-out 1; } @keyframes mf-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .brand .wm { font-weight: 800; font-size: 1.4rem; letter-spacing: .01em; line-height: 1; } .brand .wm .m { color: #c4ccd4; } .brand .wm .f { background: linear-gradient(180deg, var(--gold), var(--amber)); -webkit-background-clip: text; background-clip: text; color: transparent; } .pill { justify-self: center; text-transform: uppercase; font-weight: 700; letter-spacing: .06em; color: #fff; border-radius: 999px; padding: .25rem .9rem; line-height: 1.1; box-shadow: 0 1px 3px rgba(0,0,0,.25); background: #555; white-space: nowrap; font-size: .8rem; } .account { justify-self: end; display: flex; align-items: center; gap: .75rem; min-height: 38px; } .cyclebar { display: flex; align-items: center; gap: .4rem; padding-right: .75rem; margin-right: .25rem; border-right: 1px solid var(--line); } .cyclebar-label { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; } .cycle-select { padding: .25rem .5rem; font-size: .82rem; max-width: 12rem; } .cycle-new { padding: .25rem .5rem; font-weight: 700; line-height: 1; } .mf-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(6,12,20,.6); } .mf-modal-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem; width: min(92vw, 24rem); box-shadow: 0 12px 40px rgba(0,0,0,.5); } .mf-modal-card h3 { margin: 0 0 .35rem; font-size: 1.05rem; } .mf-modal-sub { color: var(--muted); font-size: .8rem; margin: 0 0 .85rem; line-height: 1.35; } .mf-modal-card .field { margin-bottom: .65rem; } .mf-modal-card .field input { width: 100%; } .mf-check { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--muted); margin: .15rem 0 .25rem; } .mf-check input { width: auto; } .mf-modal-msg { color: var(--gold); font-size: .8rem; min-height: 1rem; margin: .25rem 0 0; } .mf-modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .75rem; } .who { line-height: 1.15; display: flex; flex-direction: column; text-align: left; } .who .name { font-weight: 700; font-size: .9rem; } .who .role { font-size: .72rem; color: var(--muted); } /* Account dropdown (user menu: product overview, version, logout) */ .acct { position: relative; } .acct-btn { display: flex; align-items: center; gap: .5rem; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: .3rem .6rem; cursor: pointer; font-family: inherit; } .acct-btn:hover { border-color: #C6AF5C55; } .acct-btn .caret { color: var(--muted); font-size: .8rem; } .acct-btn .acct-ava { width: 28px; height: 28px; flex: none; border-radius: 50%; background: #C6AF5C1a; border: 1px solid #C6AF5C44; display: flex; align-items: center; justify-content: center; } .acct-btn .acct-ava svg { width: 16px; height: 16px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .acct-drop { position: absolute; right: 0; top: calc(100% + .35rem); min-width: 15rem; z-index: 60; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: .35rem; box-shadow: 0 8px 24px rgba(0,0,0,.45); } .acct-meta { padding: .45rem .6rem .55rem; border-bottom: 1px solid var(--line); margin-bottom: .25rem; } .acct-meta-name { display: block; font-weight: 600; font-size: .88rem; color: var(--ink); } .acct-meta-role { display: block; font-size: .78rem; color: var(--gold); margin-top: .18rem; line-height: 1.3; } .acct-meta-email { display: block; font-size: .72rem; color: var(--muted); margin-top: .12rem; } .acct-item { display: block; padding: .45rem .6rem; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: .88rem; } .acct-item:hover { background: #C6AF5C1a; } .acct-item.danger { color: var(--gold); } .acct-ver { padding: .4rem .6rem; color: var(--muted); font-size: .75rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: .25rem 0; } .acct-navhdr { padding: .35rem .6rem .2rem; color: var(--muted); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; } .acct-item.nav { display: flex; align-items: center; gap: .6rem; color: #c7cdd6; } .acct-item.nav .ai-ic { display: inline-flex; width: 1.05rem; color: var(--muted); } .acct-item.nav .ai-ic svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; } .acct-item.nav:hover { color: var(--ink); } .acct-item.nav.active { color: var(--gold); background: #C6AF5C12; } .acct-item.nav.active .ai-ic { color: var(--gold); } .acct-sep { height: 1px; background: var(--line); margin: .35rem .2rem; } .appbar-spacer { min-width: 0; } /* ---- Buttons / inputs ---- */ .btn { background: transparent; color: var(--gold); border: 1px solid #C6AF5C55; padding: .4rem .8rem; border-radius: 6px; font-size: .82rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; } .btn:hover { background: #C6AF5C1a; } .btn.primary { background: linear-gradient(180deg, var(--gold), var(--amber)); color: #1b1b1b; border: none; font-weight: 700; } .btn.danger { color: var(--red); border-color: #C0473A66; } .btn.danger:hover { background: #C0473A1a; } .btn:disabled { opacity: .45; cursor: not-allowed; } .pginfo.hint-warn { color: var(--gold); font-weight: 600; } /* Term-sheet structured form editor (label/value rows under section headers). */ .ts-form { max-height: 48vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: .6rem .8rem; background: var(--panel-2); } .ts-form .ts-sec { font-weight: 700; color: var(--gold); text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; margin: .8rem 0 .35rem; border-bottom: 1px solid var(--line); padding-bottom: .2rem; } .ts-form .ts-sec:first-child { margin-top: 0; } .ts-form .ts-row { display: flex; align-items: center; gap: .6rem; margin: .25rem 0; } .ts-form .ts-lab { flex: 0 0 16rem; font-size: .82rem; color: var(--muted); } .ts-form .ts-inp { flex: 1; } .btn.primary:hover { filter: brightness(1.05); } .btn:disabled { opacity: .5; cursor: not-allowed; } input, select { background: var(--panel-2); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: .4rem .6rem; font-size: .9rem; font-family: inherit; } /* ---- Main / layout ---- */ main { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: .4rem clamp(1rem, 4vw, 3rem) 1rem; width: 100%; max-width: 100%; min-width: 0; } .appbar > * { min-width: 0; } .account { overflow: visible; } .table-scroll { max-width: 100%; } .title-row { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .6rem; flex-wrap: wrap; } .title-row h1 { font-size: 1.1rem; margin: 0; } .title-row .sub { color: var(--muted); font-size: .9rem; } .title-row .spacer { flex: 1; } /* ---- Cards ---- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .7rem; } .card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 10px; padding: .95rem 1rem; } .card .k { font-size: 1.7rem; font-weight: 800; color: var(--gold); } .card .l { color: var(--muted); font-size: .68rem; margin-top: .1rem; text-transform: uppercase; letter-spacing: .05em; } .card.accent { border-color: #C6AF5C66; } /* Dashboard fills the viewport: the "At a glance" charts absorb the remaining height, so they're as large as possible without ever pushing the page into a scrollbar. */ @media (min-width: 900px) { main.dash { display: flex; flex-direction: column; min-height: calc(100vh - 104px); } main.dash > section.block { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 260px; } main.dash > section.block .charts { flex: 1; grid-template-rows: 1fr; align-items: stretch; } main.dash > section.block .chart-card { display: flex; flex-direction: column; height: 100%; } main.dash > section.block .chart-card .wrap { flex: 1; height: auto !important; min-height: 220px; } } /* ---- Sections / tables ---- */ section.block { margin-top: 1.75rem; } section.block h2 { font-size: 1rem; margin: 0 0 .6rem; } .table-scroll { max-height: 38vh; overflow: auto; border: 1px solid var(--line); border-radius: 10px; } /* Auto-fit data-grid pages: the grid consumes the leftover viewport height, so it's always full and the page never scrolls — no per-page vh tuning, adapts to charts shown/hidden. Handles #grid as a direct child of main OR wrapped in a section.block. */ main.grid-page { display: flex; flex-direction: column; } main.grid-page > #grid, main.grid-page > .block:has(> #grid) { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } main.grid-page > .block:has(> #grid) > #grid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } main.grid-page #grid .table-scroll { flex: 1 1 auto; max-height: none; min-height: 140px; } thead th.sortable { cursor: pointer; user-select: none; } thead th.sortable:hover { color: var(--ink); } .sortarrow { color: var(--gold); } /* Editable-grid: drag handle + cycle drop-zones (drag rows to another POM cycle) */ .rv-table td.rv-gripcell { text-align: center; padding-left: .3rem; padding-right: .3rem; } .rv-table .rv-grip { cursor: grab; color: var(--muted); user-select: none; font-size: 1rem; } .rv-table .rv-grip:active { cursor: grabbing; } .rv-table td.rv-movecell { text-align: center; padding-left: .2rem; padding-right: .2rem; } .rv-table .rv-rowmove { padding: 0 .25rem; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--muted); font-size: 1.05rem; font-weight: 700; line-height: 1.2; cursor: pointer; vertical-align: middle; } .rv-table .rv-rowmove:hover, .rv-table .rv-rowmove:focus { background: var(--panel-2); color: var(--ink); border-color: var(--line); outline: none; } .rv-table tr.rv-dragging { opacity: .45; } .rv-table thead th { cursor: pointer; } .rv-table thead th .sortarrow { color: var(--gold); font-size: .8rem; } /* Show/hide columns dropdown for the editable grid. */ .mf-colpanel { position: absolute; z-index: 60; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .65rem; display: grid; gap: .3rem; box-shadow: 0 8px 24px rgba(0,0,0,.5); max-height: 60vh; overflow: auto; } .mf-colpanel label { display: flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--ink); white-space: nowrap; cursor: pointer; } .rv-dropzones { display: inline-flex; align-items: center; gap: .35rem; flex-wrap: wrap; } .rv-dz-label { color: var(--muted); font-size: .78rem; } .rv-chip { display: inline-flex; align-items: center; padding: .25rem .6rem; border-radius: 999px; border: 1px dashed var(--line); color: var(--muted); font-size: .8rem; white-space: nowrap; transition: all .12s ease; } .rv-chip.armed { border-color: var(--gold); color: var(--ink); } .rv-chip.over { background: var(--gold); border-style: solid; border-color: var(--gold); color: #1b1b1b; font-weight: 700; } /* Right-click "move row" menu — accessible alternative to drag-and-drop. */ .rv-ctxmenu { position: absolute; z-index: 200; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .3rem; min-width: 11rem; max-height: 60vh; overflow-y: auto; box-shadow: 0 10px 28px rgba(0,0,0,.55); } .rv-ctxmenu .rv-ctxhdr { position: sticky; top: 0; background: var(--panel); } .rv-ctxmenu[hidden] { display: none; } .rv-ctxhdr { padding: .35rem .55rem .4rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: .25rem; } .rv-ctxitem { display: block; width: 100%; text-align: left; padding: .45rem .6rem; border: none; border-radius: 6px; background: transparent; color: var(--ink); font-size: .86rem; cursor: pointer; white-space: nowrap; } .rv-ctxitem:not(:disabled):hover, .rv-ctxitem:not(:disabled):focus { background: var(--gold); color: #1b1b1b; outline: none; } .rv-ctxitem:disabled { opacity: .4; cursor: default; } /* Visible ⋮ "move" affordance auto-placed on each board card (top-right corner). */ .rv-kebab { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 26px; height: 26px; padding: 0; line-height: 22px; text-align: center; font-size: 18px; font-weight: 700; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; z-index: 2; } .rv-kebab:hover, .rv-kebab:focus { background: var(--panel-2); color: var(--ink); border-color: var(--line); outline: none; } .table-scroll table { border: none; border-radius: 0; } table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } th, td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); font-size: .86rem; } th { background: var(--panel-2); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-size: .72rem; } tr:last-child td { border-bottom: none; } thead th { position: sticky; top: 0; z-index: 1; } .pager { display: flex; align-items: center; gap: 1rem; margin-top: .6rem; flex-wrap: wrap; } .pager .pgleft { display: flex; align-items: center; gap: .5rem; } .pager .pgright { display: flex; align-items: center; gap: 1rem; margin-left: auto; flex-wrap: wrap; } .pager .pginfo { color: var(--muted); font-size: .8rem; } .pginfo { color: var(--muted); font-size: .84rem; line-height: 1.35; } .pager .pgsize { color: var(--muted); font-size: .8rem; display: flex; align-items: center; gap: .4rem; } .pager .pgselect { padding: .2rem .4rem; } .pager .pgnav { display: flex; align-items: center; gap: .5rem; } .pager .pgbtn { padding: .2rem .55rem; } /* Per-column filter funnel + popup (GridSquare-style) */ thead th .funnel { display: inline-flex; align-items: center; margin-left: .35rem; cursor: pointer; opacity: .45; vertical-align: middle; } thead th .funnel:hover { opacity: 1; color: var(--ink); } thead th .funnel.active { opacity: 1; color: var(--gold); } .mf-filterpop { position: absolute; z-index: 60; display: none; min-width: 12.5rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: .6rem; box-shadow: 0 8px 24px rgba(0,0,0,.45); } .mf-filterpop .mf-fp-row { margin-bottom: .5rem; } .mf-filterpop select, .mf-filterpop input { width: 100%; } .mf-filterpop .mf-fp-actions { display: flex; justify-content: flex-end; gap: .5rem; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } .tag { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; } .p-Critical { background: #C8102E33; color: #ff8a8a; } .p-High { background: #C6AF5C33; color: var(--gold); } .p-Medium { background: #2f6db033; color: #9cc4ee; } .p-Low { background: #4a5a6a33; color: var(--muted); } .empty { color: var(--muted); padding: 1rem; } /* ---- One-line "Load data" toolbar + on-demand panels ---- */ .loadbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; } .loadbar-label { color: var(--muted); font-size: .85rem; } .loadbody { margin-top: .75rem; } /* ---- COA builder ---- */ .builder-controls { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; } .field { display: flex; flex-direction: column; gap: .25rem; } .field label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin: 1rem 0; } .bar { height: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-top: .5rem; } .bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--gold)); transition: width .5s ease, background .3s ease; } .bar.over > span { background: var(--red); } @keyframes mf-flash { from { background: rgba(63,191,127,.35); } to { background: transparent; } } tr.mf-flash > td { animation: mf-flash .9s ease-out; } tr.funded td:first-child { border-left: 3px solid var(--green); } tr.unfunded td { color: var(--muted); } tr.unfunded td:first-child { border-left: 3px solid var(--line); } .dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .4rem; } .dot.green { background: var(--green); } .dot.gray { background: #4a5a6a; } /* ---- Drag-and-drop COA board ---- */ .coa-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; } @media (max-width: 880px) { .coa-board { grid-template-columns: 1fr; } } .coa-col { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; min-height: 180px; } .coa-col > header { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; border-bottom: 1px solid var(--line); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .coa-col > header .pill { margin-left: auto; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem; font-size: .72rem; color: var(--ink); } .coa-col .lane-cap { font-size: .72rem; color: var(--muted); text-transform: none; letter-spacing: 0; } .coa-col[data-lane="force"] { border-top: 3px solid var(--green); } .coa-col[data-lane="auto"] { border-top: 3px solid var(--amber); } .coa-col[data-lane="exclude"] { border-top: 3px solid #4a5a6a; } .coa-drop { flex: 1; padding: .6rem; display: flex; flex-direction: column; gap: .5rem; min-height: 90px; } .coa-drop.drag-over { background: #C6AF5C12; outline: 2px dashed #C6AF5C66; outline-offset: -6px; border-radius: 8px; } .coa-drop .lane-empty { color: var(--muted); font-size: .8rem; text-align: center; padding: 1.2rem .5rem; } .coa-card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .65rem; cursor: grab; transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease; } .coa-card:hover { border-color: #C6AF5C66; } .coa-card:active { cursor: grabbing; } .coa-card.dragging { opacity: .5; transform: scale(.98); } .coa-card .ttl { font-size: .86rem; font-weight: 600; display: flex; gap: .4rem; align-items: baseline; } .coa-card .grip { color: #5f7385; font-size: .9rem; cursor: grab; } .coa-card .pgm { color: var(--muted); font-size: .76rem; margin: .2rem 0 .35rem; } .coa-card .meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .76rem; color: var(--muted); } .coa-card .meta .num { color: var(--ink); font-weight: 600; } .coa-card .outcome { margin-left: auto; font-weight: 700; font-size: .74rem; } .coa-card .outcome.green { color: var(--green); } .coa-card .outcome.gray { color: #7e8c9a; } .coa-card.is-funded { border-left: 3px solid var(--green); } .coa-card.is-unfunded { border-left: 3px solid #4a5a6a; } /* ---- Approvals Kanban ---- */ .kanban { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: start; } @media (max-width: 980px) { .kanban { grid-template-columns: repeat(2, 1fr); } } .kan-col { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; min-height: 160px; } .kan-col > header { display: flex; align-items: center; gap: .5rem; padding: .65rem .85rem; border-bottom: 1px solid var(--line); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .kan-col > header .pill { margin-left: auto; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem; font-size: .72rem; color: var(--ink); } .kan-col[data-status="Draft"] { border-top: 3px solid #5f7385; } .kan-col[data-status="UnderReview"] { border-top: 3px solid var(--amber); } .kan-col[data-status="Approved"] { border-top: 3px solid var(--green); } .kan-col[data-status="Rejected"] { border-top: 3px solid var(--red); } .kan-drop { flex: 1; padding: .55rem; display: flex; flex-direction: column; gap: .5rem; min-height: 80px; } .kan-drop.drag-over { background: #C6AF5C12; outline: 2px dashed #C6AF5C66; outline-offset: -6px; border-radius: 8px; } .kan-drop .lane-empty { color: var(--muted); font-size: .8rem; text-align: center; padding: 1rem .5rem; } .kan-card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 10px; padding: .5rem .6rem; cursor: grab; } .kan-card:hover { border-color: #C6AF5C66; } .kan-card.dragging { opacity: .5; } .kan-card .ttl { font-size: .84rem; font-weight: 600; } .kan-card .meta { display: flex; gap: .4rem; align-items: center; margin-top: .35rem; flex-wrap: wrap; font-size: .74rem; color: var(--muted); } /* ---- Drag-to-rank list ---- */ .rank-list { display: flex; flex-direction: column; gap: .5rem; max-width: 820px; } .rank-item { display: flex; align-items: center; gap: .75rem; background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem; cursor: grab; } .rank-item:hover { border-color: #C6AF5C66; } .rank-item.dragging { opacity: .5; } .rank-item.drop-before { box-shadow: 0 -3px 0 var(--gold); } .rank-item.drop-after { box-shadow: 0 3px 0 var(--gold); } .rank-item .badge { width: 2rem; height: 2rem; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 8px; font-weight: 800; background: #C6AF5C1a; border: 1px solid #C6AF5C33; color: var(--gold); } .rank-item .grip { color: #5f7385; font-size: 1rem; } .rank-item .body { flex: 1; } .rank-item .body .t { font-size: .9rem; font-weight: 600; } .rank-item .body .s { font-size: .76rem; color: var(--muted); } .rank-item .rank-actions { display: inline-flex; gap: .3rem; flex: 0 0 auto; } .rank-item .rank-actions .pgbtn { padding: .15rem .45rem; cursor: pointer; } /* ---- Visual ZBT builder ---- */ .zbt-build { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; } @media (max-width: 880px) { .zbt-build { grid-template-columns: 1fr; } } .pe-grid { display: grid; grid-template-columns: 1fr; gap: .5rem; max-height: 38vh; overflow: auto; padding: .25rem; } /* Fit the viewport: the Programs/package row flexes into the space left below the chart, and the program list fills its column (scrolling internally) so the page never scrolls. */ main.zbt-page { display: flex; flex-direction: column; } main.zbt-page > .zbt-build { flex: 1 1 auto; min-height: 0; align-items: stretch; } main.zbt-page > .zbt-build > section.block { min-height: 0; display: flex; flex-direction: column; } main.zbt-page .pe-grid { flex: 1 1 auto; min-height: 120px; max-height: none; } .pe-card { background: linear-gradient(180deg, var(--panel-2), var(--panel)); border: 1px solid var(--line); border-radius: 10px; padding: .55rem .7rem; cursor: grab; } .pe-card[data-role="donor"] { cursor: grab; } .pe-card.dragging { opacity: .5; } .pe-card.drag-over { outline: 2px dashed #3fbf7f88; outline-offset: -5px; } .pe-card .c { font-weight: 700; font-size: .86rem; } .pe-card .n { color: var(--muted); font-size: .76rem; } .pe-card .delta { float: right; font-weight: 700; font-size: .82rem; } .pe-card .delta.pos { color: var(--green); } .pe-card .delta.neg { color: var(--red); } .meter { background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; height: 14px; overflow: hidden; margin: .5rem 0; } .meter > span { display: block; height: 100%; background: linear-gradient(90deg, var(--amber), var(--gold)); width: 0; } .balance-ok { color: var(--green); font-weight: 700; } .balance-bad { color: var(--red); font-weight: 700; } /* ---- Treemap ---- */ .tm-bread { display: flex; gap: .4rem; align-items: center; color: var(--muted); font-size: .85rem; margin-bottom: .6rem; flex-wrap: wrap; } .tm-bread a { color: var(--gold); cursor: pointer; text-decoration: none; } .tm-bread .sep { color: #5f7385; } .treemap { position: relative; width: 100%; height: 62vh; min-height: 380px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; } .tm-tile { position: absolute; border: 2px solid var(--navy-0); border-radius: 6px; overflow: hidden; cursor: pointer; transition: filter .1s ease; padding: .35rem .45rem; box-sizing: border-box; } .tm-tile:hover { filter: brightness(1.12); } .tm-tile .tl { font-size: .78rem; font-weight: 700; color: #0c151f; line-height: 1.1; word-break: break-word; } .tm-tile .tv { font-size: .72rem; color: #0c151fcc; margin-top: .15rem; } /* ---- Sankey ---- */ .sankey-wrap { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: .5rem; overflow-x: auto; } .sankey-node rect { rx: 3; } .sankey-link { fill: none; opacity: .45; transition: opacity .12s ease; } .sankey-link:hover { opacity: .8; } .sankey-label { fill: var(--ink); font-size: 11px; } .sankey-amt { fill: var(--muted); font-size: 10px; } /* ---- Hub tiles ---- */ .welcome { margin-bottom: 1.25rem; } .welcome .hi { font-size: 1.5rem; font-weight: 800; } .welcome .sub { color: var(--muted); margin-top: .15rem; } /* Fixed-width, left-aligned tiles so every tile is the SAME size regardless of how many are in a tab. */ .tiles { display: grid; grid-template-columns: repeat(auto-fill, 230px); gap: .85rem; justify-content: start; } .tile-group { margin: 1.5rem 0 .6rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); display: flex; align-items: center; gap: .6rem; } .tile-group::after { content: ""; flex: 1; height: 1px; background: var(--line); } .tile-group:first-of-type { margin-top: .4rem; } .flowhint { color: var(--muted); font-size: .9rem; margin: .2rem 0 .4rem; } .flowhint strong { color: var(--gold); font-weight: 600; } .tile { display: flex; flex-direction: column; gap: .35rem; padding: .8rem .9rem; min-height: 178px; border: 1px solid var(--line); border-radius: 12px; position: relative; background: linear-gradient(180deg, var(--panel-2), var(--panel)); text-decoration: none; color: var(--ink); transition: transform .12s ease, border-color .12s ease; } .tile:hover { border-color: #C6AF5C66; transform: translateY(-2px); } /* Tiles rise + fade in with a slight stagger on load */ @keyframes mf-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .tiles .tile { animation: mf-rise .4s ease-out both; } .tiles .tile:nth-child(1) { animation-delay: .03s; } .tiles .tile:nth-child(2) { animation-delay: .06s; } .tiles .tile:nth-child(3) { animation-delay: .09s; } .tiles .tile:nth-child(4) { animation-delay: .12s; } .tiles .tile:nth-child(5) { animation-delay: .15s; } .tiles .tile:nth-child(6) { animation-delay: .18s; } .tiles .tile:nth-child(7) { animation-delay: .21s; } .tiles .tile:nth-child(8) { animation-delay: .24s; } .tiles .tile:nth-child(9) { animation-delay: .27s; } .tiles .tile:nth-child(n+10) { animation-delay: .30s; } @media (prefers-reduced-motion: reduce) { .tiles .tile { animation: none; } } .tile.soon { opacity: .65; pointer-events: none; } /* Feature-flagged "Labs" tiles: hidden unless Features:Labs is enabled (body.labs-on). */ .lab-only { display: none; } body.labs-on .lab-only { display: flex; } .admin-only { display: none; } body.admin-on .admin-only { display: flex; } .tile .ic { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: #C6AF5C1a; border: 1px solid #C6AF5C33; } .tile .ic svg { width: 18px; height: 18px; stroke: var(--gold); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .tile h3 { margin: .15rem 0 0; font-size: .96rem; } .tile p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.3; } .tile .meta { margin-top: auto; padding-top: .3rem; } .tile .count { font-size: 1.25rem; font-weight: 800; color: var(--gold); } .tile .count small { font-size: .8rem; color: var(--muted); font-weight: 400; margin-left: .25rem; } .badge-soon { position: absolute; top: .8rem; right: .8rem; font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; background: #4a5a6a33; color: var(--muted); padding: .15rem .45rem; border-radius: 999px; border: 1px solid var(--line); } /* ---- Dashboard tabs ---- */ .tabbar { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: .25rem 0 1.25rem; } .tab { background: transparent; border: 1px solid transparent; border-bottom: none; color: var(--muted); padding: .6rem 1.1rem; border-radius: 8px 8px 0 0; cursor: pointer; font-size: .9rem; font-family: inherit; margin-bottom: -1px; } .tab:hover { color: var(--ink); background: #ffffff0a; } .tab.active { color: var(--gold); border-color: var(--line); border-bottom-color: var(--navy-0); background: var(--panel); font-weight: 600; } .panel-sub { color: var(--muted); font-size: .85rem; margin: 0 0 1.1rem; } .welcome-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; } .ppbe { color: var(--muted); font-size: .8rem; letter-spacing: .02em; margin-left: auto; white-space: nowrap; } .ppbe strong { color: var(--gold); font-weight: 700; } /* Collapsible sections (native
) — keep everything, just foldable */ details.collapsible { margin-top: 1.5rem; } details.collapsible > summary { cursor: pointer; list-style: none; font-size: 1rem; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: .5rem; padding: .25rem 0; } details.collapsible > summary::-webkit-details-marker { display: none; } details.collapsible > summary::marker { content: ""; } details.collapsible > summary::before { content: "\25B8"; color: var(--gold); width: .9rem; display: inline-block; } details.collapsible[open] > summary::before { content: "\25BE"; } details.collapsible > summary:hover { color: var(--gold); } details.collapsible > *:not(summary) { margin-top: .6rem; } /* ---- Dashboard tier headings (legacy) ---- */ .tier-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin: 1.9rem 0 .9rem; padding-bottom: .4rem; border-bottom: 1px solid var(--line); } .tier-head:first-of-type { margin-top: .5rem; } .tier-head h2 { margin: 0; font-size: 1.05rem; letter-spacing: .01em; } .tier-head span { color: var(--muted); font-size: .85rem; } /* ---- Charts ---- */ /* One-line portfolio summary strip above heavy charts/grids. */ .summary-strip { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: baseline; padding: .6rem .9rem; margin: 0 0 .8rem; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: .9rem; } .summary-strip strong { color: var(--ink); font-size: 1.05rem; } /* Exception/alert strip linking into the Anomalies page. */ .flag-strip { margin: -.2rem 0 .8rem; } /* Flag tucked on the right of the summary strip (saves a line). */ .summary-strip .flag-inline { margin-left: auto; align-self: center; display: inline-block; padding: .3rem .7rem; border-radius: 8px; font-size: .82rem; font-weight: 600; color: #ffb3b3; border: 1px solid #ff8a8a55; background: #ff8a8a18; } .summary-strip .flag-inline:hover { background: #ff8a8a2c; } .flag-strip a { display: inline-block; padding: .45rem .8rem; border-radius: 8px; font-size: .88rem; font-weight: 600; color: #ffd0a8; background: #ff8a8a18; border: 1px solid #ff8a8a44; text-decoration: none; } .flag-strip a:hover { background: #ff8a8a2c; } /* Chart filter toolbar (search + Top-N) above a .charts grid. */ .chartfilter { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin: 0 0 1rem; } .chartfilter input[type="search"] { min-width: 16rem; padding: .4rem .6rem; } .chartfilter label { color: var(--muted); font-size: .85rem; display: inline-flex; align-items: center; gap: .4rem; } .chartfilter .pginfo { color: var(--muted); font-size: .82rem; } /* Segmented level toggle (By Component | By Program) + drill breadcrumb. */ .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .seg button { background: transparent; color: var(--muted); border: none; padding: .35rem .75rem; cursor: pointer; font-size: .85rem; } .seg button + button { border-left: 1px solid var(--line); } .seg button.active { background: #C6AF5C; color: #0c151f; font-weight: 600; } .crumb { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; color: var(--muted); } .crumb .crumb-cur { color: var(--ink); font-weight: 600; } /* Compact variant for a filter inside a chart-card header. */ .chart-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .6rem; } .chart-head h3 { margin: 0; } .chartfilter.compact { margin: 0; gap: .4rem; } .chartfilter.compact input[type="search"] { min-width: 7rem; padding: .25rem .45rem; font-size: .8rem; } .chartfilter.compact select { padding: .2rem .35rem; font-size: .8rem; } .charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; } /* Full-width single chart row: lets a growable chart expand without skewing a grid of fixed ones. */ .charts.charts-1col { grid-template-columns: 1fr; margin-bottom: 1rem; } /* Split row: a dominant chart (left) beside a compact one (right), no wasted space. Cards stretch to equal height and the chart fills, so panel bottoms align even when one card has a taller header (e.g. a filter toolbar). */ .charts.charts-split { grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr); align-items: stretch; } .charts-split .chart-card { display: flex; flex-direction: column; } .charts-split .chart-card > .wrap { flex: 1 1 auto; height: auto; min-height: 240px; } @media (max-width: 720px) { .charts.charts-split { grid-template-columns: 1fr; } } .chart-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1rem 1.1rem; } .chart-card h3 { margin: 0 0 .6rem; font-size: .92rem; color: var(--ink); } /* Default height; category charts override it inline (mfFitChart) to grow with the data so the page scrolls rather than a cramped inner scroll-box. Past mfFitChart's optional maxPx the wrap caps and scrolls internally (.scrolly) so the page stays ~one screen. */ .chart-card .wrap { position: relative; height: 260px; } .chart-card .wrap.scrolly { overflow-y: auto; overflow-x: hidden; } .chart-card .canvas-host { position: relative; width: 100%; height: 100%; } /* Cards align to the top of a row so the charts stay aligned as they grow. */ .charts { align-items: start; } /* ---- Footer ---- */ footer { flex: 0 0 auto; /* static at the bottom; main scrolls above it */ position: relative; display: flex; align-items: center; justify-content: center; min-height: 2.75rem; text-align: center; padding: .75rem clamp(1rem, 4vw, 3rem); color: var(--muted); font-size: .8rem; border-top: 1px solid var(--line); background: var(--navy-0); } footer .foot-powered { position: absolute; left: clamp(1rem, 4vw, 3rem); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--muted); } footer .foot-powered-label { font-size: .56rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #c5d0d8; white-space: nowrap; line-height: 1; } @keyframes foot-logo-spin { from { transform: rotate(0deg); opacity: 0; } to { transform: rotate(360deg); opacity: .96; } } footer .foot-powered-logo { height: 1.75rem; width: auto; display: block; opacity: .96; transform-origin: 15% 50%; animation: foot-logo-spin .85s cubic-bezier(.22, 1, .36, 1) .2s both; } footer .foot-powered:hover { color: var(--gold); } footer .foot-powered:hover .foot-powered-label { color: var(--gold); } footer .foot-powered:hover .foot-powered-logo { opacity: 1; filter: drop-shadow(0 0 6px rgba(228, 3, 123, .35)); } @media (prefers-reduced-motion: reduce) { footer .foot-powered-logo { animation: none; opacity: .96; } } /* Version pinned to the right corner — "MissionForge v1.0.0" (like GridSquare). */ footer .foot-ver { position: absolute; right: clamp(1rem, 4vw, 3rem); top: 50%; transform: translateY(-50%); color: #5f7385; font-size: .78rem; white-space: nowrap; } @media (max-width: 640px) { footer .foot-ver { display: none; } footer .foot-powered-label { font-size: .5rem; letter-spacing: .06em; } footer .foot-powered-logo { height: 1.5rem; } } /* ---- Command palette (Ctrl/Cmd-K) ---- */ .mf-cmdk { position: fixed; inset: 0; background: rgba(6,12,18,.55); backdrop-filter: blur(2px); z-index: 1000; display: none; align-items: flex-start; justify-content: center; } .mf-cmdk.show { display: flex; } .mf-cmdk-box { margin-top: 12vh; width: min(640px, 92vw); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.5); overflow: hidden; } .mf-cmdk-input { width: 100%; border: none; border-bottom: 1px solid var(--line); border-radius: 0; padding: .9rem 1rem; font-size: 1rem; background: var(--panel-2); } .mf-cmdk-input:focus { outline: none; } .mf-cmdk-list { max-height: 52vh; overflow-y: auto; } .mf-cmdk-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 1rem; cursor: pointer; } .mf-cmdk-item.sel { background: #C6AF5C1f; } .mf-cmdk-name { color: var(--ink); font-size: .9rem; } .mf-cmdk-type { color: var(--muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--line); border-radius: 999px; padding: .1rem .5rem; } .mf-cmdk-empty { padding: 1rem; color: var(--muted); text-align: center; } .mf-cmdk-foot { display: flex; gap: 1rem; padding: .5rem 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .72rem; background: var(--panel-2); } /* ---- Generic summary cards row ---- */ .summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin: 1rem 0 1.25rem; } .summary .card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: .85rem 1rem; } .summary .card .k { font-size: 1.5rem; font-weight: 800; color: var(--gold); } .summary .card .l { color: var(--muted); font-size: .78rem; margin-top: .15rem; } /* ---- Controls row ---- */ .builder-controls { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1rem; } .builder-controls .field { display: flex; flex-direction: column; gap: .25rem; } .builder-controls label { font-size: .78rem; color: var(--muted); } /* ---- Modal overlay / dialog ---- */ .mf-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 300; padding: 1rem; } .mf-overlay[hidden] { display: none; } .mf-dialog { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem 1.4rem; width: min(460px, 94vw); box-shadow: 0 20px 60px rgba(0,0,0,.55); } .mf-dialog h3 { margin: 0 0 .3rem; } .mf-dialog .field { margin: .65rem 0; } .mf-dialog label { display: block; font-size: .75rem; color: var(--muted); margin-bottom: .2rem; } .mf-dialog input, .mf-dialog select { width: 100%; } /* ---- What-if sliders ---- */ .wf-list { display: grid; gap: .5rem; } .wf-row { display: grid; grid-template-columns: minmax(10rem, 1.4fr) 2fr auto auto; gap: .75rem; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .5rem .75rem; } .wf-row.cut { opacity: .5; } .wf-row .nm { font-size: .85rem; } .wf-row .sub { color: var(--muted); font-size: .72rem; } .wf-row input[type=range] { width: 100%; } .wf-cost { font-variant-numeric: tabular-nums; color: var(--gold); font-size: .85rem; text-align: right; } .pill-funded { font-size: .68rem; padding: .12rem .5rem; border-radius: 999px; background: #007A3333; color: #6fd99a; border: 1px solid #007A3355; } .pill-cut { font-size: .68rem; padding: .12rem .5rem; border-radius: 999px; background: #C8102E22; color: #ff9b9b; border: 1px solid #C8102E55; } /* ---- Compare / diff ---- */ .cmp-grid { overflow-x: auto; } .cmp table { width: 100%; } .diff-add { color: #6fd99a; } .diff-rem { color: #ff9b9b; } .cell-fund { color: #6fd99a; font-weight: 700; } .cell-cut { color: #7d8c9b; } /* ---- Justification narrative ---- */ .narrative-out { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 1.25rem 1.4rem; line-height: 1.6; } .narrative-out p { margin: 0 0 .85rem; } .narrative-out .cls { font-size: .72rem; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .75rem; } /* ---- Anomaly / burndown flags ---- */ .flag { font-size: .7rem; padding: .12rem .5rem; border-radius: 999px; border: 1px solid var(--line); } .flag.bad { background: #C8102E22; color: #ff9b9b; border-color: #C8102E55; } .flag.warn { background: #C6AF5C22; color: var(--gold); border-color: #C6AF5C55; } .flag.ok { background: #007A3322; color: #6fd99a; border-color: #007A3355; } /* ---- Print ---- The app shell locks the body to 100vh with an internally-scrolling
(sticky footer). For print that must be undone, or the printout is a single scrolled screen with scrollbars. initChrome() also REPLACES #appbar/#footer with
/