/* Shared first-pass workspace density. Loaded after each surface's styles. */
:root { --control-height: 34px; --workspace-header-height: 52px; }

.library-page .workspace { padding: 20px clamp(20px, 3vw, 40px) 32px; }
.library-page .workspace__heading { gap: 12px; margin-bottom: 16px; }
.library-page .workspace__heading > div:first-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.library-page .workspace__heading .eyebrow { margin: 0; font-size: 12px; }
.library-page .workspace__heading h1 { margin: 0; font-size: 22px; letter-spacing: -.5px; }
.library-page .topbar__inner { padding: 18px 14px 16px; gap: 16px; }
.library-page .brand__mark { width: 32px; height: 32px; }
.library-page .brand__name { font-size: 16px; }
.library-page .space-navigation { gap: 12px; }
.library-page .space-picker-label { gap: 4px; }
.library-page .library-nav-button { min-height: 36px; padding: 7px 10px; }
.library-page .navigation-children .library-nav-button { min-height: 32px; padding: 6px 10px; }
.library-page .library-sidebar-footer { padding-top: 8px; }
.library-page .library-toolbar { gap: 8px; margin-bottom: 8px; }
.library-page .library-search input { min-height: var(--control-height); padding: 7px 10px; font-size: 13px; }
.library-page :is(.library-filter select, .library-sort select, .space-picker) { min-height: var(--control-height); padding: 6px 8px; font-size: 13px; }
.library-page .library-header-actions :is(.button, .context-button),
.library-page .library-details-button { min-height: var(--control-height); padding: 6px 10px; font-size: 13px; border-radius: 7px; }
.library-page #new-artifact { background: transparent; color: var(--blue-dark); border: 1px solid transparent; box-shadow: none; }
.library-page #new-artifact:hover { background: #edf4f6; border-color: var(--border); }
.library-page .artifact-row { min-height: 58px; padding: 9px 12px; gap: 12px; }
.library-page .artifact-row__summary h3 { font-size: 14px; }
.library-page .artifact-row__summary p { margin-top: 2px; }
.library-page .library-columns { padding: 7px 12px; gap: 12px; }
.library-page .library-search-scope { margin-bottom: 8px; }
.library-page .library-search-scope .library-text-button { padding: 4px 8px; }
.library-page .section-heading { margin-bottom: 6px; }
.library-page .library-helper:empty { display: none; }

.viewer-bar, body.editor-shell .editor-toolbar {
  min-height: var(--workspace-header-height); padding: 8px 12px; gap: 12px;
}
body.editor-shell .editor-toolbar { grid-template-columns: minmax(110px, auto) minmax(120px, 220px) minmax(0, 1fr) auto; }
.viewer-brand { width: 28px; height: 28px; }
.viewer-title { flex: 1; }
.viewer-title small, .editor-eyebrow { font-size: 10px; letter-spacing: .03em; font-weight: 500; }
.viewer-bar .viewer-actions { gap: 4px; }
.viewer-back, .editor-back { border-color: transparent; background: transparent; }
.editor-back { height: 34px; width: 34px; }
.viewer-export, .editor-button, .viewer-file select, .editor-page-picker select {
  min-height: var(--control-height); padding: 6px 9px; font-size: 13px; font-weight: 500;
}
.viewer-file select, .editor-page-picker select { padding-right: 26px; }
.viewer-export, .editor-button--quiet { background: transparent; border-color: transparent; color: var(--blue-dark); }
.viewer-export:hover:not(:disabled), .editor-button--quiet:hover:not(:disabled) { background: #edf4f6; }
.viewer-export { white-space: nowrap; }
.viewer-export:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 2px; }
.viewer-more > summary, .editor-more-actions__trigger {
  justify-content: center; min-width: var(--control-height); min-height: var(--control-height);
  padding: 6px; font-size: 16px; letter-spacing: .08em;
}
.artifact-tabs { gap: 20px; padding: 0 12px; }
.artifact-tabs button { min-height: 40px; padding: 8px 2px; font-size: 13px; font-weight: 500; border-bottom-width: 2px; }
.viewer-stage { padding: 6px; }
.viewer-state { inset: 6px; }
#artifact-frame { border-radius: 4px; }
.artifact-context-panel { padding: clamp(16px, 3vw, 32px); }

