/* 配色 token：Bernard 配色模版库 · 方案 1 蓝绿陶土（docs/design/palette.md）
   功能色（未闭合红/闭合绿）独立于方案，仅降饱和，不换色相。 */
:root {
  --ink: #586F80;        /* 深灰蓝：导航/主按钮/深色锚点 */
  --ink-deep: #465866;   /* 深灰蓝加深：工具栏次级按钮 */
  --mist: #9BB7C3;       /* 浅雾蓝：辅助填充/次级元素 */
  --mist-deep: #7D96A4;  /* 浅雾蓝加深：次级按钮（白字可读） */
  --sage-tint: #E4EFE8;  /* 鼠尾草绿浅底：标签 */
  --celadon: #ADCBB4;    /* 柔青绿：正向语义边框 */
  --celadon-tint: #EDF4EF; /* 柔青绿浅底：闭合结论框 */
  --celadon-ink: #4E7A5D;  /* 柔青绿加深：闭合标题文字 */
  --clay: #DA9B6C;       /* 陶土橙：唯一强调色（CTA/激活态） */
  --clay-ink: #43301F;   /* 陶土橙上的深色文字（白字对比不足） */
  --paper: #EFF2F3;      /* 画布/浅底（浅雾蓝派生） */
  --line: #D9E0E4;       /* 边框/分隔线 */
  --open-red: #C4574A;   /* 功能色：未闭合（降饱和红） */
  --done-green: #5F8F6C; /* 功能色：闭合（降饱和绿） */
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, sans-serif; overflow: hidden; }
#toolbar { position: fixed; top: 0; left: 0; right: 0; height: 44px; display: flex;
  align-items: center; gap: 12px; padding: 0 10px; background: var(--ink); color: #fff; z-index: 10; }
#toolbar button, #toolbar a { color: #fff; background: var(--ink-deep); border: 0; padding: 6px 10px;
  border-radius: 6px; text-decoration: none; font-size: 14px; }
#toolbar button.active { background: var(--clay); color: var(--clay-ink); }
#whoami { margin-left: auto; font-size: 13px; opacity: .85; }
#stage { position: absolute; top: 44px; bottom: 0; left: 0; right: 0; overflow: hidden;
  touch-action: none; background: var(--paper); }
