/* Ink & paper colour tester for proof.html. Dev-only: remove this link, js/proof-inklab.js,
   the #inkBtn button and the #inklab aside once a colour pair is chosen. */
.inklab{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:20;width:316px;max-width:calc(100vw - 32px);max-height:calc(100vh - 100px);overflow:auto;background:var(--surface-solid);color:var(--ink);border:1px solid var(--line-strong);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.18);padding:14px;display:flex;flex-direction:column;gap:12px;font:14px var(--sans)}
.inklab header{display:flex;justify-content:space-between;align-items:center}
.inklab h2{font:600 17px var(--display);margin:0}
.inklab .lbl{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.inklab .seg{display:grid;grid-template-columns:1fr 1fr;background:var(--chip);border-radius:9px;padding:3px;gap:3px}
.inklab .seg button{appearance:none;border:0;background:transparent;color:var(--muted);font:500 13px var(--sans);padding:7px;border-radius:7px;cursor:pointer}
.inklab .seg button[aria-pressed="true"]{background:var(--surface-solid);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.14)}
.swatches{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.sw{appearance:none;aspect-ratio:1;border-radius:50%;border:1px solid var(--line-strong);cursor:pointer;padding:0;position:relative;overflow:hidden;background:var(--a)}
.sw::after{content:"";position:absolute;inset:26%;border-radius:50%;background:var(--b)}
.sw[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:2px}
.picks{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pick{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:9px;padding:6px 8px;cursor:pointer}
.pick input[type=color]{appearance:none;-webkit-appearance:none;width:30px;height:30px;border:0;padding:0;background:none;border-radius:6px;cursor:pointer;flex:none}
.pick input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.pick input[type=color]::-webkit-color-swatch{border:1px solid var(--line-strong);border-radius:6px}
.pick input[type=color]::-moz-color-swatch{border:1px solid var(--line-strong);border-radius:6px}
.pick span{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.pick b{font:500 13px var(--sans)}
.pick code{font:12px var(--mono);color:var(--muted)}
.ratios{font:12px/1.6 var(--mono);color:var(--muted);margin:0}
.ratios .ok{color:inherit}.ratios .lo{color:#C2410C}
.inklab .acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.inklab .acts button{appearance:none;border:1px solid var(--line-strong);background:var(--surface-solid);color:var(--ink);font:500 13px var(--sans);padding:9px;border-radius:9px;cursor:pointer}
.inklab .acts button.primary{background:var(--btn-bg);color:var(--btn-ink);border-color:var(--btn-bg)}
.inklab textarea{width:100%;height:120px;font:11.5px/1.5 var(--mono);background:var(--chip);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:8px;resize:vertical}
@media (max-width:560px){.inklab{right:8px;left:8px;width:auto;max-width:none;bottom:calc(8px + env(safe-area-inset-bottom,0px))}}