/*
 * gtmhub base styles, in the look of HeadLight's own apps (config.headlight.com):
 * Atkinson Hyperlegible, cool neutrals on hue 221, a periwinkle accent, charcoal
 * top and bottom bars, 12px cards. Values read from that app's Bulma variables.
 *
 * Light, dark and "follow the system": <html data-theme="light|dark"> is set before
 * the first paint (index.html) from the viewer's choice; with no attribute the
 * operating system's setting decides. Every color below is a token, and dark mode
 * only redefines tokens, so a view that colors through tokens is right in both.
 *
 * The customer-facing documents (proposals, packets, the Library's pages) keep the
 * HeadLight document brand of their own and never read these tokens.
 *
 * View-specific CSS lives in each view's configuration; this file holds the tokens
 * and the shared vocabulary (page heads, tabs, buttons, fields, cards, tables, chips).
 */
:root
{
	/* Neutrals: HeadLight's scheme, hue 221 at 14% saturation. */
	--gh-bg: hsl(221 14% 96%);
	--gh-surface: hsl(221 14% 100%);
	--gh-surface-2: hsl(221 14% 98%);
	--gh-rule: hsl(221 14% 91%);
	--gh-rule-strong: hsl(221 14% 84%);
	--gh-ink: hsl(221 14% 27%);
	--gh-ink-strong: hsl(221 14% 19%);
	--gh-muted: hsl(221 14% 43%);

	/* The accent (buttons, the current tab, icon tiles) and links. */
	--gh-accent: hsl(233 86% 64%);
	--gh-accent-hover: hsl(233 76% 57%);
	--gh-on-accent: #FFFFFF;
	--gh-link: hsl(233 78% 52%);
	--gh-tint: color-mix(in srgb, var(--gh-accent) 9%, var(--gh-surface));

	/* Status: text-safe shades, and the brighter marks for bars, dots and icons. */
	--gh-ok: hsl(135 76% 25%);
	--gh-warn: hsl(38 100% 30%);
	--gh-bad: hsl(7 76% 44%);
	--gh-info: hsl(189 98% 28%);
	--gh-yellow: hsl(45 100% 48%);
	--gh-teal: hsl(189 98% 34%);
	--gh-green: hsl(135 76% 35%);
	--gh-orange: hsl(25 90% 50%);
	--gh-red: hsl(7 84% 51%);
	--gh-ok-tint: color-mix(in srgb, var(--gh-green) 13%, var(--gh-surface));
	--gh-warn-tint: color-mix(in srgb, var(--gh-yellow) 18%, var(--gh-surface));
	--gh-bad-tint: color-mix(in srgb, var(--gh-red) 11%, var(--gh-surface));
	--gh-info-tint: color-mix(in srgb, var(--gh-teal) 12%, var(--gh-surface));

	/* The top and bottom bars. */
	--gh-chrome: hsl(221 14% 21%);
	/* The training copy's frame (GTMHUB_TRAINING): orange, so it is never mistaken for the real GTM. */
	--gh-training-chrome: hsl(24 85% 38%);
	--gh-training-chrome-deep: hsl(24 85% 30%);
	--gh-chrome-ink: hsl(221 14% 96%);
	--gh-chrome-hover: hsl(0 0% 100% / 0.08);
	/* Emphasis rows and bars inside a page (a total, a sticky summary): charcoal on light,
	   a raised grey on dark, always with light text. */
	--gh-emphasis: hsl(221 14% 23%);
	--gh-on-emphasis: hsl(221 14% 97%);

	--gh-shadow: 0 0.5em 1em -0.125em hsl(221 14% 4% / 0.1), 0 0 0 1px hsl(221 14% 4% / 0.03);
	--gh-shadow-pop: 0 14px 36px hsl(221 30% 8% / 0.22);
	--gh-overlay: hsl(221 30% 10% / 0.45);
	--gh-focus: hsl(233 86% 64% / 0.45);
	--gh-radius: 12px;
	--gh-radius-sm: 8px;

	--gh-sans: "Atkinson Hyperlegible", "Open Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	/* Headings used to be Roboto Slab; the app now uses one family, as HeadLight's apps do. */
	--gh-serif: var(--gh-sans);

	/* Names from the earlier palette, kept so every view's CSS resolves: headings and
	   figures (blue-dark) read as strong ink, bars and icons (blue-mid) as the accent. */
	--gh-blue-dark: var(--gh-ink-strong);
	--gh-blue-mid: var(--gh-accent);
	--gh-accent-tint: var(--gh-warn-tint);

	/* Content column. */
	--gh-content-max: 1180px;
	--gh-shell-inset: max(20px, calc((100% - var(--gh-content-max)) / 2));
	--gh-bar-top: 52px;
	--gh-bar-bottom: 48px;

	color-scheme: light;
}

