/**
 * BastionLog app-shell — 平台外壳组件层(消费 tokens.css 的 var(--bv-*))。
 * Slice 0:外壳(header/nav/footer/disclaimer/body)+ 通用组件(btn/card/field/badge/notice)。
 * 色彩法则(ADR-025):常态中性灰;注意类 amber/red 限有源;绿禁;action(#3568FF)唯一交互色。
 * TASK-173 U1:浅色单一(明暗/模板切换已删);60-30-10 令牌 + 石墨蓝免责横栏。
 */

/* ---- base ---- */
body.app-body {
  margin: 0;
  min-height: 100vh;
  background: var(--bv-color-canvas);
  color: var(--bv-color-ink-2);
  font-family: var(--bv-font-sans);
  font-size: var(--bv-text-base);
  line-height: var(--bv-leading-normal);
  -webkit-font-smoothing: antialiased;
}

.app-container {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 var(--bv-space-5);
  box-sizing: border-box;
}

a {
  color: var(--bv-color-action);
}

/* ---- header / nav ---- */
.app-header {
  background: var(--bv-color-surface);
  border-bottom: 1px solid var(--bv-color-border);
}
.app-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bv-space-4);
  padding: var(--bv-space-4) 0;
  flex-wrap: wrap;
}
.app-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--bv-space-2);
  font-size: var(--bv-text-lg);
  font-weight: var(--bv-weight-bold);
  color: var(--bv-color-title);
  text-decoration: none;
  letter-spacing: -0.01em;
}
/* TASK-266:BastionLog 盾徽(缩放优化 66×80 → 显示 ~40px 高;金属灰品牌件,非状态色)*/
.app-brand__logo {
  height: 2.5rem;
  width: auto;
  display: block;
  flex: none;
}
.app-brand__word {
  line-height: 1;
}
.app-nav {
  display: flex;
  align-items: center;
  gap: var(--bv-space-3); /* U4-⑮ space-x-8 级换算(链接含 padding,视觉间距 ≈2rem)*/
  flex-wrap: wrap;
}
.app-nav__link {
  padding: var(--bv-space-2) var(--bv-space-3);
  font-size: var(--bv-text-sm);
  font-weight: var(--bv-weight-medium);
  color: var(--bv-color-ink-3);
  text-decoration: none;
  border-radius: var(--bv-radius-sm);
}
.app-nav__link:hover {
  color: var(--bv-color-ink);
  background: var(--bv-color-surface-sunken);
}
.app-nav__link--cta {
  color: #fff;
  background: var(--bv-color-action);
}
.app-nav__link--cta:hover {
  /* 必须显式压住 .app-nav__link:hover 的浅底,否则白字落到浅底 → 消失 */
  color: #fff;
  background: var(--bv-color-action);
  filter: brightness(1.1);
}
/* 当前页高亮(非 CTA 链接):品牌色文字 + 轻底,让用户知道身处何处 */
.app-nav__link--active {
  color: var(--bv-color-action);
  background: var(--bv-color-info-soft);
  font-weight: var(--bv-weight-semibold);
}
.app-nav__link--active:hover {
  color: var(--bv-color-action);
  background: var(--bv-color-info-soft);
}

/* ---- 导航分组(公开 | 受保护工作区 | 语言边缘)---- */
.app-nav__divider {
  width: 1px;
  height: 1.1em;
  background: var(--bv-color-border-strong);
  margin: 0 var(--bv-space-2);
  flex: none;
}
/* TASK-266:语言切换推到最右边缘(独立位,离开主菜单序列)*/
.app-nav__divider--edge {
  margin-left: auto;
}
/* 次级账户入口(注册):轻描边,不与主 CTA 争视觉重量 */
.app-nav__link--ghost {
  border: 1px solid var(--bv-color-border-strong);
}
.app-nav__link--ghost:hover {
  border-color: var(--bv-color-action);
  color: var(--bv-color-action);
  background: var(--bv-color-info-soft);
}
.app-lang--edge {
  flex: none;
}
/* 窄屏 nav 换行时 margin-left:auto 失效——保持语言在末尾即可,无需额外处理 */
@media (max-width: 720px) {
  .app-nav__divider--edge {
    margin-left: 0;
  }
}

/* ---- disclaimer bar — 石墨蓝全宽横栏(spec §6;压导航下;非警示色而是 30% 压阵)---- */
.app-disclaimer {
  background: var(--bv-color-masthead-bg);
  color: #cbd5e1;
  font-size: var(--bv-text-base); /* U4-⑭ 合规文案 +2px,红线更清晰 */
}
.app-disclaimer strong {
  color: #ffffff;
  font-weight: var(--bv-weight-semibold);
}
.app-disclaimer a {
  color: #b9ccff;
}

