/* ENGAGE 2026 - the application's own stylesheet.
   ==========================================================================
   Loaded AFTER css/vendor/open-props.min.css and its normalize, and
   before nothing: each page still carries its own <style>, which is
   where the look of that page lives. This file holds the one layer
   those pages share.

   WHAT IS IN HERE, AND WHY ONLY THIS
   Every rule is scoped to [data-skin="lux"] on <html>. The styling each
   page had before is untouched inside that page, so switching the
   attribute off is not an approximation of the old design - it IS the
   old design. Three ways to switch, in the order somebody reaches for
   them at seven in the morning:
       /index.html?skin=classic
       the Appearance item in the menu
       localStorage.engageSkin = 'classic'

   OPEN PROPS
   The tokens below are built on Open Props rather than invented again:
   --size-* for spacing, --radius-* for corners, --shadow-* for
   elevation, --ease-* for motion, --font-weight-* and
   --font-lineheight-* for type. Two deliberate departures, both
   documented where they are made: the shadow COLOUR is retuned to this
   page's navy, and the type scale is stated in px.

   WHAT IS DELIBERATELY ABSENT
   No glass over anything with words on it. No animated hero. The
   network chips, status colours and badge trays are measured against
   WCAG in the test suites and are not touched here. This is read by a
   volunteer at a door at eight in the morning. */

:root[data-skin="lux"]{
  /* Open Props' shadows are grey - 220 3% 15% - and a grey shadow on a
     blue-grey page reads as dirt rather than as depth. Same scale, same
     layering, retuned to the navy the rest of the page is built from.
     Strength is lifted a little because these cards sit on #F5F7FA
     rather than on white. */
  --shadow-color:217 60% 20%;
  --shadow-strength:1.5%;

  --r-xs:var(--radius-1);      /* 2px  - a chip */
  --r-sm:var(--radius-2);      /* 5px  - a control */
  --r:10px;                    /* a card: between Open Props' 5px and 1rem */
  --r-lg:var(--radius-3);      /* 1rem - a panel */

  --sh-1:var(--shadow-1);
  --sh-2:var(--shadow-2);
  --sh-3:var(--shadow-4);

  /* Spacing, from Open Props, named for what it is used for here so a
     rule reads as intent rather than as a number. */
  --gap-xs:var(--size-1);      /* .25rem */
  --gap-sm:var(--size-2);      /* .5rem  */
  --gap:var(--size-3);         /* 1rem   */
  --gap-lg:var(--size-4);      /* 1.25rem */

  /* NOT --gray-1. Open Props' greys are neutral, and this page is
     built on a blue-grey paper (#F5F7FA): a neutral panel on it reads
     as a slightly dirty patch rather than as a quieter surface. Same
     reasoning as the shadow colour above - take the scale, keep the
     palette. */
  --muted:#F2F5F9;
  --muted-fg:#5C7191;
  --ring:rgba(194,162,92,.55);
  --motion:150ms var(--ease-3);

  /* ONE TYPE SCALE, and smaller than what was here before.
     In px, and not from Open Props' --font-size-*, for a reason worth
     stating: that scale steps .5rem, .75rem, 1rem - 8, 12, 16px - and
     the sizes this tool needs sit between its rungs. Data wants 13px
     and a name 14px; rounding them to 12 and 16 would be following a
     scale off a cliff. Spacing, radius, shadow and easing all come
     from Open Props, where its steps are the right ones.

     The floor is 10px, and only for short, bold, letter-spaced
     uppercase - a chip or a column label, never a sentence. */
  --t-xs:11px;    /* chips, uppercase micro-labels */
  --t-sm:12px;    /* timestamps, meta, secondary lines */
  --t-base:13px;  /* the data itself */
  --t-md:14px;    /* names, things you scan for */
  --t-lg:17px;    /* a panel's title */
  --t-xl:26px;    /* the one number a card exists for */
  --lh-tight:var(--font-lineheight-1);   /* 1.25 */
  --lh:var(--font-lineheight-3);         /* 1.5  */
}

/* ---- the staffing tool: directory, record panel ---- */
/* ---- type, on the surfaces this skin owns ---- */
:root[data-skin="lux"] .dtab{font-size:var(--t-md)}
:root[data-skin="lux"] .dtab em{font-size:var(--t-sm)}
:root[data-skin="lux"] .qbar input{font-size:var(--t-md)}
:root[data-skin="lux"] #qcount{font-size:var(--t-xs)}
:root[data-skin="lux"] .addwrap summary{font-size:var(--t-base)}
:root[data-skin="lux"] .dqrow{font-size:var(--t-base);line-height:var(--lh-tight)}
:root[data-skin="lux"] .dqrow .qnm{font-size:var(--t-md)}
:root[data-skin="lux"] .dqrow .qsub{font-size:var(--t-base)}
:root[data-skin="lux"] .dqrow .qst{font-size:var(--t-sm)}
:root[data-skin="lux"] .dqrow .qnet .prtag{font-size:10px}
:root[data-skin="lux"] .qempty{font-size:var(--t-base)}