/* Dark: HeadLight's dark scheme (cards sit darker than the page, as in its apps). */
@media (prefers-color-scheme: dark)
{
	:root:not([data-theme="light"])
	{
		--gh-bg: hsl(221 14% 13%);
		--gh-surface: hsl(221 14% 9%);
		--gh-surface-2: hsl(221 14% 11%);
		--gh-rule: hsl(221 14% 19%);
		--gh-rule-strong: hsl(221 14% 26%);
		--gh-ink: hsl(221 14% 76%);
		--gh-ink-strong: hsl(221 14% 94%);
		--gh-muted: hsl(221 14% 60%);
		--gh-accent-hover: hsl(233 86% 70%);
		--gh-link: hsl(233 95% 78%);
		--gh-tint: color-mix(in srgb, var(--gh-accent) 18%, var(--gh-surface));
		--gh-ok: hsl(135 55% 58%);
		--gh-warn: hsl(45 100% 60%);
		--gh-bad: hsl(7 90% 68%);
		--gh-info: hsl(189 75% 58%);
		--gh-ok-tint: color-mix(in srgb, var(--gh-green) 20%, var(--gh-surface));
		--gh-warn-tint: color-mix(in srgb, var(--gh-yellow) 17%, var(--gh-surface));
		--gh-bad-tint: color-mix(in srgb, var(--gh-red) 20%, var(--gh-surface));
		--gh-info-tint: color-mix(in srgb, var(--gh-teal) 20%, var(--gh-surface));
		--gh-chrome: hsl(221 14% 6%);
		--gh-training-chrome: hsl(24 80% 32%);
		--gh-training-chrome-deep: hsl(24 80% 24%);
		--gh-emphasis: hsl(221 14% 25%);
		--gh-shadow: 0 0 0 1px hsl(221 14% 17%);
		--gh-shadow-pop: 0 14px 36px hsl(0 0% 0% / 0.55), 0 0 0 1px hsl(221 14% 22%);
		--gh-overlay: hsl(221 30% 3% / 0.65);
		color-scheme: dark;
	}
}
:root[data-theme="dark"]
{
	--gh-bg: hsl(221 14% 13%);
	--gh-surface: hsl(221 14% 9%);
	--gh-surface-2: hsl(221 14% 11%);
	--gh-rule: hsl(221 14% 19%);
	--gh-rule-strong: hsl(221 14% 26%);
	--gh-ink: hsl(221 14% 76%);
	--gh-ink-strong: hsl(221 14% 94%);
	--gh-muted: hsl(221 14% 60%);
	--gh-accent-hover: hsl(233 86% 70%);
	--gh-link: hsl(233 95% 78%);
	--gh-tint: color-mix(in srgb, var(--gh-accent) 18%, var(--gh-surface));
	--gh-ok: hsl(135 55% 58%);
	--gh-warn: hsl(45 100% 60%);
	--gh-bad: hsl(7 90% 68%);
	--gh-info: hsl(189 75% 58%);
	--gh-ok-tint: color-mix(in srgb, var(--gh-green) 20%, var(--gh-surface));
	--gh-warn-tint: color-mix(in srgb, var(--gh-yellow) 17%, var(--gh-surface));
	--gh-bad-tint: color-mix(in srgb, var(--gh-red) 20%, var(--gh-surface));
	--gh-info-tint: color-mix(in srgb, var(--gh-teal) 20%, var(--gh-surface));
	--gh-chrome: hsl(221 14% 6%);
	--gh-training-chrome: hsl(24 80% 32%);
	--gh-training-chrome-deep: hsl(24 80% 24%);
	--gh-emphasis: hsl(221 14% 25%);
	--gh-shadow: 0 0 0 1px hsl(221 14% 17%);
	--gh-shadow-pop: 0 14px 36px hsl(0 0% 0% / 0.55), 0 0 0 1px hsl(221 14% 22%);
	--gh-overlay: hsl(221 30% 3% / 0.65);
	color-scheme: dark;
}

/* pict-section-modal (dialogs, confirms, toasts) themes itself through these; they
   follow the tokens, so they flip with the theme. */
