/* 阅读器前台。零构建：没有框架、没有预处理器，就是一份 CSS。 */
:root {
  --line: #ddd8ce; --muted: #8a8578; --ink: #1f1c18; --paper: #fbfaf7;
  --mark: #fff2b8; --accent: #8c3a2b;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); background: var(--paper);
  font: 17px/1.75 ui-serif, Georgia, "Songti SC", "SimSun", serif;
}
.nav {
  display: flex; gap: 1rem; align-items: center;
  padding: .75rem 1.5rem; border-bottom: 1px solid var(--line); background: #fff;
  font-family: ui-sans-serif, system-ui, "PingFang SC", sans-serif; font-size: .9rem;
}
.nav a { color: var(--ink); text-decoration: none; }
.nav .brand { font-weight: 600; }
.nav .right { margin-left: auto; }
.navright { display: flex; gap: 1rem; align-items: center; }
.nav .signout button { border: 0; background: none; padding: 0; cursor: pointer;
                       color: var(--muted); font: inherit; font-size: .9rem; }
.nav .signout button:hover { color: var(--ink); }
main { max-width: 44rem; margin: 0 auto; padding: 1.5rem; }

/* 登录与注册。窄一列，别让输入框拉到 44rem 那么宽。 */
.authform { max-width: 20rem; margin: 1rem 0; }
.authform label { display: block; margin: .75rem 0; }
.authform input { display: block; width: 100%; margin-top: .25rem;
                  padding: .4rem .5rem; border: 1px solid var(--line);
                  font: inherit; }
.authform button { padding: .45rem 1.2rem; border: 1px solid var(--line);
                   background: #fff; color: var(--ink); font: inherit;
                   cursor: pointer; }
