/* Yunli navigation and application chrome. The journal canvas retains its own palette. */
:root {
  --yunli-paper: #f4f1e8;
  --yunli-card: #fbf9f2;
  --yunli-ink: #293b2f;
  --yunli-muted: #67725f;
  --yunli-line: #d8dbcc;
  --yunli-soft: #e8ecdd;
  --yunli-gold: #a5814d;
  --yunli-header-height: 80px;
  --editor-topbar-height: 80px;
  --yunli-serif: Georgia, "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --yunli-sans: Arial, "Microsoft YaHei", sans-serif;
}

body { background: var(--yunli-paper); }

/* Each rendered route has exactly one header, shared with its native controls. */
.yunli-header {
  flex: none;
  color: var(--yunli-ink);
  background: var(--yunli-paper);
  font: 14px/1.8 var(--yunli-sans);
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--yunli-line);
}

.yunli-header-inner {
  width: min(calc(100% - 100px), 1120px);
  min-height: var(--yunli-header-height);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 30px;
}

.yunli-brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 11px;
  color: var(--yunli-ink);
  font: 23px/1.1 var(--yunli-serif);
  text-decoration: none;
}

.yunli-brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 43px;
  border: 1px solid currentColor;
  border-radius: 20px 20px 3px 3px;
  font-size: 24px;
}

.yunli-brand small {
  display: block;
  margin-top: 7px;
  color: var(--yunli-muted);
  font: 7px/1 var(--yunli-sans);
  letter-spacing: 1.8px;
}

.yunli-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-left: auto;
  font-size: 13px;
}

.yunli-nav a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  color: var(--yunli-ink);
  text-decoration: none;
}

.yunli-nav a::after {
  position: absolute;
  content: "";
  bottom: 3px;
  left: 0;
  right: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s;
}

.yunli-nav a:hover::after,
.yunli-nav a[aria-current="page"]::after { transform: scaleX(1); }
.yunli-header a:focus-visible { outline: 2px solid var(--yunli-gold); outline-offset: 5px; }

.yunli-header-note {
  padding-left: 30px;
  border-left: 1px solid var(--yunli-line);
  font-size: 10px;
  color: var(--yunli-muted);
  letter-spacing: 1px;
  white-space: nowrap;
}

/* Apply shared colors only to interface surfaces, never the saved journal paper or content. */
.auth-page,
.boot {
  min-height: calc(100vh - 56px - var(--yunli-header-height));
  min-height: calc(100dvh - 56px - var(--yunli-header-height));
  color: var(--yunli-ink);
}

