/**
 * 全站共享设计 token（隐患快拍）
 * 同源蓝系小幅进化：统一色板 / 字号 / 间距；禁止 @import 外网字体。
 *
 * 用法：各端 <link href="/shared-tokens.css">；端内仅覆盖角色气质变量。
 */
:root {
  /* —— Brand / Navy 系 —— */
  --navy: #163a5f;
  --navy-deep: #0f2740;
  --navy-soft: #e8eef5;
  --navy-hover: #1a456e;
  --navy-pressed: #0c1f33;
  --brand: var(--navy);
  --brand-2: #1f4e79;
  --on-navy: #ffffff;

  /* —— Accent —— */
  --amber: #e8a317;
  --amber-soft: #f5e6c0;
  --amber-ink: #8a6100;
  --amber-on-dark: #f3b843;
  --safety: #ea580c;

  /* —— Surfaces —— */
  --paper: #f3f5f8;
  --bg: var(--paper);
  --panel: #ffffff;
  --card: #ffffff;
  --shell-bg: #0b1522;

  /* —— Text —— */
  --ink: #1c2430;
  --text: var(--ink);
  --foreground: #334155;
  --muted: #5b6573;
  --muted-fg: #475569;
  --on-muted: #ffffff;

  /* —— Lines —— */
  --line: #e2e8f0;
  --border: var(--line);
  --line-strong: #c5d0dc;

  /* —— Semantic —— */
  --danger: #dc2626;
  --danger-ink: #b91c1c;
  --danger-soft: #fde8e6;
  --ok: #1b7a4e;
  --ok-soft: #e6f6ed;
  --warn: #c47a0a;
  --warn-ink: #8a5a00;
  --warn-soft: #fff3d6;
  --level-major: #dc2626;
  --level-larger: #c47a0a;
  --level-general: #2f6fed;

  /* —— Shape / elevation —— */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --shadow: 0 8px 28px rgba(15, 39, 64, 0.1);
  --shadow-sm: 0 1px 2px rgba(15, 39, 64, 0.06);
  --shadow-lg: 0 16px 40px rgba(15, 39, 64, 0.14);

  /* —— Layout / touch —— */
  --tab-h: 64px;
  --touch-min: 44px;
  --motion: 180ms;
  --ease: ease;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;

  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* —— Type：手机三端共用 —— */
  --font: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "SF Mono", Consolas, monospace;
  --fs-xs: 0.72rem;
  --fs-sm: 0.84rem;
  --fs-md: 0.94rem;
  --fs-lg: 1.1rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --lh-tight: 1.25;
  --lh-body: 1.5;

  /* —— 桌面阅读层级（同源字体，更密） —— */
  --font-desk: var(--font);
  --desk-fs-xs: 0.75rem;
  --desk-fs-sm: 0.8125rem;
  --desk-fs-md: 0.9375rem;
  --desk-fs-lg: 1.125rem;
  --desk-fs-xl: 1.375rem;
  --desk-fs-kpi: clamp(1.35rem, 2.6vh, 2rem);

  /* —— 角色气质默认（端内可再覆盖） —— */
  --role-touch: var(--touch-min);
  --role-card-pad: var(--space-md);
  --role-title-weight: 700;
}

/* 巡查：现场快 */
html[data-role="inspect"] {
  --role-touch: 48px;
  --role-card-pad: 14px;
  --role-title-weight: 780;
  --fs-lg: 1.14rem;
}

/* 整改：整改简 */
html[data-role="fix"] {
  --role-touch: 46px;
  --role-card-pad: 12px;
  --role-title-weight: 720;
}

/* 经理手机：经理稳 */
html[data-role="mgr"] {
  --paper: #eef2f7;
  --role-touch: 44px;
  --role-card-pad: 12px;
  --role-title-weight: 700;
}

/* 经理桌面：桌面密 */
html[data-role="desk"] {
  --font: var(--font-desk);
  --paper: #e8eef5;
  --bg: #e8eef5;
  --fs-xs: var(--desk-fs-xs);
  --fs-sm: var(--desk-fs-sm);
  --fs-md: var(--desk-fs-md);
  --fs-lg: var(--desk-fs-lg);
  --fs-xl: var(--desk-fs-xl);
  --radius: 12px;
  --role-card-pad: 10px;
  --role-title-weight: 750;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion: 0ms;
  }
}

button,
a,
[role="button"],
.tab,
.chip,
.btn,
label.chip,
input[type="checkbox"],
input[type="radio"],
select {
  cursor: pointer;
}

