/* ============================================================
   My notes: highlights, the notebook beside a note, the syllabus
   drawer and its tab, the "All my notes" page. Loaded after app.css.
   ============================================================ */

/* highlights in the note body */
mark.uh { background: var(--sun); color: inherit; padding: .05em 0; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; cursor: pointer; }
/* a picture or table is highlighted by its outline (owner, 2026-10-26); simulations can't be selected at all */
.uh-fig { outline: 3px solid var(--sun-2, #FFE48A); outline-offset: 4px; border-radius: 6px; cursor: pointer; }
.uh-fig--mint { outline-color: var(--mint-2, #B7EFC7); } .uh-fig--rose { outline-color: #FFB3C4; } .uh-fig--lav { outline-color: var(--lav-2, #D9BBFF); } .uh-fig--sky { outline-color: var(--sky-2, #A8E6EF); }
#note-body .sim { -webkit-user-select: none; user-select: none; }
#note-body figure ::selection, #note-body .tbl-wrap ::selection { background: transparent; }
.uh-flash { animation: uh-flash 1.6s ease-out; }
@keyframes uh-flash { 0%, 30% { box-shadow: 0 0 0 6px rgba(227, 114, 57, .45); } 100% { box-shadow: 0 0 0 0 rgba(227, 114, 57, 0); } }
mark.uh--mint { background: var(--mint); } mark.uh--rose { background: var(--rose); } mark.uh--lav { background: var(--lav); } mark.uh--sky { background: var(--sky); }
mark.uh:hover { filter: brightness(.96); }

/* the selection popover */
.hlpop { position: absolute; z-index: 400; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border-radius: 999px; background: var(--ink); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5); animation: hlpop .16s ease-out; }
@keyframes hlpop { from { opacity: 0; transform: translateY(4px); } }
.hlpop__c { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; background: var(--sun); cursor: pointer; transition: transform .15s; }
.hlpop__c:hover { transform: scale(1.15); border-color: #fff; }
.hlpop__c--mint { background: var(--mint); } .hlpop__c--rose { background: var(--rose); } .hlpop__c--lav { background: var(--lav); } .hlpop__c--sky { background: var(--sky); }
.hlpop__sep { width: 1px; height: 18px; background: rgba(255, 255, 255, .2); margin: 0 2px; }
.hlpop__b { height: 26px; padding: 0 11px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font: 600 12.5px/1 var(--font-display); cursor: pointer; white-space: nowrap; }
.hlpop__b:hover { background: rgba(255, 255, 255, .22); }
.hlpop[hidden], .hlpop [hidden] { display: none; } /* .hlpop sets display:flex, which beat the hidden attribute: the bar never went away */

/* the notebook (right column): a borderless document, like a Notion page */
#notes .nl__side { gap: 0; top: 92px; }
#notes .nl { grid-template-columns: minmax(0, 760px) minmax(300px, 1fr); gap: 48px; }
#notes .nl__main { max-width: none; }
/* tablets and phones: one column, the note first and My notes under it (the 300px side column used to squeeze the note to nothing) */
@media (max-width: 1000px) { #notes .nl { grid-template-columns: minmax(0, 1fr); gap: 24px; } #notes .nl__side { position: static; } }
.mn { position: relative; display: flex; flex-direction: column; max-height: calc(100vh - 110px); overflow: hidden auto; padding: 4px 2px 12px; scrollbar-width: thin; }
.mn__top { display: flex; justify-content: space-between; align-items: center; }
.mn__state { font-size: 12px; color: var(--muted); }
.mn__title { margin-top: 14px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; outline: 0; }
.mn__title:empty::before { content: attr(data-placeholder); color: #C4C6CC; }
.mn__src { font-size: 12.5px; color: var(--muted); }
.mn__src a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.mn__src a:hover { color: var(--ink); }
.mn__ed { flex: 1; min-height: 260px; margin-top: 14px; font-size: 15px; line-height: 1.65; color: var(--ink); outline: 0; }

.mn__ed a { color: #1a5fb4; text-decoration: underline; text-underline-offset: 2px; }
.mn__ed code { font-family: var(--font-mono); font-size: .88em; background: var(--navy); padding: 1px 5px; border-radius: 5px; color: #B3261E; }
.mn__ed .td { display: flex; gap: 9px; align-items: flex-start; }
.mn__ed .td input { flex: none; width: 16px; height: 16px; margin-top: 5px; accent-color: var(--ink); cursor: pointer; }
.mn__ed .td__t { flex: 1; min-width: 0; }
.mn__ed .td.is-done .td__t { color: var(--muted); text-decoration: line-through; }
.mn__ed *[style*="background-color: rgb(255, 241, 184)"], .mn__ed *[style*="background-color:#FFF1B8"] { border-radius: 3px; padding: .05em 0; }
.mn__menu { position: absolute; left: 0; z-index: 20; width: 240px; padding: 6px; border-radius: 14px; background: var(--card); box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .35), 0 0 0 1px var(--line); }
.mn__menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border: 0; border-radius: 9px; background: none; text-align: left; cursor: pointer; font: inherit; }
.mn__menu button.is-on, .mn__menu button:hover { background: var(--navy); }
.mn__menu i { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--card); box-shadow: 0 0 0 1px var(--line); display: grid; place-items: center; font: 600 12px var(--font-display); font-style: normal; }
.mn__menu span { display: block; font-size: 12px; color: var(--muted); line-height: 1.25; }
.mn__menu span b { display: block; font-size: 13.5px; color: var(--ink); font-weight: 600; }
.mn__bubble { position: absolute; z-index: 20; display: flex; gap: 1px; padding: 4px; border-radius: 10px; background: var(--ink); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); animation: hlpop .15s ease-out; }
.mn__bubble button { width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: #fff; display: grid; place-items: center; cursor: pointer; opacity: .85; }
.mn__bubble button svg { width: 15px; height: 15px; }
.mn__bubble button:hover { background: rgba(255, 255, 255, .14); opacity: 1; }
.mn__bubble button.is-on { background: rgba(255, 255, 255, .22); opacity: 1; }
.mn__bubble[hidden], .mn__menu[hidden] { display: none; }
.mn__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.mn__foot a { color: var(--muted); } .mn__foot a:hover { color: var(--ink); }
.mn__foot button { border: 0; background: none; padding: 0; font: inherit; color: var(--muted); cursor: pointer; } .mn__foot button:hover { color: var(--ink); }

/* the syllabus tab (a teardrop on the right edge) and drawer */
.syl-tab { position: fixed; right: 0; top: 50%; z-index: 210; transform: translateY(-50%); width: 46px; height: 76px; border: 0; border-radius: 40px 0 0 40px; background: var(--ink); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); transition: width .25s cubic-bezier(.2, .8, .2, 1), background-color .2s; }
.syl-tab svg { width: 20px; height: 20px; }
.syl-tab span { position: absolute; right: 100%; margin-right: 10px; top: 50%; transform: translateY(-50%) translateX(6px); padding: 6px 10px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .2s; }
.syl-tab:hover { width: 54px; }
.syl-tab:hover span { opacity: 1; transform: translateY(-50%); }
.syl-tab.is-open { opacity: 0; pointer-events: none; }
.syl-drawer { position: fixed; inset: 0; z-index: 300; pointer-events: none; overflow: clip; }
.syl-drawer__scrim { position: absolute; inset: 0; background: rgba(14, 14, 16, .3); opacity: 0; transition: opacity .25s; }
.syl-drawer__pane { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 92vw); background: #fff; box-shadow: -20px 0 60px -30px rgba(0, 0, 0, .4); transform: translateX(104%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); display: flex; flex-direction: column; padding: 18px 18px 20px; overflow: auto; }
.syl-drawer.is-open { pointer-events: auto; }
.syl-drawer.is-open .syl-drawer__scrim { opacity: 1; }
.syl-drawer.is-open .syl-drawer__pane { transform: none; }
.syl-drawer__h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.syl-drawer__h b { font-size: 17px; font-weight: 700; }
.syl-drawer__h button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--navy); font-size: 18px; cursor: pointer; }
.syl-drawer .syl, .syl-drawer .tree { position: static; max-height: none; background: #F5F6F8; box-shadow: none; }
.syl-drawer .tree { margin-top: 10px; }
/* reaching the end of the list never hands the wheel on to the page behind */
.syl-drawer__pane, .syl-drawer .tree { overscroll-behavior: contain; }

/* "All my notes" */
.mine { margin-top: 26px; display: grid; gap: 26px; }
.mine__s h2 { font-size: 15px; font-weight: 700; color: var(--muted); margin-bottom: 10px; }
.mine__s { display: block; }
.mine__i { display: block; padding: 16px 18px; border-radius: 18px; background: var(--card); box-shadow: 0 1px 0 var(--line); margin-top: 10px; transition: background-color .2s; }
.mine__i:hover { background: var(--sun); }
.mine__i b { display: block; font-size: 16px; font-weight: 600; }
/* whiteboards friends sent you */
.mine__shared h2 small { margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 11px; }
.mine__shared h2 small:empty { display: none; }
.mine__i--shared { position: relative; display: flex; align-items: center; gap: 10px; padding: 0; }
.mine__i--shared > a { flex: 1; min-width: 0; padding: 16px 18px; color: inherit; text-decoration: none; }
.mine__i--shared.is-new { box-shadow: inset 3px 0 0 var(--orange), 0 1px 0 var(--line); }
.mine__x { flex: none; width: 32px; height: 32px; margin-right: 12px; border: 0; border-radius: 10px; background: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.mine__x:hover { background: var(--navy); color: var(--paper); }
.mine__m { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }
.mine__p { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); line-height: 1.5; }
.mine__hl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.mine__hl mark { font-size: 12.5px; padding: 3px 8px; border-radius: 8px; }

@media (max-width: 1000px) {
  .mn { max-height: none; margin-top: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
}
@media print { .syl-tab, .syl-drawer, .hlpop { display: none !important; } }

/* Notion-style blocks: each line gets a soft translucent pastel on hover */

/* subtopic links (#) */
.mn__ed a.sl { display: inline-flex; align-items: center; gap: 3px; padding: 0 6px 0 4px; border-radius: 6px; background: rgba(96, 165, 250, .14); color: #1D4ED8; text-decoration: none; font-weight: 500; font-size: .94em; cursor: pointer; user-select: all; }
.mn__ed a.sl:hover { background: rgba(96, 165, 250, .26); }
.mn__ed a.sl svg { width: 13px; height: 13px; }

/* tables */
.mn__ed .tbw table { width: 100%; border-collapse: collapse; font-size: 14px; }
.mn__ed .tbw td { border: 1px solid var(--line); padding: 6px 9px; min-width: 70px; vertical-align: top; outline: 0; }
.mn__ed .tbw tr:first-child td { font-weight: 600; background: rgba(0, 0, 0, .025); }
.mn__ed .tbw td:focus { box-shadow: inset 0 0 0 2px rgba(96, 165, 250, .5); }
.mn__ed .tbw__acts { display: flex; gap: 4px; margin-top: 4px; opacity: 0; transition: opacity .15s; }
.mn__ed .tbw:hover .tbw__acts, .mn__ed .tbw:focus-within .tbw__acts { opacity: 1; }
.mn__ed .tbw__acts button { height: 24px; padding: 0 9px; border: 0; border-radius: 6px; background: var(--navy); color: var(--muted); font: 600 11.5px var(--font-display); cursor: pointer; }
.mn__ed .tbw__acts button:hover { color: var(--ink); }
.mn__ed .tbw__acts button[data-tb="del"] { margin-left: auto; }

/* menu */
.mn__menu { max-height: 320px; overflow: auto; width: 260px; }
.mn__menu-h { padding: 6px 8px 4px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.mn__menu i svg { width: 16px; height: 16px; }
.mn__hint { margin-top: 10px; font-size: 12px; color: #A3A6AD; }
.mn__hint kbd { font: 600 11px var(--font-mono); padding: 1px 5px; border-radius: 5px; background: var(--navy); color: var(--muted); }
.mn__top { min-height: 20px; }

/* ---- blocks: every line is its own block with an 8px inset, so a hover tint
   fits inside the panel (nothing is pulled outside and clipped). Title, top
   row, hint and footer share the same 8px inset so the text lines up. ---- */
.mn__top, .mn__title, .mn__hint { padding-left: 8px; padding-right: 8px; }
.mn__foot { margin-left: 8px; margin-right: 8px; }
.mn__ed { margin-top: 10px; }
.mn__ed > * { margin: 1px 0; }
.mn__ed p, .mn__ed h2, .mn__ed h3, .mn__ed li, .mn__ed .td, .mn__ed blockquote, .mn__ed .co {
  position: relative; padding: 3px 8px; border-radius: 10px; min-height: 1.65em;
  transition: background-color .12s ease;
}
.mn__ed h2 { margin-top: 14px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.35; }
.mn__ed h3 { margin-top: 10px; font-size: 16.5px; font-weight: 700; line-height: 1.4; }
.mn__ed > h2:first-child, .mn__ed > h3:first-child { margin-top: 0; }

/* lists: markers drawn inside each line, so a whole line (marker too) tints */
.mn__ed ul, .mn__ed ol { list-style: none; padding: 0; margin: 1px 0; counter-reset: li; }
.mn__ed li { padding-left: 28px; }
.mn__ed ul > li::before { content: ""; position: absolute; left: 13px; top: calc(3px + .82em - 2.5px); width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.mn__ed ol > li { counter-increment: li; }
.mn__ed ol > li::before { content: counter(li) "."; position: absolute; left: 8px; top: 3px; width: 16px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.mn__ed li ul, .mn__ed li ol { margin-left: -8px; }

.mn__ed blockquote { margin: 4px 0; padding-left: 20px; font-style: italic; border-radius: 10px; }
.mn__ed blockquote::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: var(--ink); }
.mn__ed .co { margin: 6px 0; padding: 10px 14px; border-radius: 14px; background: rgba(255, 214, 102, .26); }
.mn__ed .co__t { display: block; }
.mn__ed hr { border: 0; height: 1px; background: var(--line); margin: 14px 8px; }
.mn__ed .tbw { margin: 6px 0; padding: 0 8px; overflow-x: auto; }

/* the tint: one soft pastel per kind of line, so colours never jump while you type */
.mn__ed p:hover { background: rgba(167, 139, 250, .12); }
.mn__ed h2:hover, .mn__ed h3:hover { background: rgba(96, 165, 250, .12); }
.mn__ed li:hover { background: rgba(52, 211, 153, .13); }
.mn__ed .td:hover { background: rgba(251, 191, 36, .15); }
.mn__ed blockquote:hover { background: rgba(251, 113, 133, .10); }
.mn__ed .co:hover { background: rgba(255, 214, 102, .38); }
/* no tint while selecting text across lines, and none inside tables */
.mn__ed.is-selecting :is(p, h2, h3, li, .td, blockquote):hover { background: none; }
.mn__ed .tbw p:hover { background: none; }

/* placeholder on the empty first line */
.mn__ed > p:only-child:has(> br:only-child)::before { content: "Write, or type / for blocks…"; position: absolute; left: 8px; top: 3px; color: #C4C6CC; pointer-events: none; }

/* ---------- My notes in a teardrop drawer (2026-10-18): the note gets the full width ---------- */
body.read { --mn-panel-width: clamp(320px, var(--mnw, 56vw), calc(100vw - min(300px, 36vw))); --mn-reader-gap: 48px; --mn-reader-pad: 32px; }
#notes { width: min(100vw, 1320px); margin-left: max(0px, calc((100vw - 1320px) / 2)); margin-right: 0; transition: width .45s cubic-bezier(0.32, 0.72, 0, 1), margin-left .45s cubic-bezier(0.32, 0.72, 0, 1); }
#notes .nl.nl { width: 100%; grid-template-columns: minmax(0, 1fr); gap: 0; }
#notes .nl.nl > .nl__main { width: 100%; max-width: none; margin: 0; }
#notes .nl.nl > .nl__side { display: none; }
body.mn-open #notes { width: calc(100vw - var(--mn-panel-width) + var(--mn-reader-pad) - var(--mn-reader-gap)); max-width: none; margin-left: 0; }
body.nb-split #notes { width: auto; margin: 0 var(--nbw) 0 auto; }
.mn-shell { position: fixed; inset: 0; z-index: 205; overflow: clip; pointer-events: none; }
.mn-dock { --mn-top: 76px; position: absolute; top: var(--mn-top); right: 0; bottom: 0; width: var(--mn-panel-width); pointer-events: none; transform: translateX(100%); transition: transform .45s cubic-bezier(0.32, 0.72, 0, 1); will-change: transform; contain: layout style; }
.mn-dock.is-open { transform: translateX(0); }
.mn-dock > .mn-tab, .mn-dock > .syl-tab { position: absolute; right: calc(100% - 1px); pointer-events: auto; }
.mn-dock > .mn-tab { top: calc(50dvh - var(--mn-top) - 46px); }
.mn-dock > .syl-tab { top: calc(50dvh - var(--mn-top) + 40px); }
.mn-tab { position: fixed; right: 0; top: calc(50% - 86px); z-index: 210; transform: translateY(-50%); width: 46px; height: 76px; display: grid; place-items: center; border: 0; border-radius: 40px 0 0 40px; background: var(--orange); color: #fff; cursor: pointer; box-shadow: -8px 10px 24px -14px rgba(0, 0, 0, .45); transition: width .25s cubic-bezier(0.32, 0.72, 0, 1), opacity .2s; }
.mn-tab svg { width: 20px; height: 20px; }
.mn-tab span { position: absolute; right: 100%; margin-right: 10px; top: 50%; transform: translateY(-50%) translateX(6px); padding: 6px 10px; border-radius: 10px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.mn-tab:hover { width: 54px; }
.mn-tab:hover span, .mn-tab:focus-visible span { opacity: 1; transform: translateY(-50%); }
.mn-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mn-tab__dot { position: absolute; top: 12px; left: 12px; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--orange); }
.mn-tab.is-open { opacity: 1; pointer-events: auto; }
.mn-drawer { position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; padding: 12px 14px 0; border-radius: 0; background: var(--card); box-shadow: -20px 0 70px -30px rgba(16, 34, 60, .4), 0 0 0 1px var(--line); pointer-events: none; }
.mn-drawer.is-open { pointer-events: auto; }
.mn-drawer__h { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 2px; }
.mn-drawer__h b { font-size: 18px; font-weight: 700; }
.mn-drawer__h button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--navy); color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; }
.mn-drawer__h button:hover { background: var(--slate); color: var(--paper); }
.mn-drawer .mn { flex: 1; min-height: 0; max-height: none; margin: 0; padding-top: 0; border-top: 0; overflow: hidden auto; }
body.is-teaching .mn-tab, body.is-viewing .mn-tab { visibility: hidden; }
@media (max-width: 1000px) { body.read { --mn-reader-gap: 36px; } }
@media (max-width: 920px) { .mn-dock { --mn-top: 66px; } }
@media (max-width: 640px) { body.read { --mn-reader-pad: 14px; } }
@media (max-width: 600px) { body.read { --mn-panel-width: clamp(190px, var(--mnw, 55vw), 64vw); --mn-reader-gap: 28px; } .mn-drawer { padding-left: 8px; padding-right: 8px; } }
@media (prefers-reduced-motion: reduce) { #notes, .mn-dock, .mn-drawer, .mn-dock > .mn-tab, .mn-dock > .syl-tab { transition: none; } }
@media print { .mn-shell { display: none !important; } }

/* Type / Handwrite / Both (2026-10-21): the switch, a wider panel for writing by hand, drawings inside the notes */
body[data-mn-mode="both"] { --mnw: 500px; }
/* the panel reaches across to the note's column, so no wide empty gap sits between them (owner, 2026-10-26) */
body[data-mn-mode="hand"] { --mnw: 56vw; }
.mn-drawer__h { gap: 8px; }
.mn-mode { display: inline-flex; margin-left: auto; padding: 3px; border-radius: 12px; background: var(--navy); }
.mn-drawer__h .mn-mode button { width: auto; border-radius: 9px; font-size: 13px; line-height: normal; }
.mn-drawer__h .mn-mode button:not(.is-on) { background: none; }
.mn-mode button { height: 30px; padding: 0 12px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color .2s, color .2s; }
.mn-mode button:hover { color: var(--paper); }
.mn-mode button.is-on { background: var(--card); color: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.mn-drawer .mn[hidden], .mn-hand[hidden], .mn-inkbar[hidden] { display: none !important; }
/* the left edge drags to resize (mynotes.js notesDrawer) */
.mn-drawer__rz { position: absolute; left: -12px; top: calc(50% + 74px); height: 100px; width: 24px; z-index: 3; cursor: ew-resize; touch-action: none; outline: none; }
.mn-drawer__rz::after { content: ""; position: absolute; left: 10px; top: 50%; width: 5px; height: 56px; margin-top: -28px; border-radius: 99px; background: var(--orange); opacity: 1; transition: background-color .2s, height .2s, margin-top .2s; }
.mn-drawer:hover .mn-drawer__rz::after, .mn-drawer__rz:focus-visible::after { opacity: 1; }
.mn-drawer__rz:hover::after, .mn-drawer.is-resizing .mn-drawer__rz::after, .mn-drawer__rz:focus-visible::after { opacity: 1; height: 72px; margin-top: -36px; background: var(--orange); }
.mn-drawer.is-resizing, body.mn-resizing #notes { transition: none !important; }
body.mn-resizing { cursor: ew-resize; -webkit-user-select: none; user-select: none; }
.mn-hand { flex: 1; min-height: 0; margin: 0 -14px; display: flex; overflow: hidden; }
.mn-hand .nbx--embed { flex: 1; min-width: 0; }
.mn-hand .nbx--embed .nbx__h { padding: 0 8px 8px; gap: 4px; }
.mn-hand .nbx--embed .nbx__scroll { padding: 22px 24px 32px; overflow-anchor: none; overscroll-behavior: contain; }
@media (max-width: 700px) { .mn-hand .nbx--embed .nbx__scroll { padding: 18px 18px 28px; } }
@media (max-width: 600px) { .mn-hand { margin-left: -8px; margin-right: -8px; } }
.mn-inkbar { flex: none; margin: 6px -6px -2px; }
.mn-inkbar .ink-bar { padding: 4px; } .mn-inkbar .ink-b { width: 34px; height: 34px; } .mn-inkbar .ink-done { height: 34px; padding: 0 12px; font-size: 13px; }
/* a drawing inside the typed notes */
.mn-ink { position: relative; margin: 10px 0; border-radius: 14px; background: color-mix(in srgb, var(--navy) 55%, transparent); background-image: radial-gradient(circle, rgba(var(--fg-rgb), .16) 1px, transparent 1.3px); background-size: 20px 20px; box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), .1); -webkit-user-select: none; user-select: none; }
.mn-ink__pad { position: relative; width: 100%; min-height: 60px; }
.mn-ink__x { position: absolute; top: 6px; right: 6px; z-index: 8; width: 26px; height: 26px; display: none; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--ink, #0E0E10); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.mn-ink__rz { position: absolute; left: 50%; bottom: -5px; z-index: 8; width: 44px; height: 10px; margin-left: -22px; border-radius: 6px; background: rgba(var(--fg-rgb), .22); cursor: ns-resize; touch-action: none; display: none; }
body[data-mn-mode="both"] .mn-ink { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--orange) 45%, transparent); }
body[data-mn-mode="both"] .mn-ink:hover .mn-ink__x, body[data-mn-mode="both"] .mn-ink__rz { display: grid; }
body[data-mn-mode="both"] .mn-ink__rz { display: block; }
body:not([data-mn-mode="both"]) .mn-ink { background-image: none; }
.mn-adddraw { display: none; align-self: flex-start; margin: 4px 0 8px; height: 34px; padding: 0 14px; border: 1.5px dashed color-mix(in srgb, var(--orange) 55%, transparent); border-radius: 11px; background: none; color: var(--orange); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.mn-adddraw:hover { background: color-mix(in srgb, var(--orange) 8%, transparent); }
body[data-mn-mode="both"] .mn-adddraw { display: inline-flex; align-items: center; }