/* PaperShelf: a quiet library, in daylight and after hours. */
:root {
  color-scheme:light;
  --canvas:#f7f8fa;
  --surface:#fff;
  --sidebar:#f4f5f7;
  --paper:#fdfcf9;
  --ink:#252e35;
  --muted:#6d7881;
  --line:#e5e8eb;
  --hover:#edf0f2;
  --accent:#247668;
  --accent-hover:#195d52;
  --accent-soft:#e8f2ee;
  --accent-ink:#216959;
  --danger:#ae3e42;
  --shadow:0 16px 50px #22333d12;
  --topbar-height:88px;
  font-family:Inter,"Segoe UI",system-ui,sans-serif;
  color:var(--ink);
  background:var(--canvas);
  font-size:14px;
}
:root[data-theme=dark] {
  color-scheme:dark;
  --canvas:#171c20;
  --surface:#1d2429;
  --sidebar:#191f24;
  --paper:#20272b;
  --ink:#e5e9e9;
  --muted:#a0adb3;
  --line:#313b41;
  --hover:#293339;
  --accent:#80cbb5;
  --accent-hover:#9cdac8;
  --accent-soft:#263e37;
  --accent-ink:#a3d9c7;
  --danger:#f6a2a5;
  --shadow:0 16px 50px #0003;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  line-height:1.6;
}
button,input,select,textarea {
  font:inherit;
  color:inherit;
}
button,a,input,select,textarea,summary {
  -webkit-tap-highlight-color:transparent;
}
button,input,select,textarea {
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--surface);
}
button {
  min-height:44px;
  padding:9px 15px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:550;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
button:hover {
  background:var(--hover);
  border-color:var(--muted);
}
button:disabled {
  opacity:.65;
  cursor:wait;
}
input,select,textarea {
  width:100%;
  min-height:44px;
  padding:10px 12px;
  margin:6px 0 16px;
}
input::placeholder,textarea::placeholder {
  color:var(--muted);
  opacity:1;
}
textarea {
  min-height:120px;
  resize:vertical;
}
label {
  display:block;
  font-size:13px;
  font-weight:550;
}
a {
  color:inherit;
  text-underline-offset:4px;
  text-decoration-thickness:1px;
}
a:hover {
  color:var(--accent-ink);
}
:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:3px;
}
input:focus,select:focus,textarea:focus {
  border-color:var(--accent);
}
h1,h2,h3 {
  line-height:1.25;
  color:var(--ink);
}
h1 {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  letter-spacing:-.035em;
}
h2 {
  font-size:18px;
}
p {
  margin:0 0 16px;
}
small {
  color:var(--muted);
}
.icon {
  width:19px;
  height:19px;
  flex-shrink:0;
  vertical-align:middle;
}
.icon-button {
  padding:10px;
  min-width:44px;
  flex-shrink:0;
}
.button-primary {
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  box-shadow:0 2px 3px #142e2310;
}
.button-primary:hover {
  background:var(--accent-hover);
  border-color:var(--accent-hover);
  color:#fff;
}
:root[data-theme=dark] .button-primary {
  color:#102b23;
}
.button-quiet {
  background:transparent;
  border-color:transparent;
}
.button-quiet:hover {
  border-color:var(--line);
  background:var(--hover);
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.skip-link {
  position:fixed;
  left:16px;
  top:-80px;
  z-index:100;
  background:var(--surface);
  padding:12px 20px;
  border:2px solid var(--accent);
  border-radius:10px;
}
.skip-link:focus {
  top:12px;
}
kbd {
  font:11px/1.4 system-ui,sans-serif;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:5px;
  padding:3px 6px;
  background:var(--surface);
}
.eyebrow,.nav-label {
  font-size:10px;
  letter-spacing:.13em;
  font-weight:700;
  color:var(--muted);
}
/* Global navigation */
.topbar {
  height:var(--topbar-height);
  display:flex;
  align-items:center;
  gap:28px;
  padding:0 28px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:30;
}
.brand {
  display:flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  flex-shrink:0;
  font-family:Georgia,serif;
  font-size:26px;
  letter-spacing:-1px;
  line-height:1.1;
}
.brand:hover {
  color:var(--ink);
}
.brand-mark {
  width:40px;
  height:44px;
  display:grid;
  place-items:center;
  background:var(--accent);
  color:white;
  border-radius:11px 11px 11px 3px;
}
.brand-mark .icon {
  width:24px;
  height:24px;
}
.brand-caption {
  display:block;
  font-family:system-ui,sans-serif;
  font-size:8px;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--muted);
  margin-top:7px;
}
.global-search {
  position:relative;
  display:flex;
  align-items:center;
  flex:1;
  max-width:520px;
  margin-left:16px;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--canvas);
  padding:0 12px;
  gap:10px;
  height:44px;
}
.global-search:focus-within {
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.global-search>.icon {
  color:var(--muted);
  width:18px;
}
.global-search input {
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  min-width:0;
  outline:none;
  font-size:13px;
  height:42px;
  flex:1;
}
.global-search input:focus-visible {
  outline:none;
}
.global-search kbd {
  min-width:23px;
  text-align:center;
}
.search-submit {
  border:0;
  padding:4px;
  min-width:28px;
  min-height:32px;
  color:var(--muted);
  background:transparent;
  font-size:18px;
}
.top-actions {
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.top-actions>form {
  margin:0;
}
.top-actions button {
  font-size:12px;
}
.action-divider {
  height:24px;
  width:1px;
  background:var(--line);
  margin:0 4px;
}
.theme-toggle {
  background:transparent;
  border:0;
  color:var(--muted);
}
.theme-sun {
  display:none;
}
:root[data-theme=dark] .theme-sun {
  display:inline;
}
:root[data-theme=dark] .theme-moon {
  display:none;
}
.account-menu {
  position:relative;
  padding:0;
  border:0;
}
.account-menu summary {
  list-style:none;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  padding:0;
}
.account-menu summary::-webkit-details-marker {
  display:none;
}
.avatar {
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  background:var(--accent-soft);
  color:var(--accent-ink);
  border:1px solid var(--line);
  border-radius:50%;
  font-size:12px;
  font-weight:650;
}
.account-panel {
  position:absolute;
  right:0;
  top:52px;
  width:210px;
  padding:18px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
}
.account-panel small,.account-panel strong {
  display:block;
  overflow-wrap:anywhere;
}
.account-panel form {
  margin-top:16px;
}
.account-panel button {
  width:100%;
}
.topbar-tagline {
  margin-left:auto;
  font-size:13px;
  color:var(--muted);
}
/* Three-column library */
.workspace {
  display:grid;
  grid-template-columns:var(--library-sidebar-width,196px) 300px minmax(0,1fr);
  min-height:calc(100vh - var(--topbar-height));
  align-items:start;
}
.sidebar {
  position:sticky;
  top:var(--topbar-height);
  height:calc(100dvh - var(--topbar-height));
  overflow-y:auto;
  padding:28px 16px 16px;
  border-right:1px solid var(--line);
  background:var(--sidebar);
  scrollbar-width:thin;
}
.sidebar nav {
  min-height:100%;
  display:flex;
  flex-direction:column;
  row-gap:6px;
}
.nav-label {
  margin:0 12px 12px;
  font-size:9px;
  letter-spacing:.12em;
}
.nav-link {
  display:flex;
  align-items:center;
  gap:11px;
  min-height:43px;
  padding:10px 12px;
  text-decoration:none;
  font-size:12px;
  border-radius:8px;
  color:var(--muted);
  font-weight:500;
  line-height:1.35;
}
.nav-link .icon {
  width:17px;
  height:17px;
}
.nav-link:hover {
  background:var(--hover);
  color:var(--ink);
}
.nav-link.active {
  background:var(--accent-soft);
  color:var(--accent-ink);
  font-weight:650;
}
.nav-group {
  margin-top:27px;
}
.nav-hint {
  font-size:11px;
  color:var(--muted);
  line-height:1.6;
  padding:0 12px;
  margin:0 0 6px;
}
.taxonomy {
  display:flex;
  align-items:center;
  min-width:0;
}
.taxonomy .nav-link {
  min-width:0;
  flex:1;
}
.taxonomy .nav-link span {
  overflow:hidden;
  text-overflow:ellipsis;
}
.taxonomy .icon-button {
  min-width:32px;
  min-height:32px;
  padding:4px;
  background:transparent;
  border:0;
  color:var(--muted);
}
.taxonomy-create {
  padding:0;
  border:0;
  font-size:12px;
  margin:0 12px;
}
.taxonomy-create summary {
  color:var(--muted);
  list-style:none;
  min-height:40px;
  display:flex;
  align-items:center;
  padding:4px 0;
}
.taxonomy-create summary::-webkit-details-marker {
  display:none;
}
.taxonomy-create summary:hover {
  color:var(--accent-ink);
}
.taxonomy-create input {
  font-size:12px;
}
.taxonomy-create button {
  width:100%;
  font-size:12px;
}
.nav-bottom {
  margin-top:auto;
  padding-top:32px;
  display:grid;
  gap:6px;
}
.sidebar-footer {
  display:flex;
  align-items:center;
  gap:8px;
  border-top:1px solid var(--line);
  margin:22px 10px 0;
  padding:20px 0 0;
  font-size:10px;
  color:var(--muted);
}
.status-dot,.unread-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
}
.mobile-nav-toggle {
  display:none;
}
.article-list {
  border-right:1px solid var(--line);
  min-height:calc(100vh - var(--topbar-height));
  background:var(--surface);
  padding:28px 18px 12px;
  min-width:0;
}
.list-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 6px;
}
.list-heading .eyebrow {
  font-size:9px;
  margin-bottom:7px;
}
.list-heading h1 {
  font:600 21px/1.3 system-ui,sans-serif;
  letter-spacing:-.6px;
  margin:0;
  overflow-wrap:anywhere;
}
.count-badge {
  font-size:11px;
  font-weight:600;
  padding:3px 9px;
  background:var(--hover);
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:6px;
}
.list-sort {
  display:flex;
  align-items:center;
  gap:6px;
  border-bottom:1px solid var(--line);
  margin:15px 6px 12px;
  padding:0 0 12px;
  color:var(--muted);
}
.list-sort label {
  font-size:11px;
  font-weight:400;
}
.list-sort select {
  width:auto;
  min-width:0;
  flex:1;
  margin:0;
  padding:5px 3px;
  min-height:36px;
  background:transparent;
  border:0;
  font-size:11px;
}
.list-sort button {
  padding:5px 7px;
  min-height:36px;
  min-width:36px;
  background:transparent;
  border:0;
}
.list-sort .icon {
  width:15px;
}
.search-context {
  font-size:12px;
  margin:16px 6px 0;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.search-context a {
  float:right;
  text-decoration:none;
  font-size:18px;
}
.card {
  padding:19px 16px 16px;
  border:1px solid transparent;
  border-bottom-color:var(--line);
  border-radius:10px;
  margin-bottom:5px;
  position:relative;
  transition:background .15s;
}
.card:hover {
  background:var(--canvas);
}
.card.selected {
  background:var(--accent-soft);
  border-color:color-mix(in srgb,var(--accent) 25%,transparent);
}
.card.selected:before {
  content:"";
  position:absolute;
  left:-1px;
  top:25px;
  bottom:25px;
  width:3px;
  border-radius:2px;
  background:var(--accent);
}
.card-meta {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  color:var(--muted);
  min-width:0;
  white-space:nowrap;
}
.source-mark {
  display:grid;
  place-items:center;
  min-width:22px;
  height:22px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
  font-size:10px;
  font-weight:650;
  color:var(--accent-ink);
}
.source-mark .icon {
  width:13px;
  height:13px;
}
.card-source {
  overflow:hidden;
  text-overflow:ellipsis;
}
.card-check {
  margin-left:auto;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  flex-shrink:0;
  cursor:pointer;
}
.card-check input {
  width:14px;
  min-height:14px;
  height:14px;
  margin:0;
  accent-color:var(--accent);
  opacity:.5;
}
.card:hover .card-check input,.card-check input:checked,.card-check input:focus-visible {
  opacity:1;
}
.card h2 {
  font:400 21px/1.35 Georgia,serif;
  letter-spacing:-.35px;
  margin:11px 0 9px;
  overflow-wrap:anywhere;
}
.card h2 a {
  text-decoration:none;
}
.card h2 a:hover {
  color:var(--accent-ink);
}
.card-author {
  font-size:11px;
  color:var(--muted);
  margin:0 0 16px;
}
.card-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:10px;
  color:var(--muted);
  min-height:22px;
}
.card-badges {
  display:flex;
  align-items:center;
  gap:8px;
}
.favorite-badge {
  color:var(--accent-ink);
}
.favorite-badge .icon {
  width:13px;
  height:13px;
  fill:currentColor;
}
.status-pill {
  font-size:9px;
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:2px 6px;
  border-radius:5px;
  background:var(--hover);
}
.status-pill .icon {
  width:11px;
  height:11px;
}
.status-pill.pending {
  color:var(--accent-ink);
  background:var(--accent-soft);
}
.status-pill.failed {
  color:var(--danger);
}
.bulk-actions {
  padding:12px;
  background:var(--canvas);
  border:1px solid var(--line);
  border-radius:10px;
  margin:10px 0;
}
.bulk-actions label {
  font-size:11px;
}
.bulk-actions select {
  font-size:12px;
  margin-bottom:8px;
}
.bulk-actions button {
  font-size:12px;
  width:100%;
}
[hidden] {
  display:none!important;
}
.list-empty {
  text-align:center;
  padding:56px 12px;
  color:var(--muted);
}
.list-empty>.icon {
  width:32px;
  height:32px;
  opacity:.7;
}
.list-empty h2 {
  font-size:15px;
  font-weight:550;
  margin:20px 0 10px;
}
.list-empty p {
  font-size:12px;
}
.list-empty button {
  font-size:12px;
}
.pages {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:22px 8px;
  font-size:11px;
  color:var(--muted);
}
/* Reading surface */
.reader {
  min-width:0;
  min-height:calc(100vh - var(--topbar-height));
  padding:24px 18px 48px;
  background:var(--paper);
}
.reader>div[data-article] {
  max-width:1000px;
  margin:auto;
}
.reader-topline {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:42px;
  color:var(--muted);
}
.reader-topline .eyebrow {
  font-size:9px;
}
.reading-time {
  margin-left:auto;
  white-space:nowrap;
  font-size:10px;
}
.reader-back {
  display:none;
  align-items:center;
  gap:6px;
  font-size:12px;
  text-decoration:none;
}
.reader-heading {
  margin-bottom:26px;
}
.reader-source {
  display:flex;
  align-items:center;
  gap:8px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:10px;
  font-weight:600;
  color:var(--accent-ink);
  overflow-wrap:anywhere;
}
.reader-source .icon {
  width:15px;
}
.reader h1 {
  font-size:clamp(30px,3vw,46px);
  line-height:1.17;
  margin:18px 0 20px;
  overflow-wrap:anywhere;
}
.reader-byline {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:11px;
  color:var(--muted);
  margin:0;
}
.toolbar {
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
  padding:12px 0;
  margin:0 0 8px;
  border-block:1px solid var(--line);
}
.toolbar form {
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
}
.toolbar button,.toolbar-link {
  min-height:38px;
  padding:7px 9px;
  font-size:11px;
  line-height:1.4;
  background:transparent;
  border:1px solid transparent;
  border-radius:7px;
  box-shadow:none;
}
.toolbar button:hover,.toolbar-link:hover {
  border-color:var(--line);
  background:var(--hover);
}
.toolbar .icon {
  width:15px;
  height:15px;
}
.toolbar .icon-button {
  min-width:36px;
}
.toolbar-link {
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
}
.toolbar button.is-active {
  color:var(--accent-ink);
  background:var(--accent-soft);
}
.toolbar button.is-active[name=favorite] .icon {
  fill:currentColor;
}
.original-link {
  margin-left:auto;
}
details {
  padding:15px 0;
  border-bottom:1px solid var(--line);
}
summary {
  cursor:pointer;
  min-height:32px;
  font-size:12px;
  font-weight:550;
  align-content:center;
  color:var(--muted);
}
summary:hover {
  color:var(--ink);
}
details[open]>summary {
  margin-bottom:16px;
  color:var(--ink);
}
details p {
  font-size:13px;
  color:var(--muted);
}
fieldset {
  border:1px solid var(--line);
  border-radius:9px;
  margin:0 0 16px;
  padding:16px;
}
legend {
  color:var(--muted);
  font-size:12px;
  padding:0 6px;
}
.check {
  display:flex;
  align-items:center;
  gap:10px;
  min-height:36px;
}
.check input {
  width:16px;
  height:16px;
  min-height:16px;
  margin:0;
  accent-color:var(--accent);
}
.reader-options {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
  border-bottom:1px solid var(--line);
  padding-bottom:6px;
}
.reader-options details {
  padding:0;
  border:0;
  min-width:0;
}
.reader-options summary {
  font-size:10px;
  min-height:36px;
}
.reader-options summary .icon {
  width:13px;
  height:13px;
  margin-right:4px;
}
.reader-options details[open] {
  grid-column:1/-1;
  padding:12px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:9px;
  order:1;
}
.reader-options details[open]>summary {
  font-size:12px;
}
.settings-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 16px;
}
.reader-options button {
  font-size:11px;
  margin-bottom:8px;
}
.annotation-tools {
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
  padding:11px 0;
}
.annotation-tools>span {
  font-size:10px;
  color:var(--muted);
  margin-right:auto;
}
.annotation-tools button {
  min-height:32px;
  padding:5px 8px;
  font-size:10px;
  border:0;
  background:transparent;
  color:var(--muted);
}
.annotation-tools button:hover {
  background:var(--hover);
  color:var(--ink);
}
#annotation-status:empty {
  display:none;
}
#annotation-status {
  color:var(--accent-ink);
  font-size:12px;
  padding:12px;
  margin:0;
  background:var(--accent-soft);
  border-radius:8px;
}
.prose {
  font-size:var(--reader-font-size,21px);
  font-family:var(--reader-font-family,serif);
  line-height:var(--reader-line-height,1.75);
  max-width:var(--reader-width,90ch);
  margin:32px auto 48px;
  overflow-wrap:anywhere;
  color:var(--ink);
}
.prose p {
  margin:0 0 1.25em;
}
.prose h1,.prose h2,.prose h3 {
  font-family:Georgia,serif;
  letter-spacing:-.025em;
  font-weight:500;
  line-height:1.3;
  margin:1.5em 0 .7em;
}
.prose h2 {
  font-size:1.5em;
}
.prose h3 {
  font-size:1.2em;
}
.prose a {
  color:var(--accent-ink);
}
.prose img {
  max-width:100%;
  height:auto;
  display:block;
  margin:28px auto;
  border-radius:8px;
}
.prose figure {
  margin:28px 0;
}
.prose figcaption {
  color:var(--muted);
  font:12px/1.6 system-ui,sans-serif;
  text-align:center;
}
.prose blockquote {
  border-left:3px solid var(--accent);
  margin:24px 0;
  padding:4px 0 4px 24px;
  color:var(--muted);
}
.prose pre {
  overflow:auto;
  font-size:.8em;
  background:var(--canvas);
  padding:16px;
  border:1px solid var(--line);
  border-radius:8px;
}
.prose hr {
  border:0;
  border-top:1px solid var(--line);
  margin:2em 0;
}
.prose table {
  border-collapse:collapse;
  display:block;
  overflow:auto;
  max-width:100%;
  font-size:.85em;
}
.prose td,.prose th {
  border:1px solid var(--line);
  padding:8px;
}
mark {
  background:var(--accent-soft);
  border-bottom:2px solid var(--accent);
  color:inherit;
}
.reader:fullscreen {
  overflow:auto;
  background:var(--paper);
  padding-top:36px;
}
html.reader-hide-images .prose img {
  display:none;
}
.pdf-view {
  width:100%;
  height:75vh;
  border:1px solid var(--line);
  border-radius:10px;
}
.note-card {
  padding:24px 0;
  border-bottom:1px solid var(--line);
}
.note-card .prose {
  font-size:18px;
  margin:16px 0;
}
.note-card img {
  max-width:100%;
  max-height:480px;
  object-fit:contain;
}
.note-card button {
  font-size:11px;
  margin-top:10px;
}
.note-card blockquote {
  border-left:3px solid var(--accent);
  margin:0 0 16px;
  padding-left:16px;
  color:var(--muted);
  font:italic 18px/1.6 Georgia,serif;
}
/* Empty shelf illustration: native shapes, no external assets. */
.reader-welcome {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:calc(100dvh - var(--topbar-height) - 120px);
  padding:26px 0;
}
.reader-welcome .eyebrow {
  font-size:9px;
  margin:0 0 4px;
}
.reader-welcome h1 {
  font-size:clamp(28px,2.9vw,44px);
  line-height:1.2;
  margin:15px 0 20px;
}
.reader-welcome>p:not(.eyebrow) {
  color:var(--muted);
  font-size:12px;
  line-height:1.9;
}
.reader-welcome>.button-primary {
  margin-top:12px;
  font-size:12px;
}
.welcome-art {
  position:relative;
  width:190px;
  height:175px;
  margin-bottom:30px;
  display:grid;
  place-items:center;
}
.welcome-orbit {
  position:absolute;
  border:1px solid var(--line);
  border-radius:50%;
  width:164px;
  height:164px;
  background:radial-gradient(circle,var(--accent-soft),transparent 70%);
}
.welcome-paper {
  width:100px;
  height:132px;
  transform:rotate(-9deg);
  border-radius:8px;
  border:1px solid var(--line);
  background:var(--surface);
  padding:28px 16px;
  box-shadow:8px 10px 0 var(--accent-soft),var(--shadow);
  position:relative;
}
.welcome-paper>span {
  display:block;
  height:3px;
  margin-bottom:10px;
  background:var(--line);
  border-radius:3px;
}
.welcome-paper>span:first-child {
  height:6px;
  width:65%;
  background:var(--accent);
  opacity:.65;
  margin-bottom:17px;
}
.welcome-paper>span:nth-child(4) {
  width:78%;
}
.welcome-paper>span:nth-child(5) {
  width:50%;
}
.welcome-paper .icon {
  position:absolute;
  top:-2px;
  right:10px;
  color:var(--accent);
  fill:var(--accent-soft);
  width:18px;
  height:25px;
}
.welcome-spark {
  position:absolute;
  top:20px;
  right:4px;
  font-size:24px;
  color:var(--accent);
  font-weight:300;
}
.welcome-tip {
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:50px;
  color:var(--muted);
  font-size:10px;
}
/* Shared pages and modal */
.document-page {
  max-width:1000px;
  margin:38px auto 64px;
  padding:32px 40px 48px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 4px 20px #152e2604;
}
.document-page h1 {
  font-size:38px;
  margin:10px 0 28px;
}
.document-page>p:first-child {
  font-size:12px;
}
.document-page .toolbar {
  margin:20px 0;
}
.document-page .toolbar button {
  border:1px solid var(--line);
  font-size:12px;
  min-height:40px;
}
.document-page>form:not(#document-editor) {
  padding:20px;
  background:var(--canvas);
  border-radius:10px;
  margin-bottom:24px;
}
.document-page button {
  min-height:44px;
}
.edit-surface {
  border:1px solid var(--line);
  border-radius:10px;
  min-height:360px;
  padding:28px;
  max-width:none;
  background:var(--paper);
}
.edit-surface:focus {
  outline:2px solid var(--accent);
  outline-offset:3px;
}
#save-document,.login button {
  background:var(--accent);
  color:var(--surface);
  border-color:var(--accent);
  margin-right:16px;
}
#upload-status,#draft-status {
  font-size:12px;
  color:var(--muted);
}
.login {
  max-width:460px;
  margin:9vh auto;
  padding:40px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
  box-shadow:var(--shadow);
}
.login h1 {
  font-size:36px;
  margin:0 0 20px;
}
.login>p {
  color:var(--muted);
  font-size:13px;
  margin-bottom:28px;
}
.login button {
  width:100%;
  margin-top:8px;
}
.errorlist {
  color:var(--danger);
  font-size:12px;
  padding-left:18px;
}
.notice {
  padding:14px 24px;
  background:var(--accent-soft);
  color:var(--accent-ink);
  border:1px solid var(--line);
  margin:0;
  font-size:13px;
}
.notice.error {
  color:var(--danger);
}
body.modal-open {
  overflow:hidden;
}
.article-dialog {
  border:1px solid var(--line);
  border-radius:20px;
  padding:38px;
  width:530px;
  max-width:calc(100vw - 32px);
  max-height:calc(100dvh - 32px);
  background:var(--surface);
  color:var(--ink);
  box-shadow:0 32px 100px #0003;
}
.article-dialog::backdrop {
  background:#14222ca8;
  backdrop-filter:blur(5px);
}
.dialog-close {
  position:absolute;
  right:12px;
  top:12px;
  background:transparent;
  border:0;
  color:var(--muted);
}
.dialog-symbol {
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:13px;
  background:var(--accent-soft);
  color:var(--accent-ink);
  margin-bottom:24px;
}
.dialog-symbol .icon {
  width:24px;
  height:24px;
}
.article-dialog .eyebrow {
  font-size:9px;
}
.article-dialog h2 {
  font:400 36px/1.2 Georgia,serif;
  letter-spacing:-1px;
  margin:12px 0 16px;
}
.article-dialog>p {
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  margin-bottom:26px;
}
.url-field {
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:10px;
  padding:0 12px;
  margin:8px 0 12px;
  background:var(--canvas);
}
.url-field:focus-within {
  outline:2px solid var(--accent);
  outline-offset:2px;
}
.url-field .icon {
  color:var(--muted);
  width:17px;
}
.url-field input {
  border:0;
  outline:none;
  margin:0;
  padding:12px 0;
  min-width:0;
  background:transparent;
  font-size:14px;
}
.url-field input:focus-visible {
  outline:none;
}
.field-hint {
  font-size:11px;
  color:var(--muted);
  line-height:1.7;
}
.field-hint a {
  color:var(--accent-ink);
}
.dialog-actions {
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:28px;
}
.dialog-actions button {
  font-size:12px;
  min-height:44px;
}
@media(min-width:1600px) {
  .reader {
    padding-inline:18px;
  }
  .topbar {
    padding-inline:32px;
  }
  .global-search {
    margin-left:42px;
  }
  .card h2 {
    font-size:23px;
  }
}
@media(max-width:1200px) {
  .topbar {
    padding:0 20px;
    gap:18px;
  }
  .brand-caption {
    display:none;
  }
  .brand {
    font-size:23px;
  }
  .global-search {
    margin-left:0;
  }
  .new-note {
    padding:9px;
  }
  .new-note .icon {
    display:none;
  }
  .top-actions {
    gap:4px;
  }
  .top-actions button {
    font-size:11px;
  }
  .sidebar {
    padding-inline:10px;
  }
  .nav-link {
    font-size:11px;
    padding-inline:9px;
    gap:8px;
  }
  .reader {
    padding-inline:28px;
  }
  .reader-topline .eyebrow {
    font-size:8px;
  }
  .reader-options {
    grid-template-columns:1fr 1fr;
  }
  .reader-options details:last-child {
    grid-column:1/-1;
  }
  .reader-welcome>p br {
    display:none;
  }
  .card {
    padding-inline:12px;
  }
}
@media(max-width:1000px) and (min-width:901px) {
  .brand>span:last-child {
    display:none;
  }
  .brand {
    width:40px;
  }
  .article-list {
    padding-inline:12px;
  }
  .reader {
    padding-inline:24px;
  }
  .reader-topline .eyebrow {
    display:none;
  }
  .reader h1 {
    font-size:32px;
  }
  .toolbar button,.toolbar-link {
    font-size:10px;
    padding-inline:6px;
  }
  .annotation-tools>span {
    display:none;
  }
}
@media(max-width:900px) {
  :root {
    --topbar-height:126px;
  }
  .topbar {
    height:var(--topbar-height);
    padding:14px 20px;
    flex-wrap:wrap;
    gap:10px 16px;
    align-content:center;
  }
  .brand {
    font-size:23px;
  }
  .brand-mark {
    height:36px;
    width:34px;
    border-radius:8px;
  }
  .brand-mark .icon {
    width:21px;
  }
  .brand-caption {
    display:none;
  }
  .global-search {
    order:3;
    flex-basis:100%;
    max-width:none;
    height:40px;
  }
  .global-search input {
    height:38px;
    min-height:38px;
  }
  .top-actions {
    margin-left:auto;
  }
  .new-note .icon {
    display:block;
  }
  .new-note {
    padding:8px 10px;
  }
  .action-divider {
    display:none;
  }
  .workspace {
    display:block;
    min-height:calc(100dvh - var(--topbar-height));
  }
  .sidebar {
    position:static;
    height:auto;
    padding:8px 16px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .mobile-nav-toggle {
    display:flex;
    width:100%;
    justify-content:flex-start;
    min-height:40px;
    color:var(--muted);
    font-size:12px;
  }
  .mobile-nav-toggle .icon:last-child {
    margin-left:auto;
  }
  .sidebar nav {
    display:none;
    padding:16px 6px;
  }
  .sidebar.nav-open nav {
    display:flex;
  }
  .sidebar.nav-open .mobile-nav-toggle .icon:last-child {
    transform:rotate(45deg);
  }
  .nav-link {
    font-size:13px;
    min-height:44px;
  }
  .nav-group {
    margin-top:20px;
  }
  .nav-bottom {
    padding-top:16px;
  }
  .article-list {
    border:0;
    min-height:0;
    padding:24px 20px;
  }
  .list-heading h1 {
    font-size:24px;
  }
  .article-cards {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .card {
    border:1px solid var(--line);
    padding:16px;
  }
  .card-meta {
    font-size:11px;
  }
  .card-check {
    width:36px;
    height:36px;
  }
  .card-check input {
    opacity:1;
  }
  .card-footer {
    font-size:11px;
  }
  .card h2 {
    font-size:24px;
  }
  .reader {
    display:none;
    min-height:calc(100dvh - var(--topbar-height));
    padding:20px max(24px,6vw) 48px;
  }
  .has-selection .sidebar,.has-selection .article-list {
    display:none;
  }
  .has-selection .reader {
    display:block;
  }
  .reader-back {
    display:inline-flex;
    min-height:44px;
  }
  .reader-topline {
    margin-bottom:22px;
  }
  .reader-topline .eyebrow {
    display:none;
  }
  .reader-heading {
    margin-top:20px;
  }
  .reader h1 {
    font-size:38px;
  }
  .reader-options {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .reader-options details:last-child {
    grid-column:auto;
  }
  .reader-options details[open],.reader-options details[open]:last-child {
    grid-column:1/-1;
  }
  .toolbar button,.toolbar-link {
    min-height:44px;
    font-size:12px;
  }
  .annotation-tools button {
    min-height:44px;
    font-size:11px;
  }
  .reader-welcome {
    min-height:0;
  }
  .document-page {
    margin:24px 20px;
    padding:28px;
  }
  .login {
    margin:8vh auto;
  }
  .topbar-tagline {
    display:none;
  }
  .topbar:has(.topbar-tagline) {
    height:76px;
    flex-wrap:nowrap;
  }
  .topbar:has(.topbar-tagline) .theme-toggle {
    margin-left:auto;
  }
}
@media(max-width:560px) {
  .topbar {
    padding:12px 14px;
    gap:10px;
  }
  .brand {
    font-size:20px;
    gap:8px;
  }
  .top-actions {
    gap:2px;
  }
  .new-note {
    font-size:11px!important;
    padding:8px 7px;
    gap:5px;
    min-height:44px;
  }
  .new-note .icon {
    display:none;
  }
  .add-article {
    padding:8px 10px;
    gap:5px;
    min-height:44px;
  }
  .add-article .icon {
    width:15px;
  }
  .theme-toggle {
    min-width:36px;
    padding:8px;
  }
  .account-menu summary {
    width:32px;
    height:44px;
  }
  .avatar {
    height:28px;
    width:28px;
  }
  .global-search {
    height:40px;
    padding-inline:10px;
  }
  .global-search kbd {
    display:none;
  }
  .top-actions .action-divider {
    display:none;
  }
  .article-cards {
    grid-template-columns:1fr;
    gap:8px;
  }
  .article-list {
    padding:24px 16px;
  }
  .card {
    padding:18px;
  }
  .card h2 {
    font-size:24px;
  }
  .reader {
    padding:16px 20px 40px;
  }
  .reader h1 {
    font-size:33px;
  }
  .reader-options {
    grid-template-columns:1fr 1fr;
  }
  .reader-options details:last-child {
    grid-column:1/-1;
  }
  .reader-options summary {
    font-size:11px;
    min-height:40px;
  }
  .reader-heading {
    margin-top:10px;
  }
  .toolbar {
    gap:3px;
  }
  .toolbar button,.toolbar-link {
    font-size:11px;
    padding-inline:7px;
  }
  .reader-byline {
    font-size:12px;
  }
  .annotation-tools {
    gap:3px;
  }
  .annotation-tools>span {
    display:none;
  }
  .annotation-tools button {
    font-size:11px;
  }
  .document-page {
    margin:16px 10px;
    padding:22px 18px;
    border-radius:12px;
  }
  .document-page h1 {
    font-size:32px;
  }
  .edit-surface {
    padding:18px;
  }
  .login {
    margin:40px 16px;
    padding:28px;
  }
  .article-dialog {
    padding:30px 24px;
  }
  .article-dialog h2 {
    font-size:32px;
  }
  .dialog-symbol {
    margin-bottom:20px;
  }
  .dialog-actions {
    gap:6px;
  }
  .dialog-actions button {
    font-size:11px;
    padding-inline:10px;
  }
  .topbar .brand-mark {
    display:none;
  }
  .prose {
    font-size:var(--reader-font-size,21px);
  }
  .card-check {
    min-width:44px;
    min-height:44px;
    margin-top:-6px;
    margin-bottom:-6px;
  }
}
@media(max-width:360px) {
  .topbar {
    padding-inline:10px;
  }
  .topbar .brand {
    font-size:19px;
  }
  .new-note {
    font-size:10px!important;
    padding-inline:5px;
  }
  .add-article {
    font-size:10px!important;
    padding-inline:7px;
  }
  .add-article .icon {
    display:none;
  }
  .theme-toggle {
    min-width:32px;
  }
  .account-menu summary {
    width:28px;
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
}
@media print {
  .topbar,.sidebar,.article-list,.toolbar,.reader-options,.annotation-tools,.reader-topline,.skip-link,dialog {
    display:none!important;
  }
  .workspace {
    display:block;
  }
  .reader {
    display:block!important;
    padding:0;
    background:white;
    color:black;
  }
  .prose {
    color:black;
  }
  .reader>div {
    max-width:none;
  }
  .reader details {
    display:none;
  }
  .document-page {
    border:0;
    box-shadow:none;
    margin:0;
  }
}
/* Compact mobile actions keep search on its own second row. */
@media(max-width:560px) {
  .top-actions .new-note {
    width:40px;
    min-width:40px;
    padding:8px;
  }
  .top-actions .new-note .icon {
    display:block;
    width:18px;
    height:18px;
  }
  .top-actions .new-note span {
    display:none;
  }
  .topbar {
    align-content:center;
  }
  .topbar .brand {
    white-space:nowrap;
  }
}
@media(max-width:360px) {
  .topbar .brand>span:last-child {
    display:none;
  }
  .topbar .brand-mark {
    display:grid;
    width:32px;
    height:34px;
  }
  .topbar .brand {
    width:32px;
  }
}
.prose [data-offset] {
  scroll-margin-top:calc(var(--topbar-height) + 24px);
}
/* Folder tree and direct manipulation. */
.folder-tree,.folder-children { list-style:none; padding:0; margin:0; }
.folder-tree { margin:6px 0; }
.folder-children { margin-left:13px; padding-left:9px; border-left:1px solid var(--line); }
.folder-row { display:flex; align-items:center; min-width:0; min-height:44px; margin-bottom:5px; border-radius:8px; }
.folder-row .nav-link { min-width:0; min-height:44px; flex:1; padding:9px 5px; gap:7px; overflow:hidden; }
.folder-row .nav-link:hover,.folder-row .nav-link.active { background:transparent; }
.folder-row .nav-link span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.folder-row .nav-link .icon { width:15px; height:15px; }
.folder-toggle,.folder-action { border:0; background:transparent; color:var(--muted); padding:2px; min-width:24px; min-height:36px; box-shadow:none; }
.folder-toggle-space { flex:0 0 24px; }
.folder-toggle .icon { width:12px; height:12px; transition:transform .15s; }
.folder-toggle[aria-expanded=true] .icon { transform:rotate(90deg); }
.folder-action { font-size:17px; width:28px; min-width:28px; max-width:28px; height:32px; min-height:32px; padding:0; flex-shrink:0; border-radius:8px; opacity:.55; }
.folder-action + .folder-action { margin-left:8px; }
.folder-action:focus-visible { outline-offset:1px; }
.folder-row:hover .folder-action,.folder-row:focus-within .folder-action { opacity:1; }
.folder-row:hover { background:var(--hover); }
.folder-row:has(.active) { background:var(--accent-soft); }
.folder-help { font-size:10px; color:var(--muted); margin:12px 12px 0; line-height:1.6; }
.folder-panel .taxonomy-create label { font-size:11px; }
.folder-panel .taxonomy-create input,.folder-panel .taxonomy-create select { margin:5px 0 12px; font-size:12px; }
.folder-dialog { text-align:left; }
.folder-dialog h2 { margin-top:4px; }
.folder-delete { border-top:1px solid var(--line); margin-top:24px; padding-top:18px; }
.folder-delete p { font-size:11px; color:var(--muted); }
.button-danger { color:var(--danger); }
.dragging { opacity:.4; }
.drag-active [data-folder-target] { outline:1px dashed var(--line); outline-offset:-1px; }
.drag-active [data-folder-target].drop-target { background:var(--accent-soft); outline:2px solid var(--accent); }
[data-drag-kind] { cursor:grab; }
[data-drag-kind]:active { cursor:grabbing; }
.library-feedback { padding:12px; margin:12px 0; background:var(--accent-soft); border:1px solid var(--line); border-radius:8px; font-size:12px; }
.library-feedback p { margin:0; overflow-wrap:anywhere; }
.library-feedback button { font-size:11px; margin:8px 4px 0 0; white-space:normal; }
/* A real stretched link preserves keyboard, Ctrl-click and middle-click behavior. */
.card h2 a::after { content:""; position:absolute; inset:0; border-radius:10px; }
.card:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.card-check,.card-action-link { position:relative; z-index:2; }
.card-action-link { font-size:12px; display:inline-block; padding:8px 0; }
.reader-heading h1[data-edit-url] { cursor:text; }
.reader-topline { margin-bottom:22px; }
.reader-welcome>.icon { width:34px; height:34px; color:var(--muted); margin-bottom:12px; }
.editor-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; position:sticky; top:calc(var(--topbar-height) + 8px); z-index:10; background:var(--surface); padding:12px 0; border-bottom:1px solid var(--line); margin-bottom:24px; }
.editor-heading h1 { margin:0; }
.editor-heading button { flex-shrink:0; }
.notes-workspace { display:grid; grid-template-columns:220px minmax(0,1fr); align-items:start; min-height:calc(100vh - var(--topbar-height)); }
.notes-workspace .document-page { width:calc(100% - 64px); min-width:0; }
.personal-note-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:32px; }
.personal-note-cards .card { border:1px solid var(--line); }
@media(max-width:1200px) { .folder-row .nav-link { font-size:11px; } .folder-row .nav-link .icon { display:none; } .folder-action { min-width:20px; } }
@media(max-width:900px) { .notes-workspace { display:block; } .notes-workspace .document-page { width:auto; } .folder-row .nav-link { font-size:13px; } .folder-row .nav-link .icon { display:block; } .folder-toggle,.folder-action { min-width:36px; min-height:44px; } .folder-action { opacity:1; } .folder-children { margin-left:18px; } }
@media(max-width:560px) { .personal-note-cards { grid-template-columns:1fr; } .editor-heading { gap:10px; } .editor-heading h1 { font-size:24px; } .editor-heading button { font-size:12px; padding-inline:12px; } }
.drag-active { user-select:none; }
.drag-ghost { position:fixed; left:0; top:0; max-width:260px; padding:9px 14px; border:1px solid var(--accent); border-radius:8px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow); pointer-events:none; z-index:100; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Keep deep folder names readable; actions appear on hover or keyboard focus. */
@media(min-width:901px) {
  .folder-row { position:relative; }
  .folder-action { position:absolute; right:5px; top:6px; margin:0; opacity:0; pointer-events:none; background:transparent; }
  .folder-action + .folder-action { margin:0; }
  .folder-action[data-new-child] { right:41px; }
  .folder-action:hover { background:var(--surface); }
  .folder-row:hover .folder-action,.folder-row:focus-within .folder-action { opacity:1; pointer-events:auto; }
  .folder-row:hover .nav-link,.folder-row:focus-within .nav-link { padding-right:78px; }
}
/* Reader controls live next to the document, leaving the text column clear. */
.card-folder { display:flex; align-items:center; gap:6px; margin:12px 0; color:var(--muted); font-size:10px; min-width:0; }
.card-folder .icon { width:13px; height:13px; }
.card-folder span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reader-shell { display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:24px; align-items:start; }
.reader-document { min-width:0; grid-column:1; grid-row:1; }
.reader-sidepanel { grid-column:2; grid-row:1; position:sticky; top:calc(var(--topbar-height) + 24px); min-width:0; z-index:12; }
.reader-rail { display:flex; flex-direction:column; align-items:center; gap:8px; }
.reader-rail-button { position:relative; width:44px; min-height:44px; padding:10px; color:var(--muted); background:transparent; border-color:transparent; border-radius:10px; }
.reader-rail a.reader-rail-button { display:flex; align-items:center; justify-content:center; text-decoration:none; }
.reader-rail-button .icon { width:21px; height:21px; }
.reader-rail-button:hover,.reader-rail-button[aria-expanded=true] { background:var(--accent-soft); color:var(--accent-ink); border-color:transparent; }
.reader-rail-danger:hover,.reader-rail-danger[aria-expanded=true] { color:var(--danger); background:var(--hover); }
.reader-rail-button::after { content:attr(data-tooltip); position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%); padding:7px 11px; border:1px solid var(--line); border-radius:7px; background:var(--surface); box-shadow:var(--shadow); color:var(--ink); font-size:12px; font-weight:500; white-space:nowrap; pointer-events:none; visibility:hidden; opacity:0; }
.reader-rail-button:hover::after,.reader-rail-button:focus-visible::after { visibility:visible; opacity:1; }
.reader-rail-button[aria-expanded=true]::after { visibility:hidden; }
.reader-options-popover { position:fixed; inset:auto; margin:0; width:min(310px,calc(100vw - 16px)); max-height:calc(100dvh - 16px); overflow:auto; padding:20px; border:1px solid var(--line); border-radius:14px; color:var(--ink); background:var(--surface); box-shadow:0 16px 50px #0003; font-size:13px; }
.reader-options-popover h2 { font:600 15px/1.4 Inter,"Segoe UI",system-ui,sans-serif; margin:0 0 18px; }
.reader-options-popover label { font-size:12px; }
.reader-options-popover input,.reader-options-popover select { font-size:13px; }
.reader-options-popover .settings-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 14px; }
.reader-options-popover fieldset { border:1px solid var(--line); border-radius:9px; margin:0 0 16px; }
.reader-options-popover p { font-size:13px; line-height:1.6; }
.reader-option-actions { display:flex; flex-direction:column; align-items:stretch; gap:8px; }
.reader-option-actions button,.reader-options-popover form button { white-space:normal; font-size:12px; }
.reader-export-links { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.reader-export-links a { padding:12px; border:1px solid var(--line); border-radius:8px; text-align:center; text-decoration:none; font-size:12px; }
.reader-export-links a:hover { background:var(--accent-soft); }
.shortcut-list { display:grid; grid-template-columns:auto 1fr; gap:12px; margin:0; font-size:12px; }
.shortcut-list dd { margin:0; }
.danger-button { color:var(--danger); border-color:var(--danger); }
.card-image { aspect-ratio:16/9; width:100%; margin:0 0 14px; overflow:hidden; border-radius:7px; background:var(--hover); }
.card-image img { display:block; width:100%; height:100%; object-fit:cover; }
.reader-heading .title-button { font:inherit; letter-spacing:inherit; line-height:inherit; text-align:left; white-space:normal; display:block; padding:0; border:1px solid transparent; background:transparent; min-height:0; width:100%; box-shadow:none; cursor:text; }
.reader-heading .title-button:hover { border-color:var(--line); border-style:dashed; background:var(--hover); color:var(--ink); }
.inline-title-form { margin:16px 0; }
.inline-title-form input[name=title] { font:26px/1.4 Georgia,serif; margin:0 0 12px; }
.title-edit-actions { display:flex; gap:8px; }
.title-edit-actions button,.title-conflict button { font-size:11px; }
.title-conflict { margin-top:16px; padding:12px; background:var(--accent-soft); border:1px solid var(--line); border-radius:8px; }
.title-conflict p { font-size:12px; overflow-wrap:anywhere; }
.title-conflict button { white-space:normal; margin:4px 0; }
.title-save-status { font-size:11px; color:var(--accent-ink); margin:10px 0; }
.title-save-status:empty { display:none; }
.inline-editor { min-width:0; max-width:100%; }
html.reader-initializing #reader { visibility:hidden; }
.visual-editor { display:flow-root; min-height:62vh; margin-block:24px; }
.visual-editor > :first-child { margin-top:0; }
.ProseMirror { position:relative; white-space:pre-wrap; white-space:break-spaces; font-variant-ligatures:none; outline:none; min-height:62vh; }
.ProseMirror > :first-child { margin-top:0; }
.ProseMirror li { position:relative; }
.ProseMirror li p { margin-block:0 .35em; }
.ProseMirror ul,.ProseMirror ol { padding-left:1.6em; }
.ProseMirror-selectednode { outline:2px solid var(--accent); }
.ProseMirror-hideselection *::selection { background:transparent; }
.ProseMirror-gapcursor { display:none; pointer-events:none; position:absolute; margin:0; }
.ProseMirror-gapcursor:after { content:""; display:block; position:absolute; top:-2px; width:20px; border-top:1px solid var(--ink); }
.ProseMirror-focused .ProseMirror-gapcursor { display:block; }
.editor-image-unavailable { display:block; padding:20px; border:1px dashed var(--line); color:var(--muted); font:13px/1.5 system-ui,sans-serif; }
.editor-modes { display:flex; padding:3px; border:1px solid var(--line); border-radius:9px; gap:2px; }
.editor-modes button { display:flex; align-items:center; justify-content:center; gap:6px; background:transparent; border:0; padding:6px 10px; min-height:34px; font-size:11px; }
.editor-modes button[aria-pressed=true] { background:var(--accent-soft); color:var(--accent-ink); }
.editor-modes .icon { width:16px; height:16px; }
.markdown-formatting button[aria-pressed=true] { background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); }
.editor-link-panel { padding:16px; margin-top:10px; border:1px solid var(--line); border-radius:10px; background:var(--surface); }
.editor-link-panel label { margin:0 0 10px; font-size:12px; }
.editor-link-panel > div { display:flex; flex-wrap:wrap; gap:8px; }
.editor-link-panel button { font-size:12px; }
.editor-link-panel [role=status]:empty { display:none; }
.visual-editor:focus-within { outline:1px solid var(--line); outline-offset:8px; border-radius:4px; }
.markdown-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; border-block:1px solid var(--line); padding:8px 0; margin-top:20px; background:var(--paper); position:sticky; top:calc(var(--topbar-height) + 88px); z-index:9; }
.markdown-formatting,.markdown-attachments { display:flex; align-items:center; gap:4px; }
.markdown-toolbar .icon-button { width:40px; height:40px; padding:9px; flex-shrink:0; }
.markdown-attachments { margin-left:auto; }
.markdown-badge { color:var(--muted); font:11px/1.4 Inter,"Segoe UI",sans-serif; padding:5px 8px; border:1px solid var(--line); border-radius:6px; }
.markdown-source { box-sizing:border-box; display:block; width:100%; min-height:62vh; resize:vertical; border:0; border-radius:0; padding:24px 4px; margin:0; font:15px/1.85 Consolas,"Cascadia Code",monospace; background:transparent; color:var(--ink); tab-size:4; overflow:hidden; }
.markdown-source:focus { outline:1px solid var(--line); outline-offset:4px; box-shadow:none; }
.inline-editor .editor-title { font:28px/1.35 Georgia,serif; padding:12px; margin:0; }
.editor-title-label { font-size:11px; color:var(--muted); }
.inline-editor .editor-heading { display:flex; align-items:center; gap:12px; margin-bottom:24px; }
.inline-editor .editor-heading h1 { flex:1; font:500 16px/1.3 Inter,"Segoe UI",sans-serif; }
.inline-editor .editor-heading button { margin-left:auto; flex-shrink:0; }
.editor-bottom-actions { display:flex; align-items:center; gap:20px; padding-block:18px; border-top:1px solid var(--line); }
.editor-status-line .field-hint { font-size:11px; margin:4px 0; }
.editor-status-line #upload-status { font-size:12px; color:var(--accent-ink); }
#upload-status:empty,#draft-status:empty { display:none; }
.highlight-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr)); gap:16px; }
.highlight-card { min-width:0; border:1px solid var(--line); border-radius:14px; background:var(--surface); padding:20px; }
.highlight-card-meta { display:flex; justify-content:space-between; gap:12px; color:var(--muted); font-size:11px; margin-bottom:18px; }
.highlight-card-link { display:block; color:var(--ink); text-decoration:none; }
.highlight-card-link blockquote { margin:0 0 20px; font:18px/1.65 Georgia,serif; overflow-wrap:anywhere; }
.highlight-card-link mark { background:var(--highlight-fill); border-bottom:2px solid var(--highlight-solid); color:inherit; box-decoration-break:clone; -webkit-box-decoration-break:clone; padding:2px 0; }
.highlight-card-link h2 { display:flex; align-items:center; justify-content:space-between; gap:12px; font:600 13px/1.5 Inter,"Segoe UI",sans-serif; margin:0; }
.highlight-card-link:hover h2 { color:var(--accent-ink); }
.highlights-pages { display:flex; align-items:center; justify-content:center; gap:24px; margin:28px 0; }
#prose mark[id],.annotations blockquote[id] { scroll-margin-top:130px; }
@media(max-width:560px) {
  .markdown-toolbar { gap:4px; flex-wrap:wrap; }
  .markdown-toolbar .icon-button { width:40px; height:44px; }
  .markdown-formatting { flex:1; min-width:0; flex-wrap:nowrap; gap:0; overflow-x:auto; scrollbar-width:none; }
  .markdown-formatting::-webkit-scrollbar { display:none; }
  .markdown-attachments { display:contents; }
  .editor-modes { flex-basis:100%; order:-1; justify-content:flex-end; border:0; padding:0 0 6px; }
  .markdown-badge { display:none; }
  .inline-editor .editor-heading { flex-wrap:wrap; }
  .inline-editor .editor-heading h1 { font-size:15px; }
  .inline-editor .editor-title { font-size:23px; }
  .markdown-source { font-size:14px; }
}
.inline-editor .editor-heading { margin-top:8px; }
.inline-editor .editor-heading h1 { flex:1; font:500 16px/1.3 Inter,"Segoe UI",sans-serif; margin:0; }
.inline-editor .edit-surface { min-height:420px; padding:22px; }
.inline-editor>p:first-child { font-size:12px; }
@media(min-width:1101px) {
  .reader>div[data-article] { max-width:1320px; }
  .reader-shell .reader-document h1 { font-size:clamp(28px,2.8vw,44px); }
}
@media(min-width:1600px) { .reader-shell { grid-template-columns:minmax(0,1fr) 44px; gap:16px; } }
@media(max-width:1100px) {
  .reader-shell { display:flex; flex-direction:column; gap:20px; }
  .reader-sidepanel { position:static; order:-1; width:100%; }
  .reader-rail { flex-direction:row; flex-wrap:wrap; justify-content:flex-start; gap:6px; padding-bottom:12px; border-bottom:1px solid var(--line); }
  .reader-rail-button::after { left:0; right:auto; top:calc(100% + 7px); transform:none; max-width:min(250px,70vw); white-space:normal; text-align:left; }
  .reader-rail-button:last-child::after { left:auto; right:0; }
  .reader-document { width:100%; }
}
@media(max-width:560px) { .inline-title-form input[name=title] { font-size:23px; } .inline-editor .editor-heading h1 { font-size:15px; } }
@media print { .reader-sidepanel { display:none!important; } .reader-shell { display:block; } }

