/* OOMU Academy brand layer for the Frappe Learning app (/lms).
   Loaded on every /lms page by a link in the LMS page shell (Mochi, 17 Oct 2026).
   Pairs with /files/oomu-lms.js. Re-check after any Frappe upgrade. */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap");

html, body, button, input, select, textarea, .font-sans {
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif !important;
}
code, pre, kbd, samp, .font-mono, .ce-code__textarea {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace !important;
}

/* Light theme: OOMU soft black and blue. Dark theme keeps Frappe's colors. */
:root:not([data-theme="dark"]) {
  --ink-gray-9: #1a1a1a;
  --surface-gray-7: #1a1a1a;
  --ink-blue-link: #0071e3;
  --surface-blue-6: #0071e3;
  --surface-blue-7: #005bb8;
  --outline-blue-5: #0071e3;
}
[data-theme="dark"] {
  --ink-blue-link: #4da2ff;
}

/* Copy boxes in lessons: wrap long lines so learners never scroll sideways. */
.codeBoxTextArea, .codeBoxTextArea * {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
}

/* ---- Lessons: calm reading layout ---- */
#editor { max-width: 680px; margin: 0 auto; font-size: 17px; line-height: 1.65; color: #1a1a1a; }
#editor .ce-block { margin-bottom: 0.35em; }
#editor .ce-paragraph { font-size: 17px; line-height: 1.65; }
#editor h2.ce-header { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin: 1.6em 0 0.4em; }
#editor h3.ce-header { font-size: 20px; font-weight: 600; margin: 1.3em 0 0.3em; }
#editor .cdx-nested-list__item-content, #editor li { font-size: 17px; line-height: 1.6; }
#editor a { color: #0071e3; text-decoration: underline; text-underline-offset: 2px; }
h1.text-4xl-semibold { font-size: 32px !important; letter-spacing: -0.01em; }

/* Copy boxes become light "message cards" with a Copy button (see oomu-lms.js). */
#editor .codeBoxHolder { border: 0 !important; padding: 0 !important; background: transparent !important; position: relative; }
#editor .codeBoxHolder > :not(.codeBoxTextArea):not(.oomu-copy) { display: none !important; }
#editor .codeBoxTextArea {
  background: #f5f5f7 !important; color: #1a1a1a !important;
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif !important;
  font-size: 16px !important; line-height: 1.6 !important;
  border: 1px solid #e3e3e3 !important; border-radius: 14px !important;
  padding: 18px 20px !important;
}
#editor .oomu-has-copy .codeBoxTextArea { padding-right: 96px !important; }
.oomu-copy {
  position: absolute; top: 12px; right: 12px;
  font: 600 14px/1 "Outfit", ui-sans-serif, system-ui, sans-serif;
  background: #0071e3; color: #ffffff; border: 0; border-radius: 999px;
  padding: 9px 16px; cursor: pointer;
}
.oomu-copy:hover { background: #005bb8; }
.oomu-copy:focus-visible { outline: 3px solid #4da2ff; outline-offset: 2px; }
.oomu-copy.oomu-copied { background: #1a1a1a; }
@media (max-width: 520px) {
  #editor .oomu-has-copy .codeBoxTextArea { padding: 56px 16px 16px !important; }
}

/* Screenshots and tables */
#editor .cdx-simple-image__picture--with-border { border: 1px solid #e3e3e3 !important; border-radius: 14px; padding: 8px; background: #fafafa; }
#editor .cdx-simple-image img { border-radius: 10px; }
#editor .cdx-simple-image__caption { display: block !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; font-size: 14px; color: #616166; text-align: center; margin-top: 8px; }
#editor .tc-table { font-size: 15px; }
#editor .tc-row:first-child .tc-cell { font-weight: 600; background: #f5f5f7; }

/* "On a Mac? Try it in OOMU" cards. oomu-lms.js marks a lesson header that starts with
   "On a Mac?" plus the blocks under it (up to the next header); these rules draw them as one card. */
#editor .ce-block.oomu-mac { background: #f2f7fe; border: solid #cfe2fb; border-width: 0 1px; margin: 0; padding: 0 22px 0.45em; }
#editor .ce-block.oomu-mac-start { border-top-width: 1px; border-radius: 14px 14px 0 0; padding-top: 18px; margin-top: 1.8em; }
#editor .ce-block.oomu-mac-end { border-bottom-width: 1px; border-radius: 0 0 14px 14px; padding-bottom: 14px; margin-bottom: 1.4em; }
#editor .ce-block.oomu-mac-start.oomu-mac-end { border-radius: 14px; }
#editor .oomu-mac-start .ce-header { display: flex; align-items: center; gap: 10px; margin: 0 0 0.25em !important; font-size: 19px !important; }
#editor .oomu-mac-start .ce-header::before {
  content: ""; flex: none; width: 28px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 740 578.19'%3E%3Cpath fill='%23111418' d='M740,414.81l-41.54-39.42c-46.03-45.19-102.4-76.38-162.79-91.81v-.09c-23.89-4.68-42.78-25.09-44.23-50.24l-.92-20.69c-1.28-29.39,21.52-54.27,50.93-55.56l166.72-7.28c-33.43-30.26-76.66-53.65-125.43-68.89-23.98-7.48-49.31-13-75.49-16.37l-7.44-9.35C479.68,19.58,440.99-1.69,399.77.11l-229.71,10.03L0,320.44l57.12-1.73,3.03,182.96c0,26.07,3.54,51.79,10.35,76.53h669.5v-163.38ZM369.55,115.5c-.97-22.59,25-36.35,43.57-23.08l40.32,22.61-83.89.47Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
#editor .oomu-mac .ce-paragraph { font-size: 16px; line-height: 1.6; }
[data-theme="dark"] #editor .ce-block.oomu-mac { background: #13243a; border-color: #24456e; }
[data-theme="dark"] #editor .oomu-mac-start .ce-header::before { filter: invert(1); }