/* SG Organic /rewards/ workspace (HQ, partner portal, member wallet) — Helium V2.6.5 Sage & Lavender, Milestone 5.
   Layout glue only. Colours, radii, spacing and motion come from helium-tokens.css; components from helium.css.
   No new component patterns: every class below composes an existing Helium element (card, chip, segment, table). */
.sgor-page { background: var(--helium-color-canvas); color: var(--helium-color-text); }
.sgor-page main:focus { outline: none; }
.sgor-skip { position: absolute; left: -9999px; top: 8px; z-index: 300; }
.sgor-skip:focus { left: 16px; background: var(--helium-color-card); padding: 10px 14px; border-radius: var(--helium-radius-sm); corner-shape: squircle; box-shadow: var(--sgo-shadow); }
.sgor-section { margin-top: var(--helium-sp-6); }
.sgor-gap { margin-top: var(--helium-sp-4); }
.sgor-note { margin: var(--helium-sp-4) 0 0; }
.hint, .muted { color: var(--sgo-text-2); font-size: 13px; line-height: 1.5; }
.sidebar .brand-mark svg { width: 18px; height: 18px; }
.sidebar .brand-mark { background: var(--helium-color-brand-dark); color: var(--he-color-on-dark); }
.sidebar-foot .nav-link { min-height: 44px; }
.crumbs svg { color: var(--sgo-text-2); }

/* Segmented navigation rendered as real links (Helium .segment geometry; aria-current carries state). */
.segment .seg-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 13px; corner-shape: squircle; font-size: 13px; color: var(--sgo-text-2); white-space: nowrap; text-decoration: none;
  transition: background-color var(--helium-base) var(--helium-ease), color var(--helium-base) var(--helium-ease); }
.segment .seg-link:hover { color: var(--helium-color-text); }
.segment .seg-link[aria-current="page"] { background: var(--helium-color-card); color: var(--helium-color-brand-dark); font-weight: 600; box-shadow: var(--sgo-shadow); }

/* Filters and inline forms keep Helium field geometry. */
.filters .field { min-width: 180px; }
.filters .input { min-height: 44px; width: min(320px, 100%); }
.filters .btn { min-height: 44px; }
.inline-form { display: inline-flex; gap: 8px; align-items: center; margin: 0; }
.inline-form .row { margin: 0; }
.page-actions .inline-form .btn, .page-actions > .btn { min-height: 44px; }
.cx-back { margin: 0 0 8px -8px; }
code.ref { font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--sgo-text-2); overflow-wrap: anywhere; background: none; padding: 0; }
.num.plus, td.plus { color: var(--sgo-success); }
.feature-kpi .kpi-value { font-size: clamp(34px, 3.4vw, 52px); }
.kpi-label span { min-width: 0; }

/* Health (QA-119): status is text + chip; the dot is decorative and never the only signal. */
.health-strip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.health-mini { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-height: 64px; }
.health-mini strong { display: block; font-size: 14px; font-weight: 600; }
.health-dot { display: inline-block; width: 10px; height: 10px; border-radius: 4px; corner-shape: squircle; flex: none; background: var(--helium-color-muted); margin-right: 8px; vertical-align: 1px; }
.health-mini .health-dot { margin-right: 0; }
.health-dot[data-status="ok"] { background: var(--helium-color-brand); }
.health-dot[data-status="degraded"] { background: var(--sgo-warn); }
.health-dot[data-status="failed"] { background: var(--sgo-danger); }
.health-card[data-status="failed"] { border-color: var(--sgo-danger); }
.health-card .dl { margin-top: var(--helium-sp-4); font-size: 13px; }
.health-card .table-wrap { margin-top: var(--helium-sp-3); }
.reasons { margin: 0; padding-left: 18px; font-size: 14px; display: grid; gap: 4px; }
.compact-table td { padding: 10px 0; }

/* Attention queue */
.attention { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.attention a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 10px; border-radius: 12px; corner-shape: squircle; text-decoration: none; font-size: 14px; }
.attention a:hover { background: var(--helium-color-field); }

/* Report bars: green-only for earned, lavender-only for used (two solid fills, never one mixed gradient). */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bars li { display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 14px; }
.bar-track { display: grid; gap: 4px; }
.bar { display: block; height: 8px; border-radius: 999px; min-width: 2px; }
.bar.earn, .legend .lg-earn { background: var(--helium-color-brand); }
.bar.used, .legend .lg-used { background: var(--he-purple-lavender); }
.bar-val { font-size: 13px; color: var(--sgo-text-2); white-space: nowrap; }
@media (max-width: 599px) { .bars li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* Guest sign-in */
.sgor-page .sgor-join { border-top: 1px solid var(--helium-color-border); padding-top: var(--helium-sp-4); }
.sgor-page .sgor-join summary { cursor: pointer; color: var(--helium-color-brand-dark); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.sgor-page .sgor-join form { margin-top: var(--helium-sp-3); }

/* Dialog close sits in the body corner */
dialog.dialog .dialog-body { position: relative; }
dialog.dialog .dialog-body h2 { padding-right: 48px; }
dialog.dialog form.stack { margin-top: var(--helium-sp-3); }

@media (max-width: 599px) {
  .page-head { align-items: flex-start; }
  .page-actions { width: 100%; }
  .filters { width: 100%; } .filters .field, .filters .input { width: 100%; min-width: 0; }
  .grid.bento .card[style*="span 2"] { grid-column: auto !important; }
  .card { padding: 16px; } .card.flush { padding: 0; }
}

/* Target size (WCAG 2.2): links inside data cells and the top-bar search field keep a ≥ 24 px hit area. */
.table td a:not(.btn) { display: inline-block; min-height: 24px; min-width: 24px; line-height: 24px; }
.search-box input { min-height: 40px; }
.table a:not(.btn) { color: var(--helium-color-brand-dark); font-weight: 500; text-decoration: none; }
.table a:not(.btn):hover, .table a:not(.btn):focus-visible { text-decoration: underline; }
.nav-badge.alert { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.grid.main-side > .member-card { align-self: start; }
/* Touch layouts (tablets and phones): every control keeps a 44 px target (QA-104). */
@media (max-width: 1024px) {
  .btn-sm { min-height: 44px; }
  .segment .seg-link, .segment button { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
}