/* ============================================================
   解忧小馆 · 一层平面图（样式）
   ------------------------------------------------------------
   服务两张页面，同一张图：
     · index.html     主站首页地图 → 用 .hall-plan / .map-cap / .map-tgl
     · building.html  建筑原型页   → 用 .bp-* 那套详情面板
   SVG 内部图形一律用 #plan 作用域限定，避免影响 styles.css 里别的东西。
   ============================================================ */

/* ---------- 首页地图容器 ---------- */
.hall-plan {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 1px 2px rgba(60, 50, 30, .04);
}
#plan { display: block; width: 100%; height: auto; }

/* 悬停/选中时在图下面报一句 —— 手机上不触发，所以文案要能自己成立 */
.map-cap {
  display: flex; align-items: baseline; gap: 10px;
  min-height: 26px; margin: 12px 2px 0;
  font-size: 13px; color: var(--ink-3); line-height: 1.7;
}
.map-cap .mc-name {
  font-family: var(--serif); font-size: 17px; letter-spacing: .12em;
  color: var(--ink); white-space: nowrap;
}
.map-cap .mc-name.on { color: var(--lamp); }
.map-cap .mc-line { flex: 1; min-width: 0; }
.map-tools { display: flex; gap: 8px; margin: 10px 0 0; }

/* 两个开关：主站和原型页共用 */
.bp-tgl, .map-tgl {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 12px; cursor: pointer; font-size: 12.5px; color: var(--ink-3);
  transition: all .18s ease;
}
.bp-tgl:hover, .map-tgl:hover { border-color: var(--line-2); color: var(--ink-2); }
.bp-tgl[aria-pressed="true"], .map-tgl[aria-pressed="true"] {
  background: var(--lamp-soft); border-color: #e3c6a4; color: #8a4d15;
}

/* ============================================================
   下面这一整段只服务 building.html（建筑原型页）
   ============================================================ */
body.bp {
  background-image:
    radial-gradient(circle at 14% 8%, rgba(201,114,43,.05), transparent 46%),
    radial-gradient(circle at 86% 84%, rgba(74,124,111,.05), transparent 46%);
}

/* ---------- 顶栏 ---------- */
.bp-brand {
  font-family: var(--serif); font-size: 17px; letter-spacing: .12em;
  color: var(--ink); text-decoration: none;
}
.bp-brand:hover { color: var(--lamp); }
.bp-crumb {
  font-size: 12.5px; color: var(--ink-3); letter-spacing: .04em;
  padding-left: 12px; border-left: 1px solid var(--line);
}

/* ---------- 布局 ---------- */
.bp-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 322px;
  gap: 26px; align-items: start;
  max-width: 1400px; margin: 0 auto; padding: 22px 22px 72px;
}
.bp-stage { min-width: 0; }
.bp-sheet {
  display: flex; justify-content: center;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  box-shadow: 0 1px 2px rgba(60,50,30,.04);
}
/* 一张图要能一屏看完，所以高度也随视口收 ——
   收到高度上限后，SVG 会等比缩小、在图纸里居中（左右留一点白）。 */
.bp-sheet #plan { max-height: max(460px, calc(100vh - 160px)); }
.bp-hint {
  margin: 12px 2px 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.75;
}
.bp-hint strong { color: var(--ink-2); font-weight: 600; }

