/* Paper Blue 2.2 — Chinese writing typography inspired by Apple China.
   References: https://www.apple.com.cn/v/homepage/a/styles/main.built.css
               https://www.apple.com.cn/global-cn/styles/sfpro-cn.css
   Local system fonts only. No Apple web fonts are downloaded or redistributed.
   Body line-height 1.8 and zero tracking suit long-form Chinese; heading sizes
   are adapted for notes. Font size remains adjustable through Obsidian settings. */
body {
  --font-text-theme: "PingFang SC", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Microsoft YaHei", sans-serif;
  --font-interface-theme: "PingFang SC", -apple-system, BlinkMacSystemFont, "Microsoft YaHei", sans-serif;
  --font-monospace-theme: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-text-size: 17px;
  --line-height-normal: 1.8;
  --line-height-tight: 1.4;
  --file-line-width: 720px;
  --file-margins: 40px clamp(24px, 4vw, 52px) 80px;
  --p-spacing: 0.95em;
  --heading-spacing: 1.5em;
  --h1-size: 2em;
  --h2-size: 1.5em;
  --h3-size: 1.18em;
  --h4-size: 1em;
  --h5-size: 0.94em;
  --h6-size: 0.88em;
  --h1-weight: 600;
  --h2-weight: 600;
  --h3-weight: 600;
  --h4-weight: 600;
  --h5-weight: 600;
  --h6-weight: 600;
  --h1-line-height: 1.3;
  --h2-line-height: 1.4;
  --h3-line-height: 1.5;
  --bold-weight: 600;
  --inline-title-size: 2.12em;
  --inline-title-weight: 600;
  --inline-title-line-height: 1.3;
  --list-indent: 2em;
  --list-indent-editing: 0.5em;
  --list-spacing: 0.16em;
  --callout-border-width: 1px;
  --callout-border-opacity: 0.22;
  --callout-radius: 8px;
  --callout-padding: 12px 16px;
  --blockquote-border-thickness: 3px;
  --blockquote-font-style: normal;
  --link-decoration: none;
  --link-decoration-hover: underline;
  --link-external-decoration: none;
  --link-external-decoration-hover: underline;
  --link-unresolved-opacity: 0.8;
  --link-unresolved-decoration-style: dotted;
  --code-size: 0.88em;
  --code-radius: 4px;
  --tag-radius: 6px;
  --tag-padding-x: 0.45em;
  --tag-padding-y: 0.15em;
  --table-cell-padding: 10px 14px;
  --table-white-space: normal;
}

.theme-light {
  --background-primary: #ffffff;
  --background-primary-alt: #fafafa;
  --background-secondary: #f5f5f7;
  --background-secondary-alt: #eef0f3;
  --background-modifier-border: #e5e5e7;
  --background-modifier-hover: rgba(0, 102, 204, 0.06);
  --text-normal: #1d1d1f;
  --text-muted: #6e6e73;
  --text-faint: #86868b;
  --text-accent: #0066cc;
  --text-accent-hover: #004f9e;
  --text-selection: rgba(0, 102, 204, 0.16);
  --interactive-accent: #0066cc;
  --interactive-accent-hover: #004f9e;
  --link-color: #0066cc;
  --link-color-hover: #004f9e;
  --link-external-color: #0066cc;
  --link-external-color-hover: #004f9e;
  --link-unresolved-color: #0066cc;
  --blockquote-color: #6e6e73;
  --blockquote-border-color: #d2d2d7;
  --blockquote-background-color: transparent;
  --code-background: #f5f5f7;
  --code-normal: #333740;
  --tag-background: #eaf3ff;
  --tag-background-hover: #deecff;
  --tag-color: #388be6;
  --tag-color-hover: #246fc2;
  --table-header-background: #f7f8fa;
  --hr-color: #e5e5e7;
}

