/* ============================================================
   LingoThai — components.css
   Buttons, cards, modals, lists, path, progress, badges, charts
   ============================================================ */

/* ---------------- BUTTONS ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:var(--r-md);padding:13px 24px;
  font-weight:700;font-size:var(--fs-body);line-height:1.2;
  transition:transform var(--t-fast),box-shadow var(--t-fast),filter var(--t-fast);
  box-shadow:var(--sh-btn) rgba(0,0,0,.14);
  user-select:none;
}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(0,0,0,.14)}
.btn:disabled{opacity:.42;pointer-events:none;filter:saturate(.4)}
.btn-primary{background:var(--brand-grad);color:#fff;box-shadow:var(--sh-btn) color-mix(in srgb,var(--brand-2) 70%,#000)}
.btn-primary:active{box-shadow:0 1px 0 color-mix(in srgb,var(--brand-2) 70%,#000)}
.btn-soft{background:var(--card);border:2px solid var(--line);box-shadow:var(--sh-btn) var(--line)}
.btn-soft:active{box-shadow:0 1px 0 var(--line)}
.btn-ok{background:var(--ok);color:#fff;box-shadow:var(--sh-btn) var(--ok-deep)}
.btn-ok:active{box-shadow:0 1px 0 var(--ok-deep)}
.btn-bad{background:var(--bad);color:#fff;box-shadow:var(--sh-btn) var(--bad-deep)}
.btn-bad:active{box-shadow:0 1px 0 var(--bad-deep)}
.btn-info{background:var(--info);color:#fff;box-shadow:var(--sh-btn) var(--info-deep)}
.btn-info:active{box-shadow:0 1px 0 var(--info-deep)}
.btn-ghost{background:transparent;box-shadow:none;color:var(--ink-2);padding:10px 14px}
.btn-ghost:active{transform:scale(.95);box-shadow:none}
.btn-wide{width:100%}
.btn-lg{padding:16px 30px;font-size:1.05rem;border-radius:var(--r-lg)}
.btn-sm{padding:8px 15px;font-size:var(--fs-sm);border-radius:var(--r-sm)}
.btn-row{display:flex;gap:10px}
.btn-row .btn{flex:1}

/* ---------------- CARDS ---------------- */
.card{background:var(--card);border-radius:var(--card-r);box-shadow:var(--sh-2);padding:20px}
.card-flat{background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-md);padding:16px}
.card-tap{transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);border:2px solid transparent;text-align:left;width:100%}
.card-tap:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:var(--acc,var(--brand-1))}
.card-tap:active{transform:scale(.975)}

.sec{margin-top:26px}
.sec-title{display:flex;align-items:center;gap:8px;font-size:var(--fs-h2);margin-bottom:12px}
.sec-title .more{margin-left:auto;font-size:var(--fs-xs);color:var(--ink-2);font-weight:500}

/* ---------------- HERO ---------------- */
.hero{
  margin-top:16px;background:var(--card);border-radius:var(--r-xl);box-shadow:var(--sh-2);
  padding:20px;display:flex;gap:16px;align-items:center;position:relative;overflow:hidden;
}
.hero::after{content:"";position:absolute;right:-50px;top:-50px;width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand-1) 16%,transparent),transparent 70%)}
.hero>*{position:relative;z-index:1}
.mascot{width:84px;height:84px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:3rem;
  background:linear-gradient(150deg,color-mix(in srgb,var(--brand-1) 22%,#fff),color-mix(in srgb,var(--brand-2) 22%,#fff));
  box-shadow:inset 0 -6px 0 rgba(0,0,0,.05)}
[data-mode="kid"] .mascot{animation:bob 3s ease-in-out infinite}
.hero h1{font-size:var(--fs-h1);margin-bottom:3px}
.hero p{color:var(--ink-2);font-size:var(--fs-sm);margin-bottom:11px}

/* ---------------- GOAL RING ---------------- */
.goal-wrap{display:flex;align-items:center;gap:16px}
.ring{width:74px;height:74px;flex:none;border-radius:50%;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--brand-1) calc(var(--p,0)*1%),var(--line) 0);transition:background .8s var(--ease)}
.ring i{width:60px;height:60px;border-radius:50%;background:var(--card);display:grid;place-items:center;
  font-family:var(--f-head);font-weight:700;font-size:.9rem;font-style:normal}
.ring.done{background:conic-gradient(var(--ok) 100%,var(--ok) 0)}

/* ---------------- STAT GRID ---------------- */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.stat-grid.four{grid-template-columns:repeat(4,1fr)}
.stat-box{background:var(--card);border-radius:var(--r-md);box-shadow:var(--sh-1);padding:12px 8px;text-align:center}
.stat-box .n{font-family:var(--f-head);font-weight:700;font-size:1.2rem;line-height:1.3}
.stat-box .l{font-size:var(--fs-xs);color:var(--ink-2)}