/* Native popover keeps annotation controls above the reader without stealing focus. */
.selection-popover { position:fixed; inset:auto; margin:0; width:min(360px,calc(100vw - 16px)); max-height:calc(100dvh - 16px); overflow:auto; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--paper); color:var(--ink); box-shadow:0 12px 40px #0003; font:13px/1.5 var(--font-ui, sans-serif); }
.selection-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.selection-heading strong { font-size:14px; }
.selection-heading button { min-height:32px; width:32px; padding:0; font-size:22px; }
.selection-popover .highlight-colors { display:flex; gap:2px; padding:0; margin:4px 0 12px; border:0; }
.highlight-colors label { position:relative; display:grid; place-items:center; width:44px; height:44px; margin:0; cursor:pointer; }
.highlight-colors input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.swatch { display:block; width:26px; height:26px; border-radius:50%; border:2px solid var(--line); background:var(--highlight-solid); pointer-events:none; }
.highlight-colors input:checked + .swatch { outline:2px solid var(--ink); outline-offset:3px; }
.highlight-colors input:checked + .swatch::after { content:'✓'; display:block; text-align:center; color:#17202a; font:bold 17px/22px sans-serif; }
.highlight-colors input:focus-visible + .swatch { outline:3px solid var(--accent); outline-offset:3px; }
.selection-popover label[for=selection-note] { margin:0 0 6px; font-size:12px; }
.selection-popover label span { color:var(--muted); }
.selection-popover textarea { min-height:84px; width:100%; resize:vertical; margin:0; padding:10px; font:14px/1.5 sans-serif; }
.selection-popover #selection-status { margin:8px 0; font-size:12px; overflow-wrap:anywhere; }
.selection-popover #selection-status:empty { display:none; }
.selection-popover #selection-save { margin-top:10px; min-height:40px; }
.highlight-yellow { --highlight-solid:#edc84b; --highlight-fill:#edc84b55; }
.highlight-red { --highlight-solid:#ee8888; --highlight-fill:#ee88884d; }
.highlight-cyan { --highlight-solid:#56cbd9; --highlight-fill:#56cbd94d; }
.highlight-green { --highlight-solid:#9dc96b; --highlight-fill:#9dc96b55; }
.highlight-gray { --highlight-solid:#b1bac5; --highlight-fill:#b1bac54d; }
#prose mark { background:var(--highlight-fill,#edc84b55); border-bottom:2px solid var(--highlight-solid,#edc84b); color:inherit; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
#prose::highlight(papershelf-selection) { background-color:var(--selection-fill,#edc84b88); color:var(--ink); }
@media print { .selection-popover { display:none!important; } }

.account-settings-link { display:flex; align-items:center; gap:8px; margin-top:18px; padding:8px 0; font-size:12px; text-decoration:none; }
.account-settings-link .icon { width:17px; height:17px; }
.ai-panel { max-width:740px; margin-inline:auto; }
.ai-heading { display:flex; align-items:center; gap:16px; margin:30px 0; }
.ai-heading h1 { margin:0 0 6px; font:400 32px/1.2 Georgia,serif; }
.ai-heading p { margin:0; color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
.ai-symbol { display:grid; place-items:center; flex:0 0 48px; height:48px; border-radius:14px; background:var(--accent-soft); color:var(--accent-ink); }
.ai-symbol .icon { width:25px; height:25px; }
.ai-setting-card { padding:24px; border:1px solid var(--line); border-radius:14px; background:var(--surface); margin:0 0 24px; }
.ai-setting-card h2,.ai-setting-info h2 { font:600 15px/1.4 Inter,"Segoe UI",system-ui,sans-serif; margin:0 0 14px; }
.ai-key-status { display:flex; align-items:center; gap:8px; font-size:13px; margin-bottom:24px; color:var(--accent-ink); }
.ai-key-status .icon { width:17px; height:17px; }
.ai-setting-card .field-hint { margin:0 0 20px; }
.ai-form-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.ai-setting-info p,.ai-setting-card p { font-size:13px; line-height:1.7; color:var(--muted); }
.ai-progress .status-dot { margin-right:10px; }
.ai-progress strong { font-size:14px; }
.ai-tag-choices { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 24px; }
.ai-tag { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border:1px solid var(--line); border-radius:9px; cursor:pointer; font-size:13px; }
.ai-tag:has(input:checked) { color:var(--accent-ink); border-color:var(--accent); background:var(--accent-soft); }
.ai-tag input { width:16px; min-height:16px; height:16px; margin:0; accent-color:var(--accent); }
.ai-description-choice { margin:16px 0 10px; }
.ai-review-form button { margin-top:8px; }
.ai-generate-form button { white-space:normal; }
.reader-description { color:var(--muted); font-size:15px; line-height:1.7; margin:0 0 24px; }
.reader-tag-list { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px; }
.reader-tag-list:empty { display:none; }
.reader-tag-list a { padding:4px 9px; border:1px solid var(--line); border-radius:7px; color:var(--accent-ink); background:var(--accent-soft); font-size:11px; text-decoration:none; }
.card-description { color:var(--muted); font-size:12px; line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin:12px 0; }
#description-editor { min-height:88px; }
@media(max-width:560px) { .ai-setting-card { padding:18px; } .ai-heading h1 { font-size:27px; } .ai-form-actions { flex-direction:column; } }

/* Compact library: one list width, independent of selection or desktop size. */
.sidebar-toggle { display:none; }
.folder-section { border:0; padding:0; margin:0; }
.folder-section > summary.nav-label { display:flex; align-items:center; justify-content:space-between; min-height:36px; margin:0 6px 6px; padding:4px 6px; border:0; list-style:none; text-transform:uppercase; font-size:9px; letter-spacing:.12em; }
.folder-section > summary::-webkit-details-marker { display:none; }
.folder-section[open] > summary { border:0; margin-bottom:6px; }
.folder-section-chevron { font-size:16px; transform:rotate(-90deg); }
.folder-section[open] .folder-section-chevron { transform:none; }
.folder-panel { margin-top:20px; }
.article-list { padding:20px 12px 12px; }
.article-list .list-heading h1 { font-size:18px; letter-spacing:-.35px; }
.card { padding:12px; }
.card h2 { font-size:17px; line-height:1.35; letter-spacing:-.2px; margin:7px 0; }
.article-list .card-image { height:108px; aspect-ratio:auto; margin-bottom:8px; }
.article-list .card-description { -webkit-line-clamp:2; font-size:11px; line-height:1.5; margin:7px 0; }
.article-list .card-folder { margin:8px 0; }
.tags-workspace { min-height:calc(100vh - var(--topbar-height)); }
.tags-page { min-width:0; padding:28px clamp(18px,3vw,48px) 48px; }
.tags-heading h1 { font-size:26px; margin:0 0 24px; display:flex; gap:12px; align-items:center; }
.tags-tools { display:flex; flex-wrap:wrap; gap:16px; align-items:start; margin-bottom:24px; }
.tags-tools > form { display:flex; gap:8px; flex-wrap:wrap; align-items:center; flex:1; }
.tags-tools input { margin:0; width:auto; flex:1; min-width:120px; }
.tags-tools button,.tag-create > summary { min-height:42px; }
.tag-create { width:240px; padding:0; border:1px solid var(--line); border-radius:10px; }
.tag-create > summary { padding:10px 14px; font-size:13px; }
.tag-create form { padding:0 14px 14px; }
.tag-create form input { width:100%; margin-bottom:10px; }
.tag-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr)); gap:12px; }
.tag-card { display:flex; align-items:center; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:10px; }
.tag-card:hover { border-color:var(--accent); }
.tag-card > a { display:flex; gap:12px; align-items:center; flex:1; min-width:0; padding:18px 12px 18px 16px; text-decoration:none; }
.tag-card > a > span { min-width:0; flex:1; }
.tag-card strong { display:block; font-size:14px; overflow-wrap:anywhere; }
.tag-card small { display:block; margin-top:5px; color:var(--muted); font-size:11px; }
.tag-card .icon { flex-shrink:0; width:17px; height:17px; color:var(--muted); }
.tag-card form { margin-right:6px; }
.tags-empty { color:var(--muted); font-size:13px; }
@media screen and (min-width:901px) {
  :root { --library-sidebar-width:196px; }
  :root.sidebar-collapsed { --library-sidebar-width:60px; }
  .workspace,.workspace.has-selection { grid-template-columns:var(--library-sidebar-width) 300px minmax(0,1fr); }
  .notes-workspace,.tags-workspace,.folders-workspace { display:grid; grid-template-columns:var(--library-sidebar-width) minmax(0,1fr); align-items:start; }
  .sidebar { padding:12px 8px 16px; }
  .sidebar nav { min-height:calc(100% - 44px); gap:4px; }
  .sidebar-toggle { display:flex; align-items:center; gap:10px; min-height:36px; width:100%; padding:8px 12px; margin-bottom:8px; color:var(--muted); font-size:11px; }
  .sidebar-toggle .icon { width:17px; height:17px; flex-shrink:0; }
  .sidebar .nav-link { min-height:39px; padding:9px 11px; font-size:11px; }
  .sidebar .folder-row .nav-link { padding:9px 5px; }
  .sidebar .folder-row:hover .nav-link,.sidebar .folder-row:focus-within .nav-link { padding-right:78px; }
  .sidebar-collapsed .sidebar { padding-inline:8px; }
  .sidebar-collapsed .sidebar nav > .nav-label,
  .sidebar-collapsed .sidebar .nav-link > span,
  .sidebar-collapsed .sidebar .folder-panel,
  .sidebar-collapsed .sidebar-toggle > span { display:none; }
  .sidebar-collapsed .sidebar .nav-link,.sidebar-collapsed .sidebar-toggle { justify-content:center; padding-inline:0; }
  .sidebar-collapsed .sidebar .nav-bottom { padding-top:20px; }
  .workspace .reader { padding:20px 18px 48px; }
  .reader > div[data-article] { max-width:none; }
  .reader-shell { grid-template-columns:minmax(0,1fr) 44px; gap:16px; }
}
@media screen and (max-width:900px) {
  .tags-workspace,.folders-workspace { display:block; }
  .tags-page { padding:22px 18px; }
  .tags-tools > form { flex-basis:100%; }
  .tag-create { width:100%; }
  .article-list .card h2 { font-size:17px; }
  .article-list .card-image { height:120px; }
  .folder-section > summary.nav-label { min-height:44px; }
}

/* Folder manager shares navigation and keeps every folder visible in one view. */
.folders-workspace { min-height:calc(100vh - var(--topbar-height)); }
.folders-page { min-width:0; padding:28px clamp(18px,3vw,48px) 48px; }
.folders-heading { display:flex; flex-wrap:wrap; align-items:start; justify-content:space-between; gap:16px; margin-bottom:20px; }
.folders-heading h1 { display:flex; align-items:center; gap:12px; margin:0; font-size:26px; }
.folder-manager-create { width:270px; border:1px solid var(--line); padding:0; border-radius:10px; }
.folder-manager-create > summary { min-height:42px; padding:10px 14px; }
.folder-manager-create form { padding:0 14px 14px; }
.folder-search { display:flex; flex-wrap:wrap; align-items:center; gap:8px; max-width:650px; }
.folder-search input { flex:1; min-width:140px; width:auto; margin:0; }
.folder-manager-hint { color:var(--muted); font-size:12px; line-height:1.6; margin:14px 0 20px; }
.folder-top-level { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px; background:var(--surface); border:1px dashed var(--line); border-radius:10px; margin-bottom:18px; font-size:12px; }
.folder-top-level > .icon { width:22px; height:22px; color:var(--accent-ink); }
.folder-top-level > span { flex:1; min-width:160px; font-weight:600; }
.folder-top-level small { display:block; font-size:11px; font-weight:400; color:var(--muted); margin-top:5px; }
.folder-top-level a { font-size:11px; color:var(--muted); line-height:1.7; }
.folder-manager-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr)); gap:16px; align-items:start; }
.folder-manager-card { position:relative; min-width:0; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px; }
.folder-manager-card:hover,.folder-manager-card:focus-within { border-color:var(--accent); }
.folder-open-link::after { content:""; position:absolute; inset:0; z-index:1; border-radius:12px; cursor:pointer; }
.folder-card-links,.folder-card-options { position:relative; z-index:2; }
.folder-manager-card > header { display:flex; align-items:start; gap:12px; margin-bottom:18px; }
.folder-manager-card > header > div { min-width:0; flex:1; }
.folder-manager-icon { display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-ink); width:38px; height:38px; border-radius:10px; flex-shrink:0; }
.folder-manager-icon .icon { width:21px; height:21px; }
.folder-manager-card h2 { margin:0; font-size:16px; font-weight:600; overflow-wrap:anywhere; }
.folder-manager-card h2 a { text-decoration:none; }
.folder-path { margin:6px 0 0; color:var(--muted); font-size:10px; line-height:1.5; overflow-wrap:anywhere; }
.folder-child-count { color:var(--muted); font-size:10px; white-space:nowrap; margin-top:4px; }
.folder-counts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:0; }
.folder-counts > div { padding:10px; background:var(--canvas); border-radius:8px; min-width:0; }
.folder-counts dt { font-size:10px; color:var(--muted); line-height:1.5; }
.folder-counts dd { font-size:22px; margin:5px 0 0; font-weight:600; }
.folder-totals { font-size:11px; line-height:1.7; color:var(--muted); margin:12px 0 0; }
.folder-card-links { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; margin:16px 0 8px; }
.folder-card-links a { display:inline-flex; align-items:center; gap:5px; min-height:36px; text-decoration:none; font-size:11px; color:var(--accent-ink); }
.folder-card-links .icon { width:15px; height:15px; }
.folder-card-options > details { padding:10px 0; border-top:1px solid var(--line); border-bottom:0; }
.folder-card-options > details:last-child { padding-bottom:0; }
.folder-card-options summary { display:flex; align-items:center; gap:8px; font-size:11px; min-height:32px; list-style:none; }
.folder-card-options summary::after { content:'⌄'; margin-left:auto; transform:rotate(-90deg); }
.folder-card-options details[open] > summary::after { transform:none; }
.folder-card-options summary::-webkit-details-marker { display:none; }
.folder-card-options .icon { width:15px; height:15px; }
.folder-card-options label,.folder-manager-create label { font-size:12px; }
.folder-card-options input,.folder-card-options select,.folder-card-options button,.folder-manager-create input,.folder-manager-create select { font-size:12px; }
.folder-card-options p { font-size:11px; line-height:1.6; }
.folder-remove > summary { color:var(--danger); }
.folders-empty { font-size:13px; color:var(--muted); }
@media(max-width:900px) { .folders-page { padding:22px 18px; } .folder-manager-create { width:100%; } .folder-card-links a { min-height:44px; } .folder-card-options summary { min-height:44px; } }