@media (max-width: 1000px) {
  body.editor-shell .editor-toolbar { display: flex; flex-wrap: wrap; }
  .editor-actions { flex: 1; min-width: 0; flex-wrap: wrap; }
  .editor-status { overflow-wrap: anywhere; }
}
@media (pointer: coarse), (max-width: 650px) {
  :root { --control-height: 44px; }
  .library-page .library-nav-button, .library-page .navigation-children .library-nav-button { min-height: 44px; }
  .viewer-back, .editor-back, .viewer-export, .editor-button { min-height: 44px; }
  .editor-back { width: 44px; }
  .artifact-tabs button { min-height: 44px; }
}
@media (max-width: 650px) {
  .library-page .workspace { padding: 16px 16px 28px; }
  .library-page .topbar__inner { padding: 10px 16px; min-height: 60px; }
  .library-page .workspace__heading { flex-direction: row; align-items: center; }
  .library-page .library-header-actions { width: auto; margin-left: auto; }
  .library-page .library-search input, .library-page .library-filter select, .library-page .library-sort select { font-size: 16px; }
  .library-page .artifact-row, .library-page .library-columns { grid-template-columns: minmax(0, 1fr) 78px; gap: 8px; padding-left: 0; padding-right: 0; }
  .viewer-bar { flex-wrap: wrap; gap: 8px; }
  .viewer-title { flex-basis: calc(100% - 150px); }
  .viewer-actions { width: 100%; margin-left: 0; flex-wrap: wrap; }
  .viewer-file { flex: 1; min-width: 120px; }
  .viewer-file select, .editor-page-picker select { font-size: 16px; }
  body.editor-shell .editor-toolbar { gap: 8px; }
  .editor-page-picker { flex: 1; min-width: 120px; }
  .editor-actions { flex-basis: 100%; justify-content: flex-start; }
  .editor-status { margin-right: auto; text-align: left; }
}

