/* 「我的字库」独立页（vault.html）专用样式。
   基础变量、.vault-cell / .vault-grid / .vault-progress 等沿用 styles.css（同一套视觉），
   这里只放这一页独有的：顶栏、工具栏、状态标签、按课分组。 */

.vault-topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 22px;border-bottom:1px solid var(--line);background:#fffdf8}
.vault-topbar h1{margin:0;font-size:19px;font-weight:700}
.vault-back{color:#c07a4c;text-decoration:none;font-size:13px;font-weight:600;border:1px solid #f2e4d4;background:#fff8f0;border-radius:999px;padding:7px 14px}
.vault-back:hover{background:#fff2e7}
.vault-tally{margin-left:auto;color:var(--muted);font-size:13px}
.vault-feedback{color:#b58a6a;text-decoration:none;font-size:12px;border-bottom:1px dashed #e7c9ae;padding-bottom:1px}
.vault-feedback:hover{color:#c26a42}

.vault-main{max-width:1100px;margin:0 auto;padding:22px 22px 60px}
.vault-main .vault-progress{margin-bottom:18px}

.vault-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:14px}
.vault-search{flex:1 1 240px;min-width:180px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 14px;font-size:14px;font-family:inherit;color:var(--ink)}
.vault-search:focus{outline:2px solid #ffd7b8;outline-offset:1px}
.vault-tabs{display:flex;flex-wrap:wrap;gap:7px}
/* 标签是 <button>，别继承浏览器默认外观（首页那颗 .vault-chip 随字库区块一起删了，
   所以这里得自己把胶囊样式写全，不能再指望 styles.css 里有同款） */
.vault-tab{border:1px solid #f2e4d4;background:#fff8f0;color:#c07a4c;border-radius:999px;padding:7px 13px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;transition:background .18s,color .18s}
.vault-tab:hover{background:#fff2e7}
.vault-tab b{font-weight:700;opacity:.75;margin-left:2px}
.vault-tab.active{background:var(--orange);border-color:var(--orange);color:#fff}
.vault-tab.active b{opacity:.9}
.vault-side{display:flex;gap:10px;align-items:center;margin-left:auto}
.vault-views{display:flex;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#fff}
.vault-view{border:0;background:#fff;color:var(--muted);font-family:inherit;font-size:12.5px;font-weight:600;padding:8px 13px;cursor:pointer}
.vault-view.active{background:#fff2e7;color:#c07a4c}
.vault-export{border:1px solid #ffd7b8;background:#fff6ec;color:#d98250;border-radius:11px;padding:9px 14px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer}
.vault-export:hover{background:#fff0e0}

.vault-status{margin:0 0 14px;color:var(--muted);font-size:12.5px}

/* 字格沿用 styles.css 的 .vault-cell（四态配色与 is-due 小红点都在那边）。
   但**墙的容器类名换了**：首页那面墙叫 .vault-wall，这一页叫 .vault-grid ——
   styles.css 里没有 .vault-grid 的规则，所以 display:grid 必须在这一页自己声明，
   否则 <div class="vault-grid"> 是 block、里面的 .vault-cell 是 flex（块级），
   240 个格子会**竖着排成一条**（曾经真的这样，页面上看不出"墙"）。
   这一页的墙也不再固定高 + 内部滚动：随页面自然生长，页内只留一个滚动，
   不再出现「页在滚、墙也在滚」抢手势的问题。 */
.vault-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:7px;padding:2px}
.vault-body .vault-grid{max-height:none;overflow:visible}
.vault-body.is-grouped .vault-grid{grid-template-columns:repeat(auto-fill,minmax(38px,1fr))}
/* 字格从 <a href> 换成 <button>（点字在本页开字卡）后要抹掉按钮的默认外观：
   button 不继承 font-family，且 iOS Safari 会给 appearance 兜一层系统样式。
   注意别写 `font:inherit` —— 那会把 styles.css 里的 font-size:15px 一起冲掉。 */
.vault-cell{text-decoration:none;font-family:inherit;appearance:none;-webkit-appearance:none}
.vault-group{margin:0 0 20px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px}
.vault-group h2{margin:0 0 12px;font-size:14px;font-weight:700;display:flex;align-items:baseline;gap:10px}
.vault-group h2 span{color:var(--muted);font-size:12px;font-weight:500}

.vault-empty{margin:26px 0;color:var(--muted);font-size:13px;text-align:center}
.vault-sentinel{display:block;width:100%;margin:16px 0 0;border:1px dashed #f2e4d4;background:#fffdf8;color:#c07a4c;border-radius:14px;padding:12px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer}
.vault-sentinel[hidden]{display:none}
.vault-foot{margin:18px 0 0;color:var(--muted);font-size:12px;line-height:1.7}

@media (max-width:640px){
  .vault-topbar{padding:12px 14px;gap:10px}
  .vault-main{padding:14px 14px 40px}
  .vault-side{margin-left:0;width:100%;justify-content:space-between}
  .vault-search{flex:1 1 100%}
}

/* 触控热区 ≥44×44（2026-09-24，S4）：375 宽下筛选标签 36 高、视图切换 36 高、导出 40 高，
   都够不着 Apple HIG 的触控下限。撑高并让内容居中（这些按钮原本靠 padding 撑，加高后会贴顶）。 */
@media (max-width:800px){
  .vault-tab{min-height:44px;display:inline-flex;align-items:center}
  .vault-view{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .vault-export{min-height:44px}
}