/*
  PlanGRC unified brand layer (Phase 0, November 2026).
  Loaded last so the signed-in app, dialogs and the public site share one
  palette and one typeface. New work should use the --pg-* tokens below;
  legacy variables are remapped here so older modules follow the brand
  until they are refactored.
*/

@font-face{font-family:Inter;src:url('/assets/fonts/Inter-Regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-SemiBold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url('/assets/fonts/Inter-Bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}

:root {
  /* Brand */
  --pg-navy: #142c49;
  --pg-navy-deep: #0d1f35;
  --pg-teal: #007f78;
  --pg-teal-hover: #006b65;
  --pg-teal-soft: #e2f2f0;
  --pg-teal-tint: #f1f8f7;

  /* Neutrals */
  --pg-ink: #13253a;
  --pg-text: #374151;
  --pg-muted: #5b6b7c;
  --pg-line: #d5e0e6;
  --pg-surface: #ffffff;
  --pg-surface-soft: #f5f8fa;

  /* Status (always paired with a text label) */
  --pg-good: #0f7a4d;
  --pg-good-bg: #e8f6ef;
  --pg-warn: #9a5a00;
  --pg-warn-bg: #fff6e5;
  --pg-risk: #b42335;
  --pg-risk-bg: #fdecee;
  --pg-info: #1d5fa8;
  --pg-info-bg: #eaf2fb;

  /* Type */
  --pg-font: Manrope, "Segoe UI", Arial, sans-serif;
  /* Typography (unification wave B0, 7 Nov 2026): Manrope for headings and display numbers,
     Inter for body text, tables and forms, Noto Sans Arabic for Arabic, system mono for codes. */
  --pg-font-heading: Manrope, "Plan Arabic", "Segoe UI", Arial, sans-serif;
  --pg-font-body: Inter, "Plan Arabic", "Segoe UI", Arial, sans-serif;
  --pg-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pg-font-arabic: "Plan Arabic", HomepageArabic, Arial, sans-serif;
  --pg-text-meta: 12px;
  --pg-text-body: 14px;
  --pg-weight-heading: 700;

  /* Shape and focus */
  --pg-radius: 8px;
  --pg-radius-card: 12px;
  --pg-focus: 0 0 0 3px rgb(0 127 120 / .28);

  /* Charts (dashboard widgets): stages run dark to light as work completes; severity runs calm to alarming */
  --pg-stage-1: #2c4664;
  --pg-stage-2: #48668a;
  --pg-stage-3: #0f8f86;
  --pg-stage-4: #2fb3a6;
  --pg-stage-5: #8fe3d8;
  --pg-sev-low: #7fb8b2;
  --pg-sev-medium: #d6a24a;
  --pg-sev-high: #c46a3f;
  --pg-sev-critical: #b42335;
  --pg-track: #e2e9ee;
  --pg-ink-on-dark: #b9c9d8;

  /* Legacy variables now follow the brand */
  --blue: var(--pg-teal);
  --blue-dark: var(--pg-teal-hover);
  --sidebar-bg: var(--pg-navy);
  --corp-navy: var(--pg-navy);
  --corp-teal: var(--pg-teal);
  --text: var(--pg-ink);
  --muted: var(--pg-muted);
  --line: var(--pg-line);
}

/* Signed-in product: Inter for text, tables and forms; Manrope headings (below). Georgia is retired. */
body:not(.public-marketing-active),
body:not(.public-marketing-active) :is(button, input, select, textarea) {
  font-family: var(--pg-font-body);
}
body:not(.public-marketing-active) :is(code, kbd, samp) { font-family: var(--pg-font-mono); }

body:not(.public-marketing-active) :is(h1, h2, h3, h4),
body:not(.public-marketing-active) :is(h1, h2, h3, h4) * ,
:is(dialog, [role="dialog"]) :is(h1, h2, h3) {
  font-family: var(--pg-font) !important;
  font-weight: var(--pg-weight-heading) !important;
  letter-spacing: -.02em !important;
}

html[dir="rtl"] {
  --pg-font-heading: "Plan Arabic", Manrope, Arial, sans-serif;
  --pg-font-body: "Plan Arabic", var(--pg-font-body);
}
html[dir="rtl"] body:not(.public-marketing-active),
html[dir="rtl"] body:not(.public-marketing-active) :is(h1, h2, h3, h4, button, input, select, textarea) {
  font-family: var(--pg-font-arabic) !important;
  letter-spacing: 0 !important;
}

/* Readable metadata: nothing in the app falls below 12px. */
body:not(.public-marketing-active) :is(.assurance-detail-list dt, .assurance-detail-list dd, .governance-register-inspector dt, .governance-register-inspector dd) {
  font-size: max(var(--pg-text-meta), 1em) !important;
}

/* Consistent keyboard focus. */
body:not(.public-marketing-active) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--pg-teal);
  outline-offset: 2px;
  box-shadow: var(--pg-focus);
}