:root
{
	--theme-color-brand-primary: var(--gh-accent);
	--theme-color-brand-primary-hover: var(--gh-accent-hover);
	--theme-color-text-on-brand: var(--gh-on-accent);
	--theme-color-text-primary: var(--gh-ink-strong);
	--theme-color-text-secondary: var(--gh-ink);
	--theme-color-text-muted: var(--gh-muted);
	--theme-color-border-default: var(--gh-rule-strong);
	--theme-color-border-light: var(--gh-rule);
	--theme-color-background-primary: var(--gh-surface);
	--theme-color-background-secondary: var(--gh-surface-2);
	--theme-color-background-tertiary: var(--gh-bg);
	--theme-color-background-panel: var(--gh-surface);
	--theme-color-background-hover: var(--gh-tint);
	--theme-color-status-error: var(--gh-bad);
	--theme-color-status-warning: var(--gh-warn);
	--theme-color-status-success: var(--gh-ok);
	--theme-color-status-info: var(--gh-info);
	--theme-typography-family-sans: var(--gh-sans);
	--pict-modal-font-family: var(--gh-sans);
	--pict-modal-bg: var(--gh-surface);
	--pict-modal-fg: var(--gh-ink);
	--pict-modal-border: var(--gh-rule);
	--pict-modal-border-radius: var(--gh-radius);
	--pict-modal-overlay-bg: var(--gh-overlay);
	--pict-modal-btn-primary-bg: var(--gh-accent);
	--pict-modal-btn-border-radius: var(--gh-radius-sm);
	--pict-modal-toast-bg: var(--gh-chrome);
	--pict-modal-toast-fg: var(--gh-chrome-ink);
	--pict-modal-toast-info-bg: var(--gh-accent);
	--pict-modal-toast-success-bg: hsl(135 76% 28%);
	--pict-modal-toast-warning-bg: hsl(38 100% 30%);
	--pict-modal-toast-error-bg: hsl(7 76% 44%);
	--pict-modal-toast-border-radius: var(--gh-radius-sm);
	--pict-modal-toast-shadow: var(--gh-shadow-pop);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--gh-bg); color: var(--gh-ink); font-family: var(--gh-sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--gh-sans); font-weight: 700; color: var(--gh-ink-strong); line-height: 1.2; margin: 0; text-wrap: balance; }
