/* The ink engine (assets/ink.js): layers, text boxes, sticky notes, the toolbar and its pop-up. */
.ink-host { position: relative; }
.ink { position: absolute; left: 0; top: 0; width: 100%; z-index: 6; pointer-events: none; --ink-auto: var(--paper, #1C1C1E); }
.ink.is-hidden { visibility: hidden; }
.ink-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* highlighter: every stroke solid, the see-through on the whole layer, so passes that overlap (going back over a
   word, round a letter) make one even band instead of darker patches. No mix-blend-mode: .ink is its own stacking
   context, so the blend only ever met an empty backdrop and changed nothing, and on iPad Safari it put the layer on
   a composited path that left gaps in the band (R-0270BA, 2026-11-09). strokeSvg() keeps opacity=".42" on each path
   for thumbnails and print; the rule below overrides that attribute inside a live surface. */
.ink-svg--hl { z-index: 0; }
.ink-svg--hl > .ink-g { opacity: .42; }
.ink-svg--hl > .ink-g > path { opacity: 1; }
.ink-els { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ink-svg--pen { z-index: 2; }
.ink-cap { position: absolute; inset: 0; z-index: 3; pointer-events: none; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ink.finger-scroll .ink-cap { touch-action: pan-x pan-y; }
.ink-svg--ui { z-index: 4; }
.ink.els-live .ink-els { z-index: 5; }
.ink.els-live .ink-els > * { pointer-events: auto; }
.ink-live { pointer-events: none; }
.ink.is-on[data-tool="pen"] .ink-cap, .ink.is-on[data-tool="hl"] .ink-cap, .ink.is-on[data-tool="shape"] .ink-cap { cursor: crosshair; }
.ink.is-on[data-tool="eraser"] .ink-cap { cursor: none; }
.ink.is-on[data-tool="laser"] .ink-cap { cursor: none; }
.ink.is-on[data-tool="text"] .ink-cap { cursor: text; }
.ink.is-on[data-tool="sticky"] .ink-cap { cursor: copy; }
.ink.is-on[data-tool="lasso"] .ink-cap { cursor: crosshair; }
.ink-hov { pointer-events: none; }
.ink-offer { position: absolute; z-index: 7; transform: translate(10px, 10px); display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 99px; background: #2F6FEB; color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; box-shadow: 0 10px 24px -10px rgba(47, 111, 235, .7); cursor: pointer; pointer-events: auto; animation: ink-in .3s cubic-bezier(0.32, 0.72, 0, 1); }
.ink-offer svg { width: 16px; height: 16px; }
@keyframes ink-in { from { opacity: 0; transform: translate(10px, 18px) scale(.9); } }
.ink-er { fill: rgba(var(--fg-rgb, 21, 22, 26), .06); stroke: rgba(var(--fg-rgb, 21, 22, 26), .55); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ink-lasso { fill: rgba(47, 111, 235, .06); stroke: #2F6FEB; stroke-width: 1.5; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; }
.ink-selbox { fill: rgba(47, 111, 235, .05); stroke: #2F6FEB; stroke-width: 1.5; stroke-dasharray: 7 5; vector-effect: non-scaling-stroke; }
.ink-selh { fill: #fff; stroke: #2F6FEB; stroke-width: 2; vector-effect: non-scaling-stroke; }
.ink-selbar { position: absolute; z-index: 7; transform: translate(-50%, calc(-100% - 10px)); display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 14px; background: #0E0E10; color: #fff; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); pointer-events: auto; white-space: nowrap; }
.ink-selbar button[data-inksel] { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.ink-selbar button[data-inksel]:hover { background: rgba(255, 255, 255, .12); }
.ink-selbar button[data-inksel] svg { width: 15px; height: 15px; }
.ink-selbar__c { display: flex; gap: 3px; padding: 0 4px; }
.ink-selbar__c button { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); cursor: pointer; }

/* text boxes */
.ink-t { position: absolute; min-width: 40px; max-width: 70%; line-height: 1.35; font-weight: 600; }
.ink-t__tx { padding: .15em .3em; border-radius: .3em; white-space: pre-wrap; overflow-wrap: anywhere; outline: none; min-height: 1.35em; }
.ink-t__grip, .ink-t__del, .ink-t__rz, .ink-t__wz { display: none; }
/* on a ruled notebook page: one line = a whole number of rows, no padding above or below, so typing sits on the rules (R-CD675B) */
.ink-t--ruled { line-height: var(--lh, 1.35); }
.ink-t--ruled .ink-t__tx { padding-top: 0; padding-bottom: 0; min-height: var(--lh, 1.35em); }
/* the side handle: drag to make the box wider or narrower (R-4F8C08); the corner one still sizes the text */
.ink.els-live .ink-t.is-selected .ink-t__wz { display: block; position: absolute; right: -28px; top: 50%; width: 18px; height: 26px; margin-top: -13px; cursor: ew-resize; touch-action: none; }
.ink-t__wz::before { content: ""; position: absolute; left: 6px; top: 3px; width: 6px; height: 20px; border-radius: 3px; background: #2F6FEB; box-shadow: 0 0 0 2px #fff; }
.ink.els-live .ink-t__tx { background: transparent; }
.ink.els-live .ink-t__tx[contenteditable="true"] { cursor: text; }
.ink.els-live .ink-t.is-selected[data-editable="true"] .ink-t__tx { box-shadow: 0 0 0 2px #2F6FEB; background: rgba(var(--glass-rgb, 255, 255, 255), .55); }
.ink.els-live .ink-t__tx:empty::before { content: attr(data-ph); opacity: .45; font-weight: 500; }
.ink.els-live .ink-t.is-selected[data-editable="true"] .ink-t__grip { display: block; position: absolute; left: -14px; top: 50%; width: 14px; height: 24px; margin-top: -12px; border-radius: 4px; background: radial-gradient(circle, #2F6FEB 1.4px, transparent 1.6px) 0 0 / 5px 5px; cursor: grab; touch-action: none; }
.ink.els-live .ink-t.is-selected .ink-t__rz { display: block; position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; border: 2px solid #2F6FEB; border-radius: 50%; background: #fff; cursor: nwse-resize; touch-action: none; }
.ink.els-live .ink-t.is-selected .ink-t__del { display: grid; position: absolute; top: -10px; right: -10px; width: 22px; height: 22px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: #0E0E10; color: #fff; cursor: pointer; }
.ink-t__del svg { width: 11px; height: 11px; }

/* typed lines, highlights and pictures on a notebook's page (owner, 2026-10-26) */
.ink-ln, .ink-fig { position: absolute; }
.ink-ln { font-family: Satoshi, system-ui, sans-serif; font-weight: 500; letter-spacing: -.005em; }
.ink-ln__tx, .ink-ln__q { position: relative; top: var(--dn, 0); } /* onto the rule; the box itself stays between the rules */
.ink-ln__tx { min-height: 1em; white-space: pre-wrap; overflow-wrap: anywhere; outline: none; }
.ink-ln__tx:empty::before { content: attr(data-ph); opacity: .35; }
.ink-ln__q { padding: .06em .18em; border-radius: .2em; background: var(--hc); color: #15161A; white-space: pre-wrap; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ink-ln--q { cursor: pointer; }
.ink-fig { border-radius: 8px; box-shadow: 0 0 0 2.5px var(--hc); background: #fff; overflow: hidden; }
.ink-fig__in { transform-origin: 0 0; padding: 10px 12px; box-sizing: border-box; color: #15161A; font-size: 15px; line-height: 1.5; pointer-events: none; }
.ink-fig__in svg { max-width: 100%; height: auto; }
.ink-fig__in table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ink-fig__in th, .ink-fig__in td { padding: 5px 8px; border: 1px solid #D6DCE6; text-align: left; vertical-align: top; }
.ink-fig__in .kbar, .ink-fig__in button { display: none; }
.ink-ln__grip, .ink-ln__x { display: none; }
.ink.els-edit .ink-els { z-index: 5; }
.ink.els-edit .ink-els > .is-sel { pointer-events: auto; }
.ink-ln.is-sel { border-radius: 6px; box-shadow: 0 0 0 1.5px rgba(47, 111, 235, .55); background: rgba(47, 111, 235, .04); }
.ink-fig.is-sel { box-shadow: 0 0 0 2.5px var(--hc), 0 0 0 5px rgba(47, 111, 235, .55); }
.ink-ln.is-sel .ink-ln__tx { cursor: text; }
.ink-ln.is-sel .ink-ln__grip { display: block; position: absolute; left: -16px; top: 0; width: 12px; height: 100%; max-height: 40px; border-radius: 4px; background: radial-gradient(circle, #2F6FEB 1.5px, transparent 1.8px) 0 0 / 6px 6px; cursor: ew-resize; touch-action: none; }
/* the × sits at the box's bottom left, always in the same spot (owner, 2026-10-26) */
.ink-ln.is-sel .ink-ln__x, .ink-fig.is-sel .ink-ln__x { display: grid; place-items: center; position: absolute; left: -11px; bottom: -11px; z-index: 2; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: #E5484D; color: #fff; cursor: pointer; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4); }
.ink-ln.is-sel:not(.ink-fig) .ink-ln__x { left: -44px; bottom: 0; } /* a typed line's × sits left of the box, never over the text */
.ink-ln__x svg { width: 12px; height: 12px; }

/* sticky notes */
.ink-st { position: absolute; display: flex; flex-direction: column; border-radius: calc(var(--u) * 8); background: var(--bg); box-shadow: 0 calc(var(--u) * 10) calc(var(--u) * 24) calc(var(--u) * -10) rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .05); font-weight: 600; line-height: 1.35; overflow: hidden; }
.ink-st__bar { flex: none; display: flex; justify-content: flex-end; gap: 2px; height: calc(var(--u) * 30); min-height: 18px; padding: 0 calc(var(--u) * 6); background: rgba(0, 0, 0, .06); cursor: grab; touch-action: none; }
.ink-st__bar button { width: calc(var(--u) * 28); min-width: 18px; height: 100%; padding: 0; border: 0; background: none; color: rgba(0, 0, 0, .55); font: inherit; font-size: calc(var(--u) * 20); line-height: 1; cursor: pointer; opacity: 0; transition: opacity .15s; display: grid; place-items: center; }
.ink-st__bar button svg { width: 60%; height: 60%; }
.ink-st__bar button[data-el-act="color"]::before { content: ""; width: 55%; height: 55%; border-radius: 50%; background: conic-gradient(#FFE98A, #FFC2D1, #BDE3FF, #C7F0C2, #E4D4FF, #FFE98A); }
.ink.els-live .ink-st:hover .ink-st__bar button, .ink.els-live .ink-st:focus-within .ink-st__bar button { opacity: 1; }
.ink-st__tx { flex: 1; padding: calc(var(--u) * 8) calc(var(--u) * 12) calc(var(--u) * 14); white-space: pre-wrap; overflow-wrap: anywhere; overflow: auto; outline: none; }
.ink-st__tx:empty::before { content: attr(data-ph); opacity: .4; font-weight: 500; }
.ink-st.is-min { height: auto !important; }
.ink-st.is-min .ink-st__tx { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; padding-bottom: calc(var(--u) * 8); }
.ink-st__rz { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, transparent 55%, rgba(0, 0, 0, .25) 55%, rgba(0, 0, 0, .25) 62%, transparent 62%, transparent 72%, rgba(0, 0, 0, .25) 72%, rgba(0, 0, 0, .25) 79%, transparent 79%); display: none; }
.ink.els-live .ink-st:not(.is-min) .ink-st__rz { display: block; }

/* the laser lives over the viewport */
.ink-laser { position: fixed; inset: 0; z-index: 250; width: 100vw; height: 100vh; pointer-events: none; }

/* ---------- the toolbar ---------- */
.ink-bar { display: flex; align-items: center; gap: 6px; padding: 6px; border-radius: 20px; background: #0E0E10; color: #fff; scrollbar-width: none; -webkit-user-select: none; user-select: none; }
.ink-bar::-webkit-scrollbar { display: none; }
.ink-bar--float { position: fixed; left: 50%; bottom: 18px; z-index: 240; max-width: calc(100vw - 20px); overflow-x: auto; 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; }
.ink-bar--float.is-in { transform: translate(-50%, 0); opacity: 1; }
.ink-bar--dock { width: 100%; overflow-x: auto; border-radius: 16px; }
.ink-bar__g { flex: none; display: flex; align-items: center; gap: 2px; padding-right: 6px; border-right: 1px solid rgba(255, 255, 255, .12); }
.ink-bar__g:last-child, .ink-bar__g:has(+ .ink-mini) { border-right: 0; padding-right: 0; } /* (the last group: the folded pencil circle .ink-mini comes after it) */
.ink-bar__props { gap: 5px; padding: 0 8px 0 4px; min-height: 38px; }
.ink-b { flex: none; 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; transition: background-color .15s, color .15s; }
.ink-b svg { width: 18px; height: 18px; }
.ink-b:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.ink-b.is-on { background: #fff; color: #0E0E10; }
.ink-b[data-tool="laser"].is-on { background: #FF3B30; color: #fff; }
.ink-b:disabled { opacity: .3; cursor: default; background: none; }
.ink-b--sm { width: 30px; height: 30px; }
.ink-c { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); cursor: pointer; transition: transform .15s; }
.ink-c.is-on { transform: scale(1.12); box-shadow: 0 0 0 2px #0E0E10, 0 0 0 4px #fff; }
.ink-c--sq { border-radius: 6px; }
.ink-c--auto:not(.is-on) { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); } /* black ink still shows on the black bar */
.ink-sz { flex: none; width: 26px; height: 30px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer; }
.ink-sz i { width: var(--d); height: var(--d); border-radius: 50%; background: rgba(255, 255, 255, .5); }
.ink-sz.is-on { background: rgba(255, 255, 255, .14); }
.ink-sz.is-on i { background: #fff; }
.ink-chip { flex: none; height: 30px; padding: 0 10px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .1); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ink-hint { padding: 0 4px; font-size: 12.5px; color: rgba(255, 255, 255, .55); white-space: nowrap; }
.ink-done { flex: none; height: 38px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--orange, #E37239); color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ink-b:focus-visible, .ink-c:focus-visible, .ink-sz:focus-visible, .ink-done:focus-visible { outline: 2px solid var(--orange, #E37239); outline-offset: 2px; }
.ink-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* the pop-up: pen type, size, every colour, options */
.ink-pop { position: fixed; z-index: 320; width: min(300px, calc(100vw - 20px)); max-height: calc(100vh - 20px); overflow: auto; padding: 14px; border-radius: 18px; background: #18181C; color: #fff; box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08); font-size: 13px; }
.ink-pop__h { margin: 12px 0 7px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .5); }
.ink-pop__h:first-child { margin-top: 0; }
.ink-pop__v { float: right; color: var(--orange, #E37239); letter-spacing: 0; text-transform: none; font-size: 12px; }
.ink-pop__ends { display: flex; justify-content: space-between; margin-top: 2px; font-size: 11px; color: rgba(255, 255, 255, .45); }
.ink-pop__p { margin: 6px 0 0; font-size: 11.5px; color: rgba(255, 255, 255, .5); line-height: 1.4; }
.ink-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.ink-seg button { flex: 1 1 auto; height: 32px; padding: 0 10px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .8); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ink-seg button.is-on { background: #fff; color: #0E0E10; }
.ink-range { width: 100%; accent-color: var(--orange, #E37239); }
.ink-pal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.ink-pal .ink-c { width: 28px; height: 28px; }
.ink-c--custom { position: relative; overflow: hidden; background: conic-gradient(#E5484D, #F5B700, #1E8A55, #12A4B5, #2F6FEB, #8E4EC6, #E5484D); }
.ink-c--custom input { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); opacity: 0; cursor: pointer; }
.ink-sw { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; cursor: pointer; }
.ink-sw input { position: absolute; opacity: 0; }
.ink-sw i { flex: none; position: relative; width: 36px; height: 21px; border-radius: 99px; background: rgba(255, 255, 255, .18); transition: background .2s; }
.ink-sw i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: transform .2s; }
.ink-sw input:checked + i { background: var(--orange, #E37239); }
.ink-sw input:checked + i::after { transform: translateX(15px); }
.ink-sw input:focus-visible + i { outline: 2px solid var(--orange, #E37239); outline-offset: 2px; }

/* sizes and colours apart on the bar (owner, 2026-10-24) */
.ink-props__sz, .ink-props__c { display: inline-flex; align-items: center; gap: 5px; }
.ink-props__c { margin-left: 8px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, .12); }
.ink-pop__p--top { margin: -4px 0 8px; }
/* shrunk to a pencil circle (swipe right or down; tap to open) */
.ink-mini { display: none; }
.ink-bar.is-mini { padding: 0; gap: 0; overflow: visible; }
.ink-bar.is-mini > :not(.ink-mini) { display: none; }
.ink-bar.is-mini .ink-mini { display: grid; place-items: center; width: 54px; height: 54px; border: 0; border-radius: 50%; background: #0E0E10; color: #fff; cursor: pointer; }
.ink-bar.is-mini .ink-mini svg { width: 24px; height: 24px; }
.ink-bar--float.is-mini { border-radius: 50%; }
/* folded, it waits in the bottom right corner, clear of the page (owner, 2026-10-26: "it looks awkward in the middle");
   left of the AI₄₅ launcher where that shows, in the corner itself in Work it out (the launcher hides there) */
.ink-bar--float.is-mini, .ink-bar--float.is-mini.is-in { left: auto; right: var(--ink-mini-r, 92px); transform: none; }
body.qbw-mode { --ink-mini-r: 28px; }
.ink-bar--dock.is-mini { width: auto; align-self: flex-end; }
@media (max-width: 640px) { .ink-bar--float { bottom: 10px; } .ink-b { width: 34px; height: 34px; } }
@media (prefers-reduced-motion: reduce) { .ink-bar--float { transition: none; } }
@media print { .ink-bar, .ink-laser, .ink, .ink-pop { display: none !important; } }
/* Copy / Delete on a picture, table, highlight or typed line (right-click) */
.ink-ctx { position: fixed; z-index: 400; display: flex; flex-direction: column; min-width: 170px; padding: 6px; border-radius: 14px; background: #0E0E10; color: #fff; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .55); }
.ink-ctx button { display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: inherit; font: inherit; font-size: 13.5px; font-weight: 600; text-align: left; cursor: pointer; }
.ink-ctx button:hover { background: rgba(255, 255, 255, .12); }
.ink-ctx button.is-del { color: #FF8A8E; }
.ink-ctx svg { width: 15px; height: 15px; }
/* pinch zoom (Surface zoom: true, the question bank's Work it out; R-4923DB): the browser's own pinch is kept off the
   page (two fingers zoom the page itself), the selection bar and paste offer keep their size, the pill goes back to 100% */
.ink-zoomable { touch-action: pan-x pan-y; }
.ink.is-zoomed .ink-selbar { transform-origin: 0 0; transform: scale(calc(1 / var(--ink-zk, 1))) translate(-50%, calc(-100% - 10px)); }
.ink.is-zoomed .ink-offer { transform-origin: 0 0; transform: scale(calc(1 / var(--ink-zk, 1))) translate(10px, 10px); }
.ink-zoom { position: fixed; z-index: 120; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border: 0; border-radius: 99px; background: #0E0E10; color: #fff; font: inherit; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ink-zoom[hidden] { display: none; }
.ink-zoom svg { width: 15px; height: 15px; }
@media print { .ink-zoom { display: none !important; } }