:root[data-skin="lux"] #pr_name{font-size:var(--t-lg);line-height:1.25}
:root[data-skin="lux"] .prsub{font-size:var(--t-base)}
:root[data-skin="lux"] .prcard h3{font-size:10px;letter-spacing:.08em}
:root[data-skin="lux"] .prfields{font-size:var(--t-base);
  gap:var(--gap-xs) var(--gap);line-height:var(--lh-tight)}
:root[data-skin="lux"] .prline{font-size:var(--t-base);line-height:var(--lh-tight)}
:root[data-skin="lux"] .prline .when{font-size:var(--t-sm)}
:root[data-skin="lux"] .prnone{font-size:var(--t-base)}
:root[data-skin="lux"] #precord .btn{font-size:var(--t-xs)}
:root[data-skin="lux"] .prtag{font-size:10px}

/* An input below 16px makes iOS zoom the whole page the moment it is
   focused, and the way back out is a pinch. Desk-sized type is worth
   having; a page that jumps under somebody's thumb is not. */
@media (pointer:coarse){
  :root[data-skin="lux"] .qbar input,
  :root[data-skin="lux"] .dbar input,
  :root[data-skin="lux"] .dbar select,
  :root[data-skin="lux"] .isnot{font-size:16px}
}
/* On a phone the count sat beside the search box and took a third of
   it, so the placeholder was cut off mid-word. It reads just as well
   under the box, where it has the width to say "7 of 420". */
@media (max-width:620px){
  :root[data-skin="lux"] .qbar{flex-wrap:wrap;gap:var(--gap-sm)}
  :root[data-skin="lux"] .qbar input{flex:1 0 100%}
  :root[data-skin="lux"] #qcount{flex:1 0 100%}
  /* The coloured dot is the network, and so is the chip two lines
     above it. On a phone the row wraps to two columns and the dot
     landed alone on a line of its own, which is a line of nothing. */
  :root[data-skin="lux"] .dqrow .qdot{display:none}
  :root[data-skin="lux"] .dqrow{row-gap:.15rem}
}

/* Motion, once, and switchable off by the reader's own setting. Nothing
   here moves more than a few pixels or lasts longer than a blink: this
   is a tool somebody uses four hundred times a day, and a flourish on
   the four hundredth use is an obstacle. */
@media (prefers-reduced-motion:reduce){
  :root[data-skin="lux"] *{
    transition-duration:1ms !important; animation-duration:1ms !important;
  }
}

/* ---- focus, everywhere ---- */
:root[data-skin="lux"] :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ring); outline-offset:2px; border-radius:var(--r-xs);
}

/* ---- the three tabs ---- */
:root[data-skin="lux"] .dtabs{
  gap:.15rem; padding:var(--gap-xs); background:var(--muted);
  border:1px solid var(--line); border-radius:var(--r);
  /* Lined up with the content under it. The strip sits OUTSIDE the
     pane, which carries the page's side padding, so left to itself it
     ran edge to edge while everything below it was inset by 26px - the
     kind of half-alignment that reads as cheap without anybody being
     able to say why. Measured, not guessed: the pane's padding is
     1.6rem. */
  margin:0 1.6rem 1.35rem;
  width:auto;
}
@media (max-width:700px){
  :root[data-skin="lux"] .dtabs{margin:0 .9rem 1rem}
}
:root[data-skin="lux"] .dtab{
  border-bottom:0; margin-bottom:0; border-radius:var(--r-sm);
  padding:var(--gap-sm) var(--gap); color:var(--muted-fg);
  transition:background var(--motion), color var(--motion),
             box-shadow var(--motion);
}
:root[data-skin="lux"] .dtab:hover{background:rgba(255,255,255,.65);color:var(--ink)}
:root[data-skin="lux"] .dtab.on{
  background:var(--card); color:var(--ink);
  box-shadow:var(--sh-1); border-bottom-color:transparent;
}
:root[data-skin="lux"] .dtab em{color:var(--muted-fg)}

