/* ══════════════════════════════════════════════════════════════════════
   GIAO DIỆN "BẢN IN"  —  data-theme="in"

   Dựng lại tấm phả hệ khổ lớn treo ở nhà thờ họ. Điểm mấu chốt: cả tấm
   giấy — nền vàng, khung son, rồng, cuốn thư, câu đối — nằm BÊN TRONG
   #world, nên khi kéo và thu phóng thì nền đi cùng cây, y như đang di
   một tờ giấy thật, chứ không phải cây trôi trên một cái khung đứng yên.

   Hoạ tiết bóc thẳng từ ảnh chụp tấm phả in 30/10/2024 (assets/hoa-van/),
   tách nền bằng công cụ riêng. Hoạ tiết hình học (hồi văn, mặt trống đồng)
   để SVG cho nét ở mọi mức phóng và nhẹ file.
   ══════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────── BẢNG MÀU */
[data-theme="in"]{
  --paper:#F3E7C6; --paper-2:#FCF6E4; --paper-3:#EBDCB2; --paper-4:#DECB96;
  --ink:#2B1E0D; --ink-2:#6A5530; --ink-3:#8E7850;
  --line:#DCC88F; --line-2:#C3A961;
  --son:#A81E12; --son-2:#C4301E; --son-tint:#F7DED6;
  --dong:#8A6714; --dong-tint:#F1E3B6;
  --luc:#2C6A4E; --luc-tint:#DCEAE1;
  --lam:#25547E; --lam-tint:#DBE7F1;
  --tim:#63498A; --tim-tint:#E6DEF2;
  --shadow-1:0 1px 2px rgba(74,52,14,.10);
  --shadow-2:0 4px 14px rgba(74,52,14,.14), 0 1px 3px rgba(74,52,14,.08);
  --shadow-3:0 16px 44px rgba(52,36,8,.26), 0 2px 8px rgba(52,36,8,.12);

  /* son của tấm phả, đo từ ảnh */
  --tp-son:#A81E12; --tp-son-dam:#7C1109;
  --tp-vang:#E2D18C;
  /* hồi văn đỏ viền trong, tile 26px khớp tỉ lệ trên bản in */
  --hoi-van-ngang:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M0 24H26M2 24V2H24V19H9V9H17' fill='none' stroke='%23A81E12' stroke-width='2'/%3E%3C/svg%3E");
  --hoi-van-doc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M24 0V26M24 2H2V24H19V9H9' fill='none' stroke='%23A81E12' stroke-width='2'/%3E%3C/svg%3E");
}

