/* =====================================================================
   PROCUREMENT FORCE — DESIGN SYSTEM
   =====================================================================

   Loaded BEFORE each page's own <style> block, so a page can still
   override anything here. Every component class is `pf-` prefixed for
   one specific reason: the existing pages style bare `header{}`,
   `nav{}` and `nav a{}`, and a class selector (0,1,0) beats an element
   selector (0,0,1) regardless of source order. That is what lets the
   shared header drop into 12 pages that each already have opinions
   about what a header looks like, without touching their CSS.

   Two surface modes. Most pages are light on --paper; community.html
   and account.html are dark on --deep. Components carry both, switched
   with [data-surface="dark"] rather than duplicated.
   ===================================================================== */

:root{
  /* ---- Brand ---------------------------------------------------- */
  --charcoal:#2B2D31; --charcoal-deep:#191B1E; --deep:#14161A;
  --blue:#1E9FE0; --blue-light:#6FCBFA; --blue-deep:#0B4E75;
  --paper:#F5F6F8; --paper-dim:#E8EAED; --steel:#6B7280;
  --green:#2FB673; --amber:#E0A526; --alert:#E2574C;
  --gold:#D4A537;
  --linkedin:#0A66C2;

  /* ---- Ink: text colours per surface ---------------------------- */
  --ink:var(--charcoal);
  --ink-soft:var(--steel);
  --ink-faint:#9AA1AB;
  --surface:#fff;
  --surface-sunk:var(--paper);
  --line:var(--paper-dim);

  /* ---- Spacing: 4px base. Named by step, not by pixel value, so
         rhythm stays consistent when a value is tuned. -------------- */
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px;  --s5:24px;
  --s6:32px; --s7:48px;  --s8:64px;  --s9:96px;  --s10:128px;

  /* ---- Type: fluid, so a 1440px hero and a 375px hero are both
         deliberate rather than one being a shrunk version of the
         other. Body text stays fixed — fluid body text is a bug. --- */
  --t-xs:11px; --t-sm:12.5px; --t-base:14px; --t-md:15.5px;
  --t-lg:clamp(17px, 1.2vw + 14px, 20px);
  --t-xl:clamp(21px, 1.6vw + 16px, 27px);
  --t-2xl:clamp(26px, 2.4vw + 18px, 38px);
  --t-3xl:clamp(32px, 3.6vw + 20px, 54px);
  --t-4xl:clamp(38px, 5vw + 20px, 68px);

  --font-display:'Space Grotesk', 'Inter', sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --lh-tight:1.08; --lh-snug:1.28; --lh-body:1.6;
  --track-tight:-.022em; --track-wide:.14em;

  /* ---- Form: the brand's clipped corner. Reserved for primary
         CTAs and credential cards — a signature used everywhere is
         not a signature. ------------------------------------------- */
  --cut:20px; --cut-sm:9px; --shear:-8deg;
  --r-sm:3px; --r-md:6px; --r-lg:12px; --r-full:999px;

  --shadow-sm:0 1px 2px rgba(20,22,26,.04);
  --shadow-md:0 8px 30px -12px rgba(20,22,26,.12);
  --shadow-lg:0 24px 60px -28px rgba(20,22,26,.22);
  --shadow-xl:0 40px 90px -40px rgba(20,22,26,.34);

  --dur:.18s; --dur-slow:.32s; --ease:cubic-bezier(.4,0,.2,1);

  --header-h:72px;
  --container:1180px;
  --measure:64ch;   /* readable line length cap */

  --z-header:100; --z-drawer:200; --z-modal:300;
}

[data-surface="dark"]{
  --ink:#fff;
  --ink-soft:#C9CFD6;
  --ink-faint:#8A929C;
  --surface:var(--charcoal-deep);
  --surface-sunk:var(--deep);
  --line:rgba(255,255,255,.11);
}