/* ---- the search box and the list ---- */
:root[data-skin="lux"] .qbar input{
  border-radius:var(--r); padding:.72rem .9rem;
  box-shadow:var(--sh-1);
  transition:box-shadow var(--motion), border-color var(--motion);
}
:root[data-skin="lux"] .qbar input:focus{
  outline:none; border-color:var(--gold-2); box-shadow:var(--sh-2);
}
:root[data-skin="lux"] .qlist{
  border-radius:var(--r); overflow:hidden; box-shadow:var(--sh-1);
  gap:0; background:var(--card);
}
:root[data-skin="lux"] .dqrow{
  padding:.62rem .9rem; border-top:1px solid var(--line);
  transition:background var(--motion);
}
:root[data-skin="lux"] .dqrow:first-child{border-top:0}
/* A hairline that appears on hover rather than the row jumping. The
   row does not move: a list that shifts under the pointer is a list
   you click the wrong line in. */
:root[data-skin="lux"] .dqrow:hover{background:var(--muted)}
:root[data-skin="lux"] .dqrow .qnm{transition:color var(--motion)}
:root[data-skin="lux"] .dqrow .qnm:hover{color:var(--gold-2);text-decoration:none}
:root[data-skin="lux"] .qempty{border-radius:var(--r);padding:var(--size-7) var(--gap-lg)}
:root[data-skin="lux"] .addwrap{
  border-bottom:0; background:var(--muted); border:1px solid var(--line);
  border-radius:var(--r); padding:var(--gap-sm) var(--gap); margin-bottom:1.1rem;
}
:root[data-skin="lux"] .addwrap summary{color:var(--muted-fg)}
:root[data-skin="lux"] .addwrap[open]{background:var(--card);box-shadow:var(--sh-1)}

/* ---- the record, as a bento ----
   Not a grid of equal boxes. The panels differ in weight - who somebody
   is and what has happened to them are read every time, the meals are
   glanced at - so they differ in size, and the eye is given an order
   to read them in rather than a wall. */
:root[data-skin="lux"] #precord{
  border-radius:var(--r-lg); box-shadow:var(--sh-3); border-color:transparent;
  animation:luxrise 180ms cubic-bezier(.2,.6,.3,1) both;
}
@keyframes luxrise{from{opacity:0;transform:translateX(50%) translateY(8px)}
                   to{opacity:1;transform:translateX(50%) translateY(0)}}
:root[data-skin="lux"] #precordback{
  background:rgba(11,31,66,.42); backdrop-filter:blur(3px);
  animation:luxfade 180ms ease both;
}
@keyframes luxfade{from{opacity:0}to{opacity:1}}
/* The one place a translucent layer earns its keep: a sticky header
   over a panel that scrolls UNDER it. Nothing is read through it - the
   blur is behind the heading, not behind the data. */
/* On a phone the name, the chip and the buttons each want their own
   line. Left as one row they squeezed the name to two words a line
   while the buttons sat beside it. */
:root[data-skin="lux"] .prchip{margin:.3rem 0 0}
@media (max-width:620px){
  :root[data-skin="lux"] .prhead{flex-wrap:wrap;padding:var(--gap) var(--gap) var(--gap-sm)}
  :root[data-skin="lux"] .prhead .prwho{flex:1 0 100%}
  :root[data-skin="lux"] .prhead .acts{flex:1 0 100%;margin-top:.7rem}
  :root[data-skin="lux"] .prhead .acts .btn{flex:1}
}
:root[data-skin="lux"] .prhead{
  background:rgba(255,255,255,.86); backdrop-filter:saturate(1.6) blur(10px);
  border-bottom-color:var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  padding:var(--gap-lg) var(--gap-lg) var(--gap);
}
:root[data-skin="lux"] .prbody{
  grid-template-columns:repeat(6,1fr); gap:var(--gap); padding:var(--gap-lg) var(--gap-lg) var(--size-5);
}
:root[data-skin="lux"] .prcard{
  grid-column:span 3; border-radius:var(--r); box-shadow:var(--sh-1);
  padding:var(--gap) var(--gap); transition:box-shadow var(--motion);
}
:root[data-skin="lux"] .prcard:hover{box-shadow:var(--sh-2)}
:root[data-skin="lux"] .prcard.wide{grid-column:1/-1}
/* Their details and the door, side by side and the larger pair. Then
   the three smaller ones across a row. */