h1 { font-size: 25px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
p { margin: 0; }
a { color: var(--gh-link); text-underline-offset: 2px; }
code { font-family: ui-monospace, Menlo, monospace; font-size: 0.9em; background: var(--gh-surface-2); border: 1px solid var(--gh-rule); padding: 0 4px; border-radius: 4px; }
input, select, textarea, button { color: inherit; }
/* A button a view left unstyled follows the theme instead of the browser's grey (which,
   in dark mode, is light-on-light). */
button:not([class]), button[class=""], input[type="file"]::file-selector-button { font: inherit; font-size: 13px; background: var(--gh-surface); color: var(--gh-ink-strong); border: 1px solid var(--gh-rule-strong); border-radius: 6px; padding: 3px 9px; cursor: pointer; }
button:not([class]):hover, button[class=""]:hover, input[type="file"]::file-selector-button:hover { background: var(--gh-tint); }

/* Visible focus everywhere. */
:focus-visible { outline: 3px solid var(--gh-focus); outline-offset: 2px; }

.pict-icon { display: inline-flex; width: 1em; height: 1em; vertical-align: -0.14em; }
.pict-icon svg { width: 100%; height: 100%; }

/* --- Page head: a card with the page's icon tile, title and a line of what it is for.
       Tabs that follow it (Portfolio's, Finance's) join the card's bottom edge. --- */
.gh-page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 18px; background: var(--gh-surface); border-radius: var(--gh-radius); box-shadow: var(--gh-shadow); padding: 18px 22px; }
.gh-page-head > div:not(.gh-page-actions) { flex: 1 1 320px; min-width: 0; }
.gh-page-head p { color: var(--gh-muted); max-width: 78ch; margin-top: 3px; }
.gh-page-head h1 { overflow-wrap: anywhere; }
.gh-page-tile { flex: none; width: 48px; height: 48px; border-radius: 13px; background: var(--gh-accent); color: var(--gh-on-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 21px; }
.gh-page-tile.admin { background: var(--gh-ink-strong); color: var(--gh-surface); }
.gh-page-tile.finance { background: var(--gh-green); }
.gh-page-tile.library { background: var(--gh-teal); }
.gh-page-tile.warm { background: var(--gh-orange); }
.gh-page-head:has(+ .gh-tabs), .gh-acct-head:has(+ .gh-tabs) { margin-bottom: 0; border-radius: var(--gh-radius) var(--gh-radius) 0 0; padding-bottom: 14px; }

/* Record pages (a deal, an account, a proposal or packet, a contract, discovery) head
   themselves in their own views; they take the same card. */
.gh-deal-head, .gh-acct-head, .gh-prop-head, .gh-cr-head, .gh-disc-head { background: var(--gh-surface); border-radius: var(--gh-radius); box-shadow: var(--gh-shadow); padding: 18px 22px; }

/* --- Tabs: a page's own sections (Portfolio, Finance). Administration uses a rail. --- */
.gh-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin; margin-bottom: 18px; }
.gh-page-head + .gh-tabs, .gh-acct-head + .gh-tabs { background: var(--gh-surface); border-radius: 0 0 var(--gh-radius) var(--gh-radius); box-shadow: var(--gh-shadow); padding: 0 16px; clip-path: inset(0 -20px -20px -20px); border-top: 1px solid var(--gh-rule); }
.gh-tabs a, .gh-tabs button { flex: none; font: inherit; font-size: 14.5px; color: var(--gh-muted); background: none; border: 0; border-bottom: 3px solid transparent; padding: 10px 12px 9px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.gh-tabs a:hover, .gh-tabs button:hover { color: var(--gh-ink-strong); }
.gh-tabs a.on, .gh-tabs button.on { color: var(--gh-ink-strong); font-weight: 700; border-bottom-color: var(--gh-accent); }
.gh-tabs a, .gh-tabs button { display: inline-flex; align-items: center; gap: 6px; }
/* A tab's count (People 1,450): quiet, so the label leads. */
.gh-tab-n { font-size: 11.5px; font-weight: 700; line-height: 1.5; padding: 0 7px; border-radius: 999px; background: var(--gh-surface-2); box-shadow: inset 0 0 0 1px var(--gh-rule); color: var(--gh-muted); }
.gh-tab-n:empty { display: none; }

/* KPI strip: one row on a desktop screen, each tile as wide as what it says; it wraps on
   a narrow screen rather than squeezing. */
/* Figures wrap onto a second row rather than scrolling out of sight (16 Oct QA: the 7th account figure was cut off at 1440). */
.gh-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 16px; }
.gh-kpi { min-width: 0; display: flex; align-items: center; gap: 11px; background: var(--gh-surface); border-radius: 11px; box-shadow: var(--gh-shadow); padding: 9px 16px 9px 13px; }
.gh-kpi .pict-icon { font-size: 17px; }
.gh-kpi b { display: block; font-size: 19px; line-height: 1.15; color: var(--gh-ink-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gh-kpi span { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gh-muted); white-space: normal; }
.gh-kpi.alert { box-shadow: var(--gh-shadow), inset 3px 0 0 var(--gh-red); }
.gh-kpi .ic-green { color: var(--gh-green); } .gh-kpi .ic-accent { color: var(--gh-accent); } .gh-kpi .ic-teal { color: var(--gh-teal); } .gh-kpi .ic-red { color: var(--gh-red); } .gh-kpi .ic-amber { color: var(--gh-yellow); } .gh-kpi .ic-muted { color: var(--gh-muted); }

/* --- Buttons --- */
.gh-btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-weight: 700; font-size: 14px; line-height: 1; padding: 9px 14px; border-radius: var(--gh-radius-sm); border: 1px solid var(--gh-rule-strong); background: var(--gh-surface); color: var(--gh-ink-strong); cursor: pointer; text-decoration: none; white-space: nowrap; }
.gh-btn:hover { background: var(--gh-tint); border-color: color-mix(in srgb, var(--gh-accent) 45%, var(--gh-rule-strong)); }
.gh-btn.primary { background: var(--gh-accent); border-color: var(--gh-accent); color: var(--gh-on-accent); }
.gh-btn.primary:hover { background: var(--gh-accent-hover); border-color: var(--gh-accent-hover); }
.gh-btn.danger { border-color: color-mix(in srgb, var(--gh-bad) 55%, var(--gh-rule-strong)); color: var(--gh-bad); }
.gh-btn.danger:hover { background: var(--gh-bad-tint); }
.gh-btn.quiet { border-color: transparent; background: transparent; color: var(--gh-link); }
.gh-btn.quiet:hover { background: var(--gh-tint); }
.gh-btn.quiet.danger { color: var(--gh-bad); }
.gh-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
/* Every button presses the same way. */
.gh-btn:active:not([disabled]), .pict-modal-dialog .pict-modal-btn:active:not(:disabled) { transform: translateY(1px); }
/* Dialog buttons (pict-section-modal: confirm, prompt, window) look and behave like .gh-btn.
   The library's own button colours never load here, so its buttons printed as bare text
   (George, 2026-09-27). Primary is filled; a destructive confirm is filled red. */
