/* /ruler/ 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}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:520px){.rl-head h1{margin-bottom:0.25rem}.rl-head .sub{font-size:0.9375rem;margin-bottom:0.75rem}}

/* layout: desktop = ruler across the top, calibrate | measure below; phone = calibrate, then ruler down the
   long side with the measure area beside it */
.rl-tool{display:grid;gap:0.875rem;grid-template-columns:minmax(0,1fr);grid-template-areas:"strip" "bar" "cal" "meas"}
.rl-tool.uncal{grid-template-areas:"cal" "strip" "bar" "meas"}
@media(min-width:860px){
  .rl-tool,.rl-tool.uncal{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-areas:"strip strip" "bar bar" "cal meas";align-items:start}
}
.rl-tool.vert,.rl-tool.vert.uncal{grid-template-columns:4.75rem minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"cal cal" "strip bar" "strip meas"}
.rl-tool.vert:not(.uncal){grid-template-rows:auto 1fr auto;grid-template-areas:"strip bar" "strip meas" "cal cal"}
.rl-cal{grid-area:cal;padding:1rem;min-width:0}
.rl-strip{grid-area:strip}
.rl-bar{grid-area:bar;min-width:0}
.rl-meas{grid-area:meas;padding:1rem;min-width:0;display:flex;flex-direction:column}
@media(max-width:520px){.rl-cal,.rl-meas{padding:0.75rem}}

.rl-sec{font-family:var(--mono);font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 0.5rem}
.rl-row{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.rl-chips{gap:0.375rem;margin:0 0 0.625rem}
.rl-chips .chip,.rl-bar .chip,.rl-mrow .chip{padding:0.375rem 0.75rem;font-size:0.8125rem}
.chip:focus-visible,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.chip:disabled{opacity:.45;cursor:default}
kbd{font-family:var(--mono);font-size:0.8125em;background:var(--surface-2);border:1px solid var(--line);border-radius:0.25rem;padding:0 0.25rem}
.rl-state{margin:0 0 0.625rem;font-size:0.875rem;color:var(--ink-2);line-height:1.5}

/* the outline-size control */
.rl-fit{display:flex;align-items:center;gap:0.5rem}
.rl-fit .chip{flex:0 0 auto;padding:0.375rem 0.5rem;font-family:var(--mono);font-size:0.8125rem}
.rl-range{flex:1 1 auto;min-width:0;display:flex;align-items:center;min-height:2.5rem}
.rl-out{flex:0 0 auto;font-family:var(--mono);font-size:0.8125rem;color:var(--ink);min-width:6.5em;text-align:right}
.rl-hint{margin:0.375rem 0 0.625rem;font-size:0.8125rem;color:var(--muted);line-height:1.5}
.rl-msg{margin:0.375rem 0 0;font-size:0.8125rem;color:var(--bad)}
.rl-msg:empty{display:none}

/* the stage the card is laid on; full-bleed on a phone so an upright card fits the screen width */
.rl-stage{position:relative;margin:0 0 0.75rem;min-height:4rem;touch-action:none;cursor:nwse-resize;user-select:none;-webkit-user-select:none}
@media(max-width:859px){.rl-stage{margin-left:calc(-1.125rem - 0.75rem - 1px);margin-right:calc(-1.125rem - 0.75rem - 1px)}}
@media(min-width:521px) and (max-width:859px){.rl-stage{margin-left:calc(-1.125rem - 1rem - 1px);margin-right:calc(-1.125rem - 1rem - 1px)}}
.rl-shape,.rl-checkbox{box-sizing:border-box;border:2px dashed var(--accent);background:var(--accent-soft);border-radius:3.18mm;position:relative}
@media(max-width:859px){.rl-shape{margin-inline:auto}}
.rl-shape.coin{border-radius:50%}
.rl-shape span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:0.75rem;color:var(--accent);white-space:nowrap;pointer-events:none}
.rl-shape.coin span{top:auto;bottom:-1.5rem;transform:translateX(-50%)}
.rl-shape.coin{margin-bottom:1.5rem}
.rl-shape.upright span{transform:translate(-50%,-50%) rotate(-90deg)}
.rl-check{margin:0.875rem 0 0}
.rl-check p{margin:0 0 0.5rem;font-size:0.875rem;line-height:1.5}
.rl-checkbox{border-style:solid;border-width:1px;border-color:var(--ink)}
.rl-diag label{display:block;font-size:0.875rem;font-weight:600;margin:0 0 0.375rem}
.rl-diag input{flex:0 1 9rem}
.rl-zoom{margin:0 0 0.75rem;padding:0.75rem 0.875rem;border:1px solid var(--line);border-left:0.25rem solid var(--warn);border-radius:0.5rem;background:var(--surface-2);font-size:0.875rem;line-height:1.55}
.rl-zoom p{margin:0 0 0.5rem}

