.fpd-notes-panel[hidden], .fpd-highlight-palette[hidden] { display: none !important; }
.fpd-notes-panel, .fpd-highlight-palette { box-sizing: border-box; background: var(--afp-panel, #fff); color: var(--afp-text, #171717); border: 1px solid var(--afp-border, #777); }
.fpd-notes-panel { position: fixed; margin: 0; left: auto; max-width: none; max-height: none; z-index: 10020; top: 0; bottom: 0; right: 0; width: min(100%, 420px); height: 100vh; overflow: auto; padding: 1rem; box-shadow: -2px 0 12px #0004; }
.admin-bar .fpd-notes-panel { top: 32px; height: calc(100vh - 32px); }
.fpd-notes-panel h2 { margin: 1rem 0; font-size: 1.5rem; color: inherit; }
.fpd-notes-panel p, .fpd-notes-panel label, .fpd-notes-panel blockquote { color: inherit; font-size: 1rem; }
.fpd-notes-panel button, .fpd-notes-toggle { background: var(--afp-skin-button-bg, #173c70); color: var(--afp-skin-button-text, #fff); border: 1px solid var(--afp-border, #777); min-height: 44px; padding: 0.5rem 0.75rem; margin: 0.25rem; cursor: pointer; font: inherit; }
.fpd-notes-panel textarea { box-sizing: border-box; display: block; width: 100%; min-height: 6rem; padding: 0.75rem; background: var(--afp-skin-control-bg, #fff); color: var(--afp-text, #171717); border: 1px solid var(--afp-border, #777); font: inherit; }
.fpd-note-item { margin: 1rem 0; border-top: 1px solid var(--afp-border, #777); padding-top: 1rem; overflow-wrap: anywhere; }
.fpd-note-item blockquote { margin: 0 0 1rem; padding: 0.5rem; border-left: 3px solid var(--afp-readable-accent, #173c70); white-space: pre-wrap; }
.fpd-notes-toggle { position: fixed; bottom: 1rem; right: 1rem; z-index: 10010; border-radius: 0.4rem; }
.fpd-highlight-palette { position: absolute; z-index: 10030; width: 272px; display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-radius: 0.4rem; }
.fpd-highlight-palette button { color: #000 !important; border: 1px solid #555; padding: 4px; min-height: 44px; font: 12px sans-serif; cursor: pointer; }
.fpd-notes-panel :focus-visible, .fpd-notes-toggle:focus-visible, .fpd-highlight-palette :focus-visible { outline: 3px solid var(--afp-readable-accent, #173c70); outline-offset: 2px; }
@media (max-width: 782px) { .admin-bar .fpd-notes-panel { top: 46px; height: calc(100vh - 46px); } }

.fpd-notes-panel::backdrop { background: #0005; }