@import url("/shared/ui-styles/tokens.css");
@import url("/shared/ui-styles/fonts.css");
@import url("/shared/ui-styles/header.css");
@import url("/shared/ui-styles/buttons.css");
@import url("/shared/ui-styles/modal.css");
@import url("/shared/ui-styles/form.css");
@import url("/shared/ui-styles/tabs.css");
@import url("/shared/ui-styles/account.css");
@import url("/shared/ui-styles/borders.css");
@import url("/shared/ui-styles/utilities.css");
@import url("/shared/ui-styles/icons.css");
@import url("/shared/ui-styles/base.css");
@import url("/shared/ui-styles/gadgetui.css");
@import url("/shared/ui-styles/systemMessage.css");

body {
    /* bg / color / overflow / display:grid / margin come from shared base.css;
       these are the note-specific overrides (serif identity font, dynamic vh,
       auto-sized header row). */
    font-family: "Linux Libertine O Regular", serif;
    height: 100dvh;
    grid-template-rows: auto 1fr;
    padding: 0;
}

/* Main Layout */
#mainLayout {
    overflow-y: auto;
    padding: 0 16px;
}

#content {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px 0;
}

/* Note List */
.note-list {
    padding: 0;
}

.note-list-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.note-list-toolbar h2 {
    margin: 0;
    font-size: 1.3rem;
}

/* Note list: search + filter bar */
.note-filterbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.note-search {
    position: relative;
    flex: 1 1 220px;
    display: flex;
    align-items: center;
}

/* The magnifier sits inside the field, so the input reserves room for it. */
.note-search .feather {
    position: absolute;
    left: 8px;
    width: 16px;
    height: 16px;
    color: var(--fore-color-secondary);
    pointer-events: none;
}

.note-search-input {
    width: 100%;
    padding: 6px 10px 6px 30px;
    border: 1px solid var(--border-color-primary);
    border-radius: 4px;
    background-color: var(--card-back-color);
    color: var(--fore-color);
    font-size: 0.9rem;
    font-family: inherit;
}

.note-search-input:focus {
    border-color: var(--border-color-input);
    outline: none;
}

.note-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: 1px solid var(--border-color-primary);
    color: var(--fore-color-secondary);
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    white-space: nowrap;
}

.note-filter-btn .feather {
    width: 14px;
    height: 14px;
}

.note-filter-btn:hover {
    border-color: var(--highlight-color);
}

.note-filter-btn.on {
    border-color: var(--highlight-color);
    color: var(--fore-color);
    background-color: var(--secondary-back-color);
}

.note-activetag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--fore-color-secondary);
}

.note-activetag a {
    cursor: pointer;
}

/* Tag cloud + chips. The same .note-tag chip is used in the cloud, on the
   cards and in the editor, so it reads as one thing everywhere. */
.note-tagcloud {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.note-tagcloud-head {
    font-size: 0.8rem;
    color: var(--fore-color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-right: 2px;
}

.note-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background-color: var(--secondary-back-color);
    border: 1px solid transparent;
    color: var(--fore-color);
    border-radius: 12px;
    padding: 2px 10px;
    font-size: 0.78rem;
    cursor: pointer;
}

.note-tag:hover {
    border-color: var(--highlight-color);
}

.note-tag.on {
    border-color: var(--highlight-color);
    color: var(--highlight-color);
}

.note-tag em {
    font-style: normal;
    color: var(--fore-color-secondary);
    font-size: 0.72rem;
}

/* Favorite star. Off-state is an outline so a list of unstarred notes
   doesn't read as a wall of yellow. */
.note-fav,
.note-fav-btn {
    background: none;
    border: none;
    color: var(--fore-color-secondary);
    opacity: 0.4;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0 4px 0 0;
}

.note-fav:hover,
.note-fav-btn:hover {
    opacity: 1;
}

.note-fav.on,
.note-fav-btn.on {
    color: #e5a50a;
    opacity: 1;
}

.note-fav-btn {
    border: 1px solid var(--border-color-primary);
    border-radius: 3px;
    padding: 4px 10px;
}

/* Buttons */
.btn-primary {
    background-color: var(--button-primary-back-color);
    color: var(--button-primary-fore-color);
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
}

.btn-primary:hover {
    background-color: var(--button-primary-hover-back-color);
}

.btn-back {
    background: none;
    border: 1px solid var(--border-color-primary);
    color: var(--fore-color);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
}

.btn-back:hover {
    border-color: var(--border-color-primary-hover);
}

.btn-small {
    background: none;
    border: 1px solid var(--border-color-primary);
    color: var(--fore-color);
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.8rem;
}

.btn-small:hover {
    border-color: var(--highlight-color);
}

/* Disabled toolbar buttons (e.g. undo/redo with nothing to undo). */
.btn-small:disabled {
    opacity: 0.35;
    cursor: default;
}
.btn-small:disabled:hover {
    border-color: var(--border-color-primary);
}

.btn-danger {
    background: none;
    border: 1px solid var(--warning-color);
    color: var(--warning-color);
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
}

.btn-danger:hover {
    background-color: var(--warning-color);
    color: #fff;
}

/* Note Cards */
.notes-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.note-card {
    background-color: var(--card-back-color);
    border: 1px solid var(--border-color-primary);
    border-radius: 6px;
    padding: 12px 16px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.note-card:hover {
    border-color: var(--highlight-color);
}

.note-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.note-title {
    font-size: 1.05rem;
    font-weight: 500;
}

.note-badge {
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
}

.note-badge-public {
    background-color: #2e7d32;
    color: #fff;
}

.note-badge-shared {
    background-color: #1565c0;
    color: #fff;
}

.note-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 6px;
}

.note-meta {
    display: flex;
    gap: 16px;
    font-size: 0.8rem;
    color: var(--fore-color-secondary);
}

.note-empty,
.note-loading {
    text-align: center;
    padding: 40px;
    color: var(--fore-color-secondary);
    font-size: 1rem;
}

/* Note Editor */
.note-editor {
    padding: 0;
}

.note-editor-loading {
    text-align: center;
    padding: 40px;
    color: var(--fore-color-secondary);
}

.note-editor-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.note-editor-title {
    margin-bottom: 10px;
}

/* Editor tag row: chips plus a free-text field that commits on Enter/comma. */
.note-tags-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.note-tags-chips {
    display: contents;
}

.note-tags-bar .note-tag {
    cursor: default;
}

/* mini.css gives every <button> a margin and a min-height; neither is a
   conflict our class rule would win, so reset them explicitly or the ✕ floats
   away from its label and the chip grows taller than the ones in the list. */
.note-tag-remove {
    background: none;
    border: none;
    color: var(--fore-color-secondary);
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
    padding: 0;
    margin: 0;
    min-height: 0;
    height: auto;
}

.note-tag-remove:hover {
    color: var(--warning-color);
}

.note-tag-input {
    flex: 0 1 180px;
    background: transparent;
    border: none;
    border-bottom: 1px dashed var(--border-color-primary);
    color: var(--fore-color);
    font-family: inherit;
    font-size: 0.8rem;
    padding: 2px 4px;
    outline: none;
}

.note-tag-input:focus {
    border-bottom-color: var(--highlight-color);
    border-bottom-style: solid;
}

.note-title-input {
    width: 100%;
    font-size: 1.5rem;
    font-weight: 600;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--border-color-primary);
    color: var(--fore-color);
    padding: 8px 0;
    outline: none;
    font-family: inherit;
}

.note-title-input:focus {
    border-bottom-color: var(--highlight-color);
}

.visibility-select {
    background-color: var(--input-back-color);
    color: var(--fore-color);
    border: 1px solid var(--border-color-primary);
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 0.85rem;
}

