/* Free measuring tools + study (fullscreen) mode, shared by the science and maths labs (public/labkit/tools.js) */
#lbBench { position: relative; }
.lb-bench-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.yt-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; border-radius: inherit; overflow: hidden; }
.yt-canvas, .yt-svg { position: absolute; left: 0; top: 0; }
.yt-svg { overflow: visible; }
.yt-layer.yt-drawing .yt-canvas { pointer-events: auto; cursor: crosshair; }
.yt-tool { pointer-events: visiblePainted; cursor: grab; }
.yt-tool:active { cursor: grabbing; }
.yt-ruler { fill: #F3E3A6; fill-opacity: .9; stroke: #A88B3C; stroke-width: 1.2; filter: drop-shadow(0 2px 3px rgba(0,0,0,.18)); }
.yt-square { fill: #BFE3F2; fill-opacity: .55; stroke: #3F7FA0; stroke-width: 1.4; filter: drop-shadow(0 2px 3px rgba(0,0,0,.15)); }
.yt-hole { fill: #fff; fill-opacity: .7; stroke: #3F7FA0; stroke-width: 1; }
.yt-prot { fill: #D9F0E4; fill-opacity: .6; stroke: #2F7A57; stroke-width: 1.4; filter: drop-shadow(0 2px 3px rgba(0,0,0,.15)); }
.yt-right { fill: none; stroke: #B23B2E; stroke-width: 1.4; }
.yt-tk { stroke: #3B3422; stroke-width: .7; }
.yt-tk-b { stroke-width: 1.2; }
.yt-num { font: 600 11px "IBM Plex Sans Arabic", Tahoma, sans-serif; fill: #3B3422; text-anchor: middle; direction: ltr; pointer-events: none; }
.yt-num-s { font-size: 9px; }
.yt-num-i { fill: #B23B2E; }
.yt-unit { font: 600 10px "IBM Plex Sans Arabic", Tahoma, sans-serif; fill: #6B5C35; text-anchor: start; }
.yt-pivot { fill: #B23B2E; }
.yt-rot { cursor: alias; }
.yt-rot-c { fill: #2B58A6; fill-opacity: .16; stroke: #2B58A6; stroke-width: 1.6; }
.yt-rot-a, .yt-rot-h { fill: none; stroke: #2B58A6; stroke-width: 2; stroke-linecap: round; }
.yt-compass .yt-leg { stroke: #8E979B; stroke-width: 6; stroke-linecap: round; }
.yt-compass .yt-lead { stroke: #E2B13C; stroke-width: 7; }
.yt-needle { fill: #B23B2E; }
.yt-hinge { fill: #3C4448; }
.yt-pdot { fill: #6B3FA0; fill-opacity: .55; }
.yt-pdot-on { fill-opacity: 1; }
.yt-hit { fill: #6B3FA0; fill-opacity: .12; stroke: #6B3FA0; stroke-width: 1.4; stroke-dasharray: 4 3; pointer-events: all; }
.yt-needlehit { cursor: move; }
.yt-penknob { cursor: ew-resize; }
.yt-knob { fill: #E2B13C; stroke: #8A6A18; stroke-width: 1.4; cursor: grab; pointer-events: all; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.yt-tip { position: absolute; z-index: 6; background: #22313A; color: #fff; font-size: .8rem; font-weight: 600; padding: 3px 9px; border-radius: 8px; pointer-events: none; white-space: nowrap; }

/* ---------------- icon rail (pinned at the side while the bench is on screen) ---------------- */
.yt-rail { position: fixed; left: 12px; top: 50%; transform: translate(-80px, -50%); z-index: 3003; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; background: #fff; border: 1px solid #DCE3E0; border-radius: 16px; box-shadow: 0 6px 18px rgba(28,42,49,.14); opacity: 0; pointer-events: none; transition: transform .2s ease, opacity .2s ease; }
.yt-rail.yt-show, .lb-fs .yt-rail { transform: translate(0, -50%); opacity: 1; pointer-events: auto; }
.yt-rail hr { width: 26px; border: 0; border-top: 1px solid #E3E8E6; margin: 3px 0; }
.yt-rail > button { position: relative; width: 42px; height: 42px; flex: none; display: grid; place-items: center; border: 0; border-radius: 11px; background: transparent; color: #33454E; cursor: pointer; }
.yt-rail > button:hover { background: #EEF2F0; }
.yt-rail > button[aria-pressed="true"], .yt-rail > button.yt-on { background: #1C2A31; color: #fff; }
.yt-rail > button[data-k="pen"][aria-pressed="true"] { background: #E2B13C; color: #1C2A31; }
.yt-rail button:focus-visible { outline: 3px solid #2B58A6; outline-offset: 1px; }
.yt-rail > button::after { content: attr(data-tip); position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); white-space: nowrap; background: #1C2A31; color: #fff; font-size: .8rem; font-weight: 600; padding: 4px 10px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .12s; }
.yt-rail > button:hover::after { opacity: 1; }
.yt-inks { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 3px 0; }
.yt-inks[hidden] { display: none; }
.yt-inks button { width: 15px; height: 15px; border-radius: 50%; border: 2px solid #fff; background: var(--c); box-shadow: 0 0 0 1px #C9D2CE; cursor: pointer; padding: 0; }
.yt-inks button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--c); }
@media (min-width: 761px) and (max-width: 1400px) { .lb-work { padding-left: 62px; } }
@media (max-width: 760px) {
    .yt-rail { left: 8px; right: 8px; top: auto; bottom: calc(var(--yl-tab-h, 64px) + env(safe-area-inset-bottom) + 8px); transform: translateY(120px); flex-direction: row; padding: 5px 6px; overflow-x: auto; overflow-y: hidden; max-height: none; }
    .yt-rail.yt-show, .lb-fs .yt-rail { transform: none; }
    .lb-fs .yt-rail { bottom: 32px; }
    .yt-rail hr { width: auto; height: 26px; border-top: 0; border-left: 1px solid #E3E8E6; margin: 0 2px; }
    .yt-rail > button::after { display: none; }
    .yt-inks { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------- study mode ---------------- */
.lb-fs-bar, .lb-fs-stamp, .lb-fs-wm, .lb-fs-copy { display: none; }
#lbWork.lb-fs { position: fixed; inset: 0; z-index: 3000; margin: 0; overflow: auto; background: #EDF1EF; padding: 64px max(16px, 3vw) 76px 76px; display: grid; gap: 16px; align-content: start; }
#lbWork.lb-fs:fullscreen { padding-top: 64px; }
#lbWork.lb-fs .lb-fs-bar { display: flex; position: fixed; top: 0; inset-inline: 0; z-index: 3002; height: 52px; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; background: #1C2A31; color: #fff; }
.lb-fs-bar b { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-fs-bar small { opacity: .75; margin-inline-start: 8px; font-weight: 500; }
.lb-fs-bar button { font: inherit; font-weight: 700; cursor: pointer; border: 1px solid rgba(255,255,255,.35); background: transparent; color: #fff; border-radius: 10px; padding: 6px 14px; flex: none; }
#lbWork.lb-fs .lb-fs-wm { display: block; position: fixed; left: 50%; top: 52%; width: min(62vmin, 520px); transform: translate(-50%, -50%) rotate(-12deg); opacity: .06; pointer-events: none; z-index: 0; }
#lbWork.lb-fs .lb-fs-stamp { display: block; position: fixed; right: 12px; bottom: 30px; width: 84px; transform: rotate(-9deg); opacity: .92; pointer-events: none; z-index: 3001; filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
#lbWork.lb-fs .lb-fs-copy { display: block; position: fixed; bottom: 0; inset-inline: 0; z-index: 3001; text-align: center; font-size: .78rem; color: #3A4A52; background: rgba(237,241,239,.92); padding: 5px 8px; pointer-events: none; }
#lbWork.lb-fs > section { position: relative; z-index: 1; max-width: 1200px; width: 100%; margin-inline: auto; }
@media (min-width: 1000px) { #lbWork.lb-fs { padding-right: 104px; } }
@media (max-width: 640px) { #lbWork.lb-fs { padding: 60px 8px 70px; } #lbWork.lb-fs .lb-fs-stamp { width: 72px; bottom: 26px; } }
@media print { .yt-layer, .yt-rail { display: none !important; } }