/* Four colours carry the whole design: black type on white, red for structure
   (the band, rules, links, the publish button), yellow for emphasis and notices. */
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --fg: #111111;
  --muted: #6b6b6b;
  --rule: #e2e2e0;
  --red: #c8161d;
  --on-red: #ffffff;
  --yellow: #ffd100;
  --quote: #2b2b2b;
  --code: #f3f3f1;
  --field: #f6f6f4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f0f0f;
    --fg: #ece9e2;
    --muted: #9a9a96;
    --rule: #2c2c2a;
    --red: #ff4b3e;
    --on-red: #0f0f0f;
    --yellow: #ffd100;
    --quote: #d6d3cc;
    --code: #1b1b1a;
    --field: #191918;
  }
}

/* Typefaces are lists of fonts that readers already have; nothing is downloaded.
   Each list covers macOS/iOS, Windows, and Linux/Android names for the same style of face. */
:root {
  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC", "MiSans", "Noto Sans CJK SC", "Source Han Sans SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  --serif: "Times New Roman", "Songti SC", "Source Han Serif SC", "Noto Serif CJK SC", "Noto Serif SC", "STZhongsong", "华文中宋", "STSong", "SimSun", "宋体", serif;
  --kai: "Times New Roman", "LXGW WenKai", "霞鹜文楷", "Kaiti SC", "STKaiti", "华文楷体", "KaiTi", "楷体", "AR PL UKai CN", serif;
  --fang: "Times New Roman", "FangSong", "仿宋", "STFangsong", "华文仿宋", "FangSong_GB2312", serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  border-top: 6px solid var(--red);
  background: var(--bg);
  color: var(--fg);
  font: 18px/1.8 var(--sans);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--yellow); color: #111; }
[hidden] { display: none !important; }

/* ---- reading column ---- */

.page { max-width: 37em; margin: 0 auto; padding: 2.6em 1.2em 6em; }
.status { color: var(--muted); font-size: .95em; text-align: center; padding-top: 20vh; }
.status::before { content: "★"; display: block; color: var(--red); font-size: 1.3em; margin-bottom: .6em; }

.article h1 { font-size: 1.9em; line-height: 1.3; font-weight: 800; margin: 0 0 .6em; overflow-wrap: break-word; }
.article h1::after { content: ""; display: block; width: 3em; height: 6px; background: var(--red); margin-top: .55em; }
.article h1:empty { display: none; }
.article .byline { color: var(--muted); font-size: .82em; letter-spacing: .02em; margin: 0 0 2.4em; }
.article p { margin: 0 0 1.25em; text-align: justify; overflow-wrap: break-word; }
.article h2, .article h3, .article h4 { line-height: 1.45; font-weight: 800; margin: 2.2em 0 .8em; }
.article h2 { font-size: 1.36em; }
.article h2::before { content: ""; display: inline-block; width: .5em; height: .5em; background: var(--red); margin-right: .45em; vertical-align: .08em; }
.article h3 { font-size: 1.14em; }
.article h4 { font-size: 1em; }
.article strong { font-weight: 700; }
.article a { color: var(--red); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; overflow-wrap: anywhere; }
.article a.url { word-break: break-all; }
.article blockquote { margin: 0 0 1.25em; padding-left: 1em; border-left: 4px solid var(--red); color: var(--quote); }
.article blockquote > :last-child { margin-bottom: 0; }
.article ul, .article ol { margin: 0 0 1.25em; padding-left: 1.5em; }
.article li { margin: .3em 0; }
.article li::marker { color: var(--red); }
.article li > ul, .article li > ol, .article li > p { margin: .3em 0; }
.article hr { border: 0; height: 1.6em; margin: 2em 0; text-align: center; overflow: visible; }
.article hr::before { content: "★"; color: var(--red); line-height: 1.6; }
.article figure { margin: 2em 0; text-align: center; }
.article img { max-width: 100%; height: auto; vertical-align: middle; }
.article figcaption { color: var(--muted); font-size: .82em; margin-top: .6em; }
.article code { font: .88em/1.6 var(--mono); background: var(--code); padding: .1em .35em; border-radius: 2px; }
.article pre { background: var(--code); border-left: 4px solid var(--fg); padding: .9em 1em; overflow-x: auto; margin: 0 0 1.25em; }
.article pre code { background: none; padding: 0; }
.article .missing { color: var(--muted); }

.article.f-serif { font-family: var(--serif); }
.article.f-kai { font-family: var(--kai); }
.article.f-fang { font-family: var(--fang); }
.article.q-sans blockquote { font-family: var(--sans); }
.article.q-serif blockquote { font-family: var(--serif); }
.article.q-kai blockquote { font-family: var(--kai); }
.article.q-fang blockquote { font-family: var(--fang); }

.article .al { text-align: left; }
.article .ac { text-align: center; }
.article .ar { text-align: right; }
.article mark { background: var(--yellow); color: #111; padding: 0 .12em; }
.article sub, .article sup { font-size: .72em; line-height: 0; }
.article small { font-size: .85em; }
.article .table { overflow-x: auto; margin: 0 0 1.25em; }
.article table { border-collapse: collapse; width: 100%; font-size: .92em; line-height: 1.6; }
.article th, .article td { border: 1px solid var(--rule); padding: .45em .7em; text-align: left; vertical-align: top; }
.article th { font-weight: 700; background: var(--fg); color: var(--bg); border-color: var(--fg); }
.article td img { max-height: 12em; }

.article .fnref { font-size: .7em; line-height: 0; }
.article [data-jump] { color: var(--red); text-decoration: none; cursor: pointer; padding: 0 .1em; }
.article .footnotes { margin-top: 3.2em; padding-top: 1.2em; border-top: 2px solid var(--fg); color: var(--quote); font-size: .86em; }
.article .footnotes ol { margin: 0; padding-left: 1.6em; }
.article .flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: var(--yellow); color: #111; } to { background: transparent; } }

@media (max-width: 600px) {
  body { font-size: 17px; }
  .page { padding-top: 1.8em; }
  .article h1 { font-size: 1.55em; }
}
@media print {
  body { border-top: 0; }
  .page { max-width: none; padding: 0; }
  .article a { color: inherit; }
}

/* ---- editor ---- */

.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - 6px); }
.editor .pane { min-width: 0; padding: 1.1em 1.4em 3em; }
.editor .pane + .pane { border-left: 2px solid var(--fg); }
.editor .page { padding: .6em 0 3em; }
/* on a wide screen the two columns scroll on their own, so the text being written stays put */
@media (min-width: 901px) {
  .editor { height: calc(100vh - 6px); }
  .editor .pane { overflow-y: auto; }
}