:root[data-skin="lux"] .prcard:nth-of-type(1){grid-column:span 3}
:root[data-skin="lux"] .prcard:nth-of-type(2){grid-column:span 3}
:root[data-skin="lux"] .prcard:nth-of-type(3){grid-column:span 3}
:root[data-skin="lux"] .prcard:nth-of-type(4){grid-column:span 3}
:root[data-skin="lux"] .prcard:nth-of-type(5){grid-column:span 3}
:root[data-skin="lux"] .prcard:nth-of-type(6){grid-column:span 3}
:root[data-skin="lux"] .prcard h3{color:var(--muted-fg)}  /* size: the scale */
:root[data-skin="lux"] .prfields dt{color:var(--muted-fg)}
:root[data-skin="lux"] .prqr svg{border-radius:var(--r-sm);border-color:var(--line)}
:root[data-skin="lux"] .prlog{
  max-height:17rem; border-radius:var(--r-sm); background:var(--muted);
  padding:var(--gap-xs) var(--gap-sm);
}
:root[data-skin="lux"] .prline{border-top-color:rgba(219,227,238,.8)}
:root[data-skin="lux"] .prtag{border-radius:var(--r-xs);padding:.14rem .45rem}
@media (max-width:980px){
  :root[data-skin="lux"] .prbody{grid-template-columns:1fr}
  :root[data-skin="lux"] .prcard,
  :root[data-skin="lux"] .prcard.wide,
  :root[data-skin="lux"] .prcard:nth-of-type(1),
  :root[data-skin="lux"] .prcard:nth-of-type(2),
  :root[data-skin="lux"] .prcard:nth-of-type(3),
  :root[data-skin="lux"] .prcard:nth-of-type(4),
  :root[data-skin="lux"] .prcard:nth-of-type(5),
  :root[data-skin="lux"] .prcard:nth-of-type(6){grid-column:1/-1}
  :root[data-skin="lux"] #precord{border-radius:0;animation:none}
}

/* ---- the menu, in groups ----
   The headings the items sit under. The grouping itself is CSS order
   set from one list in the page, so what is here is only how a
   heading looks - and the old separators going quiet, since the
   headings are what replaced them. */
:root[data-skin="lux"] .menu .mgh{
  margin:var(--gap-sm) var(--gap-sm) var(--gap-xs);
  font-size:10px;
  font-weight:var(--font-weight-7);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted-fg);
}
/* Not above the first group: a heading hard against the top edge of
   the panel reads as a title for the whole menu. */
:root[data-skin="lux"] .menu .mgh:first-of-type{margin-top:var(--gap-xs)}
:root[data-skin="lux"] .menu hr.mgoff{display:none}

/* The menu scrolled to 1715px against a 999px panel, and adding seven
   headings made it taller still. The length is not the item count -
   twenty-one is fine - it is that each one carries two lines of
   description. So the items are set on the same scale as everything
   else here and given tighter leading: the descriptions earn their
   place, they just do not need to be set at reading size.

   Measured, and the honest figure: 1715px before, 1507px after. The
   panel is 999px on a laptop, so it still scrolls - it scrolled before
   too, and it scrolls less now. Fitting it would mean dropping the
   descriptions, and they are the reason somebody picks the right page
   the first time. The menu scrolls inside itself rather than off the
   bottom of the window, which is the part that actually mattered. */
:root[data-skin="lux"] .menu .mi{
  font-size:var(--t-base);
  padding:var(--gap-sm) var(--gap-sm);
  line-height:var(--lh-tight);
}
:root[data-skin="lux"] .menu .mi small{
  font-size:var(--t-sm);
  line-height:1.35;
  margin-top:1px;
  color:var(--muted-fg);
}
:root[data-skin="lux"] .menu{padding:var(--gap-xs)}

/* ---- the report tab's own controls ---- */
:root[data-skin="lux"] .dbar input,
:root[data-skin="lux"] .dbar select,
:root[data-skin="lux"] .isnot{
  border-radius:var(--r-sm);
}
:root[data-skin="lux"] .isnot{
  margin-left:.3rem; background:var(--muted); color:var(--muted-fg);
  font-size:.82rem;
}

/* ---- the communications page --------------------------------------
   Scoped to the page. These class names - .note, .run, .msg, h2.sec -
   are not unique to this file, and app.css is loaded by all eighteen
   pages now, so unscoped they reached into the staffing tool and
   shrank its headings to ten pixels. Measured, not noticed: a
   before-and-after fingerprint of every page caught it.
   ----------------------------------------------------------------- */
:root[data-skin="lux"][data-page="comms"] body{font-size:var(--t-base)}
/* Two things the normalize baseline does that this page does not want,
   both caught by the before-and-after fingerprint rather than by eye.

   Headings: it sets weight 900, and this page loads Montserrat at 500
   to 800 - so 900 is a weight the browser has to synthesize, which is
   a smeared approximation of bold rather than a heavier cut.

   Paragraphs: it sets 1.1rem with a 1.5 leading, which is a reading
   size for an article. This page is a log and a set of counters, and
   its paragraphs are captions under numbers. */
