/* ===================================================================== Gearshift - the Parts screens and the dashboard The component set the reconciliation area and the dashboard are built from since the restructure: a page frame with a "Needs attention" rail down the right, glance tiles, charts that open into a larger view, the ranked exceptions list and the part-category board. Prefix `gx-`, so nothing here can collide with the `gs-` rules it sits beside, and so a reader can tell at a glance which layer a class is from. Rules this file keeps: * every colour is a token (tokens.css); tones are the product's five meanings — danger, warning, success, info, accent — plus muted; * cards are `.gx-card`, which gs-material.css draws as frosted glass; everything INSIDE a card stays flat — rows, wells, bars — because glass on glass reads as noise; * a figure that is incomplete is drawn differently (hatched), never the same as a whole one; * mobile first where it matters: the rail drops below the content under 1200px, grids collapse, and nothing is wider than the viewport. ===================================================================== */ /* ── the page frame ───────────────────────────────────────────────── */ .gx-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gs-space-4); align-items: start; } /* The panel beside the content from 992px (PILLAR1_DESIGN.md §5.1a): it stacks under the main column below that, never over it. */ @media (min-width: 992px) { .gx-page--rail { grid-template-columns: minmax(0, 1fr) 280px; } } @media (min-width: 1200px) { .gx-page--rail { grid-template-columns: minmax(0, 1fr) 320px; } } .gx-main { min-width: 0; display: flex; flex-direction: column; gap: var(--gs-space-4); } /* The head: an eyebrow trail, a big title, and the freshness facts on the right — the mock's structure, in this product's type and colour. */ .gx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gs-space-4); flex-wrap: wrap; /* The header's own gap to what follows, so a button at the foot of the header (Categories' "New category") never sits on the first card. */ margin-bottom: var(--gs-space-5); } /* The dashboard's "who, where, when" line belongs to the title above it. */ .gx-head:has(+ .gx-whoami) { margin-bottom: 0; } .gx-eyebrow { margin: 0 0 6px; font-size: var(--gs-fs-xs); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gs-muted); } .gx-eyebrow a { color: inherit; text-decoration: none; } .gx-eyebrow a:hover { color: var(--gs-accent); } .gx-eyebrow span + span::before { content: '·'; margin: 0 .55em; opacity: .6; } .gx-title { margin: 0; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; } .gx-title em { font-style: normal; color: var(--gs-accent); } .gx-sub { margin: 8px 0 0; color: var(--gs-muted); font-size: var(--gs-fs-md); max-width: 70ch; } /* When the screen's figures were last read (`head(checked=…)`): the same words in the same place on every Parts tab that reads the nightly checks, under the sentence that says what the screen is for. */ .gx-checked { margin: 6px 0 0; color: var(--gs-muted); font-size: var(--gs-fs-sm); line-height: 1.45; } .gx-checked i { font-size: 15px; vertical-align: -2px; margin-right: 6px; } .gx-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: var(--gs-fs-xs); color: var(--gs-muted); text-align: right; font-family: var(--gs-font); font-variant-numeric: tabular-nums; letter-spacing: .02em; } .gx-meta b { color: var(--gs-ink-2); font-weight: 600; } .gx-head__actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } @media (max-width: 767.98px) { .gx-meta { align-items: flex-start; text-align: left; } } /* ── section tabs ─────────────────────────────────────────────────── */ .gx-tabs { display: flex; flex-wrap: nowrap; gap: 4px; padding: 4px; overflow-x: auto; scrollbar-width: none; max-width: 100%; width: max-content; } .gx-tabs::-webkit-scrollbar { display: none; } .gx-tab { display: inline-flex; align-items: center; gap: 7px; flex: none; padding: 7px 12px; border-radius: 10px; white-space: nowrap; font-size: var(--gs-fs-sm); font-weight: 700; color: var(--gs-ink-2); text-decoration: none; transition: background var(--gs-dur) var(--gs-ease), color var(--gs-dur) var(--gs-ease); } .gx-tab:hover { background: var(--gs-accent-wash); color: var(--gs-ink); } .gx-tab.is-active { background: var(--gs-accent-wash); color: var(--gs-accent); } .gx-tab i { font-size: 16px; } /* ── the card ─────────────────────────────────────────────────────── */ .gx-card { position: relative; min-width: 0; overflow: hidden; } .gx-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--gs-space-3); padding: 14px 16px 0; } .gx-card__kicker { margin: 0 0 4px; font-size: var(--gs-fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gs-muted); } .gx-card__title { margin: 0; font-size: var(--gs-fs-base); font-weight: 800; letter-spacing: -.01em; } .gx-card__sub { margin: 4px 0 0; font-size: var(--gs-fs-sm); color: var(--gs-muted); line-height: 1.45; max-width: 80ch; } .gx-card__body { padding: 12px 16px 16px; } .gx-card__body--flush { padding: 8px 0 0; } .gx-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--gs-card-line); font-size: var(--gs-fs-sm); color: var(--gs-muted); } .gx-card__foot a { color: var(--gs-accent); font-weight: 700; text-decoration: none; } .gx-card__foot a:hover { text-decoration: underline; } /* The expand control on a chart card: a small round glass button. */ .gx-expand { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--gs-inset); border: 1px solid var(--gs-inset-line); color: var(--gs-ink-2); font-size: 15px; transition: color var(--gs-dur) var(--gs-ease), border-color var(--gs-dur) var(--gs-ease); } .gx-expand:hover { color: var(--gs-accent); border-color: var(--gs-accent-line); } .gx-grid { display: grid; gap: var(--gs-space-3); } .gx-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); } .gx-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } .gx-grid--wide { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } @media (max-width: 991.98px) { .gx-grid--wide { grid-template-columns: minmax(0, 1fr); } } /* ── glance tiles ─────────────────────────────────────────────────── */ .gx-glances { display: grid; gap: var(--gs-space-3); grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); } /* ONE SET OF ROWS FOR THE WHOLE STRIP. Each tile is a subgrid of five rows (label, figure, change, caveat, description) shared with its neighbours, so every label, every figure and every description sits on the same line across the strip, whatever the tile beside it holds. As a column of its own each tile pushed its description to its foot, and a one-line description started lower than a two-line one next to it. Rows with nothing in them are empty and cost nothing: the spacing is a margin on the parts that exist, not a row gap. */ .gx-glance { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: 13px 16px 14px; text-decoration: none; color: inherit; min-height: 0; transition: box-shadow var(--gs-dur) var(--gs-ease), transform var(--gs-dur) var(--gs-ease); } a.gx-glance:hover { box-shadow: var(--gs-card-edge), var(--gs-card-shadow-hover); transform: translateY(-1px); } .gx-glance__label { display: flex; align-items: center; gap: 8px; font-size: var(--gs-fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gs-muted); } .gx-glance__label i { font-size: 15px; letter-spacing: 0; } /* Each part at the TOP of its row: a one-line label beside a two-line one would otherwise sit centred in the taller row and read as lower. */ .gx-glance > * { align-self: start; } .gx-glance > .gx-glance__label { grid-row: 1; } .gx-glance > .gx-glance__value { grid-row: 2; margin-top: 6px; } .gx-glance > :has(> .gx-delta) { grid-row: 3; margin-top: 6px; } .gx-glance > .gx-caveat { grid-row: 4; margin-top: 6px; } .gx-glance > .gx-glance__sub { grid-row: 5; margin-top: 6px; } .gx-glance__value { font-size: clamp(1.35rem, 1.15rem + .6vw, 1.7rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--gs-ink); font-variant-numeric: tabular-nums; } .gx-glance__value small { font-size: .5em; font-weight: 700; color: var(--gs-muted); margin-left: 2px; letter-spacing: 0; } .gx-glance__sub { font-size: var(--gs-fs-xs); color: var(--gs-muted); margin-top: auto; line-height: 1.35; } .gx-glance__sub b { color: var(--gs-ink-2); font-weight: 700; } /* A tile's FIGURE is never coloured. It was red, amber, green or blue by a `tone` on some screens and ink on others, so the same kind of number changed colour from tab to tab, and a red total on a landing page reads as the product being broken. The words carry the state: the label, the sentence, and a caveat when a total leaves something out. */ .gx-glance--muted .gx-glance__value { color: var(--gs-muted); } /* The hero tile is the one figure the page exists for, but it is drawn as a card like the rest: a tinted, denser tile beside three plain ones read as an inconsistency, not as emphasis. It keeps its place (full width on a phone, below) and leads by position. */ /* A card a figure tile links to. The top bar is sticky, so a plain jump put the card's head underneath it; this lands it just below the bar. */ .gx-jump { scroll-margin-top: calc(var(--gs-topbar-h) + var(--gs-topbar-gap) + 16px); border-radius: var(--gs-card-radius); } /* The card a tile sent you to POPS OUT for a moment (app.js, initJumpTarget): it lifts a few pixels, grows a touch, takes the deeper hover shadow and a soft accent glow, then settles back - the cards' own hover, held a beat longer and lit. No ring round the border (the client's call), and eased both ways, so nothing switches on in one frame. */ .gx-jump.is-jumped { position: relative; z-index: 2; animation: gx-jumped 1.6s ease-in-out both; } /* The card pops up a little and its background takes a soft teal wash: a tint INSIDE the card that fades in and out, no glow round its edge. */ @keyframes gx-jumped { 30%, 60% { transform: translateY(-4px) scale(1.015); box-shadow: var(--gs-card-edge), var(--gs-card-shadow-hover); } } .gx-jump.is-jumped::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--gs-accent) 24%, transparent) 0%, transparent 70%), color-mix(in srgb, var(--gs-accent) 9%, transparent); animation: gx-jumped-wash 2.8s ease-in-out both; } @keyframes gx-jumped-wash { 0% { opacity: 0; } 18%, 62% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .gx-jump.is-jumped { animation: none; } .gx-jump.is-jumped::after { animation: gx-jumped-wash 2.8s linear both; } } .gx-delta { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: var(--gs-fs-xs); font-weight: 700; font-family: var(--gs-font); font-variant-numeric: tabular-nums; background: var(--gs-inset); color: var(--gs-ink-2); } .gx-delta--up { background: var(--gs-danger-wash); color: var(--gs-danger); } .gx-delta--down { background: var(--gs-success-wash); color: var(--gs-success); } /* The caveat that travels with an incomplete figure. Same line as the figure's sub-text, in the warning colour, never a footnote. */ .gx-caveat { display: flex; align-items: flex-start; gap: 6px; font-size: var(--gs-fs-xs); color: var(--gs-warning); font-weight: 700; } .gx-caveat i { font-size: 14px; margin-top: 1px; } /* ── the insight line ─────────────────────────────────────────────── */ .gx-insight { display: flex; align-items: center; gap: 12px; padding: 11px 16px; } .gx-insight__icon { width: 30px; height: 30px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 16px; background: var(--gs-accent-wash); color: var(--gs-accent); } .gx-insight--risk .gx-insight__icon { background: var(--gs-danger-wash); color: var(--gs-danger); } .gx-insight--good .gx-insight__icon { background: var(--gs-success-wash); color: var(--gs-success); } /* Information, not an alarm: "being re-checked", "nothing yet". */ .gx-insight--info .gx-insight__icon { background: var(--gs-info-wash); color: var(--gs-info); } /* The dashboard's branch filter — a
dropdown of checkboxes. */ .gx-branchfilter { position: relative; margin: 0; } .gx-branchfilter__pop > summary { list-style: none; cursor: pointer; } .gx-branchfilter__pop > summary::-webkit-details-marker { display: none; } .gx-branchfilter__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: min(300px, calc(100vw - 32px)); padding: 12px 14px; } .gx-branchfilter__list { display: flex; flex-direction: column; gap: 2px; max-height: 260px; overflow-y: auto; margin: 6px 0 10px; } .gx-branchfilter__opt { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: 8px; cursor: pointer; font-size: var(--gs-fs-sm); } .gx-branchfilter__opt:hover { background: var(--gs-accent-wash); } .gx-branchfilter__foot { display: flex; gap: 8px; } .gx-insight__text { margin: 0; font-size: var(--gs-fs-md); line-height: 1.45; color: var(--gs-ink); } .gx-insight__text b { color: var(--gs-accent); } .gx-insight--risk .gx-insight__text b { color: var(--gs-danger); } .gx-insight__src { margin-left: auto; flex: none; font-size: var(--gs-fs-xs); color: var(--gs-muted); font-family: var(--gs-font); font-variant-numeric: tabular-nums; } @media (max-width: 767.98px) { .gx-insight { align-items: flex-start; flex-wrap: wrap; } .gx-insight__src { margin-left: 52px; } } /* ── tones ──────────────────────────────────────────────────────── A tone is two custom properties any element can pick up. Legend keys are small SQUARES in a chart's key — the key of a chart, not a status dot beside a label. */ .gx-dotmark { width: 10px; height: 10px; border-radius: 3px; flex: none; display: inline-block; background: var(--gs-muted); } .gx-tone--danger { --gx-tone: var(--gs-danger); --gx-wash: var(--gs-danger-wash); } .gx-tone--warning { --gx-tone: var(--gs-warning); --gx-wash: var(--gs-warning-wash); } .gx-tone--success { --gx-tone: var(--gs-success); --gx-wash: var(--gs-success-wash); } .gx-tone--info { --gx-tone: var(--gs-info); --gx-wash: var(--gs-info-wash); } .gx-tone--accent { --gx-tone: var(--gs-accent); --gx-wash: var(--gs-accent-wash); } .gx-tone--muted { --gx-tone: var(--gs-muted); --gx-wash: var(--gs-inset); } /* The outcome ring's own two (ReconBucket.CHART): a status colour in dark, a colour of their own in light, where the status teal and grey could not be told from "Used"'s green. */ .gx-tone--partly { --gx-tone: var(--gs-ring-partly); --gx-wash: var(--gs-accent-wash); } .gx-tone--nomatch { --gx-tone: var(--gs-ring-nomatch); --gx-wash: var(--gs-inset); } .gx-tone--shop { --gx-tone: var(--gs-ring-shop); --gx-wash: var(--gs-inset); } .gx-dotmark[class*='gx-tone--'] { background: var(--gx-tone); } .gx-pill { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; padding: 3px 10px; border-radius: 999px; font-size: var(--gs-fs-xs); font-weight: 700; background: var(--gx-wash, var(--gs-inset)); color: var(--gx-tone, var(--gs-ink-2)); } /* ── charts: weekly bars ──────────────────────────────────────────── */ .gx-bars { display: flex; flex-direction: column; gap: 8px; } .gx-bars__plot { position: relative; display: grid; align-items: end; gap: 6px; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: min(var(--gx-h, 180px), var(--gs-bar-h, 140px)); padding-top: 18px; background: linear-gradient(var(--gs-chart-grid), var(--gs-chart-grid)) 0 25% / 100% 1px no-repeat, linear-gradient(var(--gs-chart-grid), var(--gs-chart-grid)) 0 50% / 100% 1px no-repeat, linear-gradient(var(--gs-chart-grid), var(--gs-chart-grid)) 0 75% / 100% 1px no-repeat, linear-gradient(var(--gs-chart-grid), var(--gs-chart-grid)) 0 100% / 100% 1px no-repeat; } .gx-bars__col { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; } .gx-bars__bar { width: min(100%, 34px); border-radius: 8px 8px 3px 3px; height: var(--v, 0%); min-height: 3px; background: linear-gradient(180deg, var(--gs-chart-1) 0%, var(--gs-chart-3) 100%); transition: filter var(--gs-dur) var(--gs-ease); } .gx-bars__col:hover .gx-bars__bar { filter: brightness(1.15); } /* A week that opens its breakdown: the whole column is the button. */ .gx-bars__col--open { appearance: none; border: 0; padding: 0; margin: 0; font: inherit; background: none; color: inherit; cursor: pointer; border-radius: 8px; } .gx-bars__col--open:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 2px; } /* An understated week: hatched, so it cannot be read as a whole figure. */ .gx-bars__bar--partial { background: repeating-linear-gradient(135deg, transparent 0 5px, var(--gs-chart-track) 5px 9px), linear-gradient(180deg, var(--gs-chart-2) 0%, var(--gs-chart-4) 100%); outline: 1px dashed var(--gs-warning); outline-offset: -1px; } .gx-bars__bar--last { background: linear-gradient(180deg, var(--gs-accent) 0%, var(--gs-chart-2) 100%); } /* No figure that week: a gap, drawn AS a gap. */ .gx-bars__gap { width: min(100%, 34px); height: 100%; border-radius: 8px; border: 1px dashed var(--gs-chart-grid); } .gx-bars__tip { position: absolute; bottom: calc(var(--v, 0%) + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: var(--gs-fs-xs); font-weight: 700; font-family: var(--gs-font); font-variant-numeric: tabular-nums; color: var(--gs-muted); opacity: 0; transition: opacity var(--gs-dur) var(--gs-ease); pointer-events: none; } .gx-bars__col:hover .gx-bars__tip, .gx-bars__col.is-last .gx-bars__tip { opacity: 1; color: var(--gs-ink-2); } .gx-bars__axis { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; font-size: var(--gs-fs-xs); color: var(--gs-muted); font-family: var(--gs-font); font-variant-numeric: tabular-nums; text-align: center; } .gx-bars__axis span { overflow: hidden; text-overflow: clip; white-space: nowrap; } @media (max-width: 575.98px) { /* Twelve labels do not fit a phone: every third, unclipped, is enough to read the axis by. */ .gx-bars__axis span { overflow: visible; visibility: hidden; } .gx-bars__axis span:nth-child(3n+1) { visibility: visible; } .gx-bars__plot { gap: 3px; } .gx-glances { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gx-glance { min-height: 0; padding: 14px 14px 16px; } .gx-glance--hero { grid-column: 1 / -1; } .gx-glance__label { letter-spacing: .08em; font-size: 10.5px; } } /* The two weekly charts sit side by side (`recon/_trends.html`): the auto-match columns are drawn in the weekly bars' own hand — the same bar shape and fill, the same dashed gap, the same type on the axis — so the pair reads as one set rather than two products' charts. */ .gx-trendcol .gs-col__track { max-width: 34px; } .gx-trendcol .gs-col__bar { border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--gs-chart-1) 0%, var(--gs-chart-3) 100%); } .gx-trendcol .gs-col__bar--lead { background: linear-gradient(180deg, var(--gs-accent) 0%, var(--gs-chart-2) 100%); } .gx-trendcol .gs-col__gap { border-radius: 8px; border: 1px dashed var(--gs-chart-grid); } .gx-trendcol .gs-col__tick { border-top: 0; margin-top: 8px; padding-top: 0; } /* A short card beside a long one keeps its own height rather than being stretched into a tall empty panel (the dashboard's suppliers, beside the branches needing action). */ .gx-dash-short { align-self: start; } .gx-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--gs-fs-xs); color: var(--gs-muted); } .gx-legend span { display: inline-flex; align-items: center; gap: 6px; } .gx-swatch { width: 12px; height: 12px; border-radius: 4px; flex: none; background: var(--gs-chart-1); } .gx-swatch--partial { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--gs-chart-track) 3px 5px), var(--gs-chart-3); outline: 1px dashed var(--gs-warning); outline-offset: -1px; } .gx-swatch--gap { background: none; border: 1px dashed var(--gs-muted); } /* ── charts: donut ────────────────────────────────────────────────── */ .gx-donut { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .gx-donut__ring { position: relative; width: 128px; height: 128px; flex: none; } .gx-donut__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .gx-donut__track { fill: none; stroke: var(--gs-chart-track); } .gx-donut__seg { fill: none; stroke: var(--gx-tone, var(--gs-muted)); stroke-linecap: butt; transition: stroke-width var(--gs-dur) var(--gs-ease); } .gx-donut__hub { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; } .gx-donut__hub b { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .gx-donut__hub span { font-size: var(--gs-fs-xs); color: var(--gs-muted); max-width: 64px; line-height: 1.25; text-align: center; } .gx-donut__keys { display: flex; flex-direction: column; gap: 5px; flex: 1 1 180px; min-width: 0; } /* Under the donut's key: what one count is, in plain words. */ .gx-donut__note { margin: 10px 0 0; font-size: var(--gs-fs-xs); line-height: 1.5; color: var(--gs-muted); } .gx-donut__note b { color: var(--gs-ink-2); font-weight: 700; } .gx-key { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; font-size: var(--gs-fs-xs); } .gx-key__label { color: var(--gs-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gx-key__n { font-family: var(--gs-font); font-variant-numeric: tabular-nums; color: var(--gs-ink); font-size: var(--gs-fs-xs); } .gx-key__pct { font-family: var(--gs-font); font-variant-numeric: tabular-nums; color: var(--gs-muted); font-size: var(--gs-fs-xs); min-width: 42px; text-align: right; } /* ── charts: horizontal bars ──────────────────────────────────────── */ .gx-hbars { display: flex; flex-direction: column; gap: 8px; container: gxhbars / inline-size; } .gx-hbar { display: grid; grid-template-columns: minmax(96px, 32%) minmax(0, 1fr) auto; align-items: center; gap: 12px; font-size: var(--gs-fs-sm); color: inherit; text-decoration: none; } a.gx-hbar:hover .gx-hbar__label { color: var(--gs-accent); } .gx-hbar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gs-ink-2); font-weight: 600; } .gx-hbar__track { height: 8px; border-radius: 999px; background: var(--gs-chart-track); overflow: hidden; } .gx-hbar__fill { display: block; height: 100%; width: var(--v, 0%); border-radius: 999px; background: linear-gradient(90deg, var(--gs-chart-3), var(--gs-chart-1)); } .gx-hbar__fill--late { background: linear-gradient(90deg, var(--gs-warning), var(--gs-danger)); } .gx-hbar__value { font-family: var(--gs-font); font-variant-numeric: tabular-nums; font-size: var(--gs-fs-sm); color: var(--gs-ink); text-align: right; min-width: 64px; } .gx-hbar__value small { display: block; color: var(--gs-muted); font-size: 10px; } /* A narrow card (a phone, a half-width card): the label and its figure on one line and the bar under them, so no label is cut to "Not on a re…". */ @container gxhbars (max-width: 440px) { .gx-hbar { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "track track"; row-gap: 4px; } .gx-hbar__label { grid-area: label; white-space: normal; } .gx-hbar__track { grid-area: track; } .gx-hbar__value { grid-area: value; } .gx-hbar__value small { display: inline; margin-left: 6px; } } /* ── sparkline ────────────────────────────────────────────────────── */ .gx-spark { width: 96px; height: 28px; flex: none; } .gx-spark polyline { fill: none; stroke: var(--gs-chart-1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .gx-spark circle { fill: var(--gs-accent); } .gx-spark--empty { display: inline-grid; place-items: center; width: 96px; height: 28px; font-size: 10px; color: var(--gs-muted); border: 1px dashed var(--gs-chart-grid); border-radius: 8px; } /* ── lists inside a card ──────────────────────────────────────────── */ .gx-list { display: flex; flex-direction: column; } .gx-row { display: grid; align-items: center; gap: 14px; grid-template-columns: minmax(0, 1fr) auto; padding: 10px 16px; border-top: 1px solid var(--gs-card-line); color: inherit; text-decoration: none; transition: background var(--gs-dur) var(--gs-ease); } .gx-row:first-child { border-top: 0; } a.gx-row:hover, .gx-row--link:hover { background: var(--gs-accent-wash); } .gx-row__main { min-width: 0; display: flex; align-items: center; gap: 12px; } .gx-row__title { font-weight: 700; color: var(--gs-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gx-row__meta { font-size: var(--gs-fs-xs); color: var(--gs-muted); font-family: var(--gs-font); font-variant-numeric: tabular-nums; letter-spacing: .02em; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gx-row__end { display: flex; align-items: center; gap: 14px; justify-content: flex-end; } .gx-money { font-family: var(--gs-font); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--gs-ink); white-space: nowrap; } .gx-money--risk { color: var(--gs-ink); } /* an amount is never red: red is for money already lost or refused (PILLAR1_UI_PATTERNS.md §8.3), and parts not yet on a repair order are neither */ .gx-money--big { font-size: var(--gs-fs-base); } .gx-dash { color: var(--gs-muted); } .gx-initial { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--gs-inset); border: 1px solid var(--gs-inset-line); color: var(--gs-ink-2); } /* ── the exceptions list ──────────────────────────────────────────── */ .gx-exc { display: grid; align-items: center; gap: 16px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto; padding: 11px 16px; border-top: 1px solid var(--gs-card-line); color: inherit; text-decoration: none; position: relative; } .gx-exc:first-child { border-top: 0; } .gx-exc:hover { background: var(--gs-accent-wash); } .gx-exc__part { font-weight: 800; letter-spacing: .01em; color: var(--gs-ink); text-transform: uppercase; font-size: var(--gs-fs-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gx-exc__ids { font-family: var(--gs-font); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--gs-muted); letter-spacing: .04em; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gx-exc__who { font-size: var(--gs-fs-sm); color: var(--gs-ink-2); min-width: 0; } .gx-exc__who small { display: block; font-size: 11px; color: var(--gs-muted); letter-spacing: .08em; text-transform: uppercase; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gx-exc__why { font-size: var(--gs-fs-sm); color: var(--gs-ink-2); min-width: 0; } .gx-exc__why small { display: block; font-size: 11px; color: var(--gs-muted); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 3px; } .gx-exc__end { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .gx-exc__age { font-family: var(--gs-font); font-variant-numeric: tabular-nums; font-size: 11px; color: var(--gs-muted); letter-spacing: .06em; } .gx-exc__age--late { color: var(--gs-danger); font-weight: 700; } .gx-exc__file { position: relative; z-index: 2; } .gx-exc__link { position: absolute; inset: 0; z-index: 1; } @media (max-width: 899.98px) { .gx-exc { grid-template-columns: minmax(0, 1fr) auto; row-gap: 8px; } .gx-exc__who, .gx-exc__why { grid-column: 1 / 2; } .gx-exc__end { grid-row: 1 / 2; grid-column: 2 / 3; } } /* ── filter chips ─────────────────────────────────────────────────── */ .gx-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .gx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; cursor: pointer; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--gs-ink-2); background: var(--gs-inset); border: 1px solid var(--gs-inset-line); font-family: inherit; transition: background var(--gs-dur) var(--gs-ease), color var(--gs-dur) var(--gs-ease); } .gx-chip:hover { color: var(--gs-ink); border-color: var(--gs-accent-line); } .gx-chip.is-active { background: var(--gs-ink); color: var(--gs-bg); border-color: var(--gs-ink); } .gx-chip__n { font-family: var(--gs-font); font-variant-numeric: tabular-nums; opacity: .75; } .gx-select { appearance: none; -webkit-appearance: none; padding: 7px 32px 7px 13px; border-radius: 999px; font: 700 var(--gs-fs-xs)/1.2 var(--gs-font); letter-spacing: .04em; color: var(--gs-ink-2); background: var(--gs-caret) no-repeat right 12px center, var(--gs-inset); /* A field's edge, as every `.form-control` has (--gs-field-edge): at --gs-inset-line (6%) a filter box in dark was a well with no rim. */ border: 1px solid var(--gs-field-edge); cursor: pointer; max-width: 100%; } .gx-select:hover { border-color: var(--gs-accent-line); } /* ── the rail ─────────────────────────────────────────────────────── */ .gx-rail { display: flex; flex-direction: column; gap: 0; } @media (min-width: 992px) { .gx-rail { position: sticky; top: calc(var(--gs-topbar-h) + 16px); max-height: calc(100dvh - var(--gs-topbar-h) - 32px); } .gx-rail .gx-rail__list { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } } .gx-rail__head { padding: 14px 16px 12px; border-bottom: 1px solid var(--gs-card-line); } .gx-rail__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .gx-rail__count { margin: 0 0 10px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; } /* "Open Exceptions" — the one link on the rail people need to KNOW about, so it is a full-width card with a sentence saying what it is, not a footer link. Brand accent, not a warning colour: it is a destination, not a problem. */ .gx-rail__cta { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--gs-accent); border-radius: var(--gs-card-radius-sm, 12px); background: var(--gs-accent-wash); color: inherit; text-decoration: none; transition: background var(--gs-dur) var(--gs-ease); } .gx-rail__cta:hover { background: var(--gs-accent-ring); color: inherit; } .gx-rail__cta-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-size: 17px; color: var(--gs-accent); background: var(--gs-inset); } .gx-rail__cta-body b { display: block; font-size: var(--gs-fs-sm); } .gx-rail__cta-body small { display: block; color: var(--gs-muted); font-size: var(--gs-fs-xs); line-height: 1.35; } .gx-rail__cta > .ti-arrow-right { color: var(--gs-accent); } .gx-rail__high { font-size: var(--gs-fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--gs-danger); display: inline-flex; align-items: center; gap: 5px; } .gx-rail__list { display: flex; flex-direction: column; min-height: 0; } .gx-alert { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 10px 16px; position: relative; border-top: 1px solid var(--gs-card-line); color: inherit; text-decoration: none; transition: background var(--gs-dur) var(--gs-ease); } .gx-alert:first-child { border-top: 0; } a.gx-alert:hover { background: var(--gs-accent-wash); } /* The level is the ICON's tint — not a bar down the item's edge and not a dot beside its title, both of which the product has ruled out. */ .gx-alert__icon { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; background: var(--gx-wash, var(--gs-inset)); color: var(--gx-tone, var(--gs-muted)); } .gx-alert__body { min-width: 0; } .gx-alert__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .gx-alert__title { font-weight: 700; font-size: var(--gs-fs-sm); color: var(--gs-ink); } .gx-alert__at { flex: none; font-size: 11px; color: var(--gs-muted); font-family: var(--gs-font); font-variant-numeric: tabular-nums; } .gx-alert__where { margin-top: 3px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gs-muted); } .gx-alert__text { margin: 4px 0 0; font-size: var(--gs-fs-xs); color: var(--gs-ink-2); line-height: 1.4; } .gx-alert__value { margin-top: 4px; font-family: var(--gs-font); font-variant-numeric: tabular-nums; font-size: var(--gs-fs-md); font-weight: 600; color: var(--gs-danger); } .gx-alert__value small { font-size: var(--gs-fs-xs); color: var(--gs-warning); margin-left: 6px; font-family: var(--gs-font); } .gx-rail__foot { padding: 10px 16px; border-top: 1px solid var(--gs-card-line); font-size: var(--gs-fs-xs); color: var(--gs-muted); } .gx-rail__empty { padding: 26px 20px; text-align: center; color: var(--gs-muted); font-size: var(--gs-fs-sm); } .gx-rail__empty i { display: block; font-size: 26px; color: var(--gs-success); margin-bottom: 8px; } [data-gx-filter-hidden] { display: none !important; } /* ── the category board ───────────────────────────────────────────── */ .gx-board { display: grid; gap: var(--gs-space-4); align-items: start; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); } @media (max-width: 991.98px) { .gx-board { grid-template-columns: minmax(0, 1fr); } } .gx-cats { display: grid; gap: var(--gs-space-4); grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); } .gx-parts { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 16px; max-height: 720px; overflow-y: auto; } .gx-partcard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--gs-inset); border: 1px solid var(--gs-inset-line); cursor: grab; user-select: none; touch-action: none; transition: border-color var(--gs-dur) var(--gs-ease), transform var(--gs-dur) var(--gs-ease), opacity var(--gs-dur) var(--gs-ease); } .gx-partcard:hover { border-color: var(--gs-accent-line); } .gx-partcard:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 2px; } .gx-partcard.is-dragging { opacity: .45; cursor: grabbing; } .gx-partcard__grip { color: var(--gs-muted); font-size: 16px; } .gx-partcard__pn { font-weight: 800; font-size: var(--gs-fs-sm); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gx-partcard__desc { font-size: var(--gs-fs-xs); color: var(--gs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gx-partcard__end { text-align: right; } /* How often the check has raised it: a fact under the amount, in the sentence case and quiet colour of every other fact on these screens — it was amber capitals, which read as an alarm on a filing screen. */ .gx-partcard__seen { font-size: var(--gs-fs-xs); color: var(--gs-muted); font-weight: 600; white-space: nowrap; } .gx-drop { transition: box-shadow var(--gs-dur) var(--gs-ease), border-color var(--gs-dur) var(--gs-ease); } .gx-drop.is-over { border-color: var(--gs-accent); box-shadow: var(--gs-card-edge), 0 0 0 3px var(--gs-accent-ring), var(--gs-card-shadow); } .gx-drop__zone { margin: 0 14px 14px; padding: 14px; border-radius: 14px; border: 1.5px dashed var(--gs-chart-grid); color: var(--gs-muted); font-size: var(--gs-fs-xs); text-align: center; } .gx-drop.is-over .gx-drop__zone { border-color: var(--gs-accent); color: var(--gs-accent); } .gx-drop__rules { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 12px; max-height: 260px; overflow-y: auto; } .gx-rule { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 10px; border-radius: 10px; background: var(--gs-inset); font-size: var(--gs-fs-xs); } .gx-rule__pn { font-weight: 800; letter-spacing: .02em; flex: none; } .gx-rule__desc { color: var(--gs-muted); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1; } .gx-rule__x { background: none; border: 0; color: var(--gs-muted); cursor: pointer; padding: 2px; font-size: 14px; flex: none; } .gx-rule__x:hover { color: var(--gs-danger); } .gx-cat__stat { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 4px 20px 12px; white-space: nowrap; font-size: var(--gs-fs-xs); color: var(--gs-muted); } .gx-cat__stat b { color: var(--gs-ink); font-family: var(--gs-font); font-variant-numeric: tabular-nums; font-size: var(--gs-fs-sm); } .gx-newcat { display: grid; place-content: center; justify-items: center; gap: 8px; min-height: 180px; cursor: pointer; text-align: center; color: var(--gs-muted); font: inherit; font-weight: 700; border: 1.5px dashed var(--gs-chart-grid); border-radius: var(--gs-card-radius); background: transparent; transition: color var(--gs-dur) var(--gs-ease), border-color var(--gs-dur) var(--gs-ease); } .gx-newcat:hover { color: var(--gs-accent); border-color: var(--gs-accent); } .gx-newcat i { font-size: 30px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--gs-accent-wash); color: var(--gs-accent); } .gx-toast { position: fixed; left: 50%; bottom: 24px; z-index: 80; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 11px 18px; border-radius: 999px; font-size: var(--gs-fs-sm); font-weight: 700; color: var(--gs-ink); background: var(--gs-glass-bg-2); border: 1px solid var(--gs-glass-border); -webkit-backdrop-filter: var(--gs-glass-blur); backdrop-filter: var(--gs-glass-blur); box-shadow: var(--gs-card-shadow); transition: opacity var(--gs-dur) var(--gs-ease), transform var(--gs-dur) var(--gs-ease); } .gx-toast.is-on { opacity: 1; transform: translate(-50%, 0); } .gx-toast--error { color: var(--gs-danger); } /* ── a larger chart in a dialog ───────────────────────────────────── */ .gx-dialog .gs-modal__body { max-height: calc(100dvh - 180px); } /* ── one week's breakdown (a bar of the weekly chart, opened) ──────── */ .gx-week__figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gs-space-3); } .gx-week__fig { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--gs-card-line); border-radius: var(--gs-radius, 12px); background: var(--gs-glass-bg-2); } .gx-week__label { font-size: var(--gs-fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gs-muted); } .gx-week__value { font-size: 22px; font-weight: 700; color: var(--gs-ink); font-variant-numeric: tabular-nums; line-height: 1.15; } .gx-week__value small { font-size: var(--gs-fs-sm); font-weight: 600; color: var(--gs-muted); } .gx-week__note { margin-top: var(--gs-space-4); padding: 12px 16px; border: 1px dashed var(--gs-warning); border-radius: var(--gs-radius, 12px); font-size: var(--gs-fs-sm); color: var(--gs-ink-2); } .gx-week__note p { margin: 0 0 6px; } .gx-week__note b { color: var(--gs-ink); } .gx-week__note ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; } .gx-week__h { margin: var(--gs-space-5) 0 0; font-size: var(--gs-fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gs-muted); } .gx-table.gx-week__table { margin-top: var(--gs-space-2); } .gx-week__table tfoot td { border-bottom: 0; border-top: 1px solid var(--gs-card-line); font-weight: 700; color: var(--gs-ink); } .gx-week__link { color: var(--gs-ink); font-weight: 600; text-decoration: none; } .gx-week__link:hover { color: var(--gs-accent); text-decoration: underline; } .gx-week__sub { display: block; font-size: var(--gs-fs-xs); color: var(--gs-muted); margin-top: 2px; } /* The week's two bar charts, side by side: one series each, sorted, the longest bar set to the week's largest figure, value written at the end. */ .gx-week__charts { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--gs-space-3); margin-top: var(--gs-space-4); } .gx-week__panel { min-width: 0; padding: 14px 16px 16px; border: 1px solid var(--gs-card-line); border-radius: var(--gs-radius); background: var(--gs-card-noise), var(--gs-card-fill); background-blend-mode: overlay, normal; box-shadow: var(--gs-card-edge); } .gx-week__panel { display: flex; flex-direction: column; } .gx-week__panel .gx-week__h { margin: 0 0 12px; } .gx-week__total { display: flex; justify-content: space-between; align-items: baseline; margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--gs-card-line); font-size: var(--gs-fs-sm); color: var(--gs-muted); } .gx-week__total b { font-family: var(--gs-font); font-variant-numeric: tabular-nums; color: var(--gs-ink); font-weight: 700; } .gx-week__panel .gx-wkcols { margin-bottom: 14px; } .gx-week__panel .gx-week__key { margin-top: auto; } /* The columns are the weekly chart's own (`gx-bars`), shorter, every one labelled: a week has a handful of branches, not twelve points. */ .gx-wkcols .gx-bars__tip { opacity: 1; color: var(--gs-ink-2); } .gx-wkcols__axis span { white-space: normal; overflow: hidden; line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-family: var(--gs-font); font-size: 11px; color: var(--gs-ink-2); } .gx-wkcols__axis small { display: block; color: var(--gs-muted); font-size: 10px; font-family: var(--gs-font); font-variant-numeric: tabular-nums; } /* The weekly chart shows every third date on a phone; a week's few columns keep every name, wrapped, since a missing name is a bar nobody can read. */ @media (max-width: 575.98px) { .gx-bars__axis.gx-wkcols__axis span { visibility: visible; overflow: hidden; font-size: 10px; overflow-wrap: anywhere; } } /* Supplier identity in the week's ring: fixed per supplier, never by rank. Checked as a set for colour-blind separation on the dark and light glass. */ .gx-sup--napa { --gx-tone: #1ba3bb; } .gx-sup--advancepro { --gx-tone: #9085e9; } .gx-sup--autozone { --gx-tone: #d55181; } [data-theme='light'] .gx-sup--napa { --gx-tone: #0e8fa3; } [data-theme='light'] .gx-sup--advancepro { --gx-tone: #6d5fd6; } [data-theme='light'] .gx-sup--autozone { --gx-tone: #c8457a; } @media (prefers-color-scheme: light) { :root:where(:not([data-theme='dark'])) .gx-sup--napa { --gx-tone: #0e8fa3; } :root:where(:not([data-theme='dark'])) .gx-sup--advancepro { --gx-tone: #6d5fd6; } :root:where(:not([data-theme='dark'])) .gx-sup--autozone { --gx-tone: #c8457a; } } .gx-dotmark[class*='gx-sup--'] { background: var(--gx-tone); } /* The ring sits in the middle of its card, the height of the bars beside it. */ .gx-week__donut { flex: 1; align-content: center; justify-content: center; gap: 18px; } .gx-week__donut .gx-donut__keys { flex: 1 1 160px; } .gx-week__donut .gx-donut__hub b { font-size: 1.05rem; } .gx-week__key { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: var(--gs-fs-xs); color: var(--gs-muted); } /* The week dialog is the card glass itself, over a lighter scrim so the page behind it reads through, frosted, instead of a dark slab. */ .gs-modal.gx-week { background: var(--gs-card-noise), var(--gs-card-fill-hi); background-blend-mode: overlay, normal; -webkit-backdrop-filter: var(--gs-card-blur); backdrop-filter: var(--gs-card-blur); border-color: var(--gs-card-line); box-shadow: var(--gs-card-edge), var(--gs-card-shadow); } .gs-modal.gx-week::backdrop { background: rgb(0 0 0 / .28); } /* On light, the brighter fill is near-white: the plain card fill is the glass. */ [data-theme='light'] .gs-modal.gx-week { background: var(--gs-card-noise), var(--gs-card-fill); background-blend-mode: overlay, normal; } [data-theme='light'] .gs-modal.gx-week::backdrop { background: rgb(12 50 58 / .18); } @media (prefers-color-scheme: light) { :root:where(:not([data-theme='dark'])) .gs-modal.gx-week { background: var(--gs-card-noise), var(--gs-card-fill); background-blend-mode: overlay, normal; } :root:where(:not([data-theme='dark'])) .gs-modal.gx-week::backdrop { background: rgb(12 50 58 / .18); } } .gx-week .gs-modal__head { background: none; border-color: var(--gs-card-line); } .gx-week .gx-week__fig { background: var(--gs-card-noise), var(--gs-card-fill); background-blend-mode: overlay, normal; box-shadow: var(--gs-card-edge); } @media (max-width: 767.98px) { .gx-week__charts { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 575.98px) { .gx-week__figs { grid-template-columns: 1fr 1fr; } .gx-week__fig:first-child { grid-column: 1 / -1; } .gx-week__table tfoot td:empty { display: none; } .gx-week__table td[data-label="Branch"] { display: block; } .gx-week__table td[data-label="Branch"]::before { content: none; } } .gx-table { width: 100%; border-collapse: collapse; font-size: var(--gs-fs-sm); margin-top: var(--gs-space-4); } .gx-table th { text-align: left; font-size: var(--gs-fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gs-muted); padding: 8px 10px; border-bottom: 1px solid var(--gs-card-line); } .gx-table td { padding: 9px 10px; border-bottom: 1px solid var(--gs-line-soft); color: var(--gs-ink-2); vertical-align: top; } .gx-table td.num, .gx-table th.num { text-align: right; white-space: nowrap; font-family: var(--gs-font); font-variant-numeric: tabular-nums; } @media (max-width: 575.98px) { .gx-table thead { display: none; } .gx-table tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--gs-line-soft); } .gx-table td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 0; } .gx-table td::before { content: attr(data-label); color: var(--gs-muted); font-size: var(--gs-fs-xs); } .gx-table td.num { text-align: right; } } /* ── the product-line menu: a feature's screens under its row ─────── */ .gs-topnav .gs-topmenu__group { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px; } .gs-topnav .gs-topmenu__sub { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 7px 10px 7px 12px; border-radius: 10px; color: var(--gs-ink-2); text-decoration: none; margin-left: 12px; border-left: 1px solid var(--gs-card-line); border-top-left-radius: 0; border-bottom-left-radius: 0; } .gs-topnav .gs-topmenu__sub:hover { background: var(--gs-accent-wash); color: var(--gs-ink); } .gs-topnav .gs-topmenu__sub.is-active { color: var(--gs-accent); background: var(--gs-accent-wash); } .gs-topnav .gs-topmenu__sub i { font-size: 17px; justify-self: center; } .gs-topnav .gs-topmenu__subtext { display: flex; flex-direction: column; min-width: 0; } .gs-topnav .gs-topmenu__subname { font-weight: 700; font-size: var(--gs-fs-sm); } .gs-topnav .gs-topmenu__subhint { font-size: 11px; color: var(--gs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (min-width: 992px) { .gs-topnav .gs-topmenu--wide { width: 360px; } } /* ── the drifting globe behind every screen ──────────────────────── The Personal AI lattice in its `ambient` mode (kate-lattice.js): fixed to the viewport, over the backdrop image and under everything else, and never in the way of a click. It fades in once the renderer has taken the canvas, so a page with no WebGL simply never shows it. It steps aside while Kate's own overlay is open, where the full-size globe is the subject. */ .gs-ambient { position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100dvh; pointer-events: none; opacity: 0; transition: opacity 1.2s var(--gs-ease); } .gs-ambient[data-webgl] { opacity: 1; } /* The same globe carried over through a reload of its page (kate-lattice.js, KEEP): it is already there, so it comes back at once rather than fading up as if it were new. */ .gs-ambient[data-resumed] { transition-duration: .2s; } body:has(.gs-kate-overlay:not([hidden])) .gs-ambient { opacity: 0; } @media print { .gs-ambient { display: none; } } /* The quiet particle field (gs-particles.js) behind every screen but the dashboard and Kate's: fixed, under everything, never in the way of a click. It fades up once drawn; no entrance of its own. */ .gs-particles { position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100dvh; pointer-events: none; opacity: 0; transition: opacity .5s var(--gs-ease); } .gs-particles[data-ready] { opacity: 1; } body:has(.gs-kate-overlay:not([hidden])) .gs-particles { opacity: 0; } @media print { .gs-particles { display: none; } } /* ── "Coming soon", where it can be seen ───────────────────────────── Milestone-preview screens show sample figures. Three places say so, in the warning amber the preview pill already uses, so the word always looks the same: the menu item a tag on every preview row in a product line the trigger "Soon" on a line whose every row is a preview the page a strip above the figures of every preview screen */ .gs-topnav .gs-topmenu__soon { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; flex: none; padding: 3px 7px; border-radius: 999px; background: var(--gs-warning-wash); color: var(--gs-warning); } .gs-toplink__label { position: relative; display: inline-block; } .gs-toplink__soon { /* Under the line's name, centred on the WORD, taking no width: the bar measures its items to decide what spills into More. */ position: absolute; left: 50%; top: calc(100% + 3px); transform: translateX(-50%); padding: 1px 6px; border-radius: 999px; pointer-events: none; font-size: 8px; font-weight: 800; letter-spacing: .08em; line-height: 1.3; background: var(--gs-warning-wash); color: var(--gs-warning); white-space: nowrap; } @media (max-width: 991.98px) { /* In the drawer the trigger is a full-width row: the tag sits inline. */ .gs-toplink__soon { position: static; transform: none; margin-left: 6px; vertical-align: 2px; } } /* The account button is the initials alone: the name and the email are already the first thing its menu shows. */ .gs-topbar .gs-topbar__user { padding: 4px; border-radius: 50%; gap: 0; } .gs-topbar .gs-topbar__username, .gs-topbar .gs-topbar__user .gs-topbar__caret { display: none; } .gx-soonbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--gs-space-4); padding: 10px 14px; border-radius: var(--gs-card-radius-sm, 14px); background: var(--gs-warning-wash); border: 1px solid var(--gs-warning); font-size: var(--gs-fs-sm); color: var(--gs-ink-2); } .gx-soonbar__tag { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--gs-warning); color: var(--gs-bg); } .gx-soonbar__text b { color: var(--gs-ink); } /* The dashboard's "who, where, when" line, under the greeting. */ .gx-whoami { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; font-size: var(--gs-fs-xs); color: var(--gs-muted); } .gx-whoami span { display: inline-flex; align-items: center; gap: 6px; } .gx-whoami i { font-size: 14px; color: var(--gs-accent); } /* ── the setup guide ────────────────────────────────────────────────── A drawer that is simply a `gx-card`: the same frosted glass, head and rows as the "Needs attention" rail, so it belongs to the pages it opens over. Nothing here draws a colour of its own; the rows' tints are the same tone washes the rail uses. The only motion is the slide in. */ .gx-setup { justify-content: flex-end; padding: 14px; } .gx-setup__scrim { background: var(--gs-ground); opacity: .6; } .gx-setup__panel { /* Glass, but dense: it opens over whatever page is behind it, and a drawer of instructions has to be readable over any of them. */ background: var(--gs-card-noise), color-mix(in srgb, var(--gs-bg-elevated) 93%, transparent); background-blend-mode: overlay, normal; -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); position: relative; z-index: 1; margin: 0; width: min(420px, 100%); height: 100%; display: flex; flex-direction: column; animation: gx-setup-in .3s var(--gs-ease) both; } @keyframes gx-setup-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } } .gx-setup__bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 16px 12px; border-bottom: 1px solid var(--gs-card-line); } .gx-setup__scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .gx-setup__progress { padding: 14px 16px 6px; } .gx-setup__count { font-size: var(--gs-fs-sm); color: var(--gs-ink-2); margin-bottom: 8px; } .gx-setup__count b { font-size: 1.15rem; color: var(--gs-ink); } .gx-setup__count span { color: var(--gs-muted); } .gx-setup__clear { display: flex; gap: 8px; align-items: flex-start; margin: 8px 16px 0; font-size: var(--gs-fs-sm); color: var(--gs-ink-2); } .gx-setup__clear i { color: var(--gs-success); font-size: 16px; } .gx-setup__group { margin: 18px 16px 6px; } /* The Guide drawer's two sections: "About this page" and "Getting set up". */ .gx-guide { border-bottom: 1px solid var(--gs-card-line); } .gx-guide__summary { list-style: none; cursor: pointer; display: grid; align-items: center; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; padding: 14px 16px; font-weight: 700; } .gx-guide__summary::-webkit-details-marker { display: none; } .gx-guide__summary > .ti:first-child { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--gs-accent-wash); color: var(--gs-accent); } .gx-guide__summary small { display: block; font-weight: 500; color: var(--gs-muted); font-size: var(--gs-fs-xs); } .gx-guide__chev { color: var(--gs-muted); transition: transform var(--gs-dur) var(--gs-ease); } .gx-guide[open] .gx-guide__chev { transform: rotate(180deg); } .gx-guide__body { padding-bottom: 12px; } .gx-guide__what { margin: 0 16px 4px; line-height: 1.5; } .gx-guide__list { margin: 0 16px; padding-left: 18px; font-size: var(--gs-fs-sm); line-height: 1.45; } .gx-guide__list li { margin: 0 0 6px; } .gx-guide__list--do li::marker { content: "→ "; color: var(--gs-accent); } .gx-guide__list--how li::marker { color: var(--gs-accent); font-weight: 700; } .gx-guide__terms { margin: 0 16px; font-size: var(--gs-fs-sm); line-height: 1.45; } .gx-guide__terms dt { font-weight: 700; margin-top: 8px; } .gx-guide__terms dt:first-child { margin-top: 0; } .gx-guide__terms dd { margin: 2px 0 0; color: var(--gs-ink-2); } .gx-setup__list { border-top: 1px solid var(--gs-card-line); } .gx-setup__step.is-done .gx-alert__title { color: var(--gs-muted); } .gx-setup__step.is-next { background: var(--gs-accent-wash); } .gx-setup__note { color: var(--gs-muted); } .gx-setup__cta { margin-top: 8px; } .gs-setup__loading { padding: 16px; margin: 0; } /* ── the help drawer: Gearshift Assistant, and the setup guide ───────── `partials/_setup.html`, `initHelpChat` in app.js. One header that says which view is showing (`data-gs-help-view` on the drawer): the assistant, with a "Setup guide" button; or the guide, with an arrow back. Below it either the conversation and its composer, or the fetched guide. Kept plain on purpose: neutral surfaces, one accent, hairlines rather than boxes, and every colour a token so both themes follow. */ .gx-assist { width: min(380px, 100%); } /* A SIDE SHEET, not a floating card: flush to the right edge, the full height of the window, square corners, one hairline down its left side, sliding in from off-screen (the client's call). */ .gx-setup:has(.gx-assist) { padding: 0; } .gx-setup__panel.gx-assist { height: 100%; margin: 0; border-radius: 0; border: 0; border-left: 1px solid var(--gs-card-line); box-shadow: -24px 0 60px -30px rgb(0 0 0 / .55); animation: gx-sheet-in .28s var(--gs-ease) both; } @keyframes gx-sheet-in { from { transform: translateX(100%); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { .gx-setup__panel.gx-assist { animation: none; } } .gx-assist__head { flex: none; display: flex; align-items: center; gap: 8px; padding: 14px 12px 14px 16px; border-bottom: 1px solid var(--gs-card-line); } .gx-assist__mark { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; background: var(--gs-gradient); color: var(--gs-on-accent); } .gx-assist__titles { flex: 1; min-width: 0; } .gx-assist__title { margin: 0; font-size: var(--gs-fs-lg); font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: var(--gs-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gx-assist__sub { margin: 2px 0 0; font-size: var(--gs-fs-xs); color: var(--gs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The product's outlined button ("Exceptions", "All branches"), at the size of "Ask for help" in the bar. */ .gx-assist__guidebtn { flex: none; min-height: 40px; padding: 0 15px; } .gx-assist__iconbtn { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; cursor: pointer; border: 1px solid transparent; background: none; color: var(--gs-muted); transition: background var(--gs-dur) var(--gs-ease), color var(--gs-dur) var(--gs-ease); } .gx-assist__iconbtn:hover { background: var(--gs-well); color: var(--gs-ink); } .gx-assist__iconbtn:focus-visible { outline: 2px solid var(--gs-accent-ring); outline-offset: 2px; } /* Which view: the header's words, icon and buttons follow it. */ .gx-assist__back, [data-gs-help-view="guide"] .gx-assist__when-ask, [data-gs-help-view="guide"] .gx-assist__guidebtn, [data-gs-help-view="ask"] .gx-assist__when-guide { display: none; } [data-gs-help-view="guide"] .gx-assist__back { display: grid; } [data-gs-help-view="guide"] .gx-assist__mark { background: var(--gs-accent-wash); color: var(--gs-accent); } .gx-setup__scroll[hidden] { display: none; } /* ── the assistant ───────────────────────────────────────────────── */ .gx-help { flex: 1; min-height: 0; display: flex; flex-direction: column; } .gx-help[hidden] { display: none; } .gx-help.is-drop { box-shadow: inset 0 0 0 2px var(--gs-accent-line); } .gx-help__log { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; display: flex; flex-direction: column; gap: 14px; padding: 20px 18px; } /* The welcome: centred, quiet, then a short list of things to ask. */ .gx-help__welcome { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 6px 4px; } .gx-help__welcome[hidden] { display: none; } .gx-help__welcome-mark { width: 52px; height: 52px; border-radius: 16px; margin-bottom: 14px; display: grid; place-items: center; font-size: 26px; background: var(--gs-accent-wash); color: var(--gs-accent); border: 1px solid var(--gs-accent-line); } .gx-help__welcome-title { margin: 0; font-size: var(--gs-fs-lg); font-weight: 800; color: var(--gs-ink); } .gx-help__welcome-text { margin: 6px 0 0; max-width: 32ch; line-height: 1.55; font-size: var(--gs-fs-sm); color: var(--gs-muted); } .gx-help__label { align-self: stretch; text-align: left; margin: 26px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gs-muted); } .gx-help__suggest { align-self: stretch; display: flex; flex-direction: column; gap: 8px; } .gx-help__chip { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 11px 14px; text-align: left; cursor: pointer; border: 1px solid var(--gs-card-line); border-radius: 12px; background: var(--gs-well); color: var(--gs-ink-2); font: inherit; font-size: var(--gs-fs-sm); transition: border-color var(--gs-dur) var(--gs-ease), background var(--gs-dur) var(--gs-ease), color var(--gs-dur) var(--gs-ease); } .gx-help__chip .ti { flex: none; color: var(--gs-muted); font-size: 16px; transition: transform var(--gs-dur) var(--gs-ease), color var(--gs-dur) var(--gs-ease); } .gx-help__chip:hover { border-color: var(--gs-accent-line); background: var(--gs-accent-wash); color: var(--gs-ink); } .gx-help__chip:hover .ti { color: var(--gs-accent); transform: translateX(2px); } .gx-help__chip:focus-visible { outline: 2px solid var(--gs-accent-ring); outline-offset: 2px; } /* The conversation: the person's messages on the right in the accent, the assistant's on the left on a plain surface. */ .gx-help__msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: var(--gs-fs-sm); line-height: 1.55; } .gx-help__msg--you { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--gs-gradient); background-origin: border-box; color: var(--gs-on-accent); font-weight: 600; } .gx-help__msg--bot { align-self: flex-start; border-bottom-left-radius: 4px; background: var(--gs-well); border: 1px solid var(--gs-card-line); color: var(--gs-ink); } .gx-help__msg.is-pending { color: var(--gs-muted); font-style: italic; } .gx-help__msg.is-error { border-color: var(--gs-danger); } .gx-help__text { white-space: pre-wrap; overflow-wrap: anywhere; } .gx-help__shot { display: block; max-width: 100%; max-height: 160px; margin-bottom: 6px; border-radius: 8px; border: 1px solid var(--gs-card-line); object-fit: contain; } .gx-help__note { margin: 8px 0 0; font-size: var(--gs-fs-xs); color: var(--gs-warning); } .gx-help__sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--gs-card-line); font-size: var(--gs-fs-xs); } .gx-help__sources-label { color: var(--gs-muted); } .gx-help__source { padding: 2px 9px; border-radius: var(--gs-radius-pill); border: 1px solid var(--gs-card-line); color: var(--gs-ink-2); white-space: nowrap; text-decoration: none; } a.gx-help__source:hover { border-color: var(--gs-accent-line); color: var(--gs-ink); } /* The composer: one row (attach, the question, send) and a footnote. */ .gx-help__composer { flex: none; padding: 12px 16px 12px; border-top: 1px solid var(--gs-card-line); } .gx-help__box { display: flex; align-items: flex-end; gap: 4px; padding: 5px; border: 1px solid var(--gs-line-strong); border-radius: 14px; background: var(--gs-well); transition: border-color var(--gs-dur) var(--gs-ease), box-shadow var(--gs-dur) var(--gs-ease); } .gx-help__box:focus-within { border-color: var(--gs-accent); box-shadow: 0 0 0 3px var(--gs-accent-ring); } .gx-help__input { flex: 1; min-width: 0; display: block; min-height: 36px; max-height: 140px; padding: 8px 6px; border: 0; outline: 0; resize: none; background: transparent; color: var(--gs-ink); font: inherit; font-size: var(--gs-fs-sm); line-height: 1.45; } .gx-help__input::placeholder { color: var(--gs-muted); } .gx-help__attach { flex: none; width: 36px; height: 36px; margin: 0; border-radius: 10px; display: grid; place-items: center; font-size: 18px; cursor: pointer; color: var(--gs-muted); transition: background var(--gs-dur) var(--gs-ease), color var(--gs-dur) var(--gs-ease); } .gx-help__attach:hover { background: var(--gs-accent-wash); color: var(--gs-accent); } .gx-help__attach:focus-within { outline: 2px solid var(--gs-accent-ring); } .gx-help__send { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; cursor: pointer; border: 0; background: var(--gs-gradient); color: var(--gs-on-accent); transition: opacity var(--gs-dur) var(--gs-ease); } .gx-help__send:disabled { opacity: .45; cursor: default; } .gx-help__foot { margin: 8px 0 0; text-align: center; font-size: 11px; color: var(--gs-muted); } .gx-help__attachment { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 6px; border: 1px solid var(--gs-card-line); border-radius: 10px; font-size: var(--gs-fs-xs); color: var(--gs-ink-2); } .gx-help__attachment[hidden] { display: none; } .gx-help__attachment img { width: 44px; height: 32px; object-fit: cover; border-radius: 6px; } .gx-help__attachment-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gx-help__unattach { border: 0; background: none; color: var(--gs-muted); cursor: pointer; padding: 2px 4px; } .gx-help__error { margin: 6px 0 0; font-size: var(--gs-fs-xs); color: var(--gs-danger); } .gx-help__error[hidden] { display: none; } /* ── the setup guide, inside the same drawer ─────────────────────── */ .gx-assist__guide { padding: 14px 14px 20px; } .gx-assist__guide .gx-guide { border: 1px solid var(--gs-card-line); border-radius: 14px; background: var(--gs-well); overflow: hidden; } .gx-assist__guide .gx-guide + .gx-guide { margin-top: 12px; } .gx-assist__guide .gx-guide__summary { padding: 14px 16px; } .gx-assist__guide .gx-guide[open] > .gx-guide__summary { border-bottom: 1px solid var(--gs-card-line); } .gx-assist__guide .gx-guide__body { padding: 4px 0 14px; } .gx-assist__guide .gx-guide__what { margin: 12px 16px 2px; color: var(--gs-ink-2); font-size: var(--gs-fs-sm); } .gx-assist__guide .gx-setup__group { margin: 16px 16px 6px; } .gx-assist__guide .gx-guide__list { color: var(--gs-ink-2); } .gx-assist__guide .gx-setup__list { border-top: 0; } .gx-assist__guide .gx-setup__step { border-radius: 10px; margin: 0 8px; } @media (max-width: 575.98px) { .gx-setup { padding: 0; } .gx-setup__panel { width: 100%; border-radius: 0; } } @media (prefers-reduced-motion: reduce) { .gx-setup__panel { animation: none; } } /* Kate's orb steps aside while the setup drawer is open; it floats above the drawer otherwise and sits on top of the step you are reading. `visibility`, because its entrance animation holds `opacity` at 1. */ body:has(.gs-setup:not([hidden])) .gs-kate-fab { visibility: hidden; } /* ── the backdrop ──────────────────────────────────────────────────── Here rather than in gs-material.css, which Personal AI's screens do not load: every page, Kate's included, sits on the same picture. The picture every signed-in page sits on (`--gs-app-image`, one per theme), fixed behind the content so the cards slide over it as the page scrolls — which is what makes the frost visible at all. It replaces the three-gradient mesh on this layer; the mesh token is left defined for the screens that still paint it themselves. A fixed PSEUDO-ELEMENT rather than `background-attachment: fixed`, which iOS Safari ignores and which repaints the whole page on every scroll frame elsewhere. `var(--gs-ground)` last, so a slow image load shows the theme's ground rather than a white flash. */ .gs-shell::before { background: var(--gs-app-scrim), var(--gs-app-image) center / cover no-repeat, var(--gs-ground); } /* The sign-in pages (`layouts/auth.html`: sign in, sign up, password reset, not found) sit on the same picture, so the app does not change ground between the door and the rooms. Same fixed layer they already had; their two soft pools stay on top of the picture, and the auth ground under it still shows while the image loads. */ .gs-auth::before { background: radial-gradient(700px 540px at 84% 6%, var(--gs-auth-bloom-1), transparent 68%), radial-gradient(620px 500px at 10% 94%, var(--gs-auth-bloom-2), transparent 70%), var(--gs-app-scrim), var(--gs-app-image) center / cover no-repeat; } @media (max-width: 991.98px) { /* On a phone the call covers the page completely: the stage is a scrolling column there and the page showing through it is noise. */ .gs-kate-overlay__bg { opacity: 1; } } /* ── the top bar's panels, in the cards' own glass ───────────────────── The product-line menus, notifications and the account menu were drawn in `.gs-glass` — a denser, flatter fill than the cards on the pages under them, so they read as a different material. Same tokens as `.gx-card` now: noise, fill, blur, hairline, radius and shadow. Qualified with `.gs-topbar` so it outranks the single-class `.gs-glass` and `.gs-pop__panel` rules (see the note in CLAUDE.md), and the product menus only above lg — below it they are an accordion inside the drawer and must not float as cards. */ .gs-topbar .gs-topbar__actions .gs-pop__panel.gs-glass { background: var(--gs-card-noise), var(--gs-card-fill-hi); background-blend-mode: overlay, normal; -webkit-backdrop-filter: var(--gs-card-blur); backdrop-filter: var(--gs-card-blur); border: 1px solid var(--gs-card-line); border-radius: var(--gs-card-radius); box-shadow: var(--gs-card-edge), var(--gs-card-shadow); } @media (min-width: 992px) { .gs-topbar .gs-topnav .gs-topmenu.gs-glass { background: var(--gs-card-noise), var(--gs-card-fill-hi); background-blend-mode: overlay, normal; -webkit-backdrop-filter: var(--gs-card-blur); backdrop-filter: var(--gs-card-blur); border: 1px solid var(--gs-card-line); border-radius: var(--gs-card-radius); box-shadow: var(--gs-card-edge), var(--gs-card-shadow); } } /* On a phone the preview notice in the bar is its eye icon alone: with its label it pushed the bar 48px past the screen. The amber strip on the page says "Coming soon" in full. */ @media (max-width: 575.98px) { .gs-vision__word, .gs-vision__caret { display: none; } .gs-vision__pill { padding: 6px 8px; } } /* The page facts line: separated by dots, figures in the ink colour. */ /* The current page in the top bar is simply teal: no underline. */ .gs-topnav .gs-toplink.is-active { color: var(--gs-accent); } .gs-topnav .gs-toplink::after { display: none; } /* Manage features: a feature this branch holds is the brand's teal, not the "healthy" green — holding a feature is not a health reading. */ .gs-featurecard.is-held { background: var(--gs-accent-wash); border-color: var(--gs-accent-line); } .gs-featurecard.is-held .gs-featurecard__icon { color: var(--gs-accent); } .gs-featurecard.is-held .gs-badge--success { background: var(--gs-accent-wash); color: var(--gs-accent); } /* ── native dropdowns follow the theme ────────────────────────────── A