.auth-form h1 { font-family: var(--yunli-serif); }
.auth-form > p,
.auth-form .auth-links { color: var(--yunli-muted); }
.auth-form input { background: var(--yunli-card); border-color: var(--yunli-line); }
.auth-form input:focus { border-color: var(--yunli-ink); box-shadow: 0 0 0 3px #293b2f12; }
.auth-links a,
.auth-links .link-button { color: var(--yunli-ink); }
.auth-illustration .brand,
.sidebar .brand { color: var(--yunli-ink); }
.auth-illustration .brand-mark,
.sidebar .brand-mark,
.boot .brand-mark { background: var(--yunli-ink); }

.shell { min-height: calc(100dvh - var(--yunli-header-height) - 56px); }
.sidebar { background: #ececdf; border-color: var(--yunli-line); top: var(--yunli-header-height); height: calc(100dvh - var(--yunli-header-height)); padding-top: 30px; }
.sidebar .nav-item { color: #56624f; }
.sidebar .nav-item:hover { background: #e1e5d6; }
.sidebar .nav-item.active { color: var(--yunli-ink); background: #dce3ce; }
.sidebar .nav-label,
.sidebar .sidebar-note { color: var(--yunli-muted); }
.sidebar .sidebar-note { border-color: #c6cdb9; }
.sidebar .avatar { color: var(--yunli-ink); background: #dbe0cd; }
.topbar { background: var(--yunli-paper); border-color: var(--yunli-line); }
.topbar .search input { background: #e9ebde; }
.topbar .breadcrumb { color: var(--yunli-muted); }
.topbar .breadcrumb span { color: var(--yunli-ink); }

:is(.auth-form, .sidebar, .topbar, .editor-aside) .button.primary {
  color: var(--yunli-card);
  background: var(--yunli-ink);
  border-color: var(--yunli-ink);
}

:is(.auth-form, .sidebar, .topbar, .editor-aside) .button.primary:hover { background: #42563e; }
:is(.auth-form, .sidebar, .topbar) :is(a, button):focus-visible { outline-color: var(--yunli-gold); }
.site-footer { background: var(--yunli-paper); border-color: var(--yunli-line); }
.site-footer a { color: var(--yunli-muted); }
.site-footer a:hover { color: var(--yunli-ink); }
.yunli-header-actions { display: flex; align-items: center; gap: 14px; }
.yunli-header-actions .button { font-size: 12px; min-height: 38px; padding: 8px 12px; }
.yunli-header-actions .button.primary { color: var(--yunli-card); background: var(--yunli-ink); border-color: var(--yunli-ink); }
.yunli-header-actions .editor-actions { margin: 0; gap: 8px; }
.yunli-header-actions .save-state { font-size: 11px; white-space: nowrap; }
.yunli-header.editor-topbar { height: var(--yunli-header-height); padding: 0; box-shadow: none; }
.collection-heading { align-items: center; }
.collection-heading .search { flex: 0 1 290px; width: 290px; max-width: 290px; }
.collection-heading .search input { background: #e9ebde; min-height: 42px; border: 1px solid var(--yunli-line); }
.collection-heading .search svg { top: 12px; }
.collection { padding-top: 42px; }
.yunli-header .mobile-menu { flex: 0 0 32px; width: 32px; }

@media (max-width: 1050px) {
  :root:has(.yunli-header--editor) { --yunli-header-height: 128px; --editor-topbar-height: 128px; }
  .yunli-header--editor .yunli-header-inner { display: grid; grid-template-columns: 1fr auto; gap: 0 20px; padding: 12px 0; }
  .yunli-header--editor .yunli-header-actions { grid-column: 1 / -1; justify-content: space-between; border-top: 1px solid var(--yunli-line); padding-top: 10px; }
  .yunli-header--editor .yunli-nav { margin: 0; }
}

@media (max-width: 900px) {
  .yunli-header-note { display: none; }
}

@media (max-width: 760px) {
  :root { --yunli-header-height: 80px; --editor-topbar-height: 80px; }
  :root:has(.yunli-header--editor) { --yunli-header-height: 128px; --editor-topbar-height: 128px; }
  .yunli-header-inner { width: calc(100% - 36px); gap: 12px; }
  .yunli-brand { font-size: 20px; gap: 8px; }
  .yunli-brand-mark { width: 34px; height: 39px; font-size: 22px; }
  .yunli-nav { gap: 17px; font-size: 12px; }
  .yunli-header:has(.yunli-header-actions):not(.yunli-header--editor) .yunli-header-inner { flex-wrap: wrap; padding: 15px 0; gap: 12px; }
  .yunli-header:has(.yunli-header-actions):not(.yunli-header--editor) .yunli-header-actions { width: 100%; justify-content: flex-end; }
  .sidebar.open { top: var(--yunli-header-height); height: calc(100dvh - var(--yunli-header-height)); }
  .mobile-sidebar-shade.open { top: var(--yunli-header-height); }
  .collection { padding-top: 26px; }
  .collection-heading { align-items: stretch; flex-direction: column; gap: 20px; }
  .collection-heading .search { width: 100%; max-width: none; flex: auto; }
  .yunli-header-actions .save-state { display: none; }
  .yunli-header-actions .button { font-size: 11px; padding: 7px 9px; }
  .yunli-header-actions .editor-actions { gap: 6px; }
}

@media (max-width: 360px) {
  .yunli-header-inner { gap: 12px; }
  .yunli-nav { gap: 12px; }
  .yunli-brand { font-size: 18px; gap: 6px; }
  .yunli-brand-mark { width: 30px; height: 36px; }
  .yunli-brand small { font-size: 6px; letter-spacing: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .yunli-nav a::after { transition: none; }
}

@media print {
  .yunli-header { display: none; }
}