/* =================================================================
   morgan.me — Combined edition
   Layers IE6-portfolio warmth on top of the MSN portal base.
   Load AFTER msn-portal.css.
   ================================================================= */

/* ---------- PROFILE CARD (top of left sidebar) ---------- */
.profile-card {
  text-align: center; margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.profile-frame {
  width: 128px;
  height: 128px;
  box-sizing: border-box;
  border-radius: 0px;     /* round the FRAME, not the img */
  overflow: hidden;       /* clips the photo to the rounded frame */
  display: block;
}

.profile-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.profile-new {
  position: absolute; top: -8px; left: -8px; z-index: 2;
  background: #cc0000; color: #fff; font-family: Verdana, sans-serif; font-weight: bold;
  font-size: 9px; padding: 2px 6px; border: 2px solid #fff; box-shadow: 1px 1px 0 rgba(48,64,86,.18);
  transform: rotate(-12deg);
}
.profile-name {
  font-family: Georgia, "Times New Roman", serif; font-weight: bold; font-size: 16px;
  color: var(--module-deep); margin-top: 8px; line-height: 1.1;
}
.profile-role { font-size: 10px; color: var(--ink-soft); margin: 1px 0 6px; }
.profile-status {
  display: inline-flex; align-items: center; gap: 5px;
  background: #eff7dd; border: 1px solid #9bbf5f; color: #4d7a0e;
  font-weight: bold; font-size: 10px; padding: 3px 9px;
}
.profile-status .led {
  width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d6ff9a, #7ec61d 55%, #4f9606 100%);
  animation: led 1.6s ease-in-out infinite;
}
@keyframes led { 0%,100%{opacity:1} 50%{opacity:.5} }

/* ---------- PROJECT CARDS (center) ---------- */
.pcards { display: flex; flex-direction: column; }
.pcard {
  display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px dotted #dce4ec;
}
.pcard:last-child { border-bottom: none; }
.pcard-ico {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 2px;
  display: grid; place-items: center; color: #fff; font-weight: bold; font-size: 14px;
  font-family: Verdana, sans-serif; border: 2px outset rgba(255,255,255,.45);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.ic-c   { background: linear-gradient(135deg,#7ec0ef,#2f7fbe); }
.ic-os  { background: linear-gradient(135deg,#b69be6,#6a4aa8); }
.ic-aws { background: linear-gradient(135deg,#ffc46b,#f08a18); }
.ic-k8  { background: linear-gradient(135deg,#7fd6a6,#239a5c); }
.ic-diss { background: linear-gradient(135deg, #3a1043, #380a59); }
.ic-tpc { background: linear-gradient(135deg, #d87c0c, #cdb125); }
.ic-qdk { background: linear-gradient(135deg, #1f5d92, #1f9be8); }
.ic-tui { background: linear-gradient(135deg, #db430c, #e8511f); }
.pcard-main { flex: 1 1 auto; min-width: 0; }
.pcard-name { font-family: Georgia, serif; font-size: 14px; font-weight: bold; }
.pcard-name a { color: var(--link); }
.pcard-desc { font-size: 11px; color: var(--ink-soft); margin: 2px 0 5px; }
.pcard-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.pchip {
  font-size: 9.5px; font-weight: bold; color: var(--module-deep);
  background: #eef2f6; border: 1px solid #b9c2cc; padding: 1px 6px;
}
.tag-new {
  display: inline-block; margin-left: 6px; font-family: Verdana, sans-serif;
  font-weight: bold; font-size: 8.5px; color: #fff; background: #cc0000;
  padding: 1px 5px; vertical-align: middle; letter-spacing: .4px;
}
.tag-hot {
  display: inline-block; margin-left: 6px; font-family: Verdana, sans-serif;
  font-weight: bold; font-size: 8.5px; color: #fff; background: var(--orange);
  padding: 1px 5px; vertical-align: middle; letter-spacing: .4px;
}
.tag-new.blink { animation: blink 1s steps(2,start) infinite; }
.tag-hot.blink { animation: blink 1s steps(2,start) infinite; }

/* ---------- SKILL BARS (right module) ---------- */
.skill { margin-bottom: 8px; }
.skill:last-child { margin-bottom: 0; }
.skill-top { display: flex; justify-content: space-between; font-size: 10px; font-weight: bold; color: var(--ink); margin-bottom: 2px; }
.skill-bar { height: 11px; background: #e6ebf0; border: 1px solid #b9c2cc; padding: 1px; }
.skill-fill {
  height: 100%; background: linear-gradient(to bottom, #6fb6e8, #1f5d92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}

/* ---------- UNDER CONSTRUCTION (compact, on feature) ---------- */
.construction {
  display: flex; align-items: center; gap: 10px; justify-content: center;
  background: #fffdf2; border-top: 1px solid var(--rule);
  padding: 6px 10px; font-size: 10.5px; color: #7a5a10;
}
.barber {
  flex: 0 0 auto; width: 148px; height: 16px;
  background: repeating-linear-gradient(45deg, #f5c518 0 10px, #1a1a1a 10px 20px);
  background-size: 28px 28px; border: 1px solid #1a1a1a;
  animation: barber .6s linear infinite;
}
@keyframes barber { to { background-position: 28px 0; } }
.construction b { font-family: Verdana, sans-serif; letter-spacing: .4px; }

/* ---------- RAINBOW DIVIDER ---------- */
.rainbow {
  height: 5px; border: none; margin: 0;
  background: linear-gradient(90deg,#ff3b3b,#ff9a00,#ffe500,#33cc33,#1f9be8,#7a52c0,#ff3b3b);
  background-size: 200% 100%; animation: rainbow 6s linear infinite;
}
@keyframes rainbow { to { background-position: 200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .barber, .rainbow, .profile-status .led, .tag-new.blink { animation: none !important; }
  .tag-new.blink { visibility: visible !important; }
}