:root[data-skin="lux"][data-page="comms"] :is(h1,h2,h3,h4){
  font-weight:var(--font-weight-7);
}
:root[data-skin="lux"][data-page="comms"] p{
  font-size:var(--t-base);
  line-height:var(--lh);
  margin-block:0 var(--gap-sm);
}
:root[data-skin="lux"][data-page="comms"] .bar h1{font-size:var(--t-sm);letter-spacing:.14em}
:root[data-skin="lux"][data-page="comms"] .bar a{font-size:var(--t-xs)}
:root[data-skin="lux"][data-page="comms"] h2.sec{font-size:10px;letter-spacing:.1em;
  margin:1.5rem 0 .6rem}
:root[data-skin="lux"][data-page="comms"] .rcard h3{font-size:var(--t-base)}
/* Forty pixels for a number that is usually one digit was shouting.
   It is still the biggest thing on the card and still the first thing
   read - it just no longer sets the height of the row by itself. */
:root[data-skin="lux"][data-page="comms"] .rbig{font-size:var(--t-xl);line-height:1.1}
:root[data-skin="lux"][data-page="comms"] .rof{font-size:var(--t-sm)}
:root[data-skin="lux"][data-page="comms"] .rshort{font-size:var(--t-sm);line-height:var(--lh-tight)}
:root[data-skin="lux"][data-page="comms"] .rwho summary{font-size:var(--t-sm)}
:root[data-skin="lux"][data-page="comms"] .rwho ul{font-size:var(--t-sm)}
:root[data-skin="lux"][data-page="comms"] .rhow{font-size:10px}
:root[data-skin="lux"][data-page="comms"] .runhead b{font-size:var(--t-md)}
:root[data-skin="lux"][data-page="comms"] .pill{font-size:10px}
:root[data-skin="lux"][data-page="comms"] .counts div{font-size:var(--t-sm)}
:root[data-skin="lux"][data-page="comms"] .counts div b{font-size:1.25rem}
:root[data-skin="lux"][data-page="comms"] .lbar input,
:root[data-skin="lux"][data-page="comms"] .lbar select{font-size:var(--t-base)}
:root[data-skin="lux"][data-page="comms"] .lnum{font-size:var(--t-sm)}
:root[data-skin="lux"][data-page="comms"] .lrow{font-size:var(--t-base);line-height:var(--lh-tight)}
:root[data-skin="lux"][data-page="comms"] .lrow .when{font-size:var(--t-sm)}
:root[data-skin="lux"][data-page="comms"] .lrow .sum{font-size:var(--t-sm)}
:root[data-skin="lux"][data-page="comms"] .lrow .by{font-size:var(--t-xs)}
:root[data-skin="lux"][data-page="comms"] .note{font-size:var(--t-base)}
:root[data-skin="lux"][data-page="comms"] .fails summary{font-size:var(--t-base)}
:root[data-skin="lux"][data-page="comms"] .fails table{font-size:var(--t-sm)}
@media (pointer:coarse){
  :root[data-skin="lux"][data-page="comms"] .lbar input,
  :root[data-skin="lux"][data-page="comms"] .lbar select{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  :root[data-skin="lux"][data-page="comms"] *{transition-duration:1ms !important;
                           animation-duration:1ms !important}
}
:root[data-skin="lux"][data-page="comms"] :is(button,a,input,select,summary):focus-visible{
  outline:2px solid var(--ring); outline-offset:2px; border-radius:var(--r-xs);
}
:root[data-skin="lux"][data-page="comms"] main{padding:var(--size-5) var(--gap-lg) var(--size-8)}

/* The coverage cards as a bento: the first is the one everybody opens
   this page for, so it is the wide one. */
/* FOUR EVEN CARDS, not a hero and three slivers. Giving the first one
   half the row left the other three about 190px wide, which wrapped
   "Their check-in code, by text" onto two lines and pushed the E-MAIL
   chip onto a line of its own. The headings are long; the room is the
   thing they need. The first card keeps its emphasis through a larger
   numeral rather than through width. */
:root[data-skin="lux"][data-page="comms"] .reach{
  grid-template-columns:repeat(2,1fr); gap:var(--gap);
}
:root[data-skin="lux"][data-page="comms"] .rcard{
  border-radius:var(--r); box-shadow:var(--sh-1);
  padding:var(--gap) var(--gap); transition:box-shadow var(--motion);
}
:root[data-skin="lux"][data-page="comms"] .rcard:hover{box-shadow:var(--sh-2)}
@media (max-width:640px){
  :root[data-skin="lux"][data-page="comms"] .reach{grid-template-columns:1fr}
}
@media (min-width:1100px){
  :root[data-skin="lux"][data-page="comms"] .reach{grid-template-columns:repeat(4,1fr)}
}
:root[data-skin="lux"][data-page="comms"] .rbar{border-radius:99px;height:8px}
:root[data-skin="lux"][data-page="comms"] .rbar i{
  border-radius:99px; transition:width 420ms cubic-bezier(.2,.6,.3,1);
}
:root[data-skin="lux"][data-page="comms"] .rhow{border-radius:var(--r-xs)}

:root[data-skin="lux"][data-page="comms"] .run{border-radius:var(--r);box-shadow:var(--sh-1);
  padding:var(--gap) var(--gap)}
:root[data-skin="lux"][data-page="comms"] .run.live{box-shadow:var(--sh-2)}
:root[data-skin="lux"][data-page="comms"] .pill{border-radius:99px;padding:.14rem .55rem}
:root[data-skin="lux"][data-page="comms"] .lbar input,
:root[data-skin="lux"][data-page="comms"] .lbar select{border-radius:var(--r-sm);padding:var(--gap-sm) var(--gap-sm)}
:root[data-skin="lux"][data-page="comms"] .lbar input{box-shadow:var(--sh-1)}
:root[data-skin="lux"][data-page="comms"] .log{border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-1)}
:root[data-skin="lux"][data-page="comms"] .lrow{transition:background var(--motion);padding:.5rem .9rem}
:root[data-skin="lux"][data-page="comms"] .lrow:hover{background:var(--muted)}
:root[data-skin="lux"][data-page="comms"] .note{border-radius:var(--r-sm)}
:root[data-skin="lux"][data-page="comms"] .msg{border-radius:var(--r-lg);box-shadow:var(--sh-2)}

