/* ============================================================================
   pf-staff.css, the 2027 chrome for the STAFF and ACCOUNT surfaces.
   Command, Sales, HQ, Organiser, Vendor, Creator, Investors, Scan, Box, Stall
   and the guest wallet. Loaded AFTER pf-brand.css on those pages only. It adds
   no colour of its own: every value here is a pf-brand.css token.

   WHY A SEPARATE LAYER. The public pages carry the band rhythm by alternating
   full bleed grounds down a marketing page. A working board cannot do that: it
   is one long surface a person reads for an hour. So the boards take the same
   system at a quieter cadence, three beats instead of six:

     1. a dark opener   oxblood, the page title and the lock control
     2. the working ground  pastry, carrying PAPER cards
     3. a dark close    ink, the sign off

   THE CARD FIX. Every board used to put pastry cards on a paper ground, a 1.06
   separation, which is exactly why these pages read flat next to the new public
   pages. The 2027 system inverts it: the ground is the warm pastry, the cards
   are paper. That is also the surface the chart engine is validated against,
   series slot 1 measures 3.20:1 on paper and only 2.84:1 on pastry.

   HOW THE INVERSION IS DONE. Every board already writes its cards as
   `background:var(--pf-pastry)` and its insets, fields and page ground as
   `var(--pf-flour)`, consistently, on all twelve pages. So the swap is done
   once here by redefining those two tokens on the staff body, instead of by
   editing about fifty rules across twelve files and missing three of them.

   The swap is scoped to `body.pf-staff`, NEVER to :root, and that is load
   bearing: pf-charts.js resolves its chrome from document.documentElement, so
   the engine keeps reading the true palette (C.flour is paper, the surface its
   cards actually are) while the pages get the inverted stack. Do not move this
   swap up to :root.
   ============================================================================ */

/* -- 1. the ground --------------------------------------------------------- */
body.pf-staff{
  --pf-flour:#F2E9D6;    /* what the pages call flour is now the working ground */
  --pf-pastry:#FBF7ED;   /* what the pages call pastry is now the paper card    */
  background:#F2E9D6;
}
/* the opener and the close carry their own top and bottom space, so the column
   must not add another one above or below them */
body.pf-staff .wrap{padding-top:0;padding-bottom:0;}

/* -- 2. the dark opener ----------------------------------------------------
   Full bleed without vw arithmetic: the block stays in the column and a
   pseudo element paints the ground out to both edges, so it lines up on every
   page whatever that page sets as its max width. html and body already carry
   overflow-x:clip in pf-brand.css, so the 100vw paint can never scroll. */
body.pf-staff .pf-staff-hero{position:relative;padding:clamp(1.5rem,3.4vw,2.3rem) 0 clamp(1.6rem,3.6vw,2.4rem);
  margin-bottom:clamp(1.4rem,3vw,2.1rem);color:var(--pf-paper);}
body.pf-staff .pf-staff-hero::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);background:var(--pf-oxblood);}
body.pf-staff .pf-staff-hero::after{content:"";position:absolute;left:50%;bottom:0;width:100vw;height:3px;
  transform:translateX(-50%);
  background:linear-gradient(90deg,var(--pf-crust) 0%,rgba(224,165,43,0) 62%);}
body.pf-staff .pf-staff-hero > *{position:relative;z-index:1;}

/* the row inside the opener: title on the left, stamp and lock on the right */
body.pf-staff .pf-staff-hero .top{border-bottom:0;padding-bottom:0;}
body.pf-staff .pf-staff-hero :is(h1,h2,.h3){color:var(--pf-paper);}
/* the eyebrow is defined here rather than borrowed, because only two of these
   pages load app.css and the rest have no eyebrow rule at all */
body.pf-staff .pf-staff-hero .eyebrow{font-family:var(--pf-font-body);font-weight:600;font-size:0.72rem;
  letter-spacing:0.16em;text-transform:uppercase;color:var(--pf-crust);margin:0 0 0.1rem;}
/* a slot this small cannot carry the seal at 56px, so per the brand lock it
   takes the TEXT wordmark and no seal */
body.pf-staff .pf-staff-hero .brand{color:var(--pf-paper);margin-bottom:0.2rem;}
body.pf-staff .pf-staff-hero .brand span{color:var(--pf-crust);}
body.pf-staff .pf-staff-hero :is(.pf-page-lede,.sub){font-size:clamp(0.95rem,1.4vw,1.05rem);
  line-height:1.7;max-width:62ch;margin:0;}
body.pf-staff .pf-staff-hero :is(.place,.sub,.updated,.muted,.muted-note,p){color:rgba(251,247,237,0.78);}
body.pf-staff .pf-staff-hero a:not(.btn){color:var(--pf-crust);}
body.pf-staff .pf-staff-hero a:not(.btn):hover{color:var(--pf-butter);}
body.pf-staff .pf-staff-hero .btn.ghost{background:transparent;border-color:rgba(251,247,237,0.55);color:var(--pf-paper);}
body.pf-staff .pf-staff-hero .btn.ghost:hover{background:var(--pf-paper);color:var(--pf-ink);border-color:var(--pf-paper);}

/* -- 3. the dark close ----------------------------------------------------- */
body.pf-staff .pf-staff-close{position:relative;margin-top:clamp(2rem,4.5vw,3.2rem);
  padding:clamp(1.8rem,4vw,2.6rem) 0;text-align:center;color:rgba(251,247,237,0.82);}