.pict-modal-dialog .pict-modal-btn { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-weight: 700; font-size: 14px; line-height: 1; padding: 9px 14px; border-radius: var(--gh-radius-sm); border: 1px solid var(--gh-rule-strong); background: var(--gh-surface); color: var(--gh-ink-strong); cursor: pointer; white-space: nowrap; }
.pict-modal-dialog .pict-modal-btn:hover:not(:disabled) { background: var(--gh-tint); border-color: color-mix(in srgb, var(--gh-accent) 45%, var(--gh-rule-strong)); }
.pict-modal-dialog .pict-modal-btn--primary { background: var(--gh-accent); border-color: var(--gh-accent); color: var(--gh-on-accent); }
.pict-modal-dialog .pict-modal-btn--primary:hover:not(:disabled) { background: var(--gh-accent-hover); border-color: var(--gh-accent-hover); }
.pict-modal-dialog .pict-modal-btn--danger { background: var(--gh-bad); border-color: var(--gh-bad); color: var(--gh-surface); }
.pict-modal-dialog .pict-modal-btn--danger:hover:not(:disabled) { background: color-mix(in srgb, var(--gh-bad) 85%, var(--gh-ink-strong)); border-color: color-mix(in srgb, var(--gh-bad) 85%, var(--gh-ink-strong)); }
.pict-modal-dialog .pict-modal-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --- Fields --- */
.gh-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.gh-field > span { font-size: 12.5px; font-weight: 700; color: var(--gh-ink-strong); }
.gh-input, .gh-select { font: inherit; font-size: 14px; padding: 8px 11px; border: 1px solid var(--gh-rule-strong); border-radius: var(--gh-radius-sm); background: var(--gh-surface); color: var(--gh-ink-strong); width: 100%; max-width: 100%; min-width: 0; }
.gh-input::placeholder { color: var(--gh-muted); }
.gh-input:focus, .gh-select:focus { border-color: var(--gh-accent); outline: none; box-shadow: 0 0 0 3px var(--gh-focus); }
textarea.gh-input { line-height: 1.45; }
/* In a table a full-width field would shrink with its column to nothing. */
.gh-table .gh-select { width: auto; min-width: 128px; }

/* --- Surfaces --- */
.gh-card { background: var(--gh-surface); border-radius: var(--gh-radius); box-shadow: var(--gh-shadow); padding: 18px 22px; }

.gh-table-wrap { background: var(--gh-surface); border: 1px solid var(--gh-rule); border-radius: var(--gh-radius); }
/* Frozen table headers (findings/17, item 6). A sticky th sticks to its nearest scroll
   container. The wrap has to stay a sideways scroller for wide tables, and overflow-x:auto
   makes it a scroll container on both axes, so a th inside it can never stick to
   #GTMHub-Content as the page scrolls. overflow-x:clip would let it, but cuts wide tables
   off with no way to reach their right-hand columns. So the wrap is the vertical scroller
   too, capped at the window less the two bars and the page's padding: a table shorter
   than that looks and behaves as before; a longer one scrolls inside its frame with its
   header row pinned, and sideways scrolling still works. .gh-table-scroll is the same
   scroller without the frame, for tables inside cards and disclosures. */
.gh-table-wrap, .gh-table-scroll { overflow: auto; max-height: calc(100vh - var(--gh-bar-top) - var(--gh-bar-bottom) - 48px); max-height: calc(100dvh - var(--gh-bar-top) - var(--gh-bar-bottom) - 48px); overscroll-behavior-x: contain; }
@media print { .gh-table-wrap, .gh-table-scroll { max-height: none; overflow: visible; } }
.gh-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.gh-table th, .gh-table td { text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--gh-rule); vertical-align: middle; }
.gh-table th { font-size: 13px; font-weight: 700; color: var(--gh-ink-strong); background: var(--gh-surface); border-bottom-color: var(--gh-rule-strong); }
/* With collapsed borders a sticky cell's own border scrolls away with the rows, so the
   pinned header draws its rule as an inset shadow. The background is opaque in both themes
   (--gh-surface) so rows never show through. */
.gh-table thead th { position: sticky; top: 0; z-index: 2; background: var(--gh-surface); box-shadow: inset 0 -1px 0 var(--gh-rule-strong); }
.gh-table td { color: var(--gh-ink-strong); }
.gh-table tbody tr:nth-child(even) td { background: var(--gh-surface-2); }
/* Sortable headings (GTMHub-Sort.js): the heading is a button; the arrow marks the sorted column. */
.gh-sort { font: inherit; font-weight: 700; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; text-align: inherit; }
.gh-sort:hover { color: var(--gh-link); }
.gh-sort-arrow { font-size: 9px; color: var(--gh-accent); min-width: 9px; }
th.num .gh-sort { flex-direction: row-reverse; }
.gh-table tr:last-child td { border-bottom: 0; }
.gh-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gh-table .muted, .muted { color: var(--gh-muted); }

.gh-chip { display: inline-block; font-size: 12px; font-weight: 700; line-height: 1.5; padding: 1px 9px; border-radius: 999px; background: var(--gh-tint); color: var(--gh-link); }
.gh-chip.ok { background: var(--gh-ok-tint); color: var(--gh-ok); }
.gh-chip.off { background: var(--gh-surface-2); color: var(--gh-muted); box-shadow: inset 0 0 0 1px var(--gh-rule); }
.gh-chip.admin, .gh-chip.warn { background: var(--gh-warn-tint); color: var(--gh-warn); }
.gh-chip.bad { background: var(--gh-bad-tint); color: var(--gh-bad); }
.gh-chip.info { background: var(--gh-info-tint); color: var(--gh-info); }

