/* Calibration is drawn outside the scaled reference viewport. */
html.msl-reference-screen{font-size:16px!important;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.msl-screen-area{position:fixed;inset:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);pointer-events:none;visibility:hidden}
.screen-calibration-section .field-help{margin-bottom:0}
.screen-calibration{
 position:fixed;z-index:10000;overflow:hidden;isolation:isolate;box-sizing:border-box;
 color:var(--screen-text,#f4f7f5);background:var(--screen-bg,#071b16);
 font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
 -webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:none;user-select:none;
}
.screen-calibration *{box-sizing:border-box}
.screen-calibration-surface{position:absolute;inset:0;touch-action:none}
.screen-calibration-guide{position:absolute;inset:1px;border:1px dashed var(--screen-muted,#b8c7c0);pointer-events:none;opacity:.65}
.screen-calibration-box{position:absolute;border:2px solid var(--screen-accent,#7fd89a);background:color-mix(in srgb,var(--screen-panel,#10271f) 42%,transparent);touch-action:none}
.screen-calibration-rulers{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.screen-calibration-rulers path{fill:none;stroke:var(--screen-muted,#b8c7c0);stroke-width:1;vector-effect:non-scaling-stroke}
.screen-calibration-rulers circle{fill:var(--screen-muted,#b8c7c0)}
.screen-calibration-rulers .axis{stroke:var(--screen-accent,#7fd89a)}
.screen-calibration-rulers .sight{stroke:var(--screen-accent,#7fd89a);fill:none;stroke-width:2}
.screen-calibration-rulers text{fill:var(--screen-text,#f4f7f5);font:12px system-ui,sans-serif;paint-order:stroke;stroke:var(--screen-bg,#071b16);stroke-width:3px;stroke-linejoin:round}
/* Red targets move one edge; diagonal arrows move their adjacent pair. */
.screen-calibration-handle{position:absolute;z-index:5;width:44px;height:44px;transform:translate(-50%,-50%);border:0;padding:6px;background:transparent;color:#ff7777;touch-action:none;cursor:nwse-resize}
[data-screen-theme="light"] .screen-calibration-handle{color:#bd1826}
.screen-calibration-handle svg{display:block;width:32px;height:32px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px var(--screen-panel,#10271f))}
.screen-calibration-handle.n,.screen-calibration-handle.s{cursor:ns-resize}
.screen-calibration-handle.w,.screen-calibration-handle.e{cursor:ew-resize}
.screen-calibration-handle.nw svg{transform:rotate(-90deg)}
.screen-calibration-handle.sw svg{transform:rotate(180deg)}
.screen-calibration-handle.se svg{transform:rotate(90deg)}
.screen-calibration-handle.ne,.screen-calibration-handle.sw{cursor:nesw-resize}
/* Keep spoken instructions without putting a paragraph over the rulers. */
.screen-calibration-instruction{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.screen-calibration-edge{position:absolute;z-index:2;padding:5px 4px;border-radius:8px;background:var(--screen-panel,#10271f);font-size:16px;line-height:1.25;font-weight:600;overflow-wrap:normal;pointer-events:none}
.screen-calibration-edge strong,.screen-calibration-edge span{display:block}
.screen-calibration-edge strong{font-size:inherit;font-weight:750}
.screen-calibration-edge[data-fit="outside"]{color:#ff6b69;border:1px solid currentColor}
[data-screen-theme="light"] .screen-calibration-edge[data-fit="outside"]{color:#b21f25}
.screen-calibration-edge[data-fit="aligned"]{color:var(--screen-accent,#7fd89a)}
.screen-calibration h1{position:absolute;z-index:3;left:50%;transform:translate(-50%,-50%);margin:0;padding:5px 11px;border-radius:10px;background:var(--screen-panel,#10271f);color:var(--screen-accent,#7fd89a);font-size:clamp(23px,6vw,30px);line-height:1.1;text-align:center;pointer-events:none}
.screen-calibration-controls{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;grid-template-columns:minmax(0,1fr);gap:10px;width:min(52%,230px);padding:9px;border-radius:20px;background:var(--screen-panel,#10271f);box-shadow:0 2px 15px #0003}
.screen-calibration-controls button{width:100%;height:48px;margin:0;padding:5px 9px;border:1px solid var(--screen-border,#5b766a);border-radius:14px;background:var(--screen-control,#17372d);color:var(--screen-text,#f4f7f5);font:700 20px/1.1 system-ui,sans-serif;touch-action:manipulation;cursor:pointer}
.screen-calibration-controls button:first-child{background:var(--screen-selected,#315b49);border-color:var(--screen-accent,#7fd89a)}
.screen-calibration-controls button:disabled{opacity:.45;cursor:default}
.screen-calibration :is(button:focus-visible){outline:3px solid var(--screen-accent,#7fd89a);outline-offset:2px}
.screen-calibration:focus{outline:none}
.screen-calibration-message{position:absolute;z-index:3;left:50%;top:calc(50% + 115px);transform:translateX(-50%);width:min(84%,430px);margin:0;font-size:13px;line-height:1.25;text-align:center;pointer-events:none;background:var(--screen-bg,#071b16)}
@media(max-height:430px){
 .screen-calibration-controls{gap:5px;padding:6px;width:min(34%,230px)}
 .screen-calibration-controls button{height:36px;font-size:15px}
 .screen-calibration h1{font-size:19px}
 .screen-calibration-message{top:calc(50% + 76px);font-size:11px}
 .screen-calibration-edge{font-size:14px}
}

@media(max-height:620px) and (max-width:520px){.screen-calibration-edge{font-size:14px;padding:4px 5px}}