/* SLPT R31 UI33B
   Targeted visual reconciliation on the accepted UI33A sandbox.
   UI33B is loaded last and is the final authority for the selectors below.
   No sidebar geometry, navigation, route logic, application data or workflow code is changed. */

html[data-context="app-wide"],
html[data-context="clinical"]{
  --r31-ui33b-gloss:rgba(255,255,255,.05);
  --r31-ui33b-depth-a:rgba(0,0,0,.24);
  --r31-ui33b-depth-b:rgba(0,0,0,.08);
  --r31-ui33b-ink:#14181b;
  --r31-ui33b-label:#555f65;
}

/* --------------------------------------------------------------------------
   1. App-wide 5 percent gloss and 5 percent depth treatment.
   This is presentation only and does not alter layout dimensions.
   -------------------------------------------------------------------------- */
html[data-context="app-wide"] .ui2-content :where(
  article[class*="-card"],
  section[class*="-card"],
  button[class*="-card"],
  article[class*="-panel"],
  section[class*="-panel"],
  article[class*="-stat"],
  .ui2-dashboard-stat,
  .ui2-pu3-overview-grid>article,
  .ui2-clinical-gold-overview>article,
  .ui2-assessment-gold-overview>article,
  .ui2-prg-program-card
),
html[data-context="clinical"] .ui2-content :where(
  article[class*="-card"],
  section[class*="-card"],
  button[class*="-card"],
  article[class*="-panel"],
  section[class*="-panel"],
  article[class*="-stat"],
  .ui2-pu3-overview-grid>article,
  .ui2-clinical-gold-overview>article
){
  box-shadow:
    0 14px 32px var(--r31-ui33b-depth-a),
    0 4px 10px var(--r31-ui33b-depth-b),
    inset 0 1px 0 var(--r31-ui33b-gloss),
    inset 0 -1px 0 rgba(0,0,0,.14)!important;
}

/* --------------------------------------------------------------------------
   2. Assessment Centre.
   Remove only the dark plate behind the assessment tool grid.
   Individual tool cards remain owned by their current approved card styling.
   -------------------------------------------------------------------------- */
html[data-route="assessments"][data-context="app-wide"] #content .ui2-assessment-gold-tool-grid{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding-left:0!important;
  padding-right:0!important;
}

/* --------------------------------------------------------------------------
   3. Plans and Users overview contrast.
   The four labels must remain visible on the approved white cards.
   -------------------------------------------------------------------------- */
html[data-route="plans-users"][data-context="app-wide"] #content .ui2-pu3-overview-grid>article>small,
html[data-route="plans-users"][data-context="clinical"] #content .ui2-pu3-overview-grid>article>small{
  display:block!important;
  color:var(--r31-ui33b-label)!important;
  opacity:1!important;
  visibility:visible!important;
  -webkit-text-fill-color:var(--r31-ui33b-label)!important;
  mix-blend-mode:normal!important;
  text-shadow:none!important;
}

html[data-route="plans-users"][data-context="app-wide"] #content .ui2-pu3-overview-grid>article>b,
html[data-route="plans-users"][data-context="clinical"] #content .ui2-pu3-overview-grid>article>b{
  color:var(--r31-ui33b-ink)!important;
  opacity:1!important;
  -webkit-text-fill-color:var(--r31-ui33b-ink)!important;
  mix-blend-mode:normal!important;
  text-shadow:none!important;
}

/* --------------------------------------------------------------------------
   4. Programs.
   Cards stretch to the row height. The description track absorbs title
   differences so every statistics strip aligns across each grid row.
   Longer titles can grow naturally without moving the statistics strip.
   -------------------------------------------------------------------------- */
html[data-route="programs"][data-context="app-wide"] #content .ui2-prg-card-grid{
  align-items:stretch!important;
}

html[data-route="programs"][data-context="app-wide"] #content .ui2-prg-program-card{
  display:grid!important;
  grid-template-rows:auto auto minmax(68px,1fr) auto auto!important;
  align-content:stretch!important;
  height:100%!important;
}

html[data-route="programs"][data-context="app-wide"] #content .ui2-prg-program-card>h3{
  align-self:start!important;
}