/* ---- footer ---- */
.app-footer {
  border-top: 1px solid var(--bv-color-border);
  background: var(--bv-color-surface);
  color: var(--bv-color-ink-3);
  font-size: var(--bv-text-sm);
  margin-top: var(--bv-space-12);
}
.app-footer__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bv-space-3) var(--bv-space-5);
  align-items: center;
  justify-content: space-between;
  padding: var(--bv-space-5) 0;
}
.app-footer a {
  color: var(--bv-color-ink-3);
  text-decoration: none;
}
.app-footer a:hover {
  color: var(--bv-color-ink);
}

/* ---- buttons ---- */
.app-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--bv-space-2);
  padding: var(--bv-space-2) var(--bv-space-4);
  font-size: var(--bv-text-sm);
  font-weight: var(--bv-weight-semibold);
  font-family: inherit;
  border: 1px solid var(--bv-color-border-strong);
  border-radius: var(--bv-radius-sm);
  background: var(--bv-color-surface);
  color: var(--bv-color-ink);
  cursor: pointer;
  text-decoration: none;
}
.app-btn:hover {
  background: var(--bv-color-surface-sunken);
}
.app-btn--action {
  background: var(--bv-color-action);
  border-color: var(--bv-color-action);
  color: #fff;
}
.app-btn--action:hover {
  filter: brightness(1.06);
  background: var(--bv-color-action);
}

/* ---- cards ---- */
.app-card {
  background: var(--bv-color-surface);
  border: 1px solid var(--bv-color-border);
  border-radius: var(--bv-radius-md);
  box-shadow: var(--bv-shadow-card);
  padding: var(--bv-space-5);
}
.app-card__title {
  margin: 0 0 var(--bv-space-3);
  font-size: var(--bv-text-lg);
  font-weight: var(--bv-weight-semibold);
  color: var(--bv-color-title);
}

/* ---- fields ---- */
.app-field {
  display: block;
  width: 100%;
  padding: var(--bv-space-2) var(--bv-space-3);
  font-size: var(--bv-text-base);
  font-family: inherit;
  color: var(--bv-color-ink);
  background: var(--bv-color-canvas);
  border: 1px solid var(--bv-color-border-strong);
  border-radius: var(--bv-radius-sm);
  box-sizing: border-box;
}
.app-field:focus {
  outline: 2px solid var(--bv-color-action);
  outline-offset: 1px;
}
.app-label {
  display: block;
  margin-bottom: var(--bv-space-1);
  font-size: var(--bv-text-sm);
  font-weight: var(--bv-weight-semibold); /* U4-⑨ */
  color: var(--bv-color-ink-2);
}

/* ---- badges(三态/工作流状态;绿禁) ---- */
.app-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--bv-space-2);
  font-size: var(--bv-text-xs);
  font-weight: var(--bv-weight-medium);
  border-radius: var(--bv-radius-sm);
  background: var(--bv-color-neutral-soft);
  color: var(--bv-color-neutral-ink);
}
.app-badge--logged {
  background: var(--bv-color-info-soft);
  color: var(--bv-color-info);
}
.app-badge--ok {
  background: var(--bv-color-info-soft);
  color: var(--bv-color-info);
}
.app-badge--attn {
  background: var(--bv-color-attn-soft);
  color: var(--bv-color-attn-ink);
}
.app-badge--mono {
  font-family: var(--bv-font-mono);
  letter-spacing: 0;
  white-space: nowrap;
}
.app-badge--alert {
  background: var(--bv-color-alert-soft);
  color: var(--bv-color-alert-ink);
}

/* ---- notice(中性信息条) ---- */
.app-notice {
  padding: var(--bv-space-3) var(--bv-space-4);
  border: 1px solid var(--bv-color-border);
  border-left: var(--bv-anchor-width) solid var(--bv-color-brand);
  border-radius: var(--bv-radius-sm);
  background: var(--bv-color-surface);
  color: var(--bv-color-ink-2);
  font-size: var(--bv-text-sm);
}

/* ---- page scaffold(U1:大呼吸留白 + 粗大标题对比)---- */
.app-main {
  padding: var(--bv-space-10) 0 var(--bv-space-12);
}
.app-page-title {
  font-size: var(--bv-text-2xl);
  font-weight: var(--bv-weight-extrabold);
  letter-spacing: var(--bv-tracking-tight);
  color: var(--bv-color-title);
  margin: 0 0 var(--bv-space-2);
}