/* Notes and Sources share the work list's alignment and control density. */
.library-page .workspace:has(#workspace-sources:not([hidden])) > .workspace__heading {
  max-width: none;
  margin: 0 0 16px;
}
.library-page #workspace-sources { max-width: none; margin: 0; }
.library-page #context-library-description { font-size: 13px; margin: 0 0 12px; line-height: 1.5; }
.library-page .sources-toolbar { gap: 8px; margin-bottom: 8px; }
.library-page .context-search { min-height: var(--control-height); padding: 7px 10px; border-color: var(--border); border-radius: 7px; font-size: 13px; }
.library-page .context-button,
:is(#panel-notes, #panel-blueprint) .context-button { min-height: var(--control-height); padding: 6px 10px; border-radius: 7px; font-size: 13px; font-weight: 500; }
.library-page :is(#refresh-sources, #more-sources, #source-create, #new-source),
.library-page .source-add-menu > summary { background: transparent; border-color: transparent; color: var(--blue-dark); }
.library-page :is(#refresh-sources, #more-sources, #source-create, #new-source):hover,
.library-page .source-add-menu > summary:hover { background: #edf4f6; border-color: var(--border); }
.library-page #sources-status { color: var(--muted); font-size: 12px; margin: 8px 0; }
.library-page #sources-status:empty { display: none; }
.library-page #source-list { gap: 0; margin: 8px 0; }
.library-page #source-list .source-row { min-height: 58px; padding: 9px 12px; gap: 12px; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; }
.library-page #source-list .source-row:first-child { border-top: 1px solid var(--border); }
.library-page #source-list .source-row:hover,
.library-page #source-list .source-row:has(input:checked) { background: #edf4f6; }
.library-page #source-list .context-source-open { color: var(--ink); font-size: 14px; }
.library-page #source-list .context-source-open strong { font-weight: 550; }
.library-page #source-list .context-source-open small { font-size: 12px; margin-top: 2px; }
.library-page .sources-helper { font-size: 12px; margin-top: 16px; }
.library-page .sources-selection { padding: 6px 10px; margin: 8px 0; font-size: 13px; }
.library-page .source-upload-help { margin: 0 0 12px; color: var(--muted); font-size: 12px; }
.library-page .source-upload-help:has(#source-upload-hint[hidden]) { display: none; }
.library-page .source-upload-help summary { cursor: pointer; padding: 6px 0; }
.library-page .source-upload-help .source-upload-hint { margin: 6px 0 0; padding: 10px 12px; font-size: 12px; }
.library-page .source-back { min-height: var(--control-height); padding: 6px 0; margin-bottom: 12px; font-size: 13px; }
.library-page #source-editor { max-width: none; margin: 0; }
.library-page #source-editor .context-heading { margin-bottom: 12px; gap: 12px; }
.library-page #source-editor .context-heading h2 { font-size: 20px; margin-bottom: 4px; }
.library-page #source-editor .context-heading p { font-size: 13px; }
.library-page .source-title-field { margin-bottom: 12px; }
.library-page .source-title-field input { padding: 8px 0; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; background: transparent; font-size: 20px; font-weight: 550; }
.library-page #source-body,
:is(#panel-notes, #panel-blueprint) .context-notes { border-color: var(--border); border-radius: 7px; padding: 12px; line-height: 1.65; min-height: clamp(220px, 35vh, 360px); field-sizing: content; }
.library-page .source-editor-actions { gap: 8px; margin-top: 12px; }
.library-page .context-notes-footer,
:is(#panel-notes, #panel-blueprint) :is(.context-notes-footer, .context-blueprint-footer) { padding-top: 8px; gap: 6px 12px; font-size: 12px; }
@media (pointer: coarse), (max-width: 650px) {
  .library-page #source-list .source-row { min-height: 64px; }
  .library-page .source-upload-help summary { min-height: 44px; line-height: 32px; }
}
@media (max-width: 650px) {
  .library-page .context-search { font-size: 16px; }
  .library-page #source-list .source-row { padding-left: 0; padding-right: 0; }
  .library-page #source-editor { max-width: none; }
  .library-page #source-body { padding: 12px; }
  .library-page .sources-actions { width: auto; }
}

/* Keep the open note aligned with its list and prioritize title and writing. */
.library-page #source-editor:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
.library-page #source-editor > .source-back { margin: 0 0 8px; justify-self: start; }
.library-page #source-editor > .context-heading { align-items: center; margin: 0 0 8px; }
.library-page #source-editor > .context-heading > div { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.library-page #source-editor .context-privacy { padding: 0; font-size: 12px; }
.library-page #source-form { grid-column: 1 / -1; min-width: 0; }
.library-page #source-form .source-title-field { margin: 0 0 8px; }
.library-page #source-form .source-title-field input { width: 100%; padding: 8px 0; font-size: 22px; }
.library-page #source-form .source-updated { margin: 0 0 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.library-page #source-form .context-notes-footer { align-items: baseline; }
.library-page #source-editor #source-body:focus-visible { outline-offset: 2px; }

/* Artifact writing tabs use the same width and spacing as the Notes editor. */
:is(#panel-notes, #panel-blueprint) { padding: 20px clamp(20px, 3vw, 40px) 32px; }
:is(#panel-notes, #panel-blueprint) .context-content { max-width: none; min-width: 0; margin: 0; }
:is(#panel-notes, #panel-blueprint) .context-heading { gap: 8px 12px; margin-bottom: 8px; }
:is(#panel-notes, #panel-blueprint) .context-heading > div { min-width: 0; }
:is(#panel-notes, #panel-blueprint) .context-heading h1 { font-size: 22px; margin-bottom: 4px; }
:is(#panel-notes, #panel-blueprint) :is(.context-heading p, .context-description) { font-size: 13px; line-height: 1.5; }
:is(#panel-notes, #panel-blueprint) .context-privacy { padding: 0; font-size: 12px; }
:is(#panel-notes, #panel-blueprint) .context-notes:focus-visible { outline-offset: 2px; }
#panel-blueprint .context-blueprint { margin-top: 8px; }
#panel-blueprint .context-blueprint-actions { gap: 8px; }
@media (max-width: 650px) {
  .library-page #source-editor .context-privacy { font-size: 11px; }
  .library-page #source-form .source-title-field input { font-size: 20px; }
  :is(#panel-notes, #panel-blueprint) { padding: 16px 16px 28px; }
  :is(#panel-notes, #panel-blueprint) .context-heading h1 { font-size: 20px; }
  :is(#panel-notes, #panel-blueprint) .context-privacy { font-size: 11px; }
}

/* Basic rich notes use a quiet toolbar and local, schema-limited content. */
#note-rich-surface[hidden], #source-body[hidden], #note-format-toolbar[hidden] { display: none; }
.note-format-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--border); border-bottom: 0; border-radius: 7px 7px 0 0; background: #fff; }
.note-format-toolbar button { min-height: var(--control-height); min-width: var(--control-height); padding: 4px 8px; border: 0; border-radius: 5px; background: transparent; color: var(--ink); cursor: pointer; font: inherit; font-size: 13px; }
.note-format-toolbar button:hover, .note-format-toolbar button[aria-pressed=true] { background: #e7f1f4; color: var(--blue-dark); }
.note-rich-content { min-height: clamp(220px,35vh,360px); padding: 12px; border: 1px solid var(--border); border-radius: 0 0 7px 7px; background: #fff; font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
.note-rich-content:focus-visible { outline: 3px solid #236b99; outline-offset: 2px; }
.note-rich-content > :first-child { margin-top: 0; }
.note-rich-content > :last-child { margin-bottom: 0; }
.note-rich-content p { margin: 0 0 8px; }
.note-rich-content h1 { font-size: 24px; }
.note-rich-content h2 { font-size: 20px; margin: 12px 0 6px; }
.note-rich-content ul, .note-rich-content ol { padding-left: 24px; margin: 8px 0; }
.note-rich-content li p { margin: 0; }
.note-rich-content a { color: var(--blue-dark); text-decoration: underline; }
#note-link-dialog { width: min(400px,calc(100vw - 32px)); padding: 20px; }
#note-link-dialog h2 { font-size: 20px; margin: 0 0 16px; }
#note-link-error { color: #a12424; font-size: 13px; }

.note-rich-content[contenteditable=true] > p:only-child:has(> br.ProseMirror-trailingBreak:only-child)::before { content: 'Start writing…'; color: var(--muted); float: left; height: 0; pointer-events: none; }