/* /protractor/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts). */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}
@media(max-width:520px){.pr-head h1{margin-bottom:0.25rem}.pr-head .sub{font-size:0.9375rem;margin-bottom:0.75rem}}
.pr-tabs{margin-bottom:0.875rem}
.pr-tabs button:focus-visible,.chip:focus-visible,.btn:focus-visible,.pr-drop:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.pr-panel[hidden]{display:none}

/* layout: the instrument wide on the left, readout and controls in a fixed side column */
.pr-duo{display:grid;gap:0.875rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.pr-duo{grid-template-columns:minmax(0,1fr) 20rem;gap:1.25rem;align-items:start}}
.pr-side{display:flex;flex-direction:column;gap:0.75rem;min-width:0}
.pr-row{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.pr-sec{font-family:var(--mono);font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0}
.pr-note{margin:0;font-size:0.8125rem;color:var(--muted);line-height:1.5}
.pr-note:empty{display:none}
.pr-state{margin:0;font-size:0.875rem;color:var(--ink-2);line-height:1.5}
.pr-msg{margin:0;font-size:0.875rem;color:var(--warn);line-height:1.5}
.pr-msg:empty{display:none}
.pr-chips{gap:0.375rem}
.pr-chips .chip{padding:0.4375rem 0.875rem;font-size:0.875rem}

/* the protractor */
.pr-stage{padding:0.5rem;display:flex;justify-content:center;align-items:flex-start;min-width:0;overflow:hidden}
.pr-svg{display:block;touch-action:none;user-select:none;-webkit-user-select:none;cursor:crosshair;max-width:none}
.pr-face{fill:var(--accent-soft);stroke:var(--ink);stroke-width:1.25}
.pr-ticks .tk{stroke:var(--ink);stroke-width:0.75}
.pr-ticks .tk5{stroke-width:1}
.pr-ticks .tk10{stroke-width:1.4}
.pr-lab{fill:var(--ink);font-family:var(--mono);text-anchor:middle}
.pr-lab2{fill:var(--muted);font-family:var(--mono);text-anchor:middle}
.pr-base{stroke:var(--ink);stroke-width:1.25}
.pr-cross{stroke:var(--ink);stroke-width:1.25;fill:none}
.pr-wedge{fill:var(--signal);opacity:.55;stroke:none}
.pr-arm{stroke:var(--accent);stroke-width:2.5;stroke-linecap:round}
.pr-arm-b{stroke:var(--ink)}
.pr-handle{fill:var(--signal);stroke:var(--signal-ink);stroke-width:2;cursor:grab}
.pr-handle:focus{outline:none}
.pr-handle:focus-visible{stroke:var(--accent);stroke-width:4}
.pr-hlab{fill:var(--signal-ink);font-family:var(--mono);font-size:11px;font-weight:600;text-anchor:middle;pointer-events:none}
.pr-read .val{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.25rem 0.75rem;font-size:2rem}
.pr-other{font-size:0.875rem;color:var(--muted);font-family:var(--mono)}
.pr-fields{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}
.pr-field{display:flex;flex-direction:column;gap:0.25rem;font-size:0.8125rem;color:var(--muted)}
.pr-field input{font:inherit;font-family:var(--mono);font-size:1rem;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:0.5rem;padding:0.5rem 0.625rem;min-width:0}
.pr-field input:focus-visible{outline:3px solid var(--accent);outline-offset:1px}
.pr-state a,.pr-note a{color:var(--accent)}
@media(max-width:859px){.pr-read .val{font-size:1.625rem}}

/* the photo */
.pr-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;min-height:15rem;padding:1.5rem 1rem;border:2px dashed var(--line-2);text-align:center;cursor:pointer}
.pr-drop.over{border-color:var(--accent);background:var(--accent-soft)}
.pr-drop small{color:var(--muted);max-width:40ch;line-height:1.5}
.pr-drop[hidden]{display:none}
.pr-drop-icon{width:3.25rem;height:2.5rem;position:relative;border:2px solid var(--ink);border-radius:0.375rem;background:linear-gradient(135deg,var(--accent-soft),var(--surface))}
.pr-drop-icon::before{content:"";position:absolute;left:0.5rem;bottom:0.375rem;width:1.75rem;height:1.25rem;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:skewX(-25deg)}
.pr-cam{margin-top:0.5rem;display:inline-flex;align-items:center}
.pr-work[hidden]{display:none}
.pr-phstage{padding:0.625rem;min-width:0}
.pr-tools{margin-bottom:0.5rem}
.pr-hint{margin:0 0 0.5rem;font-size:0.875rem;color:var(--ink-2);line-height:1.45}
.pr-canvas{display:block;margin:0 auto;touch-action:none;cursor:crosshair;border-radius:0.25rem;max-width:100%}
.pr-list{margin:0;padding-left:1.375rem;display:flex;flex-direction:column;gap:0.375rem;font-family:var(--mono);font-size:0.875rem}
.pr-list:empty{display:none}
.pr-list li{line-height:1.45}
.pr-list li span{margin-right:0.5rem}
.pr-list .pr-x{padding:0.125rem 0.5rem;font-size:0.75rem}
.pr-loupe{position:fixed;left:0;top:0;z-index:20;width:150px;height:150px;border-radius:50%;border:3px solid var(--ink);box-shadow:var(--shadow);background:var(--surface);pointer-events:none}
.pr-loupe[hidden]{display:none}

/* tilt */
.pr-tilt{padding:1rem;display:flex;flex-direction:column;align-items:center;gap:0.875rem}
.pr-level{position:relative;width:11rem;height:11rem;border-radius:50%;border:2px solid var(--ink);background:radial-gradient(circle,var(--surface) 0 1.1rem,var(--accent-soft) 1.2rem);display:flex;align-items:center;justify-content:center}
.pr-level::after{content:"";position:absolute;width:2.25rem;height:2.25rem;border-radius:50%;border:1px dashed var(--ink)}
.pr-bubble{width:1.75rem;height:1.75rem;border-radius:50%;background:var(--signal);border:2px solid var(--signal-ink);transition:transform .08s linear}
@media(prefers-reduced-motion:reduce){.pr-bubble{transition:none}}
.pr-tilt .pr-read{align-self:stretch}
.pr-dl{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.5rem;align-self:stretch}
.pr-dl div{background:var(--surface-2);border:1px solid var(--line);border-radius:0.5rem;padding:0.5rem 0.625rem}
.pr-dl dt{font-size:0.75rem;color:var(--muted)}
.pr-dl dd{margin:0;font-family:var(--mono);font-size:1.0625rem;color:var(--ink)}

/* the slanted-photo figure */
.pr-fig{margin:0.75rem 0 0.25rem}
.pr-fig svg{display:block;max-width:100%;height:auto}
.fig-shape{fill:var(--accent-soft);stroke:var(--ink);stroke-width:1.5}
.fig-mark{fill:none;stroke:var(--accent);stroke-width:2}
.fig-text{fill:var(--ink);font-family:var(--mono);font-size:11px}

/* print: only the millimetre protractor */
.pr-print{display:none}
@media print{
  @page{margin:12mm}
  body{background:#fff}
  body>*:not(.pr-print){display:none !important}
  .pr-print{display:block}
}
.pr-row a.btn{display:inline-flex;align-items:center;text-decoration:none}