/* the ruler */
.rl-strip{position:relative;height:6.5rem;background:var(--surface);border-block:1px solid var(--line-2);touch-action:none;cursor:grab;overflow:hidden;user-select:none;-webkit-user-select:none}
@media(min-width:860px){.rl-strip{border:1px solid var(--line-2);border-radius:0.25rem}}
.rl-tool.vert .rl-strip{height:auto;min-height:calc(100svh - 1.5rem);margin-left:calc(-1.125rem - 1px);border-block:0;border-right:1px solid var(--line-2)}
.rl-strip svg{display:block;position:absolute;inset:0}
.rl-strip line{stroke:var(--ink);stroke-width:1;shape-rendering:crispEdges}
.rl-strip .in line{stroke:var(--ink-2)}
.rl-strip .lab{font-family:var(--mono);font-size:11px;fill:var(--ink);dominant-baseline:auto}
.rl-strip .lab.top{dominant-baseline:hanging}
.rl-strip .lab.end{text-anchor:end}
.rl-strip .unit{font-family:var(--mono);font-size:10px;fill:var(--muted)}
.rl-strip .unit.mid{text-anchor:middle}
.rl-strip .unit.end{text-anchor:end}
.rl-offset{margin:0 0 0.375rem;font-family:var(--mono);font-size:0.8125rem;color:var(--ink-2)}
@media(min-width:860px){.rl-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem}.rl-offset{margin:0}}

/* measure */
.rl-mrow{display:flex;justify-content:space-between;align-items:center;gap:0.5rem;margin:0 0 0.5rem}
.rl-mout{margin:0;font-family:var(--mono);font-size:0.875rem;color:var(--ink);line-height:1.45}
.rl-pad{position:relative;flex:1 1 auto;min-height:16rem;border:1px dashed var(--line-2);border-radius:0.5rem;background:var(--surface-2);touch-action:none;cursor:crosshair;overflow:hidden}
@media(min-width:860px){.rl-pad{min-height:28rem}}
.rl-pad svg{position:absolute;inset:0;width:100%;height:100%}
.rl-pad line{stroke:var(--accent);stroke-width:2}
.rl-pad circle{fill:var(--surface);stroke:var(--accent);stroke-width:2}

/* full screen: the ruler and the measure area fill the screen */
.rl-tool:fullscreen,.rl-tool.fs-on{background:var(--bg);padding:0 0.75rem 0.75rem;overflow:auto;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;grid-template-areas:"strip" "bar" "meas"}
.rl-tool.fs-on{position:fixed;inset:0;z-index:1000}
.rl-tool:fullscreen .rl-cal,.rl-tool.fs-on .rl-cal{display:none}
.rl-tool:fullscreen .rl-strip,.rl-tool.fs-on .rl-strip{margin-inline:-0.75rem}
.rl-tool.vert:fullscreen,.rl-tool.vert.fs-on{grid-template-columns:4.75rem minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"strip bar" "strip meas";padding:0 0.75rem 0.75rem 0}
.rl-tool.vert:fullscreen .rl-strip,.rl-tool.vert.fs-on .rl-strip{margin:0;min-height:100svh}
.rl-tool:fullscreen .rl-bar,.rl-tool.fs-on .rl-bar{padding-top:0.5rem}