html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
/* ============ Procare HR branding (procarehr.com palette) ============ */
:root {
  --piq-blue: #1b76bc;
  --piq-navy: #0b3c62;  /* Brand Navy (Brand Guide V2): bands, headings, chrome */
  --piq-ink: #0f283f;   /* body-text ink (Brand Guide V2) */
  --piq-gold: #ffcb3f;
  --piq-cream: #f2f0eb;
  --piq-blue-dark: #145a91;
}
body { font-family: 'Poppins', system-ui, -apple-system, sans-serif; color: var(--piq-ink); }
/* #475 (Emily 09/28): no serif anywhere in IQ. .piq-serif is a legacy class name kept on the views;
   it now means the heading face, which is Poppins. SerifFreeWebStandardTests keeps it that way. */
h1, h2, h3, .piq-serif { font-family: 'Poppins', sans-serif; }

.piq-navbar { background: #fff; }
.piq-navbar .nav-link { color: var(--piq-navy); font-weight: 500; }
.piq-navbar .nav-link:hover { color: var(--piq-blue); }
/* The "IQ" wordmark beside the Procare logo is the BRAND, not app text: it keeps DM Serif Text
   (Emily 09/29 on #475 — the no-serif ruling covers the app's data, headings and tiles, not the logo).
   The only serif in the web app; SerifFreeWebStandardTests allows exactly this rule. */
.piq-brand-suffix {
  font-family: 'DM Serif Text', Georgia, serif; font-size: 1.5rem; line-height: 1;
  color: var(--piq-blue); border-left: 2px solid var(--piq-gold); padding-left: .5rem;
}
.piq-footer {
  background: var(--piq-navy); color: rgba(255,255,255,.75);
  font-size: .85rem; position: absolute; bottom: 0; width: 100%; white-space: normal; line-height: 1.6;
}
.piq-footer a { color: var(--piq-gold); text-decoration: none; }

.piq-btn-primary {
  background: var(--piq-blue); border: none; color: #fff; font-weight: 600;
  padding-left: 1.6rem; padding-right: 1.6rem;
}
.piq-btn-primary:hover { background: var(--piq-blue-dark); color: #fff; }
.piq-btn-outline { border: 2px solid var(--piq-blue); color: var(--piq-blue); font-weight: 600; }
.piq-btn-outline:hover { background: var(--piq-blue); color: #fff; }

/* ---- landing hero ---- */
.piq-hero {
  background: linear-gradient(135deg, var(--piq-navy) 0%, #14385c 60%, var(--piq-blue) 140%);
  color: #fff; margin-top: -1rem;
}
.piq-eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .75rem; color: var(--piq-gold); font-weight: 600; }
.piq-hero-title { font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1.15; }
.piq-gold { color: var(--piq-gold); }
.piq-hero-sub { font-size: 1.05rem; color: rgba(255,255,255,.85); max-width: 560px; margin: 1.25rem 0 1.75rem; font-weight: 300; }
.piq-hero-note { font-size: .85rem; color: rgba(255,255,255,.7); }

.piq-hero-card {
  background: #fff; border-radius: 14px; padding: 1.1rem 1.25rem 1rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.35); color: var(--piq-navy);
}
.piq-hero-card-header { display: flex; gap: 6px; margin-bottom: .9rem; }
.piq-hero-card-header span { width: 10px; height: 10px; border-radius: 50%; background: #e3e8ee; }
.piq-hero-card-header span:first-child { background: var(--piq-gold); }
.piq-kpi-row { display: flex; gap: .75rem; margin-bottom: 1rem; }
.piq-kpi { flex: 1; background: var(--piq-cream); border-radius: 8px; padding: .55rem .7rem; }
.piq-kpi-label { font-size: .58rem; letter-spacing: .06em; color: #6b7a89; font-weight: 600; }
.piq-kpi-value { font-size: 1.35rem; font-weight: 700; font-family: 'Poppins'; }
.piq-kpi-unit { font-size: .8rem; }
.piq-kpi-delta { font-size: .62rem; font-weight: 600; }
.piq-kpi-delta.good { color: #127a3d; }
.piq-kpi-delta.bad { color: #b42318; }
.piq-chart { display: flex; align-items: flex-end; gap: 7px; height: 90px; padding: 0 .25rem; }
.piq-bar { flex: 1; background: linear-gradient(180deg, var(--piq-blue), var(--piq-blue-dark)); border-radius: 3px 3px 0 0; }
.piq-bar:nth-child(2n) { background: linear-gradient(180deg, #8fc1e8, #6faedd); }
.piq-chart-caption { text-align: center; font-size: .68rem; color: #6b7a89; margin-top: .5rem; }

.piq-feature { text-align: center; padding: 1rem .75rem; }
.piq-feature-icon { font-size: 2rem; margin-bottom: .5rem; }
.piq-feature h5 { font-family: 'Poppins'; font-weight: 600; color: var(--piq-navy); }
.piq-feature p { font-size: .9rem; color: #5c6b7a; }

.piq-band { background: var(--piq-cream); }
.piq-stat { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 2.2rem; color: var(--piq-blue); }
.piq-stat-label { font-size: .85rem; color: #5c6b7a; }

/* sign-in card inside the marketing hero */
.piq-signin-card { padding: 1.75rem 1.75rem 1.25rem; max-width: 430px; margin-left: auto; }
.piq-signin-card .form-control { padding: .65rem .8rem; }
.piq-signin-card .form-control:focus { border-color: var(--piq-blue); box-shadow: 0 0 0 .2rem rgba(27,118,188,.15); }

/* ---- branded auth pages ---- */
.piq-auth-wrap { max-width: 430px; margin: 2.5rem auto; }
.piq-auth-card {
  background: #fff; border: 1px solid #e5e9ef; border-radius: 14px;
  padding: 2rem 2rem 1.5rem; box-shadow: 0 12px 40px rgba(15,40,63,.08);
}
.piq-auth-card .form-control { padding: .65rem .8rem; }
.piq-auth-card .form-control:focus { border-color: var(--piq-blue); box-shadow: 0 0 0 .2rem rgba(27,118,188,.15); }
.piq-auth-logo { display: block; margin: 0 auto 1rem; height: 44px; }
.piq-auth-title { text-align: center; color: var(--piq-navy); margin-bottom: .25rem; }
.piq-auth-sub { text-align: center; font-size: .85rem; color: #6b7a89; margin-bottom: 1.5rem; }

/* ---- location/company tab strip (John 08/01, Zoho-style) ----
   Desktop: tabs wrap to additional lines when many are selected.
   Phones: one scrollable row (standard mobile tab pattern) + swipe on the dashboard body. */
.iq-tab-strip { flex-wrap: wrap; row-gap: 2px; }
.iq-tab-strip .nav-link { cursor: pointer; color: #45566a; }
.iq-tab-strip .nav-link.active { font-weight: 600; }
@media (max-width: 767.98px) {
  .iq-tab-strip { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .iq-tab-strip::-webkit-scrollbar { display: none; }
  .iq-tab-strip .nav-link { white-space: nowrap; }
}

/* John 08/01 bug: Bootstrap .sticky-top is z-index 1020, which paints sticky TABLE
   HEADERS over the nav dropdown menus (z-index 1000). Inside a scroll container the
   header only needs to clear the table body, so pin it far below the dropdowns. */
.table-responsive .sticky-top { z-index: 5; }

/* Zoho pages' sticky table headers sit directly on the page (no .table-responsive
   wrapper) and were painting over the Zoho nav dropdown again (John 08/02).
   Any sticky thead only needs to clear its own table body — never the nav (z-1000). */
thead.sticky-top { z-index: 5; }

/* ---- Zoho-design daily dashboard: date strip + grouped KPI rail (John 08/03) ---- */
.iq-date-strip .iq-date-chip {
  border: 1px solid #d6dde4; border-radius: 6px; padding: .35rem .9rem;
  font-weight: 700; font-size: .9rem; color: var(--piq-navy); background: #fff;
}
.iq-date-strip .iq-date-chip-primary { background: var(--piq-blue); color: #fff; border-color: var(--piq-blue); }
/* #475 (Emily 09/28): the Weekly Snapshot's coach, a quiet line at the strip's right (#343 note A's navy band is gone) */
.iq-date-strip .iq-date-strip-coach b { color: var(--piq-navy); font-weight: 600; }
@media (max-width: 575.98px) { .iq-date-strip .iq-date-strip-coach { margin-left: 0 !important; } }
/* #1524 (John 10/21): a payload's header.hero opens the page with the client home's navy band (dashboard-core.js
   dashHeader), set inside the page's container: rounded, padded, and without .piq-hero's full-width pull-up */
.piq-hero.iq-dash-hero { margin-top: 0; border-radius: 12px; padding: 1.75rem 2rem 1.6rem; }
.iq-dash-hero .iq-dash-hero-title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); color: #fff; }
.iq-dash-hero .iq-dash-hero-sub { margin: .6rem 0 0; max-width: 720px; }
@media (max-width: 575.98px) { .piq-hero.iq-dash-hero { padding: 1.25rem 1rem 1.1rem; } }
/* ==== #483 (Emily 09/28): THE tile and the section head — one look for the Daily rail, the Weekly Snapshot
   and Payroll Pulse. Spec: docs/specs/2026-09-28-weekly-snapshot-daily-format/ (tile-language-mockup.dc.html,
   weekly-snapshot-daily-format-mockup.dc.html). Replaces #343's tinted tiles, serif-sized numbers and italic
   taglines. A section head is Poppins 600 over a hairline, as the Daily rail's. A tile is a white card with a
   navy number — no fills, no coloured numbers — and ONE line carries its signal (dashboard-core.js kpiTile):
   a verdict pill naming your target (red / amber / green); else the delta in the trend colour (red / green
   only); else grey detail. Everything for #483 lives in this block. ==== */
:root {
  --iq-good: #127a3d; --iq-good-bg: #dff3e6;
  --iq-bad: #b42318;  --iq-bad-bg: #fbe3e1;
  --iq-watch: #b45309; --iq-watch-bg: #fff7e6;
}
.iq-kpi-group { min-width: 0; }
.iq-kpi-group-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .2rem .75rem;
  border-bottom: 1px solid var(--iq-border, #e5e9ef); padding-bottom: .375rem; margin-bottom: .875rem;
}
.iq-kpi-group-title { margin: 0; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.0625rem; line-height: 1.25; color: var(--piq-navy); }
.iq-kpi-group-note { margin-left: auto; font-size: .8rem; color: var(--iq-slate, #64748b); }
.iq-kpi-tiles { display: grid; gap: .75rem; }
.iq-kpi-tiles-1 { grid-template-columns: minmax(0, 1fr); }
.iq-kpi-tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.iq-kpi-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.iq-kpi-tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.iq-kpi-tiles-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.iq-kpi-tiles-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .iq-kpi-tiles-4, .iq-kpi-tiles-5, .iq-kpi-tiles-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .iq-kpi-tiles-3, .iq-kpi-tiles-4, .iq-kpi-tiles-5, .iq-kpi-tiles-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 430px) { .iq-kpi-tiles-2, .iq-kpi-tiles-3, .iq-kpi-tiles-4, .iq-kpi-tiles-5, .iq-kpi-tiles-6 { grid-template-columns: minmax(0, 1fr); } }
/* #616: uneven tile rows (7 at 4 across: 4 + 3) stack one grid per row, so the short row's tiles widen */
.iq-kpi-tile-rows { display: flex; flex-direction: column; gap: .75rem; }
/* the card: white, a hairline border, the number navy whatever the verdict */
.iq-kpi-tile {
  display: flex; flex-direction: column; gap: .25rem; min-width: 0; text-align: left;
  background: #fff; border: 1px solid var(--iq-border, #e5e9ef); border-radius: 10px; padding: .875rem 1rem .75rem;
  container-type: inline-size;   /* #1726: the number below sizes itself to the tile's width */
}
.iq-kpi-card > .iq-kpi-tile { height: 100%; }
.iq-kpi-tile.iq-drillable { cursor: pointer; }
.iq-kpi-tile.iq-drillable:hover { border-color: #bfd3e6; box-shadow: 0 4px 14px rgba(11,60,98,.08); }
/* a table number that opens the rows behind it (#617): reads as a link on hover and on keyboard focus */
td.iq-cell-drill:hover { text-decoration: underline; color: var(--piq-navy); }
td.iq-cell-drill:focus-visible { outline: 2px solid var(--piq-navy); outline-offset: -2px; }
.iq-kpi-tile-label { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--iq-slate, #64748b); font-weight: 600; line-height: 1.3; }
.iq-kpi-tile-label .iq-info { color: #9aa8b8; font-weight: 400; letter-spacing: 0; text-transform: none; cursor: help; font-size: .75rem; }
.iq-kpi-tile-number { display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem; min-width: 0; }
.iq-kpi-tile-value {
  font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.625rem; line-height: 1.1;
  color: var(--piq-navy); font-variant-numeric: tabular-nums; min-width: 0; overflow-wrap: anywhere;
}
/* #1726 (Emily 10/28): the number sits on one line and never leaves its tile. It shrinks with the tile's width (13% of
   the tile, between 1rem and the full size above) instead of breaking "$8,931,439" across two lines. A rule of its own
   so the look above stays as the Weekly tests pin it. */
.iq-kpi-tile-value { font-size: clamp(1rem, 13cqw, 1.625rem); flex: 1 1 auto; white-space: nowrap; overflow-wrap: normal; overflow: hidden; text-overflow: clip; }
/* the one signal line: a pill that names the verdict and your target… */
.iq-pill {
  display: inline-block; align-self: flex-start; max-width: 100%; margin-top: .125rem; padding: .125rem .5625rem;
  border-radius: .8rem; font-size: .72rem; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere;
}
.iq-pill-needs-look { background: var(--iq-bad-bg); color: var(--iq-bad); }
.iq-pill-watch { background: var(--iq-watch-bg); color: var(--iq-watch); }
.iq-pill-on-target { background: var(--iq-good-bg); color: var(--iq-good); }
/* #1854 (John 11/11): a chart's headline, as on Emily's agency scorecard. The title with the Better / Worse / Flat pill on
   its right, then the big number with its line beside it. The pill's colours are the scorecard's chips; the PDF prints the
   same ones (DashboardPdfRenderer.HeadlineTagColors, held together by ChartHeadlineTests). */
.iq-headline-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.iq-headline-tag { flex: 0 0 auto; padding: .125rem .5rem; border-radius: .8rem; font-size: .72rem; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.iq-headline-tag-worse { background: #fbe3d3; color: #7a2e06; }
.iq-headline-tag-better { background: #ddf1e4; color: #1d6b3a; }
.iq-headline-tag-flat { background: #e7eaee; color: #33475b; }
.iq-headline-figure { display: flex; align-items: center; gap: .5rem; margin: .25rem 0 .375rem; min-width: 0; }
.iq-headline-value { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.5rem; line-height: 1.1; color: var(--piq-navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.iq-headline-sub { font-size: .78rem; line-height: 1.3; color: var(--piq-ink, #0f283f); min-width: 0; }
/* …else the delta, grey unless it has no target and moved: then red the wrong way, green the right way… */
.iq-kpi-tile-delta { font-size: .78rem; color: var(--iq-slate-dark, #45566a); font-weight: 500; line-height: 1.35; }
.iq-kpi-tile-delta.iq-trend-good { color: var(--iq-good); }
.iq-kpi-tile-delta.iq-trend-bad { color: var(--iq-bad); }
/* …else grey context: names, a breakdown, a date range */
.iq-kpi-tile-detail { font-size: .75rem; color: var(--iq-slate, #64748b); line-height: 1.35; }
/* #343 note E: a source not connected yet — a dash on a dashed grey tile, never a bold 0 */
.iq-kpi-tile.iq-kpi-tile-muted { background: var(--iq-band, #f3f5f7); border-style: dashed; }
.iq-kpi-tile-muted .iq-kpi-tile-value { color: #9aa8b8; }
/* the OT sparkline stays, in grey, beside the number */
.iq-kpi-spark { flex-shrink: 0; width: 56px; height: 22px; }
/* the Daily rail is a narrow column: the same card, sized to fit three across; its pills print the verdict alone */
.iq-kpi-rail .iq-kpi-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.iq-kpi-rail .iq-kpi-tiles-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.iq-kpi-rail .iq-kpi-tiles, .iq-kpi-rail .iq-kpi-tile-rows { gap: .5rem; }
.iq-kpi-rail .iq-kpi-group-head { margin-bottom: .55rem; }
.iq-kpi-rail .iq-kpi-tile { padding: .55rem .65rem .5rem; }
.iq-kpi-rail .iq-kpi-tile-value { font-size: clamp(.95rem, 13cqw, 1.3rem); }
/* note F / J, ruling 6: a section's own charts and lists are Daily chart cards — white, a hairline, the title in
   Poppins 600 navy, a plain-English line under it; the row-cap note and the View live link under a list */
.iq-kpi-group-panels { margin-top: 0; }
.iq-kpi-group-panels > div > .card { border: 1px solid var(--iq-border, #e5e9ef); border-radius: 12px; box-shadow: none !important; }
.iq-kpi-group-panels > div > .card > .card-body { padding: 1rem 1.125rem .75rem; }
.iq-kpi-group-panels > div > .card h6 { font-weight: 600; font-size: 1rem; color: var(--piq-navy); }
.iq-kpi-group-panels > div > .card h6 + .small.text-muted { font-size: .8125rem; color: var(--iq-slate, #64748b) !important; }
.iq-panel-cap { margin-top: .4rem; }
.iq-panel-cap a { font-weight: 600; text-decoration: none; }
/* ruling 4: "Your week in brief" — a soft grey card under the header, signed and dated on its head */
.iq-brief { background: #f8fafc; border: 1px solid var(--iq-border, #e5e9ef); border-radius: 10px; padding: .875rem 1.125rem 1rem; }
.iq-brief-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .75rem; margin-bottom: .375rem; }
.iq-brief-title { margin: 0; font-family: 'Poppins', sans-serif; font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--iq-slate, #64748b); font-weight: 600; }
/* the Coach Summary page (Views/Portal/CoachSummary.cshtml) heads each note with an h2 naming its community: it keeps its navy heading */
h2.iq-brief-title { font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--piq-navy); }
.iq-brief-source { margin-left: auto; font-size: .75rem; color: var(--iq-slate, #64748b); }
.iq-brief p { margin: 0 0 .5rem; font-size: .9rem; line-height: 1.55; color: var(--piq-ink); }
.iq-brief p:last-of-type { margin-bottom: 0; }
.iq-brief-more > summary { cursor: pointer; color: var(--piq-blue); font-weight: 600; font-size: .85rem; margin: .5rem 0; }
.iq-brief-sig { font-size: .85rem; color: var(--iq-slate-dark, #45566a); }
.iq-brief-sig b { color: var(--piq-navy); font-weight: 600; }
/* ==== end #483 ==== */

/* ---- rail layout: the KPI rail and the charts beside it end on one line (#334, Emily 09/17) ----
   Side by side (lg+), the .row stretches both columns to the taller one's natural height and
   each column fills it: the rail's groups share any spare height, the chart cards share the
   rest and their plot boxes grow. The chart itself is drawn absolutely inside its box at 100%
   height (dashboard-core.js), so it never pushes the row taller. The two heights below are
   floors for a plot, not offsets: 300px stacked (the classic chart height), 220px beside the rail. */
.iq-kpi-rail { display: flex; flex-direction: column; gap: 1rem; }
.iq-rail-charts { display: flex; flex-direction: column; gap: 1rem; }
.iq-rail-plot { position: relative; height: 300px; }
.iq-rail-plot > .iq-rail-mount { position: absolute; inset: 0; }
/* #593: two charts sharing a row beside the rail (the Both model's HPRD | This Week and Census). Stacked
   on a narrow screen; side by side from md, each growing by its declared width (set inline by the JS). */
.iq-rail-chart-row { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 768px) {
  .iq-rail-chart-row { flex-direction: row; }
  .iq-rail-chart-row > .iq-rail-chart-col { flex: 1 1 0; min-width: 0; }
}
@media (min-width: 992px) {
  .iq-rail-charts > .iq-rail-chart-row { flex: 1 1 0; }
  .iq-rail-chart-row > .iq-rail-chart-col { display: flex; flex-direction: column; }
}
@media (min-width: 992px) {
  .iq-kpi-rail > .iq-kpi-group { flex: 1 1 auto; display: flex; flex-direction: column; }
  .iq-kpi-rail .iq-kpi-tiles, .iq-kpi-rail .iq-kpi-tile-rows { flex: 1 1 auto; }
  .iq-kpi-rail .iq-kpi-tile-rows > .iq-kpi-tiles { flex: 1 1 0; }
  .iq-kpi-rail .iq-kpi-tile { display: flex; flex-direction: column; justify-content: center; }
  .iq-rail-main { display: flex; flex-direction: column; }
  .iq-rail-charts { flex: 1 1 auto; }
  .iq-rail-charts > .iq-rail-chart-col { flex: 1 1 0; display: flex; flex-direction: column; }
  .iq-rail-chart { flex: 1 1 auto; }
  .iq-rail-chart > .card-body { display: flex; flex-direction: column; }
  .iq-rail-plot { flex: 1 1 0; height: auto; min-height: 220px; }
}

/* ---- table column styles (Emily's 09/17 validation round) ----
   Data columns centre (numbers, times, dates, Yes/No); text columns stay left. A variance
   column shades under-target light blue and over-target dark blue (Zoho's reading); a
   missed break prints red where a short break stays normal. The td sets Bootstrap's
   row-state variable so the shade wins over the zebra striping. */
.iq-cell-data { text-align: center; }
.iq-cell-data { white-space: nowrap; }   /* #1726: a figure never splits over two lines */
td.iq-var-under { --bs-table-bg-state: #C9DDF0; }
td.iq-var-over { --bs-table-bg-state: #7FAEDC; color: #0B3C62; font-weight: 600; }
td.iq-missed { color: #b42318; font-weight: 600; }
/* Payroll Pulse only (John 09/19): over target red, under target green */
td.iq-var-bad { --bs-table-bg-state: #FBE3E1; color: #B42318; font-weight: 600; }
td.iq-var-good { --bs-table-bg-state: #DFF3E6; color: #0F6B3A; font-weight: 600; }
/* ungrouped KPI cards in rows of N (Payroll Pulse 5 + 5, Emily 09/19): five across, 3 + 2 when narrow */
.iq-card-row { display: grid; gap: 1rem; grid-template-columns: repeat(var(--iq-card-cols, 5), minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .iq-card-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .iq-card-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* a total row (Emily 09/18): bold, under a rule, never lost in the zebra striping */
tr.iq-total-row > td { font-weight: 700; border-top: 2px solid var(--piq-navy, #0B3C62); --bs-table-bg-type: transparent; --bs-table-accent-bg: transparent; }
/* grouped tables (#732, Emily 09/30, option B): a table that sends RowStyles prints its "group" rows
   (the Open FTE roles) on a light navy band under a rule, bold Brand Navy and a little larger; its
   other rows are lines under their group: white (the table drops table-striped), indented further,
   softer ink, a little smaller. A total row keeps the rule above. Same look in the PDF. */
table.iq-grouped-table > tbody > tr.iq-group-row > td { --bs-table-bg-state: #E6EEF6; --bs-table-color-state: #0B3C62; color: #0B3C62; font-weight: 700; font-size: 1.04em; border-top: 1px solid #B9CBDD; }
table.iq-grouped-table > tbody > tr.iq-line-row > td { --bs-table-color-state: #3D4B59; color: #3D4B59; font-size: .96em; border-top: 1px solid #EEF1F4; }
table.iq-grouped-table > tbody > tr.iq-line-row > td:first-child { padding-left: .9rem; }

/* ---- landing: new-capability band (John 08/03) ---- */
.piq-band-navy { background: var(--piq-navy); }
.piq-band-sub { color: rgba(255,255,255,.75); font-size: .95rem; }
.piq-highlight {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 1rem .9rem; height: 100%;
}
.piq-highlight-icon { font-size: 1.5rem; margin-bottom: .35rem; }
.piq-highlight h6 { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--piq-gold); margin-bottom: .3rem; }
.piq-highlight p { font-size: .82rem; color: rgba(255,255,255,.8); margin-bottom: 0; }

/* ---- portal hub cards + help strip (Emily 08/13) ---- */
.piq-hub-card { transition: box-shadow .12s ease, transform .12s ease; }
.piq-hub-card:hover { box-shadow: 0 .5rem 1rem rgba(16,42,67,.12) !important; transform: translateY(-2px); }
.piq-hub-card .card-title { color: var(--piq-navy); }
.piq-hub-help { background: var(--piq-cream); }
.piq-hub-help-list li { margin-bottom: .45rem; }
.piq-hub-help-list li:last-child { margin-bottom: 0; }

/* ---- client branding (Emily 08/13) ---- */
.piq-brand-powered { font-size: .72rem; letter-spacing: .02em; white-space: nowrap; }

/* ============ Portal theme v2 (John 08/14 mockups) ============
   White navbar with blue underline tabs; white hero bands with big navy
   headlines; light filter bands; navy accent bands/footers. Tokens below are
   shared by client pages AND the global Bootstrap overrides further down. */
:root {
  --iq-slate: #64748b;
  --iq-slate-dark: #45566a;
  --iq-bg: #f6f8fa;
  --iq-band: #f3f5f7;
  --iq-border: #e5e9ef;
  --iq-amber-bg: #fff7e6;
  --iq-amber-border: #f4c752;
  --iq-muted-bg: #f1f3f5;
}

/* ---- navbar: white, blue underline on the active tab ---- */
.piq-navbar { border-bottom: 1px solid var(--iq-border); padding-top: 0; padding-bottom: 0; }
.piq-navbar .navbar-brand { padding: .55rem 0; }
.piq-navbar .nav-link {
  color: var(--iq-slate); font-weight: 500; padding: .95rem .85rem;
  border-bottom: 3px solid transparent; border-top: 3px solid transparent;
}
.piq-navbar .nav-link:hover { color: var(--piq-navy); }
.piq-navbar .nav-link.iq-active {
  color: var(--piq-navy); font-weight: 600; border-bottom-color: var(--piq-blue);
}
/* staff-only cluster: divider + tinted zone + micro-label. Clients never see
   these items (role-gated); the marker tells STAFF what clients can't see. */
.piq-nav-staff {
  display: flex; align-items: center; gap: .1rem;
  background: #eef2f6; border-radius: 8px; margin-left: .9rem; padding: 0 .5rem 0 .75rem;
  position: relative;
}
.piq-nav-staff::before {
  content: ""; position: absolute; left: -.55rem; top: 22%; height: 56%;
  border-left: 1px solid #d7dee6;
}
.piq-nav-staff-label {
  font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--iq-slate); margin-right: .35rem; user-select: none;
}
.piq-nav-staff .nav-link { padding-top: .7rem; padding-bottom: .7rem; border: none; color: var(--iq-slate-dark); }
.piq-nav-staff .nav-link:hover { color: var(--piq-blue); }
@media (max-width: 575.98px) {
  .piq-navbar .nav-link { padding: .55rem .25rem; border-bottom: none; }
  .piq-navbar .nav-link.iq-active { border-left: 3px solid var(--piq-blue); padding-left: .6rem; }
  .piq-nav-staff { margin: .35rem 0; padding: .25rem .6rem; flex-wrap: wrap; }
  .piq-nav-staff::before { display: none; }
}
/* ---- staff menu panels (Emily 09/25, #299): Tools (tabbed) · Manage · Admin ---- */
.piq-menu-panel {
  width: min(860px, calc(100vw - 2rem)); padding: 1.1rem 1.4rem 1.25rem;
  border: 1px solid #d6e2ee; border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 40, 63, .16);
}
.piq-menu-head { display: flex; align-items: baseline; gap: .75rem; margin-bottom: .8rem; flex-wrap: wrap; }
.piq-menu-title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.25rem; color: var(--piq-navy); }
.piq-menu-hint { font-size: .8rem; color: var(--iq-slate); }
.piq-menu-tabs { margin-bottom: .9rem; gap: .25rem; }
.piq-menu-tabs .nav-link { border: none; border-bottom: 3px solid transparent; color: var(--iq-slate); font-size: .9rem; padding: .45rem .85rem; background: transparent; }
.piq-menu-tabs .nav-link.active { color: var(--piq-navy); font-weight: 500; border-bottom-color: var(--piq-blue); background: transparent; }
.piq-menu-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem 1.75rem; }
.piq-menu-col { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.piq-menu-col-head {
  font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--iq-slate); font-weight: 600;
  padding-bottom: .4rem; margin-bottom: .3rem; border-bottom: 1px solid #e3e8ee;
}
.piq-menu-panel .piq-menu-item {
  display: flex; align-items: center; gap: .5rem; padding: .42rem .5rem; border-radius: 6px;
  color: var(--piq-navy); font-size: .9rem; white-space: normal;
}
.piq-menu-panel .piq-menu-item:hover, .piq-menu-panel .piq-menu-item:focus { background: #f3f7fb; color: var(--piq-navy); }
.piq-menu-tag {
  font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; padding: .05rem .4rem; border-radius: 999px;
  background: #eef1f5; color: var(--iq-slate); font-weight: 500; white-space: nowrap;
}
@media (max-width: 767.98px) {
  .piq-menu-panel { width: calc(100vw - 2rem); padding: .9rem 1rem 1rem; }
  .piq-menu-cols { grid-template-columns: 1fr; gap: .9rem; }
}
.piq-nav-email { color: var(--iq-slate); font-size: .85rem; }
.piq-nav-signout { color: var(--piq-blue) !important; font-weight: 600; }

/* ---- white hero band ---- */
.iq-hero { padding: 2.4rem 0 1.9rem; }
.iq-eyebrow {
  text-transform: uppercase; letter-spacing: .16em; font-size: .74rem;
  color: var(--piq-blue); font-weight: 700; margin-bottom: .5rem;
}
.iq-hero-title {
  font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--piq-navy);
  font-size: clamp(1.8rem, 4vw, 2.7rem); line-height: 1.12; letter-spacing: -.01em;
  margin-bottom: .6rem;
}
.iq-hero-sub { color: var(--iq-slate); font-size: 1.02rem; max-width: 720px; margin-bottom: 0; }
.iq-hero-sub .iq-accent { color: var(--piq-blue); }

/* ---- full-width light filter band ---- */
.iq-filter-band { background: var(--iq-band); border-top: 1px solid var(--iq-border); border-bottom: 1px solid var(--iq-border); padding: 1rem 0; }
.iq-filter-label {
  display: block; text-transform: uppercase; letter-spacing: .1em; font-size: .66rem;
  font-weight: 700; color: var(--iq-slate); margin-bottom: .3rem;
}
.iq-filter-band .form-select, .iq-filter-band .form-control { background-color: #fff; border-color: #d6dde4; }

/* ---- stat tiles ---- */
.iq-stat-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.iq-stat {
  background: #fff; border: 1px solid var(--iq-border); border-radius: 10px;
  padding: .7rem 1.1rem; min-width: 9.5rem;
}
.iq-stat-num { font-size: 1.45rem; font-weight: 700; color: var(--piq-navy); line-height: 1.15; }
.iq-stat-label { font-size: .78rem; color: var(--iq-slate); }
.iq-stat.warn { background: var(--iq-amber-bg); border-color: #f3dfae; }
.iq-stat.warn .iq-stat-num { color: #8a5a00; }

/* ---- hub cards (Dashboards home) ---- */
.iq-card-grid .card { border: 1px solid var(--iq-border); border-radius: 12px; }
.iq-open-link { color: var(--piq-blue); font-weight: 600; font-size: .9rem; }
.iq-card-coach { background: var(--piq-navy); color: #fff; border: none !important; }
.iq-card-coach .card-title { color: #fff !important; }
.iq-card-coach p { color: rgba(255,255,255,.82); }
.iq-card-coach .iq-open-link { color: var(--piq-gold); }

/* ---- navy "More ways in" band ---- */
.iq-more-band { background: var(--piq-navy); color: #fff; }
.iq-more-band h4 { color: #fff; font-family: 'Poppins', sans-serif; font-weight: 700; }
.iq-more-band .iq-more-sub { color: rgba(255,255,255,.78); font-size: .95rem; }
.iq-more-tile {
  display: block; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 1rem 1.1rem; height: 100%; text-decoration: none;
  transition: background .12s ease;
}
.iq-more-tile:hover { background: rgba(255,255,255,.12); }
.iq-more-tile h6 { color: var(--piq-gold); font-weight: 600; margin-bottom: .3rem; }
.iq-more-tile p { color: rgba(255,255,255,.8); font-size: .84rem; margin-bottom: 0; }

/* ---- day-grouped tables (Past Reports) ---- */
.iq-day-row td {
  background: var(--iq-muted-bg) !important; font-size: .72rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--iq-slate-dark);
  padding-top: .45rem; padding-bottom: .45rem;
}
.iq-table-meta { font-size: .82rem; color: var(--iq-slate); }

/* ---- global Bootstrap overrides: every page inherits the theme ---- */
.btn-primary, .btn-primary:focus {
  background-color: var(--piq-blue); border-color: var(--piq-blue); font-weight: 600;
}
.btn-primary:hover, .btn-primary:active { background-color: var(--piq-blue-dark) !important; border-color: var(--piq-blue-dark) !important; }
.btn-outline-primary { color: var(--piq-blue); border-color: var(--piq-blue); font-weight: 600; }
.btn-outline-primary:hover { background-color: var(--piq-blue); border-color: var(--piq-blue); }
a { color: var(--piq-blue); }
a:hover { color: var(--piq-blue-dark); }
.text-primary { color: var(--piq-blue) !important; }
.bg-primary, .badge.text-bg-primary { background-color: var(--piq-blue) !important; }
.table > thead th {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--iq-slate); font-weight: 700; border-bottom-width: 1px;
}
.form-control:focus, .form-select:focus {
  border-color: var(--piq-blue); box-shadow: 0 0 0 .2rem rgba(27,118,188,.12);
}
.nav-tabs .nav-link.active { color: var(--piq-navy); font-weight: 600; }
.card { border-color: var(--iq-border); }

/* ---- iq-select: searchable single/multi dropdown (John 08/14) ---- */
.iq-select-wrap { position: relative; }
.iq-select-btn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background-color: #fff; }
/* the button is always drawn small; a full-size form field's picker (a form's Client box, #705) stays full size */
.iq-select-wrap:has(> select.form-select:not(.form-select-sm)) > .iq-select-btn {
  padding-top: .375rem; padding-bottom: .375rem; padding-left: .75rem;
  font-size: 1rem; border-radius: var(--bs-border-radius);
}
/* a w-auto select keeps its content width once wrapped */
.iq-select-wrap:has(> select.w-auto) { display: inline-block; }
.iq-select-panel {
  display: none; position: absolute; z-index: 1055; top: calc(100% + 2px); left: 0;
  background: #fff; border: 1px solid var(--iq-border); border-radius: 8px;
  padding: .5rem; min-width: 100%; width: max-content; max-width: min(320px, 90vw);
  box-shadow: 0 10px 30px rgba(15,40,63,.14);
  text-align: start; /* never inherit a parent's text-end alignment */
}
.iq-select-panel.show { display: block; }
.iq-select-tools { font-size: .75rem; margin-top: .4rem; }
.iq-select-list { max-height: 260px; overflow-y: auto; margin-top: .4rem; }
.iq-select-item {
  display: flex; gap: .5rem; align-items: center; padding: .28rem .4rem;
  font-size: .85rem; cursor: pointer; border-radius: 4px; margin: 0;
}
.iq-select-item:hover { background: #f0f6fb; }
.iq-select-item.active { background: #e8f1fb; color: var(--piq-navy); font-weight: 600; }

/* ---- dashboard filter toolbar (Views/Portal/Dashboard.cshtml) ----
   Desktop: one row, the widths the inline styles used to set. Phone: the toolbar wraps and each
   filter takes its own full-width row, so nothing forces a horizontal scroll at 390 px (09/28). */
.iq-dash-filter-dashboards { min-width: 200px; }
.iq-dash-filter-locations { min-width: 190px; }
.iq-dash-filter-departments { min-width: 180px; }
@media (max-width: 575.98px) {
  .iq-dash-toolbar, .iq-dash-filters { flex-wrap: wrap; width: 100%; }
  .iq-dash-filters .iq-dash-filter { flex: 1 1 100%; min-width: 0; }
}

/* ---- Analytics hub: hero row + family sections (Emily 09/19, #120) ---- */
.piq-hub-section-label { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--piq-navy, #0B3C62);
  border-bottom: 1px solid #d9e2ec; padding-bottom: .35rem; margin-bottom: .75rem; }
.piq-hub-staff-label { color: #8a6d1a; border-bottom-color: #ecdca6; }
.piq-hub-compact { display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: #fff; border: 1px solid #d9e2ec;
  border-radius: .5rem; padding: .6rem .85rem; color: inherit; transition: border-color .15s, box-shadow .15s; }
.piq-hub-compact:hover { border-color: var(--piq-blue, #1B75BB); box-shadow: 0 1px 6px rgba(11, 60, 98, .12); }
.piq-hub-compact-title { display: block; font-weight: 600; color: var(--piq-navy, #0B3C62); }
.piq-hub-compact-sub { display: block; font-size: .8rem; color: #6b7a8c; }
.piq-hub-compact .iq-open-link { white-space: nowrap; font-size: .85rem; }
.piq-hub-compact-staff { background: #fffaf0; border-style: dashed; border-color: #ecdca6; }
.piq-hub-tips { background: #f4f1ea; border-radius: .5rem; padding: .7rem 1rem; color: #4a5565; }

/* ---- Client Dashboards: two lenses over the same assignments (Emily 09/19, #116) ---- */
.cd-frame { background: #fff; border: 1px solid #dee2e6; border-top: 0; border-radius: 0 0 .5rem .5rem; }
.cd-body { display: flex; min-height: 28rem; }
.cd-list { flex: 0 0 300px; border-right: 1px solid #dee2e6; padding: .75rem; max-height: 70vh; overflow-y: auto; }
.cd-list .list-group-item { border: 0; border-radius: .375rem; padding: .4rem .6rem; font-size: .9rem; }
.cd-panel { flex: 1 1 auto; padding: 1rem 1.25rem; min-width: 0; }
.cd-family { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b7a8c; margin: .9rem 0 .4rem; }
.cd-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.cd-chip { border: 1px solid #c7d3e0; background: #fff; color: #33475b; border-radius: 999px; padding: .3rem .8rem; font-size: .875rem; }
.cd-chip:hover { border-color: var(--piq-blue, #1B75BB); }
.cd-chip.on { background: var(--piq-blue, #1B75BB); border-color: var(--piq-blue, #1B75BB); color: #fff; }
.cd-core { font-size: .6rem; font-weight: 700; letter-spacing: .06em; border: 1px solid currentColor; border-radius: .25rem; padding: 0 .25rem; margin-left: .25rem; vertical-align: middle; opacity: .85; }
.cd-ovr, .cd-ovr-add { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .4rem; color: #33475b; }
.cd-ovr-add { margin-top: .6rem; }
.cd-checks { max-height: 56vh; overflow-y: auto; border-top: 1px solid #eef1f4; }
.cd-check { display: flex; gap: .5rem; align-items: center; padding: .35rem .25rem; border-bottom: 1px solid #eef1f4; margin: 0; cursor: pointer; }
.cd-new { color: #0F6B3A; font-size: .78rem; font-weight: 600; }
.cd-off { color: #B42318; font-size: .78rem; font-weight: 600; }
/* packages (#116 Phase 2): the picker row on the client panel, the exception chips, the editor cards */
.cd-pkg { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; background: #f4f7fa; border: 1px solid #dee2e6; border-radius: .5rem; padding: .6rem .85rem; margin: .5rem 0 .25rem; }
.cd-pkg-label { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #6b7a8c; }
.cd-exc { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .15rem .6rem; font-size: .78rem; font-weight: 600; border: 1px dashed currentColor; }
.cd-exc.beyond { color: #0F6B3A; background: #eef8f1; }
.cd-exc.disabled { color: #B42318; background: #fdf1ef; }
.cd-chip.exc { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #d9a400; }
.cd-staff { border: 1px dashed #9aa9b8; background: #fff; color: #5b6b7b; border-radius: 999px; padding: .1rem .55rem; font-size: .75rem; margin-right: .35rem; }
.cd-staff:hover { border-color: #8a5a00; color: #8a5a00; }
.cd-staff.on { border-style: solid; border-color: #8a5a00; background: #8a5a00; color: #fff; }
.pk-card { background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.pk-card .form-control-lg { font-weight: 600; max-width: 28rem; }
.pk-card .form-control-sm { max-width: 40rem; }
.pk-chip { cursor: pointer; user-select: none; }
@media (max-width: 767.98px) { .cd-body { flex-direction: column; } .cd-list { flex-basis: auto; border-right: 0; border-bottom: 1px solid #dee2e6; max-height: 16rem; } }

/* ---- staff-only "View as client" switch (Emily 09/18) ---- */
.piq-view-as { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; margin: .25rem 0 .6rem; }
.piq-view-as-on { justify-content: space-between; background: #8a5a00; color: #fff; border-radius: .5rem; padding: .5rem .85rem; font-size: .9rem; }
/* Emily 09/30: the in-dashboard client switch sits left of the view-as switch on one line; the
   view-as banner (when on) takes the whole line under it */
.iq-dash-topline { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; column-gap: 1.25rem; }
.iq-dash-topline > .piq-view-as-on { flex: 1 1 100%; }
.iq-dash-client { display: flex; align-items: center; gap: .5rem; margin: .25rem 0 .6rem; }

/* #160 (Emily 09/20): the four quarter-width trend charts on Payroll Pulse line up. Every such
   card holds room for a two-line title, so a title that wraps on one card cannot push its plot
   below its neighbours. Open space under a short title is intended. */
.piq-chart-quarter > h6 { min-height: 2.5em; }

/* ---- Client home (Emily 09/23, #265): the landing hero's treatment holding Your Week ---- */
.piq-home-hero { position: relative; overflow: hidden; }
.piq-home-hero::before, .piq-home-hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(40px); opacity: .55; pointer-events: none; }
.piq-home-hero::before { width: 520px; height: 520px; right: -140px; top: -220px; background: radial-gradient(circle, rgba(27,118,188,.9), transparent 70%); }
.piq-home-hero::after { width: 380px; height: 380px; left: 30%; bottom: -260px; background: radial-gradient(circle, rgba(255,203,63,.35), transparent 70%); }
.piq-home-hero .container { position: relative; }
.piq-home-picker { padding-top: 1rem; display: flex; align-items: center; gap: .5rem; }
.piq-home-picker .form-select { background-color: #fff; }
.piq-home-live { display: inline-flex; align-items: center; gap: .4rem; letter-spacing: .02em; text-transform: none; font-weight: 500; color: rgba(255,255,255,.75); font-size: .78rem; margin-left: .75rem; }
.piq-home-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--piq-gold); box-shadow: 0 0 0 0 rgba(255,203,63,.7); animation: piq-home-pulse 2.4s ease-out infinite; }
@keyframes piq-home-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,203,63,.7); } 100% { box-shadow: 0 0 0 10px rgba(255,203,63,0); } }
.piq-home-btn-ghost { border: 2px solid rgba(255,255,255,.45); color: #fff; font-weight: 600; }
.piq-home-btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.piq-home-stats { display: flex; gap: 1.6rem; flex-wrap: wrap; margin-top: 1.6rem; }
.piq-home-stat .v { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.7rem; line-height: 1.1; color: #fff; }
.piq-home-stat .l { font-size: .74rem; color: rgba(255,255,255,.7); letter-spacing: .04em; }
.piq-home-card h5 { font-size: 1.35rem; }
.piq-home-meta { color: #6b7a89; font-size: .84rem; margin: 0 0 .9rem; }
.piq-home-tile { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .75rem; text-decoration: none; border-radius: 8px; padding: .6rem .9rem; border: 1px solid #cfd8e2; color: var(--piq-navy); transition: transform .12s ease, box-shadow .12s ease; }
.piq-home-tile:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(11,60,98,.15); color: var(--piq-navy); }
.piq-home-tile strong { display: block; font-weight: 600; line-height: 1.25; }
.piq-home-tile small { display: block; font-size: .8rem; color: #5c6b7a; }
.piq-home-tile .go { color: var(--piq-blue); font-weight: 700; }
.piq-home-tile-primary { background: var(--piq-blue); border-color: var(--piq-blue); color: #fff; }
.piq-home-tile-primary:hover { color: #fff; }
.piq-home-tile-primary small, .piq-home-tile-primary .go { color: #fff; }
.piq-home-tile-coach { background: var(--piq-navy); border-color: var(--piq-navy); color: #fff; }
.piq-home-tile-coach:hover { color: #fff; }
.piq-home-tile-coach small { color: rgba(255,255,255,.8); }
.piq-home-tile-coach .go { color: var(--piq-gold); }
.piq-home-block { padding: 1.4rem 0 .6rem; }
.piq-home-systems { display: grid; gap: 1rem; grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 991px) { .piq-home-systems { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 575px) { .piq-home-systems { grid-template-columns: 1fr; } }
.piq-home-svc { background: #fff; border: 1px solid #e5e9ef; border-radius: 12px; padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .6rem; }
.piq-home-svc-head { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #64748b; display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.piq-home-svc-head .tag { font-weight: 600; letter-spacing: 0; text-transform: none; color: #6b4b00; background: #fff7e6; border-radius: 999px; padding: 0 .5rem; font-size: .68rem; }
.piq-home-link { display: flex; align-items: center; gap: .75rem; padding: .55rem .6rem; border-radius: 10px; border: 1px solid transparent; text-decoration: none; color: inherit; transition: border-color .15s, background .15s; }
a.piq-home-link:hover { border-color: var(--piq-blue); background: #f3f5f7; color: inherit; }
.piq-home-logo { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: #fff; letter-spacing: .02em; }
/* #503: a product logo in the monogram's square: white, hairline edge, the mark centred and never cropped */
.piq-home-logo-img { background: #fff; border: 1px solid #e5e9ef; padding: 4px; overflow: hidden; box-sizing: border-box; }
.piq-home-logo-img img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.piq-home-link .t { min-width: 0; flex: 1; }
.piq-home-link .n { display: block; font-weight: 600; color: var(--piq-navy); line-height: 1.25; }
.piq-home-link .d { display: block; font-size: .78rem; color: #64748b; line-height: 1.35; }
.piq-home-link .arrow { color: var(--piq-blue); font-weight: 700; font-size: .9rem; }
.piq-home-add { border: 1px dashed #d9e2ec; color: #64748b; font-size: .8rem; justify-content: center; }
.piq-home-team { display: grid; gap: 1rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 767px) { .piq-home-team { grid-template-columns: 1fr; } }
.piq-home-people { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0,1fr)); align-content: start; }
@media (max-width: 575px) { .piq-home-people { grid-template-columns: 1fr; } }
.piq-home-person { background: #fff; border: 1px solid #e5e9ef; border-radius: 12px; padding: .9rem 1rem; display: grid; grid-template-columns: 44px 1fr; gap: .75rem; }
.piq-home-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--piq-navy); color: var(--piq-gold); display: grid; place-items: center; font-weight: 700; font-size: .9rem; }
.piq-home-person .role { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--piq-blue); }
.piq-home-person .nm { font-weight: 600; color: var(--piq-navy); }
.piq-home-person .c { font-size: .82rem; color: #64748b; display: flex; flex-wrap: wrap; gap: .2rem .5rem; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.piq-home-person > div { min-width: 0; }
.piq-home-person .c a { color: #64748b; text-decoration: none; }
.piq-home-copy { font: inherit; font-size: .7rem; font-weight: 600; color: var(--piq-blue); background: none; border: 1px solid #d9e2ec; border-radius: 5px; padding: 0 .4rem; cursor: pointer; }
.piq-home-copy:hover { border-color: var(--piq-blue); }
/* #359 Employee Helpline: a team inbox, not a person (cream card, gold mark, the page's only phone number) */
.piq-home-team-empty { grid-column: 1 / -1; }
.piq-home-person.support { grid-column: 1 / -1; background: #f2f0eb; border-color: #e3dcd3; grid-template-columns: 44px 1fr auto; align-items: center; }
.piq-home-person.support .piq-home-avatar { background: var(--piq-gold); color: var(--piq-navy); }
.piq-home-person.support .nm { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.15rem; }
.piq-home-person.support .phone { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.45rem; color: var(--piq-navy); white-space: nowrap; text-align: right; line-height: 1.1; }
.piq-home-person.support .phone a { color: inherit; text-decoration: none; }
.piq-home-person.support .phone small { display: block; font-family: 'Poppins', sans-serif; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: #64748b; font-weight: 600; }
.piq-home-person.support .phone .hrs { display: block; margin-top: .3rem; font-size: .76rem; font-weight: 400; color: #64748b; white-space: normal; }
@media (max-width: 575px) { .piq-home-person.support { grid-template-columns: 44px 1fr; } .piq-home-person.support .phone { grid-column: 2; text-align: left; } }
.piq-home-help { background: var(--piq-navy); color: #fff; border-radius: 12px; padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .6rem; }
.piq-home-help h4 { font-size: 1.3rem; color: #fff; margin: 0; }
.piq-home-help p { margin: 0; font-size: .86rem; color: rgba(255,255,255,.85); font-weight: 300; }
.piq-home-help p a { color: #fff; }
.piq-home-help .row-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.piq-home-help small { color: rgba(255,255,255,.65); font-size: .76rem; }
.piq-home-help .piq-home-copy { color: var(--piq-gold); border-color: rgba(255,255,255,.35); }
.piq-home-btn-gold { background: var(--piq-gold); border: 2px solid var(--piq-gold); color: var(--piq-navy); font-weight: 600; }
.piq-home-btn-gold:hover { background: #ffd866; border-color: #ffd866; color: var(--piq-navy); }
.piq-home-toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%) translateY(20px); background: var(--piq-ink); color: #fff; padding: .6rem 1rem; border-radius: 8px; font-size: .84rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: min(92vw, 520px); text-align: center; z-index: 50; }
.piq-home-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .piq-home-live i { animation: none; } .piq-home-tile, .piq-home-link, .piq-home-toast { transition: none; } }

/* ---- The card contract (Emily 09/26, #328; docs/specs/2026-09-26-coach-home-card-contract-mockup.dc.html).
   Every card in a row is exactly as tall as the row: the row has a fixed height and STRETCHES its cards (the old
   .piq-today-grid aligned them to the top and gave the bodies nothing to fill, which is why the 09/25 rows came out
   uneven). A card = head (~48px: title, live count, chips) + body (fills the rest, scrolls inside, sticky table
   header, a bottom shadow while there is more) + foot (~40px, left out when empty). Reusable: the Analytics hub and
   the client home can take the same classes later; today only the coach home and its prep card use them.
   Below 992px the rows stack and each card takes its natural height with the body capped and scrolling. ---- */
.piq-fixed-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.25rem; height: var(--piq-row-h, 372px); align-items: stretch; }
.piq-fixed-row.piq-row-3-5-4 { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr); }
.piq-fixed-row.piq-row-short { --piq-row-h: 330px; }
.piq-fixed-row.piq-row-mid { --piq-row-h: 356px; }
.piq-panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: #fff; border: 1px solid var(--iq-border); border-radius: 12px; box-shadow: 0 1px 2px rgba(11,60,98,.06); }
.piq-panel-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem .75rem; flex-wrap: wrap; min-height: 48px; padding: .6rem 1.1rem; border-bottom: 1px solid #eef1f4; }
.piq-panel-head h2 { margin: 0; font-family: 'Poppins', sans-serif; font-size: .95rem; font-weight: 600; color: var(--piq-navy); }
.piq-panel-count { font-size: .75rem; color: var(--iq-slate); }
.piq-panel-body { flex: 1 1 auto; min-height: 0; overflow: auto; font-size: .85rem;
  /* bottom scroll shadow, CSS only: the "local" cover rides the content and hides the shadow once scrolled to the end */
  background: linear-gradient(rgba(255,255,255,0), #fff 70%) bottom / 100% 24px no-repeat local,
              radial-gradient(farthest-side at 50% 100%, rgba(11,60,98,.2), rgba(11,60,98,0)) bottom / 100% 10px no-repeat scroll;
  background-color: #fff; }
.piq-panel-pad { padding: .5rem 1.1rem; }
.piq-panel-body table { margin-bottom: 0; }
.piq-panel-body table.piq-fixed-table { table-layout: fixed; width: 100%; }
.piq-panel-body table.piq-fixed-table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piq-w-case { width: 5.75rem; } .piq-w-client { width: 22%; } .piq-w-status { width: 6.5rem; } .piq-w-date { width: 4.5rem; }
.piq-w-owner { width: 15%; } .piq-w-service { width: 8.25rem; }
.piq-panel-body thead th { position: sticky; top: 0; z-index: 1; background: #f8f9fb; color: var(--iq-slate); font-size: .68rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.piq-panel-foot { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 40px; padding: .5rem 1.1rem; border-top: 1px solid #eef1f4; font-size: .78rem; color: var(--iq-slate); }
@media (max-width: 991.98px) {
  .piq-fixed-row, .piq-fixed-row.piq-row-3-5-4 { grid-template-columns: minmax(0, 1fr); height: auto; }
  .piq-fixed-row .piq-panel-body { max-height: 20rem; }
}
.piq-chip { display: inline-block; padding: .12rem .6rem; border-radius: 999px; border: 1px solid #dce3ea; color: var(--piq-navy); font-size: .72rem; background: #fff; text-decoration: none; cursor: pointer; }
.piq-chip:hover { border-color: var(--piq-blue); color: var(--piq-navy); }
.piq-chip.active, .piq-chip[aria-pressed="true"] { background: var(--piq-navy); border-color: var(--piq-navy); color: #fff; }

/* ---- Coach home (#328, docs/specs/2026-09-26-coach-home-mockup.dc.html): the hero band and its five numbers (#333),
   the tools strip, Today's timeline, Needs you, My clients tiles, and the Meeting Brief drawer. ---- */
.piq-coach-hero { padding: 1.6rem 0 1.5rem; }
.piq-coach-hero .iq-eyebrow, .piq-coach-hero label.iq-eyebrow { color: var(--piq-gold); }
.piq-coach-hero #dept-switcher .form-select { background-color: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.35); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; }
.piq-coach-hero #dept-switcher .form-select option { color: var(--piq-ink); }
.piq-coach-hero #dept-switcher .small, .piq-coach-hero .piq-hero-muted { color: rgba(255,255,255,.7) !important; }
.piq-coach-hero #dept-switcher .small { display: none; }   /* the mockup's eyebrow is just HOME · [department] · date */
.piq-coach-hero .piq-hero-left { flex: 1 1 24rem; min-width: 0; }
.piq-coach-hero h1 { font-size: 2.1rem; font-weight: 400; line-height: 1.1; margin: 0; }
.piq-coach-hero .dropdown-menu { color: var(--piq-ink); }
.piq-hero-btn { display: inline-flex; align-items: center; height: 28px; padding: 0 .75rem; border: 1px solid rgba(255,255,255,.45); border-radius: 6px; color: #fff; background: transparent; font-weight: 500; font-size: .75rem; }
.piq-hero-btn:hover, .piq-hero-btn:focus { color: #fff; background: rgba(255,255,255,.12); border-color: #fff; }
.piq-hero-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .3rem .15rem .7rem; border-radius: 999px; background: rgba(255,255,255,.14); color: #fff; font-size: .75rem; }
.piq-hero-numbers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; width: min(600px, 100%); flex: 0 1 600px; }
.piq-hero-number { display: flex; flex-direction: column; gap: 2px; padding: .75rem .9rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 10px; color: #fff; text-decoration: none; }
.piq-hero-number:hover, .piq-hero-number:focus { background: rgba(255,255,255,.16); color: #fff; }
.piq-hero-number .v { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.9rem; line-height: 1; }
.piq-hero-number .v.gold { color: var(--piq-gold); }
.piq-hero-number .l { font-size: .7rem; letter-spacing: .04em; color: rgba(255,255,255,.75); }
@media (max-width: 991.98px) { .piq-hero-numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .piq-hero-numbers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Your tools (Emily 09/30, #707, docs/specs/2026-09-30-your-tools-strip): icon tiles that read as buttons, on the
   light grey band between the hero and the cards; the live line wraps to two lines; a gold badge only when work waits. */
.piq-strip-band { background: var(--iq-band, #f3f5f7); border-bottom: 1px solid var(--iq-border); padding: 18px 0; }
.piq-strip { display: grid; grid-template-columns: auto repeat(var(--piq-strip-n, 6), minmax(0, 1fr)); gap: 10px; align-items: stretch; }
.piq-strip .lead-cell { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding-right: 14px; border-right: 1px solid #d5dde6; font-size: .7rem; color: var(--iq-slate); }
.piq-strip .lead-cell strong { letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--piq-navy); }
.piq-strip-tile { display: flex; gap: 10px; align-items: flex-start; min-width: 0; padding: 12px; background: #fff; border: 1px solid #cfd8e3; border-radius: 10px; box-shadow: 0 1px 2px rgba(11,60,98,.08); color: var(--piq-ink); text-decoration: none; transition: border-color .12s, box-shadow .12s, transform .12s; }
.piq-strip-tile:hover { border-color: var(--piq-navy); box-shadow: 0 4px 12px rgba(11,60,98,.14); transform: translateY(-1px); color: var(--piq-ink); }
.piq-strip-tile:focus-visible { outline: 3px solid var(--piq-gold); outline-offset: 2px; }
.piq-strip-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: #e8eff6; color: var(--piq-navy); }
.piq-strip-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.piq-strip-tile .t { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-weight: 600; font-size: .875rem; line-height: 1.3; color: var(--piq-navy); overflow-wrap: normal; } /* a word never breaks mid-word: the title wraps between words and the badge drops below it when the tile is narrow (Emily 10/19) */
.piq-strip-badge { flex: none; font-size: .6875rem; font-weight: 600; line-height: 1.5; padding: 0 8px; border-radius: 999px; background: var(--piq-gold); color: var(--piq-ink); }
.piq-strip-tile .s { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .75rem; line-height: 1.4; color: var(--iq-slate-dark); }
@media (prefers-reduced-motion: reduce) { .piq-strip-tile { transition: none; } .piq-strip-tile:hover { transform: none; } }
@media (max-width: 1199.98px) {
  .piq-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .piq-strip .lead-cell { grid-column: 1 / -1; flex-direction: row; justify-content: flex-start; align-items: baseline; gap: 10px; padding-right: 0; border-right: 0; }
}
@media (max-width: 575.98px) { .piq-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.piq-agenda-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: .9rem; padding: .75rem 0; border-bottom: 1px solid #f0f2f5; }
.piq-agenda-row:last-child { border-bottom: 0; }
.piq-agenda-time { display: flex; flex-direction: column; align-items: center; gap: .35rem; }
.piq-time-chip { font-weight: 600; font-size: .8rem; color: var(--piq-navy); border: 1px solid #c9d3de; border-radius: 6px; padding: .1rem .45rem; white-space: nowrap; background: #fff; }
.piq-time-chip.done { color: var(--iq-slate); background: #f3f5f8; border-color: #dce3ea; text-decoration: line-through; text-decoration-color: #a3aebb; }
.piq-time-chip.next { border: 2px solid var(--piq-gold); background: #fff8e1; box-shadow: 0 0 0 3px rgba(255,203,63,.25); }
.piq-time-chip.any { color: var(--iq-slate); border-style: dashed; }
.piq-time-tag { font-size: .66rem; font-weight: 600; }
.piq-time-tag.done { color: #1f5a38; }
.piq-time-tag.next { color: #7a4b00; }
.piq-agenda-line { width: 2px; flex-grow: 1; background: var(--iq-border); border-radius: 1px; }
.piq-agenda-main { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.piq-agenda-main.past { opacity: .8; }
.piq-agenda-status { font-size: .75rem; color: var(--iq-slate); }
.piq-agenda-status .ok { color: #1f5a38; font-weight: 500; }
.piq-agenda-status .owe { color: #7a4b00; font-weight: 500; }
.piq-case-pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; padding: .2rem .6rem; border-radius: 999px; background: #e8f1f8; color: var(--piq-navy); font-weight: 500; text-decoration: none; }
.piq-case-pill:hover { background: #d7e7f4; color: var(--piq-navy); }
/* #473 Today row community picker (Emily 09/28): the row's community, changeable in place; amber until one is picked */
.piq-row-community .form-select { width: auto; max-width: 18rem; padding-top: .1rem; padding-bottom: .1rem; font-size: .8125rem; }
.piq-row-community .form-select.is-unmatched { border-color: #c98a00; color: #7a4b00; background-color: #fff8e1; }

.piq-team { display: inline-flex; align-items: center; position: relative; }
.piq-team-dot { width: 26px; height: 26px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 600; letter-spacing: .02em; background: #e8f1f8; color: var(--piq-navy); border: 2px solid #fff; box-shadow: 0 0 0 1px #dce3ea; cursor: pointer; }
.piq-team > .piq-team-dot ~ .piq-team-dot { margin-left: -8px; }
.piq-team-dot.lead { background: var(--piq-navy); color: #fff; box-shadow: 0 0 0 1px var(--piq-gold); }
.piq-team-dot.empty { background: #fff; color: #a3aebb; text-decoration: line-through; cursor: default; }
.piq-team-dot:focus-visible { outline: 2px solid var(--piq-blue); outline-offset: 2px; position: relative; z-index: 2; }
/* #458: the card floats above the page like a dropdown menu. coach-home.js lifts it out of the scrolling panel
   (which clipped it, #328) into a page-level layer and pins it under its circle; top and left are set there. */
.piq-team-card { position: fixed; top: 0; left: 0; z-index: 1000; min-width: 15rem; max-width: calc(100vw - 16px); padding: .6rem .75rem; background: #fff; border: 1px solid var(--iq-border); border-radius: 8px; box-shadow: 0 8px 24px rgba(11,60,98,.18); font-size: .78rem; }
.piq-team-card .role { font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--piq-blue); }
.piq-team-card .nm { font-weight: 600; color: var(--piq-navy); }
.piq-team-inboxes { flex-wrap: wrap; justify-content: flex-start; gap: .15rem .75rem; }

.piq-needs-line { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .7rem 1.1rem; border-bottom: 1px solid #f0f2f5; color: var(--piq-ink); text-decoration: none; }
.piq-needs-line:last-child { border-bottom: 0; }
.piq-needs-line:hover { background: #f8f9fb; color: var(--piq-ink); }
.piq-needs-line .t { font-weight: 500; font-size: .84rem; }
.piq-needs-line .d { font-size: .75rem; color: var(--iq-slate); }
.piq-needs-line .go { font-size: .75rem; font-weight: 600; color: var(--piq-blue); white-space: nowrap; }
.piq-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.piq-dot.red { background: #c8362a; box-shadow: 0 0 0 4px rgba(200,54,42,.15); }
.piq-dot.amber { background: #d98e04; }
.piq-dot.grey { background: #c9d3de; }
.piq-dot.green { background: #2e7d4f; }
.piq-dot.sm { width: 8px; height: 8px; box-shadow: none; }
.piq-overdue { color: #8a1c12; font-weight: 600; }
.piq-min0 { min-width: 0; }

/* My clients tile (#452): a card with two sibling links, the body (opens the client's home) and the footer */
.piq-client-tile { display: flex; flex-direction: column; gap: .35rem; padding: .7rem .85rem; border: 1px solid var(--iq-border); border-radius: 10px; color: var(--piq-ink); background: #fff; }
.piq-client-tile:hover { border-color: var(--piq-blue); }
.piq-client-tile-body { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: .75rem; align-items: center; color: var(--piq-ink); text-decoration: none; }
.piq-client-tile-body:hover { color: var(--piq-ink); }
.piq-client-tile-body:hover .fw-semibold { text-decoration: underline; }
.piq-client-tile-foot { align-self: flex-start; margin-left: calc(56px + .75rem); text-decoration: none; }
.piq-client-tile-foot:hover { text-decoration: underline; }
/* the big number is Focus Communities (#455): plain at 0, tinted when the coaches' book flags any */
.piq-client-count { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 56px; border-radius: 8px; background: #eef1f4; color: var(--piq-ink); }
.piq-client-count.has-focus { background: #fde8e6; color: #8a1c12; }
.piq-client-count .v { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 1.6rem; line-height: 1; }
.piq-client-count .l { font-size: .6rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.piq-rating-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; background: #eef1f4; }
.piq-rating-bar .r { background: #c8362a; }
.piq-rating-bar .y { background: #d98e04; }
.piq-rating-bar .g { background: #2e7d4f; }
.piq-rating-bar .n { background: #c9d3de; }

/* the Meeting Brief's blocks, printed on the prep card's panel (the home page's brief drawer went on 10/12, Emily) */
.piq-brief-status { display: inline-flex; align-items: center; gap: .5rem; font-size: .78rem; font-weight: 500; color: #1f5a38; }
.piq-brief-status.warn { color: #7a4b00; }
.piq-brief-priority { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: .6rem; padding: .6rem .75rem; border: 1px solid var(--iq-border); border-radius: 10px; margin-bottom: .5rem; }
.piq-brief-priority .n { width: 28px; height: 28px; border-radius: 50%; background: var(--piq-navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .78rem; }
.piq-brief-priority .tp { color: var(--piq-navy); font-weight: 500; }
.piq-brief-wins { padding: .6rem .75rem; border-radius: 10px; background: #e6f2ea; }
.piq-brief-wins h3 { color: #1f5a38; }
.piq-brief-flags { padding: .6rem .75rem; border-radius: 10px; background: #fff4d6; }
.piq-brief-flags h3 { color: #7a4b00; }

/* the Meeting Brief printed on the prep card (#472, Emily 09/28): full width under the Dashboards strip; wide left column
   (Journey stage band, numbered Top priorities), right column (Data quality, Wins, Escalation flags, Repeat offenders,
   Prior action items), the feedback block at the foot; a skeleton while there is no brief or one is being prepared */
.piq-brief-panel .piq-panel-head h2 { font-size: 1.1rem; }
.piq-brief-panel .iq-eyebrow { font-size: .66rem; }
.piq-brief-panel h3 { margin: 0 0 .4rem; font-family: 'Poppins', sans-serif; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--iq-slate); font-weight: 600; }
.piq-brief-body { padding: 1rem 1.1rem; font-size: .85rem; line-height: 1.5; display: flex; flex-direction: column; gap: 1.1rem; }
.piq-brief-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); gap: 1.1rem; align-items: start; }
.piq-brief-text, .piq-brief-raw { white-space: pre-wrap; }
.piq-brief-journey { padding: .8rem 1rem; border-radius: 10px; background: #eaf2fa; }
.piq-brief-journey .lead-text { font-size: .95rem; color: var(--piq-ink); }
.piq-brief-quality { padding: .6rem .75rem; border-radius: 10px; background: #fff7e0; }
.piq-brief-quality h3 { color: #7a4b00; }
.piq-brief-panel .piq-brief-flags { border: 1px solid #f1d58a; }
.piq-brief-plain { padding: .6rem .75rem; border-radius: 10px; border: 1px solid var(--iq-border); }
.piq-brief-panel .piq-brief-priority { padding: .75rem .9rem; }
.piq-brief-btn-note { font-weight: 400; opacity: .8; }
.piq-brief-notice { margin: .75rem 1.1rem 0; padding: .5rem .75rem; border-radius: 8px; background: #fff4d6; color: #7a4b00; font-size: .8rem; }
.piq-brief-head { flex-wrap: nowrap; align-items: center; }
.piq-brief-head > :first-child { flex: 1 1 0; min-width: 0; }
.piq-brief-head > :last-child { flex-shrink: 0; }
.piq-brief-foot { flex-wrap: wrap; align-items: flex-start; }
.piq-brief-foot > span { flex: 1 1 18rem; }
.piq-brief-foot > span + span { text-align: right; }
.piq-dot.blue { background: var(--piq-blue); }
.piq-brief-status.info { color: var(--piq-navy); }
.piq-brief-bar { display: block; height: 10px; border-radius: 6px; background: #dfe6ee; margin: .35rem 0; }
.piq-brief-journey .piq-brief-bar { background: #cfdcea; }
.piq-brief-quality .piq-brief-bar, .piq-brief-flags .piq-brief-bar { background: #f3dfa6; }
.piq-brief-wins .piq-brief-bar { background: #c9e2d2; }
.piq-brief-priority .piq-brief-bar-dot { background: #dfe6ee; }
.piq-brief-shimmer .piq-brief-bar, .piq-brief-shimmer .piq-brief-bar-dot { animation: piq-brief-pulse 1.4s ease-in-out infinite; }
@keyframes piq-brief-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .piq-brief-shimmer .piq-brief-bar, .piq-brief-shimmer .piq-brief-bar-dot { animation: none; } }
.piq-brief-feedback { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 1.1rem; padding-top: 1rem; border-top: 1px solid #eef1f4; }
.piq-brief-feedback .btn-check:checked + .piq-brief-verdict { background: var(--piq-navy); border-color: var(--piq-navy); color: #fff; }
.piq-brief-feedback .btn-check:focus-visible + .piq-brief-verdict { outline: 2px solid var(--piq-blue); outline-offset: 2px; }
.piq-brief-verdict { font-size: .8rem; padding: .25rem .8rem; }
.piq-brief-sent { color: #1f5a38; }
.piq-brief-sent-list li { padding: .2rem 0; border-top: 1px dashed #eef1f4; }
@media (max-width: 991.98px) {
  .piq-brief-grid, .piq-brief-feedback { grid-template-columns: minmax(0, 1fr); }
  .piq-brief-head { flex-wrap: wrap; }
  .piq-brief-head > :first-child { flex-basis: 100%; }
  .piq-brief-foot > span + span { text-align: left; }
}

/* ---- Client Setup (#280): return bar, pop-out, board ---- */
.piq-setup-bar { background: var(--piq-navy); color: #fff; }
.piq-setup-bar-btn { background: #fff; color: var(--piq-navy); font-weight: 600; border: 0; }
.piq-setup-bar-btn:hover { background: var(--piq-gold); color: var(--piq-navy); }
.piq-setup-bar-link { color: var(--piq-gold); font-weight: 600; text-decoration: none; }
.piq-setup-bar-link:hover { color: #fff; }
.piq-setup-bar-close { color: rgba(255,255,255,.7); text-decoration: none; font-size: 1.4rem; line-height: 1; padding: 0 .25rem; }
.piq-setup-bar-close:hover { color: #fff; }
/* a page mounted in the checklist pop-out shows no chrome */
.piq-embedded header, .piq-embedded footer, .piq-embedded .piq-setup-bar-close, .piq-embedded .piq-setup-bar-btn, .piq-embedded .piq-setup-bar-link { display: none !important; }
.piq-embedded .piq-setup-bar { font-size: .85rem; }
.piq-embedded body > .container { max-width: none; }
.piq-setup-pill { display: inline-block; min-width: 9.5rem; text-align: center; font-size: .72rem; font-weight: 600; letter-spacing: .02em; padding: .2rem .5rem; border-radius: 999px; white-space: nowrap; }
.piq-setup-pill.done, .piq-setup-pill.confirmed { background: #d9efe1; color: #1c5b34; }
.piq-setup-pill.confirmed { background: #e6f2ea; }
.piq-setup-pill.unconfirmed { background: #fff1c9; color: #6b4d00; }
.piq-setup-pill.review { background: #ffe3c2; color: #7a3b00; }
.piq-setup-pill.missing { background: #f8d7da; color: #7a1c24; }
.piq-setup-pill.waiting { background: #e9ecef; color: #495057; }   /* #364: waiting on the model choice */
.piq-setup-group { background: var(--piq-navy); color: #fff; padding: .45rem .9rem; border-radius: .35rem .35rem 0 0; display: flex; justify-content: space-between; align-items: center; }
.piq-setup-group .badge { background: rgba(255,255,255,.18); }
.piq-setup-row { display: grid; grid-template-columns: 10.5rem 1fr auto; gap: .75rem 1rem; align-items: center; padding: .6rem .9rem; border: 1px solid #e3e6ea; border-top: 0; background: #fff; }
.piq-setup-row:last-child { border-radius: 0 0 .35rem .35rem; }
.piq-setup-row .name { font-weight: 600; color: var(--piq-navy); }
.piq-setup-row .sentence { color: #4d5b68; font-size: .9rem; }
.piq-setup-row .sentence .piq-setup-latest.stale { color: #B42318; font-weight: 600; }   /* #931: a "latest" date that is not today (a heads-up; the status does not change) */
.piq-setup-row .sentence.piq-setup-headsup { color: #B42318; font-weight: 600; }   /* #1167: UKG feeds gone quiet (a heads-up; the status does not change) */
.piq-setup-row .meta { color: #7a8794; font-size: .78rem; }
.piq-setup-progress { display: flex; height: .6rem; border-radius: 999px; overflow: hidden; background: #e9ecef; }
.piq-setup-progress span.done { background: #2e8b57; }
.piq-setup-progress span.default { background: #f0b429; }
.piq-setup-progress span.review { background: #e8863a; }
.piq-setup-progress span.missing { background: #c9384a; }
.piq-setup-progress span.waiting { background: #adb5bd; }
.piq-setup-card.ready { border-left: 5px solid #2e8b57; background: #eef8f1; }
.piq-setup-card.notready { border-left: 5px solid #f0b429; background: #fff8e6; }
.piq-setup-pop { --bs-offcanvas-width: 480px; }
.piq-setup-pop.wide { --bs-offcanvas-width: 920px; }
.piq-setup-pop iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.piq-board-cell { font-variant-numeric: tabular-nums; font-size: .85rem; padding: .15rem .5rem; border-radius: .3rem; display: inline-block; min-width: 3.4rem; text-align: center; }
.piq-board-cell.green { background: #d9efe1; color: #1c5b34; }
.piq-board-cell.red { background: #f8d7da; color: #7a1c24; }
.piq-board-cell.grey { background: #eceff2; color: #4d5b68; }

/* ---- admin mapping grid (#331): the filter row reads as search, the add row as a new row ---- */
.map-colfilters input {
  padding-left: 1.6rem; background-color: var(--iq-bg); border-color: var(--iq-border);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85zm-5.242 1.156a5 5 0 1 1 0-10 5 5 0 0 1 0 10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: .5rem center; background-size: .75rem;
}
.map-colfilters input:focus { background-color: #fff; }
tr.map-add-row > td {
  --bs-table-bg: #e8f1f8; --bs-table-bg-type: transparent; --bs-table-bg-state: transparent; --bs-table-accent-bg: transparent;
  background-color: #e8f1f8; border-top: 1px solid #d6dde4; border-bottom: 2px solid #d6dde4;
}
tr.map-add-row > td.map-add-marker-cell { box-shadow: inset 3px 0 0 var(--piq-blue); text-align: center; }
.map-add-marker {
  display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem;
  border-radius: 50%; background: var(--piq-blue); color: #fff; font-weight: 700; font-size: .85rem; line-height: 1;
}
.map-add-cell::placeholder { color: var(--piq-blue-dark); opacity: .7; }
/* #1805: a filter, lens, sort or page change is a full page GET: the grid dims and says so until the next page lands */
.map-grid-busy { opacity: .45; pointer-events: none; }
.map-grid-loading {
  position: fixed; top: 38%; left: 50%; transform: translateX(-50%); z-index: 1040;
  display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: 999px;
  background: var(--piq-blue-dark); color: #fff; font-weight: 600; box-shadow: 0 .25rem .75rem rgba(15, 40, 63, .3);
}
.map-grid-loading[hidden] { display: none; }

/* ---- Budget Entries (#1199, Emily's 10/12 design canvas: docs/specs/2026-10-12-one-budget/proposed.dc.html) ----
   five column groups; the group colours carry into the cells. Cells set --bs-table-bg so the stripes still overlay them. */
.piq-budget-groups th { text-align: center; font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; font-weight: 600; border-bottom: 1px solid #dfe6ec; }
.piq-budget-g-row { color: #67788a; }
.piq-budget-g-daily { --bs-table-bg: #f0f9f3; background-color: #f0f9f3 !important; color: #1d4e32 !important; border-bottom-color: #cfe8d8 !important; }
.piq-budget-g-flags { --bs-table-bg: #EAF2FA; background-color: #EAF2FA !important; color: #0B3C62 !important; border-bottom-color: #c9dcee !important; }
.piq-budget-g-calc { --bs-table-bg: #f4f6f8; background-color: #f4f6f8 !important; color: #5a6672 !important; }
.piq-budget-g-override { --bs-table-bg: #E6F1FB; background-color: #E6F1FB !important; color: #0B3C62 !important; border-bottom-color: #b5d4f4 !important; }
th.piq-budget-c-daily { --bs-table-bg: #f0f9f3; color: #1d4e32; }
th.piq-budget-c-flag { --bs-table-bg: #EAF2FA; color: #0B3C62; }
th.piq-budget-c-calc { --bs-table-bg: #f4f6f8; color: #5a6672; }
th.piq-budget-c-override { --bs-table-bg: #E6F1FB; color: #0B3C62; }
td.piq-budget-c-daily input { text-align: right; min-width: 4.5rem; }
td.piq-budget-c-daily input::placeholder { color: #9aa6b2; opacity: 1; }
td.piq-budget-c-flag { --bs-table-bg: #F3F8FD; }
td.piq-budget-c-flag select { min-width: 5.6rem; }
td.piq-budget-c-flag.piq-budget-on { --bs-table-bg: #FAEEDA; }
td.piq-budget-c-flag.piq-budget-on select { color: #633806; font-weight: 600; }
td.piq-budget-c-calc { --bs-table-bg: #fafbfc; color: #5a6672; font-style: italic; text-align: right; white-space: nowrap; cursor: default; }
td.piq-budget-c-calc.piq-budget-none { color: #9aa6b2; }
td.piq-budget-c-override { --bs-table-bg: #f7fbff; white-space: nowrap; }
td.piq-budget-c-override input { text-align: right; min-width: 4.5rem; }
td.piq-budget-c-override.piq-budget-on input { color: #0B3C62; font-weight: 600; }
.piq-map-clear { font-size: .72rem; text-decoration: none; white-space: nowrap; }
.piq-map-clear[hidden] { display: none; }

/* ---- Platform users (Emily 09/26, #339; docs/specs/2026-09-26-platform-users-*.dc.html) ---- */
.pu-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pu-crumb { font-size: .78rem; color: var(--iq-slate); }
.pu-crumb a { color: var(--iq-slate); text-decoration: none; }
.pu-crumb a:hover { color: var(--piq-blue); }
.pu-title { font-family: 'Poppins', sans-serif; font-size: 1.75rem; font-weight: 600; color: var(--piq-navy); margin: .1rem 0 0; }
.pu-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; border-bottom: 1px solid var(--iq-border); margin: 1rem 0 .75rem; }
.pu-tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: .6rem .25rem; margin-right: 1rem; color: var(--iq-slate); font-weight: 500; }
.pu-tab .n { display: inline-block; margin-left: .35rem; padding: 0 .45rem; border-radius: 999px; background: var(--iq-muted-bg); font-size: .75rem; color: var(--iq-slate-dark); }
.pu-tab.active { color: var(--piq-navy); border-bottom-color: var(--piq-blue); font-weight: 600; }
.pu-tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-left: auto; padding-bottom: .4rem; }
.pu-tools .form-control, .pu-tools .form-select { font-size: .82rem; }
.pu-tools .pu-search { width: 16rem; }
.pu-linkbtn { background: none; border: 0; padding: 0; color: var(--piq-blue); font-size: .82rem; }
.pu-linkbtn:hover { color: var(--piq-navy); text-decoration: underline; }
.pu-summary { font-size: .82rem; color: var(--iq-slate); margin-bottom: .75rem; }
.pu-section { border: 1px solid var(--iq-border); border-radius: 10px; background: #fff; margin-bottom: .6rem; }
.pu-section > summary { list-style: none; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .7rem 1rem; cursor: pointer; }
.pu-section > summary::-webkit-details-marker { display: none; }
.pu-section > summary::before { content: '\25B8'; color: var(--iq-slate); width: .8rem; }
.pu-section[open] > summary::before { content: '\25BE'; }
.pu-section > summary .name { font-weight: 600; color: var(--piq-navy); }
.pu-section > summary .meta { font-size: .8rem; color: var(--iq-slate); }
.pu-section > summary .links { margin-left: auto; font-size: .8rem; }
.pu-section > summary .links a { color: var(--piq-blue); text-decoration: none; }
.pu-section > summary .links a:hover { text-decoration: underline; }
.pu-section .pu-body { border-top: 1px solid var(--iq-border); padding: .25rem 1rem .75rem; }
.pu-pill { display: inline-block; padding: .08rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600; background: var(--iq-muted-bg); color: var(--iq-slate-dark); white-space: nowrap; }
.pu-pill.amber { background: var(--iq-amber-bg); color: #7a4b00; border: 1px solid var(--iq-amber-border); }
.pu-pill.red { background: #fdecec; color: #9b1c1c; }
.pu-pill.green { background: #e6f2ea; color: #1f5a38; }
.pu-table { width: 100%; font-size: .84rem; border-collapse: collapse; }
.pu-table th { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--iq-slate); font-weight: 600; padding: .5rem .5rem; border-bottom: 1px solid var(--iq-border); text-align: left; }
.pu-table td { padding: .55rem .5rem; border-bottom: 1px solid #f0f2f5; vertical-align: middle; }
.pu-table tr:last-child td { border-bottom: 0; }
.pu-table tr.faded td { opacity: .55; }
/* Emily 10/12: a client table keeps its disabled people in one collapsed group at the bottom. The toggle is a
   label over a checkbox (no script); the group also opens on its own while the Status filter reads Disabled. */
.pu-table tbody.pu-disabled { display: none; }
.pu-table .pu-disabled-toggle td { padding-top: .45rem; border-bottom: 0; }
.pu-table .pu-disabled-toggle label { cursor: pointer; margin: 0; }
.pu-table .pu-disabled-toggle .hide { display: none; }
.pu-table:has(.pu-disabled-toggle input:checked) tbody.pu-disabled,
body:has([data-filter="status"] option[value="disabled"]:checked) .pu-table tbody.pu-disabled { display: table-row-group; }
.pu-table:has(.pu-disabled-toggle input:checked) .pu-disabled-toggle .show { display: none; }
.pu-table:has(.pu-disabled-toggle input:checked) .pu-disabled-toggle .hide { display: inline; }
.pu-table:has(.pu-disabled-toggle input:checked) .pu-disabled-toggle td { border-bottom: 1px solid #f0f2f5; }
.pu-name { background: none; border: 0; padding: 0; text-align: left; color: var(--piq-navy); font-weight: 600; }
.pu-name:hover { color: var(--piq-blue); text-decoration: underline; }
.pu-email { display: block; font-size: .76rem; color: var(--iq-slate); }
.pu-chip { display: inline-block; padding: .1rem .5rem; border-radius: 6px; font-size: .74rem; font-weight: 500; background: #eef4fa; color: var(--piq-navy); white-space: nowrap; }
.pu-chip.exec { background: #e3edf7; } .pu-chip.regional { background: #e6f2ea; color: #1f5a38; }
.pu-chip.community { background: #fff4d6; color: #7a4b00; } .pu-chip.department { background: #f1e9f7; color: #5b2d82; }
.pu-chip.reports { background: #e8f4f6; color: #1d5661; } /* #712 Reports only */
.pu-chip.none { background: var(--iq-muted-bg); color: var(--iq-slate); }
.pu-chip.pinned { background: var(--iq-amber-bg); color: #7a4b00; border: 1px solid var(--iq-amber-border); }
.pu-more { font-size: .74rem; color: var(--iq-slate); margin-left: .35rem; }
.pu-groupby { display: flex; align-items: center; gap: .5rem; font-size: .8rem; color: var(--iq-slate); padding-top: .5rem; }
.pu-seg { display: inline-flex; border: 1px solid var(--iq-border); border-radius: 8px; overflow: hidden; }
.pu-seg a, .pu-seg button, .pu-seg span, .pu-seg label { padding: .25rem .8rem; margin: 0; font-size: .8rem; border: 0; background: #fff; color: var(--iq-slate-dark); text-decoration: none; line-height: 1.4; }
.pu-seg > :not(:first-child) { border-left: 1px solid var(--iq-border); }
.pu-seg label { cursor: pointer; }
.pu-seg label:hover:not(.on) { background: var(--iq-muted-bg); }
.pu-seg label:focus-within { outline: 2px solid var(--piq-blue); outline-offset: -2px; }
.pu-seg .on { background: var(--piq-navy); color: #fff; }
.pu-community h3 { font-size: .8rem; font-weight: 600; color: var(--piq-navy); margin: .9rem 0 .25rem; }
.pu-community h3 .sub { font-weight: 400; color: var(--iq-slate); margin-left: .5rem; }
.pu-drawer { --bs-offcanvas-width: 560px; max-width: 100vw; }
.pu-drawer .offcanvas-header { flex-direction: column; align-items: stretch; gap: .35rem; border-bottom: 1px solid #eef1f4; }
.pu-drawer h2 { font-size: 1.45rem; color: var(--piq-navy); margin: 0; font-family: 'Poppins', sans-serif; font-weight: 600; }
.pu-drawer .offcanvas-body { font-size: .85rem; display: flex; flex-direction: column; gap: 1.1rem; }
.pu-drawer h3 { margin: 0 0 .4rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--iq-slate); font-weight: 600; }
.pu-drawer .pu-hint { font-size: .78rem; color: var(--iq-slate); margin-top: .35rem; }
/* #426: the staff invite's directory typeahead, a list under the field being typed */
.pu-drawer .pu-dir-field { position: relative; }
.pu-drawer .pu-dir-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: 2px; max-height: 18rem; overflow-y: auto; box-shadow: 0 6px 18px rgba(15, 40, 63, .12); }
.pu-drawer .pu-dir-list .list-group-item { padding: .4rem .7rem; font-size: .82rem; cursor: pointer; }
.pu-drawer .pu-dir-list .list-group-item.active { background: #eaf1f8; color: var(--piq-navy); border-color: var(--iq-border); }
.pu-drawer .pu-dir-list .pu-dir-sub { display: block; font-size: .74rem; color: var(--iq-slate); }
.pu-drawer .pu-sees { background: #f3f7fb; border-radius: 10px; padding: .7rem .85rem; color: var(--piq-navy); }
.pu-check { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border: 1px solid var(--iq-border); border-radius: 8px; margin-bottom: .35rem; }
.pu-check .pu-chip { margin-left: auto; }
.pu-drawer .offcanvas-footer { padding: .85rem 1.5rem; border-top: 1px solid #eef1f4; background: #f8f9fb; display: flex; align-items: center; gap: .6rem; }
.pu-drawer .pu-pending { margin-left: auto; font-size: .78rem; color: var(--iq-slate); }
.pu-recent { list-style: none; padding: 0; margin: 0; font-size: .78rem; color: var(--iq-slate-dark); }
.pu-recent li { padding: .2rem 0; border-bottom: 1px dashed #eef1f4; }
@media (max-width: 767.98px) {
  .pu-tools { margin-left: 0; width: 100%; }
  .pu-tools .pu-search { width: 100%; }
  .pu-table .pu-hide-sm { display: none; }
  .pu-section .pu-body { overflow-x: auto; }
}

/* ---- Get help launcher (#360): the drawer, the team tiles, the form ---- */
.piq-support-drawer { width: min(720px, 100vw); }
.piq-support-drawer .offcanvas-header { padding: 1rem 1.5rem .5rem; }
.piq-support-drawer .offcanvas-body { padding: .5rem 1.5rem 1.5rem; }
.piq-support-page { max-width: 760px; margin: 0 auto; padding: 1.5rem 1rem 2rem; display: flex; flex-direction: column; gap: 1rem; }
.piq-support-drawer .piq-support-page { max-width: none; padding: 0; }
.piq-support-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.piq-support-eyebrow { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #b8860b; font-weight: 600; }
.piq-support-eyebrow-client { color: var(--piq-navy); }
.piq-support-back { font-size: .85rem; font-weight: 500; text-decoration: none; }
.piq-support-title { font-size: 1.9rem; line-height: 1.15; color: var(--piq-navy); margin: 0; }
.piq-support-sub { margin: 0; color: #45566a; font-size: .95rem; }
.piq-support-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
@media (max-width: 575px) { .piq-support-tiles { grid-template-columns: 1fr; } }
/* John 09/27: two rows, icon + name first, the hint spanning the whole card underneath (it was squeezed beside the icon) */
.piq-support-tile { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: .85rem; row-gap: .45rem; align-items: center; padding: 1rem; border: 1px solid #d9e2ec; border-radius: 12px; background: #fff; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.piq-support-tile:hover, .piq-support-tile:focus-visible { border-color: var(--piq-navy); box-shadow: 0 .25rem .75rem rgba(11,60,98,.12); color: inherit; }
.piq-support-tile-icon { width: 40px; height: 40px; border-radius: 10px; background: #eef4fa; color: var(--piq-navy); display: grid; place-items: center; flex-shrink: 0; }
.piq-support-tile-text { display: contents; }
.piq-support-tile-name { font-weight: 600; line-height: 1.25; color: var(--piq-navy); }
.piq-support-tile-hint { grid-column: 1 / -1; font-size: .82rem; line-height: 1.4; color: #64748b; }
.piq-support-more { display: flex; flex-direction: column; gap: .5rem; padding: .75rem .9rem; border: 1px dashed #c9d3de; border-radius: 10px; }
.piq-support-more-label { font-size: .82rem; font-weight: 600; color: #64748b; }
.piq-support-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.piq-support-chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .9rem; border: 1px solid #c9d3de; border-radius: 20px; background: #fff; font-size: .85rem; color: var(--piq-ink); text-decoration: none; }
.piq-support-chip:hover { border-color: var(--piq-navy); color: var(--piq-navy); }
.piq-support-foot { display: flex; flex-direction: column; gap: .3rem; padding-top: .9rem; border-top: 1px solid #e5e9ef; font-size: .82rem; color: #64748b; margin-top: auto; }
.piq-support-form { display: flex; flex-direction: column; gap: .9rem; }
.piq-support-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.1rem; }
@media (max-width: 575px) { .piq-support-grid { grid-template-columns: 1fr; } }
.piq-support-field { display: flex; flex-direction: column; gap: .3rem; }
.piq-support-field label { font-size: .85rem; font-weight: 600; color: var(--piq-navy); }
.piq-support-field small { font-size: .78rem; color: #64748b; }
.piq-support-optional { font-weight: 400; color: #64748b; }
/* #465: step 1's community picker (the teams follow the community's services once one is picked) */
.piq-support-scope-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.piq-support-scope-row .form-select { flex: 1 1 14rem; width: auto; }
.piq-support-fixed { font-size: .95rem; color: var(--piq-ink); padding: .375rem 0; }
/* #360 Phase 2: the people typeahead and the category suggestion */
.piq-support-people { max-height: 14rem; overflow-y: auto; margin-top: .25rem; }
.piq-support-suggest { margin-top: .5rem; padding: .5rem .75rem; border: 1px solid #e5e9ef; border-radius: .375rem; background: #f8fafc; font-size: .85rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.piq-support-suggest.d-none { display: none !important; }
.piq-support-suggest small { flex-basis: 100%; color: #64748b; }
/* #589 "This might answer it" */
.piq-support-answers { margin: .25rem 0 1rem; padding: .75rem .9rem; border: 1px solid #d6e4f0; border-radius: .5rem; background: #f5f9fc; }
.piq-support-answers.d-none { display: none !important; }
.piq-support-answers-head { font-weight: 600; color: #0B3C62; margin-bottom: .5rem; }
.piq-support-answer { padding: .5rem 0; border-top: 1px solid #e5e9ef; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.piq-support-answer:first-child { border-top: 0; padding-top: 0; }
.piq-support-answer-title { flex-basis: 100%; font-weight: 600; font-size: .9rem; }
.piq-support-answer-body { flex-basis: 100%; margin: 0; font-size: .85rem; color: #334155; }
.piq-support-answer-link { font-size: .85rem; }
.piq-support-answers-actions { margin-top: .5rem; }
.piq-support-requests td, .piq-support-requests th { font-size: .875rem; }
.piq-support-actions { display: flex; align-items: center; gap: .75rem; padding-top: .9rem; border-top: 1px solid #e5e9ef; flex-wrap: wrap; }
.piq-support-actions-start { border-top: 0; padding-top: 0; }
.piq-support-sentas { flex: 1 1 14rem; font-size: .78rem; line-height: 1.4; color: #64748b; }
.piq-support-sent { display: flex; gap: 1.2rem; align-items: flex-start; }
.piq-support-check { width: 56px; height: 56px; border-radius: 50%; background: #e6f4ea; color: #1e7a46; display: grid; place-items: center; flex-shrink: 0; }
.piq-support-summary { border: 1px solid #e5e9ef; border-radius: 12px; overflow: hidden; }
.piq-support-summary > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); padding: .65rem 1.1rem; border-bottom: 1px solid #e5e9ef; font-size: .9rem; }
.piq-support-summary > div:last-child { border-bottom: 0; }
.piq-support-summary > div > span:first-child { color: #64748b; }
.piq-support-summary > div > span:last-child { font-weight: 500; }
.piq-support-done { background: var(--piq-navy); border-color: var(--piq-navy); }

/* ---- the access editor in the user / invite drawers (#339) ---- */
.pu-editor section { margin-bottom: 1rem; }
.pu-editor .pu-h { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.pu-editor .pu-inline-check { display: inline-flex; gap: .35rem; align-items: center; color: var(--iq-slate); cursor: pointer; }
.pu-label { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--iq-slate); font-weight: 600; display: block; margin-bottom: .25rem; }
.pu-seg-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
.pu-seg-4 label { text-align: center; padding: .45rem .3rem; }
/* #712: the tier row gained Reports only (five tiers) */
.pu-seg-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }
.pu-seg-5 label { text-align: center; padding: .45rem .2rem; font-size: .76rem; line-height: 1.25; display: flex; align-items: center; justify-content: center; }
.pu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin-top: .5rem; }
.pu-check.on { border-color: var(--piq-blue); background: #f3f8fc; font-weight: 500; }
.pu-switch { margin-top: .25rem; }
.pu-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.pu-chipcheck { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .7rem; border: 1px solid var(--iq-border); border-radius: 999px; font-size: .8rem; cursor: pointer; }
.pu-chipcheck.on { border-color: var(--piq-blue); background: #f3f8fc; font-weight: 500; }
.pu-chipcheck input:disabled ~ *, .pu-check input:disabled ~ * { opacity: .7; }
.pu-partial { font-size: .7rem; color: var(--iq-slate); }
.pu-community-block { border: 1px solid var(--iq-border); border-radius: 8px; padding: .5rem .75rem; margin-top: .5rem; }
.pu-community-block h4 { font-size: .85rem; font-weight: 600; color: var(--piq-navy); margin: 0; }
.pu-move .form-select { max-width: 18rem; }

/* ==== #450 client navigation (Emily 09/28): Home · Analytics · Schedules on the left; Metric Glossary
   and the Get help pill on the right, before the Procare zone and the account. Kept in one block. ==== */
.piq-navbar .nav-link { white-space: nowrap; }
.piq-nav-tag {
  display: inline-block; margin-left: .4rem; padding: 1px 5px; line-height: 1.4; vertical-align: 2px;
  font-size: .56rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--iq-slate, #5a6b7b); border: 1px solid #c9d3de; border-radius: 4px;
}
.piq-nav-utility { gap: .15rem; }
.piq-navbar .piq-nav-glossary { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; }
.piq-nav-help {
  display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap;
  padding: .4rem .9rem; margin-left: .35rem; border: 1.5px solid var(--piq-blue); border-radius: 999px;
  background: #fff; color: var(--piq-blue); font-weight: 500; font-size: .9rem; text-decoration: none;
}
.piq-nav-help:hover, .piq-nav-help:focus { background: #eef5fc; color: var(--piq-blue); }
.piq-nav-account-rule { width: 1px; height: 22px; background: #d7dee6; align-self: center; margin: 0 .35rem 0 1rem; }
@media (min-width: 576px) {
  /* the staff bar fits 1440 wide on one line (ruling 8). The mockups' 15px / 14px type does not fit
     beside the Procare zone at that width, so the bar runs a size smaller: page links 14px, utilities,
     the zone and the account 13px. Narrower than that, the lists wrap to a second row instead of
     pushing the page sideways. */
  .piq-navbar .navbar-collapse { align-items: center; flex-wrap: wrap; }
  .piq-navbar .navbar-brand { margin-right: .4rem; }
  .piq-navbar .navbar-nav:not(.piq-nav-staff) > .nav-item > .nav-link { padding-left: .36rem; padding-right: .36rem; font-size: .875rem; }
  .piq-navbar .navbar-nav > .nav-item > .nav-link.piq-nav-scorecards { display: flex; align-items: center; }
  .piq-nav-tag { margin-left: .3rem; padding: 0 4px; letter-spacing: .06em; font-size: .5rem; }
  .piq-navbar .navbar-nav:not(.piq-nav-staff) > .nav-item > .nav-link.piq-nav-glossary { font-size: .8125rem; gap: .4rem; }
  .piq-nav-help { font-size: .8125rem; padding: .33rem .7rem; gap: .4rem; margin-left: .2rem; }
  .piq-nav-staff { margin-left: .7rem; padding: 0 .2rem 0 .55rem; }
  .piq-nav-staff-label { margin-right: .15rem; }
  .piq-navbar .piq-nav-staff .nav-link { padding-left: .34rem; padding-right: .34rem; font-size: .8125rem; }
  .piq-navbar .piq-nav-staff .dropdown-toggle::after { margin-left: .2em; }
  .piq-navbar .navbar-nav:not(.piq-nav-staff) > .nav-item > .nav-link.piq-nav-email { font-size: .8125rem; max-width: 20rem; overflow: hidden; text-overflow: ellipsis; }
  /* beside the zone, a long address ends in an ellipsis rather than wrapping the bar */
  .piq-navbar .piq-nav-staff ~ .navbar-nav > .nav-item > .nav-link.piq-nav-email { max-width: 10.5rem; }
  .piq-navbar .navbar-nav .nav-link.piq-nav-signout { font-size: .8125rem; padding-left: .4rem; padding-right: .4rem; }
}
@media (min-width: 576px) and (max-width: 1199.98px) {
  /* a laptop-width client bar keeps one row: the address gives way first */
  .piq-navbar .navbar-nav:not(.piq-nav-staff) > .nav-item > .nav-link.piq-nav-email { max-width: 10rem; }
}
@media (max-width: 575.98px) {
  /* ruling 10: Home, Analytics, Schedules, a rule, Metric Glossary, Get help as a full-width pill, a rule, the account */
  .piq-navbar .navbar-nav:not(.piq-nav-staff) > .nav-item > .nav-link { min-height: 48px; display: flex; align-items: center; }
  .piq-nav-rule { height: 1px; background: #e3e8ee; margin: .5rem 0; list-style: none; }
  .piq-nav-help { display: flex; justify-content: center; width: 100%; min-height: 48px; margin: .35rem 0 .25rem; font-size: .95rem; }
}

/* ---- Workforce Analytics home (#797; Emily 09/30, docs/specs/2026-09-30-mapping-audit-wa-home-mockup.dc.html and the
   phone board). The /today hero, strip and panels, plus: two equal half-width cards per row, the audit's red / green
   pills, list rows, the Mine / Team queue switch and the empty fourth slot. Phone: the fifth hero number, the audit rows
   past the third and the empty slot step aside, as the phone board draws it. */
.piq-fixed-row.piq-row-half { grid-template-columns: repeat(2, minmax(0, 1fr)); --piq-row-h: 400px; }
@media (max-width: 991.98px) { .piq-fixed-row.piq-row-half { grid-template-columns: minmax(0, 1fr); height: auto; } .piq-row-half > .piq-slot { display: none; } }
.piq-hero-number .v.salmon { color: #ff9b8f; }
div.piq-hero-number:hover { background: rgba(255,255,255,.08); }
.piq-tally { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.piq-tally.red { background: #fdecea; color: #b42318; }
.piq-tally.amber { background: #fdf3d8; color: #7a5200; }
.piq-tally.grey { background: #eef1f5; color: #3e5163; }
.piq-tally.green { background: #e6f2ea; color: #1e4d2f; }
.piq-line-row { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 6px 1.1rem; border-top: 1px solid #eef1f5; font-size: .84rem; color: var(--piq-ink); text-decoration: none; }
.piq-line-row:first-child { border-top: 0; }
a.piq-line-row:hover { background: #f8f9fb; color: var(--piq-ink); }
.piq-line-row .main { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.piq-line-row .sub { display: block; font-size: .75rem; color: var(--iq-slate); }
.piq-all-mapped { padding: 10px 1.1rem; border-top: 1px solid #b9dcc5; background: #e6f2ea; font-size: .75rem; color: #1e4d2f; }
.piq-seg { display: inline-flex; border: 1px solid #c9d1db; border-radius: 6px; overflow: hidden; }
.piq-seg button { padding: 4px 12px; border: 0; background: #fff; color: #3e5163; font-size: .75rem; cursor: pointer; }
.piq-seg button + button { border-left: 1px solid #c9d1db; }
.piq-seg button[aria-pressed="true"] { background: var(--piq-navy); color: #fff; font-weight: 500; }
.piq-seg button:focus-visible { outline: 3px solid var(--piq-gold); outline-offset: -3px; }
.piq-case-bar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: .4rem .75rem; flex-wrap: wrap; padding: .45rem 1.1rem; border-bottom: 1px solid #eef1f4; }
.piq-slot { display: flex; align-items: center; justify-content: center; min-height: 0; border: 1px dashed #c9d1db; border-radius: 12px; font-size: .85rem; color: var(--iq-slate); text-align: center; padding: 24px; }
.piq-phone-only { display: none !important; }
@media (max-width: 575.98px) {
  .piq-phone-hide { display: none !important; }
  .piq-phone-only { display: flex !important; }
}

/* #844 ruling 2: the calm wait while a dashboard nobody opened lately is built (dashboard-core.js paintWait) */
.iq-build-wait { max-width: 34rem; margin: 3.5rem auto; padding: 0 1rem; text-align: center; color: var(--iq-slate-dark, #45566a); }
.iq-build-wait p { margin: .875rem 0 0; line-height: 1.5; }
.iq-build-wait .iq-build-wait-title { margin-top: 0; color: var(--piq-navy); font-weight: 600; font-size: 1.0625rem; }
.iq-build-wait .iq-build-wait-title + p { margin-top: .25rem; }
.iq-build-spinner { color: var(--piq-navy); width: 2.25rem; height: 2.25rem; border-width: .2em; }

/* #1537: a Your tools tile whose page is not built yet (the Payroll Operations home, part 1) says what the tool is and does not
   link, so it does not lift on hover */
.piq-strip-tile.piq-strip-tile-off { cursor: default; background: #f6f8fb; }
.piq-strip-tile.piq-strip-tile-off:hover { border-color: #cfd8e3; box-shadow: 0 1px 2px rgba(11,60,98,.08); transform: none; }
.piq-hero-number .v.piq-not-synced { font-size: 1rem; line-height: 1.3; font-weight: 500; opacity: .85; }

/* #1588 (Emily 10/21, docs/specs/2026-10-21-failed-emails-toggle): the Workforce Analytics home's failed-emails number opens its
   list under the hero. The tile is a label around a checkbox and the list shows while it is ticked: no script. Each reason is a
   <details>, its fix link on the right; the people sit in a small table under it. */
.piq-hero-toggle { cursor: pointer; position: relative; }
.piq-toggle-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.piq-hero-toggle:has(.piq-toggle-input:focus-visible) { outline: 3px solid var(--piq-gold); outline-offset: 2px; }
.piq-hero-toggle:has(.piq-toggle-input:checked) { background: rgba(255,255,255,.16); }
.piq-hero-toggle-cue { font-size: .68rem; color: rgba(255,255,255,.85); text-decoration: underline; text-underline-offset: 2px; }
.piq-hero-toggle .when-open, .piq-wa-failed { display: none; }
.piq-hero-toggle:has(.piq-toggle-input:checked) .when-open { display: inline; }
.piq-hero-toggle:has(.piq-toggle-input:checked) .when-closed { display: none; }
body:has(#wa-failed-toggle:checked) .piq-wa-failed { display: block; }
.piq-wa-failed { background: #f6f8fb; border-bottom: 1px solid #e3e8ee; }
.piq-failed-close { cursor: pointer; font-size: .8rem; color: #1B76BC; text-decoration: underline; text-underline-offset: 2px; }
.piq-failed-close:hover { color: var(--piq-navy); }
.piq-failed-group { border-top: 1px solid #eef1f5; }
.piq-failed-group:first-child { border-top: 0; }
.piq-failed-group > summary { display: flex; align-items: center; gap: 10px; padding: 10px 1.1rem; cursor: pointer; list-style: none; }
.piq-failed-group > summary::-webkit-details-marker { display: none; }
.piq-failed-group > summary::before { content: "\25B8"; flex-shrink: 0; color: var(--iq-slate); transition: transform .15s; }
.piq-failed-group[open] > summary::before { transform: rotate(90deg); }
.piq-failed-group > summary:hover { background: #f6f9fc; }
.piq-failed-group > summary:focus-visible { outline: 3px solid var(--piq-gold); outline-offset: -3px; }
.piq-failed-group .main { flex: 1 1 auto; min-width: 0; line-height: 1.3; color: var(--piq-ink); }
.piq-failed-group .main .t { display: block; font-weight: 600; }
.piq-failed-group .main .sub { display: block; font-size: .75rem; color: var(--iq-slate); }
.piq-failed-fix { flex-shrink: 0; padding: 4px 12px; border: 1px solid var(--piq-navy); border-radius: 6px; font-size: .75rem; color: var(--piq-navy); text-decoration: none; white-space: nowrap; }
.piq-failed-fix:hover { background: var(--piq-navy); color: #fff; }
.piq-failed-how { margin: 0 1.1rem 6px 2.6rem; font-size: .78rem; color: #3e5163; }
.piq-failed-group .table-responsive { padding: 0 1.1rem 12px 2.6rem; }
.piq-failed-table { font-size: .8rem; }
.piq-failed-table th { font-size: .7rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--iq-slate); }

/* ==== #1565 (John 10/21): the band widgets behind Employee Engagement's look (docs/specs/2026-10-21-employee-engagement-
   visuals, Rohail's 09/30 design), drawn in IQ's own tokens: the tiles' verdict colours (--iq-good / --iq-watch / --iq-bad),
   IQ's slate and navy, Poppins. Generic: any payload that sends the widgets gets them; nothing here names a dashboard. ==== */
:root {
  --iq-bad-fill: #d9483b; --iq-watch-fill: #e09a2b; --iq-good-fill: #23a26d; --iq-neutral-fill: #a3afbf; --iq-info-fill: #1b76bc;
  --iq-info: #145a91; --iq-info-bg: #e8f1fa; --iq-neutral: #5b6b7c; --iq-neutral-bg: #eef1f5;
}
.iq-tone-fill-needs-look { background: var(--iq-bad-fill); }
.iq-tone-fill-watch { background: var(--iq-watch-fill); }
.iq-tone-fill-on-target { background: var(--iq-good-fill); }
.iq-tone-fill-neutral { background: var(--iq-neutral-fill); }
.iq-tone-fill-info { background: var(--iq-info-fill); }
.iq-tone-text { font-weight: 700; font-variant-numeric: tabular-nums; }
.iq-tone-text.iq-tone-needs-look { color: var(--iq-bad); }
.iq-tone-text.iq-tone-watch { color: var(--iq-watch); }
.iq-tone-text.iq-tone-on-target { color: var(--iq-good); }
.iq-tone-text.iq-tone-info { color: var(--iq-info); }
.iq-tone-text.iq-tone-neutral { color: var(--iq-neutral); }

/* the mix bar: red / amber / green at their share of the scored count */
.iq-mixbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--iq-neutral-bg); }
.iq-mixbar > span { height: 100%; }
.iq-mixbar-tile { margin-top: .55rem; height: 9px; }
.iq-kpi-tiles-2 .iq-mixbar-tile, .iq-kpi-tiles-1 .iq-mixbar-tile { height: 12px; }
.iq-mixbar-cell { width: 88px; flex: 0 0 88px; }
.iq-band-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .75rem; padding-top: .65rem; border-top: 1px solid var(--iq-border, #e5e9ef); font-size: .78rem; color: var(--iq-slate, #64748b); }
.iq-band-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .35rem; vertical-align: 1px; }

/* marked table cells */
.iq-band-table { --bs-table-bg: #fff; }
.iq-band-table > thead th { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--iq-slate, #64748b); font-weight: 600; background: #f8fafc; border-bottom: 1px solid var(--iq-border, #e5e9ef); white-space: nowrap; }
.iq-band-table > tbody td { vertical-align: middle; padding-top: .6rem; padding-bottom: .6rem; border-color: #eef1f5; }
.iq-band-table > tbody tr.iq-drillable:hover > td { background: #eef5fb; }
.iq-band-table > tbody tr.iq-drillable:focus-visible { outline: 2px solid var(--piq-blue); outline-offset: -2px; }
.iq-band-table td.iq-cell-rank { color: #93a0b4; font-size: .82rem; font-variant-numeric: tabular-nums; width: 2.4rem; }
.iq-cell-sub { font-size: .78rem; color: var(--iq-slate, #64748b); font-weight: 400; }
.iq-cell-mix { display: inline-flex; align-items: center; gap: .5rem; }
.iq-cell-pill { display: inline-block; font-size: .72rem; font-weight: 600; border-radius: 999px; padding: .16rem .55rem; white-space: nowrap; }
.iq-cell-pill.iq-tone-needs-look { background: var(--iq-bad-bg); color: var(--iq-bad); }
.iq-cell-pill.iq-tone-watch { background: var(--iq-watch-bg); color: var(--iq-watch); }
.iq-cell-pill.iq-tone-on-target { background: var(--iq-good-bg); color: var(--iq-good); }
.iq-cell-pill.iq-tone-info { background: var(--iq-info-bg); color: var(--iq-info); }
.iq-cell-pill.iq-tone-neutral { background: var(--iq-neutral-bg); color: var(--iq-neutral); }
.iq-cell-tag { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border-radius: 5px; padding: .16rem .45rem; white-space: nowrap; }
.iq-cell-tag.iq-tone-needs-look { background: var(--iq-bad-bg); color: var(--iq-bad); }
.iq-cell-tag.iq-tone-watch { background: var(--iq-watch-bg); color: var(--iq-watch); }
.iq-cell-tag.iq-tone-on-target { background: var(--iq-good-bg); color: var(--iq-good); }
.iq-cell-tag.iq-tone-info { background: var(--iq-info-bg); color: var(--iq-info); }
.iq-cell-tag.iq-tone-neutral { background: var(--iq-neutral-bg); color: var(--iq-neutral); }
.iq-cell-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 7px; border-radius: 6px; font-weight: 700; font-size: .78rem; font-variant-numeric: tabular-nums; }
.iq-cell-badge.iq-tone-needs-look { background: var(--iq-bad-bg); color: var(--iq-bad); }
.iq-cell-badge.iq-tone-watch { background: var(--iq-watch-bg); color: var(--iq-watch); }
.iq-cell-badge.iq-tone-on-target { background: var(--iq-good-bg); color: var(--iq-good); }
.iq-cell-badge.iq-tone-info { background: var(--iq-info-bg); color: var(--iq-info); }
.iq-cell-badge.iq-tone-neutral { background: #f4f6fa; color: #93a0b4; font-weight: 600; }

/* the find box and the filter chips */
.iq-panel-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.iq-panel-head > h6 { margin-right: auto; }
.iq-table-find { position: relative; margin: 0; }
.iq-table-find span { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--iq-slate, #64748b); }
.iq-table-find input { border: 1px solid var(--iq-border, #e5e9ef); border-radius: 999px; padding: .32rem .85rem .32rem 1.8rem; font-size: .84rem; min-width: 200px; background: #fff; }
.iq-filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .35rem 0 .65rem; }
.iq-filter-label { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--iq-slate, #64748b); margin-right: .2rem; }
.iq-chip { border: 1px solid var(--iq-border, #e5e9ef); background: #fff; color: var(--iq-slate-dark, #45566a); font-weight: 600; font-size: .8rem; border-radius: 999px; height: 28px; padding: 0 .8rem; }
.iq-chip.iq-tone-needs-look { color: var(--iq-bad); border-color: #f0c2c0; }
.iq-chip.iq-tone-watch { color: var(--iq-watch); border-color: #f0d6a8; }
.iq-chip.iq-tone-on-target { color: var(--iq-good); border-color: #cfe8d9; }
.iq-chip.iq-tone-info { color: var(--iq-info); border-color: #c5dcf0; }
.iq-chip.is-on { color: #fff; }
.iq-chip.is-on.iq-tone-needs-look { background: var(--iq-bad-fill); border-color: var(--iq-bad-fill); }
.iq-chip.is-on.iq-tone-watch { background: var(--iq-watch-fill); border-color: var(--iq-watch-fill); }
.iq-chip.is-on.iq-tone-on-target { background: var(--iq-good-fill); border-color: var(--iq-good-fill); }
.iq-chip.is-on.iq-tone-info { background: var(--iq-info-fill); border-color: var(--iq-info-fill); }
.iq-chip.is-on.iq-tone-neutral { background: var(--piq-navy); border-color: var(--piq-navy); }

/* #1725: sortable headers, the filter row under them, the visible-row count and a row that opens a page */
.iq-panel-head > h6:has(+ .iq-table-count) { margin-right: 0; }
.iq-panel-head > .iq-table-count { margin-right: auto; font-size: .78rem; color: var(--iq-slate, #64748b); white-space: nowrap; }
.iq-band-table > thead th.iq-sortable { cursor: pointer; user-select: none; }
.iq-band-table > thead th.iq-sortable:hover, .iq-band-table > thead th.iq-sortable:focus-visible { color: var(--piq-navy); outline: none; }
.iq-sort-arrow::after { content: "\2195"; margin-left: .3rem; opacity: .35; }
th[aria-sort="ascending"] > .iq-sort-arrow::after { content: "\25B2"; opacity: 1; }
th[aria-sort="descending"] > .iq-sort-arrow::after { content: "\25BC"; opacity: 1; }
.iq-band-table > thead .iq-filter-row > th { padding: .15rem .3rem .5rem; background: #fff; text-transform: none; letter-spacing: 0; font-weight: 400; }
.iq-col-filter { width: 100%; min-width: 4.5rem; font-size: .78rem; font-weight: 400; color: var(--iq-slate-dark, #45566a); border: 1px solid var(--iq-border, #e5e9ef); border-radius: 6px; padding: .18rem .4rem; background: #fff; }
.iq-col-filter:focus { outline: none; border-color: var(--piq-blue); }
.iq-band-table > tbody tr.iq-row-link > td.iq-row-link-cell { color: var(--piq-navy); font-weight: 600; }
/* #1728 (the v5 mockup): a linked row's visible link at its right edge ("Open client"), and a row's status dot before its first cell */
.iq-band-table td.iq-row-open { text-align: right; white-space: nowrap; vertical-align: middle; }
.iq-row-open-link { font-size: .78rem; font-weight: 600; color: var(--piq-blue, #1f6fb2); text-decoration: none; }
.iq-row-open-link:hover, .iq-row-open-link:focus-visible { text-decoration: underline; }
.iq-row-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: .45rem; vertical-align: .05em; background: var(--iq-neutral-fill); }
.iq-row-dot.iq-tone-needs-look { background: var(--iq-bad-fill); box-shadow: 0 0 0 3px var(--iq-bad-bg); }
.iq-row-dot.iq-tone-watch { background: var(--iq-watch-fill); }
.iq-row-dot.iq-tone-on-target { background: var(--iq-good-fill); }
.iq-row-dot.iq-tone-info { background: var(--iq-info-fill); }

/* a view group: Table · Map · Impact, on the active card's title line */
.iq-view-group { position: relative; }
.iq-view-switch { position: absolute; top: .6rem; right: calc(var(--bs-gutter-x, 1.5rem) * .5 + .75rem); z-index: 2; display: flex; gap: 2px; padding: 3px; background: #fff; border: 1px solid var(--iq-border, #e5e9ef); border-radius: 10px; }
.iq-view-switch > button { border: 0; background: transparent; color: var(--iq-slate-dark, #45566a); font-weight: 600; font-size: .82rem; border-radius: 8px; padding: .3rem .75rem; }
.iq-view-switch > button.is-on { background: #f4f7fb; color: var(--piq-navy); box-shadow: 0 1px 2px rgba(18, 38, 63, .08); }
.iq-view-group .iq-view-pane .card-body > .iq-panel-head, .iq-view-group .iq-view-pane .card-body > h6:first-child { padding-right: 15rem; min-height: 2rem; }
@media (max-width: 767.98px) {
  .iq-view-switch { position: static; margin: 0 0 .5rem auto; width: max-content; }
  .iq-view-group .iq-view-pane .card-body > .iq-panel-head, .iq-view-group .iq-view-pane .card-body > h6:first-child { padding-right: 0; }
}

/* a scatter: the quadrant map */
.iq-quad-wrap { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.iq-quad-wrap.has-notes { grid-template-columns: minmax(0, 38rem) minmax(15rem, 1fr); }
@media (max-width: 899.98px) { .iq-quad-wrap.has-notes { grid-template-columns: minmax(0, 1fr); } }
/* John 10/22: a square plot (equal quadrants, the split lines centred by the server), its axis names and ticks outside it */
.iq-quad-frame { display: grid; grid-template-columns: 1.1rem 0 minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: .2rem; width: 100%; max-width: 38rem; }
.iq-quad-frame.has-ticks { grid-template-columns: 1.1rem 2.1rem minmax(0, 1fr); }
.iq-quad-ticks { position: relative; font-size: .62rem; color: #93a0b4; }
.iq-quad-ticks > span { position: absolute; white-space: nowrap; }
.iq-quad-ticks.is-y { grid-column: 2; grid-row: 1; }
.iq-quad-ticks.is-y > span { right: .15rem; transform: translateY(-50%); }
.iq-quad-ticks.is-x { grid-column: 3; grid-row: 2; }
.iq-quad-frame.has-ticks .iq-quad-ticks.is-x { height: 1.15rem; }
.iq-quad-ticks.is-x > span { top: .2rem; transform: translateX(-50%); }
.iq-quad { grid-column: 3; grid-row: 1; aspect-ratio: 1 / 1; position: relative; border: 1px solid var(--iq-border, #e5e9ef); border-radius: 10px; overflow: hidden;
  background:
    linear-gradient(to right, transparent var(--split-x), rgba(27, 118, 188, .06) var(--split-x)),
    linear-gradient(to bottom, transparent var(--split-y), rgba(217, 72, 59, .07) var(--split-y)), #f8fafc; }
.iq-quad::before, .iq-quad::after { content: ""; position: absolute; background: #dfe5ec; }
.iq-quad::before { left: var(--split-x); top: 0; bottom: 0; width: 1px; }
.iq-quad::after { top: var(--split-y); left: 0; right: 0; height: 1px; }
.iq-quad-word { position: absolute; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #93a0b4; z-index: 1; }
.iq-quad-word.is-tl { top: .7rem; left: .85rem; }
.iq-quad-word.is-tr { top: .7rem; right: .85rem; }
.iq-quad-word.is-bl { bottom: .7rem; left: .85rem; }
.iq-quad-word.is-br { bottom: .7rem; right: .85rem; }
.iq-quad-word.iq-tone-on-target { color: var(--iq-good); }
.iq-quad-word.iq-tone-needs-look { color: var(--iq-bad); }
.iq-quad-axis { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #93a0b4; white-space: nowrap; }
.iq-quad-axis.is-y { grid-column: 1; grid-row: 1; align-self: center; justify-self: center; writing-mode: vertical-rl; transform: rotate(180deg); }
.iq-quad-axis.is-x { grid-column: 3; grid-row: 3; text-align: center; padding-top: .15rem; }
.iq-quad-dot { position: absolute; z-index: 2; padding: 0; border: 0; background: transparent; transform: translate(-7px, -7px); display: flex; align-items: center; gap: 4px; cursor: default; }
.iq-quad-dot.iq-drillable { cursor: pointer; }
.iq-quad-dot > i { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--dot); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(18, 38, 63, .25); }
.iq-quad-dot > span { font-size: .66rem; font-weight: 600; color: var(--piq-navy); background: rgba(255, 255, 255, .85); padding: 0 4px; border-radius: 3px; white-space: nowrap; }
.iq-quad-dot:hover { z-index: 3; }
.iq-quad-dot:hover > span { background: #fff; box-shadow: 0 1px 3px rgba(18, 38, 63, .18); }
.iq-quad-notes { display: flex; flex-direction: column; gap: 1rem; padding: .25rem .1rem; }
.iq-quad-note { display: flex; gap: .55rem; font-size: .84rem; color: var(--iq-slate-dark, #45566a); line-height: 1.4; }
.iq-quad-note > i { flex: 0 0 8px; height: 8px; border-radius: 50%; margin-top: .35rem; }
.iq-quad-note strong { display: block; color: var(--piq-navy); }

/* a page opened in place: the way back */
.iq-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .86rem; margin: 0 0 .6rem; }
.iq-crumbs a { color: var(--piq-blue); font-weight: 600; text-decoration: none; }
.iq-crumbs a:hover { color: var(--piq-navy); }
.iq-crumb-sep { color: #93a0b4; }
.iq-crumb-here { color: var(--piq-navy); font-weight: 600; }

/* one thing's page: header, band cards, banner, evidence, side card */
.iq-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.iq-detail-head h4 { color: var(--piq-navy); font-weight: 700; }
.iq-detail-badges { display: flex; gap: .65rem; }
.iq-detail-badge { border: 1px solid var(--iq-border, #e5e9ef); border-radius: 10px; padding: .5rem .8rem .6rem; min-width: 8.5rem; background: #fff; }
.iq-detail-badge-label { font-size: .66rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--iq-slate, #64748b); margin-bottom: .35rem; }
.iq-detail-badge.iq-tone-needs-look { background: var(--iq-bad-bg); border-color: #f0c2c0; }
.iq-detail-badge.iq-tone-watch { background: var(--iq-watch-bg); border-color: #f0d6a8; }
.iq-detail-badge.iq-tone-on-target { background: var(--iq-good-bg); border-color: #cfe8d9; }
.iq-detail-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; border: 1px solid var(--iq-border, #e5e9ef); border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem; background: var(--iq-neutral-bg); }
.iq-detail-banner > p { margin: 0; flex: 1 1 14rem; color: var(--piq-ink); }
.iq-detail-banner.iq-tone-needs-look { background: var(--iq-bad-bg); border-color: #f0c2c0; }
.iq-detail-banner.iq-tone-watch { background: var(--iq-watch-bg); border-color: #f0d6a8; }
.iq-detail-banner.iq-tone-on-target { background: var(--iq-good-bg); border-color: #cfe8d9; }
.iq-detail-banner.iq-tone-info { background: var(--iq-info-bg); border-color: #c5dcf0; }
.iq-detail-tag { color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: .3rem .7rem; background: var(--iq-neutral-fill); }
.iq-tone-needs-look > .iq-detail-tag { background: var(--iq-bad-fill); }
.iq-tone-watch > .iq-detail-tag { background: var(--iq-watch-fill); }
.iq-tone-on-target > .iq-detail-tag { background: var(--iq-good-fill); }
.iq-tone-info > .iq-detail-tag { background: var(--iq-info-fill); }
.iq-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-left: auto; }
.iq-detail-btn { background: #fff; color: var(--piq-navy); border: 1px solid #d9e0ea; border-radius: 999px; font-weight: 600; padding: .3rem .95rem; }
.iq-detail-btn:hover { border-color: var(--piq-navy); }
.iq-detail-dismiss { flex-basis: 100%; max-width: 22rem; }
.iq-detail-recorded { color: var(--iq-good); font-weight: 700; }
.iq-detail-aside { margin-left: auto; font-size: .84rem; color: var(--iq-slate, #64748b); }
.iq-detail-actions .iq-detail-aside { margin-left: 0; }
.iq-detail-card { border: 1px solid var(--iq-border, #e5e9ef); border-radius: 12px; box-shadow: none !important; height: 100%; }
.iq-detail-card-title { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--iq-slate, #64748b); margin-bottom: .75rem; }
.iq-detail-evidence { list-style: none; margin: 0; padding: 0; }
.iq-detail-evidence > li { padding: .7rem 0; border-bottom: 1px solid #f0f3f6; }
.iq-detail-evidence > li:last-child { border-bottom: 0; }
.iq-detail-item-title { font-weight: 700; color: var(--piq-navy); }
.iq-detail-item-tag { margin-left: .3rem; font-size: .66rem; }
.iq-detail-item-figure { font-variant-numeric: tabular-nums; margin-top: .2rem; }
.iq-detail-item-note { font-size: .84rem; color: var(--iq-slate, #64748b); margin-top: .2rem; }
.iq-detail-quote { margin-top: .4rem; }
.iq-detail-quote summary { font-size: .78rem; color: var(--iq-slate, #64748b); cursor: pointer; }
.iq-detail-quote blockquote { margin: .35rem 0 0; padding: .5rem .7rem; background: #f6f8fb; border-left: 3px solid #d5dde7; border-radius: 0 8px 8px 0; font-size: .88rem; color: #3d4d5c; }
.iq-detail-side-text { line-height: 1.5; }
.iq-detail-list-title { font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--iq-slate, #64748b); margin: .9rem 0 .4rem; }
.iq-detail-list { padding-left: 1.1rem; margin: 0; }
.iq-detail-list > li { margin-bottom: .35rem; }
.iq-detail-foot { font-size: .78rem; color: var(--iq-slate, #64748b); margin: 1rem 0 0; line-height: 1.4; }
.iq-panel-head > h6 > .btn-link { float: none !important; margin-left: .6rem; vertical-align: baseline; font-size: .8rem; }
.iq-detail-error { font-size: .8rem; color: var(--iq-bad); }

/* ---- Labor Results (#1728, Emily's v5 mockup) ----
   The navy hero and the grey filter band are the view's (Views/LaborResults/Index.cshtml); the payload under them is the
   renderer's as on every dashboard, minus its title line and date strip, which the hero replaces on this page only (the web
   payload's header says hideOnWeb, so dashboard-core.js draws neither). The PDF prints the payload's own header. Tokens as the
   hero on the Workforce Analytics home. */
.piq-hero.lr-hero { border-radius: 12px 12px 0 0; padding: 1.5rem 1.5rem 1.4rem; margin-bottom: 0; }
.lr-hero .piq-hero-muted { color: rgba(255,255,255,.7); }
.lr-hero .piq-hero-left { flex: 1 1 22rem; min-width: 0; }
.lr-hero-title { font-size: 2rem; font-weight: 400; line-height: 1.1; margin: 0; color: #fff; }
.lr-hero-sub { font-size: .82rem; color: rgba(255,255,255,.75); }
.lr-hero .piq-hero-numbers { width: min(640px, 100%); flex: 0 1 640px; }
.lr-hero .piq-hero-number { container-type: inline-size; min-width: 0; }
/* the number shrinks to its tile between 0.95rem and 1.55rem instead of breaking "$8,931,439" across two lines */
.lr-hero .piq-hero-number .v { font-size: clamp(.95rem, 15cqw, 1.55rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
.piq-hero-number .v.mint { color: #9fe0b8; }
.lr-band { background: var(--iq-band, #f3f5f7); border: 1px solid var(--iq-border, #e5e9ef); border-top: 0; border-radius: 0 0 12px 12px; padding: .75rem 1.25rem; }
.lr-sel { display: inline-flex; align-items: center; gap: .4rem; }
.lr-sel-label { font-size: .78rem; color: var(--iq-slate, #64748b); }
.lr-chip { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid #cfd8e3; border-radius: 8px; padding: .3rem .7rem; font-size: .82rem; color: var(--piq-ink); }
@media (max-width: 575.98px) { .piq-hero.lr-hero { padding: 1.25rem 1rem 1.1rem; } .lr-band { border-radius: 0 0 8px 8px; } }

/* #1959 Stakeholder Management (Emily 11/10): recency chips (green within 30 days, amber 31-90, red over 90 or never),
   the Who line, outreach type chips. Colours differ in lightness as well as hue. */
.piq-sh-chip { display: inline-block; border-radius: 12px; padding: 1px 10px; font-weight: 500; font-size: .8125rem; white-space: nowrap; }
.piq-sh-green { background: #e6f4ec; color: #1e6b45; }
.piq-sh-amber { background: #fff4d6; color: #8a5a00; }
.piq-sh-red { background: #fdecea; color: #b42318; }
.piq-sh-green-text { color: #1e6b45; }
.piq-sh-amber-text { color: #8a5a00; }
.piq-sh-red-text { color: #b42318; }
.piq-sh-navy { color: var(--piq-navy); }
.piq-sh-who { background: #eff5fb; border: 1px solid #c9dcee; border-radius: 8px; padding: .25rem .5rem .25rem 1rem; color: var(--piq-navy); }
.piq-sh-kind-email { background: #eff5fb; color: var(--piq-navy); }
.piq-sh-kind-talk { background: #e6f4ec; color: #1e6b45; }
.piq-sh-kind-other { background: #f2f0eb; color: var(--piq-ink); }
.piq-sh-tag { background: #f2f0eb; color: var(--piq-ink); border-radius: 12px; padding: 2px 10px; font-size: .75rem; }
.piq-sh-tag-group { background: #eff5fb; color: var(--piq-navy); font-weight: 500; }
.piq-sh-table thead th { background: var(--piq-navy); color: #fff; font-weight: 500; }
.piq-sh-table tr.piq-sh-day td { border-top: 1px solid #dcd7ce; }
/* #1959 ruling 17: the red 14-day tile (Emily 11/10) */
.piq-sh-t14 { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: 10px;
  border: 2px solid #b42318; background: #fdecea; color: #b42318; text-decoration: none; }
.piq-sh-t14:hover { color: #b42318; text-decoration: none; }
.piq-sh-t14-v { font-size: 2.1rem; font-weight: 600; line-height: 1; }
.piq-sh-t14-l { flex: 1 1 260px; color: var(--piq-ink); }
.piq-sh-t14-l strong { color: #b42318; }
.piq-sh-t14-a { font-weight: 500; text-decoration: underline; }
.piq-sh-t14.on { background: #b42318; color: #fff; }
.piq-sh-t14.on .piq-sh-t14-l, .piq-sh-t14.on .piq-sh-t14-l strong { color: #fff; }