/* ==========================================================================
   thursdvys dashboard - ARCHITECTURAL EDITORIAL GRID  (override layer)
   --------------------------------------------------------------------------
   Loaded last, after style.css and shell.css, so every rule here wins on
   source order. Nothing below restructures the templates: it restyles what
   the templates already emit and adds micro-labels through pseudo-elements
   where the HTML has no label of its own.

   Palette, non-negotiable - these four and nothing else:
       #000000 canvas · #FFFFFF · #D8D8D8 grey · #FF6B00 brand orange
   Surfaces sit a hair above the canvas (#070707, #0b0b0b) - same hue, no lift.

   Semantic rule, applied everywhere:
       rose / healthy / affirmative . . . . . . . . . .  WHITE
       fell / needs attention / overdue . . . . . . . .  BRAND ORANGE
       neutral, flat, inactive . . . . . . . . . . . . .  GREY / FAINT

   Grammar: hairline-divided cells (never a tinted panel), square corners,
   uppercase condensed headings, wide-tracked 9-10px micro-labels, every
   figure tabular, everything left-aligned inside its cell, no shadows,
   no gradients, no glass, no icons.
   ========================================================================== */


/* ==========================================================================
   0.  TOKENS
   The whole app is written against these custom properties, so remapping them
   here repaints the pages that carry colour in inline styles too - the maps,
   the payment bars, the roster's today column. The old sheet shipped a green
   (#63d18a) and a red (#e0604a) for up/down; neither is in the brand, so both
   collapse onto the rule above: up is white, down is the one orange.
   ========================================================================== */
:root{
  --bg:#000000;
  --panel:#070707;            /* a hair above the canvas, not a fill */
  --panel2:#0b0b0b;
  --ink:#ffffff;
  --muted:rgba(216,216,216,.60);
  --soft:rgba(216,216,216,.50);
  --faint:rgba(216,216,216,.36);
  --line:rgba(255,255,255,.10);
  --or:#ff6b00;
  --lift:#ffffff;             /* was #ff8a42 - off-brand. Links are white.  */
  --green:#ffffff;            /* was #8aba82 - off-brand. Positive is white.*/
  --red:#ff6b00;              /* was #e0604a - off-brand. Attention is orange.*/
  --r:0;

  /* the grid's own tokens */
  --g-ink:#ffffff;
  --g-grey:#d8d8d8;
  --g-mute:rgba(216,216,216,.60);
  --g-faint:rgba(216,216,216,.36);
  --g-ghost:rgba(216,216,216,.42);
  --g-label:rgba(216,216,216,.54);      /* form labels */
  --g-placeholder:rgba(216,216,216,.28);/* input placeholders */
  --g-accent:#ff6b00;
  --g-hair:rgba(255,255,255,.10);
  --g-hair2:rgba(255,255,255,.16);
  --g-cell:20px;              /* one padding value for every cell */
  --g-track:.26em;            /* micro-label tracking */
  /* NB: --g-label is the label COLOUR, set with the rest of the greys above.
     It used to be declared twice in this block (once as a colour, once as 9.5px);
     the later one silently won and made `label{color:var(--g-label)}` invalid,
     so form labels fell back to the body colour. One declaration now. */
}


/* ==========================================================================
   1.  CANVAS, RESET, NO RADIUS ANYWHERE
   ========================================================================== */
html{background:#000}
body{
  background:#000;                       /* kills the old colour gradients */
  background-image:none;
  color:var(--g-ink);
  font-family:'SG',system-ui,sans-serif;
  font-size:13.5px;
  line-height:1.66;
  font-variant-numeric:tabular-nums;     /* every figure in the app aligns */
  -webkit-font-smoothing:antialiased;
}
body::before{display:none}               /* the orange radial glow, gone */

/* One sweep, because "square corners" means every corner. This also squares
   the long-form study modules, which shipped at 9-12px; their type and layout
   are otherwise left exactly as they were (see section 15). */
*,*::before,*::after{border-radius:0 !important;box-shadow:none}

img,svg,video,canvas{max-width:100%;height:auto}
::selection{background:var(--g-accent);color:#fff}

/* nothing in the reference sits on a shadow; separation is a hairline */
.shell,.views .menu,.navdrop .menu,.album,.card,.panel,.dt,.kpis,.toolbar,
.builder,.igcard,.empty,.formcard,.legend,.seg,.chip,.badge,.btn,.iconbtn,
.galtile,.figure,.albumcover,.kpi .tile{box-shadow:none !important}

a{color:var(--g-ink);text-decoration:none}
a:hover{color:var(--g-accent)}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;
  color:var(--g-ink)}
hr{border:0;border-top:1px solid var(--g-hair);margin:22px 0}

/* --------------------------------------------------------------------------
   1b. ONE GUTTER
   The old sheet inset some blocks by 26px on top of the wrapper's own 26px,
   nested a second .wrap inside the first on six pages, and left the rest at
   a single 26px - so blocks on the same screen did not line up. Everything
   now shares one 24px gutter (14px on a phone). The few templates that carry
   a hard-coded 26px inline are neutralised by attribute, since an inline
   style can only be beaten by !important.
   -------------------------------------------------------------------------- */
.shell .wrap{padding:0 24px 0}
.wrap .wrap{padding:0;max-width:none;margin:0}

.headrow{padding:34px 0 0}
.toolbar{margin:22px 0 0}
.widgets{margin:16px 0 0}
.dt{margin:16px 0 0}
.formcard{margin:18px 0 0}
.empty{margin:18px 0 0}
.legend{margin:22px 0 0}
.savebar{margin:18px 0 0}

.flash[style*="26px"],
.card[style*="26px"],
.pull[style*="26px"],
.meta[style*="26px"],
.menuwrap[style*="26px"]{
  margin-left:0 !important;margin-right:0 !important;
  padding-left:0 !important;padding-right:0 !important;
}


/* ==========================================================================
   2.  THE SHELL  -  a flat plane divided by hairlines, not a floating card
   ========================================================================== */
.shell{
  max-width:1400px;
  margin:0 auto;
  padding:0;
  background:#000;
  border:0;
  border-left:1px solid var(--g-hair);
  border-right:1px solid var(--g-hair);
  border-radius:0;
  overflow:hidden;
}
footer.f{
  margin:34px 0 0;
  padding:20px 0 26px;
  border-top:1px solid var(--g-hair2);
  color:var(--g-faint);
  font-size:9.5px;
  letter-spacing:var(--g-track);
  text-transform:uppercase;
  display:flex;
  justify-content:space-between;
  gap:12px 26px;
  flex-wrap:wrap;
}


/* ==========================================================================
   3.  TOP BAR, NAV DROPDOWNS, VIEW SWITCHER
   The bar becomes a row of hairline-divided cells: mark | wordmark | nav |
   spacer | attention | view. Square summaries, uppercase micro type.
   ========================================================================== */
.topbar{
  display:flex;
  align-items:stretch;
  gap:0;
  padding:0 22px 0 20px;
  min-height:60px;
  border-bottom:1px solid var(--g-hair2);
  background:#000;
}
.topbar img{
  width:26px;height:26px;
  border-radius:0;
  align-self:center;
  margin-right:13px;
  flex:none;
}
.topbar .brand{
  font-family:'SGL',system-ui;
  font-size:12px;
  font-weight:300;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--g-ink);
  align-self:center;
  margin-right:26px;
  white-space:nowrap;
}
.topbar .spacer{flex:1}

.iconbtn{
  width:38px;height:38px;
  align-self:center;
  margin-right:14px;
  border:1px solid var(--g-hair);
  background:transparent;
  border-radius:0;
  color:var(--g-accent);
  font-size:12px;
  line-height:1;
}
.iconbtn:hover{border-color:var(--g-hair2);color:var(--g-accent)}

summary{list-style:none}
summary::-webkit-details-marker{display:none}
svg.car{color:var(--g-faint)}
.topbar svg.car *{stroke-width:1.3}

/* --- the nav cell --- */
.navdrop{margin-left:0;align-self:stretch;display:flex;position:relative}
.navdrop summary{
  display:inline-flex;align-items:center;gap:11px;
  padding:0 20px;height:auto;min-width:0;
  border:0;border-left:1px solid var(--g-hair);border-right:1px solid var(--g-hair);
  background:transparent;
  color:var(--g-grey);
  font-size:9.5px;letter-spacing:.30em;text-transform:uppercase;
  white-space:nowrap;
}
.navdrop summary:hover{color:var(--g-ink);background:rgba(255,255,255,.03)}
.navdrop[open] summary{color:var(--g-accent);background:transparent}
.navdrop[open] summary .car{color:var(--g-accent)}
.navdrop summary .car{transition:transform .15s}
.navdrop[open] summary .car{transform:rotate(180deg)}

.navdrop .menu{
  left:0;right:auto;top:100%;
  min-width:320px;max-width:min(92vw,440px);
  padding:0;
  border:1px solid var(--g-hair2);
  background:#000;
  box-shadow:none !important;
  display:grid;grid-template-columns:1fr 1fr;gap:0;
}
.navdrop .grp{
  grid-column:1/-1;
  font-size:9px;letter-spacing:.30em;text-transform:uppercase;
  color:var(--g-ghost);
  padding:16px 16px 7px;
  border-top:1px solid var(--g-hair);
  margin:0;
}
.navdrop .grp:first-child{border-top:0;padding-top:14px}
.navdrop .menu a{
  padding:10px 16px;
  border-bottom:1px solid rgba(255,255,255,.05);
  color:var(--g-grey);
  font-size:12.5px;
  white-space:nowrap;
}
.navdrop .menu a:hover{background:transparent;color:var(--g-ink)}
.navdrop .menu a.on{
  background:transparent;color:var(--g-accent);font-weight:400;
  box-shadow:inset 2px 0 0 var(--g-accent);
}