.gh-empty { text-align: center; padding: 48px 20px; display: grid; gap: 10px; justify-items: center; color: var(--gh-muted); }
.gh-empty .pict-icon { font-size: 34px; color: var(--gh-accent); }
.gh-empty h3 { color: var(--gh-ink-strong); }

.gh-error { color: var(--gh-bad); font-weight: 700; }

/* --- Shared M4 vocabulary (used across views) --- */
/* Pills are filters (a deal's stage, a date range), not navigation: sections use .gh-tabs. */
.gh-pills { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.gh-pills a, .gh-pills button { font: inherit; font-size: 13px; font-weight: 700; padding: 4px 11px; border-radius: 999px; text-decoration: none; color: var(--gh-ink); background: var(--gh-surface); border: 1px solid var(--gh-rule-strong); cursor: pointer; }
.gh-pills a:hover, .gh-pills button:hover { border-color: var(--gh-accent); color: var(--gh-ink-strong); }
.gh-pills a.on, .gh-pills button.on { background: var(--gh-accent); color: var(--gh-on-accent); border-color: var(--gh-accent); }
.gh-seg-toggle { display: inline-flex; border: 1px solid var(--gh-rule-strong); border-radius: var(--gh-radius-sm); overflow: hidden; background: var(--gh-surface); }
.gh-seg-toggle button { font: inherit; font-size: 13px; font-weight: 700; border: 0; background: transparent; color: var(--gh-ink); padding: 7px 12px; cursor: pointer; }
.gh-seg-toggle button + button { border-left: 1px solid var(--gh-rule-strong); }
.gh-seg-toggle button.on { background: var(--gh-accent); color: var(--gh-on-accent); }
.gh-table tr.link { cursor: pointer; }
.gh-table tr.link:hover td { background: var(--gh-tint); }
.gh-hint { font-size: 12px; color: var(--gh-muted); line-height: 1.4; }
.gh-chip.customer { background: var(--gh-accent-tint); color: var(--gh-warn); }
.gh-checks { display: grid; gap: 6px; }
.gh-check { font-size: 13.5px; padding: 8px 10px; border-left: 3px solid var(--gh-green); background: var(--gh-ok-tint); border-radius: 0 6px 6px 0; }
.gh-check.warning { border-color: var(--gh-yellow); background: var(--gh-warn-tint); }
.gh-check.error { border-color: var(--gh-red); background: var(--gh-bad-tint); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
/* A contract's number beside its project name (feedback #6): second, in grey. */
.gh-contract-no { color: var(--gh-muted); font-variant-numeric: tabular-nums; font-weight: 400; }
/* Lapsed, unrenewed contracts (feedback #8), ahead of the next renewal, in amber. */
.gh-past-due { color: var(--gh-warn); font-weight: 700; }
/* Services billing and plan dialogs (services phase 2). */
.gh-svc-methods { flex-wrap: wrap; margin-bottom: 10px; }
.gh-svc-methods label { font-size: 13px; font-weight: 700; padding: 7px 12px; cursor: pointer; color: var(--gh-ink); display: inline-flex; gap: 6px; align-items: center; }
.gh-svc-methods label + label { border-left: 1px solid var(--gh-rule-strong); }
.gh-svc-methods label:has(input:checked) { background: var(--gh-accent); color: var(--gh-on-accent); }
.gh-svc-methods input { margin: 0; accent-color: var(--gh-on-accent); }
.gh-svc-sec { display: grid; gap: 8px; }
.gh-svc-sec[hidden] { display: none; }
.gh-svc-sec .gh-hint { margin: 0; }
.gh-svc-ms-list { display: grid; gap: 6px; }
.gh-svc-ms { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(90px, 0.8fr) minmax(130px, 0.9fr) auto; gap: 6px; align-items: center; }
.gh-svc-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 12px; }
.gh-svc-total { margin: 10px 0 0; font-size: 13.5px; font-weight: 700; padding: 7px 10px; border-radius: var(--gh-radius-sm); }
.gh-svc-total:empty { display: none; }
.gh-svc-total.ok { background: color-mix(in srgb, var(--gh-green) 14%, transparent); color: var(--gh-green); }
.gh-svc-total.warn { background: color-mix(in srgb, var(--gh-warn) 14%, transparent); color: var(--gh-warn); }
.gh-svc-total.bad { background: color-mix(in srgb, var(--gh-bad) 12%, transparent); color: var(--gh-bad); }
.gh-svc-spread { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13.5px; margin-bottom: 10px; }
.gh-svc-spread .gh-input { width: 110px; }
.gh-svc-spread input[type="number"] { width: 64px; }
.gh-svc-spread .gh-select { width: auto; }
.gh-svc-plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; max-height: 46vh; overflow-y: auto; }
.gh-svc-plan-grid label { display: grid; gap: 3px; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gh-muted); }
.gh-input.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Send from the Library: the picker (navigation rethink, Library option A). */
.gh-libpick-list { display: grid; gap: 4px; width: 100%; box-sizing: border-box; max-height: 42vh; overflow-y: auto; border: 1px solid var(--gh-rule); border-radius: var(--gh-radius-sm); padding: 6px; }
.gh-libpick-group { font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gh-muted); padding: 6px 4px 2px; }
.gh-libpick-group[hidden] { display: none; }
.gh-libpick { display: grid; width: 100%; box-sizing: border-box; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--gh-rule); border-radius: 8px; cursor: pointer; }
.gh-libpick[hidden] { display: none; }
.gh-libpick:has(input:checked) { border-color: var(--gh-accent); background: var(--gh-tint); }
.gh-libpick.off { opacity: 0.65; cursor: default; }
.gh-libpick b { display: block; color: var(--gh-ink-strong); font-size: 13.5px; }
.gh-libpick small { display: block; color: var(--gh-muted); font-size: 12px; }
.gh-libpick-end a { font-size: 12px; font-weight: 700; }
/* Send…: one menu for a Library page or an information packet. */
.gh-send { position: relative; display: inline-block; }
.gh-send > summary { list-style: none; }
.gh-send > summary::-webkit-details-marker { display: none; }
.gh-send-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 600; min-width: 240px; background: var(--gh-surface); border: 1px solid var(--gh-rule-strong); border-radius: var(--gh-radius-sm); box-shadow: var(--gh-shadow-pop); padding: 4px; display: grid; gap: 1px; }
.gh-send-menu button { display: grid; gap: 1px; text-align: left; font: inherit; font-size: 14px; background: none; border: 0; border-radius: 6px; padding: 8px 10px; cursor: pointer; color: var(--gh-ink-strong); }
.gh-send-menu button:hover { background: var(--gh-tint); }
.gh-send-menu small { color: var(--gh-muted); font-size: 12px; }
/* Tables as cards on a phone (George, 16 Oct): each row becomes a card, its first cell the
   title and the rest in two columns, each with its column's header as a label (data-label,
   set by the application from the table's header). Grids where the columns are the point
   (Whitespace, the access chart, comparisons) keep .gh-keep-table and scroll in their frame. */