#layer { position: absolute; transform-origin: 0 0; }
#plan-img { display: block; user-select: none; -webkit-user-drag: none; max-width: none; }
.pin { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2px solid #fff; background: var(--open-red); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.pin.done { background: var(--done-green); }
.pin.done::after { content: '✓'; color: #fff; font-size: 11px; font-weight: bold;
  display: block; text-align: center; line-height: 14px; }
.cam { position: absolute; width: 0; height: 0; margin: -10px 0 0 -10px;
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 18px solid var(--ink); transform-origin: 50% 70%; cursor: pointer; }
.hidden { display: none; }
#sheet { position: fixed; bottom: 0; left: 0; right: 0; max-height: 55%; overflow: auto;
  background: #fff; border-top: 2px solid var(--line); padding: 10px; z-index: 20; }
.sheet-head { font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
.sheet-head button { border: 0; background: var(--paper); border-radius: 6px; width: 28px; height: 28px;
  font-size: 16px; cursor: pointer; }
.status { margin: 8px 0; display: flex; align-items: center; gap: 8px; }
.status button, .add-c button, .lb-foot button { border: 0; background: var(--ink); color: #fff;
  padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.c { padding: 4px 0; border-bottom: 1px solid #f0f0f0; }
.add-c { display: flex; gap: 8px; margin-top: 8px; }
.add-c input { flex: 1; padding: 6px; border: 1px solid var(--line); border-radius: 6px; }
/* an "image box" shrink-wraps its <img> so an absolutely-positioned overlay svg
   (inset:0) lines up exactly with the rendered image, regardless of any
   surrounding scroll/flex container that may be larger than the image itself. */
.imgbox { position: relative; display: inline-block; max-width: 100%; }
.imgbox img { display: block; max-width: 100%; }
.imgbox svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.atts { margin-top: 6px; display: flex; flex-direction: column; gap: 10px; }
/* NOTE: baseline set `display:flex` directly on the #lightbox ID rule. An ID
   selector (specificity 1,0,0) beats the .hidden class (0,1,0) regardless of
   source order, so `class="hidden"` could never actually hide it — the
   lightbox rendered as a permanent full-viewport click-blocking overlay from
   page load, breaking every interaction with the plan (found by the smoke
   test: clicking #plan-img timed out because #lightbox "intercepts pointer
   events"). Moving the flex layout to a :not(.hidden) rule keeps it below
   .hidden in specificity so toggling the class works as intended. */
#lightbox { position: fixed; inset: 44px 0 0 0; background: rgba(0,0,0,.9); color: #fff;
  z-index: 30; }
#lightbox:not(.hidden) { display: flex; flex-direction: column; }
.lb-imgwrap { position: relative; flex: 1; overflow: auto; display: flex;
  align-items: flex-start; justify-content: center; }
.lb-head, .lb-foot { padding: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lb-head button { margin-left: auto; border: 0; background: #444; color: #fff; border-radius: 6px;
  width: 28px; height: 28px; font-size: 16px; cursor: pointer; }
.lb-foot input { padding: 6px; border-radius: 6px; border: 1px solid #666; }

/* ---- admin page: thumbnails + camera placement ---- */
.hint { font-size: 13px; color: #777; margin: 4px 0; }
.thumb-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.thumb { width: 112px; border: 2px solid var(--line); border-radius: 8px; padding: 4px;
  cursor: pointer; background: #fff; }
.thumb.selected { border-color: var(--ink); box-shadow: 0 0 0 2px rgba(88,111,128,.25); }
.thumb img { width: 100%; height: 72px; object-fit: cover; border-radius: 4px; display: block; }
.thumb-name { font-size: 12px; margin-top: 3px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.thumb-meta { font-size: 11px; color: #888; }
.thumb-del { font-size: 11px; margin-top: 3px; }
.planwrap { position: relative; display: inline-block; max-width: 100%; margin-top: 6px; }
.planimg { display: block; max-width: 100%; cursor: crosshair; }
.cam-dot { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border-radius: 50%; background: var(--ink); color: #fff; font-size: 12px; line-height: 20px;
  text-align: center; border: 2px solid #fff; cursor: pointer; }

/* ---- camera view-cone overlay (视锥) ---- */
.cone-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; }

/* ---- closure (闭合) ---- */
.closed-box { background: var(--celadon-tint); border: 1px solid var(--celadon); border-radius: 8px;
  padding: 8px; margin: 8px 0; display: flex; flex-direction: column; gap: 6px;
  align-items: flex-start; }
.closed-tag { color: var(--celadon-ink); font-weight: bold; }
.closed-meta { font-size: 12px; color: #888; }
#reopen-btn { border: 0; background: var(--mist-deep); color: #fff; padding: 6px 10px;
  border-radius: 6px; cursor: pointer; }
/* display 写在 :not(.hidden) 上，避免 ID 特异性压过 .hidden（同 #lightbox 的坑） */
#close-form:not(.hidden) { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
#close-form input, #close-form select { padding: 6px; border: 1px solid var(--line); border-radius: 6px; }
#close-confirm { border: 0; background: var(--clay); color: var(--clay-ink); font-weight: bold;
  padding: 8px 10px; border-radius: 6px; cursor: pointer; }

/* ---- layers & list panels ---- */
#layers-panel { position: fixed; top: 48px; left: 8px; background: #fff;
  border: 1px solid var(--line); border-radius: 8px; padding: 10px; z-index: 25;
  box-shadow: 0 2px 8px rgba(0,0,0,.2); font-size: 14px; }
#layers-panel:not(.hidden) { display: flex; flex-direction: column; gap: 6px; }
.layer-group { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.layer-group + .layer-group { border-top: 1px solid var(--line); }
#list-panel { position: fixed; top: 44px; bottom: 0; right: 0; width: min(340px, 90vw);
  background: #fff; border-left: 2px solid var(--line); z-index: 25; overflow: auto; padding: 10px; }
.list-head { font-weight: bold; display: flex; justify-content: space-between;
  align-items: center; }
.list-head button { border: 0; background: var(--paper); border-radius: 6px; width: 28px;
  height: 28px; font-size: 16px; cursor: pointer; }
.li { padding: 6px 4px; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 6px; }
.dot.open { background: var(--open-red); }
.dot.done { background: var(--done-green); }
.tag { font-size: 11px; background: var(--sage-tint); border-radius: 4px; padding: 1px 5px;
  margin-left: 6px; color: var(--ink); }
.li-conc { font-size: 12px; color: #777; margin: 2px 0 0 16px; }
.li-type { font-size: 12px; color: #999; margin-top: 8px; }
.li-group { margin-top: 10px; }