/* My notes in Explore Variants (notes.js) */
.filters label[hidden]{display:none}
.btn[hidden]{display:none}
.ntbtn{float:right;margin:-2px 0 4px 8px;font:inherit;font-size:.85rem;color:var(--ink);background:transparent;border:1px solid var(--rule);border-radius:3px;padding:1px 10px;cursor:pointer}
.ntbtn:hover{border-color:var(--ink)}
.ntbtn.has{background:var(--gilt);border-color:var(--gilt);color:#fff}
.ntbtn:focus-visible,.nt-tab:focus-visible,.nt-x:focus-visible,.nt-main-btn:focus-visible,.nt-lite:focus-visible,.nt-row:focus-visible{outline:2px solid var(--rubric);outline-offset:2px}

/* a note of your own, shown where it belongs */
.nt-slot:empty{display:none}
.mynote{margin:6px 0 8px;padding:6px 12px;border-left:3px solid var(--gilt);background:rgba(140,115,67,.10);border-radius:0 3px 3px 0;font-size:.97rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.mynote .mn-lab{display:block;font-size:.8rem;color:var(--ink-soft);font-style:italic;margin-bottom:1px}
.mynote .mn-lab:empty{display:none}
.mynote .mn-title{display:block;font-size:.97rem;font-style:normal;color:var(--ink);margin-bottom:1px}
.nt-rslot .mynote{margin-left:14px}

/* a long note is folded to six lines */
.mynote .mn-text{white-space:pre-wrap}
.mynote.mn-long:not(.open) .mn-text{max-height:calc(6 * 1.45em);overflow:hidden;-webkit-mask-image:linear-gradient(#000 65%,transparent);mask-image:linear-gradient(#000 65%,transparent)}
.mn-more{display:block;margin:2px 0 0;padding:0;font:inherit;font-size:.88rem;color:var(--rubric);background:none;border:0;text-decoration:underline;cursor:pointer}
.mn-more[hidden]{display:none}
.mn-more:focus-visible{outline:2px solid var(--rubric);outline-offset:2px}

/* the panel */
html.nt-open{overflow:hidden}
.nt-back{position:fixed;inset:0;background:rgba(20,28,38,.45);z-index:50}
.nt{padding:0;margin:0;position:fixed;z-index:51;top:0;right:0;bottom:0;width:min(540px,100vw);background:var(--vellum);border-left:3px solid var(--rubric);box-shadow:-10px 0 30px -12px rgba(20,28,38,.45);display:flex;flex-direction:column}
.nt[hidden],.nt-back[hidden],.nt-listv[hidden],.nt-editv[hidden],.nt-tolist[hidden]{display:none}
.nt-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--rule)}
.nt-h{margin:0;font-size:1.05rem;flex:1;min-width:0}
.nt-x{font:inherit;font-size:1.6rem;line-height:1;width:40px;height:40px;flex:none;background:none;border:1px solid var(--rule);border-radius:20px;color:var(--ink);cursor:pointer}
.nt-lite{font:inherit;font-size:.92rem;color:var(--ink);background:transparent;border:1px solid var(--ink);border-radius:3px;padding:3px 12px;cursor:pointer}
.nt-lite:hover{background:rgba(31,42,54,.07)}
.nt-lite:disabled{opacity:.5;cursor:default}
.nt-danger{background:var(--rubric);border-color:var(--rubric);color:#f6efe6}
.nt-danger:hover{background:var(--rubric-dark)}
.nt-main-btn{font:inherit;font-size:1rem;color:#f6efe6;background:var(--rubric);border:1px solid var(--rubric);border-radius:3px;padding:6px 20px;cursor:pointer}
.nt-main-btn:hover{background:var(--rubric-dark)}
.nt-editv,.nt-listv{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.nt-ctx{flex:0 1 auto;max-height:34%;overflow-y:auto;padding:8px 14px;border-bottom:1px solid var(--rule);background:#fff}
.nt-main{margin:0 0 6px;font-size:1rem}
.nt-reads{list-style:none;margin:0;padding:0}
.nt-reads li{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;padding:3px 6px;border-top:1px dotted var(--rule);border-left:3px solid transparent}
.nt-reads li.on{background:rgba(138,42,30,.08);border-left-color:var(--rubric)}
.nt-reads .tags,.nt-tab .tags{display:inline-flex;flex-wrap:wrap;align-items:center;gap:3px}
.nt-reads .kd{font-size:.9rem;color:var(--ink-soft);font-style:italic}
.nt-tabs{display:flex;gap:2px;padding:8px 10px 0;overflow-x:auto;border-bottom:1px solid var(--rule);scrollbar-width:none}
.nt-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:.95rem;color:var(--ink);background:transparent;border:1px solid var(--rule);border-bottom:none;border-radius:4px 4px 0 0;padding:6px 12px;cursor:pointer;min-height:40px;margin-bottom:-1px}
.nt-tab[aria-selected="true"]{background:#fff;border-color:var(--ink);font-weight:600}
.nt-tab .dot{width:8px;height:8px;border-radius:50%;background:var(--gilt);display:none}
.nt-tab.has .dot{display:inline-block}
.nt-body{flex:1 1 auto;display:flex;flex-direction:column;gap:6px;padding:10px 14px;min-height:0;background:#fff}
.nt-lab{font-size:.9rem;color:var(--ink-soft)}
.nt-ttl{font:inherit;font-size:1.05rem;font-weight:600;padding:6px 10px;border:1px solid var(--rule);border-radius:3px;color:var(--ink);background:#fff;width:100%;box-sizing:border-box}
.nt-text{flex:1 1 auto;min-height:110px;font:inherit;font-size:1.05rem;line-height:1.45;padding:8px 10px;border:1px solid var(--rule);border-radius:3px;resize:none;color:var(--ink);background:#fff;width:100%;box-sizing:border-box}
.nt-ttl:disabled,.nt-text:disabled{background:var(--stone)}
.nt-dates{margin:0;font-size:.85rem;color:var(--ink-soft)}
.nt-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 14px calc(8px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--rule)}
.nt-status{flex:1;font-size:.85rem;color:var(--ink-soft);font-style:italic;min-width:8em}
.nt-delbox{font-size:.9rem;color:var(--ink-soft);display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}

/* the list of notes */
.nt-ctl{display:flex;gap:8px;padding:10px 14px;border-bottom:1px solid var(--rule)}
.nt-find{flex:1;min-width:0;font:inherit;font-size:1rem;padding:6px 10px;border:1px solid var(--rule);border-radius:3px;background:#fff;color:var(--ink)}
.nt-sort{font:inherit;font-size:.95rem;padding:6px 8px;border:1px solid var(--rule);border-radius:3px;background:#fff;color:var(--ink)}
.nt-rows{flex:1 1 auto;overflow-y:auto;padding:6px 14px;min-height:0}
.nt-empty{color:var(--ink-soft);font-style:italic}
.nt-row{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;font:inherit;color:var(--ink);background:#fff;border:1px solid var(--rule);border-left:4px solid var(--gilt);border-radius:3px;padding:8px 12px;margin:0 0 8px;cursor:pointer;position:relative}
.nt-row:hover{border-color:var(--ink);border-left-color:var(--gilt)}
.nt-orphan{border-left-color:var(--rubric);cursor:default}
.nt-r1{font-size:.95rem}
.nt-r2{font-size:.95rem;overflow-wrap:anywhere}
.nt-r3,.nt-r4{font-size:.82rem;color:var(--ink-soft)}
.nt-r4{font-style:italic;color:var(--rubric)}
.nt-rdel{align-self:flex-start;margin-top:4px;font-size:.85rem;color:var(--rubric);text-decoration:underline;cursor:pointer}
.nt-tools{flex:none;border-top:1px solid var(--rule);padding:8px 14px;max-height:55%;overflow-y:auto}
.nt-tools summary{cursor:pointer;color:var(--ink-soft)}
.nt-toolbody{display:flex;flex-direction:column;gap:8px;padding-top:8px}
.nt-trow{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.nt-trow select{font:inherit;font-size:.92rem;padding:3px 6px;border:1px solid var(--rule);border-radius:3px;background:#fff;color:var(--ink)}
.nt-chk{font-size:.92rem}
.nt-hint{margin:0;font-size:.88rem;color:var(--ink-soft)}
.nt-last{margin:0;font-size:.92rem}
.nt-rep p{margin:0 0 4px;font-size:.92rem}
.nt-sep{border:0;border-top:1px dotted var(--rule);margin:2px 0;width:100%}
@media (max-width:640px){
  .nt{width:100vw;border-left:0;border-top:3px solid var(--rubric)}
  .nt-ctx{max-height:30%}
  .nt-reads .gk{font-size:1.05rem}
  .nt-tools{max-height:60%}
}
@media (max-width:640px) and (display-mode:standalone){
  .nt-foot{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right));padding-bottom:max(30px,env(safe-area-inset-bottom))}
}