/* Facelift (2026-10). Loaded last: a calmer, more confident surface over the
   existing structure. Only presentation lives here — every behaviour, label and
   gate stays where it was. Tokens build on the shell's (styles.css) so tenant
   accents and the dark theme keep working. */
:root{
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;
  --hero-bg:#13243C;--hero-ink:#F4F7FB;--hero-mute:#B9C6D6;--hero-link:#FFC9A8;
  --card-shadow:0 1px 2px rgba(16,30,51,.05),0 12px 28px -18px rgba(16,30,51,.28);
}
:root:not([data-theme=light]){@media (prefers-color-scheme:dark){
  --hero-bg:#1B2D46;--hero-ink:#E8EEF5;--hero-mute:#A9B8CA;--hero-link:#FFC9A8;
  --card-shadow:0 1px 2px rgba(0,0,0,.35),0 14px 30px -18px rgba(0,0,0,.75);
}}

/* header: a quieter bar with a hairline and room to breathe */
.guided .top{background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
.guided .learning-nav a{border-radius:10px;font-weight:650}
.guided .learning-nav a[aria-current=page]{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 25%,transparent)}

/* page heading */
.guided .page-heading h1{letter-spacing:-.03em}
.guided .page-description{font-size:17px;color:var(--ink-2)}
.guided .role-path-label{font-weight:650;color:var(--ink-2);padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--grid);text-decoration:none}
.guided .role-path-label:hover{border-color:var(--accent)}

/* the next step: one strong focal card */
.guided .learning-feature{background:var(--hero-bg);border:0;border-radius:var(--r-xl);box-shadow:var(--card-shadow);position:relative;isolation:isolate}
.guided .learning-feature::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:radial-gradient(90% 120% at 100% 0%,color-mix(in srgb,var(--brand-accent) 26%,transparent) 0,transparent 60%)}
.guided .learning-feature-copy,.guided .learning-feature h2,.guided .learning-feature h3{color:var(--hero-ink)}
.guided .learning-feature .feature-description{color:var(--hero-mute)}
.guided .learning-feature .feature-meta,.guided .learning-feature .feature-progress p{color:var(--hero-mute)}
.guided .learning-feature .feature-course,.guided .learning-feature .text-link{color:var(--hero-link)}
.guided .learning-feature .feature-progress{background:rgba(255,255,255,.05);border-left:1px solid rgba(255,255,255,.1)}
.guided .learning-feature .learning-meter{background:rgba(255,255,255,.16)}
.guided .learning-feature .learning-meter::-webkit-progress-bar{background:rgba(255,255,255,.16)}
.guided .learning-feature .learning-meter::-webkit-progress-value{background:var(--hero-link)}
.guided .learning-feature .learning-meter::-moz-progress-bar{background:var(--hero-link)}
.guided .learning-feature .btn.primary{background:var(--brand-accent-deep);border-color:var(--brand-accent-deep);color:#fff;box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.guided .learning-feature .btn:not(.primary){background:transparent;color:var(--hero-ink);border-color:rgba(255,255,255,.35)}
@media(max-width:699px){.guided .learning-feature .feature-progress{border-left:0;border-top:1px solid rgba(255,255,255,.1)}}

/* the lower columns: cards instead of rules */
.guided .learning-home-aside .learning-section{background:var(--surface);border:1px solid var(--grid);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--card-shadow);margin-bottom:16px}
.guided .learning-home-aside .learning-section>h2{font-size:18px;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.guided .learning-home-aside .learning-section>h2 .icon{color:var(--accent-deep);flex:none}
.guided .learning-home-aside p{font-size:14.5px;margin-bottom:14px}
.guided .course-line{background:var(--surface);border:1px solid var(--grid);border-radius:var(--r-lg);padding:20px 22px;margin-bottom:12px;box-shadow:var(--card-shadow)}
.guided .course-line:first-of-type{padding-top:20px}
.guided .course-line h3 a{color:var(--ink);text-decoration:none}
.guided .course-line h3 a:hover{color:var(--accent-deep);text-decoration:underline}
.guided .section-heading{align-items:baseline}

/* course and path cards across Courses/Progress */
.guided .path-card,.guided .course-card{border-radius:var(--r-lg)}
.guided .btn{border-radius:10px}
.guided .notice{border-radius:var(--r-md)}

/* motion only on state changes; honour reduced motion */
.guided .course-line,.guided .learning-home-aside .learning-section{transition:border-color .15s ease-out}
.guided .course-line:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--grid))}
@media (prefers-reduced-motion:reduce){.guided .course-line,.guided .learning-home-aside .learning-section{transition:none}}

/* Courses on a phone: the same cards, read faster — two-line descriptions
   (the full text stays in the page for assistive tech) and tighter spacing. */
.guided .course-card{border-radius:var(--r-lg);border-color:var(--grid);box-shadow:var(--card-shadow)}
.guided .course-card:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--grid))}
@media(max-width:699px){
  .guided .course-library{gap:10px}
  .guided .course-card{padding:16px 18px}
  .guided .course-card h2{font-size:18px;margin-bottom:6px}
  .guided .course-card>p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;margin-bottom:10px}
  .guided .course-card-bottom{padding-top:10px}
  .guided .role-path-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}