/* Compact notes and a quiet dark sheet, using the common glass and typography tokens. */
.ng-filters { margin: 0; padding: var(--sp-4); min-height: calc(var(--tap) + var(--sp-8)); gap: 0; border: 1px solid var(--glass-line); border-radius: var(--r-pill); background: var(--glass); box-shadow: inset 0 1px color-mix(in srgb,var(--fg) 26%,transparent),0 8px 24px color-mix(in srgb,var(--bg) 35%,transparent); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); overscroll-behavior-x: contain; touch-action: pan-y; scroll-behavior: auto; user-select: none; -webkit-user-select: none; }
.ng-filter-cycle { display: flex; flex: none; min-width: 100%; gap: var(--sp-6); padding-right: var(--sp-6); }
.ng-board-scroll { padding: var(--sp-4) var(--sp-12) var(--sp-12); background: none; touch-action: pan-y; }
.ng-board { gap: var(--sp-8); align-items: stretch; }
.ng-sticky, .ng-sticky:nth-child(n) { display: grid; grid-template-columns: minmax(0,1fr) var(--tap); margin: 0; transform: none; border-radius: var(--r-16); color: var(--fg); border: 1px solid color-mix(in srgb,var(--ng-paper-note) 35%,var(--glass-line)); background: linear-gradient(color-mix(in srgb,var(--ng-paper-note) 18%,transparent),color-mix(in srgb,var(--ng-paper-note) 18%,transparent)),var(--glass); box-shadow: inset 0 1px color-mix(in srgb,var(--ng-paper-note) 24%,transparent),0 4px 14px color-mix(in srgb,var(--bg) 28%,transparent); }
.ng-sticky::before { display: none; }
.ng-sticky-top { display: contents; }
.ng-card-labels { grid-column: 1 / 3; grid-row: 1; min-height: 20px; display: flex; justify-content: flex-end; gap: var(--sp-4); padding: var(--sp-6) var(--sp-8) 0; overflow: hidden; }
.ng-kind { flex: none; opacity: 1; display: block; border-radius: var(--r-pill); font-size: var(--fs-micro); line-height: var(--lh-small); padding: 0 var(--sp-6); background: color-mix(in srgb,var(--ng-paper-note) 16%,transparent); color: var(--ng-paper-note); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ng-kind[data-label="idea"] { color: var(--ng-paper-idea); background: color-mix(in srgb,var(--ng-paper-idea) 15%,transparent); }
.ng-star { grid-column: 2; grid-row: 2; align-self: end; width: var(--tap); height: var(--tap); color: color-mix(in srgb,var(--ng-paper-note) 38%,transparent); }
.ng-star .ico { width: 25px; height: 25px; }
.ng-star[aria-pressed="true"] { color: var(--ng-paper-note); }
.ng-note-open { grid-column: 1; grid-row: 2; padding: var(--sp-4) 0 var(--sp-10) var(--sp-12); min-height: calc(var(--tap) * 2); }
.ng-note-open b { font-size: var(--fs-body); line-height: var(--lh-body); -webkit-line-clamp: 2; }
.ng-note-open > span { margin-top: var(--sp-4); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); -webkit-line-clamp: 1; }
.ng-note-open small { opacity: 1; margin-top: var(--sp-4); padding-top: 0; font-size: var(--fs-micro); color: var(--muted); }
.ng-note-open .ng-file-count { display: inline-flex; align-items: center; gap: var(--sp-4); margin-top: var(--sp-6); color: var(--ng-paper-note); }
.ng-file-count .ico { width: 18px; height: 18px; }
.ng-file-count em { font-style: normal; font-size: var(--fs-micro); }
.ng-board-bottom { justify-content: flex-end; }
.ng-note-open mark { color: var(--fg); background: color-mix(in srgb,var(--ng-paper-note) 18%,transparent); }
.ng-sticky[data-tone="important"] { border-color: color-mix(in srgb,var(--ng-paper-note) 32%,transparent); }
.ng-sticky[data-tone="important"] b { color: var(--ng-paper-note); }
.ng-drag-ghost { box-shadow: 0 12px 32px color-mix(in srgb,var(--bg) 75%,transparent); }