/* The floating back-to-top control must not cover panels in the app. */
body:not(.public-marketing-active) .scroll-top-button {
  width: 40px !important;
  height: 40px !important;
  opacity: .9;
}

/* Homepage AI step tabs: the selected step must be the most prominent. */
body.public-marketing-active .b1-advisor-tabs button {
  background: transparent !important;
  color: #cfe7e3 !important;
  box-shadow: none !important;
  border: 1px solid rgb(207 231 227 / .28) !important;
}
body.public-marketing-active .b1-advisor-tabs button[aria-selected="true"] {
  background: var(--pg-teal) !important;
  color: #fff !important;
  border-color: var(--pg-teal) !important;
}

/* Signed-in app: remaining accent colours follow the brand. */
:root, body #appShell { --workspace-accent: var(--pg-teal) !important; }
body:not(.public-marketing-active) .workspace-navigation a.active { background: var(--pg-teal); }
.scroll-top-button { background: var(--pg-teal) !important; border-color: var(--pg-teal-hover) !important; box-shadow: 0 10px 24px rgb(0 127 120 / .25) !important; }
.scroll-top-button:hover { background: var(--pg-teal-hover) !important; }

/* Readable text: nothing a person needs to read renders below 12px (2 Nov 2026 capture). */
body:not(.public-marketing-active) #appShell :is(
  .drilldown-tile span, .drilldown-tile strong, .drilldown-tile small,
  small, td, th, kbd, summary,
  .work-queue-link, .work-queue-priority, .work-queue-status,
  .assurance-row-action, .assurance-badge, .assurance-list-footer span,
  .risk-operations-editor summary, .app-icon-button span
):not(.pg-dash *) { font-size: 12px !important; }
body:not(.public-marketing-active) #appShell :is(td, th) { line-height: 1.4; }
/* Row titles stay more prominent than their secondary line. */
body:not(.public-marketing-active) #appShell td strong:not(.pg-dash *) { font-size: 13px !important; }

/* Work queue: the table scrolls instead of clipping, and action links use the brand colour. */
body:not(.public-marketing-active) #appShell .work-queue-table-wrap { overflow-x: auto; }
body:not(.public-marketing-active) #appShell .work-queue-table :is(th, td) { padding-inline: 10px; }
body:not(.public-marketing-active) #appShell :is(.work-queue-link, .assurance-row-action, .work-queue-inspector a) { color: var(--pg-teal) !important; }
body:not(.public-marketing-active) #appShell .work-queue-tabs [aria-selected="true"] { color: var(--pg-teal) !important; border-color: var(--pg-teal) !important; }

