/* ============================================================
   My Dream Home · 站点专属版式
   与 style.css 共用主题令牌；本文件只放「家」这套页面特有的组件。
   页面级类名统一前缀：plan / room / core / layer / agent / scene / p
   ============================================================ */

/* ============================================================
   子页页头（spaces / brain / scenes 共用）
   ============================================================ */
.phero{
  position:relative; overflow:hidden;
  padding:150px 0 76px;
  border-bottom:1px solid var(--rule-2);
  background:var(--bg-alt);
}
.phero__grid-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.phero__grid-bg::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:120px 120px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.18) 62%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,.18) 62%, transparent 100%);
}
.phero__inner{ position:relative; z-index:2; }
.phero__eyebrow{
  font-family:var(--font-din); font-size:11.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sig); margin:0 0 24px;
}
.phero__title{
  margin:0 0 24px;
  font-size:clamp(36px, 5.6vw, 62px);
  line-height:1.14; font-weight:600; letter-spacing:-.01em;
}
.phero__title em{ font-style:normal; color:var(--sig); }
.phero__lead{
  max-width:680px; color:var(--ink-2);
  font-size:16.5px; line-height:2; margin:0;
}
.phero__back{
  display:inline-flex; align-items:center; gap:9px;
  margin-bottom:30px;
  font-family:var(--font-din); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3);
  transition:color .28s var(--ease);
}
.phero__back:hover{ color:var(--sig); }
.phero__back i{ font-style:normal; transition:transform .3s var(--ease); }
.phero__back:hover i{ transform:translateX(-4px); }

/* 子页统计条：与首页 .metrics 同构，但列数按需收窄 */
.pstats{
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--rule-2);
  margin-top:56px;
}
.pstats__it{ padding:24px 24px 0 0; border-right:1px solid var(--rule); }
.pstats__it:last-child{ border-right:0; }
.pstats__it b{
  display:block; font-family:var(--font-din);
  font-size:34px; font-weight:600; line-height:1; color:var(--ink);
  letter-spacing:-.01em;
}
.pstats__it b em{ font-style:normal; font-size:19px; color:var(--sig); }
.pstats__it span{
  display:block; margin-top:9px;
  font-size:12px; color:var(--ink-3); letter-spacing:.06em;
}

/* ============================================================
   子页底部：继续翻阅
   ============================================================ */
.pnav{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--rule);
  border:1px solid var(--rule-2);
  margin-top:26px;
}
.pcard{
  background:var(--bg);
  padding:28px 30px 30px;
  transition:background .3s var(--ease);
}
.pcard:hover{ background:var(--panel); }
.pcard__k{
  display:block; margin-bottom:12px;
  font-family:var(--font-mono); font-size:10px;
  letter-spacing:.12em; color:var(--sig);
}
.pcard__t{
  display:block; margin-bottom:9px;
  font-size:17px; font-weight:600; letter-spacing:-.005em; color:var(--ink);
}
.pcard__d{ display:block; font-size:13px; line-height:1.8; color:var(--ink-2); }

/* ============================================================
   空间 · 平面图
   ============================================================ */
.plan{ margin:0 0 72px; }
.plan__stage{
  border-top:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);
  padding:26px 0 20px;
}
.plan__stage svg{ width:100%; height:auto; display:block; color:var(--dwg-dim); }

/* 平面图专用描线（与 .dw-* 同族，但更适合房间分区） */
.pl-wall{ fill:none; stroke:var(--dwg-line); stroke-width:1.6; }
.pl-soft{ fill:none; stroke:var(--dwg-dim); stroke-width:1; stroke-opacity:.7; }
.pl-fill{ fill:var(--wash); stroke:var(--rule-2); stroke-width:1; }
.pl-hub{ fill:var(--sig-wash); stroke:var(--sig-dip); stroke-width:1.2; }
.pl-axis{ stroke:var(--sig); stroke-opacity:.5; stroke-width:1; stroke-dasharray:2 6; }
.pl-dim{ stroke:var(--dwg-dim); stroke-width:1; }
.pl-lbl{ font-family:var(--font-cn); font-size:12px; fill:var(--ink-2); letter-spacing:.03em; }
.pl-num{ font-family:var(--font-mono); font-size:10.5px; fill:var(--ink-3); letter-spacing:.06em; }
.pl-num--sig{ fill:var(--sig); }
.pl-node{ fill:var(--sig); }

