* { box-sizing: border-box; }
/* .bar/.panel 用 display:flex 布局，会盖掉 [hidden] 的 display:none */
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; font-family: "Microsoft YaHei", system-ui, sans-serif; }
#map { position: absolute; inset: 0; }

/* 标注字号由 config.yaml 的 ui.label_size 决定，由 app.js 写进这两个变量 */
:root { --label-size: 22px; --label-size-big: 30px; }

/* 引擎加载失败、浏览器太旧时的兜底提示 */
.fatal {
  position: absolute; z-index: 90; left: 12px; right: 12px; top: 40%;
  padding: 18px; border-radius: 10px; background: #fff5f5; color: #c92a2a;
  border: 2px solid #ffc9c9; font-size: 20px; line-height: 1.6; text-align: center;
}

.bar {
  position: absolute; z-index: 20; left: 12px; top: 12px; display: flex; gap: 6px;
  align-items: center; flex-wrap: wrap; padding: 8px; border-radius: 8px;
  background: rgba(255, 255, 255, .94); box-shadow: 0 2px 10px rgba(0, 0, 0, .18); max-width: calc(100% - 24px);
}
.bar a { color: #1a73e8; text-decoration: none; font-size: 13px; }
.bar .sp { width: 1px; height: 20px; background: #ddd; }

button, input, select, textarea { font: inherit; }
.btn {
  border: 1px solid #c8ccd0; background: #fff; border-radius: 6px; padding: 5px 10px;
  font-size: 13px; cursor: pointer;
}
.btn:hover { background: #f2f4f6; }
.btn.on { background: #1a73e8; border-color: #1a73e8; color: #fff; }
.btn.danger { color: #c92a2a; border-color: #e5b5b5; }
.btn:disabled { opacity: .45; cursor: default; }
/* 选好类别后「画房屋」就是后台的主操作，上色让人一眼看到能点 */
#start:not(:disabled) { background: #1971c2; border-color: #1971c2; color: #fff; font-weight: bold; }

.panel {
  position: absolute; z-index: 20; right: 12px; top: 66px; width: 300px; max-height: calc(100% - 78px);
  overflow: auto; background: rgba(255, 255, 255, .96); border-radius: 8px; padding: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18); font-size: 13px;
}
.panel h3 { margin: 0 0 8px; font-size: 14px; }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li { padding: 5px 6px; border-radius: 5px; cursor: pointer; display: flex; gap: 6px; align-items: baseline; }
.panel li:hover { background: #eef3fb; }
.panel li .k { color: #868e96; font-size: 11px; }

label.f { display: block; margin: 8px 0; font-size: 13px; }
label.f > span { display: block; color: #495057; margin-bottom: 3px; }
label.f input, label.f select, label.f textarea { width: 100%; padding: 5px 6px; border: 1px solid #c8ccd0; border-radius: 5px; }

.iw h4 { margin: 0 0 6px; font-size: 15px; }
.iw table { border-collapse: collapse; width: 100%; font-size: 12px; }
.iw th, .iw td { border-bottom: 1px solid #eee; text-align: left; padding: 3px 4px; }
.iw th { color: #868e96; width: 52px; font-weight: normal; }

#dialog {
  position: absolute; z-index: 40; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 320px; background: #fff; border-radius: 10px; padding: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .3); display: none;
}
#dialog.show { display: block; }
#dialog .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

.tip { position: absolute; z-index: 25; left: 50%; top: 64px; transform: translateX(-50%);
  background: rgba(33, 37, 41, .88); color: #fff; padding: 6px 12px; border-radius: 6px; font-size: 13px; display: none; }
.tip.show { display: block; }
.err { color: #c92a2a; font-size: 12px; min-height: 16px; margin-top: 6px; }
/* 下拉里的错误条空着时不要留一行空白 */
.err:empty { display: none; }

/* ---- 面向村干部的大字版界面 ---- */
/* 目标用户是老年村民：按钮高度不小于 56px，正文不小于 20px，一屏只做一件事。 */
.big {
  min-height: 56px; padding: 8px 18px; font-size: 22px; border-radius: 10px;
  border: 2px solid #adb5bd; background: #fff; color: #212529; cursor: pointer;
}
.big.on { background: #1971c2; border-color: #1971c2; color: #fff; }
.big.go { background: #2f9e44; border-color: #2f9e44; color: #fff; }
.big.danger { color: #c92a2a; border-color: #e0a3a3; }
.big:disabled { opacity: .5; cursor: default; }

/* 顶部提示条：告诉用户此刻该做什么 */
#hint {
  position: absolute; z-index: 30; left: 0; right: 0; top: 56px; display: none;
  align-items: center; justify-content: center; gap: 14px; min-height: 50px;
  padding: 6px 12px; background: #fff3bf; color: #5c4400;
  font-size: 21px; font-weight: bold; box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
#hint.show { display: flex; }
/* 提示条出现时把清单让开，别压在它下面 */
.hinting .panel { top: 116px; }

/* 绘制过程中的操作条 */
#drawbar {
  position: absolute; z-index: 29; left: 0; right: 0; bottom: 0; display: none;
  gap: 8px; padding: 10px; background: rgba(248, 249, 250, .97);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, .18);
}
#drawbar.show { display: flex; }

/* 保存信息用的底部卡片 */
#card {
  position: absolute; z-index: 34; left: 0; right: 0; bottom: 0; display: none;
  flex-direction: column; gap: 6px; padding: 14px 14px 18px; max-height: 82%;
  overflow: auto; background: #fff; border-radius: 16px 16px 0 0;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .28);
}
#card.show { display: flex; }
#card h3 { margin: 0; font-size: 24px; }
#card .g { display: block; font-size: 20px; color: #343a40; }
#card .g > span { display: block; margin-bottom: 4px; font-weight: bold; }
#card input, #card textarea, #card select {
  width: 100%; font-size: 20px; padding: 10px 12px; border: 2px solid #ced4da; border-radius: 10px;
}
#card textarea { min-height: 76px; resize: vertical; }
#card .row { display: flex; gap: 10px; margin-top: 8px; }
#card .row .big { flex: 1; }
#card .err { font-size: 18px; }

.shots { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.shots img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 2px solid #dee2e6; }
.shots .shot { position: relative; }
.shots .shot button {
  position: absolute; right: -6px; top: -6px; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: #c92a2a; color: #fff; font-size: 17px; line-height: 1; cursor: pointer;
}

#confirm {
  position: absolute; z-index: 36; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: none; flex-direction: column; gap: 10px; width: min(420px, calc(100% - 24px));
  background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}
#confirm.show { display: flex; }
#confirm p { margin: 0; font-size: 21px; line-height: 1.5; }
#confirm input { font-size: 20px; padding: 10px 12px; border: 2px solid #ced4da; border-radius: 10px; }
#confirm .row { display: flex; gap: 10px; }
#confirm .row .big { flex: 1; }

/* 扩瓦片对话框：与删除确认卡同族的居中卡片 */
#capdlg {
  position: absolute; z-index: 36; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: none; flex-direction: column; gap: 10px; width: min(440px, calc(100% - 24px));
  background: #fff; border-radius: 14px; padding: 18px; box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}
#capdlg.show { display: flex; }
#capdlg h3 { margin: 0; font-size: 22px; }
#capdlg .capnote { margin: 0; font-size: 15px; line-height: 1.55; color: #495057; }
#capdlg label { display: block; font-size: 16px; color: #343a40; }
#capdlg label span { display: block; margin-bottom: 4px; font-weight: bold; }
#capdlg input {
  width: 100%; box-sizing: border-box; font-size: 18px; padding: 9px 12px;
  border: 2px solid #ced4da; border-radius: 10px;
}
#capdlg .row { display: flex; gap: 10px; margin-top: 4px; }
#capdlg .row .big { flex: 1; }
.capbar { height: 14px; border-radius: 7px; background: #e9ecef; overflow: hidden; }
#capFill { height: 100%; width: 0; background: #2f9e44; border-radius: 7px; transition: width .4s; }
#capMsg { margin: 8px 0 0; font-size: 14px; color: #343a40; }

/* ---- 标注清单：下拉式 ---- */
/* 核心在地图上，清单只是"挑一条看位置"，所以字号比正文小、默认收起，
   展开时也只占约四成屏高并在内部滚动。点标题栏开合。 */
.panel.drawer { padding: 0; overflow: hidden; }
.panel.drawer h3 {
  display: flex; align-items: center; gap: 6px; margin: 0; padding: 8px 10px;
  font-size: 14px; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.panel.drawer h3::after { content: '▼'; margin-left: auto; font-size: 10px; color: #868e96; }
.panel.drawer.open h3 { border-bottom: 1px solid #eee; }
.panel.drawer.open h3::after { content: '▲'; }
.panel.drawer .body { display: none; max-height: 40vh; overflow: auto; padding: 0 8px 8px; }
.panel.drawer.open .body { display: block; }
#panel li { padding: 7px 8px; font-size: 15px; border-bottom: 1px solid #eee; }
#panel li .k { font-size: 12px; }

/* ---- 地图上直接写出的标注名称 ---- */
/* 底图上的村名路名是矢量瓦片由引擎按固定像素绘的，缩放不会让字变大；
   能控制的只有我们自己的 .BMapLabel。引擎会给它写内联样式（font-size:12px、
   红色边框），内联只能被 !important 压住，所以下面几项都得带。 */
.BMapLabel {
  font-size: var(--label-size) !important;
  line-height: 1.25 !important;
  font-weight: 600 !important;
  color: #212529 !important;
  padding: 2px 7px !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22) !important;
}
/* 「大字」模式：名称再上一号，信息窗文字同步放大 */
body.big-text .BMapLabel { font-size: var(--label-size-big) !important; }
body.big-text .iw h4 { font-size: 24px; }
body.big-text .iw table { font-size: 19px; }
body.big-text .iw-note { font-size: 22px; }
body.big-text .iw-owner { font-size: 20px; }
body.big-text .iw .iw-actions .big { font-size: 21px; }

.iw .iw-actions { display: flex; gap: 6px; margin: 10px 0 0; }
.iw .iw-actions .big { min-height: 46px; font-size: 18px; padding: 6px 10px; }
.iw h4 { font-size: 20px; }
.iw table { font-size: 16px; }
.iw-owner { font-size: 17px; margin: 8px 0 0; }
.iw-note { font-size: 19px; margin: 6px 0 0; line-height: 1.5; }
.iw-hint { font-size: 14px; color: #868e96; margin: 4px 0 0; }
.iw-photos { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; }
.iw-photo { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; cursor: zoom-in; }

#photo {
  position: fixed; z-index: 60; inset: 0; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; background: rgba(0, 0, 0, .88); cursor: zoom-out;
}
#photo.show { display: flex; }
#photo img { max-width: 94%; max-height: 84%; object-fit: contain; }
#photo p { margin: 0; color: #dee2e6; font-size: 18px; }

/* 类别筛选：色块 + 大字，一眼对上地图上的颜色 */.chipbar {
  position: absolute; z-index: 26; left: 0; right: 0; top: 58px; display: flex; gap: 8px;
  flex-wrap: nowrap; overflow-x: auto; padding: 6px 12px; background: rgba(248, 249, 250, .92);
}
/* 前台的清单要让开顶栏和类别条 */
.pg-view .panel { top: 116px; }
.chip {
  display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 4px 14px;
  flex: 0 0 auto; white-space: nowrap;
  border: 2px solid var(--c, #868e96); border-radius: 24px; background: #fff;
  font-size: 19px; cursor: pointer;
}
.chip i { width: 16px; height: 16px; border-radius: 4px; background: var(--c, #868e96); }
.chip.off { opacity: .4; }

/* 登录框也要能看清 */
#login .big, #login input { font-size: 22px; }
#login input { width: 100%; padding: 10px 12px; border: 2px solid #ced4da; border-radius: 10px; }

/* ---- 手机端 / 触摸屏 ---- */
/* 村干部大多用手机：顶栏改横向滚动，清单和保存卡片各自换位置，
   底部操作条避开 iPhone 的下横条区域。 */
html, body { overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
#map { touch-action: none; }
button, a, input, label, img { -webkit-tap-highlight-color: transparent; }

/* 大号加减号只在手机上出现，桌面继续用引擎自带的缩放控件 */
.only-phone { display: none !important; }

@media (max-width: 760px), (pointer: coarse) {
  .only-phone { display: inline-flex !important; }
  .hide-phone { display: none !important; }

  .bar {
    left: 8px; right: 8px; top: 8px; max-width: none; gap: 6px; padding: 6px 8px;
    flex-wrap: nowrap; overflow-x: auto;
  }
  .bar .sp { display: none; }
  .bar > * { flex: 0 0 auto; }
  .btn { min-height: 44px; padding: 8px 12px; font-size: 16px; }

  #hint { top: 84px; min-height: 44px; font-size: 19px; }
  .chipbar { top: 84px; }

  /* 后台底部要留给类别盘和绘制条，清单从上面下拉 */
  .pg-admin .panel.drawer { left: 8px; right: 8px; top: 84px; bottom: auto; width: auto; max-height: none; }
  .pg-admin.hinting .panel.drawer { top: 136px; }
  .pg-admin .panel.drawer .body { max-height: 38vh; }

  /* 前台清单贴在屏幕下边，拇指够得着，展开时向上长 */
  .pg-view .panel.drawer {
    left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: none;
    border-radius: 14px 14px 0 0;
  }
  /* 清单下拉：手机上标题栏要够高，戴手套也点得到 */
  .panel.drawer h3 { min-height: 46px; padding: 11px 14px; font-size: 16px; }
  .pg-view .panel.drawer h3 { min-height: 48px; font-size: 17px; }
  .pg-view .panel.drawer:not(.open) h3 { padding-bottom: calc(11px + env(safe-area-inset-bottom)); }
  .pg-view .panel.drawer .body { max-height: 38vh; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  #panel li { padding: 9px 12px; font-size: 16px; }

  #drawbar { flex-wrap: wrap; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  #drawbar .big { flex: 1 1 46%; }

  /* 保存卡片占满整屏：软键盘弹出来也不会把输入框顶没 */
  #card {
    top: 0; max-height: none; border-radius: 0;
    padding-top: calc(16px + env(safe-area-inset-top));
    padding-bottom: calc(20px + env(safe-area-inset-bottom));
  }
  #card h3 { font-size: 22px; }
  #confirm { width: calc(100% - 20px); }
  .iw .iw-actions { flex-wrap: wrap; }
  .iw-photo { width: 76px; height: 76px; }
}