/* ============================================================
   Learner app shell — shared by /my-courses, /profile and /player only.
   Modelled on the "course hub" mock in the index hero: a white app
   card with a left sidebar that overlaps a short dark band.
   Uses site.css tokens only.
   ============================================================ */

/* dark band the app card overlaps */
.lx-band { padding: 28px 0; }
.lx-band-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; }
.lx-band-meta { font: 500 12px/1.2 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.55); display: inline-flex; align-items: center; gap: 8px; }
.lx-band-meta svg { color: var(--em-glow); }
@media (max-width: 720px) { .lx-band { padding: 20px 0; } }

/* the app frame
   A centred shell that lines up with the site header (.wrap / --wrap):
   col 1 = left bleed, col 2 = sidebar, col 3 = main, col 4 = right bleed.
   The sidebar's grey background (::before) runs from the viewport edge
   to the sidebar border, while the sidebar's contents start exactly on
   the header logo's left edge and the main column ends on the header's
   right edge. Pages can set --lx-side-w (the player uses a wider rail). */
.lx-page > .wrap { max-width: none; padding-left: 0; padding-right: 0; }
.lx-app {
  --lx-side-w: 244px;
  position: relative;
  display: grid;
  grid-template-columns:
    minmax(var(--gutter), 1fr)
    var(--lx-side-w)
    minmax(0, calc(var(--wrap) - 2 * var(--gutter) - var(--lx-side-w)))
    minmax(var(--gutter), 1fr);
  background: #fff; border-bottom: 1px solid var(--line);
  min-height: calc(100vh - 140px);
}
.lx-app::before { content: ""; grid-column: 1 / 3; grid-row: 1; background: var(--bg-2); border-right: 1px solid var(--line); }
.lx-app > .lx-side { grid-column: 2; grid-row: 1; }
.lx-app > .lx-main, .lx-app > .pl-main { grid-column: 3; grid-row: 1; }
@supports (overflow: clip) { .lx-app { overflow: clip; } }