html[data-route="programs"][data-context="app-wide"] #content .ui2-prg-program-card>p{
  min-height:68px!important;
  align-self:stretch!important;
  overflow-wrap:anywhere;
}

html[data-route="programs"][data-context="app-wide"] #content .ui2-prg-card-stats{
  align-self:end!important;
  width:100%!important;
}

html[data-route="programs"][data-context="app-wide"] #content .ui2-prg-program-card>footer{
  align-self:end!important;
  width:100%!important;
}

/* --------------------------------------------------------------------------
   5. Clinical Centre.
   Remove the parent dark plate behind the launch shortcuts and give each
   launch card restrained semantic colour, gloss and depth.
   -------------------------------------------------------------------------- */
html[data-route="clinical"] #content .ui2-clinical-gold-launch-grid{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  padding-left:0!important;
  padding-right:0!important;
}

html[data-route="clinical"] #content .ui2-clinical-gold-launch{
  --r31-clin-tone:#ff8a2a;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--r31-clin-tone) 10%,rgba(10,14,17,.96)),
      rgba(8,12,15,.94))!important;
  border:1px solid color-mix(in srgb,var(--r31-clin-tone) 28%,rgba(255,255,255,.12))!important;
  box-shadow:
    0 13px 28px rgba(0,0,0,.22),
    0 3px 8px rgba(0,0,0,.07),
    inset 0 1px 0 rgba(255,255,255,.05)!important;
  transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .18s ease,box-shadow .18s ease!important;
}

html[data-route="clinical"] #content .ui2-clinical-gold-launch.tone-green{--r31-clin-tone:#58c98f}
html[data-route="clinical"] #content .ui2-clinical-gold-launch.tone-blue{--r31-clin-tone:#58aef0}
html[data-route="clinical"] #content .ui2-clinical-gold-launch.tone-orange{--r31-clin-tone:#f39a55}
html[data-route="clinical"] #content .ui2-clinical-gold-launch.tone-purple{--r31-clin-tone:#a98ad9}
html[data-route="clinical"] #content .ui2-clinical-gold-launch.tone-teal{--r31-clin-tone:#63c7c9}

html[data-route="clinical"] #content .ui2-clinical-gold-launch>b{
  color:color-mix(in srgb,var(--r31-clin-tone) 86%,white)!important;
}

html[data-route="clinical"] #content .ui2-clinical-gold-launch>span{
  color:rgba(226,233,236,.74)!important;
}

@media(hover:hover) and (pointer:fine){
  html[data-route="clinical"] #content .ui2-clinical-gold-launch:hover{
    transform:translateY(-1px)!important;
    border-color:color-mix(in srgb,var(--r31-clin-tone) 40%,rgba(255,255,255,.14))!important;
    box-shadow:
      0 16px 34px rgba(0,0,0,.25),
      0 4px 10px rgba(0,0,0,.08),
      inset 0 1px 0 rgba(255,255,255,.055)!important;
  }
}

/* --------------------------------------------------------------------------
   6. Nutrition.
   Make quick-card icon colour approximately 20 percent more vivid without
   recolouring the surrounding card or changing geometry.
   -------------------------------------------------------------------------- */
html[data-route="nutrition"][data-context="app-wide"] #content .ui2-nutrition-quick-icon{
  filter:saturate(1.20) brightness(1.035)!important;
  background:color-mix(in srgb,var(--tone) 22%,rgba(255,255,255,.035))!important;
}

/* Keep the corrections compact and safe on small screens. */
@media(max-width:900px){
  html[data-route="programs"][data-context="app-wide"] #content .ui2-prg-program-card{
    grid-template-rows:auto auto minmax(56px,1fr) auto auto!important;
  }
  html[data-route="programs"][data-context="app-wide"] #content .ui2-prg-program-card>p{
    min-height:56px!important;
  }
  html[data-route="clinical"] #content .ui2-clinical-gold-launch-grid,
  html[data-route="assessments"][data-context="app-wide"] #content .ui2-assessment-gold-tool-grid{
    padding-inline:0!important;
  }
}

@media(prefers-reduced-motion:reduce){
  html[data-route="clinical"] #content .ui2-clinical-gold-launch{
    transition:none!important;
    transform:none!important;
  }
}