/* ═══════════════════════════════════════════════════════════
   اللوحة التفصيلية — Detail sheet
   ═══════════════════════════════════════════════════════════ */

.sheet{position:fixed; inset:0; z-index:200}
.sheet-bg{
  position:absolute; inset:0; background:rgba(8,13,19,.62); backdrop-filter:blur(6px);
  opacity:0; transition:opacity .3s var(--ease);
}
.sheet.open .sheet-bg{opacity:1}

.sheet-panel{
  position:absolute; inset-block:0; inset-inline-end:0;
  width:min(560px, 100vw); background:var(--surface); overflow-y:auto;
  box-shadow:var(--shadow-3); outline:none;
  transform:translateX(-100%); transition:transform .38s cubic-bezier(.2,.8,.2,1);
}
[dir="ltr"] .sheet-panel{transform:translateX(100%)}
.sheet.open .sheet-panel{transform:none}

.sheet-x{
  position:absolute; z-index:3; inset-block-start:16px; inset-inline-start:16px;
  width:36px; height:36px; display:grid; place-items:center; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.9); border:1px solid var(--line); color:var(--ink);
  backdrop-filter:blur(8px); transition:background .18s var(--ease)
}
.sheet-x:hover{background:#fff; border-color:var(--brass); color:var(--brass)}
[data-theme="dark"] .sheet-x{background:rgba(19,27,36,.82); border-color:var(--line-2); color:var(--ink)}
[data-theme="dark"] .sheet-x:hover{background:var(--surface-3); border-color:var(--brass); color:var(--brass)}

/* رأس الشريك — الصورة وحدها تُقصّ، واللوح يطفو فوق الحافة بلا قطع */
.sheet-head{position:relative; height:180px; background:var(--ink)}
.sheet-photo{
  position:absolute; inset:0; overflow:hidden;
  background-size:cover; background-position:center; opacity:.5; filter:grayscale(.4);
}
.sheet-head::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(16,23,32,.92), rgba(16,23,32,.3));
}
.sheet-mark{
  position:absolute; z-index:3; inset-block-end:-34px; inset-inline-start:32px;
  width:148px; height:96px; display:grid; place-items:center; padding:16px 20px;
  background:#fff; border-radius:16px;
  border:1px solid rgba(16,23,32,.1);
  box-shadow:0 18px 40px -14px rgba(8,13,19,.55), 0 2px 6px rgba(8,13,19,.14);
}
.sheet-mark img{max-height:100%; max-width:100%; width:auto; object-fit:contain}
.sheet-mark img.light-mark{filter:invert(1) brightness(.26) saturate(0)}

.sheet-main{padding:58px 32px 40px; display:flex; flex-direction:column; gap:14px}
.sheet-main > h2{font-size:26px; line-height:1.3}
.sheet-sub{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-3)}
.sheet-sub .flag{width:22px; height:15px; border-radius:3px; overflow:hidden; flex:none; box-shadow:0 0 0 1px var(--line-2)}
.sheet-sub .flag svg{width:100%; height:100%; display:block}
.sheet-text{font-size:15px; line-height:1.85; color:var(--ink-2); max-width:62ch}
.sheet-text.pre{white-space:pre-line}
.sheet-h3{font-size:15px; margin-top:12px; padding-top:16px; border-top:1px solid var(--line); color:var(--brass)}

.sheet-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-top:6px}
.sheet-facts div{background:var(--surface); padding:14px 16px}
.sheet-facts b{display:block; font-family:'Tajawal'; font-weight:800; font-size:16px; color:var(--ink); line-height:1.3}
.sheet-facts span{font-size:11.5px; color:var(--ink-3); margin-top:3px; display:block}

.sheet-list{margin:0; padding-inline-start:20px; display:flex; flex-direction:column; gap:8px; font-size:14.5px; color:var(--ink-2)}
.sheet-list li::marker{color:var(--brass)}
.sheet-main .btn{align-self:flex-start; margin-top:10px}

/* رأس الشخص */
.person-sheet{padding-top:64px}
.person-head{display:flex; gap:20px; align-items:flex-start; margin-bottom:6px}
.person-av.lg{
  width:104px; height:104px; border-radius:20px; overflow:hidden; flex:none;
  background:var(--surface-3); box-shadow:0 0 0 1px var(--line);
}
.person-av.lg img{width:100%; height:100%; object-fit:cover}
.person-head h2{font-size:23px; line-height:1.3; margin-bottom:5px}
.sheet-links{display:flex; flex-wrap:wrap; gap:7px; margin-top:11px}
.sheet-links a{
  font-size:12px; font-weight:600; padding:5px 12px; border-radius:100px;
  background:var(--brass-soft); color:var(--brass); border:1px solid var(--brass-line);
}
.sheet-links a:hover{background:var(--brass); color:#fff}

@media (max-width:560px){
  .sheet-panel{width:100vw}
  .sheet-main{padding:48px 22px 34px}
  .person-head{flex-direction:column; gap:14px}
}
@media (prefers-reduced-motion:reduce){
  .sheet-panel,.sheet-bg{transition:none}
}