.editor .tag { display: inline-block; background: var(--fg); color: var(--bg); font-size: .7em; font-weight: 700; letter-spacing: .2em; padding: .2em .6em .2em .8em; margin-bottom: 1em; }
.editor .bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin-bottom: 1em; }
.editor button {
  font: inherit; font-size: .8em; font-weight: 600; color: var(--fg); background: var(--bg);
  border: 1.5px solid var(--fg); border-radius: 2px; padding: .4em 1em; cursor: pointer;
}
.editor button:hover { background: var(--yellow); border-color: #111; color: #111; }
.editor button.primary { background: var(--red); border-color: var(--red); color: var(--on-red); padding-left: 1.6em; padding-right: 1.6em; }
.editor button.primary:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.editor button.danger { color: var(--red); border-color: var(--red); margin-left: auto; }
.editor button.danger:hover { background: var(--red); border-color: var(--red); color: var(--on-red); }
.editor button:focus-visible, .editor select:focus-visible, .editor summary:focus-visible { outline: 3px solid var(--yellow); outline-offset: 1px; }

.editor input[type=text], .editor input[type=password], .editor textarea, .editor select {
  display: block; width: 100%; font: inherit; color: inherit; background: var(--field);
  border: 0; border-bottom: 2px solid transparent; border-radius: 2px; padding: .5em .7em; margin-bottom: .6em;
}
.editor input:focus, .editor textarea:focus, .editor select:focus { outline: none; border-bottom-color: var(--red); }
.editor #title { font-size: 1.35em; font-weight: 800; background: none; border-bottom: 2px solid var(--fg); padding-left: 0; padding-right: 0; }
.editor #title:focus { border-bottom-color: var(--red); }
.editor #token { border-bottom-color: var(--yellow); }
.editor .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .6em; }
.editor select { font-size: .88em; padding: .55em .5em; }
.editor textarea { min-height: 56vh; resize: vertical; font-size: .92em; line-height: 1.7; margin-bottom: .2em; }

.editor .tools { gap: .3em; margin-bottom: .5em; }
.editor .tools button { font-weight: 400; padding: .22em .6em; font-size: .76em; border: 1px solid var(--rule); }
.editor .tools button:hover { border-color: #111; }
.editor .tools .sep { width: .35em; }
.editor .tools .t-b { font-weight: 800; }
.editor .tools .t-i { font-style: italic; font-family: Georgia, "Times New Roman", serif; }
.editor .tools .t-s { text-decoration: line-through; }

.editor .count { color: var(--muted); font-size: .74em; text-align: right; margin: 0 0 .8em; }
.editor .note { color: var(--muted); font-size: .76em; line-height: 1.65; margin: 0 0 1em; }
.editor #msg { background: var(--yellow); color: #111; border-left: 4px solid #111; padding: .6em .9em; font-size: .82em; }
.editor .help { color: var(--muted); font-size: .76em; line-height: 1.7; margin: 0 0 1em; }
.editor .help summary { cursor: pointer; color: var(--fg); font-weight: 600; }
.editor .help ul { margin: .5em 0 0; padding-left: 1.3em; }
.editor .help li { margin: .25em 0; }
.editor .help li::marker { color: var(--red); }
.editor .help code { font: .95em var(--mono); background: var(--field); padding: .05em .3em; border-radius: 2px; white-space: nowrap; }

.editor .result { border: 2px solid var(--fg); border-top: 6px solid var(--red); padding: .9em 1em .3em; margin-bottom: 1.2em; font-size: .82em; line-height: 1.65; }
.editor .result p { margin: 0 0 .7em; }
.editor .result .label { color: var(--muted); margin-bottom: .2em; }
.editor .result .row { display: flex; align-items: stretch; gap: .4em; margin: 0 0 .8em; }
.editor .result .link {
  flex: 1; min-width: 0; font: .92em/1.5 var(--mono); background: var(--field); border-radius: 2px;
  padding: .5em .7em; word-break: break-all; user-select: all; color: inherit; text-decoration: none;
}
.editor .result .row button { flex: none; font-size: .9em; padding: .2em .8em; }

.editor .guide { color: var(--muted); font-size: .86em; line-height: 1.8; max-width: 26em; margin: 12vh auto 0; }
.editor .guide::before { content: "★"; display: block; color: var(--red); font-size: 1.5em; margin-bottom: .4em; }
.editor .guide b { color: var(--fg); font-weight: 700; }
.editor .guide ul { margin: .6em 0 0; padding-left: 1.2em; }
.editor .guide li::marker { color: var(--red); }

@media (max-width: 900px) {
  .editor { grid-template-columns: minmax(0, 1fr); }
  .editor .pane + .pane { border-left: 0; border-top: 2px solid var(--fg); }
  .editor .guide { margin-top: 1em; }
}