/* Built-in widgets and document overlays share management, not window chrome. */
.workspace-applet[hidden], .overlay-controls[hidden], .overlay-adjust[hidden], .random-field[hidden] { display: none !important; }
.applet-hide { width: 48px; height: 48px; font-size: 24px; }
.note-widget textarea { display: block; width: 100%; min-height: 160px; resize: vertical; max-height: 50dvh; padding: 14px; background: #fff1a8; color: #182536; font: 24px/1.4 system-ui, sans-serif; border: 0; border-radius: 10px; user-select: text; }
.note-controls { display: flex; gap: 6px; margin-top: 10px; }
.note-controls button, .random-roll { min-width: 48px; min-height: 48px; padding: 8px; background: var(--field); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; }
.note-controls button { font-size: 22px; }
.applet-tally input { color: var(--ink); background: var(--field); border-color: var(--line); font: 16px system-ui, sans-serif; }
.random-field { margin-bottom: 10px; }
.random-field label { display: block; font-size: 12px; color: var(--muted); }
.random-output { display: block; padding: 16px 0; text-align: center; font-size: 38px; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.random-roll { width: 100%; font-size: 18px; }
#on-screen-section { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; }
#on-screen-section h3 { margin: 0 0 10px; font-size: 14px; }
#on-screen-list { max-height: 190px; overflow-y: auto; overscroll-behavior: contain; }
.on-screen-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0; }
.on-screen-row button { font-size: 12px; padding: 6px 10px; min-height: 44px; }
.on-screen-select { flex: 1; text-align: left; min-width: 120px; font-weight: 650; }

.workspace-applet.document-overlay {
    display: block; position: absolute; min-width: 0; min-height: 0; max-width: none; max-height: none;
    border: 0; border-radius: 0; padding: 0; background: transparent; box-shadow: none;
    overflow: visible; pointer-events: none; resize: none;
}
:root .document-overlay.blur-cover { background: transparent; backdrop-filter: none !important; }
.overlay-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transform-origin: center; }
.document-overlay .overlay-surface { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 8px; pointer-events: auto; cursor: move; touch-action: none; }
.document-overlay.overlay-selected .overlay-surface { outline: 2px dashed #247de0; outline-offset: 3px; }
.overlay-controls { position: absolute; top: calc(100% + 10px); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: min(500px, calc(100vw - 16px)); padding: 10px; border: 1px solid var(--edge); border-radius: 14px; background: var(--solid); color: var(--ink); box-shadow: var(--shadow); pointer-events: auto; }
.overlay-controls > strong { font: 650 12px system-ui, sans-serif; width: 100%; }
.overlay-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.overlay-controls button { width: auto; height: 48px; min-width: 48px; padding: 8px 12px; font: 13px/1.2 system-ui, sans-serif; color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 9px; }
.overlay-controls button[aria-pressed="true"] { background: var(--selected); border-color: var(--accent); }
.overlay-controls output { padding: 6px; font: 650 16px system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.overlay-adjust { pointer-events: auto; touch-action: none; }
.document-overlay:not(.overlay-selected) .overlay-adjust { display: none; }
.document-overlay .applet-resize { right: -20px; bottom: -20px; width: 52px; height: 52px; border-radius: 12px; z-index: 2; }
.overlay-rotate { position: absolute; top: -58px; left: calc(50% - 26px); width: 52px; height: 52px; padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--solid); font-size: 26px; cursor: grab; }
.overlay-locked .overlay-frame, .overlay-locked .overlay-frame *, .edge-drawing .overlay-surface { pointer-events: none !important; }
.document-overlay.blur-cover .overlay-surface { backdrop-filter: blur(24px); background: #798ba32a; }
:root[data-solid="true"] .document-overlay.blur-cover .overlay-surface { backdrop-filter: blur(24px) !important; }
.document-overlay.blur-cover.opaque-cover .overlay-surface { background: var(--solid); backdrop-filter: none !important; }
@supports not (backdrop-filter: blur(1px)) { .document-overlay.blur-cover .overlay-surface { background: var(--solid); } }
.document-overlay .cover-controls { position: static; padding: 0; background: none; }
.applet-spotlight .overlay-surface { border-radius: 50%; box-shadow: 0 0 0 200vmax rgba(0, 0, 0, .64); }
.applet-spotlight.spotlight-square .overlay-surface { border-radius: 10px; }
.curtain-shade { position: absolute; inset: 0; background: var(--solid); border: 1px solid var(--line); border-radius: 8px; pointer-events: none; }
.curtain-grip { position: absolute; transform: translate(-50%, -50%); width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 12px; background: var(--solid); color: var(--accent); font-size: 26px; }
.applet-reading .overlay-surface { background: #ffe07440; border-top: 2px solid #d6a715; border-bottom: 2px solid #d6a715; border-radius: 0; }
.applet-reading.reading-dim .overlay-surface { box-shadow: 0 0 0 200vmax #0007; }
.applet-magnifier .overlay-surface { border-radius: 50%; overflow: hidden; border: 3px solid #63aafa; box-shadow: 0 4px 18px #0004; }
.magnifier-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.applet-straightedge .overlay-surface { border-radius: 0 0 8px 8px; border-top: 3px solid #1671bd; border-bottom: 1px solid #1671bd; background: linear-gradient(#b9eaff66, #b9eaff22); }
.applet-straightedge.edge-drawing .overlay-surface { border-top-color: #e74922; }
.protractor-drawing { display: block; width: 100%; height: 100%; overflow: visible; }
.protractor-plate { fill: #d0efff55; stroke: #17679e; stroke-width: 1.5; }
.degree-tick { stroke: #174968; stroke-width: 1; }
.degree-label { font: 10px system-ui, sans-serif; fill: #0b3450; stroke: #fff; stroke-width: 2px; paint-order: stroke; }
.protractor-center { fill: #102d44; }
.angle-ray { stroke-width: 2.5; }
.angle-ray.ray-0 { stroke: #dc432a; }
.angle-ray.ray-1 { stroke: #176be0; }
.ray-grip { stroke-width: 2; cursor: grab; }
.ray-grip.ray-0 { stroke: #dc432a; fill: #ffddd488; }
.ray-grip.ray-1 { stroke: #176be0; fill: #d2eaff88; }
.protractor-readout { font: 700 22px system-ui, sans-serif; fill: #102d44; stroke: white; stroke-width: 3; paint-order: stroke; pointer-events: none; }
@media (forced-colors: active) { .overlay-surface, .overlay-controls { border: 2px solid CanvasText; } .degree-label, .protractor-readout { fill: CanvasText; stroke: Canvas; } }
/* Icon controls keep their touch area independent of their visual size. */
.applet-control-icon { display: block; width: 24px; height: 24px; flex: 0 0 24px; pointer-events: none; }
.workspace-applet button:has(.applet-control-icon), #applets-dialog button:has(.applet-control-icon) { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 10px; }
.overlay-controls button:has(.applet-control-icon) { width: 48px; flex: 0 0 48px; }
.applet-header .applet-close, .applet-header .applet-hide { flex: 0 0 48px; }
.applet-actions { justify-content: center; }
.applet-actions button { flex: 1; }
#applets-dialog.tool-panel { width: 980px; }
.applets-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; }
.applets-library { min-width: 0; }
#applet-catalog { margin-bottom: 0; }
#on-screen-section { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0 0 0 18px; border-top: 0; border-left: 1px solid var(--line); }
#on-screen-section h3 { color: var(--ink); font-size: 14px; margin: 0 0 12px; }
#on-screen-empty { font-size: 13px; color: var(--muted); }
#on-screen-list { flex: 1; max-height: min(280px, 36dvh); }
.on-screen-row { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 48px); gap: 4px; flex-wrap: nowrap; }
.on-screen-row button { min-width: 0; min-height: 48px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); }
.on-screen-row .on-screen-select { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 6px; overflow-wrap: anywhere; }
.on-screen-icon { flex: 0 0 22px; font-size: 22px; text-align: center; }
.on-screen-row button[aria-pressed="true"][data-action="lock"] { background: var(--selected); border-color: var(--accent); }
.on-screen-row button[aria-pressed="false"][data-action="visibility"] { opacity: .55; }
#on-screen-section footer { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
#clear-applets { color: var(--ink); }
#clear-applets:disabled { opacity: .4; }
.on-screen-row [data-action="remove"]:hover, #clear-applets:not(:disabled):hover { color: #c83240; border-color: currentColor; }
@media (max-width: 780px) {
    .applets-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    #on-screen-section { border-left: 0; border-top: 1px solid var(--line); padding: 14px 0 0; }
    #on-screen-list { max-height: 180px; }
    #applet-catalog { max-height: 220px; }
}
/* Content-sized overlay controls and a touch-sized note corner. */
.overlay-controls { display: block; width: max-content; max-width: calc(100vw - 16px); }
.overlay-controls > strong { display: block; width: auto; margin-bottom: 6px; }
.overlay-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.overlay-extra { display: contents; }
.note-widget { height: 320px; display: flex; flex-direction: column; }
.note-widget .applet-header { flex: 0 0 auto; }
.note-widget .applet-body { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.note-widget textarea { flex: 1; min-height: 60px; max-height: none; resize: none; }
.note-controls { flex: 0 0 auto; flex-wrap: wrap; }
.note-controls .note-resize { margin-left: auto; cursor: nwse-resize; touch-action: none; }
.note-widget[data-locked="true"] .note-resize { visibility: hidden; }
/* Stable tool layouts: controls do not reflow as content changes. */
.note-widget { width: 352px; min-width: min(352px, calc(100vw - 16px)); height: 280px; }
.note-controls { flex-wrap: nowrap; gap: 6px; }
.note-controls button { flex: 0 0 48px; width: 48px; padding: 6px; }
.note-widget .applet-body { padding: 16px; }
@media (max-width: 367px) { .note-widget .applet-body { padding: 10px; } .note-controls { gap: 4px; overflow-x: auto; } }
.applet-dice .random-output { min-height: 116px; font: 700 64px/1.15 system-ui, sans-serif; color: var(--ink); }
.applet-dice .dice-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.die-face { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 5px; width: 80px; height: 80px; flex: 0 0 80px; padding: 12px; background: #fff; border: 2px solid #253246; border-radius: 14px; box-shadow: 0 3px 6px #0003; }
.die-pip { width: 12px; height: 12px; align-self: center; justify-self: center; border-radius: 50%; background: #152033; }
.applet-dice .clock-state { font-size: 16px; }
.applet-dice .random-roll { min-height: 56px; }
.applet-results { position: relative; height: min(300px, 42dvh); margin-top: 14px; }
#applet-catalog { height: 100%; max-height: none; margin: 0; align-content: start; }
#applet-no-results { position: absolute; inset: 0; margin: 0; padding: 24px; text-align: center; pointer-events: none; }
@media (max-width: 780px) { .applet-results { height: 220px; } }
/* Settings uses the same panel header, surface and fields as the tool popups. */
#settings-dialog { width: 600px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 32px); padding: 0; overflow: hidden; background: var(--glass); color: var(--ink); border: 1px solid var(--edge); border-radius: 20px; box-shadow: var(--shadow); backdrop-filter: blur(16px); }
.settings-screen { display: flex; flex-direction: column; max-height: calc(100dvh - 34px); margin: 0; }
#settings-dialog .tool-panel-header { flex: 0 0 auto; margin: 0; }
.settings-content { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px 18px; }
.settings-section { margin-top: 16px; padding-top: 16px; }
.settings-section:first-child { margin-top: 0; border-top: 0; }
.settings-section h3 { margin: 0 0 8px; font: 650 14px/1.3 system-ui, sans-serif; }
.settings-section p { margin: 6px 0 12px; font-size: 12px; }
.settings-section label { font-size: 14px; }
#settings-dialog select, #settings-camera { min-height: 48px; width: 100%; margin: 6px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--field); color: var(--ink); font: 14px system-ui, sans-serif; }
#settings-dialog .setting-row { min-height: 48px; cursor: pointer; }
#settings-dialog input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--accent); }
#settings-dialog .settings-footer { margin-top: 16px; padding-top: 14px; }
#settings-dialog { max-height: min(680px, calc(100dvh - 32px)); }
.settings-screen { max-height: min(678px, calc(100dvh - 34px)); }
/* Give both range fields equal space without shrinking their touch controls. */
.applet-dice { width: 460px; }
.random-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.random-fields .dice-count-field { grid-column: 1 / -1; }
.random-fields .time-stepper { grid-template-columns: 48px minmax(0, 1fr) 48px; gap: 4px; }
.random-fields input[type="number"] { color: var(--ink); background: var(--field); border: 1px solid var(--line); border-radius: 9px; }
@media (max-width: 440px) { .random-fields { grid-template-columns: minmax(0, 1fr); } }
/* Applet-style utility windows. */
#empty-state { padding: 24px 24px 120px; }
#empty-state #welcome-camera { display: grid; place-items: center; width: min(300px, 65vw); padding: 0; border: 0; border-radius: 20px; background: transparent; box-shadow: none; }
#welcome-camera img { display: block; width: 100%; height: auto; }
#heart-popup-menu { position: fixed; left: 40px; top: 100px; bottom: auto; right: auto; transform: none; width: 360px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 24px); padding: 0; overflow-y: auto; z-index: 155; background: var(--solid); border-radius: 16px; }
#heart-popup-menu .applet-header { position: sticky; top: 0; padding-left: 54px; }
#heart-popup-menu #support-handle { text-align: center; }
#heart-popup-menu .applet-body { text-align: center; }
#heart-popup-menu .donate-link { justify-content: center; text-align: center; }
#close-heart-popup-btn, #close-pip, #expand-pip { flex: 0 0 48px; width: 48px; height: 48px; min-height: 48px; padding: 0; font-size: 24px; }
#pip-container { position: fixed; bottom: auto; right: auto; left: 40px; top: 100px; width: 360px; height: 264px; border-radius: 16px; background: var(--solid); z-index: 110; transition: none; }
#pip-container .applet-header { height: 62px; min-height: 62px; position: relative; z-index: 2; }
#pip-container #expand-pip { position: static; opacity: 1; background: transparent; color: var(--ink); border-radius: 8px; }
#pip-container #pip { position: absolute; left: 0; top: 62px; width: 100%; height: calc(100% - 62px); object-fit: contain; background: #000; }
#resize-pip { position: absolute; bottom: 4px; right: 4px; z-index: 3; width: 52px; height: 52px; border: 1px solid var(--line); border-radius: 10px; background: var(--solid); color: var(--ink); touch-action: none; cursor: nwse-resize; }
#resize-pip[hidden] { display: none; }
.pip-maximized #camera-container, .pip-maximized #applet-layer, .pip-maximized #empty-state { visibility: hidden; pointer-events: none; }
.pip-maximized #pip-handle { cursor: default; }
:root[data-camera-connected="false"] #camera-container { visibility: hidden; pointer-events: none; }
/* PiP behaves like a document overlay, with controls only while selected. */
#pip-container { border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; }
#pip-container #pip { top: 0; height: 100%; border-radius: 8px; }
#pip-handle { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 8px; background: transparent; touch-action: none; cursor: move; z-index: 2; }
#pip-container.pip-selected #pip-handle { outline: 2px dashed #247de0; outline-offset: 3px; }
#pip-controls { z-index: 4; }
#pip-container #expand-pip { background: var(--field); border: 1px solid var(--line); }
#pip-container #resize-pip { right: -20px; bottom: -20px; border-radius: 12px; }
.pip-maximized #pip-handle { cursor: default; }
.resolution-actions { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
#rescan-resolutions { margin-left: auto; min-height: 48px; }
#resolution-scan-status { font-size: 13px; color: var(--muted); }
#heart-popup-menu .profile-reset { display: flex; justify-content: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
#reset-profile { min-height: 48px; }