@container gh-content (max-width: 760px)
{
	.gh-table-wrap:has(> table.gh-table:not(.gh-keep-table)), .gh-table-scroll:has(> table.gh-table:not(.gh-keep-table)) { overflow: visible; max-height: none; background: none; border: 0; border-radius: 0; }
	table.gh-table:not(.gh-keep-table) { display: block; font-size: 14px; }
	table.gh-table:not(.gh-keep-table) thead { display: none; }
	table.gh-table:not(.gh-keep-table) tbody, table.gh-table:not(.gh-keep-table) tfoot { display: grid; gap: 8px; }
	table.gh-table:not(.gh-keep-table) tfoot { margin-top: 8px; }
	table.gh-table:not(.gh-keep-table) tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 14px; background: var(--gh-surface); border: 1px solid var(--gh-rule); border-radius: var(--gh-radius-sm); padding: 10px 12px; box-shadow: var(--gh-shadow); }
	table.gh-table:not(.gh-keep-table) td, table.gh-table:not(.gh-keep-table) th { display: block; border: 0; padding: 0; text-align: left; min-width: 0; overflow-wrap: anywhere; white-space: normal !important; position: static; box-shadow: none; background: transparent !important; }
	table.gh-table:not(.gh-keep-table) td * { white-space: normal; }
	table.gh-table:not(.gh-keep-table) td::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gh-muted); margin-bottom: 1px; }
	table.gh-table:not(.gh-keep-table) td[data-label=""]::before, table.gh-table:not(.gh-keep-table) td:not([data-label])::before { content: none; }
	/* The first cell is the card's title; a cell spanning the row (an empty-state line) fills it. */
	table.gh-table:not(.gh-keep-table) td:first-child { grid-column: 1 / -1; font-size: 15px; }
	table.gh-table:not(.gh-keep-table) td:first-child::before { content: none; }
	table.gh-table:not(.gh-keep-table) td[colspan] { grid-column: 1 / -1; }
	table.gh-table:not(.gh-keep-table) td:empty { display: none; }
	table.gh-table:not(.gh-keep-table) td.num, table.gh-table:not(.gh-keep-table) td.r { text-align: left; }
	table.gh-table:not(.gh-keep-table) td .gh-select, table.gh-table:not(.gh-keep-table) td .gh-input { width: 100%; min-width: 0; }
	table.gh-table:not(.gh-keep-table) tr.stale { opacity: 0.6; }
	/* Grids that stay tables: they scroll inside their own frame, never the page. */
	.gh-table-wrap:has(> table.gh-keep-table) { max-width: 100%; }
}

