/* OpenHistory 组件库：页眉、页脚、按钮、表单、卡片、通知、分页、目录等。
   每个组件包含默认/悬停/焦点/按下/禁用/加载/成功/失败中适用的状态。 */

/* ---------- 页眉 ---------- */
.site-header {
  background: var(--color-header-bg);
  border-bottom: var(--border);
  position: sticky;
  top: 0;
  z-index: 80;
  backdrop-filter: blur(14px);
}
.site-header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 72px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  color: var(--color-ink);
  text-decoration: none;
}
.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--color-brand);
  color: var(--color-on-brand);
  font: 700 13px/1 var(--font-body);
  letter-spacing: -0.08em;
}
.brand-name { font-family: var(--font-display); font-size: 23px; font-weight: 700; letter-spacing: -0.03em; }
.brand:hover { color: var(--color-brand); }
.site-nav { display: none; align-items: center; gap: var(--sp-6); margin-right: auto; align-self: stretch; }
.site-nav a {
  text-decoration: none;
  color: var(--color-ink-2);
  padding: 0 2px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.site-nav a:hover { color: var(--color-brand); }
.site-nav a[aria-current="page"] {
  color: var(--color-brand);
  font-weight: 600;
  box-shadow: inset 0 -3px var(--color-brand);
}
.header-actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-4); }
[data-auth-area] { display: flex; align-items: center; gap: var(--sp-4); }
.account-link { text-decoration: none; font-size: var(--fs-small); font-weight: 600; }

/* 手机菜单按钮与展开层 */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  color: var(--color-ink);
  cursor: pointer;
}
.menu-lines { display: block; width: 19px; height: 14px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; position: relative; }
.menu-lines::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; border-top: 2px solid currentColor; }
.menu-toggle[aria-expanded="true"] .menu-lines { height: 0; border-bottom: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-lines::before { top: -2px; transform: rotate(90deg); }

/* 主题与语言切换：桌面与窄屏常驻页眉右侧，不进入手机展开菜单 */
.theme-toggle, .lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  line-height: 1;
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.theme-toggle:hover, .lang-toggle:hover { color: var(--color-brand); border-color: var(--color-brand); }
.lang-toggle[aria-pressed="true"] {
  color: var(--color-brand);
  border-color: var(--color-brand);
  background: var(--color-brand-soft);
}

.mobile-nav {
  display: none;
  border-top: var(--border);
  background: var(--color-surface);
  position: absolute;
  left: 0;
  right: 0;
  box-shadow: 0 18px 30px rgba(var(--shadow-rgb), .12);
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 var(--pad-x);
  text-decoration: none;
  border-bottom: var(--border);
  color: var(--color-ink);
}
.mobile-nav a[aria-current="page"] { color: var(--color-brand); font-weight: 600; }
.mobile-auth { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); padding: var(--sp-4) var(--pad-x); border-top: var(--border); }
.mobile-auth a, .mobile-auth button { min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-line); border-radius: var(--radius); color: var(--color-brand); background: var(--color-surface); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
@media (min-width: 900px) {
  .site-nav { display: flex; }
  .menu-toggle, .mobile-nav { display: none !important; }
}
@media (max-width: 899px) {
  .site-header-inner { min-height: 60px; gap: var(--sp-3); }
  .site-header [data-auth-area] { display: none; }
}
@media (max-width: 359px) {
  .brand-name { font-size: 19px; }
  .brand-mark { width: 32px; height: 32px; }
  /* 语言、主题、菜单三个按钮并排后，最窄屏隐藏页眉文字字标防溢出 */
  .site-header .brand-name { display: none; }
}

/* 账户菜单（登录后） */
.account-menu { position: relative; }
.account-menu summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
  max-width: 14ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.account-menu summary::-webkit-details-marker { display: none; }
.account-menu[open] summary { color: var(--color-brand); }
.account-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius);
  min-width: 160px;
  padding: var(--sp-2);
  display: grid;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(var(--shadow-rgb), 0.08);
}
.account-menu-panel a, .account-menu-panel button {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-3);
  color: var(--color-ink);
  text-decoration: none;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius);
}
.account-menu-panel a:hover, .account-menu-panel button:hover { background: var(--color-brand-soft); }

