/*
 * EXPERIENCE XP Character — an XP-era character creator.
 *
 * Visual language borrowed from the Windows XP "Picture Tasks" explorer pane
 * and the user-account picture selector: a blue task sidebar, sunken picture
 * frames, and standard XP buttons from xp.css. Nothing here restyles shared
 * window chrome — the title bar, resize gutters and taskbar button all come
 * from the window manager.
 */

.pfp-window-content {
  overflow: auto;
  padding: 0;
  background: #ece9d8;
  font: 11px Tahoma, sans-serif;
}

.pfp-app {
  display: flex;
  align-items: stretch;
  min-height: 100%;
  box-sizing: border-box;
  color: #000;
}

/* ------------------------------------------------------------- task sidebar */

.pfp-sidebar {
  flex: 0 0 168px;
  box-sizing: border-box;
  padding: 10px 9px;
  /* The XP explorer task-pane gradient. */
  background: linear-gradient(180deg, #7ba2e7 0%, #6375d6 8%, #eef3ff 8%, #dce6f7 100%);
  border-right: 1px solid #b5c7de;
}

.pfp-sidebar-title {
  margin: -10px -9px 10px;
  padding: 4px 9px;
  font-weight: bold;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
}

.pfp-sidebar-note {
  padding: 8px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid #b5c7de;
}

.pfp-sidebar-note strong {
  display: block;
  margin-bottom: 4px;
  color: #003399;
}

.pfp-sidebar-note p {
  margin: 0;
  line-height: 1.35;
}

.pfp-identity-line {
  padding: 6px 8px;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid #b5c7de;
  word-break: break-word;
}

.pfp-current[hidden] {
  display: none;
}

.pfp-current-label {
  margin-bottom: 5px;
  font-weight: bold;
  color: #003399;
}

.pfp-current img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  background: #fff;
  border: 1px solid #7f9db9;
}

/* ---------------------------------------------------------------- main area */

.pfp-main {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 12px;
}

/* ---------------------------------------------------------- product heading */

.pfp-header {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #b5c7de;
}

.pfp-title {
  margin: 0;
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 0.04em;
  color: #003399;
}

.pfp-subtitle {
  margin: 3px 0 0;
  font-size: 11px;
  color: #444;
}

.pfp-step {
  margin-bottom: 14px;
}

.pfp-step-title {
  margin: 0 0 7px;
  font-size: 11px;
  font-weight: bold;
  color: #003399;
}

/* ---------------------------------------------------------- step 1: upload */

.pfp-pick-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pfp-file-meta {
  flex: 1;
  min-width: 140px;
  padding: 3px 6px;
  background: #fff;
  border: 1px solid #7f9db9;
  color: #333;
  word-break: break-all;
}

/* --------------------------------------------------- step 2: the two frames */

.pfp-previews {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.pfp-pane {
  flex: 1 1 168px;
  min-width: 140px;
}

.pfp-pane-label {
  margin-bottom: 4px;
  font-weight: bold;
}

/* Sunken XP picture well. Square, matching the square generated output. */
.pfp-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid;
  border-color: #7f9db9 #fff #fff #7f9db9;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.18);
  overflow: hidden;
}

.pfp-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.pfp-frame img[hidden] {
  display: none;
}

.pfp-frame-empty {
  color: #808080;
}

.pfp-frame-empty[hidden] {
  display: none;
}

/* ------------------------------------------------------------- busy state */

.pfp-busy {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px;
  background: rgba(236, 233, 216, 0.94);
  text-align: center;
}

.pfp-busy[hidden] {
  display: none;
}

/* Indeterminate XP progress: no fake percentage, because the provider gives
   no meaningful progress to report. */
.pfp-progress {
  width: 82%;
  max-width: 150px;
  height: 15px;
  padding: 1px;
  background: #fff;
  border: 1px solid;
  border-color: #7f9db9 #fff #fff #7f9db9;
  overflow: hidden;
}

.pfp-progress-bar {
  width: 40%;
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    #3c8b3c 0 8px,
    #4fae4f 8px 10px
  );
  animation: pfp-progress-slide 1.1s linear infinite;
}

@keyframes pfp-progress-slide {
  from { transform: translateX(-105%); }
  to { transform: translateX(255%); }
}

@media (prefers-reduced-motion: reduce) {
  .pfp-progress-bar {
    animation: none;
    width: 100%;
  }
}

/* ---------------------------------------------------------------- actions */

.pfp-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.pfp-actions button {
  min-width: 96px;
}

/* ----------------------------------------------------------------- status */

.pfp-status {
  min-height: 15px;
  padding: 4px 6px;
  line-height: 1.4;
  white-space: pre-line;
}

.pfp-status--success {
  color: #006600;
}

.pfp-status--error {
  color: #a00;
}

/* ------------------------------------------------------------- narrow window */

@media (max-width: 560px) {
  .pfp-app {
    flex-direction: column;
  }

  .pfp-sidebar {
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid #b5c7de;
  }
}