/* PERKS ↔ Helium V2.6.5 bridge — the ONLY PERKS stylesheet on the Helium-native screens.
 * Loaded last, after the original Helium cascade (SGOR_Helium). It adds no component system: every rule below is a
 * documented adaptation where WordPress/PERKS needs something the reference pages don't have
 * (links instead of demo buttons, real data in hard-coded demo charts, a SG Organic brand mark, group labels in the
 * navigation list, 44 px targets, tables wider than the reference specimen). Colours come from Helium variables only.
 * See docs/HELIUM-COMPONENT-AUDIT.md §4 for the list and the reason for each adaptation.
 */

/* A1 — links rendered with Helium button/card anatomy keep the anatomy's colour (reference uses <button>). */
.perks-helium :is(a.stat-card,a.activity-row,a.category-item,a.health-action-card,a.challenge-list-item,a.health-mini-button,a.plus-circle,a.text-arrow,a.lower-link,a.small-see,a.see-all,a.sub-button,a.primary-button,a.he-health-seg){color:inherit;text-decoration:none}
.perks-helium a.health-mini-button{display:inline-grid;place-items:center}

/* A2 — skip link (accessibility; the reference pages have none). */
.perks-skip{position:absolute;left:12px;top:-60px;z-index:1000;padding:10px 14px;border-radius:14px;corner-shape:squircle;background:var(--helium-color-card);color:var(--helium-color-text);box-shadow:var(--he-card-shadow,0 12px 36px rgba(31,35,32,.06))}
.perks-skip:focus{top:12px}

/* A3 — SG Organic brand mark in place of the Helium™ logo image inside .health-logo (brand is the operator's). */
.perks-brand{display:inline-flex;align-items:center;gap:10px;color:var(--helium-color-brand-dark);text-decoration:none;font-weight:600;letter-spacing:-.02em;font-size:22px}
.perks-brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:12px;corner-shape:squircle;background:var(--helium-color-brand-dark);color:var(--he-color-on-dark,#fff)}
.perks-brand-mark svg{width:18px;height:18px}

/* A4 — group labels inside .category-list (HQ has six menu groups; the reference list has one). Same type as
   the Wellness .he-health-section-label. */
.perks-nav-group{display:block;margin:18px 4px 8px;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--helium-color-muted)}
.perks-nav-group:first-child{margin-top:4px}
.category-item small.perks-attn{font-weight:600}

/* A5 — topbar customer search: Helium .he-health-search anatomy, sized for the 48 px .health-topbar. */
html body.health-page.perks-helium .perks-top-search{min-width:min(320px,34vw);min-height:44px}
.perks-helium .health-top-actions{display:flex;align-items:center;gap:10px}

/* A6 — real data in the Contribution-split donut (the reference hard-codes 55/30/15 with !important). */
html body .lower-card.dark-lower .donut-chart.perks-donut{background:conic-gradient(var(--sa-lime) 0 var(--perks-a,0%),var(--sa-lilac) var(--perks-a,0%) var(--perks-b,0%),var(--he-p-59697E) var(--perks-b,0%) 100%)!important}

/* A7 — initials avatar where the reference uses stock photos (no customer photos exist in PERKS). */
.perks-helium .avatar.perks-initials{display:inline-grid;place-items:center;background:var(--sa-foam,var(--helium-color-control));color:var(--helium-color-brand-dark);font-weight:600;font-size:13px}
.perks-helium .activity-row b.perks-neg,.perks-points.perks-neg{color:var(--helium-color-text)}

/* A8 — ledger/records tables: Helium .he-table (components.css) inside a horizontally scrollable region; references
   are monospace like the Helium .he-counter metric face. */
.perks-table-wrap{overflow-x:auto;border-radius:24px;corner-shape:squircle;background:var(--helium-color-card)}
.perks-table{width:100%;min-width:640px}
.perks-table th.r,.perks-table td.r{text-align:right;font-variant-numeric:tabular-nums}
.perks-ref{font-family:var(--helium-type-metric);font-size:12px;color:var(--helium-color-muted);word-break:break-all}
.perks-pager{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin-top:14px}
.perks-empty,.perks-empty-state{color:var(--helium-color-muted)}

/* A9 — back link above the Wellness intro (Customer 360 is a detail screen; the reference is a top-level page). */
.perks-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--helium-color-brand-dark);text-decoration:none;font-weight:500}

/* A10 — flash message after a form round-trip: Helium alert specimen (.he-quiet-sample role=status + icon);
   outcome stated in words, not by hue (Helium has no red/amber, D39). */
.perks-notice{display:flex;gap:10px;align-items:flex-start;margin:0 0 18px}
.perks-notice svg{width:18px;height:18px;flex:none;margin-top:2px}

/* A11 — Helium data-icon glyphs placed in slots the reference fills with a text glyph or a sized .he-arrow-icon
   (.challenge-symbol, .stat-change, .on-track neighbours): give the generated SVG the reference glyph size. */