/* sidebar */
.lx-side { padding: 24px 24px 40px 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lx-side-in { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 12px; }
.lx-me { display: flex; gap: 12px; align-items: center; padding: 4px 0 16px; border-bottom: 1px solid var(--line-2); min-width: 0; }
.lx-av { flex: none; width: 40px; height: 40px; border-radius: var(--r); display: grid; place-items: center; background: linear-gradient(150deg, var(--em-glow), var(--em-d)); color: #fff; font: 600 14px/1 var(--sans); letter-spacing: -.01em; }
.lx-av.guest { background: var(--bg-3); color: var(--muted); }
.lx-me > div { min-width: 0; }
.lx-me b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-me small { display: block; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-nav { display: flex; flex-direction: column; gap: 2px; }
.lx-nav a, .lx-nav button { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--r); font: 500 14px/1.3 var(--sans); color: var(--muted); background: none; border: 0; cursor: pointer; text-align: left; white-space: nowrap; transition: background .15s, color .15s; }
.lx-nav a:hover, .lx-nav button:hover { background: var(--bg-2); color: var(--text); }
.lx-nav a.on { background: var(--bg-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.lx-nav a.on svg { color: var(--em); }
.lx-nav .ct { margin-left: auto; font: 500 11px/1 var(--mono); background: var(--em-l); color: var(--em-d); border-radius: var(--r-xs); padding: 4px 6px; }
.lx-nav-sep { height: 1px; background: var(--line-2); margin: 8px 4px; }
.lx-help { padding: 16px; border-radius: var(--r-lg); background: var(--bg-2); border: 1px solid var(--line-2); font-size: 13px; line-height: 1.5; color: var(--muted); display: flex; flex-direction: column; gap: 8px; }
.lx-help b { color: var(--text); font-size: 14px; font-weight: 600; }
.lx-help .link { font-size: 13px; }

/* main column */
.lx-main { padding: 40px 0 64px 48px; min-width: 0; }
.lx-page { position: relative; }
.lx-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.lx-top > div { min-width: 0; }
.lx-top h1 { font-size: clamp(24px, 2.6vw, 30px); letter-spacing: -.03em; line-height: 1.15; overflow-wrap: anywhere; }
.lx-top p { color: var(--muted); margin-top: 8px; font-size: 15px; line-height: 1.5; }
.lx-top p b { color: var(--text); font-weight: 600; }
.lx-top .row { gap: 8px; }

/* panels + KPI tiles (mirrors the mock) */
.lx-panel { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; min-width: 0; background: #fff; }
.lx-panel-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.lx-panel-h h2, .lx-panel-h h3 { font-size: 16px; letter-spacing: -.015em; line-height: 1.3; }
.lx-panel-h .muted { font-size: 13px; }
.lx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 16px; }
.lx-kpi { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lx-kpi small { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.lx-kpi b { font-size: 26px; font-weight: 600; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lx-kpi em { font: 500 12px var(--mono); font-style: normal; color: var(--muted); margin-left: 8px; letter-spacing: 0; }
.lx-kpi.hi { background: var(--em-l); border-color: #CDE8DA; }
.lx-kpi.hi b { color: var(--em-d); }
@media (max-width: 1100px) { .lx-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* progress ring (SVG built by F2PLearn.ring) */
.lx-ring { display: block; flex: none; }
.lx-ring .trk { stroke: var(--line-2); }
.lx-ring .val { stroke: var(--em); transition: stroke-dashoffset .8s cubic-bezier(.16,1,.3,1); }
.lx-ring text { font: 600 13px var(--sans); fill: var(--text); }

/* responsive shell: sidebar becomes a scrolling tab bar */
@media (max-width: 960px) {
  .lx-app { grid-template-columns: minmax(0,1fr); min-height: 0; }
  .lx-app::before { display: none; }
  .lx-app > .lx-side, .lx-app > .lx-main, .lx-app > .pl-main { grid-column: 1; grid-row: auto; }
  .lx-side { background: var(--bg-2); border-bottom: 1px solid var(--line); padding: 8px 0; }
  .lx-side-in { position: static; }
  .lx-me, .lx-help, .lx-nav-sep { display: none; }
  .lx-nav { flex-direction: row; overflow-x: auto; gap: 4px; padding: 0 var(--gutter); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .lx-nav::-webkit-scrollbar { display: none; }
  .lx-nav a, .lx-nav button { flex: none; padding: 8px 12px; }
  .lx-main { padding: 24px var(--gutter) 48px; }
}
@media (max-width: 560px) {
  .lx-panel { padding: 16px; }
  .lx-kpis { gap: 8px; }
  .lx-kpi { padding: 12px; gap: 8px; }
  .lx-kpi b { font-size: 22px; }
  .lx-kpi em { display: block; margin: 4px 0 0; }
}
@media (prefers-reduced-motion: reduce) { .lx-ring .val { transition: none; } }

/* certificates list (profile + dashboard) */
.lx-cert { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--line-2); }
.lx-cert:first-child { border-top: 0; padding-top: 0; }
.lx-cert:last-child { padding-bottom: 0; }
.lx-cert .b { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lx-cert .b b { font-size: 15px; font-weight: 600; line-height: 1.35; }
.lx-cert .b small { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.lx-cert .b .chip { margin-top: 4px; }
.lx-cert .acts { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; justify-content: flex-end; }
.lx-cert .msg { grid-column: 1 / -1; }
.lx-cert .msg:empty { display: none; }
.lx-cert.ready { background: var(--em-l); border: 1px solid #CDE8DA; border-radius: var(--r-lg); padding: 16px; margin: 8px 0; }
.lx-cert.locked .b b { color: var(--muted); font-weight: 500; }
.lx-cert-none { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px; text-align: center; color: var(--muted); font-size: 14.5px; border: 1px dashed var(--line); border-radius: var(--r-lg); }
@media (max-width: 720px) {
  .lx-cert { grid-template-columns: auto minmax(0,1fr); }
  .lx-cert .acts { grid-column: 1 / -1; justify-content: flex-start; }
}

/* links inside lilac info alerts need the darker emerald for AA contrast */
.lx-main .alert-info a { color: var(--em-d); }