/**
 * Immersive writing shell — one continuous surface, system light/dark.
 * Mount node is both .editor-mount and .handymd — use compound selectors.
 */

:root {
  color-scheme: light dark;

  --paper: #f3f1ec;
  --ink: #1a1816;
  --ink-soft: #6e6860;
  --accent: #c24b2f;
  --line: #d9d3c8;
  --status-bg: color-mix(in srgb, var(--paper) 88%, transparent);
  --diagram-bg: #ebe7df;
  --diagram-ink: #1a1816;

  --font:
    ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", "Sarasa Mono SC",
    "Noto Sans Mono CJK SC", "Source Han Mono SC", "Menlo", "Consolas", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", monospace;
  --mono: var(--font);
  --font-size: 17px;
  --line-height: 1.75;
  --content-width: 720px;

  --app-hm-fg: #1f1c19;
  --app-hm-fg-dim: #7a746a;
  --app-hm-marker: #a8a094;
  --app-hm-accent: #c24b2f;
  --app-hm-code-fg: #a63a24;
  --app-hm-code-bg: rgba(26, 24, 22, 0.07);
  --app-hm-codeblock-bg: #ebe7df;
  --app-hm-quote-border: #cfc7ba;
  --app-hm-quote-fg: #5c564e;
  --app-hm-tag-bg: #e5e0d6;
  --app-hm-tag-fg: #5f584f;
  --app-hm-hr: #d4cdc2;
  --app-hm-table-border: #d4cdc2;
  --app-hm-table-header-bg: rgba(26, 24, 22, 0.04);
  --app-hm-selection: rgba(194, 75, 47, 0.18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141312;
    --ink: #ece7df;
    --ink-soft: #a49c90;
    --accent: #e08a66;
    --line: #2c2925;
    --status-bg: color-mix(in srgb, var(--paper) 88%, transparent);
    --diagram-bg: #1c1a17;
    --diagram-ink: #f2eee6;

    --app-hm-fg: #ece7df;
    --app-hm-fg-dim: #9a9388;
    --app-hm-marker: #6f6860;
    --app-hm-accent: #e08a66;
    --app-hm-code-fg: #f0a898;
    --app-hm-code-bg: rgba(255, 244, 230, 0.08);
    --app-hm-codeblock-bg: #1c1a17;
    --app-hm-quote-border: #4a443c;
    --app-hm-quote-fg: #c4bdb2;
    --app-hm-tag-bg: #2a2621;
    --app-hm-tag-fg: #d2cbc0;
    --app-hm-hr: #3a3530;
    --app-hm-table-border: #3a3530;
    --app-hm-table-header-bg: rgba(255, 244, 230, 0.05);
    --app-hm-selection: rgba(224, 138, 102, 0.3);
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  font: inherit;
}

.scroll-root {
  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
}

.page {
  width: 100%;
  max-width: var(--content-width);
  min-height: 100%;
  margin: 0 auto;
  padding: 12vh 28px 50vh 0;
  background: transparent;
}

.editor-mount {
  width: 100%;
  min-height: 40vh;
}

/*
 * createEditor adds .handymd on the mount node itself.
 * `.editor-mount .handymd` (descendant) never matched — dark tokens never applied.
 */
.editor-mount.handymd,
.editor-mount .handymd {
  --hm-font: var(--font);
  --hm-mono: var(--mono);
  --hm-fg: var(--app-hm-fg);
  --hm-fg-dim: var(--app-hm-fg-dim);
  --hm-marker: var(--app-hm-marker);
  --hm-accent: var(--app-hm-accent);
  --hm-code-fg: var(--app-hm-code-fg);
  --hm-code-bg: var(--app-hm-code-bg);
  --hm-codeblock-bg: var(--app-hm-codeblock-bg);
  --hm-quote-border: var(--app-hm-quote-border);
  --hm-quote-fg: var(--app-hm-quote-fg);
  --hm-tag-bg: var(--app-hm-tag-bg);
  --hm-tag-fg: var(--app-hm-tag-fg);
  --hm-hr: var(--app-hm-hr);
  --hm-table-border: var(--app-hm-table-border);
  --hm-table-header-bg: var(--app-hm-table-header-bg);
  --hm-selection: var(--app-hm-selection);
  color: var(--app-hm-fg);
  min-height: 40vh;
}

.editor-mount.handymd .ProseMirror,
.editor-mount .handymd .ProseMirror {
  max-width: none;
  margin: 0;
  min-height: 40vh;
  padding: 0 8px 0 52px;
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--hm-fg);
}

