/* ═══════════════════════════════════════════════════════════
   「楼上姐姐」· 内置CSS (builtInCss)
   视觉主题：老居民楼 · 阳台晾衣绳
   灰墙旧楼 · 米白晾晒 · 砖红 · 暖橙夕阳 · 蕾丝白
   组件：自身状态栏 / 在场人物 / 记忆卡 / 行动选项
   纯CSS：details/summary · 零JS 零事件绑定
   ═══════════════════════════════════════════════════════════ */

/* ── 0. 设计令牌（老居民楼色板） ── */
.dl-self,.dl-cast,.dl-memory,.dl-actions{
  --paper:#F6F0E6;        /* 米白晾晒 */
  --paper-2:#EDE4D6;      /* 旧纸 */
  --line:#DCCFBE;         /* 麻绳线 */
  --line-soft:rgba(220,207,190,.45);
  --ink:#33291F;          /* 墨字 */
  --ink-2:#6E5F52;        /* 次级字 */
  --ink-3:#8F8276;        /* 弱化字 */
  --brick:#B3543C;        /* 砖红·主 */
  --brick-2:#8F4030;      /* 深砖红 */
  --brick-soft:#F3E2DA;   /* 浅砖红底 */
  --sun:#E8874A;          /* 暖橙夕阳 */
  --wall:#4A403C;         /* 灰墙 */
  --wall-2:#332B28;       /* 深灰墙 */
  --lace:#FFF9F2;         /* 蕾丝白 */
  --red:#B3543C;          /* 危险红 */
  --gold:#A97E22;         /* 便签金 */
  --hi:#FFE3B3;           /* 便签黄高亮 */
  --hi-l:rgba(255,227,179,.5);
  --green:#4E8A5C;
  --orange:#D9822B;
  --font:-apple-system,'PingFang SC','Microsoft YaHei','SimSun','Hiragino Sans GB',sans-serif;
  box-sizing:border-box;position:relative;
}

/* ── 1. 通用卡壳（米白纸 + 麻绳线 + 左上角胶带） ── */
.dl-self,.dl-cast,.dl-memory,.dl-actions{
  width:100%;max-width:none;margin:12px auto 0;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:4px;              /* 直角的纸质感 */
  color:var(--ink);
  font-family:var(--font);font-size:13px;line-height:1.5;
  box-shadow:0 1px 3px rgba(0,0,0,.08),0 0 0 1px #fff inset;
  overflow:hidden;
}
/* 左上角透明胶带 */
.dl-self::before,.dl-cast::before,.dl-memory::before,.dl-actions::before{
  content:'';position:absolute;top:-6px;left:18px;width:52px;height:16px;
  background:rgba(242,228,200,.75);
  transform:rotate(-3deg);
  border-left:1px dashed rgba(180,150,80,.4);border-right:1px dashed rgba(180,150,80,.4);
  z-index:2;pointer-events:none;
}
/* 晾衣绳横格背景 */
.dl-self,.dl-cast,.dl-memory{
  background-image:repeating-linear-gradient(transparent 0 27px,rgba(220,207,190,.18) 27px 28px);
  background-color:var(--paper);
}
.dl-actions{background-image:none;}

/* ── 2. 卡头 summary（砖红条 · 白字） ── */
.dl-self>summary,.dl-cast>summary,.dl-memory>summary,.dl-actions>summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:8px;
  padding:9px 14px;
  font-size:12.5px;font-weight:800;letter-spacing:1px;
  background:linear-gradient(180deg,var(--brick),var(--brick-2));
  color:#fff;
}
.dl-self>summary::-webkit-details-marker,
.dl-cast>summary::-webkit-details-marker,
.dl-memory>summary::-webkit-details-marker,
.dl-actions>summary::-webkit-details-marker{display:none;}
.dl-self>summary em,.dl-cast>summary em{
  font-style:normal;font-size:10px;font-weight:700;letter-spacing:.5px;
  color:var(--brick-2);background:#fff;border-radius:10px;padding:0 8px;
}
/* 箭头 */
.dl-self-arrow,.dl-cast-arrow,.dl-mem-arrow,.dl-act-arrow{
  margin-left:auto;font-size:10px;color:rgba(255,255,255,.85);
  transition:transform .2s;
}
.dl-self[open]>summary .dl-self-arrow,
.dl-cast[open]>summary .dl-cast-arrow,
.dl-memory[open]>summary .dl-mem-arrow,
.dl-actions[open]>summary .dl-act-arrow{transform:rotate(180deg);}

/* ── 3. 行（纸面横格 · 左缘色条） ── */
.dl-self-row{
  display:flex;align-items:center;gap:10px;
  padding:7px 14px 7px 12px;
  border-bottom:1px dashed var(--line-soft);
  font-size:12.5px;line-height:1.45;
}
.dl-self-row:last-child{border-bottom:none;}
.dl-self-row::before{
  content:'';position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:0 2px 2px 0;
  background:var(--brick);opacity:.85;
}
.dl-s-ic{
  width:24px;height:24px;flex-shrink:0;border-radius:5px;
  display:flex;align-items:center;justify-content:center;font-size:13px;
  background:var(--brick-soft);color:var(--brick-2);
}
.dl-s-l{
  color:var(--ink-2);flex-shrink:0;min-width:36px;
  font-size:10.5px;font-weight:700;letter-spacing:1px;
}
.dl-s-v{
  flex:1;min-width:0;text-align:right;
  font-size:12.5px;color:var(--ink);line-height:1.45;word-break:break-word;
}
.dl-s-v em{font-style:normal;color:var(--brick-2);font-weight:800;}
.dl-s-v strong{font-style:normal;color:var(--red);font-weight:800;}