/* Honour the OS setting rather than overriding it — someone who has
   asked for less motion has asked for less motion. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* =====================================================================
   LAYOUT
   ===================================================================== */
.pf-container{width:100%; max-width:var(--container); margin:0 auto; padding:0 var(--s5);}
.pf-container--narrow{max-width:760px;}
.pf-container--form{max-width:620px;}

/* Section rhythm as one class, so vertical spacing is a decision made
   once rather than re-guessed per page. */
.pf-section{padding:var(--s9) 0;}
.pf-section--tight{padding:var(--s7) 0;}
.pf-section--flush{padding:var(--s8) 0 0;}
@media (max-width:720px){
  .pf-section{padding:var(--s7) 0;}
  .pf-section--tight{padding:var(--s6) 0;}
}

.pf-stack > * + *{margin-top:var(--s4);}
.pf-stack--lg > * + *{margin-top:var(--s6);}
.pf-stack--sm > * + *{margin-top:var(--s2);}

.pf-grid{display:grid; gap:var(--s5);}
.pf-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.pf-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.pf-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:900px){
  .pf-grid--3,.pf-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:600px){
  .pf-grid--2,.pf-grid--3,.pf-grid--4{grid-template-columns:minmax(0,1fr);}
}

/* =====================================================================
   TYPE
   ===================================================================== */
.pf-display{font-family:var(--font-display); font-weight:700;
  font-size:var(--t-4xl); line-height:var(--lh-tight);
  letter-spacing:var(--track-tight); color:var(--ink);
  text-wrap:balance;}
.pf-h1{font-family:var(--font-display); font-weight:700; font-size:var(--t-3xl);
  line-height:var(--lh-tight); letter-spacing:var(--track-tight); color:var(--ink);
  text-wrap:balance;}
.pf-h2{font-family:var(--font-display); font-weight:700; font-size:var(--t-2xl);
  line-height:var(--lh-snug); letter-spacing:var(--track-tight); color:var(--ink);
  text-wrap:balance;}
.pf-h3{font-family:var(--font-display); font-weight:700; font-size:var(--t-xl);
  line-height:var(--lh-snug); letter-spacing:-.015em; color:var(--ink);}
.pf-h4{font-family:var(--font-display); font-weight:600; font-size:var(--t-lg);
  line-height:var(--lh-snug); color:var(--ink);}

.pf-lede{font-size:var(--t-lg); line-height:var(--lh-body); color:var(--ink-soft);
  max-width:var(--measure);}
.pf-body{font-size:var(--t-md); line-height:var(--lh-body); color:var(--ink-soft);
  max-width:var(--measure);}
.pf-fine{font-size:var(--t-sm); line-height:1.55; color:var(--ink-soft);}

/* The mono eyebrow with its rule is the house label for "what section
   is this" — consistent placement is what makes it read as a system. */
.pf-eyebrow{font-family:var(--font-mono); font-size:var(--t-xs);
  letter-spacing:var(--track-wide); text-transform:uppercase; font-weight:600;
  color:var(--blue); display:flex; align-items:center; gap:var(--s2);}
.pf-eyebrow::before{content:''; width:14px; height:1.5px; background:currentColor;
  display:block; flex:none;}
.pf-eyebrow--plain::before{display:none;}

.pf-accent{color:var(--blue);}
em.pf-accent,.pf-h1 em,.pf-h2 em,.pf-display em{font-style:normal; color:var(--blue);}

/* =====================================================================
   BUTTONS
   44px minimum height throughout — that is the smallest reliable
   touch target, and these are the same controls on a phone.
   ===================================================================== */
.pf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:44px; padding:var(--s3) var(--s5);
  font-family:var(--font-body); font-size:var(--t-base); font-weight:600;
  letter-spacing:.01em; line-height:1;
  border:1.5px solid transparent; border-radius:var(--r-sm);
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
             color var(--dur) var(--ease), transform var(--dur) var(--ease),
             box-shadow var(--dur) var(--ease);
}
.pf-btn:disabled,.pf-btn[aria-disabled="true"]{opacity:.5; cursor:default; pointer-events:none;}