/* ---------------- PROGRESS BAR ---------------- */
.bar{height:9px;border-radius:99px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--acc-grad,var(--brand-grad));width:0;transition:width .8s var(--ease)}
.bar.thick{height:13px}

/* ---------------- LEVEL CARDS ---------------- */
.level-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:460px){.level-grid{grid-template-columns:1fr}}
.level-card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:16px;position:relative;overflow:hidden}
.level-card .em{font-size:2.2rem;display:inline-block}
.level-card h3{font-size:var(--fs-h3);margin:4px 0 1px}
.level-card .tag{font-size:var(--fs-xs);color:var(--ink-2);min-height:2.4em;line-height:1.5}
.level-card .cnt{font-size:var(--fs-xs);color:var(--ink-2);margin-top:7px}
.level-card .crown{position:absolute;top:10px;right:12px;font-size:1.2rem}
.level-card .cefr{position:absolute;top:12px;right:12px;font-size:.6rem;font-weight:700;letter-spacing:.5px;
  background:var(--sunk);border:1px solid var(--line);border-radius:99px;padding:2px 8px;color:var(--ink-2)}

/* ---------------- UNIT PATH ---------------- */
.path{position:relative;display:flex;flex-direction:column;gap:20px;padding:22px 0 8px}
.path-line{position:absolute;left:50%;top:0;bottom:0;width:4px;transform:translateX(-50%);border-radius:2px;
  background-image:linear-gradient(var(--line) 58%,transparent 0);background-size:4px 17px}
.node{position:relative;z-index:1;width:80%;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-2);
  padding:12px 14px;display:flex;align-items:center;gap:12px;text-align:left;border:2px solid transparent;
  transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast)}
.node:nth-child(odd){align-self:flex-start}
.node:nth-child(even){align-self:flex-end}
.node:hover{transform:translateY(-3px) scale(1.015);border-color:var(--acc);box-shadow:var(--sh-3)}
.node:active{transform:scale(.97)}
.node.locked{opacity:.55;filter:saturate(.5)}
.node .ring{width:56px;height:56px}
.node .ring i{width:46px;height:46px;font-size:1.5rem}
.node h4{font-size:.95rem;line-height:1.35}
.node .sub{font-size:var(--fs-xs);color:var(--ink-2);display:block}
.node .crown{position:absolute;top:-13px;right:12px;font-size:1.35rem;filter:drop-shadow(0 3px 4px rgba(0,0,0,.18))}
[data-mode="kid"] .node .crown{animation:bob 2.6s infinite}

/* ---------------- BLOCK HEADING (learning path) ---------------- */
.block-head{position:relative;z-index:2;align-self:stretch;display:flex;align-items:center;gap:12px;
  background:var(--card);border:2px dashed var(--acc,var(--brand-1));border-radius:var(--r-md);
  padding:12px 15px;margin:8px 0 2px;box-shadow:var(--sh-1)}
.block-head .bh-em{font-size:1.9rem;flex:none}
.block-head .bh-t{flex:1;min-width:0;display:flex;flex-direction:column}
.block-head .bh-t b{font-family:var(--f-head);font-size:.98rem;line-height:1.3}
.block-head .bh-t span{font-size:var(--fs-xs);color:var(--ink-2);line-height:1.5}
.block-head .chip{flex:none}
@media(max-width:460px){.block-head .chip{display:none}}

/* ---------------- LIST ROWS ---------------- */
.rows{display:flex;flex-direction:column;gap:9px}
.row-item{display:flex;align-items:center;gap:12px;background:var(--sunk);border:2px solid var(--line);
  border-radius:var(--r-md);padding:11px 13px;text-align:left;transition:var(--t-fast);width:100%}
.row-item:hover{border-color:var(--acc,var(--brand-1));transform:translateX(3px)}
.row-item:active{transform:scale(.98)}
.row-item.done{border-color:var(--ok-line);background:var(--ok-bg)}
.row-item.locked{opacity:.5;pointer-events:none}
/* "you were here" — the activity a refresh interrupted */
.row-item.hot{border-color:var(--acc,var(--brand-1));animation:hotPulse 1.5s var(--ease) 2}
@keyframes hotPulse{0%,100%{box-shadow:0 0 0 0 transparent}50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--acc,var(--brand-1)) 22%,transparent)}}
.row-item .rem{width:42px;height:42px;flex:none;display:grid;place-items:center;font-size:1.5rem;
  background:var(--card);border-radius:13px;box-shadow:var(--sh-1)}