.theme-dark {
  --background-primary: #202329;
  --background-primary-alt: #252930;
  --background-secondary: #1b1e24;
  --background-secondary-alt: #171a20;
  --background-modifier-border: #363c46;
  --text-normal: #e0e3e8;
  --text-muted: #abb4c2;
  --text-faint: #7f899a;
  --text-accent: #84adff;
  --text-accent-hover: #a9c5ff;
  --text-selection: rgba(132, 173, 255, 0.2);
  --interactive-accent: #477ce8;
  --interactive-accent-hover: #588df7;
  --link-color: #84adff;
  --link-color-hover: #a9c5ff;
  --link-external-color: #84adff;
  --link-external-color-hover: #a9c5ff;
  --link-unresolved-color: #84adff;
  --blockquote-color: #abb4c2;
  --blockquote-border-color: #505c6d;
  --blockquote-background-color: transparent;
  --code-background: #2c313b;
  --code-normal: #dce3ee;
  --tag-background: #283b5b;
  --tag-color: #99c0ff;
  --table-header-background: #292e37;
  --hr-color: #363c46;
}

/* Scope typography to notes; sidebars, menus, and dialogs retain compact UI sizing. */
.markdown-rendered,
.markdown-source-view.mod-cm6 {
  --h1-color: var(--text-normal);
  --h2-color: var(--text-normal);
  --h3-color: var(--text-normal);
  --h4-color: var(--text-normal);
  --h5-color: var(--text-normal);
  --h6-color: var(--text-muted);
}