/* ---------- 右栏卡片 ---------- */
.bp-panel { position: sticky; top: 78px; display: grid; gap: 14px; }
.bp-card {
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: 18px 18px 16px;
}
.bp-card-h {
  margin: 0 0 8px; font-family: var(--serif); font-size: 19px;
  letter-spacing: .1em; font-weight: 500;
}
.bp-card-p { margin: 0 0 12px; font-size: 13.5px; color: var(--ink-2); line-height: 1.85; }
.bp-who {
  margin: -4px 0 10px; font-size: 12.5px; color: var(--ink-3);
  letter-spacing: .04em;
}
.bp-tone {
  display: inline-block; font-size: 11px; letter-spacing: .1em;
  padding: 2px 9px; border-radius: 999px; margin-bottom: 10px;
  border: 1px solid var(--line-2); color: var(--ink-3); background: var(--paper);
}
.bp-tone.t-out { background: var(--lamp-soft); border-color: #e8caa8; color: #8a4d15; }
.bp-tone.t-in { background: var(--cool-soft); border-color: #bcd4ca; color: #33604f; }
.bp-tone.t-rest { background: var(--paper); border-style: dashed; }
/* 树洞既不是「向外求」也不是「向内求」：话是说出去的，但没给谁听 */
.bp-tone.t-hole { background: #eeebdc; border-color: #cfc9b2; color: #4f4a3a; }

.bp-legend { margin: 0 0 4px; font-size: 12.5px; }
.bp-legend > div {
  display: grid; grid-template-columns: 96px 1fr; gap: 8px;
  align-items: baseline; padding: 5px 0; border-top: 1px solid var(--line);
}
.bp-legend dt { margin: 0; color: var(--ink-2); display: flex; align-items: center; gap: 7px; }
.bp-legend dd { margin: 0; color: var(--ink-3); font-size: 12px; }
.sw { width: 11px; height: 11px; border-radius: 3px; flex: none; box-sizing: border-box; }
.sw-out { background: var(--lamp-soft); border: 1px solid #e0bd97; }
.sw-in { background: var(--cool-soft); border: 1px solid #b3cec3; }
.sw-rest { background: transparent; border: 1px dashed var(--line-2); }

.bp-meta { margin: 0 0 14px; font-size: 12.5px; }
.bp-meta > div {
  display: grid; grid-template-columns: 52px 1fr; gap: 10px;
  padding: 6px 0; border-top: 1px solid var(--line);
}
.bp-meta dt { margin: 0; color: var(--ink-3); }
.bp-meta dd { margin: 0; color: var(--ink-2); }
.bp-enter { display: block; text-align: center; text-decoration: none; }
.bp-note {
  margin: 10px 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.7;
}

@media (max-width: 1080px) {
  .bp-layout { grid-template-columns: minmax(0, 1fr); }
  .bp-panel { position: static; }
}

/* 窄屏：顶栏不许换行，图纸里的字要跟着放大 ——
   SVG 整体是按宽度缩放的，字号不补回来就成了 6px 的蚂蚁字。 */
@media (max-width: 760px) {
  .topbar { padding: 12px 14px; gap: 8px; }
  .bp-brand, .bp-tgl, .link-btn { white-space: nowrap; }
  .bp-brand { font-size: 16px; }
  .bp-crumb { display: none; }
  .bp-tgl, .map-tgl { padding: 3px 10px; font-size: 11.5px; }
  .bp-layout { padding: 14px 14px 56px; }
  .bp-sheet { padding: 4px; border-radius: 12px; }
  .hall-plan { padding: 4px; border-radius: 12px; }

  /* 窄屏把 SVG 里的字号放大补回缩放损失。
     430px 宽时整张图缩到约 0.37 倍，17px 的房名只剩 6px —— 得往大里给。 */
  #plan .lab-name { font-size: 34px; letter-spacing: .04em; }
  #plan .lab-out { font-size: 23px; letter-spacing: .1em; }
  #plan .lab-mini { font-size: 18px; }
  /* 副标题（房名下面那一行）在这个尺度下只会糊成一团，
     而且它跟下面那份房间列表完全重复 —— 干脆让位给房名 */
  #plan .lab-desc { display: none; }
  #plan .lab-dim { display: none; }     /* 尺寸数字同理 */
  #plan .lab-name, #plan .lab-out { stroke-width: 7; }

  /* 原型页的「回正式版」在窄屏会把顶栏挤爆 —— 品牌名本身就是回主页的链接 */
  .topbar .link-btn { display: none; }
}

/* ============================================================
   SVG 图纸
   顺序即层序：室外底 → 各房间地面 → 墙 → 门窗 → 家具 → 灯光 → 标注
   ============================================================ */

/* ---------- 地面 ---------- */
/* 纸面用 paper-2，跟图纸留边同色 —— 不然 SVG 边缘会显出一圈"白框" */
#plan .ground     { fill: var(--paper-2); }
#plan .fl-out     { fill: #fdf9f0; }   /* 向外求的房间 */
#plan .fl-in      { fill: #f5f4ee; }   /* 向内求的房间 */
#plan .fl-neutral { fill: #faf7ef; }
#plan .fl-corr    { fill: #f1ebdd; }   /* 过道 */
#plan .fl-entry   { fill: #ebe4d4; }   /* 玄关 */
#plan .fl-pave    { fill: #f4efe2; }   /* 室外铺装 */

/* 房间地面随人鼠标一起亮一下 */
#plan .room { cursor: pointer; outline: none; }
#plan .room .floor { transition: fill .22s ease; }
#plan .room:hover .floor { fill: #fffdf7; }
#plan .room.tone-out:hover .floor { fill: #fdf3e6; }
#plan .room.tone-in:hover  .floor { fill: #eef4f1; }
#plan .room.tone-rest:hover .floor { fill: #f2f4ef; }

/* 选中：自己亮，其余退到后面去 */
#plan.has-sel .room { opacity: .42; transition: opacity .25s ease; }
#plan.has-sel .room.is-sel { opacity: 1; }
#plan .room.is-sel .floor { fill: #fffcf4; }
#plan .room.tone-out.is-sel .floor { fill: #fdf0dd; }
#plan .room.tone-in.is-sel  .floor { fill: #e8f1ec; }
#plan .room.tone-rest.is-sel .floor { fill: #f1f3ee; }

#plan .room-outline { fill: none; stroke: none; }
#plan .room.is-sel .room-outline { stroke: var(--lamp); stroke-width: 2; }

/* 键盘走到哪一间也要看得见（悬停效果对键盘用户不存在） */
#plan .room:focus-visible .room-outline { stroke: var(--lamp); stroke-width: 2; }

/* 室外的透明热区（水岸、树洞）：能点，但只在悬停时给一层很淡的色，
   不然会把水面、树冠和树洞的画盖掉 */
#plan .hit { fill: transparent; transition: fill .2s ease; }
#plan .room:hover .hit { fill: rgba(201,114,43,.07); }
/* 树洞底下是泥地和树根，用暖橙会显脏，换成偏土的灰绿 */
#plan .room.tone-hole:hover .hit { fill: rgba(126,124,96,.13); }
#plan .room.tone-hole.is-sel .hit { fill: rgba(126,124,96,.16); }

/* ---------- 墙 ---------- */
/* 墙体是实心的（剖切），不是线框 —— 这是"像真建筑"的关键 */
#plan .wallbody { fill: #e2dac7; stroke: #bcb19b; stroke-width: 1; }
#plan .wall-ext  { fill: #d9d0bb; stroke: #b0a58f; stroke-width: 1; }

/* ---------- 门 ---------- */
#plan .door-leaf {
  stroke: #8d8069; stroke-width: 2.6; stroke-linecap: round; fill: none;
}
#plan .door-arc {
  fill: none; stroke: #c3b8a2; stroke-width: 1; stroke-dasharray: 3 3.5;
}
#plan .room.is-sel .door-leaf { stroke: var(--lamp); }

/* ---------- 窗 ---------- */
#plan .win-line { stroke: #8fb0a5; stroke-width: 1.5; }
#plan .win-jamb { stroke: #b0a58f; stroke-width: 1.5; }

/* ---------- 家具 ---------- */
#plan .f-big   { fill: #efe5d1; stroke: #c5b99f; stroke-width: 1.1; }
#plan .f-sm    { fill: #e8ddc6; stroke: #c5b99f; stroke-width: 1; }
#plan .f-line  { fill: none; stroke: #cec2a9; stroke-width: .9; }
#plan .f-soft  { fill: #ece3d1; stroke: #cdc2ab; stroke-width: 1; }
#plan .f-dark  { fill: #4a463d; stroke: none; opacity: .82; }
#plan .f-rug   { fill: #e7ddc8; stroke: #d2c7ae; stroke-width: .9; opacity: .75; }
#plan .f-lamp  { fill: var(--lamp); opacity: .68; }
#plan .f-green { fill: #dde3d0; stroke: #c0c8b0; stroke-width: 1; }
/* 老树的树冠：只填色不描边，叠在 .f-green 那圈底上，避免出现一堆圆弧线 */
#plan .f-crown { fill: #dde3d0; stroke: none; }
#plan .f-trunk { fill: #cdbb98; stroke: #ab9b7d; stroke-width: 1; }
#plan .f-root  { fill: none; stroke: #c3b190; stroke-width: 1.6; stroke-linecap: round; }
#plan .f-soil  { fill: #e7dcc4; stroke: #cbbfa4; stroke-width: 1; }
#plan .f-hole  { fill: #9a8f78; }
#plan .f-hole-in { fill: #6b6353; }
#plan .f-stone { fill: #e5e0d3; stroke: #c8c1ae; stroke-width: 1; }

/* ---------- 灯光 ---------- */
#plan .glow { pointer-events: none; }

/* ---------- 室外 ---------- */
#plan .water  { fill: #e4eae3; stroke: #c3cfc8; stroke-width: 1; }
#plan .ripple { fill: none; stroke: #b7c6be; stroke-width: 1; opacity: .85; }
#plan .bench  { fill: #e8dcc4; stroke: #c5b99f; stroke-width: 1; }
#plan .step   { fill: #efe9da; stroke: #cfc5ae; stroke-width: 1; }
#plan .yardline { fill: none; stroke: #cfc5ae; stroke-width: 1.1; stroke-dasharray: 7 6; opacity: .8; }
#plan .pathln { fill: none; stroke: #cbc0a8; stroke-width: 1.4; stroke-dasharray: 4 5; }
#plan .north circle { fill: none; stroke: #b5aa94; stroke-width: 1; }
#plan .north path { fill: #9c9179; }
#plan .north text {
  font-family: var(--serif); font-size: 13px; fill: var(--ink-2);
  text-anchor: middle; letter-spacing: .06em;
}
#plan .scale line { stroke: #b5aa94; stroke-width: 1.4; }
#plan .scale text { font-size: 10.5px; fill: var(--ink-3); text-anchor: middle; }

/* ---------- 动线 ---------- */
#plan .route {
  fill: none; stroke: var(--lamp); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 7 6;
  animation: bp-flow 1.05s linear infinite;
}
@keyframes bp-flow { to { stroke-dashoffset: -13; } }
#plan .route-dot { fill: #fff; stroke: var(--lamp); stroke-width: 2.2; }
#plan .route-end { fill: var(--lamp); }

/* ---------- 标注 ----------
   一律加白描边（paint-order: stroke）：房名会压在家具和灯光上，
   没有这层白边就读不清 —— 跟真实图纸的标注罩白是一个道理。 */
#plan .lab-name, #plan .lab-desc, #plan .lab-dim, #plan .lab-out, #plan .lab-mini {
  paint-order: stroke; stroke: #fdfaf2; stroke-width: 3.6;
  stroke-linejoin: round; stroke-linecap: round;
  pointer-events: none;
}
#plan .lab-name {
  font-family: var(--serif); font-size: 17px; fill: var(--ink);
  text-anchor: middle; letter-spacing: .14em;
  transition: fill .2s ease;
}
#plan .room:hover .lab-name { fill: var(--lamp); }
#plan .lab-desc {
  font-size: 10.5px; fill: var(--ink-3); text-anchor: middle; letter-spacing: .02em;
}
#plan .lab-dim {
  font-size: 9.5px; fill: #a49b86; text-anchor: start;
  font-variant-numeric: tabular-nums;
}
#plan .lab-out {
  font-family: var(--serif); font-size: 15px; fill: #948b77;
  text-anchor: middle; letter-spacing: .2em;
}
#plan .lab-mini { font-size: 10px; fill: var(--ink-3); letter-spacing: .1em; }
#plan.names-off .lab-name,
#plan.names-off .lab-desc,
#plan.names-off .lab-dim { opacity: 0; }

/* ---------- 尺寸网格 ---------- */
#plan .grid { display: none; }
#plan.grid-on .grid { display: block; }
#plan .grid line { stroke: #cfc5ae; stroke-width: .5; opacity: .5; }
#plan .grid line.major { stroke: #bfb49c; stroke-width: .8; opacity: .62; }