/* Sections */
.note-sections {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

.section-block {
    border: 1px solid var(--border-color-primary);
    border-radius: 6px;
    overflow: hidden;
}

/* Accordion collapse: a collapsed section shows only its header bar —
 * everything after the header (editor area, preview, canvas, toolbar) is
 * hidden. Applied per-block by the editor via _openSectionID.
 * !important because togglePreview toggles inline `display` on the direct
 * children (.section-editor-area / .section-preview); without it, an inline
 * `display:block` from having previewed would beat this rule and the section
 * could no longer collapse until a reload. */
.section-block--collapsed > :not(.section-header) {
    display: none !important;
}
.section-block--collapsed .section-header {
    border-bottom: none;
}

/* Caret that toggles a section open/closed in accordion mode. */
.section-collapse-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    cursor: pointer;
}

/* Drag handle for reordering sections. Dragging is enabled only while the
 * pointer is over this handle (see noteeditor rendered()), so it never
 * interferes with selecting text inside a section's editor. */
.section-drag-handle {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Roomy enough to grab with a finger on touch devices. */
    padding: 6px;
    color: var(--fore-color-secondary);
    cursor: grab;
    touch-action: none;
}
.section-drag-handle:active {
    cursor: grabbing;
}
.section-block.section-dragging {
    opacity: 0.5;
}

/* "Copy section to…" dialog (copySection). */
.copy-section-dialog {
    max-height: 70vh;
    overflow-y: auto;
    padding: 2px;
    width: 95%;
    justify-items: center;
}
.copy-section-intro {
    margin: 0 0 10px;
    font-size: 0.9em;
    color: var(--fore-color-secondary, #555);
}
.copy-section-dialog .copy-newnote {
    width: 97%;
    margin-bottom: 8px;
}
.copy-section-dialog .copy-search {
    width: 98%;
    box-sizing: border-box;
    margin-bottom: 8px;
    padding: 6px 8px;
}
.copy-target-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 95%;
}
.copy-target-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    background: var(--card-back-color, #fff);
    border: 1px solid var(--border-color-primary, #ccc);
    border-radius: 4px;
    cursor: pointer;
    color: var(--card-color);
}
.copy-target-row:hover {
    border-color: var(--highlight-color);
}
.copy-target-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.copy-target-current {
    flex: 0 0 auto;
    font-size: 0.8em;
    color: var(--fore-color-secondary, #777);
}
.copy-empty {
    color: var(--fore-color-secondary, #777);
    font-size: 0.9em;
}

/* Rendered bibliography (citeproc output). csl-entry is one reference; the
 * hanging indent is the conventional bibliography layout. */
.rendered-references .csl-bib-body,
.references-section-preview .csl-bib-body {
    line-height: 1.5;
}
.csl-entry {
    margin-bottom: 0.6em;
    padding-left: 2em;
    text-indent: -2em;
}
.csl-entry:last-child {
    margin-bottom: 0;
}
.references-empty,
.references-error {
    color: var(--fore-color-secondary, #777);
    font-style: italic;
    font-size: 0.9em;
}

/* References (bibliography) editor section */
.references-editor {
    padding: 12px;
}
.references-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.references-style-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9em;
}
.references-style-select,
.reference-form input,
.reference-form select,
.reference-form textarea,
.reference-lookup-input {
    padding: 5px 8px;
    box-sizing: border-box;
    border: 1px solid var(--border-color-primary);
    border-radius: 4px;
    background: var(--input-back-color);
    color: var(--fore-color);
    font-family: inherit;
}
.references-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.reference-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border: 1px solid var(--border-color-primary);
    border-radius: 4px;
    background: var(--card-back-color);
}
.reference-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.9em;
}
.reference-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
}
.references-preview-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fore-color-secondary);
    margin: 8px 0 6px;
}

/* Add/edit source dialog */
.reference-dialog {
    max-height: 75vh;
    overflow-y: auto;
    padding: 2px;
}
.reference-lookup {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.reference-lookup-input {
    flex: 1;
    min-width: 160px;
}
.reference-lookup-status {
    flex-basis: 100%;
    font-size: 0.85em;
    color: var(--fore-color-secondary);
}
.reference-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.reference-form label {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.85em;
    color: var(--fore-color-secondary);
}
.reference-dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 14px;
}