/* ===================================================================
   The bar across the top, and the menu under it
   ===================================================================

   Measured before any of this was written. On a laptop the bar was
   57px and fine, but the tabs were drawn as outlined boxes and the
   counts beside them - which jump you to the problem they name -
   looked like flat grey text, so nobody pressed them. On a 390px
   phone the bar stood 128px over three rows, a sixth of the screen,
   with 422px of tab strip in it and ACTIVITY sliced off mid-word.

   Three changes, all inside this layer, so the older look is still
   the page as it was:
     * the tabs become one segmented control;
     * Check in and The door come out of the menu and into the bar,
       because tomorrow they are the only two anybody wants;
     * on a narrow window the five tabs collapse into one control
       that says where you are. 128px becomes about 50.
   ------------------------------------------------------------------- */

:root[data-skin="lux"][data-page="staffing"] .bar{padding:.5rem clamp(1rem,3vw,1.6rem)}

/* --- the tabs, as one segmented control --- */
:root[data-skin="lux"][data-page="staffing"] .bar .tabs{
  background:rgba(255,255,255,.09); border-radius:99px;
  padding:3px; gap:2px;
}
:root[data-skin="lux"][data-page="staffing"] .bar .tab{
  border:0; border-radius:99px; padding:.32rem .78rem;
  font-size:var(--t-xs); color:rgba(255,255,255,.75);
  transition:background var(--motion), color var(--motion);
}
:root[data-skin="lux"][data-page="staffing"] .bar .tab:hover{background:rgba(255,255,255,.1);color:#fff}
:root[data-skin="lux"][data-page="staffing"] .bar .tab.on{
  background:var(--gold); color:var(--ink);
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}

/* --- the counts, which were always clickable and never looked it --- */
:root[data-skin="lux"][data-page="staffing"] .bar #stat .stbit{
  color:rgba(255,255,255,.78);
  text-decoration:underline dotted rgba(255,255,255,.32);
  text-underline-offset:3px;
}
:root[data-skin="lux"][data-page="staffing"] .bar #stat .stbit:hover{color:#fff;text-decoration-color:#fff}
:root[data-skin="lux"][data-page="staffing"] .bar #stat .stbit.bad{color:#F3B6B6}
/* "LOADED" in monospace capitals is developer language for a volunteer.
   A quiet dot carries the same thing without being read as a warning. */
:root[data-skin="lux"][data-page="staffing"] .bar #sync{color:rgba(255,255,255,.62)}
:root[data-skin="lux"][data-page="staffing"] .bar #sync:empty::before{display:none}
:root[data-skin="lux"][data-page="staffing"] .bar #sync::before{
  content:''; display:inline-block; width:6px; height:6px; border-radius:50%;
  background:#79D4AC; margin-right:.4rem; vertical-align:.08em;
}
:root[data-skin="lux"][data-page="staffing"] .bar #sync.warn::before{background:#E8A33D}