body.pf-staff .pf-staff-close::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);background:var(--pf-ink);}
body.pf-staff .pf-staff-close > *{position:relative;z-index:1;}
body.pf-staff .pf-staff-close :is(p,.pf-by-rh){color:rgba(251,247,237,0.82);margin:0;font-size:0.8rem;}
body.pf-staff .pf-staff-close a{color:var(--pf-crust);text-decoration:none;}
body.pf-staff .pf-staff-close a:hover{color:var(--pf-butter);text-decoration:underline;}
body.pf-staff .pf-staff-close .pf-by-rh strong{color:var(--pf-paper);}

/* -- 4. the sticky bar on the pages that carry one -------------------------
   Organiser, Vendor and Sales open on a sticky bar rather than on a title, so
   the bar itself is the dark beat and the opener continues under it. */
/* the element itself paints NOTHING: a translucent bar plus a translucent
   pseudo element stack into a darker centre panel and the seam shows */
body.pf-staff .topbar{background:transparent;border-bottom:0;
  color:var(--pf-paper);position:sticky;}
/* Organiser and Vendor put the bar outside the column, Sales puts it inside
   one, so the ground is painted out to both edges the same way the opener is.
   position:absolute keeps the pseudo element out of the flex flow. */
body.pf-staff .topbar::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;
  transform:translateX(-50%);background:rgba(27,20,19,0.95);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(251,247,237,0.16);}
body.pf-staff .topbar > *{position:relative;z-index:1;}
body.pf-staff .topbar :is(.brand,.brand b,.who b){color:var(--pf-paper);}
body.pf-staff .topbar .brand span{color:var(--pf-crust);}
body.pf-staff .topbar .who{color:rgba(251,247,237,0.75);}
body.pf-staff .topbar a:not(.btn){color:var(--pf-crust);}
body.pf-staff .topbar a:not(.btn):hover{color:var(--pf-butter);}
body.pf-staff .topbar .btn.ghost{background:transparent;border-color:rgba(251,247,237,0.5);color:var(--pf-paper);}
body.pf-staff .topbar .btn.ghost:hover{background:var(--pf-paper);color:var(--pf-ink);border-color:var(--pf-paper);}
/* the Command toolbar is a working strip on the ground, not a card */
body.pf-staff .toolbar{background:rgba(242,233,214,0.94);}

/* the phone tools open on a dark bar instead of a hero band, so the crew keeps
   the screen for the camera. Same first beat, one line high. */
body.pf-staff .pf-staff-bar{background:var(--pf-ink);color:var(--pf-paper);
  border-bottom:1px solid rgba(251,247,237,0.16);position:relative;}
/* the gate bar is already full width, the stall bar sits inside the column, so
   the ground is painted out to both edges the same way the opener does it.
   position:absolute keeps this out of the flex flow, a static pseudo element
   would become a flex item and push the row. */
body.pf-staff .pf-staff-bar::before{content:"";position:absolute;top:0;bottom:0;left:50%;
  width:100vw;transform:translateX(-50%);background:var(--pf-ink);
  border-bottom:1px solid rgba(251,247,237,0.16);}
body.pf-staff .pf-staff-bar > *{position:relative;z-index:1;}
body.pf-staff .pf-staff-bar :is(.nm,.nm small){color:var(--pf-paper);}
body.pf-staff .pf-staff-bar .nm small{color:rgba(251,247,237,0.72);}
body.pf-staff .pf-staff-bar :is(.brand,.brand b){color:var(--pf-paper);}
body.pf-staff .pf-staff-bar .brand span{color:var(--pf-crust);}
body.pf-staff .pf-staff-bar :is(.modes,.days) button{background:transparent;
  border-color:rgba(251,247,237,0.42);color:var(--pf-paper);}
body.pf-staff .pf-staff-bar :is(.modes,.days) button.on{background:var(--pf-crust);
  border-color:var(--pf-crust);color:var(--pf-ink);}

/* -- 5. display type ------------------------------------------------------
   Barlow Condensed 700, uppercase, negative tracking. The old boards set the
   display face at 400 in sentence case, which is the retired voice. */
body.pf-staff :is(h1,h1.page){font-family:var(--pf-font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:-0.032em;line-height:0.94;}
body.pf-staff .pf-staff-hero h1{font-size:clamp(2.1rem,5vw,3.4rem);margin:0.35rem 0 0.5rem;}
body.pf-staff :is(h2,h2.sec,h3,.h3){font-family:var(--pf-font-display);font-weight:700;
  text-transform:uppercase;letter-spacing:-0.022em;line-height:1.02;}
body.pf-staff :is(h2.sec,h2){font-size:clamp(1.25rem,2.6vw,1.6rem);}
/* the figure step. Barlow Condensed at 400 is the retired voice: the 2027
   system sets every number at 700 with negative tracking, the way the chart
   engine sets its own hero figure, so a tile and a chart agree. */
body.pf-staff :is(.stat .val,.stat .val.white,.kpi .big,.hero-fig,.bal .b .n,.fst .v,.big,.val){
  font-weight:700;letter-spacing:-0.02em;}
/* a card title stays the card title, one step down from the section voice */
body.pf-staff :is(.card .h3,.stat .h3,.card-h .nm,.ct){font-family:var(--pf-font-display);
  font-weight:700;text-transform:uppercase;letter-spacing:-0.018em;}

/* -- 6. surfaces that must NOT follow the inversion ------------------------
   A control that sits on a card would disappear if it went paper as well, so
   these are pinned back to the warm ground. */
body.pf-staff :is(.step button,.sp-step button){background:#F2E9D6;}
body.pf-staff .sheet{background:#FBF7ED;}

/* -- 7. the ink tile row --------------------------------------------------
   The paper counterpart of a paper card on a dark band, used where a board
   wants a small dark fact box standing on the working ground. */
.pf-staff-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:0.8rem;margin:0 0 1.2rem;}
@media(max-width:560px){.pf-staff-tiles{grid-template-columns:1fr 1fr;}}