/* note v1 前端样式（spec §3.9）。色板取 landing_page/DESIGN-claude.md：
   暖奶油画布、珊瑚色点睛、发丝线分割、色块优先于阴影。
   布局分叉（正文栏 720px 居中 + 桌面页边栏）由 12 号票接手，本票只把今天卡放好。

   三条刻意的取舍（都被真机打过脸，别顺手改回去）：
   - 🔴 全文件没有一处 vh / dvh / svh —— 它们都不处理软键盘（05 §1.3）。
     高度由 app.js 按 visualViewport 写死。
   - 🔴 正文 17px，绝不低于 16px —— iOS 会对 <16px 的输入框自动放大整页，
     那是打开就撞上的一次摩擦。
   - 🔴 底栏不用 position:fixed（05 T1#16 在 iOS 上不可靠），
     它待在被 JS 撑开的 #app 里。 */

:root {
  --canvas: #faf9f5;
  --surface-soft: #f5f0e8;
  --surface-card: #efe9de;
  --ink: #141413;
  --body: #3d3d3a;
  --muted: #6c6a64;
  --muted-soft: #8e8b82;
  --hair: #e6dfd8;
  --hair-soft: #ebe6df;
  --primary: #cc785c;
  --primary-active: #a9583e;
  --success: #5db872;
  --error: #c64545;
  --tag-bg: #f2e3da;
  --sans: "StyreneB", Inter, -apple-system, BlinkMacSystemFont, "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  --serif: Copernicus, "Tiempos Headline", Georgia, "Songti SC", serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 🔴 [hidden] 必须写在样式表最前面且 !important：作者样式里任何一条 display
   都能把它盖掉（陷阱 9），而这份文件里 display:flex 到处都是。 */
[hidden] { display: none !important; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--canvas);
  color: var(--body);
  overscroll-behavior: none;
  font-family: var(--sans);
}

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

/* 高度与位移全部由 app.js 按 visualViewport 写死，CSS 不参与。 */
#app {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  will-change: transform;
}

/* ---------------------------------------------------------------- 登录 */

#login {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#login form {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#login h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 36px;
  color: var(--ink);
  margin: 0 0 8px;
  text-align: center;
}
/* 只读账号框：给密码管理器认领用的，视觉上退到背景里 */
#login-account {
  border: 1px solid var(--hair);
  background: var(--surface-soft);
  color: var(--muted-soft);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px;
  font-family: inherit;
}
#login input[type="password"], #relogin input[type="password"] {
  border: 1px solid var(--hair);
  background: #fff;
  color: var(--ink);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 17px;               /* ≥16px，见文件头 */
  font-family: inherit;
}
#login input:focus, #relogin input:focus {
  outline: 2px solid var(--primary);
  outline-offset: -1px;
}
#login button, #relogin button {
  border: none;
  background: var(--primary);
  color: #fff;
  border-radius: 10px;
  padding: 13px 14px;
  font-size: 16px;
  font-family: inherit;
  font-weight: 500;
}
#login button:active, #relogin button:active { background: var(--primary-active); }
#login button[disabled], #relogin button[disabled] { background: var(--hair); color: var(--muted-soft); }
#login-hint, #relogin-hint {
  margin: 0;
  min-height: 1.4em;
  font-size: 13px;
  line-height: 1.4;
  color: var(--error);
}

/* ---------------------------------------------------------------- 工作区 */

#workspace {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#topbar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(env(safe-area-inset-top), 8px) 16px 8px;
  border-bottom: 1px solid var(--hair-soft);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--muted);
}

#card { flex: 1 1 auto; min-height: 0; display: flex; }
#editor { flex: 1 1 auto; min-width: 0; }

/* ---------------------------------------------------------------- 编辑器 */