#note.nt-paper { background: var(--bg); }
#note .nt-top { color: var(--ng-paper-note); }
#note .nt-body { padding: var(--sp-12) var(--sp-20) var(--sp-24); }
#note .nt-tags, #note .nt-delrow, #note .nt-file-heading, #note #ntAppend, #note #ntTask { display: none; }
#note .nt-meta { margin: 0 0 var(--sp-16); font-size: var(--fs-micro); color: var(--muted); }
#note .nt-title { font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--fg); }
#note .nt-text { margin-top: var(--sp-12); min-height: 240px; font-size: var(--fs-lead); line-height: var(--lh-note); color: var(--fg); }
#note .nt-title:focus-visible, #note .nt-text:focus-visible { outline: none; }
#note .nt-add { padding: var(--sp-12) 0; border: 0; background: none; }
#note .nt-add-text { background: none; font-size: var(--fs-lead); color: var(--fg); }
#note .nt-bar, #note.is-new .nt-bar { display: flex; justify-content: space-between; padding: var(--sp-8) var(--sp-20) calc(var(--sp-8) + env(safe-area-inset-bottom,0px)); background: var(--glass); color: var(--ng-paper-note); border-top: 1px solid var(--glass-line); }
#note.is-new #ntMore { display: flex; }
#note #ntAdd, #note #ntDraw { display: grid; color: var(--ng-paper-note); }
#note #ntAdd .ico, #note #ntDraw .ico, #note #ntTags .ico { width: 27px; height: 27px; }
#note #ntTags { display: grid; color: var(--ng-paper-note); }
.nc-screen { z-index: 53; background: var(--bg); }
.nc-screen[hidden] { display: none; }
.nc-top { display: flex; align-items: center; justify-content: space-between; padding: env(safe-area-inset-top,0px) var(--sp-12) 0; flex: none; }
.nc-top button { min-height: var(--tap); padding: 0 var(--sp-8); color: var(--ng-paper-note); font-size: var(--fs-lead); }
.nc-top b { font-size: var(--fs-body); }
.nc-status { flex: none; min-height: 20px; text-align: center; font-size: var(--fs-small); color: var(--muted); padding: var(--sp-4) var(--sp-12); margin: 0; }
.nc-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.nc-frame { position: relative; flex: none; max-width: 100%; max-height: 100%; }
.nc-canvas { display: block; width: 100%; height: 100%; touch-action: none; background: var(--np-page); border-radius: var(--r-8); }
.nc-corner { position: absolute; width: var(--tap); height: var(--tap); transform: translate(-50%,-50%); touch-action: none; border-radius: var(--r-round); }
.nc-corner::after { content: ''; display: block; width: 18px; height: 18px; margin: auto; border-radius: var(--r-round); background: var(--ng-paper-note); box-shadow: 0 0 0 2px var(--bg); }
.nc-thumbs { flex: none; display: flex; gap: var(--sp-8); overflow-x: auto; padding: var(--sp-8) var(--sp-12); max-height: 78px; }
.nc-thumbs[hidden] { display: none; }
.nc-thumbs figure { margin: 0; flex: none; width: 42px; position: relative; }
.nc-thumbs img { width: 100%; height: 52px; object-fit: contain; }
.nc-thumbs figcaption { text-align: center; font-size: var(--fs-micro); }
.nc-tools { flex: none; display: flex; justify-content: center; gap: var(--sp-8); padding: var(--sp-8) var(--sp-12) calc(var(--sp-8) + env(safe-area-inset-bottom,0px)); }
.nc-tools button { min-height: var(--tap); padding: var(--sp-8) var(--sp-12); color: var(--fg); border: 1px solid var(--glass-line); border-radius: var(--r-pill); font-size: var(--fs-small); }
.nc-tools button[aria-pressed="true"] { color: var(--ng-paper-note); background: color-mix(in srgb,var(--ng-paper-note) 12%,transparent); }
.nc-screen button:disabled { opacity: .35; }
.nc-camera { position: relative; width: 100%; height: 100%; background: var(--bg); }
.nc-camera[hidden], .nc-frame[hidden], .nc-text-review[hidden] { display: none; }
.nc-camera video, .nc-outline { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.nc-outline { pointer-events: none; }
.nc-text-review { width: 100%; height: 100%; padding: var(--sp-12); }
.nc-text-review textarea { width: 100%; height: 100%; padding: var(--sp-12); color: var(--fg); background: var(--glass); border: 1px solid var(--glass-line); border-radius: var(--r-16); resize: none; font-size: var(--fs-lead); line-height: var(--lh-note); }
.nc-tools { flex-wrap: wrap; }