/* Bookmark-first layout and accessible touch controls. */
.brand{gap:8px}.content{max-width:1500px}.card h3{font-size:17px;line-height:1.45;white-space:normal;min-height:2.9em}.card h3 a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.card .domain{font-size:12px}.card .notes{font-size:13px;line-height:1.6}.card .card-foot,.card .tag{font-size:11px}.card{padding:20px}.nav-item{min-height:42px}.folder-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile strong{overflow-wrap:anywhere}.top-actions{flex-wrap:wrap}.topbar{gap:12px}.top-actions button{min-height:38px}.sync-error{color:#b23d32;font-weight:600}#sync:disabled{opacity:.7}.dark .sync-error{color:#ffb5ad}.onboarding{text-align:center;padding:12px 10px 24px}.onboarding-mark{display:block;font-size:62px;color:#657c42}.onboarding>p{font-size:17px;line-height:1.7}.onboarding .hint{font-size:13px}.onboarding-actions{display:grid;gap:12px;margin:24px 0}.onboarding-actions button{padding:14px}.support-link{display:inline-block;text-decoration:none;padding:12px 16px;border-radius:10px}.help-sections p,#dialog-body>p{line-height:1.7}.help-sections h3{margin-top:24px}#auth-fields{margin-top:18px}input[type=color]{padding:5px;width:72px;min-height:42px}.mobile-menu,.sidebar-shade{display:none}button:focus-visible,a:focus-visible{outline:3px solid #668345;outline-offset:3px}.dark button:focus-visible,.dark a:focus-visible{outline-color:#c4dca4}.card .notes{color:var(--muted,#65705e)}
[dir=rtl] body{font-family:Tahoma,Arial,sans-serif}[dir=rtl] .sidebar{left:auto;right:0;border-right:0;border-left:1px solid var(--line,#e4e7df)}[dir=rtl] main{margin-left:0;margin-right:250px}[dir=rtl] .card,[dir=rtl] .field,[dir=rtl] .help-sections{text-align:right}[dir=rtl] input[type=email],[dir=rtl] input[type=url],[dir=rtl] .domain{direction:ltr;text-align:right}[dir=rtl] .profile{direction:rtl}[dir=rtl] .ncb-account-content{margin-right:0}[dir=rtl] .search kbd{margin-left:0;margin-right:auto}.breadcrumb{min-width:0}
@media(max-width:1000px){.topbar{padding:16px 22px}.breadcrumb{display:none}.top-actions{margin-inline-start:auto}.content{padding:24px}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.mobile-menu{display:block;flex:none}.sidebar{position:fixed!important;inset:0 auto 0 0;width:270px;height:100dvh;z-index:30;overflow-y:auto;transform:translateX(-105%);transition:transform .2s}.sidebar-open .sidebar{transform:translateX(0)}.sidebar-shade:not([hidden]){display:block;position:fixed;inset:0;width:100%;height:100%;border:0;background:#17201466;z-index:29;border-radius:0}.sidebar .private-tip,.sidebar .eyebrow,.sidebar .folder-heading,.sidebar .sidebar-bottom{display:block}.sidebar #navigation,.sidebar #folders{display:block;overflow:visible}.sidebar .nav-item{width:100%}.sidebar .folder-heading{display:flex}.sidebar .sidebar-bottom{margin-top:auto}.sidebar #capture{width:100%}main,[dir=rtl] main{margin:0!important}.topbar{padding:12px;align-items:center}.top-actions{gap:7px}#lock-all{font-size:0;width:38px}#lock-all:before{content:'🔒';font-size:16px}.content{padding:22px 16px}.intro h1{font-size:32px}.intro{gap:12px;align-items:start}.intro .eyebrow{font-size:10px}.intro #add-main{font-size:12px;white-space:nowrap;padding:10px}.toolbar{flex-wrap:wrap;gap:10px}.search{width:100%;flex-basis:100%}.toolbar select{flex:1;min-width:0}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.card{padding:14px;min-width:0}.card h3{font-size:15px}.card-foot{gap:6px;flex-wrap:wrap}.card .notes{font-size:12px}.section-label{flex-wrap:wrap;gap:10px}footer{display:flex;flex-direction:column;gap:8px}footer span{margin:0}.welcome{padding:24px}.welcome .art{display:none}dialog{width:calc(100% - 24px);max-height:90dvh;padding:20px;box-sizing:border-box}#dialog-form{min-width:0}.settings-actions{flex-wrap:wrap}input,textarea,select{font-size:16px!important;min-width:0;max-width:100%}#dialog-body{overflow-wrap:anywhere}[dir=rtl] .sidebar{inset:0 0 0 auto;transform:translateX(105%)}[dir=rtl] .sidebar-open .sidebar{transform:translateX(0)}}
@media(max-width:420px){.grid{grid-template-columns:minmax(0,1fr)}.intro{flex-wrap:wrap}.top-actions .primary{padding:8px 10px}.top-actions{gap:4px}.card h3{font-size:17px}.card .notes{font-size:13px}.card .card-foot{font-size:12px}}

[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] .eyebrow{letter-spacing:0}[dir=rtl] .nav-item{text-align:right}[dir=rtl] .nav-item small{margin-left:0;margin-right:auto}.card h3{min-height:0;margin-bottom:12px}.card h3 a{min-height:2.9em}.card .notes{height:auto;min-height:42px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(min-width:761px) and (max-width:1150px){[dir=rtl] main{margin-right:220px}}@media(min-width:761px) and (max-width:800px){[dir=rtl] main{margin-right:190px}}
@media(max-width:760px){.sidebar>.primary{position:static!important;margin-bottom:16px}.sidebar .profile{display:flex}.sidebar .brand{margin-bottom:20px}.sidebar .private-tip{display:none}.intro>div{min-width:0;max-width:100%}.intro h1{font-size:30px;overflow-wrap:anywhere}.intro>.primary{display:block}.topbar{height:auto;min-height:60px}.intro{flex-wrap:wrap;gap:16px}.card h3 a{min-height:0}.grid.list .card h3{min-height:0}}
.folder-row{display:flex;align-items:center;min-width:0;gap:2px}.folder-row .nav-item{flex:1;min-width:0}.folder-menu{padding:8px 5px;font-size:20px;border-radius:6px;min-height:40px}.folder-menu:hover{background:var(--line)}

.filter-row,.selection-row,#bulk-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.filter-row{margin:0 0 16px}.filter-row select{max-width:240px;min-height:38px;border:1px solid var(--line);border-radius:9px;padding:7px 10px;color:var(--text);background:var(--surface)}.filter-row .check,.selection-row .check{font-size:12px;margin:0;white-space:nowrap}.selection-row{border-block:1px solid var(--line);padding:12px 0;min-height:48px}.selection-row button{font-size:12px;padding:7px 10px}#selected-count{font-size:12px}.card-select{width:17px;height:17px;accent-color:#526836;cursor:pointer;margin-inline-end:10px;flex-shrink:0}.card-top .star{margin-inline-start:auto}.undo-bar{position:fixed;inset-inline-start:50%;transform:translateX(-50%);bottom:76px;z-index:99;background:var(--surface);border:1px solid var(--line);box-shadow:0 8px 32px #0002;border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:14px;font-size:13px;max-width:90vw}[dir=rtl] .undo-bar{transform:translateX(50%)}@media(max-width:600px){.filter-row{gap:8px}.filter-row select{flex:1;min-width:0;max-width:100%;width:130px}.selection-row{gap:10px}#bulk-bar{gap:5px}.undo-bar{width:max-content;max-width:90vw}.card-top .favicon{margin-inline-end:auto}}

/* v0.4: recognizable site logos and distinct, quiet card outlines. */
.grid{gap:20px}.card{border:1.5px solid #c6d1bb;border-radius:16px;box-shadow:0 3px 10px #25321c08;background:var(--surface);transition:border-color .16s,box-shadow .16s,transform .16s}.card:hover{border-color:#859f68;box-shadow:0 8px 22px #34452b12}.card:focus-within{border-color:#6b874d}.card.is-selected{border-color:#63833f;box-shadow:0 0 0 2px #8ba8673b}.card .favicon{width:64px;height:64px;flex:0 0 64px;border:1px solid #d6decf;border-radius:16px;background:#f8faf5;box-shadow:0 2px 5px #293d1910;color:#526a38;font-size:30px}.card .favicon img{width:44px;height:44px;object-fit:contain}.card .card-top{justify-content:flex-start;gap:0;margin-bottom:18px}.card .card-foot{border-top:1px solid #dbe3d3}.dark .card{border-color:#53634a;box-shadow:0 3px 12px #0002}.dark .card:hover{border-color:#9ab77b}.dark .card.is-selected{border-color:#b6d28c;box-shadow:0 0 0 2px #95b26e44}.dark .card .favicon{background:#f5f7ef;border-color:#b0bea2;color:#526a38}.dark .card .card-foot{border-color:#46563d}.grid.list .card{grid-template-columns:100px 1fr 1fr}.grid.list .card-top{gap:0}.grid.list .favicon{width:56px;height:56px;flex-basis:56px;border-radius:13px}.grid.list .favicon img{width:40px;height:40px}@media(max-width:600px){.grid{gap:16px}.grid.list .card{grid-template-columns:92px minmax(0,1fr);gap:8px 12px}.grid.list .card-foot{grid-column:2}.card{padding:18px}}@media(prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}

/* 0.5: density is a preference independent of grid/list view. */
#sync-summary{font-size:12px;color:var(--muted);max-width:220px}#sync-summary[data-phase=error],#sync-summary[data-phase=offline]{color:#9e4726}.dark #sync-summary[data-phase=error],.dark #sync-summary[data-phase=offline]{color:#ffb995}.compact .card{padding:14px;border-radius:12px}.compact .card .favicon{width:44px;height:44px;flex-basis:44px;border-radius:11px;font-size:19px}.compact .card .favicon img{width:32px;height:32px}.compact .card .card-top{margin-bottom:10px}.compact .card .notes{display:none}.compact .card h3{font-size:15px;margin-bottom:8px}.compact .card .card-foot{padding-top:10px;margin-top:12px}.compact .grid{gap:12px}.favicon{font-weight:750;letter-spacing:.02em}.inline-collection{margin:10px 0 20px}.inline-collection summary{cursor:pointer;color:var(--text);padding:8px 0}.duplicate-notice{padding:12px;border:1px solid #9aa978;border-radius:10px;margin:12px 0}.trash-item{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}.trash-item small{display:block;color:var(--muted);margin-top:6px}.release-version{font-size:13px;color:var(--muted)}#empty-trash{margin-top:20px}@media(max-width:760px){#sync-summary{flex-basis:100%;max-width:none;order:5}.compact .grid.list .card{grid-template-columns:80px minmax(0,1fr)}}
/* Keep compact rows compact even when inherited card typography reserves two lines. */
.compact .card h3 a{min-height:0}.compact .card .domain{margin-bottom:6px}.compact .card .tags{min-height:20px;margin:6px 0}.compact .grid.list .card h3,.compact .grid.list .card-top,.compact .grid.list .domain{margin:0}.compact .grid.list .card .card-foot{margin-top:0;padding-top:6px}

/* Server-controlled announcement / update notice. */
.announcement{display:flex;align-items:center;gap:14px;margin:14px 28px 0;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);color:var(--text)}.announcement[hidden]{display:none}.announcement p{margin:0;flex:1;font-size:14px}.announcement[data-level=warning]{border-color:#f59e0b;background:color-mix(in srgb,#f59e0b 12%,var(--surface))}.announcement a{font-size:14px;color:var(--accent-text)}.button-link{display:inline-block;text-decoration:none;padding:8px 14px;border:1px solid var(--line);border-radius:10px;color:var(--text)}@media(max-width:760px){.announcement{margin:12px 16px 0;flex-wrap:wrap}}

/* Plans */
.plan-notice{display:flex;align-items:center;gap:14px;margin:14px 28px 0;padding:12px 16px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-size:14px}.plan-notice[hidden]{display:none}.plan-notice p{margin:0;flex:1}
.plan-notice[data-level=warning]{border-color:#e0b24d;background:color-mix(in srgb,#f5c14d 14%,var(--surface))}.plan-notice[data-level=critical]{border-color:#e08a80;background:color-mix(in srgb,#e5534b 10%,var(--surface))}.plan-notice[data-level=info]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 22%,var(--surface))}
.plan-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.plan-pill{font-size:12px;font-weight:650;padding:4px 10px;border-radius:99px;background:color-mix(in srgb,var(--accent) 45%,var(--surface));color:var(--accent-text)}.plan-pill[data-level=warning]{background:color-mix(in srgb,#f5c14d 25%,var(--surface));color:#8a5a0b}.plan-pill[data-level=critical]{background:color-mix(in srgb,#e5534b 18%,var(--surface));color:#a2271f}
.plan-name{font-size:24px;font-weight:750;letter-spacing:-.5px;margin:6px 0 10px}.plan-name small{font-size:12px;font-weight:600;color:var(--muted);margin-left:6px;letter-spacing:0}
.plan-meter{margin:10px 0}.plan-meter-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px;font-variant-numeric:tabular-nums}.plan-track{height:8px;border-radius:99px;background:var(--line);overflow:hidden}.plan-track i{display:block;height:100%;border-radius:99px;background:#9ccb4f}.plan-track i.warn{background:#e0a13a}
.plan-section .primary{margin-top:8px}.plan-choices{display:grid;gap:8px;margin:12px 0}.plan-choice{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;cursor:pointer}.plan-choice:has(input:checked){border-color:#9ccb4f;background:color-mix(in srgb,var(--accent) 25%,var(--surface))}.plan-choice span{display:grid;gap:2px}.plan-choice small{color:var(--muted);font-size:12.5px}
@media(max-width:760px){.plan-notice{margin:12px 16px 0;flex-wrap:wrap}}

/* Card colors: a tinted card with a band across the top, readable in light and dark themes. */
.card[data-color]{border-color:color-mix(in srgb,var(--card-c) 60%,var(--line));background:color-mix(in srgb,var(--card-c) 12%,var(--surface));box-shadow:inset 0 5px 0 var(--card-c)}
.card[data-color] .favicon{background:color-mix(in srgb,var(--card-c) 16%,var(--surface))}
.card[data-color] .tag{background:color-mix(in srgb,var(--card-c) 18%,var(--surface))}
.color-btn{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;padding:0}.color-btn:hover{background:var(--line)}
.color-btn span{width:14px;height:14px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px color-mix(in srgb,var(--dot) 70%,var(--muted))}
.color-btn span[style*="transparent"]{box-shadow:inset 0 0 0 1.5px var(--muted);background:conic-gradient(#e5484d 0 25%,#f5b800 0 50%,#46a758 0 75%,#0090ff 0);opacity:.75}
.color-pop{position:fixed;z-index:60;padding:12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 40px -16px rgba(0,0,0,.35);display:grid;gap:10px;width:228px}
.color-pop[hidden]{display:none}
.color-pop-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.pick{width:28px;height:28px;border-radius:50%;background:var(--dot);border:0;padding:0;cursor:pointer;box-shadow:0 0 0 2px var(--surface)}
.pick:hover{transform:scale(1.1)}.pick.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text)}
.pick-none{justify-self:start;font-size:13px;color:var(--muted);padding:4px 2px;background:none;border:0;cursor:pointer}.pick-none:hover{color:var(--text)}
.color-field{border:0;padding:0;margin:4px 0 14px}.color-field legend{font-size:13px;color:var(--muted);margin-bottom:8px;padding:0}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{position:relative;cursor:pointer}.swatch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.swatch span{display:block;width:26px;height:26px;border-radius:50%;background:var(--dot);box-shadow:0 0 0 2px var(--surface)}
.swatch.none span{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--muted);position:relative}.swatch.none span::after{content:"";position:absolute;inset:12px 3px;background:var(--muted);transform:rotate(-45deg);border-radius:2px}
.swatch input:checked+span{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--text)}.swatch input:focus-visible+span{outline:2px solid var(--text);outline-offset:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.color-item .color-dot{width:10px;height:10px;border-radius:50%;background:var(--dot);flex:none}
#filter-color[hidden]{display:none}