/* A save bar that stays in view while a form has unsaved changes (deal details, Kevin #13). */
.gh-savebar { position: sticky; bottom: calc(var(--gh-bar-bottom) + 10px); z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--gh-ink-strong); color: var(--gh-surface); border-radius: var(--gh-radius-sm); padding: 8px 12px; font-size: 13.5px; box-shadow: var(--gh-shadow); }
.gh-savebar[hidden] { display: none; }
.gh-savebar-act { display: flex; gap: 8px; }
.gh-savebar .gh-btn.quiet { color: var(--gh-surface); }

/* Shared components that pages used to define for themselves (16 Oct QA: page CSS is global, so a second definition restyled the first page). */
.gh-worklist { border: 1px solid var(--gh-rule); border-radius: 8px; background: var(--gh-surface); }
.gh-worklist summary { padding: 10px 14px; cursor: pointer; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.gh-worklist summary b { font-size: 14.5px; }
.gh-worklist .why { padding: 0 14px 8px; font-size: 13px; color: var(--gh-muted); }
.gh-worklist ul { margin: 0; padding: 0 14px 12px 32px; display: grid; gap: 4px; font-size: 13.5px; }
.gh-worklist li span.amt { color: var(--gh-muted); font-variant-numeric: tabular-nums; margin-left: 6px; }
.gh-table td small { display: block; color: var(--gh-muted); }
.gh-md kbd { font-family: ui-monospace, Menlo, monospace; font-size: 0.85em; border: 1px solid var(--gh-rule-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; background: var(--gh-surface-2); }
.gh-md img { max-width: 100%; border: 1px solid var(--gh-rule); border-radius: 6px; }
.gh-md { font-size: 14px; line-height: 1.55; }
.gh-md h1, .gh-md h2, .gh-md h3 { margin: 10px 0 6px; } .gh-md p, .gh-md ul, .gh-md ol, .gh-md table { margin: 0 0 10px; } .gh-md ul, .gh-md ol { padding-left: 20px; }
.gh-md table { border-collapse: collapse; } .gh-md th, .gh-md td { border: 1px solid var(--gh-rule); padding: 4px 8px; text-align: left; } .gh-md code { background: var(--gh-tint); padding: 0 4px; border-radius: 3px; }
.gh-card .num .warn { color: var(--gh-warn); font-weight: 700; }
.gh-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media print {
	#GTMHub-TopBar, #GTMHub-BottomBar, #GTMHub-Help, .gh-page-head .gh-btn, .gh-tabs { display: none !important; }
	#GTMHub-App-Container, #GTMHub-Body, #GTMHub-Content { overflow: visible !important; height: auto !important; }
	.gh-page-head { box-shadow: none; padding: 0 0 8px; }
	}
/* Phones (16 Oct QA): wide markdown tables scroll inside themselves. */
@container gh-content (max-width: 760px)
{
	.gh-md table { display: block; max-width: 100%; overflow-x: auto; }
}

/* The hidden attribute always hides, even over a display utility below. */
[hidden] { display: none !important; }
/* Utilities (phase 2, 16 Oct 2026): the most repeated inline styles as classes. !important keeps
   them as strong as the inline styles they replace, so nothing on screen moves. */
.gh-m0 { margin: 0 !important; }
.gh-mt-6 { margin-top: 6px !important; } .gh-mt-8 { margin-top: 8px !important; }
.gh-mb-8 { margin-bottom: 8px !important; } .gh-mb-10 { margin-bottom: 10px !important; } .gh-mb-12 { margin-bottom: 12px !important; }
.gh-muted { color: var(--gh-muted) !important; }
.gh-fs-13 { font-size: 13px !important; } .gh-fs-135 { font-size: 13.5px !important; }
.gh-stack-8 { display: grid !important; gap: 8px !important; } .gh-stack-10 { display: grid !important; gap: 10px !important; } .gh-stack-12 { display: grid !important; gap: 12px !important; }
.gh-p-5 { padding: 5px !important; } .gh-w-34 { width: 34px !important; }
.gh-row-wrap { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }
/* A wrapper that takes no box of its own, so what it holds stays in its parent's grid or flex (Website status, publishes). */
.gh-contents { display: contents !important; }
.gh-checkfield { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--gh-ink-strong); }