button:focus-visible,
a:focus-visible,
.btn:focus-visible,
.tab:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.ux-empty {
  text-align: center;
  padding: 28px 16px;
  color: var(--muted);
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

.ux-empty p {
  margin: 0 0 12px;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

.ux-empty .btn {
  min-height: var(--touch-min);
}

.ux-skeleton {
  background: linear-gradient(90deg, #e8eef5 25%, #f4f7fb 50%, #e8eef5 75%);
  background-size: 200% 100%;
  animation: ux-skel 1.2s ease-in-out infinite;
  border-radius: 8px;
  min-height: 14px;
}

@keyframes ux-skel {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ux-skeleton {
    animation: none;
    background: #e8eef5;
  }
}

.ux-field-error {
  margin: 4px 0 0;
  font-size: var(--fs-xs);
  color: var(--danger);
  line-height: 1.35;
}

.ux-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.ux-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(22, 58, 95, 0.08);
  color: var(--navy);
  font-size: var(--fs-sm);
  border: 1px solid rgba(22, 58, 95, 0.18);
}

/* 原图预览双指捏合缩放目标 */
.photo-pinch-target {
  transform-origin: center center;
  will-change: transform;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}

/*
 * PDF 页图也挂了 photo-pinch-target；若保持 touch-action:none，
 * 手指在白页上无法把滑动交给外层 .cal-pdf-reader / .pdf-pages，
 * 只有点到灰边才能翻页。未放大时放开纵向滑动；放大后仍锁给 PhotoPinch。
 */
.cal-pdf-page .photo-pinch-target,
.pdf-page .photo-pinch-target,
.home-reply-pdf-page .photo-pinch-target {
  touch-action: pan-y;
}

.cal-pdf-reader.is-zoomed .photo-pinch-target,
.pdf-reader.is-zoomed .photo-pinch-target,
.home-reply-pdf-reader.is-zoomed .photo-pinch-target {
  touch-action: none;
}

/* ═══════════════════════════════════════════════════════════════
 * UI/UX Pro Max 全站增量（2026-10）：在不动登录/底栏结构、不改
 * navy+safety 气质前提下，统一触控、焦点、反馈与减动效。
 * 依据：触控 ≥44、目标间距 ≥8、焦点 2px+offset、>300ms 有反馈、
 * prefers-reduced-motion、空态引导行动。
 * ═══════════════════════════════════════════════════════════════ */

:root {
  --ring: var(--navy);
  --ring-offset: #ffffff;
  --focus-outline: 2px solid var(--amber);
  --focus-offset: 2px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --header-sticky-h: 52px;
}

/* 键盘焦点：2px 周长 + 偏移，满足可见焦点；不用低对比细线 */
button:focus-visible,
a:focus-visible,
.btn:focus-visible,
.tab:focus-visible,
.tabbar .tab:focus-visible,
.nav-item:focus-visible,
.chip:focus-visible,
.linkish:focus-visible,
.kpi:focus-visible,
.quick-card:focus-visible,
.item-card:focus-visible,
.card:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

/* 点击态过渡统一 150–250ms；减动效时归零 */
button,
.btn,
.tab,
.nav-item,
.chip,
.quick-card,
.kpi,
.item-card,
.card[role="button"],
a.card {
  transition:
    color var(--motion) var(--ease-out),
    background-color var(--motion) var(--ease-out),
    border-color var(--motion) var(--ease-out),
    opacity var(--motion) var(--ease-out),
    box-shadow var(--motion) var(--ease-out),
    transform var(--motion) var(--ease-out);
}

button:disabled,
.btn:disabled,
.btn[aria-disabled="true"],
input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* sticky 顶/底栏不遮挡焦点滚动落点 */
html {
  scroll-padding-top: calc(var(--header-sticky-h) + var(--safe-t));
  scroll-padding-bottom: calc(var(--tab-h) + var(--safe-b));
}

/* 列表/台账加载中：别整屏冻死，留一点可读旧内容 */
[aria-busy="true"] {
  cursor: progress;
}

/* 空态：引导行动，而不是一片白 */
.ux-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 120px;
}

.ux-empty .btn.primary {
  margin-top: 4px;
}

/* 骨架：占位高度稳定，减少 Content Jumping */
.ux-skeleton {
  flex-shrink: 0;
}

/* 底栏 Tab：触控间距 ≥8px（gap 已在各端；这里兜底） */
.tabbar {
  gap: max(var(--space-sm), 8px);
}

.tabbar .tab {
  min-width: 0;
  min-height: max(var(--touch-min), var(--role-touch, 44px));
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* 桌面侧栏：触控高度兜底（悬停色由 desk.css 深色侧栏自管，勿在此盖浅色底） */
.nav-item {
  min-height: 40px;
  cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
  .btn.ghost:hover:not(:disabled) {
    background: rgba(22, 58, 95, 0.05);
  }
  .btn.primary:hover:not(:disabled) {
    filter: brightness(1.06);
  }
}

/* 切屏内容轻微入场（仅 no-preference；不改 display 逻辑） */
@media (prefers-reduced-motion: no-preference) {
  .screen.is-active > .scroll,
  .screen.is-active > .body,
  .screen.is-active > .content,
  .panel.is-on > .panel-body,
  .panel.is-on > .scroll {
    animation: ux-panel-in 180ms var(--ease-out);
  }
}

@keyframes ux-panel-in {
  from {
    opacity: 0.88;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  button,
  .btn,
  .tab,
  .nav-item,
  .chip,
  .quick-card,
  .kpi,
  .item-card,
  a.card {
    transition: none !important;
  }

  .screen.is-active > .scroll,
  .screen.is-active > .body,
  .screen.is-active > .content,
  .panel.is-on > .panel-body,
  .panel.is-on > .scroll {
    animation: none !important;
  }
}

/* 选中文字：品牌色，避免系统默认蓝 */
::selection {
  background: rgba(232, 163, 23, 0.35);
  color: var(--ink);
}

/* Toast / 即时反馈叠在底栏之上时仍可读 */
.toast {
  z-index: 80;
}

/* 表单控件最小触控（移动端） */
@media (max-width: 819px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select,
  textarea {
    min-height: var(--touch-min);
    font-size: max(16px, 1em); /* 避免 iOS 聚焦自动放大 */
  }
}