/* Styles for the create-lesson, pronunciation, skills and weekly screens. Uses the tokens from theme.css. */
.cr-text { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; line-height: 1.45; padding: 12px; border-radius: 14px; border: 2px solid var(--line, #d7dcec); background: var(--card, #fff); color: inherit; resize: vertical; min-height: 9em; }
.cr-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; }
.cr-count { opacity: .75; }
.cr-count.over { color: #c0392b; font-weight: 700; }
.cr-msg { margin: 10px 0 0; min-height: 1.2em; }
.cr-msg.bad { color: #c0392b; font-weight: 600; }
.cr-card { margin-top: 12px; padding: 12px; border-radius: 14px; background: rgba(34, 197, 94, .12); display: grid; gap: 8px; }
.cr-words { font-size: 16px; opacity: .9; }
.cr-list { display: grid; gap: 8px; }
.cr-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .04); }
.cr-open { flex: 1; display: grid; gap: 2px; color: inherit; text-decoration: none; min-width: 0; }
.cr-open b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-del { min-height: 44px; }

/* pronunciation recorder */
.pron { display: grid; gap: 10px; justify-items: center; margin-top: 10px; width: 100%; }
.pron-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pron-rec.live { background: #e11d48; color: #fff; }
.pron-note { font-size: 16px; opacity: .8; text-align: center; margin: 0; }
.pron-score { font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; font-size: 34px; line-height: 1; }
.pron-score.good { color: #16a34a; } .pron-score.mid { color: #d97706; } .pron-score.low { color: #dc2626; }
.pron-words { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: 20px; }
.pron-w { padding: 2px 8px; border-radius: 10px; }
.pron-w.ok { background: rgba(34, 197, 94, .18); }
.pron-w.wrong { background: rgba(245, 158, 11, .25); }
.pron-w.missed { background: rgba(239, 68, 68, .22); text-decoration: underline wavy; }
.pron-best { font-size: 16px; opacity: .75; }

/* poster panels shown as text when the crop would be too small to read */
.ptext { display: grid; gap: 12px; padding: 4px 2px; }
.pt-row { margin: 0; font-size: 18px; line-height: 1.4; }
.pt-row.h { font-size: 21px; font-weight: 800; }
.pt-emoji { font-size: 30px; margin-right: 6px; }

/* skills + weekly */
.sk-bars { display: grid; gap: 10px; }
.sk-bar { display: grid; grid-template-columns: 7.5em 1fr 3em; align-items: center; gap: 8px; font-size: 16px; }
.sk-track { height: 14px; border-radius: 8px; background: rgba(0, 0, 0, .09); overflow: hidden; }
.sk-fill { display: block; height: 100%; border-radius: 8px; background: var(--c, #2563eb); }
.sk-badges { display: grid; gap: 10px; }
.sk-badge { padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .05); display: grid; gap: 4px; }
.sk-badge.ready { background: rgba(34, 197, 94, .18); }
.sk-badge small { font-size: 16px; opacity: .8; }
.sk-radar { width: 100%; max-width: 340px; margin: 0 auto; display: block; }
.wk-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.wk-stat { padding: 10px 12px; border-radius: 14px; background: rgba(0, 0, 0, .05); display: grid; gap: 2px; }
.wk-stat b { font-family: 'Baloo 2', system-ui, sans-serif; font-size: 28px; line-height: 1.1; }
.wk-stat small { font-size: 16px; opacity: .8; }
.wk-spark { width: 100%; height: 70px; display: block; }

/* ---------- T30 background illustration ----------
   Desktop (>=600px): full picture fixed behind the centred app column. Mobile: lion hero on login / profile picker / PIN,
   a very light sky gradient on the Path. Lesson and exercise screens stay solid. Images only load when their media query matches. */
:root{
  --bg-dim:rgba(0,0,0,0);
  --sky-top:#3d9bf7;--sky-mid:#8cc8fb;--sky-low:#d9ecfd;
  --bg-img-desktop:url("/img/bg/e90-desktop.jpg");
  --bg-img-lion:url("/img/bg/e90-lion-mobile.webp");
}
:root[data-theme="dark"]{--bg-dim:rgba(8,14,36,.66)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg-dim:rgba(8,14,36,.66)}}
@supports (background-image:image-set(url("a.webp") type("image/webp"))){
  :root{--bg-img-desktop:image-set(url("/img/bg/e90-desktop.webp") type("image/webp"),url("/img/bg/e90-desktop.jpg") type("image/jpeg"))}
}

/* login / profile picker / PIN pad: sky + lion, cards stay solid above it */
.login-overlay{background:linear-gradient(var(--bg-dim),var(--bg-dim)),linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 48%,var(--sky-low) 100%);
  padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.login-card{position:relative;z-index:1;box-shadow:0 10px 30px rgba(14,40,100,.28)}
@media (max-width:599.98px){
  .login-overlay{place-items:start center;padding-top:max(28px,env(safe-area-inset-top))}
  .login-overlay::before{content:"";position:fixed;left:0;bottom:0;height:min(52dvh,470px);aspect-ratio:620/866;pointer-events:none;
    background:linear-gradient(var(--bg-dim),var(--bg-dim)),var(--bg-img-lion) left bottom/100% 100% no-repeat;
    -webkit-mask-image:linear-gradient(90deg,#000 62%,transparent 100%);mask-image:linear-gradient(90deg,#000 62%,transparent 100%)}
}
@media (min-width:600px){
  .login-overlay{background:linear-gradient(var(--bg-dim),var(--bg-dim)),var(--bg-img-desktop) center bottom/cover no-repeat,var(--sky-mid)}
}

/* desktop: picture fixed behind everything, the phone-like column keeps solid panels and a soft shadow */
@media (min-width:600px){
  body{background:var(--sky-mid)}
  body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(var(--bg-dim),var(--bg-dim)),var(--bg-img-desktop) center bottom/cover no-repeat}
  main,.topbar{box-shadow:0 0 48px rgba(14,40,100,.28)}
  .topbar{border-radius:0 0 26px 26px}
}

/* mobile Path: a very light sky that matches the picture, solid cards and nodes sit on top */
@media (max-width:599.98px){
  body:has(#app .path){background:linear-gradient(180deg,#d7ebff 0,#eaf5ff 240px,var(--bg) 560px) no-repeat,var(--bg)}
  :root[data-theme="dark"] body:has(#app .path){background:linear-gradient(180deg,#13265a 0,#101d45 240px,var(--bg) 560px) no-repeat,var(--bg)}
}
@media (max-width:599.98px) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body:has(#app .path){background:linear-gradient(180deg,#13265a 0,#101d45 240px,var(--bg) 560px) no-repeat,var(--bg)}
}

/* ---------- T32: glossary on phones (360-430px): single column, wrapping, compact filters, safe areas ---------- */
.gl-controls{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:10px;min-width:0}
.gl-controls>*{min-width:0}
.gl-search{width:100%;min-width:0;flex:none}
.gl-chips{display:flex;gap:8px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.gl-chips::-webkit-scrollbar{display:none}
.gl-chip{flex:none;min-height:44px;padding:6px 16px;border-radius:999px;border:3px solid var(--bd,var(--border));background:var(--surface);color:var(--text);font-family:var(--font,inherit);font-weight:800;font-size:1rem;text-transform:capitalize;white-space:nowrap;cursor:pointer}
.gl-chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.gl-selects{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.gl-selects select{width:100%;min-width:0;max-width:100%;text-overflow:ellipsis}
.gl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.gl-actions .btn{flex:1 1 160px;justify-content:center}
.gl-actions .hint{flex:1 1 auto;text-align:right;margin:0}
.gl-controls>.hint:empty{display:none}
.gl-more{height:1px}
.gl-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,310px),1fr))}
.gentry{min-width:0;max-width:100%}
.gen,.ves,.vex,.gmeta .hint,.gentry .hint{overflow-wrap:anywhere;min-width:0}
.gtop{min-width:0}
.gtop .pron{max-width:100%}
.gpair{display:flex;align-items:stretch;gap:6px;flex:1 1 150px;min-width:0}
.gpair>.speak:first-child{flex:1 1 auto;min-width:0;justify-content:center;margin-top:0}
.gpair>.slowbtn{flex:none}
.gactions .gadd{flex:1 1 100%}
@media (max-width:480px){
  .gentry{padding:12px;gap:10px;border-width:4px}
  .gmedia{width:56px;height:56px;font-size:1.9rem}
  .gen{font-size:1.3rem}
  .gactions .speak{padding:8px 10px;font-size:1rem}
  .gactions .speak.slowbtn{padding:8px 12px}
  .dplay .gpair{flex:1 1 100%}
  .dplay .gpair>.speak:first-child{padding:10px 14px}
  .dcard{padding:16px 12px}
}
/* word card: safe areas on all four sides, nothing clipped sideways */
.wordview .dhead{padding-left:max(10px,env(safe-area-inset-left,0px));padding-right:max(10px,env(safe-area-inset-right,0px))}
.wordview .dstage{padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));overflow-wrap:anywhere}
.wordview .dfoot{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.wordview .dcard{min-width:0;max-width:100%}
.wordview .dcard>*{min-width:0;max-width:100%}
.wordview .dword .g-pill{max-width:100%;overflow-wrap:anywhere;text-align:center}
.wordview .pron-row .btn,.wordview .pron-row .speak{min-width:0}
/* the T23 mic widget also uses the class .pron (display:grid; width:100%), which turned the pronunciation respelling button
   (.pron.pron-es, T29) into a stack of one syllable per row. The respelling pill keeps its own layout. */
button.pron.pron-es{display:inline-block;width:auto;max-width:100%;justify-items:normal;white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.3}
.brand{display:inline-flex;align-items:center;min-height:44px}