/* assets/details-layout.css */
/* Layout-only + overrides to defeat old theme on details page (WHITE BG / BLACK TEXT / BLACK BORDERS) */

:root {
  /* Keep palette vars (safe) */
  --pp-blue: #8bb0ff;
  --pp-purple: #b48dff;
  --pp-pink: #ff9ad6;
  --pp-orange: #ffb07a;

  /* White + Black theme */
  --bg: #ffffff;

  /* Surfaces */
  --card: #ffffff;
  --card2: #ffffff;

  /* Borders / Text */
  --border: rgba(0, 0, 0, .85);
  --border2: rgba(0, 0, 0, .60);

  --text: #000000;
  --muted: rgba(0, 0, 0, .72);

  /* Shadows */
  --shadow: 0 18px 55px rgba(0, 0, 0, .14);

  /* Local layout vars (details-only) */
  --radius-lg: 16px;
  --radius-xl: 20px;

  --panel2: #ffffff;
  --shadow-soft: 0 10px 26px rgba(0, 0, 0, .10);

  /* Z-Index */
  --z-bg: -1;
  --z-base: 1;
  --z-card: 10;
  --z-sticky: 50;
}

body.page-details {
  margin: 0;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;

  /* ✅ IMPORTANT: remove any global background */
  background: var(--bg) !important;
}

/* Hide orb backgrounds if style.css injects them */
body.page-details .bg-orb { display: none !important; }

/* container */
body.page-details .wrap {
  max-width: 1180px !important;
  margin: 22px auto 36px !important;
  padding: 0 18px !important;
}

/* top bar */
body.page-details .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 14px 16px;
  border-radius: var(--radius-xl);

  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

body.page-details .topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.page-details .brand-bubble {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid var(--border2);
}

body.page-details .page-title {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

body.page-details .page-title b { font-size: 18px; }

body.page-details .page-title span {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

body.page-details .topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* pills */
body.page-details .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 8px 12px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 12px;

  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--border2);
}

body.page-details .pill:hover { background: rgba(0, 0, 0, .04); }

/* main card */
body.page-details .main-card {
  margin-top: 14px;
  border-radius: var(--radius-xl);

  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

body.page-details .main-head {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, .18);
  font-size: 12px;
  color: var(--muted);
}

body.page-details .main-body { padding: 16px; }

/* top row grid */
body.page-details .grid-2 {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 14px;
}

@media (max-width: 900px) {
  body.page-details .grid-2 { grid-template-columns: 1fr; }
}

/* cards inside */
body.page-details .card {
  border-radius: var(--radius-lg) !important;
  background: #ffffff !important;
  border: 1px solid var(--border2) !important;
  padding: 14px !important;
  box-shadow: none !important;
}

body.page-details .card h3 {
  margin: 0 0 10px;
  font-size: 14px;
  letter-spacing: -.01em;
  color: var(--text);
}

/* profile */
body.page-details .profile-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

body.page-details .avatar {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid var(--border2);
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--text);
}

body.page-details .profile-name {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body.page-details .profile-name b { font-size: 14px; }

/* badge */
body.page-details .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--muted);
  background: #ffffff;
  border: 1px solid var(--border2);
  width: fit-content;
}

body.page-details .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(239, 68, 68, .95);
}

body.page-details .dot.good { background: rgba(34, 197, 94, .95); }

/* key-value */
body.page-details .kv {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px dashed rgba(0, 0, 0, .25);
}

body.page-details .kv:first-of-type { border-top: none; }

body.page-details .kv .k {
  color: var(--muted);
  font-size: 12px;
}

body.page-details .kv .v {
  font-size: 12px;
  color: var(--text);
}

/* tags */
body.page-details .tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--border2);
  font-weight: 700;
  font-size: 12px;
  margin-right: 8px;
  margin-top: 6px;
  color: var(--text);
}

/* lists */
body.page-details .linklist {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

body.page-details .linklist li {
  padding: 10px 0;
  border-top: 1px dashed rgba(0, 0, 0, .25);
  display: flex;
  align-items: center;
  gap: 10px;
}

body.page-details .linklist li:first-child { border-top: none; }

body.page-details .linklist a {
  color: #000000;
  text-decoration: none;
  font-weight: 650;
  font-size: 12px;
}

body.page-details .linklist a:hover { opacity: .85; text-decoration: underline; }

/* full width card */
body.page-details .full { margin-top: 14px; }

.header-title{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 24px;
  border-radius: 18px;

  /* base look */
  background: #fff;
  color: #000;
  border: 1px solid rgba(0,0,0,.85);

  /* 3D depth */
  transform-style: preserve-3d;
  box-shadow:
    0 10px 0 rgba(0,0,0,.22),      /* hard “ledge” shadow */
    0 18px 40px rgba(0,0,0,.18);   /* soft drop shadow */

  /* animation */
  animation: ppFloat 3.2s ease-in-out infinite;
  will-change: transform;
}

/* glossy highlight layer */
.header-title::before{
  content:"";
  position:absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events:none;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,.95),
      rgba(255,255,255,.40) 35%,
      rgba(255,255,255,0) 70%);
  opacity: .9;
  transform: translateZ(10px);
}

/* moving “shine sweep” */
.header-title::after{
  content:"";
  position:absolute;
  inset: -30% -40%;
  border-radius: inherit;
  pointer-events:none;

  background: linear-gradient(
    120deg,
    transparent 40%,
    rgba(255,255,255,.65) 50%,
    transparent 60%
  );

  transform: translateX(-45%) rotate(8deg) translateZ(14px);
  opacity: .55;
  animation: ppShine 2.8s ease-in-out infinite;
}

/* hover: tilt like 3D */
.header-title:hover{
  transform: perspective(900px) rotateX(7deg) rotateY(-10deg) translateY(-2px);
  box-shadow:
    0 12px 0 rgba(0,0,0,.24),
    0 24px 55px rgba(0,0,0,.22);
}

/* animations */
@keyframes ppFloat{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}

@keyframes ppShine{
  0%,100% { transform: translateX(-45%) rotate(8deg) translateZ(14px); opacity:.35; }
  50%     { transform: translateX(45%)  rotate(8deg) translateZ(14px); opacity:.70; }
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .header-title{ animation:none !important; }
  .header-title::after{ animation:none !important; }
}

.header-inner{
  perspective: 900px;
}