/* Code fence: one continuous band — no per-line borders (those looked like a table). */
.editor-mount.handymd .hm-code-line,
.editor-mount.handymd .hm-fence-line,
.editor-mount .handymd .hm-code-line,
.editor-mount .handymd .hm-fence-line {
  background: var(--hm-codeblock-bg);
  box-shadow: none;
}

.editor-mount.handymd .hm-code-lang,
.editor-mount .handymd .hm-code-lang {
  color: var(--hm-fg-dim);
  opacity: 0.7;
}

.editor-mount.handymd .hm-tag,
.editor-mount .handymd .hm-tag {
  background: var(--hm-tag-bg);
  color: var(--hm-tag-fg);
  border-radius: 4px;
}

.editor-mount.handymd .hm-link,
.editor-mount .handymd .hm-link {
  color: var(--hm-accent);
  text-decoration-color: color-mix(in srgb, var(--hm-accent) 50%, transparent);
}

.editor-mount.handymd .hm-diagram,
.editor-mount .handymd .hm-diagram {
  background: var(--diagram-bg);
  color: var(--diagram-ink);
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
  padding: 18px;
  box-shadow: none;
}

.editor-mount.handymd .hm-diagram svg,
.editor-mount .handymd .hm-diagram svg {
  max-width: 100%;
  height: auto;
  color: var(--diagram-ink);
}

.editor-mount.handymd .hm-diagram svg text,
.editor-mount.handymd .hm-diagram svg .nodeLabel,
.editor-mount.handymd .hm-diagram svg .edgeLabel,
.editor-mount.handymd .hm-diagram svg .label,
.editor-mount .handymd .hm-diagram svg text,
.editor-mount .handymd .hm-diagram svg .nodeLabel,
.editor-mount .handymd .hm-diagram svg .edgeLabel,
.editor-mount .handymd .hm-diagram svg .label {
  fill: var(--diagram-ink) !important;
  color: var(--diagram-ink) !important;
}

.editor-mount.handymd .hm-diagram-empty,
.editor-mount .handymd .hm-diagram-empty {
  border-color: color-mix(in srgb, var(--ink) 18%, transparent);
  color: var(--ink-soft);
}

.status {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  left: 50%;
  z-index: 40;
  transform: translate(-50%, -6px);
  max-width: min(70vw, 360px);
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: var(--status-bg);
  color: var(--ink-soft);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.status.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

.status[hidden] {
  display: none !important;
}

.status[data-tone='dirty'] {
  color: var(--accent);
}

.status[data-tone='ok'] {
  color: #5a8f66;
}

@media (prefers-color-scheme: dark) {
  .status[data-tone='ok'] {
    color: #7cb88a;
  }
}

.corner-chrome {
  position: fixed;
  top: calc(10px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0.16;
  transition: opacity 0.2s ease;
}

.corner-chrome:hover,
.corner-chrome:focus-within {
  opacity: 1;
}

.ghost-btn {
  appearance: none;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
}

.ghost-btn:hover,
.ghost-btn:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  outline: none;
}

.drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.drop-overlay[hidden] {
  display: none !important;
}

.drop-card {
  padding: 18px 28px;
  color: var(--ink-soft);
  font-size: 13px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 90;
  transform: translate(-50%, 12px);
  padding: 9px 15px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}

.toast.is-on {
  opacity: 1;
  transform: translate(-50%, 0);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

@media (max-width: 640px) {
  .page {
    padding: 8vh 16px 40vh 0;
  }

  .editor-mount.handymd .ProseMirror,
  .editor-mount .handymd .ProseMirror {
    padding-left: 40px;
  }

  .secondary-action {
    display: none;
  }

  .corner-chrome {
    opacity: 0.45;
  }
}

@media (hover: none) {
  .corner-chrome {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .status,
  .toast,
  .corner-chrome {
    transition: none;
  }
}