.inline-title {
  margin-bottom: 1em;
  letter-spacing: 0;
  text-wrap: pretty;
}
.markdown-rendered blockquote {
  margin: 1.25em 0;
  padding: 0.1em 0 0.1em 1em;
  border-radius: 0;
}
.markdown-rendered blockquote > :first-child { margin-top: 0; }
.markdown-rendered blockquote > :last-child { margin-bottom: 0; }
.markdown-rendered blockquote strong { color: inherit; }
.markdown-rendered hr { margin: 1.35em 0; }
.markdown-rendered :not(pre) > code {
  padding: 0.12em 0.3em;
  overflow-wrap: anywhere;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.markdown-rendered pre {
  border: 1px solid var(--background-modifier-border);
  border-radius: 8px;
  padding: 18px 20px;
}
.markdown-rendered pre code { line-height: 1.65; }
.markdown-rendered img { border-radius: 6px; }
.markdown-rendered a { text-underline-offset: 3px; }
.markdown-rendered table { font-size: 0.94em; }
.markdown-rendered th { font-weight: 600; }
/* Only Live Preview gets document heading spacing. Plain source stays compact.
   Do not change CM whitespace, line display, transforms or cursor geometry. */
.markdown-source-view.mod-cm6.is-live-preview .cm-line.HyperMD-header {
  padding-top: 0.45em;
  padding-bottom: 0;
}
.markdown-source-view.mod-cm6.is-live-preview .cm-line.HyperMD-header-1 {
  padding-top: 0.35em;
}
.markdown-source-view.mod-cm6 .cm-line.HyperMD-quote { color: var(--blockquote-color); }

/* Chinese punctuation and Latin text keep natural spacing in both note views.
   Do not apply Latin negative tracking or full justification to Chinese. */
.markdown-preview-view,
.markdown-source-view.mod-cm6 .cm-content {
  letter-spacing: 0;
  word-spacing: normal;
  text-align: start;
  line-break: strict;
  word-break: normal;
  -webkit-font-smoothing: antialiased;
}
.markdown-rendered :is(p, li, blockquote) {
  overflow-wrap: anywhere;
}
.markdown-rendered :is(h1, h2, h3, h4, h5, h6) {
  letter-spacing: 0;
  text-wrap: pretty;
}
.markdown-rendered li > :is(ul, ol) {
  margin-block: 0.2em;
}
.markdown-rendered li > p {
  margin-block: 0.45em;
}
.markdown-rendered :is(ul, ol) > li::marker {
  color: var(--text-muted);
}
/* Reading view: padding applies to the entire item, including wrapped lines. */
.markdown-rendered :is(ul, ol) > li:not(.task-list-item) {
  padding-inline-start: 0.35em;
}
/* Keep the painted bullet separate from the source text/caret. */
.markdown-rendered ul.has-list-bullet > li > .list-bullet {
  margin-inline-start: -1em;
}
/* Use a stable marker box for one-, two- and three-digit numbers. Do not
   override CM's line padding/text-indent: its own hanging-indent measurement
   and the native continuation-indent rule remain in charge of wrapped lines. */
.markdown-source-view.mod-cm6.is-live-preview .cm-formatting-list-ol {
  display: inline-block;
  min-width: calc(var(--list-indent) + var(--list-indent-editing));
  box-sizing: border-box;
  padding-inline-start: 0;
  padding-inline-end: 0.45em;
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.markdown-source-view.mod-cm6.is-live-preview .cm-formatting-list-ul .list-bullet::after {
  translate: -0.2em 0;
}
.markdown-source-view.mod-cm6 .cm-formatting {
  color: var(--text-faint);
}
.markdown-source-view.mod-cm6 .cm-formatting-link {
  color: var(--text-muted);
}
.markdown-source-view.mod-cm6 .cm-active .cm-formatting {
  color: var(--text-muted);
}
.markdown-source-view.mod-cm6 .cm-inline-code {
  border-radius: 3px;
  /* No added horizontal padding: avoid a shifting caret when markup appears. */
}
.markdown-source-view.mod-cm6 .HyperMD-codeblock,
.markdown-rendered pre {
  line-height: 1.6;
  tab-size: 4;
}
/* Obsidian 1.14 uses CSS colors, rather than RGB channel tuples.
   Cover both Reading view and CM-rendered callout widgets. */
:is(.markdown-rendered, .markdown-source-view.mod-cm6) .callout {
  border: var(--callout-border-width) solid color-mix(in srgb, var(--callout-color) 22%, transparent);
  border-radius: var(--callout-radius);
  padding: var(--callout-padding);
  margin-block: 0.8em;
  background-color: color-mix(in srgb, var(--callout-color) 6%, var(--background-primary));
  mix-blend-mode: normal;
}
/* CM can insert a render wrapper between the embed block and the callout.
   Match top-level callouts across that wrapper, preserving nested spacing. */
.markdown-source-view.mod-cm6.is-live-preview .cm-embed-block .callout:not(.callout .callout) {
  margin-block: 0;
}
/* The callout already has its own border. Suppress only its redundant editor
   hover outline; leave the edit action and other embedded blocks unchanged. */
.markdown-source-view.mod-cm6.is-live-preview .cm-embed-block:has(.callout) {
  --embed-block-shadow-hover: none;
}
:is(.markdown-rendered, .markdown-source-view.mod-cm6) .callout-title {
  font-weight: 600;
  gap: 8px;
}
:is(.markdown-rendered, .markdown-source-view.mod-cm6) .callout-content > :first-child { margin-top: 0.5em; }
:is(.markdown-rendered, .markdown-source-view.mod-cm6) .callout-content > :last-child { margin-bottom: 0; }
.markdown-rendered table :is(td, th) {
  line-height: 1.6;
  vertical-align: top;
}
.markdown-rendered .task-list-item.is-checked {
  color: var(--text-muted);
}
.markdown-rendered a:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (max-width: 600px) {
  body { --file-margins: 24px 22px 48px; --font-text-size: 17px; }
}
@media print {
  body { --file-margins: 0; }
  .markdown-rendered { color: #1d1d1f; background: #fff; }
}

/* Application chrome inspired by the supplied ChatGPT/Codex reference.
   Keep these tokens separate from document colors and editor geometry. */
.theme-light {
  --pb-shell: #e8f0f2;
  --pb-sidebar: #f7f9fa;
  --pb-ui-hover: #eef1f2;
  --pb-ui-selected: #e7edef;
  --pb-ui-border: #e7ebed;
  --pb-ui-text: #444b50;
  --pb-ui-muted: #737c82;
  --pb-ui-shadow: 0 4px 18px rgb(30 50 60 / 6%);
}
.theme-dark {
  --pb-shell: #202729;
  --pb-sidebar: #242a2c;
  --pb-ui-hover: #30383a;
  --pb-ui-selected: #384245;
  --pb-ui-border: #363e41;
  --pb-ui-text: #dde3e5;
  --pb-ui-muted: #a1adb2;
  --pb-ui-shadow: 0 4px 18px rgb(0 0 0 / 18%);
}
body {
  --titlebar-background: var(--pb-shell);
  --titlebar-background-focused: var(--pb-shell);
  --titlebar-text-color: var(--pb-ui-muted);
  --titlebar-text-color-focused: var(--pb-ui-text);
  --ribbon-background: var(--pb-shell);
  --ribbon-background-collapsed: var(--pb-shell);
  --tab-container-background: var(--pb-shell);
  --sidebar-tab-container-background: var(--pb-shell);
  --tab-text-color: var(--pb-ui-muted);
  --tab-text-color-focused-active-current: var(--pb-ui-text);
  --tab-divider-color: transparent;
  --tab-outline-color: transparent;
  --tab-outline-width: 0px;
  --tab-radius: 9px;
  --tab-radius-active: 9px;
  --tab-background-active: var(--background-primary);
  --tab-inner-background-hover: var(--pb-ui-hover);
  --divider-color: var(--pb-ui-border);
  --nav-item-color: var(--pb-ui-text);
  --nav-item-color-hover: var(--pb-ui-text);
  --nav-item-color-active: var(--pb-ui-text);
  --nav-item-background-hover: var(--pb-ui-hover);
  --nav-item-background-active: var(--pb-ui-selected);
  --nav-item-background-selected: var(--pb-ui-selected);
  --nav-item-radius: 9px;
  --nav-item-padding: 7px 10px 7px 24px;
  --nav-item-parent-padding: 7px 10px 7px 24px;
  --nav-item-margin-bottom: 2px;
  --nav-item-weight-active: 500;
  --status-bar-background: var(--background-primary);
  --status-bar-border-color: var(--pb-ui-border);
  --status-bar-text-color: var(--pb-ui-muted);
  --status-bar-radius: 10px 0 0 0;
  --input-radius: 10px;
  --search-input-radius: 12px;
  --button-radius: 10px;
  --modal-radius: 16px;
  --modal-border-color: var(--pb-ui-border);
  --modal-sidebar-background: var(--pb-sidebar);
  --modal-shadow: var(--pb-ui-shadow);
  --prompt-border-color: var(--pb-ui-border);
}
/* Desktop-only chrome: preserve mobile navigation and native resize handles. */
body:not(.is-mobile) .workspace {
  background: var(--pb-shell);
}
body:not(.is-mobile) .workspace-split:is(.mod-primary-split, .mod-secondary-split) .workspace-leaf-content:not([data-type="markdown"]):not([data-type="canvas"]) {
  background: var(--pb-sidebar);
}
body:not(.is-mobile) .workspace-split:is(.mod-primary-split, .mod-secondary-split) .workspace-sidedock-vault-profile {
  background: var(--pb-sidebar);
  border-top: 1px solid var(--pb-ui-border);
}
body:not(.is-mobile) .workspace-split.mod-root .workspace-tabs:not(.mod-stacked) > .workspace-tab-container {
  border-radius: 12px 12px 0 0;
}
body:not(.is-mobile) .workspace-ribbon .clickable-icon {
  border-radius: 10px;
  color: var(--pb-ui-muted);
}
body:not(.is-mobile) .workspace-ribbon .clickable-icon:hover {
  background: var(--pb-ui-selected);
  color: var(--pb-ui-text);
}
.workspace-split:is(.mod-primary-split, .mod-secondary-split) .nav-header {
  padding: 10px 8px;
}
.workspace-split:is(.mod-primary-split, .mod-secondary-split) .nav-buttons-container {
  gap: 5px;
}
.workspace-split:is(.mod-primary-split, .mod-secondary-split) .nav-files-container {
  padding-inline: 8px;
}
.workspace-split:is(.mod-primary-split, .mod-secondary-split) .search-input-container input {
  background: var(--background-primary);
  border-color: var(--pb-ui-border);
  box-shadow: 0 1px 4px rgb(0 0 0 / 3%);
}
.workspace .view-header {
  border-bottom: 1px solid var(--pb-ui-border);
}
.workspace .view-header-title-container {
  color: var(--pb-ui-muted);
}
.workspace :is(.view-actions, .nav-buttons-container) .clickable-icon {
  border-radius: 8px;
}
.workspace :is(.view-actions, .nav-buttons-container) .clickable-icon:hover {
  background: var(--pb-ui-hover);
}
/* Preserve keyboard navigation feedback even with softer pointer hover colors. */
.workspace :is(.clickable-icon, .nav-file-title, .nav-folder-title):focus-visible {
  outline: 2px solid var(--interactive-accent);
  outline-offset: -2px;
}

/* Rounded panel silhouettes, matching the desktop reference. Native sidebar
   classes are primary/secondary in Obsidian 1.14. Clip only existing content
   containers; split resize handles live outside these containers. */
body:not(.is-mobile) {
  --pb-panel-radius: 14px;
  --ribbon-width: 52px;
  --ribbon-padding: 8px 6px 12px;
}
body:not(.is-mobile) .workspace-split.mod-primary-split {
  background: var(--pb-shell);
}
body:not(.is-mobile) .workspace-split.mod-primary-split > .workspace-tabs.mod-top > .workspace-tab-container {
  border-top-left-radius: var(--pb-panel-radius);
}
body:not(.is-mobile) .workspace-split.mod-primary-split .workspace-sidedock-vault-profile {
  border-bottom-left-radius: var(--pb-panel-radius);
  overflow: hidden;
}
body:not(.is-mobile) .workspace-split.mod-root .workspace-tabs:not(.mod-stacked) > .workspace-tab-container {
  border-radius: var(--pb-panel-radius) var(--pb-panel-radius) 0 0;
}
body:not(.is-mobile) .workspace-ribbon .side-dock-ribbon-action {
  --icon-size: 20px;
  --icon-stroke: 1.75px;
  width: 38px;
  height: 38px;
  padding: 9px;
  margin-inline: auto;
  border-radius: 11px;
}
body:not(.is-mobile) :is(.workspace-tab-header-container, .view-header, .nav-header) .clickable-icon {
  --icon-size: 18px;
  --icon-stroke: 1.75px;
  border-radius: 9px;
}

body:not(.is-mobile) .workspace-split.mod-root .workspace-tabs:not(.mod-stacked) > .workspace-tab-container > .workspace-leaf {
  border-radius: inherit;
  overflow: hidden;
}

/* Detached rounded tabs: remove native reverse curves on active AND hovered
   tabs. Space the containing strip, not each tab inside a clipped strip. */
body:not(.is-mobile) .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container-inner {
  margin-block: 5px;
  padding-block: 0;
  gap: 4px;
}
body:not(.is-mobile) .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
  margin-block: 0;
  padding: 1px 3px;
  border-radius: 9px;
  box-shadow: none;
}
body:not(.is-mobile) .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header::before,
body:not(.is-mobile) .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header::after {
  display: none;
}
body:not(.is-mobile) .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active {
  background: var(--background-primary);
  box-shadow: 0 1px 3px rgb(0 0 0 / 4%);
}