/* Wings dashboard - visual identity Grounded in the actual subject: a business-jet MRO shop floor and its instrument panels, not a generic SaaS dashboard. Dark anti-glare panel background (shop-floor/hangar-TV friendly), an ICAO-style three-colour annunciator system (green/amber/red) for schedule status, and monospace for every numeric readout so columns of figures actually line up like a real instrument display. Dark is still the default and the only theme this panel auto-adopts - it doesn't switch to "light mode" for daytime use or follow OS `prefers-color-scheme`. A light variant exists only as a manual, opt-in preference (toggle at the bottom of the sidebar), persisted client-side, for whoever wants it. */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/ibm-plex-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/ibm-plex-sans-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/jetbrains-mono-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } :root { color-scheme: dark; --panel-0: #10151a; /* page background - anti-glare instrument charcoal */ --panel-1: #1a2029; /* card / plate surface */ --panel-2: #212a33; /* nested surface - gauge tracks, tiles */ --hairline: #2a343d; /* rivet-seam dividers */ --border: rgba(255, 255, 255, 0.08); --text-primary: #eef3f1; --text-secondary: #93a5ac; --text-muted: #84939b; /* bumped from #5b6b73 - that was ~2.6:1 on --panel-2, below WCAG AA for the 10-11px uppercase labels it's used for */ --series-routine: #4fb3ff; /* planned track - ADI sky blue */ --series-nrc: #f2954f; /* found in teardown - warm amber-orange */ /* Blocked by another card - the fourth blocker hue on the big-screen board. Named rather than a one-off hex so both themes define it and it sits with the blues instead of fighting them. */ --series-dependency: #8b7df0; --status-good: #33d17a; /* annunciator green - on schedule */ --status-warning: #f2b134; /* annunciator amber - caution / provisional */ --status-critical: #e2483d; /* annunciator red - behind schedule */ /* The same red where it has to be READ, not just seen (design pass t436, 17.09.2026). --status-critical is an annunciator fill: on this theme's --panel-2 it measures 3.62:1 and on --panel-1 4.08:1, under the 4.5:1 AA asks of body text - fine for a rule or a dot, not for a sentence or a count. This is the same hue lifted to 5.33:1 / 6.00:1. Green and amber need no such pair (7.3-8.7:1 already), and the light theme already picks its status hues as ink, so there the two are the same value. Use it for critical TEXT and glyphs; --status-critical stays for fills, rules and borders. */ --status-critical-ink: #f4776b; --card-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.03); --on-accent-text: #0b0f13; /* text sat on top of a --series-routine fill (login/submit buttons) */ /* Translucency system (the "Sunset veil / glass" rules further down) - both themes share the same selectors, each supplies its own fills. veil-* are flat alpha (free); glass-* sit under a backdrop blur and are reserved for small frame elements and the short blend-page list. */ --band-fill: rgba(16, 21, 26, 0.7); /* .page::before field around the cards */ --veil-card: rgba(26, 32, 41, 0.9); /* .card - flat, no blur */ --veil-row: rgba(26, 32, 41, 0.88); /* list rows (History) */ --veil-row-hover: rgba(33, 42, 51, 0.95); --glass-fill: rgba(33, 42, 51, 0.55); /* frame chrome: whoami bar, nav buttons */ --glass-card: rgba(26, 32, 41, 0.62); /* blend-page cards, project header placard */ --glass-card-hover: rgba(33, 42, 51, 0.78); --glass-tile: rgba(33, 42, 51, 0.5); /* KPI tiles on the blend page */ --glass-edge: rgba(255, 255, 255, 0.08); --glass-fallback: rgba(26, 32, 41, 0.95); /* engines without backdrop-filter */ --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Shape and motion tokens. --accent-brand is the one "signature" colour a theme may use for the active nav item, primary buttons and focus - both themes just point it at the planned-track blue. The corners were 4px here ("instrument panel") until t398 took the shell to floating panels: 14px frame corners with 4px plates inside them read as two unrelated designs sharing a screen, so cards, fields and tables went to 10/8 - one step under the frame, which is what the spec asked for. */ --accent-brand: var(--series-routine); --radius-card: 10px; --radius-control: 8px; --radius-pill: 999px; --dur-fast: .15s; --dur-base: .22s; --ease-out: cubic-bezier(.2, .7, .2, 1); /* ---- The frame (t398, 15.09.2026) ---------------------------------- The shell is three panels floating on the page background - the drawer, the top strip and the work area - held apart by one gap and cornered by one radius, so the three can never drift by a pixel. Both step down on a phone (see the end of this file), which is why every offset in this file is written against them and not against a literal 8px. --frame-bg is the page itself: what is left between and around the three panels. It is a flat colour from the theme's own palette, because the backdrop photo sits INSIDE the work area (--app-photo below) - the gutters show the page, never a strip of photograph. --frame-shadow is shared by all three panels, for the same reason as the radius: one shadow rather than three that nearly agree. Deliberately faint - the panels lie on the page, they do not hover over it. */ --frame-gap: 8px; --frame-radius: 14px; --frame-bg: var(--panel-0); --frame-edge: rgba(255, 255, 255, 0.08); --frame-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 6px 16px rgba(0, 0, 0, 0.14); } /* Light variant - "Sunset Airfield" (2026-09-01), built from the user's style sheet: airy near-white surfaces around #F5F7FA, deep navy #1B2740 as the primary ink, brand blue #3577E3 as the accent, and the sunset-apron photo behind the app shell (see body.app-bg.app-main below). Fill-strength colors come straight from the sheet; every hue that is used AS TEXT is the same hue darkened just enough to clear WCAG AA on panel-1/panel-2 - the sheet's raw #22C55E / #F59E0B / #EF4444 / #FF8A65 sit at ~2-3:1 on white, which is fine for a swatch or a button fill and unreadable as a 12px label. */ :root[data-theme="light"] { color-scheme: light; --panel-0: #f5f7fa; /* page frame - the sheet's Background */ --panel-1: #ffffff; /* card - white plates, as in the sheet's UI components */ --panel-2: #eef2f7; /* nested - gauge tracks, headers, tiles */ --hairline: #dfe5ec; --border: rgba(27, 39, 64, 0.12); --text-primary: #1b2740; /* sheet Primary */ --text-secondary: #475569; /* sheet body-text grey */ --text-muted: #5b6878; /* sheet's #64748B nudged darker - 4.5:1+ on panel-2 for the 10-11px uppercase labels it carries */ --series-routine: #2e63d4; /* Accent Blue #3577E3 as ink (AA on all panels) */ --series-nrc: #b3480d; /* Accent Orange #FF8A65 as ink */ --series-dependency: #5b46c9; /* dependency violet as ink */ --status-good: #0e7a38; /* Success #22C55E as ink */ --status-warning: #9a4a04; /* Warning #F59E0B as ink */ --status-critical: #c22a20; /* Danger #EF4444 as ink */ /* Already chosen as ink (5.12:1 on --panel-2): the pair is the same value. */ --status-critical-ink: #c22a20; /* The sheet's soft lifted-card shadow, not the dark theme's flat edge. */ --card-shadow: 0 1px 2px rgba(27, 39, 64, 0.05), 0 4px 14px rgba(27, 39, 64, 0.06); --on-accent-text: #ffffff; /* The frame (t398): the page around the panels is the sheet's one step below Background - #f5f7fa panels on a #f5f7fa page would have needed a border to be seen at all, and the spec asked for a neutral light grey-blue, which is exactly what --panel-2 is here. The shadow is navy at low alpha like every other lifted surface in this theme, never black. */ --frame-bg: var(--panel-2); --frame-shadow: 0 1px 2px rgba(27, 39, 64, 0.06), 0 6px 16px rgba(27, 39, 64, 0.08); /* Translucency fills - light twins of the dark set in :root. --band-fill stays translucent on purpose (2026-09-07): it is the margin wash around the sheet, not a working surface, and the user asked to keep the backdrop photo visible there. Every fill that a working surface sits on (cards, rows, frame chrome, KPI tiles) went opaque the same day - a default photo must never show through data. */ --band-fill: rgba(245, 247, 250, 0.68); --veil-card: #ffffff; --veil-row: #ffffff; --veil-row-hover: #eef2f7; --glass-fill: #ffffff; --glass-card: #ffffff; --glass-card-hover: #eef2f7; --glass-tile: #eef2f7; --glass-edge: rgba(27, 39, 64, 0.12); --glass-fallback: #ffffff; } /* .cat-chemical's accent is a one-off hex, not a shared status/series variable (see the cat-* rules below) - the dark-mode purple fails contrast directly on a light panel-0, so it gets its own light-mode override rather than a new shared variable for a single use site. */ :root[data-theme="light"] .material-category-header.cat-chemical { --accent: #6b46c1; } /* The mock-data banner is intentionally decoupled from --status-warning: that variable's light-mode value is tuned for use as *text* elsewhere (lamp-caution, cat-service), which is too dark to also work as a bright attention-grabbing banner fill. The banner needs its own loud backdrop regardless of theme, so it keeps its own colors rather than inheriting a value optimized for a different job. */ :root[data-theme="light"] .mock-banner { background: #f2b134; color: #1a1300; } * { box-sizing: border-box; } /* Keyboard focus - none of the interactive elements below (nav links, tab buttons, refresh button, disclosure triggers) had any focus styling at all, so a keyboard user had no way to tell what's selected. */ a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-brand); outline-offset: 2px; border-radius: 2px; } body { margin: 0; font-family: var(--font-body); background: var(--panel-0); color: var(--text-primary); font-size: 14px; -webkit-font-smoothing: antialiased; } /* Hangar backdrop - the shop-floor photo, fixed to the viewport; the panels on top of it stay fully opaque (see .sidebar / .whoami-bar below), so it only ever shows through in the true gaps around content, never behind text. Each theme gets its own tonally-matched shot (dark moody hangar vs. a washed-out near-white version) plus a matching overlay tint, so neither variant is left with a photo fighting its own palette. Each shot is versioned in its filename (-v2) rather than overwritten: nothing here is cache-busted (templates call url_for('static', ...) with no version), so reusing a filename would leave every already-open browser - and the office mini-server after update.bat - showing the previous art. Which shot applies is carried by --app-photo rather than written straight onto `background-image` (t398): inside the app shell the photo is the WORK AREA's backdrop, not the window's - the frame's gutters are a flat colour and the photo is clipped by the work area's rounded corners - while the standalone login pages, which have no shell, still wear it full-bleed. One declaration per surface, one variable to pick the shot, so the two can never disagree about which photo this theme uses. Restored 21.09.2026: aff28f75 had dropped the theme's own default backdrop along with the personal picker it also removed, but the user's call was narrower - only the personal choice (dashboard/backgrounds.py, the 44-photo catalog and the /account picker) was meant to go; the default hangar/sunset shot under each theme stays. The personal photo override that used to sit on top of this variable with an `!important` is what is genuinely gone, not this rule. */ body.app-bg { --app-photo: linear-gradient(180deg, rgba(16, 21, 26, 0.55), rgba(16, 21, 26, 0.8)), url('images/background/gallery/hangar-bg-v2.jpg'); --app-photo-pos: center; background-image: var(--app-photo); background-size: cover; background-position: var(--app-photo-pos, center); background-repeat: no-repeat; background-attachment: fixed; } :root[data-theme="light"] body.app-bg { /* Login pages (standalone documents without .app-main) keep the washed hangar shot - the sunset backdrop is an app-shell look by request. */ --app-photo: linear-gradient(180deg, rgba(245, 247, 250, 0.66), rgba(245, 247, 250, 0.88)), url('images/background/gallery/hangar-jet-light.jpg'); } /* Sunset Airfield backdrop - app shell only. Per the style sheet: the photo keeps its own proportions (cover, anchored right/bottom where the aircraft sits), and readability comes from a left-to-right overlay - near-opaque under the sidebar and content column, clearing toward the right so the jet and the mountains actually read. The residual 18% wash at the right edge is the sheet's "drop contrast/saturation 15-20%" step. */ :root[data-theme="light"] body.app-bg.app-main { --app-photo: linear-gradient(90deg, rgba(245, 247, 250, 0.95) 0%, rgba(245, 247, 250, 0.7) 40%, rgba(245, 247, 250, 0.3) 75%, rgba(245, 247, 250, 0.18) 100%), url('images/background/gallery/sunset-airfield-v1.jpg'); --app-photo-pos: right bottom; } /* Inside the shell the window itself carries no photograph any more (t398): it is the page the three panels float on, in the theme's own frame colour. The photo is on .main-content .page further down, where the work area's rounded corners clip it. Standalone .app-bg pages (login) are untouched - this rule needs .app-main, and outranks the bare body.app-bg above. */ body.app-bg.app-main { background-image: none; background-color: var(--frame-bg); } /* ...and the work area wears it instead. Two things make this the same picture as before rather than a smaller copy of it: - `background-attachment: fixed` keeps the positioning area the viewport, so the shot is still sized and anchored to the window (the sunset one is anchored right/bottom, where the aircraft sits) and still does not move when the page scrolls. The work area simply shows the part of it that falls inside its own box. - an element's own background is always clipped by its border-radius, so the corners come free - no `overflow: hidden` anywhere near .main-content, which is the one thing this frame must not do (see the note on .main-content's overflow-x). */ body.app-bg.app-main .main-content .page { background-image: var(--app-photo); background-size: cover; background-position: var(--app-photo-pos, center); background-repeat: no-repeat; background-attachment: fixed; } .page { max-width: 1280px; margin: 0 auto; padding: 24px; } a { color: var(--series-routine); } /* ---- Mock-data banner - shown on every page (see templates/_mock_banner.html) whenever WINGS_MOCK=1, so synthetic demo data is never mistaken for a live Wings status by anyone glancing at a screen. Deliberately loud (amber, full-width) - the one place this app breaks its own "no glow, no pill fill" restraint (style.css intro), because a wrong reading here is worse than an ugly banner. ---- */ .mock-banner { background: var(--status-warning); color: #1a1300; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; padding: 6px 10px; flex: none; } /* ---- Header placard ---- */ .header-widget { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px; padding: 18px 22px; background: var(--panel-1); border: 1px solid var(--border); border-left: 3px solid var(--series-routine); border-radius: var(--radius-card); box-shadow: var(--card-shadow); margin-bottom: 20px; } .header-widget h1 { font-family: var(--font-mono); font-size: 21px; font-weight: 700; letter-spacing: 0.01em; margin: 0; } .header-widget .meta { color: var(--text-secondary); font-size: 13px; } .header-widget .lamp { margin-left: auto; } /* ---- Annunciator lamp - the quiet status device used everywhere a badge/pill used to be (schedule state, record status). Deliberately plain: a coloured dot + uppercase mono label, no glow, no pill fill - the tape gauge below is the one bold element on this page. ---- */ .lamp { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; } .lamp-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); flex: none; } .lamp-good { color: var(--status-good); } .lamp-good .lamp-dot { background: var(--status-good); } .lamp-caution { color: var(--status-warning); } .lamp-caution .lamp-dot { background: var(--status-warning); } .lamp-critical { color: var(--status-critical); } .lamp-critical .lamp-dot { background: var(--status-critical); } .lamp-neutral { color: var(--text-secondary); } .lamp-neutral .lamp-dot { background: var(--text-muted); } /* ---- Grid / cards ---- */ .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .span-6 { grid-column: span 6; } .span-4 { grid-column: span 4; } .span-8 { grid-column: span 8; } .span-12 { grid-column: span 12; } @media (max-width: 900px) { .span-6, .span-4, .span-8 { grid-column: span 12; } } .card { background: var(--panel-1); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px 18px; box-shadow: var(--card-shadow); } .card h2 { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0 0 14px 0; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); font-weight: 600; } .card .footnote { font-size: 11px; color: var(--text-muted); margin-top: 10px; } /* ---- Hint tooltip component (static/app.js initHints()) - replaces footnotes and gives per-row context on hover/focus without an extra round-trip. Two variants sharing one popup mechanism: .hint - a quiet "i" icon next to a heading, explains a static concept .hint-text - dotted-underline inline text, explains per-row data ---- */ .hint { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 6px; border-radius: 50%; border: 1px solid var(--text-muted); color: var(--text-muted); font-size: 10px; font-style: normal; line-height: 1; cursor: help; vertical-align: middle; } .hint:hover, .hint:focus-visible { color: var(--text-primary); border-color: var(--text-primary); } .hint-text { border-bottom: 1px dotted var(--text-muted); cursor: help; } /* ---- Toast (static/toast.js) - the app's one transient message ---- It replaced three per-module copies, two of which sat at the BOTTOM of the screen in 13px grey. That is how "record the result first" went unread every time someone ticked a task done in the list: the answer arrived below the fold, in the colour of a footnote. So: top of the viewport, under the identity bar (toast.js measures it), 15px, and errors carry the critical colour instead of looking like every other notice. ---- */ .ui-toast { position: fixed; left: 50%; transform: translateX(-50%) translateY(-8px); max-width: min(460px, calc(100vw - 24px)); box-sizing: border-box; padding: 13px 18px; border-radius: var(--radius-card); background: var(--panel-2); border: 1px solid var(--border); color: var(--text-primary); font-size: 15px; line-height: 1.4; text-align: center; overflow-wrap: anywhere; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); z-index: 300; cursor: pointer; opacity: 0; transition: opacity .16s ease, transform .16s ease; } .ui-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .ui-toast--error { border-color: var(--status-critical); background: color-mix(in srgb, var(--status-critical) 14%, var(--panel-2)); font-weight: 600; } .ui-toast--error::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 9px; border-radius: 50%; vertical-align: -3px; /* The glyph takes the panel colour, not white: a theme's critical colour can be a pale ink, where white on it is barely a mark. */ background: var(--status-critical); color: var(--panel-2); font-size: 12px; font-weight: 700; } .ui-toast--ok { border-color: color-mix(in srgb, var(--status-good) 55%, transparent); } @media (prefers-reduced-motion: reduce) { .ui-toast { transition: none; transform: translateX(-50%); } .ui-toast.show { transform: translateX(-50%); } } .hint-popup { position: fixed; z-index: 200; max-width: 280px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-control); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); padding: 8px 10px; font-size: 11.5px; line-height: 1.4; color: var(--text-secondary); pointer-events: none; } /* ---- Active Labor multi-card disclosure (static/app.js) - clicking an employee's Multi-card cell reveals their other simultaneously open cards as sub-rows right below. Click instead of hover (unlike .hint above) since the TV view has no pointer to hover with. Same disclosure arrow as .card-drilldown for visual consistency. ---- */ .multi-card-toggle { background: none; border: none; padding: 0; margin: 0; cursor: pointer; font: inherit; color: var(--text-primary); border-bottom: 1px dotted var(--text-muted); display: inline-flex; align-items: center; gap: 4px; } .multi-card-toggle:hover, .multi-card-toggle:focus-visible { color: var(--series-routine); } .multi-card-toggle::after { content: "▸"; color: var(--text-muted); display: inline-block; transition: transform 0.15s ease; } .multi-card-toggle[aria-expanded="true"]::after { transform: rotate(90deg); } .labor-subrow td { color: var(--text-secondary); background: var(--panel-2); } .labor-subrow-indent { text-align: center; color: var(--text-muted); } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .cache-note { font-family: var(--font-mono); color: var(--text-secondary); font-size: 12px; } .refresh-btn { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); background: var(--panel-2); border: 1px solid var(--border); border-radius: 3px; padding: 4px 10px; cursor: pointer; } .refresh-btn:hover { color: var(--text-primary); border-color: var(--series-routine); } .refresh-btn:disabled { cursor: default; opacity: 0.6; } .back-btn { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); background: var(--panel-2); border: 1px solid var(--border); border-radius: 3px; padding: 4px 10px; text-decoration: none; order: -1; } .back-btn:hover { color: var(--text-primary); border-color: var(--series-routine); } /* ---- Card drill-down (Widget 2) - expand a forecast group to see its individual open cards, closed count alongside for context. Native
/ - no JS needed for something this simple. ---- */ .card-drilldown { margin-top: 14px; border-top: 1px solid var(--hairline); padding-top: 10px; } .card-drilldown summary { cursor: pointer; font-size: 12px; color: var(--text-secondary); list-style: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-radius: var(--radius-control); margin: 0 -6px; padding: 2px 6px; transition: background-color 0.15s ease, color 0.15s ease; overflow-wrap: break-word; word-break: break-word; } .card-drilldown summary::-webkit-details-marker { display: none; } /* The ▸ marker is the only visual cue that a row is expandable - kept at full text-secondary weight (not the fainter text-muted) plus a bold weight of its own so it doesn't read as decoration, and a hover/focus state on the whole row (background tint, arrow + text switch to the series-routine accent) makes "you can click here" obvious before the click, not just after. */ .card-drilldown summary::before { content: "▸"; color: var(--text-secondary); font-weight: 700; display: inline-block; transition: transform 0.15s ease, color 0.15s ease; } .card-drilldown summary:hover, .card-drilldown summary:focus-visible { background: var(--panel-2); color: var(--text-primary); } .card-drilldown summary:hover::before, .card-drilldown summary:focus-visible::before { color: var(--series-routine); } .card-drilldown[open] summary::before { transform: rotate(90deg); } .card-drilldown summary b { color: var(--text-primary); font-family: var(--font-mono); } .card-drilldown table { margin-top: 10px; } .card-drilldown .blocker-note { color: var(--text-secondary); font-size: 12px; margin-top: 2px; } /* Widget 2's open-cards list can show as one flat table (badge per row) or split into a per-category accordion (Material/Tool/Child Cards/Not Started/In Progress, each its own drill-down) - the checkbox flips which of the two pre-rendered blocks is visible. Pure CSS (sibling combinator), no JS, same "no JS needed for something this simple" reasoning as the details/summary disclosure above - the checkbox is a sibling of both view blocks (not nested inside the label) so this selector reaches them. */ .cards-grouped-view { display: none; } .cards-view-toggle:checked ~ .cards-grouped-view { display: block; } .cards-view-toggle:checked ~ .cards-flat-view { display: none; } .category-summary-row { display: flex; align-items: center; justify-content: space-between; flex: 1; font-size: 12.5px; } .category-summary-row .count { font-variant-numeric: tabular-nums; font-family: var(--font-mono); color: var(--text-secondary); } /* ---- "Why this number?" explain disclosure (_widget_overview.html) - a quieter cousin of .card-drilldown (smaller text, no bold summary term) since this is prose, not a table of records to scan. ---- */ .explain-drilldown summary { font-size: 11.5px; } .explain-body { margin-top: 8px; } .explain-body p { margin: 0 0 6px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; } .explain-body p:last-child { margin-bottom: 0; } .explain-body p.footnote { color: var(--text-muted); font-style: italic; } .explain-scenarios { width: 100%; border-collapse: collapse; margin: 4px 0 8px; } .explain-scenarios td { padding: 5px 0; font-size: 12px; color: var(--text-secondary); line-height: 1.4; border-bottom: 1px dotted var(--hairline); vertical-align: baseline; } .explain-scenarios tr:last-child td { border-bottom: none; } .explain-scenarios .scenario-date { font-family: var(--font-mono); color: var(--text-primary); font-weight: 600; white-space: nowrap; text-align: right; padding-left: 12px; width: 1%; } .explain-scenarios .scenario-headline td { color: var(--text-primary); } .explain-scenarios .scenario-tag { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 3px; font-size: 10px; letter-spacing: 0.02em; color: var(--text-muted); border: 1px solid var(--hairline); white-space: nowrap; } .project-forecast-summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-control); } .project-forecast-summary .project-forecast-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .project-forecast-summary .project-forecast-date { font-family: var(--font-mono); font-size: 19px; font-weight: 700; margin-left: auto; } .forecast-cards { display: flex; gap: 16px; flex-wrap: wrap; } .forecast-card { flex: 1; min-width: 260px; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px; } .forecast-card.routine { border-top: 3px solid var(--series-routine); } .forecast-card.nrc { border-top: 3px solid var(--series-nrc); } .forecast-card-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .forecast-card-head { align-items: center; margin-bottom: 8px; } .forecast-card .group-name { font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 12px; color: var(--text-secondary); } .forecast-card .big-date, .forecast-card .big-pct { font-family: var(--font-mono); font-size: 25px; font-weight: 700; margin: 8px 0 4px; white-space: nowrap; } .forecast-card .counts { color: var(--text-secondary); font-size: 12.5px; margin-bottom: 12px; } .forecast-card .counts b { color: var(--text-primary); font-family: var(--font-mono); } .sparkline { display: block; margin-top: 10px; } .sparkline-hit { cursor: help; } .sparkline-hit:focus-visible { outline: 1px solid var(--text-primary); outline-offset: 1px; } /* Not four equal columns. Cards Closed carries a 92px ring plus a legend of five label/count pairs; Closed Yesterday carries one number. Equal quarters gave the ring's legend about 115px, which is narrower than the word "PERFORMED" - so the label overflowed its own cell and printed on top of the count. Weighting the columns is what makes the legend fit inline. */ .kpi-row { display: grid; grid-template-columns: 1.5fr 1fr 1.25fr 1.25fr; gap: 12px; } .kpi-tile { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 12px; text-align: left; } .kpi-tile .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .kpi-tile .value { font-family: var(--font-mono); font-size: 22px; font-weight: 700; } .kpi-tile .sub { font-size: 11.5px; color: var(--text-secondary); margin-top: 2px; } /* The dashboard's one completion ring (templates/_macros_gauges.html). Its geometry and every colour are arguments to the macro, on purpose - only what CSS is actually better at lives here: not shrinking inside a flex row, and the sweep when a percentage changes under a live update. Global rather than per-screen because the same macro draws the KPI tile, the two rings on a task page and the closeout widget. */ .gauge-ring { flex: none; } .gauge-ring circle { transition: stroke-dasharray var(--dur-base) var(--ease-out); } /* Wraps rather than crushes: below about 250px of tile the legend drops under the ring instead of being squeezed into a column too narrow for the word "PERFORMED" - which is what put the labels underneath the numbers ("PE55ORME") on the hangar tablet. */ .kpi-tile-donut-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .kpi-tile-donut-row svg { flex: none; } .kpi-tile-wide { grid-column: span 2; } /* Cards Closed and Routine Pace sit in the same grid row as the taller Hours Worked/Plan tile (which carries an open breakdown table), so the grid's default row-stretch already gives them extra height - center their content in it instead of leaving it stranded at the top. */ .kpi-tile-donut, .kpi-tile-pace, .kpi-tile-yesterday, .kpi-tile-today { display: flex; flex-direction: column; justify-content: center; } .kpi-tile-donut .value { font-size: 30px; } .kpi-tile-donut .sub { font-size: 13px; } /* ---- Cards Closed legend - the numbers beside the completion ring. A two-column
so the counts right-align into a column that reads as a sum: the dotted rows below Total always add up to it. Labels reuse the .lamp dot device rather than inventing a second coloured-dot style, and each dot's colour is the same token as its arc in the ring. ---- */ .donut-legend { display: grid; /* minmax(0, 1fr), not auto: an `auto` label column cannot shrink below its longest word, so at tablet width the label overflowed its own cell and printed underneath the count. The label column now yields, the counts keep their natural width, and nothing overlaps at any width. */ grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; margin: 0; /* No grow. With minmax(0, 1fr) above, a legend allowed to fill a wide tile hands the entire surplus to the label column: at a 617px tile the labels took 452px and the counts ended up stranded against the far edge, a gap wider than the table itself. Sized to content the pairs stay together, and the basis is still "PERFORMED plus its dot plus the counts", so the legend drops below the ring exactly when it no longer fits beside it. */ flex: 0 1 auto; font-family: var(--font-mono); font-size: 13px; } /* Last-resort safeguard under ~140px of legend: wrap the word rather than clip it. A clipped label is silently wrong; a wrapped one is only ugly. */ .donut-legend dt { min-width: 0; overflow-wrap: anywhere; } .donut-legend dt .lamp { min-width: 0; white-space: normal; } .donut-legend dd { margin: 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-primary); } /* Total is the sum, not one of the parts - bigger, undotted, and ruled off from the rows that add up to it. */ .donut-legend .donut-legend-total { font-size: 17px; font-weight: 700; padding-bottom: 4px; margin-bottom: 2px; border-bottom: 1px solid var(--border); } /* Closed, the tile is a quarter of the row; open, its four paragraphs of explanation would wrap into a ~200px column and make the tile ~450px tall. Widen it to two columns while open - the row already reflows because Hours Worked/Plan carries an open table, so nothing else has to move. */ details.kpi-tile-donut[open] { grid-column: span 2; } details.kpi-tile-donut[open] .kpi-tile-breakdown { max-width: 46em; } details.kpi-tile-donut[open] .kpi-tile-breakdown p { margin: 0 0 8px; } .donut-legend dt.donut-legend-total { color: var(--text-secondary); letter-spacing: 0.04em; text-transform: uppercase; font-size: 12px; } .kpi-tile-pace .value { font-size: 44px; } .kpi-tile-pace .sub { font-size: 13px; } /* One number, same weight as the pace figure it replaced. The date under it is the label of that number, not a footnote - a count with no day attached is the sort of thing that gets read a week later as "today". */ .kpi-tile-yesterday .value { font-size: 44px; } .kpi-tile-yesterday .sub { font-family: var(--font-mono); font-size: 13px; white-space: nowrap; } /* Today's tile is deliberately the same shape as yesterday's - same size, same split underneath - so the pair reads as one comparison rather than two unrelated numbers. The only difference is the accent border: this is the number that is still moving, and the one people look at during the day (production feedback item 14). */ .kpi-tile-today .value { font-size: 44px; } .kpi-tile-today .sub { font-family: var(--font-mono); font-size: 13px; white-space: nowrap; } .kpi-tile-today { border-left: 3px solid var(--series-routine); padding-left: 13px; } /* The ROUTINE/NONROUTINE split under the total - the same two-column, right-aligned pairs as the Cards Closed legend, so the two tiles read as one language. Ruled off: these add up to the number above them. */ .yesterday-split { display: grid; /* Content-sized, like the Cards Closed legend beside it. `minmax(0, 1fr)` alone hands the whole tile to the label column and strands the counts against the far edge - the same defect fixed in the legend, and the two tiles are supposed to read as one language. The rule above the pairs still spans the tile: the divider is full width, the pairs are not. */ grid-template-columns: minmax(0, max-content) max-content; justify-content: start; gap: 2px 10px; margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); } .yesterday-split dt { min-width: 0; overflow-wrap: anywhere; } .yesterday-split dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-primary); } /* Yesterday's closures under the rolling rate. Ruled off and set smaller than the pace: it is a second, different number in a tile whose whole point is the one big figure, so it has to read as a footnote to it rather than compete with it at a glance from across the hangar. */ /* Same label / number / sub rhythm as the tile above it, stacked rather than set in columns: this is the narrow tile in the row, and a label-left, count-right line broke apart the moment the date wrapped under it. */ .pace-yesterday { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); } .pace-yesterday-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } /* nowrap: without it the date breaks after the month ("2026-08-" / "31"), which reads as two numbers rather than one date. */ .pace-yesterday-date { font-family: var(--font-mono); text-transform: none; letter-spacing: 0; white-space: nowrap; } .pace-yesterday-count { font-family: var(--font-mono); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; } .pace-yesterday-split { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-secondary); } /* Two implicit equal-width columns so Worked/Plan center inside their own half instead of pinning to the tile's outer edges. */ .hwp-value-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; } .hwp-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; } .hwp-stat .hwp-number { font-family: var(--font-mono); font-size: 22px; font-weight: 700; } .hwp-stat .hwp-tag { font-size: 10.5px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); } /* ---- Under the forecast date: what the number assumes. The headline is a best case, so it is labelled, and the realistic trailing-window date sits beside it - printed alone, a best case is how a plan gets built on the one day everything went right. ---- */ .forecast-basis { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-top: 2px; font-size: 11.5px; line-height: 1.35; } .forecast-basis-label { color: var(--text-secondary); } /* Tablet. Four equal columns give the ring's legend and the Hours Worked table about 180px each, which is where both stopped being readable. The shop floor reads Cards Closed and Hours Worked; Closed Yesterday is a single number and can afford to be the narrow one - so at tablet widths the row is two columns weighted 1.6 : 1, and Hours Worked takes the full width below with its breakdown table intact. */ @media (min-width: 701px) and (max-width: 1200px) { .kpi-row { grid-template-columns: 1.6fr 1fr; } .kpi-tile-wide, details.kpi-tile-donut[open] { grid-column: 1 / -1; } } @media (max-width: 700px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } /* One number per tile at phone width - the legend beside a 92px ring in half a phone is the same squeeze as the tablet, one breakpoint down. The [open] selector is listed too: it carries the same grid-column at a higher specificity, so without it an opened Cards Closed tile keeps half the row here and its explanation wraps into ~150px. */ .kpi-tile-donut, details.kpi-tile-donut[open], .kpi-tile-wide { grid-column: 1 / -1; } } /* ---- Fleet summary strip (project_list.html) - reuses .kpi-tile, just tints the value to match the same lamp-good/lamp-critical semantics used everywhere else instead of inventing a third color language. ---- */ .fleet-summary-card { margin-bottom: 20px; } .kpi-tile-good .value { color: var(--status-good); } .kpi-tile-critical .value { color: var(--status-critical); } .kpi-tile-expandable summary { cursor: pointer; list-style: none; } .kpi-tile-expandable summary::-webkit-details-marker { display: none; } .kpi-tile-breakdown { margin-top: 4px; } .kpi-tile-breakdown table { font-size: 12px; } .kpi-tile-breakdown th, .kpi-tile-breakdown td { padding: 5px 4px; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--hairline); } /* Contrast, 06.09.2026 - same pass as static/invoice.css, and this is the rule it applies to most screens at once: a column header names the data under it, so it reads as content, not as a decorative caption. */ th { color: var(--text-secondary); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; font-family: var(--font-mono); } td.num, th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } tr:last-child td { border-bottom: none; } /* Grouped column headers (t181, 15.09.2026): a second above a wide table's real header, one per group naming the columns under it (money together, dates together, etc). Centered and non-wrapping so the group label reads as a span across several columns rather than as a left-aligned caption that could wrap to a second line above an already two-row thead - shared across invoice/hangar/workforce, one rule instead of a copy per stylesheet. */ .thgroup { text-align: center; white-space: nowrap; } /* ---- Tape gauge - THE signature element. Modelled on a PFD tape instrument (airspeed/altitude tape): a tick-marked track with a boxed digital readout riding at the current value, instead of a generic filled pill bar. Rendered server-side by app.py's tape_gauge() helper. ---- */ .tape { position: relative; padding-top: 22px; min-width: 90px; } .tape-track { position: relative; height: 12px; background: var(--panel-0); border: 1px solid var(--hairline); border-radius: 2px; overflow: hidden; } .tape-fill { position: absolute; inset: 0 auto 0 0; background: var(--tape-color, var(--series-routine)); } .tape-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(0, 0, 0, 0.4); } .tape-flag { position: absolute; top: 0; transform: translateX(-50%); font-family: var(--font-mono); font-size: 11px; font-weight: 700; background: var(--panel-0); color: var(--tape-color, var(--series-routine)); border: 1px solid var(--tape-color, var(--series-routine)); border-radius: 3px; padding: 1px 5px; line-height: 1.5; white-space: nowrap; } .tape-flag::after { content: ""; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); width: 1px; height: 5px; background: var(--tape-color, var(--series-routine)); } .priority-aog, .over-hours { color: var(--status-critical); font-weight: 700; } .blocker-bars { display: flex; flex-direction: column; gap: 2px; } .blocker-row { display: grid; grid-template-columns: 120px 1fr 40px; align-items: center; gap: 10px; font-size: 12.5px; flex: 1; } .blocker-row .bar { height: 12px; border-radius: 2px; background: var(--panel-0); border: 1px solid var(--hairline); position: relative; overflow: hidden; } .blocker-row .bar > span { position: absolute; inset: 0; border-radius: 2px; } .blocker-row .count { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); color: var(--text-secondary); } /* Each blocker category is itself a drill-down - click a row to see the specific cards behind that count, same disclosure pattern as Widget 2's .card-drilldown. */ .blocker-drilldown summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 6px 6px; margin: 0 -6px; border-radius: var(--radius-control); transition: background-color 0.15s ease; } .blocker-drilldown summary::-webkit-details-marker { display: none; } /* Same "make the clickability obvious before the click" treatment as .card-drilldown above - full-weight arrow, hover/focus highlight. */ .blocker-drilldown summary::before { content: "▸"; color: var(--text-secondary); font-weight: 700; flex: none; transition: transform 0.15s ease, color 0.15s ease; } .blocker-drilldown summary:hover, .blocker-drilldown summary:focus-visible { background: var(--panel-2); } .blocker-drilldown summary:hover::before, .blocker-drilldown summary:focus-visible::before { color: var(--series-routine); } .blocker-drilldown[open] summary::before { transform: rotate(90deg); } .blocker-drilldown .drilldown-body { margin: 0 0 10px 22px; } .blocker-drilldown .drilldown-body table { font-size: 12px; } .material-group-toggle-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-secondary); margin-bottom: 8px; cursor: pointer; user-select: none; } /* Each material category gets its own accent color (left rail + text), not just a shared muted divider - the whole point is that CHEMICAL, CONSUMABLE, ROTABLE etc. shouldn't blend into one grey band when you're scanning the table quickly. */ /* table-layout: fixed, one width per named column (see the th classes in _widget_materials.html) - Card/Part get the room, everything else is a short fixed value, so Status and (especially) Due can never be pushed past the panel's right edge by a long detail cell. Category/Price are conditional columns; when absent the browser just scales the remaining percentages up to fill the row, which is fine - they are relative weights, not literal pixels. */ /* table-layout: fixed with a PX width per short, fixed-vocabulary column (group, PO, qty, price, status, due) - a percentage of the panel isn't enough room for "AWAITING"/"PENDING 2026-09-15" once the panel is a realistic width, and wrapping them mid-word or letting them run into the next cell both read as a rendering bug, not a status. Card/Part/Category (the free-text columns) take the width left over - fixed layout gives any column without an explicit width an equal share of the remainder, so they simply get more room when the conditional Category/Price columns are absent. */ .material-table { table-layout: fixed; } .material-table th { white-space: nowrap; } .material-table td.col-group, .material-table td.col-po, .material-table td.col-qty, .material-table td.col-price, .material-table td.col-status, .material-table td.col-due { white-space: nowrap; } .material-table td.col-card, .material-table td.col-part, .material-table td.col-category { overflow-wrap: break-word; } .material-table .col-group { width: 66px; } .material-table .col-category { width: 96px; } .material-table .col-po { width: 80px; } .material-table .col-qty { width: 44px; } .material-table .col-price { width: 76px; } .material-table .col-status { width: 92px; } .material-table .col-due { width: 84px; } .material-category-header td { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; text-align: center; /* A full-width tint, not just the left rule below - at 9 columns wide the rule alone read as unpainted by the time the eye reached Status/Due. */ background: color-mix(in srgb, var(--accent, var(--text-muted)) 10%, var(--panel-0)); padding: 8px; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); border-left: 4px solid var(--accent, var(--text-muted)); color: var(--accent, var(--text-secondary)); } .material-category-header.cat-rotable { --accent: var(--series-routine); } .material-category-header.cat-consumable { --accent: var(--series-nrc); } .material-category-header.cat-chemical { --accent: #a78bfa; } .material-category-header.cat-tool { --accent: var(--status-good); } .material-category-header.cat-service { --accent: var(--status-warning); } .material-category-header.cat-other { --accent: var(--text-muted); } /* CREATED means the requisition only exists inside Wings - it hasn't actually been placed with a vendor yet, so it's invisible to whoever tracks incoming parts until someone notices it here and pushes it forward. Darkened row + red warning icon so it can't be skimmed past. */ .material-row-created { background: var(--panel-0); } .status-created { color: var(--status-critical); font-weight: 700; } /* AOG (aircraft-on-ground) requisitions - the highest-priority material blocker there is - get the same darkened-row treatment as CREATED above, plus the inline priority-aog badge next to the part number. */ .material-row-aog { background: var(--panel-0); } /* Who owns the part (dashboard/material_owner.py): the customer's own part is never priced, so its row gets a grey left rule; a unit taken off another aircraft ("donor") a violet rule and badge. Both are facts about the line rather than problems, hence no red. The filter checkboxes above the table hide/show rows by their data-owner-kind (static/app.js). */ .material-row-customer td:first-child { box-shadow: inset 3px 0 0 var(--text-muted); } .material-row-donor td:first-child { box-shadow: inset 3px 0 0 #7c5cd6; } .material-owner-tag { display: inline-block; font-size: 11.5px; color: var(--text-secondary); padding: 0 5px; border: 1px solid var(--hairline); border-radius: 9px; white-space: nowrap; vertical-align: 1px; } .material-owner-tag.is-donor { color: #7c5cd6; border-color: #7c5cd6; } .material-owner-code { font-family: var(--font-mono); font-size: 11.5px; } /* A repair trip with a cost column nobody filled in (calc.repair_summary): the total is shown as far as it goes, in red, so the gap is visible before it reaches an invoice. */ .material-repair { font-size: 11px; color: var(--text-secondary); } .material-repair.is-incomplete { color: var(--status-critical); } .material-filters { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 6px; font-size: 12px; color: var(--text-muted); } .material-filters label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; } /* Requisition positions (Widget 5 drill-down). A requisition here can carry anything from 1 to 60+ lines, so the card row stays a one-line summary and the positions open underneath it on demand rather than turning the blocker table into a wall of parts. */ .material-lines-toggle { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 1px 6px 1px 4px; font-family: inherit; font-size: 11px; color: var(--text-secondary); background: var(--panel-0); border: 1px solid var(--hairline); border-radius: 10px; cursor: pointer; } .material-lines-toggle:hover { color: var(--text-primary); border-color: var(--text-muted); } .material-lines-caret { font-size: 9px; line-height: 1; } .material-lines-row > td { padding: 0 0 0 24px; background: var(--panel-0); } .material-lines-table { width: 100%; font-size: 11.5px; margin: 2px 0 6px 0; } .material-lines-table th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); font-weight: 600; padding: 4px 8px; } .material-lines-table td { padding: 3px 8px; border-bottom: 1px solid var(--hairline); } .material-lines-table tfoot td { border-bottom: none; border-top: 1px solid var(--hairline); font-weight: 700; color: var(--text-secondary); } .material-line-desc { color: var(--text-secondary); margin-left: 8px; } /* The price is always inferred - from a quote, or from what the part cost last time it was bought - so the source rides along with the number in muted small caps instead of leaving a bare figure that reads as fact. */ .material-price-source { font-size: 11.5px; color: var(--text-secondary); font-weight: 400; } .material-price-date { margin-left: 4px; font-family: var(--font-mono); } .empty-state { color: var(--text-secondary); font-size: 13px; padding: 8px 0; } .tail-group-header { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); font-weight: 700; margin: 22px 0 8px 0; } .tail-group-header:first-of-type { margin-top: 12px; } .project-list { list-style: none; padding: 0; margin: 0 0 4px 0; display: grid; gap: 10px; } .project-list a { display: block; background: var(--panel-1); border: 1px solid var(--border); border-left: 3px solid var(--hairline); border-radius: var(--radius-control); padding: 14px 16px; text-decoration: none; color: var(--text-primary); box-shadow: var(--card-shadow); transition: border-left-color 0.15s ease; } .project-list a:hover { border-left-color: var(--series-routine); } .project-list .pnum { font-family: var(--font-mono); font-weight: 700; } .project-list .pmeta { color: var(--text-secondary); font-size: 12.5px; margin-top: 2px; } /* ---- /history's invoice-amount column (templates/history.html) ---- */ /* The row holds two links side by side - the project and, for whoever may see invoices, its invoice (t137). The second one cannot live inside the first, so the
  • is the flex row and both links are its children. */ .project-list.with-invoice li { display: flex; align-items: stretch; gap: 8px; } .project-list.with-invoice li > a:first-child { flex: 1 1 auto; min-width: 0; } .project-list.with-invoice a { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .project-list.with-invoice .pinfo { min-width: 0; } .project-list .pinvoice-link { flex: 0 0 auto; justify-content: center; white-space: nowrap; font-size: 13px; color: var(--text-secondary); } .project-list .pinvoice-link:hover { color: var(--text-primary); } .project-list .pinvoice { flex: 0 0 auto; text-align: right; white-space: nowrap; } .project-list .pinvoice-total { font-family: var(--font-mono); font-weight: 700; font-size: 14px; } .project-list .pinvoice-none { color: var(--text-secondary); } .diagnostic-tag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); border: 1px solid var(--hairline); border-radius: 3px; padding: 1px 6px; margin-left: 6px; } .labor-forecast-row { display: flex; gap: 24px; flex-wrap: wrap; align-items: stretch; } .cpi-tile { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 20px; text-align: center; min-width: 180px; } .cpi-tile .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .cpi-tile .value { font-family: var(--font-mono); font-size: 32px; font-weight: 700; } .cpi-tile .sub { font-size: 11px; color: var(--text-secondary); margin-top: 4px; max-width: 180px; } .cpi-good { color: var(--status-good); } .cpi-warning { color: var(--status-warning); } .cpi-critical { color: var(--status-critical); } /* ---- CPI gauge + percent-vs-estimate readout - a second, faster-to-read view of the same CPI value as the big number above (see cpi-tile), added because the raw ratio alone reads as ambiguous/backwards to anyone expecting textbook EVM's CPI (where >1 is good, not over). ---- */ .cpi-gauge { margin-top: 10px; cursor: help; } .cpi-gauge-track { position: relative; height: 8px; border-radius: 2px; overflow: hidden; } .cpi-gauge-marker { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text-primary); transform: translateX(-1px); } .cpi-gauge-scale { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); margin-top: 3px; } .cpi-delta { font-family: var(--font-mono); font-size: 13px; font-weight: 700; margin-top: 8px; cursor: help; } .labor-forecast-details { flex: 1; min-width: 260px; } .labor-forecast-details .big-date { font-family: var(--font-mono); font-size: 22px; font-weight: 700; margin: 6px 0 4px; } /* Applied/earned/remaining/adjusted/burn-rate as a row of labeled stats (same number-over-label shape as .kpi-tile) instead of one run-on sentence - that sentence line-wrapped mid-clause on real widths and left the space below it empty. */ .labor-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 14px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); } .labor-stat-value { font-family: var(--font-mono); font-size: 17px; font-weight: 700; color: var(--text-primary); } .labor-stat-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-top: 3px; } /* ---- Crew output on this aircraft (dashboard.html Labor tab, test builds only). The card is built from /workforce/shifts' own .sh-* classes (workforce.css) so the two screens read as one feature; only this period switcher is local - that page renders periods as links in its toolbar. ---- */ .crew-output-controls { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; } .crew-period { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); background: var(--panel-2); border: 1px solid var(--border); border-radius: 3px; padding: 3px 10px; cursor: pointer; } .crew-period:hover { color: var(--text-primary); } .crew-period.active { color: var(--text-primary); border-color: var(--text-muted); } .crew-open-all { margin-left: auto; font-size: 12px; color: var(--text-secondary); text-decoration: none; } .crew-open-all:hover { color: var(--text-primary); } /* ---- Pricing widget (templates/_widget_pricing.html) - same tile/detail shape as the CPI row above, kept as its own classes rather than reusing .cpi-tile/.labor-forecast-* so this doesn't read as labor-specific. ---- */ .pricing-row { display: flex; gap: 24px; flex-wrap: wrap; align-items: stretch; } .pricing-tile { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 14px 20px; text-align: center; min-width: 160px; } .pricing-tile .label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .pricing-tile .value { font-family: var(--font-mono); font-size: 32px; font-weight: 700; } /* flex-direction: column (revision 13, money design pass 15.09.2026): this was a single-line row, `align-items: center` on the cross axis only. A second line - _widget_pricing's "Wings priced this invoice without billing groups" under the labor/materials/other counts, for the no- billing-groups case - became a flex item too and sat beside the first line instead of under it, on one squeezed row. `.footnote` below (the pulled-at line, pre-existing in _widget_invoice.html) had the same defect already, just never a two-line case that made it visible. */ .pricing-details { flex: 1; min-width: 200px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 3px; } .pricing-details .counts { color: var(--text-secondary); font-size: 12.5px; } .pricing-details .counts b { color: var(--text-primary); font-family: var(--font-mono); } /* ---- TV / mobile portfolio overview ---- */ .tv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 20px; } .tv-card { display: block; color: inherit; text-decoration: none; background: var(--panel-1); border: 1px solid var(--border); border-left: 3px solid var(--hairline); border-radius: var(--radius-control); padding: 18px 20px; box-shadow: var(--card-shadow); transition: border-left-color 0.15s ease; } .tv-card:hover { border-left-color: var(--series-routine); } .tv-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 6px; } .tv-tail { font-family: var(--font-mono); font-size: 19px; font-weight: 700; letter-spacing: 0.02em; } .tv-meta { color: var(--text-secondary); font-size: 12.5px; margin-bottom: 14px; } .tv-forecast-row { margin-top: 10px; font-size: 12.5px; color: var(--text-secondary); } .tv-forecast-row .mono { font-family: var(--font-mono); color: var(--text-primary); } /* Large-viewport (TV) scale-up - same markup, bigger everything for across-the-room legibility instead of a separate mobile-sized layout. */ @media (min-width: 1400px) { body.tv-mode { font-size: 20px; } body.tv-mode .page { max-width: 1800px; padding: 40px; } /* auto-fit (not the base rule's auto-fill): with only a handful of open aircraft, empty tracks collapse and the real cards stretch to fill the row instead of sitting small on the left of a big screen. */ body.tv-mode .tv-grid { gap: 24px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } body.tv-mode .tv-tail { font-size: 32px; } body.tv-mode .tv-meta { font-size: 16px; } body.tv-mode .tv-forecast-row { font-size: 18px; } body.tv-mode .lamp { font-size: 15px; } body.tv-mode .lamp-dot { width: 10px; height: 10px; } body.tv-mode .tape { padding-top: 30px; } body.tv-mode .tape-track { height: 18px; } body.tv-mode .tape-flag { font-size: 15px; padding: 3px 8px; } /* Widget-level scale-up for the single-page /tv/project/ view - same markup/partials as the leads dashboard, just bigger so a dense one-scroll page stays legible at TV viewing distance instead of shrinking to fit. */ body.tv-mode .header-widget h1 { font-size: 30px; } body.tv-mode .header-widget .meta { font-size: 16px; } body.tv-mode .card { padding: 24px 28px; } body.tv-mode .card h2 { font-size: 18px; } body.tv-mode .card .footnote { font-size: 13px; } body.tv-mode table { font-size: 16px; } body.tv-mode th { font-size: 12.5px; } body.tv-mode th, body.tv-mode td { padding: 12px 10px; } body.tv-mode .forecast-card .group-name { font-size: 15px; } body.tv-mode .forecast-card .big-date, body.tv-mode .forecast-card .big-pct { font-size: 30px; } body.tv-mode .forecast-card .counts { font-size: 15px; } body.tv-mode .kpi-tile .label { font-size: 13px; } body.tv-mode .kpi-tile .value { font-size: 28px; } body.tv-mode .kpi-tile .sub { font-size: 14px; } body.tv-mode .cpi-tile .label { font-size: 13px; } body.tv-mode .cpi-tile .value { font-size: 40px; } body.tv-mode .cpi-tile .sub { font-size: 13px; } body.tv-mode .labor-forecast-details .big-date { font-size: 28px; } body.tv-mode .labor-forecast-details .counts { font-size: 15px; } body.tv-mode .blocker-row { font-size: 15px; grid-template-columns: 160px 1fr 50px; } body.tv-mode .blocker-row .bar { height: 16px; } body.tv-mode .card-drilldown summary, body.tv-mode .blocker-drilldown summary { font-size: 15px; } body.tv-mode .empty-state { font-size: 16px; } } /* ---- TV single-project view: fit-to-screen layout ---- Unlike body.tv-mode above (a tall scrolling page, scaled up for legibility), this is a fixed-height dashboard meant to show everything at a glance on a TV with no scrolling of the page itself. That goal trades against large type - the 7 widget cards are packed into a 4-column grid sized to viewport height. Any one card whose data outgrows its cell (a long supply or active-labor list) scrolls internally instead of pushing the page. */ body.tv-fit { height: 100vh; overflow: hidden; font-size: 13.5px; } /* Fills the viewport at any screen size instead of a fixed 1920x1080 box scaled by JS. Two things make that work: the grid below fills the width with `fr` columns and the height with `fr` rows, and every font here is sized off --u, one knob tied to viewport HEIGHT (the binding axis for a landscape dashboard). So a 4K panel shows the same layout with larger, still-proportional type - and no letterbox bars on a non-16:9 screen, which the old transform: scale left behind. --u ~= the old 11.5px base at 1080p (1.05vh), clamped so a small dev window stays legible and a very tall panel doesn't turn cartoonish. (There is no @media enlargement for tv-fit - the removed transform was the only thing scaling this view, so --u now carries it alone.) */ .tv-fit-page { width: 100%; height: 100vh; margin: 0; padding: 1vh 1vw; display: flex; flex-direction: column; gap: 0.9vh; --u: clamp(9px, 1.05vh, 24px); font-size: var(--u); } .tv-fit-topbar { flex: none; font-size: 1.04em; color: var(--text-secondary); } .tv-fit-header { flex: none; margin-bottom: 0; padding: 0.9vh 0.95vw; } .tv-fit-header h1 { font-size: 1.65em; } .tv-fit-header .meta { font-size: 1.04em; } /* ---- Visit stage strip (dashboard/visit_stage.py, tv_project.html) ---- Sized in em, not px: this strip is a direct child of .tv-fit-page, which sets font-size: var(--u), so 1em here IS the one viewport-height knob the rest of this view scales by. Left in px it stayed 21/13px while every number around it grew on a 1440p+ panel - the verdict would have become the smallest thing on the line it is meant to lead. The 1px hairline border stays px on purpose; only the left accent scales. The verdict on the left at a size that reads across a desk, its evidence as chips beside it. Chips are colored by tone, not by category: on this line "bad" means "this is why the stage is what it is", and that is the only distinction worth a color here. Single row, no wrap - a visit with enough problems to overflow it would push the grid, and the grid is the fixed-height part of this page. */ .stage-strip { flex: none; display: flex; align-items: baseline; gap: 0.9em; padding: 0.7em 1.6em; border-radius: 0.7em; border: 1px solid var(--border); border-left-width: 0.45em; background: var(--panel-1); overflow: hidden; white-space: nowrap; } .stage-strip .stage-name { font-size: 1.85em; font-weight: 700; letter-spacing: 0.01em; flex: none; } .stage-strip .stage-fact { font-size: 1.15em; color: var(--text-secondary); flex: none; } .stage-strip .stage-fact + .stage-fact::before { content: "·"; /* 0.8em of the fact's own 1.15em, i.e. ~0.9 of --u - matching the strip's gap rather than reading wider than it. */ margin-right: 0.8em; color: var(--text-muted); } .stage-strip .tone-bad { color: var(--status-critical); font-weight: 600; } .stage-strip .tone-good { color: var(--status-good); } .stage-critical { border-left-color: var(--status-critical); } .stage-critical .stage-name { color: var(--status-critical); } .stage-warning { border-left-color: var(--status-warning); } .stage-warning .stage-name { color: var(--status-warning); } .stage-good { border-left-color: var(--status-good); } .stage-good .stage-name { color: var(--status-good); } .stage-neutral { border-left-color: var(--text-muted); } .tv-fit-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; } .tv-fit-grid > .card { min-height: 0; min-width: 0; overflow-y: auto; padding: 10px 14px; } /* Deterministic DOM order from tv_project.html's three includes: forecast, KPI, active labor (_widget_overview.html - personnel is merged in there too, Killer Card folded into Active Labor's own Over column) - blockers (_widget_materials.html) - CPI (_widget_labor.html). 5 cards, grouped by theme into the 4x2 grid: col1 forecast alone (tall); col4 KPI+CPI (compact stat panels, narrow); active labor and blockers each get a double-width column (cols 2-3) since both are wide, variable-length tables - active labor especially, now that Killer Card's Accumulated/Over columns live there too. */ .tv-fit-grid > .card:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; } .tv-fit-grid > .card:nth-child(2) { grid-column: 4; grid-row: 1; } .tv-fit-grid > .card:nth-child(3) { grid-column: 2 / 4; grid-row: 1; } .tv-fit-grid > .card:nth-child(4) { grid-column: 2 / 4; grid-row: 2; } .tv-fit-grid > .card:nth-child(5) { grid-column: 4; grid-row: 2; } .tv-fit-grid .card h2 { font-size: 1em; margin-bottom: 8px; padding-bottom: 6px; } .tv-fit-grid .card .footnote { display: none; } .tv-fit-grid table { font-size: 1em; table-layout: fixed; width: 100%; } .tv-fit-grid th, .tv-fit-grid td { padding: 5px 4px; overflow-wrap: break-word; } /* Active Labor table (_widget_personnel.html) at tv-fit's fixed-height, fixed-width columns: with every column the same width, the free-text Description column wrapped to 4-5 lines and blew out row height, defeating the "read the whole board at a glance" point of this view. Give it most of the row's width and clamp to 2 lines instead of letting it wrap freely. Columns: Employee, Card, Description, Approved, Accumulated, Over, Logged in since, Multi-card. */ .tv-fit-grid #labor-widget table th:nth-child(1), .tv-fit-grid #labor-widget table td:nth-child(1) { width: 15%; } .tv-fit-grid #labor-widget table th:nth-child(2), .tv-fit-grid #labor-widget table td:nth-child(2) { width: 9%; } .tv-fit-grid #labor-widget table th:nth-child(3), .tv-fit-grid #labor-widget table td:nth-child(3) { width: 26%; } .tv-fit-grid #labor-widget table th:nth-child(4), .tv-fit-grid #labor-widget table td:nth-child(4) { width: 8%; } .tv-fit-grid #labor-widget table th:nth-child(5), .tv-fit-grid #labor-widget table td:nth-child(5) { width: 9%; } .tv-fit-grid #labor-widget table th:nth-child(6), .tv-fit-grid #labor-widget table td:nth-child(6) { width: 8%; } .tv-fit-grid #labor-widget table th:nth-child(7), .tv-fit-grid #labor-widget table td:nth-child(7) { width: 13%; } .tv-fit-grid #labor-widget table th:nth-child(8), .tv-fit-grid #labor-widget table td:nth-child(8) { width: 12%; } .tv-fit-grid #labor-widget table td:nth-child(3) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* t181, 15.09.2026: .labor-table further down this file makes every non-Description cell `white-space: nowrap` so a card id or a two-word header never breaks at a desk width - see that rule's comment. This fixed-percentage TV grid was already tuned to wrap/break-word within its narrow columns (the block above), so nowrap here would just push text past the edge of a 8-9%-wide column instead. Restore normal wrapping for this one context; higher specificity than the generic rule so it wins regardless of the two rules' order in the file. */ .tv-fit-grid .labor-table th, .tv-fit-grid .labor-table td { white-space: normal; } .tv-fit-grid .kpi-row { grid-template-columns: repeat(2, 1fr); gap: 8px; } .tv-fit-grid .kpi-tile { padding: 8px 10px; } .tv-fit-grid .kpi-tile .value { font-size: 1.57em; } .tv-fit-grid .kpi-tile .label { font-size: 0.87em; } .tv-fit-grid .kpi-tile .sub { font-size: 0.91em; } /* Fill the forecast column's height. It spans both grid rows (tall), but its content is often shorter than that - which used to leave a black void below it. Make the card a flex column so the two forecast panels stretch to fill the column; a panel whose open-cards list overflows scrolls inside itself rather than pushing the page. So the column always reads as two full panels, not two short panels over emptiness. */ .tv-fit-grid > .card:nth-child(1) { display: flex; flex-direction: column; } .tv-fit-grid > .card:nth-child(1) > .forecast-cards { flex: 1; min-height: 0; } .tv-fit-grid .forecast-cards { gap: 8px; align-items: stretch; } .tv-fit-grid .forecast-card { padding: 10px; min-width: 0; overflow-y: auto; } .tv-fit-grid .forecast-card .big-date, .tv-fit-grid .forecast-card .big-pct { font-size: 1.48em; margin: 6px 0 3px; } .tv-fit-grid .sparkline { margin-top: 4px; } .tv-fit-grid .cpi-tile { padding: 10px 14px; min-width: 100px; } .tv-fit-grid .cpi-tile .value { font-size: 2.09em; } .tv-fit-grid .labor-forecast-row { gap: 12px; } .tv-fit-grid .labor-forecast-details .big-date { font-size: 1.48em; } .tv-fit-grid .blocker-row { font-size: 1em; grid-template-columns: 7.6em 1fr 2.4em; gap: 6px; } .tv-fit-grid .blocker-row .bar { height: 9px; } .tv-fit-grid .tape { min-width: 0; padding-top: 18px; } .tv-fit-grid .tape-flag { font-size: 0.91em; padding: 1px 5px; } /* ---- App shell: persistent sidebar (project_list/dashboard/history only - /tv and the customer view are separate standalone pages by design). Redesigned 2026-09-07 to a single graphite panel, identical in both themes - only the page behind it (cards, tables) still follows the active theme. The colors below are the panel's own tokens, never the shared --panel-* / --text-* set, precisely so a theme switch can never repaint it, and they are declared on .sidebar itself (not :root) so nothing outside the panel can be affected by a name collision. ---- */ /* NB (t398, 15.09.2026): the line above used to run the two token names together with a slash between them, which closes a CSS comment three lines early. Everything after it was parsed as a selector, and the first rule of this block - this one - was dropped by every browser: the shell has not actually been a flex container, nor 100vh tall, since the comment was written. It matters now, because a work area that floats has to reach the bottom of the window even on a short page. (The same typo two rules apart was swallowing .sidebar-theme-list, the theme popup in the drawer - see the end of this file.) */ .app-shell { display: flex; min-height: 100vh; } /* ...and the shell is 100vh of the room LEFT, not 100vh flat: the mock-data banner (templates/_mock_banner.html) stands above it in the same column, so a flat 100vh made every page in a mock build 27px taller than its window and put a scrollbar on it. Scoped to .app-main - the login pages are standalone documents that centre their own card in the viewport. */ body.app-main { display: flex; flex-direction: column; min-height: 100vh; } body.app-main .app-shell { flex: 1 1 auto; min-height: 0; } .sidebar { --sb-bg: #172630; --sb-text: #e5edf2; --sb-muted: #a5b7c4; --sb-icon: #c4d2dc; --sb-active-bg: #30434f; --sb-active-text: #ffffff; --sb-hover-bg: #223641; --sb-border: #30414d; --sb-badge-bg: #101d26; --sb-badge-text: #dfe8ee; --sb-focus: #43bdf2; /* One step under the frame's own 14px, like every other plate inside a panel (--radius-card). 4px until t398. */ --sb-radius: 10px; /* The panel's own hairline highlight - white at low alpha, because this plate is graphite in all three themes, so a themed --border would go invisible in two of them. */ --sb-edge: rgba(255, 255, 255, 0.08); width: 260px; flex: none; background: var(--sb-bg); color: var(--sb-text); /* overflow: hidden, not auto - the panel itself no longer scrolls as one piece (07.09.2026, user's own call: the header and footer were scrolling away with a long open group). .sidebar-scroll below is the one part that does. */ display: flex; flex-direction: column; overflow: hidden; padding: 10px 0 18px; /* A floating panel since t398: a gap all the way round it instead of the old edge-to-edge column with a border down its right side. The hairline is an INSET shadow, not a border: a real 1px border would make the panel 262px wide and move everything measured against its 260 (the docked page's margin, the strip at the bottom, the ✕ nav.js places at x=207). Same reason the shadow carries it - one box, no new pixels. */ position: sticky; top: var(--frame-gap); height: calc(100vh - var(--frame-gap) * 2); border-radius: var(--frame-radius); box-shadow: inset 0 0 0 1px var(--sb-edge), var(--frame-shadow); } /* The one signature-blue focus ring, regardless of which accent the active theme otherwise uses (per the design spec) - everywhere else in the app keeps following --accent-brand. */ .sidebar :focus-visible { outline-color: var(--sb-focus); } /* The full lockup was removed 07.09.2026 for taking too much room, and it stays removed. What sits here instead (12.09.2026) is the monogram alone at 26px - small enough to leave the corner to the ✕ and the build badge, large enough to be the thing you look at to know which window this is. nav.js prepends the ✕ close button (.sidebar-close) into this same element - it is absolutely positioned, so it does not push the mark or the badge around. */ .sidebar-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; padding: 8px 12px; border-bottom: 1px solid var(--sb-border); margin-bottom: 12px; } /* A column, not a row. In a row the mark and the build badge together are 234px wide inside a 260px panel, and the ✕ nav.js puts in the top-right corner is absolutely positioned from x=207 - so the badge ran a clear 27px underneath it. Measured, not guessed. Stacked, the mark keeps the top line to itself and the badge gets the one below, clear of the ✕ in both. */ .sidebar-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; color: var(--sb-text); text-decoration: none; } /* Height, not width: the mark is 3.9:1, so setting a width would make its height depend on how the crop was taken. 40px was chosen by measuring against the ✕ nav.js puts at x=207, not by eye - at 40 the mark ends at 168 and leaves 39px of air, at 46 it ends at 191 and the jet's nose all but touches the button. The user asked for "немного увеличить" after the first pass at 26px, and this is that step with room still left. The panel is one graphite plate in all three themes (--sb-* above), so there is no second file for a light background and nothing to switch. */ .sidebar-brand .brand-mark { display: block; height: 40px; width: auto; flex: none; } /* Moved from an inline