/* ---- layout helpers(令牌化;替代页面正文里的 Tailwind 工具类)---- */
.app-stack {
  display: flex;
  flex-direction: column;
  gap: var(--bv-space-4);
}
.app-row {
  display: flex;
  gap: var(--bv-space-4);
  flex-wrap: wrap;
  align-items: center;
}
.app-row--between {
  justify-content: space-between;
}
.app-row--end {
  justify-content: flex-end;
}
.app-grid-2,
.app-grid-3 {
  display: grid;
  gap: var(--bv-space-4);
}
@media (min-width: 760px) {
  .app-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
  .app-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}
.app-section-title {
  font-size: var(--bv-text-lg);
  font-weight: var(--bv-weight-extrabold); /* U5-③ 一粗 */
  letter-spacing: var(--bv-tracking-tight);
  color: var(--bv-color-title);
  margin: 0 0 var(--bv-space-3);
}
.app-lead {
  font-size: var(--bv-text-lg);
  color: var(--bv-color-ink-2);
  line-height: var(--bv-leading-normal);
}
.app-muted {
  color: var(--bv-color-ink-3); /* U5-③ 一浅(#475569,U1 已定) */
  font-size: var(--bv-text-base); /* U5-③ 辅助/说明文字 +2px(密集处仍由就地 inline 覆盖) */
}
.app-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bv-text-sm);
}
.app-table th,
.app-table td {
  text-align: left;
  padding: var(--bv-space-2) var(--bv-space-3);
  border-bottom: 1px solid var(--bv-color-border);
}
.app-table th {
  color: var(--bv-color-ink-3);
  font-weight: var(--bv-weight-semibold);
  font-size: var(--bv-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* =====================================================================
 * TASK-147 UI P3 — 纸感司法审计层(P2 §1 排版规则 + §2 App Shell)
 * 衬线仅标题;等宽用于注册号/时间戳/哈希/点数;色彩仍全走 tokens(绿禁)。
 * ===================================================================== */
/* (U1:--bv-font-serif 已收口进 tokens.css,两仓一套值;此处不再重复定义) */
:root {
  /* U5-②:羽化阴影(外壳层令牌;极细腻克制,应用于核心功能块) */
  --app-shadow-feather: 0 4px 12px 0 rgba(15, 23, 42, 0.03);
}

/* ---- forensic typography ---- */
.app-page-title,
.app-section-title {
  font-family: var(--bv-font-serif);
  letter-spacing: 0.005em;
}
.app-mono {
  font-family: var(--bv-font-mono);
  font-size: var(--bv-text-xs);
  color: var(--bv-color-ink-2);
  background: var(--bv-color-surface-sunken);
  border: 1px solid var(--bv-color-border);
  border-radius: 3px;
  padding: 0 var(--bv-space-1);
  white-space: nowrap;
}
.app-mono--bare {
  background: none;
  border: 0;
  padding: 0;
}
.app-kicker {
  font-size: var(--bv-text-xs);
  font-weight: var(--bv-weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bv-color-ink-3);
  margin: 0;
}
.app-table td {
  font-variant-numeric: tabular-nums;
}
.app-table tbody tr:hover td {
  background: var(--bv-color-surface-sunken);
}

/* ---- header: 强制副标 + Credits 组件 + 语言下拉 ---- */
.app-brand__sub {
  font-family: var(--bv-font-serif);
  font-size: var(--bv-text-sm);
  font-weight: var(--bv-weight-regular);
  color: var(--bv-color-ink-3);
  border-left: 1px solid var(--bv-color-border-strong);
  padding-left: var(--bv-space-3);
  margin-left: var(--bv-space-1);
  white-space: nowrap;
}
@media (max-width: 960px) {
  .app-brand__sub {
    display: none;
  }
}
.app-credits {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font-family: var(--bv-font-mono);
  font-size: var(--bv-text-xs);
  color: var(--bv-color-ink-2);
  text-decoration: none;
  border: 1px solid var(--bv-color-border-strong);
  border-radius: var(--bv-radius-sm);
  background: var(--bv-color-surface-sunken);
  padding: var(--bv-space-1) var(--bv-space-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.app-credits:hover {
  border-color: var(--bv-color-action);
  color: var(--bv-color-ink);
}
.app-credits__num {
  font-weight: var(--bv-weight-bold);
  color: var(--bv-color-title);
}
.app-lang {
  position: relative;
}
.app-lang > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--bv-space-2) var(--bv-space-3);
  font-size: var(--bv-text-sm);
  font-weight: var(--bv-weight-medium);
  color: var(--bv-color-ink-3);
  border-radius: var(--bv-radius-sm);
  user-select: none;
}
.app-lang > summary::-webkit-details-marker {
  display: none;
}
.app-lang > summary::after {
  content: "▾";
  margin-left: 0.35em;
  font-size: 0.75em;
  color: var(--bv-color-ink-3);
}
.app-lang > summary:hover,
.app-lang[open] > summary {
  background: var(--bv-color-surface-sunken);
  color: var(--bv-color-ink);
}
.app-lang__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 30;
  min-width: 8.5rem;
  display: flex;
  flex-direction: column;
  background: var(--bv-color-surface);
  border: 1px solid var(--bv-color-border);
  border-radius: var(--bv-radius-md);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  padding: var(--bv-space-1);
}
.app-lang__opt {
  padding: var(--bv-space-2) var(--bv-space-3);
  font-size: var(--bv-text-sm);
  color: var(--bv-color-ink-2);
  text-decoration: none;
  border-radius: var(--bv-radius-sm);
}
.app-lang__opt:hover {
  background: var(--bv-color-surface-sunken);
  color: var(--bv-color-ink);
}
.app-lang__opt--on {
  color: var(--bv-color-action);
  font-weight: var(--bv-weight-semibold);
}

/* ---- disclaimer: 顶部可收折 forensic 横幅(P1 §8 全文;常态中性) ---- */
details.app-disclaimer > .app-disclaimer__summary {
  list-style: none;
  cursor: pointer;
}
details.app-disclaimer > .app-disclaimer__summary::-webkit-details-marker {
  display: none;
}
.app-disclaimer__row {
  display: flex;
  align-items: baseline;
  gap: var(--bv-space-2);
  padding: var(--bv-space-2) 0;
  min-width: 0;
}
.app-disclaimer__tag {
  font-family: var(--bv-font-mono);
  font-size: var(--bv-text-xs);
  color: #cbd5e1;
  border: 1px solid rgba(203, 213, 225, 0.45);
  border-radius: 3px;
  padding: 0 var(--bv-space-1);
  flex: none;
}
.app-disclaimer__short {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.app-disclaimer[open] .app-disclaimer__short {
  display: none;
}
.app-disclaimer__hint {
  margin-left: auto;
  flex: none;
  font-size: var(--bv-text-xs);
  color: #94a3b8;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.app-disclaimer__full {
  padding: 0 0 var(--bv-space-3);
  max-width: 64rem;
  font-size: var(--bv-text-sm);
  line-height: var(--bv-leading-normal);
}
.app-disclaimer__full p {
  margin: 0 0 var(--bv-space-2);
}

/* ---- U3(TASK-177):auth 拦截 Modal(居中轻量;保上下文不整页跳转)---- */
.auth-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bv-space-5);
}
.auth-modal[hidden] {
  display: none;
}
.auth-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45); /* 石墨蓝半透遮罩 */
}
.auth-modal__card {
  position: relative;
  width: 100%;
  max-width: 24rem;
  padding: var(--bv-space-6);
  background: var(--bv-color-canvas);
  border: 1px solid var(--bv-color-border);
  border-radius: var(--bv-radius-lg);
  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
  animation: auth-modal-in 0.16s ease;
}
@keyframes auth-modal-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.auth-modal__x {
  position: absolute;
  top: var(--bv-space-3);
  right: var(--bv-space-3);
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--bv-radius-sm);
  background: transparent;
  color: var(--bv-color-ink-3);
  font-size: var(--bv-text-lg);
  line-height: 1;
  cursor: pointer;
}
.auth-modal__x:hover {
  background: var(--bv-color-surface-sunken);
  color: var(--bv-color-ink);
}
.auth-modal__title {
  margin: var(--bv-space-2) 0 0;
  font-family: var(--bv-font-serif);
  font-size: var(--bv-text-xl);
  font-weight: var(--bv-weight-extrabold);
  letter-spacing: var(--bv-tracking-tight);
  color: var(--bv-color-title);
}
.auth-modal__body {
  margin: var(--bv-space-3) 0 0;
  color: var(--bv-color-ink-2);
  font-size: var(--bv-text-sm);
}
.auth-modal__actions {
  margin-top: var(--bv-space-5);
}
.auth-modal__note {
  margin: var(--bv-space-3) 0 0;
  font-size: var(--bv-text-xs);
}

/* ---- accessibility floor ---- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--bv-color-action);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}