[data-theme="in"] body::before{
  opacity:1;
  background:
    radial-gradient(1200px 700px at 12% -12%, rgba(196,169,97,.28), transparent 60%),
    radial-gradient(900px 560px at 94% 4%, rgba(168,30,18,.09), transparent 58%),
    linear-gradient(#F3E7C6,#EFE0B8);
}

/* ────────────────────────────────────────────── KHUNG APP */
[data-theme="in"] .topbar,
[data-theme="in"] .tabs{ border-bottom-color:var(--line-2) }
[data-theme="in"] .topbar{ box-shadow:0 1px 0 rgba(168,30,18,.18) }
[data-theme="in"] .brand-mark{
  background:linear-gradient(155deg,#B92316,#7C150C);
  border-radius:6px; box-shadow:0 0 0 1.5px #E8C56A inset;
}
[data-theme="in"] .tab.on{ border-radius:6px }

/* mặt bàn quanh tấm phả — để tờ giấy nổi lên trên */
[data-theme="in"] .canvas{
  background:
    radial-gradient(1000px 700px at 50% 40%, #EFE2BD, #E2D2A6 70%, #D8C692 100%);
}

/* ══════════════════════════════════════════════ TẤM PHẢ (nằm trong #world) */
.to-pha{ display:none }

[data-theme="in"] .to-pha{
  display:block; position:absolute; left:0; top:0;
  background:
    radial-gradient(120% 80% at 50% 0%, #F7EEC8 0%, #F0E1A8 42%, #E6CF83 100%);
  box-shadow:0 18px 60px rgba(60,40,10,.28), 0 3px 12px rgba(60,40,10,.16);
}

/* ---- mặt trống đồng chìm giữa tấm.
   Đường kính bám cạnh NGẮN của tấm, nên cây rộng bao nhiêu thì mặt trống
   vẫn tròn trịa nằm giữa, không bị kéo méo hay tràn ra ngoài khung. */
[data-theme="in"] .tp-trong{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  height:74%; aspect-ratio:1; max-width:74%; opacity:.17;
  background:url("hoa-van/trong-dong.svg") center/contain no-repeat;
}

/* ---- khung: nét đen ngoài + dải hồi văn son bên trong */
[data-theme="in"] .tp-khung{
  position:absolute; inset:22px; border:3px solid #1A1612;
}
[data-theme="in"] .tp-khung::after{
  content:''; position:absolute; inset:11px;
  background:
    var(--hoi-van-ngang) repeat-x left top,
    var(--hoi-van-ngang) repeat-x left bottom,
    var(--hoi-van-doc) repeat-y left top,
    var(--hoi-van-doc) repeat-y right top;
}
/* bốn góc lôi văn, cùng một ảnh xoay bốn hướng */
[data-theme="in"] .tp-goc{
  position:absolute; width:132px; height:135px;
  background:url("hoa-van/goc-khung.png") center/contain no-repeat;
}
[data-theme="in"] .tp-goc.g1{ left:12px;  top:12px }
[data-theme="in"] .tp-goc.g2{ right:12px; top:12px;    transform:scaleX(-1) }
[data-theme="in"] .tp-goc.g3{ left:12px;  bottom:12px; transform:scaleY(-1) }
[data-theme="in"] .tp-goc.g4{ right:12px; bottom:12px; transform:scale(-1) }

/* Rồng chầu, cuốn thư và hai dải câu đối đã bỏ: chúng có kích thước cố định,
   đặt trên tấm phả co giãn theo bề rộng cây thì lúc thì chen chúc, lúc thì
   lọt thỏm. Giữ lại giấy vàng, khung hồi văn, góc lôi văn và mặt trống đồng —
   đều bám theo cạnh tấm nên khổ nào cũng cân. Câu đối vẫn còn trong dữ liệu
   (`meta.cauDoi`) và hiện ở tab Tư liệu. */

/* ══════════════════════════════════════════════ THẺ NGƯỜI KIỂU BẢN IN */
[data-theme="in"] .world{ z-index:1 }

[data-theme="in"] .node{
  background:linear-gradient(180deg,#FDFAF0,#EDE6D2);
  border:1.3px solid #26364F; border-radius:3px;
  box-shadow:2.5px 2.5px 0 rgba(38,54,79,.20);
  padding:5px 8px; align-items:center; text-align:center;
}
[data-theme="in"] .node::before{        /* vạch màu chuyển lên cạnh trên */
  left:0; right:0; top:0; bottom:auto; width:auto; height:3px; border-radius:0;
}
[data-theme="in"] .node:hover{
  border-color:var(--son); box-shadow:3.5px 3.5px 0 rgba(38,54,79,.24);
}
[data-theme="in"] .node.sel{
  border-color:var(--son); box-shadow:0 0 0 2px var(--son), 2.5px 2.5px 0 rgba(38,54,79,.20);
}
[data-theme="in"] .node.path{ border-color:var(--son-2) }
[data-theme="in"] .node.he-dau,
[data-theme="in"] .node.he-re{ background:linear-gradient(180deg,#FBF6E7,#E9E1CB); border-style:dashed }
/* .node xếp cột và canh giữa, nên con của nó co theo nội dung thay vì giãn hết
   bề ngang — tên dài sẽ tràn khỏi thẻ nếu không chặn lại. */
[data-theme="in"] .node-name,
[data-theme="in"] .node-meta{ max-width:100%; align-self:stretch }
[data-theme="in"] .node-name{ text-transform:uppercase; font-size:11.5px; letter-spacing:.02em; font-weight:700 }
[data-theme="in"] .node-meta{ color:var(--ink-2); font-size:10px }
[data-theme="in"] .node-toggle{ background:#FDFAF0; border-color:#26364F; border-radius:3px; font-weight:700 }
[data-theme="in"] .node-toggle:hover{ background:var(--son); border-color:var(--son) }
[data-theme="in"] .node-tag{ border-radius:2px; box-shadow:none }

[data-theme="in"] .links path{ stroke:#3A4A63; stroke-width:1.4px }
[data-theme="in"] .links path.hl{ stroke:var(--son); stroke-width:2.4px }

/* ══════════════════════════════════════════════ CỘT "ĐỜI THỨ N" */
#genRail{ position:absolute; inset:0; pointer-events:none }
.gen-rail-i{
  position:absolute; display:flex; align-items:center; gap:5px;
  font-size:9.5px; font-weight:700; letter-spacing:.06em; white-space:nowrap;
  color:var(--son); text-transform:uppercase;
}
.gen-rail-i::after{                     /* mũi tên chỉ vào hàng */
  content:''; width:0; height:0; border:4px solid transparent; border-left-color:var(--son);
}
.gen-rail-i:not(.hz){ height:58px }
.gen-rail-i.hz{ width:156px; justify-content:center }
.gen-rail-i.hz::after{ border-left-color:transparent; border-top-color:var(--son); margin-top:4px }

/* trên tấm phả in thì nhãn to và đậm như bản gốc */
[data-theme="in"] .gen-rail-i{
  font-family:var(--serif); font-size:15px; letter-spacing:.01em;
  color:#8C1409; text-shadow:0 1px 0 rgba(255,250,230,.6);
}
[data-theme="in"] .gen-rail-i::after{ border-width:7px; border-left-color:#8C1409 }
[data-theme="in"] .gen-rail-i.hz::after{ border-left-color:transparent; border-top-color:#8C1409 }

/* ══════════════════════════════════════════════ CÁC MÀN KHÁC */
[data-theme="in"] .card,
[data-theme="in"] .stat,
[data-theme="in"] .pcard,
[data-theme="in"] .tbl-wrap{ border-color:var(--line-2); border-radius:8px }
[data-theme="in"] .card{
  box-shadow:2px 2px 0 rgba(76,58,27,.10);
  background:linear-gradient(180deg,#FDF8E9,#F7EFD9);
}
[data-theme="in"] .card-h{ color:#7C150C; letter-spacing:.02em }
[data-theme="in"] table.tbl th{ background:#EEE1B8; color:#6A5530; border-bottom-color:var(--line-2) }
[data-theme="in"] .gen-h{ background:transparent }
[data-theme="in"] .gen-h h3{ color:#7C150C; text-transform:uppercase; letter-spacing:.06em; font-size:15px }
[data-theme="in"] .pill,
[data-theme="in"] .lg{ border-radius:4px; border-color:var(--line-2) }
[data-theme="in"] .canvas-tools{ border-radius:6px; border-color:var(--line-2) }
[data-theme="in"] .chip{ border-radius:4px }
[data-theme="in"] .btn{ border-radius:6px }
[data-theme="in"] .badge{ border-radius:4px }

@media print{
  [data-theme="in"] .canvas{ background:none }
  .gen-rail-i{ color:#8C1409 }
}