.row-item .rt{flex:1;min-width:0}
.row-item h5{font-size:.92rem;line-height:1.35}
.row-item p{font-size:var(--fs-xs);color:var(--ink-2);line-height:1.5}
.row-item .rr{font-size:var(--fs-sm);font-weight:700;color:var(--gold);white-space:nowrap}

/* ---------------- OVERLAY / SHEET / MODAL ---------------- */
.overlay{position:fixed;inset:0;background:rgba(20,26,45,.5);z-index:90;opacity:0;transition:opacity var(--t);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.overlay.on{opacity:1}
.sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,105%);width:100%;max-width:var(--shell);
  background:var(--card);border-radius:var(--r-xl) var(--r-xl) 0 0;z-index:95;padding:8px 20px calc(24px + var(--safe-b));
  transition:transform var(--t-slow) var(--ease);max-height:88dvh;overflow-y:auto}
.sheet.on{transform:translate(-50%,0)}
.grip{width:46px;height:5px;border-radius:99px;background:var(--line-2);margin:6px auto 14px}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%) scale(.93);opacity:0;
  width:calc(100% - 32px);max-width:460px;background:var(--card);border-radius:var(--r-xl);z-index:95;
  padding:24px;transition:var(--t) var(--ease);max-height:86dvh;overflow-y:auto;box-shadow:var(--sh-3)}
.modal.on{transform:translate(-50%,-50%) scale(1);opacity:1}
.sheet-head{display:flex;gap:13px;align-items:center;margin-bottom:14px}
.sheet-head .em{font-size:2.4rem}
.sheet-head h3{font-size:var(--fs-h2)}
.sheet-head p{color:var(--ink-2);font-size:var(--fs-xs)}

/* ---------------- TOAST ---------------- */
.toast-host{position:fixed;top:10px;left:0;right:0;z-index:130;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{background:var(--ink);color:var(--page);border-radius:var(--r-md);padding:11px 18px;font-weight:600;
  font-size:var(--fs-sm);display:flex;gap:9px;align-items:center;box-shadow:var(--sh-3);max-width:92vw;
  transform:translateY(-140%);transition:transform .45s var(--sp),opacity var(--t)}
.toast.on{transform:none}
.toast.out{opacity:0;transform:translateY(-60%)}
.toast .tem{font-size:1.35rem}
.toast.gold{background:linear-gradient(135deg,#F5A623,#E8710A);color:#fff}
.toast.good{background:var(--ok);color:#fff}

/* ---------------- CONFETTI ---------------- */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:140;overflow:hidden}
.confetti i{position:absolute;top:-26px;border-radius:3px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(115vh) rotate(780deg);opacity:.9}}

/* ---------------- BADGES ---------------- */
.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(min-width:520px){.badge-grid{grid-template-columns:repeat(4,1fr)}}
.bdg{background:var(--sunk);border:2px solid var(--line);border-radius:var(--r-md);padding:12px 6px;text-align:center;transition:var(--t-fast)}
.bdg .bem{font-size:1.85rem;line-height:1.2}
.bdg h6{font-size:var(--fs-xs);margin-top:3px;font-family:var(--f-head);font-weight:500}
.bdg p{font-size:.62rem;color:var(--ink-2);line-height:1.45}
.bdg.locked{opacity:.42;filter:grayscale(1)}
.bdg.earned{border-color:var(--gold);background:var(--warn-bg)}
.bdg.earned .bem{animation:pop .5s var(--sp)}

/* ---------------- CHIPS / TAGS ---------------- */
.chip{display:inline-flex;align-items:center;gap:5px;background:var(--sunk);border:1px solid var(--line);
  border-radius:99px;padding:7px 13px;min-height:34px;font-size:var(--fs-xs);font-weight:600;white-space:nowrap}
button.chip{transition:transform var(--t-fast),border-color var(--t-fast)}
button.chip:active{transform:scale(.94)}
.chip.on{background:var(--brand-grad);color:#fff;border-color:transparent}
.chip.ok{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok-deep)}
.chip.bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad-deep)}
.chip-row{display:flex;gap:7px;flex-wrap:wrap}
.chip-scroll{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.chip-scroll::-webkit-scrollbar{display:none}

/* ---------------- SETTINGS ---------------- */
.set-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.set-row:last-child{border-bottom:none}
.set-row label{font-weight:600;font-size:var(--fs-sm)}
.set-row .hint{font-size:var(--fs-xs);color:var(--ink-2);font-weight:400;line-height:1.5}
.switch{position:relative;width:50px;height:29px;border-radius:99px;background:var(--line-2);transition:background var(--t);flex:none}
.switch.on{background:var(--ok)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:23px;height:23px;border-radius:50%;background:#fff;
  transition:left var(--t) var(--sp);box-shadow:0 2px 5px rgba(0,0,0,.22)}
.switch.on::after{left:24px}
.seg{display:inline-flex;background:var(--sunk);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px;gap:2px}
.seg button{padding:6px 13px;border-radius:99px;font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);transition:var(--t-fast)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--sh-1)}