/* --- the view switcher cell --- */
.views{position:relative;margin-left:0;align-self:stretch;display:flex}
.views summary{
  display:inline-flex;align-items:center;gap:11px;
  padding:0 0 0 20px;height:auto;
  border:0;border-left:1px solid var(--g-hair);
  background:transparent;
}
.views summary:hover{background:rgba(255,255,255,.03)}
.views[open] summary{border-left-color:var(--g-accent)}
.views .av{
  width:26px;height:26px;flex:none;
  border:1px solid var(--g-hair2);border-radius:0;
  background:transparent;color:var(--g-ink);
  display:grid;place-items:center;
  font-size:10px;font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;
}
.views[open] .av{border-color:var(--g-accent);color:var(--g-accent)}
.views .whoami{display:flex;flex-direction:column;line-height:1.35;text-align:left}
.views .nm{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--g-ink)}
.views .rl{font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--g-faint)}
.views summary .car{margin-left:4px;transition:transform .15s}
.views[open] summary .car{transform:rotate(180deg)}

.views .menu{
  right:0;left:auto;top:100%;z-index:60;
  min-width:300px;padding:0;
  border:1px solid var(--g-hair2);
  background:#000;box-shadow:none !important;
}
.views .menu .grp{
  font-size:9px;letter-spacing:.30em;text-transform:uppercase;color:var(--g-ghost);
  padding:15px 16px 6px;border-top:1px solid var(--g-hair);
}
.views .menu .grp:first-child{border-top:0;padding-top:14px}
.views .menu a{
  display:flex;flex-direction:column;gap:3px;
  padding:11px 16px;
  border-bottom:1px solid rgba(255,255,255,.05);
  color:var(--g-grey);font-size:12.5px;
}
.views .menu a:hover{background:transparent;color:var(--g-ink)}
.views .menu a.on{background:transparent;color:var(--g-accent);
  box-shadow:inset 2px 0 0 var(--g-accent)}
.views .menu a .hint{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--g-faint)}
.views .menu a.on .hint{color:var(--g-faint)}
.views .menu a:last-child{border-bottom:0}


/* ==========================================================================
   4.  TYPE
   Page h1: huge, uppercase, light, tight. Section h2/h3: the same voice one
   size down. h4/h5: micro-labels. .hint is used in five templates and had no
   rule of its own at all, so it was inheriting body copy - it is a label.
   ========================================================================== */
h1,h2,h3{font-family:'SGL',system-ui;font-weight:300;color:var(--g-ink);
  text-transform:uppercase;letter-spacing:-.03em;line-height:.98;
  overflow-wrap:break-word}
h1{font-size:clamp(30px,5.5vw,56px) !important;margin:0}
h2{font-size:clamp(19px,2.6vw,27px);margin:0}
h3{font-size:clamp(19px,2.6vw,27px);margin:34px 0 0;
  counter-increment:sec;
  display:flex;align-items:center;gap:16px}
/* the index sits at the far end of the heading rule rather than in front of the
   words, so the heading itself still starts flush with the table below it */
h3::before{content:"";order:1;flex:1 1 auto;height:1px;min-width:24px;
  background:var(--g-hair)}
h3::after{
  content:counter(sec,decimal-leading-zero);
  order:2;flex:none;
  font-family:'SG',system-ui;font-size:9.5px;font-weight:400;
  letter-spacing:.20em;color:var(--g-ghost);line-height:1;
}
h4,h5{font-family:'SG',system-ui;font-weight:400;text-transform:uppercase}
/* style.css gives .card h4 13px and shell.css gives .dt .dthead h4 14.5px - both
   outrank a bare h4 rule. Every block-header label in this layer is the same
   10px wide-tracked caption, so those two are restated at (0,1,1) where they win. */
h4{
  font-size:10px;letter-spacing:.24em;color:var(--g-ghost);
  display:flex;align-items:center;gap:12px;margin:0;
}
h4::after{content:"";flex:1;height:1px;background:var(--g-hair);min-width:18px}
.card h4,.dt .dthead h4,.panel h4,.formcard h4,.igcard h4,.legend h4{
  font-size:10px;letter-spacing:.24em;font-weight:400;color:var(--g-ghost);
}
h5{font-size:10px;letter-spacing:.26em;color:var(--g-ghost);margin:0 0 14px}

/* the eyebrow: a wide-tracked micro-label with a rule running off to the right */
.kick{
  font-size:9.5px;font-weight:400;letter-spacing:.34em;text-transform:uppercase;
  color:var(--g-ghost);
  margin:36px 0 0;
  display:flex;align-items:center;gap:16px;
}
.kick::after{content:"";flex:1;height:1px;background:var(--g-hair);min-width:40px}
.kick a{color:inherit}
.kick a:hover{color:var(--g-accent)}

.blurb{color:var(--g-mute);max-width:74ch;margin-top:14px;font-size:13px;line-height:1.72}
.meta{color:var(--g-faint);font-size:11.5px;line-height:1.6;
  letter-spacing:.02em;margin-top:10px}
.sub{color:var(--g-mute);font-size:12.5px;line-height:1.7}
.hint{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--g-faint)}

/* the pull quote: editorial, not italic, ruled by a single orange hairline */
.pull{
  font-family:'SGL',system-ui;font-style:normal;font-weight:300;
  font-size:clamp(17px,2.1vw,22px);line-height:1.26;letter-spacing:-.015em;
  color:var(--g-ink);text-transform:uppercase;
  border-left:1px solid var(--g-accent);
  padding-left:20px;margin:30px 0 0;max-width:60ch;
}


/* ==========================================================================
   5.  HEAD ROW + KPI CELLS
   The KPI row is a hairline grid of numbered cells - [01] [02] [03] [04] -
   divided by 1px rules rather than rounded cards. shell.css already counters
   them; this keeps that counter and matches the metrics to it.
   ========================================================================== */
.headrow{display:flex;align-items:flex-start;gap:34px;flex-wrap:wrap}
.headrow>div:first-child{min-width:0;flex:1 1 320px}
.headrow h1{max-width:15ch}
.headrow .kick{margin:0 0 16px}
.headrow .sub{margin-top:18px;max-width:46ch;font-size:12.5px}

.kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:0;
  flex:1 1 auto;
  /* deliberately low: four templates set their own max-width on this row
     (250px on Menu and the generic module page, 520px on the roster), and a
     large min-width would silently outrank every one of them */
  min-width:min(260px,100%);
  border-top:1px solid var(--g-hair2);
  border-left:1px solid var(--g-hair);
  counter-reset:k;
  align-self:stretch;
}
/* Four KPIs in a 660px band gave three columns and left the fourth cell alone
   with two empty columns next to it. Give a four-cell row the whole line so it
   reads as one row of four. (A browser without :has() just keeps the old
   behaviour - this rule is then dropped, nothing else breaks.) */
.kpis:has(.kpi:nth-child(4)){flex-basis:100%;min-width:100%}
.kpi{
  counter-increment:k;
  display:block;position:relative;min-width:0;
  padding:var(--g-cell);
  border-right:1px solid var(--g-hair);
  border-bottom:1px solid var(--g-hair2);
  background:transparent;
  border-radius:0;
}
.kpi .tile{display:none}
/* The cell-corner numeral, [01] - [04], is one of the defining marks of the
   approved reference and shell.css already counted the row, so it stays.
   It must not read as the same sequence as the page's section index further
   down, though, so the two are given different grammar: cell corners bracket
   their numeral, the page's own index (sections, figure strips, tables,
   panels) runs unbracketed. One index per page, never two [04]s that could be
   mistaken for each other. */
.kpi::before{
  content:"[" counter(k,decimal-leading-zero) "]";
  position:absolute;top:var(--g-cell);right:var(--g-cell);
  font-size:9.5px;letter-spacing:.16em;color:var(--g-ghost);
  font-variant-numeric:tabular-nums;
}
.kpi .lbl{
  display:block;margin-bottom:12px;
  font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--g-faint);
}
.kpi .num{
  font-family:'SGL',system-ui;
  font-size:clamp(24px,3.2vw,38px);font-weight:300;
  letter-spacing:-.03em;line-height:1;color:var(--g-ink);
  font-variant-numeric:tabular-nums;
  overflow-wrap:break-word;
}
.kpi .dlt{
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  margin-top:12px;line-height:1.5;
}

/* the semantic rule, stated once and used everywhere */
.dlt.up,.up{color:var(--g-ink)}
.dlt.down,.down{color:var(--g-accent)}
.dlt.flat,.flat{color:var(--g-faint)}


/* ==========================================================================
   6.  TOOLBAR, CHIPS, SEGMENTS, FILTERS
   ========================================================================== */
.toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 0;
  border-top:1px solid var(--g-hair);
  border-bottom:1px solid var(--g-hair);
  background:transparent;
  border-radius:0;
}
.toolbar .search{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:0;border:0;background:transparent;
  min-width:0;flex:1;
}
.toolbar .search .q{
  font-size:9.5px;letter-spacing:.30em;text-transform:uppercase;color:var(--g-ink);
}
.toolbar .search .meta{color:var(--g-faint);font-size:11.5px;margin:0}

.chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 13px;
  border:1px solid rgba(255,107,0,.45);
  background:transparent;border-radius:0;
  color:var(--g-accent);
  font-size:9.5px;letter-spacing:.20em;text-transform:uppercase;
}

