:root{
  /* existing slate used on the header bars + nav (unchanged colour) */
  --slate:            #41525f;
  --slate-dark:       #374651;
  --slate-soft:       #4c5e6b;

  /* neutral surface palette for the new card chrome */
  --page-bg:          #eef1f4;
  --card-bg:          #ffffff;
  --card-border:      #e3e8ec;
  --hairline:         #eaeef1;
  --ink:              #2b333a;
  --ink-soft:         #5d6b76;

  /* one accent, pulled from the existing teal progress colour */
  --accent:           #2f9e8f;
  --accent-soft:      #e6f4f1;

  --danger:           #d23b3b;
  --danger-soft:      #fbecec;

  --radius:           12px;
  --radius-sm:        9px;
  --shadow-sm:        0 1px 2px rgba(31,45,55,.06), 0 2px 6px rgba(31,45,55,.06);
  --shadow-md:        0 6px 18px rgba(31,45,55,.12);
}

body{margin:0;font-family:var(--font);background:var(--page-bg);color:var(--ink)}

/* =================================================================
   [B] TOTARA INJECTION CSS  — paste-ready (target real selectors)
   ================================================================= */

/* B1. Section rhythm — even breathing room between blocks --------- */
#region-top,
#block-region-main,
#block-region-side-post{margin-bottom:0}
.block.chromeless{margin-bottom:22px}

/* B2. CARD CHROME — give the chromeless blocks a real surface ------ */
.block_totara_featured_links.chromeless,
.block_current_learning.chromeless,
.block_totara_catalog.chromeless,
.block_html.chromeless{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}

/* B3. BLOCK HEADER BAR — same slate, softened + refined ------------ */
.block .header.block-header{
  background:var(--slate);
  padding:14px 18px;
  margin:0;
}
.block .header.block-header .block-title h2{
  color:#fff;
  font-size:14px;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
}
/* slim accent tab on the left of each title */
.block .header.block-header .block-title h2::before{
  content:"";
  width:4px;height:16px;border-radius:2px;
  background:var(--accent);
  display:inline-block;
}

/* B4. BLOCK BODY padding ------------------------------------------ */
.block .content.block-content{
  padding:18px;
}

/* B5. CATEGORY / FEATURED-LINK TILES ------------------------------ */
/* consistent gaps instead of touching edges */
.block-totara-featured-links-layout{
  display:flex;
  flex-wrap:wrap;
}
.block-totara-featured-links-tile{
  border-radius:var(--radius-sm);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  /* margins zeroed because we now use flex gap above */
  margin:0 !important;
  transition:transform .18s ease, box-shadow .18s ease;
}
.block-totara-featured-links-tile:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}
/* the filler tiles shouldn't carry chrome */
.block-totara-featured-links-flex-filler{
  box-shadow:none;background:none;margin:0 !important;
}

/* B6. CURRENT LEARNING TILES -------------------------------------- */
.block_current_learning-tile{
  border:1px solid var(--card-border);
  border-radius:var(--radius-sm);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.block_current_learning-tile:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}
.block_current_learning-tile__link_title{
  font-size:14px;
  font-weight:700;
  color:var(--ink);
  line-height:1.3;
}
.block_current_learning-tile__content{padding:14px}

/* progress bar — rounded track + branded fill */
.block_current_learning-tile .progress{
  background:var(--hairline) !important;
  border-radius:99px !important;
  height:8px !important;
  overflow:hidden;
}
.block_current_learning-tile .progress .bar{
  background:linear-gradient(90deg,var(--accent),#3fb8a6) !important;
  border-radius:99px;
}
.block_current_learning-tile .progressbar__text{
  font-size:11px;font-weight:700;
}

/* "Course" / "Certification" meta as a soft pill */
.block_current_learning-tile__content_component{
  display:inline-block;
  background:var(--accent-soft);
  color:var(--accent);
  font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;
  padding:3px 10px;border-radius:99px;
  margin-top:8px;
}
/* overdue pill, refined */
.block_current_learning-tile__content_duedate_text-label-danger{
  display:inline-block;
  background:var(--danger-soft) !important;
  color:var(--danger) !important;
  border:none !important;
  font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:99px;
}

/* footer count line */
.block_current_learning .panel-footer{
  border-top:1px solid var(--hairline);
  padding:12px 0 0;
  margin-top:14px;
}
.block_current_learning .panel-footer .count{
  color:var(--ink-soft);font-size:12px;margin:0;
}

/* B7. EXPLORE LEARNING — Tui catalogue cards ---------------------- */
.tui-cardScroller__title-header{
font-weight:700;color:var(--ink);
}
.tui-learningCard{
  border-radius:var(--radius-sm) !important;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease;
}
.tui-learningCard:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}
.tui-learningCard__title{
    font-weight:700 !important;
}
/* tidy the duplicated Course/category meta */
.tui-totara_catalog-textPlaceholders{color:var(--ink-soft);font-size:12px}

/* B8. RECENT ADDITIONS carousel ----------------------------------- */
.block_totara_featured_links .slick-slide .block-totara-featured-links-tile{
  border-radius:var(--radius-sm);overflow:hidden;
}
.slick-dots li button:before{color:var(--slate) !important}
.slick-dots li.slick-active button:before{color:var(--accent) !important}

/* B9. NEED HELP? html block --------------------------------------- */
.block_html .content.block-content{font-size:14px;line-height:1.55;color:var(--ink-soft)}
.block_html .content.block-content a{color:var(--accent);font-weight:600}