/* Personal Library: shared geometry, three palettes, two appearance modes. */
:root {
  --bg: #f1f4f6;
  --panel: #fcfdfe;
  --panel-2: #eaf0f5;
  --panel-3: #dfe8ef;
  --line: #ccd6de;
  --line-soft: #dbe2e7;
  --field-line: #96a6b4;
  --text: #202d3a;
  --muted: #526472;
  --accent: #395f85;
  --accent-hover: #2d4e70;
  --accent-ink: #ffffff;
  --accent-soft: #dce7f0;
  --sidebar: #243c58;
  --sidebar-active: #192f47;
  --nav-text: #f1f5f9;
  --nav-muted: #cbd8e5;
  --nav-line: #58708b;
  --nav-focus: #c5e0fa;
  --nav-mark: #dfc66a;
  --danger: #a73535;
  --danger-soft: #fae8e7;
  --danger-ink: #fff;
  --ok: #28644d;
  --warning: #785513;
  --feature: var(--accent);
  --feature-ink: var(--accent-ink);
  --feature-line: var(--field-line);
  --feature-soft: var(--accent-soft);
  --radius: 5px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-sheet: 16px;
  --shadow-1: 0 4px 16px rgb(19 36 52 / 12%);
  --shadow-2: 0 16px 40px rgb(19 36 52 / 20%);
  --sidebar-width: clamp(196px, 18.1vw, 256px);
  --preview-width: clamp(310px, 37.8%, 560px);
  --font-body: "Source Sans 3", "Segoe UI", sans-serif;
  --font-heading: "Source Serif 4", Georgia, serif;
  --kind-width: 100px;
  --date-width: 144px;
}

:root[data-palette="plum-stone"] {
  --bg: #f2eef1; --panel: #fcfafb; --panel-2: #ede5eb; --panel-3: #e4d8e1;
  --line: #d7cad3; --line-soft: #e2d9df; --field-line: #aa94a4;
  --text: #342a33; --muted: #6c5665;
  --accent: #76536b; --accent-hover: #5f4156; --accent-soft: #e9dde6;
  --sidebar: #50404f; --sidebar-active: #3d2d3c;
  --nav-text: #faf1f7; --nav-muted: #e2cfdd; --nav-line: #866d81;
  --nav-focus: #f0d2e8; --nav-mark: #e2b6d3;
}

:root[data-palette="graphite-ochre"] {
  --bg: #f3f2ee; --panel: #fdfcf8; --panel-2: #ebe9e0; --panel-3: #e0ddcf;
  --line: #d3d0c4; --line-soft: #e0ddd3; --field-line: #a39e8c;
  --text: #2b2c27; --muted: #646353;
  --accent: #65592e; --accent-hover: #4d421f; --accent-soft: #e5e2d6;
  --sidebar: #30312d; --sidebar-active: #22241f;
  --nav-text: #f7f6ec; --nav-muted: #d6d7c7; --nav-line: #737666;
  --nav-focus: #e9d690; --nav-mark: #d0ba72;
}

:root[data-mode="dark"] {
  --bg: #141d27; --panel: #1c2835; --panel-2: #233242; --panel-3: #304357;
  --line: #3e4e5f; --line-soft: #2e3c4b; --field-line: #63798c;
  --text: #e4ecf3; --muted: #acbcca;
  --accent: #a5c5e6; --accent-hover: #c7ddf2; --accent-ink: #142435;
  --accent-soft: #293f55; --sidebar: #101925; --sidebar-active: #213348;
  --danger: #ffaaa4; --danger-soft: #462c31; --danger-ink: #341519;
  --ok: #9ed4b8; --warning: #e4c77c;
  --shadow-1: 0 4px 16px rgb(0 0 0 / 22%);
  --shadow-2: 0 16px 40px rgb(0 0 0 / 36%);
}

:root[data-palette="plum-stone"][data-mode="dark"] {
  --bg: #211c23; --panel: #2b232d; --panel-2: #352b37; --panel-3: #443648;
  --line: #58495a; --line-soft: #3b313d; --field-line: #8c7388;
  --text: #efe7ed; --muted: #c6b6c2;
  --accent: #cfa9c4; --accent-hover: #e6c8dd; --accent-ink: #2b1e29;
  --accent-soft: #423043; --sidebar: #19151c; --sidebar-active: #342736;
}

