/* ID photo tool: the photo under a guide, the control pad, the rules of each document */
.editor { margin-top: 18px; }
.stage { position: relative; width: min(100%, 320px); margin: 0 auto; background: #fff; overflow: hidden;
  touch-action: none; cursor: grab; box-shadow: 0 0 0 1px var(--rule); user-select: none; }
.stage:active { cursor: grabbing; }
.stage canvas, .stage .guide { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.guide { pointer-events: none; }
.guide .band { fill: rgba(36, 66, 194, .18); }
.guide line { stroke-width: .25; vector-effect: non-scaling-stroke; stroke-width: 1.5px; }
.guide .chin { stroke: #e0402a; }
.guide .crown { stroke: #2442c2; stroke-dasharray: 4 3; }
.guide .eyes { stroke: #1b9a5c; stroke-dasharray: 2 3; }
.guide .mid { stroke: rgba(0, 0, 0, .25); stroke-dasharray: 1 3; }
.guide ellipse { fill: none; stroke: #fff; stroke-width: 2px; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 1px #000); }
.pad { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.pad .icon-btn { min-width: 44px; min-height: 44px; font-size: 20px; }
.editor .hint { text-align: center; }
.legend { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; padding: 0;
  margin: 8px 0 0; font-size: 15px; color: var(--pencil); }
.legend li::before { content: ""; display: inline-block; width: 18px; height: 0; margin-right: 6px; vertical-align: middle; }
.l-crown::before { border-top: 2px dashed #2442c2; }
.l-chin::before { border-top: 2px solid #e0402a; }
.l-eyes::before { border-top: 2px dotted #1b9a5c; }
.custom-mm input[type=text] { width: 4.5em; }
.rules { margin-top: 20px; border-top: 1px solid var(--rule); }
.rules h2 { margin-top: 16px; font-size: 19px; }
.rules ul { padding-left: 1.2em; margin: 0; }
.rules .source { font-size: 15px; color: var(--pencil); overflow-wrap: anywhere; }