/* Command center (Build 10): four decision KPIs, then priority work; charts on request. */
.pg-command { --command-blue: var(--pg-teal); --command-teal: var(--pg-teal); }
.pg-command .grc-command-title h2 { font-size: 30px; }
.pg-button {
  align-items: center; border-radius: var(--pg-radius); cursor: pointer; display: inline-flex;
  font: 600 14px/1 var(--pg-font); gap: 8px; min-height: 40px; padding: 0 16px;
}
.pg-button.primary { background: var(--pg-teal); border: 1px solid var(--pg-teal); color: #fff; }
.pg-button.primary:hover { background: var(--pg-teal-hover); }
.pg-button.secondary { background: var(--pg-surface); border: 1px solid var(--pg-line); color: var(--pg-navy); }
.pg-button.secondary:hover { border-color: var(--pg-teal); color: var(--pg-teal); }
.pg-kpis { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 4px 0 16px; }
.pg-kpi {
  background: var(--pg-surface); border: 1px solid var(--pg-line); border-radius: var(--pg-radius-card);
  border-top: 4px solid var(--pg-muted); color: var(--pg-ink); cursor: pointer; display: grid; gap: 6px;
  padding: 16px 18px; text-align: start;
}
.pg-kpi:hover { border-color: var(--pg-teal); box-shadow: 0 6px 18px rgb(20 44 73 / .08); }
.pg-kpi.good { border-top-color: var(--pg-good); }
.pg-kpi.warn { border-top-color: var(--pg-warn); }
.pg-kpi.risk { border-top-color: var(--pg-risk); }
.pg-kpi-label { color: var(--pg-muted); font-size: 13px; font-weight: 700; }
.pg-kpi-value { color: var(--pg-navy); font-size: 34px; font-weight: 800; line-height: 1.1; }
.pg-kpi.risk .pg-kpi-value { color: var(--pg-risk); }
.pg-kpi-detail { color: var(--pg-text); font-size: 13px; line-height: 1.4; }
.pg-command-notice {
  background: var(--pg-warn-bg); border: 1px solid #f0d49a; border-radius: var(--pg-radius); color: var(--pg-warn);
  cursor: pointer; display: block; font-size: 14px; font-weight: 600; margin: 0 0 16px; padding: 10px 14px; text-align: start; width: 100%;
}
.pg-command-priority { margin-bottom: 16px; }
.pg-command-details { border: 1px solid var(--pg-line); border-radius: var(--pg-radius-card); background: var(--pg-surface-soft); }
.pg-command-details > summary {
  color: var(--pg-navy); cursor: pointer; font-size: 15px !important; font-weight: 700; list-style-position: inside; padding: 14px 18px;
}
.pg-command-analytics { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); padding: 0 14px 14px; }
.pg-command-analytics > .grc-command-panel { min-width: 0; overflow: hidden; }
@media (max-width: 1100px) { .pg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .pg-kpis { gap: 10px; }
  .pg-kpi { padding: 12px 14px; }
  .pg-kpi-value { font-size: 28px; }
  .pg-command .grc-command-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .pg-command-analytics { grid-template-columns: minmax(0, 1fr); padding: 0 8px 8px; }
}
/* Command center fixes after the 3 Nov capture: KPI type is exempt from the 12px
   floor above, buttons keep the brand colours, and the table scrolls on phones. */
body:not(.public-marketing-active) #appShell .pg-kpi .pg-kpi-value { font-size: 34px !important; line-height: 1.1; }
body:not(.public-marketing-active) #appShell .pg-kpi .pg-kpi-label,
body:not(.public-marketing-active) #appShell .pg-kpi .pg-kpi-detail { font-size: 13px !important; }
body:not(.public-marketing-active) #appShell :is(.pg-command, .pg-command-page) .pg-button { font-size: 14px !important; }
body:not(.public-marketing-active) #appShell :is(.pg-command, .pg-command-page) .pg-button.primary { background: var(--pg-teal) !important; border-color: var(--pg-teal) !important; color: #fff !important; }
body:not(.public-marketing-active) #appShell :is(.pg-command, .pg-command-page) .pg-button.primary:hover { background: var(--pg-teal-hover) !important; }
body:not(.public-marketing-active) #appShell :is(.pg-command, .pg-command-page) .pg-button.secondary { background: var(--pg-surface) !important; border-color: var(--pg-line) !important; color: var(--pg-navy) !important; }
.pg-command, .pg-command-priority { min-width: 0; max-width: 100%; }
.pg-command-priority { contain: inline-size; overflow: hidden; }
.pg-command-priority .grc-command-table-wrap { max-width: 100%; overflow-x: auto; position: relative; }
@media (max-width: 560px) {
  body:not(.public-marketing-active) #appShell .pg-kpi .pg-kpi-value { font-size: 28px !important; }
  .pg-command .grc-command-header { align-items: stretch; flex-direction: column; }
}
/* Arabic: the account menu opens towards the page, not off the left edge (it widened phone pages). */
html[dir="rtl"] .app-user-menu-panel { left: 0; right: auto; }