/* Moon-blue desk: source layouts and reader paper stay in their own stylesheets. */
:root {
  --primary: #555b91;
  --primary-deep: #343957;
  --secondary: #7e739f;
  --paper: #f7f5f1;
  --surface: #fffefb;
  --ink: #2d3044;
  --muted: #6b6d7e;
  --line: #e1dfe8;
  --soft: #efedf4;
  --green: var(--primary);
  --gold: #a48758;
  --gold-text: #78613d;
  --amber: #f7efdf;
  --shadow: 0 16px 48px #3439571a;
  accent-color: var(--primary);
}
body { -webkit-font-smoothing: antialiased; }
::selection { background: #dcd8ed; color: var(--primary-deep); }
button, a, input, select, textarea { outline-offset: 3px; }
:focus-visible { outline: 2px solid var(--primary); }
.sidebar { background: var(--soft); padding-top: 24px; padding-bottom: 20px; }
.brandmark { background: var(--primary-deep); color: #ede2cb; border: 1px solid #a4875870; }
.brand small { letter-spacing: 1.8px; }
.project { margin: 22px 0 18px; padding: 16px 5px; }
.local-dot:before { background: var(--secondary); }
nav { gap: 4px; }
nav a { color: #606377; padding-top: 9px; padding-bottom: 9px; transition: background .15s, color .15s; }
nav a .nav-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; }
.ui-icon { width: 20px; height: 20px; display: block; flex-shrink: 0; }
nav a.active { background: var(--primary); box-shadow: 0 3px 12px #555b9120; }
nav a:hover:not(.active) { background: #e3e0ed; color: var(--primary-deep); }
.sidebar-bottom { padding-top: 12px; }
.sidebar-bottom p { margin: 0 0 6px; font-size: 14px; line-height: 1.6; color: #5f6074; }
.sidebar-bottom small { margin-top: 6px; }
.sidebar-bottom .quiet { padding-left: 0; font-size: 11px; }
.topbar { background: #fbfaf7; }
.search { background: #efedf2; border: 1px solid transparent; }
.search:focus-within { border-color: #aaa6c7; background: var(--surface); }
.search > span { color: var(--muted); }
.search .ui-icon { width: 17px; height: 17px; }
.search input::placeholder { color: var(--muted); opacity: 1; }
.quiet { display: inline-flex; align-items: center; gap: 5px; }
.quiet .ui-icon { width: 15px; height: 15px; }
h1 { font-weight: 650; letter-spacing: -.6px; color: var(--primary-deep); }
.heading .overline { color: var(--secondary); }
.subtitle { line-height: 1.8; }
.stat, .panel, .doc-card, .atlas-card { background: var(--surface); }
.stat strong { color: var(--primary-deep); font-variant-numeric: tabular-nums; }
.hero { background: linear-gradient(120deg, #343957, #555b91); color: #fffefb; }
.hero .overline, .hero .subtitle { color: #dfdbea; }
.hero h2 { line-height: 1.5; }
.hero p, .hero .quiet { color: #ece9f3; }
.hero .badge { background: #ffffff1f; color: #f2e4c8; }
.hero .btn { background: #f3eef5; color: var(--primary-deep); border: 1px solid #ffffff40; }
.btn { background: var(--surface); border-color: #d8d5e2; color: var(--primary); transition: background .15s, border-color .15s; }
.btn:hover { filter: none; border-color: #aaa6c7; background: #eeecf5; }
.btn.primary:hover { background: #484e80; border-color: #484e80; }
.hero .btn:hover { background: #fffefb; }
.btn.primary { color: #fff; }
.chip { background: var(--surface); }
.chip:hover:not(.active) { background: #eeecf5; border-color: #bbb7ce; color: var(--primary-deep); }
.select, .map-link-form input, .map-link-form select { background: var(--surface); }
.badge { background: #efedf3; color: #626479; }
/* Green and amber remain status cues, distinct from the desk's accent color. */
.badge.green { background: #e9efeb; color: #3b6653; }
.badge.amber, .notice { color: var(--gold-text); }
.bar { background: #efedf2; }
.bar span, .legend i { background: var(--primary); }
.bar .secondary, .legend i.gold { background: var(--gold); }
.event { border-left-color: var(--line); }
.event:before { background: var(--secondary); box-shadow: 0 0 0 4px var(--surface); }
.event p { color: var(--muted); }
.task-row { border-top-color: var(--line); }
.task-mark { color: var(--gold-text); }
.doc-card { border-radius: 12px; transition: border-color .15s, box-shadow .15s; }
.doc-card:hover { border-color: #b6b2ca; box-shadow: 0 5px 18px #34395709; }
.doc-card .meta { flex-wrap: wrap; align-items: center; }
.doc-title { font-size: 16px; color: var(--primary-deep); line-height: 1.65; }
.doc-title:hover { color: var(--primary); }
.doc-card p { font-size: 13px; line-height: 1.85; margin-top: 9px; }
.doc-card .foot { padding-top: 10px; border-top: 1px solid #eeecf1; gap: 8px; }
.empty { background: #eeecf2; }
.info { background: #eeecf2; }
.read-section blockquote { border-color: #bab4cf; background: #f1eef5; }
.read-section th { background: #eeecf2; }
dialog { background: var(--surface); }
dialog::backdrop { background: #292d4966; }
.dialog-top { background: var(--surface); }
:root .request-text { background: #f4f2f7; }
.source-selected { background: var(--amber); }
.atlas-card h2 { color: var(--primary-deep); }
.reader-toolbar, .reader-status { color: var(--muted); }
.reader-toolbar select { border-color: #d8d5e2; background: var(--surface); color: var(--ink); }
.reader-pagination { border-color: #d8d5e2; background: #fffefbf5; box-shadow: 0 8px 28px #34395718; }
.reader-pagination span { color: var(--muted); }
@media (max-width: 820px) {
  .sidebar { padding-top: 20px; padding-bottom: 16px; }
  nav { margin-top: 26px; }
  nav a { padding: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  nav a, .btn, .doc-card { transition: none; }
}

/* Shared novel identity: same artwork as the favicon and Windows shortcut. */
img.brandmark { display:block; flex:0 0 44px; width:44px; height:44px; object-fit:contain; border:0; border-radius:11px; box-shadow:0 3px 10px #34395722; }
.brand small { letter-spacing:1.2px; font-size:9px; }
.world-title { display:block; margin-top:7px; font-size:11px; color:var(--primary); line-height:1.6; overflow-wrap:anywhere; }
@media(max-width:820px) { .world-title { display:none; } }

/* Cover-derived double-moon emblem, without the earlier book-page glyph. */
img.brandmark { flex-basis:52px; width:52px; height:52px; background:#26314f; border-radius:12px; box-shadow:0 3px 9px #26314f22; }
.brand { gap:10px; font-size:18px; }

/* Use the PNG alpha silhouette in every brand presentation. */
img.brandmark { background: transparent; border-radius: 0; box-shadow: none; filter: drop-shadow(0 3px 5px #26314f20); }