/* --- the two jobs the building does on the day --- */
:root[data-skin="lux"][data-page="staffing"] .dayacts{display:flex;gap:.35rem;align-items:center}
:root[data-skin="lux"][data-page="staffing"] .dayact{
  font:inherit; font-size:var(--t-xs); font-weight:var(--font-weight-7);
  letter-spacing:.06em; text-transform:uppercase; text-decoration:none;
  white-space:nowrap; padding:.4rem .78rem; border-radius:99px;
  border:1px solid var(--gold); color:var(--gold); background:transparent;
  display:inline-flex; align-items:center; min-height:32px;
  transition:background var(--motion), color var(--motion);
}
:root[data-skin="lux"][data-page="staffing"] .dayact.go{background:var(--gold);color:var(--ink)}
:root[data-skin="lux"][data-page="staffing"] .dayact .tight{display:none}
:root[data-skin="lux"][data-page="staffing"] .dayact:hover{background:#fff;color:var(--ink);border-color:#fff}

/* --- the tab picker, narrow windows only --- */
:root[data-skin="lux"][data-page="staffing"] .tabpick{
  display:none; font:inherit; font-size:var(--t-xs);
  font-weight:var(--font-weight-7); letter-spacing:.07em;
  text-transform:uppercase; color:#fff; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3); border-radius:99px;
  padding:.34rem .7rem; min-height:34px; align-items:center; cursor:pointer;
}
:root[data-skin="lux"][data-page="staffing"] .tabpick::after{content:'▾';margin-left:.45rem;opacity:.75}
:root[data-skin="lux"][data-page="staffing"] .tabpick[hidden]{display:none}

/* Keeping it to one row on a laptop.

   Measured, not guessed: with the two day-of buttons in it the bar's
   contents need 1412px, so every laptop narrower than 1440 was getting
   two rows and 90px. Rather than take the buttons back out, the least
   useful thing goes at each step down. The widths below are where the
   bar was actually seen to wrap, swept twenty pixels at a time from
   1600 down to 360, and each is set just above its own wrap point.

   The event name goes first: the logo beside it already says whose
   this is, and this is a signed-in internal tool, not a page anybody
   arrives at cold. Then the name beside the menu, which is a shortcut
   to the first line of the menu's You group. Then the five tabs become
   the same picker the phone layout uses. Then the counts, which are
   planning information nobody reads on a small screen. */
@media (max-width:1430px){
  :root[data-skin="lux"][data-page="staffing"] .bar .tab{padding:.3rem .62rem}
  :root[data-skin="lux"][data-page="staffing"] .bar{gap:.45rem}
}
@media (max-width:1380px){
  :root[data-skin="lux"][data-page="staffing"] .bar h1{display:none}
}
@media (max-width:1280px){
  :root[data-skin="lux"][data-page="staffing"] .mebtn .mn{display:none}
}
@media (max-width:1240px){
  :root[data-skin="lux"][data-page="staffing"] .bar .tabs{display:none}
  :root[data-skin="lux"][data-page="staffing"] .tabpick:not([hidden]){display:inline-flex}
  :root[data-skin="lux"][data-page="staffing"] .bar .tabs.open{
    display:flex; flex-direction:column; gap:2px; position:absolute;
    top:calc(100% + 6px); left:.9rem; z-index:60; min-width:12rem;
    background:var(--card); border:1px solid var(--line);
    border-top:3px solid var(--gold); border-radius:var(--r-sm);
    box-shadow:var(--sh-3); padding:.3rem; margin:0;
  }
  :root[data-skin="lux"][data-page="staffing"] .bar .tabs.open .tab{
    display:flex; justify-content:flex-start; color:var(--ink);
    background:none; border-radius:var(--r-xs);
    padding:.55rem .7rem; min-height:40px; font-size:var(--t-sm);
  }
  :root[data-skin="lux"][data-page="staffing"] .bar .tabs.open .tab:hover{background:var(--muted)}
  :root[data-skin="lux"][data-page="staffing"] .bar .tabs.open .tab.on{
    background:var(--gold); color:var(--ink); box-shadow:none;
  }
}
@media (max-width:900px){
  :root[data-skin="lux"][data-page="staffing"] .bar #stat{display:none}
}

@media (max-width:760px){
  :root[data-skin="lux"][data-page="staffing"] .bar{padding:.45rem .9rem;row-gap:.4rem;flex-wrap:nowrap}
  /* The event name goes. The logo already says whose it is, and on a
     phone the row is worth more than the repetition. */
  :root[data-skin="lux"][data-page="staffing"] .bar h1{display:none}
  /* The lockup is 78px of a 390px bar, and 56px of that is the words
     THE MAINSTAY FOUNDATION set at 6px, which nobody reads at this
     size. Cropped to its emblem the mark is still the mark, and the
     room it gives back is what keeps this to one row. */
  :root[data-skin="lux"][data-page="staffing"] .bar .logo{
    height:22px; width:22px; object-fit:cover; object-position:left center;
  }
  :root[data-skin="lux"][data-page="staffing"] .bar .logo+h1{border-left:0;padding-left:0}
  /* A backstop: the longest tab name must not be what pushes the menu
     button off the edge of somebody's phone. */
  :root[data-skin="lux"][data-page="staffing"] .tabpick{
    max-width:8rem; overflow:hidden; text-overflow:ellipsis;
    white-space:nowrap; display:inline-block; line-height:1.6;
  }
  :root[data-skin="lux"][data-page="staffing"] .tabpick[hidden]{display:none}
  :root[data-skin="lux"][data-page="staffing"] .dayact .wide{display:none}
  :root[data-skin="lux"][data-page="staffing"] .dayact .tight{display:inline}
  /* The counts and the save state are planning information. Nobody
     reads them at the door, and they cost a whole row. */
  :root[data-skin="lux"][data-page="staffing"] .bar #stat,
  :root[data-skin="lux"][data-page="staffing"] .bar #sync,
  :root[data-skin="lux"][data-page="staffing"] .bar .mebtn{display:none}
  :root[data-skin="lux"][data-page="staffing"] .tabpick:not([hidden]){display:inline-flex}
  /* Out of the row entirely: it is a flyout now, hung under the bar,
     which is sticky and so is what an absolute child is measured from. */
  :root[data-skin="lux"][data-page="staffing"] .bar .tabs{display:none}
  :root[data-skin="lux"][data-page="staffing"] .bar .tabs.open{
    display:flex; flex-direction:column; gap:2px; position:absolute;
    top:calc(100% + 6px); left:.9rem; z-index:60; min-width:12rem;
    background:var(--card); border:1px solid var(--line);
    border-top:3px solid var(--gold); border-radius:var(--r-sm);
    box-shadow:var(--sh-3); padding:.3rem; margin:0;
  }
  :root[data-skin="lux"][data-page="staffing"] .bar .tabs.open .tab{
    display:flex; justify-content:flex-start; color:var(--ink);
    background:none; border-radius:var(--r-xs);
    padding:.55rem .7rem; min-height:40px; font-size:var(--t-sm);
  }
  :root[data-skin="lux"][data-page="staffing"] .bar .tabs.open .tab:hover{background:var(--muted)}
  :root[data-skin="lux"][data-page="staffing"] .bar .tabs.open .tab.on{
    background:var(--gold); color:var(--ink); box-shadow:none;
  }
  :root[data-skin="lux"][data-page="staffing"] .dayacts{margin-left:auto}
  :root[data-skin="lux"][data-page="staffing"] .dayact{
    font-size:10px; padding:.34rem .6rem; min-height:36px;
  }
  :root[data-skin="lux"][data-page="staffing"] .dayacts{gap:.3rem}
}

/* --- the menu: a filter, and a fold for the rare things --- */
:root[data-skin="lux"][data-page="staffing"] .menu .mjump{display:block;padding:.2rem .25rem .35rem}
:root[data-skin="lux"][data-page="staffing"] .menu .mjump input{
  width:100%; font:inherit; font-size:var(--t-sm); color:var(--ink);
  background:var(--muted); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:.45rem .6rem;
}
:root[data-skin="lux"][data-page="staffing"] .menu .mjump input::placeholder{color:var(--ink-3)}
:root[data-skin="lux"][data-page="staffing"] .menu .mjump input:focus-visible{
  outline:2px solid var(--gold); outline-offset:1px; background:#fff;
}
:root[data-skin="lux"][data-page="staffing"] .menu .mnone{
  display:block; margin:0; padding:.55rem .7rem;
  font-size:var(--t-sm); color:var(--ink-3);
}
:root[data-skin="lux"][data-page="staffing"] .menu .mnone[hidden]{display:none}
/* The fold, and what is behind it. */
:root[data-skin="lux"][data-page="staffing"] .menu .mfold::after{
  content:'▸'; margin-left:.4rem; color:var(--ink-3); font-size:var(--t-xs);
}
:root[data-skin="lux"][data-page="staffing"] .menu .mfold[aria-expanded="true"]::after{content:'▾'}
:root[data-skin="lux"][data-page="staffing"] .menu .mi.folded{display:none}
:root[data-skin="lux"][data-page="staffing"] .menu .mi.mhide,
:root[data-skin="lux"][data-page="staffing"] .menu .mgh.mhide{display:none}
/* While something is typed in the box, the fold stands aside: what is
   behind it is searched like everything else rather than hidden. */
:root[data-skin="lux"][data-page="staffing"] .menu.msearch .mi.folded{display:block}
:root[data-skin="lux"][data-page="staffing"] .menu.msearch .mfold{display:none}