/* ============================================================================
PDR-Team shared stylesheet — deploy.pdr-team.com
Source of truth for the WEB palette. Change colors here, once, never per page.
HARD RULE: this file contains NO element selectors.
Only :root{}, .pdr-* classes, and print rules. No *{} reset, no body{}, no h1{}.
That is deliberate: adding the to any page is a guaranteed visual no-op
until that page opts in by trimming its own :root or using a .pdr-* class.
Adding an element selector here would silently restyle all 37 pages at once.
Bump the ?v= query in every page whenever this file changes.
==========================================================================*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
:root{
/* ── brand ramp — 500 is the primary ─────────────────────────────────── */
--pdr-50: rgb(229,238,246);
--pdr-100: rgb(202,221,237);
--pdr-200: rgb(155,192,224);
--pdr-300: rgb(103,160,209);
--pdr-400: rgb(61,133,195);
--pdr-500: rgb(0,87,164); /* #0057A4 — PRIMARY */
--pdr-600: rgb(0,75,143);
--pdr-700: rgb(0,62,120);
--pdr-800: rgb(0,45,89);
--pdr-900: rgb(0,29,61);
/* ── neutrals ────────────────────────────────────────────────────────── */
--n-50: rgb(250,250,250);
--n-100: rgb(244,244,244);
--n-200: rgb(224,224,224);
--n-300: rgb(198,198,198);
--n-400: rgb(168,168,168);
--n-500: rgb(141,141,141);
--n-600: rgb(111,111,111);
--n-700: rgb(82,82,82);
--n-900: rgb(22,22,22);
--white: rgb(255,255,255);
/* ── status ──────────────────────────────────────────────────────────── */
--green-bg: rgb(236,251,243);
--green-text: rgb(10,105,60);
--green-dot: rgb(18,157,89);
--amber-bg: rgb(255,248,235);
--amber-text: rgb(146,75,0);
--amber-dot: rgb(214,128,0);
--danger: rgb(185,28,28);
--danger-bg: rgb(254,226,226);
/* ── radii — collapses 4/5/6/7/8/10/12/14/20 to five rungs ───────────── */
--r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px; --r-2xl: 14px;
/* ── layout — collapses 560/600/640/768/860/900/960/1100 to four ─────── */
--header-h: 64px;
--sidenav-w: 68px;
--w-sm: 640px; --w-md: 900px; --w-lg: 1100px; --w-xl: 1280px;
/* ── type ────────────────────────────────────────────────────────────── */
--font: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
/* ── elevation ───────────────────────────────────────────────────────── */
--shadow-sm: 0 1px 2px rgba(18,53,83,.06);
--shadow-md: 0 1px 2px rgba(18,53,83,.06), 0 4px 12px rgba(18,53,83,.05);
--shadow-lg: 0 20px 50px rgba(0,0,0,.25);
}
/* ── LEGACY ALIASES ────────────────────────────────────────────────────────
These let the ~1300 existing var(--primary) / var(--navy) / … references keep
resolving after a page's own :root is trimmed, retargeting them to the
canonical ramp. Only names with ONE unambiguous role site-wide belong here.
Deliberately ABSENT: --surface, --bg, --page. Those are semantically inverted
between pages (page background on 15 pages, card fill on 5). Aliasing them
globally would swap figure and ground. They stay page-local.
────────────────────────────────────────────────────────────────────────── */
:root{
--primary: var(--pdr-500);
--brand: var(--pdr-500);
--blue: var(--pdr-500);
--accent: var(--pdr-400);
--navy: var(--pdr-800);
--dark: var(--pdr-800);
--ink: var(--n-900);
--text: var(--n-900);
--muted: var(--n-500);
--gray: var(--n-500);
--border: var(--n-200);
--line: var(--n-200);
--panel: var(--pdr-50);
--ice: var(--pdr-100);
--green: var(--green-text);
--red: var(--danger);
--r: var(--r-lg);
--shadow: var(--shadow-md);
--font-sans: var(--font);
}
/* ── APP SHELL ────────────────────────────────────────────────────────────
Replaces the ~1.5KB inline-styled header duplicated across 14 pages.
Markup:
deploy.pdr-team.com
────────────────────────────────────────────────────────────────────────── */
.pdr-shell{
min-height:var(--header-h); background:var(--white);
border-bottom:1px solid var(--n-200);
display:flex; align-items:center; padding:0 24px; gap:16px;
position:sticky; top:0; z-index:200; font-family:var(--font);
}
.pdr-shell--static{position:static}
.pdr-shell__logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.pdr-shell__logo img{height:28px;display:block}
.pdr-shell__sep{width:1px;height:28px;background:var(--n-200);flex-shrink:0}
.pdr-shell__crumbs{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;flex-wrap:wrap}
.pdr-shell__crumbs a{color:var(--n-500);text-decoration:none}
.pdr-shell__crumbs a:hover{color:var(--pdr-500)}
.pdr-shell__crumbs .is-current{color:var(--n-900)}
.pdr-shell__chev{
width:12px;height:12px;flex-shrink:0;
background:var(--n-300);
-webkit-mask:no-repeat center/12px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
mask:no-repeat center/12px url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}
.pdr-shell__spacer{flex:1}
.pdr-shell__host{font-size:11px;font-weight:600;color:var(--n-500)}
@media (max-width:640px){
.pdr-shell{padding:0 14px;gap:10px}
.pdr-shell__host{display:none}
}
/* Never print the shell — otherwise every PDF gets a 64px white bar on page 1. */
@media print{ .pdr-shell{display:none !important} }