/* nailien paint: the ms paint window, repainted pink. every colour is a token from tokens.css. */

.np{position:relative;display:flex;flex-direction:column;flex:1 1 auto;width:100%;height:100%;min-height:0;box-sizing:border-box;background:var(--xp-face);color:var(--xp-text);font:12px/1.2 var(--xp-font);user-select:none;-webkit-user-select:none;overflow:hidden;outline:none}
.np *,.np *::before,.np *::after{box-sizing:border-box}
.np button{font:inherit;color:inherit;cursor:default;-webkit-tap-highlight-color:transparent}
.np:focus-visible .np-canvaswrap{outline:2px solid var(--xp-accent);outline-offset:1px}

/* xp bevels */
.np-raised{background:var(--xp-face);border:1px solid;border-color:var(--xp-light) var(--xp-darker) var(--xp-darker) var(--xp-light);box-shadow:inset -1px -1px 0 var(--xp-dark),inset 1px 1px 0 var(--xp-face-2)}
.np-raised:active{border-color:var(--xp-darker) var(--xp-light) var(--xp-light) var(--xp-darker);box-shadow:inset 1px 1px 0 var(--xp-dark)}
.np-sunken{background:var(--xp-face);border:1px solid;border-color:var(--xp-dark) var(--xp-light) var(--xp-light) var(--xp-dark);box-shadow:inset 1px 1px 0 var(--xp-darker),inset -1px -1px 0 var(--xp-face-2)}

/* menu bar */
.np-menubar{position:relative;z-index:6;display:flex;align-items:stretch;height:22px;flex:none;padding:0 2px;background:var(--xp-face);border-bottom:1px solid var(--xp-dark)}
.np-menu{position:relative;display:flex}
.np-menu>button{height:100%;padding:0 7px;border:1px solid transparent;background:none}
.np-menu>button:hover,.np-menu.is-open>button{background:var(--xp-accent);color:var(--xp-title-text)}
.np-dropdown{display:none;position:absolute;top:100%;left:0;min-width:168px;padding:2px;background:var(--xp-face-2);border:1px solid var(--xp-darker);box-shadow:var(--xp-shadow)}
.np-menu.is-open .np-dropdown{display:block}
.np-item{display:flex;align-items:center;gap:8px;width:100%;padding:4px 10px 4px 6px;border:0;background:none;text-align:left;white-space:nowrap}
.np-item:hover{background:var(--xp-accent);color:var(--xp-title-text)}
.np-item .np-check{width:12px;flex:none;text-align:center}
.np-item .np-key{margin-left:auto;padding-left:16px;color:var(--xp-text-dim)}
.np-item:hover .np-key{color:var(--xp-title-text)}
.np-sep{height:1px;margin:3px 2px;background:var(--xp-dark)}

/* body: tools on the left, work area on the right */
.np-body{display:flex;flex:1;min-height:0}
.np-side{display:flex;flex-direction:column;gap:5px;padding:3px;width:60px;flex:none}
.np-tools{display:grid;grid-template-columns:repeat(2,26px);grid-auto-rows:26px;width:54px;border:1px solid var(--xp-dark);background:var(--xp-face)}
.np-tool{width:26px;height:26px;padding:0;display:grid;place-items:center;background:var(--xp-face);border:1px solid transparent}
.np-tool:hover{border-color:var(--xp-light) var(--xp-darker) var(--xp-darker) var(--xp-light)}
.np-tool.is-active{background:var(--xp-accent-soft);border-color:var(--xp-darker) var(--xp-light) var(--xp-light) var(--xp-darker);box-shadow:inset 1px 1px 0 var(--xp-dark)}
.np-tool.is-dead svg{opacity:.38}
.np-tool svg{width:16px;height:16px;display:block;shape-rendering:crispEdges}
.np-options{width:54px;min-height:70px;padding:5px 3px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px}
.np-opt{display:grid;place-items:center;width:40px;height:16px;padding:0;border:1px solid transparent;background:none}
.np-opt.is-on{background:var(--xp-accent);color:var(--xp-title-text);border-color:var(--xp-darker)}
.np-opt:hover{border-color:var(--xp-dark)}
.np-dot{display:block;border-radius:50%;background:currentColor}
.np-sq{display:block;background:currentColor}
.np-bar{display:block;width:28px;background:currentColor}
.np-opt svg{display:block;width:26px;height:14px;shape-rendering:crispEdges}
.np-opt .np-fillsample{fill:var(--xp-accent-soft)}
.np-opt.is-on .np-fillsample{fill:var(--xp-title-text)}

