/* Faith Essentials — Figma info-display component library (WWDC-style discovery).
   Pairs with shell.js (fixed nav) + base.css/tokens.css. Concise, consistent building blocks
   for the v1 "Shelf" screens: section panels, KPI, course cards, playlist cards, chips, pills,
   progress bars, horizontal shelves, the player + lesson rail. Brand-safe gradient thumbnails
   (no photos / no AI imagery). NOTE: render scholar.name as-is — it already includes the honorific. */

/* ---- section panel + header (the rounded-20 white container) ---- */
.fe-section { background: var(--fe-white); border: 1px solid var(--fe-border); border-radius: 20px; box-shadow: var(--fe-shadow-card); padding: 18px; margin-bottom: 14px; }
.fe-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.fe-sec-head .l { display: flex; align-items: center; gap: 9px; }
.fe-sec-ico { width: 28px; height: 28px; border-radius: 8px; background: var(--fe-bg); display: grid; place-items: center; font-size: 15px; color: var(--fe-text-secondary); }
.fe-sec-title { font-size: 16px; font-weight: 800; color: var(--fe-text-primary); letter-spacing: -.02em; }
.fe-seeall { font-size: 12px; font-weight: 600; color: var(--fe-text-tertiary); cursor: pointer; text-decoration: none; flex: none; }
.fe-seeall:hover { color: var(--fe-info); }

/* ---- KPI stat row ---- */
.fe-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; }
.fe-kpi .card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--fe-white); border: 1px solid var(--fe-border); border-radius: 16px; box-shadow: var(--fe-shadow-card); }
.fe-kpi .t { width: 48px; height: 48px; border-radius: 14px; background: var(--fe-info-tint); color: var(--fe-info); display: grid; place-items: center; font-size: 22px; flex: none; }
.fe-kpi .n { font-size: 30px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; color: var(--fe-text-primary); }
.fe-kpi .l { font-size: 12px; font-weight: 600; color: var(--fe-text-secondary); margin-top: 3px; }