:root[data-palette="graphite-ochre"][data-mode="dark"] {
  --bg: #1b1c19; --panel: #252621; --panel-2: #303129; --panel-3: #3b3e32;
  --line: #505245; --line-soft: #36382f; --field-line: #828571;
  --text: #ecece3; --muted: #bbbdb0;
  --accent: #d0ba72; --accent-hover: #e9d799; --accent-ink: #292612;
  --accent-soft: #38382a; --sidebar: #121410; --sidebar-active: #2d3025;
}

body { font: 16px/1.5 var(--font-body); background: var(--bg); color: var(--text); }
button, input, textarea, select { font-family: var(--font-body); }
::selection { background: var(--accent); color: var(--accent-ink); }
input, textarea { caret-color: var(--accent); }
* { scrollbar-width: thin; scrollbar-color: var(--field-line) transparent; }
a { text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
h1 { font: 700 38px/1.15 var(--font-heading); letter-spacing: -.025em; margin: 0; }
h2 { font-size: 23px; letter-spacing: -.015em; }
.btn { min-height: 38px; padding: 7px 12px; border-radius: var(--radius); }
.btn-square { padding: 0; }
.btn:hover:not(:disabled) { border-color: var(--field-line); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-feature:hover:not(:disabled) { background: var(--panel-3); }
.btn-primary.btn-danger, .btn-primary.btn-danger:hover:not(:disabled) { color: var(--danger-ink); }
.btn-primary.btn-danger .spinner { border-color: currentColor; border-top-color: transparent; }
.search, .modal-input, .code-input, .lyrics-text { background: var(--panel); border-color: var(--field-line); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.field-clear { width: 36px; height: 36px; }
.field-label { font-size: 14px; text-transform: none; letter-spacing: 0; }
.crumb-sep { color: var(--muted); }
.crumb { min-height: 24px; padding-left: 0; padding-right: 8px; border-radius: 3px; }
.crumb.current { font-weight: 400; }

.app, .app:has(.upload-results:not([hidden])) {
  display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr); grid-template-areas: none;
  height: 100dvh; overflow: hidden;
}
.library-sidebar {
  grid-column: 1; grid-row: 1; display: flex; flex-direction: column;
  min-height: 0; min-width: 0; overflow-y: auto; padding: 20px 12px 26px;
  background: var(--sidebar); color: var(--nav-text);
  scrollbar-color: var(--nav-line) transparent;
}
.library-sidebar :focus-visible { outline-color: var(--nav-focus); }
.brand { min-height: 44px; padding: 0 8px; margin-bottom: 14px; }
.brand-name { display: block; letter-spacing: -.025em; font-size: 20px; font-weight: 400; }
.brand-name strong { font-family: var(--font-heading); font-weight: 700; }
.primary-nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  position: relative; width: 100%; display: flex; align-items: center; gap: 12px;
  min-height: 46px; padding: 10px 12px; font: inherit; color: var(--nav-text);
  border: 0; border-radius: 4px; background: none; text-align: left; cursor: pointer;
  touch-action: manipulation;
}
.nav-item .icon, .connection .icon { width: 23px; height: 23px; }
.nav-item:hover, .nav-item[aria-current="page"] { background: var(--sidebar-active); }
.nav-item[aria-current="page"]::before {
  content: ""; position: absolute; top: 9px; bottom: 9px; left: 0;
  width: 2px; background: var(--nav-mark); border-radius: 2px;
}
.nav-child { padding-left: 28px; color: var(--nav-muted); }
.nav-child-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; }
.nav-pin {
  align-self: stretch; padding: 0 12px; border: 0; background: transparent;
  color: var(--nav-muted); cursor: pointer;
}
.nav-pin[aria-pressed="false"] { opacity: .35; }
.nav-pin:hover { opacity: 1; color: var(--nav-focus); }
.nav-pin[aria-pressed="true"] { color: var(--nav-focus); }
.nav-pin .icon { width: 17px; height: 17px; }
.sidebar-bottom { margin-top: auto; padding-top: 36px; }
#nav-trash { margin-bottom: 16px; }
.topbar-actions { display: flex; flex-direction: column; align-items: stretch; gap: 2px; border-top: 1px solid var(--nav-line); padding-top: 12px; }
.connection { display: flex; align-items: center; gap: 12px; min-height: 46px; margin-bottom: 16px; padding: 8px 12px; color: var(--nav-text); font-size: 18px; }
.connection-dot { width: 8px; height: 8px; border-radius: 50%; background: #b4df9c; }
.appearance-controls { margin: 16px 5px 0; padding-top: 14px; border-top: 1px solid var(--nav-line); }
.palette-control { margin: 0 5px 20px; }
.palette-control label { display: block; color: var(--nav-muted); font-size: 14px; margin-bottom: 5px; }
.palette-control select {
  width: 100%; height: 40px; padding: 6px 9px; font: inherit; font-size: 15px;
  background: var(--sidebar); color: var(--nav-text); border: 1px solid var(--nav-line); border-radius: 4px; color-scheme: dark;
}
.mode-switch { display: flex; margin-top: 10px; border: 0; border-radius: 9px; padding: 0; gap: 0; background: var(--sidebar-active); }
.mode-switch button {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 38px; padding: 6px; background: transparent; color: var(--nav-text);
  border: 0; border-radius: 8px; font: inherit; font-size: 14px; cursor: pointer;
}
.mode-switch button[aria-pressed="true"] { background: var(--nav-focus); color: var(--sidebar); }
.mode-switch .icon { width: 17px; height: 17px; }
.mobile-topbar, .sidebar-close { display: none; }

.workbench { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; position: relative; min-height: 0; min-width: 0; }
.toolbar { grid-area: auto; display: grid; grid-template-columns: auto minmax(110px, 1fr) auto; gap: 10px; padding: 20px 22px 12px; border: 0; }
.toolbar-line { display: contents; }
.crumbs { grid-column: 1 / -1; order: 0; min-height: 24px; font-size: 14px; }
#library-heading { grid-column: 1; grid-row: 2; align-self: center; font-size: 34px; transform: translateY(-7px); }
.toolbar .btn { font-size: 14px; min-height: 32px; padding: 5px 10px; gap: 6px; }
.toolbar-actions .icon { width: 16px; height: 16px; }
.toolbar .search { font-size: 14px; padding-block: 5px; }
.toolbar-actions { grid-column: 3; grid-row: 2; order: 0; gap: 8px; }
.search-line { grid-column: 2; grid-row: 2; width: 100%; max-width: 300px; justify-self: end; }
.workbench:has(.viewer:not([hidden])) > .toolbar,
.workbench:has(.viewer:not([hidden])) > .upload-results { margin-right: var(--preview-width); }
.workspace { grid-area: auto; position: static; flex: 1; display: flex; min-height: 0; }
.content { min-width: 0; padding: 0 22px 28px; }
.workbench:has(.viewer:not([hidden])) .content { margin-right: var(--preview-width); }
.list-head { display: grid; grid-template-columns: 40px minmax(0,1fr) var(--kind-width) var(--date-width) 38px; min-height: 38px; align-items: center; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.list-head span:first-child { grid-column: 2; }
.list-head span { padding-left: 4px; }
.sort-heading { display: inline-flex; align-items: center; gap: 5px; }
.sort-heading .icon { width: 13px; height: 13px; stroke-width: 2; }
.row { border-radius: 0; gap: 0; }
.row:not(:last-child) { border-bottom-color: var(--line); }
.row:hover { background: var(--panel-2); }
.row.is-viewing, .row.is-picked { background: var(--accent-soft); }
.row-open { min-height: 56px; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 8px 4px 8px 20px; border-radius: 0; }
.row-open.is-picking { grid-template-columns: 22px 28px minmax(0,1fr); gap: 8px; }
.row-icon, .row-icon.is-folder, .row-icon.is-pdf, .row-icon.is-notebook { width: 28px; height: 32px; background: none; color: var(--text); border-radius: 0; }
.row-icon .icon { width: 25px; height: 25px; }
.row-text { display: grid; grid-template-columns: minmax(0,1fr) var(--kind-width) var(--date-width); align-items: center; }
.row-sub { display: contents; }
.row-kind, .row-modified { color: var(--muted); font-size: 14px; padding-left: 4px; }
.folder-count { display: none; }
.row-modified { font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-title { font-weight: 500; }
.row-open:hover .name-text.is-link { text-decoration: none; }
.row-menu { border-radius: 4px; }
.badge-star { color: var(--warning); }
.empty { padding-top: 64px; }
.drop-hint { background: var(--accent-soft); }

.viewer {
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--preview-width);
  background: var(--bg); border-left: 1px solid var(--line); animation: preview-in .18s ease-out;
}
.viewer-bar { min-height: 70px; padding: 14px 16px; gap: 8px; border: 0; background: transparent; }
.viewer-title { order: -1; font-size: 20px; line-height: 1.2; }
#viewer-close { order: 2; }
.viewer-body { padding: 10px 16px 20px; }
.viewer-frame { background: #fff; border: 0; border-radius: 3px; color-scheme: light; box-shadow: var(--shadow-1); }
/* one finger scrolls; a pinch is left to the preview, which zooms the pdf */
.pdf-container { position: absolute; inset: 10px 16px 74px; overflow: auto; color-scheme: light; touch-action: pan-x pan-y; }
.pdf-container .pdfViewer .page { margin: 0 auto 16px; border: 0; background: #fff; box-shadow: var(--shadow-1); }
.pdf-container .pdfViewer { padding: 0; --page-margin: 0 auto 16px; --page-border: none; --page-bg-color: #fff; }
.pdf-container ::selection { background: rgb(60 120 200 / 30%); color: transparent; }
.pdf-zoom { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.viewer-canvas { background: transparent; }
.viewer-pager { background: var(--panel); backdrop-filter: none; border: 1px solid var(--line); border-radius: 5px; box-shadow: none; }
.viewer-pager:has(.pdf-zoom:not([hidden])) { left: 16px; right: 16px; transform: none; border: 0; background: none; padding: 0; }
.pdf-zoom .btn { padding-inline: 4px; }
.pdf-zoom .btn-square { width: 32px; min-width: 32px; }
.pdf-zoom #pdf-zoom-fit { font-size: 13px; }
.viewer-pager .btn-square { border-radius: 3px; }
.selbar { left: var(--sidebar-width); background: var(--panel); box-shadow: none; }
.statusbar { left: calc(var(--sidebar-width) + 18px); background: var(--panel); backdrop-filter: none; }
.fab-feature { background: var(--panel); }
.upload-results { background: var(--panel); padding-inline: 22px; }

.tools-view { flex: 1; padding: 36px clamp(22px, 4vw, 64px); overflow: auto; }
.tools-heading { margin-bottom: 36px; }
.tools-heading p { color: var(--muted); font-size: 18px; margin-top: 12px; }
.tool-entry {
  display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 22px; align-items: center;
  max-width: 780px; width: 100%; padding: 24px 0; text-align: left;
  border: 0; border-block: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; cursor: pointer;
}
.tool-entry:hover { color: var(--accent); }
.tool-icon .icon { width: 34px; height: 34px; }
.tool-entry strong { display: block; font-size: 24px; font-weight: 600; }
.tool-description { display: block; color: var(--muted); margin-top: 6px; }
.tool-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; max-width: 780px; }
.tool-pin {
  align-self: stretch; padding: 0 4px 0 16px; border: 0; border-block: 1px solid var(--line);
  background: transparent; color: var(--muted); cursor: pointer;
}
.tool-pin[aria-pressed="false"] { opacity: .4; }
.tool-pin:hover { opacity: 1; }
.tool-pin:hover, .tool-pin[aria-pressed="true"] { color: var(--accent); }
.tool-pin .icon { width: 20px; height: 20px; }
.workbench[data-view="tools"] .fabs { display: none; }
.sheet, .menu { border: 0; }
.card { border: 1px solid var(--line); box-shadow: none; }
.pair-mode { float: right; margin: -12px -12px 12px 12px; }
.card h1 { clear: both; font-family: var(--font-heading); }
.toast { border-left-width: 1px; box-shadow: none; }
.toast-error { border-color: var(--danger); }
.toast-ok { border-color: var(--ok); }
.result { border-left-width: 1px; border-radius: 5px; }
.result-error { border-color: var(--danger); }
.result-ok { border-color: var(--ok); }
.note-warn .icon { color: var(--warning); }
.choice:hover, .lyric-hit:hover { border-color: var(--field-line); }
.btn-primary .spinner { border-color: currentColor; border-top-color: transparent; }
.progress > span { transition: none; }
.navigation-overlay { padding: 0; place-items: stretch start; }
.navigation-overlay .library-sidebar { width: min(320px, 88vw); height: 100dvh; padding-top: max(18px, var(--safe-t)); }
.navigation-overlay .sidebar-close { display: grid; color: var(--nav-text); margin-left: auto; }
.navigation-overlay .library-sidebar .brand { padding-right: 0; }
.navigation-overlay .sidebar-close { background: var(--sidebar-active); border-color: var(--nav-line); }

@media (min-width: 1350px) {
  .toolbar { grid-template-columns: auto minmax(160px, 1fr) auto; }
  #library-heading { grid-column: 1; }
  .search-line { grid-row: 2; grid-column: 2; max-width: 300px; justify-self: end; }
  .toolbar-actions { grid-column: 3; }
  .crumbs { grid-column: 1 / -1; }
}
@media (min-width: 901px) and (max-width: 1190px) {
  .row-modified { font-size: 13px; }
  .toolbar { padding-left: 22px; padding-right: 16px; grid-template-columns: 148px minmax(110px,1fr) auto; gap: 12px; }
  .content { padding-inline: 18px; }
  .viewer-title { font-size: 18px; }
  .viewer-bar { padding-inline: 12px; }
}
@media (min-width: 901px) {
  .connection { font-size: 16px; }
  .tools-heading h1 { font-size: 34px; }
  .modal h2, .sheet-head h2 { font-size: 23px; }
}
@media (min-width: 901px) and (max-width: 1050px) {
  .row-text { grid-template-columns: minmax(0,1fr) 72px; }
  .row-modified, .list-head span:last-child { display: none; }
  .list-head { grid-template-columns: 40px minmax(0,1fr) 72px 38px; }
  .toolbar { grid-template-columns: minmax(0,1fr) auto; }
  .toolbar-actions { grid-column: 2; }
  .search-line { grid-column: 1 / -1; grid-row: 3; max-width: none; }
}
@media (max-width: 900px), (min-width: 561px) and (max-height: 560px) and (pointer: coarse) {
  :root { --sidebar-width: 0px; }
  .app, .app:has(.upload-results:not([hidden])) {
    display: grid; grid-template-areas: none;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto auto minmax(0, 1fr);
  }
  .app > .library-sidebar { display: none; }
  .btn { min-height: 44px; }
  /* the menu, the place and the filter button share the top line, the path
     runs under it, and the filter itself only takes a line once asked for */
  .mobile-topbar { grid-column: 1; grid-row: 1; display: flex; align-items: center; min-height: 60px; padding: calc(8px + var(--safe-t)) 12px 8px max(12px, var(--safe-l)); }
  .workbench, .toolbar, .toolbar-line { display: contents; }
  #library-heading { grid-column: 2; grid-row: 1; min-width: 0; padding-top: var(--safe-t); font-size: 32px; transform: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .toolbar-actions { grid-column: 3; grid-row: 1; padding: var(--safe-t) max(12px, var(--safe-r)) 0 12px; transform: none; }
  .toolbar .crumbs { grid-column: 1 / -1; grid-row: 2; min-height: 38px; padding: 0 max(16px, var(--safe-r)) 4px max(16px, var(--safe-l)); font-size: 14px; }
  .crumb { min-height: 44px; max-width: 60vw; }
  .toolbar .btn { min-height: 44px; }
  .toolbar .search { font-size: 16px; padding-block: 9px; }
  .toolbar .search-line { grid-column: 1 / -1; grid-row: 3; display: none; max-width: none; justify-self: stretch; padding: 4px max(16px, var(--safe-r)) 10px max(16px, var(--safe-l)); }
  .toolbar.is-searching .search-line { display: block; }
  .upload-results { grid-column: 1 / -1; grid-row: 4; }
  .workspace, .tools-view { grid-column: 1 / -1; grid-row: 5; min-height: 0; }
  .on-desk { display: none !important; }
  .btn.on-phone { display: inline-flex; }
  .fabs.on-phone { display: flex; }
  .workbench:has(.viewer:not([hidden])) > .toolbar,
  .workbench:has(.viewer:not([hidden])) > .upload-results,
  .workbench:has(.viewer:not([hidden])) .content { margin-right: 0; }
  .content { padding: 0 max(12px, var(--safe-r)) 164px max(12px, var(--safe-l)); }
  .list-head { display: none; }
  .row-open { min-height: 70px; padding: 9px 5px; }
  .row-text { display: block; }
  .row-sub { display: flex; gap: 8px; margin-top: 2px; }
  .row-kind, .row-modified { padding-left: 0; font-size: 14px; }
  .folder-count { display: inline; }
  .pdf-zoom .btn-square { min-width: 44px; width: 44px; }
  #pdf-zoom-fit { min-width: 44px; }
  .viewer-pager .page-label { min-width: 46px; }
  .row-modified:not(:empty)::before { content: "·"; margin-right: 8px; }
  .row-menu, .btn-square, .field-clear { min-width: 44px; min-height: 44px; }
  .viewer { position: fixed; inset: 0; width: auto; border: 0; z-index: 35; padding-top: var(--safe-t); background: var(--bg); backdrop-filter: none; }
  .viewer-bar { min-height: 62px; }
  .viewer-title { font-size: 20px; }
  .viewer-body { padding: 6px 10px 16px; }
  .selbar { left: 0; }
  .statusbar { left: 12px; right: auto; max-width: calc(100vw - 24px); }
  .fabs { left: auto; right: calc(16px + var(--safe-r)); bottom: calc(16px + var(--safe-b)); gap: 12px; }
  .fab { width: 56px; height: 56px; border-radius: 16px; }
  .fab-feature { width: 46px; height: 46px; border-radius: 14px; }
  .tools-view { padding: 26px 20px; }
  .tool-entry { gap: 14px; grid-template-columns: 32px minmax(0,1fr); }
  .tool-entry strong { font-size: 22px; }
  .mode-switch button, .palette-control select { min-height: 44px; }
  .upload-results { padding-inline: 16px; }
}
/* A phone on its side has width to spare and almost no height, so the menu
   button, place, path and filter share one header line and the list takes
   the rest. An open document docks to the right of the list. The width is
   what says "on its side": a keyboard shortens a portrait phone just as much,
   and it stays narrow throughout. */
@media (min-width: 561px) and (max-height: 560px) and (pointer: coarse) {
  :root { --preview-width: clamp(300px, 58vw, 640px); --rail: 0px; }
  .app, .app:has(.upload-results:not([hidden])) {
    display: grid; grid-template-areas: none;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
  }
  .workbench { display: contents; }
  .mobile-topbar { grid-column: 1; grid-row: 1; min-height: 0; padding: calc(4px + var(--safe-t)) 0 4px calc(8px + var(--safe-l)); border-bottom: 1px solid var(--line); }
  .app:has(.toolbar[hidden]) .mobile-topbar { grid-column: 1 / -1; }
  .toolbar {
    grid-column: 2; grid-row: 1; display: flex; flex-direction: row; align-items: center; gap: 12px;
    padding: calc(4px + var(--safe-t)) calc(12px + var(--safe-r)) 4px 8px; border-bottom: 1px solid var(--line);
  }
  #library-heading { order: -1; flex: none; padding: 0; font-size: 24px; }
  .toolbar .crumbs { flex: 1 1 auto; min-height: 44px; padding: 0; }
  .toolbar-actions { display: none; }
  .toolbar .search-line { display: block; flex: 0 1 240px; min-width: 150px; max-width: none; padding: 0; }
  .upload-results { grid-column: 1 / -1; grid-row: 2; }
  .workspace, .tools-view { grid-column: 1 / -1; grid-row: 3; min-height: 0; }
  .content { padding: 4px calc(12px + var(--safe-r)) calc(84px + var(--safe-b)) calc(12px + var(--safe-l)); }
  .workbench:has(.viewer:not([hidden])) .content { padding-right: 12px; }
  .row-open { min-height: 54px; }
  .row-modified { display: inline; }
  /* the create buttons float at the foot of the list, clear of the preview */
  .fabs { flex-direction: row; bottom: calc(12px + var(--safe-b)); }
  .workbench:has(.viewer:not([hidden])) .fabs { right: calc(var(--preview-width) + 16px); }
  .viewer {
    position: relative; inset: auto; z-index: auto; flex: none; width: var(--preview-width);
    padding-top: 0; border-left: 1px solid var(--line); background: var(--bg);
  }
  .viewer-bar { min-height: 52px; padding: 4px calc(8px + var(--safe-r)) 4px 12px; }
  .viewer-title { font-size: 17px; }
  .pdf-container { inset: 4px calc(10px + var(--safe-r)) calc(56px + var(--safe-b)) 10px; }
  .viewer-pager { bottom: calc(6px + var(--safe-b)); }
  .viewer-pager:has(.pdf-zoom:not([hidden])) { left: 10px; right: calc(10px + var(--safe-r)); }
  .navigation-overlay { padding-left: 0; }
  .navigation-overlay .library-sidebar { width: min(320px, 70vw); }
  .sidebar-bottom { padding-top: 20px; }
  .overlay-layer:not(.navigation-overlay) { padding-left: 0; }
}
@keyframes preview-in { from { opacity: .75; transform: translateX(8px); } }
@media (min-width: 1200px) {
  :root {
    --kind-width: clamp(110px, 9.2vw, 140px);
    --date-width: clamp(158px, 13.25vw, 202px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .viewer { animation: none; }
}