/* v12.74.0: Idea Journals. A page is its own picture with answer boxes laid
   over it at fractions of its size, so it scales on any screen; type sizes
   follow the page width (container query units). */
.jr { max-width: 940px; margin: 0 auto; }
.jr-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.jr-bar select { max-width: 360px; }
.jr-count { margin-left: auto; font-size: .92rem; }
.jr-saved { font-size: .85rem; color: #6b7280; min-width: 70px; }
.jr-note { background: #fff7e6; border: 1px solid #f5d79e; border-radius: 10px; padding: 8px 12px; font-size: .9rem; }
.jr-stage { width: 100%; }
.jr-page { position: relative; width: 100%; container-type: inline-size; background: #fff;
  box-shadow: 0 2px 14px rgba(15, 23, 42, .12); border-radius: 6px; overflow: hidden; user-select: none; }
.jr-page .jr-bg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.jr-f { position: absolute; box-sizing: border-box; margin: 0; border: 0; border-radius: 3px;
  background: rgba(255, 236, 140, .18); color: #1d3b8f; font-family: "Segoe Print", "Comic Sans MS", "Chalkboard SE", system-ui, sans-serif;
  font-size: clamp(11px, 1.55cqw, 19px); line-height: 1.2; padding: 0 .35em; user-select: text; }
.jr-f:hover { background: rgba(255, 236, 140, .32); }
.jr-f:focus { outline: 2px solid #4F46B8; background: rgba(255, 255, 255, .85); }
input.jr-line { padding-top: .1em; }
textarea.jr-box { resize: none; padding: .3em .45em; overflow: auto; }
.jr-draw { display: flex; align-items: center; justify-content: center; background: rgba(255, 236, 140, .12); }
.jr-draw img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.jr-draw-btns { position: relative; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.jr-draw-btns .btn { background: rgba(255, 255, 255, .92); }
.jr-ro { overflow: hidden; white-space: pre-wrap; cursor: pointer; background: rgba(79, 70, 184, .06); }
.jr-ro.is-empty { background: rgba(148, 163, 184, .12); }
.jr-ro.jr-t-line { display: flex; align-items: flex-end; white-space: nowrap; text-overflow: ellipsis; padding-bottom: .3em; }
.jr-cbadge { position: absolute; transform: translate(-60%, -40%); font-size: clamp(12px, 1.8cqw, 20px); pointer-events: none; }
.jr-brand { position: absolute; left: 50%; bottom: 1.1%; transform: translateX(-50%); font-size: clamp(8px, .95cqw, 12px);
  color: #6b7280; letter-spacing: .02em; pointer-events: none; }
.jr-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 14px 0 0; }
.jr-comments { margin: 14px 0 0; }
.jr-comments h4, .jr-cform h4 { margin: 0 0 8px; }
.jr-comment { position: relative; border: 1px solid #e5e7eb; border-left: 4px solid #94a3b8; border-radius: 8px; padding: 8px 36px 8px 12px; margin: 0 0 8px; background: #fff; }
.jr-comment p { margin: 4px 0; white-space: pre-wrap; }
.jr-k-diamond { border-left-color: #0089c2; }
.jr-k-spade { border-left-color: #2e9e5b; }
.jr-cdel { position: absolute; top: 6px; right: 6px; }
.jr-cform { margin: 16px 0 0; padding: 12px; border: 1px dashed #cbd5e1; border-radius: 10px; }
.jr-kinds { display: flex; flex-direction: column; gap: 4px; margin: 0 0 8px; }
.jr-import { border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 14px; background: #fafaff; }
.jr-import summary { cursor: pointer; }
.jr-place { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* the box editor */
.jr-ed { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.jr-ed-side { position: sticky; top: 70px; }
@media (max-width: 900px) { .jr-ed { grid-template-columns: 1fr; } .jr-ed-side { position: static; } }
.jr-editing { cursor: default; touch-action: none; }
.is-adding .jr-editing { cursor: crosshair; }
.jr-ed-f { position: absolute; box-sizing: border-box; border: 2px solid #dc2647; background: rgba(220, 38, 71, .12); cursor: move; border-radius: 2px; }
.jr-ed-f.jr-t-box { border-color: #16a34a; background: rgba(22, 163, 74, .12); }
.jr-ed-f.jr-t-draw { border-color: #7c3aed; background: rgba(124, 58, 237, .12); }
.jr-ed-f.is-sel { box-shadow: 0 0 0 3px #f59e0b; z-index: 2; }
.jr-ed-lab { position: absolute; left: 2px; top: -1.35em; font-size: 11px; white-space: nowrap; max-width: 280px; overflow: hidden; text-overflow: ellipsis;
  background: rgba(255, 255, 255, .9); color: #111827; padding: 0 4px; border-radius: 3px; pointer-events: none; display: none; }
.jr-ed-f.is-sel .jr-ed-lab, .jr-ed-f:hover .jr-ed-lab { display: block; }
.jr-ed-h { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; background: #f59e0b; border: 2px solid #fff; border-radius: 3px; cursor: nwse-resize; }
/* the drawing pad */
.jr-pad-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 8px; }
.jr-pen { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #cbd5e1; cursor: pointer; }
.jr-pen.is-on { box-shadow: 0 0 0 3px #4F46B8; }

/* v12.78.0: the Weekly quizzes timeline (Key dates style) */
.wq2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.wq2-chip { border: 1.5px solid #e2def8; background: #fff; color: #1f2340; border-radius: 999px; padding: 7px 15px; font: inherit; font-weight: 700; cursor: pointer; min-height: 38px; }
.wq2-chip:hover { border-color: #4F46B8; }
.wq2-chip.is-on { border-color: #4F46B8; color: #4F46B8; box-shadow: 0 0 0 2px rgba(79, 70, 184, .15); }
.wq2-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.wq2-stat { background: #fff; border: 1px solid #ebe9f7; border-radius: 14px; padding: 10px 14px; flex: 1 1 150px; min-width: 0; }
.wq2-stat b { display: block; font-size: 22px; color: #26295a; }
.wq2-stat b.wq2-small-b { font-size: 16px; padding-top: 5px; }
.wq2-stat span { font-size: 13px; color: #6b6f8a; font-weight: 700; }
.wq2-tabs { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid #ebe9f7; margin: 0 0 14px; }
.wq2-tab { border: 0; background: transparent; padding: 10px 2px; margin-right: 20px; font: inherit; font-weight: 800; color: #6b6f8a; cursor: pointer; border-bottom: 3px solid transparent; min-height: 44px; }
.wq2-tab.is-on { color: #3F27BD; border-bottom-color: #4F46B8; }
.wq2-jump { margin-left: auto; border: 0; background: none; color: #4F46B8; font: inherit; font-weight: 800; cursor: pointer; min-height: 44px; }
.wq2-tl { position: relative; padding-left: 44px; margin: 10px 0; }
.wq2-tl:before { content: ""; position: absolute; left: 15px; top: 6px; bottom: 6px; width: 3px; background: #e4e1fb; border-radius: 3px; }
.wq2-row { position: relative; padding: 10px 0 14px; }
.wq2-row.wq2-small { padding: 6px 0 10px; }
.wq2-dot { position: absolute; left: -38px; top: 13px; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; background: #fff; border: 2.5px solid #8b84e0; }
.wq2-dot.is-done { background: #3fae7d; border-color: #3fae7d; }
.wq2-dot.is-part { background: #f2c14e; border-color: #f2c14e; }
.wq2-dot.is-todo { border-color: #e0901b; border-width: 3px; }
.wq2-dot.is-lock { border-color: #c9c6e6; }
.wq2-dot.is-now { width: 22px; height: 22px; left: -42px; top: 9px; border: 4px solid #4F46B8; box-shadow: 0 0 0 5px rgba(79, 70, 184, .15); }
.wq2-dot.is-mock, .wq2-dot.is-exam { width: 20px; height: 20px; left: -41px; top: 10px; border: 3.5px solid #8b5cf6; }
.wq2-dot.is-mockdone { width: 20px; height: 20px; left: -41px; top: 10px; background: #3fae7d; border-color: #3fae7d; }
.wq2-dot.is-break { width: 10px; height: 10px; left: -36px; top: 11px; background: #d9d6ee; border: 0; }
.wq2-dot.is-term { width: 10px; height: 10px; left: -36px; top: 11px; background: #8b84e0; border: 0; }
.wq2-date { font-weight: 800; color: #8a8ea8; }
.wq2-row.is-cur .wq2-date { color: #3F27BD; }
.wq2-wk { font-weight: 800; color: #5b5f7a; }
.wq2-tag { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 800; margin-left: 8px; vertical-align: 2px; }
.wq2-tag.is-now { background: #4F46B8; color: #fff; }
.wq2-tag.is-todo { background: #fff3dc; color: #8a4b00; }
.wq2-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; margin-top: 8px; background: #fff; border: 1px solid #ebe9f7; border-radius: 12px; padding: 10px 14px; }
.wq2-row.is-cur .wq2-item { border-color: #cfc9f5; }
.wq2-row.is-past .wq2-item { background: #fbfbfe; }
.wq2-slot { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #8a8ea8; }
.wq2-ttl { font-weight: 700; color: #26295a; }
.wq2-row.is-alldone .wq2-ttl { color: #7d7fa6; }
.wq2-meta { font-size: 13px; color: #6b6f8a; }
.wq2-pill { border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.wq2-pill.is-done { background: #e3f6ec; color: #17643f; }
.wq2-pill.is-todo { background: #fff1d6; color: #8a4b00; }
.wq2-pill.is-lock { background: #f0eff8; color: #5d6078; }
.wq2-btn { display: inline-block; border-radius: 999px; padding: 8px 18px; font-weight: 800; font-size: 14px; min-width: 64px; text-align: center; text-decoration: none; white-space: nowrap; }
.wq2-btn.is-go { background: linear-gradient(90deg, #4F46B8, #D22CB2); color: #fff; }
.wq2-btn.is-ghost { background: #fff; border: 1.5px solid #e2def8; color: #3F27BD; }
.wq2-btn.is-none { visibility: hidden; }
.wq2-mockrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.wq2-mock { font-weight: 800; font-size: 16px; color: #2a1f7a; margin-top: 2px; }
.wq2-brk { font-style: italic; color: #8a8ea8; font-weight: 700; }
.wq2-term { font-weight: 800; color: #7a6fd1; }
.wq2-month { font-weight: 800; font-size: 18px; color: #26295a; padding: 18px 0 4px; margin-left: -44px; }
.wq2-more { display: block; width: 100%; border: 1.5px dashed #cfc9f5; background: #fbfaff; color: #3F27BD; border-radius: 12px; padding: 12px; font: inherit; font-weight: 800; cursor: pointer; min-height: 46px; }
.wq2-more:hover { background: #f3f0ff; }
@media (max-width: 640px) {
  .wq2-item { grid-template-columns: minmax(0, 1fr) auto; }
  .wq2-item .wq2-pill { grid-column: 1 / -1; justify-self: start; order: 3; }
  .wq2-tab { margin-right: 12px; }
  .wq2-jump { margin-left: 0; }
}

/* v12.77.0: the week strip on the dashboard */
.wks-wrap { display: flex; align-items: stretch; gap: 6px; margin: 4px 0 12px; }
.wks { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: thin; padding: 14px 2px 6px; flex: 1; }
.wks-arrow { flex: 0 0 auto; width: 30px; border: 1px solid #e5e7eb; background: #fff; border-radius: 10px; font-size: 1.2rem; cursor: pointer; color: #4F46B8; }
.wks-arrow:hover { background: #f5f3ff; }
.wks-chip { position: relative; flex: 0 0 auto; min-width: 104px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 8px 10px; border-radius: 12px; border: 1px solid #e5e7eb; background: #fff; cursor: pointer; text-align: left; font: inherit; }
.wks-chip:hover { border-color: #4F46B8; box-shadow: 0 2px 10px rgba(79, 70, 184, .15); }
.wks-chip.is-done { background: #f0fdf4; border-color: #bbf7d0; }
.wks-chip.is-part { background: #fffbeb; border-color: #fde68a; }
.wks-chip.is-locked { background: #f8fafc; color: #64748b; }
.wks-chip.is-now { border: 2px solid #4F46B8; box-shadow: 0 0 0 3px rgba(79, 70, 184, .15); }
.wks-now { position: absolute; top: -10px; left: 8px; background: #4F46B8; color: #fff; font-size: .68rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; }
.wks-n { font-weight: 700; font-size: .92rem; }
.wks-d { font-size: .78rem; color: #475569; }
.wks-s { font-size: .74rem; color: #64748b; white-space: nowrap; }
.wks-todo { border: 1px solid #fde68a; background: #fffbeb; border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.wks-todo-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* v12.78.1: a week whose classwork and homework are on paper */
.wq2-paper { margin-top: 8px; padding: 8px 12px; border-radius: 10px; background: #fff8e6; color: #6b4a00; font-size: 14px; line-height: 1.4; }

/* v12.78.2: the Weekly quizzes page read too large (it inherited the app's
   body size, and the tiles, tabs and chips added more). One step smaller
   throughout, and tighter rows, so more weeks fit on a laptop screen. */
#wq-root { font-size: 14px; line-height: 1.4; }
#wq-root .wq2-chips { gap: 6px; margin-bottom: 10px; }
#wq-root .wq2-chip { padding: 4px 12px; min-height: 32px; font-size: 13px; }
#wq-root .wq2-stats { gap: 8px; margin-bottom: 10px; }
#wq-root .wq2-stat { padding: 7px 12px; border-radius: 12px; flex-basis: 130px; }
#wq-root .wq2-stat b { font-size: 17px; }
#wq-root .wq2-stat b.wq2-small-b { font-size: 14px; padding-top: 2px; }
#wq-root .wq2-stat span { font-size: 12px; }
#wq-root .wq2-tabs { margin-bottom: 10px; }
#wq-root .wq2-tab { padding: 7px 2px; margin-right: 16px; min-height: 36px; font-size: 14px; }
#wq-root .wq2-jump { min-height: 36px; font-size: 13px; }
#wq-root .wq2-row { padding: 6px 0 9px; }
#wq-root .wq2-row.wq2-small { padding: 4px 0 6px; }
#wq-root .wq2-dot { top: 9px; }
#wq-root .wq2-dot.is-now { top: 5px; }
#wq-root .wq2-dot.is-mock, #wq-root .wq2-dot.is-exam, #wq-root .wq2-dot.is-mockdone { top: 6px; }
#wq-root .wq2-dot.is-break, #wq-root .wq2-dot.is-term { top: 8px; }
#wq-root .wq2-date, #wq-root .wq2-wk { font-size: 14px; }
#wq-root .wq2-item { margin-top: 6px; padding: 7px 12px; gap: 10px; border-radius: 10px; }
#wq-root .wq2-slot { font-size: 11px; }
#wq-root .wq2-ttl { font-size: 14px; }
#wq-root .wq2-meta { font-size: 12px; }
#wq-root .wq2-pill { font-size: 12px; padding: 3px 10px; }
#wq-root .wq2-btn { font-size: 13px; padding: 6px 14px; min-width: 56px; }
#wq-root .wq2-mock { font-size: 14px; }
#wq-root .wq2-month { font-size: 15px; padding-top: 12px; }
#wq-root .wq2-more { padding: 8px; min-height: 38px; font-size: 13px; }
#wq-root .wq2-paper { margin-top: 6px; padding: 6px 10px; font-size: 13px; }
#wq-root .wq2-tag { font-size: 11px; }