/* ============================================================
   "এই লেসন থেকে টাকা", the money panel under every lesson.

   Why this file exists: the panel (inc/auto/lesson-money.php) sits inside
   Tutor's lesson player, which has its own styles, so it needs its own small
   sheet, loaded on lesson pages only (and on the admin preview page). The
   panel shows one lesson's money plan: today's task, the income paths as
   tabs (a scrolling row of chips on phones), and per path the money source,
   facts, rate, checklist, message, prompts and what not to do.
   Paper Dusk only: paper, ink and terracotta (docs/design/paper-dusk.md);
   text, links and button fills use the darker terracotta --pd-accent-2 for
   contrast, the bright one is kept for ticks, rules and focus. Motion is
   transform and opacity only and exists only under .lm-anim, which
   lesson-money.js adds when html.pd-js says motion is welcome; without it
   everything is simply visible.
   ============================================================ */

.lm {
  --lm-paper: var(--pd-paper, #EDE6D6);
  --lm-paper-2: var(--pd-paper-2, #F6F0E3);
  --lm-paper-3: var(--pd-paper-3, #E2D8C4);
  --lm-line: var(--pd-line, #d9cfba);
  --lm-ink: var(--pd-ink, #2B2A33);
  --lm-ink-2: var(--pd-ink-2, #5D5A64);
  --lm-ink-3: var(--pd-ink-3, #1F1D24);
  --lm-accent: var(--pd-accent, #B9533C);
  --lm-accent-2: var(--pd-accent-2, #9C4130);
  --lm-tint: var(--pd-accent-tint, rgba(185,83,60,.18));
  margin: 24px 0 28px;
  padding: 20px 22px 22px;
  background: var(--lm-paper);
  border: 1px solid var(--lm-line);
  border-top: 4px solid var(--lm-accent);
  border-radius: 12px;
  color: var(--lm-ink);
  font-family: "Hind Siliguri", system-ui, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.6;
}
.lm *, .lm *::before, .lm *::after { box-sizing: border-box; }
.lm [hidden] { display: none !important; }

/* ---- heading, which is the phone toggle */
.lm .lm-h { margin: 0 0 14px; font-size: inherit; line-height: 1.3; }
.lm .lm-toggle {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px;
  width: 100%; margin: 0; padding: 0; border: 0; background: none; color: var(--lm-ink);
  font: inherit; text-align: left; cursor: pointer;
}
.lm .lm-toggle:disabled { cursor: default; opacity: 1; color: var(--lm-ink); }
.lm .lm-toggle:focus-visible { outline: 3px solid var(--lm-accent); outline-offset: 2px; border-radius: 6px; }
.lm .lm-h-t { font-size: var(--fs-xl); font-weight: 700; line-height: 1.3; }
.lm .lm-h-sub { grid-column: 1; font-size: var(--fs-sm); font-weight: 400; color: var(--lm-ink-2); line-height: 1.45; }
.lm .lm-chev { grid-column: 2; grid-row: 1 / span 2; color: var(--lm-accent-2); transition: transform .25s ease; }
.lm .lm-toggle:disabled .lm-chev { display: none; }
.lm .lm-toggle[aria-expanded="false"] .lm-chev { transform: rotate(-90deg); }
.lm.is-closed .lm-body { display: none; }
.lm.is-closed .lm-h { margin-bottom: 0; }

.lm .lm-body { display: grid; gap: 14px; min-width: 0; }

.lm h3 { margin: 0 0 8px; font-size: var(--fs-md); font-weight: 700; line-height: 1.35; color: var(--lm-ink); }
.lm p { margin: 0 0 8px; }
.lm p:last-child { margin-bottom: 0; }
.lm .lm-fine { font-size: var(--fs-xs); color: var(--lm-ink-2); line-height: 1.55; }
.lm .lm-sub-h { margin: 12px 0 6px; font-size: var(--fs-sm); font-weight: 700; }

.lm .lm-task {
  margin: 0; padding: 12px 14px; border-radius: 8px;
  background: var(--lm-tint);
  line-height: 1.6;
}
.lm .lm-task b { color: var(--lm-accent-2); }

.lm .lm-card {
  min-width: 0; padding: 16px; background: var(--lm-paper-2); border: 1px solid var(--lm-line);
  border-radius: 10px; box-shadow: 0 1px 0 rgba(43,42,51,.04), 0 6px 18px -12px rgba(43,42,51,.25);
}

/* ---- tabs: the income paths */
.lm .lm-tabs-wrap { min-width: 0; }
.lm .lm-tabs-l { margin: 0 0 8px; font-size: var(--fs-sm); font-weight: 700; color: var(--lm-ink-2); }
.lm .lm-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.lm .lm-tab {
  display: grid; gap: 0; min-height: 48px; max-width: 100%; padding: 8px 14px; margin: 0;
  text-align: left; font: inherit; color: var(--lm-ink); cursor: pointer;
  background: var(--lm-paper-2); border: 2px solid var(--lm-line); border-radius: 10px;
  transition: transform .15s ease, border-color .15s ease, background-color .15s ease;
}
.lm .lm-tab:hover { border-color: var(--lm-ink-2); transform: translateY(-2px); }
.lm .lm-tab:focus-visible { outline: 3px solid var(--lm-accent); outline-offset: 2px; }
.lm .lm-tab[aria-selected="true"] { background: var(--lm-ink); border-color: var(--lm-ink); color: var(--lm-paper); transform: none; }
.lm .lm-tab-type { font-size: var(--fs-xs); font-weight: 700; line-height: 1.4; color: var(--lm-accent-2); }
.lm .lm-tab[aria-selected="true"] .lm-tab-type { color: #E8B3A5; }
.lm .lm-tab-t { font-size: var(--fs-base); font-weight: 700; line-height: 1.4; }

/* ---- one path */
.lm .lm-path { display: grid; gap: 14px; min-width: 0; }
.lm .lm-path:focus-visible { outline: 3px solid var(--lm-accent); outline-offset: 4px; border-radius: 10px; }
.lm .lm-badge {
  display: inline-block; margin: 0 0 6px; padding: 2px 10px; border-radius: 99px;
  font-size: var(--fs-xs); font-weight: 700; line-height: 1.5;
  background: var(--lm-tint); color: var(--lm-accent-2);
}
.lm .lm-badge-own { background: var(--lm-ink); color: var(--lm-paper); }
.lm .lm-badge-product { background: transparent; color: var(--lm-ink); box-shadow: inset 0 0 0 1.5px var(--lm-ink); }
.lm .lm-money b { font-weight: 700; color: var(--lm-accent-2); }
.lm .lm-facts, .lm .lm-no { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lm .lm-facts li {
  position: relative; padding: 8px 12px 8px 30px; border-radius: 8px; background: var(--lm-paper);
  font-size: var(--fs-sm); line-height: 1.55;
}
.lm .lm-facts li::before {
  content: ""; position: absolute; left: 12px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--lm-accent);
}
.lm .lm-src { display: inline-block; font-size: var(--fs-xs); color: var(--lm-ink-2); font-weight: 700; }
.lm .lm-rates { list-style: none; margin: 12px 0 8px; padding: 0; display: grid; gap: 6px; }
.lm .lm-rates li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 8px 12px; border: 1px dashed var(--lm-line); border-radius: 8px; background: var(--lm-paper);
  line-height: 1.45;
}
.lm .lm-rates b { color: var(--lm-accent-2); font-size: var(--fs-md); font-weight: 700; white-space: nowrap; }

/* ---- checklist */
.lm .lm-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-weight: 700; }
.lm .lm-bar { flex: 1; height: 8px; border-radius: 99px; background: var(--lm-paper-3); overflow: hidden; }
.lm .lm-bar i { display: block; height: 100%; background: var(--lm-accent); transform-origin: left center; transition: transform .45s ease; }
.lm .lm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lm .lm-list li { position: relative; }
.lm .lm-cb { position: absolute; opacity: 0; width: 24px; height: 24px; left: 12px; top: 12px; margin: 0; }
.lm .lm-list label {
  display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; margin: 0;
  border-radius: 8px; cursor: pointer; line-height: 1.55; min-height: 44px;
}
.lm .lm-list label:hover { background: var(--lm-paper); }
.lm .lm-cb:disabled + label { cursor: default; }
.lm .lm-box {
  flex: 0 0 24px; height: 24px; margin-top: 1px; display: grid; place-items: center;
  border: 2px solid var(--lm-ink-2); border-radius: 6px; background: var(--lm-paper-2); color: transparent;
}
.lm .lm-box svg { transform: scale(.4); opacity: 0; transition: transform .2s ease, opacity .2s ease; }
.lm .lm-cb:checked + label .lm-box { background: var(--lm-accent-2); border-color: var(--lm-accent-2); color: var(--lm-paper); }
.lm .lm-cb:checked + label .lm-box svg { transform: scale(1); opacity: 1; }
.lm .lm-cb:checked + label .lm-step { color: var(--lm-ink-2); text-decoration: line-through; text-decoration-color: var(--lm-accent); text-decoration-thickness: 2px; }
.lm .lm-cb:focus-visible + label { outline: 3px solid var(--lm-accent); outline-offset: 2px; }
.lm .lm-save { min-height: 1.5em; margin-top: 6px; font-size: var(--fs-xs); color: var(--lm-ink-2); }

/* ---- copy: messages and prompts */
.lm .lm-snip + .lm-snip { margin-top: 16px; }
.lm .lm-snip-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.lm .lm-snip-top .lm-snip-l { margin: 0; }
.lm .lm-snip-l { font-weight: 700; font-size: var(--fs-sm); margin-bottom: 6px; }
.lm .lm-lang { display: inline-flex; padding: 3px; gap: 2px; border-radius: 99px; background: var(--lm-paper-3); }
.lm .lm-lang-b {
  min-height: 36px; min-width: 44px; margin: 0; padding: 4px 14px; border: 0; border-radius: 99px;
  font: inherit; font-size: var(--fs-xs); font-weight: 700; line-height: 1.3; color: var(--lm-ink-2); background: transparent; cursor: pointer;
}
.lm .lm-lang-b[aria-pressed="true"] { background: var(--lm-ink); color: var(--lm-paper); }
.lm .lm-lang-b:focus-visible { outline: 3px solid var(--lm-accent); outline-offset: 2px; }
.lm .lm-text, .lm .lm-code {
  margin: 0 0 8px; padding: 12px 14px; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
  max-width: 100%; overflow: visible; border-radius: 8px;
}
.lm .lm-text {
  font: inherit; font-size: var(--fs-sm); line-height: 1.65; color: var(--lm-ink);
  background: var(--lm-paper); border: 1px solid var(--lm-line); border-left: 3px solid var(--lm-accent);
}
.lm .lm-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Hind Siliguri", monospace;
  font-size: var(--fs-xs); line-height: 1.65; color: var(--lm-paper); background: var(--lm-ink-3);
  border: 0; max-height: 320px; overflow: auto;
}
/* Bangla prompts: monospace fonts have no Bangla, and their wide spaces tear the words apart. */
.lm .lm-code-bn { font-family: "Hind Siliguri", system-ui, sans-serif; font-size: var(--fs-sm); }

/* ---- what not to do */
.lm .lm-no li { position: relative; padding: 4px 0 4px 30px; line-height: 1.55; }
.lm .lm-no li::before {
  content: ""; position: absolute; left: 4px; top: 9px; width: 16px; height: 16px; border-radius: 50%;
  background:
    linear-gradient(45deg, transparent 44%, var(--lm-paper-2) 44%, var(--lm-paper-2) 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--lm-paper-2) 44%, var(--lm-paper-2) 56%, transparent 56%),
    var(--lm-accent-2);
}

/* ---- buttons */
.lm .lm-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 18px;
  border: 0; border-radius: 10px; background: var(--lm-accent-2); color: var(--lm-paper);
  font: inherit; font-weight: 700; font-size: var(--fs-sm); line-height: 1.3; cursor: pointer;
  box-shadow: 0 4px 0 var(--lm-ink-3); transition: transform .12s ease, box-shadow .12s ease;
}
.lm .lm-btn:hover { color: var(--lm-paper); }
.lm .lm-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--lm-ink-3); }
.lm .lm-btn:focus-visible { outline: 3px solid var(--lm-accent); outline-offset: 2px; }
.lm .lm-btn.is-copied { background: var(--lm-ink); }
.lm .lm-btn-ghost { background: transparent; color: var(--lm-ink); box-shadow: inset 0 0 0 2px var(--lm-ink); min-height: 40px; }
.lm .lm-btn-ghost:hover { color: var(--lm-ink); background: var(--lm-paper); }
.lm .lm-btn-ghost:active { box-shadow: inset 0 0 0 2px var(--lm-ink); }
.lm .lm-btn-ghost.is-copied { color: var(--lm-paper); background: var(--lm-ink); }

/* ---- read more, stuck */
.lm .lm-foot { display: grid; gap: 14px; min-width: 0; }
.lm .lm-links { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.lm .lm-links:last-child { margin-bottom: 0; }
.lm .lm-links a { color: var(--lm-accent-2); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.lm .lm-links a:hover { color: var(--lm-ink); }
.lm .lm-up { display: block; font-size: var(--fs-xs); color: var(--lm-ink-2); line-height: 1.55; }
.lm .lm-win { padding-top: 12px; border-top: 1px dashed var(--lm-line); }
.lm .lm-win-d > summary { list-style: none; }
.lm .lm-win-d > summary::-webkit-details-marker { display: none; }
.lm .lm-win-ok, .lm .lm-win-bad { font-weight: 700; }
.lm .lm-win-bad { color: var(--lm-accent-2); }
.lm .lm-win-form { display: grid; gap: 10px; margin-top: 14px; }
.lm .lm-f { display: grid; gap: 4px; font-size: var(--fs-sm); }
.lm .lm-f input, .lm .lm-f textarea {
  width: 100%; padding: 10px 12px; font: inherit; line-height: 1.5; color: var(--lm-ink);
  background: var(--lm-paper); border: 1px solid var(--lm-line); border-radius: 8px;
}
.lm .lm-f input:focus, .lm .lm-f textarea:focus { outline: 3px solid var(--lm-accent); outline-offset: 1px; }
.lm .lm-consent { display: flex; gap: 8px; align-items: flex-start; font-size: var(--fs-xs); line-height: 1.5; }
.lm .lm-consent input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--lm-accent-2); }

/* ---- motion (only with .lm-anim, set by JS when motion is welcome) */
.lm.lm-anim .lm-task, .lm.lm-anim .lm-tabs-wrap, .lm.lm-anim .lm-card { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.lm.lm-anim .in { opacity: 1 !important; transform: none !important; }
.lm.lm-anim .lm-path.is-enter .lm-card { animation: lm-in .35s ease both; }
.lm.lm-anim .lm-path.is-enter .lm-card:nth-child(2) { animation-delay: 60ms; }
.lm.lm-anim .lm-path.is-enter .lm-card:nth-child(3) { animation-delay: 120ms; }
.lm.lm-anim .lm-path.is-enter .lm-card:nth-child(4) { animation-delay: 180ms; }
@keyframes lm-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lm .lm-list li.just .lm-box { animation: lm-pop .35s ease; }
@keyframes lm-pop { 0% { transform: scale(.8); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.lm .lm-path.is-all .lm-bar i { animation: lm-glow 1s ease 1; }
@keyframes lm-glow { 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) {
  .lm *, .lm *::before, .lm *::after { animation: none !important; transition: none !important; }
  .lm.lm-anim .lm-task, .lm.lm-anim .lm-tabs-wrap, .lm.lm-anim .lm-card { opacity: 1; transform: none; }
}

/* ---- desktop: two columns for the cards of a path */
@media (min-width: 1100px) {
  .lm .lm-path { grid-template-columns: 1fr 1fr; align-items: start; }
  .lm .lm-foot { grid-template-columns: 1fr 1fr; align-items: start; }
  .lm .lm-foot > .lm-card:only-child { grid-column: 1 / -1; }
}

/* ---- phones: the tabs become one scrolling row of chips */
@media (max-width: 767px) {
  .lm { margin: 16px; padding: 16px 14px 18px; }
  .lm .lm-h-t { font-size: var(--fs-lg); }
  .lm .lm-card { padding: 14px 12px; }
  .lm .lm-tabs {
    /* wrapping chips, not a sideways scroller (no sliders, October 2026) */
    flex-wrap: wrap; gap: 8px; margin: 0; padding: 2px 0 8px;
  }
  .lm .lm-tab { flex: 1 1 auto; max-width: 100%; min-width: 0; }
  .lm .lm-tab:hover { transform: none; }
  .lm .lm-tab-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lm .lm-rates li { flex-direction: column; gap: 2px; }
  .lm .lm-btn { width: 100%; }
}