/* Annotate on notes (assets/teach.js; the ink itself is assets/ink.css). */
/* no text selection, loupe or long-press menu under the Pencil while annotating; text boxes stay editable */
body.is-teaching .ink-host, body.is-teaching .ink-host * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.is-teaching .ink-t__tx, body.is-teaching .ink-t__tx *, body.is-teaching .ink-st__tx, body.is-teaching .ink-st__tx * { -webkit-user-select: text; user-select: text; }

/* while annotating: the side column clears to empty board, a dotted whiteboard look, extra space below */
body.is-teaching .nl__side > *, body.is-teaching .syl-tab, body.is-viewing .nl__side > *, body.is-viewing .syl-tab { visibility: hidden; }
body.is-teaching .nl.ink-host { border-radius: 26px; background-image: radial-gradient(circle, color-mix(in srgb, var(--paper) 14%, transparent) 1px, transparent 1.4px); background-size: 22px 22px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 45%, transparent); }
body.is-teaching .hlpop { display: none !important; }

/* buttons in the note's action row */
.tb-go svg, .tb-eye svg, .tb-nb svg { width: 15px; height: 15px; }
.tb-go.is-on, .tb-nb.is-on { background: var(--orange) !important; color: #fff !important; }
.tb-eye:not(.is-on) { opacity: .55; }
.tb-eye[hidden], .tb-go[hidden] { display: none !important; } /* .btn sets display, which beats the hidden attribute */

/* a friend's board: the bar at the bottom */
.tb-bar { position: fixed; left: 50%; bottom: 18px; z-index: 240; display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 20px; background: var(--ink, #0E0E10); color: #fff; box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06); transform: translate(-50%, 16px); opacity: 0; transition: transform .45s cubic-bezier(0.32, 0.72, 0, 1), opacity .3s; max-width: calc(100vw - 20px); }
.tb-bar[hidden] { display: none; }
.tb-bar.is-in { transform: translate(-50%, 0); opacity: 1; }
.tb-b { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 12px; background: none; color: rgba(255, 255, 255, .72); cursor: pointer; }
.tb-b svg { width: 18px; height: 18px; }
.tb-b:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.tb-done { height: 38px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--orange); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.tb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.tb-view { gap: 10px; padding: 6px 6px 6px 8px; }
.tb-view__av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: #2B1608; background: linear-gradient(140deg, #FFC56B, #F08A4E); }
.tb-view__t { min-width: 0; display: flex; flex-direction: column; margin-right: 6px; }
.tb-view__t b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-view__t small { font-size: 11.5px; color: rgba(255, 255, 255, .6); white-space: nowrap; }
body.is-teaching .lockdock, body.is-teaching .as-launch, body.is-viewing .lockdock, body.is-viewing .as-launch { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .tb-bar { transition: none; } }
@media print { .tb-bar { display: none !important; } }
.nl > .ink { overflow: clip; }