/* work area: mauve, canvas top-left, scrollbars on the far edges like paint */
.np-work{flex:1;min-width:0;min-height:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:minmax(0,1fr) auto;background:var(--xp-work);border-top:1px solid var(--xp-dark);border-left:1px solid var(--xp-dark)}
.np-canvaswrap{position:relative;grid-column:1;grid-row:1;justify-self:start;align-self:start;margin:3px;width:320px;height:200px;background:var(--xp-canvas);box-shadow:1px 1px 0 var(--xp-darker)}
.np-canvaswrap canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.np-paper{touch-action:none;cursor:crosshair}
.np-sprite,.np-overlay{pointer-events:none}
.np-textin{position:absolute;z-index:3;min-width:48px;padding:0 2px;border:1px dashed var(--xp-darker);background:var(--xp-canvas);font-family:var(--xp-font);line-height:1.2;outline:none;user-select:text;-webkit-user-select:text}
.np-textin::placeholder{color:var(--xp-text-dim)}
.np-vscroll{grid-column:2;grid-row:1;width:17px;display:flex;flex-direction:column;background:var(--xp-face)}
.np-hscroll{grid-column:1;grid-row:2;height:18px;display:flex;background:var(--xp-face)}
.np-corner{grid-column:2;grid-row:2;background:var(--xp-face)}
.np-track{flex:1;position:relative;background:repeating-conic-gradient(var(--xp-face-2) 0 25%,var(--xp-face) 0 50%) 0 0/2px 2px}
.np-sbtn{flex:none;display:grid;place-items:center;padding:0;touch-action:manipulation}
.np-vscroll .np-sbtn{height:17px;width:17px}
.np-hscroll .np-sbtn{width:28px;height:100%}
.np-sbtn svg{width:8px;height:8px;display:block;shape-rendering:crispEdges;fill:currentColor}
.np-sbtn[disabled]{color:var(--xp-text-dim)}
.np-vscroll .np-sbtn{color:var(--xp-text-dim)}
.np-thumb{position:absolute;top:0;left:0;height:100%;width:40px}
.np-hscroll .np-sbtn:hover{background:var(--xp-face-2)}

/* colour box + palette */
.np-colours{display:flex;align-items:flex-start;gap:8px;padding:4px 6px 3px;flex:none;border-top:1px solid var(--xp-light)}
.np-colourside{display:flex;flex-direction:column;align-items:center;gap:3px;flex:none}
.np-colourbox{position:relative;width:34px;height:34px}
.np-cur,.np-bg{position:absolute;width:16px;height:16px;border:1px solid;border-color:var(--xp-darker) var(--xp-light) var(--xp-light) var(--xp-darker)}
.np-bg{right:4px;bottom:4px}
.np-cur{left:4px;top:4px;z-index:1}
.np-reset{font-size:10px;line-height:14px;padding:0 5px;height:16px;white-space:nowrap}
.np-palette{display:flex;flex-direction:column;gap:2px}
.np-palette-row{display:flex;gap:2px}
.np-swatch{width:20px;height:20px;padding:0;flex:none;border:1px solid;border-color:var(--xp-darker) var(--xp-light) var(--xp-light) var(--xp-darker)}
.np-swatch:hover{outline:1px solid var(--xp-text)}
.np-swatch.is-cur{outline:2px solid var(--xp-accent);outline-offset:0}

