/* IlmMaps shared institute viewer styles. Loaded once per map via in . Extracted from the previously-inlined per-map CSS (level dots, mark-taught modal) plus the stale-classification hint. */ .ol-level-dot { width: 7px; height: 7px; border-radius: 2px; flex: none; margin-left: 2px; } #mark-taught-panel { position: fixed; inset: 0; z-index: 9998; display: none; } #mark-taught-panel .mt-back { position: absolute; inset: 0; background: rgba(0,0,0,0.4); } #mark-taught-panel .mt-card { position: relative; z-index: 1; max-width: 420px; margin: 12vh auto; max-height: 84vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; color: #111; border-radius: 14px; padding: 20px; box-shadow: 0 8px 30px rgba(0,0,0,0.25); font-family: system-ui, -apple-system, sans-serif; } /* V14: on short / landscape screens drop the top margin and grow the scroll area so the Save/Cancel buttons stay reachable inside the modal (content scrolls, not the page). */ @media (max-height: 560px) { #mark-taught-panel .mt-card { margin: 3vh auto; max-height: 94vh; } } [data-theme="dark"] #mark-taught-panel .mt-card { background: #1e2e20; color: #e8e4d8; } #mark-taught-panel .mt-h { font-size: 17px; font-weight: 700; margin-bottom: 10px; } #mark-taught-panel .mt-l { display: block; font-size: 12.5px; margin: 10px 0 4px; } #mark-taught-panel select, #mark-taught-panel #mt-note, #mark-taught-panel #mt-hw { width: 100%; padding: 8px 10px; border: 1.5px solid #ccc; border-radius: 8px; font-size: 14px; font-family: inherit; box-sizing: border-box; background: #fff; color: #111; } [data-theme="dark"] #mark-taught-panel select, [data-theme="dark"] #mark-taught-panel #mt-note, [data-theme="dark"] #mark-taught-panel #mt-hw { background: #16241a; color: #e8e4d8; border-color: #2a3828; } #mark-taught-panel .mt-btns { display: flex; gap: 8px; margin-top: 16px; } #mark-taught-panel .mt-btn { padding: 9px 16px; background: #1a5c3a; color: #fff; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 14px; } #mark-taught-panel .mt-ghost { background: none; color: #888; border: 1px solid #ccc; } #mark-taught-panel .mt-fb { font-size: 12.5px; color: #c0392b; margin-top: 8px; min-height: 14px; } /* Shared-note indicators: the outliner note dot is an HTML div (background); the map's node dot is an SVG circle whose fill attribute a CSS `fill` rule overrides. Green = the note came from a teacher/ institute share, orange (the map default) = the reader's own note. */ .ol-note-dot.house, .mm-note-dot.house { background: #1a5c3a !important; fill: #1a5c3a !important; } [data-theme="dark"] .ol-note-dot.house, [data-theme="dark"] .mm-note-dot.house { background: #5fb98a !important; fill: #5fb98a !important; } /* V14: narrow non-touch windows (e.g. a small laptop window with an institute admin's extra toolbar buttons) can push the centered toolbar past both viewport edges, clipping buttons with no way to reach them. Mirror the existing touch overflow strategy: left-align and allow horizontal scroll, and un-pin the zoom cluster so it scrolls with the row. The in-app touch (pointer: coarse) breakpoint already handles touch devices; this targets the fine-pointer gap only, so it never disturbs the desktop centered layout when it fits. */ @media (max-width: 860px) and (pointer: fine) { #toolbar { overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; justify-content: flex-start; -webkit-overflow-scrolling: touch; } #toolbar > * { flex-shrink: 0; } #toolbar::-webkit-scrollbar { height: 6px; } .tb-zoom-fixed { position: static; transform: none; order: 10; } } /* Fullscreen toolbar reveal (desktop hover): the map's inline _onFsChange() sets #toolbar display:none in fullscreen; override that and slide the bar in/out from the bottom edge instead. The pinned bar overlays the canvas (no resize). #fs-pin shows only in fullscreen. */ body.fs-toolbar #toolbar { display: flex !important; transform: translateY(110%); transition: transform 0.25s ease; z-index: 120; box-shadow: 0 -2px 14px rgba(0,0,0,0.18); } body.fs-toolbar.fs-toolbar-show #toolbar { transform: translateY(0); } #fs-pin { display: none; } body.fs-toolbar #fs-pin { display: inline-flex; align-items: center; } #fs-pin.pinned { color: var(--green, #1a5c3a); } /* Assessment capture drawer (P1): right-side panel that keeps the map visible. Mirrors the Notes/Bookmarks drawer pattern (translateX off-canvas; .open slides in). Lives in the shared asset so no per-map patching is needed. */ #aq-drawer { position: fixed; top: var(--topbar-h, 52px); right: 0; bottom: calc(var(--toolbar-h, 52px) + env(safe-area-inset-bottom)); width: 360px; max-width: 92vw; z-index: 9996; background: #fff; color: #111; border-left: 1px solid #e2ded6; box-shadow: -4px 0 18px rgba(0,0,0,0.12); transform: translateX(102%); transition: transform 0.25s ease; display: flex; flex-direction: column; font-family: system-ui, -apple-system, sans-serif; } #aq-drawer.open { transform: translateX(0); } [data-theme="dark"] #aq-drawer { background: #162018; color: #e8e4d8; border-left-color: #2a3828; box-shadow: -4px 0 18px rgba(0,0,0,0.5); } #aq-drawer .aq-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e2ded6; font-weight: 700; font-size: 15px; flex: none; } [data-theme="dark"] #aq-drawer .aq-head { border-bottom-color: #2a3828; } #aq-drawer .aq-x { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #888; padding: 0 4px; } #aq-drawer .aq-body { padding: 14px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; } #aq-drawer .aq-link { font-size: 12.5px; color: #555; background: #f2faf5; border: 1px solid #d8e6dc; border-radius: 8px; padding: 7px 10px; margin-bottom: 10px; } [data-theme="dark"] #aq-drawer .aq-link { background: #152419; border-color: #2a3828; color: #8a9e8a; } #aq-drawer .aq-l { display: block; font-size: 12px; margin: 10px 0 4px; color: #555; } [data-theme="dark"] #aq-drawer .aq-l { color: #8a9e8a; } #aq-drawer textarea, #aq-drawer input, #aq-drawer select { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1.5px solid #ccc; border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; color: #111; } [data-theme="dark"] #aq-drawer textarea, [data-theme="dark"] #aq-drawer input, [data-theme="dark"] #aq-drawer select { background: #0f1a13; color: #e8e4d8; border-color: #2a3828; } #aq-drawer textarea { resize: vertical; } #aq-drawer .aq-ins, #aq-pool-drawer .aq-ins { font-size: 11.5px; color: #777; margin: 4px 0 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } #aq-drawer .aq-ins button, #aq-pool-drawer .aq-ins button { font-size: 11.5px; padding: 3px 8px; border: 1px solid #d8e6dc; border-radius: 6px; background: #f2faf5; color: #1a5c3a; cursor: pointer; font-family: inherit; } [data-theme="dark"] #aq-drawer .aq-ins button, [data-theme="dark"] #aq-pool-drawer .aq-ins button { background: #152419; color: #5fb98a; border-color: #2a3828; } #aq-drawer .aq-chk { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin: 10px 0; } #aq-drawer .aq-chk input { width: auto; } #aq-drawer .aq-adv { background: none; border: none; color: #1a5c3a; font-weight: 700; font-size: 12.5px; cursor: pointer; padding: 8px 0; } [data-theme="dark"] #aq-drawer .aq-adv { color: #5fb98a; } #aq-drawer .aq-advbox { display: none; } #aq-drawer .aq-advbox.open { display: block; } #aq-drawer .aq-btns { display: flex; gap: 8px; margin-top: 14px; } #aq-drawer .aq-save { padding: 9px 16px; background: #1a5c3a; color: #fff; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; font-size: 14px; } #aq-drawer .aq-ghost { padding: 9px 16px; background: none; color: #888; border: 1px solid #ccc; border-radius: 8px; cursor: pointer; font-size: 14px; } #aq-drawer .aq-fb { font-size: 12px; color: #777; margin-top: 10px; min-height: 14px; } #aq-drawer .aq-fb.aq-err { color: #c0392b; } body.preview-mode #aq-drawer { display: none; } @media (max-width: 600px) { #aq-drawer { width: 100%; max-width: 100%; } } /* Question-pool browse drawer (see the captured questions for the current map) */ #aq-pool-drawer { position: fixed; top: var(--topbar-h, 52px); right: 0; bottom: calc(var(--toolbar-h, 52px) + env(safe-area-inset-bottom)); width: 360px; max-width: 92vw; z-index: 9996; background: #fff; color: #111; border-left: 1px solid #e2ded6; box-shadow: -4px 0 18px rgba(0,0,0,0.12); transform: translateX(102%); transition: transform 0.25s ease; display: flex; flex-direction: column; font-family: system-ui, -apple-system, sans-serif; } #aq-pool-drawer.open { transform: translateX(0); } [data-theme="dark"] #aq-pool-drawer { background: #162018; color: #e8e4d8; border-left-color: #2a3828; box-shadow: -4px 0 18px rgba(0,0,0,0.5); } #aq-pool-drawer .aq-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #e2ded6; font-weight: 700; font-size: 15px; flex: none; } [data-theme="dark"] #aq-pool-drawer .aq-head { border-bottom-color: #2a3828; } #aq-pool-drawer .aq-x { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #888; padding: 0 4px; } #aq-pool-drawer .aq-body { padding: 14px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; } #aq-pool-drawer .aq-chk { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin: 0 0 8px; } #aq-pool-drawer .aq-chk input { width: auto; } #aq-pool-drawer .aq-fb { font-size: 12px; color: #777; margin-bottom: 10px; } #aq-pool-drawer .aqp-q { border: 1px solid #e2ded6; border-radius: 9px; padding: 9px 11px; margin-bottom: 8px; cursor: pointer; } #aq-pool-drawer .aqp-q:hover { background: #f2faf5; } [data-theme="dark"] #aq-pool-drawer .aqp-q { border-color: #2a3828; } [data-theme="dark"] #aq-pool-drawer .aqp-q:hover { background: #152419; } #aq-pool-drawer .aqp-t { font-size: 13.5px; line-height: 1.35; } #aq-pool-drawer .aqp-m { font-size: 11px; color: #888; margin-top: 4px; } #aq-pool-drawer .aqp-jump { color: #1a5c3a; font-weight: 700; } [data-theme="dark"] #aq-pool-drawer .aqp-jump { color: #5fb98a; } #aq-pool-drawer .aqp-empty { font-size: 13px; color: #999; padding: 14px 2px; } body.present-mode #aq-pool-drawer, body.preview-mode #aq-pool-drawer { display: none; } @media (max-width: 600px) { #aq-pool-drawer { width: 100%; max-width: 100%; } } /* Teaching cues stay out of clean embeds/presentations. */ body.preview-mode #ilm-part-legend, body.preview-mode #ilm-resume-btn, body.preview-mode #ilm-undo-toast, body.preview-mode #ilm-part-chip, body.preview-mode #ilm-resume-menu, body.preview-mode #ilm-teach-hint, body.present-mode #ilm-part-legend, body.present-mode #ilm-resume-btn, body.present-mode #ilm-part-chip, body.present-mode #ilm-resume-menu, body.present-mode #ilm-teach-hint { display: none; } /* "Make public" row in the note editor: theme-aware (was a hardcoded light green). */ .ilm-note-public-row { color: #1a5c3a; } [data-theme="dark"] .ilm-note-public-row { color: #5fb98a; }