/* Element additions on top of the vault stylesheet (vault.css is copied unchanged). */


.bar .navl{color:var(--mut);text-decoration:none;padding:5px 10px;border-radius:999px}
.bar .navl:hover,.bar .navl.on{color:var(--fg);background:#1a1a1c}
a{color:inherit}
.panel{max-width:380px;margin:12vh auto;padding:0 16px}
.panel h1,.page h1{font-size:15px;font-weight:600;margin:0 0 16px;letter-spacing:-.01em}
.field{display:block;width:100%;margin:0 0 8px;background:var(--card);border:1px solid var(--line);color:var(--fg);border-radius:999px;padding:9px 14px;font:inherit;outline:none}
.field:focus{border-color:#444}
.pbtn{border-color:var(--line);color:var(--fg)}.pbtn.on,.pbtn.primary{background:var(--acc);color:var(--bg)}
.err{color:#ff7a7a;min-height:18px;font-size:12px}
.page{padding:16px}
.rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--gap)}
.bcard{background:var(--card);border-radius:6px;padding:14px;text-decoration:none;display:block;outline:1px solid transparent}
.bcard:hover{outline-color:#3a3a3e}
.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.card .save{position:absolute;top:8px;right:8px;opacity:0;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:3px 9px}
.card:hover .save,.card .save:focus{opacity:1}
.card select.save{opacity:1}
/* header fix: wordmark, no-wrap nav, smooth top fade */
.bar .brand{width:auto;padding:0 10px 0 8px;height:36px}
.wordmark{font-weight:600;font-size:13px;letter-spacing:-.01em;color:#fff;white-space:nowrap}
.bar .tools{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.bar .tools::-webkit-scrollbar{display:none}
.bar .navl,.bar button.navl{white-space:nowrap;flex:none;font:inherit;border:0;background:none;cursor:pointer}
.bar form{display:flex;flex:none;margin:0}
.bar{white-space:nowrap}
@media(max-width:480px){.bar .navl{padding:5px 8px}.bar .brand{padding:0 6px}}
:root{--topfade:28px}
body::before{z-index:9;transform:translateZ(0);will-change:transform;height:calc(env(safe-area-inset-top) + var(--topfade));
 background:linear-gradient(to bottom,rgba(11,11,12,1) 0,rgba(11,11,12,1) env(safe-area-inset-top),rgba(11,11,12,.85) calc(env(safe-area-inset-top) + 25%),rgba(11,11,12,.5) calc(env(safe-area-inset-top) + 55%),rgba(11,11,12,.18) calc(env(safe-area-inset-top) + 80%),rgba(11,11,12,0) 100%)}
.page,.panel{padding-top:calc(env(safe-area-inset-top) + var(--topfade))}