:host{display:block;min-width:0;container-type:inline-size;color-scheme:light;text-align:start;--bp-ink:#22242a;--bp-muted:#62646e;--bp-canvas:#f6f6f7;--bp-frame:#0d99ff;--bp-pink:#ff0099;font:400 calc(14px * var(--ui-font-scale,1))/1.43 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
*,*::before,*::after{box-sizing:border-box}[hidden]{display:none!important}
.blueprint-canvas{position:relative;min-width:0;overflow:hidden;border:1px solid #e4e4e7;border-radius:16px;background:var(--bp-canvas);color:var(--bp-ink)}
.measure-scene{position:relative;isolation:isolate;min-width:0}
.measurement-grid{position:absolute;inset:0;width:100%;height:100%;z-index:-2;fill:none;pointer-events:none;mask-image:radial-gradient(ellipse at center,#000 35%,transparent 78%)}
.measurement-grid path{stroke-width:1;vector-effect:non-scaling-stroke}.grid-anchors{stroke:#dedee2}.grid-subdivisions{stroke:#e9e9ec}
.measure-viewport{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#c4c5cc transparent;outline-offset:-3px}.measure-viewport:focus-visible{outline:2px solid #0066c7}
.measure-scene{min-width:556px;height:300px}
.timer-specimen{position:absolute;width:412px;height:88px;top:96px;left:50%;translate:-50% 0;pointer-events:none}
.specimen-contour{position:absolute;overflow:visible;pointer-events:none;fill:none;stroke:var(--bp-frame);stroke-width:1;opacity:0;transition:opacity var(--measurement-paint-duration,.18s)}.blueprint-canvas[data-rendering=outline] .specimen-contour{opacity:1}
.selection-outlines{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--bp-frame);pointer-events:none}.selection-outlines path{stroke-width:1;vector-effect:non-scaling-stroke}
.anatomy-box{position:absolute;pointer-events:none}
.frame-corner{position:absolute;left:0;top:0;translate:-50% -50%;width:calc(6px / var(--measure-scale,1));height:calc(6px / var(--measure-scale,1));border:calc(1px / var(--measure-scale,1)) solid var(--bp-frame);background:#fff;pointer-events:none}
.frame-corner[data-corner$=right]{left:100%}.frame-corner[data-corner^=bottom]{top:100%}
.measure-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}.dimension{stroke:var(--bp-pink);stroke-width:1;fill:none}.extensions{stroke:var(--bp-pink);stroke-width:1;stroke-dasharray:2 3;fill:none;opacity:.65}.snap-target{fill:none;stroke:var(--bp-frame);stroke-width:1.5;vector-effect:non-scaling-stroke}
.measure-readout{position:absolute;translate:-50% -50%;pointer-events:none;padding:calc(2px / var(--measure-scale,1)) calc(6px / var(--measure-scale,1));border-radius:calc(4px / var(--measure-scale,1));min-width:20px;text-align:center;background:var(--bp-pink);color:#fff;font-size:calc(12px * var(--ui-font-scale,1) / var(--measure-scale,1));line-height:1.333333;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:normal;white-space:nowrap;z-index:3}
.edge{position:absolute;z-index:2;translate:-50% -50%;width:44px;height:44px;padding:0;border:0;background:transparent;display:grid;place-items:center;touch-action:none;user-select:none;cursor:default;border-radius:6px}.edge>span{translate:var(--marker-x,0px) var(--marker-y,0px);opacity:0;transition:scale .14s cubic-bezier(.22,1,.36,1);visibility:hidden;scale:.65}.edge[data-hovered=true]>span,.edge[aria-pressed=true]>span,.edge[data-candidate=true]>span{opacity:1;visibility:visible;scale:1}.edge[aria-disabled=true]{cursor:default}.edge:disabled{visibility:hidden}.edge:focus{outline:none}.edge:focus-visible>span{opacity:1;visibility:visible;scale:1;outline:2px solid #0066c7;outline-offset:3px}.measurement[data-input=pointer] .edge:focus-visible>span{outline:none}.measurement[data-input=pointer] .edge:not([data-hovered=true]):not([aria-pressed=true]):focus-visible>span{visibility:hidden}.measurement[data-input=pointer] .edge[data-candidate=true]>span{opacity:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:host([compact]) .measure-controls{display:none}
:host([data-text-spacing]) .measure-readout{line-height:1.5!important;letter-spacing:.12em!important;word-spacing:.16em!important}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.saved-measurements,.saved-measurement{position:absolute;inset:0;pointer-events:none}
.saved-measurements{z-index:3}
.saved-measurement{z-index:0}
.saved-measurement[data-active=true]{z-index:1}
button.measure-readout{pointer-events:auto;appearance:none;border:0;font-family:inherit;cursor:default;touch-action:none;user-select:none}
button.measure-readout::before{content:"";position:absolute;left:50%;top:50%;translate:-50% -50%;width:max(100%,calc(44px / var(--measure-scale,1)));height:max(100%,calc(44px / var(--measure-scale,1)))}
button.measure-readout:focus-visible{outline:2px solid #0066c7;outline-offset:3px}
.measurement[data-input=pointer] button.measure-readout:focus-visible{outline:none}

/* The actual Widgets/Activities control styles load from studies.css. Only local layout and text enlargement adapt here. */
.measure-controls.figure-controls{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;height:auto;margin:0 16px 24px;--top-control-height:36px}
.measurement-styles{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;max-width:100%}
.measure-color-swatch{display:block;flex:none;width:24px;height:24px;border-radius:50%;background:var(--measure-color,var(--bp-pink));box-shadow:inset 0 0 0 1px #ffffff55}
.measurement-styles button:disabled{cursor:default}
.saved-measurement .dimension,.saved-measurement .extensions{stroke:var(--measure-color)}
.saved-measurement .measure-readout{background:var(--measure-color,var(--bp-pink))}
.saved-measurement[data-active=true] .measure-readout{box-shadow:0 0 0 calc(1px / var(--measure-scale,1)) var(--bp-canvas)}
/* Self-relative placement accounts for the actual label size. The complete
   tail sits four displayed pixels beyond the band/beam's painted boundary. */
.measure-readout[data-tail-edge]{--badge-outset:calc((var(--measurement-tail) + var(--measurement-gap)) / var(--measure-scale,1))}
.measure-readout[data-tail-edge=bottom]{translate:-50% calc(-100% - var(--badge-outset))}
.measure-readout[data-tail-edge=top]{translate:-50% var(--badge-outset)}
.measure-readout[data-tail-edge=right]{translate:calc(-100% - var(--badge-outset)) -50%}
.measure-readout[data-tail-edge=left]{translate:var(--badge-outset) -50%}
.measure-readout[data-tail-edge]::after{content:"";position:absolute;pointer-events:none;background:var(--measure-color,var(--bp-pink))}
.measure-readout[data-tail-edge=bottom]::after{width:calc(10px / var(--measure-scale,1));height:calc(var(--measurement-tail) / var(--measure-scale,1));left:calc(50% - 5px / var(--measure-scale,1));top:100%;clip-path:polygon(0 0,100% 0,50% 100%)}
.measure-readout[data-tail-edge=top]::after{width:calc(10px / var(--measure-scale,1));height:calc(var(--measurement-tail) / var(--measure-scale,1));left:calc(50% - 5px / var(--measure-scale,1));bottom:100%;clip-path:polygon(50% 0,100% 100%,0 100%)}
.measure-readout[data-tail-edge=right]::after{height:calc(10px / var(--measure-scale,1));width:calc(var(--measurement-tail) / var(--measure-scale,1));top:calc(50% - 5px / var(--measure-scale,1));left:100%;clip-path:polygon(0 0,100% 50%,0 100%)}
.measure-readout[data-tail-edge=left]::after{height:calc(10px / var(--measure-scale,1));width:calc(var(--measurement-tail) / var(--measure-scale,1));top:calc(50% - 5px / var(--measure-scale,1));right:100%;clip-path:polygon(100% 0,100% 100%,0 50%)}
.saved-washes{position:absolute;inset:0;z-index:-1;pointer-events:none}
.measure-wash{position:absolute;background:color-mix(in srgb,var(--measure-color) 10%,transparent)}
.measure-wash[data-fill=hatched]{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--measure-color) 35%,transparent) 0 calc(1px / var(--measure-scale,1)),transparent calc(1px / var(--measure-scale,1)) calc(5px / var(--measure-scale,1))),color-mix(in srgb,var(--measure-color) 10%,transparent)}

/* Smaller Graph Slider-derived marker, kept at six CSS pixels while fitting. */
.edge>span{width:calc(6px / var(--measure-scale,1));height:calc(6px / var(--measure-scale,1));border:0;border-radius:9999px;background:var(--measure-color,var(--bp-pink));box-shadow:0 0 0 calc(1px / var(--measure-scale,1)) #fff,0 0 4px #0000001f}
.measure-controls .measure-color-toggle{margin:0}

.measure-style-symbol{display:block;width:20px;height:20px;background:currentColor;mask:var(--measure-symbol) center/contain no-repeat}
/* Supplied icon geometry, colored by the shared study control state. */
.symbol-hatch{--measure-symbol:url('/components/blueprints/assets/hatch.svg');mask-mode:alpha}
.measure-controls .study-material-icon.material-clear,.measure-controls .study-material-icon.material-default{width:22px;height:18px}
.measure-controls .material-clear{mask-image:url('/components/blueprints/assets/blueprint.svg');-webkit-mask-image:url('/components/blueprints/assets/blueprint.svg')}
.measure-controls .material-default{mask-image:url('/components/blueprints/assets/filled.svg');-webkit-mask-image:url('/components/blueprints/assets/filled.svg')}

/* Logical scene fitting follows Widgets: scale content, keep controls unscaled. */
.blueprint-canvas.study-canvas.exploration-canvas{background:var(--bp-canvas);display:grid;grid-template-rows:minmax(0,1fr) 36px;gap:16px;padding:calc(var(--card-edge) + var(--top-control-height) + 16px) var(--card-edge) var(--card-edge);border:1px solid #e4e4e7}
.measure-viewport{position:relative;width:100%;height:100%;min-height:0;overflow-x:auto;overflow-y:hidden}
.measure-viewport::before{content:"";display:block;width:var(--measurement-content-width,100%);height:1px;pointer-events:none}
.measure-scene{position:absolute;min-width:0;width:556px;height:300px;left:calc(var(--measurement-content-width,100%) / 2);top:50%;translate:-50% -50%;transform:scale(var(--measure-scale,1));transform-origin:center}
.timer-specimen{top:calc(50% - 44px)}
.measure-controls.figure-controls{position:static;margin:0;height:36px;min-height:36px;display:flex;align-items:center;justify-content:center}
.measure-appearance.study-card-header{justify-content:center}
.measurement-styles.study-action-group{flex-wrap:nowrap;gap:0}
.measurement-styles{transform-origin:center bottom}
/* Keep the shared 36px pill and 44px targets; only the painted selection is circular. */
.measure-appearance .icon-segments button{width:44px;flex-basis:44px}
.measure-appearance .icon-segments{gap:0}
.measure-appearance .icon-segments button::after{content:"";position:absolute;inset:-10px 0}
.measure-appearance .icon-segments::before{left:16px;width:24px;border-radius:50%;transform:translateX(calc(var(--segment-index)*44px))}
.measurement-styles>button,.measurement-styles>button:hover,.measurement-styles>button[aria-pressed=true],.measurement-styles>button[aria-pressed=true]:hover{background:transparent}
.measurement-styles>button::before{content:"";position:absolute;left:50%;top:0;translate:-50% 0;width:24px;height:24px;border-radius:50%;pointer-events:none}
.measurement-styles>button>span{position:relative}
.measurement-styles>button:hover::before{background:#3b3b3d}
.measurement-styles>button[aria-pressed=true]::before{background:#fff}
.measurement-styles>button[aria-pressed=true]:hover::before{background:#f1f1f1}
.measure-appearance .icon-segments button:focus-visible,.measurement-styles>button:focus-visible{outline:none}
.measure-appearance .icon-segments button:focus-visible::before{content:"";position:absolute;left:50%;top:0;translate:-50% 0;width:24px;height:24px;border-radius:50%;outline:2px solid #0a84ff;outline-offset:3px}
.measurement-styles>button:focus-visible::before{outline:2px solid #0a84ff;outline-offset:3px}
.measurement-styles.study-action-group>button.study-background-toggle,.measurement-styles.study-action-group>button.study-material-toggle,.measurement-styles.study-action-group>button.study-material-toggle[aria-pressed=true],.measurement-styles.study-action-group>button.study-material-toggle[aria-pressed=true]:hover{background:transparent}
.measurement-styles.study-action-group>button.study-material-toggle{color:#fff}
.measurement-styles.study-action-group>button.study-material-toggle[aria-pressed=true]{color:#161616}
:host([compact]){height:100%;--bp-canvas:var(--card,#f6f6f6);--measurement-paint-duration:.65s}
:host([compact]) .blueprint-canvas.study-canvas.exploration-canvas{height:100%;padding:0;border:0;border-radius:0;display:block}
:host([compact]) .measure-controls{display:none}
:host([compact]) .measure-scene{width:444px;height:220px}

/* Fine pointers grab the visible badge; its touch alternative keeps44px. */
@media(pointer:fine){button.measure-readout::before{inset:0;translate:none;width:auto;height:auto}}
button.measure-readout:hover{box-shadow:0 0 0 calc(1px / var(--measure-scale,1)) var(--measure-color)}