.seg{
  display:flex;gap:0;padding:0;
  border:1px solid var(--g-hair);background:transparent;border-radius:0;
}
.seg span,.seg a{
  font-size:9.5px;letter-spacing:.20em;text-transform:uppercase;
  color:var(--g-faint);padding:8px 15px;border-radius:0;
  border-right:1px solid var(--g-hair);
}
.seg span:last-child,.seg a:last-child{border-right:0}
.seg span.on,.seg a.on{background:#fff;color:#000}
.seg a:hover{color:var(--g-ink)}
.seg a.on:hover{color:#000}

.filters{display:flex;gap:5px;flex-wrap:wrap}
.filters span{
  font-size:9px;letter-spacing:.20em;text-transform:uppercase;
  padding:6px 11px;border-radius:0;
  border:1px solid var(--g-hair);color:var(--g-faint);
}
.filters span.on{
  color:#000;background:#fff;border-color:#fff;
}
.filters span:nth-child(n+2){color:var(--g-ghost);border-color:rgba(255,255,255,.13)}
.filters span.on:nth-child(n+2){color:#000;border-color:#fff}


/* ==========================================================================
   7.  FIGURE STRIPS  (.figs / .fig)
   Collapse the 1px gap trick into true hairlines and drop the cell fill.
   ========================================================================== */
.figs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:0;
  border:0;border-top:1px solid var(--g-hair2);border-left:1px solid var(--g-hair);
  background:transparent;
  margin-top:30px;
  position:relative;padding-top:26px;
}
.fig{
  background:transparent;border:0;
  border-right:1px solid var(--g-hair);border-bottom:1px solid var(--g-hair);
  padding:18px 16px 20px;
  min-width:0;
}
.fig .l{
  font-size:9px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  color:var(--g-faint);
}
.fig .v{
  font-family:'SGL',system-ui;
  font-size:clamp(17px,2.4vw,27px);font-weight:300;color:var(--g-ink);
  margin-top:12px;letter-spacing:-.025em;line-height:1.05;
  font-variant-numeric:tabular-nums;overflow-wrap:break-word;
}
.fig .v.or{color:var(--g-accent)}
/* payroll writes class="v lift" when the month went OVER budget and "green"
   when it came in under - so lift is the one that needs attention */
.fig .v.lift{color:var(--g-accent)}
.fig .v.green{color:var(--g-ink)}
.fig .s{font-size:10.5px;color:var(--g-faint);margin-top:8px;line-height:1.55}


/* ==========================================================================
   8.  CARDS AND PANELS  -  cells in a hairline grid
   .cards collapses to gap 0 and the grid supplies the top and left rules,
   so the cards need only right and bottom. A standalone .card carries its
   own full hairline frame.
   ========================================================================== */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(298px,1fr));
  gap:0;
  border-top:1px solid var(--g-hair2);border-left:1px solid var(--g-hair);
  margin-top:30px;
  position:relative;padding-top:26px;
}
.card{
  background:transparent;
  border:1px solid var(--g-hair);
  border-radius:0;
  padding:var(--g-cell);
  margin:0;
  min-width:0;
}
.cards>.card{border:0;border-right:1px solid var(--g-hair);border-bottom:1px solid var(--g-hair)}
.card h4{color:var(--g-ghost)}
.card p{color:var(--g-mute);font-size:13px;margin-top:12px;line-height:1.7}
.card .row{
  display:flex;justify-content:space-between;gap:16px;
  padding:11px 0;
  border-bottom:1px solid var(--g-hair);
  font-size:12.5px;line-height:1.55;
}
.card .row:last-child{border-bottom:0}
.card .row .k{color:var(--g-faint);letter-spacing:.01em}
.card .row .v{color:var(--g-ink);text-align:right;font-variant-numeric:tabular-nums}

/* panels: the three-across widget row */
.widgets{
  display:grid;gap:0;grid-template-columns:1.35fr 1fr 1fr;
  border-top:1px solid var(--g-hair2);border-left:1px solid var(--g-hair);
}
.panel{
  background:transparent;border:0;border-radius:0;
  border-right:1px solid var(--g-hair);border-bottom:1px solid var(--g-hair);
  padding:var(--g-cell);
  min-width:0;
  overflow:hidden;
}
.panel h4{font-size:10px;letter-spacing:.24em;color:var(--g-ghost);
  display:flex;align-items:center;gap:12px}
.panelhead{display:flex;align-items:center;gap:12px;margin-bottom:18px;
  border-bottom:1px solid var(--g-hair);padding-bottom:14px}
.panelhead .spacer{flex:1}
.panel .meta{font-size:11px}
.panel a{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--g-grey)}
.panel a:hover{color:var(--g-accent)}

.bignums{display:flex;gap:30px;margin:0 0 20px;flex-wrap:wrap}
.bignums .n{
  font-family:'SGL',system-ui;font-size:clamp(19px,2.3vw,27px);font-weight:300;
  color:var(--g-ink);letter-spacing:-.025em;line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.bignums .c{font-size:9px;letter-spacing:.20em;text-transform:uppercase;
  color:var(--g-faint);margin-top:8px}

/* heat map: square cells, orange as the single ramp */
.heat{display:grid;grid-template-columns:40px repeat(var(--cols),1fr);gap:2px;
  align-items:center;margin-top:6px}
.heat .rl{font-size:9px;color:var(--g-faint);letter-spacing:.10em;text-transform:uppercase}
.heat .cl{font-size:9px;color:var(--g-faint);text-align:center;letter-spacing:.04em}
.heat .cell{background:rgba(255,255,255,.05);border-radius:0}
.heat .cell:hover{outline:1px solid var(--g-accent)}
.heat .cell.h0{background:rgba(255,255,255,.055)}
.heat .cell.h1{background:rgba(255,107,0,.22)}
.heat .cell.h2{background:rgba(255,107,0,.40)}
.heat .cell.h3{background:rgba(255,107,0,.62)}
.heat .cell.h4{background:rgba(255,107,0,.85)}
.heat .cell.h5{background:var(--g-accent)}

/* timeline: square ticks on a hairline rail */
.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;padding:0 0 18px 22px;
  border-left:1px solid var(--g-hair)}
.tl li:last-child{border-left-color:transparent;padding-bottom:0}
.tl li::before{content:'';position:absolute;left:-3px;top:7px;width:5px;height:5px;
  background:var(--g-accent)}
.tl .k{font-size:12.5px;color:var(--g-ink);line-height:1.5}
.tl .v{font-size:11px;color:var(--g-faint);margin-top:5px;line-height:1.6}

/* legend strip - shared by the roster key and the heat map */
.legend{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px 18px;
  padding:14px 0 0;margin:0;
  border:0;border-top:1px solid var(--g-hair);
  background:transparent;border-radius:0;
  font-size:10.5px;color:var(--g-faint);line-height:1.7;
  letter-spacing:.04em;
}
.legend i{width:12px;height:10px;flex:none;display:inline-block;border-radius:0}
.lgtitle{font-size:9px;letter-spacing:.30em;text-transform:uppercase;
  color:var(--g-ghost);margin-bottom:4px;flex-basis:100%}
.lgrow{display:flex;flex-wrap:wrap;gap:8px 18px;flex:1}
.lg{font-size:11px;color:var(--g-faint);letter-spacing:.03em}
.lg b{color:var(--g-ink);font-weight:400;margin-right:6px}
.lg i{color:var(--g-faint);font-style:normal}


/* ==========================================================================
   9.  TABLES
   Horizontal hairlines only. Uppercase micro-label headers on the canvas,
   no zebra, no filled header band, right-aligned tabular numerics.
   ========================================================================== */
table{border-collapse:collapse;width:100%;min-width:520px}
th{
  text-align:left;
  font-size:9px;font-weight:400;letter-spacing:.20em;text-transform:uppercase;
  color:var(--g-ghost);
  padding:13px 14px;
  border-bottom:1px solid var(--g-hair2);
  background:transparent;
  white-space:nowrap;
  line-height:1.3;
}
td{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:12.5px;color:var(--g-mute);
  vertical-align:top;
  line-height:1.55;
}
tr:last-child td{border-bottom:0}
th.n,td.n{text-align:right;font-variant-numeric:tabular-nums}
td.n{white-space:nowrap}
td.k,td.strong{color:var(--g-ink)}
td.or{color:var(--g-accent)}
tr.tot td{background:transparent;color:var(--g-ink);font-weight:400;
  border-top:1px solid var(--g-hair2);border-bottom:0;
  text-transform:uppercase;font-size:10px;letter-spacing:.16em}
tr.tot td.n{font-variant-numeric:tabular-nums}
td.act{white-space:nowrap;text-align:right}
tbody tr:hover td,table tr:hover td{background:rgba(255,255,255,.018)}

/* the framed table block */
.tblwrap{
  overflow-x:auto;margin-top:20px;
  border:1px solid var(--g-hair);border-radius:0;
  -webkit-overflow-scrolling:touch;
}
.tblwrap table{min-width:560px}
/* a small table that lives inside a panel or a card (the trading-pattern list,
   the recently-imported list) must NOT inherit the 520px floor from style.css -
   it pushed the columns past the panel edge and clipped the figures. Its own
   content width decides; the .scroll box still swipes if it needs to. */
.panel>.scroll>table,.card>.scroll>table,.panel>table,.card>table{min-width:0}
.tblwrap th:first-child,.tblwrap td:first-child{padding-left:16px}
.tblwrap th:last-child,.tblwrap td:last-child{padding-right:16px}