/* 房间卡组 */
.rooms{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--rule); border:1px solid var(--rule-2);
}
.room{
  position:relative;
  background:var(--bg-alt);
  padding:32px 30px 34px;
  transition:background .35s var(--ease);
}
.room:hover{ background:var(--panel); }
.room::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--sig); transform:scaleY(0); transform-origin:top;
  transition:transform .4s var(--ease);
}
.room:hover::before{ transform:scaleY(1); }
.room__no{
  display:block; margin-bottom:16px;
  font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.1em; color:var(--ink-3);
}
.room h3{ font-size:18px; font-weight:600; margin:0 0 8px; letter-spacing:.01em; }
.room__m{
  display:block; margin:0 0 16px;
  font-size:12.5px; color:var(--sig); letter-spacing:.06em;
}
.room p{ margin:0; color:var(--ink-2); font-size:14.5px; line-height:1.95; }

/* 分区原则 */
.zoning{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; margin:0; padding:0; list-style:none;
  border-top:1px solid var(--rule-2);
}
.zoning__it{ padding:26px 30px 4px 0; border-right:1px solid var(--rule); }
.zoning__it:last-child{ border-right:0; padding-right:0; }
.zoning__it b{
  display:block; margin-bottom:10px;
  font-family:var(--font-din); font-size:13px; font-weight:600;
  letter-spacing:.06em; color:var(--sig);
}
.zoning__it span{ font-size:13.5px; line-height:1.85; color:var(--ink-2); }

/* ============================================================
   中枢 · 家的脑子
   ============================================================ */
.core{ margin:0 0 72px; }
.core__stage{
  border-top:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);
  padding:30px 0 24px;
}
.core__stage svg{ width:100%; height:auto; display:block; }

/* style.css 里中枢节点的信号色描边只覆盖了 polygon，
   而本站在流程图里用的是 rect，这里补上，避免中枢与普通节点长得一样 */
.fm-node--hub rect{ stroke:var(--sig-dip); stroke-width:1.2; }

/* 架构分层：从感知到执行 */
.layers{
  border-top:1px solid var(--rule-2);
}
.layer{
  display:grid; grid-template-columns:150px 1fr;
  gap:34px; align-items:start;
  padding:28px 0; border-bottom:1px solid var(--rule);
  transition:background .3s var(--ease);
}
.layer:hover{ background:var(--wash); }
.layer__k{
  font-family:var(--font-din); font-size:12.5px; font-weight:600;
  letter-spacing:.14em; color:var(--sig);
  padding-top:4px;
}
.layer__k small{
  display:block; margin-top:7px;
  font-family:var(--font-mono); font-size:10px; font-weight:400;
  letter-spacing:.08em; color:var(--ink-3);
}
.layer h3{ font-size:17px; font-weight:600; margin:0 0 10px; letter-spacing:.01em; }
.layer p{ margin:0; color:var(--ink-2); font-size:14.5px; line-height:1.95; max-width:820px; }
.layer p + p{ margin-top:12px; }

/* Agent 卡组 */
.agents{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--rule); border:1px solid var(--rule-2);
  margin-top:26px;
}
.agent{
  background:var(--bg-alt); padding:30px 32px 34px;
  transition:background .35s var(--ease);
}
.agent:hover{ background:var(--panel); }
.agent__hd{
  display:flex; align-items:center; gap:12px; margin-bottom:14px;
}
.agent__tag{
  font-family:var(--font-din); font-size:9.5px; font-weight:600;
  letter-spacing:.18em; color:var(--btn-ink); background:var(--sig);
  padding:2px 7px; border-radius:2px; line-height:1.6;
}
.agent__nm{ font-size:17px; font-weight:600; letter-spacing:-.005em; }
.agent p{ margin:0; color:var(--ink-2); font-size:14px; line-height:1.92; }

/* 隐私与边界 */
.guard{
  margin:70px 0 0; padding:34px 38px 38px;
  border:1px solid var(--rule-2);
  border-left:3px solid var(--sig);
  background:var(--wash); border-radius:2px;
}
.guard__t{
  margin:0 0 12px; font-size:20px; font-weight:600;
  line-height:1.5; color:var(--ink); letter-spacing:-.002em;
}
.guard__t em{ font-style:normal; color:var(--sig); }
.guard__d{ margin:0; max-width:800px; font-size:14.5px; line-height:1.95; color:var(--ink-2); }
.guard__d b{ color:var(--ink); font-weight:600; }

