/* Studio tools added 2026-10-08: Name any color (js/namer.js), the Export sheet (js/export.js), Closest in the
   archive (js/twins.js), the camera's Isolate button and live twin. Tokens only; serif for words, mono for codes. */

/* ---------- Studio home: four equal capture tiles ---------- */
.st-capture .st-tile:first-child{grid-column:auto}
.st-capture .st-tile:first-child .st-art{aspect-ratio:1/.8}
.st-namer{background:var(--lift)}
.st-namer .ring{display:block;width:66%;aspect-ratio:1;border-radius:50%;-webkit-mask:radial-gradient(circle,transparent 52%,#000 53%);mask:radial-gradient(circle,transparent 52%,#000 53%)}
.st-namer i{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:#5F8C8A;box-shadow:0 0 0 2px #F3F3F1}
.pv-img img{cursor:crosshair}
.pv-tapnote{font:italic 400 17px/1.3 var(--serif);color:var(--soft);margin:10px 0 0}

/* ---------- Name any color ---------- */
/* Name any color fits one screen (2026-10-08): .nmr-stage is exactly 100dvh. Every band above the picker has a
   fixed height so the picker (the pane, flex:1) never resizes while you drag; the ring sizes itself from the
   pane with container units. The extras (.nmr-below) are an optional scroll. */
.screen.namer{padding-top:0;padding-bottom:calc(var(--bottom) + 22px)}
.nmr-stage{display:flex;flex-direction:column;height:100dvh;min-height:520px;padding-bottom:calc(var(--bottom) + 10px)}
.nmr-top{flex:none;margin:0 calc(-1 * var(--g));padding:0 var(--g);background:var(--c);color:#141311;transition:background-color .12s linear}
.nmr-top[data-ink="light"]{color:#fff}
.nmr-top .art-top{position:static;margin:0 calc(-1 * var(--g));padding:calc(var(--top) + 4px) var(--g) 0;background:none}
.nmr-top .art-top .eyebrow{color:inherit;opacity:.78}
.nmr-top .icon-btn{width:40px;height:40px}
.namer .nmr-hero{display:flex;flex-direction:column;align-items:flex-start;width:100%;padding:6px 0 14px;text-align:left;color:inherit}
.nmr-name{display:block;width:100%;height:1.05em;font:400 clamp(32px,10vw,46px)/1.05 var(--serif);letter-spacing:-.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nmr-sub{display:block;font:italic 400 17px/1.3 var(--serif);opacity:.85;margin-top:4px;white-space:nowrap}
.nmr-sub .mono{font-style:normal;font-size:13px;margin-left:8px;letter-spacing:.04em}
.nmr-near{flex:none;display:flex;gap:8px;overflow-x:auto;margin:10px calc(-1 * var(--g)) 0;padding:0 var(--g);scroll-snap-type:x proximity;scrollbar-width:none}
.nmr-near::-webkit-scrollbar{display:none}
.nmr-row{flex:none;max-width:min(300px,calc(100vw - 2 * var(--g) - 28px));display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;height:58px;padding:0 14px 0 10px;border-radius:var(--r-1);background:var(--surface-1);text-align:left;scroll-snap-align:start}
.nmr-row:active{transform:scale(.97)}
.nmr-row i{width:28px;height:28px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(236,232,223,.22)}
.nmr-row>span:nth-child(2){min-width:0}
.nmr-row b{display:block;overflow:hidden;text-overflow:ellipsis;font:400 18px/1.1 var(--serif);white-space:nowrap}
.nmr-row em{display:block;overflow:hidden;text-overflow:ellipsis;font:italic 400 17px/1.2 var(--serif);color:var(--soft);white-space:nowrap}
.nmr-row .mono{align-self:start;margin-top:12px;color:var(--faint);font-size:13px}
.nmr-acts{flex:none;display:flex;gap:0 20px;height:44px;overflow:hidden;margin-top:2px}
.nmr-trayacts{display:flex;flex-wrap:wrap;gap:0 22px;margin-top:6px}
.nmr-acts button,.nmr-trayacts button{min-height:44px;font:italic 400 17px/1 var(--serif);color:var(--ink);text-decoration:underline;text-decoration-color:rgba(236,232,223,.3);text-underline-offset:4px;white-space:nowrap}
.nmr-tabs{flex:none;display:flex;gap:20px;overflow-x:auto;margin:0 calc(-1 * var(--g));padding:0 var(--g);border-bottom:1px solid var(--rule);scrollbar-width:none}
.nmr-tabs::-webkit-scrollbar{display:none}
.nmr-tabs button{flex:none;position:relative;padding:11px 0 12px;font:400 19px/1 var(--serif);color:var(--faint)}
.nmr-tabs button.on{color:var(--ink)}
.nmr-tabs button.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink)}
.nmr-pane{flex:1;min-height:0;display:flex;flex-direction:column;padding-top:8px;overflow-y:auto;scrollbar-width:none}
.nmr-pane::-webkit-scrollbar{display:none}
.nmr-schemes{flex:none;display:flex;gap:16px;overflow-x:auto;scrollbar-width:none}
.nmr-schemes button{flex:none;min-height:36px;font:italic 400 17px/1 var(--serif);color:var(--faint)}
.nmr-schemes button.on{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(236,232,223,.4);text-underline-offset:5px}
.nmr-disc{flex:1;min-height:150px;display:grid;place-items:center}
.nmr-disc-in{position:relative;touch-action:none;cursor:crosshair;border-radius:50%}
.nmr-disc-cv{display:block;border-radius:50%}
.nmr-disc .nmr-knob{pointer-events:none}
#ringHost{flex:1;min-height:150px;position:relative;container-type:size}
.namer #ringHost .cp{position:absolute;inset:0;display:grid;place-items:center}
.namer #ringHost .cp-wheel{width:min(100cqw,100cqh,400px);margin:0}
.namer #ringHost .cp-read,.namer #ringHost .cp-modes,.namer #ringHost .cp-sliders{display:none}
.nmr-below{margin-top:8px}
.nmr-below .nmr-harm:empty{display:none}
.nmr-schemes{display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;margin-bottom:10px}
.nmr-schemes button{flex:none;min-height:40px;font:italic 400 17px/1 var(--serif);color:var(--faint)}
.nmr-schemes button.on{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(236,232,223,.4);text-underline-offset:5px}
.namer .cp-read span{display:none}
.namer .cp-read{grid-template-columns:44px 1fr}
.namer .cp-hex input{width:100%}
.namer .cp-modes button{font:400 17px/1 var(--serif);letter-spacing:0}
.nmr-harm{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:6px}
.nmr-hchip{display:flex;align-items:center;gap:8px;min-height:44px}
.nmr-hchip i{width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(236,232,223,.22)}
.nmr-hchip b{font:400 18px/1 var(--serif)}
.nmr-plane,.nmr-field{position:relative;border-radius:var(--r-1);background:var(--surface-2);touch-action:none;cursor:crosshair}
.nmr-plane{flex:1;min-height:110px}
.nmr-field{flex:1;min-height:110px}
.nmr-plane canvas,.nmr-field canvas{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:var(--r-1)}
.nmr-knob{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(0,0,0,.45),0 4px 10px rgba(0,0,0,.5);pointer-events:none}
.nmr-hue{flex:none;position:relative;height:30px;margin-top:14px;border-radius:var(--r-1);touch-action:none;cursor:ew-resize;box-shadow:inset 0 0 0 1px rgba(236,232,223,.12)}
.nmr-hknob{position:absolute;top:50%;width:16px;height:38px;transform:translate(-50%,-50%);border-radius:var(--r-1);box-shadow:0 0 0 2px #fff,0 0 0 3.5px rgba(0,0,0,.5);pointer-events:none}
.nmr-read{flex:none;font:400 14px/1.45 var(--sans);color:var(--soft);margin:8px 0 0;text-wrap:pretty}
.nmr-read b{color:var(--ink);font-weight:500;margin:0 2px}
.nmr-slide{flex:none;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center;margin-top:6px;font:italic 400 17px/1 var(--serif);color:var(--soft)}
.nmr-slide input{width:100%;accent-color:var(--ink);height:44px}
.nmr-hexin{display:grid;grid-template-columns:54px 1fr;align-items:center;font:italic 400 17px/1 var(--serif);color:var(--soft)}
.nmr-type input{width:100%;background:none;border:0;border-bottom:1px solid var(--rule-strong);color:var(--ink);font:500 20px/1 var(--mono);padding:10px 0;outline:none;border-radius:0}
.nmr-rgbs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px}
.nmr-rgbs label{display:grid;grid-template-columns:18px 1fr;align-items:center;font:italic 400 17px/1 var(--serif);color:var(--soft)}
.nmr-codes{margin-top:18px;border-top:1px solid var(--rule)}
.nmr-codes button{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:48px;border-bottom:1px solid var(--rule);text-align:left}
.nmr-codes span{font:italic 400 17px/1 var(--serif);color:var(--soft)}
.nmr-codes b{font-weight:500;font-size:13px;color:var(--ink);text-align:right}
.nmr-eyebtns{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.nmr-pill{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid var(--rule-strong);border-radius:var(--r-pill);font:400 18px/1 var(--serif);color:var(--ink);cursor:pointer}
.nmr-shot{position:relative;margin-top:14px;touch-action:none;border-radius:var(--r-1);overflow:hidden;background:var(--surface-2)}
.nmr-shot canvas,.nmr-shot video{display:block;width:100%;max-height:40dvh;object-fit:contain}
.nmr-shot [hidden]{display:none}
/* the live camera's aim circle: always dead-center (it samples the middle of the frame), no JS positioning
   needed. A press-and-drag photo pick uses the shared eyedropper's own loupe instead (js/eyedrop.js) — David,
   2026-10-09: "the camera, photo uploads and set-page photo picking can all reuse it" */
.nmr-aim{position:absolute;left:50%;top:50%;width:38px;height:38px;margin:-19px 0 0 -19px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1.5px rgba(0,0,0,.55);pointer-events:none}
.nmr-snap{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;margin-top:12px;border-radius:var(--r-pill);background:var(--paper);color:var(--paper-ink);font:400 22px/1 var(--serif)}
.nmr-snap[hidden]{display:none}
.nmr-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.nmr-chips button{width:38px;height:38px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(236,232,223,.22)}
.nmr-tray{margin-top:8px}

/* ---------- Export sheet ---------- */
.ex-sheet .item{min-height:64px;padding:8px 0}
.ex-tints em{font:italic 400 17px/1 var(--serif);color:var(--soft)}
.ex-tints span{font:400 22px/1 var(--serif)}
.ex-row{gap:12px}
.ex-t b{display:block;font:400 22px/1.1 var(--serif)}
.ex-t small{display:block;font:400 13px/1.35 var(--sans);color:var(--soft);margin-top:2px}
.ex-acts{display:flex;gap:6px;flex:none}
.ex-acts button{min-height:44px;padding:0 10px;font:italic 400 18px/1 var(--serif);color:var(--ink);text-decoration:underline;text-decoration-color:rgba(236,232,223,.3);text-underline-offset:4px}
.ex-fine{margin-top:14px}

/* ---------- Closest in the archive ---------- */
.tw-wait,.tw-lead{font:italic 400 17px/1.35 var(--serif);color:var(--soft);margin:14px 0 0}
.tw-rail{display:flex;gap:16px;align-items:flex-start;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;margin:14px calc(-1 * var(--g)) 0;padding:2px var(--g) 8px;scroll-snap-type:x proximity;scroll-padding:0 var(--g);scrollbar-width:none}
.tw-rail::-webkit-scrollbar{display:none}
.tw-card{flex:none;width:208px;scroll-snap-align:start}
.tw-im{display:block;position:relative;width:100%;height:150px;background:var(--c);border-radius:var(--r-1);overflow:hidden}
.tw-im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tw-card>b{display:block;margin-top:8px;font:400 19px/1.15 var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-card>small{display:block;font:400 13px/1.4 var(--sans);color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tw-threads{margin-top:8px}
.tw-thread{display:flex;align-items:center;margin-top:10px}
.tw-thread button{position:relative;width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(236,232,223,.22);flex:none}
.tw-thread button::after{content:"";position:absolute;inset:-11px}
.tw-line{flex:1;height:1px;background:var(--rule-strong);opacity:.45}
.tw-names{margin:3px 0 0;font:400 13px/1.3 var(--sans);color:var(--soft)}
.tw-names em{font:italic 400 17px/1 var(--serif);color:var(--faint);margin:0 6px}
.tw-era{font:400 14px/1.5 var(--sans);color:var(--soft);margin:10px 0 0}
.tw-werner{margin-top:6px}
.tw-werner button{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;text-align:left;border-top:1px solid var(--rule)}
.tw-werner i{width:22px;height:22px;border-radius:50%;background:var(--c);flex:none;box-shadow:inset 0 0 0 1px rgba(236,232,223,.22)}
.tw-werner span{display:flex;flex-direction:column;min-width:0}
.tw-werner b{font:400 18px/1.2 var(--serif)}.tw-werner b em{font-style:italic}
.tw-werner small{font:400 13px/1.4 var(--sans);color:var(--soft)}

/* ---------- Closest in the archive: the metric switch and each metric's picture ---------- */
.tw-chips{display:flex;gap:8px;overflow-x:auto;margin:14px calc(-1 * var(--g)) 0;padding:0 var(--g) 2px;scrollbar-width:none}
.tw-chips::-webkit-scrollbar{display:none}
.tw-chips button{flex:none;min-height:40px;padding:0 16px;border:1px solid var(--rule-strong);border-radius:var(--r-pill);font:400 17px/1 var(--serif);color:var(--soft);white-space:nowrap}
.tw-chips button.on{background:var(--paper);border-color:var(--paper);color:var(--paper-ink)}
.tw-pick{display:flex;align-items:center;gap:10px;margin-top:12px;font:italic 400 17px/1 var(--serif);color:var(--soft)}
.tw-pick[hidden]{display:none}
.tw-pick button{width:34px;height:34px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(236,232,223,.22)}
.tw-pick button.on{box-shadow:0 0 0 2px var(--ground),0 0 0 4px var(--ink)}
.tw-why{margin:10px 0 0;font:400 13px/1.45 var(--sans);color:var(--soft);text-wrap:pretty}
.tw-mini{display:flex;height:16px;margin-top:10px;border-radius:2px;overflow:hidden}
.tw-mini i{background:var(--c)}
.tw-hist{display:flex;align-items:flex-end;gap:3px;height:48px;margin-top:12px}
.tw-hist>span{flex:1;display:flex;align-items:flex-end;gap:1px;height:100%}
.tw-hist i{flex:1;min-height:1px;border-radius:1px 1px 0 0}
.tw-hist .y,.tw-key .y{background:var(--soft)}
.tw-hist .t,.tw-key .t{background:var(--ink)}
.tw-key{display:flex;align-items:center;gap:8px;font:400 13px/1 var(--sans);color:var(--soft);margin:2px 0 0}
.tw-key i{display:inline-block;width:10px;height:10px;border-radius:2px}
.tw-key .t{margin-left:10px}
.tw-pair{display:flex;gap:10px;margin-top:12px}
.tw-mosaic{display:grid;grid-template-columns:repeat(4,1fr);width:calc(50% - 5px);aspect-ratio:1;border-radius:var(--r-1);overflow:hidden}
.tw-mosaic i{background:var(--c)}

/* ---------- Camera: Isolate and the live twin ---------- */
.eye-iso{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin-top:12px;border-radius:var(--r-pill);background:var(--paper);color:var(--paper-ink);font:400 19px/1 var(--serif)}
.eye-iso[hidden]{display:none}
.tw-live{position:absolute;left:16px;top:calc(var(--top) + 64px);z-index:3;display:flex;align-items:center;gap:10px;max-width:64%;padding:6px 14px 6px 6px;border-radius:var(--r-2);background:var(--surface-2);text-align:left}
.tw-live[hidden],.eye.frozen .tw-live,.eye.nocam .tw-live{display:none}
.tw-live img{width:44px;height:44px;object-fit:cover;border-radius:var(--r-1);flex:none}
.tw-live span{display:flex;flex-direction:column;min-width:0;font:italic 400 17px/1.3 var(--serif);color:var(--soft)}
.tw-live b{font:400 16px/1.15 var(--serif);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nmr-harm .sec-head{flex-basis:100%}

/* ---------- the photo/upload palette (David, 2026-10-09): every palette type, Save, Edit ---------- */
.pv-save-row{margin-top:10px}
.pv-edit[aria-pressed="true"],[data-pvedit].on{background:var(--paper);color:var(--paper-ink)}
.gl-strip .pal .pv-rm{position:absolute;top:4px;right:4px;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:rgba(14,13,11,.55);color:#fff;font:400 13px/1 var(--sans);font-style:normal}
.pal-name .pv-rm{display:none}