/* ── 4. 变更行 = 便签黄划重点 ── */
.dl-self-row.changed{
  background:linear-gradient(90deg,var(--hi-l),transparent 70%);
  box-shadow:inset 3px 0 0 var(--sun);
  animation:dl-flag .9s ease;
}
.dl-self-row.changed .dl-s-v{font-weight:800;}
@keyframes dl-flag{0%{background-color:var(--hi)}100%{background-color:transparent}}

/* ── 5. 状态标签：风险/关系/评级 ── */
.law-clean{color:var(--green);font-weight:800;}
.law-record{color:var(--orange);font-weight:800;}
.law-warning{color:var(--red);font-weight:800;animation:dl-blink 1.2s infinite;}
@keyframes dl-blink{0%,100%{opacity:1}50%{opacity:.4}}

.rep-tag{
  display:inline-block;padding:1px 8px;border-radius:3px;
  font-size:10.5px;font-weight:700;letter-spacing:.5px;
  border:1px solid;margin-right:4px;
}
.rep-tag.rp-new{color:var(--brick);border-color:var(--brick);background:#FBF0EC;}
.rep-tag.rp-known{color:var(--green);border-color:var(--green);background:#F0F8F3;}
.rep-tag.rp-backed{color:#7A4BC0;border-color:#7A4BC0;background:#F5F0FC;}
.rep-tag.rp-suspect{color:var(--orange);border-color:var(--orange);background:#FFF7EE;}
.rep-tag.rp-banned{color:#fff;border-color:var(--red);background:var(--red);}

.neg-clean{color:var(--green);font-weight:800;}
.neg-minor{color:var(--orange);font-weight:800;}
.neg-major{color:var(--red);font-weight:800;animation:dl-blink 1.2s infinite;}

.dl-self-rank{
  display:inline-block;min-width:18px;text-align:center;padding:0 5px;
  border-radius:3px;color:#fff;font-size:11px;font-weight:900;margin-right:4px;
}
.dl-self-rank.rk-s{background:#8B5CF6;}
.dl-self-rank.rk-a{background:#B3543C;}
.dl-self-rank.rk-b{background:#4E8A5C;}
.dl-self-rank.rk-c{background:#D9822B;}
.dl-self-rank.rk-d{background:#B3543C;}

/* ── 6. 在场人物卡 .dl-cast（同主角行样式） ── */
.dl-cast{margin-top:8px;}

/* ── 7. 记忆卡 .dl-memory（灰墙分区 · 默认展开） ── */
.dl-memory>summary{background:linear-gradient(180deg,var(--wall),var(--wall-2));}
.dl-mem-body{padding:8px;display:flex;flex-direction:column;gap:7px;}
.dl-mem-sec{
  padding:8px 11px;
  background:var(--paper);
  border:1px solid var(--line);border-radius:4px;
}
.dl-mem-tag{
  display:inline-block;font-size:10px;font-weight:900;letter-spacing:1px;
  margin-bottom:3px;padding:1px 8px;border-radius:3px;color:#fff;
}
/* 三段配色：大总结·常驻=砖红 / 长记=暖橙 / 小总结=灰墙 */
.dl-mem-sec:nth-child(1) .dl-mem-tag{background:linear-gradient(180deg,#C46A52,var(--brick));}
.dl-mem-sec:nth-child(1){border-left:3px solid var(--brick);background:linear-gradient(90deg,rgba(179,84,60,.06),var(--paper));}
.dl-mem-sec:nth-child(2) .dl-mem-tag{background:var(--sun);}
.dl-mem-sec:nth-child(2){border-left:3px solid var(--sun);}
.dl-mem-sec:nth-child(3) .dl-mem-tag{background:var(--wall);}
.dl-mem-sec:nth-child(3){border-left:3px solid var(--wall);}
.dl-mem-sec:nth-child(4) .dl-mem-tag{background:var(--brick-2);}
.dl-mem-sec:nth-child(4){border-left:3px solid var(--brick-2);}
.dl-mem-txt{font-size:12.5px;line-height:1.6;color:var(--ink);word-break:break-word;}
.dl-mem-txt em{font-style:normal;color:var(--gold);font-weight:800;}
.dl-mem-txt strong{font-style:normal;color:var(--red);font-weight:800;}

/* ── 8. 行动选项 .dl-actions（便签序号） ── */
.dl-act-list{padding:6px 0;}
.dl-act-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;
  border-bottom:1px dashed var(--line-soft);
  font-size:12.5px;line-height:1.5;
}
.dl-act-item:last-child{border-bottom:none;}
.dl-act-n{
  flex-shrink:0;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--brick);color:#fff;font-size:11px;font-weight:900;
}
.dl-act-t{flex:1;color:var(--ink);}

/* ── 响应式 ── */
@media (max-width:480px){
  .dl-self,.dl-cast,.dl-memory,.dl-actions{margin:8px auto 0;font-size:12px;}
  .dl-self>summary,.dl-cast>summary,.dl-memory>summary,.dl-actions>summary{padding:8px 11px;font-size:11.5px;}
  .dl-self-row{padding:6px 11px 6px 10px;gap:7px;font-size:11.5px;}
  .dl-s-ic{width:21px;height:21px;font-size:12px;}
  .dl-s-l{font-size:9.5px;min-width:30px;}
  .dl-mem-sec{padding:7px 9px;}
  .dl-act-item{padding:7px 11px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
}