/* ---------- 页脚 ---------- */
.site-footer {
  background: var(--color-footer);
  padding: var(--sp-12) 0 var(--sp-6);
  color: var(--color-footer-ink);
  font-size: var(--fs-small);
}
.footer-grid { display: grid; grid-template-columns: minmax(0, 2fr) 1fr 1fr; gap: var(--sp-12); }
.footer-about p { max-width: 32ch; margin-top: var(--sp-4); }
.site-footer .brand-name, .site-footer .brand:hover { color: var(--color-footer-strong); }
.site-footer .brand-mark { background: var(--color-footer-strong); color: var(--color-footer); }
.site-footer nav { display: grid; align-content: start; gap: var(--sp-2); }
.site-footer nav h2 { color: var(--color-footer-strong); font: 650 var(--fs-small)/1.5 var(--font-body); margin: 0 0 var(--sp-2); }
.site-footer nav a { width: fit-content; min-height: 44px; display: inline-flex; align-items: center; }
.site-footer a { color: var(--color-footer-ink); }
.site-footer a:hover { color: var(--color-footer-strong); }
.footer-bottom { display: flex; justify-content: space-between; gap: var(--sp-4); border-top: 1px solid var(--color-footer-line); padding-top: var(--sp-4); margin-top: var(--sp-12); }
.footer-bottom p { margin: 0; }
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
  .footer-about { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; margin-top: var(--sp-8); }
}

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-6);
  border-radius: var(--radius);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--color-brand); color: var(--color-on-brand); }
.btn-primary:hover:not([disabled]) { background: var(--color-brand-hover); color: var(--color-on-brand); }

.btn-secondary { background: transparent; color: var(--color-brand); border-color: var(--color-brand); }
.btn-secondary:hover:not([disabled]) { background: var(--color-brand-soft); }

.btn-ghost { background: transparent; color: var(--color-ink-2); border-color: var(--color-line); }
.btn-ghost:hover:not([disabled]) { color: var(--color-ink); border-color: var(--color-ink-2); }

.btn-danger { background: transparent; color: var(--color-danger); border-color: var(--color-danger); }
.btn-danger:hover:not([disabled]) { background: var(--color-danger-bg); }

.btn-sm { min-height: 44px; padding: 0 var(--sp-4); font-size: var(--fs-small); }
.btn-block { width: 100%; }

/* 按钮加载态（提交中） */
.btn.is-loading { position: relative; color: transparent !important; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--color-on-brand);
  animation: btn-spin 0.8s linear infinite;
}
.btn-secondary.is-loading::after, .btn-ghost.is-loading::after, .btn-danger.is-loading::after {
  color: var(--color-brand);
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------- 表单 ---------- */
.form { display: grid; gap: var(--sp-4); }
.field { display: grid; gap: var(--sp-1); }
.field label { font-weight: 500; }
.field .hint { font-size: var(--fs-small); color: var(--color-ink-2); }
.req { color: var(--color-accent); }

.input, .textarea, .select {
  width: 100%;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-3);
  font: inherit;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  transition: border-color var(--transition);
}
.textarea { min-height: 96px; resize: vertical; line-height: var(--lh-body); }
.input:focus, .textarea:focus, .select:focus { border-color: var(--color-brand); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: 3px solid var(--color-brand-soft); outline-offset: 0; }
/* 深色下 brand-soft 与表面几乎同色，焦点描边改用品牌色保证可见 */
html[data-theme="dark"] .input:focus-visible,
html[data-theme="dark"] .textarea:focus-visible,
html[data-theme="dark"] .select:focus-visible { outline-color: var(--color-brand); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-danger); }

.field-error {
  font-size: var(--fs-small);
  color: var(--color-danger);
  display: none;
}
.field.has-error .field-error { display: block; }
.field.has-error .input, .field.has-error .textarea { border-color: var(--color-danger); }

/* 错误汇总：表单顶部，可跳转 */
.error-summary {
  border: 1px solid var(--color-danger);
  background: var(--color-danger-bg);
  border-radius: var(--radius);
  padding: var(--sp-4);
  display: none;
}
.error-summary.show { display: block; }
.error-summary h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-body); }
.error-summary ul { margin: 0; padding-left: var(--sp-6); }
.error-summary a { color: var(--color-danger); }

.form-status { font-size: var(--fs-small); min-height: 1.5em; }
.form-status.ok { color: var(--color-brand); font-weight: 500; }
.form-status.err { color: var(--color-danger); }

/* 表单里的行内操作区 */
.form-row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }

/* ---------- 验证码 ---------- */
.captcha-box {
  display: flex;
  gap: var(--sp-3);
  align-items: stretch;
  flex-wrap: wrap;
}
.captcha-box img {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--color-surface);
  width: 168px;
  height: 48px;
}
.captcha-tools { display: grid; gap: var(--sp-2); }
.captcha-tools .btn { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-small); }