/* Keep the library reachable while the document has its own reading position. */
.article-list { scroll-margin-top:var(--topbar-height); }
.library-pages { display:flex; align-items:center; gap:4px; padding:8px 0; margin:0 0 8px; border-bottom:1px solid var(--line); background:var(--surface); }
.library-pages > a,.library-pages > span:not(.library-page-number) { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border:1px solid var(--line); border-radius:8px; font-size:20px; text-decoration:none; color:var(--muted); }
.library-pages > a:hover,.library-pages > a:focus-visible { color:var(--accent-ink); background:var(--accent-soft); border-color:var(--accent); }
.library-pages > [aria-disabled] { opacity:.3; }
.library-pages .icon { width:17px; height:17px; }
.library-page-number { flex:1; text-align:center; font-size:13px; font-weight:600; white-space:nowrap; }
.library-page-number > span { color:var(--muted); font-weight:400; }
.reader-scroll-top { position:fixed; right:24px; bottom:24px; z-index:35; display:flex; align-items:center; gap:8px; min-height:48px; padding:10px 16px; border:1px solid var(--accent); border-radius:12px; color:var(--accent-ink); background:var(--surface); text-decoration:none; font-size:12px; font-weight:600; }
.reader-scroll-top[hidden] { display:none; }
.reader-scroll-top:hover { background:var(--accent-soft); }
.reader-scroll-top .icon { transform:rotate(90deg); width:18px; height:18px; }
@media screen and (min-width:901px) {
  .article-list { position:sticky; top:var(--topbar-height); height:calc(100dvh - var(--topbar-height)); min-height:0; overflow-y:auto; scrollbar-width:thin; }
  .library-pages-top { position:sticky; top:0; z-index:4; }
}
@media(max-width:900px) { .reader-scroll-top { right:12px; bottom:12px; } }
@media print { .reader-scroll-top,.library-pages { display:none; } }

