/* The roadmap as scratch paper (option lt-nhap, 19/10): one page of ruled paper per problem; a new problem (or another exercise of a
   page) is a new page below, the pages before stay above, dimmed. Switched on with ?lt=nhap or the adults' strip; everything here is
   scoped under .lt-nhap. The cards of the roadmap are the same markup as the default view (.blk-plan), only dressed as paper.
   One line-height (28px) for the page so the ruled lines stay under the text. Phone (≤1000px): hidden, the drawer "Hành trình" stays. */
.board-nhap { display: none; }
.nhap-tap { display: flex; align-items: center; gap: 6px; font-family: "Patrick Hand", var(--display, inherit); font-size: 15px; letter-spacing: .02em;
  color: var(--ink2, #475569); padding: 2px 6px 6px; position: sticky; top: 0; z-index: 2; background: var(--surface-bg, #f1f5f9); border-radius: 10px; }

@media (min-width: 1001px) {
  .lv4.lt-nhap .board-card.nowcol:not(.full):has(> .board-nhap .nhap-trang) {
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); column-gap: 14px;   /* 30% the lesson, 70% the scratch paper */
  }
  .lv4.lt-nhap .board-card.nowcol:not(.full):has(> .board-nhap .nhap-trang) > :is(.nowtop, .say, .composer, .dock) { grid-column: 1 / -1; }
  .lv4.lt-nhap .board-card.nowcol:not(.full) > .board-nhap:has(.nhap-trang) {
    display: flex; flex-direction: column; gap: 14px; grid-column: 2; grid-row: 2; min-height: 0; overflow: auto; padding: 0 4px 8px 0;
    scroll-behavior: smooth; scroll-snap-type: y proximity;
  }
}

.lt-nhap .nhap-trang {
  --papel: #fffdf2; --linha: rgba(70, 120, 190, .26); --margem: #e58b8b; --tinta: #1d4ed8; --grafite: #4b5563; --caneta: #cf3b3b;
  position: relative; flex: none; scroll-snap-align: start; padding: 10px 14px 18px 44px; border-radius: 6px 14px 14px 6px;
  background-color: var(--papel);
  background-image: linear-gradient(to right, transparent 33px, var(--margem) 33px 34.5px, transparent 34.5px),
                    repeating-linear-gradient(to bottom, transparent 0 27px, var(--linha) 27px 28px);
  background-position: 0 0, 0 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12), 0 6px 14px rgba(0, 0, 0, .08);
  font-size: 15px; line-height: 28px; color: #222;
}
.lt-nhap .nhap-trang::before { content: ""; position: absolute; left: 10px; top: 16px; width: 12px; height: 12px; border-radius: 50%;
  background: rgba(0, 0, 0, .09); box-shadow: 0 40px 0 rgba(0, 0, 0, .09), 0 80px 0 rgba(0, 0, 0, .09); }   /* the punched holes */
.lt-nhap .nhap-trang.cu { opacity: .72; filter: saturate(.85); }
.lt-nhap .nhap-dau { margin-bottom: 4px; }
.lt-nhap .nhap-so { display: inline-block; font-family: "Patrick Hand", var(--display, inherit); font-size: 17px; line-height: 28px; color: var(--grafite);
  border-bottom: 2px solid var(--caneta); }
.lt-nhap .nhap-de { margin: 0; font-style: italic; color: var(--grafite); font-size: 13.5px; line-height: 28px; display: -webkit-box;
  -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-height: 56px; }

/* the roadmap card in the page: no card, just lines of notes */
.lt-nhap .nhap-trang .blk-plan { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
.lt-nhap .nhap-trang .blk-plan > .overline { display: none; }
.lt-nhap .nhap-trang .plan-steps { gap: 0; margin: 0; }
.lt-nhap .nhap-trang .plan-steps > li { background: transparent !important; box-shadow: none !important; padding: 0 0 0 0; gap: 8px; align-items: flex-start;
  border-radius: 0; animation: none !important; }
.lt-nhap .nhap-trang .plan-steps .dot { width: 24px; height: 24px; margin-top: 2px; font-size: 14px; font-family: "Patrick Hand", var(--display, inherit);
  background: transparent !important; color: var(--grafite) !important; border: 2px solid var(--grafite); }
.lt-nhap .nhap-trang .plan-steps li.current .dot { background: #ffe66d !important; border-color: var(--grafite); color: #222 !important; }
.lt-nhap .nhap-trang .plan-steps li.done .dot { border-color: var(--caneta); color: var(--caneta) !important; }
.lt-nhap .nhap-trang .plan-steps li.done .dot svg { stroke: var(--caneta); color: var(--caneta); }
.lt-nhap .nhap-trang .plan-steps .st { font-size: 15px; line-height: 28px; font-weight: 800; color: #1f2937; }
.lt-nhap .nhap-trang .plan-steps li.current .st { background: linear-gradient(transparent 55%, #ffe66d 55%); display: inline; }
.lt-nhap .nhap-trang .plan-steps li.todo .st { color: var(--grafite); font-weight: 700; }
.lt-nhap .nhap-trang .plan-steps .res { font-family: "Patrick Hand", var(--display, inherit); font-size: 18px; line-height: 28px; color: var(--tinta); font-weight: 400; }
.lt-nhap .nhap-trang .plan-steps .res:not(:empty)::before { content: "= "; }
.lt-nhap .nhap-trang .asks { list-style: none; margin: 0; padding: 0; }
.lt-nhap .nhap-trang .asks > li { background: transparent !important; box-shadow: none !important; padding: 0; margin: 0; border: 0; animation: none !important; }
.lt-nhap .nhap-trang .asks .q { font-size: 13.5px; line-height: 28px; color: var(--grafite); }
.lt-nhap .nhap-trang .asks .q:not(:empty)::before { content: "? "; color: var(--caneta); font-weight: 800; }
.lt-nhap .nhap-trang .asks .hint { font-size: 13px; line-height: 28px; font-style: italic; color: var(--grafite); }
.lt-nhap .nhap-trang .asks .a { font-family: "Patrick Hand", var(--display, inherit); font-size: 18px; line-height: 28px; color: var(--tinta); }
.lt-nhap .nhap-trang .asks .a:not(:empty)::before { content: "→ "; }
.lt-nhap .nhap-trang .conclude { background: transparent !important; border: 2px solid var(--tinta); border-radius: 8px; margin: 8px 0 0; padding: 2px 10px;
  font-family: "Patrick Hand", var(--display, inherit); font-size: 18px; line-height: 28px; color: var(--tinta); transform: rotate(-.6deg); box-shadow: none; }
.lt-nhap .nhap-trang .conclude .overline { color: var(--caneta); font-size: 12px; line-height: 20px; }
.lt-nhap .nhapbtn[aria-pressed="true"] { background: #ffe66d; color: #222; }
@media (prefers-color-scheme: dark) { .lt-nhap .nhap-trang { --papel: #f6f2e3; } }