/* ---------- 卡片 ---------- */
.card {
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius-card);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  box-shadow: 0 5px 20px rgba(var(--shadow-rgb), .035);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
a.card { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--color-card-hover-line); box-shadow: 0 10px 25px rgba(var(--shadow-rgb), .09); transform: translateY(-2px); }
.card-title {
  font-family: var(--font-body);
  font-size: var(--fs-card-title);
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}
.card .summary {
  color: var(--color-ink-2);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card .meta { margin-top: auto; }
.card-link { text-decoration: none; font-weight: 500; }
/* 整卡可点击时保持链接语义与键盘焦点 */
a.card:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

/* 精选区 */
.feature {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-top: 4px solid var(--color-brand);
  border-radius: var(--radius-card);
  padding: var(--sp-12);
  display: grid;
  gap: var(--sp-4);
  box-shadow: 0 12px 36px rgba(var(--shadow-rgb), .045);
}
.feature .card-title { font-family: var(--font-display); font-size: var(--fs-hero); line-height: 1.2; max-width: 22ch; }
.feature .card-title a { color: var(--color-ink); text-decoration: none; }
.feature .card-title a:hover { color: var(--color-brand); text-decoration: underline; }
.feature .summary { max-width: 60ch; font-size: 18px; }
@media (max-width: 767px) { .feature { padding: var(--sp-6); } }

/* ---------- 通知 ---------- */
.notice {
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--color-surface);
}
.notice h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-body); font-family: var(--font-body); font-weight: 600; }
.notice p { margin: 0; font-size: var(--fs-small); color: var(--color-ink-2); }
.notice-ok { border-color: var(--color-brand); background: var(--color-ok-bg); }
.notice-err { border-color: var(--color-danger); background: var(--color-danger-bg); }
.notice-warn { border-color: var(--color-accent); }

/* 可撤销反馈条 */
.undo-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  border: 1px solid var(--color-brand);
  background: var(--color-ok-bg);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.undo-bar .btn { min-height: 44px; }

/* 对话框 */
dialog {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-ink);
  padding: var(--sp-6);
  max-width: 440px;
  width: calc(100vw - 32px);
}
dialog::backdrop { background: rgba(var(--shadow-rgb), 0.4); }
dialog h3 { margin-top: 0; }
dialog .form-row { justify-content: flex-end; margin-top: var(--sp-4); }

/* ---------- 分页 ---------- */
.pagination {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  justify-content: center;
  margin-top: var(--sp-8);
  flex-wrap: wrap;
}
.pagination .btn { min-width: 44px; }
.pagination [aria-current="page"] {
  background: var(--color-brand);
  color: var(--color-on-brand);
  border-color: var(--color-brand);
}
.pagination .page-info { font-size: var(--fs-small); color: var(--color-ink-2); padding: 0 var(--sp-2); }

/* ---------- 筛选与搜索 ---------- */
/* 发现页单框搜索 */
.discover-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-3);
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-6);
}
@media (max-width: 639px) {
  .discover-search { grid-template-columns: 1fr; }
  .discover-search .btn { width: 100%; }
}

/* 书架筛选（个人中心）保留多列布局 */
.filter-bar {
  display: grid;
  gap: var(--sp-3);
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.filter-bar .field { gap: var(--sp-1); }
.filter-bar label { font-size: var(--fs-small); font-weight: 500; }
@media (min-width: 768px) and (max-width: 1099px) {
  [data-saved-form] { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
}
@media (min-width: 1100px) {
  [data-saved-form] { grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(100px, 1fr)) auto; align-items: end; }
}
.filter-state { font-size: var(--fs-small); color: var(--color-ink-2); margin-bottom: var(--sp-3); }

/* ---------- 收藏/关注按钮 ---------- */
.fav-btn { white-space: nowrap; }
.fav-btn[aria-pressed="true"] { background: var(--color-brand); color: var(--color-on-brand); border-color: var(--color-brand); }
.fav-btn[aria-pressed="true"]:hover { background: var(--color-brand-hover); }

/* ---------- 文章页 ---------- */
/* 单一阅读栏：页首、正文、附注共享 720px 左边线，目录在右侧留白区 sticky。 */
.article-layout { display: grid; gap: var(--sp-8); }
.article-head { padding-bottom: var(--sp-6); border-bottom: var(--border); }
.article-header .tag-list { margin-bottom: var(--sp-4); }
.article-header .card-title {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.article-header .summary {
  font-size: calc(var(--fs-body) + 2px);
  color: var(--color-ink-2);
  line-height: var(--lh-body);
  max-width: 62ch;
}
.article-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}

@media (min-width: 1024px) {
  .article-layout {
    grid-template-columns: minmax(0, var(--w-article)) 240px;
    grid-template-areas: "head side" "main side";
    grid-template-rows: auto 1fr;
    column-gap: var(--sp-8);
    justify-content: center;
  }
  .article-head { grid-area: head; }
  .article-main { grid-area: main; }
  /* sticky 顶端避开 72px 吸顶页眉 */
  .toc { grid-area: side; position: sticky; top: 96px; align-self: start; }
}
/* 目录侧栏仅在桌面阅读布局出现；窄屏用可折叠的 toc-inline */
@media (max-width: 1023px) {
  .toc { display: none; }
}
.toc {
  background: var(--color-surface);
  border: var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  font-size: var(--fs-small);
}
.toc h3 {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--color-ink-2);
  letter-spacing: 0.05em;
  margin: 0 0 var(--sp-2);
}
.toc ol { margin: 0; padding-left: var(--sp-6); }
.toc li { margin-bottom: var(--sp-1); }
.toc li::marker { color: var(--color-ink-2); }
.toc a { text-decoration: none; color: var(--color-ink); text-wrap: balance; }
.toc a:hover { color: var(--color-brand); text-decoration: underline; }

