/* ═══════════════════════════════════════════════════════════
   PLAYER PROFILE V1 — shared component stylesheet
   ═══════════════════════════════════════════════════════════
   Shared visual shell for Player Profile across Inner Sanctum.

   Visual management goals:
   - information first
   - minimal container weight
   - player identity + SAGE verdict dominate
   - supporting data reads as structured bands, not stacked cards
   - light neutral canvas
   - restrained status color only where it communicates meaning
   ═══════════════════════════════════════════════════════════ */

.pp-overlay{
  position:fixed;
  inset:0;
  background:rgba(38,34,29,0.34);
  z-index:3000;
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:24px 16px;
  overflow-y:auto;
}

.pp-overlay.pp-open{
  display:flex;
}

.pp-modal{
  background:#f7f5f1;
  border:1px solid #ddd8cf;
  border-radius:14px;
  max-width:900px;
  width:100%;
  box-shadow:0 18px 46px rgba(43,38,31,0.16);
  font-family:'Lora',Georgia,serif;
  color:#282621;
  margin:auto 0;
  overflow:hidden;
}

.pp-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 18px;
  background:#ffffff;
  border-bottom:1px solid #e5e0d8;
}

.pp-header-title{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:#8b7440;
}

.pp-close{
  background:none;
  border:none;
  color:#756f66;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  padding:2px 6px;
}

.pp-close:hover{
  color:#8b7440;
}

.pp-close:focus-visible{
  outline:2px solid #b49a58;
  outline-offset:2px;
  border-radius:4px;
}

.pp-body{
  padding:18px 22px 20px;
  display:flex;
  flex-direction:column;
  gap:0;
}

/* ═══════════════════════════════════════════════════════════
   Identity
   ═══════════════════════════════════════════════════════════ */

.pp-identity{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:2px 0 16px;
  border-bottom:1px solid #e3ded6;
}

.pp-photo{
  width:60px;
  height:60px;
  border-radius:8px;
  object-fit:cover;
  background:#e8e4dc;
  flex-shrink:0;
}

.pp-identity-text{
  min-width:0;
}

.pp-name{
  font-family:'Cinzel',serif;
  font-size:24px;
  font-weight:600;
  color:#25231f;
  line-height:1.15;
}

.pp-meta{
  font-family:'JetBrains Mono',monospace;
  font-size:11px;
  color:#777067;
  margin-top:4px;
  letter-spacing:0.2px;
}

/* ═══════════════════════════════════════════════════════════
   Generic sections
   No heavy cards. Sections behave like content bands.
   ═══════════════════════════════════════════════════════════ */

.pp-section{
  background:transparent;
  border:none;
  border-bottom:1px solid #e5e0d8;
  border-radius:0;
  padding:14px 0;
  box-shadow:none;
}

.pp-section-title{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:1.4px;
  text-transform:uppercase;
  color:#8a8278;
  margin-bottom:8px;
}

/* ═══════════════════════════════════════════════════════════
   SAGE Verdict
   Strongest visual element after player identity.
   ═══════════════════════════════════════════════════════════ */

.pp-section:has(.pp-verdict-top){
  background:#f0f6f1;
  border:1px solid #d2dfd4;
  border-left:4px solid #4d8a5c;
  border-radius:8px;
  padding:14px 16px;
  margin:14px 0 0;
}

.pp-verdict-top{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:5px;
}

.pp-verdict-label{
  font-family:'Cinzel',serif;
  font-size:20px;
  font-weight:600;
  color:#326b42;
}

.pp-verdict-action{
  font-family:'JetBrains Mono',monospace;
  font-size:14px;
  font-weight:700;
  letter-spacing:0.5px;
  color:#8a6b27;
}

.pp-verdict-confidence{
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:0.4px;
  padding:3px 8px;
  border-radius:12px;
  background:#ffffff;
  color:#39744a;
  border:1px solid #bdd3c2;
}

.pp-reasons{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:13px;
  color:#4d514b;
  margin-top:4px;
}

.pp-reasons li::before{
  content:'✓ ';
  color:#39744a;
}

/* ═══════════════════════════════════════════════════════════
   Rank / Value and Weekly Context
   Compact data bands.
   ═══════════════════════════════════════════════════════════ */

.pp-stat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:18px;
}

.pp-stat{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.pp-stat-label{
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#8a8278;
}

.pp-stat-value{
  font-family:'JetBrains Mono',monospace;
  font-size:20px;
  font-weight:600;
  color:#26241f;
}

.pp-context-note{
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid #ece7df;
  font-size:13px;
  color:#504b44;
  line-height:1.45;
}

/* ═══════════════════════════════════════════════════════════
   Recent Form
   ═══════════════════════════════════════════════════════════ */

.pp-trend{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-family:'JetBrains Mono',monospace;
  font-size:12px;
  font-weight:700;
}

.pp-trend-up{
  color:#39744a;
}

.pp-trend-down{
  color:#b2544e;
}

.pp-trend-flat{
  color:#7a736a;
}

.pp-games-table{
  width:100%;
  border-collapse:collapse;
  margin-top:8px;
  font-size:12px;
}

.pp-games-table th{
  text-align:left;
  font-family:'JetBrains Mono',monospace;
  font-size:9px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#8a8278;
  padding:5px 8px 5px 0;
  border-bottom:1px solid #ddd8d0;
}

.pp-games-table td{
  padding:6px 8px 6px 0;
  border-bottom:1px solid #eeeae4;
  color:#49443d;
}

/* ═══════════════════════════════════════════════════════════
   Risks / Watch
   ═══════════════════════════════════════════════════════════ */

.pp-risk-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:13px;
  color:#6c5524;
}

.pp-risk-list li::before{
  content:'⚠ ';
  color:#bd8427;
}

.pp-outlook-note{
  margin-top:7px;
  font-size:12px;
  color:#777067;
  font-style:italic;
  line-height:1.45;
}

/* ═══════════════════════════════════════════════════════════
   Inner Sanctum Insight
   Distinct closing takeaway without becoming another card.
   ═══════════════════════════════════════════════════════════ */

.pp-insight{
  background:#fbf8ef;
  border:none;
  border-left:4px solid #b49a58;
  border-radius:0 7px 7px 0;
  padding:12px 14px;
  margin-top:14px;
  font-size:13px;
  font-style:italic;
  color:#49443b;
  line-height:1.55;
}

/* Remove divider after the final rendered section */
.pp-body > .pp-section:last-of-type{
  border-bottom:none;
}

/* ═══════════════════════════════════════════════════════════
   Mobile
   ═══════════════════════════════════════════════════════════ */

@media(max-width:640px){

  .pp-overlay{
    padding:0;
  }

  .pp-modal{
    border-radius:0;
    max-width:100%;
    min-height:100%;
  }

  .pp-header{
    padding:12px 14px;
  }

  .pp-body{
    padding:15px 14px 18px;
  }

  .pp-identity{
    padding-bottom:13px;
  }

  .pp-photo{
    width:50px;
    height:50px;
  }

  .pp-name{
    font-size:20px;
  }

  .pp-section{
    padding:12px 0;
  }

  .pp-section:has(.pp-verdict-top){
    padding:13px 14px;
    margin-top:12px;
  }

  .pp-stat-grid{
    grid-template-columns:repeat(2,1fr);
    gap:14px;
  }

  .pp-stat-value{
    font-size:18px;
  }

  .pp-insight{
    margin-top:12px;
  }
}