.document-context-menu { position:fixed; z-index:80; width:228px; max-width:calc(100vw - 16px); padding:6px; border:1px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); box-shadow:0 8px 28px #0002; }
.document-context-menu[hidden] { display:none; }
.document-context-menu p { margin:4px 10px 6px; padding-bottom:8px; border-bottom:1px solid var(--line); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:11px; }
.document-context-menu a { display:flex; align-items:center; gap:10px; min-height:48px; padding:10px; border-radius:7px; font-size:13px; text-decoration:none; }
.document-context-menu a:hover,.document-context-menu a:focus-visible { background:var(--accent-soft); color:var(--accent-ink); outline:0; }
.document-context-menu .icon { width:18px; height:18px; }
.quick-edit-dialog { width:min(1100px,calc(100vw - 32px)); max-width:none; height:calc(100dvh - 40px); max-height:none; padding:0; border:1px solid var(--line); border-radius:14px; background:var(--paper); color:var(--ink); }
.quick-edit-dialog::backdrop { background:#0007; }
.quick-edit-close { position:sticky; top:8px; float:right; margin:8px; z-index:20; background:var(--surface); }
.quick-edit-dialog .reader { display:block; padding:16px 24px 32px; min-height:0; }
.quick-edit-dialog .editor-heading { top:0; }
@media print { .document-context-menu,.quick-edit-dialog { display:none; } }

/* Folder colors are a validated palette, shared by tree, cards and edit forms. */
.folder-color-red { color:#b83d49; }
.folder-color-orange { color:#ac590c; }
.folder-color-yellow { color:#947000; }
.folder-color-green { color:#277346; }
.folder-color-teal { color:#087d83; }
.folder-color-blue { color:#326cb4; }
.folder-color-purple { color:#8650b6; }
.folder-color-pink { color:#b34386; }
[data-theme=dark] .folder-color-red { color:#ff929b; }
[data-theme=dark] .folder-color-orange { color:#ffb36b; }
[data-theme=dark] .folder-color-yellow { color:#e7ca62; }
[data-theme=dark] .folder-color-green { color:#83d3a0; }
[data-theme=dark] .folder-color-teal { color:#6bd1d3; }
[data-theme=dark] .folder-color-blue { color:#91baff; }
[data-theme=dark] .folder-color-purple { color:#c3a0f4; }
[data-theme=dark] .folder-color-pink { color:#f29dcc; }
.folder-color { display:inline-flex; align-items:center; flex-shrink:0; }
.folder-color:not(.folder-color-default) .icon { fill:currentColor; fill-opacity:.18; }
.folder-color-picker { min-width:0; margin:12px 0 18px; padding:0; border:0; }
.folder-color-picker legend { font-size:12px; color:var(--muted); padding:0 0 6px; }
.folder-color-options { display:flex; flex-wrap:wrap; gap:3px; }
.folder-color-options .folder-color-choice { display:grid; place-items:center; position:relative; width:44px; min-height:44px; margin:0; border-radius:8px; border:1px solid transparent; cursor:pointer; flex-shrink:0; }
.folder-color-picker .folder-color-choice input { position:absolute; width:1px; height:1px; min-height:0; opacity:0; margin:0; padding:0; border:0; }
.folder-color-swatch { display:grid; place-items:center; width:24px; height:24px; border:1px solid currentColor; border-radius:50%; background:currentColor; }
.folder-color-default .folder-color-swatch { background:var(--surface); color:var(--muted); }
.folder-color-swatch .icon { width:15px; height:15px; color:var(--surface); visibility:hidden; }
.folder-color-default .folder-color-swatch .icon { color:var(--ink); }
.folder-color-choice:has(input:checked) { background:var(--accent-soft); border-color:currentColor; }
.folder-color-choice:has(input:checked) .icon { visibility:visible; }
.folder-color-choice:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }
.folder-color-choice:hover { background:var(--accent-soft); }
.card-folder > .folder-color { flex:0 0 auto; }
.card-folder .folder-color .icon { color:inherit; }
.folder-row .nav-link .folder-color .icon { color:inherit; display:block; }

.rapid-dialog{width:min(680px,calc(100vw - 32px));max-height:90dvh;overflow:auto;padding:24px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px}.rapid-header,.rapid-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.rapid-word{min-height:180px;display:flex;align-items:center;justify-content:center;font-size:clamp(28px,5vw,54px);overflow-wrap:anywhere;padding:24px 0}.rapid-dialog input{width:100%}.rapid-dialog::backdrop{background:#0009}

.note-search-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;align-items:end;margin:20px 0 28px}.note-search-filters label{margin:0}.note-search-filters input,.note-search-filters select{width:100%;min-width:0}.note-search-filters button{min-height:44px}

.ocr-toggle{margin:14px 0}.ocr-result{margin:16px 0;padding:18px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.ocr-result>strong{overflow-wrap:anywhere}.ocr-result textarea{width:100%;font:inherit;min-height:140px;resize:vertical}.ocr-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.ocr-result p{color:var(--muted)}

.ocr-tools{margin:16px 0;padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}.ocr-tools>.field-hint{margin:8px 0}.ocr-tools .ocr-actions{align-items:end}.ocr-tools .ocr-actions>label{flex:1;min-width:160px}.ocr-tools select{width:100%}.ocr-tools .ocr-result{background:var(--bg);margin-bottom:0}

.pairing-pin{display:block;font:700 clamp(28px,7vw,48px)/1.4 monospace;letter-spacing:.12em;margin:20px 0;user-select:all;color:var(--ink);overflow-wrap:anywhere}