/* ============================================================
   场景系统
   ============================================================ */
.scenes{
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1px; background:var(--rule); border:1px solid var(--rule-2);
}
.scene{
  position:relative; background:var(--bg-alt);
  padding:34px 32px 38px;
  transition:background .35s var(--ease);
}
.scene:hover{ background:var(--panel); }
.scene::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--sig); transform:scaleY(0); transform-origin:top;
  transition:transform .4s var(--ease);
}
.scene:hover::before{ transform:scaleY(1); }
.scene__fig{
  display:inline-block; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.1em; color:var(--ink-3); margin-bottom:16px;
}
.scene h3{ font-size:18px; font-weight:600; margin:0 0 8px; letter-spacing:.01em; }
.scene__tl{
  font-size:12.5px !important; color:var(--sig) !important;
  letter-spacing:.06em; margin:0 0 16px !important;
}
.scene p{ margin:0; color:var(--ink-2); font-size:14.5px; line-height:1.95; }

/* 触发链：条件 → 中枢 → 动作 */
.sflow{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0; margin:22px 0 0; padding:0; list-style:none;
  border-top:1px solid var(--rule-2);
}
.sflow li{ padding:20px 22px 0 0; border-right:1px solid var(--rule); }
.sflow li:last-child{ border-right:0; padding-right:0; }
.sflow b{
  display:block; margin-bottom:8px;
  font-family:var(--font-din); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3);
}
.sflow span{ font-size:13px; line-height:1.8; color:var(--ink-2); }

/* 场景预设表 */
.presets{ margin:0; padding:0; list-style:none; border-top:1px solid var(--rule-2); }
.preset{
  display:grid; grid-template-columns:120px 1fr 200px;
  gap:30px; align-items:start;
  padding:22px 0; border-bottom:1px solid var(--rule);
  transition:background .3s var(--ease);
}
.preset:hover{ background:var(--wash); }
.preset__k{
  font-family:var(--font-din); font-size:13.5px; font-weight:600;
  letter-spacing:.08em; color:var(--sig); padding-top:3px;
}
.preset__d{ font-size:14.5px; line-height:1.9; color:var(--ink-2); }
.preset__v{
  font-family:var(--font-mono); font-size:11.5px;
  line-height:1.8; color:var(--ink-3); text-align:right;
}

/* ============================================================
   响应式
   注意：列数变化时必须在本断点显式重置上一断点的边框规则
   ============================================================ */
@media (max-width:1080px){
  .rooms{ grid-template-columns:repeat(2,1fr); }
  .agents{ grid-template-columns:1fr; }
  .pnav{ grid-template-columns:1fr; }
  .pstats{ grid-template-columns:repeat(2,1fr); }
  .pstats__it:nth-child(2n){ border-right:0; }
  /* 还原被 4 列规则收掉的右线，再收掉新右列的线 */
  .pstats__it:nth-child(2n+1){ border-right:1px solid var(--rule); }
  .pstats__it:last-child{ border-right:0; }

  .zoning{ grid-template-columns:1fr; }
  .zoning__it{ border-right:0; padding-right:0; border-top:1px solid var(--rule); padding-top:22px; }
  .zoning__it:first-child{ border-top:0; padding-top:0; }
}

@media (max-width:860px){
  .phero{ padding:120px 0 60px; }
  .rooms{ grid-template-columns:1fr; }
  .scenes{ grid-template-columns:1fr; }
  .layer{ grid-template-columns:1fr; gap:14px; }
  .preset{ grid-template-columns:1fr; gap:10px; }
  .preset__v{ text-align:left; }
  .sflow{ grid-template-columns:1fr; }
  .sflow li{ border-right:0; border-top:1px solid var(--rule); padding:18px 0 0; }
  .sflow li:first-child{ border-top:0; padding-top:0; }
  .guard{ padding:26px 22px 30px; }
}

@media (max-width:520px){
  .pstats{ grid-template-columns:1fr; }
  .pstats__it{ border-right:0; padding-right:0; }
  .pstats__it + .pstats__it{ border-top:1px solid var(--rule); padding-top:20px; }
}