.perks-helium :is(.challenge-symbol,.lower-heading,.text-arrow,.lower-link,.small-see,.see-all,.sub-button,.perks-back,.he-health-search,.health-mini-button,.he-lab-inline,.primary-button,.period-button,.plus-circle,.perks-pager .he-control) i>svg,
.perks-helium :is(.challenge-symbol,.lower-heading,.text-arrow,.lower-link,.small-see,.see-all,.sub-button,.perks-back,.he-health-search,.health-mini-button,.he-lab-inline,.primary-button,.period-button,.plus-circle,.perks-pager .he-control) > svg{width:16px;height:16px;flex:none}
.perks-helium .challenge-symbol i{display:grid;place-items:center}

/* A12 — LED read-outs (examples/app.js renderLED) with more glyphs than the reference's 2–3: step the font size down
   so the dot-matrix keeps its pitch and never overflows its card. */
.perks-helium .stat-card>.dot-value.perks-led-l{font-size:.82em}
.perks-helium .stat-card>.dot-value.perks-led-xl{font-size:.68em}
.perks-helium .biomarker-gradient>.pixel-number{max-width:100%}
.perks-helium .biomarker-gradient>.pixel-number.perks-led-m{font-size:60px}
.perks-helium .biomarker-gradient>.pixel-number.perks-led-l{font-size:50px}
.perks-helium .biomarker-gradient>.pixel-number.perks-led-xl{font-size:40px}
.perks-helium .challenge-summary .big-dot.perks-led-xl,.perks-helium .forecast-number.perks-led-xl{font-size:.8em}

/* A13 — wallet figures are longer than the reference biomarker counts: let the label sit under the figure. */
html body.health-page.perks-helium .health-summary-metrics{grid-template-columns:repeat(4,max-content)!important;column-gap:28px!important;row-gap:12px}
@media (max-width:760px){html body.health-page.perks-helium .health-summary-metrics{grid-template-columns:repeat(2,max-content)!important}}

/* A14 — the records section follows the biomarker grid directly (the reference places .health-lower-grid there,
   which carries this spacing). */
.perks-helium .perks-records{margin-top:34px}

/* A15 — phone/tablet (Helium collapses .health-dashboard at 850 px and turns .category-list into a horizontal strip):
   the PERKS-only additions follow the reference: group labels and the status card leave the strip, the topbar keeps
   the brand mark + mini buttons (the screen title is hidden like the reference's at phone width), and the customer
   search moves out of the topbar (the Customers screen has its own search). */
@media (max-width:850px){
 .perks-helium .perks-nav-group,.perks-helium .perks-status-card{display:none}
 html body.health-page.perks-helium .perks-top-search{min-width:0;width:220px}
}
@media (max-width:640px){
 html body.health-page.perks-helium :is(.perks-top-search,.perks-brand-word,.health-logo>span){display:none}
 .perks-helium .health-topbar{gap:8px}
}

/* A16 — page-heading actions: same single row as the reference down to 360 px; below that ("Open cashier" is longer than
   the reference's "New Challenge") they wrap. */
@media (max-width:359px){.perks-helium .heading-actions{flex-wrap:wrap}.perks-helium .heading-actions>*{flex:1 1 auto}}

/* A17 — Customer 360 has six record views where the Wellness switch has three: on narrow screens the switch scrolls
   horizontally inside itself (same behaviour Helium gives .category-list on phones) instead of widening the page. */
.perks-helium .he-health-tools{flex-wrap:wrap;min-width:0}
.perks-helium .he-health-control-switch{max-width:100%;overflow-x:auto;scrollbar-width:none;flex-wrap:nowrap}
.perks-helium .he-health-control-switch::-webkit-scrollbar{display:none}
.perks-helium .he-health-control-switch .he-health-seg{flex:none;white-space:nowrap}

/* A18 — text contrast (deviation D-12, needs design approval). Helium's muted ink (--he-editorial-muted), sage accent
   text, light sage and lavender text measure 1.85–4.0:1 on the porcelain/white surfaces at 9–16 px, below WCAG 2.2 AA
   4.5:1 (QA-105, axe). PERKS keeps every surface, size and weight and swaps ONLY the text colour to Helium tokens: muted
   text = --he-editorial-ink at 74 % alpha (about 6:1, same neutral family), accent text = --he-field-ink and
   --he-violet-ink (controls-v265.css). Decorative marks (dots, bars, waves) keep the original tints. */
html body.perks-helium :is(.stat-change,.minor-label,.month-labels>span,.small-see,.activity-row>span,.activity-row time,.forecast-card time,
 .challenge-list-item small,.upcoming-details small,.perks-nav-group,.he-table td code,.team-activity span){color:var(--he-field-ink)!important;color:rgb(from var(--he-editorial-ink) r g b / .74)!important}
html body.perks-helium :is(.perks-attn,.category-item>small,.he-health-kicker,.he-health-intro>p,.he-health-seg,#perksFilterStatus,
 .he-health-section-label>span,.he-table th,.on-track,.tiny-counter,.upcoming-date>span){color:var(--he-field-ink)!important}
html body.health-page.perks-helium :is(.activity-row>b,.he-action-card--insights .he-insight-title,.he-insight-title,.he-insight-foot>span){color:var(--he-violet-ink)!important}
html body.perks-helium .he-health-seg.selected,html body.perks-helium .he-health-seg[aria-current]{color:inherit}