/* level-end.css: the level card on the class dashboard (platform/index.html #q-level-end, drawn by level-end.js).
   Linked after portal.css, so it uses the portal's tokens (with fallbacks). Light only. */
.lvl-wrap[hidden]{display:none;}
.lvl{box-sizing:border-box; margin:0 0 18px; padding:16px 18px; border-radius:16px; background:var(--bg-panel, #fff); border:1px solid #9FD1B5; border-top:4px solid var(--a-quran, #1F7A4D);
  font-family:'Karla', system-ui, sans-serif; color:var(--ink, #16233A); box-shadow:0 14px 28px -24px rgba(20, 70, 45, .55); scroll-margin-top:72px;}
.lvl-top{display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;}
.lvl-compact{padding-top:12px; padding-bottom:12px; box-shadow:none;}   /* moved on past the level: the top row only */
.lvl-medal{flex:none; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--a-quran-bg, #EBF3EF); font-size:24px; line-height:1;}
.lvl-titles{flex:1 1 220px; min-width:0; display:flex; flex-direction:column; gap:2px;}
.lvl-k{font-size:13.5px; color:var(--ink-soft, #56657A);}
.lvl-h{margin:0; font-size:20px; font-weight:700; line-height:1.25; color:var(--ink, #16233A);}
.lvl-btn{display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; min-height:44px; padding:8px 18px; border-radius:100px; font:inherit; font-weight:700; font-size:15px;
  text-decoration:none; cursor:pointer; border:1.5px solid var(--a-quran, #1F7A4D); background:#fff; color:var(--a-quran-ink, #1F7A4D);}
.lvl-btn:hover{background:var(--a-quran-bg, #EBF3EF);}
.lvl-solid, .lvl-solid:hover{background:var(--a-quran, #1F7A4D); color:#fff;}
.lvl-row{margin:12px 0 0; font-size:15px; line-height:1.5;}
.lvl-row a{color:var(--sky-ink, #1F63A6); font-weight:700; white-space:nowrap;}   /* short links: each on one line */
.lvl-share{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; color:var(--ink-soft, #56657A);}
.lvl-msg{margin:6px 0 0; font-size:13.5px; color:var(--done-ink, #1F7A4D); overflow-wrap:anywhere;}
.lvl-msg:empty{display:none;}
.lvl-carry{margin:14px 0 0; padding:12px 14px; border-radius:12px; background:var(--now-bg, #FFF6E6); border:1px solid #EBCB8F;}
.lvl-carry p{margin:0;}
.lvl-carry-h{font-size:16px;}
.lvl-carry .lvl-carry-sub{margin-top:4px; font-size:14px; color:var(--ink-soft, #56657A);}
.lvl-ask{display:flex; flex-wrap:wrap; gap:8px; margin-top:10px;}
.lvl-earlier{font-size:14px; color:var(--ink-soft, #56657A);}
.lvl-link{font:inherit; font-weight:700; color:var(--sky-ink, #1F63A6); background:none; border:none; padding:0; min-height:32px; text-decoration:underline; text-underline-offset:2px; cursor:pointer;}
.lvl-btn:focus-visible, .lvl-link:focus-visible{outline:3px solid var(--sky, #2A79C0); outline-offset:2px;}
@media (max-width:480px){
  .lvl{padding:14px 12px;}
  .lvl-top .lvl-btn{flex:1 1 100%;}
  .lvl-ask .lvl-btn{flex:1 1 170px;}   /* one button a row on a phone */
}
@media print{ .lvl-btn, .lvl-share, .lvl-msg, .lvl-carry, .lvl-earlier{display:none !important;} }