/* ---------------- CHARTS (pure CSS/SVG) ---------------- */
.chart{width:100%;height:150px;display:block;overflow:visible}
.chart .grid-l{stroke:var(--line);stroke-width:1}
.chart .bar-r{fill:var(--brand-1);rx:4;transition:height .7s var(--ease),y .7s var(--ease)}
.chart .bar-r.dim{fill:var(--line-2)}
.chart .lbl{fill:var(--ink-3);font-size:9px;font-family:var(--f-body)}
.heat{display:grid;grid-template-columns:repeat(auto-fill,minmax(13px,1fr));gap:3px}
.heat i{aspect-ratio:1;border-radius:3px;background:var(--line)}
.heat i[data-l="1"]{background:color-mix(in srgb,var(--brand-1) 30%,var(--line))}
.heat i[data-l="2"]{background:color-mix(in srgb,var(--brand-1) 58%,var(--line))}
.heat i[data-l="3"]{background:var(--brand-1)}
.heat i[data-l="4"]{background:var(--brand-2)}

/* ---------------- CERTIFICATE ---------------- */
.cert{background:linear-gradient(150deg,#FFFDF6,#FFF4E3);border:3px double #D9A441;border-radius:14px;
  padding:26px 20px;text-align:center;color:#3A2E17;position:relative;overflow:hidden}
.cert::after{content:"";position:absolute;inset:8px;border:1px solid rgba(217,164,65,.4);border-radius:9px;pointer-events:none}
.cert .seal{font-size:2.6rem}
.cert h3{font-family:var(--f-head);font-size:1.25rem;margin:6px 0}
.cert .who{font-size:1.4rem;font-weight:700;font-family:var(--f-head);color:#8A6212;margin:10px 0;border-bottom:2px solid rgba(217,164,65,.45);display:inline-block;padding:0 22px 5px}
.cert .meta{font-size:var(--fs-xs);color:#6B5936;margin-top:10px}

/* ---------------- EMPTY / ERROR ---------------- */
.empty{text-align:center;background:var(--card);border-radius:var(--r-xl);box-shadow:var(--sh-2);padding:38px 22px;margin:26px auto;max-width:420px}
.empty .em{font-size:3rem;display:inline-block;animation:bob 2.6s infinite}
.empty h3{margin:8px 0 4px}
.empty p{color:var(--ink-2);font-size:var(--fs-sm)}

/* ---------------- PROFILE PICKER ---------------- */
.prof-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px}
.prof{background:var(--sunk);border:2px solid var(--line);border-radius:var(--r-md);padding:14px 8px;text-align:center;transition:var(--t-fast)}
.prof:hover{border-color:var(--brand-1);transform:translateY(-3px)}
.prof .pem{font-size:2.2rem}
.prof h6{font-size:var(--fs-xs);margin-top:4px;font-family:var(--f-head);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prof .plv{font-size:.6rem;color:var(--ink-2)}
.prof.on{border-color:var(--brand-1);background:color-mix(in srgb,var(--brand-1) 10%,var(--card))}
.emoji-pick{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin-top:8px}
.emoji-pick button{aspect-ratio:1;border-radius:12px;background:var(--sunk);border:2px solid transparent;font-size:1.4rem;transition:var(--t-fast)}
.emoji-pick button.on{border-color:var(--brand-1);background:var(--card);transform:scale(1.08)}

/* ---------------- PRINT: certificate only ---------------- */
@media print {
  .appbar, .tabbar, .bg-decor, .toast-host, .confetti, .overlay,
  .view, .btn-row, .boot { display: none !important; }
  html, body { background: #fff !important; }
  #layer .modal {
    position: static !important; transform: none !important; opacity: 1 !important;
    max-width: 100% !important; width: 100% !important; max-height: none !important;
    box-shadow: none !important; padding: 0 !important; overflow: visible !important;
  }
  .cert {
    box-shadow: none !important; break-inside: avoid;
    width: 100%; min-height: 90vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
  }
  .cert .seal { font-size: 4rem }
  .cert h3 { font-size: 2rem }
  .cert .who { font-size: 2.4rem }
}

/* ---------------- STEPPER / WIZARD ---------------- */
.steps{display:flex;gap:6px;justify-content:center;margin-bottom:16px}
.steps i{width:26px;height:5px;border-radius:99px;background:var(--line);transition:background var(--t)}
.steps i.on{background:var(--brand-grad)}