/* Insert-citation picker */
.citation-picker {
    max-height: 70vh;
    overflow-y: auto;
    padding: 2px;
}
.citation-picker-search {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    padding: 6px 8px;
    border: 1px solid var(--border-color-primary);
    border-radius: 4px;
    background: var(--input-back-color);
    color: var(--fore-color);
}
.citation-picker-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.citation-pick-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    text-align: left;
    padding: 6px 10px;
    background: var(--card-back-color, #fff);
    border: 1px solid var(--border-color-primary, #ccc);
    border-radius: 4px;
    cursor: pointer;
}
.citation-pick-row:hover {
    border-color: var(--highlight-color);
}
.citation-pick-key {
    font-family: "Courier New", monospace;
    font-size: 0.85em;
    color: var(--highlight-color, #1565c0);
}
.citation-pick-label {
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Inline "[@" citation autocomplete menu (gadget-ui Autosuggest inline mode) */
.gadgetui-autosuggest-menu {
    background: var(--card-back-color);
    color: var(--fore-color);
    border: 1px solid var(--border-color-primary);
    font-size: 0.9em;
}
.gadgetui-autosuggest-menu-inline {
    max-height: 240px;
    overflow-y: auto;
    min-width: 220px;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.gadgetui-autosuggest-item {
    display: block;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
}
.gadgetui-autosuggest-item.ui-state-focus,
.gadgetui-autosuggest-item:hover {
    background: var(--tab-back-color);
}
.cite-suggest-key {
    font-family: "Courier New", monospace;
    color: var(--highlight-color);
}
.cite-suggest-label {
    color: var(--fore-color-secondary);
    font-size: 0.9em;
}

/* Import references (.bib/RIS) dialog */
.import-references-dialog {
    max-height: 78vh;
    overflow-y: auto;
    padding: 2px;
}
.import-intro {
    margin: 0 0 10px;
    font-size: 0.9em;
    color: var(--fore-color-secondary, #555);
}
.import-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.import-content {
    width: 100%;
    box-sizing: border-box;
    font-family: "Courier New", monospace;
    font-size: 0.85em;
    padding: 8px;
    border: 1px solid var(--border-color-primary);
    border-radius: 4px;
    background: var(--input-back-color);
    color: var(--fore-color);
    resize: vertical;
}
.import-format {
    padding: 5px 8px;
    border: 1px solid var(--border-color-primary);
    border-radius: 4px;
    background: var(--input-back-color);
    color: var(--fore-color);
}
.import-status {
    min-height: 1.2em;
    margin-top: 6px;
    font-size: 0.85em;
    color: var(--fore-color-secondary);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    background-color: var(--tab-back-color);
    border-bottom: 1px solid var(--border-color-primary);
}

/* Left side of the header: type badge + the editable section title.
 * flex:1 + min-width:0 lets the title input grow and truncate rather
 * than shoving the action buttons off the row. */
.section-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

/* Compact per-type glyph (was an uppercase text badge). Kept narrow so the
 * title input gets the horizontal space, especially on markdown sections
 * that carry many action buttons. The type name lives in its title/aria. */
.section-type-label {
    color: var(--fore-color-secondary);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
}
.section-type-label svg {
    width: 16px;
    height: 16px;
}

.section-title-input {
    flex: 1;
    min-width: 0;
    background-color: transparent;
    color: var(--fore-color);
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 0.95rem;
    font-weight: 600;
    outline: none;
}

.section-title-input:hover {
    border-color: var(--border-color-primary);
}

.section-title-input:focus {
    border-color: var(--highlight-color);
    background-color: var(--input-back-color);
}

.section-title-static {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--fore-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.section-actions {
    display: flex;
    gap: 3px;
    align-items: center;
    flex: 0 0 auto;
}

/* Auto-save status indicator. Updates in place via setSaveStatus()
 * after each save/dirty event — never via setState, so the surrounding
 * editor doesn't re-render and steal focus mid-type. */
/* Sits at the end of the left group (after the title). Sized to its own text
 * — 0 width when idle — so the title input reclaims the space instead of a
 * fixed reserve; when a status shows, the flexible title yields, not the
 * action buttons. */
.section-savestatus {
    font-size: 12px;
    color: var(--fore-color-secondary, #888);
    flex: 0 0 auto;
    min-width: 0;
    white-space: nowrap;
    transition: color 0.2s;
}
.section-savestatus.status-saving {
    color: var(--fore-color-secondary, #888);
    font-style: italic;
}
.section-savestatus.status-saved {
    color: #2e7d32;
}
.section-savestatus.status-failed {
    color: #c62828;
    font-weight: 600;
}
.section-savestatus.status-dirty {
    color: var(--fore-color-secondary, #888);
}

/* Section history Dialog — rendered inside a gadget-ui Dialog body.
 * Each row is "metadata on the left, restore button on the right". */
.section-history-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 4px;
    max-height: 60vh;
    overflow-y: auto;
}
.section-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border: 1px solid var(--border-color-primary, rgba(0, 0, 0, 0.12));
    border-radius: 4px;
    background: var(--main-bg-color);
}
.section-history-meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.section-history-when {
    font-weight: 600;
}
.section-history-latest {
    font-size: 11px;
    color: var(--button-primary-fore-color);
    background: var(--button-primary-back-color);
    padding: 1px 6px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.section-history-len {
    font-size: 12px;
    color: var(--fore-color-secondary, #888);
}
.section-history-restore {
    flex: 0 0 auto;
}
.section-history-empty {
    color: var(--fore-color-secondary, #888);
    text-align: center;
    margin: 24px 0;
}

.section-textarea {
    width: 100%;
    min-height: 150px;
    background-color: var(--input-back-color);
    color: var(--fore-color);
    border: none;
    padding: 12px;
    font-family: "Courier New", monospace;
    font-size: 0.9rem;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}

/* Editor height toggle (toggleSectionHeight). The tall height is set
 * inline from JS; this just smooths the grow/shrink and keeps content
 * scrollable within the expanded box. */
.section-textarea.section-editor-expanded,
.wysiwyg-editor.section-editor-expanded {
    transition: height 0.15s ease;
    overflow-y: auto;
}

/* When a section is maximized, hide the others so the maximized editor
 * gets the full viewport regardless of its position in the note. The
 * "Add Section" bar (sibling right after .note-sections) is hidden too
 * so nothing competes for the vertical space. */
.note-sections.has-maximized .section-block:not(.section-block--maximized) {
    display: none;
}
.note-sections.has-maximized + .add-section-bar {
    display: none;
}

/* ── Full-screen section ──────────────────────────────────────────────
 * "Expanded" grows the editor to the bottom of the viewport but keeps the
 * page around it; this lifts the section clean out of the page. A fixed,
 * opaque overlay rather than the Fullscreen API, because the image frame,
 * media picker and gadget-ui dialogs are all mounted on <body> and the
 * browser's top layer would render every one of them invisible.
 *
 * z-index 30 sits above the page but below the toast (1000), dialogs (2000)
 * and the pickers (10000), so anything opened from inside the full-screen
 * editor still appears over it. The image frame is raised past this — see
 * its own rule.
 *
 * The whole layout is CSS: the block becomes a flex column, the header keeps
 * its natural height, and the editor takes the rest. Nothing has to be
 * re-measured, so a re-render restores it from the class alone. */
.section-block--fullscreen {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
    background-color: var(--main-bg-color, var(--back-color));
}

.section-block--fullscreen > .section-header {
    flex: 0 0 auto;
    padding-left: 12px;
    padding-right: 12px;
}

.section-block--fullscreen > .section-editor-area {
    flex: 1 1 auto;
    /* min-height:0 is what lets a flex item actually shrink to its container
     * instead of holding its content height — without it the editor pushes
     * its own scrollbar off the bottom of the screen. */
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.section-block--fullscreen .wysiwyg-toolbar {
    flex: 0 0 auto;
}

.section-block--fullscreen .wysiwyg-editor {
    flex: 1 1 auto;
    min-height: 0;
    /* Beat the inline height the expanded view sets, in case a re-render
     * lands between the two modes. */
    height: auto;
    overflow-y: auto;
}

/* Sized by percentage rather than flex, unlike the rich-text editor above:
 * togglePreview writes an inline `display: block` onto the markdown editor
 * area, which knocks the textarea out of flex layout and collapsed it to a
 * few lines. The area is a flex item of the block either way, so its height
 * is definite and 100% fills it whichever display it is wearing. */
.section-block--fullscreen .section-textarea {
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
    /* mini.css gives textareas a universal margin; at height:100% that margin
     * is added on top and pushes the last lines past the bottom edge. */
    margin: 0;
    overflow-y: auto;
    /* The box is the screen now; a drag-resize handle would only fight it. */
    resize: none;
}

/* Markdown preview open in full screen: share the height with the editor
 * rather than letting either one run off the bottom. */
.section-block--fullscreen > .section-preview {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* ── Drawings in full screen ──────────────────────────────────────────
 * A canvas has a fixed 1600x900 coordinate space, so it isn't resized —
 * it's rendered larger. getCanvasPoint() divides by the displayed size, so
 * strokes land exactly where the pointer is at any scale and the saved
 * drawing is unchanged. The default rule is width:100%/height:auto, which
 * would overflow a height-constrained box; here the canvas is centred and
 * fitted, keeping its aspect ratio.
 *
 * Full screen only — drawings deliberately have no expanded view, because a
 * 16:9 surface in a fixed-width column is width-bound and extra height gains
 * it nothing. Widening the viewport is what helps. */
.section-block--fullscreen .canvas-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* The grid marks the drawing surface. Once the canvas is letterboxed the
     * wrapper is bigger than the surface, so the pattern moves onto the
     * canvas itself (below) rather than tiling the empty margins. */
    background-color: var(--card-back-color);
    background-image: none;
}

.section-block--fullscreen .note-canvas {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    /* The canvas bitmap is transparent, so this shows through wherever the
     * author hasn't drawn — same surface the wrapper normally provides. */
    background-color: #ffffff;
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    border: 1px solid var(--border-color-primary);
}

.section-preview {
    padding: 12px;
    background-color: var(--card-back-color);
    min-height: 50px;
}

.section-preview h1,
.section-preview h2,
.section-preview h3 {
    margin-top: 0.5em;
}

.section-preview code {
    background-color: var(--tab-back-color);
    padding: 2px 6px;
    border-radius: 3px;
}

.section-preview pre {
    background-color: var(--tab-back-color);
    padding: 12px;
    border-radius: 4px;
    overflow-x: auto;
}

.section-preview blockquote {
    border-left: 3px solid var(--highlight-color);
    padding-left: 12px;
    color: var(--fore-color-secondary);
}

/* WYSIWYG Editor */
.wysiwyg-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    align-items: center;
    padding: 4px 4px;
    background-color: var(--tab-back-color);
    border-bottom: 1px solid var(--border-color-primary);
}

.wysiwyg-btn {
    background-color: transparent;
    color: var(--fore-color);
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 2px 3px;
    font-size: 0.85rem;
    min-width: 20px;
    cursor: pointer;
    line-height: 1;
    margin: 2px 0;
}

.wysiwyg-btn:hover {
    background-color: var(--card-back-color);
    border-color: var(--border-color-primary);
}

.wysiwyg-sep {
    width: 1px;
    height: 18px;
    background-color: var(--border-color-primary);
    margin: 0 1px;
}

.wysiwyg-editor {
    width: 100%;
    min-height: 150px;
    background-color: var(--input-back-color);
    color: var(--fore-color);
    padding: 12px;
    font-size: 0.95rem;
    outline: none;
    box-sizing: border-box;
    overflow-y: auto;
}

.wysiwyg-editor:empty:before {
    content: attr(data-placeholder);
    color: var(--fore-color-secondary);
    pointer-events: none;
}

.wysiwyg-editor h1,
.wysiwyg-editor h2,
.wysiwyg-editor h3 {
    margin-top: 0.5em;
}

.wysiwyg-editor blockquote {
    border-left: 3px solid var(--highlight-color);
    padding-left: 12px;
    margin-left: 0;
    color: var(--fore-color-secondary);
}

.wysiwyg-editor pre {
    background-color: var(--tab-back-color);
    padding: 12px;
    border-radius: 4px;
    overflow-x: auto;
    font-family: "Courier New", monospace;
}

.wysiwyg-editor a {
    color: var(--highlight-color);
}

/* Font-size dropdown */
.wysiwyg-size-select {
    background-color: var(--input-back-color);
    color: var(--fore-color);
    border: 1px solid var(--border-color-primary);
    border-radius: 3px;
    font-size: 0.8rem;
    padding: 1px 4px;
    margin: 2px 0;
    /* Width follows the widest option, but the native caret is drawn inside
       the box — a tight max-width clips the label behind it. */
    width: auto;
    min-width: 6rem;
    max-width: 8rem;
    cursor: pointer;
}

/* Font-face picker — a pop-over rather than a <select> so each family can
   be previewed in its own face. */
.wysiwyg-font-btn {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-width: 8rem;
    max-width: 12rem;
    margin: 2px 0;
    padding: 1px 4px;
    background-color: var(--input-back-color);
    color: var(--fore-color);
    border: 1px solid var(--border-color-primary);
    border-radius: 3px;
    font-size: 0.8rem;
    cursor: pointer;
}

.wysiwyg-font-btn:hover {
    border-color: var(--highlight-color);
}

.wysiwyg-font-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* The label carries the selected family's own face, so it must not wrap or
   push the caret out of the button. */
.wysiwyg-font-current {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

/* Fixed for the same reason as the colour panels above; placement and a
   viewport-aware max-height come from _wysiwygPlacePanel. */
.wysiwyg-font-panel {
    position: fixed;
    z-index: 20;
    width: 15rem;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
    background-color: var(--card-back-color, var(--input-back-color));
    border: 1px solid var(--border-color-primary);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.wysiwyg-font-group + .wysiwyg-font-group {
    border-top: 1px solid var(--border-color-primary);
    margin-top: 4px;
    padding-top: 4px;
}

.wysiwyg-font-group-label {
    padding: 2px 6px;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--fore-color-secondary);
}

/* Each entry renders in the family it applies. Size is generous because
   the point is to judge the face, and the line box is fixed so wildly
   different metrics (Bebas vs Caveat) don't make the list jump. */
.wysiwyg-font-item {
    display: block;
    width: 100%;
    padding: 3px 6px;
    background: none;
    border: none;
    border-radius: 3px;
    color: var(--fore-color);
    font-size: 1.05rem;
    line-height: 1.6;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

.wysiwyg-font-item:hover {
    background-color: var(--secondary-back-color, rgba(127, 127, 127, 0.18));
}

.wysiwyg-font-item.is-active {
    background-color: var(--highlight-color);
    color: var(--highlight-fore-color, #fff);
}

/* Text-colour / highlight toggle buttons */
.wysiwyg-color-a {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: #dc2626;
    text-decoration-thickness: 2px;
}

/* Colour swatch pop-over panels. Fixed, not absolute: .section-block sets
   overflow:hidden and is only as tall as the section, so an absolutely
   positioned panel is clipped. Placement is set in _wysiwygPlacePanel. */
.wysiwyg-color-panel {
    position: fixed;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    width: max-content;
    max-width: 240px;
    padding: 6px;
    margin-top: 2px;
    background-color: var(--card-back-color, var(--input-back-color));
    border: 1px solid var(--border-color-primary);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.wysiwyg-swatch {
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--border-color-primary);
    border-radius: 3px;
    cursor: pointer;
    line-height: 1;
}

.wysiwyg-swatch:hover {
    outline: 2px solid var(--highlight-color);
    outline-offset: 1px;
}

/* "No highlight" swatch — transparent with a diagonal indicator glyph */
.wysiwyg-swatch-none {
    background-color: transparent;
    color: var(--fore-color-secondary);
    font-size: 0.9rem;
}

/* ── Embedded images ──────────────────────────────────────────────────
 * An image inserted from the media library is a <figure> carrying its own
 * width (a % of the column, so it stays responsive) and a wrap class. The
 * same rules have to hold on every surface the note is rendered on — the
 * editor, the section preview, the public note and the PDF — or the author's
 * layout only exists while they're editing. The single class beats mini.css's
 * bare `figure { margin: var(--universal-margin) }`.
 * The runtime resize/caption UI is .note-imgframe below; see
 * client/assets/js/view/imageframe.js. */
.note-figure {
    display: block;
    max-width: 100%;
    padding: 0;
    margin: 0.6em 0;
}

.note-figure > img {
    display: block;
    width: 100%;
    /* Overridden by an inline height when the author drags a top/bottom
     * handle — those stretch one axis on purpose. */
    height: auto;
    max-width: 100%;
}

/* Wrap modes. Floats are what make the prose run alongside the image; the
 * asymmetric margin keeps the text off the picture on the wrapped side only. */
.note-figure--left {
    float: left;
    margin: 0.35em 1.2em 0.7em 0;
}

.note-figure--right {
    float: right;
    margin: 0.35em 0 0.7em 1.2em;
}

.note-figure--center {
    float: none;
    clear: both;
    margin: 0.9em auto;
}

.note-figure--full {
    float: none;
    clear: both;
    /* Full width is a placement, not a size — pin it over any inline width
     * left behind by an earlier resize. */
    width: 100% !important;
    margin: 0.9em 0;
}

.note-figure > figcaption {
    padding: 5px 2px 0;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--fore-color-secondary);
}

.note-figure--center > figcaption,
.note-figure--full > figcaption {
    text-align: center;
}

/* Floated figures overflow their block, so without this the next section (or
 * the editor's own border) rides up alongside the image. */
.wysiwyg-editor::after,
.rendered-wysiwyg::after,
.section-preview::after {
    content: "";
    display: block;
    clear: both;
}

/* An empty caption still has to be clickable and has to say what it's for. */
.wysiwyg-editor .note-figure > figcaption {
    min-height: 1.3em;
    outline: none;
}

.wysiwyg-editor .note-figure > figcaption:empty::before {
    content: attr(data-placeholder);
    color: var(--fore-color-secondary);
    opacity: 0.65;
}

.wysiwyg-editor .note-figure > img {
    cursor: pointer;
}

/* A framed figure IS the document selection — that's what makes Backspace
 * delete it and Ctrl-C copy it — but the browser's selection wash turns the
 * whole picture blue. The frame is the selection indicator; hide the paint. */
.wysiwyg-editor .note-figure--selected::selection,
.wysiwyg-editor .note-figure--selected ::selection {
    background-color: transparent;
}

/* ── Image selection frame ────────────────────────────────────────────
 * Lives in <body> (never inside the contenteditable, where it would be saved
 * as note content) and is positioned over the selected image in page
 * coordinates. Above the full-screen section layer (z-index 30): the frame
 * lives on <body>, so unlike the font/colour pop-overs — which are inside the
 * section and travel with it — it would otherwise be painted underneath a
 * full-screen editor. Still below the toast, dialogs and pickers. */
.note-imgframe {
    position: absolute;
    z-index: 35;
    /* Only the handles and the toolbar are interactive; clicks anywhere else
     * belong to the image underneath. */
    pointer-events: none;
}

.note-imgframe[hidden] {
    display: none;
}

.note-imgframe-box {
    position: absolute;
    inset: 0;
    border: 1px solid var(--highlight-color, #1e88e5);
    /* An inner white hairline keeps the frame visible over a dark image. */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.note-imgframe-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    background-color: var(--card-back-color, #fff);
    border: 1px solid var(--highlight-color, #1e88e5);
    border-radius: 2px;
    pointer-events: auto;
    /* Stops the browser panning the page instead of resizing on touch. */
    touch-action: none;
}

.note-imgframe-handle--nw { top: 0; left: 0; cursor: nwse-resize; }
.note-imgframe-handle--n { top: 0; left: 50%; cursor: ns-resize; }
.note-imgframe-handle--ne { top: 0; left: 100%; cursor: nesw-resize; }
.note-imgframe-handle--e { top: 50%; left: 100%; cursor: ew-resize; }
.note-imgframe-handle--se { top: 100%; left: 100%; cursor: nwse-resize; }
.note-imgframe-handle--s { top: 100%; left: 50%; cursor: ns-resize; }
.note-imgframe-handle--sw { top: 100%; left: 0; cursor: nesw-resize; }
.note-imgframe-handle--w { top: 50%; left: 0; cursor: ew-resize; }

/* Keep the resize cursor while the pointer wanders off the handle mid-drag. */
body.note-imgframe-resizing {
    user-select: none;
}

.note-imgframe-toolbar {
    position: absolute;
    left: 0;
    top: -38px;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background-color: var(--card-back-color);
    border: 1px solid var(--border-color-primary);
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    pointer-events: auto;
    white-space: nowrap;
}

/* Flipped below when the image sits too close to the top of the viewport. */
.note-imgframe--below .note-imgframe-toolbar {
    top: 100%;
    margin-top: 6px;
}

.note-imgframe-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    color: var(--fore-color);
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 3px;
    margin: 0;
    cursor: pointer;
    line-height: 1;
}

.note-imgframe-btn:hover {
    background-color: var(--tab-back-color);
    border-color: var(--border-color-primary);
}

.note-imgframe-btn.is-active {
    background-color: var(--highlight-color);
    border-color: var(--highlight-color);
    color: var(--secondary-back-color, #fff);
}

.note-imgframe-btn svg {
    width: 15px;
    height: 15px;
}

.note-imgframe-sep {
    width: 1px;
    height: 16px;
    margin: 0 2px;
    background-color: var(--border-color-primary);
}

/* Live pixel readout while dragging a handle. */
.note-imgframe-size {
    position: absolute;
    right: 0;
    bottom: -20px;
    padding: 1px 5px;
    font-size: 0.7rem;
    color: var(--fore-color-secondary);
    background-color: var(--card-back-color);
    border: 1px solid var(--border-color-primary);
    border-radius: 3px;
}

/* Drop position indicator shown while dragging an image through the text. */
.note-imgframe-caret {
    position: absolute;
    /* Body-mounted like the frame, so it needs the same lift over a
     * full-screen section. */
    z-index: 35;
    width: 2px;
    background-color: var(--highlight-color, #1e88e5);
    pointer-events: none;
}

.note-imgframe-caret[hidden] {
    display: none;
}

/* The frame is chrome, not content — it must never reach the PDF. */
@media print {
    .note-imgframe,
    .note-imgframe-caret {
        display: none !important;
    }
}

/* Canvas (freehand) section */
.canvas-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
    background-color: var(--tab-back-color);
    border-bottom: 1px solid var(--border-color-primary);
}

.canvas-tool-group {
    display: flex;
    gap: 4px;
    align-items: center;
}

.canvas-tool-btn {
    background-color: transparent;
    color: var(--fore-color);
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 4px 8px;
    cursor: pointer;
    line-height: 1;
}

.canvas-tool-btn:hover {
    background-color: var(--card-back-color);
    border-color: var(--border-color-primary);
}

.canvas-tool-btn.active {
    background-color: var(--card-back-color);
    border-color: var(--highlight-color);
}

.canvas-color-btn {
    width: 22px;
    height: 22px;
    border-radius: 8px;
    border: 2px solid var(--border-color-primary);
    cursor: pointer;
    padding: 0;
}

.canvas-color-btn.active {
    border-color: var(--highlight-color);
    box-shadow: 0 0 0 2px var(--card-back-color);
}

.canvas-size-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--fore-color-secondary);
}

.canvas-size-input {
    width: 100px;
}

.canvas-wrapper {
    width: 100%;
    background-color: #ffffff;
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    background-size: 24px 24px;
    overflow: hidden;
}

.note-canvas {
    display: block;
    width: 100%;
    height: auto;
    cursor: crosshair;
    touch-action: none;
}

/* Diagram (SVG) section */
.diagram-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    padding: 6px 8px;
    background-color: var(--tab-back-color);
    border-bottom: 1px solid var(--border-color-primary);
}

.diagram-tool-btn {
    background-color: transparent;
    color: var(--fore-color);
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 4px 8px;
    min-width: 30px;
    cursor: pointer;
    line-height: 1;
}

.diagram-tool-btn:hover {
    background-color: var(--card-back-color);
    border-color: var(--border-color-primary);
}

.diagram-tool-btn.active {
    background-color: var(--card-back-color);
    border-color: var(--highlight-color);
}

.diagram-wrapper {
    width: 100%;
    background-color: #fafafa;
    background-image:
        linear-gradient(to right, rgba(0, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    overflow: hidden;
}

.note-diagram {
    display: block;
    width: 100%;
    height: auto;
    touch-action: none;
}

.diagram-node-shape {
    cursor: move;
}

.diagram-edge-hit {
    cursor: pointer;
}

/* Add Section Bar */
.add-section-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 12px 0;
}

.section-type-select {
    background-color: var(--input-back-color);
    color: var(--fore-color);
    border: 1px solid var(--border-color-primary);
    padding: 8px;
    border-radius: 4px;
    font-size: 0.9rem;
}

/* Media Picker Modal */
.media-picker-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.media-picker-modal {
    background-color: var(--card-back-color);
    color: var(--fore-color);
    border: 1px solid var(--border-color-primary);
    border-radius: 8px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.media-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color-primary);
    font-weight: bold;
}

.media-picker-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

.media-picker-message {
    text-align: center;
    padding: 32px 16px;
    color: var(--fore-color-secondary);
}

.media-picker-grid {
    display: grid;
    /* Fixed 100px columns so every tile is an exact square. */
    grid-template-columns: repeat(auto-fill, 100px);
    gap: 10px;
    justify-content: start;
}

.media-picker-item {
    position: relative;
    background-color: var(--input-back-color);
    border: 2px solid var(--border-color-primary);
    border-radius: 4px;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
    /* Explicit pixel box — a <button> doesn't reliably honor stretch,
     * percentage sizing, or aspect-ratio as a grid item in Firefox/Safari,
     * so fixed width+height is the only dependable way to keep the tiles
     * square. box-sizing:border-box keeps the 2px border inside the 100px. */
    display: block;
    box-sizing: border-box;
    width: 100px;
    height: 100px;
}

.media-picker-item:hover {
    border-color: var(--highlight-color);
}

.media-picker-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-picker-private-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
}

/* Share Modal */
.share-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.share-modal {
    background-color: var(--card-back-color);
    color: var(--fore-color);
    border: 1px solid var(--border-color-primary);
    border-radius: 8px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.share-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color-primary);
    font-weight: bold;
}

.share-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
}

.share-section {
    margin-bottom: 20px;
}

.share-section h4 {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fore-color-secondary);
}

.share-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--border-color-primary);
    border-radius: 4px;
    margin-bottom: 6px;
    background-color: var(--input-back-color);
}

.share-user {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.share-username {
    font-size: 0.8rem;
    color: var(--fore-color-secondary);
}

.share-perm-select {
    background-color: var(--card-back-color);
    color: var(--fore-color);
    border: 1px solid var(--border-color-primary);
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 0.85rem;
}

.share-empty,
.share-message {
    text-align: center;
    padding: 16px;
    color: var(--fore-color-secondary);
    font-size: 0.9rem;
}

.share-error {
    color: #e53935;
}

.share-filter {
    width: 100%;
    background-color: var(--input-back-color);
    color: var(--fore-color);
    border: 1px solid var(--border-color-primary);
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

/* Public profile / public note pages */
/* base.css makes <body> a fixed-height (100vh) grid with overflow:hidden, so
   every top-level view has to own its scroll container. #publicNote and
   #publicProfile are SIBLINGS of #mainLayout (which has overflow-y:auto), not
   children of it, so without this a note taller than the viewport is clipped
   at the fold with no scrollbar anywhere on the page. A grid item's automatic
   minimum size drops to 0 once overflow is non-visible, so declaring the
   scroll container is sufficient — no min-height:0 needed. */
#publicNote,
#publicProfile {
    overflow-y: auto;
}

.public-page {
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
}

.public-page-header {
    border-bottom: 2px solid var(--border-color-primary);
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.public-page-header h1 {
    margin: 0 0 4px 0;
}

.public-subtitle {
    color: var(--fore-color-secondary);
    margin: 0;
    font-size: 0.9rem;
}

.public-back-link {
    margin-bottom: 16px;
}

.public-back-link a {
    color: var(--highlight-color);
    text-decoration: none;
}

.public-back-link a:hover {
    text-decoration: underline;
}

.public-note-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.public-note-list-item {
    margin-bottom: 10px;
}

.public-note-link {
    display: block;
    padding: 14px 16px;
    background-color: var(--card-back-color);
    border: 1px solid var(--border-color-primary);
    border-radius: 6px;
    color: var(--fore-color);
    text-decoration: none;
}

.public-note-link:hover {
    border-color: var(--highlight-color);
}

.public-note-link h3 {
    margin: 0 0 4px 0;
}

.public-note-meta {
    font-size: 0.85rem;
    color: var(--fore-color-secondary);
    display: flex;
    gap: 12px;
    align-items: baseline;
    flex-wrap: wrap;
}

.public-note-download {
    margin-left: auto;
    white-space: nowrap;
}

.public-note-header {
    border-bottom: 2px solid var(--border-color-primary);
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.public-note-header h1 {
    margin: 0 0 6px 0;
}

.public-note-body {
    display: block;
}

.public-loading,
.public-empty,
.public-error {
    text-align: center;
    padding: 32px 16px;
    color: var(--fore-color-secondary);
}

.public-error {
    color: #e53935;
}

/* Print / PDF export */
.print-only {
    display: none;
}

@media print {
    body > *:not(#printContainer) {
        display: none !important;
    }
    #printContainer.print-only {
        display: block !important;
    }
    /* Print author-chosen text colours and highlight backgrounds — browsers
       drop background colours from print output unless this is set. */
    #printContainer,
    #printContainer * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
    @page {
        margin: 0.75in;
    }
}

/* Embed mode (?embed=1): the public note is shown inside another app's modal
   iframe, so strip this app's global header/nav chrome. The in-view back-link
   is already omitted by the template in embed/print mode. */
body.embed-note #header {
    display: none !important;
}
/* base.css makes <body> a fixed-height (100vh) grid with overflow:hidden, which
   clips a long note inside the iframe (the iframe never gets a scrollbar). In
   embed mode, let the body flow to its content height so the host iframe scrolls
   it normally. */
body.embed-note {
    display: block !important;
    height: auto !important;
    min-height: 100dvh;
    overflow: visible !important;
}
body.embed-note .public-page {
    padding-top: 0;
}
/* The body above is block/auto-height in embed mode, so #publicNote must not
   become its own scroll container — the host iframe does the scrolling. */
body.embed-note #publicNote {
    overflow: visible !important;
}

/* Print mode (?print=1): the public note page has no #printContainer, so the
   generic print rule above would hide it. Show only #publicNote and render it
   black-on-white. Higher specificity (#id + body class) beats the rule above. */
@media print {
    body.print-note > *:not(#publicNote) {
        display: none !important;
    }
    /* overflow must be visible for print: a scroll container prints only its
       visible box in some engines, truncating a long note to one page. */
    body.print-note #publicNote {
        display: block !important;
        overflow: visible !important;
    }
    body.print-note .public-back-link {
        display: none !important;
    }
    body.print-note .public-page {
        color: #000;
        background: #fff;
    }
    /* Keep author text colours and highlight backgrounds in the PDF. */
    body.print-note #publicNote,
    body.print-note #publicNote * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }
}

.print-page {
    color: #000;
    background: #fff;
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 11pt;
    line-height: 1.5;
}

.print-header {
    border-bottom: 2px solid #000;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.print-header h1 {
    margin: 0 0 6px 0;
    font-size: 22pt;
}

.print-meta {
    font-size: 9pt;
    color: #666;
    display: flex;
    gap: 12px;
}

.rendered-section {
    margin-bottom: 18px;
}

/* Optional section title on read surfaces (public note view + PDF).
 * Sits directly above its section body; the body's own margin-bottom
 * provides the gap to the next section. */
.rendered-section-title {
    margin: 18px 0 6px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--fore-color);
}
.rendered-section-title + .rendered-section {
    margin-top: 0;
}

/* Only keep *atomic* blocks from splitting across pages. Long-form text
 * sections (markdown/wysiwyg) can be many pages tall, and page-break-inside:
 * avoid on a block taller than one page makes Chromium shove the whole block
 * onto the next page — leaving a blank first page. So scope the rule to media
 * blocks that must stay intact, not to every .rendered-section. */
.print-page .rendered-canvas,
.print-page .rendered-canvas img,
.print-page .bookmark-embed,
.print-page .chart-embed,
.print-page .note-figure {
    page-break-inside: avoid;
}
.print-page .rendered-section-title {
    page-break-after: avoid;
}

.rendered-markdown h1,
.rendered-markdown h2,
.rendered-markdown h3,
.rendered-wysiwyg h1,
.rendered-wysiwyg h2,
.rendered-wysiwyg h3 {
    margin-top: 0.6em;
}

.rendered-markdown code,
.rendered-wysiwyg code {
    background-color: var(--tab-back-color, #f0f0f0);
    padding: 1px 4px;
    border-radius: 2px;
    font-family: "Courier New", monospace;
}

.rendered-markdown pre,
.rendered-wysiwyg pre {
    background-color: var(--tab-back-color, #f0f0f0);
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto;
    font-family: "Courier New", monospace;
}

.rendered-markdown blockquote,
.rendered-wysiwyg blockquote {
    border-left: 3px solid var(--highlight-color, #999);
    padding-left: 12px;
    color: var(--fore-color-secondary, #555);
    margin-left: 0;
}

/* GFM tables. mini.css lays tables out with flexbox (display:flex on
 * table/thead/tbody/tr, needing per-cell width hints marked never emits) and
 * under 768px collapses them to label-cards via `content: attr(data-label)`
 * that marked also never emits — so a bare markdown table renders as
 * misaligned rows on desktop and a header-less pile on mobile. Force real
 * table layout at every width. Scoped + !important to beat mini.css's
 * bare-element and @media card-mode rules (same armor pattern as
 * fullcalendar.css). See docs/ops memory: mini.css bare-table quirks.
 *
 * .wysiwyg-editor is in here too: the sanitizer keeps tables in rich-text
 * sections, so the author edits one in the contenteditable and needs to see
 * the same layout the read surfaces will give it. */
.rendered-markdown table,
.rendered-wysiwyg table,
.wysiwyg-editor table,
.section-preview table {
    display: table !important;
    width: auto;
    max-width: 100%;
    border-collapse: collapse !important;
    margin: 0.6em 0;
    padding: 0 !important;
    overflow-x: auto;
    /* mini.css caps bare tables at 400px and scrolls the overflow, which
     * silently truncates a long table when the note is printed. */
    max-height: none !important;
}
.rendered-markdown thead,
.rendered-markdown th,
.rendered-wysiwyg thead,
.wysiwyg-editor thead,
.rendered-wysiwyg th,
.wysiwyg-editor th,
.section-preview thead,
.section-preview th {
    /* Undo the mobile card-mode rule that visually hides the header. */
    position: static !important;
    clip: auto !important;
    clip-path: none !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
}
.rendered-markdown thead,
.rendered-wysiwyg thead,
.wysiwyg-editor thead,
.section-preview thead {
    display: table-header-group !important;
    border: 0 !important;
}
.rendered-markdown tbody,
.rendered-wysiwyg tbody,
.wysiwyg-editor tbody,
.section-preview tbody {
    display: table-row-group !important;
    border: 0 !important;
    margin: 0 !important;
}
.rendered-markdown tr,
.rendered-wysiwyg tr,
.wysiwyg-editor tr,
.section-preview tr {
    display: table-row !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.rendered-markdown th,
.rendered-markdown td,
.rendered-wysiwyg th,
.wysiwyg-editor th,
.rendered-wysiwyg td,
.wysiwyg-editor td,
.section-preview th,
.section-preview td {
    display: table-cell !important;
    border: 1px solid var(--table-border-color, #ccc) !important;
    padding: 6px 10px !important;
}
.rendered-markdown th,
.rendered-wysiwyg th,
.wysiwyg-editor th,
.section-preview th {
    background: var(--table-head-back-color, var(--tab-back-color, #f0f0f0));
    font-weight: 600;
}
.rendered-markdown td::before,
.rendered-wysiwyg td::before,
.wysiwyg-editor td::before,
.section-preview td::before {
    content: none !important;
}
/* Honor the `:---:` column alignment marked emits as an align attribute
 * (a CSS text-align — including mini.css's mobile `text-align:right` — would
 * otherwise win over the presentational attribute). */
.rendered-markdown [align="center"],
.rendered-wysiwyg [align="center"],
.wysiwyg-editor [align="center"],
.section-preview [align="center"] {
    text-align: center !important;
}
.rendered-markdown [align="right"],
.rendered-wysiwyg [align="right"],
.wysiwyg-editor [align="right"],
.section-preview [align="right"] {
    text-align: right !important;
}
.rendered-markdown [align="left"],
.rendered-wysiwyg [align="left"],
.wysiwyg-editor [align="left"],
.section-preview [align="left"] {
    text-align: left !important;
}

/* Markdown cheat-sheet dialog (showMarkdownHelp): syntax alongside a live
 * example. The outer reference table needs the same anti-mini.css armor as
 * rendered tables (child combinators keep it off the nested example tables,
 * which the .rendered-markdown rules above already handle). */
.markdown-help {
    max-height: 70vh;
    overflow-y: auto;
    padding: 2px;
}
.markdown-help-intro {
    margin: 0 0 10px;
    font-size: 0.9em;
    color: var(--fore-color-secondary, #555);
}
.markdown-help .md-help-table {
    display: table !important;
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
    border-collapse: collapse !important;
    margin: 0 !important;
    padding: 0 !important;
}
.markdown-help .md-help-table > thead {
    display: table-header-group !important;
    border: 0 !important;
}
.markdown-help .md-help-table > tbody {
    display: table-row-group !important;
    border: 0 !important;
}
.markdown-help .md-help-table > thead > tr,
.markdown-help .md-help-table > tbody > tr {
    display: table-row !important;
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.markdown-help .md-help-table > thead > tr > th,
.markdown-help .md-help-table > tbody > tr > td {
    display: table-cell !important;
    width: 50%;
    vertical-align: top;
    text-align: left !important;
    border: 1px solid var(--table-border-color, #ccc) !important;
    padding: 6px 8px !important;
    /* undo mini.css mobile card-mode hiding of the header cells */
    position: static !important;
    clip: auto !important;
    clip-path: none !important;
    height: auto !important;
    overflow: visible !important;
}
.markdown-help .md-help-table > tbody > tr > td::before {
    content: none !important;
}
.markdown-help .md-help-syntax {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: "Courier New", monospace;
    font-size: 0.85em;
    background: var(--tab-back-color, #f0f0f0);
    padding: 6px 8px;
    border-radius: 3px;
}
.markdown-help .md-help-table .rendered-markdown {
    font-size: 0.9em;
}
.markdown-help .md-help-table .rendered-markdown > :first-child {
    margin-top: 0;
}
.markdown-help .md-help-table .rendered-markdown h1,
.markdown-help .md-help-table .rendered-markdown h2 {
    font-size: 1.1em;
    margin: 0.2em 0;
}
.markdown-help .md-help-table .rendered-markdown img {
    max-width: 48px;
}

.rendered-markdown img,
.rendered-wysiwyg img,
.rendered-canvas img {
    max-width: 100%;
    height: auto;
}

.rendered-canvas img {
    border: 1px solid #ddd;
    background-color: #ffffff;
}

.rendered-diagram-svg {
    width: 100%;
    height: auto;
    max-height: 500px;
    border: 1px solid #ddd;
    background-color: #ffffff;
}

.print-page .rendered-markdown h1,
.print-page .rendered-markdown h2,
.print-page .rendered-markdown h3,
.print-page .rendered-wysiwyg h1,
.print-page .rendered-wysiwyg h2,
.print-page .rendered-wysiwyg h3 {
    color: #000;
}

/* System Message */
.system-message {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    border-radius: 6px;
    z-index: 1000;
    font-size: 0.9rem;
}

.system-message-info {
    background-color: var(--button-primary-back-color);
    color: #fff;
}

.system-message-error {
    background-color: var(--warning-color);
    color: #fff;
}

/* Home */
.home-container {
    text-align: center;
    padding: 60px 20px;
}

.home-container h1 {
    font-size: 2rem;
    margin-bottom: 8px;
}

.home-container p {
    color: var(--fore-color-secondary);
}

/* Feather icons sizing */
.feather {
    width: 16px;
    height: 16px;
}

img.headerLogo_mini {
    height: 56px;
    width: auto;
}

/* =============================================================
   Chart embeds (live references to the chart app)
   ============================================================= */
.rendered-section.chart-embed {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 6px;
    padding: 12px;
    overflow: auto;
}
.rendered-section.chart-embed svg {
    max-width: 100%;
    height: auto;
}
.chart-embed-error {
    color: #888;
    font-style: italic;
    padding: 16px;
    text-align: center;
}

.rendered-section.bookmark-embed {
    padding: 6px 0;
}
.bookmark-embed-card {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--border-color-primary, rgba(127, 127, 127, 0.25));
    border-radius: 8px;
    padding: 12px 14px;
    background: rgba(127, 127, 127, 0.05);
}
.bookmark-embed-card:hover {
    background: rgba(127, 127, 127, 0.1);
}
.bookmark-embed-favicon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-right: 8px;
}
.bookmark-embed-title {
    font-weight: 600;
}
.bookmark-embed-desc {
    font-size: 0.85rem;
    opacity: 0.8;
    margin-top: 4px;
}
.bookmark-embed-host {
    font-size: 0.75rem;
    opacity: 0.6;
    margin-top: 6px;
}
.bookmark-embed-error {
    color: #888;
    font-style: italic;
    padding: 12px;
    text-align: center;
}

/* Chart embed picker overlay */
.chart-picker-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.chart-picker-modal {
    background: var(--main-bg-color, #fff);
    color: var(--fore-color, #222);
    border-radius: 8px;
    width: min(720px, 92vw);
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
.chart-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color-primary, rgba(0, 0, 0, 0.12));
    font-weight: 600;
}
.chart-picker-body {
    padding: 16px;
    overflow: auto;
}
.chart-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.chart-picker-tile {
    border: 1px solid var(--border-color-primary, rgba(0, 0, 0, 0.12));
    border-radius: 8px;
    background: var(--card-back-color, rgba(127, 127, 127, 0.05));
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
    text-align: left;
    /* The tile is a <button>, and Chrome does not size a button's auto height
     * from its flex children — it falls back to a single line box (~29px).
     * The thumbnail then shrank to nothing and every tile rendered blank. Any
     * intrinsic keyword restores real content sizing; min-height is used
     * rather than height so a taller row can still stretch the tile where an
     * engine supports it. */
    min-height: fit-content;
}
.chart-picker-tile:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.chart-picker-thumb {
    height: 100px;
    /* A flex item in the tile's column: without this it is free to shrink,
     * and a chart SVG contributes no minimum height to stop it. */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    padding: 6px;
    overflow: hidden;
}
/* Charts arrive at whatever size their renderer chose — Vega emits pixel
 * width/height attributes, Mermaid a viewBox several thousand units wide.
 * Both carry a viewBox, so clamping the box is enough: preserveAspectRatio
 * fits the drawing inside it. min-width:0 lets the flex item actually shrink
 * to the clamp instead of holding its intrinsic width. */
.chart-picker-thumb svg {
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
}
.chart-picker-title {
    padding: 8px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    /* Two lines, then ellipsis: tiles don't stretch to a common height (see
     * the button note above), so one long title would otherwise leave a
     * ragged row. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.chart-picker-empty {
    opacity: 0.7;
    text-align: center;
    padding: 24px;
}

/* ── PDF export: which sections to include ──────────────────────────── */
/* Reuses the chart picker's backdrop/modal/header shell; only the body and
 * the action row below it are specific to this dialog. */
.export-pick-modal {
    width: min(560px, 92vw);
}

.export-pick-intro {
    margin: 0 0 12px;
    color: var(--fore-color-secondary);
    font-size: 0.9rem;
}

.export-pick-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.export-pick-row:hover {
    background-color: var(--card-back-color);
}

/* mini.css replaces checkboxes with an `appearance: none` box and a ::before
 * tick, which has no indeterminate state — and "include every section" needs
 * one. Hand these rows back to the native control, and undo the input border
 * and background that would otherwise paint a second box around it. */
.export-pick-row input[type="checkbox"] {
    -webkit-appearance: checkbox;
    appearance: checkbox;
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 3px 0 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.export-pick-all {
    border-bottom: 1px solid var(--border-color-primary);
    border-radius: 0;
    margin-bottom: 6px;
    padding-bottom: 10px;
    font-weight: 600;
}

.export-pick-list {
    max-height: 46vh;
    overflow-y: auto;
}

.export-pick-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.export-pick-label {
    font-size: 0.9rem;
}

.export-pick-excerpt {
    font-size: 0.8rem;
    color: var(--fore-color-secondary);
    /* One line, clipped — the excerpt is an identifying hint, not a preview. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Export options sit below the section list, separated from it — but with no
 * list above them (single-section note) they're the whole body, so the rule
 * and its spacing would be a stray line. */
.export-pick-options {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color-primary);
}

.export-pick-options:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

/* The option's hint is a full sentence, not an identifying excerpt — let it
 * wrap instead of inheriting the one-line clip. */
.export-pick-options .export-pick-excerpt {
    overflow: visible;
    white-space: normal;
}

.export-pick-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-color-primary);
}

.export-pick-actions button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Books: collection, metadata and the chapter spine ──────────────── */

.book-editor {
    padding: 0 12px 40px;
}

.book-card-subtitle {
    font-size: 0.85rem;
    color: var(--fore-color-secondary);
    margin-top: 2px;
}

.book-metadata,
.book-notes,
.book-spine {
    margin-top: 24px;
}

.book-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 16px;
}

.book-fields label {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    color: var(--fore-color-secondary);
    gap: 4px;
}

.book-fields input {
    width: 100%;
}

.book-cover-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.book-cover-thumb {
    height: 64px;
    width: auto;
    border: 1px solid var(--border-color-primary);
    border-radius: 3px;
}

.book-note-list {
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
}

.book-note-list li {
    padding: 4px 0;
    border-bottom: 1px solid var(--border-color-primary);
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.book-note-count,
.book-section-note {
    color: var(--fore-color-secondary);
    font-size: 0.8rem;
}

.book-notes-empty {
    color: var(--fore-color-secondary);
}

.book-spine-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.book-spine-hint {
    font-size: 0.85rem;
    color: var(--fore-color-secondary);
    margin: 4px 0 12px;
    max-width: 70ch;
}

.book-chapter {
    border: 1px solid var(--border-color-primary);
    border-radius: 4px;
    margin-bottom: 8px;
    background: var(--secondary-back-color);
}

.book-chapter.dragging {
    opacity: 0.5;
}

/* An excluded chapter stays visible and in place — it is still part of the
   arrangement, just not of the export. */
.book-chapter-excluded {
    opacity: 0.55;
}

.book-chapter-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
}

.book-chapter-handle {
    cursor: grab;
    color: var(--fore-color-secondary);
    display: flex;
    align-items: center;
    touch-action: none;
}

.book-chapter-title {
    flex: 1;
    min-width: 120px;
}

.book-chapter-included {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--fore-color-secondary);
    white-space: nowrap;
}

.book-chapter-sections {
    list-style: none;
    margin: 0;
    padding: 0 8px 8px 34px;
}

.book-chapter-sections li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--fore-color-secondary);
    padding: 2px 0;
}

.book-section-label {
    flex: 1;
}

.book-section-missing {
    color: var(--error-color, #b00);
    font-style: italic;
}

.book-slice {
    font-size: 0.75rem;
    opacity: 0.8;
}

.book-note-options {
    list-style: none;
    padding: 0;
    margin: 0;
}

.book-note-options li {
    padding: 3px 0;
}

.book-picker-intro {
    font-size: 0.85rem;
    color: var(--fore-color-secondary);
}