.formerror { color: #a3312a; }
h1 { font-size: 1.6rem; line-height: 1.3; margin: 1rem 0 .5rem; }
h2 { font-size: 1.05rem; margin: 1.75rem 0 .5rem; color: var(--muted);
     font-family: ui-sans-serif, system-ui, sans-serif; letter-spacing: .05em;
     text-transform: uppercase; }
.foot { text-align: center; padding: 2rem 0; font-size: .85rem; }
.foot a { color: var(--muted); }
.empty { color: var(--muted); }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.list a { color: var(--ink); text-decoration: none; }
.list a:hover { color: var(--accent); }
.list .rubric { display: block; color: var(--muted); font-size: .9rem; }
.list .meta { color: var(--muted); font-size: .8rem;
              font-family: ui-sans-serif, system-ui, sans-serif; }
/* 阅读状态。跟在标题后面而不是另起一行：读者扫这一列就是在找「还没读的」。
   已读完的整条压暗——一屏几十篇，让读过的退到背景里比给它加个标签有用。 */
/* 栏目：原来是分组标题，现在是行上的一个小标签。 */
.list .sec { color: var(--accent); letter-spacing: .04em;
             text-transform: uppercase; }
/* 收藏。列表里是个不可点的记号，文章页上是个按钮，共用一个颜色。 */
.star.on { color: #c99a1e; }
.list .star { margin-right: .3rem; font-size: .85rem; }
button.star { border: 0; background: none; padding: 0; cursor: pointer;
              font: inherit; color: var(--muted); }
button.star:hover:not(:disabled) { color: #c99a1e; }
button.star:disabled { cursor: default; }
.list .state { margin-left: .5rem; font-size: .75rem; border-radius: 999px;
               padding: .05rem .5rem; white-space: nowrap;
               font-family: ui-sans-serif, system-ui, sans-serif; }
.list .st-reading .state { background: #fdf1d8; color: #8a6100; }
.list .st-done .state { background: #e6efe4; color: #3d6b3a; }
.list .st-done a { color: var(--muted); }

/* 文章页 */
.kicker { color: var(--accent); font-size: .8rem; letter-spacing: .08em;
          text-transform: uppercase; margin: 1rem 0 0;
          font-family: ui-sans-serif, system-ui, sans-serif; }
/* 中文标题跟在英文标题下面，比它小、比 rubric 重：它是标题，不是注解。
   不用斜体——中文没有真正的斜体，浏览器只会把字硬拉斜。 */
.title-zh { font-size: 1.15rem; font-weight: 600; margin: .2rem 0 .4rem;
            font-family: ui-sans-serif, system-ui, "PingFang SC", sans-serif; }
.rubric { color: var(--muted); font-style: italic; margin: .25rem 0; }
.meta { color: var(--muted); font-size: .85rem;
        font-family: ui-sans-serif, system-ui, sans-serif; }
img.head { max-width: 100%; height: auto; margin: 1rem 0; }
.para { margin: 1.25rem 0; }
.para p.en { margin: 0; }
p.zh { color: #33404d; margin: .4rem 0; }
details { margin: .35rem 0; font-size: .9rem;
          font-family: ui-sans-serif, system-ui, sans-serif; }
details summary { cursor: pointer; color: var(--muted); }
details ul { margin: .3rem 0; padding-left: 1.2rem; }
/* 写过笔记的那一段，角标点亮。 */
.notebox[data-has-note] summary { color: var(--accent); }
textarea.note { display: block; width: 100%; margin: .3rem 0;
                padding: .4rem .5rem; border: 1px solid var(--line);
                font: inherit; resize: vertical; }
.notestate { margin: 0; color: var(--muted); font-size: .85em; min-height: 1.2em; }
.background { border: 1px solid var(--line); padding: .5rem .75rem; background: #fff; }
.card h3 { font-size: .95rem; margin: .5rem 0 .2rem; }
.hard { border-left: 3px solid var(--line); padding-left: .75rem; margin: .5rem 0; }
.selfcheck { color: #444; }
/* 「读完了」。统计只认这一下，所以它要显眼，而且要在全文的最后——读完
   之前就摆在眼前，等于在请人随手按。 */
.finish { margin: 2.5rem 0 1rem; padding-top: 1.25rem;
          border-top: 1px solid var(--line); text-align: center; }
.finish button { font: inherit; cursor: pointer; padding: .5rem 1.5rem;
                 border: 1px solid var(--accent); border-radius: 4px;
                 background: var(--accent); color: #fff; }
.finish button:hover:not(:disabled) { filter: brightness(1.1); }
.finish button:disabled { background: none; color: var(--muted);
                          border-color: var(--line); cursor: default; }
.finishstate { color: var(--muted); font-size: .85rem; margin: .5rem 0 0;
               min-height: 1.2em; }
.levelpick { margin-left: auto; color: var(--muted); }
.levelpick select { font: inherit; padding: .1rem .3rem; }

/* 分级高亮（设计 §8.1）。
   服务端把每个词条都渲染出来了，class 带着难度档；这里按 body[data-level]
   把「用户已经掌握的档」关掉。换档只改一个属性，零请求即时重绘。 */
mark.tm {
  background: var(--mark); color: inherit; cursor: pointer;
  border-radius: 2px; padding: 0 1px;
}

/* 关掉不高于用户档位的那些。pointer-events: none 是关键：光把背景去掉
   的话它仍然是个可点的 <mark>，读者会点出一个本不该出现的浮层。 */
body[data-level="a1"] .lv-a1,
body[data-level="a2"] .lv-a1, body[data-level="a2"] .lv-a2,
body[data-level="b1"] .lv-a1, body[data-level="b1"] .lv-a2,
body[data-level="b1"] .lv-b1,
body[data-level="b2"] .lv-a1, body[data-level="b2"] .lv-a2,
body[data-level="b2"] .lv-b1, body[data-level="b2"] .lv-b2,
body[data-level="c1"] .lv-a1, body[data-level="c1"] .lv-a2,
body[data-level="c1"] .lv-b1, body[data-level="c1"] .lv-b2,
body[data-level="c1"] .lv-c1,
body[data-level="c2"] .lv-a1, body[data-level="c2"] .lv-a2,
body[data-level="c2"] .lv-b1, body[data-level="c2"] .lv-b2,
body[data-level="c2"] .lv-c1, body[data-level="c2"] .lv-c2 {
  background: none; cursor: text; padding: 0; pointer-events: none;
}

/* 自我检测段里一律不高亮——检测的就是脱离辅助之后还读不读得懂。 */
.selfcheck mark.tm { background: none; cursor: text; pointer-events: none; }

/* 点词浮层。一行一件事：词、读音与词性、原型、释义、操作。挤在一起时，
   读者得先把一串东西扫一遍才找得到自己要的那一样。 */
#gloss-pop {
  position: absolute; z-index: 10; max-width: 21rem; min-width: 9rem;
  background: #fff; border: 1px solid var(--line); border-radius: 5px;
  padding: .6rem .8rem .5rem; box-shadow: 0 4px 16px rgba(0,0,0,.14);
  font: 15px/1.6 ui-sans-serif, system-ui, "PingFang SC", sans-serif;
}
#gloss-pop[hidden] { display: none; }
/* 词单独一行，当这个浮层的标题。 */
#gloss-pop .gp-word { font-weight: 600; font-size: 1.12em; line-height: 1.35; }
/* 读音与词性一行。放不下就换行，别把音标挤出浮层；baseline 对齐让大小不一
   的两块字看着仍在同一条线上。 */
#gloss-pop .gp-forms {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5rem;
  margin-top: .1rem; color: var(--muted); font-size: .85em;
}
#gloss-pop .gp-forms .pos { font-style: italic; font-size: .95em; }
/* 原型。「原型」两个字是标签，压暗；词本身要看得清，所以不压。 */
#gloss-pop .gp-lemma { margin-top: .15rem; font-size: .9em; }
#gloss-pop .gp-lemma .label { color: var(--muted); margin-right: .4em; }
#gloss-pop .gp-lemma .v { font-weight: 500; }
#gloss-pop .gp-gloss { margin-top: .4rem; }
/* 操作单独一行、靠右，并用一条细线跟释义分开——按钮跟在释义后面时，
   长释义换行会把它甩到一行的中间，看着像正文的一部分。 */
#gloss-pop .gp-act {
  display: flex; justify-content: flex-end;
  margin-top: .5rem; padding-top: .45rem; border-top: 1px solid var(--line);
}

/* 加生词的按钮：浮层里那一个跟在释义后面，划词那一个自己浮在选区上方。
   两个长一样，读者不必认两种控件。 */
.addword {
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  border-radius: 3px; padding: .1rem .45rem; cursor: pointer;
  font: inherit; font-size: .85em; white-space: nowrap;
}
.addword:hover { border-color: var(--accent); color: var(--accent); }
.addword:disabled { color: var(--muted); border-color: var(--line); cursor: default; }
/* 浮层里的按钮自成一行，不再需要跟释义拉开左边距。 */
#gloss-pop .addword { margin-left: 0; }
#add-word {
  position: absolute; z-index: 11;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
#add-word[hidden] { display: none; }

/* 我的页 */
.totals { font-size: 1.05rem; margin: .5rem 0 1rem; }
.yearbar { display: flex; flex-wrap: wrap; gap: .5rem; margin: .75rem 0 .5rem; }
/* 热力图。方块 10px、缝 2px 是量出来的：一整年 54 列共 646px，正文栏
   （44rem 减去左右各 1.5rem 内边距）有 656px，刚好放得下。用原来的
   11px + 3px 是 725px，右边整整 69px——也就是最后一列，也就是今天——会
   被裁到视野外，而 macOS 默认不显示滚动条，看上去就像今天没读。
   窄屏上仍然放不下，所以照旧能横滚，并由 me.js 开局滚到最右。
   这里是唯一允许横向滚动的地方，正文永远不横滚。 */
.heatwrap { overflow-x: auto; padding-bottom: .4rem; }
.hmonths { display: flex; gap: 2px; height: 1.1em; }
/* 一个标尺格对一列。标签比格子宽得多，得绝对定位浮出来——留在文档流里
   会把那一列撑开，整张图跟着错位，标尺就对不上下面的方块了。 */
.hmon { position: relative; width: 10px; flex: none; }
.hmon b { position: absolute; left: 0; top: 0; font-weight: normal;
          font-size: .7rem; color: var(--muted); white-space: nowrap; }
.heatmap { display: flex; gap: 2px; }
.hcol { display: flex; flex-direction: column; gap: 2px; }
.hcell { width: 10px; height: 10px; border-radius: 2px; background: #eceae4; }
/* 占位的格子只占位不着色：今天之后的日子还没发生，年视图两头露出来的半周
   属于隔壁年份。画成「读了 0 词」是假话，不画又会让那一列短一截、整张图
   错位。 */
.hcell.blank { background: none; }
.hcell.b1 { background: #cfe3c8; }
.hcell.b2 { background: #98c98a; }
.hcell.b3 { background: #5da54c; }
.hcell.b4 { background: #2f6b3a; }
.findbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
           margin: 1rem 0 .5rem;
           font-family: ui-sans-serif, system-ui, sans-serif; font-size: .9rem; }
/* 输入框占住剩下的宽度，但不无限长：一行几十个字符的搜索框在 44rem 的
   正文栏里看着像个地址栏。 */
.findbar input[type="search"] { flex: 1; min-width: 8rem; max-width: 22rem;
                                padding: .3rem .5rem; border: 1px solid var(--line);
                                font: inherit; }
.findbar button { padding: .3rem .9rem; border: 1px solid var(--line);
                  background: #fff; color: var(--ink); font: inherit;
                  cursor: pointer; }
.wbbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
         margin: .75rem 0; }
.wbbar .spacer { flex: 1; }
.chip { border: 1px solid var(--line); border-radius: 999px;
        padding: .15rem .7rem; font-size: .85rem; color: var(--muted);
        text-decoration: none; }
.chip:hover { color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.wordbook { list-style: none; padding: 0; margin: 0; }
.wordbook li { padding: .6rem 0; border-bottom: 1px solid var(--line); }
.wordbook .head { display: flex; gap: .5rem; align-items: baseline; }
.wordbook .head .spacer { flex: 1; }
.wordbook .lemma { color: var(--muted); font-size: .85rem; }
.wordbook .gloss { color: #33404d; }
.wordbook .src { margin: .3rem 0 0; color: var(--muted); font-size: .9rem; }
.wordbook .src a { color: inherit; }
.wordbook .meta { margin: .2rem 0 0; }
.wordbook .wdel { border: 0; background: none; cursor: pointer;
                  color: var(--muted); font-size: 1.1rem; line-height: 1;
                  padding: 0 .2rem; }
.wordbook .wdel:hover { color: #a3312a; }

/* 音标用等宽字体：IPA 里 ɪ ʊ ə 这些字形在正文字体下宽窄不一，排在一起
   像是没对齐。词性用小一号的灰字，别跟中文释义抢视觉。 */
.ipa {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .9em; color: #555; margin-left: .4em;
  font-style: normal;
}
.pos {
  font-size: .85em; color: #777; margin-left: .4em;
  font-style: italic;
}
.termbox .ipa, .termbox .pos { margin-left: .35em; }