/* ══════════════════════════════════════════════════════════════════════
   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ằ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.

   Tấm nay là giấy vàng trơn: mọi hoạ tiết đã bỏ, xem ghi chú ở khối
   TẤM PHẢ bên dưới. Cái còn giữ của tấm in là bảng màu và lối chữ.
   ══════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────── 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;
  /* sáu sắc chia nhóm con cùng cha — đo từ chính bản in, đậm hơn bộ nền sáng
     một chút cho ăn với giấy dó ngả vàng */
  --nhom-1:#A81E12; --nhom-2:#8A6714; --nhom-3:#2C6A4E;
  --nhom-4:#1F6474; --nhom-5:#25547E; --nhom-6:#63498A;
  --nhom-chu:#FDF6E2;
  --noi-vien:#F2E4B8;        /* tông giữa của giấy, để nét viền chìm vào nền */
  --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;
}

[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ọi hoạ tiết trên tấm đã bỏ — rồng chầu, cuốn thư, câu đối trước đây, rồi
   đến nét viền đen, hồi văn son, bốn góc lôi văn và mặt trống đồng. Chúng
   tranh chỗ với chính cái cây: hoạ tiết cỡ cố định trên tấm co giãn theo bề
   rộng cây thì lúc chen chúc lúc lọt thỏm, còn khung thì ép lề tấm rộng ra
   chỉ để chừa chỗ cho nó. Nay chỉ còn giấy vàng trơ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,#EFE8D6);
  border:1.2px solid #26364F; border-radius:2px;
  box-shadow:2px 2px 0 rgba(38,54,79,.18);
}
/* Ô phối ngẫu trên bản in: một gạch kẻ ngang chia ô, đúng lối phả in cũ
   ghi "chính thất" ngay dưới tên ông. */
[data-theme="in"] .node-vc{
  border-top:1px solid #26364F; background:rgba(38,54,79,.05); color:#3A3024;
}
[data-theme="in"] .node-vc:last-child{ border-radius:0 0 2px 2px }
[data-theme="in"] .node:hover{
  border-color:var(--son); box-shadow:3px 3px 0 rgba(38,54,79,.22);
}
[data-theme="in"] .node.sel{
  border-color:var(--son); box-shadow:0 0 0 2px var(--son), 2px 2px 0 rgba(38,54,79,.18);
}
[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 }
[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-live{ box-shadow:0 0 0 2px #FDFAF0 }

/* !important vì màu nhóm ghi thẳng vào style của <path> */
[data-theme="in"] .links path.hl{ stroke:var(--son)!important; 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:44px }   /* JS ghi đè theo chiều cao hàng thật */
.gen-rail-i.hz{ width:132px; 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 }
}

/* ══════════════════════════════════════════════ CÂY THỤT LỀ TRÊN NỀN BẢN IN
   Không có tấm giấy co giãn ở đây — danh sách chạy suốt chiều dài trang, nên
   giữ chất "bản in" bằng nét kẻ và cỡ chữ chứ không bằng khung hồi văn. */
[data-theme="in"] .canvas.la-thutle{
  background:linear-gradient(180deg,#F7EEC8 0%,#F1E3AE 100%);
}
[data-theme="in"] .tl-dong{ border-bottom:1px solid rgba(38,54,79,.14); border-radius:0 }
[data-theme="in"] .tl-dong:hover{ background:rgba(255,255,255,.45) }
[data-theme="in"] .tl-dong.sel{ background:rgba(168,30,18,.10); box-shadow:inset 0 0 0 1px var(--tp-son) }
[data-theme="in"] .tl-ten{ text-transform:uppercase; font-size:13px; letter-spacing:.02em; font-weight:700 }
[data-theme="in"] .tl-meta{ color:#6B5B3E }
[data-theme="in"] .tl-ray,
[data-theme="in"] .tl-moc{ border-color:rgba(38,54,79,.35) }
[data-theme="in"] .tl-mo{ background:#FDFAF0; border-color:#26364F; border-radius:3px }
[data-theme="in"] .tl-vc{ background:rgba(255,255,255,.6); border-color:rgba(38,54,79,.3); color:#3A3024 }

/* ══════════════════════════════════════════════ BẢN IN TRÊN KHỔ HẸP
   Không còn khối ghi đè nào ở đây, và đó là chủ ý.

   Trước kia khổ hẹp tắt hoạ tiết (mặt trống đồng, bốn góc lôi văn, dải hồi
   văn) rồi đổi luôn nét thẻ sang tông giấy, vì lề 170–190px mà hoạ tiết đòi
   hỏi đã đẩy mức thu nhỏ xuống 0,5 — chữ trên thẻ khi ấy còn bằng hạt vừng.
   Cái giá phải trả là điện thoại và máy tính trông ra hai trang khác nhau.

   Nay bố cục xếp khít theo đời đã cắt được chừng một phần tư bề ngang tấm và
   giữ chữ ở cỡ thật ở mọi khổ màn, nên chỗ chật ấy không còn: cùng một tấm,
   cùng hoạ tiết, cùng cỡ chữ, điện thoại chỉ là khung nhìn hẹp hơn kéo trên
   tấm ấy. Thêm nữa, mặc định của khổ hẹp vẫn là cây thụt lề — tấm phả trên
   điện thoại là lựa chọn có chủ ý của người xem, không phải thứ bị ép vào.

   ⚠ Đừng thêm lại khối @media thẻ/hoạ tiết ở đây mà chưa xem lại DESIGN.md §6. */