/* the data table block with its own header row */
.dt{
  border:1px solid var(--g-hair);border-radius:0;
  background:transparent;overflow:hidden;
}
.dt .dthead{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:16px 18px;
  border-bottom:1px solid var(--g-hair2);
}
.dt .dthead h4{flex:0 1 auto;min-width:0}
.dt .dthead h4::before{
  content:counter(sec,decimal-leading-zero);
  font-size:9px;letter-spacing:.16em;color:var(--g-ghost);
  margin-right:8px;
}
.dt .dthead h4::after{display:none}
.dt .dthead .spacer{flex:1}
.dt .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.dt table{min-width:680px}
.dt th{background:#000;border-bottom:1px solid var(--g-hair2);padding:12px 16px}
.dt td{padding:12px 16px}
.dt tr:hover td{background:rgba(255,255,255,.018)}

/* the weekly roster grid */
table.roster{min-width:760px}
table.roster th{
  text-align:center;line-height:1.45;white-space:normal;
  padding:14px 8px;border-bottom:1px solid var(--g-hair2);
}
table.roster th .sub{display:block;color:var(--g-faint);font-size:9px;
  letter-spacing:.12em;margin-top:5px;text-transform:uppercase}
table.roster th.on{color:var(--g-accent);border-bottom-color:var(--g-accent)}
table.roster td{text-align:center;vertical-align:top;padding:11px 8px;color:var(--g-grey)}
table.roster td.band{
  text-align:left;white-space:nowrap;color:var(--g-faint);
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.8;border-right:1px solid var(--g-hair);
  padding-left:16px;
}
table.roster td.on{background:rgba(255,107,0,.055)}
table.roster tr.targetrow td{
  color:var(--g-ink);border-top:1px solid var(--g-hair2);
  font-size:12px;font-variant-numeric:tabular-nums;
}
table.roster tr.targetrow td.band b{color:var(--g-ink);font-weight:400}
table.roster tr.clearrow td{color:var(--g-faint);font-size:11px}
table.roster tr.clearrow td.band{color:var(--g-faint)}
.roster td.band b{color:var(--g-ink);font-weight:400}
.pchip{
  display:inline-block;padding:4px 8px;margin:2px 1px;
  border:1px solid rgba(255,255,255,.16);border-radius:0;
  background:transparent;color:var(--g-ink);
  font-size:11px;letter-spacing:.02em;white-space:nowrap;
}
table.roster td.on .pchip{border-color:rgba(255,107,0,.42)}

/* the roster builder (fill in the blanks) */
.builder{
  overflow-x:auto;margin:20px 0 0;
  border:1px solid var(--g-hair);border-radius:0;background:transparent;
  -webkit-overflow-scrolling:touch;
}
.builder table{width:100%;border-collapse:collapse;border-spacing:0;min-width:940px}
.builder th,.builder td{padding:10px 9px;
  border-bottom:1px solid rgba(255,255,255,.055);vertical-align:top}
.builder thead th{
  text-align:center;font-size:9px;letter-spacing:.20em;text-transform:uppercase;
  color:var(--g-ghost);border-bottom:1px solid var(--g-hair2);padding:14px 9px;
  background:transparent;
}
.builder thead th b{display:block;color:var(--g-ink);font-size:10px;
  letter-spacing:.20em;font-weight:400}
.builder thead th span{font-size:9px;color:var(--g-faint);letter-spacing:.10em}
.builder thead th.now b{color:var(--g-accent)}
.builder .band{
  width:104px;text-align:left;font-size:9.5px;color:var(--g-ink);
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  padding-left:16px;
}
.builder .band span{color:var(--g-faint);font-size:9px;letter-spacing:.10em}
.builder tr.meta th.band{color:var(--g-faint);font-size:9px;
  text-transform:uppercase;letter-spacing:.18em}
.builder .bandrow td{background:transparent}
.builder select.pick{
  width:100%;min-width:100px;margin:0 0 6px;padding:7px 8px;
  border:1px solid var(--g-hair);border-radius:0;
  background:#000;color:var(--g-grey);
  font:inherit;font-size:11.5px;letter-spacing:.04em;
  cursor:pointer;-webkit-appearance:none;appearance:none;
}
.builder select.pick:last-child{margin-bottom:0}
.builder select.pick:hover{border-color:var(--g-hair2)}
.builder select.pick.filled{
  border-color:rgba(255,107,0,.5);background:rgba(255,107,0,.07);
  color:var(--g-ink);font-weight:400;
}
.builder select.pick:focus{outline:1px solid var(--g-accent);outline-offset:0;
  border-color:var(--g-accent)}
.builder tr.meta td{padding:7px 9px}
.builder input.tiny{
  width:100%;min-width:96px;padding:7px 8px;
  border:1px solid var(--g-hair);border-radius:0;background:transparent;
  color:var(--g-ink);font:inherit;font-size:11.5px;text-align:right;
  font-variant-numeric:tabular-nums;
}
.builder input.tiny:focus{outline:1px solid var(--g-accent);outline-offset:0;
  border-color:var(--g-accent)}
.builder tr.leave td{font-size:10px;color:var(--g-accent);line-height:1.55;
  letter-spacing:.08em;text-transform:uppercase}
.savebar{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.savebar .hint{font-size:9.5px}
.linkbtn{background:none;border:0;padding:0;color:var(--g-accent);
  font:inherit;font-size:inherit;cursor:pointer;
  border-bottom:1px solid rgba(255,107,0,.5)}


/* ==========================================================================
   10.  FORMS
   Square, hairline, transparent. Focus is an orange rule, not a soft ring.
   ========================================================================== */
label{
  display:block;font-size:9px;font-weight:400;letter-spacing:.22em;
  text-transform:uppercase;color:var(--g-label);margin-bottom:8px;
}
input,select,textarea{
  width:100%;
  background:transparent;
  border:1px solid var(--g-hair);
  border-radius:0;
  color:var(--g-ink);
  font-family:'SG',system-ui;
  font-size:13.5px;
  padding:11px 12px;
  font-variant-numeric:tabular-nums;
}
input::placeholder,textarea::placeholder{color:var(--g-placeholder)}
input:hover,select:hover,textarea:hover{border-color:var(--g-hair2)}
input:focus,select:focus,textarea:focus{
  outline:1px solid var(--g-accent);outline-offset:0;border-color:var(--g-accent);
}
select option{background:#000;color:#fff}
textarea{min-height:84px;resize:vertical;line-height:1.65}
input[type=checkbox]{width:auto;accent-color:#ff6b00;border-radius:0}
input[type=file]{padding:9px 12px 9px 0;color:var(--g-faint);font-size:11.5px;
  border-color:transparent}
input[type=file]:hover{border-color:transparent}
input[type=file]::file-selector-button{
  font-family:'SG',system-ui;font-size:9.5px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;
  background:transparent;color:var(--g-ink);
  border:1px solid var(--g-hair2);border-radius:0;
  padding:10px 15px;margin-right:14px;cursor:pointer;
}
input[type=file]::file-selector-button:hover{border-color:#fff;color:#fff}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.45}
input[type=password]{letter-spacing:.24em}

/* grouped long forms */
.fsec{margin:30px 0 0;padding-top:22px;border-top:1px solid var(--g-hair)}
.fsec:first-of-type{border-top:0;padding-top:0;margin-top:16px}
.fsec h5{margin:0 0 4px;color:var(--g-grey);letter-spacing:.26em;
  font-weight:400;font-size:10px}
.fsec .fhint{font-size:11.5px;color:var(--g-faint);margin:6px 0 16px}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:20px 18px}
.fgrid .fw{grid-column:1/-1}
.fgrid label{font-size:9px}
.formcard{
  padding:22px 20px;
  border:1px solid var(--g-hair);border-radius:0;background:transparent;
}
.formcard .actions{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:30px;padding-top:20px;border-top:1px solid var(--g-hair);
}
.formcard .actions .meta{font-size:11px;max-width:52ch}

/* --- buttons -------------------------------------------------------------
   The templates use a bare `.btn` for their PRIMARY action (Save this week,
   Import this file, Build / edit this week) and `.btn.ghost` for the
   secondary one - that is the hierarchy style.css shipped, so it is kept:
   primary is the one solid orange, secondary is a hairline.               */
button{font-family:'SG',system-ui;border-radius:0;cursor:pointer}
.btn,button.btn,a.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--g-accent);
  color:#fff;
  border:1px solid var(--g-accent);
  border-radius:0;
  font-family:'SG',system-ui;
  font-size:9.5px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  padding:12px 18px;
  margin-top:0;
  cursor:pointer;
  text-decoration:none;
  line-height:1;
  min-height:40px;
}
.btn:hover,button.btn:hover,a.btn:hover{
  background:var(--g-accent);border-color:#fff;color:#fff}
.btn.solid,.btn.primary{background:var(--g-accent);border-color:var(--g-accent);
  color:#fff;font-weight:400}
.btn.solid:hover,.btn.primary:hover{background:var(--g-accent);
  border-color:#fff;color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--g-hair);color:var(--g-grey);
  padding:11px 16px;font-size:9.5px}
.btn.ghost:hover{background:transparent;border-color:var(--g-ink);color:var(--g-ink)}
.btn.ghost.ok{border-color:rgba(255,255,255,.30);color:var(--g-ink)}
.btn.ghost.ok:hover{border-color:#fff;color:#fff}
.btn.ghost.no{border-color:rgba(255,107,0,.5);color:var(--g-accent)}
.btn.ghost.no:hover{border-color:var(--g-accent);color:var(--g-accent)}
.btn.mini,.btn.ghost.mini{padding:8px 11px;font-size:9px;letter-spacing:.16em;
  min-height:34px}
.btn[disabled],.btn.ghost[style*="opacity"]{opacity:.35}

/* one accent per row: inside a toolbar only the first button keeps the orange,
   the rest of that row drop to the hairline secondary. Without this the EOD
   report's three navigation buttons all filled hot orange side by side. */
.toolbar>a.btn:not(.ghost):not(.solid):not(.primary):not(:first-child),
.toolbar>button.btn:not(.ghost):not(.solid):not(.primary):not(:first-child){
  background:transparent;border-color:var(--g-hair);color:var(--g-grey);
}
.toolbar>a.btn:not(.ghost):not(.solid):not(.primary):not(:first-child):hover,
.toolbar>button.btn:not(.ghost):not(.solid):not(.primary):not(:first-child):hover{
  background:transparent;border-color:var(--g-ink);color:var(--g-ink);
}
.btnico svg{width:12px;height:12px;flex:none;stroke:currentColor;stroke-width:1.4;
  fill:none;stroke-linecap:round}
.btnico.round{border-radius:0;padding:11px 12px;gap:0}
.btnico.round svg{width:13px;height:13px}
.btnico.lg svg{width:14px;height:14px}


/* ==========================================================================
   11.  BADGES, FLASHES, EMPTY STATES
   ========================================================================== */
.badge{
  display:inline-block;
  padding:4px 9px;
  border:1px solid;
  border-radius:0;
  font-size:9px;letter-spacing:.20em;text-transform:uppercase;
  line-height:1.4;
  background:transparent;
}
.badge.ok{color:var(--g-ink);border-color:rgba(255,255,255,.30);
  background:transparent}
.badge.warn{color:var(--g-accent);border-color:rgba(255,107,0,.50);
  background:transparent}
.badge.neutral{color:var(--g-faint);border-color:var(--g-hair);
  background:transparent}

.flash{
  margin:18px 0 0;
  padding:14px 18px;
  border:1px solid var(--g-hair);
  border-left:1px solid #fff;
  border-radius:0;background:transparent;
  font-size:12.5px;color:var(--g-grey);line-height:1.65;
}
.flash.ok{border-color:var(--g-hair);border-left-color:#fff;color:var(--g-ink)}
.flash.bad{border-color:var(--g-hair);border-left-color:var(--g-accent);
  color:var(--g-accent)}

.empty{
  padding:26px 22px;
  border:1px solid var(--g-hair);
  border-radius:0;background:transparent;
  text-align:left;position:relative;
}
.empty::before{
  content:counter(sec,decimal-leading-zero);
  position:absolute;top:22px;right:22px;
  font-size:9px;letter-spacing:.16em;color:var(--g-ghost);
}
.empty .big{font-family:'SGL',system-ui;font-size:clamp(17px,2.2vw,23px);
  font-weight:300;color:var(--g-ink);margin-bottom:12px;letter-spacing:-.02em;
  text-transform:uppercase;line-height:1.05}
.empty .sm{font-size:12.5px;color:var(--g-mute);max-width:56ch;margin:0;
  line-height:1.75}

/* section headings inside pages that carry their own page-head row */
.phead{display:flex;align-items:flex-start;gap:30px;flex-wrap:wrap;padding:34px 0 0}
.phead>div:first-child{min-width:0;flex:1 1 320px}
.phead h1{max-width:16ch}
.phead .kick{margin:0 0 16px}
.phead .sub{margin-top:18px;max-width:52ch}
.pacts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.note{
  margin:20px 0 0;padding:16px 20px;
  border:1px solid var(--g-hair);border-left:1px solid var(--g-accent);
  font-size:12.5px;color:var(--g-grey);line-height:1.7;
}
.note b{color:var(--g-ink);font-weight:400}


/* ==========================================================================
   12.  GALLERY  -  square tiles on the grid
   ========================================================================== */
.albums{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
  gap:0;
  margin:30px 0 0;
  border-top:1px solid var(--g-hair2);border-left:1px solid var(--g-hair);
  position:relative;padding-top:26px;
}
.album{
  display:block;text-decoration:none;
  border:0;border-right:1px solid var(--g-hair);border-bottom:1px solid var(--g-hair);
  background:transparent;border-radius:0;
  transition:none;
}
.album:hover{transform:none;border-color:var(--g-hair)}
.albumcover{position:relative;aspect-ratio:4/3;background:#070707;overflow:hidden}
.albumcover img{width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .2s}
.album:hover .albumcover img{opacity:.7}
.albumcover .nocover{position:absolute;inset:0;display:grid;place-items:center;
  color:var(--g-faint);font-size:9px;letter-spacing:.24em;text-transform:uppercase}
.albumcount{
  position:absolute;right:0;bottom:0;
  padding:5px 10px;
  border:0;border-left:1px solid var(--g-hair);border-top:1px solid var(--g-hair);
  background:#000;color:var(--g-ink);
  font-size:10px;letter-spacing:.10em;
  font-variant-numeric:tabular-nums;
}
.albumbody{padding:16px 18px 18px}
.albumbody b{
  display:block;font-size:13px;font-weight:400;color:var(--g-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:-.01em;
}
.albumbody span{display:block;font-size:9px;color:var(--g-faint);margin-top:7px;
  letter-spacing:.20em;text-transform:uppercase}

.gal{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:0;margin:30px 0 0;
  border-top:1px solid var(--g-hair2);border-left:1px solid var(--g-hair);
  position:relative;padding-top:26px;
}
.gal figure{
  background:transparent;border:0;
  border-right:1px solid var(--g-hair);border-bottom:1px solid var(--g-hair);
  border-radius:0;overflow:hidden;margin:0;
}
.gal img{width:100%;height:172px;object-fit:cover;display:block;background:#070707}
.gal figcaption{padding:13px 16px 15px;font-size:11.5px;color:var(--g-faint);
  line-height:1.6}
.gal figcaption b{display:block;color:var(--g-ink);font-size:12.5px;
  font-weight:400;margin-bottom:5px}

.galgrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:0;margin:24px 0 0;
  border-top:1px solid var(--g-hair2);border-left:1px solid var(--g-hair);
  position:relative;padding-top:26px;
}
.galtile{
  margin:0;border:0;border-right:1px solid var(--g-hair);
  border-bottom:1px solid var(--g-hair);
  background:transparent;border-radius:0;overflow:hidden;
}
.galtile a{display:block}
.galtile img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#070707}
.galtile .nophoto{display:grid;place-items:center;aspect-ratio:1/1;
  color:var(--g-faint);font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  background:#070707}
.galtile figcaption{padding:11px 14px 13px}
.galtile figcaption b{display:block;font-size:11.5px;color:var(--g-ink);
  font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.galtile figcaption span{font-size:9px;color:var(--g-faint);letter-spacing:.16em;
  text-transform:uppercase;display:block;margin-top:5px}

/* the Instagram card - a hairline cell, not a tinted panel */
.igcard{
  margin:22px 0 0;padding:var(--g-cell);
  border:1px solid var(--g-hair);border-radius:0;background:transparent;
}
.igcard.on{border-color:var(--g-hair);border-left:1px solid var(--g-accent)}
.igtop{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.igcard .lbl{font-size:9px;letter-spacing:.30em;text-transform:uppercase;
  color:var(--g-ghost)}
.igstate{font-size:13px;color:var(--g-grey);margin-top:9px}
.igstate b{color:var(--g-ink);font-weight:400}
.igstate .dlt{display:inline;margin-left:10px}
.igcard .meta{font-size:11px}
.ignote{margin:20px 0 0;font-size:12px;line-height:1.75;color:var(--g-mute);
  border-top:1px solid var(--g-hair);padding-top:16px}
.ignote b{color:var(--g-ink);font-weight:400}
.ignote code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;
  background:transparent;padding:0;border-bottom:1px solid var(--g-hair);
  border-radius:0;color:var(--g-ink)}
.ignote.bad{margin-top:16px;border-top:0;border-left:1px solid var(--g-accent);
  border-radius:0;background:transparent;color:var(--g-accent);
  padding:12px 16px;font-size:11.5px}
.ignote.bad b{color:var(--g-accent);font-weight:400}


/* ==========================================================================
   13.  MENU PAGE, ORG CHART, LOGIN GATE
   ========================================================================== */
.menusec{margin:32px 0 0}
.menusec h3{margin-bottom:0}
.menuage{font-size:9px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--g-faint);font-weight:400;margin-left:4px}
.mrow{
  display:grid;grid-template-columns:1fr auto;gap:5px 20px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid rgba(255,255,255,.06);
}
.mrow:last-child{border-bottom:0}
.mi{font-size:13.5px;color:var(--g-ink);letter-spacing:-.005em}
.mp{font-family:'SGL',system-ui;font-size:14px;color:var(--g-grey);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.md{grid-column:1/-1;font-size:11.5px;color:var(--g-faint);line-height:1.6;
  margin-top:2px}
.menuwrap{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:6px}
@media(max-width:860px){.menuwrap{grid-template-columns:1fr}}

.tier{margin-top:34px;border-top:1px solid var(--g-hair2);padding-top:20px}
.tier .meta{font-size:9px;letter-spacing:.30em;text-transform:uppercase;
  color:var(--g-ghost);margin:0}
.tier .who{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:0;margin-top:18px;
  border-top:1px solid var(--g-hair);border-left:1px solid var(--g-hair);
}
.person{
  background:transparent;
  border:0;border-right:1px solid var(--g-hair);border-bottom:1px solid var(--g-hair);
  border-radius:0;padding:20px;
  min-width:0;
}
.person .nm{font-size:16px;font-weight:300;color:var(--g-ink);
  font-family:'SGL',system-ui;letter-spacing:-.02em;line-height:1.15}
.person .ti{font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--g-ghost);margin-top:10px}
.person .dk{font-size:11.5px;color:var(--g-faint);margin-top:10px;line-height:1.65}

.logingate{
  max-width:420px;margin:60px auto 0;text-align:left;
  padding:34px 30px 30px;
  border:1px solid var(--g-hair);
}
.logingate .kick{display:block;margin:0 0 18px}
.logingate .kick::after{display:none}
.logingate h1{margin:0}
.logingate .blurb{margin:18px 0 0;font-size:12.5px;max-width:none}
.logingate form.g{margin-top:26px}
.logingate input{text-align:left;font-size:15px;letter-spacing:.3em;padding:14px 15px}
.logingate .btn{width:100%;margin-top:12px;padding:15px 18px;min-height:46px}
.logingate .meta{margin-top:22px;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--g-faint)}
.logingate .meta a{color:var(--g-grey);border-bottom:1px solid var(--g-hair)}
.logingate .meta a:hover{color:var(--g-accent);border-bottom-color:var(--g-accent)}
.logingate code{font-size:11px;letter-spacing:.06em}


/* ==========================================================================
   14.  MICRO-LABELS ADDED WHERE THE HTML HAS NONE
   These containers arrive with no label of their own, so the grid supplies
   one - a numbered, wide-tracked caption pinned in the cell's top-left
   corner. Absolutely positioned, so it never becomes a grid item and never
   shifts the cells below it.
   ========================================================================== */
.figs::before,.cards::before,.albums::before,.gal::before,.galgrid::before{
  position:absolute;top:6px;left:0;
  font-family:'SG',system-ui;
  font-size:9px;font-weight:400;letter-spacing:.30em;text-transform:uppercase;
  color:var(--g-ghost);
}
.figs::before  {content:counter(sec,decimal-leading-zero) "   FIGURES"}
.cards::before {content:counter(sec,decimal-leading-zero) "   DETAIL"}
.albums::before{content:counter(sec,decimal-leading-zero) "   ALBUMS"}
.gal::before   {content:counter(sec,decimal-leading-zero) "   PHOTOGRAPHS"}
.galgrid::before{content:counter(sec,decimal-leading-zero) "   TILES"}

/* the section counter runs off the shell, not off .wrap - six pages nest a
   second .wrap inside the first, and a counter-reset there would restart the
   numbering halfway down the page */
.shell{counter-reset:sec}

/* Only blocks that actually DISPLAY a number increment it, so the index reads
   as a page index - 01, 02, 03 - with no gaps. */
h3,
.figs,.cards,.albums,.gal,.galgrid,.panel,.formcard,.empty,.dt{
  counter-increment:sec;
}

/* the panels number their own header row */
.panel .panelhead h4::before{
  content:counter(sec,decimal-leading-zero);
  font-size:9px;letter-spacing:.16em;color:var(--g-ghost);margin-right:2px;
}
.formcard>h4::before{
  content:counter(sec,decimal-leading-zero);
  font-size:9px;letter-spacing:.16em;color:var(--g-ghost);margin-right:8px;
}


/* ==========================================================================
   15.  THE LONG-FORM STUDY MODULES  -  guarded, not overwritten
   templates/modules/*.html carry their own <style> block scoped to .mod-wrap.
   It is already black / white / grey / #FF6B00 and already hairline-ruled, so
   it is deliberately left as designed: corners squared by the global reset in
   section 1, everything else protected from this layer.
   ========================================================================== */
.mod-wrap{border-radius:0}
.mod-wrap h1,.mod-wrap h2,.mod-wrap h3,.mod-wrap h4,.mod-wrap h5{
  text-transform:none;letter-spacing:inherit;
}
.mod-wrap h1{font-size:33px !important;font-weight:600;line-height:1.08}
.mod-wrap h2{font-size:20px !important;font-weight:600;line-height:1.22}
.mod-wrap h3{font-size:14px !important;font-weight:600;line-height:1.35;
  color:#fff;margin-top:22px;display:block}
.mod-wrap h3::before,.mod-wrap h3::after,
.mod-wrap h4::before,.mod-wrap h4::after,
.mod-wrap .kpi::before,.mod-wrap .card h4::after,
.mod-wrap .figs::before,.mod-wrap .cards::before,
.mod-wrap .tblwrap::before,.mod-wrap .albums::before,
.mod-wrap .gal::before,.mod-wrap .galgrid::before,
.mod-wrap .kick::after{content:none !important}
.mod-wrap .kick{display:block}
.mod-wrap .pull{text-transform:none;font-style:normal;max-width:60ch}
.mod-wrap .kpi{border:1px solid rgba(255,255,255,.13)}
.mod-wrap .meta{font-size:12.5px}
.mod-wrap .tblwrap{margin-top:16px;border:0}


/* ==========================================================================
   15b.  ALIGNMENT DETAILS AND THE LAST OF THE OFF-BRAND COLOUR
   Two things that only show up once you look at the render:

   a) A table that sits directly in a card (the EOD report, the sales import
      list) inherits the card's padding AND the cell's own 16px padding, so its
      first column started 30px right of the card's heading. Zeroing the outer
      edge of the outer cells lines the table up with everything above it.

   b) The templates hard-code four colours that are not in the brand: a green
      #48a868 and #63d18a for "agrees" / "both filled", an off-brand orange
      #ff8a42, and a pink #f0b5ae for warnings. They are inline styles, so only
      an !important attribute selector reaches them. Semantic rule applied:
      green (something is good) becomes WHITE, the off-brand orange and the
      pink (something needs attention) become the single brand orange.
   ========================================================================== */
.card>table th:first-child,.card>table td:first-child,
.card>.scroll table th:first-child,.card>.scroll table td:first-child,
.panel>table th:first-child,.panel>table td:first-child,
.panel>.scroll table th:first-child,.panel>.scroll table td:first-child,
.formcard>table th:first-child,.formcard>table td:first-child{
  padding-left:0;
}
.card>table th:last-child,.card>table td:last-child,
.card>.scroll table th:last-child,.card>.scroll table td:last-child,
.panel>table th:last-child,.panel>table td:last-child,
.panel>.scroll table th:last-child,.panel>.scroll table td:last-child,
.formcard>table th:last-child,.formcard>table td:last-child{
  padding-right:0;
}

/* a chip that carries its own tint inline - the reference has no tinted panels */
.chip[style]{background:transparent !important;
  border-color:rgba(255,255,255,.16) !important;color:var(--g-faint) !important}

/* the last off-brand hexes in the templates */
[style*="48a868"]{color:#fff !important;border-left-color:#fff !important;
  background-color:transparent !important}
[style*="63d18a"]{color:#fff !important;background-color:transparent !important}
[style*="ff8a42"]{color:var(--g-accent) !important}
[style*="f0b5ae"]{color:var(--g-accent) !important}
/* the warm-white rgba the old sheet used in inline styles -> the brand grey */
[style*="244,239,233,.14"]{border-color:rgba(255,255,255,.14) !important;
  background-color:transparent !important}
[style*="244,239,233,.08"]{background-color:rgba(255,255,255,.07) !important}
[style*="244,239,233,.06"]{background-color:rgba(255,255,255,.05) !important}


/* ==========================================================================
   15c.  THE TOKENS SWEEP
   shell.css and style.css hard-code the old warm white rgba(244,239,233,...) in
   about forty COMPOUND selectors - .dt td, .fgrid input, .kpi, .toolbar and so
   on. A compound selector outranks this layer's plain element/class rules, so
   wherever this layer restated only part of a shorthand the rest of the old
   value survived and was still being painted. That is not visible by eye (a
   warm white hairline against a white one) but it is measurable, and the pages
   with a form on them were carrying it.

   Every one of them is restated here at equal or higher specificity with the
   brand value. Hover states are included: they are not visible in a static
   render, and they were the last place the old palette could still appear.
   ========================================================================== */
/* shorthands that this layer had only partly overridden - reset, then re-apply */
.kpi{border:0;border-right:1px solid var(--g-hair);
  border-bottom:1px solid var(--g-hair2)}
.toolbar{border:0;border-top:1px solid var(--g-hair);
  border-bottom:1px solid var(--g-hair)}
.panel{border:0;border-right:1px solid var(--g-hair);
  border-bottom:1px solid var(--g-hair)}
.builder select.pick{border:1px solid var(--g-hair)}
.builder input.tiny{border:1px solid var(--g-hair)}

/* the table cells: .dt td / .dt th / .builder td are compound and outranked
   this layer's plain td/th rules */
.dt td,.dt th{border-bottom-color:var(--g-hair)}
.dt th{border-bottom-color:var(--g-hair2)}
.dt tr:last-child td{border-bottom:0}
.dt td{background:transparent}
.tblwrap td,.tblwrap th{border-bottom-color:var(--g-hair2)}
.tblwrap td{border-bottom-color:rgba(255,255,255,.06)}
.tblwrap tr:last-child td{border-bottom:0}
.builder th,.builder td{border-bottom-color:rgba(255,255,255,.055)}
.builder thead th{border-bottom-color:var(--g-hair2)}
table.roster td.band{border-right-color:var(--g-hair)}
table.roster tr.targetrow td{border-top-color:var(--g-hair2)}

/* the grouped form: .fgrid input is (0,1,1) and beat this layer's plain input */
.fgrid input,.fgrid select,.fgrid textarea{
  border:1px solid var(--g-hair);background:transparent;color:var(--g-ink);
  border-radius:0;
}
.fgrid input:hover,.fgrid select:hover,.fgrid textarea:hover{
  border-color:var(--g-hair2)}
.fgrid input:focus,.fgrid select:focus,.fgrid textarea:focus{
  outline:1px solid var(--g-accent);outline-offset:0;border-color:var(--g-accent);
  background:transparent}
.fgrid input::placeholder,.fgrid textarea::placeholder{
  color:var(--g-placeholder)}

/* hover states that still carried the old warm white */
.views summary:hover,.navdrop summary:hover{border-color:var(--g-hair2)}
.views[open] summary,.navdrop[open] summary{border-color:var(--g-accent)}
.seg a:hover,.seg a.on:hover{background:transparent}
.seg a.on:hover{background:#fff;color:#000}
.iconbtn:hover{border-color:var(--g-hair2)}
.builder select.pick:hover{border-color:var(--g-hair2)}
.btn.ghost:hover,.btn.ghost.ok:hover{border-color:var(--g-ink)}
.album:hover{border-color:var(--g-hair)}
.galtile:hover{border-color:var(--g-hair)}


/* ==========================================================================
   16.  MOBILE  -  last in the file, so it beats everything above it
   Kept from the previous layer: the page never scrolls sideways, wide tables
   stay inside their own swipeable box, touch targets stay 40px, and inputs
   stay at 16px so iOS does not zoom on focus.
   ========================================================================== */
@media (max-width:1180px){
  .headrow{gap:26px}
  .kpis{min-width:min(540px,100%)}
}
@media (max-width:1080px){
  .widgets{grid-template-columns:1fr 1fr}
}
@media (max-width:780px){
  html,body{overflow-x:hidden !important;max-width:100% !important}
  .shell{border-left:0;border-right:0;margin:0}
  .shell .wrap{padding:0 14px 0}

  .topbar{min-height:54px;padding:0 12px 0 14px}
  .topbar .brand{margin-right:0;letter-spacing:.26em;font-size:11px}
  .navdrop summary{padding:0 12px;letter-spacing:.20em}
  .views summary{padding-left:12px}
  .views .menu{min-width:0;width:min(86vw,300px)}
  .navdrop .menu{left:0;min-width:0;width:min(90vw,340px);
    grid-template-columns:1fr}

  .headrow{padding:26px 0 0;gap:24px}
  h1{font-size:clamp(26px,7.6vw,38px) !important}
  h2,h3{font-size:19px}
  h3{margin-top:30px}
  .headrow h1{max-width:none}
  .headrow .sub{font-size:12px}

  .kpis{grid-template-columns:1fr !important;min-width:100% !important}

  .figs,.cards,.albums,.gal,.galgrid,.builder,.dt,.tblwrap{
    margin-left:0;margin-right:0;
  }
  .tblwrap table{min-width:560px}
  .dt table,table.roster{min-width:620px}
  .builder table{min-width:900px}

  .widgets{grid-template-columns:1fr}
  .bignums{flex-direction:column;gap:16px}
  .bignums .n{font-size:22px}
  .formcard{padding:18px 15px}
  .fgrid{grid-template-columns:1fr;gap:18px}
  .empty{padding:22px 18px}
  .empty::before{top:18px;right:18px}
  .logingate{margin:34px auto 0;padding:26px 20px}
  .person{padding:18px}
  .igcard{padding:18px 16px}
  .menuwrap{gap:0}
  .toolbar{padding:12px 0;gap:8px}
  .toolbar .search{gap:8px}
  .btn,.btn.ghost,.btn.mini{min-height:40px}
  .btn.mini,.btn.ghost.mini{min-height:38px}
  input,select,textarea{font-size:16px !important}
  .mod-wrap h1{font-size:27px !important}
}
@media (max-width:560px){
  .topbar .brand{display:none}
  .views .whoami{display:none}
  .views summary{padding-left:12px}
  .iconbtn{width:40px;height:40px;margin-right:10px}
  .kpi .num{font-size:clamp(22px,7.2vw,32px)}
  .fig .v{font-size:18px}
  .pull{font-size:17px}
  .albums{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .gal,.galgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .gal img{height:132px}
  table.roster{min-width:560px}
}
/* At two figure columns on a small phone a full money figure ("RM 1,267,155.60")
   had nowhere to go and broke after the RM. One cell per row, same as the KPI
   row above it, and the figure stays whole. */
@media (max-width:480px){
  .figs{grid-template-columns:1fr !important}
  .fig .v{font-size:20px}
  .albums,.gal,.galgrid{grid-template-columns:1fr}
  .gal img{height:auto;aspect-ratio:4/3}
}


/* ---------- the top bar mark is the way home ---------------------------- */
.brandlink{display:contents;cursor:pointer}
.brandlink .brand{transition:color .25s ease}
.brandlink:hover .brand{color:var(--g-accent)}
.brandlink:focus-visible{outline:none}
.brandlink:focus-visible .brand{outline:1px solid var(--g-accent);outline-offset:4px}

/* ---------- the mark and the wordmark sit as one unit --------------------
   Measured: the bar's own children were already centred on the same line
   (img 30, brand 30, nav 30 in a 60px bar). The only thing reading loose was
   the 13px between the disc and the name, so that closes to 7px. */
.topbar{align-items:center}
.topbar img,.topbar .lp-disc{width:26px;height:26px;display:block;
  margin:0 7px 0 0;vertical-align:middle}
.topbar .brand{margin:0;line-height:1}   /* box = the caps, so the wordmark
   centres on the same line as the disc instead of sitting low in a tall box */


/* ---------- top bar, restored to its shipped geometry --------------------
   Three attempts at re-spacing this bar each measured neutral or worse in a
   real render, so it goes back to what it was: stretched children, a 13px gap
   between the mark and the name, the wordmark's original line height. */
.topbar{align-items:stretch}
.topbar img,.topbar .lp-disc{width:26px;height:26px;margin:0 13px 0 0;
  display:inline-block}
.topbar .brand{margin:0;line-height:normal}


/* ---------- the date field lines up like every other field ---------------
   A native date input renders its value hard against the right of the box, so
   it read as the one field on the form that was not left aligned. -webkit-
   datetime-edit is what actually holds the text. */
input[type=date],input[type=datetime-local]{
  text-align:left;padding-left:12px}   /* 12px, same as every other field */
input[type=date]::-webkit-datetime-edit,
input[type=datetime-local]::-webkit-datetime-edit{
  text-align:left;padding:0}
input[type=date]::-webkit-calendar-picker-indicator{margin-left:auto}


/* ---------- the mark, the name and the menu on one line ------------------
   Splitting the difference on the two causes at once, because the render
   showed both: with align-items:stretch the text boxes stretch to the bar's
   full height and the letters hang low on the baseline; and with a normal
   line-height the text box is far taller than the caps, so centring the box
   does not centre the letters. So: centre the items, hug the caps, and keep
   the cell rules full height by stretching only the nav cells. */
.topbar{align-items:center}
.topbar img,.topbar .lp-disc{width:26px;height:26px;display:block;
  margin:0 13px 0 0}
.topbar .brand{line-height:1;margin:0;display:block}
.topbar .navdrop,.topbar .views{align-self:stretch;display:flex;
  align-items:center}
.topbar .navdrop>summary,.topbar .views>summary{align-items:center;
  line-height:1;height:100%;display:flex}


/* ---------- staff: rows that open, and an add row at the bottom ------------ */
.stafftbl .ed{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.stafftbl .nm{cursor:pointer;border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease}
.stafftbl .nm:hover{color:var(--g-accent);border-bottom-color:var(--g-accent)}
.stafftbl tr:has(.ed:focus-visible) .nm{outline:1px solid var(--g-accent);
  outline-offset:3px}
tr.editrow{display:none}
.stafftbl tr:has(.ed:checked)+tr.editrow{display:table-row}
tr.editrow>td{background:rgba(255,255,255,.025);border-top:1px solid var(--g-hair2)}
.editf{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 18px;
  padding:8px 2px 12px}
.editf label{display:flex;flex-direction:column;gap:6px;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--g-label)}
.editf input{font-size:12.5px}
.editf .go{grid-column:1/-1;display:flex;align-items:center;gap:16px}
.editnote{font-size:10px;color:var(--g-faint)}

/* the add row reads as a table row, not a form: inputs sit on a hairline rule */
.addrow>td{border-top:1px solid var(--g-hair2);padding-top:12px;padding-bottom:12px}
.addrow input{border:0;border-bottom:1px solid var(--g-hair);background:transparent;
  width:100%;font-size:12px;padding:5px 0}
.addrow input:focus{border-bottom-color:var(--g-accent);outline:none}
.addrow input::placeholder{color:var(--g-placeholder)}
.tblwrap .actf{display:inline}   /* only the row buttons, never the edit form */
.tblwrap .btn.act{padding:6px 11px;font-size:9px;letter-spacing:.14em}
.tblwrap .btn.add{padding:7px 12px;font-size:9px;letter-spacing:.14em;
  display:inline-flex;align-items:center;gap:7px}
@media (max-width:860px){.editf{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.editf{grid-template-columns:1fr}}


/* ---------- a closed-by-default fold, for anything that is reference ------- */
.fold{margin-top:22px;border:1px solid var(--g-hair)}
.fold>summary{cursor:pointer;list-style:none;padding:15px 18px;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--g-ink);display:flex;align-items:center;gap:12px}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::marker{content:none}
.fold>summary::before{content:"+";color:var(--g-accent);font-size:13px;
  width:11px;flex:none;transition:transform .3s ease}
.fold[open]>summary::before{content:"\2212"}
.fold>summary:hover{background:rgba(255,255,255,.03)}
.fold>summary:focus-visible{outline:1px solid var(--g-accent);outline-offset:-1px}
.fold>p,.fold>div{margin:0;padding:4px 18px 18px;font-size:12.5px;
  color:var(--g-mute);line-height:1.7}


/* ---------- sortable column headings ------------------------------------- */
.sh{color:inherit;text-decoration:none;letter-spacing:inherit;
  display:inline-flex;align-items:center;gap:6px;
  transition:color .2s ease}
.sh:hover{color:var(--g-accent)}
.sh.on{color:var(--g-accent)}
.sh .ar{font-size:8px;line-height:1}


/* ---------- the monthly payroll sheet ------------------------------------ */
.psbar{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:flex-end;
  margin:22px 0 6px}
.psseed{display:flex;align-items:flex-end;gap:12px}
.psseed label{display:flex;flex-direction:column;gap:7px;font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--g-label)}
.psseed input{font-size:12.5px;width:150px}
.psmonths{display:flex;flex-wrap:wrap;gap:8px}
.mchip{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  padding:7px 11px;border:1px solid var(--g-hair);color:var(--g-mute);
  text-decoration:none;transition:color .2s ease,border-color .2s ease}
.mchip:hover{color:var(--g-ink);border-color:var(--g-hair2)}
.mchip.on{color:var(--g-accent);border-color:var(--g-accent)}
.paytbl .hin{width:92px;text-align:right;padding:6px 8px;font-size:12.5px}
.paytbl .act{padding:6px 11px;font-size:9px;letter-spacing:.14em}
.ptag{display:inline-block;margin-left:8px;font-size:8px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--g-accent);border:1px solid var(--g-hair);
  padding:2px 5px;vertical-align:1px}
tr.ptot>td{border-top:1px solid var(--g-hair2);font-size:11px;
  letter-spacing:.10em;text-transform:uppercase;padding-top:13px}
tr.pbud>td{border-top:0;color:var(--g-mute);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase}
tr.pgrp>td{border-top:1px solid var(--g-hair2);padding-top:15px;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--g-accent)}
tr.pgrpsub>td{border-top:1px solid var(--g-hair);padding-bottom:11px;
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--g-mute)}

.pstop{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:18px 0 4px}
.pstop .btn{text-decoration:none}
.psnote{font-size:11px;color:var(--g-faint);max-width:58ch;line-height:1.6}

/* the month sheet is the shop's own payroll format: wide, so it scrolls */
.pswide{overflow-x:auto}
.paytbl .hin{width:78px;text-align:right;padding:6px 7px;font-size:12px}
.paytbl .hsel{font-size:11px;padding:5px 4px}
.psrate{color:var(--g-faint);white-space:nowrap}
.pshint{font-size:11px;color:var(--g-faint);margin:4px 0 12px;max-width:74ch;line-height:1.6}
.paytbl th{white-space:nowrap}
.paytbl td.k{white-space:nowrap}

/* ---------- the payroll sheet: text until you press a name ---------------- */
.paytbl .ed{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.paytbl .nm{cursor:pointer;border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease}
.paytbl .nm:hover{color:var(--g-accent);border-bottom-color:var(--g-accent)}
.paytbl tr:has(.ed:focus-visible) .nm{outline:1px solid var(--g-accent);
  outline-offset:3px}
tr.pedit{display:none}
.paytbl tr:has(.ed:checked)+tr.pedit{display:table-row}
tr.pedit>td{background:rgba(255,255,255,.025);border-top:1px solid var(--g-hair2);
  padding:14px 12px 16px}
.peditf,.editf{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 18px}
.peditf label{display:flex;flex-direction:column;gap:6px;font-size:9px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--g-label)}
.peditf input,.peditf select{font-size:12.5px}
.peditf .go{grid-column:1/-1;display:flex;align-items:center;gap:16px}
.psm{font-size:9.5px;letter-spacing:.10em;text-transform:uppercase;
  color:var(--g-faint)}
.paytbl .n{white-space:nowrap}
@media (max-width:900px){.peditf{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.peditf{grid-template-columns:1fr}}


/* ==========================================================================
   LEAVE CALENDAR - a month grid, hairline cells like every other table.
   Seven columns, Monday first (the roster's week starts Monday too). Approved
   days are white (the affirmative colour); requested days are the one orange
   (they need attention); a day outside the month is faint. Nothing here adds a
   colour to the palette - white, grey and #FF6B00 only.
   ========================================================================== */
table.calgrid{width:100%;border-collapse:collapse;min-width:640px}
table.calgrid th{
  font-size:9px;letter-spacing:.20em;text-transform:uppercase;
  color:var(--g-faint);font-weight:400;text-align:left;
  padding:11px var(--g-cell);border-bottom:1px solid var(--g-hair2)}
table.calgrid td{
  border-bottom:1px solid var(--g-hair);border-right:1px solid var(--g-hair);
  vertical-align:top;padding:9px 10px;height:88px;width:14.28%;
  color:var(--g-grey)}
table.calgrid td:last-child{border-right:0}
table.calgrid td.out{color:var(--g-faint);opacity:.5}
table.calgrid td.on{background:rgba(255,107,0,.055)}
table.calgrid .dnum{
  font-size:12px;color:var(--g-grey);font-variant-numeric:tabular-nums}
table.calgrid td.on .dnum{color:var(--g-accent)}
table.calgrid .todaymk{
  font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:var(--g-accent)}
table.calgrid .dlink{
  display:inline-block;margin-top:3px;font-size:8.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--g-faint)}
table.calgrid .dlink:hover{color:var(--g-ink)}
table.calgrid .pchip{display:block;margin:4px 0 0}
.pchip.st-requested{border-color:rgba(255,107,0,.55);color:var(--g-accent)}

/* ---------- staff edit panel: the four labelled blocks --------------------
   The panel uses fieldset/legend, which browsers give their own odd defaults -
   min-inline-size:min-content stops fields shrinking, so inputs overflow their
   box and the labels end up sitting on the borders. Reset that, pull the legend
   inside with a float, and stack each field properly. */
.editf fieldset{min-inline-size:0;border:1px solid var(--g-hair2);padding:16px 14px 12px;
  margin:0;background:transparent}
.editf fieldset legend{float:left;width:100%;padding:0 0 12px;margin:0;
  font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--g-accent)}
.editf fieldset label{display:flex;flex-direction:column;gap:6px;margin:0 0 12px;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--g-label)}
.editf fieldset label input,.editf fieldset label select{width:100%;font-size:12.5px}
.editf fieldset label:last-child{margin-bottom:0}
/* the access ticks: box then label, on one line, brand orange when ticked */
.editf .tick{flex-direction:row;align-items:center;gap:9px;margin:0 0 9px;
  font-size:10.5px;letter-spacing:.08em;text-transform:none;color:var(--g-label)}
.editf .tick input{width:auto;margin:0;accent-color:var(--g-accent)}
.editf .tick:last-of-type{margin-bottom:14px}
.editf .pinstate{font-size:11px;color:var(--g-faint);margin:0 0 10px}
.editf .pinchange summary{cursor:pointer;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--g-accent)}
.editf .pinchange[open] summary{margin-bottom:12px}
.editf .editnote{display:block;font-size:10px;line-height:1.6;color:var(--g-faint);
  margin-top:8px;max-width:46ch}
.editf .go{grid-column:1/-1;display:flex;align-items:center;gap:16px;margin-top:4px}


/* ==========================================================================
   20.  MANAGEMENT OVERVIEW  -  one calm analytics screen  (scoped to .ovw)
   The overview was rebuilt against the StoreHub reference: a range, four
   figures, one chart, one breakdown, one ranked list. Every rule below is
   prefixed .ovw, so none of it can reach another page. Tokens only - no new
   colour is introduced; the single accent is still #FF6B00 (.--g-accent).

   The chart is hand-built inline SVG (there is no chart library and no JS in
   this app). Its viewBox is stretched to the panel width with
   preserveAspectRatio="none", so the geometry carries NO text: the axis labels
   are HTML below it and keep one fixed size on a 390px phone and on a desktop.
   vector-effect:non-scaling-stroke keeps the line weight constant as it scales.
   ========================================================================== */
.ovw .ovw-chart{display:block;width:100%;height:132px}
.ovw .ovw-chart .axb{stroke:var(--g-hair)}
.ovw .ovw-chart .ar{fill:rgba(255,107,0,.10);stroke:none}
.ovw .ovw-chart .ln{fill:none;stroke:var(--g-accent);stroke-width:1.6;
  stroke-linejoin:round;stroke-linecap:round}
.ovw .ovw-chart .tk{stroke:var(--g-accent);stroke-width:1.4;opacity:.75}
.ovw .ovw-chart .bar{fill:rgba(255,107,0,.80)}
.ovw .ovw-axis{display:flex;justify-content:space-between;gap:10px;margin-top:9px;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--g-faint);font-variant-numeric:tabular-nums}

.ovw .ovw-mixrow{margin:0 0 15px}
.ovw .ovw-mixrow:last-of-type{margin-bottom:0}
.ovw .ovw-mixlbl{display:flex;justify-content:space-between;gap:12px;
  font-size:11.5px;color:var(--g-grey)}
.ovw .ovw-mixlbl span:last-child{color:var(--g-ink);font-variant-numeric:tabular-nums}
.ovw .ovw-track{height:5px;background:rgba(255,255,255,.07);margin-top:7px}
.ovw .ovw-track i{display:block;height:5px;background:var(--g-accent)}
.ovw .ovw-mixrow:nth-child(n+2) .ovw-track i{background:rgba(255,107,0,.45)}
.ovw .ovw-mixsub{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--g-faint);margin-top:6px;font-variant-numeric:tabular-nums}

.ovw .ovw-rank{list-style:none;margin:0;padding:0}
.ovw .ovw-rank li{display:flex;align-items:baseline;gap:14px;padding:11px 0;
  border-bottom:1px solid var(--g-hair)}
.ovw .ovw-rank li:last-child{border-bottom:0}
.ovw .ovw-rank .r{width:20px;flex:none;font-size:9.5px;letter-spacing:.14em;
  color:var(--g-ghost);font-variant-numeric:tabular-nums}
.ovw .ovw-rank .d{flex:1;min-width:0;font-size:12.5px;color:var(--g-mute)}
.ovw .ovw-rank li:first-child .d{color:var(--g-ink)}
.ovw .ovw-rank .v{font-family:'SGL',system-ui;font-size:14px;color:var(--g-ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}

@media (max-width:560px){
  .ovw .ovw-chart{height:112px}
}

/* ---------- the staff toolbar on a phone ---------------------------------
   It is one flex row: the date line, a status chip, a spacer and two buttons.
   On a narrow screen nothing wrapped, so the date was crushed to one word per
   line and the chip landed on top of it. Stack it: date full width, chip under
   it, then the buttons side by side and equal. */
.toolbar{flex-wrap:wrap;row-gap:12px}
@media (max-width:760px){
  .toolbar .search{flex:1 1 100%;min-width:0}
  .toolbar .search .meta{display:block;white-space:normal;line-height:1.7}
  .toolbar .chip{flex:0 0 auto;align-self:flex-start}
  .toolbar .spacer{display:none}
  .toolbar .btn{flex:1 1 0;text-align:center;justify-content:center}
}
@media (max-width:430px){
  .toolbar .btn{flex:1 1 100%}
}