/* ============================================================================ * analyst/css/app.css — pricing console, layered on the shared tokens in * ../customer/css/styles.css. Airline-side (Quincus) identity; same shell * grammar as the customer portal (64px header, 56px footer, 1100px .shell). * ==========================================================================*/ [hidden] { display: none !important; } /* ---- type scale (the ONLY place font sizes are defined) ------------------- Every component references these tokens; no rule declares a px font-size. */ :root { --fs-h1: 22px; /* page title */ --fs-h2: 20px; /* modal titles */ --fs-title: 16px; /* strip titles, section headings */ --fs-body: 14px; /* body text, table cells, money, inputs, button labels */ --fs-small: 12px; /* chips, column headers, sub-labels, ids */ --fs-hint: 13px; /* the intake's quiet lines + field labels (2026-08-18) */ --fs-fine: 11px; /* the intake's example rows — the smallest rank */ --fs-note: 15px; /* the read-out's detail line (rfq-step1 §5) */ --fs-x: 26px; /* modal close glyph */ /* ---- state tints (the ONLY place these pairs are defined) --------------- The same three ink/tint pairs were re-typed in fifteen rules across the console. Identical values, one source — so "one palette" is a fact rather than a coincidence that survives until someone types a near-miss. */ --danger-ink: #B42318; --danger-tint: #FEE4E2; --danger-line: #EF4444; --danger-wash: #FEF3F2; --danger-edge: #FECDCA; --danger-deep: #912018; --warn-ink: #B54708; --warn-tint: #FEF0C7; --warn-edge: #FEDF89; --ok-ink: #027A48; --ok-tint: #D1FADF; --ok-line: #12B76A; --ok-fill: #6CE9A6; --ok-soft: #A6F4C5; --paper-scrim: rgba(9, 31, 56, 0.34); /* ---- the load-tier ramp (segment bars, capacity cells) ----------------- Three steps, one direction: open → tight → full. They were typed as six raw hexes across four rules, which is how a ramp stops being a ramp. */ --tier-tight: #F79009; --tier-full: #B54708; --tier-full-ink: #7A2E0E; /* ---- ink that sits ON a filled surface --------------------------------- 22 rules typed #fff for text on a navy or slate fill. --card is the paper under content; this is the ink over a fill. Same value, opposite job — naming both stops the next filled control guessing. */ --ink-inverse: #FFFFFF; --held-fill: #475467; /* ---- corners (the ONLY place radii are defined) ------------------------- Eight distinct radii were in use — 14px modals beside 12px panels, 10px inner blocks beside 7px controls. Three steps and a dot, everywhere. */ --r-card: 12px; /* modals, panels, strips — the outermost box */ --r-box: 8px; /* buttons, inputs, inner blocks — matches --radius */ --r-pill: 999px; /* chips, badges, toggles */ --r-dot: 3px; /* the 9px legend squares, and nothing else */ /* ========================================================================== CONSOLE PALETTE — the sibling product's, by direction. This overrides the shared tokens from ../customer/css/styles.css for the CONSOLE ONLY: app.css loads second, and the customer portal never loads it, so the portal keeps its Etihad identity untouched. Every value below is read off the reference screenshot; nothing outside this block types a colour (VT-8 / ST-7). ======================================================================== */ --navy: #0F1629; --navy-deep: #080D1A; --navy-mid: #1E2749; --primary: #4F46E5; /* filled primary action */ --accent: #6366F1; /* the indigo marker — active rail item, badges */ --navy-tint: #EEF2FF; /* indigo wash behind info states */ --paper: #FFFFFF; --paper-alt: #F7F8FA; --card: #FFFFFF; --ink: #0F172A; --ink-70: #667085; --ink-55: #98A2B3; --rule-dark: #E8EAEF; --rule-dark-strong: #D5D9E0; --green: #12B76A; --amber: #F79009; --red: #EF4444; --teal: #0E9384; --teal-tint: #CCFBEF; --gold-tint: #FEF0C7; --gold-ink: #B54708; --error-bg: #FEF3F2; /* ---- the rail (the ONE dark surface in the console) --------------------- The shape is the sibling product's — identity tile, labelled groups, a marked active row, an account block on the floor. The palette is ours: these are navy, darkened; the active marker is the Etihad gold the co-brand already uses. No indigo enters the build. */ --rail-bg: #0F1629; /* the ground */ --rail-raised: #1E2749; /* the active row's fill */ --rail-hover: #182038; --rail-ink: #E8EAF0; /* an item's label, and the product name */ --rail-ink-dim: #8B93A7; /* group labels, descriptor, resting icons */ --rail-rule: #1E2740; /* the zone separators */ } /* shared strip type: all six strip titles one size; all strip body one size */ /* THE section heading, every surface. Reports' .rp-h and the cost-basis .cb-head were the same rank at a different weight; both fold in here. */ .strip-title, h2.strip-title { font-size: var(--fs-title); font-weight: 600; color: var(--ink); margin: 0 0 6px; } .strip-sub { font-size: var(--fs-body); font-weight: 400; } /* ── PAGE HEADER (§1) ──────────────────────────────────────────────────────── Three lines and an action group, one component on every surface. The eyebrow is the smallest step, the title the largest, the subtitle body — all three already in the --fs-* scale, so this adds hierarchy without adding sizes. */ .pghead { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 0 22px; } .pghead-txt { min-width: 0; } .pghead-eyebrow { margin: 0 0 6px; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-55); } .pghead .q-title { margin: 0; } .pghead-sub { margin: 8px 0 0; } /* the 70ch cap lives on .q-sub — one rule (FL-5) */ .pghead-act { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; } /* ── end page header ────────────────────────────────────────────────────── */ /* ── SUMMARY CARDS (§2) ────────────────────────────────────────────────────── A row of counts above the tabs. Each card IS a filter — it is a