/* ID card maker: front/back preview, photo crop, CSV box */
.id-sr{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.id-chips .chip{min-height:38px}
.id-up{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.id-up:focus-within label.btn{outline:3px solid var(--sun);outline-offset:2px}
.id-photo{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.id-crop{width:120px;height:150px;border:2px solid var(--ink);border-radius:10px;cursor:grab;touch-action:none;background:#f3f5fa}
.id-crop-ctl{display:grid;gap:10px;flex:1;min-width:170px}
.id-crop-ctl:focus-within>label.btn{outline:3px solid var(--sun);outline-offset:2px}
.id-mono{font-family:ui-monospace,Consolas,monospace!important;font-size:14px!important;white-space:pre;overflow-x:auto}
.id-p{margin-bottom:12px}.id-mt{margin-top:12px}
.id-stage{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:flex-start;padding:16px;min-height:0;background:#e9e7df}
.id-side{margin:0;display:grid;gap:6px;flex:1 1 180px;max-width:260px;min-width:0}
.id-stage.land .id-side{flex:1 1 260px;max-width:420px}
.id-side figcaption{font:800 12px/1 var(--font);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.id-stage canvas{display:block;width:100%;height:auto;max-height:none;aspect-ratio:638/1011;border-radius:12px;box-shadow:0 10px 24px rgba(15,18,34,.22)}
.id-stage.land canvas{aspect-ratio:1011/638;border-radius:14px}
.id-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px;font-weight:700}
.id-nav .btn{padding:6px 16px;font-size:20px;line-height:1}
.id-info{margin-top:10px}
.id-opts{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px}
#id-duplex{margin-top:10px}
.id-stage.sample{padding-top:46px}