/* ---- featured banner (info-tint promoted card) ---- */
.fe-featured { background: var(--fe-info-tint); border-radius: 20px; padding: 18px 20px; display: flex; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fe-featured .tag { display: inline-block; background: #fff; color: var(--fe-info); font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px; margin-bottom: 8px; }
.fe-featured h2 { font-size: 22px; color: var(--fe-text-primary); }

/* ---- course card (canonical thumb card) — packs ~4 per dashboard column ---- */
.fe-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.fe-ccard { flex: 1 1 172px; min-width: 168px; max-width: 300px; background: var(--fe-white); border: 1px solid var(--fe-border); border-radius: 16px; box-shadow: 0 2px 8px var(--fe-border); padding: 10px 10px 12px; cursor: pointer; transition: transform .15s, box-shadow .15s; text-decoration: none; display: block; }
.fe-ccard:hover { transform: translateY(-2px); box-shadow: var(--fe-shadow-pop); }
.fe-ccard .th { height: 124px; border-radius: 12px; display: flex; align-items: flex-end; padding: 12px; color: #fff; position: relative; overflow: hidden; }
/* consistent tonal layer: a uniform top sheen + bottom shade so mixed category gradients read as one curated palette */
.fe-ccard .th::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 34%, rgba(0,0,0,.28) 100%); }
.fe-ccard .th h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 1px 10px rgba(0,0,0,.35); position: relative; z-index: 1; }
.fe-ccard .ttl { font-size: 14px; font-weight: 700; margin: 10px 2px 8px; color: var(--fe-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.fe-ccard .meta { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 6px; margin: 0 2px 10px; }

/* ---- pills + CTA — uniform height, crisp contrast (no washed-out hairlines) ---- */
.fe-pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.fe-pill.inst { background: var(--fe-bg); color: var(--fe-text-secondary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.fe-pill.les { background: var(--fe-info-tint); border: 1px solid var(--fe-info-tint-subtle); color: var(--fe-info); }
.fe-pill.count { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(0,0,0,.5); color: #fff; height: auto; padding: 3px 8px; font-size: 11px; font-weight: 500; }
.fe-cta { display: block; width: 100%; text-align: center; padding: 9px; border-radius: 20px; background: var(--fe-info-tint); color: var(--fe-info); font-size: 12px; font-weight: 700; border: 0; cursor: pointer; text-decoration: none; }
.fe-cta.primary { background: var(--fe-info); color: #fff; }

/* ---- progress bar (blue / mint / green) ---- */
.fe-bar { height: 8px; border-radius: 999px; background: var(--fe-bg); overflow: hidden; margin: 8px 0; }
.fe-bar > span { display: block; height: 100%; background: var(--fe-info); border-radius: 999px; }
.fe-bar.green > span { background: var(--fe-success); }
.fe-bar.mint > span { background: #7addd4; }
.fe-prog-lbl { font-size: 12px; font-weight: 700; color: var(--fe-text-secondary); }

/* ---- category chips (Library filter row) ---- */
.fe-chips { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fe-chip { padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1; color: var(--fe-text-secondary); cursor: pointer; background: var(--fe-white); border: 1px solid var(--fe-border-strong); transition: background .12s, color .12s, border-color .12s; }
.fe-chip:hover { border-color: var(--fe-info); color: var(--fe-text-primary); }
.fe-chip.active { background: var(--fe-info); color: #fff; border-color: var(--fe-info); box-shadow: none; }
.fe-select { background: var(--fe-white); border: 1px solid var(--fe-border-strong); border-radius: 20px; padding: 9px 14px; font-family: inherit; font-size: 13px; color: var(--fe-text-secondary); }

/* ---- playlist / schedule card (gradient header + lesson pill + % bar) ---- */
.fe-pcard { flex: 1 1 280px; min-width: 280px; max-width: 360px; background: var(--fe-white); border: 1px solid var(--fe-border); border-radius: 16px; box-shadow: 0 2px 8px var(--fe-border); overflow: hidden; cursor: pointer; text-decoration: none; display: block; transition: transform .15s, box-shadow .15s; }
.fe-pcard:hover { transform: translateY(-2px); box-shadow: var(--fe-shadow-pop); }
.fe-pcard .hd { height: 150px; position: relative; display: flex; align-items: flex-end; padding: 14px; color: #fff; }
.fe-pcard .hd::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.6)); }
.fe-pcard .hd .hd-ttl { position: relative; z-index: 1; text-transform: uppercase; font-weight: 800; font-size: 16px; text-shadow: 0 1px 10px rgba(0,0,0,.4); }
.fe-pcard .bd { padding: 14px; }
.fe-pcard .desc { font-size: 13px; color: var(--fe-text-secondary); margin-bottom: 8px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.45em * 2); }

/* ---- horizontal shelf + portrait continue card ---- */
.fe-shelf { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.fe-portrait { flex: none; width: 152px; height: 208px; border-radius: 14px; position: relative; display: flex; align-items: flex-end; padding: 12px; color: #fff; overflow: hidden; text-decoration: none; }
/* uniform tonal layer keeps mixed category gradients within one lightness range, then a steady bottom shade for legible text */
.fe-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.12) 40%, rgba(0,0,0,.74) 100%); }
.fe-portrait .info { position: relative; z-index: 1; width: 100%; }
.fe-portrait .pt-ttl { font-size: 13px; font-weight: 700; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.5); }

/* ---- player layout: main + 323px course-progress rail ---- */
.fe-player { display: grid; grid-template-columns: 1fr 323px; gap: 16px; align-items: start; }
.fe-video { height: 312px; border-radius: 16px; display: grid; place-items: center; color: #fff; position: relative; overflow: hidden; }
.fe-video .play { width: 64px; height: 64px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--fe-info); display: grid; place-items: center; font-size: 26px; position: relative; z-index: 1; }
.fe-rrail { display: flex; flex-direction: column; gap: 14px; }
.fe-lessons { max-height: 560px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.fe-lrow { display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 12px; background: var(--fe-bg); font-size: 13px; color: var(--fe-text-primary); cursor: pointer; }
.fe-lrow.done { background: #deffe5; }
.fe-lrow .ix { width: 22px; height: 22px; border-radius: 999px; background: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--fe-text-secondary); flex: none; }
.fe-lrow .pl { margin-left: auto; color: var(--fe-info); }

/* ---- summary/discussion tabs ---- */
.fe-tabs { display: inline-flex; gap: 6px; background: var(--fe-bg); padding: 4px; border-radius: 12px; }
.fe-tab { padding: 6px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--fe-text-secondary); cursor: pointer; border: 0; background: transparent; }
.fe-tab.active { background: var(--fe-white); box-shadow: var(--fe-shadow-card); color: var(--fe-text-primary); }

/* ---- topic / category tile (Essentials) ---- */
.fe-tile { flex: 1 1 300px; min-width: 300px; border-radius: 16px; overflow: hidden; color: #fff; position: relative; min-height: 180px; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px; text-decoration: none; }
.fe-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.55)); }
.fe-tile > * { position: relative; z-index: 1; }
.fe-tile .tile-ttl { text-transform: uppercase; font-weight: 800; font-size: 18px; text-shadow: 0 1px 10px rgba(0,0,0,.4); }

/* ---- responsive ---- */
@media (max-width: 1100px) { .fe-player { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .fe-kpi { grid-template-columns: 1fr; } }