/* Menu geometry, palette and hover treatment copied from extension/note.css. */
:where(.note-context-menu) button{font:inherit;color:inherit;cursor:pointer;border:0;background:transparent;padding:8px 11px;border-radius:4px}
.note-context-menu svg{fill:currentColor;stroke:none}
.note-context-menu { position:fixed; z-index:100; width:232px; max-width:calc(100vw - 18px); max-height:calc(100vh - 8px); overflow:auto; overscroll-behavior:contain; pointer-events:auto; padding:6px; border:1px solid #d6d5d1; border-radius:10px; background:#fff; color:#302d25; box-shadow:0 6px 24px #24211526,0 2px 6px #24211512; font:13px/1.4 Plex,system-ui,sans-serif; }
.note-context-menu > button { display:flex; align-items:center; gap:10px; width:100%; min-height:36px; padding:8px 10px; text-align:left; }
.note-context-menu[data-state=closed] { pointer-events:none; }
.note-context-menu > button { position:relative; isolation:isolate; background:transparent; }
.note-context-menu > button::before { content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:#302d2510; opacity:0; transition:opacity 90ms ease; pointer-events:none; }
.note-context-menu svg { width:20px; height:20px; flex:none; }
.color-row { display:flex; justify-content:space-between; gap:0; padding:2px 2px 6px; }
.color-swatch { flex:1; min-width:0; min-height:36px; padding:4px 2px; display:grid; place-items:center; }
.color-swatch span { position:relative; display:grid; place-items:center; width:24px; height:24px; border:1px solid #302d2529; border-radius:50%; background:var(--swatch-color); color:transparent; font-size:15px; }
.color-swatch span::after { content:''; position:absolute; inset:-1px; border-radius:inherit; outline:2px solid #302d25; outline-offset:1px; opacity:0; transition:opacity 90ms ease; pointer-events:none; }
.color-swatch[aria-checked=true] span { color:var(--swatch-ink,#302d25); }
.color-swatch[aria-checked=true] span::after { opacity:1; }
.color-swatch:focus-visible { outline:none; }
.color-swatch:focus-visible span::after { opacity:1; transition:none; }
@media (hover:hover) and (pointer:fine) {
  .note-context-menu > button:not(:disabled):hover::before { opacity:1; }
  .color-swatch:hover { background:transparent; }
  .color-swatch:hover span::after { opacity:1; }
}
.note-context-menu > button:focus-visible::before { opacity:1; transition:none; }

@media (pointer:coarse) { .note-context-menu button { min-height:44px; } }
[hidden] { display: none !important; }

.note-context-menu > button:disabled { opacity:.4; cursor:default; }

.note-confirmation{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px 12px;background:color-mix(in srgb,var(--paper) 75%,transparent);backdrop-filter:blur(2px);border-radius:inherit;text-align:center}
.note-confirmation button{font:inherit;color:inherit;border:0;min-height:36px;padding:5px 18px;border-radius:999px;background:#302d2520}
.note-confirmation .danger{color:#8e201a;background:#b5362526}
.paper[data-color=charcoal] .note-confirmation button{background:#ffffff20}
.paper[data-color=charcoal] .note-confirmation .danger{color:#ffaaa1;background:#ff8c7826}
.paper[data-deleted=true]{display:none!important}
.paper-editor{font-size:var(--demo-note-size,14px);line-height:var(--demo-note-leading,20px)}
.paper-editor p,.paper-editor div,.paper-editor li{min-height:var(--demo-note-leading,20px)}
.demo-note-settings{width:340px;max-width:calc(100vw - 24px);max-height:calc(100svh - 24px);border:1px solid #d6d5d1;border-radius:14px;padding:22px;background:white;color:#302d25;box-shadow:0 12px 50px #0003;font:14px/1.5 Plex,system-ui,sans-serif}
.demo-note-settings::backdrop{background:#11172d66;backdrop-filter:blur(3px)}
.demo-note-settings header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.demo-note-settings h2{font-size:18px;font-weight:400;margin:0}
.demo-note-settings p{font-size:12px;color:#747168;margin:2px 0 22px}
.demo-note-settings button{color:inherit;border:0;border-radius:6px;background:transparent}
.demo-note-settings .settings-close{font:24px system-ui;min-width:36px;min-height:36px}
.demo-note-settings fieldset{padding:0;margin:0 0 16px;border:0}
.demo-note-settings legend,.demo-note-settings label{display:block;font-size:13px;margin-bottom:8px}
.settings-colors{display:flex}
.settings-colors .color-swatch{min-height:44px}
.settings-colors [aria-pressed=true] span::after{opacity:1}
.demo-note-settings select{font:16px Plex,system-ui,sans-serif;background:#faf9f7;color:#302d25;border:1px solid #dedbd2;border-radius:6px;padding:9px 12px;width:100%;min-height:44px}
.demo-note-settings .settings-done{display:block;margin-top:22px;min-height:44px;width:100%;background:#302d25;color:#fff}
#show-hidden-notes{font-size:10px;white-space:nowrap}
@media(max-width:700px){.trial-paper .paper-editor{font-size:var(--demo-note-size,16px);line-height:var(--demo-note-leading,23px)}.demo-bottom:has(#show-hidden-notes:not([hidden])){flex-wrap:wrap}.demo-bottom:has(#show-hidden-notes:not([hidden])) .playback-controls{width:100%;justify-content:flex-end}}