.cm-editor { height: 100%; font-size: 17px; }
.cm-editor.cm-focused { outline: none; }
.cm-scroller {
  font-family: inherit;
  line-height: 1.75;
  -webkit-overflow-scrolling: touch;
}
.cm-content {
  /* 底部那一大块留白让最后一行也能滚到屏幕中部再打字。
     用 vmin 不是 vh：它与软键盘无关，只是一段和视口短边成比例的空白。 */
  padding: 16px 20px 40vmin;
  caret-color: var(--primary);
  max-width: 720px;              /* §3.9：正文栏 720px */
  margin: 0 auto;
  width: 100%;
  color: var(--body);
}
.cm-line { padding: 0; }
.cm-cursor { border-left-width: 2px; }
.cm-selectionBackground, .cm-editor ::selection { background: #e8d9cf; }

.cm-h1 { font-size: 1.5em; font-weight: 700; line-height: 1.4; color: var(--ink); }
.cm-h2 { font-size: 1.3em; font-weight: 700; line-height: 1.45; color: var(--ink); }
.cm-h3 { font-size: 1.12em; font-weight: 650; color: var(--ink); }
.cm-h4, .cm-h5, .cm-h6 { font-weight: 650; color: var(--ink); }

.cm-strong { font-weight: 700; color: var(--ink); }
.cm-em { font-style: italic; }
.cm-code {
  font-family: var(--mono);
  font-size: .92em;
  background: var(--surface-soft);
  border-radius: 4px;
  padding: 1px 4px;
}
.cm-listmark { color: var(--primary); font-weight: 700; }
.cm-quote { color: var(--muted); }
.cm-link { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.cm-task { color: var(--primary); font-weight: 600; }

.cm-tag {
  background: var(--tag-bg);
  color: var(--primary-active);
  border-radius: 5px;
  padding: 1px 5px;
}
.cm-tag-decision { font-weight: 700; }

/* 语法符号本体：不用 display:none（行高会跳），只做视觉降噪。
   真正的「隐藏」走 CM6 的 replace decoration，见 editor.js。 */
.cm-mark { color: var(--muted-soft); opacity: .45; }

/* ---------------------------------------------------------------- 状态带 */

#bottombar {
  flex: none;
  border-top: 1px solid var(--hair);
  background: var(--surface-soft);
  padding-bottom: env(safe-area-inset-bottom);
}

#save-state {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  text-align: left;
}
#save-state i {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: transparent;
}
#save-state em {           /* 🔴 日期必须明写：状态属于哪一天是必答项 */
  font-style: normal;
  color: var(--muted-soft);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
#save-state[data-state="saved"] { color: var(--success); }
#save-state[data-state="saved"] i { background: currentColor; }
#save-state[data-state="saving"] i { animation: note-pulse .7s ease-in-out infinite; }
#save-state[data-state="offline"] { color: var(--muted); }
#save-state[data-state="error"] { color: var(--error); }
#save-state[data-state="error"] i { background: currentColor; }
@keyframes note-pulse { 50% { opacity: .25; } }

#evidence {
  flex: none;
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.75;
  color: var(--muted);
  background: var(--surface-card);
  border-top: 1px solid var(--hair);
  font-family: var(--mono);
  word-break: break-all;
}
#evidence b { color: var(--ink); font-weight: 600; }
#evidence .bad { color: var(--error); }

#tools {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 0 10px 6px;
  overflow-x: auto;
}
/* 工具条只在打字时出现 —— 不打字时它白占手机的竖向空间 */
body.typing #tools { display: flex; }

#tools button {
  flex: none;
  min-width: 44px;
  min-height: 38px;          /* 触摸目标不低于 38px */
  border: 1px solid var(--hair);
  background: var(--canvas);
  color: var(--body);
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
}
#tools button.wide { min-width: 62px; }
#tools button.right { margin-left: auto; }
#tools button:active { border-color: var(--primary); color: var(--primary); }

/* ---------------------------------------------------------------- 401 浮层 */

#relogin {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* 半透明而不是不透明：**你打的字还在后面**，这件事要看得见 */
  background: rgba(250, 249, 245, .86);
  backdrop-filter: blur(3px);
}
#relogin form {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--canvas);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 18px;
}
#relogin p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--body); }
#relogin p b { color: var(--ink); }

/* ---------------------------------------------------------------- 桌面 */

@media (min-width: 1000px) {
  /* §3.9：<1000px 塌回移动形态；桌面只是把状态带收到左下角。
     真正的页边栏是 12 号票的事。 */
  #bottombar { background: transparent; border-top: 1px solid var(--hair-soft); }
  #save-state { width: auto; max-width: 720px; margin: 0 auto; }
  #save-state em { margin-left: 16px; }
  #evidence { max-width: 720px; margin: 0 auto; border-radius: 10px 10px 0 0; }
  #tools { max-width: 720px; margin: 0 auto; }
}