.article-body {
  font-size: var(--fs-article);
  line-height: var(--lh-article);
  max-width: var(--w-article);
}
.article-body h3 {
  font-size: var(--fs-section);
  margin: var(--sp-8) 0 var(--sp-4);
  scroll-margin-top: 88px;
  text-wrap: balance;
}
.toc-inline { display: none; margin-bottom: var(--sp-6); }
@media (max-width: 1023px) { .toc-inline { display: block; } }
.toc-inline details { background: var(--color-surface); border: var(--border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.toc-inline summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 500; }

.article-section-ref, .corrections, .related {
  margin-top: var(--sp-8);
}
.article-section-ref h3, .corrections h3, .related h3 {
  border-bottom: var(--border);
  padding-bottom: var(--sp-2);
}
/* 相关阅读在阅读栏内两列排布，避免卡片被挤成窄条 */
.related .card-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.source-list { margin: 0; padding-left: var(--sp-6); }
.source-list li { margin-bottom: var(--sp-2); overflow-wrap: anywhere; }
.correction-item { border-left: 3px solid var(--color-line); padding-left: var(--sp-4); margin-bottom: var(--sp-4); }
.correction-item .meta { margin: 0 0 var(--sp-1); }

/* 个人中心侧栏布局 */
.me-layout { display: grid; gap: var(--sp-8); }
@media (min-width: 768px) {
  .me-layout { grid-template-columns: var(--w-me-side) minmax(0, var(--w-me-content)); justify-content: start; }
  .me-nav { position: sticky; top: var(--sp-6); align-self: start; }
}
.me-nav {
  border: var(--border);
  border-radius: var(--radius);
  background: var(--color-surface);
  padding: var(--sp-2);
}
.me-nav ul { list-style: none; margin: 0; padding: 0; }
.me-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--sp-4);
  text-decoration: none;
  color: var(--color-ink);
  border-radius: var(--radius);
}
.me-nav a:hover { background: var(--color-brand-soft); }
.me-nav a[aria-current="page"] { background: var(--color-brand); color: #fff; font-weight: 500; }
@media (max-width: 767px) {
  .me-nav ul { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
  .me-nav a { padding: 0 var(--sp-3); }
}

/* 列表行（书架/关注/会话） */
.list-row {
  display: flex;
  gap: var(--sp-4);
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--sp-4) 0;
  border-bottom: var(--border);
}
.list-row:last-child { border-bottom: 0; }
.list-row-main { flex: 1; min-width: 0; }
.list-row-actions { display: grid; gap: var(--sp-2); justify-items: end; }
.list-row h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-card-title); }
.list-row .summary { color: var(--color-ink-2); margin: 0 0 var(--sp-2); }

/* 占位（下线文章） */
.placeholder-row {
  padding: var(--sp-4) 0;
  border-bottom: var(--border);
  color: var(--color-ink-2);
}

/* 空状态 */
.empty-state {
  border: 1px dashed var(--color-line);
  border-radius: var(--radius);
  padding: var(--sp-8);
  text-align: center;
  color: var(--color-ink-2);
  background: var(--color-surface);
}
.empty-state p { margin-bottom: var(--sp-4); }

/* 骨架/加载占位（避免明显跳动） */
.loading-block { padding: var(--sp-8); text-align: center; color: var(--color-ink-2); }

/* 状态徽标 */
.badge {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 500;
  border-radius: var(--radius);
  padding: 2px 10px;
  border: var(--border);
  background: var(--color-surface);
  color: var(--color-ink-2);
}
.badge-ok { color: var(--color-brand); border-color: var(--color-brand); background: var(--color-ok-bg); }
.badge-warn { color: var(--color-accent); border-color: var(--color-accent); }
.badge-mute { color: var(--color-ink-2); }