/* status bar */
.np-status{display:flex;gap:3px;padding:3px 3px 3px;flex:none;align-items:stretch}
.np-cell{flex:1;min-width:0;padding:0 5px;line-height:18px;height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-cell--pos{flex:0 0 96px}
.np-cell--set{flex:0 1 auto;min-width:120px;text-align:right}
.np-clearbtn{flex:none;height:20px;padding:0 10px}

/* about dialog */
.np-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(280px,calc(100% - 24px));z-index:20;background:var(--xp-face);border:1px solid var(--xp-darker);border-radius:var(--xp-radius) var(--xp-radius) 0 0;box-shadow:var(--xp-shadow)}
.np-dialog-title{display:flex;align-items:center;height:26px;padding:0 9px;color:var(--xp-title-text);font-weight:700;background:linear-gradient(var(--xp-title-a),var(--xp-title-b));border-radius:var(--xp-radius) var(--xp-radius) 0 0}
.np-dialog-body{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 14px 14px;text-align:center}
.np-dialog-body .np-star{font-size:26px;color:var(--nl-pink);line-height:1}
.np-ok{min-width:74px;height:22px}

/* narrow: phones, or a narrow host div. set by paint.js when the root is <= 640px wide.
   the canvas fits both axes (paint.js fit), so the work area takes only the space left over and the
   palette, clear and the set arrows can never end up under the canvas. */
.np--narrow .np-body{flex-direction:column}
.np--narrow .np-side{width:auto;gap:0}
.np--narrow .np-tools{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));grid-auto-rows:34px;width:auto}
.np--narrow .np-tool{width:auto;height:34px}
.np--narrow .np-tool.is-dead,.np--short .np-tool.is-dead{display:none}
.np--narrow .np-options{width:auto;min-height:32px;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;padding:3px 6px;gap:6px}
.np--narrow .np-opt,.np--short .np-opt{width:44px;height:26px}
.np--narrow .np-work{flex:1 1 0;min-height:0}
.np--narrow .np-vscroll,.np--narrow .np-corner,.np--short .np-vscroll,.np--short .np-corner{display:none}
.np--narrow .np-hscroll{height:30px}
.np--narrow .np-hscroll .np-sbtn{width:46px}
.np--narrow .np-menubar,.np--short .np-menubar{height:28px}
.np--narrow .np-colours{gap:6px;padding:4px 4px 3px}
.np--narrow .np-palette{flex:1;min-width:0;gap:1px}
.np--narrow .np-palette-row{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:1px}
.np--narrow .np-swatch{width:auto;height:25px}
.np--narrow .np-reset,.np--short .np-reset{height:28px;line-height:26px}
.np--narrow .np-cell,.np--short .np-cell{height:28px;line-height:26px}
.np--narrow .np-clearbtn,.np--short .np-clearbtn{height:28px;padding:0 14px}
.np--narrow .np-cell--pos{display:none}
.np--narrow .np-cell--set{min-width:0}
.np--narrow .np-textin{min-width:40px}

/* short: a wide but low host (a phone on its side). tools in a 4-wide block so the side column fits */
.np--short .np-side{width:auto}
.np--short .np-tools{grid-template-columns:repeat(4,30px);grid-auto-rows:30px;width:auto}
.np--short .np-tool{width:30px;height:30px}
.np--short .np-options{width:auto;min-height:0;flex-direction:row;flex-wrap:wrap;justify-content:center}
.np--short .np-palette{display:grid;grid-template-columns:repeat(21,24px);gap:2px}
.np--short .np-palette-row{display:contents}
.np--short .np-swatch{width:24px;height:24px}
.np--short .np-hscroll{height:26px}
.np--short .np-hscroll .np-sbtn{width:40px}
.np-reset.is-dim{color:var(--xp-text-dim)}