/* Note layouts (notelayout.js): the list of layouts, and one layout edited as lines with its printed preview */
.sheet.nl-sheet{width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;gap:14px}
.sheet.nl-sheet.nl-editing{width:min(1180px,calc(100vw - 32px));height:calc(100vh - 32px);height:calc(100dvh - 32px);overflow:hidden;padding:16px 18px}
.nl-langbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nl-langseg{min-width:300px}
.nl-kinds{display:flex;flex-direction:column;border:1px solid var(--sep);border-radius:12px;overflow:hidden}
.nl-k + .nl-k{border-top:1px solid var(--sep)}
.nl-krow{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;text-align:start;min-height:52px}
.nl-krow:hover{background:#fafafb}
.nl-kn{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}.nl-kn b{font-size:var(--fs-14);font-weight:600}.nl-kn small{color:var(--ink2);font-size:var(--fs-12)}
.nl-kuse{color:var(--ink2);font-size:var(--fs-12_5);white-space:nowrap}.nl-kuse b{color:var(--ink);font-weight:600}
.nl-chev{color:var(--ink3);font-size:var(--fs-18);transition:transform .15s}
:root[dir=rtl] .nl-chev{transform:scaleX(-1)}
.nl-k.open .nl-chev{transform:rotate(90deg)}
.nl-k.open{background:#fbfbfc}
.nl-vers{display:flex;flex-direction:column;gap:8px;padding:0 14px 14px}
.nl-ver{background:#fff;border:1px solid var(--sep);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:7px}
.nl-ver.use{border-color:var(--c1);box-shadow:0 0 0 1px var(--c1) inset}
.nl-vh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.nl-vh b{font-weight:600}
.nl-vacts{display:flex;gap:6px;margin-inline-start:auto;flex-wrap:wrap;align-items:center}
.nl-tag{font-size:var(--fs-11);font-weight:600;color:var(--c1t);background:var(--c1b);border-radius:999px;padding:2px 8px}
.nl-tag.same{color:var(--ink2);background:#f2f2f4}
.nl-vl{display:flex;flex-wrap:wrap;gap:4px}
.nl-vl span{font-size:var(--fs-12);color:var(--ink2);background:#f4f4f6;border-radius:6px;padding:2px 7px}

/* the editor */
.nl-eh{align-items:center}
.nl-back{font-weight:600;color:var(--c1t);padding:6px 8px;border-radius:8px;white-space:nowrap}
.nl-back:hover{background:var(--c1b)}
.nl-et{flex:1;min-width:0}.nl-et h2{margin:0;font-size:var(--fs-17)}
.nl-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,38%);gap:16px;flex:1;min-height:0}
.nl-lines{overflow:auto;display:flex;flex-direction:column;gap:6px;padding:2px 4px 14px 2px;min-height:0;overscroll-behavior:contain}
.nl-line{display:flex;gap:6px;align-items:flex-start;border:1px solid var(--sep);border-radius:10px;padding:8px 10px 8px 4px;background:#fff;position:relative}
:root[dir=rtl] .nl-line{padding:8px 4px 8px 10px}
.nl-line.drag{background:#f4f8ff;border-color:var(--c1);opacity:.85}
.nl-line.nl-dropb::before,.nl-line.nl-dropa::after{content:"";position:absolute;inset-inline:6px;height:3px;border-radius:2px;background:var(--c1)}
.nl-line.nl-dropb::before{top:-5px}.nl-line.nl-dropa::after{bottom:-5px}
.nl-line.err{border-color:var(--red);box-shadow:0 0 0 1px var(--red) inset}
.nl-errm{color:#b3261e;font-size:var(--fs-12);font-weight:500}
.nl-grip{width:28px;min-height:36px;align-self:stretch;display:grid;place-items:center;color:var(--ink3);cursor:grab;touch-action:none;border-radius:6px;flex:none}
.nl-grip:hover,.nl-grip:focus-visible{color:var(--ink2);background:#f2f2f4}
.nl-line.drag .nl-grip{cursor:grabbing}
.nl-lmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.nl-lhead{display:flex;gap:6px;align-items:center}
.nl-name{flex:1;min-width:0;height:34px;border:1px solid var(--sep);border-radius:8px;padding:0 10px;font:inherit;font-size:var(--fs-13_5);font-weight:600;background:#fff}
.nl-name:focus,.nl-in:focus,.nl-ch input:focus,.nl-chadd:focus{outline:2px solid var(--c1);outline-offset:-1px;border-color:transparent}
.nl-noname{display:flex;align-items:center;color:var(--ink2);font-weight:500;border-style:dashed}
.nl-ksel{height:34px;border:1px solid var(--sep);border-radius:8px;padding:0 6px;font:inherit;font-size:var(--fs-12_5);background:#fafafb;max-width:150px}
.nl-tog{font:inherit;font-size:var(--fs-12);font-weight:500;border:1px solid var(--sep);border-radius:999px;padding:5px 10px;background:#fff;color:var(--ink2);white-space:nowrap}
.nl-tog[aria-pressed=true]{background:var(--c1b);border-color:transparent;color:var(--c1t);font-weight:600}
.nl-req[aria-pressed=true]{background:var(--c3b);color:var(--c3t)}
.nl-del{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--ink3);flex:none}
.nl-del:hover{background:#fdecea;color:#b3261e}
.nl-det{display:flex;flex-direction:column;gap:6px}
.nl-in{height:32px;border:1px solid var(--sep);border-radius:8px;padding:0 10px;font:inherit;font-size:var(--fs-13);background:#fff;width:100%}
.nl-in.sm{width:auto;min-width:140px;flex:1;max-width:260px}
.nl-chs{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.nl-ch{display:inline-flex;align-items:center;border:1px solid var(--sep);border-radius:999px;background:#fff;padding-inline-start:4px;max-width:100%}
.nl-ch input{border:0;background:none;font:inherit;font-size:var(--fs-12_5);padding:4px 4px;min-width:2ch;max-width:220px;border-radius:999px}
.nl-ch button{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;color:var(--ink3);margin-inline-end:2px}
.nl-ch button svg{width:11px;height:11px}
.nl-ch button:hover{color:#b3261e;background:#fdecea}
.nl-chadd{height:28px;border:1px dashed #c7c7cc;border-radius:999px;padding:0 10px;font:inherit;font-size:var(--fs-12_5);width:130px;background:none}
.nl-opts,.nl-srcs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.nl-parts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.nl-pw{width:auto;flex:1 1 160px}
.nl-part{display:flex;flex-direction:column;gap:5px;border:1px dashed var(--sep);border-radius:8px;padding:6px;flex:1 1 100%}
.nl-src{font-size:var(--fs-12);font-weight:600;color:var(--c4t);background:var(--c4b);border-radius:999px;padding:4px 10px}
.nl-note{font-style:italic}
.nl-undo{display:flex;align-items:center;gap:10px;background:#1c1c1e;color:#fff;border-radius:10px;padding:8px 12px;font-size:var(--fs-13)}
.nl-undo .lk-link{color:#7cb8ff;font-weight:600}
.nl-add{display:flex;align-items:center;justify-content:center;gap:6px;height:40px;border:1px dashed #c7c7cc;border-radius:10px;font-weight:600;color:var(--c1t);flex:none}
.nl-add:hover{background:var(--c1b);border-color:transparent}
.nl-add svg{width:14px;height:14px}
.nl-prevcol{display:flex;flex-direction:column;gap:6px;min-height:0}
.nl-prevh{display:flex;align-items:center;gap:10px}.nl-prevh b{font-size:var(--fs-13)}
.nl-sexseg{width:150px;margin-inline-start:auto}
.nl-paper{flex:1;min-height:0;overflow:auto;background:#fff;border:1px solid var(--sep);border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.05);padding:18px 20px;font-size:var(--fs-12_5);line-height:1.65;font-family:Georgia,"Times New Roman","IBM Plex Sans Arabic",serif;color:#222}
.nl-paper[lang=ar]{font-family:"IBM Plex Sans Arabic",var(--f)}
.nl-pl{white-space:pre-wrap;overflow-wrap:anywhere}
.nl-pin{padding-inline-start:14px}
.nl-ph{font-weight:700;margin-top:4px}
.nl-pt{margin-bottom:2px}
.nl-ex{text-decoration:underline dotted #8e8e93;text-underline-offset:3px;color:#3a3a3c}
.nl-pdim{color:#8e8e93;font-style:italic}
.nl-foot{display:flex;align-items:center;gap:8px;border-top:1px solid var(--sep);padding-top:12px;flex:none}
.nl-foot .sec2,.nl-foot .go2{width:auto;padding:0 16px}
.nl-sp{flex:1}

@media (max-width:900px){
  .sheet.nl-sheet.nl-editing{overflow:auto;height:auto;max-height:calc(100dvh - 24px)}
  .nl-body{display:block;flex:none}
  .nl-lines{overflow:visible;padding-bottom:6px}
  .nl-prevcol{margin-top:14px}
  .nl-paper{flex:none;max-height:none;overflow:visible}
  .nl-foot{position:sticky;bottom:-16px;background:#fff;padding-bottom:4px;flex-wrap:wrap}
}
@media (max-width:700px){
  .nl-lhead{flex-wrap:wrap}.nl-name{flex:1 1 100%}
  .nl-langseg{min-width:0;width:100%}
  .nl-kuse{white-space:normal}
}
/* the note form: a line the layout says is required (noteform.js) */
.nl-reqdot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--c3);margin-inline-start:5px;vertical-align:middle}
@media (pointer:coarse){.nl-grip{width:36px}.nl-del{width:36px;height:36px}.nl-tog{padding:7px 12px}.nl-ch button{width:28px;height:28px}}