/* The clipped corner marks the primary action and nothing else. */
.pf-btn--primary{
  background:var(--charcoal); color:#fff; border-color:var(--charcoal);
  clip-path:polygon(var(--cut-sm) 0, 100% 0, calc(100% - var(--cut-sm)) 100%, 0 100%);
  border-radius:0;
}
.pf-btn--primary:hover{background:var(--blue); border-color:var(--blue);}
.pf-btn--accent{
  background:var(--blue); color:#fff; border-color:var(--blue);
  clip-path:polygon(var(--cut-sm) 0, 100% 0, calc(100% - var(--cut-sm)) 100%, 0 100%);
  border-radius:0;
}
.pf-btn--accent:hover{background:var(--blue-light); color:var(--charcoal-deep);}

.pf-btn--secondary{background:var(--surface); color:var(--ink); border-color:var(--line);}
.pf-btn--secondary:hover{border-color:var(--blue); color:var(--blue);}

.pf-btn--ghost{background:transparent; color:var(--ink); border-color:currentColor;}
.pf-btn--ghost:hover{background:var(--ink); color:var(--surface);}

.pf-btn--quiet{background:transparent; color:var(--ink-soft); border-color:transparent;
  padding:var(--s2) var(--s3); min-height:36px;}
.pf-btn--quiet:hover{color:var(--blue);}

/* LinkedIn keeps its own brand colour: on a sign-in screen the button
   has to be recognisable at a glance, and that recognition is the whole
   reason someone trusts it. */
.pf-btn--linkedin{background:var(--linkedin); color:#fff; border-color:var(--linkedin);}
.pf-btn--linkedin:hover{background:#0959aa; border-color:#0959aa;}

.pf-btn--lg{min-height:52px; padding:var(--s4) var(--s6); font-size:var(--t-md);}
.pf-btn--block{width:100%;}

/* One focus treatment for every interactive thing in the system. */
.pf-btn:focus-visible,.pf-input:focus-visible,.pf-select:focus-visible,
.pf-nav a:focus-visible,.pf-brand:focus-visible,.pf-identity-pill:focus-visible,
.pf-navdrop-btn:focus-visible,.pf-burger:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--blue); outline-offset:2px;
}

/* =====================================================================
   FORM CONTROLS
   ===================================================================== */
.pf-field{display:block;}
.pf-field + .pf-field{margin-top:var(--s5);}

.pf-label{display:block; font-family:var(--font-mono); font-size:var(--t-xs);
  font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft); margin-bottom:var(--s2);}
.pf-label .pf-opt{text-transform:none; letter-spacing:0; font-family:var(--font-body);
  color:var(--ink-faint); font-weight:400; margin-left:var(--s2);}

.pf-input,.pf-select,.pf-textarea{
  width:100%; min-height:46px;
  padding:var(--s3) var(--s4);
  font-family:var(--font-body); font-size:var(--t-md); color:var(--charcoal);
  background:#FCFCFD; border:1.5px solid var(--paper-dim); border-radius:var(--r-sm);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pf-textarea{min-height:96px; line-height:1.55; resize:vertical;}
.pf-input::placeholder,.pf-textarea::placeholder{color:#A8AEB7;}
.pf-input:focus,.pf-select:focus,.pf-textarea:focus{
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,159,224,.14);
}
.pf-input[aria-invalid="true"],.pf-select[aria-invalid="true"]{border-color:var(--alert);}

/* Native select, restyled — a custom listbox for a single choice is
   worse than the one the OS already ships, especially on mobile. */
.pf-select{
  appearance:none; padding-right:var(--s7); cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath fill='none' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4.5 4.5L10 1'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--s4) center;
}

.pf-help{font-size:var(--t-sm); color:var(--ink-soft); margin-top:var(--s2); line-height:1.5;}
.pf-error{font-size:var(--t-sm); color:var(--alert); margin-top:var(--s2);}

/* =====================================================================
   CARDS + SURFACES
   ===================================================================== */
.pf-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:var(--s6); box-shadow:var(--shadow-sm);
}
.pf-card--flush{padding:0; overflow:hidden;}
.pf-card--lift{box-shadow:var(--shadow-md);}

