/* The rail's categories, the sort controls and the category tags. Its own file so the
   panel's main stylesheet is not the one every feature appends to. */

.rail-head { display: flex; align-items: center; gap: 4px; margin: 14px 4px 4px 8px; }
.rail-head h3 { flex: 1; margin: 0; }
select.sort { font-size: 12px; padding: 3px 6px; }
select.sort.compact { font-size: 11px; padding: 1px 4px; max-width: 92px; background: var(--raise); color: var(--fg); border-color: var(--line); }
.rail-hint { font-size: 11.5px; color: var(--muted); margin: 2px 8px 6px; }
.cat { margin: 2px 0 6px; border-radius: 6px; }
.cat.drop { outline: 2px dashed var(--accent); outline-offset: -2px; }
.cat-h { display: flex; align-items: center; gap: 5px; padding: 3px 4px; }
.cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 9px/1.6 var(--pixel); -webkit-font-smoothing: none; }
.uncat .cat-name { color: var(--muted); }
.cat-h .m { font: 11px var(--mono); color: var(--muted); }
.swatch { width: 9px; height: 9px; border-radius: 2px; background: var(--cc); flex: none; }
.twisty { all: unset; cursor: pointer; width: 14px; text-align: center; color: var(--muted); }
.twisty:focus-visible { outline: 2px solid var(--accent); }
.icon.small { width: 18px; height: 18px; font-size: 12px; }
ul.members { list-style: none; margin: 0 0 0 10px; padding: 0 0 0 4px; border-left: 2px solid var(--cc, transparent); }
.uncat ul.members { border-left-color: transparent; }
ul.members li { border-radius: 5px; }
ul.members li[draggable="true"] { cursor: grab; }
ul.members li.drop-before { box-shadow: inset 0 2px 0 var(--accent); }
.rail ul.members a { padding: 3px 6px; justify-content: flex-start; gap: 4px; }
.rail ul.members a .l { flex: 1; min-width: 0; }
.kind-dot { font: 9px var(--mono); color: var(--muted); width: 10px; flex: none; }
.rail > a.page { margin-left: 16px; }
.page-row { display: flex; align-items: center; gap: 2px; }
.page-row .twisty { flex: none; }
.page-row a.page { flex: 1; min-width: 0; padding-left: 4px; }
ul.page-members { margin-bottom: 4px; border-left-color: var(--line); }
.kind-h { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin: 8px 4px 2px 10px; font: 9px/1.6 var(--pixel); color: var(--muted); -webkit-font-smoothing: none; }
.note-card { all: unset; box-sizing: border-box; cursor: pointer; display: block; width: calc(100% - 6px); margin: 3px; padding: 4px 7px; border-radius: 4px; background: #fbf0b4; color: #2a1b0c; font-size: 12px; box-shadow: 1px 1px 0 rgb(0 0 0 / .2); }
.note-card b { display: block; font-weight: 600; }
.note-card span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: pre-line; }
.note-card:focus-visible { outline: 2px solid var(--accent); }
.divider-label { all: unset; cursor: pointer; display: block; width: calc(100% - 8px); margin: 6px 4px 2px; padding-top: 2px; border-top: 1px dashed var(--muted); font: 9px/1.6 var(--pixel); color: var(--muted); -webkit-font-smoothing: none; }
li.link, li.dangling { display: flex; align-items: center; gap: 4px; padding: 2px 4px 2px 6px; }
.link-title { all: unset; cursor: pointer; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; text-decoration: underline dotted; }
.link-title::before { content: "↗ "; color: var(--muted); }
li.dangling s { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
.empty-cat { font-size: 11px; color: var(--muted); padding: 3px 6px; }
.cat-tag { display: inline-block; margin-top: 5px; padding: 0 6px; border-left: 3px solid var(--cc); font: 11px var(--mono); color: var(--muted); }
.modal-actions .spacer { flex: 1; }
:root[data-theme="book"] select.sort.compact { background: rgb(255 240 210 / .12); }
:root[data-theme="book"] select.sort.compact option { color: #2a1b0c; }