/* The credential card: clipped corner + rank stripe. Used where the
   page grants access (sign-in, membership) — it reads as a badge,
   which is what it is. */
.pf-credential{
  position:relative; background:#fff; color:var(--charcoal);
  padding:var(--s7) var(--s6) var(--s6) calc(var(--s6) + var(--s2));
  border:none; border-radius:0;
  clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
  box-shadow:var(--shadow-xl), 0 0 0 1px rgba(30,159,224,.10);
}
.pf-credential::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,var(--blue-light),var(--blue) 55%,var(--blue-deep));
}

.pf-divider{display:flex; align-items:center; gap:var(--s3); margin:var(--s5) 0;}
.pf-divider::before,.pf-divider::after{content:''; flex:1; height:1px; background:var(--paper-dim);}
.pf-divider span{font-family:var(--font-mono); font-size:var(--t-sm);
  letter-spacing:.05em; color:var(--steel);}

.pf-badge{display:inline-flex; align-items:center; gap:var(--s1);
  font-family:var(--font-mono); font-size:9px; letter-spacing:.09em;
  text-transform:uppercase; font-weight:600; padding:3px 7px;
  border-radius:var(--r-full); background:var(--blue); color:#fff;}
.pf-badge--quiet{background:var(--paper-dim); color:var(--steel);}
.pf-badge--good{background:var(--green); color:#fff;}
.pf-badge--warn{background:var(--amber); color:#3D2E00;}

.pf-alert{padding:var(--s4); font-size:var(--t-base); line-height:1.55;
  border-left:3px solid var(--steel); background:var(--paper);}
.pf-alert--good{background:#E7F6EE; border-left-color:var(--green); color:#14603C;}
.pf-alert--warn{background:#FFF8E6; border-left-color:var(--amber); color:#6B4E00;}
.pf-alert--error{background:#FDF0EF; border-left-color:var(--alert); color:#8A2B27;}

/* =====================================================================
   HEADER — rendered by assets/pf-nav.js from a single link definition
   ===================================================================== */
.pf-header{
  position:sticky; top:0; z-index:var(--z-header);
  background:rgba(245,246,248,.88); backdrop-filter:blur(12px) saturate(1.4);
  border-bottom:1px solid var(--paper-dim);
}
.pf-header[data-surface="dark"]{
  background:rgba(20,22,26,.86); border-bottom-color:rgba(255,255,255,.09);
}
.pf-header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s5);
  min-height:var(--header-h);
}

.pf-brand{display:flex; align-items:center; gap:var(--s3); flex:none;
  font-family:var(--font-display); font-weight:700; font-size:16px;
  letter-spacing:.01em; color:var(--ink); text-decoration:none;}
.pf-brand span{color:var(--blue);}
.pf-header[data-surface="dark"] .pf-brand span{color:var(--blue-light);}
.pf-brand img{height:28px; width:auto; display:block;}
/* The Force Arrow. Height-driven with width:auto so it keeps its 86:70 ratio;
   the viewBox is cropped to the mark's real bounds (x 7-93, y 15-85) rather
   than the 100x100 drawing space, or it would sit small inside its own
   padding and read as misaligned against the wordmark. */
.pf-brand .pf-mark{height:24px; width:auto; display:block; flex:none;}
@media (max-width:520px){ .pf-brand .pf-mark{height:21px;} }

.pf-nav{display:flex; align-items:center; gap:var(--s6);
  font-size:var(--t-base); font-weight:500;}
.pf-nav a{color:var(--ink); text-decoration:none; padding:var(--s1) 0;
  position:relative; transition:color var(--dur) var(--ease);}
.pf-nav a:hover{color:var(--blue);}

/* Underline grows from the link rather than appearing — cheap, and it
   makes the nav feel built rather than assembled. */
.pf-nav a::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1.5px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.pf-nav a:hover::after{transform:scaleX(1);}
.pf-nav a[aria-current="page"]{color:var(--blue);}
.pf-nav a[aria-current="page"]::after{transform:scaleX(1);}

.pf-header-actions{display:flex; align-items:center; gap:var(--s3); flex:none;}

/* ---- Dropdown ------------------------------------------------------ */
.pf-navdrop{position:relative;}
.pf-navdrop-btn{
  display:inline-flex; align-items:center; gap:var(--s2);
  background:none; border:none; padding:var(--s1) 0; cursor:pointer;
  font-family:inherit; font-size:var(--t-base); font-weight:500; color:var(--ink);
}
.pf-navdrop-btn:hover{color:var(--blue);}
.pf-navdrop-btn .pf-chev{
  width:9px; height:6px; flex:none;
  transition:transform var(--dur-slow) var(--ease);
}
.pf-navdrop[data-open="true"] .pf-chev{transform:rotate(180deg);}

.pf-navdrop-menu{
  position:absolute; top:calc(100% + 14px); left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:290px; padding:var(--s2);
  background:#fff; border:1px solid var(--paper-dim); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
             visibility var(--dur);
}
.pf-navdrop[data-open="true"] .pf-navdrop-menu{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.pf-navdrop-menu a{display:block; padding:var(--s3); border-radius:var(--r-md);
  color:var(--charcoal);}
.pf-navdrop-menu a::after{display:none;}
.pf-navdrop-menu a:hover{background:var(--paper);}
.pf-navdrop-menu b{display:flex; align-items:center; gap:var(--s2);
  font-size:var(--t-base); font-weight:600; color:var(--charcoal);}
.pf-navdrop-menu i{display:block; font-style:normal; font-family:var(--font-mono);
  font-size:var(--t-sm); color:var(--steel); margin-top:3px;}
@media (max-width:900px){
  .pf-navdrop-menu{left:auto; right:0; transform:translateY(-6px); min-width:260px;}
  .pf-navdrop[data-open="true"] .pf-navdrop-menu{transform:translateY(0);}
}

/* ---- Identity pill ------------------------------------------------- */
.pf-identity-pill{
  display:inline-flex; align-items:center; gap:var(--s3);
  background:var(--surface); border:1px solid var(--line);
  padding:5px var(--s4) 5px 5px; border-radius:var(--r-full);
  text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pf-identity-pill:hover{border-color:rgba(30,159,224,.4); box-shadow:var(--shadow-md);}
.pf-avatar{
  width:32px; height:32px; border-radius:50%; flex:none; overflow:hidden;
  background:linear-gradient(145deg,var(--charcoal-deep),var(--charcoal));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; font-weight:700; font-family:var(--font-display);
}
.pf-avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.pf-identity-text{display:flex; flex-direction:column; line-height:1.2; min-width:0;}
.pf-display-name{font-size:13px; font-weight:600; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:150px;}
.pf-identity-sub{font-size:10.5px; color:var(--ink-soft); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:150px;}

/* ---- Mobile: burger + drawer --------------------------------------
   The old nav was `display:none` under 820px with no replacement, so
   there was no navigation on a phone at all. This is that fix.
   -------------------------------------------------------------------- */
.pf-burger{
  display:none; width:44px; height:44px; flex:none;
  align-items:center; justify-content:center;
  background:none; border:1px solid var(--line); border-radius:var(--r-sm);
  cursor:pointer; color:var(--ink);
}
.pf-burger-bars{position:relative; width:18px; height:12px; display:block;}
.pf-burger-bars i,.pf-burger-bars::before,.pf-burger-bars::after{
  content:''; position:absolute; left:0; right:0; height:1.75px; border-radius:2px;
  background:currentColor; transition:transform var(--dur-slow) var(--ease),
    opacity var(--dur) var(--ease);
}
.pf-burger-bars::before{top:0;}
.pf-burger-bars i{top:5.1px; display:block;}
.pf-burger-bars::after{bottom:0;}
[data-drawer="open"] .pf-burger-bars::before{transform:translateY(5.1px) rotate(45deg);}
[data-drawer="open"] .pf-burger-bars i{opacity:0;}
[data-drawer="open"] .pf-burger-bars::after{transform:translateY(-5.1px) rotate(-45deg);}

.pf-scrim{
  position:fixed; inset:0; z-index:var(--z-drawer);
  background:rgba(20,22,26,.5); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity var(--dur-slow) var(--ease), visibility var(--dur-slow);
}
[data-drawer="open"] .pf-scrim{opacity:1; visibility:visible;}

.pf-drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:calc(var(--z-drawer) + 1);
  width:min(86vw, 340px); padding:var(--s5);
  background:var(--charcoal-deep); color:#fff;
  display:flex; flex-direction:column; gap:var(--s2);
  transform:translateX(100%); transition:transform var(--dur-slow) var(--ease);
  overflow-y:auto; overscroll-behavior:contain;
}
[data-drawer="open"] .pf-drawer{transform:translateX(0);}
.pf-drawer-head{display:flex; align-items:center; justify-content:space-between;
  min-height:var(--header-h); margin:calc(var(--s5) * -1) 0 var(--s4);
  padding:var(--s5) 0 0;}
.pf-drawer-close{
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid rgba(255,255,255,.16); border-radius:var(--r-sm);
  color:#fff; font-size:20px; line-height:1; cursor:pointer;
}
.pf-drawer a{display:block; padding:var(--s3) 0; color:#fff; text-decoration:none;
  font-size:var(--t-lg); font-weight:500; border-bottom:1px solid rgba(255,255,255,.08);}
.pf-drawer a:hover{color:var(--blue-light);}
.pf-drawer a[aria-current="page"]{color:var(--blue-light);}
.pf-drawer-label{font-family:var(--font-mono); font-size:var(--t-xs);
  letter-spacing:var(--track-wide); text-transform:uppercase; color:var(--steel);
  margin-top:var(--s5); padding-bottom:var(--s2);}
.pf-drawer-sub{padding-left:var(--s4) !important; font-size:var(--t-md) !important;}
.pf-drawer-foot{margin-top:auto; padding-top:var(--s6);}

@media (max-width:900px){
  .pf-nav{display:none;}
  .pf-burger{display:flex;}
  /* The CTA duplicates what the drawer already offers. */
  .pf-header-actions .pf-btn{display:none;}
}
@media (max-width:560px){
  .pf-identity-sub{display:none;}
  .pf-display-name{max-width:96px;}
  .pf-container{padding:0 var(--s4);}
}

/* Minimal header variant: brand + one way back. Used by the sim, the
   agent, terms — pages where full nav would be a distraction. */
.pf-header--minimal .pf-header-inner{min-height:64px;}
.pf-header-back{display:inline-flex; align-items:center; gap:var(--s2);
  font-size:var(--t-base); color:var(--ink-soft); text-decoration:none;}
.pf-header-back:hover{color:var(--blue);}

/* =====================================================================
   MULTI-SELECT  (assets/pf-forms.js)
   ===================================================================== */
.pf-ms{position:relative;}
.pf-ms-control{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2);
  min-height:46px; padding:var(--s2) var(--s3);
  background:#FCFCFD; border:1.5px solid var(--paper-dim); border-radius:var(--r-sm);
  cursor:text; transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pf-ms:focus-within .pf-ms-control{
  border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,159,224,.14);
}
.pf-ms-chips{display:contents;}
.pf-ms-input{
  flex:1; min-width:120px; border:none; outline:none; background:none;
  font-family:var(--font-body); font-size:var(--t-md); color:var(--charcoal);
  padding:var(--s2) 0;
}
.pf-ms-input::placeholder{color:#A8AEB7;}

.pf-chip{
  display:inline-flex; align-items:center; gap:var(--s1);
  padding:4px 4px 4px var(--s3); border-radius:var(--r-full);
  background:var(--charcoal); color:#fff; font-size:13px; font-weight:500;
  max-width:100%;
}
/* Free-text entries look different from list picks on purpose: one lands
   in the validated column, the other in the free-text one, and a member
   correcting a typo should be able to see which is which. */
.pf-chip--custom{background:var(--blue-deep);}
.pf-chip-x{
  width:20px; height:20px; flex:none; display:flex; align-items:center; justify-content:center;
  border:none; border-radius:50%; background:rgba(255,255,255,.16); color:#fff;
  font-size:15px; line-height:1; cursor:pointer; padding:0;
}
.pf-chip-x:hover{background:rgba(255,255,255,.34);}

.pf-ms-panel{
  position:absolute; z-index:var(--z-modal); left:0; right:0; top:calc(100% + 6px);
  max-height:300px; overflow-y:auto; overscroll-behavior:contain;
  padding:var(--s2);
  background:#fff; border:1px solid var(--paper-dim); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg);
  display:none;
}
.pf-ms[data-open="true"] .pf-ms-panel{display:block;}
.pf-ms-group{
  font-family:var(--font-mono); font-size:var(--t-xs); letter-spacing:var(--track-wide);
  text-transform:uppercase; color:var(--steel);
  padding:var(--s3) var(--s3) var(--s2);
}
.pf-ms-opt{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s3); border-radius:var(--r-sm); cursor:pointer;
  font-size:var(--t-md); color:var(--charcoal);
}
.pf-ms-opt.is-active{background:var(--paper);}
.pf-ms-opt[aria-selected="true"]{color:var(--blue); font-weight:500;}
.pf-ms-check{
  width:18px; height:18px; flex:none; display:flex; align-items:center; justify-content:center;
  border:1.5px solid var(--paper-dim); border-radius:3px;
  font-size:12px; line-height:1; color:#fff;
}
.pf-ms-opt[aria-selected="true"] .pf-ms-check{background:var(--blue); border-color:var(--blue);}
.pf-ms-opt--add .pf-ms-check{border-style:dashed; color:var(--blue); background:none;}
.pf-ms-opt--add{color:var(--blue);}
.pf-ms-empty{padding:var(--s4); font-size:var(--t-base); color:var(--steel); text-align:center;}

/* =====================================================================
   SITEWIDE BANNER — for states the visitor must see before they act,
   e.g. a feature deliberately offline. Sits under the sticky header.
   ===================================================================== */
.pf-banner{
  background:#FFF8E6; border-bottom:1px solid #F0E3BE; color:#6B4E00;
  font-size:var(--t-base); line-height:1.5; text-align:center;
  padding:var(--s3) var(--s4);
}
.pf-banner b{font-weight:700;}
.pf-banner a{color:#6B4E00; text-decoration:underline;}

/* =====================================================================
   UTILITIES
   ===================================================================== */
.pf-hidden{display:none !important;}
.pf-sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
/* Keyboard users get to skip the nav. */
.pf-skip{position:absolute; left:var(--s4); top:calc(var(--s4) * -4); z-index:var(--z-modal);
  background:var(--charcoal); color:#fff; padding:var(--s3) var(--s4);
  border-radius:var(--r-sm); text-decoration:none; font-size:var(--t-base);
  transition:top var(--dur) var(--ease);}
.pf-skip:focus{top:var(--s4);}
body[data-drawer="open"]{overflow:hidden;}